/* «Натальная карта» и «Небо онлайн» (templates/natal.php, templates/nebo.php): всё в области .astro */
.astro { position: relative; }
.astro .k { color: var(--parch-dim); font-size: 14px; }
.astro .a-hero { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 40px; align-items: center; padding: 40px 0 20px; }
.astro h1 { font: 600 clamp(38px, 5vw, 64px)/1.02 var(--ff-disp); color: #fff; margin: 10px 0 14px; }
.astro .a-lead { color: var(--parch-dim); font-size: 17px; line-height: 1.55; margin: 0 0 22px; }
.astro .a-form { display: grid; gap: 12px; }
.astro .a-form label { display: grid; gap: 5px; font: 14px var(--ff-caps); letter-spacing: .06em; color: var(--parch-dim); }
.astro .a-form label small { text-transform: none; letter-spacing: 0; opacity: .7; }
.astro .a-two { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
.astro .a-check { display: flex !important; align-items: center; gap: 8px; font: 15px var(--ff) !important; letter-spacing: 0 !important; color: var(--parch) !important; cursor: pointer; }
.astro .a-check input { width: 18px; height: 18px; accent-color: var(--gold); }
.astro .a-place { position: relative; }
.astro .a-sugg { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 4px; max-height: 320px; overflow: auto; border-radius: 14px;
  background: rgba(18,12,46,.97); border: 1px solid var(--line); box-shadow: 0 20px 40px -12px #000; backdrop-filter: blur(10px); }
.astro .a-sugg button { display: block; width: 100%; text-align: left; padding: 9px 14px; border: 0; background: none; color: var(--parch); font: 15px var(--ff); cursor: pointer; }
.astro .a-sugg button:hover { background: rgba(226,184,98,.12); }
.astro .a-sugg button small { color: var(--parch-dim); }
.astro .a-sugg .more { color: var(--gold-hi); border-top: 1px solid var(--line-soft); }
.astro .a-sugg .k { padding: 10px 14px; }
.astro .a-tz { margin: -4px 0 2px; font-size: 13px; }

/* Сцена с картой: лёгкий 3D-наклон за курсором и мягкое свечение */
.astro .a-stage { position: relative; perspective: 1400px; }
.astro .a-chart { display: block; width: 100%; max-width: 760px; aspect-ratio: 1; margin: 0 auto; border-radius: 50%;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out;
  box-shadow: 0 0 80px -10px rgba(120,90,255,.35), 0 0 160px -40px rgba(255,190,90,.25); }
.astro.landed .a-chart { animation: aBreath 6s ease-in-out infinite; }
@keyframes aBreath { 50% { box-shadow: 0 0 110px -6px rgba(140,100,255,.5), 0 0 200px -40px rgba(255,190,90,.35); } }
.a-tip { position: fixed; z-index: 1000; max-width: 300px; padding: 12px 14px; border-radius: 12px; pointer-events: none;
  background: rgba(14,10,38,.96); border: 1px solid var(--line); color: var(--parch); font-size: 14px; line-height: 1.45; box-shadow: 0 16px 40px -12px #000; }
.a-tip b { color: var(--gold-hi); } .a-tip span { color: var(--parch-dim); }

/* Результат: появляется после «приземления» карты */
.astro[data-mode="natal"] .a-result { display: none; }
.astro.has-chart .a-result { display: block; animation: aRise .8s ease-out both; }
@keyframes aRise { from { opacity: 0; transform: translateY(24px); } }
.astro .a-result { padding: 10px 0 30px; scroll-margin-top: 90px; }
.astro .a-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.astro .a-head h2 { font: 600 clamp(28px, 3vw, 40px) var(--ff-disp); color: #fff; margin: 0; }
.astro .a-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.astro .a-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line-soft); margin-bottom: 20px; }
.astro .a-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--parch-dim); font: 16px var(--ff-caps); letter-spacing: .06em; padding: 10px 14px; cursor: pointer; }
.astro .a-tabs button.on { color: var(--gold-hi); border-color: var(--gold); }
.astro .a-pane h3, .astro .a-result h3 { font: 600 14px var(--ff-caps); letter-spacing: .18em; color: var(--sec, var(--gold)); text-transform: uppercase; margin: 22px 0 10px; }
.astro .a-big3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.astro .a-card { padding: 18px 20px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line-soft); }
.astro .a-card p { margin: 8px 0 0; line-height: 1.55; }
.astro .a-cap { font: 600 13px var(--ff-caps); letter-spacing: .14em; color: var(--gold); text-transform: uppercase; }
.astro .a-deg { font: 600 24px var(--ff-disp); color: #fff; margin-top: 4px; }
.astro .a-bars { display: grid; gap: 8px; max-width: 560px; }
.astro .a-bars div { display: grid; grid-template-columns: 80px 1fr 44px; gap: 10px; align-items: center; }
.astro .a-bars i { height: 10px; border-radius: 999px; background: rgba(255,255,255,.06); position: relative; overflow: hidden; }
.astro .a-bars i::after { content: ''; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: var(--c); box-shadow: 0 0 12px var(--c); animation: aGrow 1.4s ease-out both; }
@keyframes aGrow { from { width: 0; } }
.astro .a-tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.astro .a-tbl td, .astro .a-tbl th { padding: 7px 10px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.astro .a-tbl th { font: 600 12px var(--ff-caps); letter-spacing: .14em; color: var(--parch-dim); }
.astro .a-tbl tr[data-body] { cursor: pointer; transition: background .2s; }
.astro .a-tbl tr[data-body]:hover, .astro .a-tbl tr.on { background: rgba(226,184,98,.1); }
.astro .g { font: 20px "Segoe UI Symbol","Noto Sans Symbols 2",serif; }
.astro .r { color: #ff8a86; font-weight: 700; font-size: 13px; }
.astro .a-texts p { line-height: 1.6; padding: 6px 10px; border-radius: 10px; }
.astro .a-texts p.on { background: rgba(226,184,98,.1); }
.astro .a-asp { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.astro .a-arow { padding: 10px 14px; border-left: 3px solid var(--c); border-radius: 10px; background: rgba(255,255,255,.03); font-size: 15px; margin-bottom: 8px; }
.astro .a-arow b { color: var(--c); font-size: 17px; }
.astro .a-arow small { color: var(--parch-dim); }
.astro .a-arow p { margin: 4px 0 0; color: var(--parch-dim); font-size: 14px; line-height: 1.5; }
.astro .a-about { padding: 30px 0 10px; }
.astro .a-about .prose { max-width: 820px; margin: 0 auto; }

/* Небо онлайн */
.astro .a-now { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.astro .a-date { font: 600 26px var(--ff-disp); color: #fff; }
.astro .a-moon { display: flex; align-items: center; gap: 8px; color: var(--parch-dim); }
.astro .a-moon b { color: var(--parch); }
.astro .moon { width: 22px; height: 22px; border-radius: 50%; background: #1b1640; position: relative; overflow: hidden; box-shadow: 0 0 10px rgba(230,234,255,.3); }
.astro .moon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #e6eaff;
  clip-path: inset(0 calc((1 - var(--lit)) * 100%) 0 0); transform: scaleX(var(--side)); }
.astro .a-ctrl { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.astro .a-ctrl .on { background: var(--gold); color: #1a1030; }
.astro .a-range { display: grid; gap: 4px; font-size: 14px; color: var(--parch-dim); margin-bottom: 10px; }
.astro .a-range input { accent-color: var(--gold); }
.astro .a-sky-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 36px; }
.astro .a-transits { margin-top: 10px; }

@media (max-width: 960px) {
  .astro .a-hero { grid-template-columns: 1fr; }
  .astro .a-stage { order: -1; }
  .astro .a-big3, .astro .a-sky-grid { grid-template-columns: 1fr; }
}