:root {
            --bg-dark: #0a0c10;
            --bg-panel: #12151c;
            --bg-item: #1a1f2a;
            --bg-hover: #252b3a;
            --border-dark: #2a3142;
            --border-accent: #4a5568;
            --border: #2a3142;
            --accent: #6366f1;
            --gold: #c9a227;
            --gold-light: #f0d55a;
            --gold-dark: #8a6d14;
            --text-primary: #e8e6e3;
            --text-secondary: #9ca3af;
            --text-muted: #6b7280;
            --accent-red: #8b2635;
            --accent-green: #2d5a3d;
            --accent-blue: #1e3a5f;
            --accent-purple: #4c1d95;
            --accent-orange: #9a3412;
            --accent-cyan: #0e7490;
        }

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

        body {
            font-family: 'Crimson Text', Georgia, serif;
            background: var(--bg-dark);
            color: var(--text-primary);
            min-height: 100vh;
            line-height: 1.6;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: 
                radial-gradient(ellipse at 20% 20%, rgba(201, 162, 39, 0.03) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(139, 38, 53, 0.03) 0%, transparent 50%);
            pointer-events: none;
            z-index: -1;
        }

        .container { max-width: 1600px; margin: 0 auto; padding: 20px; }

        header {
            text-align: center;
            padding: 40px 20px;
            border-bottom: 1px solid var(--border-dark);
            margin-bottom: 30px;
            position: relative;
        }

        header::before, header::after {
            content: '⚔'; font-size: 24px; color: var(--gold);
            position: absolute; top: 50%; transform: translateY(-50%);
        }
        header::before { left: 20%; }
        header::after { right: 20%; }

        h1 {
            font-family: 'Cinzel', serif;
            font-size: 2.8rem; font-weight: 700; color: var(--gold);
            text-shadow: 0 2px 10px rgba(201, 162, 39, 0.3);
            letter-spacing: 3px; margin-bottom: 8px;
        }

        .subtitle { font-size: 1.1rem; color: var(--text-secondary); font-style: italic; }

        .main-tabs {
            display: flex; gap: 4px; margin-bottom: 24px;
            border-bottom: 2px solid var(--border-dark);
        }

        .main-tab {
            padding: 14px 28px;
            background: var(--bg-panel);
            border: 1px solid var(--border-dark);
            border-bottom: none;
            border-radius: 8px 8px 0 0;
            color: var(--text-secondary);
            font-family: 'Cinzel', serif;
            font-size: 1rem; font-weight: 600;
            cursor: pointer; transition: all 0.2s;
            position: relative; top: 2px;
        }

        .main-tab:hover { background: var(--bg-hover); color: var(--text-primary); }

        .main-tab.active {
            background: var(--bg-panel);
            border-color: var(--gold-dark);
            border-bottom: 2px solid var(--bg-panel);
            color: var(--gold);
        }

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

        .main-layout {
            display: grid;
            grid-template-columns: 1fr 380px;
            gap: 30px;
        }

        @media (max-width: 1100px) {
            .main-layout { grid-template-columns: 1fr; }
        }

        .panel {
            background: var(--bg-panel);
            border: 1px solid var(--border-dark);
            border-radius: 8px;
            overflow: hidden;
        }

        .panel-header {
            background: linear-gradient(180deg, rgba(201, 162, 39, 0.1) 0%, transparent 100%);
            border-bottom: 1px solid var(--border-dark);
            padding: 16px 20px;
            display: flex; align-items: center; gap: 12px;
        }

        .panel-header h2 {
            font-family: 'Cinzel', serif;
            font-size: 1.2rem; font-weight: 600;
            color: var(--gold); letter-spacing: 1px;
        }

        .panel-icon { width: 24px; height: 24px; fill: var(--gold); }
        .panel-body { padding: 20px; }

        .search-filters { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
        .search-box { flex: 1; min-width: 250px; position: relative; }

        .search-box input {
            width: 100%; padding: 12px 16px 12px 44px;
            background: var(--bg-item);
            border: 1px solid var(--border-dark);
            border-radius: 6px;
            color: var(--text-primary);
            font-size: 1rem; font-family: inherit;
            transition: all 0.2s;
        }

        .search-box input:focus {
            outline: none;
            border-color: var(--gold-dark);
            box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.1);
        }

        .search-box::before {
            content: '🔍'; position: absolute;
            left: 14px; top: 50%; transform: translateY(-50%);
            font-size: 1rem; opacity: 0.6;
        }

        .filter-select {
            padding: 12px 36px 12px 16px;
            background: var(--bg-item);
            border: 1px solid var(--border-dark);
            border-radius: 6px;
            color: var(--text-primary);
            font-size: 1rem; font-family: inherit;
            cursor: pointer; appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
        }

        .filter-select:focus { outline: none; border-color: var(--gold-dark); }

        .category-tabs {
            display: flex; flex-wrap: wrap; gap: 8px;
            margin-bottom: 20px; padding-bottom: 16px;
            border-bottom: 1px solid var(--border-dark);
        }

        .category-tab {
            padding: 8px 16px;
            background: var(--bg-item);
            border: 1px solid var(--border-dark);
            border-radius: 20px;
            color: var(--text-secondary);
            font-size: 0.9rem; cursor: pointer;
            transition: all 0.2s; font-family: inherit;
        }

        .category-tab:hover { background: var(--bg-hover); color: var(--text-primary); }

        .category-tab.active {
            background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%);
            border-color: var(--gold);
            color: var(--bg-dark); font-weight: 600;
        }

        .category-tab .count {
            display: inline-block; margin-left: 6px;
            padding: 2px 6px; background: rgba(0, 0, 0, 0.2);
            border-radius: 10px; font-size: 0.75rem;
        }

        .item-list {
            max-height: 600px; overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--border-accent) var(--bg-item);
        }

        .item-list::-webkit-scrollbar { width: 8px; }
        .item-list::-webkit-scrollbar-track { background: var(--bg-item); border-radius: 4px; }
        .item-list::-webkit-scrollbar-thumb { background: var(--border-accent); border-radius: 4px; }

        .item-card {
            display: flex; justify-content: space-between; align-items: center;
            padding: 14px 16px;
            background: var(--bg-item);
            border: 1px solid var(--border-dark);
            border-radius: 6px; margin-bottom: 8px;
            cursor: pointer; transition: all 0.2s;
        }

        .item-card:hover {
            background: var(--bg-hover);
            border-color: var(--border-accent);
            transform: translateX(4px);
        }

        .item-info { flex: 1; }
        .item-name { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
        .item-meta { font-size: 0.85rem; color: var(--text-muted); }
        .item-meta span { margin-right: 12px; }

        .item-add-btn {
            padding: 8px 16px;
            background: var(--accent-green);
            border: none; border-radius: 4px;
            color: var(--text-primary);
            font-size: 0.9rem; font-family: inherit;
            cursor: pointer; transition: all 0.2s;
        }

        .item-add-btn:hover { background: #3d7a52; transform: scale(1.05); }

        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: none; justify-content: center; align-items: center;
            z-index: 1000;
        }

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

        .modal {
            background: var(--bg-panel);
            border: 2px solid var(--gold-dark);
            border-radius: 12px; padding: 30px;
            max-width: 450px; width: 90%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        }

        .modal h3 { font-family: 'Cinzel', serif; font-size: 1.4rem; color: var(--gold); margin-bottom: 8px; }
        .modal-item-type { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 20px; }

        .modal-materials {
            background: var(--bg-item);
            border-radius: 6px; padding: 16px;
            margin-bottom: 20px; max-height: 200px; overflow-y: auto;
        }

        .modal-materials h4 {
            font-size: 0.85rem; color: var(--text-muted);
            text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;
        }

        .modal-mat-item {
            display: flex; justify-content: space-between;
            padding: 6px 0; border-bottom: 1px solid var(--border-dark);
        }

        .modal-mat-item:last-child { border-bottom: none; }

        .quantity-selector { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
        .quantity-selector label { color: var(--text-secondary); }

        .quantity-input {
            width: 100px; padding: 10px;
            background: var(--bg-item);
            border: 1px solid var(--border-dark);
            border-radius: 6px;
            color: var(--text-primary);
            font-size: 1.1rem; text-align: center; font-family: inherit;
        }

        .quantity-input:focus { outline: none; border-color: var(--gold-dark); }

        .modal-actions { display: flex; gap: 12px; }

        .btn {
            flex: 1; padding: 12px 24px;
            border: none; border-radius: 6px;
            font-size: 1rem; font-family: inherit;
            cursor: pointer; transition: all 0.2s;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%);
            color: var(--bg-dark); font-weight: 600;
        }

        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(201, 162, 39, 0.3); }

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

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

        .shopping-list { position: sticky; top: 20px; }
        .list-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); }
        .list-empty-icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.4; }

        .crafting-queue { margin-bottom: 20px; }

        .queue-item {
            display: flex; justify-content: space-between; align-items: center;
            padding: 12px;
            background: var(--bg-item);
            border: 1px solid var(--border-dark);
            border-radius: 6px; margin-bottom: 6px;
        }

        .queue-item-info { flex: 1; }
        .queue-item-name { font-weight: 600; color: var(--text-primary); }
        .queue-item-qty { font-size: 0.85rem; color: var(--gold); }

        .queue-item-remove {
            width: 28px; height: 28px;
            background: var(--accent-red);
            border: none; border-radius: 4px;
            color: var(--text-primary);
            cursor: pointer; font-size: 1.1rem;
        }

        .queue-item-remove:hover { background: #a83246; }

        .materials-summary { border-top: 1px solid var(--border-dark); padding-top: 16px; }

        .materials-summary h3 {
            font-family: 'Cinzel', serif;
            font-size: 1rem; color: var(--gold);
            margin-bottom: 12px;
        }

        .material-row {
            display: flex; justify-content: space-between;
            padding: 8px 12px;
            background: var(--bg-item);
            border-radius: 4px; margin-bottom: 4px;
        }

        .material-row.gold-row {
            background: linear-gradient(90deg, rgba(201, 162, 39, 0.15) 0%, var(--bg-item) 100%);
            border: 1px solid var(--gold-dark);
        }

        .material-name { color: var(--text-primary); }
        .material-qty { font-weight: 600; color: var(--gold-light); }

        .list-actions { margin-top: 16px; display: flex; gap: 10px; }

        .btn-clear, .btn-copy {
            flex: 1; padding: 10px;
            border: none; border-radius: 6px;
            color: var(--text-primary);
            font-family: inherit; cursor: pointer;
        }

        .btn-clear { background: var(--accent-red); }
        .btn-clear:hover { background: #a83246; }
        .btn-copy { background: var(--accent-blue); font-size: 0.8rem; }
        .btn-copy:hover { background: #2a4f7f; }

        .no-results { text-align: center; padding: 40px; color: var(--text-muted); }

        .toast {
            position: fixed; bottom: 30px; right: 30px;
            padding: 14px 24px;
            background: var(--accent-green);
            border-radius: 8px;
            color: var(--text-primary); font-weight: 600;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            transform: translateY(100px); opacity: 0;
            transition: all 0.3s; z-index: 1001;
        }

        .toast.show { transform: translateY(0); opacity: 1; }

        /* BUILD A SET */
        .set-builder-layout {
            display: grid;
            grid-template-columns: 1fr 520px;
            gap: 30px;
        }

        @media (max-width: 1200px) {
            .set-builder-layout { grid-template-columns: 1fr; }
        }

        .browse-tabs {
            display: flex; gap: 0; margin-bottom: 16px;
            border-bottom: 2px solid var(--border-dark);
        }

        .browse-tab {
            padding: 10px 14px;
            background: transparent;
            border: none;
            color: var(--text-secondary);
            font-family: 'Cinzel', serif;
            font-size: 0.85rem; font-weight: 600;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
        }

        .browse-tab:hover { color: var(--text-primary); }
        .browse-tab.active { color: var(--gold); border-bottom-color: var(--gold); }

        .browse-content { display: none; }
        .browse-content.active { display: block; }

        .tier-selector {
            display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
        }

        .tier-btn {
            padding: 8px 14px;
            background: var(--bg-item);
            border: 1px solid var(--border-dark);
            border-radius: 6px;
            color: var(--text-secondary);
            font-family: 'Cinzel', serif;
            font-size: 0.85rem; cursor: pointer;
        }

        .tier-btn:hover { background: var(--bg-hover); border-color: var(--border-accent); color: var(--text-primary); }
        .tier-btn.active { background: linear-gradient(135deg, var(--accent-purple) 0%, #6d28d9 100%); border-color: #8b5cf6; color: white; }
        .tier-btn.active-weapon { background: linear-gradient(135deg, var(--accent-orange) 0%, #c2410c 100%); border-color: #ea580c; color: white; }
        .tier-btn.active-shield { background: linear-gradient(135deg, var(--accent-cyan) 0%, #0891b2 100%); border-color: #06b6d4; color: white; }

        /* Enchanting Recipes Tab */
        .enchant-type-tabs {
            display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
        }
        .enchant-type-btn {
            padding: 8px 16px; background: var(--bg-item); border: 1px solid var(--border-dark);
            border-radius: 6px; color: var(--text-secondary); font-size: 0.85rem;
            cursor: pointer; transition: all 0.2s;
        }
        .enchant-type-btn:hover { background: var(--bg-hover); border-color: var(--border-accent); color: var(--text-primary); }
        .enchant-type-btn.active { background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); border-color: #8b5cf6; color: white; }

        .enchant-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 12px; max-height: calc(100vh - 280px); overflow-y: auto;
        }
        .enchant-card {
            background: var(--bg-item); border: 1px solid var(--border-dark);
            border-radius: 8px; padding: 14px; cursor: pointer; transition: all 0.2s;
        }
        .enchant-card:hover { border-color: var(--border-accent); transform: translateY(-2px); }
        .enchant-card.selected { border-color: #8b5cf6; background: rgba(124, 58, 237, 0.1); }
        .enchant-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
        .enchant-card-name { font-family: 'Cinzel', serif; font-size: 1rem; color: var(--gold); }
        .enchant-card-type {
            font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase;
            background: var(--bg-dark); padding: 3px 8px; border-radius: 4px;
        }
        .enchant-card-catalyst {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: 0.75rem; color: #a78bfa; margin-bottom: 6px;
        }
        .enchant-card-components { font-size: 0.8rem; color: var(--text-secondary); }

        .enchant-detail-section { margin-bottom: 20px; }
        .enchant-detail-title {
            font-family: 'Cinzel', serif; font-size: 1.3rem; color: var(--gold);
            margin-bottom: 4px;
        }
        .enchant-detail-type { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 16px; }
        .enchant-detail-label {
            font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase;
            letter-spacing: 1px; margin-bottom: 6px;
        }
        .enchant-material-row {
            display: flex; justify-content: space-between; align-items: center;
            padding: 10px 12px; background: var(--bg-item); border-radius: 6px; margin-bottom: 6px;
        }
        .enchant-material-name { color: var(--text-primary); }
        .enchant-material-qty { color: var(--accent-cyan); font-weight: 600; }
        .enchant-quality-grid {
            display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px;
        }
        .enchant-quality-item {
            text-align: center; padding: 8px 4px; background: var(--bg-item);
            border-radius: 4px; font-size: 0.75rem;
        }
        .enchant-quality-label { color: var(--text-muted); margin-bottom: 2px; }
        .enchant-quality-value { color: var(--gold); font-weight: 600; }

        /* City Building Tab */
        .city-type-tabs {
            display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
        }
        .city-type-btn {
            padding: 8px 16px; background: var(--bg-item); border: 1px solid var(--border-dark);
            border-radius: 6px; color: var(--text-secondary); font-size: 0.85rem;
            cursor: pointer; transition: all 0.2s;
        }
        .city-type-btn:hover { background: var(--bg-hover); border-color: var(--border-accent); color: var(--text-primary); }
        .city-type-btn.active { background: linear-gradient(135deg, #059669 0%, #047857 100%); border-color: #10b981; color: white; }

        .city-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 12px; max-height: calc(100vh - 280px); overflow-y: auto;
        }
        .city-card {
            background: var(--bg-item); border: 1px solid var(--border-dark);
            border-radius: 8px; padding: 14px; cursor: pointer; transition: all 0.2s;
        }
        .city-card:hover { border-color: var(--border-accent); transform: translateY(-2px); }
        .city-card.selected { border-color: #10b981; background: rgba(16, 185, 129, 0.1); }
        .city-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
        .city-card-name { font-family: 'Cinzel', serif; font-size: 1rem; color: var(--gold); }
        .city-card-type {
            font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase;
            background: var(--bg-dark); padding: 3px 8px; border-radius: 4px;
        }
        .city-card-cost {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: 0.8rem; color: #fbbf24;
        }
        .city-card-modules {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: 0.75rem; color: #60a5fa; margin-top: 4px;
        }
        .city-module-costs {
            background: var(--bg-dark); border-radius: 6px; padding: 10px 12px; margin-top: 8px;
        }
        .city-module-cost-row {
            display: flex; justify-content: space-between; align-items: center;
            font-size: 0.85rem; color: var(--text-muted); padding: 4px 0;
        }
        .city-module-cost-row span:last-child { color: var(--text-primary); }
        /* Mob Info Tab Styles */
        .mob-controls { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
        .mob-search { width: 100%; padding: 10px 14px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 0.9rem; }
        .mob-search:focus { outline: none; border-color: var(--accent); }
        #mobLootSearchInput { margin-top: 8px; border-color: var(--gold-dark); }
        #mobLootSearchInput:focus { border-color: var(--gold); }
        .mob-tier-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
        .mob-tier-btn { padding: 6px 12px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 0.8rem; color: var(--text-muted); transition: all 0.2s; }
        .mob-tier-btn:hover { border-color: var(--accent); color: var(--text-primary); }
        .mob-tier-btn.active { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 600; }
        .mob-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; max-height: calc(100vh - 340px); overflow-y: auto; padding-right: 5px; }
        .mob-card { background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px; padding: 12px; cursor: pointer; transition: all 0.2s; }
        .mob-card:hover { border-color: var(--accent); transform: translateY(-2px); }
        .mob-card.selected { border-color: var(--accent); background: linear-gradient(135deg, var(--bg-dark), rgba(99, 102, 241, 0.1)); }
        .mob-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
        .mob-tier-badge { padding: 3px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; color: #fff; }
        .mob-name { font-weight: 600; color: var(--text-primary); text-transform: capitalize; font-size: 0.9rem; }
        .mob-card-stats { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.75rem; color: var(--text-muted); }
        .mob-health { color: #ef4444; }
        .mob-attack { color: #60a5fa; }
        .mob-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 300px; color: var(--text-muted); text-align: center; }
        .mob-detail-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--border); }
        .mob-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
        .mob-stat-box { background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px; padding: 12px; text-align: center; }
        .mob-stat-label { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 5px; }
        .mob-stat-value { font-size: 1rem; color: var(--text-primary); font-weight: 600; }
        .mob-magic-section, .mob-resist-section, .mob-notes-section { margin-bottom: 20px; padding: 15px; background: var(--bg-dark); border-radius: 8px; }
        .mob-section-title { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 10px; font-weight: 600; }
        .mob-magic-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
        .mob-magic-badge { padding: 5px 10px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; color: #000; }
        .mob-resist-list { display: flex; flex-wrap: wrap; gap: 6px; }
        .mob-resist-badge { padding: 5px 10px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; color: #fff; opacity: 0.8; }
        .mob-detail-section { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
        .mob-detail-section:last-child { border-bottom: none; margin-bottom: 0; }
        .mob-detail-title { font-size: 1.3rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; text-transform: capitalize; }
        .mob-detail-subtitle { font-size: 0.85rem; color: var(--text-muted); }
        .mob-stat-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
        .mob-stat-row:last-child { border-bottom: none; }
        .mob-magic-tag { padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 500; }
        .mob-magic-tag.effective { background: rgba(34, 197, 94, 0.2); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.3); }
        .mob-magic-tag.resistant { background: rgba(239, 68, 68, 0.2); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }
        .mob-notes { background: var(--bg-hover); padding: 10px 12px; border-radius: 6px; font-size: 0.85rem; color: var(--text-muted); font-style: italic; }
        /* Loot Table Styles */
        .mob-loot-section { margin-bottom: 20px; padding: 15px; background: var(--bg-dark); border-radius: 8px; }
        .mob-loot-section.drops { border-left: 3px solid #f59e0b; }
        .mob-loot-section.skinning { border-left: 3px solid #10b981; }
        .loot-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
        .loot-table th { text-align: left; padding: 6px 8px; font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; border-bottom: 1px solid var(--border); }
        .loot-table td { padding: 6px 8px; font-size: 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
        .loot-table tr:last-child td { border-bottom: none; }
        .loot-table tr:hover { background: rgba(255,255,255,0.03); }
        .loot-item-name { color: var(--text-primary); }
        .loot-chance { color: var(--accent); font-weight: 600; text-align: right; }
        .loot-chance.rare { color: #a855f7; }
        .loot-chance.uncommon { color: #3b82f6; }
        .loot-chance.common { color: #22c55e; }
        .loot-difficulty-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; margin-left: 10px; }
        .loot-difficulty-badge.very-easy { background: #22c55e; color: #000; }
        .loot-difficulty-badge.easy { background: #84cc16; color: #000; }
        .loot-difficulty-badge.medium { background: #eab308; color: #000; }
        .loot-difficulty-badge.hard { background: #f97316; color: #000; }
        .loot-difficulty-badge.very-hard { background: #ef4444; color: #fff; }
        .loot-difficulty-badge.boss { background: #7c3aed; color: #fff; }
        .loot-difficulty-badge.champion { background: #ec4899; color: #fff; }
        .no-loot-data { color: var(--text-muted); font-style: italic; font-size: 0.85rem; text-align: center; padding: 20px; }
        .city-detail-section { margin-bottom: 20px; }
        .city-detail-title {
            font-family: 'Cinzel', serif; font-size: 1.3rem; color: var(--gold);
            margin-bottom: 4px;
        }
        .city-detail-type { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 16px; }
        .city-material-row {
            display: flex; justify-content: space-between; align-items: center;
            padding: 10px 12px; background: var(--bg-item); border-radius: 6px; margin-bottom: 6px;
        }
        .city-material-name { color: var(--text-primary); }
        .city-material-qty { color: var(--accent-cyan); font-weight: 600; }

        .pieces-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 10px;
            max-height: 500px;
            overflow-y: auto;
        }

        .piece-card {
            background: var(--bg-item);
            border: 1px solid var(--border-dark);
            border-radius: 6px;
            padding: 12px;
        }

        .piece-card:hover { border-color: var(--border-accent); }
        .piece-card.in-build { border-color: var(--accent-green); background: rgba(45, 90, 61, 0.15); }

        .piece-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
        .piece-card-name { font-family: 'Cinzel', serif; font-size: 0.9rem; color: var(--gold); }

        .piece-card-slot {
            font-size: 0.65rem; color: var(--text-muted);
            text-transform: uppercase; letter-spacing: 1px;
            background: var(--bg-dark);
            padding: 2px 6px; border-radius: 3px;
        }

        .piece-card-materials { font-size: 0.7rem; color: var(--text-secondary); margin-bottom: 8px; }

        .piece-add-btn {
            width: 100%; padding: 6px;
            background: var(--accent-green);
            border: none; border-radius: 4px;
            color: var(--text-primary);
            font-family: inherit; font-size: 0.8rem;
            cursor: pointer;
        }

        .piece-add-btn:hover { background: #3d7a52; }
        .piece-add-btn.added { background: var(--border-accent); cursor: default; }
        .piece-add-btn:disabled { background: var(--border-dark); color: var(--text-muted); cursor: not-allowed; }

        .build-panel { max-height: calc(100vh - 280px); overflow-y: auto; padding: 0; }

        /* Game-style Character Sheet */
        .character-sheet {
            display: flex;
            gap: 8px;
            padding: 10px;
            background: linear-gradient(180deg, #141418 0%, #1a1a20 100%);
        }

        .stats-panel {
            width: 165px;
            flex-shrink: 0;
        }

        .stats-section-box {
            background: rgba(0,0,0,0.5);
            border: 1px solid #3a3a4a;
            margin-bottom: 6px;
            padding: 6px 8px;
        }

        .stats-section-title {
            color: #c9a227;
            font-family: 'Cinzel', serif;
            font-size: 0.65rem;
            font-weight: bold;
            margin-bottom: 4px;
            border-bottom: 1px solid #333;
            padding-bottom: 3px;
        }

        .stat-row {
            display: flex;
            justify-content: space-between;
            padding: 1px 0;
            font-size: 0.65rem;
        }

        .stat-row .stat-name {
            color: #777;
        }

        .stat-row .stat-val {
            color: #999;
            font-family: monospace;
            font-size: 0.6rem;
        }

        .stat-row .stat-val.has-bonus {
            color: #4ade80;
        }

        .equip-column {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .paperdoll-container {
            position: relative;
            width: 336px;
            height: 514px;
            background-image: url('data:image/webp;base64,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');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 4px;
        }

        .equip-slot {
            position: absolute;
            background: rgba(0,0,0,0.4);
            border: 2px solid rgba(100, 150, 200, 0.5);
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s;
        }

        .equip-slot:hover {
            border-color: #c9a227;
            background: rgba(201, 162, 39, 0.25);
        }

        .equip-slot.filled {
            background: rgba(100, 200, 100, 0.15);
            border-color: rgba(100, 200, 100, 0.5);
        }

        .equip-slot .slot-label {
            font-size: 9px;
            color: #aaa;
            text-shadow: 1px 1px 1px #000;
            text-align: center;
            line-height: 1.1;
            word-wrap: break-word;
            overflow: hidden;
            padding: 0 2px;
        }

        .equip-slot.filled .slot-label {
            color: #fff;
            font-size: 8px;
            font-weight: 600;
        }

        .equip-slot .remove-btn {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 14px;
            height: 14px;
            background: rgba(180, 50, 50, 0.9);
            border: none;
            border-radius: 3px;
            color: white;
            font-size: 0.5rem;
            cursor: pointer;
            display: none;
            padding: 0;
        }

        .equip-slot.filled:hover .remove-btn {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .equip-slot .enchant-dot {
            position: absolute;
            top: 3px;
            left: 3px;
            width: 6px;
            height: 6px;
            background: #4ade80;
            border-radius: 50%;
            box-shadow: 0 0 4px #4ade80;
        }
        
        /* Accessory slots */
        .accessory-slot {
            position: absolute;
            background: rgba(0,0,0,0.4);
            border: 2px solid rgba(180, 100, 180, 0.5);
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s;
        }

        .accessory-slot:hover {
            border-color: #c9a227;
            background: rgba(201, 162, 39, 0.25);
        }

        .accessory-slot.filled {
            background: rgba(100, 200, 100, 0.15);
            border-color: rgba(100, 200, 100, 0.5);
        }

        .accessory-slot .slot-label {
            font-size: 7px;
            color: #aaa;
            text-shadow: 1px 1px 1px #000;
            text-align: center;
            line-height: 1.1;
            word-wrap: break-word;
            overflow: hidden;
            padding: 0 1px;
        }

        .accessory-slot.filled .slot-label {
            color: #fff;
            font-weight: 600;
        }

        .accessory-slot .remove-btn {
            position: absolute;
            top: 1px;
            right: 1px;
            width: 12px;
            height: 12px;
            background: rgba(180, 50, 50, 0.9);
            border: none;
            border-radius: 2px;
            color: white;
            font-size: 0.45rem;
            cursor: pointer;
            display: none;
            padding: 0;
        }

        .accessory-slot.filled:hover .remove-btn {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .accessory-slot .enchant-dot {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 5px;
            height: 5px;
            background: #4ade80;
            border-radius: 50%;
            box-shadow: 0 0 4px #4ade80;
        }
        
        /* Disabled slots (robe/armor conflict) */
        .slot-disabled {
            opacity: 0.4;
            cursor: not-allowed !important;
            border-color: rgba(100, 100, 100, 0.4) !important;
            background: rgba(50, 50, 50, 0.5) !important;
        }
        
        .slot-disabled:hover {
            border-color: rgba(150, 50, 50, 0.6) !important;
            background: rgba(100, 50, 50, 0.3) !important;
        }
        
        .slot-disabled .slot-label {
            color: #666 !important;
            font-size: 7px !important;
        }

        /* Accessory slot positions - FINAL */
        /* SLOT_ROBE */ .accessory-slot[data-slot="Robe"] { left: 34px; top: 106px; width: 56px; height: 56px; }
        /* SLOT_EARRING */ .accessory-slot[data-slot="Earring"] { left: 87px; top: 17px; width: 38px; height: 38px; }
        /* SLOT_NECKLACE */ .accessory-slot[data-slot="Necklace"] { left: 148px; top: 65px; width: 38px; height: 38px; }
        /* SLOT_RING1 */ .accessory-slot[data-slot="Ring1"] { left: 44px; top: 380px; width: 38px; height: 38px; }
        /* SLOT_RING2 */ .accessory-slot[data-slot="Ring2"] { left: 242px; top: 379px; width: 38px; height: 38px; }

        .equip-slot.selecting {
            border-color: #00aaff !important;
            background: rgba(0, 170, 255, 0.3) !important;
            box-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
            animation: pulse-select 1s infinite;
        }

        .accessory-slot.selecting {
            border-color: #00aaff !important;
            background: rgba(0, 170, 255, 0.3) !important;
            box-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
            animation: pulse-select 1s infinite;
        }

        @keyframes pulse-select {
            0%, 100% { box-shadow: 0 0 5px rgba(0, 170, 255, 0.5); }
            50% { box-shadow: 0 0 15px rgba(0, 170, 255, 0.8); }
        }

        .weapon-slot.selecting {
            border-color: #00aaff !important;
            background: rgba(0, 170, 255, 0.3) !important;
            box-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
            animation: pulse-select 1s infinite;
        }

        .slot-filter-bar {
            background: linear-gradient(135deg, #1a3a5c, #0d2840);
            border: 1px solid #00aaff;
            padding: 8px 12px;
            margin-bottom: 10px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #ccc;
            font-size: 0.85rem;
        }

        .slot-filter-bar strong {
            color: #00aaff;
        }

        .slot-filter-bar button {
            background: rgba(255,100,100,0.2);
            border: 1px solid #ff6666;
            color: #ff6666;
            padding: 4px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.75rem;
        }

        .slot-filter-bar button:hover {
            background: rgba(255,100,100,0.4);
        }

        .no-pieces {
            text-align: center;
            padding: 30px;
            color: #888;
            font-style: italic;
        }

        /* ARMOR SLOT POSITIONS - FINAL */
        /* SLOT_HEAD */ .equip-slot[data-slot="Head"] { left: 133px; top: 5px; width: 56px; height: 56px; }
        /* SLOT_SHOULDERS */ .equip-slot[data-slot="Shoulders"] { left: 233px; top: 104px; width: 56px; height: 56px; }
        /* SLOT_ARMS */ .equip-slot[data-slot="Arms"] { left: 232px; top: 170px; width: 56px; height: 56px; }
        /* SLOT_ELBOWS */ .equip-slot[data-slot="Elbows"] { left: 233px; top: 238px; width: 56px; height: 56px; }
        /* SLOT_GLOVES */ .equip-slot[data-slot="Gloves"] { left: 233px; top: 302px; width: 56px; height: 56px; }
        /* SLOT_WAIST */ .equip-slot[data-slot="Waist"] { left: 33px; top: 306px; width: 56px; height: 56px; }
        /* SLOT_SHINS */ .equip-slot[data-slot="Shins"] { left: 101px; top: 372px; width: 56px; height: 56px; }
        /* SLOT_FEET */ .equip-slot[data-slot="Feet"] { left: 167px; top: 372px; width: 56px; height: 56px; }
        
        /* Large slots - Chest and Legs */
        /* SLOT_CHEST */ .equip-slot[data-slot="Chest"] { left: 107px; top: 119px; width: 110px; height: 100px; }
        /* SLOT_LEGS */ .equip-slot[data-slot="Legs"] { left: 101px; top: 235px; width: 117px; height: 130px; }
        
        /* Weapon slots */
        .weapon-slot {
            position: absolute;
            background: rgba(0,0,0,0.4);
            border: 2px solid rgba(200, 150, 50, 0.5);
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s;
        }

        .weapon-slot:hover {
            border-color: #c9a227;
            background: rgba(201, 162, 39, 0.25);
        }

        .weapon-slot.filled {
            background: rgba(100, 200, 100, 0.15);
            border-color: rgba(100, 200, 100, 0.5);
        }

        .weapon-slot .slot-label {
            font-size: 9px;
            color: #aaa;
            text-shadow: 1px 1px 1px #000;
            text-align: center;
            line-height: 1.1;
            word-wrap: break-word;
            overflow: hidden;
            padding: 0 2px;
        }

        .weapon-slot.filled .slot-label {
            color: #fff;
            font-size: 8px;
            font-weight: 600;
        }

        .weapon-slot .x-btn {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 14px;
            height: 14px;
            background: rgba(180, 50, 50, 0.9);
            border: none;
            border-radius: 3px;
            color: white;
            font-size: 0.5rem;
            cursor: pointer;
            display: none;
            padding: 0;
        }

        .weapon-slot.filled:hover .x-btn {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .weapon-slot .enchant-dot {
            position: absolute;
            top: 3px;
            left: 3px;
            width: 6px;
            height: 6px;
            background: #4ade80;
            border-radius: 50%;
            box-shadow: 0 0 4px #4ade80;
        }

        /* Weapon positions - FINAL */
        /* SLOT_MAINHAND */ .weapon-slot[data-slot="MainHand"] { left: 64px; top: 440px; width: 56px; height: 56px; }
        /* SLOT_OFFHAND */ .weapon-slot[data-slot="OffHand"] { left: 132px; top: 441px; width: 56px; height: 56px; }

        .quality-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            background: rgba(0,0,0,0.3);
            border-top: 1px solid #333;
        }

        .quality-bar label {
            font-size: 0.6rem;
            color: #888;
        }

        .quality-bar select {
            padding: 3px 6px;
            background: #1a1a20;
            border: 1px solid #444;
            color: #ccc;
            font-size: 0.6rem;
            border-radius: 3px;
        }

        .action-row {
            display: flex;
            gap: 6px;
            padding: 8px 10px;
            background: rgba(0,0,0,0.2);
        }

        .action-row button {
            flex: 1;
            padding: 8px;
            border: none;
            border-radius: 4px;
            font-family: 'Cinzel', serif;
            font-size: 0.7rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-clr {
            background: linear-gradient(135deg, #6b2020 0%, #4c1010 100%);
            color: #ddd;
        }

        .btn-calc {
            background: linear-gradient(135deg, #c9a227 0%, #a07d1c 100%);
            color: #111;
        }

        .btn-clr:hover, .btn-calc:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
        }

        /* Enchant Popup */
        .enchant-popup {
            position: fixed;
            background: #1a1a22;
            border: 2px solid #c9a227;
            border-radius: 6px;
            padding: 12px;
            z-index: 1000;
            box-shadow: 0 8px 30px rgba(0,0,0,0.7);
            min-width: 180px;
        }

        .enchant-popup h5 {
            margin: 0 0 8px 0;
            color: #c9a227;
            font-size: 0.75rem;
            font-family: 'Cinzel', serif;
        }

        .enchant-popup select {
            width: 100%;
            padding: 5px;
            margin-bottom: 6px;
            background: #0f0f15;
            border: 1px solid #444;
            border-radius: 4px;
            color: #ddd;
            font-size: 0.65rem;
        }

        .enchant-popup .popup-btns {
            display: flex;
            gap: 6px;
            margin-top: 8px;
        }

        .enchant-popup button {
            flex: 1;
            padding: 5px 10px;
            border: none;
            border-radius: 3px;
            font-size: 0.6rem;
            cursor: pointer;
        }

        .enchant-popup .btn-ok {
            background: #2a7a3a;
            color: white;
        }

        .enchant-popup .btn-cancel {
            background: #4a4a5a;
            color: #ddd;
        }

        .quality-select:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background: rgba(100, 100, 100, 0.2);
        }

        .quality-select:focus {
            outline: none;
            border-color: var(--gold);
        }

        .result-section { margin-bottom: 8px; }

        .result-section h4 {
            font-family: 'Cinzel', serif;
            font-size: 0.7rem; color: var(--gold);
            margin-bottom: 4px; padding-bottom: 3px;
            border-bottom: 1px solid var(--border-dark);
        }

        .result-section .material-row {
            padding: 4px 8px;
            font-size: 0.75rem;
        }

        .stats-section {
            background: rgba(30, 58, 95, 0.3);
            border: 1px solid var(--accent-blue);
            border-radius: 4px;
            padding: 8px;
            margin-bottom: 10px;
        }

        .stats-section h4 {
            border-bottom-color: var(--accent-blue);
            margin-bottom: 6px;
        }

        .stat-group {
            display: flex;
            justify-content: space-between;
            font-size: 0.7rem;
            padding: 2px 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

        .stat-group:last-child {
            border-bottom: none;
        }

        .stat-label {
            color: var(--text-muted);
            font-weight: 600;
        }

        .stat-value {
            color: var(--text-primary);
            font-family: monospace;
            font-size: 0.65rem;
        }

        .enchant-bonus {
            color: #4ade80;
            font-size: 0.6rem;
        }

        .total-gold {
            background: linear-gradient(90deg, rgba(201, 162, 39, 0.2) 0%, var(--bg-item) 100%);
            border: 2px solid var(--gold-dark);
            padding: 8px; border-radius: 6px;
            text-align: center; margin-top: 8px;
        }

        .total-gold-label { font-size: 0.7rem; color: var(--text-secondary); }
        .total-gold-value { font-family: 'Cinzel', serif; font-size: 1.1rem; color: var(--gold-light); font-weight: 700; }

        footer {
            text-align: center; padding: 30px; margin-top: 40px;
            border-top: 1px solid var(--border-dark);
            color: var(--text-muted); font-size: 0.9rem;
        }

        .donate-btn {
            display: inline-block;
            padding: 8px 16px;
            background: linear-gradient(135deg, var(--gold) 0%, #b8860b 100%);
            color: #1a1a1a;
            text-decoration: none;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
        }

        .donate-btn:hover {
            background: linear-gradient(135deg, #ffd700 0%, var(--gold) 100%);
            box-shadow: 0 4px 12px rgba(212, 175, 55, 0.5);
            transform: translateY(-2px);
        }

        /* Map Finder Styles */
        .map-paste-area {
            width: 100%;
            min-height: 400px;
            border: 3px dashed rgba(212, 175, 55, 0.3);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: rgba(0, 0, 0, 0.2);
            position: relative;
        }

        .map-paste-area:hover {
            border-color: rgba(212, 175, 55, 0.6);
            background: rgba(0, 0, 0, 0.3);
        }

        .map-paste-area:focus {
            outline: none;
            border-color: var(--gold);
            box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
        }

        .paste-prompt {
            text-align: center;
            pointer-events: none;
        }

        #mapImageCanvas {
            max-width: 100%;
            max-height: 600px;
            border-radius: 8px;
        }

        .loading-spinner {
            border: 4px solid rgba(212, 175, 55, 0.2);
            border-top: 4px solid var(--gold);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .type-badge {
            font-size: 0.6rem;
            padding: 1px 5px;
            border-radius: 3px;
            margin-left: 6px;
        }
        .type-badge.weapon { background: var(--accent-orange); color: white; }
        .type-badge.shield { background: var(--accent-cyan); color: white; }
        .type-badge.twohanded { background: var(--accent-purple); color: white; }

        .tier-badge {
            font-size: 0.55rem;
            padding: 1px 4px;
            border-radius: 3px;
            margin-left: 6px;
            background: rgba(100, 150, 200, 0.3);
            color: #8ac;
            font-weight: normal;
        }

        .hint-text {
            font-size: 0.75rem;
            color: var(--text-muted);
            font-style: italic;
            padding: 6px 10px;
            background: rgba(0,0,0,0.2);
            border-radius: 4px;
            margin-bottom: 8px;
        }

        .quick-sets {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
            padding: 10px;
            background: rgba(201, 162, 39, 0.1);
            border: 1px solid var(--gold-dark);
            border-radius: 6px;
            margin-bottom: 12px;
        }

        .quick-sets-label {
            font-family: 'Cinzel', serif;
            font-size: 0.8rem;
            color: var(--gold);
            margin-right: 6px;
        }

        .quick-set-btn {
            padding: 6px 12px;
            background: linear-gradient(135deg, var(--accent-purple) 0%, #6d28d9 100%);
            border: 1px solid #8b5cf6;
            border-radius: 4px;
            color: white;
            font-family: 'Cinzel', serif;
            font-size: 0.75rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .quick-set-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 3px 10px rgba(139, 92, 246, 0.4);
        }

        /* Dungeon Quest Tab Styles */
        .dungeon-controls {
            margin-bottom: 20px;
        }

        .dungeon-search {
            width: 100%;
            padding: 12px 16px;
            background: var(--bg-item);
            border: 1px solid var(--border-dark);
            border-radius: 6px;
            color: var(--text-primary);
            font-size: 1rem;
            font-family: inherit;
            margin-bottom: 15px;
        }

        .dungeon-search:focus {
            outline: none;
            border-color: var(--gold-dark);
            box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.1);
        }

        .dungeon-filter-tabs {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .dungeon-filter-btn {
            padding: 8px 16px;
            background: var(--bg-item);
            border: 1px solid var(--border-dark);
            border-radius: 20px;
            color: var(--text-secondary);
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
            font-family: inherit;
        }

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

        .dungeon-filter-btn.active {
            background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%);
            border-color: var(--gold);
            color: var(--bg-dark);
            font-weight: 600;
        }

        .dungeon-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 12px;
            max-height: 600px;
            overflow-y: auto;
            padding-right: 8px;
        }

        .dungeon-card {
            background: var(--bg-item);
            border: 1px solid var(--border-dark);
            border-radius: 8px;
            padding: 16px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .dungeon-card:hover {
            background: var(--bg-hover);
            border-color: var(--gold-dark);
            transform: translateY(-2px);
        }

        .dungeon-card.selected {
            border-color: var(--gold);
            background: rgba(201, 162, 39, 0.1);
        }

        .dungeon-card.has-quests {
            border-left: 3px solid var(--accent-green);
        }

        .dungeon-card.no-quests {
            border-left: 3px solid var(--text-muted);
        }

        .dungeon-card-name {
            font-family: 'Cinzel', serif;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--gold);
            margin-bottom: 6px;
        }

        .dungeon-card-location {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .dungeon-card-faction {
            font-size: 0.8rem;
            color: var(--accent-cyan);
            font-style: italic;
        }

        .dungeon-card-status {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 10px;
            font-size: 0.75rem;
            font-weight: 600;
            margin-top: 8px;
        }

        .dungeon-card-status.has-quests {
            background: rgba(45, 90, 61, 0.5);
            color: #4ade80;
        }

        .dungeon-card-status.no-quests {
            background: rgba(107, 114, 128, 0.3);
            color: var(--text-muted);
        }

        .dungeon-empty-state {
            text-align: center;
            padding: 60px 20px;
            color: var(--text-muted);
        }

        .dungeon-detail-section {
            margin-bottom: 20px;
        }

        #routeDetails {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .route-summary-section {
            flex-shrink: 0;
        }

        .route-directions-scrollable {
            overflow-y: auto;
            max-height: 400px;
            padding-right: 8px;
            margin-top: 10px;
        }

        .route-directions-scrollable::-webkit-scrollbar {
            width: 8px;
        }

        .route-directions-scrollable::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 4px;
        }

        .route-directions-scrollable::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 4px;
        }

        .route-directions-scrollable::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .dungeon-detail-title {
            font-family: 'Cinzel', serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--gold);
            margin-bottom: 8px;
        }

        .dungeon-detail-location {
            font-size: 1rem;
            color: var(--text-secondary);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .dungeon-detail-faction {
            background: linear-gradient(135deg, var(--accent-blue) 0%, #2a4f7f 100%);
            padding: 10px 14px;
            border-radius: 6px;
            font-size: 0.95rem;
            color: var(--text-primary);
            margin-bottom: 20px;
        }

        .dungeon-detail-faction span {
            color: var(--gold-light);
            font-weight: 600;
        }

        .dungeon-detail-chests {
            margin-top: 10px;
            font-size: 0.9rem;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .chest-badge {
            padding: 3px 10px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 600;
            color: #000;
        }
        .chest-neithal { background: #60a5fa; }
        .chest-selentine { background: #a78bfa; }
        .chest-veilron { background: #f59e0b; }
        .chest-leenspar { background: #34d399; }

        .quest-box {
            background: var(--bg-item);
            border: 1px solid var(--border-dark);
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 12px;
        }

        .quest-box.daily {
            border-color: var(--accent-purple);
            background: rgba(76, 29, 149, 0.15);
        }

        .quest-box-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .quest-box-title {
            font-family: 'Cinzel', serif;
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .quest-box-title.daily {
            color: #a78bfa;
        }

        .quest-badge {
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .quest-badge.onetime {
            background: rgba(45, 90, 61, 0.5);
            color: #4ade80;
        }

        .quest-badge.daily {
            background: rgba(139, 92, 246, 0.3);
            color: #a78bfa;
        }

        .quest-objective {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 4px;
            margin-bottom: 10px;
        }

        .quest-objective-icon {
            font-size: 1.2rem;
        }

        .quest-objective-text {
            font-size: 0.95rem;
            color: var(--text-primary);
        }

        .quest-rewards {
            border-top: 1px solid var(--border-dark);
            padding-top: 10px;
        }

        .quest-rewards-title {
            font-size: 0.8rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .quest-reward-item {
            display: inline-block;
            padding: 4px 10px;
            background: rgba(201, 162, 39, 0.15);
            border: 1px solid var(--gold-dark);
            border-radius: 4px;
            font-size: 0.85rem;
            color: var(--gold-light);
            margin-right: 6px;
            margin-bottom: 6px;
        }

        .no-quests-message {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-muted);
        }

        .no-quests-message .icon {
            font-size: 3rem;
            margin-bottom: 15px;
            opacity: 0.5;
        }

        /* Dungeon Map View Styles */
        .dungeon-view-toggle {
            display: flex;
            gap: 10px;
            padding: 15px 20px;
            background: var(--bg-panel);
            border-bottom: 1px solid var(--border);
        }

        .view-toggle-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            background: var(--bg-item);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text-secondary);
            font-family: 'Cinzel', serif;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

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

        .view-toggle-btn.active {
            background: var(--gold-dark);
            border-color: var(--gold);
            color: var(--gold-light);
        }

        /* Mob Map View (Mob Info tab) */
        .mob-map-view {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .mob-map-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 10px;
        }

        .mob-map-title {
            font-family: 'Cinzel', serif;
            font-size: 13px;
            color: var(--gold);
            text-transform: uppercase;
            letter-spacing: 1px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mob-map-status {
            padding: 10px 12px;
            margin-bottom: 10px;
            background: rgba(201, 162, 39, 0.08);
            border: 1px solid var(--gold-dark);
            border-radius: 8px;
            color: var(--text-secondary);
            font-size: 13px;
        }

        .mob-map-container {
            position: relative;
            flex: 1;
            min-height: 600px;
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
            background: var(--bg-panel);
        }

        /* Old .mob-spawn-marker styles removed - now using tier-based styles below */

        .mob-map-btn {
            width: 100%;
            margin-top: 10px;
            padding: 10px 12px;
            background: var(--gold-dark);
            border: 1px solid var(--gold);
            border-radius: 6px;
            color: var(--gold-light);
            font-family: 'Cinzel', serif;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .mob-map-btn:hover {
            background: var(--gold);
            color: var(--bg-dark);
        }

        .dungeon-view {
            height: calc(100vh - 250px);
            min-height: 500px;
        }

        #dungeonMapView {
            height: 100%;
        }

        /* Map container - removed duplicate, using new one above */

        .agon-map {
            width: 100%;
            height: 100%;
            min-height: 500px;
            background: #0a0f0a;
        }

        /* Leaflet container styling */
        .leaflet-container {
            background: #0a0f0a !important;
            font-family: 'Crimson Text', serif;
        }

        .map-legend {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(18, 21, 28, 0.95);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 12px 16px;
            z-index: 1000;
        }

        .legend-title {
            font-family: 'Cinzel', serif;
            font-size: 14px;
            color: var(--gold);
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 6px;
            cursor: pointer;
            padding: 4px 0;
        }
        .legend-item:hover {
            color: var(--text-primary);
        }

        .legend-radio {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 2px solid #4b5563;
            background: transparent;
            transition: all 0.2s ease;
        }
        .legend-radio.active {
            background: radial-gradient(circle, #4ade80, #22c55e);
            border-color: #86efac;
            box-shadow: 0 0 6px #4ade80;
        }

        .legend-checkbox {
            width: 14px;
            height: 14px;
            border-radius: 3px;
            border: 2px solid #4b5563;
            background: transparent;
            transition: all 0.2s ease;
        }
        .legend-checkbox.active {
            background: #4ade80;
            border-color: #86efac;
            box-shadow: 0 0 6px #4ade80;
        }

        .map-legend.chest-filter {
            left: auto;
            right: 20px;
            bottom: 20px;
        }

        .chest-label {
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 12px;
            font-weight: 600;
            color: #000;
        }
        .chest-label.chest-neithal { background: #60a5fa; }
        .chest-label.chest-selentine { background: #a78bfa; }
        .chest-label.chest-veilron { background: #f59e0b; }
        .chest-label.chest-leenspar { background: #34d399; }

        .legend-marker {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid;
        }

        .legend-marker.has-quests {
            background: radial-gradient(circle, #4ade80, #22c55e);
            border-color: #86efac;
            box-shadow: 0 0 6px #4ade80;
        }

        .legend-marker.no-quests {
            background: radial-gradient(circle, #6b7280, #4b5563);
            border-color: #9ca3af;
        }

        /* Dungeon markers */
        .dungeon-marker {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
            border: 2px solid;
        }

        .dungeon-marker.has-quests {
            background: radial-gradient(circle, #4ade80, #22c55e);
            border-color: #86efac;
            box-shadow: 0 0 8px #4ade80;
        }

        .dungeon-marker.no-quests {
            background: radial-gradient(circle, #6b7280, #4b5563);
            border-color: #9ca3af;
        }

        .dungeon-marker:hover {
            transform: scale(1.2);
        }

        .dungeon-marker.selected {
            box-shadow: 0 0 12px 4px var(--gold);
            border-color: var(--gold);
        }

        /* Leaflet popup styling */
        .leaflet-popup-content-wrapper {
            background: rgba(18, 21, 28, 0.98);
            border: 1px solid var(--gold-dark);
            border-radius: 8px;
            color: var(--text-primary);
        }

        .leaflet-popup-tip {
            background: rgba(18, 21, 28, 0.98);
            border: 1px solid var(--gold-dark);
        }

        .leaflet-popup-content {
            margin: 12px;
            font-family: 'Crimson Text', serif;
        }

        /* Leaflet tooltip styling */
        .leaflet-tooltip {
            background: rgba(18, 21, 28, 0.95);
            border: 1px solid var(--gold-dark);
            border-radius: 4px;
            color: var(--gold-light);
            font-family: 'Cinzel', serif;
            font-size: 12px;
            padding: 4px 8px;
        }

        .leaflet-tooltip-top:before {
            border-top-color: var(--gold-dark);
        }

        .dungeon-popup-title {
            font-family: 'Cinzel', serif;
            font-size: 16px;
            color: var(--gold);
            margin-bottom: 8px;
        }

        .dungeon-popup-location {
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .dungeon-popup-status {
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 4px;
            display: inline-block;
            margin-bottom: 10px;
        }

        .dungeon-popup-status.has-quests {
            background: rgba(74, 222, 128, 0.2);
            color: #4ade80;
        }

        .dungeon-popup-status.no-quests {
            background: rgba(107, 114, 128, 0.2);
            color: #9ca3af;
        }

        .dungeon-popup-btn {
            width: 100%;
            padding: 8px;
            background: var(--gold-dark);
            border: 1px solid var(--gold);
            border-radius: 4px;
            color: var(--gold-light);
            font-family: 'Cinzel', serif;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .dungeon-popup-btn:hover {
            background: var(--gold);
            color: var(--bg-dark);
        }

        /* Leaflet controls */
        .leaflet-control-zoom a {
            background: rgba(18, 21, 28, 0.95) !important;
            color: var(--gold) !important;
            border-color: var(--border) !important;
        }

        .leaflet-control-zoom a:hover {
            background: var(--gold-dark) !important;
            color: var(--gold-light) !important;
        }

        .agon-map {
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(rgba(30, 50, 35, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(30, 50, 35, 0.1) 1px, transparent 1px),
                linear-gradient(135deg, #1a2a1a 0%, #0d1512 50%, #0a1015 100%);
            background-size: 50px 50px, 50px 50px, 100% 100%;
        }

        /* Leaflet container styling */
        .leaflet-container {
            background: 
                linear-gradient(rgba(30, 50, 35, 0.08) 1px, transparent 1px),
                linear-gradient(90deg, rgba(30, 50, 35, 0.08) 1px, transparent 1px),
                linear-gradient(135deg, #1a2a1a 0%, #0d1512 50%, #0a1015 100%) !important;
            background-size: 50px 50px, 50px 50px, 100% 100% !important;
            font-family: 'Crimson Text', serif;
        }

        .map-legend {
            padding: 12px 16px;
            background: var(--bg-item);
            border-top: 1px solid var(--border);
        }

        .legend-note {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 4px;
        }

        .legend-title {
            font-family: 'Cinzel', serif;
            font-size: 13px;
            color: var(--gold);
            margin-bottom: 8px;
            font-weight: 600;
        }

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

        .legend-marker {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid;
        }

        .legend-marker.has-quests {
            background: rgba(45, 90, 61, 0.8);
            border-color: #4ade80;
        }

        .legend-marker.no-quests {
            background: rgba(107, 114, 128, 0.8);
            border-color: #9ca3af;
        }

        #mapDungeonDetails {
            /* Now inside panel-body, no need for custom sizing */
        }

        /* Leaflet custom popup styling */
        .leaflet-popup-content-wrapper {
            background: var(--bg-panel) !important;
            border: 1px solid var(--gold-dark) !important;
            border-radius: 8px !important;
            color: var(--text-primary) !important;
            box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
        }

        .leaflet-popup-tip {
            background: var(--bg-panel) !important;
            border: 1px solid var(--gold-dark) !important;
            box-shadow: none !important;
        }

        .leaflet-popup-content {
            margin: 12px 14px !important;
            font-family: 'Crimson Text', serif !important;
        }

        /* Tooltip styling */
        .leaflet-tooltip {
            background: var(--bg-panel) !important;
            border: 1px solid var(--gold-dark) !important;
            border-radius: 4px !important;
            color: var(--gold) !important;
            font-family: 'Cinzel', serif !important;
            font-size: 12px !important;
            padding: 4px 8px !important;
            box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
        }

        .leaflet-tooltip-top:before {
            border-top-color: var(--gold-dark) !important;
        }

        .dungeon-popup-title {
            font-family: 'Cinzel', serif;
            font-size: 16px;
            font-weight: 600;
            color: var(--gold);
            margin-bottom: 6px;
        }

        .dungeon-popup-location {
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .dungeon-popup-status {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
        }

        .dungeon-popup-status.has-quests {
            background: rgba(45, 90, 61, 0.5);
            color: #4ade80;
        }

        .dungeon-popup-status.no-quests {
            background: rgba(107, 114, 128, 0.3);
            color: #9ca3af;
        }

        .dungeon-popup-btn {
            display: block;
            width: 100%;
            margin-top: 10px;
            padding: 8px 12px;
            background: var(--gold-dark);
            border: none;
            border-radius: 4px;
            color: var(--gold-light);
            font-family: 'Cinzel', serif;
            font-size: 12px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .dungeon-popup-btn:hover {
            background: var(--gold);
            color: var(--bg-dark);
        }

        /* Custom marker styles */
        .dungeon-marker {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 3px solid;
            font-size: 16px;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            background: rgba(26, 31, 42, 0.95);
        }

        .dungeon-marker:hover {
            transform: scale(1.3);
            z-index: 1000 !important;
        }

        .dungeon-marker.has-quests {
            background: rgba(45, 90, 61, 0.95);
            border-color: #4ade80;
            box-shadow: 0 0 12px rgba(74, 222, 128, 0.6), 0 2px 8px rgba(0,0,0,0.5);
        }

        .dungeon-marker.no-quests {
            background: rgba(75, 85, 99, 0.95);
            border-color: #9ca3af;
            box-shadow: 0 2px 8px rgba(0,0,0,0.5);
        }

        .dungeon-marker.selected {
            transform: scale(1.4);
            box-shadow: 0 0 20px rgba(201, 162, 39, 0.8), 0 0 40px rgba(201, 162, 39, 0.4);
            border-color: var(--gold);
        }

        /* Remove default Leaflet tile filter */
        .leaflet-tile-pane {
            filter: none;
        }

        .leaflet-control-zoom a {
            background: var(--bg-panel) !important;
            color: var(--text-primary) !important;
            border-color: var(--border) !important;
        }

        .leaflet-control-zoom a:hover {
            background: var(--bg-hover) !important;
        }

        #dungeonListView .main-layout {
            height: 100%;
        }
    

        /* Dungeon Map - fills panel */
        .dungeon-map-container {
            position: relative;
            background: var(--bg-panel);
            height: 100%;
            overflow: hidden;
        }

        /* Filter panel below map */
        .dungeon-filter-panel {
            flex: 0 0 auto;
            height: 240px;
        }

        .dungeon-filter-panel .panel-body {
            padding: 10;
            height: 140px;  /* ← ADJUST FOOTER PANEL HEIGHT HERE */
        }

        .dungeon-filters-footer {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            padding: 12px 16px;
        }

        .dungeon-filters-footer .map-filter-section {
            background: rgba(18, 21, 28, 0.95);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 12px 16px;
            min-width: 140px;
        }

        /* Shared filter styling */
        .map-filter-section .legend-title {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 10px;
            letter-spacing: 0.3px;
        }

        .map-filter-section .legend-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 0;
            cursor: pointer;
            user-select: none;
            font-size: 13px;
            color: var(--text-primary);
            transition: opacity 0.2s;
        }

        .map-filter-section .legend-item:hover {
            opacity: 0.8;
        }

        /* Dungeon Mob List */
        .dungeon-mob-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
            margin-bottom: 6px;
            background: var(--bg-hover);
            border-radius: 6px;
            border-left: 3px solid var(--gold-dark);
        }

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

        .dungeon-mob-difficulty {
            font-size: 11px;
            padding: 3px 8px;
            border-radius: 4px;
            font-weight: 600;
            color: #000;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 0 8px currentColor, 0 0 12px currentColor;
            animation: difficultyPulse 2s ease-in-out infinite;
            position: relative;
        }

        @keyframes difficultyPulse {
            0%, 100% {
                box-shadow: 0 0 8px currentColor, 0 0 12px currentColor;
                transform: scale(1);
            }
            50% {
                box-shadow: 0 0 12px currentColor, 0 0 20px currentColor, 0 0 25px currentColor;
                transform: scale(1.05);
            }
        }

        /* Difficulty-specific glow colors */
        .dungeon-mob-item[data-difficulty="Very Easy"] .dungeon-mob-difficulty,
        .dungeon-mob-item[data-difficulty="Easy"] .dungeon-mob-difficulty {
            color: #000;
            filter: drop-shadow(0 0 4px #4ade80);
        }

        .dungeon-mob-item[data-difficulty="Medium"] .dungeon-mob-difficulty {
            color: #000;
            filter: drop-shadow(0 0 4px #fbbf24);
        }

        .dungeon-mob-item[data-difficulty="Hard"] .dungeon-mob-difficulty {
            color: #000;
            filter: drop-shadow(0 0 4px #fb923c);
        }

        .dungeon-mob-item[data-difficulty="Very Hard"] .dungeon-mob-difficulty {
            color: #fff;
            filter: drop-shadow(0 0 6px #f87171) drop-shadow(0 0 10px #ef4444);
        }

        /* Enhanced difficulty-based card styling */
        .dungeon-mob-item[data-difficulty="Very Easy"],
        .dungeon-mob-item[data-difficulty="Easy"] {
            border-left-color: #4ade80;
            background: linear-gradient(to right, rgba(74, 222, 128, 0.1), var(--bg-hover));
        }

        .dungeon-mob-item[data-difficulty="Medium"] {
            border-left-color: #fbbf24;
            background: linear-gradient(to right, rgba(251, 191, 36, 0.1), var(--bg-hover));
        }

        .dungeon-mob-item[data-difficulty="Hard"] {
            border-left-color: #fb923c;
            background: linear-gradient(to right, rgba(251, 146, 60, 0.15), var(--bg-hover));
        }

        .dungeon-mob-item[data-difficulty="Very Hard"] {
            border-left-color: #f87171;
            background: linear-gradient(to right, rgba(248, 113, 113, 0.2), var(--bg-hover));
            border-left-width: 4px;
            box-shadow: 0 0 10px rgba(248, 113, 113, 0.3);
        }

        .dungeon-mob-item[data-difficulty="Unknown"] {
            border-left-color: #9ca3af;
        }


        /* Image-based mob markers */
        .mob-spawn-marker img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: drop-shadow(0 0 8px currentColor);
        }

        .mob-spawn-marker.tier-boss img {
            filter: drop-shadow(0 0 15px #fbbf24) drop-shadow(0 0 25px #f59e0b);
        }

        .mob-spawn-marker.tier-very-easy img {
            filter: drop-shadow(0 0 10px #4ade80);
        }

        .mob-spawn-marker.tier-easy img {
            filter: drop-shadow(0 0 10px #86efac);
        }

        .mob-spawn-marker.tier-medium img {
            filter: drop-shadow(0 0 10px #fbbf24);
        }

        .mob-spawn-marker.tier-hard img {
            filter: drop-shadow(0 0 10px #fb923c);
        }

        .mob-spawn-marker.tier-very-hard img {
            filter: drop-shadow(0 0 12px #f87171);
        }

        /* ============================================
           BOSS MOB SPECIAL STYLING
           ============================================ */
        
        /* Boss card - premium look */
        .dungeon-mob-item.is-boss {
            border-left-width: 5px;
            border-left-color: #fbbf24;
            border-right: 2px solid #f59e0b;
            background: linear-gradient(
                to right, 
                rgba(251, 191, 36, 0.25), 
                rgba(245, 158, 11, 0.15),
                var(--bg-hover)
            );
            box-shadow: 
                0 0 15px rgba(251, 191, 36, 0.4),
                0 0 25px rgba(251, 191, 36, 0.2),
                inset 0 1px 0 rgba(251, 191, 36, 0.3);
            animation: bossCardPulse 3s ease-in-out infinite;
            position: relative;
            overflow: hidden;
        }

        /* Boss card pulsing animation */
        @keyframes bossCardPulse {
            0%, 100% {
                box-shadow: 
                    0 0 15px rgba(251, 191, 36, 0.4),
                    0 0 25px rgba(251, 191, 36, 0.2),
                    inset 0 1px 0 rgba(251, 191, 36, 0.3);
            }
            50% {
                box-shadow: 
                    0 0 25px rgba(251, 191, 36, 0.6),
                    0 0 40px rgba(251, 191, 36, 0.3),
                    0 0 60px rgba(251, 191, 36, 0.15),
                    inset 0 1px 0 rgba(251, 191, 36, 0.5);
                transform: translateY(-1px);
            }
        }

        /* Boss name styling */
        .dungeon-mob-item.is-boss .dungeon-mob-name {
            font-size: 15px;
            font-weight: 700;
            color: #fbbf24;
            text-shadow: 
                0 0 10px rgba(251, 191, 36, 0.8),
                0 0 20px rgba(251, 191, 36, 0.4),
                1px 1px 2px rgba(0, 0, 0, 0.8);
            letter-spacing: 0.5px;
        }

        /* Boss difficulty badge - ultra prominent */
        .dungeon-mob-item.is-boss .dungeon-mob-difficulty {
            background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706) !important;
            color: #000;
            font-weight: 800;
            font-size: 12px;
            padding: 4px 12px;
            box-shadow: 
                0 0 15px #fbbf24,
                0 0 25px #f59e0b,
                0 0 35px rgba(251, 191, 36, 0.5);
            animation: bossBadgePulse 2s ease-in-out infinite;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            border: 1px solid #f59e0b;
        }

        /* Boss badge intense pulsing */
        @keyframes bossBadgePulse {
            0%, 100% {
                box-shadow: 
                    0 0 15px #fbbf24,
                    0 0 25px #f59e0b,
                    0 0 35px rgba(251, 191, 36, 0.5);
                transform: scale(1);
            }
            50% {
                box-shadow: 
                    0 0 25px #fbbf24,
                    0 0 40px #f59e0b,
                    0 0 60px rgba(251, 191, 36, 0.7),
                    0 0 80px rgba(251, 191, 36, 0.3);
                transform: scale(1.08);
            }
        }

        /* Boss card shine effect */
        .dungeon-mob-item.is-boss::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(251, 191, 36, 0.3),
                transparent
            );
            animation: bossShine 4s ease-in-out infinite;
        }

        @keyframes bossShine {
            0% {
                left: -100%;
            }
            50%, 100% {
                left: 200%;
            }
        }

        /* Override difficulty pulse for boss badge */
        .dungeon-mob-item[data-difficulty="Boss"] .dungeon-mob-difficulty {
            animation: bossBadgePulse 2s ease-in-out infinite !important;
        }


        /* Image-based mob markers */
        .mob-spawn-marker img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: drop-shadow(0 0 8px currentColor);
        }

        .mob-spawn-marker.tier-boss img {
            filter: drop-shadow(0 0 15px #fbbf24) drop-shadow(0 0 25px #f59e0b);
        }

        .mob-spawn-marker.tier-very-easy img {
            filter: drop-shadow(0 0 10px #4ade80);
        }

        .mob-spawn-marker.tier-easy img {
            filter: drop-shadow(0 0 10px #86efac);
        }

        .mob-spawn-marker.tier-medium img {
            filter: drop-shadow(0 0 10px #fbbf24);
        }

        .mob-spawn-marker.tier-hard img {
            filter: drop-shadow(0 0 10px #fb923c);
        }

        .mob-spawn-marker.tier-very-hard img {
            filter: drop-shadow(0 0 12px #f87171);
        }

        /* ============================================
           BOSS MAP MARKERS - Glowing & Pulsing
           ============================================ */
        
        .mob-spawn-marker.boss-marker {
            width: 36px !important;
            height: 36px !important;
            background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
            border: 3px solid #f59e0b;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            cursor: pointer;
            box-shadow: 
                0 0 20px rgba(251, 191, 36, 0.8),
                0 0 40px rgba(251, 191, 36, 0.5),
                0 0 60px rgba(251, 191, 36, 0.3),
                inset 0 0 15px rgba(255, 255, 255, 0.3);
            animation: bossMarkerPulse 2s ease-in-out infinite;
            position: relative;
            z-index: 1000 !important;
        }

        /* Intense pulsing for boss markers on map */
        @keyframes bossMarkerPulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 
                    0 0 20px rgba(251, 191, 36, 0.8),
                    0 0 40px rgba(251, 191, 36, 0.5),
                    0 0 60px rgba(251, 191, 36, 0.3),
                    inset 0 0 15px rgba(255, 255, 255, 0.3);
            }
            50% {
                transform: scale(1.15);
                box-shadow: 
                    0 0 30px rgba(251, 191, 36, 1),
                    0 0 60px rgba(251, 191, 36, 0.8),
                    0 0 90px rgba(251, 191, 36, 0.6),
                    0 0 120px rgba(251, 191, 36, 0.3),
                    inset 0 0 20px rgba(255, 255, 255, 0.5);
            }
        }

        /* Rotating ring around boss marker */
        .mob-spawn-marker.boss-marker::before {
            content: '';
            position: absolute;
            top: -8px;
            left: -8px;
            right: -8px;
            bottom: -8px;
            border: 2px solid transparent;
            border-top-color: #fbbf24;
            border-right-color: #fbbf24;
            border-radius: 50%;
            animation: bossMarkerRotate 3s linear infinite;
            opacity: 0.7;
        }

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

        /* Pulsing outer ring */
        .mob-spawn-marker.boss-marker::after {
            content: '';
            position: absolute;
            top: -12px;
            left: -12px;
            right: -12px;
            bottom: -12px;
            border: 3px solid #fbbf24;
            border-radius: 50%;
            animation: bossMarkerRingPulse 2s ease-in-out infinite;
            opacity: 0.5;
        }

        @keyframes bossMarkerRingPulse {
            0%, 100% {
                transform: scale(0.8);
                opacity: 0;
            }
            50% {
                transform: scale(1);
                opacity: 0.7;
            }
        }



        /* Image-based mob markers */
        .mob-spawn-marker img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: drop-shadow(0 0 8px currentColor);
        }

        .mob-spawn-marker.tier-boss img {
            filter: drop-shadow(0 0 15px #fbbf24) drop-shadow(0 0 25px #f59e0b);
        }

        .mob-spawn-marker.tier-very-easy img {
            filter: drop-shadow(0 0 10px #4ade80);
        }

        .mob-spawn-marker.tier-easy img {
            filter: drop-shadow(0 0 10px #86efac);
        }

        .mob-spawn-marker.tier-medium img {
            filter: drop-shadow(0 0 10px #fbbf24);
        }

        .mob-spawn-marker.tier-hard img {
            filter: drop-shadow(0 0 10px #fb923c);
        }

        .mob-spawn-marker.tier-very-hard img {
            filter: drop-shadow(0 0 12px #f87171);
        }

        /* ============================================
           TIER-BASED MOB MARKERS - All Tiers Glow & Pulse
           ============================================ */

        /* Base mob marker - slightly larger, ready for effects */
        .mob-spawn-marker {
            width: 32px !important;
            height: 32px !important;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            cursor: pointer;
            border: 3px solid;
            position: relative;
            transition: transform 0.2s;
        }

        /* Tier 1-2: Very Easy (Green) */
        .mob-spawn-marker.tier-very-easy {
            background: radial-gradient(circle, #4ade80, #22c55e);
            border-color: #86efac;
            box-shadow: 
                0 0 15px rgba(74, 222, 128, 0.8),
                0 0 30px rgba(74, 222, 128, 0.4);
            animation: tierPulseGreen 2.5s ease-in-out infinite;
        }

        @keyframes tierPulseGreen {
            0%, 100% {
                box-shadow: 
                    0 0 15px rgba(74, 222, 128, 0.8),
                    0 0 30px rgba(74, 222, 128, 0.4);
                transform: scale(1);
            }
            50% {
                box-shadow: 
                    0 0 25px rgba(74, 222, 128, 1),
                    0 0 50px rgba(74, 222, 128, 0.6),
                    0 0 75px rgba(74, 222, 128, 0.3);
                transform: scale(1.1);
            }
        }

        /* Tier 3-4: Easy (Light Green) */
        .mob-spawn-marker.tier-easy {
            background: radial-gradient(circle, #86efac, #4ade80);
            border-color: #bbf7d0;
            box-shadow: 
                0 0 15px rgba(134, 239, 172, 0.8),
                0 0 30px rgba(134, 239, 172, 0.4);
            animation: tierPulseLightGreen 2.5s ease-in-out infinite;
        }

        @keyframes tierPulseLightGreen {
            0%, 100% {
                box-shadow: 
                    0 0 15px rgba(134, 239, 172, 0.8),
                    0 0 30px rgba(134, 239, 172, 0.4);
                transform: scale(1);
            }
            50% {
                box-shadow: 
                    0 0 25px rgba(134, 239, 172, 1),
                    0 0 50px rgba(134, 239, 172, 0.6),
                    0 0 75px rgba(134, 239, 172, 0.3);
                transform: scale(1.1);
            }
        }

        /* Tier 5-6: Medium (Yellow) */
        .mob-spawn-marker.tier-medium {
            background: radial-gradient(circle, #fbbf24, #f59e0b);
            border-color: #fcd34d;
            box-shadow: 
                0 0 15px rgba(251, 191, 36, 0.8),
                0 0 30px rgba(251, 191, 36, 0.4);
            animation: tierPulseYellow 2.5s ease-in-out infinite;
        }

        @keyframes tierPulseYellow {
            0%, 100% {
                box-shadow: 
                    0 0 15px rgba(251, 191, 36, 0.8),
                    0 0 30px rgba(251, 191, 36, 0.4);
                transform: scale(1);
            }
            50% {
                box-shadow: 
                    0 0 25px rgba(251, 191, 36, 1),
                    0 0 50px rgba(251, 191, 36, 0.6),
                    0 0 75px rgba(251, 191, 36, 0.3);
                transform: scale(1.1);
            }
        }

        /* Tier 7-8: Hard (Orange) */
        .mob-spawn-marker.tier-hard {
            background: radial-gradient(circle, #fb923c, #f97316);
            border-color: #fdba74;
            box-shadow: 
                0 0 15px rgba(251, 146, 60, 0.8),
                0 0 30px rgba(251, 146, 60, 0.4);
            animation: tierPulseOrange 2.5s ease-in-out infinite;
        }

        @keyframes tierPulseOrange {
            0%, 100% {
                box-shadow: 
                    0 0 15px rgba(251, 146, 60, 0.8),
                    0 0 30px rgba(251, 146, 60, 0.4);
                transform: scale(1);
            }
            50% {
                box-shadow: 
                    0 0 25px rgba(251, 146, 60, 1),
                    0 0 50px rgba(251, 146, 60, 0.6),
                    0 0 75px rgba(251, 146, 60, 0.3);
                transform: scale(1.1);
            }
        }

        /* Tier 9-10: Very Hard (Red) */
        .mob-spawn-marker.tier-very-hard {
            background: radial-gradient(circle, #f87171, #ef4444);
            border-color: #fca5a5;
            box-shadow: 
                0 0 20px rgba(248, 113, 113, 0.9),
                0 0 40px rgba(248, 113, 113, 0.5);
            animation: tierPulseRed 2s ease-in-out infinite;
        }

        @keyframes tierPulseRed {
            0%, 100% {
                box-shadow: 
                    0 0 20px rgba(248, 113, 113, 0.9),
                    0 0 40px rgba(248, 113, 113, 0.5);
                transform: scale(1);
            }
            50% {
                box-shadow: 
                    0 0 30px rgba(248, 113, 113, 1),
                    0 0 60px rgba(248, 113, 113, 0.7),
                    0 0 90px rgba(248, 113, 113, 0.4);
                transform: scale(1.12);
            }
        }

        /* Add rotating ring to all tier markers */
        .mob-spawn-marker.tier-very-easy::before,
        .mob-spawn-marker.tier-easy::before,
        .mob-spawn-marker.tier-medium::before,
        .mob-spawn-marker.tier-hard::before,
        .mob-spawn-marker.tier-very-hard::before {
            content: '';
            position: absolute;
            top: -6px;
            left: -6px;
            right: -6px;
            bottom: -6px;
            border: 2px solid currentColor;
            border-top-color: transparent;
            border-left-color: transparent;
            border-radius: 50%;
            animation: markerRingRotate 4s linear infinite;
            opacity: 0.6;
        }

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

        
                /* Make boss markers appear on top of regular markers */
        .leaflet-marker-pane .leaflet-marker-icon:has(.boss-marker) {
            z-index: 1000 !important;
        }

        /* Dungeon map view with controlled height */
        #dungeonMapView .main-layout {
            height: auto;
        }

        #dungeonMapView .panel {
            display: flex;
            flex-direction: column;
        }

        #dungeonMapView .panel-body {
            height: 650px;
            min-height: 650px;
        }

        .dungeon-map-container {
            height: 100%;
        }

        .agon-map {
            width: 100%;
            height: 100%;
        }

/* =============================================== */
/* SCREENSHOT EXTRACTOR MODAL */
/* =============================================== */

.extractor-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

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

.extractor-modal-content {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

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

.extractor-header h3 {
    margin: 0;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 20px;
}

.extractor-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 32px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.extractor-close:hover {
    color: var(--gold);
}

.extractor-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.extractor-instructions {
    background: var(--bg-item);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 20px;
}

.extractor-instructions p {
    margin: 0 0 12px 0;
    color: var(--gold);
    font-weight: 500;
}

.extractor-instructions ol {
    margin: 0;
    padding-left: 20px;
    color: var(--text-secondary);
}

.extractor-instructions ol li {
    margin-bottom: 8px;
}

.extractor-instructions kbd {
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 2px 6px;
    font-family: monospace;
    font-size: 0.9em;
}

.extractor-paste-area {
    border: 2px dashed var(--border);
    border-radius: 8px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.3s;
    outline: none;
    padding: 20px;
}

.extractor-paste-area:hover {
    border-color: var(--gold);
}

.extractor-paste-area:focus {
    border-color: var(--gold);
    border-style: solid;
}

.paste-placeholder {
    text-align: center;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.extractor-status {
    margin-top: 16px;
    padding: 12px;
    border-radius: 6px;
    display: none;
}

.extractor-status-loading {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.extractor-status-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.extractor-status-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.extracted-data-section {
    margin-top: 24px;
    border-top: 1px solid var(--border);
    padding-top: 24px;
}

.extracted-data-section h4 {
    margin: 0 0 16px 0;
    color: var(--gold);
    font-family: 'Cinzel', serif;
}

.extracted-loot-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.extracted-loot-item {
    display: flex;
    gap: 8px;
    align-items: center;
    background: var(--bg-item);
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.loot-item-name {
    flex: 1;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
}

.loot-item-name:focus {
    outline: none;
    border-color: var(--gold);
}

.loot-item-rarity {
    background: var(--bg-dark);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
}

.loot-item-rarity:focus {
    outline: none;
    border-color: var(--gold);
}

.btn-remove {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.2s;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-remove:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.6);
}

.extractor-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-secondary {
    background: var(--bg-item);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: var(--bg-dark);
    border-color: var(--gold);
    color: var(--gold);
}

.btn-primary {
    background: linear-gradient(135deg, var(--gold), #d4af37);
    border: none;
    color: #000;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(201, 162, 39, 0.3);
}

.extractor-footer {
    padding: 12px 24px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.mob-update-btn {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: none;
    color: white;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    margin-left: 12px;
}

.mob-update-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* Validation Warning/Success */
.validation-warning {
    background: rgba(239, 68, 68, 0.1);
    border: 2px solid rgba(239, 68, 68, 0.5);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.validation-warning .warning-icon {
    font-size: 48px;
    flex-shrink: 0;
}

.validation-warning .warning-content h4 {
    margin: 0 0 12px 0;
    color: #f87171;
    font-size: 18px;
}

.validation-warning .warning-content p {
    margin: 8px 0;
    color: var(--text);
}

.validation-warning .warning-content ul {
    margin: 8px 0;
    padding-left: 20px;
    color: var(--text);
}

.validation-warning .warning-content li {
    margin: 4px 0;
}

.validation-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.validation-success strong {
    color: #4ade80;
}

/* Loot Type Badge */
.loot-type-badge {
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #4ade80;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* Rare Loot Reporter */
.mob-report-btn {
    background: linear-gradient(135deg, #a855f7, #9333ea);
    border: none;
    color: white;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.mob-report-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
}

.rare-loot-info {
    background: var(--bg-item);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 20px;
}

.rare-loot-info p {
    margin: 0;
    color: var(--text);
}

.reporter-mob-name {
    color: var(--gold);
    font-weight: 600;
}

.rare-loot-form .form-row {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.rare-loot-form .form-row input[type="text"] {
    flex: 1;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
}

.rare-loot-form .form-row input[type="text"]:focus {
    outline: none;
    border-color: var(--gold);
}

.rare-loot-form .form-row select {
    background: var(--bg-dark);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    min-width: 130px;
}

.rare-loot-form .form-row select:focus {
    outline: none;
    border-color: var(--gold);
}

.rare-loot-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 120px;
    max-height: 300px;
    overflow-y: auto;
    background: var(--bg-item);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px;
}

.rare-loot-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-dark);
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.rare-loot-name {
    flex: 1;
    color: var(--text);
    font-size: 14px;
}

.rare-loot-rarity {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #000;
}

.form-group {
    margin-bottom: 12px;
}

.form-group label {
    display: block;
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 6px;
}

.form-group input[type="text"] {
    width: 100%;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

.form-group input[type="text"]:focus {
    outline: none;
    border-color: var(--gold);
}

/* Travel Planner Styles */
.portal-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 18px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    background: rgba(59, 130, 246, 0.3);
    border: 2px solid #3b82f6;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5), 0 2px 8px rgba(0,0,0,0.5);
}

.portal-marker:hover {
    transform: scale(1.3);
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.8), 0 2px 12px rgba(0,0,0,0.7);
}

.portal-marker.entrance {
    background: rgba(59, 130, 246, 0.4);
    border-color: #3b82f6;
    animation: pulsePortal 2s ease-in-out infinite;
}

.portal-marker.exit {
    background: rgba(139, 92, 246, 0.4);
    border-color: #8b5cf6;
}

@keyframes pulsePortal {
    0%, 100% {
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.5), 0 2px 8px rgba(0,0,0,0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 2px 12px rgba(0,0,0,0.7);
    }
}

.city-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.city-marker.capital {
    width: 26px;
    height: 26px;
    font-size: 20px;
    background: rgba(251, 191, 36, 0.3);
    border: 2px solid var(--gold);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.5), 0 2px 8px rgba(0,0,0,0.5);
}

.city-marker.clan-city {
    width: 24px;
    height: 24px;
    font-size: 18px;
    background: rgba(34, 197, 94, 0.3);
    border: 2px solid #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5), 0 2px 6px rgba(0,0,0,0.5);
}

.city-marker.hamlet {
    width: 20px;
    height: 20px;
    font-size: 16px;
    background: rgba(168, 85, 247, 0.3);
    border: 2px solid #a855f7;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.5), 0 2px 6px rgba(0,0,0,0.5);
}

.city-marker:hover {
    transform: scale(1.3);
}

.city-marker.capital:hover {
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.8), 0 2px 12px rgba(0,0,0,0.7);
}

.city-marker.clan-city:hover {
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.7), 0 2px 10px rgba(0,0,0,0.7);
}

.city-marker.hamlet:hover {
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.7), 0 2px 10px rgba(0,0,0,0.7);
}

.dungeon-travel-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 16px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    background: rgba(156, 163, 175, 0.3);
    border: 2px solid #9ca3af;
    box-shadow: 0 0 8px rgba(156, 163, 175, 0.4), 0 2px 6px rgba(0,0,0,0.5);
}

.dungeon-travel-marker:hover {
    transform: scale(1.3);
    box-shadow: 0 0 12px rgba(156, 163, 175, 0.6), 0 2px 10px rgba(0,0,0,0.7);
}

/* Route Location Markers */
.route-location-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 24px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 3px solid;
}

.route-location-marker.start {
    background: rgba(34, 197, 94, 0.4);
    border-color: #22c55e;
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.8), 0 2px 12px rgba(0,0,0,0.7);
    animation: pulseStart 2s ease-in-out infinite;
}

.route-location-marker.end {
    background: rgba(239, 68, 68, 0.4);
    border-color: #ef4444;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.8), 0 2px 12px rgba(0,0,0,0.7);
    animation: pulseEnd 2s ease-in-out infinite;
}

@keyframes pulseStart {
    0%, 100% {
        box-shadow: 0 0 16px rgba(34, 197, 94, 0.8), 0 2px 12px rgba(0,0,0,0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 24px rgba(34, 197, 94, 1), 0 2px 16px rgba(0,0,0,0.9);
        transform: scale(1.1);
    }
}

@keyframes pulseEnd {
    0%, 100% {
        box-shadow: 0 0 16px rgba(239, 68, 68, 0.8), 0 2px 12px rgba(0,0,0,0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 24px rgba(239, 68, 68, 1), 0 2px 16px rgba(0,0,0,0.9);
        transform: scale(1.1);
    }
}

.portal-marker.active {
    border-width: 3px;
    box-shadow: 0 0 20px rgba(59, 130, 246, 1), 0 2px 16px rgba(0,0,0,0.9);
    animation: pulsePortalActive 2s ease-in-out infinite;
}

@keyframes pulsePortalActive {
    0%, 100% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 1), 0 2px 16px rgba(0,0,0,0.9);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 28px rgba(59, 130, 246, 1), 0 2px 20px rgba(0,0,0,1);
        transform: scale(1.15);
    }
}

/* Animated Portal Lines */
.animated-portal-line {
    transition: stroke-dashoffset 0.1s linear;
}

.animated-portal-line path {
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: brightness(1.3);
}

/* Route Filter Radio Buttons */
.route-filter-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
    color: #999;
    user-select: none;
    transition: color 0.2s;
    white-space: nowrap;
}

.route-filter-radio:hover {
    color: #ccc;
}

.route-filter-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--gold);
}

.route-filter-radio input[type="radio"]:checked + span {
    color: var(--gold);
    font-weight: 600;
}