/* 基础响应式工具类 */
@media (max-width:768px){
    .d-mobile-none{display:none}
    .d-mobile-block{display:block}
    .d-mobile-flex{display:flex}
    .flex-mobile-column{flex-direction:column}
    .flex-mobile-row{flex-direction:row}
    .text-mobile-center{text-align:center}
    .text-mobile-left{text-align:left}
    .text-mobile-right{text-align:right}
    .p-mobile-0{padding:0}
    .p-mobile-1{padding:5px}
    .p-mobile-2{padding:10px}
    .p-mobile-3{padding:15px}
    .p-mobile-4{padding:20px}
    .m-mobile-0{margin:0}
    .m-mobile-1{margin:5px}
    .m-mobile-2{margin:10px}
    .m-mobile-3{margin:15px}
    .m-mobile-4{margin:20px}
    .mx-mobile-auto{margin-left:auto;margin-right:auto}
    .grid-mobile-1{grid-template-columns:repeat(1,1fr)!important}
    .grid-mobile-2{grid-template-columns:repeat(2,1fr)!important}
    .grid-mobile-3{grid-template-columns:repeat(3,1fr)!important}
    .w-mobile-25{width:25%!important}
    .w-mobile-50{width:50%!important}
    .w-mobile-75{width:75%!important}
    .w-mobile-100{width:100%!important}
    .h-mobile-25{height:25%!important}
    .h-mobile-50{height:50%!important}
    .h-mobile-75{height:75%!important}
    .h-mobile-100{height:100%!important}
    .h-mobile-auto{height:auto!important}
    .overflow-x-auto{overflow-x:auto}
    .overflow-y-auto{overflow-y:auto}
    .text-sm{font-size:14px!important}
    .text-base{font-size:16px!important}
    .text-lg{font-size:18px!important}
    .font-medium{font-weight:500}
    .font-bold{font-weight:700}
    .rounded-sm{border-radius:4px}
    .rounded-md{border-radius:8px}
    .rounded-lg{border-radius:12px}
    .shadow-sm{box-shadow:0 1px 3px rgba(0,0,0,.1)}
    .shadow-md{box-shadow:0 4px 6px rgba(0,0,0,.1)}
}

/* 导航栏响应式样式 */
@media (max-width:768px){
    .navbar{
        flex-direction:row;
        gap:15px;
        padding:10px 0;
        align-items:center;
        justify-content:space-between;
    }
    .logo h1{
        font-size:20px;
    }
    .nav-links{
        flex-direction:row;
        gap:15px;
        width:auto;
        align-items:center;
    }
    .nav-links a{
        width:auto;
        text-align:center;
        padding:8px 16px;
        border-radius:20px;
    }
    .user-menu{
        flex-wrap:wrap;
        justify-content:center;
    }
    .user-info{
        flex-wrap:wrap;
        justify-content:center;
    }
}

/* 主要内容区域响应式样式 */
@media (max-width:768px){
    .main-content{
        grid-template-columns:1fr!important;
        gap:20px;
    }
    .sidebar{
        order:2;
        margin-top:20px;
    }
    .right-sidebar{
        order:3;
        grid-template-columns:1fr!important;
    }
    .forum-grid{
        grid-template-columns:1fr!important;
        gap:15px;
    }
    .forum-card{
        padding:15px;
    }
    .forum-header{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }
    .forum-stats{
        text-align:left;
    }
    .post-list{
        gap:10px;
    }
    .post-item{
        padding:10px;
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }
    .post-content{
        width:100%;
    }
    .post-title{
        font-size:15px;
        line-height:1.4;
    }
    .post-meta{
        flex-wrap:wrap;
        gap:10px;
    }
    .post-stats{
        width:100%;
        justify-content:flex-start;
        gap:15px;
    }
    .post-row{
        grid-template-columns:1fr!important;
        gap:10px;
    }
}

/* 表单元素响应式样式 */
@media (max-width:768px){
    .form-group{
        margin-bottom:15px;
    }
    .form-label{
        display:block;
        margin-bottom:8px;
        font-weight:500;
    }
    input, select, textarea, .mobile-input{
        width:100%!important;
        padding:12px!important;
        font-size:16px!important;
        border-radius:8px!important;
        border:1px solid var(--border);
        box-sizing:border-box;
    }
    textarea, .mobile-textarea{
        min-height:120px!important;
        resize:vertical;
    }
    button, .btn, .mobile-button{
        width:auto;
        padding:8px 20px;
        min-height:44px;
        font-size:16px;
        border-radius:20px;
        box-sizing:border-box;
        white-space:nowrap;
    }
    .btn-full-width{
        width:100%;
    }
    .btn-group{
        flex-direction:row;
        gap:10px;
        flex-wrap:wrap;
    }
    .btn-group .btn{
        flex:1;
        min-width:120px;
    }
    .checkbox-group, .radio-group{
        flex-direction:column;
        gap:8px;
    }
    .checkbox-item, .radio-item{
        flex-direction:row;
        align-items:center;
        gap:8px;
    }
}

/* 卡片和容器响应式样式 */
@media (max-width:768px){
    .card, .forum-card, .stats-card, .online-users, .advertisement{
        padding:15px;
        border-radius:8px;
    }
    .card-header, .forum-header{
        padding-bottom:15px;
    }
    .card-body, .forum-body{
        padding-top:15px;
    }
    .stats-grid{
        grid-template-columns:repeat(2,1fr)!important;
        gap:15px;
    }
    .stat-item{
        padding:12px;
    }
    .stat-value{
        font-size:20px;
    }
    .stat-name{
        font-size:12px;
    }
    .color-picker{
        width:280px;
        right:10px;
        bottom:70px;
        padding:15px;
    }
    .color-options{
        grid-template-columns:repeat(4,1fr);
        gap:8px;
    }
    .color-option{
        width:35px;
        height:35px;
    }
}

/* 导航和菜单响应式样式 */
.mobile-menu-btn{
    display:none;
    background:transparent;
    border:0;
    font-size:24px;
    cursor:pointer;
    color:var(--text);
    padding:8px;
    border-radius:50%;
    transition:all 0.3s ease;
}

.mobile-menu-btn:hover{
    background-color:var(--bg);
}

@media (max-width:768px){
    .mobile-menu-btn{
        display:none;
    }
    .nav-links{
        position:static;
        flex-direction:row;
        gap:15px;
        flex-wrap:wrap;
        justify-content:center;
        display:flex;
        background:var(--card);
        padding:0;
        box-shadow:none;
        z-index:auto;
    }
    
    .nav-links a{
        width:auto;
        text-align:center;
        padding:8px 12px;
        border-radius:8px;
    }
    
    .dropdown-menu{
        position:absolute;
        box-shadow:0 2px 10px rgba(0,0,0,.1);
        background:var(--card);
        width:auto;
        min-width:150px;
    }
    
    .dropdown-menu.active{
        display:block;
    }
}

/* 图片和媒体响应式样式 */
@media (max-width:768px){
    img, video, iframe, embed, object{
        max-width:100%;
        height:auto;
    }
    .post-content img, .resource-content img{
        max-width:100%!important;
        height:auto!important;
        border-radius:6px;
    }
    .user-avatar{
        width:32px;
        height:32px;
    }
    .user-avatar-small{
        width:24px;
        height:24px;
    }
    .logo img{
        height:32px;
    }
    .forum-icon{
        width:40px;
        height:40px;
        font-size:20px;
    }
}

/* 表格响应式样式 */
@media (max-width:768px){
    table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
        border-collapse:collapse;
    }
    th, td{
        padding:8px;
        font-size:14px;
    }
    .table-container{
        overflow-x:auto;
        border-radius:8px;
    }
}

/* 页脚响应式样式 */
@media (max-width:768px){
    footer{
        padding:20px 0;
    }
    .footer-content{
        grid-template-columns:repeat(2,1fr)!important;
        gap:20px;
    }
    .footer-section h4{
        margin-bottom:15px;
    }
    .footer-links li{
        margin-bottom:8px;
    }
    .copyright{
        margin-top:20px;
        padding-top:20px;
        font-size:12px;
    }
    .footer-content > div:last-child{
        grid-column:1/-1;
    }
}

/* 触摸支持和交互优化 */
.touch-action{
    touch-action:manipulation;
}

@media (max-width:768px){
    *{
        touch-action:manipulation;
    }
    a, button, .btn, .post-item, .category-list a, .color-option{
        touch-action:manipulation;
        cursor:pointer;
    }
    a, .btn, button, .post-item, .category-list a, .color-option, .user-badge{
        transition:all 0.2s ease;
    }
    a:active, .btn:active, button:active, .post-item:active, .category-list a:active, .color-option:active, .user-badge:active{
        transform:scale(0.98);
    }
    .theme-btn{
        bottom:15px;
        right:15px;
        width:45px;
        height:45px;
        font-size:18px;
    }
    .theme-switcher{
        z-index:1000;
    }
}

/* 字体大小响应式调整 */
@media (max-width:768px){
    h1{
        font-size:24px;
    }
    h2{
        font-size:20px;
    }
    h3{
        font-size:18px;
    }
    h4{
        font-size:16px;
    }
    h5{
        font-size:14px;
    }
    h6{
        font-size:12px;
    }
    body, p, a, span, div, input, textarea, select, button, .btn{
        font-size:14px;
    }
    .btn, button, input, textarea, select{
        font-size:16px;
    }
}

/* 表单和输入元素触摸优化 */
.mobile-input, input, select, textarea{
    padding:12px!important;
    font-size:16px!important;
    border-radius:8px;
    border:1px solid var(--border);
    background-color:var(--card);
    color:var(--text);
}

.mobile-button, .btn, button{
    padding:8px 20px!important;
    min-height:44px;
    font-size:16px!important;
    border-radius:20px;
    border:none;
    font-weight:500;
    cursor:pointer;
    transition:all 0.3s ease;
}

.mobile-textarea, textarea{
    min-height:120px!important;
    resize:vertical;
}

/* 特殊元素响应式样式 */
@media (max-width:768px){
    /* 隐藏移动端不需要的表头 */
    .posts-header,
    .post-table-header,
    .resource-table-header{
        display:none;
    }
    /* 确保帖子统计信息不换行 */
    .post-stats, .post-actions{
        flex-direction:row;
        justify-content:space-between;
        flex-wrap:nowrap;
        gap:15px;
        overflow-x:auto;
        padding:5px 0;
    }
    /* 修复回复/浏览/点赞/最后回复的显示 */
    .post-stats span,
    .post-actions span{
        white-space:nowrap;
        display:inline-flex;
        align-items:center;
        gap:5px;
    }
    /* 优化移动端论坛排版 */
    .forum-post-item .post-title{
        font-size:18px;
        margin-bottom:10px;
    }
    .forum-post-item .post-meta{
        display:flex;
        flex-direction:column;
        gap:5px;
    }
    .forum-post-item .post-meta > div{
        display:flex;
        align-items:center;
        gap:15px;
    }
    /* 修复主题按钮换行问题 */
    .nav-links a, .btn-theme, .nav-links button{
        white-space:nowrap;
    }
    /* 修复电脑端主题换行问题 */
    @media (min-width:769px){
        .nav-links a, .btn-theme, .nav-links button{
            white-space:nowrap;
        }
    }
    /* 用户菜单优化 */
    .user-menu{
        gap:10px;
    }
    /* 修复加号按钮过小问题 */
    .btn-fab, .btn-plus, .mobile-add-btn, .btn-add, .add-post-btn, .upload-resource-btn{
        width:56px;
        height:56px;
        font-size:28px;
        padding:0;
        display:flex;
        align-items:center;
        justify-content:center;
        background:var(--primary);
        color:#fff;
        border-radius:50%;
        box-shadow:0 4px 12px rgba(26,115,232,.3);
    }
    /* 修复资源引用样式 */
    .resource-reference{
        background:var(--bg);
        border:1px solid var(--border);
        border-radius:8px;
        padding:15px;
        margin:15px 0;
    }
    .resource-reference a{
        color:var(--primary);
        text-decoration:none;
        font-weight:500;
    }
    .resource-reference a:hover{
        text-decoration:underline;
    }
    /* 修复评论输入框样式 */
    #commentInput{
        width:100%!important;
        padding:12px!important;
        border-radius:8px!important;
        border:1px solid var(--border)!important;
        margin-bottom:10px;
    }
    /* 修复点赞收藏按钮样式 */
    .like-btn, .bookmark-btn, .comment-btn{
        display:flex;
        align-items:center;
        gap:5px;
        padding:8px 15px;
        border-radius:20px;
        background:var(--bg);
        border:1px solid var(--border);
        cursor:pointer;
        font-size:14px;
        transition:all 0.3s ease;
    }
    .like-btn:hover, .bookmark-btn:hover, .comment-btn:hover{
        background:var(--primary);
        color:#fff;
    }
    /* 修复卡片内边距 */
    .card, .forum-card, .resource-card{
        padding:15px;
    }
    /* 修复统计信息布局 */
    .stat-item{
        text-align:center;
    }
    /* 修复资源列表布局 */
    .resource-item{
        display:flex;
        flex-direction:column;
        gap:10px;
    }
    /* 修复用户列表布局 */
    .user-list{
        gap:8px;
    }
    /* 修复签到排名布局 */
    .sign-ranking{
        padding:15px;
    }
    .sign-item{
        padding:10px;
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }
}

/* 确保所有元素都能正确响应触摸事件 */
@media (max-width:768px){
    .no-select{
        user-select:none;
    }
    .clickable{
        cursor:pointer;
    }
    .not-clickable{
        cursor:not-allowed;
    }
    /* 修复iOS上的滚动问题 */
    body{
        -webkit-overflow-scrolling:touch;
        overflow-x:hidden;
    }
    /* 修复iOS上的链接点击问题 */
    a{
        -webkit-tap-highlight-color:rgba(0,0,0,0);
    }
    /* 修复按钮在iOS上的样式问题 */
    button, .btn{
        -webkit-appearance:none;
        -moz-appearance:none;
        appearance:none;
    }
    /* 修复输入框在iOS上的样式问题 */
    input, textarea, select{
        -webkit-appearance:none;
        -moz-appearance:none;
        appearance:none;
    }
}