html {
  background: var(--bg);
}
/* WorldSmith Web styles
   Goal: clean, readable, easy-to-extend.
*/
:root {
  --bg: #0f1220;
  --panel: #171b2e;
  --panel-2: #1d2240;
  --text: #e8e9f3;
  --muted: #a6abcc;
  --overlay-color: 255, 255, 255;
  --bg-rgb: 15, 18, 32;
  --panel-rgb: 23, 27, 46;
  --accent-rgb: 126, 178, 255;
  --good-rgb: 124, 255, 178;
  --bad-rgb: 255, 124, 151;
  --warn-rgb: 255, 211, 124;
  --border: rgba(var(--overlay-color), 0.1);
  --focus: rgba(var(--accent-rgb), 0.45);
  --good: #7cffb2;
  --warn: #ffd37c;
  --bad: #ff7c97;
  --accent: #7eb2ff;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

  /* Calendar moon slot colours */
  --moon-c0: #86cbff;
  --moon-c1: #ffc98f;
  --moon-c2: #d5b7ff;
  --moon-c3: #9eeab8;

  /* Calendar astronomy event colours */
  --astro-default: #9fd7ff;
  --astro-vernal: #84eaa9;
  --astro-summer: #ffd86e;
  --astro-autumn: #ffbf73;
  --astro-winter: #8fd8ff;
  --astro-solar-eclipse: #ff9f6f;
  --astro-lunar-eclipse: #caaeff;
  --radius: 16px;
  --radius-sm: 12px;
  --pad: 16px;
  --gap: 16px;
  --mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
  --sans:
    ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji";
}

/* ── Light theme (Paper Dashboard: E1DADE / 88C6E8 / 369AEC / EAAB54 / 37455E) */
[data-theme="light"] {
  --bg: #e1dade;
  --panel: #ede9e7;
  --panel-2: #e6e2df;
  --text: #37455e;
  --muted: #6a7588;
  --overlay-color: 0, 0, 0;
  --bg-rgb: 225, 218, 222;
  --panel-rgb: 237, 233, 231;
  --accent-rgb: 54, 154, 236;
  --good-rgb: 42, 128, 72;
  --bad-rgb: 200, 48, 80;
  --warn-rgb: 176, 132, 40;
  --border: rgba(55, 69, 94, 0.14);
  --focus: rgba(136, 198, 232, 0.45);
  --good: #2a8048;
  --warn: #b08428;
  --bad: #c83050;
  --accent: #369aec;
  --shadow: 0 10px 30px rgba(55, 69, 94, 0.1);
  --moon-c0: #2a7aaa;
  --moon-c1: #a08020;
  --moon-c2: #6a40a0;
  --moon-c3: #2a7a50;
  --astro-default: #2a80b8;
  --astro-vernal: #1a7a3a;
  --astro-summer: #a08518;
  --astro-autumn: #a86818;
  --astro-winter: #2a80b8;
  --astro-solar-eclipse: #b04a20;
  --astro-lunar-eclipse: #6838a0;
}

* {
  box-sizing: border-box;
}

/* ── Custom scrollbars (pill-toggle inspired) ────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.35) transparent;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 50px;
}
::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.3);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.5);
  border-color: rgba(var(--accent-rgb), 0.45);
}
::-webkit-scrollbar-corner {
  background: transparent;
}

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  position: relative;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ── Mobile-only header ───────────────────────────────── */
.app-header {
  display: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand__mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  /*background: linear-gradient(
    135deg,
    rgba(var(--overlay-color), 0.14),
    rgba(var(--overlay-color), 0.06)
  );*/
  background-image: url(favicon.svg);
  background-size: cover;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
[data-theme="light"] .brand__mark {
  background-image: url(favicon-light.svg);
}
.brand__title {
  font-weight: 700;
  letter-spacing: 0.2px;
}
.brand__subtitle {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Hamburger button (mobile only) ───────────────────── */
.nav-hamburger {
  display: none;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(var(--overlay-color), 0.06);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-hamburger:hover {
  background: rgba(var(--overlay-color), 0.12);
  border-color: rgba(var(--overlay-color), 0.18);
}

.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ── Theme / splash toggles ───────────────────────────── */
.discord-link {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(var(--overlay-color), 0.06);
  color: #5865f2;
  cursor: pointer;
  padding: 0;
  transition:
    background 180ms ease,
    border-color 180ms ease;
}
.discord-link:hover {
  background: rgba(88, 101, 242, 0.15);
  border-color: rgba(88, 101, 242, 0.35);
}
.discord-link__icon {
  width: 20px;
  height: 20px;
}
.splash-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(var(--overlay-color), 0.06);
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.splash-toggle:hover {
  background: rgba(var(--overlay-color), 0.12);
  border-color: rgba(var(--overlay-color), 0.18);
}
.splash-toggle__input {
  margin: 0;
  accent-color: var(--accent);
}
.splash-toggle__label {
  font-size: 12px;
  color: var(--muted);
}
.theme-toggle {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(var(--overlay-color), 0.06);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition:
    background 180ms ease,
    border-color 180ms ease;
}
.theme-toggle__sun,
.theme-toggle__moon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.theme-toggle:hover {
  background: rgba(var(--overlay-color), 0.12);
  border-color: rgba(var(--overlay-color), 0.18);
}
/* dark mode (default): hide moon */
.theme-toggle__moon {
  display: none;
}
/* light mode: swap icons */
[data-theme="light"] .theme-toggle__sun {
  display: none;
}
[data-theme="light"] .theme-toggle__moon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.app-main {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gap);
  padding: 18px max(18px, calc((100% - 1264px) / 2));
  width: 100%;
}

/* ── Side navigation / icon rail ──────────────────────── */
.side-nav {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  width: 240px;
  background: rgba(var(--panel-rgb), 0.65);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
  box-shadow: var(--shadow);
  transition: width 200ms ease;
  overflow: hidden;
}
.side-nav__scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
.side-nav.is-collapsed {
  width: 52px;
}

/* Brand area at top of sidebar */
.side-nav__brand {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 6px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  overflow: hidden;
}
.side-nav__brand-text {
  transition:
    opacity 120ms ease,
    height 120ms ease,
    margin 120ms ease;
}
.side-nav.is-collapsed .side-nav__brand {
  padding: 4px 0 8px;
  border-bottom: none;
}
.side-nav.is-collapsed .side-nav__brand-text {
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Controls area at bottom of sidebar */
.side-nav__footer {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 8px;
  padding: 6px 6px 2px;
  margin-top: 2px;
  border-top: 1px solid var(--border);
  overflow: hidden;
}
.side-nav__footer > .version-tag {
  width: 100%;
  text-align: center;
}
.side-nav.is-collapsed .side-nav__footer {
  display: none;
}

.side-nav__group {
  padding: 2px 6px;
}
.side-nav.is-collapsed .side-nav__group {
  padding: 4px 0;
}

.side-nav__label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 2px 6px 2px;
  transition:
    opacity 120ms ease,
    height 120ms ease,
    margin 120ms ease;
  white-space: nowrap;
}
.side-nav.is-collapsed .side-nav__label {
  opacity: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

.side-nav__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
}
.side-nav.is-collapsed .side-nav__item {
  justify-content: center;
  padding: 4px 0;
  gap: 0;
}

.side-nav__item-label {
  transition: opacity 120ms ease;
  white-space: nowrap;
}
.side-nav.is-collapsed .side-nav__item-label {
  opacity: 0;
  width: 0;
  pointer-events: none;
}

.side-nav__item:hover {
  background: rgba(var(--overlay-color), 0.06);
  border-color: var(--border);
  text-decoration: none;
}
.side-nav__item.is-active {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
}

/* Expanded sidebar shows pointer on collapsed rail */
.side-nav.is-collapsed {
  cursor: pointer;
}

/* Expand hint (collapsed only) */
.side-nav__expand-hint {
  display: none;
}
.side-nav.is-collapsed .side-nav__expand-hint {
  display: block;
  flex-shrink: 0;
  text-align: center;
  padding: 4px 0 2px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
}

/* ── Light-mode sidebar overrides ───────────────────── */
[data-theme="light"] .side-nav {
  background: rgba(var(--panel-rgb), 0.88);
  border-color: rgba(0, 0, 0, 0.14);
}
[data-theme="light"] .icon--star {
  background-image: url("./assets/icons/light/star.svg");
}
[data-theme="light"] .icon--system {
  background-image: url("./assets/icons/light/system.svg");
}
[data-theme="light"] .icon--inner-planets {
  background-image: url("./assets/icons/light/inner-planets.svg");
}
[data-theme="light"] .icon--outer-objects {
  background-image: url("./assets/icons/light/outer-objects.svg");
}
[data-theme="light"] .icon--moons {
  background-image: url("./assets/icons/light/moons.svg");
}
[data-theme="light"] .icon--visualiser {
  background-image: url("./assets/icons/light/visualiser.svg");
}
[data-theme="light"] .icon--local-cluster {
  background-image: url("./assets/icons/light/local-cluster.svg");
}
[data-theme="light"] .icon--local-cluster-viz {
  background-image: url("./assets/icons/light/local-cluster-viz.svg");
}
[data-theme="light"] .icon--import-export {
  background-image: url("./assets/icons/light/import-export.svg");
}
[data-theme="light"] .icon--about {
  background-image: url("./assets/icons/light/about.svg");
}
[data-theme="light"] .icon--apparent {
  background-image: url("./assets/icons/light/apparent.svg");
}
[data-theme="light"] .icon--calendar {
  background-image: url("./assets/icons/light/calendar.svg");
}
[data-theme="light"] .icon--science {
  background-image: url("./assets/icons/light/science.svg");
}
[data-theme="light"] .icon--science-viz {
  background-image: url("./assets/icons/light/science-viz.svg");
}
[data-theme="light"] .icon--tectonics {
  background-image: url("./assets/icons/light/tectonics.svg");
}
[data-theme="light"] .icon--climate {
  background-image: url("./assets/icons/light/climate.svg");
}
[data-theme="light"] .icon--population {
  background-image: url("./assets/icons/light/population.svg");
}
[data-theme="light"] .icon--lessons {
  background-image: url("./assets/icons/light/lessons.svg");
}
[data-theme="light"] .side-nav__item {
  color: var(--text);
}
[data-theme="light"] .side-nav__label {
  color: var(--muted);
  font-weight: 600;
}
[data-theme="light"] .side-nav__item.is-active {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.35);
}
[data-theme="light"] .side-nav__expand-hint {
  color: var(--text);
}

/* ── Mobile nav backdrop ─────────────────────────────── */
.nav-backdrop {
  display: none;
}
.nav-backdrop.is-visible {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.35);
}

.content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.page {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.page-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ws-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.title-icon {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.is-disabled .ws-icon {
  opacity: 0.5;
  filter: grayscale(0.4);
}

.icon--star {
  background-image: url("./assets/icons/star.svg");
}
.icon--system {
  background-image: url("./assets/icons/system.svg");
}
.icon--inner-planets {
  background-image: url("./assets/icons/inner-planets.svg");
}
.icon--outer-objects {
  background-image: url("./assets/icons/outer-objects.svg");
}
.icon--moons {
  background-image: url("./assets/icons/moons.svg");
}
.icon--visualiser {
  background-image: url("./assets/icons/visualiser.svg");
}
.icon--local-cluster {
  background-image: url("./assets/icons/local-cluster.svg");
}
.icon--local-cluster-viz {
  background-image: url("./assets/icons/local-cluster-viz.svg");
}
.icon--import-export {
  background-image: url("./assets/icons/import-export.svg");
}
.icon--about {
  background-image: url("./assets/icons/about.svg");
}
.icon--apparent {
  background-image: url("./assets/icons/apparent.svg");
}
.icon--calendar {
  background-image: url("./assets/icons/calendar.svg");
}
.icon--science {
  background-image: url("./assets/icons/science.svg");
}
.icon--science-viz {
  background-image: url("./assets/icons/science-viz.svg");
}
.icon--tectonics {
  background-image: url("./assets/icons/tectonics.svg");
}
.icon--climate {
  background-image: url("./assets/icons/climate.svg");
}
.icon--population {
  background-image: url("./assets/icons/population.svg");
}
.icon--lessons {
  background-image: url("./assets/icons/lessons.svg");
}

.panel {
  background: rgba(var(--panel-rgb), 0.7);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap);
  padding: 14px 16px;
  background: rgba(var(--overlay-color), 0.03);
  border-bottom: 1px solid var(--border);
}
.panel__header h1,
.panel__header h2 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.2px;
}
.panel__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 3px;
}
.panel__title .ws-icon {
  width: 20px;
  height: 20px;
}
.panel__body {
  padding: 16px;
  min-width: 0;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
.grid-2 > * {
  min-width: 0;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.label {
  color: var(--text);
  font-weight: 600;
}
.hint {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}
.unit {
  font-size: 12px;
  color: var(--muted);
  margin-left: 6px;
  font-family: var(--mono);
}

input[type="number"],
input[type="text"] {
  width: 100%;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(var(--bg-rgb), 0.35);
  color: var(--text);
  outline: none;
}
input[type="number"]:focus,
input[type="text"]:focus {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 4px var(--focus);
}

select,
textarea {
  width: 100%;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(var(--bg-rgb), 0.35);
  color: var(--text);
  outline: none;
}
select:focus,
textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 4px var(--focus);
}
input[type="number"]:disabled,
input[type="text"]:disabled,
select:disabled,
textarea:disabled {
  opacity: 1;
  color: var(--muted);
  cursor: not-allowed;
}

.button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
button {
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(var(--overlay-color), 0.06);
  color: var(--text);
}
button:hover {
  background: rgba(var(--overlay-color), 0.1);
}
button.primary {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.35);
}
button.primary:hover {
  background: rgba(var(--accent-rgb), 0.24);
}

/* Wrapper: grid item that holds the slot while the card lifts out on hover.
   min-height prevents collapse when the child goes position:absolute. */
.kpi-wrap {
  position: relative;
  min-height: 68px;
}
.kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  /* Opaque so expanded cards fully cover cards underneath */
  background: var(--kpi-bg, var(--panel-2));
}
.kpi__label {
  color: var(--muted);
  font-size: 11px;
}
.kpi__value {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

/* Meta: hidden when empty */
.kpi__meta:empty {
  display: none;
}
/* Meta: in-flow inside the card, hidden via max-height.
   On hover the card itself grows to reveal it.
   No transition here — closing is instant (prevents layout shift on mouse-leave). */
.kpi__meta {
  color: var(--muted);
  font-size: 11px;
  font-family: var(--mono);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
/* Hover/focus: reveal meta inside the card (transition only on open) */
.kpi-wrap:hover > .kpi > .kpi__meta:not(:empty),
.kpi-wrap:focus-within > .kpi > .kpi__meta:not(:empty) {
  max-height: 200px;
  padding-top: 6px;
  opacity: 1;
  pointer-events: auto;
  transition:
    max-height 0.2s ease,
    opacity 0.15s ease,
    padding 0.2s ease;
}
/* Lift card out of flow so it overlays neighbours (wrapper keeps the grid slot) */
.kpi-wrap:hover > .kpi:has(.kpi__meta:not(:empty)),
.kpi-wrap:focus-within > .kpi:has(.kpi__meta:not(:empty)) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
/* Indicator: small chevron on KPIs with hidden detail */
.kpi:has(.kpi__meta:not(:empty)) .kpi__label::after {
  content: "\25BE";
  display: inline-block;
  margin-left: 5px;
  font-size: 13px;
  opacity: 0.55;
  vertical-align: middle;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  /* Extra bottom space so the last row's expanded cards are not clipped by panel overflow:hidden */
  padding-bottom: 48px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: rgba(var(--overlay-color), 0.04);
  color: var(--muted);
}
.badge.good {
  color: var(--good);
}
.badge.warn {
  color: var(--warn);
}
.badge.bad {
  color: var(--bad);
}

.code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  white-space: pre-wrap;
  background: rgba(var(--bg-rgb), 0.35);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
}

/* Unified read-only / derived value blocks across pages */
.derived-readout {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  background: rgba(var(--bg-rgb), 0.35);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.derived-readout--inline {
  min-height: 42px;
  display: flex;
  align-items: center;
}

.mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  line-height: 1.4;
}
.mini-table th,
.mini-table td {
  padding: 2px 6px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.mini-table th {
  font-weight: 600;
}

.app-footer {
  grid-column: 1 / -1;
  padding: 24px 0 6px;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.3px;
  opacity: 0.5;
}

@media (max-width: 980px) {
  .app-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(var(--bg-rgb), 0.75);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .nav-hamburger {
    display: grid;
  }
  .app-main {
    grid-template-columns: 1fr;
  }
  /* Hide sidebar entirely on mobile — no collapsed rail */
  .side-nav,
  .side-nav.is-collapsed {
    position: fixed;
    top: 8px;
    left: 8px;
    bottom: 8px;
    z-index: 100;
    width: 240px;
    max-height: none;
    padding: 6px;
    background: rgba(var(--panel-rgb), 0.95);
    backdrop-filter: blur(12px);
    transform: translateX(calc(-100% - 16px));
    transition: transform 200ms ease;
    overflow-y: auto;
    cursor: default;
  }
  .side-nav.is-open {
    transform: translateX(0);
  }
  /* Reset all collapsed overrides so drawer looks like desktop expanded */
  .side-nav.is-collapsed .side-nav__item-label,
  .side-nav.is-open .side-nav__item-label {
    opacity: 1;
    width: auto;
    pointer-events: auto;
  }
  .side-nav.is-collapsed .side-nav__label,
  .side-nav.is-open .side-nav__label {
    opacity: 1;
    height: auto;
    margin: 2px 6px 2px;
    overflow: visible;
    pointer-events: auto;
  }
  .side-nav.is-collapsed .side-nav__brand-text,
  .side-nav.is-open .side-nav__brand-text {
    opacity: 1;
    height: auto;
    overflow: visible;
    pointer-events: auto;
  }
  .side-nav.is-collapsed .side-nav__item,
  .side-nav.is-open .side-nav__item {
    justify-content: flex-start;
    padding: 4px 8px;
    gap: 8px;
  }
  .side-nav.is-collapsed .side-nav__group,
  .side-nav.is-open .side-nav__group {
    padding: 2px 6px;
  }
  .side-nav.is-collapsed .side-nav__brand,
  .side-nav.is-open .side-nav__brand {
    border-bottom: 1px solid var(--border);
    padding: 4px 6px 6px;
  }
  .side-nav.is-collapsed .side-nav__footer,
  .side-nav.is-open .side-nav__footer {
    display: flex;
  }
  .side-nav__expand-hint {
    display: none !important;
  }
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Number + slider pairing */
.input-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
.range-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-family: var(--mono);
}

/* Fixed background layer (prevents gradient from scrolling) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, #141834 0%, #0b0e1a 70%);
}
[data-theme="light"] body::before {
  background: radial-gradient(ellipse at 50% 30%, #e8e2df 0%, #d6cfcc 70%);
}

/* Ensure app content sits above the fixed background */
body > * {
  position: relative;
  z-index: 1;
}
/* Keep main content out of a forced stacking context so fixed modals can sit above sticky header. */
body > .app-main {
  z-index: auto;
}

/* Tooltip icon + bubble */
.tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  border-radius: 999px;
  border: 1px solid rgba(var(--overlay-color), 0.18);
  background: rgba(var(--overlay-color), 0.06);
  color: rgba(var(--overlay-color), 0.9);
  font-size: 12px;
  font-family: var(--mono);
  cursor: help;
  user-select: none;
}
.tip-icon:focus {
  outline: 2px solid rgba(var(--accent-rgb), 0.55);
  outline-offset: 2px;
}

.tooltip-bubble {
  position: fixed;
  z-index: 9999;
  max-width: 360px;
  white-space: pre-wrap;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(var(--panel-rgb), 0.96);
  border: 1px solid rgba(var(--overlay-color), 0.12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  color: rgba(var(--overlay-color), 0.92);
  font-size: 13px;
  line-height: 1.35;
}

/* Readability: wrap long numbers/units in cards and code blocks */
.kpi-wrap,
.kpi,
.kpi__label,
.kpi__value,
.kpi__meta {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.code,
.derived-readout,
pre.code {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}

.version-tag {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(var(--overlay-color), 0.08);
  border: 1px solid rgba(var(--overlay-color), 0.12);
  font-size: 12px;
  color: rgba(var(--overlay-color), 0.85);
}

/* Small utility buttons */
button.small {
  padding: 8px 10px;
  font-size: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
button.danger {
  background: rgba(var(--bad-rgb), 0.18);
  border-color: rgba(var(--bad-rgb), 0.35);
}
button.danger:hover {
  background: rgba(var(--bad-rgb), 0.25);
}

/* Form-row readability: allow left text to wrap cleanly next to right controls */
.form-row > div:first-child {
  min-width: 0;
}
.form-row .hint {
  white-space: normal;
  line-height: 1.3;
}
.form-row .label {
  overflow-wrap: anywhere;
}

/* Drag & drop: orbit slot cards */
.planet-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--overlay-color), 0.1);
  background: rgba(var(--overlay-color), 0.06);
  cursor: grab;
}
.planet-card:active {
  cursor: grabbing;
}
.planet-card__meta {
  font-size: 12px;
  opacity: 0.75;
}
#moonsList .planet-card {
  margin: 5px 0 5px 0;
}
.dropzone {
  border: 1px dashed rgba(var(--overlay-color), 0.18);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(var(--overlay-color), 0.03);
}
.dropzone.is-over {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.08);
}
.dropzone-title {
  font-size: 12px;
  opacity: 0.75;
  margin-bottom: 8px;
}
.slot-row {
  margin-bottom: 10px;
}
.slot-row .slot-title {
  font-weight: 600;
  margin-bottom: 6px;
}

/* Stack action buttons under selects (Planet/Moon selection UI) */
.select-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.select-actions button {
  width: 100%;
}
.select-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Moon list under planet cards in system slots */
.moon-list {
  margin-top: 8px;
  margin-left: 18px;
  padding-left: 10px;
  border-left: 1px solid rgba(var(--overlay-color), 0.1);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.moon-list--unassigned {
  margin-top: 0;
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}
.moon-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(var(--overlay-color), 0.07);
  background: rgba(var(--overlay-color), 0.035);
}
.moon-mini__name {
  font-size: 12px;
  opacity: 0.9;
}
.moon-mini__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.moon-card {
  cursor: grab;
}
.moon-card:active {
  cursor: grabbing;
}
.moon-card.is-locked {
  opacity: 0.85;
  cursor: default;
}
.moon-card.is-locked::after {
  content: "\1F512";
  opacity: 0.8;
  margin-left: 6px;
}

.moon-mini button.small {
  padding: 6px 8px;
  font-size: 11px;
}

.moon-drop-target.is-over {
  border-color: rgba(var(--accent-rgb), 0.55) !important;
  background: rgba(var(--accent-rgb), 0.08) !important;
}

/* Local cluster pages */
.cluster-table-wrap {
  margin-top: 10px;
  border: 1px solid rgba(var(--overlay-color), 0.1);
  border-radius: 12px;
  overflow: auto;
  max-height: 320px;
  background: rgba(0, 0, 0, 0.14);
}
.cluster-table-wrap--coords {
  max-height: 420px;
}
.cluster-table {
  width: 100%;
  border-collapse: collapse;
}
.cluster-table th,
.cluster-table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(var(--overlay-color), 0.08);
  text-align: left;
  font-size: 12px;
  white-space: nowrap;
}
.cluster-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(var(--panel-rgb), 0.96);
  color: var(--text);
}
.cluster-table tbody tr:last-child td {
  border-bottom: 0;
}
.cluster-object-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cluster-object-icon {
  width: 18px;
  height: 18px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.cluster-object-tag {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
}
.cluster-name-input {
  width: 100%;
  min-width: 150px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(var(--overlay-color), 0.12);
  background: rgba(var(--bg-rgb), 0.55);
  color: var(--text);
  font-size: 12px;
}
.cluster-name-input:focus {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22);
}
.cluster-adjust-cell {
  white-space: nowrap;
  text-align: center;
  width: 56px;
}
.cluster-adjust-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(var(--overlay-color), 0.15);
  border-radius: 6px;
  background: rgba(var(--overlay-color), 0.06);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.cluster-adjust-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.4);
}
.cluster-adjust-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.cluster-context-menu {
  position: fixed;
  z-index: 200;
  min-width: 190px;
  max-height: 400px;
  overflow-y: auto;
  background: rgba(var(--panel-rgb), 0.97);
  border: 1px solid rgba(var(--overlay-color), 0.15);
  border-radius: 10px;
  padding: 6px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  font-size: 12px;
}
.cluster-context-menu__title {
  padding: 6px 14px;
  color: var(--muted);
  font-size: 11px;
  border-bottom: 1px solid rgba(var(--overlay-color), 0.08);
}
.cluster-context-menu__item {
  padding: 7px 14px;
  cursor: pointer;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cluster-context-menu__item:hover {
  background: rgba(var(--accent-rgb), 0.15);
}
.cluster-context-menu__item.danger {
  color: rgba(var(--bad-rgb), 0.92);
}
.cluster-context-menu__item.danger:hover {
  background: rgba(var(--bad-rgb), 0.15);
}
.cluster-context-menu__sep {
  height: 1px;
  margin: 4px 0;
  background: rgba(var(--overlay-color), 0.08);
}

.planet-card.is-locked {
  opacity: 0.85;
  cursor: default;
}
.planet-card.is-locked::after {
  content: "\1F512";
  opacity: 0.8;
  margin-left: 6px;
}

/* Visualizer canvas container */
.viz-wrap {
  position: relative;
  width: 100%;
  height: calc(100vh - 230px);
  min-height: 400px;
  overflow: hidden;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.15);
}
.viz-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}
#viz-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Visualizer layout — single-column, canvas-first */
.viz-layout {
  display: block;
}

/* Canvas area — relative container for dropdown overlay */
.viz-canvas-area {
  position: relative;
}

.viz-native-transition {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  min-width: 260px;
  width: min(420px, calc(100% - 34px));
  padding: 9px 12px 11px;
  border-radius: 10px;
  border: 1px solid rgba(130, 168, 235, 0.36);
  background: rgba(12, 20, 43, 0.86);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.38);
  pointer-events: none;
  z-index: 6;
}
.viz-native-transition__label {
  margin: 0 0 7px;
  font-size: 12px;
  color: rgba(210, 224, 252, 0.92);
  text-align: center;
}
.viz-native-transition__track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(60, 84, 128, 0.45);
}
.viz-native-transition__fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(106, 158, 255, 0.92), rgba(149, 214, 255, 0.94));
  box-shadow: 0 0 12px rgba(127, 184, 255, 0.42);
}

.viz-offscale-note {
  position: absolute;
  top: 12px;
  right: 14px;
  max-width: min(360px, calc(100% - 56px));
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(132, 179, 238, 0.42);
  background: rgba(12, 20, 43, 0.86);
  color: rgba(211, 226, 255, 0.92);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  white-space: pre-line;
  pointer-events: none;
  z-index: 7;
}
.viz-offscale-note::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: -24px;
  width: 18px;
  height: 2px;
  background: rgba(151, 196, 252, 0.85);
}
.viz-offscale-note::before {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  right: -31px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid rgba(151, 196, 252, 0.9);
}

/* Controls dropdown — overlays the canvas */
.viz-controls-dropdown {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 12px 16px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.viz-controls-dropdown__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.viz-controls-dropdown__row + .viz-controls-dropdown__row {
  margin-top: 10px;
}
.viz-controls-dropdown__toggles {
  gap: 12px;
}
.viz-controls-dropdown__toggles .pill-toggle-wrap {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}
.viz-controls-dropdown__checks {
  gap: 6px;
}
.viz-controls-dropdown .viz-check {
  padding: 4px 8px;
  font-size: 13px;
}
.viz-controls-dropdown .viz-speed {
  flex: 1;
  min-width: 180px;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--overlay-color), 0.08);
  background: rgba(0, 0, 0, 0.1);
}
.viz-controls-dropdown .viz-speed input[type="range"] {
  flex: 1;
}
.viz-canvas-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.viz-canvas-actions button {
  white-space: nowrap;
}
.viz-canvas-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background: rgba(var(--overlay-color), 0.03);
}
.viz-canvas-actions button:disabled:hover {
  background: rgba(var(--overlay-color), 0.03);
}
.viz-check {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(var(--overlay-color), 0.08);
  background: rgba(0, 0, 0, 0.1);
}
.viz-check input {
  transform: translateY(1px);
}

.viz-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(var(--overlay-color), 0.08);
  background: rgba(0, 0, 0, 0.1);
}
.viz-switch__text {
  display: flex;
  align-items: center;
  gap: 6px;
}
.viz-switch__control {
  position: relative;
  width: 44px;
  height: 24px;
  flex: 0 0 auto;
}
.viz-switch__control input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.viz-switch__slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(var(--overlay-color), 0.16);
  border: 1px solid rgba(var(--overlay-color), 0.18);
  transition:
    background-color 140ms ease,
    border-color 140ms ease;
}
.viz-switch__slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(235, 242, 255, 0.95);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform 160ms ease;
}
.viz-switch__control input:checked + .viz-switch__slider {
  background: rgba(var(--accent-rgb), 0.46);
  border-color: rgba(var(--accent-rgb), 0.6);
}
.viz-switch__control input:checked + .viz-switch__slider::after {
  transform: translateX(20px);
}
.viz-switch__control input:focus-visible + .viz-switch__slider {
  outline: 2px solid rgba(var(--accent-rgb), 0.85);
  outline-offset: 2px;
}

/* Auto-derive button (inline label button for auto/manual inputs) */
.auto-btn {
  display: inline-block;
  padding: 0 5px;
  margin-left: 4px;
  font-size: 10px;
  font-family: var(--mono);
  line-height: 16px;
  border: 1px solid var(--muted);
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.auto-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.auto-btn.active {
  border-color: var(--good);
  color: var(--good);
  background: rgba(var(--good-rgb), 0.1);
}
input.auto-value {
  color: var(--good);
}

/* Tectonic probability bar */
.tec-prob-bar {
  margin: 6px 0 2px;
}
.tec-prob-bar__track {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}
.tec-prob-bar__seg {
  min-width: 2px;
  transition: width 0.3s ease;
}
.tec-prob-bar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  font-family: var(--mono);
}
.tec-prob-bar__label {
  display: inline-flex;
  align-items: center;
}
.tec-prob-bar__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 3px;
}

/* Three-way radio pill toggle (used for physics derivation mode in Advanced) */
.physics-trio-toggle {
  display: flex;
  height: 34px;
  padding: 2px;
  border-radius: 50px;
  position: relative;
  border: 1px solid rgba(var(--overlay-color), 0.18);
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
}
.physics-trio-toggle input[type="radio"] {
  position: absolute;
  height: 50px;
  top: 2px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  width: calc(100% / 3);
  z-index: 3;
}
.physics-trio-toggle input[type="radio"]:nth-of-type(1) {
  left: 0;
}
.physics-trio-toggle input[type="radio"]:nth-of-type(2) {
  left: calc(100% / 3);
}
.physics-trio-toggle input[type="radio"]:nth-of-type(3) {
  left: calc(200% / 3);
}
.physics-trio-toggle label {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 2;
  color: rgba(var(--overlay-color), 0.5);
  font-size: 12px;
  line-height: 30px;
  pointer-events: none;
  user-select: none;
  transition: color 0.2s ease;
}
.physics-trio-toggle > span {
  position: absolute;
  top: 2px;
  left: 2px;
  height: 30px;
  width: calc((100% - 4px) / 3);
  border-radius: 50px;
  background: rgba(var(--accent-rgb), 0.35);
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  transition: left 0.25s ease-in-out;
  z-index: 1;
}
.physics-trio-toggle input[type="radio"]:nth-of-type(1):checked ~ span {
  left: 2px;
}
.physics-trio-toggle input[type="radio"]:nth-of-type(2):checked ~ span {
  left: calc((100% - 4px) / 3 + 2px);
}
.physics-trio-toggle input[type="radio"]:nth-of-type(3):checked ~ span {
  left: calc(2 * (100% - 4px) / 3 + 2px);
}
.physics-trio-toggle input[type="radio"]:checked + label {
  color: rgba(235, 242, 255, 0.95);
}

/* Two-way radio pill toggle (mirrors physics-trio-toggle for 2 options) */
.physics-duo-toggle {
  display: flex;
  height: 34px;
  padding: 2px;
  border-radius: 50px;
  position: relative;
  border: 1px solid rgba(var(--overlay-color), 0.18);
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
}
.physics-duo-toggle input[type="radio"] {
  position: absolute;
  height: 30px;
  top: 2px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  width: 50%;
  z-index: 3;
}
.physics-duo-toggle input[type="radio"]:nth-of-type(1) {
  left: 1px;
}
.physics-duo-toggle input[type="radio"]:nth-of-type(2) {
  left: 50%;
}
.physics-duo-toggle label {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 2;
  color: rgba(var(--overlay-color), 0.5);
  font-size: 12px;
  line-height: 30px;
  pointer-events: none;
  user-select: none;
  transition: color 0.2s ease;
}
.pill-toggle-wrap {
  position: relative;
}
.pill-toggle-wrap > .tip-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
}
.physics-duo-toggle > span {
  position: absolute;
  top: 2px;
  left: 2px;
  height: 30px;
  width: calc((100% - 4px) / 2);
  border-radius: 50px;
  background: rgba(var(--accent-rgb), 0.35);
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  transition: left 0.25s ease-in-out;
  z-index: 1;
}
.physics-duo-toggle input[type="radio"]:nth-of-type(1):checked ~ span {
  left: 2px;
}
.physics-duo-toggle input[type="radio"]:nth-of-type(2):checked ~ span {
  left: calc((100% - 4px) / 2 + 2px);
}
.physics-duo-toggle input[type="radio"]:checked + label {
  color: rgba(235, 242, 255, 0.95);
}
.physics-duo-toggle input[type="radio"]:focus-visible + label {
  outline: 2px solid rgba(var(--accent-rgb), 0.85);
  outline-offset: 2px;
  border-radius: 50px;
}
/* Four-way radio pill toggle (tectonic regime) */
.physics-quad-toggle {
  display: flex;
  height: 34px;
  padding: 2px;
  border-radius: 50px;
  position: relative;
  border: 1px solid rgba(var(--overlay-color), 0.18);
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
}
.physics-quad-toggle input[type="radio"] {
  position: absolute;
  height: 30px;
  top: 2px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  width: 25%;
  z-index: 3;
}
.physics-quad-toggle input[type="radio"]:nth-of-type(1) {
  left: 0;
}
.physics-quad-toggle input[type="radio"]:nth-of-type(2) {
  left: 25%;
}
.physics-quad-toggle input[type="radio"]:nth-of-type(3) {
  left: 50%;
}
.physics-quad-toggle input[type="radio"]:nth-of-type(4) {
  left: 75%;
}
.physics-quad-toggle label {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 2;
  color: rgba(var(--overlay-color), 0.5);
  font-size: 12px;
  line-height: 30px;
  pointer-events: none;
  user-select: none;
  transition: color 0.2s ease;
}
.physics-quad-toggle > span {
  position: absolute;
  top: 2px;
  left: 2px;
  height: 30px;
  width: calc((100% - 4px) / 4);
  border-radius: 50px;
  background: rgba(var(--accent-rgb), 0.35);
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  transition: left 0.25s ease-in-out;
  z-index: 1;
}
.physics-quad-toggle input[type="radio"]:nth-of-type(1):checked ~ span {
  left: 2px;
}
.physics-quad-toggle input[type="radio"]:nth-of-type(2):checked ~ span {
  left: calc((100% - 4px) / 4 + 2px);
}
.physics-quad-toggle input[type="radio"]:nth-of-type(3):checked ~ span {
  left: calc(2 * (100% - 4px) / 4 + 2px);
}
.physics-quad-toggle input[type="radio"]:nth-of-type(4):checked ~ span {
  left: calc(3 * (100% - 4px) / 4 + 2px);
}
.physics-quad-toggle input[type="radio"]:checked + label {
  color: rgba(235, 242, 255, 0.95);
}
.physics-quad-toggle input[type="radio"]:focus-visible + label {
  outline: 2px solid rgba(var(--accent-rgb), 0.85);
  outline-offset: 2px;
  border-radius: 50px;
}
/* Recommended regime indicator */
.physics-quad-toggle input[data-recommended] + label {
  color: rgba(var(--good-rgb), 0.7);
  background: rgba(var(--good-rgb), 0.1);
  border-radius: 50px;
}
.physics-quad-toggle input[data-recommended]:checked + label {
  color: var(--good);
  background: none;
}
.physics-quad-toggle.tec-recommended-active > span {
  background: rgba(var(--good-rgb), 0.25);
  border-color: rgba(var(--good-rgb), 0.5);
}

/* Browser fullscreen */
.viz-layout:fullscreen {
  background: var(--bg);
  padding: 16px;
}
.viz-layout:fullscreen .viz-wrap {
  height: calc(100vh - 120px);
}

/* Toast (first-load hint in unified visualiser) */
.viz-toast {
  position: absolute;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 30, 60, 0.92);
  color: rgba(200, 220, 255, 0.9);
  padding: 10px 36px 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid rgba(140, 180, 255, 0.2);
  pointer-events: auto;
  z-index: 5;
  white-space: nowrap;
  animation: viz-toast-in 0.4s ease-out;
}
.viz-toast__close {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
}
@keyframes viz-toast-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
}

/* Controls help overlay */
.viz-help-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}
.viz-help-overlay__content {
  position: relative;
  background: rgba(12, 20, 43, 0.94);
  border: 1px solid rgba(var(--overlay-color), 0.1);
  border-radius: var(--radius);
  padding: 20px 24px;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  color: var(--text);
  animation: viz-toast-in 0.2s ease-out;
}
.viz-help-overlay__close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
}
.viz-help-overlay__close:hover {
  color: var(--text);
}
.viz-help-overlay__title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.viz-help-overlay__section h4 {
  margin: 12px 0 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.viz-help-overlay__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}
.viz-help-overlay__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
}
.viz-help-overlay__item kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(var(--overlay-color), 0.06);
  border: 1px solid rgba(var(--overlay-color), 0.08);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .viz-help-overlay__grid {
    grid-template-columns: 1fr;
  }
}

.viz-speed {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(var(--overlay-color), 0.08);
  background: rgba(0, 0, 0, 0.1);
}
.viz-speed__label {
  font-size: 12px;
  opacity: 0.8;
}
.viz-speed__value {
  font-size: 12px;
  opacity: 0.75;
}
.viz-speed input[type="range"] {
  width: 100%;
}

.moon-float-note {
  position: fixed;
  left: 50%;
  top: 96px;
  max-width: min(420px, calc(100vw - 40px));
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(160, 210, 255, 0.35);
  background: rgba(8, 16, 34, 0.92);
  color: rgba(225, 240, 255, 0.95);
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translate(-50%, -8px);
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  z-index: 1200;
}
.moon-float-note.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.startup-sol-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(5, 9, 20, 0.72);
  backdrop-filter: blur(3px);
}
.startup-sol-dialog {
  width: min(560px, calc(100vw - 36px));
}
.startup-sol-dialog .panel__body p {
  margin-top: 0;
  margin-bottom: 8px;
}
.startup-sol-actions {
  justify-content: flex-end;
}
.startup-sol-actions button {
  min-width: 96px;
}

/* ── 3D planet splash overlay ────────────────────────────── */
.splash-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    ellipse at 50% 40%,
    rgba(var(--bg-rgb), 0.94) 0%,
    rgba(var(--bg-rgb), 0.99) 70%
  );
  backdrop-filter: blur(6px);
  opacity: 1;
  transition: opacity 0.5s ease;
}
.splash--dismissing {
  opacity: 0;
  pointer-events: none;
}
.splash__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: min(480px, calc(100vw - 48px));
}
.splash__canvas {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: grab;
}
.splash__canvas:active {
  cursor: grabbing;
}
.splash__title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--text);
  margin: 0;
  text-align: center;
}
.splash__loading {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.3px;
}
.splash__enter {
  padding: 12px 32px;
  font-size: 15px;
  min-width: 180px;
}

.swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 1px solid rgba(var(--overlay-color), 0.25);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset;
}

.kpi-colour {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  color: rgba(10, 14, 20, 0.92); /* dark text for light star colours */
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 0 rgba(var(--overlay-color), 0.18) inset;
}

.swatch--dark {
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: 0 0 0 1px rgba(var(--overlay-color), 0.12) inset;
}

/* Star colour output special styling */
.kpi.kpi--colour {
  /* Default: solid swatch */
  background: var(--kpi-colour, rgba(var(--overlay-color), 0.92));
  color: rgba(20, 24, 32, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.12);
}

/* Left-to-right linear gradient (vegetation pale → deep) */
.kpi--colour[data-gradient="linear"] {
  background: linear-gradient(to right, var(--kpi-colour-center) 0%, var(--kpi-colour-edge) 100%);
}

/* When provided, render a soft limb gradient like the reference sky domes */
.kpi--colour[data-gradient="radial"] {
  /* Centre-to-edge "sphere" look */
  background: radial-gradient(
    circle at 40% 35%,
    var(--kpi-colour-center, rgba(var(--overlay-color), 0.95)) 0%,
    color-mix(
        in srgb,
        var(--kpi-colour-center, rgba(var(--overlay-color), 0.95)) 70%,
        var(--kpi-colour-edge, rgba(0, 0, 0, 0.08)) 30%
      )
      55%,
    var(--kpi-colour-edge, rgba(0, 0, 0, 0.12)) 100%
  ) !important;
  position: relative;
  overflow: hidden;
}
.kpi--colour[data-gradient="radial"]::after {
  z-index: 0;
  content: "";
  position: absolute;
  inset: 0;
  /* subtle edge vignette + rim highlight */
  background:
    radial-gradient(
      circle at 32% 28%,
      rgba(var(--overlay-color), 0.18) 0%,
      rgba(var(--overlay-color), 0.06) 30%,
      rgba(0, 0, 0, 0) 55%
    ),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.18) 100%);
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0.85;
}
.kpi--colour[data-gradient="radial"] > * {
  position: relative;
  z-index: 1;
}

/* Bright background (data-light="1", default) — dark text */
.kpi.kpi--colour .kpi__label {
  color: rgba(20, 24, 32, 0.62) !important;
}
.kpi.kpi--colour .kpi__value {
  font-size: 16px;
  letter-spacing: 0.5px;
  color: rgba(20, 24, 32, 0.92) !important;
}
.kpi.kpi--colour .kpi__meta {
  color: rgba(20, 24, 32, 0.82) !important;
}
.kpi.kpi--colour:has(.kpi__meta:not(:empty)) .kpi__label::after {
  color: rgba(20, 24, 32, 0.5);
  opacity: 1;
}
.kpi.kpi--colour .tip-icon {
  color: rgba(20, 24, 32, 0.7);
  border-color: rgba(20, 24, 32, 0.2);
  background: rgba(20, 24, 32, 0.06);
}

/* Dark background (data-light="0") — light text */
.kpi.kpi--colour[data-light="0"] .kpi__label,
.kpi.kpi--colour[data-light="0"] .kpi__meta {
  color: rgba(200, 206, 220, 0.88) !important;
}
.kpi.kpi--colour[data-light="0"] .kpi__value {
  color: rgba(220, 224, 236, 0.96) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.kpi.kpi--colour[data-light="0"]:has(.kpi__meta:not(:empty)) .kpi__label::after {
  color: rgba(200, 206, 220, 0.55);
}
.kpi.kpi--colour[data-light="0"] .tip-icon {
  color: rgba(200, 206, 220, 0.85);
  border-color: rgba(200, 206, 220, 0.25);
  background: rgba(200, 206, 220, 0.08);
}

.kpi--colour[data-gradient="radial"][data-horizon="1"] > * {
  position: relative;
  z-index: 1;
}

/* Extra warm/brighter rim bias for "sun near horizon" discs (more like the reference images) */
.kpi--colour[data-gradient="radial"][data-horizon="1"]::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 0;
  /*
    Rim-only warm glow: keep the centre neutral, concentrate brightness towards the edge,
    with a stronger segment on the sunward limb (upper-right).
  */
  background:
    /* Stronger sunward limb highlight (starts near rim) */
    radial-gradient(
      circle at 78% 26%,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 62%,
      rgba(255, 205, 125, 0.35) 70%,
      rgba(255, 195, 115, 0.75) 84%,
      rgba(255, 180, 100, 0) 104%
    ),
    /* General warm ring */
    radial-gradient(
        circle at 50% 50%,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 60%,
        rgba(255, 195, 115, 0.18) 72%,
        rgba(255, 175, 95, 0.34) 88%,
        rgba(255, 165, 85, 0) 106%
      ),
    /* Slight centre knockdown to prevent 'bright spot' */
    radial-gradient(
        circle at 42% 40%,
        rgba(0, 0, 0, 0.18) 0%,
        rgba(0, 0, 0, 0.1) 38%,
        rgba(0, 0, 0, 0) 62%
      );
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.98;
}

/* Slight bright rim for "sun high" (subtle, cooler) */
.kpi--colour[data-gradient="radial"]:not([data-horizon="1"])::before {
  z-index: 0;
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(
      circle at 35% 28%,
      rgba(var(--overlay-color), 0.22) 0%,
      rgba(var(--overlay-color), 0.1) 26%,
      rgba(var(--overlay-color), 0) 56%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(0, 0, 0, 0) 60%,
      rgba(var(--overlay-color), 0.1) 80%,
      rgba(var(--overlay-color), 0) 104%
    );
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.65;
}

/* Horizon sky discs: darker centre, MUCH brighter/warmer rim, no centre highlight */
.kpi--colour[data-gradient="radial"][data-horizon="1"] {
  background: radial-gradient(
    circle at 42% 40%,
    /* subtle centre darkening only */
    color-mix(in srgb, var(--kpi-colour-center, #223) 94%, black 6%) 0%,
    color-mix(in srgb, var(--kpi-colour-center, #223) 90%, black 10%) 46%,
    /* gentler transition to warm rim */
    color-mix(in srgb, var(--kpi-colour-center, #223) 76%, var(--kpi-colour-edge, #f0c08a) 24%) 70%,
    /* softer rim highlight */ color-mix(in srgb, var(--kpi-colour-edge, #f0c08a) 94%, white 6%) 89%,
    color-mix(in srgb, var(--kpi-colour-edge, #f0c08a) 90%, white 10%) 96%,
    var(--kpi-colour-edge, #f0c08a) 100%
  ) !important;
}

/* Horizon text colour now handled automatically by data-light attribute */
/* Disable generic soft-light overlays on horizon cards (they reintroduce centre glow) */
.kpi--colour[data-gradient="radial"][data-horizon="1"]::after {
  display: none;
}
.kpi--colour[data-gradient="radial"][data-horizon="1"]::before {
  display: none;
}

/* Vegetation details button (inside KPI meta on gradient card) */
.veg-details-btn {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 1px solid rgba(20, 24, 32, 0.25);
  border-radius: 4px;
  background: rgba(20, 24, 32, 0.12);
  color: rgba(20, 24, 32, 0.8);
  cursor: pointer;
  vertical-align: middle;
  transition:
    background 0.15s,
    color 0.15s;
}
.veg-details-btn:hover {
  background: rgba(20, 24, 32, 0.22);
  color: rgba(20, 24, 32, 0.95);
}
/* Veg button on dark vegetation cards */
.kpi--colour[data-light="0"] .veg-details-btn {
  border-color: rgba(200, 206, 220, 0.25);
  background: rgba(200, 206, 220, 0.1);
  color: rgba(200, 206, 220, 0.8);
}
.kpi--colour[data-light="0"] .veg-details-btn:hover {
  background: rgba(200, 206, 220, 0.22);
  color: #fff;
}

/* Vegetation override controls */
.veg-manual-inputs {
  margin-top: 6px;
}
.veg-manual-inputs .form-row {
  margin-bottom: 4px;
}
.veg-manual-inputs input[type="color"] {
  width: 48px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  padding: 2px;
}
.veg-override-preview {
  height: 24px;
  border-radius: 4px;
  margin-top: 6px;
  border: 1px solid var(--border);
}
.viz-switch__mode-label {
  font-size: 12px;
  color: var(--muted);
  margin-left: 6px;
}

/* Vegetation info overlay + dialog */
.veg-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(5, 9, 20, 0.72);
  backdrop-filter: blur(3px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.veg-info-dialog {
  width: min(560px, calc(100vw - 36px));
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
}
.veg-info-gradient {
  height: 36px;
  border-radius: 6px;
  border: 1px solid rgba(var(--overlay-color), 0.08);
}
.veg-info-hex {
  font-size: 12px;
  font-family: var(--mono);
  color: var(--muted);
  margin-top: 4px;
}
.veg-info-note {
  font-size: 12px;
  font-style: italic;
  color: var(--muted);
  margin-top: 4px;
  margin-bottom: 14px;
}
.veg-info-section {
  margin-top: 14px;
}
.veg-info-heading {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.veg-info-dialog p,
.veg-info-dialog li {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.veg-info-dialog p {
  margin: 0 0 8px;
}
.veg-info-dialog ol,
.veg-info-dialog ul {
  margin: 0 0 8px;
  padding-left: 20px;
}
.veg-info-dialog li {
  margin-bottom: 4px;
}
.veg-info-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 1px 6px;
  border-radius: 3px;
  vertical-align: middle;
  text-transform: uppercase;
}
.veg-info-tag--empirical {
  background: rgba(91, 182, 120, 0.15);
  color: #6ec78a;
}
.veg-info-tag--extrap {
  background: rgba(230, 170, 60, 0.15);
  color: #d4a84a;
}
.veg-info-refs {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 18px;
}
.veg-info-refs li {
  font-size: 12px;
  color: var(--muted);
}

/* Vegetation reference grid */
.veg-grid-container {
  margin-top: 10px;
  overflow-x: auto;
}
.veg-grid-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 11px;
}
.veg-grid-table th,
.veg-grid-table td {
  padding: 5px 8px;
  border: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.veg-grid-table th {
  background: rgba(var(--overlay-color), 0.03);
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
}
.veg-grid-star {
  font-weight: 700;
  color: var(--text);
}
.veg-grid-cell {
  padding: 4px 6px;
}
.veg-grid-swatch {
  height: 22px;
  border-radius: 4px;
  border: 1px solid rgba(var(--overlay-color), 0.06);
  min-width: 80px;
}
.veg-grid-hex {
  font-size: 9px;
  font-family: var(--mono);
  color: var(--muted);
  margin-top: 2px;
}
.veg-grid-toggle {
  margin-left: 8px;
  vertical-align: middle;
}

/* Gas giant preview card — resting state matches other KPIs (68px),
   canvas centre-crops via overflow:hidden; hover reveals full image + meta. */
.kpi.kpi--preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 68px;
  background: var(--bg);
  border: 1px solid rgba(var(--overlay-color), 0.06);
  overflow: hidden;
}
.kpi.kpi--preview > .kpi__label {
  position: relative;
  z-index: 1;
  align-self: stretch;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.9),
    0 0 12px rgba(0, 0, 0, 0.7);
}
.kpi.kpi--preview > .kpi__label .tip-icon,
.kpi.kpi--preview > .kpi__label .kpi__expand-indicator {
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.9),
    0 0 12px rgba(0, 0, 0, 0.7);
}
/* Hide recipe/pause buttons until the preview KPI is expanded */
.kpi.kpi--preview > .kpi__label button {
  display: none;
}
.kpi-wrap:hover > .kpi.kpi--preview > .kpi__label button,
.kpi-wrap:focus-within > .kpi.kpi--preview > .kpi__label button {
  display: inline-block;
}
.gg-preview-canvas,
.rocky-preview-canvas,
.moon-preview-canvas {
  display: block;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  /* Pull up so the planet centre (~90px) aligns within the visible strip */
  margin: -74px auto 0;
  flex-shrink: 0;
}
/* Hover: expand to show full canvas and meta */
.kpi-wrap:hover > .kpi.kpi--preview,
.kpi-wrap:focus-within > .kpi.kpi--preview {
  height: auto;
  overflow: visible;
}
.kpi-wrap:hover > .kpi.kpi--preview .gg-preview-canvas,
.kpi-wrap:focus-within > .kpi.kpi--preview .gg-preview-canvas,
.kpi-wrap:hover > .kpi.kpi--preview .rocky-preview-canvas,
.kpi-wrap:focus-within > .kpi.kpi--preview .rocky-preview-canvas,
.kpi-wrap:hover > .kpi.kpi--preview .moon-preview-canvas,
.kpi-wrap:focus-within > .kpi.kpi--preview .moon-preview-canvas {
  margin-top: 4px;
  margin-bottom: 6px;
}

.kpi-wrap--sun-preview {
  min-height: 68px;
}

.kpi.kpi--sun-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 68px;
  background: var(--bg);
  border: 1px solid rgba(var(--overlay-color), 0.06);
  overflow: hidden;
  --sun-kpi-text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.98), 0 0 16px rgba(0, 0, 0, 0.84), 0 0 2px rgba(0, 0, 0, 0.95);
}
[data-theme="light"] .kpi.kpi--sun-preview {
  --sun-kpi-text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 255, 255, 0.6);
}

.kpi.kpi--sun-preview > .kpi__label {
  position: relative;
  z-index: 1;
  align-self: stretch;
  text-shadow: var(--sun-kpi-text-shadow);
}

.kpi.kpi--sun-preview > .kpi__label .tip-icon {
  text-shadow: var(--sun-kpi-text-shadow);
}

.kpi.kpi--sun-preview > .kpi__label .kpi__expand-indicator {
  margin-left: 5px;
  font-size: 13px;
  opacity: 0.55;
  vertical-align: middle;
  text-shadow: var(--sun-kpi-text-shadow);
}

.sun-preview-canvas {
  display: block;
  width: 180px;
  height: 180px;
  margin: -74px auto 0;
  border-radius: 50%;
  border: 0;
  box-shadow: none;
  background: transparent;
  flex-shrink: 0;
}

.sun-preview-caption {
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  text-shadow: var(--sun-kpi-text-shadow);
  transition:
    max-height 0.2s ease,
    opacity 0.15s ease,
    margin 0.2s ease;
}

.sun-preview-value {
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-family: var(--mono);
  font-size: 22px;
  letter-spacing: 0.3px;
  line-height: 1.05;
  text-shadow: var(--sun-kpi-text-shadow);
  transition:
    max-height 0.2s ease,
    opacity 0.15s ease,
    margin 0.2s ease;
}

.kpi-wrap:hover > .kpi.kpi--sun-preview,
.kpi-wrap:focus-within > .kpi.kpi--sun-preview {
  height: auto;
  overflow: visible;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.kpi-wrap:hover > .kpi.kpi--sun-preview .sun-preview-canvas,
.kpi-wrap:focus-within > .kpi.kpi--sun-preview .sun-preview-canvas {
  margin-top: 4px;
  margin-bottom: 6px;
}

.kpi-wrap:hover > .kpi.kpi--sun-preview .sun-preview-value,
.kpi-wrap:focus-within > .kpi.kpi--sun-preview .sun-preview-value {
  margin-top: 2px;
  max-height: 28px;
  opacity: 1;
}

.kpi-wrap:hover > .kpi.kpi--sun-preview .sun-preview-caption,
.kpi-wrap:focus-within > .kpi.kpi--sun-preview .sun-preview-caption {
  margin-top: 4px;
  max-height: 64px;
  opacity: 1;
}

/* Gas giant style picker button */
.gg-style-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 34px;
  padding: 0 14px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(var(--overlay-color), 0.18);
  border-radius: 50px;
  color: rgba(235, 242, 255, 0.95);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.gg-style-btn:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.5);
}
.gg-style-btn__arrow {
  font-size: 10px;
  opacity: 0.5;
}
.gg-rings-toggle {
  width: 100%;
}

/* Gas giant moon list */
.gg-moon-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.gg-moon-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(var(--overlay-color), 0.1);
  background: rgba(var(--overlay-color), 0.06);
  font-size: 13px;
}

/* Gas giant style picker overlay */
.gg-picker-overlay,
.rp-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(5, 9, 20, 0.72);
  backdrop-filter: blur(3px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.gg-picker-overlay.is-hidden {
  display: none;
}
.gg-picker-dialog,
.rp-picker-dialog {
  width: min(740px, calc(100vw - 36px));
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
}
.gg-picker-category,
.rp-picker-category {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 16px 0 8px;
}
.gg-picker-category:first-child,
.rp-picker-category:first-child {
  margin-top: 0;
}
.gg-picker-grid,
.rp-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.gg-picker-card,
.rp-picker-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 8px;
  border-radius: 8px;
  border: 2px solid transparent;
  background: rgba(var(--overlay-color), 0.03);
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.gg-picker-card:hover,
.rp-picker-card:hover {
  background: rgba(var(--overlay-color), 0.08);
  border-color: rgba(var(--overlay-color), 0.18);
}
.gg-picker-card.is-selected {
  border-color: var(--accent, #5b8def);
  background: rgba(91, 141, 239, 0.1);
}
.gg-picker-card.is-primary {
  box-shadow: 0 0 0 2px rgba(91, 200, 130, 0.45);
}
.gg-picker-card.is-primary .gg-picker-card__label::after {
  content: " \u2605";
  color: rgba(91, 200, 130, 0.85);
}
.rp-picker-progress {
  height: 2px;
  background: rgba(var(--overlay-color), 0.08);
  overflow: hidden;
}
.rp-picker-progress > span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent, #5b8def);
  transition: width 80ms ease-out;
}
.rp-picker-progress.is-done {
  opacity: 0;
  transition: opacity 0.3s 0.2s;
}
.gg-picker-card canvas,
.rp-picker-card canvas {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--overlay-color), 0.06) 30%, transparent 65%);
}
.gg-picker-card canvas[data-loaded],
.rp-picker-card canvas[data-loaded] {
  background: none;
}
.gg-picker-card__label,
.rp-picker-card__label {
  font-size: 11px;
  color: var(--text);
  text-align: center;
  line-height: 1.3;
}
.gg-picker-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gg-picker-rings-toggle {
  min-width: 160px;
}
.rp-recipe-btn,
.moon-recipe-btn {
  float: right;
  margin-top: -2px;
}

/* Import / export page */
.io-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.io-textarea {
  width: 100%;
  min-height: 320px;
  resize: vertical;
  border-radius: 14px;
  border: 1px solid rgba(var(--overlay-color), 0.1);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(var(--overlay-color), 0.88);
  padding: 12px 12px;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
  font-size: 12px;
  line-height: 1.45;
}
.io-status {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.85;
}
.io-status[data-kind="ok"] {
  color: rgba(170, 255, 200, 0.9);
}
.io-status[data-kind="warn"] {
  color: rgba(255, 220, 160, 0.9);
}
.io-status[data-kind="error"] {
  color: rgba(255, 150, 150, 0.92);
}

/* Import/Export page helpers */
.io-backups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.io-backup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--overlay-color), 0.1);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
}
.io-backup-title {
  font-weight: 600;
}
.io-backup-sub {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 2px;
}
.io-backup-actions button {
  white-space: nowrap;
}

.io-import-preview {
  padding: 12px;
  border: 1px solid rgba(var(--overlay-color), 0.1);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
}
.io-preview-grid {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 8px 12px;
  font-size: 13px;
}
.io-import-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* System page: gas giant + debris disk editors */
.subsection {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--overlay-color), 0.08);
}
.subsection__title {
  font-weight: 700;
  margin-bottom: 6px;
}

.gg-list,
.dd-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.gg-row,
.dd-row {
  padding: 10px;
  border: 1px solid rgba(var(--overlay-color), 0.1);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.gg-row__head,
.dd-row__head {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 8px;
  align-items: center;
}
.gg-name,
.dd-name,
.dd2-name {
  width: 100%;
}
.dd-row__head {
  grid-template-columns: 180px 1fr;
}
.dd-row--inner .dd-row__head {
  grid-template-columns: 180px 1fr;
}

/* Debris disk suggestion preview */
.dd-suggest-preview {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(var(--overlay-color), 0.08);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.08);
}
.dd-suggest-list {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}
.dd-suggest-item {
  display: grid;
  grid-template-columns: 20px 28px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.15s,
    opacity 0.15s;
}
.dd-suggest-item:hover {
  background: rgba(var(--overlay-color), 0.04);
}
.dd-suggest-item--alt {
  opacity: 0.55;
}
.dd-suggest-item--alt:hover {
  opacity: 0.8;
}
.dd-suggest-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.dd-suggest-priority {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}
.dd-suggest-label {
  font-weight: 600;
  font-size: 13px;
}
.dd-suggest-range {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.dd-suggest-res {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

/* Calendar page */
.calendar-builder-grid {
  align-items: start;
}
.calendar-workspace {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: var(--gap);
  align-items: start;
}
.calendar-toolbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--pad);
  background: var(--panel);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  flex-wrap: wrap;
}
.calendar-toolbar__left,
.calendar-toolbar__nav,
.calendar-toolbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.calendar-toolbar__nav {
  margin: 0 auto;
}
.calendar-toolbar__profile {
  max-width: 150px;
}
.calendar-toolbar__year {
  width: 72px;
}
.calendar-toolbar__select {
  max-width: 140px;
}
.calendar-toolbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--overlay-color), 0.1);
  background: rgba(var(--overlay-color), 0.06);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.calendar-toolbar__btn:hover {
  background: rgba(var(--overlay-color), 0.12);
  border-color: rgba(var(--overlay-color), 0.18);
}
.calendar-toolbar__btn.is-active {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.35);
}
.calendar-drawer {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-y: auto;
  max-height: calc(100vh - 160px);
  background: var(--panel);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  animation: drawer-slide-in 0.15s ease;
}
.calendar-drawer.is-hidden {
  display: none;
}
.calendar-drawer-backdrop {
  display: none;
}
.calendar-drawer-backdrop.is-visible {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2999;
  background: rgba(0, 0, 0, 0.35);
}
@keyframes drawer-slide-in {
  from {
    transform: translateX(-12px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.calendar-drawer__tabs {
  display: flex;
  gap: 2px;
  padding: 8px 8px 0;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
  border-radius: var(--radius) var(--radius) 0 0;
}
.calendar-drawer__tab {
  flex: 1;
  padding: 8px 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition:
    background 0.12s,
    color 0.12s;
}
.calendar-drawer__tab:hover {
  background: rgba(var(--overlay-color), 0.06);
  color: var(--text);
}
.calendar-drawer__tab.is-active {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}
.calendar-drawer__body {
  padding: var(--pad);
  flex: 1;
  min-height: 0;
}
.calendar-drawer__section {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.calendar-drawer__section[hidden] {
  display: none;
}
.calendar-drawer__subtabs {
  display: flex;
  gap: 2px;
  padding: 0 0 var(--gap);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--gap);
}
.calendar-drawer__subtab {
  font: inherit;
  font-size: 0.82rem;
  padding: 4px 10px;
  border: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.calendar-drawer__subtab:hover {
  background: var(--hover);
  color: var(--text);
}
.calendar-drawer__subtab.is-active {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}
[data-rules-section][hidden] {
  display: none;
}
.calendar-derived-details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--gap);
  margin-bottom: var(--gap);
}
.calendar-derived-details > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: var(--gap);
}
.calendar-derived-details[open] > summary {
  margin-bottom: var(--gap);
}
.calendar-workspace.drawer-open {
  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
}
.calendar-workspace:not(.drawer-open) {
  grid-template-columns: 1fr;
}
.calendar-drawer__section .grid-2 {
  grid-template-columns: 1fr;
}
.calendar-collapsible-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  position: relative;
}
.calendar-collapsible-header > h2 {
  margin-right: auto;
}
.calendar-section-info {
  display: inline-flex;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.calendar-collapse-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(var(--overlay-color), 0.14);
  background: rgba(var(--overlay-color), 0.04);
  color: rgba(228, 235, 250, 0.9);
  font-size: 12px;
  font-weight: 600;
}
.calendar-collapse-toggle:hover {
  background: rgba(var(--overlay-color), 0.08);
}
.calendar-collapse-toggle:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.85);
  outline-offset: 1px;
}
.calendar-collapse-toggle__icon {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  opacity: 0.82;
  transition: transform 0.18s ease;
}
.calendar-collapse-toggle[data-state="expanded"] .calendar-collapse-toggle__icon {
  transform: rotate(-135deg);
}
.calendar-collapse-toggle[data-state="collapsed"] .calendar-collapse-toggle__icon {
  transform: rotate(45deg);
}
.calendar-drawer__section .panel.is-collapsed .panel__header {
  border-bottom-color: transparent;
}
.calendar-month-panel {
  min-width: 0;
}
.calendar-month-panel .panel__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.calendar-name-row {
  align-items: start;
}
.calendar-textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  border-radius: 12px;
  border: 1px solid rgba(var(--overlay-color), 0.1);
  background: rgba(var(--bg-rgb), 0.35);
  color: var(--text);
  padding: 10px 10px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
}
.calendar-textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 4px var(--focus);
  outline: none;
}
.calendar-special-form {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) minmax(110px, 1fr) 88px auto;
  gap: 8px;
  align-items: center;
}
.calendar-special-form > * {
  min-width: 0;
}
.calendar-holiday-form {
  margin-top: 8px;
}
.calendar-holiday-form .form-row {
  margin-bottom: 8px;
}
.calendar-holiday-attrs {
  align-items: start;
}
.calendar-holiday-attrs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.calendar-holiday-attr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(220, 226, 243, 0.9);
  font-size: 13px;
}
.calendar-holiday-attr input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}
.calendar-holiday-form .button-row {
  margin-top: 2px;
}
.calendar-special-form--leap {
  grid-template-columns:
    minmax(140px, 1.4fr)
    minmax(100px, 1fr)
    minmax(110px, 1fr)
    minmax(110px, 1fr)
    minmax(90px, 0.9fr);
}
.calendar-special-form--leap > button {
  grid-column: 1 / -1;
  justify-self: start;
}
.calendar-item-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.calendar-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--overlay-color), 0.1);
  background: rgba(0, 0, 0, 0.16);
}
.calendar-item-row.is-editing {
  border-color: rgba(var(--accent-rgb), 0.42);
  background: rgba(var(--accent-rgb), 0.12);
}
.calendar-item-row__main {
  min-width: 0;
}
.calendar-item-row__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.calendar-item-row__name {
  font-weight: 600;
}
.calendar-item-row .hint {
  margin-top: 2px;
}
.calendar-nav {
  margin-top: 0;
}
.calendar-month-title {
  font-size: 15px;
  font-weight: 700;
}
.calendar-chip-row {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.calendar-season-band {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(var(--overlay-color), 0.1);
  background: rgba(0, 0, 0, 0.16);
}
.calendar-season-band[hidden] {
  display: none;
}
.calendar-season-band__meta {
  font-size: 11px;
  line-height: 1.2;
  color: rgba(197, 209, 238, 0.86);
}
.calendar-season-band__track {
  position: relative;
  margin-top: 8px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(var(--overlay-color), 0.14);
  background: rgba(var(--overlay-color), 0.04);
  overflow: visible;
}
.calendar-season-band__segment {
  position: absolute;
  top: 0;
  bottom: 0;
  border-right: 1px solid rgba(9, 14, 26, 0.28);
}
.calendar-season-band__segment.season-0 {
  background: linear-gradient(90deg, rgba(111, 208, 147, 0.35), rgba(111, 208, 147, 0.23));
}
.calendar-season-band__segment.season-1 {
  background: linear-gradient(90deg, rgba(255, 210, 96, 0.36), rgba(255, 210, 96, 0.24));
}
.calendar-season-band__segment.season-2 {
  background: linear-gradient(90deg, rgba(243, 167, 108, 0.34), rgba(243, 167, 108, 0.23));
}
.calendar-season-band__segment.season-3 {
  background: linear-gradient(90deg, rgba(129, 201, 255, 0.34), rgba(129, 201, 255, 0.24));
}
.calendar-season-band__tick {
  position: absolute;
  top: -1px;
  width: 1px;
  bottom: -1px;
  background: rgba(var(--overlay-color), 0.42);
}
.calendar-season-band__tick-label {
  position: absolute;
  top: -19px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  color: rgba(223, 231, 251, 0.9);
}
.calendar-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--overlay-color), 0.12);
  background: rgba(var(--overlay-color), 0.05);
  font-size: 12px;
  color: rgba(235, 238, 248, 0.9);
}
.calendar-holiday-filter-bar {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(var(--overlay-color), 0.1);
  background: rgba(0, 0, 0, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.calendar-holiday-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(220, 226, 243, 0.92);
}
.calendar-holiday-filter input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
}
.calendar-holiday-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(var(--overlay-color), 0.2);
  background: rgba(var(--overlay-color), 0.08);
  color: rgba(235, 238, 248, 0.95);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}
.calendar-selected-day {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--overlay-color), 0.1);
  background: rgba(0, 0, 0, 0.16);
}
.calendar-date-tools {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--overlay-color), 0.1);
  background: rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.calendar-date-tools__title {
  font-size: 12px;
  color: var(--muted);
}
.calendar-date-tools__row {
  display: grid;
  grid-template-columns: auto minmax(0, 140px) auto;
  align-items: center;
  gap: 8px;
}
.calendar-date-tools__row:last-child {
  grid-template-columns: auto minmax(0, 90px) auto minmax(0, 140px) auto minmax(0, 90px) auto;
}
.calendar-date-tools__row label {
  font-size: 12px;
  color: rgba(220, 226, 243, 0.9);
}
.calendar-date-tools__row input,
.calendar-date-tools__row select {
  width: 100%;
  min-height: 34px;
}
.calendar-selected-day__title {
  font-weight: 700;
}
.calendar-selected-day__line {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(220, 226, 243, 0.88);
}
.calendar-selected-day__holiday-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin: 0 6px 0 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 215, 150, 0.55);
  background: rgba(255, 210, 140, 0.26);
  color: rgba(255, 231, 188, 0.95);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.calendar-selected-day__holiday-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.calendar-selected-day__holiday-cat {
  color: rgba(192, 204, 235, 0.9);
  font-size: 11px;
}
.calendar-selected-day__astro-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.calendar-selected-day__line--moon {
  display: flex;
  align-items: center;
  gap: 8px;
}
.calendar-moon-legend {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--overlay-color), 0.1);
  background: rgba(0, 0, 0, 0.16);
}
.calendar-moon-legend__title {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.calendar-moon-legend__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.calendar-moon-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(225, 233, 255, 0.9);
}
.calendar-moon-icon {
  --moon-color: #9ec8ff;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--overlay-color), 0.28);
  background: #2a314f;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
}
.calendar-moon-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--moon-color);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.calendar-moon-icon.phase-n::after {
  -webkit-mask-image: url("./assets/icons/moon-phase-n.svg");
  mask-image: url("./assets/icons/moon-phase-n.svg");
}
.calendar-moon-icon.phase-wc::after {
  -webkit-mask-image: url("./assets/icons/moon-phase-wc.svg");
  mask-image: url("./assets/icons/moon-phase-wc.svg");
}
.calendar-moon-icon.phase-1q::after {
  -webkit-mask-image: url("./assets/icons/moon-phase-1q.svg");
  mask-image: url("./assets/icons/moon-phase-1q.svg");
}
.calendar-moon-icon.phase-wg::after {
  -webkit-mask-image: url("./assets/icons/moon-phase-wg.svg");
  mask-image: url("./assets/icons/moon-phase-wg.svg");
}
.calendar-moon-icon.phase-f::after {
  -webkit-mask-image: url("./assets/icons/moon-phase-f.svg");
  mask-image: url("./assets/icons/moon-phase-f.svg");
}
.calendar-moon-icon.phase-ng::after {
  -webkit-mask-image: url("./assets/icons/moon-phase-ng.svg");
  mask-image: url("./assets/icons/moon-phase-ng.svg");
}
.calendar-moon-icon.phase-3q::after {
  -webkit-mask-image: url("./assets/icons/moon-phase-3q.svg");
  mask-image: url("./assets/icons/moon-phase-3q.svg");
}
.calendar-moon-icon.phase-nc::after {
  -webkit-mask-image: url("./assets/icons/moon-phase-nc.svg");
  mask-image: url("./assets/icons/moon-phase-nc.svg");
}
.calendar-moon-icon.moon-c0 {
  --moon-color: var(--moon-c0);
}
.calendar-moon-icon.moon-c1 {
  --moon-color: var(--moon-c1);
}
.calendar-moon-icon.moon-c2 {
  --moon-color: var(--moon-c2);
}
.calendar-moon-icon.moon-c3 {
  --moon-color: var(--moon-c3);
}
.calendar-astro-icon {
  --astro-color: var(--astro-default);
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--astro-color);
  flex: 0 0 auto;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.calendar-astro-marker {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}
.calendar-astro-source {
  --moon-color: var(--moon-c0);
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: 1px solid rgba(var(--overlay-color), 0.34);
  background: var(--moon-color);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset;
}
.calendar-astro-source.moon-c0 {
  --moon-color: var(--moon-c0);
}
.calendar-astro-source.moon-c1 {
  --moon-color: var(--moon-c1);
}
.calendar-astro-source.moon-c2 {
  --moon-color: var(--moon-c2);
}
.calendar-astro-source.moon-c3 {
  --moon-color: var(--moon-c3);
}
.calendar-astro-icon--vernal-equinox {
  --astro-color: var(--astro-vernal);
}
.calendar-astro-icon--vernal-equinox {
  -webkit-mask-image: url("./assets/icons/astro-vernal-equinox.svg");
  mask-image: url("./assets/icons/astro-vernal-equinox.svg");
}
.calendar-astro-icon--summer-solstice {
  --astro-color: var(--astro-summer);
}
.calendar-astro-icon--summer-solstice {
  -webkit-mask-image: url("./assets/icons/astro-summer-solstice.svg");
  mask-image: url("./assets/icons/astro-summer-solstice.svg");
}
.calendar-astro-icon--autumn-equinox {
  --astro-color: var(--astro-autumn);
}
.calendar-astro-icon--autumn-equinox {
  -webkit-mask-image: url("./assets/icons/astro-autumn-equinox.svg");
  mask-image: url("./assets/icons/astro-autumn-equinox.svg");
}
.calendar-astro-icon--winter-solstice {
  --astro-color: var(--astro-winter);
}
.calendar-astro-icon--winter-solstice {
  -webkit-mask-image: url("./assets/icons/astro-winter-solstice.svg");
  mask-image: url("./assets/icons/astro-winter-solstice.svg");
}
.calendar-astro-icon--solar-eclipse-window {
  --astro-color: var(--astro-solar-eclipse);
}
.calendar-astro-icon--solar-eclipse-window {
  -webkit-mask-image: url("./assets/icons/astro-solar-eclipse-window.svg");
  mask-image: url("./assets/icons/astro-solar-eclipse-window.svg");
}
.calendar-astro-icon--lunar-eclipse-window {
  --astro-color: var(--astro-lunar-eclipse);
}
.calendar-astro-icon--lunar-eclipse-window {
  -webkit-mask-image: url("./assets/icons/astro-lunar-eclipse-window.svg");
  mask-image: url("./assets/icons/astro-lunar-eclipse-window.svg");
}
.calendar-astro-icon--generic {
  -webkit-mask-image: url("./assets/icons/astro-summer-solstice.svg");
  mask-image: url("./assets/icons/astro-summer-solstice.svg");
}
.calendar-compact-summary {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.calendar-mini-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.calendar-mini-grid-wrap {
  margin-top: 2px;
  border-radius: 12px;
  border: 1px solid rgba(var(--overlay-color), 0.1);
  background: rgba(0, 0, 0, 0.16);
  overflow: hidden;
}
.calendar-mini-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.calendar-mini-grid th,
.calendar-mini-grid td {
  text-align: center;
  border-bottom: 1px solid rgba(var(--overlay-color), 0.06);
}
.calendar-mini-grid tr:last-child td {
  border-bottom: 0;
}
.calendar-mini-grid th {
  padding: 5px 2px;
  font-size: 11px;
  color: rgba(198, 209, 238, 0.84);
  background: rgba(var(--overlay-color), 0.03);
}
.calendar-mini-cell {
  padding: 2px;
}
.calendar-mini-cell.is-empty {
  background: rgba(var(--overlay-color), 0.03);
}
.calendar-mini-day {
  width: 100%;
  min-height: 30px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(231, 236, 249, 0.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 5px;
  line-height: 1;
}
.calendar-mini-day:hover {
  background: rgba(var(--overlay-color), 0.08);
}
.calendar-mini-day:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.85);
  outline-offset: 1px;
}
.calendar-mini-day__num {
  font-size: 12px;
  font-weight: 700;
}
.calendar-mini-day__holiday {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(var(--overlay-color), 0.14);
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 231, 188, 0.95);
  background: rgba(255, 210, 140, 0.22);
}
.calendar-mini-day__holiday.is-empty {
  opacity: 0;
}
.calendar-mini-day.is-selected {
  border-color: rgba(var(--accent-rgb), 0.65);
  background: rgba(var(--accent-rgb), 0.2);
}
.calendar-mini-day.has-holiday {
  border-color: rgba(255, 215, 150, 0.5);
  background: rgba(255, 205, 135, 0.1);
}
.calendar-mini-day.has-astronomy {
  border-color: rgba(169, 201, 255, 0.46);
}
.calendar-mini-day.has-cycle {
  border-color: rgba(150, 230, 182, 0.48);
}
.calendar-mini-day.is-festival {
  border-color: rgba(183, 205, 255, 0.35);
  background: rgba(var(--accent-rgb), 0.12);
  color: rgba(220, 232, 255, 0.95);
  min-height: 30px;
}
.calendar-mini-day.is-festival .calendar-mini-day__holiday {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-color: rgba(173, 200, 255, 0.5);
  background: rgba(var(--accent-rgb), 0.24);
  color: rgba(228, 238, 255, 0.95);
}
.calendar-mini-day__holiday--astro {
  border-color: rgba(169, 201, 255, 0.55);
  background: rgba(var(--accent-rgb), 0.22);
  color: rgba(228, 238, 255, 0.95);
}
.calendar-mini-day__holiday--cycle {
  border-color: rgba(159, 231, 190, 0.55);
  background: rgba(113, 208, 152, 0.22);
  color: rgba(227, 253, 238, 0.95);
}
.calendar-compact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.calendar-compact-card {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--overlay-color), 0.1);
  background: rgba(0, 0, 0, 0.14);
}
.calendar-compact-card__label {
  font-size: 12px;
  color: var(--muted);
}
.calendar-compact-card__value {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
}
.calendar-compact-events {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--overlay-color), 0.1);
  background: rgba(0, 0, 0, 0.16);
}
.calendar-compact-events__label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.calendar-compact-events ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: rgba(225, 233, 255, 0.9);
}
.calendar-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18px;
  background: rgba(5, 9, 20, 0.72);
  backdrop-filter: blur(3px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.calendar-detail-overlay.is-hidden {
  display: none;
}
.calendar-detail-dialog {
  width: min(1180px, calc(100vw - 36px));
  max-height: calc(100dvh - 36px);
  margin: 0 auto;
}
.calendar-detail-dialog .panel__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100dvh - 130px);
}
.calendar-grid-wrap {
  margin-top: 12px;
  width: 100%;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  min-height: 420px;
  max-height: 72vh;
  border-radius: 12px;
  border: 1px solid rgba(var(--overlay-color), 0.1);
  background: rgba(0, 0, 0, 0.2);
}
.calendar-grid-wrap.calendar-grid-wrap--detail {
  min-height: 320px;
  max-height: min(66vh, 720px);
}
.calendar-grid-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
}
.calendar-grid-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(var(--panel-rgb), 0.96);
  color: rgba(225, 233, 255, 0.92);
}
.calendar-grid-table th,
.calendar-grid-table td {
  border-bottom: 1px solid rgba(var(--overlay-color), 0.08);
  padding: 6px;
  text-align: center;
  font-size: 12px;
}
.calendar-grid-table tbody tr:last-child th,
.calendar-grid-table tbody tr:last-child td {
  border-bottom: 0;
}
.calendar-week-col {
  width: 90px;
  text-align: left;
  padding-left: 10px !important;
  color: rgba(188, 198, 228, 0.9);
}
.calendar-cell--empty {
  background: rgba(var(--overlay-color), 0.03);
}
.calendar-day-btn {
  width: 100%;
  min-height: 48px;
  border-radius: 10px;
  border: 1px solid rgba(var(--overlay-color), 0.1);
  background: rgba(var(--overlay-color), 0.05);
  color: rgba(235, 238, 248, 0.9);
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  text-align: left;
}
.calendar-day-btn:hover {
  background: rgba(var(--overlay-color), 0.08);
}
.calendar-day-btn:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.85);
  outline-offset: 1px;
}
.calendar-day-btn.is-selected {
  border-color: rgba(var(--accent-rgb), 0.65);
  background: rgba(var(--accent-rgb), 0.2);
}
.calendar-day-btn.is-full-moon .calendar-day-btn__phase {
  color: rgba(170, 220, 255, 0.95);
}
.calendar-day-btn.is-new-moon .calendar-day-btn__phase {
  color: rgba(210, 190, 255, 0.95);
}
.calendar-day-btn.has-holiday .calendar-day-btn__holiday {
  background: rgba(255, 210, 140, 0.26);
  border-color: rgba(255, 215, 150, 0.55);
  color: rgba(255, 231, 188, 0.95);
}
.calendar-day-btn.has-cycle .calendar-day-btn__cycle-icons .calendar-cycle-marker {
  box-shadow: 0 0 0 1px rgba(151, 231, 190, 0.35) inset;
}
.calendar-day-btn.holiday-tag-gold .calendar-day-btn__holiday,
.calendar-mini-day.holiday-tag-gold .calendar-mini-day__holiday,
.calendar-selected-day__holiday-item.holiday-tag-gold .calendar-selected-day__holiday-mark,
.calendar-holiday-chip.holiday-tag-gold {
  background: rgba(255, 210, 140, 0.24);
  border-color: rgba(255, 215, 150, 0.55);
  color: rgba(255, 233, 193, 0.96);
}
.calendar-day-btn.holiday-tag-azure .calendar-day-btn__holiday,
.calendar-mini-day.holiday-tag-azure .calendar-mini-day__holiday,
.calendar-selected-day__holiday-item.holiday-tag-azure .calendar-selected-day__holiday-mark,
.calendar-holiday-chip.holiday-tag-azure {
  background: rgba(133, 198, 255, 0.24);
  border-color: rgba(153, 206, 255, 0.55);
  color: rgba(219, 240, 255, 0.96);
}
.calendar-day-btn.holiday-tag-emerald .calendar-day-btn__holiday,
.calendar-mini-day.holiday-tag-emerald .calendar-mini-day__holiday,
.calendar-selected-day__holiday-item.holiday-tag-emerald .calendar-selected-day__holiday-mark,
.calendar-holiday-chip.holiday-tag-emerald {
  background: rgba(141, 234, 177, 0.24);
  border-color: rgba(157, 237, 189, 0.55);
  color: rgba(223, 255, 236, 0.96);
}
.calendar-day-btn.holiday-tag-violet .calendar-day-btn__holiday,
.calendar-mini-day.holiday-tag-violet .calendar-mini-day__holiday,
.calendar-selected-day__holiday-item.holiday-tag-violet .calendar-selected-day__holiday-mark,
.calendar-holiday-chip.holiday-tag-violet {
  background: rgba(197, 170, 255, 0.24);
  border-color: rgba(208, 184, 255, 0.55);
  color: rgba(238, 229, 255, 0.96);
}
.calendar-day-btn.holiday-tag-rose .calendar-day-btn__holiday,
.calendar-mini-day.holiday-tag-rose .calendar-mini-day__holiday,
.calendar-selected-day__holiday-item.holiday-tag-rose .calendar-selected-day__holiday-mark,
.calendar-holiday-chip.holiday-tag-rose {
  background: rgba(255, 164, 193, 0.24);
  border-color: rgba(255, 181, 206, 0.55);
  color: rgba(255, 230, 238, 0.96);
}
.calendar-day-btn.holiday-tag-slate .calendar-day-btn__holiday,
.calendar-mini-day.holiday-tag-slate .calendar-mini-day__holiday,
.calendar-selected-day__holiday-item.holiday-tag-slate .calendar-selected-day__holiday-mark,
.calendar-holiday-chip.holiday-tag-slate {
  background: rgba(165, 180, 212, 0.24);
  border-color: rgba(181, 194, 221, 0.55);
  color: rgba(236, 241, 251, 0.96);
}
.calendar-day-btn--festival {
  grid-template-columns: auto 1fr;
  cursor: default;
  border-color: rgba(173, 200, 255, 0.36);
  background: rgba(var(--accent-rgb), 0.16);
}
.calendar-day-btn--festival .calendar-day-btn__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(173, 200, 255, 0.6);
  background: rgba(var(--accent-rgb), 0.24);
  color: rgba(231, 240, 255, 0.95);
  font-size: 11px;
}
.calendar-day-btn--festival .calendar-day-btn__phase {
  justify-content: flex-start;
  min-width: 0;
  max-width: 100%;
  border-radius: 8px;
  border-color: rgba(173, 200, 255, 0.4);
  background: rgba(var(--accent-rgb), 0.2);
  color: rgba(231, 240, 255, 0.92);
  padding: 0 8px;
}
.calendar-day-btn__num {
  font-weight: 700;
}
.calendar-day-btn__moons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
}
.calendar-day-btn__phase,
.calendar-day-btn__holiday,
.calendar-day-btn__astro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid rgba(var(--overlay-color), 0.12);
  background: rgba(var(--overlay-color), 0.08);
}
.calendar-day-btn__astro-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 2px;
}
.calendar-day-btn__cycle-icons {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 2px;
}
.calendar-cycle-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  border: 1px solid rgba(var(--overlay-color), 0.2);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: rgba(228, 237, 255, 0.95);
  background: rgba(var(--overlay-color), 0.08);
}
.calendar-cycle-marker--active {
  border-color: rgba(124, 236, 167, 0.56);
  background: rgba(99, 214, 145, 0.24);
  color: rgba(231, 255, 241, 0.97);
}
.calendar-cycle-marker--rest {
  border-color: rgba(166, 193, 233, 0.55);
  background: rgba(134, 160, 212, 0.24);
  color: rgba(234, 244, 255, 0.96);
}
.calendar-cycle-marker--interval {
  border-color: rgba(255, 203, 133, 0.58);
  background: rgba(255, 181, 103, 0.23);
  color: rgba(255, 240, 210, 0.96);
}
.calendar-selected-day__cycle-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.calendar-selected-day__cycle-item .calendar-cycle-marker {
  transform: translateY(-1px);
}
.calendar-day-btn__holiday.is-empty,
.calendar-day-btn__astro.is-empty {
  opacity: 0;
}
/* ── Rule Debugger trace panel ──────────────────────────────────── */
.calendar-rule-trace {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(220, 226, 243, 0.88);
}
.calendar-rule-trace > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  user-select: none;
}
.calendar-rule-trace__raw {
  margin: 6px 0;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.5;
}
.calendar-rule-trace__section {
  margin-top: 6px;
}
.calendar-rule-trace__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-top: 4px;
}
.calendar-rule-trace__table th {
  text-align: left;
  padding: 2px 6px;
  border-bottom: 1px solid rgba(var(--overlay-color), 0.12);
  color: var(--muted);
  font-weight: 600;
}
.calendar-rule-trace__table td {
  padding: 2px 6px;
  border-bottom: 1px solid rgba(var(--overlay-color), 0.06);
}
.calendar-rule-trace__row--matched {
  background: rgba(80, 200, 120, 0.1);
}
.calendar-rule-trace__row--missed td {
  color: rgba(180, 180, 200, 0.55);
}
.calendar-rule-trace__copy {
  margin-top: 8px;
}
@media (max-width: 1200px) {
  .calendar-workspace,
  .calendar-workspace.drawer-open {
    grid-template-columns: 1fr;
  }
  .calendar-drawer {
    position: fixed;
    inset: 0;
    right: auto;
    width: min(85vw, 420px);
    z-index: 3000;
    max-height: 100vh;
    border-radius: 0;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
  }
  .calendar-special-form,
  .calendar-special-form--leap {
    grid-template-columns: 1fr;
  }
  .calendar-date-tools__row,
  .calendar-date-tools__row:last-child {
    grid-template-columns: 1fr;
  }
  .calendar-mini-day {
    min-height: 28px;
    padding: 4px 4px;
  }
  .calendar-compact-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 980px) {
  .calendar-season-band {
    margin-top: 8px;
    padding: 7px 8px 24px;
  }
  .calendar-season-band__meta {
    font-size: 10px;
  }
  .calendar-season-band__track {
    margin-top: 6px;
    height: 14px;
  }
  .calendar-season-band__tick-label {
    top: 15px;
    font-size: 9px;
    padding: 0 2px;
    border-radius: 4px;
    background: rgba(10, 17, 32, 0.62);
  }
}
@media (max-width: 640px) {
  .calendar-toolbar {
    flex-direction: column;
    gap: 6px;
  }
  .calendar-toolbar__nav {
    order: 1;
    justify-content: center;
  }
  .calendar-season-band {
    padding-bottom: 8px;
  }
  .calendar-season-band__tick-label {
    display: none;
  }
}

/* ── Tutorial toast panel (shared) ────────────────────────────── */

.ws-tutorial {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 3500;
  width: 340px;
  max-width: calc(100vw - 48px);
  background: rgba(var(--panel-rgb), 0.94);
  border: 1px solid rgba(var(--overlay-color), 0.1);
  border-radius: var(--radius);
  padding: var(--pad) 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  color: var(--text);
  animation: ws-tutorial-in 0.25s ease-out;
  font-family: var(--sans);
}
@keyframes ws-tutorial-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
.ws-tutorial__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ws-tutorial__step-indicator {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ws-tutorial__close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.ws-tutorial__close:hover {
  color: var(--text);
}
.ws-tutorial__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.ws-tutorial__body {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.ws-tutorial__nav {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.ws-tutorial__nav-btn {
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--overlay-color), 0.1);
  background: rgba(var(--overlay-color), 0.06);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.ws-tutorial__nav-btn:hover:not(:disabled) {
  background: rgba(var(--overlay-color), 0.12);
  border-color: rgba(var(--overlay-color), 0.18);
}
.ws-tutorial__nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.ws-tutorial-trigger {
  background: none;
  border: 1px solid rgba(var(--overlay-color), 0.1);
  color: var(--muted);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--sans);
  transition:
    color 0.15s,
    border-color 0.15s;
}
.ws-tutorial-trigger:hover,
.ws-tutorial-trigger.is-active {
  color: var(--text);
  border-color: rgba(var(--overlay-color), 0.2);
}
[data-theme="light"] .ws-tutorial {
  background: rgba(var(--panel-rgb), 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ── Changelog toast ──────────────────────────────────────── */
.changelog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.45);
  animation: changelog-fade-in 0.15s ease-out;
}
@keyframes changelog-fade-in {
  from {
    opacity: 0;
  }
}
.changelog-toast {
  width: 560px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  background: rgba(var(--panel-rgb), 0.96);
  border: 1px solid rgba(var(--overlay-color), 0.1);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  color: var(--text);
  animation: changelog-slide-in 0.2s ease-out;
}
@keyframes changelog-slide-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
}
.changelog-toast__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.changelog-toast__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}
.changelog-toast__close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.changelog-toast__close:hover {
  color: var(--text);
}
.changelog-toast__body {
  overflow-y: auto;
  padding: 8px 20px 20px;
  scrollbar-width: thin;
}
.changelog-release {
  border-bottom: 1px solid var(--border);
}
.changelog-release:last-child {
  border-bottom: none;
}
.changelog-release__summary {
  padding: 10px 0;
  cursor: pointer;
  font-size: 14px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.changelog-release__summary::-webkit-details-marker {
  display: none;
}
.changelog-release__summary::before {
  content: "\25B6";
  font-size: 9px;
  color: var(--muted);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.changelog-release[open] > .changelog-release__summary::before {
  transform: rotate(90deg);
}
.changelog-release__note {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}
.changelog-release ul {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.changelog-release li {
  margin-bottom: 4px;
}
.changelog-scientist {
  margin: 8px 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(var(--overlay-color), 0.04);
  font-size: 12px;
  line-height: 1.5;
}
.changelog-scientist__title {
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 2px;
}
.changelog-scientist__detail {
  color: var(--muted);
}
.changelog-scientist__summary {
  color: var(--muted);
  margin-top: 2px;
  font-style: italic;
}
[data-theme="light"] .changelog-toast {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* ── Light-mode content contrast fixes ─────────────────
   Many components use hardcoded light-on-dark text colours
   (rgba(220–240, 225–245, 240–255, 0.85–0.95)) that are
   invisible against light backgrounds. This block resets
   them to theme-aware variables.
   ────────────────────────────────────────────────────── */

/* Dark inner backgrounds → lighter tint in light mode */
[data-theme="light"] .calendar-grid-wrap,
[data-theme="light"] .calendar-holiday-filter-bar,
[data-theme="light"] .calendar-selected-day,
[data-theme="light"] .calendar-date-tools,
[data-theme="light"] .calendar-moon-legend,
[data-theme="light"] .calendar-season-band,
[data-theme="light"] .calendar-item-row,
[data-theme="light"] .calendar-compact-card,
[data-theme="light"] .calendar-compact-events {
  background: rgba(var(--overlay-color), 0.05);
}

/* Hardcoded light text → theme variable */
[data-theme="light"] .calendar-mini-day,
[data-theme="light"] .calendar-day-btn,
[data-theme="light"] .calendar-chip,
[data-theme="light"] .calendar-holiday-chip,
[data-theme="light"] .calendar-holiday-filter,
[data-theme="light"] .calendar-holiday-attr,
[data-theme="light"] .calendar-selected-day__line,
[data-theme="light"] .calendar-date-tools__row label,
[data-theme="light"] .calendar-compact-events ul,
[data-theme="light"] .calendar-season-band__meta,
[data-theme="light"] .calendar-season-band__tick-label,
[data-theme="light"] .calendar-collapse-toggle,
[data-theme="light"] .calendar-selected-day__holiday-cat,
[data-theme="light"] .calendar-week-col,
[data-theme="light"] .calendar-grid-table thead th,
[data-theme="light"] .calendar-mini-grid th,
[data-theme="light"] .calendar-moon-legend__item {
  color: var(--text);
}

/* Day mini text and festival overrides */
[data-theme="light"] .calendar-mini-day.is-festival,
[data-theme="light"] .calendar-mini-day.is-festival .calendar-mini-day__holiday,
[data-theme="light"] .calendar-mini-day__holiday--astro,
[data-theme="light"] .calendar-mini-day__holiday--cycle {
  color: var(--text);
}

/* Holiday marks: use opaque colours instead of translucent light tones */
[data-theme="light"] .calendar-selected-day__holiday-mark,
[data-theme="light"] .calendar-mini-day__holiday {
  color: #7a5a00;
  border-color: rgba(180, 140, 40, 0.45);
  background: rgba(220, 180, 60, 0.2);
}

/* Moon phase colours */
[data-theme="light"] .calendar-day-btn.is-full-moon .calendar-day-btn__phase {
  color: #2a6ea0;
}
[data-theme="light"] .calendar-day-btn.is-new-moon .calendar-day-btn__phase {
  color: #6838a0;
}

/* Pill-toggle checked label text */
[data-theme="light"] .physics-trio-toggle input[type="radio"]:checked + label,
[data-theme="light"] .physics-duo-toggle input[type="radio"]:checked + label {
  color: var(--text);
}

/* Holiday tag colours — darken for light backgrounds */
[data-theme="light"] .holiday-tag-gold .calendar-day-btn__holiday,
[data-theme="light"] .holiday-tag-gold .calendar-mini-day__holiday,
[data-theme="light"] .calendar-holiday-chip.holiday-tag-gold {
  color: #7a5a00;
  border-color: rgba(180, 140, 40, 0.45);
}
[data-theme="light"] .holiday-tag-azure .calendar-day-btn__holiday,
[data-theme="light"] .holiday-tag-azure .calendar-mini-day__holiday,
[data-theme="light"] .calendar-holiday-chip.holiday-tag-azure {
  color: #1a5a9a;
  border-color: rgba(40, 100, 180, 0.45);
}
[data-theme="light"] .holiday-tag-emerald .calendar-day-btn__holiday,
[data-theme="light"] .holiday-tag-emerald .calendar-mini-day__holiday,
[data-theme="light"] .calendar-holiday-chip.holiday-tag-emerald {
  color: #1a7a3a;
  border-color: rgba(40, 150, 80, 0.45);
}
[data-theme="light"] .holiday-tag-violet .calendar-day-btn__holiday,
[data-theme="light"] .holiday-tag-violet .calendar-mini-day__holiday,
[data-theme="light"] .calendar-holiday-chip.holiday-tag-violet {
  color: #5a2a9a;
  border-color: rgba(120, 60, 200, 0.45);
}
[data-theme="light"] .holiday-tag-rose .calendar-day-btn__holiday,
[data-theme="light"] .holiday-tag-rose .calendar-mini-day__holiday,
[data-theme="light"] .calendar-holiday-chip.holiday-tag-rose {
  color: #9a2a5a;
  border-color: rgba(180, 60, 120, 0.45);
}
[data-theme="light"] .holiday-tag-slate .calendar-day-btn__holiday,
[data-theme="light"] .holiday-tag-slate .calendar-mini-day__holiday,
[data-theme="light"] .calendar-holiday-chip.holiday-tag-slate {
  color: var(--text);
  border-color: rgba(var(--overlay-color), 0.2);
}

@media (max-width: 640px) {
  .ws-tutorial {
    right: 8px;
    left: 8px;
    bottom: 8px;
    width: auto;
  }
}

/* ── Science & Maths page ─────────────────────────────────────── */

.sci-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}
.sci-toc__link {
  padding: 6px 12px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border);
  background: rgba(var(--overlay-color), 0.04);
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.sci-toc__link:hover {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--text);
  text-decoration: none;
}

.sci-sections {
  display: flex;
  flex-direction: column;
  gap: var(--gap, 12px);
  margin-top: var(--gap, 12px);
}

.sci-section {
  background: rgba(var(--panel-rgb), 0.7);
  border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.sci-section__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(var(--overlay-color), 0.03);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.sci-section__summary::-webkit-details-marker {
  display: none;
}
.sci-section__summary::before {
  content: "\25B6";
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.2s;
}
.sci-section[open] > .sci-section__summary::before {
  transform: rotate(90deg);
}
.sci-section__title {
  font-weight: 700;
  font-size: 15px;
  flex: 1;
}
.sci-section__count {
  font-size: 12px;
  color: var(--muted);
}
.sci-section__body {
  padding: var(--pad, 16px);
}

/* Formula cards */
.sci-formula {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: rgba(var(--overlay-color), 0.02);
  margin-bottom: 12px;
}
.sci-formula:last-child {
  margin-bottom: 0;
}
.sci-formula__name {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text);
}
.sci-formula__eq {
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  margin: 8px 0;
  overflow-x: auto;
  text-align: center;
}
.sci-formula p {
  font-size: 13px;
  color: var(--muted);
  margin: 6px 0;
  line-height: 1.5;
}

/* Variable tables */
.sci-vars {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 12px;
}
.sci-vars td {
  padding: 3px 8px;
  border-bottom: 1px solid rgba(var(--overlay-color), 0.05);
  vertical-align: top;
}
.sci-vars td:first-child {
  white-space: nowrap;
  color: var(--text);
  width: 120px;
}
.sci-vars td:last-child {
  color: var(--muted);
}

/* Data tables */
.sci-data {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 12px;
}
.sci-data th {
  text-align: left;
  padding: 4px 8px;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.sci-data td {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(var(--overlay-color), 0.05);
  font-family: var(--mono, monospace);
  font-size: 12px;
}

/* Citations */
.sci-cite {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  margin-top: 6px;
}
.sci-cite a {
  color: var(--accent);
}

/* "Try it" calculators */
.sci-try {
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed rgba(var(--accent-rgb), 0.3);
  border-radius: var(--radius-sm, 8px);
  background: rgba(var(--accent-rgb), 0.04);
}
.sci-try__title {
  font-weight: 600;
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sci-try__row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.sci-try__row label {
  font-size: 12px;
  white-space: nowrap;
  min-width: 100px;
}
.sci-try__row input[type="number"] {
  max-width: 120px;
  padding: 6px 8px;
  font-size: 12px;
}
.sci-try__row input[type="range"] {
  flex: 1;
  min-width: 80px;
}
.sci-try__output {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  margin-top: 8px;
}
.sci-try__label {
  font-size: 12px;
  color: var(--muted);
}
.sci-try__value {
  font-family: var(--mono, monospace);
  font-weight: 600;
  color: var(--good, #8de0c8);
}

/* KaTeX dark theme override */
.sci-formula__eq .katex {
  color: var(--text);
}

@media (max-width: 980px) {
  .sci-try__row {
    flex-wrap: wrap;
  }
  .sci-try__row label {
    min-width: auto;
  }
  .sci-try__row input[type="number"] {
    max-width: 100%;
  }
}

/* ── Lessons page ──────────────────────────────────────────────── */

.les-toc {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 12px 0 0;
}
.les-toc__unit {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.les-toc__unit-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 4px 0;
}
.les-toc__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.les-toc__link {
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(var(--overlay-color), 0.04);
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  text-decoration: none;
}
.les-toc__link:hover {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--text);
  text-decoration: none;
}

.les-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.les-section {
  background: rgba(var(--panel-rgb), 0.7);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.les-section__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(var(--overlay-color), 0.03);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.les-section__summary::-webkit-details-marker {
  display: none;
}
.les-section__summary::before {
  content: "\25B6";
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.les-section[open] > .les-section__summary::before {
  transform: rotate(90deg);
}
.les-section__number {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  min-width: 24px;
}
.les-section__title {
  font-weight: 700;
  font-size: 15px;
  flex: 1;
}
.les-section__meta {
  font-size: 12px;
  color: var(--muted);
}
.les-section__body {
  padding: 16px;
}

.les-concept {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(var(--overlay-color), 0.02);
  margin-bottom: 12px;
}
.les-concept:last-child {
  margin-bottom: 0;
}
.les-concept__name {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text);
}
.les-concept__body {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.les-concept__body p {
  margin: 6px 0;
}
.les-concept__body b {
  color: var(--text);
}

.les-analogy {
  padding: 10px 14px;
  border-radius: 8px;
  margin: 10px 0;
  background: rgba(var(--accent-rgb), 0.08);
  border-left: 3px solid var(--accent);
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.les-analogy__icon {
  margin-right: 8px;
}

.les-key-idea {
  padding: 10px 14px;
  border-radius: 8px;
  margin: 10px 0;
  background: rgba(var(--good-rgb, 76, 175, 80), 0.08);
  border-left: 3px solid var(--good);
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  font-weight: 500;
}
.les-key-idea__icon {
  margin-right: 8px;
}

.les-unit-divider {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 8px 0 0;
}

.les-mode-toggle {
  min-width: 200px;
  width: auto;
}

/* ── Sky canvas (apparent page) ─────────────────────────────── */
.sky-canvas-wrap {
  width: 100%;
  aspect-ratio: 5 / 2;
  min-height: 200px;
  max-height: 400px;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.sky-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* System poster */
.poster-controls {
  margin-bottom: 10px;
}
.poster-controls__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.poster-controls__row + .poster-controls__row {
  margin-top: 8px;
}
.poster-controls__checks {
  gap: 6px;
}
.poster-controls .viz-check {
  padding: 4px 8px;
  font-size: 12px;
}
#btn-poster-collapse:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(35%);
}
#btn-poster-collapse:disabled:hover {
  background: rgba(var(--overlay-color), 0.06);
}
.system-poster-wrap {
  width: 100%;
  aspect-ratio: 3 / 1;
  min-height: 180px;
  max-height: 400px;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.system-poster-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #050818;
}
#posterPanel:fullscreen {
  background: var(--panel);
  display: flex;
  flex-direction: column;
  height: 100vh;
}
#posterPanel:fullscreen .panel__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#posterPanel:fullscreen .system-poster-wrap {
  max-height: none;
  flex: 1;
  min-height: 0;
  aspect-ratio: auto;
}
#posterPanel:fullscreen .panel__header {
  padding: 10px 16px;
}

/* ── Tectonics page ─────────────────────────────────────── */
.tec-canvas {
  width: 100%;
  height: 280px;
  border-radius: var(--radius-sm);
  background: rgba(var(--bg-rgb), 0.5);
  color: var(--text);
}
.tec-zone-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--muted);
}
.tec-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tec-legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  opacity: 0.7;
}
.tec-legend-swatch--crust {
  background: #8b5e3c;
  opacity: 0.5;
}
.tec-range-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
  transition: border-color 0.15s;
  cursor: pointer;
}
.tec-range-card.is-selected {
  border-color: var(--accent);
}
.tec-range-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tec-range-card__header select {
  flex: 1;
}
.tec-range-remove,
.tec-inactive-remove {
  background: none;
  border: none;
  color: var(--bad);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.tec-range-remove:hover,
.tec-inactive-remove:hover {
  opacity: 1;
}
.tec-add-btn {
  background: none;
  border: 1px dashed var(--border);
  color: var(--accent);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.82rem;
  width: 100%;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.tec-add-btn:hover {
  border-color: var(--accent);
}
.tec-range-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.tec-range-tab {
  background: rgba(var(--overlay-color), 0.05);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  cursor: pointer;
  font-size: 0.78rem;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.tec-range-tab.is-active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  border-color: var(--accent);
}
.tec-canvas--tall {
  height: 360px;
}
.tec-isostasy-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.tec-iso-btn {
  background: rgba(var(--overlay-color), 0.05);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  cursor: pointer;
  font-size: 0.78rem;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.tec-iso-btn.is-active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Climate Zones page ────────────────────────────────── */

.clim-canvas {
  width: 100%;
  height: 80px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(var(--bg-rgb), 0.35);
}
.clim-advisory {
  background: rgba(var(--warn-rgb, 255, 211, 124), 0.1);
  border: 1px solid rgba(var(--warn-rgb, 255, 211, 124), 0.25);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--warn);
}
.clim-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
}
.clim-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.clim-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  opacity: 0.6;
}
.clim-zone-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.clim-zone-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(var(--bg-rgb), 0.35);
}
.clim-zone-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  list-style: none;
}
.clim-zone-summary::-webkit-details-marker {
  display: none;
}
.clim-zone-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.clim-zone-name {
  font-weight: 600;
}
.clim-zone-variant {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
.clim-zone-range {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.clim-zone-temp {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.clim-zone-detail {
  padding: 4px 12px 12px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.clim-zone-detail p {
  margin: 4px 0;
}
.clim-detail-row strong {
  color: var(--text);
}

/* ── Population page ─────────────────────────────── */

.pop-growth-canvas {
  width: 100%;
  height: 200px;
  display: block;
  color: var(--text);
  margin-top: 8px;
}
.pop-cascade-canvas {
  width: 100%;
  height: 80px;
  display: block;
  color: var(--text);
  margin-top: 8px;
}
.pop-auto-badge {
  font-size: 9px;
  color: var(--muted);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.7;
}
.pop-dist-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.pop-dist-card {
  background: rgba(var(--overlay-color), 0.03);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.pop-dist-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
}
.pop-dist-rank {
  font-weight: bold;
  min-width: 100px;
}
.pop-dist-pop {
  min-width: 80px;
  text-align: right;
}
.pop-dist-frac {
  min-width: 50px;
  text-align: right;
  color: var(--muted);
}
.pop-dist-bar-wrap {
  flex: 1;
  height: 6px;
  background: rgba(var(--overlay-color), 0.06);
  border-radius: 3px;
  overflow: hidden;
}
.pop-dist-bar {
  display: block;
  height: 6px;
  background: var(--accent);
  border-radius: 3px;
  opacity: 0.6;
}
.pop-dist-regions {
  padding: 4px 12px 8px;
}
.pop-dist-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 11px;
}
.pop-dist-table th {
  text-align: left;
  color: var(--muted);
  font-size: 10px;
  padding: 2px 8px;
  border-bottom: 1px solid var(--border);
}
.pop-dist-table td {
  padding: 2px 8px;
  border-bottom: 1px solid var(--border);
}

/* Science Visualiser */
.science-viz__lede {
  margin: 0;
  max-width: 88ch;
  color: var(--muted);
  line-height: 1.55;
}
.science-viz__subsection--first {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.science-viz__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.science-viz__field input,
.science-viz__field select {
  width: 100%;
}
.science-viz__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 10px;
}
.science-viz__summary-line {
  margin: 10px 0 0;
}
.science-viz__results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.science-viz__result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--overlay-color), 0.12);
  background: rgba(var(--overlay-color), 0.03);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.science-viz__result:hover,
.science-viz__result.is-active {
  border-color: rgba(var(--accent-rgb), 0.38);
  background: rgba(var(--accent-rgb), 0.1);
}
.science-viz__result-title {
  font-weight: 600;
}
.science-viz__result-meta {
  font-size: 11px;
  color: var(--muted);
}
.science-viz__checklist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.science-viz__check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(var(--overlay-color), 0.1);
  background: rgba(var(--overlay-color), 0.03);
  font-size: 13px;
}
.science-viz__check input {
  margin: 0;
}
.science-viz__canvas {
  min-height: 620px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(var(--overlay-color), 0.08);
  background:
    linear-gradient(180deg, rgba(var(--panel-rgb), 0.5), rgba(var(--bg-rgb), 0.42)),
    radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.12), transparent 48%);
  overflow: auto;
}
.science-viz__svg {
  display: block;
  width: 100%;
  min-width: 1080px;
  height: auto;
}
.science-viz__section rect {
  fill: rgba(var(--overlay-color), 0.03);
  stroke: rgba(var(--overlay-color), 0.08);
}
.science-viz__section-label {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.science-viz__edge {
  fill: none;
  stroke-width: 2.4;
  opacity: 0.78;
  transition:
    opacity 180ms ease,
    stroke-width 180ms ease;
}
.science-viz__edge--runtime {
  stroke: rgba(var(--accent-rgb), 0.82);
}
.science-viz__edge--documented {
  stroke: rgba(var(--good-rgb), 0.8);
  stroke-dasharray: 9 7;
}
.science-viz__edge--curated {
  stroke: rgba(var(--warn-rgb), 0.8);
  stroke-dasharray: 3 7;
}
.science-viz__edge.is-connected {
  opacity: 1;
  stroke-width: 3;
}
.science-viz__edge.is-muted {
  opacity: 0.16;
}
.science-viz__node {
  cursor: pointer;
  transition: opacity 180ms ease;
}
.science-viz__node rect {
  fill: rgba(var(--panel-rgb), 0.94);
  stroke: rgba(var(--overlay-color), 0.12);
  stroke-width: 1.2;
  transition:
    stroke 180ms ease,
    stroke-width 180ms ease,
    fill 180ms ease;
}
.science-viz__node--input rect {
  fill: rgba(var(--accent-rgb), 0.12);
  stroke: rgba(var(--accent-rgb), 0.34);
}
.science-viz__node--model rect {
  fill: rgba(var(--warn-rgb), 0.12);
  stroke: rgba(var(--warn-rgb), 0.34);
}
.science-viz__node--classifier rect {
  fill: rgba(var(--good-rgb), 0.1);
  stroke: rgba(var(--good-rgb), 0.3);
}
.science-viz__node.is-selected rect {
  stroke: rgba(var(--accent-rgb), 0.96);
  stroke-width: 2.8;
}
.science-viz__node.is-connected rect {
  stroke: rgba(var(--accent-rgb), 0.48);
}
.science-viz__node.is-muted {
  opacity: 0.32;
}
.science-viz__node:focus rect,
.science-viz__node:hover rect {
  stroke-width: 2;
}
.science-viz__node-label,
.science-viz__node-meta {
  pointer-events: none;
}
.science-viz__node-label {
  fill: var(--text);
  font-size: 12px;
  font-weight: 600;
}
.science-viz__node-meta {
  fill: var(--muted);
  font-size: 10px;
}
.science-viz__inspector {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.science-viz__inspector-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.science-viz__eyebrow,
.science-viz__label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.science-viz__inspector-title {
  margin: 4px 0 0;
  font-size: 20px;
}
.science-viz__summary {
  margin: 0;
  line-height: 1.55;
}
.science-viz__formula {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--overlay-color), 0.08);
  background: rgba(var(--overlay-color), 0.03);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
}
.science-viz__inspector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.science-viz__chip-row,
.science-viz__code-row,
.science-viz__tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.science-viz__chip,
.science-viz__link-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--overlay-color), 0.12);
  background: rgba(var(--overlay-color), 0.03);
  color: var(--text);
  font-size: 12px;
  text-decoration: none;
}
.science-viz__chip {
  cursor: pointer;
}
.science-viz__chip:hover,
.science-viz__link-chip:hover {
  border-color: rgba(var(--accent-rgb), 0.34);
  background: rgba(var(--accent-rgb), 0.08);
  text-decoration: none;
}
.science-viz__code-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(var(--overlay-color), 0.12);
  background: rgba(var(--overlay-color), 0.03);
  font-family: var(--mono);
  font-size: 11px;
}
.science-viz__tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(var(--overlay-color), 0.06);
  color: var(--muted);
  font-size: 11px;
  text-transform: lowercase;
}
.science-viz__empty {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.science-viz__empty--canvas {
  display: grid;
  place-items: center;
  min-height: 300px;
  text-align: center;
}
.science-viz__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--overlay-color), 0.08);
  background: rgba(var(--overlay-color), 0.03);
  margin-top: 10px;
}
.science-viz__legend-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
.science-viz__legend-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.science-viz__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}
.science-viz__legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.2px solid rgba(var(--overlay-color), 0.12);
  background: rgba(var(--panel-rgb), 0.94);
}
.science-viz__legend-swatch--input {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.34);
}
.science-viz__legend-swatch--model {
  background: rgba(var(--warn-rgb), 0.12);
  border-color: rgba(var(--warn-rgb), 0.34);
}
.science-viz__legend-swatch--classifier {
  background: rgba(var(--good-rgb), 0.1);
  border-color: rgba(var(--good-rgb), 0.3);
}
.science-viz__legend-line {
  display: inline-block;
  width: 24px;
  height: 0;
  border-top: 2.4px solid rgba(var(--accent-rgb), 0.82);
}
.science-viz__legend-line--documented {
  border-top-style: dashed;
  border-top-color: rgba(var(--good-rgb), 0.8);
}
.science-viz__legend-line--curated {
  border-top-style: dotted;
  border-top-color: rgba(var(--warn-rgb), 0.8);
}

@media (max-width: 1100px) {
  .science-viz__row,
  .science-viz__inspector-grid,
  .science-viz__checklist {
    grid-template-columns: 1fr;
  }

  .science-viz__canvas {
    min-height: 520px;
  }
}

/* Science Visualiser - visualiser-style layout overrides */
.science-viz-layout {
  display: block;
}
.science-viz-panel {
  overflow: hidden;
}
.science-viz-canvas-area {
  position: relative;
}
.science-viz__actions {
  margin-left: auto;
}
.science-viz-controls-dropdown {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 12px 16px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.science-viz-controls-dropdown__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}
.science-viz-controls-dropdown__row + .science-viz-controls-dropdown__row {
  margin-top: 12px;
}
.science-viz-controls-dropdown__row--dual > * {
  flex: 1 1 280px;
}
.science-viz__dropdown-block {
  flex: 1 1 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(var(--overlay-color), 0.1);
  background: rgba(var(--overlay-color), 0.06);
}
.science-viz__dropdown-block--results {
  max-height: 240px;
  overflow: auto;
}
.science-viz__dropdown-label,
.science-viz__details-title {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.science-viz__dropdown-label {
  margin-bottom: 8px;
}
.science-viz__field--grow {
  flex: 1 1 100%;
}
.science-viz__field--select {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(var(--overlay-color), 0.1);
  background: rgba(var(--overlay-color), 0.06);
}
.science-viz__status {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(var(--overlay-color), 0.03);
}
.science-viz__summary-line {
  margin: 6px 0 0;
}
.science-viz__results {
  margin-top: 0;
}
.science-viz__checklist {
  gap: 10px;
}
.science-viz__canvas {
  min-height: clamp(620px, 72vh, 980px);
  padding: 16px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(var(--panel-rgb), 0.52), rgba(var(--bg-rgb), 0.46)),
    radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.14), transparent 48%);
  overflow: auto;
}
.science-viz__details {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: var(--gap);
  padding: 16px;
  border-top: 1px solid var(--border);
  background: rgba(var(--overlay-color), 0.03);
}
.science-viz__details-block {
  min-width: 0;
}
.science-viz__details-title {
  margin-bottom: 10px;
}
.science-viz__kpis {
  padding-bottom: 0;
}
.science-viz__details-block--inspector {
  padding: 12px 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(var(--overlay-color), 0.08);
  background: rgba(var(--overlay-color), 0.03);
}

@media (max-width: 1100px) {
  .science-viz-controls-dropdown__row--dual > * {
    flex-basis: 100%;
  }

  .science-viz__status {
    flex-direction: column;
  }

  .science-viz__details {
    grid-template-columns: 1fr;
  }
}