first commit

assets/css/main.css

@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --bg: #0c1117;
+  --bg-elevated: #151b24;
+  --bg-panel: #1a222e;
+  --border: #2a3544;
+  --text: #e8eef6;
+  --text-muted: #8b9bb0;
+  --accent: #3d8bfd;
+  --accent-soft: rgba(61, 139, 253, 0.15);
+  --danger: #f07178;
+  --success: #7fd992;
+}
+
+html,
+body,
+#__nuxt {
+  min-height: 100%;
+  background: var(--bg);
+  color: var(--text);
+}
+
+body {
+  font-family: 'Segoe UI', 'Malgun Gothic', system-ui, sans-serif;
+  background-image:
+    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(61, 139, 253, 0.18), transparent),
+    radial-gradient(ellipse 60% 40% at 90% 0%, rgba(127, 217, 146, 0.08), transparent),
+    linear-gradient(180deg, #0c1117 0%, #0a0e14 100%);
+  background-attachment: fixed;
+}
+
+@layer components {
+  .btn {
+    @apply inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition;
+  }
+
+  .panel {
+    @apply rounded-lg border backdrop-blur;
+    border-color: var(--border);
+    background-color: color-mix(in srgb, var(--bg-panel) 90%, transparent);
+  }
+
+  .btn-primary {
+    @apply btn text-white hover:brightness-110 disabled:opacity-50;
+    background-color: var(--accent);
+  }
+
+  .btn-ghost {
+    @apply btn bg-transparent hover:brightness-125;
+    border: 1px solid var(--border);
+    color: var(--text);
+  }
+
+  .btn-danger {
+    @apply btn text-white hover:brightness-110;
+    background-color: color-mix(in srgb, var(--danger) 90%, transparent);
+  }
+
+  .input {
+    @apply w-full rounded-md px-3 py-2 text-sm outline-none;
+    border: 1px solid var(--border);
+    background-color: var(--bg-elevated);
+    color: var(--text);
+  }
+
+  .input:focus {
+    box-shadow: 0 0 0 2px var(--accent);
+  }
+
+  .input::placeholder {
+    color: var(--text-muted);
+  }
+}