/* Васту-компас. Прогрессивное улучшение: без JS работает SSR-мандала и
   текстовый список секторов. Скоуп .vastu-* чтобы не задеть общий mv-new. */
.vastu-stage { margin: 0 0 1.25rem; }

.vastu-canvas {
  position: relative;
  max-width: 460px;
  margin: 0 auto 1rem;
  touch-action: none;
}
.vastu-mandala {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
}

.vastu-plan-img { opacity: .55; pointer-events: none; }

.vastu-sec {
  cursor: pointer;
  transition: filter .12s ease, opacity .12s ease;
  transform-box: fill-box;
  outline: none;
}
.vastu-sec:hover { filter: brightness(1.06) saturate(1.08); }
.vastu-sec:focus-visible { stroke: #6d28d9; stroke-width: 2.5; }
.vastu-sec.is-active { filter: brightness(1.1) saturate(1.15); stroke: #6d28d9; stroke-width: 2.5; }

.vastu-sec-lbl {
  font: 600 11px/1 system-ui, sans-serif;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  user-select: none;
}
.vastu-center { cursor: pointer; outline: none; }
.vastu-center:focus-visible { stroke: #6d28d9; stroke-width: 2.5; }
.vastu-center.is-active { stroke: #6d28d9; stroke-width: 2.5; }
.vastu-center-lbl {
  font: 600 12px/1 system-ui, sans-serif;
  text-anchor: middle;
  pointer-events: none;
}
.vastu-rose {
  font: 700 13px/1 system-ui, sans-serif;
  text-anchor: middle;
  fill: #6b7280;
  pointer-events: none;
}

.vastu-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem .9rem;
  margin: 0 auto 1rem;
  max-width: 560px;
}
.vastu-tools label {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .82rem;
  color: #4b5563;
}
.vastu-tools .vastu-file { grid-column: 1 / -1; }
.vastu-tools input[type="range"] { width: 100%; accent-color: #7c3aed; }
.vastu-tools input[type="file"] {
  font-size: .82rem;
  padding: .35rem;
  border: 1px dashed #c4b5fd;
  border-radius: .5rem;
  background: #faf5ff;
}
.vastu-tools select {
  padding: .4rem .5rem;
  border: 1px solid #ddd6fe;
  border-radius: .5rem;
  background: #fff;
  font-size: .9rem;
}
#vastuRotVal { font-weight: 600; color: #6d28d9; }

.vastu-marker {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  justify-content: center;
  margin: 0 auto .75rem;
  max-width: 560px;
}
.vastu-marker select {
  flex: 1 1 40%;
  min-width: 140px;
  padding: .45rem .5rem;
  border: 1px solid #ddd6fe;
  border-radius: .5rem;
  background: #fff;
  font-size: .9rem;
}
.vastu-add {
  padding: .45rem 1rem;
  border: 0;
  border-radius: .5rem;
  background: #7c3aed;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.vastu-add:hover { background: #6d28d9; }

.vastu-marklist {
  list-style: none;
  margin: 0 auto 1rem;
  padding: 0;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.vastu-mark {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .45rem .7rem;
  background: #f5f3ff;
  border: 1px solid #ede9fe;
  border-radius: .5rem;
  font-size: .9rem;
}
.vastu-del {
  border: 0;
  background: transparent;
  color: #9ca3af;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 .25rem;
}
.vastu-del:hover { color: #ef4444; }

.vastu-alt {
  max-width: 560px;
  margin: 0 auto 1rem;
  font-size: .88rem;
  color: #4b5563;
}
.vastu-alt summary { cursor: pointer; color: #6d28d9; font-weight: 600; }
.vastu-alt ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.vastu-alt li { margin: .2rem 0; }

@media (max-width: 480px) {
  .vastu-tools { grid-template-columns: 1fr; }
}