.ui-panel{width:280px;height:100vh;background:linear-gradient(180deg,#0a0a14,#0f0f1a);border-right:1px solid rgba(255,255,255,.08);padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:20px;flex-shrink:0;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,system-ui,sans-serif;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);position:relative}.ui-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#6366f108,#a855f705);pointer-events:none}.ui-header{padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.06);position:relative;z-index:1}.ui-title{font-size:18px;font-weight:600;color:#fff;margin-bottom:4px;letter-spacing:-.02em;background:linear-gradient(90deg,#fff,#e2e8f0);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.title-icon{display:none}.ui-subtitle{font-size:12px;color:#ffffff80;line-height:1.3;font-weight:400;letter-spacing:.01em}.control-section{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}.section-title{font-size:12px;font-weight:600;color:#ffffffb3;margin-bottom:8px;letter-spacing:.05em;text-transform:uppercase}.button-group{display:flex;flex-direction:column;gap:8px}.control-btn{padding:10px 14px;border-radius:6px;font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid rgba(255,255,255,.1);cursor:pointer;position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden}.control-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transform:translate(-100%);transition:transform .6s ease}.control-btn:hover:before{transform:translate(100%)}.control-btn:hover{transform:translateY(-1px);border-color:#fff3}.control-btn:active{transform:translateY(0)}.control-btn.primary{background:linear-gradient(135deg,#6366f1e6,#4f46e5e6);color:#fff;border-color:#6366f14d;box-shadow:0 2px 8px #6366f133}.control-btn.primary:hover{background:linear-gradient(135deg,#6366f1,#4f46e5);box-shadow:0 4px 16px #6366f14d}.control-btn.primary.running{background:linear-gradient(135deg,#ef4444e6,#dc2626e6);border-color:#ef44444d;box-shadow:0 2px 8px #ef444433}.control-btn.primary.running:hover{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 16px #ef44444d}.control-btn.secondary{background:linear-gradient(135deg,#22c55ee6,#15803de6);color:#fff;border-color:#22c55e4d;box-shadow:0 2px 8px #22c55e33}.control-btn.secondary:hover{background:linear-gradient(135deg,#22c55e,#15803d);box-shadow:0 4px 16px #22c55e4d}.control-btn.secondary:disabled{background:#37415180;color:#ffffff4d;border-color:#4b55634d;cursor:not-allowed;transform:none;box-shadow:none}.control-btn.secondary:disabled:before{display:none}.control-btn.danger{background:linear-gradient(135deg,#fb923ce6,#f97316e6);color:#fff;border-color:#fb923c4d;box-shadow:0 2px 8px #fb923c33}.control-btn.danger:hover{background:linear-gradient(135deg,#fb923c,#f97316);box-shadow:0 4px 16px #fb923c4d}.btn-icon{display:none}.volume-control{display:flex;flex-direction:column;gap:10px}.volume-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:500;color:#ffffffb3}.volume-value{font-weight:600;color:#6366f1;font-variant-numeric:tabular-nums;font-size:11px}.volume-slider{width:100%;height:3px;border-radius:2px;background:#ffffff1a;outline:none;appearance:none;-webkit-appearance:none;cursor:pointer;position:relative}.volume-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#4f46e5);cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px #6366f14d}.volume-slider::-webkit-slider-thumb:hover{background:linear-gradient(135deg,#4f46e5,#4338ca);transform:scale(1.1);box-shadow:0 4px 12px #6366f166}.status-section,.info-section{background:linear-gradient(135deg,#ffffff08,#ffffff03);padding:14px;border-radius:8px;border:1px solid rgba(255,255,255,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;z-index:1}.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.status-item{display:flex;flex-direction:column;gap:2px}.status-label{font-size:10px;color:#ffffff80;font-weight:500;text-transform:uppercase;letter-spacing:.08em}.status-value{font-size:14px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}.status-value.running{color:#22c55e}.status-value.stopped{color:#fff9}.info-list{list-style:none;font-size:12px;color:#fff9;line-height:1.4;margin:0;padding:0}.info-list li{position:relative;padding-left:12px;margin-bottom:6px}.info-list li:before{content:"·";position:absolute;left:0;color:#ffffff4d;font-weight:700;font-size:14px}.ui-panel::-webkit-scrollbar{width:3px}.ui-panel::-webkit-scrollbar-track{background:transparent}.ui-panel::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.ui-panel::-webkit-scrollbar-thumb:hover{background:#fff3}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.control-section{animation:fadeIn .3s ease-out}.control-section:nth-child(2){animation-delay:.1s}.control-section:nth-child(3){animation-delay:.2s}.status-section{animation-delay:.3s}.info-section{animation-delay:.4s}@media (max-width: 768px){.ui-panel{width:100%;height:120px;border-right:none;border-top:1px solid rgba(255,255,255,.08);padding:12px 16px;flex-direction:row;gap:16px;overflow-x:auto;overflow-y:hidden;order:2}.ui-header{display:none}.control-section{flex-shrink:0;min-width:auto}.button-group{flex-direction:row;gap:8px}.control-btn{padding:12px 16px;font-size:14px;min-height:44px}.volume-control{min-width:140px}.status-section,.info-section{display:none}.ui-panel::-webkit-scrollbar{height:3px}}@media (min-width: 769px) and (max-width: 1024px){.ui-panel{width:240px;padding:16px}.ui-title{font-size:16px}.control-btn{padding:9px 12px;font-size:12px}}@media (max-width: 768px) and (orientation: landscape){.ui-panel{width:200px;height:100vh;border-right:1px solid rgba(255,255,255,.08);border-top:none;flex-direction:column;overflow-x:hidden;overflow-y:auto;order:0}.ui-header{display:block}.button-group{flex-direction:column}.status-section{display:block}}@media (hover: none) and (pointer: coarse){.control-btn{min-height:44px}.volume-slider::-webkit-slider-thumb{width:20px;height:20px}}.mobile-help{position:fixed;bottom:20px;right:20px;z-index:1000}.help-toggle{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border:none;font-size:18px;font-weight:700;box-shadow:0 4px 12px #6366f14d;cursor:pointer;transition:all .2s ease}.help-toggle:hover{transform:scale(1.1);box-shadow:0 6px 20px #6366f166}.help-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:999}.help-content{background:linear-gradient(135deg,#0a0a14,#0f0f1a);padding:24px;border-radius:12px;border:1px solid rgba(255,255,255,.1);max-width:300px;width:90%}.help-content h4{color:#fff;margin-bottom:16px;font-size:16px;font-weight:600}.help-content ul{list-style:none;padding:0;margin:0}.help-content li{color:#fffc;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:14px}.help-content li:last-child{border-bottom:none}@media (max-width: 768px){.mobile-help{display:block}}@media (min-width: 769px){.mobile-help{display:none}}