/* body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(to bottom, #fdf6f0, #f7e9f0);
      margin: 0;
    } */
    .astro-container {
      position: absolute;
      top: 150px;
      left: 60px;
      display: flex;
      flex-direction: column;
      gap: 15px;
      align-items: flex-start;
      z-index: 2000;
    }

    .astro-card {
      background: rgba(20, 10, 20, 0.75) !important;
      border: 1.5px solid rgba(245, 158, 11, 0.4) !important;
      border-radius: 20px !important;
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
      width: 100% !important;
      max-width: 100% !important;
      padding: 24px 26px !important;
      text-align: left !important;
      display: none;
      box-sizing: border-box !important;
    }

    .tp-content .astro-card,
    .tp-card .astro-card,
    .astro-card.show {
      display: block !important;
    }

    .astro-card h1,
    .astro-card h4 {
      font-size: 1.25rem !important;
      font-weight: 800 !important;
      color: #ffb74d !important;
      margin-bottom: 14px !important;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    }

    .input-group,
    .bsunrise-input-group {
      margin-bottom: 18px !important;
    }

    .astro-card label,
    .astro-card .input-group label,
    .astro-card .bsunrise-input-group label,
    .tp-card label {
      display: block !important;
      margin-bottom: 8px !important;
      font-weight: 800 !important;
      color: #ffe0b2 !important;
      font-size: 15px !important;
      letter-spacing: 0.4px !important;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
    }

    .astro-card input[type="number"],
    .astro-card input[type="date"],
    .astro-card input[type="date"].bsunrise-date,
    .tp-card input[type="number"],
    .tp-card input[type="date"] {
      width: 100% !important;
      padding: 12px 14px !important;
      border-radius: 10px !important;
      border: 1.5px solid #f59e0b !important;
      outline: none !important;
      font-size: 16px !important;
      font-weight: 700 !important;
      box-sizing: border-box !important;
      background: #140902 !important;
      color: #ffffff !important;
      transition: all 0.25s ease !important;
    }

    .astro-card input[type="number"]::placeholder,
    .tp-card input::placeholder {
      color: #fbbf24 !important;
      opacity: 0.9 !important;
      font-weight: 600 !important;
    }

    .astro-card input:focus,
    .astro-card input[type="date"].bsunrise-date:focus,
    .tp-card input:focus {
      border-color: #fbbf24 !important;
      box-shadow: 0 0 0 3.5px rgba(251, 191, 36, 0.3) !important;
      background: #1d0d03 !important;
    }

    .time-grid {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 10px !important;
    }

    .astro-card button,
    .astro-card .calc-btn,
    .astro-card .bsunrise-btn,
    .tp-card button,
    .tp-card .calc-btn,
    .tp-card .bsunrise-btn {
      background: linear-gradient(90deg, #e65100 0%, #ff9800 100%) !important;
      color: #ffffff !important;
      padding: 13px 20px !important;
      border: none !important;
      border-radius: 10px !important;
      cursor: pointer !important;
      font-size: 16px !important;
      font-weight: 800 !important;
      width: 100% !important;
      transition: all 0.3s ease !important;
      margin-top: 8px !important;
      box-shadow: 0 4px 18px rgba(230, 81, 0, 0.35) !important;
    }

    .astro-card button:hover,
    .astro-card .calc-btn:hover,
    .astro-card .bsunrise-btn:hover,
    .tp-card button:hover {
      background: linear-gradient(90deg, #ff9800 0%, #e65100 100%) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 8px 24px rgba(230, 81, 0, 0.5) !important;
    }

    .astro-card .result-box,
    .astro-card .bsunrise-result-box,
    .tp-card .result-box,
    .tp-card .bsunrise-result-box {
      margin-top: 18px !important;
      padding: 16px 18px !important;
      background: rgba(251, 191, 36, 0.1) !important;
      border: 1.5px solid rgba(251, 191, 36, 0.4) !important;
      border-radius: 12px !important;
      text-align: left !important;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    }

    .astro-card .result-box h2,
    .astro-card .bsunrise-result-box h2,
    .tp-card .result-box h2 {
      margin: 0 0 8px !important;
      font-size: 1.1rem !important;
      color: #ffb74d !important;
      font-weight: 800 !important;
    }

    .astro-card .result-box p,
    .astro-card .bsunrise-result-box p,
    .tp-card .result-box p {
      font-size: 1.05rem !important;
      color: #ffffff !important;
      font-weight: 700 !important;
      margin: 0 !important;
    }

/* Light Theme Overrides */
[data-theme="light"] .astro-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .astro-card h1,
[data-theme="light"] .astro-card h4 {
  color: #d97706 !important;
  text-shadow: none !important;
}

[data-theme="light"] .astro-card label,
[data-theme="light"] .astro-card .input-group label,
[data-theme="light"] .astro-card .bsunrise-input-group label,
[data-theme="light"] .tp-card label {
  color: #1e293b !important;
  text-shadow: none !important;
}

[data-theme="light"] .astro-card input[type="number"],
[data-theme="light"] .astro-card input[type="date"],
[data-theme="light"] .tp-card input[type="number"],
[data-theme="light"] .tp-card input[type="date"] {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .astro-card input[type="number"]::placeholder,
[data-theme="light"] .tp-card input::placeholder {
  color: #64748b !important;
}

[data-theme="light"] .result-box,
[data-theme="light"] .bsunrise-result-box {
  background: #fffbe6 !important;
  border-color: #fde68a !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05) !important;
}

[data-theme="light"] .result-box h2,
[data-theme="light"] .bsunrise-result-box h2 {
  color: #b45309 !important;
}

[data-theme="light"] .result-box p,
[data-theme="light"] .bsunrise-result-box p {
  color: #1e293b !important;
}
#buttonrow .toggle-btn {
  padding: 10px 16px;
  border: none;                 /* 🔹 remove box border */
  border-radius: 20px;          /* 🔹 pill shape */
                 /* 🔹 text contrast */
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s ease;
}

#buttonrow {
  display: flex;
  gap: 10px;
  justify-content: center;   /* 🔹 center horizontally */
  align-items: center;       /* 🔹 center vertically (if multi-line) */
  flex-wrap: wrap;           /* allow wrapping if needed */
}

/* 📱 Mobile view */
@media (max-width: 600px) {
  #buttonrow {
    flex-direction: column;     
    align-items: stretch;       
    margin-left: 0;
    width: 100%;
  }

  #buttonrow .toggle-btn {
    width: 100%;                /* 🔹 full width, but still button look */
  }
}


@media (max-width: 600px) {
  .astro-container {
    position: static;        /* 🔹 let it flow naturally */
    top: auto;
    left: auto;
    width: 100%;
    padding: 10px;
    align-items: center;     /* 🔹 center the cards */
  }

  .astro-card {
    width: 100%;             /* 🔹 full width on mobile */
    max-width: 420px;        /* 🔹 prevent overly wide */
    padding: 15px;
    text-align: left;        /* 🔹 better readability */
  }
}