/* ============================================================
   结构力学可视化页专属样式
   来源：原 learn/structure_demo.php 内联 <style>，2026-08-11 外置为可缓存文件
   ============================================================ */
.demo-wrap{background:var(--white);box-shadow:var(--shadow);overflow:hidden;margin-bottom:var(--module-gap)}
.struct-tabs{display:flex;background:#f0f4ff;border-bottom:2px solid #e0e8ff;overflow-x:auto;-webkit-overflow-scrolling:touch}
.struct-tab{flex:1;min-width:90px;padding:12px 6px;text-align:center;cursor:pointer;font-size:.85rem;font-weight:600;color:#666;border:none;background:none;border-bottom:3px solid transparent;transition:all .2s;white-space:nowrap}
.struct-tab:hover{color:var(--primary);background:#e8eeff}
.struct-tab.active{color:var(--primary);border-bottom-color:var(--primary);background:var(--white)}
.struct-tab i{display:block;font-size:1.2rem;margin-bottom:3px}
.struct-panel{display:none;padding:20px}
.struct-panel.active{display:block}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.two-col{grid-template-columns:1fr}}

/* 左侧参数 */
.param-card{background:#f8faff;padding:16px}
.param-card h3{font-size:.95rem;color:var(--primary);margin-bottom:12px;padding-bottom:7px;border-bottom:1px solid #dde6ff}
.param-row{display:flex;align-items:center;margin-bottom:10px;gap:8px}
.param-row label{font-size:.82rem;color:#555;width:140px;flex-shrink:0}
.param-row input[type=range]{flex:1;accent-color:var(--primary);cursor:pointer}
.param-val{font-weight:700;color:var(--primary);min-width:60px;text-align:right;font-size:.85rem}

/* 应力仪表 */
.stress-bar-wrap{margin:12px 0 6px;background:#f0f4ff;padding:10px 12px}
.stress-bar-label{display:flex;justify-content:space-between;font-size:.8rem;color:#555;margin-bottom:5px}
.stress-bar-track{height:14px;background:#e8ecf5;overflow:hidden;position:relative}
.stress-bar-fill{height:100%;transition:width .12s, background .12s;min-width:2px}
.stress-state{margin-top:6px;font-size:.82rem;font-weight:600;text-align:center}

/* 结果数字 */
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.rnum{background:var(--white);padding:8px 10px;text-align:center}
.rnum .rl{font-size:.72rem;color:#888}
.rnum .rv{font-size:1.05rem;font-weight:700;color:#c0392b;margin-top:1px}

/* 右侧Canvas */
.canvas-card{background:var(--white);padding:12px}
.canvas-card h3{font-size:.9rem;color:#444;margin-bottom:8px}
.canvas-wrap{background:#fafbff;overflow:hidden}
canvas{display:block;width:100%;height:auto}

/* 动画按钮 */
.anim-ctrl{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.anim-btn{flex:1;min-width:70px;padding:7px 4px;border:1.5px solid var(--primary);background:var(--white);color:var(--primary);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .18s}
.anim-btn:hover,.anim-btn.on{background:var(--primary);color:var(--white)}
.anim-btn.danger{border-color:var(--danger);color:var(--danger)}
.anim-btn.danger:hover,.anim-btn.danger.on{background:var(--danger);color:var(--white);border-color:var(--danger)}

.desc-box{background:var(--primary-light);border-left:4px solid var(--primary);padding:12px 14px;margin-top:12px;font-size:.82rem;color:#444;line-height:1.7}
.desc-box b{color:var(--primary)}