@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  --bg: #060912;
  --bg-elev: #0b1020;
  --bg-elev-2: #11182c;
  --bg-strip: #070b17;
  --text: #eef4ff;
  --text-muted: rgba(238, 244, 255, 0.72);
  --text-subtle: rgba(238, 244, 255, 0.45);
  --border: rgba(238, 244, 255, 0.16);
  --border-soft: rgba(238, 244, 255, 0.08);
  --accent: #c9a34e;
  --accent-2: #6db7c8;
  --accent-on: #070b17;
  --warn-bg: rgba(201, 88, 70, 0.14);
  --warn-border: rgba(201, 88, 70, 0.55);
  --code-bg: #03050a;
  --danger: #c95846;
  --success: #b8d69a;
  --field-error: #d9978b;
  --body-bg:
    radial-gradient(circle at 20% 0%, rgba(109, 183, 200, 0.16), transparent 34rem),
    radial-gradient(circle at 88% 8%, rgba(201, 163, 78, 0.12), transparent 26rem),
    linear-gradient(180deg, #05070d 0%, var(--bg) 100%);
  --frame-bg: rgba(11, 16, 32, 0.92);
  --topbar-bg: rgba(17, 24, 44, 0.96);
  --active-subject-border: rgba(201, 163, 78, 0.38);
  --active-subject-bg:
    linear-gradient(90deg, rgba(201, 163, 78, 0.12), rgba(109, 183, 200, 0.06)),
    rgba(7, 11, 23, 0.74);
  --panel-bg-soft: rgba(7, 11, 23, 0.42);
  --panel-bg-strong: rgba(17, 24, 44, 0.86);
  --panel-bg-faint: rgba(7, 11, 23, 0.55);
  --selected-bg: rgba(201, 163, 78, 0.14);
  --chart-bg:
    radial-gradient(circle at 50% 50%, rgba(109, 183, 200, 0.08), transparent 18rem),
    rgba(3, 5, 10, 0.42);
  --timeline-bg:
    linear-gradient(90deg, rgba(201, 163, 78, 0.08), transparent 22%, transparent 78%, rgba(109, 183, 200, 0.08)),
    rgba(3, 5, 10, 0.42);
  --popover-bg: rgba(8, 13, 24, 0.88);
  --timeline-axis: linear-gradient(90deg, rgba(201, 163, 78, 0.72), rgba(109, 183, 200, 0.54));
  --timing-dot-border: rgba(255, 255, 255, 0.42);
  --timing-dot-shadow: 0 0 18px rgba(201, 163, 78, 0.36);
  --timing-hard-shadow: 0 0 18px rgba(201, 88, 70, 0.34);
  --timing-soft-shadow: 0 0 18px rgba(109, 183, 200, 0.3);
  --wheel-outer-stroke: rgba(201, 163, 78, 0.72);
  --wheel-sign-stroke: rgba(201, 163, 78, 0.38);
  --wheel-house-stroke: rgba(109, 183, 200, 0.24);
  --wheel-aspect-stroke: rgba(238, 244, 255, 0.16);
  --wheel-hard-aspect-stroke: rgba(201, 88, 70, 0.4);
  --wheel-soft-aspect-stroke: rgba(109, 183, 200, 0.34);
  --wheel-axis-stroke: rgba(201, 163, 78, 0.55);
}

body[data-theme="paper"] {
  --bg: #ffffff;
  --bg-elev: #ffffff;
  --bg-elev-2: #f4f4f4;
  --bg-strip: #fafafa;
  --text: #111111;
  --text-muted: rgba(17, 17, 17, 0.72);
  --text-subtle: rgba(17, 17, 17, 0.48);
  --border: rgba(17, 17, 17, 0.18);
  --border-soft: rgba(17, 17, 17, 0.1);
  --accent: #c51f1a;
  --accent-2: #6b6b6b;
  --accent-on: #ffffff;
  --warn-bg: rgba(197, 31, 26, 0.08);
  --warn-border: rgba(197, 31, 26, 0.52);
  --code-bg: #f7f7f7;
  --danger: #c51f1a;
  --success: #237a3b;
  --field-error: #c51f1a;
  --body-bg: #f7f7f7;
  --frame-bg: #ffffff;
  --topbar-bg: #ffffff;
  --active-subject-border: rgba(197, 31, 26, 0.3);
  --active-subject-bg: linear-gradient(90deg, rgba(197, 31, 26, 0.07), rgba(0, 0, 0, 0.025));
  --panel-bg-soft: #f6f6f6;
  --panel-bg-strong: #fbfbfb;
  --panel-bg-faint: #f4f4f4;
  --selected-bg: rgba(197, 31, 26, 0.08);
  --chart-bg: #fbfbfb;
  --timeline-bg: linear-gradient(90deg, rgba(197, 31, 26, 0.06), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.04));
  --popover-bg: rgba(255, 255, 255, 0.96);
  --timeline-axis: linear-gradient(90deg, rgba(197, 31, 26, 0.48), rgba(17, 17, 17, 0.16));
  --timing-dot-border: rgba(17, 17, 17, 0.26);
  --timing-dot-shadow: none;
  --timing-hard-shadow: none;
  --timing-soft-shadow: none;
  --wheel-outer-stroke: rgba(197, 31, 26, 0.5);
  --wheel-sign-stroke: rgba(17, 17, 17, 0.14);
  --wheel-house-stroke: rgba(17, 17, 17, 0.12);
  --wheel-aspect-stroke: rgba(17, 17, 17, 0.12);
  --wheel-hard-aspect-stroke: rgba(197, 31, 26, 0.4);
  --wheel-soft-aspect-stroke: rgba(17, 17, 17, 0.22);
  --wheel-axis-stroke: rgba(197, 31, 26, 0.46);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100dvh;
  color: var(--text);
  background: var(--body-bg);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  line-height: 1.5;
}

.frame {
  width: 100%;
  max-width: 1180px;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--frame-bg);
  border-left: 1px solid var(--border-soft);
  border-right: 1px solid var(--border-soft);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: var(--topbar-bg);
  border-bottom: 2px solid var(--accent);
}

.topbar-home {
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-decoration: none;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.topbar-home:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.topbar-title {
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--text);
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-tier {
  padding: 3px 8px;
  border: 1px solid var(--border);
  color: var(--text-subtle);
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.theme-control {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-subtle);
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.theme-control select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg-strip);
  color: var(--text);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.page-body {
  padding: 28px 24px 56px;
}

h1, h2, h3 {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-weight: 400;
  letter-spacing: 0.08em;
}

h1 {
  margin-bottom: 26px;
  font-size: 26px;
}

h2 {
  margin-bottom: 6px;
  font-size: 18px;
}

p {
  margin: 0 0 14px;
}

.muted {
  color: var(--text-muted);
  font-size: 15px;
  font-style: italic;
}

.notice {
  margin: 0 0 24px;
  padding: 12px 16px;
  background: var(--bg-elev-2);
  border-left: 2px solid var(--accent-2);
  color: var(--text-muted);
}

.notice.error {
  background: var(--warn-bg);
  border-left-color: var(--warn-border);
}

.active-subject-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 24px;
  padding: 16px 18px;
  border: 1px solid var(--active-subject-border);
  background: var(--active-subject-bg);
}

.active-subject-kicker {
  color: var(--accent);
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.active-subject-name {
  margin-top: 4px;
  color: var(--text);
  font-family: 'Cinzel', serif;
  font-size: 18px;
  letter-spacing: 0.08em;
}

.active-subject-meta {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 14px;
}

.layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 28px;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 16px;
}

.card {
  margin-bottom: 30px;
}

.card-header {
  margin: 0 0 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
  color: var(--accent);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.subject-choice-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.subject-choice {
  padding: 11px 10px;
  border: 1px solid var(--border-soft);
  background: var(--panel-bg-soft);
  color: var(--text-muted);
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.subject-choice.active {
  border-color: var(--accent);
  background: var(--selected-bg);
  color: var(--accent);
}

.subject-mode-panel {
  display: none;
}

.subject-mode-panel.active {
  display: block;
}

.subject-helper {
  margin-bottom: 14px;
  font-size: 14px;
}

.field {
  display: block;
  margin-bottom: 16px;
}

.field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.field-input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg-strip);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}

select.field-input {
  appearance: none;
  -webkit-appearance: none;
}

.field-input:focus {
  outline: none;
  border-color: var(--accent);
}

.field.invalid .field-input {
  border-color: var(--warn-border);
}

.field-input[readonly] {
  color: var(--text-subtle);
  cursor: default;
}

.field-error {
  display: block;
  min-height: 16px;
  margin-top: 5px;
  color: var(--field-error);
  font-size: 13px;
  line-height: 1.2;
}

.field-textarea {
  min-height: 82px;
  resize: vertical;
}

.field-row {
  display: flex;
  gap: 10px;
}

.field-row .field {
  flex: 1 1 0;
}

.field-row.compact {
  margin-bottom: 18px;
}

.button-stack {
  display: grid;
  gap: 10px;
}

.button-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.button-row .btn {
  flex: 1 1 auto;
  padding-left: 12px;
  padding-right: 12px;
}

.location-row {
  align-items: center;
  margin: -6px 0 12px;
}

.location-status {
  flex: 1 1 150px;
  color: var(--text-subtle);
  font-size: 13px;
  line-height: 1.25;
}

.location-status.valid {
  color: var(--success);
}

.location-results {
  display: grid;
  gap: 7px;
  margin: 0 0 18px;
}

.location-option {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  background: var(--panel-bg-strong);
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.location-option:hover {
  border-color: var(--accent);
  color: var(--text);
}

.db-tools {
  margin: 4px 0 18px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  background: var(--panel-bg-soft);
}

.db-tools.compact-db {
  margin-bottom: 12px;
}

.db-results {
  margin-top: 12px;
  color: var(--text-subtle);
  font-size: 14px;
  line-height: 1.35;
}

.db-results.error {
  color: var(--field-error);
}

.db-results.success {
  color: var(--success);
}

.profile-note {
  margin-top: 12px;
  color: var(--text-subtle);
  font-size: 14px;
  line-height: 1.35;
}

.profile-note.success {
  color: var(--success);
}

.profile-note.error {
  color: var(--field-error);
}

.match-list {
  display: grid;
  gap: 7px;
}

.match-button {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  background: var(--panel-bg-strong);
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.match-button:hover {
  border-color: var(--accent);
  color: var(--text);
}

.match-title {
  display: block;
  color: var(--text);
}

.match-meta {
  display: block;
  color: var(--text-subtle);
  font-size: 12px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 15px;
}

.check-row.midpoint-check {
  min-height: 44px;
  margin-bottom: 16px;
}

.body-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 10px;
}

.body-check {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 14px;
}

.btn {
  display: inline-block;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn:disabled {
  border-color: var(--border-soft);
  color: var(--text-subtle);
  cursor: not-allowed;
  opacity: 0.45;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}

.btn-primary:hover {
  background: var(--accent);
  color: var(--accent-on);
}

.btn-primary:disabled {
  background: transparent;
  color: var(--text-subtle);
}

.btn-block {
  display: block;
  width: 100%;
}

.tabbar {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.tab {
  flex: 1 1 0;
  padding: 12px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tab.active {
  border-bottom-color: var(--accent);
  color: var(--text);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.section-profile-card {
  display: grid;
  grid-template-columns: minmax(180px, 280px) auto 1fr;
  gap: 10px;
  align-items: end;
  margin: 0 0 20px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  background: var(--panel-bg-soft);
}

.section-profile-field {
  margin-bottom: 0;
}

.section-profile-status {
  min-height: 42px;
  display: flex;
  align-items: center;
  color: var(--text-muted);
  font-size: 14px;
}

.profile-manager {
  padding: 0 0 18px;
  border-bottom: 1px solid var(--border-soft);
}

.output.empty {
  padding: 18px 0;
  color: var(--text-subtle);
  font-style: italic;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.metric {
  padding: 12px;
  border: 1px solid var(--border-soft);
  background: var(--panel-bg-faint);
}

.metric-label {
  color: var(--text-subtle);
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.metric-value {
  margin-top: 4px;
  color: var(--text);
  font-size: 17px;
}

.table-wrap {
  overflow-x: auto;
  margin-bottom: 24px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th, td {
  padding: 8px 9px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--text-muted);
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-title {
  margin: 24px 0 12px;
  color: var(--accent-2);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.day-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.day-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
}

.day-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  color: var(--text);
}

.hit-line {
  color: var(--text-muted);
  font-size: 14px;
}

.hit-context {
  color: var(--text-subtle);
  font-size: 13px;
}

.timing-chart {
  position: relative;
  min-height: calc(112px + (var(--lanes, 3) * 44px));
  margin: 10px 0 24px;
  padding: 42px 18px 34px;
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  background: var(--timeline-bg);
}

.timing-chart.empty-chart {
  min-height: auto;
  color: var(--text-muted);
  font-size: 14px;
}

.timing-axis {
  position: absolute;
  right: 18px;
  bottom: 32px;
  left: 18px;
  height: 1px;
  background: var(--timeline-axis);
}

.timing-bound {
  position: absolute;
  bottom: 8px;
  color: var(--text-muted);
  font-size: 11px;
}

.timing-start {
  left: 18px;
}

.timing-end {
  right: 18px;
}

.timing-event {
  position: absolute;
  top: calc(34px + (var(--lane, 0) * 44px));
  left: var(--x, 0%);
  max-width: 180px;
  transform: translateX(-50%);
}

.timing-dot {
  width: 12px;
  height: 12px;
  margin: 0 auto 8px;
  border: 1px solid var(--timing-dot-border);
  border-radius: 999px;
  background: var(--accent);
  box-shadow: var(--timing-dot-shadow);
}

.timing-event.aspect-square .timing-dot,
.timing-event.aspect-opposition .timing-dot,
.timing-event.aspect-conjunction .timing-dot {
  background: var(--danger);
  box-shadow: var(--timing-hard-shadow);
}

.timing-event.aspect-trine .timing-dot,
.timing-event.aspect-sextile .timing-dot {
  background: var(--accent-2);
  box-shadow: var(--timing-soft-shadow);
}

.timing-label {
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  background: var(--popover-bg);
  text-align: center;
}

.timing-label strong,
.timing-label span {
  display: block;
}

.timing-label strong {
  color: var(--text);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.timing-label span {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
}

.wheel-shell {
  overflow-x: auto;
  margin: 10px 0 26px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  background: var(--chart-bg);
}

.chart-wheel {
  display: block;
  width: min(100%, 760px);
  min-width: 600px;
  margin: 0 auto;
}

.wheel-circle {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
}

.wheel-circle.outer {
  stroke: var(--wheel-outer-stroke);
  stroke-width: 1.5;
}

.wheel-line {
  stroke-width: 1;
}

.sign-line {
  stroke: var(--wheel-sign-stroke);
}

.house-line {
  stroke: var(--wheel-house-stroke);
}

.wheel-aspect {
  stroke: var(--wheel-aspect-stroke);
  stroke-width: 1;
}

.wheel-aspect.conjunction,
.wheel-aspect.opposition,
.wheel-aspect.square {
  stroke: var(--wheel-hard-aspect-stroke);
}

.wheel-aspect.trine,
.wheel-aspect.sextile {
  stroke: var(--wheel-soft-aspect-stroke);
}

.wheel-sign,
.wheel-house-label,
.wheel-planet-label,
.wheel-center-title,
.wheel-center-subtitle {
  fill: var(--text-muted);
  font-family: 'Cinzel', serif;
  text-anchor: middle;
}

.wheel-sign {
  font-size: 11px;
  letter-spacing: 0.08em;
}

.wheel-house-label {
  fill: var(--accent-2);
  font-size: 10px;
}

.wheel-planet-label {
  fill: var(--text);
  font-size: 14px;
}

.wheel-retro {
  fill: var(--accent);
  font-size: 7px;
}

.wheel-degree-label {
  fill: var(--text-subtle);
  font-size: 7.5px;
  text-anchor: middle;
  font-family: 'Cinzel', serif;
}

.wheel-axis-line {
  stroke: var(--wheel-axis-stroke);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.wheel-axis-label {
  fill: var(--accent);
  font-size: 9px;
  font-weight: bold;
  text-anchor: middle;
  dominant-baseline: middle;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.06em;
}

.wheel-center-title {
  fill: var(--accent);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.wheel-center-subtitle {
  font-size: 9px;
}

details {
  margin-top: 22px;
}

summary {
  color: var(--text-muted);
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

pre {
  overflow: auto;
  max-height: 420px;
  padding: 14px;
  background: var(--code-bg);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 860px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .panel-head {
    display: block;
  }

  .section-profile-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .active-subject-card {
    display: block;
  }

  .active-subject-card .btn {
    width: 100%;
    margin-top: 14px;
  }

  .panel-head .btn {
    width: 100%;
    margin-top: 14px;
  }
}