/* ===== Reset & Base ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background:#f5f6fa; color:#2c3e50; font-size:14px; line-height:1.6; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; font-family:inherit; }
input,select,textarea { font-family:inherit; font-size:13px; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-thumb { background:#d0d5dd; border-radius:3px; }

/* ===== Layout ===== */
#app { display:flex; height:100vh; overflow:hidden; }
#sidebar { width:220px; background:#1e2a3a; color:#fff; display:flex; flex-direction:column; flex-shrink:0; }
#main-content { flex:1; display:flex; flex-direction:column; overflow:hidden; }

/* ===== Sidebar ===== */
.sidebar-header { padding:20px 16px; display:flex; align-items:center; gap:12px; border-bottom:1px solid rgba(255,255,255,.1); }
.logo-icon { width:36px; height:36px; background:#378ADD; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; color:#fff; }
.logo-text { font-size:13px; font-weight:500; line-height:1.4; }
.nav-group-label { padding:12px 16px 4px; font-size:11px; color:rgba(255,255,255,.4); letter-spacing:1px; font-weight:500; }
.nav-item { display:flex; align-items:center; gap:8px; padding:8px 16px; font-size:13px; color:rgba(255,255,255,.7); border-radius:6px; margin:2px 8px; transition:all .2s; }
.nav-item:hover { background:rgba(255,255,255,.1); color:#fff; }
.nav-item.active { background:#378ADD; color:#fff; font-weight:500; }
.nav-icon { font-size:12px; }
.sidebar-footer { padding:16px; border-top:1px solid rgba(255,255,255,.1); margin-top:auto; }
.user-badge { display:flex; align-items:center; gap:8px; }
.user-avatar { width:32px; height:32px; background:#5DCAA5; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:11px; color:#fff; }
.user-info { font-size:12px; color:rgba(255,255,255,.8); }
.user-info small { color:rgba(255,255,255,.5); }

/* ===== Top Bar ===== */
#top-bar { padding:16px 24px; background:#fff; border-bottom:1px solid #e8ecf0; display:flex; align-items:center; justify-content:space-between; }
#page-title { font-size:16px; font-weight:600; }

/* ===== Buttons ===== */
.btn { padding:8px 16px; border-radius:6px; font-size:13px; border:1px solid transparent; transition:all .2s; }
.btn-primary { background:#378ADD; color:#fff; }
.btn-primary:hover { background:#2a6fc0; }
.btn-secondary { background:#fff; color:#378ADD; border:1px solid #378ADD; }
.btn-secondary:hover { background:#E6F1FB; }
.btn-success { background:#1D9E75; color:#fff; }
.btn-success:hover { background:#158c64; }
.btn-danger { background:#E24B4A; color:#fff; }
.btn-danger:hover { background:#c93a39; }
.btn-warning { background:#EF9F27; color:#fff; }
.btn-sm { padding:4px 10px; font-size:12px; }
.btn-ghost { background:transparent; color:#378ADD; border:1px solid #d0d5dd; }
.btn-ghost:hover { background:#E6F1FB; }

/* ===== Page Content ===== */
#page-content { padding:24px; overflow-y:auto; flex:1; }

/* ===== Cards ===== */
.card { background:#fff; border-radius:12px; border:1px solid #e8ecf0; padding:20px; margin-bottom:16px; }
.card-title { font-size:15px; font-weight:600; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; }
.card-subtitle { font-size:12px; color:#8b95a5; margin-bottom:8px; }

/* ===== Dashboard Stats ===== */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.stat-card { background:#fff; border-radius:8px; padding:16px; border:1px solid #e8ecf0; }
.stat-value { font-size:24px; font-weight:600; margin-bottom:4px; }
.stat-label { font-size:12px; color:#8b95a5; }
.stat-card.blue .stat-value { color:#378ADD; }
.stat-card.teal .stat-value { color:#1D9E75; }
.stat-card.coral .stat-value { color:#D85A30; }
.stat-card.amber .stat-value { color:#BA7517; }

/* ===== Table ===== */
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th { background:#f8f9fb; padding:10px 12px; text-align:left; font-weight:500; color:#5f6b7a; border-bottom:2px solid #e8ecf0; }
.data-table td { padding:10px 12px; border-bottom:1px solid #e8ecf0; }
.data-table tr:hover td { background:#f8f9fb; }

/* ===== Status Tags ===== */
.tag { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:500; }
.tag-draft { background:#FAEEDA; color:#854F0B; }
.tag-pending { background:#E6F1FB; color:#185FA5; }
.tag-approved { background:#EAF3DE; color:#3B6D11; }
.tag-rejected { background:#FCEBEB; color:#A32D2D; }
.tag-archived { background:#F1EFE8; color:#888780; }

/* ===== Form ===== */
.form-group { margin-bottom:16px; }
.form-label { font-size:13px; font-weight:500; margin-bottom:6px; display:block; }
.form-label .required { color:#E24B4A; margin-left:2px; }
.form-input { width:100%; padding:8px 12px; border:1px solid #d0d5dd; border-radius:6px; font-size:13px; transition:border .2s; }
.form-input:focus { border-color:#378ADD; outline:none; box-shadow:0 0 0 3px rgba(55,138,221,.1); }
.form-input.error { border-color:#E24B4A; }
.form-select { width:100%; padding:8px 12px; border:1px solid #d0d5dd; border-radius:6px; font-size:13px; background:#fff; }
.form-textarea { width:100%; padding:8px 12px; border:1px solid #d0d5dd; border-radius:6px; font-size:13px; min-height:80px; resize:vertical; }
.form-hint { font-size:11px; color:#8b95a5; margin-top:4px; }
.form-error { font-size:11px; color:#E24B4A; margin-top:4px; display:none; }
.form-error.show { display:block; }
.form-row { display:flex; gap:12px; }
.form-row .form-group { flex:1; }

/* ===== Section Tabs (8板块) ===== */
.section-tabs { display:flex; gap:4px; margin-bottom:20px; flex-wrap:wrap; }
.section-tab { padding:6px 14px; border-radius:6px; font-size:12px; cursor:pointer; background:#f8f9fb; color:#5f6b7a; border:1px solid #e8ecf0; transition:all .2s; }
.section-tab:hover { background:#E6F1FB; color:#185FA5; }
.section-tab.active { background:#378ADD; color:#fff; border-color:#378ADD; }
.section-content { display:none; }
.section-content.active { display:block; }

/* ===== RACI ===== */
.raci-grid { display:flex; gap:8px; margin-top:8px; }
.raci-cell { display:flex; align-items:center; gap:4px; }
.raci-badge { padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; }
.raci-R { background:#E6F1FB; color:#185FA5; }
.raci-A { background:#EAF3DE; color:#3B6D11; }
.raci-C { background:#FAEEDA; color:#854F0B; }
.raci-I { background:#F1EFE8; color:#888780; }

/* ===== AI Suggestion ===== */
.ai-suggest { position:relative; }
.ai-btn { position:absolute; right:8px; top:8px; padding:4px 10px; border-radius:4px; font-size:11px; background:#EEEDFE; color:#534AB7; border:1px solid #AFA9EC; cursor:pointer; }
.ai-btn:hover { background:#CECBF6; }
.ai-popup { display:none; position:absolute; right:0; top:32px; width:320px; background:#fff; border:1px solid #AFA9EC; border-radius:8px; padding:12px; z-index:100; box-shadow:0 4px 12px rgba(0,0,0,.1); }
.ai-popup.show { display:block; }
.ai-popup-title { font-size:12px; font-weight:500; color:#534AB7; margin-bottom:8px; }
.ai-popup-content { font-size:13px; line-height:1.6; margin-bottom:10px; }
.ai-popup-actions { display:flex; gap:8px; }
.ai-tag { display:inline-block; padding:1px 4px; border-radius:2px; font-size:10px; background:#EEEDFE; color:#534AB7; }

/* ===== Validation Warning ===== */
.validation-warning { background:#FCEBEB; border:1px solid #F7C1C1; border-radius:6px; padding:10px 14px; margin-bottom:12px; display:flex; align-items:flex-start; gap:8px; }
.validation-warning .icon { color:#E24B4A; font-weight:600; }
.validation-warning .msg { font-size:12px; color:#A32D2D; }
.validation-ok { background:#EAF3DE; border:1px solid #C0DD97; border-radius:6px; padding:8px 14px; margin-bottom:12px; font-size:12px; color:#3B6D11; display:flex; align-items:center; gap:6px; }

/* ===== Competency Levels ===== */
.level-cards { display:flex; gap:12px; margin-bottom:20px; }
.level-card { flex:1; border-radius:8px; padding:16px; border:1px solid; }
.level-card.l1 { background:#E1F5EE; border-color:#1D9E75; }
.level-card.l2 { background:#9FE1CB; border-color:#1D9E75; }
.level-card.l3 { background:#5DCAA5; border-color:#1D9E75; }
.level-card .level-title { font-weight:600; font-size:14px; margin-bottom:4px; }
.level-card.l1 .level-title { color:#085041; }
.level-card.l2 .level-title { color:#04342C; }
.level-card.l3 .level-title { color:#04342C; }
.level-card .level-desc { font-size:12px; }
.level-card.l1 .level-desc { color:#0F6E56; }
.level-card.l2 .level-desc { color:#085041; }
.level-card.l3 .level-desc { color:#04342C; }

/* ===== Dimension Row ===== */
.dim-row { display:flex; align-items:center; gap:12px; padding:12px; background:#f8f9fb; border-radius:8px; margin-bottom:8px; }
.dim-name { font-weight:500; width:100px; font-size:13px; }
.dim-levels { display:flex; gap:8px; flex:1; }
.dim-level { padding:6px 12px; border-radius:4px; font-size:12px; cursor:pointer; border:1px solid #d0d5dd; background:#fff; }
.dim-level.selected { border-color:#378ADD; background:#E6F1FB; color:#185FA5; font-weight:500; }
.dim-behavior { font-size:12px; color:#5f6b7a; width:200px; }

/* ===== Interview Question ===== */
.question-card { background:#fff; border-radius:8px; padding:14px; border:1px solid #e8ecf0; margin-bottom:10px; }
.question-card .q-source { font-size:11px; margin-bottom:4px; }
.question-card .q-source.hr { color:#D85A30; }
.question-card .q-source.dept { color:#378ADD; }
.question-card .q-source.gm { color:#534AB7; }
.question-card .q-text { font-size:13px; margin-bottom:6px; }
.question-card .q-dim { font-size:11px; color:#8b95a5; }

/* ===== Scoring ===== */
.score-row { display:flex; align-items:center; gap:12px; padding:10px; background:#f8f9fb; border-radius:6px; margin-bottom:6px; }
.score-dim { font-size:13px; font-weight:500; width:120px; }
.score-input { width:40px; text-align:center; padding:4px; border:1px solid #d0d5dd; border-radius:4px; }
.score-bar { flex:1; height:8px; background:#e8ecf0; border-radius:4px; overflow:hidden; }
.score-bar-fill { height:100%; border-radius:4px; transition:width .3s; }
.score-bar-fill.low { background:#E24B4A; }
.score-bar-fill.mid { background:#EF9F27; }
.score-bar-fill.high { background:#1D9E75; }

/* ===== Report ===== */
.report-section { background:#fff; border-radius:8px; padding:16px; border:1px solid #e8ecf0; margin-bottom:12px; }
.report-section h3 { font-size:14px; font-weight:600; margin-bottom:12px; }
.report-match-score { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.match-circle { width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:600; }
.match-circle.high { background:#EAF3DE; color:#3B6D11; border:2px solid #639922; }
.match-circle.mid { background:#FAEEDA; color:#854F0B; border:2px solid #BA7517; }
.match-circle.low { background:#FCEBEB; color:#A32D2D; border:2px solid #E24B4A; }
.risk-list { list-style:none; }
.risk-list li { padding:6px 0; font-size:13px; display:flex; align-items:center; gap:6px; }
.risk-list li .risk-dot { width:8px; height:8px; border-radius:50%; }
.risk-dot.high { background:#E24B4A; }
.risk-dot.mid { background:#EF9F27; }
.risk-dot.low { background:#C0DD97; }

/* ===== Review Flow ===== */
.review-step { display:flex; align-items:center; gap:12px; padding:12px; border-radius:8px; margin-bottom:8px; }
.review-step .step-num { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; }
.review-step.done .step-num { background:#1D9E75; color:#fff; }
.review-step.current .step-num { background:#378ADD; color:#fff; }
.review-step.pending .step-num { background:#e8ecf0; color:#5f6b7a; }
.review-step .step-info { flex:1; }
.review-step .step-title { font-size:13px; font-weight:500; }
.review-step .step-time { font-size:11px; color:#8b95a5; }

/* ===== Chart Container ===== */
.chart-container { position:relative; width:100%; max-width:500px; margin:0 auto; }

/* ===== Modal ===== */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1000; }
.modal-overlay.hidden { display:none; }
.modal-container { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; border-radius:12px; padding:24px; z-index:1001; max-width:600px; width:90%; max-height:80vh; overflow-y:auto; }
.modal-container.hidden { display:none; }
.modal-title { font-size:16px; font-weight:600; margin-bottom:16px; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }

/* ===== Empty State ===== */
.empty-state { text-align:center; padding:40px; }
.empty-icon { font-size:40px; color:#d0d5dd; margin-bottom:12px; }
.empty-text { font-size:14px; color:#8b95a5; }

/* ===== Section Title ===== */
.section-title { font-size:14px; font-weight:600; color:#5f6b7a; margin:24px 0 12px; padding-left:8px; border-left:3px solid #378ADD; }

/* ===== Interview Question Bank ===== */
.question-bank { display:flex; flex-direction:column; gap:16px; }
.question-dim-group { background:#f8f9fb; border-radius:8px; padding:12px; }
.question-dim-title { font-size:13px; font-weight:600; color:#185FA5; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.question-card .q-meta { font-size:11px; color:#8b95a5; margin-top:4px; }

/* ===== Scoring Reference ===== */
.q-reference { font-size:11px; color:#5f6b7a; margin-top:4px; padding-left:8px; border-left:2px solid #378ADD; }

/* ===== Match Summary ===== */
.match-summary { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.match-block { background:#f8f9fb; border-radius:8px; padding:16px; }
.match-label { font-size:13px; font-weight:600; color:#185FA5; margin-bottom:12px; }
.match-value { font-size:28px; font-weight:600; margin-bottom:4px; }
.match-desc { font-size:12px; color:#5f6b7a; }
.gap-row { display:flex; align-items:center; gap:12px; padding:10px; background:#fff; border-radius:6px; margin-bottom:6px; border:1px solid #e8ecf0; }

/* ===== Department Tree ===== */
.dept-tree { display:flex; flex-direction:column; gap:8px; }
.dept-folder { background:#fff; border:1px solid #e8ecf0; border-radius:8px; }
.dept-folder.orphan-section { border-color:#EF9F27; }
.dept-header { display:flex; align-items:center; gap:8px; padding:12px 16px; cursor:pointer; border-bottom:1px solid #e8ecf0; transition:background .2s; }
.dept-header:hover { background:#f8f9fb; }
.dept-toggle { font-size:12px; color:#5f6b7a; transition:transform .2s; width:16px; }
.dept-folder-icon { font-size:18px; }
.dept-name { font-size:14px; font-weight:600; flex:1; }
.dept-count { font-size:12px; color:#8b95a5; }
.dept-header-actions { display:flex; gap:6px; }
.dept-body { padding:8px 12px; display:none; }
.dept-body.expanded { display:block; }
.dept-item { display:flex; align-items:center; gap:8px; padding:10px 16px 10px 32px; border-radius:6px; margin:4px 0; cursor:pointer; transition:background .2s; }
.dept-item:hover { background:#f8f9fb; }
.dept-item-icon { font-size:14px; }
.job-icon { color:#378ADD; }
.dept-item-name { font-size:13px; font-weight:500; flex:1; }
.dept-item-meta { font-size:12px; color:#8b95a5; }
.dept-item-actions { display:flex; gap:4px; opacity:0; transition:opacity .2s; }
.dept-item:hover .dept-item-actions { opacity:1; }
.dept-empty { font-size:13px; color:#8b95a5; padding:12px 32px; text-align:center; }
.dept-move-option { padding:10px 16px; border-radius:6px; cursor:pointer; margin:4px 0; transition:background .2s; display:flex; align-items:center; gap:8px; }
.dept-move-option:hover { background:#E6F1FB; }

/* ===== Nine-box talent review ===== */
.ninebox-axis-hint { font-size:12px; color:#8b95a5; margin-bottom:10px; }
.ninebox-header { display:grid; grid-template-columns:72px 1fr 1fr 1fr; gap:8px; text-align:center; font-size:12px; color:#5f6b7a; margin-bottom:6px; }
.ninebox-grid { display:flex; flex-direction:column; gap:8px; }
.ninebox-row { display:grid; grid-template-columns:72px 1fr 1fr 1fr; gap:8px; min-height:110px; }
.ninebox-ylab { font-size:12px; color:#8b95a5; display:flex; align-items:center; justify-content:center; writing-mode:horizontal-tb; }
.ninebox-cell { background:#f8f9fb; border:1px dashed #d0d5dd; border-radius:8px; padding:8px; min-height:100px; }
.ninebox-cell-title { font-size:11px; font-weight:600; color:#185FA5; margin-bottom:6px; display:flex; justify-content:space-between; gap:4px; flex-wrap:wrap; }
.ninebox-cell-title span { font-weight:400; color:#8b95a5; }
.ninebox-cell-body { display:flex; flex-wrap:wrap; gap:6px; min-height:40px; }
.ninebox-card { background:#378ADD; color:#fff; font-size:12px; padding:4px 8px; border-radius:4px; cursor:grab; user-select:none; }
.ninebox-card:active { cursor:grabbing; }
.ninebox-empty { color:#c0c5cc; font-size:12px; }

/* ===== Responsive ===== */
@media (max-width:768px) {
  #sidebar { width:60px; }
  .logo-text, .nav-group-label, .nav-item span:last-child, .sidebar-footer .user-info { display:none; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
}

/* ===== Import Modal ===== */
.import-modal-content { max-width:560px; }
.import-modal-content textarea { font-family: monospace; font-size: 12px; }

/* ===== Inline Scoring (题库内联打分) ===== */
.inline-dim-group { background:#f8f9fb; border-radius:8px; padding:12px; margin-bottom:12px; }
.inline-dim-title { font-size:13px; font-weight:600; color:#185FA5; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.inline-score-row { background:#fff; border:1px solid #e8ecf0; border-radius:8px; padding:12px; margin-bottom:8px; display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; }
.inline-q-text { flex:1; min-width:200px; font-size:13px; line-height:1.5; }
.inline-q-meta { width:70px; }
.inline-score-input { width:80px; }
.inline-score-field { text-align:center; }
.inline-evidence { flex:1; min-width:200px; }

/* ===== Voice Input ===== */
.voice-btn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; border:1px solid #d0d5dd; background:#fff; font-size:14px; cursor:pointer; transition:all .2s; flex-shrink:0; }
.voice-btn:hover { background:#E6F1FB; border-color:#378ADD; }
.voice-btn.listening { background:#FCEBEB; border-color:#E24B4A; animation:voice-pulse 1.2s infinite; }
@keyframes voice-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(226,75,74,.3); } 50% { box-shadow:0 0 0 6px rgba(226,75,74,0); } }
.voice-input-wrap { position:relative; }
.voice-preview { font-size:12px; color:#8b95a5; background:#FAEEDA; padding:4px 8px; border-radius:4px; margin-top:4px; font-style:italic; }

/* ===== Live Score Bar ===== */
.live-score-bar { display:flex; align-items:center; gap:8px; background:#f8f9fb; border-radius:8px; padding:10px 16px; flex-wrap:wrap; }
.live-score-value { font-size:24px; font-weight:700; }
.live-score-value.high { color:#1D9E75; }
.live-score-value.mid { color:#EF9F27; }
.live-score-value.low { color:#E24B4A; }

/* ===== Job-Specific Question Generator ===== */
.job-specific-banner { font-size:12px; color:#5f6b7a; background:#E8F5E9; border:1px solid #C8E6C9; border-radius:6px; padding:8px 12px; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.gen-preview-box { background:#f8f9fb; border:1px solid #e8ecf0; border-radius:8px; padding:14px; max-height:500px; overflow-y:auto; }
.gen-q-item { display:flex; gap:8px; align-items:flex-start; padding:6px 0; border-bottom:1px solid #f0f2f5; }
.gen-q-item:last-child { border-bottom:none; }