/* FEAT Birth Grid – gated tool UI (Theme: #E0EDFF) */

.featbg-wrap{ width:100%; margin:16px 0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }

.featbg-shell,
.featbg-locked,
.featbg-card{
  max-width: 980px;
  margin: 0 auto;
}

.featbg-loading{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(224,237,255,0.55);
  color:#0F172A;
  font-weight:800;
  text-align:center;
}

.featbg-locked{
  border: 1px solid rgba(15,23,42,0.12);
  border-radius: 18px;
  background: #ffffff;
  padding: 16px;
  box-shadow: 0 14px 34px rgba(15,23,42,0.08);
}

.featbg-locked-title{ font-size: 16px; font-weight: 900; color:#0F172A; }
.featbg-locked-sub{ margin-top:6px; color:#475569; font-size:14px; line-height:1.45; }
.featbg-locked-actions{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }

.featbg-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius: 12px;
  text-decoration:none; font-weight:800; font-size:13px;
  color:#0F172A; background: rgba(15,23,42,0.04);
  border:1px solid rgba(15,23,42,0.10);
}
.featbg-btn-primary{ color:#fff; border:none; background: linear-gradient(90deg,#2563EB,#1D4ED8); }

.featbg-card{
  border: 1px solid rgba(15,23,42,0.12);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(224,237,255,0.85), rgba(224,237,255,0.30));
  padding: 16px;
  box-shadow: 0 18px 40px rgba(15,23,42,0.10);
}

.featbg-head{ display:flex; align-items:flex-start; gap:12px; }
.featbg-badge{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.6px;
  color: #1E3A8A;
  background: rgba(37,99,235,0.10);
  border: 1px solid rgba(37,99,235,0.18);
}
.featbg-title{ margin-top:8px; font-size: 18px; font-weight: 950; color:#0F172A; }
.featbg-sub{ margin-top:4px; color:#475569; font-size: 13px; line-height:1.45; }

.featbg-grid-row{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 14px; }
.featbg-grid{ background:#fff; border:1px solid rgba(15,23,42,0.12); border-radius:18px; padding:12px; }
.featbg-grid-title{ font-weight: 950; color:#0F172A; margin-bottom:10px; }

.featbg-loshu,
.featbg-birth{ width:100%; border-collapse:collapse; }

.featbg-loshu td,
.featbg-birth td{
  border: 1px solid rgba(15,23,42,0.18);
  text-align:center;
  vertical-align:middle;
  height: 60px;
  font-weight: 900;
  color:#0F172A;
  background: rgba(224,237,255,0.45);
  border-radius: 10px;
}

.featbg-birth td.is-filled{
  background: rgba(37,99,235,0.10);
  border-color: rgba(37,99,235,0.28);
}

.featbg-loshu td span{ display:block; font-size:11px; font-weight:700; color:#475569; margin-top:2px; }

.featbg-input{
  background:#fff;
  border:1px solid rgba(15,23,42,0.12);
  border-radius:18px;
  padding:12px;
}

.featbg-label{ display:block; font-weight: 950; color:#0F172A; margin-bottom:8px; }
.featbg-dob{ display:flex; gap:10px; flex-wrap:wrap; }
.featbg-dob select{
  padding:10px;
  font-size: 14px;
  border-radius: 12px;
  border:1px solid rgba(15,23,42,0.14);
  background: rgba(224,237,255,0.35);
  color:#0F172A;
  outline:none;
}
.featbg-dob select:focus{ border-color: rgba(37,99,235,0.45); background: rgba(224,237,255,0.55); }

.featbg-error{ margin-top:8px; color:#b91c1c; font-weight:800; font-size: 13px; min-height: 18px; }

.featbg-results{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
.featbg-pill{
  flex: 1 1 160px;
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(90deg,#2563EB,#1D4ED8);
  color:#fff;
  font-weight: 950;
}
.featbg-pill span{ opacity:0.9; font-weight:800; }
.featbg-pill strong{ font-size: 16px; }

.featbg-guidance{ display:flex; flex-direction:column; gap:10px; }
.featbg-box{
  background:#fff;
  border:1px solid rgba(15,23,42,0.12);
  border-radius:18px;
  padding:12px;
}
.featbg-box-title{ color:#0F172A; font-weight:950; }
.featbg-box-val{ margin-top:6px; color:#334155; font-weight:900; }
.featbg-box-good{ border-color: rgba(34,197,94,0.25); background: rgba(34,197,94,0.06); }
.featbg-note{ color:#475569; font-size:13px; line-height:1.45; padding:10px 2px 0; }

@media (max-width: 860px){
  .featbg-grid-row{ grid-template-columns: 1fr; }
}