ui: frosted glass on top and bottom bars

frontend/src/App.tsx

@@ -117,7 +117,7 @@ export default function App() {
       <Particles type={currentScene.particles ?? 'none'} />
       <div className="relative z-20 h-full flex flex-col">
         {/* ── Top bar: scene selector + clock ── */}
-        <div className="flex items-center justify-between px-5 py-3 shrink-0">
+        <div className="flex items-center justify-between px-5 py-3 shrink-0 bg-white/40 backdrop-blur-xl rounded-2xl mx-4">
           <div className="flex items-center gap-1">
             {SCENES.map((s) => (
               <button key={s.id} onClick={() => handleSceneChange(s.id)}
@@ -174,7 +174,7 @@ export default function App() {
         </div>
 
         {/* ── Bottom status bar ── */}
-        <div className="shrink-0 px-5 py-2 flex items-center justify-between text-[11px] text-kira-plum/30">
+        <div className="shrink-0 px-5 py-2 flex items-center justify-between text-[11px] text-kira-plum/30 bg-white/40 backdrop-blur-xl rounded-2xl mx-4">
           <div className="flex items-center gap-2">
             <span className={`w-1.5 h-1.5 rounded-full ${
               isRecording ? 'bg-red-400 animate-pulse'