.yae-astrology {
  --yae-night: #0b0d27;
  --yae-indigo: #191744;
  --yae-violet: #4b347c;
  --yae-gold: #f4d58a;
  --yae-gold-deep: #c99a43;
  --yae-moon: #fff8e8;
  --yae-ink: #f8f5ff;
  --yae-muted: #c7c1dc;
  --yae-chart-color: #f4d58a;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 1.5rem auto;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid rgba(244, 213, 138, .34);
  border-radius: 28px;
  color: var(--yae-ink);
  background:
    radial-gradient(circle at 10% 5%, rgba(116, 82, 180, .38), transparent 34%),
    radial-gradient(circle at 92% 25%, rgba(56, 85, 165, .3), transparent 32%),
    linear-gradient(145deg, var(--yae-night), var(--yae-indigo) 58%, #10132f);
  box-shadow: 0 24px 70px rgba(5, 6, 25, .28);
  font-size: 17px;
  font-family: "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.7;
}

.yae-astrology *, .yae-astrology *::before, .yae-astrology *::after { box-sizing: border-box; }
.yae-astrology button, .yae-astrology input, .yae-astrology select { font: inherit; }
.yae-astrology__stars { position: absolute; inset: 0; z-index: -1; opacity: .46; background-image: radial-gradient(circle, #fff 1px, transparent 1.4px), radial-gradient(circle, rgba(244,213,138,.8) 1px, transparent 1.4px); background-position: 0 0, 21px 31px; background-size: 67px 67px, 89px 89px; }

.yae-astrology__app-header, .yae-astrology__hero, .yae-astrology__form-heading, .yae-astrology__chart-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.yae-astrology__app-header { padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.yae-astrology__brand { display: flex; align-items: center; gap: .75rem; }
.yae-astrology__brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(244,213,138,.55); border-radius: 50%; color: var(--yae-gold); box-shadow: 0 0 24px rgba(244,213,138,.2); }
.yae-astrology__brand small, .yae-astrology__brand strong { display: block; }
.yae-astrology__brand small { color: var(--yae-muted); font-size: 13px; letter-spacing: .16em; }
.yae-astrology__brand strong { color: var(--yae-moon); font-size: 18px; letter-spacing: .06em; }
.yae-astrology__period-nav { display: flex; flex-wrap: wrap; gap: .4rem; }
.yae-astrology__period-button { padding: .48rem .8rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: var(--yae-muted); background: rgba(255,255,255,.05); cursor: pointer; transition: .2s ease; }
.yae-astrology__period-button:hover, .yae-astrology__period-button[aria-pressed="true"] { color: #171127; border-color: var(--yae-gold); background: var(--yae-gold); }

.yae-astrology__hero { justify-content: flex-start; margin: clamp(1.4rem, 4vw, 2.5rem) 0 1rem; }
.yae-astrology__orb { flex: 0 0 92px; width: 92px; height: 92px; padding: 12px; border: 1px solid rgba(244,213,138,.36); border-radius: 50%; box-shadow: inset 0 0 25px rgba(244,213,138,.12), 0 0 35px rgba(110,79,183,.24); }
.yae-astrology__orb span { display: block; width: 100%; height: 100%; border-radius: inherit; background: radial-gradient(circle at 35% 32%, #fff, #f4d58a 12%, #9e79da 38%, #29204e 69%, #111226); box-shadow: 0 0 30px rgba(244,213,138,.28); }
.yae-astrology__eyebrow, .yae-astrology__chart-eyebrow { margin: 0 0 .2rem; color: var(--yae-gold); font-size: 14px; letter-spacing: .18em; }
.yae-astrology__hero h2 { margin: 0; color: var(--yae-moon); font-size: clamp(30px, 5vw, 48px); line-height: 1.25; }
.yae-astrology__hero h2 small { display: inline-block; padding: .22rem .55rem; border: 1px solid rgba(244,213,138,.45); border-radius: 999px; color: var(--yae-gold); font-size: 14px; vertical-align: middle; }
.yae-astrology__intro { margin: .55rem 0 0; color: var(--yae-muted); }
.yae-astrology__safety { padding: .8rem 1rem; border-radius: 12px; }
.yae-astrology__safety { margin: 1rem 0; border-left: 4px solid #9cb8ff; color: #e9e6f4; background: rgba(156,184,255,.09); font-size: 16px; }

.yae-astrology__form-panel, .yae-astrology__chart-panel, .yae-astrology__interpretation { border: 1px solid rgba(255,255,255,.12); border-radius: 20px; background: rgba(255,255,255,.06); backdrop-filter: blur(10px); }
.yae-astrology__form-panel { padding: clamp(1rem, 3vw, 1.5rem); }
.yae-astrology__form-heading { margin-bottom: 1rem; }
.yae-astrology__form-heading h3, .yae-astrology__chart-header h3 { margin: 0; color: var(--yae-moon); }
.yae-astrology__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: end; }
.yae-astrology__field { min-width: 0; margin: 0; padding: 0; border: 0; }
.yae-astrology__field label, .yae-astrology__field legend { display: block; margin: 0 0 .35rem; color: #e9e5f5; font-size: 16px; font-weight: 700; }
.yae-astrology__field input[type="date"], .yae-astrology__field input[type="time"], .yae-astrology__field select { width: 100%; min-height: 48px; padding: .7rem .8rem; border: 1px solid rgba(255,255,255,.22); border-radius: 11px; color: #1d1830; background: #fff; }
.yae-astrology__field input:focus, .yae-astrology__field select:focus { outline: 3px solid rgba(244,213,138,.28); border-color: var(--yae-gold-deep); }
.yae-astrology__field input:disabled { opacity: .55; cursor: not-allowed; }
.yae-astrology__field small { display: block; min-height: 1.5em; margin-top: .35rem; color: var(--yae-muted); font-size: 14px; }
.yae-astrology__field--mode { grid-column: span 2; }
.yae-astrology__mode-options { display: flex; flex-wrap: wrap; gap: .55rem; }
.yae-astrology__mode-options label { position: relative; margin: 0; cursor: pointer; }
.yae-astrology__mode-options input { position: absolute; opacity: 0; }
.yae-astrology__mode-options span { display: block; min-width: 88px; padding: .55rem .9rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: var(--yae-muted); text-align: center; background: rgba(255,255,255,.05); }
.yae-astrology__mode-options input:checked + span { color: #171127; border-color: var(--yae-gold); background: var(--yae-gold); }
.yae-astrology__mode-options input:focus-visible + span { outline: 3px solid rgba(244,213,138,.35); }
.yae-astrology__form > button { grid-column: span 2; min-height: 52px; border: 0; border-radius: 999px; color: #171127; background: linear-gradient(90deg, #d9af55, #fff0b6, #d9af55); box-shadow: 0 10px 30px rgba(201,154,67,.2); font-weight: 800; letter-spacing: .08em; cursor: pointer; }
.yae-astrology__form > button:disabled { opacity: .6; cursor: wait; }
.yae-astrology__status { min-height: 1.7em; margin: .8rem 0; color: var(--yae-gold); text-align: center; }

.yae-astrology__summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; }
.yae-astrology__score { display: flex; min-width: 0; min-height: 118px; padding: 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; color: var(--yae-ink); background: rgba(255,255,255,.06); flex-direction: column; align-items: flex-start; text-align: left; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.yae-astrology__score:hover { transform: translateY(-2px); }
.yae-astrology__score.is-selected { border-color: var(--yae-chart-color); background: rgba(255,255,255,.1); box-shadow: 0 0 0 2px color-mix(in srgb, var(--yae-chart-color) 28%, transparent); }
.yae-astrology__score span { color: var(--yae-muted); font-size: 16px; }
.yae-astrology__score strong { color: var(--yae-moon); font-size: 34px; line-height: 1.2; }
.yae-astrology__score small { margin-top: auto; color: var(--yae-gold); font-size: 14px; }
.yae-astrology__interpretation { margin: 1rem 0; padding: 1rem 1.2rem; }
.yae-astrology__interpretation p { margin: .2rem 0; }
.yae-astrology__band { color: var(--yae-gold); font-weight: 800; }

.yae-astrology__chart-panel { margin-top: 1rem; padding: clamp(1rem, 3vw, 1.5rem); }
.yae-astrology__chart-header { align-items: flex-end; }
.yae-astrology__chart-controls { display: flex; align-items: flex-end; justify-content: flex-end; gap: .8rem; flex-wrap: wrap; }
.yae-astrology__period-nav--chart { flex-wrap: nowrap; }
.yae-astrology__period-nav--chart .yae-astrology__period-button { padding: .48rem .7rem; }
.yae-astrology__chart-filter { color: var(--yae-muted); font-size: 15px; }
.yae-astrology__chart-filter select { display: block; min-width: 180px; margin-top: .25rem; padding: .5rem .65rem; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; color: #1c1730; background: #fff; }
.yae-astrology__chart-metric { display: flex; align-items: baseline; gap: .35rem; margin-top: .8rem; }
.yae-astrology__chart-metric strong { color: var(--yae-chart-color); font-size: clamp(34px, 7vw, 52px); }
.yae-astrology__chart-metric small { margin-left: .45rem; color: var(--yae-muted); }
.yae-astrology__chart { min-height: 260px; margin-top: .4rem; }
.yae-astrology__chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.yae-grid { stroke: rgba(255,255,255,.1); stroke-width: 1; }
.yae-grid--average { stroke: rgba(244,213,138,.28); stroke-dasharray: 5 5; }
.yae-line { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 5px currentColor); }
.yae-chart-area { opacity: .88; }
.yae-chart-point { stroke: #14132d; stroke-width: 2; }
.yae-axis-label { fill: #d1cce3; font-size: 13px; }
.yae-astrology__chart-caption { margin: .4rem 0 0; color: var(--yae-muted); font-size: 14px; }

.yae-astrology__table-wrap { width: 100%; overflow-x: hidden; margin-top: 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; }
.yae-astrology__table-wrap table { width: 100%; min-width: 0; margin: 0; border-collapse: collapse; table-layout: fixed; color: var(--yae-ink); background: rgba(8,9,31,.42); }
.yae-astrology__table-wrap th, .yae-astrology__table-wrap td { padding: .7rem clamp(.3rem, 1.2vw, .65rem); border-bottom: 1px solid rgba(255,255,255,.08); line-height: 1.45; text-align: center; white-space: normal; overflow-wrap: anywhere; }
.yae-astrology__table-wrap thead th { position: sticky; top: 0; color: var(--yae-gold); background: #17163b; font-size: 14px; }
.yae-astrology__table-wrap thead th:first-child { width: 22%; }
.yae-astrology__table-wrap thead th:not(:first-child) { width: 19.5%; }
.yae-astrology__table-wrap tbody th { color: #e8e4f4; text-align: left; white-space: nowrap; }
.yae-astrology__privacy { margin: 1rem 0 0; color: var(--yae-muted); font-size: 14px; text-align: center; }
.yae-astrology.is-calculating .yae-astrology__orb { animation: yae-core-pulse 1.1s ease-in-out infinite alternate; }
@keyframes yae-core-pulse { to { transform: scale(1.04); box-shadow: inset 0 0 30px rgba(244,213,138,.2), 0 0 46px rgba(110,79,183,.42); } }

@media (max-width: 760px) {
  .yae-astrology { padding: 1rem; border-radius: 20px; }
  .yae-astrology__app-header, .yae-astrology__form-heading, .yae-astrology__chart-header { align-items: flex-start; flex-direction: column; }
  .yae-astrology__hero { align-items: flex-start; }
  .yae-astrology__orb { flex-basis: 68px; width: 68px; height: 68px; padding: 8px; }
  .yae-astrology__form { grid-template-columns: 1fr; }
  .yae-astrology__field--mode, .yae-astrology__form > button { grid-column: auto; }
  .yae-astrology__summary { grid-template-columns: 1fr; }
  .yae-astrology__chart-controls { width: 100%; align-items: stretch; justify-content: flex-start; }
  .yae-astrology__period-nav--chart { width: 100%; }
  .yae-astrology__period-nav--chart .yae-astrology__period-button { flex: 1 1 0; }
  .yae-astrology__chart-filter, .yae-astrology__chart-filter select { width: 100%; }
  .yae-astrology__chart-metric { flex-wrap: wrap; }
  .yae-astrology__chart-metric small { flex-basis: 100%; margin-left: 0; }
  .yae-astrology__table-wrap th, .yae-astrology__table-wrap td { padding: .62rem .22rem; font-size: 14px; }
  .yae-astrology__table-wrap thead th { font-size: 13px; }
}

@media (max-width: 430px) {
  .yae-astrology__hero { display: block; }
  .yae-astrology__orb { margin-bottom: 1rem; }
  .yae-astrology__summary { grid-template-columns: 1fr; gap: .65rem; }
  .yae-astrology__score { min-height: 108px; padding: .8rem; }
  .yae-astrology__score strong { font-size: 30px; }
}