/* ── REFERENCE TAB ── */
.ref-layout{display:grid;grid-template-columns:200px 1fr;gap:0;min-height:calc(100vh - 80px);margin:-2rem -2.5rem;border-top:1px solid var(--border)}
.ref-nav{border-right:1px solid var(--border);background:var(--surface);overflow-y:auto;padding:.5rem 0}
.ref-nav-item{padding:8px 16px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:9px;color:var(--text2);transition:all .1s;border-left:2px solid transparent}
.ref-nav-item:hover{background:var(--surface2);color:var(--text)}
.ref-nav-item.active{color:var(--accent);border-left-color:var(--accent);font-weight:700;background:var(--accent-l)}
.ref-nav-section{padding:8px 16px 3px;font-size:9px;font-family:'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-top:6px}
.ref-content{padding:2rem 2.5rem;overflow-y:auto;max-width:820px}
.ref-pane{display:none}.ref-pane.active{display:block;animation:fi .2s ease}
.ref-hero{margin-bottom:1.5rem;padding-bottom:1.25rem;border-bottom:1px solid var(--border)}
.ref-hero h2{font-family:'DM Serif Display',serif;font-size:26px;margin-bottom:5px}
.ref-hero p{font-size:13px;color:var(--text2);max-width:520px;line-height:1.6}

/* Formula cards */
.formula-search{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r);font-family:'Inter',sans-serif;font-size:14px;color:var(--text);background:var(--bg);margin-bottom:1rem}
.formula-search:focus{outline:none;border-color:var(--accent)}
.formula-cat-filters{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:1rem}
.formula-cat-filters .chip{background:var(--bg);color:var(--text2);border-color:var(--border2);font-size:11px;padding:4px 10px}
.formula-cat-filters .chip:hover{background:var(--surface2);color:var(--text);border-color:var(--accent)}
.formula-cat-filters .chip.on{background:var(--accent-l);color:var(--accent);border-color:var(--accent);font-weight:600}
.pattern-org-filters{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:1rem}
.pattern-org-filters .chip{background:var(--bg);color:var(--text2);border-color:var(--border2);font-size:11px;padding:4px 10px}
.pattern-org-filters .chip:hover{background:var(--surface2);color:var(--text);border-color:#8b4513}
.pattern-org-filters .chip.on{background:#fdf0e8;color:#8b4513;border-color:#e8a87c;font-weight:600}
.formula-grid{display:flex;flex-direction:column;gap:9px}
.formula-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;cursor:pointer;transition:all .12s}
.formula-card:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 3px 12px rgba(45,90,61,.06)}
.formula-card.open{border-color:var(--accent)}
.formula-card-hdr{padding:.9rem 1.1rem;display:flex;align-items:center;gap:10px}
.formula-name-en{font-family:'DM Serif Display',serif;font-size:16px;color:var(--text)}
.formula-name-zh{font-size:12px;color:var(--text3);font-style:italic}
.formula-cat-badge{font-size:10px;font-family:'DM Mono',monospace;padding:3px 9px;border-radius:99px;margin-left:auto;white-space:nowrap;font-weight:500}
.fcat-release-ext{background:#e8f2ec;color:#2d5a3d}
.fcat-clear-heat{background:#eef6fc;color:#1a6b9a}
.fcat-tonify{background:#fdf8e8;color:#b8860b}
.fcat-regulate{background:#fdf2f0;color:#c0392b}
.fcat-phlegm-damp{background:#f1ede3;color:#5a4a2a}
.fcat-warm{background:#fff3e0;color:#c97a0a}
.fcat-shen{background:#f0eef8;color:#5a4a8a}
.fcat-harmonise{background:#e8f5f3;color:#2a6b60}
.fcat-skin{background:#fdf0e8;color:#8b4513}
.fcat-stop-bleed{background:#fdf2f0;color:#a0201a}
.fcat-open{background:#e8f0fc;color:#1a4a8a}
.fcat-wind{background:#f0f8e8;color:#3a6020}
.formula-body{display:none;padding:0 1.1rem 1rem;border-top:1px solid var(--border);margin-top:0}
.formula-card.open .formula-body{display:block}
.formula-section{margin-top:.9rem}
.formula-section-label{font-size:10px;font-family:'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:6px}
.formula-herb-list{display:flex;flex-wrap:wrap;gap:5px}
.formula-herb-pill{font-size:12px;padding:3px 9px;border-radius:99px;background:var(--bg);border:1px solid var(--border);color:var(--text2);cursor:pointer;transition:all .1s}
.formula-herb-pill:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-l)}
.formula-herb-pill.chief{background:var(--accent-l);border-color:var(--accent);color:var(--accent);font-weight:700}

/* Pattern reference */
.pattern-search{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r);font-family:'Inter',sans-serif;font-size:14px;color:var(--text);background:var(--bg);margin-bottom:1rem}
.pattern-search:focus{outline:none;border-color:#8b4513}
.pattern-org-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1.25rem}
.pattern-cards{display:flex;flex-direction:column;gap:9px}
.pattern-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;cursor:pointer;transition:all .12s}
.pattern-card:hover{border-color:#8b4513;transform:translateY(-1px)}
.pattern-card.open{border-color:#8b4513}
.pattern-card-hdr{padding:.9rem 1.1rem;display:flex;align-items:center;gap:10px}
.pattern-card-name{font-family:'DM Serif Display',serif;font-size:15px;color:var(--text);flex:1}
.pattern-org-badge{font-size:10px;font-family:'DM Mono',monospace;padding:3px 8px;border-radius:99px;background:#fdf0e8;color:#8b4513;white-space:nowrap}
.pattern-card-body{display:none;padding:0 1.1rem 1rem;border-top:1px solid var(--border)}
.pattern-card.open .pattern-card-body{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding-top:.9rem}
.pattern-field{margin-bottom:.65rem}
.pattern-field-label{font-size:10px;font-family:'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:4px}
.pattern-field-val{font-size:13px;color:var(--text);line-height:1.6}
.pattern-field.full{grid-column:1/-1}
.pattern-mastery{font-size:12px;color:var(--text3);font-family:'DM Mono',monospace}
.pattern-quiz-btn{font-size:10px;font-family:'DM Mono',monospace;padding:3px 10px;border-radius:99px;background:var(--accent);color:#fff;border:none;cursor:pointer;white-space:nowrap;transition:opacity .12s}
.pattern-quiz-btn:hover{opacity:.85}
.pat-cat-quiz-btn{font-size:9px;font-family:'DM Mono',monospace;padding:2px 7px;border-radius:99px;background:var(--accent);color:#fff;border:none;cursor:pointer;white-space:nowrap;opacity:.7;transition:opacity .12s}
.pat-cat-quiz-btn:hover{opacity:1}

/* Secondary pattern index */
.secondary-pat-cat-hdr{font-family:'DM Serif Display',serif;font-size:16px;color:#8b4513;margin:1.5rem 0 .6rem;padding-bottom:.3rem;border-bottom:1px solid #f0d5b8}
.secondary-pat-list{display:flex;flex-direction:column;gap:4px;margin-bottom:1rem}
.secondary-pat-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;transition:background .12s}
.secondary-pat-item:hover{background:#fdf6ee}
.secondary-pat-icon{font-size:13px;width:18px;text-align:center;color:var(--text3);flex-shrink:0}
.secondary-pat-name{font-size:13px;color:var(--text);font-family:'DM Sans',sans-serif;line-height:1.4}
.secondary-pat-name:hover{color:#8b4513}

/* Tongue & pulse atlas */
.atlas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:2rem}
.atlas-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;cursor:pointer;transition:all .12s}
.atlas-card:hover{border-color:#8b4513;transform:translateY(-1px)}
.atlas-card.open{border-color:#8b4513}
.atlas-card-img{width:100%;height:80px;display:flex;align-items:center;justify-content:center;font-size:36px;background:var(--surface2)}
.pulse-svg-wrap{padding:8px 6px;overflow:hidden}
.pulse-waveform-card .atlas-card-img{background:var(--surface)}
.pulse-waveform-card:hover .atlas-card-img{background:var(--accent-l)}
.atlas-card-label{padding:8px 10px;font-size:12px;font-weight:700;color:var(--text)}
.atlas-card-sub{padding:0 10px 8px;font-size:11px;color:var(--text3);line-height:1.4}
.atlas-detail{background:var(--surface);border:1px solid #8b4513;border-radius:var(--rl);padding:1.25rem 1.4rem;margin-bottom:1.5rem;display:none;animation:fi .2s ease}
.atlas-detail.active{display:block}
.atlas-detail h3{font-family:'DM Serif Display',serif;font-size:20px;color:var(--text);margin-bottom:.35rem}
.atlas-detail-sub{font-size:12px;color:var(--text3);margin-bottom:1rem}
.atlas-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.atlas-field{margin-bottom:.75rem}
.atlas-field-label{font-size:10px;font-family:'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:4px}
.atlas-field-val{font-size:13px;color:var(--text);line-height:1.65}
.atlas-field.full{grid-column:1/-1}
.atlas-section-hdr{font-size:11px;font-family:'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin:1.5rem 0 .75rem;padding-bottom:6px;border-bottom:1px solid var(--border)}

/* Flashcards */
.fc-mode-bar{display:flex;gap:8px;margin-bottom:1.25rem;flex-wrap:wrap;align-items:center}
.fc-mode-btn{padding:6px 14px;border:1px solid var(--border);border-radius:99px;font-size:12px;font-weight:500;cursor:pointer;font-family:'Inter',sans-serif;color:var(--text2);background:var(--surface);transition:all .12s}
.fc-mode-btn.on{background:var(--accent-l);color:var(--accent);border-color:var(--accent)}
.fc-count{font-size:12px;color:var(--text3);font-family:'DM Mono',monospace;margin-left:auto}
.fc-progress{display:flex;align-items:center;gap:10px;margin-bottom:1.5rem}
.fc-prog-bar{flex:1;height:4px;background:var(--border);border-radius:99px;overflow:hidden}
.fc-prog-fill{height:100%;background:var(--accent);border-radius:99px;transition:width .4s ease}
.fc-prog-label{font-size:11px;font-family:'DM Mono',monospace;color:var(--text3);white-space:nowrap}
.fc-card-wrap{perspective:1000px;max-width:560px;margin:0 auto 1.5rem;cursor:pointer}
.fc-card{width:100%;min-height:220px;position:relative;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.fc-card.flipped{transform:rotateY(180deg)}
.fc-face{position:absolute;top:0;left:0;right:0;bottom:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--rl);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.75rem;min-height:220px;box-shadow:var(--shadow-md)}
.fc-front{background:var(--surface);border:1px solid var(--border)}
.fc-back{background:var(--accent-l);border:1px solid var(--accent);transform:rotateY(180deg)}
.fc-emoji{font-size:44px;margin-bottom:12px;line-height:1}
.fc-type-label{font-size:10px;font-family:'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:8px}
.fc-question{font-family:'DM Serif Display',serif;font-size:20px;color:var(--text);text-align:center;line-height:1.35}
.fc-hint{font-size:11px;color:var(--text3);margin-top:10px;text-align:center}
.fc-answer-label{font-size:10px;font-family:'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.fc-answer{font-family:'DM Serif Display',serif;font-size:18px;color:var(--accent);text-align:center;line-height:1.4;margin-bottom:8px}
.fc-answer-detail{font-size:12px;color:var(--text2);text-align:center;line-height:1.6;max-width:400px}
.fc-rating-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:560px;margin:0 auto 1.5rem;display:none}
.fc-rating-row.visible{display:grid}
.fc-rate-btn{padding:12px 8px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface);cursor:pointer;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;transition:all .14s;text-align:center;box-shadow:var(--shadow-sm)}
.fc-rate-again{border-color:var(--danger);color:var(--danger)}.fc-rate-again:hover{background:var(--danger-l)}
.fc-rate-hard{border-color:var(--warn);color:var(--warn)}.fc-rate-hard:hover{background:var(--warn-l)}
.fc-rate-easy{border-color:#2d9a4e;color:#2d9a4e}.fc-rate-easy:hover{background:#f0faf3}
.fc-session-done{text-align:center;padding:2.5rem 1rem;animation:fi .3s ease}
.fc-empty{text-align:center;padding:3rem 2rem;color:var(--text3)}

/* SRS Review */
.srs-empty{text-align:center;padding:3rem 2rem;color:var(--text3)}
.srs-empty-num{font-family:'DM Serif Display',serif;font-size:56px;opacity:.15;margin-bottom:10px}
.srs-card-wrap{max-width:540px;margin:0 auto}
.srs-progress{display:flex;align-items:center;gap:10px;margin-bottom:1.5rem}
.srs-prog-bar{flex:1;height:5px;background:var(--border);border-radius:99px;overflow:hidden}
.srs-prog-fill{height:100%;background:var(--accent);border-radius:99px;transition:width .3s}
.srs-prog-label{font-size:12px;font-family:'DM Mono',monospace;color:var(--text3);white-space:nowrap}
.srs-question-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:1.75rem;margin-bottom:1rem;text-align:center}
.srs-question-emoji{font-size:48px;margin-bottom:1rem}
.srs-question-type{font-size:10px;font-family:'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:.5rem}
.srs-question-text{font-family:'DM Serif Display',serif;font-size:20px;color:var(--text);line-height:1.35;margin-bottom:1.25rem}
.srs-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:1rem}
.srs-opt{padding:12px 16px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;font-size:14px;text-align:left;cursor:pointer;transition:all .14s}
.srs-opt:hover:not(:disabled){border-color:var(--accent);background:var(--accent-l)}
.srs-opt.correct{border-color:#2d9a4e;background:#f0faf3;color:#1a5c2a;font-weight:700}
.srs-opt.wrong{border-color:var(--danger);background:var(--danger-l);color:var(--danger)}
.srs-result{border-radius:var(--r);padding:.85rem 1rem;font-size:14px;line-height:1.6;margin-bottom:1rem;display:none}
.srs-result.correct{background:#f0faf3;border:1px solid #a3d9b0;color:#1a5c2a}
.srs-result.wrong{background:var(--danger-l);border:1px solid #f5c6c2;color:var(--danger)}
.srs-next-btn{width:100%;padding:11px;background:var(--accent);color:#fff;border:none;border-radius:var(--r);font-family:'DM Serif Display',serif;font-size:16px;cursor:pointer;transition:all .12s;display:none}
.srs-next-btn:hover{background:#1e3d2a}
.srs-session-done{text-align:center;padding:2rem;animation:fi .3s ease}
.srs-state-badge{font-size:9px;font-family:'DM Mono',monospace;font-weight:700;letter-spacing:.1em;padding:2px 7px;border-radius:99px;margin-right:6px;vertical-align:middle}
.srs-state-new{background:var(--info-l);color:var(--info)}
.srs-state-learning{background:var(--warn-l);color:var(--warn)}
.srs-state-review{background:var(--accent-l);color:var(--accent)}
.srs-ivl-again{color:var(--danger) !important}
.srs-ivl-hard{color:var(--warn) !important}
.srs-ivl-good{color:var(--accent) !important}
.srs-ivl-easy{color:var(--info) !important}
.srs-session-done h3{font-family:'DM Serif Display',serif;font-size:26px;margin-bottom:.5rem}

/* Mobile Formulas pill nav */
.ref-mob-wrap{display:none}
.ref-mob-head{display:flex;align-items:center;justify-content:space-between;padding:.65rem 1rem .35rem;background:var(--surface)}
.ref-mob-label,.ref-mob-hint{font-size:10px;font-family:'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}
.ref-mob-hint{display:flex;align-items:center;gap:4px;white-space:nowrap}
.ref-mob-hint::after{content:'\2192';font-size:12px;color:var(--accent);line-height:1}
.ref-mob-nav{display:none;overflow-x:auto;scrollbar-width:none;padding:0 1rem .7rem;gap:6px;background:var(--surface);-webkit-overflow-scrolling:touch;flex-shrink:0}
.ref-mob-nav::-webkit-scrollbar{display:none}
.ref-mob-btn{flex-shrink:0;padding:6px 14px;border:1.5px solid var(--border2);border-radius:99px;font-size:12px;font-weight:500;font-family:'Inter',sans-serif;color:var(--text2);background:var(--surface);cursor:pointer;transition:all .15s;white-space:nowrap}
.ref-mob-btn.active{background:var(--accent-l);color:var(--accent);border-color:var(--accent);font-weight:600}

/* Formula deep dive */
.fm-ddb-btn{padding:8px 14px;border:1px solid var(--border);border-radius:var(--r);background:transparent;color:var(--text2);font-size:12px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:all .12s}
.fm-ddb-btn:hover{background:var(--surface2);border-color:var(--accent);color:var(--accent)}
.fm-ddb-out{background:#fdf0e8;border:1px solid #f5c897;border-radius:var(--r);padding:1rem;margin-top:.65rem;font-size:13px;color:var(--text);line-height:1.75}

@media(max-width:900px){
  .ref-layout{grid-template-columns:1fr;margin:-0.75rem -1rem;display:flex;flex-direction:column}
  .ref-nav{display:none}
  .ref-mob-wrap{display:block;position:sticky;top:var(--mob-header-offset);z-index:36;background:var(--bg);box-shadow:0 10px 20px rgba(26,24,22,.06)}
  .ref-mob-nav{display:flex}
  .ref-content{padding:1rem 1rem 1.2rem;flex:1}
  .pattern-card.open .pattern-card-body{grid-template-columns:1fr;gap:.75rem;padding:.75rem}
  .pattern-field-val{font-size:12.5px;line-height:1.55}
  .pattern-card-hdr{padding:.75rem 1rem}
  .pattern-card-name{font-size:14px}
  .atlas-detail-grid{grid-template-columns:1fr}
  .atlas-grid{grid-template-columns:repeat(2,1fr)}
}