/**
 * 教材云大平板横屏适配样式
 * 目标设备：1024px - 1366px 宽度的横屏平板
 * 创建时间：2025年7月2日
 * 适配版本：v2.0
 */

/* ===== 基础适配 ===== */
@media screen and (min-width: 1024px) and (max-width: 1366px) {

    /* 基础布局 */
    .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }

    .container {
        max-width: 1200px;
        padding: 0 20px;
    }

    /* 导航栏优化 */
    .navbar {
        height: 60px;
        padding: 10px 20px;
    }

    .navbar-brand {
        font-size: 20px;
        line-height: 40px;
    }

    .nav-link {
        padding: 12px 20px;
        font-size: 16px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* 侧边栏适配 */
    .sidebar {
        width: 220px;
        transition: all 0.3s ease;
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        z-index: 1000;
    }

    .sidebar-collapsed {
        width: 80px;
    }

    .sidebar .nav-link {
        padding: 15px 20px;
        font-size: 14px;
        display: flex;
        align-items: center;
        min-height: 50px;
    }

    .sidebar .nav-link i {
        margin-right: 10px;
        width: 18px;
        text-align: center;
    }

    /* 主内容区域 */
    .main-content {
        margin-left: 220px;
        padding: 20px;
        transition: all 0.3s ease;
        min-height: 100vh;
    }

    .sidebar-collapsed+.main-content {
        margin-left: 80px;
    }
}

/* ===== 触摸优化 ===== */
@media (hover: none) and (pointer: coarse) and (min-width: 1024px) {

    /* 按钮触摸优化 */
    .btn {
        min-height: 44px;
        padding: 12px 24px;
        font-size: 16px;
        border-radius: 6px;
        touch-action: manipulation;
    }

    .btn-sm {
        min-height: 40px;
        padding: 10px 20px;
        font-size: 14px;
    }

    .btn-lg {
        min-height: 50px;
        padding: 15px 30px;
        font-size: 18px;
    }

    /* 表单控件优化 */
    .form-control {
        height: 44px;
        padding: 12px 16px;
        font-size: 16px;
        /* 防止 iOS 缩放 */
        border-radius: 6px;
        line-height: 1.4;
    }

    .form-control:focus {
        border-width: 2px;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    }

    .form-control-sm {
        height: 40px;
        padding: 10px 14px;
        font-size: 14px;
    }

    /* 链接优化 */
    a:not(.btn) {
        min-height: 44px;
        /* display: inline-flex; */
        align-items: center;
        padding: 8px 4px;
        text-decoration: none;
    }

    /* 表格优化 */
    .table th,
    .table td {
        padding: 15px 12px;
        font-size: 15px;
    }

    /* 分页器优化 */
    .pagination .page-link {
        padding: 12px 18px;
        font-size: 16px;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 触摸反馈 */
    .btn:active,
    .card:active,
    .ibox:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    /* 链接点击反馈 */
    a:active,
    .nav-link:active {
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    }

    /* 表格行点击反馈 */
    .table tbody tr:active {
        background-color: #f0f0f0;
    }

    /* 去除 hover 效果 */
    .btn:hover,
    .card:hover,
    .nav-link:hover {
        transform: none;
    }
}

/* ===== 布局优化 ===== */
@media screen and (min-width: 1024px) and (max-width: 1366px) {

    /* Bootstrap栅格系统扩展 */
    .col-xl-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }

    .col-xl-3-4 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xl-1-5 {
        flex: 0 0 20%;
        max-width: 20%;
    }

    .col-xl-2-5 {
        flex: 0 0 40%;
        max-width: 40%;
    }

    .col-xl-3-5 {
        flex: 0 0 60%;
        max-width: 60%;
    }

    .col-xl-4-5 {
        flex: 0 0 80%;
        max-width: 80%;
    }

    /* 三列布局 */
    .three-column-layout {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
    }

    /* 四列布局 */
    .four-column-layout {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }

    /* 大平板专用布局 */
    .large-tablet-layout {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }

    .large-tablet-layout .main-panel {
        flex: 1;
        min-width: 600px;
    }

    .large-tablet-layout .side-panel {
        flex: 0 0 300px;
    }

    /* 五等分栅格在大平板上优化为四列 */
    .large-tablet-4-col .col-lg-1-5 {
        width: 25%;
        float: left;
        padding: 0 10px;
        margin-bottom: 20px;
    }

    /* 三列布局优化 */
    .large-tablet-3-col .col-lg-1-5 {
        width: 33.333%;
        float: left;
        padding: 0 10px;
        margin-bottom: 20px;
    }

    /* 列表优化 */
    .list-group-item {
        padding: 15px 20px;
        border-radius: 6px;
        margin-bottom: 8px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* 模态框优化 */
    .modal-dialog {
        max-width: 900px;
        margin: 30px auto;
    }

    .modal-lg {
        max-width: 1000px;
    }

    .modal-content {
        border-radius: 12px;
    }

    .modal-header {
        padding: 20px 24px;
        border-bottom: 1px solid #e9ecef;
    }

    .modal-body {
        padding: 24px;
        font-size: 16px;
        line-height: 1.6;
    }

    .modal-footer {
        padding: 16px 24px;
    }
}

/* ===== 表单优化 ===== */
@media screen and (min-width: 1024px) and (max-width: 1366px) {

    /* 按钮组优化 */
    .btn-group-large-tablet {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .btn-group-large-tablet .btn {
        flex: 0 0 auto;
        margin: 0;
    }

    /* 搜索表单优化 */
    .search-form-large-tablet {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        gap: 15px;
        margin-bottom: 20px;
    }

    .search-form-large-tablet .form-group {
        flex: 0 0 auto;
        min-width: 200px;
        margin-bottom: 0;
    }

    .search-form-large-tablet .btn-group {
        flex: 0 0 auto;
    }
}

/* ===== 组件特殊优化 ===== */
@media screen and (min-width: 1024px) and (max-width: 1366px) {

    /* LayUI 组件优化 */
    .layui-form-item {
        margin-bottom: 20px;
    }

    .layui-input,
    .layui-select,
    .layui-textarea {
        height: 44px;
        line-height: 44px;
        padding: 0 16px;
        font-size: 16px;
        border-radius: 6px;
    }

    .layui-textarea {
        height: auto;
        min-height: 88px;
        line-height: 1.5;
        padding: 12px 16px;
    }

    .layui-btn {
        height: 44px;
        line-height: 44px;
        padding: 0 24px;
        font-size: 16px;
        border-radius: 6px;
    }

    .layui-btn-sm {
        height: 36px;
        line-height: 36px;
        padding: 0 16px;
        font-size: 14px;
    }

    /* Element UI 组件优化 */
    .el-button {
        min-height: 44px;
        padding: 12px 24px;
        font-size: 16px;
    }

    .el-button--small {
        min-height: 36px;
        padding: 9px 16px;
        font-size: 14px;
    }

    /* .el-input__inner {
        height: 44px;
        line-height: 44px;
        font-size: 16px;
        padding: 0 16px;
    } */

    .el-select {
        width: 100%;
    }

    /* .el-select .el-input__inner {
        height: 44px;
        line-height: 44px;
    } */

    /* 数据表格优化 */
    .el-table {
        font-size: 15px;
    }

    .el-table th {
        height: 50px;
        font-size: 16px;
        font-weight: 600;
        background-color: #f8f9fa;
    }

    .el-table td {
        height: 48px;
        padding: 12px 0;
    }

    .el-table .el-button {
        margin: 0 4px;
        min-height: 32px;
        padding: 8px 16px;
        font-size: 14px;
    }
}

/* ===== 数据展示优化 ===== */
@media screen and (min-width: 1024px) and (max-width: 1366px) {
    /* 统计卡片 */
    .stats-card-row {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -10px;
        margin-bottom: 20px;
    }

    .stats-card {
        background: #fff;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        text-align: center;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .stats-card:active {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .stats-card .number {
        font-size: 32px;
        font-weight: bold;
        color: #2c5aa0;
        margin-bottom: 8px;
    }

    .stats-card .label {
        font-size: 14px;
        color: #666;
    }

    /* 消息列表优化 */
    .message-list-large-tablet {
        display: flex;
        gap: 20px;
    }

    .message-list-large-tablet .message-column {
        flex: 1;
        min-width: 0;
    }

    .message-item {
        padding: 15px;
        border-radius: 4px;
        margin-bottom: 8px;
        background: #fff;
        border: 1px solid #e7eaec;
        transition: background-color 0.2s;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .message-item:active {
        background-color: #e8f4fd;
    }

    /* 图表容器优化 */
    .chart-container {
        background: #fff;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }

    .chart-container .chart-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e7eaec;
    }
}

/* ===== 工具类 ===== */
@media screen and (min-width: 1024px) and (max-width: 1366px) {

    /* 间距工具类 */
    .tablet-mt-1 {
        margin-top: 8px !important;
    }

    .tablet-mt-2 {
        margin-top: 16px !important;
    }

    .tablet-mt-3 {
        margin-top: 24px !important;
    }

    .tablet-mt-4 {
        margin-top: 32px !important;
    }

    .tablet-mb-1 {
        margin-bottom: 8px !important;
    }

    .tablet-mb-2 {
        margin-bottom: 16px !important;
    }

    .tablet-mb-3 {
        margin-bottom: 24px !important;
    }

    .tablet-mb-4 {
        margin-bottom: 32px !important;
    }

    .tablet-ml-1 {
        margin-left: 8px !important;
    }

    .tablet-ml-2 {
        margin-left: 16px !important;
    }

    .tablet-ml-3 {
        margin-left: 24px !important;
    }

    .tablet-ml-4 {
        margin-left: 32px !important;
    }

    .tablet-mr-1 {
        margin-right: 8px !important;
    }

    .tablet-mr-2 {
        margin-right: 16px !important;
    }

    .tablet-mr-3 {
        margin-right: 24px !important;
    }

    .tablet-mr-4 {
        margin-right: 32px !important;
    }

    .tablet-p-1 {
        padding: 8px !important;
    }

    .tablet-p-2 {
        padding: 16px !important;
    }

    .tablet-p-3 {
        padding: 24px !important;
    }

    .tablet-p-4 {
        padding: 32px !important;
    }

    .tablet-px-1 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .tablet-px-2 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .tablet-px-3 {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .tablet-py-1 {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .tablet-py-2 {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    .tablet-py-3 {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    /* 显示隐藏工具类 */
    .tablet-hidden {
        display: none !important;
    }

    .tablet-visible {
        display: block !important;
    }

    .tablet-visible-inline {
        display: inline !important;
    }

    .tablet-visible-inline-block {
        display: inline-block !important;
    }

    .tablet-visible-flex {
        display: flex !important;
    }

    .tablet-visible-grid {
        display: grid !important;
    }

    /* 布局工具类 */
    .tablet-flex {
        display: flex !important;
    }

    .tablet-flex-column {
        flex-direction: column !important;
    }

    .tablet-flex-row {
        flex-direction: row !important;
    }

    .tablet-flex-wrap {
        flex-wrap: wrap !important;
    }

    .tablet-flex-nowrap {
        flex-wrap: nowrap !important;
    }

    .tablet-justify-start {
        justify-content: flex-start !important;
    }

    .tablet-justify-center {
        justify-content: center !important;
    }

    .tablet-justify-end {
        justify-content: flex-end !important;
    }

    .tablet-justify-between {
        justify-content: space-between !important;
    }

    .tablet-align-start {
        align-items: flex-start !important;
    }

    .tablet-align-center {
        align-items: center !important;
    }

    .tablet-align-end {
        align-items: flex-end !important;
    }

    .tablet-grid {
        display: grid !important;
    }

    .tablet-grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .tablet-grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .tablet-grid-cols-4 {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .tablet-gap-1 {
        gap: 8px !important;
    }

    .tablet-gap-2 {
        gap: 16px !important;
    }

    .tablet-gap-3 {
        gap: 24px !important;
    }

    .tablet-block {
        display: block !important;
    }

    .tablet-inline-block {
        display: inline-block !important;
    }

    /* 文本工具类 */
    .tablet-text-sm {
        font-size: 14px !important;
    }

    .tablet-text-base {
        font-size: 16px !important;
    }

    .tablet-text-lg {
        font-size: 18px !important;
    }

    .tablet-text-xl {
        font-size: 20px !important;
    }

    .tablet-text-left {
        text-align: left !important;
    }

    .tablet-text-center {
        text-align: center !important;
    }

    .tablet-text-right {
        text-align: right !important;
    }

    /* 宽度工具类 */
    .tablet-w-25 {
        width: 25% !important;
    }

    .tablet-w-33 {
        width: 33.333% !important;
    }

    .tablet-w-50 {
        width: 50% !important;
    }

    .tablet-w-66 {
        width: 66.666% !important;
    }

    .tablet-w-75 {
        width: 75% !important;
    }

    .tablet-w-100 {
        width: 100% !important;
    }

    .tablet-h-auto {
        height: auto !important;
    }

    .tablet-h-full {
        height: 100% !important;
    }
}

/* ===== 大平板设备特定类 ===== */
.large-tablet-landscape {
    /* 滚动优化 */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.large-tablet-landscape .scrollable {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 触摸反馈类 */
.touching {
    background-color: rgba(0, 0, 0, 0.1) !important;
    transform: scale(0.98) !important;
}

/* ===== 响应式图片和媒体 ===== */
@media screen and (min-width: 1024px) and (max-width: 1366px) {

    /* 图片响应式 */
    .img-responsive,
    .responsive-img {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
    }

    /* 视频响应式 */
    .video-responsive {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
        /* 16:9 宽高比 */
    }

    .video-responsive iframe,
    .video-responsive video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }
}

/* ===== 打印样式优化 ===== */
@media print {

    .large-tablet-landscape .sidebar,
    .large-tablet-landscape .tablet-hidden {
        display: none !important;
    }

    .large-tablet-landscape .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }
}

/* ===== 性能优化 ===== */
@media screen and (min-width: 1024px) and (max-width: 1366px) {

    /* GPU 加速 */
    .card,
    .ibox,
    .btn,
    .modal-content {
        will-change: transform;
        backface-visibility: hidden;
    }

    /* 滚动性能优化 */
    .scrollable-content {
        transform: translateZ(0);
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== 第二阶段增强样式 ===== */
/* 创建时间：2024年12月1日 - 第二阶段 */

/* ===== 核心业务页面专用样式 ===== */

/* 教材管理页面专用优化 (tm.html, add.html, edit.html) */
@media screen and (min-width: 1024px) and (max-width: 1366px) {

    /* 复杂搜索表单优化 - 针对20+字段的表单 */
    .page-book-management .select-list ul,
    .page-textbook-management .select-list ul {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px 20px;
        margin: 0;
        padding: 20px;
        list-style: none;
    }

    .page-book-management .select-list li,
    .page-textbook-management .select-list li {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 0;
    }

    .page-book-management .select-list li.select-time,
    .page-textbook-management .select-list li.select-time {
        grid-column: span 2;
        /* 时间范围占两列 */
        flex-direction: column;
    }

    .page-book-management .select-list li:last-child,
    .page-textbook-management .select-list li:last-child {
        grid-column: span 4;
        /* 按钮组占满整行 */
        justify-self: center;
        margin-top: 10px;
    }

    .page-book-management .select-list label,
    .page-textbook-management .select-list label {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 8px;
        color: #495057;
        white-space: nowrap;
        width: auto;
    }

    .page-book-management .select-list input[type="text"],
    .page-book-management .select-list input[type="number"],
    .page-book-management .select-list select,
    .page-textbook-management .select-list input[type="text"],
    .page-textbook-management .select-list input[type="number"],
    .page-textbook-management .select-list select {
        width: 100%;
        min-width: 200px;
        height: 40px;
        padding: 8px 12px;
        font-size: 14px;
        border: 1px solid #ced4da;
        border-radius: 6px;
        background-color: #fff;
    }

    /* 教材管理表格优化 */
    .page-book-management .bootstrap-table,
    .page-textbook-management .bootstrap-table {
        font-size: 13px;
    }

    .page-book-management .bootstrap-table .fixed-table-container,
    .page-textbook-management .bootstrap-table .fixed-table-container {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        overflow: hidden;
    }

    .page-book-management .table th,
    .page-book-management .table td,
    .page-textbook-management .table th,
    .page-textbook-management .table td {
        padding: 10px 8px;
        vertical-align: middle;
        border-bottom: 1px solid #e9ecef;
    }

    .page-book-management .table th {
        background-color: #f8f9fa;
        font-weight: 600;
        font-size: 13px;
        color: #495057;
    }

    /* 教材图片预览优化 */
    .page-book-management .book-cover-preview,
    .page-textbook-management .book-cover-preview {
        position: relative;
        cursor: pointer;
        transition: transform 0.2s;
    }

    .page-book-management .book-cover-preview:hover,
    .page-textbook-management .book-cover-preview:hover {
        transform: scale(1.05);
    }

    .page-book-management .book-cover-preview img,
    .page-textbook-management .book-cover-preview img {
        width: 60px;
        height: 80px;
        object-fit: cover;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* 批量操作按钮优化 */
    .page-book-management .btn-group,
    .page-textbook-management .btn-group {
        gap: 8px;
        flex-wrap: wrap;
    }

    .page-book-management .btn-group .btn,
    .page-textbook-management .btn-group .btn {
        min-height: 42px;
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 6px;
        transition: all 0.2s;
    }

    .page-book-management .btn-group .btn:hover,
    .page-textbook-management .btn-group .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
}


/* 统计报表页面专用优化 (statistic.html) */
@media screen and (min-width: 1024px) and (max-width: 1366px) {

    /* 选项卡组件优化 */
    .page-statistics .tabs-box {
        display: flex;
        gap: 15px;
        padding: 20px;
        background: #f8f9fa;
        border-radius: 12px;
        margin-bottom: 30px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .page-statistics .tabs-box .item {
        padding: 15px 25px;
        border-radius: 8px;
        background: white;
        border: 2px solid transparent;
        transition: all 0.3s ease;
        cursor: pointer;
        font-weight: 600;
        font-size: 14px;
        min-height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    .page-statistics .tabs-box .item:hover {
        border-color: #3c8dbc;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(60, 141, 188, 0.2);
    }

    .page-statistics .tabs-box .item.active_tab {
        background: linear-gradient(135deg, #3c8dbc, #367fa9);
        color: white;
        border-color: #3c8dbc;
        box-shadow: 0 4px 20px rgba(60, 141, 188, 0.4);
    }

    /* 下拉导出按钮优化 */
    .page-statistics .button-box {
        position: relative;
        display: inline-block;
    }

    .page-statistics .button-box .my-btn {
        background: linear-gradient(45deg, #f8ac59, #ec971f);
        color: white;
        border: none;
        padding: 12px 20px;
        border-radius: 6px;
        font-weight: 600;
        transition: all 0.2s;
        min-height: 44px;
    }

    .page-statistics .button-box .my-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(248, 172, 89, 0.3);
    }

    .page-statistics .dropdown-download {
        min-width: 180px;
        border: 1px solid #dee2e6;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }

    .page-statistics .dropdown-download a {
        padding: 12px 16px;
        transition: all 0.2s;
        min-height: 44px;
    }

    .page-statistics .dropdown-download a:hover {
        background-color: #f8ac59;
        color: white;
    }

    /* 统计表格优化 */
    .page-statistics .bootstrap-table {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .page-statistics .bootstrap-table .fixed-table-container {
        border: none;
    }

    .page-statistics .table th {
        background: linear-gradient(45deg, #34495e, #2c3e50);
        color: white;
        border: 1px solid #2c3e50;
        font-weight: 600;
        text-align: center;
        padding: 15px 10px;
    }

    .page-statistics .table td {
        text-align: center;
        padding: 12px 10px;
        border: 1px solid #dee2e6;
    }

    .page-statistics .table tbody tr:hover {
        background-color: rgba(52, 152, 219, 0.1);
    }
}

/* ===== 手势操作支持样式 ===== */
@media (hover: none) and (pointer: coarse) and (min-width: 1024px) and (max-width: 1366px) {

    /* 滑动切换指示器 */
    .swipe-indicator {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        z-index: 100;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .swipe-indicator.left {
        left: 20px;
    }

    .swipe-indicator.right {
        right: 20px;
    }

    .swipe-container:hover .swipe-indicator {
        opacity: 1;
    }

    /* 长按菜单样式 */
    .long-press-menu {
        position: absolute;
        background: white;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        padding: 8px 0;
        min-width: 160px;
        z-index: 1000;
        opacity: 0;
        transform: scale(0.9);
        transition: all 0.2s ease;
    }

    .long-press-menu.show {
        opacity: 1;
        transform: scale(1);
    }

    .long-press-menu .menu-item {
        padding: 12px 20px;
        cursor: pointer;
        transition: background-color 0.2s;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .long-press-menu .menu-item:hover {
        background-color: #f8f9fa;
    }

    .long-press-menu .menu-item i {
        margin-right: 10px;
        width: 16px;
    }

    /* 拖拽占位符 */
    .drag-placeholder {
        border: 2px dashed #3498db;
        background-color: rgba(52, 152, 219, 0.1);
        border-radius: 8px;
        min-height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #3498db;
        font-weight: 600;
        transition: all 0.2s;
    }

    .drag-over {
        border-color: #27ae60;
        background-color: rgba(39, 174, 96, 0.1);
        color: #27ae60;
    }

    /* 缩放控制器 */
    .zoom-controls {
        position: fixed;
        bottom: 20px;
        right: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        z-index: 1000;
    }

    .zoom-btn {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .zoom-btn:hover {
        background: rgba(0, 0, 0, 0.9);
        transform: scale(1.1);
    }

    .zoom-btn:active {
        transform: scale(0.95);
    }
}

/* ===== 复杂表格优化样式 ===== */
@media screen and (min-width: 1024px) and (max-width: 1366px) {

    /* 大数据表格优化 */
    .large-data-table {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .large-data-table .fixed-table-container {
        max-height: 600px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #cbd5e0 #f7fafc;
    }

    .large-data-table .fixed-table-container::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .large-data-table .fixed-table-container::-webkit-scrollbar-track {
        background: #f7fafc;
    }

    .large-data-table .fixed-table-container::-webkit-scrollbar-thumb {
        background: #cbd5e0;
        border-radius: 4px;
    }

    .large-data-table .fixed-table-container::-webkit-scrollbar-thumb:hover {
        background: #a0aec0;
    }

    /* 表格列宽自适应 */
    .large-data-table .table {
        table-layout: auto;
        min-width: 1200px;
        margin-bottom: 0;
    }

    .large-data-table .table th {
        position: sticky;
        top: 0;
        background: linear-gradient(45deg, #4a5568, #2d3748);
        color: white;
        font-weight: 600;
        z-index: 10;
        border-bottom: 2px solid #2d3748;
    }

    .large-data-table .table td {
        padding: 12px 8px;
        vertical-align: middle;
        border-bottom: 1px solid #e2e8f0;
    }

    .large-data-table .table tbody tr:hover {
        background-color: rgba(66, 153, 225, 0.1);
        transition: background-color 0.2s;
    }

    /* 表格操作列优化 */
    .large-data-table .table .action-column {
        width: 200px;
        min-width: 200px;
        position: sticky;
        right: 0;
        background: white;
        border-left: 2px solid #e2e8f0;
        z-index: 5;
    }

    .large-data-table .table .action-column .btn-group {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .large-data-table .table .action-column .btn {
        min-height: 32px;
        padding: 6px 12px;
        font-size: 12px;
        border-radius: 4px;
        flex: 0 0 auto;
    }

    /* 表格筛选器优化 */
    .table-filters {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        align-items: end;
    }

    .table-filter-item {
        display: flex;
        flex-direction: column;
    }

    .table-filter-item label {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 5px;
        color: #4a5568;
    }

    .table-filter-item select,
    .table-filter-item input {
        height: 40px;
        padding: 8px 12px;
        border: 1px solid #cbd5e0;
        border-radius: 6px;
        font-size: 14px;
    }

    .table-filter-actions {
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    .table-filter-actions .btn {
        min-height: 40px;
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* ===== 图表和数据可视化组件适配 ===== */
@media screen and (min-width: 1024px) and (max-width: 1366px) {

    /* ECharts 图表容器优化 */
    .echarts-container {
        position: relative;
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        padding: 20px;
        margin-bottom: 30px;
        overflow: hidden;
    }

    .echarts-container .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 2px solid #f0f0f0;
    }

    .echarts-container .chart-title {
        font-size: 18px;
        font-weight: 700;
        color: #2c3e50;
        margin: 0;
    }

    .echarts-container .chart-subtitle {
        font-size: 14px;
        color: #7f8c8d;
        margin: 5px 0 0 0;
    }

    .echarts-container .chart-tools {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .echarts-container .chart-tool-btn {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        background: white;
        color: #666;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
    }

    .echarts-container .chart-tool-btn:hover {
        border-color: #3498db;
        color: #3498db;
        background: rgba(52, 152, 219, 0.05);
    }

    .echarts-container .chart-tool-btn:active {
        transform: scale(0.95);
    }

    /* 图表主体区域 */
    .echarts-container .chart-body {
        position: relative;
        height: 400px;
        min-height: 300px;
    }

    .echarts-container .chart-body .chart-loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #999;
        font-size: 16px;
    }

    /* 图表图例优化 */
    .echarts-container .chart-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
        margin-top: 20px;
        padding-top: 15px;
        border-top: 1px solid #f0f0f0;
    }

    .echarts-container .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        padding: 8px 12px;
        border-radius: 6px;
        transition: background-color 0.2s;
        min-height: 36px;
    }

    .echarts-container .legend-item:hover {
        background-color: rgba(52, 152, 219, 0.1);
    }

    .echarts-container .legend-color {
        width: 16px;
        height: 16px;
        border-radius: 2px;
        flex-shrink: 0;
    }

    .echarts-container .legend-text {
        font-size: 14px;
        color: #555;
        white-space: nowrap;
    }

    /* 响应式图表尺寸 */
    .chart-responsive {
        width: 100%;
        height: auto;
        min-height: 300px;
    }

    .chart-responsive.small {
        min-height: 250px;
    }

    .chart-responsive.large {
        min-height: 500px;
    }

    /* 图表工具栏 */
    .chart-toolbar {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
        flex-wrap: wrap;
        align-items: center;
    }

    .chart-toolbar .toolbar-group {
        display: flex;
        gap: 5px;
        align-items: center;
        padding: 5px 10px;
        background: #f8f9fa;
        border-radius: 6px;
    }

    .chart-toolbar .toolbar-label {
        font-size: 12px;
        color: #666;
        font-weight: 600;
        margin-right: 5px;
    }

    .chart-toolbar .toolbar-btn {
        padding: 6px 12px;
        font-size: 12px;
        border: 1px solid #ddd;
        background: white;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s;
        min-height: 32px;
    }

    .chart-toolbar .toolbar-btn:hover {
        border-color: #3498db;
        color: #3498db;
    }

    .chart-toolbar .toolbar-btn.active {
        background: #3498db;
        color: white;
        border-color: #3498db;
    }

    /* 数据表格与图表组合 */
    .chart-table-combo {
        display: grid;
        grid-template-columns: 1fr 400px;
        gap: 20px;
        align-items: start;
    }

    .chart-table-combo .chart-section {
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .chart-table-combo .table-section {
        background: white;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        max-height: 400px;
        overflow-y: auto;
    }

    .chart-table-combo .data-table {
        font-size: 13px;
    }

    .chart-table-combo .data-table th,
    .chart-table-combo .data-table td {
        padding: 8px 10px;
        text-align: center;
        border-bottom: 1px solid #e9ecef;
    }

    .chart-table-combo .data-table th {
        background: #f8f9fa;
        font-weight: 600;
        position: sticky;
        top: 0;
    }
}

/* ===== 进度条和加载组件 ===== */
@media screen and (min-width: 1024px) and (max-width: 1366px) {

    /* 进度条优化 */
    .progress-enhanced {
        height: 12px;
        border-radius: 6px;
        background: #e9ecef;
        overflow: hidden;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .progress-enhanced .progress-bar {
        height: 100%;
        background: linear-gradient(45deg, #3498db, #2980b9);
        border-radius: 6px;
        transition: width 0.6s ease;
        position: relative;
        overflow: hidden;
    }

    .progress-enhanced .progress-bar::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        animation: progress-shine 2s infinite;
    }

    @keyframes progress-shine {
        0% {
            left: -100%;
        }

        100% {
            left: 100%;
        }
    }

    .progress-enhanced .progress-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 11px;
        font-weight: 600;
        color: #2c3e50;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    }

    /* 加载组件优化 */
    .loading-enhanced {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        color: #666;
    }

    .loading-spinner {
        width: 50px;
        height: 50px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        animation: loading-spin 1s linear infinite;
        margin-bottom: 20px;
    }

    @keyframes loading-spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .loading-text {
        font-size: 14px;
        color: #7f8c8d;
        text-align: center;
    }

    /* 骨架屏加载 */
    .skeleton-loader {
        animation: skeleton-pulse 1.5s ease-in-out infinite alternate;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: skeleton-shimmer 2s infinite;
    }

    @keyframes skeleton-shimmer {
        0% {
            background-position: -200% 0;
        }

        100% {
            background-position: 200% 0;
        }
    }

    .skeleton-text {
        height: 16px;
        border-radius: 4px;
        margin-bottom: 8px;
    }

    .skeleton-text.title {
        height: 24px;
        width: 60%;
    }

    .skeleton-text.content {
        width: 100%;
    }

    .skeleton-text.short {
        width: 80%;
    }

    .skeleton-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    .skeleton-button {
        height: 40px;
        width: 120px;
        border-radius: 6px;
    }
}

/* ===== 第二阶段性能优化 ===== */
@media screen and (min-width: 1024px) and (max-width: 1366px) {

    /* GPU加速优化 */
    .gpu-accelerated,
    .large-data-table,
    .echarts-container,
    .swipe-container {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* 滚动性能优化 */
    .smooth-scroll {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
    }

    .smooth-scroll::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .smooth-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .smooth-scroll::-webkit-scrollbar-thumb {
        background-color: rgba(155, 155, 155, 0.5);
        border-radius: 6px;
        border: transparent;
    }

    .smooth-scroll::-webkit-scrollbar-thumb:hover {
        background-color: rgba(155, 155, 155, 0.7);
    }

    /* 动画性能优化 */
    .optimized-transition {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .optimized-animation {
        animation-fill-mode: both;
        animation-duration: 0.3s;
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* 内存优化 */
    .memory-optimized {
        contain: layout style paint;
    }

    .memory-optimized img {
        object-fit: cover;
        max-width: 100%;
        height: auto;
    }

    /* 渲染优化 */
    .render-optimized {
        contain: layout;
        content-visibility: auto;
        contain-intrinsic-size: 0 500px;
    }
}

/* ===== 调试和开发辅助样式 ===== */
@media screen and (min-width: 1024px) and (max-width: 1366px) {

    /* 调试网格 */
    .debug-grid {
        position: relative;
    }

    .debug-grid::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image:
            linear-gradient(rgba(255, 0, 0, 0.1) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 0, 0, 0.1) 1px, transparent 1px);
        background-size: 20px 20px;
        pointer-events: none;
        z-index: 9999;
    }

    /* 设备信息显示 */
    .device-info-debug {
        position: fixed;
        bottom: 10px;
        left: 10px;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 10px;
        border-radius: 5px;
        font-family: monospace;
        font-size: 12px;
        z-index: 10000;
        max-width: 300px;
    }

    .device-info-debug .info-line {
        margin-bottom: 5px;
    }

    .device-info-debug .info-label {
        color: #ffd700;
        font-weight: bold;
    }

    /* 性能监控指示器 */
    .perf-monitor {
        position: fixed;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 8px 15px;
        border-radius: 20px;
        font-size: 12px;
        z-index: 10000;
        display: flex;
        gap: 15px;
        align-items: center;
    }

    .perf-monitor .metric {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .perf-monitor .metric-value {
        font-weight: bold;
    }

    .perf-monitor .metric-good {
        color: #4ade80;
    }

    .perf-monitor .metric-warning {
        color: #fbbf24;
    }

    .perf-monitor .metric-error {
        color: #f87171;
    }
}

/* ============================================
   第三阶段：WEB前台页面专用适配样式
   ============================================ */

/* ------------------------------------
   WEB前台页面通用优化
   ------------------------------------ */
@media screen and (min-width: 1024px) and (max-width: 1366px) {

    .page-web-home,
    .page-web-schools,
    .page-web-textbook-details,
    .page-web-textbook-search,
    .page-web-register {
        /* 确保在大平板横屏下的最佳显示效果 */
        min-width: 1024px;
        overflow-x: auto;
    }

    /* WEB页面主要内容区域优化 */
    .page-web-home main,
    .page-web-schools main,
    .page-web-textbook-details main,
    .page-web-textbook-search main {
        /* padding: 0 20px; */
        /* max-width: 1320px; */
        margin: 0 auto;
    }

    /* ------------------------------------
   首页(tmIndex.html)适配样式
   ------------------------------------ */

    .page-web-home .main-bg {
        background-position: center;
        min-height: 60vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .page-web-home .title-box {
        text-align: center;
        padding: 40px 20px;
    }

    .page-web-home .main-title {
        font-size: 3.2rem !important;
        font-weight: 700;
        color: #fff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        margin-bottom: 20px;
    }

    .page-web-home .sub-title {
        font-size: 1.8rem !important;
        color: #fff;
        margin-bottom: 15px;
        opacity: 0.9;
    }

    .page-web-home .mini-title {
        font-size: 1.2rem !important;
        color: #fff;
        opacity: 0.8;
    }

    /* 系统服务展示区域优化 */


    .page-web-home .sysInfo-introduction {
        flex: 1;
        /* font-size: 1.1rem; */
        line-height: 1.6;
        opacity: 0.95;
    }

    /* ------------------------------------
   学校页面(schools.html)适配样式
   ------------------------------------ */

    .page-web-schools .content-container-outer {
        padding: 20px;
        margin: 0 auto;
    }

    .page-web-schools .tree-container {
        background: #fff;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        max-height: 80vh;
        overflow-y: auto;
    }

    .page-web-schools .book-container-outer {
        background: #fff;
        border-radius: 12px;
        padding: 30px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        max-height: 80vh;
        overflow-y: auto;
    }

    /* 图书卡片网格布局 */
    .page-web-schools .book-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 25px;
        padding: 20px 0;
    }

    .page-web-schools .card {
        background: #fff;
        border-radius: 12px;
        padding: 20px;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        border: 1px solid #e9ecef;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .page-web-schools .card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        border-color: #2772E1;
    }

    .page-web-schools .card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #2772E1, #1e5cbf);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .page-web-schools .card:hover::before {
        transform: scaleX(1);
    }

    .page-web-schools .book-cover {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 15px;
    }

    .page-web-schools .book-title {
        font-size: 1.2rem;
        font-weight: 600;
        color: #495057;
        margin-bottom: 10px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .page-web-schools .book-info {
        font-size: 0.95rem;
        color: #6c757d;
        margin-bottom: 8px;
    }

    /* 分页组件优化 */
    .page-web-schools .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-top: 30px;
        padding: 20px 0;
    }

    .page-web-schools .pagination .btn {
        padding: 8px 16px;
        border-radius: 8px;
        border: 1px solid #dee2e6;
        background: #fff;
        color: #495057;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .page-web-schools .pagination .btn:hover {
        background: #2772E1;
        color: #fff;
        border-color: #2772E1;
    }

    .page-web-schools .pagination .btn.active {
        background: #2772E1;
        color: #fff;
        border-color: #2772E1;
    }

    /* ------------------------------------
   教材详情页面(tmDetails.html)适配样式
   ------------------------------------ */

    .page-web-textbook-details .main-container {
        display: grid;
        grid-template-columns: 1fr 350px;
        gap: 40px;
        padding: 30px 20px;
        max-width: 1320px;
        margin: 0 auto;
    }

    .page-web-textbook-details .book-info-main {
        background: #fff;
        border-radius: 15px;
        padding: 40px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

    .page-web-textbook-details .book-sidebar {
        background: #fff;
        border-radius: 15px;
        padding: 30px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        height: fit-content;
        position: sticky;
        top: 20px;
    }

    /* 教材信息展示优化 */
    .page-web-textbook-details .book-header {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: 30px;
        margin-bottom: 40px;
        padding-bottom: 30px;
        border-bottom: 2px solid #e9ecef;
    }

    .page-web-textbook-details .book-cover-large {
        width: 100%;
        height: auto;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease;
    }

    .page-web-textbook-details .book-cover-large:hover {
        transform: scale(1.05);
        cursor: pointer;
    }

    .page-web-textbook-details .book-title-main {
        font-size: 2.2rem;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 20px;
        line-height: 1.3;
    }

    .page-web-textbook-details .book-meta {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .page-web-textbook-details .meta-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f8f9fa;
    }

    .page-web-textbook-details .meta-label {
        font-weight: 600;
        color: #495057;
        width: 100px;
        flex-shrink: 0;
    }

    .page-web-textbook-details .meta-value {
        color: #6c757d;
        flex: 1;
    }

    /* 章节内容和目录优化 */
    .page-web-textbook-details .content-tabs {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .page-web-textbook-details .tab-headers {
        display: flex;
        background: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
    }

    .page-web-textbook-details .tab-header {
        flex: 1;
        padding: 15px 20px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: 600;
        border-bottom: 3px solid transparent;
    }

    .page-web-textbook-details .tab-header:hover {
        background: #e9ecef;
    }

    .page-web-textbook-details .tab-header.active {
        background: #fff;
        color: #2772E1;
        border-bottom-color: #2772E1;
    }

    .page-web-textbook-details .tab-content {
        padding: 30px;
        min-height: 400px;
    }

    /* 获奖信息和标签美化 */
    .page-web-textbook-details .award-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 20px 0;
    }

    .page-web-textbook-details .award-tag {
        background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
        color: #fff;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 600;
        box-shadow: 0 4px 10px rgba(255, 165, 0, 0.3);
        position: relative;
        overflow: hidden;
    }

    .page-web-textbook-details .award-tag::before {
        content: '🏆';
        margin-right: 5px;
    }

    /* 侧边栏相关推荐优化 */
    .page-web-textbook-details .related-books {
        display: grid;
        gap: 20px;
    }

    .page-web-textbook-details .related-book-card {
        display: flex;
        gap: 15px;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 10px;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .page-web-textbook-details .related-book-card:hover {
        background: #e9ecef;
        transform: translateX(5px);
    }

    .page-web-textbook-details .related-book-cover {
        width: 60px;
        height: 80px;
        object-fit: cover;
        border-radius: 5px;
    }

    .page-web-textbook-details .related-book-info {
        flex: 1;
    }

    .page-web-textbook-details .related-book-title {
        font-size: 0.95rem;
        font-weight: 600;
        color: #495057;
        margin-bottom: 5px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .page-web-textbook-details .related-book-author {
        font-size: 0.85rem;
        color: #6c757d;
    }

    /* ------------------------------------
   教材搜索页面(tmSearch.html)适配样式
   ------------------------------------ */

    .page-web-textbook-search .search-container {
        max-width: 1320px;
        margin: 0 auto;
        padding: 30px 20px;
    }

    /* 搜索框区域优化 */
    .page-web-textbook-search .search-header {
        background: linear-gradient(135deg, #2772E1 0%, #1e5cbf 100%);
        padding: 40px;
        border-radius: 15px;
        margin-bottom: 30px;
        color: #fff;
        text-align: center;
    }

    .page-web-textbook-search .search-title {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .page-web-textbook-search .search-form {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 15px;
        max-width: 800px;
        margin: 0 auto;
        align-items: end;
    }

    .page-web-textbook-search .search-input-group {
        position: relative;
    }

    .page-web-textbook-search .search-input {
        width: 100%;
        border: none;
        border-radius: 10px;
        font-size: 1.1rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }

    .page-web-textbook-search .search-input:focus {
        outline: none;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
    }

    .page-web-textbook-search .search-btn {
        padding: 15px 30px;
        background: #fff;
        color: #2772E1;
        border: none;
        border-radius: 10px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .page-web-textbook-search .search-btn:hover {
        background: #f8f9fa;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

    .page-web-textbook-search .advanced-search-btn {
        padding: 15px 25px;
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 10px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .page-web-textbook-search .advanced-search-btn:hover {
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.5);
    }

    /* 高级搜索面板 */
    .page-web-textbook-search .advanced-search-panel {
        background: #fff;
        border-radius: 15px;
        padding: 30px;
        margin-bottom: 30px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        display: none;
    }

    .page-web-textbook-search .advanced-search-panel.active {
        display: block;
        animation: slideDown 0.3s ease;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

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

    .page-web-textbook-search .advanced-form {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .page-web-textbook-search .form-group {
        display: flex;
        flex-direction: column;
    }

    .page-web-textbook-search .form-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 8px;
    }

    .page-web-textbook-search .form-control {
        padding: 12px 15px;
        border: 2px solid #e9ecef;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .page-web-textbook-search .form-control:focus {
        outline: none;
        border-color: #2772E1;
        box-shadow: 0 0 0 3px rgba(39, 114, 225, 0.1);
    }

    /* 搜索结果区域 */
    .page-web-textbook-search .results-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
        padding: 0 5px;
    }

    .page-web-textbook-search .results-count {
        font-size: 1.1rem;
        color: #495057;
    }

    .page-web-textbook-search .results-count .count {
        font-weight: 700;
        color: #2772E1;
    }

    .page-web-textbook-search .sort-options {
        display: flex;
        gap: 15px;
        align-items: center;
    }

    .page-web-textbook-search .sort-btn {
        padding: 8px 16px;
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.9rem;
    }

    .page-web-textbook-search .sort-btn:hover,
    .page-web-textbook-search .sort-btn.active {
        background: #2772E1;
        color: #fff;
        border-color: #2772E1;
    }

    /* 搜索结果列表 */
    .page-web-textbook-search .results-list {
        display: grid;
        gap: 25px;
    }

    .page-web-textbook-search .result-item {
        display: grid;
        grid-template-columns: 120px 1fr auto;
        gap: 25px;
        background: #fff;
        padding: 25px;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        border: 1px solid #e9ecef;
    }

    .page-web-textbook-search .result-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        border-color: #2772E1;
    }

    .page-web-textbook-search .result-cover {
        width: 100%;
        height: 160px;
        object-fit: cover;
        border-radius: 8px;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    .page-web-textbook-search .result-cover:hover {
        transform: scale(1.05);
    }

    .page-web-textbook-search .result-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .page-web-textbook-search .result-title {
        font-size: 1.3rem;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 10px;
        line-height: 1.4;
        cursor: pointer;
        transition: color 0.3s ease;
    }

    .page-web-textbook-search .result-title:hover {
        color: #2772E1;
    }

    .page-web-textbook-search .result-meta {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-bottom: 15px;
    }

    .page-web-textbook-search .meta-item {
        font-size: 0.95rem;
        color: #6c757d;
    }

    .page-web-textbook-search .meta-label {
        font-weight: 600;
        margin-right: 5px;
    }

    .page-web-textbook-search .result-summary {
        font-size: 1rem;
        color: #495057;
        line-height: 1.6;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .page-web-textbook-search .result-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .page-web-textbook-search .action-btn {
        padding: 10px 20px;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.3s ease;
        white-space: nowrap;
    }

    .page-web-textbook-search .btn-primary {
        background: linear-gradient(135deg, #2772E1 0%, #1e5cbf 100%);
        color: #fff;
    }

    .page-web-textbook-search .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(39, 114, 225, 0.3);
    }

    .page-web-textbook-search .btn-secondary {
        background: #f8f9fa;
        color: #495057;
        border: 1px solid #dee2e6;
    }

    .page-web-textbook-search .btn-secondary:hover {
        background: #e9ecef;
        border-color: #adb5bd;
    }

    /* ------------------------------------
   注册页面(register.html)适配样式
   ------------------------------------ */

    .page-web-register .register-container {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 20px;
    }

    .page-web-register .register-card {
        background: #fff;
        border-radius: 20px;
        padding: 50px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
        width: 100%;
        max-width: 500px;
        transform: translateY(0);
        transition: all 0.3s ease;
    }

    .page-web-register .register-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
    }

    .page-web-register .register-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .page-web-register .register-title {
        font-size: 2.2rem;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 10px;
    }

    .page-web-register .register-subtitle {
        font-size: 1.1rem;
        color: #6c757d;
        margin-bottom: 0;
    }

    .page-web-register .register-form {
        display: grid;
        gap: 20px;
    }

    .page-web-register .form-group {
        position: relative;
    }

    .page-web-register .form-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 8px;
        display: block;
    }

    .page-web-register .form-control {
        width: 100%;
        padding: 15px 20px;
        border: 2px solid #e9ecef;
        border-radius: 10px;
        font-size: 1rem;
        transition: all 0.3s ease;
        background: #fff;
    }

    .page-web-register .form-control:focus {
        outline: none;
        border-color: #2772E1;
        box-shadow: 0 0 0 3px rgba(39, 114, 225, 0.1);
        transform: translateY(-1px);
    }

    .page-web-register .password-toggle {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: #6c757d;
        transition: color 0.3s ease;
    }

    .page-web-register .password-toggle:hover {
        color: #2772E1;
    }

    .page-web-register .form-check {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .page-web-register .form-check-input {
        width: 18px;
        height: 18px;
        border: 2px solid #dee2e6;
        border-radius: 4px;
        cursor: pointer;
    }

    .page-web-register .form-check-label {
        color: #6c757d;
        cursor: pointer;
        user-select: none;
    }

    .page-web-register .submit-btn {
        width: 100%;
        padding: 15px;
        background: linear-gradient(135deg, #2772E1 0%, #1e5cbf 100%);
        color: #fff;
        border: none;
        border-radius: 10px;
        font-size: 1.1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .page-web-register .submit-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(39, 114, 225, 0.3);
    }

    .page-web-register .submit-btn:active {
        transform: translateY(0);
    }

    .page-web-register .register-footer {
        text-align: center;
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid #e9ecef;
    }

    .page-web-register .login-link {
        color: #2772E1;
        text-decoration: none;
        font-weight: 600;
        transition: color 0.3s ease;
    }

    .page-web-register .login-link:hover {
        color: #1e5cbf;
        text-decoration: underline;
    }

    /* 表单验证错误样式 */
    .page-web-register .form-control.error {
        border-color: #dc3545;
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
    }

    .page-web-register .error-message {
        color: #dc3545;
        font-size: 0.875rem;
        margin-top: 5px;
        display: none;
    }

    .page-web-register .form-group.has-error .error-message {
        display: block;
    }

    /* 加载状态 */
    .page-web-register .submit-btn.loading {
        pointer-events: none;
        opacity: 0.7;
    }

    .page-web-register .submit-btn.loading::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        border: 2px solid transparent;
        border-top: 2px solid #fff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

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

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

}

/* WEB页面基础布局优化 */

/* ------------------------------------
   WEB页面响应式适配
   ------------------------------------ */

/* 中等平板适配 */
@media (max-width: 1200px) {
    .page-web-textbook-details .main-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .page-web-textbook-details .book-sidebar {
        position: static;
    }

    .page-web-schools .content-container-outer {
        grid-template-columns: 250px 1fr;
        gap: 20px;
    }

    .page-web-textbook-search .advanced-form {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 小平板适配 */
@media (max-width: 1024px) {
    .page-web-home .sys-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .page-web-schools .content-container-outer {
        grid-template-columns: 1fr;
    }

    .page-web-schools .tree-container {
        max-height: 300px;
    }

    .page-web-schools .book-list {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .page-web-textbook-search .search-form {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .page-web-textbook-search .advanced-form {
        grid-template-columns: 1fr;
    }

    .page-web-textbook-search .result-item {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .page-web-textbook-details .book-header {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .page-web-textbook-details .book-meta {
        grid-template-columns: 1fr;
    }
}

/* WEB页面触摸优化 */
@media (hover: none) and (pointer: coarse) {

    .page-web-home .sys-item,
    .page-web-schools .card,
    .page-web-textbook-search .result-item {
        transition: none;
    }

    .page-web-home .sys-item:active,
    .page-web-schools .card:active,
    .page-web-textbook-search .result-item:active {
        transform: scale(0.98);
    }

    .page-web-textbook-details .book-cover-large:active {
        transform: scale(1.02);
    }
}

/* WEB页面无障碍访问 */
.page-web-home *:focus,
.page-web-schools *:focus,
.page-web-textbook-details *:focus,
.page-web-textbook-search *:focus,
.page-web-register *:focus {
    /* outline: 2px solid #2772E1;
    outline-offset: 2px; */
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {

    .page-web-home .sys-item,
    .page-web-schools .card,
    .page-web-textbook-search .result-item {
        border: 2px solid #000;
    }

    .page-web-home .main-title,
    .page-web-home .sub-title {
        text-shadow: 2px 2px 0 #000;
    }
}

/* 减少动画模式支持 */
@media (prefers-reduced-motion: reduce) {

    .page-web-home *,
    .page-web-schools *,
    .page-web-textbook-details *,
    .page-web-textbook-search *,
    .page-web-register * {
        animation: none !important;
        transition: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    .page-web-home *,
    .page-web-schools *,
    .page-web-textbook-details *,
    .page-web-textbook-search *,
    .page-web-register * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ====================================
   管理后台主框架页面适配 (index.html)
   ==================================== */

/* 主框架页面基础优化 */
.page-admin-index.large-tablet-landscape {
    min-width: 1024px;
    height: 100vh;
    overflow: hidden;
}

.page-admin-index #wrapper {
    display: flex;
    width: 100%;
    height: 100vh;
    transition: all 0.3s ease;
}

/* 左侧导航栏优化 */
.page-admin-index .navbar-default.navbar-static-side {
    width: 260px;
    min-width: 260px;
    max-width: 260px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1030;
    background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
    border-right: 2px solid #34495e;
    transition: all 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
}

.page-admin-index .navbar-default.navbar-static-side::-webkit-scrollbar {
    width: 6px;
}

.page-admin-index .navbar-default.navbar-static-side::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

.page-admin-index .navbar-default.navbar-static-side::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.page-admin-index .navbar-default.navbar-static-side::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Logo区域优化 */
.page-admin-index .navbar-static-side .logo {
    padding: 20px 15px;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.page-admin-index .navbar-static-side .logo .logo-lg {
    color: #fff;
    font-size: 18px !important;
    font-weight: 600;
    text-align: center;
    display: block;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 用户信息面板优化 */
.page-admin-index .sidebar-collapse .user-panel {
    padding: 20px 15px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.page-admin-index .user-panel .image img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.page-admin-index .user-panel:hover .image img {
    border-color: #3498db;
    transform: scale(1.05);
}

.page-admin-index .user-panel .info {
    margin-left: 65px;
    margin-top: -50px;
}

.page-admin-index .user-panel .info p {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

.page-admin-index .user-panel .info a {
    color: #bdc3c7;
    font-size: 13px;
    transition: color 0.3s ease;
}

.page-admin-index .user-panel .info a:hover {
    color: #3498db;
}

/* 导航菜单优化 */
.page-admin-index .sidebar-collapse .nav {
    margin: 0;
    padding: 10px 0;
}

.page-admin-index .sidebar-collapse .nav>li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.page-admin-index .sidebar-collapse .nav>li>a {
    color: #bdc3c7;
    padding: 15px 20px;
    font-size: 15px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.page-admin-index .sidebar-collapse .nav>li>a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: #3498db;
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.page-admin-index .sidebar-collapse .nav>li>a:hover,
.page-admin-index .sidebar-collapse .nav>li.active>a {
    color: #fff;
    background: rgba(52, 152, 219, 0.1);
    text-decoration: none;
}

.page-admin-index .sidebar-collapse .nav>li>a:hover::before,
.page-admin-index .sidebar-collapse .nav>li.active>a::before {
    transform: scaleY(1);
}

.page-admin-index .sidebar-collapse .nav>li>a i {
    margin-right: 12px;
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.page-admin-index .sidebar-collapse .nav>li>a .nav-label {
    font-weight: 500;
}

.page-admin-index .sidebar-collapse .nav>li>a .fa.arrow {
    float: right;
    margin-top: 3px;
    transition: transform 0.3s ease;
}

.page-admin-index .sidebar-collapse .nav>li.active>a .fa.arrow {
    transform: rotate(90deg);
}

/* 二级菜单优化 */
.page-admin-index .sidebar-collapse .nav .nav-second-level {
    background: rgba(0, 0, 0, 0.2);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.page-admin-index .sidebar-collapse .nav>li.active .nav-second-level {
    max-height: 500px;
}

.page-admin-index .sidebar-collapse .nav .nav-second-level>li>a {
    color: #95a5a6;
    padding: 12px 20px 12px 55px;
    font-size: 14px;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

.page-admin-index .sidebar-collapse .nav .nav-second-level>li>a:hover,
.page-admin-index .sidebar-collapse .nav .nav-second-level>li.active>a {
    color: #3498db;
    background: rgba(52, 152, 219, 0.1);
    border-left-color: #3498db;
    text-decoration: none;
}

/* 右侧主内容区域优化 */
.page-admin-index #page-wrapper {
    margin-left: 260px;
    width: calc(100% - 260px);
    height: 100vh;
    background: #f8f9fa;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* 顶部导航栏优化 */
.page-admin-index #page-wrapper .row.border-bottom {
    flex-shrink: 0;
    margin: 0;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1020;
}

.page-admin-index .navbar-static-top {
    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
    border: none;
    min-height: 60px;
    margin-bottom: 0;
}

.page-admin-index .navbar-header .navbar-minimalize {
    padding: 18px 20px;
    color: #fff !important;
    font-size: 18px;
    transition: all 0.3s ease;
    border-radius: 5px;
    margin: 6px;
}

.page-admin-index .navbar-header .navbar-minimalize:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

/* 顶部右侧导航优化 */
.page-admin-index .navbar-top-links {
    padding: 0 20px;
}

.page-admin-index .navbar-top-links>li {
    float: left;
}

.page-admin-index .navbar-top-links>li>a {
    padding: 18px 15px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 5px;
    margin: 6px 2px;
}

.page-admin-index .navbar-top-links>li>a:hover {
    background: rgba(255, 255, 255, 0.1);
    text-decoration: none;
    transform: translateY(-2px);
}

.page-admin-index .navbar-top-links>li>a i {
    margin-right: 5px;
}

/* 角色选择器优化 */
.page-admin-index #roleType2 {
    padding: 12px 8px !important;
}

.page-admin-index .roleTypeSelect {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: #2c3e50;
    font-size: 14px;
    transition: all 0.3s ease;
}

.page-admin-index .roleTypeSelect:focus {
    background: #fff;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

/* 数字教材编辑器入口优化 */
.page-admin-index .digitalBook-box {
    background: linear-gradient(90deg, #8e44ad 0%, #9b59b6 100%);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.page-admin-index .digitalBook-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(142, 68, 173, 0.3);
}

.page-admin-index .digitalBook-view {
    background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.page-admin-index .digitalBook-view:hover {
    background: linear-gradient(180deg, #c0392b 0%, #a93226 100%);
    transform: scale(1.05);
}

/* 学校信息显示优化 */
.page-admin-index .school-info span {
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 15px !important;
    border-radius: 20px;
    font-size: 14px !important;
    backdrop-filter: blur(10px);
}

/* 用户下拉菜单优化 */
.page-admin-index .dropdown.user-menu .dropdown-toggle {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    padding: 8px 15px;
    transition: all 0.3s ease;
}

.page-admin-index .dropdown.user-menu .dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

.page-admin-index .dropdown.user-menu .user-image {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-right: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.page-admin-index .dropdown.user-menu .dropdown-menu {
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: none;
    margin-top: 10px;
    min-width: 200px;
}

.page-admin-index .dropdown.user-menu .dropdown-menu>li>a {
    padding: 12px 20px;
    color: #2c3e50;
    font-size: 14px;
    transition: all 0.3s ease;
}

.page-admin-index .dropdown.user-menu .dropdown-menu>li>a:hover {
    background: #f8f9fa;
    color: #3498db;
    padding-left: 25px;
}

.page-admin-index .dropdown.user-menu .dropdown-menu>li>a i {
    margin-right: 10px;
    width: 16px;
    text-align: center;
}

/* 选项卡栏优化 */
.page-admin-index .content-tabs {
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 50px;
    flex-shrink: 0;
}

.page-admin-index .content-tabs .roll-nav {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #6c757d;
    text-decoration: none;
    border-radius: 5px;
    margin: 0 5px;
    transition: all 0.3s ease;
}

.page-admin-index .content-tabs .roll-nav:hover {
    background: #3498db;
    color: #fff;
    border-color: #3498db;
    transform: scale(1.1);
}

.page-admin-index .page-tabs {
    flex: 1;
    margin: 0 10px;
    overflow: hidden;
}

.page-admin-index .page-tabs-content {
    white-space: nowrap;
    transition: transform 0.3s ease;
}

.page-admin-index .menuTab {
    display: inline-block;
    padding: 12px 20px;
    background: #f8f9fa;
    color: #6c757d;
    text-decoration: none;
    border: 1px solid #dee2e6;
    margin-right: 2px;
    border-radius: 5px 5px 0 0;
    transition: all 0.3s ease;
    position: relative;
    font-size: 14px;
}

.page-admin-index .menuTab:hover {
    background: #e9ecef;
    color: #495057;
    transform: translateY(-2px);
}

.page-admin-index .menuTab.active {
    background: #3498db;
    color: #fff;
    border-color: #3498db;
    z-index: 1;
}

.page-admin-index .menuTab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: #3498db;
}

/* 刷新按钮优化 */
.page-admin-index .tabReload {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    color: #fff;
    border-color: #27ae60;
}

.page-admin-index .tabReload:hover {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    transform: scale(1.05) rotate(90deg);
}

/* 主内容区域优化 */
.page-admin-index .mainContent {
    flex: 1;
    margin: 0;
    background: #fff;
    position: relative;
    overflow: hidden;
}

.page-admin-index .RuoYi_iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
}

/* 全屏关闭按钮优化 */
.page-admin-index .ax_close_max {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(231, 76, 60, 0.9);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 9999;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.page-admin-index .ax_close_max:hover {
    background: rgba(192, 57, 43, 0.9);
    transform: scale(1.1) rotate(90deg);
    color: #fff;
}

/* 弹窗优化 */
.page-admin-index .layui-layer {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.page-admin-index .layui-layer-title {
    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
    color: #fff;
    font-weight: 600;
    padding: 15px 20px;
}

.page-admin-index .layui-layer-content {
    padding: 20px;
}

.page-admin-index .layui-layer-btn {
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

.page-admin-index .layui-layer-btn a {
    padding: 12px 30px;
    border-radius: 5px;
    margin: 10px 5px;
    transition: all 0.3s ease;
}

.page-admin-index .layui-layer-btn0 {
    background: #3498db;
    color: #fff;
}

.page-admin-index .layui-layer-btn0:hover {
    background: #2980b9;
    transform: translateY(-2px);
}

/* 手机绑定弹窗优化 */
.page-admin-index .forget-pwd {
    padding: 20px;
}

.page-admin-index .forget-pwd dl {
    margin-bottom: 20px;
}

.page-admin-index .forget-pwd dt {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
}

.page-admin-index .forget-pwd dd {
    margin: 0;
}

.page-admin-index .mobilephone_text,
.page-admin-index .forget-pwd input[type="text"] {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.page-admin-index .mobilephone_text:focus,
.page-admin-index .forget-pwd input[type="text"]:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
    outline: none;
}

.page-admin-index .CAPTCHA_send {
    background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.page-admin-index .CAPTCHA_send:hover {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    transform: translateY(-2px);
}

/* 导航收起状态优化 */
.page-admin-index.mini-navbar .navbar-static-side {
    width: 70px;
    min-width: 70px;
    max-width: 70px;
}

.page-admin-index.mini-navbar #page-wrapper {
    margin-left: 70px;
    width: calc(100% - 70px);
}

.page-admin-index.mini-navbar .nav-label,
.page-admin-index.mini-navbar .fa.arrow,
.page-admin-index.mini-navbar .logo-lg {
    display: none;
}

.page-admin-index.mini-navbar .sidebar-collapse .nav>li>a {
    text-align: center;
    padding: 15px 10px;
}

.page-admin-index.mini-navbar .sidebar-collapse .nav>li>a i {
    margin-right: 0;
    font-size: 20px;
}

/* 响应式适配 */
@media (max-width: 1200px) {
    .page-admin-index .navbar-static-side {
        width: 240px;
        min-width: 240px;
        max-width: 240px;
    }

    .page-admin-index #page-wrapper {
        margin-left: 240px;
        width: calc(100% - 240px);
    }

    .page-admin-index .navbar-top-links>li>a {
        padding: 15px 10px;
        font-size: 13px;
    }

    .page-admin-index .digitalBook-box {
        width: 250px;
    }
}

@media (max-width: 1024px) {
    .page-admin-index .navbar-static-side {
        transform: translateX(-100%);
    }

    .page-admin-index.sidebar-open .navbar-static-side {
        transform: translateX(0);
    }

    .page-admin-index #page-wrapper {
        margin-left: 0;
        width: 100%;
    }

    .page-admin-index .navbar-header .navbar-minimalize {
        display: block;
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {

    .page-admin-index .sidebar-collapse .nav>li>a,
    .page-admin-index .navbar-top-links>li>a,
    .page-admin-index .menuTab {
        transition: none;
    }

    .page-admin-index .sidebar-collapse .nav>li>a:active {
        background: rgba(52, 152, 219, 0.2);
        transform: scale(0.98);
    }

    .page-admin-index .navbar-top-links>li>a:active {
        background: rgba(255, 255, 255, 0.2);
        transform: scale(0.98);
    }

    .page-admin-index .menuTab:active {
        transform: scale(0.98);
    }
}

/* 无障碍访问优化 */
.page-admin-index *:focus {
    outline: 2px solid #3498db;
    outline-offset: 2px;
}

.page-admin-index .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {

    .page-admin-index .navbar-static-side,
    .page-admin-index .navbar-static-top {
        background: #000;
        border-color: #fff;
    }

    .page-admin-index .sidebar-collapse .nav>li>a {
        border-bottom: 1px solid #333;
    }

    .page-admin-index .menuTab {
        border: 2px solid #000;
    }
}

/* 减少动画模式支持 */
@media (prefers-reduced-motion: reduce) {
    .page-admin-index * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 缩放兼容性修复 - 防止transform scale与浏览器缩放冲突 */
@media screen and (min-width: 1024px) and (max-width: 1366px) {

    /* 在大平板适配范围内，确保布局稳定性 */
    #wrapper {
        transform-origin: top left !important;
        backface-visibility: hidden;
    }

    #page-wrapper {
        transform-origin: top left !important;
        backface-visibility: hidden;
    }

    /* 修复可能的缩放冲突 */
    .navbar-static-side {
        transform-origin: top left !important;
        width: 220px !important;
    }

    .sidebar-collapsed .navbar-static-side {
        width: 80px !important;
    }

    /* 确保主内容区正确对齐 */
    #page-wrapper {
        margin-left: 220px !important;
    }

    .sidebar-collapsed #page-wrapper {
        margin-left: 80px !important;
    }
}

/* 防止缩放时的布局跳动 */
@media screen and (min-resolution: 96dpi) {
    * {
        box-sizing: border-box;
    }

    #wrapper,
    #page-wrapper,
    .navbar-static-side {
        transform: translateZ(0);
    }
}