/* --- START OF FILE styles.css --- */
:root{--primary-color:#2563eb;--primary-hover:#1d4ed8;--bg-color:#f3f4f6;--card-bg:#ffffff;--text-color:#1f2937;--border-color:#e5e7eb;--shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg-color);color:var(--text-color);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;padding:20px;display:flex;flex-direction:column;align-items:center}
header{width:100%;max-width:1000px;background:var(--primary-color);color:#fff;padding:1.5rem;border-radius:12px;box-shadow:var(--shadow);display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
h1{margin:0;font-size:1.5rem;font-weight:600}
.settings{display:flex;align-items:center;gap:15px}
.settings label{font-size:.9rem}
.settings input[type=number]{width:50px;padding:5px;border:none;border-radius:4px;text-align:center}
.settings select{padding:5px;border:1px solid var(--border-color);border-radius:4px;background:#fff}
.container{width:100%;max-width:1000px;display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.card{background:var(--card-bg);padding:20px;border-radius:12px;box-shadow:var(--shadow);border:1px solid var(--border-color)}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;border-bottom:1px solid var(--border-color);padding-bottom:10px}
.card-title{font-size:1.2rem;font-weight:600;color:var(--primary-color)}
.dimension-controls{display:flex;gap:10px;align-items:center}
.dimension-controls input{width:40px;padding:5px;border:1px solid var(--border-color);border-radius:4px;text-align:center}
.dimension-controls span{font-size:.9rem;color:#666}
.matrix-grid{display:grid;gap:8px;margin-top:10px;justify-content:start;overflow-x:auto;padding-bottom:5px}
.matrix-cell{width:60px;height:40px;text-align:center;border:1px solid var(--border-color);border-radius:6px;font-size:1rem;transition:border-color .2s}
.matrix-cell:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px rgba(37,99,235,.2)}
.controls-area{width:100%;max-width:1000px;background:var(--card-bg);padding:20px;border-radius:12px;box-shadow:var(--shadow);display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;align-items:center}
.controls-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:8px;width:100%}
.btn{padding:8px 16px;border:1px solid var(--primary-color);background:#fff;color:var(--primary-color);border-radius:6px;cursor:pointer;font-weight:500;transition:all .2s;font-size:.9rem}
.btn:hover{background:#eff6ff}
.btn.primary{background:var(--primary-color);color:#fff}
.btn.primary:hover{background:var(--primary-hover)}
.btn.danger{border-color:#dc2626;color:#dc2626}
.btn.danger:hover{background:#fef2f2}
.power-input{width:60px;padding:8px;border:1px solid var(--border-color);border-radius:6px;margin-right:5px}
.spacer{flex-grow:1}

/* 结果与步骤区域优化 */
.result-section{width:100%;max-width:1000px;display:flex;flex-direction:column;gap:20px}
.output-box{min-height:80px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:1.1rem;overflow-x:auto;padding: 15px;}
.step-box{justify-content:flex-start;align-items:flex-start;font-size:1rem;line-height:1.8;width: 100%; background: #fafafa; border-radius: 8px;}

/* 单个步骤卡片样式 */
.step-item {
    width: 100%;
    margin-bottom: 12px;
    padding: 15px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    overflow-x: auto;
}
.step-desc {
    color: #374151;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 1rem;
    border-left: 4px solid var(--primary-color);
    padding-left: 10px;
}
/* 双重结果显示 */
.result-dual-container {
    display: flex; flex-direction: column; gap: 15px; width: 100%;
}
.result-group {
    display: flex; flex-direction: column; align-items: center; 
    border-bottom: 1px dashed #eee; padding-bottom: 10px;
}
.result-group:last-child { border-bottom: none; }
.result-label { font-size: 0.9rem; color: var(--primary-color); margin-bottom: 5px; font-weight: 600;}
.result-exact { font-size: 1.2rem; margin-bottom: 2px; }
.result-approx { font-size: 0.85rem; color: #666; display: flex; align-items: center; gap: 5px;}

.muted{color:#9ca3af}
.status{margin-left:auto;color:#dc2626}
@media(max-width:768px){.container{grid-template-columns:1fr}}