/* --- Global --- */
        body { 
            background-color: var(--bg-black); 
            color: #eee; 
            font-family: 'Heebo', sans-serif; 
            margin: 0; 
        }
        
        .gallery-container { 
            max-width: 1400px; 
            margin: 0 auto; 
            padding: 40px 20px; 
        }

        /* --- New Header Design (Tactical Style) --- */
        .section-header {
            position: relative;
            padding: 14px 0;
            margin-bottom: 50px;
            border-right: 8px solid var(--primary);
            padding-right: 25px;
            background: linear-gradient(to left, rgba(var(--primary-rgb),0.05), transparent);
        }

        .status-line {
            font-family: 'JetBrains Mono', monospace;
            color: var(--primary);
            font-size: 0.85rem;
            display: flex;
            gap: 20px;
            margin-bottom: 10px;
            opacity: 0.9;
            letter-spacing: 1px;
            direction: ltr; /* שומר על סדר הגיוני באנגלית */
            justify-content: flex-end; /* מיישר לימין בגלל ה-RTL הכללי */
        }

        .section-header h1 {
            font-size: clamp(3rem, 6vw, 5rem);
            font-weight: 900;
            text-transform: uppercase;
            margin: 0;
            line-height: 0.9;
            letter-spacing: -2px;
            color: #fff;
            font-family: 'Heebo', sans-serif;
        }

        .intel-sub {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.1rem;
            color: var(--text-dim);
            margin-top: 10px;
        }

        /* --- Filters Toolbar --- */
        .toolbar-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
            flex-wrap: wrap;
            gap: 20px;
            background: rgba(255,255,255,0.02);
            padding: 15px;
            border: 1px solid var(--edge-color);
            border-radius: 8px;
        }

        .filters-group {
            display: flex;
            gap: 10px;
        }

        .filter-btn {
            background: #1a1d26;
            border: 1px solid #333;
            color: #ccc;
            padding: 10px 24px;
            border-radius: 6px;
            cursor: pointer;
            transition: 0.2s;
            text-decoration: none;
            font-family: 'Heebo', sans-serif;
            font-weight: 700;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 8px;
            text-transform: uppercase;
        }

        .filter-btn:hover { transform: translateY(-2px); filter: brightness(1.2); }
        .filter-btn.active { border-color: #fff; color: #fff; background: #2a2d36; }

        /* כפתורים ספציפיים לפי התמונה */
        .btn-create {
            background: var(--btn-green);
            color: white;
            border: none;
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
            font-size: 1.1rem;
        }
        .btn-create:hover { background: #059669; }

        .btn-popular {
            background: var(--btn-purple);
            color: white;
            border: none;
            box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
        }
        .btn-popular:hover { background: #7c3aed; }

        /* Toggle Show Old */
        .toggle-container {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #888;
            font-size: 0.9rem;
            cursor: pointer;
        }
        .toggle-container input { display: none; }
        .toggle-switch {
            width: 40px; height: 20px;
            background: #333;
            border-radius: 20px;
            position: relative;
            transition: 0.3s;
        }
        .toggle-switch::after {
            content: '';
            position: absolute; top: 2px; left: 2px;
            width: 16px; height: 16px;
            background: #aaa;
            border-radius: 50%;
            transition: 0.3s;
        }
        .toggle-container input:checked + .toggle-switch { background: var(--primary); }
        .toggle-container input:checked + .toggle-switch::after { transform: translateX(20px); background: #000; }
        .toggle-container:hover { color: #fff; }

        /* --- List View Container --- */
        .builds-list {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        /* --- Build Card --- */
        .build-card {
            background: #151720; 
            border: 1px solid #2a2d3a; 
            border-radius: 8px;
            overflow: hidden; 
            transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
            display: flex; 
            flex-direction: column;
            width: 100%;
            position: relative;
        }
        .build-card:hover { 
            transform: translateY(-3px); 
            box-shadow: 0 10px 40px rgba(0,0,0,0.5); 
            border-color: var(--primary); 
        }

        /* סרט "גרסה ישנה" */
        .outdated-ribbon {
            position: absolute;
            top: 15px; left: -30px;
            background: #ff2a2a;
            color: white;
            padding: 5px 30px;
            transform: rotate(-45deg);
            font-size: 0.8rem;
            font-weight: bold;
            z-index: 20;
            box-shadow: 0 2px 10px rgba(0,0,0,0.5);
        }

        /* --- 1. Card Header --- */
        .card-header { 
            padding: 15px 25px; 
            background: #1a1d26; 
            border-bottom: 1px solid #252836;
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
        }
        
        .header-right { display: flex; align-items: center; gap: 15px; } /* ב-RTL זה צד ימין */
        .author-avatar { width: 45px; height: 45px; border-radius: 8px; border: 2px solid #333; object-fit: cover; }
        .build-info h3 { margin: 0; font-size: 1.4rem; font-family: 'Heebo', sans-serif; font-weight: 700; line-height: 1; margin-bottom: 5px; }
        .build-info h3 a { color: #fff; text-decoration: none; transition: 0.2s; }
        .build-info h3 a:hover { color: var(--primary); }
        
        .build-meta-badges { display: flex; gap: 8px; }
        .badge { 
            font-size: 0.75rem; padding: 2px 8px; 
            border-radius: 4px; background: #222; 
            color: #aaa; border: 1px solid #333; 
            font-weight: 500; 
            font-family: 'Heebo', sans-serif;
        }
        .badge.level { color: var(--primary); border-color: rgba(var(--primary-rgb), 0.3); background: rgba(var(--primary-rgb), 0.1); }
        .badge.author { color: #fff; border: none; background: transparent; padding-right: 0; font-weight: bold; }

        .header-left { text-align: left; } /* ב-RTL זה צד שמאל */
        .rating-box { font-family: 'Rajdhani', sans-serif; color: #fff; line-height: 1; text-align: center; }
        .rating-num { font-size: 1.8rem; font-weight: 800; color: #fff; }
        .rating-stars { color: var(--btn-purple); font-size: 0.8rem; letter-spacing: 2px; }
.rating-stars i.far {
    opacity: 0.3;
    color: var(--text-dim);
}

.rating-stars i.fas {
    color: var(--btn-purple); /* הצבע הסגול מהתמונה שלך */
}
        /* --- 2. Tree Body --- */
        .card-body {
            position: relative;
            height: 260px;
            background: radial-gradient(circle at center, #1e2230 0%, #11131a 100%);
            overflow: hidden;
            cursor: pointer;
            width: 100%;
            border-bottom: 1px solid #222;
        }

        /* Branch Labels */
        .branch-labels {
            position: absolute; top: 15px; left: 0; width: 100%;
            display: flex; justify-content: space-around; pointer-events: none; z-index: 5;
            font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.9rem; letter-spacing: 1px;
            opacity: 0.7;
            direction: ltr; /* שמות הבראנצ'ים באנגלית */
        }
        .lbl-cond { color: #00ff88; } .lbl-mob { color: #ffd700; } .lbl-sur { color: #ff2a2a; }

        /* Scaler Container & Nodes (נשמר מהקוד הקודם, עובד מצוין) */
        .mini-tree-scaler {
            position: absolute; top: 55%; left: 50%;
            width: 0; height: 0;
            transform-origin: center center;
            transition: transform 0.1s linear; 
        }

        .mini-node {
            position: absolute;
            background: #0b0d12; border: 3px solid #333;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            display: flex; justify-content: center; align-items: center;
        }
        .mini-node.small { width: 60px; height: 60px; }
        .mini-node.large { width: 90px; height: 90px; border-width: 5px; }
        .mini-node.passive { width: 70px; height: 70px; border-style: double; border-width: 6px; }
        .mini-node.active { background: #1a1d26; border-color: #fff; box-shadow: 0 0 15px rgba(255,255,255,0.3); }
        .mini-node.locked { opacity: 0.3; }
        
        /* צבעים לפי ענפים */
        .mini-node.branch-survival.active { border-color: #ff2a2a; box-shadow: 0 0 20px rgba(255, 42, 42, 0.4); }
        .mini-node.branch-mobility.active { border-color: #ffd700; box-shadow: 0 0 20px rgba(255, 215, 0, 0.4); }
        .mini-node.branch-conditioning.active { border-color: #00ff88; box-shadow: 0 0 20px rgba(0, 255, 136, 0.4); }

        .mini-icon { width: 60%; height: 60%; display: flex; justify-content: center; align-items: center; }
        .mini-icon img { width: 100%; height: 100%; object-fit: contain; opacity: 0.6; display: block; }
        .mini-node.active .mini-icon img { opacity: 1; }

        /* --- 3. Footer --- */
        .card-footer {
            padding: 12px 25px;
            background: #11131a;
            display: flex; justify-content: space-between; align-items: center;
            color: #666; font-size: 0.9rem; font-family: 'Heebo', sans-serif; font-weight: 500;
        }
        .footer-stats { display: flex; gap: 20px; direction: ltr; } /* סטטים באנגלית/מספרים */
        .stat-item { display: flex; align-items: center; gap: 6px; font-size: 1rem; }
        .stat-item i { font-size: 0.8rem; }
        .stat-item span { font-weight: 700; }
        
        .footer-meta { display: flex; gap: 15px; }
        .meta-item { display: flex; align-items: center; gap: 6px; }


        /* =========================================
           התאמות ריספונסיביות למובייל (Mobile Fixes)
           ========================================= */
        @media (max-width: 600px) {
            /* 1. תיקון שורת הסטטוס (הסוגריים הכחולים) שלא יעלו אחד על השני */
            .status-line {
                flex-wrap: wrap;
                gap: 5px 10px;
                font-size: 0.7rem;
                justify-content: flex-start;
            }

            /* 2. הקטנת הכותרת הראשית (SKILL TREE) כדי שלא תיחתך */
            .section-header h1 {
                font-size: 2.2rem;
                letter-spacing: 0;
            }

            /* 3. סידור סרגל הכפתורים */
            .toolbar-wrapper {
                padding: 12px;
            }

            .filters-group {
                flex-wrap: wrap;
                width: 100%;
                gap: 8px;
            }

            /* הסתרת הקו האנכי המפריד שסתם תופס מקום במובייל */
            .filters-group div[style*="width: 1px"] {
                display: none !important;
            }

            /* כפתור "צור בילד" הירוק יקבל שורה שלמה משלו ויהיה בולט */
            .filter-btn.btn-create {
                flex: 1 1 100%;
                justify-content: center;
                padding: 12px;
                font-size: 1rem;
            }

            /* 3 כפתורי הסינון (חדש, מדורג, פופולרי) יתחלקו שווה בשורה מתחת */
            .filter-btn:not(.btn-create) {
                flex: 1 1 calc(33.33% - 8px);
                padding: 8px 2px;
                font-size: 0.75rem;
                justify-content: center;
                text-align: center;
            }

            /* 4. התאמות לכרטיס הבילד עצמו שלא ירגיש דחוס */
            .card-header {
                padding: 12px;
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }

            /* העלאת הדירוג לצד שמאל למעלה (ליד התמונה) */
            .header-left {
                align-self: flex-end;
                margin-top: -50px; 
            }

            .build-info h3 {
                font-size: 1.15rem;
            }

            .author-avatar {
                width: 38px;
                height: 38px;
            }

            .rating-num {
                font-size: 1.4rem;
            }

            /* סידור סטטיסטיקות הפוטר שיופיעו בשורות ולא יגלשו */
            .card-footer {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            .footer-meta {
                flex-wrap: wrap;
                gap: 10px;
                font-size: 0.8rem;
            }
        }