.horoscope-inner {
  width:min(100%,calc(1160px + 2 * var(--gutter)));
  margin-inline:auto;
  padding:clamp(32px,6vw,82px) var(--gutter) clamp(52px,8vw,108px);
}
.horoscope-breadcrumb {
  display:flex; flex-wrap:wrap; align-items:center; gap:7px 9px;
  margin:0 0 clamp(22px,4vw,44px); color:var(--muted); font-size:13px;
}
.horoscope-breadcrumb a { color:var(--accent); text-underline-offset:.22em; }
.horoscope-hero h1 {
  margin:0; font-size:clamp(39px,7vw,88px); font-weight:735;
  letter-spacing:-.06em; line-height:1.02;
}
.horoscope-hero p {
  max-width:66ch; margin:14px 0 0; color:var(--muted);
  font-size:clamp(16px,1.7vw,21px); line-height:1.55;
}
.horoscope-grid {
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  align-items:start; gap:clamp(14px,2.8vw,32px); margin-top:clamp(24px,4.5vw,52px);
}
.horoscope-reading,.horoscope-moon-card,.horoscope-signs,.horoscope-guide {
  --text:var(--panel-ink); --muted:var(--panel-muted); --accent:var(--panel-accent);
  --line:var(--panel-line);
  min-width:0; padding:clamp(17px,3vw,34px); border:1px solid var(--line);
  border-radius:18px; background:var(--panel-bg); color:var(--text);
  box-shadow:0 12px 38px #03060e35; color-scheme:light;
}
.horoscope-reading { align-self:stretch; }
.horoscope-page h2 {
  margin:0; font-size:clamp(23px,3vw,36px); font-weight:722;
  letter-spacing:-.043em; line-height:1.1;
}
.horoscope-controls {
  display:flex; flex-wrap:wrap; align-items:end; gap:10px 14px; margin-top:18px;
}
.horoscope-controls label {
  display:grid; gap:5px; color:var(--muted); font-size:13px; font-weight:670;
}
.horoscope-controls > label:not(:has(select,input)) {
  align-self:center;
}
.horoscope-controls :is(select,input,button) {
  max-width:100%; min-height:44px; padding:8px 11px;
  border:1px solid var(--line); border-radius:8px; font:inherit;
}
.horoscope-controls :is(select,input) {
  min-width:min(100%,10rem); color:var(--text); background:#fff; font-size:16px;
}
.horoscope-controls button {
  background:var(--panel-inset); color:var(--accent); font-size:14px; font-weight:660;
}
.horoscope-controls :is(select,input,button):hover:not(:disabled) { border-color:var(--accent); }
.horoscope-controls button:disabled { opacity:.6; cursor:default; }
.horoscope-page :is(a,select,input,button):focus-visible { outline-offset:3px; }
.horoscope-week {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  margin:clamp(19px,3vw,31px) 0 0; color:var(--accent); font-size:14px;
  font-weight:650; line-height:1.5; font-variant-numeric:tabular-nums;
}
.horoscope-week:empty { display:none; }
.horoscope-week p { margin:0; }
.horoscope-message {
  margin-top:12px; padding:clamp(14px,2.2vw,24px);
  border:1px solid var(--line); border-radius:12px; background:var(--panel-inset);
}
.horoscope-message h3 {
  margin:0; font-size:clamp(22px,2.75vw,32px); font-weight:720;
  letter-spacing:-.035em; line-height:1.15;
}
.horoscope-message p {
  max-width:64ch; margin:10px 0 0; color:var(--text);
  font-size:clamp(15px,1.6vw,18px); line-height:1.65;
}
.horoscope-note {
  max-width:66ch; margin:16px 0 0; color:var(--muted);
  font-size:13px; line-height:1.55;
}
.horoscope-moon-stage {
  position:relative; display:grid; place-items:center; height:clamp(155px,19vw,230px);
  margin-top:14px; padding:9px; border-radius:12px; overflow:hidden;
  background:radial-gradient(ellipse at 50% 44%,#27384e 0%,#122135 52%,#080e19 84%);
  color:#e2e9f3; color-scheme:dark;
}
.horoscope-moon-stage canvas {
  display:block; width:auto; height:100%; max-width:100%; max-height:100%; object-fit:contain;
}
.horoscope-moon-stage > * { grid-area:1 / 1; min-height:0; }
.horoscope-moon-stage :is(p,[role=status]) {
  z-index:1; margin:0; padding:6px 9px; border-radius:6px;
  background:#101925; font-size:13px; line-height:1.45; text-align:center;
}
.horoscope-moon-stage :is(p,[role=status]):empty { display:none; }
.horoscope-lunar-date {
  margin:12px 0 0; color:var(--muted); font-size:13px; line-height:1.5;
  font-variant-numeric:tabular-nums;
}
.horoscope-moon-data {
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:8px; margin:12px 0 0;
}
.horoscope-moon-data > div {
  min-width:0; padding:9px 10px; border-radius:8px; background:var(--panel-inset);
}
.horoscope-moon-data dt {
  margin:0 0 3px; color:var(--muted); font-size:12px; font-weight:620; line-height:1.3;
}
.horoscope-moon-data dd {
  margin:0; font-size:clamp(15px,1.6vw,19px); font-weight:690; line-height:1.25;
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.horoscope-page :is(.horoscope-moon-link,.horoscope-guide a) {
  color:var(--accent); text-underline-offset:.22em;
}
.horoscope-moon-link {
  display:inline-flex; align-items:center; gap:5px; min-height:44px; margin-top:5px;
  font-size:14px; font-weight:650;
}
.horoscope-signs,.horoscope-guide { margin-top:clamp(18px,3.6vw,44px); }
.horoscope-signs ul {
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px;
  margin:16px 0 0; padding:0; list-style:none;
}
.horoscope-signs a {
  display:grid; place-items:center; min-height:44px; height:100%; padding:7px 9px;
  border:1px solid var(--line); border-radius:8px; background:var(--panel-inset);
  color:var(--accent); font-size:14px; font-weight:620; line-height:1.25;
  text-align:center; text-decoration:none;
}
.horoscope-signs a:not([aria-current]):hover {
  border-color:var(--accent); background:#fff; text-decoration:underline;
  text-underline-offset:.18em;
}
.horoscope-signs a[aria-current=page] {
  border-color:var(--accent); background:var(--accent); color:#fff; font-weight:700;
}
@media (max-width:830px) {
  .horoscope-signs ul { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:450px) {
  .horoscope-signs ul { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.horoscope-guide :is(p,li) {
  max-width:72ch; color:var(--muted); font-size:clamp(15px,1.6vw,18px); line-height:1.6;
}
.horoscope-guide p { margin:12px 0 0; }
.horoscope-guide ul { margin:12px 0 0; padding-inline-start:1.15em; }
@media (max-width:740px) {
  .horoscope-grid { grid-template-columns:minmax(0,1fr); }
  .horoscope-moon-stage { height:clamp(150px,42vw,240px); }
}
@media (max-width:420px) {
  .horoscope-controls > :is(label,select,input,div) { flex:1 1 100%; min-width:0; }
  .horoscope-controls :is(select,input) { width:100%; }
}
