.bazi-app{
  --bazi-bg:#fbfaf7;
  --bazi-card:#ffffff;
  --bazi-text:#1f1f1f;
  --bazi-muted:#666;
  --bazi-line:rgba(31,31,31,.12);
  --bazi-gold:#c2a25d;
  --bazi-gold2:rgba(194,162,93,.22);
  --bazi-shadow:0 10px 30px rgba(0,0,0,.08);
  --bazi-radius:18px;
  --bazi-max:1120px;
  --bazi-danger:#a12626;
  background:var(--bazi-bg);
  color:var(--bazi-text);
  line-height:1.5;
  padding:28px 0 50px;
}

.bazi-app *,
.bazi-app *::before,
.bazi-app *::after{
  box-sizing:border-box;
}

.bazi-app button,
.bazi-app input,
.bazi-app select{
  font:inherit;
}

.bazi-app .bazi-container{
  max-width:var(--bazi-max);
  margin:0 auto;
  padding:18px;
}

.bazi-app .bazi-page{display:none;}
.bazi-app .bazi-page.active{display:block;}

.bazi-app .bazi-hero{
  padding:8px 0 10px;
}

.bazi-app .bazi-hero-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
  align-items:stretch;
}

.bazi-app .bazi-card{
  background:var(--bazi-card);
  border:1px solid var(--bazi-line);
  border-radius:var(--bazi-radius);
  box-shadow:var(--bazi-shadow);
}

.bazi-app .bazi-hero-main{padding:22px;}

.bazi-app .bazi-kicker{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(194,162,93,.35);
  background:rgba(194,162,93,.08);
  color:rgba(31,31,31,.8);
  font-size:12px;
}

.bazi-app .bazi-hero h2{
  margin-top:12px;
  font-size:32px;
  line-height:1.12;
  letter-spacing:-.2px;
}

.bazi-app .bazi-hero p{
  margin-top:10px;
  color:var(--bazi-muted);
  font-size:15px;
  max-width:58ch;
}

.bazi-app .bazi-cta-row{
  margin-top:18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.bazi-app .bazi-btn{
  border:none;
  cursor:pointer;
  padding:12px 14px;
  border-radius:14px;
  font-weight:620;
  font-size:14px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.bazi-app .bazi-btn.primary{
  background:var(--bazi-text);
  color:#fff;
}

.bazi-app .bazi-btn.ghost{
  background:transparent;
  border:1px solid var(--bazi-line);
  color:var(--bazi-text);
}

.bazi-app .bazi-trust{
  padding:16px;
  display:grid;
  gap:10px;
}

.bazi-app .bazi-trust .bazi-item{
  border:1px solid var(--bazi-line);
  border-radius:14px;
  padding:12px;
  background:linear-gradient(180deg, rgba(194,162,93,.10), rgba(255,255,255,0));
}

.bazi-app .bazi-trust .bazi-item b{
  font-size:13px;
}

.bazi-app .bazi-trust .bazi-item div{
  margin-top:4px;
  font-size:12px;
  color:var(--bazi-muted);
}

.bazi-app .bazi-section{margin-top:18px;}
.bazi-app .bazi-section-title{
  font-size:16px;
  font-weight:700;
  margin:10px 2px;
}

.bazi-app .bazi-grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.bazi-app .bazi-mini{padding:14px;}
.bazi-app .bazi-mini h3{font-size:14px;}
.bazi-app .bazi-mini p{
  font-size:12.5px;
  color:var(--bazi-muted);
  margin-top:6px;
}

.bazi-app .bazi-two-col{
  display:grid;
  grid-template-columns:1fr .56fr;
  gap:14px;
  align-items:start;
}

.bazi-app .bazi-form{padding:16px;}

.bazi-app .bazi-form-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--bazi-line);
}

.bazi-app .bazi-form-title{
  font-weight:750;
  font-size:16px;
}

.bazi-app .bazi-step{
  font-size:12px;
  color:var(--bazi-muted);
}

.bazi-app .bazi-badge{
  font-size:12px;
  color:rgba(31,31,31,.85);
  border:1px solid rgba(194,162,93,.35);
  background:rgba(194,162,93,.08);
  padding:6px 10px;
  border-radius:999px;
  white-space:nowrap;
}

.bazi-app .bazi-fields{
  display:grid;
  gap:14px;
  margin-top:14px;
}

.bazi-app .bazi-field label{
  display:block;
  font-size:12.5px;
  color:rgba(31,31,31,.88);
  margin-bottom:6px;
  font-weight:600;
}

.bazi-app .bazi-field input,
.bazi-app .bazi-field select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--bazi-line);
  background:#fff;
  font-size:14px;
  outline:none;
}

.bazi-app .bazi-field input:disabled{
  background:#f4f2ee;
  color:rgba(31,31,31,.45);
  cursor:not-allowed;
}

.bazi-app .bazi-segmented{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  padding:4px;
  border:1px solid var(--bazi-line);
  border-radius:14px;
  background:#f6f4ef;
}

.bazi-app .bazi-segmented label{
  margin:0;
}

.bazi-app .bazi-segmented input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.bazi-app .bazi-segmented span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 10px;
  border-radius:10px;
  color:var(--bazi-muted);
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
}

.bazi-app .bazi-segmented input:checked + span{
  background:#fff;
  color:var(--bazi-text);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.bazi-app .bazi-segmented input:focus-visible + span{
  outline:2px solid rgba(194,162,93,.65);
  outline-offset:2px;
}

.bazi-app .bazi-place-search{
  position:relative;
  margin-top:8px;
}

.bazi-app .bazi-place-results{
  display:none;
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  z-index:10;
  overflow:hidden;
  border:1px solid var(--bazi-line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 12px 24px rgba(0,0,0,.12);
}

.bazi-app .bazi-place-result{
  display:block;
  width:100%;
  min-height:42px;
  padding:10px 12px;
  border:0;
  border-bottom:1px solid rgba(31,31,31,.08);
  border-radius:0;
  background:#fff;
  color:var(--bazi-text);
  font-size:13.5px;
  line-height:1.35;
  text-align:left;
  cursor:pointer;
}

.bazi-app .bazi-place-result:last-child{
  border-bottom:0;
}

.bazi-app .bazi-place-result:hover,
.bazi-app .bazi-place-result:focus{
  background:#f5f2ea;
}

.bazi-app .bazi-place-result.muted{
  color:var(--bazi-muted);
  cursor:default;
}

.bazi-app .bazi-place-meta{
  display:none;
  margin-top:8px;
  color:var(--bazi-muted);
  font-size:12.5px;
  line-height:1.45;
  text-align:center;
}

.bazi-app .bazi-place-meta:not(:empty){
  display:block;
}

.bazi-app .bazi-hint{
  font-size:12px;
  color:var(--bazi-muted);
  margin-top:6px;
}

.bazi-app .bazi-hint-top{
  margin-bottom:10px;
}

.bazi-app .bazi-err{
  display:none;
  font-size:12.5px;
  color:var(--bazi-danger);
  padding:10px 12px;
  border:1px solid rgba(161,38,38,.18);
  background:rgba(161,38,38,.06);
  border-radius:14px;
}

.bazi-app .bazi-form-actions{
  margin-top:6px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.bazi-app .bazi-sticky-actions{
  position:sticky;
  bottom:12px;
  background:linear-gradient(180deg, rgba(251,250,247,0), rgba(251,250,247,1) 28%);
  padding-top:12px;
}

.bazi-app .bazi-side{
  padding:16px;
  display:grid;
  gap:10px;
}

.bazi-app details{
  border:1px solid var(--bazi-line);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,.74);
}

.bazi-app summary{
  cursor:pointer;
  font-size:13px;
  font-weight:650;
}

.bazi-app details p{
  margin-top:8px;
  font-size:12.5px;
  color:var(--bazi-muted);
}

.bazi-app details ul{
  margin:8px 0 0 18px;
  color:var(--bazi-muted);
  font-size:12.5px;
}

.bazi-app .bazi-note{
  border:1px dashed rgba(194,162,93,.55);
  border-radius:14px;
  padding:12px;
  background:rgba(194,162,93,.08);
  color:rgba(31,31,31,.85);
  font-size:12.5px;
}

.bazi-app .bazi-result-wrap{padding:16px;}

.bazi-app .bazi-result-head{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-start;
  padding-bottom:12px;
  border-bottom:1px solid var(--bazi-line);
}

.bazi-app .bazi-result-head h2{font-size:20px;}

.bazi-app .bazi-result-subtitle{
  margin-top:6px;
  color:var(--bazi-muted);
  font-size:13px;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.bazi-app .bazi-pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--bazi-line);
  font-size:12px;
  color:var(--bazi-muted);
  background:#fff;
}

.bazi-app .bazi-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:14px;
}

.bazi-app .bazi-summary-box{
  padding:12px;
  border:1px solid var(--bazi-line);
  border-radius:14px;
  background:#fff;
}

.bazi-app .bazi-summary-box b{
  font-size:12px;
  color:var(--bazi-muted);
  font-weight:650;
  display:block;
}

.bazi-app .bazi-summary-box div{
  margin-top:6px;
  font-size:15px;
  font-weight:750;
}

.bazi-app .bazi-block{
  margin-top:12px;
  padding:14px;
  border:1px solid var(--bazi-line);
  border-radius:14px;
  background:#fff;
}

.bazi-app .bazi-block-title{
  font-size:13px;
  font-weight:700;
  margin-bottom:10px;
}

.bazi-app .bazi-pillars-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.bazi-app .bazi-pillar-card{
  border:1px solid var(--bazi-line);
  border-radius:16px;
  padding:14px 12px;
  background:linear-gradient(180deg, rgba(194,162,93,.08), rgba(255,255,255,1));
}

.bazi-app .bazi-pillar-label{
  text-align:center;
  font-size:12px;
  color:var(--bazi-muted);
  margin-bottom:12px;
}

.bazi-app .bazi-pillar-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.bazi-app .bazi-char-unit{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  padding:10px 8px;
  border-radius:12px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(31,31,31,.06);
}

.bazi-app .bazi-char-meta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}

.bazi-app .bazi-char-icon{
  width:22px;
  height:22px;
  object-fit:contain;
  flex-shrink:0;
}

.bazi-app .bazi-char-desc{
  font-size:12px;
  color:var(--bazi-muted);
  line-height:1.35;
}

.bazi-app .bazi-char-name-row{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:8px;
  flex-wrap:nowrap;
}

.bazi-app .bazi-char-hanzi{
  font-size:32px;
  line-height:1;
  font-weight:800;
  letter-spacing:.5px;
  color:var(--bazi-text);
}

.bazi-app .bazi-char-pinyin{
  font-size:13px;
  color:var(--bazi-muted);
  line-height:1;
  white-space:nowrap;
}

.bazi-app .bazi-char-divider{
  height:1px;
  width:100%;
  background:linear-gradient(90deg, rgba(31,31,31,0), rgba(31,31,31,.12), rgba(31,31,31,0));
}

.bazi-app .bazi-chart{
  margin-top:12px;
  padding:14px;
  border:1px solid var(--bazi-line);
  border-radius:14px;
  background:#fff;
}

.bazi-app .bazi-chart-title{
  font-weight:700;
  font-size:13px;
}

.bazi-app .bazi-bar{
  display:grid;
  grid-template-columns:90px 1fr 48px;
  gap:10px;
  align-items:center;
  margin:10px 0;
}

.bazi-app .bazi-bar label{
  font-size:13px;
  color:rgba(31,31,31,.88);
}

.bazi-app .bazi-track{
  height:10px;
  border-radius:999px;
  border:1px solid var(--bazi-line);
  background:linear-gradient(90deg, rgba(194,162,93,.35), rgba(194,162,93,.08));
  overflow:hidden;
}

.bazi-app .bazi-fill{
  height:100%;
  background:rgba(31,31,31,.88);
  border-radius:999px;
  width:0%;
  transition:width .35s ease;
}

.bazi-app .bazi-pct{
  font-size:12px;
  color:var(--bazi-muted);
  text-align:right;
}

.bazi-app .bazi-interpret-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.bazi-app .bazi-interpret-box{
  padding:12px;
  border:1px solid var(--bazi-line);
  border-radius:14px;
  background:#fff;
}

.bazi-app .bazi-interpret-box h3{font-size:13px;}
.bazi-app .bazi-interpret-box p{
  margin-top:8px;
  font-size:13px;
  color:var(--bazi-muted);
}

.bazi-app .bazi-balance-tendency{
  color:var(--bazi-muted);
  font-size:14px;
}

.bazi-app .bazi-tips{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.bazi-app .bazi-tips .bazi-box{
  padding:12px;
  border:1px solid var(--bazi-line);
  border-radius:14px;
  background:#fff;
}

.bazi-app .bazi-tips h3{font-size:13px;}
.bazi-app .bazi-tips ul{
  margin:8px 0 0 18px;
  color:var(--bazi-muted);
  font-size:12.5px;
}

.bazi-app .bazi-result-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.bazi-app .bazi-copybox{
  display:none;
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--bazi-line);
  background:rgba(255,255,255,.7);
  color:var(--bazi-muted);
  font-size:12.5px;
  white-space:pre-wrap;
}

.bazi-app .bazi-doc{padding:16px;}
.bazi-app .bazi-doc h2{font-size:18px;}
.bazi-app .bazi-doc p{
  margin-top:10px;
  color:var(--bazi-muted);
  font-size:14px;
  max-width:80ch;
}

@media (max-width:980px){
  .bazi-app .bazi-hero-grid,
  .bazi-app .bazi-two-col,
  .bazi-app .bazi-grid-3,
  .bazi-app .bazi-summary-grid,
  .bazi-app .bazi-pillars-grid,
  .bazi-app .bazi-interpret-grid,
  .bazi-app .bazi-tips{
    grid-template-columns:1fr;
  }
}