:root {
  --bg: #061127;
  --panel: rgba(10, 30, 62, 0.88);
  --panel-2: rgba(13, 40, 78, 0.92);
  --line: rgba(149, 213, 255, 0.22);
  --text: #f4f8ff;
  --muted: #a9bdd8;
  --cyan: #62e7ff;
  --blue: #4a8cff;
  --yellow: #ffca58;
  --red: #ff667f;
  --green: #5be39b;
  --purple: #a984ff;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.32);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 10%, rgba(74, 140, 255, 0.18), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(169, 132, 255, 0.14), transparent 24%),
    linear-gradient(160deg, #061127 0%, #071a38 55%, #061127 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 3px solid rgba(98, 231, 255, 0.72);
  outline-offset: 3px;
}

.stars,
.stars::before,
.stars::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
  background-image:
    radial-gradient(circle, rgba(255,255,255,.85) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(98,231,255,.45) 0 1px, transparent 1.5px);
  background-position: 0 0, 40px 60px;
  background-size: 105px 105px, 155px 155px;
  opacity: .15;
  z-index: -1;
}
.stars::before { transform: scale(1.25) rotate(8deg); opacity: .4; }
.stars::after { transform: scale(1.7) rotate(-6deg); opacity: .2; }

.topbar {
  width: min(1520px, calc(100% - 28px));
  margin: 14px auto 0;
  padding: 13px 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(6, 18, 41, 0.82);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  position: sticky;
  top: 10px;
  z-index: 30;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.brand-mark { width: 46px; height: 46px; fill: var(--yellow); stroke: var(--cyan); stroke-width: 2; flex: 0 0 auto; }
.brand h1 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: -.03em; }
.eyebrow, .section-kicker { display: block; color: var(--cyan); font-weight: 800; font-size: .68rem; letter-spacing: .16em; }

.level-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,.055);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.level-btn {
  border: 0;
  border-radius: 12px;
  padding: 8px 17px;
  background: transparent;
  cursor: pointer;
  display: grid;
  gap: 1px;
  min-width: 130px;
  text-align: left;
}
.level-btn span { color: var(--muted); font-size: .72rem; }
.level-btn.active { background: linear-gradient(135deg, rgba(74,140,255,.95), rgba(86,83,218,.95)); box-shadow: 0 8px 22px rgba(42,91,213,.35); }
.level-btn.active span { color: #e8efff; }
.site-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.all-sims-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 12px; border-radius: 12px;
  color: var(--text); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--line); background: rgba(255,255,255,.06);
  font-size: .76rem; font-weight: 850;
}
.all-sims-link:hover { background: rgba(255,255,255,.12); }
.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  cursor: pointer;
}

main { width: min(1520px, calc(100% - 28px)); margin: 18px auto 34px; }
.control-ribbon {
  display: grid;
  grid-template-columns: 220px minmax(520px, 1fr) 210px;
  gap: 14px;
  align-items: stretch;
}

.element-tile,
.particle-tray,
.counts-card,
.model-card {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(12,37,75,.94), rgba(8,25,54,.94));
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.element-tile {
  min-height: 154px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  padding: 16px;
  text-align: left;
}
.element-tile::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -55px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(98,231,255,.25);
  border-radius: 50%;
  box-shadow: 0 0 45px rgba(98,231,255,.12);
}
.tile-symbol { position: absolute; left: 50%; top: 43%; transform: translate(-50%,-50%); font-size: 4rem; line-height: 1; font-weight: 850; letter-spacing: -.08em; }
.tile-mass { position: absolute; top: 13px; left: 16px; font-size: 1.2rem; font-weight: 800; }
.tile-atomic { position: absolute; top: 44px; left: 16px; font-size: .95rem; color: var(--cyan); font-weight: 800; }
.tile-charge { position: absolute; top: 13px; right: 16px; font-size: 1.15rem; color: var(--yellow); font-weight: 900; }
.tile-name { position: absolute; left: 16px; bottom: 30px; font-weight: 800; max-width: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-hint { position: absolute; left: 16px; bottom: 12px; color: var(--muted); font-size: .68rem; }

.particle-tray { padding: 12px; }
.tray-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 9px; }
.tray-heading > div { display: grid; }
.tray-heading span { color: var(--muted); font-size: .72rem; }
.selected-tool-text { background: rgba(98,231,255,.1); border: 1px solid rgba(98,231,255,.2); border-radius: 999px; padding: 5px 9px; white-space: nowrap; }
.particle-tools { display: flex; gap: 9px; flex-wrap: wrap; }
.particle-tool {
  flex: 1 1 145px;
  min-width: 135px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 15px;
  padding: 9px;
  background: rgba(255,255,255,.045);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.particle-tool:hover { transform: translateY(-1px); background: rgba(255,255,255,.075); }
.particle-tool.selected { box-shadow: 0 0 0 3px rgba(98,231,255,.38); }
.particle-tool span:last-child { display: grid; text-align: left; }
.particle-tool small { color: var(--muted); font-size: .68rem; }
.particle-orb {
  width: 41px;
  height: 41px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-weight: 900;
  color: #07152f;
  box-shadow: inset 0 -5px 10px rgba(0,0,0,.18), 0 7px 16px rgba(0,0,0,.18);
}
.proton .particle-orb, .proton-particle { background: radial-gradient(circle at 35% 30%, #ff9daf, #ff5572 65%, #bc2748); }
.neutron .particle-orb, .neutron-particle { background: radial-gradient(circle at 35% 30%, #d6b9ff, #9871f0 65%, #5c3cb7); }
.electron .particle-orb, .electron-particle { background: radial-gradient(circle at 35% 30%, #b9f7ff, #55dfff 60%, #1686c7); }

.counts-card { padding: 13px; display: grid; align-content: center; gap: 7px; }
.counts-card > div { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; padding: 8px 9px; background: rgba(255,255,255,.035); border-radius: 11px; }
.counts-card span { color: var(--muted); font-size: .8rem; }
.counts-card strong { font-size: 1.1rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.proton-dot { background: var(--red); }
.neutron-dot { background: var(--purple); }
.electron-dot { background: var(--cyan); }

.action-row { display: flex; gap: 9px; align-items: center; margin: 13px 0; flex-wrap: wrap; }
.primary-btn, .secondary-btn, .text-btn, .mini-btn {
  border-radius: 12px;
  padding: 9px 14px;
  cursor: pointer;
  border: 1px solid var(--line);
}
.primary-btn { background: linear-gradient(135deg, #2f8cff, #5e52e4); border-color: transparent; font-weight: 800; }
.secondary-btn { background: rgba(255,255,255,.055); }
.current-info-btn {
  border-color: rgba(98,231,255,.35);
  color: var(--cyan);
  font-weight: 800;
}
.current-info-btn.unavailable { opacity: .62; }
.text-btn { margin-left: auto; background: transparent; color: var(--cyan); }
.mini-btn { padding: 5px 9px; font-size: .72rem; background: rgba(255,255,255,.055); }

.workspace { display: grid; gap: 14px; }
.basic-workspace { grid-template-columns: minmax(620px, 1.6fr) minmax(310px, .72fr); }
.advanced-workspace { grid-template-columns: minmax(300px, .62fr) minmax(700px, 1.55fr); }
.model-card { padding: 17px; min-width: 0; }
.card-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 10px; }
.card-heading h2 { margin: 3px 0 0; font-size: 1.25rem; }
.card-heading.compact { margin-bottom: 14px; }
.limit-badge, .orbital-key { color: #dce8ff; font-size: .72rem; background: rgba(98,231,255,.08); border: 1px solid rgba(98,231,255,.18); padding: 7px 10px; border-radius: 999px; }
.orbital-key { display: flex; gap: 10px; }

.bohr-model {
  width: min(680px, 96%);
  aspect-ratio: 1;
  position: relative;
  margin: 2px auto 8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(255,202,88,.13) 0 12%, transparent 27%),
    radial-gradient(circle at center, rgba(74,140,255,.08), transparent 66%);
}
.shell {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(98,231,255,.34);
  border-radius: 50%;
  transition: .18s ease;
}
.shell::before { content: ""; position: absolute; inset: -5px; border: 1px dashed rgba(98,231,255,.09); border-radius: 50%; }
.shell > span { position: absolute; top: 50%; left: 6px; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; color: rgba(188,221,255,.55); font-size: .62rem; white-space: nowrap; }
.shell.drag-over, .nucleus.drag-over, .orbital-row.drag-over, .orbital-box.drag-over { border-color: var(--yellow) !important; box-shadow: 0 0 0 5px rgba(255,202,88,.12), 0 0 28px rgba(255,202,88,.25); }
.shell-1 { width: 29%; height: 29%; }
.shell-2 { width: 51%; height: 51%; }
.shell-3 { width: 72%; height: 72%; }
.shell-4 { width: 93%; height: 93%; }
.electron-layer { position: absolute; inset: 0; pointer-events: none; }
.shell-electron {
  position: absolute;
  width: 21px;
  height: 21px;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d8fbff, #55dfff 60%, #1686c7);
  box-shadow: 0 0 13px rgba(98,231,255,.72);
  color: #051227;
  font-size: .65rem;
  font-weight: 900;
  cursor: pointer;
  pointer-events: auto;
}
.shell-electron:hover { transform: translate(-50%, -50%) scale(1.16); }

.nucleus {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22%;
  min-width: 112px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(255,202,88,.55);
  background: radial-gradient(circle at 40% 35%, rgba(255,202,88,.2), rgba(255,102,127,.09) 55%, rgba(5,16,37,.9));
  display: grid;
  place-items: center;
  overflow: hidden;
  z-index: 4;
}
.nucleus-particles {
  width: 82%;
  height: 82%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.nucleon {
  width: clamp(8px, 1.35vw, 16px);
  height: clamp(8px, 1.35vw, 16px);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.28);
}
.nucleus-label { position: absolute; bottom: 5px; font-size: .55rem; letter-spacing: .13em; color: rgba(255,255,255,.68); z-index: 3; }
.more-nucleons { font-size: .62rem; color: var(--yellow); align-self: center; padding: 3px; }

.nucleus-particles.count-view {
  width: 88%;
  height: 70%;
  overflow: visible;
}
.nucleus-count-summary {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-items: center;
}
.nucleus-count-button {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  padding: 7px 5px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 4px;
  color: var(--text);
  cursor: pointer;
  box-shadow: inset 0 -3px 7px rgba(0,0,0,.2);
}
.nucleus-count-button span { font-size: .68rem; font-weight: 900; }
.nucleus-count-button strong { font-size: 1rem; line-height: 1; }
.nucleus-count-button.proton-count { background: linear-gradient(145deg, rgba(255,102,127,.6), rgba(188,39,72,.62)); }
.nucleus-count-button.neutron-count { background: linear-gradient(145deg, rgba(169,132,255,.58), rgba(92,60,183,.64)); }
.nucleus-count-button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.nucleus-count-button:disabled { opacity: .5; cursor: default; }

.shell-readout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.shell-readout > div { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 11px; padding: 9px 11px; }
.shell-readout span { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: rgba(98,231,255,.12); color: var(--cyan); font-weight: 800; }

.identity-panel { min-height: 96px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(74,140,255,.14), rgba(169,132,255,.1)); border: 1px solid rgba(116,181,255,.18); }
.identity-panel h3 { margin: 0 0 4px; font-size: 1.32rem; }
.identity-panel p { margin: 3px 0; color: var(--muted); font-size: .85rem; }
.identity-panel strong { color: var(--cyan); }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.info-grid > div { display: grid; padding: 11px; background: rgba(255,255,255,.04); border-radius: 13px; }
.info-grid span { color: var(--muted); font-size: .72rem; }
.info-grid strong { font-size: 1.2rem; margin: 2px 0; }
.info-grid small { color: rgba(169,189,216,.65); }
.feedback-panel { margin-top: 10px; padding: 12px 13px; border-radius: 13px; border: 1px solid; line-height: 1.35; font-size: .85rem; }
.feedback-panel.neutral { background: rgba(98,231,255,.07); border-color: rgba(98,231,255,.18); }
.feedback-panel.success { background: rgba(91,227,155,.09); border-color: rgba(91,227,155,.33); }
.feedback-panel.warning { background: rgba(255,202,88,.09); border-color: rgba(255,202,88,.34); }
.feedback-panel.error { background: rgba(255,102,127,.09); border-color: rgba(255,102,127,.34); }
.teaching-note { margin-top: 10px; padding: 12px; border-radius: 13px; background: rgba(255,255,255,.035); }
.teaching-note p { color: var(--muted); font-size: .78rem; line-height: 1.45; margin: 5px 0 0; }

.advanced-nucleus-card { display: flex; flex-direction: column; }
.advanced-nucleus {
  position: relative;
  transform: none;
  left: auto;
  top: auto;
  width: min(260px, 80%);
  min-width: 170px;
  margin: 14px auto 18px;
  flex: 0 0 auto;
}
.advanced-nucleus .nucleon { width: clamp(7px, 1vw, 13px); height: clamp(7px, 1vw, 13px); }
.mini-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 10px; }
.mini-stats > div { text-align: center; padding: 10px 5px; border-radius: 11px; background: rgba(255,255,255,.04); }
.mini-stats span { display: block; color: var(--muted); font-size: .68rem; }
.mini-stats strong { font-size: 1.1rem; }

.orbital-card { overflow: hidden; }
.orbital-help-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-size: .76rem; margin-bottom: 8px; }
.orbital-board { max-height: 620px; overflow: auto; padding-right: 5px; display: grid; gap: 6px; scrollbar-color: rgba(98,231,255,.35) transparent; }
.orbital-row {
  display: grid;
  grid-template-columns: 48px 88px 1fr 64px;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 9px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.075);
  background: rgba(255,255,255,.032);
}
.orbital-row.core-hidden { display: none; }
.orbital-label { font-weight: 900; font-size: 1rem; color: var(--cyan); }
.orbital-energy { color: var(--muted); font-size: .64rem; }
.orbital-boxes { display: flex; gap: 5px; flex-wrap: wrap; }
.orbital-box {
  width: 43px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 1px;
  border: 2px solid rgba(157,206,255,.46);
  border-top: 0;
  border-radius: 0 0 5px 5px;
  background: rgba(4,15,34,.55);
  cursor: pointer;
}
.orbital-box:hover { background: rgba(98,231,255,.08); }
.spin-electron { border: 0; background: transparent; color: var(--yellow); font-size: 1.55rem; line-height: 1; padding: 0; cursor: pointer; text-shadow: 0 0 10px rgba(255,202,88,.55); }
.orbital-count { text-align: right; color: var(--muted); font-size: .72rem; }
.orbital-count strong { color: var(--text); font-size: .9rem; }
.configuration-readout { margin-top: 10px; padding: 12px; border-radius: 13px; background: rgba(98,231,255,.055); border: 1px solid rgba(98,231,255,.15); display: grid; gap: 5px; }
.configuration-readout span { color: var(--muted); font-size: .7rem; }
.configuration-readout strong { font-size: .96rem; word-break: break-word; }

footer {
  width: min(1520px, calc(100% - 28px));
  margin: 0 auto 22px;
  padding: 15px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(5,16,37,.72);
  color: var(--muted);
  font-size: .74rem;
}
footer > div:first-child { display: grid; gap: 3px; }
footer strong { color: var(--text); }
.source-links { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.source-links a, .source-links button, .source-buttons a {
  color: var(--cyan);
  text-decoration: none;
  background: rgba(98,231,255,.06);
  border: 1px solid rgba(98,231,255,.16);
  border-radius: 999px;
  padding: 6px 9px;
  cursor: pointer;
}

.hidden { display: none !important; }
.advanced-only { display: none; }
body.advanced-mode .advanced-only { display: flex; }
body.advanced-mode .basic-electron-tool { display: none; }

.periodic-dialog, .info-dialog {
  width: min(1260px, calc(100% - 22px));
  max-height: calc(100vh - 22px);
  padding: 0;
  border: 1px solid rgba(151,211,255,.25);
  border-radius: 23px;
  background: #071831;
  color: var(--text);
  box-shadow: 0 30px 100px rgba(0,0,0,.55);
}
.info-dialog { width: min(720px, calc(100% - 22px)); }
dialog::backdrop { background: rgba(0, 6, 19, .82); backdrop-filter: blur(8px); }
.dialog-shell { padding: 18px; margin: 0; }
.dialog-header { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.dialog-header h2 { margin: 3px 0; font-size: 1.5rem; }
.dialog-header p { margin: 3px 0; color: var(--muted); font-size: .82rem; }
.dialog-close { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.055); cursor: pointer; font-size: 1.55rem; }
.periodic-tools { margin: 13px 0; display: flex; justify-content: space-between; align-items: end; gap: 15px; }
.periodic-tools label { display: grid; gap: 4px; color: var(--muted); font-size: .72rem; }
.periodic-tools input { width: min(360px, 80vw); background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--line); border-radius: 11px; padding: 9px 11px; }
.periodic-legend { display: flex; gap: 11px; flex-wrap: wrap; color: var(--muted); font-size: .68rem; }
.periodic-legend span { display: flex; gap: 4px; align-items: center; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.periodic-table {
  display: grid;
  grid-template-columns: repeat(18, minmax(44px, 1fr));
  grid-template-rows: repeat(9, 61px);
  gap: 4px;
  min-width: 940px;
}
.dialog-shell:has(.periodic-table) { overflow-x: auto; }
.element-cell {
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.11);
  padding: 4px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: left;
  background: rgba(255,255,255,.045);
}
.element-cell:hover { transform: translateY(-2px); z-index: 2; box-shadow: 0 8px 18px rgba(0,0,0,.28); }
.element-cell .z { position: absolute; top: 3px; left: 4px; font-size: .55rem; color: var(--muted); }
.element-cell .sym { display: block; text-align: center; margin-top: 7px; font-size: 1.08rem; font-weight: 900; }
.element-cell .ename { display: block; text-align: center; font-size: .48rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.element-cell.s-block { background: rgba(74,140,255,.16); }
.element-cell.p-block { background: rgba(91,227,155,.13); }
.element-cell.d-block { background: rgba(255,202,88,.14); }
.element-cell.f-block { background: rgba(169,132,255,.16); }
.element-cell.disabled { opacity: .22; cursor: not-allowed; filter: grayscale(.6); }
.element-cell.search-dim { opacity: .08; }
.dialog-note { color: var(--muted); font-size: .73rem; margin: 11px 0 0; }
.guide-list { padding-left: 1.4rem; line-height: 1.5; }
.guide-list li { margin: 10px 0; color: var(--muted); }
.guide-list strong { color: var(--text); }
.guide-tip, .source-copy p { padding: 11px 12px; border-radius: 12px; background: rgba(255,255,255,.04); color: var(--muted); line-height: 1.45; }
.source-copy strong { color: var(--text); }
.source-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 18px);
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  max-width: min(580px, calc(100% - 28px));
  padding: 11px 15px;
  border-radius: 999px;
  background: #102951;
  border: 1px solid rgba(98,231,255,.35);
  box-shadow: 0 15px 40px rgba(0,0,0,.35);
  transition: .2s ease;
  text-align: center;
  font-size: .82rem;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.drag-ghost { position: fixed; z-index: 120; pointer-events: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #07152f; box-shadow: 0 14px 35px rgba(0,0,0,.35); transform: translate(-50%,-50%); }

@media (max-width: 1120px) {
  .control-ribbon { grid-template-columns: 190px 1fr; }
  .counts-card { grid-column: 1 / -1; grid-template-columns: repeat(3,1fr); }
  .basic-workspace, .advanced-workspace { grid-template-columns: 1fr; }
  .advanced-nucleus-card { display: grid; grid-template-columns: minmax(220px,.7fr) 1fr; column-gap: 15px; align-items: center; }
  .advanced-nucleus-card .card-heading { grid-column: 1 / -1; }
  .advanced-nucleus-card .mini-stats { grid-column: 2; }
}

@media (max-width: 760px) {
  .topbar { grid-template-columns: 1fr auto; top: 5px; }
  .level-switch { grid-column: 1 / -1; grid-row: 2; }
  .level-btn { min-width: 0; }
  .site-actions { grid-column: 2; grid-row: 1; }
  .control-ribbon { grid-template-columns: 130px 1fr; }
  .element-tile { min-height: 138px; }
  .tile-symbol { font-size: 3.15rem; }
  .particle-tool { min-width: 118px; flex-basis: 118px; }
  .particle-orb { width: 35px; height: 35px; }
  .counts-card { grid-template-columns: 1fr; }
  .counts-card > div { padding: 6px 9px; }
  .text-btn { margin-left: 0; }
  .bohr-model { width: 100%; }
  .model-card { padding: 13px; }
  .card-heading { flex-direction: column; }
  .advanced-nucleus-card { display: flex; }
  .orbital-row { grid-template-columns: 42px 58px 1fr; }
  .orbital-count { grid-column: 3; text-align: left; }
  .orbital-box { width: 36px; height: 37px; }
  .orbital-help-row { align-items: flex-start; }
  footer { flex-direction: column; align-items: flex-start; }
  .source-links { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .site-actions { gap: 5px; }
  .all-sims-link { width: 34px; min-height: 34px; padding: 0; font-size: 0; }
  .all-sims-link::before { content: "←"; font-size: 1rem; }
  main, footer, .topbar { width: min(100% - 14px, 1520px); }
  .topbar { padding: 10px; border-radius: 17px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand h1 { font-size: 1.18rem; }
  .control-ribbon { grid-template-columns: 1fr; }
  .element-tile { min-height: 145px; }
  .particle-tools { display: grid; grid-template-columns: 1fr 1fr; }
  .particle-tool { min-width: 0; }
  .counts-card { grid-column: auto; }
  .action-row button { flex: 1 1 42%; }
  .shell-readout { grid-template-columns: 1fr 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .orbital-row { padding: 7px; gap: 6px; grid-template-columns: 34px 48px 1fr; }
  .orbital-label { font-size: .9rem; }
  .orbital-boxes { gap: 3px; }
  .orbital-box { width: 31px; height: 35px; }
  .spin-electron { font-size: 1.35rem; }
}

/* ============================================================
   Single-screen classroom layout + advanced orbital cloud view
   ============================================================ */

.cloud-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  min-width: 0;
  overflow: hidden;
}

.cloud-badge {
  color: #dce8ff;
  font-size: .68rem;
  background: rgba(169,132,255,.1);
  border: 1px solid rgba(169,132,255,.25);
  padding: 6px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.cloud-controls {
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 8px;
  align-items: end;
  margin-bottom: 7px;
}

.cloud-controls label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: .66rem;
}

.cloud-controls select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 6px 8px;
  font-weight: 800;
}

.cloud-controls option { color: #07152f; }

.cloud-orientation-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  align-content: end;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.cloud-orientation-buttons button {
  min-width: 34px;
  border: 1px solid rgba(151,211,255,.2);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
  padding: 5px 7px;
  color: var(--muted);
  cursor: pointer;
  font-size: .68rem;
}


.cloud-orientation-buttons button sub,
.cloud-readout sub {
  font-size: .72em;
  line-height: 0;
  vertical-align: -0.28em;
}

.cloud-orientation-buttons button:first-child {
  font-weight: 900;
}
.cloud-orientation-buttons button.active {
  color: var(--text);
  border-color: rgba(98,231,255,.55);
  background: rgba(98,231,255,.13);
  box-shadow: 0 0 0 2px rgba(98,231,255,.08);
}

.orbital-cloud-stage {
  min-height: 155px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(151,211,255,.14);
  border-radius: 15px;
  background:
    radial-gradient(circle at center, rgba(98,231,255,.085), transparent 56%),
    linear-gradient(145deg, rgba(2,12,30,.65), rgba(11,32,65,.52));
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.orbital-cloud-stage.dragging {
  cursor: grabbing;
}

.orbital-cloud-stage::before,
.orbital-cloud-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(175,213,255,.16);
  pointer-events: none;
}

.orbital-cloud-stage::before { width: 82%; height: 1px; transform: translate(-50%,-50%); }
.orbital-cloud-stage::after { width: 1px; height: 82%; transform: translate(-50%,-50%); }

.orbital-cloud-stage svg {
  width: min(100%, 300px);
  height: 100%;
  min-height: 150px;
  position: relative;
  z-index: 1;
  overflow: visible;
}

.cloud-float,
.cloud-3d {
  transform-origin: 150px 110px;
  animation: cloudFloat 6s ease-in-out infinite;
}

@keyframes cloudFloat {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-3px) rotate(1deg); }
}

.cloud-readout {
  display: flex;
  justify-content: space-between;
  gap: 9px;
  align-items: center;
  margin-top: 7px;
}

.cloud-readout > div { display: grid; min-width: 0; }
.cloud-readout strong { font-size: .88rem; }
.cloud-readout span { color: var(--muted); font-size: .65rem; }

.cloud-occupancy {
  flex: 0 0 auto;
  max-width: 48%;
  padding: 5px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,202,88,.22);
  background: rgba(255,202,88,.08);
  color: var(--yellow) !important;
  text-align: center;
}

.cloud-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .64rem;
  line-height: 1.35;
}

.orbital-row.cloud-selected {
  border-color: rgba(169,132,255,.58);
  background: rgba(169,132,255,.09);
  box-shadow: inset 3px 0 0 rgba(169,132,255,.8);
}

.orbital-box.cloud-selected {
  border-color: var(--purple);
  background: rgba(169,132,255,.16);
}

.compact-source-btn { margin-left: 0; }

/* Full-page desktop/Chromebook view. Internal boards scroll only when needed. */
@media (min-width: 1001px) and (min-height: 650px) {
  html, body { height: 100%; min-height: 0; }
  body { overflow: hidden; }

  .topbar {
    width: min(1520px, calc(100% - 16px));
    height: 58px;
    margin: 8px auto 0;
    padding: 7px 11px;
    border-radius: 17px;
    position: relative;
    top: auto;
  }

  .brand { gap: 8px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand h1 { font-size: 1.28rem; }
  .eyebrow { font-size: .58rem; }
  .level-btn { min-width: 118px; padding: 5px 13px; }
  .level-btn strong { font-size: .82rem; }
  .level-btn span { font-size: .62rem; }
  .all-sims-link { min-height: 36px; padding: 0 9px; font-size: .68rem; }
  .icon-btn { width: 36px; height: 36px; }

  main {
    width: min(1520px, calc(100% - 16px));
    height: calc(100dvh - 72px);
    margin: 6px auto 0;
    display: grid;
    grid-template-rows: 100px 36px minmax(0, 1fr);
    gap: 7px;
    min-height: 0;
  }

  .control-ribbon {
    grid-template-columns: 168px minmax(0,1fr) 158px;
    gap: 7px;
    min-height: 0;
  }

  .element-tile,
  .particle-tray,
  .counts-card,
  .model-card { border-radius: 16px; }

  .element-tile { min-height: 0; height: 100px; padding: 9px 11px; }
  .tile-symbol { font-size: 3rem; top: 45%; }
  .tile-mass { top: 8px; left: 11px; font-size: .95rem; }
  .tile-atomic { top: 31px; left: 11px; font-size: .78rem; }
  .tile-charge { top: 8px; right: 11px; font-size: .95rem; }
  .tile-name { left: 11px; bottom: 21px; max-width: 105px; font-size: .75rem; }
  .tile-hint { left: 11px; bottom: 7px; font-size: .56rem; }

  .particle-tray { padding: 7px 8px; overflow: hidden; }
  .tray-heading { margin-bottom: 5px; }
  .tray-heading strong { font-size: .75rem; }
  .tray-heading span { font-size: .59rem; }
  .selected-tool-text { padding: 3px 7px; }
  .particle-tools { flex-wrap: nowrap; gap: 5px; }
  .particle-tool { min-width: 0; flex: 1 1 0; padding: 5px 6px; gap: 6px; border-radius: 11px; }
  .particle-tool strong { font-size: .7rem; }
  .particle-tool small { font-size: .55rem; }
  .particle-orb { width: 31px; height: 31px; font-size: .77rem; }

  .counts-card { padding: 7px; gap: 3px; }
  .counts-card > div { padding: 4px 6px; border-radius: 8px; }
  .counts-card span { font-size: .66rem; }
  .counts-card strong { font-size: .9rem; }

  .action-row { margin: 0; height: 36px; gap: 6px; flex-wrap: nowrap; }
  .primary-btn, .secondary-btn, .text-btn { padding: 6px 10px; border-radius: 9px; font-size: .72rem; white-space: nowrap; }
  .text-btn { margin-left: auto; }
  .compact-source-btn { margin-left: 0; }

  .workspace { height: 100%; min-height: 0; gap: 7px; }
  .basic-workspace { grid-template-columns: minmax(0,1.65fr) minmax(285px,.62fr); }
  .advanced-workspace { grid-template-columns: minmax(220px,.55fr) minmax(245px,.68fr) minmax(500px,1.65fr); }
  .model-card { padding: 9px; min-height: 0; }
  .card-heading { margin-bottom: 5px; gap: 8px; }
  .card-heading h2 { font-size: .98rem; margin-top: 1px; }
  .section-kicker { font-size: .56rem; }
  .limit-badge, .orbital-key { font-size: .58rem; padding: 5px 7px; }

  .atom-card {
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
    overflow: hidden;
  }

  .bohr-model {
    height: 100%;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    margin: 0 auto 4px;
  }

  .shell-electron { width: 18px; height: 18px; }
  .nucleus { min-width: 84px; }
  .shell-readout { gap: 5px; }
  .shell-readout > div { padding: 5px 7px; border-radius: 8px; font-size: .72rem; }
  .shell-readout span { width: 22px; height: 22px; }

  .insight-card { overflow: hidden; }
  .card-heading.compact { margin-bottom: 6px; }
  .identity-panel { min-height: 72px; padding: 9px; border-radius: 11px; }
  .identity-panel h3 { font-size: 1rem; }
  .identity-panel p { font-size: .68rem; }
  .info-grid { gap: 5px; margin-top: 6px; }
  .info-grid > div { padding: 7px; border-radius: 9px; }
  .info-grid span, .info-grid small { font-size: .58rem; }
  .info-grid strong { font-size: .92rem; margin: 0; }
  .feedback-panel { margin-top: 6px; padding: 8px 9px; border-radius: 9px; font-size: .68rem; }
  .teaching-note { margin-top: 6px; padding: 8px; border-radius: 9px; }
  .teaching-note strong { font-size: .72rem; }
  .teaching-note p { font-size: .63rem; margin-top: 2px; line-height: 1.3; }

  .advanced-nucleus-card { display: grid; grid-template-rows: auto 145px auto auto; overflow: hidden; }
  .advanced-nucleus {
    width: 145px;
    min-width: 145px;
    height: 145px;
    margin: 2px auto 5px;
  }
  .advanced-nucleus .nucleus-count-summary { gap: 4px; }
  .advanced-nucleus .nucleus-count-button { padding: 6px 3px; border-radius: 8px; }
  .advanced-nucleus .nucleus-count-button span { font-size: .58rem; }
  .advanced-nucleus .nucleus-count-button strong { font-size: .82rem; }
  .advanced-nucleus .nucleon { width: 8px; height: 8px; }
  .advanced-nucleus-card .identity-panel { min-height: 65px; }
  .mini-stats { gap: 4px; margin-top: 5px; }
  .mini-stats > div { padding: 6px 3px; border-radius: 8px; }
  .mini-stats span { font-size: .55rem; }
  .mini-stats strong { font-size: .82rem; }

  .cloud-card { grid-template-rows: auto auto minmax(0,1fr) auto auto; }
  .cloud-controls { grid-template-columns: 84px 1fr; gap: 5px; margin-bottom: 4px; }
  .cloud-controls select { padding: 4px 6px; font-size: .68rem; }
  .cloud-orientation-buttons { gap: 3px; }
  .cloud-orientation-buttons button { min-width: 29px; padding: 4px 5px; font-size: .58rem; }
  .orbital-cloud-stage { min-height: 0; }
  .orbital-cloud-stage svg { min-height: 0; height: 100%; }
  .cloud-readout { margin-top: 4px; }
  .cloud-note { margin-top: 3px; font-size: .56rem; }

  .orbital-card {
    display: grid;
    grid-template-rows: auto auto minmax(0,1fr) auto auto;
    overflow: hidden;
  }
  .orbital-help-row { margin-bottom: 4px; font-size: .61rem; }
  .orbital-board { max-height: none; min-height: 0; overflow: auto; gap: 3px; padding-right: 3px; }
  .orbital-row { grid-template-columns: 38px 58px 1fr 48px; min-height: 39px; padding: 3px 6px; gap: 6px; border-radius: 8px; }
  .orbital-label { font-size: .79rem; }
  .orbital-energy { font-size: .52rem; }
  .orbital-boxes { gap: 3px; flex-wrap: nowrap; }
  .orbital-box { width: 31px; height: 29px; }
  .spin-electron { font-size: 1.17rem; }
  .orbital-count { font-size: .58rem; }
  .orbital-count strong { font-size: .72rem; }
  .configuration-readout { margin-top: 5px; padding: 7px; border-radius: 9px; gap: 2px; }
  .configuration-readout span { font-size: .56rem; }
  .configuration-readout strong { font-size: .68rem; }
  .orbital-card .feedback-panel { margin-top: 4px; }

  footer { display: none; }
}

/* Smaller screens retain normal page scrolling and a stacked cloud panel. */
@media (max-width: 1000px), (max-height: 649px) {
  body { overflow-y: auto; }
  .cloud-card { min-height: 430px; }
  .orbital-cloud-stage { min-height: 245px; }
}

@media (min-width: 1001px) and (min-height: 650px) {
  body { padding-top: 8px; }
  .topbar { margin-top: 0; }
}

@media (min-width: 1001px) and (min-height: 650px) {
  .counts-card {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
  .advanced-nucleus-card {
    grid-template-columns: 1fr;
    column-gap: 0;
    align-items: stretch;
  }
  .advanced-nucleus-card .card-heading,
  .advanced-nucleus-card .mini-stats { grid-column: auto; }
}

/* ============================================================
   Particle summaries + PubChem periodic-table information cards
   ============================================================ */

.particle-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.particle-summary > div {
  min-width: 0;
  display: grid;
  justify-items: center;
  padding: 8px 5px;
  border-radius: 11px;
  border: 1px solid rgba(98,231,255,.11);
  background: rgba(98,231,255,.045);
  text-align: center;
}

.particle-summary span {
  color: var(--muted);
  font-size: .67rem;
}

.particle-summary strong {
  margin-top: 2px;
  color: var(--text);
  font-size: 1.02rem;
}

.particle-summary small {
  color: rgba(169,189,216,.62);
  font-size: .56rem;
}

.advanced-particle-summary { margin-top: 6px; }

.element-cell { padding: 0; }

.element-select {
  width: 100%;
  height: 100%;
  padding: 4px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.element-select:focus-visible,
.element-info-button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.element-info-button {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 4;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(222,241,255,.38);
  border-radius: 50%;
  background: rgba(6,22,48,.88);
  color: #dff8ff;
  font-family: Georgia, serif;
  font-size: .62rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 7px rgba(0,0,0,.3);
}

.element-info-button:hover {
  border-color: var(--cyan);
  background: #123861;
  transform: scale(1.08);
}

.element-info-dialog { width: min(780px, calc(100% - 22px)); }
.element-info-shell { max-height: calc(100dvh - 24px); overflow: auto; }
.element-info-header { align-items: center; }

.element-info-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.element-info-heading h2 { margin: 2px 0; }

.element-info-tile {
  position: relative;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  border: 1px solid rgba(98,231,255,.28);
  background: linear-gradient(145deg, rgba(74,140,255,.2), rgba(169,132,255,.14));
  box-shadow: inset 0 0 26px rgba(98,231,255,.06);
}

.element-info-tile strong { font-size: 2.35rem; line-height: 1; }

.element-info-z {
  position: absolute;
  top: 7px;
  left: 8px;
  color: var(--muted);
  font-size: .66rem;
}

.element-info-loading,
.element-info-error {
  margin-top: 14px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(98,231,255,.18);
  background: rgba(98,231,255,.055);
  color: var(--muted);
  text-align: center;
}

.element-info-error {
  border-color: rgba(255,202,88,.3);
  background: rgba(255,202,88,.08);
  color: #ffe5a2;
  text-align: left;
  line-height: 1.45;
}

.element-info-content {
  margin-top: 13px;
  display: grid;
  gap: 12px;
}

.element-property-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.element-property-card {
  min-width: 0;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.038);
}

.element-property-card span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: .65rem;
}

.element-property-card strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: .83rem;
  line-height: 1.3;
}

.isotope-panel,
.element-description-panel {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(169,132,255,.16);
  background: rgba(169,132,255,.045);
}

.element-info-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.element-info-section-heading h3 { margin: 2px 0 0; font-size: 1rem; }

.source-pill {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(98,231,255,.2);
  background: rgba(98,231,255,.07);
  color: var(--cyan);
  font-size: .65rem;
}

.isotope-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.isotope-chip {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 11px;
  border: 1px solid rgba(255,202,88,.17);
  background: rgba(255,202,88,.055);
}

.isotope-chip strong { color: var(--yellow); font-size: 1rem; }
.isotope-chip span { color: var(--muted); font-size: .62rem; }

.element-info-note,
.element-description-panel p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.45;
}

.element-info-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-top: 13px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
  font-size: .66rem;
}

.element-info-footer a {
  flex: 0 0 auto;
  color: var(--cyan);
  font-weight: 750;
  text-decoration: none;
}

.element-info-footer a:hover { text-decoration: underline; }

/* In Basic mode, elements above calcium cannot be loaded, but their PubChem information remains available. */
.element-cell.disabled { opacity: 1; filter: none; cursor: default; }
.element-cell.disabled .element-select { opacity: .22; filter: grayscale(.6); cursor: not-allowed; }
.element-cell.disabled .element-info-button { opacity: 1; filter: none; cursor: pointer; }

@media (min-width: 1001px) and (min-height: 650px) {
  .particle-summary { gap: 4px; margin-top: 5px; }
  .particle-summary > div { padding: 5px 3px; border-radius: 8px; }
  .particle-summary span { font-size: .55rem; }
  .particle-summary strong { font-size: .82rem; }
  .particle-summary small { font-size: .5rem; }
  .advanced-nucleus-card { grid-template-rows: auto 135px auto auto auto; }
  .advanced-nucleus { width: 135px; min-width: 135px; height: 135px; }
}

@media (max-width: 680px) {
  .element-property-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .element-info-heading { align-items: flex-start; }
  .element-info-tile { flex-basis: 58px; width: 58px; height: 58px; }
  .element-info-tile strong { font-size: 1.85rem; }
  .element-info-footer { align-items: flex-start; flex-direction: column; }
}

/* ============================================================
   All occupied orbitals pop-out viewer
   ============================================================ */
.cloud-heading-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.orbital-info-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(98,231,255,.42);
  border-radius: 50%;
  background: rgba(98,231,255,.1);
  color: #e9fbff;
  font-family: Georgia, serif;
  font-size: .94rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(98,231,255,.05);
}

.orbital-info-btn:hover,
.orbital-info-btn:focus-visible {
  border-color: var(--cyan);
  background: rgba(98,231,255,.2);
  transform: translateY(-1px);
}

.all-orbitals-dialog {
  width: min(1240px, calc(100% - 18px));
  max-height: calc(100dvh - 18px);
  padding: 0;
  border: 1px solid rgba(151,211,255,.28);
  border-radius: 22px;
  background: linear-gradient(155deg, #07152f, #0b2448 62%, #081a36);
  color: var(--text);
  box-shadow: 0 28px 90px rgba(0,0,0,.62);
  overflow: hidden;
}

.all-orbitals-shell {
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr);
  gap: 12px;
  height: min(820px, calc(100dvh - 20px));
  max-height: calc(100dvh - 20px);
  padding: 16px;
  overflow: hidden;
}

.all-orbitals-header {
  align-items: center;
}

.all-orbitals-header p {
  max-width: 760px;
}

.all-orbitals-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(151,211,255,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.all-orbitals-toolbar button {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(151,211,255,.2);
  border-radius: 10px;
  background: rgba(255,255,255,.055);
  color: var(--text);
  font-weight: 800;
  font-size: .7rem;
  cursor: pointer;
}

.all-orbitals-toolbar button:hover,
.all-orbitals-toolbar button:focus-visible {
  border-color: rgba(98,231,255,.65);
  background: rgba(98,231,255,.12);
}

.all-orbitals-toolbar label {
  display: grid;
  grid-template-columns: auto 104px;
  gap: 7px;
  align-items: center;
  margin-left: 3px;
  color: var(--muted);
  font-size: .67rem;
  font-weight: 800;
}

.all-orbitals-toolbar input[type="range"] {
  accent-color: var(--cyan);
}

.all-orbitals-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(420px, 1fr) minmax(205px, 235px);
  gap: 11px;
}

.all-orbitals-control-panel,
.all-orbital-info-panel,
.all-orbitals-viewer-panel {
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(151,211,255,.14);
  border-radius: 16px;
  background: rgba(3,13,31,.48);
}

.all-orbitals-control-panel {
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  overflow: hidden;
}

.all-orbitals-panel-heading {
  padding: 12px 12px 8px;
}

.all-orbitals-panel-heading > div {
  display: grid;
  gap: 2px;
}

.all-orbitals-panel-heading strong {
  font-size: .83rem;
}

.all-orbitals-panel-heading span {
  color: var(--muted);
  font-size: .63rem;
  line-height: 1.35;
}

.all-orbital-toggle-list {
  min-height: 0;
  overflow: auto;
  padding: 0 9px 10px;
  scrollbar-width: thin;
}

.orbital-shell-group {
  margin-top: 7px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
  overflow: hidden;
}

.orbital-shell-heading,
.orbital-subshell-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 6px 8px;
  color: var(--text);
  font-size: .69rem;
  font-weight: 900;
}

.orbital-shell-heading {
  background: rgba(74,140,255,.09);
}

.orbital-shell-heading span,
.orbital-subshell-heading span {
  margin-left: auto;
  color: var(--muted);
  font-size: .6rem;
  font-weight: 700;
}

.orbital-subshell-block {
  border-top: 1px solid rgba(255,255,255,.055);
}

.orbital-subshell-heading {
  padding-left: 18px;
  background: rgba(169,132,255,.045);
}

.orbital-toggle-row {
  display: grid;
  grid-template-columns: 22px minmax(0,1fr) auto;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 3px 7px 3px 24px;
  border-top: 1px solid rgba(255,255,255,.035);
}

.orbital-toggle-row button {
  min-width: 0;
  padding: 3px 5px;
  border: 0;
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-size: .66rem;
  font-weight: 800;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orbital-toggle-row button:hover,
.orbital-toggle-row button.selected {
  color: var(--cyan);
}

.orbital-toggle-row .orbital-spin-count {
  color: #ffe29a;
  font-size: .62rem;
  white-space: nowrap;
}

.orbital-shell-heading input,
.orbital-subshell-heading input,
.orbital-toggle-row input,
.all-orbital-display-options input {
  accent-color: var(--cyan);
}

.all-orbital-empty-list {
  margin: 12px 2px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.45;
}

.all-orbital-display-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid rgba(151,211,255,.12);
  color: var(--muted);
  font-size: .65rem;
  font-weight: 800;
}

.all-orbital-display-options label {
  display: flex;
  align-items: center;
  gap: 7px;
}

.all-orbitals-viewer-panel {
  display: grid;
  grid-template-rows: minmax(0,1fr) auto;
  overflow: hidden;
}

.all-orbital-stage {
  min-height: 410px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(98,231,255,.1), transparent 52%),
    radial-gradient(circle at 25% 20%, rgba(169,132,255,.07), transparent 34%),
    linear-gradient(150deg, rgba(1,8,23,.85), rgba(8,29,59,.82));
  cursor: grab;
  touch-action: none;
  user-select: none;
  outline: none;
}

.all-orbital-stage:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(98,231,255,.72);
}

.all-orbital-stage.dragging {
  cursor: grabbing;
}

.all-orbital-stage svg {
  width: 100%;
  height: 100%;
  min-height: 410px;
  overflow: visible;
}

.all-orbital-shape {
  cursor: pointer;
  transition: opacity .15s ease;
}

.all-orbital-shape:hover {
  filter: brightness(1.14);
}

.all-orbital-viewer-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 8px 11px;
  border-top: 1px solid rgba(151,211,255,.12);
  color: var(--muted);
  font-size: .61rem;
  line-height: 1.35;
}

.phase-key {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.phase-key i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}

.phase-a { background: #62e7ff; }
.phase-b { background: #ffca58; }

.all-orbital-info-panel {
  align-self: stretch;
  padding: 13px;
  overflow: auto;
}

.all-orbital-info-panel h3 {
  margin: 4px 0 6px;
  font-size: 1rem;
}

.all-orbital-info-panel > p {
  margin: 0 0 11px;
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.45;
}

.all-orbital-info-grid {
  display: grid;
  gap: 7px;
}

.all-orbital-info-item {
  display: grid;
  gap: 2px;
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 10px;
  background: rgba(255,255,255,.032);
}

.all-orbital-info-item span {
  color: var(--muted);
  font-size: .59rem;
}

.all-orbital-info-item strong {
  font-size: .72rem;
  overflow-wrap: anywhere;
}

.all-orbital-info-tip {
  margin-top: 10px;
  padding: 9px;
  border-radius: 10px;
  background: rgba(98,231,255,.065);
  color: #cceeff;
  font-size: .63rem;
  line-height: 1.42;
}

@media (max-width: 980px) {
  .all-orbitals-dialog {
    width: min(760px, calc(100% - 12px));
  }
  .all-orbitals-shell {
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
    padding: 12px;
    overflow: auto;
  }
  .all-orbitals-layout {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto minmax(430px,58vh) auto;
  }
  .all-orbitals-control-panel {
    max-height: 270px;
  }
  .all-orbital-toggle-list {
    max-height: 170px;
  }
  .all-orbital-display-options {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .all-orbital-stage,
  .all-orbital-stage svg {
    min-height: 430px;
  }
}

@media (max-width: 620px) {
  .all-orbitals-shell {
    padding: 9px;
    gap: 8px;
  }
  .all-orbitals-header h2 {
    font-size: 1.15rem;
  }
  .all-orbitals-header p {
    font-size: .66rem;
  }
  .all-orbitals-toolbar {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .all-orbitals-toolbar button {
    min-height: 38px;
  }
  .all-orbitals-toolbar label {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .all-orbitals-layout {
    grid-template-rows: auto minmax(350px,52vh) auto;
  }
  .all-orbital-stage,
  .all-orbital-stage svg {
    min-height: 350px;
  }
  .all-orbital-display-options {
    grid-template-columns: 1fr;
  }
  .all-orbital-viewer-note {
    font-size: .57rem;
  }
}