:root { --border-color: #d5d8dc; --text-muted: #5d6d7e; --tension-color: #e74c3c; --compression-color: #2e86c1; }
        .deep-dive { margin: 1.8rem 0; }
        .deep-dive p { text-align: justify; }
        .unit-note { font-size: 0.9rem; color: #6c757d; }
        .geometry-canvas { width: 100%; height: auto; background-color: #fafbfc; border: 1px solid #ddd; border-radius: 8px; margin-top: 1rem; display: block; cursor: crosshair; }
        .canvas-container { text-align: center; margin-top: 1rem; }
        .legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; margin: 0.5rem 0; font-size: 0.85rem; }
        .legend-item { display: flex; align-items: center; gap: 0.3rem; }
        .legend-color { width: 16px; height: 16px; border-radius: 3px; }
        .legend-color.red { background-color: #e74c3c; }
        .legend-color.blue { background-color: #2e86c1; }
        .legend-color.gray { background-color: #7f8c8d; }
        .legend-color.green { background-color: #27ae60; }
        .legend-color.orange { background-color: #f39c12; }
        .member-force-table { max-height: 280px; overflow-y: auto; font-size: 0.85rem; }
        .member-force-table table { width: 100%; border-collapse: collapse; }
        .member-force-table th, .member-force-table td { padding: 0.3rem 0.5rem; border: 1px solid #ddd; text-align: center; }
        .member-force-table th { background-color: var(--light-gray); position: sticky; top: 0; z-index: 2; }
        .force-tension { color: #e74c3c; font-weight: 600; }
        .force-compression { color: #2e86c1; font-weight: 600; }
        .force-zero { color: #7f8c8d; }
        .param-group { background-color: #f8f9fa; padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 0.75rem; }
        .param-group label { font-weight: 500; font-size: 0.9rem; }
        .result-card { background: white; border-radius: 8px; padding: 1rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); border: 1px solid #eee; margin-bottom: 1rem; }
        .result-card .label { font-size: 0.8rem; text-transform: uppercase; color: #7f8c8d; letter-spacing: 0.5px; }
        .result-card .value { font-size: 1.3rem; font-weight: 600; font-family: 'Courier New', monospace; }
        .truss-type-badge { display: inline-block; padding: 0.2rem 0.8rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; background-color: var(--light-gray); color: var(--primary-color); }
        .reaction-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem; }
        .reaction-item { background: #f8f9fa; padding: 0.4rem 0.8rem; border-radius: 4px; text-align: center; font-size: 0.9rem; }
        .reaction-item .label { font-size: 0.7rem; color: #7f8c8d; text-transform: uppercase; }
        .reaction-item .value { font-weight: 600; font-family: 'Courier New', monospace; }
        @media (max-width: 768px) {
            .result-card .value { font-size: 1rem; }
            .member-force-table { font-size: 0.75rem; }
            .member-force-table th, .member-force-table td { padding: 0.2rem 0.3rem; }
        }
        .tooltip-icon { color: var(--primary-color); cursor: help; margin-left: 4px; font-size: 0.85rem; }
        .section-divider { border-top: 2px solid #eaf2f8; margin: 2rem 0; }
        .panel-selector { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
        .panel-selector .panel-selector .btn-outline-secondary.active { background-color: var(--primary-color); color: white; border-color: var(--primary-color); }
        .load-input-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
        .load-input-row input { width: 80px; }
        .type-note { font-size: 0.8rem; color: #6c757d; margin-left: 4px; }