style: reduce padding, adopt crisp square tabs/cards, keep round buttons and single accent

frontend/src/features/settings/EcosystemView.tsx

@@ -92,15 +92,15 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
   const baseUrl = window.location.origin;
 
   return (
-    <div className="max-w-4xl mx-auto space-y-6">
+    <div className="w-full bg-[#222428] border border-white/[0.08] divide-y divide-white/[0.08]">
       {/* Section 1: API Keys for Smarthome & Automation */}
-      <div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08]">
+      <div className="p-4">
         <div className="flex items-center gap-3 mb-2">
-          <div className="w-10 h-10 rounded-xl bg-[#1d8cf8] text-white flex items-center justify-center shadow-sm">
-            <Key className="w-5 h-5" />
+          <div className="w-8 h-8 bg-[#1d8cf8] text-white flex items-center justify-center flex-shrink-0">
+            <Key className="w-4 h-4" />
           </div>
           <div>
-            <h3 className="text-lg font-bold text-white">
+            <h3 className="text-base font-bold text-white">
               Webhooks & Ingestion API-Schlüssel
             </h3>
             <p className="text-xs sm:text-sm text-zinc-400">
@@ -109,17 +109,17 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
           </div>
         </div>
 
-        <form onSubmit={handleCreateKey} className="mt-5 flex flex-col sm:flex-row gap-2.5">
+        <form onSubmit={handleCreateKey} className="mt-3 flex flex-col sm:flex-row gap-2">
           <input
             type="text"
             value={newKeyName}
             onChange={(e) => setNewKeyName(e.target.value)}
             placeholder="Bezeichnung (z. B. Home Assistant, Proxmox Backup, Rauchmelder)…"
-            className="flex-1 h-11 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
+            className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
           />
           <button
             type="submit"
-            className="h-11 px-6 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center justify-center gap-1.5 transition-colors shadow-sm"
+            className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center justify-center gap-1.5 transition-colors shadow-sm"
           >
             <Plus className="w-4 h-4" />
             <span>API-Key erzeugen</span>
@@ -127,9 +127,9 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
         </form>
 
         {newlyCreatedKey && (
-          <div className="mt-4 p-4 rounded-2xl bg-[#22c55e]/15 border border-[#22c55e]/30 flex flex-wrap items-center justify-between gap-3">
+          <div className="mt-3 p-3 bg-[#1d8cf8]/15 border border-[#1d8cf8]/30 flex flex-wrap items-center justify-between gap-3">
             <div className="min-w-0">
-              <p className="text-xs font-semibold text-[#22c55e] mb-1">
+              <p className="text-xs font-semibold text-[#1d8cf8] mb-1">
                 Neuer API-Schlüssel erstellt (bitte jetzt kopieren):
               </p>
               <code className="text-xs sm:text-sm font-mono text-white break-all">
@@ -138,7 +138,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
             </div>
             <button
               onClick={() => handleCopy(newlyCreatedKey)}
-              className="h-9 px-4 rounded-full bg-[#22c55e] text-white font-medium text-xs flex items-center gap-1.5 hover:bg-[#16a34a] transition-colors shadow-sm"
+              className="h-8 px-3 rounded-full bg-[#1d8cf8] text-white font-medium text-xs flex items-center gap-1.5 hover:bg-[#3b9cfc] transition-colors shadow-sm"
             >
               {copiedKey ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
               <span>{copiedKey ? 'Kopiert!' : 'Key kopieren'}</span>
@@ -147,16 +147,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
         )}
 
         {/* Active Keys List */}
-        <div className="mt-5 space-y-2">
+        <div className="mt-3 border border-white/[0.06] divide-y divide-white/[0.06]">
           {keys.length === 0 ? (
-            <p className="text-xs text-zinc-500 py-2">
+            <p className="text-xs text-zinc-500 px-3 py-2">
               Noch keine dedizierten API-Schlüssel hinterlegt.
             </p>
           ) : (
             keys.map((k) => (
               <div
                 key={k.id}
-                className="p-3.5 rounded-2xl bg-[#16171a] border border-white/[0.06] flex items-center justify-between gap-3"
+                className="px-3 py-1.5 bg-[#16171a] flex items-center justify-between gap-3"
               >
                 <div>
                   <span className="text-sm font-medium text-white">{k.name}</span>
@@ -169,7 +169,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
                 </div>
                 <button
                   onClick={() => handleDeleteKey(k.id)}
-                  className="w-8 h-8 rounded-full hover:bg-[#ef4444]/20 text-zinc-500 hover:text-[#ef4444] flex items-center justify-center transition-colors"
+                  className="w-7 h-7 rounded-full hover:bg-white/[0.1] text-zinc-500 hover:text-white flex items-center justify-center transition-colors"
                 >
                   <Trash2 className="w-3.5 h-3.5" />
                 </button>
@@ -180,13 +180,13 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
       </div>
 
       {/* Section 2: Interactive Smarthome Webhook Simulator */}
-      <div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08]">
-        <div className="flex items-center gap-3 mb-4">
-          <div className="w-10 h-10 rounded-xl bg-[#a855f7] text-white flex items-center justify-center shadow-sm">
-            <Webhook className="w-5 h-5" />
+      <div className="p-4">
+        <div className="flex items-center gap-3 mb-3">
+          <div className="w-7 h-7 bg-[#1d8cf8] text-white flex items-center justify-center flex-shrink-0">
+            <Webhook className="w-4 h-4" />
           </div>
           <div>
-            <h3 className="text-lg font-bold text-white">
+            <h3 className="text-base font-bold text-white">
               Live Smarthome Webhook-Simulator
             </h3>
             <p className="text-xs sm:text-sm text-zinc-400">
@@ -195,7 +195,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
           </div>
         </div>
 
-        <div className="flex flex-wrap gap-2 mb-4">
+        <div className="flex flex-wrap gap-1.5 mb-3">
           {[
             { label: '🧺 Waschmaschine fertig', text: 'Waschmaschine im Keller ist fertig – Wäsche aufhängen!', prio: 'high' as PriorityLevel },
             { label: '🚨 Rauchmelder Batterie', text: 'Rauchmelder Dachgeschoss meldet niedrige Batterie (12%)', prio: 'urgent' as PriorityLevel },
@@ -208,24 +208,24 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
                 setSimTitle(preset.text);
                 setSimPriority(preset.prio);
               }}
-              className="px-3.5 py-1.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white transition-colors"
+              className="px-3 py-1 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white transition-colors"
             >
               {preset.label}
             </button>
           ))}
         </div>
 
-        <div className="flex flex-col sm:flex-row gap-2.5">
+        <div className="flex flex-col sm:flex-row gap-2">
           <input
             type="text"
             value={simTitle}
             onChange={(e) => setSimTitle(e.target.value)}
-            className="flex-1 h-11 px-4 rounded-full bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
+            className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
           />
           <button
             type="button"
             onClick={handleSimulateWebhook}
-            className="h-11 px-6 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center justify-center gap-1.5 transition-colors shadow-sm"
+            className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center justify-center gap-1.5 transition-colors shadow-sm"
           >
             <Zap className="w-4 h-4" />
             <span>Webhook jetzt abfeuern</span>
@@ -233,16 +233,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
         </div>
 
         {simStatus && (
-          <p className="mt-3 text-xs font-medium text-[#22c55e]">{simStatus}</p>
+          <p className="mt-3 text-xs font-medium text-[#1d8cf8]">{simStatus}</p>
         )}
 
         {/* Code Example Snippets */}
-        <div className="mt-6 space-y-3">
+        <div className="mt-4 space-y-2">
           <div className="flex items-center gap-2 text-xs font-medium text-zinc-400">
             <Terminal className="w-3.5 h-3.5 text-[#1d8cf8]" />
             <span>cURL / Home Assistant REST Command:</span>
           </div>
-          <pre className="p-4 rounded-2xl bg-[#16171a] border border-white/[0.06] font-mono text-xs text-[#22c55e] overflow-x-auto">
+          <pre className="p-3 bg-[#16171a] border border-white/[0.06] font-mono text-xs text-zinc-300 overflow-x-auto">
 {`curl -X POST "${baseUrl}/api/v1/webhooks/ingest?token=${exampleToken}" \\
   -H "Content-Type: application/json" \\
   -d '{
@@ -255,10 +255,10 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
       </div>
 
       {/* Section 3: Data Sovereignty & Export */}
-      <div className="p-6 sm:p-8 rounded-3xl bg-[#222428] border border-white/[0.08] flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+      <div className="p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
         <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-xl bg-[#22c55e] text-white flex items-center justify-center flex-shrink-0 shadow-sm">
-            <ShieldCheck className="w-5 h-5" />
+          <div className="w-7 h-7 bg-[#1d8cf8] text-white flex items-center justify-center flex-shrink-0">
+            <ShieldCheck className="w-4 h-4" />
           </div>
           <div>
             <h3 className="text-base font-bold text-white">
@@ -272,7 +272,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
 
         <button
           onClick={handleFullExport}
-          className="h-11 px-6 rounded-full bg-[#22c55e] hover:bg-[#16a34a] text-white font-medium text-sm flex items-center gap-2 transition-colors flex-shrink-0 shadow-sm"
+          className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center gap-2 transition-colors flex-shrink-0 shadow-sm"
         >
           <Download className="w-4 h-4" />
           <span>Komplett-Backup (.json)</span>