fix(front-end): css file duplicte

frontend/src/app/shared/components/app-button/app-button.component.scss

@@ -60,3 +60,20 @@
     color: var(--color-text);
   }
 }
+
+.btn-ghost {
+  background-color: var(--color-bg-card);
+  border-color: var(--color-border);
+  color: var(--color-text);
+  &:hover:not(:disabled) {
+    background-color: var(--color-surface-muted);
+  }
+}
+
+.btn-danger {
+  background-color: var(--color-danger-500);
+  color: #fff;
+  &:hover:not(:disabled) {
+    background-color: #dc2626;
+  }
+}

frontend/src/app/shared/components/app-button/app-button.component.ts

@@ -9,7 +9,9 @@ import { CommonModule } from '@angular/common';
   styleUrl: './app-button.component.scss',
 })
 export class AppButtonComponent {
-  variant = input<'primary' | 'secondary' | 'outline' | 'text'>('primary');
+  variant = input<
+    'primary' | 'secondary' | 'outline' | 'text' | 'ghost' | 'danger'
+  >('primary');
   type = input<'button' | 'submit' | 'reset'>('button');
   disabled = input<boolean>(false);
   fullWidth = input<boolean>(false);

frontend/src/app/shared/components/app-card/app-card.component.html

@@ -1,3 +1,15 @@
 <div class="card">
-  <ng-content></ng-content>
+  @if (title() || subtitle()) {
+    <header class="card-header">
+      @if (title()) {
+        <h3 class="card-title">{{ title() }}</h3>
+      }
+      @if (subtitle()) {
+        <p class="card-subtitle">{{ subtitle() }}</p>
+      }
+    </header>
+  }
+  <div class="card-body">
+    <ng-content></ng-content>
+  </div>
 </div>

frontend/src/app/shared/components/app-card/app-card.component.scss

@@ -8,7 +8,6 @@
   border-radius: var(--radius-lg);
   border: 1px solid var(--color-border);
   box-shadow: var(--shadow-sm);
-  padding: var(--space-6);
   transition:
     box-shadow 0.2s ease,
     transform 0.2s ease,
@@ -22,3 +21,23 @@
     border-color: var(--color-neutral-300);
   }
 }
+
+.card-header {
+  padding: var(--space-6) var(--space-6) var(--space-4);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.card-title {
+  margin: 0;
+  font-size: 1.2rem;
+}
+
+.card-subtitle {
+  margin: var(--space-2) 0 0;
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+}
+
+.card-body {
+  padding: var(--space-6);
+}

frontend/src/app/shared/components/app-card/app-card.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 @Component({
   selector: 'app-card',
@@ -6,4 +6,7 @@ import { Component } from '@angular/core';
   templateUrl: './app-card.component.html',
   styleUrl: './app-card.component.scss',
 })
-export class AppCardComponent {}
+export class AppCardComponent {
+  title = input<string>('');
+  subtitle = input<string>('');
+}

frontend/src/app/shared/components/app-input/app-input.component.scss

@@ -14,20 +14,24 @@ label {
   margin-left: 2px;
 }
 .form-control {
-  padding: 0.5rem 0.75rem;
+  padding: 0.625rem 0.75rem;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   font-size: 1rem;
   width: 100%;
   background: var(--color-bg-card);
   color: var(--color-text);
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    background-color 0.2s ease;
   &:focus {
     outline: none;
     border-color: var(--color-brand);
-    box-shadow: 0 0 0 2px rgba(250, 207, 10, 0.25);
+    box-shadow: var(--focus-ring);
   }
   &:disabled {
-    background: var(--color-neutral-100);
+    background: var(--color-surface-muted);
     cursor: not-allowed;
   }
 }

frontend/src/app/shared/components/app-select/app-select.component.scss

@@ -10,16 +10,20 @@ label {
   color: var(--color-text);
 }
 .form-control {
-  padding: 0.5rem 0.75rem;
+  padding: 0.625rem 0.75rem;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   font-size: 1rem;
   width: 100%;
   background: var(--color-bg-card);
   color: var(--color-text);
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
   &:focus {
     outline: none;
     border-color: var(--color-brand);
+    box-shadow: var(--focus-ring);
   }
 }
 .error-text {