refine dashboard theme and orange accent styling

frontend/src/pages/SupportLogin.tsx

@@ -9,7 +9,7 @@ export function SupportLogin() {
   return (
     <SectionCard title="Support Login" subtitle="Login-Panel fuer Supporter konfigurieren">
       <div className="grid gap-5 xl:grid-cols-[1fr_400px]">
-        <Card>
+        <Card className="surface-card">
           <CardHeader>
             <div>
               <CardTitle>Panel-Konfiguration</CardTitle>
@@ -77,10 +77,10 @@ export function SupportLogin() {
             <Separator />
 
             <div className="flex gap-2">
-              <Button color="primary" startContent={<Save size={16} />} onPress={saveSupportLogin}>
+              <Button variant="light" className="accent-button" startContent={<Save size={16} />} onPress={saveSupportLogin}>
                 Speichern & Panel senden
               </Button>
-              <Button variant="bordered" startContent={<Send size={16} />}>
+              <Button variant="light" className="ghost-button" startContent={<Send size={16} />}>
                 Panel manuell senden
               </Button>
             </div>
@@ -88,7 +88,7 @@ export function SupportLogin() {
         </Card>
 
         <div className="space-y-4">
-          <Card>
+          <Card className="surface-card">
             <CardHeader>
               <div>
                 <CardTitle>Live Vorschau</CardTitle>
@@ -96,10 +96,10 @@ export function SupportLogin() {
               </div>
             </CardHeader>
             <CardContent>
-              <Card>
+              <Card className="surface-card-muted">
                 <CardHeader>
                   <div className="flex items-center gap-2">
-                    <LogIn size={16} />
+                    <LogIn size={16} className="accent-text" />
                     <div>
                       <CardTitle>{supportLogin?.config?.title || 'Support Login'}</CardTitle>
                       <CardDescription>{supportLogin?.config?.description || 'Melde dich als Support an/ab.'}</CardDescription>
@@ -107,14 +107,14 @@ export function SupportLogin() {
                   </div>
                 </CardHeader>
                 <CardContent className="flex gap-2">
-                  <Button size="sm" color="primary">{supportLogin?.config?.loginLabel || 'Login'}</Button>
-                  <Button size="sm" variant="bordered">{supportLogin?.config?.logoutLabel || 'Logout'}</Button>
+                  <Button size="sm" variant="light" className="accent-button">{supportLogin?.config?.loginLabel || 'Login'}</Button>
+                  <Button size="sm" variant="light" className="ghost-button">{supportLogin?.config?.logoutLabel || 'Logout'}</Button>
                 </CardContent>
               </Card>
             </CardContent>
           </Card>
 
-          <Card>
+          <Card className="surface-card">
             <CardHeader>
               <div>
                 <CardTitle>Aktive Supporter</CardTitle>
@@ -123,7 +123,7 @@ export function SupportLogin() {
             </CardHeader>
             <CardContent className="flex flex-col gap-2">
               {supportLogin?.status?.active?.length ? supportLogin.status.active.map((s, i) => (
-                <Card key={i}>
+                <Card key={i} className="surface-card-muted">
                   <CardContent className="flex items-center gap-3">
                     <Avatar name={s.username?.[0]} size="sm" className="size-6" />
                     <span className="font-medium">{s.username || s.userId}</span>