:root {--anim-time: 1.25s;}
body{margin:0;font-family:Arial,sans-serif;background:radial-gradient(circle at bottom left,rgba(255, 0, 0, 0.644),transparent 35%),linear-gradient(135deg,#050505,#1a0d00,#ff7a00);color:#eee;min-height:100vh;padding:30px;background-attachment: fixed;background-size: cover;}
.page{max-width:1500px;margin:0 auto;background:#111111ee;border:1px solid #3a2420;border-radius:28px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.45);overflow:visible;}
header{background:#181818;padding:24px 40px;display:flex;gap:18px;border-bottom:1px solid #332222;position:sticky;top:0;align-items:center;position:sticky;top:0;z-index:1000;border-radius: 28px 28px 0 0;transition: opacity 1s ease, visibility 1s ease, filter 0.8s ease;}
header.hide {opacity: 0;visibility: hidden;filter: blur(5px);pointer-events: none;}
.nav{display: flex;align-items: center;width: 100%;position: relative;gap: 18px;transition: all 0.4s ease;}
.lang{margin-left:auto;position:relative}
.lang select{background:linear-gradient(90deg,#8b1e1e,#d95f02);color:#fff;border:1px solid #663300;padding:10px 34px 10px 16px;min-width:115px;border-radius:12px;cursor:pointer;font-size:16px;transition:all .2s ease;outline:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}
.lang select:hover{transform:scale(1.05);box-shadow:0 8px 18px rgba(217,95,2,.25)}
.lang select option{background:#1a1a1a;color:#fff;padding:12px;border:none}
.lang:after{content:'▼';position:absolute;right:10px;top:11px;font-size:12px;color:#fff}
.GoToCat{margin-left:auto;position:relative}
.GoToCat select{background:linear-gradient(90deg,#8b1e1e,#d95f02);color:#fff;border:1px solid #663300;padding:10px 34px 10px 16px;max-width:135px;border-radius:12px;cursor:pointer;font-size:16px;transition:all .2s ease;outline:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}
.GoToCat select:hover{transform:scale(1.05);box-shadow:0 8px 18px rgba(217,95,2,.25)}
.GoToCat select option{background:#1a1a1a;color:#fff;padding:12px;border:none}
.GoToCat:after{content:'▼';position:absolute;right:10px;top:11px;font-size:12px;color:#fff}
.tab{color:#d0b0a0;text-decoration:none;padding:12px 20px;border-radius:10px;font-size:18px;transition:transform .2s ease, background .2s ease;}
.tab:hover{background:#2a1a16;transform:scale(1.05);box-shadow:0 8px 18px rgba(217,95,2,.25)}
.tab.tab.active:hover{transform:scale(1.05);box-shadow:0 8px 18px rgba(217,95,2,.25)}
.tab.active{background:linear-gradient(90deg,#b22222,#ff7a00);color:#fff;font-weight:bold;}
.container{padding:40px}
.title{font-size:42px;font-weight:bold;text-align:center;margin-bottom:20px}
.desc{text-align:center;margin-bottom:40px;opacity:.8}
.category {opacity: 0;margin-bottom:25px;transform: translateY(80px)scale(0.95);transition:opacity var(--anim-time) cubic-bezier(0.22, 1, 0.36, 1),transform var(--anim-time) cubic-bezier(0.22, 1, 0.36, 1);}
.category.show {opacity: 1;transform:translateY(0)scale(1);}
.cat-btn{width:25%;opacity: 0;transform: translateY(60px);transition:width var(--anim-time) cubic-bezier(0.22, 1, 0.36, 1),opacity var(--anim-time) cubic-bezier(0.22, 1, 0.36, 1),transform var(--anim-time) cubic-bezier(0.22, 1, 0.36, 1);background:linear-gradient(90deg,#8b1e1e,#d95f02);border:none;color:#fff;padding:16px 45px 16px 20px;border-radius:14px;font-size:20px;cursor:pointer;position:relative}
.cat-btn.show {width: 100%;opacity: 1;transform: translateY(0);}
.cat-btn:hover{transform:scale(1.05)translateY(0);box-shadow:0 8px 18px rgba(217,95,2,.25)}
.cat-btn::after{content:'▼';position:absolute;right:18px;top:50%;transform:translateY(-50%)}
.cat-btn::after{content:'▼';position:absolute;right:18px;top:50%;transform:translateY(-50%) rotate(90deg);transition:transform .3s ease;}
.cat-btn.open::after{transform:translateY(-50%) rotate(0deg);}
.cat-content {max-height: 0;overflow: visible;transition: max-height 0.8s ease, opacity 0.6s ease;opacity: 0;margin-top:15px;position: relative;z-index: auto;}
.cat-content.open {max-height: 3500px;opacity: 1;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.mod-card{opacity: 0;transform:translateY(40px)scale(0.96);display:block;background:#181818;border:1px solid #3a2420;border-radius:18px;overflow:hidden;text-decoration:none;color:#fff;transition:opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);}
.mod-card.show {opacity: 1 !important;transform: translateY(0) scale(1) !important;}
.mod-card.show:hover {transform: scale(1.05) !important;box-shadow: 0 8px 18px rgba(217, 95, 2, 0.25);}
.mod-card:hover{transform:scale(1.05);box-shadow:0 8px 18px rgba(217,95,2,.25)}
.mod-img{height:162px;display:flex;align-items:center;justify-content:center;background:#181818;border-bottom:1px solid #3a2420}
.mod-img.outdated{height:162px;display:flex;align-items:center;justify-content:center;background:#38040e;border-bottom:1px solid #3a2420}
.mod-img.abandoned{height:162px;display:flex;align-items:center;justify-content:center;background:#250902;border-bottom:1px solid #3a2420}
.mod-img img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.mod-content{padding:15px;background:#181818}
.mod-content.outdated{padding:15px;background:#38040e}
.mod-content.abandoned{padding:15px;background:#250902}
.mod-title{font-size:18px;font-weight:bold;margin-bottom:6px}
.mod-meta{font-size:14px;opacity:.8;display: flex;justify-content: space-between; align-items: center;}
.side-panel {position: fixed;width: 180px;z-index: 1000;display: flex;justify-content: center;}
.left-panel {left: 10px;opacity: 0;transform: translateX(-20px);pointer-events: none;transition: opacity var(--anim-time) ease, transform var(--anim-time) ease;}
.left-panel.show {opacity: 1;transform: translateX(0);pointer-events: auto;}
.right-panel {right: 10px;opacity: 0;transform: translateX(20px);pointer-events: none;transition: opacity var(--anim-time) ease, transform var(--anim-time) ease;}
.right-panel.show {opacity: 1;transform: translateX(0);pointer-events: auto;}
.panel-content {display: flex;flex-direction: column;gap: 10px;width: 100%;background: rgba(20, 20, 20, 0.8);padding: 10px;border-radius: 12px;align-items: flex-start; padding-top: 30px;}
.panel-content a {display:inline-block;width:auto; box-sizing: border-box;color:#d0b0a0;text-decoration:none;padding:12px 20px;margin-top: 20px;border-radius:10px;font-size:18px;transition:transform .2s ease, background .2s ease;margin: 0 auto;transform:scale(1.2);margin-bottom:25px;}
.panel-content a:hover {transform:scale(1.25);box-shadow:0 8px 18px rgba(217,95,2,.25)}
.panel-content .lang {transform:scale(1.2);margin: 0 auto;}
.panel-content .GoToCat {transform:scale(1.2);margin: 0 auto;margin-top: 20px;margin-bottom: 25px;}
.panel-content a.tab.active:hover {transform: scale(1.25);box-shadow:0 8px 18px rgba(217,95,2,.25);background:linear-gradient(90deg,#b22222,#ff7a00);}
/* ===== ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ ПОИСКА ===== */
  .search-bar {display: flex;gap: 12px;margin-bottom: 30px;flex-wrap: wrap;align-items: center;justify-content: center;}
  .search-bar input {flex: 1;min-width: 200px;max-width: 500px;padding: 12px 20px;border-radius: 14px;border: 1px solid #3a2420;background: #1a1a1a;color: #eee;font-size: 16px;transition: all 0.3s ease;}
  .search-bar input:focus {outline: none;border-color: #ff7a00;box-shadow: 0 0 20px rgba(255, 122, 0, 0.15);}
  .search-bar input::placeholder {color: #666;}
  .search-bar .mods-count {font-size: 14px;color: #aaa;padding: 8px 16px;background: #181818;border-radius: 10px;border: 1px solid #2a2a2a;white-space: nowrap;}
  .search-bar .mods-count span {color: #ffaa66;font-weight: bold;}
  .search-bar .collapse-all-btn {background: transparent;border: 1px solid #3a2420;color: #d0b0a0;padding: 10px 20px;border-radius: 12px;cursor: pointer;font-size: 14px;transition: all 0.25s ease;white-space: nowrap;}
  .search-bar .collapse-all-btn:hover {background: #2a1a16;transform: scale(1.05);}
  /* ===== СТАТУСЫ МОДОВ ===== */
.mod-status {font-size: 11px;font-weight: bold;padding: 2px 12px;border-radius: 20px;text-transform: uppercase;letter-spacing: 0.3px;}
.mod-status.new {background: #1a4a1a;color: #7fdf7f;}
.mod-status.updated {background: #1a2a4a;color: #7fbfef;}
.mod-status.outdated {background: #4a1a1a;color: #ef7f7f;}
.mod-status.abandoned {background: #2a1a0a;color: #dfaf7f;}
  /* ===== ПОДСКАЗКА ПРИ ОТСУТСТВИИ РЕЗУЛЬТАТОВ ===== */
  .no-results {text-align: center;padding: 40px;color: #888;font-size: 18px;display: none;}
  .no-results.show {display: block;}
  /* ===== АНИМАЦИЯ ДЛЯ КАРТОЧЕК ПРИ ПОИСКЕ ===== */
  .mod-card.filtered {opacity: 1 !important;transform: translateY(0) scale(1) !important;}
  .mod-card.hidden {display: none !important;}
  /* ===== МЕЛКИЕ ПРАВКИ ===== */
  .cat-header-wrap {display: flex;align-items: center;gap: 16px;flex-wrap: wrap;}
  .cat-header-wrap .cat-count {font-size: 14px;color: #999;background: #1a1a1a;padding: 4px 14px;border-radius: 20px;border: 1px solid #2a2a2a;}
  @media (max-width: 700px) {
    .search-bar {flex-direction: column;align-items: stretch;}
    .search-bar input {max-width: 100%;}
    .search-bar .mods-count {text-align: center;}
    .cat-header-wrap {flex-direction: column;align-items: stretch;}
    .cat-header-wrap .cat-count {text-align: center;}
  }
#navSelect option:first-child {display: none;}
#gotonavSelect option:first-child {display: none;}
a {
  font-weight: bold;
  text-decoration: none;
}