/* =============== CUSTOM OVERRIDES - LOADED LAST = WINS CASCADE =============== */

/* NAVBAR DROPDOWN HIDE (CRITICAL) */
html body .navbar-nav .nav-item .nav-link::before,
html body .navbar-nav .nav-item .nav-link::after {
  display: none !important;
}

html body .widget__search,
html body .widget__select,
html body .widget__select .nice-select,
html body .search__area,
html body .search__area li {
  all: initial !important;
}

/* ============ INPUT PILL GROUP ============ */
html body .vn-pill-group,
html body .vn-pill-group *,
html body .vn-pill-group *::before,
html body .vn-pill-group *::after {
  box-sizing: border-box !important;
  list-style: none !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
}

html body .vn-pill-group {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  margin: 0 0 30px 0 !important;
  padding: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  background: #FFF9D9 !important;
  border: 1px solid #F6E7A6 !important;
  border-radius: 60px !important;
  height: 70px !important;
  min-height: 70px !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
}

html body .vn-pill-field {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 10px 0 18px !important;
  margin: 0 !important;
  position: relative !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  float: none !important;
}

html body .vn-pill-field + .vn-pill-field::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 1px !important;
  height: auto !important;
  background: rgba(255, 204, 0, 0.32) !important;
  display: block !important;
}

html body .vn-pill-btn-wrap {
  flex: 0 0 auto !important;
  width: auto !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 0 0 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  float: none !important;
}

html body .vn-field-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 0 12px 0 0 !important;
  padding: 0 !important;
  color: #6767fe !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  vertical-align: middle !important;
  text-align: center !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  float: none !important;
}

html body .vn-field-input,
html body .vn-field-select {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-style: none !important;
  border-width: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  color: #1b212f !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  font-family: inherit !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  text-align: left !important;
  vertical-align: middle !important;
  float: none !important;
  position: static !important;
}

html body .vn-field-input::placeholder {
  color: #9898A8 !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

html body .vn-field-select {
  cursor: pointer !important;
  padding-right: 22px !important;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%236767fe' d='M143 352L15 224c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l112 112 112-112c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L177 352c-9.4 9.4-24.6 9.4-34 0z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0px center !important;
  background-size: 12px 12px !important;
  background-color: transparent !important;
}

html body .vn-field-select option {
  color: #1b212f !important;
  background: #fff !important;
  font-size: 14px !important;
  padding: 6px 10px !important;
  font-weight: 400 !important;
}

html body .vn-date-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

html body .vn-field-input[type="date"] {
  position: relative !important;
  z-index: 2 !important;
}

html body .vn-date-placeholder {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  color: #9898A8 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: block !important;
  white-space: nowrap !important;
}

html body .vn-field-input[type="date"]::-webkit-datetime-edit,
html body .vn-field-input[type="date"]::-webkit-datetime-edit-fields-wrapper,
html body .vn-field-input[type="date"]::-webkit-datetime-edit-text,
html body .vn-field-input[type="date"]::-webkit-datetime-edit-month-field,
html body .vn-field-input[type="date"]::-webkit-datetime-edit-day-field,
html body .vn-field-input[type="date"]::-webkit-datetime-edit-year-field {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 15px !important;
  color: #1b212f !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
}
html body .vn-field-input[type="date"]::-webkit-datetime-edit {
  width: 100% !important;
}
html body .vn-field-input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  background: transparent !important;
  z-index: 3 !important;
}

html body .vn-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  gap: 8px !important;
  background: linear-gradient(90deg, #0a235d 0%, #0a235d 100%) !important;
  background-color: #0a235d !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 0 34px !important;
  border-radius: 60px !important;
  border: none !important;
  border-style: none !important;
  border-width: 0 !important;
  box-shadow: 0 8px 22px rgba(255, 114, 58, 0.3) !important;
  height: 58px !important;
  min-height: 58px !important;
  line-height: 58px !important;
  font-family: inherit !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
  text-decoration: none !important;
  float: none !important;
  position: static !important;
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
html body .vn-pill-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(255, 114, 58, 0.4) !important;
  color: #fff !important;
  background-color: #0a235d !important;
}
html body .vn-pill-btn:focus,
html body .vn-pill-btn:active {
  outline: none !important;
  color: #fff !important;
  background-color: #0a235d !important;
}
html body .vn-pill-btn::-moz-focus-inner {
  border: 0 !important;
  padding: 0 !important;
}

/* ============ PILL GROUP MOBILE ============ */
@media (max-width: 768px) {
  html body .vn-pill-group {
    border-radius: 24px !important;
    padding: 16px !important;
    flex-direction: column !important;
    gap: 16px !important;
    background: transparent !important;
    border: none !important;
    height: auto !important;
    min-height: 0 !important;
  }
  html body .vn-pill-field {
    width: 100% !important;
    flex: 0 0 auto !important;
    background: #FFF9D9 !important;
    border: 1px solid #F6E7A6 !important;
    border-radius: 60px !important;
    padding: 0 18px 0 22px !important;
    height: 60px !important;
    min-height: 60px !important;
  }
  html body .vn-pill-field + .vn-pill-field::before {
    display: none !important;
  }
  html body .vn-pill-btn-wrap {
    width: 100% !important;
    margin: 0 !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }
  html body .vn-pill-btn {
    width: 100% !important;
    height: 60px !important;
    min-height: 60px !important;
    line-height: 60px !important;
    border-radius: 60px !important;
  }
}

/* ================ WHITE CARDS ================ */
html body .vn-card {
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 32px !important;
  box-shadow: 0 12px 40px rgba(16, 24, 40, 0.06), 0 2px 8px rgba(16, 24, 40, 0.04) !important;
  border: 1px solid #EEF0F5 !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  display: block !important;
  margin: 0 0 30px 0 !important;
}

html body .vn-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.09), 0 4px 12px rgba(16, 24, 40, 0.05) !important;
}

html body .vn-card .vn-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0ba0e7 !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: -0.3px !important;
}

html body .vn-card .vn-subtitle {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #0A235D !important;
  margin: 0 0 24px 0 !important;
}

/* INFO SECTIONS */
html body .info-section .chart-box h3 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0ba0e7 !important;
  margin: 0 0 14px 0 !important;
}
html body .info-section .chart-box h4 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0ba0e7 !important;
  margin: 24px 0 10px 0 !important;
}
html body .info-section .chart-box p {
  font-size: 14.5px !important;
  line-height: 1.72 !important;
  color: #0A235D !important;
  margin: 0 0 12px 0 !important;
}
html body .info-section .chart-box ul {
  margin: 10px 0 !important;
  padding-left: 22px !important;
  display: block !important;
  list-style: disc !important;
}
html body .info-section .chart-box ul li {
  font-size: 14.5px !important;
  line-height: 1.75 !important;
  color: #5a6178 !important;
  margin-bottom: 6px !important;
  list-style: disc !important;
  display: list-item !important;
}
html body .info-section .chart-box ul li::marker {
  color: #0a235d !important;
  content: disc !important;
}

/* MAGIC SQUARE */
html body .ls-orig-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(3, 1fr) !important;
  gap: 8px !important;
  max-width: 220px !important;
  margin: 18px auto 8px auto !important;
  padding: 14px !important;
  border-radius: 14px !important;
  background: #FFF9D9 !important;
  border: 1px solid #F6E7A6 !important;
  width: 100% !important;
}
html body .ls-orig-cell {
  background: #ffffff !important;
  border-radius: 10px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1b212f !important;
  box-shadow: 0 2px 6px rgba(103, 103, 254, 0.12) !important;
  border: 1px solid rgba(103, 103, 254, 0.12) !important;
  width: auto !important;
  float: none !important;
  list-style: none !important;
}
html body .ls-orig-cell:nth-child(5) {
  background: linear-gradient(135deg, #1e72ff 0%, #0b55d8 55%, #0a44c4 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(11, 85, 216, 0.35) !important;
  border: none !important;
}

/* SECTION TITLE */
html body .section-title h2 {
  font-size: 34px !important;
  font-weight: 800 !important;
  color: #1b212f !important;
  letter-spacing: -0.5px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
html body .section-title .bottom-line {
  display: inline-block !important;
  position: relative !important;
  color: #0a235d !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
}
html body .section-title .bottom-line::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -8px !important;
  transform: translateX(-50%) !important;
  width: 44px !important;
  height: 2px !important;
  background: linear-gradient(90deg, #0a235d, #f14d5d) !important;
  border-radius: 2px !important;
}

/* LO SHU HEADER + GRID */
html body .ls-header {
  text-align: center !important;
  background: linear-gradient(135deg, #1e72ff 0%, #0b55d8 55%, #0a44c4 100%) !important;
  color: #fff !important;
  padding: 18px 20px !important;
  border-radius: 12px 12px 0 0 !important;
  margin: -32px -32px 28px -32px !important;
  display: block !important;
}
html body .ls-header h3 {
  color: #fff !important;
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}
html body .ls-header p {
  color: rgba(255, 255, 255, 0.82) !important;
  margin: 4px 0 0 0 !important;
  font-size: 13px !important;
}

html body .ls-grid-wrap {
  display: flex !important;
  justify-content: center !important;
  padding: 10px 0 18px 0 !important;
  width: 100% !important;
}
html body .ls-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(3, 1fr) !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .ls-cell {
  position: relative !important;
  background: #fff !important;
  border: 1.5px dashed #d8dae5 !important;
  border-radius: 12px !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  color: #A9ADC0 !important;
  box-shadow: inset 0 2px 8px rgba(16, 24, 40, 0.03) !important;
  width: auto !important;
  height: auto !important;
  float: none !important;
  list-style: none !important;
}
html body .ls-cell .hint {
  position: absolute !important;
  top: 6px !important;
  left: 8px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #b9bccd !important;
}
html body .ls-cell.present {
  background: #F5F4FF !important;
  border: 1.5px solid rgba(103, 103, 254, 0.35) !important;
  border-style: solid !important;
  color: #6767fe !important;
  box-shadow: 0 6px 14px rgba(103, 103, 254, 0.12) !important;
}
html body .ls-cell.repeated {
  background: linear-gradient(135deg, #6767fe 0%, #7c3aed 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(103, 103, 254, 0.38) !important;
}
html body .ls-cell.repeated .hint {
  color: rgba(255, 255, 255, 0.7) !important;
}
html body .ls-cell .count-badge {
  position: absolute !important;
  top: 4px !important;
  right: 6px !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 6px !important;
  line-height: 20px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #0a235d 0%, #FF4D4D 100%) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-align: center !important;
  box-shadow: 0 3px 8px rgba(255, 77, 77, 0.38) !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
}
html body .ls-cell.present .count-badge {
  background: linear-gradient(135deg, #0a235d 0%, #FF9B3A 100%) !important;
}
html body .ls-cell .cell-digits-wrap {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(20px, 1fr)) !important;
  gap: 2px 4px !important;
  padding: 14px 6px 6px 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  align-content: center !important;
  justify-content: center !important;
  align-items: center !important;
  justify-items: center !important;
}
html body .ls-cell .cell-digit {
  display: inline-block !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  min-width: 18px !important;
  text-align: center !important;
}
html body .ls-cell.repeated .cell-digit {
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.12) !important;
}
html body .ls-cell.present:not(.repeated) .cell-digit {
  font-size: 30px !important;
  grid-column: 1 / -1 !important;
}
@media (max-width: 768px) {
  html body .ls-cell .cell-digit { font-size: 18px !important; }
  html body .ls-cell.present:not(.repeated) .cell-digit { font-size: 26px !important; }
}
@media (max-width: 575px) {
  html body .ls-cell .cell-digit { font-size: 15px !important; }
  html body .ls-cell.present:not(.repeated) .cell-digit { font-size: 22px !important; }
}

html body .ls-legend {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 22px !important;
  margin-top: 10px !important;
  font-size: 13px !important;
  color: #5a6178 !important;
}
html body .ls-legend span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
html body .ls-legend .swatch {
  width: 14px !important;
  height: 14px !important;
  border-radius: 4px !important;
  background: #fff !important;
  border: 1.5px dashed #d8dae5 !important;
  display: inline-block !important;
}
html body .ls-legend .swatch.present {
  background: #F5F4FF !important;
  border: 1.5px solid rgba(103, 103, 254, 0.5) !important;
  border-style: solid !important;
}
html body .ls-legend .swatch.repeated {
  background: linear-gradient(135deg, #6767fe 0%, #7c3aed 100%) !important;
  border: none !important;
}

/* DOB RESULT 4 STATS */
html body .dob-result-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}
html body .dob-stat {
  background: linear-gradient(135deg, #FFFDF0 0%, #FFF6C9 100%) !important;
  border: 1px solid rgba(246, 231, 166, 0.95) !important;
  border-radius: 14px !important;
  padding: 18px 14px !important;
  text-align: center !important;
}
html body .dob-stat .label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #7C849C !important;
  letter-spacing: 0.2px !important;
  margin-bottom: 10px !important;
}
html body .dob-stat .num {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #6767fe !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
}
html body .dob-stat .planet {
  font-size: 13px !important;
  color: #5a6178 !important;
  font-weight: 600 !important;
}
html body .dob-stat .mt-6 { margin-top: 6px !important; }
html body .dob-stat .text-xs { font-size: 11.5px !important; color: #888 !important; font-weight: 500 !important; }

@media (max-width: 991px) {
  html body .dob-result-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* LO SHU SECTION TITLE + MISSING + ARROWS + EMPTY STATE */
html body .ls-section-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0ba0e7 !important;
  margin: 0 0 6px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
html body .ls-section-title i {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #6767fe 0%, #7c3aed 100%) !important;
  color: #fff !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

html body .ls-missing {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap: 14px !important;
  margin-top: 18px !important;
}
html body .ls-missing-card {
  background: #fff !important;
  border: 1px solid #EEF0F5 !important;
  border-radius: 14px !important;
  padding: 18px 12px 16px 12px !important;
  text-align: center !important;
  transition: transform 0.2s !important;
}
html body .ls-missing-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08) !important;
}
html body .ls-missing-card .num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #F4F4FF 0%, #FFF1E8 100%) !important;
  color: #6767fe !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
  border: 1px solid rgba(103, 103, 254, 0.18) !important;
}
html body .ls-missing-card .planet {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #1b212f !important;
}
html body .ls-missing-card .sanskrit {
  font-size: 12px !important;
  color: #888 !important;
  margin-top: 2px !important;
}

html body .ls-arrows {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 14px !important;
  margin-top: 18px !important;
}
html body .ls-arrow-card {
  background: linear-gradient(135deg, #F8F8FF 0%, #FFF1E8 100%) !important;
  border: 1px solid rgba(103, 103, 254, 0.16) !important;
  border-radius: 14px !important;
  padding: 18px !important;
}
html body .ls-arrow-card h5 {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  color: #1b212f !important;
  margin: 0 0 10px 0 !important;
}
html body .ls-arrow-card h5 i {
  color: #0a235d !important;
  font-size: 15px !important;
}
html body .ls-arrow-card .vals {
  display: flex !important;
  gap: 7px !important;
  margin-bottom: 10px !important;
  flex-wrap: wrap !important;
}
html body .ls-arrow-card .val-pill {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  background: #fff !important;
  border: 1px solid rgba(103, 103, 254, 0.25) !important;
  color: #6767fe !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}
html body .ls-arrow-card p {
  margin: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: #5a6178 !important;
}

html body .empty-state {
  text-align: center !important;
  padding: 30px 20px !important;
}
html body .empty-state i {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #F4F4FF 0%, #FFF1E8 100%) !important;
  color: #6767fe !important;
  font-size: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
  border: 1px solid rgba(103, 103, 254, 0.2) !important;
  line-height: 1 !important;
}
html body .empty-state p {
  margin: 0 !important;
  font-size: 14.5px !important;
  color: #6a7085 !important;
  line-height: 1.7 !important;
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body .info-section.text-center h3 {
  text-align: center !important;
  margin-top: 8px !important;
}
html body .info-section.text-center p {
  text-align: center !important;
  font-size: 14px !important;
}

/* =============== UTILITIES =============== */
html body .pt-180 { padding-top: 180px !important; }
html body .pt-150 { padding-top: 150px !important; }
html body .pt-10 { padding-top: 10px !important; }
html body .pt-50 { padding-top: 50px !important; }
html body .pt-60 { padding-top: 60px !important; }
html body .pt-xs-150 { padding-top: 150px !important; }
html body .pb-50 { padding-bottom: 50px !important; }
html body .pb-80 { padding-bottom: 80px !important; }
html body .pb-xs-35 { padding-bottom: 35px !important; }
html body .mb-40 { margin-bottom: 40px !important; }
html body .mb-35 { margin-bottom: 35px !important; }
html body .mb-30 { margin-bottom: 30px !important; }
html body .mb-20 { margin-bottom: 20px !important; }
html body .mb-10 { margin-bottom: 10px !important; }
html body .mb-6 { margin-bottom: 6px !important; }
html body .mt-55 { margin-top: 55px !important; }
html body .mt-6 { margin-top: 6px !important; }
html body .mt-10 { margin-top: 10px !important; }
html body .mr-30 { margin-right: 30px !important; }
html body .pr-30 { padding-right: 30px !important; }
html body .pr-70 { padding-right: 70px !important; }
html body .h-100 { height: 100% !important; }

html body .grey-bg-fot {
  background: #ffffff !important;
}

@media (max-width: 991px) {
  html body .section-title h2 { font-size: 26px !important; }
  html body .vn-card { padding: 22px !important; }
  html body .ls-header { margin: -22px -22px 22px -22px !important; }
  html body .ls-cell { font-size: 24px !important; }
  html body .dob-stat .num { font-size: 26px !important; }
}

/* ========== HERO SECTION CUSTOM ========== */
html body .vn-hero {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  padding-top: 175px !important;
  padding-bottom: 70px !important;
  display: block !important;
  background:
    radial-gradient(ellipse 90% 70% at 20% 10%, rgba(255,114,58,0.07), transparent 60%),
    radial-gradient(ellipse 70% 60% at 85% 80%, rgba(103,103,254,0.08), transparent 60%) !important;
  overflow: hidden !important;
}
html body .vn-hero * { box-sizing: border-box !important; }

html body .vn-hero-shape {
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.9 !important;
}
html body .vn-hero-shape.s1 { top: 18% !important; left: 4% !important; width: 48px !important; }
html body .vn-hero-shape.s2 { top: 30% !important; right: 6% !important; width: 56px !important; }
html body .vn-hero-shape.s3 { bottom: 10% !important; left: 14% !important; width: 90px !important; opacity: 0.55 !important; }
html body .vn-hero-shape.s4 { bottom: 18% !important; right: 2% !important; width: 100px !important; opacity: 0.7 !important; }

html body .vn-hero-visual {
  position: relative !important;
  width: 100% !important;
  max-width: 540px !important;
  margin: 0 auto !important;
  aspect-ratio: 1 / 1 !important;
  max-height: 560px !important;
  min-height: 420px !important;
  display: block !important;
}
html body .vn-hero-visual-deco {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
html body .vn-hero-visual-deco.dots {
  top: 0 !important;
  right: 12% !important;
  width: 120px !important;
  opacity: 0.85 !important;
}
html body .vn-hero-visual-deco.earth {
  bottom: -10px !important;
  left: -20px !important;
  width: 180px !important;
  opacity: 0.6 !important;
  z-index: 0 !important;
}

html body .vn-hero-orbit {
  position: relative !important;
  width: 92% !important;
  aspect-ratio: 1 / 1 !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  border-radius: 50% !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: 2 !important;
  display: block !important;
}
/* Inner orbit ring (static dotted purple line — DOES NOT ROTATE) */
html body .vn-hero-orbit::before {
  content: "" !important;
  position: absolute !important;
  top: -18px !important;
  left: -18px !important;
  right: -18px !important;
  bottom: -18px !important;
  border-radius: 50% !important;
  border: 1.5px dotted rgba(103, 103, 254, 0.55) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: none !important;
  -webkit-animation: none !important;
  transform: none !important;
  -webkit-transform: none !important;
}

/* Remove extra outer orbit ring (user requested: "extra outline hata do") */
html body .vn-hero-orbit::after {
  display: none !important;
  content: none !important;
}

/* ============================================================
   ORBITING COLORED DOTS (orange / green / blue)
   Technique: Each dot is repositioned to the CENTER of
   .vn-hero-orbit, then rotated around the origin by an
   animating angle, then translated OUT to the outer radius.
   The counter-rotate keeps the dot circular (not rotated).
   ============================================================ */

/* ------- COMMON DOT RESET: CORNER-AT-CENTER + FINAL CENTER LOCK technique -------
   CRITICAL MATHS: CSS translate(%) ALWAYS REFERS TO ELEMENT'S OWN WIDTH/HEIGHT — NOT PARENT!
   So we CANNOT use 50% for orbit radius. Use PX values that match the actual orbit ring
   at each breakpoint (responsive via MQ).

   STEP 1) top:50% left:50% → places the TOP-LEFT CORNER exactly at center of .vn-hero-orbit
   STEP 2) margin:0 → NO shift, corner stays at origin (rotation axis CORRECT!)
   STEP 3) transform-origin: 0 0 → rotation happens AROUND orbit center origin (not dot itself!)
   STEP 4) Inside @keyframes transform order:
             rotate(A) → rotate origin frame around orbit center
             translate(r_px, 0) → move DOT CORNER outwards by exact orbit radius PX
             rotate(-A) → counter-rotate so dot remains upright (digit not tilted!)
             translate(-50%, -50%) → FINAL shift: move dot BACKWARD by half its size
                so DOT CENTER (not its corner!) lands exactly on the ring.
   GUARANTEES:
    - Dashed purple line → passes EXACTLY through dot midpoint → half inside / half outside
    - Works for ANY dot width (44/38/32px) because translate(-50%) is relative to dot!
*/
html body .orbit-dot {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform-origin: 0 0 !important; /* rotate AROUND ORIGIN (orbit center) */
  -webkit-transform-origin: 0 0 !important;
  -moz-transform-origin: 0 0 !important;
  will-change: transform !important;
  --orbit-r: 245px !important; /* DESKTOP: exact orbit ring radius (matches ::before dashed purple) */
}

/* OUTER RADIUS is approx (half of orbit width + 58px outer offset).
   We use ~61% translate (relative to container) which lands
   the dot on the OUTER orbit ring (::after radius). Adjusted
   via percentage so it scales responsively with viewport. */

/* --- D1 (ORANGE dot) — starts at ~0° (right area), FASTEST --- */
html body .orbit-dot.d1 {
  background: #0a235d !important;
  animation: vn-dot-orbit1 18s linear infinite !important;
  -webkit-animation: vn-dot-orbit1 18s linear infinite !important;
  z-index: 99 !important;
}
@keyframes vn-dot-orbit1 {
  0%   { transform: rotate(0deg)   translate(var(--orbit-r), 0) rotate(0deg)   translate(-50%, -50%); }
  100% { transform: rotate(360deg) translate(var(--orbit-r), 0) rotate(-360deg) translate(-50%, -50%); }
}
@-webkit-keyframes vn-dot-orbit1 {
  0%   { -webkit-transform: rotate(0deg)   translate(var(--orbit-r), 0) rotate(0deg)   translate(-50%, -50%); }
  100% { -webkit-transform: rotate(360deg) translate(var(--orbit-r), 0) rotate(-360deg) translate(-50%, -50%); }
}

/* --- D2 (BLUE/PURPLE dot) — starts ~120° (spread triangle), MIDDLE speed --- */
html body .orbit-dot.d2 {
  background: #6767fe !important;
  animation: vn-dot-orbit2 24s linear infinite !important;
  -webkit-animation: vn-dot-orbit2 24s linear infinite !important;
  z-index: 99 !important;
}
@keyframes vn-dot-orbit2 {
  0%   { transform: rotate(120deg) translate(var(--orbit-r), 0) rotate(-120deg) translate(-50%, -50%); }
  100% { transform: rotate(480deg) translate(var(--orbit-r), 0) rotate(-480deg) translate(-50%, -50%); }
}
@-webkit-keyframes vn-dot-orbit2 {
  0%   { -webkit-transform: rotate(120deg) translate(var(--orbit-r), 0) rotate(-120deg) translate(-50%, -50%); }
  100% { -webkit-transform: rotate(480deg) translate(var(--orbit-r), 0) rotate(-480deg) translate(-50%, -50%); }
}

/* --- D3 (GREEN dot) — starts ~240° (perfect triangle spread), SLOWEST --- */
html body .orbit-dot.d3 {
  background: #22c55e !important;
  animation: vn-dot-orbit3 32s linear infinite !important;
  -webkit-animation: vn-dot-orbit3 32s linear infinite !important;
  z-index: 99 !important;
}
@keyframes vn-dot-orbit3 {
  0%   { transform: rotate(240deg) translate(var(--orbit-r), 0) rotate(-240deg) translate(-50%, -50%); }
  100% { transform: rotate(600deg) translate(var(--orbit-r), 0) rotate(-600deg) translate(-50%, -50%); }
}
@-webkit-keyframes vn-dot-orbit3 {
  0%   { -webkit-transform: rotate(240deg) translate(var(--orbit-r), 0) rotate(-240deg) translate(-50%, -50%); }
  100% { -webkit-transform: rotate(600deg) translate(var(--orbit-r), 0) rotate(-600deg) translate(-50%, -50%); }
}

/* Mini images float up/down (no rotation needed) */
html body .vn-hero-img-mini.img-mini-1 {
  left: -5% !important;
  bottom: 14% !important;
  animation: vn-float 6s ease-in-out infinite !important;
  -webkit-animation: vn-float 6s ease-in-out infinite !important;
  will-change: transform !important;
}
html body .vn-hero-img-mini.img-mini-2 {
  right: -8% !important;
  bottom: 2% !important;
  animation: vn-float-rev 7s ease-in-out infinite !important;
  -webkit-animation: vn-float-rev 7s ease-in-out infinite !important;
  will-change: transform !important;
}
@keyframes vn-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@-webkit-keyframes vn-float {
  0%, 100% { -webkit-transform: translateY(0); }
  50%      { -webkit-transform: translateY(-14px); }
}
@keyframes vn-float-rev {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}
@-webkit-keyframes vn-float-rev {
  0%, 100% { -webkit-transform: translateY(0); }
  50%      { -webkit-transform: translateY(-18px); }
}

html body .vn-hero-img-main {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(1.05) !important;
  width: 56% !important;
  height: auto !important;
  max-width: 320px !important;
  border-radius: 0 !important;
  z-index: 4 !important;
  display: block !important;
  visibility: visible !important;
  object-fit: contain !important;
  opacity: 1 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 18px 30px rgba(16, 24, 40, 0.14))
    drop-shadow(0 8px 18px rgba(212, 163, 26, 0.22))
    drop-shadow(0 0 10px rgba(31, 95, 191, 0.10))
    drop-shadow(0 2px 6px rgba(255, 246, 214, 0.34)) !important;
}

html body .vn-hero-img-mini {
  display: none !important;
}
html body .vn-hero-img-mini.img-mini-1 { left: -5% !important; bottom: 14% !important; }
html body .vn-hero-img-mini.img-mini-2 { right: -8% !important; bottom: 2% !important; }

/* Orbit dot SIZING rules only — positioning handled by animation above */
html body .orbit-dot {
  position: absolute !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  border: 3px solid #fff !important;
  box-shadow:
    0 6px 18px rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  z-index: 99 !important;
  user-select: none !important;
  pointer-events: auto !important;
}
html body .orbit-dot .orbit-digit {
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 19px !important;
  line-height: 1 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.22) !important;
  letter-spacing: -0.3px !important;
  display: inline-block !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
/* Slight number tint with stronger bg overlay — so number pops but dot colour remains */
html body .orbit-dot.d1 { box-shadow: 0 6px 20px rgba(255,114,58,0.55), inset 0 0 0 1px rgba(255,255,255,0.45) !important; }
html body .orbit-dot.d2 { box-shadow: 0 6px 20px rgba(103,103,254,0.55), inset 0 0 0 1px rgba(255,255,255,0.45) !important; }
html body .orbit-dot.d3 { box-shadow: 0 6px 20px rgba(34,197,94,0.55), inset 0 0 0 1px rgba(255,255,255,0.45) !important; }

@media (max-width: 991px) {
  html body .vn-hero { padding-top: 110px !important; padding-bottom: 50px !important; }
  html body .vn-hero-visual { max-width: 440px !important; min-height: 380px !important; max-height: 460px !important; }
  html body .vn-hero-visual-deco.earth { width: 140px !important; }

  html body .orbit-dot.d1,
  html body .orbit-dot.d2,
  html body .orbit-dot.d3,
  /* FIX: INCLUDE NEW 9 NAVAGRAHA DOTS d4→d9 so they all get tablet orbit radius! */
  html body .orbit-dot.d4,
  html body .orbit-dot.d5,
  html body .orbit-dot.d6,
  html body .orbit-dot.d7,
  html body .orbit-dot.d8,
  html body .orbit-dot.d9 {
    width: 38px !important; height: 38px !important;
    margin: 0 !important;
    transform-origin: 0 0 !important;
    -webkit-transform-origin: 0 0 !important;
    --orbit-r: 175px !important; /* TABLET: reduced so dots stay inside visual (not overlapping header) */
  }
  html body .orbit-dot .orbit-digit { font-size: 15px !important; }
}
@media (max-width: 575px) {
  html body .vn-hero { padding-top: 150px !important; padding-bottom: 0px !important; }
  html body .vn-hero .row { row-gap: 8px !important; }
  html body .vn-hero-visual { max-width: 360px !important; min-height: 340px !important; max-height: 380px !important; }
  html body .vn-hero-visual-deco.dots { width: 80px !important; }
  html body .vn-hero-visual-deco.earth { width: 120px !important; left: 0 !important; }
  html body .vn-hero-shape { display: none !important; }

  html body .orbit-dot.d1,
  html body .orbit-dot.d2,
  html body .orbit-dot.d3,
  /* FIX: INCLUDE NEW 9 NAVAGRAHA DOTS d4→d9 so they all get MOBILE orbit radius 155px! */
  html body .orbit-dot.d4,
  html body .orbit-dot.d5,
  html body .orbit-dot.d6,
  html body .orbit-dot.d7,
  html body .orbit-dot.d8,
  html body .orbit-dot.d9 {
    width: 32px !important; height: 32px !important;
    margin: 0 !important;
    transform-origin: 0 0 !important;
    -webkit-transform-origin: 0 0 !important;
    --orbit-r: 135px !important; /* MOBILE: reduced so dots stay inside visual (not overlapping header) */
  }
  html body .orbit-dot .orbit-digit { font-size: 13px !important; }
}

/* ===========================================================
   POLISH / UX UPGRADES — appended after existing rules
   =========================================================== */

/* --- Hero decorative shapes (low z-index so orbit/dots appear above) --- */
html body .vn-hero-shape {
  z-index: 0 !important;
  opacity: 0.75 !important;
  pointer-events: none !important;
}

/* --- Hero decoration (bottom-left peach corner circle + doc icon) REDUCED so orbit doesn't overlap --- */
/* Re-purpose s4 (zigzag/shapes) to avoid cluster. Hide the bottom-left giant peach half-circle
   that comes from decor; instead keep dots/earth clearly visible. */

/* --- Decorative DOTS (dot-plan svg) --- */
html body .vn-hero-visual-deco.dots {
  z-index: 0 !important;
  opacity: 0.55 !important;
  pointer-events: none !important;
}

/* --- Earth backdrop - make it actually visible BEHIND orange circle --- */
html body .vn-hero-visual-deco.earth {
  z-index: 1 !important;
  opacity: 0.55 !important;
  filter: saturate(1.05) !important;
  pointer-events: none !important;
  width: 200px !important;
  max-width: 65% !important;
  right: -10% !important;
  bottom: -10% !important;
  left: auto !important;
  top: auto !important;
}

/* --- Mini circular images: white border + outer halo (zoomy template style) --- */
html body .vn-hero-img-mini {
  border: 2.5px solid #ffffff !important;
  box-shadow: 0 14px 34px rgba(16,24,40,.18) !important;
  outline: 3px solid rgba(103,103,254,0.28) !important;
  outline-offset: 4px !important;
  position: absolute !important;
  border-radius: 50% !important;
  z-index: 4 !important;
  overflow: hidden !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: transform .35s ease, box-shadow .35s ease !important;
}
html body .vn-hero-img-mini:hover {
  transform: translateY(-6px) scale(1.03) !important;
  box-shadow: 0 22px 46px rgba(103,103,254,.22) !important;
  outline-color: rgba(255,114,58,0.42) !important;
}

/* Blue planet should float cleanly without the white circular wrapper/halo */
html body .vn-hero-img-mini.img-mini-1,
html body .vn-hero-img-mini.img-mini-2 {
  border: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  filter: drop-shadow(0 10px 18px rgba(16,24,40,.14)) !important;
}
html body .vn-hero-img-mini.img-mini-1:hover,
html body .vn-hero-img-mini.img-mini-2:hover {
  box-shadow: none !important;
  outline: 0 !important;
  outline-color: transparent !important;
}

/* --- Remove the ugly "▾" chevron that template main.css appends to nav links (::after) + ::before --- */
/* Already set display:none on top; re-assert + remove box-sizing overflow leftovers */
html body .navbar-nav .nav-item .nav-link::before,
html body .navbar-nav .nav-item .nav-link::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
}

/* --- Remove any inline "▾" text inside nav links (if template injected via data attrs / ::after text) --- */
html body .navbar-nav .nav-item .nav-link {
  padding-left: 8px !important;
  padding-right: 8px !important;
  margin-left: 6px !important;
  margin-right: 6px !important;
  background-image: none !important;
}

/* --- Pill group buttons: HOVER + ACTIVE + FOCUS states --- */
html body .vn-pill-btn,
html body .vn-pill-btn-hover {
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease !important;
  transform-origin: center !important;
  will-change: transform !important;
}
html body .vn-pill-btn:hover,
html body .vn-pill-btn-hover:hover {
  transform: translateY(-2px) scale(1.02) !important;
  filter: brightness(1.03) saturate(1.08) !important;
  box-shadow: 0 18px 38px rgba(255,114,58,0.32) !important;
  background: linear-gradient(135deg,#FF7E48 0%, #F1571E 100%) !important;
}
html body .vn-pill-btn:active,
html body .vn-pill-btn-hover:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 6px 18px rgba(255,114,58,0.22), 0 0 0 4px rgba(255,114,58,0.18) !important;
}

/* --- Pill fields: FOCUS ring (accessibility) --- */
html body .vn-pill-field:focus-within {
  background: rgba(255, 255, 255, 1) !important;
  box-shadow: inset 0 0 0 2px rgba(103,103,254,0.22) !important;
}
html body .vn-field-input:focus,
html body .vn-field-select:focus {
  outline: 0 !important;
}

/* --- Cards: HOVER micro-lift, shadow increase --- */
html body .vn-card,
html body .info-section {
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
  will-change: transform !important;
}
html body .vn-card:hover,
html body .info-section:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 46px rgba(16,24,40,0.10) !important;
  border-color: rgba(103,103,254,0.18) !important;
}

/* --- Result / fade-in animation (applied via vn-result-in) --- */
html body .vn-result-in {
  animation: vn-fade-up .45s cubic-bezier(.2,.8,.2,1) both !important;
  -webkit-animation: vn-fade-up .45s cubic-bezier(.2,.8,.2,1) both !important;
}
@keyframes vn-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@-webkit-keyframes vn-fade-up {
  from { opacity: 0; -webkit-transform: translateY(12px); }
  to   { opacity: 1; -webkit-transform: translateY(0); }
}

/* --- Utility color helpers used in page.tsx icons (inline) --- */
.text-orange { color: #0a235d !important; }
.text-blue   { color: #6767FE !important; }
.text-green  { color: #22C55E !important; }
.text-purple { color: #7C3AED !important; }

.mr-6  { margin-right: 6px  !important; }
.mr-8  { margin-right: 8px  !important; }
.mr-10 { margin-right: 10px !important; }
.ml-10 { margin-left:  10px !important; }
.mt-6  { margin-top: 6px  !important; }

/* --- Feature card icon boxes - gradient, rotation on hover, glow --- */
html body .vn-feature-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 26px !important;
  position: relative !important;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, filter .35s ease !important;
  will-change: transform !important;
}
html body .vn-feature-icon::after {
  content: "" !important;
  position: absolute !important;
  inset: -6px !important;
  border-radius: 22px !important;
  background: inherit !important;
  filter: blur(14px) !important;
  opacity: 0.28 !important;
  z-index: -1 !important;
}
html body .vn-feature-icon-purple {
  background: linear-gradient(135deg,#6767fe 0%,#7c3aed 100%) !important;
  box-shadow: 0 12px 28px rgba(103,103,254,.35) !important;
}
html body .vn-feature-icon-orange {
  background: linear-gradient(135deg,#0a235d 0%,#f14d5d 100%) !important;
  box-shadow: 0 12px 28px rgba(255,114,58,.35) !important;
}
html body .vn-feature-icon-green {
  background: linear-gradient(135deg,#22c55e 0%,#10b981 100%) !important;
  box-shadow: 0 12px 28px rgba(34,197,94,.35) !important;
}
html body .vn-feature-card:hover .vn-feature-icon {
  transform: rotate(-8deg) scale(1.08) !important;
  filter: brightness(1.05) saturate(1.1) !important;
}

/* --- Hero pill button: calc icon inline alignment --- */
html body .vn-pill-btn i {
  vertical-align: middle !important;
}

/* --- Dob stats: icons color in label --- */
html body .dob-stat .label i {
  vertical-align: -1px !important;
}

/* --- Missing numbers cards: include TRAITS line styling (newly added in Loshu) --- */
html body .ls-missing-card .traits {
  font-size: 12px !important;
  color: #5A6178 !important;
  margin-top: 10px !important;
  line-height: 1.5 !important;
  padding-top: 8px !important;
  border-top: 1px dashed rgba(103,103,254,0.16) !important;
}

/* --- Footer: list items fix (template may inject ::before circle bullets) --- */
html body .vn-footer-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body .vn-footer-links li {
  display: block !important;
  margin-bottom: 10px !important;
  list-style: none !important;
  padding-left: 0 !important;
  position: relative !important;
  transition: transform .22s ease !important;
  background-image: none !important;
}
html body .vn-footer-links li::before {
  display: none !important;
  content: none !important;
}
html body .vn-footer-links li a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #5A6178 !important;
  font-size: 14.5px !important;
  text-decoration: none !important;
  padding: 4px 10px 4px 0 !important;
  border-radius: 8px !important;
  transition: color .2s ease, transform .2s ease, background-color .2s ease !important;
}
html body .vn-footer-links li:hover {
  transform: translateX(0) !important;
}
html body .vn-footer-links li a:hover {
  color: #0a235d !important;
  transform: translateX(4px) !important;
  background: rgba(255,114,58,0.05) !important;
}
html body .vn-footer-links li a i {
  color: #6767FE !important;
  font-size: 12px !important;
  width: 14px !important;
  text-align: center !important;
  transition: color .2s ease, transform .2s ease !important;
}
html body .vn-footer-links li a:hover i {
  color: #0a235d !important;
  transform: scale(1.18) !important;
}

/* --- Section title (bottom-line + accent underline helper) already via template; add accent bar --- */
html body .section-title h5.bottom-line {
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  font-size: 14px !important;
}

/* --- Remove the template's ::before dash on ul/li generic --- */
html body ul:not(.vn-footer-links) > li {
  background-image: none !important;
  padding-left: 14px !important;
}

/* --- Input pills: hide native date picker clear/calendar icon in Firefox/Safari cross-browser, keep click overlay --- */
html body input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0 !important;
  cursor: pointer !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
}
html body input[type="date"] {
  position: relative !important;
  z-index: 1 !important;
}

/* --- Mobile: mini-images shrink further to fit (no overlap) + decorative shape hide already --- */
@media (max-width: 768px) {
  html body .vn-hero-img-mini {
    width: 92px !important;
    max-width: 24% !important;
    height: auto !important;
  }
  html body .vn-hero-orbit {
    width: 74% !important;
    max-width: 320px !important;
  }
  /* In mobile, decorative shapes already hidden, make earth smaller */
  html body .vn-hero-visual-deco.earth {
    width: 140px !important;
    max-width: 40% !important;
  }
}

/* --- Extra mobile (575): hide mini-images entirely if overlap, keep orbit clean --- */
@media (max-width: 575px) {
  html body .vn-hero-img-mini.img-mini-1 {
    left: -3% !important;
    bottom: 10% !important;
    width: 76px !important;
    max-width: 26% !important;
  }
  html body .vn-hero-img-mini.img-mini-2 {
    right: -2% !important;
    bottom: 0% !important;
    width: 76px !important;
    max-width: 26% !important;
  }
}

/* --- Hero heading underline SVG (just in case) --- */
html body h1 svg {
  display: block !important;
}

/* --- Planet bubble inside hero result: subtle pulse entry --- */
html body .vn-planet-bubble {
  animation: vn-pop 500ms cubic-bezier(.2,1.4,.4,1) both !important;
  -webkit-animation: vn-pop 500ms cubic-bezier(.2,1.4,.4,1) both !important;
}
@keyframes vn-pop {
  from { opacity: 0; transform: scale(.82); }
  60%  { transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}
@-webkit-keyframes vn-pop {
  from { opacity: 0; -webkit-transform: scale(.82); }
  60%  { -webkit-transform: scale(1.06); }
  to   { opacity: 1; -webkit-transform: scale(1); }
}

/* --- Pills in hero result (Sum, Destiny) lift on hover --- */
html body .vn-pill-chip {
  transition: transform .22s ease, box-shadow .22s ease !important;
}
html body .vn-pill-chip:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 18px rgba(103,103,254,0.18) !important;
}


/* --- BUGFIX: Fix date input click area. Previously we set width 100% height 100% absolute on indicator
      which is good; BUT make sure vn-date-wrap is relative so 100% is calculated inside field only --- */
html body .vn-date-wrap {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  min-width: 0 !important;
}
html body .vn-date-wrap .vn-field-input[type="date"] {
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 !important;
  position: relative !important;
  cursor: pointer !important;
}
/* Restore indicator overlay: still hidden visually but fills the field so click on ANY part
   of the field triggers native date popup. */
html body .vn-date-wrap .vn-field-input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0.001 !important;       /* invisible but clickable */
  cursor: pointer !important;
  z-index: 5 !important;
  background: transparent !important;
  color: transparent !important;
}
/* Firefox */
html body .vn-date-wrap .vn-field-input[type="date"]::-moz-calendar-picker-indicator,
html body .vn-date-wrap .vn-field-input[type="date"]::picker {
  opacity: 0 !important;
  cursor: pointer !important;
}

/* Make sure Generate button is clickable (not overlapped by any wrapper) */
html body .vn-pill-btn-wrap {
  position: relative !important;
  z-index: 10 !important;
  flex-shrink: 0 !important;
}
html body .vn-pill-btn-wrap .vn-pill-btn {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 11 !important;
}

/* Also fix: in form, submit button should not be disabled via any template CSS */
html body button.vn-pill-btn {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  user-select: none !important;
}

/* Extra: vn-date-placeholder no pointer-events so clicks pass to input */
html body .vn-date-placeholder {
  pointer-events: none !important;
  z-index: 1 !important;
}


/* ===========================================================
   CUSTOM STYLISH DROPDOWN
   =========================================================== */

/* Button wrapper — vn-field-select is now a BUTTON not select */
html body button.vn-field-select {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 16px 0 44px !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #0a235d !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 0 !important;
  box-sizing: border-box !important;
  flex: 1 !important;
  min-width: 150px !important;
  position: relative !important;
  transition: color .18s ease !important;
}
html body button.vn-field-select:hover {
  color: #0a235d !important;
}

/* label */
html body .vn-select-label {
  flex: 1 1 auto !important;
  white-space: nowrap !important;
  padding-right: 10px !important;
  font-size: 15px !important;
  color: #0a235d !important;
}

/* Chevron */
html body .vn-select-chevron {
  color: #6767FE !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), color .2s ease !important;
  font-size: 11px !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .vn-select-chevron.open {
  transform: rotate(180deg) !important;
  color: #0a235d !important;
}

/* The dropdown list */
html body .vn-custom-dd {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 10px !important;
  min-width: 280px !important;
  max-height: 420px !important;
  background: #ffffff !important;
  border: 1px solid rgba(16,24,40,.06) !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 70px rgba(16,24,40,.14), 0 0 0 1px rgba(103,103,254,.08) !important;
  list-style: none !important;
  z-index: 9999 !important;
  overflow: hidden !important;
  overflow-y: auto !important;
  backdrop-filter: saturate(1.2) !important;
  animation: vn-dd-pop .28s cubic-bezier(.2,1.4,.3,1) both !important;
  -webkit-animation: vn-dd-pop .28s cubic-bezier(.2,1.4,.3,1) both !important;
  transform-origin: top center !important;
}
@keyframes vn-dd-pop {
  from { opacity: 0; transform: translateY(-8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@-webkit-keyframes vn-dd-pop {
  from { opacity: 0; -webkit-transform: translateY(-8px) scale(.96); }
  to   { opacity: 1; -webkit-transform: translateY(0) scale(1); }
}

/* Item */
html body .vn-dd-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  border-radius: 13px !important;
  cursor: pointer !important;
  list-style: none !important;
  margin: 2px 0 !important;
  position: relative !important;
  transition: background-color .22s ease, transform .22s ease, box-shadow .22s ease !important;
  border: 1px solid transparent !important;
  overflow: hidden !important;
}
html body .vn-dd-item::before {
  content: "" !important;
  position: absolute !important;
  left: 0; top: 0; bottom: 0;
  width: 0 !important;
  background: linear-gradient(180deg,#0a235d 0%, #6767FE 100%) !important;
  transition: width .32s cubic-bezier(.2,.8,.2,1) !important;
  opacity: 0 !important;
  border-radius: 13px 0 0 13px !important;
}
html body .vn-dd-item:hover {
  background: rgba(103,103,254,0.045) !important;
  transform: translateX(3px) !important;
  border-color: rgba(103,103,254,0.12) !important;
}
html body .vn-dd-item:hover::before {
  width: 3.5px !important;
  opacity: 1 !important;
}

/* ACTIVE (selected) state */
html body .vn-dd-item.active {
  background: linear-gradient(135deg, rgba(255,114,58,0.10) 0%, rgba(103,103,254,0.10) 100%) !important;
  border-color: rgba(103,103,254,0.22) !important;
}
html body .vn-dd-item.active::before {
  width: 3.5px !important;
  opacity: 1 !important;
}

/* Icon box */
html body .vn-dd-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #6767FE !important;
  background: #f3f3ff !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s ease, color .25s ease, box-shadow .25s ease !important;
}
html body .vn-dd-icon i { font-size: 16px !important; }
html body .vn-dd-icon.active {
  background: linear-gradient(135deg,#0a235d 0%,#6767FE 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(103,103,254,.32) !important;
  transform: scale(1.05) !important;
}
html body .vn-dd-item:hover .vn-dd-icon {
  transform: scale(1.08) rotate(-5deg) !important;
}

/* Text block */
html body .vn-dd-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
html body .vn-dd-label {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1b212f !important;
  letter-spacing: -0.1px !important;
  white-space: nowrap !important;
}
html body .vn-dd-sub {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #7c86a0 !important;
}

/* Check mark */
html body .vn-dd-check {
  color: #10B981 !important;
  font-size: 13px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #ECFDF5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,.08) !important;
  animation: vn-check-pop .35s cubic-bezier(.2,1.6,.4,1) both !important;
  -webkit-animation: vn-check-pop .35s cubic-bezier(.2,1.6,.4,1) both !important;
}
@keyframes vn-check-pop {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}
@-webkit-keyframes vn-check-pop {
  from { opacity: 0; -webkit-transform: scale(.6); }
  to   { opacity: 1; -webkit-transform: scale(1); }
}

/* Responsive: in mobile stacked pill, dropdown should be full width */
@media (max-width: 768px) {
  html body .vn-custom-dd {
    min-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 8px) !important;
  }
  html body .vn-dd-item { padding: 14px 14px !important; }
}


/* ===========================================================
   FIX: Dropdown cut-off at hero boundary + no scroll
   =========================================================== */

/* Unclamp hero vertically so dropdown can render outside its box */
html body .vn-hero {
  overflow-x: clip !important;   /* keep horizontal shapes contained */
  overflow-y: visible !important;/* allow dropdown to spill vertically */
}

/* Ensure dropdown stays on TOP no matter what section it overlaps */
html body .vn-custom-dd {
  z-index: 999999 !important;
  position: absolute !important;
  max-height: 56vh !important;    /* never taller than viewport 56% */
  overflow-y: auto !important;    /* scroll if more items */
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  /* Custom scrollbar aesthetic */
  scrollbar-width: thin !important;
  scrollbar-color: rgba(103,103,254,0.55) transparent !important;
}
html body .vn-custom-dd::-webkit-scrollbar {
  width: 6px !important;
}
html body .vn-custom-dd::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,#0a235d,#6767FE) !important;
  border-radius: 999px !important;
}
html body .vn-custom-dd::-webkit-scrollbar-track {
  background: transparent !important;
}

/* Pill group should NOT cut the dropdown (position relative containment removes) */
html body .vn-pill-group {
  overflow: visible !important;
}
html body .vn-pill-field {
  overflow: visible !important;
}

/* Keep button visible over dropdown shadow when open */
html body .vn-pill-field:has(.vn-custom-dd) > button.vn-field-select {
  z-index: 1000000 !important;
  position: relative !important;
}


/* ===========================================================
   DROPDOWN FIX 2: Alignment + Overlap bleeding + MaxHeight
   =========================================================== */

/* 1) Dropdown = ALWAYS aligned to field's left = full pill width */
html body .vn-pill-field > .vn-custom-dd {
  left: -14px !important;   /* pull back to field visual left (undo 14px inner) */
  right: -16px !important;  /* extend to end of field */
  width: auto !important;
  min-width: 360px !important;
  /* prevent bleeding: strong bg + shadow */
  background: #FFFFFF !important;
  background-image:
    linear-gradient(180deg, rgba(255,247,242,0.7) 0%, rgba(245,243,255,0.7) 100%) !important;
  background-blend-mode: normal !important;
  isolation: isolate !important;
  box-shadow:
    0 40px 90px rgba(16,24,40,.18),
    0 0 0 1px rgba(103,103,254,.10),
    0 20px 40px rgba(255,114,58,.08) !important;
  backdrop-filter: blur(8px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.25) !important;
  border: 1px solid rgba(255,255,255,.8) !important;
  /* clamp height + show scroll if longer */
  max-height: min(68vh, 520px) !important;
  overflow-y: auto !important;
}

/* 2) Each item = explicitly NO bleed-through (white layer when hover) */
html body .vn-dd-item {
  isolation: isolate !important;
  z-index: 1 !important;
  background-clip: padding-box !important;
}

/* 3) Left accent bar = NEVER bleeds outside rounded corners (overflow:hidden already present - good) */
html body .vn-dd-item::before {
  width: 3px !important;     /* thinner - avoid double left tint */
  border-radius: 0 !important;
  z-index: -1 !important;
}

/* 4) Selected active item = unique background not via global tint strip - prevent double left color */
html body .vn-dd-item.active {
  background:
    linear-gradient(90deg, rgba(244,224,40,0.26) 0%, rgba(244,224,40,0.26) 100%),
    #ffffff !important;
  border-color: #f7f3cb !important;
}
html body .vn-dd-item.active::before {
  background: linear-gradient(180deg,#6767FE 0%, #0a235d 100%) !important;
}

/* 5) Pill field = make relative (was inline) + lift button above dropdown shadow line */
html body .vn-pill-field {
  position: relative !important;
}
html body .vn-select-chevron.open {
  color: #0a235d !important;
}

/* 6) Ensure hero / pill / all parents allow absolute dropdown - NO overflow hidden anywhere in chain */
html body .vn-hero > * {
  overflow-x: visible !important;
  overflow-y: visible !important;
}
html body .vn-hero-text,
html body .vn-hero-form,
html body .vn-hero .container,
html body .vn-hero .row {
  overflow: visible !important;
}

/* 7) Mobile: full viewport aligned center = don't go outside screen edges */
@media (max-width: 768px) {
  html body .vn-pill-field > .vn-custom-dd {
    left: 0 !important;
    right: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-height: min(62vh, 460px) !important;
  }
}



/* ============================================================
   APPEND: NUMBER-ONLY ORBIT (NO CIRCLES!) — JYOTISH PULSE ANIMATION
   (Rollback: DELETE every line below START marker up to END marker — circles return in 10 seconds!)
   ============================================================ */


/* ============================================================
   APPEND: NUMBER-ONLY ORBIT — 9 NAVAGRAHA (1..9) — NO CIRCLES!
   Rollback: DELETE all lines between START marker + END marker below → returns immediately to 3 numbered circles (backup files also exist in root!)
   ============================================================ */
/* ===== START 9-NAVAGRAHA NUMBER-ONLY OVERRIDE ===== */

/* --- 1) COMMON: Orbit shell (INVISIBLE - NO CIRCLES!) --- */
html body .orbit-dot {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  overflow: visible !important;
  width: 80px !important;
  height: 80px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Kill leftover old per-dot circle colors (for safety) */
html body .orbit-dot.d1,
html body .orbit-dot.d2,
html body .orbit-dot.d3,
html body .orbit-dot.d4,
html body .orbit-dot.d5,
html body .orbit-dot.d6,
html body .orbit-dot.d7,
html body .orbit-dot.d8,
html body .orbit-dot.d9 {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* --- 2) COMMON NUMBER TEXT: Devanagari serif font + jyotish manuscript base style --- */
html body .orbit-dot .orbit-digit {
  color: #4b3d9a !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-family: "Georgia", "Times New Roman", "Sanskrit Text", "Tiro Devanagari Hindi", serif !important;
  font-weight: 900 !important;
  font-size: 32px !important;
  line-height: 1 !important;
  letter-spacing: -0.5px !important;
  -webkit-text-stroke: 0.4px rgba(60,30,130,0.25) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  transform-origin: center center !important;
  -webkit-transform-origin: center center !important;
  animation: vn-num-pulse 4.2s ease-in-out infinite !important;
  -webkit-animation: vn-num-pulse 4.2s ease-in-out infinite !important;
  will-change: transform !important;
}

/* --- 3) PER-PLANET (PER-NUMBER) JYOTISH AUTHENTIC COLOR GRADIENTS + HALO SHADOW + PHASE SHIFT ---

   Color reference = Navagraha / Gemstone traditional
   1 Sun    = Ruby Red + Saffron
   2 Moon   = Pearl / Silvery White
   3 Jupiter= Yellow Golden Sapphire
   4 Rahu   = Smoky Grey / Onyx Black → with purple tint (mystical)
   5 Mercury= Emerald Green
   6 Venus  = Diamond / Pink-White Rose quartz
   7 Ketu   = Mystic Royal Purple (Cat's Eye)
   8 Saturn = Indigo Neelam Blue Sapphire
   9 Mars   = Red Coral (Moonga)
*/
/* 1 = Surya (Sun) */
html body .orbit-dot.d1 .orbit-digit {
  background: linear-gradient(160deg, #FF6A1A 0%, #E9450A 50%, #B52C00 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 8px rgba(255,160,90,0.75)) drop-shadow(0 2px 4px rgba(180,60,10,0.35)) !important;
  animation-delay: 0s    !important; -webkit-animation-delay: 0s    !important;
  font-size: 36px !important; /* Surya = largest (king) */
}
/* 2 = Chandra (Moon) */
html body .orbit-dot.d4 .orbit-digit {
  background: linear-gradient(160deg, #F4F6FB 0%, #DDE2EE 38%, #B7C1D8 72%, #93A1C2 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 8px rgba(210,220,240,0.85)) drop-shadow(0 2px 3px rgba(90,110,150,0.28)) !important;
  -webkit-text-stroke: 0.4px rgba(120,135,175,0.55) !important;
  animation-delay: 0.5s  !important; -webkit-animation-delay: 0.5s  !important;
  font-size: 30px !important;
}
/* 3 = Brihaspati (Jupiter) */
html body .orbit-dot.d5 .orbit-digit {
  background: linear-gradient(160deg, #FFF2B2 0%, #F6C453 38%, #D5971B 70%, #A67109 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 10px rgba(255,210,100,0.78)) drop-shadow(0 2px 4px rgba(170,120,10,0.38)) !important;
  animation-delay: 1.1s  !important; -webkit-animation-delay: 1.1s  !important;
  font-size: 35px !important; /* Guru = second largest */
}
/* 4 = Rahu (Shadow North Node) */
html body .orbit-dot.d6 .orbit-digit {
  background: linear-gradient(160deg, #575268 0%, #37324a 35%, #201b33 68%, #0f0a20 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 7px rgba(122,92,200,0.5)) drop-shadow(0 2px 4px rgba(0,0,0,0.55)) !important;
  -webkit-text-stroke: 0.5px rgba(150,120,220,0.5) !important;
  animation-delay: 1.7s  !important; -webkit-animation-delay: 1.7s  !important;
  font-size: 28px !important;
}
/* 5 = Budha (Mercury) */
html body .orbit-dot.d2 .orbit-digit {
  background: linear-gradient(160deg, #BDF7C5 0%, #4FD576 40%, #1E9B4C 72%, #106B34 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 8px rgba(100,230,140,0.7)) drop-shadow(0 2px 4px rgba(15,100,50,0.35)) !important;
  animation-delay: 1.4s  !important; -webkit-animation-delay: 1.4s  !important;
  font-size: 30px !important;
}
/* 6 = Shukra (Venus) */
html body .orbit-dot.d7 .orbit-digit {
  background: linear-gradient(160deg, #FFF0F6 0%, #FFC3DE 38%, #FF8DBF 70%, #E35AA0 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 9px rgba(255,160,210,0.7)) drop-shadow(0 2px 4px rgba(180,60,120,0.25)) !important;
  animation-delay: 2.2s  !important; -webkit-animation-delay: 2.2s  !important;
  font-size: 31px !important;
}
/* 7 = Ketu (Shadow South Node) */
html body .orbit-dot.d8 .orbit-digit {
  background: linear-gradient(160deg, #C9B0F5 0%, #8A61D0 40%, #5939B0 70%, #301770 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 9px rgba(160,120,230,0.7)) drop-shadow(0 2px 4px rgba(60,30,130,0.4)) !important;
  animation-delay: 2.8s  !important; -webkit-animation-delay: 2.8s  !important;
  font-size: 29px !important;
}
/* 8 = Shani (Saturn) — slowest graha → darkest (neelam blue) */
html body .orbit-dot.d9 .orbit-digit {
  background: linear-gradient(160deg, #8FA3E6 0%, #4D66BF 40%, #26398A 72%, #111D58 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 8px rgba(110,130,220,0.65)) drop-shadow(0 2px 4px rgba(20,30,90,0.5)) !important;
  animation-delay: 3.4s  !important; -webkit-animation-delay: 3.4s  !important;
  font-size: 28px !important;
}
/* 9 = Mangal (Mars) */
html body .orbit-dot.d3 .orbit-digit {
  background: linear-gradient(160deg, #FFB19A 0%, #FF6952 38%, #D83526 72%, #8C180C 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 8px rgba(255,130,100,0.7)) drop-shadow(0 2px 4px rgba(140,40,20,0.45)) !important;
  animation-delay: 3.8s  !important; -webkit-animation-delay: 3.8s  !important;
  font-size: 33px !important;
}

/* --- 4) KEYFRAMES: BADA → NORMAL → CHHOTA (jyotish-breathing pulse) --- */
@keyframes vn-num-pulse {
  0%, 100% { transform: scale(1.00); opacity: 0.98; }
  20%      { transform: scale(1.28); opacity: 1.00; }
  45%      { transform: scale(1.02); opacity: 0.97; }
  70%      { transform: scale(0.88); opacity: 0.92; }
  88%      { transform: scale(1.00); opacity: 0.98; }
}
@-webkit-keyframes vn-num-pulse {
  0%, 100% { -webkit-transform: scale(1.00); opacity: 0.98; }
  20%      { -webkit-transform: scale(1.28); opacity: 1.00; }
  45%      { -webkit-transform: scale(1.02); opacity: 0.97; }
  70%      { -webkit-transform: scale(0.88); opacity: 0.92; }
  88%      { -webkit-transform: scale(1.00); opacity: 0.98; }
}

/* --- 5) ORBIT ROTATION SPEEDS: JYOTISH AUTHENTIC ORBITAL PERIODS ---

   Real relative speeds:
   - Moon (Chandra #2) = FASTEST (27 days around Sun sign) → 22s
   - Mercury (Budh #5) = FAST inner → 25s
   - Venus (Shukra #6) = 29s
   - Sun (Surya #1) = 1 year sign → 32s
   - Mars (Mangal #9) = 1.8 year → 40s
   - Rahu / Ketu (4/7) = retrograde slow nodes → 48s / 48s
   - Jupiter (Guru #3) = slow → 56s
   - Saturn (Shani #8) = SLOWEST (29 years!) → 72s

   Angles (spread ALL 9 evenly around 360° orbit ring):
   #1 Surya  → 0°       #4 Chandra → 40°    #5 Brihaspati → 80°
   #6 Rahu   → 160°     #2 Budh    → 120°   #7 Shukra      → 200°
   #9 Mangal → 240°     #8 Ketu    → 280°   #9 Shani       → 320°
   (360° / 9 = 40° per number — PERFECT even spread around full ring!)
*/

/* 1 = Surya — 0° — 32s */
html body .orbit-dot.d1 { animation: vn-dot-orbit1 32s linear infinite !important; -webkit-animation: vn-dot-orbit1 32s linear infinite !important; z-index: 99 !important; }
@keyframes vn-dot-orbit1 { 0% { transform: rotate(0deg)   translate(var(--orbit-r), 0) rotate(0deg)   translate(-50%, -50%); } 100% { transform: rotate(360deg) translate(var(--orbit-r), 0) rotate(-360deg) translate(-50%, -50%); } }
@-webkit-keyframes vn-dot-orbit1 { 0% { -webkit-transform: rotate(0deg)   translate(var(--orbit-r), 0) rotate(0deg)   translate(-50%, -50%); } 100% { -webkit-transform: rotate(360deg) translate(var(--orbit-r), 0) rotate(-360deg) translate(-50%, -50%); } }

/* 5 = Budh (Mercury) — 120° — 25s */
html body .orbit-dot.d2 { animation: vn-dot-orbit2 25s linear infinite !important; -webkit-animation: vn-dot-orbit2 25s linear infinite !important; z-index: 99 !important; }
@keyframes vn-dot-orbit2 { 0%   { transform: rotate(120deg) translate(var(--orbit-r), 0) rotate(-120deg) translate(-50%, -50%); } 100% { transform: rotate(480deg) translate(var(--orbit-r), 0) rotate(-480deg) translate(-50%, -50%); } }
@-webkit-keyframes vn-dot-orbit2 { 0% { -webkit-transform: rotate(120deg) translate(var(--orbit-r), 0) rotate(-120deg) translate(-50%, -50%); } 100% { -webkit-transform: rotate(480deg) translate(var(--orbit-r), 0) rotate(-480deg) translate(-50%, -50%); } }

/* 9 = Mangal (Mars) — 240° — 40s */
html body .orbit-dot.d3 { animation: vn-dot-orbit3 40s linear infinite !important; -webkit-animation: vn-dot-orbit3 40s linear infinite !important; z-index: 99 !important; }
@keyframes vn-dot-orbit3 { 0%   { transform: rotate(240deg) translate(var(--orbit-r), 0) rotate(-240deg) translate(-50%, -50%); } 100% { transform: rotate(600deg) translate(var(--orbit-r), 0) rotate(-600deg) translate(-50%, -50%); } }
@-webkit-keyframes vn-dot-orbit3 { 0% { -webkit-transform: rotate(240deg) translate(var(--orbit-r), 0) rotate(-240deg) translate(-50%, -50%); } 100% { -webkit-transform: rotate(600deg) translate(var(--orbit-r), 0) rotate(-600deg) translate(-50%, -50%); } }

/* 2 = Chandra (Moon) — 40° — FASTEST 22s! */
html body .orbit-dot.d4 { animation: vn-dot-orbit4 22s linear infinite !important; -webkit-animation: vn-dot-orbit4 22s linear infinite !important; z-index: 99 !important; }
@keyframes vn-dot-orbit4 { 0%   { transform: rotate(40deg)  translate(var(--orbit-r), 0) rotate(-40deg)  translate(-50%, -50%); } 100% { transform: rotate(400deg) translate(var(--orbit-r), 0) rotate(-400deg) translate(-50%, -50%); } }
@-webkit-keyframes vn-dot-orbit4 { 0% { -webkit-transform: rotate(40deg)  translate(var(--orbit-r), 0) rotate(-40deg)  translate(-50%, -50%); } 100% { -webkit-transform: rotate(400deg) translate(var(--orbit-r), 0) rotate(-400deg) translate(-50%, -50%); } }

/* 3 = Brihaspati (Jupiter/Guru) — 80° — 56s */
html body .orbit-dot.d5 { animation: vn-dot-orbit5 56s linear infinite !important; -webkit-animation: vn-dot-orbit5 56s linear infinite !important; z-index: 99 !important; }
@keyframes vn-dot-orbit5 { 0%   { transform: rotate(80deg)  translate(var(--orbit-r), 0) rotate(-80deg)  translate(-50%, -50%); } 100% { transform: rotate(440deg) translate(var(--orbit-r), 0) rotate(-440deg) translate(-50%, -50%); } }
@-webkit-keyframes vn-dot-orbit5 { 0% { -webkit-transform: rotate(80deg)  translate(var(--orbit-r), 0) rotate(-80deg)  translate(-50%, -50%); } 100% { -webkit-transform: rotate(440deg) translate(var(--orbit-r), 0) rotate(-440deg) translate(-50%, -50%); } }

/* 4 = Rahu (North Node) — 160° — 48s */
html body .orbit-dot.d6 { animation: vn-dot-orbit6 48s linear infinite !important; -webkit-animation: vn-dot-orbit6 48s linear infinite !important; z-index: 99 !important; }
@keyframes vn-dot-orbit6 { 0%   { transform: rotate(160deg) translate(var(--orbit-r), 0) rotate(-160deg) translate(-50%, -50%); } 100% { transform: rotate(520deg) translate(var(--orbit-r), 0) rotate(-520deg) translate(-50%, -50%); } }
@-webkit-keyframes vn-dot-orbit6 { 0% { -webkit-transform: rotate(160deg) translate(var(--orbit-r), 0) rotate(-160deg) translate(-50%, -50%); } 100% { -webkit-transform: rotate(520deg) translate(var(--orbit-r), 0) rotate(-520deg) translate(-50%, -50%); } }

/* 6 = Shukra (Venus) — 200° — 29s */
html body .orbit-dot.d7 { animation: vn-dot-orbit7 29s linear infinite !important; -webkit-animation: vn-dot-orbit7 29s linear infinite !important; z-index: 99 !important; }
@keyframes vn-dot-orbit7 { 0%   { transform: rotate(200deg) translate(var(--orbit-r), 0) rotate(-200deg) translate(-50%, -50%); } 100% { transform: rotate(560deg) translate(var(--orbit-r), 0) rotate(-560deg) translate(-50%, -50%); } }
@-webkit-keyframes vn-dot-orbit7 { 0% { -webkit-transform: rotate(200deg) translate(var(--orbit-r), 0) rotate(-200deg) translate(-50%, -50%); } 100% { -webkit-transform: rotate(560deg) translate(var(--orbit-r), 0) rotate(-560deg) translate(-50%, -50%); } }

/* 7 = Ketu (South Node) — 280° — 48s */
html body .orbit-dot.d8 { animation: vn-dot-orbit8 48s linear infinite !important; -webkit-animation: vn-dot-orbit8 48s linear infinite !important; z-index: 99 !important; }
@keyframes vn-dot-orbit8 { 0%   { transform: rotate(280deg) translate(var(--orbit-r), 0) rotate(-280deg) translate(-50%, -50%); } 100% { transform: rotate(640deg) translate(var(--orbit-r), 0) rotate(-640deg) translate(-50%, -50%); } }
@-webkit-keyframes vn-dot-orbit8 { 0% { -webkit-transform: rotate(280deg) translate(var(--orbit-r), 0) rotate(-280deg) translate(-50%, -50%); } 100% { -webkit-transform: rotate(640deg) translate(var(--orbit-r), 0) rotate(-640deg) translate(-50%, -50%); } }

/* 8 = Shani (Saturn) — 320° — SLOWEST 72s! (authentic Shani = slowest graha) */
html body .orbit-dot.d9 { animation: vn-dot-orbit9 72s linear infinite !important; -webkit-animation: vn-dot-orbit9 72s linear infinite !important; z-index: 99 !important; }
@keyframes vn-dot-orbit9 { 0%   { transform: rotate(320deg) translate(var(--orbit-r), 0) rotate(-320deg) translate(-50%, -50%); } 100% { transform: rotate(680deg) translate(var(--orbit-r), 0) rotate(-680deg) translate(-50%, -50%); } }
@-webkit-keyframes vn-dot-orbit9 { 0% { -webkit-transform: rotate(320deg) translate(var(--orbit-r), 0) rotate(-320deg) translate(-50%, -50%); } 100% { -webkit-transform: rotate(680deg) translate(var(--orbit-r), 0) rotate(-680deg) translate(-50%, -50%); } }

/* --- 6) RESPONSIVE: Number sizes shrink per viewport --- */
@media (max-width: 991px) {
  html body .orbit-dot { width: 68px !important; height: 68px !important; }
  html body .orbit-dot .orbit-digit               { font-size: 26px !important; }
  html body .orbit-dot.d1 .orbit-digit            { font-size: 30px !important; }
  html body .orbit-dot.d5 .orbit-digit            { font-size: 29px !important; }
  html body .orbit-dot.d3 .orbit-digit            { font-size: 28px !important; }
  html body .orbit-dot.d7 .orbit-digit            { font-size: 25px !important; }
  html body .orbit-dot.d2 .orbit-digit            { font-size: 25px !important; }
  html body .orbit-dot.d4 .orbit-digit            { font-size: 24px !important; }
  html body .orbit-dot.d8 .orbit-digit            { font-size: 24px !important; }
  html body .orbit-dot.d6 .orbit-digit            { font-size: 23px !important; }
  html body .orbit-dot.d9 .orbit-digit            { font-size: 23px !important; }
}
@media (max-width: 575px) {
  html body .orbit-dot { width: 56px !important; height: 56px !important; }
  html body .orbit-dot .orbit-digit               { font-size: 20px !important; }
  html body .orbit-dot.d1 .orbit-digit            { font-size: 24px !important; }
  html body .orbit-dot.d5 .orbit-digit            { font-size: 23px !important; }
  html body .orbit-dot.d3 .orbit-digit            { font-size: 22px !important; }
  html body .orbit-dot.d7 .orbit-digit            { font-size: 20px !important; }
  html body .orbit-dot.d2 .orbit-digit            { font-size: 20px !important; }
  html body .orbit-dot.d4 .orbit-digit            { font-size: 19px !important; }
  html body .orbit-dot.d8 .orbit-digit            { font-size: 19px !important; }
  html body .orbit-dot.d6 .orbit-digit            { font-size: 18px !important; }
  html body .orbit-dot.d9 .orbit-digit            { font-size: 18px !important; }
}

/* ===== END 9-NAVAGRAHA NUMBER-ONLY OVERRIDE ===== (DELETE ABOVE BLOCK TO ROLLBACK → 3 CIRCLES) */


/* ============================================================
   APPEND: Lo Shu REPEATED CELLS = SAME VISUAL AS PRESENT (NO SPECIAL GRADIENT!)
   User: "grid me jo repeated hai usko highlight mat karo background vaise rakho jo present ka hai"
   Keeps only the count-badge (×2 ×3 etc.) top-right orange pill as the NUMERIC indicator.
   Rollback: DELETE the 30 lines below.
   ============================================================ */
/* ===== START REPEATED = PRESENT OVERRIDE ===== */

/* --- 1) Repeated CELL → Exact same bg/border/color/shadow as Present cell (NO gradient!) --- */
html body .ls-cell.repeated {
  background: rgba(103,103,254,0.10) !important;
  border: 1.8px solid rgba(103,103,254,0.55) !important;
  color: #2A2C55 !important;
  box-shadow: 0 4px 12px rgba(103,103,254,0.10) !important;
  background-color: rgba(103,103,254,0.10) !important;
  background-image: none !important;
}

/* --- 2) Hint digit (small top-left) inside Repeated → same color as Present (no white faded!) --- */
html body .ls-cell.repeated .hint {
  color: rgba(103,103,254,0.55) !important;
}

/* --- 3) Cell digits inside Repeated → same dark PURPLE color as Present (no white, no text shadow!) --- */
html body .ls-cell.repeated .cell-digit {
  color: #3c3e7c !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* --- 4) Repeated count-badge (top-right orange pill) → KEEP exactly as Present badge (orange gradient, count still visible!) --- */
html body .ls-cell.repeated .count-badge {
  background: linear-gradient(135deg, #0a235d 0%, #FF9B3A 100%) !important;
  box-shadow: 0 3px 8px rgba(255,114,58,0.38) !important;
  color: #fff !important;
}

/* --- 5) Legend swatch "Repeated" → NOW SAME as Present swatch (no purple gradient legend swatch!) --- */
html body .ls-legend .swatch.repeated {
  background: rgba(103,103,254,0.10) !important;
  border: 1.8px solid rgba(103,103,254,0.55) !important;
  background-image: none !important;
  background-color: rgba(103,103,254,0.10) !important;
  box-shadow: none !important;
  color: #2A2C55 !important;
}

/* ===== END REPEATED = PRESENT OVERRIDE ===== (DELETE ABOVE BLOCK TO ROLLBACK GRADIENT REPEATED CELLS) */


/* ============================================================
   APPEND: Lo Shu — (1) Hide ALL ×N corner count badges.
                    (2) Match repeated digits color = same bright blue-purple as Present single digits like 5/1/6 in screenshot.
   Rollback: DELETE the 15 lines below.
   ============================================================ */
/* ===== START REMOVE BADGE + DIGIT COLOR MATCH OVERRIDE ===== */

/* --- (1) HIDE ALL ×2 / ×3 / ×N ORANGE COUNT BADGES (ALL cells no corner pill!) --- */
html body .ls-cell .count-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* --- (2) REPEATED CELL DIGITS = BRIGHT BLUE-PURPLE (exact same color as Present single digits 5/1/6 per screenshot) --- */
html body .ls-cell.repeated .cell-digit {
  color: #5850EC !important;            /* Bright blue-purple = same as cell 5 / 1 / 6 in user screenshot */
  font-weight: 800 !important;          /* same font weight */
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}
/* Also ensure PRESENT:not(repeated) single digit also stays same bright blue (consistent) */
html body .ls-cell.present:not(.repeated) .cell-digit {
  color: #5850EC !important;
  font-weight: 800 !important;
}

/* ===== END REMOVE BADGE + DIGIT COLOR MATCH OVERRIDE ===== */


/* ============================================================
   APPEND: Hero Category Text Input → ALWAYS UPPERCASE (CAPS LOCK VISUAL + HTML5 ATTRS)
   Rollback: DELETE the 12 lines below.
   ============================================================ */
/* ===== START UPPERCASE INPUT OVERRIDE ===== */

/* VISUAL: Render any typed text as UPPERCASE on screen (for all categories). */
html body .vn-field-input.vn-input-uppercase {
  text-transform: uppercase !important;
  letter-spacing: 0.2px !important;
  font-weight: 600 !important;
}
/* Also ensure the placeholder still looks natural (not necessarily all caps) */
html body .vn-field-input.vn-input-uppercase::placeholder {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
  opacity: 0.65 !important;
}
/* iPhone Safari extra: iOS respects autocapitalize via this rule too */
@supports (-webkit-touch-callout: none) {
  html body .vn-field-input.vn-input-uppercase {
    -webkit-text-transform: uppercase !important;
  }
}

/* ===== END UPPERCASE INPUT OVERRIDE ===== */


/* ============================================================
   APPEND: Lo Shu Grid — (1) BIGGER CELL DIGIT FONT SIZES
                          (2) TIGHTER GAP between repeated digits (less spacing between 2 2 / 6 6 etc.)
   Rollback: DELETE 40 lines below.
   ============================================================ */
/* ===== START BIGGER DIGITS + TIGHT GAP OVERRIDE ===== */

/* --- 1) Cell digits WRAPPER: reduce GAP (tight spacing) between multiple repeated digits --- */
html body .ls-cell .cell-digits-wrap {
  gap: 1px 4px !important;       /* OLD gap 2px 4px → NEW 1px vertical 4px horizontal (tighter) */
  padding: 10px 4px 6px 4px !important;  /* less padding → more room inside cell for big digits! */
  grid-auto-flow: row !important;
}

/* --- 2a) REPEATED digits: BIGGER FONT + tight letter spacing! (old 22px → NOW 30px desktop) --- */
html body .ls-cell.repeated .cell-digit {
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
}
/* --- 2b) SINGLE present digits: EVEN BIGGER FONT BOLD CENTER (old 30px → NOW 40px desktop!) --- */
html body .ls-cell.present:not(.repeated) .cell-digit {
  font-size: 40px !important;
  font-weight: 800 !important;
  grid-column: 1 / -1 !important;
  line-height: 1.0 !important;
  letter-spacing: -0.5px !important;
}

/* --- 3) Hint numerals (small faint 1..9 top-left) also slightly bigger so visible next to big numbers --- */
html body .ls-cell .hint {
  font-size: 12px !important;
  top: 5px !important;
  left: 7px !important;
  opacity: 0.55 !important;
}

/* --- 4) RESPONSIVE: Tablet 768px --- */
@media (max-width: 768px) {
  html body .ls-cell.repeated .cell-digit         { font-size: 24px !important; } /* OLD 18 → NEW 24 */
  html body .ls-cell.present:not(.repeated) .cell-digit { font-size: 32px !important; } /* OLD 26 → NEW 32 */
  html body .ls-cell .cell-digits-wrap { gap: 0 3px !important; padding: 8px 3px 5px 3px !important; }
  html body .ls-cell .hint { font-size: 11px !important; }
}

/* --- 5) RESPONSIVE: Mobile 575px --- */
@media (max-width: 575px) {
  html body .ls-cell.repeated .cell-digit         { font-size: 20px !important; } /* OLD 15 → NEW 20 */
  html body .ls-cell.present:not(.repeated) .cell-digit { font-size: 26px !important; } /* OLD 22 → NEW 26 */
  html body .ls-cell .cell-digits-wrap { gap: 0 2px !important; padding: 6px 2px 4px 2px !important; }
  html body .ls-cell .hint { font-size: 10px !important; }
}

/* ===== END BIGGER DIGITS + TIGHT GAP OVERRIDE ===== (DELETE ABOVE BLOCK TO ROLLBACK) */

/* ============================================================
   APPEND: THEME RECOLOR (Yellow #FFCC00 + Blue #0062A0)
   + ORBIT SAME-SPEED FIX (all 9 dots → 45s, evenly spaced)
   Rollback: DELETE the block below.
   ============================================================ */
/* ===== START YELLOW/BLUE THEME + ORBIT FIX ===== */

/* --- ORBIT: same-speed (45s) override REMOVED — user wants original
       authentic per-graha speeds back (22s → 72s, dots drift ahead/behind).
       Speeds now come from the 9-NAVAGRAHA block above (d1=32s … d9=72s). --- */

/* --- THEME: Body background — plain white --- */
html body {
  background: #ffffff !important;
}

/* --- Theme buttons: BLUE bg + YELLOW text --- */
html body .theme_btn,
html body .vn-pill-btn {
  background: linear-gradient(135deg, #1e72ff 0%, #0b55d8 55%, #0a44c4 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  box-shadow:
    0 14px 30px rgba(11, 85, 216, 0.28),
    0 3px 10px rgba(11, 85, 216, 0.18),
    0 0 0 2px rgba(255, 204, 0, 0.12) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}
html body .theme_btn i,
html body .vn-pill-btn i {
  color: #ffcc00 !important;
}
html body .theme_btn:hover,
html body .vn-pill-btn:hover {
  background: linear-gradient(135deg, #2a7dff 0%, #125fe4 55%, #0c4ccc 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 18px 34px rgba(11, 85, 216, 0.34),
    0 6px 14px rgba(11, 85, 216, 0.22),
    0 0 0 2px rgba(255, 204, 0, 0.16) !important;
}
html body .theme_btn:focus,
html body .theme_btn:active,
html body .vn-pill-btn:focus,
html body .vn-pill-btn:active {
  color: #ffffff !important;
  box-shadow:
    0 14px 30px rgba(11, 85, 216, 0.28),
    0 3px 10px rgba(11, 85, 216, 0.18),
    0 0 0 3px rgba(255, 204, 0, 0.20) !important;
}

/* --- Lo Shu header: blue gradient --- */
html body .ls-header {
  background: linear-gradient(135deg, #1e72ff 0%, #0b55d8 55%, #0a44c4 100%) !important;
}

/* --- Section titles: blue --- */
html body .section-title h2,
html body .section-title h5 {
  color: #0ba0e7 !important;
}

html body .section-title p,
html body .info-section .chart-box ul li,
html body .info-section.text-center p {
  color: #0A235D !important;
}

html body .info-section.text-center h3 {
  color: #0ba0e7 !important;
}

/* --- Footer / section background --- */
html body .footer-bg,
html body .grey-bg-fot {
  background: #ffffff !important;
}

/* --- Cards border accent --- */
html body .vn-card {
  border-color: rgba(0,98,160,0.25) !important;
}

/* --- Contact form inputs focus --- */
html body #contact input:focus,
html body #contact textarea:focus {
  border-color: #0062A0 !important;
  box-shadow: 0 0 0 3px rgba(0,98,160,0.15) !important;
}

/* --- Mobile header brand: compact lockup without squeeze --- */
@media (max-width: 991.98px) {
  html body #theme-menu-one {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  html body #theme-menu-one .vn-brand-lockup {
    gap: 5px !important;
  }

  html body #theme-menu-one .vn-brand-mark {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  html body #theme-menu-one .vn-brand-wordmark {
    height: 28px !important;
    margin-left: 0 !important;
    max-width: calc(100vw - 150px) !important;
    width: auto !important;
  }

  html body #theme-menu-one .vn-mobile-menu {
    position: relative;
  }

  html body #theme-menu-one .vn-mobile-menu-toggle {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(11, 35, 93, 0.12);
    background: #ffffff;
    color: #0a235d;
    box-shadow: 0 10px 24px rgba(11, 35, 93, 0.10);
    cursor: pointer;
    padding: 0;
  }

  html body #theme-menu-one .vn-mobile-menu-toggle i {
    font-size: 18px;
  }

  html body #theme-menu-one .vn-mobile-menu.is-open .vn-mobile-menu-panel {
    display: flex;
  }

  html body #theme-menu-one .vn-mobile-menu-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 230px;
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(11, 160, 231, 0.14);
    box-shadow: 0 18px 40px rgba(11, 35, 93, 0.14);
    z-index: 40;
  }

  html body #theme-menu-one .vn-mobile-menu-panel a {
    color: #0a235d;
    text-decoration: none;
    font-weight: 700;
    border-radius: 12px;
    padding: 12px 14px;
  }

  html body #theme-menu-one .vn-mobile-menu-panel a:hover {
    background: rgba(244, 224, 40, 0.18);
    color: #0a235d;
  }

  html body #theme-menu-one .vn-mobile-menu-panel .vn-mobile-menu-cta {
    margin-top: 6px;
    background: linear-gradient(135deg, #1e72ff 0%, #0b55d8 55%, #0a44c4 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
  }

  html body #theme-menu-one .vn-mobile-menu-panel .vn-mobile-menu-cta i {
    color: #ffcc00;
  }
}

/* ===== END YELLOW/BLUE THEME + ORBIT FIX ===== (DELETE ABOVE BLOCK TO ROLLBACK) */