.top-bar{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:18px 24px;z-index:100;pointer-events:none;opacity:1;transition:all .5s ease}
.top-bar.hidden{opacity:0;pointer-events:none!important;transform:translateY(-20px)}
.top-bar>*{pointer-events:auto}
.logo{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:22px;letter-spacing:6px;text-transform:uppercase;color:var(--td);display:flex;align-items:center;gap:10px}
.logo-sub{font-size:9px;letter-spacing:3px;color:var(--th);margin-top:2px}
.top-actions{display:flex;gap:5px;align-items:center}
.btn{background:var(--gl);border:.5px solid var(--gb);color:var(--td);padding:7px 14px;border-radius:24px;font-family:'Questrial',sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:all .3s;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.btn:hover{background:var(--gh);color:var(--text);border-color:rgba(255,255,255,.18)}
.btn:active{transform:scale(.95)}
.btn-icon{width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%}
.btn-icon svg{width:14px;height:14px}

.bottom-panel{position:fixed;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;padding:0 24px 18px;z-index:100;pointer-events:none;opacity:1;transition:all .5s ease}
.bottom-panel.hidden{opacity:0;pointer-events:none!important;transform:translateY(30px)}
.bottom-panel>*{pointer-events:auto}
.theme-row{display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap;justify-content:center}
.theme-dot{width:22px;height:22px;border-radius:50%;border:none;cursor:pointer;transition:all .3s;position:relative;outline:none}
.theme-dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:1.5px solid transparent;transition:border-color .3s}
.theme-dot.active::after{border-color:rgba(255,255,255,.5)}
.theme-dot:hover{transform:scale(1.2)}
.controls-row{display:flex;align-items:center;gap:14px;margin-bottom:10px;flex-wrap:wrap;justify-content:center}
.control-group{display:flex;align-items:center;gap:6px}
.cl{font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--th);white-space:nowrap}
.cs{-webkit-appearance:none;appearance:none;width:70px;height:2px;background:rgba(255,255,255,.1);border-radius:2px;outline:none;cursor:pointer}
.cs::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--td);border:none;cursor:pointer}
.pill-row{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;margin-bottom:8px}
.mp{background:transparent;border:.5px solid var(--gb);color:var(--th);padding:4px 10px;border-radius:20px;font-family:'Questrial',sans-serif;font-size:8px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:all .3s}
.mp:hover{color:var(--td);border-color:rgba(255,255,255,.18)}
.mp.active{background:var(--gl);color:var(--td);border-color:rgba(255,255,255,.22)}
@media(max-width:600px){.top-bar{padding:10px 12px}.bottom-panel{padding:0 10px 12px}.logo{font-size:16px;letter-spacing:4px}.logo-sub{display:none}.btn{padding:5px 10px;font-size:8px}.btn-icon{width:30px;height:30px}.cs{width:50px}.controls-row{gap:8px}.theme-dot{width:18px;height:18px}}