/* Styles for the Me page */

/* Define some theme colors for easier reuse */
:root {
    --primary-gradient: linear-gradient(125deg, #fff2f2 0%, #ffffff 40%, #f5f5ff 100%);
    --accent-color-light: #FFB6C1; /* Light Pink */
    --accent-color-medium: #FF9AB3;
    --accent-color-deep: #FF3B30; /* Theme Red */
    --secondary-accent: #b19cd9; /* Soft Purple */
    --text-color-primary: #333;
    --text-color-secondary: #666;
    --text-color-subtle: #888;
    --card-bg: rgba(255, 255, 255, 0.95); /* Slightly less transparent */
    --border-color-soft: rgba(230, 230, 230, 0.4); /* Softer border color */
    --focus-glow-color: rgba(255, 154, 179, 0.35);
    --soft-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); /* Softer shadow */
    --card-shadow: none; /* REMOVED: 0 4px 20px rgba(0, 0, 0, 0.06); */
    --button-shadow: 0 4px 12px rgba(255, 59, 48, 0.25); /* Softer button shadow */
    --button-hover-shadow: 0 6px 16px rgba(255, 59, 48, 0.35); /* Softer hover shadow */
    --plan-button-bg: #f9f9f9;
    --plan-button-hover-bg: #f0f0f0;
    --plan-button-active-bg: #e8e8ff; /* Soft active background */
    --plan-button-active-border: transparent; /* #7b68ee; REMOVED: Keep border for active state */
}

/* Overall Container */
.me-container {
    max-width: 900px; /* Increased max-width */
    margin: 20px auto 80px auto; /* Adjust margin */
    padding: 25px; /* Increased padding */
    background: var(--primary-gradient);
    border-radius: 24px; /* Softer radius */
    /* box-shadow: var(--soft-shadow); */ /* Optional: Keep a very soft shadow if needed */
    position: relative;
    overflow: hidden; /* Ensures pseudo-elements stay contained */
    border: 1px solid rgba(255, 255, 255, 0.5); /* Subtle white border */
}

/* Add subtle background decoration */
.me-container::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -80px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 182, 193, 0.1) 0%, rgba(255, 182, 193, 0) 70%);
    border-radius: 50%;
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Header Section */
.me-header {
    display: flex;
    align-items: center;
    padding: 25px 20px; /* Increased padding */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); /* Subtle gradient */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 25px; /* Increased margin */
    position: relative; /* Needed for potential pseudo-elements */
    gap: 15px; /* Add gap between avatar and username */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

/* Optional: Replace solid border with gradient */
/* Remove border-bottom above if using this */
/*
.me-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--accent-color-light), transparent);
    opacity: 0.7;
}
*/

.me-avatar-container {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.me-avatar-preview {
    width: 120px; /* 固定宽度确保是正方形 */
    height: 120px; /* 固定高度等于宽度 */
    border-radius: 50%;
    object-fit: cover;
    background-color: #f8f8f8;
    border: 2px solid #fff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: all 0.3s ease;
}

.me-avatar-preview:hover {
    transform: scale(1.05) rotate(3deg);
}

.me-avatar-edit-icon {
    position: absolute; /* Position absolutely within the container */
    bottom: 5px;        /* Position from bottom */
    right: 5px;         /* Position from right */
    background-color: rgba(40, 40, 60, 0.85); /* Darker, translucent background */
    color: #a0a0ff; /* Soft violet color */
    border-radius: 50%;
    width: 30px;       /* Slightly larger */
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;   /* Adjust icon size */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth transition */
    border: 1px solid rgba(160, 160, 255, 0.5); /* Subtle border */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Add shadow */
    /* transform: translate(50%, 50%); REMOVED transform */
}

.me-avatar-edit-icon:hover {
    transform: scale(1.15) rotate(-10deg);
    background-color: var(--accent-color-medium);
}

.me-avatar-edit-icon:active {
    transform: scale(1.1); /* Simple scale on tap */
    background-color: var(--accent-color-medium);
}

.me-username {
    font-size: 1.8em; /* Slightly larger */
    font-weight: 600; /* Bolder */
    color: #e0e0ff; /* Lighter violet */
    /* margin-left: 20px; REMOVED margin, using gap in header now */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); /* Add text shadow */
    flex-grow: 1; /* Allow username to take available space */
    min-width: 100px; /* Ensure minimum width */
}

.me-logout-btn {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--border-color-soft);
    color: var(--text-color-secondary);
    padding: 7px 15px; /* Adjust padding */
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500; /* Slightly bolder */
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap; /* Prevent wrapping */
    backdrop-filter: blur(3px); /* Frosted glass effect */
}

.me-logout-btn:hover {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: #bbb;
    color: var(--text-color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Add active state for touch feedback */
.me-logout-btn:active {
    background-color: rgba(230, 230, 230, 0.9);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    transform: scale(0.98);
}

/* Sections */
.me-section {
    margin-bottom: 35px; /* Increased spacing */
    background-color: var(--card-bg);
    padding: 25px; /* Increased padding */
    border-radius: 16px; /* Match container */
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color-soft);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    position: relative; /* For pseudo-elements */
    overflow: hidden; /* Keep decorations contained */
}

/* Add subtle hover effect to sections */
.me-section:hover {
    transform: translateY(-5px) scale(1.01); /* Slightly more lift */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.09);
}

/* Decorative element for sections - Illusion */
.me-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    z-index: 1;
}

.me-section:hover::before {
    transform: scale(1.2) translate(10px, -10px);
    opacity: 1;
}

/* Decorative underline for titles - Illusion */
.me-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 25px; /* Align with padding */
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-color-medium), var(--secondary-accent));
    border-radius: 3px;
    transform: translateY(50%); /* Position half below the border */
}

/* Form Styles */
#me-profile-form {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Increased gap */
    /* Removed appearance and box-shadow from form itself */
}

.me-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Increased gap */
}

.me-form-label {
    font-size: 0.85rem; /* Slightly smaller label */
    font-weight: 400; /* Lighter weight */
    color: var(--text-color-secondary);
    letter-spacing: 0.3px;
    text-transform: uppercase; /* Uppercase for style */
    display: inline-block; /* Or block, depending on desired layout */
    width: 100%; /* Or auto */
}

.me-form-input,
#me-profile-form select {
    width: 100%;
    padding: 14px 18px; /* Increased padding */
    border: 1px solid #ddd;
    border-radius: 10px; /* More rounded */
    font-size: 1rem;
    color: var(--text-color-primary);
    background-color: #fff;
    transition: all 0.3s ease; /* Transition all properties */
    appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); /* Slightly enhanced inner shadow */
}

#me-profile-form select {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 15px center;
     padding-right: 40px; /* Make space for arrow */
}

.me-form-input:focus,
#me-profile-form select:focus {
    outline: none;
    border-color: var(--accent-color-medium);
    background-color: #fff; /* Ensure background stays white */
    box-shadow: 0 0 0 4px var(--focus-glow-color), /* Outer glow */
                inset 0 1px 3px rgba(0, 0, 0, 0.08); /* Keep inner shadow */
    /* Optional: Subtle scale animation */
    /* transform: scale(1.01); */
}

/* Readonly fields styling */
.me-form-group.readonly .me-form-input {
    background-color: #f9f9f9;
    color: #777;
    cursor: not-allowed;
    border-color: #eee;
}

/* Form field save states */
.me-form-input.saving {
    position: relative;
    background-color: #fffef7;
    border-color: #fbbf24;
    animation: savingPulse 1.5s ease-in-out infinite;
}

.me-form-input.saving::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid #fbbf24;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.me-form-input.save-success {
    position: relative;
    background-color: #f0fdf4;
    border-color: #22c55e;
    animation: successGlow 0.6s ease-out;
}

.me-form-input.save-success::after {
    content: "✓";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #22c55e;
    font-size: 14px;
    font-weight: bold;
    animation: successIcon 0.6s ease-out;
}

.me-form-input.save-error {
    position: relative;
    background-color: #fef2f2;
    border-color: #ef4444;
    animation: errorShake 0.5s ease-in-out;
}

.me-form-input.save-error::after {
    content: "✗";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #ef4444;
    font-size: 14px;
    font-weight: bold;
    animation: errorIcon 0.5s ease-in-out;
}

/* Save state animations */
@keyframes savingPulse {
    0%, 100% {
        background-color: #fffef7;
        border-color: #fbbf24;
    }
    50% {
        background-color: #fefce8;
        border-color: #f59e0b;
    }
}

@keyframes successGlow {
    0% {
        background-color: #fff;
        border-color: #ddd;
    }
    50% {
        background-color: #f0fdf4;
        border-color: #22c55e;
        box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
    }
    100% {
        background-color: #f0fdf4;
        border-color: #22c55e;
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.1);
    }
}

@keyframes successIcon {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translateY(-50%) scale(1.2);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

@keyframes errorShake {
    0%, 100% {
        transform: translateX(0);
        background-color: #fff;
        border-color: #ddd;
    }
    25% {
        transform: translateX(-3px);
        background-color: #fef2f2;
        border-color: #ef4444;
    }
    50% {
        transform: translateX(3px);
        background-color: #fef2f2;
        border-color: #ef4444;
    }
    75% {
        transform: translateX(-3px);
        background-color: #fef2f2;
        border-color: #ef4444;
    }
}

@keyframes errorIcon {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0.5) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: translateY(-50%) scale(1.2) rotate(180deg);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1) rotate(360deg);
    }
}

/* Height Input */
.me-height-input-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

/* cm输入区域样式 */
.me-height-input-container > div:first-child {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 120px;
}

/* 英尺英寸输入区域样式 */
#me-feet-inches-container {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 150px;
    margin: 0;
}

/* 输入框样式统一 */
#me-height-cm,
#me-feet,
#me-inches {
    text-align: center;
    border-radius: 8px;
    border: 1px solid #ddd;
    background-color: white;
}

/* 特定输入框尺寸 */
#me-feet,
#me-inches {
    width: 50px;
    padding: 10px 5px;
    margin-right: 5px;
}

#me-height-cm {
    width: 80px;
    margin-right: 5px;
}

/* 单位标签样式 */
.unit-label {
    font-size: 14px;
    color: #666;
    margin-right: 10px;
    font-weight: 500;
}

/* 响应式布局优化 */
@media (max-width: 768px) {
    .me-height-input-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .me-height-input-container > div:first-child {
        width: 100%;
    }

    #me-feet-inches-container {
        width: 100%;
        justify-content: flex-start;
        margin-top: 0;
    }

    #me-height-cm {
        flex: 1;
        max-width: 100px;
    }

    /* 平板端保存状态优化 */
    .me-form-input.saving::after,
    .me-form-input.save-success::after,
    .me-form-input.save-error::after {
        right: 12px;
        width: 16px;
        height: 16px;
        font-size: 13px;
    }

    .me-save-btn.saving::after,
    .me-save-btn.save-success::before,
    .me-save-btn.save-error::before {
        width: 13px;
        height: 13px;
        font-size: 15px; /* 平板端稍微调大一点 */
    }

    .me-save-btn.saving::after {
        right: 14px;
    }
}

/* 更小屏幕进一步优化 */
@media (max-width: 480px) {
    #me-feet,
    #me-inches {
        width: 45px;
        padding: 8px 4px;
    }
    
    .unit-label {
        font-size: 13px;
        margin-right: 8px;
    }
}

/* Live Photos Grid */
.me-live-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Responsive grid */
    gap: 12px; /* Increased gap */
}

.me-live-photo-item,
.me-add-photo-button {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px; /* Slightly rounded */
    overflow: hidden;
    background-color: #f0f0f0;
    transition: transform 0.3s ease;
}

.me-live-photo-item:hover {
    transform: scale(1.03);
}

.me-live-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.me-add-photo-button {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #d0d0d0; /* Slightly darker dashed border */
    color: #b0b0b0;
    font-size: 2rem;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    border-radius: 10px; /* Match item radius */
}

.me-add-photo-button:hover {
    background-color: #f5f5f5;
    border-color: var(--accent-color-medium); /* Use variable */
    color: var(--accent-color-medium); /* Use variable */
    transform: scale(1.03); /* Add scale effect on hover */
}

/* Add active state for touch feedback */
.me-add-photo-button:active {
    background-color: #e0e0e0;
    transform: scale(0.98);
}

.me-add-photo-button span {
    font-size: 0.8rem; /* Smaller text for Add label */
    margin-left: 5px;
}

.me-delete-photo-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.me-live-photo-item:hover .me-delete-photo-btn {
    opacity: 1;
}

.me-delete-photo-btn:hover {
    background-color: rgba(255, 0, 0, 0.7);
}

/* Trauma Button */
.me-trauma-button {
    /* 更现代化的风格 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.4px;
    white-space: nowrap;
    transition: all 0.25s ease;
    cursor: pointer;
    min-width: auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(144, 108, 197, 0.3);
    background-color: #ffffff;
    color: #906cc5;
    width: 100%;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 15px;
}

.me-trauma-button:hover {
    background-color: rgba(144, 108, 197, 0.08);
    border-color: rgba(144, 108, 197, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.me-trauma-button:active {
    background-color: rgba(144, 108, 197, 0.15);
    border-color: rgba(144, 108, 197, 0.7);
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 调整带有创伤记录时的样式 */
.me-trauma-button.has-trauma {
    border-color: #FF5C8D;
    color: #FF5C8D;
    background-color: rgba(255, 92, 141, 0.05);
}

.me-trauma-button.has-trauma:hover {
    background-color: rgba(255, 92, 141, 0.1);
}

/* Save Button */
.me-save-button-container {
    margin-top: 30px;
    padding-top: 25px; /* Increased padding */
    padding-bottom: 30px; /* 增加底部padding */
    /* border-top: 1px solid #eee; */ /* Remove top border for cleaner look */
    text-align: center;
}

.me-save-btn {
    padding: 15px 40px; /* Generous padding */
    background: linear-gradient(110deg, var(--accent-color-deep), var(--accent-color-medium), var(--secondary-accent)); /* Tri-color gradient */
    background-size: 200% 100%; /* For animation */
    color: white;
    border: none;
    border-radius: 30px; /* More pronounced pill shape */
    font-size: 1.05rem; /* Slightly larger font */
    font-weight: 700; /* Bolder */
    cursor: pointer;
    transition: all 0.4s ease; /* Slower transition */
    min-width: 180px;
    box-shadow: var(--button-shadow);
    letter-spacing: 0.5px;
}

.me-save-btn:hover:not(:disabled) {
    background-position: right center; /* Animate gradient */
    transform: translateY(-3px) scale(1.03); /* More lift */
    box-shadow: var(--button-hover-shadow);
}

.me-save-btn:active:not(:disabled) {
    transform: translateY(-1px) scale(1.01); /* Press down effect */
    box-shadow: 0 3px 10px rgba(255, 59, 48, 0.2);
}

.me-save-btn:disabled {
    background: #ccc;
    box-shadow: none;
    cursor: not-allowed;
}

/* Save button states */
.me-save-btn.saving {
    position: relative;
    background: linear-gradient(110deg, #fbbf24, #f59e0b, #d97706);
    color: white;
    animation: savingButtonPulse 1.5s ease-in-out infinite;
}

.me-save-btn.saving::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.me-save-btn.save-success {
    background: linear-gradient(135deg, #10b981, #059669, #047857);
    color: transparent; /* 隐藏原有文字 */
    position: relative;
    overflow: hidden;
    animation: successButtonGlowRefined 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.me-save-btn.save-success::before {
    content: "✓";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: 300; /* 更轻的字体权重 */
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    animation: successCheckmarkElegant 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s both;
}

.me-save-btn.save-success::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: successShimmer 1.2s ease-in-out 0.4s;
}

.me-save-btn.save-error {
    background: linear-gradient(110deg, #ef4444, #dc2626, #b91c1c);
    color: white;
    animation: errorButtonShake 0.5s ease-in-out;
}

.me-save-btn.save-error::before {
    content: "✗";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: bold;
    animation: errorButtonIcon 0.5s ease-in-out;
}

/* Save button state animations */
@keyframes savingButtonPulse {
    0%, 100% {
        background-position: 0% 50%;
        transform: scale(1);
    }
    50% {
        background-position: 100% 50%;
        transform: scale(1.02);
    }
}

@keyframes successButtonGlowRefined {
    0% {
        background: linear-gradient(110deg, var(--accent-color-deep), var(--accent-color-medium), var(--secondary-accent));
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    30% {
        background: linear-gradient(135deg, #10b981, #059669, #047857);
        transform: scale(1.02);
        box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25);
    }
    70% {
        background: linear-gradient(135deg, #10b981, #059669, #047857);
        transform: scale(1.01);
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
    }
    100% {
        background: linear-gradient(135deg, #10b981, #059669, #047857);
        transform: scale(1);
        box-shadow: 0 2px 12px rgba(16, 185, 129, 0.2);
    }
}

@keyframes successCheckmarkElegant {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3) rotate(-45deg);
        filter: blur(2px);
    }
    40% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.3) rotate(10deg);
        filter: blur(0px);
    }
    70% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.95) rotate(-2deg);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
}

@keyframes successShimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@keyframes errorButtonShake {
    0%, 100% {
        transform: translateX(0);
        background: linear-gradient(110deg, var(--accent-color-deep), var(--accent-color-medium), var(--secondary-accent));
    }
    25% {
        transform: translateX(-2px);
        background: linear-gradient(110deg, #ef4444, #dc2626, #b91c1c);
    }
    50% {
        transform: translateX(2px);
        background: linear-gradient(110deg, #ef4444, #dc2626, #b91c1c);
    }
    75% {
        transform: translateX(-2px);
        background: linear-gradient(110deg, #ef4444, #dc2626, #b91c1c);
    }
}

@keyframes errorButtonIcon {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2) rotate(180deg);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(360deg);
    }
}

/* Loading and Feedback Messages */
.me-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* Slightly more opaque */
    backdrop-filter: blur(4px); /* Add blur effect */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

.me-spinner {
    border: 5px solid rgba(0, 0, 0, 0.1);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border-left-color: var(--accent-color-deep); /* Use variable */
    animation: spin 1.2s linear infinite; /* Smoother spin */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.me-success-message,
.me-error-message {
    position: fixed;
    bottom: 90px; /* Higher position */
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 25px; /* More padding */
    border-radius: 10px;
    color: white;
    font-size: 0.95rem;
    font-weight: 500; /* Bolder feedback text */
    z-index: 1002;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Add transform transition */
    text-align: center;
    max-width: 90%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transform: translateX(-50%) translateY(20px); /* Initial offset for animation */
    pointer-events: none; /* 让消息不影响用户点击 */
}

.me-success-message {
    background-color: rgba(76, 175, 80, 0.95); /* 稍微不透明的绿色 */
    backdrop-filter: blur(4px); /* 添加毛玻璃效果 */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.3), 0 0 15px rgba(76, 175, 80, 0.2);
    letter-spacing: 0.03em; /* 字间距增加可读性 */
}

.me-error-message {
    background-color: rgba(220, 53, 69, 0.95); /* Bootstrap danger color, slightly adjusted */
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3), 0 0 15px rgba(220, 53, 69, 0.2);
}

@keyframes messagePulse {
    0% { box-shadow: 0 8px 20px rgba(76, 175, 80, 0.3), 0 0 15px rgba(76, 175, 80, 0.2); }
    50% { box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4), 0 0 20px rgba(76, 175, 80, 0.3); }
    100% { box-shadow: 0 8px 20px rgba(76, 175, 80, 0.3), 0 0 15px rgba(76, 175, 80, 0.2); }
}

@keyframes errorMessagePulse {
    0% { box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3), 0 0 15px rgba(220, 53, 69, 0.2); }
    50% { box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4), 0 0 20px rgba(220, 53, 69, 0.3); }
    100% { box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3), 0 0 15px rgba(220, 53, 69, 0.2); }
}

.me-success-message[style*="display: block"] {
    opacity: 1;
    transform: translateX(-50%) translateY(0); /* Animate into view */
    animation: messagePulse 2s ease infinite; /* 添加脉冲动画 */
}

.me-error-message[style*="display: block"] {
    opacity: 1;
    transform: translateX(-50%) translateY(0); /* Animate into view */
    animation: errorMessagePulse 2s ease infinite; /* 错误消息使用红色脉冲动画 */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .me-container {
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 15px;
        padding-bottom: 100px; /* 确保移动端也有足够的底部padding */
    }

    .me-container::before { /* Hide decorative element on mobile */
        display: none;
    }

    .me-header {
        padding: 15px; /* Adjust padding for mobile */
        gap: 10px; /* Adjust gap for mobile */
        margin-bottom: 20px;
        flex-direction: column; /* Stack elements vertically */
        align-items: flex-start; /* Align items to the start */
    }

    .me-avatar-preview {
        width: 70px; /* 移动端较小但保持正方形 */
        height: 70px;
        border-radius: 50%;
    }

    .me-avatar-edit-icon {
        width: 25px; /* Smaller pencil on mobile */
        height: 25px;
        font-size: 14px;
        bottom: 3px;
        right: 3px;
    }

    .me-avatar-edit-icon:hover {
        transform: none; /* Disable hover effect */
        background-color: var(--accent-color-deep); /* Revert background */
    }

    /* Add active state for edit icon */
    .me-avatar-edit-icon:active {
        transform: scale(1.1); /* Simple scale on tap */
        background-color: var(--accent-color-medium);
    }

    .me-username {
        font-size: 1.5em; /* Adjust font size for mobile */
        margin-left: 0; /* Remove margin for mobile stacked layout */
        width: 100%; /* Take full width */
        text-align: left; /* Align text left */
    }

    .me-logout-btn {
        padding: 4px 8px;
        font-size: 0.7rem;
    }

    .me-logout-btn:hover {
        /* Keep subtle hover for devices that might support it, but active is primary */
        background-color: rgba(255, 255, 255, 0.7);
        border-color: var(--border-color-soft);
        color: var(--text-color-secondary);
        box-shadow: none;
    }

    .me-section {
        padding: 20px;
        border-radius: 12px;
        margin-bottom: 25px;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
        border: 1px solid #f0f0f0;
    }

    .me-section::before { /* Hide decorative element on mobile */
        display: none;
    }

    .me-section:hover {
        transform: none; /* Disable hover lift on mobile */
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05); /* Keep base shadow */
    }

    .me-section-title {
        font-size: 1.1rem;
        margin: -20px -20px 20px -20px; /* Adjust for mobile padding */
        padding: 15px 20px;
        /* 移除导致文字被截断的样式 */
        /* border-top-left-radius: 12px; */
        /* border-top-right-radius: 12px; */
        border-radius: 0; /* 使用无圆角 */
        /* background: #fdfdfd; 移除单色背景 */
        background: linear-gradient(to bottom, #fdfdfd, rgba(255, 245, 248, 0.5)); /* 添加垂直渐变融合界限 */
        overflow: visible; /* 确保文字内容不被裁剪 */
    }

    .me-section-title::after { /* Adjust title decoration */
        left: 20px;
        width: 40px;
        background: linear-gradient(90deg, var(--accent-color-medium, #FF9AB3), transparent); /* 调整为渐变透明效果 */
        border-radius: 3px;
        transform: none; /* 移除位移 */
        height: 3px; /* 增加高度 */
    }

    .me-form-input,
    #me-profile-form select {
        padding: 10px 12px;
        font-size: 0.9rem;
    }

     #me-profile-form select {
        background-position: right 12px center;
        padding-right: 35px;
     }

    .me-live-photos-grid {
        grid-template-columns: repeat(3, 1fr); /* Always 3 columns on mobile */
        gap: 5px;
    }

    .me-save-btn {
        width: 100%;
        padding: 14px;
    }

    .me-save-btn:hover:not(:disabled) {
        background-position: left center; /* Disable gradient animation */
        transform: none; /* Disable hover lift/scale */
        box-shadow: var(--button-shadow); /* Revert shadow */
    }

    .me-save-btn:active:not(:disabled) {
        transform: scale(0.98); /* Simple scale down on tap */
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.15); /* Inner shadow for press */
        background-position: right center; /* Optional: still shift gradient on press */
    }

    .me-success-message,
    .me-error-message {
        bottom: 70px; /* Adjust for bottom nav */
        width: calc(100% - 30px);
    }

    .me-save-button-container {
        padding-bottom: 40px; /* 移动端增加更多底部padding */
    }
}

/* 创伤模态框样式 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.15); /* 更加透明的背景 */
}

.modal-content {
    position: relative;
    width: 90%;
    max-width: 540px;
    height: auto;
    aspect-ratio: 9/16;
    max-height: 90vh;
    background-color: transparent;
    border-radius: 15px;
    margin: auto;
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    color: white;
    font-size: 32px; /* 增大关闭按钮 */
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 0 0 15px rgba(0, 0, 0, 0.8); /* 增强关闭按钮阴影 */
}

.close-modal:hover {
    color: #f8f8f8;
}

.trauma-cards-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 介绍卡片样式 */
.intro-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://cdn.getdatelove.com/images/trauma/intro.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease, transform 0.4s ease;
    display: none;
    opacity: 0;
    transform: translateX(20px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: opacity, transform;
}

/* 新增类处理卡片激活状态 */
.intro-card.active-card {
    opacity: 1;
    transform: translateX(0);
}

/* 创伤卡片样式 */
.trauma-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease, transform 0.4s ease;
    display: none;
    opacity: 0;
    transform: translateX(20px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: opacity, transform;
}

/* 新增类处理卡片激活状态 */
.trauma-card.active-card {
    opacity: 1;
    transform: translateX(0);
}

/* 为每种创伤类型设置不同的背景图片 */
.trauma-card[data-trauma-type="loss"] {
    background-image: url('https://cdn.getdatelove.com/images/trauma/loss.webp');
}

.trauma-card[data-trauma-type="abuse"] {
    background-image: url('https://cdn.getdatelove.com/images/trauma/abuse.webp');
}

.trauma-card[data-trauma-type="stress"] {
    background-image: url('https://cdn.getdatelove.com/images/trauma/stress.webp');
}

.trauma-card[data-trauma-type="rejection"] {
    background-image: url('https://cdn.getdatelove.com/images/trauma/rejection.webp');
}

.trauma-card[data-trauma-type="health"] {
    background-image: url('https://cdn.getdatelove.com/images/trauma/health.webp');
}

/* 添加图片预加载 */
body::after {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
    content: url('https://cdn.getdatelove.com/images/trauma/intro.webp')
             url('https://cdn.getdatelove.com/images/trauma/loss.webp')
             url('https://cdn.getdatelove.com/images/trauma/abuse.webp')
             url('https://cdn.getdatelove.com/images/trauma/stress.webp')
             url('https://cdn.getdatelove.com/images/trauma/rejection.webp')
             url('https://cdn.getdatelove.com/images/trauma/health.webp');
}

/* 卡片内容样式 */
.card-content {
    position: relative;
    padding: 20px;
    height: 100%;
    overflow-y: auto;
    background-color: transparent; /* 保持透明背景 */
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 卡片标题样式 - 默认值 */
.card-content h3 {
    font-size: 28px;
    margin-bottom: 20px;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    background-color: transparent;
    padding: 10px;
    border-radius: 5px;
    font-weight: 700;
}

/* 卡片描述样式 - 默认值 */
.card-description {
    margin-bottom: 20px;
    line-height: 1.6;
    background-color: transparent;
    padding: 10px;
    border-radius: 5px;
    font-size: 18px;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* 统一 Intro 卡片布局与其他卡片一致 */
.intro-card .card-content {
    padding: 25px 20px 80px 20px !important; 
    margin: 0 !important;
    position: relative !important;
    top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* 顶部对齐，用 margin 控制后续元素 */
    height: 100% !important;
    box-sizing: border-box;
    overflow-y: hidden !important; /* 禁止介绍卡片内部垂直滚动 */
    overflow-x: hidden !important; /* 禁止介绍卡片内部水平滚动 */
}

/* 1. 标题: 顶部 */
.intro-card .card-content h3 {
    font-family: sans-serif; /* 清晰非衬线 */
    font-size: 30px !important; 
    font-weight: 600 !important;
    color: rgb(65, 55, 75) !important; 
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2) !important; /* 淡白阴影 */
    text-align: center !important;
    margin-top: 10px !important; 
    margin-bottom: 30px !important; /* 与引用间距 */
    letter-spacing: 1px !important;
    line-height: 1.3 !important;
    padding: 0 !important;
    order: 1; 
}

/* 2. 拉康引用 - 中间区域 */
.intro-card .card-content .quote-container {
    position: relative;
    max-width: 90%;
    margin: 20px auto;
    padding: 0 20px;
    border-left: 3px solid rgba(180, 180, 180, 0.7);
}

.intro-card .card-content .quote-container blockquote {
    font-style: italic;
    color: rgba(50, 50, 50, 0.9);
    font-weight: 500;
    line-height: 1.6;
    font-size: 16px;
    margin: 0;
    padding: 5px 10px;
    text-shadow: none;
}

.intro-card .card-content .quote-container blockquote cite {
    display: block;
    font-style: normal;
    margin-top: 10px;
    text-align: right;
    font-weight: 600;
    font-size: 14px;
}

/* 3. 反思问题 - 中下部 */
.intro-card .card-content .explanation {
    font-family: sans-serif; /* 非衬线 */
    font-style: italic; /* 斜体强调 */
    font-size: 19px !important; 
    font-weight: 600 !important;
    color: rgb(210, 230, 235) !important; /* 亮青色 */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8) !important; /* 清晰深色阴影 */
    text-align: center !important;
    line-height: 1.6 !important; 
    margin: 0 auto 20px auto !important; /* 上方自动间距，下方固定 */
    padding: 10px !important; 
    max-width: 90%; 
    position: relative !important;
    top: 0 !important; 
    background-color: transparent !important; 
    border-radius: 0;
    order: 3; 
    white-space: pre-line; /* 允许基于内容的换行 */
}

/* 导航按钮容器 - 推到底部 */
.intro-card .card-nav-buttons {
    margin-top: auto !important; /* 确保推到底部 */
    margin-bottom: 10px;
    padding-bottom: 0; 
    text-align: center; 
    order: 4; 
}

/* LOSS Card modifications */
.trauma-card[data-trauma-type="loss"] .card-content {
    /* 保持透明背景，不遮挡图片 */
    background: transparent;
}

.trauma-card[data-trauma-type="loss"] .card-content h3 {
    /* 标题使用深棕色，呈现怀旧感，与失去主题相符 */
    color: #3A2A1D;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 36px;
    /* 多层文字阴影确保在任何背景上都清晰可见 */
    text-shadow: 
        0 0 8px rgba(255, 255, 255, 0.95),
        1px 1px 2px rgba(255, 255, 255, 0.9),
        -1px -1px 2px rgba(255, 255, 255, 0.9);
    letter-spacing: 0.8px;
    padding: 5px 10px;
    display: inline-block;
}

.trauma-card[data-trauma-type="loss"] .card-content .card-description {
    /* 描述文字使用深蓝灰色，呼应图片主色调 */
    color: #2C3E50;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.6;
    /* 多层白色阴影确保在复杂背景上的可读性 */
    text-shadow: 
        0 0 7px rgba(255, 255, 255, 0.95),
        1px 1px 2px rgba(255, 255, 255, 0.9),
        -1px -1px 2px rgba(255, 255, 255, 0.9);
    max-width: 90%;
    margin: 0 auto 20px;
    padding: 8px;
}

.trauma-card[data-trauma-type="loss"] .card-options label {
    /* 选项标签样式 */
    color: #2C3E50;
    font-weight: 600;
    text-shadow: 
        0 0 6px rgba(255, 255, 255, 0.95),
        1px 1px 1px rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(105, 136, 155, 0.4);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.trauma-card[data-trauma-type="loss"] .card-options label:hover {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(105, 136, 155, 0.7);
    transform: translateY(-2px);
}

.trauma-card[data-trauma-type="loss"] .card-options input[type="radio"]:checked + span {
    color: #5E3A1E;
    font-weight: 700;
}

/* ABUSE Card modifications */
.trauma-card[data-trauma-type="abuse"] .card-content {
    /* 移除背景，保持图片可见 */
    background: transparent;
}

.trauma-card[data-trauma-type="abuse"] .card-content h3 {
    /* 调整标题为带微蓝调的白色，降低纯白色强度 */
    color: rgba(230, 240, 255, 0.92);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 36px;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.85), 1px 1px 2px rgba(0, 0, 0, 0.9);
    letter-spacing: 0.8px;
}

.trauma-card[data-trauma-type="abuse"] .card-content .card-description {
    /* 描述文字使用轻微灰蓝色调，不再是纯白 */
    color: rgba(220, 225, 240, 0.9);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.6;
    text-shadow: 0 0 7px rgba(0, 0, 0, 0.8), 1px 1px 2px rgba(0, 0, 0, 0.9);
}

.trauma-card[data-trauma-type="abuse"] .card-options label {
    /* 选项标签使用更淡的浅蓝色调 */
    color: rgba(210, 220, 235, 0.9);
    font-weight: 600;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.8), 1px 1px 1px rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
}

.trauma-card[data-trauma-type="abuse"] .card-options input[type="radio"]:checked + span {
    /* 选中状态使用偏粉色调，增加对比 */
    color: rgba(255, 210, 220, 0.95);
    font-weight: 700;
}

/* STRESS Card modifications */
.trauma-card[data-trauma-type="stress"] .card-content {
    /* 保持透明背景，不遮挡图片 */
    background: transparent;
}

.trauma-card[data-trauma-type="stress"] .card-content h3 {
    /* 标题使用深棕红色，与压力主题呼应 */
    color: #5D1E0F;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 36px;
    /* 增强选项文字对比度 */
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8), 1px 1px 1px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.8px;
    padding: 5px 10px;
    display: inline-block;
}

.trauma-card[data-trauma-type="stress"] .card-content .card-description {
    /* 描述文字使用深褐色，确保在浅色背景上清晰可见 */
    color: #3A2A17;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.6;
    /* 轻微阴影增强可读性 */
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.6);
    max-width: 92%;
    margin: 0 auto 20px;
    padding: 8px;
}

.trauma-card[data-trauma-type="stress"] .card-options label {
    /* 加深颜色提高对比度 */
    color: #26180D;
    font-weight: 700;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.8), 1px 1px 1px rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(80, 60, 40, 0.4);
}

.trauma-card[data-trauma-type="stress"] .card-options input[type="radio"]:checked + span {
    color: #5C1900;
    font-weight: 800;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
}

/* REJECTION Card modifications */
.trauma-card[data-trauma-type="rejection"] .card-content {
    /* 保持透明背景，不遮挡图片 */
    background: transparent;
}

.trauma-card[data-trauma-type="rejection"] .card-content h3 {
    /* 改用深紫黑色，与浅蓝背景形成强对比 */
    color: #1A0A2E;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 36px;
    /* 加强阴影效果 */
    text-shadow: 
        0 0 6px rgba(255, 255, 255, 0.9),
        1px 1px 2px rgba(255, 255, 255, 0.8),
        -1px -1px 2px rgba(255, 255, 255, 0.8);
    letter-spacing: 0.8px;
    padding: 5px 10px;
    display: inline-block;
}

.trauma-card[data-trauma-type="rejection"] .card-content .card-description {
    /* 描述文字也使用深紫黑色，但透明度稍低 */
    color: #2B1500;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.6;
    /* 加强白色阴影，保证在浅色背景上可读性 */
    text-shadow: 
        0 0 7px rgba(255, 255, 255, 0.9),
        1px 1px 2px rgba(255, 255, 255, 0.8),
        -1px -1px 2px rgba(255, 255, 255, 0.8);
    max-width: 92%;
    margin: 0 auto 20px;
    padding: 8px;
}

.trauma-card[data-trauma-type="rejection"] .card-options label {
    /* 选项标签使用深紫色，加浅蓝色透明背景 */
    color: #2B1500;
    font-weight: 700;
    text-shadow: 
        0 0 6px rgba(255, 255, 255, 0.9),
        1px 1px 1px rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(130, 130, 190, 0.2);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.trauma-card[data-trauma-type="rejection"] .card-options input[type="radio"]:checked + span {
    color: #33166A;
    font-weight: 700;
}

/* HEALTH Card modifications */
.trauma-card[data-trauma-type="health"] .card-content {
    /* 保持透明背景，不遮挡图片 */
    background: transparent;
}

.trauma-card[data-trauma-type="health"] .card-content h3 {
    /* 标题使用深蓝绿色，呼应医疗主题 */
    color: #003B46;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 36px;
    /* 多层阴影确保可读性 */
    text-shadow: 
        0 0 8px rgba(255, 255, 255, 0.95),
        1px 1px 2px rgba(255, 255, 255, 0.9),
        -1px -1px 2px rgba(255, 255, 255, 0.9);
    letter-spacing: 0.8px;
    padding: 5px 10px;
    display: inline-block;
}

.trauma-card[data-trauma-type="health"] .card-content .card-description {
    /* 描述使用深青色 */
    color: #07575B;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.6;
    /* 确保在任何背景上都有足够对比度 */
    text-shadow: 
        0 0 7px rgba(255, 255, 255, 0.95),
        1px 1px 2px rgba(255, 255, 255, 0.9),
        -1px -1px 2px rgba(255, 255, 255, 0.9);
}

.trauma-card[data-trauma-type="health"] .card-options label {
    /* 选项使用医疗用色系 */
    color: #07575B;
    font-weight: 600;
    text-shadow: 
        0 0 6px rgba(255, 255, 255, 0.95),
        1px 1px 1px rgba(255, 255, 255, 0.9);
    background: rgba(240, 255, 255, 0.25);
    border: 1px solid rgba(7, 87, 91, 0.3);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.trauma-card[data-trauma-type="health"] .card-options label:hover {
    background: rgba(240, 255, 255, 0.4);
    border-color: rgba(7, 87, 91, 0.5);
}

.trauma-card[data-trauma-type="health"] .card-options input[type="radio"]:checked + span {
    color: #003B46;
    font-weight: 700;
}

/* ADD GENERIC OPTIONS STYLES FROM register.css */
.card-options {
    display: flex;
    flex-direction: column;
    gap: 12px; /* 增加间距 */
    margin: 20px 0;
}

.card-options label {
    display: inline-flex; /* Align icon and text */
    align-items: center;
    justify-content: center;
    gap: 8px; /* Space between text and icon */
    background-color: #ffffff; /* Clean white background */
    color: var(--text-color-primary, #333); /* Dark text */
    border: 1px solid var(--border-color-soft, rgba(230, 230, 230, 0.8)); /* Subtle border */
    padding: 10px 20px;
    border-radius: 8px; /* Soft rounded corners */
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out, transform 0.15s ease-out, box-shadow 0.25s ease-out;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Softer shadow */
    width: auto; /* Adjust width based on content */
    min-width: 180px; /* Ensure minimum width */
    /* Remove pseudo-element if it exists */
    /* &::before { display: none; } */
}

.card-options label::before {
    content: none; /* Remove the previous gradient pseudo-element */
}

.card-options label:hover {
    background-color: #f7f7f7; /* Slightly darker background on hover */
    border-color: rgba(200, 200, 200, 0.8); /* Slightly darker border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); /* Slightly stronger shadow */
    transform: translateY(-1px); /* Subtle lift */
}

.card-options label:active {
    background-color: var(--text-color-primary, #333); /* Swap: Dark background */
    color: #ffffff; /* Swap: White text */
    border-color: var(--text-color-primary, #333); /* Match background */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Reduce shadow */
    transform: scale(0.98) translateY(0); /* Press down effect */
}

.card-options label span {
    transition: color 0.25s ease-out; /* Ensure span color also transitions */
}

.card-options label i {
    transition: transform 0.3s ease-in-out; /* Smooth icon rotation */
    font-size: 1.1em; /* Slightly larger icon */
}

.card-options label.active i {
    transform: rotate(180deg); /* Rotate icon when active/expanded */
}

/* Ensure containers still transition smoothly */
.membership-upgrade-view {
    padding: 25px 22px 15px 22px;
    margin-bottom: 10px;
    background: transparent;
    max-height: none; /* Ensure it can expand to content height */
    opacity: 1; /* Fully visible */
    overflow: visible; /* Ensure content is not clipped */
    transform: none; /* No scaling or translation */
    transform-origin: top center;
    pointer-events: auto; /* Element is interactive */
    visibility: visible; /* Element is visible */
    will-change: auto; /* Reset will-change as transitions are removed */
    flex-shrink: 0;
    display: flex; /* Using flex for internal layout */
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 15px; /* Consistent top margin */
}

.membership-options-container {
    padding: 0 15px 15px; 
    background: transparent; 
    border-top: none; 
    /* transitions removed */
    max-height: 2000px;
    opacity: 1;
    overflow: visible; /* Default is visible, ensure it's not hidden if previously set */
    transform: translateY(0);
    will-change: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px; /* Consistent margin */
    /* Apply styles from the more specific .expanded rule that handled border */
    padding-top: 22px; 
    border-top: 1px solid rgba(226, 232, 240, 0.8); 
}

/* .membership-options-container.expanded { // This class is no longer needed
    max-height: 2000px;
    opacity: 1;
    transform: translateY(0);
} */

/* 添加英尺英寸输入区域样式 */
#me-feet-inches-container {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

#me-feet, #me-inches {
    width: 50px;
    text-align: center;
    margin-right: 5px;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

#me-feet:focus, #me-inches:focus {
    border-color: #FFB6C1;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 182, 193, 0.25);
}

.unit-label {
    font-size: 14px;
    color: #666;
    margin-right: 10px;
    font-weight: 500;
}

/* 确保响应式布局 */
@media (max-width: 480px) {
    .me-height-input-container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #me-feet-inches-container {
        margin-top: 10px;
        width: 100%;
    }
}

/* Password Section Styles */
.me-password-toggle {
    margin-bottom: 15px;
}

.me-toggle-password-btn {
    background: none;
    border: none;
    color: var(--accent-color);
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    padding: 0;
    transition: color 0.3s;
}

.me-toggle-password-btn.active i {
    transform: rotate(180deg);
}

.me-toggle-password-btn i {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.me-toggle-password-btn:hover {
    color: var(--primary-color);
}

/* Styles for the expandable password form container */
.me-password-form {
    /* Remove default overflow: hidden */
    /* overflow: hidden;  */
    max-height: 1000px; /* Set a large max-height for expanded state */
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease, padding 0.5s ease, margin 0.5s ease;
    opacity: 1;
    padding-top: 15px; /* Add some padding for spacing */
    padding-bottom: 15px;
    margin-top: 10px;
    will-change: max-height, opacity; /* Optimize transition performance */
}

.me-password-form.hidden-content {
    max-height: 0 !important; /* Collapse height when hidden */
    opacity: 0 !important; /* Fade out */
    overflow: hidden !important; /* Hide overflow ONLY when hidden */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important; /* Collapse margin */
    pointer-events: none !important;
    border-top: none !important; /* Hide border when collapsed */
    border-bottom: none !important;
}

.me-password-container {
    position: relative;
    margin-bottom: 10px; /* Space below each input container */
}

.me-password-container input[type="password"],
.me-password-container input[type="text"] { /* Also style when text */
    padding-right: 15px; /* Reduced padding slightly */
}

.me-password-strength {
    margin-top: 8px;
    height: 8px;
    background-color: #eee;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.me-password-strength.weak {
    background-color: #ff4d4d;
}

.me-password-strength.medium {
    background-color: #ffaa33;
}

.me-password-strength.strong {
    background-color: #66cc66;
}

.me-password-error {
    color: #ff4d4d;
    font-size: 0.8rem;
    margin-top: 5px;
    margin-bottom: 10px;
}

.me-password-actions {
    margin-top: 20px; /* Revert margin */
    text-align: center;
    /* Let display be controlled by class */
    opacity: 1;
    max-height: 100px; /* Revert max-height */
    transition: opacity 0.3s ease, max-height 0.3s ease; /* Restore transition */
    overflow: hidden; /* Default to hidden overflow, show when class removed */
}

.me-password-actions.hidden-initially {
    opacity: 0;
    max-height: 0;
    /* overflow: hidden; is default */
    pointer-events: none;
    margin-top: 0; /* Collapse margin when hidden */
    padding: 0; 
}

.me-change-password-btn {
    padding: 10px 25px; /* Revert padding */
    background: linear-gradient(135deg, #ff7d42 0%, #ff5c5c 100%);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(255, 125, 66, 0.3);
    transition: all 0.2s ease;
    display: inline-block; /* Revert display */
    margin: 0 auto;
    position: relative;
    z-index: 10; /* Revert z-index */
    font-size: 15px;
    line-height: 1.4;
}

.me-change-password-btn:hover {
    background: linear-gradient(135deg, #ff8a5a 0%, #ff7373 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 125, 66, 0.5);
}

.me-change-password-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(255, 92, 92, 0.4);
}

.me-change-password-btn:disabled {
    background: #cccccc;
    cursor: not-allowed;
    box-shadow: none;
    color: #888888;
    transform: none;
}

/* Responsive adjustments for password section */
@media (max-width: 768px) {
    .me-password-form {
        padding: 12px;
    }
    
    .me-password-actions {
        justify-content: center;
    }
    
    .me-change-password-btn {
        width: 100%;
        padding: 10px 16px;
    }
}

/* Animations for password form */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.me-password-form {
    animation: fadeIn 0.3s ease-out;
}

/* Style for the new nationality verification status */
.nationality-status {
    margin-left: 8px; /* Add some space next to the select box */
    font-size: 1.2rem; /* Icon size */
    vertical-align: middle; /* Align with the select box */
    display: inline-block; /* Ensure it takes space */
    opacity: 0.6; /* Slightly faded by default */
    cursor: help; /* Indicate the title */
    transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease; /* Smooth transitions */
}

.nationality-status.verified::before {
    content: "\e8e8"; /* Material Symbols: verified_user or task_alt */
    font-family: 'Material Symbols Outlined';
    color: #4CAF50; /* Green for verified */
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
    opacity: 1; /* Full opacity */
    transform: scale(1.1); /* Slight emphasis */
}

.nationality-status.unverified::before {
    content: "\ef4f"; /* Material Symbols: help_outline or report_problem */
    font-family: 'Material Symbols Outlined';
    color: #FFA500; /* Orange for unverified/mismatch */
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
    opacity: 0.8;
}

.nationality-status.pending::before {
    content: "\f07a"; /* Material Symbols: pending or hourglass_empty */
    font-family: 'Material Symbols Outlined';
    color: #9E9E9E; /* Grey for pending */
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
    animation: spin 1.5s linear infinite; /* Add a subtle spin */
    display: inline-block;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Make sure the icon is visible in the form group */
.me-form-group select + .nationality-status {
    position: absolute;
    right: 45px; /* Adjust position relative to the dropdown arrow */
    top: 50%;
    transform: translateY(-50%);
}

/* Adjust position if select is not the direct sibling (less ideal but fallback) */
.me-form-group .me-form-input[name="nationality"] + .nationality-status {
    position: absolute;
    right: 45px;
    top: 50%;
    transform: translateY(-50%);
}

/* Ensure Material Symbols Outlined font is loaded */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* Readonly fields styling */
.me-form-group.readonly .me-form-input {
    background-color: #f9f9f9;
    color: #777;
    cursor: not-allowed;
    border-color: #eee;
}

/* 国籍验证相关样式 */
.nationality-verification {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nationality-select-wrapper {
    position: relative;
    flex: 1;
}

/* Restore positioning/background for the status text div, but make it static */
.verification-status {
    display: flex; /* 改为 flex 并移除 !important */
    width: auto;
    max-width: 100%;
    align-items: center;
    font-size: 0.8em;
    padding: 4px 8px;
    border-radius: 10px;
    transition: all 0.3s ease;
    margin-left: 6px;
    box-sizing: border-box;
    white-space: normal; /* 允许换行 */
}


/* Remove specific padding from state rules */
.verification-status.pending {
    background-color: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
    /* padding-left: 8px; REMOVED */
}

.verification-status.verified {
    background-color: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
    /* padding-left: 8px; REMOVED */
}

.verification-status.failed {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.3);
    /* padding-left: 8px; REMOVED */
}

.verification-status.vpn-detected {
    background-color: rgba(255, 152, 0, 0.1);
    color: #ff9800;
    border: 1px solid rgba(255, 152, 0, 0.3);
}

/* Status text visibility rules remain */
.verification-status .status-text { 
    display: none; 
    margin-left: 0; 
}

/* Style for the icon next to the label remains */
#nationality-label-icon i.fas { 
    color: #2ecc71;           /* Green color */
    font-size: 0.85em;         /* Slightly adjust size relative to label */
    margin-left: 5px;          /* Space from label text */
    vertical-align: middle;    /* Align with label text */
    font-weight: 900;          /* Font Awesome Solid icons often need weight 900 */
}

/* Ensure the label itself behaves correctly with inline elements */
.me-form-label {
    display: inline-block; /* Or block, depending on desired layout */
    width: 100%; /* Or auto */
}

/* ... rest of the css ... */

/* 暗色模式支持 */
[data-theme="dark"] .verification-status.pending {
    background-color: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.4);
}

[data-theme="dark"] .verification-status.verified {
    background-color: rgba(40, 167, 69, 0.15);
    border-color: rgba(40, 167, 69, 0.4);
}

[data-theme="dark"] .verification-status.failed {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.4);
}

/* 多语言支持 */
.verification-status .status-text {
    display: none;
}

.verification-status .status-text.visible {
    display: inline;
}

/* 悬停效果 */
.verification-status:hover {
    transform: translateY(-50%) scale(1.05);
    transition: all 0.2s ease;
}

/* VPN检测状态样式 */
.verification-status.vpn-detected {
    border-color: #ff9800;
    background-color: rgba(255, 152, 0, 0.1);
}

.verification-status.vpn-detected i.fas {
    color: #ff9800;
}

[data-theme="dark"] .verification-status.vpn-detected {
    background-color: rgba(255, 152, 0, 0.2);
}

/* 工具提示样式 */
.verification-status[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 4px;
    font-size: 0.8em;
    white-space: nowrap;
    margin-bottom: 5px;
    z-index: 1000;
    max-width: 300px;
    word-wrap: break-word;
    white-space: normal;
    line-height: 1.4;
}

[data-theme="dark"] .verification-status[data-tooltip]:hover::after {
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
}

/* 国籍验证状态样式 - 移除直接 display: flex */
/* .verification-status {
    display: flex;
    align-items: center;
    margin-left: 10px;
} */

/* 默认隐藏所有状态文本 */
.verification-status .status-text {
    display: inline-block; /* 改为默认显示 */
    margin-left: 5px;
    color: inherit; /* 继承父元素颜色 */
    font-size: 0.9em; /* 添加字体大小 */
    vertical-align: middle; /* 垂直对齐 */
    opacity: 0.95; /* 稍微透明 */
    font-weight: 500; /* 加粗一点 */
    text-shadow: 0 1px 2px rgba(0,0,0,0.1); /* 添加轻微文字阴影 */
}

/* REMOVED Language specific display rules causing the issue */
/* .verification-status .status-text.zh { display: inline; } */
/* [lang="en"] .verification-status .status-text.en { display: inline; } */
/* [lang="ja"] .verification-status .status-text.ja { display: inline; } */
/* [lang="ru"] .verification-status .status-text.ru { display: inline; } */
/* [lang="fr"] .verification-status .status-text.fr { display: inline; } */

/* 状态文本显示规则，与JS配合使用 */
.verification-status .status-text.visible {
    display: inline-block;
    animation: fadeIn 0.3s ease-in-out; /* 添加淡入动画 */
}

.membership-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(245, 245, 255, 0.95) 100%);
    border-radius: 18px; /* Slightly larger radius */
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid var(--border-color-soft); /* Use soft border instead of shadow */
    /* box-shadow: var(--card-shadow); REMOVED */
}

.membership-card::before, /* 移除伪元素背景 */
.membership-card::after {
    display: none;
}

.membership-card:hover {
    transform: translateY(-3px); /* Subtle lift */
    border-color: rgba(200, 200, 220, 0.7); /* Slightly darker border on hover */
}

.membership-image {
    width: 100%;
    height: auto; /* 高度自适应 */
    display: block;
    border-radius: 20px 20px 0 0; /* 图片顶部圆角 */
    margin-bottom: 0;
    box-shadow: none; /* 移除图片自身阴影，由卡片容器提供 */
    transition: transform 0.3s ease;
    object-fit: contain; /* 改为contain以显示完整图片 */
    max-height: none; /* 移除最大高度限制 */
}

.membership-card-content {
    padding: 35px 28px;
    position: relative;
    z-index: 2;
    text-align: left;
    color: #222;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95));
    border-radius: 0 0 20px 20px; /* 内容区域底部圆角 */
}

.membership-badge {
    display: inline-block;
    background: linear-gradient(135deg, #E74C3C, #FF6B6B);
    color: white;
    font-weight: bold;
    font-size: 1rem;
    padding: 8px 18px;
    border-radius: 25px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: 0 6px 16px rgba(231, 76, 60, 0.35);
}

.membership-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0 0 20px 0;
    letter-spacing: 0.5px;
    color: #111;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.12);
    line-height: 1.3;
}

.membership-description {
    font-size: 1.1rem;
    margin-bottom: 25px;
    line-height: 1.6;
    color: #333;
    font-weight: 500;
}

.membership-features {
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}

.membership-feature {
    display: flex;
    align-items: center;
    background: rgba(255, 252, 253, 0.98);
    padding: 14px 18px;
    border-radius: 14px;
    transition: all 0.25s ease;
    border: 1px solid rgba(255, 200, 210, 0.4);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.membership-feature:hover {
    background: rgba(255, 245, 248, 0.95);
    transform: translateX(5px);
    border-color: rgba(255, 120, 140, 0.5);
    box-shadow: 0 6px 14px rgba(255, 120, 140, 0.18);
}

.membership-feature i {
    margin-right: 14px;
    font-size: 1.5rem;
    color: #E74C3C;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.membership-button {
    background: linear-gradient(135deg, #E74C3C, #FF6B6B);
    color: white;
    font-weight: bold;
    padding: 16px 34px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 1.15rem;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(231, 76, 60, 0.3);
    display: inline-block;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.membership-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: translateX(-100%);
}

.membership-button:hover {
    background: linear-gradient(135deg, #FF5745, #FF7E7E);
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(231, 76, 60, 0.35);
}

.membership-button:hover::after {
    transform: translateX(100%);
    transition: transform 0.6s ease;
}

/* 移除内容区域的装饰条和底部装饰 */
.membership-card-content::before,
.membership-card-content::after {
    display: none;
}

@media (max-width: 768px) {
    .membership-card {
        margin: 15px 0;
    }
    
    .membership-card-content {
        padding: 25px 20px;
    }
    
    .membership-title {
        font-size: 1.8rem;
    }
    
    .membership-description {
        font-size: 1rem;
    }
    
    .membership-features {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .membership-button {
        padding: 14px 28px;
        font-size: 1rem;
        width: 100%;
        text-align: center;
    }
}

/* 会员计划弹窗样式 */
.membership-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    backdrop-filter: blur(5px);
}

.membership-modal.visible {
    opacity: 1;
    visibility: visible;
}

.membership-modal-content {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(30px);
    transition: transform 0.4s, box-shadow 0.3s;
}

.membership-modal.visible .membership-modal-content {
    transform: translateY(0);
}

.membership-modal-content:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.membership-modal-header {
    padding: 25px 20px 20px;
    text-align: center;
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.1); 移除边框线 */
    position: relative;
    background: linear-gradient(135deg, #f9f9f9, #ffffff);
}

.membership-modal-header::after {
    content: '';
    position: absolute;
    left: 10%;
    bottom: 0;
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, 
                rgba(255, 255, 255, 0.6), 
                rgba(0, 0, 0, 0.07), 
                rgba(255, 255, 255, 0.6));
    pointer-events: none;
}

.membership-modal-title {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 0;
    color: #333;
    background: linear-gradient(135deg, #E74C3C, #FF9AB3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.membership-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #f0f0f0;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #555;
    transition: all 0.2s;
}

.membership-modal-close:hover {
    background: #e0e0e0;
    color: #333;
    transform: rotate(90deg);
}

.membership-modal-body {
    padding: 25px 20px;
}

.membership-plans {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 15px;
    padding: 10px 0;
    margin-bottom: 25px;
    scrollbar-width: thin;
    scrollbar-color: #FF9AB3 #f0f0f0;
}

.membership-plans::-webkit-scrollbar {
    height: 6px;
}

.membership-plans::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}

.membership-plans::-webkit-scrollbar-thumb {
    background: #FF9AB3;
    border-radius: 10px;
}

.membership-plan {
    min-width: 270px;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #f8f8f8, #ffffff);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04);
    scroll-snap-align: center;
    /* border: 2px solid transparent; 移除边框 */
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden; /* 确保渐变效果不溢出 */
}

.membership-plan::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 15px;
    background: linear-gradient(145deg, 
                rgba(255, 230, 240, 0.3), 
                rgba(255, 255, 255, 0), 
                rgba(230, 240, 255, 0.2));
    opacity: 0.15;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.membership-plan.selected {
    /* border-color: #FF9AB3; 移除边框颜色 */
    box-shadow: 0 8px 25px rgba(255, 154, 179, 0.2), 0 0 0 2px rgba(255, 154, 179, 0.2);
    transform: translateY(-5px);
}

.membership-plan.selected::before {
    opacity: 0.6;
    background: linear-gradient(145deg, 
                rgba(255, 200, 220, 0.5), 
                rgba(255, 220, 230, 0.3), 
                rgba(250, 230, 255, 0.2));
}

.membership-plan:hover:not(.selected) {
    transform: translateY(-3px);
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.07);
}

.membership-plan:hover:not(.selected)::before {
    opacity: 0.3;
}

.membership-plan-header {
    text-align: center;
    margin-bottom: 15px;
}

.membership-plan-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

.membership-plan-price {
    font-size: 2.2rem;
    font-weight: bold;
    color: #E74C3C;
    margin-bottom: 5px;
    background: linear-gradient(135deg, #E74C3C, #FF9AB3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.membership-plan-period {
    font-size: 0.9rem;
    color: #666;
}

.membership-plan-features {
    margin-bottom: 20px;
}

.membership-plan-feature {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #555;
}

.membership-plan-feature i {
    color: #FF9AB3;
    margin-right: 8px;
    margin-top: 3px;
    flex-shrink: 0;
}

.membership-modal-footer {
    padding: 15px 20px 25px;
    text-align: center;
}

.membership-checkout-btn {
    background: linear-gradient(135deg, #FF9AB3, #E74C3C);
    color: white;
    font-weight: bold;
    padding: 14px 30px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 1.05rem;
    width: 100%;
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
}

.membership-checkout-btn:hover:not(:disabled) {
    box-shadow: 0 8px 20px rgba(231, 76, 60, 0.4);
    transform: translateY(-2px);
    background: linear-gradient(135deg, #FF9AB3, #c0392b);
}

.membership-checkout-btn:disabled {
    background: #cccccc;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.membership-benefits {
    background: rgba(255, 154, 179, 0.1);
    border-radius: 15px;
    padding: 20px;
    margin-top: 20px;
}

.membership-benefits-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.membership-benefit {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.6);
    padding: 12px 15px;
    border-radius: 10px;
    transition: all 0.2s;
}

.membership-benefit:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateX(5px);
}

.membership-benefit i {
    color: #E74C3C;
    margin-right: 10px;
    margin-top: 3px;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.membership-benefit-text {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.4;
}

.plan-badge {
    position: absolute;
    top: -9px;
    right: -6px;
    left: auto;
    transform: rotate(3deg);
    background: linear-gradient(140deg, var(--accent-color-medium), var(--accent-color-light), var(--accent-color-medium));
    background-size: 200% 200%;
    color: white;
    padding: 4px 8px;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 8px 2px 8px 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 0 1.5px rgba(255,255,255,0.3) inset;
    z-index: 2;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                background-position 0.6s ease, 
                box-shadow 0.3s ease;
    animation: badgeShimmer 4s infinite ease-in-out alternate;
}

@keyframes badgeShimmer {
    0% {
        background-position: 0% 50%;
        transform: rotate(3deg) scale(1);
    }
    50% {
        transform: rotate(2deg) scale(1.03);
    }
    100% {
        background-position: 100% 50%;
        transform: rotate(4deg) scale(0.97);
    }
}

.plan-button {
    flex: 1 1 200px; /* Allow flexible sizing */
    padding: 15px 18px;
    background-color: var(--plan-button-bg);
    border: none; /* REMOVED: 1px solid var(--border-color-soft); */
    border-radius: 12px; /* Soften corners */
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 150px; /* Ensure consistent height */
    position: relative;
    overflow: hidden;
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.05); REMOVED */
}

@media (max-width: 480px) {
    .plan-badge {
        padding: 3px 6px;
        font-size: 9px;
        right: -4px;
        top: -6px;
        border-radius: 6px 2px 6px 2px;
    }
    .plan-button {
        min-height: 130px; /* Adjust height for smaller screens */
        padding: 10px 12px;
    }
}

.plan-button.active {
    background-color: var(--plan-button-active-bg);
    /* border: 1px solid var(--plan-button-active-border);  REMOVED - use background/scale */
    transform: scale(1.03); /* Scale up slightly when active */
    /* box-shadow: 0 0 0 2px var(--plan-button-active-border), 0 4px 10px rgba(123, 104, 238, 0.2); REMOVED */
}

.plan-button:hover {
    background-color: var(--plan-button-hover-bg);
    transform: translateY(-2px);
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.08); REMOVED */
}

/* 多语言支持 */
.membership-modal .zh,
.membership-modal .en,
.membership-modal .ja,
.membership-modal .ru,
.membership-modal .fr {
    display: none;
}

.english .membership-modal .en,
[lang="zh"] .membership-modal .zh,
[lang="ja"] .membership-modal .ja,
[lang="ru"] .membership-modal .ru,
[lang="fr"] .membership-modal .fr {
    display: inline-block;
}

.english .membership-modal p.en,
.english .membership-modal span.en,
[lang="zh"] .membership-modal p.zh,
[lang="zh"] .membership-modal span.zh,
[lang="ja"] .membership-modal p.ja,
[lang="ja"] .membership-modal span.ja,
[lang="ru"] .membership-modal p.ru,
[lang="ru"] .membership-modal span.ru,
[lang="fr"] .membership-modal p.fr,
[lang="fr"] .membership-modal span.fr {
    display: inline-block; /* Or block for paragraphs */
}

/* Ensure paragraphs display as block */
.membership-modal p.en,
.membership-modal p.zh,
.membership-modal p.ja,
.membership-modal p.ru,
.membership-modal p.fr {
    display: block;
}

@media (max-width: 768px) {
    .membership-modal-content {
        width: 95%;
        max-height: 80vh;
    }
    
    .membership-plans {
        gap: 10px;
    }
    
    .membership-plan {
        min-width: 240px;
        padding: 15px;
    }
    
    .membership-plan-price {
        font-size: 1.8rem;
    }
    
    .membership-benefits {
        padding: 15px;
    }
    
    .membership-benefit {
        padding: 10px 12px;
    }
}

/* PayPal 按钮容器样式 */
#paypal-button-container {
    width: 100%;
    margin-top: 20px;
    min-height: 50px; /* Ensure space is allocated */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 计划选择按钮样式 - 三个按钮布局优化 */
.plan-selection {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.plan-button {
    padding: 12px 10px;
    border: 2px solid var(--border-color, #e7e7e7);
    background: var(--bg-light, #fff);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    flex: 1 1 100%; /* 移动端默认每行一个按钮 */
    min-width: 100px;
    margin: 0;
    font-weight: bold;
    font-size: 0.9rem;
    font-family: 'Inter', system-ui, sans-serif;
    letter-spacing: 0.01em;
}

/* 平板和小型电脑屏幕 */
@media (min-width: 576px) {
    .plan-button {
        flex: 1 1 30%; /* 三个按钮并排 */
        font-size: 0.925rem;
    }
}

/* 大型电脑屏幕 */
@media (min-width: 992px) {
    .plan-button {
        padding: 14px 18px;
        font-size: 1rem;
    }
}

.plan-button.active {
    border-color: var(--primary-color, #0070ba);
    background: var(--primary-light, #f0f8ff);
    font-weight: 700;
    transform: scale(1.03); /* 轻微放大增强视觉层级 */
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.2);
}

.plan-button:hover {
    border-color: var(--primary-color, #0070ba);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 会员状态样式 */
.membership-status {
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 5px;
    font-size: 0.9em;
}

.membership-status.active {
    background-color: var(--success-light, #e6f7d9);
    color: var(--success-dark, #2a9d8f);
    border: 1px solid var(--success-dark, #2a9d8f);
}

/* 会员卡片标题优化 */
.membership-title {
  font-family: 'Montserrat', sans-serif; /* 或更现代的无衬线字体 */
  font-weight: 800; /* 更粗更显眼 */
  font-size: calc(1.5rem + 1vw); /* 响应式字号 */
  background: linear-gradient(135deg, #FF3B30, #FF9AB3); /* 更生动的渐变 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em; /* 轻微负间距更时尚 */
  line-height: 1.2;
}

/* 节省提示样式 */
.plan-savings {
    display: block;
    font-size: 0.75rem;
    color: #28a745;
    margin-top: 5px;
    font-weight: 500;
}

/* 会员卡片视图控制 - 根据是否激活切换显示 */
.membership-card:not(.is-member-active) .membership-active-view {
    display: none;
}

.membership-card.is-member-active .membership-upgrade-view {
    display: none;
}

/* 默认情况下激活视图是隐藏的 */
.membership-active-view {
    display: none;
}

/* 当会员卡片有is-member-active类时显示激活视图 */
.membership-card.is-member-active .membership-active-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* background-color: #ffffff; */ /* REMOVED - conflict */
    background-color: transparent; /* Ensure transparent background */
    border-radius: 12px; /* Keep radius for now, can adjust if needed */
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); */ /* REMOVED - conflict */
    box-shadow: none; /* Ensure no shadow */
    overflow: hidden;
    padding: 20px; /* Keep padding for now */
    /* animation: fadeIn 0.5s ease-in-out; */ /* REMOVED - animation handled by visibility toggle */
}

/* 激活视图顶部 */
.membership-active-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.active-membership-image {
    width: 60px;
    height: 60px;
    margin-right: 15px;
    z-index: 1;
    mix-blend-mode: multiply;
    background-color: transparent !important;
    object-fit: contain !important; /* 改为 contain 确保不裁剪透明区域 */
    filter: contrast(1.05); /* 增加一点对比度帮助透明度识别 */
    image-rendering: -webkit-optimize-contrast; /* 提高图像渲染质量 */
    -webkit-background-clip: padding-box; /* 处理WebKit浏览器透明度问题 */
    background-clip: padding-box;
    border: none !important; /* 确保没有边框 */
    box-shadow: none !important; /* 确保没有阴影 */
}

.membership-active-status {
    flex: 1;
}

.membership-active-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #ff7a18, #af002d);
    color: #fff;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(255, 122, 24, 0.3);
}

.membership-active-badge i {
    margin-right: 8px;
    color: gold;
}

/* 会员详情部分 */
.membership-active-details {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px 0;
    background-color: transparent; /* 保持背景透明 */
}

.membership-active-plan,
.membership-active-expiry {
    display: flex;
    align-items: center;
    background-color: transparent; /* 移除背景 */
    border-radius: 0; /* 移除圆角 */
    padding: 10px 0; /* 调整内边距 */
    border: none; /* 移除边框 */
    box-shadow: none; /* 移除阴影 */
}

.detail-label {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: #666;
    margin-right: 12px;
    min-width: 110px;
}

.detail-label i {
    margin-right: 8px;
    color: #ff7a18;
}

.detail-value {
    font-weight: 600;
    color: #333;
    text-transform: capitalize;
}

#active-membership-expiry {
    color: #28a745;
}

/* 激活的会员特权列表 */
.membership-active-features {
    margin-top: 10px;
    padding: 15px 0;
    display: flex;
    justify-content: center; /* 水平居中 */
}

.active-feature {
    display: flex;
    align-items: center;
    justify-content: center; /* 水平居中 */
    margin: 8px 0;
    text-align: center; /* 文本居中 */
}

.active-feature i {
    color: #28a745;
    margin-right: 10px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .membership-active-header {
        flex-direction: column;
        text-align: center;
    }
    
    .active-membership-image {
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .membership-active-plan,
    .membership-active-expiry {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .detail-label {
        margin-right: 0;
        margin-bottom: 5px;
    }
}

/* 会员卡片加载状态 */
.membership-card.loading {
    position: relative;
    pointer-events: none;
}

.membership-card.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    z-index: 5;
}

.membership-card.loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #ff7a18;
    border-radius: 50%;
    z-index: 10;
    animation: spin 1s linear infinite;
}

/* 会员状态样式 */
.membership-status.expired {
    color: #dc3545 !important;
}

/* 新增：续费按钮容器样式 */
.membership-renew-action {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
}

/* 新增：续费按钮使用 me-save-btn 的样式，但可以微调 */
#renew-membership-button {
    /* 可以保留 me-save-btn 的大部分样式 */
    /* 如果需要细微调整，可以在这里覆盖 */
    padding: 12px 30px; /* 稍微调整内边距 */
    font-size: 1rem;    /* 调整字号 */
    min-width: 150px;   /* 调整最小宽度 */
}

/* 响应式调整续费按钮 */
@media (max-width: 768px) {
    .membership-renew-action {
        margin-top: 15px;
        padding-top: 10px;
    }
    #renew-membership-button {
        width: 100%; /* 移动端占满宽度 */
        padding: 14px; /* 移动端内边距 */
    }
}

/* 升级提示横幅 */
.membership-upgrade-prompt {
    padding: 12px 20px; /* 减少垂直 padding */
    background: linear-gradient(135deg, rgba(255, 242, 242, 0.8), rgba(245, 245, 255, 0.8));
    border-radius: 12px;
    text-align: center;
    margin-bottom: 15px; /* 与下方可能展开的内容间距 */
    border: 1px solid rgba(255, 182, 193, 0.3);
}

.membership-upgrade-prompt p {
    margin: 0 0 15px 0;
    color: var(--text-color-secondary, #666);
    font-weight: 500;
}

/* 升级横幅按钮使用现有样式 */
#expand-upgrade-view-btn {
    /* YouTube风格按钮 - 简洁锐利 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px; /* 适中的图标间距 */
    padding: 8px 16px; /* 适中的内边距 */
    border-radius: 2px; /* YouTube风格的较小圆角 */
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2px;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s, transform 0.1s;
    cursor: pointer;
    min-width: auto; /* 自适应内容宽度 */
    box-shadow: none; /* 无阴影，保持锐利感 */
    border: none;
    
    /* YouTube风格颜色 */
    background-color: rgba(0, 0, 0, 0.05);
    color: #0f0f0f;
    
    /* 移除渐变和花哨效果 */
    background-image: none;
    overflow: visible;
    position: relative;
}

#expand-upgrade-view-btn:hover {
    background-color: rgba(0, 0, 0, 0.1);
    transform: none; /* 移除位移动画 */
    box-shadow: none;
}

#expand-upgrade-view-btn:active {
    background-color: rgba(0, 0, 0, 0.15);
    transform: scale(0.98);
    color: #0f0f0f;
}

#expand-upgrade-view-btn i {
    font-size: 16px;
    transition: transform 0.2s;
}

#expand-upgrade-view-btn.active i {
    transform: rotate(180deg);
}

/* 按钮文本过渡效果 */
#expand-upgrade-view-btn.text-transitioning span {
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 100ms ease-out, transform 100ms ease-out;
}

#expand-upgrade-view-btn span {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 150ms ease-in, transform 150ms ease-in;
    font-family: 'Roboto', 'Arial', sans-serif; /* YouTube使用的字体 */
}

/* 控制视图显隐和展开/收起的基础样式 - 使用 YouTube 风格动画 */
.membership-upgrade-view,
.membership-active-view,
.membership-options-container {
    /* 基础设置 */
    overflow: visible; /* Changed from hidden */
    opacity: 1; /* Changed from 0 */
    pointer-events: auto; /* Ensure it's interactive */
    will-change: auto; /* Revert from specific properties */
    
    /* 高度相关设置 */
    max-height: none; /* Changed from 0, allow content to define height */
    padding-top: 20px; /* Default padding, adjust as needed */
    padding-bottom: 20px; /* Default padding, adjust as needed */
    margin-top: 15px; /* Default margin, adjust as needed */
    margin-bottom: 0;
    
    /* 移除初始的transform和transition，因为现在是静态显示 */
    /* transform: translateY(-20px) scale(0.98); */
    /* transform-origin: top center; */
    /* transition: 
        transform 250ms cubic-bezier(0.33, 0, 0, 1),
        opacity 200ms cubic-bezier(0.33, 0, 0, 1),
        max-height 300ms cubic-bezier(0.33, 0, 0, 1),
        padding 250ms cubic-bezier(0.33, 0, 0, 1),
        margin 250ms cubic-bezier(0.33, 0, 0, 1),
        visibility 0s linear 300ms; */
    
    visibility: visible;
    position: relative;
    display: block; /* or flex, grid depending on inner content */
}

/* 展开/激活状态 - 这些 .expanded 和 .visible specific rules might no longer be needed if the base style is always visible */
/* .membership-active-view.visible, // Consider removing or adjusting if base style is now always visible
.membership-upgrade-view.expanded, // Consider removing or adjusting
.membership-options-container.expanded { // Consider removing or adjusting
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    max-height: 2500px; 
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 15px;
    transform: translateY(0) scale(1);
    transition: 
        transform 300ms cubic-bezier(0.05, 0.7, 0.1, 1),
        opacity 250ms cubic-bezier(0.05, 0.7, 0.1, 1),
        max-height 400ms cubic-bezier(0.05, 0.7, 0.1, 1),
        padding 300ms cubic-bezier(0.05, 0.7, 0.1, 1),
        margin 300ms cubic-bezier(0.05, 0.7, 0.1, 1),
        visibility 0s linear 0s;
} */

.membership-options-container.expanded {
    padding-top: 22px; /* 展开时添加内边距 */
    border-top: 1px solid rgba(226, 232, 240, 0.8); /* 展开时显示边框 */
}


/* 微调按钮旋转动画 */
#expand-upgrade-view-btn i,
#renew-membership-button i { /* Assuming renew might get an icon */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* JS 控制按钮状态时添加 active 类 */
#expand-upgrade-view-btn.active i,
#renew-membership-button.active i {
    transform: rotate(180deg);
}

/* 选项容器作为独立元素的特殊样式 */
.membership-options-container {
    margin-top: 15px;
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 15px;
    /* 增加一些内边距 */
    padding: 15px;
    /* 确保居中对齐 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 计划选择容器样式调整 */
.plan-selection {
    width: 80%; /* 设置为80%宽度 */
    max-width: 600px; /* 设置最大宽度 */
    margin: 0 auto; /* 居中显示 */
    display: flex;
    flex-direction: column;
    gap: 10px; /* 按钮之间的间距 */
    padding: 0 5px; /* 添加内边距，为激活状态的按钮提供更多空间 */
}

/* PayPal按钮容器宽度调整 */
#paypal-button-container {
    width: 80%;
    max-width: 600px;
    margin: 15px auto;
}

/* 测试按钮样式统一 */
.test-payment-btn {
    width: 80% !important;
    max-width: 600px !important;
    margin: 10px auto !important;
    display: block !important;
}

/* 计划按钮本身的样式微调 */
.plan-button {
    border-radius: 8px;
    transition: transform 0.2s;
}

.plan-button:hover {
    transform: translateY(-2px);
}

/* 响应式调整 - 在小屏幕上增加宽度百分比 */
@media (max-width: 600px) {
    .plan-selection,
    #paypal-button-container,
    .test-payment-btn {
        width: 90%;
    }
}

/* 当 JS 添加相应 class 时显示并展开 */
.membership-upgrade-prompt.visible,
.membership-active-view.visible,
.membership-upgrade-view.expanded,
.membership-options-container.expanded {
    max-height: 2000px; 
    opacity: 1;
    /* 确保内容显示 */
    display: block;
    visibility: visible;
    /* 添加过渡动画 */
    transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;
}

/* 展开视图的顶部间距 */
.membership-upgrade-view.expanded {
    margin-top: 15px; 
}

/* 响应式调整 */
@media (max-width: 768px) {
    .membership-upgrade-prompt.visible,
    .membership-active-view.visible,
    .membership-upgrade-view.expanded,
    .membership-options-container.expanded {
        max-height: 2500px; 
    }
    
    /* 移动端选项容器可能需要更多间距 */
    .membership-options-container {
        margin-top: 10px;
        padding-top: 10px;
    }
}

/* 活跃会员视图特殊样式 */
.membership-active-view.visible {
    /* 确保高度足够 */
    min-height: 200px;
    /* 确保内容可见 */
    display: block !important;
    visibility: visible !important;
    /* 添加更好的视觉效果 */
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 活跃会员徽章样式增强 */
.membership-active-badge {
    background: linear-gradient(135deg, #ffd700, #f5a623);
    color: #333;
    border-radius: 20px;
    padding: 4px 12px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* ========================================= */
/* Membership Section Redesign (Robinhood Inspired) */
/* ========================================= */

/* Overall Membership Section */
.membership-section {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-bottom: 28px;
    box-shadow: none;
    border: none;
    overflow: hidden;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.21, 0.61, 0.35, 1);
}

.membership-section:hover {
    transform: none;
    box-shadow: none;
}

.membership-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    z-index: 1;
}

.membership-section * {
    position: relative;
    z-index: 2;
}

.membership-section .section-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1e293b;
    padding: 18px 22px;
    margin: 0;
    border-bottom: none;
    background-color: transparent;
    letter-spacing: 0.2px;
}

.membership-section .section-title::after {
    display: none;
}

/* General Card Container */
.membership-card {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    border: none;
    position: relative;
}

/* Upgrade Prompt Banner - 查看会员计划 - This is what shows initially */
.membership-upgrade-prompt {
    padding: 12px 20px; /* 减少垂直 padding */
    background: linear-gradient(to right, rgba(252, 245, 250, 0.7), rgba(248, 250, 252, 0.7));
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    border: none;
    transition: all 0.35s cubic-bezier(0.21, 0.61, 0.35, 1);
    overflow: hidden;
    max-height: 500px;
    opacity: 1;
}

.membership-upgrade-prompt p {
    color: #334155;
    font-weight: 500;
    font-size: 0.95rem;
    margin: 0;
    flex: 1;
}

#expand-upgrade-view-btn {
    background: linear-gradient(135deg, var(--accent-color-medium, #FF9AB3), var(--accent-color-deep, #FF3B30));
    color: white;
    font-weight: 500;
    padding: 9px 18px;
    border-radius: 8px;
    transition: all 0.35s cubic-bezier(0.21, 0.61, 0.35, 1);
    border: none;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.25);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, box-shadow;
}

#expand-upgrade-view-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    z-index: 1;
    opacity: 0;
    transition: opacity 0.35s ease;
}

#expand-upgrade-view-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 15px rgba(255, 59, 48, 0.3);
}

#expand-upgrade-view-btn:hover::before {
    opacity: 1;
}

#expand-upgrade-view-btn:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.2);
}

#expand-upgrade-view-btn span {
    position: relative;
    z-index: 2;
}

/* Upgrade View - The expanded view with plans */
.membership-upgrade-view {
    padding: 25px 22px 15px 22px;
    margin-bottom: 10px;
    background: transparent;
    max-height: none; /* Ensure it can expand to content height */
    opacity: 1; /* Fully visible */
    overflow: visible; /* Ensure content is not clipped */
    transform: none; /* No scaling or translation */
    transform-origin: top center;
    pointer-events: auto; /* Element is interactive */
    visibility: visible; /* Element is visible */
    will-change: auto; /* Reset will-change as transitions are removed */
    flex-shrink: 0;
    display: flex; /* Using flex for internal layout */
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 15px; /* Consistent top margin */
}

.membership-upgrade-view.expanded {
    max-height: 2500px; /* Ensure enough height */
    opacity: 1;
    transform: scaleY(1) translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s 0s;
}

/* Remove intermediate card content styling */
.membership-upgrade-view .membership-card-content {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    width: 100%; /* Ensure it takes full width if still present */
    text-align: center; /* Center content */
}

/* Image styling adjustments */
.membership-image { /* Styles specific to the upgrade view image */
    width: 100%;
    max-width: 280px; /* Slightly smaller max-width */
    height: auto;
    border-radius: 12px; /* Softer radius */
    margin: 0 auto 25px auto; /* Adjusted margin */
    /* Keep transparency fixes and animation */
    mix-blend-mode: multiply;
    background-color: transparent !important;
    object-fit: contain !important;
    filter: contrast(1.05);
    image-rendering: -webkit-optimize-contrast;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: none !important;
    box-shadow: none !important;
    animation: subtleFloat 6s ease-in-out infinite;
    /* Remove perspective/rotate for a flatter look */
    transform: none;
    transform-style: flat;
    transition: transform 0.4s ease;
}

.membership-upgrade-view:hover .membership-image {
    transform: translateY(-4px); /* Subtle lift on hover */
}

/* Badge styling */
.membership-upgrade-view .membership-badge {
    margin-bottom: 15px; /* Reduced margin */
    font-size: 0.9rem;
    padding: 6px 15px;
}

/* Title styling */
.membership-upgrade-view .membership-title {
    font-size: 1.6rem; /* Adjusted size */
    margin-bottom: 12px;
    color: #1e293b; /* Darker color for better contrast */
    text-shadow: none; /* Remove text shadow */
    background: none; /* Remove gradient */
    -webkit-text-fill-color: unset;
    font-weight: 700;
    line-height: 1.3;
}

/* Description styling */
.membership-upgrade-view .membership-description {
    font-size: 0.95rem;
    color: #475569; 
    margin-bottom: 25px;
    max-width: 450px; 
    line-height: 1.6;
    text-align: center; /* Added to center the text within the description block */
}

/* Features styling - Redesign as a single column list */
.membership-upgrade-view .membership-features {
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px 10px; 
    margin-bottom: 25px; 
    width: 100%;
    /* text-align: left; Removed, alignment will be handled by individual feature items or inherited */
}

.membership-upgrade-view .membership-feature {
    display: flex;
    align-items: center;
    justify-content: center; /* Added to center icon and text within each feature item */
    padding: 5px 0; 
    border-radius: 0;
    background: none;
    border: none;
    box-shadow: none;
    transition: none;
    /* width: 100%; Let grid control width */
}

.membership-upgrade-view .membership-feature:hover {
    background: none;
    transform: none;
    border-color: none;
    box-shadow: none;
}

.membership-upgrade-view .membership-feature i {
    margin-right: 12px;
    font-size: 1.2rem; /* Slightly larger icons */
    color: var(--accent-color-medium, #FF9AB3); /* Use theme color */
    filter: none; /* Remove drop shadow */
    width: 25px; /* Fixed width for alignment */
    text-align: center;
}

.membership-upgrade-view .membership-feature span {
    font-size: 0.9rem;
    color: #334155; /* Consistent text color */
}


/* Active View - Redesigned for Minimalism and Intuition */
.membership-active-view {
    padding: 0; /* 移除外部 padding */
    background: transparent;
    transition: max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.45s ease-in-out, 
                transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 0;
    opacity: 0; 
    overflow: hidden;
    transform: translateY(-8px); /* 初始向上偏移一点，制造弹出感 */
    will-change: transform, opacity, max-height;
    border-top: 1px solid transparent; /* 准备过渡边框 */
}

.membership-active-view.visible {
    /* ... existing styles ... */
    /* 修改背景为从上到下渐变透明 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0) 100%);
    border-top: none; /* 移除顶部实线边框 */
    
    /* 可选：添加一个非常柔和的顶部内阴影来模拟轻微的分界 */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
    
    /* 确保其他过渡和样式保持不变 */
    display: block;
    max-height: 2000px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    /* transition: ... keep existing transitions ... */
}

/* Active Header - Slightly cleaner */
.membership-active-header {
    position: relative;
    padding: 20px 22px; /* 调整 padding */
    background: linear-gradient(135deg, rgba(253, 242, 250, 0.6), rgba(248, 250, 252, 0.7)); /* 更淡雅的背景 */
    border-bottom: 1px solid rgba(226, 232, 240, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* ... existing styles ... */
    /* 移除或调整背景，避免与 active-view 的渐变冲突 */
    background: transparent; 
    border-bottom: 1px solid rgba(226, 232, 240, 0.5); /* 使边框更淡 */
}

.membership-active-header::before {
     background: radial-gradient(circle at top right, rgba(244, 114, 182, 0.06), transparent 70%); /* 更淡的装饰 */
}

.active-membership-image {
    width: 100%;
    max-width: 320px;
    height: auto;
    border-radius: 16px;
    margin-bottom: 18px; /* 调整间距 */
    transition: transform 0.6s cubic-bezier(0.21, 0.61, 0.35, 1), 
                box-shadow 0.6s cubic-bezier(0.21, 0.61, 0.35, 1);
    box-shadow: 0 8px 30px rgba(244, 114, 182, 0.12),
                0 1px 3px rgba(0, 0, 0, 0.05),
                0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    transform: perspective(1000px) rotateX(3deg);
    transform-style: preserve-3d;
    will-change: transform, box-shadow;
    aspect-ratio: 1.586 / 1;
    object-fit: cover;
    background: none; /* 已移除背景 */
    animation: subtleFloat 6s ease-in-out infinite; /* 保留动画 */
}

.membership-active-header:hover .active-membership-image {
    transform: perspective(1000px) rotateX(0deg) translateY(-7px);
    box-shadow: 0 15px 35px rgba(244, 114, 182, 0.15),
                0 2px 5px rgba(0, 0, 0, 0.05),
                0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

.membership-active-status {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.membership-active-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-color-medium, #FF9AB3), var(--accent-color-deep, #FF3B30));
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 0.85rem;
    box-shadow: 0 4px 10px rgba(255, 59, 48, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.membership-active-badge i {
    margin-right: 6px;
    font-size: 0.9rem;
}

/* Details Section - Cleaner look */
.membership-active-details {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px; /* 减少间距 */
    background-color: rgba(255, 255, 255, 0.5); /* 半透明白色背景增加层次 */
    /* ... existing styles ... */
    /* 确保背景透明以显示下层渐变 */
    background-color: transparent; /* 移除背景 */
}

.membership-active-plan,
.membership-active-expiry {
    display: flex;
    align-items: center;
    background-color: transparent; /* 移除背景 */
    border-radius: 8px;
    padding: 10px 0; /* 调整 padding */
    border: none; /* 移除边框 */
    transition: none; /* 移除 hover 效果 */
    box-shadow: none; /* 移除阴影 */
}

.membership-active-plan:hover,
.membership-active-expiry:hover {
    transform: none;
    box-shadow: none;
}

.detail-label {
    font-weight: 400; /* 正常字重 */
    color: #64748b;
    margin-right: 10px;
    min-width: 90px;
    font-size: 0.9rem;
}

.detail-label i {
    color: #94a3b8;
    font-size: 1rem;
    margin-right: 6px;
}

.detail-value {
    font-weight: 500; /* 中等字重 */
    color: #334155;
    font-size: 0.95rem;
}

#active-membership-expiry {
    color: var(--accent-color-deep, #FF3B30);
    font-weight: 600;
}

.membership-active-features {
    margin-top: 5px;
    padding: 0 22px 15px;
}

.active-feature {
    display: flex;
    align-items: center;
    margin: 10px 0;
    font-size: 0.9rem;
    color: #475569;
}

.active-feature i {
    color: var(--accent-color-medium, #FF9AB3);
    margin-right: 10px;
    font-size: 1rem;
}

/* Renew Button */
.membership-renew-action {
    margin: 0;
    padding: 0 22px 25px;
    text-align: center;
}

#renew-membership-button {
    background: linear-gradient(135deg, var(--accent-color-medium, #FF9AB3), var(--accent-color-deep, #FF3B30));
    color: white;
    font-weight: 500;
    padding: 10px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.2);
    transition: all 0.35s cubic-bezier(0.21, 0.61, 0.35, 1);
    border: none;
    font-size: 0.95rem;
    min-width: 150px;
    position: relative;
    overflow: hidden;
}

#renew-membership-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    z-index: 1;
    opacity: 0;
    transition: opacity 0.35s ease;
}

#renew-membership-button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 16px rgba(255, 59, 48, 0.3);
}

#renew-membership-button:hover::before {
    opacity: 1;
}

#renew-membership-button:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.2);
}

/* Options Container for Plan Selection */
.membership-options-container {
    padding: 0 15px 15px;
    background: transparent;
    border-top: 1px solid rgba(226, 232, 240, 0.8); 
    padding-top: 22px; 
    /* transitions removed */
    /* max-height: 2000px; */ /* Now handled by the general rule or auto */
    /* opacity: 1; */ /* Now handled by the general rule */
    overflow: visible; 
    /* transform: translateY(0); */ /* Now handled by the general rule (or no transform) */
    will-change: auto;
    display: flex; /* Keep flex for internal layout */
    flex-direction: column;
    align-items: center;
    margin-top: 15px; 
}

.membership-options-container.expanded {
    max-height: 2000px;
    opacity: 1;
    transform: translateY(0);
    /* 移除展开时的 padding-top 和 border-top */
    /* padding-top: 22px; */
    /* border-top: 1px solid rgba(226, 232, 240, 0.8); */
}

.plan-selection {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 450px;
    /* margin: 0 auto 20px; */ /* 调整 margin */
    margin: 15px auto 20px; /* 增加顶部 margin */
}

.plan-button {
    padding: 15px 18px;
    /* border: 1px solid rgba(226, 232, 240, 0.9); 移除边框线 */
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.21, 0.61, 0.35, 1);
    font-weight: 500;
    font-size: 0.95rem;
    color: #334155;
    text-align: left;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.01), 0 0 0 1px rgba(235, 225, 245, 0.2); /* 添加阴影模拟边界 */
    will-change: transform, box-shadow, background;
    width: calc(100% - 10px); /* 减少宽度，留出空间给激活状态的边框和阴影 */
    margin: 0 auto; /* 居中显示 */
}

.plan-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, 
                rgba(255, 230, 250, 0.5), 
                rgba(235, 225, 245, 0.3), 
                rgba(220, 240, 255, 0.3));
    opacity: 0.12;
    transition: opacity 0.35s ease;
    z-index: 0;
}

.plan-button:hover {
    /* border-color: rgba(249, 168, 212, 0.4); 移除边框颜色变化 */
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(249, 168, 212, 0.25); /* 更新阴影 */
    background: rgba(255, 255, 255, 0.9);
}

.plan-button:hover::before {
    opacity: 0.25; /* 悬停时增加渐变效果的不透明度 */
}

.plan-button.active {
    /* border-color: var(--accent-color-medium, #FF9AB3); 移除边框颜色变化 */
    background: rgba(255, 255, 255, 0.95);
    color: #1e293b;
    font-weight: 600;
    transform: translateY(-3px) scale(1.01); /* 缩小scale值，避免内容溢出 */
    box-shadow: 0 7px 15px rgba(244, 114, 182, 0.12), 0 0 0 1.5px rgba(244, 114, 182, 0.25); /* 更新阴影 */
}

.plan-button.active::before {
    opacity: 0.35; /* 激活时增加渐变效果的不透明度 */
    background: linear-gradient(135deg, 
                rgba(255, 180, 220, 0.5), 
                rgba(230, 220, 245, 0.4), 
                rgba(210, 230, 255, 0.3));
}

.plan-badge {
    position: absolute;
    top: -10px; /* Position badge slightly above the card */
    left: 12px;
    background: var(--accent-color-medium, #FF9AB3);
    color: white;
    font-size: 0.7rem; /* Smaller badge text */
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.plan-savings {
    display: block;
    font-size: 0.75rem;
    color: var(--text-color-subtle, #888); /* More subtle color */
    margin-top: auto; /* Push savings to the bottom if using flex */
    font-weight: 400;
    line-height: 1.3;
}

/* PayPal Container */
#paypal-button-container {
    width: 100%;
    max-width: 450px;
    margin: 15px auto 0;
    min-height: 40px;
}

/* Test Button Adjustments */
.test-payment-btn {
    width: 100% !important;
    max-width: 450px !important;
    margin: 12px auto 0 !important;
    display: block !important;
    padding: 10px !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #FFD56B, #FFA640) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 10px rgba(255, 166, 64, 0.25) !important;
    color: white !important;
    transition: all 0.35s cubic-bezier(0.21, 0.61, 0.35, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.test-payment-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)) !important;
    z-index: 1 !important;
    opacity: 0 !important;
    transition: opacity 0.35s ease !important;
}

.test-payment-btn:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 15px rgba(255, 166, 64, 0.3) !important;
}

.test-payment-btn:hover::before {
    opacity: 1 !important;
}

.test-payment-btn:active {
    transform: translateY(1px) scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(255, 166, 64, 0.2) !important;
}

/* Loading State */
.membership-card.loading::after {
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 0;
}

.membership-card.loading::before {
    border-top-color: var(--accent-color-medium, #FF9AB3);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .membership-upgrade-prompt {
        padding: 15px;
        flex-direction: column;
        align-items: stretch;
    }

    .membership-upgrade-prompt p {
        margin-bottom: 12px;
        text-align: center;
    }

    .section-title {
        font-size: 1.1rem;
        padding: 15px;
    }

    .membership-card-content,
    .membership-active-header,
    .membership-active-details,
    .membership-options-container {
        padding: 18px;
    }

    .membership-image,
    .active-membership-image {
        max-width: 280px;
    }

    .membership-title {
        font-size: 1.3rem;
    }

    .membership-features {
        grid-template-columns: 1fr;
    }

    .plan-selection,
    #paypal-button-container,
    .test-payment-btn {
        max-width: 100%;
    }

    #expand-upgrade-view-btn,
    #renew-membership-button {
        width: 100%;
    }
}

/* 动画增强 - 为会员卡添加更精致的3D视觉效果 */
@keyframes subtleFloat {
    0% {
        transform: translateY(0) perspective(1000px) rotateX(3deg);
    }
    50% {
        transform: translateY(-5px) perspective(1000px) rotateX(2deg);
    }
    100% {
        transform: translateY(0) perspective(1000px) rotateX(3deg);
    }
}

.membership-image,
.active-membership-image {
    animation: subtleFloat 6s ease-in-out infinite;
}

/* 添加微妙的卡片光泽效果 */
.membership-image::after,
.active-membership-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-100%);
    animation: shimmer 5s infinite;
    pointer-events: none;
}

/* 添加闪光效果动画 */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    20% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* 激活视图的默认状态和过渡 */
.membership-active-view {
    /* 保持 transform/opacity 过渡，用于手动展开/收起 */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s 0.4s;
    /* 其他基础样式不变 */
    overflow: hidden;
    opacity: 0;
    transform: scaleY(0.95) translateY(-10px);
    transform-origin: top center;
    pointer-events: none;
    visibility: hidden;
    will-change: transform, opacity;
    border-top: 1px solid transparent;
}

/* 喜欢数统计样式 - 全新设计 */
.me-likes-counter {
    display: flex;
    align-items: center;
    margin: 10px 0;
    padding: 10px 15px;
    background: linear-gradient(135deg, rgba(255, 105, 180, 0.15), rgba(255, 182, 193, 0.25));
    border-radius: 18px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.15), 
                inset 0 1px 2px rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.25);
    position: relative;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    z-index: 1;
    --random-rotate: 0deg;
    --random-scale: 1;
}

.me-likes-counter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 40%, 
                rgba(255, 192, 203, 0.4) 0%, 
                rgba(255, 105, 180, 0.1) 45%, 
                transparent 70%);
    z-index: -1;
    opacity: 0.6;
    transition: transform 0.6s ease, opacity 0.4s ease;
    transform-origin: center;
    transform: scale(var(--random-scale)) rotate(var(--random-rotate));
}

.me-likes-counter:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 20px rgba(255, 105, 180, 0.2),
                inset 0 1px 3px rgba(255, 255, 255, 0.4);
}

.me-likes-counter:hover::before {
    opacity: 1;
    transform: scale(1.2) rotate(5deg);
}

.likes-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    margin-right: 12px;
    background: linear-gradient(135deg, #ff6b8b, #ff4778);
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(255, 105, 180, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.likes-icon::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    transform: scale(0.5);
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.me-likes-counter:hover .likes-icon::after {
    opacity: 0.6;
    transform: scale(1);
    animation: iconGlow 1.5s infinite alternate;
}

.likes-icon i {
    color: white;
    font-size: 1.2rem;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
    animation: heartbeat 1.5s infinite ease-in-out;
    transform-origin: center;
}

/* 移除波纹效果样式 */

.likes-stats {
    display: flex;
    flex-direction: column;
}

.likes-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.me-likes-counter:hover .likes-label {
    letter-spacing: 0.8px;
}

.likes-count-wrapper {
    position: relative;
    height: 32px;
    overflow: hidden;
    perspective: 800px;
}

.likes-count {
    font-size: 1.6rem;
    font-weight: 700;
    background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.8));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    position: relative;
    display: inline-block;
    min-width: 25px;
    text-align: left;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: all 0.3s ease;
}

.me-likes-counter:hover .likes-count {
    transform: scale(1.05);
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.25));
}

/* 改进的数字翻转动画 */
.likes-count.animate-count {
    animation: countFlip 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes countFlip {
    0% {
        transform: translateY(-120%) rotateX(30deg);
    opacity: 0;
    }
    30% {
        opacity: 0.3;
    }
    60% {
        transform: translateY(10%) rotateX(-10deg);
    opacity: 1;
    }
    80% {
        transform: translateY(-5%) rotateX(5deg);
    }
    100% {
        transform: translateY(0) rotateX(0);
    }
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    15% {
        transform: scale(1.2);
    }
    30% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.15);
    }
    60% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes iconGlow {
    0% {
        opacity: 0.3;
    }
    100% {
        opacity: 0.8;
    }
}

/* 响应式设计 - 调整位置 */
@media (min-width: 769px) {
    /* PC 端布局 - 头像下方，个人资料上方 */
    .me-header {
        flex-direction: column;
        align-items: center;
    }
    
    .me-avatar-container {
        margin-right: 0;
        margin-bottom: 20px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .me-likes-counter {
        order: 2;
        margin: 10px auto 25px;
        width: auto;
        max-width: 180px;
    }
    
    .me-user-info {
        order: 3;
        width: 100%;
    }
}

@media (max-width: 768px) {
    /* 移动端布局 - 头像和被喜欢在左侧，邮箱性别在右侧 */
    .me-header {
        display: grid;
        grid-template-areas: 
            "avatar info"
            "likes info";
        grid-template-columns: auto 1fr;
        gap: 15px;
        align-items: start;
        padding: 20px;
    }
    
    .me-avatar-container {
        grid-area: avatar;
        margin-right: 0;
        margin-bottom: 10px;
        width: 80px;
        height: 80px;
    }
    
    .me-avatar-preview {
        width: 80px;
        height: 80px;
    }
    
    .me-likes-counter {
        grid-area: likes;
        margin: 0;
        justify-self: center;
        align-self: start;
        margin-top: 5px;
    }
    
    .me-user-info {
        grid-area: info;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }
    
    .me-user-info .me-form-group:first-of-type {
        margin-top: 0;
    }
}

/* 兼容小尺寸移动设备 */
@media (max-width: 480px) {
    .me-likes-counter {
        padding: 8px 12px;
        border-radius: 16px;
        min-width: auto;
    }
    
    .likes-icon {
        width: 30px;
        height: 30px;
        margin-right: 8px;
    }
    
    .likes-icon i {
        font-size: 0.95rem;
    }
    
    .likes-label {
        font-size: 0.6rem;
        margin-bottom: 2px;
    }
    
    .likes-count {
        font-size: 1.3rem;
    }
    
    .likes-count-wrapper {
        height: 26px;
    }
    
    .me-header {
        padding: 10px;
    }
}

.plan-button {
    display: flex; /* Use flex for internal layout */
    flex-direction: column; /* Stack elements vertically */
    align-items: flex-start; /* Align text to start */
    padding: 18px 15px 15px; /* Adjusted padding (more top for badge) */
    border: 1px solid var(--border-color-soft, #e0e0e0);
    background: var(--card-bg, #ffffff);
    border-radius: 8px; /* Slightly softer corners */
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    font-weight: 400; /* Regular weight for base text */
    font-size: 0.9rem;
    color: var(--text-color-secondary, #666);
    text-align: left;
    position: relative;
    overflow: visible; /* Allow badge to overflow slightly if needed */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
    will-change: transform, box-shadow, border-color;
    width: calc(100% - 10px); /* 减少宽度，为边框和阴影留出空间 */
    margin: 0 auto; /* 居中显示 */
}

.plan-button:hover {
    border-color: var(--accent-color-light, #FFB6C1);
    transform: translateY(-3px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.07);
    background: var(--card-bg, #ffffff); /* Keep background on hover */
}

.plan-button.active {
    border: 2px solid var(--accent-color-deep, #FF3B30);
    background: var(--card-bg, #ffffff); /* Keep background consistent */
    color: var(--text-color-primary, #333);
    font-weight: 500; /* Slightly bolder when active */
    transform: translateY(-3px) scale(1.01); /* 缩小缩放比例以避免溢出 */
    box-shadow: 0 6px 15px rgba(255, 59, 48, 0.1); /* Use accent color for active shadow */
    /* Adjust padding to account for thicker border */
    padding: 17px 14px 14px;
}

/* Add a new span for Price for better styling control */
.plan-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-color-primary, #333);
    margin: 5px 0 8px; /* Spacing around price */
}

.plan-badge {
    position: absolute;
    top: -10px; /* Position badge slightly above the card */
    left: 12px;
    background: var(--accent-color-medium, #FF9AB3);
    color: white;
    font-size: 0.7rem; /* Smaller badge text */
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.plan-savings {
    display: block;
    font-size: 0.75rem;
    color: var(--text-color-subtle, #888); /* More subtle color */
    margin-top: auto; /* Push savings to the bottom if using flex */
    font-weight: 400;
    line-height: 1.3;
}

/* ADD a specific rule to hide ONLY the avatar file input */
input#me-avatar-input {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* Prevent line breaks */
}

input#me-avatar-input[style*="display: block"] {
    position: static !important;
    height: auto;
    width: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    display: block !important; /* 强制显示 */
}

/* ADD a specific rule to hide ONLY the live photos file input */
input#me-live-photos-input {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* Prevent line breaks */
}

input#me-live-photos-input[style*="display: block"] {
    position: static !important;
    height: auto;
    width: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    display: block !important; /* 强制显示 */
}

/* Telegram风格的Tab导航布局 - 协调页面比例 */
.me-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
    background: transparent;
    padding: 0 15px; /* 稍微减少padding，给字体更多空间 */
    gap: 0; /* 移除gap，确保紧凑 */
    overflow: hidden; /* PC端也禁用滚动 */
}

/* Telegram风格的Tab按钮 - 协调页面比例 */
.me-tab-button {
    background: transparent;
    border: none;
    color: #666666;
    cursor: pointer;
    padding: 12px 18px; /* 增大内边距让字体更舒适 */
    font-size: 0.95rem; /* 稍微增大字体，更好看 */
    font-weight: 500;
    position: relative;
    transition: color 0.2s ease;
    flex: 1;
    text-align: center;
    z-index: 2;
    min-width: 0; /* 允许更紧凑的布局 */
    max-width: 100%; /* 确保不会超出容器 */
}

/* Telegram风格的悬停效果 */
.me-tab-button:hover {
    color: var(--accent-color-deep);
}

/* Telegram风格的点击反馈 */
.me-tab-button:active {
    background: transparent;
}

/* Telegram风格的激活状态 */
.me-tab-button.active {
    color: var(--accent-color-deep);
    font-weight: 600;
}

/* Telegram风格的底部滑块指示器 - 自适应宽度 */
.me-tabs::after {
    content: '';
    position: absolute;
    bottom: 4px; /* 更贴近tab按钮文字 */
    left: var(--slider-left, 0px);
    width: var(--slider-width, 25%);
    height: 3px; /* 稍微增高一些 */
    background-color: var(--accent-color-deep);
    border-radius: 2px; /* 更大的圆角 */
    transition: left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
}

/* 隐藏非活动内容面板 */
.me-tab-content {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    width: 100%; /* 确保内容宽度与tab容器一致 */
}

/* 显示活动内容面板并添加动画 */
.me-tab-content.active {
    display: block;
    animation: contentFadeIn 0.4s ease forwards;
    padding: 0; /* 移除padding，让内容与tab容器对齐 */
    width: 100%; /* 确保内容宽度与容器一致 */
}

/* 内容面板淡入动画 */
@keyframes contentFadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 为每个面板添加微妙的独特背景效果 */
#me-tab-profile.active {
    background-image: radial-gradient(circle at top right, rgba(255, 216, 180, 0.03) 0%, rgba(255, 255, 255, 0) 70%);
}

#me-tab-photos.active {
    background-image: radial-gradient(circle at top left, rgba(173, 216, 230, 0.03) 0%, rgba(255, 255, 255, 0) 70%);
}

#me-tab-security.active {
    background-image: radial-gradient(circle at bottom right, rgba(152, 251, 152, 0.03) 0%, rgba(255, 255, 255, 0) 70%);
}

#me-tab-trauma.active {
    background-image: radial-gradient(circle at bottom left, rgba(255, 218, 185, 0.03) 0%, rgba(255, 255, 255, 0) 70%);
}

#me-tab-membership.active {
    background-image: none;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

/* 调整内容面板内部元素的边距 */
.me-tab-content .me-section:first-child {
    margin-top: 0;
}

/* 调整移动端的Tab样式 */
@media (max-width: 768px) {
    .me-tabs {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        overflow: hidden; /* 完全禁用滚动 */
        overflow-x: hidden; /* 明确禁用水平滚动 */
        scrollbar-width: none;
        padding: 0 8px; /* 移动端适中的padding，与PC端比例协调 */
        margin-bottom: 20px;
        gap: 0;
        max-width: 100%; /* 确保容器不会超出父元素 */
    }

    .me-tabs::-webkit-scrollbar {
        display: none;
    }

    .me-tab-button {
        flex: 1;
        white-space: nowrap;
        padding: 6px 10px; /* 移动端适中的padding */
        font-size: 0.8rem; /* 移动端合适的字体大小，与其他元素比例协调 */
        margin-right: 0;
        text-align: center;
        min-width: 0; /* 确保不会超出容器 */
    }

    /* 移动端滑块指示器调整 */
    .me-tabs::after {
        bottom: 2px; /* 移动端更贴近文字 */
        left: var(--slider-left, 0px);
        width: var(--slider-width, 25%);
        height: 3px;
        border-radius: 2px;
        transition: left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
}

/* 对更小屏幕的额外优化 */
@media (max-width: 480px) {
    .me-tabs {
        padding: 0 4px; /* 最小屏幕适中的padding */
        overflow: hidden; /* 确保小屏幕也完全禁用滚动 */
        overflow-x: hidden; /* 明确禁用水平滚动 */
        max-width: 100%; /* 确保容器不会超出父元素 */
    }

    .me-tab-button {
        padding: 5px 6px; /* 最小屏幕适中的padding */
        font-size: 0.75rem; /* 最小屏幕合适的字体大小 */
        letter-spacing: 0;
        min-width: 0; /* 防止超出容器 */
    }

    /* 小屏幕滑块指示器调整 */
    .me-tabs::after {
        bottom: 1px; /* 小屏幕最贴近文字 */
        left: var(--slider-left, 0px);
        width: var(--slider-width, 25%);
        height: 3px;
        border-radius: 2px;
        transition: left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
}

    /* 移动端保存状态优化 */
    .me-form-input.saving::after,
    .me-form-input.save-success::after,
    .me-form-input.save-error::after {
        right: 10px;
        width: 14px;
        height: 14px;
        font-size: 12px;
    }

    .me-save-btn.saving::after,
    .me-save-btn.save-success::before,
    .me-save-btn.save-error::before {
        width: 12px;
        height: 12px;
        font-size: 14px; /* 移动端也稍微调大一点 */
    }

    .me-save-btn.saving::after {
        right: 12px;
    }

/* 重复的tab样式定义已移除，使用上面的Telegram风格统一样式 */

/* 更新 tab 内容区域样式 */
.me-tab-content {
    padding: 20px 0;
    display: none;
    animation: fadeIn 0.3s ease;
    /* 添加过渡效果 */
    position: relative;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.me-tab-content.active {
    display: block;
    /* 添加轻微阴影与发光效果增强视觉分隔 */
    box-shadow: 0 5px 20px -10px rgba(0, 0, 0, 0.02);
}

/* 重新设计表单部分，采用小红书风格 */
#me-profile-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 100%; /* 移除固定宽度限制，与tab容器对齐 */
    margin: 0 auto;
    padding: 0 20px; /* 添加内边距，与tab容器一致 */
}

/* 重新设计 section 样式 */
.me-section {
    background: transparent;
    border: none;
    box-shadow: none;
    margin-bottom: 30px;
    padding: 0;
    transition: transform 0.3s ease;
    position: relative;
}

.me-section::before {
    display: none;
}

.me-section:hover {
    transform: none;
    box-shadow: none;
}

/* 重新设计标题样式 */
.me-section-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #262626;
    margin: 0 0 25px 0;
    padding: 0 0 12px 0;
    /* border-bottom: 1px solid #efefef; 移除边缘细线 */
    background: linear-gradient(to bottom, transparent, rgba(249, 168, 212, 0.05)); /* 添加淡渐变背景融合界限 */
    border-radius: 0;
    letter-spacing: 0.5px;
    position: relative;
}

.me-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px; /* 增加宽度 */
    height: 3px; /* 增加高度更明显 */
    background: linear-gradient(90deg, var(--accent-color-medium, #FF9AB3), transparent); /* 渐变透明效果 */
    border-radius: 3px;
    /* transform: translateY(50%); 移除位移 */
}

/* 重新设计表单元素 */
.me-form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
    position: relative;
    transition: transform 0.3s ease;
}

.me-form-group:hover {
    transform: translateX(5px);
}

.me-form-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #8e8e8e;
    letter-spacing: 0.2px;
    text-transform: none;
    display: block;
}

.me-form-input,
#me-profile-form select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #efefef;
    border-radius: 8px;
    font-size: 1rem;
    color: #262626;
    background-color: #fafafa;
    transition: all 0.3s ease;
    appearance: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.me-form-input:focus,
#me-profile-form select:focus {
    outline: none;
    border-color: #b2b2b2;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* 设置只读表单元素的样式 */
.me-form-group.readonly .me-form-input {
    background-color: #f8f8f8;
    color: #8e8e8e;
    border-color: #efefef;
    cursor: not-allowed;
}

/* 身高输入框容器样式 */
.me-height-input-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 国籍验证状态样式 */
.verification-status .status-text {
    display: inline-block;
    margin-left: 5px;
    color: inherit;
    font-size: 0.9em;
    vertical-align: middle;
    opacity: 0.95;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* 状态文本显示规则，与JS配合使用 */
.verification-status .status-text.visible {
    display: inline-block;
    animation: fadeIn 0.3s ease-in-out;
}

/* Icon styling remains */
.verification-status.pending i {
    color: #f39c12;
}

.verification-status.verified i {
    color: #2ecc71;
}

.verification-status.failed i {
    color: #e74c3c;
}

/* 保存按钮样式 */
.me-save-button-container {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.me-save-btn {
    border: none;
    background: linear-gradient(45deg, #ff6b94, #ff9777);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    padding: 12px 40px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(255, 107, 148, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.me-save-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 107, 148, 0.3);
}

.me-save-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255, 107, 148, 0.2);
}

.me-save-btn:disabled {
    background: #e0e0e0;
    cursor: not-allowed;
    box-shadow: none;
}

/* 修改移动端样式 */
@media (max-width: 768px) {
    .me-tabs {
        display: flex;
        overflow-x: auto;
        padding-bottom: 10px;
        margin-bottom: 20px;
        border-bottom: 1px solid #efefef;
        scrollbar-width: none;
    }
    
    .me-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .me-tab-button {
        white-space: nowrap;
        padding: 10px 15px;
        font-size: 0.9rem;
    }
    
    .me-tab-button.active::after {
        width: 30px;
    }
    
    .me-section-title {
        font-size: 1.2rem;
        margin-bottom: 20px;
    }
    
    .me-form-group {
        margin-bottom: 15px;
    }
    
    .me-form-input,
    #me-profile-form select {
        padding: 10px 14px;
    }
    
    .me-save-btn {
        width: 100%;
        padding: 12px 20px;
    }
}

/* 添加 profile-info-header 的样式 */
.profile-info-header {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px dashed #f0f0f0;
}

/* 用户信息区域样式 */
.me-user-info {
    flex: 1;
}

/* 表单网格布局 */
.me-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

/* 头像容器样式 */
.me-avatar-container {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

/* 头像预览样式 */
.me-avatar-preview {
    width: 120px; /* 固定宽度确保是正方形 */
    height: 120px; /* 固定高度等于宽度 */
    border-radius: 50%;
    object-fit: cover;
    background-color: #f8f8f8;
    border: 2px solid #fff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: all 0.3s ease;
}

/* 头像编辑图标样式 */
.me-avatar-edit-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(45deg, #ff6b94, #ff9777);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    opacity: 0.9;
    transition: all 0.3s ease;
    z-index: 2;
}

.me-avatar-edit-icon:hover {
    transform: scale(1.1);
    opacity: 1;
}

.me-avatar-edit-icon i {
    font-size: 15px;
}

/* 隐藏内容样式 */
.hidden-content {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.hidden-content[style*="display: block"] {
    position: static !important;
    height: auto;
    width: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    display: block !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .profile-info-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    
    .me-form-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .me-user-info {
        width: 100%;
    }
    
    .me-form-group:hover {
        transform: none;
    }
}

/* 炫酷效果：头像悬停时微光动画 */
.me-avatar-preview:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(255, 107, 148, 0.25);
}

.me-avatar-preview::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.2) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    animation: shimmer 3s infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0% { left: -150%; }
    70% { left: 150%; }
    100% { left: 150%; }
}

/* 小红书风格的表单样式增强 */
.me-form-group:nth-child(odd) .me-form-input {
    background-color: #fdf7f9;
}

.me-form-group:nth-child(even) .me-form-input {
    background-color: #f8fafb;
}

.me-form-input:focus {
    transform: translateY(-2px);
}

/* 提交按钮的额外动画效果 */
.me-save-btn {
    position: relative;
    overflow: hidden;
}

.me-save-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    transition: all 0.5s ease;
}

.me-save-btn:hover::before {
    left: 100%;
    transition: 0.7s ease-in-out;
}

/* 让表单元素在页面加载时有入场动画 */
.me-form-group {
    opacity: 0;
    transform: translateY(10px);
    animation: formItemFadeIn 0.5s ease forwards;
}

@keyframes formItemFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 为每个表单元素设置不同的延迟 */
.me-form-group:nth-child(1) { animation-delay: 0.1s; }
.me-form-group:nth-child(2) { animation-delay: 0.2s; }
.me-form-group:nth-child(3) { animation-delay: 0.3s; }
.me-form-group:nth-child(4) { animation-delay: 0.4s; }
.me-form-group:nth-child(5) { animation-delay: 0.5s; }
.me-form-group:nth-child(6) { animation-delay: 0.6s; }

/* 移动端安全(security)标签页的优化 */
@media (max-width: 768px) {
    /* 安全区域整体容器 */
    #me-tab-security .me-section {
        padding: 15px 12px;
        background: linear-gradient(160deg, rgba(245,250,245,0.6) 0%, rgba(240,248,240,0.3) 100%);
        border-radius: 16px;
        box-shadow: 0 2px 15px rgba(0,0,0,0.03);
        margin-bottom: 20px;
    }

    /* 安全区域标题 */
    #me-tab-security .me-section-title {
        font-size: 1.2rem;
        text-align: left;
        margin-bottom: 18px;
        border-bottom: 1px dashed rgba(144,238,144,0.4);
        padding-bottom: 12px;
        color: #2E8B57;
    }

    /* 密码切换按钮 */
    #me-tab-security .me-password-toggle {
        padding: 5px 0 15px 0;
        display: flex;
        justify-content: center;
    }

    #me-tab-security .me-toggle-password-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: rgba(144,238,144,0.2);
        border-radius: 8px;
        color: #2E8B57;
        font-weight: 500;
        font-size: 0.9rem;
        transition: all 0.3s ease;
    }

    #me-tab-security .me-toggle-password-btn:hover {
        background: rgba(144,238,144,0.3);
        transform: translateY(-2px);
    }

    #me-tab-security .me-toggle-password-btn i {
        transition: transform 0.3s ease;
        font-size: 0.8rem;
    }

    #me-tab-security .me-toggle-password-btn.active i {
        transform: rotate(180deg);
    }

    /* 密码表单容器 */
    #me-tab-security .me-password-form {
        background: rgba(255,255,255,0.8);
        border-radius: 12px;
        padding: 18px 15px;
        margin-top: 5px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        border: 1px solid rgba(144,238,144,0.2);
        transition: all 0.3s ease;
    }

    /* 隐藏密码表单 */
    #me-tab-security .me-password-form.hidden-content {
        height: 0;
        padding: 0;
        margin: 0;
        opacity: 0;
        overflow: hidden;
        border: none;
    }

    /* 密码表单组样式 */
    #me-tab-security .me-password-form .me-form-group {
        margin-bottom: 18px;
        padding: 0;
        background: transparent;
        border-left: none;
    }

    /* 密码表单标签 */
    #me-tab-security .me-password-form .me-form-label {
        font-size: 0.9rem;
        margin-bottom: 8px;
        color: #2E8B57;
        font-weight: 500;
    }

    /* 密码输入框样式 */
    #me-tab-security .me-password-form .me-form-input {
        background-color: white;
        border: 1px solid rgba(144,238,144,0.3);
        padding: 12px 15px;
        border-radius: 8px;
        font-size: 0.95rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.02);
        transition: all 0.3s ease;
    }

    #me-tab-security .me-password-form .me-form-input:focus {
        border-color: #2E8B57;
        box-shadow: 0 3px 8px rgba(144,238,144,0.2);
        transform: translateY(-2px);
    }

    /* 密码强度指示器 */
    #me-tab-security .me-password-strength {
        height: 6px;
        border-radius: 3px;
        background: rgba(0,0,0,0.05);
        margin-top: 10px;
        position: relative;
        overflow: hidden;
    }

    #me-tab-security .me-password-strength::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        border-radius: 3px;
        transition: all 0.3s ease;
    }

    #me-tab-security .me-password-strength span {
        display: block;
        margin-top: 8px;
        font-size: 0.8rem;
        text-align: right;
        transition: all 0.3s ease;
    }

    /* 密码强度状态 */
    #me-tab-security .me-password-strength.weak::before { 
        background-color: #ff6b6b; 
        width: 33%; 
        box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
    }
    
    #me-tab-security .me-password-strength.medium::before { 
        background-color: #ffd166; 
        width: 66%;
        box-shadow: 0 0 10px rgba(255, 209, 102, 0.5);
    }
    
    #me-tab-security .me-password-strength.strong::before { 
        background-color: #06d6a0; 
        width: 100%;
        box-shadow: 0 0 10px rgba(6, 214, 160, 0.5);
    }

    /* 密码操作按钮区域 */
    #me-tab-security .me-password-actions {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }

    /* 密码更改按钮 */
    #me-tab-security .me-change-password-btn {
        background: linear-gradient(45deg, #2E8B57, #3CB371);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 12px 25px;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 3px 10px rgba(46, 139, 87, 0.2);
        width: 100%;
        max-width: 250px;
    }

    #me-tab-security .me-change-password-btn:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(46, 139, 87, 0.3);
    }

    #me-tab-security .me-change-password-btn:active:not(:disabled) {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(46, 139, 87, 0.2);
    }

    #me-tab-security .me-change-password-btn:disabled {
        background: #e0e0e0;
        cursor: not-allowed;
        box-shadow: none;
    }
}

/* 对更小屏幕的额外优化 */
@media (max-width: 480px) {
    #me-tab-security .me-section {
        padding: 12px 10px;
    }

    #me-tab-security .me-section-title {
        font-size: 1.1rem;
        padding-bottom: 10px;
        text-align: left;
    }

    #me-tab-security .me-toggle-password-btn {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    #me-tab-security .me-password-form {
        padding: 15px 12px;
    }

    #me-tab-security .me-password-form .me-form-input {
        padding: 10px 12px;
        font-size: 0.9rem;
    }

    #me-tab-security .me-change-password-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

.me-success-message,
.me-error-message {
    position: fixed;
    bottom: 90px; /* Higher position */
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 25px; /* More padding */
    border-radius: 10px;
    color: white;
    font-size: 0.95rem;
    font-weight: 500; /* Bolder feedback text */
    z-index: 1002;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Add transform transition */
    text-align: center;
    max-width: 90%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transform: translateX(-50%) translateY(20px); /* Initial offset for animation */
    pointer-events: none; /* 让消息不影响用户点击 */
}

.me-success-message {
    background-color: rgba(76, 175, 80, 0.95); /* 稍微不透明的绿色 */
    backdrop-filter: blur(4px); /* 添加毛玻璃效果 */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.3), 0 0 15px rgba(76, 175, 80, 0.2);
    letter-spacing: 0.03em; /* 字间距增加可读性 */
}

.me-error-message {
    background-color: rgba(220, 53, 69, 0.95); /* Bootstrap danger color, slightly adjusted */
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3), 0 0 15px rgba(220, 53, 69, 0.2);
}

.me-success-message[style*="display: block"] {
    opacity: 1;
    transform: translateX(-50%) translateY(0); /* Animate into view */
    animation: messagePulse 2s ease infinite; /* 添加脉冲动画 */
}

.me-error-message[style*="display: block"] {
    opacity: 1;
    transform: translateX(-50%) translateY(0); /* Animate into view */
    animation: errorMessagePulse 2s ease infinite; /* 错误消息使用红色脉冲动画 */
}

/* 确保.hidden-content类不会影响display:block设置 */
.hidden-content {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* Prevent line breaks */
}

.hidden-content[style*="display: block"] {
    position: static !important;
    height: auto;
    width: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    display: block !important; /* 强制显示 */
}

/* 喜欢我的用户列表 - Robinhood游戏风格 */
.likes-container {
  position: relative;
  background: linear-gradient(165deg, rgba(253, 242, 250, 0.7), rgba(255, 255, 255, 0.95));
  border-radius: 18px;
  padding: 22px;
  margin: 25px 0;
  box-shadow: 0 10px 30px rgba(50, 10, 60, 0.05);
  border: 1px solid rgba(255, 154, 179, 0.15);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.21, 0.61, 0.35, 1);
}

.likes-container:hover {
  transform: translateY(-3px);
}

.likes-container::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255, 154, 179, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.likes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.likes-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-color-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.likes-title i {
  color: var(--accent-color-deep);
  font-size: 1.2rem;
}

.likes-counter {
  display: flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 250, 252, 0.8));
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--accent-color-deep);
  box-shadow: 0 3px 8px rgba(255, 59, 48, 0.1);
  transition: all 0.3s ease;
}

.likes-counter:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(255, 59, 48, 0.15);
}

.likes-counter span {
  font-weight: 700;
}

.likes-filter {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
  gap: 10px;
}

.filter-button {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 154, 179, 0.2);
  padding: 6px 14px;
  border-radius: 15px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-color-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-button:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--accent-color-light);
  transform: translateY(-2px);
}

.filter-button.active {
  background: linear-gradient(135deg, var(--accent-color-light), var(--accent-color-medium));
  color: white;
  border-color: transparent;
  box-shadow: 0 3px 8px rgba(255, 154, 179, 0.3);
}

.likes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  margin-top: 10px;
  position: relative;
  z-index: 2;
}

.like-card {
  position: relative;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  transition: all 0.35s cubic-bezier(0.21, 0.61, 0.35, 1);
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}

.like-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(to bottom, var(--accent-color-medium), var(--secondary-accent));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.like-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  border-color: rgba(255, 154, 179, 0.3);
}

.like-card:hover::before {
  opacity: 1;
}

.like-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.like-card:hover .like-avatar {
  transform: scale(1.05);
  box-shadow: 0 5px 12px rgba(255, 154, 179, 0.2);
}

.like-info {
  flex: 1;
}

.like-name {
  font-weight: 600;
  color: var(--text-color-primary);
  margin-bottom: 4px;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.like-card:hover .like-name {
  color: var(--accent-color-deep);
}

.like-meta {
  display: flex;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--text-color-subtle);
}

.like-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.like-meta i {
  font-size: 0.75rem;
}

.like-time {
  font-size: 0.75rem;
  color: var(--text-color-subtle);
  opacity: 0.8;
}

.like-actions {
  display: flex;
  gap: 8px;
}

.like-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-color-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.like-action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 154, 179, 0.1);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.3s ease;
}

.like-action-btn:hover {
  color: var(--accent-color-deep);
  transform: translateY(-2px);
}

.like-action-btn:hover::before {
  transform: scale(1);
}

.likes-pagination {
  display: flex;
  justify-content: center;
  margin-top: 25px;
  gap: 5px;
}

.page-btn {
  min-width: 35px;
  height: 35px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 154, 179, 0.15);
  color: var(--text-color-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.page-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--accent-color-light);
  transform: translateY(-2px);
}

.page-btn.active {
  background: linear-gradient(135deg, var(--accent-color-light), var(--accent-color-medium));
  color: white;
  border-color: transparent;
  box-shadow: 0 3px 8px rgba(255, 154, 179, 0.2);
}

.page-btn.prev, .page-btn.next {
  background: rgba(255, 255, 255, 0.8);
}

.likes-empty {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-color-subtle);
  text-align: center;
  padding: 30px;
}

.likes-empty i {
  font-size: 3rem;
  color: var(--accent-color-light);
  margin-bottom: 15px;
  opacity: 0.5;
}

.likes-empty p {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 20px;
}

.explore-btn {
  padding: 10px 25px;
  background: linear-gradient(135deg, var(--accent-color-medium), var(--accent-color-deep));
  color: white;
  border: none;
  border-radius: 25px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(255, 59, 48, 0.2);
}

.explore-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255, 59, 48, 0.3);
}

/* 加载更多按钮 */
.load-more-container {
  display: flex;
  justify-content: center;
  margin-top: 25px;
}

.load-more-btn {
  padding: 10px 25px;
  background: transparent;
  color: var(--accent-color-deep);
  border: 1px dashed var(--accent-color-light);
  border-radius: 25px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.load-more-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg, 
    rgba(255, 154, 179, 0) 0%, 
    rgba(255, 154, 179, 0.2) 50%, 
    rgba(255, 154, 179, 0) 100%
  );
  transform: skewX(-25deg);
  animation: shimmerButton 3s infinite;
  pointer-events: none;
}

.load-more-btn:hover {
  background: rgba(255, 154, 179, 0.1);
  border-style: solid;
  transform: translateY(-2px);
}

@keyframes shimmerButton {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* 动画效果 */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.like-card.new {
  animation: pulse 2s infinite;
  border-color: var(--accent-color-light);
  background: linear-gradient(135deg, rgba(255, 242, 245, 0.95), rgba(255, 255, 255, 0.95));
}

.like-card.new::after {
  content: 'NEW';
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--accent-color-deep);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  letter-spacing: 0.5px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .likes-container {
    padding: 15px;
    margin: 15px 0;
  }
  
  .likes-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .likes-counter {
    align-self: flex-start;
  }
  
  .likes-filter {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 10px;
    width: 100%;
  }
  
  .filter-button {
    padding: 5px 12px;
    font-size: 0.8rem;
    white-space: nowrap;
  }
  
  .likes-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .like-card {
    padding: 12px;
  }
  
  .like-avatar {
    width: 40px;
    height: 40px;
  }
  
  .like-name {
    font-size: 0.9rem;
  }
  
  .likes-pagination {
    margin-top: 20px;
  }
  
  .page-btn {
    min-width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }
}

/* 交互反馈特效 */
.like-card {
  position: relative;
}

.like-card .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 154, 179, 0.3);
  transform: scale(0);
  animation: ripple 0.8s ease-out;
  pointer-events: none;
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* 删除这里的重复定义，使用上方的修复版本 */
/* .me-section-title {
    font-size: 1.2rem; 
    font-weight: 700; 
    color: var(--text-color-primary);
    margin: -25px -25px 25px -25px; 
    padding: 18px 25px; 
    background: linear-gradient(to bottom, #ffffff, #fdfdff, rgba(250, 250, 255, 0.7)); 
    border-radius: 0; 
    letter-spacing: 0.5px; 
    position: relative; 
    overflow: visible; 
} */

div.verification-status > span.status-text {
    display: inline-block; /* 改为默认显示 */
    margin-left: 5px;
    color: inherit; /* 继承父元素颜色 */
    font-size: 0.9em; /* 添加合适的字体大小 */
    vertical-align: middle; /* 垂直对齐 */
}

/* 状态文本显示规则，与JS配合使用 */
div.verification-status > span.status-text.visible {
    display: inline-block; /* 保持一致 */
    animation: fadeIn 0.3s ease-in-out; /* 添加淡入动画效果 */
}

/* Icon styling remains */
.verification-status.pending i {
    color: #f39c12;
}

.me-section-title {
    font-size: 1.2rem;
    margin-bottom: 20px;
    border-radius: 0; /* 移除所有圆角 */
    overflow: visible; /* 确保文字内容不被裁剪 */
    background: transparent; /* 确保背景透明 */
    padding: 0 0 10px 0; /* 调整内边距，只保留底部内边距 */
    margin-top: 0; /* 重置顶部外边距 */
    margin-left: 0; /* 重置左侧外边距 */
    margin-right: 0; /* 重置右侧外边距 */
    position: relative; /* 保持相对定位 */
}

.membership-upgrade-view.expanded .membership-title,
.membership-upgrade-view.expanded .membership-description,
.membership-upgrade-view.expanded .membership-features {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.membership-upgrade-view.expanded .membership-feature {
    justify-content: center;
    text-align: center;
}

.membership-upgrade-view.expanded .membership-feature i {
    margin-right: 8px;
}

/* 喜欢数统计样式 - 全新设计 */
.me-likes-counter {
    display: flex;
    align-items: center;
    margin: 10px 0;
    padding: 10px 15px;
    background: linear-gradient(135deg, rgba(255, 105, 180, 0.15), rgba(255, 182, 193, 0.25));
    border-radius: 18px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.15), 
                inset 0 1px 2px rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.25);
    position: relative;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    z-index: 1;
    --random-rotate: 0deg;
    --random-scale: 1;
}

.me-likes-counter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 40%, 
                rgba(255, 192, 203, 0.4) 0%, 
                rgba(255, 105, 180, 0.1) 45%, 
                transparent 70%);
    z-index: -1;
    opacity: 0.6;
    transition: transform 0.6s ease, opacity 0.4s ease;
    transform-origin: center;
    transform: scale(var(--random-scale)) rotate(var(--random-rotate));
}

.me-likes-counter:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 20px rgba(255, 105, 180, 0.2),
                inset 0 1px 3px rgba(255, 255, 255, 0.4);
}

.me-likes-counter:hover::before {
    opacity: 1;
    transform: scale(1.2) rotate(5deg);
}

.likes-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    margin-right: 12px;
    background: linear-gradient(135deg, #ff6b8b, #ff4778);
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(255, 105, 180, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.likes-icon::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    transform: scale(0.5);
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.me-likes-counter:hover .likes-icon::after {
    opacity: 0.6;
    transform: scale(1);
    animation: iconGlow 1.5s infinite alternate;
}

.likes-icon i {
    color: white;
    font-size: 1.2rem;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
    animation: heartbeat 1.5s infinite ease-in-out;
    transform-origin: center;
}

/* 移除波纹效果样式 */

.likes-stats {
    display: flex;
    flex-direction: column;
}

.likes-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.me-likes-counter:hover .likes-label {
    letter-spacing: 0.8px;
}

.likes-count-wrapper {
    position: relative;
    height: 32px;
    overflow: hidden;
    perspective: 800px;
}

.likes-count {
    font-size: 1.6rem;
    font-weight: 700;
    background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.8));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    position: relative;
    display: inline-block;
    min-width: 25px;
    text-align: left;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: all 0.3s ease;
}

.me-likes-counter:hover .likes-count {
    transform: scale(1.05);
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.25));
}

/* 改进的数字翻转动画 */
.likes-count.animate-count {
    animation: countFlip 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes countFlip {
    0% {
        transform: translateY(-120%) rotateX(30deg);
        opacity: 0;
    }
    30% {
        opacity: 0.3;
    }
    60% {
        transform: translateY(10%) rotateX(-10deg);
        opacity: 1;
    }
    80% {
        transform: translateY(-5%) rotateX(5deg);
    }
    100% {
        transform: translateY(0) rotateX(0);
    }
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    15% {
        transform: scale(1.2);
    }
    30% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.15);
    }
    60% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes iconGlow {
    0% {
        opacity: 0.3;
    }
    100% {
        opacity: 0.8;
    }
}

/* 响应式设计 - 调整位置 */
@media (min-width: 769px) {
    /* PC 端布局 - 头像下方，个人资料上方 */
    .me-header {
        flex-direction: column;
        align-items: center;
    }
    
    .me-avatar-container {
        margin-right: 0;
        margin-bottom: 20px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .me-likes-counter {
        order: 2;
        margin: 10px auto 25px;
        width: auto;
        max-width: 180px;
    }
    
    .me-user-info {
        order: 3;
        width: 100%;
    }
}

@media (max-width: 768px) {
    /* 移动端布局 - 头像和被喜欢在左侧，邮箱性别在右侧 */
    .me-header {
        display: grid;
        grid-template-areas: 
            "avatar info"
            "likes info";
        grid-template-columns: auto 1fr;
        gap: 15px;
        align-items: start;
        padding: 20px;
    }
    
    .me-avatar-container {
        grid-area: avatar;
        margin-right: 0;
        margin-bottom: 10px;
        width: 80px;
        height: 80px;
    }
    
    .me-avatar-preview {
        width: 80px;
        height: 80px;
    }
    
    .me-likes-counter {
        grid-area: likes;
        margin: 0;
        justify-self: center;
        align-self: start;
        margin-top: 5px;
    }
    
    .me-user-info {
        grid-area: info;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }
    
    .me-user-info .me-form-group:first-of-type {
        margin-top: 0;
    }
}

/* 兼容小尺寸移动设备 */
@media (max-width: 480px) {
    .me-likes-counter {
        padding: 8px 12px;
        border-radius: 16px;
        min-width: auto;
    }
    
    .likes-icon {
        width: 30px;
        height: 30px;
        margin-right: 8px;
    }
    
    .likes-icon i {
        font-size: 0.95rem;
    }
    
    .likes-label {
        font-size: 0.6rem;
        margin-bottom: 2px;
    }
    
    .likes-count {
        font-size: 1.3rem;
    }
    
    .likes-count-wrapper {
        height: 26px;
    }
}

.likes-count-wrapper {
    position: relative;
    height: 32px;
    overflow: hidden;
    perspective: 800px;
}

.likes-count {
    font-size: 1.6rem;
    font-weight: 700;
    background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.8));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    position: relative;
    display: inline-block;
    min-width: 25px;
    text-align: left;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: all 0.3s ease;
}

.me-likes-counter:hover .likes-count {
    transform: scale(1.05);
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.25));
}

/* 改进的数字翻转动画 */
.likes-count.animate-count {
    animation: countFlip 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes countFlip {
    0% {
        transform: translateY(-120%) rotateX(30deg);
        opacity: 0;
    }
    30% {
        opacity: 0.3;
    }
    60% {
        transform: translateY(10%) rotateX(-10deg);
        opacity: 1;
    }
    80% {
        transform: translateY(-5%) rotateX(5deg);
    }
    100% {
        transform: translateY(0) rotateX(0);
    }
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    15% {
        transform: scale(1.2);
    }
    30% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.15);
    }
    60% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes iconGlow {
    0% {
        opacity: 0.3;
    }
    100% {
        opacity: 0.8;
    }
}

/* 响应式设计 */
@media (min-width: 769px) {
    /* PC 端布局 */
    .me-header {
        flex-direction: column;
    }
    
    .me-avatar-container {
        margin-bottom: 12px;
    }
    
    .me-likes-counter {
        order: 2; 
        margin: 15px auto 10px;
        width: calc(100% - 20px);
        justify-content: center;
        max-width: 180px;
        padding: 12px 18px;
    }
    
    .me-user-info {
        flex: 1;
        order: 3;
    }
}

@media (max-width: 768px) {
    /* 平板/手机布局 */
    .me-header {
        flex-wrap: nowrap;
        align-items: center;
        gap: 15px;
    }
    
    .me-likes-counter {
        margin-left: 15px;
        margin-right: auto;
        flex-shrink: 0;
        order: 1;
    }
    
    .me-user-info {
        margin-top: 15px;
        width: 100%;
    }
}

/* 兼容小尺寸移动设备 */
@media (max-width: 480px) {
    .me-likes-counter {
        padding: 8px 12px;
        border-radius: 16px;
        min-width: 110px;
    }
    
    .likes-icon {
        width: 30px;
        height: 30px;
        margin-right: 8px;
    }
    
    .likes-icon i {
        font-size: 0.95rem;
    }
    
    .likes-label {
        font-size: 0.6rem;
        margin-bottom: 2px;
    }
    
    .likes-count {
        font-size: 1.3rem;
    }
    
    .likes-count-wrapper {
        height: 26px;
    }
}

/* Styles for plan badges, enhancing modernity and compactness */
.plan-badge {
    position: absolute;
    top: -8px;
    right: -5px;
    left: auto;
    transform: rotate(3deg);
    background: linear-gradient(140deg, var(--accent-color-medium), var(--accent-color-light), var(--accent-color-medium));
    background-size: 200% 200%;
    color: white;
    padding: 3px 7px;
    font-size: 0.6rem;
    font-weight: 600;
    border-radius: 8px 2px 8px 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 0 1.5px rgba(255,255,255,0.3) inset;
    z-index: 2;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                background-position 0.6s ease, 
                box-shadow 0.3s ease;
    animation: badgeShimmer 4s infinite ease-in-out alternate;
}

@keyframes badgeShimmer {
    0% {
        background-position: 0% 50%;
        transform: rotate(3deg) scale(1);
    }
    50% {
        transform: rotate(2deg) scale(1.03);
    }
    100% {
        background-position: 100% 50%;
        transform: rotate(4deg) scale(0.97);
    }
}

.plan-button:hover .plan-badge {
    transform: rotate(0deg) scale(1.1);
    background-position: 50% 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15), 0 0 0 1.5px rgba(255,255,255,0.4) inset;
    animation-play-state: paused;
}

.plan-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-color-primary, #333);
    margin: 5px 0 8px; /* Spacing around price */
}

/* 创伤模态框完成动画 */
.trauma-completion-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.trauma-completion-animation.active {
    opacity: 1;
    visibility: visible;
}

.trauma-completion-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.trauma-completion-particle {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 154, 179, 0.4) 70%, transparent 100%);
    box-shadow: 0 0 8px rgba(255, 154, 179, 0.7);
    animation: traumaParticleEffect 1.5s ease-out forwards;
    opacity: 0;
}

@keyframes traumaParticleEffect {
    0% {
        transform: scale(0) translateY(0);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: scale(1.5) translateY(-100px);
        opacity: 0;
    }
}

.trauma-completion-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 154, 179, 0.5) 0%, rgba(255, 154, 179, 0.2) 40%, transparent 70%);
    opacity: 0;
    animation: traumaFlashEffect 1.2s ease-out forwards;
}

@keyframes traumaFlashEffect {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    50% {
        opacity: 0.7;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.3);
    }
}

.trauma-completion-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 60px;
    color: var(--accent-color-deep);
    text-shadow: 0 0 15px rgba(255, 59, 48, 0.6);
    animation: traumaIconEffect 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes traumaIconEffect {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(-30deg);
        opacity: 0;
    }
    40% {
        transform: translate(-50%, -50%) scale(1.2) rotate(5deg);
        opacity: 1;
    }
    60% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.8) rotate(0deg);
        opacity: 0;
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .trauma-completion-icon {
        font-size: 50px;
    }
}

@media (max-width: 480px) {
    .trauma-completion-icon {
        font-size: 40px;
    }
}

@media (max-width: 480px) {
    /* 小屏设备头像样式 */
    
    .me-avatar-container {
        width: 90px;
        height: 90px;
    }
    
    .me-avatar-preview {
        width: 90px;
        height: 90px;
        border-radius: 50%;
    }
    
    /* 其他小屏设备样式 */
}

/* ... existing code ... */

/* 会员卡片视图控制 - 根据是否激活切换显示 */
.membership-card:not(.is-member-active) .membership-active-view {
    display: none;
}

/* 非会员用户一定要确保升级视图是可见的 */
.membership-card:not(.is-member-active) .membership-upgrade-view {
    display: flex !important;
}

.membership-card.is-member-active .membership-upgrade-view {
    display: none;
}

/* 默认情况下激活视图是隐藏的 */
.membership-active-view {
    display: none;
}

/* ... existing code ... */

.plan-restricted {
    display: block;
    color: #e53935;
    font-size: 12px;
    font-weight: bold;
    margin-top: 2px;
    letter-spacing: 0.02em;
}
.plan-button .plan-restricted {
    margin-top: 4px;
    text-align: center;
}

/* ==================== 消息同步功能样式 ==================== */

/* 消息同步区域基础样式 */
.me-sync-description {
    margin-bottom: 20px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(46, 139, 87, 0.05) 0%, rgba(60, 179, 113, 0.05) 100%);
    border-left: 4px solid #2E8B57;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #555;
}

/* 同步统计信息 */
.me-sync-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
    padding: 20px;
    background: rgba(248, 250, 252, 0.8);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.sync-stat-item {
    text-align: center;
    padding: 12px 8px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.sync-stat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-label {
    display: block;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 8px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: #2E8B57;
}

/* 同步操作按钮组 */
.me-sync-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.me-sync-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 48px;
}

.me-sync-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.me-sync-btn:hover::before {
    left: 100%;
}

/* 上传按钮 */
.me-sync-btn.upload {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

.me-sync-btn.upload:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

/* 下载按钮 */
.me-sync-btn.download {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
}

.me-sync-btn.download:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
}

/* 导出按钮 */
.me-sync-btn.export {
    background: linear-gradient(135deg, #FF9800, #F57C00);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
}

.me-sync-btn.export:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4);
}

/* 导入按钮 */
.me-sync-btn.import {
    background: linear-gradient(135deg, #9C27B0, #7B1FA2);
    color: white;
    box-shadow: 0 4px 15px rgba(156, 39, 176, 0.3);
}

.me-sync-btn.import:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(156, 39, 176, 0.4);
}

/* 按钮禁用状态 */
.me-sync-btn:disabled {
    background: #e0e0e0 !important;
    color: #999 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.me-sync-btn:disabled::before {
    display: none;
}

/* 同步进度条 */
.me-sync-progress {
    margin-top: 20px;
    padding: 20px;
    background: rgba(248, 250, 252, 0.9);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.progress-bar {
    width: 100%;
    height: 8px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #45a049);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 4px;
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.progress-text {
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .me-sync-stats {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 15px;
    }
    
    .me-sync-actions {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .me-sync-btn {
        padding: 14px 16px;
        font-size: 0.9rem;
    }
    
    .me-sync-description {
        padding: 12px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .sync-stat-item {
        padding: 10px 6px;
    }
    
    .stat-label {
        font-size: 0.75rem;
        margin-bottom: 6px;
    }
    
    .stat-value {
        font-size: 1.1rem;
    }
    
    .me-sync-btn {
        padding: 12px 14px;
        font-size: 0.85rem;
        gap: 6px;
    }
    
    .me-sync-description {
        padding: 10px;
        font-size: 0.8rem;
    }
}

/* 特殊动效 */
.sync-success-animation {
    animation: successPulse 0.6s ease-out;
}

@keyframes successPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.sync-error-animation {
    animation: errorShake 0.6s ease-out;
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* 加载状态样式 */
.me-sync-btn.loading {
    position: relative;
    color: transparent !important;
}

.me-sync-btn.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}