/* Personal horoscope page */
.personal-page{padding-top:0}
.personal-container{max-width:900px!important;display:grid;gap:22px}
.personal-intro{padding:8px 2px 4px}
.personal-intro h1{margin:8px 0 12px;font-size:clamp(1.8rem,4vw,2.7rem);line-height:1.16;letter-spacing:-.035em}
.personal-intro p{max-width:700px;color:var(--muted,#667085);line-height:1.7}
.personal-card{position:relative;box-sizing:border-box;padding:clamp(20px,4vw,38px);border:1px solid var(--line);border-radius:28px;background:var(--card);box-shadow:var(--shadow);color:var(--text)}
.personal-card h2{font-size:clamp(1.2rem,2.5vw,1.55rem);margin:0 0 18px;line-height:1.3}
.personal-card h2:not(:first-child){margin-top:26px}
.personal-card p,.personal-card li{line-height:1.75}
.personal-card ul{padding-left:22px}
#personalForm{display:grid;gap:10px}
#personalForm label{font-weight:650;margin-top:5px}
#personalForm input{width:100%;min-height:48px;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface,#fff);color:var(--text,#202638);font:inherit}
#personalForm input:focus{outline:2px solid rgba(110,91,220,.25);border-color:#8171df}
#personalForm button{width:100%;min-height:50px;margin-top:12px;cursor:pointer;border:0;outline:0;box-shadow:none}#personalForm button:focus,#personalForm button:focus-visible{outline:0;box-shadow:none}
.personal-error{white-space:pre-line;color:#d92d20;font-size:.94rem}
.personal-note{font-size:.9rem;color:var(--muted,#667085)}
.personal-loader{align-items:center;justify-content:center;gap:12px;padding:20px;color:var(--muted,#667085)}
.personal-spinner{width:24px;height:24px;border:3px solid var(--border,#ddd);border-top-color:#8171df;border-radius:50%;animation:personal-spin .8s linear infinite}
@keyframes personal-spin{to{transform:rotate(360deg)}}
.suggest-box{position:relative;z-index:4;display:grid;gap:2px}
.suggest-box div{padding:9px 12px;border-radius:8px;cursor:pointer;background:var(--surface,#fff);border:1px solid var(--border,#e4e7ec)}
.suggest-box div:hover{background:var(--surface-soft,#f4f2ff)}
.personal-facts p{margin:6px 0}
.personal-links{display:flex;flex-wrap:wrap;gap:10px}
.personal-links a{display:inline-flex;padding:11px 14px;border:1px solid var(--border,#e4e7ec);border-radius:12px;color:var(--text,#202638);text-decoration:none}
.personal-links a:hover{border-color:#8171df}
.personal-card .bar{margin:16px 0}
.personal-card .label{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;font-weight:600}
.personal-card .track{height:10px;border-radius:99px;overflow:hidden;background:var(--surface-soft,#eef0f5)}
.personal-card .fill{height:100%;width:0;border-radius:99px;transition:width 1s ease}
@media(max-width:600px){.personal-container{gap:16px}.personal-card{border-radius:16px;padding:19px}.personal-links{display:grid;grid-template-columns:1fr}.personal-links a{justify-content:center}}

/* Keep autocomplete suggestions readable when hovering in dark theme. */
html[data-theme="dark"] .suggest-box div {
  color: var(--text);
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] .suggest-box div:hover,
html[data-theme="dark"] .suggest-box div:focus-visible {
  color: var(--text);
  background: var(--surface2);
  border-color: var(--accent);
}

/* Match the 14px mobile side gutters used on test and compatibility pages. */
@media (max-width: 560px) {
  .personal-page > .personal-container {
    width: calc(100% - 28px) !important;
    max-width: 900px;
    padding-inline: 0;
    box-sizing: border-box;
  }
}