/* ═══════════════════════════════════════════
   THEME TOKENS
═══════════════════════════════════════════ */
html[data-theme="dark"] {
  --bg-page:    #0d0d0d;
  --bg-card:    #161616;
  --bg-card2:   #1c1c1c;
  --bg-input:   #1a1a1a;
  --border:     #2a2a2a;
  --border2:    #333;
  --text-primary:  #e8e0d0;
  --text-secondary:#999;
  --text-muted:    #555;
  --accent:     #c4a55a;
  --accent-dim: #7a6030;
  --warn-bg:    #2a1f00;
  --warn-border:#7a5a00;
  --warn-text:  #f0c040;
  --active-bg:  #0d1f0d;
  --active-border:#4a8a4a;
  --active-text:#6dbf6d;
  --shadow: 0 2px 12px rgba(0,0,0,0.6);
}
html[data-theme="light"] {
  --bg-page:    #f4f1ec;
  --bg-card:    #ffffff;
  --bg-card2:   #f9f7f3;
  --bg-input:   #ffffff;
  --border:     #ddd;
  --border2:    #ccc;
  --text-primary:  #1a1a1a;
  --text-secondary:#555;
  --text-muted:    #999;
  --accent:     #8b6914;
  --accent-dim: #d4af60;
  --warn-bg:    #fff8e0;
  --warn-border:#e0b000;
  --warn-text:  #7a5500;
  --active-bg:  #e8f5e8;
  --active-border:#2e7d32;
  --active-text:#1b5e20;
  --shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.elem-wood  { --ec: #4caf50; --eb: rgba(76,175,80,0.10); }
.elem-fire  { --ec: #ef5350; --eb: rgba(239,83,80,0.10); }
.elem-earth { --ec: #c8a84b; --eb: rgba(200,168,75,0.10); }
.elem-metal { --ec: #9e9e9e; --eb: rgba(158,158,158,0.10); }
.elem-water { --ec: #2196f3; --eb: rgba(33,150,243,0.10); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  transition: background 0.2s, color 0.2s;
}
.container { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.hidden { display: none !important; }

/* HEADER */
header { border-bottom: 1px solid var(--border); padding: 1.25rem 0; margin-bottom: 1.5rem; }
.header-inner { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.title-cn { font-size: 1.8rem; color: var(--accent); letter-spacing: 0.05em; font-weight: 700; }
.title-en { font-size: 0.9rem; color: var(--text-secondary); margin-left: 0.75rem; }
.header-controls { display: flex; gap: 0.5rem; align-items: center; }
#themeBtn {
  background: var(--bg-card2); border: 1px solid var(--border); color: var(--text-primary);
  padding: 0.35rem 0.85rem; border-radius: 6px; cursor: pointer; font-size: 0.85rem;
  transition: border-color 0.2s;
}
#themeBtn:hover { border-color: var(--accent); }
#langSelect {
  background: var(--bg-card2); border: 1px solid var(--border); color: var(--text-primary);
  padding: 0.35rem 0.55rem; border-radius: 6px; cursor: pointer; font-size: 0.85rem;
  transition: border-color 0.2s;
}
#langSelect:hover { border-color: var(--accent); }

/* INPUT SECTION */
.input-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow);
}
.input-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1rem 1.25rem; align-items: end;
}
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field label {
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-secondary); font-weight: 600;
}
.field input, .field select {
  background: var(--bg-input); border: 1px solid var(--border2); border-radius: 6px;
  color: var(--text-primary); padding: 0.5rem 0.65rem; font-size: 0.95rem; width: 100%;
  transition: border-color 0.2s;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field .hint { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.1rem; }
.gender-row { display: flex; gap: 1rem; align-items: center; padding-top: 0.35rem; }
.gender-row label {
  display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem;
  color: var(--text-primary); text-transform: none; letter-spacing: 0; font-weight: 400; cursor: pointer;
}
.gender-row input[type=radio] { accent-color: var(--accent); width: 1rem; height: 1rem; }

/* Tooltip */
.label-row { display: flex; align-items: center; gap: 0.4rem; }
.tt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--border2); color: var(--text-secondary);
  font-size: 0.62rem; font-weight: 700; cursor: help; position: relative;
  flex-shrink: 0;
}
.tt:hover .tt-box { display: block; }
.tt-box {
  display: none; position: absolute; left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: var(--bg-card2); border: 1px solid var(--border2);
  border-radius: 6px; padding: 0.5rem 0.65rem; font-size: 0.72rem;
  color: var(--text-primary); width: 220px; z-index: 100; line-height: 1.45;
  font-weight: 400; text-transform: none; letter-spacing: 0; white-space: normal;
  box-shadow: var(--shadow);
}
.tt-box::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--border2);
}

/* WARNINGS */
#warningsContainer { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.warning {
  background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text);
  border-radius: 7px; padding: 0.6rem 0.9rem; font-size: 0.82rem;
  display: flex; align-items: flex-start; gap: 0.5rem;
}
.warning::before { content: '⚠'; flex-shrink: 0; }

/* SECTION HEADER */
.section-header {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); font-weight: 700; margin-bottom: 0.75rem;
  padding-bottom: 0.4rem; border-bottom: 1px solid var(--border);
}

/* TST PANEL */
#tstPanel {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow);
}
.tst-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; font-size: 0.88rem; }
.tst-time { font-size: 1.5rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.tst-arrow { color: var(--text-muted); font-size: 1.1rem; }
.tst-adj { color: var(--text-secondary); font-size: 0.81rem; }
.tst-badge {
  display: inline-block; padding: 0.15rem 0.45rem; border-radius: 4px;
  font-size: 0.73rem; font-weight: 600;
}
.tst-badge.pos { background: rgba(76,175,80,0.15); color: #4caf50; }
.tst-badge.neg { background: rgba(239,83,80,0.15); color: #ef5350; }
.tst-badge.neu { background: var(--bg-card2); color: var(--text-secondary); }

/* PILLAR CARDS */
#pillarsSection { margin-bottom: 1.5rem; }
#pillarsGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.pillar-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; box-shadow: var(--shadow);
}
.pillar-label {
  text-align: center; padding: 0.5rem; background: var(--bg-card2);
  border-bottom: 1px solid var(--border); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); font-weight: 700;
}
.pillar-half {
  padding: 0.9rem 0.5rem; display: flex; flex-direction: column;
  align-items: center; gap: 0.3rem;
}
.pillar-char {
  font-size: 2.8rem; line-height: 1; color: var(--ec, var(--text-primary));
  font-family: 'Noto Serif SC', 'Source Han Serif', serif;
}
.pillar-pinyin { font-size: 0.78rem; color: var(--text-secondary); }
.pillar-meta { font-size: 0.68rem; color: var(--text-muted); text-align: center; }
.pillar-divider { height: 1px; background: var(--border); }

@media (max-width: 600px) {
  #pillarsGrid { grid-template-columns: repeat(2, 1fr); }
}

/* AUXILIARY STARS */
#auxStarsSection { margin-bottom:1.5rem; }
.aux-stars-card { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:1rem 1.25rem; box-shadow:var(--shadow); }
.aux-stars-note { color:var(--text-secondary); font-size:.76rem; line-height:1.5; margin:0 0 .8rem; }
.aux-stars-content { display:grid; gap:.65rem; }
.aux-star-pillar { display:grid; grid-template-columns:78px 1fr; gap:.65rem; align-items:start; font-size:.76rem; }
.aux-star-pillar > strong { color:var(--text-secondary); padding-top:.25rem; }
.aux-star-badges { display:flex; flex-wrap:wrap; gap:.4rem; }
.aux-star-badge { background:var(--bg-card2); border:1px solid var(--border2); border-left:3px solid var(--accent); border-radius:5px; color:var(--text-primary); padding:.25rem .45rem; cursor:help; }

/* FIVE ELEMENTS */
#elementsSection {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow);
}
.elem-row { display: grid; grid-template-columns: 68px 1fr 28px; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.elem-label { font-size: 0.81rem; }
.elem-bar-track { height: 7px; background: var(--bg-card2); border-radius: 4px; overflow: hidden; }
.elem-bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.elem-count { font-size: 0.78rem; color: var(--text-secondary); text-align: right; }
.elem-note { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.75rem; }

/* LUCK PILLARS */
#luckSection { margin-bottom: 1.5rem; }
.luck-meta { font-size: 0.79rem; color: var(--text-secondary); margin-bottom: 0.75rem; }
.luck-grid { display: flex; flex-wrap: nowrap; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.5rem; }
.luck-card {
  flex: 0 0 auto; min-width: 86px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 8px; padding: 0.65rem 0.5rem;
  text-align: center; box-shadow: var(--shadow);
}
.luck-card.active {
  background: var(--active-bg); border-color: var(--active-border);
  box-shadow: 0 0 0 1px var(--active-border), var(--shadow);
}
.luck-now { display: block; font-size: 0.6rem; color: var(--active-text); font-weight: 700; margin-bottom: 0.2rem; }
.luck-age { font-size: 0.68rem; color: var(--text-muted); margin-bottom: 0.1rem; }
.luck-years { font-size: 0.63rem; color: var(--text-muted); text-align: center; margin-bottom: 0.25rem; }
.luck-chars { display: flex; justify-content: center; gap: 0; margin-bottom: 0.2rem; }
.luck-char { font-size: 1.4rem; line-height: 1; color: var(--ec, var(--text-primary)); }
.luck-pinyin { font-size: 0.64rem; color: var(--text-secondary); }
.luck-annual-list {
  display: grid; gap: 0.08rem; margin-top: 0.55rem; padding-top: 0.45rem;
  border-top: 1px solid var(--border);
}
.luck-annual {
  display: grid; grid-template-columns: 1fr 1.2rem 1.2rem; align-items: center; column-gap: 0.05rem;
  padding: 0.05rem 0.15rem; border-radius: 3px; font-variant-numeric: tabular-nums;
}
.luck-annual.active { background: var(--active-bg); box-shadow: inset 2px 0 0 var(--active-border); }
.luck-annual-year { color: var(--text-muted); font-size: 0.58rem; text-align: left; }
.luck-annual-char { font-family: 'Noto Serif SC', 'Source Han Serif', serif; font-size: 0.88rem; line-height: 1; }

/* Luck explainer */
.lp-explainer { margin-top: 0.75rem; }
.lp-explainer summary {
  cursor: pointer; font-size: 0.77rem; color: var(--text-secondary);
  list-style: none; display: inline-flex; align-items: center; gap: 0.35rem; user-select: none;
}
.lp-explainer summary::-webkit-details-marker { display: none; }
.lp-explainer summary::before { content: '▶'; font-size: 0.58rem; transition: transform 0.2s; display: inline-block; }
.lp-explainer[open] summary::before { transform: rotate(90deg); }
.lp-explainer-body {
  margin-top: 0.6rem; font-size: 0.77rem; color: var(--text-secondary); line-height: 1.65;
  padding: 0.75rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 7px;
}
.lp-explainer-body p { margin-bottom: 0.4rem; }

/* HOW IT WORKS */
#howItWorks {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 1.5rem; box-shadow: var(--shadow);
}
#howItWorks > summary {
  padding: 1rem 1.5rem; cursor: pointer; font-size: 0.84rem;
  color: var(--text-secondary); font-weight: 600; list-style: none;
  display: flex; align-items: center; gap: 0.5rem; user-select: none;
}
#howItWorks > summary::-webkit-details-marker { display: none; }
#howItWorks > summary::before { content: '▶'; font-size: 0.62rem; transition: transform 0.2s; display: inline-block; }
#howItWorks[open] > summary::before { transform: rotate(90deg); }
.how-body { padding: 0 1.5rem 1.25rem; font-size: 0.81rem; color: var(--text-secondary); line-height: 1.7; }
.how-body h3 { color: var(--text-primary); font-size: 0.82rem; margin: 1rem 0 0.35rem; letter-spacing: 0.04em; }
.how-body p { margin-bottom: 0.5rem; }
.how-body code {
  background: var(--bg-card2); border-radius: 3px; padding: 0.1rem 0.35rem;
  font-size: 0.78rem; font-family: 'Cascadia Code','Fira Code',monospace;
}

/* AI INTERPRETATION */
#interpSection { margin-bottom: 1.5rem; }
.interp-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 1.25rem 1.5rem; box-shadow: var(--shadow);
}
.interp-settings { margin-bottom: 0.85rem; }
.interp-settings > summary {
  color: var(--accent); cursor: pointer; font-size: 0.86rem; font-weight: 700;
  padding: 0.2rem 0; user-select: none;
}
.interp-settings[open] > summary { margin-bottom: 0.85rem; }
.interp-settings-body { border-top: 1px solid var(--border); padding-top: 0.85rem; }
.interp-focus { margin: 0.75rem 0 1rem; padding: 0.7rem 0.85rem; background: var(--bg-card2); border: 1px solid var(--border); border-radius: 7px; }
.interp-focus > summary { cursor: pointer; color: var(--accent); font-size: 0.86rem; font-weight: 600; }
.interp-focus p { color: var(--text-secondary); font-size: 0.78rem; line-height: 1.5; margin: 0.65rem 0; }
.interp-focus-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 0.5rem; }
.interp-focus-options label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.82rem; padding: 0.35rem 0; }
.interp-focus-options input { width: auto; accent-color: var(--accent); }
.interp-provider-row {
  display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.75rem;
}
.interp-provider-row label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.interp-model-row {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 0.75rem;
  align-items: center; margin: 0.75rem 0 0.35rem;
}
.interp-model-row label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.interp-model-row select { min-width: 0; width: 100%; }
.interp-provider-sel {
  background: var(--bg-card2); border: 1px solid var(--border2); color: var(--text-primary);
  border-radius: 6px; padding: 0.28rem 0.5rem; font-size: 0.82rem; cursor: pointer;
}
.interp-key-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 0.5rem; align-items: end;
  margin-bottom: 0.5rem;
}
.interp-key-row .field { min-width: 0; }
.interp-key-row input[type=password],
.interp-key-row input[type=text] {
  font-family: 'Cascadia Code','Fira Code',monospace; font-size: 0.82rem;
  letter-spacing: 0.02em;
}
.interp-btn {
  background: var(--bg-card2); border: 1px solid var(--border2); color: var(--text-primary);
  padding: 0.5rem 0.9rem; border-radius: 6px; cursor: pointer; font-size: 0.84rem;
  white-space: nowrap; transition: border-color 0.2s, background 0.2s;
}
.interp-btn:hover:not(:disabled) { border-color: var(--accent); }
.interp-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.interp-btn.primary {
  background: var(--accent); border-color: var(--accent); color: var(--bg-page); font-weight: 600;
}
.interp-btn.primary:hover:not(:disabled) { filter: brightness(1.08); }
.interp-persist-row {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.75rem;
}
.interp-persist-row label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.interp-persist-row input[type=checkbox] { accent-color: var(--accent); }
.interp-status {
  font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.5rem; min-height: 1em;
}
.interp-status.ok    { color: var(--active-text); }
.interp-status.err   { color: #ef5350; }
.interp-privacy {
  background: var(--bg-card2); border: 1px solid var(--border); border-radius: 7px;
  padding: 0.6rem 0.85rem; margin-bottom: 0.85rem;
  font-size: 0.74rem; color: var(--text-muted); line-height: 1.55;
}
.interp-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.interp-output { margin-top: 1rem; }
.interp-output:empty { display: none; }
.interp-output h4 {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-secondary); margin: 1rem 0 0.4rem; font-weight: 700;
}
.interp-output h4:first-child { margin-top: 0; }
.interp-output p {
  font-size: 0.88rem; line-height: 1.65; color: var(--text-primary); margin-bottom: 0.4rem;
}
.interp-output ul {
  list-style: disc; padding-left: 1.25rem; font-size: 0.85rem;
  line-height: 1.6; color: var(--text-primary);
}
.interp-output ul li { margin-bottom: 0.3rem; }
.transit-interpretation-period {
  background: var(--bg-card2); border: 1px solid var(--border); border-radius: 8px;
  padding: 1rem; margin-top: 0.85rem;
}
.transit-interpretation-period h3 {
  color: var(--accent); font-size: 1rem; margin: 0 0 0.65rem;
}
.transit-interpretation-period h4 { margin-top: 0.8rem; }
.transit-interpretation-period .interpretation-basis {
  color: var(--text-secondary); font-size: 0.8rem;
}
.interp-disclaimer {
  margin-top: 1rem; font-size: 0.7rem; color: var(--text-muted); font-style: italic;
}
.interp-spinner {
  display: inline-block; width: 0.85em; height: 0.85em; border-radius: 50%;
  border: 2px solid var(--border2); border-top-color: var(--accent);
  animation: interp-spin 0.8s linear infinite; vertical-align: middle; margin-right: 0.4em;
}
@keyframes interp-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
  .interp-key-row { grid-template-columns: 1fr; }
  .interp-model-row { grid-template-columns: 1fr; }
}

/* FOOTER */
footer { border-top: 1px solid var(--border); padding: 1.25rem 0; margin-top: 0.5rem; }
.accuracy-box {
  background: var(--bg-card2); border: 1px solid var(--border); border-radius: 7px;
  padding: 0.75rem 1rem; margin-bottom: 0.75rem;
  font-size: 0.75rem; color: var(--text-muted); line-height: 1.6;
}
.footer-note { font-size: 0.73rem; color: var(--text-muted); }

.transit-nav { margin: 1rem 0; }

/* Saved natal profile */
.natal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.natal-actions .interp-btn { margin: 0; }
.natal-save-status {
  color: var(--text-secondary);
  font-size: 0.78rem;
}
.account-menu { position:relative; flex-shrink:0; }
.header-controls:has(.account-menu) { margin-left:auto; }
.account-menu [hidden] { display:none !important; }
.header-controls .account-toggle {
  display:grid; place-items:center; width:36px; height:36px; padding:0;
  border-radius:50%; border:1px solid var(--border2); background:var(--bg-card2);
  color:var(--accent); cursor:pointer; overflow:hidden; font-size:.75rem; font-weight:600;
}
.account-toggle img { width:100%; height:100%; object-fit:cover; }
.account-toggle:hover, .account-toggle[aria-expanded="true"] { border-color:var(--accent); }
.account-toggle:focus-visible, .account-actions :focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.account-dropdown {
  position:absolute; right:0; top:calc(100% + 12px); z-index:150;
  width:292px; max-width:calc(100vw - 32px); box-sizing:border-box; padding:8px;
  background:var(--bg-card); border:1px solid var(--border2); border-radius:12px;
  box-shadow:0 12px 40px #0004; text-align:left;
  max-height:calc(100dvh - 150px); overflow-y:auto;
}
.account-heading { padding:12px 12px 14px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.account-heading strong, .account-heading span { display:block; overflow-wrap:anywhere; }
.account-heading strong { font-size:.87rem; font-weight:600; color:var(--text-primary); }
.account-heading span { margin-top:4px; font-size:.75rem; color:var(--text-secondary); }
#accountNotice { font-size:.74rem; line-height:1.5; color:var(--text-secondary); margin:10px 0 0; }
.account-actions { display:flex; flex-direction:column; gap:2px; }
.account-actions button, .account-actions a {
  display:block; width:100%; box-sizing:border-box; border:0; border-radius:6px;
  padding:11px 12px; text-align:left; background:transparent; color:var(--text-primary);
  font:inherit; font-size:.8rem; text-decoration:none; cursor:pointer; line-height:1.35;
}
.account-actions button:hover, .account-actions a:hover { background:var(--bg-card2); }
.account-actions button:disabled { opacity:.4; cursor:default; }
.account-actions .account-divider { border-top:1px solid var(--border); border-radius:0; margin-top:6px; padding-top:14px; }
.account-actions .account-danger { color:#c97770; font-size:.74rem; }
#accountStatus { font-size:.75rem; line-height:1.5; color:var(--accent); margin:8px 12px; }
#accountStatus:empty { display:none; }

/* Detailed chart workspace, following the supplied amber and stone design. */
html[data-theme="dark"] { --bg-page:#0c0a09;--bg-card:#191614;--bg-card2:#211d19;--border:#34302a;--border2:#494036;--accent:#e5b963;--text-muted:#a39a8d;--text-secondary:#bcb3a6; }
html[data-theme="light"] { --text-muted:#71685c; }
.container { max-width:1280px; }
button,input,select { font:inherit; }
button,a,input,select { touch-action:manipulation; }
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible { outline:2px solid var(--accent);outline-offset:3px; }
section { scroll-margin-top:85px; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.profile-workspace { background:linear-gradient(120deg,var(--bg-card),var(--bg-card2));border:1px solid var(--border);border-radius:18px;padding:24px;margin-bottom:22px; }
.workspace-heading { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px; }
.workspace-heading h1 { font-family:Georgia,serif;font-size:clamp(1.4rem,4vw,2rem);color:var(--text-primary);overflow-wrap:anywhere; }
.eyebrow,.detail-caption { color:var(--accent);text-transform:uppercase;font-size:.67rem;letter-spacing:.13em;font-weight:700; }
.storage-badge,.god-badge { display:inline-block;border:1px solid var(--accent-dim);border-radius:20px;background:var(--bg-card2);padding:5px 10px;color:var(--accent);font-size:.72rem; }
.profile-controls,.profile-fields,.location-search-row { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.profile-controls select { flex:1;min-width:170px; }
.profile-workspace button,.profile-workspace select,.star-filters button,.luck-explorer select,.annual-selector button,.location-lookup button,.location-lookup input,.design-nav button,.design-nav a { color:var(--text-primary);background:var(--bg-input);border:1px solid var(--border2);border-radius:9px;padding:10px 14px;cursor:pointer;min-width:0; }
.profile-workspace .primary { background:var(--accent);color:var(--bg-page);border-color:var(--accent);font-weight:700; }
.profile-fields { margin-top:18px; }
.profile-fields .field { flex:1;min-width:180px; }
.favorite-control { display:flex;gap:8px;align-items:center;font-size:.8rem; }
.profile-workspace button:disabled { opacity:.5;cursor:default; }
#profileStatus,#locationStatus { font-size:.8rem;color:var(--accent);margin-top:8px; }
.design-nav { display:flex;gap:8px;flex-wrap:wrap;padding:10px 0 20px; }
.design-nav button,.design-nav a { font-size:.8rem;text-decoration:none; }
.design-nav button[aria-pressed="true"],.star-filters button[aria-pressed="true"],.annual-selector button[aria-pressed="true"] { background:var(--bg-card2);border-color:var(--accent);color:var(--accent); }
.location-lookup { padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--border); }
.location-lookup>label { display:block;font-size:.8rem;font-weight:600;margin-bottom:8px; }
.location-search-row input { flex:1;min-width:140px;cursor:text; }
.location-lookup .transit-note,.location-lookup small { font-size:.75rem;color:var(--text-secondary);display:block;margin-top:8px; }
.location-lookup a { color:var(--text-secondary); }
.location-results { display:grid;gap:6px;margin-top:10px; }
.location-results button { text-align:left; }
.input-card { border-radius:18px; }
.section-header { font-family:Georgia,serif;color:var(--accent);font-size:.95rem; }
.pillar-card { border-radius:15px;overflow:hidden;min-width:0; }
.pillar-label { font-weight:700;background:var(--bg-card2);padding:14px; }
.pillar-details { padding:12px;background:var(--bg-card);font-size:.7rem; }
.pillar-details .god-badge { margin-bottom:14px; }
.pillar-details .detail-caption { display:block;margin-bottom:8px; }
.hidden-stem { display:flex;justify-content:space-between;gap:6px;align-items:center;background:var(--bg-card2);border-radius:5px;margin:5px 0;padding:5px; }
.hidden-stem b { font-size:1.1rem; }.hidden-stem span { overflow-wrap:anywhere; }.hidden-stem small { color:var(--text-secondary); }
.pillar-fact { display:flex;justify-content:space-between;gap:8px;padding-top:9px;margin-top:8px;border-top:1px solid var(--border); }.pillar-fact span { color:var(--text-secondary); }
.detail-dashboard { display:grid;grid-template-columns:1fr 1fr;gap:20px; }
.master-card,.balance-card { background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:24px;min-width:0; }
.master-card h2 { margin:12px 0 16px;font-family:Georgia,serif;font-size:1.5rem; }.master-card p { font-size:.77rem;color:var(--text-secondary);line-height:1.7;margin:16px 0; }
.element-choice { display:grid;gap:5px;font-size:.8rem;border-top:1px solid var(--border);padding-top:14px;margin-top:14px; }.element-choice strong { color:var(--accent); }
.balance-card h3 { font-family:Georgia,serif;font-size:1.1rem;color:var(--accent);margin-bottom:16px; }
.weighted-row { margin-bottom:14px; }.weighted-row>div:first-child { display:flex;justify-content:space-between;gap:6px;margin-bottom:6px;font-size:.8rem; }.weighted-row span,.weighted-row small { font-size:.68rem;color:var(--text-secondary); }
.star-filters { display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px; }.star-filters button { font-size:.72rem;padding:7px 10px; }
.star-card-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }.star-detail-card { background:var(--bg-card2);border:1px solid var(--border);padding:16px;border-radius:12px; }.star-detail-card strong { color:var(--accent);font-size:.85rem; }.star-detail-card small { display:block;font-size:.7rem;color:var(--text-secondary);margin:6px 0; }.star-detail-card p { font-size:.76rem;line-height:1.65; }
.luck-explorer { margin-top:24px;border:1px solid var(--border);border-radius:16px;padding:22px;background:var(--bg-card); }.luck-explorer p { font-size:.8rem;margin:12px 0; }.luck-explorer label { display:block;font-size:.8rem;color:var(--accent);margin-bottom:8px; }.luck-explorer select { width:100%;white-space:normal; }
.annual-selector { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:16px 0; }.annual-selector button { font-size:.72rem;padding:10px; }
.monthly-grid { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px; }.month-detail { display:grid;gap:7px;padding:14px;background:var(--bg-card2);border:1px solid var(--border);border-radius:10px; }.month-detail strong { font-size:1.6rem;color:var(--accent); }.month-detail span { font-size:.7rem; }.month-detail small { font-size:.65rem;color:var(--text-secondary);overflow-wrap:anywhere; }
.interaction-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0; }.interaction-card { padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--bg-card2);font-size:.75rem; }.interaction-card.major { border-color:var(--accent-dim); }.interaction-card strong { color:var(--accent); }.interaction-card p { margin:8px 0; }.interaction-card small { color:var(--text-secondary); }
#natalWeighted,#transitWeighted { margin:20px 0; }
.transit-pillars .pillar-details { padding:8px;font-size:.65rem; }.transit-pillars .hidden-stem { flex-wrap:wrap; }.transit-pillars .pillar-fact { flex-wrap:wrap; }
@media(max-width:900px) { .star-card-grid,.interaction-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.monthly-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.transit-pillars .pillar-details { font-size:.6rem; } }
@media(max-width:600px) { .container { padding:0 12px; }.profile-workspace,.input-card,.master-card,.balance-card,.luck-explorer { padding:16px; }.workspace-heading { align-items:flex-start;flex-direction:column;gap:8px; }.profile-controls { gap:6px; }.profile-controls select { flex-basis:100%;width:100%; }.profile-controls button { flex:1;font-size:.7rem;padding:9px; }.detail-dashboard { grid-template-columns:1fr; }.star-card-grid,.interaction-grid { grid-template-columns:1fr; }.annual-selector { grid-template-columns:repeat(2,minmax(0,1fr)); }.monthly-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.pillar-details { padding:8px;font-size:.65rem; }.hidden-stem { flex-wrap:wrap; }.pillar-fact { flex-wrap:wrap; }.design-nav { gap:5px; }.design-nav button,.design-nav a { padding:8px;font-size:.7rem; }.location-search-row button { padding:10px; } }

/* Profile actions stay inside the header menu; location lookup belongs to its longitude. */
.account-actions [hidden] { display:none !important; }
.profile-submenu summary { padding:11px 12px;cursor:pointer;font-size:.8rem;color:var(--text-primary); }
.profile-submenu #profileWorkspace { padding:4px 8px 8px;border-left:1px solid var(--border);margin:0 8px; }
.profile-submenu strong,.profile-submenu small,.profile-submenu label { display:block;margin:8px 4px;font-size:.75rem;overflow-wrap:anywhere; }
.profile-submenu small { color:var(--text-secondary); }
.profile-submenu select { box-sizing:border-box;width:100%;min-width:0;padding:8px;background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border2);border-radius:6px;font-size:.75rem; }
#profileStatus { font-size:.75rem;color:var(--accent);overflow-wrap:anywhere; }
#profileStatus:empty { display:none; }
.field .location-lookup { margin:12px 0 0;padding:12px 0 0;border:0;border-top:1px solid var(--border); }
.field .location-search-row { flex-wrap:wrap; }
.field .location-search-row input { width:100%;box-sizing:border-box;flex-basis:100%; }
.field .location-lookup button { white-space:normal;overflow-wrap:anywhere; }

#profileNameDialog { width:min(380px,calc(100vw - 48px));box-sizing:border-box;background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border2);border-radius:12px;padding:24px; }
#profileNameDialog::backdrop { background:#0008; }
#profileNameDialog label { display:block;margin-bottom:12px; }
#profileNameDialog input { width:100%;box-sizing:border-box;background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border2);padding:10px;border-radius:6px; }
.profile-dialog-actions { display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:16px; }
.profile-dialog-actions button { padding:9px 14px;border-radius:6px;border:1px solid var(--border2);background:var(--bg-card2);color:var(--text-primary);cursor:pointer; }

#profileDeleteDialog { width:min(380px,calc(100vw - 48px));box-sizing:border-box;background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border2);border-radius:12px;padding:24px; }
#profileDeleteDialog::backdrop { background:#0008; }

/* Profile selection is always available above the chart. */
.profile-toolbar { margin:0 0 20px;padding:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px; }
.profile-toolbar>label { display:block;margin-bottom:8px;font-size:.75rem;color:var(--text-secondary); }
.profile-toolbar-controls { display:flex;align-items:center;gap:8px;min-width:0; }
.profile-toolbar-controls select { flex:1;width:0;min-width:0; }
.profile-toolbar-controls select,.profile-toolbar-controls button { padding:10px 12px;background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border2);border-radius:8px;font-size:.8rem; }
.profile-toolbar-controls button { flex-shrink:0;cursor:pointer; }
.profile-toolbar-controls button:disabled { opacity:.45;cursor:default; }
.profile-toolbar>small { display:block;margin-top:8px;font-size:.7rem;color:var(--text-secondary); }
#profileNewDialog { width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow-y:auto;box-sizing:border-box;background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border2);border-radius:14px;padding:24px; }
#profileNewDialog::backdrop { background:#0008; }
#profileNewDialog h2 { margin:0 0 20px;font-size:1.2rem; }
#profileNewDialog .field label { display:block;margin-bottom:8px;font-size:.8rem; }
#profileNewDialog input,#profileNewDialog select { width:100%;min-width:0;box-sizing:border-box;padding:10px;background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border2);border-radius:6px; }
.new-natal-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px; }
.new-natal-location { grid-column:1/-1; }
#profileNewError { color:var(--accent);font-size:.8rem; }
@media(max-width:480px) { .profile-toolbar { padding:12px; }.new-natal-grid { grid-template-columns:1fr; }#profileNewDialog { padding:18px; } }

#profileNewDialog,#profileNameDialog,#profileDeleteDialog { margin:auto; }
#profileNewDialog .location-search-row input { flex:1 1 160px;width:auto; }
#profileNewDialog .location-lookup p { font-size:.75rem;line-height:1.5;color:var(--text-secondary); }

/* Short numeric birth fields, with room for the location search alongside longitude. */
.natal-input-grid { display:grid;grid-template-columns:96px 76px 76px 108px 76px minmax(165px,1fr) minmax(170px,1fr);gap:12px;align-items:start; }
#inputSection .field { min-width:0;gap:8px; }
#inputSection .field input:not([type=radio]),#inputSection .field select { height:42px;min-width:0;box-sizing:border-box;padding:8px 10px; }
.natal-field-label { font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);font-weight:600; }
.natal-input-grid .gender-row { min-height:42px;box-sizing:border-box;padding-top:0;gap:12px;flex-wrap:wrap; }
.natal-input-grid .field>label,.natal-input-grid .natal-field-label { min-height:2em;display:flex;align-items:flex-end; }
.natal-location-grid { display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;margin-top:20px;padding-top:18px;border-top:1px solid var(--border);align-items:start; }
.natal-location-grid>.location-lookup { margin:0;padding:0;border:0;min-width:0; }
.natal-location-grid>.location-lookup>label { font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);font-weight:600;margin:0 0 8px;line-height:normal; }
.natal-location-grid .location-search-row { flex-wrap:nowrap;align-items:stretch;gap:8px; }
.natal-location-grid .location-search-row input { flex:1;min-width:0;width:0;box-sizing:border-box;height:42px;padding:8px 10px;cursor:text; }
.natal-location-grid .location-search-row button { flex:none;height:42px;padding:8px 18px; }
.natal-location-grid #locationHint { margin:8px 0 0;font-size:.74rem;line-height:1.5; }
.natal-location-grid small { margin-top:5px;font-size:.7rem; }
.natal-location-grid .location-results:empty,.natal-location-grid #lookupStatus:empty { display:none; }
.tt:focus .tt-box { display:block; }
@media(max-width:1050px) { .natal-input-grid { grid-template-columns:96px repeat(4,minmax(68px,1fr)); }.natal-input-grid>.field:nth-child(6) { grid-column:span 3; }.natal-input-grid>.field:last-child { grid-column:span 2; } }
@media(max-width:600px) { .natal-input-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }.natal-input-grid>.field:nth-child(6) { grid-column:auto; }.natal-input-grid>.field:last-child { grid-column:1/-1; }.natal-input-grid .field>label { min-height:2em; }.natal-location-grid { grid-template-columns:1fr;gap:16px;margin-top:16px; } }

.natal-input-grid.natal-datetime-grid { grid-template-columns:220px 150px minmax(180px,1fr) minmax(180px,1fr);align-items:end; }
.natal-datetime-grid>.field:last-child { grid-column:auto; }
@media(max-width:850px) { .natal-input-grid.natal-datetime-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) { .natal-datetime-grid>.field:nth-child(3),.natal-datetime-grid>.field:last-child { grid-column:1/-1; } }