:root { --primary: #4F46E5; --bg: #F9FAFB; --text: #1F2937; }
body { margin: 0; display: flex; height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }
.main-area { flex: 1; display: flex; flex-direction: column; border-right: 1px solid #E5E7EB; }
.navbar { height: 60px; background: white; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.brand { font-size: 18px; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 8px; }
#sheet-container { flex: 1; margin: 0; }
.sidebar { width: 380px; background: white; display: flex; flex-direction: column; }
.chat-header { padding: 16px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.chat-messages { flex: 1; overflow-y: auto; padding: 20px; background: #F3F4F6; display: flex; flex-direction: column; gap: 12px; }
.msg { padding: 10px 14px; border-radius: 10px; max-width: 85%; font-size: 14px; line-height: 1.5; word-wrap: break-word; }
.msg.ai { background: white; align-self: flex-start; border: 1px solid #E5E7EB; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.msg.user { background: var(--primary); color: white; align-self: flex-end; }
.msg.system { align-self: center; font-size: 12px; color: #6B7280; background: rgba(0,0,0,0.05); padding: 4px 10px; border-radius: 20px; }
.input-area { padding: 16px; border-top: 1px solid #E5E7EB; background: white; }
textarea { width: 100%; height: 80px; padding: 10px; border: 1px solid #D1D5DB; border-radius: 6px; resize: none; font-family: inherit; margin-bottom: 10px; box-sizing: border-box; }
textarea:focus { outline: none; border-color: var(--primary); ring: 2px solid var(--primary); }
.btn { background: var(--primary); color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 500; transition: opacity 0.2s; }
.btn:hover { opacity: 0.9; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-outline { background: transparent; border: 1px solid #D1D5DB; color: #374151; }
.btn-outline:hover { background: #F3F4F6; }
/* 模式切换 */
.mode-switch { display: flex; background: #F3F4F6; padding: 4px; border-radius: 8px; margin-bottom: 10px; }
.mode-opt { flex: 1; text-align: center; padding: 8px; font-size: 13px; cursor: pointer; border-radius: 6px; color: #6B7280; }
.mode-opt.active { background: white; color: var(--primary); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
/* 弹窗 */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }
.modal-box { background: white; width: 320px; padding: 24px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: #374151; }
.form-group input, .form-group select { width: 100%; padding: 8px; border: 1px solid #D1D5DB; border-radius: 6px; box-sizing: border-box; }

/* 进度条样式 */
.progress-bar-bg {
    width: 100%;
    height: 6px;
    background: #E5E7EB;
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}
.progress-bar-fill {
    width: 0%;
    height: 100%;
    background: var(--primary);
    transition: width 0.3s ease;
}