/**
 * 阿常积分管家 - 手机端适配样式
 * 
 * 提供手机端专属的响应式布局和交互优化
 * 包括：底部导航栏、触摸优化、手势支持等
 */

/* ========================================
   手机端基础适配（< 768px）
   ======================================== */
@media screen and (max-width: 767px) {
    /* 隐藏桌面端导航栏 */
    .navbar {
        display: none;
    }
    
    /* 显示手机端底部导航栏 */
    .mobile-navbar {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-color);
        padding: 8px 0;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
        z-index: 1000;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }
    
    /* 主内容区域底部留出导航栏空间 */
    .main-content {
        position: relative; /* 作为 tool-frame-container 绝对定位的参照容器 */
        padding: 16px;
        padding-bottom: calc(70px + env(safe-area-inset-bottom));
    }

    /* 工具内联框架（移动端）：
       用绝对定位铺满 main-content，使 iframe 高度正确计算（height:100% 无法从 flex 拉伸父级解析），
       并为底部导航预留空间避免 iframe 内容被遮挡 */
    .tool-frame-container.active {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: calc(86px + env(safe-area-inset-bottom));
        height: auto;
        z-index: 5;
    }
    
    /* 学生卡片网格 - 手机端单列 */
    .students-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    /* 学生卡片适配 */
    .student-card {
        padding: 20px;
        border-radius: var(--radius-lg);
    }
    
    /* 卡片头像区域 */
    .card-avatar {
        min-height: 120px;
        padding-top: 10px;
        margin-bottom: 16px;
    }
    
    .avatar-container {
        width: 100px;
        height: 100px;
    }
    
    .avatar-container img {
        width: 90px;
        height: 90px;
    }
    
    /* 卡片信息区域 */
    .card-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .student-name {
        font-size: 18px;
        margin-bottom: 8px;
    }
    
    .student-points {
        font-size: 24px;
    }
    
    /* 模态框适配 */
    .modal-content {
        width: 95%;
        max-width: none;
        margin: 10px auto;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-header {
        padding: 16px;
    }
    
    .modal-body {
        padding: 16px;
    }
    
    /* 批量操作工具栏 */
    .batch-toolbar {
        flex-direction: column;
        gap: 12px;
        padding: 12px 16px;
    }
    
    .batch-info {
        width: 100%;
        justify-content: space-between;
    }
    
    .batch-action-btn {
        width: 100%;
    }
    
    /* 光荣榜适配 */
    .ranking-header {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    
    .ranking-title {
        justify-content: center;
    }
    
    .ranking-tabs {
        flex-wrap: wrap;
    }
    
    .ranking-tab {
        flex: 1;
        min-width: 45%;
    }
    
    /* Toast 提示适配：居中于屏幕，字号加大，长文本自动换行，保证可读性 */
    .toast {
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translate(-50%, -50%);
        width: auto;
        max-width: calc(100vw - 48px);
        padding: 16px 24px;
    }
    .toast.active {
        transform: translate(-50%, -50%);
    }
    .toast-icon {
        font-size: 20px;
        flex-shrink: 0;
    }
    .toast-message {
        font-size: 16px;
        line-height: 1.5;
        word-break: break-word;
    }
    
    /* 搜索框适配 */
    .nav-center {
        display: none;
    }
    
    /* 按钮尺寸适配 */
    .btn {
        padding: 12px 20px;
        font-size: 16px;
    }
    
    /* 输入框适配 */
    input, select, textarea {
        font-size: 16px;
    }
    
    /* 表格适配 */
    .table-container {
        overflow-x: auto;
    }
    
    table {
        font-size: 14px;
    }
    
    /* 后台管理页面适配 */
    .admin-container {
        padding: 16px;
    }
    
    .admin-sidebar {
        display: none;
    }
    
    .admin-content {
        margin-left: 0;
    }
    
    /* 移动端菜单按钮 */
    .mobile-menu-btn {
        display: flex !important;
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: 1001;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--primary-color);
        color: white;
        border: none;
        font-size: 24px;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }
    
    /* 移动端侧边菜单 */
    .mobile-drawer {
        display: block !important;
        position: fixed;
        top: 0;
        right: -280px;
        width: 280px;
        height: 100%;
        background: var(--bg-secondary);
        z-index: 1002;
        transition: right 0.3s ease;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
    }
    
    .mobile-drawer.open {
        right: 0;
    }
    
    .mobile-drawer-overlay {
        display: none !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1001;
    }
    
    .mobile-drawer-overlay.open {
        display: block !important;
    }
    
    .mobile-drawer-header {
        padding: 20px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .mobile-drawer-title {
        font-size: 18px;
        font-weight: 600;
    }
    
    .mobile-drawer-close {
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        font-size: 24px;
        cursor: pointer;
    }
    
    .mobile-drawer-menu {
        padding: 16px;
    }
    
    .mobile-drawer-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        border-radius: var(--radius-md);
        color: var(--text-primary);
        text-decoration: none;
        transition: background 0.2s;
        /* 移动端点击修复：div 默认无 cursor:pointer，微信/X5 内核不启用快速点击，
           且轻点易被判为双击缩放手势而吞掉 click（表现为"要点好几次才灵"）。
           cursor:pointer + touch-action:manipulation 消除 300ms 延迟与双击缩放拦截。 */
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        -webkit-user-select: none;
    }
    
    .mobile-drawer-item:hover,
    .mobile-drawer-item:active {
        background: var(--primary-bg);
    }
    
    .mobile-drawer-item.active {
        background: var(--primary-color);
        color: white;
    }
    
    .mobile-drawer-icon {
        font-size: 20px;
    }
    
}

/* ========================================
   平板端适配（768px - 1023px）
   ======================================== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .navbar {
        padding: 0 16px;
    }
    
    .nav-center {
        max-width: 300px;
        margin: 0 20px;
    }
    
    .nav-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .nav-btn span:last-child {
        display: none;
    }
    
    .students-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .main-content {
        padding: 20px;
    }
}

/* ========================================
   手机端底部导航栏
   ======================================== */
.mobile-navbar {
    display: none;
    justify-content: space-around;
    align-items: center;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1 1 0;
    min-width: 0;
}

.mobile-nav-item:active {
    transform: scale(0.95);
}

.mobile-nav-item.active {
    color: var(--primary-color);
}

.mobile-nav-icon {
    font-size: 22px;
}

.mobile-nav-text {
    font-size: 11px;
    white-space: nowrap;
}

/* ========================================
   触摸交互优化
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    /* 增大点击区域 */
    .student-card {
        cursor: default;
    }
    
    .student-card:active {
        transform: scale(0.98);
        transition: transform 0.1s;
    }
    
    .btn:active {
        transform: scale(0.95);
    }
    
    .nav-btn:active {
        transform: scale(0.95);
    }
    
    /* 移除 hover 效果 */
    .student-card:hover {
        transform: none;
        box-shadow: 0 4px 20px rgba(123, 104, 238, 0.15);
    }
    
    .student-card:hover::before {
        opacity: 0;
    }
    
    /* 滑动操作提示 */
    .swipe-hint {
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        padding: 8px 12px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        border-radius: var(--radius-sm);
        font-size: 12px;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    .student-card.swiping-left .swipe-hint {
        right: 10px;
        opacity: 1;
    }
    
    .student-card.swiping-right .swipe-hint {
        left: 10px;
        opacity: 1;
    }
}

/* ========================================
   下拉刷新样式
   ======================================== */
.pull-to-refresh {
    position: relative;
    overflow-y: auto;
}

.pull-to-refresh-indicator {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    transition: top 0.3s;
    z-index: 10;
}

.pull-to-refresh-indicator.pulling {
    top: 0;
}

.pull-to-refresh-indicator.refreshing {
    top: 20px;
    animation: spin 1s linear infinite;
}

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

/* ========================================
   手势操作样式
   ======================================== */
.swipe-actions {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 600;
    color: white;
}

.swipe-action-left {
    right: 100%;
    background: var(--secondary-color);
}

.swipe-action-right {
    left: 100%;
    background: var(--success-color);
}

/* ========================================
   安全区域适配（iPhone X 等）
   ======================================== */
@supports (padding: env(safe-area-inset-bottom)) {
    .mobile-navbar {
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }
    
    .main-content {
        padding-bottom: calc(70px + env(safe-area-inset-bottom));
    }
    
    .modal-content {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ========================================
   横屏模式适配
   ======================================== */
@media screen and (max-width: 767px) and (orientation: landscape) {
    .mobile-navbar {
        flex-direction: row;
        padding: 4px 0;
    }
    
    .mobile-nav-item {
        flex-direction: row;
        gap: 6px;
        padding: 6px 10px;
    }
    
    .mobile-nav-icon {
        font-size: 18px;
    }
    
    .main-content {
        padding-bottom: calc(50px + env(safe-area-inset-bottom));
    }
    
    .students-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .card-avatar {
        min-height: 80px;
    }
    
    .avatar-container {
        width: 70px;
        height: 70px;
    }
}

/* ========================================
   深色模式适配
   ======================================== */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --primary-color: #6366F1;
        --primary-light: #818CF8;
        --primary-dark: #4F46E5;
        --primary-bg: #1E1E2E;
        
        --bg-primary: #0F0F1A;
        --bg-secondary: #1E1E2E;
        --bg-tertiary: #2D2D44;
        
        --text-primary: #E8E8F0;
        --text-secondary: #A0A0B0;
        --text-tertiary: #707080;
        
        --border-color: #2D2D44;
        --border-light: #3D3D5C;
    }
}

/* ========================================
   打印样式
   ======================================== */
@media print {
    .mobile-navbar,
    .navbar,
    .mobile-menu-btn,
    .mobile-drawer {
        display: none !important;
    }
    
    .main-content {
        padding: 20px;
    }
    
    .student-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ========================================
   辅助功能优化
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
    .student-card {
        border: 2px solid var(--text-primary);
    }
    
    .mobile-nav-item.active {
        background: var(--primary-color);
    }
}

/* ========================================
   移动端页面切换样式
   ======================================== */

/* 页面容器 - 默认隐藏 */
.page {
    display: none;
    width: 100%;
    min-height: 100%;
}

/* 激活的页面 - 显示 */
.page.active {
    display: block;
}

/* ========================================
   移动端学生卡片样式
   ======================================== */
.student-card-mobile {
    display: flex;
    align-items: center;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.student-avatar-mobile {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 16px;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.student-avatar-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.student-info-mobile {
    flex: 1;
}

.student-name-mobile {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.student-level-mobile {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.student-points-mobile {
    font-size: 14px;
    color: var(--primary-color);
    font-weight: 500;
}

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

.student-actions-mobile .action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.2s;
}

.student-actions-mobile .action-btn:active {
    transform: scale(0.9);
}

.student-actions-mobile .action-btn.add {
    background: var(--success-color, #10B981);
    color: white;
}

.student-actions-mobile .action-btn.subtract {
    background: var(--danger-color, #EF4444);
    color: white;
}

/* ========================================
   移动端顶部栏样式
   ======================================== */
.mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.mobile-header-left,
.mobile-header-right {
    display: flex;
    align-items: center;
}

.mobile-header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 0 12px;
}

.class-selector-mobile {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    min-width: 120px;
}

/* 说明：.mobile-menu-btn（右上角抽屉开关）的样式由文件顶部
   @media (max-width: 767px) 内定义（主题色圆形按钮、position: fixed 等），
   此处仅保留 .mobile-search-btn，避免后声明的透明背景样式覆盖菜单按钮。 */
.mobile-search-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   移动端侧边栏激活状态
   ======================================== */
.mobile-drawer.active {
    right: 0;
}

    .mobile-drawer-overlay.active {
        display: block !important;
    }

/* ========================================
   移动端搜索页面
   ======================================== */
.mobile-search-page {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    z-index: 1003;
    flex-direction: column;
}

.mobile-search-page.active {
    display: flex;
}

.mobile-search-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
}

.mobile-search-input {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 16px;
}

.mobile-search-close {
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
}

.mobile-search-results {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.mobile-search-result-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.mobile-search-result-item .emoji {
    margin-right: 12px;
    font-size: 24px;
}

.mobile-search-result-item .name {
    flex: 1;
    font-size: 16px;
}

.mobile-search-result-item .points {
    color: var(--primary-color);
    font-size: 14px;
}

.mobile-search-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

/* ========================================
   移动端空状态
   ======================================== */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.empty-state .empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.empty-state h3 {
    font-size: 20px;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.empty-state p {
    font-size: 14px;
}

/* ========================================
   移动端内容区域
   ======================================== */
.mobile-content {
    padding: 16px;
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

/* ========================================
   移动端学生详情弹窗
   ======================================== */
.mobile-student-detail {
    padding: 16px;
}

.mobile-student-detail .detail-header {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.mobile-student-detail .detail-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 16px;
    background: var(--bg-tertiary);
}

.mobile-student-detail .detail-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-student-detail .detail-info h3 {
    font-size: 20px;
    margin-bottom: 8px;
}

.mobile-student-detail .detail-info p {
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.mobile-student-detail .detail-points {
    margin-top: 8px;
    font-size: 14px;
}

.mobile-student-detail .detail-actions {
    display: flex;
    gap: 12px;
}

.mobile-student-detail .detail-actions .btn {
    flex: 1;
    padding: 12px;
    border-radius: var(--radius-md);
    border: none;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mobile-student-detail .detail-actions .btn-primary {
    background: var(--primary-color);
    color: white;
}

.mobile-student-detail .detail-actions .btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ========================================
   移动端积分项目选择
   ======================================== */
.mobile-score-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-score-items .score-item-btn {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s;
}

.mobile-score-items .score-item-btn:active {
    background: var(--bg-tertiary);
}

.mobile-score-items .score-item-btn .emoji {
    margin-right: 12px;
    font-size: 20px;
}

.mobile-score-items .score-item-btn .name {
    flex: 1;
    text-align: left;
    font-size: 16px;
    color: var(--text-primary);
}

.mobile-score-items .score-item-btn .points {
    font-weight: 600;
    color: var(--primary-color);
}

.mobile-score-items .score-item-btn.custom {
    border-style: dashed;
    color: var(--text-secondary);
}

/* ========================================
   移动端自定义分数输入
   ======================================== */
.mobile-custom-points {
    padding: 16px;
}

.mobile-custom-points .form-input {
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 16px;
}

/* ========================================
   移动端商品列表
   ======================================== */
.mobile-products-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-products-list .mobile-product-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.mobile-products-list .mobile-product-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mobile-products-list .mobile-product-item .product-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-products-list .mobile-product-item .product-info .emoji {
    font-size: 24px;
}

.mobile-products-list .mobile-product-item .price {
    font-weight: 600;
    color: var(--primary-color);
}

.mobile-products-list .mobile-product-item .price.insufficient {
    color: var(--text-tertiary);
}

/* ========================================
   移动端光荣榜 - 全面优化版
   ======================================== */

/* 光荣榜页面容器 */
#rankingPage {
    flex-direction: column;
    min-height: 100%;
    background: var(--bg-primary);
}

/* 当光荣榜页面激活时显示为 flex */
#rankingPage.active {
    display: flex;
}

/* 光荣榜页面头部 - 优化间距和视觉层级 */
#rankingPage .ranking-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 24px 20px;
    margin: 0 12px 16px 12px;
    color: white;
    box-shadow: 0 4px 20px rgba(123, 104, 238, 0.3);
    position: relative;
    z-index: 10;
}

#rankingPage .ranking-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

#rankingPage .ranking-icon {
    font-size: 42px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

#rankingPage .ranking-title h2 {
    font-size: 24px;
    margin: 0;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

#rankingPage .ranking-title p {
    font-size: 14px;
    margin: 6px 0 0 0;
    opacity: 0.95;
    font-weight: 400;
}

/* 光荣榜内容区域 - 优化内边距 */
#rankingPage .ranking-content {
    background-color: transparent;
    border-radius: 0;
    padding: 0 12px 20px 12px;
    width: 100%;
    margin: 0;
    flex: 1;
    overflow-y: auto;
}

/* 标签切换 - 优化触控区域和视觉 */
#rankingPage .ranking-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding: 4px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

#rankingPage .ranking-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background-color: transparent;
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
}

#rankingPage .ranking-tab:active {
    transform: scale(0.96);
}

#rankingPage .ranking-tab.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(123, 104, 238, 0.35);
}

#rankingPage .ranking-tab .emoji {
    font-size: 18px;
}

/* 排名列表 - 优化间距 */
#rankingPage .ranking-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 排名项 - 全面优化 */
.ranking-item {
    display: flex;
    align-items: center;
    padding: 16px 18px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    margin-bottom: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.ranking-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
    transition: background 0.2s;
}

.ranking-item:active {
    transform: scale(0.98);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* 前三名特殊样式 - 优化视觉效果 */
.ranking-item.rank-1 {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #333;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4);
    border: 2px solid #FFD700;
}

.ranking-item.rank-1::before {
    background: #FF8C00;
}

.ranking-item.rank-2 {
    background: linear-gradient(135deg, #E8E8E8 0%, #C0C0C0 100%);
    color: #333;
    box-shadow: 0 4px 20px rgba(192, 192, 192, 0.4);
    border: 2px solid #C0C0C0;
}

.ranking-item.rank-2::before {
    background: #A0A0A0;
}

.ranking-item.rank-3 {
    background: linear-gradient(135deg, #CD7F32 0%, #B87333 100%);
    color: white;
    box-shadow: 0 4px 20px rgba(205, 127, 50, 0.4);
    border: 2px solid #CD7F32;
}

.ranking-item.rank-3::before {
    background: #8B4513;
}

/* 排名数字 - 优化字体和尺寸 */
.ranking-item .rank-number {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    margin-right: 14px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
}

.ranking-item.rank-1 .rank-number,
.ranking-item.rank-2 .rank-number,
.ranking-item.rank-3 .rank-number {
    background: rgba(255, 255, 255, 0.3);
    font-size: 24px;
}

/* 排名头像 - 优化尺寸 */
.ranking-item .rank-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ranking-item .rank-emoji {
    font-size: 32px;
    line-height: 1;
}

/* 排名信息 - 优化字体层级 */
.ranking-item .rank-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ranking-item .rank-name {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
    line-height: 1.3;
}

.ranking-item.rank-1 .rank-name,
.ranking-item.rank-2 .rank-name,
.ranking-item.rank-3 .rank-name {
    font-weight: 700;
}

.ranking-item .rank-detail {
    font-size: 13px;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-secondary);
    line-height: 1.4;
}

.ranking-item.rank-1 .rank-detail,
.ranking-item.rank-2 .rank-detail,
.ranking-item.rank-3 .rank-detail {
    color: rgba(0, 0, 0, 0.7);
}

.ranking-item.rank-3 .rank-detail {
    color: rgba(255, 255, 255, 0.9);
}

/* 排名积分 - 优化布局 */
.ranking-item .rank-points {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 12px;
    flex-shrink: 0;
    gap: 4px;
}

.ranking-item .rank-total {
    font-weight: 800;
    font-size: 16px;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 4px;
}

.ranking-item .rank-current {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ranking-item.rank-1 .rank-total,
.ranking-item.rank-2 .rank-total {
    color: #333;
}

.ranking-item.rank-3 .rank-total,
.ranking-item.rank-3 .rank-current {
    color: white;
}

.ranking-item.rank-1 .rank-current,
.ranking-item.rank-2 .rank-current {
    color: rgba(0, 0, 0, 0.7);
}

/* ========================================
   移动端商店
   ======================================== */
.mobile-product-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 16px;
    text-align: center;
}

.mobile-product-card .product-image {
    font-size: 48px;
    margin-bottom: 12px;
}

.mobile-product-card .product-name {
    font-weight: 600;
    margin-bottom: 8px;
}

.mobile-product-card .product-price {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 4px;
}

.mobile-product-card .product-stock {
    font-size: 12px;
    color: var(--text-secondary);
}

.mobile-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

/* ========================================
   移动端帮助
   ======================================== */
.mobile-help {
    padding: 16px;
}

.mobile-help h4 {
    margin-bottom: 16px;
    color: var(--text-primary);
}

.mobile-help p {
    margin-bottom: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ========================================
   移动端升级特效
   ======================================== */
.level-up-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.level-up-overlay.active {
    display: flex;
}

.level-up-content {
    text-align: center;
    color: white;
}

.level-up-content img {
    width: 150px;
    height: 150px;
    margin-bottom: 20px;
}

.level-up-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
}

.level-up-student {
    font-size: 20px;
    margin-bottom: 8px;
}

.level-up-level {
    font-size: 24px;
    color: #FFD700;
}

/* ========================================
   移动端加减分弹窗样式
   ======================================== */
.mobile-points-modal {
    padding: 16px;
}

.mobile-points-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.mobile-points-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    font-size: 32px;
}

.mobile-points-info {
    flex: 1;
}

.mobile-points-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.mobile-points-current {
    font-size: 14px;
    color: var(--text-secondary);
}

.mobile-points-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.mobile-point-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.mobile-point-card:active {
    transform: scale(0.95);
}

.mobile-point-card.add {
    border-color: #81C784;
}

.mobile-point-card.deduct {
    border-color: #EF9A9A;
}

.mobile-point-card.custom {
    background: var(--bg-tertiary);
    border: 2px dashed var(--border-color);
}

.mobile-point-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.mobile-point-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    text-align: center;
}

.mobile-point-value {
    font-size: 14px;
    font-weight: 700;
}

.mobile-point-card.add .mobile-point-value {
    color: #4CAF50;
}

.mobile-point-card.deduct .mobile-point-value {
    color: #EF5350;
}

.mobile-point-card.custom .mobile-point-value {
    color: var(--text-secondary);
}

/* ========================================
   光荣榜小屏幕设备适配（< 375px）
   ======================================== */
@media screen and (max-width: 374px) {
    /* 头部区域优化 */
    #rankingPage .ranking-header {
        padding: 18px 14px;
        margin: 0 8px 12px 8px;
    }
    
    #rankingPage .ranking-icon {
        font-size: 32px;
    }
    
    #rankingPage .ranking-title h2 {
        font-size: 20px;
    }
    
    #rankingPage .ranking-title p {
        font-size: 12px;
    }
    
    /* 标签切换优化 */
    #rankingPage .ranking-tabs {
        gap: 8px;
        margin-bottom: 16px;
    }
    
    #rankingPage .ranking-tab {
        padding: 10px 12px;
        font-size: 13px;
        min-height: 40px;
    }
    
    #rankingPage .ranking-tab .emoji {
        font-size: 14px;
    }
    
    /* 排名项优化 */
    .ranking-item {
        padding: 12px 14px;
    }
    
    .ranking-item .rank-number {
        width: 32px;
        height: 32px;
        font-size: 14px;
        margin-right: 10px;
    }
    
    .ranking-item.rank-1 .rank-number,
    .ranking-item.rank-2 .rank-number,
    .ranking-item.rank-3 .rank-number {
        font-size: 18px;
    }
    
    .ranking-item .rank-avatar {
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }
    
    .ranking-item .rank-emoji {
        font-size: 24px;
    }
    
    .ranking-item .rank-name {
        font-size: 14px;
        margin-bottom: 4px;
    }
    
    .ranking-item .rank-detail {
        font-size: 11px;
    }
    
    .ranking-item .rank-total {
        font-size: 13px;
    }
    
    .ranking-item .rank-current {
        font-size: 11px;
    }
}

/* ========================================
   光荣榜中等屏幕设备适配（375px - 414px）
   ======================================== */
@media screen and (min-width: 375px) and (max-width: 414px) {
    #rankingPage .ranking-header {
        padding: 20px 16px;
        margin: 0 10px 14px 10px;
    }
    
    #rankingPage .ranking-icon {
        font-size: 38px;
    }
    
    #rankingPage .ranking-title h2 {
        font-size: 22px;
    }
    
    .ranking-item {
        padding: 14px 16px;
    }
    
    .ranking-item .rank-avatar {
        width: 46px;
        height: 46px;
    }
    
    .ranking-item .rank-emoji {
        font-size: 28px;
    }
}

/* ========================================
   光荣榜大屏幕手机适配（> 414px）
   ======================================== */
@media screen and (min-width: 415px) and (max-width: 767px) {
    #rankingPage .ranking-header {
        padding: 28px 24px;
        margin: 0 16px 20px 16px;
        border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    }
    
    #rankingPage .ranking-icon {
        font-size: 48px;
    }
    
    #rankingPage .ranking-title h2 {
        font-size: 26px;
    }
    
    #rankingPage .ranking-title p {
        font-size: 15px;
    }
    
    #rankingPage .ranking-content {
        padding: 0 16px 24px 16px;
    }
    
    #rankingPage .ranking-tabs {
        gap: 16px;
        margin-bottom: 24px;
    }
    
    #rankingPage .ranking-tab {
        padding: 16px 24px;
        font-size: 16px;
        min-height: 52px;
    }
    
    .ranking-item {
        padding: 18px 20px;
    }
    
    .ranking-item .rank-number {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
    
    .ranking-item .rank-avatar {
        width: 56px;
        height: 56px;
    }
    
    .ranking-item .rank-emoji {
        font-size: 36px;
    }
    
    .ranking-item .rank-name {
        font-size: 17px;
    }
    
    .ranking-item .rank-detail {
        font-size: 14px;
    }
    
    .ranking-item .rank-total {
        font-size: 17px;
    }
}

/* ========================================
   光荣榜横屏模式适配
   ======================================== */
@media screen and (max-width: 767px) and (orientation: landscape) {
    #rankingPage .ranking-header {
        padding: 16px 20px;
        margin: 0 12px 12px 12px;
    }
    
    #rankingPage .ranking-icon {
        font-size: 32px;
    }
    
    #rankingPage .ranking-title h2 {
        font-size: 20px;
    }
    
    #rankingPage .ranking-tabs {
        margin-bottom: 16px;
    }
    
    #rankingPage .ranking-tab {
        padding: 10px 16px;
        min-height: 40px;
    }
    
    .ranking-item {
        padding: 12px 16px;
    }
    
    .ranking-item .rank-avatar {
        width: 44px;
        height: 44px;
    }
    
    .ranking-item .rank-emoji {
        font-size: 28px;
    }
    
    /* 横屏时显示更多排名项 */
    #rankingPage .ranking-list {
        gap: 10px;
    }
}

/* ========================================
   光荣榜安全区域适配（刘海屏）
   ======================================== */
@supports (padding: env(safe-area-inset-top)) {
    #rankingPage .ranking-header {
        padding-top: calc(24px + env(safe-area-inset-top));
    }
}

/* ========================================
   光荣榜暗黑模式适配
   ======================================== */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] #rankingPage .ranking-item {
        background: var(--bg-secondary);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    }
    
    [data-theme="auto"] #rankingPage .ranking-item.rank-1,
    [data-theme="auto"] #rankingPage .ranking-item.rank-2,
    [data-theme="auto"] #rankingPage .ranking-item.rank-3 {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    }
    
    [data-theme="auto"] #rankingPage .ranking-tabs {
        background: var(--bg-secondary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
}

/* ========================================
   光荣榜高对比度模式适配
   ======================================== */
@media (prefers-contrast: high) {
    .ranking-item {
        border: 2px solid var(--border-color);
    }
    
    .ranking-item.rank-1 {
        border: 3px solid #FFD700;
    }
    
    .ranking-item.rank-2 {
        border: 3px solid #C0C0C0;
    }
    
    .ranking-item.rank-3 {
        border: 3px solid #CD7F32;
    }
}

/* ========================================
   光荣榜减少动画模式适配
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .ranking-item,
    #rankingPage .ranking-tab {
        transition: none;
    }
    
    .ranking-item:active,
    #rankingPage .ranking-tab:active {
        transform: none;
    }
}

/* ========================================
   手机端常用功能面板样式
   ======================================== */

/* 常用功能面板容器 */
.mobile-quick-actions {
    padding: 8px;
}

/* 常用功能网格布局 */
.mobile-quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 8px 0;
}

/* 常用功能项 */
.mobile-quick-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.mobile-quick-action-item:hover {
    background: var(--primary-bg);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.mobile-quick-action-item:active {
    transform: scale(0.98);
}

/* 常用功能图标 */
.mobile-quick-action-icon {
    font-size: 36px;
    margin-bottom: 12px;
}

/* 常用功能标题 */
.mobile-quick-action-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    text-align: center;
}

/* 常用功能描述 */
.mobile-quick-action-desc {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.4;
}

/* 手机端弹窗内常用功能适配 */
@media screen and (max-width: 767px) {
    .mobile-quick-actions-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    
    .mobile-quick-action-item {
        padding: 16px 8px;
    }
    
    .mobile-quick-action-icon {
        font-size: 28px;
        margin-bottom: 8px;
    }
    
    .mobile-quick-action-title {
        font-size: 14px;
    }
    
    .mobile-quick-action-desc {
        font-size: 11px;
    }
}

/* 小屏幕手机适配 */
@media screen and (max-width: 375px) {
    .mobile-quick-actions-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .mobile-quick-action-item {
        padding: 12px 6px;
    }
    
    .mobile-quick-action-icon {
        font-size: 24px;
    }
    
    .mobile-quick-action-title {
        font-size: 13px;
    }
    
    .mobile-quick-action-desc {
        display: none;
    }
}

/* ========================================
   左侧导航栏 - 响应式适配
   ======================================== */

/**
 * 移动端（< 768px）：完全隐藏侧边栏
 * 保持现有底部导航栏和抽屉菜单
 */
@media screen and (max-width: 767px) {
    .sidebar {
        display: none !important;
    }

    .app-body {
        flex-direction: column;
    }

    /* 移动端侧边栏已隐藏，恢复整页滚动，避免 100vh 与地址栏高度打架 */
    #app {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
    }
}

/**
 * 平板端（768px - 1023px）：侧边栏默认折叠
 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .sidebar {
        width: var(--sidebar-collapsed-width, 60px);
        min-width: var(--sidebar-collapsed-width, 60px);
    }

    .sidebar:not(.collapsed) {
        width: var(--sidebar-width, 240px);
        min-width: var(--sidebar-width, 240px);
    }
}

/**
 * 移动端点击修复（2026-09-02）
 * 页面内 div 菜单项（后台管理页 / 我的页）原本无任何样式：
 * 1. 无 cursor:pointer → 微信/X5 内核不启用快速点击，click 有 ~300ms 延迟；
 * 2. 默认 touch-action → 快速轻点被判为双击缩放手势，click 被吞。
 * 表现为"按钮要点好几次才有反应"。统一补齐触控样式。
 */
.admin-menu-item,
.profile-menu-item {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

@media (hover: none) and (pointer: coarse) {
    .admin-menu-item,
    .profile-menu-item {
        min-height: 48px; /* 满足触控最小热区建议（Apple HIG 44pt / Material 48dp） */
        box-sizing: border-box;
    }
}