Upload beautify

resources/css/app.css

@@ -1,3 +1,65 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.form-label {
+  @apply block text-sm text-soft mb-1;
+}
+
+.form-input {
+  @apply w-full bg-deep border border-nebula-500/30 rounded-lg px-4 py-2
+         text-white placeholder-gray-500
+         focus:outline-none focus:ring-2 focus:ring-accent;
+}
+
+.form-textarea {
+  @apply w-full bg-deep border border-nebula-500/30 rounded-lg px-4 py-2
+         text-white resize-none
+         focus:outline-none focus:ring-2 focus:ring-accent;
+}
+
+.form-file {
+  @apply w-full text-sm text-soft
+         file:bg-panel file:border-0 file:px-4 file:py-2
+         file:rounded-lg file:text-white
+         hover:file:bg-nebula-600/40;
+}
+
+.btn-primary {
+  @apply bg-accent text-deep px-6 py-2 rounded-lg
+         font-medium hover:brightness-110 transition;
+}
+
+.btn-secondary {
+  @apply bg-nebula-500/30 text-white px-5 py-2 rounded-lg
+         hover:bg-nebula-500/50 transition;
+}
+
+@layer components {
+  /* Ensure plain inputs, textareas and selects match the dark form styles
+     so we don't end up with white backgrounds + white text. */
+  input,
+  input[type="text"],
+  input[type="email"],
+  input[type="password"],
+  textarea,
+  select {
+    @apply bg-deep text-white border border-nebula-500/30 rounded-lg px-4 py-2
+           placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-accent;
+  }
+
+  /* Keep file inputs styled separately (file controls use .form-file class).
+     This prevents the native file button from inheriting the same padding. */
+  input[type="file"] {
+    @apply bg-transparent text-soft p-0;
+  }
+}
+
+
+@layer base {
+  *,:before,:after {
+    box-sizing: border-box;
+    border: 0 solid transparent;
+  }
+}
+