Fix sum stuff

.gitignore

@@ -22,3 +22,67 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Environment
+.env
+.env.*
+
+# Node / package managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+.turbo
+
+# Vite / build caches
+.vite/
+.cache/
+dist/
+build/
+
+# TypeScript
+*.tsbuildinfo
+
+# Tauri / Rust
+src-tauri/target/
+target/
+/dist/tauri
+
+# CMake / build artifacts
+build/
+build-x64/
+cmake-build-debug/
+CMakeFiles/
+bin/
+lib/
+Debug/
+Release/
+*.obj
+*.o
+*.lib
+*.a
+*.so
+*.dylib
+*.exe
+*.pdb
+*.ilk
+
+# Visual Studio
+.vs/
+bin/
+obj/
+*.user
+*.userosscache
+*.VC.db
+*.VC.VC.opendb
+
+# IDEs
+.idea/
+*.sublime-workspace
+
+# Misc
+.DS_Store
+Thumbs.db
+
+# Logs again (catch-all)
+*.log
+

GUI

@@ -0,0 +1 @@
+Subproject commit eece2beb29eabca46ba58ed3fa034146e0d4bd41

RLIdentity/RLidentity

@@ -0,0 +1 @@
+Subproject commit 13b28286dc1263bb98c55645b1c3d16f9f724a7b

src-tauri/.gitignore

@@ -1,3 +1,19 @@
+# src-tauri (Rust / Tauri) ignores
+
+# Rust
+/target/
+**/target/
+
+# Tauri build artifacts
+/.tauri/build/
+/.tauri/bundle/
+
+# Editor
+.vscode/
+.idea/
+
+# Logs
+*.log
 # Generated by Cargo
 # will have compiled files and executables
 /target/

src-tauri/Cargo.lock

@@ -3457,9 +3457,11 @@ name = "rlidentitygui"
 version = "2.0.0"
 dependencies = [
  "dirs 5.0.1",
+ "hex",
  "reqwest 0.12.28",
  "serde",
  "serde_json",
+ "sha2",
  "sysinfo",
  "tauri",
  "tauri-build",

src-tauri/Cargo.toml

@@ -24,6 +24,6 @@ dirs = "5"
 tauri-plugin-updater = "2.10.0"
 tauri-plugin-process = "2.3.1"
 sha2 = "0.10"
-
+hex = "0.4"
 [target.'cfg(target_os = "windows")'.dependencies]
 window-vibrancy = "0.5.2"

src-tauri/src/lib.rs

@@ -1,11 +1,14 @@
-use reqwest;
-use tauri::{Manager, WebviewWindow};
-use window_vibrancy::apply_acrylic;
+use reqwest::Client;
 use serde::Serialize;
-use std::fs;
-use sysinfo::System;
+use std::path::{Path, PathBuf};
 use std::process::Command;
-use std::path::Path;
+use tokio::fs;
+use tauri::{Manager, State, WebviewWindow};
+use window_vibrancy::apply_acrylic;
+use sysinfo::System;
+use sha2::{Sha256, Digest};
+
+// --- types ---
 
 #[derive(Serialize)]
 pub struct Status {
@@ -29,86 +32,66 @@ pub struct KeyValidationResponse {
     pub user: Option<UserInfo>,
 }
 
-#[tauri::command]
-fn minimize_to_tray(window: WebviewWindow) {
-    let _ = window.hide();
+// global state for optimization
+struct AppState {
+    client: Client,
+    app_data: PathBuf,
 }
 
-#[tauri::command]
-fn get_hwid() -> String {
-    // Simple HWID using Windows UUID
-    let output = Command::new("wmic")
-        .args(["csproduct", "get", "uuid"])
-        .output()
-        .ok();
+// --- helpers ---
 
-    if let Some(out) = output {
-        let s = String::from_utf8_lossy(&out.stdout);
-        let lines: Vec<&str> = s.lines().collect();
-        if lines.len() >= 2 {
-            return lines[1].trim().to_string();
-        }
-    }
-    "UNKNOWN-HWID".to_string()
-}
-
-fn get_last_epic_id() -> String {
-    if let Some(mut path) = dirs::data_dir() {
-        path.push("RLidentity");
-        path.push("last_epic_id.txt");
-        
-        if let Ok(content) = fs::read_to_string(path) {
+async fn get_last_epic_id(base_path: &Path) -> String {
+    let path = base_path.join("last_epic_id.txt");
+    if let Ok(content) = fs::read_to_string(path).await {
         let trimmed = content.trim();
         if trimmed.len() == 32 {
             return trimmed.to_string();
         }
     }
-    }
     "".to_string()
 }
 
+// --- commands ---
+
 #[tauri::command]
-async fn validate_key(key: String, hwid: String) -> Result<KeyValidationResponse, String> {
-    let epic_id = get_last_epic_id();
-    // Added epicId query parameter to the URL
-    let url = format!(
-        "https://api.rlidentity.me/keys/{}?hwid={}&epicId={}", 
-        key, hwid, epic_id
-    );
+fn get_hwid() -> String {
+    // direct registry query for speed
+    let output = Command::new("reg")
+        .args(["query", r"HKLM\SOFTWARE\Microsoft\Cryptography", "/v", "MachineGuid"])
+        .output();
 
-    let client = reqwest::Client::builder()
-        .danger_accept_invalid_certs(true)
-        .build()
-        .map_err(|e| format!("Client Error: {}", e))?;
+    if let Ok(out) = output {
+        let s = String::from_utf8_lossy(&out.stdout);
+        if let Some(guid) = s.split_whitespace().last() {
+            if guid.len() == 36 && guid.contains('-') {
+                return guid.to_string();
+            }
+        }
+    }
+    "UNKNOWN-HWID".to_string()
+}
 
-    println!("[LOG] Connecting to: {}", url);
-    println!("[LOG] Sending Epic ID: {}", epic_id);
 
-    let res = client.get(&url)
+
+#[tauri::command]
+async fn validate_key(
+    key: String, 
+    hwid: String, 
+    state: State<'_, AppState>
+) -> Result<KeyValidationResponse, String> {
+    let epic_id = get_last_epic_id(&state.app_data).await;
+    let url = format!("https://api.rlidentity.me/keys/{}?hwid={}&epicId={}", key, hwid, epic_id);
+    
+    let res = state.client.get(&url)
         .send()
         .await
-        .map_err(|e| {
-            let err_msg = format!("Network Error: {}. Is the server on 443?", e);
-            println!("[ERROR] {}", err_msg);
-            err_msg
-        })?;
+        .map_err(|e| format!("network error: {}", e))?;
 
-    println!("[LOG] HTTP Status: {}", res.status());
-
-    let json: serde_json::Value = res.json().await.map_err(|e| {
-        let err_msg = format!("JSON Parse Error: {}", e);
-        println!("[ERROR] {}", err_msg);
-        err_msg
-    })?;
-    
-    println!("[LOG] Server Payload: {:?}", json);
+    let json: serde_json::Value = res.json().await.map_err(|e| format!("json error: {}", e))?;
     
     let status = json.get("status").and_then(|v| v.as_str()).unwrap_or("unknown").to_string();
-    
     let user = json.get("user").map(|u| UserInfo {
-        userId: u.get("userId").and_then(|v| {
-            v.as_str().map(|s| s.to_string()).or_else(|| v.as_i64().map(|n| n.to_string()))
-        }),
+        userId: u.get("userId").and_then(|v| v.as_str().map(|s| s.to_string()).or_else(|| v.as_i64().map(|n| n.to_string()))),
         discordId: u.get("discordId").and_then(|v| v.as_str()).map(|s| s.to_string()),
         epicId: u.get("epicId").and_then(|v| v.as_str()).map(|s| s.to_string()),
         username: u.get("username").and_then(|v| v.as_str()).map(|s| s.to_string()),
@@ -120,18 +103,70 @@ async fn validate_key(key: String, hwid: String) -> Result<KeyValidationResponse
 }
 
 #[tauri::command]
-async fn save_config(name: String, platform: String) -> Result<(), String> {
-    let mut path = dirs::data_dir().ok_or("Could not find AppData")?;
-    path.push("RLidentity");
-    fs::create_dir_all(&path).map_err(|e| e.to_string())?;
-    path.push("config.json");
+async fn inject_dll(state: State<'_, AppState>) -> Result<String, String> {
+    let injector_path = state.app_data.join("injector.exe");
+    let dll_path = state.app_data.join("RLIdentity.dll");
     
-    let json = serde_json::json!({
-        "spoofedName": name,
-        "platform": platform
-    });
+    let mut s = System::new_all();
+    s.refresh_processes();
+    if s.processes_by_exact_name("RocketLeague.exe").next().is_none() {
+        return Err("rocket league is not running".into());
+    }
 
-    fs::write(path, serde_json::to_string_pretty(&json).unwrap()).map_err(|e| e.to_string())?;
+    if !injector_path.exists() || !dll_path.exists() {
+        return Err("files missing, wait for update".into());
+    }
+
+    let output = Command::new(injector_path)
+        .arg("RocketLeague.exe")
+        .arg(dll_path)
+        .output()
+        .map_err(|e| format!("exec failed: {}", e))?;
+
+    if output.status.success() {
+        Ok("injected".into())
+    } else {
+        Err("injection failed".into())
+    }
+}
+
+#[tauri::command]
+async fn download_assets(state: State<'_, AppState>) -> Result<(), String> {
+    fs::create_dir_all(&state.app_data).await.map_err(|e| e.to_string())?;
+
+    // in a real scenario, you'd fetch these hashes from your api first
+    let assets = [
+        (
+            "injector.exe", 
+            "https://git.rlidentity.me/bits/RLidentity/src/branch/dll/injector.exe",
+            "EXPECTED_SHA256_HASH_HERE" 
+        ),
+        (
+            "RLIdentity.dll", 
+            "https://git.rlidentity.me/.../RLIdentity.dll",
+            "EXPECTED_SHA256_HASH_HERE"
+        ),
+    ];
+
+    for (name, url, expected_hash) in assets {
+        let file_path = state.app_data.join(name);
+        
+        // download
+        let res = state.client.get(url).send().await.map_err(|e| e.to_string())?;
+        let bytes = res.bytes().await.map_err(|e| e.to_string())?;
+
+        // verify integrity (signature check)
+        let mut hasher = Sha256::new();
+        hasher.update(&bytes);
+        let actual_hash = hex::encode(hasher.finalize());
+
+        if actual_hash != expected_hash {
+            return Err(format!("integrity check failed for {}: hash mismatch", name));
+        }
+
+        // only write if the "signature" (hash) is correct
+        fs::write(file_path, bytes).await.map_err(|e| e.to_string())?;
+    }
     Ok(())
 }
 
@@ -144,74 +179,26 @@ async fn check_status() -> Status {
 }
 
 #[tauri::command]
-async fn download_assets() -> Result<(), String> {
-    let mut path = dirs::data_dir().ok_or("Could not find AppData")?;
-    path.push("RLidentity");
-    fs::create_dir_all(&path).map_err(|e| e.to_string())?;
-
-    let client = reqwest::Client::new();
-    let assets = [
-        ("injector.exe", "https://git.rlidentity.me/bits/RLidentity/raw/branch/dll/injector.exe"),
-        ("RLIdentity.dll", "https://git.rlidentity.me/bits/RLidentity/raw/branch/dll/RLIdentity.dll"),
-    ];
-
-    for (name, url) in assets {
-        let mut file_path = path.clone();
-        file_path.push(name);
-        
-        let response = client.get(url).send().await.map_err(|e| e.to_string())?;
-        let bytes = response.bytes().await.map_err(|e| e.to_string())?;
-        fs::write(file_path, bytes).map_err(|e| e.to_string())?;
-    }
-    Ok(())
+fn minimize_to_tray(window: WebviewWindow) {
+    let _ = window.hide();
 }
 
-#[tauri::command]
-async fn inject_dll(_discordId: Option<String>) -> Result<String, String> {
-    let mut base_path = dirs::data_dir().ok_or("Could not find AppData")?;
-    base_path.push("RLidentity");
-    
-    let injector_path = base_path.join("injector.exe");
-    let dll_path = base_path.join("RLIdentity.dll");
-    
-    let mut s = System::new_all();
-    s.refresh_processes();
-    if s.processes_by_exact_name("RocketLeague.exe").next().is_none() {
-        return Err("Rocket League is not running!".into());
-    }
-
-    if !injector_path.exists() || !dll_path.exists() {
-        return Err("Required files missing. Please wait for update to finish.".into());
-    }
-
-    // Run the injector and capture FULL output
-    let output = Command::new(injector_path)
-        .arg("RocketLeague.exe")
-        .arg(dll_path)
-        .output()
-        .map_err(|e| format!("Execution failed: {}", e))?;
-
-    let stdout = String::from_utf8_lossy(&output.stdout).to_string();
-    let stderr = String::from_utf8_lossy(&output.stderr).to_string();
-
-    let full_log = format!("STDOUT:\n{}\n\nSTDERR:\n{}", stdout, stderr);
-    println!("[LOG] Injector results:\n{}", full_log);
-
-    if output.status.success() {
-        Ok(format!("Successfully injected!\n\n{}", stdout))
-    } else {
-        Err(format!("Injection failed!\n\n{}", full_log))
-    }
-}
+// --- main ---
 
 pub fn run() {
     tauri::Builder::default()
+        .manage(AppState {
+            client: Client::builder()
+                .danger_accept_invalid_certs(false)
+                .build()
+                .unwrap(),
+            app_data: dirs::data_dir().unwrap().join("RLidentity"),
+        })
         .plugin(tauri_plugin_opener::init())
         .plugin(tauri_plugin_process::init())
         .plugin(tauri_plugin_updater::Builder::new().build())
         .invoke_handler(tauri::generate_handler![
             minimize_to_tray, 
-            save_config, 
             inject_dll,
             validate_key,
             check_status,
@@ -219,39 +206,29 @@ pub fn run() {
             download_assets
         ])
         .setup(|app| {
-            let icon_bytes = include_bytes!("../icons/32x32.png");
-            let icon = tauri::image::Image::from_bytes(icon_bytes)?;
-
             let window = app.get_webview_window("main").unwrap();
-            window.set_icon(icon.clone())?;
             
             #[cfg(target_os = "windows")]
             apply_acrylic(&window, Some((18, 18, 18, 125))).ok();
 
             let handle = app.handle().clone();
             let tray_menu = tauri::menu::Menu::with_items(app, &[
-                &tauri::menu::MenuItem::with_id(app, "tray_quit", "Quit", true, None::<&str>)?,
+                &tauri::menu::MenuItem::with_id(app, "quit", "Quit", true, None::<&str>)?,
             ])?;
 
-            tauri::tray::TrayIconBuilder::new()
-                .icon(icon)
+            let _ = tauri::tray::TrayIconBuilder::new()
+                .icon(app.default_window_icon().unwrap().clone())
                 .menu(&tray_menu)
                 .on_menu_event(move |_app, event| {
-                    if event.id().as_ref() == "tray_quit" { handle.exit(0); }
+                    if event.id().as_ref() == "quit" { handle.exit(0); }
                 })
                 .on_tray_icon_event(|tray, event| {
-                    if let tauri::tray::TrayIconEvent::Click { 
-                        button: tauri::tray::MouseButton::Left, 
-                        .. 
-                    } = event {
-                        let app = tray.app_handle();
-                        if let Some(window) = app.get_webview_window("main") {
-                            let _ = window.show();
-                            let _ = window.set_focus();
-                        }
+                    if let tauri::tray::TrayIconEvent::Click { button: tauri::tray::MouseButton::Left, .. } = event {
+                        let _ = tray.app_handle().get_webview_window("main").unwrap().show();
                     }
                 })
                 .build(app)?;
+
             Ok(())
         })
         .run(tauri::generate_context!())

src/App.tsx

@@ -25,12 +25,24 @@ interface KeyValidationResponse {
   user: UserInfo | null;
 }
 
+const THEMES = [
+  { id: "phantom",   label: "Phantom",   color: "#a855f7" },
+  { id: "glacier",   label: "Glacier",   color: "#38bdf8" },
+  { id: "inferno",   label: "Inferno",   color: "#f97316" },
+  { id: "matrix",    label: "Matrix",    color: "#00ff41" },
+  { id: "synthwave", label: "Synthwave", color: "#f72585" },
+  { id: "eclipse",   label: "Eclipse",   color: "#fbbf24" },
+] as const;
+
+type ThemeId = typeof THEMES[number]["id"];
+
 const LS_KEYS = {
   spoofed: "rlidentity.spoofedUsername",
   apiKey: "rlidentity.apiKey",
   minimizeToTray: "rlidentity.minimizeToTray",
   platform: "rlidentity.platform",
   autoInject: "rlidentity.autoInject",
+  theme: "rlidentity.theme",
 } as const;
 
 const GITHUB_URL = "https://git.rlidentity.me/bits/rlidentity";
@@ -56,7 +68,6 @@ async function tryInvoke<T>(cmd: string, args?: Record<string, unknown>) {
 async function openUrl(url: string) {
   const fallback = () => window.open(url, "_blank", "noopener,noreferrer");
   if (!isTauriRuntime()) return fallback();
-
   try {
     const mod: any = await import("@tauri-apps/plugin-opener");
     if (typeof mod.openUrl === "function") {
@@ -75,6 +86,7 @@ export default function App() {
   const initialMinToTray  = useMemo(() => localStorage.getItem(LS_KEYS.minimizeToTray) === "true", []);
   const initialPlatform   = useMemo(() => localStorage.getItem(LS_KEYS.platform) ?? "Epic", []);
   const initialAutoInject = useMemo(() => localStorage.getItem(LS_KEYS.autoInject) === "true", []);
+  const initialTheme      = useMemo(() => (localStorage.getItem(LS_KEYS.theme) ?? "phantom") as ThemeId, []);
 
   const [apiKey, setApiKey]               = useState(initialApiKey);
   const [spoofedUsername, setSpoofedUsername] = useState(initialSpoofed);
@@ -91,8 +103,12 @@ export default function App() {
   const [platform, setPlatform]           = useState(initialPlatform);
   const [autoInject, setAutoInject]       = useState(initialAutoInject);
   const [platformPickerOpen, setPlatformPickerOpen] = useState(false);
+  const [theme, setTheme]                 = useState<ThemeId>(initialTheme);
 
-  // Easter Egg State
+  // Update modal
+  const [pendingUpdate, setPendingUpdate] = useState<{ version: string; install: () => Promise<void> } | null>(null);
+
+  // Easter egg
   const [debugOpen, setDebugOpen]   = useState(false);
   const [logoClicks, setLogoClicks] = useState(0);
 
@@ -112,29 +128,25 @@ export default function App() {
     return () => clearTimeout(timer);
   }, [logoClicks]);
 
-  // Tutorial State
-  const [tutorialStep, setTutorialStep] = useState(-1);
-
-  // Startup Authorization & Update Check
+  // Apply theme
   useEffect(() => {
-    if (initialApiKey) {
-      authorize(initialApiKey);
-    }
+    document.documentElement.setAttribute("data-theme", theme);
+    localStorage.setItem(LS_KEYS.theme, theme);
+  }, [theme]);
+
+  // Startup
+  useEffect(() => {
+    if (initialApiKey) authorize(initialApiKey);
     syncAssetsAndCheckUpdates();
   }, []);
 
   async function syncAssetsAndCheckUpdates() {
     if (!isTauriRuntime()) return;
-    
-    // 1. Download DLL and Injector
     try {
       await tryInvoke("download_assets");
-      console.log("Assets synced successfully");
     } catch (e) {
       console.error("Failed to sync assets:", e);
     }
-
-    // 2. Check for App updates
     checkForUpdates();
   }
 
@@ -144,32 +156,27 @@ export default function App() {
       const { check } = await import("@tauri-apps/plugin-updater");
       const update = await check();
       if (update) {
-        console.log(`Update available: ${update.version}`);
-        const confirmed = window.confirm(`A new version (${update.version}) is available. Would you like to update?`);
-        if (confirmed) {
+        setPendingUpdate({
+          version: update.version,
+          install: async () => {
             setStatus("Updating...");
             await update.downloadAndInstall();
-          // The app will restart automatically after install on some platforms, 
-          // or we might need to relaunch. Tauri v2 updater usually handles this.
             const { relaunch } = await import("@tauri-apps/plugin-process");
             await relaunch();
-        }
+          },
+        });
       }
     } catch (e) {
       console.error("Failed to check for updates:", e);
     }
   }
 
-  // Sync revoked background to body
+  // Revoked bg
   useEffect(() => {
-    if (isRevoked) {
-        document.body.classList.add('revoked-bg');
-    } else {
-        document.body.classList.remove('revoked-bg');
-    }
+    document.body.classList.toggle("revoked-bg", isRevoked);
   }, [isRevoked]);
 
-  // Poll for Rocket League status & Auto Inject
+  // Poll RL status + auto-inject
   useEffect(() => {
     if (!isAuthorized || isRevoked) return;
     const interval = setInterval(async () => {
@@ -179,11 +186,7 @@ export default function App() {
           const wasRunning = rlStatus === "RL Running";
           const isRunning = res.is_running;
           setRlStatus(isRunning ? "RL Running" : "RL Closed");
-                
-                // Auto Inject Logic: if it just started running and autoInject is on
-                if (!wasRunning && isRunning && autoInject) {
-                  inject();
-                }
+          if (!wasRunning && isRunning && autoInject) inject();
         }
       } catch (e) {
         console.error(e);
@@ -193,39 +196,31 @@ export default function App() {
   }, [isAuthorized, isRevoked, rlStatus, autoInject]);
 
   async function authorize(keyToTry: string) {
-    if (!keyToTry.trim()) {
-        setStatus("Please enter a key");
-        return;
-    }
+    if (!keyToTry.trim()) { setStatus("Please enter a key"); return; }
     setStatus("validating key...");
     setIsRevoked(false);
     try {
       const hwid = await tryInvoke<string>("get_hwid") || "UNKNOWN-HWID";
       const res = await tryInvoke<KeyValidationResponse>("validate_key", { key: keyToTry.trim(), hwid });
 
-        if (res && res.status === "valid") {
+      if (res?.status === "valid") {
         localStorage.setItem(LS_KEYS.apiKey, keyToTry.trim());
         setUserData(res.user);
         setIsAuthorized(true);
         setIsRevoked(false);
         setStatus("ready");
-            
-            // Check for tutorial
-            if (res.user?.logins === 0) {
-              setTutorialStep(0);
-            }
-        } else if (res && res.status === "revoked") {
+      } else if (res?.status === "revoked") {
         setIsRevoked(true);
         setIsAuthorized(false);
         setStatus("Error: Key Revoked");
-        } else if (res && res.status === "invalid_hwid") {
+      } else if (res?.status === "invalid_hwid") {
         setStatus("Error: Key locked to another PC");
         setIsAuthorized(false);
       } else {
         setStatus("Error: Invalid key");
         setIsAuthorized(false);
       }
-    } catch (e) {
+    } catch {
       setStatus("Network Error: Check connection");
     }
   }
@@ -271,7 +266,7 @@ export default function App() {
     if (minimizeToTray) {
       await tryInvoke("minimize_to_tray");
     } else {
-      await tryWindowApi((w) => w.minimize());
+      await tryWindowApi(w => w.minimize());
     }
   }
 
@@ -280,41 +275,51 @@ export default function App() {
     window.location.reload();
   };
 
-  const tutorialSteps = [
-    { title: "Welcome to RLidentity", text: "Let's show you around. First, enter your spoofed username here.", target: "input" },
-    { title: "Injection", text: "Once Rocket League is running, click Inject to start. Or enable Auto-Inject in settings!", target: "btn-primary" },
-    { title: "Settings", text: "Customize your experience here. Change your platform or toggle Auto-Injection.", target: "tb-action" },
-    { title: "All Set!", text: "You're ready to win. Happy gaming!", target: "none" }
-  ];
+  const closeAllModals = () => {
+    setSettingsOpen(false);
+    setLogsOpen(false);
+    setDebugOpen(false);
+  };
 
+  const isModalOpen = settingsOpen || logsOpen || debugOpen;
+
+  // ── Auth screen ───────────────────────────────────────────────────────────
   if (!isAuthorized) {
     return (
       <div className="app-shell">
-        <div className={`bg-aurora ${isRevoked ? 'revoked-aurora' : ''}`} aria-hidden="true" />
+        <div className={`bg-aurora ${isRevoked ? "revoked-aurora" : ""}`} aria-hidden="true" />
 
         <div className="window-titlebar" data-tauri-drag-region>
           <div className="window-titlebar-left">
-            <img src="/rlidentity.webp" className="app-logo" alt="logo" onClick={handleLogoClick} draggable="false" style={{ cursor: 'default' }} />
+            <img
+              src="/rlidentity.webp"
+              className="app-logo"
+              alt="logo"
+              onClick={handleLogoClick}
+              draggable="false"
+              style={{ cursor: "default" }}
+            />
             <div className="titlebar-text" data-tauri-drag-region>
-              <div className="app-name neon-text-soft">RLidentity <span style={{ fontSize: '10px', opacity: 0.6, marginLeft: '4px' }}>v2.0.0</span></div>
-              <div className="app-slogan">{isRevoked ? 'License Revoked' : 'Authorize to continue'}</div>
+              <div className="app-name neon-text-soft">
+                RLidentity <span style={{ fontSize: "10px", opacity: 0.6, marginLeft: "4px" }}>v2.0.0</span>
+              </div>
+              <div className="app-slogan">{isRevoked ? "License Revoked" : "Authorize to continue"}</div>
             </div>
           </div>
-
           <div className="titlebar-controls">
             <button className="win-btn" onClick={handleMinimizeClick}>—</button>
-            <button className="win-btn" onClick={async () => await tryWindowApi(w => w.close())}>✕</button>
+            <button className="win-btn" onClick={() => tryWindowApi(w => w.close())}>✕</button>
           </div>
         </div>
 
         <main className="panel-wrap">
-          <section className={`glass-card neon-ring ${isRevoked ? 'revoked' : ''}`} style={{ maxWidth: '400px', margin: 'auto' }}>
+          <section className={`glass-card neon-ring ${isRevoked ? "revoked" : ""}`} style={{ maxWidth: "400px", margin: "auto" }}>
             <header className="card-header">
-              <h1 className={`headline neon-text ${isRevoked ? 'red' : ''}`}>
-                {isRevoked ? 'ACCESS REVOKED' : 'RLidentity'}
+              <h1 className={`headline neon-text ${isRevoked ? "red" : ""}`}>
+                {isRevoked ? "ACCESS REVOKED" : "RLidentity"}
               </h1>
               <p className="app-slogan">
-                {isRevoked ? 'This license is no longer active' : 'Enter your API key to continue'}
+                {isRevoked ? "This license is no longer active" : "Enter your API key to continue"}
               </p>
             </header>
             <div className="form-stack">
@@ -326,19 +331,22 @@ export default function App() {
                       type="password"
                       className="input"
                       value={apiKey}
-                      onChange={(e) => setApiKey(e.target.value)}
+                      onChange={e => setApiKey(e.target.value)}
+                      onKeyDown={e => e.key === "Enter" && authorize(apiKey)}
                       placeholder="Enter your license key..."
                     />
                   </div>
                 </div>
               )}
-              
               <button className="btn btn-primary" onClick={() => isRevoked ? logout() : authorize(apiKey)}>
-                {isRevoked ? 'Change Key' : 'Login'}
+                {isRevoked ? "Change Key" : "Login"}
               </button>
-
               {status !== "ready" && (
-                  <p className="status-value" style={{textAlign:'center', marginTop:'10px', color: (isRevoked || status.startsWith('Error')) ? '#ff5555' : 'inherit'}}>
+                <p className="status-value" style={{
+                  textAlign: "center",
+                  marginTop: "10px",
+                  color: (isRevoked || status.startsWith("Error")) ? "var(--red0)" : "inherit",
+                }}>
                   {status}
                 </p>
               )}
@@ -349,29 +357,38 @@ export default function App() {
     );
   }
 
+  // ── Main app ──────────────────────────────────────────────────────────────
   return (
     <div className="app-shell">
       <div className="bg-aurora" aria-hidden="true" />
 
       <div className="window-titlebar" data-tauri-drag-region>
         <div className="window-titlebar-left">
-            <img src="/rlidentity.webp" className="app-logo" alt="logo" onClick={handleLogoClick} draggable="false" style={{ cursor: 'default' }} />
+          <img
+            src="/rlidentity.webp"
+            className="app-logo"
+            alt="logo"
+            onClick={handleLogoClick}
+            draggable="false"
+            style={{ cursor: "default" }}
+          />
           <div className="titlebar-app-name neon-text-soft" data-tauri-drag-region>RLidentity</div>
         </div>
-
         <div className="titlebar-controls-wrap" data-tauri-drag-region>
           <div className="titlebar-controls">
-              <button id="step-settings" className="tb-action" onClick={() => setSettingsOpen(true)}>Settings</button>
+            <button className="tb-action" onClick={() => setSettingsOpen(true)}>Settings</button>
             <button className="tb-action" onClick={() => openUrl(GITHUB_URL)}>GitHub</button>
             <button className="win-btn" onClick={handleMinimizeClick}>—</button>
-              <button className="win-btn" onClick={async () => await tryWindowApi(w => w.close())}>✕</button>
+            <button className="win-btn" onClick={() => tryWindowApi(w => w.close())}>✕</button>
           </div>
         </div>
       </div>
 
       <main className="panel-wrap">
         <header className="welcome-section">
-            <h2 className="welcome-text">Welcome, <span className="neon-text-soft">{userData?.globalName || userData?.username || "User"}</span></h2>
+          <h2 className="welcome-text">
+            Welcome, <span className="neon-text-soft">{userData?.globalName || userData?.username || "User"}</span>
+          </h2>
           <div className="user-id-badge">User #{userData?.userId || "0"}</div>
         </header>
 
@@ -381,22 +398,22 @@ export default function App() {
           </header>
 
           <div className="form-stack">
-              <div className="field" id="step-username">
+            <div className="field">
               <label className="label">spoofed username</label>
               <div className="glass-input">
                 <input
                   className="input"
                   value={spoofedUsername}
-                      onChange={(e) => setSpoofedUsername(e.target.value)}
+                  onChange={e => setSpoofedUsername(e.target.value)}
+                  placeholder="Enter a username..."
                 />
               </div>
             </div>
 
             <button
-                id="step-inject"
               className="btn btn-primary"
               onClick={inject}
-                disabled={rlStatus !== "RL Running" && tutorialStep !== 1}
+              disabled={rlStatus !== "RL Running"}
             >
               {rlStatus === "RL Running" ? "Inject" : "Start Rocket League"}
             </button>
@@ -414,105 +431,109 @@ export default function App() {
             </div>
             <div className="status-item">
               <span className="status-label">game</span>
-                <span className="status-value">{rlStatus}</span>
+              <span className={`status-value ${rlStatus === "RL Running" ? "status-active" : ""}`}>{rlStatus}</span>
             </div>
           </footer>
         </section>
       </main>
 
-        {(settingsOpen || logsOpen || debugOpen) && (
-            <div className="modal-overlay" onClick={() => { setSettingsOpen(false); setLogsOpen(false); setDebugOpen(false); }}>
-              <div className="modal glass-card neon-ring" onClick={e => e.stopPropagation()} style={{ maxWidth: (logsOpen || debugOpen) ? '600px' : '400px' }}>
+      {/* ── Modals ── */}
+      {isModalOpen && (
+        <div className="modal-overlay" onClick={closeAllModals}>
+          <div
+            className="modal glass-card neon-ring"
+            onClick={e => e.stopPropagation()}
+            style={{ maxWidth: logsOpen || debugOpen ? "600px" : "420px" }}
+          >
             {debugOpen ? (
               <>
-                        <h2 className="modal-title neon-text-soft">System Credits & Debug</h2>
-                        <div className="glass-input" style={{ padding: '15px', marginBottom: '15px' }}>
-                            <div style={{ display: 'grid', gap: '10px', fontSize: '13px' }}>
-                                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                                    <span style={{ color: '#aaa' }}>Lead Dev & Owner:</span>
-                                    <span className="neon-text-soft">Bits</span>
+                <h2 className="modal-title neon-text-soft">System Credits</h2>
+                <div className="credits-grid glass-input">
+                  {[
+                    { role: "Lead Dev & Owner", name: "Bits",        accent: true },
+                    { role: "Dev & Admin",      name: "Danni" },
+                    { role: "Co-Owner",         name: "Deniz" },
+                    { role: "Administrator",    name: "Kairo" },
+                    { role: "Helpers",          name: "Quinn, SNDR" },
+                    { role: "Tester",           name: "Emir" },
+                  ].map(({ role, name, accent }) => (
+                    <div key={role} className="credit-row">
+                      <span className="credit-role">{role}</span>
+                      <span className={accent ? "neon-text-soft" : "credit-name"}>{name}</span>
                     </div>
-                                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                                    <span style={{ color: '#aaa' }}>Dev & Admin:</span>
-                                    <span style={{ color: '#fff' }}>Danni</span>
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                                    <span style={{ color: '#aaa' }}>Co-Owner:</span>
-                                    <span style={{ color: '#fff' }}>Deniz</span>
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                                    <span style={{ color: '#aaa' }}>Administrator:</span>
-                                    <span style={{ color: '#fff' }}>Kairo</span>
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                                    <span style={{ color: '#aaa' }}>Helpers:</span>
-                                    <span style={{ color: '#fff' }}>Quinn, SNDR</span>
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                                    <span style={{ color: '#aaa' }}>Tester:</span>
-                                    <span style={{ color: '#fff' }}>Emir</span>
-                                </div>
-                                <hr style={{ border: 'none', borderTop: '1px solid rgba(255,255,255,0.1)', margin: '5px 0' }} />
-                                <div style={{ textAlign: 'center' }}>
-                                    <button 
-                                        className="btn btn-secondary" 
-                                        style={{ width: '100%', marginTop: '5px' }}
-                                        onClick={() => openUrl('https://rlidentity.me/discord')}
-                                    >
-                                        Join Discord (rlidentity.me/discord)
+                  ))}
+                  <hr className="credit-divider" />
+                  <button className="btn btn-secondary" style={{ width: "100%" }} onClick={() => openUrl("https://rlidentity.me/discord")}>
+                    Join Discord — rlidentity.me/discord
                   </button>
                 </div>
-                            </div>
-                        </div>
-                        <button className="btn btn-primary" onClick={() => setDebugOpen(false)}>Close Debug</button>
+                <button className="btn btn-primary" style={{ marginTop: "14px" }} onClick={() => setDebugOpen(false)}>Close</button>
               </>
             ) : logsOpen ? (
               <>
                 <h2 className="modal-title neon-text-soft">Injection Logs</h2>
-                        <div className="glass-input" style={{ height: '300px', padding: '10px', overflowY: 'auto' }}>
-                            <pre style={{ fontSize: '12px', color: '#fff', whiteSpace: 'pre-wrap' }}>
+                <div className="glass-input" style={{ height: "300px", padding: "10px", overflowY: "auto" }}>
+                  <pre style={{ fontSize: "12px", color: "#fff", whiteSpace: "pre-wrap", margin: 0 }}>
                     {lastLog || "No logs yet..."}
                   </pre>
                 </div>
-                        <button className="btn btn-primary" onClick={() => setLogsOpen(false)}>Close Logs</button>
+                <button className="btn btn-primary" style={{ marginTop: "14px" }} onClick={() => setLogsOpen(false)}>Close Logs</button>
               </>
             ) : (
               <>
                 <h2 className="modal-title neon-text-soft">Settings</h2>
 
+                {/* Platform */}
                 <div className="setting-row">
                   <div className="setting-text">
                     <div className="setting-title">Platform</div>
                   </div>
                   <div className="custom-dropdown-wrap">
                     <button
-                              className="glass-input dropdown-trigger" 
-                              onClick={() => setPlatformPickerOpen(!platformPickerOpen)}
+                      className="dropdown-trigger"
+                      onClick={() => setPlatformPickerOpen(p => !p)}
                     >
-                              <span className="dropdown-value">{platform === "Epic" ? "Epic Games" : "Steam"}</span>
+                      <span>{platform === "Epic" ? "Epic Games" : "Steam"}</span>
                       <span className="dropdown-arrow">▾</span>
                     </button>
-                            
                     {platformPickerOpen && (
-                              <div className="dropdown-menu glass-card neon-ring">
+                      <div className="dropdown-menu">
+                        {["Epic", "Steam"].map(p => (
                           <button
-                                  className={`dropdown-item ${platform === "Epic" ? "active" : ""}`}
-                                  onClick={() => { setPlatform("Epic"); setPlatformPickerOpen(false); }}
+                            key={p}
+                            className={`dropdown-item ${platform === p ? "active" : ""}`}
+                            onClick={() => { setPlatform(p); setPlatformPickerOpen(false); }}
                           >
-                                  Epic Games
-                                </button>
-                                <button 
-                                  className={`dropdown-item ${platform === "Steam" ? "active" : ""}`}
-                                  onClick={() => { setPlatform("Steam"); setPlatformPickerOpen(false); }}
-                                >
-                                  Steam
+                            {p === "Epic" ? "Epic Games" : "Steam"}
                           </button>
+                        ))}
                       </div>
                     )}
                   </div>
                 </div>
 
-                        <div className="setting-row" id="step-autoinject">
+                {/* Theme picker */}
+                <div className="setting-row">
+                  <div className="setting-text">
+                    <div className="setting-title">Theme</div>
+                    <div className="setting-sub">Accent color</div>
+                  </div>
+                  <div className="theme-swatches">
+                    {THEMES.map(t => (
+                      <button
+                        key={t.id}
+                        className={`theme-swatch ${theme === t.id ? "active" : ""}`}
+                        style={{ "--swatch-color": t.color } as React.CSSProperties}
+                        onClick={() => setTheme(t.id)}
+                        title={t.label}
+                        aria-label={`${t.label} theme`}
+                      />
+                    ))}
+                  </div>
+                </div>
+
+                {/* Auto inject */}
+                <div className="setting-row">
                   <div className="setting-text">
                     <div className="setting-title">Auto Injection</div>
                     <div className="setting-sub">Injects automatically when RL starts</div>
@@ -523,6 +544,7 @@ export default function App() {
                   </label>
                 </div>
 
+                {/* Minimize to tray */}
                 <div className="setting-row">
                   <div className="setting-text">
                     <div className="setting-title">Minimize to tray</div>
@@ -533,8 +555,10 @@ export default function App() {
                   </label>
                 </div>
 
-                        <div className="btn-row" style={{ flexDirection: 'column', gap: '10px', marginTop: '10px' }}>
-                            <button className="btn btn-tertiary" onClick={() => { setSettingsOpen(false); setLogsOpen(true); }}>View Last Injection Log</button>
+                <div className="btn-stack">
+                  <button className="btn btn-tertiary" onClick={() => { setSettingsOpen(false); setLogsOpen(true); }}>
+                    View Last Injection Log
+                  </button>
                   <button className="btn btn-secondary" onClick={logout}>Logout</button>
                   <button className="btn btn-primary" onClick={() => setSettingsOpen(false)}>Close</button>
                 </div>
@@ -544,34 +568,19 @@ export default function App() {
         </div>
       )}
 
-        {tutorialStep >= 0 && (
-          <div className="tutorial-overlay">
-            <div className={`tutorial-spotlight step-${tutorialStep}`} />
-            <div className={`tutorial-card glass-card neon-ring step-${tutorialStep}`}>
-              <h2 className="modal-title neon-text">{tutorialSteps[tutorialStep].title}</h2>
-              <p className="modal-p">{tutorialSteps[tutorialStep].text}</p>
+      {/* ── Update modal ── */}
+      {pendingUpdate && (
+        <div className="modal-overlay" onClick={() => setPendingUpdate(null)}>
+          <div className="modal glass-card neon-ring" onClick={e => e.stopPropagation()} style={{ maxWidth: "380px" }}>
+            <h2 className="modal-title neon-text-soft">Update Available</h2>
+            <p style={{ margin: "0 0 20px", color: "var(--muted)", fontSize: "14px" }}>
+              Version <strong style={{ color: "var(--text)" }}>{pendingUpdate.version}</strong> is ready to install.
+              The app will restart automatically.
+            </p>
             <div className="btn-row">
-                <button 
-                  className="btn btn-secondary" 
-                  onClick={() => setTutorialStep(-1)}
-                >
-                  Skip
-                </button>
-                <button 
-                  className="btn btn-primary" 
-                  onClick={() => {
-                    if (tutorialStep === 2) {
-                        setSettingsOpen(true);
-                    }
-                    if (tutorialStep < tutorialSteps.length - 1) {
-                      setTutorialStep(tutorialStep + 1);
-                    } else {
-                      setSettingsOpen(false);
-                      setTutorialStep(-1);
-                    }
-                  }}
-                >
-                  {tutorialStep < tutorialSteps.length - 1 ? "Next" : "Finish"}
+              <button className="btn btn-secondary" onClick={() => setPendingUpdate(null)}>Later</button>
+              <button className="btn btn-primary" style={{ width: "100%" }} onClick={pendingUpdate.install}>
+                Update Now
               </button>
             </div>
           </div>