@import url("tokens.css");

body[data-simulation] {
  overflow-x: hidden;
}

.sim-header,
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: var(--header-height);
  border-bottom: 1px solid var(--color-border);
  background: rgba(5, 14, 25, 0.9);
  backdrop-filter: blur(18px) saturate(125%);
}

.sim-header__inner,
.topbar-inner,
.topwrap {
  width: min(var(--simulation-max), calc(100% - 32px));
  min-height: var(--header-height);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.sim-header__actions,
.nav-actions,
.topbar-inner > div:last-child,
.topwrap > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.sim-header .brand,
.topbar .brand {
  min-width: 0;
}

.sim-header .brand h1,
.topbar .brand h1 {
  font-size: 0.98rem;
}

.sim-header .brand p,
.topbar .brand p {
  max-width: 54vw;
}

.sim-grid,
.app,
.layout {
  width: min(var(--simulation-max), calc(100% - 32px));
  margin: var(--space-5) auto var(--space-8);
  display: grid;
  grid-template-columns: minmax(270px, 320px) minmax(620px, 1fr) minmax(320px, 380px);
  gap: var(--space-5);
  align-items: start;
  min-height: calc(100dvh - var(--header-height) - 72px);
}

.sim-controls,
.sim-results,
.app > .side,
.app > .result,
.layout > aside:first-child,
.layout > aside:last-child,
.layout > .left,
.layout > .right,
.layout > .rightcol {
  min-width: 0;
  max-height: calc(100dvh - var(--header-height) - 40px);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(145, 165, 191, 0.36) transparent;
}

.sim-controls,
.app > .side,
.layout > aside:first-child,
.layout > .left {
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
}

.sim-results,
.app > .result,
.layout > aside:last-child,
.layout > .right,
.layout > .rightcol {
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
}

.app > .side,
.app > .result,
.layout > aside,
.layout > .left,
.layout > .right,
.layout > .rightcol {
  padding: 0;
  border: 0;
  background: transparent;
}

.app > .side > * + *,
.app > .result > * + *,
.layout > aside > * + *,
.layout > .left > * + *,
.layout > .right > * + *,
.layout > .rightcol > * + * {
  margin-top: var(--space-4);
}

.app > .side > h1,
.layout > aside:first-child > h1,
.layout > .left > h1 {
  margin-top: var(--space-4);
  font-size: clamp(1.75rem, 2.2vw, 2.45rem);
}

.app > .side > p,
.layout > aside:first-child > p,
.layout > .left > p {
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.68;
}

.sim-workspace,
.app > .main,
.layout > .stage,
.layout > .main-stage,
.layout > section:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.app > .main,
.layout > .stage,
.layout > .main-stage,
.layout > section:nth-child(2) {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.panel,
.surface,
.eq,
.metric,
.readout,
.equation,
.substitution,
.notice,
.pill,
.read,
.modebox,
.scenario {
  overflow: hidden;
}

.panel {
  padding: 0;
}

.panel-head,
.stage-head {
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.018);
}

.panel-head h2,
.stage-head h2,
.stage-title h2 {
  margin: 0;
  font-size: 1.16rem;
}

.panel-head p,
.stage-head p,
.stage-title p {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: 0.84rem;
  line-height: 1.6;
}

.panel-body {
  padding: var(--space-5);
}

.app .panel,
.layout .panel,
.app .eq,
.layout .equation,
.layout .substitution,
.layout .notice,
.layout .read,
.layout .hero-card {
  border-radius: var(--radius-lg);
}

.canvas-wrap,
.simwrap,
.canvasFrame,
.maincanvas,
.simCanvas,
.graphCanvas,
.diagramCanvas {
  min-width: 0;
}

.canvas-wrap {
  display: grid;
  grid-template-rows: minmax(540px, 1fr) 300px;
  gap: var(--space-4);
}

.canvas-box,
.canvasFrame,
.simwrap,
.maincanvas,
.graphbox,
.stage .maincanvas,
.main-stage > .panel,
.stage > .canvasFrame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 18% 12%, rgba(53, 200, 230, 0.08), transparent 28rem),
    linear-gradient(180deg, rgba(4, 12, 22, 0.98), rgba(3, 9, 17, 0.99));
  box-shadow: var(--shadow-sm);
}

.canvas-box,
.canvasFrame,
.simwrap,
.stage .maincanvas,
.main-stage .maincanvas {
  min-height: 560px;
}

.canvas-box canvas,
.canvasFrame canvas,
.simwrap canvas,
.maincanvas canvas,
.graphbox canvas,
canvas.maincanvas,
canvas.simCanvas,
canvas.graphCanvas,
canvas.diagramCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.canvas-box > canvas,
.canvasFrame > canvas,
.simwrap > canvas,
canvas.maincanvas,
canvas.simCanvas {
  min-height: 560px;
}

.graphbox,
.canvas-wrap > .canvas-box:last-child {
  min-height: 280px;
}

.graphbox h3 {
  padding: var(--space-4) var(--space-5) 0;
}

.overlay,
.tooltip,
.overlay-hint,
.overlay-badges,
.statusbar {
  position: absolute;
  z-index: 4;
  max-width: min(420px, calc(100% - 32px));
  border: 1px solid var(--color-border);
  background: rgba(6, 16, 29, 0.86);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}

.overlay,
.overlay-badges {
  top: var(--space-4);
  left: var(--space-4);
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--color-text-soft);
  font-size: 0.76rem;
  font-weight: 750;
}

.tooltip,
.overlay-hint {
  right: var(--space-4);
  bottom: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-text-soft);
  font-size: 0.82rem;
  line-height: 1.55;
}

.statusbar {
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--color-text-soft);
  font-size: 0.78rem;
}

.kicker,
.tag {
  display: inline-flex;
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid rgba(53, 200, 230, 0.27);
  border-radius: 999px;
  background: rgba(53, 200, 230, 0.075);
}

.metrics,
.readout-grid,
.two,
.dual,
.pillrow,
.minirow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.triple {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.metric,
.readout,
.pill {
  min-width: 0;
  padding: var(--space-4);
  background: rgba(5, 14, 25, 0.72);
}

.metric span,
.readout .k {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-muted);
}

.metric strong,
.readout .v,
.pill strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: clamp(0.96rem, 1.2vw, 1.12rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.metric small,
.readout .s,
.pill span {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-size: 0.74rem;
  line-height: 1.45;
}

.metric.good,
.pill.good,
.ok {
  border-color: rgba(77, 214, 164, 0.28);
  background: rgba(77, 214, 164, 0.065);
}

.metric.warn,
.pill.warn,
.audit {
  border-color: rgba(242, 189, 85, 0.28);
  background: rgba(242, 189, 85, 0.065);
}

.metric.danger,
.pill.danger,
.bad {
  border-color: rgba(243, 111, 138, 0.28);
  background: rgba(243, 111, 138, 0.065);
}

.eq,
.equation,
.substitution,
.notice,
.read,
.hero-card {
  padding: var(--space-5);
}

.eq h3,
.equation .title,
.eq-title,
.read h3,
.notice h3 {
  margin: 0 0 var(--space-3);
  font-size: 1rem;
}

.eq p,
.equation p,
.notice p,
.read p,
.hero-card p,
.copy {
  color: var(--color-text-soft);
  font-size: 0.84rem;
  line-height: 1.65;
}

.math,
.sub,
.eq-sub,
.substitution {
  color: #d8e4f4;
  overflow-wrap: anywhere;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(5, 14, 25, 0.58);
}

.tab {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 0.78rem;
}

.tab.active,
.pro-tool.active,
.segmented button.active,
.modebox button.active,
.scenario .btn.active {
  color: #06131a;
  border-color: transparent;
  background: var(--color-primary);
}

.tab-pane,
.tabpage {
  display: none;
}

.tab-pane.active,
.tabpage.active {
  display: block;
}

.segmented,
.modebox,
.scenario {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
}

.segmented button,
.modebox button,
.scenario .btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  font-size: 0.82rem;
}

.field-row,
.graphrow,
.zone-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  color: var(--color-text-soft);
  font-size: 0.74rem;
}

.legend span,
.legend div {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.dot,
.legend i,
.badge .dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  display: inline-block;
  border-radius: 999px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: rgba(5, 14, 25, 0.72);
}

.bar,
.bar-bg,
.logbar,
.spectrum,
.barGradient {
  position: relative;
  overflow: hidden;
  min-height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.bar-fill,
.logbar > i,
.bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

.spectrum,
.barGradient {
  min-height: 24px;
  background: linear-gradient(90deg, #6c2cff, #1a65ff, #00bfff, #20d68d, #f4e83f, #ff8b1f, #c31308);
}

.line-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 12px #fff;
}

.axis-labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.level-list,
.model-list,
.checklist {
  display: grid;
  gap: var(--space-2);
}

.level-item,
.model-list > div,
.checklist > div {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: rgba(5, 14, 25, 0.5);
}

.level-item strong,
.model-list strong,
.checklist strong {
  color: var(--color-text);
}

.warnline,
.dangerline,
.goodline,
.unit-note,
.mode-note,
.status-line {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--color-text-soft);
  font-size: 0.78rem;
  line-height: 1.55;
}

.warnline,
.unit-note,
.mode-note {
  color: #ffe7b2;
  background: rgba(242, 189, 85, 0.07);
  border: 1px solid rgba(242, 189, 85, 0.24);
}

.dangerline {
  color: #ffdbe3;
  background: rgba(243, 111, 138, 0.07);
  border: 1px solid rgba(243, 111, 138, 0.24);
}

.goodline {
  color: #cffff0;
  background: rgba(77, 214, 164, 0.07);
  border: 1px solid rgba(77, 214, 164, 0.24);
}

.didactic-workbench {
  width: min(var(--content-max), calc(100% - 32px));
  margin: 0 auto var(--space-10);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(17, 32, 52, 0.96), rgba(8, 19, 33, 0.98));
  box-shadow: var(--shadow-md);
}

.didactic-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-7);
  border-bottom: 1px solid var(--color-border);
  background:
    radial-gradient(circle at 0% 0%, rgba(53, 200, 230, 0.11), transparent 38%),
    radial-gradient(circle at 100% 0%, rgba(138, 124, 244, 0.1), transparent 40%);
}

.didactic-head h2 {
  margin-block: var(--space-3) var(--space-2);
  font-size: clamp(1.7rem, 3vw, 2.7rem);
}

.didactic-head p {
  max-width: 850px;
  margin: 0;
  color: var(--color-muted);
}

.pro-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.pro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-5);
}

.pro-card {
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: rgba(5, 14, 25, 0.56);
}

.pro-card.wide {
  grid-column: 1 / -1;
}

.pro-card h3 {
  margin-bottom: var(--space-3);
}

.pro-card h4 {
  margin-block: var(--space-5) var(--space-2);
  color: var(--color-text-soft);
  font-size: 0.92rem;
}

.pro-card p,
.pro-card li {
  color: var(--color-muted);
  line-height: 1.68;
}

.pro-card ul,
.pro-card ol {
  padding-left: 1.25rem;
}

.pro-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  margin-block: var(--space-3);
}

.pro-step > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #03131a;
  border-radius: 10px;
  background: var(--color-primary);
  font-weight: 900;
}

.pro-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.pro-table th,
.pro-table td {
  padding: 10px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.pro-table th {
  color: var(--color-text);
}

.pro-table td {
  color: var(--color-muted);
}

.pro-foot {
  padding: var(--space-4) var(--space-6);
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  font-size: 0.74rem;
}

.pro-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.pro-badge {
  padding: 6px 9px;
  color: var(--color-text-soft);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.level-university {
  display: none;
}

.didactic-workbench[data-level="university"] .level-medium {
  display: none;
}

.didactic-workbench[data-level="university"] .level-university {
  display: block;
}

.footer {
  width: min(var(--simulation-max), calc(100% - 32px));
  margin: 0 auto var(--space-7);
  padding: var(--space-4) 0;
  color: var(--color-muted);
  border: 0;
  font-size: 0.74rem;
  text-align: center;
}

#targetSolarBox,
#angleBox {
  display: none;
}

@media (max-width: 1490px) {
  .sim-grid,
  .app,
  .layout {
    grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
  }

  .sim-results,
  .app > .result,
  .layout > aside:last-child,
  .layout > .right,
  .layout > .rightcol {
    position: static;
    grid-column: 1 / -1;
    max-height: none;
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .sim-results > h1,
  .sim-results > h2,
  .sim-results > .kicker,
  .app > .result > h1,
  .app > .result > .kicker,
  .layout > .right > h1,
  .layout > .rightcol > h1,
  .layout > .right > .kicker,
  .layout > .rightcol > .kicker {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .sim-header__inner,
  .topbar-inner,
  .topwrap {
    min-height: auto;
    align-items: flex-start;
    flex-direction: column;
    padding-block: var(--space-3);
  }

  .sim-header__actions,
  .nav-actions,
  .topbar-inner > div:last-child,
  .topwrap > div:last-child {
    width: 100%;
    justify-content: flex-start;
  }

  .sim-grid,
  .app,
  .layout {
    grid-template-columns: 1fr;
  }

  .sim-controls,
  .app > .side,
  .layout > aside:first-child,
  .layout > .left {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .sim-results,
  .app > .result,
  .layout > aside:last-child,
  .layout > .right,
  .layout > .rightcol {
    grid-column: auto;
  }

  .canvas-wrap {
    grid-template-rows: minmax(470px, 1fr) 280px;
  }

  .canvas-box,
  .canvasFrame,
  .simwrap,
  .stage .maincanvas,
  .main-stage .maincanvas,
  .canvas-box > canvas,
  .canvasFrame > canvas,
  .simwrap > canvas,
  canvas.maincanvas,
  canvas.simCanvas {
    min-height: 470px;
  }

  .didactic-head {
    flex-direction: column;
  }

  .pro-tools {
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  .sim-grid,
  .app,
  .layout,
  .sim-header__inner,
  .topbar-inner,
  .topwrap,
  .didactic-workbench,
  .footer {
    width: min(100% - 20px, var(--simulation-max));
  }

  .sim-results,
  .app > .result,
  .layout > aside:last-child,
  .layout > .right,
  .layout > .rightcol,
  .metrics,
  .readout-grid,
  .two,
  .dual,
  .triple,
  .pillrow,
  .minirow,
  .field-row,
  .graphrow,
  .zone-row,
  .pro-grid {
    grid-template-columns: 1fr;
  }

  .pro-card.wide {
    grid-column: auto;
  }

  .canvas-wrap {
    grid-template-rows: minmax(390px, 1fr) 250px;
  }

  .canvas-box,
  .canvasFrame,
  .simwrap,
  .stage .maincanvas,
  .main-stage .maincanvas,
  .canvas-box > canvas,
  .canvasFrame > canvas,
  .simwrap > canvas,
  canvas.maincanvas,
  canvas.simCanvas {
    min-height: 390px;
  }

  .tooltip,
  .overlay-hint {
    right: var(--space-3);
    bottom: var(--space-3);
    left: var(--space-3);
    max-width: none;
  }
}

@media print {
  body {
    color: #111;
    background: #fff;
  }

  body::before,
  .sim-header,
  .topbar,
  .sim-controls,
  .app > .side,
  .layout > aside:first-child,
  .layout > .left,
  .sim-header__actions,
  .nav-actions,
  .pro-tools,
  .btn {
    display: none !important;
  }

  .sim-grid,
  .app,
  .layout {
    width: 100%;
    display: block;
    margin: 0;
  }

  .sim-results,
  .app > .result,
  .layout > aside:last-child,
  .layout > .right,
  .layout > .rightcol {
    display: block;
    max-height: none;
  }

  .panel,
  .surface,
  .eq,
  .metric,
  .readout,
  .equation,
  .substitution,
  .notice,
  .pill,
  .didactic-workbench,
  .pro-card {
    color: #111;
    background: #fff;
    border-color: #bbb;
    box-shadow: none;
  }

  .level-medium,
  .level-university {
    display: block !important;
  }
}

/* Module-aware canvas composition. Most modules use one stage canvas; only
   blackbody and photoelectric intentionally stack a scene and a graph. */
.canvas-wrap {
  position: relative;
  display: block;
  min-height: 560px;
}

body[data-simulation="blackbody"] .canvas-wrap,
body[data-simulation="photoelectric"] .canvas-wrap {
  display: grid;
  grid-template-rows: minmax(540px, 1fr) 300px;
  gap: var(--space-4);
  min-height: 0;
}

body[data-simulation="blackholes"] .stage > .canvas-wrap,
body[data-simulation="bohr"] .stage > .canvas-wrap,
body[data-simulation="hawking"] .stage > .canvas-wrap,
body[data-simulation="relatividade-geral"] .canvas-wrap,
body[data-simulation="relatividade-restrita"] .canvas-wrap {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 18% 12%, rgba(53, 200, 230, 0.075), transparent 28rem),
    linear-gradient(180deg, rgba(4, 12, 22, 0.98), rgba(3, 9, 17, 0.99));
  box-shadow: var(--shadow-sm);
}

body[data-simulation="relatividade-geral"] .canvas-wrap,
body[data-simulation="relatividade-restrita"] .canvas-wrap {
  min-height: 460px;
}

body[data-simulation="relatividade-geral"] .canvas-wrap canvas,
body[data-simulation="relatividade-restrita"] .canvas-wrap canvas {
  min-height: 460px;
}

#customZBox {
  display: none;
}

.stack-top {
  margin-top: var(--space-4) !important;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.field-number-secondary {
  margin-top: var(--space-2);
}

.legend-cyan,
.legend-red,
.legend-yellow,
.legend-green,
.legend-violet,
.legend-black {
  background: currentColor;
}

.legend-cyan { color: var(--color-primary); }
.legend-red { color: var(--color-danger); }
.legend-yellow { color: var(--color-warning); }
.legend-green { color: var(--color-success); }
.legend-violet { color: var(--color-accent); }
.legend-black { color: #02050a; border: 1px solid var(--color-primary); }
.text-cyan { color: var(--color-primary); }
.text-warning { color: var(--color-warning); }

@media (max-width: 980px) {
  .canvas-wrap {
    min-height: 470px;
  }

  body[data-simulation="blackbody"] .canvas-wrap,
  body[data-simulation="photoelectric"] .canvas-wrap {
    grid-template-rows: minmax(470px, 1fr) 280px;
  }
}

@media (max-width: 700px) {
  .canvas-wrap {
    min-height: 390px;
  }

  body[data-simulation="blackbody"] .canvas-wrap,
  body[data-simulation="photoelectric"] .canvas-wrap {
    grid-template-rows: minmax(390px, 1fr) 250px;
  }
}

/* v20 enterprise layout: on ordinary desktop screens the calculation column
   becomes a full-width analysis deck instead of compressing the simulation. */
@media (max-width: 1899px) {
  .sim-grid,
  .app,
  .layout {
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
  }

  .sim-results,
  .app > .result,
  .layout > aside:last-child,
  .layout > .right,
  .layout > .rightcol {
    position: static;
    grid-column: 1 / -1;
    max-height: none;
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, rgba(14, 29, 48, .92), rgba(7, 18, 31, .96));
    box-shadow: var(--shadow-sm);
  }

  .sim-results > h1,
  .sim-results > h2,
  .sim-results > .kicker,
  .app > .result > h1,
  .app > .result > .kicker,
  .layout > .right > h1,
  .layout > .rightcol > h1,
  .layout > .right > .kicker,
  .layout > .rightcol > .kicker,
  .sim-results > .tabs,
  .app > .result > .tabs,
  .layout > .right > .tabs,
  .layout > .rightcol > .tabs {
    grid-column: 1 / -1;
  }

  .sim-results > * ,
  .app > .result > *,
  .layout > aside:last-child > *,
  .layout > .right > *,
  .layout > .rightcol > * {
    margin-top: 0 !important;
  }
}

/* Fixed visual stage geometry prevents zero-height and stale bitmap canvases. */
body[data-simulation]:not([data-simulation="blackbody"]):not([data-simulation="photoelectric"]) .canvas-wrap {
  height: clamp(520px, calc(100dvh - 150px), 780px);
  min-height: 520px;
}

body[data-simulation="blackbody"] .canvas-wrap,
body[data-simulation="photoelectric"] .canvas-wrap {
  grid-template-rows: clamp(460px, 58dvh, 650px) 300px;
}

body[data-simulation="blackbody"] .canvas-box,
body[data-simulation="photoelectric"] .canvas-box {
  min-height: 0;
  height: 100%;
}

body[data-simulation="blackbody"] .canvas-box > canvas,
body[data-simulation="photoelectric"] .canvas-box > canvas,
body[data-simulation]:not([data-simulation="blackbody"]):not([data-simulation="photoelectric"]) .canvas-wrap > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.sim-controls .panel-head,
.sim-results .panel-head {
  background: rgba(255,255,255,.012);
}

.sim-controls .panel-body {
  padding: var(--space-5);
}

.sim-controls .field {
  margin-block: var(--space-4);
}

.sim-controls,
.sim-workspace,
.sim-results {
  scrollbar-gutter: stable;
}

@media (max-width: 1180px) {
  .sim-results,
  .app > .result,
  .layout > aside:last-child,
  .layout > .right,
  .layout > .rightcol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  body[data-simulation]:not([data-simulation="blackbody"]):not([data-simulation="photoelectric"]) .canvas-wrap {
    height: clamp(440px, 66dvh, 650px);
    min-height: 440px;
  }
}

@media (max-width: 700px) {
  .sim-results,
  .app > .result,
  .layout > aside:last-child,
  .layout > .right,
  .layout > .rightcol {
    grid-template-columns: 1fr;
    padding: var(--space-3);
  }

  body[data-simulation]:not([data-simulation="blackbody"]):not([data-simulation="photoelectric"]) .canvas-wrap {
    height: 430px;
    min-height: 430px;
  }

  body[data-simulation="blackbody"] .canvas-wrap,
  body[data-simulation="photoelectric"] .canvas-wrap {
    grid-template-rows: 430px 260px;
  }
}

/* Final cascade guards: these rules intentionally come after the desktop
   analysis-deck breakpoint so tablet/mobile and print cannot be overridden. */
@media (max-width: 980px) {
  .sim-grid,
  .app,
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sim-results,
  .app > .result,
  .layout > aside:last-child,
  .layout > .right,
  .layout > .rightcol {
    grid-column: auto;
  }
}

@media print {
  .sim-results,
  .app > .result,
  .layout > aside:last-child,
  .layout > .right,
  .layout > .rightcol {
    display: block;
    padding: 0;
    border: 0;
    background: #fff;
  }

  .sim-results > *,
  .app > .result > *,
  .layout > aside:last-child > *,
  .layout > .right > *,
  .layout > .rightcol > * {
    margin-top: 1rem !important;
    break-inside: avoid;
  }
}

/* ========================================================================== 
   v21 — organização espacial e prevenção de sobreposição
   A interface passa a usar duas colunas funcionais: controles + experimento.
   Resultados ficam alinhados abaixo da área de simulação, preservando largura
   útil para os canvases e eliminando a compressão que causava colisões.
   ========================================================================== */

:root {
  --simulation-column-gap: clamp(18px, 1.6vw, 28px);
  --simulation-panel-gap: clamp(16px, 1.25vw, 22px);
  --simulation-control-width: clamp(300px, 21vw, 336px);
  --stage-info-top: 66px;
  --stage-info-bottom: 124px;
}

/* Estrutura principal: duas colunas previsíveis em desktops. */
body[data-simulation] .sim-grid,
body[data-simulation] .app,
body[data-simulation] .layout {
  grid-template-columns: var(--simulation-control-width) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: var(--simulation-column-gap);
  align-items: start;
}

body[data-simulation] .sim-controls,
body[data-simulation] .app > .side,
body[data-simulation] .layout > aside:first-child,
body[data-simulation] .layout > .left {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: static;
  max-height: none;
  overflow: visible;
}

body[data-simulation] .sim-workspace,
body[data-simulation] .app > .main,
body[data-simulation] .layout > .stage,
body[data-simulation] .layout > .main-stage,
body[data-simulation] .layout > section:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

body[data-simulation] .sim-results,
body[data-simulation] .app > .result,
body[data-simulation] .layout > aside:last-child,
body[data-simulation] .layout > .right,
body[data-simulation] .layout > .rightcol {
  grid-column: 2;
  grid-row: 2;
  position: static;
  max-height: none;
  overflow: visible;
}

/* Decks compostos por vários cartões. */
body[data-simulation] .sim-results.result,
body[data-simulation] .sim-results.rightcol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--simulation-panel-gap);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(14, 29, 48, 0.92), rgba(7, 18, 31, 0.96));
  box-shadow: var(--shadow-sm);
}

body[data-simulation] .sim-results.result > .kicker,
body[data-simulation] .sim-results.result > h1,
body[data-simulation] .sim-results.result > h2,
body[data-simulation] .sim-results.result > .metrics,
body[data-simulation] .sim-results.result > .tabs {
  grid-column: 1 / -1;
}

/* Módulos em que a própria coluna de resultados já é um painel. */
body[data-simulation] .sim-results.right {
  display: block;
  padding: 0;
}

/* Ritmo vertical consistente dentro de todos os cartões. */
body[data-simulation] .panel-head,
body[data-simulation] .stage-head {
  padding: clamp(18px, 1.5vw, 24px);
}

body[data-simulation] .panel-body {
  display: grid;
  gap: var(--simulation-panel-gap);
  padding: clamp(18px, 1.5vw, 24px);
}

body[data-simulation] .panel-body > *,
body[data-simulation] .sim-results > *,
body[data-simulation] .sim-controls > * {
  min-width: 0;
}

body[data-simulation] .panel-body > *,
body[data-simulation] .panel-body .field,
body[data-simulation] .panel-body .stack-top {
  margin-block: 0 !important;
}

/* Painéis legados sem .panel-body recebem o mesmo espaçamento interno. */
body[data-simulation] .sim-controls.side > .panel {
  display: grid;
  gap: var(--space-4);
  padding: clamp(18px, 1.5vw, 24px);
}

body[data-simulation] .sim-controls.side > .panel > * {
  margin: 0;
}

body[data-simulation] .sim-controls.side > .panel > h3:first-child {
  margin-bottom: var(--space-1);
}

body[data-simulation] .sim-controls.side > h1 {
  margin-top: 0;
  font-size: clamp(1.65rem, 2vw, 2.25rem);
}

body[data-simulation] .sim-controls.side > p {
  margin-bottom: 0;
}

/* Controles: o campo numérico não disputa metade da largura com o slider. */
body[data-simulation] .field-row {
  grid-template-columns: minmax(0, 1fr) minmax(98px, 122px);
  align-items: center;
  gap: var(--space-3);
}

body[data-simulation] .field {
  gap: 10px;
}

body[data-simulation] .field label {
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 4px;
}

body[data-simulation] .field label > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

body[data-simulation] .field label > span:last-child,
body[data-simulation] .field .value {
  margin-left: auto;
}

body[data-simulation] .segmented,
body[data-simulation] .modebox,
body[data-simulation] .scenario {
  gap: 10px;
  padding: 8px;
}

body[data-simulation] .segmented button,
body[data-simulation] .modebox button,
body[data-simulation] .scenario .btn {
  min-height: 44px;
  padding: 11px 13px;
  white-space: normal;
  line-height: 1.35;
}

/* Resultados e equações com respiro suficiente. */
body[data-simulation] .metrics,
body[data-simulation] .readout-grid,
body[data-simulation] .two,
body[data-simulation] .dual,
body[data-simulation] .pillrow,
body[data-simulation] .minirow,
body[data-simulation] .triple {
  gap: var(--space-4);
}

body[data-simulation] .metric,
body[data-simulation] .readout,
body[data-simulation] .pill {
  padding: clamp(15px, 1.2vw, 20px);
}

body[data-simulation] .eq,
body[data-simulation] .equation,
body[data-simulation] .substitution,
body[data-simulation] .notice,
body[data-simulation] .read,
body[data-simulation] .hero-card {
  padding: clamp(18px, 1.5vw, 24px);
}

body[data-simulation] .eq p:last-child,
body[data-simulation] .notice p:last-child,
body[data-simulation] .read p:last-child,
body[data-simulation] .hero-card p:last-child {
  margin-bottom: 0;
}

body[data-simulation] .math,
body[data-simulation] .sub,
body[data-simulation] .eq-sub,
body[data-simulation] .substitution {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Palco principal: reserva áreas próprias para badges e explicações. */
body[data-simulation="bohr"] .canvas-wrap,
body[data-simulation="blackholes"] .canvas-wrap,
body[data-simulation="hawking"] .canvas-wrap {
  height: clamp(650px, calc(100dvh - 128px), 820px);
  min-height: 650px;
}

body[data-simulation="bohr"] .canvas-wrap > canvas,
body[data-simulation="blackholes"] .canvas-wrap > canvas,
body[data-simulation="hawking"] .canvas-wrap > canvas {
  inset: var(--stage-info-top) 0 var(--stage-info-bottom) 0;
  width: 100%;
  height: auto;
  min-height: 0;
}

body[data-simulation="bohr"] .overlay-badges,
body[data-simulation="blackholes"] .overlay-badges,
body[data-simulation="hawking"] .overlay-badges {
  top: 14px;
  right: 16px;
  left: 16px;
  max-width: none;
  min-height: 40px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-simulation="bohr"] .tooltip,
body[data-simulation="blackholes"] .tooltip,
body[data-simulation="hawking"] .tooltip {
  right: 16px;
  bottom: 14px;
  left: 16px;
  max-width: none;
  min-height: 92px;
  display: flex;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  line-height: 1.55;
}

/* Relatividade: os selos ficam em uma faixa própria acima do desenho. */
body[data-simulation="relatividade-geral"] .canvas-wrap,
body[data-simulation="relatividade-restrita"] .canvas-wrap {
  height: clamp(460px, 52dvh, 590px);
  min-height: 460px;
}

body[data-simulation="relatividade-geral"] .canvas-wrap > canvas,
body[data-simulation="relatividade-restrita"] .canvas-wrap > canvas {
  inset: 58px 0 0 0;
  width: 100%;
  height: auto;
  min-height: 0;
}

body[data-simulation="relatividade-geral"] .canvas-wrap > .overlay,
body[data-simulation="relatividade-restrita"] .canvas-wrap > .overlay {
  top: 12px;
  right: 14px;
  left: 14px;
  max-width: none;
  min-height: 38px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/* Fotoelétrico e corpo negro: o aviso superior não cobre a animação. */
body[data-simulation="photoelectric"] .canvas-box:first-child > canvas,
body[data-simulation="blackbody"] .canvas-box:first-child > canvas {
  inset: 54px 0 0 0;
  width: 100%;
  height: auto;
  min-height: 0;
}

body[data-simulation="photoelectric"] .canvas-box:first-child > .overlay,
body[data-simulation="blackbody"] .canvas-box:first-child > .overlay {
  top: 12px;
  right: 14px;
  left: 14px;
  max-width: none;
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  white-space: normal;
}

/* Fourier: instrução e status ocupam regiões distintas do canvas térmico. */
body[data-simulation="fourier"] .stage-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: start;
}

body[data-simulation="fourier"] .stage-head .statusbar {
  position: static;
  max-width: 420px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-simulation="fourier"] .canvasFrame {
  height: clamp(590px, 64dvh, 720px);
  min-height: 590px;
}

body[data-simulation="fourier"] .canvasFrame > canvas {
  position: absolute;
  inset: 0 0 112px 0;
  width: 100%;
  height: auto;
  min-height: 0;
}

body[data-simulation="fourier"] .canvasFrame > .overlay-hint {
  right: 16px;
  bottom: 14px;
  left: 16px;
  max-width: none;
  min-height: 82px;
  display: flex;
  align-items: center;
}

body[data-simulation="fourier"] .graphrow {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

body[data-simulation="fourier"] .graphbox {
  min-width: 0;
  min-height: 330px;
  display: grid;
  grid-template-rows: auto minmax(250px, 1fr);
}

body[data-simulation="fourier"] .graphbox canvas {
  min-height: 250px;
}

/* Cabeçalho sem corte de botões. */
body[data-simulation] .sim-header__inner,
body[data-simulation] .topbar-inner,
body[data-simulation] .topwrap {
  padding-block: 10px;
}

body[data-simulation] .sim-header .brand,
body[data-simulation] .topbar .brand {
  flex: 1 1 260px;
}

body[data-simulation] .sim-header__actions,
body[data-simulation] .nav-actions,
body[data-simulation] .topbar-inner > div:last-child,
body[data-simulation] .topwrap > div:last-child {
  flex: 0 1 auto;
  min-width: 0;
}

body[data-simulation] .sim-header__actions > *,
body[data-simulation] .nav-actions > * {
  white-space: nowrap;
}

/* Breakpoints: o conteúdo nunca é espremido para manter colunas artificiais. */
@media (max-width: 1280px) {
  body[data-simulation] .sim-results.result,
  body[data-simulation] .sim-results.rightcol {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-simulation] .sim-results.result > * {
    grid-column: auto;
  }

  body[data-simulation] .sim-results.result > .kicker,
  body[data-simulation] .sim-results.result > h1,
  body[data-simulation] .sim-results.result > h2,
  body[data-simulation] .sim-results.result > .metrics,
  body[data-simulation] .sim-results.result > .tabs {
    grid-column: 1;
  }

  body[data-simulation="fourier"] .stage-head {
    grid-template-columns: 1fr;
  }

  body[data-simulation="fourier"] .stage-head .statusbar {
    justify-content: flex-start;
    max-width: none;
  }
}

@media (max-width: 980px) {
  :root {
    --stage-info-top: 62px;
    --stage-info-bottom: 138px;
  }

  body[data-simulation] .sim-grid,
  body[data-simulation] .app,
  body[data-simulation] .layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  body[data-simulation] .sim-controls,
  body[data-simulation] .sim-workspace,
  body[data-simulation] .sim-results,
  body[data-simulation] .app > .side,
  body[data-simulation] .app > .main,
  body[data-simulation] .app > .result,
  body[data-simulation] .layout > aside:first-child,
  body[data-simulation] .layout > section:nth-child(2),
  body[data-simulation] .layout > aside:last-child,
  body[data-simulation] .layout > .left,
  body[data-simulation] .layout > .stage,
  body[data-simulation] .layout > .main-stage,
  body[data-simulation] .layout > .right,
  body[data-simulation] .layout > .rightcol {
    grid-column: 1;
    grid-row: auto;
  }

  body[data-simulation] .sim-header__inner,
  body[data-simulation] .topbar-inner,
  body[data-simulation] .topwrap {
    flex-direction: column;
    align-items: stretch;
  }

  body[data-simulation] .sim-header__actions,
  body[data-simulation] .nav-actions,
  body[data-simulation] .topbar-inner > div:last-child,
  body[data-simulation] .topwrap > div:last-child {
    width: 100%;
    justify-content: flex-start;
  }

  body[data-simulation="bohr"] .canvas-wrap,
  body[data-simulation="blackholes"] .canvas-wrap,
  body[data-simulation="hawking"] .canvas-wrap {
    height: 680px;
    min-height: 680px;
  }

  body[data-simulation="fourier"] .graphrow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  :root {
    --stage-info-top: 78px;
    --stage-info-bottom: 164px;
  }

  body[data-simulation] .sim-results.result,
  body[data-simulation] .sim-results.rightcol {
    padding: var(--space-3);
  }

  body[data-simulation] .field-row,
  body[data-simulation] .two,
  body[data-simulation] .dual,
  body[data-simulation] .triple,
  body[data-simulation] .metrics,
  body[data-simulation] .readout-grid,
  body[data-simulation] .pillrow,
  body[data-simulation] .minirow {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-simulation] .field-row input[type="number"] {
    width: 100%;
  }

  body[data-simulation="bohr"] .canvas-wrap,
  body[data-simulation="blackholes"] .canvas-wrap,
  body[data-simulation="hawking"] .canvas-wrap {
    height: 660px;
    min-height: 660px;
  }

  body[data-simulation="bohr"] .tooltip,
  body[data-simulation="blackholes"] .tooltip,
  body[data-simulation="hawking"] .tooltip {
    min-height: 124px;
    padding: 14px;
    font-size: 0.78rem;
  }

  body[data-simulation="relatividade-geral"] .canvas-wrap,
  body[data-simulation="relatividade-restrita"] .canvas-wrap {
    height: 500px;
    min-height: 500px;
  }

  body[data-simulation="fourier"] .canvasFrame {
    height: 650px;
    min-height: 650px;
  }
}

/* Avisos compostos por texto + selo devem quebrar linha, nunca flutuar sobre o texto. */
body[data-simulation] .notice > .goodline,
body[data-simulation] .notice > .warnline,
body[data-simulation] .notice > .dangerline,
body[data-simulation] .notice .goodline,
body[data-simulation] .notice .warnline,
body[data-simulation] .notice .dangerline {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
}

/* O texto explicativo inferior é um bloco editorial, não uma linha flexível. */
body[data-simulation="bohr"] .tooltip,
body[data-simulation="blackholes"] .tooltip,
body[data-simulation="hawking"] .tooltip {
  display: block;
}

body[data-simulation] .tooltip > .goodline,
body[data-simulation] .tooltip > .warnline,
body[data-simulation] .tooltip > .dangerline,
body[data-simulation] .tooltip .goodline,
body[data-simulation] .tooltip .warnline,
body[data-simulation] .tooltip .dangerline {
  display: block;
  width: 100%;
  margin-top: 8px;
}

/* Tablets horizontais e notebooks estreitos recebem fluxo vertical antes que
   a simulação seja comprimida a ponto de sobrepor rótulos científicos. */
@media (max-width: 1120px) {
  body[data-simulation] .sim-grid,
  body[data-simulation] .app,
  body[data-simulation] .layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  body[data-simulation] .sim-controls,
  body[data-simulation] .sim-workspace,
  body[data-simulation] .sim-results,
  body[data-simulation] .app > .side,
  body[data-simulation] .app > .main,
  body[data-simulation] .app > .result,
  body[data-simulation] .layout > aside:first-child,
  body[data-simulation] .layout > section:nth-child(2),
  body[data-simulation] .layout > aside:last-child,
  body[data-simulation] .layout > .left,
  body[data-simulation] .layout > .stage,
  body[data-simulation] .layout > .main-stage,
  body[data-simulation] .layout > .right,
  body[data-simulation] .layout > .rightcol {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 980px) {
  body[data-simulation] .sim-header .brand,
  body[data-simulation] .topbar .brand {
    flex: 0 0 auto;
    width: 100%;
  }

  body[data-simulation] .sim-header__actions,
  body[data-simulation] .nav-actions {
    flex: 0 0 auto;
  }
}

@media (max-width: 700px) {
  body[data-simulation="bohr"].simulation-page .sim-workspace .canvas-wrap,
  body[data-simulation="blackholes"].simulation-page .sim-workspace .canvas-wrap,
  body[data-simulation="hawking"].simulation-page .sim-workspace .canvas-wrap {
    height: 660px;
    min-height: 660px;
  }
}

/* Safe-zone cascade guards. The original canvas rules use highly specific
   module exclusions; these final declarations intentionally win that cascade. */
body[data-simulation="bohr"].simulation-page .sim-workspace .canvas-wrap > canvas,
body[data-simulation="blackholes"].simulation-page .sim-workspace .canvas-wrap > canvas,
body[data-simulation="hawking"].simulation-page .sim-workspace .canvas-wrap > canvas {
  inset: var(--stage-info-top) 0 var(--stage-info-bottom) 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

body[data-simulation="relatividade-geral"].simulation-page .sim-workspace .canvas-wrap > canvas,
body[data-simulation="relatividade-restrita"].simulation-page .sim-workspace .canvas-wrap > canvas {
  inset: 58px 0 0 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

body[data-simulation="fourier"].simulation-page .sim-workspace .canvasFrame > canvas {
  inset: 0 0 112px 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

body[data-simulation="bohr"].simulation-page .sim-workspace .canvas-wrap > canvas,
body[data-simulation="blackholes"].simulation-page .sim-workspace .canvas-wrap > canvas,
body[data-simulation="hawking"].simulation-page .sim-workspace .canvas-wrap > canvas {
  height: calc(100% - var(--stage-info-top) - var(--stage-info-bottom)) !important;
}

body[data-simulation="relatividade-geral"].simulation-page .sim-workspace .canvas-wrap > canvas,
body[data-simulation="relatividade-restrita"].simulation-page .sim-workspace .canvas-wrap > canvas {
  height: calc(100% - 58px) !important;
}

body[data-simulation="fourier"].simulation-page .sim-workspace .canvasFrame > canvas {
  height: calc(100% - 112px) !important;
}

/* A faixa de badges relativísticos pode quebrar em duas linhas. */
body[data-simulation="relatividade-geral"].simulation-page .sim-workspace .canvas-wrap > canvas,
body[data-simulation="relatividade-restrita"].simulation-page .sim-workspace .canvas-wrap > canvas {
  inset: 76px 0 0 0 !important;
  height: calc(100% - 76px) !important;
}

@media (max-width: 700px) {
  :root {
    --stage-info-top: 104px;
  }
}

/* ========================================================================== 
   v22 — refinamento tipográfico, respiro entre quadros e anti-colisão textual
   Aplicado a partir dos prints: títulos muito grandes, badges colidindo,
   resultados espremidos e caixas com pouco respiro visual.
   ========================================================================== */

:root {
  --simulation-column-gap: clamp(24px, 2vw, 34px);
  --simulation-panel-gap: clamp(18px, 1.4vw, 26px);
  --simulation-control-width: clamp(320px, 23vw, 360px);
  --stage-info-top: 74px;
  --stage-info-bottom: 150px;
}

body[data-simulation] .sim-grid,
body[data-simulation] .app,
body[data-simulation] .layout {
  width: min(var(--simulation-max), calc(100% - 40px));
  gap: var(--simulation-column-gap);
}

body[data-simulation] .sim-workspace,
body[data-simulation] .app > .main,
body[data-simulation] .layout > .stage,
body[data-simulation] .layout > .main-stage,
body[data-simulation] .layout > section:nth-child(2) {
  gap: var(--simulation-panel-gap);
}

body[data-simulation] .sim-controls,
body[data-simulation] .sim-results,
body[data-simulation] .app > .side,
body[data-simulation] .app > .result,
body[data-simulation] .layout > .left,
body[data-simulation] .layout > .right,
body[data-simulation] .layout > .rightcol {
  min-width: 0;
}

body[data-simulation] .sim-controls.side > h1,
body[data-simulation] .app > .side > h1,
body[data-simulation] .sim-results.result > h1,
body[data-simulation] .app > .result > h1 {
  font-size: clamp(1.55rem, 1.8vw, 2.05rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: 12ch;
  text-wrap: balance;
}

body[data-simulation] .sim-controls.side > p,
body[data-simulation] .app > .side > p,
body[data-simulation] .sim-results.result > p,
body[data-simulation] .app > .result > p,
body[data-simulation] .panel-head p,
body[data-simulation] .stage-head p,
body[data-simulation] .read p,
body[data-simulation] .eq p,
body[data-simulation] .notice p {
  max-width: 70ch;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

body[data-simulation] .panel-head h2,
body[data-simulation] .stage-head h2,
body[data-simulation] .stage-title h2,
body[data-simulation] .sim-results .panel-head h2,
body[data-simulation] .sim-controls .panel-head h2 {
  font-size: clamp(1.12rem, 1.5vw, 1.42rem);
  line-height: 1.16;
  text-wrap: balance;
}

body[data-simulation] .panel-head,
body[data-simulation] .stage-head {
  padding: clamp(20px, 1.5vw, 26px);
}

body[data-simulation] .panel-body,
body[data-simulation] .eq,
body[data-simulation] .equation,
body[data-simulation] .substitution,
body[data-simulation] .notice,
body[data-simulation] .read,
body[data-simulation] .hero-card,
body[data-simulation] .pro-card {
  padding: clamp(20px, 1.5vw, 26px);
}

body[data-simulation] .eq,
body[data-simulation] .equation,
body[data-simulation] .substitution,
body[data-simulation] .notice,
body[data-simulation] .read,
body[data-simulation] .hero-card {
  display: grid;
  gap: 12px;
}

body[data-simulation] .eq h3,
body[data-simulation] .equation .title,
body[data-simulation] .read h3,
body[data-simulation] .notice h3 {
  margin: 0;
}

body[data-simulation] .field {
  gap: 12px;
  margin-block: var(--space-4);
}

body[data-simulation] .field label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 14px;
}

body[data-simulation] .field label > span:first-child,
body[data-simulation] .field label > :first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

body[data-simulation] .field label > span:last-child,
body[data-simulation] .field .value {
  justify-self: end;
  text-align: right;
  white-space: normal;
}

body[data-simulation] .field small,
body[data-simulation] small {
  line-height: 1.58;
}

body[data-simulation] .field-row {
  grid-template-columns: minmax(0, 1fr) minmax(104px, 128px);
  gap: 12px;
  align-items: center;
}

body[data-simulation] .segmented,
body[data-simulation] .modebox,
body[data-simulation] .scenario,
body[data-simulation] .tabs {
  gap: 10px;
}

body[data-simulation] .segmented button,
body[data-simulation] .modebox button,
body[data-simulation] .scenario .btn,
body[data-simulation] .tab {
  min-height: 44px;
  white-space: normal;
  line-height: 1.28;
}

body[data-simulation] .metrics,
body[data-simulation] .readout-grid,
body[data-simulation] .two,
body[data-simulation] .dual,
body[data-simulation] .minirow,
body[data-simulation] .pillrow,
body[data-simulation] .triple,
body[data-simulation] .graphrow {
  gap: var(--space-4);
}

body[data-simulation] .metric,
body[data-simulation] .readout,
body[data-simulation] .pill {
  padding: clamp(16px, 1.15vw, 20px);
}

body[data-simulation] .metric strong,
body[data-simulation] .readout .v,
body[data-simulation] .pill strong {
  font-size: clamp(0.94rem, 1vw, 1.04rem);
  line-height: 1.42;
  overflow-wrap: anywhere;
}

body[data-simulation] .metric span,
body[data-simulation] .readout .k,
body[data-simulation] .pill span {
  line-height: 1.4;
}

body[data-simulation] .math,
body[data-simulation] .sub,
body[data-simulation] .eq-sub,
body[data-simulation] .substitution {
  font-size: 0.82rem;
  line-height: 1.75;
}

body[data-simulation] .overlay,
body[data-simulation] .overlay-badges,
body[data-simulation] .statusbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

body[data-simulation] .overlay .pill,
body[data-simulation] .overlay-badges .badge,
body[data-simulation] .statusbar .pill,
body[data-simulation] .overlay,
body[data-simulation] .overlay-badges {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

body[data-simulation="relatividade-geral"] .overlay,
body[data-simulation="relatividade-restrita"] .overlay,
body[data-simulation="photoelectric"] #overlayText,
body[data-simulation="blackbody"] .canvas-box:first-child > .overlay {
  align-items: center;
}

body[data-simulation="photoelectric"] .app > .result,
body[data-simulation="blackbody"] .app > .result {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--simulation-panel-gap);
  padding: clamp(20px, 1.5vw, 26px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(14, 29, 48, 0.92), rgba(7, 18, 31, 0.96));
  box-shadow: var(--shadow-sm);
}

body[data-simulation="photoelectric"] .app > .result > .kicker,
body[data-simulation="photoelectric"] .app > .result > h1,
body[data-simulation="photoelectric"] .app > .result > h2,
body[data-simulation="photoelectric"] .app > .result > .metrics,
body[data-simulation="blackbody"] .app > .result > .kicker,
body[data-simulation="blackbody"] .app > .result > h1,
body[data-simulation="blackbody"] .app > .result > h2,
body[data-simulation="blackbody"] .app > .result > .metrics {
  grid-column: 1 / -1;
}

body[data-simulation="photoelectric"] .canvas-wrap,
body[data-simulation="blackbody"] .canvas-wrap {
  gap: var(--simulation-panel-gap);
}

body[data-simulation="photoelectric"] .canvas-box,
body[data-simulation="blackbody"] .canvas-box,
body[data-simulation="bohr"] .canvas-wrap,
body[data-simulation="blackholes"] .canvas-wrap,
body[data-simulation="hawking"] .canvas-wrap,
body[data-simulation="relatividade-geral"] .canvas-wrap,
body[data-simulation="relatividade-restrita"] .canvas-wrap {
  border-radius: calc(var(--radius-lg) + 2px);
}

body[data-simulation="bohr"] .tooltip,
body[data-simulation="blackholes"] .tooltip,
body[data-simulation="hawking"] .tooltip,
body[data-simulation="fourier"] .overlay-hint {
  padding: 16px 18px;
  line-height: 1.62;
}

body[data-simulation="fourier"] .stage-head {
  align-items: start;
}

body[data-simulation="fourier"] .stage-head .statusbar {
  max-width: 520px;
  justify-content: flex-end;
}

body[data-simulation="fourier"] .graphbox {
  min-height: 340px;
}

@media (max-width: 1600px) {
  body[data-simulation] .sim-grid,
  body[data-simulation] .app,
  body[data-simulation] .layout {
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  }

  body[data-simulation="photoelectric"] .app > .result,
  body[data-simulation="blackbody"] .app > .result {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1280px) {
  :root {
    --stage-info-top: 78px;
    --stage-info-bottom: 160px;
  }

  body[data-simulation] .sim-grid,
  body[data-simulation] .app,
  body[data-simulation] .layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  body[data-simulation] .sim-controls,
  body[data-simulation] .sim-workspace,
  body[data-simulation] .sim-results,
  body[data-simulation] .app > .side,
  body[data-simulation] .app > .main,
  body[data-simulation] .app > .result,
  body[data-simulation] .layout > aside:first-child,
  body[data-simulation] .layout > section:nth-child(2),
  body[data-simulation] .layout > aside:last-child,
  body[data-simulation] .layout > .left,
  body[data-simulation] .layout > .stage,
  body[data-simulation] .layout > .main-stage,
  body[data-simulation] .layout > .right,
  body[data-simulation] .layout > .rightcol {
    grid-column: 1;
    grid-row: auto;
  }

  body[data-simulation] .sim-results.result,
  body[data-simulation] .sim-results.rightcol,
  body[data-simulation="photoelectric"] .app > .result,
  body[data-simulation="blackbody"] .app > .result {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-simulation="fourier"] .stage-head {
    grid-template-columns: 1fr;
  }

  body[data-simulation="fourier"] .stage-head .statusbar {
    justify-content: flex-start;
    max-width: none;
  }
}

@media (max-width: 700px) {
  body[data-simulation] .sim-grid,
  body[data-simulation] .app,
  body[data-simulation] .layout,
  body[data-simulation] .sim-header__inner,
  body[data-simulation] .topbar-inner,
  body[data-simulation] .topwrap {
    width: min(100% - 20px, var(--simulation-max));
  }

  body[data-simulation] .sim-controls.side > h1,
  body[data-simulation] .app > .side > h1,
  body[data-simulation] .sim-results.result > h1,
  body[data-simulation] .app > .result > h1 {
    max-width: none;
    font-size: clamp(1.5rem, 6vw, 1.9rem);
  }

  body[data-simulation] .field label {
    grid-template-columns: 1fr;
  }

  body[data-simulation] .field label > span:last-child,
  body[data-simulation] .field .value {
    justify-self: start;
    text-align: left;
  }
}


/* ========================================================================== 
   v23 premium visual — foco extra em Relatividade Geral
   ========================================================================== */
body[data-simulation="relatividade-geral"] .main-stage { gap: clamp(20px, 1.6vw, 28px); }
body[data-simulation="relatividade-geral"] .main-stage > .panel.hero-card {
  padding: clamp(18px, 1.4vw, 24px);
  background:
    radial-gradient(circle at 15% 0%, rgba(32,212,243,0.12), transparent 26%),
    radial-gradient(circle at 100% 0%, rgba(124,92,255,0.11), transparent 24%),
    linear-gradient(180deg, rgba(13, 28, 47, 0.96), rgba(6, 15, 28, 0.98));
  box-shadow: 0 18px 48px rgba(0,0,0,0.28);
}
body[data-simulation="relatividade-geral"] .main-stage > .panel.hero-card .canvas-wrap {
  height: clamp(520px, 58dvh, 700px);
  min-height: 520px;
  border-radius: calc(var(--radius-lg) + 4px);
  border-color: rgba(77, 111, 162, 0.34);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 16px 40px rgba(0,0,0,0.28);
}
body[data-simulation="relatividade-geral"] .main-stage > .panel.hero-card:nth-child(2) .canvas-wrap {
  height: clamp(320px, 34dvh, 420px);
  min-height: 320px;
}
body[data-simulation="relatividade-geral"] .main-stage > .panel.hero-card .read { padding: 18px 0 0; background: transparent; border: 0; }
body[data-simulation="relatividade-geral"] .overlay { gap: 10px; }
body[data-simulation="relatividade-geral"] .overlay .pill { background: rgba(5, 14, 25, 0.74); border-color: rgba(83, 115, 164, 0.34); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
body[data-simulation="relatividade-geral"] .sim-results.panel { background: radial-gradient(circle at 100% 0%, rgba(124,92,255,0.10), transparent 28%), linear-gradient(180deg, rgba(18,34,55,0.95), rgba(10,23,39,0.98)); }
body[data-simulation="relatividade-geral"] .panel-head .kicker { margin-bottom: 10px; }
body[data-simulation="relatividade-geral"] .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-simulation="relatividade-geral"] .metric { min-height: 120px; }
@media (max-width: 900px) {
  body[data-simulation="relatividade-geral"] .metrics { grid-template-columns: 1fr; }
  body[data-simulation="relatividade-geral"] .main-stage > .panel.hero-card .canvas-wrap { height: 500px; min-height: 500px; }
  body[data-simulation="relatividade-geral"] .main-stage > .panel.hero-card:nth-child(2) .canvas-wrap { height: 320px; min-height: 320px; }
}


/* ========================================================================== 
   v24 premium completa — polimento visual global e padronização final
   ========================================================================== */
:root {
  --premium-panel-bg:
    radial-gradient(circle at 0% 0%, rgba(32, 212, 243, 0.10), transparent 32%),
    radial-gradient(circle at 100% 0%, rgba(124, 92, 255, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(14, 28, 47, 0.96), rgba(7, 18, 31, 0.985));
  --premium-card-bg: rgba(6, 16, 29, 0.78);
  --premium-card-border: rgba(83, 115, 164, 0.28);
}

body[data-simulation] .sim-grid,
body[data-simulation] .app,
body[data-simulation] .layout {
  gap: clamp(22px, 1.7vw, 30px);
}

body[data-simulation] .sim-controls,
body[data-simulation] .sim-results,
body[data-simulation] .app > .side,
body[data-simulation] .app > .result,
body[data-simulation] .layout > aside:first-child,
body[data-simulation] .layout > aside:last-child,
body[data-simulation] .layout > .left,
body[data-simulation] .layout > .right,
body[data-simulation] .layout > .rightcol {
  scrollbar-gutter: stable both-edges;
}

body[data-simulation] .sim-controls > * + *,
body[data-simulation] .sim-results > * + *,
body[data-simulation] .app > .side > * + *,
body[data-simulation] .app > .result > * + *,
body[data-simulation] .layout > aside > * + *,
body[data-simulation] .layout > .left > * + *,
body[data-simulation] .layout > .right > * + *,
body[data-simulation] .layout > .rightcol > * + * {
  margin-top: clamp(14px, 1.1vw, 20px);
}

body[data-simulation] .sim-controls > h1,
body[data-simulation] .sim-results > h1,
body[data-simulation] .app > .side > h1,
body[data-simulation] .app > .result > h1,
body[data-simulation] .layout > .left > h1,
body[data-simulation] .layout > .right > h1,
body[data-simulation] .layout > .rightcol > h1 {
  margin: 8px 0 0;
  font-size: clamp(2rem, 3vw, 3.35rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  max-width: 10ch;
  text-wrap: balance;
}

body[data-simulation] .sim-controls > p,
body[data-simulation] .sim-results > p,
body[data-simulation] .app > .side > p,
body[data-simulation] .app > .result > p,
body[data-simulation] .layout > .left > p,
body[data-simulation] .layout > .right > p,
body[data-simulation] .layout > .rightcol > p {
  max-width: 56ch;
  color: var(--color-text-soft);
  line-height: 1.72;
  text-wrap: pretty;
}

body[data-simulation] .panel,
body[data-simulation] .surface,
body[data-simulation] .eq,
body[data-simulation] .equation,
body[data-simulation] .substitution,
body[data-simulation] .notice,
body[data-simulation] .read,
body[data-simulation] .hero-card,
body[data-simulation] .metric,
body[data-simulation] .readout,
body[data-simulation] .pill,
body[data-simulation] .canvas-box,
body[data-simulation] .canvasFrame,
body[data-simulation] .simwrap,
body[data-simulation] .graphbox,
body[data-simulation] .maincanvas {
  border-color: var(--premium-card-border);
}

body[data-simulation] .panel-head,
body[data-simulation] .stage-head {
  background: rgba(255,255,255,0.022);
}

body[data-simulation] .panel-head h2,
body[data-simulation] .stage-head h2,
body[data-simulation] .stage-title h2 {
  line-height: 1.18;
  text-wrap: balance;
}

body[data-simulation] .eq,
body[data-simulation] .equation,
body[data-simulation] .substitution,
body[data-simulation] .notice,
body[data-simulation] .read,
body[data-simulation] .hero-card {
  background: var(--premium-card-bg);
  box-shadow: 0 14px 38px rgba(0,0,0,0.18);
}

body[data-simulation] .metric,
body[data-simulation] .readout,
body[data-simulation] .pill {
  min-height: 116px;
  border: 1px solid var(--premium-card-border);
  border-radius: var(--radius-md);
  background: rgba(4, 13, 24, 0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

body[data-simulation] .metric span,
body[data-simulation] .metric small,
body[data-simulation] .readout .k,
body[data-simulation] .readout .s,
body[data-simulation] .eq p,
body[data-simulation] .notice p,
body[data-simulation] .read p,
body[data-simulation] .hero-card p,
body[data-simulation] .math,
body[data-simulation] .substitution,
body[data-simulation] .copy,
body[data-simulation] label,
body[data-simulation] small {
  overflow-wrap: anywhere;
}

body[data-simulation] .metric strong,
body[data-simulation] .readout .v,
body[data-simulation] .pill strong,
body[data-simulation] .math,
body[data-simulation] code {
  text-shadow: 0 0 0 transparent;
}

body[data-simulation] .canvas-wrap {
  gap: clamp(18px, 1.35vw, 24px);
  grid-template-rows: minmax(560px, 1fr) minmax(290px, 340px);
}

body[data-simulation] .canvas-box,
body[data-simulation] .canvasFrame,
body[data-simulation] .simwrap,
body[data-simulation] .stage .maincanvas,
body[data-simulation] .main-stage .maincanvas,
body[data-simulation] .main-stage > .panel {
  box-shadow: 0 18px 42px rgba(0,0,0,0.22);
}

body[data-simulation] .overlay,
body[data-simulation] .overlay-badges,
body[data-simulation] .statusbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  border-color: rgba(119, 149, 196, 0.30);
  background: rgba(6, 16, 29, 0.78);
  border-radius: 18px;
}

body[data-simulation] .tooltip,
body[data-simulation] .overlay-hint {
  max-width: min(470px, calc(100% - 28px));
  background: rgba(7, 18, 32, 0.88);
  border-color: rgba(119, 149, 196, 0.26);
  box-shadow: 0 18px 42px rgba(0,0,0,0.26);
}

body[data-simulation] .kicker,
body[data-simulation] .badge,
body[data-simulation] .pill {
  overflow-wrap: anywhere;
}

body[data-simulation] .tabs {
  gap: 10px;
  padding: 10px;
}

body[data-simulation] .tab {
  min-height: 40px;
  font-weight: 800;
}

body[data-simulation] .field,
body[data-simulation] .control,
body[data-simulation] .range,
body[data-simulation] .group {
  display: grid;
  gap: 9px;
}

body[data-simulation] input[type="number"],
body[data-simulation] input[type="text"],
body[data-simulation] select,
body[data-simulation] textarea {
  min-height: 44px;
}

body[data-simulation] .sim-controls,
body[data-simulation] .sim-results,
body[data-simulation] .app > .side,
body[data-simulation] .app > .result,
body[data-simulation] .layout > .left,
body[data-simulation] .layout > .right,
body[data-simulation] .layout > .rightcol {
  padding-bottom: 12px;
}

/* --- módulos premium: tratamentos específicos --- */
body[data-simulation="photoelectric"] .sim-results,
body[data-simulation="photoelectric"] .sim-controls,
body[data-simulation="blackbody"] .sim-results,
body[data-simulation="blackbody"] .sim-controls,
body[data-simulation="blackholes"] .sim-results,
body[data-simulation="blackholes"] .sim-controls,
body[data-simulation="bohr"] .sim-results,
body[data-simulation="bohr"] .sim-controls,
body[data-simulation="fourier"] .sim-results,
body[data-simulation="fourier"] .sim-controls,
body[data-simulation="hawking"] .sim-results,
body[data-simulation="hawking"] .sim-controls,
body[data-simulation="relatividade-restrita"] .sim-results,
body[data-simulation="relatividade-restrita"] .sim-controls,
body[data-simulation="relatividade-geral"] .sim-results,
body[data-simulation="relatividade-geral"] .sim-controls {
  background: var(--premium-panel-bg);
  border: 1px solid rgba(83, 115, 164, 0.26);
  border-radius: calc(var(--radius-xl) + 2px);
  padding: clamp(18px, 1.4vw, 24px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.24);
}

body[data-simulation="photoelectric"] .sim-results > h1 {
  max-width: 8ch;
}

body[data-simulation="photoelectric"] .canvas-wrap,
body[data-simulation="relatividade-restrita"] .canvas-wrap,
body[data-simulation="fourier"] .canvas-wrap {
  grid-template-rows: minmax(520px, 1fr) minmax(300px, 350px);
}

body[data-simulation="bohr"] .main-stage > .panel,
body[data-simulation="hawking"] .main-stage > .panel,
body[data-simulation="fourier"] .main-stage > .panel,
body[data-simulation="relatividade-restrita"] .main-stage > .panel,
body[data-simulation="blackholes"] .main-stage > .panel,
body[data-simulation="blackbody"] .main-stage > .panel,
body[data-simulation="photoelectric"] .main-stage > .panel,
body[data-simulation="relatividade-geral"] .main-stage > .panel {
  background: var(--premium-panel-bg);
}

body[data-simulation="bohr"] .metrics,
body[data-simulation="hawking"] .metrics,
body[data-simulation="fourier"] .metrics,
body[data-simulation="relatividade-restrita"] .metrics,
body[data-simulation="blackholes"] .metrics,
body[data-simulation="blackbody"] .metrics,
body[data-simulation="photoelectric"] .metrics,
body[data-simulation="relatividade-geral"] .metrics {
  gap: clamp(12px, 1vw, 16px);
}

body[data-simulation="bohr"] .overlay,
body[data-simulation="hawking"] .overlay,
body[data-simulation="relatividade-restrita"] .overlay,
body[data-simulation="photoelectric"] .overlay,
body[data-simulation="relatividade-geral"] .overlay {
  max-width: min(620px, calc(100% - 32px));
}

body[data-simulation="relatividade-restrita"] .canvas-wrap .canvas-box:first-child,
body[data-simulation="fourier"] .canvas-wrap .canvas-box:first-child,
body[data-simulation="photoelectric"] .canvas-wrap .canvas-box:first-child,
body[data-simulation="bohr"] .canvas-wrap .canvas-box:first-child,
body[data-simulation="hawking"] .canvas-wrap .canvas-box:first-child {
  min-height: 540px;
}

body[data-simulation="relatividade-restrita"] .sim-results .eq,
body[data-simulation="photoelectric"] .sim-results .eq,
body[data-simulation="bohr"] .sim-results .panel,
body[data-simulation="hawking"] .sim-results .panel,
body[data-simulation="fourier"] .sim-results .eq {
  border-radius: var(--radius-lg);
}

body[data-simulation="relatividade-restrita"] .sim-results .tabs,
body[data-simulation="bohr"] .sim-results .tabs,
body[data-simulation="hawking"] .sim-results .tabs,
body[data-simulation="fourier"] .sim-results .tabs {
  margin-bottom: 4px;
}

body[data-simulation="bohr"] .sim-results .metric strong,
body[data-simulation="hawking"] .sim-results .metric strong,
body[data-simulation="fourier"] .sim-results .metric strong,
body[data-simulation="relatividade-restrita"] .sim-results .metric strong,
body[data-simulation="photoelectric"] .sim-results .metric strong,
body[data-simulation="blackholes"] .sim-results .metric strong {
  font-size: clamp(1rem, 1.2vw, 1.18rem);
}

body[data-simulation="blackbody"] .metrics,
body[data-simulation="blackholes"] .metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1490px) {
  body[data-simulation] .sim-results,
  body[data-simulation] .app > .result,
  body[data-simulation] .layout > aside:last-child,
  body[data-simulation] .layout > .right,
  body[data-simulation] .layout > .rightcol {
    padding: clamp(18px, 2vw, 24px);
  }
}

@media (max-width: 980px) {
  body[data-simulation] .sim-controls,
  body[data-simulation] .sim-results,
  body[data-simulation] .app > .side,
  body[data-simulation] .app > .result,
  body[data-simulation] .layout > .left,
  body[data-simulation] .layout > .right,
  body[data-simulation] .layout > .rightcol {
    border-radius: var(--radius-xl);
  }

  body[data-simulation] .canvas-wrap {
    grid-template-rows: minmax(460px, 1fr) minmax(270px, 320px);
  }

  body[data-simulation] .sim-results > h1,
  body[data-simulation] .app > .result > h1,
  body[data-simulation] .layout > .right > h1,
  body[data-simulation] .layout > .rightcol > h1 {
    max-width: none;
  }
}

@media (max-width: 700px) {
  body[data-simulation] .canvas-wrap {
    grid-template-rows: minmax(360px, 1fr) minmax(230px, 280px);
  }

  body[data-simulation] .overlay,
  body[data-simulation] .overlay-badges,
  body[data-simulation] .statusbar {
    gap: 6px 8px;
    border-radius: 14px;
  }
}