Frontend style refactoring

wwwroot/css/form.css

@@ -0,0 +1,49 @@
+.form {
+  padding: calc(var(--s4) * 2);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--s3);
+  max-width: 600px;
+}
+
+.avatar-section {
+  display: flex;
+  align-items: center;
+  gap: var(--s4);
+}
+
+.avatar-preview {
+  width: 64px;
+  height: 64px;
+  background: var(--f2-bg);
+  border: var(--border-width) solid var(--f2-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2em;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.avatar-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.form-actions {
+  display: flex;
+  gap: var(--s4);
+  margin-top: var(--s4);
+}
+
+.danger-btn {
+  color: #ff6b6b;
+  border-color: #ff6b6b;
+}
+
+.danger-btn:hover {
+  background: #ff6b6b;
+  color: var(--f1-bg);
+}