/**
 * Res Opera SeismoBuild
 * Responsive UI, model viewer, member editor and theme styles.
 * Version: 1.0.0
 */

/* =========================================================
   1. Theme variables and app shell
   ========================================================= */

.rosb-app {
    --rosb-primary: #07569a;
    --rosb-primary-dark: #064477;
    --rosb-accent: #22a8ab;
    --rosb-bg: #f3f6fa;
    --rosb-surface: var(--rosb-surface-config, #ffffff);
    --rosb-surface-soft: #f7f9fc;
    --rosb-text: var(--rosb-text-config, #182435);
    --rosb-muted: #68778b;
    --rosb-border: #dce4ed;
    --rosb-shadow: 0 8px 26px rgba(24, 46, 75, 0.07);
    --rosb-danger: #c43d4b;
    --rosb-success: #16845b;
    --rosb-radius: 16px;

    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 22px;
    box-sizing: border-box;
    color: var(--rosb-text);
    background: var(--rosb-bg);
    border: 1px solid var(--rosb-border);
    border-radius: 22px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.rosb-app *,
.rosb-app *::before,
.rosb-app *::after {
    box-sizing: border-box;
}

.rosb-app button,
.rosb-app input,
.rosb-app select,
.rosb-app textarea {
    font: inherit;
}

.rosb-app button {
    cursor: pointer;
}

.rosb-app button:focus-visible,
.rosb-app input:focus-visible,
.rosb-app select:focus-visible,
.rosb-app textarea:focus-visible,
.rosb-app svg:focus-visible {
    outline: 3px solid rgba(34, 168, 171, 0.42);
    outline-offset: 3px;
}

.rosb-app .rosb-muted,
.rosb-app .rosb-help,
.rosb-app .rosb-description {
    color: var(--rosb-muted);
}

.rosb-app .rosb-hidden,
.rosb-app [hidden] {
    display: none !important;
}

.rosb-app.rosb-theme-dark,
.rosb-app[data-rosb-theme="dark"] {
    --rosb-bg: #111923;
    --rosb-surface: #1a2533;
    --rosb-surface-soft: #202d3c;
    --rosb-text: #e8eef6;
    --rosb-muted: #a4b2c4;
    --rosb-border: #344355;
    --rosb-shadow: 0 8px 26px rgba(0, 0, 0, 0.2);
    --rosb-primary: #3289d0;
    --rosb-primary-dark: #176aa9;
    --rosb-accent: #35c3c2;
}

.rosb-app.rosb-theme-light,
.rosb-app[data-rosb-theme="light"] {
    color-scheme: light;
}

.rosb-app.rosb-theme-dark,
.rosb-app[data-rosb-theme="dark"] {
    color-scheme: dark;
}

/* =========================================================
   2. Header and headings
   ========================================================= */

.rosb-app .rosb-header,
.rosb-app .rosb-topbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
    margin: 0 0 22px;
    padding: 25px 27px;
    color: #ffffff;
    background: linear-gradient(125deg, var(--rosb-header-start, #07569a) 0%, var(--rosb-header-end, #22a8ab) 100%);
    border: 0;
    border-radius: var(--rosb-radius);
    box-shadow: 0 10px 26px rgba(7, 86, 154, 0.18);
}

.rosb-app .rosb-header h1,
.rosb-app .rosb-header h2,
.rosb-app .rosb-topbar h1,
.rosb-app .rosb-topbar h2 {
    margin: 0;
    padding: 0;
    color: #ffffff;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.rosb-app .rosb-header p,
.rosb-app .rosb-topbar p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    line-height: 1.65;
}

.rosb-app .rosb-header-icon,
.rosb-app .rosb-icon-tile {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    font-size: 27px;
}

.rosb-app .rosb-header-content {
    flex: 1 1 260px;
    min-width: 0;
}

.rosb-app .rosb-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* =========================================================
   3. General layout and cards
   ========================================================= */

.rosb-app .rosb-layout,
.rosb-app .rosb-main-grid,
.rosb-app .rosb-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(270px, 0.9fr);
    align-items: start;
    gap: 20px;
    width: 100%;
    min-width: 0;
}

.rosb-app .rosb-left-column,
.rosb-app .rosb-right-column,
.rosb-app .rosb-panel-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.rosb-app .rosb-card,
.rosb-app .rosb-panel,
.rosb-app .rosb-section,
.rosb-app .rosb-workspace-card {
    min-width: 0;
    padding: 20px;
    color: var(--rosb-text);
    background: var(--rosb-surface);
    border: 1px solid var(--rosb-border);
    border-radius: var(--rosb-radius);
    box-shadow: var(--rosb-shadow);
}

.rosb-app .rosb-card h2,
.rosb-app .rosb-card h3,
.rosb-app .rosb-panel h2,
.rosb-app .rosb-panel h3,
.rosb-app .rosb-section h2,
.rosb-app .rosb-section h3 {
    margin: 0 0 13px;
    color: var(--rosb-text);
    font-weight: 720;
    line-height: 1.35;
}

.rosb-app .rosb-card h2,
.rosb-app .rosb-panel h2,
.rosb-app .rosb-section h2 {
    font-size: 18px;
}

.rosb-app .rosb-card h3,
.rosb-app .rosb-panel h3,
.rosb-app .rosb-section h3 {
    font-size: 15px;
}

.rosb-app .rosb-card p,
.rosb-app .rosb-panel p,
.rosb-app .rosb-section p {
    margin-top: 0;
}

.rosb-app .rosb-section-heading,
.rosb-app .rosb-panel-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 15px;
}

.rosb-app .rosb-section-heading h2,
.rosb-app .rosb-section-heading h3,
.rosb-app .rosb-panel-heading h2,
.rosb-app .rosb-panel-heading h3 {
    margin: 0;
}

.rosb-app .rosb-divider {
    height: 1px;
    margin: 17px 0;
    background: var(--rosb-border);
    border: 0;
}

/* =========================================================
   4. Buttons
   ========================================================= */

.rosb-app .rosb-button,
.rosb-app .rosb-btn,
.rosb-app .rosb-action-button,
.rosb-app .rosb-add-storey,
.rosb-app .rosb-remove-storey,
.rosb-app .rosb-reset,
.rosb-app .rosb-apply-member,
.rosb-app .rosb-run-analysis,
.rosb-app .rosb-save,
.rosb-app .rosb-load,
.rosb-app .rosb-export,
.rosb-app .rosb-import {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    max-width: 100%;
    padding: 10px 15px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--rosb-primary), var(--rosb-accent));
    border: 1px solid transparent;
    border-radius: 11px;
    box-shadow: 0 4px 10px rgba(7, 86, 154, 0.13);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.rosb-app .rosb-button:hover,
.rosb-app .rosb-btn:hover,
.rosb-app .rosb-action-button:hover,
.rosb-app .rosb-add-storey:hover,
.rosb-app .rosb-remove-storey:hover,
.rosb-app .rosb-reset:hover,
.rosb-app .rosb-apply-member:hover,
.rosb-app .rosb-run-analysis:hover,
.rosb-app .rosb-save:hover,
.rosb-app .rosb-load:hover,
.rosb-app .rosb-export:hover,
.rosb-app .rosb-import:hover {
    color: #ffffff;
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(7, 86, 154, 0.2);
}

.rosb-app .rosb-button:active,
.rosb-app .rosb-btn:active,
.rosb-app .rosb-action-button:active {
    transform: translateY(0);
}

.rosb-app .rosb-button-secondary,
.rosb-app .rosb-btn-secondary,
.rosb-app .rosb-reset,
.rosb-app .rosb-remove-storey,
.rosb-app .rosb-load {
    color: var(--rosb-text);
    background: var(--rosb-surface-soft);
    border-color: var(--rosb-border);
    box-shadow: none;
}

.rosb-app .rosb-button-secondary:hover,
.rosb-app .rosb-btn-secondary:hover,
.rosb-app .rosb-reset:hover,
.rosb-app .rosb-remove-storey:hover,
.rosb-app .rosb-load:hover {
    color: var(--rosb-text);
    background: var(--rosb-bg);
    border-color: var(--rosb-accent);
    box-shadow: none;
}

.rosb-app .rosb-button-danger,
.rosb-app .rosb-btn-danger {
    color: #ffffff;
    background: var(--rosb-danger);
}

.rosb-app button:disabled,
.rosb-app .is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
    box-shadow: none;
}

.rosb-app .rosb-button-row,
.rosb-app .rosb-actions,
.rosb-app .rosb-model-actions,
.rosb-app .rosb-project-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.rosb-app .rosb-button-row > *,
.rosb-app .rosb-actions > *,
.rosb-app .rosb-model-actions > *,
.rosb-app .rosb-project-actions > * {
    max-width: 100%;
}

/* =========================================================
   5. Theme switch
   ========================================================= */

.rosb-app .rosb-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 43px;
    padding: 10px 15px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 750;
    transition: background 160ms ease, transform 160ms ease;
}

.rosb-app .rosb-theme-toggle:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.24);
    transform: translateY(-1px);
}

.rosb-app .rosb-theme-toggle::before {
    content: "◐";
    font-size: 18px;
    line-height: 1;
}

/* =========================================================
   6. Inputs and form fields
   ========================================================= */

.rosb-app label,
.rosb-app .rosb-field-label {
    display: block;
    margin: 0 0 6px;
    color: var(--rosb-text);
    font-size: 12px;
    font-weight: 750;
}

.rosb-app input[type="text"],
.rosb-app input[type="number"],
.rosb-app input[type="email"],
.rosb-app input[type="search"],
.rosb-app input[type="url"],
.rosb-app input[type="password"],
.rosb-app select,
.rosb-app textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 10px 12px;
    color: var(--rosb-text);
    background: var(--rosb-surface);
    border: 1px solid var(--rosb-border);
    border-radius: 10px;
    box-shadow: none;
    font-size: 13px;
    line-height: 1.45;
}

.rosb-app textarea {
    min-height: 88px;
    resize: vertical;
}

.rosb-app input::placeholder,
.rosb-app textarea::placeholder {
    color: var(--rosb-muted);
    opacity: 0.85;
}

.rosb-app input:hover,
.rosb-app select:hover,
.rosb-app textarea:hover {
    border-color: #9eafc3;
}

.rosb-app .rosb-form-grid,
.rosb-app .rosb-input-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.rosb-app .rosb-field,
.rosb-app .rosb-form-field {
    min-width: 0;
}

.rosb-app .rosb-field-full {
    grid-column: 1 / -1;
}

.rosb-app .rosb-help {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.5;
}

/* =========================================================
   7. Model viewer and canvas
   ========================================================= */

.rosb-app .rosb-canvas-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 320px;
    overflow: hidden;
    background: var(--rosb-surface-soft);
    border: 1px solid var(--rosb-border);
    border-radius: 14px;
    touch-action: pan-y;
}

.rosb-app .rosb-canvas {
    display: block;
    width: 100%;
    height: auto;
    min-height: 320px;
    max-width: 100%;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.rosb-app .rosb-canvas:active {
    cursor: grabbing;
}

.rosb-app .rosb-svg-background {
    fill: var(--rosb-surface-soft);
}

.rosb-app .rosb-grid-line {
    fill: none;
    stroke: var(--rosb-border);
    stroke-width: 1.2;
    stroke-dasharray: 4 5;
    vector-effect: non-scaling-stroke;
}

.rosb-app .rosb-grid-line-floor {
    stroke-dasharray: 3 5;
    opacity: 0.7;
}

.rosb-app .rosb-floor-plane {
    fill: rgba(34, 168, 171, 0.07);
    stroke: var(--rosb-border);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
}

.rosb-app .rosb-axis-label {
    fill: var(--rosb-muted);
    font-size: 11px;
    font-weight: 700;
    pointer-events: none;
}

.rosb-app .rosb-member {
    cursor: pointer;
    outline: none;
}

.rosb-app .rosb-member-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 20;
    stroke-linecap: round;
    pointer-events: stroke;
}

.rosb-app .rosb-member-line {
    fill: none;
    stroke: #1684bd;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
    transition: stroke 130ms ease, stroke-width 130ms ease;
}

.rosb-app .rosb-member-column .rosb-member-line {
    stroke: #07569a;
    stroke-width: 6;
}

.rosb-app .rosb-member-beam .rosb-member-line {
    stroke: #22a8ab;
    stroke-width: 5;
}

.rosb-app .rosb-member:hover .rosb-member-line {
    stroke: #f2a33a;
    stroke-width: 8;
}

.rosb-app .rosb-member.is-selected .rosb-member-line {
    stroke: #f39b27;
    stroke-width: 9;
}

.rosb-app .rosb-member.is-selected .rosb-member-hit {
    stroke: rgba(243, 155, 39, 0.12);
    stroke-width: 24;
}

.rosb-app .rosb-member-joint {
    fill: #ffffff;
    stroke: #e98a19;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.rosb-app .rosb-members-layer {
    pointer-events: auto;
}

/* =========================================================
   8. View toolbar and camera buttons
   ========================================================= */

.rosb-app .rosb-view-toolbar,
.rosb-app .rosb-view-controls,
.rosb-app .rosb-view-switcher {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin: 0 0 13px;
}

.rosb-app .rosb-view-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 39px;
    padding: 9px 13px;
    color: var(--rosb-muted);
    background: var(--rosb-surface);
    border: 1px solid var(--rosb-border);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 750;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.rosb-app .rosb-view-button:hover {
    color: var(--rosb-primary);
    border-color: var(--rosb-primary);
}

.rosb-app .rosb-view-button.is-active,
.rosb-app .rosb-view-button[aria-pressed="true"] {
    color: #ffffff;
    background: var(--rosb-primary);
    border-color: var(--rosb-primary);
    box-shadow: 0 4px 10px rgba(7, 86, 154, 0.17);
}

.rosb-app .rosb-camera-toolbar {
    position: absolute;
    z-index: 4;
    top: 12px;
    right: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    max-width: calc(100% - 24px);
    padding: 6px;
    background: var(--rosb-surface);
    border: 1px solid var(--rosb-border);
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(16, 35, 55, 0.12);
}

.rosb-app .rosb-camera-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--rosb-text);
    background: var(--rosb-surface-soft);
    border: 1px solid var(--rosb-border);
    border-radius: 8px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.rosb-app .rosb-camera-button:hover {
    color: #ffffff;
    background: var(--rosb-primary);
    border-color: var(--rosb-primary);
    transform: translateY(-1px);
}

.rosb-app .rosb-camera-button[data-camera-action="fit"] {
    width: auto;
    min-width: 40px;
    padding: 0 9px;
    font-size: 11px;
}

.rosb-app .rosb-zoom-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 0 5px;
    color: var(--rosb-muted);
    font-size: 11px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   9. Member properties panel
   ========================================================= */

.rosb-app .rosb-selection-message {
    margin: 0 0 15px;
    padding: 11px 13px;
    color: var(--rosb-primary);
    background: rgba(7, 86, 154, 0.07);
    border: 1px solid rgba(7, 86, 154, 0.15);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;
}

.rosb-app.rosb-theme-dark .rosb-selection-message,
.rosb-app[data-rosb-theme="dark"] .rosb-selection-message {
    color: #91d6fa;
    background: rgba(50, 137, 208, 0.13);
    border-color: rgba(50, 137, 208, 0.3);
}

.rosb-app .rosb-member-properties,
.rosb-app .rosb-property-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
}

.rosb-app .rosb-apply-member {
    width: 100%;
    margin-top: 14px;
}

.rosb-app .rosb-member-card {
    padding: 12px;
    background: var(--rosb-surface-soft);
    border: 1px solid var(--rosb-border);
    border-radius: 11px;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
}

.rosb-app .rosb-member-card:hover,
.rosb-app .rosb-member-card.is-selected {
    background: rgba(34, 168, 171, 0.08);
    border-color: var(--rosb-accent);
}

.rosb-app .rosb-member-card strong {
    display: block;
    margin-bottom: 4px;
    color: var(--rosb-text);
    font-size: 13px;
}

.rosb-app .rosb-member-card small {
    color: var(--rosb-muted);
    font-size: 11px;
}

/* =========================================================
   10. Model summary and stat tiles
   ========================================================= */

.rosb-app .rosb-stats-grid,
.rosb-app .rosb-summary-grid,
.rosb-app .rosb-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}

.rosb-app .rosb-stat,
.rosb-app .rosb-stat-card,
.rosb-app .rosb-metric {
    min-width: 0;
    padding: 13px;
    background: var(--rosb-surface-soft);
    border: 1px solid var(--rosb-border);
    border-radius: 12px;
}

.rosb-app .rosb-stat-label,
.rosb-app .rosb-metric-label {
    display: block;
    margin-bottom: 5px;
    color: var(--rosb-muted);
    font-size: 11px;
    font-weight: 650;
}

.rosb-app .rosb-stat-value,
.rosb-app .rosb-metric-value {
    display: block;
    color: var(--rosb-text);
    font-size: clamp(16px, 2vw, 22px);
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   11. Status, badges and results
   ========================================================= */

.rosb-app .rosb-badge,
.rosb-app .rosb-status-badge,
.rosb-app .rosb-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 9px;
    color: var(--rosb-muted);
    background: var(--rosb-surface-soft);
    border: 1px solid var(--rosb-border);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.4;
}

.rosb-app .rosb-status::before,
.rosb-app .rosb-status-badge::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    background: currentColor;
    border-radius: 50%;
}

.rosb-app .rosb-status.is-success,
.rosb-app .rosb-status-badge.is-success {
    color: var(--rosb-success);
}

.rosb-app .rosb-status.is-error,
.rosb-app .rosb-status-badge.is-error {
    color: var(--rosb-danger);
}

.rosb-app .rosb-analysis-status,
.rosb-app .rosb-solver-status {
    font-weight: 750;
}

.rosb-app .rosb-results-output {
    min-height: 75px;
    padding: 14px;
    color: var(--rosb-muted);
    background: var(--rosb-surface-soft);
    border: 1px solid var(--rosb-border);
    border-radius: 11px;
    font-size: 12px;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.rosb-app .rosb-notice,
.rosb-app .rosb-warning,
.rosb-app .rosb-info-box {
    margin: 12px 0;
    padding: 13px 14px;
    color: var(--rosb-text);
    background: var(--rosb-surface-soft);
    border: 1px solid var(--rosb-border);
    border-left: 4px solid var(--rosb-accent);
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.65;
}

.rosb-app .rosb-warning {
    border-left-color: #e9a23b;
}

.rosb-app .rosb-message {
    position: fixed;
    z-index: 999999;
    right: 22px;
    bottom: 22px;
    width: max-content;
    max-width: min(420px, calc(100vw - 44px));
    padding: 13px 17px;
    color: #ffffff;
    background: #183247;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    font-size: 13px;
    font-weight: 650;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.rosb-app .rosb-message.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.rosb-app .rosb-message.is-error {
    background: #a62c3b;
}

/* =========================================================
   12. Tables and data lists
   ========================================================= */

.rosb-app table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    color: var(--rosb-text);
    font-size: 12px;
}

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

.rosb-app th {
    color: var(--rosb-muted);
    background: var(--rosb-surface-soft);
    font-size: 11px;
    font-weight: 800;
}

.rosb-app .rosb-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--rosb-border);
    border-radius: 10px;
}

/* =========================================================
   13. Footer
   ========================================================= */

.rosb-app .rosb-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 22px 0 0;
    padding: 15px 4px 2px;
    color: var(--rosb-muted);
    border-top: 1px solid var(--rosb-border);
    font-size: 11px;
    line-height: 1.6;
}

.rosb-app .rosb-footer a {
    color: var(--rosb-primary);
    text-decoration: none;
}

.rosb-app .rosb-footer a:hover {
    text-decoration: underline;
}

/* =========================================================
   14. Dark-mode adjustments
   ========================================================= */

.rosb-app.rosb-theme-dark .rosb-member-column .rosb-member-line,
.rosb-app[data-rosb-theme="dark"] .rosb-member-column .rosb-member-line {
    stroke: #65b6f0;
}

.rosb-app.rosb-theme-dark .rosb-member-beam .rosb-member-line,
.rosb-app[data-rosb-theme="dark"] .rosb-member-beam .rosb-member-line {
    stroke: #42c8c2;
}

.rosb-app.rosb-theme-dark .rosb-member:hover .rosb-member-line,
.rosb-app[data-rosb-theme="dark"] .rosb-member:hover .rosb-member-line,
.rosb-app.rosb-theme-dark .rosb-member.is-selected .rosb-member-line,
.rosb-app[data-rosb-theme="dark"] .rosb-member.is-selected .rosb-member-line {
    stroke: #ffb454;
}

.rosb-app.rosb-theme-dark .rosb-member-joint,
.rosb-app[data-rosb-theme="dark"] .rosb-member-joint {
    fill: #1a2533;
}

.rosb-app.rosb-theme-dark .rosb-camera-toolbar,
.rosb-app[data-rosb-theme="dark"] .rosb-camera-toolbar {
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.3);
}

/* =========================================================
   15. Responsive layouts
   ========================================================= */

@media (max-width: 1000px) {
    .rosb-app {
        padding: 16px;
    }

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

    .rosb-app .rosb-left-column,
    .rosb-app .rosb-right-column,
    .rosb-app .rosb-panel-column {
        gap: 16px;
    }

    .rosb-app .rosb-canvas-wrap,
    .rosb-app .rosb-canvas {
        min-height: 300px;
    }
}

@media (max-width: 640px) {
    .rosb-app {
        padding: 10px;
        border-radius: 14px;
        font-size: 13px;
    }

    .rosb-app .rosb-header,
    .rosb-app .rosb-topbar {
        align-items: flex-start;
        gap: 13px;
        padding: 18px;
        border-radius: 13px;
    }

    .rosb-app .rosb-header h1,
    .rosb-app .rosb-header h2,
    .rosb-app .rosb-topbar h1,
    .rosb-app .rosb-topbar h2 {
        font-size: 22px;
    }

    .rosb-app .rosb-header-icon,
    .rosb-app .rosb-icon-tile {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        font-size: 22px;
    }

    .rosb-app .rosb-card,
    .rosb-app .rosb-panel,
    .rosb-app .rosb-section,
    .rosb-app .rosb-workspace-card {
        padding: 14px;
        border-radius: 13px;
    }

    .rosb-app .rosb-form-grid,
    .rosb-app .rosb-input-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .rosb-app .rosb-stats-grid,
    .rosb-app .rosb-summary-grid,
    .rosb-app .rosb-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rosb-app .rosb-button-row > *,
    .rosb-app .rosb-actions > *,
    .rosb-app .rosb-model-actions > *,
    .rosb-app .rosb-project-actions > * {
        flex: 1 1 auto;
    }

    .rosb-app .rosb-canvas-wrap,
    .rosb-app .rosb-canvas {
        min-height: 250px;
    }

    .rosb-app .rosb-camera-toolbar {
        top: 7px;
        right: 7px;
        gap: 3px;
        padding: 4px;
    }

    .rosb-app .rosb-camera-button {
        width: 30px;
        height: 30px;
    }

    .rosb-app .rosb-view-button {
        flex: 1 1 auto;
        padding: 8px 9px;
    }

    .rosb-app .rosb-message {
        right: 10px;
        bottom: 10px;
        max-width: calc(100vw - 20px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rosb-app *,
    .rosb-app *::before,
    .rosb-app *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* v1.2.2 brand header and resilient theme-toggle presentation */
.rosb-app .rosb-icon,
.rosb-app .rosb-icon-tile {
    display: inline-flex;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    font-size: 30px;
    line-height: 1;
}
.rosb-app .rosb-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.rosb-app .rosb-brand > div:last-child { min-width: 0; }
.rosb-app .rosb-theme-toggle {
    min-height: 44px;
    padding: 11px 17px;
    font-weight: 700;
    white-space: normal;
}
.rosb-app .rosb-header [data-rosb="title"] { color: inherit; }
.rosb-app .rosb-header [data-rosb="subtitle"] { color: rgba(255,255,255,.9); }


/* v1.0.0: comprehensive dark-theme contrast and surface overrides.
   Configured light-theme colors are stored separately so they cannot override dark mode. */
.rosb-app.rosb-theme-dark,
.rosb-app[data-rosb-theme="dark"] {
    --rosb-bg: #101720;
    --rosb-surface: #182331;
    --rosb-surface-soft: #202e3d;
    --rosb-text: #edf3fa;
    --rosb-muted: #b4c0ce;
    --rosb-border: #3a4a5d;
    --rosb-shadow: 0 8px 26px rgba(0, 0, 0, .28);
    color: var(--rosb-text) !important;
    background: var(--rosb-bg) !important;
    border-color: var(--rosb-border) !important;
    color-scheme: dark;
}

.rosb-app.rosb-theme-dark .rosb-description,
.rosb-app[data-rosb-theme="dark"] .rosb-description,
.rosb-app.rosb-theme-dark .rosb-toolbar,
.rosb-app[data-rosb-theme="dark"] .rosb-toolbar,
.rosb-app.rosb-theme-dark .rosb-workspace-tabs,
.rosb-app[data-rosb-theme="dark"] .rosb-workspace-tabs,
.rosb-app.rosb-theme-dark .rosb-legend,
.rosb-app[data-rosb-theme="dark"] .rosb-legend,
.rosb-app.rosb-theme-dark .rosb-summary,
.rosb-app[data-rosb-theme="dark"] .rosb-summary,
.rosb-app.rosb-theme-dark .rosb-results-panel,
.rosb-app[data-rosb-theme="dark"] .rosb-results-panel,
.rosb-app.rosb-theme-dark .rosb-results-output,
.rosb-app[data-rosb-theme="dark"] .rosb-results-output,
.rosb-app.rosb-theme-dark .rosb-member-editor,
.rosb-app[data-rosb-theme="dark"] .rosb-member-editor,
.rosb-app.rosb-theme-dark .rosb-member-properties,
.rosb-app[data-rosb-theme="dark"] .rosb-member-properties,
.rosb-app.rosb-theme-dark .rosb-panel-heading,
.rosb-app[data-rosb-theme="dark"] .rosb-panel-heading,
.rosb-app.rosb-theme-dark .rosb-notice,
.rosb-app[data-rosb-theme="dark"] .rosb-notice,
.rosb-app.rosb-theme-dark .rosb-status,
.rosb-app[data-rosb-theme="dark"] .rosb-status,
.rosb-app.rosb-theme-dark .rosb-selection-message,
.rosb-app[data-rosb-theme="dark"] .rosb-selection-message {
    color: var(--rosb-text) !important;
    background-color: var(--rosb-surface-soft) !important;
    border-color: var(--rosb-border) !important;
}

.rosb-app.rosb-theme-dark .rosb-card,
.rosb-app[data-rosb-theme="dark"] .rosb-card,
.rosb-app.rosb-theme-dark .rosb-panel,
.rosb-app[data-rosb-theme="dark"] .rosb-panel,
.rosb-app.rosb-theme-dark .rosb-section,
.rosb-app[data-rosb-theme="dark"] .rosb-section,
.rosb-app.rosb-theme-dark .rosb-workspace-card,
.rosb-app[data-rosb-theme="dark"] .rosb-workspace-card,
.rosb-app.rosb-theme-dark .rosb-summary > div,
.rosb-app[data-rosb-theme="dark"] .rosb-summary > div,
.rosb-app.rosb-theme-dark .rosb-grid-item,
.rosb-app[data-rosb-theme="dark"] .rosb-grid-item,
.rosb-app.rosb-theme-dark .rosb-metric,
.rosb-app[data-rosb-theme="dark"] .rosb-metric,
.rosb-app.rosb-theme-dark .rosb-results-card,
.rosb-app[data-rosb-theme="dark"] .rosb-results-card {
    color: var(--rosb-text) !important;
    background: var(--rosb-surface) !important;
    border-color: var(--rosb-border) !important;
    box-shadow: var(--rosb-shadow);
}

.rosb-app.rosb-theme-dark h1,
.rosb-app[data-rosb-theme="dark"] h1,
.rosb-app.rosb-theme-dark h2,
.rosb-app[data-rosb-theme="dark"] h2,
.rosb-app.rosb-theme-dark h3,
.rosb-app[data-rosb-theme="dark"] h3,
.rosb-app.rosb-theme-dark h4,
.rosb-app[data-rosb-theme="dark"] h4,
.rosb-app.rosb-theme-dark p,
.rosb-app[data-rosb-theme="dark"] p,
.rosb-app.rosb-theme-dark label,
.rosb-app[data-rosb-theme="dark"] label,
.rosb-app.rosb-theme-dark li,
.rosb-app[data-rosb-theme="dark"] li,
.rosb-app.rosb-theme-dark td,
.rosb-app[data-rosb-theme="dark"] td,
.rosb-app.rosb-theme-dark th,
.rosb-app[data-rosb-theme="dark"] th,
.rosb-app.rosb-theme-dark .rosb-summary span,
.rosb-app[data-rosb-theme="dark"] .rosb-summary span,
.rosb-app.rosb-theme-dark .rosb-summary strong,
.rosb-app[data-rosb-theme="dark"] .rosb-summary strong,
.rosb-app.rosb-theme-dark .rosb-footer,
.rosb-app[data-rosb-theme="dark"] .rosb-footer,
.rosb-app.rosb-theme-dark .rosb-help,
.rosb-app[data-rosb-theme="dark"] .rosb-help,
.rosb-app.rosb-theme-dark .rosb-muted,
.rosb-app[data-rosb-theme="dark"] .rosb-muted {
    color: var(--rosb-text) !important;
}

.rosb-app.rosb-theme-dark .rosb-muted,
.rosb-app[data-rosb-theme="dark"] .rosb-muted,
.rosb-app.rosb-theme-dark .rosb-help,
.rosb-app[data-rosb-theme="dark"] .rosb-help,
.rosb-app.rosb-theme-dark .rosb-description,
.rosb-app[data-rosb-theme="dark"] .rosb-description {
    color: var(--rosb-muted) !important;
}

.rosb-app.rosb-theme-dark input:not([type="checkbox"]):not([type="radio"]),
.rosb-app[data-rosb-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
.rosb-app.rosb-theme-dark select,
.rosb-app[data-rosb-theme="dark"] select,
.rosb-app.rosb-theme-dark textarea,
.rosb-app[data-rosb-theme="dark"] textarea {
    color: var(--rosb-text) !important;
    background-color: #121b26 !important;
    border-color: var(--rosb-border) !important;
    box-shadow: none !important;
}

.rosb-app.rosb-theme-dark input::placeholder,
.rosb-app[data-rosb-theme="dark"] input::placeholder,
.rosb-app.rosb-theme-dark textarea::placeholder,
.rosb-app[data-rosb-theme="dark"] textarea::placeholder {
    color: var(--rosb-muted) !important;
    opacity: 1;
}

.rosb-app.rosb-theme-dark .rosb-canvas-wrap,
.rosb-app[data-rosb-theme="dark"] .rosb-canvas-wrap {
    background: #131d29 !important;
    border-color: var(--rosb-border) !important;
}

.rosb-app.rosb-theme-dark .rosb-header,
.rosb-app[data-rosb-theme="dark"] .rosb-header,
.rosb-app.rosb-theme-dark .rosb-header h1,
.rosb-app[data-rosb-theme="dark"] .rosb-header h1,
.rosb-app.rosb-theme-dark .rosb-header h2,
.rosb-app[data-rosb-theme="dark"] .rosb-header h2,
.rosb-app.rosb-theme-dark .rosb-header p,
.rosb-app[data-rosb-theme="dark"] .rosb-header p,
.rosb-app.rosb-theme-dark .rosb-header .rosb-icon,
.rosb-app[data-rosb-theme="dark"] .rosb-header .rosb-icon {
    color: #ffffff !important;
}

.rosb-app.rosb-theme-dark .rosb-theme-toggle,
.rosb-app[data-rosb-theme="dark"] .rosb-theme-toggle {
    color: #ffffff !important;
    background: rgba(8, 18, 29, .72) !important;
    border-color: rgba(255, 255, 255, .38) !important;
}

.rosb-app.rosb-theme-dark .rosb-theme-toggle:hover,
.rosb-app[data-rosb-theme="dark"] .rosb-theme-toggle:hover {
    background: rgba(8, 18, 29, .92) !important;
}

.rosb-app.rosb-theme-dark .rosb-footer a,
.rosb-app[data-rosb-theme="dark"] .rosb-footer a {
    color: #65cbd0 !important;
}


/* v1.2.0 engineering data controls */
.rosb-app .rosb-panel-inner { margin: 16px 0; padding: 16px; border: 1px solid var(--rosb-border, #d9e1ea); border-radius: 12px; background: var(--rosb-panel, #fff); color: var(--rosb-text, #202b38); }
.rosb-app .rosb-panel-inner h3 { margin: 0 0 12px; }
.rosb-app .rosb-engineering-note { font-size: 12px; line-height: 1.5; opacity: .82; margin: 10px 0; }
.rosb-app .rosb-data-row, .rosb-app .rosb-combo-row { display: grid; grid-template-columns: minmax(90px,1.3fr) minmax(85px,1fr) minmax(70px,.7fr) auto; gap: 7px; align-items: center; margin: 8px 0; }
.rosb-app .rosb-combo-row { grid-template-columns: minmax(100px,1.2fr) repeat(4,minmax(48px,.55fr)) auto; }
.rosb-app .rosb-data-row input, .rosb-app .rosb-data-row select, .rosb-app .rosb-combo-row input { min-width: 0; width: 100%; box-sizing: border-box; }
.rosb-app .rosb-combo-row label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; }
.rosb-app .rosb-small-button { padding: 5px 8px; font-size: 12px; }
.rosb-app .rosb-engineering-data .rosb-member-properties { margin-bottom: 12px; }
.rosb-app.rosb-theme-dark .rosb-panel-inner, .rosb-app[data-rosb-theme="dark"] .rosb-panel-inner { background: #182332 !important; color: #edf4fc !important; border-color: #3b4b60 !important; }
.rosb-app.rosb-theme-dark .rosb-panel-inner input, .rosb-app.rosb-theme-dark .rosb-panel-inner select, .rosb-app[data-rosb-theme="dark"] .rosb-panel-inner input, .rosb-app[data-rosb-theme="dark"] .rosb-panel-inner select { background: #101925 !important; color: #f4f7fb !important; border-color: #52647b !important; }
.rosb-app.rosb-theme-dark .rosb-engineering-note, .rosb-app[data-rosb-theme="dark"] .rosb-engineering-note { color: #c8d5e5 !important; }
@media(max-width:700px) { .rosb-app .rosb-data-row, .rosb-app .rosb-combo-row { grid-template-columns: 1fr 1fr; } }

/* v1.2.0 solver-result readability */
.rosb-results-output { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.rosb-analysis-status { overflow-wrap: anywhere; }