/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    color: #333;
}

.container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 认证界面样式 */
.auth-container {
    background: white;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 40px;
    width: 100%;
    max-width: 400px;
    margin: 20px;
}

.auth-form h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
    font-size: 28px;
}

.tab-buttons {
    display: flex;
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
}

.tab-btn {
    flex: 1;
    padding: 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
}

.tab-btn.active {
    background: #667eea;
    color: white;
}

.input-group {
    position: relative;
    margin-bottom: 20px;
}

.input-group i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

.input-group input {
    width: 100%;
    padding: 15px 15px 15px 45px;
    border: 2px solid #e1e1e1;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.input-group input:focus {
    outline: none;
    border-color: #667eea;
}

/* 密码可见性切换按钮 */
.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
}
.password-toggle:hover {
    background: rgba(0,0,0,0.05);
}

/* 邮箱建议小标签 */
.email-suggestions {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 6px;
}
.email-suggestion {
    font-size: 12px;
    color: #667eea;
    background: #eef2ff;
    border: 1px solid #dde3ff;
    border-radius: 12px;
    padding: 2px 8px;
    cursor: pointer;
}
.email-suggestion:hover {
    background: #e1e8ff;
}

/* 密码要求提示 */
.pwd-req {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 10px 0 15px;
    color: #333;
}
.pwd-req-title {
    font-size: 14px;
    margin-bottom: 8px;
    color: #495057;
}
.pwd-req ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}
.pwd-req li {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pwd-req li .icon {
    width: 18px;
    display: inline-block;
    text-align: center;
}
.pwd-req li.fail { color: #c0392b; }
.pwd-req li.fail .icon { color: #c0392b; }
.pwd-req li.success { color: #28a745; }
.pwd-req li.success .icon { color: #28a745; }

/* 入口页面移动端更友好尺寸 */
#auth-container.auth-container {
    max-width: 520px;
}
@media (max-width: 420px) {
    .auth-container { padding: 26px; border-radius: 12px; }
    .auth-form h2 { font-size: 24px; }
    .input-group input { font-size: 17px; padding: 16px 12px 16px 44px; }
    .btn { padding: 16px; font-size: 17px; }
}

.btn {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.btn-primary {
    background: #667eea;
    color: white;
}

.btn-primary:hover {
    background: #5a6fd8;
    transform: translateY(-2px);
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #5a6268;
}

.btn-danger {
    background: #dc3545;
    color: white;
}

.btn-danger:hover {
    background: #c82333;
}

.btn-sm {
    padding: 8px 12px;
    font-size: 14px;
    min-height: auto;
}

/* 邀请码管理样式 */
.invite-code-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 避免右侧列表被拉伸到与左侧表单等高，保持各列按内容自适应高度 */
    align-items: start;
    gap: 20px;
    margin-top: 15px;
}

.invite-form-section,
.invite-list-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #e9ecef;
}

.invite-form-section h4,
.invite-list-section h4 {
    margin-bottom: 15px;
    color: #495057;
    font-size: 16px;
}

.invite-codes-grid {
    display: grid;
    gap: 10px;
    /* 每个条目最小高度，便于计算容器高度 */
    grid-auto-rows: minmax(68px, auto);
}

/* 邀请码列表容器：取消滚动，由渲染逻辑控制只显示前两条 */
#invite-codes-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.invite-code-item {
    background: white;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    cursor: pointer;
    transition: all 0.3s ease;
}

.invite-code-item:hover {
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.invite-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.invite-code-text {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: #495057;
    font-size: 14px;
}

.status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.active {
    background: #d4edda;
    color: #155724;
}

.status-badge.inactive {
    background: #f8d7da;
    color: #721c24;
}

.status-badge.expired {
    background: #fff3cd;
    color: #856404;
}

.invite-code-info {
    font-size: 12px;
    color: #6c757d;
    line-height: 1.4;
}

/* 邀请码详情模态框样式 */
.invite-details {
    display: grid;
    gap: 20px;
}

.invite-code-display,
.invite-url-display {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.invite-code-display label,
.invite-url-display label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #495057;
}

.code-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.invite-code-text,
.invite-url-text {
    flex: 1;
    font-family: 'Courier New', monospace;
    background: white;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 14px;
    word-break: break-all;
}

.qr-code-section {
    text-align: center;
}

.qr-code-section label {
    display: block;
    margin-bottom: 15px;
    font-weight: 600;
    color: #495057;
}

.qr-code-display {
    background: white;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    display: inline-block;
    margin-bottom: 15px;
}

.invite-info {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.invite-info p {
    margin-bottom: 8px;
    font-size: 14px;
}

.invite-info p:last-child {
    margin-bottom: 0;
}

.modal-footer {
    padding: 20px 30px;
    border-top: 1px solid #e1e1e1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .invite-code-container {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        width: 95%;
        margin: 10px;
    }
    
    .code-container {
        flex-direction: column;
        align-items: stretch;
    }
}

/* 主应用界面样式 */
.main-container {
    width: 100%;
    max-width: 1200px;
    margin: 20px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header h1 {
    font-size: 24px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-info {
    font-size: 14px;
    opacity: 0.9;
}

.file-manager {
    padding: 30px;
    display: grid; /* 新增：横向两列布局 */
    grid-template-columns: 240px 1fr; /* 左侧文件夹，右侧文件容器 */
    grid-column-gap: 10px; /* 中间间隔小一点 */
    grid-row-gap: 12px;
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0; /* 改为0，使用grid行间距 */
    flex-wrap: wrap;
    gap: 15px;
    grid-column: 1 / -1; /* 工具栏占满两列 */
}

.toolbar-left {
    display: flex;
    gap: 10px;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box i {
    position: absolute;
    left: 15px;
    color: #999;
}

.search-box input {
    padding: 10px 15px 10px 40px;
    border: 2px solid #e1e1e1;
    border-radius: 25px;
    width: 250px;
    font-size: 14px;
}

.search-box input:focus {
    outline: none;
    border-color: #667eea;
}

/* 文件列表样式（更新为8列并更紧凑） */
.file-list {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
}

/* 文件列表外层容器平滑滚动 */
.file-list-container {
    scroll-behavior: smooth;
}

.file-item {
    background: white;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.file-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

/* 选中高亮（与树节点高亮风格一致） */
.file-item.active {
    background: #e0e4ff;
    box-shadow: 0 0 0 2px rgba(102,126,234,0.18) inset;
}

.file-icon {
    font-size: 48px;
    color: #667eea;
    margin-bottom: 15px;
    text-align: center;
}

.file-name {
    font-weight: 600;
    margin-bottom: 4px;
    word-break: break-word;
}

.file-size {
    color: #666;
    font-size: 14px;
    margin-bottom: 6px;
}

.file-date {
    color: #999;
    font-size: 12px;
    margin-bottom: 6px;
}

.file-item .file-folder {
    color: #555;
    font-size: 12px;
    margin: 0 8px 6px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 文件夹树样式 */
.folder-tree-container {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 8px; /* 原12px，压缩整体容器 */
    margin-bottom: 0; /* 横排后取消底部外边距 */
    /* 在管理页中，该容器位于右侧 aside 内，不需要指定 grid-column。避免影响内层布局。*/
}

.folder-tree {
    max-height: 220px; /* 横排后调至更合适的紧凑高度 */
    overflow-y: auto;
    scroll-behavior: smooth; /* 选中自动滚动更平滑 */
}

.tree-section {
    margin-bottom: 8px;
}

.tree-section-title {
    font-size: 12px;
    color: #6b7280;
    margin: 4px 0;
}

.folder-badge {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11px;
    background: #e5e7eb;
    color: #374151;
    margin-left: 6px;
    line-height: 18px;
}

.folder-badge.badge-root {
    background: #2563eb;
    color: #fff;
}

.folder-badge.badge-private {
    background: #1f2937;
    color: #fff;
}

.folder-badge.badge-shared {
    background: #047857;
    color: #fff;
}

.shared-node .tree-row i.fa-share-alt {
    color: #059669;
}

body.modal-open {
    overflow: hidden;
}

.members-list {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    background: #f9fafb;
}

.members-list .member-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 4px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
}

.members-list .member-row:last-child {
    border-bottom: none;
}

.members-list .member-row strong {
    font-size: 13px;
    color: #111827;
}

.members-list .member-role {
    margin-left: 6px;
    color: #2563eb;
    font-weight: 600;
    font-size: 12px;
}

.members-list .member-email {
    margin-left: 8px;
    color: #6b7280;
    font-size: 12px;
}

.members-list .empty-hint {
    text-align: center;
    color: #6b7280;
    padding: 12px 0;
    font-size: 13px;
}

.member-form {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.member-form .input-group {
    margin: 0;
}

.tree-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
}

.tree-row:hover {
    background: #eef1ff;
}

.tree-row.active {
    background: #e0e4ff;
}

/* 共享文件夹亮色样式 */
.tree-row.folder-shared {
    background: #fff9e6;
    border-left: 3px solid #ffc107;
}

.tree-row.folder-shared:hover {
    background: #fff4cc;
}

.tree-row.folder-shared.active {
    background: #ffe69c;
    border-left: 3px solid #ff9800;
}

.tree-node .children {
    margin-left: 0;
}

.tree-row i.fa-folder,
.tree-row i.fa-folder-open {
    color: #667eea;
}

.tree-indent-0 { padding-left: 0; }
.tree-indent-1 { padding-left: 12px; }
.tree-indent-2 { padding-left: 24px; }
.tree-indent-3 { padding-left: 36px; }

.file-actions {
    display: flex;
    gap: 10px;
}

.file-actions button {
    flex: 1;
    padding: 6px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.3s ease;
}


/* 同步记录样式 */
.sync-records {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 10px;
    grid-column: 1 / -1; /* 同步记录占满两列 */
}

.sync-records h3 {
    margin-bottom: 8px; /* 原20px，收紧 */
}

.sync-list {
    max-height: 56px; /* 原64px，更紧凑约两行 */
    overflow-y: auto;
}

.sync-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6px 8px; /* 原10px，压缩行内边距 */
    border-bottom: 1px solid #e1e1e1;
    font-size: 13px; /* 原14px，略微减小字号 */
    line-height: 1.2; /* 新增更紧凑的行高 */
}

/* 同步记录左侧文本两行截断 */
.sync-item > div:first-child {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

/* 非webkit兼容降级：固定两行高度并裁切 */
@supports not (-webkit-line-clamp: 2) {
    .sync-item > div:first-child {
        display: block;
        max-height: calc(2 * 1.3em);
        overflow: hidden;
    }
}
.sync-item:last-child {
    border-bottom: none;
}

.sync-action {
    font-weight: 500; /* 原600，稍微减薄以减压视觉体积 */
}

.sync-action.upload {
    color: #28a745;
}

.sync-action.download {
    color: #007bff;
}

.sync-action.delete {
    color: #dc3545;
}

.sync-time {
    color: #888; /* 更弱以突出左侧内容 */
    font-size: 10px; /* 原11px，进一步压缩 */
    line-height: 1.15; /* 与左侧一致 */
}

/* 模态框样式 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* 通用模态内容样式 */
.modal-content {
    background: white;
    border-radius: 15px;
    width: 90%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
}

/* 预览弹窗样式（覆盖尺寸） */
#preview-modal .modal-content {
    width: 90%;
    max-width: 960px;
    height: 80vh;
    max-height: 80vh;
}

#preview-modal .modal-body {
    height: calc(100% - 68px);
    padding: 16px;
}

.preview-area {
    width: 100%;
    height: 100%;
    background: #fafafa;
    border-radius: 8px;
    overflow: hidden;
    display: block;
}

/* 让嵌入的 PDF iframe 填满预览区域，避免居中缩放导致的显示异常 */
.preview-area iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.preview-area video,
.preview-area img,
.preview-area canvas,
.preview-area iframe,
.preview-area object {
    max-width: 100%;
    max-height: 100%;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 1px solid #e1e1e1;
}

.modal-header h3 {
    margin: 0;
}

.close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
}

.modal-body {
    padding: 30px;
}

/* 触控友好：弹窗内输入与按钮尺寸优化 */
.modal .input-group input {
    font-size: 16px;
    padding: 12px;
}

.modal .input-group select {
    font-size: 16px;
    padding: 12px;
}

.modal .btn {
    width: auto;
    min-height: 40px;
    font-size: 16px;
    padding: 10px 16px;
}

.upload-area {
    border: 2px dashed #667eea;
    border-radius: 10px;
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-area:hover {
    background: #f8f9ff;
    border-color: #5a6fd8;
}

.upload-area i {
    font-size: 48px;
    color: #667eea;
    margin-bottom: 15px;
}

.upload-area p {
    color: #666;
    font-size: 16px;
}

.upload-progress {
    margin-top: 20px;
}

.progress-bar {
    width: 100%;
    height: 20px;
    background: #e1e1e1;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    width: 0%;
    transition: width 0.3s ease;
}

/* 消息提示样式 */
.message-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
}

.message {
    background: white;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideIn 0.3s ease;
}

.message.success {
    border-left: 4px solid #28a745;
}

.message.error {
    border-left: 4px solid #dc3545;
}

.message.info {
    border-left: 4px solid #007bff;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .main-container {
        margin: 10px;
        border-radius: 10px;
    }
    
    .file-manager {
        padding: 20px;
        display: block; /* 小屏恢复纵向排列 */
    }
    
    .toolbar {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 10px; /* 小屏保留适度间距 */
    }
    
    .toolbar-left {
        justify-content: center;
    }
    
    .folder-tree-container { margin-bottom: 12px; } /* 小屏下文件夹容器与文件容器上下间距 */
    
    .search-box input {
        width: 100%;
    }
    
    .file-list {
        grid-template-columns: 1fr;
    }
    
    .header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* 管理页面布局（用户管理） */
.management-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 12px;
    align-items: start;
}
.create-form-col { max-width: 600px; }
.level-tree-pane { display: block; }
/* 在右侧全局侧栏中增加底部留白，避免面板标题贴近页面底部 */
.level-tree-pane { padding-bottom: 48px; }
/* level-tree 中徽标右对齐 */
#level-tree .tree-row .level-badge { margin-left: auto; }
.chosen-level { font-size: 13px; }

/* 右侧：浏览用户资源（避免被遮挡；可独立滚动） */
.resource-panel {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 8px;
  max-height: 280px; /* 为避免被页面底部遮挡，限制高度并允许滚动 */
  overflow-y: auto;
  margin-bottom: 124px; /* 额外底部间距：原24px基础上再增加100px */
}

/* 文件树容器增加底部留白 */
.folder-tree-container { padding-bottom: 24px; }

/* 管理用户列表横排网格（最多显示4行） */
.subtree-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
    max-height: calc(4 * 130px);
    overflow-y: auto;
}
.sub-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.sub-card .sub-info { display: flex; flex-direction: column; gap: 4px; }
.sub-card .sub-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sub-status-inline { color: #666; }

/* 工具类 */
.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

.mb-20 {
    margin-bottom: 20px;
}

.mt-20 {
    margin-top: 20px;
}

.file-thumb {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 auto 6px;
}

.file-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.file-thumb.icon i {
    font-size: 24px; /* compact icon */
    color: #667eea;
}
.level-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 4px;
  font-size: 11px;
  border-radius: 8px;
  background: #eef3ff;
  color: #3b5ccd;
}

/* 拖拽反馈（文件项与树节点） */
.file-item.drag-over { 
    outline: 2px dashed #667eea; 
}

.folder-tree .tree-row.drag-over { 
    background: #eef5ff; 
}

/* 批量操作栏与选择模式（恢复样式） */
.bulk-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    z-index: 2000;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
}

.bulk-left, .bulk-center, .bulk-right { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

@supports(padding: env(safe-area-inset-bottom)) {
    .bulk-bar { 
        padding-bottom: calc(10px + env(safe-area-inset-bottom)); 
    }
}

/* 选择模式下文件卡片左侧留出空间放复选框 */
.file-item.editable { 
    position: relative; 
    padding-left: 52px; 
}

.file-item .select-box { 
    position: absolute; 
    left: 12px; 
    top: 12px; 
}

.file-item .select-box input[type="checkbox"] { 
    width: 18px; 
    height: 18px; 
}

/* 行式文件列表：课程全部显示（按文件夹行展示） */
.file-list.file-rows { display: block; }
.file-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.folder-cell { flex: 0 0 200px; padding: 6px 8px; border-radius: 8px; background: #f5f7ff; color: #333; font-weight: 600; }
.folder-cell .level-badge { margin-left: 6px; }
.folder-cell.empty { visibility: hidden; }
.files-wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.file-rows .file-item { flex: 0 0 200px; }

/* 兼容小屏：行式布局下，文件块缩窄 */
@media (max-width: 768px) {
  .folder-cell { flex-basis: 160px; }
  .file-rows .file-item { flex-basis: 160px; }
}

/* ==== 登录与上传界面：移动/平板优化（仅样式覆盖，不改变功能） ==== */
/* 更现代的卡片与输入视觉（覆盖部分基础样式） */
.auth-container { padding: 36px; border-radius: 12px; }
.tab-btn.active { box-shadow: 0 6px 16px rgba(102,126,234,0.25); }
.input-group input { border-radius: 12px; padding: 16px 16px 16px 48px; line-height: 1.15; }
.input-group input:focus { box-shadow: 0 0 0 3px rgba(102,126,234,0.18); }
.btn { border-radius: 12px; }

/* 上传区域更像可点击的大按钮，提升触控体验 */
.upload-area {
  border-radius: 16px;
  padding: 44px;
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
}
.upload-area:hover { background: #f0f3ff; }
.upload-area i { font-size: 56px; }
.upload-area p { color: #555; margin-top: 6px; }

/* 进度条更纤细且现代 */
.progress-bar { height: 14px; background: #e6e8ef; border-radius: 999px; overflow: hidden; }
.progress-fill { background: linear-gradient(90deg, #667eea, #764ba2); }

/* 手机/平板断点优化 */
@media (max-width: 768px) {
  .container { align-items: stretch; }
  .auth-container { margin: 12px; padding: 24px; box-shadow: 0 12px 24px rgba(0,0,0,0.08); max-width: 520px; }
  .auth-form h2 { font-size: 24px; margin-bottom: 20px; }
  .tab-buttons { margin-bottom: 20px; }
  .tab-btn { font-size: 15px; padding: 12px 10px; }
  .input-group i { left: 14px; }
  .input-group input { font-size: 17px; }
  .btn { min-height: 48px; font-size: 17px; }

  .modal-content { width: 92%; }
  .modal-body { padding: 22px; }
  .upload-area { padding: 48px 16px; }
  .upload-area i { font-size: 64px; }
  .upload-area p { font-size: 15px; }
  .progress-bar { height: 16px; }
  #progress-text { font-size: 14px; color: #444; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* 平板优化 */
  .auth-container { max-width: 560px; padding: 32px; }
  .btn { min-height: 46px; }
  .upload-area { padding: 56px 24px; }
}

/* iOS 安全区适配 */
@supports(padding: env(safe-area-inset-bottom)){
  .modal { padding-bottom: env(safe-area-inset-bottom); }
}

/* ==== Entry 页面增强：人性化提示与移动端更大控件 ==== */
.form-hint { margin-top: 8px; font-size: 13px; color: #666; }
.form-cta { margin-top: 14px; font-size: 14px; color: #444; text-align: center; }
.form-cta a { color: #667eea; text-decoration: none; }
.form-cta a:hover { text-decoration: underline; }

/* 基础输入与按钮适度增大（不影响其他页面布局） */
.auth-container .input-group input { padding: 16px 16px 16px 48px; border-radius: 10px; font-size: 17px; }
.auth-container .btn { border-radius: 12px; }

/* 移动端增强：更宽的卡片、更大的触控目标与字号 */
@media (max-width: 768px) {
  .auth-container { max-width: 640px; padding: 26px; }
  .auth-form h2 { font-size: 26px; }
  .auth-container .input-group input { font-size: 18px; }
  .auth-container .btn { min-height: 52px; font-size: 18px; }
  .tab-btn { font-size: 16px; }
}