refactor: style css -> tailwindcss

frontend/app/app.css

@@ -1,4 +1,36 @@
-@import "tailwindcss";
+@import "tailwindcss/theme.css";
+@import "tailwindcss/utilities.css";
+
+@theme {
+  --font-sans: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
+
+  --color-brand: #1978d4;
+  --color-brand-strong: #0e5fb9;
+  --color-brand-soft: #edf6ff;
+
+  --color-success: #18b979;
+  --color-success-strong: #0f7d55;
+  --color-success-soft: #e8f7f1;
+
+  --color-danger: #d75b5b;
+  --color-danger-strong: #a94f4f;
+  --color-danger-soft: #fff6f6;
+
+  --color-warning: #e6a33c;
+  --color-warning-soft: #fff0ee;
+
+  --color-ink: #27394d;
+  --color-ink-muted: #5d7186;
+  --color-ink-subtle: #8b99a8;
+
+  --color-line: #dce4ec;
+  --color-line-soft: #edf1f5;
+
+  --color-bg: #f3f6f9;
+  --color-bg-panel: #ffffff;
+  --color-bg-canvas: #f9fbfd;
+  --color-bg-log: #17212b;
+}
 
 @font-face {
   font-family: "Inter";
@@ -16,97 +48,44 @@
   font-display: swap;
 }
 
-:root {
-  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
-  color: #1f354b;
-  background: #f3f6f9;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
+@layer base {
+  :root {
+    font-family: var(--font-sans);
+    color: #1f354b;
+    background: #f3f6f9;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+  }
+
+  html,
+  body {
+    margin: 0;
+    min-width: 1024px;
+    min-height: 100%;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
 }
 
-* { box-sizing: border-box; }
-html, body { margin: 0; min-width: 1024px; min-height: 100%; }
-button, input, select, textarea { font: inherit; }
+@layer utilities {
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 5px;
+  }
 
-.auth-loading,
-.login-page {
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+  }
 
-.auth-loading {
-  gap: 12px;
-  color: #61758a;
-}
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background: #d9e1e9;
+  }
 
-.auth-loading > span {
-  width: 20px;
-  height: 20px;
-  border: 2px solid #bfd5e9;
-  border-top-color: #1677ff;
-  border-radius: 50%;
-  animation: auth-spin 0.8s linear infinite;
-}
-
-@keyframes auth-spin { to { transform: rotate(360deg); } }
-
-.login-page {
-  padding: 48px;
-  background:
-    radial-gradient(circle at 20% 15%, rgba(22, 119, 255, 0.12), transparent 34%),
-    linear-gradient(145deg, #eef5fb, #f8fafc 55%, #edf3f8);
-}
-
-.login-card {
-  width: 420px;
-  padding: 42px;
-  border: 1px solid #dbe6ef;
-  border-radius: 18px;
-  background: rgba(255, 255, 255, 0.96);
-  box-shadow: 0 22px 60px rgba(37, 63, 88, 0.14);
-}
-
-.login-brand {
-  width: 46px;
-  height: 46px;
-  display: grid;
-  place-items: center;
-  border-radius: 13px;
-  color: white;
-  background: linear-gradient(145deg, #1177e8, #25a1f2);
-}
-
-.login-kicker {
-  margin: 26px 0 8px;
-  color: #1677ff;
-  font-size: 11px;
-  font-weight: 750;
-  letter-spacing: 0.14em;
-}
-
-.login-card h1 { margin: 0; font-size: 27px; }
-.login-description { margin: 10px 0 28px; color: #728398; }
-.login-card form { display: grid; gap: 18px; }
-.login-card label { display: grid; gap: 8px; color: #465b70; font-size: 13px; }
-.login-card input {
-  width: 100%;
-  padding: 12px 14px;
-  border: 1px solid #cad8e5;
-  border-radius: 9px;
-  outline: none;
-  color: #18334f;
-  background: white;
-}
-.login-card input:focus { border-color: #1677ff; box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12); }
-.login-card button {
-  min-height: 44px;
-  border: 0;
-  border-radius: 9px;
-  color: white;
-  background: #1677ff;
-  cursor: pointer;
-}
-.login-card button:disabled { opacity: 0.65; cursor: wait; }
-.login-error { margin: -4px 0 0; color: #d4380d; font-size: 13px; }
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background: #c4d0dc;
+  }
+}