#ha-controls { position:fixed; right:max(20px,env(safe-area-inset-right)); bottom:18px; z-index:40; max-width:calc(100vw - 32px); color:#f5ecff; font:400 13px/1.6 Poppins,'Montserrat Cyrillic',Endermond,system-ui,sans-serif; }
#ha-controls *, #ha-controls *::before, #ha-controls *::after { box-sizing:border-box; }
#ha-controls button, #ha-controls select, #ha-controls input { font:inherit; }
#ha-controls button { cursor:pointer; }
#ha-controls button:focus-visible, #ha-controls select:focus-visible, #ha-controls input:focus-visible, #ha-controls a:focus-visible { outline:2px solid #ffc387; outline-offset:4px; }
#ha-controls .ha-trigger { display:flex; align-items:center; justify-content:center; gap:9px; min-height:44px; margin-left:auto; padding:10px 15px; color:#d8c8eb; border:1px solid #a783d64d; border-radius:10px; background:#17101fed; box-shadow:0 4px 24px #07050e55; font-size:11px; letter-spacing:.01em; transition:background-color .2s,border-color .2s; }
#ha-controls .ha-trigger:hover { border-color:#c398f2; background:#24172f; }
#ha-controls .ha-speaker { color:#d0a1ff; font-size:18px; line-height:1; }
#ha-controls .ha-is-playing { border-color:#e8ae6b88; }
#ha-controls .ha-is-playing .ha-speaker { color:#ffc387; }
#ha-controls .ha-panel { position:relative; width:300px; max-width:100%; max-height:calc(100dvh - 190px); overflow-y:auto; margin:0 0 10px; padding:20px; border:1px solid #b58ae14d; border-radius:13px; background:linear-gradient(135deg,#251731fc,#13101bfc); box-shadow:0 10px 48px #07040f80; text-align:left; }
#ha-controls .ha-panel[hidden] { display:none; }
#ha-controls .ha-title { margin:0 30px 8px 0; font-size:14px; font-weight:600; letter-spacing:0; line-height:1.5; color:#fff4e8; }
#ha-controls .ha-close { position:absolute; display:grid; place-items:center; width:44px; height:44px; top:4px; right:4px; padding:0; border:0; background:transparent; color:#bba9cc; font-size:24px; }
#ha-controls .ha-hint { margin:0 0 17px; color:#b4a5c1; font-size:11px; line-height:1.7; }
#ha-controls .ha-label { display:block; margin:0 0 7px; color:#c7b8d4; font-size:11px; }
#ha-controls .ha-track { display:block; width:100%; min-height:44px; margin:0 0 16px; padding:8px 10px; color:#e8d7f7; border:1px solid #ad85ce4d; border-radius:5px; background:#17111f; font-size:12px; }
#ha-controls .ha-volume-row { display:flex; align-items:center; justify-content:space-between; }
#ha-controls .ha-volume-value { padding:0; border:0; color:#d7b8fa; font:inherit; font-size:11px; }
#ha-controls .ha-volume { display:block; width:100%; height:24px; margin:0 0 12px; padding:0; accent-color:#c295ec; cursor:pointer; }
#ha-controls .ha-play { display:block; width:100%; min-height:44px; margin:0; padding:10px 14px; border:1px solid #e5a86a88; border-radius:6px; color:#23131d; background:linear-gradient(105deg,#d77b31,#ffb66c); font-size:12px; font-weight:600; }
#ha-controls .ha-play:hover:not(:disabled) { background:#ffc387; }
#ha-controls .ha-play:disabled { cursor:not-allowed; opacity:.5; }
#ha-controls .ha-status { margin:11px 0 0; min-height:18px; font-size:10px; line-height:1.7; color:#c7b8d4; }
#ha-controls .ha-sources { display:inline-block; margin:10px 0 0; padding:0; border:0; border-radius:0; font-size:9px; color:#a896bb; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:600px) {
 #ha-controls { right:max(16px,env(safe-area-inset-right)); }
 #ha-controls .ha-panel { width:min(290px,calc(100vw - 32px)); }
 #ha-controls .ha-trigger { padding:10px 12px; font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { #ha-controls .ha-trigger { transition:none; } }

#ha-controls .ha-control-row { display:flex; align-items:stretch; justify-content:flex-end; gap:6px; }
#ha-controls .ha-settings { display:grid; place-items:center; width:44px; min-height:44px; padding:0; border:1px solid #a783d64d; border-radius:10px; background:#17101fed; color:#bba5d5; font-size:18px; }
#ha-controls .ha-settings:hover { border-color:#c398f2; background:#24172f; }
#ha-controls .ha-trigger:disabled { cursor:not-allowed; opacity:.55; }