/* === Профиль пользователя === */
#profile {
    display: block;
    width: 100%;
}
#profile .profile-edit { display: none; }
#profile.is-editing .profile-view { display: none; }
#profile.is-editing .profile-edit { display: block; }

#profile .profile-edit__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
#profile .profile-edit__header .title_block { margin: 0; padding: 0; border: 0; }
#profile .profile-form-sep {
    height: 1px;
    background: var(--border-color);
    margin: 16px 0;
}
#profile .profile-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}
#profile .profile-input {
    width: 100%;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-r);
    padding: 8px 12px;
    font: inherit;
    box-sizing: border-box;
}
#profile .profile-input:focus {
    outline: none;
    border-color: var(--blue);
}
/* select.profile-input: сбрасываем жёсткие height:34px/line-height из глобального select,
   иначе хвостики букв (y, p, g) обрезаются снизу. */
#profile select.profile-input {
    height: auto;
    line-height: normal;
}
#profile .profile-action--ghost {
    background: transparent;
    color: var(--text-muted);
    padding: 6px 10px;
}
#profile .profile-action--ghost:hover { color: var(--text-primary); background: var(--bg-hover); }
#profile button.profile-action {
    border: 0;
    cursor: pointer;
    font: inherit;
}
#profile .profile-action--danger,
#profile .profile-action--danger a {
    background: transparent;
    color: #d94a4a;
}
#profile .profile-action--danger:hover,
#profile .profile-action--danger a:hover { background: rgba(217, 74, 74, 0.1); }
#profile .profile-header {
    background: var(--bg-secondary);
    overflow: hidden;
    margin-bottom: 12px;
    position: relative;
}
#profile .profile-cover {
    position: relative;
    height: 160px;
    background: linear-gradient(135deg, var(--deep-purple), var(--blue));
}
#profile .profile-cover--image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#profile .profile-cover-current {
    width: 100%;
    height: 90px;
    border-radius: var(--border-r);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
}
#profile .profile-cover-tools {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    z-index: 2;
}
#profile .profile-cover-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background .15s;
}
#profile .profile-cover-btn:hover { background: rgba(0, 0, 0, 0.55); }
#profile .profile-cover-btn svg { display: block; }
#profile .profile-cover-btn--danger:hover { background: rgba(217, 74, 74, 0.85); }

/* === Диалог обложки (загрузка + кроп) === */
/* Скрытый шаг: атрибут hidden должен побеждать display:flex */
.pc-crop [hidden] { display: none !important; }
.pc-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    min-height: 150px;
    padding: 28px 20px;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-r);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.pc-drop:hover,
.pc-drop:focus { outline: none; border-color: var(--blue); }
.pc-drop.is-drag { border-color: var(--blue); background: var(--bg-hover); }
.pc-drop__icon { color: var(--text-muted); }
.pc-drop__title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.pc-drop__sub { font-size: 13px; color: var(--text-muted); }
.pc-crop__reset { margin-top: 12px; }

.pc-crop__hint {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text-muted);
}
.pc-crop__stage {
    position: relative;
    margin: 0 auto;
    max-width: 100%;
    line-height: 0;
    background: var(--bg-primary);
    overflow: hidden;            /* обрезаем огромный box-shadow затемнения */
    -webkit-user-select: none;
    user-select: none;
}
/* Контент диалога кропа — без внутренней прокрутки от тени (бьём inline overflow:auto от jQuery UI) */
.pc-crop-dialog.ui-dialog { overflow: hidden; }
.pc-crop-dialog .ui-dialog-content {
    overflow: hidden !important;
    background: var(--bg-secondary);
}
.pc-crop__stage img {
    display: block;
    max-width: 100%;
    -webkit-user-select: none;
    user-select: none;
}
.pc-crop__frame {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border: 2px solid #fff;
    cursor: move;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
}
.pc-crop__frame .ui-resizable-handle {
    position: absolute;
    z-index: 3;
}
.pc-crop__frame .ui-resizable-n,
.pc-crop__frame .ui-resizable-s,
.pc-crop__frame .ui-resizable-e,
.pc-crop__frame .ui-resizable-w { background: transparent; }
.pc-crop__frame .ui-resizable-n { top: -5px; left: 0; right: 0; height: 10px; cursor: n-resize; }
.pc-crop__frame .ui-resizable-s { bottom: -5px; left: 0; right: 0; height: 10px; cursor: s-resize; }
.pc-crop__frame .ui-resizable-e { right: -5px; top: 0; bottom: 0; width: 10px; cursor: e-resize; }
.pc-crop__frame .ui-resizable-w { left: -5px; top: 0; bottom: 0; width: 10px; cursor: w-resize; }
.pc-crop__frame .ui-resizable-ne,
.pc-crop__frame .ui-resizable-nw,
.pc-crop__frame .ui-resizable-se,
.pc-crop__frame .ui-resizable-sw {
    width: 14px;
    height: 14px;
    background: #fff;
    border: 2px solid var(--blue);
    border-radius: 3px;
    box-sizing: border-box;
}
.pc-crop__frame .ui-resizable-ne { top: -8px; right: -8px; cursor: ne-resize; }
.pc-crop__frame .ui-resizable-nw { top: -8px; left: -8px; cursor: nw-resize; }
.pc-crop__frame .ui-resizable-se { bottom: -8px; right: -8px; cursor: se-resize; }
.pc-crop__frame .ui-resizable-sw { bottom: -8px; left: -8px; cursor: sw-resize; }
/* Шапка: колонка из строк — [аватар + имя/мета] / о себе / ссылки / достижения. */
#profile .profile-header__main {
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
#profile .profile-header__top {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    width: 100%;
}
#profile .profile-avatar {
    position: relative;
    flex: 0 0 auto;
    /* Аватар наполовину перекрывает нижний край обложки (96/2 = 48). */
    margin-top: -48px;
    margin-bottom: 0;
}
#profile .profile-avatar img {
    width: 96px;
    height: 96px;
    border-radius: 18px;
    object-fit: cover;
    border: 4px solid var(--bg-secondary);
    background: var(--bg-tertiary);
    display: block;
}
#profile .profile-avatar--editable { cursor: pointer; }
#profile .profile-avatar__edit {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 0;
    border-radius: 16px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
#profile .profile-avatar--editable:hover .profile-avatar__edit,
#profile .profile-avatar__edit:focus-visible { opacity: 1; }
#profile .profile-avatar__edit svg { display: block; }
#profile .profile-status {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid var(--bg-secondary);
}
#profile .profile-status--online { background: var(--green); }
#profile .profile-status--offline { background: var(--text-muted); }
#profile .profile-identity {
    flex: 1 1 auto;
    min-width: 0;
    padding-bottom: 4px;
}
#profile .profile-identity__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
}
#profile .profile-name {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
    word-break: break-word;
}
#profile .profile-subline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
#profile .profile-subline__item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
#profile .profile-subline .profile-reg b { color: var(--text-secondary); font-weight: 600; }
#profile .profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 13px;
    color: var(--text-secondary);
}
#profile .profile-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#profile .profile-meta-item svg { color: var(--text-muted); }
#profile .profile-meta-item--banned {
    color: #fff;
    background: #d94a4a;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
#profile .profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
    align-self: center;
}
#profile .profile-action,
#profile .profile-action a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-hover);
    color: var(--text-primary);
    border-radius: var(--border-r);
    font-size: 14px;
    text-decoration: none;
    line-height: 1.2;
    transition: background .15s;
}
#profile .profile-action > span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
#profile .profile-action:hover,
#profile .profile-action a:hover {
    background: var(--border-color);
}
#profile .profile-action svg {
    display: block;
    flex-shrink: 0;
}
#profile .profile-action--primary,
#profile .profile-action--primary:hover {
    background: var(--green);
    color: #fff;
}
#profile .profile-action--ignore {
    background: transparent;
    color: var(--text-muted);
}
#profile .profile-action--sm {
    padding: 5px 10px;
    font-size: 13px;
    border-radius: 8px;
}
#profile .profile-action--sm svg { width: 14px; height: 14px; }

#profile .profile-header__main > .profile-links {
    flex-basis: 100%;
    margin-top: 4px;
}

#profile .profile-about {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary);
    word-break: break-word;
}

#profile .profile-recent-ach {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
#profile .profile-recent-ach__all {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 4px;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: .4px;
    transition: opacity .15s;
}
#profile .profile-recent-ach__all:hover { opacity: .75; text-decoration: underline; }
#profile .profile-recent-ach__item {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-hover);
    flex-shrink: 0;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
#profile .profile-recent-ach__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(90, 140, 255, 0.35);
}
#profile .profile-recent-ach__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* === Модалка достижения === */
.ach-modal { text-align: center; }
/* Диалог достижения: без титлбара (границы сверху) и без кнопок снизу. */
.ach-dialog .ui-dialog-titlebar { display: none !important; }
.ach-dialog .ui-dialog-buttonpane { display: none !important; }
.ach-dialog .ui-dialog-content { padding: 20px 20px 18px; position: relative; }
/* Мобильные: убираем синюю подсветку тапа и контуры фокуса на интерактиве модалки. */
.ach-dialog,
.ach-dialog * {
    -webkit-tap-highlight-color: transparent;
}
.ach-dialog:focus,
.ach-dialog *:focus { outline: none; }
.ach-flip { -webkit-touch-callout: none; touch-action: none; }
/* Видимый контур только для клавиатурного фокуса (доступность). */
.ach-modal__close:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* Свой крестик в углу карточки (штатный в титлбаре скрыт). */
.ach-modal__close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* Тема-нейтральный фон/цвет — на светлой теме крестик rgba(255,255,255,…) был невидим. */
    background: var(--bg-hover);
    color: var(--text-primary);
    font-size: 22px;
    line-height: 30px;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    transition: background .15s, color .15s, transform .15s;
}
/* Красный hover — только при наведении мышью (НЕ при программном фокусе jQuery UI,
   который автофокусит крестик при открытии диалога). */
.ach-modal__close:hover {
    background: rgba(255,90,90,0.18);
    color: #ff6b6b;
    transform: rotate(90deg);
    outline: none;
}

.ach-flip {
    width: 220px;
    height: 220px;
    max-width: 100%;
    margin: 0 auto 14px;
    perspective: 900px;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}
.ach-flip.is-grabbing { cursor: grabbing; }
.ach-flip__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    will-change: transform;
}
.ach-flip__face {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* «Толщина» карты — без 3D-полос, чтобы не багалось при повороте:
       многослойная тёмная кромка по периметру + объёмная внешняя тень. */
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.45),
        0 1px 0 rgba(255,255,255,0.10) inset,
        0 14px 30px rgba(0,0,0,0.5);
}
.ach-flip__front {
    background: radial-gradient(circle at 50% 40%, rgba(90,140,255,0.18), transparent 70%);
}
.ach-flip__front img {
    width: 92%;
    height: 92%;
    object-fit: contain;
    filter: drop-shadow(0 6px 18px rgba(90,140,255,0.45));
    pointer-events: none;
}
.ach-flip__shine {
    position: absolute;
    /* Полоса крупнее лица и наклонена — диагональный блик. Движется translate'ом
       из левого-верхнего угла за пределы правого-нижнего; стык петли — полностью за
       краем (полоса невидима) → плавно и бесшовно. .ach-flip__face клипает overflow'ом. */
    top: -75%;
    left: -75%;
    width: 80%;
    height: 250%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.10) 40%,
        rgba(255,255,255,0.40) 50%,
        rgba(255,255,255,0.10) 60%,
        transparent 100%
    );
    transform: rotate(25deg) translateX(-120%);
    animation: ach-shine 3.5s ease-in-out infinite;
    mix-blend-mode: screen;
}
.ach-flip__front::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 25% -10%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.10) 28%, transparent 55%),
        linear-gradient(160deg, rgba(255,255,255,0.18) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.18) 100%);
    mix-blend-mode: screen;
}
@keyframes ach-shine {
    /* Полоса проезжает по диагонали слева-сверху направо-вниз. Сохраняем rotate,
       меняем только translateX: с -120% (за левым краем) до 400% (за правым). */
    from { transform: rotate(25deg) translateX(-120%); }
    to   { transform: rotate(25deg) translateX(400%); }
}
.ach-flip__back {
    transform: rotateY(180deg);
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    text-align: center;
    background:
        repeating-linear-gradient(125deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 5px),
        linear-gradient(150deg, #8b9099 0%, #5c626c 38%, #3a3f47 70%, #555b64 100%);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.10), inset 0 0 28px rgba(0,0,0,0.55);
}
.ach-plate__line {
    color: #c9cdd4;
    /* «Вдавленный» гравированный текст: тёмная верхняя тень + светлый блик снизу */
    text-shadow: 0 -1px 0 rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.18);
    letter-spacing: .5px;
}
.ach-plate__who  { font-size: 13px; color: #aeb3bb; }
.ach-plate__name {
    font-size: 19px;
    font-weight: 800;
    color: #e7eaef;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.7), 0 1px 1px rgba(255,255,255,0.22);
    line-height: 1.2;
}
.ach-plate__date { font-size: 14px; color: #b7bcc4; }

.ach-flip__hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 12px;
    opacity: .8;
}

.ach-modal__title {
    font-size: 19px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.ach-modal__descr {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.ach-modal__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 13px;
}
.ach-modal__date { color: var(--text-muted); }
.ach-modal__reward {
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(90, 140, 255, 0.18);
    color: var(--blue);
    font-weight: 700;
}

#profile .profile-section {
    margin: 0 24px;
    padding: 14px 0 0;
    border-top: 1px solid var(--border-color);
}
#profile .profile-section__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 6px;
}
#profile .profile-section .profile-info,
#profile .profile-section .profile-signature {
    margin: 0;
    padding: 0;
    border: 0;
}
#profile .profile-section--signature .profile-signature {
    color: var(--text-secondary);
    font-style: italic;
    border-left: 3px solid var(--border-color);
    padding-left: 12px;
}
#profile .profile-section--banned .profile-section__title { color: #d94a4a; }
#profile .profile-section--banned .profile-banned-row span { color: var(--text-muted); }

#profile .profile-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 16px 24px 4px;
    padding: 14px 0 0;
    border-top: 1px solid var(--border-color);
}
#profile .profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6px 4px;
    border-right: 1px solid var(--border-color);
}
#profile .profile-stat:last-child { border-right: 0; }
#profile .profile-stat__num {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}
#profile .profile-stat__label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}
#profile .profile-stat__link {
    margin-top: 6px;
    font-size: 12px;
}
#profile .profile-stat__link a { color: var(--blue); text-decoration: none; }
#profile .profile-stat__link a:hover { text-decoration: underline; }

#profile .profile-body { display: block; }
#profile .profile-block {
    background: var(--bg-secondary);
    padding: 16px;
    margin-bottom: 12px;
}
#profile .profile-block .title_block {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
#profile .profile-info,
#profile .profile-signature {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.55;
    word-wrap: break-word;
}
#profile .profile-signature {
    color: var(--text-secondary);
    font-style: italic;
    border-left: 3px solid var(--border-color);
    padding-left: 12px;
}

#profile .profile-activity {
    list-style: none;
    margin: 0;
    padding: 0;
}
#profile .profile-activity li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
}
#profile .profile-activity li:last-child { border-bottom: 0; }
#profile .profile-activity__label { color: var(--text-muted); }
#profile .profile-activity__value {
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
}
#profile .profile-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
}
#profile .profile-dot--online { background: var(--green); }
#profile .profile-dot--offline { background: var(--text-muted); }

#profile .profile-contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#profile .profile-contact__item a {
    display: inline-block;
    padding: 6px 0;
    color: var(--blue);
    text-decoration: none;
}
#profile .profile-contact__item a:hover { text-decoration: underline; }

#profile .profile-xfields__list {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px 0;
}
#profile .profile-xfields__list dt {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
#profile .profile-xfields__list dd {
    color: var(--text-primary);
    font-size: 14px;
    margin: 2px 0 8px;
    word-break: break-word;
}

#profile .profile-block--banned {
    border: 1px solid #d94a4a;
}
#profile .profile-block--banned .title_block { color: #d94a4a; }
#profile .profile-banned-row {
    margin: 6px 0;
    font-size: 14px;
    color: var(--text-primary);
}
#profile .profile-banned-row span { color: var(--text-muted); }

#profile .profile-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
#profile .profile-form-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}
#profile .profile-form-control input[type="text"],
#profile .profile-form-control input[type="email"],
#profile .profile-form-control textarea,
#profile .profile-form-control select {
    width: 100%;
    height: auto;
    line-height: normal;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-r);
    padding: 8px 12px;
    font: inherit;
}
#profile .profile-form-control textarea { min-height: 96px; resize: vertical; }
#profile .profile-form-row--checks {
    gap: 10px;
    background: var(--bg-primary);
    padding: 12px;
    border-radius: var(--border-r);
}
#profile .profile-form-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
}
#profile .profile-form-check input[type="checkbox"] {
    margin-top: 2px;
    accent-color: var(--green);
}
#profile .profile-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* === Карточка уровня === */
#profile .profile-level {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 16px 24px 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--border-color);
}
#profile .profile-level__badge {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--deep-purple), var(--blue));
    color: #fff;
}
#profile .profile-level__num {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}
#profile .profile-level__cap {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 3px;
    opacity: .9;
}
#profile .profile-level__body { flex: 1 1 auto; min-width: 0; }
#profile .profile-level__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}
#profile .profile-level__bar {
    position: relative;
    height: 22px;
    border-radius: 999px;
    background: var(--bg-primary);
    overflow: hidden;
}
#profile .profile-level__fill {
    position: absolute;
    inset: 0;
    width: var(--target-width, 0%);
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue), var(--deep-purple));
    overflow: hidden;
    /* Рост слева направо через transform (GPU-ускорено, плавно на iOS Safari);
       width задаёт финальную ширину, scaleX анимирует появление. */
    transform-origin: left center;
    will-change: transform;
    animation: profileLevelFill 1.2s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes profileLevelFill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

#profile .profile-level__shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        transparent 20%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 80%
    );
    transform: translateX(-100%);
    animation: profileLevelShine 2.4s ease-in-out infinite;
}
@keyframes profileLevelShine {
    0%   { transform: translateX(-100%); }
    60%  { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}

/* Контейнер частиц — отдельные .profile-level__spark генерируются в JS
   с рандомными позицией/размером/задержкой/дрейфом. */
#profile .profile-level__sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
#profile .profile-level__spark {
    position: absolute;
    top: var(--y, 50%);
    left: 0;
    width: var(--s, 2px);
    height: var(--s, 2px);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
    opacity: 0;
    /* Горизонтальный пробег через translateX (GPU-ускорено, плавно на iOS).
       --travel — ширина полосы в px, задаётся в JS. */
    will-change: transform;
    animation: profileSparkFlow var(--dur, 3s) linear var(--delay, 0s) infinite;
}
@keyframes profileSparkFlow {
    0%   { opacity: 0;            transform: translateX(-8px) translateY(0) scale(0.7); }
    12%  { opacity: var(--o, 0.8); }
    50%  {                        transform: translateX(calc(var(--travel, 200px) * 0.5)) translateY(var(--yend, 0px)) scale(1); }
    88%  { opacity: var(--o, 0.8); }
    100% { opacity: 0;            transform: translateX(calc(var(--travel, 200px) + 8px)) translateY(var(--yend, 0px)) scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
    #profile .profile-level__fill,
    #profile .profile-level__shine { animation: none; }
    #profile .profile-level__spark { animation: none; opacity: var(--o, 0.6); transform: none; }
}
#profile .profile-level__hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    z-index: 1;
}
#profile .profile-level__exp {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

/* === Пользовательские ссылки (показ) === */
#profile .profile-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
#profile .profile-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--bg-hover);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s;
}
#profile .profile-link:hover { background: var(--border-color); color: var(--text-primary); }
#profile .profile-link svg { flex-shrink: 0; color: var(--text-secondary); }
/* Фирменные цвета иконок ссылок (монохромные логотипы через currentColor).
   PlanetMinecraft — цветной пиксель-арт, currentColor не влияет (свой fill). */
#profile .profile-link[data-link-type="discord"] svg  { color: #5865F2; }
#profile .profile-link[data-link-type="youtube"] svg  { color: #FF0000; }
#profile .profile-link[data-link-type="telegram"] svg { color: #229ED9; }
#profile .profile-link[data-link-type="vk"] svg       { color: #0077FF; }
#profile .profile-link[data-link-type="twitch"] svg         { color: #9146FF; }
#profile .profile-link[data-link-type="boosty"] svg         { color: #F15F2C; }
#profile .profile-link[data-link-type="donationalerts"] svg { color: #FE9A30; }
#profile .profile-link[data-link-type="rutube"] svg         { color: #E62EAB; }
/* TikTok — фирменная многоцветная иконка (цвета зашиты в самой svg), color не задаём */

/* === Вкладки контента === */
/* Вкладки — в конце шапки профиля (как на референсе): на всю ширину карточки,
   с подчёркиванием активной и общей нижней границей. */
#profile .profile-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: 16px 0 0;
    padding: 0 24px;
    border-top: 1px solid var(--border-color);
    /* Вкладки не переносятся, а прокручиваются по горизонтали. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
#profile .profile-tabs::-webkit-scrollbar { height: 6px; }
#profile .profile-tabs::-webkit-scrollbar-track { background: transparent; }
#profile .profile-tabs::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 999px; }
#profile .profile-tabs::-webkit-scrollbar-thumb:hover { background: var(--blue); }
#profile .profile-tabs .profile-tab:first-child { padding-left: 0; }
/* Вкладки не сжимаются — сохраняют ширину, чтобы корректно скроллиться. */
#profile .profile-tab { flex: 0 0 auto; white-space: nowrap; }
#profile .profile-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    padding: 14px 18px;
    color: var(--text-secondary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
#profile .profile-tab:hover { color: var(--text-primary); }
#profile .profile-tab.is-active {
    color: var(--text-primary);
    border-bottom-color: var(--green);
}
#profile .profile-tab__count {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-primary);
    border-radius: 999px;
    padding: 1px 8px;
}
#profile .profile-tab.is-active .profile-tab__count { color: var(--green); }

#profile .profile-pane { display: none; }
#profile .profile-pane.is-active { display: block; }
#profile .profile-pane__loader,
#profile .profile-pane__empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

#profile .profile-panes-block {
    background: transparent;
    padding: 0;
}

#profile .profile-ach-block {
    background: var(--bg-secondary);
    border-radius: var(--border-r);
    padding: 16px;
    margin-bottom: 12px;
}
#profile .profile-ach-block:last-child { margin-bottom: 0; }
#profile .profile-ach-block .title_block {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

#profile .profile-feed {
    display: block;
}
#profile .profile-feed > article.shortstory {
    margin-bottom: 12px;
}
/* Комментарии — каждый своя карточка с фоном и отступами.
   DLE оборачивает их в form > #dle-comments-list > #comment-id-* > .comment,
   поэтому flex gap на контейнере не сработает — отступ задаём самим .comment. */
#profile .profile-feed--comments {
    display: block;
    background: transparent;
}
#profile .profile-feed--comments .comment {
    background: var(--bg-secondary);
    border-radius: var(--border-r);
    padding: 14px 16px;
    margin-bottom: 16px;
}

#profile .profile-more {
    margin: 16px auto 4px;
}

/* === Достижения === */
#profile .profile-achievements {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
#profile .profile-achievement {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: var(--border-r);
    background: var(--bg-primary);
}
#profile .profile-achievement.is-locked { opacity: .45; filter: grayscale(1); }
#profile .profile-achievement.is-earned {
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
#profile .profile-achievement.is-earned:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(90,140,255,0.22);
}
#profile .profile-achievement.is-earned:focus-visible {
    box-shadow: 0 0 0 2px var(--blue);
}
#profile .profile-achievement__icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
}
#profile .profile-achievement__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#profile .profile-achievement__body { flex: 1 1 auto; min-width: 0; }
#profile .profile-achievement__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
#profile .profile-achievement__descr {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}
#profile .profile-achievement__reward {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--green);
    background: var(--bg-hover);
    border-radius: 999px;
    padding: 4px 12px;
}

/* === Система наград === */
#profile .profile-rewards__intro {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 14px;
}
#profile .profile-rewards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#profile .profile-rewards__reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-secondary, rgba(255, 255, 255, .04));
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 4px;
}
#profile .profile-rewards__reset-time {
    font-weight: 600;
    color: var(--blue);
    font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
}
#profile .profile-reward {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
#profile .profile-reward:last-child { border-bottom: 0; padding-bottom: 0; }
#profile .profile-reward__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
#profile .profile-reward__meta {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 3px;
}
#profile .profile-reward__meta b { color: var(--blue); }

/* === История активности === */
#profile .profile-activity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
#profile .profile-activity-table thead th {
    text-align: left;
    padding: 0 16px 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
}
#profile .profile-activity-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: middle;
}
#profile .profile-activity-table tbody tr:last-child td { border-bottom: 0; }
#profile .profile-activity-table__date {
    color: var(--text-secondary);
    white-space: nowrap;
}
#profile .profile-activity-table__event { font-weight: 600; }
#profile .profile-activity-table__pts {
    text-align: right;
    white-space: nowrap;
    font-weight: 700;
    color: var(--blue);
}

/* === Редактирование ссылок === */
#profile .profile-links-edit {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#profile .profile-links-edit .profile-link-url.is-invalid {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.4);
}
#profile .profile-counter { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
#profile .profile-counter.is-over { color: #ff6b6b; font-weight: 600; }
#profile .profile-links-edit__row {
    display: grid;
    grid-template-columns: 160px 1fr 1fr auto;
    gap: 8px;
    align-items: center;
}
#profile .profile-link-del {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
#profile .profile-link-del:hover { background: var(--bg-hover); color: var(--text-primary); }
#profile .profile-link-add {
    align-self: flex-start;
    margin-top: 8px;
    padding: 6px 14px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
}
#profile .profile-link-add:hover { background: var(--bg-hover); color: var(--text-primary); }
#profile .profile-form-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

@media (max-width: 640px) {
    #profile .profile-header__main { padding: 0 16px 16px; }
    #profile .profile-actions { margin-left: 0; width: 100%; }
    #profile .profile-section { margin: 0 16px; }
    #profile .profile-level { margin: 16px 16px 0; }
    #profile .profile-stats { margin: 14px 16px 4px; grid-template-columns: repeat(2, 1fr); }
    #profile .profile-stat:nth-child(2) { border-right: 0; }
    #profile .profile-stat:nth-child(-n+2) { border-bottom: 1px solid var(--border-color); padding-bottom: 12px; }
    #profile .profile-stat:nth-child(n+3) { padding-top: 12px; }
    #profile .profile-name { font-size: 20px; }
    #profile .profile-cover { height: 120px; }
    #profile .profile-links-edit__row { grid-template-columns: 1fr 1fr auto; }
    #profile .profile-links-edit__row .profile-link-type { grid-column: 1 / -1; }
    #profile .profile-tabs { padding: 0 16px; overflow-x: auto; flex-wrap: nowrap; }
    #profile .profile-tab { padding: 12px; font-size: 13px; white-space: nowrap; }
}

/* ===================== Пользовательские коллекции ===================== */

#profile .uc-block {
    flex-basis: 100%;
    /* В колоночном flex-контейнере шапки тянемся на всю ширину и разрешаем
       детям ужиматься (min-width:0), иначе ряд карточек растёт шире контейнера
       и горизонтальный overflow-x:auto не срабатывает — до «Создать» не доскроллить. */
    align-self: stretch;
    width: 100%;
    min-width: 0;
    margin-top: 14px;
}
#profile .uc-block__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}
#profile .uc-collections {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--blue) var(--bg-primary);
    cursor: grab;
}
#profile .uc-collections.is-grabbing { cursor: grabbing; user-select: none; }
#profile .uc-collections.is-grabbing a { pointer-events: none; }
#profile .uc-collections::-webkit-scrollbar {
    height: 10px;
}
#profile .uc-collections::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 999px;
}
#profile .uc-collections::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border-radius: 999px;
}
#profile .uc-collections::-webkit-scrollbar-thumb:hover {
    background: var(--blue);
}

#profile .uc-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

/* Карточка = тёмный фон, обложка-квадрат сверху, под ней название + счётчик.
   Фон задаётся по контексту ниже (шапка vs вкладка), т.к. фон родителя разный. */
#profile .uc-card {
    position: relative;
    border-radius: var(--border-r);
    overflow: hidden;
}
/* Шапка профиля имеет фон --bg-secondary → карточка должна контрастировать (--bg-primary). */
#profile .uc-collections > .uc-card { flex: 0 0 auto; width: 140px; background: var(--bg-primary); }
/* Вкладка «Коллекции» лежит на фоне страницы (--bg-primary) → карточка --bg-secondary. */
#profile .uc-cards-grid > .uc-card { background: var(--bg-secondary); }
#profile .uc-card__link {
    display: block;
    text-decoration: none;
    color: var(--text-primary);
}
#profile .uc-card__cover {
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: var(--border-r) var(--border-r) 0 0;
    background: var(--bg-hover) center/cover no-repeat;
}
#profile .uc-card__cover[data-empty="1"] {
    background: linear-gradient(135deg, var(--deep-purple), var(--blue));
}
#profile .uc-card__footer {
    display: block;
    padding: 10px 12px 12px;
    /* Прозрачный — показывает фон карточки (.uc-card), который задан по контексту. */
    background: transparent;
    border-radius: 0 0 var(--border-r) var(--border-r);
}
#profile .uc-card__title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary);
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#profile .uc-card__count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}
#profile .uc-card__manage {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity .15s;
}
#profile .uc-card:hover .uc-card__manage { opacity: 1; }

#profile .uc-card__drag {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    cursor: grab;
    opacity: 0;
    transition: opacity .15s, background .15s;
    touch-action: none;
}
#profile .uc-card:hover .uc-card__drag { opacity: 1; }
#profile .uc-card__drag:active { cursor: grabbing; }
#profile .uc-card__drag svg { display: block; }
#profile .uc-dragging { opacity: .4; }
#profile .uc-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
#profile .uc-card__btn:hover { background: rgba(0, 0, 0, 0.7); }
#profile .uc-card__btn--danger:hover { background: #d94a4a; }
#profile .uc-card[draggable="true"] { cursor: grab; }
#profile .uc-card.uc-dragging { opacity: .5; }

#profile .uc-card--new {
    align-self: stretch;
    min-height: 140px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-r);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    transition: border-color .15s, color .15s;
}
#profile .uc-card--new:hover { border-color: var(--green); color: var(--green); }
#profile .uc-card--new__plus { font-size: 36px; line-height: 1; font-weight: 300; }
#profile .uc-card--new__label { font-size: 13px; font-weight: 600; }

/* Страница коллекции */
#profile .uc-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
#profile .uc-back:hover { color: var(--text-primary); }
#profile .uc-page__head {
    position: relative;
    min-height: 240px;
    border-radius: var(--border-r);
    background: var(--bg-hover) center/cover no-repeat;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    margin-bottom: 16px;
}
#profile .uc-page__head--empty {
    background: linear-gradient(135deg, var(--deep-purple), var(--blue));
}
#profile .uc-page__head::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.8));
}
#profile .uc-page__head-inner {
    position: relative;
    z-index: 1;
    padding: 22px 24px;
    color: #fff;
}
#profile .uc-page__title { margin: 0; font-size: 26px; font-weight: 800; color: #fff; line-height: 1.2; }
#profile .uc-page__updated { margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, 0.75); }
#profile .uc-page__count {
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 5px 14px;
}
#profile .uc-page__tools { margin-bottom: 14px; }

#profile .uc-feed article.shortstory { position: relative; }
#profile .uc-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
}
#profile .uc-remove:hover { background: #d94a4a; }

/* Модалки коллекций */
/* Базовый вид .ui-dialog / overlay / кнопок / крестика — глобально в styles.css.
   Здесь только специфика контента коллекций. */
.dle-popup-collection .ui-dialog-content,
.uc-dialog {
    box-sizing: border-box;
}
/* overflow:visible — чтобы выпадающий список результатов поиска (.uc-search-results,
   position:absolute) не обрезался прокручиваемым контентом диалога. */
.dle-popup-collection .ui-dialog-content { padding: 16px 18px; overflow: visible; }
.uc-modal__intro {
    margin: 0 0 12px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-r);
}
.uc-modal__label { display: block; font-size: 13px; color: var(--text-muted); margin: 10px 0 4px; }
.uc-dialog .profile-input,
.uc-dialog .uc-textarea-wrap textarea {
    width: 100%;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-r);
    padding: 8px 12px;
    font: inherit;
    box-sizing: border-box;
}
.uc-search-results {
    margin-top: 10px;
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.uc-picker .profile-input { padding-right: 34px; }
.uc-search-clear {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.uc-search-clear:hover { background: var(--bg-hover); color: var(--text-primary); }
/* display:flex перебивает атрибут hidden — возвращаем скрытие при пустом поле. */
.uc-search-clear[hidden] { display: none; }
/* Чипы состава в «Добавить пост»: фикс-высота со скроллом. Высота резервируется при
   открытии диалога → async-чипы грузятся внутрь скролл-области, размер диалога не
   меняется (нет вылезания за край и обрезки). */
#uc-add-chips { height: 200px; overflow-y: auto; align-content: flex-start; }
.uc-search-item {
    text-align: left;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.uc-search-item:hover { background: var(--bg-hover); }
.uc-search-item.is-added { color: var(--green); cursor: default; }

.uc-dialog .uc-textarea-wrap textarea { resize: vertical; min-height: 70px; }
.uc-counter { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.uc-textarea-wrap { position: relative; }
.uc-counter--in { position: absolute; right: 10px; bottom: 8px; margin: 0; }

.uc-cover-drop {
    position: relative;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-r);
    min-height: 110px;
    display: grid;
    place-items: center;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s, background .15s;
    outline: none;
}
.uc-cover-drop:hover,
.uc-cover-drop:focus,
.uc-cover-drop.is-drag { border-color: var(--green); background: rgba(0,164,111,0.05); }
.uc-cover-drop.is-loading { opacity: .6; pointer-events: none; }
.uc-cover-drop__hint { padding: 18px 16px; width: 100%; text-align: center; }
.uc-cover-drop__title { display: block; text-align: center; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.uc-cover-drop__sub { display: block; text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.uc-cover-drop__preview {
    display: block;
    width: auto;
    height: 240px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--border-r);
    margin: 12px auto;
}
/* display:block перебивает атрибут hidden — возвращаем скрытие пустого превью. */
.uc-cover-drop__preview[hidden] { display: none; }
.uc-cover-drop__clear {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.uc-cover-drop__clear:hover { background: #d94a4a; }

.uc-picker { position: relative; }
/* Результаты поиска — выпадающий список ПОВЕРХ содержимого диалога, а не в потоке
   (иначе уезжают под кнопки/край модалки и их не выбрать). */
.uc-picker .uc-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    margin-top: 0;
    max-height: 220px;
    padding: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-r);
    box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
/* Пустой контейнер не должен рисовать рамку/тень. */
.uc-picker .uc-search-results:empty { display: none; }
.uc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.uc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 6px 5px 10px;
    border-radius: 999px;
    background: var(--bg-hover);
    font-size: 13px;
    color: var(--text-primary);
}
.uc-chip__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}
.uc-chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.25);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.uc-chip__x:hover { background: #d94a4a; }

#profile .uc-page__desc {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    max-width: 70ch;
}

@media (max-width: 640px) {
    #profile .uc-page__head { min-height: 180px; }
    #profile .uc-page__title { font-size: 22px; }
    #profile .uc-back,
    #profile .uc-page__tools,
    #profile .uc-page > .profile-more { margin-left: 16px; margin-right: 16px; }
    #profile .uc-back { margin-top: 16px; }
}

@media (max-width: 640px) {
}

@media (max-width: 640px) {
}
#profile .profile-skin__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary, rgba(255,255,255,.04));
    cursor: pointer;
    transition: border-color .15s, transform .15s;
}
#profile .profile-skin__btn:hover { border-color: var(--blue); transform: translateY(-1px); }
#profile .profile-skin__head {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    image-rendering: pixelated;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
#profile .profile-skin__label { font-size: 14px; font-weight: 600; color: var(--text-primary); }

/* ========== Скин: превью в форме ========== */
#profile .profile-skin-current { position: relative; display: inline-block; margin-bottom: 8px; }
#profile .profile-skin-current__head {
    display: inline-block;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    image-rendering: pixelated;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
#profile .profile-skin-current__clear {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
#profile .profile-skin-current__clear:hover { background: #d94a4a; }

/* ========== Сервер: блок в шапке ========== */
#profile .profile-server {
    margin-top: 6px;
    font-size: 14px;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
#profile .profile-server__label { color: var(--text-muted); }
#profile .profile-server__name { font-weight: 600; color: var(--text-primary); }
#profile .profile-server__sep { color: var(--text-muted); }
#profile .profile-server__ip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: rgba(90,140,255,.12);
    color: var(--blue);
    font: inherit;
    font-weight: 600;
    border-radius: 6px;
    padding: 2px 8px;
    cursor: pointer;
    transition: background .15s;
}
#profile .profile-server__ip:hover { background: rgba(90,140,255,.22); }

/* ========== Сервер: поля в форме ========== */
#profile .profile-server-fields { display: flex; flex-direction: column; gap: 8px; }
#profile .profile-server-fields__row { display: flex; gap: 8px; }
#profile .profile-server-fields__port { max-width: 110px; flex-shrink: 0; }

/* ========== Видимость и порядок разделов (draggable) ========== */
#profile .section-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
#profile .section-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary, rgba(255,255,255,.03));
}
#profile .section-row__drag {
    display: inline-flex;
    color: var(--text-muted);
    cursor: grab;
    touch-action: none;
}
#profile .section-row__drag:active { cursor: grabbing; }
#profile .section-row__check { margin: 0; }

/* ========== Модалка скина (3D) ========== */
.skin-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
}
.skin-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(2px); }
.skin-modal__box {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 22px;
    background: var(--bg-primary, #15171c);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.skin-modal__close {
    position: absolute;
    top: 8px; right: 12px;
    border: 0; background: none;
    font-size: 26px; line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
}
.skin-modal__close:hover { color: var(--text-primary); }
.skin-modal__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.skin-modal__canvas { display: block; }
.skin-modal__download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 9px;
    background: var(--blue);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: opacity .15s;
}
.skin-modal__download:hover { opacity: .9; }
.skin-modal__hint { font-size: 12px; color: var(--text-muted); }