/* ==========================================================================
   菜鸟国际羽社 - 统一字体和组件大小规范系统
   ========================================================================== */

:root {
    /* 基础颜色系统 */
    --primary-color: #00d4ff;
    --secondary-color: #0066ff;
    --accent-color: #ff6b35;
    --success-color: #00e676;
    --warning-color: #ffd54f;
    --error-color: #ff5252;
    --dark-bg: #0a0a0a;
    --card-bg: rgba(20, 20, 30, 0.95);
    --glass-bg: rgba(255, 255, 255, 0.1);
    --gradient-primary: linear-gradient(135deg, #00d4ff 0%, #0066ff 100%);
    --gradient-accent: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    --gradient-success: linear-gradient(135deg, #00e676 0%, #00bcd4 100%);
    
    /* 响应式缩放系数 */
    --scale-factor: 1;
    --font-scale: 1;
    --spacing-scale: 1;
    
    /* ==========================================================================
       统一字体大小规范 - 桌面端 (1200px+)
       ========================================================================== */
    
    /* 主标题 - 页面最重要的标题 */
    --font-size-h1: calc(2rem * var(--font-scale));           /* 32px */
    --font-size-h1-icon: calc(1.5rem * var(--font-scale));    /* 24px */
    
    /* 次级标题 - 面板标题、区块标题 */
    --font-size-h2: calc(1.5rem * var(--font-scale));         /* 24px */
    --font-size-h2-icon: calc(1.25rem * var(--font-scale));   /* 20px */
    
    /* 三级标题 - 卡片标题、小节标题 */
    --font-size-h3: calc(1.25rem * var(--font-scale));        /* 20px */
    --font-size-h3-icon: calc(1rem * var(--font-scale));      /* 16px */
    
    /* 四级标题 - 表单标签、列表标题 */
    --font-size-h4: calc(1.125rem * var(--font-scale));       /* 18px */
    --font-size-h4-icon: calc(0.9rem * var(--font-scale));    /* 14.4px */
    
    /* 正文文字 - 主要内容文字 */
    --font-size-body: calc(1rem * var(--font-scale));         /* 16px */
    
    /* 副文字 - 次要信息、元数据 */
    --font-size-secondary: calc(0.875rem * var(--font-scale)); /* 14px */
    
    /* 描述文字 - 辅助说明、提示文字 */
    --font-size-caption: calc(0.75rem * var(--font-scale));   /* 12px */
    
    /* 小文字 - 版权信息、极小提示 */
    --font-size-small: calc(0.625rem * var(--font-scale));    /* 10px */
    
    /* ==========================================================================
       统一按钮大小规范 - 桌面端
       ========================================================================== */
    
    /* 大按钮 - 主要操作按钮 */
    --btn-large-padding: calc(1rem * var(--spacing-scale)) calc(2rem * var(--spacing-scale));
    --btn-large-font-size: var(--font-size-body);
    --btn-large-height: calc(3rem * var(--scale-factor));
    --btn-large-border-radius: calc(12px * var(--scale-factor));
    
    /* 中等按钮 - 常用操作按钮 */
    --btn-medium-padding: calc(0.75rem * var(--spacing-scale)) calc(1.5rem * var(--spacing-scale));
    --btn-medium-font-size: var(--font-size-secondary);
    --btn-medium-height: calc(2.5rem * var(--scale-factor));
    --btn-medium-border-radius: calc(10px * var(--scale-factor));
    
    /* 小按钮 - 次要操作按钮 */
    --btn-small-padding: calc(0.5rem * var(--spacing-scale)) calc(1rem * var(--spacing-scale));
    --btn-small-font-size: var(--font-size-caption);
    --btn-small-height: calc(2rem * var(--scale-factor));
    --btn-small-border-radius: calc(8px * var(--scale-factor));
    
    /* 图标按钮 - 纯图标操作按钮 */
    --btn-icon-size: calc(2.5rem * var(--scale-factor));
    --btn-icon-font-size: var(--font-size-body);
    --btn-icon-border-radius: calc(8px * var(--scale-factor));
    
    /* ==========================================================================
       统一间距规范
       ========================================================================== */
    
    --spacing-xs: calc(0.25rem * var(--spacing-scale));    /* 4px */
    --spacing-sm: calc(0.5rem * var(--spacing-scale));     /* 8px */
    --spacing-md: calc(1rem * var(--spacing-scale));       /* 16px */
    --spacing-lg: calc(1.5rem * var(--spacing-scale));     /* 24px */
    --spacing-xl: calc(2rem * var(--spacing-scale));       /* 32px */
    --spacing-xxl: calc(3rem * var(--spacing-scale));      /* 48px */
}

/* ==========================================================================
   基于视口宽度的动态缩放
   ========================================================================== */

html {
    font-size: clamp(12px, 1vw + 0.5rem, 18px);
}

/* 超大屏幕 (2560px+) */
@media (min-width: 2560px) {
    :root {
        --scale-factor: 1.2;
        --font-scale: 1.1;
        --spacing-scale: 1.15;
    }
    html { font-size: 18px; }
}

/* 大屏幕 (1920px - 2559px) */
@media (min-width: 1920px) and (max-width: 2559px) {
    :root {
        --scale-factor: 1.1;
        --font-scale: 1.05;
        --spacing-scale: 1.1;
    }
    html { font-size: 16px; }
}

/* 标准屏幕 (1600px - 1919px) */
@media (min-width: 1600px) and (max-width: 1919px) {
    :root {
        --scale-factor: 1;
        --font-scale: 1;
        --spacing-scale: 1;
    }
    html { font-size: 16px; }
}

/* 中等屏幕 (1200px - 1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
    :root {
        --scale-factor: 0.95;
        --font-scale: 0.95;
        --spacing-scale: 0.95;
    }
    html { font-size: 15px; }
}

/* 平板屏幕 (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
    :root {
        --scale-factor: 0.9;
        --font-scale: 0.9;
        --spacing-scale: 0.9;
    }
    html { font-size: 14px; }
}

/* ==========================================================================
   移动端字体大小规范 (768px以下)
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        --scale-factor: 0.85;
        --font-scale: 0.85;
        --spacing-scale: 0.85;
        
        /* 移动端字体大小重新定义 */
        --font-size-h1: calc(1.5rem * var(--font-scale));         /* 20.4px */
        --font-size-h1-icon: calc(1.25rem * var(--font-scale));   /* 17px */
        
        --font-size-h2: calc(1.25rem * var(--font-scale));        /* 17px */
        --font-size-h2-icon: calc(1rem * var(--font-scale));      /* 13.6px */
        
        --font-size-h3: calc(1.125rem * var(--font-scale));       /* 15.3px */
        --font-size-h3-icon: calc(0.9rem * var(--font-scale));    /* 12.24px */
        
        --font-size-h4: calc(1rem * var(--font-scale));           /* 13.6px */
        --font-size-h4-icon: calc(0.85rem * var(--font-scale));   /* 11.56px */
        
        --font-size-body: calc(0.9rem * var(--font-scale));       /* 12.24px */
        --font-size-secondary: calc(0.8rem * var(--font-scale));  /* 10.88px */
        --font-size-caption: calc(0.7rem * var(--font-scale));    /* 9.52px */
        --font-size-small: calc(0.6rem * var(--font-scale));      /* 8.16px */
        
        /* 移动端按钮大小重新定义 */
        --btn-large-padding: calc(0.75rem * var(--spacing-scale)) calc(1.5rem * var(--spacing-scale));
        --btn-large-height: calc(2.5rem * var(--scale-factor));
        
        --btn-medium-padding: calc(0.6rem * var(--spacing-scale)) calc(1.2rem * var(--spacing-scale));
        --btn-medium-height: calc(2.25rem * var(--scale-factor));
        
        --btn-small-padding: calc(0.4rem * var(--spacing-scale)) calc(0.8rem * var(--spacing-scale));
        --btn-small-height: calc(1.75rem * var(--scale-factor));
        
        --btn-icon-size: calc(2.25rem * var(--scale-factor));
    }
    html { font-size: 13px; }
}

/* ==========================================================================
   超小屏幕字体大小规范 (480px以下)
   ========================================================================== */

@media (max-width: 480px) {
    :root {
        /* 超小屏幕字体进一步缩小 */
        --font-size-h1: calc(1.25rem * var(--font-scale));        /* 17px */
        --font-size-h1-icon: calc(1rem * var(--font-scale));      /* 13.6px */
        
        --font-size-h2: calc(1.125rem * var(--font-scale));       /* 15.3px */
        --font-size-h2-icon: calc(0.9rem * var(--font-scale));    /* 12.24px */
        
        --font-size-h3: calc(1rem * var(--font-scale));           /* 13.6px */
        --font-size-h3-icon: calc(0.85rem * var(--font-scale));   /* 11.56px */
        
        --font-size-h4: calc(0.9rem * var(--font-scale));         /* 12.24px */
        --font-size-h4-icon: calc(0.8rem * var(--font-scale));    /* 10.88px */
        
        --font-size-body: calc(0.85rem * var(--font-scale));      /* 11.56px */
        --font-size-secondary: calc(0.75rem * var(--font-scale)); /* 10.2px */
        --font-size-caption: calc(0.65rem * var(--font-scale));   /* 8.84px */
        --font-size-small: calc(0.55rem * var(--font-scale));     /* 7.48px */
        
        /* 超小屏幕按钮进一步缩小 */
        --btn-large-padding: calc(0.6rem * var(--spacing-scale)) calc(1.2rem * var(--spacing-scale));
        --btn-large-height: calc(2.25rem * var(--scale-factor));
        
        --btn-medium-padding: calc(0.5rem * var(--spacing-scale)) calc(1rem * var(--spacing-scale));
        --btn-medium-height: calc(2rem * var(--scale-factor));
        
        --btn-small-padding: calc(0.35rem * var(--spacing-scale)) calc(0.7rem * var(--spacing-scale));
        --btn-small-height: calc(1.5rem * var(--scale-factor));
        
        --btn-icon-size: calc(2rem * var(--scale-factor));
    }
}

/* ==========================================================================
   统一字体类定义
   ========================================================================== */

/* 标题类 */
.typography-h1 {
    font-size: var(--font-size-h1);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.typography-h2 {
    font-size: var(--font-size-h2);
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

.typography-h3 {
    font-size: var(--font-size-h3);
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.typography-h4 {
    font-size: var(--font-size-h4);
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}

/* 文字类 */
.typography-body {
    font-size: var(--font-size-body);
    line-height: 1.5;
}

.typography-secondary {
    font-size: var(--font-size-secondary);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
}

.typography-caption {
    font-size: var(--font-size-caption);
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.6);
}

.typography-small {
    font-size: var(--font-size-small);
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   统一按钮类定义
   ========================================================================== */

.btn-base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

.btn-large {
    padding: var(--btn-large-padding);
    font-size: var(--btn-large-font-size);
    height: var(--btn-large-height);
    border-radius: var(--btn-large-border-radius);
}

.btn-medium {
    padding: var(--btn-medium-padding);
    font-size: var(--btn-medium-font-size);
    height: var(--btn-medium-height);
    border-radius: var(--btn-medium-border-radius);
}

.btn-small {
    padding: var(--btn-small-padding);
    font-size: var(--btn-small-font-size);
    height: var(--btn-small-height);
    border-radius: var(--btn-small-border-radius);
}

.btn-icon {
    padding: 0;
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    font-size: var(--btn-icon-font-size);
    border-radius: var(--btn-icon-border-radius);
}

/* 按钮颜色变体 */
.btn-primary {
    background: var(--gradient-primary);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3);
}

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

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

.btn-success {
    background: var(--gradient-success);
    color: white;
}

.btn-warning {
    background: var(--warning-color);
    color: #1a1a1a;
}

.btn-danger {
    background: var(--error-color);
    color: white;
}

/* ==========================================================================
   移动端字体和按钮优化
   ========================================================================== */

@media (max-width: 768px) {
    .typography-h1,
    .typography-h2,
    .typography-h3,
    .typography-h4 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .btn-base {
        min-width: 0;
        flex-shrink: 1;
    }
}

/* ==========================================================================
   页面级别的统一应用
   ========================================================================== */

/* 页面标题统一 */
.page-title,
.panel-title,
.section-title {
    font-size: var(--font-size-h1);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.page-title i,
.panel-title i,
.section-title i {
    color: var(--primary-color);
    font-size: var(--font-size-h1-icon);
}

/* 副标题统一 */
.page-subtitle,
.panel-subtitle,
.section-subtitle {
    font-size: var(--font-size-h2);
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
}

/* 卡片标题统一 */
.card-title {
    font-size: var(--font-size-h3);
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    color: white;
}

/* 表单标签统一 */
.form-label {
    font-size: var(--font-size-h4);
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
}

/* 统计数据统一 */
.stat-value {
    font-size: var(--font-size-h2);
    font-weight: 700;
    color: var(--primary-color);
}

.stat-label {
    font-size: var(--font-size-caption);
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 用户信息统一 */
.user-name {
    font-size: var(--font-size-h4);
    font-weight: 600;
    color: white;
}

.user-meta {
    font-size: var(--font-size-secondary);
    color: rgba(255, 255, 255, 0.6);
}

/* 导航标签统一 */
.nav-tab,
.ranking-tab,
.season-btn {
    font-size: var(--font-size-secondary);
    font-weight: 500;
    padding: var(--btn-medium-padding);
    height: var(--btn-medium-height);
    border-radius: var(--btn-medium-border-radius);
}

/* 筛选器统一 */
.filter-select,
.form-select {
    font-size: var(--font-size-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    height: var(--btn-medium-height);
    border-radius: var(--btn-small-border-radius);
}

/* 输入框统一 */
.form-input {
    font-size: var(--font-size-body);
    padding: var(--spacing-sm) var(--spacing-md);
    height: var(--btn-medium-height);
    border-radius: var(--btn-small-border-radius);
}

/* 移动端特殊优化 */
@media (max-width: 768px) {
    .page-title,
    .panel-title,
    .section-title {
        font-size: var(--font-size-h1);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .page-title i,
    .panel-title i,
    .section-title i {
        font-size: var(--font-size-h1-icon);
    }
    
    .page-subtitle,
    .panel-subtitle,
    .section-subtitle {
        font-size: var(--font-size-h2);
    }
    
    .stat-value {
        font-size: var(--font-size-h3);
    }
    
    .nav-tab,
    .ranking-tab,
    .season-btn {
        font-size: var(--font-size-caption);
        padding: var(--btn-small-padding);
        height: var(--btn-small-height);
    }
}