/* ── index.css ── */
[v-cloak] { display:none !important; }




*,
html * /* override x.xhtml.ru style */ 
{
  scrollbar-width: thin;
  scrollbar-color: #645c6b80 rgba(0, 0, 0, .2);
}

b {
    font-weight: 600;
}

h1 {
    font-weight: 600;
}

*::-webkit-scrollbar,
html *::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
*::-webkit-scrollbar-track,
html *::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, .2);
}
*::-webkit-scrollbar-thumb,
html *::-webkit-scrollbar-thumb {
  background-color: #645c6b80;
  border-radius: 5px;
  border: 3px solid rgba(0, 0, 0, 0);
}

body {
    top: 0 !important;
}

/* Google Translate - скрыть основной виджет */
.skiptranslate {
    display: none !important;
    height: 0 !important;
}

/* Google Translate - скрыть баннер сверху */
.goog-te-banner-frame {
    display: none !important;
}

/* Google Translate - скрыть окно "Оцените этот перевод" */
.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q,
.VIpgJd-yAWNEb-VIpgJd-fmcmS,
.goog-tooltip,
.goog-text-highlight {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Google Translate - скрыть всплывающие подсказки при наведении */
div[id^="goog-gt-"],
div[class*="goog-te-"] {
    display: none !important;
}

/* Google Translate - оставить только сам перевод текста */
.goog-te-menu-frame,
.goog-te-balloon-frame {
    display: none !important;
}

/* Google Translate - убрать мигание и подсветку при наведении */
font[style*="vertical-align: inherit"] {
    background-color: transparent !important;
    transition: none !important;
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Убираем hover эффект от Google Translate */
font:hover {
    background-color: transparent !important;
}

/* Принудительно показываем все font элементы Google Translate */
font.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q,
font[class*="VIpgJd"] {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Custom Translation Tooltip */
.gtranslate-tooltip {
    position: fixed;
    z-index: 10000;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(127, 45, 232, 0.2);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 300px;
    min-width: 200px;
    display: none;
    animation: tooltipFadeIn 0.2s ease-in-out;
    pointer-events: auto;
}

#dark .gtranslate-tooltip {
    background: rgba(30, 30, 35, 0.98);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

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

.gtranslate-tooltip.show {
    display: block;
}

.gtranslate-tooltip-original {
    font-size: 13px;
    line-height: 1.4;
    color: #666;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    word-wrap: break-word;
}

#dark .gtranslate-tooltip-original {
    color: #aaa;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.gtranslate-tooltip-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.gtranslate-tooltip-buttons .small-button {
    flex: 1;
    min-width: 80px;
    padding: 6px 10px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    border-radius: 6px;
}

.gtranslate-tooltip-buttons .small-button .btn-img {
    width: 14px;
    height: 14px;
}

.language__img {
    cursor: pointer;
}
.head-info.profile-box font::after {
    content: ' ';
}
.head-info .user-online {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0EAD69;
    margin-left: 2px;
    margin-bottom: 8px;
    display: inline-block;
}
.head-info .last-seen {
    font-size: 14px;
    color: #aeaeae;
    display: inline-block;
    padding: 7px 10px;
    border-radius: 6px;
    background-color: #84848411;
    box-shadow: 0 0 0 1px #8484841e;
    color: #aeaeae;
    vertical-align: middle;
    margin-left: 14px;
    transform: translateY(-2px);
}
.head-info .last-seen.online {
    background-color: #0ead6816;
    box-shadow: inset 0 0 0 1px #0ead6813;
    color: #0EAD69;
}
body {
    background-color: #FFFFFF;
    margin: 0;
    font-family: 'Rubik', sans-serif;
    transition: 0.02s;
    /* background-image: url('/ui/xmas-bg.png'); */
    background-size: 300px;
}
body#dark {
    /* background-color: #191a1a; */
    /* background-color: #1c171b; */
    background-color: #18161b;
}

a {

}

#dark a {
    color: #4FA0FF;
}

h3 {
    font-weight: 500;
    font-size: 18px;
    color: #000000;
    margin: 0;
}

#dark h3 {
    color: #fff;
}

.container {
    max-width: 1597px;
    padding: 0 16px;
    margin: auto;
    box-sizing: border-box;
}
.header {
    height: 80px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    margin: 0 0 30px;
    border-bottom: 1px solid rgba(51, 51, 51, 0.1);
    align-items: center;
    grid-template-areas: 'logo nav auth';
}

.mobile-header, .mobile-header_social {
    display: none;
}

.header_nav {
    grid-area: nav;
    display: flex;
    align-items: center;
    position: relative;
    /* z-index: 0; */
}

.header-box {
    display: flex;
    gap: 16px;
    align-items: center;
    /* padding-left: 8px; */
    color: inherit;
    text-decoration: none;
}

#root .header-box {
    color: inherit;
}

.nav-link-container {
    position: relative;
}

.nav-link {
    color: rgba(164, 156, 193, 1);
    font-weight: 400;
    text-decoration: none;
    font-size: 14px;
    padding:  8px 16px;
    position: relative;
    cursor: pointer;
}


.nav-link.acc {
    padding: 8px 16px; 
    box-shadow: 0 0 0 1px rgba(164, 156, 193, 0.34);
    border-radius: 6px;
    margin: 0 8px;
}
.nav-link.acc:hover {
    box-shadow: 0 0 0 1px rgba(164, 156, 193, 0.5);
    background-color: rgba(164, 156, 193, 0.1);
}
.nav-link.active {
    color: rgba(127, 45, 232, 1);
}
.nav-link.active:not(.acc)::after {
    background-color: rgba(127, 45, 232, 1);
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
}
.nav-link:not(.acc)::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    background-color: rgba(164, 156, 193, 1);
    transition: .2s;
    opacity: 0;
}

.nav-link:hover::after {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
}

.nav-link-container .dropdown {
    position: absolute;
    top: calc(100% + 15px);
    display: flex;
    flex-direction: column;
    border-radius: 9px;
    background-color: #fff;
    border-radius: 9px;
    box-shadow: 0 0 0 1px #F2F2F2, 0px 6px 16px rgba(51, 75, 112, 0.14);
    left: 50%;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -20px);
    transition: .2s;
    z-index: 1000;
    pointer-events: none;
}

.nav-link-container .dropdown:hover::before, .nav-link-container:hover .dropdown::before {
    content: '';
    position: absolute;
    bottom: 100%;
    width: 100%;
    height: 15px;
    left: 0;
}

.nav-link-container:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    pointer-events: all;
}

#dark .nav-link-container .dropdown {
    background-color: #232025;
    box-shadow: 0 0 0 1px rgba(180, 180, 180, 0.16), 0px 6px 16px rgba(12, 18, 26, 0.2);
    color: #fff;
}

.nav-link-container .dropdown-item {
    text-decoration: none;
    text-align: center;
    display: inline-block;
    padding: 14px 20px;
    border-bottom: 1px solid #F2F2F2;
    font-size: 14px;
    color: #646A73;
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
    box-sizing: border-box; 
    cursor: pointer;
    min-width: 150px;
    max-width: 250px;
    /* font-weight: 600; */
}

.nav-link-container .dropdown-item:last-child {
    border-bottom: none;
}

#dark .nav-link-container .dropdown-item {
    border-color: rgba(180, 180, 180, 0.16);
    color: #fff;
}

.header_user {
    grid-area: auth;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    padding-right: 16px;
    border-radius: 9px;
    background-color: #fff;
    box-shadow: 0 0 0 1px rgba(180, 180, 180, 0.32);
    position: relative;
    cursor: default;
    font-size: 14px;
    text-decoration: none;
    color: #000;
}

.usermenu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 0 0 1px #F2F2F2, 0px 6px 16px rgba(51, 75, 112, 0.14);
    width: 260px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: .2s;
    z-index: 1001;
    pointer-events: none;
    overflow: hidden;
}

/* Невидимый «мост» между триггером и поповером — чтобы курсор не терял hover при переходе.
   Высота должна закрывать margin-top меню. */
.header_user::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    width: 280px;
    height: 14px;
    background: transparent;
    z-index: 1000;
}

/* Заголовок меню: аватар + ник + баланс */
.usermenu-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #F2F2F2;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.usermenu-head:hover { background: #f7f5ff; }
.usermenu-head__avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.usermenu-head__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.usermenu-head__name {
    font-weight: 600;
    font-size: 14px;
    color: #1f1f1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.usermenu-head__balance {
    font-size: 12px;
    color: #b08600;
    font-weight: 600;
}
.usermenu-head__balance small { font-weight: 500; }

/* Геймификация в меню — обнуляем внешние отступы шкалы (она задумана для страницы профиля) */
.usermenu .profile-gm-bar.usermenu-gm {
    margin: 10px 12px;
    padding: 10px 12px 10px 14px;
    gap: 12px;
}

/* Кликабельный блок уровня/XP — открывает модалку достижений и оформления */
.profile-gm-bar.usermenu-gm--clickable {
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
}
.profile-gm-bar.usermenu-gm--clickable:hover {
    background: linear-gradient(180deg, rgba(127,45,232,.10), rgba(127,45,232,.04));
    box-shadow: inset 0 0 0 1px rgba(127,45,232,.25), 0 1px 0 rgba(0,0,0,.18);
}
.usermenu .usermenu-gm .pgb-meta {
    min-width: 38px;
    padding-right: 12px;
}
.usermenu .usermenu-gm .pgb-meta__num { font-size: 18px; margin-top: 2px; }
.usermenu .usermenu-gm .pgb-progress__xp { font-size: 11px; }

/* Кнопки модалок геймификации */
.usermenu-gm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 0 12px 10px;
}
.usermenu-gm-actions .usermenu-button {
    text-align: center;
    border: 1px solid #F2F2F2;
    border-radius: 8px;
    padding: 8px;
    font-size: 12.5px;
    cursor: pointer;
    background: #fafafa;
    transition: background .15s, border-color .15s;
}
.usermenu-gm-actions .usermenu-button:hover {
    background: #f3eeff;
    border-color: #d9c8ff;
}

/* Иконки коллекций — компактный ряд, помещаются 5+ штук.
   На десктопе .mini-grid внутри usermenu идёт без gap и с space-between,
   чтобы не переносить кнопки на новую строку. */
.usermenu .mini-grid {
    gap: 0;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.usermenu-collections {
    padding: 0 12px 10px;
    border-bottom: 1px solid #F2F2F2;
}
.usermenu-collections .collection-btn {
    width: 38px;
    height: 38px;
    background-size: 12px;
}

.usermenu:hover::before, .header_user:hover .usermenu::before {
    content: '';
    position: absolute;
    bottom: 100%;
    width: 100%;
    height: 15px;
    left: 0;
}

.header_user:hover .usermenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: all;
}

.avatar {
    width: 24px;
    height: 24px;
    background: rgba(225, 228, 240, 0.45);
    border-radius: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    font-size: 14px;
    color: #000;
    font-weight: 400;
    background-image: url('/ui/default-avatar.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.profile-info, .usermenu-button {
    text-decoration: none;
    text-align: left;
    display: inline-block;
    padding: 12px;
    border-bottom: 1px solid #F2F2F2;
    font-size: 14px;
    color: #646A73;
    width: 100%;
    box-sizing: border-box;
}

.usermenu-button.switcher {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.switcher-checkbox {
    height: 20px;
    width: 34px;
    background-color: #81818130;
    border-radius: 30px;
    position: relative;
    cursor: pointer;
}

.switcher-checkbox::after {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(100% - 11px);
    width: 14px;
    height: 14px;
    background-color: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: .2s;
}

.switcher-checkbox.active::after {
    left: 11px;
    background-color: #80808046;
}

.header_auth {
    grid-area: auth;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.header_auth__button {
    background: linear-gradient(98.17deg, #4FA0FF 4.18%, #524fff00 40.2%, #B338FF 92.54%), #524FFF;
    box-shadow: 0 0 0 1px rgba(113, 101, 255, 0.62), 0px 4px 20px rgba(63, 22, 255, 0.25);
    border-radius: 9px;
    padding: 13px 24px;
    color: #fff;
    cursor: pointer;
    transition: .2s;
    border: none;
    outline: none;
}

.header_auth__button:hover {
    background: linear-gradient(98.17deg, #4FA0FF 4.18%, #524fff00 40.2%, #B338FF 92.54%), #872bff;
}

.header_auth__button.alt {
    background: #F7F5FF;
    box-shadow: 0 0 0 1px rgba(188, 80, 255, 0.14);
    border-radius: 9px;
    color: #624CFF;
}

.header_auth__button.alt:hover {
    background: #fdfcff;
    box-shadow: 0 0 0 1px rgba(205, 125, 255, 0.33);
    color: #ab4cff;
}

#dark .header_auth__button.alt {
    background: #ffffff05;
    box-shadow: 0 0 0 1px rgba(188, 80, 255, 0.14);
    border-radius: 9px;
    color: #fff;
}

#dark .header_auth__button.alt:hover {
    background: #ffffff0c;
    box-shadow: 0 0 0 1px rgba(225, 209, 235, 0.252);
    color: #fff;
}

.header_logout {
    text-decoration: none;
    text-align: center;
    display: inline-block;
    padding: 12px;
    border-bottom: 1px solid #F2F2F2;
    font-size: 14px;
    color: #ff6666;
    width: 100%;
    box-sizing: border-box;
    border: none;
    outline: none;
    cursor: pointer;
    background-color: rgba(227, 103, 103, 0.04);
}

.header_logout.mini {
    text-decoration: none;
    text-align: center;
    display: inline-block;
    padding: 12px;
    border-bottom: 1px solid #F2F2F2;
    font-size: 14px;
    color: #ff6666;
    width: 100%;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    border: none;
    outline: none;
    cursor: pointer;
    background-image: url(/ui/exit.svg);
    background-size: 18px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(227, 103, 103, 0.04);
}

.guide-btn {
    position: fixed;
    bottom: 18px;
    left: 18px;
    width: 56px;
    height: 56px;
    border-radius: 15px;
    border-bottom-left-radius: 3px;
    background-image: url('/ui/guide-icon.svg'), linear-gradient(137.62deg, #4FA0FF 0%, #524FFF 31.94%, #B338FF 78.36%);
    background-position: center;
    background-repeat: no-repeat;
    opacity: .3;
    transition: .2s;
    z-index: 10;
}

.guide-btn:hover {
    opacity: 1;
}

/* .logo {
    grid-area: logo;
    font-size: 20px;
    font-family: 'Bree Serif', serif;
    padding: 8px;
    padding-bottom: 12px;
    color: #000;
    text-decoration: none;
} */

.logo {
    display: inline-block;
    width: 124px;
    height: 18px;
    background-image: url('/waifucards-logo-pink.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 122px;
    margin-right: 20px;
    grid-area: logo;
    position: relative;
}

.logo-en {
    display: inline-block;
    width: 124px;
    height: 18px;
    background-image: url('/waifucards-logo-en.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 122px;
    margin-right: 20px;
    grid-area: logo;
    position: relative;
}

.logo::after, .mobile-logo::after, .logo-en::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -4px;
    width: 15px;
    height: 14px;
    /* background-image: url(/ui/xmas-hat.png); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.header-spacer {
    width: 2px;
    height: 12px;
    background: #D1D3DA;
    opacity: 0.28;
    border-radius: 2px;
}

.hr {
    border: none;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.129);
    margin: 16px 0;
}

.info-box {
    margin: 64px auto;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 0 0 1px rgb(156 162 169 / 10%), 0 5px 16px rgb(112 136 157 / 16%);
    border-radius: 12px;
    padding: 32px;
    box-sizing: border-box;
    font-family: 'Rubik', sans-serif;
}

#dark .info-box {
    color: white;
    box-shadow: 0 0 0 1px rgb(156 162 169 / 10%), 0 5px 16px rgb(0 0 0 / 16%);
}

.info-box hr {
    background-color: rgb(231, 231, 231);
    border: none;
    height: 1px;
    margin: 30px 0;
}

.filter-box {
    display: flex;
    gap: 20px;
    height: 50px;
}
.filter_item {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    max-width: 350px;
}
.filter_item input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    border: none;
    outline: none;
    color: rgba(127, 45, 232, 1);
    background-color: #fff;
    box-shadow: 0 0 0 1px #CFD8DF;
    border-radius: 9px;
    font-weight: 500;
    font-family: 'Rubik', sans-serif;
    /* field-sizing: content; */
}
.filter_item input::placeholder {
    color: #87919E;
}
.filter_item select {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 18px;
    border: none;
    outline: none;
    color: rgba(127, 45, 232, 1);
    background-color: #fff;
    box-shadow: 0 0 0 1px #CFD8DF;
    border-radius: 9px;
    font-weight: 500;
    font-family: 'Rubik', sans-serif;
    /* field-sizing: content; */
}
.filter_item select option {
    color: rgb(255, 255, 255);
    padding: unset;
    background-color: #2a2b30;
    font-family: 'Rubik', sans-serif;
    /* field-sizing: content; */
}
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    margin-bottom: 16px;
}
#root .page-item {
    padding: 4px 5px;
    cursor: pointer;
    background: #F7F5FF;
    border-radius: 6px;
    font-family: 'Rubik', sans-serif;
    min-width: 36px;
    text-align: center;
    height: 36px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A49CC1;
    font-size: 14px;
    text-decoration: none;
    transition: .15s;
}
#root .page-item:hover {
    background: #e9e4ff;
}
#root .page-item.active {
    background: linear-gradient(120deg, #4FA0FF -4.18%, #524FFF 40.2%, #B338FF 100%);
    color: white;
    /* padding: 4px 10px; */
    cursor: default;
}

.cards-frame, .sets-frame, .progress-frame {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 20px;
    padding: 30px 0;
}

.progress-frame {
    grid-template-columns: repeat(5, 1fr);
}
.cards-frame.small {
    grid-template-columns: repeat(10, 1fr);
}

.sets-frame {
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 16px;
}
.drop-frame {
    display: grid;
    grid-template-columns: repeat(1fr);
    grid-gap: 20px;
    min-width: 240px;
    max-width: 270px;
}
.drop-box {
    overflow: auto;
    margin: 0px -15px -20px;
    padding: 0px 15px 20px;
    height: 475px;
    box-sizing: border-box;
    position: relative;
}
.drop-box .booster-picture {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 0;
    transform: translate(-50%, -50%);
    text-align: center;
}

.drop-box .booster-top, .drop-box .bottom-top {
    transition: opacity .2s;
    user-select: none;
}

.drop-box.opened .booster-top, .drop-box.opened .booster-bottom {
    transition: 2s ease-out;
}

.drop-box.opened .booster-top {
    transform: translate(9px, -10px) rotate(3deg) scale(.95);
    opacity: 0;
}

.drop-box.opened .booster-bottom {
    transform: translate(0px, 100px) scale(.95);
    opacity: 0;
}

.booster-bottom .booster-text {
    position: absolute;
    bottom: 50%;
    left: 0;
    width: 100%;
    font-size: 32px;
    font-weight: 900;
    color: #000;
    opacity: .2;
    transform: translateY(50%);
    user-select: none;
    line-height: 1;
    padding: 0 20px;
    box-sizing: border-box;
}

.drop-box .drop-frame {
    opacity: 0;
    transition: .2s;
}
.drop-box.opened .drop-frame {
    opacity: 1;
    transition: 2s ease-out 1s;
}

.serieses-frame {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 30px;
}
.head-info {
    display: flex;
    margin-bottom: 30px;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.head-info.outlined {
    padding: 30px;
    border-radius: 9px;
    box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.1);
    position: relative;
    background-size: cover;
}
#dark .head-info.outlined {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.head-info.set-data {
    background-image: linear-gradient(270deg, #ffffff, #ffffffe0);

}
#dark .head-info.set-data {
    background-image: linear-gradient(270deg, #1e1f21, #1e1f21e0);
}
.set-header_frame.with-banner {
    /* background-image: linear-gradient(270deg, #ffffff, #ffffffe0); */

}
#dark .set-header_frame.with-banner {
    /* background-image: linear-gradient(270deg, #1e1f21, #1e1f21e0); */
}
.head-info.outlined .banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 11px;
    z-index: -1;
    background-size: cover;
    pointer-events: none;
    background-position: center;
}

.set-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 17px;
    z-index: -1;
    background-size: cover;
    pointer-events: none;
    background-position: center;
    opacity: .03;
}

.head-info_box {
    display: flex;
    gap: 36px;
    align-items: center;
}
.head-info_box p {
    color: #A49CC1;
    margin-top: 8px;
}

.head-info_box h1 {
    margin: 0;
    font-weight: 600;
}

.breadcrumbs-box {}

.breadcrumbs {
    margin-bottom: 8px;
    color: #87919E;
}

.breadcrumbs a, #dark .breadcrumbs a {
    text-decoration: none;
    color: inherit;
}
.breadcrumbs a:hover, #dark .breadcrumbs a:hover {
    text-decoration: underline;
}

.set-date {
    font-size: 14px;
    color: #939393;
    margin-bottom: 18px;
}
.set-date span {
    color: #7b7b7b;
}
#dark .set-date span {
    color: #afafaf;
}

.set-buttons {
    display: flex;
    align-items: normal;
    gap: 1px;
}

.edit-description {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: start;
    width: 100%;
    position: relative;
}

.description-textarea {
    width: 100%;
    max-width: 100%;
    resize: none;
    box-sizing: border-box;
    padding: 12px 16px;
    border-radius: 6px;
    border: 1px solid rgba(153, 153, 153, 0.146);
    outline: none;
    background-color: transparent;
}

#dark .description-textarea {
    color: #fff;
}

.small-button {
    padding: 9px 12px;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    text-decoration: none;
    transition: .1s;
    color: #A49CC1;
    box-shadow: 0 0 0 1px rgba(127, 45, 232, 0.14);
    white-space: nowrap;
    display: inline-block;
    display: inline-flex;
    cursor: pointer;
    user-select: none;
    min-height: 36px;
    box-sizing: border-box;
    min-width: 36px;
    border-radius: 9px;
    background-color: transparent;
    border: none;
    white-space: normal;
}

.small-button.nano {
    min-height: unset;
    min-width: unset;
    padding: 4px 10px 3px;
    font-size: 11px;
    border-radius: 6px;
}

.small-button.faded {
    opacity: .5;
}

#dark .small-button {
    box-shadow: 0 0 0 1px rgb(255 255 255 / 10%);
    background-color: #ffffff0a;
    color: #fefefe;
}

.small-button:hover {
    box-shadow: 0 0 0 1px rgba(127, 45, 232, 0.3);
}

#dark .small-button:hover {
    box-shadow: 0 0 0 1px rgb(255 255 255 / 30%);
}

.small-button.disabled, .small-button:disabled,
#dark .small-button.disabled, #dark .small-button:disabled {
    color: #97979778;
    cursor: default;
    box-shadow: 0 0 0 1px rgb(129 129 129 / 13%);
    background: none;
    pointer-events: none;
}

#root .small-button.acc {
    background: linear-gradient(120deg, #4FA0FF -4.18%, #524FFF 40.2%, #B338FF 100%);
    color: white;
    box-shadow: 0 0 0 1px rgba(127, 45, 232, 0.3);
}

.small-button b {
    font-size: 10px;
}

.small-button .btn-img {
    width: 16px;
    height: 16px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
}

.small-button.sub, .small-button.change-avatar {
    padding: 6px 6px;
    line-height: 16px;
    gap: 6px;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.small-button.sub .btn-img {
    background-image: url('/ui/ring.svg');
}

.small-button.change-avatar {
    padding: 6px 12px;
}

.small-button.share {
    padding: 10px;
}

.small-button.share .btn-img {
    background-image: url('/ui/share-icon.png');
}

.profile-reactions-box {
    display: inline-flex;
    justify-content: left;
    margin-top: 16px;
    gap: 16px;
    flex-wrap: wrap;
}

.reactions-buttons {
    display: inline-flex;
    justify-content: center;
}

.reactions-buttons .small-button {
    margin-right: 1px;
}

.reactions-buttons .small-button:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.reactions-buttons .small-button:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.reactions-buttons .small-button:first-child:last-child {
    border-radius: 6px;
}

.small-button.views {
    padding: 8px 12px;
    line-height: 16px;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.small-button.views .btn-img {
    background-image: url('/ui/view.svg');
    opacity: 0.3;
}

.small-button.like,
.small-button.dislike,
.small-button.link {
    padding: 8px 12px;
    line-height: 16px;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.small-button.disabled.like .btn-img,
.small-button.disabled.dislike .btn-img {
    opacity: .3;
}

.small-button.like .btn-img {
    background-image: url(/ui/reaction-like.svg);
}
.small-button.like.react {
    background-color: #3dd62230;
    color: #4ac91c !important;
    font-weight: 600;
    box-shadow: 0 0 0 1px #3dd6226e !important;
}

.small-button.dislike .btn-img {
    background-image: url(/ui/reaction-dislike.svg);
}
.small-button.dislike.react {
    background-color: #df31311a;
    color: #ff4d4d !important;
    font-weight: 600;
    box-shadow: 0 0 0 1px #ff373757 !important;
}
.small-button.like.react .btn-img {
    background-image: url(/ui/reaction-like-active.svg);
}
.small-button.dislike.react .btn-img {
    background-image: url(/ui/reaction-dislike-active.svg);
}

.small-button.tg .btn-img {
    background-image: url('/ui/tg-icon.svg');
    opacity: 0.7;
}

.big-button {
    padding: 20px 24px;
    font-weight: 500;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    text-decoration: none;
    transition: .1s;
    color: #A49CC1;
    box-shadow: 0 0 0 1px rgba(127, 45, 232, 0.14);
    white-space: nowrap;
    display: inline-block;
    display: inline-flex;
    cursor: pointer;
    user-select: none;
    /* height: 58px; */
    box-sizing: border-box;
    min-width: 58px;
    border-radius: 9px;
    background-color: transparent;
    border: none;
    white-space: break-spaces;
    min-height: 58px;
    outline: none;
}

.set-buttons .big-button {
    border-radius: 0;
}

.set-buttons *:first-child {
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
}

.set-buttons *:last-child {
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
}

#dark .big-button {
    box-shadow: inset 0 0 0 1px rgb(161 161 161 / 14%);
    color: #fefefe;
    background-color: #9191910d; 
}

.big-button.acc {
    color: #7F2DE8;
    background-image: linear-gradient(98.17deg, rgba(79, 160, 255, 0.09) 4.18%, rgba(82, 79, 255, 0.09) 40.2%, rgba(179, 56, 255, 0.09) 92.54%);
    box-shadow: inset 0 0 0 1px rgba(127, 45, 232, 0.14);
}

#dark .big-button.acc {
    color: #fff;
    background-image: unset;
    background-color: #ac51ff1f;
    box-shadow: inset 0 0 0 1px rgb(127 45 232 / 54%);
}

.big-button:hover {
    opacity: .8;
}

#dark .big-button.acc.disabled, .big-button.acc.disabled {
    color: #97979778;
    cursor: default;
    box-shadow: inset 0 0 0 1px rgb(129 129 129 / 13%);
    background: none;
    pointer-events: none;
}

.big-button.purple-btn, #dark .big-button.purple-btn {
    background: linear-gradient(120deg, #4FA0FF 0%, #524fff00 40.2%, #B338FF 100%), #524FFF;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1px rgba(113, 101, 255, 0.62), 0px 4px 20px rgba(63, 22, 255, 0.25);
    color: #fff;
}

.big-button.purple-btn.shop-icon, #dark .big-button.purple-btn.shop-icon {
    background: url('/ui/shop-icon.svg'), linear-gradient(120deg, #4FA0FF 0%, #524fff00 40.2%, #B338FF 100%), #524FFF;
    background-position: center;
    background-repeat: no-repeat;
}

.big-button.purple-btn:hover, #dark .big-button.purple-btn:hover {
    opacity: 1;
    background-color: #c44fff;
}

.big-button.purple-btn.out-of-stock, #dark .big-button.purple-btn.out-of-stock {
    background: #36363629;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 1px #9090905c;
}

.big-button.purple-btn.out-of-stock.shop-icon, #dark .big-button.purple-btn.out-of-stock.shop-icon {
    background: url(/ui/shop-icon.svg), #36363629;
    background-position: center;
    background-repeat: no-repeat;
}

.big-button.purple-btn.out-of-stock:hover, #dark .big-button.purple-btn.out-of-stock:hover {
    background-color: rgba(109, 109, 109, 0.27);
}



.big-button .btn-img {
    width: 16px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
    opacity: 1;
    transition: .14s;
    margin-right: 16px;
    align-items: center;
}

/* .big-button.has {
    box-shadow: 0 0 0 1px rgb(40 197 21 / 48%);
    background-color: #15ff0003;
} */
.big-button.has .btn-img {
    background-image: url('/ui/checked.svg');
}
/* .big-button.like {
    box-shadow: 0 0 0 1px rgb(255 3 3 / 25%);
    background-color: #ff000003;
} */
.big-button.like .btn-img {
    background-image: url('/ui/like.svg');
}
.big-button.drop .btn-img {
    background-image: url('/ui/drop.svg');
}
.big-button.wishlist .btn-img {
    background-image: url('/ui/wishlist.svg');
}
/* .big-button.sell {
    box-shadow: 0 0 0 1px rgb(3 81 255 / 35%);
    background-color: #0048ff03; */
/* } */
.big-button.sell .btn-img {
    background-image: url('/ui/sell.svg');
}
#root .big-button.tg {
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('/ui/tg-icon-blue.svg');
    background-size: 20px;
    box-shadow: 0 0 0 1px #2aa9ee50 !important;
    background-color: #2aa9ee10;
}

.big-button:hover {
    box-shadow: 0 0 0 1px rgba(127, 45, 232, 0.2), 0 16px 25px rgba(193, 37, 255, 0.032);
}

.sets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: inset 0 0 0 1px #ffffff1f;
    padding: 24px;
    border-radius: 15px;
    font-size: 22px;
    font-weight: 600;
    background-color: #7575750f;
    margin-bottom: 0;
}

.sets-header .dimmed {
    opacity: .2;
    font-weight: 500;
}

.sets-wiki {
    font-size: 16px;
    box-shadow: 0 0 0 1px rgb(127 45 232 / 35%);
    border-radius: 9px;
    padding: 10px 16px;
    font-weight: 500;
    text-decoration: none;
    color: #7f2de8;
    background: #7f2de805;
}

#dark .sets-wiki {
    font-size: 16px;
    box-shadow: 0 0 0 1px rgb(158 63 212 / 40%), 0 5px 15px rgb(158 63 212 / 14%);
    border-radius: 6px;
    padding: 10px 16px;
    font-weight: 400;
    text-decoration: none;
    color: #ffffff;
    background: #7f2de82e;
}

.set-info_pic {
    filter: drop-shadow(0px 4px 19px rgba(45, 79, 111, 0.12));
    border-radius: 15px;
    color: transparent;
}

.series-box {
    overflow: hidden;
    border-radius: 18px;
    background-color: rgb(255, 255, 255);
    display: grid;
    grid-template-columns: 1fr;
    font-family: 'Rubik', sans-serif;
    position: relative;
    height: fit-content;
    transition: .15s;
    text-decoration: none;
    box-shadow: 0 4px 14px #7c381a29;
    border: 1px solid #7f7e7e3d;
    box-sizing: border-box;
    color: #000;
}

#dark .series-box {
    background-color: #2B2C30;
    box-shadow: 0 4px 14px #00000029;
    color: #fff;
    /* border: 1px solid #b6b6b621; */
}

.series-picture {
    font-size: 0;
    position: relative;
    overflow: hidden;
}

.series-picture > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    position: relative;
    z-index: 1;
}

/* .series-picture > .backdrop {
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 1;
    filter: blur(8px);
} */

.series-info {
    padding: 25px 30px;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 16px;
}

.series-info-count {
    background: rgba(176, 173, 173, 0.16);
    border-radius: 9px;
    padding: 12px 18px;
    color: #959595;
}

.series-info-name {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 0.9;
}

.series-info-description {
    font-size: 14px;
}

.series-company {
    font-size: 16px;
    color: #909194;
}

.series-company span {
    font-weight: 600;
}

.set-box, .cardlist-box {
    overflow: hidden;
    border-radius: 1.05rem;
    /* background-color: rgb(255, 255, 255); */
    display: grid;
    grid-template-rows: 1fr auto;
    font-family: 'Rubik', sans-serif;
    position: relative;
    height: fit-content;
    transition: .15s;
    text-decoration: none;
}

#dark .set-box {
    box-shadow: 0 4px 14px #00000029;
}

.set-box .set-subinfo {
    
}

.set-button {
    background-color: rgb(233 233 233 / 21%);
    color: rgb(0, 0, 0);
    border-radius: 9px;
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: .15s;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 5%);
}
.set-button:hover {
    color: rgb(0, 0, 0);
    text-decoration: none;
    background-color: rgb(233 233 233 / 40%);
}

#dark .set-button {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}
#dark .set-button:hover {
    color: #fff;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.07);
}

.set-button.purple-btn, #dark .set-button.purple-btn {
    width: auto;
    padding: 0 20px;
    min-width: 54px;
    box-sizing: border-box;
    border-radius: 9px 0 0 9px;
    background: linear-gradient(120deg, #4FA0FF 0%, #524fff00 40.2%, #B338FF 100%), #524FFF;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1px rgba(113, 101, 255, 0.62), 0px 4px 20px rgba(63, 22, 255, 0.25);
}

.set-button.purple-btn:hover, #dark .set-button.purple-btn:hover {
    background-color: #c44fff;
}

.set-button.purple-btn.out-of-stock, #dark .set-button.purple-btn.out-of-stock {
    background: #6d6d6d73;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1px #9090905c;
}

.set-button.purple-btn.shop-icon, #dark .set-button.purple-btn.shop-icon {
    background: url('/ui/shop-icon.svg'), linear-gradient(120deg, #4FA0FF 0%, #524fff00 40.2%, #B338FF 100%), #524FFF;
    background-position: center;
    background-repeat: no-repeat;
}

.set-button.purple-btn.shop-icon.out-of-stock, #dark .set-button.purple-btn.shop-icon.out-of-stock {
    background: url(/ui/shop-icon.svg), #6d6d6d73;
    background-position: center;
    background-repeat: no-repeat;
}

.set-button.purple-btn.out-of-stock:hover, #dark .set-button.purple-btn.out-of-stock:hover {
    background-color: #6d6d6d88;
}


.set-button.purple-btn ~ .set-button {
    border-radius: 0 9px 9px 0;
}

.set-box {
    box-shadow: 0 4px 14px #7c381a29;
}


.cardlist-picture {
    position: relative;
    overflow: hidden;
    aspect-ratio: 396 / 544;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cardlist-preview {
    z-index: 1;
    position: relative;
    transition: .25s;
}

.cardlist-box:hover .cardlist-preview {
    transform: scale(0.8);
}
.cardlist-box {
    cursor: pointer;
}

.cardlist_box {
    border-radius: 9px;
    font-size: 0;
    overflow: hidden;
    text-align: center;
    padding-bottom: 72px;
}

.cardlist_image {
    max-width: 100%;
}

.cardlist-frame {
    max-height: calc(100vh - 300px);
    overflow: auto;
    cursor: pointer;
    /* cursor: zoom-in; */

    background: #e6eef75c;
}

#dark .cardlist-frame {
    background: #0000005c;
}

.cardlist-frame.big {
    position: fixed;
    top: 0;
    left: 50%;
    height: 100vh;
    max-width: 100%;
    max-height: unset;
    transform: translateX(-50%);
    margin: 0;
    /* cursor: zoom-out; */
}

.prev-button_wrapper, .next-button_wrapper {
    position: fixed;
    top: 50%;
    right: 0;
    height: 100px;
    width: 70px;
    transform: translateY(-50%);
    background: #5f5f6f4a;
    z-index: 10;
    cursor: pointer;
    border-radius: 16px;
    backdrop-filter: blur(4px);
    box-shadow: 0 0 0 1px #b3caff1f, 0 4px 10px #33272733;
    background-repeat: no-repeat;
    background-position: center;
    opacity: .4;
    transition: .2s;
}

.prev-button_wrapper:hover, .next-button_wrapper:hover {
    opacity: 1;
}

.prev-button_wrapper {
    left: 16px;
    background-image: url('/ui/prev-arrow.svg');
}

.next-button_wrapper {
    right: 16px;
    background-image: url('/ui/next-arrow.svg');
}

.prev-button_wrapper.inactive, .next-button_wrapper.inactive {
    opacity: 0;
    pointer-events: none;
}

.close-button_wrapper {
    position: fixed;
    top: 16px;
    right: 16px;
    height: 50px;
    width: 50px;
    background: #5f5f6f4a;
    z-index: 10;
    cursor: pointer;
    border-radius: 9px;
    backdrop-filter: blur(4px);
    box-shadow: 0 0 0 1px #b3caff1f, 0 4px 10px #33272733;
    background-repeat: no-repeat;
    background-position: center;
    opacity: .7;
    transition: .2s;
    background-image: url(/ui/close-button.svg);
    background-size: 24px;
}

.close-button_wrapper:hover {
    opacity: 1;
}

.page-info_wrapper {
    position: fixed;
    bottom: 16px;
    left: 50%;
    padding: 10px 16px;
    background: #5f5f6f4a;
    z-index: 10;
    pointer-events: none;
    border-radius: 36px;
    backdrop-filter: blur(4px);
    box-shadow: 0 0 0 1px #b3caff1f, 0 4px 10px #33272733;
    opacity: 1;
    font-weight: 500;
    color: #FFF;
    transform: translateX(-50%);
}

.close-button_wrapper:hover {
    opacity: 1;
}





.set-status {
    font-size: 14px;
    position: absolute;
    top: 14px;
    right: 14px;
    background-color: #0000009c;
    backdrop-filter: blur(4px);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: 0 0 0 1px #ffffff85;
}

/* .set-status[data-status="0"] {
    background-color: #820c0cab;
} */
.set-status[data-status="1"] {
    background-color: #db0e0ea6;
    box-shadow: 0 0 0 1px #ff00006e, 0 4px 10px #d6030389;
}
.set-status[data-status="2"] {
    background-color: #f36410cd;
    box-shadow: 0 0 0 1px #ff6f00bf, 0 4px 10px #ff88008e;
}
.set-status[data-status="3"] {
    background-color: #0b9d3c9e;
    box-shadow: 0 0 0 1px #03b73fa0, 0 4px 10px #07a43bb5;
}


.profile-item.emb-item {
    border-radius: 15px;
    justify-content: start;
    padding: 0;
    border: none;
    box-shadow: none;
    text-decoration: unset;
    opacity: .5;
    transition: .2s;
}


.profile-item.emb-item:hover {
    opacity: 1;
}

.emb-item-picture {
    width: 120px;
    height: 120px;
    max-width: 90%;
    border-radius: 15px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.emb-item_price {
    position: absolute;
    top: 10px;
    right: 10px;
    background-image: linear-gradient(45deg, #7904f9, #ff3ef9);
    box-shadow: 0 0 0 1px #e27ff5, 0 3px 10px #ff00d457;
    padding: 4px 5px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.emb-item-image {
    /* max-width: 90%; */
    overflow: hidden;
    border-radius: 12px;
    font-size: 0;
}

.emb-item-image img {
    width: 100%;
}


.emb-item .profile-username {
    max-width: 200px;
}


.emb-item .profile-description {
    max-width: 200px;
}

.emb-item-picture.round {
    border-radius: 50%;
}

#root .profile-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.profile-box .profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    flex-shrink: 0;
    margin-bottom: 16px;
}

.profile-box .profile-avatar::after {
    content: '';
    position: absolute;
    top: -7px;
    left: -7px;
    width: calc(100% + 14px);
    height: calc(100% + 14px);
    background-image: url(/hub/avatar-rectangle.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.profile-box .profile-username {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}

.profile-item .profile-description {
    text-align: center;
    font-size: 14px;
    opacity: 0.4;
}

#root .card-box .profile-item {
    z-index: 1;
    border-radius: 0;
}

.emb-backdrop {
    position: absolute;
    top: -30px;
    height: calc(100% + 60px);
    left: -30px;
    width: calc(100% + 60px);
    background-position: center;
    background-size: cover;
    filter: blur(20px);
    z-index: -1;
    opacity: 0.05;
}

.cards-relation-box {
    position: relative;
}

.cards-relations-button {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 32px);
    justify-content: center;
    z-index: 10;
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
}

.cards-relations-frame {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 16px;
    padding-bottom: 36px;
    align-items: start;
    overflow: auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 100%;
    box-sizing: border-box;
}

.relation-card {
    display: flex;
    flex-direction: column;
    position: relative;

    overflow: hidden;
    border-radius: 9px;
    box-shadow: 0 0 0 1px rgba(137, 137, 137, 0.15);
    position: relative;
    text-decoration: none;
    color: inherit;
}

.relation-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 62px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(44 45 47 / 74%) 100%);
    z-index: 1;
}

.relation-card .card-img {
    position: relative;
    aspect-ratio: 396 / 544;
    width: 100%;
    background-position: center;
    background-size: contain, cover;
    background-repeat: no-repeat;
    transition: .3s;
}

.relation-card .card-img.nsfw {
    filter: blur(8px);
}

.relation-card .card-price {
    position: absolute;
    bottom: 8px;
    right: 8px;
    left: 8px;
    z-index: 2;
    background-color: #3a750c6b;
    backdrop-filter: blur(4px);
}

.relation-card .card-info {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.relation-card .card-info .card-name {
    font-size: 12px;
    font-weight: 500;
}


.set-picture img {
    border-radius: 1rem 1rem 0 0;
    aspect-ratio: 1 / 1;
    background-color: #fff;
    /* contain img */
    object-fit: contain;
}
.card-picture.SR {
    /* animation: fade 2s infinite alternate-reverse; */
}
.set-info {
    text-align: center;
    background-color: rgb(255, 255, 255);
    color: rgb(68, 68, 68);
    border-top: 1px solid #e1e1e1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.set-info {
    padding-top: 18px;
}

.set-box {
    background-color: #f7f7f7;
}
#dark .set-box {
    background-color: #212224;
}

.set-box.full, #dark .set-box.full {
    box-shadow: 0 4px 10px #4dc16733;
}

.set-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 0 1px #D6D6D6;
    border-radius: inherit;
    pointer-events: none;
    user-select: none;
    z-index: 3;
}

#dark .set-box::after {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.set-box.full::after, #dark .set-box.full::after {
    box-shadow: inset 0 0 0 2px #4DC167;
}

.set-pic_frame {
    padding: 40px;
    text-align: center;
    overflow: hidden;
}

/* === Loved Titles / Characters (профиль) === */
.loved-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}
.loved-group__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 12px;
}
.loved-group__head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.loved-group__toggle {
    border: none;
    background: rgba(0, 0, 0, 0.05);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    color: #55565c;
    white-space: nowrap;
    transition: background-color .14s ease;
}
.loved-group__toggle:hover { background: rgba(0, 0, 0, 0.1); }
#dark .loved-group__toggle { background: rgba(255, 255, 255, 0.05); color: #c6c6cc; }
#dark .loved-group__toggle:hover { background: rgba(255, 255, 255, 0.1); }

.loved-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.loved-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff38;
    backdrop-filter: blur(7px);
    box-shadow: inset 0 0 0 1px rgba(73, 73, 73, 0.123);
    border-radius: 999px;
    padding: 6px 14px 6px 6px;
    transition: box-shadow .14s ease, transform .14s ease;
    max-width: 220px;
}
/* Специфичность class+pseudo (0,1,1) — иначе UA-стиль a:link/a:visited (тоже (0,1,1), но раньше
   в каскаде) красит ссылку в дефолтный синий поверх нашего цвета */
a.loved-item, a.loved-item:visited, a.loved-item:hover {
    text-decoration: none;
    color: #26252a;
}
.loved-item:hover {
    box-shadow: inset 0 0 0 1px rgba(73, 73, 73, 0.3);
    transform: translateY(-1px);
}
#dark .loved-item {
    background: #2b2c3038;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
#dark a.loved-item, #dark a.loved-item:visited, #dark a.loved-item:hover {
    color: #f2f2f4;
}
#dark .loved-item:hover {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.loved-item__name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.entity-avatar--md { width: 32px; height: 32px; }
.entity-avatar--md .entity-avatar__mono { font-size: 13px; }

.loved-section__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: flex-start;
    border: none;
    background: rgba(91, 91, 214, 0.1);
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #5b5bd6;
    cursor: pointer;
    transition: background-color .14s ease;
}
.loved-section__cta:hover { background: rgba(91, 91, 214, 0.18); }
.loved-section__cta-icon {
    font-size: 15px;
    line-height: 1;
    opacity: .8;
}
#dark .loved-section__cta { background: rgba(179, 179, 255, 0.12); color: #b3b3ff; }
#dark .loved-section__cta:hover { background: rgba(179, 179, 255, 0.2); }

/* === Progress Set Styles === */
.progress-set {
    border-radius: 18px;
    background: #ffffff38;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: inset 0 0 0 1px rgba(73, 73, 73, 0.123);
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 20px;
    backdrop-filter: blur(7px);
    height: fit-content;
}

#dark .progress-set {
    background: #2b2c3038;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.progress-set--completed {
    box-shadow: inset 0 0 0 2px #4DC167, 0 2px 20px #4dc16654 !important;
}

.progress-set--golden {
    box-shadow: inset 0 0 0 2px #ffad14 !important;
}

/* Top progress bar with color transitions */
.progress-set__progressbar {
    height: 8px;
    background: #d6d6d656;
    overflow: hidden;
    border-radius: 5px;
    transition: .25s;
}

#dark .progress-set__progressbar {
    background: #333;
}

.progress-set_progressbar-strokemode {
    height: 1px;
    background-color: rgba(129, 129, 129, 0.2);
}

#dark .progress-set_progressbar-strokemode {
    background-color: rgba(217, 217, 217, 0.1);
}

.progress-set_progressbar-strokemode .progress-set__bar-fill {
    opacity: 0;
}

.progress-set__bar--gray .progress-set__bar-fill {
    background: #666;
}

.progress-set__bar--orange .progress-set__bar-fill {
    background: #FF9800;
}

.progress-set__bar--green .progress-set__bar-fill {
    background: #4DC167;
}

.progress-set__bar-fill {
    height: 100%;
    transition: width 0.8s ease-out, background 0.8s ease-out, opacity 0.25s ease;
    border-radius: 5px;
}

/* Header section */
.progress-set__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.progress-set__content {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 0;
}

.progress-set__image {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.progress-set__info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.progress-set__name {
    color: #000000 !important;
    opacity: .6;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
    word-break: break-word;
    text-decoration: none;
    transition: color 0.2s;
}

#dark .progress-set__name {
    color: #fff !important;
}

.progress-set__subtitle {
    color: #888;
    font-size: 13px;
    line-height: 1.2;
    word-break: break-word;
}

/* Stats section */
.progress-set__stats {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.progress-set__count {
    color: #AEB6BC;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    border-radius: 9px;
    padding: 8px 12px;
    background: rgba(193, 199, 204, 0.05);
}

.progress-set--completed .progress-set__count {
    color: #4DC167;
}

/* Toggle button */
.progress-set__toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.progress-set__toggle:hover {
    color: #000000;
}


#dark .progress-set__toggle:hover {
    color: #fff;
}

.progress-set__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Rarity groups section */
.progress-set__groups {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* === Rarity Group Styles === */
.rarity-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: opacity 0.2s;
}

.rarity-group--optional {
    opacity: 0.3;
}

.rarity-group__header-box {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-direction: column;
}

.rarity-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.rarity-group__name {
    color: #383838;
    font-weight: 500;
    font-size: 14px;
}

#dark .rarity-group__name {
    color: #ddd;
}

.rarity-group__name--link {
    text-decoration: none;
    transition: color .14s;
    cursor: pointer;
}
.rarity-group__name--link:hover { color: #9f6eff; }

.rarity-group__count {
    color: #aaa;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.rarity-group__toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.rarity-group__toggle:hover {
    color: #000000;
}

#dark .rarity-group__toggle:hover {
    color: #fff;
}

.rarity-group__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Progress bar for rarity group */
.rarity-group__bar-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rarity-group__bar {
    flex: 1;
    height: 5px;
    background: #333;
    border-radius: 2px;
    overflow: hidden;
}

.rarity-group__bar--gray .rarity-group__bar-fill {
    background: #555;
}

.rarity-group__bar--orange .rarity-group__bar-fill {
    background: #FF9800;
}

.rarity-group__bar--green .rarity-group__bar-fill {
    background: #4DC167;
}

.rarity-group__bar-fill {
    height: 100%;
    transition: width 0.3s ease;
}

.rarity-group__percent {
    color: #aaa;
    font-size: 10px;
    font-weight: 500;
    min-width: 26px;
    text-align: right;
}

/* Rarity details (when expanded) */
.rarity-group__details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.rarity-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
    text-decoration: none;
    color: #656565;
}

.rarity-item--completed .rarity-item__count {
    color: #4DC167;
    font-weight: 600;
}

.rarity-item__name {
    color: #656565;
}

.rarity-item__count {
    color: #656565;
    font-weight: 500;
}

.set-circle-progress {
    position: absolute;
    top: -12px;
    left: -12px;
    z-index: 1;
}

.set-circle-progress circle {
    transition: 2.5s ease-out, opacity 1s;
    stroke-dashoffset: 596.6px;
    opacity: 0;
}

.set-pic {
    position: relative;
    display: inline-block;
    font-size: 0;
}

.set-pic_img {
    border-radius: 50%;
}

.set-pic::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    box-shadow: inset 0 0 0 6px #c5c5c53d;
    border-radius: 50%;
    z-index: 1;
    transition: .2s;
}

#dark .set-pic::before {
    box-shadow: inset 0 0 0 6px #17181b3d;
}

.set-progress {
    font-size: 22px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    font-weight: 600;
    color: #4DC167;
    opacity: 0;
    transition: .2s;
    transition-delay: 0s;
    transform: scale(2);
    text-shadow: 0 5px 30px #4dc166ab;
}

.set-box:hover .set-pic::before {
    box-shadow: inset 0 0 0 70px #ffffffed;
}

#dark .set-box:hover .set-pic::before {
    box-shadow: inset 0 0 0 70px #17181bed;
}

.set-box:hover .set-progress {
    opacity: 1;
    transform: scale(1);
    transition-delay: .1s;
    filter: none;
}

.set-info-name {
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: #413E38;
    text-decoration: none;
}

.close-btn .btn-img {
    background-image: url('/ui/cross.svg');
    width: 12px;
    height: 12px;
}



.profile-collection-link {
    display: inline-block;
    margin-right: 12px;
    margin-top: 16px;
    padding: 6px 12px;
    background-color: rgb(51, 53, 55);
    border-radius: 6px;
    text-decoration: none;
    color: #fff;
}

.cards-footer {
    margin-bottom: 60px;
}

.cards-footer_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.sets-of-cards_frame {
    display: flex;
    align-items: start;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 30px;
}

.sets-of-cards_title {
    color: #87919E;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    margin-bottom: 16px;
}

.set-item {
    text-decoration: none;
    color: #000;
    font-family: Rubik;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.set-item .set-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: .08;
    background-size: cover;
    background-position: center;
}

.set-item_box {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 16px;
}

.set-item-pic {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    border: 1px solid #CFD8DF;
    background: #FFF;
    box-shadow: 0px 4px 20px 0px #F2F0FA;
    padding: 4px;
    box-sizing: border-box;
}

.set-item-pic > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.set-item_info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.set-item_name {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.set-item_count {
    color: rgba(0, 0, 0, 0.40);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#dark .set-item-pic {
    border: 1px solid #2E3032;
    box-shadow: 0px 4px 20px 0px #1A1920;
}

#dark .set-item_name {
    color: #fff;
}

#dark .set-item_count {
    color: #87919E;
}

.not-found_box, .loading_box {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 30vh;
    color: #87919e6d;
    gap: 16px;
    text-align: center;
}

.loading_box {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 30vh;
    color: #87919e6d;
    gap: 16px;
    text-align: center;
}

.not-found_img {
    width: 85px;
    max-width: 100%;
    height: 50px;
    background-image: url('/ui/icon-404.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.loading_img {
    width: 85px;
    max-width: 100%;
    height: 50px;
    background-image: url('/ui/loading.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: .2;
}



.info-box a {
    color: rgba(127, 45, 232, 1);
    font-weight: 600;
}

main select, main input {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    font-family: 'Rubik', sans-serif;
}

select {
    cursor: pointer;
}

input[list] {
    padding-right: 8px;
}

input::-webkit-list-button {
    display: none;
}

hr {
    height: 1px;
    background-color: rgb(227, 227, 227);
    border: none;
    width: 100%;
}

.modal {
    background-color: transparent;
    border: none;
    outline: none;
    padding: 8px;
    max-width: 100%;
    margin: auto auto;
    /* height: 100%; */
    max-height: 100%;
    box-sizing: border-box;
}

.modal a {
    outline: none;
}

.modal .modal-frame {
    max-width: 400px;
}

.modal.wide .modal-frame {
    width: 100%;
    max-width: 440px;
    box-sizing: border-box;
}

.modal.slim .modal-frame {
    width: 100%;
    max-width: 290px;
    box-sizing: border-box;
}

.modal.auto-width .modal-frame {
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
}

.modal.crop-height {
    max-height: 100%;
    box-sizing: border-box;
}

.modal::backdrop {
    display: none;
}

.modal-frame {
    border-radius: 15px;
    padding: 0;
    background-color: #fff;
    color: #000;
}

#dark .modal-frame {
    background-color: #1E1F21;
    color: #fff;
    box-shadow: 0 6px 20px #1314188f, inset 0 0 0 1px #2a2c2e;
}
.modal-title {
    padding: 22px 30px;
    text-align: center;
    border-bottom: 1px solid #E7E7E7;
    font-size: 18px;
    color: #878787;
}

#dark .modal-title {
    border-color: #2a2c2e;
}

.modal-text {
    text-align: center; opacity: 0.2;
}

.modal-box {
    padding: 26px 30px 30px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-label {
    text-align: center;
    font-size: 16px;
    color: #878787;
}

.share-buttons_frame {
    position: absolute;
    right: 9px;
    top: 9px;
    bottom: 9px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.mini-share-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 8px;
    backdrop-filter: blur(8px);
    border-radius: 7px;
    box-shadow: inset 0 0 0 1px #ffffff14;
}

.modal-pages {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gap: 12px; */
    border-bottom: 1px solid #E7E7E7;
    /* padding: 0 30px; */
    overflow-x: auto;
}

#dark .modal-pages {
    border-color: #2a2c2e;
}

.modal-pages_item {
    cursor: pointer;
    padding: 0 30px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 0 0 transparent;
    transition: 0.2s ease-in-out;
    opacity: .3;
}

.modal-pages_item:hover {
    opacity: 1;
}

.modal-pages_item.active {
    box-shadow: inset 0 -3px 0 0 #6137ff;
    opacity: 1;
}

.modal-pages_icon {
    width: 32px;
    height: 32px;
    transition: opacity 0.2s ease-in-out;
}

.input-checkbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
}

.input-checkbox.slim {
    justify-content: start;
}

.input-checkbox input {
    display: none;
}

.input-checkbox .checkbox {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background-color: #8a8a8a17;
    box-shadow: 0 0 0 1px #8787874d;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.input-checkbox input:checked ~ .checkbox {
    background-color: rgb(70 147 86);
    box-shadow: 0 0 0 1px rgb(108 201 154);
    background-image: url(/ui/checked-active.svg);
    background-size: 10px;
    background-position: center;
    background-repeat: no-repeat;
}

.modal .pseudoinput {
    overflow-x: auto; white-space: nowrap; cursor: text; display: flex; align-items: center;
    scrollbar-width: none;
}

.modal .pseudoinput .pseudoinput-text {
}

.modal .pseudoinput::-webkit-scrollbar {
    display: none;
}

.modal input, .input {
    width: 100%;
    height: 54px;
    box-sizing: border-box;
    padding: 0 24px;
    border: none;
    outline: none;
    color: rgba(127, 45, 232, 1);
    background-color: #fff;
    box-shadow: 0 0 0 1px #CFD8DF;
    border-radius: 9px;
    font-family: 'Rubik', sans-serif;
    text-align: center;
    font-weight: 500;
}

#dark .modal input, #dark .modal textarea, #dark .input {
    color: rgb(255 255 255);
    background-color: #242528;
    box-shadow: 0 0 0 1px #313436;
}

.modal input::placeholder, .modal textarea::placeholder, .input::placeholder {
    color: #87919E;
    font-weight: 400;
}

.modal input[type="checkbox"] {
    display: none;
}

.modal input[type="checkbox"] ~ .big-button {
    width: 100%;
}

#root input.tal {
    text-align: left;
}

.modal textarea {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    padding: 12px 24px;
    border: none;
    outline: none;
    color: rgba(127, 45, 232, 1);
    background-color: #fff;
    box-shadow: 0 0 0 1px #CFD8DF;
    border-radius: 9px;
    font-family: 'Rubik', sans-serif;
    text-align: center;
    font-weight: 500;
}

.modal select {
    width: 100%;
    height: 54px;
    box-sizing: border-box;
    padding: 0 24px;
    border: none;
    outline: none;
    color: rgb(55, 55, 55);
    background-color: #fff;
    box-shadow: 0 0 0 1px #CFD8DF;
    border-radius: 9px;
    font-family: 'Rubik', sans-serif;
    text-align: center;
    font-weight: 500;
}

#dark .modal select {
    color: rgb(255 255 255);
    background-color: #242528;
    box-shadow: 0 0 0 1px #313436;
}

.modal select.small {
    height: 40px;
    width: auto;
}

.modal input[type="file"] {
    display: none;
}

.modal .img-add {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 9px;
    cursor: pointer;
    box-shadow: 0 0 0 1px #CFD8DF;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0;
    background-image: url('/ui/add.svg');
    background-repeat: no-repeat;
    background-position: center;
}

#dark .modal .img-add {
    box-shadow: 0 0 0 1px #313436;
    background-color: #242528;
}

.city-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-top: 4px;
    background-color: #fff;
}

#dark .city-suggestions {
    background: #232025;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.city-suggestion-item {
    padding: 10px;
    cursor: pointer;
    
    transition: background 0.2s;
}

.modal-photo {
    position: relative;
    width: 50px;
    height: 50px;
    background-size: cover;
    background-position: center;
    border-radius: 9px;
    cursor: pointer;
}

.input-box {
    position: relative;
}

.input-buttons {
    position: absolute;
    right: 12px;
    top: 12px;
    display: flex;
    gap: 6px;
    align-items: center;
}

.input-button {
    padding: 10px;
    height: 32px;
    min-width: 32px;
    border-radius: 9px;
    background-color: #ffffff;
    box-shadow: inset 0 0 0 1px #e7e7e7;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
    color: #000;
}

#dark .input-button {
    background-color: #1e1e1e;
    box-shadow: inset 0 0 0 1px #303030c2;
    color: #fff;
}

/* TG-верификация: inline-пилюля справа от инпута телеграма.
   Базовый бокс одинаковый, цветовые варианты задаются модификаторами. */
.tg-pill {
    padding: 0 14px;
    font-weight: 500;
    font-size: 13px;
    transition: opacity .15s;
}
.tg-pill--action { /* «Подтвердить» — оранжевый, кликабельный */
    color: #d97706;
    background-color: rgba(245, 158, 11, 0.10);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.40);
}
.tg-pill--action:hover { opacity: .85; }
#dark .tg-pill--action {
    color: #f5b656;
    background-color: rgba(245, 158, 11, 0.14);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.50);
}
.tg-pill--verified { /* «Подтверждён» — зелёный, пассивный */
    color: #4DC167;
    background-color: rgba(77, 193, 103, 0.08);
    box-shadow: inset 0 0 0 1px rgba(77, 193, 103, 0.35);
    cursor: default;
}
#dark .tg-pill--verified {
    color: #6fdc89;
    background-color: rgba(77, 193, 103, 0.12);
    box-shadow: inset 0 0 0 1px rgba(77, 193, 103, 0.45);
}

.modal-buttons {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.modal-buttons .big-button {
    text-align: center;
    justify-content: center;
    flex-grow: 1;
    padding: 16px 18px;
    min-height: unset;
}

.big-button.placeholder {
    box-shadow: none !important;
    color: transparent !important;
    background-image: unset;
    overflow: hidden;
    pointer-events: none;
    position: relative;
}

.big-button.placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 400%;
    bottom: 0;
    background-image: linear-gradient(105deg, rgba(245, 245, 245, 0.1) 0%, rgba(245, 245, 245, 0.2) 25%, rgba(245, 245, 245, 0.1) 50%, rgba(245, 245, 245, 0.2) 75%, rgba(245, 245, 245, 0.1) 100%);
    background-size: 100% 100%;
    background-position: 0% 50%;
    animation: placeholder 2s infinite linear;
    opacity: .3;
}

@keyframes placeholder {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.modal-field {
    display: flex;
}

.modal-field input {
    border-radius: 0;
}

.modal-field input:first-child {
    border-radius: 9px 0 0 9px;
}
.modal-field input:last-child {
    border-radius: 0 9px 9px 0;
}

.field-info {
    color: #666666;
    text-align: center;
    font-size: 14px;
}

.modal > .backdrop {
    position: fixed;
    inset: 0px;
    background: #a6b1c7ba;
    backdrop-filter: blur(30px);
    z-index: -1;
    cursor: pointer;
}

#dark .modal > .backdrop {
    background: rgb(26 26 26 / 90%);
    backdrop-filter: blur(30px);
}

.lesson-frame {
}

.lesson-box, .gatcha-box, .alert-box {
    padding: 30px;
    color: #000;
    display: flex;
    flex-direction: column;
    gap: 24px;
    outline: none;
}

.alert-box ul, .alert-box ol {
    padding: 20px;
}

#dark .lesson-box, #dark .gatcha-box, #dark .alert-box  {
    padding: 30px;
    color: #fff;
}

.gatcha-box {
    width: 336px;
    box-sizing: border-box;
}

.lesson-box a, .gatcha-box a, .alert-box a {
    outline: none;
}

.alert-text {
    text-align: center;
}

.lesson_video {
    border-radius: 9px;
    border: none;
    outline: none;
    width: 100%;
    max-width: 100%;
    max-height: 360px;
}

.lesson_picture {
    border-radius: 9px;
    border: none;
    outline: none;
    width: 85%;
    max-width: 85%;
    max-height: 360px;
    display: inline-block;
}

.lesson_picture img {
    max-width: 100%;
    max-height: 100%;
}

.lesson_title {
    font-size: 18px;
    text-align: center;
    font-weight: 500;
}

.lesson_note {
    font-size: 14px;
    background-color: #84848417;
    padding: 16px;
    border-radius: 9px;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(88, 88, 88, 0.131);
    background-image: url('/ui/quote-white.png');
    background-repeat: no-repeat;
    background-position: top 4px right 4px;
    color: #000;
}
#dark .lesson_note {
    color: #fff;
}

.lesson_note.green {
    background-color: #00ff4208;
    color: #31e382;
    background-image: url('/ui/quote-green.png');
}

.lesson_note.blue {
    background-color: #00a2ff08;
    color: #319fe3;
    background-image: url('/ui/quote-green.png');
}

.lesson_note.yellow {
    background-color: #ff9a1517;
    color: #f7c970;
}

#root .lesson_note .small-button {
    padding: 6px 8px;
    line-height: unset;
    min-height: unset;
    height: auto;
    margin: 0 3px;
    color: inherit;
}

.lesson-box .vsc-controller {
    display: none;
}

.lesson-box ul {
    margin: 0;
    padding: 0;
}

#dark .lesson-box ul {
}

.lesson-box li {
    padding: 8px 0;
    list-style: none;
    text-align: center;
    border-bottom: 1px solid rgb(227 227 227 / 9%);
    line-height: 1.4;
}

.lesson-box li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.lesson-box li:first-child {
    padding-top: 0;
}

.lesson-box .handler-button {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px #ffffff4f;
    color: white;
    font-size: 13px;
    margin: 0 2px;
    background-position: left 4px center;
    background-repeat: no-repeat;
    background-size: 13px;
    padding-left: 21px;
    cursor: default;
}

.lesson-box .handler-button.sell {
    background-color: #1b7bce;
    background-image: url(/ui/sell-active.svg);
}

.lesson-box .handler-button.has {
    background-color: #009B76;
    background-image: url(/ui/checked-active.svg);
    background-size: 11px;
    background-position: left 5px center;
}

.lesson-box .handler-button.like {
    background-image: url(/ui/like-active.svg);
    background-color: #F44336;
    background-size: 11px;
    background-position: left 5px center;
}

.lesson-box .handler-button.wishlist {
    background-image: url(/ui/wishlist-active.svg);
    background-color: #b23eb8;
    background-size: 11px;
    background-position: left 5px center;
}

.stories-frame {
    display: flex;
    flex-direction: row;
    gap: 16px;

}

.story-item {
    width: 120px;
    height: 180px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    flex-grow: 0;
    flex-shrink: 0;
    cursor: pointer;
}

.story-item .story-info {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 1;
    font-size: 14px;

    background-image: linear-gradient(0deg, #fffffffa 47%, #ffffff00 100%);
    padding: 100px 12px 12px;
    box-sizing: border-box;
    color: #545159;
    font-weight: 500;
}


#dark .story-item .story-info {
    background-image: linear-gradient(0deg, #1e1f21d4 30%, #00000000 100%);
    color: #fff;
    font-weight: 600;
}

.story-preview {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.users-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.users-box_item {
    box-shadow: inset 0 0 0 1px #E7E7E7;
    border-radius: 9px;
    text-decoration: none;
    padding: 16px;
    max-width: 100%;
    width: 300px;
    position: relative;
    box-sizing: border-box;
    color: inherit;
}

#dark .users-box_item {
    box-shadow: inset 0 0 0 1px #2A2C2E;
}

.users-box_item .card-pic {
    width: 42px;
    height: 48px;
    border-radius: 12px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 120% auto;
    flex-grow: 0;
    flex-shrink: 0;
}

.users-box_item .side-button {
    position: absolute;
    bottom: -4px;
    right: 8px;
    background-color: #f44336;
    box-shadow: inset 0 0 0 1px #ff564a;
    color: white;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 5px;
    border: none;
    font-weight: 500;
    cursor: pointer;
}

#dark .users-box_item .side-button {
    background-color: #f4433645;
    box-shadow: inset 0 0 0 1px #f443363d;
}

.user-box_tg {
    width: 13px;
    height: 13px;
    background-image: url('/ui/tg-icon.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 4px;
    margin-right: 4px;
    display: inline-block;
    vertical-align: middle;
    opacity: .6;
}

.users-box_item .user-online,
.users-box_item .user-offline {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #009B76;
    margin-left: 4px;
    display: inline-block;
    /* vertical-align: middle; */
}

.users-box_item .user-offline {
    background-color: #4c4c4c;
}

.users-box_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.users-box_username {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
}

#dark .users-box_username {
    color: #FFF;
}

.users-box_price {
    background-color: #6fff0024;
    font-size: 12px;
    color: #67c61d;
    box-shadow: inset 0 0 0 1px #73c72f1a;
    padding: 5px 8px;
    white-space: nowrap;
    border-radius: 6px;
    font-weight: 500;
}

.users-box_count {
    background-color: #a8a8a812;
    font-size: 12px;
    color: #bebebe;
    box-shadow: inset 0 0 0 1px #b8b8b81a;
    padding: 5px 8px;
    white-space: nowrap;
    border-radius: 6px;
    font-weight: 500;
}

.users-box_tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

#root .users-box_tags .tag-item {
    background-color: #a8a8a812;
    font-size: 12px;
    color: #bebebe;
    box-shadow: inset 0 0 0 1px #b8b8b81a;
    padding: 5px 8px;
    white-space: nowrap;
    border-radius: 9px;
    font-weight: 500;
    cursor: default;
}

#root .users-box_tags .tag-item.blue {
    background-color: #4e8cff21;
    box-shadow: 0 0 0 1px #4e8cff50;
    color: #6199ff;
}

#root .users-box_tags .tag-item.green {
    background-color: #52e70d21;
    box-shadow: 0 0 0 1px #52e70d50;
    color: #72d30c;
}

#root .users-box_tags .tag-item.red {
    background-color: #ff4e4e21;
    box-shadow: 0 0 0 1px #ff4e4e50;
    color: #ff6161;
}

#root .users-box_tags .tag-item.gold {
    background-color: #ffc14e21;
    box-shadow: 0 0 0 1px #ffc14e50;
    color: #ffb561;
}

#root .users-box_tags .tag-item.purple {
    background-color: #ff4eaf21;
    box-shadow: 0 0 0 1px #ff4eaf50;
    color: #ff61c2;
}

#root .users-box_tags .tag-item.yellow {
    background-color: #ff4f0021;
    box-shadow: 0 0 0 1px #e7860d50;
    color: #f99f2b;
}
.users-box_reaction {
    background-color: #a8a8a812;
    font-size: 12px;
    color: #bebebe;
    box-shadow: inset 0 0 0 1px #b8b8b81a;
    padding: 5px 8px;
    white-space: nowrap;
    border-radius: 6px;
    font-weight: 500;
    height: 24px;
    width: 24px;
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px;
}

.users-box_reaction.like {
    background-image: url(/ui/reaction-like-active.svg);
}

.users-box_reaction.dislike {
    background-image: url(/ui/reaction-dislike-active.svg);
}

.users-box_comment {
    font-size: 12px;
    opacity: .6;
    color: #000000;
    margin-top: 4px;
}

#dark .users-box_comment {
    color: #fff;
}

.wrapper-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    max-width: 616px;
    box-sizing: border-box;
    padding: 16px;
    border-radius: 16px;
    background-color: #f7f5ff8f;
    color: #000;
    box-shadow: 0 0 0 1px #0000001a;
    box-shadow: inset 0 0 0 1px #E7E7E7;
}

#dark .wrapper-header {
    background-color: #1f1f1f;
    color: #fff;
    box-shadow: inset 0 0 0 1px #2A2C2E;
}

.wrapper-header_title {
    font-size: 14px;
    font-weight: 500;
    color: inherit;
    text-decoration: none;
    flex-shrink: 1;
    flex-grow: 1;
    margin-left: 8px;
}

.wrapper-header_button.close {
    background-image: url(/ui/cross.svg);
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-position: center;
    background-repeat: no-repeat;
}

.reviews-frame {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    width: 100%;
    max-width: 616px;
    gap: 16px;
    justify-items: center;
}

.users-box_item.review-item {
    background-color: #F7F5FF7f;
    color: #000;
    border-radius: 16px;
}

#dark .users-box_item.review-item {
    background-color: #1f1f1f7f;
    color: #fff;
}

.review-userdata {
    display: flex;
    align-items: center;
    flex-direction: row;
    color: inherit !important;
    gap: 16px;
    text-decoration: none;
    margin-bottom: 16px;
    align-items: start;
}

.review-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    box-sizing: border-box;
}

.review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-userinfo {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.review-username {
    font-size: 15px;
    font-weight: 500;
}

.review-date {
    font-size: 11px;
    opacity: .4;
}

.review-text {
    text-decoration: none;
    color: inherit !important;
    font-size: 13px;
    line-height: 1.5;
}

.review-tags {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.review-tags .tag-item {
    background-color: #a8a8a812;
    font-size: 12px;
    color: #bebebe;
    box-shadow: inset 0 0 0 1px #b8b8b81a;
    padding: 5px 8px;
    white-space: nowrap;
    border-radius: 9px;
    font-weight: 500;
    cursor: default;
}



.quests-frame {
    display: flex;
    flex-direction: column;
}

.quest-box, .quests-title {
    display: grid;
    grid-template-columns: 1fr 92px;
    justify-content: space-between;
    align-items: start;
    padding: 20px;
    box-shadow: inset 0 0 0 1px #E7E7E7;
    margin-bottom: -1px;
    gap: 12px;
}

#dark .quest-box, #dark .quests-title {
    box-shadow: inset 0 0 0 1px #2a2c2e;
}

.quests-title {
    font-size: 14px;
    color: #838383;
    padding: 14px 20px;
}

.quest-box .small-button {
    font-size: 12px;
    font-weight: 500;
}

.quests-frame > *:first-child {
    border-radius: 9px 9px 0 0;
}

.quests-frame > *:last-child {
    border-radius: 0 0 9px 9px;
}

.quest-box_cell {

}

.quest-box_cell:last-child {
    text-align: right;
    max-width: 160px;
}

.quest-title {
    font-size: 14px;
}

.quest-description {
    font-size: 12px;
    color: #838383;
    margin-top: 6px;
}

.quest-release {
    font-size: 12px;
    color: #838383;
    margin-top: 8px;
}

#dark hr {
    background-color: rgb(227 227 227 / 9%);
}

.theme-switcher {
    width: 24px;
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    background-image: url('/ui/light-icon.svg');
}

.mob-theme-switcher {
    background-position: 16px center;
    background-repeat: no-repeat;
    cursor: pointer;
    background-image: url('/ui/light-icon.svg');
}

.mob-theme-switcher::before {
    content: 'Сменить тему'
}

#dark .header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#dark .theme-switcher, #dark .mob-theme-switcher {
    background-image: url('/ui/dark-icon.svg');
}

.social-link, .translate-button {
    width: 24px;
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    position: relative;
}

.translate-button {
    background-image: url('/ui/translate-icon.svg');
}

.social-link.avito {
    background-image: url('/ui/avito-icon-color.svg');
}

.social-link.ozon {
    background-image: url('/ui/ozon-icon-color.svg');
}

.social-link.nsfw {
    background-image: url('/ui/nsfw-icon.svg');
}
.social-link.nsfw.active {
    background-image: url('/ui/nsfw-icon-active.svg');
}

.social-link.wb {
    background-image: url('/ui/wb-icon-color.svg');
}

.social-link.vk {
    background-image: url('/ui/vk-icon.svg');
}

.social-link.tg {
    background-image: url('/ui/tg-icon.svg');
}

.social-link.discord {
    background-image: url('/ui/discord-icon.svg');
}

.social-link.share {
    background-image: url('/ui/share.svg');
}

.social-link.other-button {
    background-image: url(/ui/book-icon.svg);
}

.social-link.rewards {
    background-image: url('/ui/gift-icon.svg');
}

.social-link.notifications {
    background-image: url('/ui/ring.svg');
    user-select: none;
}

.social-link.chats {
    background-image: url('/ui/chats.svg');
    user-select: none;
}

.social-link.tg:after {
    content: '';
    position: absolute;
    background-color: #7d6986;
    top: -10px;
    left: -9px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    border-radius: 50%;
    opacity: .1;
    animation: pulse 3s ease-out infinite;
    z-index: -1;
}

.translate-button.active:after {
    content: '!';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 16px;
    height: 16px;
    background-color: rgb(209, 45, 45);
    border-radius: 50%;
    text-align: center;
    line-height: 16px;
    color: white;
    font-size: 12px;
    font-weight: 600;
}

.social-link.rewards::after,
.social-link.notifications::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background-color: rgb(255, 81, 81);
    border-radius: 50%;
    text-align: center;
    line-height: 16px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 0 0 3px #fff;
    opacity: 0;
    visibility: hidden;
    transition: .2s, box-shadow 0s;
}

#dark .social-link.rewards::after,
#dark .social-link.notifications::after {
    box-shadow: 0 0 0 3px #1e1f21;
    background-color: rgb(209, 45, 45);
}

.social-link.notifications::after {
    top: 0;
    right: 0;
}

.social-link.rewards.active::after,
.social-link.notifications.active::after {
    opacity: 1;
    visibility: visible;
}

.notification-dropdown {
    position: absolute;
    border-radius: 15px;
    padding: 12px;
    width: 290px;
    box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.1), 0 4px 13px 0 rgba(51, 51, 51, 0.1);
    background-color: #ffffff;
    top: calc(100% + 15px);
    right: -15px;
    color: #000;
    cursor: default;
    z-index: 10;
    user-select: none;
}

.notifications-box {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 280px;
    overflow: auto;
}

.notification-dropdown::before {
    content: '';
    position: absolute;
    top: -5px;
    right: 20px;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    transform: rotate(45deg);
    border-left: 1px solid rgba(51, 51, 51, 0.1);
    border-top: 1px solid rgba(51, 51, 51, 0.1);
}

#dark .notification-dropdown {
    box-shadow: inset 0 0 0 1px #292929, 0 4px 13px 0 rgba(16, 17, 24, 0.83);
    background-color: #1e1f21;
    color: #ffffff;
}

#dark .notification-dropdown::before {
    border-left: 1px solid #292929;
    border-top: 1px solid #292929;
    background-color: #1e1f21;
}

.notification-item {
    box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.1);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
    position: relative;
}

#dark .notification-item {
    box-shadow: inset 0 0 0 1px #292929;
}

.notification-item.inactive {
    opacity: .3;
}

.notification-item a {
    text-decoration: none;
    font-weight: 500;
}

.noty-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 1;
    flex-grow: 1;
    position: relative;
}

.noty-side-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(/ui/trash.svg);
    cursor: pointer;
    z-index: 1;
    background-size: 16px;
    background-color: #ffffff;
    box-shadow: inset 0 0 0 1px #b5b5b578;
    opacity: 0;
    visibility: hidden;
    transition: .2s
}

#dark .noty-side-button {
    background-color: #532222;
    box-shadow: inset 0 0 0 1px #bb77774d;
}

.notification-item:hover .noty-side-button {
    opacity: 1;
    visibility: visible;
}

.noty-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
}

.noty-header_avatar {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.noty-header_avatar.placeholder {
    background-image: url('/ui/default-avatar.png');
}

.noty-header_from {
    display: flex;
    gap: 8px;
    text-decoration: none;
    color: inherit !important;
}

.noty-header_from_username {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.noty-header_date {
    color: #686868;
    height: 16px;
}

.noty-body_content {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
}

.noty-body_text {
    font-size: 13px;
    color: #8A8A8B;
    user-select: text;
}

.noty-body_price {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    color: #c9ffc8;
    padding: 2px 4px;
    border-radius: 6px;
    user-select: text;
    background-color: #4f9b70;
    font-size: 12px;
    font-weight: 500;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.noty-picture {
    width: 42px;
    height: 42px;
    background-position: center;
    background-size: cover;
    border-radius: 9px;
    background-repeat: no-repeat;
    flex-shrink: 0;
    flex-grow: 0;
    position: relative;
}

.social-dropdown, .translate-dropdown {
    position: absolute;
    top: calc(100% + 15px);
    right: -15px;
    background-color: #fff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    gap: 12px;
    max-width: 240px;
    background: #ffffff;
    border: 1px solid #2e2e2e1a;
    border-radius: 15px;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translate(0, -5px);
    cursor: default;
    transition: .15s;
    pointer-events: none;
}

.langs-frame {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 20px 0 0;
    opacity: 0.2;
    transition: .15s;
}

.langs-frame:hover {
    opacity: 1;
}

.translate-dropdown {
    display: grid;
    grid-template-columns: repeat(3, auto);
}

#dark .social-dropdown, #dark .translate-dropdown {
    background: #232025;
    border: 1px solid #2e2e2e;
}

.social-link:hover .social-dropdown, .translate-button:hover .translate-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(0);
    pointer-events: all;
}

.social-link:hover .social-dropdown::before,
.social-link .social-dropdown:hover::before,
.translate-button:hover .translate-dropdown::before,
.translate-button .translate-dropdown:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    width: 100%;
    height: 20px;
    left: 0;
}
.soc-item {
    box-sizing: border-box;
    text-decoration: none;
    color: #000;
    box-shadow: 0 0 0 1px #00000014;
    font-size: 12px;
    padding: 12px;
    background: rgb(0 0 0 / 0%);
    border-radius: 9px;
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

#dark .soc-item {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
}

.soc-item_avatar {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    flex-shrink: 0;
}

.soc-item_title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


#dark .nav-link {
    color: #8E8E8E;
}

#dark .nav-link.active {
    color: #fff;
}

#dark .header_user {
    background-color: #232025;
    box-shadow: 0 0 0 1px rgba(180, 180, 180, 0.16);
    color: #fff;
}

#dark .header_user .usermenu {
    background-color: #232025;
    box-shadow: 0 0 0 1px rgba(180, 180, 180, 0.16), 0px 6px 16px rgba(11, 17, 24, 0.14);
    color: #fff;
}

#dark .header_user .profile-info {
    border-color: rgba(180, 180, 180, 0.16);
    color: #fff;
}

#dark .header_user .usermenu-button {
    border-color: rgba(180, 180, 180, 0.16);
    color: #fff;
}

#dark .usermenu-head { border-color: rgba(180, 180, 180, 0.16); }
#dark .usermenu-head:hover { background: rgba(255, 255, 255, 0.04); }
#dark .usermenu-head__name { color: #fff; }
#dark .usermenu-head__balance { color: #ffd166; }
#dark .usermenu-collections { border-color: rgba(180, 180, 180, 0.16); }
#dark .usermenu-gm-actions .usermenu-button {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(180, 180, 180, 0.16);
    color: #fff;
}
#dark .usermenu-gm-actions .usermenu-button:hover {
    background: rgba(127, 45, 232, 0.22);
    border-color: rgba(127, 45, 232, 0.55);
}

#dark h1, #dark h2, #dark h3, #dark p {
    color: #fff;
}

#dark .filter_item input,
#dark .filter_item select {
    background-color: #232025;
    box-shadow: 0 0 0 1px #2E3032, 0px 4px 20px #1A1920;
    color: #FFF;
}



#dark .set-info, #dark .series-info {
    background-color: #2B2C30;
    border-color: rgba(255, 255, 255, 0.05);
}



#dark .story-item::after {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.set-info-name {
    color: #fff;
}



/* #root .card-box:not(:hover) .card_handlers.visible .card_handlers_btn.look_at_me:not(.active),
#dark .card-box:not(:hover) .card_handlers.visible .card_handlers_btn.look_at_me:not(.active) {
    opacity: .8;
}

.card_handlers_btn.look_at_me,
#dark .card_handlers_btn.look_at_me {
    box-shadow: inset 0 0 0 2px rgb(6, 185, 54), 0 0 10px rgba(0, 255, 81, 0.25);
} */
/* 
.card_handlers_btn.look_at_me::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    transform: translate(50%, -50%);
} */



#dark .page-item {
    background: rgba(128, 136, 166, 0.06);
    color: #A49CC1;
}
#dark .page-item:hover {
    background: rgba(218, 209, 255, 0.15);
}
#dark .page-item.active {
    background: linear-gradient(120deg, #4FA0FF -4.18%, #524FFF 40.2%, #B338FF 100%);
    color: white;
    /* padding: 4px 10px; */
    cursor: default;
}

.main-page.container {
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-areas:
        "series series"
        "news side";
    gap: 30px;
    padding-bottom: 30px;
}

.series-page.container {
    display: grid;
    grid-template-columns: 1fr 340px;
    grid-template-areas:
        "news side";
    gap: 30px;
    padding-bottom: 30px;
}



.profiles-page.container {
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-areas: "side main";
    gap: 30px;
    padding-bottom: 30px;
}

.news-container {
    grid-area: news;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.main-container {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.news-article {
    border-radius: 9px;
    box-shadow: 0 0 0 1px rgba(137, 137, 137, 0.15);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: hidden;
}

.news-image-box {
    border-right: 1px solid rgba(137, 137, 137, 0.15);
    position: relative;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}

.news-image-box .backdrop {
    position: absolute;
    z-index: -1;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    background-position: center;
    background-size: cover;
    filter: blur(10px);
}

.news-image-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, rgba(26, 19, 31, 0.0) 0%, rgba(26, 19, 31, 0.83) 100%);
}

.news-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.news-box {
    display: grid;
    grid-template-rows: 1fr auto;
}

.news-box a {
    color: #4FA0FF;
    text-decoration: none;
    font-weight: 500;
}

.news-box a:hover {
    color: #4FA0FF;
    text-decoration: underline;
}

.news-content {
    padding: 30px;
}


.news-title {
    margin: 0;
    margin-bottom: 30px;
    font-weight: 600;
    font-size: 1.3em;
}
.news-text {
    color: #000000;
    line-height: 129%;
    font-weight: 400;
    margin: 0;
    font-size: 14px;
}
#dark .news-text {
    color: #fff;
}
.news-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 30px;
    border-top: 1px solid rgba(137, 137, 137, 0.15);
}

.news-date {
    font-weight: 400;
    font-size: 14px;
    text-align: right;
    color: rgba(131, 131, 131, 0.5);
}

.news-author {
    font-weight: 400;
    font-size: 14px;
    color: #838383;
}

#dark .news-author {
    color: #838383;
}

.side-frame {
    grid-area: side;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.sets-container {
    display: flex;
    gap: 20px;
    flex-direction: column;
}

.preorder-item {
    padding: 16px;
    box-shadow: inset 0 0 0 1px #8f8f8f47;
    border-radius: 15px;
    color: black;
    font-size: 14px;
    background-color: #8181810f;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#dark .preorder-item {
    box-shadow: inset 0 0 0 1px #8f8f8f47;
    color: white;
    background-color: #8181810f;
}

.preorder-item_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    gap: 8px;
}

.preorder-item_row .title {
    font-weight: 400;
}

.preorder-item_row .status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 400;
    font-size: 13px;
    background-color: #8181810f;
    color: #838383;
    border-radius: 6px;
}

.preorder-item_row .status.green {
    background-color: #18ff4a21;
    color: #4cbb1e;
}

.preorder-item_row .status.yellow {
    background-color: #ffb71821;
    color: #ff8319;
}

.set-item {
    box-shadow: 0 0 0 1px rgba(137, 137, 137, 0.15);
    border-radius: 9px;
    padding: 16px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: center;
    width: 100%;
    text-decoration: none;
    box-sizing: border-box;
    position: relative;
}

.set-image {
    border-radius: 6px;
    width: 54px;
    height: 54px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.set-series {
    font-weight: 400;
    font-size: 12px;
    color: #aeaeae;
    padding-bottom: 2px;
    display: block;
}

.set-title {
    font-weight: 500;
    font-size: 16px;
    color: #000000;
}

#dark .set-title {
    color: #fff;
}

.set-date {
    font-weight: 500;
    font-size: 12px;
    color: #626262;
}

.set-tags {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 6px;
}

.set-tag {
    font-weight: 400;
    font-size: 12px;
    color: #8b8b8b;
    text-decoration: none;
    background-color: #9a9a9a13;
    display: inline-block;
    padding: 2px 4px;
    border-radius: 6px;
    font-weight: 500;
}

.set-tag.red {
    background-color: #d63a3a15;
    color: #d63a3a;
}

.set-tag.orange {
    background-color: rgba(255, 122, 0, 0.52);
    color: #FF7A00;
    box-shadow: 0 3px 9px 0 rgba(255, 122, 0, 0.52), inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.set-tag.green {
    box-shadow: inset 0 0 0 1px rgb(41 137 24 / 19%);
    background: #39c51f26;
    color: #48c320;
}

.series-container {
    display: flex;
    gap: 20px;
    flex-direction: column;
    grid-area: series;
}

.series-grid {
    display: grid;
    gap: 20px;
    align-items: start;
    justify-items: stretch;
    grid-template-columns: repeat(6, 1fr);
}

.series-item {
    box-shadow: 0 0 0 1px rgba(137, 137, 137, 0.15);
    border-radius: 9px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    width: 100%;
    overflow: hidden;
    text-decoration: none;
    position: relative;
}

.series-image {
    width: 107px;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 45 / 30;
}

.series-frame {
    padding: 6px 0;
}

.series-title {
    font-weight: 500;
    font-size: 14px;
    line-height: 118%;
    color: #000000;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* количество строк, которые нужно показать */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: calc(100% - 24px);
}

#dark .series-title {
    color: #fff;
}

.series-company {
    font-weight: 400;
    font-size: 11px;
    line-height: 120%;
    color: #838383;
    margin: 0;
    margin-top: 3px;
}

#dark .series-company {
    color: #838383;
}

/* Плитки серий за пределами первого экрана — скрыты, пока грид не .expanded.
   Селектор специально двухклассовый (.series-grid .series-item--extra), а не просто
   .series-item--extra — иначе .series-item{display:grid} из мобильного медиа-запроса
   (объявлен ниже по файлу) перебивает display:none той же специфичностью. */
.series-grid .series-item--extra {
    display: none;
}

.series-grid.expanded .series-item--extra {
    display: grid;
}

/* Кнопка "Все серии" — тумблер разворота грида, а не ссылка на /sets.
   Плоская нейтральная заливка (как .collection-link и другие вторичные
   элементы сайта) вместо фоновой картинки — она не тянет тему и на светлом
   фоне выглядела просто грязным пятном. Цвет задаём явно, а не полагаемся
   на наследование — у <button> в браузерах свой color по умолчанию, из-за
   чего стрелка (stroke="currentColor") оставалась чёрной в тёмной теме. */
.series-toggle {
    background: rgba(137, 137, 137, 0.06);
    color: #000;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s;
}

.series-toggle:hover {
    background: rgba(137, 137, 137, 0.1);
}

#dark .series-toggle {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

#dark .series-toggle:hover {
    background: rgba(255, 255, 255, 0.07);
}

.series-toggle_arrow {
    flex-shrink: 0;
    opacity: .6;
    transition: transform .25s ease;
}

.series-toggle.is-expanded .series-toggle_arrow {
    transform: rotate(180deg);
}

.guides-container {
    display: flex;
    gap: 20px;
    flex-direction: column;
}

.guide-link {
    box-shadow: 0 0 0 1px rgba(137, 137, 137, 0.15);
    border-radius: 12px;
    align-items: center;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    font-weight: 500;
    font-size: 16px;
    line-height: 112%;
    text-decoration: none;
    color: #000000;
    gap: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(5px);
}

#dark .guide-link {
    color: #fff;
}

.guide-link_icon {
    width: 18px;
    height: 18px;
    background-image: url('/ui/link-icon.png');
    background-position: center;
    background-repeat: no-repeat;
}

footer {
    /* Стили для футера */
}

#image {
    height: 500px;
}

.cropper-view-box,
.cropper-face {
    border-radius: 50%;
}

.cropper-face, .cropper-dashed {
    display: none;
    opacity: 0 !important;
}


/* The css styles for `outline` do not follow `border-radius` on iOS/Safari (#979). */
.cropper-view-box {
    outline: 0;
    box-shadow: 0 0 0 1px #39f;
}

.profile-avatar img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
}



.mini-profile-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mini-profile-item {
    display: flex;
    align-items: center;
    gap: 18px;
    text-decoration: none;
    color: #000;
}

#dark .mini-profile-item {
    color: #fff;
}

.mini-profile-avatar {
    width: 54px;
    height: 54px;
    border-radius: 20px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    flex-shrink: 0;
}

.mini-profile-avatar::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #807C8C;
    box-shadow: 0 0 0 3px #fff;
    transition: .4s;
}

#dark .mini-profile-avatar::after {
    box-shadow: 0 0 0 3px #1E1F21;
}

.mini-profile-avatar.online::after {
    background-color: #28D07F;
}

.mini-profile-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: start;
    flex-grow: 1;
    text-align: left;
    flex-shrink: 1;
    width: 100px;
}

.mini-profile-username {
    font-weight: 600;
    font-size: 18px;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-profile-tg {
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    color: rgba(135, 145, 159, 0.43);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-profile-count {
    background: rgba(149, 149, 149, 0.08);
    border-radius: 24px;
    padding: 5px 10px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    color: inherit;
}


.profiles-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
}

.profile-item {
    box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.1);
    border-radius: 24px;
    padding: 27px 16px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 15px;
    color: #000;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
}

#dark .profile-item {
    color: #fff;
    box-shadow: inset 0 0 0 1px #2f2f31;
}

#dark .profile-item {
    border: 1px solid #2f2f31;
}

.profile-item_backdrop {
    position: absolute;
    top: -15px;
    left: -15px;
    width: calc(100% + 30px);
    height: calc(100% + 30px);
    filter: blur(20px);
    z-index: -1;
    opacity: .15;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#dark .profile-item_backdrop {
    opacity: .09;
}

.profile-item-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.profile-item-avatar::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #918ca2;
    box-shadow: 0 0 0 3px #fff;
    transition: .4s;
}

#dark .profile-item-avatar::after {
    box-shadow: 0 0 0 3px #1E1F21;
}

.profile-item-avatar.online::after {
    background-color: #28D07F;
}

.profile-item-avatar::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    border-radius: 50%;
    box-shadow: 0 0 0 3px #8a879547;
    transition: .4s;
}

.profile-item-avatar.online::before {
    box-shadow: 0 0 0 3px rgba(40, 208, 127, 0.5);
}

.profile-username {
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    color: inherit !important;
    text-decoration: none;
    word-break: break-word;
}

.profile-tg {
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    text-align: center;
    color: rgba(135, 145, 159, 0.43) !important;
    text-decoration: none;
    word-break: break-all;
    flex-grow: 1;
}

.profile-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
}

.profile-reactions {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.profile-reaction_button {
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
    border-radius: 0 0 0 0;
    padding: 10px;
    color: #000;
    font-size: 12px;
    gap: 8px;
    background: #fff;
}

#dark .profile-reaction_button {
    color: #fff;
    background: #222324;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
    cursor: default;
}

.profile-reaction_button:first-child {
    border-radius: 9px 0 0 9px;
}

.profile-reaction_button:last-child {
    border-radius: 0 9px 9px 0;
}

#dark .profile-reaction_button {
    color: #fff;
}

.profile-reaction_button .btn-img {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 14px;
    height: 14px;
}

.profile-reaction_button.like .btn-img {
    background-image: url('/ui/reaction-like.svg');
}

.profile-reaction_button.react.dislike .btn-img {
    background-image: url('/ui/reaction-dislike-active.svg');
    opacity: .6;
}

.profile-reaction_button.disabled{
    color: rgba(0, 0, 0, .3);
}

#dark .profile-reaction_button.disabled {
    color: rgba(255, 255, 255, .3);
}

.profile-reaction_button.disabled .btn-img {
    opacity: .3;
}

.profile-reaction_button.dislike .btn-img {
    background-image: url('/ui/reaction-dislike.svg');
}

#root .profile-reaction_button.react.like {
    color: #1ACD6D;
}

.profile-reaction_button.react.like .btn-img {
    background-image: url('/ui/reaction-like-active.svg');
    opacity: .6;
}

#root .profile-reaction_button.react.dislike {
    color: #FF4D4D;
}

.new-activity {
    font-weight: 600;
    font-size: 12px;
    line-height: 100%;
    text-align: center;
    color: rgba(135, 145, 159, 0.7) !important;
    position: absolute;
    top: 16px;
    right: 16px;
    background: #fff;
    padding: 8px 9px;
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
    z-index: 1;
    min-width: 24px;
    box-sizing: border-box;
    text-decoration: none;
}

#dark .new-activity {
    background: #222324;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.new-activity span {
    display: inline-block;
    margin-right: 2px;
    background-image: url('/ui/cards.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 12px;
    height: 12px;
    background-position: center;
    vertical-align: middle;
    opacity: .6;
}

/* .new-activity span {
    display: inline-block;
    margin-right: 2px;
    color: #FF4D4D;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: -1px;
} */

/* .new-activity::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #ff4d4d;
    z-index: 1;
} */

.new-activity::after {
    content: 'new';
    position: absolute;
    top: -4px;
    right: 2px;
    color: #FF4D4D;
    text-transform: uppercase;
    font-size: 8px;
    z-index: 1;
}
.profiles-caption {
    box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.1);
    border-radius: 12px;
    padding: 20px;
    background: rgba(134, 134, 134, 0.02);
    color: #000;
}

#dark .profiles-caption {
    box-shadow: inset 0 0 0 1px #2f2f31;
}

#dark .profiles-caption {
    color: #fff;
}

.profiles-caption_title {
    font-weight: 500;
    font-size: 18px;
    color: #ffa800;
    margin-bottom: 8px;
}

.profiles-caption_content {
    font-weight: 400;
    font-size: 14px;
}

.search-results-frame {
    max-height: 400px;
    overflow: auto;
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(137, 137, 137, 0.15);
    margin-top: 16px;
}

#dark .search-results-frame {
    box-shadow: 0 0 0 1px #2f2f31;
}

.search-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
}

.search-results:hover .search-results_item {
    opacity: .6;
}

.search-results_item {
    text-decoration: none;
    color: #000;
    transition: .2s;
    cursor: pointer;
}

#dark .search-results_item {
    color: #fff;
    padding: 8px;
}

.search-results:hover .search-results_item:hover {
    opacity: 1;
}

.search-results_user_username {
    font-weight: 600;
    font-size: 16px;
}

.search-results_user_tg {
    font-weight: 400;
    font-size: 12px;
    opacity: .5;
}

.clear-btn, .loading-btn {
    position: absolute;
    top: 15px;
    right: 10px;
    cursor: pointer;
    height: 25px;
    width: 25px;
    background-image: url('/ui/cross.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10px;
    transition: .2s;
    opacity: .4;
}

.loading-btn {
    background-image: url('/ui/loading.svg');
    background-size: 18px;
}

.clear-btn:hover {
    opacity: .8;
}

.profile-header_frame, .set-header_frame {
    padding: 30px;
    border-radius: 15px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    background: #ffffff00;
    backdrop-filter: blur(5px);
}

.profile-header_frame.poster {
    background-position: top right;
    background-repeat: no-repeat;
    /* backdrop-filter: none; */
    /* padding-top: 150px; */
    background-size: auto 260px;
    height: 260px;
    align-items: end;
}

.profile-header_frame.poster.miku {
    background-image: url(/img/headers/miku.webp);
}

.profile-header_frame.poster.houhou {
    background-image: url(/img/headers/houhou.webp);
}

.profile-header_frame.poster.hutao {
    background-image: url(/img/headers/hutao.webp);
}

.profile-header_frame.poster.kangel {
    background-image: url(/img/headers/kangel.webp);
}

.profile-header_frame.poster.kitagawa {
    background-image: url(/img/headers/kitagawa.webp);
}

.profile-header_frame.poster.kurumi {
    background-image: url(/img/headers/kurumi.webp);
}

.profile-header_frame.poster.kyaru {
    background-image: url(/img/headers/kyaru.webp);
}

.profile-header_frame.poster.love-live {
    background-image: url(/img/headers/love-live.webp);
}

.profile-header_frame.poster.megumin {
    background-image: url(/img/headers/megumin.webp);
}

.profile-header_frame.poster.stocking {
    background-image: url(/img/headers/stocking.webp);
}

.profile-header_frame.poster.waifuchan-1 {
    background-image: url(/img/headers/waifuchan-1.webp);
}

.profile-header_frame.poster.shiro {
    background-image: url(/img/headers/shiro.webp);
}

.profile-header_frame.poster.alphonse {
    background-image: url(/img/headers/alphonse.webp);
}

#dark .profile-header_frame, #dark .set-header_frame {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.set-header_frame {
    gap: 32px;
}

.profile-header_main, .set-header_main {
    display: flex;
    align-items: center;
    gap: 28px;
}

.profile-info_avatar {
    width: 72px;
    height: 72px;
    position: relative;
    font-size: 0;
    flex-shrink: 0;
}

.profile-info_avatar::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    border-radius: 50%;
    box-shadow: 0 0 0 4px #807C8C;
    transition: .4s;
    opacity: .5;
}

.profile-info_avatar.online::before {
    box-shadow: 0 0 0 4px #28D07F;
    opacity: .5;
}

.profile-info_avatar::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    transition: .4s;
    opacity: 1;
    background-color: #807C8C;
    box-shadow: 0 0 0 4px #fff;
}

#dark .profile-info_avatar::after {
    box-shadow: 0 0 0 4px #1E1F21;
}

.profile-info_avatar.online::after {
    background-color: #28D07F;
}

.profile-info_avatar img {
    border-radius: 50%;
    width: 100%;
}

.set-header_subinfo {
    flex-shrink: 0;
}

.profile-info_userinfo, .set-info_setinfo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.set-info_setinfo {
    flex-shrink: 1;
}

.profile-info_userinfo .breadcrumbs, .set-info_setinfo .breadcrumbs {
    margin-bottom: 0;
}

.profile-info_username, .set-info_setname {
    font-size: 28px;
    margin: 0;
    color: #454545;
}

#dark .profile-info_username, #dark .set-info_setname {
    color: #fff;
}

.profile-info_username .dimmed, .set-info_setname .dimmed {
    color: #0f0f0f;
    opacity: .25;
}

#dark .profile-info_username .dimmed, #dark .set-info_setname .dimmed {
    color: #B4BFCB;
    opacity: .25;
}

.profile-info_username .banned {
    display: inline-block;
    color: #E24B4B;
    font-weight: 500;
    font-size: 14px;
    margin-left: 8px;
    vertical-align: middle;
    background-color: #e24b4b29;
    box-shadow: 0 0 0 1px #e24b4b59;
    border-radius: 6px;
    padding: 5px 8px;
}

.profile-info_collection-description {
    color: #B4BFCB;
    margin-top: 4px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/* Описание коллекции со спойлером */
.collection-description-text {
    min-width: 0;
    line-height: 1.4;
}

.collection-description-text_body {
    white-space: pre-wrap;
    word-break: break-word;
}

.collection-description-text_body.clamped {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.collection-description-toggle {
    display: inline-block;
    margin-top: 2px;
    cursor: pointer;
    font-weight: 500;
    color: #7C6CFF;
    transition: .15s;
}

.collection-description-toggle:hover {
    color: #B338FF;
    text-decoration: underline;
}

.set-info_description {
    color: #B4BFCB;
    margin-top: 4px;
}

.profile-info_last-seen {
    font-size: 14px;
    color: rgba(135, 145, 159, 0.43);
}

.profile-info_last-seen span {
    font-weight: 500;
    color: rgba(135, 145, 159, 0.57);
}

.profile-info_last-seen.online {
    font-weight: 500;
    color: #28D07F;
}

.profile-info_sub-buttons, .set-info_sub-buttons {
    display: flex;
    gap: 20px;
}

.set-info_sub-buttons {
    flex-wrap: wrap;
    justify-content: end;
}

.profile-info_sub-buttons_cell, .set-info_sub-buttons_cell {
    display: flex;
    flex-grow: 1;
}
.profile-info_sub-buttons_cell {
    text-decoration: none;
}
.profile-info_sub-buttons_cell.fixed, .set-info_sub-buttons_cell.fixed {
    flex-grow: 0;
    flex-shrink: 0;
}

.profile-info_edit-description {
    box-shadow: inset 0 0 0 1px rgb(84 84 84 / 17%);
    padding: 8px;
    align-items: center;
    gap: 8px;
    background-color: #ffffff;
    color: #000000;
    font-size: 12px;
    border-radius: 6px;
    display: inline-flex;
    cursor: pointer;
    transition: .15s;
}

.profile-info_edit-description:hover {
    box-shadow: inset 0 0 0 1px rgb(84 84 84 / 25%);
}

#dark .profile-info_edit-description {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    padding: 8px;
    align-items: center;
    gap: 8px;
    background-color: #232025;
    color: #B4BFCB;
    font-size: 12px;
    border-radius: 6px;
    display: inline-flex;
    cursor: pointer;
    transition: .15s;
}

#dark .profile-info_edit-description:hover {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.profile-info_edit-description .btn-img {
    width: 16px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
    background-image: url('/ui/pen.svg');
}

.profile-sub-button, .set-info_sub-button {
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 6%);
    padding: 0 14px;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #fff;
    color: #000;
    font-size: 12px;
    cursor: pointer;
    transition: .2s;
    text-decoration: none;
    flex-grow: 1;
    justify-content: center;
}

.profile-sub-button.fixed, .set-info_sub-button.fixed {
    flex-grow: 0;
    flex-shrink: 0;
}

#dark .profile-sub-button, #dark .set-info_sub-button {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    background-color: #232025;
    color: #fff;
}


.profile-sub-button:hover, .set-info_sub-button:hover {
    background-color: rgb(0 0 0 / 3%);
}

#dark .profile-sub-button:hover, #dark .set-info_sub-button:hover {
    background-color: #232025bd;
    backdrop-filter: blur(6px);
}

.profile-sub-button.disabled, .set-info_sub-button.disabled {
    opacity: .5;
    cursor: default;

    pointer-events: none;
}

.profile-sub-button .btn-img, .set-info_sub-button .btn-img {
    width: 16px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
}

.profile-sub-button.like .btn-img, .set-info_sub-button.like .btn-img {
    background-image: url('/ui/reaction-like.svg');
}

.profile-sub-button.like.react .btn-img, .set-info_sub-button.like.react .btn-img {
    background-image: url('/ui/reaction-like-active.svg');
}

#root .profile-sub-button.like.react, #root .set-info_sub-button.like.react {
    color: #1ACD6D;
    font-weight: 500;
}

.profile-sub-button.subscription .btn-img {
    background-image: url('/ui/like.svg');
}

.profile-sub-button.subscription.react .btn-img {
    background-image: url('/ui/like-active-red.svg');
}

.profile-sub-button.dislike .btn-img, .set-info_sub-button.dislike .btn-img {
    background-image: url('/ui/reaction-dislike.svg');
}

.profile-sub-button.dislike.react .btn-img, .set-info_sub-button.dislike.react .btn-img {
    background-image: url('/ui/reaction-dislike-active.svg');
}

#root .profile-sub-button.dislike.react, #root .set-info_sub-button.dislike.react {
    color: #EE4646;
    font-weight: 500;
}

.profile-sub-button.reviews .btn-img {
    background-image: url('/ui/reviews-icon.svg');
}

.profile-sub-button.no-reviews .btn-img {
    background-image: url('/ui/no-reviews-icon.svg');
}

.profile-sub-button.dislike.react .btn-img {
    background-image: url('/ui/reaction-dislike-active.svg');
}

.profile-sub-button.telegram .btn-img {
    background-image: url('/ui/telegram-icon.svg');
}

.profile-sub-button.message .btn-img {
    background-image: url('/ui/message-icon.svg');
}

.profile-sub-button.channel .btn-img {
    background-image: url('/ui/channel-icon.svg');
}

.profile-sub-button.youtube .btn-img {
    background: currentColor;
    color: #FF0000;
    -webkit-mask: url('/ui/youtube-icon.svg') center / contain no-repeat;
            mask: url('/ui/youtube-icon.svg') center / contain no-repeat;
}
.profile-sub-button.tiktok .btn-img {
    background: currentColor;
    color: #010101;
    -webkit-mask: url('/ui/tiktok-icon.svg') center / contain no-repeat;
            mask: url('/ui/tiktok-icon.svg') center / contain no-repeat;
}
#dark .profile-sub-button.tiktok .btn-img { color: #FFFFFF; }
.profile-sub-button.vk .btn-img {
    background: currentColor;
    color: #0077FF;
    -webkit-mask: url('/ui/vk-icon.svg') center / contain no-repeat;
            mask: url('/ui/vk-icon.svg') center / contain no-repeat;
}

.profile-sub-button.settings  .btn-img{
    background-image: url('/ui/settings.svg');
}

.profile-sub-button.reward  .btn-img{
    background-image: url('/ui/sell.svg');
}

/* Loading состояние для кнопок реакций */
.set-info_sub-button.reaction.loading {
    pointer-events: none;
    position: relative;
    animation: loading .8s linear infinite;
}

/* Loading состояние для подписки на профиль */
.profile-sub-button.subscription.loading {
    pointer-events: none;
    animation: loading .8s linear infinite;
}

#root .set-info_sub-button.market {
    background: linear-gradient(120deg, #4FA0FF -4.18%, #524FFF 40.2%, #B338FF 100%);
    color: white;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 27%);
}

.set-info_sub-button.market .btn-img {
    background-image: url('/ui/market-icon.svg');
}

#root .set-info_sub-button.info {
    /* padding: 0; */
    /* width: 44px; */
    min-height: 44px;
    height: 100%;
    justify-content: center;
}

.set-info_sub-button.info .btn-img {
    background-image: url('/ui/info-icon.svg');
}

#root .set-info_sub-button.gatcha {
    box-shadow: inset 0 0 0 1px rgb(194 102 255 / 39%);
    color: #893dff;
    font-weight: 500;
}

#dark .set-info_sub-button.gatcha {
    box-shadow: inset 0 0 0 1px rgb(130 48 225);
    color: #fff;
}

.set-info_sub-button.gatcha .btn-img {
    background-image: url('/ui/drop-rainbow.svg');
}



.profile-info_sub-buttons_cell .profile-sub-button:first-child, .set-info_sub-buttons_cell .set-info_sub-button:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.profile-info_sub-buttons_cell .profile-sub-button:last-child, .set-info_sub-buttons_cell .set-info_sub-button:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.collections-swwitcher {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
    margin: 30px 0;
}

.collections-switcher_box {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
    max-height: 230px;
    overflow: auto;
}

.collections-switcher_box .spacer {
    flex-grow: 1;
    display: flex;
    justify-content: end;
}

/* Сетка серий над списком карточек — компактные плитки в духе главной страницы
   (лого + название), а не текстовые чипы переменной ширины. Видно 2 ряда на ПК
   и 3 на мобильных, остальное скрыто через max-height и открывается тумблером,
   который сам является последней плиткой сетки (как "Все серии" на главной) —
   а не отдельной кнопкой сбоку, отъедающей место под собственную "колонку". */
.mini-series-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    overflow: hidden;
    max-height: 114px; /* 2 ряда: 52px плитка + 10px gap + 52px плитка */
    transition: max-height .25s ease;
}

/* Разворот ограничен 400px, а не безграничен — если серий много, дальше
   блок скроллится сам, а не растягивает всю страницу */
.mini-series-grid.expanded {
    max-height: 400px;
    overflow-y: auto;
}

.mini-series-tile {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    box-sizing: border-box;
    padding: 8px;
    border-radius: 9px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    background: rgba(161, 161, 161, 0.03);
    border: none;
    font: inherit;
    color: #000;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    min-width: 0;
    transition: background .2s;
}

.mini-series-tile:hover {
    background: rgba(161, 161, 161, 0.08);
}

#dark .mini-series-tile {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    background: rgba(161, 161, 161, 0.07);
    color: #fff;
}

#dark .mini-series-tile:hover {
    background: rgba(161, 161, 161, 0.11);
}

.mini-series-tile.active {
    box-shadow: inset 0 0 0 1px #8c32ff, 0 5px 12px 0 rgba(82, 0, 255, 0.15);
}

#dark .mini-series-tile.active {
    box-shadow: inset 0 0 0 1px #8c32ff, 0 5px 12px 0 rgba(82, 0, 255, 0.29);
}

.mini-series-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(137, 137, 137, 0.08);
}

.mini-series-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.mini-series-tile--all,
.mini-series-toggle {
    justify-content: center;
}

/* Явно закрепляем тумблер в последней ячейке 2-го (видимого свёрнутого) ряда —
   иначе при большом числе серий его просто вытесняет за max-height третьим
   рядом, и он визуально пропадает. Плитки серий авто-раскладкой обтекают
   зарезервированную ячейку сами.
   "-2 / -1", а не просто "-1" — одно значение "-1" задаёт только начальную
   линию и заставляет браузер добавить лишнюю неявную 7-ю колонку под конец
   спана, из-за чего колонки становились разной ширины. "-2 / -1" — это ровно
   последняя из 6 явных колонок, без побочных колонок.
   При развороте позиционирование снимается — тумблер возвращается в обычный
   поток и оказывается в конце всего списка (см. .expanded ниже). */
.mini-series-toggle {
    grid-column: -2 / -1;
    grid-row: 2;
}

.mini-series-grid.expanded .mini-series-toggle {
    grid-column: auto;
    grid-row: auto;
    /* Список после разворота может быть длинным и скроллиться сам (см.
       .mini-series-grid.expanded { overflow-y:auto }) — без sticky кнопку
       сворачивания пришлось бы искать скроллом, а после сворачивания она
       вовсе норовила укатиться за пределы видимой области. Непрозрачный фон,
       а не унаследованный полупрозрачный — иначе сквозь "прилипшую" плитку
       было бы видно проезжающий под ней контент. */
    position: sticky;
    bottom: 0;
    background: #efeff0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 -6px 10px -6px rgba(0, 0, 0, 0.18);
}

#dark .mini-series-grid.expanded .mini-series-toggle {
    background: #232025;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 -6px 10px -6px rgba(0, 0, 0, 0.4);
}

.mini-series-arrow {
    opacity: .6;
    transition: transform .25s ease;
}

.mini-series-toggle[aria-expanded="true"] .mini-series-arrow {
    transform: rotate(180deg);
}

#root .collection-link {
    border-radius: 9px;
    padding: 14px;
    box-shadow: inset 0 0 0 1px rgba(000, 000, 000, 0.1);
    background: rgba(161, 161, 161, 0.03);
    font-size: 14px;
    color: #000;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    font-weight: 400;
    transition: .2s;
    white-space: nowrap;
}

#root .collection-link.series {
    flex-grow: 1;
    text-align: center;
    justify-content: center;
}

#root .collection-link:hover {
    background: rgba(161, 161, 161, 0.01);
}

#dark .collection-link {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    background: rgba(161, 161, 161, 0.07);
    color: #fff;
}

#dark .collection-link:hover {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    background: rgba(161, 161, 161, 0.03);
    color: #fff;
}

.collection-link.private {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.collection-link .btn-img {
    width: 16px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
    flex-shrink: 0;
}

.collection-link.has .btn-img {
    background-image: url('/ui/checked.svg');
}

.collection-link.like .btn-img {
    background-image: url('/ui/like.svg');
}

.collection-link.wishlist .btn-img {
    background-image: url('/ui/wishlist.svg');
}

.collection-link.sell .btn-img {
    background-image: url('/ui/sell.svg');
}

.collection-link.drop .btn-img {
    background-image: url('/ui/drop.svg');
}

.collection-link.profile .btn-img {
    background-image: url('/ui/user-icon.svg');
}

.collection-link.reacted-profiles .btn-img {
    background-image: url('/ui/reacts-icon.svg');
}

#root .collection-link.active {
    box-shadow: inset 0 0 0 1px #8c32ff, 0 5px 12px 0 rgba(82, 0, 255, 0.15);
    background: rgba(161, 161, 161, 0.02);
    color: #000;
}

#dark .collection-link.active {
    box-shadow: inset 0 0 0 1px #8c32ff, 0 5px 12px 0 rgba(82, 0, 255, 0.29);
    background: rgba(161, 161, 161, 0.02);
    color: #fff;
}

.collection-link .hide-btn {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('/ui/hide.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
    flex-shrink: 0;
    cursor: pointer;
    transition: .2s;
    margin-left: auto;

    opacity: 0.2;
}

.collection-link .hide-btn.hide {
    background-image: url('/ui/hidden.svg');
    opacity: .7;
}

.collection-link .hide-btn:hover {
    opacity: 1;
}




.profile-info_views.profile-country {
    height: 32px;
    width: 32px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
}

#root .profile-info_views.profile-country.russia .btn-img {
    background-image: url('/ui/flags/russia.png');
    opacity: .7;
    border-radius: 3px;
}

#root .profile-info_views.profile-country.europe .btn-img {
    background-image: url('/ui/flags/europe.png');
    opacity: .7;
    border-radius: 3px;
}

#root .profile-info_views.profile-country.usa .btn-img {
    background-image: url('/ui/flags/usa.png');
    opacity: .7;
    border-radius: 3px;
}

#root .profile-info_views.profile-country.belarus .btn-img {
    background-image: url('/ui/flags/belarus.png');
    opacity: .7;
    border-radius: 3px;
}

#root .profile-info_views.profile-country.ukraine .btn-img {
    background-image: url('/ui/flags/ukraine.png');
    opacity: .7;
    border-radius: 3px;
}

#root .profile-info_views.profile-country.china .btn-img {
    background-image: url('/ui/flags/china.png');
    opacity: .7;
    border-radius: 3px;
}

#root .profile-info_views.profile-country.other {
    display: none;
}

.profile-info_views-box, .set-info_meta-box {
    position: absolute;
    bottom: 0;
    right: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translateY(50%);
    max-width: calc(100% - 30px);
}

.profile-info_views, .set-info_meta-item {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    border-radius: 9px;
    padding: 8px 8px;
    /* height: 32px; */
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: #fff;
    color: #0a0a0a;
    font-size: 12px;
    cursor: help;
    text-align: center;
}

#dark .profile-info_views, #dark .set-info_meta-item {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    background-color: #232025;
    color: #B4BFCB;
}

.profile-info_views .btn-img, .set-info_meta-item .btn-img {
    width: 16px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
    flex-shrink: 0;
    background-image: url('/ui/view.svg');
    opacity: 1;
}

#dark .profile-info_views .btn-img, #dark .set-info_meta-item .btn-img {
    opacity: .25;
}

.profile-info_views.uq-views .btn-img {
    width: 16px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px;
    flex-shrink: 0;
    background-image: url('/ui/user-icon.svg');
}

.profile-info_date .btn-img {
    width: 16px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
    flex-shrink: 0;
    background-image: url('/ui/calendar.svg');
    opacity: 1;
}




.h3-link {
    cursor: pointer;
    opacity: .5;
}

.h3-link.active {
    opacity: 1;
    pointer-events: none;
}
.h3-link:hover {
    opacity: .8;
}
/* input::-webkit-calendar-picker-indicator {
    opacity: 0;
    display: none;
} */

.set-cell {

}

.set_item {
    background: #292b2d;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    position: relative;
}

.set-preview {
    position: relative;
}

.set-preview .set-tags {
    position: absolute;
    /* top: 13px; */
    right: 14px;
    display: inline-flex;
    max-width: calc(100% - 24px);
    /* flex-direction: column; */
    align-items: end;
    gap: 8px;
    z-index: 1;
}

.set-tags_item {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    height: 26px;
    border-radius: 7px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), 0 3px 9px 0 rgb(85 85 85 / 52%);
    background: #373737;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    backdrop-filter: blur(5px);
    cursor: help;
}

.set-tags_item.orange {
    box-shadow: inset 0 0 0 1px rgb(255 106 0 / 19%);
    background: #ff60003b;
    color: #ff5e00;
}

.set-tags_item.red {
    box-shadow: inset 0 0 0 1px rgb(255 0 0 / 19%);
    background: #ff000021;
    color: #ff2a2a;
}

.set-tags_item.purple {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
    background: linear-gradient(135deg, #4fa0ff 0%, #524fff 33.33%, #b338ff 81.77%);
    color: #fff;
    position: relative;
}

.set-tags_item.purple.out-of-stock {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
    background: #35353582;
    opacity: 0.4;
    color: #fff;
    position: relative;
}

.set-tags_item.green {
    box-shadow: inset 0 0 0 1px rgb(41 137 24 / 19%);
    background: #39c51f26;
    color: #48c320;
}

.set-tags_item.market-icon {
    width: 26px;
    box-sizing: border-box;
}
.set-tags_item.market-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/ui/market-icon.svg');
    background-position: center;
    background-repeat: no-repeat;
}

.set_picture-box {
    aspect-ratio: 1 / 1;
    width: calc(100% - 16px);
    background-image: url(/img/sets/default.svg);
    background-size: contain;
    margin: 8px;
    margin-bottom: 0;
    border-radius: 9px;
}

.set_picture {
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 9px;
    color: transparent;
}

.set_release-date {
    position: absolute;
    bottom: 0;
    right: 50%;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    background-color: #fff;
    border-radius: 6px;
    padding: 4px 8px 6px 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    background-color: #292A2D;
    white-space: nowrap;
    transform: translate(50%, 50%);
    color: #ADADAD;
}

.set_release-date span {
    color: #fff;
}

.set-data {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

#root .set_item .set-data_name, #root .set_item .set-info_name {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    ячы-webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
    text-align: center;
    text-decoration: none;
}

.set-info_name {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: normal;
    overflow: hidden;
}

.set-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    touch-action: none;
    visibility: hidden;
    backdrop-filter: blur(24px);
    background: rgba(24, 24, 24, 0.89);
    transition: .2s;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
    overflow: auto;
}

.set-hover::after {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.set-hover::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.set-hover_box {
    padding: 34px 16px 24px;
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
}

.set-cell:hover .set-hover {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}

.set-cell:hover .set-hover::before {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

.set-info_text {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #fff;
    margin-top: 6px;
    font-size: 11px;
    opacity: .5;
    font-weight: 400;
}

.set-info_buttons {
    display: grid;
    grid-template-columns: 1fr auto;
    /* grid-template-columns: 1fr; */
    grid-template-areas: 'cl cl';
    gap: 10px;
    margin-top: 12px;
}

.set-info_button {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 9px;
    padding: 12px 6px;
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    transition: .15s;
    cursor: pointer;
    white-space: nowrap; /* Текст не переносится */
    overflow: hidden; /* Обрезаем всё за пределами блока */
    text-overflow: ellipsis;
}

.set-cell:hover .set-info_button  {
}

/* .set-info_button .wrap {
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
} */

.set-info_button.cl {
    grid-area: cl;    
}

.set-info_button.purple {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #4fa0ff 0%, #524fff 33.33%, #b338ff 81.77%); 
}

.set-info_button .btn-img {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: middle;
    display: inline-block;
    background-image: url(/ui/market-icon.svg);
    background-repeat: no-repeat;
    background-position: center center;
}

.set-info_button.purple.out-of-stock {
    background-image: unset;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.set-info_button.disabled {
    background: transparent;
    opacity: .2;
    cursor: default;
}

.set-info_button.info-icon {
    width: 38px;
    background-image: url('/ui/info-icon.svg');
    background-position: center;
    background-repeat: no-repeat;
    padding: 0;
}

#dark .set-info_button {
    color: #fff;
}

@keyframes ssr {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(60deg) sepia(1);
    }
}
@keyframes fade {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

@media screen and (max-width: 1359px) {
    main {
        padding-bottom: 45px;
        padding-top: 156px;
    }

    .cards-footer {
        margin-bottom: 16px;
    }

    .container {
        max-width: 860px;
    }
    .cards-frame {
        grid-template-columns: repeat(3, 1fr);
    }
    .progress-frame {
        grid-template-columns: repeat(3, 1fr);
    }
    .cards-frame.small {
        grid-template-columns: repeat(6, 1fr);
    }

    .sets-frame {
        grid-template-columns: repeat(4, 1fr);
    }

    .serieses-frame {
        grid-template-columns: repeat(3, 1fr);
    }

    .filter-box {
        flex-wrap: wrap;
        height: unset;
    }

    .filter_item {
        height: 46px;
        width: unset;
    }

    main {
        padding-top: 90px;
    }

    .header {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            'logo auth'
            'nav nav';
        grid-gap: 24px;
        padding: 24px 0;
        height: unset;
        display: none;
    }

    .header .header_nav {
        justify-content: space-between;
    }

    .header .header_auth {
        /* flex-grow: 1; */
        justify-content: end;
    }
    .main-page.container {
        display: grid;
        grid-template-columns: 100%;
        grid-template-areas:
            "series"
            "news"
            "side";
        gap: 60px;
    }
    
    .series-page.container {
        display: grid;
        grid-template-columns: 100%;
        grid-template-areas:
            "side"
            "news";
        gap: 60px;
    }

    .series-item {
        box-shadow: 0 0 0 1px rgba(137, 137, 137, 0.15);
        border-radius: 12px;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        width: 100%;
        overflow: hidden;
        text-decoration: none;
        position: relative;
        gap: 0;
        aspect-ratio: 45 / 30;
    }

    .series-image {
        width: 100%;
        height: unset;
        object-fit: cover;
        aspect-ratio: 45 / 30;
    }
    
    .series-grid {
        display: grid;
        gap: 20px;
        align-items: start;
        justify-items: stretch;
        grid-template-columns: repeat(5, 1fr);
    }
    
    .series-frame {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 85px 8px 8px;
        background-image: linear-gradient(0deg, #fffffff7 30%, #1e1f2100 100%);
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: end;
        box-sizing: border-box;
    }

    #dark .series-frame {
        background-image: linear-gradient(0deg, #1e1f21cf 30%, #1e1f2100 100%);
    }

    .sets-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .series-container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .side-frame.all-sets {
        max-height: 300px;
        overflow: auto;
        padding: 2px 10px 2px 2px;
    }

    .cardlist-frame {
        margin: -30px -30px 0;
        max-height: calc(100vh - 270px);
    }

    .cardlist_box {
        border-radius: 0;
    }
    
    .profiles-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .profile-item {
        padding: 20px 16px;
        gap: 15px;
    }

    .profile-header_frame, .set-header_frame {
        flex-direction: column;
        align-items: start;
        gap: 32px;
    }

    .profile-header_frame.poster {
        /* padding-top: 76px; */
        align-items: start;
    }

    .collections-switcher_box .spacer {
        flex-grow: 999999;
    }

    .collections-switcher_box .spacer .collection-link {
        flex-grow: 0;
    }

    .collection-link {
        flex-grow: 1;
    }

    .mini-series-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .cardlist-frame.big {
        width: unset;
    }

    .mobile-header, .mobile-header_social {
        display: block;
    }
}

@media screen and (max-width: 767px) {

    .profile-header_frame.poster {
        padding-top: 186px;
        height: unset;
    }

    .profile-info_views-box, .set-info_meta-box {
        width: 100%;
        justify-content: center;
    }

    #root .lesson-box, #root .gatcha-box, #root .alert-box {
        padding: 18px;
        gap: 18px;
    }

    .modal-buttons .big-button {
        padding: 14px 18px;
    }

    .modal-frame hr {
        margin: 0;
    }

    .users-box_item {
        padding: 14px;
    }

    .lesson_title {
        font-size: 16px;
    }

    .modal-title {
        padding: 18px;
    }
    /* body {
        min-width: 480px;
    } */
    .container {
        /* width: 480px; */
        max-width: 390px;
        min-width: 340px;
    }
    .cards-frame {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .progress-frame {
        grid-template-columns: repeat(1, 1fr);
    }

    .sets-frame {
        grid-template-columns: repeat(2, 1fr);
    }

    .serieses-frame {
        grid-template-columns: repeat(1, 1fr);
    }
    .series-box {
        grid-template-columns: 1fr;
    }
    .series-info {
        padding: 20px 30px;
    }

    .series-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .mini-series-grid {
        grid-template-columns: repeat(3, 1fr);
        max-height: 176px; /* 3 ряда: 52px * 3 + 10px gap * 2 */
    }

    .mini-series-toggle {
        grid-row: 3;
    }

    .series-company  {
        font-size: 11px;
        line-height: 100%;
        color: #838383;
    }

    .series-title {
        font-size: 12px;
        line-height: auto;
    }

    .series-frame {
        padding: 85px 6px 8px !important;
    }
    
    .filter-box {
        flex-direction: column;
        height: unset;
    }

    .filter_item {
        height: 46px;
    }
    
    .sets-header {
        flex-direction: column;
        gap: 16px;
    }
    
    

    .head-info, .head-info_box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .head-info_box {
        gap: 8px;
    }

    .head-info {
        gap: 16px;
    }

    .header_nav {
        border-left: none;
        margin: 0;
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        gap: 12px;
        padding: 0 0 24px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .header_auth__button {
        flex-grow: 1;
    }

    .header_auth {
        justify-content: center;
    }

    .nav-link {
        padding: 16px 16px;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        border-radius: 9px;
        box-shadow: 0 0 0 1px rgb(139 139 139 / 18%);
    }
    .nav-link.active:not(.acc) {
        box-shadow: 0 0 0 1px rgba(177, 60, 255, 0.235);
    }
    .nav-link.active:not(.acc)::after {
        content: none;
    }
    .nav-link.acc {
        padding: 16px;
        border-radius: 9px;
        margin: 0;
    }

    .cards-footer {
        flex-direction: column-reverse;
    }

    .cards-footer_container {
        flex-direction: column-reverse;
        gap: 0;
    }

    .pagination {
        gap: 8px;
    }
    .pagination .page-item {
        border-radius: 0;
    }
    .pagination .page-item:first-child {
        border-radius: 6px 0 0 6px;
    }
    .pagination .page-item:last-child {
        border-radius: 0 6px 6px 0;
    }
    
    .edit-description {
        align-items: center;
    }

    .big-button.collection-link {
        width: 100%;
        justify-content: center;
    }

    .head-info.outlined {
        background-image: none !important;
    }

    .head-info.outlined .banner {
        display: none;
    }

    .news-article {
        grid-template-columns: 1fr;
    }

    .news-image-box {
        border-right: none;
        border-bottom: 1px solid rgba(137, 137, 137, 0.15);
        height: 200px;
    }

    .sets-container, .series-container {
        display: grid;
        grid-template-columns: 1fr;
    }

    .profile-reactions-box {
        display: flex;
        justify-content: center;
    }
    
    .filter-box {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .cards-frame {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 12px;
        grid-row-gap: 32px
    }

    .cards-frame.small {
        grid-template-columns: repeat(4, 1fr);
    }

    .set-box, .cardlist-box {
        border-radius: 12px;
    }

    .set-picture img {
        border-radius: 12px 12px 0 0;
    }

    

    .profile-avatar img {
        width: 128px;
        height: 128px;
    }


    .profiles-page.container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "side"
            "main";
    }

    .profile-info_sub-buttons, .set-info_sub-buttons {
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .profile-header_main, .set-header_main {
        flex-direction: column;
        text-align: center;
        padding-top: 20px;
    }

    .profile-info_avatar {
        width: 100px;
        height: 100px;
    }

    .profile-info_avatar::after {
        width: 20px;
        height: 20px;
    }

    .profile-info_collection-description, .set-info_description {
        flex-direction: column-reverse;
    }

    .collections-switcher_box {
        justify-content: center;
    }

    .profile-header_frame, .set-header_frame {
        align-items: center;
    }

    .cardlist-frame.big {
        width: 100%;
    }

    .header-box {
        gap: 12px;
    }

    .header_user {
        padding-right: 10px;
        padding-left: 14px;
    }

    main {
        padding-top: 144px;
    }

    /* 

    

    

    .card_handlers {
        flex-direction: column-reverse;
        height: unset;
        padding: 9px;
        gap: 9px;
        border-radius: 6px;
    }

    .card_handlers::before {
        border-radius: 9px;
    }

    .card_handlers_btn {
        width: 28px;
        height: 28px;
    }

    .card-preinfo {
        padding: 6px 12px;
    }

    .card-info-name, .set-info-name {
        font-size: 16px;
    }

    .card-info-series {
        font-size: 12px;
        margin-top: 0;
    }

    .card-subinfo, .set-subinfo {
        padding: 8px 8px 10px;
    }

    .card-info-set {
        font-size: 12px;
    }

    .card-info-number {
        font-size: 14px;
    }

    .card-info-rarity {
        padding: 6px 8px 4px;
        font-size: 14px;
        height: unset;
    }
    .card-info-rarity::after {
        border-radius: 9px;
    }

    .card-info-number {
        width: unset;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 0;
        padding: 2px 6px;
        border-radius: 6px;
        background: #535353de;
        z-index: 1;
    }



    .head-info.outlined {
        padding: 24px;
    }

    h1 {
        font-size: 22px;
    }

    p {
        color: rgb(136, 136, 136);
        font-size: 14px;
    }

    h2 {
        font-size: 20px;
        font-weight: 600;
    }

    /* .head-info h1, .head-info p {
        text-align: left;
    }

    .big-button {
        min-height: 50px;
        font-size: 16px;
        padding: 16px 17px;
    }

    .set-status {
        top: 12px;
        right: 12px;
        padding: 6px 9px;
        border-radius: 6px;
        font-size: 12px;
    }

    .set-picture img {
        border-radius: 9px 9px 0 0;
    }

    .set-info {
        padding-top: 11px;
    }

    .set-subinfo {
        flex-direction: column;
    }

    .set-button.purple-btn, #dark .set-button.purple-btn {
        border-radius: 9px 9px 0 0;
        width: 100%;
    }

    .set-button.purple-btn ~ .set-button {
        border-radius: 0 0 9px 9px;
    }

    .set-date {
        font-size: 12px;
        margin-bottom: 10px;
        padding: 0 12px;
    }
    
    

    .set-button {
        width: 100%;
        font-size: 14px;
        height: 39px;
    }


    .set-pic_frame {
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .set-pic {
        transform: scale(.8);
    }

    .sets-frame .card-subinfo {
        padding: 10px 10px 12px;
        gap: 10px;
        flex-direction: column;
    }

    .sets-frame.card-info-set {
        font-size: 14px;
    } */
}



.skeleton {
    position: relative;
}

.skeleton::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    animation: skeleton-loader-shimmer 1.3s linear infinite forwards;
    background-color: #eee;
    background-image: linear-gradient(to right, #eeeeee00 0%, #cccccc36 40%, #dddddd40 80%, #eeeeee00 100%);
    background-repeat: no-repeat;
    background-size: 468px 104px;
    border-radius: 3px;
    z-index: 1;
}

#dark .skeleton::after {
    background-color: #36383b;
}

@keyframes skeleton-loader-shimmer {
    0% {
        background-position: -468px 0;
    }

    100% {
        background-position: 468px 0;
    }
}

@keyframes pic-loading {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

@keyframes pulse {
    0%{transform: scale(.5); opacity: 0;}
    40%{opacity: .1}
    50%, 100%{transform: scale(1); opacity: 0}
}

@keyframes trs {
    0%{transform: scale(1.1) rotate(8deg);}
    100%{transform: scale(1);}
}

@keyframes loading {
    0%{opacity: .5;}
    50%{opacity: .8;}
    100%{opacity: .5;}
}

.sets-move {
  transition: all .5s ease-in-out;
}
.sets-enter-active,
.sets-leave-active {
  transition: all 1s ease, opacity .2s;
}

.sets-enter-from,
.sets-leave-to {
  opacity: 0;
  transform: scale(.9);
}

/* ensure leaving items are taken out of layout flow so that moving
   animations can be calculated correctly. */
.sets-leave-active {
  position: absolute;
}


.hidden {
  display: none !important;
}

.offline-indicator {
  display: none;
  background-color: #f8d7da;
  color: #721c24;
  padding: 8px 16px;
  text-align: center;
}

body.offline .offline-indicator {
  display: block;
}

/* Custom Install Guide Modal */
.install-modal {
  padding: 0;
}

.install-modal-container {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border-radius: 20px;
  width: min(95vw, 900px);
  max-height: 90vh;
  overflow: hidden;
  position: relative;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Header Section */
  .install-modal-header {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  padding: 30px;
  position: relative;
  overflow: hidden;
  }

  .install-modal-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(255,255,255,0.05) 0%, transparent 50%);
  pointer-events: none;
  }

  .install-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  }

  .install-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
  }

  .install-modal-logo {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
  }

  .install-app-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  }

  .install-modal-title h1 {
  color: white;
  font-size: 2.5rem;
  margin: 0;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }

  .install-modal-title p {
  color: rgba(255, 255, 255, 0.9);
  margin: 5px 0 0 0;
  font-size: 1.1rem;
  opacity: 0.9;
  }

  .install-features {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  }

  .feature {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  font-weight: 500;
  opacity: 0.9;
  }

  .feature-icon {
  font-size: 1.2rem;
  }

  /* Content Section */
  .install-modal-content {
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
  }

  /* Desktop QR Code Section */
  .desktop-qr-section {
  display: none;
  padding: 40px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .qr-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  }

  .qr-placeholder {
  width: 180px;
  height: 180px;
  background: white;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  }

  .qr-code-placeholder {
  background: #333;
  color: white;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 2rem;
  font-weight: bold;
  }

  .qr-info h3 {
  color: white;
  font-size: 1.5rem;
  margin: 0 0 10px 0;
  }

  .qr-info p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  }

  /* Tabs Container */
  .install-tabs-container {
  padding: 40px;
  }

  .install-tab-buttons {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
  justify-content: center;
  }

  .install-tab-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  min-width: 140px;
  }

  .install-tab-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  }

  .install-tab-btn.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-color: #6366f1;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
  }

  .tab-icon {
  display: block;
  font-size: 2rem;
  margin-bottom: 10px;
  }

  .tab-title {
  display: block;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 5px;
  }

  .tab-subtitle {
  display: block;
  font-size: 0.9rem;
  opacity: 0.8;
  }

  /* Tab Content */
  .install-tab-panel {
  display: none;
  }

  .install-tab-panel.active {
  display: block;
  }

  .install-guide-header {
  text-align: center;
  margin-bottom: 40px;
  }

  .install-guide-header h2 {
  color: white;
  font-size: 2rem;
  margin: 0 0 10px 0;
  font-weight: 700;
  }

  .guide-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
  margin: 0;
  }

  /* Installation Steps */
  .install-steps {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 40px;
  }

  .install-step {
  display: flex;
  gap: 25px;
  align-items: flex-start;
  }

  .step-number {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
  }

  .step-content {
  display: flex;
  gap: 25px;
  align-items: flex-start;
  flex: 1;
  }

  .step-screenshot-placeholder {
  background: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  width: 160px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  flex-shrink: 0;
  }

  .step-screenshot-placeholder span {
  font-weight: 600;
  margin-bottom: 5px;
  }

  .step-screenshot-placeholder small {
  font-size: 0.8rem;
  opacity: 0.7;
  }

  .step-text {
  flex: 1;
  }

  .step-text h3 {
  color: white;
  font-size: 1.3rem;
  margin: 0 0 10px 0;
  font-weight: 600;
  }

  .step-text p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0 0 15px 0;
  }

  .download-apk-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  padding: 12px 25px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
  }

  .download-apk-btn:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
  color: white;
  }

  /* Benefits Section */
  .install-benefits {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 15px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  }

  .benefit-icon {
  font-size: 1.5rem;
  margin-top: 2px;
  }

  .benefit-item strong {
  color: white;
  display: block;
  margin-bottom: 5px;
  font-size: 1rem;
  }

  .benefit-item p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.5;
  }

  /* Warning Section */
  .install-warning {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  background: rgba(245, 101, 101, 0.1);
  border: 1px solid rgba(245, 101, 101, 0.3);
  border-radius: 15px;
  padding: 20px;
  }

  .warning-icon {
  font-size: 1.5rem;
  margin-top: 2px;
  }

  .install-warning strong {
  color: #f56565;
  display: block;
  margin-bottom: 5px;
  }

  .install-warning p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  line-height: 1.5;
  }

  /* Desktop Responsive */
  @media (min-width: 1024px) {
  .desktop-qr-section {
    display: block;
  }

  .install-modal-container {
    width: 900px;
  }

  .install-tab-buttons {
    gap: 30px;
  }

  .install-tab-btn {
    min-width: 160px;
    padding: 25px 35px;
  }
  }

  /* Tablet Responsive */
  @media (max-width: 768px) {
  .install-modal-container {
    width: 95vw;
    margin: 20px;
    border-radius: 15px;
  }

  .install-modal-header {
    padding: 25px 20px;
  }

  .install-modal-title h1 {
    font-size: 2rem;
  }

  .install-features {
    gap: 20px;
  }

  .install-tabs-container {
    padding: 25px 20px;
  }

  .install-tab-buttons {
    flex-direction: column;
    gap: 15px;
  }

  .install-tab-btn {
    min-width: auto;
    width: 100%;
  }

  .step-content {
    flex-direction: column;
    gap: 15px;
  }

  .step-screenshot-placeholder {
    width: 100%;
    height: 100px;
  }

  .install-guide-header h2 {
    font-size: 1.5rem;
  }
  }

  /* Mobile Responsive */
  @media (max-width: 480px) {
  .install-modal-container {
    width: 100vw;
    height: 100vh;
    margin: 0;
    border-radius: 0;
    max-height: none;
  }

  .install-modal-content {
    max-height: calc(100vh - 250px);
  }

  .install-modal-header {
    padding: 20px 15px;
  }

  .install-modal-logo {
    gap: 15px;
  }

  .install-app-icon {
    width: 60px;
    height: 60px;
  }

  .install-modal-title h1 {
    font-size: 1.6rem;
  }

  .install-features {
    gap: 15px;
    font-size: 0.9rem;
  }

  .install-tabs-container {
    padding: 20px 15px;
  }

  .install-step {
    flex-direction: column;
    gap: 15px;
  }

  .step-number {
    align-self: flex-start;
  }

  .step-content {
    margin-left: 0;
  }
  }

  /* Dark Theme Support */
  #dark .install-modal-container {
  background: linear-gradient(135deg, #111111 0%, #1f1f1f 100%);
  border-color: rgba(255, 255, 255, 0.05);
  }

  #dark .desktop-qr-section {
  background: rgba(255, 255, 255, 0.01);
  }

  #dark .install-tab-btn {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.05);
  }

  #dark .install-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  }


/* ============================================================================
   Knowledge Base (db.ejs) - Персонажи и Тайтлы
   ============================================================================ */

/* Вкладки */
.db-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  border-bottom: 1px solid #e1e1e1;
  padding-bottom: 16px;
}

#dark .db-tabs {
  border-color: rgba(255, 255, 255, 0.1);
}

.db-tab-btn {
  padding: 10px 20px;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #888;
  border-bottom: 2px solid transparent;
  transition: 0.2s;
  font-weight: 500;
  font-family: 'Rubik', sans-serif;
}

.db-tab-btn:hover {
  color: #4FA0FF;
}

.db-tab-btn.active {
  color: #4FA0FF;
  border-color: #4FA0FF;
}

#dark .db-tab-btn {
  color: #888;
}

#dark .db-tab-btn:hover,
#dark .db-tab-btn.active {
  color: #6199ff;
  border-color: #6199ff;
}

/* Раздел контента */
.db-section {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Контролы поиска и фильтрации */
.db-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.db-search {
  flex: 1;
  min-width: 200px;
  padding: 10px 16px;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Rubik', sans-serif;
  background: #fff;
  color: #000;
  transition: 0.2s;
}

#dark .db-search {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.db-search:focus {
  outline: none;
  border-color: #4FA0FF;
  box-shadow: 0 0 0 3px rgba(79, 160, 255, 0.1);
}

#dark .db-search:focus {
  border-color: #6199ff;
  box-shadow: 0 0 0 3px rgba(97, 153, 255, 0.15);
}

.db-filter {
  padding: 10px 16px;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Rubik', sans-serif;
  background: #fff;
  color: #000;
  cursor: pointer;
  transition: 0.2s;
}

#dark .db-filter {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.db-filter:hover {
  border-color: #4FA0FF;
}

/* Сетка элементов */
.db-grid {
  display: grid;
  gap: 20px;
  margin-bottom: 32px;
}

.characters-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.titles-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

@media (max-width: 768px) {
  .characters-grid,
  .titles-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
  }
}

/* Карточка персонажа */
.character-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: 0.2s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

#dark .character-card {
  background: #2B2C30;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.character-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

#dark .character-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

.character-img-box {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#dark .character-img-box {
  background: linear-gradient(135deg, #3a3a40 0%, #2a2a30 100%);
}

.character-img-link {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.character-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 600;
  color: #999;
  background: rgba(0, 0, 0, 0.05);
}

#dark .character-placeholder {
  color: #666;
  background: rgba(0, 0, 0, 0.2);
}

.character-info {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.character-name {
  text-decoration: none;
  color: #000;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  transition: 0.2s;
}

#dark .character-name {
  color: #fff;
}

.character-name:hover {
  color: #4FA0FF;
}

#dark .character-name:hover {
  color: #6199ff;
}

.name-en {
  display: block;
}

.name-ru {
  display: block;
  font-size: 13px;
  color: #999;
  font-weight: 400;
  margin-top: 4px;
}

#dark .name-ru {
  color: #aaa;
}

.character-title-tag {
  display: inline-block;
}

.title-link {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(79, 160, 255, 0.1);
  color: #4FA0FF;
  border-radius: 4px;
  font-size: 12px;
  text-decoration: none;
  transition: 0.2s;
}

#dark .title-link {
  background: rgba(97, 153, 255, 0.15);
  color: #6199ff;
}

.title-link:hover {
  background: rgba(79, 160, 255, 0.2);
}

#dark .title-link:hover {
  background: rgba(97, 153, 255, 0.25);
}

.character-stats {
  display: flex;
  gap: 12px;
  font-size: 13px;
  padding: 8px 0;
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
}

#dark .character-stats {
  border-color: rgba(255, 255, 255, 0.1);
}

.stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  color: #999;
  font-size: 12px;
}

#dark .stat-label {
  color: #aaa;
}

.stat-value {
  color: #000;
  font-weight: 600;
  font-size: 14px;
}

#dark .stat-value {
  color: #fff;
}

.character-reaction-btn {
  padding: 8px 12px;
  border: 1px solid #e1e1e1;
  border-radius: 6px;
  background: #fff;
  color: #666;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: 0.2s;
  font-family: 'Rubik', sans-serif;
}

#dark .character-reaction-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #aaa;
}

.character-reaction-btn:hover {
  background: #f5f5f5;
  border-color: #4FA0FF;
  color: #4FA0FF;
}

#dark .character-reaction-btn:hover {
  background: rgba(97, 153, 255, 0.15);
  border-color: #6199ff;
  color: #6199ff;
}

.character-reaction-btn.has-like {
  background: rgba(79, 160, 255, 0.1);
  border-color: #4FA0FF;
  color: #4FA0FF;
}

#dark .character-reaction-btn.has-like {
  background: rgba(97, 153, 255, 0.2);
  border-color: #6199ff;
  color: #6199ff;
}

/* Карточка тайтла */
.title-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: 0.2s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#dark .title-card {
  background: #2B2C30;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.title-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

#dark .title-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

.title-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.title-header {
  border-bottom: 1px solid #e1e1e1;
  padding-bottom: 12px;
}

#dark .title-header {
  border-color: rgba(255, 255, 255, 0.1);
}

.title-names {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.title-en {
  font-weight: 600;
  font-size: 16px;
  color: #000;
}

#dark .title-en {
  color: #fff;
}

.title-ru {
  font-size: 13px;
  color: #999;
  font-weight: 400;
}

#dark .title-ru {
  color: #aaa;
}

.title-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.title-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.stat-icon {
  font-size: 16px;
  min-width: 20px;
}

.stat-label {
  color: #999;
  min-width: 80px;
}

#dark .stat-label {
  color: #aaa;
}

.stat-value {
  color: #000;
  font-weight: 600;
  margin-left: auto;
}

#dark .stat-value {
  color: #fff;
}

.title-reaction-btn {
  padding: 10px 12px;
  border: 1px solid #e1e1e1;
  border-radius: 6px;
  background: #fff;
  color: #666;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: 0.2s;
  font-family: 'Rubik', sans-serif;
  width: 100%;
  text-align: center;
}

#dark .title-reaction-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #aaa;
}

.title-reaction-btn:hover {
  background: #f5f5f5;
  border-color: #4FA0FF;
  color: #4FA0FF;
}

#dark .title-reaction-btn:hover {
  background: rgba(97, 153, 255, 0.15);
  border-color: #6199ff;
  color: #6199ff;
}

.title-reaction-btn.has-like {
  background: rgba(79, 160, 255, 0.1);
  border-color: #4FA0FF;
  color: #4FA0FF;
}

#dark .title-reaction-btn.has-like {
  background: rgba(97, 153, 255, 0.2);
  border-color: #6199ff;
  color: #6199ff;
}

/* Модальное окно */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease-in-out;
}

.modal-content {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease-out;
}

#dark .modal-content {
  background: #2B2C30;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #e1e1e1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

#dark .modal-header {
  border-color: rgba(255, 255, 255, 0.1);
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
  color: #000;
  font-weight: 600;
}

#dark .modal-header h2 {
  color: #fff;
}

.modal-subtitle {
  display: block;
  font-size: 13px;
  color: #999;
  font-weight: 400;
  margin-top: 4px;
}

#dark .modal-subtitle {
  color: #aaa;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  transition: 0.2s;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: #000;
}

#dark .modal-close:hover {
  color: #fff;
}

.modal-characters-grid {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
}

.modal-character-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  padding: 12px;
  border-radius: 8px;
  background: #f5f5f5;
  transition: 0.2s;
  text-align: center;
}

#dark .modal-character-item {
  background: rgba(255, 255, 255, 0.05);
}

.modal-character-item:hover {
  background: #e8e8e8;
  transform: translateY(-2px);
}

#dark .modal-character-item:hover {
  background: rgba(97, 153, 255, 0.15);
  transform: translateY(-2px);
}

.modal-char-placeholder {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ddd 0%, #ccc 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 600;
  color: #999;
  margin: 0 auto;
}

#dark .modal-char-placeholder {
  background: linear-gradient(135deg, #4a4a50 0%, #3a3a40 100%);
  color: #666;
}

.modal-char-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.modal-char-en {
  font-size: 12px;
  font-weight: 600;
  color: #000;
}

#dark .modal-char-en {
  color: #fff;
}

.modal-char-ru {
  font-size: 11px;
  color: #999;
  font-weight: 400;
}

#dark .modal-char-ru {
  color: #aaa;
}

.modal-char-count {
  font-size: 11px;
  color: #999;
}

#dark .modal-char-count {
  color: #aaa;
}

/* Пустое состояние */
.db-empty {
  padding: 60px 20px;
  text-align: center;
  color: #999;
  font-size: 16px;
}

#dark .db-empty {
  color: #aaa;
}

/* Пагинация */
.db-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
  padding: 24px 20px;
  background: #f5f5f5;
  border-radius: 12px;
  flex-wrap: wrap;
}

#dark .db-pagination {
  background: rgba(255, 255, 255, 0.05);
}

.db-pagination-btn {
  padding: 10px 20px;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  background: #fff;
  color: #000;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: 0.2s;
  font-family: 'Rubik', sans-serif;
}

#dark .db-pagination-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.db-pagination-btn:hover:not(:disabled) {
  background: #4FA0FF;
  border-color: #4FA0FF;
  color: #fff;
}

#dark .db-pagination-btn:hover:not(:disabled) {
  background: #6199ff;
  border-color: #6199ff;
  color: #fff;
}

.db-pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.db-pagination-info {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

#dark .db-pagination-info {
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════
   GLASS-MODAL — универсальная Apple-style модалка (auth, edit-profile, ...).
   BEM префикс .gm__. Дочерние модули можно комбинировать: card + form +
   field + btn + msg + и т.д.
   ═══════════════════════════════════════════════════════════════════════ */

.gm {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    /* Открывается через .show() (не top layer — чтобы challenge reCAPTCHA был виден),
       поэтому z-index должен перебивать header (1001) и оверлеи (до 10050),
       но оставаться ниже тостов уведомлений (99999) и iframe капчи (~2e9). */
    z-index: 20000;
    overflow: hidden;
    /* Центрирование карточки по горизонтали и ВЕРТИКАЛИ */
    display: flex;
    align-items: center;
    justify-content: center;
}
.gm::backdrop { display: none; }
.gm:not([open]) { display: none; }
.gm:focus, .gm:focus-visible { outline: none; }

/* Убираем automatic focus-ring при .showModal() (браузер сам фокусит первый
   focusable элемент). Оставляем outline только для keyboard-навигации
   через :focus-visible. */
.gm *:focus:not(:focus-visible) { outline: none; }
.gm__iconbtn:focus-visible,
.gm__tabs-item:focus-visible,
.gm__btn:focus-visible,
.gm__sidebar-item:focus-visible,
.gm__field__action:focus-visible {
    outline: 2px solid rgba(127, 45, 232, 0.55);
    outline-offset: 2px;
}
#dark .gm__iconbtn:focus-visible,
#dark .gm__tabs-item:focus-visible,
#dark .gm__btn:focus-visible,
#dark .gm__sidebar-item:focus-visible,
#dark .gm__field__action:focus-visible {
    outline-color: rgba(179, 129, 255, 0.65);
}

.gm__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(2 2 2 / 89%);
    -webkit-backdrop-filter: blur(60px) saturate(180%);
    backdrop-filter: blur(60px) saturate(180%);
    animation: gm-fade-in .32s cubic-bezier(.16, 1, .3, 1);
    z-index: 1;
}
@keyframes gm-fade-in { from { opacity: 0; } to { opacity: 1; } }

.gm__card {
    position: relative;
    z-index: 2;
    width: min(100% - 32px, 380px);
    margin: 20px 16px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 12px 24px 24px;
    box-sizing: border-box;
    background: rgba(252, 252, 253, 0.86);
    -webkit-backdrop-filter: blur(50px) saturate(180%);
    backdrop-filter: blur(50px) saturate(180%);
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 22px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35),
                0 12px 24px -12px rgba(0, 0, 0, 0.18);
    color: rgb(28, 28, 30);
    -webkit-font-smoothing: antialiased;
    animation: gm-card-in .38s cubic-bezier(.16, 1, .3, 1);
    scrollbar-width: thin;
}
.gm__card::-webkit-scrollbar { width: 8px; }
.gm__card::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
#dark .gm__card::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }
.gm__card--slim { max-width: 340px; }
.gm__card--wide { max-width: 440px; }
.gm__card--xwide { max-width: 640px; }
@keyframes gm-card-in {
    from { opacity: 0; transform: translateY(24px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

#dark .gm__card {
    background: rgba(30, 30, 34, 0.82);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6),
                0 12px 24px -12px rgba(0, 0, 0, 0.4);
}

.gm__topbar {
    display: flex;
    align-items: center;
    height: 40px;
    margin: 0 -8px 4px;
}
.gm__topbar-spacer { flex: 1; }

/* Nav-bar-style заголовок ВНУТРИ topbar (как заголовок iOS-шторки) — для
   насыщенных контентом модалок (списки/секции), где отдельный крупный
   .gm__title + .gm__subtitle центрированной колонкой смотрится "ёлочкой".
   Абсолютное позиционирование держит текст по центру бара независимо от
   ширины левого/правого контента. */
.gm__topbar--titled { position: relative; }
.gm__topbar-title {
    padding-left: 10px;
    font-size: 16px;
    font-weight: 600;
}
#dark .gm__topbar-title { color: #fff; }
.gm__iconbtn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(120, 120, 128, 0.14);
    color: rgba(60, 60, 67, 0.75);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease, transform .1s ease;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
}
.gm__iconbtn:hover { background: rgba(120, 120, 128, 0.22); color: rgb(28, 28, 30); }
.gm__iconbtn:active { transform: scale(.94); }
#dark .gm__iconbtn { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); }
#dark .gm__iconbtn:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

.gm__view { display: flex; flex-direction: column; gap: 14px; }

.gm__title {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin: 4px 0 0;
    text-align: center;
    color: inherit;
}
.gm__subtitle {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    font-size: 14px;
    color: rgba(60, 60, 67, 0.72);
    text-align: center;
    margin: 0 0 8px;
    line-height: 1.4;
}
.gm__subtitle--ok { color: #34C759; }
#dark .gm__subtitle { color: rgba(235, 235, 245, 0.62); }

.gm__form { display: flex; flex-direction: column; gap: 10px; }

.gm__field { position: relative; }
.gm__field input,
.gm__field select {
    width: 100%;
    box-sizing: border-box;
    height: 52px;
    padding: 20px 14px 4px;
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: rgba(120, 120, 128, 0.08);
    color: rgb(28, 28, 30);
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    outline: none;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
    -webkit-appearance: none;
    appearance: none;
    -webkit-text-fill-color: rgb(28, 28, 30);
}
.gm__field input:focus,
.gm__field select:focus {
    border-color: rgba(127, 45, 232, 0.5);
    background: rgba(120, 120, 128, 0.05);
    box-shadow: 0 0 0 3.5px rgba(127, 45, 232, 0.14);
}
.gm__field label {
    position: absolute;
    top: 16px;
    left: 15px;
    right: 15px;
    font-size: 16px;
    color: rgba(60, 60, 67, 0.6);
    pointer-events: none;
    transition: transform .18s ease, color .18s ease;
    transform-origin: 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Если у поля справа inline-кнопка — оставляем место под неё */
.gm__field--with-action label { right: 120px; }
.gm__field input:focus + label,
.gm__field input:not(:placeholder-shown) + label,
.gm__field select:focus + label,
.gm__field select:valid + label {
    transform: translateY(-10px) scale(0.72);
    color: rgba(60, 60, 67, 0.7);
}
.gm__field input:focus + label,
.gm__field select:focus + label {
    color: rgba(127, 45, 232, 0.85);
}
/* Native <option> в dropdown иногда рендерится white-on-white — фиксим явно. */
.gm__field select option {
    color: rgb(28, 28, 30);
    background: #fff;
}
#dark .gm__field select option {
    color: rgba(255, 255, 255, 0.95);
    background: rgb(45, 45, 50);
}

/* Select: стрелка через ::after — надёжнее и без data-URI. */
.gm__field--select { position: relative; }
.gm__field--select select { padding-right: 34px; }
.gm__field--select::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 14px;
    width: 10px;
    height: 6px;
    transform: translateY(-50%);
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M5 6L0 0h10z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M5 6L0 0h10z'/%3E%3C/svg%3E") no-repeat center / contain;
    color: rgba(60, 60, 67, 0.55);
    pointer-events: none;
}
#dark .gm__field--select::after { color: rgba(235, 235, 245, 0.5); }

#dark .gm__field input,
#dark .gm__field select {
    background: #4141473d;
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.95);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.95);
    background-image: linear-gradient(114deg, rgb(68 68 71 / 52%), rgb(76 76 85 / 45%), rgb(109 109 109 / 14%));
}
#dark .gm__field input:focus,
#dark .gm__field select:focus {
    border-color: rgba(179, 129, 255, 0.5);
    background: rgba(118, 118, 128, 0.18);
    box-shadow: 0 0 0 3.5px rgba(179, 129, 255, 0.18);
}
#dark .gm__field label { color: rgba(235, 235, 245, 0.55); }
#dark .gm__field input:focus + label,
#dark .gm__field select:focus + label { color: rgba(179, 129, 255, 0.85); }

/* Autofill (webkit + Яндекс.Браузер) — убираем белую заливку.
   Ключ: inset box-shadow с цветом фона поля перекрывает нативный autofill-фон.
   transition 5555s держит цвет, пока браузер не отпустит autofill-state.
   Также важно `!important` — Яндекс агрессивно перекрашивает. */
.gm__field input:-webkit-autofill,
.gm__field input:-webkit-autofill:hover,
.gm__field input:-webkit-autofill:focus,
.gm__field input:-webkit-autofill:active,
.gm__field input:autofill {
    -webkit-box-shadow: 0 0 0 100px rgba(120, 120, 128, 0.08) inset !important;
    box-shadow: 0 0 0 100px rgba(120, 120, 128, 0.08) inset !important;
    -webkit-text-fill-color: rgb(28, 28, 30) !important;
    caret-color: rgb(28, 28, 30);
    background-color: transparent !important;
    background-image: none !important;
    transition: background-color 5555s ease-in-out 0s, color 5555s ease-in-out 0s !important;
}
#dark .gm__field input:-webkit-autofill,
#dark .gm__field input:-webkit-autofill:hover,
#dark .gm__field input:-webkit-autofill:focus,
#dark .gm__field input:-webkit-autofill:active,
#dark .gm__field input:autofill {
    -webkit-box-shadow: 0 0 0 100px rgba(118, 118, 128, 0.32) inset !important;
    box-shadow: 0 0 0 100px rgba(118, 118, 128, 0.32) inset !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
    caret-color: rgba(255, 255, 255, 0.95);
}
/* На focus — соответствующий focus-цвет фона поля (иначе после autofill остаётся
   светлый фон при клике). */
.gm__field input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px rgba(120, 120, 128, 0.05) inset,
                        0 0 0 3.5px rgba(127, 45, 232, 0.14) !important;
}
#dark .gm__field input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px rgba(118, 118, 128, 0.18) inset,
                        0 0 0 3.5px rgba(179, 129, 255, 0.18) !important;
}

.gm__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.gm__check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 2px 0;
    cursor: pointer;
    user-select: none;
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(60, 60, 67, 0.85);
    position: relative;
}
.gm__check input { position: absolute; opacity: 0; pointer-events: none; }
.gm__check-mark {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1.5px solid rgba(60, 60, 67, 0.25);
    border-radius: 6px;
    background: #fff;
    margin-top: 1px;
    position: relative;
    transition: all .15s ease;
}
.gm__check input:checked + .gm__check-mark {
    background: #7A2DE8;
    border-color: #7A2DE8;
}
.gm__check input:checked + .gm__check-mark::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.gm__check-text a { color: #7A2DE8; text-decoration: none; font-weight: 500; }
.gm__check-text a:hover { text-decoration: underline; }
#dark .gm__check { color: rgba(235, 235, 245, 0.75); }
#dark .gm__check-mark { background: rgba(118, 118, 128, 0.24); border-color: rgba(255, 255, 255, 0.2); }
#dark .gm__check-text a { color: #C68CFF; }

/* Segmented control (radio для reset method) */
.gm__seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 2px;
    background: rgba(120, 120, 128, 0.14);
    border-radius: 10px;
}
.gm__seg-opt {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(60, 60, 67, 0.85);
    cursor: pointer;
    border-radius: 8px;
    transition: all .2s ease;
    user-select: none;
}
.gm__seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.gm__seg-opt--on {
    background: #fff;
    color: rgb(28, 28, 30);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
    font-weight: 600;
}
#dark .gm__seg { background: rgba(118, 118, 128, 0.24); }
#dark .gm__seg-opt { color: rgba(235, 235, 245, 0.75); }
#dark .gm__seg-opt--on {
    background: rgba(99, 99, 102, 0.95);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.gm__captcha {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 78px;
    margin: 2px 0;
    position: relative;
}
.gm__captcha > div:first-child { min-height: 78px; }
.gm__captcha-skeleton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 304px;
    max-width: 100%;
    height: 78px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        rgba(120, 120, 128, 0.10) 0%,
        rgba(120, 120, 128, 0.22) 50%,
        rgba(120, 120, 128, 0.10) 100%
    );
    background-size: 200% 100%;
    animation: gm-shimmer 1.6s ease-in-out infinite;
    border: 0.5px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(60, 60, 67, 0.4);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
}
.gm__captcha-skeleton::after {
    content: "reCAPTCHA";
    text-transform: uppercase;
    letter-spacing: 2px;
}
#dark .gm__captcha-skeleton {
    background: linear-gradient(
        90deg,
        rgba(118, 118, 128, 0.14) 0%,
        rgba(118, 118, 128, 0.28) 50%,
        rgba(118, 118, 128, 0.14) 100%
    );
    background-size: 200% 100%;
    border-color: rgba(255, 255, 255, 0.06);
    color: rgba(235, 235, 245, 0.35);
}
@keyframes gm-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.gm__msg {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
    text-align: center;
    font-weight: 500;
}
.gm__msg--error { background: rgba(255, 59, 48, 0.1);  color: #D70015; }
.gm__msg--success { background: rgba(52, 199, 89, 0.12); color: #248A3D; }
#dark .gm__msg--error   { background: rgba(255, 69, 58, 0.15); color: #FF6961; }
#dark .gm__msg--success { background: rgba(48, 209, 88, 0.15); color: #7CE494; }

.gm__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    cursor: pointer;
    transition: transform .1s ease, opacity .18s, background .18s, box-shadow .18s;
    outline: none;
    text-decoration: none;
    letter-spacing: -0.2px;
    padding: 0 16px;
    -webkit-appearance: none;
    appearance: none;
}
.gm__btn:disabled { opacity: .5; cursor: not-allowed; }
/* Secondary в disabled — гасим до нейтрального читаемого серого. */
.gm__btn--secondary:disabled {
    opacity: 1;
    background: rgba(120, 120, 128, 0.10);
    color: rgba(60, 60, 67, 0.55);
}
#dark .gm__btn--secondary:disabled {
    background: rgba(118, 118, 128, 0.20);
    color: rgba(235, 235, 245, 0.5);
}
/* Ghost в disabled — тоже не должен становиться совсем прозрачным. */
.gm__btn--ghost:disabled { opacity: 1; color: rgba(60, 60, 67, 0.4); }
#dark .gm__btn--ghost:disabled { color: rgba(235, 235, 245, 0.4); }
.gm__btn:not(:disabled):active { transform: scale(0.98); }

.gm__btn--primary {
    background-color: #524FFF;
    background-image: linear-gradient(98.17deg, #4FA0FF 4%, transparent 40%, #B338FF 93%);
    color: #fff;
    box-shadow: 0 0 0 1px rgb(217 182 255 / 41%) inset, 0 8px 16px -4px rgb(40 69 94 / 45%);
    min-height: 46px;

    transition: .2s;
}
.gm__btn--primary:hover:not(:disabled) {
    background-color: #37a3f0;
    box-shadow: 0 0 0 1px rgb(217 182 255 / 41%) inset, 0 8px 58px -4px rgb(132 92 255 / 54%);
}

.gm__btn--tg {
    background: rgba(52, 152, 219, 0.14);
    color: #1D8BC4;
}
.gm__btn--tg:hover:not(:disabled) { background: rgba(52, 152, 219, 0.22); }
.gm__btn--tg svg { flex-shrink: 0; }
#dark .gm__btn--tg { background: rgba(56, 176, 245, 0.18); color: #64B5F6; }
#dark .gm__btn--tg:hover:not(:disabled) { background: rgba(56, 176, 245, 0.26); }

.gm__btn--ghost {
    background: transparent;
    color: rgba(60, 60, 67, 0.65);
    box-shadow: none;
    font-weight: 500;
    box-shadow: inset 0 0 0 1px rgba(60, 60, 67, 0.05);
}
.gm__btn--ghost:hover:not(:disabled) {
    background: rgba(120, 120, 128, 0.1);
    color: rgb(28, 28, 30);
}
#dark .gm__btn--ghost { color: rgba(235, 235, 245, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);}
#dark .gm__btn--ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: #fff; }

.gm__spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: gm-spin .7s linear infinite;
}
@keyframes gm-spin { to { transform: rotate(360deg); } }

.gm__foot {
    text-align: center;
    font-size: 13.5px;
    color: rgba(60, 60, 67, 0.7);
    margin-top: 8px;
    line-height: 1.6;
}
.gm__foot a {
    color: #7A2DE8;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}
.gm__foot a:hover { text-decoration: underline; }
.gm__foot-dot { margin: 0 6px; opacity: .35; }
#dark .gm__foot { color: rgba(235, 235, 245, 0.55); }
#dark .gm__foot a { color: #C68CFF; }

.gm__hint {
    font-size: 14px;
    text-align: center;
    color: rgba(60, 60, 67, 0.7);
    line-height: 1.5;
    margin: 4px 0 12px;
}
#dark .gm__hint { color: rgba(235, 235, 245, 0.6); }

.gm__recov {
    padding: 14px;
    background: rgba(120, 120, 128, 0.08);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gm__recov-title { font-size: 13.5px; font-weight: 600; color: rgb(28, 28, 30); letter-spacing: -0.1px; }
.gm__recov-hint { font-size: 12.5px; color: rgba(60, 60, 67, 0.7); line-height: 1.45; margin-top: -4px; }
#dark .gm__recov { background: rgba(118, 118, 128, 0.16); }
#dark .gm__recov-title { color: #fff; }
#dark .gm__recov-hint { color: rgba(235, 235, 245, 0.55); }

/* Field with inline action button — компактная apple-style pill справа
   внутри поля. Padding-right у input делает место, чтобы текст не наезжал. */
.gm__field--with-action input { padding-right: 140px; }
.gm__field__action {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    height: 34px;
    line-height: 34px;    /* точный вертикальный центр текста */
    padding: 0 14px;
    min-width: 110px;
    border: none;
    border-radius: 8px;
    background: rgba(127, 45, 232, 0.12);
    color: #7A2DE8;
    font-size: 13px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    letter-spacing: -0.1px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .1s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.gm__field__action span { display: inline-flex; align-items: center; line-height: 1; }
.gm__field__action:not(:disabled):hover { background: rgba(127, 45, 232, 0.20); }
.gm__field__action:not(:disabled):active { transform: translateY(-50%) scale(0.96); }
.gm__field__action:disabled {
    cursor: default;
    background: rgba(120, 120, 128, 0.14);
    color: rgba(60, 60, 67, 0.4);
}
.gm__field__action--ok, .gm__field__action--ok:disabled {
    background: rgba(52, 199, 89, 0.16);
    color: #248A3D;
    cursor: default;
}
.gm__field__action--clear {
    background: rgba(120, 120, 128, 0.14);
    color: rgba(60, 60, 67, 0.72);
    min-width: 72px;
}
.gm__field__action--clear:not(:disabled):hover { background: rgba(120, 120, 128, 0.22); }
#dark .gm__field__action--clear {
    background: rgba(118, 118, 128, 0.24);
    color: rgba(235, 235, 245, 0.7);
}
#dark .gm__field__action--clear:not(:disabled):hover { background: rgba(118, 118, 128, 0.34); }
#dark .gm__field__action { background: rgba(179, 129, 255, 0.18); color: #C68CFF; box-shadow: inset 0 0 0 0.5px #c68cff47; }
#dark .gm__field__action:not(:disabled):hover { background: rgba(179, 129, 255, 0.28); }
#dark .gm__field__action:disabled {
    background: rgba(118, 118, 128, 0.20);
    color: rgba(235, 235, 245, 0.4);
}
#dark .gm__field__action--ok, #dark .gm__field__action--ok:disabled {
    background: rgba(48, 209, 88, 0.20);
    color: #7CE494;
    box-shadow: inset 0 0 0 0.5px #8cffa547;
}

/* Inline confirm block — раскрывается под полем в onboarding. */
.gm__inline {
    background: rgba(120, 120, 128, 0.06);
    border: 0.5px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 14px;
    margin: -4px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}
#dark .gm__inline {
    background: rgba(118, 118, 128, 0.10);
    border-color: rgba(255, 255, 255, 0.06);
}
.gm__inline__hint {
    font-size: 13px;
    line-height: 1.45;
    color: rgba(60, 60, 67, 0.75);
}
.gm__inline__hint b { color: rgb(28, 28, 30); }
#dark .gm__inline__hint { color: rgba(235, 235, 245, 0.7); }
#dark .gm__inline__hint b { color: #fff; }
.gm__inline__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.gm__inline__actions .gm__btn { flex: 1; }

/* Compact вариант кнопки — для inline-подтверждений и вспомогательных мест. */
.gm__btn--compact { height: 40px; font-size: 13.5px; border-radius: 11px; }

/* ─── Sections (Apple-style Settings) ─── */
.gm__section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}
.gm__section + .gm__section { margin-top: 20px; }
.gm__section-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(60, 60, 67, 0.55);
    padding: 0 4px 6px;
}
#dark .gm__section-title { color: rgba(235, 235, 245, 0.45); }
.gm__section-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gm__section-footnote {
    font-size: 12px;
    color: rgba(60, 60, 67, 0.55);
    padding: 6px 4px 0;
    line-height: 1.4;
}
#dark .gm__section-footnote { color: rgba(235, 235, 245, 0.45); }

/* ─── List rows (iOS style grouped list) ─── */
.gm__list {
    background: rgba(120, 120, 128, 0.08);
    border-radius: 12px;
    overflow: hidden;
}
#dark .gm__list {
    background: rgba(118, 118, 128, 0.14);
    background-image: linear-gradient(114deg, rgb(68 68 71 / 52%), rgb(0 0 0 / 14%));
}

.gm__list-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
    position: relative;
}
.gm__list-row + .gm__list-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 0.5px;
    background: rgba(60, 60, 67, 0.14);
}
#dark .gm__list-row + .gm__list-row::before { background: rgba(255, 255, 255, 0.08); }

.gm__list-row__label {
    grid-column: 1;
    grid-row: 1;
    font-size: 15px;
    font-weight: 500;
    color: rgb(28, 28, 30);
    letter-spacing: -0.2px;
}
#dark .gm__list-row__label { color: rgba(255, 255, 255, 0.95); }

.gm__list-row__hint {
    grid-column: 1;
    grid-row: 2;
    font-size: 12.5px;
    color: rgba(60, 60, 67, 0.6);
    line-height: 1.35;
    margin-top: 2px;
}
#dark .gm__list-row__hint { color: rgba(235, 235, 245, 0.5); }

/* Заблокированная строка (нет PRO-подписки): полупрозрачная, свитч не кликается.
   Сам PRO-тег видимости не теряет — просто «подкачаешь подписку, разблокируется». */
.gm__list-row--locked { opacity: 0.55; cursor: not-allowed; }
.gm__list-row--locked .gm__switch { pointer-events: none; }

/* Метка со встроенным PRO-тегом: flex-центрирует текст и бейдж по вертикали.
   Правило-миксин: не ломает grid-column/grid-row из базового .gm__list-row__label,
   переопределяет только внутренний layout. */
.gm__list-row__label {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.gm__pro-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    padding: 0 5px;
    background: linear-gradient(120deg, #ff9c21a1 0%, #ff6428c2 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1;
    border-radius: 6px;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgb(255 122 0);
    cursor: pointer;
}
.gm__pro-tag:active { transform: scale(.92); }

/* ─── Редактор соцсетей (external_links) ─── */
.gm__extlinks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gm__extlink {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    gap: 8px;
    align-items: center;
}
.gm__extlink__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(120, 120, 128, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
#dark .gm__extlink__icon { background: rgba(255, 255, 255, 0.08); }
.gm__extlink__icon::before {
    content: '';
    position: absolute;
    inset: 6px;
    background: currentColor;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.gm__extlink--empty  .gm__extlink__icon { color: rgba(60, 60, 67, 0.35); }
#dark .gm__extlink--empty .gm__extlink__icon { color: rgba(255, 255, 255, 0.35); }
.gm__extlink--empty  .gm__extlink__icon::before,
.gm__extlink--unknown .gm__extlink__icon::before {
    /* link-иконка (SVG data URL): скрепка */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.59 13.41a1 1 0 0 1 1.42 0 1 1 0 0 1 0 1.41l-3.18 3.18a3 3 0 1 1-4.24-4.24l3.18-3.18a1 1 0 0 1 1.41 1.41l-3.18 3.18a1 1 0 1 0 1.41 1.42ZM13.41 10.59a1 1 0 0 1-1.42 0 1 1 0 0 1 0-1.41l3.18-3.18a3 3 0 0 1 4.24 4.24l-3.18 3.18a1 1 0 1 1-1.41-1.41l3.18-3.18a1 1 0 1 0-1.41-1.42ZM8.71 15.29a1 1 0 0 1 0-1.41l5.58-5.58a1 1 0 1 1 1.42 1.41l-5.58 5.58a1 1 0 0 1-1.42 0Z"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.59 13.41a1 1 0 0 1 1.42 0 1 1 0 0 1 0 1.41l-3.18 3.18a3 3 0 1 1-4.24-4.24l3.18-3.18a1 1 0 0 1 1.41 1.41l-3.18 3.18a1 1 0 1 0 1.41 1.42ZM13.41 10.59a1 1 0 0 1-1.42 0 1 1 0 0 1 0-1.41l3.18-3.18a3 3 0 0 1 4.24 4.24l-3.18 3.18a1 1 0 1 1-1.41-1.41l3.18-3.18a1 1 0 1 0-1.41-1.42ZM8.71 15.29a1 1 0 0 1 0-1.41l5.58-5.58a1 1 0 1 1 1.42 1.41l-5.58 5.58a1 1 0 0 1-1.42 0Z"/></svg>');
}
.gm__extlink--unknown .gm__extlink__icon {
    background: rgba(255, 179, 0, 0.16);
    color: #E39F00;
}
.gm__extlink--unknown .gm__extlink__icon::before {
    /* alert-triangle */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2 1 21h22L12 2Zm0 6 7.53 13H4.47L12 8Zm-1 4v4h2v-4h-2Zm0 6v2h2v-2h-2Z"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2 1 21h22L12 2Zm0 6 7.53 13H4.47L12 8Zm-1 4v4h2v-4h-2Zm0 6v2h2v-2h-2Z"/></svg>');
}
.gm__extlink--telegram_channel .gm__extlink__icon { color: #2AABEE; }
.gm__extlink--telegram_channel .gm__extlink__icon::before {
    -webkit-mask-image: url('/ui/channel-icon.svg');
            mask-image: url('/ui/channel-icon.svg');
}
.gm__extlink--youtube .gm__extlink__icon { color: #FF0000; }
.gm__extlink--youtube .gm__extlink__icon::before {
    -webkit-mask-image: url('/ui/youtube-icon.svg');
            mask-image: url('/ui/youtube-icon.svg');
}
.gm__extlink--tiktok .gm__extlink__icon { color: #010101; }
#dark .gm__extlink--tiktok .gm__extlink__icon { color: #FFFFFF; }
.gm__extlink--tiktok .gm__extlink__icon::before {
    -webkit-mask-image: url('/ui/tiktok-icon.svg');
            mask-image: url('/ui/tiktok-icon.svg');
}
.gm__extlink--vk .gm__extlink__icon { color: #0077FF; }
.gm__extlink--vk .gm__extlink__icon::before {
    -webkit-mask-image: url('/ui/vk-icon.svg');
            mask-image: url('/ui/vk-icon.svg');
}
.gm__extlink__input {
    height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(60, 60, 67, 0.16);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 14px;
    outline: none;
}
.gm__extlink--unknown .gm__extlink__input { border-color: rgba(255, 179, 0, 0.6); }
.gm__extlink__input:focus { border-color: rgba(0, 122, 255, 0.5); }
#dark .gm__extlink__input { border-color: rgba(255, 255, 255, 0.12); }
.gm__extlink__remove {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 59, 48, 0.12);
    color: #FF3B30;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}
.gm__extlink__remove:hover { background: rgba(255, 59, 48, 0.22); }
.gm__extlink__add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 8px 14px;
    border: 1px dashed rgba(60, 60, 67, 0.25);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}
#dark .gm__extlink__add { border-color: rgba(255, 255, 255, 0.16); }
.gm__extlink__add:hover { background: rgba(120, 120, 128, 0.08); }
.gm__extlink__add-plus {
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

/* ─── iOS-style Switch (toggle) — компактный, с явной сменой цвета ─── */
.gm__switch {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: relative;
    display: inline-block;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
    align-self: center;
}
.gm__switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}
.gm__switch__slider {
    position: absolute;
    inset: 0;
    background: rgba(120, 120, 128, 0.32);
    border-radius: 26px;
    transition: background .2s cubic-bezier(.4, 0, .2, 1);
    cursor: pointer;
}
.gm__switch__slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 2px 1px rgba(0, 0, 0, 0.06);
}
/* Sibling selector — исправлено на ~ на случай если в DOM ещё элементы */
.gm__switch input:checked ~ .gm__switch__slider {
    background: linear-gradient(6deg, #30D158, #3e8d51);
}
.gm__switch input:checked ~ .gm__switch__slider::before {
    transform: translateX(18px);
}
#dark .gm__switch__slider { background: rgba(118, 118, 128, 0.42); }
#dark .gm__switch input:checked ~ .gm__switch__slider { background: #30D158; }

/* ─── Horizontal tabs — иконка сверху + подпись снизу (edit-profile) ─── */
.gm__tabs {
    display: flex;
    gap: 4px;
    margin: 12px 0 0;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
#dark .gm__tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.gm__tabs-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 6px 10px;
    background: transparent;
    border: none;
    color: rgba(60, 60, 67, 0.72);
    font-size: 11.5px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    letter-spacing: -0.1px;
    border-radius: 12px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.2;
    text-align: center;
}
.gm__tabs-item:hover:not(.gm__tabs-item--active) {
    background: rgba(120, 120, 128, 0.08);
    color: rgb(28, 28, 30);
}
.gm__tabs-item--active {
    background: rgb(255 255 255 / 12%);
    color: #a2acb7;
    font-weight: 600;
    box-shadow: 0 4px 10px #7489c557;
}
.gm__tabs-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    filter: brightness(.9);
}
.gm__tabs-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.72;
    transition: opacity .18s ease, filter .18s ease;
}
.gm__tabs-item:hover:not(.gm__tabs-item--active) .gm__tabs-icon img { opacity: 0.92; }
.gm__tabs-item--active .gm__tabs-icon img {
    opacity: 1;
    /* Красим SVG в brand-цвет через filter (для одноцветных иконок работает) */
}
.gm__tabs-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: none;
}

#dark .gm__tabs-item { color: rgba(235, 235, 245, 0.65); }
#dark .gm__tabs-item:hover:not(.gm__tabs-item--active) {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}
#dark .gm__tabs-item--active {
    box-shadow: 0 4px 10px #161616e3;
    background: rgb(233 233 233 / 3%);
}
#dark .gm__tabs-icon img {
    filter: unset;
    opacity: 0.2;
}
#dark .gm__tabs-item:hover:not(.gm__tabs-item--active) .gm__tabs-icon img { opacity: 0.95; }
#dark .gm__tabs-item--active .gm__tabs-icon img {
    opacity: 1;
}

/* На узких экранах — только иконки, подписи скрываются */
@media (max-width: 480px) {
    .gm__tabs-label { display: none; }
    .gm__tabs-item { padding: 10px 4px; }
}

/* ─── Sticky actions в конце длинного edit-profile ─── */
.gm__sticky-actions {
    position: sticky;
    bottom: -24px;
    margin: 20px -24px -24px;
    padding: 14px 24px 20px;
    background: linear-gradient(to top, rgb(229 229 229) 60%, rgb(229 229 229) 100%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: revert;
    border-top: 0.5px solid rgba(0, 0, 0, 0.08);
    z-index: 5;
}
#dark .gm__sticky-actions {
    background: linear-gradient(
        to top,
        rgba(30, 30, 34, 0.95) 60%,
        rgba(30, 30, 34, 0.7) 100%
    );
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* Slide-transition для inline expandable */
.gm-expand-enter-active, .gm-expand-leave-active {
    transition: max-height .28s cubic-bezier(.16, 1, .3, 1), opacity .2s ease, margin .28s ease;
    overflow: hidden;
}
.gm-expand-enter-from, .gm-expand-leave-to {
    max-height: 0;
    opacity: 0;
    margin-top: -8px;
    margin-bottom: -8px;
}
.gm-expand-enter-to, .gm-expand-leave-from {
    max-height: 320px;
    opacity: 1;
}

/* Autosave hint — маленькая надпись под полями */
.gm__autosave-hint {
    font-size: 11.5px;
    color: rgba(52, 199, 89, 0.9);
    text-align: center;
    padding-top: 4px;
    font-weight: 500;
    animation: gm-fade-in .3s ease-in;
}
#dark .gm__autosave-hint { color: #7CE494; }

/* OL для verify-tg deeplink инструкций */
.gm__ol {
    padding-left: 22px;
    margin: 8px 0 12px;
    font-size: 14px;
    color: rgba(60, 60, 67, 0.85);
    line-height: 1.6;
}
.gm__ol li { margin-bottom: 4px; }
#dark .gm__ol { color: rgba(235, 235, 245, 0.75); }

.gm__cities {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: rgba(252, 252, 253, 0.95);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.2);
    max-height: 210px;
    overflow-y: auto;
    z-index: 10;
}
.gm__cities-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    transition: background .12s;
    display: flex;
    justify-content: space-between;
    color: inherit;
}
.gm__cities-item + .gm__cities-item { border-top: 0.5px solid rgba(0, 0, 0, 0.06); }
.gm__cities-item:hover { background: rgba(120, 120, 128, 0.1); }
.gm__cities-item span { opacity: .5; font-size: 12.5px; }
#dark .gm__cities { background: rgba(45, 45, 50, 0.95); border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); }
#dark .gm__cities-item + .gm__cities-item { border-color: rgba(255, 255, 255, 0.06); }
#dark .gm__cities-item:hover { background: rgba(255, 255, 255, 0.06); }

.gm-slide-enter-active, .gm-slide-leave-active {
    transition: opacity .22s cubic-bezier(.16, 1, .3, 1),
                transform .22s cubic-bezier(.16, 1, .3, 1);
}
.gm-slide-enter-from { opacity: 0; transform: translateX(14px); }
.gm-slide-leave-to   { opacity: 0; transform: translateX(-14px); }

@media (max-width: 480px) {
    .gm__card { margin: 20px auto; padding: 4px 20px 20px; border-radius: 20px; }
    .gm__title { font-size: 24px; }
    .gm__row { grid-template-columns: 1fr; }
    .gm__daily-card__head { flex-wrap: wrap; row-gap: 8px; }
    .gm__daily-card__amount { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Rewards modal (dialog#rewards) — построена поверх Glass-Modal токенов
   и переиспользует .gm__section/.gm__list/.gm__list-row из edit-profile.
   ═══════════════════════════════════════════════════════════════════════ */

/* Баланс — компактная пилюля в topbar рядом с крестиком (не отдельная
   центрированная строка — иначе ломает вертикальный ритм title/subtitle). */
.gm__topbar { gap: 8px; }
.gm__balance-chip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 13px;
    border-radius: 99px;
    background: rgba(120, 120, 128, 0.08);
    font-size: 13px;
    font-weight: 600;
    color: rgb(28, 28, 30);
    flex-shrink: 0;
}
#dark .gm__balance-chip { background: rgba(118, 118, 128, 0.20); color: #fff; }

/* Skeleton на первую загрузку — тот же shimmer, что у капчи (gm-shimmer). */
.gm__skeleton {
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(120, 120, 128, 0.10) 0%, rgba(120, 120, 128, 0.22) 50%, rgba(120, 120, 128, 0.10) 100%);
    background-size: 200% 100%;
    animation: gm-shimmer 1.6s ease-in-out infinite;
}
.gm__skeleton--hero { height: 96px; }
.gm__skeleton--row { height: 56px; margin-top: 10px; }
#dark .gm__skeleton {
    background: linear-gradient(90deg, rgba(118, 118, 128, 0.14) 0%, rgba(118, 118, 128, 0.28) 50%, rgba(118, 118, 128, 0.14) 100%);
    background-size: 200% 100%;
}

/* ─── Ежедневная награда: hero-блок ───
   Не заявка/кнопка со спрятанной суммой, а карточка с крупным акцентом на
   сумме (как Apple Wallet/Fitness+) — сумма и статус читаются с одного взгляда,
   CTA — отдельная строка на всю ширину. В состоянии "получено" карточка гаснет
   и превращается в тихую строку статуса, без кнопки. */
.gm__daily-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(127, 45, 232, 0.14), rgba(127, 45, 232, 0.03));
    border: 0.5px solid rgba(127, 45, 232, 0.20);
    transition: background .25s ease, border-color .25s ease;
}
#dark .gm__daily-card {
    background: linear-gradient(135deg, rgba(179, 129, 255, 0.18), rgba(179, 129, 255, 0.04));
    border-color: rgba(179, 129, 255, 0.24);
}
.gm__daily-card--claimed {
    background: rgba(120, 120, 128, 0.05);
    border-color: rgba(60, 60, 67, 0.10);
}
#dark .gm__daily-card--claimed {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}
.gm__daily-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.gm__daily-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(127, 45, 232, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s ease, opacity .25s ease;
}
.gm__daily-card__icon img { width: 24px; height: 24px; }
#dark .gm__daily-card__icon { background: rgba(179, 129, 255, 0.20); }
.gm__daily-card--claimed .gm__daily-card__icon { background: rgba(120, 120, 128, 0.10); opacity: .7; }
#dark .gm__daily-card--claimed .gm__daily-card__icon { background: rgba(255, 255, 255, 0.06); }
.gm__daily-card__body { flex: 1; min-width: 0; }
.gm__daily-card__title {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: rgb(28, 28, 30);
    letter-spacing: -0.2px;
}
#dark .gm__daily-card__title { color: #fff; }
.gm__daily-card__desc { font-size: 12.5px; color: rgba(60, 60, 67, 0.65); margin-top: 2px; }
#dark .gm__daily-card__desc { color: rgba(235, 235, 245, 0.55); }
.gm__daily-card__tier { font-size: 11.5px; color: rgba(60, 60, 67, 0.65); text-align: center; }
.gm__daily-card__tier b { font-weight: 700; }
#dark .gm__daily-card__tier { color: rgba(235, 235, 245, 0.55); }

/* Крупная сумма справа от заголовка — главный акцент карточки, а не мелкий текст в кнопке. */
.gm__daily-card__amount {
    flex-shrink: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #7A2DE8;
    text-align: right;
    line-height: 1.1;
}
#dark .gm__daily-card__amount { color: #C68CFF; }
.gm__daily-card__amount-base {
    display: block;
    font-size: 11px;
    font-weight: 500;
    opacity: .6;
    text-decoration: line-through;
}

/* Зарезервированное место под будущий баннер (рендерится только если есть контент). */
.gm__reward-banner {
    margin-top: 10px;
    border-radius: 14px;
    border: 1px dashed rgba(127, 45, 232, 0.25);
    padding: 14px;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    color: rgba(60, 60, 67, 0.5);
}
#dark .gm__reward-banner { border-color: rgba(179, 129, 255, 0.3); color: rgba(235, 235, 245, 0.45); }

/* ─── Строки с иконкой слева (квесты + "как потратить") — вариант .gm__list-row ─── */
.gm__list-row--quest {
    grid-template-columns: 40px 1fr auto;
    cursor: default;
}
.gm__list-row--quest .gm__list-row__label,
.gm__list-row--quest .gm__list-row__hint { grid-column: 2; }
.gm__list-row__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
    background: rgba(120, 120, 128, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
}
.gm__list-row__icon img { width: 18px; height: 18px; object-fit: contain; }
#dark .gm__list-row__icon { background: rgba(255, 255, 255, 0.08); }

.gm__list-row--claimed { opacity: 0.55; }
.gm__list-row--claimed .gm__list-row__icon { filter: grayscale(0.5); }
.gm__list-row__hint--ok { color: #34C759; font-weight: 600; }

.gm__list-row__action {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    height: 32px;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: rgba(127, 45, 232, 0.12);
    color: #7A2DE8;
    font-size: 12.5px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease;
}
.gm__list-row__action:hover { background: rgba(127, 45, 232, 0.20); }
.gm__list-row__action:disabled { opacity: 0.5; cursor: not-allowed; }
#dark .gm__list-row__action { background: rgba(179, 129, 255, 0.18); color: #C68CFF; }
#dark .gm__list-row__action:hover { background: rgba(179, 129, 255, 0.28); }

.gm__list-row__action--ghost { background: rgba(120, 120, 128, 0.10); color: rgba(60, 60, 67, 0.75); }
.gm__list-row__action--ghost:hover { background: rgba(120, 120, 128, 0.18); }
#dark .gm__list-row__action--ghost { background: rgba(255, 255, 255, 0.06); color: rgba(235, 235, 245, 0.7); }
#dark .gm__list-row__action--ghost:hover { background: rgba(255, 255, 255, 0.1); }

/* Маленькая иконка "внешняя ссылка" после текста — для действий, уводящих из модалки. */
.gm__list-row__action--link::after {
    content: '';
    width: 11px;
    height: 11px;
    margin-left: 6px;
    flex-shrink: 0;
    background: currentColor;
    opacity: .75;
    -webkit-mask: url('/ui/url-icon.svg') no-repeat center / contain;
            mask: url('/ui/url-icon.svg') no-repeat center / contain;
}

/* Готовая иконка (не текстовый "✓") — переиспользует зелёный ph_check-circle,
   тот же оттенок #4DC167, что и completed-состояния в прогрессе наборов. */
.gm__list-row__check {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.gm__list-row__check img { width: 100%; height: 100%; display: block; }

/* Раскрывающаяся подсказка ("Как потратить") ВНУТРИ .gm__list — не отдельная
   плавающая карточка со своими скруглениями, а продолжение той же группы:
   плоская, во всю ширину, отделена волосяной линией сверху (как между
   .gm__list-row), нижние углы подхватывает overflow:hidden родителя. */
.gm__list .gm__inline {
    margin: 0;
    border: none;
    border-radius: 0;
    border-top: 0.5px solid rgba(60, 60, 67, 0.14);
    background: rgba(120, 120, 128, 0.04);
    padding: 12px 14px;
}
#dark .gm__list .gm__inline {
    border-top-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}
.gm__inline__actions .gm__btn { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════
   Subscription-plans modal (dialog#subscription-plans) — покупка/подарок
   Pro/Premium/Max за shards. Три карточки тиров намеренно решены как
   отдельная тёмная "витрина" внутри модалки — не подчиняются светлой/тёмной
   теме сайта, всегда премиальный тёмный планшет с акцентом тира через
   --tier-accent (проставляется инлайн из tierColor()). У каждой карточки
   своя именная плашка (.gm__sub-tier__plate) с ОДНИМ holo-пресетом —
   Pro/holo, Premium/holo-chrome, Max/holo-texture — без коллизий, потому
   что каждый пресет живёт на своём собственном элементе. ═══════════════ */

/* .gm__card--xwide ограничивает именно WIDTH (min(100%-32px,380px)) —
   max-width там не спасает, потому что width уже ужЕ меньше. Здесь
   переопределяем width целиком, а не только max-width. */
.gm__card--subscription {
    width: min(100% - 32px, 960px);
    max-width: 960px;
}
@media (max-width: 900px) {
    .gm__card--subscription { width: min(100% - 24px, 640px); }
}

/* Иконка валюты (shards) — вместо эмодзи. currentColor + собственный тон по умолчанию. */
.gm__shard-icon { width: 12px; height: 12px; flex-shrink: 0; color: #57C7FF; vertical-align: -1px; }
.gm__shard-icon--lg { width: 20px; height: 20px; }

/* ─── Статус текущей подписки — тонкая строка, не отдельная плашка ─── */
.gm__sub-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 4px;
    font-size: 13px;
    color: rgba(60, 60, 67, 0.7);
    border-bottom: 0.5px solid rgba(60, 60, 67, 0.12);
    margin-bottom: 4px;
}
#dark .gm__sub-status { color: rgba(235, 235, 245, 0.65); border-bottom-color: rgba(255, 255, 255, 0.1); }
.gm__sub-status__toggle { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }

/* ─── Слайдер периода — свободный выбор месяцев, скидка по порогу ─── */
.gm__sub-slider-block { margin-top: 8px; padding: 4px 2px 0; }
.gm__sub-slider-block__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.gm__sub-slider-block__months {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
    font-size: 19px;
    font-weight: 700;
}
#dark .gm__sub-slider-block__months { color: #fff; }
.gm__sub-slider-block__discount {
    font-size: 13px;
    font-weight: 700;
    color: var(--tier-accent);
    border: 1px solid color-mix(in srgb, var(--tier-accent) 45%, transparent);
    border-radius: 8px;
    padding: 2px 9px;
}

/* Ряд слайдера и ряд меток используют ОДИНАКОВУЮ grid-раскладку (22px/1fr/22px) —
   средняя колонка у обоих одной ширины, поэтому проценты-позиции меток совпадают
   с реальным треком слайдера, а не со всей строкой (которая шире из-за степпера). */
.gm__sub-slider-row, .gm__sub-slider-ticks-row {
    display: grid;
    grid-template-columns: 22px 1fr 22px;
    gap: 8px;
    align-items: center;
}

.gm__sub-stepper {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(120, 120, 128, 0.22);
    background: rgba(120, 120, 128, 0.08);
    color: rgba(60, 60, 67, 0.75);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.gm__sub-stepper:hover { background: color-mix(in srgb, var(--tier-accent) 18%, transparent); border-color: color-mix(in srgb, var(--tier-accent) 45%, transparent); }
.gm__sub-stepper:disabled { opacity: .35; cursor: not-allowed; }
#dark .gm__sub-stepper { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); color: rgba(235, 235, 245, 0.8); }

.gm__sub-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--tier-accent) var(--sub-slider-fill, 0%), rgba(120, 120, 128, 0.18) var(--sub-slider-fill, 0%));
    outline: none;
    cursor: pointer;
}
#dark .gm__sub-slider { background: linear-gradient(90deg, var(--tier-accent) var(--sub-slider-fill, 0%), rgba(255, 255, 255, 0.14) var(--sub-slider-fill, 0%)); }
.gm__sub-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 0 1px color-mix(in srgb, var(--tier-accent) 55%, transparent);
    cursor: pointer;
    transition: transform .12s ease;
}
.gm__sub-slider::-webkit-slider-thumb:active { transform: scale(1.15); }
.gm__sub-slider::-moz-range-thumb {
    width: 20px; height: 20px;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 0 1px color-mix(in srgb, var(--tier-accent) 55%, transparent);
    cursor: pointer;
}
.gm__sub-slider::-moz-range-track { background: transparent; }

.gm__sub-slider-ticks-row { margin-top: 4px; }
.gm__sub-slider__ticks { position: relative; height: 18px; }
.gm__sub-slider__tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 11px;
    color: rgba(60, 60, 67, 0.4);
    cursor: pointer;
    padding: 2px 4px;
}
#dark .gm__sub-slider__tick { color: rgba(235, 235, 245, 0.35); }
.gm__sub-slider__tick--active { color: var(--tier-accent); font-weight: 700; }

/* ─── Три карточки тиров ─── */
.gm__sub-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
@media (max-width: 820px) {
    .gm__sub-tiers { grid-template-columns: 1fr; }
}
.gm__sub-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 18px;
    background: linear-gradient(165deg, #1b1b21 0%, #101013 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.gm__sub-tier:hover { transform: translateY(-2px); }
.gm__sub-tier--active {
    border-color: color-mix(in srgb, var(--tier-accent) 65%, transparent);
    box-shadow: 0 16px 32px -18px color-mix(in srgb, var(--tier-accent) 55%, transparent);
}

/* "Рекомендуем" — классический якорь на средний тир */
.gm__sub-tier__badge {
    position: absolute;
    top: -10px; left: 20px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #14141a;
    background: linear-gradient(120deg, #F5D889, #D4AF37);
    padding: 3px 10px;
    border-radius: 7px;
    box-shadow: 0 4px 10px -2px rgba(212, 175, 55, 0.55);
}

/* Именная плашка тира — свой единственный holo-пресет (Pro/Premium/Max) */
.gm__sub-tier__plate {
    position: relative;
    border-radius: 14px;
    padding: 16px 16px 14px;
    color: #fff;
    background:
        radial-gradient(130% 160% at 15% -20%, color-mix(in srgb, var(--tier-accent) 30%, transparent), transparent 55%),
        linear-gradient(160deg, #1e1e24 0%, #0c0c0f 100%);
    border: 1px solid color-mix(in srgb, var(--tier-accent) 42%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}
.gm__sub-tier__plate-bar {
    position: absolute !important;
    z-index: 3;
    top: 0; left: 12px; right: 12px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tier-accent), transparent);
    opacity: .9;
}
.gm__sub-tier__plate-body { position: relative; z-index: 2; }
.gm__sub-tier__plate-name {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: rgba(255, 255, 255, 0.85);
}
.gm__sub-tier__plate-price { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; font-size: 28px; font-weight: 700; letter-spacing: -.3px; }
.gm__sub-tier__plate-sub { font-size: 11.5px; color: rgba(235, 235, 245, 0.45); margin-top: 1px; }

.gm__sub-tier__savings { margin-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--tier-accent); text-align: center; }

.gm__sub-tier__select {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 0.5px solid rgba(255, 255, 255, 0.08);
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(235, 235, 245, 0.55);
}
.gm__sub-tier__plate, .gm__sub-tier__savings, .gm__sub-tier__perks { flex-shrink: 0; }
.gm__sub-tier--active .gm__sub-tier__select { color: #fff; }
.gm__sub-tier__radio {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    position: relative;
    flex-shrink: 0;
}
.gm__sub-tier--active .gm__sub-tier__radio { border-color: var(--tier-accent); }
.gm__sub-tier--active .gm__sub-tier__radio::after {
    content: '';
    position: absolute; inset: 2.5px;
    border-radius: 50%;
    background: var(--tier-accent);
}

.gm__sub-tier__perks { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.gm__sub-tier__perks li {
    font-size: 12px;
    line-height: 1.35;
    color: rgba(235, 235, 245, 0.68);
    padding-left: 15px;
    position: relative;
}
.gm__sub-tier__perks li::before {
    content: '';
    position: absolute;
    left: 0; top: 5px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--tier-accent);
    opacity: .8;
}

/* ─── Подарок + оформление — в ряд на десктопе, друг под другом на мобильном ─── */
.gm__sub-gift { margin-top: 18px; }
.gm__sub-action-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (min-width: 640px) {
    .gm__sub-action-row { flex-direction: row; align-items: center; }
}
.gm__sub-gift__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    flex-grow: 1;
}
.gm__sub-submit-btn { flex: 1; }

/* ─── Пополнение (недостаточно shards) ─── */
.gm__sub-topup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 14px; }
.gm__sub-topup-package {
    padding: 14px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(165deg, #1b1b21 0%, #101013 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    transition: border-color .15s ease;
}
.gm__sub-topup-package:hover { border-color: rgba(255, 255, 255, 0.2); }
.gm__sub-topup-package:disabled { opacity: .5; cursor: not-allowed; }
.gm__sub-topup-package--recommended { border-color: #57C7FF; box-shadow: 0 0 0 1px #57C7FF inset; }
.gm__sub-topup-package__amount { display: flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 700; }
.gm__sub-topup-package__price { font-size: 11px; color: rgba(235, 235, 245, 0.45); }

.profile-incomplete-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #FF3B30;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(255, 59, 48, .5);
    animation: profile-incomplete-pulse 2s ease-in-out infinite;
    z-index: 5;
}
#dark .profile-incomplete-badge {
    box-shadow: 0 0 0 2px #18161b, 0 2px 6px rgba(255, 59, 48, .5);
}
@keyframes profile-incomplete-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}


/* ── card.css ── */
.card-box, .set-box, .cardlist-box {
    overflow: hidden;
    border-radius: 1.05rem;
    /* background-color: rgb(255, 255, 255); */
    display: grid;
    grid-template-rows: 1fr auto;
    font-family: 'Rubik', sans-serif;
    position: relative;
    height: fit-content;
    transition: .15s;
    text-decoration: none;
    background-color: #ffffff54;
    backdrop-filter: blur(6px);
}

#dark .card-box, #dark .set-box, #dark .cardlist-box {
    background-color: #2b2c3054;
}
.card-info {
    text-align: center;
    color: rgb(68, 68, 68);
    border-top: 1px solid #e1e1e1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#dark .card-info {
    border-color: rgba(255, 255, 255, 0.05);
}

#dark .card-info-number {
    color: #fff;
}

#dark .card-info-set {
    color: rgba(255, 255, 255, 0.6);
    font-weight: normal;
}

#dark .card-info-set.full {
    color: #4DC167;
}

#dark .card-preinfo {
    background: rgba(43, 43, 48, 0.97);
}

#dark .card-info-name {
    color: #fff;
}
#dark .char-sep {
    color: #666;
}

.card-box.flat-borders {
    border-radius: 3px !important;
}

.card-box.flat-borders .card-picture {
    border-radius: 0;
}
.card-box.transparent .backdrop {
    animation: trs 5s infinite alternate-reverse cubic-bezier(0.28, 0.02, 0.64, 0.99);
}
.card-box.transparent .card-picture img {
    filter: drop-shadow(2px 14px 6px #1a1a1a8c);
}

.card-box.loading {
    /* min-height: 469px; */
    opacity: .2;
}

.card_handlers {
    position: absolute;
    top: 20px;
    left: 50%;
    /* left: 20px; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* height: 42px; */
    align-items: center;
    padding: 9px;
    gap: 6px;
    opacity: 0;
    transition: .1s;
    box-sizing: border-box;
    transform: translate(-50%, -10px);
    border-radius: 12px;
    z-index: 2;
}

.card_handlers::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    border-radius: 9px;
    z-index: -1;
}

.cards-count {
    position: absolute;
    right: 16px;
    bottom: 16px;
    color: #000000;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    border-radius: 9px;
    z-index: 1;
    font-size: 14px;
    padding: 10px;
    font-weight: 500;
    box-shadow: inset 0 0 0 1px #76767685;
    z-index: 4;
    pointer-events: none;
    transition: .2s;
    height: 36px;
    box-sizing: border-box;
}

#dark .cards-count {
    background-color: rgba(25, 27, 34, 0.8);
    color: #fff;
}

.card-box:hover .cards-count {
    opacity: .2;
}

.limit-number {
    position: absolute;
    left: 50%;
    bottom: 16px;
    color: #000000;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    border-radius: 30px;
    z-index: 1;
    font-size: 14px;
    padding: 10px 20px;
    font-weight: 500;
    box-shadow: inset 0 0 0 1px #76767685;
    z-index: 4;
    pointer-events: none;
    transition: .2s;
    transform: translateX(-50%);
    height: 36px;
    box-sizing: border-box;
}

#dark .limit-number {
    background-color: rgba(25, 27, 34, 0.8);
    color: #fff;
}

#dark .limit-number.dimmed {
    background-color: rgba(25, 27, 34, 0.6);
    color: #fff;
}

#root .limit-number.dimmed {
    opacity: .8;
}

#root .card-box:hover .limit-number {
    opacity: .1;
}

.card-sub-btn {
    position: absolute;
    left: 16px;
    bottom: 16px;
    color: #000000;
    background-color: rgba(25, 27, 34, 0.4);
    backdrop-filter: blur(5px);
    border-radius: 9px;
    z-index: 1;
    font-size: 14px;
    padding: 10px;
    font-weight: 500;
    box-shadow: inset 0 0 0 1px #76767685;
    z-index: 4;
    pointer-events: none;
    transition: .2s;
    height: 36px;
    width: 36px;
    background-image: url('/ui/ring.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    box-sizing: border-box;
}

#dark .card-sub-btn {
    background-color: rgba(25, 27, 34, 0.4);
    color: #fff;
}

.card-box:hover .card-sub-btn {
    opacity: 0.05;
}

.show-back-btn, .enable-NSFW-btn {
    position: absolute;
    bottom: 15px;
    z-index: 5;
    left: calc(50% - 80px);
    width: 160px;
    background-color: rgba(25, 27, 34, 0.2);
    outline: none;
    border: none;
    color: rgb(255 255 255);
    border-radius: 9px;
    padding: 12px 6px;
    transform: translateY(0);
    transition: .2s;
    backdrop-filter: blur(3px);
    cursor: pointer;
    opacity: .4;
    box-shadow: inset 0 0 0 1px rgba(121, 121, 121, 0.3);
}

.enable-NSFW-btn {
    background-color: rgb(25 27 34 / 70%);
    box-shadow: inset 0 0 0 1px #d1d1d159;
    bottom: 50%;
    transform: translateY(50%);
    backdrop-filter: none;
    width: 140px;
    padding: 8px;
    left: calc(50% - 70px);
    display: none;
    font-weight: 600;
}

.enable-NSFW-btn:hover {
    opacity: .8;
}

.nsfw .enable-NSFW-btn {
    display: block;
}

.nsfw.missing-pic .enable-NSFW-btn {
    display: none;
}



.card_handlers-box {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 9px;
}

#root .card_handlers.visible {
    opacity: .7;
    
    transform: translate(-50%, 0px);
}
#root .card_handlers.visible::before {
    visibility: hidden;
}

#root .card-box:hover .card_handlers {
    opacity: 1;
    transform: translate(-50%, 0px);
}

#root .card-box:hover .card-preinfo, #root .card-box.missing-pic .card-preinfo {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: all;
}
#root .card-box:hover .show-back-btn {
    background-color: rgba(25, 27, 34, 0.4);
    transform: translateY(-66px);
    opacity: .8;
}

.show-back-btn:hover {
    opacity: .95 !important;
    background-color: rgba(25, 27, 34, 0.85) !important;
}
#root .card-box:hover .card_handlers::before {
    visibility: visible;
}


.card_handlers_btn {
    width: 28px;
    height: 28px;
    background-color: rgba(254, 254, 255, 0.93);
    box-shadow: 0px 4px 10px rgba(145, 159, 171, 0.25);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity .2s;
    /* position: relative; */
    /* color: #FFF;
    font-size: 14px;
    line-height: 1; */
}

.card_handlers_btn.card-counter {
    width: unset !important;
    font-size: 12px;
    padding: 0 8px;
    font-weight: 600;
    color: #fff;
}

/* #root .card_handlers_btn.check-btn {
    color: #009B76;
}

#root .card_handlers_btn.sell-btn {
    color: #1b7bce;
}

#root .card_handlers_btn.like-btn {
    color: #F44336;
}

#root .card_handlers_btn.wishlist-btn {
    color: #e32a92;
} */

#root .card_handlers_btn.active.check-btn, #root .card_handlers_btn.card-counter.check-btn {
    background-color: #009B76;
}

#root .card_handlers_btn.active.sell-btn, #root .card_handlers_btn.card-counter.sell-btn {
    background-color: #1b7bce;
}

#root .card_handlers_btn.active.like-btn, #root .card_handlers_btn.card-counter.like-btn {
    background-color: #F44336;
}

#root .card_handlers_btn.active.wishlist-btn, #root .card_handlers_btn.card-counter.wishlist-btn {
    background-color: #e32a92;
}
#root .card_handlers_btn.active.drop-btn {
    background: linear-gradient(120deg, #4FA0FF -4.18%, #524FFF 40.2%, #B338FF 100%);
}

#root .card_handlers_btn.active.search-btn {
    background: linear-gradient(120deg, #4FA0FF 0%, #524fff00 40.2%, #B338FF 100%), #524FFF;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    width: auto;
    padding: 0 7px 0 4px;
    gap: 1px;
}

#root .card_handlers_btn.active.search-btn.pink {
    background: linear-gradient(120deg, #ff4ff6 0%, #524fff00 40.2%, rgb(255, 56, 139) 100%), #e32a92;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    width: auto;
    padding: 0 7px 0 4px;
    gap: 1px;
}

#root .card_handlers_btn.slim-button  {
    font-size: 12px;
    color: rgb(0 0 0 / 90%);
    width: auto;
    padding: 0 7px 0 4px;
    gap: 3px;
    background-color: rgb(255 255 255 / 30%);
}

#root .card_handlers_btn.search-btn {
    padding: unset;
    width: 28px;
}

#dark .card_handlers_btn.slim-button {
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(95, 95, 95, 0.3);
}

#root .card_handlers_btn.slim-button.info {
    background-color: rgba(255, 255, 255, 0);
    box-shadow: inset 0px 0 0 1px rgba(145, 159, 171, 0.25);
}

#dark .card_handlers_btn.slim-button.info {
    background-color: rgba(255, 255, 255, 0);
    box-shadow: inset 0px 0 0 1px rgba(95, 95, 95, 0.3);
}

#root .card_handlers_btn.menu-btn, #root .card_handlers_btn.plus-btn {
    padding: 0 6px;
}
.card_handlers_btn.active .btn-img {
    opacity: 1;
}

.card_handlers_btn > .btn-img {
    width: 12px;
    height: 12px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    transition: .14s;
}

.slim-button > .btn-img {
    width: 14px;
    height: 14px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    transition: .14s;
}

.card_handlers_btn:hover > .btn-img {
    opacity: .7;
}

.card_handlers_btn.like-btn > .btn-img {
    background-image: url('/ui/like.svg');
}

.card_handlers_btn.check-btn .btn-img {
    background-image: url('/ui/checked.svg');
}

.card_handlers_btn.create-btn > .btn-img {
    background-image: url('/ui/add.svg');
}

.card_handlers_btn > .btn-img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    flex-grow: 0;
}

.card_handlers_btn.sell-btn > .btn-img {
    background-image: url('/ui/sell.svg');
}

.card_handlers_btn.wishlist-btn > .btn-img {
    background-image: url('/ui/wishlist.svg');
}

.card_handlers_btn.secret-btn > .btn-img {
    background-image: url('/ui/question.svg');
}

.card_handlers_btn.search-btn > .btn-img {
    background-image: url('/ui/search.svg');
}

.card_handlers_btn.edit-btn > .btn-img {
    background-image: url('/ui/pen.svg');
}

.card_handlers_btn.menu-btn > .btn-img {
    background-image: url('/ui/burger.svg');
}


.card_handlers_btn.gift-btn > .btn-img {
    background-image: url('/ui/gift-icon.svg');
    background-size: contain;
}

.card_handlers_btn.avatar-btn > .btn-img {
    background-image: url('/ui/avatar-icon.svg');
    background-size: contain;
}

.card_handlers_btn.link-btn > .btn-img {
    background-image: url('/ui/url-icon.svg');
    background-size: contain;
}

.card_handlers_btn.sub-btn > .btn-img {
    background-image: url('/ui/ring.svg');
    background-size: contain;
}

.card_handlers_btn.download-btn > .btn-img {
    background-image: url('/ui/download-icon.svg');
    background-size: contain;
}

.card_handlers_btn.plus-btn > .btn-img {
    background-image: url('/ui/add.svg');
}

.card_handlers_btn.active.like-btn .btn-img {
    background-image: url('/ui/like-active.svg');
}

.card_handlers_btn.active.check-btn .btn-img {
    background-image: url('/ui/checked-active.svg');
}

.card_handlers_btn.active.create-btn .btn-img {
    background-image: url('/ui/add-active.svg');
}

.card_handlers_btn.active.search-btn .btn-img {
    background-image: url('/ui/search-active.svg');
}

.card_handlers_btn.active.sell-btn .btn-img {
    background-image: url('/ui/sell-active.svg');
}

.card_handlers_btn.active.wishlist-btn .btn-img {
    background-image: url('/ui/wishlist-active.svg');
}
.card_handlers_btn.active.drop-btn .btn-img {
    background-image: url('/ui/drop-active.svg');
}

#root .card_handlers_btn.loading {
    opacity: .7;
    pointer-events: none;
    animation: pulse-loading .6s infinite;
}

@keyframes pulse-loading {
    0% {
        opacity: .7;
    }
    50% {
        opacity: .6;
    }
    100% {
        opacity: .7;
    }
}



/* === Общее меню карты (бургер) ============================================ */
.card-menu {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
}
.card-menu.card-menu--open { pointer-events: auto; }
.card-menu.card-menu--closing { pointer-events: none; }

.card-menu__backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
}
.card-menu--open .card-menu__backdrop {
    pointer-events: auto;
}

.card-menu__panel {
    position: absolute;
    box-sizing: border-box;
    width: 240px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 10px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: #fff;
    box-shadow: 0 10px 30px rgba(45, 60, 95, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    transform-origin: bottom right;
    animation: cardMenuEnter .18s ease forwards;
}
.card-menu--closing .card-menu__panel {
    animation: cardMenuExit .18s ease forwards;
}
@keyframes cardMenuEnter {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cardMenuExit {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(6px) scale(0.98); }
}

#dark .card-menu__panel {
    background-color: #1E1F21;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 0 0 1px #2a2c2e;
}

#root .card-menu__panel .card_handlers_btn.slim-button {
    width: auto;
    height: 36px;
    padding: 0 12px;
    gap: 10px;
    justify-content: flex-start;
    border-radius: 9px;
    background-color: rgba(0, 0, 0, 0.03);
    box-shadow: none;
    transition: background-color .14s ease, color .14s ease, transform .12s ease;
}
#root .card-menu__panel .card_handlers_btn.slim-button:hover {
    background-color: rgba(50, 80, 150, 0.10);
}
#root .card-menu__panel .card_handlers_btn.slim-button:active {
    transform: scale(0.985);
}
#root .card-menu__panel .card_handlers_btn.slim-button.is-on {
    background-color: rgba(255, 175, 50, 0.18);
    color: #b87016;
}
#root .card-menu__panel .card_handlers_btn.slim-button.is-disabled {
    opacity: 0.42;
    pointer-events: none;
}

#dark .card-menu__panel .card_handlers_btn.slim-button {
    background-color: rgba(255, 255, 255, 0.045);
}
#dark .card-menu__panel .card_handlers_btn.slim-button:hover {
    background-color: rgba(255, 255, 255, 0.09);
}
#dark .card-menu__panel .card_handlers_btn.slim-button.is-on {
    background-color: rgba(255, 196, 95, 0.18);
    color: #f6c98a;
}
.card-menu__star-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    font-size: 14px;
    line-height: 1;
    color: #f0a420;
}
.card-menu__star.is-on .card-menu__star-icon { color: #f6c98a; }

@media screen and (max-width: 767px) {
    /* Затемнение и блюр — ТОЛЬКО когда меню открыто или закрывается; иначе backdrop полностью прозрачный */
    .card-menu--open .card-menu__backdrop,
    .card-menu--closing .card-menu__backdrop {
        background: rgba(10, 12, 18, 0.55);
        backdrop-filter: blur(2px);
        animation: cardMenuBackdropEnter .22s ease forwards;
    }
    .card-menu--closing .card-menu__backdrop {
        animation: cardMenuBackdropExit .22s ease forwards;
    }
    @keyframes cardMenuBackdropEnter {
        from { background: rgba(10, 12, 18, 0); backdrop-filter: blur(0); }
        to   { background: rgba(10, 12, 18, 0.55); backdrop-filter: blur(2px); }
    }
    @keyframes cardMenuBackdropExit {
        from { background: rgba(10, 12, 18, 0.55); backdrop-filter: blur(2px); }
        to   { background: rgba(10, 12, 18, 0); backdrop-filter: blur(0); }
    }
    .card-menu__panel {
        left: 0 !important;
        right: 0;
        top: auto !important;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        max-height: 80vh;
        border-radius: 16px 16px 0 0;
        padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
        transform-origin: bottom center;
        animation: cardMenuEnterMobile .22s ease forwards;
    }
    .card-menu--closing .card-menu__panel {
        animation: cardMenuExitMobile .22s ease forwards;
    }
    @keyframes cardMenuEnterMobile {
        from { opacity: 0; transform: translateY(24px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes cardMenuExitMobile {
        from { opacity: 1; transform: translateY(0); }
        to   { opacity: 0; transform: translateY(24px); }
    }
    #root .card-menu__panel .card_handlers_btn.slim-button {
        height: 46px;
        font-size: 15px;
        padding: 0 14px;
    }
}

.top-handler {
    position: absolute;
    top: 0;
    right: 10px;
    opacity: 1;
}

.card-box::after, .story-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 0 1px #D6D6D6;
    border-radius: inherit;
    pointer-events: none;
    user-select: none;
    z-index: 3;
}

.tags-dropdown {
    position: absolute;
    bottom: 30px;
    left: 50%;
    width: 75%;
    max-height: 270px;
    overflow: auto;
    justify-content: center;
    min-width: 140px;
    max-width: calc(100% - 16px);
    box-sizing: border-box;
    padding: 12px;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    background-color: #ffffff;
    box-shadow: 0 5px 15px #dae1e7;
    z-index: 10;
    transform: translate(-50%, 10px);
    opacity: 0;
    visibility: hidden;
    transition: .2s;
    pointer-events: none;
    box-sizing: border-box;
}

#dark .tags-dropdown {
    background-color: #2b2c30;
    box-shadow: 0 5px 15px #161718;
}

.card_handlers_btn.plus-btn:hover .tags-dropdown,
.card_handlers_btn.plus-btn.force-open .tags-dropdown {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

#root .tags-dropdown .tag-item {
    display: block;
    padding: 8px 12px;
    border-radius: 9px;
    background-color: #c2c2c221;
    color: #3b3b3b;
    cursor: pointer;
    transition: .2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    flex-grow: 1;
}

#dark .tags-dropdown .tag-item {
    background-color: #9b9b9b21;
    color: white;
}

#root .card-box.indrop::after {
    box-shadow: inset 0 0 0 1px rgba(178, 45, 255, 0.445);
}

.card-box.yellow {
    box-shadow: 0 8px 12px rgba(255, 170, 0, 0.238);
}
#root .card-box.yellow::after {
    box-shadow: inset 0 0 0 2px rgba(255, 181, 70, 0.5);
}
.card-box.purple {
    box-shadow: 0 8px 12px rgba(172, 107, 255, 0.26);
}
#root .card-box.purple::after {
    box-shadow: inset 0 0 0 2px #AC6BFF;
}
.card-box.purple-grad {
    box-shadow: 0 8px 12px rgba(172, 107, 255, 0.26);
}
#root .card-box.purple-grad::after {
    box-shadow: inset 0 0 0 2px #AC6BFF;
}
.card-box.pink {
    box-shadow: 0 8px 12px rgba(255, 165, 216, 0.259);
}
#root .card-box.pink::after {
    box-shadow: inset 0 0 0 2px #FFA5D8;
}
.card-box.pink-grad {
    box-shadow: 0 8px 12px rgba(255, 165, 216, 0.259);
}
#root .card-box.pink-grad::after {
    box-shadow: inset 0 0 0 2px #FFA5D8;
}
.card-box.red {
    box-shadow: 0 8px 12px rgba(255, 105, 105, 0.23);
}
#root .card-box.red::after {
    box-shadow: inset 0 0 0 2px #FF6969;
}
.card-box.gold {
    box-shadow: 0 8px 12px rgba(255, 61, 0, 0.25);
}
#root .card-box.gold::after {
    box-shadow: inset 0 0 0 2px #FF5C00;
}
.card-box.yellow-grey {
    box-shadow: 0 8px 12px rgba(255, 255, 0, 0.238);
}
#root .card-box.yellow-grey::after {
    box-shadow: inset 0 0 0 2px rgba(125, 125, 125, 0.5)
}
.card-box.green {
    box-shadow: 0 3px 10px 0 rgba(77, 193, 103, 0.31);
}
#root .card-box.green::after {
    box-shadow: inset 0 0 0 2px #4DC167;
}
.card-box.blue {
    box-shadow: 0 3px 10px 0 rgba(0, 148, 255, 0.31);
}
#root .card-box.blue::after {
    box-shadow: inset 0 0 0 2px #60BCFF;
}
.card-box.blue-grad {
    box-shadow: 0 3px 10px 0 rgba(0, 148, 255, 0.31);
}
#root .card-box.blue-grad::after {
    box-shadow: inset 0 0 0 2px #60BCFF;
}
.card-box.dark-yellow {
    box-shadow: 0 3px 10px 0 rgba(255, 61, 0, 0.31);
}
#root .card-box.dark-yellow::after {
    box-shadow: inset 0 0 0 2px #FF9D2B;
}
.card-box.dark-yellow-grad {
    box-shadow: 0 3px 10px 0 rgba(255, 61, 0, 0.31);
}
#root .card-box.dark-yellow-grad::after {
    box-shadow: inset 0 0 0 2px #FF9D2B;
}

#root .card-box.liked {
    box-shadow: 0 5px 34px rgb(255 10 10 / 71%);
}

#root .card-box.onsell {
    box-shadow: 0 5px 34px rgba(10, 149, 255, 0.71);
}

#root .card-box.onsell::after {
    box-shadow: inset 0 0 0 2px rgb(45, 136, 255) !important;
}

#root .card-box.indrop {
    box-shadow: 0 8px 30px rgba(255, 10, 214, 0.35);
}

#root .card-box.liked {
    box-shadow: 0 5px 34px rgb(255 10 10 / 71%);
}

#root .card-box.liked::after {
    box-shadow: inset 0 0 0 2px rgb(255 45 45) !important;
}

.card-picture {
    position: relative;
    overflow: hidden;
    aspect-ratio: 396 / 544;
    display: flex;
    align-items: center;
    border-radius: 1rem 1rem 0 0;
    /* min-height: 330px; */
}

.card-box.loading .card-picture {
    background: none;
    /* min-height: 330px; */
    aspect-ratio: 396 / 544;
    background: linear-gradient(270deg, #ffffff00, #5e66a31f, #ffffff00);
    background-size: 400% 400%;
    animation: pic-loading 1.3s infinite;
}


.missing-pic .card-picture {
    background: none;
    /* min-height: 330px; */
}

.missing-pic img {
    box-shadow: none !important;
}

.card-picture::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 200px;
    pointer-events: none;
    user-select: none;
    background: linear-gradient(180deg, rgba(17, 25, 72, 0.2) 0%, rgba(54, 46, 79, 0) 100%);
    opacity: 0;
    visibility: hidden;
    transition: .2s;
}
.card-box:hover .card-picture::before {
    opacity: 1;
    visibility: visible;
}
.card-picture, .set-picture {
    font-size: 0;
}

.card-picture img {
    /* border-radius: 1rem 1rem 0 0; */
    /* box-shadow: inset 0 0 0 5px white; */
    /* border-radius: 26px;
    box-shadow: inset 0 0 0 5px white;
    margin-bottom: 20px;
    box-shadow: 0 8px 20px #aaaeb53b; */
    z-index: 1;
    /* box-shadow: 0 0 0 1px white; */
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    position: relative;
    z-index: 1;
}

/* .card-picture .card-img {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.card-picture .card-img.back-side {
    transform: rotateY(180deg);
}

.card-picture.show-back .card-img {
    transform: rotateY(180deg);
    backface-visibility: hidden;
}

.card-picture.show-back .card-img.back-side {
    transform: rotateY(0deg);
} */

.card-picture .backdrop, .cardlist-picture .backdrop {
    position: absolute;
    top: -30px;
    height: calc(100% + 60px);
    left: -30px;
    width: calc(100% + 60px);
    background-position: center;
    background-size: cover;
    filter: blur(35px);
    z-index: 0;
    opacity: 0.4;
    pointer-events: none;
}


.card-box.nsfw .card-picture img {
    filter: blur(6px);
    image-rendering: pixelated;
}
.card-box.nsfw.missing-pic .card-picture img {
    filter: none;
}

.card-box.nsfw .card-picture .backdrop {
    filter: blur(10px);
}

.card-box.placeholder {
    height: 100%;
    min-height: 250px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    font-size: 18px;
    display: flex;
    gap: 16px;
    opacity: .5;
    color: #000;
    cursor: pointer;
    padding: 16px;
    box-sizing: border-box;
}

#dark .card-box.placeholder {
    color: #fff;
}

.card-box.placeholder:hover {
    opacity: 1;
}


.card-box.emb-item {
    height: 100%;
    min-height: 250px;
    grid-template-rows: auto 1fr;
    flex-direction: column;
    text-align: center;
    font-size: 18px;
    display: grid;
    opacity: .9;
    color: #000;
    box-sizing: border-box;
}

#dark .card-box.emb-item {
    color: #fff;
}

.card-box.emb-item:hover {
    opacity: 1;
}

/* #dark .card-box {
    background-color: #2B2C30;
} */

#dark .card-box.blur, #root .card-box.blur {
    background-color: #0e033b66;
    backdrop-filter: blur(30px);
}

#dark .card-box.blur.last, #root .card-box.blur.last {
    background-color: #38305c94;
}

#dark .card-box.blur .card-info, #root .card-box.blur .card-info {
    background-color: transparent;
}

.card-box.blur .card-preinfo {
    padding: 12px 16px;
    background: rgb(49 49 57 / 91%);
    display: none;
}

#dark .card-box::after {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

#dark .card_handlers::before {
    background-color: rgba(25, 27, 34, 0.74);
}

#dark .card_handlers_btn {
    background-color: rgba(95, 95, 95, 0.93);
    box-shadow: 0px 4px 10px rgba(74, 74, 74, 0.25);
}

#dark .card-box:not(:hover) .card_handlers.visible .card_handlers_btn:not(.active) {
    opacity: .2;
}


#dark .card-box:not(:hover) .card_handlers.visible .card_handlers_btn.active {
    opacity: 1;
    box-shadow: inset 0 0 0 1px #ffffff4f;
}
#dark .card_handlers.visible {
    opacity: .9;
}
#dark .card-box:hover .card_handlers {
    opacity: 1;
}

.card-preinfo {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(5.5px);
    text-align: center;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: .2s;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}
.card-info-name-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0;
}
.char-sep {
    font-size: 18px;
    color: #888;
    margin: 0 1px;
    line-height: 24px;
}
.card-info-name {
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: #413E38;
    text-decoration: none;
}

.card-info-series {
    margin-top: 4px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    /* identical to box height */

    text-align: center;

    color: #909194;
    text-decoration: none;
}

#dark .card-info-series {
    color: #909194;
}

.card-info-name:hover, .card-info-series:hover {
    text-decoration: underline;
}
.set-info-name {
    color: #000;
}
.card-subinfo, .set-subinfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 13px 14px;
    position: relative;
    gap: 3px;
}

.card-subinfo .card-id {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 500;
    color: #ffffff04;
    z-index: 2;
}

.set-subinfo {
    padding: 16px 16px 16px;
    justify-content: center;
}

/* .card-price {
    position: absolute;
    top: 0;
    left: 13px;
    background-color: #5da228;
    transform: translateY(-50%);
    z-index: 10;
    font-size: 14px;
    color: #fff;
    padding: 5px 8px;
    white-space: nowrap;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px #ffffff87;
    font-weight: 500;
} */

.card-price {
    background-color: #6fff0024;
    font-size: 14px;
    color: #67c61d;
    box-shadow: inset 0 0 0 1px #73c72f1a;
    padding: 5px 8px;
    white-space: nowrap;
    border-radius: 6px;
    font-weight: 500;
}
.card-price.purple {
    background: linear-gradient(120deg, #4FA0FF -4.18%, #524FFF 40.2%, #B338FF 100%);
    color: #fefefe;
    box-shadow: 0 0 0 1px rgb(255 255 255 / 14%);
    font-weight: 400;
    cursor: pointer;
}

.card-price.purple:hover {
    opacity: .8;
}
.card-price.disabled {
    background: unset;
    color: #000000;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
    font-weight: 400;
    cursor: default;
    pointer-events: none;
    opacity: .5;
}
#dark .card-price.disabled {
    background: unset;
    color: #fefefe;
    box-shadow: 0 0 0 1px rgb(255 255 255 / 14%);
    font-weight: 400;
    cursor: default;
    pointer-events: none;
    opacity: .5;
}

.card-price_val {
    display: inline-block;
}

.card-price_currency {
    display: inline-block;
}

.card-tags{
    padding: 6px 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 6px;
    justify-content: center;
    margin-bottom: -1px;
}

.card-tags .tag {
    background-color: #9b9b9b21;
    padding: 5px 9px;
    color: white;
    border-radius: 9px;
    font-size: 14px;
    cursor: help;
    position: relative;
}

.card-tags .tag button {
    background-color: #9b9b9b21;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 3px 6px;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
    position: absolute;
    margin: 0;
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: .2s;
}

.card-tags .tag:hover button {
    opacity: 1;
}

.profile-tags {
    justify-content: start;
    padding: 0;
    margin-top: 24px;
    gap: 9px;
    align-items: center;
}

.card-tags .spacer {
    flex-grow: 999999;
}

#root .card-tags .tag.blue, #root .tag-item.active.blue {
    background-color: #4e8cff21;
    box-shadow: 0 0 0 1px #4e8cff50;
    color: #6199ff;
}

#root .card-tags .tag.light-blue, #root .tag-item.active.blue {
    background-color: #4ed0ff21;
    box-shadow: 0 0 0 1px #4ec6ff50;
    color: #61cbff;
}

#root .card-tags .tag.green, #root .tag-item.active.green {
    background-color: #52e70d21;
    box-shadow: 0 0 0 1px #52e70d50;
    color: #72d30c;
}

#root .card-tags .tag.red, #root .tag-item.active.red {
    background-color: #ff4e4e21;
    box-shadow: 0 0 0 1px #ff4e4e50;
    color: #ff6161;
}

#root .card-tags .tag.gold, #root .tag-item.active.gold {
    background-color: #ffc14e21;
    box-shadow: 0 0 0 1px #ffc14e50;
    color: #ffb561;
}

#root .card-tags .tag.purple, #root .tag-item.active.purple {
    background-color: #ff4eaf21;
    box-shadow: 0 0 0 1px #ff4eaf50;
    color: #ff61c2;
}

#root .card-tags .tag.yellow, #root .tag-item.active.yellow {
    background-color: #ff763921;
    box-shadow: 0 0 0 1px #e7860d30;
    color: #d39748;
}

#root .card-tags .tag.grey, #root .tag-item.active.grey {
    background-color: #afafaf0f;
    box-shadow: 0 0 0 1px #a9a9a929;
    color: #838383;
}

.comment, .card-username_box {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    word-break: break-word;
    padding: 9px 12px 9px;
    font-size: 14px;
    color: rgb(163, 163, 163);
    flex-wrap: wrap;
}

.comment-input {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    background-color: transparent;
    font-weight: 400;
    color: #1f1f1f;
    font-weight: 500;
    font-size: 14px;
    height: 28px;
}

#dark .comment-input {
    color: #fff;
}

.comment-btn, .close-btn {
    width: 28px;
    height: 28px;
    background-color: rgba(255, 255, 255, 0.43);
    box-shadow: inset 0 0 0 1px #e7e7e7;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    outline: none;
    box-sizing: border-box; 
}

#dark .comment-btn, #dark .close-btn {
    background-color: rgba(89, 89, 89, 0.43);
    box-shadow: none;
}

.comment-btn .btn-img {
    background-image: url('/ui/save.svg');
    width: 12px;
    height: 12px;
}

.card-username_box {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: 12px 12px 12px;
}

.card-user {
    display: flex;
    gap: 12px;
    align-items: center;
    text-align: left;
    word-break: break-word;
    font-size: 16px;
    color: rgb(0, 0, 0);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.card-username {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

#dark .card-user {
    color: rgb(255, 255, 255);
}

.card-user_avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('/ui/default-avatar.png');
}

.card-info-set {
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    color: rgba(68, 68, 68, 0.6);
    cursor: pointer;
    z-index: 1;
    padding-left: 5px;
    text-align: left;
    max-width: 40%;
}


.card-info-set.full {
    color: #4DC167;
}

.card-info-set:hover {
    text-decoration: underline;
}



.card-info-number {
    text-align: center;
    color: #5B5B5B;
    position: absolute;
    left: 0;
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    z-index: 0;
    cursor: pointer;
}

.card-info-number:hover {
    text-decoration: underline;
}

.card-info-rarity {
    display: inline-flex;
    position: relative;
    padding: 0 12px;
    height: 34px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
}

.card-info-rarity > span {
    position: relative;
    z-index: 1;
    color: #ADAEB0;
    /* filter: drop-shadow(0 1px 2px rgb(172, 109, 8)); */
}
.card-info-rarity::after {
    position: absolute;
    content: '';
    left: 0;
    top: 1px;
    right: 0;
    height: 100%;
    background: rgba(163, 163, 163, 0.08);
    z-index: 0;
    border-radius: 9px;
}

.card-info-rarity.r::after {
    background: rgba(163, 163, 163, 0.08);
    box-shadow: inset 0 0 0 1px rgb(163 163 163 / 12%);
}

.card-info-rarity.yellow::after {
    background-color: rgba(247, 169, 1, 0.144);
}
.card-info-rarity.yellow>span {
    color: rgb(247 171 1);
}
.card-info-rarity.purple::after {
    background: rgba(174, 112, 255, 0.19);
}
.card-info-rarity.purple>span {
    color: #AC6BFF;
}
.card-info-rarity.purple-grad::after {
    background: linear-gradient(45deg, #ff508c, #7432f7, #4bb4ff);
}
.card-info-rarity.purple-grad>span {
    color: #fff;
}
.card-info-rarity.pink::after {
    background: hsla(326, 100%, 82%, 0.09);
}
.card-info-rarity.pink>span {
    color: #FFA5D8;
}
.card-info-rarity.pink-grad::after {
    background: linear-gradient(45deg, #ff87b680, #a3178612, #ff6ca954);
}
.card-info-rarity.pink-grad>span {
    color: #ef7abc;
}
.card-info-rarity.red>span  {
    color: #FF6969;
}
.card-info-rarity.red::after {
    background: rgba(255, 105, 105, 0.08);
}
.card-info-rarity.red-grad>span  {
    color: #FF6969;
}
.card-info-rarity.red-grad::after {
    background: linear-gradient(45deg, #ff45456e, #ff41411a, #ff232345);
    box-shadow: inset 0 0 0 1px #ff696933;
}
.card-info-rarity.gold::after {
    background: linear-gradient(118.65deg, #FFB800 0%, #ED6125 100%);
}
.card-info-rarity.gold>span {
    color: rgb(255, 255, 255);
}
.card-info-rarity.silver::after {
    background: linear-gradient(45deg, #b3cde1, #e9faffcc, #cbe3e7);
}
.card-info-rarity.silver>span {
    color: #505355;
    font-weight: 500;
}
.card-info-rarity.grey-yellow::after {
    background-color: rgb(75, 75, 75);
}
.card-info-rarity.yellow-grey>span {
    color: rgb(255, 223, 154);
}
.card-info-rarity.grey::after {
    background-color: rgba(193, 199, 204, 0.4);
}
.card-info-rarity.grey>span {
    color: #AEB6BC;
}
.card-info-rarity.green::after {
    background: rgba(77, 193, 103, 0.12);
}
.card-info-rarity.green>span {
    color: #4dc167;
}
.card-info-rarity.green-grad::after {
    background: linear-gradient(45deg, #45ff614d, #4bff4114, #23ff5238);
    box-shadow: inset 0 0 0 1px #4dc16730;
}
.card-info-rarity.green-grad>span {
    color: #4dc167;
}
.card-info-rarity.blue::after {
    background: rgba(96, 188, 255, 0.15);
}
.card-info-rarity.blue>span {
    color: #60bcff;
}
.card-info-rarity.blue-grad::after {
    background: linear-gradient(45deg, #45cfff91, #41e3ff24, #64d6f985);
}
.card-info-rarity.blue-grad>span {
    color: #60bcff;
}
.card-info-rarity.dark-yellow::after {
    background: rgba(255, 134, 96, 0.1);
}
.card-info-rarity.dark-yellow>span {
    color: #ff9060;
}
.card-info-rarity.dark-yellow-grad::after {
    background: linear-gradient(45deg, #ff8e4580, #ff89411a, #ffa7236b);
}
.card-info-rarity.dark-yellow-grad>span {
    color: #ff9060;
}

.card-username_box .user-online,
.card-username_box .user-offline{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #009B76;
    margin-left: 4px;
    display: inline-block;
    /* vertical-align: middle; */
}

.card-username_box .user-offline {
    background-color: #4c4c4c;
}





@media screen and (max-width: 767px) {
    .card-box {
        border-radius: 12px !important;
    }

    .card-picture {
        border-radius: 12px 12px 0 0;
    }
    .card_handlers {
        /* top: 6px;
        right: 6px;
        left: 6px; */
        top: 12px;
        height: unset;
        flex-wrap: wrap-reverse;
        gap: 6px;
        padding: 6px;
    }
    .card_handlers-box {
        justify-content: space-between;
        flex-grow: 1;
        gap: 6px;
    }

    .card_handlers_btn {
        width: 28px;
        height: 28px;
    }
    .card-subinfo {
        padding: 8px 8px 10px;
    }

    .card-info-set {
        font-size: 12px;
        max-width: unset;
        padding-left: 2px;
    }

    .card-info-number {
        position: relative;
        width: auto;
        font-size: 12px;
        cursor: pointer;
    }

    .card-info-rarity {
        padding: 6px 7px 4px;
        font-size: 14px;
        height: unset;
    }
    .card-info-rarity::after {
        border-radius: 7px;
    }

    .card-username_box {
        padding: 8px 8px 8px;
    }

    .card-info-name, .set-info-name {
        font-size: 14px;
        line-height: normal;
    }

    .card-subinfo {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
    }

    .card-info-series {
        font-size: 12px;
        margin-top: 0;
    }

    .card-preinfo {
        padding: 6px 8px 2px;
    }

    .comment {
        font-size: 12px;
    }

    .card-user_avatar {
        width: 18px;
        height: 18px;
    }

    .card-user {
        font-size: 14px;
    }

    .card-price {
        font-size: 12px;
        padding: 4px 6px;
    }
}

/* === Витрина (showcase) ============================================= */

/* Звезда рядом с номером карты — для владельца, INSIDE .card-info-number */
.card-info-showcase-mark {
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
    line-height: 1;
    color: #f0a420;
    opacity: 0.95;
    vertical-align: 1px;
    user-select: none;
}
#dark .card-info-showcase-mark { color: #f6c98a; }

.card-info-drop-mark {
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
    line-height: 1;
    color: #624dc1;
    opacity: 0.95;
    vertical-align: 1px;
    user-select: none;
}

#dark .card-info-drop-mark { color: #937fff; }

/* Контейнер секции — text color по теме */
.showcase-section { margin: 18px 0 24px; color: #000; }

.showcase-section {
    background-color: #ffffff05;
    padding: 16px;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px #8b8b8b1f;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    position: relative;
}

.showcase-section .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: top center;
    background-size: cover;
    opacity: 0.06;
    pointer-events: none;
    /* background-image задаётся инлайном из collection.showcase_image ?? profile.showcase_image (см. app/cards.ejs) */
}

/* ── Попап выбора витрины ─────────────────────────────────────────────────
   Нейтрально-серая палитра в духе сайта (база rgba(25, 27, 34, *)).
   Через <teleport to="body"> — выезжает поверх .showcase-section { overflow: hidden }.
   position: fixed; координаты считаются из rect кнопки в JS. */

.showcase-picker-wrap { position: relative; display: inline-block; }

.showcase-picker {
    position: fixed;
    z-index: 200;
    width: 300px;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    background: rgba(31, 33, 41, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    padding: 6px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
}

.showcase-picker__head {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    padding: 8px 10px 6px;
}

.showcase-picker__list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}
.showcase-picker__list::-webkit-scrollbar { width: 6px; }
.showcase-picker__list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 99px;
}

.showcase-picker__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    color: rgba(255, 255, 255, 0.75);
    font: inherit;
    transition: background-color .12s, color .12s;
}
.showcase-picker__item:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}
.showcase-picker__item:disabled { opacity: 0.5; cursor: default; }

.showcase-picker__item--active {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    color: #fff;
}

.showcase-picker__thumb {
    width: 64px;
    height: 36px;
    object-fit: cover;
    object-position: top right;
    border-radius: 5px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
}
.showcase-picker__thumb--none {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.25);
    font-size: 18px;
    line-height: 1;
}
.showcase-picker__thumb--default {
    background-size: cover;
    background-position: top right;
}

.showcase-picker__name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.showcase-picker__check {
    color: #4cd964;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

.showcase-picker__empty {
    padding: 18px 10px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    text-align: center;
}

.showcase-picker__shop {
    margin-top: 4px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: background-color .12s, color .12s;
}
.showcase-picker__shop:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

#dark .showcase-section { color: #fff; }
.showcase-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 0 5px;
    gap: 10px;
}
.showcase-section__title {
    font-size: 15px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.showcase-section__count {
    font-weight: 400;
    opacity: 0.55;
    font-size: 13px;
}

/* Карусель с боковыми стрелками */
.showcase-carousel-wrap {
    position: relative;
    display: flex;
    justify-content: center;
}
.showcase-carousel {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    padding: 8px 4px 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.showcase-carousel::-webkit-scrollbar { height: 6px; }
.showcase-carousel::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}
#dark .showcase-carousel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

/* Кнопки навигации в шапке — рядом с «Изменить» */
.showcase-section__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.showcase-section__nav {
    display: inline-flex;
    gap: 4px;
}
.showcase-section__nav-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    color: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color .14s ease, opacity .14s ease;
}
.showcase-section__nav-btn:hover { background: rgba(0, 0, 0, 0.1); }
.showcase-section__nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}
#dark .showcase-section__nav-btn { background: rgba(255, 255, 255, 0.05); }
#dark .showcase-section__nav-btn:hover { background: rgba(255, 255, 255, 0.1); }

.showcase-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 0 5px;
    gap: 10px;
}



/* === Карта-мини: минималистичная, в стиле сайта === */
.card-mini {
    flex: 0 0 auto;
    width: 160px;
    scroll-snap-align: start;
    background-color: #ffffff54;
    backdrop-filter: blur(6px);
    border-radius: 0.7rem;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: transform .15s ease;
    font-family: 'Rubik', sans-serif;
}
.card-mini::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px #D6D6D6;
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
}
#dark .card-mini { background-color: #2b2c3054; }
#dark .card-mini::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
.card-mini:hover { transform: translateY(-2px); }

/* flat-borders — резкие углы как у настоящей карты */
.card-mini.flat-borders { border-radius: 3px !important; }
.card-mini.flat-borders .card-mini__picture { border-radius: 0; }

/* Картинка */
.card-mini__picture {
    position: relative;
    aspect-ratio: 396 / 544;
    overflow: hidden;
}
.card-mini.flat-borders .card-mini__picture { border-radius: 0; }
.card-mini__bg {
    position: absolute;
    inset: -20px;
    background-position: center;
    background-size: cover;
    filter: blur(28px);
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
}
.card-mini__picture img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: filter .2s ease;
}
.card-mini.nsfw .card-mini__picture img {
    filter: blur(8px);
    image-rendering: pixelated;
}
.card-mini.nsfw .card-mini__bg { filter: blur(14px); opacity: 0.6; }

/* Бейдж редкости-номера — нейтральный, без цветной заливки */
.card-mini__rarity {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 2;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    line-height: 1.1;
    backdrop-filter: blur(4px);
    letter-spacing: 0.2px;
}

/* Overlay при hover/touch: цена, комментарий, теги поверх картинки */
.card-mini__overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.6) 65%, rgba(0,0,0,0.92) 100%);
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}
.card-mini:hover .card-mini__overlay { opacity: 1; }
.card-mini__overlay-inner {
    width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #fff;
}
.card-mini__price {
    align-self: flex-start;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    background: rgba(255, 255, 255, 0.18);
    padding: 5px 8px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
}
.card-mini__price span { font-weight: 500; opacity: 0.85; margin-left: 2px; }
.card-mini__overlay-comment {
    font-size: 11.5px;
    line-height: 1.4;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
/* Теги: используем .card-tags .tag — те же стили, что у настоящей карты;
   только уменьшаем шрифт и убираем margin родителя */
.card-mini .card-mini__tags.card-tags {
    padding: 0;
    margin: 0;
    gap: 4px;
    justify-content: flex-start;
}
.card-mini .card-mini__tags.card-tags .tag {
    font-size: 11px;
    padding: 3px 7px;
    border-radius: 7px;
}

/* Тач-устройства: overlay всегда виден (нет hover) */
@media (hover: none) and (pointer: coarse) {
    .card-mini__overlay { opacity: 1; }
}

/* Стрелки перестановки (режим редактирования) */
.card-mini__edit-arrows {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 6;
    display: flex;
    gap: 4px;
}
.card-mini__arrow {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.card-mini__arrow:active { transform: scale(0.94); }
.card-mini__arrow:disabled { opacity: 0.35; pointer-events: none; }
#dark .card-mini__arrow { background: rgba(45, 47, 52, 0.96); color: #fff; }

/* Кнопка удаления карты с витрины (режим редактирования) */
.card-mini__remove {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 6;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(244, 67, 54, 0.92);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 1px;
    transition: transform .12s ease, background-color .14s ease;
}
.card-mini__remove:hover { background: rgba(244, 67, 54, 1); }
.card-mini__remove:active { transform: scale(0.94); }
/* В режиме редактирования скрываем бейдж редкости, чтобы не пересекался с × */
.showcase-carousel.is-editing .card-mini__rarity { display: none; }
/* И не показываем hover-overlay (он мешает редактированию) */
.showcase-carousel.is-editing .card-mini__overlay { display: none; }
.showcase-carousel.is-editing .card-mini { cursor: default; }
.showcase-carousel.is-editing .card-mini:hover { transform: none; }

/* === Блок «все витрины» на главной странице профиля === */
.all-showcases { margin: 20px 0 28px; color: #000; }
#dark .all-showcases { color: #fff; }
.all-showcases > h3 {
    margin: 0 0 12px;
    padding: 0 4px;
    font-size: 16px;
    font-weight: 500;
}
.showcase-group { margin-bottom: 22px; }
.showcase-group__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    background: #f0f2f6;
}
.showcase-group__label a { color: inherit; text-decoration: none; }
#dark .showcase-group__label { background: #2b2c30; color: #fff; }
.showcase-group__label.has    { background: #d4f0d8; color: #2e7d3f; }
.showcase-group__label.like   { background: #ffd9d9; color: #c0303c; }
.showcase-group__label.sell   { background: #d8e6ff; color: #2e5bb0; }
.showcase-group__label.wishlist { background: #ffd6ec; color: #c03589; }
.showcase-group__label.drop   { background: #e3d9ff; color: #5b3bb5; }
#dark .showcase-group__label.has    { background: #1f3a25; color: #b6e3bc; }
#dark .showcase-group__label.like   { background: #3a1e1e; color: #f5a8a8; }
#dark .showcase-group__label.sell   { background: #1c2a45; color: #a8c4f5; }
#dark .showcase-group__label.wishlist { background: #3a1e30; color: #f5a8dd; }
#dark .showcase-group__label.drop   { background: #2a2145; color: #c3a8f5; }

/* Маленький чип коллекции на карте в объединённой витрине профиля.
   Использует те же цвета что и .showcase-group__label.<short_name>, но компактно. */
.card-mini__col-chip {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    line-height: 1.4;
    border-radius: 999px;
    pointer-events: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    max-width: calc(100% - 12px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Кнопка-переключатель «Изменить» */
.showcase-edit-btn {
    border: none;
    background: rgba(0, 0, 0, 0.05);
    color: inherit;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color .14s ease;
}
.showcase-edit-btn:hover { background: rgba(0, 0, 0, 0.1); }
.showcase-edit-btn.is-active {
    background: rgba(255, 175, 50, 0.2);
    color: #b87016;
}
#dark .showcase-edit-btn { background: rgba(255, 255, 255, 0.05); }
#dark .showcase-edit-btn:hover { background: rgba(255, 255, 255, 0.1); }
#dark .showcase-edit-btn.is-active {
    background: rgba(255, 196, 95, 0.2);
    color: #f6c98a;
}

@media (max-width: 600px) {
    .card-mini { width: 138px; }
}

/* ─── Entity popover (персонаж/тайтл — карточки + "любимые" в профиле) ─── */
.entity-popover-wrap {
    position: fixed;
    inset: 0;
    z-index: 10050;
    pointer-events: none;
}
.entity-popover__backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    pointer-events: none;
}
.entity-popover {
    position: fixed;
    width: 340px;
    max-width: calc(100vw - 16px);
    max-height: min(480px, 80vh);
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
    padding: 16px;
    pointer-events: auto;
    animation: entityPopoverIn .16s cubic-bezier(.2, .8, .2, 1);
    font-family: 'Rubik', sans-serif;
    transform-origin: bottom center;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
@keyframes entityPopoverIn {
    from { opacity: 0; transform: translateY(6px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Открыт под ссылкой (мало места сверху) — анимация растёт вниз, а не вверх */
.entity-popover--below { transform-origin: top center; }
.entity-popover--dragging { transition: none; }
.entity-popover__handle { display: none; }
#dark .entity-popover {
    background: rgba(30, 30, 36, 0.92);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
    color: #f2f2f4;
}

.entity-popover__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-shrink: 0;
}
.entity-popover__body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.entity-popover__footer { flex-shrink: 0; }
.entity-avatar {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #cfd4ff, #ffd6ec);
}
.entity-avatar--lg { width: 48px; height: 48px; }
.entity-avatar--sm { width: 40px; height: 40px; }
/* Тайтл — постер 225:320 (как обложки наборов), а не круглая аватарка персонажа.
   Ширина авто по aspect-ratio — высота наследуется от --lg/--md/--sm конкретного места. */
.entity-avatar--title {
    width: auto;
    aspect-ratio: 225 / 320;
    border-radius: 6px;
}
.entity-avatar__mono {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #ffffffcc;
    font-size: 16px;
}
.entity-avatar--sm .entity-avatar__mono { font-size: 14px; }
.entity-avatar img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.entity-popover__title { flex: 1; min-width: 0; }
.entity-popover__name {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.25;
    color: #26252a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#dark .entity-popover__name { color: #fff; }
.entity-popover__subname {
    font-size: 13px;
    color: #8a8a90;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.entity-popover__close {
    border: none;
    background: rgba(0, 0, 0, 0.05);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    flex-shrink: 0;
    transition: background-color .14s ease;
}
.entity-popover__close:hover { background: rgba(0, 0, 0, 0.1); }
#dark .entity-popover__close { background: rgba(255, 255, 255, 0.08); }
#dark .entity-popover__close:hover { background: rgba(255, 255, 255, 0.14); }

.entity-popover__skeleton { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 12px; }
.entity-popover__skel-line {
    height: 12px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.06);
    animation: entityPopoverPulse 1.1s ease-in-out infinite;
}
#dark .entity-popover__skel-line { background: rgba(255, 255, 255, 0.08); }
@keyframes entityPopoverPulse {
    0%, 100% { opacity: .5; }
    50% { opacity: 1; }
}
.entity-popover__error {
    padding: 12px 0;
    font-size: 13px;
    color: #999;
    text-align: center;
}

.entity-popover__stats {
    display: flex;
    gap: 18px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
#dark .entity-popover__stats { border-color: rgba(255, 255, 255, 0.08); }
.entity-popover__stat {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #9a9a9f;
}
.entity-popover__stat b {
    font-size: 15px;
    font-weight: 600;
    color: #26252a;
}
#dark .entity-popover__stat b { color: #fff; }

.entity-popover__title-chip {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    color: #5b5bd6;
    background: rgba(91, 91, 214, 0.1);
    padding: 5px 11px;
    border-radius: 999px;
    text-decoration: none;
    margin-bottom: 12px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.entity-popover__title-chip:hover { background: rgba(91, 91, 214, 0.18); }
#dark .entity-popover__title-chip { color: #b3b3ff; background: rgba(179, 179, 255, 0.12); }
#dark .entity-popover__title-chip:hover { background: rgba(179, 179, 255, 0.2); }

.entity-popover__section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #a5a5aa;
    margin-bottom: 8px;
}
.entity-popover__strip {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 14px;
}
.entity-popover__strip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    flex-shrink: 0;
    width: 56px;
}
.entity-popover__strip-item span {
    font-size: 11px;
    color: #6b6b70;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
#dark .entity-popover__strip-item span { color: #b5b5ba; }

/* Развёрнутый список (кнопка "Показать всех" на десктопе, всегда на мобиле через media-запрос
   ниже) — строка вместо колонки, вписана в общий фон поповера подсветкой только при наведении,
   без отдельного "бокса" на каждый айтем */
.entity-popover__strip--expanded {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 2px;
}
.entity-popover__strip--expanded .entity-popover__strip-item {
    flex-direction: row;
    width: calc(50% - 4px);
    gap: 8px;
    padding: 6px;
    border-radius: 10px;
    transition: background-color .14s ease;
}
.entity-popover__strip--expanded .entity-popover__strip-item:hover { background: rgba(0, 0, 0, 0.05); }
#dark .entity-popover__strip--expanded .entity-popover__strip-item:hover { background: rgba(255, 255, 255, 0.06); }
.entity-popover__strip--expanded .entity-popover__strip-item span {
    font-size: 12px;
    text-align: left;
}

.entity-popover__strip-more {
    display: block;
    width: 100%;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    color: inherit;
    font-size: 12px;
    font-weight: 500;
    padding: 8px;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 12px;
    transition: background-color .14s ease;
}
.entity-popover__strip-more:hover { background: rgba(0, 0, 0, 0.1); }
#dark .entity-popover__strip-more { background: rgba(255, 255, 255, 0.06); }
#dark .entity-popover__strip-more:hover { background: rgba(255, 255, 255, 0.12); }

.entity-popover__footer {
    display: flex;
    align-items: center;
    gap: 10px;
}
.entity-popover__like {
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    padding: 9px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #67707b;
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease;
    flex-shrink: 0;
}
.entity-popover__like-icon {
    width: 15px;
    height: 15px;
    background-image: url('/ui/like.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .5;
}
.entity-popover__like:hover { background: rgba(0, 0, 0, 0.08); }
.entity-popover__like:disabled { opacity: .5; cursor: default; pointer-events: none; }
.entity-popover__like.is-active {
    background: rgba(255, 71, 87, 0.12);
    color: #ff4757;
}
.entity-popover__like.is-active .entity-popover__like-icon {
    background-image: url('/ui/like-active-red.svg');
    opacity: 1;
}
#dark .entity-popover__like { background: rgba(255, 255, 255, 0.08); color: #d5d5da; }
#dark .entity-popover__like:hover { background: rgba(255, 255, 255, 0.14); }
#dark .entity-popover__like.is-active { background: rgba(255, 71, 87, 0.18); color: #ff7b86; }

.entity-popover__cta {
    flex: 1;
    text-align: center;
    background: #26252a;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 12px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .14s ease;
}
.entity-popover__cta:hover { opacity: .85; }
#dark .entity-popover__cta { background: #fff; color: #17171a; }

@media (max-width: 600px) {
    .entity-popover__backdrop {
        background: rgba(0, 0, 0, 0.45);
        pointer-events: auto;
    }
    .entity-popover {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100%;
        max-width: 100%;
        height: 92vh;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
        padding: 8px 16px 16px;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
        animation: entityPopoverInMobile .22s cubic-bezier(.25, .8, .3, 1);
    }
    @keyframes entityPopoverInMobile {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
    /* Тянучка для закрытия свайпом вниз — тот же принцип, что и #findCard .fcm__handle */
    .entity-popover__handle {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 22px;
        flex-shrink: 0;
        cursor: grab;
        touch-action: none;
        user-select: none;
    }
    .entity-popover__handle::before {
        content: '';
        width: 38px;
        height: 4px;
        border-radius: 2px;
        background: rgba(0, 0, 0, 0.15);
    }
    #dark .entity-popover__handle::before { background: rgba(255, 255, 255, 0.22); }
    .entity-popover__handle:active { cursor: grabbing; }
    .entity-popover__head { margin-top: 4px; }

    /* На весь экран есть место — разворачиваем ленту "похожих" в сетку-список вместо
       узкой горизонтальной прокрутки, иначе под ней остаётся пустое пространство.
       Стиль — как у .entity-popover__strip--expanded (без отдельного бокса на айтем). */
    .entity-popover__strip {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 2px;
    }
    .entity-popover__strip-item {
        flex-direction: row;
        width: calc(50% - 4px);
        gap: 8px;
        padding: 6px;
        border-radius: 10px;
    }
    .entity-popover__strip-item:active { background: rgba(0, 0, 0, 0.05); }
    #dark .entity-popover__strip-item:active { background: rgba(255, 255, 255, 0.06); }
    .entity-popover__strip-item span {
        font-size: 12px;
        text-align: left;
    }
}

/* ── mobile-header.css ── */
#dark {
	--background-color: #1E1F21;
	--border-color: rgba(75, 76, 78, 0.5);
	--nav-background: rgb(40 37 45 / 88%);
	--active-dot: #5067FF;
	--notification-badge: #F24747;
	--divider-color: #3e414563;
	--popover-background: #1e1c21d9;
	--popover-border-color: #303030;
	--popover-button-color: #28252d;
	--popover-button-border-color: #313131;
	--font-color: #B4BFCB;
}

:root {
    --background-color: #ffffff;
    --border-color: rgb(75 76 78 / 7%);
    --nav-background: rgb(255 255 255 / 95%);
    --active-dot: #5067FF;
    --notification-badge: #F24747;
    --divider-color: #dfe2e5;
    --popover-background: #f4f3f5d9;
    --popover-border-color: #ebdfdf;
    --popover-button-color: #ffffff;
    --popover-button-border-color: #e7e7e7;
    --font-color: #22262b;
}

#root .popover a {
	color: inherit;
	text-decoration: none;
}

.hidden {
	display: none;
}

.divider {
	width: 1px;
	min-width: 1px;
	max-width: 1px;
	height: 100%;
	background: var(--divider-color);
}

.divider.horizontal {
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	height: 1px;
	min-height: 1px;
	max-height: 1px;
}
/* nav */
/* mock-content */
.content {
	padding-top: calc(72px + 56px);
	height: calc(100vh - 72px - 56px);
	width: 100vw;
	opacity: 0.25;
	overflow-y: auto;
	overflow-x: hidden;
}

#mobile-header {
	display: none;
	color: var(--font-color);
	font-size: 14px;
	line-height: 14px;
	margin: 0;
	background: var(--background-color);
	font-family: 'Rubik', sans-serif;
}

#mobile-header .backdrop{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #a6b1c7ba;
	backdrop-filter: blur(15px);
	z-index: 99;
	opacity: 1;
	visibility: visible;
	transition: .15s;
}

#dark #mobile-header .backdrop{
	background: #0d0c0ed9;
}

#mobile-header .backdrop.hide{
	opacity: 0;
	visibility: hidden;
	user-select: none;
	pointer-events: none;
}

.mobile-navigation {
	box-sizing: border-box;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 16px;
	background: var(--nav-background);
	padding: 18px 24px;
	border-radius: 33px;
	border: 1px solid var(--border-color);
	/* box-shadow: inset 0 0 22px 0px var(--nav-background), inset 1px 1px 0 1px var(--border-color), inset -1px -1px 0 1px #392e43; */
	z-index: 100;
	width: calc(100% - 32px);
	display: flex;
	backdrop-filter: blur(13px);
}

.nav-item {
	position: relative;
	width: 24px;
	height: 24px;
	text-decoration: none;
	background-position: center;
	background-size: 24px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.nav-item.active::after {
	content: '';
	position: absolute;
	bottom: -11px;
	left: 50%;
	transform: translateX(-50%);
	width: 6px;
	height: 6px;
	background: var(--active-dot);
	border-radius: 50%;
	filter: drop-shadow(0px 3px 8.1px var(--active-dot));
}

.nav-item::before {
	content: '';
	position: absolute;
	top: -10px;
	left: -10px;
	width: calc(100% + 20px);
	height: calc(100% + 20px);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.nav-home {
	background-image: url('/ui/home-icon.svg');
}

.nav-rewards {
	background-image: url('/ui/gift-icon.svg');
}

.nav-rewards.reward {
	background-image: url('/ui/gift-icon.svg');
}

#root .nav-rewards::after {
	content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background-color: rgb(255, 81, 81);
    border-radius: 50%;
    text-align: center;
    line-height: 16px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 0 0 3px #fff;
    opacity: 0;
    visibility: hidden;
    transition: .2s, box-shadow 0s;
}

#dark .nav-rewards::after {
	box-shadow: 0 0 0 3px #262729;
    background-color: rgb(209, 45, 45);
}

#root .nav-rewards.reward::after {
	opacity: 1;
    visibility: visible;
}

.nav-cards {
	background-image: url('/ui/cards-icon.svg');
}

.nav-notifications {
	background-image: url('/ui/ring.svg');
}

.nav-notifications.active {
	background-image: url('/ui/ring-active.svg');
}

.nav-profile {
	/* background-image: url('/ui/default-avatar.svg'); */
	border-radius: 50%;
}

/* .nav-profile:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transition: 1s;
	animation: _placeholder .5s infinite linear;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-image: linear-gradient(0deg, #92929220 0%, #d4d4d4c8 100%);
	z-index: 1;
	user-select: none;
	pointer-events: none;
} */

.nav-profile .loading {
	position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border-radius: 50%;
    transition: .4s;
    animation: _placeholder .5s infinite linear;
    background-size: 100% 100%;
    background-repeat: no-repeat;
	background-image: linear-gradient(0deg, #e2ebff 0%, #c2deff 100%);
	z-index: 1;
	user-select: none;
	pointer-events: none;
	opacity: 1;
	/* visibility: visible; */
}
#dark .nav-profile .loading {
    background-image: linear-gradient(0deg, #4d4141 0%, #3f5e82 100%);
}
.nav-profile .loading.loaded {
	animation: load 1s ease forwards;
	/* visibility: hidden; */
}

@keyframes load {
	0% {
		opacity: 1;
		transform: rotate(0deg);
	}
	100% {
		opacity: 0;
		transform: rotate(360deg);
	}
}

/* .nav-profile[style*="background-image"]::after {
	opacity: 0;
} */

@keyframes _placeholder {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* .notifications-badge {
	position: absolute;
	top: -0px;
	right: -0px;
	width: 7px;
	height: 7px;
	background: var(--notification-badge);
	border-radius: 50%;
	border: 2px solid var(--border-color);
} */

/* Показываем меню только на мобильных устройствах */
@media screen and (max-width: 1359px) {
	.mobile-navigation {
			max-width: 420px;
	}

	#mobile-header {
			display: block;
	}
}

@media screen and (max-width: 767px) {
	.mobile-navigation {
			max-width: 358px;
			min-width: 308px;
	}
}

/* search */

.search {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	padding: 14px 18px;
	background: var(--popover-button-color);
	border-radius: 16px;
	border: 1px solid var(--popover-button-border-color);
}

.search .divider {
	background: rgba(180, 191, 203, 0.24);
}

.search .search-btn {
	background: transparent;
	border: none;
	width: 12px;
	height: 12px;
	background: url(/ui/search.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.search .search-btn:focus {
	outline: none;
}

.search .search-input {
	background: transparent;
	border: none;
	color: #B4BFCB;
	flex: 1 1 1px;
	width: 1px;
}

.search .search-input::placeholder {
	color: #B4BFCB;
	opacity: 0.6;
}

.search .search-input:focus {
	outline: none;
}

.search .search-label {
	opacity: 0.6;
	position: relative;
	/* cursor: pointer; */
}

.search .search-label::after {
	content: '';
	position: absolute;
	top: -17px;
	left: -17px;
	width: calc(100% + 34px);
	height: calc(100% + 34px);
	background: transparent;
}

.search-results {
	flex-shrink: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	/* min-height: calc(69px * 1.5); */
	max-height: calc(69px * 3.5 + 16px * 2);
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--divider-color) transparent;
	padding: 0;
	padding-top: 16px;
	padding-bottom: 1px;
}

.search-item {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 14px;
	height: 69px;
	width: 100%;
	padding: 10px;
	background: var(--popover-button-color);
    border-radius: 16px;
    border: 1px solid var(--popover-button-border-color);
}

.search-item img {
	border-radius: 9px;
	width: 42px;
	height: 42px;
}

.search-item img.user-avatar {
	border-radius: 16px;
	width: 42px;
	height: 42px;
	background: var(--background-color);
}

.search-item .search-item-info {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.search-item .search-item-title {
	color: var(--font-color);
	font-weight: 600;
}

.search-item .search-item-description {
	font-size: 12px;
	line-height: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* popover */

.popover {
	position: fixed;
	bottom: 68px;
	left: 50%;
	transform: translateX(-50%);
	box-sizing: border-box;
	display: flex;
	max-height: calc(100vh - 68px - 6px);
	width: calc(100% - 32px);
	padding: 0;
	background: var(--popover-background);
	border-radius: 32px;
	border: 1px solid var(--popover-border-color);
	z-index: 110;
	transition: .2s;
	opacity: 1;
	visibility: visible;
	backdrop-filter: blur(13px);
}

.popover.unloaded .noty-header_avatar {
	background-image: none !important;
}

.popover.unloaded .noty-picture {
	background-image: none !important;
}

.popover .popover-arrow {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	width: 12px;
	height: 12px;
	transform: rotate(45deg) translateX(-50%);
	z-index: -1;
	border-top: 6px solid #ff000000;
	border-left: 6px solid #ff000000;
	border-right: 6px solid var(--popover-background);
	border-bottom: 6px solid var(--popover-background);
	box-sizing: border-box;
}

.popover .content-container {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 24px;
	width: 100%;
	flex: 1 0 auto;
	overflow-y: auto;
	overflow-x: hidden;
}

.popover .divider {
	background: var(--divider-color);
}

.popover .btn-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.mini-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-around;
	align-items: center;
}

.collection-btn {
	width: 42px;
	height: 42px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px;
	background-color: var(--popover-button-color);
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

.collection-btn.sell {
	background-image: url(/ui/sell.svg);
}

.collection-btn.wishlist {
	background-image: url(/ui/wishlist.svg);
}

.collection-btn.drop {
	background-image: url(/ui/drop.svg);
}

.collection-btn.like {
	background-image: url(/ui/like.svg);
}

.collection-btn.has {
	background-image: url(/ui/has.svg);
}



.popover .popover-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 12px;
	background: var(--popover-button-color);
	border-radius: 14px;
	border: 1px solid var(--popover-button-border-color);
	text-decoration: none;
	color: var(--font-color);
	cursor: pointer;
}

#root .popover .popover-btn.acc {
	background: linear-gradient(120deg, #4FA0FF 0%, #524fff00 40.2%, #B338FF 100%), #524FFF;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 1px rgba(113, 101, 255, 0.62), 0px 4px 20px rgba(63, 22, 255, 0.25);
    color: #fff;
	border: none;
}

.popover .popover-btn img {
	width: 16px;
	height: 16px;
}

.popover-btn .theme-icon {
	width: 16px;
	height: 16px;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url('/ui/light-icon.svg');
}

#dark .popover-btn .theme-icon {
	background-image: url('/ui/dark-icon.svg');
}

.popover.hidden {
	visibility: hidden;
	opacity: 0;
	transform: translateX(-50%) translateY(10px);
}

.popover .user-container {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px;
	background: var(--popover-button-color);
	border-radius: 14px;
	border: 1px solid var(--popover-button-border-color);
}

.popover .user-container .user-info {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 500;
	flex: 1 0 auto;
}

.popover .user-container .user-info .user-avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
}

.popover .user-container button {
	width: 22px;
	height: 22px;
	background-repeat: no-repeat;
	background-position: center;
	background-color: transparent;
	background-size: 14px;
	border: none;
}

.popover .user-container .divider {
	height: 22px;
	background: rgba(180, 191, 203, 0.24);
}

.btn-logout {
	background-image: url(/ui/exit.svg);
	cursor: pointer;
}

@media screen and (max-width: 1359px) {
	.popover {
		max-width: 420px;
		min-width: 340px;
	}
}

@media screen and (max-width: 767px) {
	.popover {
			max-width: 390px;
			min-width: 340px;
	}
}

/* global-search */

.global-search {
	box-sizing: border-box;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	padding: 29px 41px 59px;
	background: rgba(0, 0, 0, 0.78);
	z-index: 1000;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}










.mobile-header {
	backdrop-filter: blur(22px);
	/* box-shadow: 0 1px 1px 0 #303133, 0 4px 23px 0 rgba(0, 0, 0, 0.43); */
	box-shadow: 0 1px 1px 0 #e0e3e7;
	background: rgba(255, 255 ,255, 0.95);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
	transition: .3s;
}

#dark .mobile-header {
	box-shadow: 0 1px 1px 0 #303133bd;
	background: rgb(24 22 27 / 83%);
}

.mobile-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 64px;
}

.mobile-header .side-header {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mobile-header .header-button {
	background-size: 18px;
	width: 24px;
	height: 24px;
	background-position: center;
	background-repeat: no-repeat;
	display: inline-block;
}

.mobile-header .social-links {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mobile-header .div {
	width: 1px;
	height: 18px;
	background: #e0e3e7;
}

#dark .mobile-header .div {
	background: #3e4145;
}

.mobile-header .header-button.other-button {
	background-image: url('/ui/book-icon.svg');
}

.mobile-header_social {
	position: fixed;
	top: 64px;
	left: 0;
	width: 100%;
	background: rgb(255 255 255 / 90%);
	backdrop-filter: blur(22px);
	box-shadow: 0 1px 1px 0 #e0e3e7, 0 4px 23px 0 rgb(205 213 249 / 43%);
	z-index: 9;
	transition: .3s;
	opacity: 1;
	visibility: visible;
}

#dark .mobile-header_social {
	box-shadow: 0 1px 1px 0 #303133bd, 0 4px 23px 0 rgba(0, 0, 0, 0.43);
	background: rgb(24 22 27 / 83%);

}

.mobile-header_social .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 56px;
}

header.scrolled .mobile-header_social {
	transform: translateY(-64px);
	opacity: 0;
	visibility: hidden;
}

header.scrolled .mobile-header {
	box-shadow: 0 1px 1px 0 #e0e3e7, 0 4px 23px 0 rgb(205 213 249 / 43%);
}

#dark header.scrolled .mobile-header {
	box-shadow: 0 1px 1px 0 #303133, 0 4px 23px 0 rgba(0, 0, 0, 0.43);
}

@media screen and (max-width: 1359px) {
	.mobile-header .header-button {
		background-size: 22px;
	}

	.mobile-header .social-links {
		gap: 14px;
	}

	.mobile-header .side-header {
		gap: 14px;
	}

	.mobile-header_social {
		display: none;
	}
}


@media screen and (max-width: 767px) {
	.mobile-header .social-links {
		display: none;
	}

	.mobile-header .social-links + .div {
		display: none;
	}

	.mobile-header .header-button {
		background-size: 20px;
	}

	.mobile-header .social-links {
		gap: 12px;
	}

	.mobile-header .side-header {
		gap: 12px;
	}

	.mobile-header_social {
		display: block;
	}

	.search-results {
		max-height: calc(69px* 2.5 + 16px* 2);
	}

	.popover {
		max-height: calc(100vh - 68px - 16px);
	}
	
	.mobile-navigation {
		padding: 16px 18px;
	}
}
/* ── modals.css ── */
.popup {
    background-color: transparent;
    border: none;
    outline: none;
    padding: 9px;
    max-width: 100%;
    margin: auto auto;
    max-height: 100%;
    box-sizing: border-box;
    overflow: auto;
}

.popup-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
    backdrop-filter: blur(30px);
    background: rgba(24, 22, 27, 0.95);
    cursor: pointer;
}

.popup-frame {
    width: 460px;
    max-width: 100%;
    padding: 30px;
    background: #211E25;
    border-radius: 15px;
    box-shadow: inset 0 0 0 1px rgba(136, 136, 136, 0.15);
    box-sizing: border-box;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.popup-title {
    font-weight: 500;
    font-size: 16px;
    color: #fff;
}

.popup-close {
    border-radius: 6px;
    padding: 6px 9px 6px 6px;
    background: rgba(249, 241, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(136, 136, 136, 0.15);
    color: #fff;
    display: flex;
    gap: 6px;
    align-items: center;
    border: none;
    outline: none;
    font-size: 12px;
    cursor: pointer;
    transition: .2s;
}

.popup-close:hover {
    background: rgba(249, 241, 255, 0.1);
}

.popup_items {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.product_item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product_item.disabled {
    opacity: 0.5;
    filter: grayscale(50%);
}

.product_card {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 9px;
    font-size: 0;
    background-color: #8a8a8a1e;
}


.product_card.wb {
    aspect-ratio: 185/247;
}

.product_card img {
    width: 100%;
}

.product_card-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(3px);
    transform: scale(1.01);
}

.product_card-full {
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.25s ease;
    object-fit: cover;
}

.product_card-full.loaded {
    opacity: 1;
}

.product_rating {
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    letter-spacing: 0.02em;
    gap: 6px;
    text-decoration: none;
    color: #6e6e6e !important;
}

.product_rating-stars {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #ffc300;
}

.product_rating-stars .star {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url('/ui/star.svg') no-repeat center center;
    background-size: contain;
}

.product_title, .product_title a {
    font-weight: 400;
    font-size: 14px;
    color: #848484 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.product_seller {
    font-weight: 500;
    color: #fff !important;
    text-decoration: none;
    cursor: pointer;
}

.product_seller:hover {
    text-decoration: underline;
}

.product_buttons {
    display: flex;
    gap: 12px;
}

.product_button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    padding: 12px;
    transition: .2s;
    background: rgba(161, 161, 161, 0.05);
    color: #fff !important;
    text-decoration: none;
    gap: 10px;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
}

.product_button:hover {
    background: rgba(161, 161, 161, 0.1);
}

.product_button.wb {
    background: rgba(148, 30, 140, 0.116);
    box-shadow: inset 0 0 0 1px rgba(230, 102, 221, 0.192);
}

.product_button.wb:hover {
    background: rgb(148, 30, 140);
}

.product_button.wb .product_button-icon {
    width: 16px;
    height: 16px;
    background: url('/ui/wb-icon-color.svg') no-repeat center center;
    background-size: contain;
}

.product-subinfo {
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    color: #848484;
}

.product-subinfo span{
    color: #e4e4e4;
}

.product-subinfo .greem{
    color: #5fca88;
}

.product-subinfo .yellow{
    color: #e4a762;
}

.product-subinfo .red{
    color: #cf5a5a;
}

.product_rating-reviews {
    cursor: pointer;
    transition: .2s;
}

.product_rating-reviews:hover {
    color: #fff;
    text-decoration: underline;
}

.product_reviews {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 10px;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product_review {
    padding: 16px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    font-size: 14px;
    color: #ccc;
    border-radius: 9px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product_review:last-child {
    border-bottom: none;
}

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

.product_review-user {
    color: #fff;
    font-weight: 500;
    font-size: 14px;
}

.product_review-stars {
    display: inline-flex;
    gap: 2px;
}

.product_review-stars .star {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url('/ui/star.svg') no-repeat center center;
    background-size: contain;
}

.product_review-text {
    margin-bottom: 4px;
    line-height: 1.4;
}

.product_review-pros {
    /* color: #98e9b7; */
    margin-bottom: 2px;
    font-size: 14px;
}

.product_review-cons {
    /* color: #f09595; */
    font-size: 14px;
}

.product_reviews-loading,
.product_reviews-empty {
    text-align: center;
    opacity: .6;
    padding: 8px 0;
    font-size: 13px;
    color: #fff;
}

.product_reviews-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: auto;
    padding-top: 30px;
}

.wb-reviews-modal .popup-title {
    font-size: 16px;
    font-weight: 600;
}

.product_review-item {
    padding: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.product_reviews-count {
    font-size: 12px;
    opacity: .5;
    margin-bottom: 10px;
}

.product_reviews-more {
    text-align: center;
    padding: 12px 0 4px;
}

.product_reviews-more-btn {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    color: #ccc;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}

.product_reviews-more-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.12);
}

.product_reviews-more-btn:disabled {
    opacity: .5;
    cursor: default;
}

.product_review-date {
    font-size: 11px;
    opacity: .5;
    margin-left: auto;
}

.product_review-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.product_review-photo {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
}

.product_review-bables {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.product_review-bable {
    font-size: 11px;
    background: rgba(255,255,255,0.07);
    border-radius: 4px;
    padding: 2px 7px;
    color: #aaa;
}

.product_review-answer {
    margin-top: 6px;
    font-size: 12px;
    color: #888;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    padding: 6px 10px;
}

.product_review-answer-label {
    font-weight: 600;
    color: #aaa;
}

@media screen and (max-width: 600px) {
    .popup {
        padding: 6px;
    }
    .wb-reviews-modal .popup-frame {
        min-width: unset;
        max-height: 90vh;
    }
    .popup-frame {
        padding: 20px;
    }

    .product_button {
        font-size: 12px;
    }

    .product_title {
        font-size: 12px;
    }

    .popup_items {
        gap: 16px;
        margin-top: 20px;
    }

    .product_review {
        font-size: 12px;
    }
}
/* ── find-card-modal.css ── */
/*
 * find-card-modal.css
 * Новая модалка «Поиск карточки» (#findCard).
 * Двух-экранный поток: start (выбор коллекции) → list (юзеры выбранной коллекции).
 *
 * Префикс классов: .fcm__*
 * Палитра и цвета коллекций взяты из card.css (sell #1b7bce, wishlist #e32a92,
 * like #F44336, has #009B76, drop — градиент 4FA0FF→524FFF→B338FF).
 *
 * SVG-спрайт с иконками подключён в modules/modals.ejs рядом с диалогом.
 */

#findCard.modal { padding: 0; }
#findCard .modal-frame {
  padding: 0;
  max-width: 520px;
  width: 100%;
  background: transparent;
  box-shadow: none;
}
/* Бэкдроп без блюра. Специфичность поднята, чтобы перебить #dark .modal>.backdrop (index.css:3367).
   Прозрачность задаётся inline (transform follows swipe — см. modules/modals.ejs). */
#dark #findCard.modal > .backdrop,
#findCard.modal > .backdrop {
  background: rgba(8, 6, 12, 0.72);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.fcm {
  --fcm-bg:           #18161b;
  --fcm-surface-1:    #1f1d23;
  --fcm-surface-2:    #2a2730;
  --fcm-surface-3:    #353141;
  --fcm-border:       rgba(255, 255, 255, 0.06);
  --fcm-border-2:     rgba(255, 255, 255, 0.10);
  --fcm-text:         #fefefe;
  --fcm-text-soft:    #A49CC1;
  --fcm-text-dim:     #6b6477;
  --fcm-accent:       #7F2DE8;
  --fcm-accent-2:     #ac51ff;
  --fcm-accent-soft:  rgba(127, 45, 232, 0.14);
  --fcm-success:      #0EAD69;
  --fcm-danger:       #ff6666;
  --fcm-danger-soft:  rgba(255, 102, 102, 0.10);
  --fcm-tg:           #4FA0FF;
  --fcm-c-sell:       #1b7bce;
  --fcm-c-wishlist:   #e32a92;
  --fcm-c-like:       #F44336;
  --fcm-c-has:        #009B76;
  --fcm-c-drop:       linear-gradient(120deg, #4FA0FF 0%, #524FFF 50%, #B338FF 100%);
  --fcm-c-drop-solid: #7F2DE8;
  --fcm-radius-l: 18px;
  --fcm-radius-m: 12px;
  --fcm-radius-s: 9px;
  /* Drop-shadow + внутренняя обводка как у .modal-frame в #dark (см. static/styles/index.css:2966) */
  --fcm-shadow: 0 6px 20px rgba(19, 20, 24, 0.56), inset 0 0 0 1px #2a2c2e;

  background: var(--fcm-bg);
  color: var(--fcm-text);
  display: flex; flex-direction: column;
  position: relative;
  width: 100%;
  border-radius: var(--fcm-radius-l);
  overflow: hidden;
  box-shadow: var(--fcm-shadow);
  /* Стартовый экран — по контенту с потолком; в режиме списка — фикс 90vh (см. .fcm--list-mode) */
  max-height: 90vh;
  font-size: 14px;
  line-height: 1.4;
  will-change: transform, opacity;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              opacity   0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
/* В режиме просмотра коллекции окно занимает максимум — даже с одной карточкой не сжимается */
.fcm--list-mode { height: 90vh; }
@media (max-width: 540px) {
  .fcm--list-mode { height: 85vh; }
}

.fcm * { box-sizing: border-box; }
.fcm .ic { width: 16px; height: 16px; display: inline-block; flex-shrink: 0; }
.fcm .ic--20 { width: 20px; height: 20px; }
.fcm .ic--22 { width: 22px; height: 22px; }
.fcm .ic--24 { width: 24px; height: 24px; }

/* На мобилке — bottom-sheet прижатый к низу, со свободным пространством сверху.
   ВАЖНО: не переопределяем display (иначе <dialog> в закрытом состоянии перестаёт скрываться
   и блокирует клики). Просто меняем маржины — браузер сам спрячет dialog без атрибута [open]. */
@media (max-width: 540px) {
  #findCard.modal {
    margin: auto auto 0 auto;   /* прижато к нижнему краю; сверху — auto-пространство */
    padding: 0;
    width: 100%;
    max-width: 100%;
  }
  #findCard .modal-frame {
    max-width: 100%;
    width: 100%;
  }
  .fcm {
    border-radius: 18px 18px 0 0;
    max-height: 85vh;
    box-shadow: 0 -6px 20px rgba(19, 20, 24, 0.56), inset 0 0 0 1px #2a2c2e;
  }
}
.fcm--dragging { transition: none; }

.fcm__handle {
  display: none;
}
@media (max-width: 540px) {
  /* Tap target — невидимая область ~24px высотой, внутри визуальная палочка */
  .fcm__handle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding-top: 8px;
    cursor: grab;
    touch-action: none;     /* критично: блокирует скролл странички, оставляет touch для drag */
    user-select: none;
  }
  .fcm__handle::before {
    content: '';
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.22);
    transition: background 0.15s;
  }
  .fcm__handle:active { cursor: grabbing; }
  .fcm__handle:active::before { background: rgba(255, 255, 255, 0.32); }
}

/* ── Hero ─────────────────────────────────────────────────────── */
.fcm__hero {
  flex-shrink: 0;                /* не сжимаем шапку, даже при огромном списке */
  display: flex; gap: 14px;
  padding: 16px 20px 14px;
  position: relative;
  border-bottom: 1px solid var(--fcm-border);
}
@media (max-width: 540px) {
  .fcm__handle { flex-shrink: 0; }
}
.fcm__close, .fcm__back {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--fcm-surface-2);
  border: 1px solid var(--fcm-border);
  color: var(--fcm-text-soft);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  padding: 0;
}
.fcm__close:hover, .fcm__back:hover { background: var(--fcm-surface-3); color: var(--fcm-text); }
.fcm__close { position: absolute; top: 14px; right: 14px; }
.fcm__back  { margin-top: 2px; }

.fcm__thumb {
  flex-shrink: 0;
  width: 56px; height: 78px;
  border-radius: .2rem;
  position: relative; overflow: hidden;
  box-shadow: 0 4px 14px -3px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.06);
  background-size: cover;
  background-position: center;
}
.fcm__meta { flex: 1; min-width: 0; padding-right: 38px; }
.fcm__card-name {
  font-size: 16px; font-weight: 600;
  margin: 0 0 4px; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--fcm-text);
}
.fcm__card-sub {
  color: var(--fcm-text-soft); font-size: 12px;
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.fcm__price-row {
  margin-top: 8px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.fcm__price-hint {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 10px;
  background: var(--fcm-surface-1);
  border: 1px solid var(--fcm-border);
  border-radius: 999px;
  font-size: 11.5px;
  cursor: help;
}
.fcm__price-hint > span:first-child { color: var(--fcm-text-soft); }
.fcm__price-hint b { font-weight: 600; color: var(--fcm-text); font-variant-numeric: tabular-nums; }
.fcm__price-hint--drop {
  background: rgba(127, 45, 232, 0.10);
  border-color: rgba(127, 45, 232, 0.22);
}
.fcm__price-hint--drop b { color: var(--fcm-accent-2); }
.fcm__price-hint--loading {
  color: var(--fcm-text-dim);
}

.fcm__hero--compact .fcm__thumb { width: 40px; height: 56px; }
.fcm__hero--compact .fcm__card-name { font-size: 14px; margin-bottom: 2px; }
.fcm__hero--compact .fcm__card-sub  { font-size: 11.5px; }
.fcm__hero--compact .fcm__price-row { margin-top: 6px; }
.fcm__hero--compact .fcm__price-hint { padding: 3px 9px; font-size: 11px; }

/* ─── Start screen: collection chooser ─────────────────────────── */
/* flex: 0 1 auto + min-height: 0 — высота по контенту, может сжаться внутри max-height родителя */
.fcm__start {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 20px;
}
.fcm__start-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fcm-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0 2px 12px;
}
.fcm__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 540px) {
  .fcm__start { padding: 14px 14px 16px; }
  .fcm__grid  { grid-template-columns: 1fr; }
}

.fcm__choice {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--fcm-surface-1);
  border: 1px solid var(--fcm-border);
  border-radius: var(--fcm-radius-m);
  padding: 13px 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  color: inherit;
  position: relative;
  font-family: inherit;
}
.fcm__choice:hover {
  background: var(--fcm-surface-2);
  border-color: var(--fcm-border-2);
  transform: translateY(-1px);
}
.fcm__choice-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fcm-text-soft);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
}
.fcm__choice--sell .fcm__choice-icon {
  color: var(--fcm-c-sell);
  background: rgba(27, 123, 206, 0.12);
  border-color: rgba(27, 123, 206, 0.22);
}
.fcm__choice--wishlist .fcm__choice-icon {
  color: var(--fcm-c-wishlist);
  background: rgba(227, 42, 146, 0.12);
  border-color: rgba(227, 42, 146, 0.22);
}
.fcm__choice--like .fcm__choice-icon {
  color: var(--fcm-c-like);
  background: rgba(244, 67, 54, 0.12);
  border-color: rgba(244, 67, 54, 0.22);
}
.fcm__choice--has .fcm__choice-icon {
  color: var(--fcm-c-has);
  background: rgba(0, 155, 118, 0.12);
  border-color: rgba(0, 155, 118, 0.22);
}
.fcm__choice--drop .fcm__choice-icon {
  color: #fff;
  background: var(--fcm-c-drop);
  border-color: rgba(127, 45, 232, 0.35);
  box-shadow: 0 4px 14px -4px rgba(127, 45, 232, 0.55);
}
.fcm__choice--drop { grid-column: 1 / -1; }

.fcm__choice-body { flex: 1; min-width: 0; }
.fcm__choice-label {
  font-weight: 600; font-size: 13.5px;
  color: var(--fcm-text); line-height: 1.2;
}
.fcm__choice-meta {
  font-size: 11.5px; color: var(--fcm-text-soft);
  margin-top: 3px;
  display: flex; gap: 4px; align-items: baseline; flex-wrap: wrap;
}
.fcm__choice-meta b {
  color: var(--fcm-text); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fcm__choice-meta-extra { color: var(--fcm-text-dim); }
.fcm__choice-chev {
  color: var(--fcm-text-dim);
  transition: transform 0.15s, color 0.15s;
}
.fcm__choice:hover .fcm__choice-chev {
  color: var(--fcm-text-soft);
  transform: translateX(2px);
}
.fcm__choice--empty {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* ─── Horizontal collection nav (list view) ────────────────────── */
.fcm__col-nav {
  flex-shrink: 0;                /* не сжимать табы по вертикали при длинном списке */
  display: flex; gap: 2px;
  padding: 0 14px;
  overflow-x: auto;
  border-bottom: 1px solid var(--fcm-border);
  scrollbar-width: none;
}
.fcm__col-nav::-webkit-scrollbar { display: none; }
@media (max-width: 540px) {
  .fcm__col-nav { padding: 0 10px; }
}
.fcm__col-nav-item {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 11px;
  background: transparent;
  border: 0;
  color: var(--fcm-text-soft);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s;
  font-family: inherit;
}
.fcm__col-nav-item:hover { color: var(--fcm-text); }
.fcm__col-nav-item .ic { color: currentColor; opacity: 0.85; }
.fcm__col-nav-item .count {
  background: rgba(255,255,255,0.06);
  color: var(--fcm-text-soft);
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fcm__col-nav-item--sell.active     { color: var(--fcm-c-sell);     border-bottom-color: var(--fcm-c-sell); }
.fcm__col-nav-item--wishlist.active { color: var(--fcm-c-wishlist); border-bottom-color: var(--fcm-c-wishlist); }
.fcm__col-nav-item--like.active     { color: var(--fcm-c-like);     border-bottom-color: var(--fcm-c-like); }
.fcm__col-nav-item--has.active      { color: var(--fcm-c-has);      border-bottom-color: var(--fcm-c-has); }
.fcm__col-nav-item--drop.active     { color: var(--fcm-c-drop-solid); border-bottom-color: var(--fcm-c-drop-solid); }
.fcm__col-nav-item.active .ic { opacity: 1; }
.fcm__col-nav-item.active .count { background: rgba(255,255,255,0.10); color: var(--fcm-text); }

/* ─── Toolbar ──────────────────────────────────────────────────── */
.fcm__toolbar {
  flex-shrink: 0;                /* не даём тулбару сжиматься внутри .fcm */
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px 8px;
  flex-wrap: wrap;
}
@media (max-width: 540px) {
  .fcm__toolbar { padding: 9px 14px 6px; }
}
.fcm__chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent;
  border: 1px solid var(--fcm-border);
  color: var(--fcm-text-soft);
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
  font-family: inherit;
}
.fcm__chip:hover { background: var(--fcm-surface-1); color: var(--fcm-text); }
.fcm__chip.active {
  background: var(--fcm-accent-soft);
  border-color: rgba(127, 45, 232, 0.35);
  color: var(--fcm-text);
}
.fcm__chip .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--fcm-accent-2);
  display: inline-block;
}
.fcm__balance {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  background: var(--fcm-accent-soft);
  border: 1px solid rgba(127, 45, 232, 0.20);
  border-radius: 999px;
  font-size: 12px; color: var(--fcm-text);
  font-variant-numeric: tabular-nums;
}
.fcm__balance .ic { color: var(--fcm-accent-2); }
.fcm__balance b { font-weight: 700; }

.fcm__sort-wrap { position: relative; }
.fcm__sort-menu {
  position: absolute; top: calc(100% + 4px); left: 0;
  background: var(--fcm-surface-2);
  border: 1px solid var(--fcm-border-2);
  border-radius: var(--fcm-radius-s);
  padding: 4px;
  min-width: 200px;
  box-shadow: var(--fcm-shadow);
  z-index: 5;
}
.fcm__sort-menu button {
  display: flex; width: 100%;
  align-items: center; gap: 6px;
  border: 0; background: transparent;
  color: var(--fcm-text-soft);
  text-align: left;
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  font-family: inherit;
}
.fcm__sort-menu button:hover { background: var(--fcm-surface-3); color: var(--fcm-text); }
.fcm__sort-menu button.active { color: var(--fcm-accent-2); background: var(--fcm-surface-3); }
.fcm__sort-menu button .ic-check {
  margin-left: auto; opacity: 0; color: var(--fcm-accent-2);
}
.fcm__sort-menu button.active .ic-check { opacity: 1; }

.fcm__filter-pills {
  flex-shrink: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 20px 6px;
}
@media (max-width: 540px) {
  .fcm__filter-pills { padding: 0 14px 4px; }
}

/* ─── List ──────────────────────────────────────────────────────── */
/* В .fcm--list-mode (height: 90vh) список растёт и заполняет оставшуюся высоту,
   а если контент длиннее — корректно скроллит благодаря min-height: 0. */
.fcm__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 20px 20px;
  display: flex; flex-direction: column; gap: 7px;
}
@media (max-width: 540px) {
  .fcm__list { padding: 4px 14px 16px; }
}

.fcm__row {
  display: block; text-decoration: none; color: inherit;
  background: var(--fcm-surface-1);
  border: 1px solid var(--fcm-border);
  border-radius: var(--fcm-radius-m);
  padding: 11px 13px;
  transition: all 0.15s;
}
.fcm__row:hover {
  background: var(--fcm-surface-2);
  border-color: var(--fcm-border-2);
}
.fcm__row--no-tg { opacity: 0.55; }
.fcm__row--no-tg:hover { opacity: 0.8; }
.fcm__row--out { opacity: 0.42; }
.fcm__row--out:hover { opacity: 0.65; }
.fcm__row-head { display: flex; align-items: center; gap: 10px; }

.fcm__avatar {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 600; font-size: 13px;
  position: relative;
  background-size: cover;
  background-position: center;
}
.fcm__avatar--online::after {
  content: '';
  position: absolute; bottom: -1px; right: -1px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--fcm-success);
  border: 2px solid var(--fcm-surface-1);
}
.fcm__row:hover .fcm__avatar--online::after { border-color: var(--fcm-surface-2); }

.fcm__user-info { flex: 1; min-width: 0; overflow: hidden; }
.fcm__username {
  display: flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 13.5px;
  color: var(--fcm-text); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fcm__badge {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
}
.fcm__sub-line {
  display: flex; align-items: center; gap: 6px;
  margin-top: 3px;
  color: var(--fcm-text-dim); font-size: 11.5px;
  overflow: hidden;
}
.fcm__tg {
  color: var(--fcm-tg);
  font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fcm__no-tg {
  color: var(--fcm-text-dim);
  font-size: 11px;
  font-style: italic;
}
.fcm__last-seen { color: var(--fcm-text-dim); white-space: nowrap; }
.fcm__sub-line .dot-sep {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--fcm-text-dim); flex-shrink: 0;
}

.fcm__right {
  flex-shrink: 0;
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 4px;
  text-align: right;
}
.fcm__price {
  font-weight: 700; font-size: 14.5px;
  color: var(--fcm-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fcm__count {
  font-size: 10.5px; color: var(--fcm-text-soft);
  background: rgba(255,255,255,0.04);
  padding: 1.5px 7px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--fcm-border);
}
.fcm__buy {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(120deg, rgba(79, 160, 255, 0.5) 0%, transparent 40%, rgba(179, 56, 255, 0.7) 100%), #5c2eaa;
  color: #fff; border: 0;
  padding: 8px 13px;
  border-radius: var(--fcm-radius-s);
  font-weight: 600; font-size: 12.5px;
  cursor: pointer; transition: all 0.15s;
  box-shadow: inset 0 0 0 1px rgba(127, 45, 232, 0.55);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
}
.fcm__buy .ic { width: 13px; height: 13px; }
.fcm__buy:hover { background-color: #6c3ec0; }
.fcm__buy:active { transform: translateY(1px); }
.fcm__buy--low {
  background: rgba(255,255,255,0.04);
  color: var(--fcm-text-dim);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  cursor: not-allowed;
}
.fcm__buy--low:hover { background-color: rgba(255,255,255,0.04); }
.fcm__out-label {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  background: var(--fcm-danger-soft);
  color: var(--fcm-danger);
  border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
  border: 1px solid rgba(255, 102, 102, 0.18);
}
.fcm__not-sale-label {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--fcm-text-soft);
  border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
  border: 1px solid var(--fcm-border-2);
}

.fcm__tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 8px;
}
.fcm__tag {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 500;
  background: var(--fcm-surface-3);
  color: var(--fcm-text-soft);
  border: 1px solid var(--fcm-border);
}
.fcm__tag--green  { background: rgba(14, 173, 105, 0.10); color: #5fcf90; border-color: rgba(14, 173, 105, 0.20); }
.fcm__tag--blue   { background: rgba(79, 160, 255, 0.10); color: #93c5fd; border-color: rgba(79, 160, 255, 0.20); }
.fcm__tag--pink   { background: rgba(255, 107, 138, 0.10); color: #fb7185; border-color: rgba(255, 107, 138, 0.20); }
.fcm__tag--orange { background: rgba(245, 158, 11, 0.10); color: #fcd34d; border-color: rgba(245, 158, 11, 0.20); }
.fcm__tag--violet { background: rgba(172, 81, 255, 0.10); color: #c4b5fd; border-color: rgba(172, 81, 255, 0.20); }

.fcm__comment {
  margin-top: 6px;
  font-size: 12px;
  color: var(--fcm-text-soft);
  line-height: 1.45;
}
.fcm__comment::before { content: '«'; opacity: 0.65; margin-right: 1px; }
.fcm__comment::after  { content: '»'; opacity: 0.65; margin-left: 1px; }

.fcm__empty {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 20px;
  text-align: center; gap: 6px;
  color: var(--fcm-text-dim);
}
.fcm__empty-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--fcm-surface-1);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
  border: 1px solid var(--fcm-border);
  color: var(--fcm-text-soft);
}
.fcm__empty-title { color: var(--fcm-text-soft); font-weight: 600; font-size: 13.5px; }
.fcm__empty-hint { font-size: 12px; max-width: 260px; line-height: 1.5; }

.fcm__skeleton {
  background: var(--fcm-surface-1);
  border: 1px solid var(--fcm-border);
  border-radius: var(--fcm-radius-m);
  padding: 11px 13px;
  display: flex; gap: 10px; align-items: center;
}
.fcm__skeleton .sk-circle { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.fcm__skeleton .sk-col { flex: 1; }
.fcm__skeleton .sk-line { height: 10px; border-radius: 4px; }
.fcm__skeleton .sk-line + .sk-line { margin-top: 6px; }
.fcm-sk {
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: fcm-shimmer 1.5s linear infinite;
}
@keyframes fcm-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── gamification.css ── */
/* ═══════════════════════════════════════════════════════════
   GAMIFICATION SYSTEM — Level bar, Achievements & Shop modals
   ═══════════════════════════════════════════════════════════ */

/* ── Profile frame: position context for customize btn ── */
.profile-header_frame { position: relative; }

/* ── Customize button ── */
.profile-customize-btn {
  position: absolute; top: 10px; right: 12px; z-index: 4;
  background: rgba(0,0,0,0.30);
  backdrop-filter: blur(16px) saturate(0.7);
  -webkit-backdrop-filter: blur(16px) saturate(0.7);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 7px; padding: 5px 12px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.65); cursor: pointer; font-family: inherit;
  transition: background .15s, border-color .15s, color .15s;
}
.profile-customize-btn:hover {
  background: rgba(0,0,0,0.50); border-color: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.88);
}

/* ── User badge (значок достижения) ── */
.user-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  font-size: 13px; line-height: 1;
  cursor: default; flex-shrink: 0; user-select: none;
  vertical-align: middle; position: relative;
  transition: transform 0.15s, box-shadow 0.15s;
  margin-left: 6px;
  transform: translateY(-1px);
}
.user-badge:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.35); }

/* CSS-тултип */
.user-badge[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%; transform: translateX(-50%);
  background: rgba(16,14,20,0.97);
  color: rgba(255,255,255,0.92);
  font-size: 11px; font-weight: 400;
  padding: 6px 10px; border-radius: 7px;
  white-space: normal; text-align: center;
  max-width: 200px; min-width: 100px;
  pointer-events: none; opacity: 0;
  transition: opacity 0.15s; z-index: 9999;
  box-shadow: 0 4px 18px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.09);
}
.user-badge[data-tooltip]:hover::after { opacity: 1; }

/* Значок в строке ника — чуть крупнее */
.profile-info_username .user-badge { width: 26px; height: 26px; font-size: 19px; border-radius: 7px; }


/* Значок в мини-профиле (profiles.ejs) */
.mini-profile-badge { width: 18px; height: 18px; font-size: 11px; border-radius: 0; margin-left: 0; flex-shrink: 0; transform: translate(0) }

/* ── Level + XP card ── */
.profile-gm-bar {
  display: flex; align-items: center; gap: 18px;
  margin: 24px 0 0;
  padding: 13px 16px 14px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.012));
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 1px 0 rgba(0,0,0,0.18);
}
.pgb-meta {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px; min-width: 56px; padding-right: 18px;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.pgb-meta__label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.16em;
  color: rgba(200,190,230,0.45); text-transform: uppercase;
  line-height: 1;
}
.pgb-meta__num {
  font-size: 20px; font-weight: 700; color: rgba(255,255,255,0.95);
  line-height: 1.05; letter-spacing: -0.04em;
  margin-top: 4px;
}
.pgb-progress { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pgb-progress__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; line-height: 1;
}
.pgb-progress__xp {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.78);
  letter-spacing: -0.01em;
}
.pgb-progress__next {
  font-size: 11px; color: rgba(200,190,230,0.4); white-space: nowrap;
}
.pgb-track {
  height: 6px; background: rgba(255,255,255,0.06);
  border-radius: 99px; overflow: hidden;
  box-shadow: inset 0 1px 1.5px rgba(0,0,0,0.25);
}
.pgb-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #6e42c8 0%, #9f6eff 80%, #c4aeff00 101%);
  transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 6px;
}
.pgb-ach-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.05); border: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09);
  border-radius: 10px; padding: 9px 12px;
  font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.85);
  cursor: pointer; white-space: nowrap; font-family: inherit;
  transition: background .15s, color .15s, box-shadow .15s;
  align-self: stretch;
}
.pgb-ach-btn:hover {
  background: rgba(255,255,255,0.09);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
  color: #fff;
}
.pgb-ach-btn__chev {
  font-size: 18px; line-height: 1; opacity: 0.45;
  margin-top: -2px; font-weight: 400;
}

/* Админская кнопка «Анализ» — золотистый акцент */
.pgb-ach-btn.pgb-ach-btn--admin {
  color: #ffd166;
  box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.30);
}
.pgb-ach-btn.pgb-ach-btn--admin:hover {
  background: rgba(255, 209, 102, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.55);
  color: #ffe066;
}

/* ── Modal overlay ── */
#gm-app { font-family: inherit; }
[v-cloak]#gm-app { display: none; }
.gm-overlay {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(4,2,12,0.80);
  backdrop-filter: blur(8px) saturate(0.65);
  -webkit-backdrop-filter: blur(8px) saturate(0.65);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: gmFadeIn .18s ease;
}
@keyframes gmFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Modal shell ── */
.gm-modal {
    background: #18161b;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 20px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03);
    display: flex; flex-direction: column; overflow: hidden;
    animation: gmSlideUp .22s cubic-bezier(0.34,1.1,0.64,1);
    max-height: min(88vh, 1080px);
    padding: 0;
}

.gm-modal .profile-header_frame {margin: 0 16px}
@keyframes gmSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.gm-modal--ach  { width: min(96vw, 560px); }
.gm-modal--shop { width: 100%; }    /* ширина задаётся классом container */
.gm-modal--interests { width: min(94vw, 620px); }
.gm-hdr--no-border { border-bottom: none !important; padding-bottom: 12px; }

/* ── Header ── */
.gm-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.gm-hdr__title { font-size: 15px; font-weight: 600; color: #f2f0f7; flex: 1; letter-spacing: -0.01em; }
.gm-hdr__badge {
  background: rgba(50,215,75,0.13); color: #4cd964;
  font-size: 11px; font-weight: 700; padding: 2px 9px;
  border-radius: 99px; letter-spacing: 0.02em; white-space: nowrap;
}
.gm-hdr__btn {
  background: rgba(255,255,255,0.04); border: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  border-radius: 8px; padding: 5px 13px; font-size: 12px; font-weight: 500;
  color: rgba(200,190,230,0.6); cursor: pointer; font-family: inherit;
  transition: background .14s, color .14s, box-shadow .14s; white-space: nowrap;
}
.gm-hdr__btn:hover {
  background: rgba(255,255,255,0.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  color: rgba(200,190,230,0.9);
}
.gm-hdr__balance {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  border-radius: 99px; padding: 5px 12px;
  font-size: 12px; color: rgba(200,190,230,0.4); white-space: nowrap;
}
.gm-hdr__balance::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe066 0%, #ffd60a 60%, #c9a227 100%);
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(201,162,39,0.35);
}
.gm-hdr__balance b { color: rgba(255,255,255,0.9); font-weight: 600; }
.gm-close {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.05); border: none;
  color: rgba(200,190,230,0.45); font-size: 16px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .14s, color .14s; flex-shrink: 0;
}
.gm-close:hover { background: rgba(255,255,255,0.1); color: rgba(200,190,230,0.85); }

/* ── Tabs ── */
.gm-tabs {
  display: flex; gap: 4px; padding: 8px 14px 7px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-wrap: wrap; flex-shrink: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
}
.gm-tabs::-webkit-scrollbar { display: none; }
.gm-tab {
  padding: 5px 13px; border-radius: 7px; font-size: 12px; font-weight: 500;
  color: rgba(200,190,230,0.45); cursor: pointer; white-space: nowrap;
  transition: background .13s, color .13s, box-shadow .13s;
  user-select: none; flex-shrink: 0;
}
.gm-tab:hover { color: rgba(200,190,230,0.75); }
.gm-tab.active {
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
}

/* ── Scrollable body ── */
.gm-body {
  flex: 1; overflow-y: auto;
  padding: 10px 12px 14px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent;
  display: flex; flex-direction: column; gap: 6px;
}
.gm-body::-webkit-scrollbar { width: 4px; }
.gm-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 99px; }

/* ── Empty state ── */
.gm-empty { padding: 48px 24px; text-align: center; color: rgba(200,190,230,0.25); font-size: 13px; }

/* ── Achievement card ── */
.ach-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.022);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
  border-radius: 12px;
  transition: background .13s, box-shadow .13s;
}
.ach-row:hover {
  background: rgba(255,255,255,0.038);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.075);
}
.ach-row--unlocked:hover {
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(76,217,100,0.28);
}
.ach-row--claimed { opacity: 0.45; }
.ach-row--claimed:hover { opacity: 0.7; }

/* ── Category section header ── */
.ach-sep {
  padding: 16px 4px 4px;
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.55);
  pointer-events: none;
  letter-spacing: -0.01em;
}
.ach-sep:first-child { padding-top: 4px; }

/* ── Reward badge tile (left side) ── */
.ach-orb {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
  line-height: 1; gap: 2px;
  position: relative;
}
.ach-orb--unlocked {
  background: rgba(76,217,100,0.10);
  box-shadow: inset 0 0 0 1px rgba(76,217,100,0.32);
}
.ach-orb--claimed {
  background: rgba(76,217,100,0.05);
  box-shadow: inset 0 0 0 1px rgba(76,217,100,0.15);
}
.ach-orb__val {
  font-size: 16px; font-weight: 700; color: rgba(255,255,255,0.88);
  letter-spacing: -0.035em;
}
.ach-orb--unlocked .ach-orb__val { color: #c4f5cb; }
.ach-orb--claimed  .ach-orb__val { color: rgba(255,255,255,0.65); }
.ach-orb__unit {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(200,190,230,0.4);
  margin-top: 1px;
}
.ach-orb--unlocked .ach-orb__unit { color: rgba(196,245,203,0.7); }
.ach-orb--claimed  .ach-orb__unit { color: rgba(255,255,255,0.32); }
/* Coin sub-reward — небольшой chip ПОД плиткой, не внутри */
.ach-orb__sub {
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 600;
    color: rgb(255 255 255 / 85%);
    background: rgb(33 33 33 / 95%);
    padding: 1px 6px;
    border-radius: 99px;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 25%);
    white-space: nowrap;
    letter-spacing: -0.005em;
    padding: 4px 7px;
}

/* ── Content ── */
.ach-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ach-name {
  font-size: 14.5px; font-weight: 600; color: #f5f3fa;
  display: flex; align-items: center; gap: 7px;
  line-height: 1.2; letter-spacing: -0.012em;
}
.ach-cat-icon { font-size: 12px; opacity: 0.45; font-style: normal; flex-shrink: 0; }
.ach-desc {
  font-size: 12.5px; color: rgba(200,190,230,0.5);
  line-height: 1.4;
}

/* ── Progress ── */
.ach-prog { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; grid-column-start: 1; grid-column-end: 4; }

/* Shimmer loading skeleton */
@keyframes achShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.ach-prog-shimmer {
  height: 4px; border-radius: 99px; margin-top: 4px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.03) 0%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.03) 100%
  );
  background-size: 200% 100%;
  animation: achShimmer 1.6s linear infinite;
}

/* Numeric bar */
.ach-prog-item { display: flex; flex-direction: column; gap: 5px; }
.ach-prog-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
}
.ach-prog-label { font-size: 11.5px; color: rgba(200,190,230,0.55); line-height: 1; font-weight: 500; }
.ach-prog-pct   { font-size: 11px; color: rgba(200,190,230,0.4); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ach-prog-pct--done { color: rgba(76,217,100,0.75); font-weight: 600; }
.ach-prog-track {
  height: 3px; background: rgba(255,255,255,0.05);
  border-radius: 99px; overflow: hidden;
}
.ach-prog-fill {
  height: 100%; border-radius: 99px; min-width: 3px;
  background: linear-gradient(90deg, rgba(200,190,230,0.4), rgba(200,190,230,0.6));
  transition: width .55s cubic-bezier(.25,.8,.25,1);
}
.ach-row--unlocked .ach-prog-fill {
  background: linear-gradient(90deg, rgba(50,180,80,0.6), rgba(76,217,100,0.85));
  box-shadow: 0 0 6px rgba(76,217,100,0.3);
}

/* Boolean check row */
.ach-check-row { display: flex; align-items: center; gap: 8px; }
.ach-check-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}
.ach-check-dot--ok {
  background: rgba(76,217,100,0.85);
  box-shadow: inset 0 0 0 1px rgba(76,217,100,1), 0 0 6px rgba(76,217,100,0.4);
}
.ach-check-lbl { font-size: 12px; color: rgba(200,190,230,0.5); }
.ach-check-lbl--ok { color: rgba(76,217,100,0.85); font-weight: 500; }

/* Action area (right side, vertically centered) */
.ach-action {
  display: flex; align-items: center; padding-left: 4px;
  flex-shrink: 0;
}

/* Claimed date */
.ach-claimed-date { font-size: 11px; color: rgba(200,190,230,0.35); white-space: nowrap; }

/* Claim button — App Store "GET" pill: subtle, не приторно */
.ach-claim-btn {
  background: rgba(76,217,100,0.13); border: none;
  box-shadow: inset 0 0 0 1px rgba(76,217,100,0.22);
  color: #4cd964; font-size: 12px; font-weight: 700;
  padding: 6px 16px; min-width: 78px; border-radius: 99px;
  cursor: pointer; white-space: nowrap; font-family: inherit;
  letter-spacing: -0.005em;
  text-align: center;
  transition: background .13s, box-shadow .13s, color .13s;
}
.ach-claim-btn:hover {
  background: rgba(76,217,100,0.22);
  box-shadow: inset 0 0 0 1px rgba(76,217,100,0.4);
  color: #6fe07e;
}
.ach-claim-btn:active { background: rgba(76,217,100,0.3); }
.ach-claim-btn:disabled { opacity: 0.5; cursor: wait; }

/* ── Poster preview: шапка внутри модалки ── */
.gm-modal .profile-header_frame {
  pointer-events: none; user-select: none;
  margin-bottom: 0 !important; flex-shrink: 0;
}
.profile-header_frame.poster.izuna { background-image: url(/img/headers/izuna.webp); }
.gm-skeleton {
  display: inline-block; border-radius: 3px;
  background: rgba(255,255,255,0.10); color: transparent;
  animation: gmSkeletonPulse 1.5s ease-in-out infinite;
}
@keyframes gmSkeletonPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.9; } }

/* ── Shop modal layout ── */
.gm-shop-body { display: flex; flex: 1; overflow: hidden; }

.gm-shop-sidebar {
  width: 196px; flex-shrink: 0; padding: 16px 14px;
  border-right: 1px solid rgba(255,255,255,0.05);
  display: flex; flex-direction: column; gap: 3px;
}
.gm-shop-nav-btn {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 9px; cursor: pointer;
  font-size: 14px; font-weight: 500; color: rgba(200,190,230,0.55);
  transition: background .13s, color .13s, box-shadow .13s;
  border: none; background: none;
  font-family: inherit; width: 100%; text-align: left;
}
.gm-shop-nav-btn:hover { background: rgba(255,255,255,0.04); color: rgba(200,190,230,0.85); }
.gm-shop-nav-btn.active {
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.9);
}
.gm-shop-nav-btn.active::before {
  content: ''; position: absolute; left: 4px; top: 10px; bottom: 10px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #6e42c8, #c4aeff);
}
.gm-shop-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.gm-nav-icon {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; background: rgba(255,255,255,0.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
  color: rgba(200,190,230,0.6);
}
.gm-shop-nav-btn.active .gm-nav-icon {
  color: rgba(255,255,255,0.9);
}
.gm-nav-soon {
  font-size: 10px; color: rgba(200,190,230,0.3);
  font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase;
  display: block; margin-top: 1px;
}

/* ── Shop main ── */
.gm-shop-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

/* ── Poster action button ── */
.gm-action-btn {
  padding: 7px 16px; border-radius: 8px; font-size: 12.5px;
  font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background .15s, box-shadow .15s, color .15s;
  border: none; white-space: nowrap;
}
.gm-action-btn--activate,
.gm-action-btn--free {
  background: rgba(50,215,75,0.10); color: #4cd964;
  box-shadow: inset 0 0 0 1px rgba(50,215,75,0.28);
}
.gm-action-btn--activate:hover,
.gm-action-btn--free:hover {
  background: rgba(50,215,75,0.18);
  box-shadow: inset 0 0 0 1px rgba(50,215,75,0.4);
}
.gm-action-btn--cancel {
  background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
}
.gm-action-btn--cancel:hover {
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.gm-action-btn--buy {
  background: rgba(159,110,255,0.10); color: #c4aeff;
  box-shadow: inset 0 0 0 1px rgba(159,110,255,0.28);
}
.gm-action-btn--buy:hover {
  background: rgba(159,110,255,0.18);
  box-shadow: inset 0 0 0 1px rgba(159,110,255,0.4);
}
.gm-action-btn--active {
  background: rgba(50,215,75,0.07); color: rgba(76,217,100,0.6);
  box-shadow: inset 0 0 0 1px rgba(50,215,75,0.2);
  cursor: default;
}
.gm-action-btn--locked {
  background: rgba(255,255,255,0.03); color: rgba(200,190,230,0.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
  cursor: not-allowed;
}

/* ── Poster requirements panel ── */
.gm-poster-detail {
  flex-shrink: 0; padding: 12px 18px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.gm-poster-detail__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.gm-poster-detail__name {
  font-size: 15px; font-weight: 600; color: #f2f0f7; flex: 1;
}
.gm-poster-detail__author {
  font-size: 12px; font-weight: 400; color: rgba(200,190,230,0.5);
  margin-left: 2px;
}
.gm-poster-detail__desc {
  font-size: 12px; line-height: 1.45; color: rgba(200,190,230,0.7);
  margin: -4px 0 10px;
}
.gm-poster-detail__reqs {
  display: flex; flex-direction: column; gap: 7px;
  /* При большой разбивке (десятки сетов) даём скролл, чтобы остальная часть
     модалки оставалась видимой. Боковой gutter — чтобы скроллбар не прыгал. */
  max-height: min(50vh, 420px);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.07) transparent;
}
.gm-poster-detail__reqs::-webkit-scrollbar { width: 4px; }
.gm-poster-detail__reqs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07); border-radius: 2px; }
.gm-pd-req {
  display: flex; flex-direction: column; gap: 4px;
}
.gm-pd-req__label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: rgba(200,190,230,0.6);
}
.gm-pd-req__pct { font-size: 11px; color: rgba(200,190,230,0.45); }
.gm-pd-req__ok  { font-size: 11px; color: rgba(76,217,100,0.7); font-weight: 500; }
.gm-pd-req__track {
  height: 3px; background: rgba(255,255,255,0.05); border-radius: 99px; overflow: hidden;
}
.gm-pd-req__fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, rgba(200,190,230,0.35) 0%, rgba(200,190,230,0.5) 100%);
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.gm-pd-req__fill--done {
  background: linear-gradient(90deg, rgba(50,180,80,0.55) 0%, rgba(76,217,100,0.7) 100%);
}
.gm-pd-req__link {
  font-size: 11px; color: rgba(159,110,255,0.7); text-decoration: none;
  display: inline-block; margin-top: 2px;
  transition: color .14s;
}
.gm-pd-req__link:hover { color: #c4aeff; }

/* Раскрытие списка несобранных карт */
.gm-pd-req__label--expandable { cursor: pointer; user-select: none; }
.gm-pd-req__label--expandable:hover span:first-child { color: rgba(200,190,230,0.95); }
.gm-pd-req__label-right { display: flex; align-items: center; gap: 6px; }
.gm-pd-req__chevron {
  color: rgba(200,190,230,0.45);
  transition: transform .18s ease, color .14s;
  flex-shrink: 0;
}
.gm-pd-req__chevron--open { transform: rotate(90deg); color: rgba(159,110,255,0.85); }

/* Контейнер: тайлы наборов идут потоком с переносами, ширина по контенту. */
.gm-pd-missing {
  margin-top: 6px;
  display: flex; flex-wrap: wrap; gap: 8px;
}

/* Тайл одного набора — ширина по контенту, лимит сверху чтобы не растягивался. */
#dark .gm-pd-missing__set,
.gm-pd-missing__set {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  text-decoration: none;
  max-width: 100%;
  transition: background .14s, border-color .14s, opacity .14s;
}
.gm-pd-missing__set:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }

/* Собранный сет — уезжает в конец (backend ORDER BY is_complete ASC) и полупрозрачный.
   Hover поднимает прозрачность, чтобы легко прочитать. */
.gm-pd-missing__set--done { opacity: 0.4; }
.gm-pd-missing__set--done:hover { opacity: 0.85; }

/* Шапка тайла — только имя набора, число «осталось N» теперь в tooltip. */
#dark .gm-pd-missing__set-link,
.gm-pd-missing__set-link {
  display: inline-flex; align-items: baseline;
  text-decoration: none;
  transition: color .14s;
}
.gm-pd-missing__set-name {
  font-size: 12.5px; font-weight: 700;
  color: rgba(232,222,255,0.95);
  transition: color .14s;
}
#dark .gm-pd-missing__set-link:hover .gm-pd-missing__set-name,
.gm-pd-missing__set-link:hover .gm-pd-missing__set-name { color: #c4aeff; }

/* Чипы редкостей: инлайн поток, без группировки. */
.gm-pd-missing__chips { display: flex; flex-wrap: wrap; gap: 5px; }

/* Тайл одной редкости [SSR 1/5] — цвет через rarity_class */
#dark .gm-rarity-chip,
.gm-rarity-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px; border-radius: 7px;
  font-size: 11px; font-weight: 600; line-height: 1.4;
  text-decoration: none;
  background: rgba(255,255,255,0.04);
  color: rgba(220,210,240,0.88);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 3px solid var(--rarity-color, #b060ff);
  transition: transform .14s ease, background .14s, border-color .14s;
}
#dark .gm-rarity-chip:hover,
.gm-rarity-chip:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
  border-left-color: var(--rarity-color, #b060ff);
}
.gm-rarity-chip__name { color: var(--rarity-color, #c4aeff); }
.gm-rarity-chip__count {
  font-weight: 500; font-size: 10.5px;
  color: rgba(200,190,230,0.6);
  font-variant-numeric: tabular-nums;
}
/* Сигнал «собрано» — зелёный счётчик. Прозрачность даёт родительский тайл --done,
   двойная opacity тут была бы слишком тёмной. */
.gm-rarity-chip--done .gm-rarity-chip__count { color: rgba(76,217,100,0.85); }
.gm-rarity-chip--done .gm-rarity-chip__name   { color: rgba(76,217,100,0.85); }

/* Цвета по rarity_class — переиспользуем палитру card.css */
.gm-rarity-chip--yellow,
.gm-rarity-chip--dark-yellow { --rarity-color: #e7b14a; }
.gm-rarity-chip--gold        { --rarity-color: #f3c768; }
.gm-rarity-chip--silver      { --rarity-color: #cfcfcf; }
.gm-rarity-chip--grey,
.gm-rarity-chip--grey-yellow,
.gm-rarity-chip--yellow-grey { --rarity-color: #9b9b9b; }
.gm-rarity-chip--red,
.gm-rarity-chip--red-grad    { --rarity-color: #ff6b6b; }
.gm-rarity-chip--pink,
.gm-rarity-chip--pink-grad   { --rarity-color: #ff61c2; }
.gm-rarity-chip--purple,
.gm-rarity-chip--purple-grad { --rarity-color: #b060ff; }
.gm-rarity-chip--blue        { --rarity-color: #6e8eff; }
.gm-rarity-chip--blue-grad   { --rarity-color: #8aaeff; }
.gm-rarity-chip--green,
.gm-rarity-chip--green-grad  { --rarity-color: #4dc167; }
.gm-rarity-chip--r           { --rarity-color: #ff8e6b; }

/* На узких экранах метка типа уезжает наверх — тайлы во всю ширину */
@media (max-width: 540px) {
  .gm-pd-missing__type-row { grid-template-columns: 1fr; gap: 6px; }
  .gm-pd-missing__type { align-self: flex-start; }
}
.gm-poster-detail--no-reqs {
  display: flex; align-items: center; gap: 12px;
}

/* ── Витрины: скоуп-баннер (per-collection vs default) ── */
.gm-showcase-scope {
  margin: 12px 16px 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(127,45,232,0.10);
  border: 1px solid rgba(127,45,232,0.22);
  font-size: 13px; color: rgba(232,222,255,0.85);
  display: flex; align-items: center; gap: 8px;
}
.gm-showcase-scope b { color: #e8deff; }
.gm-link-btn {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  color: #b060ff; font-weight: 600; font-size: 13px;
  margin-left: 6px;
}
.gm-link-btn:hover { color: #d4a8ff; text-decoration: underline; }

/* ── Poster scroll area ── */
.gm-content-scroll {
  flex: 1; overflow-y: auto; padding: 14px 16px 18px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.07) transparent;
}
.gm-content-scroll::-webkit-scrollbar { width: 4px; }
.gm-content-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07); border-radius: 99px; }

.gm-section-label {
  font-size: 14px; font-weight: 600; letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.25); margin: 12px 0 8px 2px;
}
.gm-section-label:first-child { margin-top: 0; }

.gm-poster-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px; margin-bottom: 2px;
}

.gm-poster-item {
  border-radius: 12px; overflow: hidden; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,0.06);
  background: #18161b; transition: border-color .14s, transform .14s;
}
.gm-poster-item:hover { border-color: rgba(255,255,255,0.13); transform: translateY(-2px); }
.gm-poster-item.gm-pi--selected { border-color: rgba(159,110,255,0.65); }
.gm-poster-item.gm-pi--active   { border-color: rgba(50,215,75,0.45); }
.gm-poster-item.gm-pi--locked   { opacity: 1; }
.gm-poster-item.gm-pi--pending  { opacity: 0.75; }

/* Индикатор проверки условий в заголовке секции */
.gm-section-checking {
  font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.35);
  margin-left: 8px; display: inline-flex; align-items: center; gap: 5px;
}
.gm-dot-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(159,110,255,0.7);
  animation: gmDotPulse 1.2s ease-in-out infinite;
  display: inline-block;
}
@keyframes gmDotPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%       { opacity: 1;   transform: scale(1.2); }
}

/* Значок «не известно» для pending-постеров */
.gm-pi-badge--pending {
  color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}

.gm-poster-item__img {
    width: 100%; aspect-ratio: 21/9; object-fit: cover; display: block;
    object-position: top right;
}
.gm-poster-item__ph {
  width: 100%; aspect-ratio: 21/9; display: flex; align-items: center;
  justify-content: center; background: linear-gradient(135deg, #1a1428 0%, #22193a 100%);
  color: rgba(255,255,255,0.07); font-size: 26px;
}
.gm-poster-item__foot {
  padding: 7px 10px 9px; display: flex; align-items: center;
  justify-content: space-between; gap: 6px;
}
.gm-poster-item__name {
  font-size: 13px; font-weight: 500; color: rgba(200,190,230,0.8);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.gm-pi-badge { font-size: 12px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.gm-pi-badge--active { color: #32d74b; }
.gm-pi-badge--price  { color: #c8a83a; }
.gm-pi-badge--locked { color: rgba(200,190,230,0.22); }

/* Badge img inside span */
.user-badge-img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; display: block; }

/* ── Badge shop grid ── */
.gm-badge-shop { display: flex; flex-direction: column; padding-bottom: 72px; }

.gm-badge-shopbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0 14px; gap: 12px;
}
.gm-badge-shopbar__balance { font-size: 12px; color: rgba(255,255,255,0.45); }
.gm-badge-shopbar__balance strong { color: #c9a227; }
.gm-badge-shopbar__count { font-size: 11px; color: rgba(255,255,255,0.28); }

/* Grid */
.gm-badge-grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

/* Card */
.gm-badge-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 18px 10px 14px;
  background: rgba(0, 0, 0, 0.05);
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 16px; cursor: pointer; text-align: center;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  position: relative; user-select: none;
}
.gm-badge-card:hover { background: rgba(255,255,255,0.09); }
/* Примеривается, но не установлен */
.gm-badge-card--preview {
    border-color: rgb(255 255 255 / 12%) !important;
    background: rgb(255 255 255 / 3%) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}
/* Установлен на сервере */
.gm-badge-card--installed {
  box-shadow: 0 0 0 2px var(--bc, #7b1dff), 0 4px 16px rgba(0,0,0,0.3);
}
/* Заблокирован (ачивка не получена) */
.gm-badge-card--locked { opacity: 0.55; cursor: default; }
.gm-badge-card--locked:hover { background: rgba(255,255,255,0.05); }
/* Eligible — ачивка получена, значок ещё не куплен */
.gm-badge-card--eligible { cursor: default; }
.gm-badge-card--eligible:hover { background: rgba(255,255,255,0.06); }
/* Карточка "Без значка" */
.gm-badge-card--empty { border-style: dashed; }

.gm-badge-card__icon {
  width: 52px; height: 52px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1;
  transition: transform 0.15s;
}
.gm-badge-card:hover:not(.gm-badge-card--locked) .gm-badge-card__icon { transform: scale(1.08); }
.gm-badge-card__icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 11px; }

.gm-badge-card__name {
  font-size: 16px; font-weight: 600;
  color: rgba(255,255,255,0.88); line-height: 1.3;
}
.gm-badge-card--locked .gm-badge-card__name { color: rgba(255,255,255,0.45); }

.gm-badge-card__cond {
    font-size: 12px;
    color: rgb(255 255 255 / 46%);
    line-height: 1.35;
}

/* Статус-чип */
.gm-badge-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 700; padding: 2px 7px;
  border-radius: 99px; letter-spacing: 0.02em; margin-top: 2px;
}
.gm-badge-chip--on  { background: rgba(50,215,75,0.15); color: #32d74b; }
.gm-badge-chip--try { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); }
.gm-badge-chip--buy { background: rgba(201,162,39,0.15); color: #c9a227; }

/* Кнопка покупки внутри карточки */
.gm-badge-card__buy {
  margin-top: 4px; padding: 5px 10px;
  background: rgba(159,110,255,0.15); color: rgba(159,110,255,0.95);
  border: 1px solid rgba(159,110,255,0.25); border-radius: 7px;
  font-size: 10px; font-weight: 700; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: background 0.15s; line-height: 1;
}
.gm-badge-card__buy:hover { background: rgba(159,110,255,0.28); }
.gm-badge-card__buy:disabled { opacity: 0.4; cursor: default; }

/* Action bar (снизу, sticky) */
.gm-badge-action {
  border-top: 1px solid rgba(255,255,255,0.09);
  padding-top: 16px; margin-top: 16px;
  display: flex; align-items: center; gap: 10px;
}
.gm-badge-action__info { flex: 1; min-width: 0; }
.gm-badge-action__name { font-size: 13px; font-weight: 600; }
.gm-badge-action__hint { font-size: 11px; color: rgba(255,255,255,0.38); margin-top: 1px; }

/* ── Info hint (иконка с тултипом) ── */
.gm-hint-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(159,110,255,0.10);
  border: 1px solid rgba(159,110,255,0.18);
  color: rgba(159,110,255,0.6);
  font-size: 11px; font-weight: 700; font-style: normal;
  cursor: default; flex-shrink: 0; position: relative;
  vertical-align: middle; margin-left: 6px;
  transition: background .14s, border-color .14s, color .14s;
  line-height: 1;
}
.gm-hint-icon:hover {
  background: rgba(159,110,255,0.18);
  border-color: rgba(159,110,255,0.35);
  color: rgba(159,110,255,0.9);
}
.gm-hint-icon::after {
  content: attr(data-hint);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%; transform: translateX(-50%);
  background: rgba(14,12,20,0.97);
  color: rgba(200,190,230,0.75);
  font-size: 12px; font-weight: 400;
  padding: 9px 13px; border-radius: 10px;
  white-space: normal; text-align: left;
  width: 240px;
  pointer-events: none; opacity: 0;
  transition: opacity 0.15s; z-index: 9999;
  box-shadow: 0 6px 24px rgba(0,0,0,0.55);
  border: 1px solid rgba(159,110,255,0.15);
  line-height: 1.5;
}
.gm-hint-icon:hover::after { opacity: 1; }

@media (max-width: 600px) {
  /* Sidebar: скрытый вертикальный → горизонтальный таббар */
  .gm-shop-body { flex-direction: column; overflow: visible; }
  .gm-shop-sidebar {
    width: 100%; flex-direction: row;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 6px 10px;
    overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .gm-shop-sidebar::-webkit-scrollbar { display: none; }
  .gm-shop-nav-btn {
    flex: 1; flex-direction: column; align-items: center; justify-content: center;
    padding: 7px 6px; gap: 3px;
    font-size: 11px; min-width: 0; width: auto;
  }
  .gm-shop-nav-btn.active::before {
    left: 14px; right: 14px;
    top: auto; bottom: 3px;
    width: auto; height: 2px;
    background: linear-gradient(90deg, #6e42c8, #c4aeff);
  }
  .gm-nav-icon { width: 26px; height: 26px; font-size: 13px; border-radius: 8px; }
  .gm-nav-soon { font-size: 9px; text-align: center; }

  .gm-modal--shop { border-radius: 0 0 20px 20px; max-height: none; }
  .gm-shop-main { overflow: visible; }
  .gm-content-scroll { overflow-y: visible; }
  .gm-overlay--shop { overflow-y: auto; align-items: flex-start; padding: 0 0 24px; }
  .gm-poster-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-gm-bar { padding: 11px 14px; gap: 14px; }
  .pgb-meta { min-width: 48px; padding-right: 14px; }
  .pgb-meta__num { font-size: 24px; }
  .pgb-progress__next { display: none; }
  .pgb-ach-btn { padding: 8px 10px 8px 13px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   ADMIN ANALYTICS TAB
   Источники XP/койнов: таймлайн + горизонтальные бары
   ═══════════════════════════════════════════════════════════ */

.gm-tab--admin {
  color: rgba(255, 200, 80, 0.85);
  margin-left: auto;
}
.gm-tab--admin.active {
  color: #ffd166;
}

.gm-admin-analytics {
  padding: 4px 4px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Заголовок скоупа аналитики */
.gm-admin-scope {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.gm-admin-scope__label {
  font-size: 12.5px;
  color: rgba(200,190,230,0.7);
  flex: 1;
}
.gm-admin-scope__label b {
  color: #ffd166;
  font-weight: 600;
}
.gm-admin-scope__switch {
  background: rgba(127,45,232,0.18);
  box-shadow: inset 0 0 0 1px rgba(127,45,232,0.40);
  color: #e8deff;
  border: none;
  border-radius: 8px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  transition: background .14s;
}
.gm-admin-scope__switch:hover {
  background: rgba(127,45,232,0.32);
}

.gm-admin-period {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.gm-admin-period__label {
  font-size: 12px;
  color: rgba(200,190,230,0.55);
  margin-right: 4px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.gm-admin-period__btn {
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
  color: rgba(200,190,230,0.75);
  border: none;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background .14s, color .14s, box-shadow .14s;
}
.gm-admin-period__btn:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.gm-admin-period__btn.active {
  background: rgba(127,45,232,0.30);
  box-shadow: inset 0 0 0 1px rgba(127,45,232,0.55);
  color: #fff;
}
.gm-admin-period__refresh {
  margin-left: auto;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
  color: rgba(200,190,230,0.75);
  border: none;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
.gm-admin-period__refresh:hover { color: #fff; background: rgba(255,255,255,0.08); }

.gm-admin-section {
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gm-admin-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.gm-admin-section__title {
  font-size: 14px;
  font-weight: 600;
  color: #f0ecff;
  letter-spacing: -.01em;
}
.gm-admin-section__total {
  font-size: 12px;
  color: rgba(200,190,230,0.55);
  font-variant-numeric: tabular-nums;
}

/* Таймлайн (вертикальные бары по дням) */
.gm-admin-timeline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gm-admin-timeline__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 64px;
  padding: 2px 0;
}
.gm-admin-timeline__bar {
  flex: 1;
  min-width: 2px;
  background: linear-gradient(180deg, #9f6eff 0%, #6e42c8 100%);
  border-radius: 2px 2px 0 0;
  transition: opacity .12s;
}
.gm-admin-timeline__bar:hover { opacity: 0.7; }
.gm-admin-timeline__bar--coins {
  background: linear-gradient(180deg, #ffd166 0%, #c9a227 100%);
}
.gm-admin-timeline__axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(200,190,230,0.4);
  font-variant-numeric: tabular-nums;
}

/* Список источников (горизонтальные бары) */
.gm-admin-sources {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gm-admin-source {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gm-admin-source__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.gm-admin-source__name {
  font-size: 12.5px;
  color: rgba(240, 236, 255, 0.92);
  font-weight: 500;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}
.gm-admin-source__num {
  font-size: 13px;
  color: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.gm-admin-source__track {
  height: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 99px;
  overflow: hidden;
  box-shadow: inset 0 1px 1.5px rgba(0,0,0,0.25);
}
.gm-admin-source__fill {
  height: 100%;
  border-radius: 99px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.gm-admin-source__fill--xp    { background: linear-gradient(90deg, #6e42c8 0%, #9f6eff 100%); }
.gm-admin-source__fill--coins { background: linear-gradient(90deg, #c9a227 0%, #ffe066 100%); }
.gm-admin-source__meta {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: rgba(200,190,230,0.45);
  font-variant-numeric: tabular-nums;
}

/* ── Модалка быстрого лайка интересов (титлы/персонажи) ── */
.interests-modal__intro {
  padding: 12px 20px 0;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(200,190,230,0.55);
}
.interests-modal__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 16px 0;
  padding: 0 12px;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  border-radius: 10px;
  flex-shrink: 0;
}
.interests-modal__search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 10px 0;
  font-size: 13px;
  font-family: inherit;
  color: #f2f0f7;
}
.interests-modal__search-input::placeholder { color: rgba(200,190,230,0.4); }
.interests-modal__search-clear {
  border: none;
  background: transparent;
  color: rgba(200,190,230,0.5);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.interests-modal__search-clear:hover { color: rgba(200,190,230,0.9); }

.interests-modal__section { margin-bottom: 16px; }
.interests-modal__section:last-child { margin-bottom: 0; }
.interests-modal__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px;
}
.interests-modal__item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 5px 5px 5px 5px;
  color: #e8deff;
}
.interests-modal__item-main {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  max-width: 160px;
  padding-right: 6px;
}
/* gm-модалка всегда тёмная независимо от темы сайта, но глобальное #dark a { color } (см.
   static/styles/index.css) специфичнее одиночного класса и перекрашивает ссылку в синий,
   когда САЙТ (не модалка) в тёмной теме — глушим тем же #dark + class */
#dark .interests-modal__item-main {
  color: #e8deff;
  text-decoration: none;
}
.interests-modal__item-main .loved-item__name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.interests-modal__like {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  transition: background-color .14s ease;
}
.interests-modal__like:hover { background: rgba(255,255,255,0.12); }
.interests-modal__like.is-active { background: rgba(255,71,87,0.2); }
.interests-modal__like.is-active .entity-popover__like-icon {
  background-image: url('/ui/like-active-red.svg');
  opacity: 1;
}
.interests-modal__like:disabled { opacity: .5; cursor: default; }
.interests-modal__item .entity-avatar {
  background: linear-gradient(135deg, #6e42c8, #b060ff);
}

/* ── card-filters.css ── */
/* ============================================================
   Новая панель фильтрации карточек (компактная умная панель +
   модалка расширенных фильтров). Модалка переиспользует базовую
   оболочку .gm-overlay/.gm-modal/.gm-hdr/.gm-tabs/.gm-body/.gm-close
   из gamification.css — здесь только контент и модификаторы размера.
   ============================================================ */

/* Компактная панель и ряд чипов живут вне модалки — на общем фоне страницы,
   который поддерживает обе темы (переключатель body#dark/body#light), поэтому
   для них ниже задан полноценный светлый вид по умолчанию + #dark-переопределения.
   Сама модалка переиспользует .gm-modal, который в проекте всегда тёмный
   (см. gamification.css) — её здесь не трогаем. */

/* Приманки для автозаполнения — полностью скрыты, но не display:none (некоторые
   браузеры игнорируют невидимые через display/visibility поля для эвристики) */
.cf-autofill-decoy {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
    opacity: 0 !important; pointer-events: none !important;
}

.cf-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    background: #F7F5FF;
    box-shadow: inset 0 0 0 1px #CFD8DF;
    border-radius: 16px;
    padding: 8px;
}
#dark .cf-bar {
    background: rgba(255,255,255,.035);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

/* ---- умный поиск ---- */
.cf-search {
    flex: 1;
    position: relative;
    min-width: 0;
}
.cf-search__icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; opacity: .55; pointer-events: none; color: #87919E;
}
#dark .cf-search__icon { opacity: .35; color: #fff; }
.cf-search__icon svg { width: 100%; height: 100%; }
.cf-search input {
    width: 100%; box-sizing: border-box; appearance: none;
    background: #fff;
    border: none; outline: none;
    border-radius: 11px;
    padding: 11px 14px 11px 38px;
    color: #7F2DE8; font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 500;
    box-shadow: inset 0 0 0 1px #CFD8DF;
    transition: box-shadow .15s, background .15s;
}
.cf-search input::placeholder { color: #87919E; font-weight: 400; }
.cf-search input:focus {
    box-shadow: inset 0 0 0 1.5px rgba(127,45,232,.45), 0 0 0 4px rgba(127,45,232,.1);
}
#dark .cf-search input {
    background: rgba(255,255,255,.04); color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
#dark .cf-search input::placeholder { color: rgba(200,190,230,.4); }
#dark .cf-search input:focus {
    background: rgba(255,255,255,.06);
    box-shadow: inset 0 0 0 1.5px rgba(140,110,255,.55), 0 0 0 4px rgba(120,80,255,.12);
}

.cf-search__dropdown {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(30,20,60,.16), 0 0 0 1px #E4E7EC;
    padding: 8px; z-index: 40;
    display: none; max-height: 380px; overflow-y: auto;
}
#dark .cf-search__dropdown { background: #211f26; box-shadow: 0 20px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07); }
.cf-search__dropdown.open { display: block; animation: cfPop .14s ease; }
@keyframes cfPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.cf-search__group-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: #9AA2AC; padding: 8px 10px 4px;
}
#dark .cf-search__group-label { color: rgba(200,190,230,.35); }
.cf-search__row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: 9px; cursor: pointer;
}
.cf-search__row:hover { background: #F7F5FF; }
#dark .cf-search__row:hover { background: rgba(255,255,255,.06); }
.cf-search__avatar {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    background: #ECE7FB;
}
#dark .cf-search__avatar { background: #34313c; }
.cf-search__avatar.sq { border-radius: 8px; }
.cf-search__row-text { min-width: 0; flex: 1; }
.cf-search__row-name { color: #1a1a1a; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dark .cf-search__row-name { color: #fff; }
.cf-search__row-sub { color: #87919E; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dark .cf-search__row-sub { color: rgba(200,190,230,.4); }
.cf-search__row-plus {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    background: #F7F5FF; color: #7F2DE8;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
#dark .cf-search__row-plus { background: rgba(255,255,255,.06); color: rgba(255,255,255,.6); }
.cf-search__empty { padding: 14px 10px; text-align: center; color: #87919E; font-size: 13px; }
#dark .cf-search__empty { color: rgba(200,190,230,.4); }

/* ---- пилюли (сортировка / фильтры) ---- */
.cf-pill {
    display: inline-flex; align-items: center; gap: 7px;
    background: #F7F5FF;
    box-shadow: inset 0 0 0 1px #CFD8DF;
    border: none; border-radius: 11px;
    padding: 11px 15px;
    color: #624CFF; font-family: 'Rubik', sans-serif; font-size: 13.5px; font-weight: 500;
    cursor: pointer; white-space: nowrap; position: relative;
    transition: background .14s, box-shadow .14s, color .14s;
}
.cf-pill:hover { background: #EFEAFF; }
#dark .cf-pill { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); color: rgba(230,225,245,.8); }
#dark .cf-pill:hover { background: rgba(255,255,255,.075); color: #fff; }
.cf-pill svg { width: 15px; height: 15px; opacity: .7; flex-shrink: 0; }

.cf-pill--sort { padding: 0 6px 0 12px; }
.cf-pill--sort select {
    background: transparent; border: none; outline: none; appearance: none;
    color: #624CFF; font-family: 'Rubik', sans-serif; font-size: 13.5px; font-weight: 500;
    padding: 11px 24px 11px 6px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23624CFF'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 4px center; background-size: 16px;
}
.cf-pill--sort select option { background-color: #fff; color: #1a1a1a; }
/* <optgroup> игнорирует большинство CSS в нативном попапе select — задаём явно,
   иначе браузер (особенно на Windows) рисует подпись группы серым по белому,
   пока обычные option идут тёмным/светлым по фону страницы */
.cf-pill--sort select optgroup { background-color: #fff; color: #9AA2AC; font-weight: 600; }
#dark .cf-pill--sort select {
    color: rgba(230,225,245,.8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(230,225,245,0.5)'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}
#dark .cf-pill--sort select option { background-color: #211f26; color: #fff; }
#dark .cf-pill--sort select optgroup { background-color: #211f26; color: rgba(230,225,245,.55); }

.cf-pill--accent {
    background: linear-gradient(98.17deg, rgba(79,160,255,.14) 4%, rgba(82,79,255,.14) 40%, rgba(179,56,255,.14) 93%);
    box-shadow: inset 0 0 0 1px rgba(127,45,232,.22);
    color: #7F2DE8;
}
.cf-pill--accent:hover { box-shadow: inset 0 0 0 1px rgba(127,45,232,.4); }
#dark .cf-pill--accent {
    background: linear-gradient(98.17deg, rgba(79,160,255,.16) 4%, rgba(82,79,255,.16) 40%, rgba(179,56,255,.16) 93%);
    box-shadow: inset 0 0 0 1px rgba(150,110,255,.35);
    color: #fff;
}
#dark .cf-pill--accent:hover { box-shadow: inset 0 0 0 1px rgba(170,130,255,.55); }

.cf-badge {
    position: absolute; top: -5px; right: -5px;
    min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box;
    border-radius: 99px; background: linear-gradient(120deg, #4FA0FF, #B338FF);
    color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
    box-shadow: 0 0 0 2px #F7F5FF;
}
#dark .cf-badge { box-shadow: 0 0 0 2px #18161b; }

.cf-share-btn {
    width: 46px; height: 46px; flex-shrink: 0; box-sizing: border-box;
    border: none; border-radius: 11px;
    background: #F7F5FF url(/ui/share-icon.png) no-repeat center;
    background-size: 18px;
    box-shadow: inset 0 0 0 1px #CFD8DF;
    cursor: pointer; transition: background-color .14s, box-shadow .14s;
}
.cf-share-btn:hover { background-color: #EFEAFF; }
#dark .cf-share-btn { background-color: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
#dark .cf-share-btn:hover { background-color: rgba(255,255,255,.075); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }

/* ---- ряд активных фильтров ---- */
.cf-chips {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    margin-top: 12px; min-height: 0;
}
.cf-chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: #F7F5FF;
    box-shadow: inset 0 0 0 1px rgba(127,45,232,.16);
    color: #624CFF; border-radius: 99px; padding: 5px 5px 5px 9px;
    font-size: 12.5px; font-weight: 500; cursor: default; user-select: none;
    animation: cfPop .14s ease;
}
#dark .cf-chip { background: rgba(140,110,255,.1); box-shadow: inset 0 0 0 1px rgba(150,110,255,.3); color: #cdbfff; }
.cf-chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.cf-chip img.sq { border-radius: 5px; }
.cf-chip button {
    width: 16px; height: 16px; border-radius: 50%; border: none; flex-shrink: 0;
    background: rgba(98,76,255,.12); color: #624CFF; font-size: 10px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    opacity: .8; transition: opacity .12s, background .12s, color .12s; padding: 0;
    font-family: inherit;
}
.cf-chip button:hover { opacity: 1; background: rgba(255,60,60,.15); color: #d43838; }
#dark .cf-chip button { background: rgba(255,255,255,.1); color: #fff; }
#dark .cf-chip button:hover { background: rgba(255,80,80,.5); color: #fff; }
.cf-chips__reset {
    color: #87919E; font-size: 12.5px; cursor: pointer; padding: 5px 4px;
    text-decoration: underline; text-decoration-color: #CFD8DF; text-underline-offset: 2px;
}
.cf-chips__reset:hover { color: #1a1a1a; }
#dark .cf-chips__reset { color: rgba(200,190,230,.4); text-decoration-color: rgba(200,190,230,.2); }
#dark .cf-chips__reset:hover { color: rgba(230,225,245,.8); }

/* Чип в режиме "исключить" (!value) — используется в cf-selected-row модалки (тёмная, без светлой версии) */
.cf-chip--exclude { background: rgba(255,90,90,.1); box-shadow: inset 0 0 0 1px rgba(255,90,90,.35); color: #ffb3b3; }
.cf-exclude-toggle {
    font-size: 10px; color: rgba(255,255,255,.3); background: rgba(255,255,255,.06);
    border-radius: 6px; padding: 2px 6px; cursor: pointer; flex-shrink: 0; user-select: none;
}
.cf-exclude-toggle:hover { color: rgba(255,140,140,.9); background: rgba(255,90,90,.12); }
.cf-exclude-toggle.active { color: #ff8f8f; background: rgba(255,90,90,.18); }

/* Теги — tag.color хранит имя класса (не hex), то же самое, что и .card-tags .tag.*
   внизу карточки (card.css). Переносим ту же палитру на форму .cf-choice. */
.cf-choice.blue       { background: #4e8cff21; box-shadow: inset 0 0 0 1px #4e8cff50; color: #6199ff; }
.cf-choice.light-blue { background: #4ed0ff21; box-shadow: inset 0 0 0 1px #4ec6ff50; color: #61cbff; }
.cf-choice.green      { background: #52e70d21; box-shadow: inset 0 0 0 1px #52e70d50; color: #72d30c; }
.cf-choice.red        { background: #ff4e4e21; box-shadow: inset 0 0 0 1px #ff4e4e50; color: #ff6161; }
.cf-choice.gold       { background: #ffc14e21; box-shadow: inset 0 0 0 1px #ffc14e50; color: #ffb561; }
.cf-choice.purple     { background: #ff4eaf21; box-shadow: inset 0 0 0 1px #ff4eaf50; color: #ff61c2; }
.cf-choice.yellow     { background: #ff763921; box-shadow: inset 0 0 0 1px #e7860d30; color: #d39748; }
.cf-choice.grey       { background: #afafaf0f; box-shadow: inset 0 0 0 1px #a9a9a929; color: #838383; }

/* ============================================================
   МОДАЛКА ФИЛЬТРОВ — расширяет .gm-overlay/.gm-modal
   ============================================================ */
.gm-modal--filters { width: min(94vw, 640px); max-height: min(86vh, 780px); }
.gm-modal--filters .gm-hdr__title small { display: block; font-weight: 400; font-size: 12px; color: rgba(200,190,230,.45); margin-top: 1px; }
.gm-modal--filters .gm-hdr__btn.cf-reset { color: rgba(255,150,150,.75); }

.cf-tabpanel { display: flex; flex-direction: column; gap: 18px; padding: 4px 4px 2px; }

.cf-section-label {
    font-size: 12px; font-weight: 600; color: rgba(200,190,230,.45);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}

.cf-choice-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cf-choice {
    padding: 7px 13px; border-radius: 9px; font-size: 13px; font-weight: 500; cursor: pointer;
    background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
    color: rgba(230,225,245,.65); transition: .13s; user-select: none;
}
.cf-choice:hover { background: rgba(255,255,255,.07); }
.cf-choice.selected {
    background: linear-gradient(98deg, rgba(79,160,255,.22), rgba(82,79,255,.22), rgba(179,56,255,.22));
    box-shadow: inset 0 0 0 1px rgba(160,120,255,.55);
    color: #fff;
}

.cf-segmented { display: inline-flex; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); border-radius: 10px; padding: 3px; }
.cf-segmented button {
    border: none; background: transparent; color: rgba(230,225,245,.5);
    font-family: 'Rubik', sans-serif; font-size: 12.5px; font-weight: 500;
    padding: 6px 12px; border-radius: 7px; cursor: pointer; transition: .13s;
}
.cf-segmented button.selected { background: rgba(255,255,255,.1); color: #fff; }

.chosen .cf-choice {
    opacity: .4;
    filter: saturate(.7);
}

/* Редкости — базовый вид остаётся обычным .cf-choice, а классы редкости
   (r.class из card.css: yellow/purple/gold/green/...) только красят его
   переливом/обводкой в цвет самой редкости — форма и поведение как у всех
   остальных чипов модалки, без визуального разнобоя. */
.cf-choice.r        { background: rgba(163,163,163,.10); box-shadow: inset 0 0 0 1px rgba(163,163,163,.25); color: #c7c7c7; }
.cf-choice.yellow, .cf-choice.grey-yellow, .cf-choice.yellow-grey {
    background: rgba(247,169,1,.12); box-shadow: inset 0 0 0 1px rgba(247,169,1,.35); color: rgb(247,180,60);
}
.cf-choice.purple, .cf-choice.purple-grad { background: rgba(174,112,255,.14); box-shadow: inset 0 0 0 1px rgba(174,112,255,.4); color: #ac6bff; }
.cf-choice.pink, .cf-choice.pink-grad     { background: rgba(255,135,182,.12); box-shadow: inset 0 0 0 1px rgba(255,135,182,.35); color: #ffa5d8; }
.cf-choice.red, .cf-choice.red-grad       { background: rgba(255,105,105,.12); box-shadow: inset 0 0 0 1px rgba(255,105,105,.35); color: #ff6969; }
.cf-choice.gold                           { background: rgba(255,184,0,.16); box-shadow: inset 0 0 0 1px rgba(255,184,0,.45); color: #ffce6b; }
.cf-choice.silver                         { background: rgba(200,220,235,.12); box-shadow: inset 0 0 0 1px rgba(200,220,235,.35); color: #d6e3ec; }
.cf-choice.grey                           { background: rgba(193,199,204,.10); box-shadow: inset 0 0 0 1px rgba(193,199,204,.3); color: #aeb6bc; }
.cf-choice.green, .cf-choice.green-grad   { background: rgba(77,193,103,.13); box-shadow: inset 0 0 0 1px rgba(77,193,103,.4); color: #4dc167; }
.cf-choice.blue, .cf-choice.blue-grad     { background: rgba(96,188,255,.13); box-shadow: inset 0 0 0 1px rgba(96,188,255,.4); color: #60bcff; }
.cf-choice.dark-yellow, .cf-choice.dark-yellow-grad { background: rgba(255,134,96,.13); box-shadow: inset 0 0 0 1px rgba(255,134,96,.4); color: #ff9060; }
/* Выбранная редкость — усиливаем заливку/обводку тем же цветом, текст в белый для контраста */
.cf-choice.selected {
    opacity: 1;
    filter: brightness(1.2);
}

/* Обрезка длинных списков (редкости, серии) по высоте (2-3 строки) с градиентом
   снизу вместо резкого обрыва + неброская кнопка "Развернуть"/"Свернуть" под списком.
   Общий паттерн, высота задаётся модификатором под конкретный список. */
.cf-collapse-fade { position: relative; overflow: hidden; }
.cf-collapse-fade::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30px;
    background: linear-gradient(to bottom, rgba(24,22,27,0), #18161b);
    pointer-events: none;
}
.cf-collapse-fade.expanded { max-height: none !important; }
.cf-collapse-fade.expanded::after { display: none; }
.cf-collapse-fade--rarity { max-height: 160px; }
.cf-collapse-fade--series { max-height: 200px; }
.cf-rarity-list {
    max-height: inherit;
    overflow: auto;
    padding-bottom: 30px;
}
.cf-collapse-fade--rarity.expanded .cf-rarity-list { padding-bottom: 0; }
.cf-rarity-group-label {
    font-size: 11px; font-weight: 600; color: rgba(200,190,230,.4);
    margin: 10px 0 6px; text-transform: uppercase; letter-spacing: .03em;
}
.cf-rarity-group-label:first-child { margin-top: 0; }
.cf-collapse-toggle {
    display: flex; justify-content: flex-end;
    margin-top: 6px; font-size: 12px; color: rgba(200,190,230,.4);
    cursor: pointer; user-select: none; transition: color .13s;
}
.cf-collapse-toggle:hover { color: rgba(230,225,245,.8); }

/* Тайлы серий — компактная сетка вместо длинного select'а */
.cf-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; max-height: inherit; overflow: auto;}
.cf-tile {
    text-align: center; cursor: pointer; padding: 4px;
    border-radius: 12px; transition: background .13s; user-select: none;
}
.cf-tile:hover { background: rgba(255,255,255,.04); }
.cf-tile__img {
    height: 52px;
    aspect-ratio: 77 / 52;
    border-radius: 12px;
    corner-shape: squircle; object-fit: cover; margin: 0 auto 6px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); display: flex; align-items: center;
    justify-content: center; background: #2a2730; color: rgba(230,225,245,.5); font-size: 11px;
}
.cf-tile span {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; font-size: 11px; line-height: 1.25; color: rgba(230,225,245,.6);
}
.cf-tile.selected .cf-tile__img { box-shadow: 0 0 0 2px #a883ff, 0 0 0 4px rgba(168,131,255,.18); }
.cf-tile.selected span { color: #fff; font-weight: 600; }

.cf-picker-search { position: relative; margin-bottom: 10px; }
.cf-picker-search input {
    width: 100%; box-sizing: border-box; appearance: none;
    background: rgba(255,255,255,.04); border: none; outline: none;
    border-radius: 10px; padding: 9px 12px 9px 34px;
    color: #fff; font-family: 'Rubik', sans-serif; font-size: 13.5px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.cf-picker-search input:focus { box-shadow: inset 0 0 0 1.5px rgba(140,110,255,.5); }
.cf-picker-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; opacity: .35; color: #fff; }

.cf-selected-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cf-picker-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.cf-picker-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; cursor: pointer; }
.cf-picker-row:hover { background: rgba(255,255,255,.045); }
.cf-picker-row img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #34313c; flex-shrink: 0; }
.cf-picker-row img.sq { border-radius: 8px; }
.cf-picker-text { min-width: 0; flex: 1; }
.cf-picker-name { color: #fff; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-picker-sub { color: rgba(200,190,230,.4); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-picker-check {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center; color: transparent; font-size: 13px;
    transition: .13s;
}
.cf-picker-row.selected .cf-picker-check { background: linear-gradient(120deg, #4FA0FF, #B338FF); box-shadow: none; color: #fff; }
.cf-picker-row.selected .cf-picker-name { color: #cdbfff; }

.cf-switch-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px; border-bottom: 1px solid rgba(255,255,255,.05); }
.cf-switch-row:last-child { border-bottom: none; }
.cf-switch-row div span { display: block; color: #fff; font-size: 13.5px; font-weight: 500; }
.cf-switch-row div small { display: block; color: rgba(200,190,230,.4); font-size: 11.5px; margin-top: 1px; }
.cf-switch { width: 40px; height: 24px; border-radius: 99px; background: rgba(255,255,255,.12); position: relative; cursor: pointer; flex-shrink: 0; transition: background .15s; }
.cf-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.cf-switch.on { background: linear-gradient(120deg, #4FA0FF, #B338FF); }
.cf-switch.on::after { transform: translateX(16px); }

.cf-price-row { display: flex; align-items: center; gap: 10px; }
.cf-price-row input {
    width: 100%; box-sizing: border-box; background: rgba(255,255,255,.04); border: none; outline: none;
    border-radius: 9px; padding: 9px 11px; color: #fff; font-family: 'Rubik', sans-serif; font-size: 13.5px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); text-align: center;
}
.cf-price-row span { color: rgba(200,190,230,.35); font-size: 12px; flex-shrink: 0; }

.cf-context-note {
    font-size: 12px; color: rgba(200,190,230,.4); background: rgba(255,255,255,.03);
    border-radius: 9px; padding: 8px 11px;
}

/* select/input generic look inside modal tabs (не переиспользуем .filter_item — он занят прогрессом наборов).
   input[type="search"] — намеренно, чтобы браузер не путал поле с логином (см. cf-search) */
.cf-tabpanel select,
.cf-tabpanel input[type="text"],
.cf-tabpanel input[type="search"],
.cf-tabpanel input[type="number"] {
    width: 100%; box-sizing: border-box; appearance: none;
    background: rgba(255,255,255,.04); border: none; outline: none;
    border-radius: 9px; padding: 9px 11px; color: #fff;
    font-family: 'Rubik', sans-serif; font-size: 13.5px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
}
.cf-tabpanel select option { background-color: #211f26; color: #fff; }
/* Выше по специфичности, чем .cf-tabpanel input[type="..."] выше — иначе оно
   перебивает left-padding у .cf-picker-search и текст залезает под иконку лупы */
.cf-tabpanel .cf-picker-search input[type="search"] { padding-left: 34px; }

.cf-modal-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 13px 18px; border-top: 1px solid rgba(255,255,255,.06); flex-shrink: 0;
}
.cf-footer-reset { color: rgba(200,190,230,.5); font-size: 13px; cursor: pointer; background: none; border: none; font-family: 'Rubik', sans-serif; }
.cf-footer-reset:hover { color: #fff; }
.cf-footer-apply {
    background: linear-gradient(98.17deg, #4FA0FF 4%, #524FFF 40%, #B338FF 93%);
    border: none; border-radius: 11px; padding: 11px 22px; color: #fff; font-weight: 600; font-size: 13.5px;
    font-family: 'Rubik', sans-serif; cursor: pointer; box-shadow: 0 8px 22px rgba(120,80,255,.35);
}

/* мобильная версия модалки — bottom sheet, как у .gm-modal--shop */
@media (max-width: 600px) {
    .gm-overlay--cf { align-items: flex-end; padding: 0; }
    .gm-modal--filters { width: 100%; max-width: 100%; max-height: 88vh; border-radius: 20px 20px 0 0; }
    .gm-overlay--cf .gm-hdr { position: relative; }
    .gm-overlay--cf .gm-hdr::before {
        content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
        width: 36px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.18);
    }
    .cf-bar { flex-wrap: wrap; }
    .cf-search { flex-basis: 100%; }
}

/* ── gatcha-v2.css ── */
/* ==============================================
   Виртуальная гача 2.0 - Современные стили (Figma Design)
   ============================================== */

/* Базовые переменные согласно образцу дизайна */
:root {
    /* Основные цвета - синие тона */
    --gatcha-primary: #4FA0FF;
    --gatcha-secondary: #524FFF;
    --gatcha-accent: #B338FF;
    --gatcha-error: #FF4757;

    /* Фоновые цвета - темные с фиолетовым оттенком */
    --gatcha-bg-main: #221B28;
    --gatcha-bg-secondary: #2A2635;
    --gatcha-bg-tertiary: #343142;
    --gatcha-bg-gradient: radial-gradient(174.99% 62.71% at 50.77% 50%, rgba(4, 46, 255, 0.1) 0%, rgba(0, 0, 0, 0) 100%), #221b28;

    /* Градиент пакета - согласно образцу */
    --gatcha-pack-gradient: linear-gradient(180deg, #8B5CF6 0%, #6366F1 50%, #3B82F6 100%);
    --gatcha-pack-shadow: 0px 20px 40px rgba(99, 102, 241, 0.3);

    /* Цвета текста */
    --gatcha-text-primary: #FFFFFF;
    --gatcha-text-secondary: rgba(255, 255, 255, 0.7);
    --gatcha-text-muted: rgba(255, 255, 255, 0.4);

    /* Границы и тени */
    --gatcha-border: rgb(179 108 255 / 10%);
    --gatcha-border-accent: rgba(255, 255, 255, 0.2);
    --gatcha-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    --gatcha-shadow-lg: 0px 20px 60px rgba(0, 0, 0, 0.4);
    --gatcha-shadow-xl: 0px 30px 80px rgba(0, 0, 0, 0.5);

    /* Размеры */
    --gatcha-radius: 16px;
    --gatcha-radius-lg: 32px;
    --gatcha-radius-xl: 24px;

    /* Переходы */
    --gatcha-transition: 0.2s;
    --gatcha-transition-bounce: all 0.25s cubic-bezier(0.51, 0.32, 0.41, 1.3);

    /* Шрифты */
    --font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Скрытие v-cloak */
[v-cloak] {
    display: none !important;
}

.card-img {
    user-select: none;
    pointer-events: none;
}

/* ==============================================
   Основной контейнер модального окна
   ============================================== */

/* Стили для модального окна на главной странице */
.gatcha-v2-window {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    font-family: var(--font-family);
    /* pointer-events: none; */
    background: rgba(4, 3, 9, 0.8);
    backdrop-filter: blur(30px);
}

.gatcha-v2-window.visible {
    opacity: 1;
    visibility: visible;
}

.gatcha-v2-window.minimized {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.gatcha-v2-window .gatcha-v2-container {
    pointer-events: all;
}

/* Мобильная версия главной страницы */
.gatcha-v2-window.mobile {
    align-items: flex-start;
}

.gatcha-v2-window.mobile .gatcha-v2-container {
    width: 100vw !important;
    height: 100vh !important;
    min-width: 350px !important;
    max-width: 420px !important;
    max-height: none !important;
    border-radius: 0 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    background: var(--gatcha-bg-gradient);
    overflow: auto;
    border: none;
}

/* Полноэкранный режим главной страницы */
.gatcha-v2-window.fullscreen .gatcha-v2-container {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
}

/* Удален дублирующий CSS - используется выше */

/* Исходные стили для iframe контента */
.gatcha-v2-modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: var(--gatcha-transition);
    font-family: var(--font-family);
    pointer-events: none;
    background: radial-gradient(174.99% 62.71% at 50.77% 50%, rgb(20, 23, 38) 0%, rgb(13, 11, 19, 0) 100%), rgb(13, 11, 19);
}

.gatcha-v2-modal .gatcha-v2-container {
    pointer-events: all;
}

.gatcha-v2-modal.minimized {
    display: none;
}

/* Мобильная версия - полный экран */
.gatcha-v2-modal.mobile {
    background: var(--gatcha-bg-gradient);
}

.gatcha-v2-modal.mobile .gatcha-v2-container {
    width: 100vw !important;
    height: 100vh !important;
    min-width: 350px !important;
    max-width: 420px !important;
    max-height: none !important;
    border-radius: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    background: var(--gatcha-bg-gradient);
    overflow: auto;
}

/* Полноэкранный режим */
.gatcha-v2-modal.fullscreen .gatcha-v2-container {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
}

.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26px 30px;
}

.logo-gatcha {
    height: 20px;
    width: 104px;
    background-image: url('/gatcha/logo.png');
    background-repeat: no-repeat;
    background-position: center;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-actions_btn {
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: var(--gatcha-transition);
    background-repeat: no-repeat;
    background-position: center;
}

.header-actions_btn.gatcha {
    background-image: url('/gatcha/drop-icon.png');
}

.header-actions_btn.help {
    background-image: url('/gatcha/help-icon.png');
}

.header-actions_btn.close {
    background-image: url('/gatcha/close-icon.png');
}

.header-actions_btn:hover {
    opacity: .7;
}

.demo-toggle {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--gatcha-text-secondary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: var(--gatcha-transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.demo-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--gatcha-text-primary);
}

.demo-toggle.active {
    background: var(--gatcha-accent);
    color: white;
    border-color: var(--gatcha-accent);
    box-shadow: 0px 4px 16px rgba(179, 56, 255, 0.3);
}

.divider {
    width: 1px;
    height: 16px;
    background: white;
    opacity: .08;
}



/* ==============================================
   Основной контейнер
   ============================================== */

.gatcha-v2-container {
    position: relative;
    width: 396px;
    height: 814px;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: var(--gatcha-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: .2s background, .2s box-shadow, .2s transform;
    user-select: none;
    border: 1px solid var(--gatcha-border);
    background: var(--gatcha-bg-gradient);
}

.gatcha-v2-container.dragging {
    cursor: grabbing;
    transform: scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.gatcha-v2-container.resizing {
    transition: none;
}

.gatcha-v2-container.minimized {
    transform: scale(0.8);
    opacity: 0.7;
}

/* Desktop адаптации */
.gatcha-v2-container.desktop {
    cursor: grab;
}

.gatcha-v2-container.desktop:active {
    cursor: grabbing;
}

/* ==============================================
   Header с элементами управления
   ============================================== */

.gatcha-v2-header {
    position: relative;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: rgba(34, 27, 40, 0.9);
    border-bottom: 1px solid var(--gatcha-border);
    cursor: grab;
    z-index: 10;
    border-top-left-radius: var(--gatcha-radius);
    border-top-right-radius: var(--gatcha-radius);
    backdrop-filter: blur(10px);
}

.gatcha-v2-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(160, 77, 255, 0.06), transparent);
    transition: left 0.5s;
}

.gatcha-v2-header:hover::before {
    left: 100%;
}

.gatcha-logo-img {
    height: 20px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.logo-accent {
    color: var(--gatcha-primary);
    font-weight: 500;
}

.gatcha-v2-controls {
    display: flex;
    gap: 8px;
}

.gatcha-v2-control-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--gatcha-radius);
    background: rgba(255, 255, 255, 0.1);
    color: var(--gatcha-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--gatcha-transition);
    backdrop-filter: blur(8px);
}

.gatcha-v2-control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.gatcha-v2-control-btn.close:hover {
    background: var(--gatcha-error);
}

.gatcha-v2-control-btn:active {
    transform: scale(0.95);
}

/* ==============================================
   Основной контент
   ============================================== */

.gatcha-v2-content {
    flex: 1;
    padding: 32px 24px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--gatcha-border) transparent;
}

.gatcha-v2-content::-webkit-scrollbar {
    width: 6px;
}

/* 3D наклон для отдельных элементов */
.booster-item,
.drop-frame {
    transform-style: preserve-3d;
}

.gatcha-v2-content::-webkit-scrollbar-track {
    background: transparent;
}

.gatcha-v2-content::-webkit-scrollbar-thumb {
    background: var(--gatcha-border);
    border-radius: 3px;
}

/* ==============================================
   Статистика
   ============================================== */

.gatcha-v2-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 14px;
    color: var(--gatcha-text-secondary);
}

.stats-text, .stats-link {
    font-weight: 500;
}

.stats-link {
    color: var(--gatcha-accent);
    text-decoration: none;
    transition: var(--gatcha-transition);
}

.stats-link:hover {
    color: var(--gatcha-text-primary);
    text-decoration: underline;
}

.stats-divider {
    width: 1px;
    height: 14px;
    background: var(--gatcha-border);
}

/* ==============================================
   Контейнер пакета
   ============================================== */

.gatcha-v2-pack-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    position: relative;
    padding: 40px 0;
}

.gatcha-v2-pack {
    position: relative;
    width: 235px;
    height: 420px;
    cursor: pointer;
    transition: .2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* box-shadow: var(--gatcha-pack-shadow); */
    transform-origin: center;
    transition: var(--gatcha-transition-bounce);
    z-index: 100;
}

/* Убираем старые элементы pack-top и pack-bottom */
.gatcha-v2-pack .pack-top,
.gatcha-v2-pack .pack-bottom {
    display: none;
}

/* Hover эффект теперь управляется через JavaScript для более точного контроля */

/* Простая анимация появления контейнера карт */
.drop-frame {
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.8s ease-out, filter 0.8s ease-out;
}

.drop-frame.visible {
    opacity: 1;
    filter: none;
}

/* Размытие бустера при открытии управляется через JavaScript */

.gatcha-anim-frame {
    transform-origin: center 40%;
    transition: .5s;
}

.gatcha-anim-frame.shaking {
    animation: packShake 1.5s ease-in-out;
}

.gatcha-anim-frame.loading {
    animation: packPulse 2s ease-in-out infinite alternate;
}

.gatcha-anim-frame.opened {
    transform: scale(1.1);
}

.gatcha-anim-frame.opened .pack-content {
    opacity: 0;
    transform: translateY(8px);
}

.gatcha-anim-frame.opened .pack-count {
    opacity: 0;
    /* transform: translateY(8px); */
}

.booster-item {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    pointer-events: auto;
    user-select: none;
    transition: var(--gatcha-transition-bounce), opacity 1s ease-out 1s;
    /* z-index: 51; */
}

.gatcha-anim-frame.opened .booster-item {
    pointer-events: none;
    user-select: none;
}

.booster-top {
    width: 235px;
    height: 46px;
    background-image: url('/gatcha/booster-top.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    transition: 1s ease-out;
}

.booster-bottom {
    width: 235px;
    height: 374px;
    background-image: url('/gatcha/booster-bottom.png');
    background-repeat: no-repeat;
    background-position: top center;
    margin-top: -1px;
    transition: 1s ease-out;
}

.gatcha-anim-frame.opened .booster-top {
    transform: translateY(-8px) rotate(3deg);
    opacity: 0;
}

.gatcha-anim-frame.opened .booster-bottom {
    transform: translateY(8px);
    opacity: 0;
}

/* .pack-shine удален полностью */

.pack-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, transparent 70%);
    animation: packGlow 1.5s ease-in-out infinite alternate;
    border-radius: inherit;
}

/* Контент пакета */
.pack-content {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 5;
    flex: 1;
    justify-content: center;
    padding: 40px 20px;
    transition: 1.5s;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* Стили для простого заголовка в iframe */
.gatcha-v2-simple-header {
    position: relative;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    background: rgba(34, 27, 40, 0.9);
    border-bottom: 1px solid var(--gatcha-border);
    border-top-left-radius: var(--gatcha-radius);
    border-top-right-radius: var(--gatcha-radius);
    backdrop-filter: blur(10px);
}

.gatcha-v2-simple-header .gatcha-v2-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gatcha-v2-simple-header .gatcha-logo-img {
    height: 32px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.pack-name {
    font-family: 'Rubik', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--gatcha-text-primary);
    margin-bottom: 16px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.pack-cost {
    font-family: 'Rubik', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--gatcha-text-primary);
    opacity: 0.9;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.pack-count {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Rubik', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    color: var(--gatcha-text-primary);
    opacity: 0.8;
    z-index: 6;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px 12px;
    border-radius: 12px;
    backdrop-filter: blur(4px);
    transition: 1.5s;
}

/* Частицы */
.pack-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: var(--gatcha-accent);
    border-radius: 50%;
    animation: particleExplode 1s ease-out forwards;
}

/* Эффекты открытия */
.pack-effects {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.spark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 20px;
    background: linear-gradient(to bottom, var(--gatcha-accent), transparent);
    border-radius: 1px;
    animation: sparkFly 1s ease-out forwards;
}

.spark:nth-child(1) { transform: rotate(0deg); }
.spark:nth-child(2) { transform: rotate(45deg); }
.spark:nth-child(3) { transform: rotate(90deg); }
.spark:nth-child(4) { transform: rotate(135deg); }
.spark:nth-child(5) { transform: rotate(180deg); }
.spark:nth-child(6) { transform: rotate(225deg); }
.spark:nth-child(7) { transform: rotate(270deg); }
.spark:nth-child(8) { transform: rotate(315deg); }

/* ==============================================
   Результаты с навигацией
   ============================================== */

.gatcha-v2-results {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    z-index: 1;
}

.results-viewer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    min-height: 250px;
}

/* Навигация */
.results-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--gatcha-radius);
    backdrop-filter: blur(8px);
}

.nav-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--gatcha-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--gatcha-transition);
    backdrop-filter: blur(8px);
}

.nav-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.card-counter {
    font-size: 14px;
    font-weight: 600;
    color: var(--gatcha-text-primary);
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(4px);
}

/* Просмотрщик карт */
.card-viewer {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 200px;
    touch-action: pan-y;
}

.card-container {
    position: relative;
    width: 100%;
    max-width: 180px;
    transition: var(--gatcha-transition);
    cursor: pointer;
}

.card-container.card-fade-in {
    animation: cardFadeIn 0.3s ease-out;
}

@keyframes cardFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Индикаторы точки */
.card-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 8px 8px;
}

.indicator {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.149);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.309);
}

.indicator.active {
    background: var(--gatcha-primary);
    box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.309);
}

.indicator:hover:not(.active) {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

/* Карточка в просмотрщике */
.results-viewer .result-card {
    width: 100%;
    background: var(--gatcha-bg-secondary);
    border-radius: var(--gatcha-radius);
    padding: 12px;
    position: relative;
    overflow: hidden;
    transition: var(--gatcha-transition);
    border: 1px solid var(--gatcha-border);
}

.results-viewer .result-card:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--gatcha-shadow-lg);
}

.results-viewer .card-image {
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

.results-viewer .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--gatcha-transition);
}

.results-viewer .result-card:hover .card-image img {
    transform: scale(1.05);
}

.results-viewer .card-info {
    text-align: center;
}

.results-viewer .card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--gatcha-text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.results-viewer .card-rarity {
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--gatcha-primary);
    color: var(--gatcha-text-primary);
    display: inline-block;
}

.results-viewer .card-new-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--gatcha-error);
    color: var(--gatcha-text-primary);
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    animation: badgePulse 1s ease-in-out infinite alternate;
}

/* Редкости карт */
.results-viewer .result-card.rarity-UR .card-glow {
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
}

.results-viewer .result-card.rarity-SSR .card-glow {
    background: radial-gradient(circle, rgba(138, 43, 226, 0.3) 0%, transparent 70%);
}

.results-viewer .result-card.rarity-SR .card-glow {
    background: radial-gradient(circle, rgba(30, 144, 255, 0.3) 0%, transparent 70%);
}

.results-viewer .result-card.rarity-R .card-glow {
    background: radial-gradient(circle, rgba(50, 205, 50, 0.3) 0%, transparent 70%);
}

.results-viewer .card-glow {
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    animation: cardGlow 2s ease-in-out infinite alternate;
}

/* Контейнер с навигацией */
.cards-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Стрелки навигации */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: rgb(0 0 0 / 20%);
    color: var(--gatcha-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--gatcha-transition);
    backdrop-filter: blur(12px);
    font-size: 28px;
    font-weight: bold;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #75757524;
}

.nav-arrow-left {
    left: -25px;
}

.nav-arrow-right {
    right: -25px;
}

.nav-arrow:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.378);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.nav-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: translateY(-50%);
}

.nav-arrow:active:not(:disabled) {
    transform: translateY(-50%) scale(0.95);
}

/* Стили для .drop-frame в результатах - новая концепция стопки */
.gatcha-v2-results .drop-frame.card-stack {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 240px;
    max-width: 270px;
    margin: 0 auto;
    position: relative;
    min-height: 400px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    perspective: 1000px;
}

.gatcha-v2-results .drop-frame.card-stack:active {
    cursor: grabbing;
}

/* Базовые стили для всех карточек */
.card-wrapper {
    width: 100%;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: none;
    transform-origin: center bottom;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity, z-index, drop-shadow;
    transition: box-shadow .3s ease;
}

/* Карты в стопке (подложные карты) */
.card-wrapper.card-stack-item {
    z-index: 5;
    transform: translate3d(0, 3px, 0) scale(0.98);
    opacity: 0.9;
    filter: brightness(0.95);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 0.3s ease,
                filter 0.3s ease,
                box-shadow .3s ease;
}

/* Текущая карта (верхняя в стопке) */
.card-wrapper.card-current {
    z-index: 20;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: none;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 0.3s ease,
                box-shadow .3s ease;
    box-shadow: 0 10px 60px #211b2d;
}

/* Карта во время перетаскивания */
.card-wrapper.card-dragging {
    z-index: 25;
    transition: none !important;
    will-change: transform, opacity;
    transform-origin: center center;
}

/* Возвращающаяся предыдущая карта (появляется сверху) */
.card-wrapper.card-returning {
    z-index: 30;
    transition: none !important;
    will-change: transform, opacity;
    transform-origin: center top;
    box-shadow: 0 10px 60px #211b2d;
}

/* Эффект яркости для редких карт */
.card-wrapper.card-bright {
    animation: cardBrightEffect 1s ease-in-out;
    /* filter: brightness(1.1) saturate(1.2); */
}

/* Улучшенные анимации для плавных переходов */
.card-wrapper.animate-smooth {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.3s ease;
}


/* ==============================================
   Нижняя панель
   ============================================== */

.gatcha-v2-bottom {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 24px 32px;
}

.balance-item {
    display: flex;
    gap: 6px;
    align-items: center;
}

.balance-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.28);
    padding: 14px 16px;
    border-radius: 100px;
    background-color: rgba(54, 47, 69, 0.4);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.balance-label {
    font-weight: 400;
}

.balance-value {
    font-weight: 500;
    color: var(--gatcha-text-primary);
}

.balance-divider {
    width: 1px;
    height: 16px;
    background: var(--gatcha-border);
}

/* ==============================================
   Кнопки действий
   ============================================== */

.gatcha-v2-action {
    display: flex;
    justify-content: center;
}

.gatcha-v2-btn {
    position: relative;
    padding: 16px 24px;
    min-height: 56px;
    border-radius: var(--gatcha-radius-lg);
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    transition: var(--gatcha-transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.41);
    outline: none;
    border: none;
    font-family: var(--font-family);
}

.gatcha-v2-btn.primary {
    background: linear-gradient(135deg, var(--gatcha-primary) 0%, var(--gatcha-secondary) 50%, var(--gatcha-accent) 100%);
    color: var(--gatcha-text-primary);
}

.gatcha-v2-btn.primary:hover:not(:disabled) {
}

.gatcha-v2-btn.primary:active:not(:disabled) {
    filter: brightness(0.9);
}

.gatcha-v2-btn.disabled {
    background: var(--gatcha-bg-tertiary);
    color: var(--gatcha-text-muted);
    cursor: not-allowed;
}

.gatcha-v2-btn.loading {
    background: var(--gatcha-bg-tertiary);
    color: var(--gatcha-text-secondary);
    cursor: wait;
}

.btn-text {
    position: relative;
    z-index: 1;
}

.btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.gatcha-v2-btn.primary:hover .btn-shine {
    left: 100%;
}

.btn-loader {
    width: 16px;
    height: 16px;
    border: 2px solid var(--gatcha-text-muted);
    border-top: 2px solid var(--gatcha-text-secondary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 8px;
}

/* ==============================================
   Resize handle
   ============================================== */

.gatcha-v2-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: nw-resize;
    background: linear-gradient(-45deg, transparent 30%, var(--gatcha-border) 30%, var(--gatcha-border) 70%, transparent 70%);
    opacity: 0.5;
    transition: var(--gatcha-transition);
}

.gatcha-v2-resize-handle:hover {
    opacity: 1;
}

/* ==============================================
   Backdrop
   ============================================== */

.gatcha-v2-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(4, 3, 9, 0.8);
    backdrop-filter: blur(30px);
    z-index: 9998;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gatcha-v2-backdrop.visible {
    opacity: 1;
    visibility: visible;
}

/* ==============================================
   Модальное окно помощи
   ============================================== */

.help-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.help-content {
    background: var(--gatcha-bg-primary);
    padding: 32px;
    border-radius: var(--gatcha-radius-xl);
    max-width: 400px;
    margin: 20px;
    box-shadow: var(--gatcha-shadow-xl);
    border: 1px solid var(--gatcha-border);
}

.help-content h3 {
    color: var(--gatcha-text-primary);
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 600;
}

.help-content ul {
    color: var(--gatcha-text-secondary);
    margin-bottom: 20px;
    padding-left: 20px;
}

.help-content li {
    margin-bottom: 8px;
    line-height: 1.5;
}

.help-content button {
    background: var(--gatcha-primary);
    color: var(--gatcha-text-primary);
    border: none;
    padding: 12px 24px;
    border-radius: var(--gatcha-radius);
    font-weight: 600;
    cursor: pointer;
    transition: var(--gatcha-transition);
    width: 100%;
}

.help-content button:hover {
    background: var(--gatcha-secondary);
}

/* ==============================================
   Анимации
   ============================================== */

@keyframes packShake {
    0%, 100% { transform: translateX(0);  }
    10%, 30%, 50%, 70% { transform: translateX(-2px) rotate(-1deg); }
    20%, 40%, 60%, 80% { transform: translateX(2px) rotate(1deg); }
    100% { transform: translateX(0) rotate(0); }
}

@keyframes packPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* packShine анимация удалена полностью */

@keyframes packGlow {
    0% { opacity: 0.4; transform: scale(1); }
    100% { opacity: 0.8; transform: scale(1.1); }
}

@keyframes particleExplode {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) translate(var(--angle)) scale(1);
        opacity: 0;
    }
}

@keyframes sparkFly {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) translateY(-50px) scale(0);
        opacity: 0;
    }
}

@keyframes cardReveal {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes cardGlow {
    0% { opacity: 0.3; }
    100% { opacity: 0.7; }
}

@keyframes badgePulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Анимации для стопки карт */

/* Анимация выхода карты из стопки */
@keyframes cardExitSwipe {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate3d(-120%, -15%, 0) rotate(-20deg);
        opacity: 0;
    }
}

/* Анимация подъема нижней карты на верх */
@keyframes cardRiseUp {
    0% {
        transform: translate3d(0, 3px, 0) scale(0.98);
        opacity: 0.8;
        filter: brightness(0.9);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
        filter: brightness(1) drop-shadow(0 0 30px rgba(255, 255, 255, 0.3));
    }
}

/* Анимация возвращения предыдущей карты */
@keyframes cardReturnFromLeft {
    0% {
        transform: translate3d(-120%, -15%, 0) rotate(-20deg);
        opacity: 0;
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 1;
        filter: brightness(1.2) drop-shadow(0 0 30px rgba(255, 255, 255, 0.3));
    }
}

@keyframes cardBrightEffect {
    0% {
        filter: brightness(1) drop-shadow(0 10px 60px rgba(255, 255, 255, 0));
    }
    10% {
        filter: brightness(1.2) drop-shadow(0 -10px 80px rgba(255, 217, 0, 0.179));
    }
    100% {
        filter: brightness(1) drop-shadow(0 10px 0px transparent);
    }
}

/* Новые анимации для концепции стопки карт */

/* Анимация поднятия следующей карты из стопки */
@keyframes cardStackRise {
    0% {
        transform: translate3d(0, 3px, 0) scale(0.98);
        opacity: 0.9;
        filter: brightness(0.95);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
        filter: brightness(1);
    }
}

/* Анимация выхода карты за пределы экрана */
@keyframes cardSwipeExit {
    to {
        transform: translate3d(var(--exit-x, 120%), var(--exit-y, -10%), 0)
                   rotate(var(--exit-rotation, 20deg));
        opacity: 0;
    }
}

/* Анимация возвращения карты на место */
@keyframes cardReturn {
    to {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 1;
    }
}

/* Анимация появления предыдущей карты сверху */
@keyframes cardReturnFromTop {
    from {
        transform: translate3d(0, -100%, 0) rotate(-20deg);
        opacity: 0.3;
    }
    to {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 1;
    }
}

/* Пульсация карт в стопке для показа интерактивности */
@keyframes stackCardPulse {
    0%, 100% {
        transform: translate3d(0, 3px, 0) scale(0.98);
    }
    50% {
        transform: translate3d(0, 1px, 0) scale(0.99);
    }
}

/* Микро-анимация при касании */
@keyframes cardTouchFeedback {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

/* ==============================================
   Модальное окно с iframe в cards.ejs
   ============================================== */

.modal.gatcha-v2-modal {
    background: rgba(4, 3, 9, 0.8);
    backdrop-filter: blur(30px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    max-width: none;
    max-height: none;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* Убираем стандартные стили dialog для совместимости */
.modal.gatcha-v2-modal::backdrop {
    display: none;
}

.gatcha-v2-modal.mobile .gatcha-v2-container {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 420px !important;
    max-height: none !important;
    border-radius: 0 !important;
    position: relative !important;
    transform: none !important;
    box-shadow: none !important;
    border-width: 0 !important;
}

.gatcha-v2-modal.mobile .gatcha-v2-container .main-header {
    display: none;
}

.modal.gatcha-v2-modal.fullscreen .gatcha-v2-container {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
}

.modal.gatcha-v2-modal .gatcha-v2-container {
    position: relative;
    width: 396px;
    height: 814px;
    max-width: 90vw;
    max-height: 90vh;
    background: var(--gatcha-bg-gradient);
    border-radius: var(--gatcha-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: var(--gatcha-transition);
    user-select: none;
    box-shadow: var(--gatcha-shadow);
    border: 1px solid var(--gatcha-border);
}

.modal.gatcha-v2-modal .gatcha-v2-container.dragging {
    cursor: grabbing;
    transform: scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.modal.gatcha-v2-modal .gatcha-v2-container.resizing {
    transition: none;
}

.modal.gatcha-v2-modal .gatcha-v2-container.minimized {
    transform: scale(0.8);
    opacity: 0.7;
}

/* Iframe контейнер */
.gatcha-v2-iframe-container {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.gatcha-v2-iframe-container.dragging-disabled {
    pointer-events: none;
}

.gatcha-v2-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: var(--gatcha-bg-gradient);
}

/* Лоадер */
.gatcha-v2-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--gatcha-bg-gradient);
    z-index: 100;
}

.loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--gatcha-border);
    border-top: 3px solid var(--gatcha-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

.loader-text {
    color: var(--gatcha-text-secondary);
    font-size: 14px;
    font-weight: 500;
}

/* Дублирующий стиль backdrop удален */

/* ==============================================
   Кнопка триггер для открытия gatcha-v2
   ============================================== */

.gatcha-v2-trigger {
    position: relative;
    background: linear-gradient(135deg, var(--gatcha-primary) 0%, var(--gatcha-secondary) 100%);
    border: none;
    border-radius: var(--gatcha-radius-lg);
    color: var(--gatcha-text-primary);
    font-weight: 600;
    font-size: 16px;
    padding: 16px 24px;
    cursor: pointer;
    transition: var(--gatcha-transition-bounce);
    box-shadow: var(--gatcha-shadow);
    overflow: hidden;
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.gatcha-v2-trigger:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--gatcha-shadow-lg);
}

.gatcha-v2-trigger:active {
    transform: translateY(0) scale(0.98);
}

.gatcha-v2-trigger::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.gatcha-v2-trigger:hover::before {
    left: 100%;
}

/* Анимация ракеты */
@keyframes rocketBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-2px) rotate(2deg); }
    75% { transform: translateY(2px) rotate(-2deg); }
}

.gatcha-v2-trigger:hover {
    animation: rocketBounce 0.6s ease-in-out;
}

/* ==============================================
   Медиа-запросы
   ============================================== */

/* Планшеты */
@media (max-width: 768px) {
    .gatcha-v2-container {
        width: 360px;
        height: 640px;
    }

    .pack-name {
        font-size: 28px;
    }

    .pack-cost {
        font-size: 20px;
    }

    .results-container {
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
        gap: 8px;
    }
}

/* Мобильные */
@media (max-width: 480px) {
    .balance-info {
        flex-wrap: wrap;
    }

    .nav-arrow {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }

    .nav-arrow-left {
        left: -20px;
    }

    .nav-arrow-right {
        right: -20px;
    }

    .gatcha-v2-results .drop-frame {
        min-height: 300px;
        max-width: 220px;
    }

    .indicator {
        width: 8px;
        height: 8px;
    }

    .card-indicators {
        gap: 8px;
        padding: 12px 8px 8px;
    }
}

/* ==============================================
   Минимизированная вкладка
   ============================================== */

.gatcha-v2-minimized-tab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    width: 160px;
    height: 48px;
    background: var(--gatcha-bg-gradient);
    border-radius: var(--gatcha-radius);
    border: 1px solid var(--gatcha-border);
    box-shadow: var(--gatcha-shadow-lg);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    display: flex;
    align-items: center;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8) translateY(20px);
}

.gatcha-v2-minimized-tab.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
}

/* CSS анимации заменены на JavaScript анимации для динамических координат */

.gatcha-v2-minimized-tab:hover {
    transform: translateY(-2px);
    box-shadow: var(--gatcha-shadow-xl);
}

.gatcha-v2-minimized-tab:active {
    transform: translateY(0);
}

.gatcha-v2-minimized-tab .minimized-tab-header {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 18px;
    background: rgba(34, 27, 40, 0.9);
    backdrop-filter: blur(10px);
}

.gatcha-v2-minimized-tab.mobile {
    background-image: url('/gatcha/minimized-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 0px 32px rgb(45 19 77 / 60%);
    border: 2px solid rgb(179 108 255 / 18%);
}

.gatcha-v2-minimized-tab .gatcha-v2-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gatcha-v2-minimized-tab .gatcha-logo-img {
    height: 14px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.gatcha-v2-minimized-tab .gatcha-v2-controls {
    display: flex;
    gap: 8px;
}

.gatcha-v2-minimized-tab .gatcha-v2-control-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--gatcha-radius);
    background: rgba(255, 255, 255, 0.1);
    color: var(--gatcha-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--gatcha-transition);
    backdrop-filter: blur(8px);
}

.gatcha-v2-control-btn.drop::after {
    content: '';
    position: relative;
    width: 12px;
    height: 12px;
    background-image: url('/ui/drop-active.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

}

.gatcha-v2-minimized-tab .gatcha-v2-control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.gatcha-v2-minimized-tab .gatcha-v2-control-btn.close:hover {
    background: var(--gatcha-error);
}

/* Очень маленькие экраны */
@media (max-width: 320px) {
}

/* Высокие экраны (ландшафт на мобильных) */
@media (max-height: 480px) and (orientation: landscape) {
    .gatcha-v2-modal.mobile .gatcha-v2-container {
        overflow-y: auto;
    }

    .gatcha-v2-pack-container {
        min-height: 200px;
    }

    .results-container {
        max-height: 120px;
    }
}

/* Мобильные стили для минимизированной вкладки */
@media (max-width: 768px) {
    .gatcha-v2-minimized-tab {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        bottom: 100px;
        right: 20px;
        left: auto;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    }

    .gatcha-v2-minimized-tab.mobile {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .gatcha-v2-minimized-tab.mobile.dragging {
        transform: scale(1.1);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
        z-index: 10000;
    }

    .gatcha-v2-minimized-tab.mobile.delete-zone {
        transform: scale(0.8);
        opacity: 0.3;
        filter: blur(10px)
    }

    .gatcha-v2-minimized-tab.mobile::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: .2s;
    }

    .gatcha-v2-minimized-tab.mobile.delete-zone::after {
        opacity: 1;
        background: linear-gradient(135deg, #e74c3c, #c0392b);
    }

    .gatcha-v2-minimized-tab .minimized-tab-header {
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }

    .gatcha-v2-minimized-tab .gatcha-v2-logo {
        width: 100%;
        height: 100%;
    }

    .gatcha-v2-minimized-tab .gatcha-logo-img {
        height: 24px;
        width: 24px;
    }

    .gatcha-v2-minimized-tab .gatcha-v2-controls {
        display: none;
    }
}
/* ── notifications.css ── */
/* Универсальная система уведомлений для всего проекта.
   API: window.notify.show({...}) — см. /js/notifications.js
   Использует переменные из /styles/index.css, но fallback есть для standalone-страниц. */

#notify-root {
    position: fixed;
    top: 20px;
    right: 20px;
    /* left/bottom: auto — на случай если браузер по popover-дефолту поставит inset:0 */
    left: auto;
    bottom: auto;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    max-width: 380px;
    width: calc(100vw - 40px);
    font-family: Rubik, system-ui, -apple-system, sans-serif;
    /* Popover-режим: убираем дефолтные overlay-стили браузера (inset:0, margin, border, background) */
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    overflow: visible;
}
/* Popover default = display:none; когда notify-root открыт как popover,
   выставляем flex обратно. Работает благодаря :popover-open (fallback — сам JS
   вызывает showPopover, что уже показывает элемент). */
#notify-root:popover-open {
    display: flex;
}

/* Визуальный прогресс-бар внутри уведомления (например для повышения уровня).
   Отличается от .notify__progress — та полоса показывает time-to-close, а эта
   — визуализирует любой прогресс (XP до нового уровня, заполнение и т.п.). */
.notify__progressbar {
    margin-top: 8px;
    grid-column: 2;
}
.notify__progressbar-track {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}
.notify__progressbar-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0%;
    background: #4DC167;
    border-radius: inherit;
    box-shadow: 0 0 8px rgba(77, 193, 103, .35);
    transition: none;
}
.notify__progressbar-label {
    margin-top: 4px;
    opacity: .75;
    font-size: 11px;
    letter-spacing: .2px;
}
.notify__progressbar-label:empty { display: none; }
@media (max-width: 540px) {
    #notify-root {
        top: 12px;
        left: 12px;
        right: 12px;
        max-width: none;
        width: auto;
    }
}

.notify {
    pointer-events: auto;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-gap: 12px;
    align-items: center;
    padding: 14px 38px 14px 14px;
    border-radius: 14px;
    background: rgba(30, 31, 33, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    color: #fff;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    opacity: 0;
    transform: translate3d(120%, 0, 0);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s;
    overflow: hidden;
    will-change: transform, opacity;
}
.notify--in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
.notify--out {
    opacity: 0;
    transform: translate3d(120%, 0, 0);
    transition: transform 0.3s ease-in, opacity 0.25s;
}
@media (max-width: 540px) {
    .notify {
        transform: translate3d(0, -120%, 0);
    }
    .notify--out {
        transform: translate3d(0, -120%, 0);
    }
}
.notify--clickable { cursor: pointer; }
.notify--clickable:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

/* === Icon === */
.notify__icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}
.notify__icon img,
.notify__icon svg { width: 22px; height: 22px; }
.notify__icon-emoji {
    font-size: 22px;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* === Content === */
.notify__content { min-width: 0; overflow: hidden; }
.notify__title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 4px;
    min-height: 1.2em;
    letter-spacing: -0.1px;
}
.notify__body {
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
    min-height: 1em;
    word-break: break-word;
}
.notify__body:empty { display: none; }
/* В pompous-режиме тело ВСЕГДА занимает место — typewriter заполняет его постепенно. */
.notify--pompous .notify__body:empty { display: block; }

/* === Hero image (top of notification) === */
.notify--has-image { padding-top: 0; padding-left: 0; padding-right: 0; padding-bottom: 0; }
.notify--has-image .notify__image {
    grid-column: 1 / -1;
    height: 120px;
    overflow: hidden;
    background: #000;
}
.notify--has-image .notify__image img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
.notify--has-image .notify__icon { margin-left: 14px; margin-top: -28px; }
.notify--has-image .notify__content { padding: 12px 14px 14px 0; }
.notify--has-image .notify__close { top: 10px; right: 10px; background: rgba(0,0,0,0.5); color: #fff; }

/* === Close button === */
.notify__close {
    position: absolute;
    top: 8px; right: 8px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    border: none;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, color 0.2s, transform 0.15s;
    padding: 0;
}
.notify__close:hover { background: rgba(255, 255, 255, 0.18); color: #fff; transform: scale(1.1); }

/* === Actions === */
.notify__actions {
    display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap;
}
.notify__action {
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.notify__action:hover  { background: rgba(255, 255, 255, 0.24); }
.notify__action:active { transform: scale(0.96); }
.notify__action--primary { background: #fff; color: #1a1a1a; }
.notify__action--primary:hover { background: #f0f0f0; }

/* === Type colors === */
.notify--success .notify__icon { background: linear-gradient(135deg, #4DC167, #2a9d4c); }
.notify--success .notify__title { color: #4DC167; }

.notify--warning .notify__icon { background: linear-gradient(135deg, #FF8832, #c96a1a); }
.notify--warning .notify__title { color: #FF8832; }

.notify--error   .notify__icon { background: linear-gradient(135deg, #DF5A5A, #b03434); }
.notify--error   .notify__title { color: #DF5A5A; }

.notify--info    .notify__icon { background: linear-gradient(135deg, #5A9DDF, #2a6a9a); }
.notify--info    .notify__title { color: #5A9DDF; }

.notify--achievement .notify__icon {
    background: linear-gradient(135deg, #ffd60a, #ff9f0a);
    color: #1a1100;
    box-shadow: 0 0 16px rgba(255, 214, 10, 0.5);
}
.notify--achievement .notify__title {
    color: #ffd60a;
    text-shadow: 0 0 12px rgba(255, 214, 10, 0.3);
}

.notify--levelup .notify__icon {
    background: linear-gradient(135deg, #b794f6, #7c3aed);
    color: #fff;
    box-shadow: 0 0 16px rgba(167, 139, 250, 0.5);
}
.notify--levelup .notify__title { color: #c4b5fd; }

/* === Pompous style (большое появление) === */
.notify--pompous {
    transform: scale(0.5);
    transform-origin: center;
    border-width: 1.5px;
    padding: 18px 44px 18px 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6),
                0 0 40px rgba(255, 214, 10, 0.2);
}
.notify--pompous.notify--in {
    animation: pompousIn 0.65s cubic-bezier(0.34, 1.6, 0.64, 1) forwards;
}
.notify--pompous.notify--out {
    animation: pompousOut 0.4s ease-in forwards;
}
@keyframes pompousIn {
    0%   { transform: scale(0.45) rotate(-2deg); opacity: 0; }
    55%  { transform: scale(1.08) rotate(0.5deg); opacity: 1; }
    80%  { transform: scale(0.98) rotate(0); }
    100% { transform: scale(1)    rotate(0); opacity: 1; }
}
@keyframes pompousOut {
    0%   { transform: scale(1);    opacity: 1; }
    100% { transform: scale(0.88); opacity: 0; }
}
.notify--pompous .notify__title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
}
.notify--pompous .notify__body {
    font-size: 13px;
}
.notify--pompous .notify__icon { width: 44px; height: 44px; font-size: 22px; }
.notify--pompous .notify__icon-emoji { font-size: 26px; }

.notify--pompous.notify--achievement,
.notify--pompous.notify--levelup {
    border-color: rgba(255, 214, 10, 0.45);
    background: linear-gradient(135deg, rgba(40, 30, 10, 0.96), rgba(30, 31, 33, 0.96));
}
.notify--pompous.notify--levelup {
    border-color: rgba(167, 139, 250, 0.45);
    background: linear-gradient(135deg, rgba(40, 30, 60, 0.96), rgba(30, 31, 33, 0.96));
}

/* === Typewriter cursor === */
.notify__title.typing::after,
.notify__body.typing::after {
    content: '▌';
    display: inline-block;
    margin-left: 2px;
    color: currentColor;
    opacity: 0.7;
    animation: typewriterCursor 0.7s infinite;
}
@keyframes typewriterCursor {
    50% { opacity: 0; }
}

/* === Sparkles (для pompous) === */
.notify__sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}
.notify__sparkle {
    position: absolute;
    width: 4px; height: 4px;
    background: #ffd60a;
    border-radius: 50%;
    box-shadow: 0 0 10px #ffd60a, 0 0 20px rgba(255, 214, 10, 0.6);
    opacity: 0;
    animation: sparkle 2.2s ease-in-out infinite;
}
.notify--levelup .notify__sparkle { background: #c4b5fd; box-shadow: 0 0 10px #b794f6, 0 0 20px rgba(167, 139, 250, 0.6); }
.notify__sparkle:nth-child(1) { top: 18%; left:  8%; animation-delay: 0.0s; }
.notify__sparkle:nth-child(2) { top: 62%; left: 82%; animation-delay: 0.3s; }
.notify__sparkle:nth-child(3) { top: 32%; left: 68%; animation-delay: 0.6s; }
.notify__sparkle:nth-child(4) { top: 78%; left: 22%; animation-delay: 0.9s; }
.notify__sparkle:nth-child(5) { top: 48%; left: 92%; animation-delay: 1.2s; }
.notify__sparkle:nth-child(6) { top: 8%;  left: 50%; animation-delay: 1.5s; }
@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0.4); }
    40%, 60% { opacity: 1; transform: scale(1.4); }
}

/* === Прогресс-полоска жизни уведомления (опционально) === */
.notify__progress {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.06);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    overflow: hidden;
}
.notify__progress-bar {
    height: 100%;
    background: currentColor;
    width: 100%;
    transform-origin: left;
    animation: notifyProgress linear forwards;
    opacity: 0.7;
}
@keyframes notifyProgress {
    to { transform: scaleX(0); }
}

/* === Light theme support === */
@media (prefers-color-scheme: light) {
    /* Опционально, если страница в light-теме */
}

/* ── wfc-fx.css ── */
/* WfcFX — field-эффекты (свечение / наклон / shimmer / ripple), навешиваются JS через wfc-fx.js
   .wfc-fx--auto-active — тот же визуал, что и :hover, но переключается таймером из JS
   (startFieldAutoplay в wfc-fx.js, включается через opts.autoplay) — для тач-устройств,
   где :hover/mousemove никогда не происходят и эффект иначе никто не увидит. */

.wfc-fx {
    position: relative;
}

/* Контент (дочерние ЭЛЕМЕНТЫ, не голый текстовый узел) всегда рисуется ПОВЕРХ узора эффекта
   (::before у field-типов ниже — z-index:1) — иначе на кнопке/карточке с текстом или иконкой
   внутри эффект перекрывает содержимое. Раньше это лечилось вручную (z-index на каждом новом
   месте использования, см. .gm__sub-tier__plate-body в static/styles/index.css) — теперь
   работает "из коробки" для любого элемента с data-fx, без доп. разметки.
   Голый текст без тега-обёртки (напр. текст сразу внутри <button>) CSS нацелить не может —
   такой текст нужно обернуть в <span> самостоятельно (см. FX_LIBRARY.md).
   z-index:2 — выше эффекта (1), но ниже отдельных декоративных слоёв, которые намеренно
   должны быть поверх контента (напр. .gm__sub-tier__plate-bar — z-index:3). Конкретный
   компонент может переопределить z-index/position своим более специфичным или более поздним
   по каскаду селектором, если ему нужно другое поведение (напр. дочерний элемент с собственным
   position:absolute, позиционируемым относительно более дальнего предка). */
.wfc-fx > * {
    position: relative;
    z-index: 2;
}

/* magic-glow: свечение, следующее за курсором. Цвет по умолчанию — тёплое золото
   (лучше читается на тёмном фоне сайта, чем плоский белый); можно переопределить через
   attach(el, 'magic-glow', {color: '...'}) — ставит --fx-glow-color на элементе. */
.wfc-fx--glow {
    isolation: isolate;
}
.wfc-fx--glow::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: radial-gradient(
        170px circle at var(--fx-x, 50%) var(--fx-y, 50%),
        var(--fx-glow-color, rgba(255, 209, 128, 0.4)),
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.wfc-fx--glow:hover::before,
.wfc-fx--glow.wfc-fx--auto-active::before {
    opacity: 1;
}

/* tilt: ЧИСТЫЙ 3D-наклон по курсору, без какой-либо своей заливки/градиента — раньше
   был неразрывно склеен с радужным блеском в одном пресете, теперь это независимый
   модификатор. Комбинируется с любым другим holo-* пресетом через запятую:
   data-fx="holo,tilt" (или holo-foil/holo-chrome вместо holo). Не у каждой кнопки с
   рябью нужен наклон — и наоборот, tilt можно повесить и на обычную кнопку без ряби. */
.wfc-fx--tilt {
    transform: perspective(700px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg));
    transition: transform 0.15s ease-out;
    transform-style: preserve-3d;
    will-change: transform;
}

/* holo: тот самый радужный блеск, что раньше жил внутри одного пресета с наклоном — теперь
   простая CSS-заливка без SVG-шума (в отличие от holo-foil/holo-chrome), можно использовать
   саму по себе на любой кнопке или скомбинировать с tilt для полного эффекта старой
   "голо-карты" (data-fx="holo,tilt"). */
.wfc-fx--shine {
    isolation: isolate;
}
.wfc-fx--shine::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    /* --fx-gradient — ставится JS только когда явно передан opts.gradient (см.
       buildLinearGradientCss в wfc-fx.js); без него используется этот литерал —
       поведение мест использования без выбора палитры не меняется. */
    background: var(--fx-gradient, linear-gradient(
        115deg,
        transparent 25%,
        rgba(255, 80, 160, 0.35) 38%,
        rgba(255, 225, 80, 0.35) 46%,
        rgba(80, 220, 255, 0.35) 54%,
        rgba(140, 90, 255, 0.35) 62%,
        transparent 75%
    ));
    background-size: 250% 250%;
    background-position: var(--fx-x, 50%) var(--fx-y, 50%);
    mix-blend-mode: color-dodge;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.wfc-fx--shine:hover::before,
.wfc-fx--shine.wfc-fx--auto-active::before {
    opacity: var(--fx-shine-opacity, 0.85);
}

/* holo-foil: пастельный радужный слой, искажённый двухслойным SVG-шумом (feTurbulence x2 +
   feOffset, управляемый курсором, + feDisplacementMap — см. createHoloFilter в wfc-fx.js) —
   неровное "жидкое" преломление, едущее вслед за курсором, без анимации по таймеру.
   Градиент — repeating с коротким периодом (~14% при background-size 260%) — на элементе
   виден почти двузначный десяток повторов спектра, как на реальном холографическом чехле,
   а не один плавный переход.
   overflow:hidden на самом элементе — чистая обрезка результата по форме кнопки СНАРУЖИ
   фильтра; псевдоэлемент нарочно намного больше кнопки (inset: -60%) и залит СПЛОШНЫМ
   градиентом без прозрачных стопов — иначе смещение штормит именно альфа-край, а не
   рисунок (это и был баг с "рябью только по контуру"). */
.wfc-fx--foil {
    isolation: isolate;
    overflow: hidden;
}
.wfc-fx--foil::before {
    content: '';
    position: absolute;
    inset: -60%;
    z-index: 1;
    /* 8 повторов спектра (период 12.5%). Разрывы между циклами теперь МЯГКИЕ — цвет плавно
       гаснет в прозрачность и так же плавно проявляется обратно (было: резкий transparent-стоп
       сразу после последнего цвета — выглядело "рублено"). Стоп в конце (12.5%) специально
       совпадает по цвету/альфе со стопом в начале (0%) — иначе на стыке повторов был бы
       заметный шов. */
    background: repeating-linear-gradient(140deg,
        rgba(255, 121, 232, 0.75) 0%,
        rgba(255, 222, 106, 0.75) 2.08%,
        rgba(98, 209, 178, 0.75) 4.17%,
        rgba(111, 184, 239, 0.75) 6.25%,
        rgba(160, 80, 255, 0.75) 8.33%,
        rgba(160, 80, 255, 0) 9.37%,
        transparent 10.42%,
        rgba(255, 121, 232, 0) 11.46%,
        rgba(255, 121, 232, 0.75) 12.5%
    );
    background-size: 260% 260%;
    background-position: var(--fx-x, 50%) var(--fx-y, 50%);
    mix-blend-mode: color-dodge;
    filter: var(--fx-holo-filter, none);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.wfc-fx--foil:hover::before,
.wfc-fx--foil.wfc-fx--auto-active::before {
    opacity: var(--fx-foil-opacity, 0.3);
}

/* holo-chrome: "gradient map" как в фотошопе — цвет берётся прямо из яркости шума
   (feComponentTransfer в createHoloChromeFilter, wfc-fx.js), а не из смещения готового
   CSS-градиента. Поэтому здесь НЕТ repeating-linear-gradient и НЕТ mask-image — сам
   ::before ничего не красит, всё изображение целиком синтезирует SVG-фильтр.
   inset:-30% + overflow:hidden на элементе — фильтр (feOffset двигает шум) считается с
   запасом за краями, чтобы не упереться в жёсткую границу filter-региона (был баг: видимый
   прямоугольник размером с кнопку — шум, сдвинутый курсором, утыкался в край и давал пустую
   полосу), а видимая часть аккуратно обрезается по скруглению кнопки СНАРУЖИ фильтра — без
   overflow:hidden сам SVG-фильтр не подчиняется border-radius и вылезает за края кнопки. */
.wfc-fx--chrome {
    isolation: isolate;
    overflow: hidden;
}
.wfc-fx--chrome::before {
    content: '';
    position: absolute;
    inset: -30%;
    z-index: 1;
    background: #fff;
    filter: var(--fx-holo-filter, none);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.wfc-fx--chrome:hover::before,
.wfc-fx--chrome.wfc-fx--auto-active::before {
    opacity: var(--fx-chrome-opacity, 0.3);
}

/* holo-texture: настоящая "карта градиента" (тот же принцип, что у holo-chrome) — яркость
   любой картинки (feImage) служит ИНДЕКСОМ, по которому подставляется цвет из фирменного
   холо-цикла сайта (см. HOLO_CYCLE_STOPS в wfc-fx.js). Курсор не двигает узор — форму
   всегда задаёт сама текстура — а КРУТИТ САМУ ТАБЛИЦУ ГРАДИЕНТА ПО КРУГУ (feComponentTransfer
   type="table", JS circular-сдвиг сэмплов на каждый mousemove, не ограничено 0..360°).
   Структура псевдоэлемента как у holo-chrome (inset-запас + overflow:hidden на элементе для
   чистой обрезки по форме кнопки СНАРУЖИ фильтра) — background у ::before не важен (сплошной
   transparent), т.к. вся картинка приходит из feImage внутри фильтра, а не из SourceGraphic
   самого псевдоэлемента. */
.wfc-fx--holo-texture {
    isolation: isolate;
    overflow: hidden;
}
.wfc-fx--holo-texture::before {
    content: '';
    position: absolute;
    inset: -20%;
    z-index: 1;
    background: transparent;
    filter: var(--fx-holo-filter, none);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.wfc-fx--holo-texture:hover::before,
.wfc-fx--holo-texture.wfc-fx--auto-active::before {
    opacity: var(--fx-holotex-opacity, 0.85);
}

/* shimmer-sweep: полоса блика, проходящая по поверхности при hover */
.wfc-fx--shimmer {
    overflow: hidden;
}
.wfc-fx--shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        75deg,
        transparent,
        rgba(255, 255, 255, 0.45),
        rgba(184, 79, 255, 0.2),
        transparent
    );
    transform: skewX(-20deg);
    pointer-events: none;
    transition: left 0.6s ease;
}
.wfc-fx--shimmer:hover::after {
    left: 130%;
}

/* click-ripple: волна от точки клика */
.wfc-fx--ripple {
    overflow: hidden;
}
.wfc-fx--ripple::after {
    content: '';
    position: absolute;
    top: var(--fx-ripple-y, 50%);
    left: var(--fx-ripple-x, 50%);
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    opacity: 0;
}
.wfc-fx--ripple.wfc-fx--rippling::after {
    animation: wfc-fx-ripple 0.6s ease-out;
}

@keyframes wfc-fx-ripple {
    0% {
        opacity: 0.6;
        transform: scale(0);
    }
    100% {
        opacity: 0;
        transform: scale(24);
    }
}

/* ── cropper.min.css ── */
/*!
 * Cropper.js v1.6.1
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2023-09-17T03:44:17.565Z
 */.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}
/* ── nprogress.css ── */
/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #29d;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
      -ms-transform: rotate(3deg) translate(0px, -4px);
          transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
          animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}