/*
 * S.T.A.L.K.E.R. 2 Wiki — Mods catalog stylesheet
 * Підключається тільки на /mods і /mods/{slug} через $extraCss
 *
 * УВАГА: проєкт використовує rem-as-px трюк (_nullstyle.css). Тому числа
 * виглядають як піксели, але одиниця — rem. (Виняток: profile.css на px.)
 */

/* ============ PAGE WRAPPER ============ */
/* Full-bleed сторінка без бокового navbar (як cards-roulette). Контент центрується
   власними max-width + margin auto всередині секцій. */
.mods-page{width:100%;min-height:100vh;background:#0c0905;}

/* Кнопка "На головну" (бо navbar прибрано) */
.mods-back{display:inline-flex;align-items:center;gap:8rem;color:#616046;text-decoration:none;font-family:'Oswald',sans-serif;font-size:12rem;font-weight:500;letter-spacing:2rem;text-transform:uppercase;transition:color .2s;margin-bottom:52rem;}
.mods-back:hover{color:#c6be95;}
.mods-back svg{width:16rem;height:16rem;}

/* ============ HERO ============ */
.mods-hero{position:relative;min-height:762rem;overflow:hidden;background:#0c0905;}
.mods-hero::before{content:'';position:absolute;top:-180rem;right:310rem;width:900rem;height:900rem;border-radius:50%;background:radial-gradient(circle, rgb(80 83 27 / 29%) 0%, rgb(117 111 78 / 5%) 30%, transparent 65%);pointer-events:none;z-index:0;}


.mods-hero-particles{position:absolute;inset:0;z-index:1;pointer-events:none;}
.mods-hero-dust{position:absolute;width:2rem;height:2rem;border-radius:50%;background:rgba(255,170,60,.6);box-shadow:0 0 4rem rgba(255,150,40,.4);animation:modsDustFloat var(--dur,18s) linear infinite;}
@keyframes modsDustFloat{
  0%{transform:translate(0,100vh) scale(0);opacity:0;}
  10%{opacity:1;}
  90%{opacity:1;}
  100%{transform:translate(var(--dx,30rem),-100rem) scale(.6);opacity:0;}
}

.mods-hero-fade{position:absolute;bottom:0;left:0;right:0;height:120rem;background:linear-gradient(to top,#0c0905,transparent);z-index:2;pointer-events:none;}

.mods-hero-content{position:relative;z-index:3;max-width:1400rem;margin:0 auto;padding:60rem 40rem 0;}

/* Snork — декоративна фігура в правому нижньому куті hero.
   Менша, чітко справа, не виходить за межі секції, не накладається на основний контент. */
.mods-hero-snork{position:absolute;right:244rem;bottom:338rem;height:55%;width:auto;object-fit:contain;object-position:bottom right;z-index:1;pointer-events:none;animation:modsSnorkFade 1.4s 1.2s both ease-out;}
@keyframes modsSnorkFade {
    from { opacity: 0; transform: translateX(40rem); }
    to   { transform: translateX(0); }
}

.mods-hero-top-row{display:flex;align-items:flex-start;justify-content:space-between;gap:40rem;margin:76rem 0;max-width:62%;}
.mods-hero-top-row .mods-hero-title{margin-bottom:0;flex:1;min-width:0;}
.mods-hero-desc-row{display:flex;align-items:flex-end;justify-content:space-between;gap:40rem;margin-bottom:34rem;}
.mods-hero-desc-row .mods-hero-desc{flex:1;min-width:0;margin:0;max-width:610rem;}

.mods-hero-eyebrow{display:inline-flex;align-items:center;gap:10rem;padding:9rem 20rem;background:rgba(0,0,0,.5);backdrop-filter:blur(14rem);border:1rem solid rgba(255,170,50,.35);border-radius:30rem;font-family:'Oswald',sans-serif;font-size:11rem;font-weight:600;letter-spacing:3rem;text-transform:uppercase;color:#ffb04e;flex-shrink:0;align-self:flex-start;margin-top:18rem;animation:modsFadeUp .8s .2s both;box-shadow:0 4rem 24rem rgba(255,140,30,.12);}
.mods-hero-eyebrow::before{content:'';width:8rem;height:8rem;border-radius:50%;background:#ffb04e;box-shadow:0 0 12rem #ffb04e;animation:modsDotPulse 2s ease-in-out infinite;}
@keyframes modsDotPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.7);}}
@keyframes modsFadeUp{from{opacity:0;transform:translateY(20rem);}to{opacity:1;transform:translateY(0);}}

.mods-hero-title{font-family:'Oswald',sans-serif;font-size:90rem;font-weight:600;line-height:.88;text-transform:uppercase;letter-spacing:3rem;margin-bottom:24rem;color:#f0e6d2;text-shadow:0 2rem 30rem rgba(0,0,0,.4);animation:modsFadeUp 1s .35s both;}
.mods-hero-title span{color:#5c6121;position:relative;margin-top: 20rem;margin-left: 24rem;rotate: 354deg;font-size: 120rem;display:inline-block;text-shadow:0 0 50rem rgb(53 60 21), 0 0 90rem rgb(79 82 23);}

.mods-hero-desc{font-size:17rem;line-height:1.7;max-width:620rem;color:#948d70;animation:modsFadeUp 1s .5s both;}

.mods-hero-cta-block{display:flex;align-items:center;gap:24rem;padding:30rem 36rem;background:linear-gradient(135deg, rgb(92 97 33 / 22%) 0%, rgb(123 122 93) 100%);border-radius:14rem;margin-top:48rem;margin-bottom:48rem;position:relative;overflow:hidden;animation:modsFadeUp 1s .65s both;flex-wrap:wrap;}
.mods-hero-cta-block::before{content:'';position:absolute;bottom:0;left:0;right:0;height:1rem;background:linear-gradient(90deg, transparent, #77734e, transparent);}
.mods-hero-cta-block::after{content:'';position:absolute;top:0;right:0;width:340rem;height:100%;background:radial-gradient(circle at right, #b1a38f 0%, transparent 70%);pointer-events:none;z-index: 1;}

.mods-cta-icon{flex-shrink:0;width:120rem;height:120rem;border-radius:50%;background:linear-gradient(135deg, rgb(125 120 85), rgb(92 97 33 / 0%));border:1rem solid #43412b;display:flex;align-items:center;justify-content:center;position:relative;}
.mods-cta-icon::before{content:'';position:absolute;inset:-6rem;border-radius:50%;border:1rem dashed #807852;animation:modsRotate 22s linear infinite;}
@keyframes modsRotate{from{transform:rotate(0);}to{transform:rotate(360deg);}}
.mods-cta-icon svg{width:46rem;height:46rem;color:#c6be95;}

.mods-cta-text{flex:1;min-width:0;z-index:1;}
.mods-cta-text h3{font-family:'Oswald',sans-serif;font-size:26rem;font-weight:600;letter-spacing:1.5rem;text-transform:uppercase;color:#c6be95;margin-bottom:8rem;line-height:1;}
.mods-cta-text p{font-size:14rem;line-height:1.55;color:#948d70;max-width:440rem;}
.mods-cta-providers{display:flex;align-items:center;flex-wrap:wrap;gap:10rem;margin-top:10rem;}
.mods-cta-providers-label{font-family:'Oswald',sans-serif;font-size:13rem;letter-spacing:1.5rem;text-transform:uppercase;color:#999168;margin-right:4rem;}
.mods-cta-provider-icon{width:22rem;height:22rem;object-fit:contain;opacity:.85;transition:opacity .15s;}
.mods-cta-provider-icon:hover{opacity:1;}

.mods-cta-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:10rem;padding:18rem 36rem;background:linear-gradient(180deg, #f0e6d2, #c6be95);color:#262711;border:none;border-radius:8rem;font-family:'Oswald',sans-serif;font-size:14rem;font-weight:700;letter-spacing:2.5rem;text-transform:uppercase;cursor:pointer;box-shadow:0px 0rem 20rem rgb(34 33 15), inset 0 1rem 0 rgba(255, 255, 255, .3);transition:all .25s;position:relative;overflow:hidden;z-index:1;}
.mods-cta-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .6s;}
.mods-cta-btn:hover{transform:translateY(-2rem);box-shadow:0 12rem 40rem rgb(12 9 5), inset 0 1rem 0 rgba(255, 255, 255, .3);}
.mods-cta-btn:hover::before{left:100%;}
.mods-cta-btn svg{width:16rem;height:16rem;}

/* ─── Hero stats — преміальні картки з glow та counter ─── */
.mods-hero-stats{display:flex;gap:24rem;animation:modsFadeUp 1s .8s both;flex-shrink:0;}
.mods-stat{position:relative;display:flex;flex-direction:row;align-items:center;gap:14rem;min-width:140rem;padding:16rem 22rem;border-radius:4rem;backdrop-filter:blur(8rem);transition:all .3s ease;cursor:default;}
.mods-stat::before{content:'';position:absolute;bottom:0;left:12rem;right:12rem;height:1rem;background:linear-gradient(90deg, transparent, rgb(55 55 18), transparent);}
.mods-stat::after{content:'';position:absolute;bottom:0;right:0;width:196rem;height:80rem;border-radius:0 0 4rem 0;pointer-events:none;transition:all .4s ease;}
.mods-stat:hover{transform:translateY(-2rem);}

.mods-stat:hover .mods-stat-icon{color:#5c6121;transform:scale(1.1) rotate(-5deg);}
.mods-stat:hover .mods-stat-num{text-shadow:0 0 20rem #bdb5a2;scale: 1.2;}

/* Corners — absolute, видимі поза межами картки */
.mods-stat-corner{position:absolute;width:10rem;height:10rem;border-color:#cab9a0;border-style:solid;pointer-events:none;opacity:.85;transition:opacity .3s;}
.mods-stat-corner--tl{top:-1rem;left:-1rem;border-width:1rem 0 0 1rem;}
.mods-stat-corner--tr{top:-1rem;right:-1rem;border-width:1rem 1rem 0 0;}
.mods-stat-corner--bl{bottom:-1rem;left:-1rem;border-width:0 0 1rem 1rem;}
.mods-stat-corner--br{bottom:-1rem;right:-1rem;border-width:0 1rem 1rem 0;}
.mods-stat:hover .mods-stat-corner{opacity:1;}

/* Іконка — ліворуч, по центру вертикально */
.mods-stat-icon{flex-shrink:0;width:48rem;height:48rem;display:flex;align-items:center;justify-content:center;color:#b8ae98;transition:all .3s ease;}
.mods-stat-icon svg{width:100%;height:100%;}

/* Текст-обгортка — число + лейбл колонкою */
.mods-stat-text{display:flex;flex-direction:column;gap:4rem;min-width:0;}

/* Число */
.mods-stat-num{font-family:'Oswald',sans-serif;font-size:26rem;font-weight:500;line-height:1;letter-spacing:-1rem;text-align: center;background:linear-gradient(180deg,#fff 0%,#e8dcc8 80%,#c4b89c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;transition:text-shadow .3s ease;font-variant-numeric:tabular-nums;}

/* Лейбл */
.mods-stat-label{font-family:'Oswald',sans-serif;font-size:12rem;font-weight:400;letter-spacing:2rem;text-transform:uppercase;color:rgba(232,220,200,.55);white-space:nowrap;}

/* ============ FILTERS BAR ============ */
/* ============ FEATURED — Топ тижня ============ */
.mods-featured{position:relative;max-width:1400rem;margin:0 auto;padding:0 40rem;z-index:10;}
.mods-section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24rem;}
.mods-section-title{font-family:'Oswald',sans-serif;font-size:32rem;font-weight:500;letter-spacing:2rem;text-transform:uppercase;color:#f0e6d2;line-height:1;display:flex;align-items:center;gap:14rem;}
.mods-section-title::before{content:'';width:4rem;height:28rem;background:#5c6121;box-shadow:0 0 12rem #5c6121;}
.mods-section-sub{font-size:15rem;color:#948d70;letter-spacing:1rem;text-transform:uppercase;font-family:'Oswald',sans-serif;}

.mods-featured-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:18rem;}
.mods-feat{position:relative;height:340rem;border-radius:10rem;overflow:hidden;cursor:pointer;border:1rem solid #1b180f;transition:all .35s cubic-bezier(0.22,1,0.36,1);text-decoration:none;display:block;}
.mods-feat:hover{border-color:#1b180f;scale: 1.03;}
.mods-feat-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(0.22,1,0.36,1);filter:saturate(.85) contrast(1.05);}
.mods-feat:hover .mods-feat-cover{transform:scale(1.08);}
.mods-feat-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,transparent 30%,rgba(8,6,3,.7) 65%,rgba(8,6,3,.95) 100%);}
.mods-feat-content{position:absolute;left:0;right:0;bottom:0;padding:22rem;z-index:2;}
.mods-feat-badges{position:absolute;top:14rem;left:14rem;display:flex;flex-wrap:wrap;gap:6rem;z-index:3;max-width:calc(100% - 110rem);}
.mods-feat-badge{display:inline-flex;align-items:center;gap:6rem;padding:5rem 12rem;border-radius:3rem;font-family:'Oswald',sans-serif;font-size:10rem;font-weight:600;letter-spacing:2rem;text-transform:uppercase;}
.mods-feat-badge--hot{background:rgba(241,97,69,.95);color:#2a0d05;box-shadow:0 0 14rem rgba(241,97,69,.5);}
.mods-feat-badge--new{background:rgba(139,195,74,.95);color:#1a2a08;box-shadow:0 0 14rem rgba(139,195,74,.4);}
.mods-feat-badge--verified{background:rgba(22,165,207,.95);color:#042c3d;box-shadow:0 0 14rem rgba(22,165,207,.5);}
.mods-feat-badge--gsc{background:rgba(255,162,12,.95);color:#1a0e05;box-shadow:0 0 14rem rgba(255,162,12,.5);}
.mods-feat-rank{position:absolute;top:14rem;right:14rem;display:flex;align-items:center;gap:6rem;padding:5rem 11rem;border-radius:3rem;background:rgba(0,0,0,.65);backdrop-filter:blur(8rem);color:#fff;font-family:'Oswald',sans-serif;font-size:11rem;letter-spacing:1rem;z-index:3;}
.mods-feat-rank svg{width:12rem;height:12rem;color:#ffa20c;}
.mods-feat-rank-icon{width:16rem;height:16rem;object-fit:contain;display:block;}
.mods-feat-name{font-family:'Oswald',sans-serif;font-size:24rem;font-weight:600;line-height:1.05;letter-spacing:1rem;text-transform:uppercase;color:#fff;margin-bottom:8rem;text-shadow:0 3rem 14rem rgba(0,0,0,.8);}
.mods-feat--big .mods-feat-name{font-size:34rem;}
.mods-feat-desc{font-size:13rem;line-height:1.45;color:rgba(232,220,200,.85);margin-bottom:10rem;text-shadow:0 2rem 8rem rgba(0,0,0,.9);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.mods-feat--big .mods-feat-desc{font-size:14rem;-webkit-line-clamp:3;}
.mods-feat-footer{display:flex;align-items:center;justify-content:space-between;gap:12rem;flex-wrap:wrap;}
.mods-feat-author{display:flex;align-items:center;gap:8rem;font-size:12rem;color:rgba(232,220,200,.75);min-width:0;}
.mods-feat-author span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mods-feat-author-avatar{width:20rem;height:20rem;border-radius:50%;background:linear-gradient(135deg,#3a3328,#1c1917);background-size:cover;background-position:center;border:1rem solid rgba(232,160,48,.3);flex-shrink:0;}
.mods-feat-author b{color:#ffa20c;font-weight:500;}
.mods-feat-meta{display:flex;align-items:center;gap:14rem;font-family:'Oswald',sans-serif;font-size:11rem;letter-spacing:1rem;color:rgba(232,220,200,.7);flex-shrink:0;}
.mods-feat-meta-item{display:flex;align-items:center;gap:5rem;}
.mods-feat-meta-item svg{width:13rem;height:13rem;}
.mods-feat-meta-item.star{color:#ffa20c;}

.mods-filters-wrap{position:sticky;top:0;margin-top: 28rem;z-index:50;background:rgba(12,9,5,.92);backdrop-filter:blur(14rem);padding:18rem 0;}
.mods-filters{max-width:1400rem;margin:0 auto;padding:0 40rem;display:flex;align-items:center;gap:14rem;}
.mods-search{position:relative;flex:1;max-width:520rem;}
.mods-search input{width:100%;padding:11rem 16rem 11rem 42rem;background:linear-gradient(135deg, rgb(92 97 33 / 0%) 0%, rgb(123 122 93 / 16%) 0%);border:1rem solid #1b180f;border-radius:6rem;color:#948d70;font-family:'Rubik',sans-serif;font-size:13rem;outline:none;transition:all .2s;}
.mods-search input::placeholder{color:#948d70;}
.mods-search input:focus{border-color:#515038;background:linear-gradient(135deg, rgb(92 97 33 / 0%) 0%, rgb(123 122 93 / 16%) 0%);}
.mods-search svg{position:absolute;left:14rem;top:50%;transform:translateY(-50%);width:16rem;height:16rem;color:#c6be95;}

.mods-filters-spacer{flex:1;}
.mods-results-count{font-family:'Oswald',sans-serif;font-size:13rem;letter-spacing:1rem;text-transform:uppercase;color:#948d70;}
.mods-results-count b{color:#c6be95;font-weight:500;font-size:24rem;}

.mods-sort{position:relative;}
.mods-sort-trigger{display:inline-flex;align-items:center;gap:8rem;padding:11rem 16rem;background:linear-gradient(135deg, rgb(92 97 33 / 0%) 0%, rgb(123 122 93 / 16%) 0%);border:1rem solid #1b180f;border-radius:6rem;color:#c6be95;font-family:'Rubik',sans-serif;font-size:14rem;cursor:pointer;transition:all .2s;}
.mods-sort-trigger:hover{border-color:#515038;background:linear-gradient(135deg, rgb(92 97 33 / 0%) 0%, rgb(123 122 93 / 16%) 0%);}
.mods-sort-trigger b{color:#948d70;font-weight:500;}
.mods-sort-trigger > svg:first-child{width:14rem;height:14rem;}
.mods-sort-trigger > svg:last-child{width:12rem;height:12rem;color:#5a564d;}
.mods-sort-menu{position:absolute;top:calc(100% + 6rem);right:0;min-width:200rem;background:linear-gradient(135deg, rgb(92 97 33 / 0%) 0%, rgb(123 122 93 / 16%) 0%);border:1rem solid #515038;border-radius:6rem;box-shadow:0 12rem 30rem rgba(0,0,0,.6);padding:6rem;display:flex;flex-direction:column;gap:2rem;z-index:51;}
.mods-sort-menu[hidden]{display:none;}
.mods-sort-menu button{padding:9rem 14rem;background:transparent;border:none;border-radius:4rem;color:#c6be95;font-family:'Rubik',sans-serif;font-size:13rem;text-align:left;cursor:pointer;transition:all .15s;}
.mods-sort-menu button:hover{background:linear-gradient(135deg, rgb(125 120 85), rgb(92 97 33 / 18%));}
.mods-sort-menu button.active{background:linear-gradient(135deg, rgb(125 120 85), rgb(92 97 33 / 18%));color:#c6be95;}

/* View toggle (сітка/список) */
.mods-view-toggle{display:flex;background:rgba(0,0,0,.4);border:1rem solid #1b180f;border-radius:6rem;overflow:hidden;}
.mods-view-btn{padding:10rem 12rem;background:transparent;border:none;color:#c6be95;cursor:pointer;transition:all .2s;display:flex;align-items:center;}
.mods-view-btn svg{width:16rem;height:16rem;}
.mods-view-btn:hover{color:#e8dcc8;}
.mods-view-btn.active{background:linear-gradient(135deg, rgb(92 97 33 / 0%) 0%, rgb(123 122 93 / 16%) 0%);color:#c6be95;}

/* ---- LIST VIEW ---- */
.mods-grid.is-list{grid-template-columns:1fr;gap:12rem;}
.mods-grid.is-list .mods-card-inner{display:grid;grid-template-columns:240rem 1fr;align-items:stretch;}
.mods-grid.is-list .mods-card-cover{aspect-ratio:auto;height:100%;min-height:130rem;}
.mods-grid.is-list .mods-card-body{display:flex;flex-direction:column;justify-content:center;border-top:none;border-left:1rem solid rgba(232,160,48,.1);}
.mods-grid.is-list .mods-card-body::before{top:14rem;bottom:14rem;left:0;right:auto;width:1rem;height:auto;background:linear-gradient(180deg,transparent,rgba(255,162,12,.4),transparent);}
.mods-grid.is-list .mods-card-desc{-webkit-line-clamp:2;}

/* ============ CATALOG layout ============ */
.mods-catalog{max-width:1400rem;margin:0 auto;padding:28rem 40rem 80rem;display:grid;grid-template-columns:260rem 1fr;gap:28rem;align-items:start;}

/* ---- SIDEBAR ---- */
.mods-side{position:sticky;top:80rem;display:flex;flex-direction:column;gap:22rem;}
.mods-side-block{background:linear-gradient(135deg, rgb(92 97 33 / 0%) 0%, rgb(123 122 93 / 16%) 0%);border:1rem solid #1b180f;border-radius:8rem;padding:12rem 18rem;position:relative;}
.mods-side-block::before{content:'';position:absolute;top:1rem;left:14rem;right:14rem;height:1rem;background:linear-gradient(90deg, transparent, #77734e, transparent);}
.mods-side-head{font-size:21rem;text-transform:uppercase;color:#6b684f;margin-bottom:12rem;display:flex;align-items:center;justify-content:space-between;gap:12rem;}
.mods-side-head span{font-family:'Oswald',sans-serif;font-weight: 700;letter-spacing: 1.1rem;}
.mods-side-clear{display:inline-flex;align-items:center;gap:5rem;padding:4rem 9rem 4rem 8rem;font-family:'Oswald',sans-serif;font-size:10rem;font-weight:500;letter-spacing:1.2rem;text-transform:uppercase;color:#948d70;background:rgba(125,120,85,.08);border:1rem solid rgba(125,120,85,.25);border-radius:3rem;cursor:pointer;text-decoration:none;transition:all .15s ease;flex-shrink:0;}
.mods-side-clear::before{content:'';width:8rem;height:8rem;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 6L6 18M6 6l12 12' stroke='%23948d70' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;flex-shrink:0;transition:transform .2s ease;}
.mods-side-clear:hover{color:#c6be95;background:rgba(125,120,85,.18);border-color:rgba(125,120,85,.5);}
.mods-side-clear:hover::before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 6L6 18M6 6l12 12' stroke='%23c6be95' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");transform:rotate(90deg);}
.mods-side-clear.is-hidden{display:none;}

.mods-cats-list{display:flex;flex-direction:column;gap:2rem;margin:-4rem;}
.mods-cats-item{display:flex;align-items:center;justify-content:space-between;padding:9rem 12rem;border-radius:4rem;font-size:15rem;color:#948d70;cursor:pointer;transition:all .15s;font-family:'Rubik',sans-serif;text-decoration:none;}
.mods-cats-item:hover{background:rgb(63 61 39 / 42%);color:#e8dcc8;scale: 1.06;}
.mods-cats-item.active{background:linear-gradient(135deg, rgb(125 120 85), rgb(92 97 33 / 18%));color:#c6be95;font-weight:500;}
.mods-cats-item.active::before{content:'';width:3rem;height:18rem;background:#c6be95;border-radius:2rem;margin-right:-3rem;margin-left:-12rem;box-shadow:0 0 8rem #a09b76;}
.mods-cats-item-count{font-family:'Oswald',sans-serif;font-size:11rem;letter-spacing:.5rem;background:#716c4d;padding:2rem 7rem;border-radius:10rem;color:#0c0905;}
.mods-cats-item.active .mods-cats-item-count{background:#c6be95;color:#0c0905;}

.mods-checks{display:flex;flex-direction:column;gap:8rem;}
.mods-check{display:flex;align-items:center;gap:9rem;cursor:pointer;user-select:none;font-size:14rem;color:#b4af9a;transition:color .15s;text-decoration:none;}
.mods-check:hover{color:#e8dcc8;}
.mods-check-box{width:16rem;height:16rem;border-radius:3rem;background:#22210f;border:1rem solid #77734e;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;}
.mods-check.on .mods-check-box{background:#5c6121;border-color:#5c6121;}
.mods-check-box svg{width:10rem;height:10rem;color:#1a0e05;opacity:0;}
.mods-check.on .mods-check-box svg{opacity:1;}
.mods-check-img{width:14rem;height:14rem;display:inline-flex;align-items:center;justify-content:center;}
.mods-check-img img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(.8);opacity:.7;}
.mods-check.on .mods-check-img img{opacity:1;}

.mods-status-verified{color:#16A5CF;}
.mods-status-hot{color:#F16145;}
.mods-status-new{color:#8BC34A;}
.mods-status-gsc{color:#ffa20c;}

/* ============ MODS GRID ============ */
.mods-grid-wrap{min-width:0;}
.mods-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20rem;}

.mods-card{position:relative;background:linear-gradient(180deg,#1c1a17 0%,#0e0c09 100%);border-radius:4rem;cursor:pointer;text-decoration:none;color:inherit;display:block;}
.mods-card::before{content:'';position:absolute;inset:0;border:1rem solid #1b180f;border-radius:4rem;pointer-events:none;transition:all .35s;z-index:5;}
.mods-card::after{content:'';position:absolute;inset:-2rem;border-radius:5rem;background:linear-gradient(135deg, transparent 20%, rgb(92 97 33) 50%, transparent 80%);opacity:0;transition:opacity .35s;z-index:1;pointer-events:none;}

.mods-card:hover::after{opacity:1;}

.mods-card-inner{position:relative;z-index:2;background:linear-gradient(180deg,#1c1a17 0%,#0e0c09 100%);border-radius:4rem;overflow:hidden;}

.mods-card-corner{position:absolute;width:14rem;height:14rem;z-index:6;pointer-events:none;opacity:.5;transition:all .35s;}
.mods-card-corner--tl{top:6rem;left:6rem;border-top:1.5rem solid #c6be95;border-left:1.5rem solid #c6be95;}
.mods-card-corner--tr{top:6rem;right:6rem;border-top:1.5rem solid #c6be95;border-right:1.5rem solid #c6be95;}
.mods-card-corner--bl{bottom:6rem;left:6rem;border-bottom:1.5rem solid #c6be95;border-left:1.5rem solid #c6be95;}
.mods-card-corner--br{bottom:6rem;right:6rem;border-bottom:1.5rem solid #c6be95;border-right:1.5rem solid #c6be95;}
.mods-card:hover .mods-card-corner{opacity: .5;width:18rem;height:18rem;}

.mods-card-cover{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0a0805;}
.mods-card-cover img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(0.22,1,0.36,1),filter .35s;filter:saturate(.9) contrast(1.05) brightness(.92);}
.mods-card:hover .mods-card-cover img{transform:scale(1.12);filter:saturate(1.1) contrast(1.1) brightness(1);}
.mods-card-cover::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2rem,rgba(0,0,0,.08) 2rem,rgba(0,0,0,.08) 3rem);pointer-events:none;z-index:2;opacity:.4;}
.mods-card-cover::after{content:'';position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(180deg,transparent 0%,rgba(14,12,9,.4) 40%,rgba(14,12,9,.95) 100%);pointer-events:none;z-index:2;}

.mods-card-title-overlay{position:absolute;left:0;right:0;bottom:0;padding:12rem 14rem 10rem;z-index:3;}
.mods-card-name{font-family:'Oswald',sans-serif;font-size:17rem;font-weight:600;color:#fff;line-height:1.15;letter-spacing:.5rem;text-transform:uppercase;text-shadow:0 2rem 12rem rgba(0,0,0,.95);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;}

.mods-card-badges{position:absolute;top:10rem;left:10rem;display:flex;flex-wrap:wrap;gap:5rem;z-index:4;max-width:calc(100% - 90rem);}
.mods-card-badge{display:inline-flex;align-items:center;gap:5rem;padding:5rem 10rem;border-radius:2rem;font-family:'Oswald',sans-serif;font-size:10rem;font-weight:600;letter-spacing:1.5rem;text-transform:uppercase;backdrop-filter:blur(4rem);}
.mods-card-badge--hot{background:rgba(241,97,69,.95);color:#2a0d05;box-shadow:0 0 12rem rgba(241,97,69,.5),inset 0 1rem 0 rgba(255,255,255,.2);}
.mods-card-badge--new{background:rgba(139,195,74,.95);color:#1a2a08;box-shadow:0 0 12rem rgba(139,195,74,.5),inset 0 1rem 0 rgba(255,255,255,.2);}
.mods-card-badge--verified{background:rgba(22,165,207,.95);color:#042c3d;box-shadow:0 0 12rem rgba(22,165,207,.5),inset 0 1rem 0 rgba(255,255,255,.2);}
.mods-card-badge--gsc{background:linear-gradient(135deg,#ffb54e,#e0aa3c);color:#1a0e05;box-shadow:0 0 14rem rgba(255,162,12,.6),inset 0 1rem 0 rgba(255,255,255,.4);}

.mods-card-version{position:absolute;top:10rem;right:10rem;padding:5rem 9rem;background:rgba(12,9,5,.85);backdrop-filter:blur(6rem);border:1rem solid rgba(232,160,48,.35);border-radius:2rem;color:#ffa20c;font-family:'Oswald',sans-serif;font-size:11rem;font-weight:500;letter-spacing:.8rem;z-index:4;text-shadow:0 0 8rem rgba(255,162,12,.5);}

.mods-card-cat-overlay{position:absolute;top:42rem;right:10rem;padding:3rem 8rem;background:rgba(0,0,0,.65);backdrop-filter:blur(6rem);border-radius:2rem;color:rgba(232,220,200,.85);font-family:'Oswald',sans-serif;font-size:9rem;letter-spacing:1.5rem;text-transform:uppercase;z-index:4;}

.mods-card-body{padding:14rem 16rem;background:#1d1b13;position:relative;}
.mods-card-body::before{content:'';position:absolute;top:0;left:14rem;right:14rem;height:1rem;background:linear-gradient(90deg, transparent, #77734e, transparent);}

.mods-card-author{display:flex;align-items:center;gap:7rem;margin-bottom:10rem;font-size:14rem;color:#b4af9a;}
.mods-card-author-avatar{width:28rem;height:28rem;border-radius:100%;background:#1b180f;background-size:cover;background-position:center;border:1rem solid #1b180f;flex-shrink:0;}
.mods-card-author b{color:#ffa20c;font-weight:500;}

.mods-card-desc{font-size:14rem;line-height:1.5;color:#948d70;margin-bottom:14rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38rem;}

.mods-card-stats{display:flex;align-items:center;justify-content:space-between;gap:8rem;padding-top:10rem;border-top:1rem solid rgba(55,52,45,.5);}
.mods-card-stat-left{display:flex;align-items:center;gap:12rem;}

.mods-card-rating{display:flex;align-items:center;gap:6rem;}
.mods-card-stars{display:flex;gap:1rem;}
.mods-card-star{width:11rem;height:11rem;color:rgba(255,162,12,.25);}
.mods-card-star.on{color:#ffa20c;filter:drop-shadow(0 0 3rem rgba(255,162,12,.6));}
.mods-card-rating-num{font-family:'Oswald',sans-serif;font-size:12rem;font-weight:600;color:#ffa20c;letter-spacing:.5rem;}

.mods-card-dl{display:flex;align-items:center;gap:5rem;font-family:'Oswald',sans-serif;font-size:11rem;color:#b4af9a;letter-spacing:.5rem;}
.mods-card-dl svg{width:12rem;height:12rem;}

.mods-card-platforms{display:flex;gap:3rem;align-items:center;padding:4rem 8rem;background:rgba(0,0,0,.5);border:1rem solid rgba(232,160,48,.15);border-radius:3rem;}
.mods-card-platform{width:14rem;height:14rem;display:flex;align-items:center;justify-content:center;}
.mods-card-platform img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(.95);opacity:.7;transition:opacity .2s;}
.mods-card:hover .mods-card-platform img{opacity:1;}

/* ============ EMPTY STATE ============ */
.mods-empty{padding:80rem 40rem;text-align:center;background:linear-gradient(180deg,#15120e,#0c0a07);border:1rem dashed rgba(232,160,48,.18);border-radius:10rem;}
.mods-empty-icon{display:inline-flex;align-items:center;justify-content:center;width:72rem;height:72rem;border-radius:50%;background:rgba(255,162,12,.08);border:1rem solid rgba(232,160,48,.25);color:#ffa20c;margin-bottom:20rem;}
.mods-empty-icon svg{width:32rem;height:32rem;}
.mods-empty h3{font-family:'Oswald',sans-serif;font-size:22rem;letter-spacing:1.5rem;text-transform:uppercase;color:#fff;margin-bottom:8rem;}
.mods-empty p{font-size:13rem;color:#b4af9a;margin-bottom:24rem;}
.mods-empty-reset{display:inline-block;padding:11rem 22rem;background:rgba(255,162,12,.1);border:1rem solid #ffa20c;color:#ffa20c;border-radius:6rem;font-family:'Oswald',sans-serif;font-size:12rem;letter-spacing:1.5rem;text-transform:uppercase;text-decoration:none;transition:all .2s;}
.mods-empty-reset:hover{background:#ffa20c;color:#1a0e05;}

/* ============ PAGINATION ============ */
.mods-pagination{margin-top:40rem;display:flex;align-items:center;justify-content:center;gap:6rem;flex-wrap:wrap;}
.mods-page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:36rem;height:36rem;padding:0 11rem;background:rgba(28,25,23,.7);border:1rem solid #37342d;border-radius:4rem;color:#b4af9a;font-family:'Oswald',sans-serif;font-size:13rem;font-weight:500;letter-spacing:.5rem;cursor:pointer;text-decoration:none;transition:all .2s;}
.mods-page-btn:hover{border-color:rgba(232,160,48,.5);color:#e8dcc8;}
.mods-page-btn.active{background:#1d1b13;border-color:#716c4d;color:#c6be95;cursor:default;}
.mods-page-btn svg{width:14rem;height:14rem;}
.mods-page-gap{color:#5a564d;padding:0 4rem;font-family:'Oswald',sans-serif;}

/* ============ RESPONSIVE — мобільна базова адаптація ============ */
/* УВАГА: media queries у px (не rem!) — у проєкті html { font-size: calc(100vw/1920) }
   тому 1rem прив'язаний до viewport. Якщо тут поставити rem, breakpoint буде
   ділитись на сам себе і вмикатись ЗАВЖДИ. Це була причина бага в попередньому фіксі. */
@media (max-width: 1150px){
  .mods-hero{min-height:auto;}
  .mods-hero-content{padding:60rem 20rem 40rem;}
  .mods-hero-snork{display:none;}
  .mods-hero-top-row{flex-direction:column;gap:20rem;max-width:none;}
  .mods-hero-desc-row{flex-direction:column;align-items:flex-start;gap:24rem;}
  .mods-hero-eyebrow{order:-1;margin-top:0;align-self:flex-start;}
  .mods-hero-title{font-size:64rem;}
  .mods-hero-cta-block{flex-direction:column;text-align:center;padding:24rem 20rem;}
  .mods-cta-buttons{width:100%;justify-content:center;}
  .mods-cta-btn,.mods-cta-link{flex:1;justify-content:center;min-width:140rem;}
  .mods-hero-stats{gap:10rem;flex-wrap:wrap;}
  .mods-stat{padding:14rem 18rem 12rem;min-width:110rem;flex:1 1 auto;}
  .mods-stat-num{font-size:32rem;}

  .mods-filters{padding:0 20rem;flex-wrap:wrap;}
  .mods-search{max-width:none;flex:1 1 100%;}
  .mods-results-count{display:none;}

  .mods-catalog{grid-template-columns:1fr;padding:20rem;gap:18rem;}
  .mods-side{position:static;}
  .mods-grid{grid-template-columns:repeat(2,1fr);gap:14rem;}

  .mods-featured{padding:0 20rem;margin:40rem auto;}
  .mods-featured-grid{grid-template-columns:1fr;gap:14rem;}
  .mods-feat{height:240rem;}
  .mods-feat--big .mods-feat-name{font-size:26rem;}
}

@media (max-width: 650px){
  .mods-hero-title{font-size:48rem;}
  .mods-grid{grid-template-columns:1fr;}
}

/* ============ UPLOAD MODAL ============ */
.mod-upload-overlay{position:fixed;inset:0;z-index:9999;background:rgba(6,4,2,.85);backdrop-filter:blur(8rem);display:flex;align-items:flex-start;justify-content:center;padding:40rem 20rem;overflow-y:auto;}
.mod-upload-overlay[hidden]{display:none;}
.mod-upload-modal{position:relative;width:100%;max-width:680rem;background:#1d1b13;border:1rem solid #1b180f;border-radius:12rem;padding:32rem;box-shadow:0 30rem 80rem rgba(0,0,0,.7);}
.mod-upload-modal::before{content:'';position:absolute;top:0;left:32rem;right:32rem;height:2rem;background:linear-gradient(90deg, transparent, #77734e, transparent);}
.mod-upload-close{position:absolute;top:18rem;right:18rem;width:34rem;height:34rem;display:flex;align-items:center;justify-content:center;border:1rem solid #332f24;border-radius:6rem;color:#b4af9a;cursor:pointer;transition:all .2s;z-index:10;}
.mod-upload-close:hover{border-color:#F16145;color:#F16145;}
.mod-upload-close svg{width:16rem;height:16rem;}
.mod-upload-head{margin-bottom:24rem;}
.mod-upload-title{font-family:'Oswald',sans-serif;font-size:28rem;font-weight:600;letter-spacing:1.5rem;text-transform:uppercase;color:#f0e6d2;margin-bottom:6rem;padding-right:50rem;}
.mod-upload-sub{font-size:13rem;color:#b4af9a;}

.mod-upload-drop{position:relative;border:2rem dashed #807852;border-radius:10rem;background:rgba(0,0,0,.25);transition:all .25s;cursor:pointer;}
.mod-upload-drop.dragover{border-color:#ffa20c;background:rgba(255,162,12,.08);}
.mod-upload-drop-inner{display:flex;flex-direction:column;align-items:center;gap:8rem;padding:36rem 20rem;text-align:center;}
.mod-upload-drop-inner svg{width:42rem;height:42rem;color:#c6be95;opacity:.8;}
.mod-upload-drop-text{font-size:16rem;color:#c6be95;}
.mod-upload-drop-text span{color:#807852;text-decoration:underline;}
.mod-upload-drop-hint{font-size:11rem;color:#ea5e43;font-family:'Oswald',sans-serif;letter-spacing:1rem;text-transform:uppercase;}
.mod-upload-file-chosen{display:flex;align-items:center;justify-content:space-between;gap:12rem;padding:16rem 20rem;}
.mod-upload-file-name{font-family:'Oswald',sans-serif;font-size:16rem;color:#7b7f25;letter-spacing:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mod-upload-file-remove{width:26rem;height:26rem;flex-shrink:0;background:rgba(241,97,69,.15);border:1rem solid rgba(241,97,69,.4);border-radius:5rem;color:#F16145;font-size:18rem;line-height:1;cursor:pointer;transition:all .2s;}
.mod-upload-file-remove:hover{background:#F16145;color:#fff;}

.mod-upload-or{display:flex;align-items:center;gap:14rem;text-align:center;font-family:'Oswald',sans-serif;font-size:14rem;letter-spacing:1rem;text-transform:uppercase;color:#f0e6d2;margin:16rem 0;}
.mod-upload-or::before,.mod-upload-or::after{content:'';flex:1;height:1rem;background:#332f24;}

.mod-upload-ext{display:flex;gap:8rem;margin-bottom:8rem;}
.mod-upload-ext .mod-upload-select{flex:0 0 140rem;}
.mod-upload-ext .mod-upload-input[type="url"]{flex:1;}

/* Multi-external (декілька дзеркал) */
.mod-upload-ext-list{display:flex;flex-direction:column;gap:8rem;margin-bottom:8rem;}
.mod-upload-ext-row{display:flex;gap:8rem;align-items:stretch;}
.mod-upload-ext-row .mod-upload-select{flex:0 0 140rem;}
.mod-upload-ext-row .mod-upload-input[type="url"]{flex:1;min-width:0;}
.mod-upload-ext-remove{flex:0 0 36rem;display:inline-flex;align-items:center;justify-content:center;background:rgba(241,97,69,.08);border:1rem solid rgba(241,97,69,.3);border-radius:4rem;color:#F16145;font-size:20rem;line-height:1;cursor:pointer;padding:0;transition:all .15s;}
.mod-upload-ext-remove:hover{background:rgba(241,97,69,.2);border-color:#F16145;}
.mod-upload-ext-row:first-child .mod-upload-ext-remove{display:none;} /* перший рядок не можна прибрати */
.mod-upload-ext-list.has-many .mod-upload-ext-row:first-child .mod-upload-ext-remove{display:inline-flex;} /* коли більше одного — можна прибрати усі */

.mod-upload-ext-add{display:flex;align-items:center;justify-content:center;gap:6rem;width:100%;padding:12rem 14rem;background:rgba(0,0,0,.25);border:1rem dashed #807852;border-radius:4rem;color:#807852;font-family:'Oswald',sans-serif;font-size:13rem;letter-spacing:1.5rem;text-transform:uppercase;cursor:pointer;transition:all .15s;margin-bottom:8rem;}
.mod-upload-ext-add:hover{background:#11100b;border-color:#7b7f25;color:#7b7f25;}
.mod-upload-ext-add svg{width:12rem;height:12rem;}

.mod-upload-label{display:block;font-family:'Oswald',sans-serif;font-size:14rem;letter-spacing:1.5rem;text-transform:uppercase;color:#f0e6d2;margin:16rem 0 6rem;}
.mod-upload-required{color:#F16145;font-weight:600;margin-left:2rem;}

/* Tag picker — chip selector */
.mod-tag-picker{display:flex;flex-direction:column;gap:10rem;}
.mod-tag-suggestions{display:flex;flex-wrap:wrap;gap:6rem;}
.mod-tag-chip{display:inline-flex;align-items:center;padding:6rem 12rem;background:rgba(0,0,0,.4);border:1rem solid #332f24;border-radius:14rem;color:#b4af9a;font-family:'Rubik',sans-serif;font-size:13rem;cursor:pointer;transition:all .15s ease;}
.mod-tag-chip:hover{border-color:#7b7f25;color:#7b7f25;}
.mod-tag-chip.is-active{background:#7b7f25;color:#070403;border: none;font-weight: 500;}
.mod-tag-custom .mod-tag-input{width:100%;max-width:340rem;}
.mod-tag-selected{margin-top:4rem;padding:12rem 10rem;background:rgba(0,0,0,.25);border:1rem dashed #807852;border-radius:6rem;display:flex;align-items:center;gap:10rem;flex-wrap:wrap;}
.mod-tag-selected-label{font-family:'Oswald',sans-serif;font-size:13rem;letter-spacing:1.5rem;text-transform:uppercase;color:#f0e6d2;}
.mod-tag-selected-list{display:inline-flex;flex-wrap:wrap;gap:6rem;}
.mod-tag-selected-item{display:inline-flex;align-items:center;gap:6rem;padding:4rem 8rem 4rem 10rem;background:#7b7f25;color:#070403;border-radius:12rem;font-family:'Rubik',sans-serif;font-size:13rem;font-weight:600;}
.mod-tag-selected-item button{display:inline-flex;align-items:center;justify-content:center;width:16rem;height:16rem;background:rgba(0,0,0,.2);border:none;border-radius:50%;color:#1a0e05;cursor:pointer;font-size:14rem;line-height:1;padding:0;transition:background .15s;}
.mod-tag-selected-item button:hover{background:rgba(0,0,0,.4);}
.mod-upload-input{width:100%;padding:11rem 14rem;background:rgba(0,0,0,.4);border:1rem solid #332f24;border-radius:6rem;color:#999168;font-family:'Rubik',sans-serif;font-size:13rem;outline:none;transition:border-color .2s;}
.mod-upload-input::placeholder{color:#999168;}
.mod-upload-input:focus{border-color:#807852;}
.mod-upload-textarea{min-height:260rem;resize:vertical;}

/* ─── Markdown editor (toolbar + textarea) ─── */
.md-editor{display:flex;flex-direction:column;}
.md-toolbar{display:flex;flex-wrap:wrap;gap:4rem;padding:6rem 8rem;background:rgba(0,0,0,.35);border:1rem solid #332f24;border-bottom:none;border-radius:4rem 4rem 0 0;}
.md-tb-btn{display:inline-flex;align-items:center;justify-content:center;min-width:28rem;height:26rem;padding:0 8rem;background:transparent;border:1rem solid transparent;border-radius:3rem;color:#b4af9a;font-family:'Rubik',sans-serif;font-size:12rem;cursor:pointer;transition:all .12s;}
.md-tb-btn:hover{background:rgba(255,162,12,.12);border-color:rgba(255,162,12,.35);color:#ffa20c;}
.md-tb-btn:active{transform:translateY(1rem);}
.md-tb-btn b,.md-tb-btn i,.md-tb-btn u,.md-tb-btn s{font-style:normal;font-weight:normal;font-size:13rem;line-height:1;}
.md-tb-btn b{font-weight:700;}
.md-tb-btn i{font-style:italic;font-family:Georgia,serif;}
.md-tb-btn u{text-decoration:underline;}
.md-tb-btn s{text-decoration:line-through;}
.md-tb-sep{width:1rem;background:#37342d;margin:0 4rem;}
.md-textarea{border-radius:0 0 4rem 4rem !important;font-family:'Rubik',Menlo,monospace;}
.md-hint{margin-top:4rem;font-size:13rem;color:#f0e6d2;line-height:1.5;}
.md-hint code{color:#c6be95;padding:1rem 4rem;border-radius:2rem;font-family:Menlo,monospace;font-size:13rem;}
.mod-upload-select{cursor:pointer;color-scheme:dark;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffa20c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 14rem center;background-size:12rem;padding-right:36rem;}
.mod-upload-select option{background:#15120e;color:#e8dcc8;}
.mod-upload-select option:checked,.mod-upload-select option:hover{background:#a29c7a;color:#1a0e05;}
.mod-upload-row{display:flex;gap:14rem;}
.mod-upload-col{flex:1;}
.mod-upload-col--narrow{flex:0 0 130rem;}

.mod-upload-plats{display:flex;gap:12rem;}
.mod-upload-plat{display:flex;align-items:center;gap:8rem;padding:10rem 16rem;background:rgba(0,0,0,.4);border:1rem solid #332f24;border-radius:6rem;cursor:pointer;font-size:13rem;color:#e8dcc8;transition:all .2s;}
.mod-upload-plat:hover{border-color:#807852;}
.mod-upload-plat input{display:none;}
.mod-upload-plat-box{width:16rem;height:16rem;border-radius:3rem;border:1rem solid #5a564d;flex-shrink:0;transition:all .2s;position:relative;}
.mod-upload-plat input:checked ~ .mod-upload-plat-box{background:#7b7f25;border-color:#7b7f25;}
.mod-upload-plat input:checked ~ .mod-upload-plat-box::after{content:'';position:absolute;left:5rem;top:2rem;width:4rem;height:8rem;border:solid #1a0e05;border-width:0 2rem 2rem 0;transform:rotate(45deg);}
.mod-upload-plat img{width:14rem;height:14rem;filter:brightness(0) invert(.9);opacity:.8;}

.mod-upload-actions{display:flex;gap:12rem;justify-content:flex-end;margin-top:28rem;}
.mod-upload-cancel{padding:12rem 24rem;background:transparent;border:1rem solid #37342d;border-radius:6rem;color:#b4af9a;font-family:'Oswald',sans-serif;font-size:12rem;letter-spacing:1.5rem;text-transform:uppercase;cursor:pointer;transition:all .2s;}
.mod-upload-cancel:hover{border-color:#b4af9a;color:#e8dcc8;}
.mod-upload-submit{padding:12rem 28rem;background:linear-gradient(180deg,#ffb54e,#e8920b);border:none;border-radius:6rem;color:#1a0e05;font-family:'Oswald',sans-serif;font-size:12rem;font-weight:700;letter-spacing:1.5rem;text-transform:uppercase;cursor:pointer;transition:all .2s;box-shadow:0 6rem 20rem rgba(255,162,12,.4);}
.mod-upload-submit:hover{transform:translateY(-2rem);}
.mod-upload-submit:disabled{opacity:.6;cursor:not-allowed;transform:none;}

.mod-upload-progress{margin-top:16rem;height:6rem;background:rgba(0,0,0,.4);border-radius:3rem;overflow:hidden;}
.mod-upload-progress[hidden]{display:none;}
.mod-upload-progress-bar{height:100%;width:0;background:linear-gradient(90deg,#e8920b,#ffb54e);transition:width .2s;box-shadow:0 0 12rem rgba(255,162,12,.5);}

.mod-upload-msg{margin-top:16rem;padding:12rem 16rem;border-radius:6rem;font-size:13rem;}
.mod-upload-msg[hidden]{display:none;}
.mod-upload-msg.error{background:rgba(241,97,69,.12);border:1rem solid rgba(241,97,69,.4);color:#F16145;}
.mod-upload-msg.success{background:rgba(139,195,74,.12);border:1rem solid rgba(139,195,74,.4);color:#8BC34A;}

@media (max-width: 650px){
  .mod-upload-modal{padding:24rem 18rem;}
  .mod-upload-row{flex-direction:column;gap:0;}
  .mod-upload-col--narrow{flex:1;}
  .mod-upload-ext{flex-direction:column;}
  .mod-upload-ext .mod-upload-select{flex:1;}
  .mod-upload-plats{flex-direction:column;}
}

/* ---- Upload: зображення ---- */
.mod-img-field{margin-bottom:4rem;}
.mod-cover-zone{border:2rem dashed #807852;border-radius:8rem;background:rgba(0,0,0,.25);overflow:hidden;cursor:pointer;transition:all .25s;}
.mod-cover-zone.dragover{border-color:#ffa20c;background:rgba(255,162,12,.08);}
.mod-cover-empty{display:flex;align-items:center;gap:12rem;padding:18rem 20rem;color:#c6be95;}
.mod-cover-empty svg{width:36rem;height:36rem;color:#c6be95;opacity:.8;flex-shrink:0;}
.mod-cover-empty span{font-size:13rem;display:flex;flex-direction:column;gap:3rem;}
.mod-cover-empty small{color:#ea5e43;font-family:'Oswald',sans-serif;letter-spacing:.5rem;}
.mod-cover-preview{position:relative;}
.mod-cover-preview img{width:100%;height:160rem;object-fit:cover;display:block;}
.mod-cover-remove{position:absolute;top:8rem;right:8rem;width:28rem;height:28rem;background:rgba(6,4,2,.8);border:1rem solid rgba(241,97,69,.5);border-radius:5rem;color:#F16145;font-size:18rem;line-height:1;cursor:pointer;transition:all .2s;}
.mod-cover-remove:hover{background:#F16145;color:#fff;}

.mod-shots-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8rem;}
.mod-shot-item{position:relative;aspect-ratio:16/10;border-radius:6rem;overflow:hidden;border:1rem solid #37342d;}
.mod-shot-item img{width:100%;height:100%;object-fit:cover;}
.mod-shot-remove{position:absolute;top:4rem;right:4rem;width:22rem;height:22rem;background:rgba(6,4,2,.85);border:1rem solid rgba(241,97,69,.5);border-radius:4rem;color:#F16145;font-size:14rem;line-height:1;cursor:pointer;}
.mod-shot-remove:hover{background:#F16145;color:#fff;}
.mod-shots-add{aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4rem;background:rgba(0,0,0,.25);border:2rem dashed #807852;border-radius:6rem;color:#b4af9a;cursor:pointer;transition:all .2s;font-family:'Oswald',sans-serif;font-size:13rem;letter-spacing:1rem;text-transform:uppercase;}
.mod-shots-add:hover{border-color:#7b7f25;color:#7b7f25;}
.mod-shots-add svg{width:20rem;height:20rem;}
.mod-shots-add.hidden{display:none;}
.mod-shots-hint{font-size:10rem;color:#5a564d;font-family:'Oswald',sans-serif;letter-spacing:1rem;text-transform:uppercase;margin-top:6rem;}

.mods-cta-buttons{display:flex;align-items:center;gap:12rem;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;z-index: 2;}
.mods-cta-link{display:inline-flex;align-items:center;gap:10rem;padding:18rem 28rem;background:linear-gradient(101deg, #4b4a33, #2d2c18);border-radius:8rem;color:#c6be95;text-decoration:none;font-family:'Oswald',sans-serif;font-size:14rem;font-weight:600;letter-spacing:2.5rem;text-transform:uppercase;transition:all .25s;cursor:pointer;}

.mods-cta-link svg{width:16rem;height:16rem;}

/* Попередження про модерацію в модалці завантаження */
.mod-upload-note{display:flex;gap:10rem;padding:14rem 16rem;border:1rem solid #332f24;border-radius:6rem;color:#c6be95;font-size:14rem;line-height:1.55;margin-bottom:24rem;}
.mod-upload-note svg{width:18rem;height:18rem;color:#5c6121;flex-shrink:0;margin-top:4rem;}
.mod-upload-note b{color:#F44336;}
.mod-upload-rules-link{color:#5b6020;text-decoration:underline;font-weight:500;}
.mod-upload-rules-link:hover{text-decoration-color:#ffa20c;}

/* ============ CONFIRM MODAL (універсальна) ============ */
.mod-confirm-overlay{position:fixed;inset:0;z-index:10000;background:rgba(6,4,2,.85);backdrop-filter:blur(8rem);display:flex;align-items:center;justify-content:center;padding:20rem;animation:modConfirmFade .15s ease;}
.mod-confirm-overlay[hidden]{display:none;}
@keyframes modConfirmFade{from{opacity:0;}to{opacity:1;}}

.mod-confirm-modal{position:relative;width:100%;max-width:440rem;background:linear-gradient(180deg,#15120e 0%,#0c0a07 100%);border:1rem solid rgba(232,160,48,.3);border-radius:12rem;padding:32rem 28rem 24rem;box-shadow:0 30rem 80rem rgba(0,0,0,.75);text-align:center;animation:modConfirmPop .25s cubic-bezier(0.22,1,0.36,1);}
.mod-confirm-modal::before{content:'';position:absolute;top:0;left:32rem;right:32rem;height:1rem;background:linear-gradient(90deg,transparent,rgba(255,162,12,.6),transparent);}
@keyframes modConfirmPop{from{opacity:0;transform:translateY(-12rem) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}

.mod-confirm-icon{width:56rem;height:56rem;margin:0 auto 18rem;border-radius:50%;background:rgba(255,162,12,.1);border:1rem solid rgba(255,162,12,.35);display:flex;align-items:center;justify-content:center;color:#ffa20c;}
.mod-confirm-icon svg{width:26rem;height:26rem;}
.mod-confirm-icon.danger{background:rgba(241,97,69,.1);border-color:rgba(241,97,69,.4);color:#F16145;}

.mod-confirm-title{font-family:'Oswald',sans-serif;font-size:22rem;font-weight:600;letter-spacing:1rem;color:#fff;margin:0 0 10rem;line-height:1.2;}
.mod-confirm-message{font-size:14rem;line-height:1.55;color:#b4af9a;margin:0 0 24rem;}

.mod-confirm-actions{display:flex;gap:10rem;justify-content:center;}
.mod-confirm-cancel,.mod-confirm-ok{padding:12rem 24rem;border-radius:6rem;font-family:'Oswald',sans-serif;font-size:13rem;font-weight:600;letter-spacing:1.5rem;text-transform:uppercase;cursor:pointer;transition:all .2s;border:1rem solid #37342d;line-height:1;}
.mod-confirm-cancel{background:transparent;color:#b4af9a;flex:0 1 auto;min-width:120rem;}
.mod-confirm-cancel:hover{border-color:#b4af9a;color:#e8dcc8;}
.mod-confirm-ok{background:linear-gradient(180deg,#ffb54e,#e8920b);color:#1a0e05;border:none;flex:0 1 auto;min-width:140rem;box-shadow:0 6rem 18rem rgba(255,162,12,.4);}
.mod-confirm-ok:hover{transform:translateY(-2rem);box-shadow:0 10rem 24rem rgba(255,162,12,.55);}
.mod-confirm-ok.danger{background:linear-gradient(180deg,#ff7a5c,#d84a2e);box-shadow:0 6rem 18rem rgba(241,97,69,.45);color:#fff;}
.mod-confirm-ok.danger:hover{box-shadow:0 10rem 24rem rgba(241,97,69,.6);}