feat: multi-workspace support + channels grouped by workspace and network

- PostizContext: new PostizWorkspace type, multi-workspace storage
  (postiz_workspaces_v2), auto-migration from legacy single config,
  addWorkspace / updateWorkspace / removeWorkspace, clients map
- Settings: full rewrite with workspace card list (add / edit / delete)
- Compose: channels displayed in two levels — workspace section then
  network type (X/Twitter, Instagram, LinkedIn...) within each workspace;
  submit routes posts and image uploads per workspace
- MediaLibraryModal: workspace tabs when multiple workspaces configured,
  returned items carry their workspaceId

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

artifacts/postiz-mobile/app/(tabs)/settings.tsx

@@ -1,7 +1,7 @@
 import { Feather } from "@expo/vector-icons";
 import axios from "axios";
 import * as Haptics from "expo-haptics";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import {
   ActivityIndicator,
   Alert,
@@ -15,49 +15,73 @@ import {
 } from "react-native";
 import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { usePostiz, DEFAULT_BASE_URL } from "@/context/PostizContext";
+import { PostizWorkspace, DEFAULT_BASE_URL, usePostiz } from "@/context/PostizContext";
 import { useColors } from "@/hooks/useColors";
 import { extractError } from "@/lib/extractError";
 
+type FormState = {
+  id?: string;
+  name: string;
+  url: string;
+  key: string;
+};
+
+const EMPTY_FORM: FormState = { name: "", url: DEFAULT_BASE_URL, key: "" };
+
 export default function SettingsScreen() {
   const colors = useColors();
   const insets = useSafeAreaInsets();
-  const { apiKey, baseUrl, isConfigured, saveSettings, clearSettings } = usePostiz();
+  const { workspaces, isConfigured, addWorkspace, updateWorkspace, removeWorkspace } = usePostiz();
 
-  const [inputKey, setInputKey] = useState(apiKey);
-  const [inputUrl, setInputUrl] = useState(baseUrl || DEFAULT_BASE_URL);
+  const [form, setForm] = useState<FormState | null>(null);
   const [showKey, setShowKey] = useState(false);
   const [validating, setValidating] = useState(false);
   const [saving, setSaving] = useState(false);
   const [validationStatus, setValidationStatus] = useState<"idle" | "ok" | "error">("idle");
-  const [errorDetail, setErrorDetail] = useState<string>("");
+  const [errorDetail, setErrorDetail] = useState("");
 
-  useEffect(() => {
-    setInputKey(apiKey);
-    setInputUrl(baseUrl || DEFAULT_BASE_URL);
-  }, [apiKey, baseUrl]);
+  const openAdd = () => {
+    setForm(EMPTY_FORM);
+    setShowKey(false);
+    resetValidation();
+  };
+
+  const openEdit = (ws: PostizWorkspace) => {
+    setForm({ id: ws.id, name: ws.name, url: ws.baseUrl, key: ws.apiKey });
+    setShowKey(false);
+    resetValidation();
+  };
+
+  const closeForm = () => {
+    setForm(null);
+    resetValidation();
+  };
+
+  const resetValidation = () => {
+    setValidationStatus("idle");
+    setErrorDetail("");
+  };
+
+  const patchForm = (patch: Partial<FormState>) => {
+    setForm((prev) => (prev ? { ...prev, ...patch } : prev));
+    resetValidation();
+  };
 
   const handleValidate = async () => {
-    if (!inputKey.trim() || !inputUrl.trim()) {
+    if (!form?.key.trim() || !form?.url.trim()) {
       Alert.alert("Missing fields", "Please enter both API key and base URL.");
       return;
     }
     setValidating(true);
-    setValidationStatus("idle");
-    setErrorDetail("");
-    const cleanUrl = inputUrl.trim().replace(/\/$/, "");
+    resetValidation();
+    const cleanUrl = form.url.trim().replace(/\/$/, "");
+    const variants = [form.key.trim(), `Bearer ${form.key.trim()}`];
+    let lastError = "";
 
-    const authVariants = [
-      inputKey.trim(),
-      `Bearer ${inputKey.trim()}`,
-    ];
-
-    let lastError: string = "";
-
-    for (const authHeader of authVariants) {
+    for (const auth of variants) {
       try {
         await axios.get(`${cleanUrl}/integrations`, {
-          headers: { Authorization: authHeader },
+          headers: { Authorization: auth },
           timeout: 10000,
           maxRedirects: 0,
         });
@@ -67,21 +91,17 @@ export default function SettingsScreen() {
         return;
       } catch (err: unknown) {
         if (axios.isAxiosError(err)) {
-          const status = err.response?.status;
-          if (status === 307 || status === 301 || status === 302 || status === 308) {
-            const location = err.response?.headers?.location ?? "unknown";
-            lastError = `HTTP ${status} redirect → ${location}. The API rejected the request and redirected to login. Check the Authorization header format or the base URL.`;
-            continue;
-          }
-          if (status === 401 || status === 403) {
-            lastError = `HTTP ${status}: Invalid or expired API key.`;
+          const s = err.response?.status;
+          if (s === 307 || s === 301 || s === 302 || s === 308) {
+            const loc = err.response?.headers?.location ?? "unknown";
+            lastError = `HTTP ${s} redirect → ${loc}. Check the Authorization format or base URL.`;
             continue;
           }
+          if (s === 401 || s === 403) { lastError = `HTTP ${s}: Invalid or expired API key.`; continue; }
         }
         lastError = extractError(err);
       }
     }
-
     setErrorDetail(lastError);
     setValidationStatus("error");
     Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
@@ -89,37 +109,38 @@ export default function SettingsScreen() {
   };
 
   const handleSave = async () => {
-    if (!inputKey.trim() || !inputUrl.trim()) {
-      Alert.alert("Missing fields", "Please enter both API key and base URL.");
-      return;
-    }
+    if (!form) return;
+    if (!form.name.trim()) { Alert.alert("Missing name", "Please enter a name for this workspace."); return; }
+    if (!form.key.trim() || !form.url.trim()) { Alert.alert("Missing fields", "Please enter both API key and base URL."); return; }
     setSaving(true);
     try {
-      await saveSettings(inputKey.trim(), inputUrl.trim().replace(/\/$/, ""));
+      const ws = { name: form.name.trim(), apiKey: form.key.trim(), baseUrl: form.url.trim().replace(/\/$/, "") };
+      if (form.id) {
+        await updateWorkspace({ ...ws, id: form.id });
+      } else {
+        await addWorkspace(ws);
+      }
       Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
-      Alert.alert("Saved", "Settings saved successfully.");
+      closeForm();
     } catch (err: unknown) {
-      Alert.alert("Error", `Failed to save settings.\n${extractError(err)}`);
+      Alert.alert("Error", `Failed to save.\n${extractError(err)}`);
     } finally {
       setSaving(false);
     }
   };
 
-  const handleClear = () => {
+  const handleDelete = (ws: PostizWorkspace) => {
     Alert.alert(
-      "Disconnect",
-      "Remove your API key and disconnect from Postiz?",
+      "Remove workspace",
+      `Remove "${ws.name}"? Channels from this workspace will no longer be available.`,
       [
         { text: "Cancel", style: "cancel" },
         {
-          text: "Disconnect",
+          text: "Remove",
           style: "destructive",
           onPress: async () => {
-            await clearSettings();
-            setInputKey("");
-            setInputUrl(DEFAULT_BASE_URL);
-            setValidationStatus("idle");
-            setErrorDetail("");
+            if (form?.id === ws.id) closeForm();
+            await removeWorkspace(ws.id);
           },
         },
       ]
@@ -140,281 +161,251 @@ export default function SettingsScreen() {
       keyboardShouldPersistTaps="handled"
       showsVerticalScrollIndicator={false}
     >
-      {!isConfigured && (
+      {/* Status banner */}
+      {!isConfigured ? (
         <View style={[styles.banner, { backgroundColor: colors.primary + "18", borderColor: colors.primary + "40" }]}>
           <Feather name="info" size={16} color={colors.primary} />
           <Text style={[styles.bannerText, { color: colors.primary }]}>
-            Connect to your Postiz instance to get started
+            Add a workspace to get started
           </Text>
         </View>
-      )}
-
-      {isConfigured && (
+      ) : (
         <View style={[styles.connectedBadge, { backgroundColor: colors.success + "18", borderColor: colors.success + "40" }]}>
           <Feather name="check-circle" size={14} color={colors.success} />
           <Text style={[styles.connectedText, { color: colors.success }]}>
-            Connected to Postiz
+            {workspaces.length} workspace{workspaces.length > 1 ? "s" : ""} configured
           </Text>
         </View>
       )}
 
-      <View style={styles.section}>
-        <Text style={[styles.label, { color: colors.mutedForeground }]}>BASE URL</Text>
-        <View style={[styles.inputWrap, { backgroundColor: colors.card, borderColor: colors.border }]}>
-          <Feather name="globe" size={16} color={colors.mutedForeground} style={styles.inputIcon} />
-          <TextInput
-            style={[styles.input, { color: colors.foreground }]}
-            placeholder="https://postiz.example.com/api/public/v1"
-            placeholderTextColor={colors.mutedForeground}
-            value={inputUrl}
-            onChangeText={(t) => { setInputUrl(t); setValidationStatus("idle"); setErrorDetail(""); }}
-            autoCapitalize="none"
-            autoCorrect={false}
-            keyboardType="url"
-          />
-        </View>
-      </View>
-
-      <View style={styles.section}>
-        <Text style={[styles.label, { color: colors.mutedForeground }]}>API KEY</Text>
-        <View style={[styles.inputWrap, { backgroundColor: colors.card, borderColor: colors.border }]}>
-          <Feather name="key" size={16} color={colors.mutedForeground} style={styles.inputIcon} />
-          <TextInput
-            style={[styles.input, { color: colors.foreground }]}
-            placeholder="Enter your API key"
-            placeholderTextColor={colors.mutedForeground}
-            value={inputKey}
-            onChangeText={(t) => { setInputKey(t); setValidationStatus("idle"); setErrorDetail(""); }}
-            secureTextEntry={!showKey}
-            autoCapitalize="none"
-            autoCorrect={false}
-          />
-          <TouchableOpacity onPress={() => setShowKey((v) => !v)} activeOpacity={0.7}>
-            <Feather name={showKey ? "eye-off" : "eye"} size={16} color={colors.mutedForeground} />
-          </TouchableOpacity>
-        </View>
-
-        {validationStatus === "ok" && (
-          <View style={styles.validationRow}>
-            <Feather name="check-circle" size={13} color={colors.success} />
-            <Text style={[styles.validationText, { color: colors.success }]}>
-              Connection successful
-            </Text>
-          </View>
-        )}
-
-        {validationStatus === "error" && (
-          <View style={[styles.errorBox, { backgroundColor: colors.error + "12", borderColor: colors.error + "30" }]}>
-            <View style={styles.errorHeader}>
-              <Feather name="x-circle" size={13} color={colors.error} />
-              <Text style={[styles.errorTitle, { color: colors.error }]}>
-                Could not connect
-              </Text>
-            </View>
-            {!!errorDetail && (
-              <ScrollView style={styles.errorScroll} nestedScrollEnabled>
-                <Text style={[styles.errorDetail, { color: colors.error }]} selectable>
-                  {errorDetail}
+      {/* Workspace cards */}
+      {workspaces.map((ws) => (
+        <View key={ws.id} style={[styles.wsCard, { backgroundColor: colors.card, borderColor: colors.border }]}>
+          <View style={styles.wsCardHeader}>
+            <View style={styles.wsCardLeft}>
+              <View style={[styles.wsIcon, { backgroundColor: colors.primary + "18" }]}>
+                <Feather name="briefcase" size={14} color={colors.primary} />
+              </View>
+              <View>
+                <Text style={[styles.wsName, { color: colors.foreground }]}>{ws.name}</Text>
+                <Text style={[styles.wsUrl, { color: colors.mutedForeground }]} numberOfLines={1}>
+                  {ws.baseUrl.replace(/^https?:\/\//, "").replace(/\/api.*$/, "")}
                 </Text>
-              </ScrollView>
-            )}
+              </View>
+            </View>
+            <View style={styles.wsCardActions}>
+              <TouchableOpacity onPress={() => openEdit(ws)} activeOpacity={0.7} style={styles.iconBtn}>
+                <Feather name="edit-2" size={15} color={colors.mutedForeground} />
+              </TouchableOpacity>
+              <TouchableOpacity onPress={() => handleDelete(ws)} activeOpacity={0.7} style={styles.iconBtn}>
+                <Feather name="trash-2" size={15} color={colors.destructive} />
+              </TouchableOpacity>
+            </View>
           </View>
-        )}
-      </View>
+        </View>
+      ))}
 
-      <TouchableOpacity
-        onPress={handleValidate}
-        activeOpacity={0.8}
-        disabled={validating}
-        style={[styles.validateBtn, { backgroundColor: colors.card, borderColor: colors.border }]}
-      >
-        {validating ? (
-          <ActivityIndicator color={colors.primary} size="small" />
-        ) : (
-          <>
-            <Feather name="wifi" size={15} color={colors.primary} />
-            <Text style={[styles.validateText, { color: colors.primary }]}>
-              Test Connection
-            </Text>
-          </>
-        )}
-      </TouchableOpacity>
-
-      <TouchableOpacity
-        onPress={handleSave}
-        activeOpacity={0.85}
-        disabled={saving}
-        style={[styles.saveBtn, { backgroundColor: saving ? colors.muted : colors.primary }]}
-      >
-        {saving ? (
-          <ActivityIndicator color={colors.primaryForeground} size="small" />
-        ) : (
-          <>
-            <Feather name="save" size={15} color={colors.primaryForeground} />
-            <Text style={[styles.saveText, { color: colors.primaryForeground }]}>
-              Save Settings
-            </Text>
-          </>
-        )}
-      </TouchableOpacity>
-
-      {isConfigured && (
+      {/* Add workspace button */}
+      {!form && (
         <TouchableOpacity
-          onPress={handleClear}
+          onPress={openAdd}
           activeOpacity={0.8}
-          style={[styles.clearBtn, { borderColor: colors.destructive + "60" }]}
+          style={[styles.addBtn, { backgroundColor: colors.card, borderColor: colors.border }]}
         >
-          <Feather name="log-out" size={14} color={colors.destructive} />
-          <Text style={[styles.clearText, { color: colors.destructive }]}>Disconnect</Text>
+          <Feather name="plus" size={16} color={colors.primary} />
+          <Text style={[styles.addBtnText, { color: colors.primary }]}>Add workspace</Text>
         </TouchableOpacity>
       )}
 
-      <View style={styles.footer}>
-        <Text style={[styles.footerText, { color: colors.mutedForeground }]}>
-          Your API key is stored securely on this device and never transmitted to third parties.
-        </Text>
-      </View>
+      {/* Add / Edit form */}
+      {form && (
+        <View style={[styles.formCard, { backgroundColor: colors.card, borderColor: colors.border }]}>
+          <Text style={[styles.formTitle, { color: colors.foreground }]}>
+            {form.id ? "Edit workspace" : "Add workspace"}
+          </Text>
+
+          {/* Name */}
+          <View style={styles.fieldGroup}>
+            <Text style={[styles.label, { color: colors.mutedForeground }]}>NAME</Text>
+            <View style={[styles.inputWrap, { backgroundColor: colors.background, borderColor: colors.border }]}>
+              <Feather name="briefcase" size={15} color={colors.mutedForeground} />
+              <TextInput
+                style={[styles.input, { color: colors.foreground }]}
+                placeholder="My Client"
+                placeholderTextColor={colors.mutedForeground}
+                value={form.name}
+                onChangeText={(t) => patchForm({ name: t })}
+                autoCorrect={false}
+              />
+            </View>
+          </View>
+
+          {/* Base URL */}
+          <View style={styles.fieldGroup}>
+            <Text style={[styles.label, { color: colors.mutedForeground }]}>BASE URL</Text>
+            <View style={[styles.inputWrap, { backgroundColor: colors.background, borderColor: colors.border }]}>
+              <Feather name="globe" size={15} color={colors.mutedForeground} />
+              <TextInput
+                style={[styles.input, { color: colors.foreground }]}
+                placeholder="https://postiz.example.com/api/public/v1"
+                placeholderTextColor={colors.mutedForeground}
+                value={form.url}
+                onChangeText={(t) => patchForm({ url: t })}
+                autoCapitalize="none"
+                autoCorrect={false}
+                keyboardType="url"
+              />
+            </View>
+          </View>
+
+          {/* API Key */}
+          <View style={styles.fieldGroup}>
+            <Text style={[styles.label, { color: colors.mutedForeground }]}>API KEY</Text>
+            <View style={[styles.inputWrap, { backgroundColor: colors.background, borderColor: colors.border }]}>
+              <Feather name="key" size={15} color={colors.mutedForeground} />
+              <TextInput
+                style={[styles.input, { color: colors.foreground }]}
+                placeholder="Enter your API key"
+                placeholderTextColor={colors.mutedForeground}
+                value={form.key}
+                onChangeText={(t) => patchForm({ key: t })}
+                secureTextEntry={!showKey}
+                autoCapitalize="none"
+                autoCorrect={false}
+              />
+              <TouchableOpacity onPress={() => setShowKey((v) => !v)} activeOpacity={0.7}>
+                <Feather name={showKey ? "eye-off" : "eye"} size={15} color={colors.mutedForeground} />
+              </TouchableOpacity>
+            </View>
+
+            {validationStatus === "ok" && (
+              <View style={styles.validRow}>
+                <Feather name="check-circle" size={13} color={colors.success} />
+                <Text style={[styles.validText, { color: colors.success }]}>Connection successful</Text>
+              </View>
+            )}
+
+            {validationStatus === "error" && (
+              <View style={[styles.errorBox, { backgroundColor: colors.error + "12", borderColor: colors.error + "30" }]}>
+                <View style={styles.errorHeader}>
+                  <Feather name="x-circle" size={13} color={colors.error} />
+                  <Text style={[styles.errorTitle, { color: colors.error }]}>Could not connect</Text>
+                </View>
+                {!!errorDetail && (
+                  <ScrollView style={styles.errorScroll} nestedScrollEnabled>
+                    <Text style={[styles.errorDetail, { color: colors.error }]} selectable>{errorDetail}</Text>
+                  </ScrollView>
+                )}
+              </View>
+            )}
+          </View>
+
+          {/* Form actions */}
+          <TouchableOpacity
+            onPress={handleValidate}
+            activeOpacity={0.8}
+            disabled={validating}
+            style={[styles.validateBtn, { backgroundColor: colors.background, borderColor: colors.border }]}
+          >
+            {validating ? (
+              <ActivityIndicator color={colors.primary} size="small" />
+            ) : (
+              <>
+                <Feather name="wifi" size={15} color={colors.primary} />
+                <Text style={[styles.validateText, { color: colors.primary }]}>Test Connection</Text>
+              </>
+            )}
+          </TouchableOpacity>
+
+          <View style={styles.formBtnsRow}>
+            <TouchableOpacity
+              onPress={closeForm}
+              activeOpacity={0.8}
+              style={[styles.cancelBtn, { borderColor: colors.border }]}
+            >
+              <Text style={[styles.cancelText, { color: colors.mutedForeground }]}>Cancel</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={handleSave}
+              activeOpacity={0.85}
+              disabled={saving}
+              style={[styles.saveBtn, { backgroundColor: saving ? colors.muted : colors.primary }]}
+            >
+              {saving ? (
+                <ActivityIndicator color={colors.primaryForeground} size="small" />
+              ) : (
+                <>
+                  <Feather name="save" size={15} color={colors.primaryForeground} />
+                  <Text style={[styles.saveText, { color: colors.primaryForeground }]}>
+                    {form.id ? "Update" : "Save"}
+                  </Text>
+                </>
+              )}
+            </TouchableOpacity>
+          </View>
+        </View>
+      )}
+
+      <Text style={[styles.footerText, { color: colors.mutedForeground }]}>
+        API keys are stored securely on this device and never transmitted to third parties.
+      </Text>
     </KeyboardAwareScrollView>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 20,
-    gap: 16,
-  },
+  container: { paddingHorizontal: 20, gap: 14 },
   banner: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10,
-    paddingHorizontal: 14,
-    paddingVertical: 12,
-    borderRadius: 12,
-    borderWidth: 1,
-  },
-  bannerText: {
-    fontSize: 13,
-    fontFamily: "Inter_500Medium",
-    flex: 1,
+    flexDirection: "row", alignItems: "center", gap: 10,
+    paddingHorizontal: 14, paddingVertical: 12, borderRadius: 12, borderWidth: 1,
   },
+  bannerText: { fontSize: 13, fontFamily: "Inter_500Medium", flex: 1 },
   connectedBadge: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 10,
-    borderWidth: 1,
-    alignSelf: "flex-start",
+    flexDirection: "row", alignItems: "center", gap: 6,
+    paddingHorizontal: 12, paddingVertical: 8, borderRadius: 10, borderWidth: 1, alignSelf: "flex-start",
   },
-  connectedText: {
-    fontSize: 12,
-    fontFamily: "Inter_600SemiBold",
-  },
-  section: {
-    gap: 8,
-  },
-  label: {
-    fontSize: 11,
-    fontFamily: "Inter_600SemiBold",
-    letterSpacing: 0.8,
-    marginLeft: 2,
+  connectedText: { fontSize: 12, fontFamily: "Inter_600SemiBold" },
+  wsCard: { borderRadius: 14, borderWidth: 1, overflow: "hidden" },
+  wsCardHeader: { flexDirection: "row", alignItems: "center", paddingHorizontal: 14, paddingVertical: 12 },
+  wsCardLeft: { flex: 1, flexDirection: "row", alignItems: "center", gap: 12 },
+  wsIcon: { width: 32, height: 32, borderRadius: 10, alignItems: "center", justifyContent: "center" },
+  wsName: { fontSize: 14, fontFamily: "Inter_600SemiBold" },
+  wsUrl: { fontSize: 11, fontFamily: "Inter_400Regular", marginTop: 1 },
+  wsCardActions: { flexDirection: "row", gap: 4 },
+  iconBtn: { padding: 8 },
+  addBtn: {
+    flexDirection: "row", alignItems: "center", justifyContent: "center",
+    gap: 8, paddingVertical: 13, borderRadius: 14, borderWidth: 1, borderStyle: "dashed",
   },
+  addBtnText: { fontSize: 14, fontFamily: "Inter_600SemiBold" },
+  formCard: { borderRadius: 14, borderWidth: 1, padding: 16, gap: 14 },
+  formTitle: { fontSize: 15, fontFamily: "Inter_600SemiBold" },
+  fieldGroup: { gap: 6 },
+  label: { fontSize: 11, fontFamily: "Inter_600SemiBold", letterSpacing: 0.8, marginLeft: 2 },
   inputWrap: {
-    flexDirection: "row",
-    alignItems: "center",
-    borderRadius: 12,
-    borderWidth: 1,
-    paddingHorizontal: 14,
-    paddingVertical: 12,
-    gap: 10,
-  },
-  inputIcon: {
-    flexShrink: 0,
-  },
-  input: {
-    flex: 1,
-    fontSize: 14,
-    fontFamily: "Inter_400Regular",
-  },
-  validationRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    marginLeft: 2,
-  },
-  validationText: {
-    fontSize: 12,
-    fontFamily: "Inter_400Regular",
-  },
-  errorBox: {
-    borderRadius: 10,
-    borderWidth: 1,
-    padding: 12,
-    gap: 6,
-  },
-  errorHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-  },
-  errorTitle: {
-    fontSize: 12,
-    fontFamily: "Inter_600SemiBold",
-  },
-  errorScroll: {
-    maxHeight: 80,
-  },
-  errorDetail: {
-    fontSize: 11,
-    fontFamily: "Inter_400Regular",
-    lineHeight: 16,
+    flexDirection: "row", alignItems: "center",
+    borderRadius: 10, borderWidth: 1, paddingHorizontal: 12, paddingVertical: 11, gap: 10,
   },
+  input: { flex: 1, fontSize: 14, fontFamily: "Inter_400Regular" },
+  validRow: { flexDirection: "row", alignItems: "center", gap: 6, marginLeft: 2 },
+  validText: { fontSize: 12, fontFamily: "Inter_400Regular" },
+  errorBox: { borderRadius: 10, borderWidth: 1, padding: 12, gap: 6 },
+  errorHeader: { flexDirection: "row", alignItems: "center", gap: 6 },
+  errorTitle: { fontSize: 12, fontFamily: "Inter_600SemiBold" },
+  errorScroll: { maxHeight: 80 },
+  errorDetail: { fontSize: 11, fontFamily: "Inter_400Regular", lineHeight: 16 },
   validateBtn: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 8,
-    paddingVertical: 12,
-    borderRadius: 12,
-    borderWidth: 1,
-  },
-  validateText: {
-    fontSize: 14,
-    fontFamily: "Inter_600SemiBold",
+    flexDirection: "row", alignItems: "center", justifyContent: "center",
+    gap: 8, paddingVertical: 11, borderRadius: 10, borderWidth: 1,
   },
+  validateText: { fontSize: 14, fontFamily: "Inter_600SemiBold" },
+  formBtnsRow: { flexDirection: "row", gap: 10 },
+  cancelBtn: { flex: 1, paddingVertical: 12, borderRadius: 10, borderWidth: 1, alignItems: "center" },
+  cancelText: { fontSize: 14, fontFamily: "Inter_500Medium" },
   saveBtn: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 8,
-    paddingVertical: 14,
-    borderRadius: 14,
-  },
-  saveText: {
-    fontSize: 15,
-    fontFamily: "Inter_600SemiBold",
-  },
-  clearBtn: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 8,
-    paddingVertical: 12,
-    borderRadius: 12,
-    borderWidth: 1,
-  },
-  clearText: {
-    fontSize: 14,
-    fontFamily: "Inter_500Medium",
-  },
-  footer: {
-    marginTop: 8,
-  },
-  footerText: {
-    fontSize: 12,
-    fontFamily: "Inter_400Regular",
-    textAlign: "center",
-    lineHeight: 18,
+    flex: 2, flexDirection: "row", alignItems: "center", justifyContent: "center",
+    gap: 8, paddingVertical: 12, borderRadius: 10,
   },
+  saveText: { fontSize: 14, fontFamily: "Inter_600SemiBold" },
+  footerText: { fontSize: 12, fontFamily: "Inter_400Regular", textAlign: "center", lineHeight: 18, marginTop: 4 },
 });