.starmap-wrapper {
  max-width: 900px;
  margin: 0 auto 3rem;
}

.starmap-app {
  padding: 2rem 1rem 3rem;
}

.starmap-header {
  margin-bottom: 1.5rem;
}

.starmap-header h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.starmap-header p {
  max-width: 540px;
  line-height: 1.5;
  opacity: 0.85;
}

.starmap-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.starmap-controls label {
  font-size: 0.95rem;
  font-weight: 500;
}

.starmap-date-group {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.starmap-date-input {
  width: 90px;
}

.starmap-date-input input {
  width: 100%;
  padding: 0.6rem 0.9rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(148,163,184,0.6);
  background: rgba(248,250,252,0.95);
  font-size: 1rem;
  text-align: center;
}

.starmap-date-input input:focus {
  outline: none;
  border-color: #22c55e;
  box-shadow: 0 0 0 1px rgba(34,197,94,0.4);
}

.starmap-buttons {
  display: flex;
  gap: 0.75rem;
  margin-left: auto;
}

.starmap-btn-primary,
.starmap-btn-secondary {
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
}

.starmap-btn-primary {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #ecfdf5;
  box-shadow: 0 15px 30px rgba(22,163,74,0.35);
}

.starmap-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 35px rgba(22,163,74,0.4);
}

.starmap-btn-secondary {
  background: rgba(248,250,252,0.95);
  color: #4b5563;
  border: 1px solid rgba(148,163,184,0.8);
}

.starmap-btn-secondary:hover {
  background: #f9fafb;
}

.starmap-error {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #b91c1c;
}

.starmap-card {
  margin-top: 2rem;
  padding: 2rem 1rem;
  border-radius: 1.75rem;
  background: radial-gradient(circle at top left, #f9fafb, #e5e7eb);

  box-shadow:
    0 22px 45px rgba(15,23,42,0.25),
    inset 0 0 0 1px rgba(148,163,184,0.35);
}

.starmap-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 900px) {
  .starmap-layout {
    flex-direction: column;
  }
}

.starmap-svg-shell {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ТУК контролираш размера на ЦЯЛАТА звезда */
#starSvg {
  width: 700px;
  height: 700px;
  max-width: 100%;
}

/* таблица с числа */
#numbersPanel {
  margin-top: 2rem;
  border-radius: 1.25rem;
  padding: 1.5rem 1.75rem;
  background: rgba(15,23,42,0.9);
  color: #e5e7eb;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.5rem 1.25rem;
}

#numbersPanel .row {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
}

#numbersPanel .label {
  opacity: 0.78;
}

#numbersPanel .value {
  font-weight: 600;
}

/* ============================================================================
   StarMap reveal animation
   Контролира само появата; не мести геометрията.
============================================================================ */

#starSvg .sm-anim-node {
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 320ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

#starSvg .sm-anim-hidden {
  opacity: 0;
  transform: scale(0.58);
}

#starSvg .sm-anim-show {
  opacity: 1;
  transform: scale(1);
}

#starSvg .sm-anim-pulse {
  animation: smNodePulse 520ms ease-out 1;
}

@keyframes smNodePulse {
  0% {
    transform: scale(0.68);
    opacity: 0;
  }
  58% {
    transform: scale(1.13);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}



.starmap-hidden{
  display:none;
}

.starmap-card.starmap-visible{
  display:block;
  animation: starmapFadeIn 420ms ease;
}

.starmap-bottom-actions{
  margin-top:1.5rem;
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}

@keyframes starmapFadeIn{
  from{
    opacity:0;
    transform:translateY(18px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ============================================================================
   StarMap calculation flow refinements
============================================================================ */

.starmap-controls {
  justify-content: flex-start;
}

.starmap-buttons {
  margin-left: 0;
}

#starmapHeader.starmap-hidden,
#starmapBottomActions.starmap-hidden,
#starmapCard.starmap-hidden {
  display: none;
}

#starmapBottomActions {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}