:root {
  --bg: #d882d4;
  --fg: #222222;
  --accent: #8b3dff;
  --border: #c065b5;
  --focus: #ff9800;
  --error: #c62828;
  --panel-bg: #b34ab9;
  color-scheme: light;
}
body { font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif; margin:0; background:var(--bg); color:var(--fg); line-height:1.5; }
.site-header, .site-footer { padding:1rem 1.5rem; background:#f5f5f5; }
.hero, .sign-grid { padding:1rem 1.5rem; max-width:1100px; margin:0 auto; }
#lookup-form { display:flex; flex-wrap:wrap; gap:.75rem; align-items:flex-end; }
#lookup-form label { font-size:.875rem; font-weight:600; }
#lookup-form select, #lookup-form button { padding:.5rem .75rem; font-size:1rem; }
.error { color:var(--error); margin:0; min-height:1.25rem; }
  :root {
    --bg: #0d0f17;
    --bg-alt: #151a26;
    --panel: #1f2733;
    --panel-alt: #273140;
    --fg: #f4f7fa;
    --fg-muted: #c5ced8;
    --accent: #c79d34;
    --accent-glow: #e3b955;
    --border: #364354;
    --focus: #7aa9ff;
    --error: #ff5d5d;
    --shadow: 0 18px 40px -12px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.4);
    --radius: 18px;
    --gradient: radial-gradient(circle at 30% 20%, #202b38 0%, #0d1117 70%);
    color-scheme: dark;
  }
  body { font-family: "Segoe UI", "Inter", system-ui, -apple-system, Roboto, Ubuntu, sans-serif; margin:0; background:var(--gradient), var(--bg); color:var(--fg); line-height:1.55; -webkit-font-smoothing:antialiased; }
  .page-title { font-size:clamp(1.9rem,4.5vw,2.75rem); margin:.25rem 0 1rem; font-weight:600; letter-spacing:.5px; background:linear-gradient(90deg,var(--accent),var(--accent-glow)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .section-title { font-size:1.35rem; margin:0 0 1.25rem; font-weight:600; letter-spacing:.4px; color:var(--accent-glow); }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:2rem; }
  .hero { padding:3.25rem 1.5rem 2rem; max-width:1050px; margin:0 auto; position:relative; }
  .hero:before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(199,157,52,.15),transparent 60%); pointer-events:none; border-radius:0 0 var(--radius) var(--radius); }
  .hero-inner { max-width:760px; }
  .hero-note { font-size:1rem; color:var(--fg-muted); margin:0 0 1.25rem; line-height:1.6; }
.close { align-self:flex-end; background:none; border:none; font-size:1.5rem; cursor:pointer; }
  .cards { display:none; }
  button { border:1px solid var(--border); background:var(--panel-alt); color:var(--fg); border-radius:10px; cursor:pointer; padding:.75rem 1.1rem; font-weight:500; letter-spacing:.3px; box-shadow:0 4px 14px rgba(0,0,0,.25); transition:background .25s, transform .15s, box-shadow .25s; }
  button:hover { background:var(--accent); color:#111; box-shadow:0 6px 20px rgba(0,0,0,.4); }
  button:active { transform:translateY(2px); }
  button:focus { outline:2px solid var(--focus); outline-offset:3px; }
.numerology-error { color:var(--error); min-height:1.2rem; margin:.5rem 0 0; font-size:.85rem; }
.numerology-result { margin-top:.75rem; font-weight:600; min-height:1.2rem; }
  .open-calc-btn { margin-top:.75rem; background:linear-gradient(135deg,var(--accent) 0%,var(--accent-glow) 100%); color:#111; padding:.85rem 1.25rem; font-size:1rem; font-weight:600; border-radius:50px; border:1px solid var(--accent-glow); box-shadow:0 8px 24px -6px rgba(0,0,0,.5); }
  .open-calc-btn:hover { background:linear-gradient(135deg,var(--accent-glow),var(--accent)); }
  .open-calc-btn:active { transform:translateY(2px); }
  .open-calc-btn:focus { outline:2px solid var(--focus); outline-offset:3px; }
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; }
.numerology-sign, .numerology-chinese { margin-top:.4rem; font-weight:500; font-size:.9rem; }
  .insights-output { border:1px solid var(--border); padding:2rem 2rem 1.75rem; border-radius:var(--radius); background:linear-gradient(165deg,var(--panel) 0%, var(--panel-alt) 100%); margin:0 auto 3.5rem; max-width:900px; box-shadow:var(--shadow); position:relative; }
  .insights-output:before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(145deg,rgba(199,157,52,.25),transparent 60%); mix-blend-mode:screen; }
  .insights-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
  .insight-block { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); padding:1.1rem .95rem .9rem; border-radius:14px; position:relative; overflow:hidden; backdrop-filter:blur(4px); }
  .insight-block:before { content:""; position:absolute; inset:0; background:linear-gradient(140deg,rgba(255,255,255,.06),transparent 70%); pointer-events:none; }
  .insight-heading { margin:.25rem 0 .75rem; font-size:.95rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--accent-glow); }
  .numerology-result { margin-top:.25rem; font-weight:500; font-size:.95rem; }
  .numerology-sign, .numerology-chinese { font-size:.9rem; line-height:1.4; }
  .numerology-sign strong, .numerology-chinese strong { color:var(--accent-glow); }
  .natal-chart { list-style:none; padding:0; margin:.25rem 0 .75rem; display:grid; gap:.4rem; }
  .natal-chart li {
    position: relative;
    padding: .4rem .6rem .6rem;
    border-bottom: 1px solid #e3e5e8;
  }
  .natal-chart li .value.pending { opacity:.6; font-style:italic; }
  .natal-chart li .desc {
    display: block;
    font-size: .72rem;
    line-height: 1.3;
    margin-top: .45rem;
    color: var(--fg-muted);
    background: var(--panel);
    padding: .35rem .5rem;
    border-radius: 8px;
    border-left: 3px solid var(--accent);
    font-style: normal;
    text-align: left;
  }
  .natal-disclaimer { font-size:.65rem; color:var(--fg-muted); margin:.25rem 0 0; }
  .advanced-inputs { margin:.75rem 0 1rem; }
  .advanced-inputs summary { cursor:pointer; font-weight:600; font-size:.85rem; color:var(--accent-glow); }
  .advanced-grid { display:grid; gap:.75rem; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); margin-top:.75rem; }
  .advanced-grid select, .advanced-grid input[list] { padding:.45rem .6rem; font-size:.8rem; border:1px solid var(--border); border-radius:8px; background:var(--panel-alt); color:var(--fg); }
  .advanced-grid select:focus, .advanced-grid input[list]:focus { outline:2px solid var(--focus); outline-offset:2px; }
  .location-note { font-size:.65rem; margin-top:.3rem; color:var(--fg-muted); }
  .planet-btn { background:linear-gradient(135deg,var(--panel-alt),var(--accent)); color:#111; font-weight:600; }
  .planet-btn:hover { background:linear-gradient(135deg,var(--accent),var(--accent-glow)); }
  .planet-status { font-size:.65rem; margin-top:.35rem; color:var(--fg-muted); }
  .zodiac-chart { max-width:1050px; margin:0 auto 4rem; padding:0 1.5rem; }
  .zodiac-table { width:100%; border-collapse:collapse; font-size:.8rem; background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
  .zodiac-table th, .zodiac-table td { padding:.55rem .65rem; text-align:left; border-bottom:1px solid #2d3742; }
  .zodiac-table th { background:var(--panel-alt); font-weight:600; color:var(--accent-glow); }
  .zodiac-table tbody tr:last-child td { border-bottom:none; }
.insights-output h2 { margin-top:0; font-size:1.2rem; }
  .calc-modal-content { max-width:480px; background:linear-gradient(165deg,var(--panel-alt),var(--panel)); border:1px solid var(--border); }
  .modal { background:rgba(13,17,23,.72); backdrop-filter:blur(6px); }
  .close { color:var(--fg-muted); }
  .close:hover { color:var(--accent-glow); }
.open-calc-btn:focus { outline:2px solid var(--focus); outline-offset:2px; }
.highlight { outline:3px solid var(--accent); outline-offset:2px; }
.calc-modal-content { max-width:460px; }
#reference { margin-top: 3rem; }
#reference details { border: 1px solid #ccc; border-radius: 6px; padding: .75rem 1rem; margin-bottom: 1rem; background: var(--panel-bg,#fff); }
#reference summary { cursor: pointer; font-weight: 600; }
/* Center the Birth Date & Natal Inputs section */
.inline-calculator.top {
  max-width: 960px;
  margin: 2rem auto;
  text-align: center;
  padding: 1.5rem 2rem;
}

.inline-calculator.top h2 {
  text-align: center;
  margin-bottom: 1rem;
}

.inline-calculator.top .numerology-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.25rem;
  margin: 0 auto 1.25rem;
  max-width: 900px;
}

.inline-calculator.top .numerology-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
}

.inline-calculator.top label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .35rem;
}

.inline-calculator.top input,
.inline-calculator.top select {
  text-align: center;
  padding: .45rem .6rem;
  width: 110px;
}

.inline-calculator.top .button-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.inline-calculator.top #numerology-format,
.inline-calculator.top #numerologyError {
  text-align: center;
}
/* Optional subtle card styling */
.inline-calculator.top {
  background: var(--surface-alt, #b3b3ca79);
  border: 1px solid #a3abc1d5;
  border-radius: 12px;
  box-shadow: 0 4px 10px -3px rgba(0,0,0,.08);
}