/* Newton Science Discovery Center: light editorial treatment for Atomic Atlas. */
:root {
  --bg-obsidian: #f5f9f8;
  --bg-panel: #ffffff;
  --bg-stage: #eaf5f5;
  --bg-elevated: #ffffff;
  --border-line: #dce8e8;
  --border-subtle: #cfdddf;
  --gold-accent: #75539a;
  --gold-dim: rgba(117, 83, 154, .35);
  --gold-bg: rgba(117, 83, 154, .09);
  --teal-accent: #187e91;
  --text-bright: #17353e;
  --text-body: #3d5860;
  --text-muted: #668087;
  --text-dim: #7d989f;
}

html, body {
  width: 100%;
  min-height: 100%;
  color: var(--text-bright);
  background: var(--bg-obsidian);
}

button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible {
  outline: 3px solid #258eae;
  outline-offset: 3px;
}

.atlas-header {
  height: 78px;
  padding: 0 clamp(16px, 3vw, 44px);
  background: #fff;
  border-bottom: 1px solid var(--border-line);
  box-shadow: 0 5px 24px rgba(42, 93, 104, .04);
}
.header-brand { gap: 13px; }
.brand-emblem {
  width: 40px;
  height: 40px;
  border: 1px solid #b8d5dc;
  background: #eef8f8;
}
.brand-emblem::before { width: 26px; height: 26px; border-color: #84c5d0; }
.emblem-core { width: 8px; height: 8px; background: #9c6bc0; }
.emblem-dot { top: 6px; right: 5px; width: 5px; height: 5px; background: #218ba0; }
.brand-zh { font-size: 19px; letter-spacing: .05em; color: var(--text-bright); }
.brand-en { margin-top: 4px; font-size: 9px; letter-spacing: .09em; color: var(--text-muted); }
body[data-lang="en"] .brand-zh { font-family: var(--font-italic); letter-spacing: 0; }
.header-right { gap: clamp(7px, 1.2vw, 18px); }
.science-back {
  color: #17788d;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid rgba(23, 120, 141, .26);
  padding-bottom: 3px;
}
.science-back:hover { color: #7754a0; border-color: currentColor; }
.header-counter { color: var(--text-muted); }
#topIndexNum { color: #75539a; font-weight: 700; }
.arch-btn {
  border-radius: 100px;
  border-color: #d8e5e6;
  color: #3e5b64;
  background: #fff;
  min-height: 34px;
  padding: 7px 12px;
  font-weight: 550;
}
.arch-btn:hover { background: #edf7f7; color: #176f83; border-color: #9dcbd3; }
.arch-btn.active { background: #ecf6f6; color: #177d91; border-color: #9cced5; }

.atlas-intro {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px clamp(16px, 3vw, 44px);
  border-bottom: 1px solid var(--border-line);
  background: linear-gradient(95deg, #f0f9fa, #f8f5fb 68%, #fff);
}
.intro-kicker, .intro-count {
  color: #698c95;
  font: 600 10px/1.3 var(--font-mono);
  letter-spacing: .08em;
  white-space: nowrap;
}
.intro-zh, .intro-en {
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
  color: #345760;
}
.intro-en { display: none; }
body[data-lang="en"] .intro-zh { display: none; }
body[data-lang="en"] .intro-en { display: block; }
.intro-count { color: #75539a; }
.intro-count span { margin-left: 7px; font-size: 17px; vertical-align: -2px; }

.atlas-main {
  width: 100%;
  height: calc(100dvh - 132px);
  min-height: 590px;
  grid-template-columns: 232px minmax(0, 1fr) minmax(350px, 405px);
  background: #f5f9f8;
}
.atlas-sidebar-left { background: #fbfdfc; border-color: var(--border-line); }
.catalog-scroll { padding: 16px 10px; }
.catalog-scroll::-webkit-scrollbar-thumb, .monograph-scroll::-webkit-scrollbar-thumb { background: #bacfd2; }
.catalog-group-header { padding: 16px 12px 10px; border-color: var(--border-line); color: #496771; }
.group-dot { width: 7px; height: 7px; background: #2c8da0; }
.group-dot.quantum { background: #9364b4; }
.group-en-label { color: #77939a; }
.catalog-item {
  border: 1px solid transparent;
  border-radius: 12px;
  margin: 2px 0;
  padding: 11px 12px;
  gap: 11px;
}
.catalog-item:hover { background: #eef7f7; }
.catalog-item.active {
  background: #ecf6f6;
  border-color: #c7e5e7;
  box-shadow: inset 3px 0 #248da1;
}
.cat-num { color: #7b969e; font-size: 11px; }
.catalog-item.active .cat-num { color: #177b90; }
.cat-zh { color: #2f4c55; font-weight: 550; }
.catalog-item:hover .cat-zh, .catalog-item.active .cat-zh { color: #153c46; }
.cat-en, .catalog-item.active .cat-en { color: #769299; }
body[data-lang="en"] .cat-zh, body[data-lang="en"] .group-dot-title span:not(.group-dot) { display: none; }
body[data-lang="en"] .cat-en { color: #2f4c55; font: 600 11px/1.45 var(--font-sans); letter-spacing: .01em; }
body[data-lang="en"] .group-en-label { color: #496771; font-size: 10px; }
.sidebar-footer { border-color: var(--border-line); background: #f1f7f6; color: #54747b; }
.footer-sub { opacity: 1; color: #718b91; }

.atlas-stage-center {
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.94) 0 17%, rgba(229,244,244,.9) 54%, rgba(215,237,239,.92) 100%),
    linear-gradient(135deg, #ebf7f5, #f5f2fb);
}
.atlas-stage-center::before {
  content: "";
  position: absolute;
  inset: 0 0 76px;
  pointer-events: none;
  opacity: .45;
  background-image: linear-gradient(#c9e4e5 1px, transparent 1px), linear-gradient(90deg, #c9e4e5 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 50% 45%, transparent 0 20%, black 90%);
}
.canvas-wrap { z-index: 1; }
.callout-tag {
  padding: 7px 11px;
  border-radius: 8px;
  border-color: #c5dcdf;
  color: #1e444e;
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 22px rgba(41, 84, 92, .1);
  font-size: 11px;
}
.callout-tag .tag-en { color: #66838c; }
.callout-svg line, .callout-svg path { stroke: #8aa9b0 !important; }
.stage-bottom-bar {
  height: 76px;
  padding: 10px 18px;
  border-top: 1px solid #cce3e4;
  background: rgba(255,255,255,.84);
  backdrop-filter: blur(12px);
}
.stage-controls-left { gap: 12px; min-width: 0; }
.tool-btn-group { background: #fff; border-color: #d2e2e4; border-radius: 10px; overflow: hidden; }
.tool-btn { min-height: 40px; padding: 7px 10px; border-color: #d9e7e8; color: #496872; }
.tool-btn { white-space: nowrap; }
.tool-btn:hover { color: #17788d; background: #f1f8f8; }
.tool-btn.active { color: #745398; background: #f3eff8; }
.scale-title, .scale-val { color: #577680; }
.scale-bracket { border-color: #8ca9af; }
.stage-shortcuts-right { display: none; }
.kbd-box { color: #53717a; border-color: #c7dfe2; background: #f7fbfb; }

.atlas-sidebar-right { background: #fff; border-color: var(--border-line); }
.monograph-scroll { padding: 26px clamp(22px, 3vw, 36px) 28px; }
.mono-index-num { color: #8058a5; font-size: 23px; }
.mono-index-total, .mono-cat-right { color: #6d8990; }
.mono-title-zh { color: #1b3a43; font-size: clamp(29px, 2.6vw, 40px); line-height: 1.16; }
.mono-title-latin { color: #788d96; }
.mono-taxonomy-line { color: #197c8f; }
.mono-tag-gold { color: #75539a; }
.mono-tag-neutral { background: #f8fbfb; color: #5b737b; }
body[data-lang="en"] .mono-tags-row, body[data-lang="en"] .data-section-head, body[data-lang="en"] .data-grid-2x3 { display: none; }
body[data-lang="en"] .mono-section-head .sec-zh { display: none; }
.mono-pullquote-zh { color: #27454f; }
.mono-pullquote-en { color: #748890; }
.mono-prose p { color: #395660; font-size: 13.5px; }
.mono-prose p.en-prose { color: #6a8189; }
.mono-prose strong { color: #143e49; font-weight: 700; }
.mono-section-head span.sec-zh { color: #526e78; }
.mono-section-head span.sec-en { color: #7e969d; }
.interactive-subpanel { border-color: #d8e5e6; border-radius: 12px; background: #f6faf9; }
.sub-opt-btn { border-radius: 8px; background: #fff; color: #36545e; }
.sub-opt-btn:hover { color: #17788d; }
.sub-opt-btn.active { color: #75539a; }
.data-cell { background: #fff; }
.data-cell-label { color: #66828a; }
.data-cell-value { color: #264651; }
.data-cell-value span.muted { color: #788c93; }
.monograph-footer { color: #6c858e; background: #f9fcfb; }
.mono-foot-left strong { color: #496871; }

.atlas-modal-backdrop { background: rgba(24, 52, 62, .46); }
.atlas-modal { background: #fff; border-color: #d1e1e3; border-radius: 18px; overflow: hidden; box-shadow: 0 26px 70px rgba(27, 62, 73, .2); }
.atlas-modal-head { background: #f5faf9; border-color: var(--border-line); }
.modal-sub { color: #8060a0; }
.atlas-modal-head h3 { color: #183b45; }
.atlas-table th, .atlas-table td { border-color: #d8e5e6; color: #385660; }
.atlas-table th { background: #edf6f6; color: #245d70; }
body[data-lang="en"] .atlas-table td { font-size: 0; }
body[data-lang="en"] .atlas-table td .en-text { font-size: 12.8px; }
body[data-lang="en"] .atlas-table td br { display: none; }
.quiz-item { background: #fafdfc; border-color: #dce8e8; border-radius: 12px; }
.quiz-q-title { color: #1f414b; }
.quiz-choice { color: #36545e; background: #fff; border-color: #d7e4e5; border-radius: 8px; }
.quiz-choice:hover { color: #176e82; }
.quiz-choice.correct { color: #166e58; background: #eaf8f1; }
.quiz-choice.wrong { color: #a63e4b; background: #fff0f1; }
.quiz-exp-box { color: #4a6470; background: #f2f8f8; }
#guideModal .atlas-modal-body { color: #35545e !important; }
#guideModal .atlas-modal-body strong { color: #164556 !important; }
.guide-copy { color: #3d5860; font-size: 14px; line-height: 1.75; }
.guide-copy p + p { margin-top: 16px; }
.guide-copy a { color: #167c91; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.guide-copy .guide-source { border-top: 1px solid var(--border-line); padding-top: 14px; font-size: 12px; }

@media (max-width: 1200px) {
  .header-counter { display: none; }
  .atlas-main { grid-template-columns: 200px minmax(0, 1fr) minmax(320px, 360px); }
  .tool-btn { padding: 7px 8px; }
  .scale-indicator { display: none; }
}

@media (max-width: 980px) {
  html, body { height: auto; overflow: auto; }
  .atlas-header { height: auto; min-height: 74px; flex-wrap: wrap; gap: 12px; padding-top: 13px; padding-bottom: 13px; }
  .header-right { flex-wrap: wrap; justify-content: flex-start; }
  .atlas-intro { flex-wrap: wrap; gap: 7px 16px; }
  .intro-count { margin-left: auto; }
  .atlas-main { display: flex; flex-direction: column; width: 100%; height: auto; min-height: 0; overflow: visible; }
  .atlas-sidebar-left { order: 1; border-right: 0; border-bottom: 1px solid var(--border-line); }
  .catalog-scroll { display: flex; gap: 7px; overflow-x: auto; overflow-y: hidden; padding: 10px 16px; }
  .catalog-group-header { flex: 0 0 auto; min-width: 130px; border-top: 0; border-right: 1px solid var(--border-line); padding: 10px 16px 10px 0; margin: 0; }
  .group-en-label { display: none; }
  .catalog-item { flex: 0 0 auto; width: 150px; margin: 0; }
  .sidebar-footer { display: none; }
  .atlas-stage-center { order: 2; height: min(62vh, 560px); min-height: 430px; }
  .atlas-sidebar-right { order: 3; border-left: 0; border-top: 1px solid var(--border-line); }
  .monograph-scroll { overflow: visible; }
  .monograph-footer { min-height: 44px; }
}

@media (max-width: 650px) {
  .brand-zh { font-size: 17px; }
  .brand-en { font-size: 8px; }
  .science-back { order: -1; width: 100%; }
  .header-btn-group { order: 2; }
  .header-right > .arch-btn { font-size: 10px; padding-inline: 8px; }
  .atlas-intro { padding: 14px 16px; }
  .intro-zh, .intro-en { flex-basis: 100%; order: 2; }
  .intro-count { display: none; }
  .atlas-stage-center { min-height: 440px; height: 56vh; }
  .stage-bottom-bar { height: auto; min-height: 70px; padding: 9px; }
  .stage-controls-left { width: 100%; }
  .tool-btn-group { width: 100%; }
  .tool-btn { flex: 1; justify-content: center; min-width: 0; padding: 7px 3px; font-size: 10px; }
  .tool-btn .en-inline { display: none !important; }
  .tool-ico { font-size: 14px; }
  .stage-shortcuts-right { display: none; }
  .monograph-scroll { padding: 24px 17px; }
  .data-grid-2x3, .quiz-grid { grid-template-columns: 1fr; }
  .atlas-modal-backdrop { padding: 10px; }
  .atlas-modal { max-height: 94dvh; }
  .atlas-modal-head { padding: 14px; gap: 10px; }
  .atlas-modal-head h3 { font-size: 16px; }
  .atlas-modal-body { padding: 14px; }
  .atlas-table { min-width: 760px; }
  #compareModal .atlas-modal-body { overflow-x: auto; }
}

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