/**
 * 心法共修系统 - 全局主题样式
 * 统一的字体、颜色、组件样式配置
 */

/* ===== CSS变量定义 ===== */
:root {
    /* 🎨 默认：极光紫 (Default Aurora Purple) */
    --theme-primary: #7c4dff;
    --theme-primary-dark: #6200ea;
    --theme-primary-rgb: 124, 77, 255;
    --theme-primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* 🚀 设计令牌 (Design Tokens) - 默认值 */
    --theme-bg-soft: rgba(var(--theme-primary-rgb), 0.035);
    --theme-surface-tint: rgba(var(--theme-primary-rgb), 0.08);
    --theme-border-subtle: rgba(var(--theme-primary-rgb), 0.12);
    
    /* 高级有色阴影 (Hue-Aware Shadows) */
    --theme-shadow-sm: 0 2px 8px rgba(var(--theme-primary-rgb), 0.08);
    --theme-shadow-rich: 0 10px 30px -5px rgba(var(--theme-primary-rgb), 0.18);
    --theme-glow-primary: 0 8px 20px -4px rgba(var(--theme-primary-rgb), 0.4);
    
    /* 文字颜色令牌 */
    --theme-text-primary: #2d3748;
    --theme-text-secondary: #4a5568;
    --theme-text-muted: #a0aec0;
    --theme-text-on-primary: #ffffff;
    
    /* 背景与容器令牌 */
    --theme-bg-body: var(--theme-bg-soft);
    --theme-bg-container: #ffffff;
    --theme-bg-light: var(--theme-bg-soft);
    --theme-bg-card: #ffffff;
    
    /* 阴影与装饰 */
    --theme-shadow-colored: var(--theme-shadow-sm);
    --theme-border-color: var(--theme-border-subtle);
    
    /* 玻璃质感令牌 */
    --theme-glass-bg: rgba(255, 255, 255, 0.8);
    --theme-glass-border: rgba(255, 255, 255, 0.3);
    --theme-glass-blur: 20px;

    /* 兼容性回退 (Legacy Support) */
    --primary-color: var(--theme-primary, #7c4dff);
    --primary-dark: var(--theme-primary-dark, #6200ea);
    --primary-gradient: var(--theme-primary-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    --primary-rgb: var(--theme-primary-rgb, 124, 77, 255);
    --text-primary: var(--theme-text-primary);
    --text-secondary: var(--theme-text-secondary);
    --background-white: var(--theme-bg-container);
    --background-light: var(--theme-bg-light);
    --body-bg: var(--theme-bg-body);
    --border-color: var(--theme-border-color);
    --glass-bg: var(--theme-glass-bg);
    --glass-border: var(--theme-glass-border);
    --glass-blur: var(--theme-glass-blur);
    
    /* 字体配置 */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* 字体大小 */
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 13px;
    --font-size-md: 14px;
    --font-size-lg: 15px;
    --font-size-xl: 16px;
    --font-size-2xl: 18px;
    --font-size-3xl: 20px;
    --font-size-4xl: 24px;
    --font-size-5xl: 28px;
    --font-size-6xl: 32px;
    
    /* 阴影 */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-base: 0 2px 10px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    
    /* 圆角 */
    --radius-sm: 8px;
    --radius-base: 12px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* 间距 (Spacing) */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-base: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    
    --card-bg: var(--background-white);
    --card-radius: 20px;
    --card-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.04);
    --card-shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.08);
    
    --inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    --border-glow: 0 0 0 1px rgba(var(--theme-primary-rgb), 0.1);
    
    /* 标题栏按钮配置 (Header Buttons) */
    --header-btn-bg: rgba(255, 255, 255, 0.15);
    --header-btn-color: #ffffff;
    --header-btn-border: rgba(255, 255, 255, 0.3);
    --header-btn-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    
    /* 进度条轨道 (Progress Track) */
    --progress-track-bg: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    --progress-track-border: rgba(var(--theme-primary-rgb), 0.08);

    /* 卡片背景与阴影 (Card Background & Shadows) */
    --card-gradient-light: linear-gradient(135deg, #ffffff 0%, #fffbf5 100%);
    --card-shadow-colored: 0 8px 24px rgba(var(--theme-primary-rgb), 0.1);
}

/* 品牌橙皮肤覆盖 (Brand Orange - Active Skin) */
[data-theme='orange'] {
    --theme-primary: #ff6503;
    --theme-primary-dark: #e65b02;
    --theme-primary-rgb: 255, 101, 3;
    --theme-primary-gradient: linear-gradient(135deg, #ff6503 0%, #ff8c00 100%);
    
    --theme-bg-soft: rgba(255, 101, 3, 0.035);
    --theme-surface-tint: rgba(255, 101, 3, 0.08);
    --theme-border-subtle: rgba(255, 101, 3, 0.12);
    
    --theme-shadow-sm: 0 2px 8px rgba(255, 101, 3, 0.08);
    --theme-shadow-rich: 0 10px 30px -5px rgba(255, 101, 3, 0.18);
    --theme-glow-primary: 0 8px 20px -4px rgba(255, 101, 3, 0.4);
    
    --theme-bg-body: var(--theme-bg-soft);
    --theme-bg-container: #ffffff;
    
    --theme-text-primary: #2d3748;
    --theme-text-secondary: #4a5568;
    --theme-text-muted: #a0aec0;
    
    --theme-highlight: #ff6503;
    --theme-highlight-text: #ffffff;
}

/* 蓝色皮肤覆盖 (Premium Royal Blue) */
[data-theme='blue'] {
    --theme-primary: #0c24a2;
    --theme-primary-dark: #06167a;
    --theme-primary-light: #e6ecff;
    --theme-primary-rgb: 12, 36, 162;
    --theme-primary-gradient: linear-gradient(135deg, #0c24a2 0%, #4b63ff 100%);
    
    --theme-text-primary: #1a202c;
    --theme-text-secondary: #4a5568;
    --theme-text-muted: #718096;
    --theme-text-on-primary: #ffffff;
    
    --theme-bg-body: var(--theme-bg-soft);
    --theme-bg-container: #f5f8ff;
    
    --theme-glass-bg: rgba(255, 255, 255, 0.9);
    --theme-glass-border: rgba(var(--theme-primary-rgb), 0.08);
    
    --theme-shadow-sm: 0 2px 8px rgba(var(--theme-primary-rgb), 0.08);
    --theme-shadow-rich: 0 10px 30px -5px rgba(var(--theme-primary-rgb), 0.15);
    --theme-border-subtle: rgba(var(--theme-primary-rgb), 0.12);
    
    /* 🎯 亮点/点亮色 (Highlight/Active States) */
    --theme-highlight: #0c24a2;
    --theme-highlight-text: #ffffff;
}

/* 极光紫皮肤覆盖 (Aurora Purple - Between Blue & Orange) */
[data-theme='purple'] {
    --theme-primary: #7c4dff;
    --theme-primary-dark: #651fff;
    --theme-primary-light: #f3e5f5;
    --theme-primary-rgb: 124, 77, 255;
    --theme-primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    --theme-text-primary: #2d3748;
    --theme-text-secondary: #4a5568;
    --theme-text-muted: #a0aec0;
    --theme-text-on-primary: #ffffff;
    
    --theme-bg-body: var(--theme-bg-soft);
    --theme-bg-container: #f9f5ff;
    
    --theme-glass-bg: rgba(255, 255, 255, 0.9);
    --theme-glass-border: rgba(var(--theme-primary-rgb), 0.08);
    
    --theme-shadow-sm: 0 2px 8px rgba(var(--theme-primary-rgb), 0.08);
    --theme-shadow-rich: 0 10px 30px -5px rgba(var(--theme-primary-rgb), 0.15);
    --theme-border-subtle: rgba(var(--theme-primary-rgb), 0.12);
    
    /* 🎯 亮点/点亮色 (Highlight/Active States) */
    --theme-highlight: #7c4dff;
    --theme-highlight-text: #ffffff;
}

/* ===== 全局基础样式 ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body {
    font-family: var(--font-family);
    background: var(--body-bg);
    min-height: 100vh;
    padding: 0;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    line-height: 1.5;
    overflow-x: hidden;
}

/* ===== 统一容器样式 (对齐 Navigation) ===== */
.container, .app-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    background: var(--background-white);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    position: relative;
}

/* 玻璃质感辅助类 */
.glass-card {
    background: var(--background-white);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-base);
}

/* ===== 统一头部样式 (Standard App Header) - 2026 焕新版 ===== */
.app-header, .header {
    background: var(--primary-gradient);
    color: white;
    /* ✅ 全站统一收敛：进一步降低高度，并保证安全区与垂直居中 */
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 34px;
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
    justify-items: center;
    box-shadow: 
        0 4px 20px rgba(var(--theme-primary-rgb), 0.15),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
    z-index: 10;
    overflow: hidden;
    border-radius: 0 0 22px 22px; /* 再收敛一点，配合更紧凑高度 */
}

/* 头部内容样式 */
.app-header .header-title, .header .header-title {
    font-size: 17px;
    font-weight: 800;
    margin: 0;
    color: #ffffff !important;
    letter-spacing: 0.6px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    line-height: 1.15;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    z-index: 2;
}

.app-header .header-subtitle, .header .header-subtitle {
    opacity: 0.85;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.95) !important;
    margin: 0;
    letter-spacing: 0.8px;
    font-weight: 500;
    text-transform: uppercase;
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    z-index: 2;
}

/* 头部高级装饰纹理 */
.app-header::after, .header::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 140%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: rotate(-15deg);
    pointer-events: none;
}

.app-header::before, .header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="1" fill="%23ffffff" opacity="0.1"/><circle cx="80" cy="40" r="1" fill="%23ffffff" opacity="0.08"/><circle cx="40" cy="80" r="1" fill="%23ffffff" opacity="0.12"/></svg>');
    opacity: 0.3;
    pointer-events: none;
}

.header-title, .header h1 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    margin: 0 0 8px 0;
    color: white;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 2;
}

.header-subtitle, .header p {
    opacity: 0.9;
    font-size: var(--font-size-md);
    color: white;
    margin: 0;
    background: rgba(255, 255, 255, 0.2);
    padding: 3px 12px;
    border-radius: 20px;
    display: inline-block;
    position: relative;
    z-index: 2;
}

/* ===== 用户信息区标准化样式 (User Info Area Standard) - 2026 精致水平版 ===== */
.user-info-area {
    background: linear-gradient(
        140deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.88) 100%
    );
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 20px;
    margin: -16px 12px 18px;
    border: 1px solid var(--theme-glass-border);
    border-radius: 22px;
    font-family: var(--font-family);
    box-shadow: 
        0 12px 28px rgba(0, 0, 0, 0.08),
        0 3px 10px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    z-index: 5;
    display: flex;
    align-items: stretch;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
    width: auto;
    box-sizing: border-box;
}

/* 🎯 顶部装饰光条 */
.user-info-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--theme-primary-gradient);
    opacity: 0.55;
}

.user-info-area:hover {
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.05);
}

.user-info-area .content {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 16px; /* 缩减水平间距 */
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .user-info-area {
        margin: -12px 10px 16px;
        padding: 16px;
        border-radius: 18px;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
    }
}

/* 左侧：头像与昵称 */
.user-info-area .user-identity-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 85px;
    flex-shrink: 0;
}

.user-info-area .avatar-container {
    position: relative;
    width: 72px;
    height: 72px;
    cursor: pointer;
}

.user-info-area .avatar-glow {
    position: absolute;
    inset: -4px;
    background: var(--theme-primary-gradient);
    border-radius: 50%;
    opacity: 0.15;
    filter: blur(8px);
    animation: avatarPulse 4s ease-in-out infinite;
}

.user-info-area #userAvatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.user-info-area .avatar-container:hover #userAvatar {
    transform: scale(1.05);
}

.user-info-area #userName {
    font-size: 18px;
    font-weight: 800;
    color: var(--theme-primary);
    text-align: center;
    line-height: 1.2;
    white-space: nowrap; 
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(var(--theme-primary-rgb), 0.1);
}

/* 右侧：等级统计 */
.user-info-area .user-stats-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px; /* 缩减胶囊之间的间距 */
    min-width: 0;
}

.user-info-area .stat-capsule {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
}

.user-info-area .stat-capsule.honor {
    background: transparent; /* 🎯 去除圆角矩形背景 */
    border: none;
    padding: 8px 0; /* 缩减内边距，使其与整体排版更融合 */
    border-radius: 0;
    box-shadow: none;
    position: relative;
    overflow: visible;
}

.user-info-area .stat-capsule.honor::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 12px;
    background: var(--theme-primary-gradient);
    border-radius: 10px;
    opacity: 0.6; /* 🎯 细节点缀：左侧装饰条 */
}

.user-info-area .stat-capsule.placeholder {
    background: rgba(0, 0, 0, 0.02);
    border: 1px dashed rgba(0, 0, 0, 0.08);
    opacity: 0.6;
}

.user-info-area .stat-label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
}

.user-info-area .level-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-primary);
}

.user-info-area .level-code {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-left: 6px !important;
    font-size: 11px;
    font-weight: 500;
    color: var(--theme-primary);
    opacity: 0.7;
}

.user-info-area .honor-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--theme-primary);
    letter-spacing: 0.25px;
    text-shadow: 0 1px 6px rgba(var(--theme-primary-rgb), 0.18);
}

.user-info-area .honor-code {
    font-size: 11px;
    font-weight: 500;
    color: var(--theme-primary);
    opacity: 0.68;
}

.user-info-area .stat-value {
    font-size: 13px;
    font-weight: 800;
    color: var(--theme-primary);
    background: transparent !important;
    border: none !important;
    padding: 3px 0 !important;
    display: flex;
    align-items: center;
    gap: 2px;
}

.user-info-area .stat-value::after {
    content: none;
}

.user-info-area .stat-capsule.honor .stat-value {
    color: var(--theme-primary);
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-weight: 800;
    font-size: 15px;
    min-width: 70px;
    justify-content: flex-end;
    text-shadow: 0 1px 4px rgba(var(--theme-primary-rgb), 0.16);
}

/* 影响力值微数据条 */
.user-info-area .influence-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 16px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.08) 0%, rgba(var(--theme-primary-rgb), 0.03) 100%);
    border-top: 1px dashed rgba(var(--theme-primary-rgb), 0.2);
    cursor: pointer;
    transition: background 0.2s;
}

.user-info-area .influence-strip:hover {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.12) 0%, rgba(var(--theme-primary-rgb), 0.05) 100%);
}

.user-info-area .influence-strip .influence-icon {
    font-size: 16px;
}

.user-info-area .influence-strip .influence-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-primary);
}

.user-info-area .influence-strip .influence-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--theme-primary);
    margin-left: auto;
    font-family: var(--font-family);
}

/* 消息红点 */
.avatar-message-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #ff4d4f;
    color: white;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    box-shadow: 0 3px 8px rgba(255, 77, 79, 0.4);
    border: 2px solid #fff;
    z-index: 10;
}

@keyframes avatarPulse {
    0%, 100% { transform: scale(1); opacity: 0.15; }
    50% { transform: scale(1.05); opacity: 0.25; }
}

/* 用户信息卡片样式 */
.user-profile-card, .user-info-card {
    background: var(--background-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-base);
    border: 1px solid var(--border-color);
}

.profile-name, .user-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin-bottom: 4px;
}

.profile-date, .user-stats {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    margin-top: 2px;
}

/* ===== 统计卡片样式 ===== */
.stats-overview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.stat-card {
    background: #ffffff;
    border-radius: var(--theme-radius-lg);
    padding: 18px 12px;
    text-align: center;
    box-shadow: var(--theme-shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1.5px solid var(--theme-border-subtle);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--theme-shadow-rich);
    border-color: var(--primary-color);
}

.stat-number {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    margin-bottom: 4px;
    line-height: 1.2;
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
    margin-top: 2px;
    line-height: 1.2;
}

/* ===== 按钮样式 ===== */
.btn {
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-sm) var(--spacing-base);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background: var(--secondary-gradient);
    color: white;
    box-shadow: 0 4px 15px rgba(25, 118, 210, 0.3);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(25, 118, 210, 0.4);
}

.btn-secondary {
    background: var(--background-white);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
}

.btn-secondary:hover {
    background: var(--background-white);
}

/* ===== 导航按钮样式 ===== */
.nav-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
}

.nav-item {
    background: #ffffff;
    border-radius: var(--theme-radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
    box-shadow: var(--theme-shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: var(--text-primary);
    border: 1.5px solid var(--theme-border-subtle);
    position: relative;
    overflow: hidden;
}

.nav-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--theme-shadow-rich);
    border-color: var(--primary-color);
}

.nav-icon {
    font-size: var(--font-size-5xl);
    margin-bottom: var(--spacing-sm);
    display: block;
}

.nav-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-xs);
}

.nav-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ===== 段位和等级样式 ===== */
.profile-rank, .level-badge {
    background: var(--secondary-gradient);
    color: white;
    padding: 4px 10px;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.profile-level-code, .level-code {
    color: var(--theme-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    opacity: 0.8;
}

/* ===== 图腾样式 ===== */
.profile-totem, .totem-icon {
    background: var(--background-white);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    border: 2px solid var(--border-light);
    padding: 2px;
}

/* ===== 进度条样式 ===== */
.progress-container {
    background: var(--background-light);
    border-radius: var(--radius-lg);
    height: 8px;
    overflow: hidden;
    margin: var(--spacing-sm) 0;
}

.progress-bar {
    background: var(--primary-gradient);
    height: 100%;
    border-radius: var(--radius-lg);
    transition: width 0.3s ease;
}

.progress-text {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: var(--spacing-sm);
}

/* ===== 排名列表样式 ===== */
.ranking-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-base) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.ranking-item:last-child {
    border-bottom: none;
}

.rank-number {
    width: 30px;
    height: 30px;
    background: var(--background-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    margin-right: var(--spacing-md);
}

.rank-number.top3 {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #8b6914;
}

/* ===== 响应式设计 ===== */

/* 大屏设备 (PC) >= 1200px */
@media (min-width: 1200px) {
    .container {
        max-width: 800px;
        box-shadow: var(--shadow-lg);
    }
    
    .stats-overview {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-lg);
    }
    
    .stat-number {
        font-size: var(--font-size-6xl);
    }
    
    .stat-label {
        font-size: var(--font-size-md);
    }
}

/* 平板设备 (PAD) 768px - 1199px */
@media (min-width: 768px) and (max-width: 1199px) {
    .container {
        max-width: 600px;
        margin: var(--spacing-lg) auto;
        border-radius: var(--radius-xl);
        overflow: hidden;
    }
    
    .stats-overview {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-xl);
    }
    
    .stat-number {
        font-size: var(--font-size-5xl);
    }
    
    .stat-label {
        font-size: var(--font-size-base);
    }
    
    .header {
        padding: 25px;
    }
    
    .header h1 {
        font-size: var(--font-size-4xl);
    }
}

/* 小屏手机 <= 480px */
@media (max-width: 480px) {
    .container {
        max-width: 100%;
        margin: 0;
        border-radius: 0;
    }
    
    .stats-overview {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-lg);
    }
    
    .stat-number {
        font-size: var(--font-size-3xl);
    }
    
    .stat-label {
        font-size: var(--font-size-xs);
    }
    
    .header {
        padding: var(--spacing-xl);
        border-radius: 0;
    }
    
    .header h1 {
        font-size: var(--font-size-2xl);
    }
    
    .header p {
        font-size: var(--font-size-base);
    }
}

/* 超小屏手机 <= 360px */
@media (max-width: 360px) {
    .stats-overview {
        gap: var(--spacing-sm);
    }
    
    .stat-number {
        font-size: var(--font-size-2xl);
    }
    
    .stat-label {
        font-size: var(--font-size-xs);
    }
}

/* ===== 工具样式 ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-base); }
.mb-4 { margin-bottom: var(--spacing-md); }
.mb-5 { margin-bottom: var(--spacing-lg); }

.font-weight-normal { font-weight: var(--font-weight-normal); }
.font-weight-medium { font-weight: var(--font-weight-medium); }
.font-weight-semibold { font-weight: var(--font-weight-semibold); }
.font-weight-bold { font-weight: var(--font-weight-bold); }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }

/* ==========================================================================
   🛡️ 里程碑模态窗保护盾 (Milestone Modal Shield)
   ==========================================================================
   目的：强制所有里程碑类模态窗（里程碑、百次打卡、段位晋级、整年庆祝等）
   回归原始“橙子日记”经典橙金主题，不受整站皮肤系统（如蓝色、深色模式）的变量污染。
   ========================================================================== */

/* 1. 变量重置：强制覆盖全局变量，回归橙色品牌色 */
.century-milestone-modal, 
.anniversary-milestone-modal, 
.stage-milestone-modal, 
.sub-level-milestone-modal, 
.max-level-milestone-modal,
.traditional-milestone-modal,
.voice-milestone-modal,
.milestone-modal-protected,
.orange-theme-shield {
    /* 核心品牌色 - 强制回归橙色 */
    --primary-color: #ff6503 !important;
    --primary-rgb: 255, 101, 3 !important;
    --primary-gradient: linear-gradient(135deg, #ff6503 0%, #ff8f00 50%, #f57c00 100%) !important;
    --primary-dark: #e65b00 !important;
    --primary-light: #ff8c42 !important;
    
    /* 文字颜色重置 - 确保在深色模式下也不会变白（如果背景是浅色的） */
    --text-primary: #333333 !important;
    --text-secondary: #666666 !important;
    --text-muted: #999999 !important;
    
    /* 背景重置 */
    --background-white: #ffffff !important;
    --background-light: #fdfdfd !important;
    
    /* 辅助色回归 */
    --success-color: #4caf50 !important;
    --warning-color: #ff9800 !important;
    --error-color: #f44336 !important;
}

/* 2. 局部基础元素修正：防止全局样式对里程碑文字的穿透影响 */
.century-milestone-modal p,
.anniversary-milestone-modal p,
.stage-milestone-modal p,
.milestone-modal-protected p {
    color: #666666 !important; /* 强制使用深灰色 */
}

.century-milestone-modal h1,
.century-milestone-modal h2,
.stage-milestone-modal h1,
.stage-milestone-modal h2 {
    color: #333333 !important; /* 强制使用深色标题 */
}

/* 3. 按钮强制修正：确保里程碑按钮始终是橙色 */
.milestone-modal-protected .milestone-btn.primary,
.orange-theme-shield .btn-primary {
    background: #ff6503 !important;
    background: linear-gradient(135deg, #ff6503 0%, #ff8f00 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(255, 101, 3, 0.3) !important;
}

/* 4. 遮罩层深度重置：确保里程碑背景足够深，不受主题滤镜影响 */
.milestone-modal-overlay-protected {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(15px) !important;
}

/* 4. 尊贵感增强：金光流动效果 */
.century-milestone-modal .milestone-title,
.anniversary-milestone-modal .anniversary-title,
.stage-milestone-modal .stage-title {
    background: linear-gradient(90deg, #8B4513 0%, #D4958D 25%, #8B4513 50%, #D4958D 75%, #8B4513 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: goldShimmer 4s linear infinite !important;
    font-weight: 900 !important;
}

/* 5. 图标呼吸感 */
.milestone-icon-protected,
.anniversary-icon {
    animation: milestonePulse 2s ease-in-out infinite !important;
    filter: drop-shadow(0 0 15px rgba(255, 101, 3, 0.5)) !important;
}

/* 6. 按钮高级感 */
.milestone-modal-protected .milestone-confirm-btn,
.anniversary-confirm-btn,
.stage-confirm-btn {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #ff6503 0%, #f57c00 100%) !important;
    box-shadow: 0 10px 25px rgba(255, 101, 3, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.milestone-modal-protected .milestone-confirm-btn::after,
.anniversary-confirm-btn::after,
.stage-confirm-btn::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -100% !important;
    width: 200% !important;
    height: 200% !important;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent) !important;
    transform: rotate(25deg) !important;
    animation: btnShimmer 3s infinite !important;
}

@keyframes goldShimmer {
    to { background-position: 200% center; }
}

@keyframes milestonePulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(255, 101, 3, 0.3)); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 20px rgba(255, 101, 3, 0.6)); }
}

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