.device-container{padding:2rem;width:1200px;min-width:1200px;max-width:none;margin:0 auto}.device-section{margin-bottom:2rem;display:flex;align-items:center;justify-content:center;gap:32px}.device-section-title-wrapper{flex:0 0 140px;display:flex;align-items:center;justify-content:flex-start}.device-status-title-wrapper{flex-direction:column;align-items:center;gap:10px}.device-mode-title-wrapper{flex-direction:column;justify-content:space-between;align-items:flex-start;height:120px}.device-mode-title-wrapper .eq-switch span{font-size:1.4rem;font-weight:400;color:var(--text-primary)}.device-section-title{font-size:1.4rem;color:var(--text-primary)}.device-section-main{flex:1}#devicePage .device-container{min-height:calc(100vh - 120px);display:flex;align-items:center;justify-content:center}#devicePage .device-status-section{width:100%}#devicePage .device-status-section .device-section-main{display:flex;flex-direction:column;align-items:center}.device-status-info{text-align:center}.device-status-info h3{font-size:1.2rem;color:var(--text-primary);margin-bottom:.5rem}.device-status-info p{font-size:1rem;color:var(--text-secondary)}.device-sample-format{margin-top:.3rem;font-size:.95rem;color:var(--text-secondary)}.device-control-row{display:flex;justify-content:center;gap:24px;margin-top:1.5rem;flex-wrap:wrap}.device-control-card{background:linear-gradient(180deg,#ffffff06,#fff0),var(--card-bg);border-radius:14px;padding:1.2rem 1.6rem;min-width:260px;border:1px solid #26313d;box-shadow:0 18px 40px #00000038,inset 0 1px #ffffff08;display:flex;flex-direction:column;align-items:center;box-sizing:border-box}.page-content:not(#homePage){background:radial-gradient(1200px 600px at 50% -10%,rgba(218,0,58,.06),transparent 60%),#0d1117;color:var(--text-primary)}.volume-control{width:312px}.led-control{width:260px}.device-control-title{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:.8rem}.led-control-row{display:flex;align-items:center;justify-content:center;gap:16px}.led-preview{width:22px;height:22px;border-radius:50%;border:2px solid var(--border-color);background-color:transparent}.led-status-text{margin-top:.7rem;font-size:.85rem;color:var(--text-secondary);min-height:1rem}.led-color-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:.8rem}.led-color-option{width:18px;height:18px;border-radius:50%;cursor:pointer;border:2px solid transparent}.led-color-option[data-color=red]{background-color:#ff4d4f}.led-color-option[data-color=green]{background-color:#52c41a}.led-color-option[data-color=yellow]{background-color:#fadb14}.led-color-option[data-color=cyan]{background-color:#13c2c2}.led-color-option[data-color=purple]{background-color:#722ed1}.led-color-option.active{border-color:#333}.device-volume-slider{touch-action:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:260px;height:6px;background:#80808033;border-radius:5px;border:1px solid #888888;position:relative;outline:none}.device-volume-slider:before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:var(--slider-fill-width, 0%);background:#d2b16f;border-radius:5px;pointer-events:none}.device-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;border:2px solid #d2b16f;background:#fff;cursor:pointer;position:relative;z-index:1}.device-volume-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:2px solid #d2b16f;background:#fff;cursor:pointer;position:relative;z-index:1}.device-volume-slider::-moz-range-track{background:transparent}.device-volume-input{width:110px;height:32px;padding:4px 28px 4px 6px;border:1px solid #fcfcfc;border-radius:3px;text-align:center;font-size:13px}.volume-slider-row{margin-bottom:.8rem}.mode-toggle{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.mode-button{padding:6px 14px;border-radius:4px;border:1px solid var(--border-color);background:var(--card-bg);color:var(--text-primary);font-size:13px;cursor:pointer;transition:all .2s ease}.mode-button.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.device-filter-select{width:260px;height:32px;padding:4px 10px;border-radius:4px;border:1px solid var(--border-color);background:var(--card-bg);color:var(--text-primary);font-size:13px;box-sizing:border-box}.preset-grid-container{display:flex;justify-content:center;padding:2rem;border-radius:12px;background:var(--card-bg)}.preset-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:1.5rem;width:100%;max-width:1000px;padding:1rem}.preset-button{height:3.5rem;border:2px solid var(--border-color);border-radius:8px;background:var(--card-bg);color:var(--text-primary);font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.preset-button:hover:not(:disabled){border-color:var(--primary-color);color:var(--primary-color);transform:translateY(-2px);box-shadow:0 4px 12px #dc267f33}.preset-button:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 6px #dc267f33}.preset-button.active{background:var(--primary-color)!important;background-color:var(--primary-color)!important;color:#fff!important;border-color:var(--primary-color)!important;box-shadow:0 2px 8px #dc267f66!important}.preset-button.active:hover{background:var(--primary-color)!important;background-color:var(--primary-color)!important;color:#fff!important;border-color:var(--primary-color)!important;transform:none!important}.preset-button.preset-empty{border:2px dashed var(--border-color);color:var(--text-secondary);cursor:not-allowed;opacity:.3;background:transparent;box-shadow:none}.device-disconnected .preset-button:not(.preset-empty){border-color:var(--border-color);color:var(--text-secondary);cursor:pointer}.device-disconnected .preset-button:not(.preset-empty):hover{border-color:var(--primary-color);color:var(--primary-color);transform:translateY(-2px);box-shadow:0 4px 12px #dc267f33}.device-connected .preset-button:not(.preset-empty){border-color:var(--border-color);color:var(--text-primary);cursor:pointer}.device-connected .preset-button:not(.preset-empty):hover{border-color:var(--primary-color);color:var(--primary-color);transform:translateY(-2px);box-shadow:0 4px 12px #dc267f33}@media (max-width: 768px){.preset-grid{max-width:600px;gap:1rem;padding:.5rem}.preset-button{height:3rem;font-size:.9rem}.preset-grid-container{padding:1.5rem}}@media (max-width: 480px){.preset-grid{max-width:400px;gap:.8rem}.preset-button{height:2.5rem;font-size:.8rem}.preset-grid-container{padding:1rem}}