body,html{margin:0;padding:0;width:100%;height:100%;overflow:hidden;font-family:sans-serif;background-color:#1e272e;color:#fff}#app{display:flex;flex-direction:column;height:100%;position:relative}#canvas-container{flex:1.2;min-height:45vh;background:#2c3e50;position:relative;touch-action:none}#controls{padding:15px;background:#34495e;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:8px;padding-bottom:80px}h2{margin:0 0 10px 0;font-size:1.2rem;text-align:center;border-bottom:1px solid #7f8c8d;padding-bottom:5px}#errorBox{background:#c0392b;color:#fff;padding:10px;border-radius:6px;font-size:0.95rem;font-weight:bold;display:none;border:2px solid #e74c3c;margin-bottom:5px}.calc-outputs{background:#273c75;padding:10px;border-radius:6px;margin-bottom:5px;border:1px solid #192a56}.calc-outputs div{display:flex;justify-content:space-between;font-size:0.95rem;margin-bottom:5px;font-weight:bold}.calc-outputs div:last-child{margin-bottom:0}.calc-outputs span{color:#fbc531}label{display:flex;justify-content:space-between;font-size:1rem;align-items:center}input{width:110px;padding:8px;border:1px solid #7f8c8d;border-radius:4px;background:#ecf0f1;color:#2c3e50;font-size:1rem;text-align:center;cursor:pointer}input:focus{outline:none;border-color:#3498db;box-shadow:0 0 5px rgba(52,152,219,0.5)}.btn-group{display:flex;gap:10px;margin-top:10px}button#updateBtn,button#unitToggle{flex:1;padding:15px;color:white;border:none;border-radius:6px;font-size:1.05rem;font-weight:bold;cursor:pointer}button#updateBtn{background:#3498db}button#updateBtn:active{background:#2980b9}button#unitToggle{background:#9b59b6}button#unitToggle:active{background:#8e44ad}.dim-label{color:#fff;background:rgba(52,152,219,0.9);padding:3px 6px;border-radius:4px;font-size:12px;font-weight:bold;pointer-events:none;border:1px solid #2980b9;white-space:nowrap}.error-label{background:rgba(231,76,60,0.95);border:2px solid #ff7979;animation:pulse 1s infinite alternate}.red-label{background:rgba(231,76,60,0.9);border:1px solid #c0392b}@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.08)}}#keyboard{position:absolute;top:0;left:0;width:100%;background:#1e272e;padding:8px;box-sizing:border-box;display:none;grid-template-columns:repeat(4,1fr);gap:6px;z-index:2000;box-shadow:0 5px 15px rgba(0,0,0,0.5)}.kbtn{padding:12px 0;font-size:1.4rem;font-weight:bold;background:#34495e;color:#fff;border:1px solid #7f8c8d;border-radius:6px;cursor:pointer}.kbtn:active{background:#2980b9}.k-wide{grid-column:span 2}.k-clear{background:#c0392b;border-color:#e74c3c}.k-clear:active{background:#e74c3c}.k-done{background:#27ae60;border-color:#2ecc71}.k-done:active{background:#2ecc71}.disabled{opacity:0.2;pointer-events:none}