/* ══════════════════════════════════════════════════════
   ROOT / RESET  — Cosmic Midnight
══════════════════════════════════════════════════════ */
:root {
  --bg:      #030712;
  --bg-deep: #0B0F19;
  --card:    rgba(8, 12, 24, 0.52);
  --border:  rgba(56, 189, 248, 0.22);
  --border2: rgba(148, 163, 184, 0.28);
  --text:    #F8FAFC;
  --muted:   #94A3B8;
  --accent:  #38BDF8;
  --accent-lt: rgba(56, 189, 248, 0.16);
  --accent-dk: #7DD3FC;
  --gold:    #FDE047;
  --violet-lt: rgba(167, 139, 250, 0.18);
  --violet-dk: #C4B5FD;
  --glass: rgba(8, 12, 24, 0.52);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(56, 189, 248, 0.08);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  min-height: 100%;
  color: var(--text);
  color-scheme: dark;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
}
html {
  background-color: #030712;
  background-image:
    radial-gradient(ellipse at 50% 46%, rgba(3, 7, 18, 0.05) 0%, rgba(3, 7, 18, 0.18) 52%, rgba(11, 15, 25, 0.42) 100%),
    linear-gradient(180deg, rgba(3, 7, 18, 0.08) 0%, rgba(11, 15, 25, 0.16) 100%),
    url("/static/tree-of-life-bg.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
body {
  max-width: 1720px;
  margin: 0 auto;
  padding: 18px 16px 60px;
  background-color: transparent;
  background-image:
    radial-gradient(ellipse at 50% 46%, rgba(3, 7, 18, 0.02) 0%, rgba(11, 15, 25, 0.12) 100%),
    url("/static/tree-of-life-bg.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
body::before { content: none; }
h1, h2, h3, h4, .app-title {
  color: #7DD3FC;
  text-shadow: 0 0 12px rgba(125, 211, 252, 0.45);
}

/* ══════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════ */
.app-header {
  margin-bottom: 20px;
  padding: 12px 16px;
  background: rgba(8, 12, 24, 0.52);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.app-title  {
  font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  color: #FDE047;
  text-shadow: 0 0 16px rgba(253, 224, 71, 0.5);
}
.app-title::before { content: '✦ '; color: #7DD3FC; text-shadow: 0 0 10px rgba(125, 211, 252, 0.7); }
.app-sub    {
  font-size: 13px;
  color: #E2E8F0;
  margin-top: 6px;
  letter-spacing: .01em;
  line-height: 1.45;
  max-width: 46rem;
  text-shadow: 0 1px 2px rgba(3, 7, 18, 0.95), 0 0 10px rgba(3, 7, 18, 0.85);
}

/* ══════════════════════════════════════════════════════
   CARD
══════════════════════════════════════════════════════ */
.card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.card-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7DD3FC;
  text-shadow: 0 0 8px rgba(125, 211, 252, 0.4);
  margin-bottom: 14px;
}
.card-quiet {
  background: rgba(8, 12, 24, 0.52);
}
.daily-shifts-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 12px;
}

.app-shell {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.section-nav {
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.section-link {
  text-align: left;
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #94A3B8;
  cursor: pointer;
}
.section-link:hover:not(:disabled) { background: rgba(148, 163, 184, 0.12); color: #F8FAFC; }
.section-link.is-active {
  background: var(--accent-lt);
  color: #FDE047;
  text-shadow: 0 0 8px rgba(253, 224, 71, 0.45);
}
.section-link:disabled {
  opacity: .38;
  cursor: default;
}
.section-stage { min-width: 0; }
.section-panel { display: none; margin-bottom: 0; }
.section-panel.is-active { display: block; }
.section-empty {
  color: var(--muted);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 28px 22px;
  font-size: 13px;
}

/* ══════════════════════════════════════════════════════
   BIRTH INPUT CARD
══════════════════════════════════════════════════════ */
.input-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field label {
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.field input {
  background: rgba(7, 11, 21, 0.55); border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 7px; color: #F8FAFC; font-size: 13px;
  padding: 8px 11px; outline: none;
}
.field input:focus { border-color: #38BDF8; background: rgba(7, 11, 21, 0.8); }
.field.name { flex: 1; min-width: 140px; }
.field.date { min-width: 150px; }
.field.time { min-width: 130px; }
.field.city { flex: 2; min-width: 200px; }
.city-wrap   { position: relative; display: flex; align-items: center; }
.city-wrap input { flex: 1; padding-right: 30px; }
.city-status { position: absolute; right: 10px; font-size: 12px; }
.btn-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.btn {
  background: rgba(10, 15, 30, 0.55);
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 8px;
  box-shadow: inset 0 0 12px rgba(56, 189, 248, 0.08);
  color: #E0F2FE;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: box-shadow .15s, border-color .15s, color .15s;
}
.btn:hover {
  border-color: rgba(125, 211, 252, 0.85);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
  color: #FDE047;
}
.btn-primary {
  background: rgba(2, 132, 199, 0.62);
  border-color: rgba(125, 211, 252, 0.6);
  color: #F8FAFC;
}
.btn-save {
  background: rgba(10, 15, 30, 0.4);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #7DD3FC;
}
.btn-save:hover { color: #FDE047; border-color: rgba(253, 224, 71, 0.55); }

.geo-hint { font-size: 11px; color: var(--muted); margin-top: 10px; }
.geo-hint.ok  { color: #4ADE80; }
.geo-hint.err { color: #FCA5A5; }
.banner { border-radius: 7px; font-size: 12px; margin-top: 10px; padding: 0; }
.banner.err { background: rgba(127, 29, 29, 0.45); border: 1px solid rgba(248, 113, 113, 0.4); color: #FCA5A5; padding: 9px 14px; }

.saved-row   { margin-top: 14px; }
.saved-label { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.chips       { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: rgba(10, 15, 30, 0.72); border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 20px; color: #F8FAFC; cursor: pointer;
  font-size: 12px; font-weight: 500; padding: 4px 14px;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.chip:hover { border-color: #7DD3FC; color: #FDE047; box-shadow: 0 0 15px rgba(56, 189, 248, 0.4); }
.chip-empty { color: var(--muted); font-size: 12px; }
.tz-note { font-size: 10.5px; color: var(--muted); margin-top: 6px; display: none; }

/* ══════════════════════════════════════════════════════
   TABLE BASE
══════════════════════════════════════════════════════ */
.table-scroll { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: rgba(8, 12, 24, 0.52);
  border: 1px solid rgba(56, 189, 248, 0.22);
}
.card table {
  background: transparent;
  border: 0;
}
th, td { padding: 8px 10px; text-align: left; }
td,
.pr-name,
.pr-pos,
.pr-ecl,
.planet-name,
.pos-sign,
.deg-cell,
.cosmic-chart-grid dd {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
thead th {
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #7DD3FC;
  text-shadow: 0 0 8px rgba(125, 211, 252, 0.35), 0 1px 3px rgba(0, 0, 0, 0.9);
  border-bottom: 1px solid var(--border);
  background: transparent;
}
tbody tr:nth-child(even) td { background: rgba(8, 12, 24, 0.2); }

.sub-header th {
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--border); padding: 7px 10px;
}
.sub-planet { min-width: 110px; }

/* ══════════════════════════════════════════════════════
   NATAL GROUPED CARDS
══════════════════════════════════════════════════════ */
.planet-group { margin-bottom: 22px; }
.planet-group:last-child { margin-bottom: 0; }
.group-label {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  padding-bottom: 7px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.planet-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 4px; border-bottom: 1px solid rgba(56, 189, 248, 0.12);
  flex-wrap: wrap;
}
.planet-row:last-child { border-bottom: none; }
.pr-sym  { font-size: 18px; width: 26px; text-align: center; flex-shrink: 0; }
.pr-name { font-size: 13px; font-weight: 600; color: var(--text); min-width: 92px; flex-shrink: 0; }
.pr-const-pill {
  display: inline-block; padding: 2px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600;
  background: var(--violet-lt); color: var(--violet-dk);
  white-space: nowrap;
}
.pr-pos { font-size: 12.5px; color: var(--text); }
.pr-ecl { font-size: 11px; color: var(--muted); margin-left: 4px; }
.pr-house-badge {
  display: inline-block; padding: 2px 9px; border-radius: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  background: var(--accent-lt); color: var(--accent-dk);
  border: 1px solid rgba(56, 189, 248, 0.28); white-space: nowrap; margin-left: auto;
}
.pr-retro-badge {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  background: rgba(194, 65, 12, 0.22); color: #FDBA74; border: 1px solid rgba(251, 146, 60, 0.35);
  flex-shrink: 0;
}
.pr-asc-badge {
  display: inline-block; padding: 2px 9px; border-radius: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  background: rgba(16, 185, 129, 0.16); color: #6EE7B7; border: 1px solid rgba(16, 185, 129, 0.35);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════
   TRANSIT / NATAL TABLE CELLS
══════════════════════════════════════════════════════ */
.td-planet  { white-space: nowrap; }
.planet-sym { font-size: 16px; margin-right: 6px; }
.planet-name{ font-size: 12.5px; font-weight: 600; }
.td-const   { color: var(--muted); font-size: 12px; }
.pos-sign   { font-size: 12.5px; }
.deg-cell   { color: var(--muted); font-size: 11px; }
.table-empty td { color: var(--muted); padding: 20px 10px; }

.transit-house-badge {
  display: inline-block; margin-left: 7px; padding: 2px 7px;
  border-radius: 5px; font-size: 10px; font-weight: 700;
  letter-spacing: .03em; background: var(--accent-lt); color: var(--accent-dk);
  border: 1px solid rgba(56, 189, 248, 0.28); white-space: nowrap;
}
.cross-aspects-table { width: 100%; border-collapse: collapse; }
.cross-aspects-table th, .cross-aspects-table td { padding: 8px 10px; }
.cross-aspects-table tr:nth-child(odd) td { background: rgba(248, 250, 252, 0.03); }
.cross-aspect-planet { font-size: 12px; font-weight: 600; white-space: nowrap; }
.cross-aspect-planet .planet-sym { font-size: 15px; }
.cross-aspect-transit { color: #F8FAFC; }
.cross-aspect-natal { color: #94A3B8; }
.cross-aspect-link { color: var(--accent-dk); font-size: 12px; font-weight: 700; white-space: nowrap; }
.cross-aspect-measure { color: var(--muted); font-size: 11px; white-space: nowrap; }
.cross-aspects-empty { color: var(--muted); font-size: 12px; padding: 12px 10px; }
#daily-shifts-card .table-scroll { overflow-x: hidden; }
#daily-shifts-card .cross-aspects-table { table-layout: fixed; width: 100%; }
#daily-shifts-card .cross-aspect-planet,
#daily-shifts-card .cross-aspect-link,
#daily-shifts-card .cross-aspect-measure {
  white-space: normal;
  overflow-wrap: break-word;
}
#daily-shifts-card .transit-house-badge {
  display: block;
  margin: 4px 0 0;
  width: fit-content;
}
.cross-aspect-controls {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 12px;
}
.cross-aspect-controls label {
  color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
}
.cross-aspect-controls select {
  background: rgba(7, 11, 21, 0.55); border: 1px solid rgba(56, 189, 248, 0.22); border-radius: 6px;
  color: var(--text); font-size: 12px; max-width: 100%; padding: 6px 9px;
}
.cross-aspect-copy-status { color: var(--muted); font-size: 11px; }
.btn-ai-trigger {
  border-color: rgba(56, 189, 248, 0.55);
  color: #7DD3FC;
}
.ai-insights-container {
  margin-top: 24px;
  padding: 20px;
  background: rgba(8, 12, 24, 0.28);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #e2e8f0;
  line-height: 1.6;
}
.ai-insights-text {
  white-space: pre-wrap;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  margin: 0;
}
.ai-insights-container h1,
.ai-insights-container h2,
.ai-insights-container h3 {
  color: #7DD3FC;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.35;
  margin: 16px 0 6px;
  text-shadow: 0 0 12px rgba(125, 211, 252, 0.35);
}
.ai-insights-container h1:first-child,
.ai-insights-container h2:first-child,
.ai-insights-container h3:first-child { margin-top: 0; }
.ai-insights-container p {
  font-size: 13.5px;
  margin: 0 0 10px;
}
.ai-insights-container strong {
  color: #F8FAFC;
  font-weight: 750;
}

.transit-stamp {
  color: var(--accent-dk); font-size: 10.5px;
  font-weight: 600; letter-spacing: .02em;
  margin: 0 0 12px;
}

#welcome-card[hidden] { display: none; }
.blueprint-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.blueprint-card {
  min-width: 0;
  background: rgba(8, 12, 24, 0.28);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.blueprint-card h3 {
  color: #7DD3FC;
  font-size: 13px;
  font-weight: 750;
  margin: 0 0 12px;
  text-shadow: 0 0 12px rgba(125, 211, 252, 0.45);
}
.blueprint-card .ai-insights-container { margin-top: 14px; }
.blueprint-card .cosmic-hd-layout { grid-template-columns: 1fr; }

.cosmic-hd-layout {
  display: grid;
  grid-template-columns: minmax(300px, 480px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin: 0 0 14px;
}
#hd-bodygraph-container,
#tropical-hd-bodygraph {
  background: rgba(8, 12, 24, 0.28);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 8px 10px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
#hd-bodygraph-container svg,
#tropical-hd-bodygraph svg {
  display: block;
  height: auto;
  max-height: none;
  width: 100%;
}
.hd-center-open {
  fill: rgba(15, 23, 42, 0.4);
  stroke: rgba(148, 163, 184, 0.5);
  stroke-width: 1.5px;
}
.hd-center[data-defined="true"] {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.28));
}
.hd-gate text {
  font-family: system-ui, sans-serif;
  font-size: 11px;
  stroke: #0b0f19;
  stroke-width: 2.5px;
  stroke-linejoin: round;
  paint-order: stroke fill;
  text-shadow:
    0 1px 1px rgba(11, 15, 25, 0.95),
    0 1px 2px rgba(11, 15, 25, 0.85);
}
.hd-gate-open text { fill: #CBD5E1; fill-opacity: 1; }
.hd-bodygraph-legend {
  display: flex; flex-wrap: wrap; gap: 8px 12px;
  list-style: none; margin: 4px 0 0; padding: 0 6px;
}
.hd-bodygraph-legend li {
  align-items: center; color: var(--muted); display: flex;
  font-size: 10px; font-weight: 700; gap: 5px; letter-spacing: .03em;
}
.hd-swatch { border-radius: 2px; display: inline-block; height: 8px; width: 14px; }
.hd-swatch-personality {
  background: #FF2EEA;
  box-shadow: 0 0 6px rgba(255, 46, 234, 0.95);
}
.hd-swatch-design {
  background: #111827;
  border: 1px solid #e2e8f0;
  box-shadow: 0 0 6px rgba(226, 232, 240, 0.9);
}
.hd-swatch-both {
  background: repeating-linear-gradient(90deg, #FF2EEA 0 4px, #111827 4px 8px);
  box-shadow: 0 0 6px rgba(226, 232, 240, 0.55);
}
.cosmic-hd-summary {
  background: rgba(8, 12, 24, 0.28);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  margin: 0;
  padding: 14px 16px;
}
.cosmic-hd-summary h3 { font-size: 15px; font-weight: 750; margin: 0 0 12px; }
.cosmic-chart-grid {
  display: grid;
  gap: 12px 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}
.cosmic-chart-grid div { min-width: 0; }
.cosmic-chart-grid dt {
  color: var(--muted); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.cosmic-chart-grid dd { font-size: 15px; font-weight: 750; margin: 2px 0 0; }
.cosmic-channel-list {
  display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 0; padding: 0;
}
.cosmic-channel-list li { font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 700; }
.cosmic-hd-defined { color: var(--muted); font-size: 12px; margin: 10px 0 0; }
.cosmic-hd-summary h4 {
  color: var(--muted); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; margin: 12px 0 6px; text-transform: uppercase;
}
.cosmic-hd-summary p, .cosmic-hd-summary li { font-size: 13px; line-height: 1.45; }
.cosmic-hd-summary ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cosmic-hd-bridge { color: #34D399; font-weight: 650; }
.cosmic-hd-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.cosmic-hd-column, .cosmic-hd-transits {
  background: rgba(8, 12, 24, 0.28);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
  padding: 12px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.cosmic-hd-transits { margin-top: 14px; }
.cosmic-hd-column h3, .cosmic-hd-transits h3 {
  font-size: 13px; font-weight: 750; margin: 0 0 8px;
}
.cosmic-hd-table { border-collapse: collapse; width: 100%; }
.cosmic-hd-table th, .cosmic-hd-table td {
  border-bottom: 1px solid var(--border);
  font-size: 12px; padding: 7px 6px; text-align: left; vertical-align: top;
}
.cosmic-hd-table th {
  color: var(--muted); font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.cosmic-hd-table tr:last-child td { border-bottom: 0; }
.cosmic-hd-planet { font-weight: 650; white-space: nowrap; }
.cosmic-hd-planet .planet-sym { font-size: 15px; }
.cosmic-hd-empty { color: var(--muted); font-size: 12px; margin: 0; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE — TABLET  (≤ 900px)
══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .cosmic-hd-columns, .cosmic-chart-grid, .cosmic-hd-layout, .blueprint-grid { grid-template-columns: 1fr; }
  .field.name, .field.city { min-width: 180px; }
  .app-shell { grid-template-columns: 1fr; }
  .section-nav {
    position: sticky;
    top: 0;
    z-index: 3;
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
  }
  .section-link { white-space: nowrap; }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — PHONE  (≤ 700px)
══════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* ── Layout ────────────────────────────────────── */
  body { padding: 12px 12px 60px; }
  .card { padding: 16px 14px; margin-bottom: 14px; }

  /* ── Birth input form ──────────────────────────── */
  .input-bar { gap: 10px; }
  .field,
  .field.name,
  .field.date,
  .field.time,
  .field.city {
    min-width: 0;
    width: 100%;
    flex: 1 1 100%;
  }
  /* Date + Time share one row */
  .field.date { flex: 1 1 calc(50% - 6px); width: auto; }
  .field.time { flex: 1 1 calc(50% - 6px); width: auto; }

  .btn-row { width: 100%; gap: 8px; }
  .btn-primary { flex: 1; min-height: 44px; }
  .btn-save    { min-height: 44px; padding: 9px 16px; }

  /* ── Natal grouped cards ───────────────────────── */
  .planet-row { gap: 6px; flex-wrap: wrap; }
  .pr-sym  { font-size: 16px; width: 22px; }
  .pr-name { min-width: 0; font-size: 12px; }
  /* Ecl° is secondary info — hide it to save space */
  .pr-ecl  { display: none; }
  /* House badge stays right-aligned on first flex line via margin-left:auto */

  /* ── Tables ────────────────────────────────────── */
  table { font-size: 11px; }
  th, td { padding: 6px 7px; }
  .sub-planet { min-width: 80px; }

  .planet-sym { font-size: 14px; margin-right: 3px; }
  .planet-name { font-size: 11px; }
}