/* ═══════════════════════════════════════════════════════════════════
   Profile Page — Tablet & Phone Adaptation
   Matches design: light grey bg #F8F8F8, white cards, rounded corners
   Breakpoints: 1024px (tablet), 640px (phone)
   ═══════════════════════════════════════════════════════════════════ */

/* Предотвращение зума при фокусе на input (iOS), кроме Edit Profile */
@media (max-width: 1024px) {
    .profile-center-section input,
    .profile-center-section textarea,
    .profile-center-section select {
        font-size: 16px !important;
    }
    /* Edit Profile: уменьшенные шрифты в полях ввода */
    .profile-center-section .ep-input,
    .profile-center-section .ep-social-input,
    .profile-center-section .ep-textarea {
        font-size: 12px !important;
    }
    /* Settings: шрифты как в Edit Profile */
    .profile-center-section .st-input,
    .profile-center-section .st-select,
    .profile-center-section .st-country-input,
    .profile-center-section .st-email-display {
        font-size: 12px !important;
    }
}

@media (max-width: 1024px) {
    /* ── Page Background ── */
    .profile-container {
        background: #F8F8F8;
        margin-left: 0;
        padding-top: clamp(16px, 3vw, 24px);
        padding-bottom: clamp(80px, 12vw, 100px); /* space for bottom nav */
        min-height: 100vh;
    }

    .profile-content {
        padding-left: clamp(12px, 2vw, 20px);
        padding-right: clamp(12px, 2vw, 20px);
        margin-right: 0;
    }

    /* ── Single Column Layout ── */
    .profile-layout-wrapper {
        display: flex;
        flex-direction: column;
        gap: clamp(12px, 1.5vw, 20px);
        align-items: stretch;
        max-width: 640px;
        margin: 0 auto;
    }

    .profile-right-section {
        order: 2;
        position: static;
    }

    .profile-center-section {
        order: 1;
        min-height: auto;
        background: #F8F8F8;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .profile-center-section .tab-content {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: clamp(12px, 1.5vw, 16px);
    }

    /* ── Profile Info + Tabs as one card (per design) ── */
    .profile-left-section {
        order: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .profile-info-container {
        background: #fff !important;
        border-radius: 8px 8px 0 0 !important;
        border: 1px solid #cbd1e2 !important;
        padding: 16px 18px !important;
        box-shadow: 0 0 0 1px rgba(148,163,184,0.08) !important;
    }

    .profile-info-container::before {
        display: none;
    }

    .profile-info-container .profile-info-inner {
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Header — размеры как в new_design */
    .profile-info-container .profile-avatar-wrapper {
        width: 136px !important;  /* +~22% к 112px */
        height: 136px !important;
        margin: 0 auto 12px !important;
    }

    .profile-info-container .profile-avatar {
        border: 2px solid #fff !important;
        box-shadow: 0 1px 8px rgba(0,0,0,0.1) !important;
    }

    .profile-online-dot {
        width: 14px !important;
        height: 14px !important;
        bottom: 4px !important;
        right: 4px !important;
        border-width: 2px !important;
    }

    .profile-info-container .user-name {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: #333 !important;
        line-height: 1.2 !important;
    }

    .profile-info-container .user-name-row {
        gap: 6px !important;
        margin-bottom: 2px !important;
    }

    /* Vice Verified — чуть крупнее */
    .profile-info-container .user-badges .badge,
    .profile-info-container .badge.vip {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .profile-info-container .badge .badge-vip-icon,
    .profile-info-container .badge svg {
        width: 18px !important;
        height: 18px !important;
    }

    .profile-info-container .user-username {
        font-size: 14px !important;
        color: #888 !important;
        margin-bottom: 4px !important; /* чуть меньше отступ под username */
    }

    .profile-info-container .profile-info-separator {
        margin: 12px 0 !important;
        height: 1px !important;
    }

    .profile-info-container .profile-info-social-links {
        gap: 8px !important;
    }

    /* Соцсети — старый размер, один стиль как на десктопе */
    .profile-info-container .profile-info-social-link {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }

    /* ── Horizontal Tabs (merged with profile card) — одна строка с прокруткой ── */
    .profile-navigation-container {
        background: #fff;
        border-radius: 0 0 8px 8px;
        border: 1px solid #cbd1e2;
        border-top: 1px solid #f0f1f3;
        margin-top: -1px;
        padding: 8px 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    .profile-navigation-container .tabs-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 2px 0 !important;
    }

    .profile-navigation-container .tabs-container::-webkit-scrollbar {
        display: none;
    }

    .profile-navigation-container .tab {
        flex-shrink: 0 !important;
        width: auto !important;
        padding: 8px 14px !important;
        border-radius: 9999px !important;
        border: 1px solid rgba(0,0,0,0.08) !important;
        background: #fff !important;
        white-space: nowrap !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .profile-navigation-container .tab span {
        font-size: 13px !important;
        font-weight: 500 !important;
    }

    /* Размер иконки в табах — перебиваем 1vw из sidebar (на узком экране 1vw ≈ 4px и иконка пропадает) */
    .profile-navigation-container .tab .lucide-icon,
    .profile-navigation-container .tab svg.lucide-icon,
    .profile-navigation-container .tab > svg {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        flex-shrink: 0 !important;
    }

    /* Как в десктопе: синий текст и синяя иконка на светлом фоне */
    .profile-navigation-container .tab.active {
        background: rgba(79,110,247,0.08);
        color: #4f6ef7;
        border-color: rgba(79,110,247,0.25);
    }

    .profile-navigation-container .tab.active span {
        color: #4f6ef7 !important;
        font-weight: 600 !important;
    }

    /* Иконка выбранного раздела: синяя, как текст (как в десктопе), размер перебиваем 1vw из sidebar */
    .profile-navigation-container .tab.active .lucide-icon,
    .profile-navigation-container .tab.active svg.lucide-icon,
    .profile-navigation-container .tab.active > svg {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        color: #4f6ef7 !important;
        fill: none !important;
        stroke: #4f6ef7 !important;
        stroke-width: 1.8 !important;
        opacity: 1 !important;
        visibility: visible !important;
        flex-shrink: 0 !important;
    }
    .profile-navigation-container .tab.active > svg path,
    .profile-navigation-container .tab.active > svg circle,
    .profile-navigation-container .tab.active > svg line {
        stroke: #4f6ef7 !important;
    }

    .profile-actions-separator {
        flex-shrink: 0;
        width: 1px;
        min-height: 24px;
        align-self: stretch;
        background: #e2e5ea;
        margin: 0 clamp(4px, 0.5vw, 8px);
    }

    /* All tabs visible with horizontal scroll */

    /* ── Profile Overview V2 Cards (Tablet) ── */
    .po2-card {
        border-radius: 8px !important;
        border: 1px solid #cbd1e2 !important;
        box-shadow: 0 0 0 1px rgba(148,163,184,0.08) !important;
    }

    .po2-card-header {
        padding: 10px 12px !important;
        border-bottom: 1px solid #cbd1e2 !important;
        border-radius: 8px 8px 0 0 !important;
    }

    .po2-card-header-left {
        gap: 8px !important;
        display: flex !important;
        align-items: center !important;
    }

    .po2-card-header-left .lucide-icon {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }

    .po2-card-header-left span {
        font-size: 12px !important;
        font-weight: 600 !important;
    }

    .po2-card-body {
        padding: 12px 14px !important;
    }

    .po2-top-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .po2-bio {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .po2-respect-body {
        padding: 12px 14px !important;
        gap: 10px !important;
    }

    .po2-respect-count {
        font-size: 36px !important;
        font-weight: 800 !important;
    }

    .po2-respect-btn {
        padding: 10px 14px !important;
        font-size: 14px !important;
        border-radius: 6px !important;
        background: #FDDDE6 !important;
        border: 1px solid rgba(236,72,153,0.2) !important;
        gap: 6px !important;
    }

    .po2-respect-btn .lucide-icon {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }

    .po2-respect-btn.respected {
        background: rgba(16,185,129,0.1);
        border-color: rgba(16,185,129,0.2);
    }

    .po2-xp-levels-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .po2-left-stack {
        gap: 12px !important;
    }

    .po2-xp-inner {
        padding: 12px 14px !important;
        gap: 12px !important;
    }

    .po2-xp-title-row {
        gap: 6px;
    }

    .po2-xp-info {
        gap: 4px;
    }

    .po2-xp-badge {
        width: 44px !important;
        height: 44px !important;
    }

    .po2-xp-badge-num {
        font-size: 17px !important;
    }

    .po2-xp-badge-label {
        font-size: 8px !important;
    }

    .po2-xp-title {
        font-size: 14px !important;
    }

    /* Бейдж уровня (Experienced и т.п.) убираем на мобильных */
    .po2-xp-rank-badge {
        display: none !important;
    }

    .po2-xp-numbers {
        font-size: 12px !important;
    }

    .po2-xp-track {
        height: 6px !important;
        margin: 4px 0 !important; /* чуть больше воздуха вокруг полоски */
    }

    .po2-xp-remaining,
    .po2-xp-percent {
        font-size: 11px !important;
    }

    .po2-level-item {
        padding: 10px 12px !important;
        border-radius: 8px !important;
        margin-bottom: 8px !important;
        border-color: #cbd1e2 !important; /* контур уровней */
    }

    .po2-level-left {
        gap: 8px !important;
    }

    .po2-level-left .lucide-icon {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }

    .po2-level-name {
        font-size: 13px !important;
    }

    .po2-level-sep,
    .po2-level-num {
        font-size: 12px !important;
    }

    .po2-level-label {
        font-size: 12px !important;
    }

    .po2-level-track {
        height: 4px !important;
        margin-top: 4px !important; /* опускаем полоску немного ниже текста */
    }

    .po2-account-item {
        padding: 10px 12px !important;
        border-radius: 5px !important;
        margin-bottom: 8px !important;
        border: 1px solid #cbd1e2 !important;
    }

    .po2-account-left {
        gap: 8px !important;
    }

    .po2-account-left .lucide-icon {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }

    .po2-account-label,
    .po2-account-value {
        font-size: 13px !important;
    }

    /* Статистика: на планшете/широком (641px–1024px) — 6 в ряд; на узком — 3 в ряд (см. media 640px) */
    .po2-stats-grid {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 8px !important;
    }

    .po2-stat-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 12px 8px !important;
        border-radius: 6px !important;
        gap: 0 !important; /* отступ под числом минимальный */
        border: 1px solid #cbd1e2 !important;
    }

    /* Отступ над числом заметно больше, чем под числом */
    .po2-stat-icon {
        margin-bottom: 14px !important;
    }

    .po2-stat-icon .lucide-icon,
    .po2-stat-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    .po2-stat-value {
        font-size: 16px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        line-height: 1 !important;
    }

    .po2-stat-label {
        font-size: 11px !important;
        margin-top: 2px !important; /* под числом меньше, чем над числом (14px) */
    }

    /* Окошко с названием раздела — меньше закругление и контур */
    .po2-section-header {
        margin-bottom: 12px !important;
        padding: 14px 16px !important;
        border-radius: 8px !important;
        border: 1px solid #cbd1e2 !important;
    }

    .po2-section-header-left {
        gap: 10px !important;
        display: flex !important;
        align-items: center !important;
    }

    .po2-section-header-icon-wrap {
        width: 26px !important;
        height: 26px !important;
    }

    .po2-section-header-icon-wrap .lucide-icon {
        width: 20px !important;
        height: 20px !important;
    }

    .po2-section-header h2 {
        font-size: 18px !important;
    }

    /* Рекламного баннера не должно быть на мобильных/планшетах */
    .profile-ad-container {
        display: none !important;
    }

    /* Кнопка админ-панели чуть меньше */
    .admin-panel-toggle {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        border-radius: 9999px !important;
    }

    .admin-panel-toggle .fa-cog {
        font-size: 14px !important;
    }

    /* Окошко меню админ-панели по нажатию */
    .admin-panel-dropdown {
        min-width: 180px !important;
        padding: 6px 0 !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
        border: 1px solid #cbd1e2 !important;
        margin-top: 8px !important;
    }

    .admin-panel-action {
        padding: 12px 14px !important;
        font-size: 14px !important;
        gap: 10px !important;
        border-bottom: 1px solid #f0f1f3 !important;
    }

    .admin-panel-action:last-child {
        border-bottom: none !important;
    }

    .admin-panel-action i {
        font-size: 14px !important;
        width: 18px !important;
    }

    /* ── Career Progress ── */
    .cr-hero-card {
        border-radius: 8px !important;
        border: 1px solid #cbd1e2 !important;
        margin-bottom: 12px !important;
    }

    .cr-hero-inner {
        flex-direction: column !important;
    }

    .cr-hero-image {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        min-height: auto !important;
    }

    .cr-hero-content {
        padding: 14px 16px !important;
    }

    .cr-hero-level-badge {
        top: 8px !important;
        left: 8px !important;
        padding: 5px 10px !important;
        gap: 8px !important;
    }

    .cr-hero-level-badge .cr-level-dot {
        width: 8px !important;
        height: 8px !important;
    }

    .cr-hero-level-badge span:last-child {
        font-size: 11px !important;
    }

    .cr-hero-title {
        font-size: 18px !important;
    }

    .cr-hero-description {
        font-size: 13px !important;
        margin-bottom: 12px !important;
        max-width: none !important;
    }

    .cr-hero-users-reached {
        padding-top: 12px !important;
        font-size: 12px !important;
        gap: 6px !important;
        border-top: 1px solid #cbd1e2 !important;
    }

    .cr-level-strip {
        border-radius: 8px !important;
        border: 1px solid #cbd1e2 !important;
        padding: 8px 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        margin-bottom: 12px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .cr-level-strip::-webkit-scrollbar {
        display: none;
    }

    .cr-level-tab {
        min-width: 70px !important;
        padding: 8px 6px !important;
        flex-shrink: 0 !important;
        gap: 10px !important;
    }

    .cr-level-tab-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .cr-level-tab-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    .cr-level-tab-num {
        font-size: 12px !important;
    }

    .cr-requirements-card {
        border-radius: 8px !important;
        border: 1px solid #cbd1e2 !important;
    }

    .cr-req-header {
        padding: 12px 14px !important;
    }

    .cr-req-title {
        font-size: 14px !important;
    }

    .cr-req-grid {
        padding: 10px 14px 14px !important;
        grid-template-columns: repeat(3, 1fr) !important; /* планшет: 3 в ряд */
        gap: 8px !important;
    }

    .cr-req-item {
        border-radius: 8px !important;
        border: 1px solid #cbd1e2 !important;
    }

    .cr-req-item-icon svg,
    .cr-req-header-left svg {
        width: 14px !important;
        height: 14px !important;
    }

    .cr-req-item-header {
        gap: 6px !important;
    }

    .cr-req-item-footer {
        display: none !important; /* без Completed / % под полоской */
    }

    .cr-req-count {
        display: none !important;
    }

    .cr-req-item-body {
        padding: 10px 12px !important;
    }

    .cr-req-item-values strong {
        font-size: 14px !important;
    }

    .cr-req-item-values span {
        font-size: 11px !important;
    }

    .cr-req-item-label {
        font-size: 13px !important;
    }

    .cr-req-item-progress {
        height: 4px !important;
    }

    .cr-circular-progress {
        width: 38px !important;
        height: 38px !important;
    }

    .cr-circular-value {
        font-size: 11px !important;
    }

    .cr-veteran-card {
        border-radius: 10px !important;
        border: 1px solid #cbd1e2 !important;
        padding: 24px 16px !important;
    }

    .cr-veteran-icon {
        width: 56px !important;
        height: 56px !important;
        margin-bottom: 16px !important;
    }

    .cr-veteran-icon svg {
        width: 28px !important;
        height: 28px !important;
    }

    .cr-veteran-title {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }

    .cr-veteran-description {
        font-size: 14px !important;
    }

    .cr-veteran-perks {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        margin-top: 16px !important;
    }

    .cr-veteran-perk {
        padding: 10px 14px !important;
        font-size: 11px !important;
    }

    .cr-veteran-perk svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* ── Edit Profile (как в new_design edit-profile.tsx) ── */
    .ep-section form {
        gap: 12px !important;
    }

    .ep-placeholders-row {
        gap: 10px !important;
        margin-bottom: 12px !important;
    }

    .ep-placeholder-card {
        border-radius: 10px !important;
        border: 1px dashed #cbd1e2 !important;
    }

    .ep-placeholder-inner {
        padding: 20px 14px !important;
        gap: 8px !important;
    }

    .ep-placeholder-circle {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .ep-placeholder-circle i {
        font-size: 18px !important;
    }

    .ep-placeholder-title {
        font-size: 13px !important;
    }

    .ep-coming-soon {
        gap: 4px !important;
    }

    .ep-coming-soon i {
        font-size: 12px !important;
    }

    .ep-coming-soon span {
        font-size: 11px !important;
    }

    .ep-card {
        border-radius: 10px !important;
        border: 1px solid #cbd1e2 !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
    }

    .ep-card-header {
        padding: 12px 16px !important;
        border-bottom: 1px solid #f0f1f3 !important;
    }

    .ep-card-header-left {
        gap: 8px !important;
    }

    .ep-card-icon {
        width: 18px !important;
        height: 18px !important;
    }

    .ep-card-header-title {
        font-size: 12px !important;
    }

    .ep-card-body {
        padding: 14px 16px !important;
    }

    .ep-two-cols {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .ep-field-head {
        margin-bottom: 4px !important;
    }

    .ep-label {
        font-size: 11px !important;
    }

    .ep-char-counter {
        font-size: 10px !important;
    }

    .ep-input,
    .ep-social-input,
    .ep-textarea {
        padding: 8px 12px !important;
        font-size: 13px !important;
        border: 1px solid #e2e5ea !important;
        border-radius: 6px !important;
    }

    .ep-textarea {
        min-height: 80px !important;
    }

    .ep-time-remaining {
        font-size: 11px !important;
    }

    .ep-time-remaining i {
        font-size: 12px !important;
    }

    .ep-social-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .ep-social-item {
        border-radius: 8px !important;
        border: 1px solid #cbd1e2 !important;
    }

    .ep-social-label-row {
        padding: 10px 12px !important;
        border-bottom: 1px solid #f0f1f3 !important;
        gap: 8px !important;
    }

    .ep-social-icon {
        width: 18px !important;
        font-size: 16px !important;
    }

    .ep-social-label {
        font-size: 11px !important;
    }

    .ep-social-input {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    .ep-actions {
        margin-top: 4px !important;
    }

    .ep-save-btn {
        padding: 12px 16px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        gap: 8px !important;
    }

    .ep-save-btn i {
        font-size: 16px !important;
    }

    /* ── Settings (как в new_design settings.tsx) ── */
    .st-settings {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .st-tabs-card {
        border-radius: 10px !important;
        border: 1px solid #cbd1e2 !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
    }

    .st-tabs-inner {
        padding: 6px 10px !important;
        gap: 6px !important;
    }

    .st-sub-tab {
        padding: 10px 14px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        gap: 6px !important;
    }

    .st-sub-tab i {
        font-size: 14px !important;
    }

    .st-card {
        border-radius: 10px !important;
        border: 1px solid #cbd1e2 !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
    }

    .st-card-header {
        padding: 12px 16px !important;
        border-bottom: 1px solid #f0f1f3 !important;
    }

    .st-card-header-left {
        gap: 8px !important;
    }

    .st-card-icon {
        width: 18px !important;
        height: 18px !important;
        font-size: 16px !important;
    }

    .st-card-title {
        font-size: 12px !important;
    }

    .st-card-body {
        padding: 14px 16px !important;
    }

    .st-email-row {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .st-email-display {
        padding: 10px 14px !important;
        font-size: 14px !important;
        border: 1px solid #e2e5ea !important;
    }

    .st-btn-secondary {
        padding: 10px 14px !important;
        font-size: 13px !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    .st-btn-secondary i {
        font-size: 14px !important;
    }

    .st-password-old-row {
        margin-bottom: 10px !important;
    }

    .st-password-old-wrap .st-input-full {
        padding-right: 7rem !important;
    }

    .st-btn-link-inside {
        right: 10px !important;
        font-size: 11px !important;
    }

    .st-password-new-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .st-input,
    .st-select {
        padding: 10px 14px !important;
        font-size: 16px !important;
        border: 1px solid #e2e5ea !important;
        border-radius: 6px !important;
    }

    .st-country-input-wrap {
        padding: 10px 14px !important;
        min-height: 44px !important;
    }

    .st-country-input {
        font-size: 16px !important;
    }

    .st-gender-row {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 8px !important;
    }

    .st-gender-btn:nth-child(1) { grid-column: 1 / 3 !important; }
    .st-gender-btn:nth-child(2) { grid-column: 3 / 5 !important; }
    .st-gender-btn:nth-child(3) { grid-column: 5 / 7 !important; }
    .st-gender-btn:nth-child(4) { grid-column: 1 / 4 !important; }
    .st-gender-btn:nth-child(5) { grid-column: 4 / 7 !important; }

    .st-gender-btn {
        min-width: 0 !important;
        padding: 10px 8px !important;
        font-size: 12px !important;
        gap: 6px !important;
        border-radius: 8px !important;
    }

    .st-gender-icon {
        font-size: 12px !important;
    }

    .st-two-cols {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .st-country-flag {
        font-size: 16px !important;
    }

    .st-country-chevron {
        font-size: 12px !important;
    }

    .st-country-dropdown {
        border: 1px solid #cbd1e2 !important;
        border-radius: 8px !important;
        min-height: 200px !important;
        max-height: 320px !important;
    }

    .st-country-list {
        min-height: 160px !important;
        max-height: 260px !important;
        overflow-y: auto !important;
    }

    .st-country-item {
        padding: 12px 14px !important;
        font-size: 14px !important;
    }

    .st-select {
        padding-right: 28px !important;
        background-position: right 10px center !important;
    }

    .st-dob-row {
        grid-template-columns: 1fr 1.2fr 1fr !important;
        gap: 8px !important;
    }

    .st-save-btn {
        padding: 12px 16px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        gap: 8px !important;
    }

    .st-save-btn i {
        font-size: 16px !important;
    }

    /* Profile Preferences */
    .st-card-header-extra .st-card-extra {
        font-size: 11px !important;
    }

    .st-pref-row,
    .st-pref-sub-row {
        padding: 12px 0 !important;
        gap: 10px !important;
        border-bottom: 1px solid #f0f1f3 !important;
    }

    .st-pref-sub-row {
        padding-left: 28px !important;
    }

    .st-pref-icon-wrap {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        border-radius: 6px !important;
    }

    .st-pref-icon-wrap i {
        font-size: 14px !important;
    }

    .st-pref-icon-wrap-sm {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }

    .st-pref-label {
        font-size: 13px !important;
    }

    .st-pref-desc {
        font-size: 11px !important;
    }

    .st-toggle {
        width: 44px !important;
        height: 24px !important;
        border-radius: 12px !important;
    }

    .st-toggle-knob {
        width: 20px !important;
        height: 20px !important;
        top: 2px !important;
        left: 2px !important;
    }

    .st-toggle.on .st-toggle-knob {
        left: calc(100% - 22px) !important;
    }

    .st-pref-footer {
        padding: 12px 0 0 !important;
    }

    /* ── Opportunities (как в new_design opportunities.tsx) ── */
    .opportunities-container .opp-card {
        border-radius: 8px !important;
        border: 1px solid #cbd1e2 !important;
        overflow: hidden !important;
    }

    .opp-level-card {
        margin-bottom: 12px !important;
    }

    .opp-level-inner {
        padding: 14px 16px !important;
        gap: 16px !important;
    }

    .opp-level-circle-wrap {
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
    }

    .opp-level-circle-label {
        font-size: 10px !important;
    }

    .opp-level-circle-num {
        font-size: 24px !important;
    }

    .opp-level-top-row {
        margin-bottom: 6px !important;
    }

    .opp-level-title {
        font-size: 15px !important;
    }

    .opp-level-badge {
        padding: 4px 8px !important;
        border-radius: 5px !important;
        border: 1px solid rgba(79,110,247,0.25) !important;
    }

    .opp-level-badge .lucide-icon,
    .opp-level-badge svg {
        width: 14px !important;
        height: 14px !important;
    }

    .opp-level-badge span {
        font-size: 11px !important;
    }

    .opp-level-bar-wrap {
        height: 8px !important;
        border-radius: 4px !important;
        margin-bottom: 6px !important;
    }

    .opp-level-xp-current {
        font-size: 12px !important;
    }

    .opp-level-xp-remaining {
        font-size: 11px !important;
    }

    .opportunities-grid {
        gap: 12px !important;
        grid-template-columns: 1fr !important;
    }

    .opportunities-left,
    .opportunities-right {
        gap: 12px !important;
    }

    .opp-card-header {
        padding: 10px 12px !important;
        border-bottom: 1px solid #cbd1e2 !important;
    }

    .opp-card-icon {
        width: 18px !important;
        height: 18px !important;
        font-size: 16px !important;
    }

    .opp-card-header-left span {
        font-size: 12px !important;
    }

    .opp-card-extra {
        font-size: 11px !important;
    }

    .opp-card-body {
        padding: 10px 12px !important;
    }

    .opp-activity-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .opp-act-item {
        border-radius: 8px !important;
        border: 1px solid #cbd1e2 !important;
    }

    .opp-act-strip {
        height: 2px !important;
    }

    .opp-act-content {
        padding: 10px 10px !important;
    }

    .opp-act-head {
        gap: 6px !important;
        margin-bottom: 6px !important;
    }

    .opp-act-icon-wrap {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        border-radius: 6px !important;
        border-width: 1px !important;
    }

    .opp-act-icon-wrap i {
        font-size: 14px !important;
    }

    .opp-act-label {
        font-size: 12px !important;
    }

    .opp-act-count-row {
        margin-bottom: 6px !important;
    }

    .opp-act-used {
        font-size: 20px !important;
    }

    .opp-act-limit,
    .opp-act-limit-unl {
        font-size: 11px !important;
    }

    .opp-act-limit-unl i {
        font-size: 12px !important;
    }

    .opp-act-mini-bar-wrap {
        height: 4px !important;
    }

    .opp-act-mini-bar-bg,
    .opp-act-mini-bar {
        height: 4px !important;
        border-radius: 2px !important;
    }

    .opp-limits-list {
        padding: 0 !important;
    }

    .opp-limit-row {
        padding: 10px 12px !important;
        border-bottom: 1px solid #e2e5ea !important;
    }

    .opp-limit-row:last-child {
        border-bottom: none !important;
    }

    .opp-limit-left {
        gap: 10px !important;
    }

    .opp-limit-dot {
        width: 6px !important;
        height: 6px !important;
    }

    .opp-limit-label {
        font-size: 12px !important;
    }

    .opp-limit-value {
        font-size: 11px !important;
    }

    .opp-limit-unlimited i {
        font-size: 12px !important;
    }

    .opp-limit-unlimited span {
        font-size: 11px !important;
    }

    .opp-info-body {
        padding: 12px 14px !important;
        gap: 10px !important;
    }

    .opp-info-reset {
        padding: 10px 12px !important;
        border-radius: 8px !important;
        border: 1px solid rgba(79,110,247,0.2) !important;
        gap: 10px !important;
    }

    .opp-info-clock {
        width: 18px !important;
        height: 18px !important;
        font-size: 16px !important;
    }

    .opp-info-reset .opp-info-utc {
        font-size: 13px !important;
    }

    .opp-info-reset > div > span:first-child {
        font-size: 12px !important;
    }

    .opp-info-shop-row {
        padding: 10px 12px !important;
        border-radius: 8px !important;
        border: 1px solid #cbd1e2 !important;
        gap: 8px !important;
    }

    .opp-info-shop-row > span {
        font-size: 12px !important;
    }

    .opp-shop-btn {
        padding: 8px 12px !important;
        border-radius: 6px !important;
        font-size: 12px !important;
        gap: 6px !important;
    }

    .opp-shop-btn i {
        font-size: 14px !important;
    }

    /* ── Contributions (как в new_design) ── */
    .contrib-toolbar {
        border-radius: 8px !important;
        border: 1px solid #cbd1e2 !important;
        padding: 10px 14px !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .contrib-toolbar-left {
        gap: 6px !important;
    }

    .contrib-chip {
        padding: 6px 12px !important;
        border-radius: 6px !important;
        font-size: 12px !important;
    }

    .contrib-toolbar-right {
        gap: 8px !important;
    }

    .contrib-count {
        font-size: 12px !important;
    }

    .contrib-sort-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    .contrib-sort-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    .contrib-list-card {
        border-radius: 8px !important;
        border: 1px solid #cbd1e2 !important;
    }

    .contrib-row {
        padding: 10px 12px !important;
        gap: 8px !important;
        border-bottom: 1px solid #e2e5ea !important;
        flex-wrap: wrap !important;
    }

    .contrib-row-icon {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        border-radius: 6px !important;
    }

    .contrib-row-icon svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* Collapsed: one line "Name action Title" with ellipsis */
    .contrib-row-text {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
        flex: 1 !important;
        min-width: 0 !important;
        gap: 4px !important;
    }

    .contrib-row-text .contrib-username,
    .contrib-row-text .contrib-action {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .contrib-row-text .contrib-link {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: none !important;
    }

    .contrib-row.expanded .contrib-row-text .contrib-username,
    .contrib-row.expanded .contrib-row-text .contrib-action,
    .contrib-row.expanded .contrib-row-text .contrib-link {
        display: inline !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-word !important;
    }

    .contrib-row.expanded .contrib-row-date-line {
        display: block !important;
        font-size: 12px !important;
        color: #667085 !important;
        margin-top: 6px !important;
    }

    .contrib-date-desktop {
        display: none !important;
    }

    .contrib-row-chevron {
        display: flex !important;
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0 !important;
        color: #667085 !important;
        align-self: flex-start !important;
    }

    .contrib-row-chevron svg {
        width: 16px !important;
        height: 16px !important;
        transition: transform 0.2s ease !important;
    }

    .contrib-row.expanded .contrib-row-chevron svg {
        transform: rotate(180deg) !important;
    }

    .contrib-username {
        font-size: 13px !important;
    }

    .contrib-action {
        font-size: 12px !important;
    }

    .contrib-link {
        font-size: 13px !important;
        color: #4f6ef7 !important;
    }

    .contrib-link:hover {
        color: #3d5ed9 !important;
    }

    .contrib-restriction {
        border-left: 3px solid #ef4444 !important;
    }

    .contrib-restriction-main {
        padding: 10px 14px !important;
        gap: 10px !important;
    }

    .contrib-restriction-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }

    .contrib-restriction-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    .contrib-restriction-label,
    .contrib-restriction-name {
        font-size: 12px !important;
    }

    .contrib-empty {
        padding: 40px 20px !important;
        gap: 10px !important;
    }

    .contrib-empty svg {
        width: 40px !important;
        height: 40px !important;
    }

    .contrib-empty-title {
        font-size: 14px !important;
    }

    .contrib-empty-sub {
        font-size: 12px !important;
    }

    .contributions-pagination {
        margin-top: 12px !important;
    }

    .contributions-pagination .pagination {
        gap: 4px !important;
    }

    .contributions-pagination .page-btn {
        min-width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
        border: 1px solid #cbd1e2 !important;
    }

    .contributions-pagination .page-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* ── Preferences (как в new_design Preferences.tsx) ── */
    .preferences-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .pref-card.preference-card-selected {
        border-radius: 8px !important;
        border: 1px solid #cbd1e2 !important;
        overflow: hidden !important;
    }

    .pref-card-header {
        padding: 8px 10px !important;
    }

    .pref-card-header-label {
        font-size: 12px !important;
        max-width: none !important;
    }

    .pref-card-title-bar {
        padding: 6px 10px !important;
    }

    .pref-card-title {
        font-size: 13px !important;
        max-width: none !important;
    }

    .pref-empty {
        border-radius: 8px !important;
        border-width: 1px !important;
        min-height: 120px !important;
    }

    .pref-empty-content {
        padding: 14px 10px !important;
    }

    .pref-empty-icon {
        font-size: 24px !important;
        margin-bottom: 6px !important;
    }

    .pref-empty-label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    .preference-card-select-btn {
        font-size: 0 !important; /* текст 'Select' скрываем */
        padding: 4px 10px !important;
        border-radius: 6px !important;
        margin-top: 12px !important;
        background: #e5e7eb !important;
        border: 1px solid #d1d5db !important;
        color: #6b7280 !important;
        cursor: default !important;
    }

    .preference-card-select-btn i {
        display: none !important; /* прячем иконку плюса */
    }

    .preference-card-select-btn::before {
        content: 'Not selected';
        font-size: 12px;
        font-weight: 600;
        color: #6b7280;
    }

    /* На мобильных и планшетах не показываем кнопку удаления на карточках предпочтений */
    .pref-card-btn-delete {
        display: none !important;
    }

    /* Bookmarks: на мобильных и планшетах показываем список, а не grid */
    .bookmarks-grid {
        display: none !important;
    }

    .bookmarks-list {
        display: block !important;
    }

    /* Пагинация закладок — быстрый тап без 300ms задержки */
    #bookmarks-container .bookmarks-pagination .page-btn {
        touch-action: manipulation;
    }

    /* ── Achievements (как в new_design achievements.tsx) ── */
    .ach-cat-card {
        background: #fff !important;
        border-radius: 8px !important;
        border: 1px solid #cbd1e2 !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
    }

    .ach-cat-inner {
        padding: 8px 12px !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        scrollbar-width: none !important;
    }

    .ach-cat-inner::-webkit-scrollbar {
        display: none !important;
    }

    .ach-cat-btn {
        flex-shrink: 0 !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 10px 14px !important;
        border-radius: 9999px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    .ach-cat-btn:not(.active) {
        border: 1px solid #cbd1e2 !important;
        background: #fff !important;
        color: #667085 !important;
    }

    .ach-cat-btn.active {
        border: 1px solid rgba(79,110,247,0.35) !important;
        background: rgba(79,110,247,0.08) !important;
        color: #4f6ef7 !important;
    }

    .ach-cat-icon {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    .ach-cat-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    .ach-series-block {
        margin-bottom: 12px !important;
    }

    .ach-series-block:last-child {
        margin-bottom: 0 !important;
    }

    .ach-series-header {
        padding: 10px 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }

    .ach-series-header-left {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .ach-series-icon {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    .ach-series-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    .ach-series-name {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #111318 !important;
    }

    .ach-series-label {
        font-size: 11px !important;
        color: #667085 !important;
    }

    .ach-series-dots {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .ach-series-dot {
        width: 6px !important;
        height: 6px !important;
        min-width: 6px !important;
        min-height: 6px !important;
        border-radius: 50% !important;
    }

    .ach-series-count {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #667085 !important;
        margin-left: 4px !important;
    }

    .ach-series-grid {
        padding: 8px 0 0 !important;
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 10px !important;
    }

    .ach-empty {
        text-align: center !important;
        padding: 32px 20px !important;
        font-size: 14px !important;
        color: #667085 !important;
    }

    .ach-card {
        border-radius: 8px !important;
        padding: 12px 10px !important;
        border: 1px solid #cbd1e2 !important;
        gap: 4px !important;
    }

    .ach-card-trophy {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .ach-card[data-achieved="true"] .ach-card-trophy {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }

    .ach-card-trophy .ach-trophy-svg {
        width: 100% !important;
        height: 100% !important;
    }

    .ach-card-tier {
        font-size: 9px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
    }

    .ach-card[data-achieved="true"] .ach-card-tier {
        font-size: 10px !important;
    }

    .ach-card-title {
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
    }

    .ach-card[data-achieved="true"] .ach-card-title {
        font-size: 13px !important;
    }

    .ach-card-progress-text {
        font-size: 10px !important;
        margin-bottom: 3px !important;
    }

    .ach-card-progress-bar {
        height: 4px !important;
        border-radius: 2px !important;
    }

    .ach-card-progress-fill {
        border-radius: 2px !important;
    }

    .ach-card-lock {
        padding: 4px 10px !important;
        border-radius: 6px !important;
    }

    .ach-card-lock svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* Legacy tooltip не показываем на мобильных — вместо него модальное окно */
    .ach-tooltip {
        display: none !important;
    }

    .ach-pagination {
        margin-top: 12px !important;
    }

    .ach-pagination .pagination {
        gap: 4px !important;
    }

    .ach-pagination .page-btn {
        min-width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
        border: 1px solid #cbd1e2 !important;
        border-radius: 6px !important;
    }

    .ach-pagination .page-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* ── Statistics (как Achievements — pill-кнопки) ── */
    .statistics-tabs-card {
        border-radius: 8px !important;
        border: 1px solid #cbd1e2 !important;
        margin-bottom: 12px !important;
    }

    .statistics-tabs-inner {
        padding: 8px 12px !important;
        gap: 8px !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .statistics-tabs-inner::-webkit-scrollbar {
        display: none !important;
    }

    .stat-tab-btn {
        flex-shrink: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 10px 14px !important;
        border-radius: 9999px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        border: 1px solid #cbd1e2 !important;
        background: #fff !important;
        color: #667085 !important;
    }

    .stat-tab-btn.active {
        border-color: rgba(79,110,247,0.35) !important;
        background: rgba(79,110,247,0.08) !important;
        color: #4f6ef7 !important;
    }

    .statistics-content-card {
        border-radius: 8px !important;
        border: 1px solid #cbd1e2 !important;
    }

    .stat-row {
        padding: 12px 14px !important;
        border-bottom: 1px solid #e2e5ea !important;
    }

    .stat-row:last-child {
        border-bottom: none !important;
    }

    .stat-row-left {
        gap: 10px !important;
    }

    .stat-row-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        border-radius: 8px !important;
        border-width: 1px !important;
    }

    .stat-row-icon i,
    .stat-row-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    .stat-row-icon i {
        font-size: 16px !important;
    }

    .stat-row-label {
        font-size: 13px !important;
    }

    .stat-value {
        font-size: 15px !important;
    }

    .statistics-coming-soon {
        padding: 40px 24px !important;
        gap: 12px !important;
    }

    .statistics-coming-soon-icon {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(79,110,247,0.2) !important;
        margin-bottom: 0 !important;
    }

    .statistics-coming-soon-icon i {
        font-size: 24px !important;
    }

    .statistics-coming-soon-title {
        font-size: 18px !important;
    }

    .statistics-coming-soon-subtitle {
        font-size: 14px !important;
        max-width: 280px !important;
    }

    /* ── Purchase History (как в new_design purchases.tsx) ── */
    .purchase-history-tabs-card {
        border-radius: 8px !important;
        border: 1px solid #cbd1e2 !important;
        margin-bottom: 12px !important;
    }

    .purchase-history-tabs-inner {
        padding: 8px 12px !important;
        gap: 8px !important;
        display: flex !important;
    }

    .purchase-history-subtab.ph-sub-tab {
        flex: 1;
        padding: 10px 14px !important;
        border-radius: 9999px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border: 1px solid #cbd1e2 !important;
        background: #fff !important;
        color: #667085 !important;
    }

    .purchase-history-subtab.ph-sub-tab.active {
        border-color: rgba(79,110,247,0.35) !important;
        background: rgba(79,110,247,0.08) !important;
        color: #4f6ef7 !important;
    }

    .purchase-history-level-card {
        border-radius: 10px !important;
        border: 1px solid rgba(139,92,246,0.3) !important;
        padding: 14px !important;
        margin-bottom: 12px !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .purchase-history-level-image {
        width: 100% !important;
        aspect-ratio: 16/9 !important;
        border-radius: 8px !important;
        border: 1px solid rgba(139,92,246,0.2) !important;
    }

    .purchase-history-level-title-row {
        width: 100% !important;
        margin-bottom: 10px !important;
        gap: 8px !important;
    }

    .purchase-history-level-badge {
        padding: 4px 10px !important;
        font-size: 10px !important;
        border-radius: 6px !important;
        flex-shrink: 0 !important;
    }

    .purchase-history-level-name {
        font-size: 18px !important;
        margin: 0 !important;
        gap: 6px !important;
        flex: 1 !important;
    }

    .purchase-history-level-icon {
        width: 18px !important;
        height: 18px !important;
        font-size: 16px !important;
    }

    .purchase-history-stats-row {
        gap: 20px !important;
        margin-bottom: 10px !important;
    }

    .purchase-history-stat-label {
        font-size: 11px !important;
    }

    .purchase-history-stat-value {
        font-size: 16px !important;
    }

    .purchase-history-progress-section {
        margin-top: 10px !important;
    }

    .purchase-history-progress-header {
        margin-bottom: 6px !important;
    }

    .purchase-history-progress-label {
        font-size: 11px !important;
    }

    .purchase-history-progress-amount {
        font-size: 11px !important;
    }

    .purchase-history-progress-bar {
        height: 8px !important;
        border-radius: 4px !important;
        border-width: 1px !important;
    }

    .purchase-history-max-level {
        padding: 10px 12px !important;
        border-radius: 8px !important;
        margin-top: 10px !important;
        font-size: 12px !important;
    }

    .purchase-history-max-level i {
        font-size: 14px !important;
    }

    .purchase-history-table-container {
        border-radius: 8px !important;
        border: 1px solid #cbd1e2 !important;
    }

    .purchase-history-table-header.ph-table-header {
        display: none !important;
    }

    .purchase-history-table-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px 12px !important;
        padding: 12px 14px !important;
        border-bottom: 1px solid #e2e5ea !important;
        align-items: center !important;
    }

    .purchase-history-table-row:last-child {
        border-bottom: none !important;
    }

    .purchase-history-table-cell-title {
        order: 1;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        font-size: 14px !important;
    }

    .purchase-history-table-cell-center {
        order: 2;
        flex: 0 0 auto !important;
    }

    .purchase-history-details-btn.ph-detail-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }

    .purchase-history-details-btn.ph-detail-btn i {
        font-size: 16px !important;
    }

    .purchase-history-table-cell-type,
    .purchase-history-table-cell-price,
    .purchase-history-table-cell-date {
        font-size: 12px !important;
        order: 3;
        flex: 0 0 auto !important;
    }

    .purchase-history-empty {
        padding: 40px 24px !important;
    }

    .purchase-history-empty i {
        font-size: 40px !important;
        margin-bottom: 24px !important;
    }

    .purchase-history-empty p {
        font-size: 14px !important;
    }

    .purchase-details-modal-content {
        max-width: 90vw !important;
        border-radius: 12px !important;
    }

    .purchase-details-modal-icon {
        font-size: 18px !important;
    }

    .purchase-details-modal-title {
        font-size: 16px !important;
    }
}

/* ═══ Узкие экраны (≤640px): 3 карточки статистики в ряд ── */
@media (max-width: 640px) {
    .profile-container {
        padding-top: 12px;
        padding-bottom: 88px;
    }

    .profile-content {
        padding-left: 12px;
        padding-right: 12px;
    }

    .profile-layout-wrapper {
        gap: 12px;
    }

    .profile-info-container .profile-avatar-wrapper {
        width: 130px !important;
        height: 130px !important;
    }

    .profile-info-container .user-name {
        font-size: 20px !important;
    }

    .profile-navigation-container .tab {
        padding: 8px 12px !important;
        min-height: 40px !important;
    }

    /* 3 карточки статистики в ряд (как в дизайне grid-cols-3) */
    .po2-stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .po2-respect-btn {
        min-height: 40px !important;
    }

    /* Edit Profile: узкий экран — одна колонка, иконки норм. размер */
    .ep-placeholders-row {
        gap: 8px !important;
    }

    .ep-placeholder-card {
        border-radius: 8px !important;
    }

    .ep-placeholder-inner {
        padding: 16px 12px !important;
    }

    .ep-placeholder-circle {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .ep-placeholder-circle i {
        font-size: 16px !important;
    }

    .ep-placeholder-title {
        font-size: 12px !important;
    }

    .ep-card {
        border-radius: 8px !important;
    }

    .ep-card-header {
        padding: 10px 12px !important;
    }

    .ep-card-icon {
        width: 16px !important;
        height: 16px !important;
    }

    .ep-card-header-title {
        font-size: 11px !important;
    }

    .ep-card-body {
        padding: 12px 14px !important;
    }

    .ep-two-cols {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .ep-social-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .ep-social-icon {
        width: 16px !important;
        font-size: 14px !important;
    }

    /* Settings: узкий экран */
    .st-sub-tab {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    .st-sub-tab i {
        font-size: 13px !important;
    }

    .st-card-header {
        padding: 10px 12px !important;
    }

    .st-card-icon {
        width: 16px !important;
        height: 16px !important;
        font-size: 14px !important;
    }

    .st-card-title {
        font-size: 11px !important;
    }

    .st-card-body {
        padding: 12px 14px !important;
    }


    .st-pref-icon-wrap {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }

    .st-pref-icon-wrap i {
        font-size: 12px !important;
    }

    /* Career Progress: 2 карточки в ряд на моб., только кружок (без 2/5 completed) */
    .cr-req-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .cr-level-tab {
        min-width: 60px !important;
    }

    /* Achievements: 3 карточки в ряд на телефонах (только 3 или 5, другого нет) */
    .ach-series-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .ach-cat-btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    .ach-cat-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    .ach-card {
        padding: 10px 8px !important;
    }

    .ach-card-trophy {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    .ach-card[data-achieved="true"] .ach-card-trophy {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    .ach-card-title {
        font-size: 11px !important;
    }

    .ach-card[data-achieved="true"] .ach-card-title {
        font-size: 12px !important;
    }

    /* Statistics: узкий экран */
    .statistics-tabs-inner {
        padding: 6px 10px !important;
        gap: 6px !important;
    }

    .stat-tab-btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    .stat-row {
        padding: 10px 12px !important;
    }

    .stat-row-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }

    .stat-row-icon i,
    .stat-row-icon svg {
        width: 14px !important;
        height: 14px !important;
    }

    .stat-row-icon i {
        font-size: 14px !important;
    }

    .stat-row-label {
        font-size: 12px !important;
    }

    .stat-value {
        font-size: 14px !important;
    }

    .statistics-coming-soon {
        padding: 32px 20px !important;
    }

    .statistics-coming-soon-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }

    .statistics-coming-soon-icon i {
        font-size: 22px !important;
    }

    .statistics-coming-soon-title {
        font-size: 16px !important;
    }

    .statistics-coming-soon-subtitle {
        font-size: 13px !important;
    }

    /* Purchase History: узкий экран */
    .purchase-history-subtab.ph-sub-tab {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    .purchase-history-level-name {
        font-size: 16px !important;
    }

    .purchase-history-level-icon {
        width: 16px !important;
        height: 16px !important;
    }

    .purchase-history-stat-value {
        font-size: 14px !important;
    }

    .purchase-history-table-row {
        padding: 10px 12px !important;
    }

    .purchase-history-table-cell-title {
        font-size: 13px !important;
    }

    .purchase-history-details-btn.ph-detail-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }

    .purchase-history-details-btn.ph-detail-btn i {
        font-size: 14px !important;
    }

    .purchase-history-table-cell-type,
    .purchase-history-table-cell-price,
    .purchase-history-table-cell-date {
        font-size: 11px !important;
    }

    /* Opportunities: узкий экран — 2 колонки карточек, чуть компактнее */
    .opp-level-circle-wrap {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
    }

    .opp-level-circle-num {
        font-size: 22px !important;
    }

    .opp-level-inner {
        padding: 12px 14px !important;
        gap: 14px !important;
    }

    .opp-activity-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .opp-act-icon-wrap {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }

    .opp-act-icon-wrap i {
        font-size: 12px !important;
    }

    .opp-act-label {
        font-size: 11px !important;
    }

    .opp-act-used {
        font-size: 18px !important;
    }

    /* Achievements: модальное окно по нажатию на карточку */
    .ach-modal-backdrop {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(15, 23, 42, 0.25) !important;
        display: none;
        align-items: center !important;
        justify-content: center !important;
        padding: 16px !important;
        z-index: 9999 !important;
    }

    .ach-modal-backdrop.active {
        display: flex !important;
    }

    .ach-modal {
        width: 100% !important;
        max-width: 420px !important;
        max-height: 80vh !important;
        background: #fff !important;
        border-radius: 12px !important;
        border: 1px solid #cbd1e2 !important;
        box-shadow: 0 18px 40px rgba(15,23,42,0.45) !important;
        padding: 16px 18px 14px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        overflow: hidden !important;
    }

    .ach-modal-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 4px !important;
    }

    .ach-modal-title {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #111318 !important;
    }

    .ach-modal-close {
        width: 28px !important;
        height: 28px !important;
        border-radius: 9999px !important;
        border: 1px solid #cbd1e2 !important;
        background: #f8fafc !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        cursor: pointer !important;
        color: #64748b !important;
    }

    .ach-modal-close span {
        font-size: 18px !important;
        line-height: 1 !important;
    }

    .ach-modal-body {
        overflow-y: auto !important;
        padding-right: 2px !important;
        margin-right: -2px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .ach-modal-body .ach-tooltip-title {
        font-size: 15px !important;
        margin-bottom: 4px !important;
    }

    .ach-modal-body .ach-tooltip-desc {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin-bottom: 6px !important;
    }

    .ach-modal-body .ach-tooltip-stats {
        padding: 8px 10px !important;
        border-radius: 8px !important;
        gap: 4px !important;
    }

    .ach-modal-body .ach-tooltip-row span:first-child,
    .ach-modal-body .ach-tooltip-row span:last-child {
        font-size: 13px !important;
    }
}