@howssatoshi/quantumcss 1.7.7 → 1.10.1

package/examples/admin-panel.html

@@ -178,7 +178,7 @@
         .quick-action-card:hover {
             background: rgba(255, 255, 255, 0.05);
             transform: translateY(-2px);
-            border-color: rgba(0, 212, 255, 0.2);
+            border-color: rgba(0, 212, 255, 0.6);
         }
 
         .quick-action-icon {
@@ -204,41 +204,41 @@
         }
 
         /* Light Mode Overrides */
-        body.light-mode {
+        html[data-theme="light"] {
             --bg-primary: #f8fafc;
             --text-primary: #0f172a;
             --text-secondary: #475569;
             --text-muted: #64748b;
         }
 
-        body.light-mode .admin-logo {
+        html[data-theme="light"] .admin-logo {
             border-bottom-color: #e2e8f0;
         }
 
-        body.light-mode .table-container,
-        body.light-mode .quick-action-card {
+        html[data-theme="light"] .table-container,
+        html[data-theme="light"] .quick-action-card {
             background: #ffffff;
             border-color: #e2e8f0;
         }
 
-        body.light-mode .quick-action-card:hover {
+        html[data-theme="light"] .quick-action-card:hover {
             background: #f8fafc;
         }
 
-        body.light-mode th {
+        html[data-theme="light"] th {
             background: #f8fafc;
             border-bottom-color: #e2e8f0;
         }
 
-        body.light-mode td {
+        html[data-theme="light"] td {
             border-bottom-color: #f1f5f9;
         }
 
-        body.light-mode tr:hover td {
+        html[data-theme="light"] tr:hover td {
             background: #f8fafc;
         }
 
-        body.light-mode .table-footer {
+        html[data-theme="light"] .table-footer {
             background: #f8fafc;
             border-top-color: #e2e8f0;
         }
@@ -426,11 +426,11 @@
                     <span>All Users</span>
                 </nav>
                 <div class="top-nav-actions">
-                    <div class="starlight-search max-w-xs">
+                    <div class="starlight-search has-icon max-w-xs">
                         <svg class="search-icon w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                         </svg>
-                        <input type="text" class="bg-transparent border-none w-full h-full pl-12 outline-none text-sm text-white" placeholder="Search users...">
+                        <input type="text" class="search-input bg-transparent border-none w-full h-full pl-12 outline-none text-sm text-white" placeholder="Search users...">
                     </div>
                     <button class="icon-btn">
                         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -823,15 +823,7 @@
     </div>
 
     <script>
-        function toggleTheme() {
-            document.body.classList.toggle('light-mode');
-            localStorage.setItem('theme', document.body.classList.contains('light-mode') ? 'light' : 'dark');
-        }
 
-        const savedTheme = localStorage.getItem('theme');
-        if (savedTheme === 'light') {
-            document.body.classList.add('light-mode');
-        }
     </script>
 </body>
 </html>

package/examples/analytics-dashboard.html

@@ -75,13 +75,13 @@
             color: var(--text-primary, #f1f5f9);
         }
 
-        body.light-mode .notification-btn {
+        html[data-theme="light"] .notification-btn {
             background: #ffffff;
             border-color: #e2e8f0;
             color: #64748b;
         }
 
-        body.light-mode .notification-badge {
+        html[data-theme="light"] .notification-badge {
             border-color: #ffffff;
         }
 
@@ -362,34 +362,34 @@
 
         /* Sun/Moon icons */
         .sun-icon { display: none; }
-        body.light-mode .sun-icon { display: inline; }
-        body.light-mode .moon-icon { display: none; }
+        html[data-theme="light"] .sun-icon { display: inline; }
+        html[data-theme="light"] .moon-icon { display: none; }
 
         /* Light Mode Overrides */
-        body.light-mode {
+        html[data-theme="light"] {
             --bg-primary: #f8fafc;
             --text-primary: #0f172a;
             --text-secondary: #475569;
             --text-muted: #64748b;
         }
 
-        body.light-mode .chart-card {
+        html[data-theme="light"] .chart-card {
             background: #ffffff;
             border-color: #e2e8f0;
         }
 
-        body.light-mode .date-selector {
+        html[data-theme="light"] .date-selector {
             background: #ffffff;
             border-color: #e2e8f0;
         }
 
-        body.light-mode .header {
+        html[data-theme="light"] .header {
             border-bottom-color: #e2e8f0;
         }
 
-        body.light-mode .legend-item,
-        body.light-mode .activity-item,
-        body.light-mode .product-row {
+        html[data-theme="light"] .legend-item,
+        html[data-theme="light"] .activity-item,
+        html[data-theme="light"] .product-row {
             border-bottom-color: #f1f5f9;
         }
 
@@ -408,6 +408,25 @@
             }
         }
 
+        @media (max-width: 1024px) {
+            .sidebar {
+                width: 80px;
+            }
+            .sidebar .logo span,
+            .sidebar .nav-section-title,
+            .sidebar .nav-item span,
+            .sidebar .theme-label {
+                display: none;
+            }
+            .sidebar .nav-item {
+                justify-content: center;
+                padding: 0.75rem;
+            }
+            .sidebar .logo {
+                justify-content: center;
+            }
+        }
+
         @media (max-width: 768px) {
             .app-layout {
                 grid-template-columns: 1fr;
@@ -807,16 +826,8 @@
 
     <script>
         // Theme toggle
-        function toggleTheme() {
-            document.body.classList.toggle('light-mode');
-            localStorage.setItem('theme', document.body.classList.contains('light-mode') ? 'light' : 'dark');
-        }
 
         // Check saved theme
-        const savedTheme = localStorage.getItem('theme');
-        if (savedTheme === 'light') {
-            document.body.classList.add('light-mode');
-        }
 
         // Chart drawing functions
         function drawLineChart() {
@@ -849,7 +860,7 @@
             const range = maxValue - minValue;
 
             // Draw grid lines
-            ctx.strokeStyle = document.body.classList.contains('light-mode') ? '#e2e8f0' : 'rgba(255,255,255,0.05)';
+            ctx.strokeStyle = document.documentElement.getAttribute('data-theme') === 'light' ? '#e2e8f0' : 'rgba(255,255,255,0.05)';
             ctx.lineWidth = 1;
             
             for (let i = 0; i <= 5; i++) {
@@ -915,7 +926,7 @@
             });
 
             // Draw labels
-            ctx.fillStyle = document.body.classList.contains('light-mode') ? '#64748b' : '#64748b';
+            ctx.fillStyle = document.documentElement.getAttribute('data-theme') === 'light' ? '#64748b' : '#94a3b8';
             ctx.font = '12px Inter, system-ui, sans-serif';
             ctx.textAlign = 'center';
             
@@ -967,7 +978,7 @@
             });
 
             // Draw center text
-            ctx.fillStyle = document.body.classList.contains('light-mode') ? '#0f172a' : '#f1f5f9';
+            ctx.fillStyle = document.documentElement.getAttribute('data-theme') === 'light' ? '#0f172a' : '#f1f5f9';
             ctx.font = 'bold 20px Inter, system-ui, sans-serif';
             ctx.textAlign = 'center';
             ctx.textBaseline = 'middle';
@@ -987,15 +998,10 @@
         });
 
         // Redraw on theme change
-        const observer = new MutationObserver((mutations) => {
-            mutations.forEach((mutation) => {
-                if (mutation.attributeName === 'class') {
-                    drawLineChart();
-                    drawDonutChart();
-                }
-            });
+        window.addEventListener('themechange', () => {
+            drawLineChart();
+            drawDonutChart();
         });
-        observer.observe(document.body, { attributes: true });
     </script>
 </body>
 </html>

package/examples/blog-template.html

@@ -24,54 +24,55 @@
         background: rgba(255, 255, 255, 0.1);
     }
 
-    body.light-mode .theme-toggle:hover {
+    html[data-theme="light"] .theme-toggle:hover {
         background: rgba(0, 0, 0, 0.05);
     }
 
     .sun-icon { display: none; }
-    body.light-mode .sun-icon { display: block; }
-    body.light-mode .moon-icon { display: none; }
+    html[data-theme="light"] .sun-icon { display: block; }
+    html[data-theme="light"] .moon-icon { display: none; }
 
-    body.light-mode {
+    html[data-theme="light"] {
         background-color: #f8fafc;
         color: #1e293b;
     }
 
-    body.light-mode .text-white,
-    body.light-mode .text-primary,
-    body.light-mode h1,
-    body.light-mode h2,
-    body.light-mode h3,
-    body.light-mode h4 {
+    html[data-theme="light"] .text-primary,
+    html[data-theme="light"] h1,
+    html[data-theme="light"] h2,
+    html[data-theme="light"] h3,
+    html[data-theme="light"] h4 {
         color: #0f172a !important;
     }
 
-    body.light-mode .text-secondary,
-    body.light-mode .text-muted,
-    body.light-mode .text-slate-300,
-    body.light-mode .prose,
-    body.light-mode .prose p {
+    html[data-theme="light"] .text-secondary,
+    html[data-theme="light"] .text-muted,
+    html[data-theme="light"] .text-slate-300,
+    html[data-theme="light"] .prose,
+    html[data-theme="light"] .prose p {
         color: #475569 !important;
     }
 
-    body.light-mode .glass {
+    html[data-theme="light"] .glass {
         background: rgba(255, 255, 255, 0.8) !important;
         border-color: rgba(0, 0, 0, 0.1) !important;
     }
 
-    body.light-mode .starlight-card {
+    html[data-theme="light"] .starlight-card {
         background: white;
         border-color: #e2e8f0;
     }
 
-    body.light-mode .code-window {
+    html[data-theme="light"] .code-window {
         background: #f1f5f9;
         border-color: #e2e8f0;
     }
 
-    body.light-mode .code-window pre {
+    html[data-theme="light"] .code-window pre {
         color: #1e293b;
     }
+    body { background: transparent !important; }
+    nav, main, footer, section { position: relative; z-index: 1; }
   </style>
 </head>
 <body class="bg-starlight-deep text-primary font-sans antialiased min-h-screen relative overflow-x-hidden">
@@ -85,7 +86,7 @@
     <div class="star" style="top: 90%; left: 90%; --duration: 4s;"></div>
   </div>
 
-  <div class="fixed top-0 left-0 w-full h-full overflow-hidden z-0 pointer-events-none">
+  <div class="fixed top-0 left-0 w-full h-full overflow-hidden z-n1 pointer-events-none">
     <div class="absolute top-0 left-0 w-full h-full bg-gradient-radial from-primary opacity-10"></div>
   </div>
 
@@ -110,7 +111,7 @@
         <a href="#" class="text-sm font-medium hover:text-primary transition-colors">Articles</a>
         <a href="#" class="text-sm font-medium hover:text-primary transition-colors">About</a>
         <div id="theme-btn" class="theme-toggle" title="Toggle Theme">
-            <svg class="w-6 h-6 sun-icon hidden" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path></svg>
+            <svg class="w-6 h-6 sun-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path></svg>
             <svg class="w-6 h-6 moon-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
         </div>
         <button class="btn-starlight btn-sm">Subscribe</button>
@@ -147,14 +148,14 @@
             <span>5 min read</span>
           </div>
           
-          <h1 class="text-5xl md:text-7xl font-black leading-tight text-white uppercase italic tracking-tighter">
+          <h1 class="text-5xl md:text-7xl font-black leading-tight text-primary uppercase italic tracking-tighter">
             The Future of <span class="text-gradient-starlight">UI Design</span>
           </h1>
 
           <div class="flex items-center gap-4 pt-4">
-            <img src="https://media.licdn.com/dms/image/v2/D5603AQFDAUK1PK6IzQ/profile-displayphoto-scale_100_100/B56Zml2ZwgJkAg-_0/1759424127811?e=1771459200&v=beta&t=kk4HtXlQ0REqJ5bz6yy3akXwYeEfvznb8PZ4hQg85u4" alt="Eric Yang" class="w-12 h-12 rounded-full border border-primary_30">
+            <img src="images/eric.png" alt="Eric Yang" class="w-12 h-12 rounded-full border border-accent_30">
             <div>
-              <p class="font-bold text-white uppercase text-xs tracking-widest">Eric Yang</p>
+              <p class="font-bold text-primary uppercase text-xs tracking-widest">Eric Yang</p>
               <p class="text-xs text-secondary font-medium">Frontend Architect</p>
             </div>
           </div>
@@ -169,12 +170,12 @@
 
         <!-- Content -->
         <div class="prose max-w-none text-slate-300 text-lg leading-relaxed space-y-10">
-          <p class="text-2xl text-white font-medium">
+          <p class="text-2xl text-primary font-medium">
             Glassmorphism, neon glows, and deep gradients are making a comeback. Powered by modern CSS, they create an immersive experience.
           </p>
           
           <div class="space-y-6">
-            <h2 class="text-3xl font-black text-white uppercase italic tracking-tighter flex items-center gap-4">
+            <h2 class="text-3xl font-black text-primary uppercase italic tracking-tighter flex items-center gap-4">
               <span class="w-2 h-10 bg-starlight rounded-full shadow-[0_0_15px_rgba(0,212,255,0.5)]"></span>
               The Starlight Paradigm
             </h2>
@@ -183,12 +184,12 @@
             </p>
           </div>
 
-          <div class="glass p-8 rounded-2xl   border-primary bg-primary_5 italic text-xl text-white">
+          <div class="glass p-8 rounded-2xl   border-accent bg-accent_5 italic text-xl text-primary">
             "Design is not just what it looks like and feels like. Design is how it works... in zero gravity."
           </div>
 
           <div class="space-y-6">
-            <h2 class="text-3xl font-black text-white uppercase italic tracking-tighter">Code Interface</h2>
+            <h2 class="text-3xl font-black text-primary uppercase italic tracking-tighter">Code Interface</h2>
             <div class="code-window">
               <div class="code-window-header">
                 <div class="code-window-controls">
@@ -235,7 +236,7 @@
 
         <!-- Newsletter -->
         <div class="glass p-6 rounded-2xl glow-blue border border-white_5">
-          <h3 class="text-lg font-bold mb-2 text-white">Join the Newsletter</h3>
+          <h3 class="text-lg font-bold mb-2 text-primary">Join the Newsletter</h3>
           <p class="text-secondary text-sm mb-4">Get the latest design trends delivered to your inbox.</p>
           <form class="space-y-3">
             <input type="email" placeholder="your@email.com" class="input-starlight w-full bg-black_20 border-white_10">
@@ -248,12 +249,12 @@
           <h3 class="text-xs font-bold text-muted uppercase tracking-wider">Recommended</h3>
           
           <a href="#" class="block glass p-4 rounded-xl hover:bg-white_5 transition-colors group">
-            <h4 class="font-bold text-white group-hover:text-primary transition-colors">Glassmorphism in 2026</h4>
+            <h4 class="font-bold text-primary group-hover:text-primary transition-colors">Glassmorphism in 2026</h4>
             <p class="text-xs text-muted mt-1">Feb 1 • 4 min read</p>
           </a>
           
           <a href="#" class="block glass p-4 rounded-xl hover:bg-white_5 transition-colors group">
-            <h4 class="font-bold text-white group-hover:text-primary transition-colors">Modern CSS Variables</h4>
+            <h4 class="font-bold text-primary group-hover:text-primary transition-colors">Modern CSS Variables</h4>
             <p class="text-xs text-muted mt-1">Jan 28 • 8 min read</p>
           </a>
         </div>
@@ -271,8 +272,8 @@
           © 2026 StarlightBlog. Powered by QuantumCSS.
         </div>
         <div class="flex gap-6">
-          <a href="#" class="text-muted hover:text-white transition-colors">Privacy</a>
-          <a href="#" class="text-muted hover:text-white transition-colors">Terms</a>
+          <a href="#" class="text-muted hover:text-primary transition-colors">Privacy</a>
+          <a href="#" class="text-muted hover:text-primary transition-colors">Terms</a>
         </div>
       </div>
     </div>
@@ -284,4 +285,4 @@
   </script>
 
 </body>
-</html>
+</html>

package/examples/chat-messaging.html

@@ -11,72 +11,68 @@
             display: grid;
             grid-template-columns: 320px 1fr;
             height: 100vh;
-            background: var(--bg-primary, #08081a);
+            background: var(--q-color-bg, #08081a);
             overflow: hidden;
         }
         .chat-sidebar {
-            background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 8, 26, 0.98) 100%);
-            border-right: 1px solid rgba(255, 255, 255, 0.06);
+            background: linear-gradient(180deg, color-mix(in srgb, var(--q-color-bg), white 2%) 0%, var(--q-color-bg) 100%);
+            border-right: 1px solid var(--q-color-border);
             display: flex;
             flex-direction: column;
             overflow: hidden;
         }
-        .sidebar-header { padding: 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
-        .chat-tabs { display: flex; gap: 0.25rem; padding: 0.75rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
+        .sidebar-header { padding: 1.25rem; border-bottom: 1px solid var(--q-color-border); }
+        .chat-tabs { display: flex; gap: 0.25rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--q-color-border); }
         .chat-tab { flex: 1; padding: 0.5rem; background: transparent; border: none; border-radius: 0.5rem;
-            color: var(--text-muted, #64748b); font-size: 0.8125rem; font-weight: 500; cursor: pointer;
+            color: var(--q-text-muted, #64748b); font-size: 0.8125rem; font-weight: 500; cursor: pointer;
         }
-        .chat-tab.active { color: var(--color-starlight, #00d4ff); background: rgba(0, 212, 255, 0.1); }
+        .chat-tab.active { color: var(--q-color-starlight-blue, #00d4ff); background: var(--q-highlight-bg); }
         .conversation-list { flex: 1; overflow-y: auto; padding: 0.5rem; }
         .conversation-item { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem; border-radius: 0.75rem; cursor: pointer; margin-bottom: 0.25rem; }
-        .conversation-item:hover { background: rgba(255, 255, 255, 0.03); }
-        .conversation-item.active { background: rgba(0, 212, 255, 0.08); }
+        .conversation-item:hover { background: var(--q-highlight-bg); }
+        .conversation-item.active { background: color-mix(in srgb, var(--q-color-starlight-blue), transparent 90%); }
         .conversation-avatar { position: relative; flex-shrink: 0; }
         .conversation-avatar img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
         .conversation-info { flex: 1; min-width: 0; }
         .conversation-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
-        .conversation-name { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary, #f1f5f9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        .conversation-time { font-size: 0.75rem; color: var(--text-muted, #64748b); }
-        .conversation-message { font-size: 0.875rem; color: var(--text-secondary, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        .conversation-item.unread .conversation-message { color: var(--text-primary, #f1f5f9); font-weight: 500; }
+        .conversation-name { font-size: 0.9375rem; font-weight: 600; color: var(--q-text-primary, #f1f5f9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .conversation-time { font-size: 0.75rem; color: var(--q-text-muted, #64748b); }
+        .conversation-message { font-size: 0.875rem; color: var(--q-text-secondary, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .conversation-item.unread .conversation-message { color: var(--q-text-primary, #f1f5f9); font-weight: 500; }
         .chat-main { display: flex; flex-direction: column; overflow: hidden; }
-        .chat-header { display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.02); height: 5rem; flex-shrink: 0; }
+        .chat-header { display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; border-bottom: 1px solid var(--q-color-border); background: color-mix(in srgb, var(--q-color-bg), white 1%); height: 5rem; flex-shrink: 0; }
         .chat-header-info { display: flex; align-items: center; gap: 0.875rem; }
         .chat-header-avatar { position: relative; }
         .chat-header-avatar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
-        .chat-header-details h3 { font-size: 1rem; font-weight: 600; color: var(--text-primary, #f1f5f9); margin-bottom: 0.125rem; }
+        .chat-header-details h3 { font-size: 1rem; font-weight: 600; color: var(--q-text-primary, #f1f5f9); margin-bottom: 0.125rem; }
         .chat-header-details p { font-size: 0.8125rem; color: #10b981; }
         .messages-container { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
         .message-date { text-align: center; margin: 1rem 0; }
-        .message-date span { font-size: 0.75rem; color: var(--text-muted, #64748b); background: rgba(255, 255, 255, 0.05); padding: 0.375rem 0.875rem; border-radius: 9999px; }
+        .message-date span { font-size: 0.75rem; color: var(--q-text-muted, #64748b); background: var(--q-color-bg-muted); padding: 0.375rem 0.875rem; border-radius: 9999px; }
         .message { display: flex; gap: 0.75rem; max-width: 70%; }
         .message.sent { align-self: flex-end; flex-direction: row-reverse; }
         .message-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
         .message-content { display: flex; flex-direction: column; gap: 0.25rem; }
         .message-bubble { padding: 0.875rem 1.125rem; border-radius: 1.125rem; font-size: 0.9375rem; line-height: 1.5; }
-        .message.received .message-bubble { background: rgba(255, 255, 255, 0.08); color: var(--text-primary, #f1f5f9); border-bottom-left-radius: 0.25rem; }
-        .message.sent .message-bubble { background: linear-gradient(135deg, var(--color-starlight, #00d4ff), #3b82f6); color: white; border-bottom-right-radius: 0.25rem; }
-        .message-time { font-size: 0.75rem; color: var(--text-muted, #64748b); align-self: flex-start; margin-left: 0.5rem; }
+        .message.received .message-bubble { background: color-mix(in srgb, var(--q-color-bg), white 8%); color: var(--q-text-primary, #f1f5f9); border-bottom-left-radius: 0.25rem; }
+        .message.sent .message-bubble { background: var(--q-color-starlight-blue); color: #000; font-weight: 600; border-bottom-right-radius: 0.25rem; }
+        .message-time { font-size: 0.75rem; color: var(--q-text-muted, #64748b); align-self: flex-start; margin-left: 0.5rem; }
         .message.sent .message-time { align-self: flex-end; margin-left: 0; margin-right: 0.5rem; }
-        .chat-input-container { padding: 0 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.02); height: 5rem; min-height: 5rem; display: flex; align-items: center; flex-shrink: 0; box-sizing: border-box; }
-        .chat-input-wrapper { display: flex; align-items: flex-end; gap: 0.75rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1.25rem; padding: 0.5rem 0.75rem; width: 100%; }
-        .chat-input { flex: 1; background: transparent; border: none; color: var(--text-primary, #f1f5f9); font-size: 0.9375rem; resize: none; max-height: 120px; padding: 0.625rem 0; outline: none; }
-        .chat-input::placeholder { color: var(--text-muted, #64748b); }
-        .send-btn { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--color-starlight, #00d4ff), #3b82f6); border: none; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; margin-bottom: 0.125rem; }
-        .theme-toggle-wrapper { padding: 0 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.06); height: 5rem; min-height: 5rem; display: flex; align-items: center; flex-shrink: 0; background: rgba(255, 255, 255, 0.02); box-sizing: border-box; }
-        .theme-btn { width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.75rem; color: var(--text-primary, #f1f5f9); cursor: pointer; transition: all 0.2s ease; }
-        .theme-btn:hover { background: rgba(255, 255, 255, 0.08); }
+        .chat-input-container { padding: 0 1.25rem; border-top: 1px solid var(--q-color-border); background: color-mix(in srgb, var(--q-color-bg), white 1%); height: 5rem; min-height: 5rem; display: flex; align-items: center; flex-shrink: 0; box-sizing: border-box; }
+        .chat-input-wrapper { display: flex; align-items: flex-end; gap: 0.75rem; background: var(--q-input-bg); border: 1px solid var(--q-input-border); border-radius: 1.25rem; padding: 0.5rem 0.75rem; width: 100%; }
+        .chat-input { flex: 1; background: transparent; border: none; color: var(--q-text-primary, #f1f5f9); font-size: 0.9375rem; resize: none; max-height: 120px; padding: 0.625rem 0; outline: none; }
+        .chat-input::placeholder { color: var(--q-text-muted, #64748b); }
+        .send-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--q-gradient-primary); border: none; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; margin-bottom: 0.125rem; }
+        .theme-toggle-wrapper { padding: 0 1.25rem; border-top: 1px solid var(--q-color-border); height: 5rem; min-height: 5rem; display: flex; align-items: center; flex-shrink: 0; background: color-mix(in srgb, var(--q-color-bg), white 1%); box-sizing: border-box; }
+        .theme-btn { width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--q-color-surface); border: 1px solid var(--q-color-border); border-radius: 0.75rem; color: var(--q-text-primary, #f1f5f9); cursor: pointer; transition: all 0.2s ease; }
+        .theme-btn:hover { background: var(--q-highlight-bg); }
         .theme-label { font-size: 0.875rem; font-weight: 500; }
         .sun-icon { display: none; }
-        body.light-mode .sun-icon { display: inline; }
-        body.light-mode .moon-icon { display: none; }
-        body.light-mode { --bg-primary: #f8fafc; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; }
-        body.light-mode .chat-sidebar { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border-right-color: #e2e8f0; }
-        body.light-mode .chat-header, body.light-mode .chat-input-container { background: #f8fafc; border-color: #e2e8f0; }
-        body.light-mode .chat-input-wrapper { background: #f1f5f9; border-color: #e2e8f0; }
-        body.light-mode .conversation-item:hover { background: #f8fafc; }
-        body.light-mode .conversation-item.active { background: rgba(0, 212, 255, 0.08); }
-        body.light-mode .message.received .message-bubble { background: #f1f5f9; color: #0f172a; }
+        html[data-theme="light"] .sun-icon { display: inline; }
+        html[data-theme="light"] .moon-icon { display: none; }
+        html[data-theme="light"] { --bg-primary: var(--q-light-bg); --text-primary: var(--q-light-text); --text-secondary: var(--q-light-text-muted); --text-muted: var(--q-light-text-muted); }
+        html[data-theme="light"] .message.received .message-bubble { background: #fff; border: 1px solid #e2e8f0; color: #0f172a; }
+        html[data-theme="light"] .message.sent .message-bubble { background: var(--q-color-primary); color: #fff; }
         @media (max-width: 768px) { .chat-app { grid-template-columns: 1fr; } .chat-sidebar { display: none; } .message { max-width: 85%; } }
     </style>
 </head>
@@ -91,15 +87,15 @@
                     </div>
                     <div class="user-info">
                         <div class="user-name">John Doe</div>
-                        <div class="user-email" style="color: var(--text-muted, #64748b); font-size: 0.8125rem;">Online</div>
+                        <div class="user-email" style="color: var(--q-text-muted, #64748b); font-size: 0.8125rem;">Online</div>
                     </div>
                 </div>
                 <div class="px-4 py-4 border-b border-white_5">
-                    <div class="starlight-search">
+                    <div class="starlight-search has-icon">
                         <svg class="search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                         </svg>
-                        <input type="text" class="bg-transparent border-none w-full h-full pl-12 outline-none text-sm text-white" placeholder="Search conversations...">
+                        <input type="text" class="search-input bg-transparent border-none w-full h-full pl-12 outline-none text-sm text-white" placeholder="Search conversations...">
                     </div>
                 </div>
             </div>
@@ -247,22 +243,5 @@
             </div>
         </div>
     </div>
-    <script>
-        function toggleTheme() {
-            document.body.classList.toggle('light-mode');
-            localStorage.setItem('theme', document.body.classList.contains('light-mode') ? 'light' : 'dark');
-        }
-        const savedTheme = localStorage.getItem('theme');
-        if (savedTheme === 'light') document.body.classList.add('light-mode');
-        document.querySelectorAll('.conversation-item').forEach(item => {
-            item.addEventListener('click', function() {
-                document.querySelectorAll('.conversation-item').forEach(i => i.classList.remove('active'));
-                this.classList.add('active');
-                this.classList.remove('unread');
-                const badge = this.querySelector('.unread-badge');
-                if (badge) badge.style.display = 'none';
-            });
-        });
-    </script>
 </body>
 </html>