refactor: update class names for consistency and improve styling

- Changed `flex-shrink-0` to `shrink-0` in multiple components for better consistency.
- Updated button and checkbox classes to use `rounded-sm` for a more uniform appearance.
- Adjusted backdrop blur classes for modals to `backdrop-blur-xs` for a subtler effect.
- Removed unused Tailwind CSS configuration file.

src/components/AnalyticsList.jsx

@@ -152,7 +152,7 @@ export default function AnalyticsList({ analytics, onRefresh, isOwner = true })
                 </div>
               </div>
 
-              <div className="flex items-center gap-1 flex-shrink-0">
+              <div className="flex items-center gap-1 shrink-0">
                 <div className="relative">
                   <button
                     onClick={() => toggleExportMenu(entry.id)}

src/components/BrandLogo.jsx

@@ -2,9 +2,9 @@ import { Video } from 'lucide-react';
 import { useBranding } from '../contexts/BrandingContext';
 
 const sizes = {
-  sm: { box: 'w-8 h-8', h: 'h-8', maxW: 'max-w-[8rem]', rounded: 'rounded-lg', icon: 16, text: 'text-lg' },
-  md: { box: 'w-9 h-9', h: 'h-12', maxW: 'max-w-[10rem]', rounded: 'rounded-lg', icon: 20, text: 'text-xl' },
-  lg: { box: 'w-10 h-10', h: 'h-10', maxW: 'max-w-[12rem]', rounded: 'rounded-xl', icon: 22, text: 'text-2xl' },
+  sm: { box: 'w-8 h-8', h: 'h-8', maxW: 'max-w-32', rounded: 'rounded-lg', icon: 16, text: 'text-lg' },
+  md: { box: 'w-9 h-9', h: 'h-12', maxW: 'max-w-40', rounded: 'rounded-lg', icon: 20, text: 'text-xl' },
+  lg: { box: 'w-10 h-10', h: 'h-10', maxW: 'max-w-48', rounded: 'rounded-xl', icon: 22, text: 'text-2xl' },
 };
 
 export default function BrandLogo({ size = 'md', className = '' }) {

src/components/DateTimePicker.jsx

@@ -90,7 +90,7 @@ export default function DateTimePicker({
         </label>
       )}
       <div className="relative">
-        <Icon size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s pointer-events-none z-[1]" />
+        <Icon size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-th-text-s pointer-events-none z-1" />
         <input
           ref={inputRef}
           type="text"

src/components/FederatedRoomCard.jsx

@@ -35,17 +35,17 @@ export default function FederatedRoomCard({ room, onRemove }) {
       <div className="flex items-start justify-between mb-3">
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2">
-            <Globe size={14} className="text-th-accent flex-shrink-0" />
+            <Globe size={14} className="text-th-accent shrink-0" />
             <h3 className="text-base font-semibold text-th-text truncate group-hover:text-th-accent transition-colors">
               {room.room_name}
             </h3>
             {isDeleted ? (
-              <span className="flex-shrink-0 px-2 py-0.5 bg-red-500/15 text-red-500 rounded-full text-xs font-medium flex items-center gap-1">
+              <span className="shrink-0 px-2 py-0.5 bg-red-500/15 text-red-500 rounded-full text-xs font-medium flex items-center gap-1">
                 <AlertTriangle size={10} />
                 {t('federation.roomDeleted')}
               </span>
             ) : (
-              <span className="flex-shrink-0 px-2 py-0.5 bg-th-accent/15 text-th-accent rounded-full text-xs font-medium">
+              <span className="shrink-0 px-2 py-0.5 bg-th-accent/15 text-th-accent rounded-full text-xs font-medium">
                 {t('federation.federated')}
               </span>
             )}
@@ -60,12 +60,12 @@ export default function FederatedRoomCard({ room, onRemove }) {
       <div className="grid grid-cols-2 gap-2 mb-4">
         {room.meet_id && (
           <div className="flex items-center gap-1.5 text-xs text-th-text-s">
-            <Hash size={12} className="text-th-accent flex-shrink-0" />
+            <Hash size={12} className="text-th-accent shrink-0" />
             <span className="truncate font-mono" title={room.meet_id}>{room.meet_id.slice(0, 10)}…</span>
           </div>
         )}
         <div className="flex items-center gap-1.5 text-xs text-th-text-s">
-          <Users size={12} className="text-th-accent flex-shrink-0" />
+          <Users size={12} className="text-th-accent shrink-0" />
           <span>
             {t('federation.maxParticipants')}:{' '}
             <span className="text-th-text font-medium">
@@ -76,12 +76,12 @@ export default function FederatedRoomCard({ room, onRemove }) {
         <div className="flex items-center gap-1.5 text-xs col-span-2">
           {recordingOn ? (
             <>
-              <Video size={12} className="text-amber-500 flex-shrink-0" />
+              <Video size={12} className="text-amber-500 shrink-0" />
               <span className="text-amber-500 font-medium">{t('federation.recordingOn')}</span>
             </>
           ) : (
             <>
-              <VideoOff size={12} className="text-th-text-s flex-shrink-0" />
+              <VideoOff size={12} className="text-th-text-s shrink-0" />
               <span className="text-th-text-s">{t('federation.recordingOff')}</span>
             </>
           )}

src/components/Layout.jsx

@@ -52,7 +52,7 @@ export default function Layout() {
         {/* Email verification banner */}
         {user && user.email_verified === 0 && (
           <div className="bg-amber-500/15 border-b border-amber-500/30 px-4 py-2.5 flex items-center justify-center gap-3 text-sm">
-            <AlertTriangle size={15} className="text-amber-400 flex-shrink-0" />
+            <AlertTriangle size={15} className="text-amber-400 shrink-0" />
             <span className="text-amber-200">{t('auth.emailVerificationBanner')}</span>
             <button
               onClick={handleResendVerification}

src/components/Modal.jsx

@@ -3,7 +3,7 @@ import { X } from 'lucide-react';
 export default function Modal({ title, children, onClose, maxWidth = 'max-w-lg' }) {
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      <div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+      <div className="fixed inset-0 bg-black/60 backdrop-blur-xs" onClick={onClose} />
       <div className={`relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full ${maxWidth}`}>
         {/* Header */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-th-border rounded-t-2xl">

src/components/Navbar.jsx

@@ -38,7 +38,7 @@ export default function Navbar({ onMenuClick }) {
     : '?';
 
   return (
-    <header className="sticky top-0 z-20 bg-th-nav border-b border-th-border backdrop-blur-sm">
+    <header className="sticky top-0 z-20 bg-th-nav border-b border-th-border backdrop-blur-xs">
       <div className="flex items-center justify-between h-16 px-4 md:px-6">
         {/* Left section */}
         <div className="flex items-center gap-3">

src/components/NotificationBell.jsx

@@ -148,7 +148,7 @@ export default function NotificationBell() {
                       ${n.read ? 'hover:bg-th-hover' : 'bg-th-accent/5 hover:bg-th-accent/10'}`}
                   >
                     {/* Icon */}
-                    <span className="text-lg flex-shrink-0 mt-0.5">{notificationIcon(n.type)}</span>
+                    <span className="text-lg shrink-0 mt-0.5">{notificationIcon(n.type)}</span>
 
                     {/* Content */}
                     <div className="flex-1 min-w-0">
@@ -164,7 +164,7 @@ export default function NotificationBell() {
                     </div>
 
                     {/* Right side: unread dot, link icon, delete button */}
-                    <div className="flex flex-col items-end gap-1 flex-shrink-0">
+                    <div className="flex flex-col items-end gap-1 shrink-0">
                       {!n.read && (
                         <span className="w-2 h-2 rounded-full bg-th-accent mt-1" />
                       )}
@@ -173,7 +173,7 @@ export default function NotificationBell() {
                       )}
                       <button
                         onClick={(e) => handleDelete(e, n.id)}
-                        className="opacity-0 group-hover:opacity-100 p-0.5 rounded hover:text-th-error transition-all text-th-text-s/50"
+                        className="opacity-0 group-hover:opacity-100 p-0.5 rounded-sm hover:text-th-error transition-all text-th-text-s/50"
                         title={t('notifications.delete')}
                       >
                         <X size={13} />

src/components/RecordingList.jsx

@@ -133,7 +133,7 @@ export default function RecordingList({ recordings, onRefresh }) {
             </div>
 
             {/* Actions */}
-            <div className="flex items-center gap-1 flex-shrink-0">
+            <div className="flex items-center gap-1 shrink-0">
               <button
                 onClick={() => handlePublish(rec.recordID, !rec.published)}
                 disabled={loading[rec.recordID] === 'publishing'}

src/components/RoomCard.jsx

@@ -80,7 +80,7 @@ export default function RoomCard({ room, onDelete }) {
           <span>Max: {room.max_participants}</span>
         )}
         {room.access_code && (
-          <span className="px-1.5 py-0.5 bg-th-warning/15 text-th-warning rounded text-[10px] font-medium">
+          <span className="px-1.5 py-0.5 bg-th-warning/15 text-th-warning rounded-sm text-[10px] font-medium">
             {t('common.protected')}
           </span>
         )}

src/components/Sidebar.jsx

@@ -43,7 +43,7 @@ export default function Sidebar({ open, onClose }) {
 
   const linkClasses = ({ isActive }) =>
     `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${isActive
-      ? 'bg-th-accent text-th-accent-t shadow-sm'
+      ? 'bg-th-accent text-th-accent-t shadow-xs'
       : 'text-th-text-s hover:text-th-text hover:bg-th-hover'
     }`;
 
@@ -106,7 +106,7 @@ export default function Sidebar({ open, onClose }) {
           <div className="p-4 border-t border-th-border">
             <div className="flex items-center gap-3">
               <div
-                className="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-bold flex-shrink-0 overflow-hidden"
+                className="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-bold shrink-0 overflow-hidden"
                 style={{ backgroundColor: user?.avatar_color || '#6366f1' }}
               >
                 {user?.avatar_image ? (

src/components/ThemeSelector.jsx

@@ -10,7 +10,7 @@ export default function ThemeSelector({ onClose }) {
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      <div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+      <div className="fixed inset-0 bg-black/60 backdrop-blur-xs" onClick={onClose} />
 
       <div className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-2xl max-h-[80vh] overflow-hidden">
         {/* Header */}