*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background:linear-gradient(135deg,#f5f7fa 0%,#e4e9f2 100%);min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app-container{max-width:1600px;margin:0 auto;padding:20px}.header{background:linear-gradient(135deg,#2c3e50 0%,#3498db 100%);border-radius:16px;margin-bottom:24px;padding:24px 32px;box-shadow:0 10px 40px #3498db4d}.header-content{justify-content:space-between;align-items:center;display:flex}.logo-section{align-items:center;gap:16px;display:flex}.logo-icon{color:#fff;justify-content:center;align-items:center;width:56px;height:56px;animation:10s linear infinite rotate;display:flex}.logo-icon svg{width:48px;height:48px}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.logo-text h1{color:#fff;margin-bottom:4px;font-size:24px;font-weight:600}.logo-text p{color:#fffc;font-size:13px}.model-info{gap:12px;display:flex}.model-badge,.spec-badge{color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border-radius:20px;padding:8px 16px;font-size:13px;font-weight:500}.model-select{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border:2px solid #ffffff4d;border-radius:20px;outline:none;padding:8px 16px;font-size:14px;font-weight:600;transition:all .3s}.model-select:hover{background:#ffffff4d;border-color:#ffffff80}.model-select option{color:#fff;background:#2c3e50}.alarm-bar{color:#fff;background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%);border-radius:12px;flex-wrap:wrap;gap:20px;margin-bottom:16px;padding:12px 24px;animation:1s infinite alarm-pulse;display:flex}@keyframes alarm-pulse{0%,to{opacity:1}50%{opacity:.85}}.alarm-item{align-items:center;gap:8px;font-size:14px;font-weight:600;display:flex}.alarm-icon{width:20px;height:20px}.control-panel{background:#fff;border-radius:16px;margin-bottom:24px;padding:24px;box-shadow:0 4px 20px #00000014}.control-grid{grid-template-columns:repeat(4,1fr);gap:24px;display:grid}.control-item label{color:#666;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;font-size:13px;font-weight:600;display:block}.slider-container{align-items:center;gap:16px;display:flex}.slider-container input[type=range]{-webkit-appearance:none;background:linear-gradient(90deg,#3498db 0%,#9b59b6 100%);border-radius:4px;outline:none;flex:1;height:8px}.slider-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border:3px solid #3498db;border-radius:50%;width:24px;height:24px;transition:transform .2s;box-shadow:0 2px 10px #3498db4d}.slider-container input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}.slider-value{text-align:center;color:#3498db;min-width:80px;font-size:18px;font-weight:700}.slider-marks{color:#999;justify-content:space-between;margin-top:8px;font-size:11px;display:flex}.mode-buttons{flex-wrap:wrap;gap:8px;display:flex}.mode-btn{cursor:pointer;background:#fff;border:2px solid #e0e0e0;border-radius:8px;padding:10px 16px;font-size:13px;font-weight:500;transition:all .2s}.mode-btn:hover{color:#3498db;border-color:#3498db}.mode-btn.active{color:#fff;background:#3498db;border-color:#3498db}.action-buttons{gap:12px;display:flex}.control-hint{color:#999;padding:8px 0;font-size:12px}.floating-controls{z-index:1000;flex-direction:column;gap:16px;display:flex;position:fixed;bottom:30px;right:30px}.floating-btn{cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;transition:all .3s;display:flex;box-shadow:0 6px 20px #0003}.floating-btn.start{color:#fff;background:linear-gradient(135deg,#27ae60 0%,#2ecc71 100%);box-shadow:0 6px 25px #27ae6066}.floating-btn.stop{color:#fff;background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%);animation:1.5s infinite pulse-stop;box-shadow:0 6px 25px #e74c3c66}@keyframes pulse-stop{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.floating-btn.reverse{color:#fff;background:linear-gradient(135deg,#9b59b6 0%,#8e44ad 100%);box-shadow:0 6px 25px #9b59b666}.floating-btn.reverse.active{background:linear-gradient(135deg,#e67e22 0%,#d35400 100%);animation:2s linear infinite rotate-reverse;box-shadow:0 6px 25px #e67e2266}@keyframes rotate-reverse{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.floating-btn:hover{transform:scale(1.1);box-shadow:0 8px 30px #0000004d}.floating-btn:active{transform:scale(.95)}.floating-icon{width:28px;height:28px}.action-btn{cursor:pointer;border:none;border-radius:10px;flex:1;justify-content:center;align-items:center;gap:8px;padding:14px 20px;font-size:14px;font-weight:600;transition:all .3s;display:flex}.action-btn.start{color:#fff;background:linear-gradient(135deg,#27ae60 0%,#2ecc71 100%);box-shadow:0 4px 15px #27ae604d}.action-btn.stop{color:#fff;background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%);box-shadow:0 4px 15px #e74c3c4d}.action-btn.reverse{color:#fff;background:linear-gradient(135deg,#9b59b6 0%,#8e44ad 100%);box-shadow:0 4px 15px #9b59b64d}.action-btn:hover{transform:translateY(-2px)}.btn-icon-svg{width:18px;height:18px}.stats-panel{grid-template-columns:repeat(7,1fr);gap:16px;margin-bottom:24px;display:grid}.stat-card{background:#fff;border-radius:12px;min-height:90px;padding:20px;position:relative;overflow:hidden;box-shadow:0 4px 15px #0000000f}.stat-icon{justify-content:center;align-items:center;margin-bottom:12px;display:flex}.stat-icon svg{stroke-width:2px;width:28px;height:28px}.stat-content{z-index:1;position:relative}.stat-label{color:#888;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:12px;display:block}.stat-value{color:#2c3e50;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:100px;font-size:24px;font-weight:700;display:inline-block}.stat-value small{color:#888;font-size:12px;font-weight:500}.stat-indicator{background:linear-gradient(90deg,#3498db,#9b59b6);height:4px;transition:width .3s;position:absolute;bottom:0;left:0}.stat-indicator.power{background:linear-gradient(90deg,#e67e22,#f39c12)}.stat-indicator.torque{background:linear-gradient(90deg,#e74c3c,#c0392b)}.stat-indicator.noise{background:linear-gradient(90deg,#27ae60,#2ecc71)}.stat-indicator.vibration{background:linear-gradient(90deg,#9b59b6,#8e44ad)}.stat-indicator.time{background:linear-gradient(90deg,#1abc9c,#16a085)}.stat-indicator.temp{background:linear-gradient(90deg,#f39c12,#e74c3c)}.temp-icon{color:#e67e22}.stat-card.alarm-active{border:2px solid #e74c3c;animation:.8s infinite alarm-card-pulse}@keyframes alarm-card-pulse{0%,to{box-shadow:0 4px 15px #e74c3c4d}50%{box-shadow:0 4px 25px #e74c3c99}}.charts-section{margin-bottom:24px}.charts-grid{grid-template-columns:repeat(2,1fr);gap:24px;display:grid}.chart-card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 4px 20px #00000014}.chart-card.full-width{grid-column:span 2}.chart-header{border-bottom:1px solid #f0f0f0;margin-bottom:16px;padding-bottom:12px}.chart-header h3{color:#2c3e50;margin-bottom:4px;font-size:16px;font-weight:600}.chart-subtitle{color:#888;font-size:12px}.chart-container{width:100%;height:320px}.chart-container.large{height:400px}.footer{text-align:center;background:#2c3e50;border-radius:12px;padding:20px 32px}.footer-content p{color:#ffffffe6;margin-bottom:4px;font-size:13px}.footer-specs{color:#fff9!important;font-size:12px!important}@media (width<=1200px){.control-grid{grid-template-columns:repeat(2,1fr)}.stats-panel{grid-template-columns:repeat(4,1fr)}}@media (width<=768px){.header-content{text-align:center;flex-direction:column;gap:16px}.control-grid{grid-template-columns:1fr}.stats-panel{grid-template-columns:repeat(2,1fr)}.charts-grid{grid-template-columns:1fr}.chart-card.full-width{grid-column:span 1}}