/* Калькулятор БаЦзы. Иероглифы — главный герой блока, поэтому им
   отдан самый крупный кегль, а латиница и русские подписи держатся тише. */
.bazi{display:flex; flex-direction:column; gap:14px}
.bz-eyebrow{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted)}
.bz-lead{color:var(--muted); font-size:14px}

.bz-form{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.bz-field{display:flex; flex-direction:column; gap:7px; flex:1; min-width:150px}
.bz-field.bz-narrow{flex:0 0 118px; min-width:112px}
.bz-field label{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted)}
.bz-field input,.bz-field select{width:100%; padding:13px 14px; border-radius:13px;
  border:1px solid var(--brd2); background:var(--w-field, rgba(3,4,10,.55)); color:var(--head);
  font-family:'JetBrains Mono',monospace; font-size:15px}
.bz-note{font-size:12.5px; color:var(--muted)}

.bz-result{display:flex; flex-direction:column; gap:18px}
.bz-pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.bz-pillar{border:1px solid var(--brd); border-radius:15px; padding:14px 10px; text-align:center;
  background:rgba(3,4,10,.45)}
.bz-pillar .role{font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:9px}
.bz-pillar .glyphs{font-size:32px; line-height:1.15; color:var(--head)}
.bz-pillar .glyphs .b{display:block; color:var(--gold)}
.bz-pillar .translit{font-size:12.5px; color:var(--txt); margin-top:7px}
.bz-pillar .animal{font-size:11.5px; color:var(--muted)}
.bz-pillar .hidden{margin-top:9px; padding-top:8px; border-top:1px solid var(--brd);
  font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--muted); line-height:1.5}
.bz-pillar.is-day{border-color:rgba(227,192,138,.42); background:rgba(227,192,138,.06)}
@media(max-width:620px){.bz-pillars{grid-template-columns:repeat(2,1fr)}}

.bz-meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;
  font-size:13px; color:var(--muted)}
.bz-meta b{display:block; color:var(--head); font-family:'JetBrains Mono',monospace;
  font-size:14px; font-weight:500; margin-top:3px}

.bz-balance-title{font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.bz-bar{display:flex; align-items:center; gap:11px; margin-bottom:7px; font-size:13px}
.bz-bar .nm{width:64px; flex-shrink:0; color:var(--txt)}
.bz-bar .track{flex:1; height:7px; border-radius:99px; background:var(--w-track, rgba(170,190,255,.10)); overflow:hidden}
.bz-bar .fill{height:100%; border-radius:99px; transition:width .7s cubic-bezier(.22,.9,.3,1)}
.bz-bar .val{width:30px; text-align:right; font-family:'JetBrains Mono',monospace;
  font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.el-wood{background:linear-gradient(90deg,#3E8F6B,#5FBF92)}
.el-fire{background:linear-gradient(90deg,#B4472F,#E8755A)}
.el-earth{background:linear-gradient(90deg,#8A6B3E,#D9B076)}
.el-metal{background:linear-gradient(90deg,#7C8698,#C2CCDC)}
.el-water{background:linear-gradient(90deg,#2F5B8F,#6E9BD8)}

.bz-unlock{display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  border:1px solid var(--w-unlock-brd, rgba(227,192,138,.3)); border-radius:14px; padding:14px 16px;
  background:var(--w-unlock-bg, linear-gradient(180deg,rgba(227,192,138,.1),transparent))}
.bz-unlock p{font-size:13px; color:var(--muted); max-width:34ch}
.bz-price{font-family:'JetBrains Mono',monospace; font-size:19px; color:var(--gold)}