refactoring html and css

server/static/form.css

@@ -0,0 +1,82 @@
+/* ========== FORM ========== */
+.form-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.75rem;
+}
+
+@media (max-width: 64em) {
+    .form-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 48em) {
+    .form-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+
+    label {
+        font-size: 0.75rem;
+        font-weight: 600;
+        color: var(--on-surface-variant);
+        letter-spacing: 0.02em;
+    }
+}
+
+.form-input {
+    height: 2rem;
+    padding: 0 0.5rem;
+    border: 1px solid var(--outline-variant);
+    border-radius: var(--border-radius-sm);
+    background: var(--surface-container-lowest);
+    font-size: 0.75rem;
+    color: var(--on-surface);
+    outline: none;
+    transition: border-color var(--transition);
+    width: 100%;
+
+    &:focus {
+        border-color: var(--primary);
+    }
+
+    &::placeholder {
+        color: var(--on-surface-variant);
+        opacity: 0.6;
+    }
+}
+
+textarea.form-input {
+    height: auto;
+    padding: 0.5rem;
+    resize: vertical;
+}
+
+select.form-input {
+    appearance: auto;
+}
+
+.form-card {
+    max-width: 30rem;
+
+    .card > div {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+}
+
+.form-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding-top: 0.5rem;
+    border-top: 1px solid var(--outline-variant);
+    margin-top: 0.5rem;
+}