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

:root{
    --color-bg:#0a0a0b;
    --color-bg-secondary:#12121a;
    --color-bg-card:rgba(18,18,26,0.95);
    --color-text:#e8e8e8;
    --color-text-muted:#888899;
    --color-accent:#c4a35a;
    --color-accent-dim:#8b7a4a;
    --color-border:rgba(255,255,255,0.08);
    --color-positive:#4ade80;
    --color-negative:#f87171;
    --color-containers:#3b82f6;
    --color-mutants:#ef4444;
    --color-traders:#22c55e;
    --color-npc:#a855f7;
    --font-main:'Roboto',sans-serif;
    --font-heading:'Oswald',sans-serif;
    --transition:0.3s ease;
    --header-height:70px;
    --sidebar-width:320px;
    --container-width:1400px
}

html,body{height:100%;overflow:hidden}

body{
    font-family:var(--font-main);
    font-size:14px;
    line-height:1.5;
    color:var(--color-text);
    background-color:var(--color-bg)
}

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:rgba(10,10,11,0.95);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--color-border)
}

.header__container{
    max-width:var(--container-width);
    margin:0 auto;
    padding:0 24px;
    height:var(--header-height);
    display:flex;
    align-items:center;
    justify-content:space-between
}

.header__logo{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:var(--color-text)
}

.header__logo-text{
    font-family:var(--font-heading);
    font-size:20px;
    font-weight:600;
    letter-spacing:2px
}

.header__logo-accent{color:var(--color-accent)}

.header__nav{display:flex;align-items:center;gap:8px}

.nav-link{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    font-size:14px;
    font-weight:500;
    color:var(--color-text-muted);
    text-decoration:none;
    border-radius:8px;
    transition:var(--transition)
}

.nav-icon{width:18px;height:18px}

.nav-link:hover{background:rgba(255,255,255,0.05);color:var(--color-text)}

.nav-link--current{background:rgba(196,163,90,0.15);color:var(--color-accent)}

.header__burger{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    padding:10px
}

.header__burger span{
    display:block;
    width:24px;
    height:2px;
    background:var(--color-text);
    transition:var(--transition)
}

.header__burger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.header__burger.active span:nth-child(2){opacity:0}
.header__burger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

.mobile-menu{
    display:none;
    position:fixed;
    top:var(--header-height);
    left:0;
    width:100%;
    background:rgba(10,10,11,0.98);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--color-border);
    z-index:999;
    padding:20px 24px
}

.mobile-menu.active{display:block}

.mobile-menu__nav{display:flex;flex-direction:column;gap:8px}

.mobile-menu__link{
    display:block;
    padding:12px 16px;
    font-size:16px;
    color:var(--color-text);
    text-decoration:none;
    border-radius:8px;
    transition:var(--transition)
}

.mobile-menu__link:hover{background:rgba(255,255,255,0.05)}

.mobile-menu__link--current{background:rgba(196,163,90,0.15);color:var(--color-accent)}

.sidebar{
    position:fixed;
    top:var(--header-height);
    left:0;
    width:var(--sidebar-width);
    height:calc(100vh - var(--header-height));
    background:var(--color-bg-card);
    border-right:1px solid var(--color-border);
    z-index:500;
    display:flex;
    flex-direction:column;
    transition:transform 0.3s ease
}

.sidebar.collapsed{transform:translateX(-100%)}

.sidebar__toggle{
    position:absolute;
    top:50%;
    left:100%;
    transform:translateY(-50%);
    width:36px;
    height:72px;
    background:var(--color-bg-card);
    border:1px solid var(--color-border);
    border-left:none;
    border-radius:0 12px 12px 0;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--color-text-muted);
    transition:background 0.3s ease,border-color 0.3s ease,color 0.3s ease,box-shadow 0.3s ease;
    z-index:501
}

.sidebar.collapsed .sidebar__toggle{
    background:linear-gradient(135deg,var(--color-bg-card) 0%,rgba(30,30,40,0.98) 100%);
    border:1px solid var(--color-border);
    box-shadow:4px 0 20px rgba(0,0,0,0.3)
}

.sidebar__toggle:hover{
    background:linear-gradient(135deg,rgba(196,163,90,0.15) 0%,rgba(196,163,90,0.05) 100%);
    border-color:var(--color-accent-dim);
    color:var(--color-accent)
}

.sidebar.collapsed .sidebar__toggle:hover{
    background:linear-gradient(135deg,rgba(196,163,90,0.2) 0%,rgba(196,163,90,0.1) 100%);
    border-color:var(--color-accent);
    box-shadow:4px 0 25px rgba(196,163,90,0.15)
}

.sidebar__toggle svg{width:20px;height:20px;transition:transform 0.3s ease}

.sidebar.collapsed .sidebar__toggle svg{transform:rotate(180deg)}

.sidebar__toggle-text{display:none}

.sidebar__content{
    flex:1;
    overflow-y:auto;
    padding:16px;
    transition:opacity 0.2s ease
}

.sidebar.collapsed .sidebar__content{opacity:0;pointer-events:none}

.sidebar__content::-webkit-scrollbar{width:6px}
.sidebar__content::-webkit-scrollbar-track{background:rgba(0,0,0,0.2)}
.sidebar__content::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:3px}
.sidebar__content::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.2)}

.sidebar__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
    padding-bottom:12px;
    border-bottom:1px solid var(--color-border)
}

.sidebar__title{
    font-family:var(--font-heading);
    font-size:18px;
    font-weight:500;
    letter-spacing:1px
}

.sidebar__reset{
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.05);
    border:1px solid var(--color-border);
    border-radius:8px;
    color:var(--color-text-muted);
    cursor:pointer;
    transition:var(--transition)
}

.sidebar__reset:hover{
    background:rgba(248,113,113,0.1);
    border-color:rgba(248,113,113,0.3);
    color:var(--color-negative)
}

.sidebar__reset svg{width:16px;height:16px}

.filter-group{
    margin-bottom:8px;
    background:rgba(0,0,0,0.2);
    border:1px solid var(--color-border);
    border-radius:12px;
    overflow:hidden
}

.filter-group__header{
    width:100%;
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    background:none;
    border:none;
    cursor:pointer;
    color:var(--color-text);
    transition:var(--transition)
}

.filter-group__header:hover{background:rgba(255,255,255,0.03)}

.filter-group__icon{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    flex-shrink:0
}

.filter-group__icon svg{width:18px;height:18px}

.filter-group__icon--containers{background:rgba(59,130,246,0.15);color:var(--color-containers)}
.filter-group__icon--mutants{background:rgba(239,68,68,0.15);color:var(--color-mutants)}
.filter-group__icon--traders{background:rgba(34,197,94,0.15);color:var(--color-traders)}
.filter-group__icon--npc{background:rgba(168,85,247,0.15);color:var(--color-npc)}

.filter-group__title{flex:1;font-size:14px;font-weight:500;text-align:left}

.filter-group__count{
    font-size:12px;
    font-weight:600;
    padding:2px 8px;
    background:rgba(255,255,255,0.1);
    border-radius:10px;
    color:var(--color-text-muted)
}

.filter-group__arrow{
    width:18px;
    height:18px;
    color:var(--color-text-muted);
    transition:transform 0.3s ease
}

.filter-group.open .filter-group__arrow{transform:rotate(180deg)}

.filter-group__content{
    display:none;
    padding:8px 14px 14px;
    border-top:1px solid var(--color-border)
}

.filter-group.open .filter-group__content{display:block}

.filter-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    margin:2px 0;
    border-radius:8px;
    cursor:pointer;
    transition:var(--transition)
}

.filter-item:hover{background:rgba(255,255,255,0.05)}

.filter-checkbox{display:none}

.filter-item__checkmark{
    width:18px;
    height:18px;
    border:2px solid var(--color-text-muted);
    border-radius:4px;
    position:relative;
    transition:var(--transition);
    flex-shrink:0
}

.filter-checkbox:checked+.filter-item__checkmark{
    background:var(--color-accent);
    border-color:var(--color-accent)
}

.filter-checkbox:checked+.filter-item__checkmark::after{
    content:'';
    position:absolute;
    left:5px;
    top:2px;
    width:4px;
    height:8px;
    border:solid #0a0a0b;
    border-width:0 2px 2px 0;
    transform:rotate(45deg)
}

.filter-item__label{flex:1;font-size:13px;color:var(--color-text)}

.filter-checkbox:not(:checked)~.filter-item__label{
    color:var(--color-text-muted);
    text-decoration:line-through
}

.filter-item__count{
    font-size:11px;
    color:var(--color-text-muted);
    padding:2px 6px;
    background:rgba(0,0,0,0.3);
    border-radius:6px
}

.map-container{
    position:fixed;
    top:var(--header-height);
    left:var(--sidebar-width);
    right:0;
    bottom:0;
    background:#1a1a1f;
    transition:left 0.3s ease,bottom 0.3s ease
}

.sidebar.collapsed~.map-container{left:0}

.leaflet-container{background:#1a1a1f;font-family:var(--font-main)}

.leaflet-control-zoom{display:none}

.leaflet-popup-content-wrapper{
    background:var(--color-bg-card);
    border:1px solid var(--color-border);
    border-radius:12px;
    box-shadow:0 8px 32px rgba(0,0,0,0.5)
}

.leaflet-popup-content{margin:14px 16px;color:var(--color-text);font-size:14px}

.leaflet-popup-tip{background:var(--color-bg-card);border:1px solid var(--color-border)}

.leaflet-popup-close-button{
    color:var(--color-text-muted)!important;
    font-size:20px!important;
    width:24px!important;
    height:24px!important;
    padding:4px!important
}

.leaflet-popup-close-button:hover{color:var(--color-accent)!important}

.marker-popup{min-width:180px}

.marker-popup__title{
    font-family:var(--font-heading);
    font-size:16px;
    font-weight:500;
    margin-bottom:8px;
    color:var(--color-accent)
}

.marker-popup__desc{font-size:13px;color:var(--color-text-muted);line-height:1.5}

.marker-popup__coords{
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid var(--color-border);
    font-size:11px;
    color:var(--color-text-muted);
    font-family:'Roboto Mono',monospace
}

.coordinates{
    position:fixed;
    bottom:20px;
    left:calc(var(--sidebar-width) + 20px);
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    background:var(--color-bg-card);
    border:1px solid var(--color-border);
    border-radius:10px;
    font-size:13px;
    font-family:'Roboto Mono',monospace;
    z-index:400;
    transition:left 0.3s ease,bottom 0.3s ease
}

.sidebar.collapsed~.coordinates{left:20px}

.coordinates__label{color:var(--color-text-muted)}

.coordinates__value{color:var(--color-accent);font-weight:500;min-width:50px}

.map-controls{
    position:fixed;
    bottom:20px;
    right:20px;
    display:flex;
    flex-direction:column;
    gap:8px;
    z-index:400;
    transition:bottom 0.3s ease
}

.map-control{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--color-bg-card);
    border:1px solid var(--color-border);
    border-radius:10px;
    color:var(--color-text);
    cursor:pointer;
    transition:var(--transition)
}

.map-control:hover{
    background:rgba(196,163,90,0.1);
    border-color:var(--color-accent);
    color:var(--color-accent)
}

.map-control svg{width:20px;height:20px}

.user-marker-toggle{
    position:fixed;
    top:calc(var(--header-height) + 20px);
    right:20px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 20px;
    background:linear-gradient(135deg,var(--color-accent),var(--color-accent-dim));
    border:none;
    border-radius:12px;
    color:#0a0a0b;
    font-family:var(--font-main);
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    z-index:450;
    transition:var(--transition);
    box-shadow:0 4px 20px rgba(196,163,90,0.3)
}

.user-marker-toggle:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 25px rgba(196,163,90,0.4)
}

.user-marker-toggle.active{
    background:linear-gradient(135deg,#ef4444,#dc2626);
    box-shadow:0 4px 20px rgba(239,68,68,0.3)
}

.user-marker-toggle svg{width:20px;height:20px;transition:transform 0.3s ease}

.user-marker-toggle.active svg{transform:rotate(45deg)}

.map-container.adding-marker,
.map-container.adding-marker .leaflet-container{cursor:crosshair!important}

.user-markers-panel{
    position:fixed;
    top:calc(var(--header-height) + 70px);
    right:20px;
    width:360px;
    max-height:calc(100vh - var(--header-height) - 100px);
    background:var(--color-bg-card);
    border:1px solid var(--color-border);
    border-radius:16px;
    z-index:450;
    display:none;
    flex-direction:column;
    box-shadow:0 8px 32px rgba(0,0,0,0.5);
    overflow:hidden
}

.user-markers-panel.visible{display:flex}

.user-markers-panel__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 20px;
    background:rgba(0,0,0,0.3);
    border-bottom:1px solid var(--color-border)
}

.user-markers-panel__header h3{
    font-family:var(--font-heading);
    font-size:16px;
    font-weight:500;
    color:var(--color-accent);
    margin:0
}

.user-markers-panel__actions{display:flex;align-items:center;gap:8px}

.user-markers-panel__btn{
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.05);
    border:1px solid var(--color-border);
    border-radius:8px;
    color:var(--color-text-muted);
    cursor:pointer;
    transition:var(--transition)
}

.user-markers-panel__btn:hover{
    background:rgba(196,163,90,0.1);
    border-color:var(--color-accent);
    color:var(--color-accent)
}

.user-markers-panel__btn--danger:hover{
    background:rgba(239,68,68,0.1);
    border-color:#ef4444;
    color:#ef4444
}

.user-markers-panel__btn svg{width:16px;height:16px}

.user-markers-panel__close{
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    color:var(--color-text-muted);
    font-size:24px;
    cursor:pointer;
    transition:var(--transition)
}

.user-markers-panel__close:hover{color:var(--color-text)}

.user-markers-panel__list{flex:1;overflow-y:auto;padding:12px}

.user-markers-panel__list::-webkit-scrollbar{width:6px}
.user-markers-panel__list::-webkit-scrollbar-track{background:rgba(0,0,0,0.2)}
.user-markers-panel__list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:3px}

.user-markers-panel__empty{
    text-align:center;
    padding:40px 20px;
    color:var(--color-text-muted);
    font-size:14px
}

.user-marker-item{
    background:rgba(0,0,0,0.2);
    border:1px solid var(--color-border);
    border-radius:10px;
    padding:12px;
    margin-bottom:10px;
    transition:var(--transition)
}

.user-marker-item:hover{border-color:var(--color-accent-dim)}

.user-marker-item__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px
}

.user-marker-item__type{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:500;
    color:var(--color-accent)
}

.user-marker-item__type-icon{width:20px;height:20px;object-fit:contain}

.user-marker-item__actions{display:flex;gap:4px}

.user-marker-item__btn{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.05);
    border:1px solid transparent;
    border-radius:6px;
    color:var(--color-text-muted);
    cursor:pointer;
    transition:var(--transition)
}

.user-marker-item__btn:hover{background:rgba(196,163,90,0.1);color:var(--color-accent)}

.user-marker-item__btn--delete:hover{background:rgba(239,68,68,0.1);color:#ef4444}

.user-marker-item__btn svg{width:14px;height:14px}

.user-marker-item__coords{
    font-size:12px;
    color:var(--color-text-muted);
    font-family:'Roboto Mono',monospace;
    margin-bottom:6px
}

.user-marker-item__desc{font-size:13px;color:var(--color-text);line-height:1.4}

.user-markers-panel__footer{
    padding:12px 16px;
    border-top:1px solid var(--color-border);
    background:rgba(0,0,0,0.2)
}

.user-markers-panel__copy-btn{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 20px;
    background:linear-gradient(135deg,var(--color-accent),var(--color-accent-dim));
    border:none;
    border-radius:10px;
    color:#0a0a0b;
    font-family:var(--font-main);
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition)
}

.user-markers-panel__copy-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 15px rgba(196,163,90,0.3)
}

.user-markers-panel__copy-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}

.user-markers-panel__copy-btn svg{width:18px;height:18px}

.marker-modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2000;
    display:none;
    align-items:center;
    justify-content:center
}

.marker-modal.visible{display:flex}

.marker-modal__overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    backdrop-filter:blur(4px)
}

.marker-modal__content{
    position:relative;
    width:90%;
    max-width:440px;
    background:var(--color-bg-card);
    border:1px solid var(--color-border);
    border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
    overflow:hidden
}

.marker-modal__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 24px;
    background:rgba(0,0,0,0.3);
    border-bottom:1px solid var(--color-border)
}

.marker-modal__header h3{
    font-family:var(--font-heading);
    font-size:18px;
    font-weight:500;
    color:var(--color-accent);
    margin:0
}

.marker-modal__close{
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    color:var(--color-text-muted);
    font-size:28px;
    cursor:pointer;
    transition:var(--transition)
}

.marker-modal__close:hover{color:var(--color-text)}

.marker-modal__body{padding:24px}

.marker-modal__coords{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 16px;
    background:rgba(196,163,90,0.1);
    border:1px solid rgba(196,163,90,0.2);
    border-radius:10px;
    margin-bottom:20px;
    font-size:14px
}

.marker-modal__coords span:first-child{color:var(--color-text-muted)}

.marker-modal__coords span:last-child{
    color:var(--color-accent);
    font-family:'Roboto Mono',monospace;
    font-weight:500
}

.marker-modal__field{margin-bottom:16px}

.marker-modal__field label{
    display:block;
    font-size:13px;
    font-weight:500;
    color:var(--color-text-muted);
    margin-bottom:8px
}

.marker-modal__select,
.marker-modal__input,
.marker-modal__textarea{
    width:100%;
    padding:12px 16px;
    background:rgba(0,0,0,0.3);
    border:1px solid var(--color-border);
    border-radius:10px;
    color:var(--color-text);
    font-family:var(--font-main);
    font-size:14px;
    transition:var(--transition)
}

.marker-modal__select:focus,
.marker-modal__input:focus,
.marker-modal__textarea:focus{
    outline:none;
    border-color:var(--color-accent);
    box-shadow:0 0 0 3px rgba(196,163,90,0.1)
}

.marker-modal__select option{background:var(--color-bg-secondary);color:var(--color-text)}

.marker-modal__textarea{min-height:80px;resize:vertical}

.marker-modal__footer{
    display:flex;
    gap:12px;
    padding:20px 24px;
    background:rgba(0,0,0,0.2);
    border-top:1px solid var(--color-border)
}

.marker-modal__btn{
    flex:1;
    padding:14px 20px;
    border:none;
    border-radius:10px;
    font-family:var(--font-main);
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition)
}

.marker-modal__btn--cancel{
    background:rgba(255,255,255,0.05);
    color:var(--color-text-muted);
    border:1px solid var(--color-border)
}

.marker-modal__btn--cancel:hover{background:rgba(255,255,255,0.1);color:var(--color-text)}

.marker-modal__btn--save{
    background:linear-gradient(135deg,var(--color-accent),var(--color-accent-dim));
    color:#0a0a0b
}

.marker-modal__btn--save:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 15px rgba(196,163,90,0.3)
}

.marker-modal__btn--save:disabled{opacity:0.5;cursor:not-allowed;transform:none}

.copy-toast{
    position:fixed;
    bottom:30px;
    left:50%;
    transform:translateX(-50%) translateY(100px);
    display:flex;
    align-items:center;
    gap:10px;
    padding:16px 24px;
    background:var(--color-positive);
    border-radius:12px;
    color:#0a0a0b;
    font-size:14px;
    font-weight:600;
    z-index:3000;
    opacity:0;
    transition:all 0.3s ease
}

.copy-toast.visible{transform:translateX(-50%) translateY(0);opacity:1}

.copy-toast svg{width:20px;height:20px}

.user-marker-icon{position:relative}

.user-marker-icon::after{
    content:'';
    position:absolute;
    top:-4px;
    right:-4px;
    width:12px;
    height:12px;
    background:var(--color-accent);
    border:2px solid var(--color-bg);
    border-radius:50%
}

.custom-select{position:relative;width:100%}

.custom-select__trigger{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 16px;
    background:rgba(0,0,0,0.3);
    border:1px solid var(--color-border);
    border-radius:10px;
    cursor:pointer;
    transition:var(--transition)
}

.custom-select__trigger:hover{border-color:var(--color-accent-dim)}

.custom-select.open .custom-select__trigger{
    border-color:var(--color-accent);
    border-radius:10px 10px 0 0
}

.custom-select__placeholder{color:var(--color-text-muted);font-size:14px}

.custom-select__selected{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--color-text);
    font-size:14px
}

.custom-select__selected img{width:22px;height:22px;object-fit:contain}

.custom-select__arrow{
    width:18px;
    height:18px;
    color:var(--color-text-muted);
    transition:transform 0.3s ease;
    flex-shrink:0
}

.custom-select.open .custom-select__arrow{transform:rotate(180deg);color:var(--color-accent)}

.custom-select__dropdown{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    max-height:320px;
    overflow-y:auto;
    background:var(--color-bg-secondary);
    border:1px solid var(--color-accent);
    border-top:none;
    border-radius:0 0 10px 10px;
    z-index:100;
    display:none;
    box-shadow:0 10px 30px rgba(0,0,0,0.4)
}

.custom-select.open .custom-select__dropdown{display:block;animation:dropdownFade 0.2s ease}

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

.custom-select__dropdown::-webkit-scrollbar{width:6px}
.custom-select__dropdown::-webkit-scrollbar-track{background:rgba(0,0,0,0.2)}
.custom-select__dropdown::-webkit-scrollbar-thumb{background:var(--color-accent-dim);border-radius:3px}

.custom-select__group{padding:8px 0;border-bottom:1px solid var(--color-border)}
.custom-select__group:last-child{border-bottom:none}

.custom-select__group-title{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--color-accent);
    background:rgba(196,163,90,0.05)
}

.custom-select__group-title svg{width:16px;height:16px}

.custom-select__group:nth-child(1) .custom-select__group-title{color:var(--color-containers);background:rgba(59,130,246,0.05)}
.custom-select__group:nth-child(1) .custom-select__group-title svg{color:var(--color-containers)}
.custom-select__group:nth-child(2) .custom-select__group-title{color:var(--color-mutants);background:rgba(239,68,68,0.05)}
.custom-select__group:nth-child(2) .custom-select__group-title svg{color:var(--color-mutants)}
.custom-select__group:nth-child(3) .custom-select__group-title{color:var(--color-traders);background:rgba(34,197,94,0.05)}
.custom-select__group:nth-child(3) .custom-select__group-title svg{color:var(--color-traders)}
.custom-select__group:nth-child(4) .custom-select__group-title{color:var(--color-npc);background:rgba(168,85,247,0.05)}
.custom-select__group:nth-child(4) .custom-select__group-title svg{color:var(--color-npc)}

.custom-select__option{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 16px 10px 42px;
    cursor:pointer;
    transition:var(--transition)
}

.custom-select__option:hover{background:rgba(255,255,255,0.05)}

.custom-select__option.selected{background:rgba(196,163,90,0.15)}

.custom-select__option img{width:24px;height:24px;object-fit:contain;flex-shrink:0}

.custom-select__option span{font-size:14px;color:var(--color-text)}

.custom-select__option:hover span{color:var(--color-accent)}

.mobile-lang-switcher{
    display:flex;
    gap:12px;
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid var(--color-border)
}

.mobile-lang-btn{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:16px 20px;
    background:linear-gradient(135deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.02) 100%);
    border:1px solid var(--color-border);
    border-radius:12px;
    color:var(--color-text-muted);
    font-family:var(--font-main);
    font-size:15px;
    font-weight:500;
    cursor:pointer;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1)
}

.mobile-lang-btn:hover{
    background:rgba(255,255,255,0.08);
    color:var(--color-text);
    transform:translateY(-2px)
}

.mobile-lang-btn.active{
    background:linear-gradient(135deg,rgba(196,163,90,0.2) 0%,rgba(196,163,90,0.1) 100%);
    border-color:var(--color-accent);
    color:var(--color-accent);
    box-shadow:0 4px 16px rgba(196,163,90,0.2)
}

@media(max-width:1024px){
    .header__nav{display:none}
    .header__burger{display:flex}
    .sidebar{width:280px;--sidebar-width:280px}
    .map-container{left:280px}
    .sidebar.collapsed~.map-container{left:0}
    .coordinates{left:300px}
    .sidebar.collapsed~.coordinates{left:20px}
}

@media(max-width:768px){
    .sidebar{
        position:fixed;
        width:100%;
        top:auto;
        bottom:0;
        left:0;
        right:0;
        height:auto;
        max-height:75vh;
        border-right:none;
        border-radius:0;
        z-index:600;
        transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
        transform:translateY(calc(100% - 56px));
        background:transparent
    }
    
    .sidebar.open{transform:translateY(0)}
    .sidebar.collapsed{transform:translateY(calc(100% - 56px))}
    .sidebar.collapsed .sidebar__content{opacity:1;pointer-events:auto}
    .sidebar.collapsed .sidebar__toggle svg{transform:rotate(-90deg)}
    
    .sidebar__toggle{
        position:relative;
        top:auto;
        left:auto;
        transform:none;
        width:100%;
        height:56px;
        padding:0 20px;
        border-radius:20px 20px 0 0;
        border:none;
        border-top:1px solid var(--color-border);
        background:var(--color-bg-card);
        display:flex;
        align-items:center;
        justify-content:center;
        gap:10px;
        box-shadow:0 -4px 20px rgba(0,0,0,0.3)
    }
    
    .sidebar__toggle::after{
        content:'';
        position:absolute;
        top:8px;
        left:50%;
        transform:translateX(-50%);
        width:36px;
        height:4px;
        background:rgba(255,255,255,0.2);
        border-radius:2px
    }
    
    .sidebar__toggle-text{
        display:block;
        font-size:14px;
        font-weight:600;
        color:var(--color-text);
        letter-spacing:0.5px
    }
    
    .sidebar__toggle svg{
        width:18px;
        height:18px;
        transform:rotate(-90deg);
        transition:transform 0.3s ease;
        color:var(--color-text-muted)
    }
    
    .sidebar.open .sidebar__toggle svg{transform:rotate(90deg)}
    
    .sidebar__content{
        background:var(--color-bg-card);
        max-height:calc(75vh - 56px);
        padding:12px;
        overflow-y:auto;
        border-top:1px solid var(--color-border)
    }
    
    .map-container{left:0;bottom:56px}
    .sidebar.collapsed~.map-container{left:0}
    .coordinates{left:10px;bottom:70px;padding:8px 12px;font-size:11px}
    .sidebar.collapsed~.coordinates{left:10px}
    .map-controls{bottom:70px;right:10px}
    
    .user-marker-toggle{
        top:calc(var(--header-height) + 10px);
        right:10px;
        padding:10px;
        border-radius:50%;
        width:48px;
        height:48px;
        justify-content:center
    }
    
    .user-marker-toggle span{display:none}
    .user-marker-toggle svg{width:24px;height:24px}
    
    .user-markers-panel{
        top:calc(var(--header-height) + 70px);
        right:10px;
        left:10px;
        width:auto;
        max-height:calc(100vh - var(--header-height) - 150px);
        border-radius:12px
    }
    
    .user-markers-panel__header{padding:12px 16px}
    .user-markers-panel__header h3{font-size:14px}
    .user-markers-panel__list{padding:8px;max-height:30vh}
    .user-markers-panel__empty{padding:20px 16px;font-size:13px}
    .user-marker-item{padding:10px;margin-bottom:8px}
    .user-marker-item__header{margin-bottom:6px}
    .user-marker-item__type{font-size:12px;gap:6px}
    .user-marker-item__type-icon{width:18px;height:18px}
    .user-marker-item__btn{width:28px;height:28px}
    .user-marker-item__btn svg{width:14px;height:14px}
    .user-marker-item__coords{font-size:11px;margin-bottom:4px}
    .user-marker-item__desc{font-size:12px}
    .user-markers-panel__footer{padding:10px 12px}
    .user-markers-panel__copy-btn{padding:12px 16px;font-size:13px;gap:8px}
    .user-markers-panel__copy-btn svg{width:16px;height:16px}
    .sidebar__header{padding-bottom:10px;margin-bottom:12px}
    .sidebar__title{font-size:16px}
    .filter-group{margin-bottom:6px}
    .filter-group__header{padding:10px 12px;gap:10px}
    .filter-group__icon{width:32px;height:32px}
    .filter-group__icon svg{width:16px;height:16px}
    .filter-group__title{font-size:13px}
    .filter-group__count{font-size:11px;padding:2px 6px}
    .filter-group__content{padding:6px 12px 12px}
    .filter-item{padding:8px 10px;gap:10px}
    .filter-item__checkmark{width:18px;height:18px}
    .filter-checkbox:checked+.filter-item__checkmark::after{left:5px;top:2px;width:4px;height:8px}
    .filter-item__label{font-size:13px}
    .filter-item__count{font-size:11px;padding:2px 6px}
    
    .mobile-lang-switcher{flex-direction:column}
}

@media(max-width:480px){
    .sidebar{max-height:70vh}
    .sidebar__content{max-height:calc(70vh - 56px);padding:10px}
    .coordinates{padding:6px 10px;font-size:10px;bottom:66px}
    .map-controls{bottom:66px}
    .map-control{width:40px;height:40px}
    .map-control svg{width:18px;height:18px}
    .marker-modal__content{width:95%;margin:10px;max-height:90vh;overflow-y:auto}
    .marker-modal__body{padding:16px}
    .marker-modal__footer{flex-direction:column}
    .user-marker-toggle{width:44px;height:44px}
    .user-marker-toggle svg{width:22px;height:22px}
    .user-markers-panel{max-height:calc(100vh - var(--header-height) - 130px);top:calc(var(--header-height) + 60px)}
    .user-markers-panel__list{max-height:25vh}
    .filter-item{padding:6px 8px}
    .filter-item__label{font-size:12px}
    .sidebar__header{flex-wrap:wrap;gap:8px}
}