.horoscope-trigger { display: block; width: 100%; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.horoscope-trigger > span { display: block; }
.horoscope-trigger .horoscope-sign-name { font-family: Philosopher, serif; font-size: 24px; font-weight: 700; color: #222; margin: 14px 0 4px; }
.as_sign_box:hover .horoscope-trigger, .as_sign_box:hover .horoscope-sign-name { color: white; }
.horoscope-trigger:focus-visible { outline: 2px solid #a44210; outline-offset: 8px; border-radius: 4px; }
#horoscope-dialog { width: min(620px, calc(100% - 32px)); max-height: 85vh; padding: 28px; border: 1px solid #f3dfcf; border-radius: 20px; background: #fff; color: #333; box-shadow: 0 24px 80px #24180e40; margin: auto; }
#horoscope-dialog::backdrop { background: #151b2ab3; }
body.horoscope-open { overflow: hidden; }
.horoscope-header { display: flex; gap: 16px; align-items: center; padding-bottom: 24px; }
#horoscope-title { font-size: 28px; margin: 0 0 4px; }
#horoscope-dates { margin: 0; color: #777; }
.horoscope-close { align-self: flex-start; margin-left: auto; background: #fff3e9; color: #873809; border: 0; border-radius: 50%; width: 36px; height: 36px; font-size: 26px; line-height: 1; cursor: pointer; flex-shrink: 0; }
.horoscope-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; border-bottom: 1px solid #f0e5dc; padding-bottom: 16px; }
.horoscope-tabs button { padding: 10px 4px; border: 0; border-radius: 8px; background: #fff4ea; color: #77370e; font: inherit; cursor: pointer; }
.horoscope-tabs button[aria-selected="true"] { background: linear-gradient(100deg, #f5a52b, #fa7432); color: #222; font-weight: 700; }
#horoscope-panel { padding: 22px 0 12px; }
#horoscope-period { color: #98410e; font-weight: 600; }
#horoscope-content { line-height: 1.85; font-size: 16px; }
.horoscope-note { color: #777; font-size: 12px; margin: 0; border-top: 1px solid #f0e5dc; padding-top: 14px; }
@media (max-width: 480px) { #horoscope-dialog { padding: 20px; } #horoscope-title { font-size: 24px; } .horoscope-tabs button { font-size: 13px; } }
#horoscope-content, #ai-tool-result { white-space: pre-wrap; overflow-wrap: anywhere; }
#service-forecast-dialog { width: min(680px, calc(100% - 32px)); max-height: 85vh; overflow-y: auto; padding: 28px; border: 1px solid #f3dfcf; border-radius: 20px; background: #fff; color: #333; box-shadow: 0 24px 80px #24180e40; margin: auto; }
#service-forecast-dialog::backdrop { background: #151b2ab3; }
#service-forecast-title { font-size: 28px; margin: 0 0 4px; }
#service-forecast-subtitle { margin: 0; color: #777; }
#service-forecast-panel { padding: 4px 0 12px; }
#service-forecast-period { color: #98410e; font-weight: 700; }
#service-forecast-content { line-height: 1.85; font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.service-enquiry-form { display: grid; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #f0e5dc; }
.service-enquiry-form label { display: grid; gap: 7px; margin: 0; color: #2b1e14; font-weight: 700; }
.service-enquiry-form input,
.service-enquiry-form textarea { width: 100%; border: 1px solid #ead6bb; border-radius: 10px; padding: 11px 13px; color: #24170f; background: #fffaf7; font: inherit; }
.service-enquiry-form textarea { resize: vertical; min-height: 96px; }
.service-enquiry-form input:focus,
.service-enquiry-form textarea:focus { outline: none; border-color: #f4a62a; box-shadow: 0 0 0 3px rgba(244, 166, 42, .16); }
.service-enquiry-form .as_btn { justify-self: start; border: 0; }
#horoscope-retry[hidden], #astrology-tool-dialog [hidden] { display: none; }
.ai-service-card { cursor: pointer; }
#astrology-tool-dialog { width: min(700px, calc(100% - 32px)); max-height: 85vh; padding: 28px; border: 1px solid #f3dfcf; border-radius: 20px; background: #fff; color: #333; box-shadow: 0 24px 80px #24180e40; margin: auto; }
#astrology-tool-dialog::backdrop { background: #151b2ab3; }
#astrology-tool-title { font-size: 26px; margin: 0; }
.ai-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ai-field-grid label:last-child { grid-column: 1 / -1; }
#astrology-tool-form label { display: block; font-weight: 500; }
#astrology-tool-form .form-control { margin-top: 6px; margin-bottom: 16px; background: #fff; color: #333; border: 1px solid #ddd; height: 44px; padding: 8px 12px; }
#astrology-tool-form legend { font-size: 18px; padding-top: 12px; }
#ai-generate { margin-top: 18px; }
#ai-generate:disabled { opacity: .6; cursor: wait; }
#ai-tool-result { line-height: 1.85; margin-top: 24px; }
@media(max-width:480px) { #astrology-tool-dialog { padding:20px; } .ai-field-grid { grid-template-columns:1fr; } }