/**
 * @file public/main.css
 * @description BAZILAR Didático — DS v2.5 "Quiet Luxury Tupiniquim"
 * Gerado a partir do mapeamento completo de classes dos 12 níveis.
 * Tokens idênticos ao bazipt/src/styles/tokens.css
 */

/* ═══════════════════════════════════════════════════════════════════════
   1. TOKENS — Light Mode
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Superfícies */
  --sp: #F6F3ED;
  --sc: #FDFCF9;
  --si: #EDE9E0;

  /* Texto */
  --ip: #1E1B15;
  --is: #4C4538;
  --im: #7C7264;
  --id: #ACA090;

  /* Ouro */
  --gold: #967438;
  --gl:   #B8924C;
  --gs:   rgba(150,116,56,0.08);
  --gb:   rgba(150,116,56,0.20);

  /* Wu Xing — light */
  --wd:#1C3A72; --wm:#2652A8; --wl:#B8CCF0;
  --od:#0B5233; --om:#147A48; --ol:#A8DBBF;
  --fd:#8C0A12; --fm:#D3232E; --fl:#F5BBBF;
  --ed:#7A4C08; --em:#B87C14; --el2:#F0E0A0;
  --md:#383838; --mm:#848484; --ml:#E0E0E0;
  --fm2: 'JetBrains Mono', monospace; /* compat token name colision */

  /* Tipografia */
  --ff:  'Lora', 'Noto Serif SC', serif;
  --fd2: 'Noto Sans', system-ui, sans-serif;
  --fc:  'Noto Serif SC', serif;

  /* Spacing */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px;
  --s5:40px; --s6:48px; --s8:64px;

  /* Radius */
  --r:  8px;
  --rl: 16px;
  --rp: 9999px;

  /* Sombras */
  --sh:  0 1px 3px rgba(30,27,21,.07);
  --shm: 0 4px 18px rgba(30,27,21,.09);

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast: 120ms;
  --t-mid:  220ms;

  /* Container */
  --content-max: 720px;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. DARK MODE
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --sp: #0F0E0A;
  --sc: #1A1914;
  --si: #222018;

  --ip: #F2EEE4;
  --is: #C4BAA6;
  --im: #867C6A;
  --id: #524C40;

  --gold: #C09A4A;
  --gl:   #D4B060;
  --gs:   rgba(192,154,74,0.09);
  --gb:   rgba(192,154,74,0.22);

  --wd:#7AA0E0; --wm:#3060C0; --wl:#0A1830;
  --od:#50C880; --om:#0E6038; --ol:#061A10;
  --fd:#F05060; --fm:#A81820; --fl:#300810;
  --ed:#E8B020; --em:#A07808; --el2:#1E1400;
  --md:#C8C8C8; --mm:#848484; --ml:#1C1C1C;

  --sh:  0 1px 4px rgba(0,0,0,.35);
  --shm: 0 4px 22px rgba(0,0,0,.45);
}

/* ═══════════════════════════════════════════════════════════════════════
   3. RESET & BASE
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--sp);
  color: var(--ip);
  font-family: var(--fd2);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  min-height: 100dvh;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s4) var(--s3);
}

h1, h2, h3, h4 {
  font-family: var(--ff);
  color: var(--ip);
  line-height: 1.2;
}

h2 { font-size: 1.777rem; font-weight: 500; margin-bottom: var(--s3); }
h3 { font-size: 1.333rem; font-weight: 500; margin: var(--s4) 0 var(--s2); }

p { margin-bottom: var(--s3); color: var(--is); }
p:last-child { margin-bottom: 0; }

strong { color: var(--ip); font-weight: 600; }
em { font-style: italic; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gl); text-decoration: underline; }

table { width: 100%; border-collapse: collapse; }
th, td {
  text-align: left;
  padding: var(--s2) var(--s2);
  border-bottom: 1px solid var(--gb);
  font-size: .9rem;
  color: var(--is);
}
th { font-family: var(--fd2); font-weight: 600; color: var(--im); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }

details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   4. NAV
   ═══════════════════════════════════════════════════════════════════════ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--s3);
  height: 52px;
  background: var(--sc);
  border-bottom: 1px solid var(--gb);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff);
  font-size: .95rem;
  font-weight: 500;
  color: var(--ip);
  text-decoration: none;
  letter-spacing: .04em;
}
.nb:hover { color: var(--gold); text-decoration: none; }

.nsym {
  font-family: var(--fc);
  font-size: 1.1rem;
  color: var(--gold);
}

.nr {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.nav-progress {
  font-family: var(--fd2);
  font-size: .75rem;
  color: var(--im);
  letter-spacing: .04em;
}
.nav-progress span { color: var(--gold); font-weight: 600; }

.nl {
  font-family: var(--fd2);
  font-size: .8rem;
  color: var(--im);
  text-decoration: none;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.nl:hover { color: var(--gold); text-decoration: none; }

.tb {
  background: none;
  border: 1px solid var(--gb);
  border-radius: var(--rp);
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t-fast) var(--ease);
}
.tb:hover { border-color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════════════
   5. SCROLL BAR
   ═══════════════════════════════════════════════════════════════════════ */

.scroll-bar {
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gb);
  z-index: 99;
}
.scroll-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--gold);
  transition: width .1s linear;
}

/* ═══════════════════════════════════════════════════════════════════════
   6. TRAIL HERO (index)
   ═══════════════════════════════════════════════════════════════════════ */

.trail-hero {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s8) var(--s3) var(--s6);
}

.ha { max-width: 560px; }

.he {
  font-family: var(--fd2);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s2);
}

.ht {
  font-family: var(--ff);
  font-size: clamp(2.2rem, 5vw, 3.157rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--ip);
  margin-bottom: var(--s3);
}
.ht em { font-style: italic; color: var(--gold); }

.hs {
  font-family: var(--fd2);
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--is);
  max-width: 480px;
  line-height: 1.75;
  margin-top: var(--s2);
}

/* ═══════════════════════════════════════════════════════════════════════
   7. LEVEL HERO (level-XX)
   ═══════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s6) var(--s3) var(--s5);
  overflow: hidden;
}

.hero-glyph {
  position: absolute;
  top: var(--s4);
  right: var(--s3);
  font-family: var(--fc);
  font-size: clamp(5rem, 12vw, 8rem);
  color: var(--gb);
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

.hero-question {
  font-family: var(--ff);
  font-style: italic;
  font-size: 1rem;
  color: var(--im);
  border-left: 2px solid var(--gb);
  padding-left: var(--s2);
  margin-top: var(--s3);
  line-height: 1.65;
  max-width: 480px;
}

/* ═══════════════════════════════════════════════════════════════════════
   8. TRAIL GRID & CARDS
   ═══════════════════════════════════════════════════════════════════════ */

.trail-group-label {
  max-width: var(--content-max);
  margin: var(--s6) auto var(--s2);
  padding: 0 var(--s3);
  font-family: var(--fd2);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--im);
}

.trail-grid {
  max-width: var(--content-max);
  margin: 0 auto var(--s2);
  padding: 0 var(--s3);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s2);
}

.trail-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s3);
  background: var(--sc);
  border: 1px solid var(--gb);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--sh);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
  overflow: hidden;
}

.trail-card::before {
  content: attr(data-glyph);
  position: absolute;
  bottom: -4px;
  right: var(--s2);
  font-family: var(--fc);
  font-size: 3rem;
  color: var(--gb);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.trail-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shm);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

.trail-card.locked {
  opacity: .35;
  pointer-events: none;
  cursor: default;
}

.trail-num {
  font-family: var(--fd2);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--im);
}

.trail-name {
  font-family: var(--ff);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ip);
  line-height: 1.3;
}

.trail-group {
  font-family: var(--fd2);
  font-size: .72rem;
  color: var(--id);
}

.trail-question {
  font-family: var(--fd2);
  font-size: .82rem;
  font-style: italic;
  color: var(--im);
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   9. LEVEL BODY
   ═══════════════════════════════════════════════════════════════════════ */

.level-body {
  font-family: var(--fd2);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--is);
}
.level-body > * + * { margin-top: var(--s3); }

/* ═══════════════════════════════════════════════════════════════════════
   10. DIVIDER
   ═══════════════════════════════════════════════════════════════════════ */

.dv {
  text-align: center;
  padding: var(--s4) 0 var(--s2);
  color: var(--id);
  letter-spacing: .4em;
}
.dvs { font-size: 1.2rem; }

/* ═══════════════════════════════════════════════════════════════════════
   11. CALLOUT
   ═══════════════════════════════════════════════════════════════════════ */

.callout {
  display: flex;
  gap: var(--s2);
  background: var(--gs);
  border: 1px solid var(--gb);
  border-radius: var(--r);
  padding: var(--s3);
  margin: var(--s4) 0;
}

.callout-bar {
  flex-shrink: 0;
  width: 3px;
  background: var(--gold);
  border-radius: var(--rp);
}

.callout-body { flex: 1; }

.callout-title {
  font-family: var(--fd2);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s1) !important;
}

.callout-text {
  font-size: .95rem;
  color: var(--is);
  line-height: 1.7;
  margin-bottom: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   12. ETYMOLOGY ACCORDION
   ═══════════════════════════════════════════════════════════════════════ */

.etym {
  border: 1px solid var(--gb);
  border-radius: var(--r);
  overflow: hidden;
  margin: var(--s4) 0;
}

.etym summary {
  padding: var(--s2) var(--s3);
  font-family: var(--fd2);
  font-size: .85rem;
  font-weight: 600;
  color: var(--im);
  background: var(--sc);
  letter-spacing: .03em;
  transition: background var(--t-fast) var(--ease);
}
.etym summary:hover { background: var(--si); color: var(--ip); }
.etym[open] summary { border-bottom: 1px solid var(--gb); }

.etym-body {
  padding: var(--s3);
  background: var(--sc);
  overflow-x: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   13. CONCEPTS
   ═══════════════════════════════════════════════════════════════════════ */

.concepts { margin: var(--s4) 0; }

.concepts-title {
  font-family: var(--fd2);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--im);
  margin-bottom: var(--s2) !important;
}

.concept-item {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s3);
  background: var(--sc);
  border: 1px solid var(--gb);
  border-radius: var(--r);
  margin-bottom: var(--s2);
}

.concept-hanzi {
  font-family: var(--fc);
  font-size: 2rem;
  color: var(--gold);
  line-height: 1;
  flex-shrink: 0;
}

.concept-text {
  font-size: .9rem;
  color: var(--is);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════════════
   14. BUTTONS
   ═══════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px var(--s3);
  border-radius: var(--r);
  font-family: var(--fd2);
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
  border: 1px solid transparent;
}

.bs {
  background: var(--sc);
  color: var(--im);
  border-color: var(--gb);
}
.bs:hover { color: var(--ip); border-color: var(--gold); text-decoration: none; }

.bp {
  background: var(--gold);
  color: var(--sp);
  border-color: var(--gold);
}
.bp:hover { background: var(--gl); border-color: var(--gl); text-decoration: none; color: var(--sp); }

/* ═══════════════════════════════════════════════════════════════════════
   15. LEVEL NAV (bottom)
   ═══════════════════════════════════════════════════════════════════════ */

.level-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--content-max);
  margin: var(--s6) auto 0;
  padding: var(--s4) var(--s3);
  border-top: 1px solid var(--gb);
  gap: var(--s2);
}

.level-nav-center {
  font-family: var(--fd2);
  font-size: .82rem;
  color: var(--im);
  text-align: center;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════
   16. WU XING GRID (level-05)
   ═══════════════════════════════════════════════════════════════════════ */

.wx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s2);
  margin: var(--s4) 0;
}

.wx-card {
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--gb);
  box-shadow: var(--sh);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  cursor: pointer;
}
.wx-card:hover, .wx-card:focus { transform: translateY(-3px); box-shadow: var(--shm); outline: none; }
.wx-card:focus-visible { box-shadow: 0 0 0 3px var(--gold); }

.wx-head {
  padding: var(--s2);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
}

.wx-sym {
  font-family: var(--fc);
  font-size: 2.2rem;
  line-height: 1;
}

.wx-body {
  padding: var(--s2);
  background: var(--sc);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wx-name {
  font-family: var(--ff);
  font-size: .9rem;
  font-weight: 500;
}

.wx-desc {
  font-size: .75rem;
  color: var(--im);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════
   17. WU XING DIAGRAM (wxd-*)
   ═══════════════════════════════════════════════════════════════════════ */

.wxd-wrap { margin: var(--s4) 0; }
.wxd-tabs { display: flex; gap: var(--s1); margin-bottom: var(--s3); flex-wrap: wrap; }

.wxd-tab {
  padding: 6px var(--s2);
  border-radius: var(--rp);
  font-size: .78rem;
  font-weight: 500;
  color: var(--im);
  background: var(--sc);
  border: 1px solid var(--gb);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.wxd-tab:hover, .wxd-tab--active {
  background: var(--gold);
  color: var(--sp);
  border-color: var(--gold);
}

.wxd-svg { display: block; width: 100%; max-width: 460px; margin: 0 auto; }
.wxd-ctrl { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.wxd-ctrl-layer { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--im); cursor: pointer; }
.wxd-gen-layer  { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--im); cursor: pointer; }
.wxd-arrow { font-size: .9rem; }

.wxd-node { cursor: pointer; }
.wxd-node-bg { transition: opacity var(--t-fast) var(--ease); }
.wxd-node-hanzi { font-family: var(--fc); }
.wxd-node-label { font-family: var(--fd2); font-size: .65rem; }
.wxd-node-ring { fill: none; stroke-width: 2; }

.wxd-info {
  min-height: 80px;
  padding: var(--s2) var(--s3);
  background: var(--sc);
  border: 1px solid var(--gb);
  border-radius: var(--r);
  margin-top: var(--s2);
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
}
.wxd-info-glyph { font-family: var(--fc); font-size: 2rem; color: var(--gold); line-height: 1; flex-shrink: 0; }
.wxd-info-content { flex: 1; }
.wxd-info-name { font-family: var(--ff); font-size: 1rem; font-weight: 500; color: var(--ip); }
.wxd-info-rel  { font-size: .78rem; color: var(--gold); margin-bottom: 2px; }
.wxd-info-text { font-size: .85rem; color: var(--is); line-height: 1.6; }
.wxd-info-hint { font-size: .75rem; color: var(--id); font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════
   18. TRONCOS FLIP CARDS (level-06)
   ═══════════════════════════════════════════════════════════════════════ */

.trunk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--s2);
  margin: var(--s4) 0;
  perspective: 1000px;
}

.trunk-card { perspective: 800px; cursor: pointer; height: 140px; }
.trunk-flip { position: relative; width: 100%; height: 100%; transition: transform .5s var(--ease); transform-style: preserve-3d; }
.trunk-card:hover .trunk-flip, .trunk-card.active .trunk-flip { transform: rotateY(180deg); }

.trunk-front, .trunk-back {
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  border: 1px solid var(--gb);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s2);
  background: var(--sc);
  gap: 6px;
}
.trunk-back { transform: rotateY(180deg); background: var(--gs); }

.trunk-hanzi { font-family: var(--fc); font-size: 2.2rem; color: var(--gold); line-height: 1; }
.trunk-pinyin { font-family: var(--fd2); font-size: .72rem; color: var(--im); }
.trunk-elem-badge {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--rp);
  color: rgba(255,255,255,.75);
}
.trunk-back-title { font-family: var(--ff); font-size: .85rem; font-weight: 500; color: var(--ip); text-align: center; }
.trunk-back-sub   { font-size: .72rem; color: var(--im); text-align: center; }
.trunk-back-desc  { font-size: .72rem; color: var(--is); text-align: center; line-height: 1.5; }
.trunk-hint { text-align: center; font-size: .72rem; color: var(--id); margin-bottom: var(--s2); font-style: italic; }

.trunk-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15,14,10,.8);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: var(--s3);
}
.trunk-modal.visible { display: flex; }
.trunk-modal-content {
  background: var(--sc);
  border: 1px solid var(--gb);
  border-radius: var(--rl);
  padding: var(--s4);
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shm);
  position: relative;
}
.trunk-modal-close {
  position: absolute;
  top: var(--s2);
  right: var(--s2);
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--im);
  line-height: 1;
}
.trunk-modal-title    { font-family: var(--fc); font-size: 2.5rem; color: var(--gold); margin-bottom: 4px; }
.trunk-modal-subtitle { font-family: var(--ff); font-size: 1.1rem; color: var(--ip); margin-bottom: var(--s3); }
.trunk-modal-desc     { font-size: .9rem; color: var(--is); line-height: 1.7; }

/* ═══════════════════════════════════════════════════════════════════════
   19. RAMOS (level-07)
   ═══════════════════════════════════════════════════════════════════════ */

.branch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--s2);
  margin: var(--s4) 0;
}

.branch-card {
  background: var(--sc);
  border: 1px solid var(--gb);
  border-radius: var(--r);
  padding: var(--s2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  text-align: center;
}
.branch-card:hover, .branch-card.active { border-color: var(--gold); transform: translateY(-2px); }

.branch-hanzi  { font-family: var(--fc); font-size: 2rem; color: var(--gold); line-height: 1; }
.branch-name   { font-family: var(--ff); font-size: .85rem; font-weight: 500; color: var(--ip); }
.branch-pinyin { font-size: .7rem; color: var(--im); }
.branch-animal { font-size: .75rem; color: var(--is); }
.branch-elem   { font-size: .68rem; color: var(--im); }
.branch-hidden { font-size: .68rem; color: var(--id); }

/* ═══════════════════════════════════════════════════════════════════════
   20. JIAZI GRID (level-08)
   ═══════════════════════════════════════════════════════════════════════ */

.jiazi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
  margin: var(--s4) 0;
}

.jz-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  background: var(--sc);
  border: 1px solid var(--gb);
  border-radius: var(--r);
  gap: 2px;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
  font-size: .72rem;
}
.jz-line:hover, .jz-line.active { border-color: var(--gold); }

.jz-num     { font-size: .62rem; color: var(--id); }
.jz-top, .jz-bot { font-family: var(--fc); font-size: 1.1rem; line-height: 1; }
.jz-sep     { color: var(--id); font-size: .6rem; }
.jz-pinyin  { font-size: .6rem; color: var(--im); }
.jz-h       { font-size: .62rem; color: var(--id); }
.jz-pt-main { color: var(--ip); }
.jz-pt-sub  { color: var(--im); }
.jz-face, .jz-back { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   21. BAGUA GRID (level-04)
   ═══════════════════════════════════════════════════════════════════════ */

.bagua-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--s2);
  margin: var(--s4) 0;
}

.bagua-card {
  background: var(--sc);
  border: 1px solid var(--gb);
  border-radius: var(--r);
  padding: var(--s2);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.bagua-card:hover, .bagua-card.active { border-color: var(--gold); transform: translateY(-2px); }

.bagua-sym    { font-family: var(--fc); font-size: 2rem; color: var(--gold); line-height: 1; }
.bagua-name   { font-family: var(--ff); font-size: .85rem; font-weight: 500; color: var(--ip); }
.bagua-pinyin { font-size: .7rem; color: var(--im); }
.bagua-nature { font-size: .72rem; color: var(--is); }

/* ═══════════════════════════════════════════════════════════════════════
   22. BAZI MAP (level-09)
   ═══════════════════════════════════════════════════════════════════════ */

.master-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-bottom: var(--s3);
}
.master-btn {
  padding: 6px var(--s2);
  border-radius: var(--rp);
  border: 1px solid var(--gb);
  background: var(--sc);
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  color: var(--is);
}
.master-btn:hover, .master-btn.active {
  background: var(--gold);
  color: var(--sp);
  border-color: var(--gold);
}

.bazi-map {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s1);
  margin: var(--s3) 0;
  max-width: 480px;
}

.bazi-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--sc);
  border: 1px solid var(--gb);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease);
}
.bazi-pillar:hover { border-color: var(--gold); }

.bazi-pillar__header {
  width: 100%;
  padding: 4px;
  text-align: center;
  font-family: var(--fd2);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--im);
  background: var(--si);
}

.bazi-pillar__badge {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--rp);
  color: rgba(255,255,255,.75);
  margin: 4px 0;
}

.bazi-pillar__stem, .bazi-pillar__branch {
  font-family: var(--fc);
  font-size: 1.8rem;
  line-height: 1.2;
  color: var(--ip);
  padding: 4px 0;
}

.bazi-pillar__char   { font-family: var(--fc); font-size: .9rem; color: var(--im); }
.bazi-pillar__label  { font-size: .65rem; color: var(--id); padding-bottom: 4px; }
.bazi-pillar__hidden-stems { width: 100%; background: var(--si); padding: 4px; }
.bazi-pillar__hidden-stem  { font-family: var(--fc); font-size: .8rem; color: var(--im); text-align: center; }

.bazi-header { font-family: var(--fd2); font-size: .72rem; color: var(--im); margin-bottom: var(--s1); letter-spacing: .06em; text-transform: uppercase; }
.bazi-char   { font-family: var(--fc); }
.bazi-label  { font-size: .68rem; color: var(--id); }
.bazi-nota   { font-size: .82rem; color: var(--im); font-style: italic; margin-top: var(--s2); }
.bazi-badge  { display: inline-block; padding: 2px 8px; border-radius: var(--rp); font-size: .65rem; font-weight: 600; color: rgba(255,255,255,.75); }
.bazi-info   { background: var(--sc); border: 1px solid var(--gb); border-radius: var(--r); padding: var(--s2) var(--s3); margin-top: var(--s3); }
.bazi-info-tag   { font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.bazi-info-title { font-family: var(--ff); font-size: 1.1rem; font-weight: 500; color: var(--ip); margin: 4px 0; }
.bazi-info-body  { font-size: .85rem; color: var(--is); line-height: 1.7; }
.bazi-info-hint  { font-size: .75rem; color: var(--id); font-style: italic; margin-top: var(--s1); }
.bazi-info-years { font-size: .78rem; color: var(--im); }
.bazi-map--revealed .bazi-pillar { border-color: var(--gold); }
.bazi-stem  { font-family: var(--fc); font-size: 2rem; color: var(--ip); }
.bazi-branch { font-family: var(--fc); font-size: 2rem; color: var(--is); }
.bazi-hidden-stem { font-family: var(--fc); font-size: .9rem; color: var(--id); }
.hidden-label     { font-size: .62rem; color: var(--id); }
.is-day-master .bazi-pillar__stem,
.is-day-master .bazi-stem { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════════════
   23. DEZ DEUSES (level-10)
   ═══════════════════════════════════════════════════════════════════════ */

.god-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s2);
  margin: var(--s4) 0;
}

.god-card {
  background: var(--sc);
  border: 1px solid var(--gb);
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.god-card:hover, .god-card.active { border-color: var(--gold); transform: translateY(-2px); }

.god-card-header {
  padding: var(--s2);
  text-align: center;
  background: var(--si);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.god-hanzi { font-family: var(--fc); font-size: 1.8rem; color: var(--gold); line-height: 1; }
.god-name  { font-family: var(--ff); font-size: .85rem; font-weight: 500; color: var(--ip); }
.god-rel   { font-size: .7rem; color: var(--im); }

.god-info  { padding: var(--s2); }
.god-desc  { font-size: .78rem; color: var(--is); line-height: 1.6; }
.god-wrap  { margin: var(--s4) 0; }
.gods-group { margin-bottom: var(--s4); }
.god-legend { font-size: .72rem; color: var(--id); text-align: center; margin-top: var(--s2); font-style: italic; }
.gods-table { width: 100%; }
.corr-table { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════
   24. DA YUN — GRANDES CICLOS (level-11)
   ═══════════════════════════════════════════════════════════════════════ */

.dayun-strip {
  display: flex;
  gap: var(--s1);
  overflow-x: auto;
  padding-bottom: var(--s2);
  margin: var(--s4) 0;
  scrollbar-width: thin;
  scrollbar-color: var(--gb) transparent;
}

.dayun-block {
  flex-shrink: 0;
  width: 80px;
  background: var(--sc);
  border: 1px solid var(--gb);
  border-radius: var(--r);
  padding: var(--s2) var(--s1);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dayun-block:hover, .dayun-block.active { border-color: var(--gold); }

.dayun-age   { font-size: .65rem; color: var(--id); }
.dayun-hanzi { font-family: var(--fc); font-size: 1.4rem; color: var(--ip); line-height: 1; }
.dayun-elem  { font-size: .62rem; color: var(--im); }
.dayun-active-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2px;
}

.time-layers     { display: flex; flex-direction: column; gap: var(--s2); margin: var(--s4) 0; }
.time-layer      { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s2) var(--s3); background: var(--sc); border: 1px solid var(--gb); border-radius: var(--r); }
.time-layer-hanzi { font-family: var(--fc); font-size: 1.8rem; color: var(--gold); line-height: 1; flex-shrink: 0; }
.time-layer-title { font-family: var(--ff); font-size: .9rem; font-weight: 500; color: var(--ip); margin-bottom: 2px; }
.time-layer-desc  { font-size: .82rem; color: var(--is); line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════════════
   25. 12 ESTÁGIOS WHEEL (level-12)
   ═══════════════════════════════════════════════════════════════════════ */

.wheel-wrap  { margin: var(--s4) 0; }
.wheel-svg   { display: block; width: 100%; max-width: 400px; margin: 0 auto; cursor: pointer; }
.wheel-center { pointer-events: none; }
.wheel-center-text { font-family: var(--fc); font-size: 1.8rem; fill: var(--gold); }
.wheel-hint  { text-align: center; font-size: .72rem; color: var(--id); font-style: italic; margin-bottom: var(--s2); }
.wheel-info  {
  background: var(--sc);
  border: 1px solid var(--gb);
  border-radius: var(--r);
  padding: var(--s3);
  margin-top: var(--s2);
  min-height: 100px;
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
}
.wheel-info-num    { font-family: var(--ff); font-size: 2rem; font-weight: 700; color: var(--gold); line-height: 1; flex-shrink: 0; min-width: 2ch; }
.wheel-info-body   { flex: 1; }
.wheel-info-title  { font-family: var(--ff); font-size: 1rem; font-weight: 500; color: var(--ip); }
.wheel-info-pinyin { font-size: .75rem; color: var(--im); margin-bottom: var(--s1); }
.wheel-info-hint   { font-size: .82rem; color: var(--is); line-height: 1.6; }

.stages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s2);
  margin: var(--s4) 0;
}

.stage-card {
  background: var(--sc);
  border: 1px solid var(--gb);
  border-radius: var(--r);
  padding: var(--s2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.stage-card:hover, .stage-card.active { border-color: var(--gold); transform: translateY(-2px); }
.stage-num    { font-size: .62rem; color: var(--id); }
.stage-hanzi  { font-family: var(--fc); font-size: 1.6rem; color: var(--gold); line-height: 1; }
.stage-name   { font-family: var(--ff); font-size: .85rem; font-weight: 500; color: var(--ip); }
.stage-energy { font-size: .7rem; color: var(--im); }
.stage-desc   { font-size: .75rem; color: var(--is); line-height: 1.5; }

.energy-rise { color: var(--om); }
.energy-peak { color: var(--em); }
.energy-fall { color: var(--fm); }
.energy-rest { color: var(--wm); }

/* ═══════════════════════════════════════════════════════════════════════
   26. LAOZI CARD (level-02, 03)
   ═══════════════════════════════════════════════════════════════════════ */

.laozi-card {
  background: var(--sc);
  border: 1px solid var(--gb);
  border-radius: var(--rl);
  padding: var(--s4) var(--s4) var(--s3);
  margin: var(--s4) 0;
  position: relative;
  overflow: hidden;
}

.laozi-strophe    { margin-bottom: var(--s3); }
.laozi-row        { display: flex; gap: var(--s3); align-items: baseline; margin-bottom: 6px; }
.laozi-hanzi-phrase { font-family: var(--fc); font-size: 1.2rem; color: var(--gold); letter-spacing: .1em; }
.laozi-attr       { font-size: .75rem; color: var(--id); font-style: italic; text-align: right; margin-top: var(--s2); }

/* ═══════════════════════════════════════════════════════════════════════
   27. RELAÇÕES (level-07)
   ═══════════════════════════════════════════════════════════════════════ */

.rel-diagram { margin: var(--s4) 0; }
.rel-card {
  display: flex;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--sc);
  border: 1px solid var(--gb);
  border-radius: var(--r);
  margin-bottom: var(--s1);
  align-items: center;
}
.rel-card-icon { font-family: var(--fc); font-size: 1.4rem; color: var(--gold); flex-shrink: 0; }
.rel-card-name { font-family: var(--ff); font-size: .9rem; font-weight: 500; color: var(--ip); }
.rel-card-desc { font-size: .8rem; color: var(--is); }

/* ═══════════════════════════════════════════════════════════════════════
   28. YEAR / HIDDEN STEMS table (level-09, 10)
   ═══════════════════════════════════════════════════════════════════════ */

.year-row   { display: flex; gap: var(--s2); align-items: center; padding: 6px 0; border-bottom: 1px solid var(--gb); }
.year-num   { font-family: 'JetBrains Mono', monospace; font-size: .8rem; color: var(--im); min-width: 2.5ch; }
.year-hanzi { font-family: var(--fc); font-size: 1.1rem; color: var(--ip); }
.year-info  { font-size: .78rem; color: var(--is); }

.hidden-stem { font-family: var(--fc); font-size: .9rem; color: var(--id); }

/* ═══════════════════════════════════════════════════════════════════════
   29. FOOTER
   ═══════════════════════════════════════════════════════════════════════ */

.foot {
  max-width: var(--content-max);
  margin: var(--s8) auto 0;
  padding: var(--s4) var(--s3) var(--s6);
  border-top: 1px solid var(--gb);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  text-align: center;
}

.fs {
  font-family: var(--fc);
  font-size: 2rem;
  color: var(--id);
  line-height: 1;
}

.ft {
  font-size: .72rem;
  color: var(--id);
  letter-spacing: .04em;
  margin-bottom: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   30. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .trail-grid  { grid-template-columns: 1fr 1fr; }
  .bazi-map    { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .bazi-pillar__stem, .bazi-pillar__branch { font-size: 1.4rem; }
  .nav         { padding: 0 var(--s2); }
  main         { padding: var(--s3) var(--s2); }
  .trail-hero  { padding: var(--s5) var(--s2) var(--s4); }
  .hero        { padding: var(--s4) var(--s2) var(--s3); }
  .level-nav   { flex-wrap: wrap; gap: var(--s2); }
  .trunk-grid  { grid-template-columns: repeat(5, 1fr); }
  .jiazi-grid  { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 400px) {
  .trail-grid  { grid-template-columns: 1fr; }
  .bazi-map    { font-size: .85rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   31. ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════ */

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   32. NAV BRAND — círculo (alinha com bazipt topbar)
   ═══════════════════════════════════════════════════════════════ */

.nsym {
  width: 32px; height: 32px;
  border: 1.5px solid var(--gold); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .9rem; font-family: var(--fc);
  color: var(--gold);
  flex-shrink: 0;
}

.nb {
  font-family: var(--ff);
  font-size: 1.05rem;
  color: var(--gold);
  letter-spacing: .12em;
  text-transform: uppercase;
  gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   33. BTN DS v2.5 (para link cross-site)
   ═══════════════════════════════════════════════════════════════ */

.btn-ds {
  font-family: var(--fd2);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: var(--r);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .2s var(--ease);
  padding: 8px 20px;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gb);
  text-decoration: none;
}
.btn-ds:hover { border-color: var(--gold); background: var(--gs); text-decoration: none; color: var(--gold); }