/* ==========================================================================
   FLEXBODY REPOSITORY — концепт сайта репозитория модов.
   База: админ-панель CloudSave (glassmorphism, Artegra Sans, синий акцент)
   + структура из FlexbodySite-концепта. Референс раскладки: Steam Workshop.
   Один файл на весь сайт: страницы статические, JS минимальный.
   ========================================================================== */

@font-face { font-family:"Artegra Sans"; src:url("/static/fonts/ArtegraSans-Medium.otf") format("opentype"); font-weight:500; font-display:swap; }
@font-face { font-family:"Artegra Sans"; src:url("/static/fonts/ArtegraSans-SemiBold.otf") format("opentype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Artegra Sans"; src:url("/static/fonts/ArtegraSans-Bold.otf") format("opentype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Artegra Sans"; src:url("/static/fonts/ArtegraSans-Black.otf") format("opentype"); font-weight:900; font-display:swap; }

:root {
  --bg:#070b12; --accent:#4ca9f5; --accent-2:#7cc4ff; --money:#7fe344;
  --text:#eef4fb; --text-dim:rgba(226,236,248,.60); --text-dim2:rgba(226,236,248,.40);
  --danger:#ff6060; --warn:#ffc146; --ok:#7fe344; --violet:#9a8cff;
  --glass:rgba(255,255,255,.055); --glass-2:rgba(13,20,33,.55); --sunken:rgba(4,9,16,.5);
  --gborder:rgba(255,255,255,.14); --gborder-strong:rgba(255,255,255,.28);
  --hi:inset 0 1px 0 rgba(255,255,255,.14);
  --shadow:0 14px 46px rgba(0,0,0,.5); --radius:16px; --radius-s:11px;
  --blur:blur(22px) saturate(150%);
  --ease:cubic-bezier(.22,.61,.36,1);
  --sidebar:264px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scrollbar-color:rgba(255,255,255,.4) transparent; scroll-behavior:smooth; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.28); border-radius:20px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.45); }

body {
  font-family:"Artegra Sans","Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.bg-scene {
  position:fixed; inset:0; z-index:-3;
  background:url("/static/img/bg/shot14.jpg?v=391a0013a5b8") center/cover no-repeat fixed;
  filter:blur(3px) saturate(1.05) brightness(.62); transform:scale(1.08);
}
.bg-tint {
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(76,169,245,.16), transparent 55%),
    linear-gradient(180deg, rgba(7,11,18,.55) 0%, rgba(7,11,18,.74) 45%, rgba(7,11,18,.94) 100%);
}
body::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  box-shadow:inset 0 0 220px 40px rgba(0,0,0,.55); }
img { display:block; }
a { color:inherit; text-decoration:none; }

/* ============================ ШАПКА ============================ */
header.topbar {
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:14px;
  padding:12px clamp(14px,3vw,26px);
  background:linear-gradient(180deg, rgba(9,14,22,.78), rgba(9,14,22,.46));
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--gborder);
}
header.topbar .logo { height:36px; width:auto; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
nav.mainnav { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px; }
nav.mainnav::-webkit-scrollbar { display:none; }
.spacer { flex:1; }

.btn, nav.mainnav a {
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:9px 15px; border-radius:var(--radius-s); color:var(--text);
  background:var(--glass); border:1px solid var(--gborder); box-shadow:var(--hi);
  font-family:inherit; font-weight:600; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.1em; cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.btn:hover, nav.mainnav a:hover { background:rgba(255,255,255,.11); border-color:var(--gborder-strong); transform:translateY(-1px); }
.btn.on, nav.mainnav a.on {
  background:linear-gradient(180deg, var(--accent), #2f8ede); border-color:var(--accent-2); color:#04121f;
  box-shadow:0 6px 20px rgba(76,169,245,.45), var(--hi);
}
.btn.on .ic, nav.mainnav a.on .ic { filter:brightness(.15); }
.btn.green { background:linear-gradient(180deg,#8ef05a,#5fbf30); border-color:#a6f57c; color:#0e2a08;
  box-shadow:0 6px 20px rgba(127,227,68,.4), var(--hi); }
.btn.green .ic { filter:brightness(.2); }
.btn.danger { background:linear-gradient(180deg,#ff6b6b,#d63c3c); border-color:#ff9a9a; color:#fff;
  box-shadow:0 6px 20px rgba(255,96,96,.35), var(--hi); }
.btn.danger .ic { filter:brightness(3); }
.btn.ghost { background:transparent; color:var(--text-dim); }
.btn.ghost:hover { color:var(--text); }
.btn.big { padding:14px 24px; font-size:14px; }
.btn.wide { width:100%; justify-content:center; }
.btn.sm { padding:7px 12px; font-size:11px; }
.btn.icon { padding:9px 11px; }
.btn[disabled], .btn.off { opacity:.45; pointer-events:none; }
.ic { width:15px; height:15px; object-fit:contain; opacity:.9; }
.ic.big { width:18px; height:18px; }
.ic.dim { opacity:.55; }
.ic.up { transform:rotate(180deg); }
.ic.x { transform:rotate(45deg); }

/* поиск в шапке */
.topsearch { display:flex; align-items:center; gap:10px; flex:1; max-width:420px;
  background:var(--sunken); border:1px solid var(--gborder); border-radius:var(--radius-s);
  padding:9px 14px; box-shadow:var(--hi); }
.topsearch input { flex:1; background:none; border:0; outline:0; color:var(--text);
  font-family:inherit; font-size:13.5px; letter-spacing:.03em; min-width:0; }
.topsearch input::placeholder { color:var(--text-dim2); text-transform:uppercase; font-size:11.5px; letter-spacing:.1em; }
.topsearch:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(76,169,245,.18); }

/* аккаунт-чип */
.acc-chip { display:flex; align-items:center; gap:10px; padding:6px 12px 6px 6px;
  background:var(--glass); border:1px solid var(--gborder); border-radius:100px; box-shadow:var(--hi);
  transition:border-color .2s var(--ease); }
.acc-chip:hover { border-color:var(--gborder-strong); }
.acc-chip .nick { font-size:12.5px; font-weight:700; letter-spacing:.06em; }
.acc-chip .money { font-size:11.5px; }

.ava { width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-weight:900; font-size:13px; color:#04121f; letter-spacing:0;
  background:linear-gradient(140deg,#7cc4ff,#4ca9f5); border:1px solid rgba(255,255,255,.35); }
.ava.g2 { background:linear-gradient(140deg,#8ef05a,#3fae6c); }
.ava.g3 { background:linear-gradient(140deg,#ffc146,#f0793c); }
.ava.g4 { background:linear-gradient(140deg,#b79aff,#6f5ce0); }
.ava.g5 { background:linear-gradient(140deg,#ff8f8f,#d64f7a); }
.ava.md { width:44px; height:44px; font-size:17px; }
.ava.lg { width:104px; height:104px; font-size:40px; border-radius:22px; box-shadow:0 0 28px rgba(76,169,245,.3); }

.money { display:inline-flex; align-items:center; gap:7px; font-weight:900; color:var(--money); letter-spacing:.02em; }
.money img { width:17px; height:17px; }
.money.lg { font-size:22px; } .money.lg img { width:24px; height:24px; }

/* ============================ КАРКАС ============================ */
main { max-width:1320px; margin:0 auto; padding:clamp(14px,2.4vw,26px) clamp(14px,3vw,26px) 72px;
  animation:fadeup .45s var(--ease) both; }
@keyframes fadeup { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.layout { display:grid; grid-template-columns:var(--sidebar) 1fr; gap:22px; align-items:start; }
/* грид-элемент по умолчанию не ужимается ниже min-content — на 412 px это рвало
   раскладку в горизонтальный скролл всей страницы */
.layout > *, .col > *, .grid > * { min-width:0; }
.layout.rev { grid-template-columns:1fr 340px; }

.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin:6px 0 20px; flex-wrap:wrap; }
h1 { font-size:clamp(21px,3vw,30px); font-weight:900; text-transform:uppercase; letter-spacing:.14em; line-height:1.06;
  text-shadow:0 2px 20px rgba(0,0,0,.4); }
.sub { color:var(--text-dim); font-size:13.5px; margin-top:8px; letter-spacing:.03em; line-height:1.55; max-width:76ch; }
h2.sec { position:relative; font-size:13.5px; font-weight:700; text-transform:uppercase; letter-spacing:.2em;
  margin:30px 0 14px; padding-left:14px; display:flex; align-items:center; gap:12px; }
h2.sec::before { content:""; position:absolute; left:0; top:1px; bottom:1px; width:4px; border-radius:4px;
  background:linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow:0 0 12px rgba(76,169,245,.7); }
h2.sec .more { margin-left:auto; font-size:11px; color:var(--text-dim); letter-spacing:.1em; display:inline-flex; align-items:center; gap:7px; }
h2.sec .more:hover { color:var(--text); }
h3 { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.18em; color:var(--text-dim); margin-bottom:12px; }

.panel { background:var(--glass); border:1px solid var(--gborder);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow), var(--hi); border-radius:var(--radius); }
.panel.pad { padding:20px 22px; }
.panel.pad-s { padding:14px 16px; }
.panel.flat { box-shadow:var(--hi); background:rgba(255,255,255,.035); }
.divider { height:1px; background:rgba(255,255,255,.1); margin:16px 0; }
.row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.row.tight { gap:8px; }
.row.nowrap { flex-wrap:nowrap; }
.col { display:flex; flex-direction:column; gap:12px; }
.between { justify-content:space-between; }
.mt { margin-top:16px; } .mt-s { margin-top:8px; } .mb { margin-bottom:16px; }
.muted { color:var(--text-dim); } .muted-s { color:var(--text-dim); font-size:12px; }
.center { justify-content:center; } .txt-center { text-align:center; }

/* ============================ ГЕРОЙ ============================ */
.hero { position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--gborder);
  box-shadow:var(--shadow); min-height:300px; display:flex; align-items:flex-end; }
.hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero::after { content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(6,10,17,.92) 0%, rgba(6,10,17,.72) 45%, rgba(6,10,17,.25) 100%),
             linear-gradient(0deg, rgba(6,10,17,.9), transparent 60%); }
.hero .inner { position:relative; z-index:2; padding:clamp(18px,3vw,32px); max-width:640px; }
.hero h1 { font-size:clamp(24px,3.6vw,38px); margin:12px 0 10px; }
.hero .sub { font-size:14px; }

/* ============================ КАРТОЧКИ МОДОВ ============================ */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.grid.wide { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }

/* горизонтальная карусель как в Steam Workshop: карточки фиксированной ширины,
   не растягиваются на весь экран при малом числе (1fr раздувал их) */
.shelf { display:grid; grid-auto-flow:column; grid-auto-columns:208px;
  gap:14px; overflow-x:auto; padding:2px 2px 12px; scroll-snap-type:x proximity; }
@media (max-width:620px){ .shelf { grid-auto-columns:170px; } }
.shelf > * { scroll-snap-align:start; }
.shelf::-webkit-scrollbar { height:8px; }

.card { position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--glass-2); border:1px solid var(--gborder); border-radius:var(--radius);
  box-shadow:var(--shadow), var(--hi);
  transition:transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
.card:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(76,169,245,.35); }
.card .thumb { position:relative; aspect-ratio:16/9; overflow:hidden; background:#0b1420; }
.card .thumb > img { width:100%; height:100%; object-fit:cover; }
.card .thumb::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(8,13,21,.92)); }
.card .body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card .name { font-size:14.5px; font-weight:700; letter-spacing:.04em; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card .author { display:flex; align-items:center; gap:8px; color:var(--text-dim); font-size:12px; }
.card .author .ava { width:20px; height:20px; font-size:9px; }
.card .meta { display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:auto; padding-top:9px; border-top:1px solid rgba(255,255,255,.1); }

.chip { position:absolute; top:10px; left:10px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(8,13,21,.78); border:1px solid var(--gborder); border-radius:8px; padding:4px 9px;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  backdrop-filter:blur(6px); }
.chip .ic { width:12px; height:12px; }
.chip.static { position:static; }
.chip.car { border-color:rgba(76,169,245,.7); color:#a8d8ff; }
.chip.map { border-color:rgba(127,227,68,.7); color:#c4f5a2; }
.chip.livery { border-color:rgba(154,140,255,.75); color:#cdc4ff; }
.chip.addon { border-color:rgba(255,193,70,.75); color:#ffdf9c; }
.chip.scen { border-color:rgba(255,138,196,.75); color:#ffc4de; }
.chip.wheel { border-color:rgba(255,193,70,.75); color:#ffdf9c; }
.chip.pack { border-color:rgba(255,138,196,.75); color:#ffc4de; }
.chip.tr { top:10px; left:auto; right:10px; }

/* цена мода: коины/деньги; free — зелёная; big — на странице мода */
.price { display:inline-flex; align-items:center; gap:5px; font-weight:800; font-size:13px; color:#ffdf9c; white-space:nowrap; }
.price.free { color:var(--money); }
.price.big { font-size:22px; letter-spacing:.02em; }
.price.sm { font-size:11.5px; }
.pricebox .k { color:var(--text-dim); text-transform:uppercase; letter-spacing:.09em; font-size:11px; margin-bottom:4px; }
.btn.buy { background:linear-gradient(135deg,#ffc146,#ff8a3d); color:#1a1206; }
/* содержимое пакета и зависимости */
.contents { display:flex; flex-direction:column; gap:8px; }
.citem { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.citem .cname { font-weight:700; }
.citem .cid { color:var(--text-dim); font-size:12px; }
.deplist { display:flex; flex-direction:column; gap:8px; }
.dep { display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--gborder); border-radius:var(--radius-s); color:inherit; text-decoration:none; flex-wrap:wrap; }
a.dep:hover { border-color:var(--accent); }
.dep .dname { font-weight:700; flex:1 1 auto; }
.dep-del { margin-left:auto; width:24px; height:24px; border-radius:50%; border:none; background:rgba(255,96,96,.25); color:#ff9a9a; font-size:15px; line-height:1; cursor:pointer; padding:0; }
.dep-del:hover { background:rgba(255,96,96,.45); }
.depsearch { position:relative; }
.depresults { position:static; margin-top:8px; background:#0f1a28; border:1px solid var(--gborder-strong); border-radius:var(--radius-s); overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.45); }
.depresults[hidden] { display:none; }
.depopt + .depopt { border-top:1px solid var(--gborder); }
.depopt .dtype { opacity:.6; margin-left:8px; font-size:.9em; }
.depopt { display:block; width:100%; text-align:left; padding:10px 12px; background:none; border:none; color:var(--text); font:inherit; cursor:pointer; }
.depopt:hover { background:rgba(76,169,245,.12); }
.kindrow { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.lic.kind .lic-name { display:inline-flex; align-items:center; gap:7px; }
.filedrop.small { padding:16px; }
.catpills { margin:-4px 0 14px; }

/* рейтинг = доля лайков (Wilson для сортировки, процент для показа) */
.score { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; }
.score .ic { width:13px; height:13px; }
.score.good { color:var(--money); } .score.mid { color:var(--warn); } .score.bad { color:var(--danger); }
.stat { display:inline-flex; align-items:center; gap:6px; color:var(--text-dim); font-size:12px; letter-spacing:.02em; }
.stat .ic { width:13px; height:13px; opacity:.65; }

/* ============================ САЙДБАР / ФИЛЬТРЫ ============================ */
aside.side { position:sticky; top:80px; display:flex; flex-direction:column; gap:14px; }
.facet { padding:14px 16px; }
.facet h3 { margin-bottom:10px; }
.cats { display:flex; flex-direction:column; gap:2px; }
.cats a { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:10px;
  font-size:13px; letter-spacing:.03em; color:var(--text-dim); border:1px solid transparent;
  transition:background .18s var(--ease), color .18s var(--ease); }
.cats a:hover { background:rgba(255,255,255,.06); color:var(--text); }
.cats a.on { background:rgba(76,169,245,.14); border-color:rgba(76,169,245,.5); color:var(--text); font-weight:700; }
.cats a .num { margin-left:auto; font-size:11px; color:var(--text-dim2); letter-spacing:.06em; white-space:nowrap; }
.cats a.on .num { color:var(--accent-2); }

.check { display:flex; align-items:center; gap:10px; padding:7px 2px; font-size:13px; color:var(--text-dim); cursor:pointer; }
.check:hover { color:var(--text); }
.check .box { width:16px; height:16px; border-radius:5px; border:1px solid var(--gborder-strong);
  background:var(--sunken); flex:none; display:grid; place-items:center; }
.check.on .box { background:linear-gradient(180deg,var(--accent),#2f8ede); border-color:var(--accent-2); }
.check.on .box::after { content:""; width:8px; height:8px; background:#04121f; clip-path:polygon(14% 47%,0 61%,40% 100%,100% 26%,86% 12%,38% 71%); }
.check.on { color:var(--text); }
.check .num { margin-left:auto; padding-left:8px; font-size:11px; color:var(--text-dim2); white-space:nowrap; }

.pills { display:flex; flex-wrap:wrap; gap:7px; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:100px;
  border:1px solid var(--gborder); background:var(--glass); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-dim); cursor:pointer; transition:all .18s var(--ease); }
.pill:hover { color:var(--text); border-color:var(--gborder-strong); }
.pill.on { background:rgba(76,169,245,.16); border-color:var(--accent); color:#cfe8ff; font-weight:700; }
.pill.on .ic { opacity:1; }
.pill .ic { width:12px; height:12px; }

/* ============================ ТУЛБАР / ТАБЫ ============================ */
.tabs { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.tabs::-webkit-scrollbar { display:none; }
.tab { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; padding:10px 16px;
  border-radius:var(--radius-s) var(--radius-s) 0 0; border:1px solid transparent; border-bottom:none;
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--text-dim); cursor:pointer; }
.tab:hover { color:var(--text); background:rgba(255,255,255,.05); }
.tab.on { color:var(--text); background:var(--glass); border-color:var(--gborder); }
/* горизонтальный скролл обязателен: 4 таба кириллицей не влезают в 412 px */
.tabrow { border-bottom:1px solid var(--gborder); margin-bottom:18px; display:flex; align-items:flex-end; gap:12px;
  overflow-x:auto; scrollbar-width:none; }
.tabrow::-webkit-scrollbar { display:none; }
.tabrow .tab { flex:none; }
.tabrow .sortline { margin-left:auto; padding-bottom:8px; }

.select { display:inline-flex; align-items:center; gap:10px; padding:9px 14px; cursor:pointer;
  background:var(--sunken); border:1px solid var(--gborder); border-radius:var(--radius-s);
  font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--text); box-shadow:var(--hi); }
.select:hover { border-color:var(--gborder-strong); }
.select .ic { width:12px; height:12px; opacity:.6; }
.select b { color:var(--accent-2); font-weight:700; }
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }

/* ============================ СТРАНИЦА МОДА ============================ */
.gallery .main { position:relative; border:1px solid var(--gborder); border-radius:var(--radius);
  overflow:hidden; aspect-ratio:16/9; background:#0b1420; box-shadow:var(--shadow); }
.gallery .main img { width:100%; height:100%; object-fit:cover; }
.gallery .thumbs { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:10px; }
.gallery .thumbs .t { border:1px solid var(--gborder); border-radius:10px; overflow:hidden;
  aspect-ratio:16/9; cursor:pointer; opacity:.65; transition:opacity .18s var(--ease), border-color .18s var(--ease); }
.gallery .thumbs .t:hover, .gallery .thumbs .t.on { opacity:1; border-color:var(--accent); }
.gallery .thumbs .t img { width:100%; height:100%; object-fit:cover; }

.kv .r { display:flex; justify-content:space-between; gap:14px; padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.08); font-size:13px; }
.kv .r:last-child { border-bottom:none; }
.kv .k { color:var(--text-dim); text-transform:uppercase; letter-spacing:.09em; font-size:11px; }
.kv .v { font-weight:700; text-align:right; }

.prose { line-height:1.7; color:rgba(233,240,249,.86); font-size:14px; font-weight:500; }
.prose p + p, .prose ul, .prose h4 { margin-top:12px; }
.prose ul { margin-left:20px; } .prose li { margin-bottom:6px; }
.prose b { color:#fff; }
.prose h4 { font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:var(--accent-2); }

.votebar { display:flex; gap:10px; }
.votebar .btn { flex:1; justify-content:center; }
.votebar .btn.on-up { background:rgba(127,227,68,.16); border-color:rgba(127,227,68,.6); color:var(--money); }
.votebar .btn.on-down { background:rgba(255,96,96,.14); border-color:rgba(255,96,96,.5); color:#ff9a9a; }

.bars { display:flex; flex-direction:column; gap:7px; }
.bars .b { display:grid; grid-template-columns:96px 1fr 56px; align-items:center; gap:10px; font-size:12px; color:var(--text-dim); white-space:nowrap; }
.bars .track { height:7px; background:rgba(255,255,255,.1); border-radius:4px; overflow:hidden; }
.bars .track i { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.bars .track i.g { background:linear-gradient(90deg,#5fbf30,#8ef05a); }
.bars .track i.r { background:linear-gradient(90deg,#d63c3c,#ff8080); }

/* здоровье мода на слабом железе — специфика мобильного краш-сима */
.perf { display:flex; gap:10px; flex-wrap:wrap; }
.perf .t { flex:1; min-width:92px; padding:11px 12px; border-radius:12px; border:1px solid var(--gborder);
  background:var(--sunken); }
.perf .t .n { font-size:19px; font-weight:900; }
.perf .t .l { font-size:9.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--text-dim); margin-top:4px; }
.perf .t.ok .n { color:var(--money); } .perf .t.warn .n { color:var(--warn); } .perf .t.bad .n { color:var(--danger); }

/* ============================ КОММЕНТАРИИ ============================ */
.comment { display:flex; gap:14px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.comment:last-child { border-bottom:none; }
.comment .who { display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.comment .who .nick { font-weight:700; letter-spacing:.05em; font-size:13.5px; }
.comment .who .when { color:var(--text-dim2); font-size:11px; text-transform:uppercase; letter-spacing:.09em; }
.comment .txt { color:rgba(233,240,249,.85); font-size:13.5px; line-height:1.6; }
.comment .acts { display:flex; gap:16px; margin-top:9px; }
.comment .acts .stat { cursor:pointer; font-size:11.5px; }
.comment .acts .stat:hover { color:var(--text); }
.comment.hidden .txt { color:var(--text-dim2); font-style:italic; }
.up { text-transform:uppercase; }
#transfercode { flex:1; min-width:180px; letter-spacing:.14em; }
.commentbox { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start; }
.commentbox textarea { flex:1; min-width:200px; }
.commentbox .fullw { flex-basis:100%; }
textarea, input, select {
  background:var(--sunken); border:1px solid var(--gborder); border-radius:10px; color:var(--text);
  padding:11px 14px; font-family:inherit; font-size:13.5px; letter-spacing:.02em; outline:none; width:100%;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
textarea { resize:vertical; min-height:82px; line-height:1.55; }
input:focus, textarea:focus, select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(76,169,245,.18); }
label.field { display:flex; flex-direction:column; gap:7px; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.12em; color:var(--text-dim); }
label.field .hint { text-transform:none; letter-spacing:.02em; font-size:11.5px; color:var(--text-dim2); }
.formgrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ============================ ТЕГИ / СТАТУСЫ ============================ */
.tag { display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:700; padding:4px 10px;
  border-radius:20px; text-transform:uppercase; letter-spacing:.08em;
  border:1px solid var(--gborder); background:var(--glass); color:var(--text-dim); }
.tag .ic { width:11px; height:11px; }
.tag.ok { background:rgba(127,227,68,.15); color:var(--money); border-color:rgba(127,227,68,.5); }
.tag.warn { background:rgba(255,193,70,.14); color:var(--warn); border-color:rgba(255,193,70,.5); }
.tag.danger { background:rgba(255,96,96,.16); color:#ff9a9a; border-color:rgba(255,96,96,.5); }
.tag.info { background:rgba(76,169,245,.15); color:#a8d8ff; border-color:rgba(76,169,245,.5); }
.tag.violet { background:rgba(154,140,255,.16); color:#cdc4ff; border-color:rgba(154,140,255,.5); }

/* ============================ ТАБЛИЦЫ / СПИСКИ ============================ */
.tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { border-collapse:collapse; width:100%; min-width:560px; }
th, td { text-align:left; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); font-size:13px; white-space:nowrap; }
th { color:var(--text-dim); font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.14em; }
tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:rgba(76,169,245,.07); }
code { background:rgba(4,9,16,.6); padding:2px 7px; border-radius:6px; font-size:11.5px;
  font-family:ui-monospace,Menlo,monospace; letter-spacing:0; border:1px solid rgba(255,255,255,.08); word-break:break-all; }
pre { background:rgba(4,9,16,.6); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:14px;
  overflow-x:auto; font-family:ui-monospace,Menlo,monospace; font-size:11.5px; line-height:1.6; letter-spacing:0; color:#cfe0f2; }

/* строка мода (мои работы / очередь модерации) */
.work { display:flex; gap:14px; align-items:center; padding:12px; border:1px solid var(--gborder);
  border-radius:var(--radius); background:rgba(255,255,255,.035); transition:border-color .18s var(--ease); }
.work:hover { border-color:var(--gborder-strong); }
.work .pic { width:132px; aspect-ratio:16/9; border-radius:9px; overflow:hidden; flex:none; border:1px solid var(--gborder); }
.work .pic img { width:100%; height:100%; object-fit:cover; }
.work .w-name { font-weight:700; font-size:14px; letter-spacing:.04em; }
.work .w-meta { display:flex; gap:14px; margin-top:7px; flex-wrap:wrap; }

/* стат-плитки */
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.tile { padding:15px 17px; display:flex; flex-direction:column; gap:6px; position:relative; overflow:hidden;
  background:var(--glass); border:1px solid var(--gborder); border-radius:var(--radius); box-shadow:var(--hi); }
.tile::before { content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); }
.tile .n { font-size:24px; font-weight:900; }
.tile .l { font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.16em;
  display:flex; align-items:center; gap:7px; }
.tile .n.blue { color:var(--accent-2); } .tile .n.green { color:var(--money); }
.tile .n.warn { color:var(--warn); } .tile .n.danger { color:var(--danger); }

/* спарклайн скачиваний (чистый CSS, столбики) */
.spark { display:flex; align-items:flex-end; gap:3px; height:44px; }
.spark i { flex:1; background:linear-gradient(180deg,var(--accent),rgba(76,169,245,.25)); border-radius:2px 2px 0 0; min-height:2px; }

/* шаги мастера загрузки */
.steps { display:flex; gap:10px; flex-wrap:wrap; }
.step { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--radius-s);
  border:1px solid var(--gborder); background:var(--glass); font-size:12px; letter-spacing:.06em; color:var(--text-dim); }
.step .n { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:900;
  background:rgba(255,255,255,.1); color:var(--text-dim); }
.step.on { border-color:var(--accent); color:var(--text); background:rgba(76,169,245,.12); }
.step.on .n { background:var(--accent); color:#04121f; }
.step.done .n { background:var(--money); color:#0e2a08; }
.step.done { color:var(--text); }

.drop { border:1px dashed var(--gborder-strong); border-radius:var(--radius); padding:30px 20px;
  text-align:center; background:rgba(4,9,16,.35); }
.drop:hover { border-color:var(--accent); background:rgba(76,169,245,.06); }

/* результат автопроверки */
.checks { display:flex; flex-direction:column; gap:1px; }
.checks .c { display:flex; align-items:center; gap:11px; padding:10px 12px; font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.07); }
.checks .c:last-child { border-bottom:none; }
.checks .c .ic { width:14px; height:14px; }
.checks .c .val { margin-left:auto; color:var(--text-dim); font-size:12px; }
.checks .c.ok .val { color:var(--money); }
.checks .c.warn .val { color:var(--warn); }
.checks .c.bad .val { color:var(--danger); }

/* уведомление/баннер */
/* НЕ flex: инлайн-<code> внутри flex-контейнера становится отдельным flex-элементом
   и разрывает фразу посередине */
.note { display:block; padding:13px 16px; border-radius:12px; font-size:13px;
  line-height:1.6; border:1px solid var(--gborder); background:var(--glass); }
.note .ic { display:inline-block; vertical-align:-2px; margin-right:9px; }
.note.info { background:rgba(76,169,245,.1); border-color:rgba(76,169,245,.4); }
.note.ok { background:rgba(127,227,68,.1); border-color:rgba(127,227,68,.4); }
.note.warn { background:rgba(255,193,70,.1); border-color:rgba(255,193,70,.4); }
.note.danger { background:rgba(255,96,96,.1); border-color:rgba(255,96,96,.4); }

/* код входа (device-flow) */
.code { display:flex; gap:10px; justify-content:center; }
.code span { width:52px; height:64px; display:grid; place-items:center; font-size:30px; font-weight:900;
  background:var(--sunken); border:1px solid var(--gborder-strong); border-radius:12px; box-shadow:var(--hi);
  letter-spacing:0; color:var(--accent-2); }
.qr { width:180px; height:180px; border-radius:14px; background:
  repeating-conic-gradient(#0b1420 0 25%, #eef4fb 0 50%) 0 0/12px 12px; border:8px solid #eef4fb; }

/* пагинация */
.pager { display:flex; gap:8px; justify-content:center; margin-top:26px; flex-wrap:wrap; }

/* футер */
footer.foot { max-width:1320px; margin:0 auto; padding:0 clamp(14px,3vw,26px) 40px; }
footer.foot .in { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:20px 24px; border-radius:var(--radius); border:1px solid var(--gborder);
  background:linear-gradient(120deg, rgba(88,80,160,.28), rgba(60,70,120,.2)); }
footer.foot .cta { font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.24em; }
.socials { display:flex; gap:18px; }
.socials img { width:22px; height:22px; opacity:.85; transition:opacity .15s, transform .15s; }
.socials a:hover img { opacity:1; transform:translateY(-2px); }
.copy { text-align:center; color:var(--text-dim2); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; margin-top:16px; }

/* ============================ РЕЖИМ «В ИГРЕ» (WebView) ============================
   ?app=1 — та же вёрстка внутри игрового WebView: без шапки сайта и футера,
   крупные тап-таргеты, нижняя липкая панель установки, safe-area. */
body.app .site-only { display:none !important; }
/* WebView во весь экран: без узкого max-width по центру и без бокового отступа
   от <main>; на широком/ландшафтном экране 820px давали узкую полосу посередине */
body.app main { padding:12px clamp(12px,3vw,26px) 96px; max-width:none; width:100%; }
body.app .appbar, body.app .appnav { padding-left:clamp(12px,3vw,26px); padding-right:clamp(12px,3vw,26px); }
/* НЕ форсим одну колонку в app: WebView часто широкий (ландшафт) → как в браузере/
   mod.io — 2 колонки (галерея + сайдбар). Узкую раскладку даёт @media по ширине. */
body.app aside.side { position:static; }
/* на широком WebView нижняя панель установки не нужна — кнопка есть в сайдбаре */
@media (min-width:1081px){ body.app .installbar { display:none; } }
body.app .card:hover { transform:none; }
body.app .btn { padding:12px 18px; font-size:13px; }
body.app .appbar { display:flex; }
body:not(.app) .app-only { display:none !important; }

.appbar { display:none; position:sticky; top:0; z-index:50; align-items:center; gap:12px;
  padding:10px 14px; background:linear-gradient(180deg, rgba(9,14,22,.85), rgba(9,14,22,.6));
  backdrop-filter:var(--blur); border-bottom:1px solid var(--gborder); }
.appbar .title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; }
.installbar { position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; gap:12px; align-items:center;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(9,14,22,.72), rgba(9,14,22,.95));
  backdrop-filter:var(--blur); border-top:1px solid var(--gborder); }
body.app .installbar { display:flex; }
.installbar .btn { flex:1; justify-content:center; }

/* индикатор режима для демонстрации концепта */
.modeswitch { position:fixed; right:14px; bottom:14px; z-index:80; }

/* ============================ АДАПТИВ ============================ */
@media (max-width:1080px) {
  .layout, .layout.rev { grid-template-columns:1fr; }
  aside.side { position:static; }
  .gallery .thumbs { grid-template-columns:repeat(4,1fr); }
}
@media (max-width:760px) {
  .bg-scene { background-attachment:scroll; }
  header.topbar { flex-wrap:wrap; padding:10px 14px; }
  .topsearch { order:3; flex:1 0 100%; max-width:none; }
  nav.mainnav { order:4; flex:1 0 100%; }
  h1 { letter-spacing:.1em; }
  .grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
  .card .name { font-size:13px; }
  .formgrid { grid-template-columns:1fr; }
  .work { flex-wrap:wrap; } .work .pic { width:100%; }
  .gallery .thumbs { grid-template-columns:repeat(3,1fr); }
  .code span { width:40px; height:52px; font-size:23px; }
}
@media (prefers-reduced-motion:reduce) { *, main { animation:none !important; transition:none !important; } }
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toastmsg{background:rgba(13,20,33,.92);border:1px solid var(--gborder-strong);color:var(--text);padding:12px 20px;border-radius:12px;font-size:14px;box-shadow:0 14px 40px rgba(0,0,0,.5);backdrop-filter:blur(12px);opacity:1;transition:opacity .4s,transform .4s}
.toastmsg.bad{border-color:rgba(255,96,96,.6);color:#ffb0b0}
.toastmsg.out{opacity:0;transform:translateY(8px)}
.nickstate{font-size:12px;margin-left:8px}.nickstate.good{color:var(--money)}.nickstate.bad{color:#ff9a9a}
.qrimg{width:180px;height:180px;background:#fff;border-radius:12px;padding:8px}
.bigpct{font-size:46px;font-weight:900;color:var(--money);line-height:1}
.ratewrap{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}
.barswrap{flex:1;min-width:260px}
.modtitle{font-size:22px;margin-top:10px}
.mla{margin-left:auto}
.authblock{font-weight:700;letter-spacing:.05em}
.authblock .stat{display:block;margin-top:3px}
.authblock .nick{display:block}
.authblock .muted-s{display:block;margin-top:3px;font-weight:500;letter-spacing:.02em}
.authorrow{text-decoration:none;color:inherit}
.authorrow:hover .nick{color:var(--accent)}
.w96{width:96px}
.gap28{gap:28px}
.langsw{position:relative}
.langsw summary{display:inline-flex;align-items:center;gap:7px;list-style:none;cursor:pointer;padding:9px 13px;border-radius:11px;border:1px solid var(--gborder);background:var(--glass);box-shadow:var(--hi);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text)}
.langsw summary::-webkit-details-marker{display:none}
.langmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;display:flex;flex-direction:column;min-width:150px;background:rgba(13,20,33,.96);border:1px solid var(--gborder-strong);border-radius:12px;padding:6px;box-shadow:var(--shadow);backdrop-filter:blur(14px)}
.langmenu a{padding:9px 12px;border-radius:8px;font-size:13px;color:var(--text-dim)}
.langmenu a:hover{background:rgba(255,255,255,.08);color:var(--text)}
.langmenu a.on{color:var(--accent);font-weight:700}
.w0{width:0%}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}.w100{width:100%}

.m0{margin:0}.flex1{flex:1}.fullw{width:100%}.stretch{align-items:stretch}.mt6{margin-top:6px}.gap14{gap:14px}.center-c{justify-content:center;align-items:center}
.cbody{flex:1}
.filedrop{cursor:pointer;display:block}.filedrop input[type=file]{display:none}
.upstatus{color:var(--accent);font-size:13px;margin-left:10px}
.fw700{font-weight:700;letter-spacing:.06em}.work.rej{border-color:rgba(255,96,96,.45)}.wgrow{flex:1;min-width:220px}
.tile .n.blue{color:var(--accent)}
.ava.pick{width:64px;height:64px;font-size:24px;border-radius:16px;cursor:pointer;opacity:.55;transition:opacity .2s,box-shadow .2s}
.ava.pick.on{opacity:1;box-shadow:0 0 0 3px var(--accent)}
.profhead{gap:24px;align-items:flex-start}
.profgrow{flex:1;min-width:260px}
.profright{margin-left:auto;align-items:flex-end}
.fieldgrow{flex:1;min-width:220px}
.h1-26{font-size:26px}
.tile .n.green{color:var(--money)}
.avatarrow{display:flex;gap:12px;flex-wrap:wrap}

/* ── доработка дизайна (аддитивно) ──────────────────────────────────────── */
/* в игровом WebView переключатель «вид сайта» не нужен */
body.app .modeswitch{display:none}
/* app-бар: аккуратнее, липкий, блюр */
body.app .appbar{position:sticky;top:0;z-index:60;backdrop-filter:blur(18px) saturate(140%);background:linear-gradient(180deg,rgba(9,14,22,.82),rgba(9,14,22,.5));border-bottom:1px solid var(--gborder)}
body.app main{padding-top:12px}
/* app-бар: рабочее поле поиска + аккаунт с ником + навигация как в браузере */
.appsearch{flex:1;display:flex;align-items:center;gap:8px;min-width:0;background:var(--glass);border:1px solid var(--gborder);border-radius:12px;padding:0 12px}
.appsearch .ic.dim{opacity:.55;flex:none}
.appsearch input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:14px;padding:11px 0}
.appbar .acc-chip{flex:none;max-width:44%}
.appbar .acc-chip .nick{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appnav{display:none}
body.app .appnav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px 14px 4px;-webkit-overflow-scrolling:touch}
body.app .appnav::-webkit-scrollbar{display:none}
body.app .appnav a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:8px 13px;border-radius:11px;border:1px solid var(--gborder);background:var(--glass);color:var(--text-dim);font-size:12.5px;font-weight:600;letter-spacing:.05em}
body.app .appnav a.on{background:linear-gradient(180deg,var(--accent),#2f8ede);border-color:var(--accent-2);color:#04121f}
body.app .appnav a.on .ic{filter:brightness(.15)}
/* страница мода: галерея — своя ячейка, чтобы в app/на мобиле инфо-панель (название,
   установка, версия, скачивания) шла СРАЗУ после галереи, а не в самом низу */
.modlayout{align-items:start}
.modlayout .gallery-slot{grid-column:1;grid-row:1}
.modlayout .main-col{grid-column:1;grid-row:2}
.modlayout aside.side{grid-column:2;grid-row:1 / span 2}
/* узко (портрет/телефон) — одна колонка, порядок галерея→инфо→описание.
   широко (ландшафт/десктоп/WebView) — 2 колонки как в браузере и mod.io */
@media (max-width:1080px){
  .modlayout{display:flex;flex-direction:column}
  .modlayout .gallery-slot{order:1}
  .modlayout aside.side{order:2}
  .modlayout .main-col{order:3}
}
/* карточки: градиент снизу под текст поверх картинки + мягче наведение */
.card .thumb{position:relative}
.card .thumb::after{content:"";position:absolute;inset:auto 0 0 0;height:56%;background:linear-gradient(180deg,transparent,rgba(6,10,17,.72));pointer-events:none}
.card{transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.5)}
/* hero: усиливаем читаемость заголовка */
.hero .inner{background:linear-gradient(90deg,rgba(6,10,17,.86) 0%,rgba(6,10,17,.5) 55%,transparent 100%)}
/* активный таб — акцентная подсветка снизу */
.tab.on{position:relative}
.tab.on::after{content:"";position:absolute;left:14px;right:14px;bottom:-2px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 12px rgba(76,169,245,.6)}
/* заметки/пустое — мягче */
.note{border-radius:14px}
/* кнопка установки в installbar — крупнее тап-таргет */
.installbar .btn.big{min-height:56px}

/* ── соц-иконки футера: единые монохромные SVG ──────────────────────────── */
.socials a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;border:1px solid var(--gborder);background:var(--glass);color:var(--text-dim);transition:color .2s var(--ease),border-color .2s var(--ease),transform .15s var(--ease)}
.socials a:hover{color:var(--text);border-color:var(--gborder-strong);transform:translateY(-2px)}
.socials svg{width:20px;height:20px;display:block}

/* ── п.5: единая высота/ширина элементов шапки ──────────────────────────── */
header.topbar .mainnav a,header.topbar .btn,header.topbar .acc-chip,header.topbar .langsw summary{height:48px;box-sizing:border-box}
header.topbar .mainnav a{min-width:150px;justify-content:center}
header.topbar .topsearch{height:48px;box-sizing:border-box;max-width:520px}

/* ── кастом-аватар + выбранные файлы ────────────────────────────────────── */
.ava.img{overflow:hidden;padding:0;background:var(--glass)}
.ava.img img{width:100%;height:100%;object-fit:cover;display:block}
.ava-current{display:inline-flex;margin-right:16px}
.ava.pick.upload{display:inline-flex;align-items:center;justify-content:center;background:var(--glass);border:1px dashed var(--gborder-strong);cursor:pointer;opacity:1}
.ava.pick.upload .ic{width:26px;height:26px;opacity:.8}
.ava.pick.upload:hover{border-color:var(--accent)}
.picked{margin-top:10px;font-size:13px;color:var(--accent-2);word-break:break-all;font-weight:600}
.filedrop.has-file{border-color:var(--accent)}

/* ── прогресс-бар загрузки + превью скриншотов ──────────────────────────── */
.progbar{margin-top:12px;height:8px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.progbar > i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .2s var(--ease)}
.shots-preview{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.shot-thumb{width:120px;height:68px;object-fit:cover;border-radius:10px;border:1px solid var(--gborder);display:block}
.shot-thumb-wrap{position:relative;width:120px;height:68px}
.shot-del{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;border:none;background:var(--danger,#e5484d);color:#fff;font-size:15px;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.shot-del:hover{filter:brightness(1.1)}

/* ── релизный полиш 2026-08-26: пустые состояния, лицензии, мобильная шапка ── */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:44px 22px;
  border:1px dashed var(--gborder-strong);border-radius:var(--radius);background:var(--glass)}
.empty > .ic.big{width:34px;height:34px;opacity:.55}
.empty p{max-width:520px;color:var(--text-dim);font-size:14px;line-height:1.6}
.empty .row{justify-content:center}
.empty.tall{padding:70px 22px}
.code404{font-size:64px;font-weight:900;letter-spacing:.1em;color:var(--accent-2);line-height:1}
.lic-list{display:flex;flex-direction:column;gap:10px}
.lic{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--gborder);border-radius:var(--radius-s);
  background:var(--sunken);cursor:pointer;transition:border-color .18s var(--ease)}
.lic:hover{border-color:var(--gborder-strong)}
.lic:has(input:checked){border-color:var(--accent);background:rgba(76,169,245,.08)}
.lic input{margin-top:3px;accent-color:var(--accent);flex:none}
.lic-body{display:flex;flex-direction:column;gap:3px}
.lic-name{font-weight:700;font-size:13px;letter-spacing:.04em}
.lic-desc{font-size:12.5px;color:var(--text-dim);line-height:1.5}
.btn.danger-text{color:#ff9a9a}
.btn.danger-text:hover{border-color:rgba(255,96,96,.5)}
.sec.mt{margin-top:26px}
/* мобильная раскладка: три кнопки меню в ряд без обрезки; галерея мода на всю ширину
   (align-items:start у .modlayout действовал и на flex-column ≤1080 → колонка ужималась
   до натуральной ширины картинки) */
@media (max-width:1080px){ .modlayout{align-items:stretch} }
@media (max-width:760px){
  header.topbar .mainnav a{min-width:0;flex:1;padding-left:8px;padding-right:8px;font-size:11px}
  header.topbar .mainnav a .ic{width:13px;height:13px}
  .page-head > .btn{align-self:flex-start}
  .kv .r{gap:10px}
  .empty{padding:32px 16px}
}
/* глобальное input{width:100%} растягивало радио лицензии на всю строку */
.lic input[type=radio]{width:16px;height:16px;flex:0 0 auto;padding:0;margin:3px 0 0}
.lic-body{flex:1;min-width:0}
@media (max-width:760px){ header.topbar .mainnav a{font-size:10px;letter-spacing:.04em;gap:5px} }
/* высокий сайдбар (похожие моды) растягивал 1-ю строку грида → дыра под галереей */
@media (min-width:1081px){ .modlayout{grid-template-rows:auto 1fr} }

/* Подписан: «Отписаться» — действие вторичное, не должно кричать как главная кнопка. */
.btn.subbtn.on{background:var(--glass);border-color:var(--gborder-strong);color:var(--text-dim)}
.btn.subbtn.on .ic{filter:none;opacity:.65}
.btn.subbtn.on:hover{color:var(--text);border-color:var(--accent)}

/* ======================= ТЕЛЕФОН, ВЕРТИКАЛЬНО (≤520px) =======================
   Сайт открывают и в игровом WebView, и в обычном мобильном браузере в портрете.
   Здесь только то, что в портрете реально ломалось: шапка в четыре ряда, широкие
   сетки, длинные слова без переносов и строки «ключ — значение», не влезающие в
   ширину экрана. */
@media (max-width:520px) {
  main { padding:10px 12px 84px; }

  /* Шапка: логотип+язык+аккаунт одной строкой, поиск отдельной, разделы прокруткой */
  header.topbar { gap:8px; padding:8px 12px; }
  header.topbar .logo { height:28px; }
  header.topbar .acc-chip { padding:4px 10px 4px 4px; }
  header.topbar .acc-chip .nick { max-width:92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  header.topbar .topsearch { height:42px; padding:6px 12px; }
  nav.mainnav a { padding:8px 10px; }

  /* Заголовки страниц и карточек: длинное имя мода не должно вылезать за экран */
  h1 { font-size:clamp(19px,6vw,26px); }
  .page-head { flex-direction:column; align-items:stretch; gap:10px; }
  .modtitle, .card .name, .w-name, .comment .txt, .prose { overflow-wrap:anywhere; }

  /* Каталог: две колонки на 360px читаются мельче, чем одна крупная */
  .grid, .grid.wide { grid-template-columns:1fr; gap:12px; }
  .shelf { grid-auto-columns:min(64vw,220px); }

  /* Герой главной: в портрете он занимал почти весь экран */
  .hero { min-height:0; }
  .hero .inner { padding:14px; }
  .hero h1 { font-size:22px; }
  .hero .sub { display:none; }

  /* Строки «ключ — значение» и оценки: перенос вместо сжатия в столбик из букв */
  .kv .r { flex-wrap:wrap; gap:2px 10px; padding:8px 0; }
  .kv .r .v { margin-left:auto; }
  .ratewrap { gap:14px; }
  .barswrap { min-width:0; }
  .bars .b { grid-template-columns:74px 1fr 40px; gap:8px; font-size:11.5px; }
  .bigpct { font-size:36px; }

  /* Действия: кнопка подписки во всю ширину, иконки-кнопки не жмутся */
  .btn.big { padding:13px 18px; font-size:13px; }
  .row.tight.nowrap { flex-wrap:wrap; }
  .votebar { flex-wrap:wrap; }
  .votebar .btn { flex:1 0 46%; }

  /* Формы и фильтры */
  .searchbar, .filters, .formgrid { flex-wrap:wrap; }
  .searchbar input, .searchbar select, .field input, .field select, .field textarea { min-width:0; width:100%; }
  .commentbox textarea { min-width:0; }
  .gallery .thumbs { grid-template-columns:repeat(3,1fr); gap:6px; }

  /* Таблицы (версии, журналы) остаются со своей прокруткой, но не тянут страницу */
  .tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table { min-width:420px; }

  /* Футер: в портрете «в строку» превращался в кашу */
  footer.foot .in { flex-direction:column; align-items:flex-start; gap:12px; padding:16px; }
}

/* Портрет вообще (любая ширина): ничего не должно вылезать за край экрана —
   горизонтальная прокрутка на телефоне читается как сломанная вёрстка. */
@media (orientation:portrait) {
  html, body { max-width:100%; overflow-x:hidden; }
  img, video, iframe { max-width:100%; height:auto; }
}

/* «закрыть» в app-баре WebView: выход в браузер модов игры (мост close) */
.appbar .appclose { flex:none; }

/* app-бар WebView: «Назад» / «К модам» — заметные кнопки с подписью, как в браузере
   модов игры; .dlbar — вторая строка того же липкого бара (полоса загрузок игры) */
.appbar{flex-wrap:wrap;row-gap:8px}
body.app .appbar .appback,body.app .appbar .appclose{flex:none;gap:8px;padding:10px 14px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.appbar .appback{background:rgba(76,169,245,.16);border-color:rgba(76,169,245,.55);color:#dff0ff}
.appbar .appback:hover{background:rgba(76,169,245,.26);color:#fff}
.appbar .appclose{background:var(--glass);border-color:var(--gborder-strong);color:var(--text)}
.appbar .appclose:hover{border-color:var(--accent);color:#fff}
.appbar .appback .ic,.appbar .appclose .ic{opacity:.9}
/* узкий портрет: поиск уходит на свою строку, иначе поле сжимается до двух букв между кнопками */
@media (max-width:520px){.appbar .acc-chip .nick{display:none}.appbar .acc-chip,.appbar .btn.green.sm{max-width:none;margin-left:auto}.appsearch{flex:1 1 100%;order:2}.appbar .dlbar{order:3}body.app .appbar .appback,body.app .appbar .appclose{padding:10px 12px;font-size:12px}}
.dlbar{flex:1 1 100%;display:flex;flex-direction:column;gap:6px;padding:2px 0 2px}
.dlbar[hidden]{display:none!important}
.dlrow{font-size:12px;line-height:1.3}
.dlrow .dltop{display:flex;align-items:center;gap:8px;min-width:0}
.dlrow .dlname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:var(--text)}
.dlrow .dlstate{flex:none;color:var(--text-dim);font-weight:600;letter-spacing:.04em}
.dlrow .dlpct{flex:none;min-width:40px;text-align:right;font-variant-numeric:tabular-nums;color:var(--text-dim)}
.dlrow .dlprog{margin-top:4px;height:4px;border-radius:4px}
.dlrow.queued .dlprog>i{background:rgba(255,255,255,.25)}
.dlrow.buying .dlstate{color:var(--money)}
.dlrow.done .dlstate{color:var(--ok)}.dlrow.done .dlprog>i{background:var(--ok)}
.dlrow.failed .dlstate{color:var(--danger)}.dlrow.failed .dlprog>i{background:var(--danger)}
/* кнопка подписки после установки этого мода (сигнал __fbDl state=done) */
.btn.subbtn.installed{background:rgba(127,227,68,.12);border-color:rgba(127,227,68,.55);color:#e4ffd6}
.btn.subbtn.installed .ic{filter:none;opacity:.9}
/* диалог сайта вместо confirm()/prompt(): в игровом WebView JS-диалоги выключены (site.js ask) */
.fbdlg-back{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(4,8,14,.62);backdrop-filter:blur(6px)}
.fbdlg{width:100%;max-width:440px;background:rgba(13,20,33,.96);border:1px solid var(--gborder-strong);border-radius:var(--radius);padding:20px 20px 16px;box-shadow:var(--shadow);color:var(--text)}
.fbdlg-msg{margin:0 0 16px;font-size:15px;line-height:1.45;white-space:pre-line;overflow-wrap:anywhere}
.fbdlg-input{width:100%;margin:0 0 14px}
.fbdlg-row{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
/* NoSelectCss игры (LX_WebViewHost) вставляется <style> и режется CSP style-src 'self' — те же правила отсюда */
body.app,body.app *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.app input,body.app textarea{-webkit-user-select:text;user-select:text}
body.app{-webkit-tap-highlight-color:transparent}
html.app{overscroll-behavior:contain}

/* панель доступа приватного мода: по якорю #access не прятаться под липкой шапкой */
.panel[data-access]{scroll-margin-top:96px}

/* сердечко комментария: кнопка без рамки, как соседние .stat; лайкнутый — закрашен */
.comment .acts .stat.like { background:none; border:0; padding:0; font:inherit; font-size:11.5px; }
.comment .acts .stat.like.on { color:#ff7a93; }
.comment .acts .stat.like .heart { width:13px; height:13px; flex:none; background-color:currentColor; opacity:.65;
  -webkit-mask:url(/static/icons/heart.png) center/contain no-repeat; mask:url(/static/icons/heart.png) center/contain no-repeat; }
/* лайкнут: сердечко закрашено тем же цветом, что и счётчик */
.comment .acts .stat.like.on .heart { opacity:1; -webkit-mask-image:url(/static/icons/heart-filled.png); mask-image:url(/static/icons/heart-filled.png); }

/* ======================= РЕПОЗИТОРИЙ v3 (05.10.2026) =======================
   каталог с фасетами, списки модов, управление модом, лента ченджлогов, кошелёк автора */
.pre{white-space:pre-line}
.m0{margin:0}
.mb-s{margin-bottom:10px}
.pad-v{padding:14px 0}
.tightcol{gap:2px}
.crumbs .stat:hover{color:var(--text)}
textarea.tall{min-height:180px}
h2.sec .muted{font-size:12px;letter-spacing:.08em}

/* сегмент-переключатель: «Моды | Списки», направление сортировки */
.seg{display:inline-flex;padding:4px;gap:4px;border-radius:13px;background:var(--sunken);border:1px solid var(--gborder);box-shadow:var(--hi)}
.seg a,.seg label{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);cursor:pointer;white-space:nowrap;transition:background .18s var(--ease),color .18s var(--ease)}
.seg a:hover,.seg label:hover{color:var(--text)}
.seg .on,.seg label:has(input:checked){background:linear-gradient(180deg,var(--accent),#2f8ede);color:#04121f}
.seg .on .ic,.seg label:has(input:checked) .ic{filter:brightness(.15)}
.seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg-s{display:flex}.seg-s label{flex:1;justify-content:center;padding:7px 8px;font-size:10.5px}

/* каталог: фасеты слева, как в Workshop */
.layout.browse{grid-template-columns:var(--sidebar) 1fr}
aside.filters{gap:10px}
.fpanel{padding:4px 0;max-height:calc(100vh - 100px);overflow-y:auto;scrollbar-width:thin}
.fpanel .facet{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.fpanel .facet:last-child{border-bottom:none}
.fpanel select{padding:9px 12px}
.finput{display:flex;align-items:center;gap:8px;background:var(--sunken);border:1px solid var(--gborder);border-radius:10px;padding:0 10px}
.finput:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(76,169,245,.18)}
.finput input{border:0;background:none;box-shadow:none;padding:9px 0;min-width:0}
.finput input:focus{box-shadow:none}
.fscroll{max-height:230px;overflow-y:auto;scrollbar-width:thin;margin-right:-6px;padding-right:6px}
.factions .btn{justify-content:center}
.ftoggle{display:none}
.ftoggle .fcount{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:#04121f;font-size:11px}
/* настоящий чекбокс/радио внутри .check: виден только нарисованный .box */
.check input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.check:has(input:checked){color:var(--text)}
.check:has(input:checked) .box{background:linear-gradient(180deg,var(--accent),#2f8ede);border-color:var(--accent-2)}
.check:has(input:checked) .box::after{content:"";width:8px;height:8px;background:#04121f;clip-path:polygon(14% 47%,0 61%,40% 100%,100% 26%,86% 12%,38% 71%)}
.check.radio .box{border-radius:50%}
.check.radio:has(input:checked) .box::after{clip-path:circle(50%);width:6px;height:6px}
.check:has(input:focus-visible) .box{box-shadow:0 0 0 3px rgba(76,169,245,.35)}
.check:has(input:disabled){opacity:.5;cursor:default}
.check .clabel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* активные фильтры чипами над выдачей */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.fchip{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;border-radius:100px;font-size:12px;font-weight:600;
  background:rgba(76,169,245,.14);border:1px solid rgba(76,169,245,.5);color:#cfe8ff;letter-spacing:.03em}
.fchip .x{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.12);font-size:13px;line-height:1}
.fchip:hover .x{background:rgba(255,96,96,.5)}
.fchip.clear{background:transparent;border-color:var(--gborder);color:var(--text-dim);padding-right:12px}
.fchip.clear:hover{color:var(--text)}
@media (max-width:1080px){
  .layout.browse{grid-template-columns:1fr}
  .ftoggle{display:inline-flex}
  aside.filters .fpanel{display:none;max-height:none}
  aside.filters.open .fpanel{display:block}
}

/* коллаж обложек списка: 1–4 картинки сеткой */
.collage{display:grid;gap:2px;background:#0b1420;overflow:hidden}
.collage > img{width:100%;height:100%;object-fit:cover;min-height:0}
.collage.n1{grid-template-columns:1fr}
.collage.n2{grid-template-columns:1fr 1fr}
.collage.n3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.collage.n3 > img:first-of-type{grid-row:1 / span 2}
.collage.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.card .thumb.collage > img{position:relative}
.card .thumb.collage .chip{position:absolute}
.ccard .ccount{position:absolute;right:10px;bottom:10px;z-index:2;padding:4px 9px;border-radius:8px;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;background:rgba(8,13,21,.82);border:1px solid var(--gborder)}
.wideshelf{grid-auto-columns:260px}
@media (max-width:620px){.wideshelf{grid-auto-columns:min(72vw,240px)}}
.work.mini{padding:8px;gap:12px}
.work.mini .pic{border-radius:8px}
.work .pic.collage{display:grid}

/* страница списка */
.chero{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:22px;padding:16px;align-items:center}
.chero .collage.big{aspect-ratio:16/9;border-radius:var(--radius-s);border:1px solid var(--gborder)}
.chero .modtitle{margin:10px 0 8px}
.chero .authorrow{gap:9px;font-weight:700;letter-spacing:.04em}
.chero .authorrow .ava{width:26px;height:26px;font-size:10px}
.cstats{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px}
@media (max-width:760px){.chero{grid-template-columns:1fr}}
.clistmods{display:flex;flex-direction:column;gap:8px}
.citemrow{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--gborder);border-radius:var(--radius-s);background:rgba(255,255,255,.03)}
.citemrow:hover{border-color:var(--gborder-strong)}
.citemrow .cnum{width:22px;flex:none;text-align:center;color:var(--text-dim2);font-weight:700;font-size:12px}
.citemrow .pic{width:112px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;flex:none;border:1px solid var(--gborder)}
.citemrow .pic img{width:100%;height:100%;object-fit:cover}
.citemrow .w-name{font-weight:700;letter-spacing:.03em}
.citemrow .w-name:hover{color:var(--accent-2)}
.citemrow .w-meta{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:6px;align-items:center}
@media (max-width:620px){.citemrow{flex-wrap:wrap}.citemrow .pic{width:88px}.citemrow > .row{width:100%;justify-content:flex-end}}
.bigpct.sm{font-size:30px}

/* страница мода: плашка автора, ченджлоги, комментарии */
.authorbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  border-color:rgba(76,169,245,.45);background:rgba(76,169,245,.08)}
.vlog{display:flex;flex-direction:column}
.ventry{padding:12px 0 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.ventry:first-child{padding-top:0}
.ventry:last-child{border-bottom:none;padding-bottom:0}
.vhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.vnum{font-weight:900;font-size:15px;letter-spacing:.04em;color:var(--accent-2)}
.ventry:not(.cur) .vnum{color:var(--text)}
.vtext{color:rgba(233,240,249,.82);font-size:13.5px;line-height:1.6}
.ventry.edit textarea{min-height:70px}
.comments .commentbox{padding-bottom:6px}
.clist{margin-top:6px}

/* страница автора: кошелёк */
.wallet{display:flex;flex-direction:column;gap:8px;margin-left:auto;min-width:200px}
.wrow{display:grid;grid-template-columns:26px auto 1fr;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;
  background:var(--sunken);border:1px solid var(--gborder);box-shadow:var(--hi)}
.wrow img{width:22px;height:22px;object-fit:contain}
.wval{font-size:20px;font-weight:900;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.wlbl{justify-self:end;font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.14em}
.money-c{color:var(--money)}.coin-c{color:var(--warn)}
@media (max-width:620px){.wallet{width:100%;margin-left:0}}

/* управление модом: скриншоты */
.shotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.shotcell{position:relative;border:1px solid var(--gborder);border-radius:12px;overflow:hidden;background:#0b1420}
.shotcell > img{width:100%;aspect-ratio:16/9;object-fit:cover}
.shotcell .cover-tag{position:absolute;top:8px;left:8px;display:none}
.shotcell:first-child{border-color:var(--money)}
.shotcell:first-child .cover-tag{display:inline-flex}
.shotacts{display:flex;justify-content:space-between;gap:4px;padding:6px;background:rgba(8,13,21,.85)}
.shotacts .btn{padding:6px 8px;flex:1;justify-content:center}
.newlist .fieldrow{align-items:flex-end}
.newlist select{min-width:150px}
.profcard .profhead{align-items:center}
/* [hidden] обязан прятать и .tag/.btn/.drop: их display иначе перебивает атрибут */
[hidden]{display:none!important}
div.field{display:flex;flex-direction:column;gap:7px;font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim)}
div.field .lic-list{text-transform:none;letter-spacing:.02em}
.comments h2.sec{margin:0 0 6px}
.seg-s label{flex:1 1 0;min-width:0;justify-content:center;white-space:normal;text-align:center;line-height:1.2;padding:7px 4px;font-size:10px;letter-spacing:.04em;gap:4px}
.seg-s label .ic{width:12px;height:12px;flex:none}
.citemrow{flex-wrap:wrap}
.citemrow .wgrow{flex:1 1 200px;min-width:0}
.citemrow > .row{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:520px){.gallery .thumbs{grid-template-columns:repeat(4,1fr)}}
/* игровые спрайты валют (Assets/Sprites/money.png, coins.png) */
img.cur{width:18px;height:18px;object-fit:contain;flex:none}
.wrow img.cur{width:30px;height:30px}
.wrow{grid-template-columns:34px auto 1fr}

/* таблица цен предметов в форме загрузки (V19) */
.itemrows{display:flex;flex-direction:column;gap:8px}
.itemrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.itemrow .iname{flex:1;min-width:160px;overflow-wrap:anywhere}
.itemrow input{width:130px;min-width:0}