/** pages/profile/index.wxss **/

.profile-page {
    background: #F4F6F0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ======== Sub-view Navigation ======== */
.sub-view {
    background: #F4F6F0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sub-nav {
    display: flex;
    align-items: center;
    gap: 12rpx;
    padding: 30rpx 24rpx;
    background: #fff;
    font-size: 34rpx;
    font-weight: 700;
    color: #111827;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sub-nav-title {
    margin-left: 8rpx;
}

.sub-scroll {
    flex: 1;
    padding: 24rpx;
    box-sizing: border-box;
    padding-bottom: 80rpx;
}

.info-view-anim {
    animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ======== Category Filter (Custom Chips) ======== */
.category-filter {
    display: flex;
    gap: 16rpx;
    padding: 0 24rpx 16rpx;
    background: #fff;
    margin-bottom: 16rpx;
}

.filter-chip {
    padding: 8rpx 24rpx;
    background: #fff;
    border: 2rpx solid #E5E7EB;
    border-radius: 40rpx;
    font-size: 26rpx;
    color: #6B7280;
    transition: all 0.2s;
}

.filter-chip.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* ======== Favorites Grid ======== */
.fav-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20rpx;
}

.fav-card {
    background: white;
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03);
}

.fav-img {
    background: #f0f0f0;
}

.fav-info {
    padding: 16rpx 20rpx;
}

.fav-name {
    display: block;
    font-size: 28rpx;
    font-weight: 600;
    color: #1F2937;
    margin-bottom: 8rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fav-meta-row {
    display: flex;
    align-items: center;
    gap: 8rpx;
}

.fav-type {
    font-size: 22rpx;
    color: #9CA3AF;
}

/* ======== Posts Styles (Refined) ======== */
.my-post-card {
    display: flex;
    gap: 24rpx;
    margin-bottom: 32rpx;
}

.my-post-time {
    width: 100rpx;
    font-size: 24rpx;
    color: #9CA3AF;
    font-weight: 500;
    padding-top: 8rpx;
    flex-shrink: 0;
    text-align: right;
}

.my-post-content-wrap {
    flex: 1;
    background: #fff;
    padding: 24rpx;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.02);
}

.post-text {
    font-size: 28rpx;
    line-height: 1.5;
    color: #1F2937;
    margin-bottom: 16rpx;
    display: block;
}

.my-post-images {
    display: flex;
    gap: 12rpx;
    margin-bottom: 16rpx;
    flex-wrap: wrap;
}

.my-post-footer {
    display: flex;
    align-items: center;
    gap: 32rpx;
    border-top: 1rpx solid #F3F4F6;
    padding-top: 16rpx;
}

.footer-item {
    display: flex;
    align-items: center;
    gap: 8rpx;
    font-size: 24rpx;
    color: #9CA3AF;
}

/* ======== Badges View ======== */
.level-card-large {
    background: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%);
    border-radius: 40rpx;
    padding: 40rpx;
    color: white;
    margin-bottom: 48rpx;
    box-shadow: 0 20rpx 40rpx rgba(44, 62, 80, 0.2);
    position: relative;
    overflow: hidden;
}

.level-card-bg {
    position: absolute;
    top: -100rpx;
    right: -100rpx;
    width: 300rpx;
    height: 300rpx;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.level-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40rpx;
    position: relative;
    z-index: 2;
}

.level-info-large {
    display: flex;
    flex-direction: column;
    gap: 8rpx;
}

.level-label {
    font-size: 24rpx;
    opacity: 0.8;
    letter-spacing: 2rpx;
    text-transform: uppercase;
}

.level-value {
    font-size: 48rpx;
    font-weight: 800;
}

.level-progress-section {
    position: relative;
    z-index: 2;
}

.progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 26rpx;
    margin-bottom: 16rpx;
    font-weight: 600;
    opacity: 0.9;
}

.level-progress-bar-bg {
    height: 16rpx;
    background: rgba(0,0,0,0.2);
    border-radius: 8rpx;
    margin-bottom: 24rpx;
    border: 2rpx solid rgba(255,255,255,0.1);
}

.level-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #FFD700, #FDB931);
    border-radius: 8rpx;
    box-shadow: 0 0 12rpx rgba(255, 215, 0, 0.4);
}

.next-level-tip {
    font-size: 24rpx;
    color: rgba(255,255,255,0.7);
    display: block;
    text-align: right;
}

.section-title-badges {
    font-size: 32rpx;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 32rpx;
    margin-left: 12rpx;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
}

.badge-item {
    background: #fff;
    border-radius: 24rpx;
    padding: 32rpx 16rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.02);
}

.badge-item.locked {
    background: #F8F9FA;
    border: 2rpx dashed #E5E7EB;
    box-shadow: none;
}

.badge-icon-circle {
    width: 88rpx;
    height: 88rpx;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;
}

.badge-name {
    font-size: 26rpx;
    font-weight: 700;
    color: #374151;
    margin-bottom: 6rpx;
}

.badge-desc {
    font-size: 20rpx;
    color: #9CA3AF;
}

.badge-progress {
    margin-top: 12rpx;
    font-size: 20rpx;
    background: #F3F4F6;
    padding: 4rpx 12rpx;
    border-radius: 12rpx;
    color: #6B7280;
}


/* ======== Main Profile View ======== */
.main-profile-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 0;
}

.profile-header {
    background: linear-gradient(180deg, #E8F5E9 0%, #FFFFFF 100%);
    padding: 32rpx 40rpx;
    /* Extra padding top handled by structure relative to status bar usually, 
       but standard padding is fine here */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom-left-radius: 48rpx;
    border-bottom-right-radius: 48rpx;
    box-shadow: 0 8rpx 30rpx rgba(0,0,0,0.02);
    margin-bottom: 24rpx;
    flex-shrink: 0;
}

.user-main {
    display: flex;
    align-items: center;
    gap: 32rpx;
}

.user-avatar {
    width: 128rpx;
    height: 128rpx;
    border-radius: 50%;
    border: 6rpx solid #fff;
    box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.08);
    overflow: hidden;
}

.user-text {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
}

.user-name {
    font-size: 40rpx;
    font-weight: 800;
    color: #1F2937;
}

.level-badge {
    align-self: flex-start;
    font-size: 22rpx;
    background: #DCEDC8;
    color: #33691E;
    padding: 6rpx 16rpx;
    border-radius: 20rpx;
    font-weight: 600;
}

.settings-btn {
    padding: 16rpx;
}

.profile-content {
    flex: 1;
    height: 0;
    padding: 0 32rpx;
    padding-bottom: 120rpx;
    box-sizing: border-box;
}

/* Hide all scrollbars globally on this page */
.profile-page ::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.profile-page scroll-view {
    scrollbar-width: none;
}

.stats-section {
    padding: 0 32rpx;
    flex-shrink: 0;
}

/* Stats Card */
.stats-card {
    display: flex;
    background: #fff;
    padding: 40rpx 0;
    border-radius: 32rpx;
    box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.02);
    margin-bottom: 32rpx;
}

.stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8rpx;
}

.stat-num {
    font-size: 40rpx;
    font-weight: 800;
    color: #374151;
}

.stat-label {
    font-size: 24rpx;
    color: #9CA3AF;
}

.stat-divider {
    width: 2rpx;
    height: 60%;
    background: #F3F4F6;
    align-self: center;
}

/* Profile Menu */
.profile-menu {
    display: flex;
    flex-direction: column;
    gap: 24rpx;
}

.menu-group-title {
    font-size: 26rpx;
    color: #9CA3AF;
    font-weight: 600;
    margin-left: 12rpx;
}

.menu-item {
    background: #fff;
    padding: 32rpx;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.015);
}

.menu-item:active {
    background: #FAFAFA;
}

.menu-left {
    display: flex;
    align-items: center;
    gap: 24rpx;
}

.menu-icon-bg {
    width: 72rpx;
    height: 72rpx;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-text {
    font-size: 30rpx;
    font-weight: 600;
    color: #374151;
}

.menu-right-info {
    display: flex;
    align-items: center;
    gap: 8rpx;
}

.menu-badge-text {
    font-size: 26rpx;
    color: #6B7280;
}

/* Edit Popup Styles */
.profile-edit-popup {
    background: #fff;
    border-radius: 40rpx 40rpx 0 0;
    padding: 0 48rpx;
    padding-bottom: calc(48rpx + env(safe-area-inset-bottom));
}

.popup-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40rpx 0 20rpx;
    position: relative;
}

.popup-title {
    font-size: 36rpx;
    font-weight: 800;
    color: #111827;
}

.popup-close {
    position: absolute;
    right: 0;
    top: 40rpx;
}

/* Edit Form Rows */
.edit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx 0;
    border-bottom: 2rpx solid #F3F4F6;
}

.edit-row-label {
    font-size: 32rpx;
    font-weight: 600;
    color: #374151;
    flex-shrink: 0;
}

.edit-row-right {
    display: flex;
    align-items: center;
    gap: 16rpx;
}

.nickname-input {
    flex: 1;
    font-size: 32rpx;
    font-weight: 500;
    color: #111827;
    text-align: right;
    min-width: 0;
}

.edit-actions {
    padding-top: 60rpx;
    padding-bottom: 20rpx;
}

/* About Section */
.about-section {
    padding: 24rpx;
}

.about-logo-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 60rpx;
    margin-top: 40rpx;
}

.about-logo {
    width: 160rpx;
    height: 160rpx;
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
    border-radius: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12rpx 32rpx rgba(85, 139, 47, 0.1);
    margin-bottom: 32rpx;
}

.about-app-name {
    font-size: 40rpx;
    font-weight: 700;
    color: #1F2937;
    letter-spacing: 2rpx;
}

.about-version {
    font-size: 24rpx;
    color: #9CA3AF;
    margin-top: 8rpx;
}

.about-desc {
    background: #fff;
    padding: 40rpx;
    border-radius: 24rpx;
    font-size: 30rpx;
    line-height: 1.7;
    color: #4B5563;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.02);
    margin-bottom: 40rpx;
}