:root { --bg:#f5f6fa; --panel:#ffffff; --text:#111827; --muted:#6b7280; --primary:#1677ff; --border:#e5e7eb }
* { box-sizing: border-box }
html,body { height:100% }
body { margin:0; font-family:Segoe UI, Microsoft YaHei, Arial, sans-serif; color:var(--text); background:var(--bg) }
body { background-image: none }
body::before { content:""; position:fixed; inset:0; background:url('背景.jpg') center/cover no-repeat; opacity:.6; pointer-events:none; z-index:0 }

.app-header { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; background:rgba(255,255,255,.85); border-bottom:1px solid var(--border); backdrop-filter: saturate(1.2) blur(6px); position:relative; z-index:1100 }
.brand { font-size:18px; font-weight:600; display:flex; align-items:center; gap:8px }
.brand-logo { height:42px; width:auto; border-radius:4px }
.brand-title { white-space: nowrap; word-break: keep-all }
.toolbar { display:none }
.header-actions { display:flex; gap:8px }
.user-switch { position:relative }
.dropdown { position:absolute; right:0; top:100%; margin-top:6px; background:#fff; border:1px solid var(--border); border-radius:8px; box-shadow:0 12px 28px rgba(0,0,0,.12); padding:8px; display:flex; flex-direction:column; gap:6px; min-width:180px; z-index:1200 }
.dropdown-item { display:block; padding:6px 10px; border:1px solid var(--border); border-radius:6px; background:#f9fafb; color:#111827; text-decoration:none; cursor:pointer }
.dropdown-item:hover { background:#eef5ff; border-color:#cfe1ff }
.controls .user-switch { position:relative }
.vh-file { position: fixed; left: -9999px; top: -9999px; opacity: 0; width:1px; height:1px; pointer-events: none }
.btn { padding:8px 14px; border:1px solid var(--border); background:var(--panel); border-radius:6px; cursor:pointer }
.btn.primary { background:var(--primary); color:#fff; border-color:var(--primary) }
.btn:disabled { opacity:.6; cursor:not-allowed }

.container { display:grid; grid-template-columns: 380px 1fr; grid-template-rows: auto 1fr; grid-template-areas: 'upload results' 'upload results'; gap:12px; padding:12px; position:relative; z-index:1 }
.upload-panel, .result-panel { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px }
.upload-panel { grid-area: upload }
.result-panel { grid-area: results }
.upload-panel { box-shadow: 0 8px 24px rgba(0,0,0,.06) }
.upload-panel .title { font-weight:600; font-size:16px }
.upload-panel .caption { color:#9aa1a9; font-size:12px }
.card-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:8px }
.controls .btn { min-width: 100px }
.upload-panel .controls { display:flex; flex-direction:column; gap:12px; margin-bottom:10px }
.panel-title { font-weight:600; margin-bottom:8px }
.panel-actions { display:flex; gap:8px; align-items:center; margin-bottom:8px }
.select { padding:6px 10px; border:1px solid var(--border); border-radius:6px; background:#fff }

.file-list { display:flex; flex-direction:column; gap:6px; max-height:40vh; overflow:auto; overflow-x:hidden }
.file-item { padding:8px; border:1px dashed var(--border); border-radius:8px; display:flex; align-items:center; gap:8px }
.file-actions { display:flex; gap:6px; flex-shrink:0 }
.file-name { flex:1; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.file-meta { flex-shrink:0 }
.hint { margin-top:10px; color:var(--muted); font-size:12px }

.preview { height:60vh; border:1px dashed var(--border); border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fafafa }
.preview.small { height:180px }
.preview.small { background: linear-gradient(180deg, #fafafa 0%, #f6f8fb 100%) }
.preview-actions { display:flex; justify-content:flex-end; margin-top:6px }
.file-list { background:#fafafa; padding:6px; border-radius:8px }
.file-item { background:#fff }
.hint { margin-top:8px }
.preview img { max-width:100%; max-height:100%; display:block }
.preview embed, .preview iframe, .preview object { width:100%; height:100%; border:0 }

.tabs { display:flex; gap:8px; margin-bottom:12px }
.tab { padding:6px 10px; border:1px solid var(--border); background:#fff; border-radius:6px; cursor:pointer; font-size:12px }
.tab.active { background:var(--primary); border-color:var(--primary); color:#fff }
.result-section.hidden { display:none }
.markdown, .json { background:#f8f9fb; border:1px solid var(--border); border-radius:8px; padding:10px; max-height:25vh; overflow:auto; white-space:pre-wrap }

.image-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px }
.image-grid img { width:100%; height:auto; border:1px solid var(--border); border-radius:8px }

.tables { display:flex; flex-direction:column; gap:12px }
.tables table { width:100%; border-collapse:collapse; font-size:13px }
.tables th, .tables td { border:1px solid var(--border); padding:6px 8px; text-align:left }
.tables thead { background:#f3f4f6 }
.controls { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px }
.status { color:var(--muted); font-size:12px; margin-top:6px }
.btn.danger { background:#ef4444; border-color:#ef4444; color:#fff }
.btn.success { background:#10b981; border-color:#10b981; color:#fff }
.btn.secondary { background:linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%); border-color:#d8dee9; color:#374151 }
.btn.ghost { background:#f2f3f5; border-color:#e5e7eb; color:#4b5563 }

#dropZone { position:relative }
#dropZone.dragover .preview { border-color:var(--primary); background:#eef5ff }

.toast { position:fixed; right:16px; bottom:16px; color:#fff; padding:12px 16px; border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.15); z-index:1300; max-width:60vw; font-size:14px; line-height:1.4 }
.toast.info { background:#111827 }
.toast.error { background:#ef4444 }
.toast.hidden { display:none }
.modal.hidden { display:none }
.modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:1000 }
.modal-mask { position:absolute; inset:0; background:rgba(0,0,0,.2) }
.modal-content { position:relative; z-index:2; background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px; width:320px; box-shadow:0 16px 40px rgba(0,0,0,.12) }
.modal-content.wide { width:80vw; max-width:1200px }
.modal-content.viewer { width:70vw; max-width:1000px }
.modal-title { font-weight:600; margin-bottom:8px }
.sheet-select { width:100%; padding:8px; border:1px solid var(--border); border-radius:8px; margin-bottom:12px }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap }
.modal-mask { position:absolute; inset:0; background:rgba(0,0,0,.25); z-index:1 }
.viewer-canvas { position:relative; height:70vh; border:1px dashed var(--border); border-radius:8px; overflow:hidden; background:#000000 }
.viewer-canvas img { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) scale(1); cursor:grab; max-width:none }

.history-panel { grid-column: 1 / -1; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px }
.history-list { display:flex; flex-direction:column; gap:8px }
.history-item { border:1px solid var(--border); border-radius:8px; padding:10px 12px; background:#fff; cursor:pointer; font-size:13px; width:100%; display:flex; justify-content:space-between; align-items:center }
.btn { white-space: nowrap; font-size:13px }
.modal-actions .btn { box-shadow: 0 2px 6px rgba(0,0,0,.06) }
.modal-content.wide .tables table { background:#fbfcff; border:1px solid var(--border); border-radius:10px; overflow:hidden }
.modal-content.wide .tables thead { background:#eef2ff }
.modal-content.wide .tables tbody tr:nth-child(odd) { background:#f9fafb }
.modal-content.wide .tables tbody tr:hover { background:#eef7ff }

.drop-hint { display:flex; align-items:center; justify-content:center; gap:10px; height:140px; border:2px dashed var(--border); border-radius:12px; background:linear-gradient(180deg, #f9fafb 0%, #f3f6fb 100%); color:#8690a0; margin-bottom:10px }
.drop-icon { font-size:22px }
.drop-text { font-size:13px }
#dropZone.dragover .drop-hint { border-color: var(--primary); background:#eef5ff }
.panel-title { display:flex; align-items:center; gap:8px; background:#f7f9fc; border:1px solid var(--border); border-radius:8px; padding:6px 10px }
.btn { border-radius:8px; transition: all .2s }
.btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.08) }
.btn.primary { background:linear-gradient(180deg, #3b82f6 0%, #2563eb 100%); border-color:#2563eb }
.btn.success { background:linear-gradient(180deg, #34d399 0%, #10b981 100%); border-color:#10b981 }
.btn.danger { background:linear-gradient(180deg, #f87171 0%, #ef4444 100%); border-color:#ef4444 }
.hidden { display:none !important }
.result-panel.fixed { position:fixed; right:12px; top:64px; width:460px; max-height:calc(100vh - 86px); overflow:auto; z-index:900; box-shadow:0 12px 28px rgba(0,0,0,.14) }
.btn.block { width:100%; text-align:center }
.btn.lg { padding:14px 20px; font-size:17px }
.btn.secondary.block { border-width:2px; font-weight:600 }
.btn.success { transition: transform .12s ease, box-shadow .2s ease }
.btn.success:active { transform: scale(.98) }
.btn.success:hover { box-shadow: 0 8px 20px rgba(0,0,0,.12) }
.btn.success.pulse { animation: btnPulse .28s ease-out }
@keyframes btnPulse { 0% { transform: scale(1) } 50% { transform: scale(1.02) } 100% { transform: scale(1) } }
.history-actions { display:flex; gap:8px; margin-bottom:8px }
.history-item { display:flex; align-items:center; justify-content:space-between; padding:8px; border:1px solid var(--border); border-radius:8px; background:#fff; margin-bottom:6px }
.history-item:hover { background:#f8fbff; border-color:#cfe1ff }
.upload-panel, .result-panel { background:rgba(255,255,255,.82); border-radius:12px; padding:14px; backdrop-filter: blur(6px) saturate(1.05) }
.upload-panel { box-shadow: 0 10px 28px rgba(0,0,0,.08) }
.panel-title { background:rgba(247,249,252,.85); padding:8px 12px }
.file-list { background:rgba(250,250,250,.7) }
.preview { background:rgba(250,250,250,.7); border-radius:10px }
.preview.small { background: linear-gradient(180deg, rgba(250,250,250,.7) 0%, rgba(246,248,251,.7) 100%) }
.result-panel.fixed { background:rgba(255,255,255,.9) }
.history-panel { background:rgba(255,255,255,.82); border-radius:12px; backdrop-filter: blur(6px) saturate(1.05) }
.brand-title { font-size:36px; font-weight:700; line-height:1 }

.progress { width:100%; height:10px; background:#eef2ff; border-radius:8px; overflow:hidden; margin-top:8px }
.progress-bar { height:100%; width:0%; background:var(--primary); transition: width .2s ease }
.progress-text { display:block; margin-top:6px; font-size:12px; color:var(--muted); text-align:right }

@media (max-width: 480px) {
  .brand-logo { height:28px }
  .brand-title { font-size:20px; font-weight:600 }
  .app-header { padding:10px 12px }
  .header-actions .btn { padding:6px 10px; font-size:12px }
}