feat(ui): ditch all glass-card containers — flat, modern, card-free layout

All 15+ glass-card instances removed across every component (Timer, Music,
Notes, WhiteNoise, PetZone, Clock, ChatBubble, Wardrobe, Toolbar, KiraAvatar,
BackgroundScene, WelcomeScreen, App text input + bottom bar).

New design: widgets sit directly on the gradient background with only padding,
no frosted-glass backgrounds, borders, or shadows. Cleaner, more modern look.

frontend/src/App.tsx

@@ -85,7 +85,7 @@ export default function App() {
     // Has saved ID but not identified yet — show welcome with their name
     return (
       <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-kira-bg via-kira-glow to-kira-pink/20 p-4">
-        <div className="glass-card max-w-sm w-full p-6 text-center space-y-4">
+        <div className="max-w-sm w-full p-6 text-center space-y-4">
           <div className="w-16 h-16 rounded-full bg-gradient-to-br from-kira-pink via-kira-lav to-kira-mint p-1 mx-auto animate-pulse-glow">
             <div className="w-full h-full rounded-full bg-white flex items-center justify-center">
               <span className="text-2xl">🌸</span>
@@ -143,7 +143,7 @@ export default function App() {
               <ChatBubble messages={messages} isKiraSpeaking={isKiraSpeaking} userName={userName} livePartial={livePartial} />
 
               {/* Text input fallback */}
-              <div className="glass-card p-3">
+              <div className="p-3">
                 <div className="text-[10px] text-kira-plum/30 mb-2">
                   hey {userName} ✨
                 </div>
@@ -190,7 +190,7 @@ export default function App() {
 
         {/* Bottom bar */}
         <div className="px-4 pb-4">
-          <div className="glass-card px-4 py-2 flex items-center justify-between text-xs text-kira-plum/40">
+          <div className="px-4 py-2 flex items-center justify-between text-xs text-kira-plum/40">
             <div className="flex items-center gap-3">
               <span className={`w-2 h-2 rounded-full ${isRecording ? 'bg-red-400 animate-pulse' : isKiraSpeaking ? 'bg-kira-pink animate-pulse' : 'bg-kira-mint'} inline-block`} />
               <span>{isRecording ? 'listening...' : isKiraSpeaking ? 'kira speaking' : `kira's here for you, ${userName}`}</span>

frontend/src/components/BackgroundScene.tsx

@@ -7,7 +7,7 @@ interface Props {
 
 export default function BackgroundScene({ currentScene, onSelect }: Props) {
   return (
-    <div className="glass-card p-4">
+    <div className="p-4">
       <h3 className="text-sm font-bold text-kira-plum mb-3 flex items-center gap-2">
         <span>🎨</span> Scene
       </h3>

frontend/src/components/ChatBubble.tsx

@@ -22,7 +22,7 @@ export default function ChatBubble({ messages, isKiraSpeaking, livePartial }: Pr
   }, [messages]);
 
   return (
-    <div className="glass-card p-4 flex flex-col" style={{ minHeight: 200, maxHeight: 320 }}>
+    <div className="p-4 flex flex-col" style={{ minHeight: 200, maxHeight: 320 }}>
       <h3 className="text-sm font-bold text-kira-plum mb-3 flex items-center gap-2">
         <span>💬</span> Conversation
         <span className={`w-2 h-2 rounded-full ${isKiraSpeaking ? 'bg-kira-pink animate-pulse' : 'bg-kira-mint'}`} />

frontend/src/components/Clock.tsx

@@ -9,7 +9,7 @@ export default function Clock() {
   }, []);
 
   return (
-    <div className="glass-card px-5 py-3 text-center">
+    <div className="px-5 py-3 text-center">
       <div className="text-3xl font-bold tracking-tight text-kira-plum">
         {time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
       </div>

frontend/src/components/KiraAvatar.tsx

@@ -197,7 +197,7 @@ export default function KiraAvatar(props: Props) {
   `;
 
   return (
-    <div className="glass-card flex flex-col items-center w-full overflow-hidden" style={{ minHeight: '33vh' }}>
+    <div className="flex flex-col items-center w-full overflow-hidden" style={{ minHeight: '33vh' }}>
       <div className="relative w-full flex-1" style={{ minHeight: 250 }}>
         <div
           ref={canvasRef}

frontend/src/components/MusicPlayer.tsx

@@ -87,7 +87,7 @@ export default function MusicPlayer() {
   }, [volume]);
 
   return (
-    <div className="glass-card p-4">
+    <div className="p-4">
       <div className="flex items-center justify-between mb-3">
         <h3 className="text-sm font-bold text-kira-plum flex items-center gap-2">
           <span>🎶</span> Lo-Fi

frontend/src/components/Notes.tsx

@@ -25,7 +25,7 @@ export default function Notes() {
   };
 
   return (
-    <div className="glass-card p-4">
+    <div className="p-4">
       <h3 className="text-sm font-bold text-kira-plum mb-3 flex items-center gap-2">
         <span>📝</span> Notes
       </h3>

frontend/src/components/PetZone.tsx

@@ -1,6 +1,6 @@
 export default function PetZone() {
   return (
-    <div className="glass-card p-4 relative overflow-hidden" style={{ minHeight: 120 }}>
+    <div className="p-4 relative overflow-hidden" style={{ minHeight: 120 }}>
       <h3 className="text-sm font-bold text-kira-plum mb-2 flex items-center gap-2">
         <span>🐱</span> Pet Zone
       </h3>

frontend/src/components/Timer.tsx

@@ -85,7 +85,7 @@ export default function Timer() {
   const progress = mode === 'stopwatch' ? 0 : (presetMinutes > 0 ? 1 - remaining / (presetMinutes * 60) : 0);
 
   return (
-    <div className="glass-card p-4">
+    <div className="p-4">
       {/* Mode tabs */}
       <div className="flex gap-1 mb-3 bg-kira-glow rounded-xl p-1">
         {(['pomodoro', 'countdown', 'stopwatch'] as TimerMode[]).map((m) => (

frontend/src/components/Toolbar.tsx

@@ -7,7 +7,7 @@ interface Props {
 
 export default function Toolbar({ currentScene, onSceneChange }: Props) {
   return (
-    <div className="glass-card px-4 py-3 flex items-center justify-between gap-2">
+    <div className="px-4 py-3 flex items-center justify-between gap-2">
       <div className="flex items-center gap-3">
         <span className="text-lg font-bold text-kira-plum">Kira</span>
         <span className="text-kira-plum/20">|</span>

frontend/src/components/Wardrobe.tsx

@@ -45,7 +45,7 @@ export default function Wardrobe({ onOutfitChange, onAccessoryChange }: Props) {
   };
 
   return (
-    <div className="glass-card p-4">
+    <div className="p-4">
       <h3 className="text-sm font-bold text-kira-plum mb-3 flex items-center gap-2">
         <span>👘</span> Wardrobe
       </h3>

frontend/src/components/WelcomeScreen.tsx

@@ -66,7 +66,7 @@ export default function WelcomeScreen({ onComplete, isCompact = false }: Props)
 
   if (isCompact) {
     return (
-      <div className="glass-card max-w-md w-full p-8 text-center space-y-6">
+      <div className="max-w-md w-full p-8 text-center space-y-6">
         {content}
       </div>
     );
@@ -74,7 +74,7 @@ export default function WelcomeScreen({ onComplete, isCompact = false }: Props)
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-kira-bg via-kira-glow to-kira-pink/20 p-4">
-      <div className="glass-card max-w-md w-full p-8 text-center space-y-6">
+      <div className="max-w-md w-full p-8 text-center space-y-6">
         {content}
       </div>
       <style>{`

frontend/src/components/WhiteNoise.tsx

@@ -103,7 +103,7 @@ export default function WhiteNoise() {
   };
 
   return (
-    <div className="glass-card p-4">
+    <div className="p-4">
       <h3 className="text-sm font-bold text-kira-plum mb-3 flex items-center gap-2">
         <span>🌬️</span> White Noise
       </h3>