* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: "Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif; background:#f5f5f5; color:#333; }
#app { max-width:480px; margin:0 auto; padding:8px; }
header { text-align:center; padding:12px 0; }
header h1 { font-size:20px; margin-bottom:8px; }
.tier-switch { display:flex; align-items:center; justify-content:center; gap:8px; }
.tier-switch select { padding:6px 12px; border-radius:6px; border:1px solid #ccc; font-size:14px; }

.card { background:#fff; border-radius:10px; padding:14px; margin-bottom:10px; box-shadow:0 1px 3px rgba(0,0,0,0.1); }
.card h2 { font-size:16px; margin-bottom:10px; color:#2c5282; border-bottom:2px solid #e2e8f0; padding-bottom:6px; }
.hint { font-size:12px; color:#718096; margin-bottom:10px; }
.disclaimer { font-size:12px; color:#718096; line-height:1.6; }

/* Tap Button */
.rate-row { display:flex; flex-direction:column; gap:10px; }
.tap-area { display:flex; gap:8px; }
#tapBtn { flex:1; padding:20px; font-size:18px; background:#2c5282; color:#fff; border:none; border-radius:10px; cursor:pointer; user-select:none; -webkit-user-select:none; display:flex; flex-direction:column; align-items:center; gap:4px; }
#tapBtn:active { background:#1a365d; transform:scale(0.97); }
#tapCount { font-size:24px; font-weight:bold; }
#tapReset { padding:10px 16px; background:#e2e8f0; border:none; border-radius:8px; font-size:14px; cursor:pointer; }
.rate-manual { display:flex; align-items:center; gap:6px; font-size:14px; }
.rate-manual input { width:60px; padding:6px; border:1px solid #ccc; border-radius:6px; text-align:center; font-size:16px; }
.rate-result { font-size:15px; font-weight:bold; padding:6px; text-align:center; border-radius:6px; }
.rate-result.normal { background:#c6f6d5; color:#22543d; }
.rate-result.fast { background:#fed7d7; color:#9b2c2c; }
.rate-result.slow { background:#bee3f8; color:#2a4365; }

/* Brush control */
.brush-control { display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:14px; }
.brush-control input[type=range] { flex:1; }
#brushSizeLabel { width:24px; text-align:right; font-weight:bold; color:#2c5282; }

/* Chart layout */
.hand-title { font-weight:bold; color:#2c5282; font-size:13px; flex-shrink:0; }

.code-row-pair { display:flex; gap:8px; margin-bottom:10px; }
.code-row { flex:1; display:flex; align-items:center; gap:3px; flex-wrap:nowrap; justify-content:center; min-width:0; }
.code-row select { flex-shrink:1; min-width:0; padding:3px; border:1px solid #ccc; border-radius:4px; font-size:11px; background:#fff; }
.code-badge {
  display:inline-block; min-width:26px; text-align:center; flex-shrink:0;
  font-size:14px; font-weight:bold; color:#1a365d;
  background:#e2e8f0; border-radius:4px; padding:2px 6px;
}

.section-spacer { height:24px; }
.section-spacer-small { height:16px; }

.chart-wrap { display:flex; align-items:stretch; justify-content:center; gap:4px; }
.canvas-stack { position:relative; width:150px; height:450px; }
.canvas-stack canvas { position:absolute; top:0; left:0; width:150px; height:450px; }
.canvas-stack-right { margin-left:20px; } /* total gap = 4px (flex gap) + 20px = ~half of one column cell (50px/2) */
#left_ink, #right_ink { cursor:crosshair; }

.row-labels { display:flex; flex-direction:column; justify-content:space-around; align-items:center; width:56px; }
.row-labels.right { align-items:center; }
.row-label-item { display:flex; flex-direction:column; align-items:center; gap:2px; height:150px; justify-content:center; }
.pos-name { font-size:13px; font-weight:bold; color:#2c5282; text-align:center; line-height:1.3; }
.pos-name small { font-weight:normal; color:#718096; font-size:10px; }

.distinct-ctl { display:none; flex-direction:column; gap:2px; margin-top:2px; }
.distinct-ctl select { font-size:10px; padding:1px; width:52px; }
.tier2-active .distinct-ctl, .tier3-active .distinct-ctl { display:flex; }

/* Reference help panel (depth A-E table + strength dual-criterion table) */
.ref-help { background:#f0f9ff; border:1px solid #bee3f8; border-radius:6px; padding:8px; margin-bottom:10px; }
.ref-help details { margin-bottom:6px; }
.ref-help details:last-child { margin-bottom:0; }
.ref-help summary { font-size:13px; color:#2c5282; cursor:pointer; font-weight:bold; padding:2px 0; }
.tier3-ref { width:100%; margin-top:6px; border-collapse:collapse; font-size:11px; }
.tier3-ref th, .tier3-ref td { border:1px solid #cbd5e0; padding:3px 6px; text-align:center; }
.tier3-ref th { background:#e2e8f0; color:#2c5282; }
.tier3-ref td.ab { background:#fef5e7; }
.tier3-ref td.de { background:#e6fffa; }

/* 獨異 mark row + slider row */
.mark-slider-row { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:6px; padding-bottom:8px; border-bottom:1px solid #e2e8f0; }
.mark-slider-row .mslabel { font-size:12px; color:#2c5282; font-weight:bold; }
.mark-slider { flex:1; max-width:75px; }

.draw-mode-row { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.draw-mode-row label { display:flex; align-items:center; gap:4px; font-size:14px; cursor:pointer; }
.draw-mode-row input[type=radio] { width:17px; height:17px; }

.vline-row { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.vline-row label { display:flex; align-items:center; gap:4px; font-size:14px; cursor:pointer; }
.vline-row input[type=radio] { width:17px; height:17px; }
.vline-slider { width:60px; }

.clear-row { display:flex; justify-content:space-between; margin-top:10px; }
.clear-btn { padding:6px 10px; background:#e2e8f0; border:none; border-radius:6px; font-size:12px; cursor:pointer; }

/* Tier 2 extra fields */
.tier2-section .extra-field { margin-bottom:10px; }
.tier2-section label { font-size:14px; display:block; margin-bottom:4px; }
.tier2-section select, .tier2-section textarea { width:100%; padding:8px; border:1px solid #ccc; border-radius:6px; font-size:14px; }
.touch-checks { display:flex; gap:12px; flex-wrap:wrap; }
.touch-checks label { display:flex; align-items:center; gap:4px; font-size:15px; }
.touch-checks input { width:18px; height:18px; }
.touch-per-hand { margin-top:6px; }
.touch-per-hand summary { font-size:12px; color:#2c5282; cursor:pointer; padding:2px 0; }
.touch-hand-row { display:flex; align-items:flex-start; gap:8px; margin-top:4px; }
.touch-hand-label { flex-shrink:0; font-weight:bold; color:#2c5282; font-size:13px; padding:2px 6px; background:#e2e8f0; border-radius:4px; margin-top:2px; }
.touch-hand-row .touch-checks label { font-size:13px; }
.touch-hand-row .touch-checks input { width:14px; height:14px; }

/* Submit */
.submit-btn { width:100%; padding:14px; font-size:18px; font-weight:bold; background:#2c5282; color:#fff; border:none; border-radius:10px; cursor:pointer; }
.submit-btn:active { background:#1a365d; }
.submit-btn:disabled { background:#a0aec0; cursor:not-allowed; }
.status-msg { text-align:center; margin-bottom:8px; font-size:14px; }
.status-msg.ready { color:#22543d; }
.status-msg.incomplete { color:#9b2c2c; }

/* Results */
#resultContent { font-size:14px; line-height:1.6; }
.result-section { margin-bottom:12px; padding:10px; background:#f7fafc; border-radius:6px; border-left:3px solid #2c5282; }
.result-section h3 { font-size:14px; color:#2c5282; margin-bottom:6px; }
.result-section p, .result-section li { font-size:13px; }
.result-section ul { padding-left:16px; }

/* Radar Chart */
.radar-container { text-align:center; margin:10px 0; }
.radar-container canvas { max-width:280px; }
.radar-note { font-size:11px; color:#a0aec0; text-align:center; margin-top:6px; line-height:1.5; }

/* Prescription Card */
.rx-card { background:#fffff0; border:1px solid #ecc94b; border-radius:8px; padding:10px; margin-top:8px; }
.rx-card.rx-card-caveat { background:#f7fafc; border:1px dashed #a0aec0; }
.rx-card.rx-card-caveat h4 { color:#4a5568; }
.rx-source { font-size:11px; color:#805050; margin-top:4px; font-style:italic; }
.rx-related { margin-top:8px; padding-top:6px; border-top:1px dashed #ecc94b; font-size:12px; color:#744210; }
.rx-related-item { margin:4px 0 4px 8px; padding:4px 6px; background:#fefcbf; border-radius:4px; line-height:1.5; }
.rx-related-src { font-size:11px; color:#805050; font-style:italic; }
.pulse-caution { font-size:12px; color:#742a2a; background:#fef5e7; border-left:3px solid #d69e2e; padding:4px 8px; margin:4px 0 4px 16px; border-radius:3px; line-height:1.5; }
.subject-row { display:flex; gap:16px; flex-wrap:wrap; }
.subject-field { display:flex; align-items:center; gap:6px; font-size:14px; }
.subject-field select, .subject-field input { padding:6px 8px; border:1px solid #ccc; border-radius:6px; font-size:14px; }
.subject-field input { width:80px; }
.tool-divider { border:none; border-top:1px dashed #a0aec0; margin:10px 0; }

/* 症狀問診 grid：group heading + 每列 [name | 有 | 無] */
.symptoms-grid { display:flex; flex-direction:column; gap:2px; margin-top:4px; }
.symptoms-group-head { font-size:12px; font-weight:bold; color:#2c5282; background:#edf2f7; padding:4px 8px; border-radius:4px; margin-top:6px; }
.symptoms-row { display:grid; grid-template-columns: 1fr 48px 48px; align-items:center; padding:2px 8px; font-size:14px; }
.symptoms-row:nth-child(even) { background:#f7fafc; }
.symptoms-row label.sym-name { color:#333; }
.symptoms-row .sym-cell { text-align:center; }
.symptoms-row .sym-cell input { width:18px; height:18px; cursor:pointer; }
.symptoms-header { display:grid; grid-template-columns: 1fr 48px 48px; padding:2px 8px; font-size:11px; color:#718096; }
.symptoms-header .sym-cell { text-align:center; }
.sym-presets { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px; padding-bottom:6px; border-bottom:1px dashed #cbd5e0; }
.sym-preset-btn { padding:3px 8px; font-size:11px; background:#ebf4ff; border:1px solid #90cdf4; border-radius:12px; cursor:pointer; color:#2c5282; }
.sym-preset-btn:hover { background:#bee3f8; }
.sym-preset-btn.sym-preset-clear { background:#fed7d7; border-color:#fc8181; color:#742a2a; margin-left:auto; }
.rx-card h4 { color:#975a16; margin-bottom:6px; }
.rx-card .rx-main { font-size:15px; font-weight:bold; color:#744210; }
.rx-card .rx-food { font-size:13px; color:#666; margin-top:4px; }
.rx-card .rx-note { font-size:13px; color:#5a3a10; margin-top:6px; background:#fefcbf; padding:6px 10px; border-radius:4px; line-height:1.5; }
.rx-formula { margin-top:4px; }
.rx-formula summary { cursor:pointer; font-size:13px; color:#744210; padding:3px 0; font-weight:bold; }
.rx-formula-body { margin-top:6px; padding:8px 10px; background:#fffdf5; border:1px dashed #ecc94b; border-radius:6px; font-size:13px; line-height:1.6; color:#5a3a10; }
.rx-formula-body p { margin:2px 0; }

/* H. Related diseases */
.disease-item { margin-bottom:10px; padding:8px 10px; background:#f7fafc; border-left:3px solid #d69e2e; border-radius:4px; }
.disease-badge { display:inline-block; font-size:11px; background:#c6f6d5; color:#22543d; padding:1px 6px; border-radius:8px; margin-left:6px; font-weight:normal; vertical-align:middle; }
.urgent-banner { background:#fff5f5; border:2px solid #c53030; color:#742a2a; padding:12px 14px; border-radius:8px; margin-bottom:12px; font-size:14px; font-weight:bold; line-height:1.6; }
.urgent-banner b { color:#c53030; }
/* history panel */
.history-card summary { cursor:pointer; font-weight:bold; color:#2c5282; padding:6px 0; }
.history-list { display:flex; flex-direction:column; gap:6px; margin-top:8px; max-height:280px; overflow-y:auto; }
.history-item { display:grid; grid-template-columns: auto 1fr auto; gap:8px; padding:6px 8px; font-size:12px; background:#f7fafc; border-radius:4px; align-items:center; cursor:pointer; }
.history-item:hover { background:#e6fffa; }
.history-item.same-chart { border-left:3px solid #2c5282; background:#ebf4ff; }
.history-item .ts { color:#718096; font-family:monospace; }
.history-item .top { color:#2c5282; font-weight:bold; }
.history-item .meta { color:#4a5568; text-align:right; }
.history-empty { color:#a0aec0; font-size:12px; padding:8px; text-align:center; }
.history-clear { background:none; border:1px solid #ccc; color:#666; font-size:11px; padding:3px 8px; border-radius:4px; cursor:pointer; float:right; }
.demo-card summary { cursor:pointer; font-weight:bold; color:#744210; padding:6px 0; }
.demo-list { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.demo-item { padding:8px 10px; background:#fffbea; border:1px solid #ecc94b; border-radius:6px; cursor:pointer; }
.demo-item:hover { background:#fef5e7; }
.demo-label { font-weight:bold; color:#744210; font-size:13px; }
.demo-note { font-size:11px; color:#805050; margin-top:2px; line-height:1.4; }
/* Tier 3 layer force grid */
.tier3-section { border:1px dashed #90cdf4; background:#f0f9ff; }
.layer-force-grid { display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.lf-header { display:grid; grid-template-columns: 60px 1fr 1fr; gap:8px; font-size:12px; color:#2c5282; font-weight:bold; padding:2px 4px; }
.lf-row { display:grid; grid-template-columns: 60px 1fr 1fr; gap:8px; align-items:center; padding:2px 4px; }
.lf-row:nth-child(even) { background:#e6fffa; }
.lf-label { font-weight:bold; color:#2c5282; font-size:13px; }
.lf-sel { padding:4px; border:1px solid #90cdf4; border-radius:4px; font-size:14px; text-align:center; }
.lf-header.lf-5, .lf-row.lf-5 { grid-template-columns: 48px 1fr 1fr 1fr 1fr 1fr; gap:3px; }
.lf-row.lf-5 .lf-sel { padding:3px 2px; font-size:12px; min-width:0; }
.layer-mode-switch { display:flex; gap:14px; margin-bottom:6px; font-size:13px; padding:6px; background:#ebf4ff; border-radius:4px; }
.layer-mode-switch label { display:flex; align-items:center; gap:4px; cursor:pointer; }
.pos-touch-details { margin-top:10px; border-top:1px dashed #cbd5e0; padding-top:6px; }
.pos-touch-details summary { font-size:13px; color:#2c5282; cursor:pointer; font-weight:bold; }
.pos-touch-grid { display:flex; flex-direction:column; gap:2px; margin-top:4px; }
.pt-header, .pt-row { display:grid; grid-template-columns: 48px repeat(7, 24px) 1fr; gap:2px; align-items:center; font-size:11px; }
.pt-header { color:#718096; }
.pt-header span, .pt-cell { text-align:center; }
.pt-label { font-weight:bold; color:#2c5282; font-size:12px; }
.pt-cell input { width:14px; height:14px; cursor:pointer; }
.pt-row select { padding:2px; font-size:11px; border:1px solid #ccc; border-radius:3px; min-width:0; }
.consistency-warn { margin-top:8px; padding:8px 10px; background:#fef5e7; border:1px solid #ecc94b; border-radius:6px; font-size:12px; color:#744210; line-height:1.6; }
.consistency-warn b { color:#c05621; }
.conf-high { display:inline-block; font-size:11px; background:#c6f6d5; color:#22543d; padding:1px 6px; border-radius:8px; margin-left:6px; }
.conf-med { display:inline-block; font-size:11px; background:#fefcbf; color:#744210; padding:1px 6px; border-radius:8px; margin-left:6px; }
.conf-low { display:inline-block; font-size:11px; background:#e2e8f0; color:#4a5568; padding:1px 6px; border-radius:8px; margin-left:6px; }
.meta-footer { font-size:10px; color:#a0aec0; text-align:center; margin-top:14px; padding:8px; border-top:1px dashed #e2e8f0; line-height:1.7; }
.global-disclaimer { background:#fffbea; border:1px solid #ecc94b; color:#744210; padding:8px 10px; border-radius:6px; margin-bottom:10px; font-size:12px; line-height:1.6; }
.global-disclaimer .gd-src { color:#a0aec0; font-size:10px; }
.sym-by-pos { margin:4px 0 4px 16px; padding:4px 8px; background:#f0f9ff; border-left:2px solid #90cdf4; border-radius:3px; font-size:11px; color:#2c5282; }
.sym-by-pos b { color:#1a365d; }
.sbp-row { padding:1px 0; line-height:1.5; }
.global-ref { background:#f0f9ff; border:1px solid #90cdf4; border-radius:6px; padding:8px 10px; margin-bottom:10px; font-size:12px; }
.global-ref summary { cursor:pointer; color:#2c5282; font-weight:bold; }
.global-ref ul { margin:6px 0 0 18px; padding:0; }
.global-ref li { margin:6px 0; line-height:1.6; color:#2d3748; }
.global-ref .gr-src { font-size:10px; color:#a0aec0; font-style:italic; }
.rx-warn-formulaic { background:#fff5f5; border-left:3px solid #fc8181; padding:6px 10px; margin-bottom:8px; font-size:11px; color:#742a2a; line-height:1.5; border-radius:3px; }
.formula-hazard { display:inline-block; font-size:10px; background:#fed7d7; color:#742a2a; padding:1px 5px; border-radius:8px; margin-left:6px; font-weight:normal; }
.formula-warning { background:#fff5f5; border:1px solid #fc8181; color:#742a2a; padding:4px 8px; border-radius:4px; margin-bottom:4px; font-size:11px; line-height:1.5; }
.mark-add-btn { margin-left:auto; font-size:11px; padding:4px 8px; background:#e6fffa; border:1px solid #38b2ac; color:#234e52; }

/* batch 41：列印用樣式 — 只印結果段，藏編輯 UI，字放大，白底黑字 */
@media print {
  body { background:#fff; }
  header, .card:not(#resultSection), .history-card, .demo-card, .tier2-section, .tier3-section, #downloadSection, .submit-btn, #statusMsg { display:none !important; }
  #resultContent { font-size:13px; }
  .result-section { break-inside: avoid; page-break-inside: avoid; }
  .rx-card, .disease-item, .meridian-warn { break-inside: avoid; }
  .urgent-banner { border-width:1px !important; }
  .meta-footer { border-top:1px solid #000; }
}
.disease-name { font-weight:bold; font-size:14px; color:#744210; margin-bottom:4px; }
.disease-line { font-size:12px; color:#4a5568; line-height:1.5; margin:2px 0; }
.disease-warn { color:#c53030; font-weight:bold; }

/* I. Self-care */
.care-cat { margin-bottom:10px; }
.care-cat-name { font-weight:bold; color:#2c5282; font-size:13px; padding:3px 8px; background:#e6fffa; border-radius:12px; display:inline-block; margin-bottom:4px; }
.care-item { font-size:12px; color:#333; line-height:1.5; margin:3px 0 3px 12px; }

/* Meridian warning */
.meridian-warn { background:#fff5f5; border:1px solid #fc8181; border-radius:6px; padding:8px 10px; margin-bottom:8px; }
.meridian-text { font-size:13px; color:#742a2a; margin-top:4px; line-height:1.5; }
.meridian-quote { font-size:12px; color:#805050; font-style:italic; margin-top:4px; }

@media(max-width:480px) {
  /* width unchanged from original (120) - only height grows, to leave room for tier-2's
     extra per-position selects without the browser having to squeeze anything to fit */
  .canvas-stack { width:120px; height:360px; }
  .canvas-stack canvas { width:120px; height:360px; }
  .canvas-stack-right { margin-left:8px; }
  .row-label-item { height:120px; }
  .row-labels { width:48px; }
}

/* Image preview modal */
.image-preview-modal { position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:1000; display:flex; align-items:center; justify-content:center; padding:16px; }
.image-preview-box { background:#fff; border-radius:10px; padding:14px; max-width:100%; max-height:100%; overflow:auto; display:flex; flex-direction:column; align-items:center; gap:10px; }
.image-preview-hint { font-size:14px; font-weight:bold; color:#2c5282; text-align:center; }
.image-preview-box img { max-width:100%; max-height:65vh; border:1px solid #e2e8f0; }
.image-preview-actions { display:flex; gap:10px; }
.image-preview-actions .clear-btn { text-decoration:none; color:#333; display:inline-block; }