/* BeamLab — consolidated stylesheet. Earlier overridden declarations removed; final cascade retained. */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap"

);

:root {

    font-family: "DM Sans", Arial, sans-serif;

    color: #172f3b;

    background: #f7f9fb;

}

* {

    box-sizing: border-box;

}

body {

    margin: 0;

}

button,

input,

select {

    font: inherit;

}

a {

    color: inherit;

    text-decoration: none;

}

[hidden] {

    display: none !important;

}

.site-header {

    height: 76px;

    background: white;

    border-bottom: 1px solid #e4ebee;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 max(32px, calc((100vw - 1320px) / 2));

}

.brand {

    display: flex;

    align-items: center;

    gap: 11px;

    font-size: 21px;

    font-weight: 700;

    color: #143946;

}

.brand-light {

    font-weight: 400;

    color: #458b83;

}

.brand-icon {

    width: 25px;

    height: 25px;

    border: 2px solid #2a8f83;

    border-radius: 5px;

    display: grid;

    place-items: center;

    transform: rotate(-28deg);

}

.brand-icon span {

    width: 14px;

    height: 5px;

    background: #2a8f83;

}

.header-right {

    display: flex;

    gap: 30px;

    align-items: center;

    font-size: 12px;

    color: #45646b;

}

.header-tag,

.panel-detail,

.eyebrow,

.group-label,

.result-label,

.result-tile>span,

.section-preview-header {

    font-family: "IBM Plex Mono", monospace;

}

.header-tag {

    font-size: 10px;

    letter-spacing: 1.5px;

    color: #93a6af;

}

.page-shell {

    max-width: 1384px;

    margin: auto;

    padding: 35px 32px 70px;

}

.breadcrumbs {

    display: flex;

    gap: 11px;

    font-size: 12px;

    color: #91a1a9;

    margin-bottom: 40px;

}

.breadcrumbs strong {

    color: #355c64;

}

.intro {

    margin-bottom: 34px;

}

.eyebrow {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #338d82;

    font-size: 10px;

    letter-spacing: 1.6px;

    font-weight: 600;

}

.eyebrow>span {

    width: 20px;

    height: 2px;

    background: #35a293;

}

.eyebrow small {

    color: #a8b6bc;

    margin-left: 10px;

}

h1 {

    font-size: clamp(40px, 5vw, 58px);

    letter-spacing: -2.7px;

    margin: 18px 0 12px;

    line-height: 1;

}

h1 span {

    color: #78a7a6;

    font-weight: 400;

}

.intro p {

    color: #66808b;

    max-width: 680px;

    line-height: 1.6;

    margin: 0;

}

@media (min-width: 1001px) {

    .workspace>* {
        min-width: 0;
    }

}

.panel {

    background: white;

    border: 1px solid #e4ebee;

    border-radius: 13px;

    box-shadow: 0 4px 22px #1b3c4808;

}

.input-panel,

.loading-panel,

.results-panel,

.drawing-panel {

    padding: 24px;

}

.panel-heading {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.panel-heading>div {

    display: flex;

    align-items: center;

    gap: 12px;

}

.step {

    width: 30px;

    height: 30px;

    display: grid;

    place-items: center;

    background: #e6f4f0;

    color: #318f80;

    border-radius: 7px;

    font: 600 11px "IBM Plex Mono", monospace;

}

.panel h2 {

    font-size: 17px;

    margin: 0;

}

.panel-detail {

    color: #a4b2b9;

    font-size: 9px;

    letter-spacing: 1px;

}

.group-label {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 27px 0 14px;

    color: #378b82;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.2px;

}

.group-label span {

    height: 1px;

    flex: 1;

    background: #e8eef0;

}

.field-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

}

.field.full {

    grid-column: 1 / -1;

}

.field label {

    display: block;

    font-size: 12px;

    font-weight: 700;

    color: #3c5862;

    margin-bottom: 8px;

}

.field label small {

    margin-left: 4px;

    font: 400 11px "IBM Plex Mono", monospace;

    color: #90a6ad;

}

.input-wrap {

    height: 43px;

    border: 1px solid #dce6e9;

    border-radius: 6px;

    background: #fcfdfd;

    display: flex;

    align-items: center;

}

.input-wrap:focus-within,

select:focus {

    border-color: #2d9d8d;

    box-shadow: 0 0 0 3px #2d9d8d18;

}

.input-wrap input {

    width: 100%;

    min-width: 0;

    border: 0;

    outline: 0;

    background: transparent;

    padding: 0 2px 0 12px;

    font: 14px "IBM Plex Mono", monospace;

    color: #1d3e47;

}

.input-wrap select {

    width: 45px;

    min-width: 45px;

    height: 100%;

    border: 0;

    border-left: 1px solid #e6ecee;

    border-radius: 0;

    background: transparent;

    flex: 0 0 45px;

    padding: 0 0px;

    color: #8098a1;

    font: 10px "IBM Plex Mono", monospace;

    box-shadow: none;

}

.field>select {

    width: 100%;

    height: 43px;

    border: 1px solid #dce6e9;

    border-radius: 6px;

    outline: 0;

    background: #fcfdfd;

    color: #21464e;

    padding: 0 10px;

    font-size: 12px;

    font-weight: 600;

}

.section-preview {

    margin-top: 17px;

    border: 1px solid #edf2f3;

    border-radius: 7px;

    background: radial-gradient(circle,

            #dce9e9 1px,

            transparent 1px) 0 0 / 16px 16px,

        #fbfdfd;

    padding: 14px;

}

.section-preview-header {

    color: #91a5ac;

    font-size: 9px;

    letter-spacing: 1px;

    margin-bottom: 4px;

}

.section-preview svg {

    display: block;

    width: 100%;

    max-width: 270px;

    height: auto;

    margin: auto;

}

.section-shape {

    fill: #dcebed;

    stroke: #668b93;

    stroke-width: 2;

}

.section-hole {

    fill: #fbfdfd;

    stroke: #668b93;

    stroke-width: 2;

}

.section-dimension-line {

    fill: none;

    stroke: #78949b;

    stroke-width: 1.2;

}

.section-dimension-text {

    font: 11px "IBM Plex Mono", monospace;

    fill: #527482;

}

.input-error {

    margin-top: 17px;

    color: #b55b4c;

    font-size: 11px;

}

.hero-result {

    margin-top: 26px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.result-label {

    font-size: 9px;

    letter-spacing: 1px;

    color: #88a1a9;

}

.hero-number {

    display: flex;

    align-items: baseline;

    gap: 9px;

    margin-top: 11px;

}

.hero-number strong {

    font: 500 48px "IBM Plex Mono", monospace;

    color: #173d44;

}

.hero-number>span {

    font: 16px "IBM Plex Mono", monospace;

    color: #77a5a2;

}

.divider {

    height: 1px;

    background: #e8eef0;

    margin: 24px 0;

}

.result-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

}

.result-tile {

    border: 1px solid #e6ecee;

    border-radius: 8px;

    padding: 16px;

}

.result-tile>span {

    color: #839ca5;

}

.result-tile>strong {

    display: block;

    margin-top: 16px;

    font: 500 24px "IBM Plex Mono", monospace;

    color: #25474e;

}

.result-tile b {

    font-weight: 500;

}

.result-tile small {

    color: #83a0a4;

    font-size: 11px;

}

.drawing-area {

    margin-top: 18px;

    border: 1px solid #edf2f3;

    border-radius: 7px;

    background: radial-gradient(circle,

            #dce9e9 1px,

            transparent 1px) 0 0 / 16px 16px,

        #fbfdfd;

}

.drawing-area svg {

    width: 100%;

    display: block;

}

.beam-body {

    fill: #dcebed;

    stroke: #668b93;

    stroke-width: 2;

}

.beam-support {

    fill: #fbfdfd;

    stroke: #668b93;

    stroke-width: 2;

}

.support-ground {

    fill: none;

    stroke: #78949b;

    stroke-width: 1.2;

}

.load-line {

    fill: none;

    stroke: #29998b;

    stroke-width: 3;

}

.load-fill {

    fill: #29998b;

}

.reaction-line {

    fill: none;

    stroke: #668b93;

    stroke-width: 2;

}

.reaction-fill {

    fill: #668b93;

}

.reaction-label {

    font: 11px "IBM Plex Mono", monospace;

    fill: #527482;

}

.drawing-label {

    font: 12px "IBM Plex Mono", monospace;

    fill: #527482;

}

.dimension-line {

    fill: none;

    stroke: #78949b;

    stroke-width: 1.2;

}

.result-unit-bar {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 9px;

    margin-top: 22px;

    padding: 12px;

    background: #f8fbfb;

    border: 1px solid #e8eef0;

    border-radius: 8px;

}

.result-unit-bar>div {

    min-width: 0;

}

.result-unit-bar label {

    display: block;

    margin-bottom: 5px;

    font: 500 8px "IBM Plex Mono", monospace;

    letter-spacing: 0.7px;

    text-transform: uppercase;

    color: #8ba0a7;

}

.result-unit-bar select {

    width: 100%;

    height: 30px;

    padding: 0 6px;

    border: 1px solid #dfe8ea;

    border-radius: 5px;

    outline: 0;

    background: white;

    color: #31555d;

    font: 10px "IBM Plex Mono", monospace;

}

.result-unit-bar select:focus {

    border-color: #2d9d8d;

    box-shadow: 0 0 0 2px #2d9d8d18;

}

@media (max-width: 600px) {

    .result-unit-bar {
        grid-template-columns: 1fr 1fr;
    }

}

.beam-diagrams {

    display: grid;

    grid-template-columns: 1fr;

    gap: 14px;

    margin-top: 18px;

}

.diagram-block {

    padding: 14px;

    background: #f8fbfb;

    border: 1px solid #e4ebee;

    border-radius: 10px;

}

.diagram-heading {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    margin-bottom: 8px;

}

.diagram-heading h3 {

    margin: 2px 0 0;

    font-size: 13px;

    font-weight: 600;

    color: #172f3b;

}

.diagram-kicker,

.diagram-unit {

    font-family: "IBM Plex Mono", monospace;

    font-size: 9px;

    color: #80969e;

}

.diagram-kicker {

    letter-spacing: 0.8px;

}

.diagram-unit {

    padding: 4px 7px;

    background: white;

    border: 1px solid #e4ebee;

    border-radius: 5px;

}

.diagram-svg {

    display: block;

    width: 100%;

    height: auto;

    overflow: visible;

    background-color: #ffffff;

    background-image: radial-gradient(circle,

            #d7e1e4 1px,

            transparent 1px);

    background-size: 16px 16px;

    border-radius: 7px;

}

.diagram-axis {

    stroke: #9babb0;

    stroke-width: 1;

    stroke-dasharray: 4 4;

}

.diagram-path {

    fill: rgba(45, 157, 141, 0.08);

    stroke: #2d9d8d;

    stroke-width: 2;

    stroke-linejoin: round;

    stroke-linecap: round;

}

.diagram-value {

    font-family: "IBM Plex Mono", monospace;

    font-size: 13px;

    font-weight: 500;

    fill: #31555d;

}

.diagram-guide {

    stroke: #9babb0;

    stroke-width: 1;

    stroke-dasharray: 4 4;

}

.diagram-position {

    font-family: "IBM Plex Mono", monospace;

    font-size: 11px;

    fill: #80969e;

}

.diagram-position-load {

    fill: #31555d;

    font-weight: 500;

}

@media (max-width: 800px) {

    .beam-diagrams {
        grid-template-columns: 1fr;
    }

}

@media (min-width: 901px) and (max-width: 1000px) {

    .workspace {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .input-panel {
        grid-column: 1;
    }

    .loading-panel {
        grid-column: 2;
    }

    .results-panel {
        grid-column: 1;
    }

    .drawing-panel {
        grid-column: 2;
    }

}

@media (max-width: 900px) {

    .workspace {
        grid-template-columns: 1fr;
    }

    .input-panel,

    .loading-panel,

    .results-panel,

    .drawing-panel {
        grid-column: 1;
    }

}

@media (max-width: 600px) {

    .site-header {
        padding: 0 16px;
    }

    .header-tag {
        display: none;
    }

    .page-shell {
        padding: 28px 16px 50px;
    }

    .input-panel,

    .results-panel,

    .drawing-panel {
        padding: 20px 16px;
    }

    .field-grid,

    .result-grid {
        grid-template-columns: 1fr;
    }

    .hero-number strong {
        font-size: 38px;
    }

}

.subgroup-label {

    margin-top: 22px;

    margin-bottom: 12px;

    font-family: "IBM Plex Mono", monospace;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 0.8px;

    color: #80969e;

}

.load-input-group {

    grid-column: 1 / -1;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;

}

.load-input-group[hidden] {

    display: none;

}

.calculation-toggle {

    display: block;

    width: 100%;

    margin-top: 16px;

    padding: 12px 16px;

    background: #f1f5f9;

    border: 1px solid #dbe5eb;

    border-radius: 6px;

    color: #234653;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition: background 0.2s ease;

}

.calculation-toggle:hover {

    background: #e2e8f0;

}

.calculation-details {

    margin-top: 12px;

    padding: 18px;

    background: #f8fafc;

    border: 1px solid #dbe5eb;

    border-radius: 6px;

    color: #234653;

    font-size: 13px;

    line-height: 1.7;

}

.calculation-details[hidden] {

    display: none;

}

#pointLoadInputs {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;

    width: 100%;

}

#additionalPointLoads {

    grid-column: 1 / -1;

    width: 100%;

}

.additional-point-load {

    margin-top: 16px;

}

.additional-point-load .field-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;

}

.additional-point-load .field {

    min-width: 0;

}

#addPointLoad {

    grid-column: 1 / -1;

    width: 100%;

    margin-top: 8px;

}

.result-tile strong small {

    font-size: 1em;

    font-weight: inherit;

    color: inherit;

}

.result-tile>span {

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.5px;

}

.hero-result .result-label {

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.5px;

}

.remove-point-load {

    padding: 5px 10px;

    font-family: inherit;

    font-size: 12px;

    font-weight: 500;

    color: #64748b;

    background: #f1f5f9;

    border: 1px solid #cbd5e1;

    border-radius: 6px;

    cursor: pointer;

    transition: all 0.2s ease;

}

.remove-point-load:hover {

    color: #dc2626;

    background: #fef2f2;

    border-color: #fca5a5;

}

.remove-point-load:active {

    background: #fee2e2;

}

.section-properties-layout {

    display: grid;

    grid-template-columns: minmax(0, 1fr);

    gap: 16px;

}

.section-properties-layout .section-preview {

    width: 100%;

}

.section-properties-values {

    grid-template-columns: 1fr;

}

.section-properties-layout .section-preview {

    min-width: 0;

}

.section-properties-values {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 20px;

    min-width: 0;

}

.section-property {

    display: flex;

    flex-direction: column;

    gap: 5px;

}

@media (max-width: 480px) {

    .section-properties-layout {
        grid-template-columns: 1fr;
    }

}

.section-properties-values {

    padding-left: 0px;

}

#rectanglePreview .section-dimension-text,

#roundPreview .section-dimension-text {

    font-size: 13px;

    font-weight: 700;

}

.self-weight-option {

    margin-top: 16px;

    margin-bottom: 20px;

}

.self-weight-option label {

    display: flex;

    align-items: center;

    gap: 10px;

    cursor: pointer;

}

.self-weight-option input {

    width: 16px;

    height: 16px;

    accent-color: #287d85;

    cursor: pointer;

}

#loadingWorkspace {

    margin: 16px 0 24px;

}

.load-actions {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;

}

.load-actions button {

    padding: 12px 8px;

    border: 1px solid #cbd5e1;

    border-radius: 8px;

    background: transparent;

    color: inherit;

    font: inherit;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition: background 0.15s, border-color 0.15s;

}

.load-actions button:hover {

    background: rgba(100, 116, 139, 0.08);

    border-color: #64748b;

}

@media (max-width: 480px) {

    .load-actions {
        grid-template-columns: 1fr;
    }

}

#activeLoads {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-bottom: 12px;

}

#activeLoads:empty {

    display: none;

    margin-bottom: 0;

}

.dynamic-load-card {

    padding: 16px;

    border: 1px solid #cbd5e1;

    border-radius: 10px;

    background: rgba(100, 116, 139, 0.04);

}

.dynamic-load-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 14px;

}

.dynamic-load-header strong {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.06em;

}

.remove-dynamic-load {

    padding: 5px 9px;

    border: 1px solid #fecaca;

    border-radius: 6px;

    background: transparent;

    color: #dc2626;

    font: inherit;

    font-size: 11px;

    cursor: pointer;

}

.remove-dynamic-load:hover {

    background: rgba(220, 38, 38, 0.08);

}

#legacyLoadingControls {

    display: none !important;

}

.dynamic-load-header-actions {

    display: flex;

    align-items: center;

    gap: 12px;

}

.load-colour-control {

    display: flex;

    align-items: center;

    cursor: pointer;

}

.dynamic-load-colour {

    width: 34px;

    height: 30px;

    padding: 2px;

    border: 1px solid #cbd5e1;

    border-radius: 6px;

    background: transparent;

    cursor: pointer;

}

@media (min-width: 1001px) {

    .page-shell {
        max-width: 2200px;
    }

}

.results-panel .result-unit-bar {

    margin-top: 14px;

    padding: 8px;

}

.results-panel .hero-result {

    margin-top: 16px;

}

.results-panel .hero-number {

    margin-top: 6px;

}

.results-panel .divider {

    margin: 14px 0;

}

.results-panel .result-grid {

    gap: 8px;

}

.results-panel .result-tile>strong {

    margin-top: 7px;

}

.results-panel {

    padding: 18px 14px;

}

.results-panel .result-unit-bar {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 8px;

}

.results-panel .result-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: max-content;
    align-items: start;
}

.results-panel .result-tile {

    padding: 10px 12px;

}

.loading-panel .dynamic-load-card .field-grid {

    grid-template-columns: minmax(0, 1fr);

    gap: 10px;

}

.loading-panel .dynamic-load-card .field {

    grid-column: 1 / -1;

    min-width: 0;

}

.loading-panel .dynamic-load-card .input-wrap,

.loading-panel .dynamic-load-card .field>select {

    height: 34px;

}

.loading-panel .dynamic-load-card .field label {

    margin-bottom: 5px;

}

.loading-panel .dynamic-load-card {

    padding: 12px;

}

.loading-panel .dynamic-load-header {

    margin-bottom: 10px;

}

.input-wrap input {

    font-size: 13px;

}

.results-panel .hero-number strong {

    font-size: 26px;

}

.results-panel .hero-number>span {

    font-size: 13px;

}

.results-panel .result-tile>strong {

    font-size: 16px;

    line-height: 1.4;

    overflow-wrap: anywhere;

}

.results-panel .result-tile:has(#deflection) {
    padding: 8px 12px;
    height: auto;
    min-height: 0;
}

.results-panel .result-tile:has(#deflection)>strong {
    margin-top: 4px;
    line-height: 1.1;
    white-space: pre-line;
}

.results-panel .result-tile>span,

.results-panel .hero-result .result-label {

    font-size: 10px;

}

.loading-panel .field label {

    font-size: 12px;

}

.section-property>span {

    font-weight: 700;

    color: #3c5862;

}

.section-property strong {

    font-weight: 400;

    font-family: "IBM Plex Mono", monospace;

    color: #1d3e47;

}

.input-panel .group-label+.field-grid {

    margin-bottom: 16px;

}

.results-panel .input-error {

    margin-top: 14px;

    margin-bottom: 8px;

    line-height: 1.5;

}

.drawing-panel {

    min-width: 0;

}

.drawing-area,

.beam-diagrams,

.diagram-block {

    min-width: 0;

}

@media (min-width: 1001px) {

    .input-panel {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .loading-panel {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    .inputs-layout {
        display: grid;
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
        gap: 24px;
        margin-top: 24px;
        align-items: start;
    }

    .inputs-controls,

    .inputs-preview {
        min-width: 0;
    }

    .inputs-preview .section-properties-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .inputs-preview .section-preview {
        margin-top: px;
    }

}

.inputs-controls .field-grid {

    grid-template-columns: minmax(0, 1fr);

    gap: 12px;

}

.inputs-controls .field {

    grid-column: 1 / -1;

    min-width: 0;

}

.workspace {

    gap: 16px;

}

.input-panel,

.loading-panel {

    padding: 18px 20px;

}

.input-panel .field label,

.loading-panel .field label {

    font-size: 11px;

    margin-bottom: 5px;

}

.input-panel .input-wrap,

.loading-panel .input-wrap,

.input-panel .field>select,

.loading-panel .field>select {

    height: 38px;

}

.input-panel .input-wrap input,

.loading-panel .input-wrap input {

    font-size: 12px;

}

.input-panel .field>select,

.loading-panel .field>select {

    font-size: 11px;

}

.input-panel .field-grid,

.loading-panel .field-grid {

    gap: 8px;

}

.inputs-layout {

    margin-top: 18px;

}

.section-property>span {

    font-size: 11px;

}

.section-property strong {

    font-size: 12px;

}

.self-weight-option label {

    font-size: 11px;

}

@media (min-width: 1001px) {

    .input-panel,

    .loading-panel {
        grid-column: auto;
        grid-row: auto;
    }

}

@media (max-width: 1000px) {

    .left-workspace {
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-width: 0;
    }

}

@media (min-width: 1001px) {

    .workspace {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 2.5fr);
        gap: 16px;
        align-items: start;
    }

    .left-workspace {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-width: 0;
    }

    .output-column {
        display: contents;
    }

    .results-panel {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: 20px;
        align-self: start;
    }

    .drawing-panel {
        grid-column: 3;
        grid-row: 1;
    }

}

@media (min-width: 1101px) {

    .loading-panel .dynamic-load-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 6px;
        padding: 12px 14px;
        align-items: center;
    }

    .loading-panel .dynamic-load-header {
        display: contents;
    }

    .loading-panel .dynamic-load-header>strong {
        grid-column: 1;
        grid-row: 1;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: 0.04em;
    }

    .loading-panel .dynamic-load-card>.field-grid {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex;
        gap: 12px;
        width: 100%;
        min-width: 0;
        align-items: end;
    }

    .loading-panel .dynamic-load-card>.field-grid>.field {
        flex: 1 1 0;
        min-width: 0;
        width: 0;
        grid-column: auto;
    }

    .loading-panel .dynamic-load-card .field,

    .loading-panel .dynamic-load-card .field.full {
        grid-column: auto;
        min-width: 0;
    }

    .loading-panel .dynamic-load-header-actions {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }

    .loading-panel .dynamic-load-card .input-wrap {
        height: 36px;
        min-width: 0;
    }

    .loading-panel .dynamic-load-card .input-wrap input {
        min-width: 0;
    }

}

.loading-panel .remove-dynamic-load {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 34px;

    width: 34px;

    height: 34px;

    padding: 0;

    color: #dc3545;

    border: 1px solid #dc3545;

    border-radius: 6px;

    background: transparent;

    cursor: pointer;

}

.loading-panel .remove-dynamic-load:hover {

    background: #fff0f0;

}

.loading-panel .remove-dynamic-load svg {

    display: block;

}

.loading-panel .dynamic-load-card .input-wrap select {

    width: 45px;

    min-width: 45px;

    flex: 0 0 45px;

    padding-left: 0px;

    padding-right: 0px;

    font-size: 10px;

}

.loading-panel .dynamic-load-card .input-wrap input {

    flex: 1 1 0;

    min-width: 0;

}

.input-panel>.self-weight-option {

    margin-top: 16px;

    margin-left: 0;

    padding-left: 0;

    display: flex;

    justify-content: flex-start;

}

/* Engineering limitations */

.engineering-limitations {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border, #dce3e8);
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted, #667780);
}

.engineering-limitations strong {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text, #234653);
}

.engineering-limitations p {
    margin: 0 0 8px;
}