:root {
  --ui-bg: #0f0b22;
  --ui-surface: #1a1438;
  --ui-surface-raised: #211a44;
  --ui-text: #ece8f7;
  --ui-muted: #a79fc6;
  --ui-accent: #c9a84c;
  --ui-accent-soft: #e6cf86;
  --ui-line: rgba(201, 168, 76, .18);
  --ui-focus: #f2dc8d;
  --ui-content: 1120px;
  --ui-reading: 720px;
  --ui-radius: 14px;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 24px;
  --ui-space-6: 32px;
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ui-display: Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-padding-top: calc(var(--oh-height, 66px) + 16px); }
body { overflow-x: clip; }
button, input, select, textarea { font: inherit; }
img, video, canvas, svg { max-width: 100%; }
p, li, dd, .ai-text, .interp-block { overflow-wrap: anywhere; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ui-focus) !important;
  outline-offset: 3px !important;
}

:where(.btn, .btn-primary, .btn-secondary, .btn-g, .btn-p, .result-main-btn) {
  min-height: 44px;
}

/* Calendar actions stay flat: glow and gold gradients create false hierarchy. */
html[data-oraculum-app="jyotish"] #muhurta-content .btn {
  box-shadow: none !important;
}
html[data-oraculum-app="jyotish"] #muhurta-content .btn:not(.secondary):not(.tertiary) {
  background: #d8b957 !important;
}
html[data-oraculum-app="jyotish"] #muhurta-content .btn:not(.secondary):not(.tertiary):hover {
  background: #e0c46c !important;
}

/* Dynamic content must grow in normal document flow. */
html[data-oraculum-app] :where(.screen, .sc, .panel, .card, .summary-card, .daily-card, .advice-card, .practice-card, .note-card) {
  min-width: 0;
}
html[data-oraculum-app] :where(.panel, .card, .summary-card, .daily-card, .advice-card, .practice-card, .note-card) {
  height: auto;
}
html[data-oraculum-app="jyotish"] #screen-compat-detail,
html[data-oraculum-app="jyotish"] #compat-forecast-panels,
html[data-oraculum-app="jyotish"] #compat-forecast-panels > .panel,
html[data-oraculum-app="jyotish"] #compat-forecast-panels .ai-text {
  position: relative;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
html[data-oraculum-app="jyotish"] #compat-forecast-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ui-space-4);
  align-items: start;
}
html[data-oraculum-app="jyotish"] #compat-forecast-panels > .panel { margin: 0 !important; }
html[data-oraculum-app="jyotish"] #compat-forecast-panels button[aria-busy="true"] {
  cursor: wait;
  opacity: .72;
}

html[data-oraculum-app="jyotish"] #screen-onboarding.active {
  display: grid;
  grid-template-columns: minmax(0, 720px);
  align-content: start;
  justify-content: center;
}
html[data-oraculum-app="jyotish"] #screen-onboarding > h2,
html[data-oraculum-app="jyotish"] #screen-onboarding > p,
html[data-oraculum-app="jyotish"] #screen-onboarding > .onboarding-card {
  width: 100%;
  max-width: 720px;
}
html[data-oraculum-app="jyotish"] #screen-onboarding > .onboarding-card {
  padding: var(--ui-space-5) !important;
}
html[data-oraculum-app="jyotish"] #screen-onboarding .onboarding-card > details {
  padding-block: var(--ui-space-1);
  border-top: 1px solid rgba(201, 168, 76, .10);
}
html[data-oraculum-app="jyotish"] #screen-onboarding .onboarding-card > details summary {
  min-height: 40px;
  display: flex;
  align-items: center;
}

html[data-oraculum-app="jyotish"].term-modal-open,
html[data-oraculum-app="jyotish"].term-modal-open body,
html[data-oraculum-app="jyotish"].term-modal-open #app {
  overflow: hidden !important;
}
html[data-oraculum-app="jyotish"] #term-modal {
  padding: 16px;
}
html[data-oraculum-app="jyotish"] #term-modal .modal-card {
  overscroll-behavior: contain;
}

/* Compact destructive confirmation, shared by all Jyotish delete actions. */
html[data-oraculum-app="jyotish"] #confirm-ov {
  padding: 20px !important;
  background: rgba(4, 3, 12, .72) !important;
  backdrop-filter: blur(8px);
}
html[data-oraculum-app="jyotish"] #confirm-ov > div {
  width: min(420px, calc(100vw - 32px)) !important;
  max-width: 420px !important;
  padding: 22px !important;
  border: 1px solid rgba(201, 168, 76, .24) !important;
  border-radius: 18px !important;
  background: #191432 !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, .55) !important;
}
html[data-oraculum-app="jyotish"] #confirm-title {
  margin: 0 0 8px !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
}
html[data-oraculum-app="jyotish"] #confirm-text {
  margin: 0 0 20px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}
html[data-oraculum-app="jyotish"] #confirm-text + div {
  justify-content: flex-end;
  gap: 10px !important;
}
html[data-oraculum-app="jyotish"] #confirm-ov button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 112px !important;
  min-height: 42px !important;
  padding: 9px 16px !important;
  box-shadow: none !important;
}
html[data-oraculum-app="jyotish"] #confirm-ov .secondary {
  color: var(--ui-text) !important;
  background: transparent !important;
  border-color: rgba(233, 226, 244, .22) !important;
}
html[data-oraculum-app="jyotish"] #confirm-ov .danger {
  color: #fff !important;
  background: #a94552 !important;
  border-color: #bf5a66 !important;
}

html[data-oraculum-app="morfey"] .mirror-requirement {
  max-width: 620px;
  margin-bottom: 16px;
  padding: 16px;
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid rgba(201, 168, 76, .26);
  border-radius: 12px;
  background: rgba(201, 168, 76, .07);
}
html[data-oraculum-app="morfey"] .mirror-requirement-heading {
  margin-bottom: 10px;
  color: var(--ui-gold-soft);
  font-family: var(--ui-display);
  font-size: 20px;
  font-weight: 700;
}
html[data-oraculum-app="morfey"] .mirror-requirement-title {
  margin-bottom: 3px;
  color: var(--ui-text);
  font-weight: 700;
}
html[data-oraculum-app="morfey"] .mirror-progress {
  height: 6px;
  margin: 12px 0 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}
html[data-oraculum-app="morfey"] .mirror-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ui-gold);
}
html[data-oraculum-app="morfey"] .mirror-progress-label {
  color: var(--ui-muted);
  font-size: 12px;
}
html[data-oraculum-app="morfey"] .mirror-record-btn {
  width: auto !important;
  margin-top: 14px;
  padding: 10px 16px !important;
}
html[data-oraculum-app="morfey"] .mirror-card:has(.mirror-requirement) > div:nth-child(2),
html[data-oraculum-app="morfey"] .mirror-card:has(.mirror-requirement) > div:nth-child(3) {
  display: none !important;
}
html[data-oraculum-app="morfey"] .btn-mir:disabled {
  cursor: not-allowed !important;
  opacity: .38 !important;
  filter: grayscale(.35);
  box-shadow: none !important;
}

@media (min-width: 900px) {
  html[data-oraculum-app="jyotish"] #screen-onboarding.active {
    padding-top: calc(var(--oraculum-sitebar-h) + 24px) !important;
  }
  html[data-oraculum-app="jyotish"] #screen-onboarding > h2 { margin-bottom: 4px !important; }
  html[data-oraculum-app="jyotish"] #screen-onboarding > p { margin-bottom: 12px !important; }
  html[data-oraculum-app="jyotish"] #screen-onboarding .row-2 { gap: var(--ui-space-3); }
  html[data-oraculum-app="jyotish"] #term-modal {
    align-items: center !important;
    justify-content: center !important;
    padding: calc(var(--oh-height, 66px) + 20px) 24px 24px !important;
  }
  html[data-oraculum-app="jyotish"] #term-modal .modal-card {
    width: min(520px, calc(100vw - 48px)) !important;
    max-width: 520px !important;
    max-height: min(620px, calc(100dvh - var(--oh-height, 66px) - 64px)) !important;
    margin: 0 !important;
    padding: 24px !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: 0 24px 72px rgba(0, 0, 0, .55) !important;
    animation: none !important;
  }
  html[data-oraculum-app="jyotish"] #term-modal .modal-card h3 {
    margin: 0 0 4px !important;
    font-size: 20px !important;
  }
  html[data-oraculum-app="jyotish"] #term-modal .modal-card .close-row {
    position: sticky;
    bottom: -24px;
    margin: 16px -24px -24px !important;
    padding: 14px 24px 20px;
    background: linear-gradient(180deg, rgba(26, 20, 56, 0), #1a1438 24%);
  }
}

@media (min-width: 900px) {
  html[data-oraculum-app] body { font-family: var(--ui-font); color: var(--ui-text); }
  html[data-oraculum-app="jyotish"] #screen-compat-detail { padding-bottom: 64px !important; }
  html[data-oraculum-app="jyotish"] #compat-forecast-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-oraculum-app="jyotish"] #compat-forecast-panels > .panel { align-self: start; }

  /* Natal chart: chart and compact facts above, interpretation below. */
  html[data-oraculum-app="jyotish"] #chart-content:not([style*="display: none"]):not([style*="display:none"]) {
    display: block !important;
  }
  html[data-oraculum-app="jyotish"] #chart-content > .chart-overview {
    display: grid;
    grid-template-columns: minmax(380px, 1.05fr) minmax(330px, .95fr);
    gap: 18px;
    align-items: start;
  }
  html[data-oraculum-app="jyotish"] #chart-content > .chart-overview > .panel,
  html[data-oraculum-app="jyotish"] #chart-content .chart-facts > .panel {
    margin: 0 !important;
  }
  html[data-oraculum-app="jyotish"] #chart-content .chart-facts {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
  }
  html[data-oraculum-app="jyotish"] #chart-content .chart-visual-stack {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
  }
  html[data-oraculum-app="jyotish"] #chart-content .chart-visual-stack > .panel {
    width: 100%;
    margin: 0 !important;
  }
  html[data-oraculum-app="jyotish"] #chart-content .chart-visual-stack > .panel:first-child {
    padding-block: 16px !important;
  }
  html[data-oraculum-app="jyotish"] #chart-content .chart-visual-stack > .panel:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  html[data-oraculum-app="jyotish"] #chart-content > .chart-columns {
    display: grid;
    grid-template-columns: minmax(360px, 5fr) minmax(480px, 7fr);
    gap: 18px;
    align-items: start;
  }
  html[data-oraculum-app="jyotish"] #chart-content .chart-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
  }
  html[data-oraculum-app="jyotish"] #chart-content .panel {
    margin: 0 !important;
    padding: 22px !important;
    min-width: 0;
  }
  html[data-oraculum-app="jyotish"] #chart-content > .panel { margin-top: 18px !important; }
  html[data-oraculum-app="jyotish"] #chart-content .chart-grid {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    margin-inline: auto;
  }
  html[data-oraculum-app="jyotish"] #chart-content .label {
    margin-bottom: 12px !important;
    font-size: 12px !important;
    letter-spacing: .12em !important;
  }
  html[data-oraculum-app="jyotish"] #chart-content #lagna-info {
    font-size: 15px;
    line-height: 1.55;
  }
  html[data-oraculum-app="jyotish"] #chart-content #planets-list {
    display: block;
  }
  html[data-oraculum-app="jyotish"] #chart-content #planets-list > div {
    min-height: 42px;
    display: grid !important;
    grid-template-columns: minmax(108px, auto) minmax(0, 1fr);
    align-items: center !important;
    gap: 14px;
    padding: 7px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(201, 168, 76, .11) !important;
    border-radius: 0;
    background: transparent;
  }
  html[data-oraculum-app="jyotish"] #chart-content #planets-list > div:last-child {
    border-bottom: 0 !important;
  }
  html[data-oraculum-app="jyotish"] #chart-content #planets-list > div > div:first-child {
    min-width: 0;
    white-space: nowrap;
  }
  html[data-oraculum-app="jyotish"] #chart-content #planets-list > div > div:last-child {
    min-width: 0;
    max-width: none;
    line-height: 1.35;
    overflow-wrap: normal;
  }
  html[data-oraculum-app="jyotish"] #chart-content > #yogas-panel,
  html[data-oraculum-app="jyotish"] #chart-content > #chart-interpret-panel {
    margin-top: 18px !important;
  }

  /* Life stages: one coherent stage summary, interpretation, then a 120-year timeline. */
  html[data-oraculum-app="jyotish"] #dasha-content:not([style*="display: none"]):not([style*="display:none"]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
  }
  html[data-oraculum-app="jyotish"] #dasha-content > .panel {
    margin: 0 !important;
    padding: 20px 22px !important;
    min-width: 0;
  }
  html[data-oraculum-app="jyotish"] #dasha-content > #dasha-now-panel,
  html[data-oraculum-app="jyotish"] #dasha-content > #sade-sati-panel-dasha {
    height: 100%;
    box-sizing: border-box;
  }
  html[data-oraculum-app="jyotish"] #dasha-content > #dasha-timeline-panel {
    grid-column: 1 / -1 !important;
    padding-bottom: 16px !important;
  }
  html[data-oraculum-app="jyotish"] #dasha-content > #dasha-interpret-panel {
    grid-column: 1 / -1 !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 28px;
    align-items: center;
  }
  html[data-oraculum-app="jyotish"] #dasha-content > #dasha-interpret-panel > .label { grid-column: 1 / -1; }
  html[data-oraculum-app="jyotish"] #dasha-content > #dasha-interpret-panel > #dasha-interpret-loading,
  html[data-oraculum-app="jyotish"] #dasha-content > #dasha-interpret-panel > #dasha-interpret-result,
  html[data-oraculum-app="jyotish"] #dasha-content > #dasha-interpret-panel > #dasha-interpret-error { grid-column: 1 / -1; }
  html[data-oraculum-app="jyotish"] #dasha-now-panel #dasha-current { display: grid; gap: 0; }
  html[data-oraculum-app="jyotish"] #dasha-now-panel .dasha-line {
    min-height: 46px;
    padding: 8px 0 !important;
  }
  html[data-oraculum-app="jyotish"] #dasha-now-panel .dasha-line:first-child .planet {
    font-size: 19px;
    font-weight: 700;
  }
  html[data-oraculum-app="jyotish"] #dasha-content #dasha-interpret-result {
    max-width: none;
    columns: 2;
    column-gap: 36px;
  }
  html[data-oraculum-app="jyotish"] #dasha-content #dasha-interpret-result > * {
    break-inside: avoid;
  }
  html[data-oraculum-app="jyotish"] #dasha-content #dasha-interpret-panel .btn {
    width: auto !important;
    min-width: 220px !important;
  }
  html[data-oraculum-app="jyotish"] #dasha-content #dasha-mahalist {
    display: grid;
    grid-template-columns: repeat(9, minmax(96px, 1fr));
    gap: 0;
    margin-top: 16px;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  html[data-oraculum-app="jyotish"] #dasha-content #dasha-mahalist > .dasha-line {
    position: relative;
    display: flex;
    min-width: 96px;
    min-height: 104px;
    padding: 17px 12px 10px !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 7px;
    border: 0 !important;
    border-top: 2px solid rgba(201, 168, 76, .22) !important;
    border-right: 1px solid rgba(201, 168, 76, .11) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  html[data-oraculum-app="jyotish"] #dasha-content #dasha-mahalist > .dasha-line::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5f5779;
    box-shadow: 0 0 0 3px var(--panel, #17122c);
  }
  html[data-oraculum-app="jyotish"] #dasha-content #dasha-mahalist > .dasha-line.is-active {
    border-top-color: rgba(167, 139, 250, .62) !important;
    background: rgba(139, 124, 190, .10) !important;
  }
  html[data-oraculum-app="jyotish"] #dasha-content #dasha-mahalist > .dasha-line.is-active::before {
    background: #a78bfa;
    box-shadow: 0 0 0 3px var(--panel, #17122c);
  }
  html[data-oraculum-app="jyotish"] #dasha-content #dasha-mahalist > .dasha-line.expanded {
    z-index: 1;
    border-top-color: #f1d77f !important;
    background: rgba(218, 181, 78, .075) !important;
    box-shadow: inset 0 0 0 2px rgba(241, 215, 127, .82), 0 6px 18px rgba(7, 5, 18, .22);
  }
  html[data-oraculum-app="jyotish"] #dasha-content #dasha-mahalist > .dasha-line.expanded::after {
    content: 'Выбран';
    position: absolute;
    right: 8px;
    top: 8px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(218, 181, 78, .15);
    color: #f1d77f;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  html[data-oraculum-app="jyotish"] #dasha-content #dasha-mahalist > .dasha-line.expanded::before {
    width: 10px;
    height: 10px;
    top: -6px;
    background: #f1d77f;
    box-shadow: 0 0 0 3px var(--panel, #17122c), 0 0 14px rgba(241, 215, 127, .65);
  }
  html[data-oraculum-app="jyotish"] #dasha-content #dasha-mahalist .level {
    flex: none;
    order: 1;
  }
  html[data-oraculum-app="jyotish"] #dasha-content #dasha-mahalist .planet {
    order: 2;
    flex: none;
    font-size: 14px;
    line-height: 1.25;
  }
  html[data-oraculum-app="jyotish"] #dasha-content #dasha-mahalist .period {
    order: 3;
    margin-top: auto;
    text-align: left;
    white-space: nowrap;
  }
  html[data-oraculum-app="jyotish"] #dasha-content #dasha-stage-detail {
    margin-top: 16px;
    padding: 18px 20px !important;
    border: 1px solid rgba(201, 168, 76, .16);
    border-radius: 12px;
    background: rgba(7, 5, 18, .32);
  }

  /* Vedic calendar: one calendar workspace and one coherent action rail. */
  html[data-oraculum-app="jyotish"] #muhurta-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(340px, .72fr) !important;
    gap: 18px !important;
    align-items: start !important;
  }
  html[data-oraculum-app="jyotish"] #muhurta-content > .muhurta-main,
  html[data-oraculum-app="jyotish"] #muhurta-content > .muhurta-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
  }
  html[data-oraculum-app="jyotish"] #muhurta-content > .muhurta-main > .panel,
  html[data-oraculum-app="jyotish"] #muhurta-content > .muhurta-side > .panel {
    margin: 0 !important;
  }
  html[data-oraculum-app="jyotish"] #muhurta-content > .muhurta-main > .panel:first-child {
    padding: 24px !important;
  }
  html[data-oraculum-app="jyotish"] #muhurta-content > .muhurta-side .btn {
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 14px !important;
  }
  html[data-oraculum-app="jyotish"] #muhurta-content #vedic-calendar-detail {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-right: 0;
  }
  html[data-oraculum-app="jyotish"] #muhurta-content .vedic-calendar-grid {
    gap: 8px !important;
  }
  html[data-oraculum-app="jyotish"] #muhurta-content .cal-day {
    min-height: 50px;
  }
}

@media (max-width: 899px) {
  html { scroll-padding-top: calc(var(--oh-height, 58px) + 12px); }
  html[data-oraculum-app="jyotish"] #muhurta-content > .muhurta-main,
  html[data-oraculum-app="jyotish"] #muhurta-content > .muhurta-side {
    display: contents;
  }
  html[data-oraculum-app="jyotish"] #muhurta-content #vedic-calendar-detail {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-right: 0;
  }
  html[data-oraculum-app="jyotish"] #confirm-ov > div {
    padding: 20px !important;
  }
  html[data-oraculum-app="jyotish"] #confirm-text + div {
    display: grid !important;
    grid-template-columns: auto 1fr;
  }
  html[data-oraculum-app="jyotish"] #confirm-ov button {
    min-width: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}