.main-tuner,.sidebar-controls{background:#fff;border-radius:12px}.tuner-container{padding:30px;margin:30px 0}.tuner-layout{display:grid;grid-template-columns:1fr 380px;gap:30px;align-items:start}.main-tuner{padding:40px;box-shadow:0 4px 20px rgba(0,0,0,.1)}.sidebar-controls{position:sticky;top:80px;padding:25px;box-shadow:0 4px 20px rgba(0,0,0,.15);border:2px solid #e0e0e0;max-height:calc(100vh - 100px);overflow-y:auto}.tuner-display{text-align:center;margin-bottom:30px}.current-note{font-size:5rem;font-weight:700;color:#337ab7;margin:20px 0;min-height:100px;display:flex;align-items:center;justify-content:center}.frequency-display{font-size:1.5rem;color:#666;margin-bottom:10px}.cents-display{font-size:2rem;font-weight:600;margin:10px 0;min-height:50px}.cents-display.flat{color:#d9534f}.cents-display.sharp{color:#f0ad4e}.cents-display.tuned{color:#5cb85c}.tuner-needle-container{position:relative;width:100%;height:150px;margin:30px 0;background:linear-gradient(to bottom,#f8f9fa 0,#e9ecef 100%);border-radius:10px;overflow:hidden;border:2px solid #dee2e6}.tuner-scale{position:absolute;top:20px;left:0;right:0;height:40px;display:flex;justify-content:space-between;padding:0 20px}.scale-mark{width:2px;height:20px;background:#999;position:relative}.scale-label,.tuner-needle,.tuner-needle::before{position:absolute;left:50%}.scale-mark.major{height:30px;background:#666}.scale-mark.center{height:40px;background:#5cb85c;width:3px}.scale-label{top:35px;transform:translateX(-50%);font-size:.8rem;color:#666}.tuner-needle{bottom:0;width:4px;height:80px;background:linear-gradient(to top,#337ab7 0,#5bc0de 100%);transform-origin:bottom center;transform:translateX(-50%) rotate(0);transition:transform .1s ease-out;border-radius:2px 2px 0 0;box-shadow:0 0 10px rgba(51,122,183,.5)}.preset-btn,.string-btn,.tuner-btn{cursor:pointer;transition:.3s}.tuner-needle::before{content:'';bottom:-10px;transform:translateX(-50%);width:16px;height:16px;background:#337ab7;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.3)}.string-selector{display:flex;gap:10px;justify-content:center;margin:30px 0;flex-wrap:wrap}.string-btn{padding:15px 25px;font-size:1.2rem;font-weight:700;border:2px solid #337ab7;background:#fff;color:#337ab7;border-radius:8px;min-width:80px}.string-btn:hover{background:#337ab7;color:#fff;transform:translateY(-2px);box-shadow:0 4px 10px rgba(51,122,183,.3)}.preset-btn.active,.preset-btn:hover,.string-btn.active{background:#337ab7;color:#fff}.tuner-controls{display:flex;gap:15px;justify-content:center;margin:30px 0;flex-wrap:wrap}.tuner-btn{padding:15px 30px;font-size:1.1rem;font-weight:600;border:none;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.2)}.tuner-btn-primary{background:linear-gradient(135deg,#5cb85c 0,#4cae4c 100%);color:#fff}.tuner-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 15px rgba(92,184,92,.4)}.tuner-btn-secondary{background:linear-gradient(135deg,#337ab7 0,#286090 100%);color:#fff}.tuner-btn-secondary:hover{transform:translateY(-2px);box-shadow:0 6px 15px rgba(51,122,183,.4)}.tuner-btn-danger{background:linear-gradient(135deg,#d9534f 0,#c9302c 100%);color:#fff;display:none}.tuner-btn-danger:hover{transform:translateY(-2px);box-shadow:0 6px 15px rgba(217,83,79,.4)}.tuner-status{text-align:center;padding:15px;border-radius:8px;margin:20px 0;font-weight:600}.status-waiting{background:#d9edf7;color:#31708f;border:1px solid #bce8f1}.status-listening{background:#dff0d8;color:#3c763d;border:1px solid #d6e9c6}.status-error{background:#f2dede;color:#a94442;border:1px solid #ebccd1}.sidebar-title{font-size:1.3em;font-weight:700;color:#337ab7;margin-bottom:20px;padding-bottom:15px;border-bottom:3px solid #337ab7}.preset-section{margin-bottom:25px;padding-bottom:25px;border-bottom:1px solid #e0e0e0}.preset-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.preset-title{font-weight:700;color:#337ab7;margin-bottom:15px;font-size:1em;display:flex;align-items:center;gap:8px}.preset-btn{width:100%;padding:12px;margin-bottom:8px;background:#fff;border:2px solid #337ab7;color:#337ab7;border-radius:6px;font-weight:600;text-align:left}.preset-notes{font-size:.85em;color:#666;margin-left:10px}.tuner-info{padding:20px;border-radius:8px;margin-top:30px}.tuner-info h3{color:#337ab7;margin-top:0}.auto-tune-indicator{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;background:#dff0d8;border:1px solid #d6e9c6;border-radius:20px;font-size:.9rem;color:#3c763d;margin-bottom:15px}.auto-tune-indicator .pulse{width:10px;height:10px;background:#5cb85c;border-radius:50%;animation:1.5s infinite pulse}@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}@media (max-width:992px){.tuner-layout{grid-template-columns:1fr}.sidebar-controls{position:static;max-height:none;margin-top:30px}}@media (max-width:768px){.main-tuner{padding:20px}.current-note{font-size:3.5rem;min-height:80px}.string-btn,.tuner-btn{padding:12px 20px;font-size:1rem}.string-btn{min-width:60px}}