:root {
            --bg-void: #06070a;
            --bg-card: rgba(14, 16, 24, 0.90);
            --bg-card-hover: rgba(24, 28, 42, 0.95);
            --bg-input: rgba(9, 11, 18, 0.92);
            
            --gold-primary: #d97706;
            --gold-bright: #fbbf24;
            --gold-glow: #f59e0b;
            --gold-light: #fef08a;
            --gold-dark: #78350f;

            --stone-bright: #f8fafc;
            --stone-light: #cbd5e1;
            --stone-mid: #94a3b8;
            --stone-dark: #334155;
            
            --purple-primary: #d97706;
            --purple-glow: #f59e0b;
            --purple-light: #fbbf24;
            --purple-dark: #78350f;
            
            --cyan-accent: #fbbf24;
            --blue-accent: #f59e0b;
            --emerald-green: #10B981;
            --crimson-red: #EF4444;

            --gradient-logo: linear-gradient(135deg, #fef08a 0%, #fbbf24 35%, #d97706 70%, #78350f 100%);
            --gradient-ravix: linear-gradient(180deg, #FFFFFF 0%, #cbd5e1 35%, #f59e0b 70%, #b45309 100%);
            --gradient-purple-blue: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
            --gradient-cyan-purple: linear-gradient(135deg, #fef08a 0%, #f59e0b 50%, #b45309 100%);
            
            --text-silver: #F8FAFC;
            --text-secondary: #cbd5e1;
            --text-muted: #94a3b8;
            --text-gold: #fbbf24;
            
            --border-neon: rgba(245, 158, 11, 0.35);
            --border-neon-hover: rgba(251, 191, 36, 0.7);
            --shadow-purple-glow: 0 0 25px rgba(245, 158, 11, 0.3);
            --shadow-card-hover: 0 10px 30px rgba(217, 119, 6, 0.35);
            
            --font-family: 'Cairo', 'Outfit', sans-serif;
            --font-brand: 'Cinzel', 'Cairo', serif;
        }

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

        body {
            background-color: var(--bg-void);
            background-image: 
                radial-gradient(circle at 15% 15%, rgba(245, 158, 11, 0.12) 0px, transparent 45%),
                radial-gradient(circle at 85% 85%, rgba(217, 119, 6, 0.10) 0px, transparent 45%),
                radial-gradient(circle at 50% 30%, rgba(120, 53, 15, 0.15) 0px, transparent 65%);
            background-attachment: fixed;
            color: var(--text-silver);
            font-family: var(--font-family);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
        }

        /* Glassmorphism Header Layout */
        header {
            position: sticky;
            top: 0;
            z-index: 100;
            background: rgba(6, 7, 10, 0.95);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border-neon);
            box-shadow: 0 4px 25px rgba(0, 0, 0, 0.7);
            padding: 0.75rem 1.8rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
        }

        .header-top-bar {
            display: contents;
        }

        .brand-logo {
            order: 1;
            display: flex;
            align-items: center;
            gap: 1rem;
            text-decoration: none;
            flex-shrink: 0;
            white-space: nowrap;
        }

        .logo-img-wrapper {
            position: relative;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            padding: 3px;
            background: var(--gradient-logo);
            box-shadow: 0 0 22px rgba(245, 158, 11, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
            flex-shrink: 0;
        }

        .logo-img-wrapper:hover {
            transform: scale(1.08) rotate(3deg);
            box-shadow: 0 0 28px rgba(251, 191, 36, 0.85);
        }

        .logo-img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            background: #000;
        }

        .brand-text {
            white-space: nowrap;
        }

        .brand-text h1 {
            font-size: 1.45rem;
            font-weight: 900;
            letter-spacing: 2px;
            background: var(--gradient-ravix);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 20px rgba(245, 158, 11, 0.45);
            font-family: var(--font-brand);
            white-space: nowrap;
            line-height: 1.1;
            margin-bottom: 0.15rem;
        }

        .brand-text p {
            font-size: 0.68rem;
            color: var(--text-gold);
            font-weight: 700;
            letter-spacing: 1.5px;
            white-space: nowrap;
        }

        /* Navigation Tabs */
        .nav-tabs {
            order: 2;
            display: flex;
            gap: 0.5rem;
            background: rgba(13, 11, 26, 0.7);
            border: 1px solid var(--border-neon);
            padding: 0.3rem 0.45rem;
            border-radius: 14px;
            flex-shrink: 0;
            white-space: nowrap;
        }

        .nav-tab-btn {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            padding: 0.5rem 1rem;
            border-radius: 10px;
            font-family: inherit;
            font-size: 0.88rem;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.25s ease;
            white-space: nowrap;
            word-break: keep-all;
            flex-shrink: 0;
            line-height: 1.3;
        }

        .nav-tab-btn i {
            font-size: 0.95rem;
            flex-shrink: 0;
        }

        .nav-tab-btn.active {
            background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
            color: #FFF;
            box-shadow: 0 0 18px rgba(245, 158, 11, 0.45);
            border: 1px solid rgba(254, 240, 138, 0.4);
        }

        .header-actions {
            order: 3;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-shrink: 0;
            white-space: nowrap;
        }

        .status-badge {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(16, 185, 129, 0.12);
            border: 1px solid rgba(16, 185, 129, 0.4);
            color: var(--emerald-green);
            padding: 0.45rem 0.95rem;
            border-radius: 50px;
            font-size: 0.82rem;
            font-weight: 700;
            box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
            white-space: nowrap;
            flex-shrink: 0;
        }

        .status-dot {
            width: 9px;
            height: 9px;
            background-color: var(--emerald-green);
            border-radius: 50%;
            box-shadow: 0 0 12px var(--emerald-green);
            animation: pulse 1.8s infinite;
            flex-shrink: 0;
        }

        @keyframes pulse {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
        }

        .lang-toggle-btn, .refresh-btn {
            background: rgba(245, 158, 11, 0.12);
            border: 1px solid var(--border-neon);
            color: var(--text-silver);
            padding: 0.45rem 0.85rem;
            border-radius: 12px;
            font-family: inherit;
            font-size: 0.82rem;
            font-weight: 800;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.45rem;
            transition: all 0.25s ease;
            box-shadow: 0 0 10px rgba(245, 158, 11, 0.15);
            white-space: nowrap;
            flex-shrink: 0;
            line-height: 1.3;
        }

        /* Responsive Navbar Scaling & Mobile Layout */
        @media (max-width: 1320px) {
            header {
                padding: 0.65rem 1.1rem;
                gap: 0.65rem;
            }
            .brand-logo { gap: 0.7rem; }
            .brand-text h1 { font-size: 1.2rem; }
            .brand-text p { font-size: 0.66rem; }
            .nav-tabs { gap: 0.35rem; padding: 0.25rem; }
            .nav-tab-btn { padding: 0.45rem 0.8rem; font-size: 0.82rem; }
            .header-actions { gap: 0.5rem; }
            .status-badge, .lang-toggle-btn, .refresh-btn, .bot-connect-btn {
                padding: 0.4rem 0.75rem;
                font-size: 0.78rem;
            }
        }

        @media (max-width: 1024px) {
            header {
                flex-direction: column;
                align-items: stretch;
                gap: 0.65rem;
                padding: 0.65rem 0.85rem;
                white-space: normal;
            }
            .header-top-bar {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                gap: 0.5rem;
            }
            .brand-logo { gap: 0.6rem; }
            .brand-text h1 { font-size: 1.15rem; }
            .brand-text p { font-size: 0.65rem; }
            .nav-tabs {
                width: 100%;
                display: flex;
                justify-content: space-between;
                gap: 0.35rem;
                padding: 0.25rem;
                background: rgba(13, 11, 26, 0.9);
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }
            .nav-tabs::-webkit-scrollbar {
                display: none;
            }
            .nav-tab-btn {
                flex: 1;
                justify-content: center;
                padding: 0.5rem 0.4rem;
                font-size: 0.82rem;
                text-align: center;
                border-radius: 10px;
                white-space: nowrap;
            }
        }

        @media (max-width: 600px) {
            header {
                padding: 0.5rem 0.65rem;
                gap: 0.5rem;
            }
            .logo-img-wrapper {
                width: 36px;
                height: 36px;
            }
            .brand-text h1 {
                font-size: 1.05rem;
            }
            .brand-text p {
                display: none;
            }
            .header-actions {
                gap: 0.35rem;
            }
            .header-actions .status-badge {
                padding: 0.35rem 0.55rem;
                font-size: 0.72rem;
            }
            .header-actions .lang-toggle-btn,
            .header-actions .refresh-btn,
            .header-actions .bot-connect-btn {
                padding: 0.35rem 0.55rem;
                font-size: 0.75rem;
            }
            .nav-tab-btn {
                font-size: 0.75rem;
                padding: 0.45rem 0.25rem;
                gap: 0.35rem;
            }
            .nav-tab-btn i {
                font-size: 0.82rem;
            }
        }

        .lang-toggle-btn {
            background: rgba(0, 245, 212, 0.12);
            border-color: rgba(0, 245, 212, 0.4);
            color: var(--cyan-accent);
        }

        .lang-toggle-btn:hover {
            background: rgba(0, 245, 212, 0.25);
            border-color: var(--cyan-accent);
            transform: translateY(-2px);
            box-shadow: 0 0 15px rgba(0, 245, 212, 0.4);
        }

        .refresh-btn:hover {
            background: rgba(139, 92, 246, 0.3);
            border-color: var(--purple-light);
            transform: translateY(-2px);
            box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
        }

        /* Container & Layout */
        main {
            max-width: 1420px;
            margin: 0 auto;
            padding: 2rem;
            width: 100%;
            flex: 1;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* Metrics Row */
        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1.25rem;
            margin-bottom: 2rem;
        }

        .metric-card {
            background: var(--bg-card);
            backdrop-filter: blur(16px);
            border: 1px solid var(--border-neon);
            border-radius: 18px;
            padding: 1.35rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
        }

        .metric-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--border-neon);
            transition: background 0.3s ease;
        }

        .metric-card:hover {
            transform: translateY(-4px);
            border-color: var(--purple-light);
            box-shadow: var(--shadow-card-hover);
        }

        .metric-card.purple::before { background: var(--gradient-logo); }
        .metric-card.cyan::before { background: var(--gradient-cyan-purple); }
        .metric-card.emerald::before { background: var(--emerald-green); }
        .metric-card.blue::before { background: var(--gradient-purple-blue); }

        .metric-info h3 {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 0.35rem;
            font-weight: 700;
        }

        .metric-info .value {
            font-size: 1.7rem;
            font-weight: 900;
            color: var(--text-silver);
            font-family: 'Outfit', sans-serif;
            text-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
        }

        .metric-icon {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            background: rgba(139, 92, 246, 0.1);
            border: 1px solid var(--border-neon);
            color: var(--purple-light);
        }

        .metric-card.cyan .metric-icon { color: var(--cyan-accent); background: rgba(0, 245, 212, 0.1); border-color: rgba(0, 245, 212, 0.3); }
        .metric-card.emerald .metric-icon { color: var(--emerald-green); background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); }
        .metric-card.blue .metric-icon { color: var(--blue-accent); background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.3); }

        /* Dashboard Main Content Layout */
        .content-grid {
            display: flex;
            flex-direction: column;
            gap: 1.85rem;
        }

        /* Card Section Styling */
        .panel-card {
            background: var(--bg-card);
            backdrop-filter: blur(16px);
            border: 1px solid var(--border-neon);
            border-radius: 20px;
            padding: 1.6rem;
            margin-bottom: 1.85rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        .panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.35rem;
            padding-bottom: 0.85rem;
            border-bottom: 1px solid var(--border-neon);
        }

        .panel-title {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--text-silver);
        }

        .panel-title i {
            color: var(--purple-light);
            filter: drop-shadow(0 0 8px var(--purple-glow));
        }

        /* Form Inputs */
        .form-group {
            margin-bottom: 1.2rem;
        }

        .form-group label {
            display: block;
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--text-secondary);
            margin-bottom: 0.45rem;
        }

        .form-control {
            width: 100%;
            background: var(--bg-input);
            border: 1px solid var(--border-neon);
            border-radius: 12px;
            padding: 0.8rem 1rem;
            color: var(--text-silver);
            font-family: inherit;
            font-size: 0.92rem;
            transition: all 0.25s ease;
            outline: none;
        }

        .form-control:focus {
            border-color: var(--cyan-accent);
            box-shadow: 0 0 15px rgba(0, 245, 212, 0.25);
        }

        select.form-control option {
            background: #0A0814;
            color: #FFF;
        }

        .btn-submit {
            width: 100%;
            background: linear-gradient(135deg, #d97706 0%, #b45309 50%, #78350f 100%);
            color: #FFF;
            border: 1px solid rgba(254, 240, 138, 0.35);
            padding: 0.95rem 1.25rem;
            border-radius: 14px;
            font-family: inherit;
            font-size: 1.05rem;
            font-weight: 800;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            transition: all 0.25s ease;
            box-shadow: 0 6px 25px rgba(217, 119, 6, 0.45);
            margin-top: 1.2rem;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
        }

        .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 32px rgba(245, 158, 11, 0.65);
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #92400e 100%);
            border-color: rgba(254, 240, 138, 0.6);
        }

        /* ALBION LOADOUT BUILDER GRID LAYOUT */
        .loadout-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.2rem;
            padding: 1.25rem 0;
            direction: ltr;
            width: 100%;
            max-width: 100%;
        }

        .loadout-row {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: clamp(0.6rem, 3vw, 1.8rem);
            width: 100%;
        }

        .slot-card, .slot-card-spacer {
            width: clamp(74px, 22vw, 105px);
            height: clamp(74px, 22vw, 105px);
            flex-shrink: 0;
        }

        .slot-card-spacer {
            opacity: 0;
            pointer-events: none;
        }

        .slot-card {
            background: rgba(8, 6, 18, 0.9);
            border: 2px solid var(--border-neon);
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
            transition: all 0.25s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            user-select: none;
            -webkit-user-select: none;
        }

        .slot-card:hover {
            border-color: var(--cyan-accent);
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(0, 245, 212, 0.35);
        }

        .slot-card.filled {
            border-color: #fbbf24;
            background: rgba(245, 158, 11, 0.15);
            box-shadow: 0 0 15px rgba(245, 158, 11, 0.25);
        }

        .slot-icon {
            width: 70%;
            height: 70%;
            object-fit: contain;
        }

        .slot-placeholder-text {
            font-size: clamp(0.62rem, 1.8vw, 0.72rem);
            font-weight: 700;
            color: var(--text-muted);
            text-align: center;
            margin-top: 0.2rem;
            line-height: 1.1;
        }

        .slot-label-badge {
            position: absolute;
            bottom: -9px;
            background: #0D0B1A;
            border: 1px solid var(--border-neon);
            color: var(--text-secondary);
            font-size: clamp(0.52rem, 1.6vw, 0.65rem);
            font-weight: 800;
            padding: 0.12rem 0.45rem;
            border-radius: 8px;
            white-space: nowrap;
        }

        .btn-remove-slot {
            position: absolute;
            top: -6px;
            right: -6px;
            background: var(--crimson-red);
            color: #FFF;
            border: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            opacity: 0;
            transition: opacity 0.2s ease;
            z-index: 10;
        }

        .slot-card:hover .btn-remove-slot,
        .slot-card.filled .btn-remove-slot {
            opacity: 1;
        }

        /* Item Selector Modal */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(5, 5, 10, 0.85);
            backdrop-filter: blur(12px);
            z-index: 1000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal-content {
            background: #0A0814;
            border: 2px solid var(--border-neon);
            border-radius: 22px;
            max-width: 800px;
            width: 100%;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
        }

        .modal-header {
            padding: 1.25rem 1.75rem;
            border-bottom: 1px solid var(--border-neon);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            font-size: 1.2rem;
            font-weight: 800;
            color: var(--text-silver);
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }

        .modal-close {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 1.3rem;
            cursor: pointer;
            transition: color 0.2s;
        }

        .modal-close:hover {
            color: var(--crimson-red);
        }

        .modal-body {
            padding: 1.5rem;
            overflow-y: auto;
            flex: 1;
            min-height: 0;
        }

        .item-grid,
        .items-picker-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(134px, 1fr));
            gap: 1rem;
            align-content: start;
            grid-auto-rows: max-content;
        }

        .item-picker-card {
            position: relative;
            background: rgba(13, 11, 26, 0.9);
            border: 1px solid var(--border-neon);
            border-radius: 14px;
            padding: 0.85rem 0.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
        }

        .item-picker-card:hover {
            border-color: var(--cyan-accent);
            transform: translateY(-3px);
            box-shadow: 0 0 15px rgba(0, 245, 212, 0.3);
            background: rgba(0, 245, 212, 0.08);
        }

        .item-picker-img {
            width: 70px;
            height: 70px;
            object-fit: contain;
            margin-bottom: 0.5rem;
        }

        .item-picker-name {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text-silver);
            line-height: 1.2;
        }

        .item-picker-type {
            font-size: 0.68rem;
            color: var(--text-muted);
            margin-top: 0.2rem;
        }

        /* Saved Builds Cards */
        .builds-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
            gap: 1.5rem;
        }

        .build-preview-card {
            background: linear-gradient(145deg, rgba(14, 16, 24, 0.95), rgba(8, 9, 13, 0.98));
            border: 1px solid rgba(245, 158, 11, 0.28);
            border-radius: 20px;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
        }

        .build-preview-card:hover {
            border-color: #f59e0b;
            transform: translateY(-4px);
            box-shadow: 0 12px 32px rgba(217, 119, 6, 0.35);
        }

        .build-card-image {
            width: 100%;
            height: 240px;
            object-fit: contain;
            background: #06070a;
            border-bottom: 1px solid rgba(245, 158, 11, 0.22);
        }

        .build-card-body {
            padding: 1.25rem;
        }

        .build-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        .build-card-title {
            font-size: 1.2rem;
            font-weight: 800;
            color: #f8fafc;
            font-family: 'Cinzel', 'Cairo', sans-serif;
            letter-spacing: 0.5px;
        }

        .build-card-actions {
            margin-top: 1rem;
            display: flex;
            gap: 0.6rem;
        }

        .btn-action-small {
            flex: 1;
            padding: 0.55rem 0.6rem;
            border-radius: 8px;
            border: 1px solid rgba(245, 158, 11, 0.3);
            background: rgba(245, 158, 11, 0.08);
            color: #f1f5f9;
            font-size: 0.82rem;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            transition: all 0.2s ease;
        }

        .btn-action-small:hover {
            background: rgba(245, 158, 11, 0.22);
            border-color: #f59e0b;
            color: #fbbf24;
            box-shadow: 0 0 14px rgba(245, 158, 11, 0.3);
        }

        .btn-action-delete {
            background: rgba(239, 68, 68, 0.12);
            border-color: rgba(239, 68, 68, 0.35);
            color: #f87171;
        }

        .btn-action-delete:hover {
            background: rgba(239, 68, 68, 0.28);
            border-color: #ef4444;
            color: #fca5a5;
            box-shadow: 0 0 14px rgba(239, 68, 68, 0.35);
        }

        /* Active Events List Cards */
        .events-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 1.35rem;
        }

        .event-card {
            background: rgba(8, 6, 18, 0.85);
            border: 1px solid var(--border-neon);
            border-radius: 18px;
            padding: 1.35rem;
            transition: all 0.3s ease;
            position: relative;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        }

        .event-card:hover {
            border-color: var(--cyan-accent);
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 245, 212, 0.2);
        }

        .event-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 0.85rem;
        }

        .bp-media {
            position: relative;
            overflow: hidden;
            background: #06070a;
            border-top-left-radius: 18px;
            border-top-right-radius: 18px;
        }

        .event-badge {
            background: rgba(245, 158, 11, 0.15);
            border: 1px solid rgba(251, 191, 36, 0.45);
            color: #fbbf24;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.78rem;
            font-weight: 800;
            box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            white-space: nowrap;
        }

        .bp-role-pill {
            white-space: nowrap;
            letter-spacing: 0.3px;
        }

        .badge-role-dps {
            background: rgba(239, 68, 68, 0.15);
            border-color: rgba(239, 68, 68, 0.5);
            color: #f87171;
            box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
        }

        .badge-role-tank {
            background: rgba(59, 130, 246, 0.15);
            border-color: rgba(59, 130, 246, 0.5);
            color: #60a5fa;
            box-shadow: 0 0 12px rgba(59, 130, 246, 0.25);
        }

        .badge-role-healer {
            background: rgba(16, 185, 129, 0.15);
            border-color: rgba(16, 185, 129, 0.5);
            color: #34d399;
            box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
        }

        .badge-role-support {
            background: rgba(245, 158, 11, 0.15);
            border-color: rgba(251, 191, 36, 0.5);
            color: #fbbf24;
            box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
        }

        /* Toast notification */
        .toast-container {
            position: fixed;
            bottom: 20px;
            left: 20px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .toast {
            background: #0D0B1A;
            border: 1px solid var(--border-neon);
            color: #FFF;
            padding: 0.9rem 1.35rem;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from { transform: translateX(-100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
    
        /* Multiple Builds Selection Styling */
        .role-build-card {
            background: rgba(13, 11, 26, 0.7);
            border: 1px solid var(--border-neon);
            border-radius: 14px;
            padding: 0.95rem;
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
            transition: border-color 0.2s ease;
            align-self: start;
        }

        .role-build-card:hover {
            border-color: var(--purple-light);
        }

        .role-build-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            font-weight: 800;
            color: var(--text-silver);
            padding-bottom: 0.45rem;
            border-bottom: 1px solid rgba(245, 158, 11, 0.25);
        }

        .btn-add-role-build {
            background: rgba(245, 158, 11, 0.15);
            border: 1px solid rgba(251, 191, 36, 0.45);
            color: #fbbf24;
            font-size: 0.75rem;
            font-weight: 800;
            padding: 0.25rem 0.65rem;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }

        .btn-add-role-build:hover {
            background: rgba(245, 158, 11, 0.35);
            border-color: #fef08a;
            color: #ffffff;
            transform: translateY(-1px);
            box-shadow: 0 0 12px rgba(245, 158, 11, 0.45);
        }

        .btn-option-role-build {
            background: rgba(217, 119, 6, 0.18);
            border: 1px solid rgba(245, 158, 11, 0.5);
            color: #fef08a;
            font-size: 0.75rem;
            font-weight: 800;
            padding: 0.25rem 0.65rem;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }

        .btn-option-role-build:hover {
            background: rgba(245, 158, 11, 0.35);
            border-color: #fef08a;
            color: #ffffff;
            transform: translateY(-1px);
            box-shadow: 0 0 12px rgba(245, 158, 11, 0.45);
        }

        .role-build-row {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            margin-bottom: 0.45rem;
            animation: fadeIn 0.2s ease;
        }

        .role-build-row select {
            flex: 1;
        }

        .btn-remove-role-build {
            background: rgba(239, 68, 68, 0.15);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: var(--crimson-red);
            width: 34px;
            height: 38px;
            border-radius: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            transition: all 0.2s;
            flex-shrink: 0;
        }

        .btn-remove-role-build:hover {
            background: rgba(239, 68, 68, 0.35);
            transform: scale(1.05);
        }

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

        /* Special Role Cards (Blazing, Perma, Energy Shape, MP) */
        .special-role-card {
            border-radius: 12px;
            padding: 0.55rem 0.3rem;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            min-height: 120px;
            min-width: 0;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
            transition: all 0.2s ease;
            box-sizing: border-box;
        }

        .special-role-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
        }

        .special-role-card .role-emoji-icon {
            font-size: 1.35rem;
            line-height: 1.1;
            margin-bottom: 0.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 32px;
        }

        .special-role-card .role-emoji-icon img {
            width: 28px;
            height: 28px;
            object-fit: contain;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
            border-radius: 4px;
        }

        .special-role-card .role-card-label {
            font-size: 0.7rem;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.35rem;
            white-space: normal;
            line-height: 1.1;
            height: 2.1em;
            text-align: center;
            letter-spacing: -0.2px;
            overflow: hidden;
        }

        .special-role-card input[type=number]::-webkit-inner-spin-button,
        .special-role-card input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .special-role-card input[type=number] {
            -moz-appearance: textfield;
            appearance: textfield;
        }

        .special-role-val-input {
            width: 100% !important;
            height: 30px !important;
            text-align: center !important;
            font-size: 1rem !important;
            font-weight: 800 !important;
            background: rgba(0, 0, 0, 0.5) !important;
            border: 1px solid rgba(255, 255, 255, 0.18) !important;
            border-radius: 8px !important;
            color: #ffffff !important;
            padding: 0 !important;
            margin-bottom: 0.35rem !important;
        }

        .special-role-card .stepper-actions {
            display: flex;
            gap: 0.2rem;
            width: 100%;
            direction: ltr;
        }

        .btn-step-dec, .btn-step-inc {
            flex: 1;
            height: 26px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 900;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Decrement (Red) */
        .btn-step-dec {
            background: rgba(239, 68, 68, 0.18);
            border: 1px solid rgba(239, 68, 68, 0.5);
            color: #fca5a5;
        }
        .btn-step-dec:hover {
            background: #ef4444;
            color: #ffffff;
            box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
            border-color: #ef4444;
        }
        .btn-step-dec:active {
            transform: scale(0.9);
        }

        /* Increment (Green) */
        .btn-step-inc {
            background: rgba(34, 197, 94, 0.18);
            border: 1px solid rgba(34, 197, 94, 0.5);
            color: #86efac;
        }
        .btn-step-inc:hover {
            background: #22c55e;
            color: #ffffff;
            box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
            border-color: #22c55e;
        }
        .btn-step-inc:active {
            transform: scale(0.9);
        }

        .edit-role-limit-input {
            width: 54px !important;
            min-width: 54px !important;
            max-width: 54px !important;
            height: 32px !important;
            text-align: center !important;
            font-weight: 800 !important;
            font-size: 1.05rem !important;
            padding: 0 !important;
            margin: 0 !important;
            background: #0c0e14 !important;
            background-color: #0c0e14 !important;
            color: #fbbf24 !important;
            border: 1px solid rgba(251, 191, 36, 0.35) !important;
            border-radius: 6px !important;
            outline: none !important;
            box-shadow: none !important;
            -moz-appearance: textfield !important;
            appearance: textfield !important;
        }
        .edit-role-limit-input::-webkit-outer-spin-button,
        .edit-role-limit-input::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
            margin: 0 !important;
        }

    
        .bot-connect-btn {
            background: rgba(245, 158, 11, 0.15);
            border: 1px solid var(--border-neon);
            color: var(--text-silver);
            padding: 0.45rem 0.95rem;
            border-radius: 12px;
            font-family: inherit;
            font-size: 0.82rem;
            font-weight: 800;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.45rem;
            transition: all 0.25s ease;
            box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
            white-space: nowrap;
            flex-shrink: 0;
            line-height: 1.3;
        }

        .bot-connect-btn:hover {
            background: rgba(245, 158, 11, 0.3);
            border-color: #fbbf24;
            transform: translateY(-2px);
            box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
        }

        .bot-connect-btn.connected {
            background: rgba(16, 185, 129, 0.15);
            border-color: rgba(16, 185, 129, 0.5);
            color: var(--emerald-green);
            box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
        }

    
        /* Enchantment Filter Bar in Item Picker Modal */
        .enchant-filter-btn {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: var(--text-silver);
            padding: 0.28rem 0.75rem;
            border-radius: 8px;
            font-size: 0.8rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            user-select: none;
        }

        .enchant-filter-btn:hover {
            background: rgba(255, 255, 255, 0.12);
            color: #ffffff;
            transform: translateY(-1px);
        }

        .enchant-filter-btn.active {
            background: rgba(6, 182, 212, 0.22);
            border-color: #22d3ee;
            color: #67e8f9;
            box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
        }

        .enchant-filter-btn.enchant-1.active {
            background: rgba(34, 197, 94, 0.22);
            border-color: #22c55e;
            color: #86efac;
            box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
        }

        .enchant-filter-btn.enchant-2.active {
            background: rgba(59, 130, 246, 0.22);
            border-color: #3b82f6;
            color: #93c5fd;
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
        }

        .enchant-filter-btn.enchant-3.active {
            background: rgba(168, 85, 247, 0.22);
            border-color: #a855f7;
            color: #d8b4fe;
            box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
        }

        .enchant-filter-btn.enchant-4.active {
            background: rgba(245, 158, 11, 0.22);
            border-color: #f59e0b;
            color: #fde68a;
            box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
        }

        .enchant-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
        }
        .dot-1 { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
        .dot-2 { background: #3b82f6; box-shadow: 0 0 6px #3b82f6; }
        .dot-3 { background: #a855f7; box-shadow: 0 0 6px #a855f7; }
        .dot-4 { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }

        /* Tier Filter Bar in Item Picker Modal */
        .tier-filter-btn {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: var(--text-silver);
            padding: 0.28rem 0.75rem;
            border-radius: 8px;
            font-size: 0.8rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            user-select: none;
        }

        .tier-filter-btn:hover {
            background: rgba(255, 255, 255, 0.12);
            color: #ffffff;
            transform: translateY(-1px);
        }

        .tier-filter-btn.active {
            background: rgba(245, 158, 11, 0.22);
            border-color: #f59e0b;
            color: #fbbf24;
            box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
        }

        /* Official Albion Online Tier Colors for Buttons (Active & Hover) */
        .tier-filter-btn.tier-1.active {
            background: rgba(156, 163, 175, 0.24);
            border-color: #9ca3af;
            color: #f3f4f6;
            box-shadow: 0 0 10px rgba(156, 163, 175, 0.4);
        }
        .tier-filter-btn.tier-2.active {
            background: rgba(194, 136, 84, 0.24);
            border-color: #c28854;
            color: #fed7aa;
            box-shadow: 0 0 10px rgba(194, 136, 84, 0.4);
        }
        .tier-filter-btn.tier-3.active {
            background: rgba(34, 197, 94, 0.24);
            border-color: #22c55e;
            color: #86efac;
            box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
        }
        .tier-filter-btn.tier-4.active {
            background: rgba(59, 130, 246, 0.24);
            border-color: #3b82f6;
            color: #93c5fd;
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
        }
        .tier-filter-btn.tier-5.active {
            background: rgba(239, 68, 68, 0.24);
            border-color: #ef4444;
            color: #fca5a5;
            box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
        }
        .tier-filter-btn.tier-6.active {
            background: rgba(249, 115, 22, 0.24);
            border-color: #f97316;
            color: #fdba74;
            box-shadow: 0 0 10px rgba(249, 115, 22, 0.4);
        }
        .tier-filter-btn.tier-7.active {
            background: rgba(234, 179, 8, 0.24);
            border-color: #eab308;
            color: #fef08a;
            box-shadow: 0 0 10px rgba(234, 179, 8, 0.4);
        }
        .tier-filter-btn.tier-8.active {
            background: rgba(255, 255, 255, 0.24);
            border-color: #ffffff;
            color: #ffffff;
            box-shadow: 0 0 12px rgba(255, 255, 255, 0.55);
        }

        /* Tier Indicator Dots */
        .tier-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
        }
        .dot-t1 { background: #9ca3af; box-shadow: 0 0 5px #9ca3af; }
        .dot-t2 { background: #c28854; box-shadow: 0 0 5px #c28854; }
        .dot-t3 { background: #22c55e; box-shadow: 0 0 5px #22c55e; }
        .dot-t4 { background: #3b82f6; box-shadow: 0 0 5px #3b82f6; }
        .dot-t5 { background: #ef4444; box-shadow: 0 0 5px #ef4444; }
        .dot-t6 { background: #f97316; box-shadow: 0 0 5px #f97316; }
        .dot-t7 { background: #eab308; box-shadow: 0 0 5px #eab308; }
        .dot-t8 { background: #ffffff; box-shadow: 0 0 7px #ffffff; }

        /* Category Filter Tabs in Modal */
        .modal-cat-btn {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.14);
            color: var(--text-secondary);
            border-radius: 10px;
            padding: 0.45rem 0.85rem;
            font-size: 0.8rem;
            font-weight: 700;
            line-height: 1.2;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-family: inherit;
            user-select: none;
            flex-shrink: 0;
        }
        .modal-cat-btn:hover {
            background: rgba(245, 158, 11, 0.15);
            border-color: rgba(245, 158, 11, 0.5);
            color: #fbbf24;
            transform: translateY(-1px);
        }
        .modal-cat-btn.active {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.32), rgba(245, 158, 11, 0.15));
            border-color: #f59e0b;
            color: #fde047;
            box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
        }

        /* Tier Tags on Item Cards matching Albion Tier Colors */
        .tier-card-tag {
            position: absolute;
            top: 7px;
            left: 7px;
            font-size: 0.68rem;
            font-weight: 800;
            padding: 1px 6px;
            border-radius: 6px;
            line-height: 1.2;
            pointer-events: none;
            z-index: 2;
        }
        .tier-tag-1 { background: rgba(156, 163, 175, 0.25); color: #f3f4f6; border: 1px solid rgba(156, 163, 175, 0.8); }
        .tier-tag-2 { background: rgba(194, 136, 84, 0.25); color: #fed7aa; border: 1px solid rgba(194, 136, 84, 0.8); }
        .tier-tag-3 { background: rgba(34, 197, 94, 0.25); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.8); }
        .tier-tag-4 { background: rgba(59, 130, 246, 0.25); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.8); }
        .tier-tag-5 { background: rgba(239, 68, 68, 0.25); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.8); }
        .tier-tag-6 { background: rgba(249, 115, 22, 0.25); color: #fdba74; border: 1px solid rgba(249, 115, 22, 0.8); }
        .tier-tag-7 { background: rgba(234, 179, 8, 0.25); color: #fef08a; border: 1px solid rgba(234, 179, 8, 0.8); }
        .tier-tag-8 { background: rgba(255, 255, 255, 0.25); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 0 6px rgba(255, 255, 255, 0.5); }

        .enchant-card-tag {
            position: absolute;
            top: 7px;
            right: 7px;
            font-size: 0.7rem;
            font-weight: 800;
            padding: 1px 6px;
            border-radius: 6px;
            line-height: 1.2;
        }
        .ench-1 { background: rgba(34, 197, 94, 0.25); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.6); }
        .ench-2 { background: rgba(59, 130, 246, 0.25); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.6); }
        .ench-3 { background: rgba(168, 85, 247, 0.25); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.6); }
        .ench-4 { background: rgba(245, 158, 11, 0.25); color: #fde68a; border: 1px solid rgba(245, 158, 11, 0.6); }

        /* ── Builder Workspace & Dynamic Grids ──────────────────────── */
        .builder-workspace-grid {
            display: grid;
            grid-template-columns: 360px 1fr;
            gap: 2rem;
        }

        .role-seats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.75rem;
        }

        .special-roles-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(126px, 152px));
            gap: 0.65rem;
            justify-content: center;
        }

        /* ── Comprehensive Mobile & Touch Optimizations ──────────────── */
        @media (max-width: 992px) {
            .builder-workspace-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
        }

        @media (max-width: 768px) {
            main {
                padding: 0.85rem 0.65rem;
            }
            .panel-card {
                padding: 1.1rem 0.85rem;
                border-radius: 16px;
                margin-bottom: 1.25rem;
            }
            .panel-header {
                margin-bottom: 1rem;
                padding-bottom: 0.65rem;
            }
            .panel-title {
                font-size: 1.05rem;
            }
            .form-group {
                margin-bottom: 1rem;
            }
            /* Prevent iOS Safari from auto-zooming on focus */
            .form-control, input, select, textarea {
                font-size: 16px !important;
                padding: 0.65rem 0.85rem;
            }
            .btn-submit {
                padding: 0.85rem 1rem;
                font-size: 0.92rem;
            }
            .role-seats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 0.65rem;
            }
            .special-role-card {
                min-height: 105px;
                padding: 0.45rem 0.25rem;
            }
            .special-role-card .role-emoji-icon {
                font-size: 1.2rem;
            }
            .btn-step-dec, .btn-step-inc {
                height: 32px;
                font-size: 0.95rem;
            }
            .builds-gallery {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
            .build-preview-card {
                border-radius: 16px;
            }
            .build-card-image {
                height: 200px;
            }
            .events-container {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
            .event-card {
                padding: 1rem;
                border-radius: 16px;
            }
            .metrics-grid {
                grid-template-columns: 1fr;
                gap: 0.85rem;
                margin-bottom: 1.25rem;
            }
            .metric-card {
                padding: 1rem;
                border-radius: 14px;
            }
            .metric-info .value {
                font-size: 1.4rem;
            }
            .modal-overlay {
                padding: 0.5rem;
            }
            .modal-content {
                border-radius: 16px;
                max-height: 92vh;
                width: 98vw;
            }
            .modal-header {
                padding: 0.85rem 1rem;
            }
            .modal-title {
                font-size: 1.05rem;
            }
            .modal-body {
                padding: 0.75rem;
            }
            .item-grid,
            .items-picker-grid,
            .swap-picker-grid {
                grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
                gap: 0.6rem;
            }
            .item-picker-card,
            .swap-item-card {
                padding: 1.45rem 0.4rem 0.65rem !important;
                min-height: 132px;
                border-radius: 10px;
            }
            .item-picker-img {
                width: 50px;
                height: 50px;
                margin-bottom: 0.35rem;
            }
            .item-picker-name {
                font-size: 0.7rem;
            }
            .item-picker-type {
                font-size: 0.62rem;
            }
            .enchant-filter-btn, .tier-filter-btn {
                padding: 0.22rem 0.55rem;
                font-size: 0.72rem;
            }
            #enchantFilterBar, #tierFilterBar {
                padding: 0.5rem 0.75rem !important;
            }
            .toast-container {
                left: 10px;
                right: 10px;
                bottom: 15px;
            }
            .toast {
                width: 100%;
                padding: 0.75rem 1rem;
                font-size: 0.85rem;
            }
        }

        @media (max-width: 480px) {
            .special-roles-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* RAVIX HERO BANNER STYLES */
        .ravix-hero-banner {
            position: relative;
            background: linear-gradient(180deg, rgba(16, 18, 28, 0.95) 0%, rgba(9, 10, 17, 0.98) 100%);
            border: 1px solid var(--border-neon);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(254, 240, 138, 0.25);
            border-radius: 20px;
            padding: 2.2rem 1.8rem;
            margin-bottom: 2rem;
            text-align: center;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1.2rem;
        }

        .ravix-hero-glow {
            position: absolute;
            top: -60%;
            left: 50%;
            transform: translateX(-50%);
            width: 550px;
            height: 350px;
            background: radial-gradient(circle, rgba(245, 158, 11, 0.22) 0%, rgba(180, 83, 9, 0.08) 50%, transparent 80%);
            filter: blur(50px);
            pointer-events: none;
            z-index: 0;
        }

        .ravix-hero-content {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1.25rem;
            width: 100%;
        }

        .ravix-crest-wrapper {
            position: relative;
            width: 135px;
            height: 135px;
            border-radius: 50%;
            padding: 5px;
            background: linear-gradient(135deg, #fef08a 0%, #f59e0b 50%, #78350f 100%);
            box-shadow: 0 0 45px rgba(245, 158, 11, 0.6), inset 0 0 20px rgba(0, 0, 0, 0.85);
            display: flex;
            align-items: center;
            justify-content: center;
            animation: ravixFloat 4s ease-in-out infinite alternate;
        }

        @keyframes ravixFloat {
            0% { transform: translateY(0); box-shadow: 0 0 35px rgba(245, 158, 11, 0.5); }
            100% { transform: translateY(-7px); box-shadow: 0 10px 50px rgba(245, 158, 11, 0.75); }
        }

        .ravix-crest-img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            background: #000;
        }

        .ravix-titles {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.45rem;
            direction: ltr;
        }

        .ravix-main-title {
            font-family: var(--font-brand);
            font-size: 3.8rem;
            font-weight: 900;
            letter-spacing: 8px;
            line-height: 1;
            margin: 0;
            background: linear-gradient(180deg, #FFFFFF 0%, #cbd5e1 35%, #f59e0b 70%, #92400e 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 4px 18px rgba(245, 158, 11, 0.55));
        }

        .ravix-community-divider {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            width: 100%;
            justify-content: center;
            direction: ltr;
        }

        .ravix-divider-line {
            height: 1.5px;
            width: 90px;
            background: linear-gradient(90deg, transparent, #f59e0b, #fef08a);
        }

        .ravix-community-divider .ravix-divider-line:last-child {
            background: linear-gradient(90deg, #fef08a, #f59e0b, transparent);
        }

        .ravix-divider-diamond {
            color: var(--gold-bright);
            font-size: 0.65rem;
            text-shadow: 0 0 10px rgba(251, 191, 36, 0.8);
        }

        .ravix-community-text {
            font-family: var(--font-brand);
            font-size: 1.15rem;
            font-weight: 800;
            letter-spacing: 6px;
            color: #fbbf24;
            text-shadow: 0 0 14px rgba(245, 158, 11, 0.6);
        }

        .ravix-tagline {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            font-size: 0.88rem;
            font-weight: 700;
            letter-spacing: 3.5px;
            color: #e2e8f0;
            margin-top: 0.35rem;
            direction: ltr;
        }

        .ravix-tagline-dot {
            color: #f59e0b;
            font-size: 0.9rem;
        }

        .ravix-sub-desc {
            position: relative;
            z-index: 1;
            color: #94a3b8;
            font-size: 0.92rem;
            margin: 0;
            font-weight: 500;
        }

        @media (max-width: 640px) {
            .ravix-hero-banner {
                padding: 1.5rem 1rem;
            }
            .ravix-main-title {
                font-size: 2.3rem;
                letter-spacing: 4px;
            }
            .ravix-community-text {
                font-size: 0.9rem;
                letter-spacing: 3px;
            }
            .ravix-tagline {
                font-size: 0.75rem;
                letter-spacing: 1.5px;
            }
            .ravix-crest-wrapper {
                width: 80px;
                height: 80px;
            }
        }

        /* ── Modern RAVIX Preloader / Splash Screen ──────────────────────── */
        html.preloader-skipped #appPreloader {
            display: none !important;
        }

        .preloader-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: #06070a;
            background: radial-gradient(circle at center, rgba(245, 158, 11, 0.12) 0%, #06070a 75%);
            z-index: 9999999;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s;
            opacity: 1;
            visibility: visible;
        }

        .preloader-overlay.fade-out {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .preloader-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            width: 90%;
            max-width: 440px;
            padding: 2.5rem 2rem;
            background: rgba(14, 16, 24, 0.85);
            border: 1px solid rgba(245, 158, 11, 0.4);
            border-radius: 24px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 35px rgba(245, 158, 11, 0.18);
            backdrop-filter: blur(16px);
        }

        .preloader-logo-wrapper {
            position: relative;
            width: 90px;
            height: 90px;
            margin-bottom: 1.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .preloader-logo {
            width: 75px;
            height: 75px;
            object-fit: contain;
            position: relative;
            z-index: 2;
            filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.7));
            animation: preloaderPulse 2.2s infinite ease-in-out;
        }

        .preloader-glow {
            position: absolute;
            width: 90px;
            height: 90px;
            background: radial-gradient(circle, rgba(245, 158, 11, 0.45) 0%, rgba(0, 0, 0, 0) 70%);
            border-radius: 50%;
            animation: preloaderRing 2.2s infinite ease-in-out;
        }

        @keyframes preloaderPulse {
            0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6)); }
            50% { transform: scale(1.06); filter: drop-shadow(0 0 18px rgba(245, 158, 11, 0.95)); }
        }

        @keyframes preloaderRing {
            0%, 100% { transform: scale(0.9); opacity: 0.4; }
            50% { transform: scale(1.3); opacity: 0.85; }
        }

        .preloader-title {
            font-family: 'Cinzel', 'Cairo', serif;
            font-size: 1.45rem;
            font-weight: 900;
            color: #fbbf24;
            letter-spacing: 1px;
            margin-bottom: 0.4rem;
        }

        .preloader-subtitle {
            font-size: 0.88rem;
            color: #cbd5e1;
            margin-bottom: 1.6rem;
            font-weight: 600;
        }

        .preloader-progress-track {
            width: 100%;
            height: 8px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 999px;
            overflow: hidden;
            border: 1px solid rgba(245, 158, 11, 0.3);
            margin-bottom: 0.85rem;
            position: relative;
        }

        .preloader-progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #d97706, #f59e0b, #fef08a);
            box-shadow: 0 0 14px rgba(245, 158, 11, 0.8);
            border-radius: 999px;
            transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .preloader-status-row {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.78rem;
            color: #94a3b8;
            font-weight: 600;
        }

        .preloader-percent {
            color: #fbbf24;
            font-weight: 800;
            font-family: 'Cinzel', monospace;
        }

        /* ── Weapon Swap (سواب) Controls inside Special Cards ── */
        .card-swap-wrapper {
            margin-top: 0.35rem;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .card-swap-wrapper {
            width: 100%;
            margin-top: 5px;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 4px;
            align-items: stretch;
        }

        .card-swap-wrapper > :nth-child(5) {
            grid-column: 1 / -1;
        }

        .btn-weapon-swap {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
            border: 1px dashed rgba(245, 158, 11, 0.32);
            color: #cbd5e1;
            border-radius: 7px;
            padding: 0.2rem 0.24rem;
            font-size: 0.61rem;
            font-weight: 700;
            cursor: pointer;
            width: 100%;
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
            white-space: nowrap;
            overflow: hidden;
            transition: all 0.18s ease;
            box-sizing: border-box;
        }

        .btn-weapon-swap i {
            color: #fbbf24;
            font-size: 0.58rem;
            opacity: 0.85;
            flex-shrink: 0;
        }

        .btn-weapon-swap:hover {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.1));
            border-style: solid;
            border-color: rgba(245, 158, 11, 0.7);
            color: #fde047;
            transform: translateY(-1px);
            box-shadow: 0 3px 10px rgba(245, 158, 11, 0.18);
        }

        .badge-weapon-swap {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(180, 83, 9, 0.12));
            border: 1px solid rgba(245, 158, 11, 0.55);
            color: #fef08a;
            border-radius: 7px;
            padding: 0.18rem 0.24rem;
            font-size: 0.61rem;
            font-weight: 700;
            width: 100%;
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 3px;
            cursor: pointer;
            transition: all 0.18s ease;
            box-sizing: border-box;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
            overflow: hidden;
        }

        .badge-weapon-swap:hover {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.28), rgba(180, 83, 9, 0.2));
            border-color: #fbbf24;
            transform: translateY(-1px);
        }

        .swap-slot-pill {
            font-size: 0.58rem;
            font-weight: 900;
            color: #0b0e14;
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            border-radius: 5px;
            padding: 1px 4px;
            flex-shrink: 0;
            line-height: 1.25;
        }

        .badge-weapon-swap .swap-del-btn {
            background: rgba(239, 68, 68, 0.16);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #fca5a5;
            font-size: 0.78rem;
            cursor: pointer;
            width: 17px;
            height: 17px;
            border-radius: 5px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            font-weight: 800;
            flex-shrink: 0;
            transition: all 0.15s ease;
        }

        .badge-weapon-swap .swap-del-btn:hover {
            background: rgba(239, 68, 68, 0.85);
            color: #ffffff;
            transform: scale(1.08);
        }

        /* Enhanced Swap Picker Modal UI */
        .swap-modal-shell {
            border: 1px solid rgba(245, 158, 11, 0.32) !important;
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(245, 158, 11, 0.1) !important;
        }

        .swap-active-banner {
            padding: 0.55rem 1.35rem;
            background: rgba(245, 158, 11, 0.08);
            border-bottom: 1px solid rgba(245, 158, 11, 0.2);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.6rem;
            flex-wrap: wrap;
            font-size: 0.78rem;
        }

        .swap-search-wrap {
            position: relative;
            display: flex;
            align-items: center;
        }

        .swap-search-icon {
            position: absolute;
            inset-inline-start: 0.85rem;
            color: #fbbf24;
            font-size: 0.85rem;
            pointer-events: none;
        }

        .swap-search-input {
            padding-inline-start: 2.35rem !important;
            border-radius: 10px !important;
            background: rgba(8, 11, 18, 0.85) !important;
            border: 1px solid rgba(255, 255, 255, 0.14) !important;
            font-size: 0.86rem !important;
        }

        .swap-search-input:focus {
            border-color: rgba(245, 158, 11, 0.7) !important;
            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14) !important;
        }

        .swap-cat-bar {
            display: flex;
            gap: 0.4rem;
            flex-wrap: wrap;
            align-items: center;
        }

        .swap-cat-pill {
            background: rgba(255, 255, 255, 0.045);
            border: 1px solid rgba(255, 255, 255, 0.11);
            color: #94a3b8;
            border-radius: 999px;
            padding: 0.28rem 0.7rem;
            font-size: 0.74rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.18s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.32rem;
        }

        .swap-cat-pill:hover {
            background: rgba(245, 158, 11, 0.12);
            border-color: rgba(245, 158, 11, 0.45);
            color: #fde68a;
        }

        .swap-cat-pill.active {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.28), rgba(217, 119, 6, 0.18));
            border-color: #f59e0b;
            color: #fef08a;
            box-shadow: 0 2px 10px rgba(245, 158, 11, 0.22);
        }

        .swap-picker-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
            gap: 0.85rem;
            align-content: start;
            grid-auto-rows: max-content;
        }

        .swap-item-card {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            text-align: center;
            gap: 0.28rem;
            padding: 1.7rem 0.6rem 0.8rem !important;
            border-radius: 14px !important;
            min-height: 160px;
            height: auto !important;
        }

        .swap-item-card.is-selected {
            border-color: #f59e0b !important;
            background: linear-gradient(180deg, rgba(245, 158, 11, 0.22), rgba(22, 27, 38, 0.96)) !important;
            box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.55), 0 8px 20px rgba(245, 158, 11, 0.18) !important;
        }

        .swap-item-selected-tag {
            position: absolute;
            top: 7px;
            inset-inline-end: 7px;
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            color: #0b0e14;
            font-size: 0.62rem;
            font-weight: 900;
            padding: 1px 6px;
            border-radius: 999px;
        }