body.solar-mode {
  overflow-x: hidden;
}

body.solar-lightbox-open {
  overflow: hidden;
  touch-action: none;
}

#view-root.solar-active {
  padding: 0;
  max-width: none;
}

.solar-shell {
  --solar-grid: rgba(255,255,255,.075);
  --solar-grid-strong: rgba(255,255,255,.13);
  --solar-panel: color-mix(in srgb, var(--foreground, #0f0f0f) 92%, #ffffff 8%);
  --solar-muted: color-mix(in srgb, var(--standard, #404040) 76%, #ffffff 24%);
  --solar-bright: color-mix(in srgb, var(--special, #5e02ff) 48%, #ffffff 52%);
  color: var(--standard, #777);
  min-height: calc(100dvh - 56px);
  background: var(--bg, #070014);
  padding: 8px 0 max(18px, env(safe-area-inset-bottom));
}

.solar-module-head,
.solar-detail-head {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 7px;
}

.solar-home,
.solar-detail-back,
.solar-retry,
.solar-failure-home,
.solar-note-save {
  appearance: none;
  border: 1px solid var(--solar-grid-strong);
  background: var(--foreground, #0f0f0f);
  color: var(--special, #5e02ff);
  border-radius: 5px;
  min-height: 30px;
  font: inherit;
}

.solar-home {
  width: 31px;
  height: 31px;
  padding: 0 0 2px;
  font-size: 25px;
  line-height: 1;
}

.solar-title-block {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.solar-kicker {
  font-size: 8px;
  letter-spacing: .15em;
  color: var(--solar-muted);
}

.solar-title-block h1,
.solar-state-shell h1,
.solar-detail-head h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .07em;
  color: var(--special, #5e02ff);
}

.solar-record-count,
.solar-result-count,
.solar-detail-index,
.solar-source-line,
.solar-note-status {
  font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .045em;
  color: var(--solar-muted);
}

.solar-atlas-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 43vw);
  gap: 6px;
  overflow-x: auto;
  padding: 0 10px 8px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.solar-atlas-strip::-webkit-scrollbar,
.solar-filter-strip::-webkit-scrollbar {
  display: none;
}

.solar-atlas-card {
  appearance: none;
  position: relative;
  height: 116px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--solar-grid-strong);
  border-radius: 5px;
  background: #090912;
  color: #fff;
  text-align: left;
  scroll-snap-align: start;
}

.solar-atlas-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: .82;
  filter: saturate(.9) contrast(1.02);
}

.solar-atlas-card::after {
  content: "";
  position: absolute;
  inset: 42% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.88));
  pointer-events: none;
}

.solar-atlas-card > span {
  position: absolute;
  z-index: 1;
  left: 7px;
  right: 7px;
  bottom: 6px;
  display: grid;
  gap: 1px;
}

.solar-atlas-card strong {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .03em;
}

.solar-atlas-card small {
  font-size: 8px;
  opacity: .62;
}

.solar-controls {
  position: sticky;
  top: 0;
  z-index: 18;
  padding: 4px 0 5px;
  background: color-mix(in srgb, var(--bg, #070014) 95%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--solar-grid);
  border-bottom: 1px solid var(--solar-grid);
}

.solar-filter-strip {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 0 8px 5px;
  scrollbar-width: none;
}

.solar-filter-chip {
  appearance: none;
  flex: 0 0 auto;
  min-width: 34px;
  height: 25px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--solar-chip-color, var(--standard, #404040)) 60%, #ffffff 8%);
  border-radius: 4px;
  background: color-mix(in srgb, var(--solar-chip-color, var(--foreground, #0f0f0f)) 18%, var(--foreground, #0f0f0f));
  color: color-mix(in srgb, var(--solar-chip-color, var(--special, #5e02ff)) 62%, #ffffff 38%);
  font: 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
}

.solar-filter-chip.is-selected {
  background: color-mix(in srgb, var(--solar-chip-color, var(--special, #5e02ff)) 48%, var(--foreground, #0f0f0f));
  border-color: color-mix(in srgb, var(--solar-chip-color, var(--special, #5e02ff)) 72%, #ffffff 18%);
  color: #fff;
}

.solar-search-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 7px;
  align-items: center;
  padding: 0 8px;
}

.solar-search-box {
  display: grid;
  grid-template-columns: 20px minmax(0,1fr) 26px;
  align-items: center;
  height: 30px;
  overflow: hidden;
  border: 1px solid var(--solar-grid-strong);
  border-radius: 4px;
  background: var(--foreground, #0f0f0f);
}

.solar-search-box > span {
  text-align: center;
  color: var(--special, #5e02ff);
  font-size: 14px;
}

.solar-search {
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 0 3px;
  background: transparent;
  color: color-mix(in srgb, var(--standard, #404040) 32%, #ffffff 68%);
  font: 10px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.solar-search::placeholder {
  color: var(--solar-muted);
  opacity: .72;
}

.solar-search-clear {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--solar-muted);
  height: 100%;
  font-size: 18px;
}

.solar-table-wrap {
  width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--standard, #404040) transparent;
}

.solar-table {
  width: max-content;
  min-width: 1080px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font: 9px/1.08 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.solar-table th,
.solar-table td {
  box-sizing: border-box;
  border-right: 1px solid rgba(0,0,0,.76);
  border-bottom: 1px solid rgba(0,0,0,.78);
  height: 22px;
  padding: 2px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.solar-table th {
  position: sticky;
  top: 64px;
  z-index: 13;
  height: 62px;
  padding: 0;
  background: #232323;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom-color: rgba(0,0,0,.9);
  vertical-align: bottom;
}

.solar-table th:first-child,
.solar-table td:first-child {
  position: sticky;
  left: 0;
}

.solar-table th:first-child {
  z-index: 16;
}

.solar-table td:first-child {
  z-index: 4;
  background: var(--solar-row-bg, #181818);
}

.solar-table tr {
  background: var(--solar-row-bg, #181818);
}

.solar-table tbody tr:active {
  filter: brightness(1.35);
}

.solar-table tr.is-planet td {
  height: 25px;
  border-top: 1px solid color-mix(in srgb, var(--solar-system-color) 68%, #ffffff 22%);
  border-bottom: 1px solid rgba(0,0,0,.9);
  color: #fff;
}

.solar-table th:nth-child(1),
.solar-table td:nth-child(1) { width: 148px; min-width: 148px; text-align: left; }
.solar-table th:nth-child(2),
.solar-table td:nth-child(2) { width: 84px; min-width: 84px; }
.solar-table th:nth-child(3),
.solar-table td:nth-child(3) { width: 132px; min-width: 132px; }
.solar-table th:nth-child(4),
.solar-table td:nth-child(4) { width: 132px; min-width: 132px; }
.solar-table th:nth-child(5),
.solar-table td:nth-child(5) { width: 132px; min-width: 132px; }
.solar-table th:nth-child(6),
.solar-table td:nth-child(6) { width: 120px; min-width: 120px; }
.solar-table th:nth-child(7),
.solar-table td:nth-child(7) { width: 92px; min-width: 92px; }
.solar-table th:nth-child(8),
.solar-table td:nth-child(8) { width: 92px; min-width: 92px; }
.solar-table th:nth-child(9),
.solar-table td:nth-child(9) { width: 91px; min-width: 91px; }
.solar-table th:nth-child(10),
.solar-table td:nth-child(10) { width: 72px; min-width: 72px; text-align: left; }

.solar-column-button {
  appearance: none;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 4px 4px 3px;
  background: transparent;
  color: inherit;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: end;
  gap: 2px;
  text-align: center;
  font: inherit;
}

.solar-table th:first-child .solar-column-button {
  text-align: left;
}

.solar-column-label {
  min-height: 11px;
  color: color-mix(in srgb, var(--special, #5e02ff) 42%, #ffffff 58%);
  font-size: 8px;
  letter-spacing: .055em;
}

.solar-column-symbol {
  color: color-mix(in srgb, var(--special, #5e02ff) 65%, #ffffff 35%);
  font-size: 11px;
  font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
}

.solar-column-formula {
  align-self: end;
  min-height: 18px;
  padding-top: 2px;
  border-top: 1px solid rgba(255,255,255,.05);
  color: color-mix(in srgb, var(--special, #5e02ff) 70%, #ffffff 30%);
  font-size: 7px;
  line-height: 1.15;
  white-space: normal;
}

.solar-sort-arrow {
  color: #fff;
}

.solar-object-cell {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 4px;
  align-items: center;
}

.solar-object-name {
  overflow: hidden;
  text-overflow: ellipsis;
  color: color-mix(in srgb, var(--solar-system-color, #777) 58%, #ffffff 42%);
}

.solar-object-code {
  color: rgba(255,255,255,.34);
  font-size: 7px;
}

.solar-detail-shell {
  padding-left: 8px;
  padding-right: 8px;
}

.solar-detail-head {
  margin: -1px -8px 7px;
  padding: 7px 8px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--solar-detail-color) 46%, var(--foreground, #0f0f0f)), var(--foreground, #0f0f0f));
  border-bottom: 1px solid color-mix(in srgb, var(--solar-detail-color) 55%, #ffffff 10%);
}

.solar-detail-head > div {
  min-width: 0;
}

.solar-detail-head h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--solar-detail-color) 46%, #ffffff 54%);
}

.solar-detail-head p {
  margin: 2px 0 0;
  color: rgba(255,255,255,.44);
  font: 8px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.solar-detail-back {
  padding: 0 6px;
  font-size: 8px;
  color: color-mix(in srgb, var(--solar-detail-color) 55%, #ffffff 45%);
}

.solar-formula-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(112px, 31vw);
  gap: 4px;
  overflow-x: auto;
  margin: 0 -8px 7px;
  padding: 0 8px 3px;
  scrollbar-width: none;
}

.solar-formula-strip::-webkit-scrollbar {
  display: none;
}

.solar-formula-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 76px;
  border: 1px solid var(--solar-grid-strong);
  background: var(--foreground, #0f0f0f);
  text-align: center;
}

.solar-formula-card > span {
  padding: 5px 4px 2px;
  color: color-mix(in srgb, var(--special, #5e02ff) 45%, #ffffff 55%);
  font: 8px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
}

.solar-formula-card > strong {
  padding: 2px;
  color: color-mix(in srgb, var(--special, #5e02ff) 67%, #ffffff 33%);
  font: 14px/1.1 ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
}

.solar-formula-card > code {
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 5px 4px;
  border-top: 1px solid var(--solar-grid);
  color: color-mix(in srgb, var(--special, #5e02ff) 73%, #ffffff 27%);
  font: 8px/1.15 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.solar-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 5px;
}

.solar-detail-panel {
  border: 1px solid var(--solar-grid-strong);
  border-radius: 4px;
  background: color-mix(in srgb, var(--foreground, #0f0f0f) 96%, var(--solar-detail-color, #444) 4%);
  overflow: hidden;
}

.solar-detail-panel h2 {
  margin: 0;
  padding: 5px 6px;
  border-bottom: 1px solid var(--solar-grid);
  color: color-mix(in srgb, var(--solar-detail-color, var(--special, #5e02ff)) 54%, #ffffff 46%);
  font: 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 500;
  letter-spacing: .08em;
}

.solar-detail-field {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.25fr);
  gap: 5px;
  padding: 5px 6px;
  border-bottom: 1px solid rgba(255,255,255,.045);
  font: 8px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.solar-detail-field:last-child {
  border-bottom: 0;
}

.solar-detail-field span {
  color: var(--solar-muted);
}

.solar-detail-field strong {
  overflow-wrap: anywhere;
  text-align: right;
  color: rgba(255,255,255,.72);
  font-weight: 400;
}

.solar-myth-panel,
.solar-note-panel {
  margin-top: 5px;
}

.solar-myth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.solar-myth-grid .solar-detail-field {
  display: block;
  min-height: 54px;
}

.solar-myth-grid .solar-detail-field:nth-child(odd) {
  border-right: 1px solid rgba(255,255,255,.045);
}

.solar-myth-grid .solar-detail-field span,
.solar-myth-grid .solar-detail-field strong {
  display: block;
  text-align: left;
}

.solar-myth-grid .solar-detail-field strong {
  margin-top: 4px;
  line-height: 1.35;
}

.solar-note-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--solar-grid);
}

.solar-note-head h2 {
  flex: 1;
  border: 0;
}

.solar-note-status {
  padding-right: 7px;
}

.solar-note {
  display: block;
  box-sizing: border-box;
  width: calc(100% - 10px);
  margin: 5px;
  resize: vertical;
  border: 1px solid var(--solar-grid-strong);
  border-radius: 3px;
  outline: 0;
  padding: 7px;
  background: var(--bg, #070014);
  color: rgba(255,255,255,.74);
  font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.solar-note:focus {
  border-color: color-mix(in srgb, var(--solar-detail-color, var(--special, #5e02ff)) 65%, #ffffff 15%);
}

.solar-note-save {
  display: block;
  margin: 0 5px 5px auto;
  min-height: 27px;
  padding: 0 9px;
  font: 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--solar-muted);
  opacity: .55;
}

.solar-note-save.is-dirty {
  color: color-mix(in srgb, var(--solar-detail-color, var(--special, #5e02ff)) 50%, #ffffff 50%);
  border-color: color-mix(in srgb, var(--solar-detail-color, var(--special, #5e02ff)) 70%, #ffffff 10%);
  opacity: 1;
}

.solar-source-line {
  margin: 8px 0 0;
  text-align: center;
  opacity: .66;
}

.solar-lightbox {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  background: #030306;
  color: #fff;
  overscroll-behavior: none;
}

.solar-lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: max(8px, env(safe-area-inset-top)) 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: rgba(8,8,12,.94);
}

.solar-lightbox-bar > div {
  display: grid;
  min-width: 0;
}

.solar-lightbox-bar strong {
  font-size: 11px;
  font-weight: 500;
}

.solar-lightbox-bar small {
  margin-top: 2px;
  color: rgba(255,255,255,.42);
  font-size: 8px;
}

.solar-lightbox-close {
  appearance: none;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  background: rgba(255,255,255,.055);
  color: #fff;
  font-size: 22px;
}

.solar-lightbox-stage {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  touch-action: none;
  user-select: none;
}

.solar-lightbox-stage img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: 50% 50%;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

.solar-state-shell {
  min-height: 60dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  padding: 20px;
  text-align: center;
}

.solar-state-shell p {
  margin: 0;
  font-size: 10px;
  color: var(--solar-muted);
}

.solar-failure-actions {
  display: flex;
  gap: 5px;
  margin-top: 5px;
}

.solar-retry,
.solar-failure-home {
  min-width: 68px;
  padding: 0 8px;
  font: 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (min-width: 700px) {
  .solar-atlas-strip {
    grid-auto-columns: 240px;
  }

  .solar-detail-grid {
    grid-template-columns: repeat(4, minmax(0,1fr));
  }

  .solar-formula-strip {
    grid-auto-columns: minmax(128px, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .solar-lightbox-stage img {
    transition: none !important;
  }
}