* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif; background:#f5f5f5; color:#2d3748; line-height:1.6; }
#app { max-width:960px; margin:0 auto; padding:12px; }

header { text-align:center; padding:16px 0; border-bottom:2px solid #e2e8f0; margin-bottom:16px; }
header h1 { font-size:22px; color:#2c5282; margin-bottom:6px; }
header .subtitle { font-size:13px; color:#718096; }

/* Tabs */
.tabs { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:16px; border-bottom:2px solid #cbd5e0; padding-bottom:0; }
.tab { padding:10px 16px; background:#e2e8f0; border:none; cursor:pointer; font-size:14px; color:#4a5568; border-radius:6px 6px 0 0; font-family:inherit; }
.tab:hover { background:#cbd5e0; }
.tab.active { background:#2c5282; color:#fff; font-weight:bold; }

/* Panel */
.panel { display:none; background:#fff; padding:16px; border-radius:0 8px 8px 8px; box-shadow:0 1px 3px rgba(0,0,0,0.08); }
.panel.active { display:block; }
.panel h2 { color:#2c5282; font-size:18px; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid #e2e8f0; }
.panel h3 { color:#2d3748; font-size:15px; margin:12px 0 6px; }
.panel p { font-size:14px; margin-bottom:8px; }

/* Table */
table { width:100%; border-collapse:collapse; margin:8px 0; font-size:13px; }
th, td { border:1px solid #e2e8f0; padding:8px 10px; text-align:left; vertical-align:top; }
th { background:#edf2f7; color:#2c5282; font-weight:bold; }
tr:nth-child(even) td { background:#f7fafc; }

/* Card list */
.card-list { display:flex; flex-direction:column; gap:10px; }
.card-item { background:#f7fafc; border-left:4px solid #4299e1; padding:10px 12px; border-radius:4px; }
.card-item .card-title { font-weight:bold; color:#2c5282; font-size:15px; }
.card-item .card-meta { color:#718096; font-size:12px; margin-bottom:4px; }
.card-item .card-body { font-size:13px; line-height:1.7; margin-top:4px; }
.card-item ul { padding-left:20px; margin:4px 0; }
.card-item li { font-size:13px; margin:2px 0; }

/* Pulse categories color */
.cat-main_28 { border-left-color:#4299e1; }
.cat-extended { border-left-color:#38a169; }
.cat-guai_pulse_death_sign { border-left-color:#e53e3e; background:#fff5f5; }
.cat-badge { display:inline-block; font-size:11px; padding:2px 8px; border-radius:10px; margin-left:6px; }
.cat-badge.main_28 { background:#bee3f8; color:#2c5282; }
.cat-badge.extended { background:#c6f6d5; color:#22543d; }
.cat-badge.guai_pulse_death_sign { background:#fed7d7; color:#742a2a; }

/* Search */
.search-row { margin-bottom:12px; }
.search-row input { width:100%; padding:8px 12px; border:1px solid #cbd5e0; border-radius:6px; font-size:14px; font-family:inherit; }

/* Conflict item */
.conflict-item { background:#fffbea; border:1px solid #ecc94b; padding:10px 12px; border-radius:6px; margin-bottom:10px; }
.conflict-item .conflict-topic { font-weight:bold; color:#744210; margin-bottom:4px; }
.conflict-item .conflict-desc { font-size:13px; color:#5a3a10; margin-bottom:4px; }
.conflict-item .conflict-rec { font-size:13px; color:#22543d; background:#c6f6d5; padding:6px 8px; border-radius:4px; margin-top:4px; }

/* Qikou 4 forms */
.qikou-forms { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin:12px 0; }
.qikou-form { background:#ebf4ff; border-left:3px solid #4299e1; padding:8px 10px; border-radius:4px; }
.qikou-form b { color:#2c5282; }

.hint { font-size:12px; color:#718096; padding:8px; background:#f7fafc; border-radius:4px; margin:8px 0; }

.footer { text-align:center; padding:16px; color:#a0aec0; font-size:12px; margin-top:20px; }

/* ═══ 把脈判讀 UI（batch 64） ═══ */
.mode-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:10px; margin:12px 0 16px; }
.mode-card { display:flex; gap:10px; padding:12px; background:#f7fafc; border:2px solid #e2e8f0; border-radius:8px; cursor:pointer; transition:all 0.15s; }
.mode-card:hover { border-color:#4299e1; background:#ebf4ff; }
.mode-card.active { border-color:#2c5282; background:#bee3f8; box-shadow:0 2px 8px rgba(44,82,130,0.2); }
.mode-num { font-size:22px; font-weight:bold; color:#2c5282; min-width:28px; text-align:center; }
.mode-body { flex:1; }
.mode-name { font-weight:bold; color:#2c5282; font-size:15px; margin-bottom:2px; }
.mode-meta { font-size:12px; color:#718096; margin-bottom:4px; }
.mode-scheme { font-size:12px; color:#4a5568; line-height:1.5; }

.pos-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:10px; margin:8px 0; }
.pos-block { background:#fff; border:1px solid #cbd5e0; border-radius:6px; padding:10px; }
.pos-title { margin-bottom:8px; font-size:14px; }
.pos-title b { color:#2c5282; }
.pos-organ { color:#718096; font-size:12px; margin-left:4px; }
.pos-selected { display:block; color:#22543d; font-size:12px; background:#c6f6d5; padding:2px 6px; border-radius:3px; margin-top:4px; }
.pulse-chips { display:flex; flex-wrap:wrap; gap:4px; }
.pulse-chip { padding:4px 10px; background:#e2e8f0; border:1px solid #cbd5e0; border-radius:14px; cursor:pointer; font-size:13px; font-family:inherit; color:#2d3748; }
.pulse-chip:hover { background:#cbd5e0; }
.pulse-chip.on { background:#2c5282; color:#fff; border-color:#2c5282; font-weight:bold; }
.pulse-chip.guai { border-color:#e53e3e; color:#742a2a; }
.pulse-chip.guai.on { background:#e53e3e; color:#fff; }

.diag-actions { margin-top:12px; display:flex; gap:8px; justify-content:flex-end; }
.btn { padding:8px 18px; border:none; border-radius:6px; cursor:pointer; font-family:inherit; font-size:14px; }
.btn.primary { background:#2c5282; color:#fff; font-weight:bold; }
.btn.primary:hover:not(:disabled) { background:#2b6cb0; }
.btn.primary:disabled { background:#a0aec0; cursor:not-allowed; }
.btn.ghost { background:#edf2f7; color:#4a5568; }
.btn.ghost:hover { background:#e2e8f0; }

.warn-box { background:#fff5f5; color:#742a2a; border-left:4px solid #e53e3e; padding:10px; border-radius:4px; margin:8px 0; }
.warn-box div { margin:2px 0; }

.result-pos { background:#f7fafc; border:1px solid #e2e8f0; border-radius:6px; padding:10px 12px; margin:10px 0; }
.result-pos-head { padding-bottom:6px; border-bottom:1px solid #e2e8f0; margin-bottom:8px; }
.result-ind { background:#fff; padding:8px; border-radius:4px; margin:6px 0; border-left:3px solid #4299e1; font-size:13px; line-height:1.7; }
.ind-pulse { font-weight:bold; color:#2c5282; }
.ind-cat { font-size:11px; color:#718096; font-weight:normal; }
.result-ind details { margin-top:4px; }
.result-ind summary { cursor:pointer; color:#4299e1; font-size:12px; }

.combined-box { background:#ebf4ff; border-left:3px solid #2c5282; padding:8px 10px; border-radius:4px; margin-top:8px; }
.combined-hit { padding:6px 0; border-bottom:1px dashed #cbd5e0; }
.combined-hit:last-child { border-bottom:none; }

.formula-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:8px; }
.formula-card { background:#fff; border:1px solid #cbd5e0; border-radius:4px; padding:8px 10px; font-size:13px; }

.disclaimer { margin-top:16px; padding:10px; background:#fffbea; border:1px solid #ecc94b; border-radius:4px; font-size:12px; color:#5a3a10; }

@media (max-width:600px) {
  .tabs { flex-direction:column; }
  .tab { border-radius:4px; }
  table { font-size:12px; }
  th, td { padding:6px 8px; }
  .qikou-forms { grid-template-columns:1fr; }
  .mode-list, .pos-grid, .formula-list { grid-template-columns:1fr; }
}