:root {
            --bg-color: #000000;
            --text-color: #ffffff;
            --header-bg: #111111;
            --card-bg: #1a1a1a;
            --card-border: #333333;
            --input-bg: #222222;
            --input-border: #444444;
            --accent-color: #ffffff;
            --secondary-text: #aaaaaa;
            --hover-color: #2a2a2a;
            --pagination-bg: #1a1a1a;
            --pagination-active: #333333;
            --table-row-odd: #1e1e1e;
            --table-row-even: #222222;
            --size-s: #4CAF50;
            --size-m: #2196F3;
            --size-l: #FF9800;
            --size-xl: #F44336;
        }

        [data-theme="light"] {
            --bg-color: #ffffff;
            --text-color: #000000;
            --header-bg: #f5f5f5;
            --card-bg: #f0f0f0;
            --card-border: #dddddd;
            --input-bg: #f8f8f8;
            --input-border: #cccccc;
            --accent-color: #000000;
            --secondary-text: #666666;
            --hover-color: #e5e5e5;
            --pagination-bg: #f0f0f0;
            --pagination-active: #dddddd;
            --table-row-odd: #f9f9f9;
            --table-row-even: #f0f0f0;
            --size-s: #81C784;
            --size-m: #64B5F6;
            --size-l: #FFB74D;
            --size-xl: #E57373;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        header {
            background-color: var(--header-bg);
            padding: 15px 0;
            border-bottom: 1px solid var(--card-border);
            margin-bottom: 20px;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            color: var(--accent-color);
            text-decoration: none;
        }

        .header-controls {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .view-toggle {
            display: flex;
            border: 1px solid var(--card-border);
            border-radius: 4px;
            overflow: hidden;
        }

        .view-btn {
            background: var(--card-bg);
            border: none;
            color: var(--text-color);
            padding: 5px 10px;
            cursor: pointer;
            font-size: 14px;
        }

        .view-btn.active {
            background: var(--hover-color);
        }

        .theme-toggle {
            background: transparent;
            border: 1px solid var(--text-color);
            color: var(--text-color);
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }

        .search-container {
            margin: 20px 0;
            position: relative;
        }

        .search-bar {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid var(--input-border);
            border-radius: 4px;
            background: var(--input-bg);
            color: var(--text-color);
            font-size: 16px;
        }

        .search-icon {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--secondary-text);
        }

        .filters {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .filter-dropdown {
            position: relative;
            min-width: 200px;
        }

        .filter-btn {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            color: var(--text-color);
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
            text-align: left;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .filter-dropdown-content {
            display: none;
            position: absolute;
            background-color: var(--card-bg);
            min-width: 200px;
            border: 1px solid var(--card-border);
            border-radius: 4px;
            z-index: 1;
            max-height: 300px;
            overflow-y: auto;
        }

        .filter-dropdown-content a {
            color: var(--text-color);
            padding: 10px 15px;
            text-decoration: none;
            display: block;
        }

        .filter-dropdown-content a:hover {
            background-color: var(--hover-color);
        }

        .filter-dropdown:hover .filter-dropdown-content {
            display: block;
        }

        /* Grid View */
        .map-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .map-card {
            background: var(--card-bg);
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid var(--card-border);
        }

        .map-image-container {
            position: relative;
            height: 240px;
            width: 100%;
            overflow: hidden;
        }

        .map-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: #333;
        }

        .map-players {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 12px;
        }

        .map-info {
            padding: 15px;
        }

        .map-title {
            font-weight: bold;
            margin-bottom: 5px;
            font-size: 16px;
            color: var(--accent-color);
        }

        .map-author {
            font-size: 13px;
            color: var(--secondary-text);
            margin-bottom: 10px;
        }

        .map-stats {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: var(--secondary-text);
        }

        .download-btn {
            background: var(--accent-color);
            color: var(--bg-color);
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
            margin-top: 10px;
            font-weight: bold;
        }

        .size-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
            color: white;
        }

        .size-s { background-color: var(--size-s); }
        .size-m { background-color: var(--size-m); }
        .size-l { background-color: var(--size-l); }
        .size-xl { background-color: var(--size-xl); }

        /* List View */
        .map-list {
            display: none;
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 30px;
        }

        .map-list th {
            background: var(--card-bg);
            padding: 8px 12px;
            text-align: left;
            border: 1px solid var(--card-border);
            position: relative;
            cursor: pointer;
            user-select: none;
        }

        .map-list th.sortable:hover {
            background-color: var(--hover-color);
        }

        .map-list th.sort-asc::after {
            content: " ↑";
            font-size: 12px;
        }

        .map-list th.sort-desc::after {
            content: " ↓";
            font-size: 12px;
        }

        .map-list td {
            padding: 8px 12px;
            border: 1px solid var(--card-border);
            vertical-align: middle;
        }

        .map-list tr:nth-child(odd) {
            background: var(--table-row-odd);
        }

        .map-list tr:nth-child(even) {
            background: var(--table-row-even);
        }

        .map-list tr:hover {
            background: var(--hover-color);
        }

        .list-image-container {
            width: 64px;
            height: 64px;
            overflow: hidden;
        }

        .list-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: #333;
        }

        .list-download-btn {
            background: var(--accent-color);
            color: var(--bg-color);
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }

        .rating-stars {
            color: gold;
            font-size: 14px;
        }

        .category-badge {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 4px;
            background: var(--hover-color);
            font-size: 12px;
        }

        .date-text {
            font-size: 13px;
            white-space: nowrap;
        }

        .pagination {
            display: flex;
            justify-content: center;
            gap: 5px;
            margin: 30px 0;
        }

        .pagination a, span {
            background: var(--pagination-bg);
            border: 1px solid var(--card-border);
            color: var(--text-color);
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
            min-width: 40px;
            text-align: center;
        }

        .pagination a.active {
            background: var(--pagination-active);
            font-weight: bold;
        }

        .pagination a:hover:not(.active) {
            background: var(--hover-color);
        }

        footer {
            text-align: center;
            padding: 30px 0;
            margin-top: 40px;
            border-top: 1px solid var(--card-border);
            font-size: 14px;
            color: var(--secondary-text);
        }

        @media (max-width: 768px) {
            .map-grid {
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            }
            
            .filters {
                flex-direction: column;
                gap: 10px;
            }
            
            .filter-dropdown {
                min-width: 100%;
            }

            .map-list {
                display: none !important;
            }
            
            .map-grid {
                display: grid !important;
            }
        }