/* 预览页层（GitHub 风格）：信息头 / 工具栏 / 各类型渲染区（仅 preview.php 引用） */

.preview-container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 24px 24px 48px; flex: 1; }

/* 文件信息头 */
.preview-info { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px 14px; margin-bottom: 16px; }
.preview-title { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.preview-title h1 { font-size: 1.25rem; font-weight: 600; color: var(--text); word-break: break-all; line-height: 1.4; }
.preview-title svg { width: 22px; height: 22px; color: var(--text-secondary); flex-shrink: 0; }
.preview-title .tag { display: inline-block; padding: 2px 10px; font-size: .75rem; border-radius: 3px; background: var(--tag-bg); color: var(--text-secondary); flex-shrink: 0; }
.preview-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; font-size: .82rem; color: var(--text-secondary); align-items: center; }
.preview-meta .meta-item { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }

/* 内容卡片 + 工具栏 */
.preview-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.preview-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--hover-bg); flex-wrap: wrap; }
.preview-nav, .preview-actions { display: flex; gap: 8px; align-items: center; }
.pbtn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 5px; border: 1px solid var(--border); background: #fff; color: var(--text); font-size: .82rem; text-decoration: none; transition: background .15s, border-color .15s; white-space: nowrap; }
.pbtn:hover { background: var(--hover-bg); }
.pbtn svg { width: 14px; height: 14px; flex-shrink: 0; }
.pbtn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.pbtn.primary:hover { background: var(--primary-light); }
.pbtn.disabled { opacity: .45; pointer-events: none; }

/* 渲染区（各类型） */
.preview-body { flex: 1; display: flex; flex-direction: column; min-height: 320px; }
.preview-image { margin: 0 auto; max-width: 100%; max-height: 78vh; padding: 24px; object-fit: contain; align-self: center; }
.preview-frame { flex: 1; width: 100%; height: 78vh; border: none; }
.preview-text { margin: 0; padding: 20px; overflow: auto; font-family: 'SF Mono', 'Consolas', 'Monaco', monospace; font-size: .82rem; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.preview-md { flex: 1; width: 100%; min-height: 60vh; border: none; background: #fff; }

/* Word（docx-preview 输出） */
.preview-docx { flex: 1; overflow: auto; background: #f0f2f5; padding: 20px; }
.preview-docx .docx-wrapper { background: transparent !important; padding: 0 !important; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.preview-docx .docx-wrapper section.docx { box-shadow: 0 1px 6px rgba(0,0,0,.18); background: #fff; margin: 0 !important; }

/* Excel（SheetJS 输出） */
.preview-xlsx { flex: 1; overflow: auto; padding: 16px; }
.sheet-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.sheet-tab { padding: 4px 14px; font-size: .8rem; border: 1px solid var(--border); border-bottom: none; border-radius: 4px 4px 0 0; background: #fff; cursor: pointer; color: var(--text-secondary); font-family: inherit; }
.sheet-tab:hover { background: var(--hover-bg); }
.sheet-tab.active { color: var(--primary); font-weight: 600; box-shadow: inset 0 2px 0 var(--primary); }
.sheet-view { overflow-x: auto; }
.sheet-view table { border-collapse: collapse; font-size: .8rem; background: #fff; }
.sheet-view th, .sheet-view td { border: 1px solid var(--border); padding: 4px 10px; white-space: nowrap; }
.sheet-view th { background: var(--hover-bg); font-weight: 500; }

/* 不支持预览 */
.preview-unsupported { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 60px 20px; color: var(--text-secondary); }
.preview-unsupported svg { width: 48px; height: 48px; color: var(--border); }
.preview-unsupported p { font-size: .9rem; }

/* 响应式 */
@media (max-width: 768px) {
    .preview-container { padding: 16px 12px 32px; }
    .preview-toolbar { justify-content: center; }
    .preview-image { max-height: 60vh; padding: 12px; }
    .preview-frame { height: 65vh; }
}