/* BeamLab polish layer: matte glass dark theme + cleaner structural graphics */
body.dark{
  background:#0b1016;
  background-image:
    radial-gradient(900px 520px at 12% -10%,rgba(72,137,255,.10),transparent 60%),
    radial-gradient(760px 500px at 92% 8%,rgba(166,82,255,.08),transparent 62%),
    linear-gradient(135deg,#0a0f14 0%,#10161d 48%,#0b1016 100%);
  color:#e7edf6;
}
body.dark:before{
  background:linear-gradient(115deg,rgba(255,255,255,.028),transparent 24%,rgba(255,255,255,.012) 55%,transparent 78%);
  opacity:.9;
}
body.dark .topbar{
  background:rgba(12,17,23,.66);
  border-bottom:1px solid rgba(153,190,230,.12);
  box-shadow:0 12px 40px rgba(0,0,0,.32),inset 0 -1px 0 rgba(255,255,255,.025);
  backdrop-filter:blur(22px) saturate(125%);
}
body.dark .card{
  background:linear-gradient(145deg,rgba(27,34,43,.72),rgba(17,23,30,.68));
  border:1px solid rgba(164,194,224,.13);
  box-shadow:0 22px 55px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter:blur(20px) saturate(120%);
}
body.dark .card:after,body.dark .diagramBlock:after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.035),transparent 28%,transparent 72%,rgba(255,255,255,.018));
}
body.dark .card,.dark .diagramBlock{position:relative;overflow:hidden}
body.dark button,body.dark input,body.dark select{
  background:rgba(25,32,41,.72);
  border-color:rgba(171,201,232,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 8px 18px rgba(0,0,0,.16);
}
body.dark button:hover{background:rgba(42,51,63,.78);border-color:rgba(113,176,255,.48)}
body.dark .beamViewport{
  background:linear-gradient(145deg,rgba(10,15,21,.72),rgba(18,24,31,.58));
  border-color:rgba(159,194,230,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),inset 0 0 40px rgba(64,116,180,.035);
}
body.dark .fixed-symbol line,body.dark .fixed-symbol path{stroke:#8e9cad}
body.dark .support-triangle,body.dark .roller,body.dark .node{fill:#111820;stroke:#93a2b5}
body.dark .moment-load path{stroke:#ff9b45;stroke-width:2.5;fill:none;color:#ff9b45}
body.dark .moment-load text{fill:#ffab63}
.moment-load path{fill:none;stroke:#f59b45;stroke-width:2.2;stroke-linecap:round}
.logoMark{width:52px;height:50px;overflow:visible;flex:0 0 52px}
.logoMark img{width:auto;height:48px;max-width:52px;max-height:48px;object-fit:contain;display:block}
.diagramBlock{position:relative}
.chart{overflow:visible}
.hoverV,.hoverH{stroke:#7f8fa3;stroke-width:1.1;stroke-dasharray:4 4;opacity:0}
.hoverPoint{fill:#fff;stroke:#4d9cff;stroke-width:2.5}
.hoverBox{fill:#101722;stroke:rgba(255,255,255,.08);filter:drop-shadow(0 8px 18px rgba(0,0,0,.28))}
body.dark .hoverBox{fill:rgba(11,17,24,.94);stroke:rgba(119,181,255,.18)}
@media(max-width:900px){.logoMark{width:46px;flex-basis:46px}.logoMark img{max-width:46px;height:44px}}

/* Beam model: keep support labels clear of the symbols. */
#beamCanvas .support-label{transform:translateY(10px)}
#beamCanvas .position-label{transform:translateY(10px)}

/* The beam already shows its overall length below the model; don't repeat it. */
#beamCanvas .dimension-overall-line,
#beamCanvas .dimension-text{display:none!important}

/* Individual position dimensions must remain readable in dark mode. */
#beamCanvas .dimension-line{stroke:#9aa9bb;stroke-width:1.1;opacity:.82}
#beamCanvas .dimension-tick{stroke:#c0cad6;stroke-width:1.2;opacity:.96}
#beamCanvas .dimension-point-label{
  fill:#d7e0ea;
  font-size:11px;
  paint-order:stroke;
  stroke:#0b1016;
  stroke-width:3px;
  stroke-linejoin:round;
}
body:not(.dark) #beamCanvas .dimension-point-label{fill:#58697c;stroke:#fff;stroke-width:3px}