/* CSS-сборка BAGID Torrent v0.8.584. */
/* BAGID source: assets/css/variables.css */
/* Назначение файла: Общие стили «variables»: правила интерфейса, применяемые на нескольких страницах и компонентах. */
/* Каждый комментарий ниже поясняет назначение следующего CSS-блока. */

/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «:root». */
:root{
  --bg:#030b17;
  --panel:#07182a;
  --panel-2:#0a2038;
  --glass:rgba(8,25,44,.78);
  --glass-strong:rgba(10,31,54,.92);
  --line:rgba(80,155,255,.23);
  --line-strong:rgba(111,169,255,.48);
  --text:#eef6ff;
  --muted:#9db0c7;
  --soft:#c9d8ea;
  --green:#23d883;
  --green-dark:#0d7f4e;
  --blue:#2ca8ff;
  --violet:#8e5cff;
  --red:#ff4b67;
  --orange:#ff9b32;
  --gold:#ffc66d;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 18px 60px rgba(0,0,0,.42);
  --inset:inset 0 1px 0 rgba(255,255,255,.08);
  --font:Inter,Segoe UI,Roboto,Arial,sans-serif;
}


/* BAGID source: assets/css/common.css */
/* Назначение файла: Общие стили «common»: правила интерфейса, применяемые на нескольких страницах и компонентах. */
/* Каждый комментарий ниже поясняет назначение следующего CSS-блока. */

/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «*». */
*{box-sizing:border-box}
/* Назначение CSS-блока: Настраивает элементы селектора «html,body». */
html,body{height:100%}
/* Назначение CSS-блока: Настраивает элементы селектора «body». */
body{margin:0;font-family:var(--font);background:radial-gradient(circle at 20% -10%,rgba(48,117,255,.18),transparent 28%),radial-gradient(circle at 88% 8%,rgba(119,56,255,.16),transparent 30%),linear-gradient(135deg,#020712,#061426 55%,#03111f);color:var(--text);overflow:hidden}
/* Назначение CSS-блока: Настраивает элементы селектора «.bg-orb». */
.bg-orb{position:fixed;filter:blur(28px);opacity:.45;pointer-events:none}
/* Назначение CSS-блока: Настраивает элементы селектора «.bg-orb-a». */
.bg-orb-a{width:240px;height:240px;background:#164dff;left:16%;top:8%}
/* Назначение CSS-блока: Настраивает элементы селектора «.bg-orb-b». */
.bg-orb-b{width:260px;height:260px;background:#6d2aff;right:14%;bottom:8%}
/* Назначение CSS-блока: Настраивает элементы селектора «.app-shell». */
.app-shell{height:100vh;padding:5px;display:flex;flex-direction:column;gap:8px}
/* Назначение CSS-блока: Настраивает элементы селектора «.app-header». */
.app-header{display:grid;grid-template-columns:300px 1fr;gap:8px;min-height:56px}
/* Назначение CSS-блока: Настраивает элементы селектора «.app-layout». */
.app-layout{min-height:0;flex:1;display:grid;grid-template-columns:300px minmax(520px,1fr) minmax(380px,560px);gap:8px}
/* Назначение CSS-блока: Настраивает элементы селектора «.scroll-area». */
.scroll-area{min-height:0;overflow:auto;padding-right:2px}
/* Назначение CSS-блока: Настраивает элементы селектора «.scroll-area::-webkit-scrollbar». */
.scroll-area::-webkit-scrollbar{width:7px}
/* Назначение CSS-блока: Настраивает элементы селектора «.scroll-area::-webkit-scrollbar-thumb». */
.scroll-area::-webkit-scrollbar-thumb{background:rgba(111,169,255,.25);border-radius:50px}
/* Назначение CSS-блока: Настраивает элементы селектора «.glass-panel». */
.glass-panel{background:linear-gradient(180deg,rgba(9,27,48,.88),rgba(5,17,31,.92));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow),var(--inset);backdrop-filter:blur(18px)}
/* Назначение CSS-блока: Настраивает элементы селектора «.panel-title». */
.panel-title{margin:0 0 14px;font-size:18px;font-weight:700;letter-spacing:.2px}
/* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «.btn». */
.btn{position:relative;overflow:hidden;border:1px solid rgba(111,169,255,.24);background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.015) 0,rgba(255,255,255,.008) 28%,rgba(255,255,255,0) 62%),linear-gradient(180deg,rgba(28,70,115,.18),rgba(9,26,48,.14));color:var(--text);border-radius:10px;padding:11px 16px;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 20px rgba(0,0,0,.14);transition:transform .2s ease,border-color .2s ease,filter .2s ease,background .2s ease;backdrop-filter:blur(14px)}
/* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «.btn:hover». */
.btn:hover{transform:translateY(-2px);border-color:var(--line-strong);filter:brightness(1.05);box-shadow:0 0 0 1px rgba(255,255,255,.03),0 12px 26px rgba(0,0,0,.20),0 0 22px rgba(76,139,255,.08)}
/* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «.btn:focus». */
.btn:focus{outline:none}
/* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «.btn-green». */
.btn-green{background:radial-gradient(circle at 50% 52%,rgba(255,255,255,.012) 0,rgba(255,255,255,.006) 25%,rgba(255,255,255,0) 58%),linear-gradient(180deg,rgba(28,157,99,.26),rgba(9,89,56,.16));border-color:rgba(39,232,137,.26);}
/* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «.btn-red». */
.btn-red{background:radial-gradient(circle at 50% 52%,rgba(255,255,255,.012) 0,rgba(255,255,255,.006) 25%,rgba(255,255,255,0) 58%),linear-gradient(180deg,rgba(151,38,57,.26),rgba(82,15,29,.16));border-color:rgba(255,80,108,.26);}
/* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «.btn-violet». */
.btn-violet{background:radial-gradient(circle at 50% 52%,rgba(255,255,255,.012) 0,rgba(255,255,255,.006) 25%,rgba(255,255,255,0) 58%),linear-gradient(180deg,rgba(79,42,148,.24),rgba(34,18,75,.16));border-color:rgba(145,93,255,.28);}
/* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «.btn-blue». */
.btn-blue{background:radial-gradient(circle at 50% 52%,rgba(255,255,255,.012) 0,rgba(255,255,255,.006) 25%,rgba(255,255,255,0) 58%),linear-gradient(180deg,rgba(22,90,158,.24),rgba(8,43,83,.16));border-color:rgba(44,168,255,.28);}
/* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «.btn-gold». */
.btn-gold{background:radial-gradient(circle at 50% 52%,rgba(255,255,255,.012) 0,rgba(255,255,255,.006) 25%,rgba(255,255,255,0) 58%),linear-gradient(180deg,rgba(161,91,25,.28),rgba(92,48,11,.18));border-color:rgba(255,198,109,.30);color:#fff1d0;}
/* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «.btn-orange». */
.btn-orange{background:radial-gradient(circle at 50% 52%,rgba(255,255,255,.012) 0,rgba(255,255,255,.006) 25%,rgba(255,255,255,0) 58%),linear-gradient(180deg,rgba(217,105,32,.28),rgba(114,49,11,.18));border-color:rgba(255,155,50,.30);}
/* Назначение CSS-блока: Настраивает элементы селектора «.icon». */
.icon{width:22px;height:22px;display:inline-grid;place-items:center;border-radius:7px;background:rgba(255,255,255,.025);color:#9ed7ff}
/* Назначение CSS-блока: Настраивает элементы селектора «.icon img». */
.icon img{width:20px;height:20px;display:block;filter:drop-shadow(0 0 8px rgba(95,163,255,.28))}
/* Назначение CSS-блока: Настраивает внешний вид статусов для селектора «.status». */
.status{display:inline-flex;align-items:center;border-radius:7px;padding:5px 9px;font-size:12px;border:1px solid transparent}
/* Назначение CSS-блока: Настраивает внешний вид статусов для селектора «.status.active». */
.status.active{background:rgba(24,201,117,.14);border-color:rgba(24,201,117,.35);color:#41e792}
/* Назначение CSS-блока: Настраивает внешний вид статусов для селектора «.status.moderation». */
.status.moderation{background:rgba(44,168,255,.14);border-color:rgba(44,168,255,.35);color:#74c8ff}
/* Назначение CSS-блока: Настраивает внешний вид статусов для селектора «.status.rejected». */
.status.rejected{background:rgba(255,75,103,.13);border-color:rgba(255,75,103,.35);color:#ff7187}
/* Назначение CSS-блока: Настраивает внешний вид премиум-раздач и статусов для селектора «.status.premium». */
.status.premium{background:rgba(255,155,50,.15);border-color:rgba(255,155,50,.35);color:#ffc66d}
/* Назначение CSS-блока: Настраивает элементы селектора «.muted». */
.muted{color:var(--muted)}
/* Назначение CSS-блока: Настраивает внешний вид списков для селектора «.card-list». */
.card-list{display:flex;flex-direction:column;gap:12px}
/* Назначение CSS-блока: Настраивает внешний вид раздач для селектора «.release-row». */
.release-row{display:grid;grid-template-columns:90px 1fr;gap:14px;padding:10px;border-bottom:1px solid rgba(111,169,255,.11);cursor:pointer;border-radius:12px}
/* Назначение CSS-блока: Настраивает внешний вид раздач для селектора «.release-row:hover». */
.release-row:hover{background:rgba(44,168,255,.05);transform:translateY(-2px)}
/* Назначение CSS-блока: Настраивает внешний вид обложек для селектора «.poster». */
.poster{width:90px;height:132px;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.12)}
/* Назначение CSS-блока: Настраивает элементы селектора «.meta-line». */
.meta-line{display:flex;gap:15px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:12px}
/* Назначение CSS-блока: Настраивает элементы селектора «.mini-card-grid». */
.mini-card-grid{display:grid;grid-template-columns:1fr;gap:10px}
/* Назначение CSS-блока: Настраивает элементы селектора «.mini-card». */
.mini-card{padding:10px;border-radius:12px;border:1px solid rgba(111,169,255,.2);background:rgba(4,18,34,.68)}
/* Назначение CSS-блока: Настраивает элементы селектора «.mini-card img». */
.mini-card img{width:64px;height:94px;object-fit:cover;border-radius:7px;float:left;margin-right:10px}
/* Назначение CSS-блока: Настраивает внешний вид модального окна для селектора «.modal-backdrop». */
.modal-backdrop{position:fixed;inset:0;background:rgba(1,6,12,.58);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;padding:14px;z-index:50}
/* Закрытые modal-root остаются в DOM только ради безопасного lifecycle компонентов; они не участвуют в выделении/интерактивности. */
.modal-backdrop:not(.open),.modal-backdrop[inert],.modal-backdrop:not(.open) *,.modal-backdrop[inert] *{user-select:none!important;-webkit-user-select:none!important;-webkit-touch-callout:none!important}
/* Назначение CSS-блока: Настраивает внешний вид модального окна для селектора «.modal-backdrop.open». */
.modal-backdrop.open{display:flex}
/* Назначение CSS-блока: Настраивает внешний вид модального окна для селектора «.modal». */
.modal{width:min(760px,96vw);max-height:92vh;overflow:auto;padding:18px;background:linear-gradient(180deg,rgba(10,28,50,.96),rgba(5,15,29,.97));border:1px solid rgba(125,104,255,.55);border-radius:15px;box-shadow:0 28px 90px rgba(0,0,0,.62)}
/* Назначение CSS-блока: Настраивает внешний вид формы для селектора «.form-grid». */
.form-grid{display:grid;gap:12px}
/* Назначение CSS-блока: Настраивает элементы селектора «.field label». */
.field label{display:block;margin-bottom:6px;font-size:14px}
/* Назначение CSS-блока: Настраивает внешний вид полей ввода для селектора «.input,.textarea». */
.input,.textarea{width:100%;border:1px solid rgba(111,169,255,.22);background:rgba(3,13,25,.65);color:var(--text);border-radius:8px;padding:11px 12px;font:inherit}
/* Назначение CSS-блока: Настраивает элементы селектора «.textarea». */
.textarea{min-height:76px;resize:vertical}
/* Назначение CSS-блока: Настраивает элементы селектора «.dropzone». */
.dropzone{min-height:170px;border:1px dashed rgba(169,194,231,.45);border-radius:10px;display:grid;place-items:center;color:var(--muted);text-align:center;background:rgba(4,16,30,.56)}
/* Назначение CSS-блока: Настраивает внешний вид модального окна для селектора «.modal-actions». */
.modal-actions{display:flex;justify-content:space-between;gap:12px;margin-top:16px}
/* Назначение CSS-блока: Настраивает внешний вид списков для селектора «.file-list». */
.file-list{border:1px solid rgba(111,169,255,.14);border-radius:10px;overflow:hidden}
/* Назначение CSS-блока: Настраивает элементы селектора «.file-item». */
.file-item{display:flex;justify-content:space-between;gap:12px;padding:7px 10px;border-bottom:1px solid rgba(111,169,255,.1);font-size:13px}
/* Назначение CSS-блока: Настраивает элементы селектора «.file-item:last-child». */
.file-item:last-child{border-bottom:0}
/* Назначение CSS-блока: Настраивает элементы селектора «.pill». */
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(111,169,255,.2);background:rgba(255,255,255,.04);border-radius:999px;padding:5px 9px}
/* Назначение CSS-блока: Настраивает элементы селектора «.hidden». */
.hidden{display:none!important}

/* Назначение CSS-блока: Настраивает внешний вид ошибок для селектора «.fatal-error». */
.fatal-error{
  margin:20px;
  padding:18px;
  border:1px solid rgba(255,80,80,.45);
  border-radius:18px;
  color:#fff;
  background:rgba(40,0,20,.75);
  white-space:pre-wrap;
  font:14px/1.45 Consolas, monospace;
}

/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.panel-title-icon». */
.panel-title-icon{display:flex;align-items:center;gap:10px}
/* Назначение CSS-блока: Настраивает элементы селектора «.panel-title-icon img». */
.panel-title-icon img{width:22px;height:22px;filter:drop-shadow(0 0 10px rgba(99,167,255,.35))}
/* Назначение CSS-блока: Настраивает элементы селектора «.meta-icon,.inline-icon». */
.meta-icon,.inline-icon{width:16px;height:16px;vertical-align:-3px;opacity:.92;filter:drop-shadow(0 0 8px rgba(99,167,255,.24))}
/* Назначение CSS-блока: Настраивает элементы селектора «.inline-icon». */
.inline-icon{margin-right:5px}
/* Назначение CSS-блока: Настраивает элементы селектора «.copy-right». */
.copy-right{margin-left:8px}
/* Назначение CSS-блока: Настраивает элементы селектора «.copy-inline». */
.copy-inline{width:14px;height:14px;vertical-align:-2px;opacity:.78}
/* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «.btn::before». */
.btn::before{content:'';position:absolute;inset:-40% auto auto -120%;width:60%;height:180%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);transform:rotate(18deg);transition:transform .6s ease;pointer-events:none}
/* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «.btn:hover::before». */
.btn:hover::before{transform:translateX(280%) rotate(18deg)}
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.glass-panel». */
.glass-panel{animation:panelFade .5s ease both}
/* Назначение CSS-блока: Настраивает элементы селектора «.reveal». */
.reveal{animation:cardFade .45s ease both}
/* Назначение CSS-блока: Анимация `@keyframes panelFade` и её ключевые состояния. */
@keyframes panelFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Назначение CSS-блока: Анимация `@keyframes cardFade` и её ключевые состояния. */
@keyframes cardFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Назначение CSS-блока: Анимация `@keyframes pulseGlow` и её ключевые состояния. */
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(119,92,255,.46),0 0 29px rgba(98,79,255,.7),0 0 48px rgba(55,173,255,.18)}50%{box-shadow:0 0 0 8px rgba(119,92,255,0),0 0 42px rgba(98,79,255,.94),0 0 64px rgba(55,173,255,.3)}}
/* Назначение CSS-блока: Настраивает внешний вид обложек для селектора «.poster,.details-poster,.mini-card img». */
.poster,.details-poster,.mini-card img{transition:transform .25s ease, box-shadow .25s ease}
/* Назначение CSS-блока: Настраивает внешний вид раздач и обложек для селектора «.release-row:hover .poster,.mini-card:hover img,.details-top:hover .details-poster». */
.release-row:hover .poster,.mini-card:hover img,.details-top:hover .details-poster{transform:scale(1.03);box-shadow:0 12px 28px rgba(0,0,0,.36),0 0 18px rgba(80,131,255,.08)}
/* Назначение CSS-блока: Настраивает внешний вид раздач и комментариев для селектора «.mini-card,.release-row,.comment-card». */
.mini-card,.release-row,.comment-card{transition:transform .25s ease, background .25s ease, border-color .25s ease}
/* Назначение CSS-блока: Настраивает внешний вид комментариев для селектора «.mini-card:hover,.comment-card:hover». */
.mini-card:hover,.comment-card:hover{transform:translateY(-2px);border-color:rgba(111,169,255,.28);background:rgba(255,255,255,.04)}


/* v0.1.6 override: 512px PNG icons are rendered small in UI */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.icon img». */
.icon img{width:20px!important;height:20px!important;max-width:20px!important;max-height:20px!important}
/* Назначение CSS-блока: Настраивает элементы селектора «.panel-title-icon img». */
.panel-title-icon img{width:22px!important;height:22px!important;max-width:22px!important;max-height:22px!important}
/* Назначение CSS-блока: Настраивает элементы селектора «.meta-icon,.inline-icon». */
.meta-icon,.inline-icon{width:16px!important;height:16px!important;max-width:16px!important;max-height:16px!important}

/* ==========================================================================
v0.1.7 — UI fixes: modals, spacing, live background, no focus rectangles
========================================================================== */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «*». */
*{-webkit-tap-highlight-color:transparent}
/* Назначение CSS-блока: Настраивает внешний вид кнопок и полей ввода для селектора «button,.btn,input,textarea,select,a». */
button,.btn,input,textarea,select,a{outline:none!important}
/* Назначение CSS-блока: Настраивает внешний вид кнопок и полей ввода для селектора «button:focus,.btn:focus,button:focus-visible,.btn:focus-visible,input:focus,textarea:focus». */
button:focus,.btn:focus,button:focus-visible,.btn:focus-visible,input:focus,textarea:focus{outline:none!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 20px rgba(0,0,0,.14)!important}
/* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «button:active,.btn:active». */
button:active,.btn:active{outline:none!important;transform:none!important}
/* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «.btn::before». */
.btn::before{display:none!important;content:none!important}

/* Назначение CSS-блока: Настраивает внешний вид модального окна для селектора «body.modal-open #app». */
body.modal-open #app{filter:blur(12px);transition:filter .22s ease}
/* Назначение CSS-блока: Настраивает внешний вид модального окна для селектора «body.modal-open». */
body.modal-open{overflow:hidden}

/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.bg-orb». */
.bg-orb{animation:bagidFloat 80s ease-in-out infinite alternate}
/* Назначение CSS-блока: Настраивает элементы селектора «.bg-orb-a». */
.bg-orb-a{animation-duration:96s}
/* Назначение CSS-блока: Настраивает элементы селектора «.bg-orb-b». */
.bg-orb-b{animation-duration:112s}
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «body::before,body::after». */
body::before,body::after{content:'';position:fixed;pointer-events:none;z-index:-1;border-radius:999px;filter:blur(34px);opacity:.22;animation:bagidFloat2 130s ease-in-out infinite alternate}
/* Назначение CSS-блока: Настраивает элементы селектора «body::before». */
body::before{width:220px;height:220px;left:42%;top:18%;background:#14d8ff}
/* Назначение CSS-блока: Настраивает элементы селектора «body::after». */
body::after{width:260px;height:260px;left:68%;top:70%;background:#ff8a1f}
/* Назначение CSS-блока: Анимация `@keyframes bagidFloat` и её ключевые состояния. */
@keyframes bagidFloat{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(42px,26px,0) scale(1.08)}100%{transform:translate3d(-35px,54px,0) scale(.94)}}
/* Назначение CSS-блока: Анимация `@keyframes bagidFloat2` и её ключевые состояния. */
@keyframes bagidFloat2{0%{transform:translate3d(0,0,0) scale(.9)}50%{transform:translate3d(-65px,45px,0) scale(1.1)}100%{transform:translate3d(72px,-36px,0) scale(.98)}}

/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-layout-main». */
.app-layout-main{grid-template-columns:300px minmax(760px,1fr)}
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width:1500px)`. */
@media (min-width:1500px){
  /* Назначение CSS-блока: Настраивает элементы селектора «.app-layout-main». */
  .app-layout-main{grid-template-columns:300px minmax(900px,1fr)}}
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width:1180px) and (max-width:1499px)`. */
@media (min-width:1180px) and (max-width:1499px){
  /* Назначение CSS-блока: Настраивает элементы селектора «.app-layout-main». */
  .app-layout-main{grid-template-columns:290px minmax(660px,1fr)}}

/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.meta-line». */
.meta-line{margin-top:9px}
/* Назначение CSS-блока: Настраивает внешний вид раздач и статусов для селектора «.release-row .status». */
.release-row .status{margin-bottom:0}
/* Назначение CSS-блока: Настраивает внешний вид статусов для селектора «.mini-card .status». */
.mini-card .status{margin:8px 0 9px}
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.block-action,.latest .more». */
.block-action,.latest .more{display:flex;width:calc(100% - 10px);margin:14px auto 0;min-width:0;justify-content:center}
/* Назначение CSS-блока: Настраивает элементы селектора «.panel-head». */
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
/* Назначение CSS-блока: Настраивает элементы селектора «.panel-head .panel-title». */
.panel-head .panel-title{margin:0}

/* Назначение CSS-блока: Настраивает внешний вид модального окна для селектора «.modal-backdrop». */
.modal-backdrop{z-index:70}
/* Назначение CSS-блока: Настраивает внешний вид модального окна для селектора «.modal». */
.modal{box-shadow:0 28px 90px rgba(0,0,0,.72),0 0 0 1px rgba(125,104,255,.22)}
/* Назначение CSS-блока: Настраивает элементы селектора «.cat-btn span:last-child». */
.cat-btn span:last-child{display:inline-flex}

/* ==========================================================================
v0.1.8 — header clean, modal blur fixed, section list windows, random live background
========================================================================== */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-header». */
.app-header{background:transparent!important;box-shadow:none!important;border:0!important}
/* Назначение CSS-блока: Настраивает внешний вид верхней панели и логотипа для селектора «#logo-root,#topbar-root». */
#logo-root,#topbar-root{background:transparent!important;box-shadow:none!important;border:0!important}
/* Назначение CSS-блока: Настраивает внешний вид верхней панели и логотипа для селектора «#logo-root::before,#topbar-root::before,.app-header::before». */
#logo-root::before,#topbar-root::before,.app-header::before{display:none!important;content:none!important}

/* Назначение CSS-блока: Настраивает внешний вид модального окна для селектора «body.modal-open #app». */
body.modal-open #app{filter:blur(12px);transition:filter .22s ease}
/* Назначение CSS-блока: Настраивает внешний вид модального окна для селектора «#modals-root». */
#modals-root{position:relative;z-index:80}
/* Назначение CSS-блока: Настраивает внешний вид модального окна для селектора «#modals-root .modal-backdrop». */
#modals-root .modal-backdrop{z-index:90}

/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.bg-live-layer». */
.bg-live-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-2}
/* Назначение CSS-блока: Настраивает элементы селектора «.bg-shape». */
.bg-shape{position:absolute;border-radius:999px;filter:blur(38px);mix-blend-mode:screen;will-change:left,top,transform}
/* Назначение CSS-блока: Настраивает элементы селектора «.bg-shape-1». */
.bg-shape-1{border-radius:32% 68% 61% 39% / 45% 34% 66% 55%}
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.bg-shape-2». */
.bg-shape-2{border-radius:20% 80% 30% 70% / 72% 28% 72% 28%}
/* Назначение CSS-блока: Настраивает элементы селектора «.bg-shape-3». */
.bg-shape-3{border-radius:50% 30% 70% 40% / 40% 65% 35% 60%}

/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.latest .more,.block-action». */
.latest .more,.block-action{height:40px}
/* Назначение CSS-блока: Настраивает элементы селектора «.votes». */
.votes{gap:12px!important;flex-wrap:wrap}

/* v0.1.8.1 — точечное исправление запуска: основной layout всегда видим */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-layout, .app-layout-main». */
.app-layout,
.app-layout-main{
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
  min-height:0;
}
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.left-rail,.center-rail». */
.left-rail,.center-rail{
  display:block!important;
  visibility:visible!important;
}
/* Назначение CSS-блока: Настраивает внешний вид сообщений об ошибке для селектора «.component-error». */
.component-error{
  padding:14px;
  border-color:rgba(255,80,108,.35)!important;
  color:#ffb8c4;
}
/* Назначение CSS-блока: Настраивает внешний вид сообщений об ошибке для селектора «.component-error b». */
.component-error b{display:block;margin-bottom:6px}
/* Назначение CSS-блока: Настраивает внешний вид ошибок для селектора «.component-error small». */
.component-error small{display:block;color:var(--muted);white-space:pre-wrap}
/* Назначение CSS-блока: Настраивает элементы селектора «body:not(.bagid-ready) .app-layout». */
body:not(.bagid-ready) .app-layout{
  opacity:1!important;
}

/* ==========================================================================
v0.1.9 — My releases, topbar horizontal buttons, WebGL background, clean header
========================================================================== */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «#bagid-webgl-bg». */
#bagid-webgl-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  filter:blur(18px) saturate(1.35);
  opacity:.75;
}
/* Назначение CSS-блока: Настраивает внешний вид модального окна для селектора «#app,#modals-root». */
#app,#modals-root{position:relative;z-index:2}
/* Назначение CSS-блока: Настраивает элементы селектора «.bg-orb». */
.bg-orb{display:none!important}

/* Назначение CSS-блока: Настраивает внешний вид верхней панели и логотипа для селектора «.app-header, #logo-root, #topbar-root, .logo-box.glass-panel, .topbar.glass-panel». */
.app-header,
#logo-root,
#topbar-root,
.logo-box.glass-panel,
.topbar.glass-panel{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Назначение CSS-блока: Настраивает внешний вид логотипа для селектора «.logo-box.glass-panel». */
.logo-box.glass-panel{
  padding:8px 10px!important;
}

/* Назначение CSS-блока: Настраивает внешний вид верхней панели для селектора «.topbar.glass-panel». */
.topbar.glass-panel{
  padding:6px 0!important;
}

/* Назначение CSS-блока: Настраивает внешний вид кнопок и верхней панели для селектора «.topbar .btn». */
.topbar .btn{
  flex-direction:row!important;
  height:42px!important;
  min-height:42px!important;
  padding:6px 14px!important;
  gap:10px!important;
  text-align:left!important;
  white-space:nowrap!important;
}

/* Назначение CSS-блока: Настраивает внешний вид верхней панели для селектора «.topbar .icon». */
.topbar .icon{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  border-radius:9px!important;
}

/* Назначение CSS-блока: Настраивает внешний вид кнопок и верхней панели для селектора «.topbar .btn img, .topbar .icon img». */
.topbar .btn img,
.topbar .icon img{
  width:28px!important;
  height:28px!important;
  max-width:28px!important;
  max-height:28px!important;
}

/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.panel-title-icon img, .glass-panel h2.panel-title img, .glass-panel h3.panel-title img». */
.panel-title-icon img,
.glass-panel h2.panel-title img,
.glass-panel h3.panel-title img{
  width:30px!important;
  height:30px!important;
  max-width:30px!important;
  max-height:30px!important;
}

/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.panel-title-icon». */
.panel-title-icon{
  gap:12px!important;
  align-items:center!important;
}

/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media(max-width:980px){

  /* Назначение CSS-блока: Настраивает внешний вид кнопок и верхней панели для селектора «.topbar .btn». */
  .topbar .btn{
    flex-direction:row!important;
    height:44px!important;
    min-height:44px!important;
    padding:6px 10px!important;
    justify-content:flex-start!important;
  }
  /* Назначение CSS-блока: Настраивает внешний вид верхней панели для селектора «.topbar .icon». */
  .topbar .icon{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
  }
  /* Назначение CSS-блока: Настраивает внешний вид кнопок и верхней панели для селектора «.topbar .btn img, .topbar .icon img». */
  .topbar .btn img,
  .topbar .icon img{
    width:27px!important;
    height:27px!important;
    max-width:27px!important;
    max-height:27px!important;
  }
}

/* Назначение CSS-блока: Настраивает внешний вид сообщений об ошибке для селектора «.component-error». */
.component-error{
  display:block!important;
}

/* ==========================================================================
v0.1.10 — mobile layout repair
========================================================================== */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media (max-width:980px){

  /* Назначение CSS-блока: Настраивает элементы селектора «html,body». */
  html,body{width:100%;max-width:100%;overflow-x:hidden}

  /* Назначение CSS-блока: Настраивает элементы селектора «.app-shell». */
  .app-shell{width:100%;max-width:100%;padding:5px;overflow-x:hidden}
  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-layout, .app-layout-main». */
  .app-layout,
  .app-layout-main{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    grid-template-columns:none!important;
  }
  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.left-rail,.center-rail,.content-columns». */
  .left-rail,.center-rail,.content-columns{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
  }
  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.content-columns». */
  .content-columns{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
    transform:none!important;
  }
  /* Назначение CSS-блока: Настраивает внешний вид премиум-раздач и раздач для селектора «#premium-releases-root,#latest-releases-root,#active-releases-root, .premium-panel,.latest,.active-panel». */
  #premium-releases-root,#latest-releases-root,#active-releases-root,
  .premium-panel,.latest,.active-panel{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    transform:none!important;
  }
  /* Назначение CSS-блока: Настраивает внешний вид списков для селектора «.mini-card-grid,.card-list». */
  .mini-card-grid,.card-list{
    width:100%!important;
    min-width:0!important;
  }
  /* Назначение CSS-блока: Настраивает внешний вид раздач для селектора «.mini-card,.release-row». */
  .mini-card,.release-row{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  /* Назначение CSS-блока: Настраивает внешний вид раздач для селектора «.release-row». */
  .release-row{
    grid-template-columns:78px minmax(0,1fr)!important;
  }
  /* Назначение CSS-блока: Настраивает внешний вид раздач для селектора «.release-info,.release-info h3». */
  .release-info,.release-info h3{
    min-width:0!important;
    overflow-wrap:anywhere;
  }

  /* Назначение CSS-блока: Настраивает внешний вид модального окна для селектора «.modal-backdrop». */
  .modal-backdrop{
    padding:8px!important;
    align-items:flex-start!important;
    overflow:auto!important;
  }
  /* Назначение CSS-блока: Настраивает внешний вид модального окна для селектора «.modal». */
  .modal{
    width:100%!important;
    max-width:100%!important;
    max-height:none!important;
    min-width:0!important;
    margin:0!important;
    overflow:visible!important;
  }
  /* Назначение CSS-блока: Настраивает внешний вид формы для селектора «.form-grid». */
  .form-grid{width:100%;min-width:0}

  /* Назначение CSS-блока: Настраивает внешний вид обложек для селектора «.cover-grid». */
  .cover-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  /* Назначение CSS-блока: Настраивает внешний вид обложек для селектора «.cover-grid .poster». */
  .cover-grid .poster{
    width:100%!important;
    max-width:180px!important;
    height:auto!important;
    justify-self:center;
  }
  /* Назначение CSS-блока: Настраивает внешний вид полей ввода для селектора «.input,.textarea». */
  .input,.textarea{min-width:0}

  /* Назначение CSS-блока: Настраивает элементы селектора «.file-item». */
  .file-item{
    display:flex!important;
    gap:8px;
    align-items:flex-start;
  }
  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.file-item span:first-child». */
  .file-item span:first-child{
    min-width:0;
    overflow-wrap:anywhere;
  }
}

/* v0.1.10 — topbar button content aligned left */
/* Назначение CSS-блока: Настраивает внешний вид кнопок и верхней панели для селектора «.topbar .btn». */
.topbar .btn{
  justify-content:flex-start!important;
  text-align:left!important;
}
/* Назначение CSS-блока: Настраивает внешний вид кнопок и верхней панели для селектора «.topbar .btn span:not(.icon)». */
.topbar .btn span:not(.icon){
  text-align:left!important;
}

/* ==========================================================================
v0.1.11 — icon backgrounds removed, button icons larger, profile gap
========================================================================== */

/* убрать квадратный фон под иконками на кнопках и логотипе */
/* Назначение CSS-блока: Настраивает внешний вид кнопок и логотипа для селектора «.icon, .logo-gem, .logo-box .logo-gem, .panel-title-icon > img, .btn > img». */
.icon,
.logo-gem,
.logo-box .logo-gem,
.panel-title-icon > img,
.btn > img{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Назначение CSS-блока: Настраивает внешний вид логотипа для селектора «.icon::before,.icon::after, .logo-gem::before,.logo-gem::after». */
.icon::before,.icon::after,
.logo-gem::before,.logo-gem::after{
  display:none!important;
  content:none!important;
}

/* кнопочные иконки чуть больше */
/* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «.btn .icon». */
.btn .icon{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
}

/* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «.btn .icon img, .btn > img». */
.btn .icon img,
.btn > img{
  width:31px!important;
  height:31px!important;
  max-width:31px!important;
  max-height:31px!important;
}

/* верхняя панель — оставить иконки крупнее и по левому краю */
/* Назначение CSS-блока: Настраивает внешний вид верхней панели для селектора «.topbar .icon». */
.topbar .icon{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
}
/* Назначение CSS-блока: Настраивает внешний вид кнопок и верхней панели для селектора «.topbar .btn img, .topbar .icon img». */
.topbar .btn img,
.topbar .icon img{
  width:31px!important;
  height:31px!important;
  max-width:31px!important;
  max-height:31px!important;
}

/* логотип без подложки */
/* Назначение CSS-блока: Настраивает внешний вид логотипа для селектора «.logo-gem img, #logo-root img[src*="icon-logo"]». */
.logo-gem img,
#logo-root img[src*="icon-logo"]{
  width:50px!important;
  height:50px!important;
  max-width:50px!important;
  max-height:50px!important;
}

/* заголовочные иконки блоков оставить крупными, но без подложки */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.panel-title-icon img». */
.panel-title-icon img{
  background:transparent!important;
  width:32px!important;
  height:32px!important;
  max-width:32px!important;
  max-height:32px!important;
}

/* ровный промежуток профиль -> топ поддержка */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.left-rail». */
.left-rail{gap:8px!important}

/* премиум: цена ровно отдельной строкой */
/* Назначение CSS-блока: Настраивает внешний вид премиум-раздач для селектора «.premium-panel .mini-card .price». */
.premium-panel .mini-card .price{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  line-height:1.25!important;
  margin:5px 0 5px!important;
  clear:both;
}
/* Назначение CSS-блока: Настраивает внешний вид премиум-раздач для селектора «.premium-panel .mini-card h4». */
.premium-panel .mini-card h4{
  margin-bottom:5px!important;
}
/* Назначение CSS-блока: Настраивает внешний вид премиум-раздач для селектора «.premium-panel .mini-card .author». */
.premium-panel .mini-card .author{
  margin-bottom:4px!important;
}
/* Назначение CSS-блока: Настраивает внешний вид премиум-раздач для селектора «.premium-panel .mini-card .muted». */
.premium-panel .mini-card .muted{
  margin-top:3px!important;
}

/* мобильная версия: иконки не ломают высоту кнопок */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media(max-width:980px){

  /* Назначение CSS-блока: Настраивает внешний вид кнопок и верхней панели для селектора «.btn .icon, .topbar .icon». */
  .btn .icon,
  .topbar .icon{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
  }
  /* Назначение CSS-блока: Настраивает внешний вид кнопок и верхней панели для селектора «.btn .icon img, .btn > img, .topbar .btn img, .topbar .icon img». */
  .btn .icon img,
  .btn > img,
  .topbar .btn img,
  .topbar .icon img{
    width:29px!important;
    height:29px!important;
    max-width:29px!important;
    max-height:29px!important;
  }
}

/* ==========================================================================
v0.1.12 — premium gold style + mobile release details
========================================================================== */

/* Назначение CSS-блока: Настраивает внешний вид премиум-раздач и кнопок для селектора «.btn-premium-shine». */
.btn-premium-shine{
  border-color:rgba(255,198,109,.42)!important;
  color:#fff2cf!important;
  background:
  linear-gradient(110deg,transparent 0%,rgba(255,244,198,0) 35%,rgba(255,244,198,.22) 48%,rgba(255,244,198,0) 62%,transparent 100%),
  radial-gradient(circle at 30% 20%,rgba(255,230,150,.16),transparent 34%),
  linear-gradient(180deg,rgba(168,108,30,.30),rgba(74,43,9,.18))!important;
  background-size:260% 100%,100% 100%,100% 100%!important;
  animation:premiumShine 5.8s ease-in-out infinite!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 22px rgba(0,0,0,.16),0 0 18px rgba(255,190,80,.08)!important;
}

/* Назначение CSS-блока: Настраивает внешний вид премиум-раздач и кнопок для селектора «.btn-premium-shine:hover». */
.btn-premium-shine:hover{
  filter:brightness(1.08)!important;
  border-color:rgba(255,214,130,.55)!important;
}

/* Назначение CSS-блока: Анимация `@keyframes premiumShine` и её ключевые состояния. */
@keyframes premiumShine{
  0%,72%,100%{background-position:-180% 0,0 0,0 0}
  84%{background-position:180% 0,0 0,0 0}
}

/* Назначение CSS-блока: Настраивает внешний вид премиум-раздач для селектора «.premium-panel». */
.premium-panel{
  border-color:rgba(255,198,109,.28)!important;
  background:
  radial-gradient(circle at 20% 0%,rgba(255,198,109,.12),transparent 34%),
  linear-gradient(180deg,rgba(64,42,14,.58),rgba(14,19,31,.84))!important;
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,230,160,.08),0 0 26px rgba(255,190,80,.045)!important;
}

/* Назначение CSS-блока: Настраивает внешний вид премиум-раздач для селектора «.premium-panel .panel-title». */
.premium-panel .panel-title{
  color:#fff0c7;
}

/* Назначение CSS-блока: Настраивает внешний вид премиум-раздач для селектора «.premium-panel .mini-card». */
.premium-panel .mini-card{
  border-color:rgba(255,198,109,.20)!important;
  background:rgba(42,28,9,.30)!important;
}

/* Назначение CSS-блока: Настраивает внешний вид премиум-раздач для селектора «.premium-panel .price». */
.premium-panel .price{
  color:#ffd27a!important;
  font-weight:600;
}

/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media(max-width:980px){

  /* Назначение CSS-блока: Настраивает внешний вид раздач и модального окна для селектора «.release-modal .details-data». */
  .release-modal .details-data{
    width:100%;
  }
}

/* ==========================================================================
v0.1.13 — restore button gloss, live background animation, premium GRAM line
========================================================================== */

/* вернуть глянец/анимацию кнопок без синего системного прямоугольника */
/* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «.btn». */
.btn{
  position:relative;
  overflow:hidden;
}
/* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «.btn::after». */
.btn::after{
  content:'';
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,.16) 50%,rgba(255,255,255,0) 62%,transparent 100%);
  transform:translateX(-130%);
  opacity:.55;
}
/* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «.btn:hover::after». */
.btn:hover::after{
  animation:btnGloss 1.25s ease;
}
/* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «.btn:active». */
.btn:active{
  filter:brightness(1.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 22px rgba(95,163,255,.18)!important;
}
/* Назначение CSS-блока: Анимация `@keyframes btnGloss` и её ключевые состояния. */
@keyframes btnGloss{
  from{transform:translateX(-130%)}
  to{transform:translateX(130%)}
}

/* фон: видимое медленное движение canvas */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «#bagid-webgl-bg». */
#bagid-webgl-bg{
  opacity:.92!important;
  filter:blur(14px) saturate(1.55)!important;
}

/* убрать фон под нижними кнопками в окне раздачи */
/* Назначение CSS-блока: Настраивает внешний вид раздач и модального окна для селектора «.release-modal .modal-actions». */
.release-modal .modal-actions{
  background:transparent!important;
  padding-top:10px!important;
}

/* не прятать поля/комментарии до hover/click */
/* Назначение CSS-блока: Настраивает внешний вид комментариев и списков для селектора «.reveal,.comment-card,.field,.details-data,.comments-list». */
.reveal,.comment-card,.field,.details-data,.comments-list{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}

/* центрировать пагинацию комментариев */
/* Назначение CSS-блока: Настраивает внешний вид комментариев для селектора «.comments-pages». */
.comments-pages{
  justify-content:center!important;
  align-items:center!important;
  text-align:center!important;
}

/* премиум GRAM строка: без фона, голубой неон, медленное мерцание */
/* Назначение CSS-блока: Настраивает внешний вид премиум-раздач для селектора «.premium-panel .mini-card .price». */
.premium-panel .mini-card .price{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#7de7ff!important;
  text-shadow:0 0 8px rgba(61,210,255,.35),0 0 18px rgba(61,210,255,.18);
  animation:gramNeonPulse 3.8s ease-in-out infinite;
}
/* Назначение CSS-блока: Настраивает внешний вид премиум-раздач для селектора «.premium-panel .mini-card .price img». */
.premium-panel .mini-card .price img{
  width:22px!important;
  height:22px!important;
  max-width:22px!important;
  max-height:22px!important;
  filter:drop-shadow(0 0 8px rgba(61,210,255,.45));
}
/* Назначение CSS-блока: Анимация `@keyframes gramNeonPulse` и её ключевые состояния. */
@keyframes gramNeonPulse{
  0%,100%{opacity:.78;text-shadow:0 0 7px rgba(61,210,255,.30),0 0 14px rgba(61,210,255,.15)}
  50%{opacity:1;text-shadow:0 0 12px rgba(61,210,255,.58),0 0 26px rgba(61,210,255,.28)}
}

/* textarea при росте не ломает модалку */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.textarea». */
.textarea{
  overflow:hidden;
}

/* ==========================================================================
v0.1.14 — create modal buttons and comments pagination background fix
========================================================================== */
/* Назначение CSS-блока: Настраивает внешний вид премиум-раздач и раздач и модального окна для селектора «.create-release-modal .modal-actions, .create-premium-modal .modal-actions, .create-actions». */
.create-release-modal .modal-actions,
.create-premium-modal .modal-actions,
.create-actions{
  position:static!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Назначение CSS-блока: Настраивает внешний вид комментариев для селектора «.comments-pages». */
.comments-pages{
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* ==========================================================================
v0.1.15 — mobile first screen fit, visible animated background, comments pager
========================================================================== */

/* Видимые движущиеся цветные формы под сайтом */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.bagid-bg-motion». */
.bagid-bg-motion{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
}
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.bagid-bg-shape». */
.bagid-bg-shape{
  position:absolute;
  border-radius:999px;
  filter:blur(42px) saturate(1.45);
  mix-blend-mode:screen;
  will-change:left,top,transform;
}
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.bagid-bg-shape-1». */
.bagid-bg-shape-1{border-radius:32% 68% 61% 39% / 45% 34% 66% 55%}
/* Назначение CSS-блока: Настраивает элементы селектора «.bagid-bg-shape-2». */
.bagid-bg-shape-2{border-radius:20% 80% 30% 70% / 72% 28% 72% 28%}
/* Назначение CSS-блока: Настраивает элементы селектора «.bagid-bg-shape-3». */
.bagid-bg-shape-3{border-radius:50% 30% 70% 40% / 40% 65% 35% 60%}
/* Назначение CSS-блока: Настраивает внешний вид модального окна для селектора «#app,#modals-root». */
#app,#modals-root{position:relative;z-index:2}

/* вернуть старые орбы тоже, но очень мягко и с движением */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.bg-orb». */
.bg-orb{
  display:block!important;
  z-index:1;
  opacity:.26!important;
  animation:bagidOrbMove 34s ease-in-out infinite alternate!important;
}
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.bg-orb-b». */
.bg-orb-b{animation-duration:47s!important}
/* Назначение CSS-блока: Анимация `@keyframes bagidOrbMove` и её ключевые состояния. */
@keyframes bagidOrbMove{
  0%{transform:translate3d(0,0,0) scale(1)}
  35%{transform:translate3d(8vw,5vh,0) scale(1.12)}
  70%{transform:translate3d(-6vw,9vh,0) scale(.92)}
  100%{transform:translate3d(10vw,-4vh,0) scale(1.05)}
}

/* зазор между мобильной панелью кнопок/логотипом и профилем */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media(max-width:980px){

  /* Назначение CSS-блока: Настраивает элементы селектора «.app-layout-main». */
  .app-layout-main{
    margin-top:8px!important;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.left-rail». */
  .left-rail{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид профиля для селектора «.profile». */
  .profile{
    margin-top:0!important;
    margin-bottom:0!important;
  }
}

/* Компактный мобильный первый экран: логотип + кнопки + профиль помещаются лучше */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:560px)`. */
@media(max-width:560px){

  /* Назначение CSS-блока: Настраивает элементы селектора «.app-shell». */
  .app-shell{
    gap:6px!important;
    padding:5px!important;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-header». */
  .app-header{
    gap:6px!important;
    padding-bottom:0!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид логотипа для селектора «.logo-box». */
  .logo-box{
    min-height:44px!important;
    padding:4px 8px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид логотипа для селектора «.logo-gem img, #logo-root img[src*="icon-logo"]». */
  .logo-gem img,
  #logo-root img[src*="icon-logo"]{
    width:40px!important;
    height:40px!important;
    max-width:40px!important;
    max-height:40px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид логотипа для селектора «.logo-title». */
  .logo-title{font-size:20px!important}

  /* Назначение CSS-блока: Настраивает внешний вид логотипа для селектора «.logo-sub». */
  .logo-sub{font-size:9px!important;letter-spacing:4px!important}

  /* Назначение CSS-блока: Настраивает внешний вид верхней панели для селектора «.topbar». */
  .topbar{
    gap:6px!important;
    padding:0!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид кнопок и верхней панели для селектора «.topbar .btn». */
  .topbar .btn{
    height:36px!important;
    min-height:36px!important;
    padding:4px 8px!important;
    gap:7px!important;
    font-size:11px!important;
    line-height:1.05!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид верхней панели для селектора «.topbar .icon». */
  .topbar .icon{
    width:26px!important;
    height:26px!important;
    min-width:26px!important;
    min-height:26px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид кнопок и верхней панели для селектора «.topbar .btn img, .topbar .icon img». */
  .topbar .btn img,
  .topbar .icon img{
    width:24px!important;
    height:24px!important;
    max-width:24px!important;
    max-height:24px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид профиля для селектора «.profile.glass-panel». */
  .profile.glass-panel{
    padding:10px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид профиля для селектора «.profile-head». */
  .profile-head{
    gap:9px!important;
    margin-bottom:8px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид профиля и аватаров для селектора «.profile .avatar». */
  .profile .avatar{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.domain». */
  .domain{
    font-size:16px!important;
    line-height:1.1!important;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.wallet,.online». */
  .wallet,.online{
    font-size:11px!important;
    line-height:1.15!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид профиля и кнопок для селектора «.profile .btn.full». */
  .profile .btn.full{
    height:34px!important;
    min-height:34px!important;
    padding:5px 8px!important;
    font-size:12px!important;
    margin:6px 0!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид профиля для селектора «.profile .stats». */
  .profile .stats{
    gap:5px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид профиля для селектора «.profile .stats > div». */
  .profile .stats > div{
    min-height:26px!important;
    padding:5px 6px!important;
    font-size:11px!important;
    grid-template-columns:18px 1fr auto!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид профиля для селектора «.profile .stat-icon». */
  .profile .stat-icon{
    width:16px!important;
    height:16px!important;
    max-width:16px!important;
    max-height:16px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид комментариев для селектора «.comments-stat .tiny-square». */
  .comments-stat .tiny-square{
    width:24px!important;
    height:24px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид комментариев для селектора «.comments-stat .tiny-square img». */
  .comments-stat .tiny-square img{
    width:14px!important;
    height:14px!important;
  }
}

/* Пагинация комментариев: отдельная нижняя зона, комментарии под нее не заходят */
/* Назначение CSS-блока: Настраивает внешний вид комментариев для селектора «.user-comments-panel». */
.user-comments-panel{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}

/* Назначение CSS-блока: Настраивает внешний вид комментариев и списков для селектора «.user-comments-list». */
.user-comments-list{
  flex:1 1 auto!important;
  overflow:auto!important;
  max-height:calc(92vh - 150px)!important;
  padding-bottom:0!important;
  margin-bottom:12px!important;
  border-bottom:1px solid rgba(111,169,255,.16)!important;
}

/* Назначение CSS-блока: Настраивает внешний вид комментариев для селектора «.comments-pages». */
.comments-pages{
  flex:0 0 auto!important;
  position:static!important;
  bottom:auto!important;
  margin-top:0!important;
  padding:10px 0 0!important;
  background:transparent!important;
  border-top:0!important;
  justify-content:center!important;
  align-items:center!important;
}

/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:560px)`. */
@media(max-width:560px){

  /* Назначение CSS-блока: Настраивает внешний вид комментариев и списков для селектора «.user-comments-list». */
  .user-comments-list{
    max-height:calc(96vh - 160px)!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид комментариев для селектора «.comments-pages». */
  .comments-pages{
    justify-content:center!important;
    overflow-x:visible!important;
    flex-wrap:wrap!important;
  }
}

/* ==========================================================================
v0.1.16 — quieter background + unified mobile gaps
========================================================================== */

/* фон меньше и спокойнее */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.bg-orb, .bg-orb-a, .bg-orb-b, body::before, body::after, #bagid-webgl-bg». */
.bg-orb,
.bg-orb-a,
.bg-orb-b,
body::before,
body::after,
#bagid-webgl-bg{
  display:none!important;
  opacity:0!important;
}

/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.bagid-bg-motion». */
.bagid-bg-motion{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
}

/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.bagid-bg-shape». */
.bagid-bg-shape{
  position:absolute;
  border-radius:999px;
  filter:blur(46px) saturate(1.15);
  mix-blend-mode:screen;
  will-change:left,top,transform;
}

/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.bagid-bg-shape-1». */
.bagid-bg-shape-1{border-radius:32% 68% 61% 39% / 45% 34% 66% 55%}
/* Назначение CSS-блока: Настраивает элементы селектора «.bagid-bg-shape-2». */
.bagid-bg-shape-2{border-radius:20% 80% 30% 70% / 72% 28% 72% 28%}
/* Назначение CSS-блока: Настраивает элементы селектора «.bagid-bg-shape-3». */
.bagid-bg-shape-3{border-radius:50% 30% 70% 40% / 40% 65% 35% 60%}

/* единый зазор между верхним блоком и профилем */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media(max-width:980px){

  /* Назначение CSS-блока: Настраивает элементы селектора «:root». */
  :root{--mobile-gap:8px}

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-shell». */
  .app-shell{
    gap:var(--mobile-gap)!important;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-header». */
  .app-header{
    margin-bottom:0!important;
    padding-bottom:0!important;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-layout, .app-layout-main». */
  .app-layout,
  .app-layout-main{
    margin-top:0!important;
    padding-top:0!important;
    gap:var(--mobile-gap)!important;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.left-rail». */
  .left-rail{
    gap:var(--mobile-gap)!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид профиля для селектора «#profile-root». */
  #profile-root{
    margin-top:0!important;
    padding-top:0!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид профиля для селектора «#profile-root .profile». */
  #profile-root .profile{
    margin-top:0!important;
  }
}

/* на очень узких экранах сохраняем тот же визуальный шаг, но не раздуваем первый экран */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:560px)`. */
@media(max-width:560px){

  /* Назначение CSS-блока: Настраивает элементы селектора «:root». */
  :root{--mobile-gap:8px}

  /* Назначение CSS-блока: Настраивает элементы селектора «.app-shell». */
  .app-shell{gap:var(--mobile-gap)!important}
  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-layout-main». */
  .app-layout-main{gap:var(--mobile-gap)!important}
}

/* ==========================================================================
v0.1.17 — единые расстояния между основными блоками
========================================================================== */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «:root». */
:root{
  --bagid-block-gap: 8px;
}

/* Основной вертикальный шаг слева: Профиль -> Топ поддержка */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.left-rail». */
.left-rail{
  display:flex!important;
  flex-direction:column!important;
  gap:var(--bagid-block-gap)!important;
}

/* Убираем старые margin, чтобы gap был единственным источником расстояний */
/* Назначение CSS-блока: Настраивает внешний вид профиля и поддержки для селектора «#profile-root, #top-support-root, .profile, .top-support». */
#profile-root,
#top-support-root,
.profile,
.top-support{
  margin-top:0!important;
  margin-bottom:0!important;
}

/* ПК: расстояние между левым блоком и центральными блоками остается через gap layout */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-layout, .app-layout-main, .content-columns». */
.app-layout,
.app-layout-main,
.content-columns{
  gap:var(--bagid-block-gap)!important;
}

/* Мобильная версия: Логотип+кнопки -> Профиль -> Топ поддержка -> Премиум */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media(max-width:980px){

  /* Назначение CSS-блока: Настраивает элементы селектора «.app-shell». */
  .app-shell{
    gap:var(--bagid-block-gap)!important;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-header». */
  .app-header{
    margin:0!important;
    padding-bottom:0!important;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-layout, .app-layout-main». */
  .app-layout,
  .app-layout-main{
    margin-top:0!important;
    padding-top:0!important;
    gap:var(--bagid-block-gap)!important;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.left-rail». */
  .left-rail{
    gap:var(--bagid-block-gap)!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид профиля и поддержки для селектора «#profile-root, #top-support-root, .profile, .top-support». */
  #profile-root,
  #top-support-root,
  .profile,
  .top-support{
    margin-top:0!important;
    margin-bottom:0!important;
  }
}

/* ==========================================================================
v0.6.0 — единый размер кнопок и одинаковые пустые разделы
========================================================================== */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «:root». */
:root{
  --bagid-action-height:40px;
  --bagid-action-width:calc(100% - 10px);
  --bagid-empty-panel-min-height:210px;
}

/* Назначение CSS-блока: Настраивает внешний вид профиля для селектора «.block-action, .latest .more, .profile-disconnected #connect-wallet-btn». */
.block-action,
.latest .more,
.profile-disconnected #connect-wallet-btn{
  width:var(--bagid-action-width)!important;
  min-width:0!important;
  height:var(--bagid-action-height)!important;
  min-height:var(--bagid-action-height)!important;
  max-height:var(--bagid-action-height)!important;
  margin:14px auto 0!important;
  padding:0 16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  font-size:15px!important;
  line-height:1!important;
}

/* Назначение CSS-блока: Настраивает внешний вид профиля для селектора «.profile-disconnected #connect-wallet-btn». */
.profile-disconnected #connect-wallet-btn{
  background:
  radial-gradient(circle at 50% 52%,rgba(255,255,255,.012) 0,rgba(255,255,255,.006) 25%,rgba(255,255,255,0) 58%),
  linear-gradient(180deg,rgba(22,90,158,.38),rgba(8,43,83,.25))!important;
  border-color:rgba(44,168,255,.5)!important;
}

/* Назначение CSS-блока: Настраивает внешний вид премиум-раздач для селектора «.premium-panel, .active-panel, .latest». */
.premium-panel,
.active-panel,
.latest{
  min-height:var(--bagid-empty-panel-min-height)!important;
  display:flex!important;
  flex-direction:column!important;
  box-sizing:border-box!important;
}

/* Назначение CSS-блока: Настраивает внешний вид премиум-раздач и раздач и списков для селектора «.premium-panel .premium-release-card-list, .active-panel .mini-card-grid, .latest .card-list». */
.premium-panel .premium-release-card-list,
.active-panel .mini-card-grid,
.latest .card-list{
  flex:1 1 auto;
  min-height:0;
}

/* Назначение CSS-блока: Настраивает внешний вид премиум-раздач для селектора «.premium-panel .block-action, .active-panel .block-action, .latest .more». */
.premium-panel .block-action,
.active-panel .block-action,
.latest .more{
  margin-top:auto!important;
}

/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media(max-width:980px){

  /* Назначение CSS-блока: Настраивает элементы селектора «:root». */
  :root{
    --bagid-action-height:40px;
    --bagid-empty-panel-min-height:190px;
  }

  /* Назначение CSS-блока: Настраивает внешний вид профиля для селектора «.block-action, .latest .more, .profile-disconnected #connect-wallet-btn». */
  .block-action,
  .latest .more,
  .profile-disconnected #connect-wallet-btn{
    font-size:14px!important;
  }
}


/* v0.6.5 — стабильное отображение карточек и изображений при прокрутке */
/* Назначение CSS-блока: Настраивает внешний вид раздач и обложек для селектора «.release-row, .mini-card, .poster, .mini-card img». */
.release-row,
.mini-card,
.poster,
.mini-card img{
  opacity:1!important;
  visibility:visible!important;
  transform:translateZ(0)!important;
  backface-visibility:hidden;
  animation:none!important;
  contain:layout paint;
}

/* Назначение CSS-блока: Настраивает внешний вид раздач для селектора «.release-row». */
.release-row{
  min-height:152px;
}

/* Назначение CSS-блока: Настраивает внешний вид обложек для селектора «.poster, .mini-card img». */
.poster,
.mini-card img{
  background:rgba(3,13,25,.7);
}

/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «img». */
img{
  content-visibility:visible;
}


/* v0.6.11 — промежуток между верхним меню и блоками страницы */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-shell». */
.app-shell{
  gap:var(--bagid-block-gap,8px)!important;
}

/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-header». */
.app-header{
  margin-bottom:0!important;
}

/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-layout, .app-layout-main». */
.app-layout,
.app-layout-main{
  margin-top:0!important;
}


/* v0.6.12 — одинаковый промежуток: меню→профиль и топ→премиум */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-shell». */
.app-shell{
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr);
  row-gap:var(--bagid-block-gap,8px)!important;
}

/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-header». */
.app-header{
  margin:0!important;
  padding-bottom:0!important;
}

/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-layout, .app-layout-main». */
.app-layout,
.app-layout-main{
  margin:0!important;
  padding-top:0!important;
}

/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media(max-width:980px){

  /* Назначение CSS-блока: Настраивает элементы селектора «.app-shell». */
  .app-shell{
    display:flex!important;
    flex-direction:column!important;
    gap:var(--bagid-block-gap,8px)!important;
  }
}


/* v0.6.13 — точный промежуток между МЕНЮ и ПРОФИЛЕМ */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-shell». */
.app-shell{
  row-gap:8px!important;
  gap:8px!important;
}

/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-header». */
.app-header{
  margin:0!important;
  padding:0!important;
}

/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-layout, .app-layout-main». */
.app-layout,
.app-layout-main{
  margin:0!important;
  padding:0!important;
}

/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media(max-width:980px){

  /* Назначение CSS-блока: Настраивает элементы селектора «.app-shell». */
  .app-shell{
    gap:8px!important;
  }
}


/* v0.6.19 — единый размер крестиков закрытия */
/* Назначение CSS-блока: Настраивает внешний вид модального окна для селектора «[data-close] img, .close-details img, .modal-close img, .close-modal img». */
[data-close] img,
.close-details img,
.modal-close img,
.close-modal img{
  width:24px!important;
  height:24px!important;
  max-width:24px!important;
  max-height:24px!important;
  object-fit:contain;
}

/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media(max-width:980px){

  /* Назначение CSS-блока: Настраивает внешний вид модального окна для селектора «[data-close] img, .close-details img, .modal-close img, .close-modal img». */
  [data-close] img,
  .close-details img,
  .modal-close img,
  .close-modal img{
    width:28px!important;
    height:28px!important;
    max-width:28px!important;
    max-height:28px!important;
  }
}


/* v0.6.21 — одинаковые компактные кнопки Показать Все */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.block-action, .latest .more, [data-open-rating]». */
.block-action,
.latest .more,
[data-open-rating]{
  width:min(240px,calc(100% - 24px))!important;
  min-width:0!important;
  min-height:44px!important;
  height:44px!important;
  margin:14px auto 0!important;
  display:flex!important;
  justify-content:center!important;
}

/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media(max-width:980px){

  /* Назначение CSS-блока: Настраивает элементы селектора «.block-action, .latest .more, [data-open-rating]». */
  .block-action,
  .latest .more,
  [data-open-rating]{
    width:min(220px,calc(100% - 20px))!important;
    min-height:46px!important;
    height:46px!important;
  }
}


/* v0.6.25 — вложенное окно профиля поверх раздачи */
/* Назначение CSS-блока: Настраивает внешний вид модального окна для селектора «#user-details-modal.open». */
#user-details-modal.open{
  display:flex!important;
  z-index:7000!important;
}


/* Назначение CSS-блока: Настраивает внешний вид модального окна для селектора «#user-details-modal.open». */
#user-details-modal.open{
  display:flex!important;
  z-index:7000!important;
}


/* v0.6.29 — единый компактный шаг между основными блоками */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «:root». */
:root{
  --bagid-block-gap:4px;
}

/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media(max-width:980px){

  /* Назначение CSS-блока: Настраивает элементы селектора «.app-shell, .app-header, .app-layout-main, .left-rail, .content-columns». */
  .app-shell,
  .app-header,
  .app-layout-main,
  .left-rail,
  .content-columns{
    gap:4px!important;
  }
}


/* v0.6.30 — стандартный шаг остальных блоков */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «:root». */
:root{
  --bagid-block-gap:8px;
}

/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media(max-width:980px){

  /* Назначение CSS-блока: Настраивает элементы селектора «.left-rail, .content-columns, .bottom-grid». */
  .left-rail,
  .content-columns,
  .bottom-grid{
    gap:8px!important;
  }
}


/* v0.6.52 — логотип и меню появляются один раз без повторного fade после F5 */
/* Назначение CSS-блока: Настраивает внешний вид верхней панели и логотипа для селектора «#logo-root .logo-box, #topbar-root .topbar». */
#logo-root .logo-box,
#topbar-root .topbar{
  animation:none!important;
}


/* v0.6.65 — финальная геометрия ячейки комментария и отключение резких CSS-вспышек */
/* Назначение CSS-блока: Настраивает внешний вид модального окна и комментариев для селектора «#user-comments-modal .user-comment-text-cell». */
#user-comments-modal .user-comment-text-cell{
  -webkit-appearance:none!important;
  appearance:none!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  margin:6px 0 0!important;
  padding:4px 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  box-sizing:border-box!important;
  text-align:left!important;
  line-height:1.28!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  cursor:pointer!important;
}

/* Назначение CSS-блока: Настраивает внешний вид модального окна и комментариев для селектора «#user-comments-modal .user-comment-text-value». */
#user-comments-modal .user-comment-text-value{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
  line-height:1.28!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
}

/* Назначение CSS-блока: Настраивает внешний вид раздач и модального окна и комментариев для селектора «#release-details-modal .comment-card.comment-highlight». */
#release-details-modal .comment-card.comment-highlight{
  animation:none!important;
  transition:none!important;
  border-color:rgba(255,145,45,.34)!important;
}


/* v0.6.98 — стабильный paint главной страницы в Android/Telegram WebView */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px), (hover:none) and (pointer:coarse)`. */
@media(max-width:980px), (hover:none) and (pointer:coarse){

  /* Назначение CSS-блока: Настраивает внешний вид раздач и обложек для селектора «#app .glass-panel, #app .release-row, #app .mini-card, #app .poster, #app .mini-card img, #app .release-info, #app .latest-release-owner, #app .meta-line, #app .detail-field». */
  #app .glass-panel,
  #app .release-row,
  #app .mini-card,
  #app .poster,
  #app .mini-card img,
  #app .release-info,
  #app .latest-release-owner,
  #app .meta-line,
  #app .detail-field{
    content-visibility:visible!important;
    contain:none!important;
    transform:none!important;
    -webkit-transform:none!important;
    backface-visibility:visible!important;
    -webkit-backface-visibility:visible!important;
    will-change:auto!important;
    opacity:1!important;
    visibility:visible!important;
  }

  /* Много одновременных backdrop-filter на длинной странице вызывают
  пропадание отдельных плиток WebView. Полупрозрачный градиент панелей
  сохраняется, отключается только тяжёлый фильтр каждого блока. */
  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «#app .glass-panel». */
  #app .glass-panel{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    animation:none!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид раздач и обложек для селектора «#app .release-row, #app .mini-card, #app .poster, #app .mini-card img». */
  #app .release-row,
  #app .mini-card,
  #app .poster,
  #app .mini-card img{
    animation:none!important;
  }
}

/* После закрытия последнего окна WebView обязан вернуть обычный слой страницы,
а не продолжать прокручивать старую размытую текстуру. */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px), (hover:none) and (pointer:coarse)`. */
@media(max-width:980px), (hover:none) and (pointer:coarse){

  /* Назначение CSS-блока: Настраивает внешний вид модального окна для селектора «body:not(.modal-open) #app». */
  body:not(.modal-open) #app{
    filter:none!important;
    transform:none!important;
    -webkit-transform:none!important;
    backface-visibility:visible!important;
    -webkit-backface-visibility:visible!important;
    will-change:auto!important;
    transition:none!important;
  }
}


/* v0.6.98 — менее округлые статусы во всех окнах */
/* Назначение CSS-блока: Настраивает внешний вид статусов для селектора «.status». */
.status{
  border-radius:4px!important;
}

/* v0.7.48 — лёгкий paint главной страницы и мгновенное появление Premium-кнопки. */
/* Назначение CSS-блока: Настраивает внешний вид раздач и кнопок для селектора «#app .glass-panel,#app .release-row,#app .mini-card,#app .btn». */
#app .glass-panel,#app .release-row,#app .mini-card,#app .btn{animation:none!important}
/* Назначение CSS-блока: Настраивает внешний вид модального окна и кнопок для селектора «.glass-panel,.btn,.modal-backdrop». */
.glass-panel,.btn,.modal-backdrop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* Назначение CSS-блока: Настраивает внешний вид модального окна для селектора «body.modal-open #app». */
body.modal-open #app{filter:none!important;transition:none!important}
/* Назначение CSS-блока: Настраивает внешний вид раздач и кнопок и верхней панели для селектора «.release-row,.mini-card,.poster,.mini-card img,.topbar .btn». */
.release-row,.mini-card,.poster,.mini-card img,.topbar .btn{will-change:auto!important;backface-visibility:visible!important;-webkit-backface-visibility:visible!important}
/* Назначение CSS-блока: Настраивает внешний вид раздач и кнопок для селектора «.release-row:hover,.btn:hover». */
.release-row:hover,.btn:hover{transform:none!important}
/* Назначение CSS-блока: Настраивает внешний вид премиум-раздач и кнопок и меню для селектора «.topbar .premium-only-menu,.premium-only-menu,.btn-premium-shine». */
.topbar .premium-only-menu,.premium-only-menu,.btn-premium-shine{animation:none!important;transition:none!important}


/* v0.7.66 — единые статусы Active / PREMIUM / VIP. */
/* Назначение CSS-блока: Настраивает внешний вид статусов для селектора «.status.vip». */
.status.vip{
  background:rgba(235,53,76,.18)!important;
  border-color:rgba(255,80,108,.52)!important;
  color:#ff8fa2!important;
  box-shadow:0 0 12px rgba(255,55,88,.14)!important;
}
/* Назначение CSS-блока: Настраивает внешний вид раздач и статусов для селектора «.latest-release-statuses». */
.latest-release-statuses{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
}

/* v0.7.66 — стабильная геометрия карточек Recent/Premium. */
/* Назначение CSS-блока: Настраивает внешний вид раздач для селектора «.latest-release-card». */
.latest-release-card{align-items:start!important}
/* Назначение CSS-блока: Настраивает внешний вид раздач и обложек для селектора «.latest-release-card>.poster». */
.latest-release-card>.poster{align-self:start!important;margin-top:0!important}
/* Назначение CSS-блока: Настраивает внешний вид раздач для селектора «.latest-release-card .meta-line». */
.latest-release-card .meta-line{align-items:center!important;row-gap:8px!important}
/* Назначение CSS-блока: Настраивает внешний вид раздач для селектора «.latest-release-activity». */
.latest-release-activity{display:inline-flex;align-items:center;gap:12px;flex-wrap:nowrap;white-space:nowrap}
/* Назначение CSS-блока: Настраивает внешний вид премиум-раздач и цели сбора для селектора «.latest-premium-goal-summary». */
.latest-premium-goal-summary{display:inline-flex;align-items:center;gap:8px;flex:1 1 100%;min-width:0}
/* Назначение CSS-блока: Настраивает внешний вид премиум-раздач и цели сбора для селектора «.latest-premium-goal-summary>span». */
.latest-premium-goal-summary>span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
/* Назначение CSS-блока: Настраивает внешний вид премиум-раздач и цели сбора для селектора «.latest-premium-goal-summary .premium-meta-icon». */
.latest-premium-goal-summary .premium-meta-icon{width:18px!important;height:18px!important;opacity:.88;filter:saturate(.9) brightness(1.08) drop-shadow(0 0 5px rgba(255,199,74,.32))}
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:560px)`. */
@media(max-width:560px){
  /* Назначение CSS-блока: Настраивает внешний вид раздач для селектора «.latest-release-activity». */
  .latest-release-activity{gap:8px}
  /* Назначение CSS-блока: Настраивает внешний вид премиум-раздач и цели сбора для селектора «.latest-premium-goal-summary». */
  .latest-premium-goal-summary{gap:8px;flex-wrap:wrap}}


/* v0.7.84 — единая заметная прокрутка модальных окон в стиле BAGID Torrent. */
/* Назначение CSS-блока: Стилизует прокрутку окна создания и разделов модерации. */
.bagid-site-scrollbar{
  scrollbar-width:auto;
  scrollbar-color:rgba(87,164,255,.72) rgba(3,13,25,.48);
}
/* Назначение CSS-блока: Задаёт видимую ширину полосы прокрутки в Chromium/WebKit. */
.bagid-site-scrollbar::-webkit-scrollbar{width:11px;height:11px}
/* Назначение CSS-блока: Оформляет дорожку полосы прокрутки. */
.bagid-site-scrollbar::-webkit-scrollbar-track{
  background:rgba(3,13,25,.48);
  border:1px solid rgba(111,169,255,.10);
  border-radius:10px;
}
/* Назначение CSS-блока: Оформляет ползунок полосы прокрутки. */
.bagid-site-scrollbar::-webkit-scrollbar-thumb{
  min-height:44px;
  border:2px solid rgba(3,13,25,.54);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(83,174,255,.82),rgba(111,76,255,.72));
  box-shadow:inset 0 1px 0 rgba(220,243,255,.22),0 0 8px rgba(72,139,255,.18);
}
/* Назначение CSS-блока: Усиливает ползунок при наведении. */
.bagid-site-scrollbar::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(111,198,255,.94),rgba(137,99,255,.88));
}


/* v0.7.84 — TON Connect не создаёт пустую прокрутку основной страницы. */
html.tonconnect-modal-open,
body.tonconnect-modal-open{
  overflow:hidden!important;
  overscroll-behavior:none!important;
  scrollbar-gutter:auto!important;
}

/* v0.7.84 — единая заметная прокрутка в Chromium, Telegram WebView и Firefox. */
.bagid-site-scrollbar,
.create-release-modal,
.admin-panel>.admin-section{
  color-scheme:dark;
  scrollbar-width:auto!important;
  scrollbar-color:rgba(94,180,255,.92) rgba(2,10,21,.82)!important;
}
.bagid-site-scrollbar::-webkit-scrollbar,
.create-release-modal::-webkit-scrollbar,
.admin-panel>.admin-section::-webkit-scrollbar{
  width:13px!important;
  height:13px!important;
}
.bagid-site-scrollbar::-webkit-scrollbar-track,
.create-release-modal::-webkit-scrollbar-track,
.admin-panel>.admin-section::-webkit-scrollbar-track{
  background:rgba(2,10,21,.82)!important;
  border-left:1px solid rgba(111,169,255,.14)!important;
  border-radius:10px!important;
}
.bagid-site-scrollbar::-webkit-scrollbar-thumb,
.create-release-modal::-webkit-scrollbar-thumb,
.admin-panel>.admin-section::-webkit-scrollbar-thumb{
  min-height:48px!important;
  border:3px solid rgba(2,10,21,.82)!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,rgba(96,192,255,.98),rgba(109,78,255,.92))!important;
  box-shadow:inset 0 1px 0 rgba(239,250,255,.32),0 0 10px rgba(63,144,255,.34)!important;
}
.bagid-site-scrollbar::-webkit-scrollbar-thumb:hover,
.create-release-modal::-webkit-scrollbar-thumb:hover,
.admin-panel>.admin-section::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(132,214,255,1),rgba(143,105,255,1))!important;
}

/* v0.7.84 — данные Recent/Premium всегда занимают две предсказуемые строки. */
.latest-release-card .latest-release-meta-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  align-items:center!important;
  gap:7px!important;
}
.latest-release-meta-primary,
.latest-release-activity{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  min-width:0!important;
  white-space:nowrap!important;
}
.latest-release-meta-primary{gap:14px!important}
.latest-release-activity{gap:12px!important}
.latest-release-meta-primary>span,
.latest-release-activity>span{display:inline-flex!important;align-items:center!important;gap:4px!important;white-space:nowrap!important}
.latest-premium-goal-summary{grid-row:auto!important}
@media(max-width:560px){
  .latest-release-meta-primary{gap:9px!important}
  .latest-release-activity{gap:7px!important}
}

/* v0.7.84 — все роль-статусы недоступны для случайного выделения. */
.status,
.member-badge,
.vip-badge,
.premium-creator-badge,
.comment-vip-badge,
.comment-premium-badge,
[data-profile-member],
[data-profile-vip],
[data-profile-premium]{
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
}


/* v0.7.85 — устойчивое размытие главной страницы для выбранных полноэкранных окон. */
/* Назначение CSS-блока: Возвращает тот же blur, что у списков Recent/Premium, после поздних performance-overrides. */
body.bagid-page-blur-open #app{
  filter:blur(12px)!important;
  transition:filter .22s ease!important;
}

/* v0.7.86 — единая менее яркая внутренняя прокрутка для форм, истории и списков. */
/* Назначение CSS-блока: Сохраняет системную геометрию overflow, но оформляет появляющуюся полосу в тёмных цветах сайта. */
.bagid-site-scrollbar,
.create-release-modal,
.create-premium-modal,
.my-releases-panel,
.support-history-list,
.admin-panel>.admin-section{
  color-scheme:dark;
  scrollbar-width:auto!important;
  scrollbar-color:rgba(66,132,204,.72) rgba(2,9,18,.78)!important;
}
/* Назначение CSS-блока: Задаёт одинаковую заметную толщину прокрутки в Chromium и Telegram WebView. */
.bagid-site-scrollbar::-webkit-scrollbar,
.create-release-modal::-webkit-scrollbar,
.create-premium-modal::-webkit-scrollbar,
.my-releases-panel::-webkit-scrollbar,
.support-history-list::-webkit-scrollbar,
.admin-panel>.admin-section::-webkit-scrollbar{
  width:12px!important;
  height:12px!important;
}
/* Назначение CSS-блока: Затемняет дорожку полосы прокрутки. */
.bagid-site-scrollbar::-webkit-scrollbar-track,
.create-release-modal::-webkit-scrollbar-track,
.create-premium-modal::-webkit-scrollbar-track,
.my-releases-panel::-webkit-scrollbar-track,
.support-history-list::-webkit-scrollbar-track,
.admin-panel>.admin-section::-webkit-scrollbar-track{
  background:rgba(2,9,18,.78)!important;
  border:1px solid rgba(94,146,211,.10)!important;
  border-radius:10px!important;
}
/* Назначение CSS-блока: Использует приглушённый сине-фиолетовый ползунок вместо яркого системного оформления. */
.bagid-site-scrollbar::-webkit-scrollbar-thumb,
.create-release-modal::-webkit-scrollbar-thumb,
.create-premium-modal::-webkit-scrollbar-thumb,
.my-releases-panel::-webkit-scrollbar-thumb,
.support-history-list::-webkit-scrollbar-thumb,
.admin-panel>.admin-section::-webkit-scrollbar-thumb{
  min-height:46px!important;
  border:3px solid rgba(2,9,18,.78)!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,rgba(62,137,203,.78),rgba(79,64,166,.76))!important;
  box-shadow:inset 0 1px 0 rgba(217,239,255,.16),0 0 7px rgba(55,117,197,.16)!important;
}
/* Назначение CSS-блока: Умеренно усиливает ползунок только при наведении. */
.bagid-site-scrollbar::-webkit-scrollbar-thumb:hover,
.create-release-modal::-webkit-scrollbar-thumb:hover,
.create-premium-modal::-webkit-scrollbar-thumb:hover,
.my-releases-panel::-webkit-scrollbar-thumb:hover,
.support-history-list::-webkit-scrollbar-thumb:hover,
.admin-panel>.admin-section::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(76,157,222,.88),rgba(96,78,188,.86))!important;
}

/* v0.7.86 — при уменьшении окна Premium-форма сохраняет собственную прокрутку вместо прокрутки страницы. */
/* Назначение CSS-блока: Показывает ту же стилизованную полосу при zoom, низкой высоте экрана и росте содержимого на мобильных/WebView. */
@media(max-width:980px){
  .create-premium-modal{
    max-height:calc(100dvh - 16px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  .my-releases-panel{
    max-height:calc(100dvh - 16px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
}

/* v0.7.116 — единый стилизованный select для форм создания и редактирования раздач. */
/* Назначение CSS-блока: Сохраняет native select в форме, но передаёт управление видимому BAGID-списку. */
.site-select{position:relative;width:100%;min-width:0;z-index:1}
.site-select.is-open{z-index:120}
.site-select-native{position:absolute!important;inset:0!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
/* Назначение CSS-блока: Оформляет кнопку раскрытия одинаково с тёмными полями сайта. */
.site-select-trigger{
  width:100%;min-height:44px;padding:11px 46px 11px 13px;text-align:left;
  border:1px solid rgba(68,172,255,.38);border-radius:10px;color:#eaf4ff;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M2 2l5 5 5-5' fill='none' stroke='%237fd8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 15px center/14px 9px no-repeat,
    linear-gradient(180deg,rgba(13,39,69,.98),rgba(5,22,43,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 16px rgba(36,137,230,.06);
  font:inherit;line-height:1.3;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.site-select-trigger:hover,.site-select-trigger:focus-visible{border-color:rgba(102,202,255,.72);box-shadow:0 0 0 2px rgba(46,151,255,.12),0 0 18px rgba(40,145,255,.12);outline:none}
.site-select-trigger.is-placeholder{color:rgba(220,235,249,.68)}
.site-select.is-disabled .site-select-trigger{opacity:.58;cursor:not-allowed;filter:saturate(.55)}
/* Назначение CSS-блока: Оформляет раскрытую панель и её собственную прокрутку в стиле остальных окон. */
.site-select-menu{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);max-height:min(290px,48vh);overflow-y:auto;overflow-x:hidden;
  padding:6px;border:1px solid rgba(91,184,255,.44);border-radius:11px;background:rgba(3,14,28,.985);
  box-shadow:0 18px 45px rgba(0,0,0,.56),0 0 20px rgba(48,146,255,.12);color:#eaf4ff;
}
.site-select.is-open .site-select-menu{display:block}
.site-select-group+.site-select-group{margin-top:5px;padding-top:5px;border-top:1px solid rgba(111,169,255,.14)}
.site-select-group-label{padding:7px 9px 5px;color:#84a2c0;font-size:12px;font-weight:700;text-transform:none;pointer-events:none}
.site-select-option{display:block;width:100%;padding:9px 10px;border:0;border-radius:7px;background:transparent;color:#eaf4ff;text-align:left;font:inherit;line-height:1.25;cursor:pointer}
.site-select-option:hover,.site-select-option:focus-visible{background:rgba(41,147,235,.18);outline:none}
.site-select-option.is-selected{background:linear-gradient(90deg,rgba(47,159,255,.28),rgba(92,77,224,.18));color:#fff}
.site-select-option.is-placeholder{color:rgba(220,235,249,.62)}
.site-select-option:disabled{opacity:.42;cursor:not-allowed}
.required-field-alert .site-select-trigger{animation:requiredFieldPulse 2.8s ease-in-out infinite;border-color:rgba(255,84,84,.88)!important}


/* v0.7.182 — отдельная нижняя строка лайков и просмотров в карточках Recent/Premium. */
.latest-release-engagement{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:14px!important;
  min-width:0!important;
  white-space:nowrap!important;
  color:rgba(207,225,242,.78);
}
.latest-release-engagement>span{
  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important;
  white-space:nowrap!important;
}
.latest-release-engagement .meta-icon{width:15px!important;height:15px!important;opacity:.78}
.premium-release-card .latest-release-engagement{color:rgba(244,229,184,.78)!important}
.premium-release-card .latest-release-engagement .meta-icon{opacity:.82;filter:sepia(.22) saturate(.88) brightness(1.08)}
@media(max-width:560px){
  .latest-release-engagement{gap:9px!important;font-size:11px!important}
  .latest-release-engagement .meta-icon{width:14px!important;height:14px!important}
}


/* v0.7.183 — цвет лайков и просмотров определяется блоком, а не типом отдельной карточки. */
.latest-release-engagement{
  color:rgba(207,225,242,.78)!important;
}
.latest-release-engagement .meta-icon{
  filter:none!important;
}
#premium-releases-root .latest-release-engagement,
#list-modal .list-panel.is-premium-list .latest-release-engagement{
  color:rgba(244,229,184,.82)!important;
}
#premium-releases-root .latest-release-engagement .meta-icon,
#list-modal .list-panel.is-premium-list .latest-release-engagement .meta-icon{
  opacity:.84!important;
  filter:sepia(.24) saturate(.9) brightness(1.1)!important;
}
#latest-releases-root .latest-release-engagement,
#list-modal .list-panel.is-latest-list:not(.is-premium-list) .latest-release-engagement{
  color:rgba(207,225,242,.78)!important;
}
#latest-releases-root .latest-release-engagement .meta-icon,
#list-modal .list-panel.is-latest-list:not(.is-premium-list) .latest-release-engagement .meta-icon{
  opacity:.78!important;
  filter:none!important;
}


/* v0.7.197 — подписи Лайков/Просмотров равны по размеру Сидам/Пирам. */
#latest-releases-root .latest-release-engagement,
#premium-releases-root .latest-release-engagement,
#list-modal .list-panel.is-latest-list .latest-release-engagement,
#list-modal .list-panel.is-premium-list .latest-release-engagement,
#latest-releases-root .latest-release-engagement>span,
#premium-releases-root .latest-release-engagement>span,
#list-modal .list-panel.is-latest-list .latest-release-engagement>span,
#list-modal .list-panel.is-premium-list .latest-release-engagement>span{
  font-size:12px!important;
  line-height:1.25!important;
}


/* v0.7.202 — статусы Active и PREMIUM имеют те же углы, что кнопка «Поддержать». */
.status.active,
.status.premium{
  border-radius:10px!important;
}


/* v0.7.208 — TON Connect не добавляет системную полосу прокрутки в настольном браузере. */
html.tonconnect-modal-open,
html.tonconnect-modal-open body,
body.tonconnect-modal-open{
  overflow:hidden!important;
  overscroll-behavior:none!important;
  max-width:100vw!important;
  scrollbar-width:none!important;
  scrollbar-gutter:auto!important;
}
html.tonconnect-modal-open::-webkit-scrollbar,
html.tonconnect-modal-open body::-webkit-scrollbar,
body.tonconnect-modal-open::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}


/* v0.7.208 — ACTIVE и PREMIUM расположены чуть ближе, но не соприкасаются. */
.latest-release-statuses{gap:6px!important}

/* Карточки Recent/Premium показывают обложку в пропорции 1080×1920 без растяжения. */
.latest-release-card>.poster,
.latest-release-card .poster{aspect-ratio:9/16!important;height:auto!important;object-fit:cover!important;object-position:center center!important}


/* v0.7.210 — транзакционный TON Connect полностью скрывает системную прокрутку страницы на ПК. */
html.tonconnect-modal-open,
html.tonconnect-modal-open body,
body.tonconnect-modal-open{
  width:100%!important;
  min-width:0!important;
  height:100%!important;
  max-height:100%!important;
  overflow:hidden!important;
  overflow-x:hidden!important;
  overflow-y:hidden!important;
  overscroll-behavior:none!important;
  scrollbar-width:none!important;
  scrollbar-gutter:auto!important;
}
html.tonconnect-modal-open::-webkit-scrollbar,
html.tonconnect-modal-open body::-webkit-scrollbar,
body.tonconnect-modal-open::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}

/* v0.8.339 — отсутствующая release cover не подменяется аватаром профиля. */
.release-row .poster.poster-missing{visibility:hidden!important}

/* v0.8.339 — TON Connect на desktop визуально увеличен на 50% без изменения мобильной геометрии. */
@media (min-width:981px) and (hover:hover) and (pointer:fine){
  [data-tc-wallets-modal-container="true"] [data-tc-modal="true"],
  [data-tc-actions-modal-container="true"] [data-tc-modal="true"]{
    zoom:1.5!important;
    max-width:60vw!important;
    max-height:60vh!important;
  }
  [data-tc-wallets-modal-container="true"],
  [data-tc-actions-modal-container="true"]{
    overflow:auto!important;
  }
}


/* v0.8.421 — ключевые заголовки главной страницы и их иконки не выделяются. */
#top-support-root .panel-title,
#top-support-root .panel-title *,
#premium-releases-root .panel-title,
#premium-releases-root .panel-title *,
#latest-releases-root .panel-title,
#latest-releases-root .panel-title *{
  user-select:none!important;
  -webkit-user-select:none!important;
}
#top-support-root .panel-title img,
#premium-releases-root .panel-title img,
#latest-releases-root .panel-title img{
  -webkit-user-drag:none!important;
  pointer-events:none!important;
}

/* v0.8.421 — ссылки TON DNS / TON Viewer в пользовательском интерфейсе не подчёркиваются при наведении или фокусе. */
a[href*="dns.ton.org"],
a[href*="tonviewer.com"],
a[href*="dns.ton.org"]:hover,
a[href*="dns.ton.org"]:focus-visible,
a[href*="tonviewer.com"]:hover,
a[href*="tonviewer.com"]:focus-visible{
  text-decoration:none!important;
}

/* v0.8.421 — все UI-иконки проекта не выделяются и не перетаскиваются как изображения. */
img[src*="images/icons/"],img[src*="/icons/"]{user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-webkit-touch-callout:none!important;-webkit-user-drag:none!important;user-drag:none!important}

/* v0.8.421 — единый page-effect для цепочки модальных окон.
   Главная страница размывается/затемняется ровно один раз первым окном;
   второй и последующие уровни остаются прозрачными и не создают новый GPU backdrop. */
#modals-root::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:rgba(1,6,12,.58);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:opacity .18s ease,visibility 0s linear .18s;
}
body.bagid-single-modal-effect #modals-root::before{
  opacity:1;
  visibility:visible;
  transition:opacity .18s ease;
}
/* Старый filter:#app больше не нужен: он заменён одним неподвижным слоем над страницей. */
body.modal-open #app,
body.bagid-page-blur-open #app,
body.list-modal-open #app,
body.bagid-page-blur-open.list-modal-open #app{
  filter:none!important;
  transition:none!important;
}
/* Когда page-effect активен, даже первое backdrop-окно не добавляет второй слой затемнения. */
body.bagid-single-modal-effect #modals-root .modal-backdrop.open,
#modals-root .modal-backdrop.open.bagid-modal-stacked{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
/* v0.8.466 — mobile использует тот же page-effect, что desktop.
   Нет отдельного armed/RAF/visibility цикла, нет синхронной заморозки фоновых фигур:
   один #modals-root::before сразу начинает desktop opacity-transition .18s при открытии/закрытии. */
/* Старый специальный blur Recent/Premium больше не участвует: работает единый слой #modals-root::before. */
body.bagid-single-modal-effect #list-modal .list-modal-blur-layer,
#list-modal.bagid-modal-stacked .list-modal-blur-layer{
  display:none!important;
}
@media(prefers-reduced-motion:reduce){
  #modals-root::before{transition:none!important}
}

/* v0.8.421 — до свежего /api/health основной UI не показывает пустую/частично загруженную оболочку. */
body.bagid-server-check-pending #app,
body.bagid-server-check-pending #modals-root{visibility:hidden!important}
.maintenance-screen[hidden]{display:none!important}
.maintenance-screen{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:20px;box-sizing:border-box;pointer-events:auto}
body.bagid-maintenance-mode{overflow:hidden!important}
body.bagid-maintenance-mode #app,
body.bagid-maintenance-mode #modals-root{display:none!important}
.maintenance-panel{position:relative;width:min(620px,calc(100vw - 32px));min-height:180px;display:grid;place-items:center;padding:58px 34px 34px;box-sizing:border-box;text-align:center;border:1px solid rgba(111,190,255,.30);background:rgba(5,18,34,.76);box-shadow:0 28px 90px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.06)}
.maintenance-message{margin:0;color:var(--text);font-size:clamp(18px,2.1vw,25px);line-height:1.45;font-weight:700;letter-spacing:.01em;text-wrap:balance;-webkit-user-select:none;user-select:none}
.maintenance-language-toggle{position:absolute;top:14px;right:14px;width:32px;min-width:32px;height:32px;padding:0;border:1px solid rgba(58,112,143,.52);border-radius:9px;background:rgba(3,27,45,.88);color:#f4fbff;box-shadow:0 0 10px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.025);font:700 12px/1 system-ui,sans-serif;cursor:pointer}

/* v0.8.421 — штатная server-side №1006 не прилипает к верхнему краю modal content. */
.modal-backdrop .bagid-window-service-error{width:100%;min-height:clamp(220px,48dvh,520px);margin:auto!important;padding:26px!important;box-sizing:border-box!important;display:grid!important;place-items:center!important;text-align:center!important;line-height:1.55!important}
#release-details-modal .details-scroll-content>.bagid-window-service-error{min-height:calc(100dvh - 64px)!important}
#list-modal .list-results>.bagid-window-service-error{min-height:clamp(240px,54dvh,560px)!important;border-top:0!important}
@media(max-width:980px){
  .maintenance-screen{padding:12px}
  .maintenance-panel{width:min(94vw,620px);min-height:170px;padding:56px 22px 28px}
  .maintenance-message{font-size:clamp(17px,5vw,22px)}
  .maintenance-language-toggle{top:12px;right:12px}
  .modal-backdrop .bagid-window-service-error{min-height:42dvh;padding:20px!important}
  #release-details-modal .details-scroll-content>.bagid-window-service-error{min-height:calc(100dvh - 52px)!important}
}


/* v0.8.421 — UI controls are not text-selection surfaces. Inputs/text content remain selectable. */
button,button *, .btn,.btn *, [role="button"],[role="button"] *{
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
}
/* Main-page TOP 100 is one interactive ranking surface: rank, domain and amount are not selectable. */
#top-support-root .support-list,#top-support-root .support-list *{
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
}
/* Custom Recent/Premium filter labels/options are UI controls. */
#list-modal .release-list-filter,
#list-modal .release-list-filter *,
#list-modal .premium-goal-filter,
#list-modal .premium-goal-filter *{
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
}

/* v0.8.478 — карточки раздач: статусные badges повторяют 5px радиус пользовательского PREMIUM статуса. */
.latest-release-statuses .status,
.release-row .status,
#active-list .mini-card .status,
.my-release-head .status{border-radius:5px!important}

/* v0.8.478 — the shared page blur is a single compositor layer on mobile too. */
#modals-root::before{
  will-change:opacity!important;
  transform:translateZ(0)!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}

/* v0.8.505 — mobile modal compositor: полный 12px backdrop-filter был самым дорогим слоем при открытии
   большого Subdomains viewport. На mobile/coarse pointer blur легче, а fade остаётся только opacity. */
@media(max-width:980px),(hover:none) and (pointer:coarse){
  #modals-root::before{
    background:rgba(1,6,12,.62)!important;
    backdrop-filter:blur(7px)!important;
    -webkit-backdrop-filter:blur(7px)!important;
    transition:opacity .24s ease,visibility 0s linear .24s!important;
    will-change:opacity!important;
    transform:translateZ(0)!important;
    backface-visibility:hidden!important;
  }
  body.bagid-single-modal-effect #modals-root::before{
    transition:opacity .24s ease!important;
  }
}

/* v0.8.509 — heavy mobile modals paint one compositor beat after the shared page blur starts.
   The backdrop is already open; only the large inner tree is held invisible for two RAFs. */
@media(max-width:980px),(hover:none) and (pointer:coarse){
  #subdomains-modal.bagid-mobile-open-stage>.subdomains-modal-viewport,
  #create-release-modal.bagid-mobile-open-stage>.create-modal-viewport,
  #create-premium-release-modal.bagid-mobile-open-stage>.create-modal-viewport,
  #admin-panel-modal.bagid-mobile-open-stage>.admin-modal-scroll-shell{
    visibility:hidden!important;
  }
}


/* v0.8.535 — Create Regular/Premium prepaint atomically on mobile.
   visibility:hidden prevented the browser from painting the large gradient/frame in advance,
   so simple children could become visible one compositor frame before the window surface.
   Keep the full viewport paintable in its own layer at imperceptible opacity, then reveal the
   whole layer together when bagid-mobile-open-stage is removed. */
@media(max-width:980px),(hover:none) and (pointer:coarse){
  #create-release-modal>.create-modal-viewport,
  #create-premium-release-modal>.create-modal-viewport{
    opacity:1;
    transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transition:opacity .09s linear;
  }
  #create-release-modal.bagid-mobile-open-stage>.create-modal-viewport,
  #create-premium-release-modal.bagid-mobile-open-stage>.create-modal-viewport{
    visibility:visible!important;
    opacity:.001!important;
    pointer-events:none!important;
    will-change:opacity!important;
    transform:translateZ(0)!important;
  }
}


/* BAGID source: assets/css/pc.css */
/* Назначение файла: Общие стили «pc»: правила интерфейса, применяемые на нескольких страницах и компонентах. */
/* Каждый комментарий ниже поясняет назначение следующего CSS-блока. */

/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width: 981px)`. */
@media (min-width: 981px){

  /* Назначение CSS-блока: Настраивает элементы селектора «.left-rail,.right-rail». */
  .left-rail,.right-rail{display:flex;flex-direction:column;gap:8px}

  /* Назначение CSS-блока: Настраивает элементы селектора «.center-rail». */
  .center-rail{display:block}
  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.content-columns». */
  .content-columns{display:grid;grid-template-columns:minmax(220px,.78fr) minmax(360px,1.2fr) minmax(220px,.78fr);gap:8px;align-items:start}

  /* Назначение CSS-блока: Настраивает элементы селектора «.bottom-grid». */
  .bottom-grid{display:contents}

  /* Назначение CSS-блока: Настраивает элементы селектора «.glass-panel». */
  .glass-panel{padding:16px}
  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.right-rail .glass-panel». */
  .right-rail .glass-panel{margin-bottom:8px}

  /* Назначение CSS-блока: Настраивает элементы селектора «.wide-only». */
  .wide-only{display:block}
  /* Назначение CSS-блока: Настраивает элементы селектора «.mobile-only». */
  .mobile-only{display:none!important}
}
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width: 1500px)`. */
@media (min-width: 1500px){
  /* Назначение CSS-блока: Настраивает элементы селектора «.app-layout». */
  .app-layout{grid-template-columns:300px minmax(850px,1fr) 500px}
  /* Назначение CSS-блока: Настраивает элементы селектора «.mini-card-grid». */
  .mini-card-grid{grid-template-columns:1fr}}
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width: 1180px) and (max-width:1499px)`. */
@media (min-width: 1180px) and (max-width:1499px){
  /* Назначение CSS-блока: Настраивает элементы селектора «.app-layout». */
  .app-layout{grid-template-columns:290px minmax(660px,1fr) 420px}
  /* Назначение CSS-блока: Настраивает элементы селектора «.content-columns». */
  .content-columns{grid-template-columns:minmax(190px,.8fr) minmax(300px,1.15fr) minmax(190px,.8fr)}
  /* Назначение CSS-блока: Настраивает элементы селектора «.mini-card-grid». */
  .mini-card-grid{grid-template-columns:1fr}}
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width: 981px) and (max-width:1179px)`. */
@media (min-width: 981px) and (max-width:1179px){
  /* Назначение CSS-блока: Настраивает элементы селектора «.app-layout». */
  .app-layout{grid-template-columns:270px minmax(0,1fr)}
  /* Назначение CSS-блока: Настраивает элементы селектора «.right-rail». */
  .right-rail{display:none}
  /* Назначение CSS-блока: Настраивает элементы селектора «.content-columns». */
  .content-columns{grid-template-columns:1fr}
  /* Назначение CSS-блока: Настраивает элементы селектора «.mini-card-grid». */
  .mini-card-grid{grid-template-columns:1fr}}

/* v0.1.7 — после удаления правого статичного блока весь центр занимает контент */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width: 981px)`. */
@media (min-width: 981px){

  /* Назначение CSS-блока: Настраивает элементы селектора «.app-layout-main». */
  .app-layout-main{grid-template-columns:300px minmax(760px,1fr)!important}

  /* Назначение CSS-блока: Настраивает элементы селектора «.content-columns». */
  .content-columns{grid-template-columns:minmax(220px,.8fr) minmax(360px,1.2fr) minmax(220px,.8fr);gap:8px}
}
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width: 1500px)`. */
@media (min-width: 1500px){
  /* Назначение CSS-блока: Настраивает элементы селектора «.app-layout-main». */
  .app-layout-main{grid-template-columns:300px minmax(900px,1fr)!important}}
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width: 1180px) and (max-width:1499px)`. */
@media (min-width: 1180px) and (max-width:1499px){
  /* Назначение CSS-блока: Настраивает элементы селектора «.app-layout-main». */
  .app-layout-main{grid-template-columns:290px minmax(660px,1fr)!important}}
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width: 981px) and (max-width:1179px)`. */
@media (min-width: 981px) and (max-width:1179px){
  /* Назначение CSS-блока: Настраивает элементы селектора «.app-layout-main». */
  .app-layout-main{grid-template-columns:270px minmax(0,1fr)!important}
  /* Назначение CSS-блока: Настраивает элементы селектора «.content-columns». */
  .content-columns{grid-template-columns:1fr}}


/* v0.6.5 — автоматическая перестройка после отключения блоков */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «[hidden],.block-disabled». */
[hidden],.block-disabled{display:none!important}

/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width:981px)`. */
@media(min-width:981px){
  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.content-columns». */
  .content-columns{
    grid-template-columns:repeat(var(--content-block-count,2),minmax(0,1fr))!important;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-layout-main.without-left-rail». */
  .app-layout-main.without-left-rail{
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид логотипа для селектора «.app-header.without-logo». */
  .app-header.without-logo{
    grid-template-columns:1fr!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид меню для селектора «.app-header.without-menu». */
  .app-header.without-menu{
    grid-template-columns:300px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид меню и логотипа для селектора «.app-header.without-logo.without-menu». */
  .app-header.without-logo.without-menu{
    display:none!important;
  }
}


/* v0.6.16 — точное совпадение колонок МЕНЮ/ПРОФИЛЬ */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width:1500px)`. */
@media(min-width:1500px){

  /* Назначение CSS-блока: Настраивает элементы селектора «.app-header». */
  .app-header{
    grid-template-columns:300px minmax(0,1fr)!important;
    column-gap:8px!important;
  }
}

/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width:1180px) and (max-width:1499px)`. */
@media(min-width:1180px) and (max-width:1499px){

  /* Назначение CSS-блока: Настраивает элементы селектора «.app-header». */
  .app-header{
    grid-template-columns:290px minmax(0,1fr)!important;
    column-gap:8px!important;
  }
}

/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width:981px) and (max-width:1179px)`. */
@media(min-width:981px) and (max-width:1179px){

  /* Назначение CSS-блока: Настраивает элементы селектора «.app-header». */
  .app-header{
    grid-template-columns:270px minmax(0,1fr)!important;
    column-gap:8px!important;
  }
}

/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width:981px)`. */
@media(min-width:981px){

  /* Назначение CSS-блока: Настраивает элементы селектора «.app-layout-main». */
  .app-layout-main{
    column-gap:8px!important;
  }
}


/* v0.6.25 — меню над профилем на ПК */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width:981px)`. */
@media(min-width:981px){

  /* Назначение CSS-блока: Настраивает внешний вид меню для селектора «body.desktop-menu-in-left .app-header». */
  body.desktop-menu-in-left .app-header{
    display:none!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид меню для селектора «body.desktop-menu-in-left .app-shell». */
  body.desktop-menu-in-left .app-shell{
    padding-top:5px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид меню для селектора «body.desktop-menu-in-left .app-layout-main». */
  body.desktop-menu-in-left .app-layout-main{
    flex:1!important;
    min-height:0!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид меню для селектора «body.desktop-menu-in-left .left-rail». */
  body.desktop-menu-in-left .left-rail{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид профиля и меню и верхней панели для селектора «body.desktop-menu-in-left #logo-root, body.desktop-menu-in-left #topbar-root, body.desktop-menu-in-left #profile-root». */
  body.desktop-menu-in-left #logo-root,
  body.desktop-menu-in-left #topbar-root,
  body.desktop-menu-in-left #profile-root{
    width:100%!important;
    min-width:0!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид меню и верхней панели для селектора «body.desktop-menu-in-left #topbar-root .topbar». */
  body.desktop-menu-in-left #topbar-root .topbar{
    width:100%!important;
  }
}


/* v0.6.26 — постоянный промежуток между меню и профилем */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width:981px)`. */
@media(min-width:981px){

  /* Назначение CSS-блока: Настраивает внешний вид меню для селектора «body.desktop-menu-in-left .left-rail». */
  body.desktop-menu-in-left .left-rail{
    gap:8px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид профиля и меню и верхней панели для селектора «body.desktop-menu-in-left #topbar-root, body.desktop-menu-in-left #profile-root». */
  body.desktop-menu-in-left #topbar-root,
  body.desktop-menu-in-left #profile-root{
    margin:0!important;
    padding:0!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид профиля и меню и верхней панели для селектора «body.desktop-menu-in-left #topbar-root .topbar, body.desktop-menu-in-left #profile-root .profile». */
  body.desktop-menu-in-left #topbar-root .topbar,
  body.desktop-menu-in-left #profile-root .profile{
    margin:0!important;
  }
}


/* v0.6.27 — одинаковый реальный промежуток меню/профиль */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width:981px)`. */
@media(min-width:981px){

  /* Назначение CSS-блока: Настраивает внешний вид меню для селектора «body.desktop-menu-in-left .left-rail». */
  body.desktop-menu-in-left .left-rail{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид профиля и меню и верхней панели для селектора «body.desktop-menu-in-left #topbar-root, body.desktop-menu-in-left #profile-root, body.desktop-menu-in-left #topbar-root .topbar, body.desktop-menu-in-left #profile-root .profile». */

  /* Назначение CSS-блока: Настраивает внешний вид профиля и меню и верхней панели для селектора «body.desktop-menu-in-left #topbar-root, body.desktop-menu-in-left #profile-root, body.desktop-menu-in-left #topbar-root .topbar, body.desktop-menu-in-left #profile-root .profile». */
  body.desktop-menu-in-left #topbar-root,
  body.desktop-menu-in-left #profile-root,
  body.desktop-menu-in-left #topbar-root .topbar,
  body.desktop-menu-in-left #profile-root .profile{
    margin:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид профиля и меню для селектора «body.desktop-menu-in-left #profile-root .profile». */
  body.desktop-menu-in-left #profile-root .profile{
    padding:16px!important;
  }
}


/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width:981px)`. */
@media(min-width:981px){

  /* Назначение CSS-блока: Настраивает внешний вид меню для селектора «body.desktop-menu-in-left .left-rail». */
  body.desktop-menu-in-left .left-rail{
    gap:4px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид профиля и меню и верхней панели для селектора «body.desktop-menu-in-left #logo-root, body.desktop-menu-in-left #topbar-root, body.desktop-menu-in-left #profile-root». */
  body.desktop-menu-in-left #logo-root,
  body.desktop-menu-in-left #topbar-root,
  body.desktop-menu-in-left #profile-root{
    margin:0!important;
  }
}


/* v0.6.30 — ПК без внутренней прокрутки левой колонки */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width:981px)`. */
@media(min-width:981px){

  /* Назначение CSS-блока: Настраивает элементы селектора «.left-rail.scroll-area». */
  .left-rail.scroll-area{
    overflow:visible!important;
    padding-right:0!important;
    scrollbar-width:none!important;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.left-rail.scroll-area::-webkit-scrollbar». */
  .left-rail.scroll-area::-webkit-scrollbar{
    display:none!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид меню для селектора «body.desktop-menu-in-left .left-rail». */
  body.desktop-menu-in-left .left-rail{
    gap:8px!important;
  }

  /* Недавние слева, Премиум справа */
  /* Назначение CSS-блока: Настраивает внешний вид раздач для селектора «#latest-releases-root». */
  #latest-releases-root{
    order:1!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид премиум-раздач и раздач для селектора «#premium-releases-root». */
  #premium-releases-root{
    order:2!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид раздач для селектора «#active-releases-root». */
  #active-releases-root{
    order:3!important;
  }
}


/* v0.6.48 — расширенная левая колонка ПК: логотип, меню, профиль и ТОП 100 */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width:1500px)`. */
@media(min-width:1500px){

  /* Назначение CSS-блока: Настраивает элементы селектора «.app-header». */
  .app-header{
    grid-template-columns:360px minmax(0,1fr)!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид меню для селектора «.app-layout-main, body.desktop-menu-in-left .app-layout-main». */
  .app-layout-main,
  body.desktop-menu-in-left .app-layout-main{
    grid-template-columns:360px minmax(0,1fr)!important;
  }
}

/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width:1180px) and (max-width:1499px)`. */
@media(min-width:1180px) and (max-width:1499px){

  /* Назначение CSS-блока: Настраивает элементы селектора «.app-header». */
  .app-header{
    grid-template-columns:340px minmax(0,1fr)!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид меню для селектора «.app-layout-main, body.desktop-menu-in-left .app-layout-main». */
  .app-layout-main,
  body.desktop-menu-in-left .app-layout-main{
    grid-template-columns:340px minmax(0,1fr)!important;
  }
}

/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width:981px) and (max-width:1179px)`. */
@media(min-width:981px) and (max-width:1179px){

  /* Назначение CSS-блока: Настраивает элементы селектора «.app-header». */
  .app-header{
    grid-template-columns:320px minmax(0,1fr)!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид меню для селектора «.app-layout-main, body.desktop-menu-in-left .app-layout-main». */
  .app-layout-main,
  body.desktop-menu-in-left .app-layout-main{
    grid-template-columns:320px minmax(0,1fr)!important;
  }
}


/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width:981px)`. */
@media(min-width:981px){

  /* Назначение CSS-блока: Настраивает внешний вид меню для селектора «.app-layout-main.without-left-rail, body.desktop-menu-in-left .app-layout-main.without-left-rail». */
  .app-layout-main.without-left-rail,
  body.desktop-menu-in-left .app-layout-main.without-left-rail{
    grid-template-columns:minmax(0,1fr)!important;
  }
}


/* v0.6.55 — центрированный ПК-холст до 1900×1000 и новые ширины колонок */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width:981px)`. */
@media(min-width:981px){

  /* Назначение CSS-блока: Настраивает элементы селектора «.app-shell». */
  .app-shell{
    width:min(1900px,calc(100vw - 20px))!important;
    max-width:1900px!important;
    height:min(1000px,calc(100vh - 10px))!important;
    max-height:1000px!important;
    margin:0 auto 10px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид меню для селектора «body.desktop-menu-in-left .app-layout-main, .app-layout-main». */
  body.desktop-menu-in-left .app-layout-main,
  .app-layout-main{
    grid-template-columns:420px minmax(0,1120px)!important;
    justify-content:center!important;
    column-gap:10px!important;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.left-rail». */
  .left-rail{
    width:420px!important;
    min-width:420px!important;
    max-width:420px!important;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.center-rail». */
  .center-rail{
    width:1120px!important;
    min-width:0!important;
    max-width:1120px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид профиля и меню и верхней панели для селектора «body.desktop-menu-in-left #logo-root, body.desktop-menu-in-left #topbar-root, body.desktop-menu-in-left #profile-root, body.desktop-menu-in-left #top-support-root, body.desktop-...». */

  /* Назначение CSS-блока: Настраивает внешний вид профиля и меню и верхней панели для селектора «body.desktop-menu-in-left #logo-root, body.desktop-menu-in-left #topbar-root, body.desktop-menu-in-left #profile-root, body.desktop-menu-in-left #top-support-root, body.desktop-...». */
  body.desktop-menu-in-left #logo-root,
  body.desktop-menu-in-left #topbar-root,
  body.desktop-menu-in-left #profile-root,
  body.desktop-menu-in-left #top-support-root,
  body.desktop-menu-in-left #logo-root .logo-box,
  body.desktop-menu-in-left #topbar-root .topbar,
  body.desktop-menu-in-left #profile-root .profile,
  body.desktop-menu-in-left #top-support-root .top-support{
    width:420px!important;
    min-width:420px!important;
    max-width:420px!important;
    box-sizing:border-box!important;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.content-columns». */
  .content-columns{
    width:100%!important;
    max-width:1120px!important;
    grid-template-columns:repeat(var(--content-block-count,2),minmax(0,1fr))!important;
    gap:10px!important;
  }
}

/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width:1180px) and (max-width:1599px)`. */
@media(min-width:1180px) and (max-width:1599px){

  /* Назначение CSS-блока: Настраивает внешний вид меню для селектора «body.desktop-menu-in-left .app-layout-main, .app-layout-main». */
  body.desktop-menu-in-left .app-layout-main,
  .app-layout-main{
    grid-template-columns:390px minmax(0,1fr)!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид профиля и меню и верхней панели для селектора «.left-rail, body.desktop-menu-in-left #logo-root, body.desktop-menu-in-left #topbar-root, body.desktop-menu-in-left #profile-root, body.desktop-menu-in-left #top-support-root, b...». */

  /* Назначение CSS-блока: Настраивает внешний вид профиля и меню и верхней панели для селектора «.left-rail, body.desktop-menu-in-left #logo-root, body.desktop-menu-in-left #topbar-root, body.desktop-menu-in-left #profile-root, body.desktop-menu-in-left #top-support-root, b...». */
  .left-rail,
  body.desktop-menu-in-left #logo-root,
  body.desktop-menu-in-left #topbar-root,
  body.desktop-menu-in-left #profile-root,
  body.desktop-menu-in-left #top-support-root,
  body.desktop-menu-in-left #logo-root .logo-box,
  body.desktop-menu-in-left #topbar-root .topbar,
  body.desktop-menu-in-left #profile-root .profile,
  body.desktop-menu-in-left #top-support-root .top-support{
    width:390px!important;
    min-width:390px!important;
    max-width:390px!important;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.center-rail». */
  .center-rail{
    width:auto!important;
    max-width:100%!important;
  }
}

/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width:981px) and (max-width:1179px)`. */
@media(min-width:981px) and (max-width:1179px){

  /* Назначение CSS-блока: Настраивает внешний вид меню для селектора «body.desktop-menu-in-left .app-layout-main, .app-layout-main». */
  body.desktop-menu-in-left .app-layout-main,
  .app-layout-main{
    grid-template-columns:350px minmax(0,1fr)!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид профиля и меню и верхней панели для селектора «.left-rail, body.desktop-menu-in-left #logo-root, body.desktop-menu-in-left #topbar-root, body.desktop-menu-in-left #profile-root, body.desktop-menu-in-left #top-support-root, b...». */

  /* Назначение CSS-блока: Настраивает внешний вид профиля и меню и верхней панели для селектора «.left-rail, body.desktop-menu-in-left #logo-root, body.desktop-menu-in-left #topbar-root, body.desktop-menu-in-left #profile-root, body.desktop-menu-in-left #top-support-root, b...». */
  .left-rail,
  body.desktop-menu-in-left #logo-root,
  body.desktop-menu-in-left #topbar-root,
  body.desktop-menu-in-left #profile-root,
  body.desktop-menu-in-left #top-support-root,
  body.desktop-menu-in-left #logo-root .logo-box,
  body.desktop-menu-in-left #topbar-root .topbar,
  body.desktop-menu-in-left #profile-root .profile,
  body.desktop-menu-in-left #top-support-root .top-support{
    width:350px!important;
    min-width:350px!important;
    max-width:350px!important;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.center-rail». */
  .center-rail{
    width:auto!important;
    max-width:100%!important;
  }
}


/* v0.6.56 — по 5 раздач в главных блоках ПК без внутренней прокрутки */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (min-width:981px)`. */
@media(min-width:981px){

  /* Назначение CSS-блока: Настраивает внешний вид премиум-раздач и раздач для селектора «#premium-releases-root .premium-panel, #latest-releases-root .latest». */
  #premium-releases-root .premium-panel,
  #latest-releases-root .latest{
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид премиум-раздач и раздач и списков для селектора «#premium-releases-root .premium-release-card-list, #latest-releases-root .card-list». */
  #premium-releases-root .premium-release-card-list,
  #latest-releases-root .card-list{
    overflow:visible!important;
    max-height:none!important;
  }


  /* Назначение CSS-блока: Настраивает внешний вид раздач и модального окна и списков для селектора «#latest-releases-root .latest-release-card-list .release-row, #list-modal .latest-release-card-list .release-row». */
  #latest-releases-root .latest-release-card-list .release-row,
  #list-modal .latest-release-card-list .release-row{
    grid-template-columns:76px minmax(0,1fr)!important;
    min-height:112px!important;
    gap:11px!important;
    padding:8px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид раздач и модального окна и обложек для селектора «#latest-releases-root .latest-release-card-list .poster, #list-modal .latest-release-card-list .poster». */
  #latest-releases-root .latest-release-card-list .poster,
  #list-modal .latest-release-card-list .poster{
    width:76px!important;
    height:104px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид раздач и модального окна и списков для селектора «#latest-releases-root .latest-release-card-list .release-info h3, #list-modal .latest-release-card-list .release-info h3». */
  #latest-releases-root .latest-release-card-list .release-info h3,
  #list-modal .latest-release-card-list .release-info h3{
    font-size:14px!important;
    margin:2px 0 5px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид раздач и модального окна и списков для селектора «#latest-releases-root .latest-release-card-list .meta-line, #list-modal .latest-release-card-list .meta-line». */
  #latest-releases-root .latest-release-card-list .meta-line,
  #list-modal .latest-release-card-list .meta-line{
    gap:7px 10px!important;
    font-size:11px!important;
  }
}

/* v0.8.478 — desktop zoom: один document scroll, невидимая системная полоса. */
@media(min-width:981px){
  html{height:auto!important;min-height:100%!important;overflow-x:hidden!important;overflow-y:auto!important;scrollbar-width:none!important}
  body:not(.modal-open):not(.tonconnect-modal-open):not(.bagid-maintenance-mode){height:auto!important;min-height:100vh!important;overflow:visible!important;scrollbar-width:none!important}
  html::-webkit-scrollbar,body::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;background:transparent!important}
  .app-shell{height:auto!important;min-height:calc(100vh - 10px)!important;max-height:none!important;overflow:visible!important}
  body.desktop-menu-in-left .app-layout-main,.app-layout-main{flex:0 0 auto!important;min-height:0!important;overflow:visible!important}
  .center-rail.scroll-area,.left-rail.scroll-area{overflow:visible!important;max-height:none!important;padding-right:0!important;scrollbar-width:none!important;overscroll-behavior:auto!important}
  .center-rail.scroll-area::-webkit-scrollbar,.left-rail.scroll-area::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
}



/* BAGID source: assets/css/mobile.css */
/* Назначение файла: Общие стили «mobile»: правила интерфейса, применяемые на нескольких страницах и компонентах. */
/* Каждый комментарий ниже поясняет назначение следующего CSS-блока. */

/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width: 980px)`. */
@media (max-width: 980px){
  /* Назначение CSS-блока: Настраивает элементы селектора «body». */
  body{overflow:auto}
  /* Назначение CSS-блока: Настраивает элементы селектора «.app-shell». */
  .app-shell{height:auto;min-height:100vh}
  /* Назначение CSS-блока: Настраивает элементы селектора «.app-header». */
  .app-header{grid-template-columns:1fr;position:sticky;top:0;z-index:20;background:rgba(3,11,23,.82);backdrop-filter:blur(14px);padding-bottom:6px}
  /* Назначение CSS-блока: Настраивает элементы селектора «.app-layout». */
  .app-layout{display:flex;flex-direction:column}
  /* Назначение CSS-блока: Настраивает элементы селектора «.left-rail,.center-rail,.right-rail». */
  .left-rail,.center-rail,.right-rail{overflow:visible}
  /* Назначение CSS-блока: Настраивает элементы селектора «.glass-panel». */
  .glass-panel{padding:14px}
  /* Назначение CSS-блока: Настраивает элементы селектора «.bottom-grid». */
  .bottom-grid{display:flex;flex-direction:column;gap:8px}
  /* Назначение CSS-блока: Настраивает элементы селектора «.content-columns». */
  .content-columns{display:flex;flex-direction:column;gap:8px}
  /* Назначение CSS-блока: Настраивает элементы селектора «.mini-card-grid». */
  .mini-card-grid{grid-template-columns:1fr}
  /* Назначение CSS-блока: Настраивает внешний вид раздач для селектора «.release-row». */
  .release-row{grid-template-columns:78px 1fr}
  /* Назначение CSS-блока: Настраивает внешний вид обложек для селектора «.poster». */
  .poster{width:78px;height:116px}
  /* Назначение CSS-блока: Настраивает элементы селектора «.wide-only». */
  .wide-only{display:none!important}
  /* Назначение CSS-блока: Настраивает элементы селектора «.mobile-only». */
  .mobile-only{display:block}
  /* Назначение CSS-блока: Настраивает внешний вид модального окна для селектора «.modal». */
  .modal{width:100%;max-height:96vh}
  /* Назначение CSS-блока: Настраивает внешний вид модального окна для селектора «.modal-actions». */
  .modal-actions{position:sticky;bottom:0;background:linear-gradient(180deg,transparent,rgba(5,15,29,.98) 25%);padding-top:14px}
  /* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «.btn». */
  .btn{padding:10px 12px;font-size:14px}}

/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media (max-width:980px){
  /* Назначение CSS-блока: Настраивает внешний вид верхней панели для селектора «#topbar-root». */
  #topbar-root{min-width:0}}

/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media (max-width:980px){

  /* Назначение CSS-блока: Настраивает элементы селектора «.app-header». */
  .app-header{background:transparent!important;box-shadow:none!important}
}

/* v0.1.15 — mobile layout final override */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media(max-width:980px){

  /* Назначение CSS-блока: Настраивает элементы селектора «.app-layout, .app-layout-main». */
  .app-layout,
  .app-layout-main{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
  }
  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.left-rail». */
  .left-rail{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
  }
}

/* v0.1.16 — exact mobile gap between topbar/header and profile */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media(max-width:980px){

  /* Назначение CSS-блока: Настраивает элементы селектора «.app-shell». */
  .app-shell{gap:8px!important}

  /* Назначение CSS-блока: Настраивает элементы селектора «.app-header». */
  .app-header{margin-bottom:0!important;padding-bottom:0!important}
  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-layout,.app-layout-main». */
  .app-layout,.app-layout-main{margin-top:0!important;padding-top:0!important;gap:8px!important}

  /* Назначение CSS-блока: Настраивает элементы селектора «.left-rail». */
  .left-rail{gap:8px!important}

  /* Назначение CSS-блока: Настраивает внешний вид профиля для селектора «#profile-root». */
  #profile-root{margin-top:0!important}
}

/* v0.1.17 — финальный override расстояний на мобильной версии */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media(max-width:980px){

  /* Назначение CSS-блока: Настраивает элементы селектора «:root». */
  :root{--bagid-block-gap:8px}

  /* Назначение CSS-блока: Настраивает элементы селектора «.app-shell». */
  .app-shell{gap:var(--bagid-block-gap)!important}
  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-header». */
  .app-header{margin:0!important;padding-bottom:0!important}

  /* Назначение CSS-блока: Настраивает элементы селектора «.app-layout,.app-layout-main». */
  .app-layout,.app-layout-main{margin-top:0!important;padding-top:0!important;gap:var(--bagid-block-gap)!important}

  /* Назначение CSS-блока: Настраивает элементы селектора «.left-rail». */
  .left-rail{display:flex!important;flex-direction:column!important;gap:var(--bagid-block-gap)!important}
  /* Назначение CSS-блока: Настраивает внешний вид профиля и поддержки для селектора «#profile-root,#top-support-root,.profile,.top-support». */
  #profile-root,#top-support-root,.profile,.top-support{margin-top:0!important;margin-bottom:0!important}
}


/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media(max-width:980px){

  /* Назначение CSS-блока: Настраивает внешний вид профиля и верхней панели для селектора «#topbar-root, #profile-root». */
  #topbar-root,
  #profile-root{
    margin:0!important;
    padding:0!important;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-header, .app-layout-main, .left-rail». */
  .app-header,
  .app-layout-main,
  .left-rail{
    gap:8px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид профиля и верхней панели для селектора «#topbar-root .topbar, #profile-root .profile». */
  #topbar-root .topbar,
  #profile-root .profile{
    margin:0!important;
  }
}


/* v0.6.29 — уменьшены оба отмеченных промежутка */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media(max-width:980px){

  /* Назначение CSS-блока: Настраивает элементы селектора «:root». */
  :root{
    --bagid-block-gap:4px!important;
    --mobile-gap:4px!important;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-shell». */
  .app-shell{
    gap:4px!important;
    row-gap:4px!important;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-header». */
  .app-header{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:4px!important;
    row-gap:4px!important;
    margin:0!important;
    padding:0!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид верхней панели и логотипа для селектора «#logo-root, #topbar-root». */
  #logo-root,
  #topbar-root{
    margin:0!important;
    padding:0!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид верхней панели и логотипа для селектора «#logo-root .logo-box, #topbar-root .topbar». */
  #logo-root .logo-box,
  #topbar-root .topbar{
    margin:0!important;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-layout, .app-layout-main». */
  .app-layout,
  .app-layout-main{
    gap:4px!important;
    margin:0!important;
    padding:0!important;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.left-rail». */
  .left-rail{
    gap:4px!important;
    margin:0!important;
    padding:0 2px 0 0!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид профиля и поддержки для селектора «#profile-root, #top-support-root, #profile-root .profile, #top-support-root .top-support». */
  #profile-root,
  #top-support-root,
  #profile-root .profile,
  #top-support-root .top-support{
    margin:0!important;
  }
}


/* v0.6.30 — уменьшаются только два отмеченных промежутка */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media(max-width:980px){

  /* Назначение CSS-блока: Настраивает элементы селектора «:root». */
  :root{
    --bagid-block-gap:8px!important;
    --mobile-gap:8px!important;
  }

  /* Логотип → Меню */
  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-header». */
  .app-header{
    gap:0!important;
    row-gap:0!important;
    margin:0!important;
    padding:0!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид верхней панели и логотипа для селектора «#logo-root, #topbar-root, #logo-root .logo-box, #topbar-root .topbar». */
  #logo-root,
  #topbar-root,
  #logo-root .logo-box,
  #topbar-root .topbar{
    margin:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }

  /* Меню → Профиль */
  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-shell». */
  .app-shell{
    gap:1px!important;
    row-gap:1px!important;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-layout, .app-layout-main». */
  .app-layout,
  .app-layout-main{
    margin:0!important;
    padding:0!important;
    gap:8px!important;
  }

  /* Все остальные блоки возвращены к обычному шагу 8px */
  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.left-rail, .content-columns, .bottom-grid». */
  .left-rail,
  .content-columns,
  .bottom-grid{
    gap:8px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид премиум-раздач и раздач и профиля для селектора «#profile-root, #top-support-root, #premium-releases-root, #latest-releases-root, #active-releases-root». */
  #profile-root,
  #top-support-root,
  #premium-releases-root,
  #latest-releases-root,
  #active-releases-root{
    margin:0!important;
  }
}


/* v0.6.31 — оба отмеченных расстояния равны обычному промежутку 8px */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media(max-width:980px){

  /* Назначение CSS-блока: Настраивает элементы селектора «:root». */
  :root{
    --bagid-block-gap:8px!important;
    --mobile-gap:8px!important;
  }

  /* Логотип → Меню */
  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-header». */
  .app-header{
    gap:6px!important;
    row-gap:6px!important;
    margin:0!important;
    padding:0!important;
  }

  /* Меню → Профиль */
  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-shell». */
  .app-shell{
    gap:8px!important;
    row-gap:8px!important;
  }

  /* Все остальные основные блоки остаются на том же шаге */
  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.app-layout, .app-layout-main, .left-rail, .content-columns, .bottom-grid». */
  .app-layout,
  .app-layout-main,
  .left-rail,
  .content-columns,
  .bottom-grid{
    gap:8px!important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид премиум-раздач и раздач и профиля для селектора «#logo-root, #topbar-root, #profile-root, #top-support-root, #premium-releases-root, #latest-releases-root, #active-releases-root». */
  #logo-root,
  #topbar-root,
  #profile-root,
  #top-support-root,
  #premium-releases-root,
  #latest-releases-root,
  #active-releases-root{
    margin:0!important;
  }
}


/* v0.6.42 — только сдвиг четырёх блоков вправо на 3px без изменения ширины */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media(max-width:980px){

  /* Назначение CSS-блока: Настраивает внешний вид премиум-раздач и раздач и профиля для селектора «#profile-root, #top-support-root, #premium-releases-root, #latest-releases-root». */
  #profile-root,
  #top-support-root,
  #premium-releases-root,
  #latest-releases-root{
    position:relative!important;
    left:1px!important;
  }
}


/* v0.7.182 — мобильный интерфейс прокручивается жестом без видимых полос прокрутки в окнах. */
@media(max-width:980px){
  html,body,body *{scrollbar-width:none!important}
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  body *::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;background:transparent!important}
}


/* BAGID source: assets/css/components.css */
/* Назначение файла: Общие стили «components»: правила интерфейса, применяемые на нескольких страницах и компонентах. */
/* Каждый комментарий ниже поясняет назначение следующего CSS-блока. */

/* v0.8.339 — component CSS НЕ импортируется отсюда.
   Каждый компонент получает свой stylesheet ровно один раз через app.js/loadCssOnce().
   Это исключает скрытый двойной burst из @import + dynamic <link> на TON/RLDP gateway. */

/* v0.7.84 — единая крупная кнопка закрытия: красное перекрестие без старой маленькой картинки. */
html body .modal-x,html body .close-details,html body .poster-viewer-close{
  width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;
  display:grid!important;place-items:center!important;position:absolute;
  border-radius:10px!important;border:1px solid rgba(255,73,94,.34)!important;
  background:rgba(23,9,15,.82)!important;box-shadow:0 0 10px rgba(218,31,58,.12),inset 0 1px 0 rgba(255,133,146,.07)!important;
  cursor:pointer!important;z-index:30!important;overflow:hidden!important;
}
html body .modal-x img,html body .close-details img,html body .poster-viewer-close img{display:none!important}
html body .modal-x::before,html body .modal-x::after,html body .close-details::before,html body .close-details::after,html body .poster-viewer-close::before,html body .poster-viewer-close::after{
  content:"";position:absolute;left:50%;top:50%;width:21px;height:2.5px;border-radius:3px;
  background:#ff425c;box-shadow:0 0 6px rgba(255,47,76,.62);transform-origin:center;pointer-events:none;
}
.modal-x::before,.close-details::before,.poster-viewer-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.modal-x::after,.close-details::after,.poster-viewer-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
html body .modal-x:hover,html body .close-details:hover,html body .poster-viewer-close:hover{border-color:rgba(255,88,109,.58)!important;background:rgba(40,10,19,.90)!important}
@media(max-width:560px){html body .modal-x,html body .close-details,html body .poster-viewer-close{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}}

/* Единая внешняя прокрутка модалок: геометрия и цвета совпадают с окном обычной раздачи. */
.bagid-modal-scroll-shell{
  max-height:calc(100dvh - 12px);
  overflow-x:hidden;
  overflow-y:auto;
  padding-right:2px;
  box-sizing:border-box;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(111,169,255,.62) rgba(3,13,25,.42);
}
.bagid-modal-scroll-shell::-webkit-scrollbar{width:9px}
.bagid-modal-scroll-shell::-webkit-scrollbar-track{
  background:rgba(3,13,25,.42);
  border-radius:10px;
}
.bagid-modal-scroll-shell::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(111,190,255,.82),rgba(119,90,255,.72));
  border:2px solid rgba(3,13,25,.42);
  border-radius:10px;
}

/* v0.7.182 — после всех компонентных стилей скрывает полосы прокрутки мобильных окон, не отключая жестовую прокрутку. */
@media(max-width:980px){
  body .scroll-area,
  body .bagid-site-scrollbar,
  body .create-release-modal,
  body .create-premium-modal,
  body .my-releases-panel,
  body .support-history-list,
  body .admin-panel>.admin-section,
  body #release-details-modal .release-modal,
  body #list-modal .list-panel.is-latest-list,
  body #list-modal .list-panel.is-latest-list .list-results,
  body #list-modal .list-panel.is-premium-list .list-results,
  body #list-modal .release-list-filter .site-select-menu{
    scrollbar-width:none!important;
  }
  body .scroll-area::-webkit-scrollbar,
  body .bagid-site-scrollbar::-webkit-scrollbar,
  body .create-release-modal::-webkit-scrollbar,
  body .create-premium-modal::-webkit-scrollbar,
  body .my-releases-panel::-webkit-scrollbar,
  body .support-history-list::-webkit-scrollbar,
  body .admin-panel>.admin-section::-webkit-scrollbar,
  body #release-details-modal .release-modal::-webkit-scrollbar,
  body #list-modal .list-panel.is-latest-list::-webkit-scrollbar,
  body #list-modal .list-panel.is-latest-list .list-results::-webkit-scrollbar,
  body #list-modal .list-panel.is-premium-list .list-results::-webkit-scrollbar,
  body #list-modal .release-list-filter .site-select-menu::-webkit-scrollbar{
    display:none!important;
    width:0!important;
    height:0!important;
    background:transparent!important;
  }
}

/* v0.8.421 — chrome модалки уезжает вместе с внутренним scroll viewport. */
.bagid-scroll-away-control{translate:0 var(--bagid-scroll-away-y,0px)!important}

/* v0.8.421 — simulated scroll-away controls are progressively clipped at the modal top instead of painting over the site. */
.bagid-scroll-away-control{
  translate:0 var(--bagid-scroll-away-y,0px)!important;
  clip-path:inset(var(--bagid-scroll-away-clip,0px) 0 0 0 round 10px)!important;
}

/* v0.8.421 — on mobile all modal scroll areas use touch scrolling without visible bars. */
@media(max-width:980px){
  #modals-root .modal-backdrop *{scrollbar-width:none!important}
  #modals-root .modal-backdrop *::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
}


/* v0.8.478 — PC browser zoom scroll contract.
   На ПК scroll owner всегда документ HTML, даже когда browser zoom пересекает mobile CSS breakpoint.
   Rail-блоки никогда не получают собственную прокрутку; полоса документа скрыта, wheel продолжает работать. */
html.bagid-desktop-browser{
  height:auto!important;min-height:100%!important;overflow-x:hidden!important;overflow-y:auto!important;
  scrollbar-width:none!important;overscroll-behavior-y:auto!important;
}
html.bagid-desktop-browser body:not(.modal-open):not(.tonconnect-modal-open):not(.bagid-maintenance-mode){
  height:auto!important;min-height:100vh!important;max-height:none!important;
  overflow:visible!important;scrollbar-width:none!important;
}
html.bagid-desktop-browser::-webkit-scrollbar,
html.bagid-desktop-browser body::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;background:transparent!important}
html.bagid-desktop-browser body .app-shell{
  height:auto!important;min-height:100vh!important;max-height:none!important;overflow:visible!important;
  grid-template-rows:auto auto!important;
}
html.bagid-desktop-browser body .app-layout,
html.bagid-desktop-browser body .app-layout-main{
  height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;
  align-self:start!important;
}
html.bagid-desktop-browser body .left-rail.scroll-area,
html.bagid-desktop-browser body .center-rail.scroll-area{
  height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;
  scrollbar-width:none!important;overscroll-behavior:auto!important;padding-right:0!important;
}
html.bagid-desktop-browser body .left-rail.scroll-area::-webkit-scrollbar,
html.bagid-desktop-browser body .center-rail.scroll-area::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
/* При открытой модалке блокировка фона остаётся штатной. */
html.bagid-desktop-browser:has(body.modal-open),
html.bagid-desktop-browser.tonconnect-modal-open{overflow-y:hidden!important}


/* v0.8.487 — ПК: document scroll разрешается JS только при фактическом выходе видимого app-layout за viewport.
   Пока весь интерфейс помещается (включая штатный 100% zoom), страница остаётся неподвижной. */
html.bagid-desktop-browser:not(.bagid-page-scrollable){overflow-y:hidden!important;overscroll-behavior-y:none!important}
html.bagid-desktop-browser.bagid-page-scrollable{overflow-y:auto!important;overscroll-behavior-y:auto!important}


/* BAGID source: assets/css/icon-sizes.css */
/* Назначение файла: Общие стили «icon-sizes»: правила интерфейса, применяемые на нескольких страницах и компонентах. */
/* Каждый комментарий ниже поясняет назначение следующего CSS-блока. */


/* ==========================================================================
v0.1.6 — Единый стандарт размеров PNG-иконок
Все иконки-файлы остаются 512x512 для будущего, но на сайте отображаются
маленькими через CSS, согласно общему дизайну референса.
========================================================================== */

/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «:root». */
:root{
  --ui-icon-xs: 14px;
  --ui-icon-sm: 16px;
  --ui-icon-md: 20px;
  --ui-icon-lg: 24px;
  --ui-icon-title: 22px;
  --ui-icon-logo: 46px;
  --ui-icon-avatar: 92px;
}

/* Базовая защита от огромных PNG 512x512 */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «img[src*="assets/images/icons/"]». */
img[src*="assets/images/icons/"]{
  width: var(--ui-icon-md);
  height: var(--ui-icon-md);
  max-width: var(--ui-icon-md);
  max-height: var(--ui-icon-md);
  object-fit: contain;
  flex: 0 0 auto;
  vertical-align: middle;
}

/* Верхняя панель */
/* Назначение CSS-блока: Настраивает внешний вид кнопок и верхней панели для селектора «.topbar .btn img, .topbar .icon img». */
.topbar .btn img,
.topbar .icon img{
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
}

/* Назначение CSS-блока: Настраивает внешний вид верхней панели для селектора «.topbar .icon». */
.topbar .icon{
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
}

/* Логотип */
/* Назначение CSS-блока: Настраивает внешний вид логотипа для селектора «.logo img, .logo-mark img, .brand img, .site-logo img, #logo-root img[src*="icon-logo"]». */
.logo img,
.logo-mark img,
.brand img,
.site-logo img,
#logo-root img[src*="icon-logo"]{
  width: var(--ui-icon-logo) !important;
  height: var(--ui-icon-logo) !important;
  max-width: var(--ui-icon-logo) !important;
  max-height: var(--ui-icon-logo) !important;
}

/* Заголовки блоков */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.panel-title img, .panel-title-icon img, .glass-panel h2 img, .glass-panel h3 img». */
.panel-title img,
.panel-title-icon img,
.glass-panel h2 img,
.glass-panel h3 img{
  width: var(--ui-icon-title) !important;
  height: var(--ui-icon-title) !important;
  max-width: var(--ui-icon-title) !important;
  max-height: var(--ui-icon-title) !important;
}

/* Статистика профиля и мелкие строки */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.stat-icon, .meta-icon, .inline-icon, .tiny-inline, .copy-inline». */
.stat-icon,
.meta-icon,
.inline-icon,
.tiny-inline,
.copy-inline{
  width: var(--ui-icon-sm) !important;
  height: var(--ui-icon-sm) !important;
  max-width: var(--ui-icon-sm) !important;
  max-height: var(--ui-icon-sm) !important;
}

/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.tiny-inline, .copy-inline». */
.tiny-inline,
.copy-inline{
  width: var(--ui-icon-xs) !important;
  height: var(--ui-icon-xs) !important;
  max-width: var(--ui-icon-xs) !important;
  max-height: var(--ui-icon-xs) !important;
}

/* Квадратная кнопка-лупа около комментариев */
/* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.tiny-square img». */
.tiny-square img{
  width: 17px !important;
  height: 17px !important;
  max-width: 17px !important;
  max-height: 17px !important;
}

/* Категории в выпадающем меню */
/* Назначение CSS-блока: Настраивает внешний вид меню для селектора «.cat-menu img, .categories-menu img, .cat-item img». */
.cat-menu img,
.categories-menu img,
.cat-item img{
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
}

/* Кнопки в правой панели и модальных окнах */
/* Назначение CSS-блока: Настраивает внешний вид модального окна и кнопок и поддержки для селектора «.actions-row .btn img, .support-box .btn img, .modal-actions .btn img, .close-details img». */
.actions-row .btn img,
.support-box .btn img,
.modal-actions .btn img,
.close-details img{
  width: 19px !important;
  height: 19px !important;
  max-width: 19px !important;
  max-height: 19px !important;
}

/* Иконки файлов в списке */
/* Назначение CSS-блока: Настраивает внешний вид списков для селектора «.file-list img, .file-item img». */
.file-list img,
.file-item img{
  width: 15px !important;
  height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
}

/* Топ поддержка */
/* Назначение CSS-блока: Настраивает внешний вид поддержки для селектора «.support-user img[src*="icons/"]». */
.support-user img[src*="icons/"]{
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
}

/* Аватары НЕ должны попадать под правила иконок */
/* Назначение CSS-блока: Настраивает внешний вид аватаров и комментариев и поддержки для селектора «.avatar, .comment-avatar, .support-user img:not([src*="icons/"])». */
.avatar,
.comment-avatar,
.support-user img:not([src*="icons/"]){
  object-fit: cover;
}

/* Мобильная версия — иконки еще компактнее в верхней панели */
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width: 980px)`. */
@media (max-width: 980px){

  /* Назначение CSS-блока: Настраивает внешний вид кнопок и верхней панели для селектора «.topbar .btn img, .topbar .icon img». */
  .topbar .btn img,
  .topbar .icon img{
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
  }

  /* Назначение CSS-блока: Настраивает внешний вид верхней панели для селектора «.topbar .icon». */
  .topbar .icon{
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
  }

  /* Назначение CSS-блока: Настраивает элементы, соответствующие селектору «.panel-title img, .panel-title-icon img». */
  .panel-title img,
  .panel-title-icon img{
    width: 20px !important;
    height: 20px !important;
  }
}


/* v0.6.40 — увеличены только изображения иконок внутри кнопок */
/* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «button img[src*="assets/images/icons/"], button[class] img[src*="assets/images/icons/"]». */
button img[src*="assets/images/icons/"],
button[class] img[src*="assets/images/icons/"]{
  width:23px!important;
  height:23px!important;
  max-width:23px!important;
  max-height:23px!important;
  object-fit:contain;
}
/* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «button.btn img[src*="assets/images/icons/"]». */
button.btn img[src*="assets/images/icons/"]{
  width:24px!important;
  height:24px!important;
  max-width:24px!important;
  max-height:24px!important;
}
/* Назначение CSS-блока: Настраивает внешний вид кнопок и верхней панели для селектора «.topbar button.btn img[src*="assets/images/icons/"]». */
.topbar button.btn img[src*="assets/images/icons/"]{
  width:26px!important;
  height:26px!important;
  max-width:26px!important;
  max-height:26px!important;
}
/* Назначение CSS-блока: Группа адаптивных правил для условия `@media (max-width:980px)`. */
@media(max-width:980px){

  /* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «button img[src*="assets/images/icons/"], button[class] img[src*="assets/images/icons/"]». */
  button img[src*="assets/images/icons/"],
  button[class] img[src*="assets/images/icons/"]{
    width:22px!important;
    height:22px!important;
    max-width:22px!important;
    max-height:22px!important;
  }
  /* Назначение CSS-блока: Настраивает внешний вид кнопок для селектора «button.btn img[src*="assets/images/icons/"]». */
  button.btn img[src*="assets/images/icons/"]{
    width:23px!important;
    height:23px!important;
    max-width:23px!important;
    max-height:23px!important;
  }
  /* Назначение CSS-блока: Настраивает внешний вид кнопок и верхней панели для селектора «.topbar button.btn img[src*="assets/images/icons/"]». */
  .topbar button.btn img[src*="assets/images/icons/"]{
    width:24px!important;
    height:24px!important;
    max-width:24px!important;
    max-height:24px!important;
  }
}