/* --- Hero Section --- */
    .page-header {
        padding: 50px 5% 30px;
        background: linear-gradient(to bottom, rgba(0,0,0,0.9), var(--bg-dark));
        border-bottom: 1px solid var(--border-color);
        position: relative; overflow: hidden;
    }
    .page-header h1 {
        font-family: 'Heebo', sans-serif; font-size: 3rem; font-weight: 900; 
        text-transform: uppercase; color: white; margin: 0;
        text-shadow: 0 0 25px rgba(var(--primary-rgb), 0.3); z-index: 2; position: relative;
    }
    .page-header span { color: var(--primary); }
    .page-header p { color: var(--text-muted); font-size: 1.1rem; margin-top: 5px; z-index: 2; position: relative; }
    
    /* טקסט רקע ענק */
    .header-bg-text {
        position: absolute; top: -10px; right: -20px;
        font-size: 8rem; font-weight: 900; color: rgba(255,255,255,0.02);
        z-index: 1; pointer-events: none; text-transform: uppercase;
    }

    /* --- Filters --- */
    .tactical-filters {
        display: flex; gap: 10px; padding: 15px 5%; justify-content: flex-start; flex-wrap: wrap;
        background: rgba(0,0,0,0.2); border-bottom: 1px solid var(--border-color);
        position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px);
    }
    .tac-btn {
        background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); color: var(--text-muted);
        padding: 8px 16px; border-radius: 4px; 
        font-family: 'Heebo', sans-serif; font-weight: 700; text-transform: uppercase; 
        cursor: pointer; transition: all 0.2s ease; font-size: 0.85rem; display: flex; align-items: center; gap: 6px;
    }
    .tac-btn:hover, .tac-btn.active {
        background: var(--primary); color: #000; border-color: var(--primary);
        box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.2);
    }

    /* --- Weapon List Container --- */
    .weapon-list-container {
        padding: 30px 5% 100px;
        max-width: 1323px; margin: 0 auto;
        display: flex; flex-direction: column; gap: 8px;
    }

    .meta-banner {
        background: linear-gradient(90deg, #ff4444, #ff8844);
        padding: 10px 20px; border-radius: 4px; color: white;
        font-weight: 900; text-transform: uppercase; font-size: 1.1rem;
        display: flex; justify-content: space-between; align-items: center;
        margin-bottom: 10px; text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    /* --- The Weapon Row Item --- */
    .weapon-row {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        overflow: hidden;
        transition: all 0.2s ease;
        display: flex; flex-direction: column;
    }
    
    .weapon-row.open {
        border-color: var(--primary);
        background: #202026;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }

    /* Header (Visible Part) */
    .row-header {
        display: grid;
        grid-template-columns: 80px 140px 1fr 40px; /* Badge, Image, Info, Arrow */
        align-items: center;
        padding: 10px 20px;
        cursor: pointer;
        min-height: 80px;
    }
    .row-header:hover { background: var(--bg-hover); }

    /* Rank Badge */
    .rank-box {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
    }
    .rank-badge {
        background: #333; color: white;
        font-size: 0.9rem; font-weight: 800;
        padding: 4px 10px; border-radius: 4px;
        text-transform: uppercase; min-width: 60px; text-align: center;
    }
    .rank-badge.tier-META { background: linear-gradient(135deg, #FFD700, #FFA500); color: black; box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }
    .rank-badge.tier-A { background: #00ff88; color: black; }
    .rank-badge.tier-B { background: #00aaff; color: white; }

    /* Weapon Image */
    .weapon-img-wrap {
        display: flex; align-items: center; justify-content: center;
        height: 60px;
    }
    .weapon-img-wrap img {
        max-width: 100%; max-height: 100%;
        filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
        transition: transform 0.3s;
    }
    /* Weapon Image */
    .weapon-img-wrap {
        display: flex; align-items: center; justify-content: center;
        height: 60px;
    }
    .weapon-img-wrap img {
        max-width: 100%; max-height: 100%;
        
        /* --- השינוי כאן --- */
        /* grayscale: מוריד את הצבע הירוק והופך לאפור */
        /* brightness: שורף את האפורים הבהירים ללבן מוחלט, משאיר את השחור שחור */
        filter: grayscale(100%) brightness(200%) drop-shadow(0 2px 5px rgba(18, 64, 190, 0.5));
        
        transition: transform 0.3s;
    }
    .weapon-row:hover .weapon-img-wrap img { transform: scale(1.1); }
    .weapon-row:hover .weapon-img-wrap img { transform: scale(1.1); }

    /* Weapon Info */
    .weapon-info {
        padding: 0 20px;
        display: flex; flex-direction: column; justify-content: center;
    }
    .weapon-name {
        font-size: 1.3rem; font-weight: 800; color: white; 
        text-transform: uppercase; line-height: 1; margin-bottom: 5px;
    }
    .weapon-cat {
        font-size: 0.75rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase;
        border: 1px solid rgba(255,255,255,0.1); display: inline-block; padding: 2px 6px; border-radius: 3px; width: fit-content;
    }

    /* Arrow */
    .row-arrow {
        color: var(--text-muted); font-size: 1.2rem; transition: transform 0.3s; text-align: center;
    }
    .weapon-row.open .row-arrow { transform: rotate(180deg); color: var(--primary); }

    /* --- Accordion Body --- */
    .row-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
        background: rgba(0,0,0,0.2);
        border-top: 1px solid var(--border-color);
    }
    .weapon-row.open .row-body {
        max-height: 1000px; /* גובה מקסימלי מספיק גדול */
        transition: max-height 0.5s ease-in-out;
    }

    .body-content { padding: 20px; }

    /* --- Tabs inside the row --- */
/* --- Tabs inside the row (עיצוב חדש לכפתורים) --- */
    .build-tabs {
        display: flex; gap: 8px; margin-bottom: 20px; 
        border-bottom: 1px solid var(--border-color); padding-bottom: 15px;
        flex-wrap: wrap; /* כדי שלא ישברו במובייל */
    }

    .build-tab-btn {
        background: rgba(255,255,255,0.03); 
        border: 1px solid rgba(255,255,255,0.1); 
        color: #888; /* צבע ברירת מחדל אם אין התאמה */
        
        /* שימוש במשתנה שיוגדר ב-HTML */
        color: var(--theme, #888); 
        border-color: color-mix(in srgb, var(--theme, #888), transparent 70%);

        padding: 8px 16px; 
        font-weight: 800; 
        text-transform: uppercase; 
        cursor: pointer;
        font-size: 0.8rem; 
        border-radius: 6px; 
        transition: all 0.2s ease;
        display: flex; align-items: center; gap: 6px;
    }

    /* אפקט הובר ואקטיב - משתמש בצבע המוגדר ליצירת רקע זוהר */
    .build-tab-btn:hover, 
    .build-tab-btn.active {
        background: color-mix(in srgb, var(--theme, #fff), transparent 85%); /* רקע שקוף בצבע הכפתור */
        border-color: var(--theme, #fff);
        box-shadow: 0 0 10px color-mix(in srgb, var(--theme, #fff), transparent 80%);
        transform: translateY(-2px);
        color: var(--theme, #fff);
    }
    
    .build-tab-btn i { font-size: 1rem; }

    /* --- Attachments Grid --- */
    .build-view { display: none; animation: fadeIn 0.3s ease; }
    .build-view.active { display: block; }

/* --- Attachments Grid & Cards Updated --- */
    .att-grid {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 10px;
    }

    .att-card {
        background: rgba(255,255,255,0.03);
        /* גבול רגיל אפור, אלא אם נדרס */
        border: 1px solid var(--border-color);
        border-radius: 4px; padding: 12px;
        display: flex; align-items: center; gap: 10px;
        transition: 0.2s;
        position: relative;
        overflow: hidden;
    }
    
    .att-icon { font-size: 1rem; color: var(--text-muted); min-width: 25px; text-align: center; transition: 0.2s; }
/* מאפשר לפרטים לתפוס את המקום שנשאר ולעטוף טקסט */
    .att-details { 
        display: flex; 
        flex-direction: column; 
        overflow: hidden; 
        z-index: 1;
        flex: 1; /* חשוב: תופס את כל הרוחב הפנוי */
        min-width: 0; /* קריטי כדי ששבירת שורות תעבוד בתוך Flexbox */
    }    .att-type { font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; margin-bottom: 2px; }
/* עדכון לשם התוסף - ירידת שורה */
    .att-name { 
        font-size: 0.8rem; /* הקטנתי טיפה מ-0.85 ל-0.8 כדי שייכנס יפה */
        color: white; 
        font-weight: 600; 
        
        /* ביטול החיתוך ומעבר למצב רב-שורתי */
        white-space: normal; 
        line-height: 1.1; /* צפיפות שורות כדי שלא יתפוס יותר מדי גובה */
        word-wrap: break-word;
    }    
    /* --- עיצוב כרטיס מלא עם צבע הנושא (Theme) --- */
/* --- עיצוב כרטיס מלא עם צבע הנושא (Theme) --- */
.att-card.filled {
    /* 1. קודם מגדירים מסגרת בסיסית לכל הצדדים (עדינה ושקופה) */
    border: 1px solid color-mix(in srgb, var(--theme, var(--primary)), transparent 80%);

    /* 2. עכשיו דורסים ספציפית את צד ימין - שיהיה עבה (3px) ובצבע מלא וחזק */
    border-right: 3px solid var(--theme, var(--primary));

    /* רקע עדין מאוד בצבע הנושא */
    background: linear-gradient(to right, rgba(255,255,255,0.03), color-mix(in srgb, var(--theme, var(--primary)), transparent 95%));
}

    /* צביעת האייקון */
    .att-card.filled .att-icon { 
        color: var(--theme, var(--primary)); 
        text-shadow: 0 0 10px color-mix(in srgb, var(--theme, var(--primary)), transparent 60%);
    }

    /* אפקט הובר */
    .att-card:hover { 
        border-color: var(--theme, rgba(255,255,255,0.2)); 
        background: rgba(255,255,255,0.06); 
    }
    /* Mobile Responsive */
    @media (max-width: 700px) {
        .row-header { grid-template-columns: 50px 100px 1fr 30px; padding: 10px; }
        .weapon-name { font-size: 1rem; }
        .rank-badge { font-size: 0.75rem; padding: 2px 6px; min-width: auto; }
        .att-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 450px) {
        .row-header { grid-template-columns: 1fr 30px; gap: 10px; height: auto; }
        .rank-box { grid-row: 1; grid-column: 1; justify-content: flex-start; align-items: flex-start; margin-bottom: 5px;}
        .weapon-img-wrap { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; height: 80px;}
        .weapon-info { grid-row: 3; grid-column: 1; padding: 0; }
        .row-arrow { grid-row: 1 / -1; grid-column: 2; align-self: center; }
    }

    @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }