admin.php

<?php
// OpenDonate - Panel Administracyjny (ALL-IN-ONE)
require_once 'config.php';

// Obsługa logowania
if (isset($_POST['login'])) {
    $username = $_POST['username'] ?? '';
    $password = $_POST['password'] ?? '';
    
    $stmt = $pdo->prepare("SELECT * FROM users WHERE username = ?");
    $stmt->execute([$username]);
    $user = $stmt->fetch();
    
    if ($user && password_verify($password, $user['password'])) {
        $_SESSION['admin_logged_in'] = true;
        $_SESSION['admin_id'] = $user['id'];
        $_SESSION['admin_username'] = $user['username'];
        header('Location: admin.php');
        exit;
    } else {
        $login_error = "Nieprawidłowe dane logowania!";
    }
}

// Wylogowanie
if (isset($_GET['logout'])) {
    session_destroy();
    header('Location: admin.php');
    exit;
}

// Sprawdzenie autoryzacji
$isLoggedIn = checkAuth();

// === OBSŁUGA AKCJI AJAX ===
if ($isLoggedIn && isset($_POST['action'])) {
    header('Content-Type: application/json');
    
    $action = $_POST['action'];
    $response = ['success' => false, 'message' => ''];
    
    try {
        switch ($action) {
            // === USTAWIENIA OGÓLNE ===
            case 'save_general':
                setSetting('site_title', $_POST['site_title'] ?? '');
                // === BRANDING ===
                setSetting('brand_name', $_POST['brand_name'] ?? '');
                setSetting('brand_logo_url', $_POST['brand_logo_url'] ?? '');
                setSetting('brand_url', $_POST['brand_url'] ?? '#');
                setSetting('brand_favicon_url', $_POST['brand_favicon_url'] ?? '');
                setSetting('contact_email', $_POST['contact_email'] ?? '');
                setSetting('operator_name', $_POST['operator_name'] ?? '');
                setSetting('streamer_name', $_POST['streamer_name'] ?? '');
                setSetting('min_donation_amount', $_POST['min_donation_amount'] ?? '1.00');
                setSetting('max_donation_amount', $_POST['max_donation_amount'] ?? '10000.00');
                setSetting('alert_max_chars', $_POST['alert_max_chars'] ?? '200');
                setSetting('alert_duration', $_POST['alert_duration'] ?? '30000');
                setSetting('alert_auto_duration', $_POST['alert_auto_duration'] ?? '0');
                setSetting('alert_min_duration', $_POST['alert_min_duration'] ?? '5000');
                setSetting('alert_animation_in', $_POST['alert_animation_in'] ?? 'slideInUp');
                setSetting('alert_animation_out', $_POST['alert_animation_out'] ?? 'fadeOut');
                setSetting('alert_animation_during', $_POST['alert_animation_during'] ?? 'none');
                
                // Prowizje Stripe
                setSetting('stripe_fee_enabled', isset($_POST['stripe_fee_enabled']) ? '1' : '0');
                setSetting('stripe_fee_percent', $_POST['stripe_fee_percent'] ?? '1.6');
                setSetting('stripe_fee_fixed', $_POST['stripe_fee_fixed'] ?? '1.00');
                
                // Prowizje PayPal
                setSetting('paypal_fee_enabled', isset($_POST['paypal_fee_enabled']) ? '1' : '0');
                setSetting('paypal_fee_percent', $_POST['paypal_fee_percent'] ?? '2.90');
                setSetting('paypal_fee_fixed', $_POST['paypal_fee_fixed'] ?? '1.45');
                
                $response = ['success' => true, 'message' => 'Zapisano ustawienia ogólne'];
                break;
            
            // === STRIPE ===
            case 'save_stripe':
                setSetting('stripe_secret_key', $_POST['secret_key'] ?? '');
                setSetting('stripe_publishable_key', $_POST['publishable_key'] ?? '');
                setSetting('stripe_webhook_secret', $_POST['webhook_secret'] ?? '');
                setSetting('paypal_email', $_POST['paypal_email'] ?? '');
                
                $response = ['success' => true, 'message' => 'Zapisano ustawienia płatności'];
                break;
            
            // === CEL DONACJI ===
            case 'save_goal':
                $goalId = $_POST['goal_id'] ?? 0;
                $isDefault = isset($_POST['is_default']) && $_POST['is_default'] == '1' ? 1 : 0;

                if ($goalId > 0) {
                    // Aktualizacja
                    $stmt = $pdo->prepare("
                        UPDATE goals SET
                            title = ?,
                            description = ?,
                            current_amount = ?,
                            target_amount = ?,
                            is_active = ?,
                            is_default = ?,
                            show_in_overlay = ?,
                            show_on_donation_page = ?,
                            bar_style = ?,
                            display_order = ?
                        WHERE id = ?
                    ");
                    $stmt->execute([
                        $_POST['title'] ?? '',
                        $_POST['description'] ?? '',
                        $_POST['current_amount'] ?? 0,
                        $_POST['target_amount'] ?? 0,
                        $_POST['is_active'] ?? 0,
                        $isDefault,
                        $_POST['show_in_overlay'] ?? 0,
                        $_POST['show_on_donation_page'] ?? 1,
                        $_POST['bar_style'] ?? 'animated',
                        $_POST['display_order'] ?? 0,
                        $goalId
                    ]);
                } else {
                    // Dodanie nowego
                    $stmt = $pdo->prepare("
                        INSERT INTO goals (title, description, current_amount, target_amount, is_active, is_default, show_in_overlay, show_on_donation_page, bar_style, display_order)
                        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
                    ");
                    $stmt->execute([
                        $_POST['title'] ?? '',
                        $_POST['description'] ?? '',
                        $_POST['current_amount'] ?? 0,
                        $_POST['target_amount'] ?? 0,
                        $_POST['is_active'] ?? 1,
                        $isDefault,
                        $_POST['show_in_overlay'] ?? 1,
                        $_POST['show_on_donation_page'] ?? 1,
                        $_POST['bar_style'] ?? 'animated',
                        $_POST['display_order'] ?? 0
                    ]);
                    $goalId = $pdo->lastInsertId();
                }

                // Tylko jeden cel może być domyślny — wyzeruj inne
                if ($isDefault) {
                    $stmt = $pdo->prepare("UPDATE goals SET is_default = 0 WHERE id != ?");
                    $stmt->execute([$goalId]);
                }

                $response = ['success' => true, 'message' => 'Zapisano cel donacji', 'goal_id' => $goalId];
                break;

            case 'delete_goal':
                $goalId = intval($_POST['goal_id'] ?? 0);
                if ($goalId > 0) {
                    // FK ON DELETE SET NULL — donaty z tym goal_id dostaną NULL
                    $stmt = $pdo->prepare("DELETE FROM goals WHERE id = ?");
                    $stmt->execute([$goalId]);
                    $response = ['success' => true, 'message' => 'Usunięto cel'];
                } else {
                    $response = ['success' => false, 'message' => 'Brak goal_id'];
                }
                break;

            case 'reset_goal':
                $goalId = $_POST['goal_id'] ?? 0;
                $stmt = $pdo->prepare("UPDATE goals SET current_amount = 0 WHERE id = ?");
                $stmt->execute([$goalId]);
                
                $response = ['success' => true, 'message' => 'Zresetowano postęp celu'];
                break;
            
            // === USTAWIENIA WYGLĄDU OVERLAY CELU ===
            case 'save_goal_appearance':
                setSetting('goal_bg_color', $_POST['goal_bg_color'] ?? 'rgba(18, 18, 18, 0.9)');
                setSetting('goal_text_color', $_POST['goal_text_color'] ?? '#FFFFFF');
                setSetting('goal_bar_color', $_POST['goal_bar_color'] ?? '#757aff');
                setSetting('goal_bar_bg_color', $_POST['goal_bar_bg_color'] ?? '#333333');
                setSetting('goal_bar_height', $_POST['goal_bar_height'] ?? '50');
                setSetting('goal_bar_animation', $_POST['goal_bar_animation'] ?? 'striped');
                setSetting('goal_font_family', $_POST['goal_font_family'] ?? 'Poppins');
                setSetting('goal_font_size', $_POST['goal_font_size'] ?? '24');
                setSetting('goal_overlay_enabled', $_POST['goal_overlay_enabled'] ?? '1');
                setSetting('goal_opacity', $_POST['goal_opacity'] ?? '0.6');
                setSetting('show_goals_on_donation_page', $_POST['show_goals_on_donation_page'] ?? '1');

                $response = ['success' => true, 'message' => 'Zapisano ustawienia wyglądu overlay celu'];
                break;
            
            // === TOP DONATE ===
            case 'save_top_donate':
                setSetting('top_donate_enabled', $_POST['top_donate_enabled'] ?? '1');
                setSetting('top_donate_count', $_POST['top_donate_count'] ?? '5');
                setSetting('top_donate_period', $_POST['top_donate_period'] ?? 'all');
                setSetting('top_donate_custom_from', $_POST['top_donate_custom_from'] ?? '');
                setSetting('top_donate_align', $_POST['top_donate_align'] ?? 'left');
                setSetting('top_donate_autoscroll', $_POST['top_donate_autoscroll'] ?? '0');
                setSetting('top_donate_style', $_POST['top_donate_style'] ?? 'vertical');
                setSetting('top_donate_scroll_speed', $_POST['top_donate_scroll_speed'] ?? '50');
                setSetting('top_donate_bg_color', $_POST['top_donate_bg_color'] ?? 'rgba(18, 18, 18, 0.9)');
                setSetting('top_donate_title_color', $_POST['top_donate_title_color'] ?? '#FFFFFF');
                setSetting('top_donate_position_color', $_POST['top_donate_position_color'] ?? '#00FF00');
                setSetting('top_donate_nick_color', $_POST['top_donate_nick_color'] ?? '#FFFFFF');
                setSetting('top_donate_amount_color', $_POST['top_donate_amount_color'] ?? '#00FF00');
                setSetting('top_donate_font_family', $_POST['top_donate_font_family'] ?? 'Poppins');
                setSetting('top_donate_font_size', $_POST['top_donate_font_size'] ?? '24');
                
                $response = ['success' => true, 'message' => 'Zapisano ustawienia Top Donate'];
                break;
            
            case 'save_last_donate':
                setSetting('last_donate_enabled', $_POST['last_donate_enabled'] ?? '1');
                setSetting('last_donate_count', $_POST['last_donate_count'] ?? '5');
                setSetting('last_donate_period', $_POST['last_donate_period'] ?? 'all');
                setSetting('last_donate_custom_from', $_POST['last_donate_custom_from'] ?? '');
                setSetting('last_donate_align', $_POST['last_donate_align'] ?? 'left');
                setSetting('last_donate_autoscroll', $_POST['last_donate_autoscroll'] ?? '0');
                setSetting('last_donate_style', $_POST['last_donate_style'] ?? 'vertical');
                setSetting('last_donate_scroll_speed', $_POST['last_donate_scroll_speed'] ?? '50');
                setSetting('last_donate_bg_color', $_POST['last_donate_bg_color'] ?? 'transparent');
                setSetting('last_donate_position_color', $_POST['last_donate_position_color'] ?? '#FFFFFF');
                setSetting('last_donate_nick_color', $_POST['last_donate_nick_color'] ?? '#FFFFFF');
                setSetting('last_donate_amount_color', $_POST['last_donate_amount_color'] ?? '#00FF00');
                setSetting('last_donate_font_family', $_POST['last_donate_font_family'] ?? 'Poppins');
                setSetting('last_donate_font_size', $_POST['last_donate_font_size'] ?? '32');
                
                $response = ['success' => true, 'message' => 'Zapisano ustawienia Last Donate'];
                break;
            
            // === SZABLONY KWOTOWE ===
            case 'save_template':
                $templateId = $_POST['template_id'] ?? 0;
                
                // Obsługa uploadu pliku MP3
                $introSoundFile = null;
                if (isset($_FILES['intro_sound_file']) && $_FILES['intro_sound_file']['error'] === UPLOAD_ERR_OK) {
                    $uploadDir = __DIR__ . '/sounds/';
                    if (!is_dir($uploadDir)) {
                        mkdir($uploadDir, 0755, true);
                    }
                    
                    $fileName = 'intro_' . time() . '_' . uniqid() . '.mp3';
                    $filePath = $uploadDir . $fileName;
                    
                    if (move_uploaded_file($_FILES['intro_sound_file']['tmp_name'], $filePath)) {
                        $introSoundFile = 'sounds/' . $fileName;
                    }
                }
                
                if ($templateId > 0) {
                    $stmt = $pdo->prepare("
                        UPDATE amount_templates SET 
                            name = ?,
                            min_amount = ?,
                            intro_sound_enabled = ?,
                            intro_sound_file = COALESCE(?, intro_sound_file),
                            tts_enabled = ?,
                            tts_voice = ?,
                            tts_template = ?,
                            tts_volume = ?,
                            filter_urls = ?,
                            filter_special_chars = ?,
                            filter_word_repeat = ?,
                            nick_color = ?,
                            amount_color = ?,
                            message_color = ?,
                            background_color = ?,
                            font_family_name = ?,
                            font_size_name = ?,
                            font_weight_name = ?,
                            font_family_message = ?,
                            font_size_message = ?,
                            font_weight_message = ?,
                            is_active = ?
                        WHERE id = ?
                    ");
                    $stmt->execute([
                        $_POST['name'] ?? '',
                        $_POST['min_amount'] ?? 0,
                        $_POST['intro_sound_enabled'] ?? 0,
                        $introSoundFile,
                        $_POST['tts_enabled'] ?? 1,
                        $_POST['tts_voice'] ?? 'pl-PL',
                        $_POST['tts_template'] ?? '{NICK} przesyła {KWOTA}',
                        $_POST['tts_volume'] ?? 100,
                        $_POST['filter_urls'] ?? 1,
                        $_POST['filter_special_chars'] ?? 1,
                        $_POST['filter_word_repeat'] ?? 1,
                        $_POST['nick_color'] ?? '#FFFFFF',
                        $_POST['amount_color'] ?? '#11cb94',
                        $_POST['message_color'] ?? '#CCCCCC',
                        $_POST['background_color'] ?? '#121212',
                        $_POST['font_family_name'] ?? 'Poppins',
                        $_POST['font_size_name'] ?? 36,
                        $_POST['font_weight_name'] ?? '700',
                        $_POST['font_family_message'] ?? 'Poppins',
                        $_POST['font_size_message'] ?? 24,
                        $_POST['font_weight_message'] ?? '400',
                        $_POST['is_active'] ?? 1,
                        $templateId
                    ]);
                } else {
                    $stmt = $pdo->prepare("
                        INSERT INTO amount_templates (
                            name, min_amount, intro_sound_enabled, intro_sound_file, tts_enabled, tts_voice, tts_template, tts_volume,
                            filter_urls, filter_special_chars, filter_word_repeat,
                            nick_color, amount_color, message_color, background_color,
                            font_family_name, font_size_name, font_weight_name, font_family_message, font_size_message, font_weight_message,
                            is_active
                        ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
                    ");
                    $stmt->execute([
                        $_POST['name'] ?? 'Nowy szablon',
                        $_POST['min_amount'] ?? 0,
                        $_POST['intro_sound_enabled'] ?? 0,
                        $introSoundFile,
                        $_POST['tts_enabled'] ?? 1,
                        $_POST['tts_voice'] ?? 'pl-PL',
                        $_POST['tts_template'] ?? '{NICK} przesyła {KWOTA}',
                        $_POST['tts_volume'] ?? 100,
                        $_POST['filter_urls'] ?? 1,
                        $_POST['filter_special_chars'] ?? 1,
                        $_POST['filter_word_repeat'] ?? 1,
                        $_POST['nick_color'] ?? '#FFFFFF',
                        $_POST['amount_color'] ?? '#11cb94',
                        $_POST['message_color'] ?? '#CCCCCC',
                        $_POST['background_color'] ?? '#121212',
                        $_POST['font_family_name'] ?? 'Poppins',
                        $_POST['font_size_name'] ?? 36,
                        $_POST['font_weight_name'] ?? '700',
                        $_POST['font_family_message'] ?? 'Poppins',
                        $_POST['font_size_message'] ?? 24,
                        $_POST['font_weight_message'] ?? '400',
                        $_POST['is_active'] ?? 1
                    ]);
                }
                
                $response = ['success' => true, 'message' => 'Zapisano szablon kwotowy'];
                break;
            
            case 'delete_template':
                $templateId = $_POST['template_id'] ?? 0;
                $stmt = $pdo->prepare("DELETE FROM amount_templates WHERE id = ?");
                $stmt->execute([$templateId]);
                
                $response = ['success' => true, 'message' => 'Usunięto szablon'];
                break;
            
            // === TESTOWY DONEJT ===
            case 'send_test':
                $controlId = 'TEST_' . uniqid() . '_' . time();
                
                $stmt = $pdo->prepare("
                    INSERT INTO donations (donor_name, amount, message, status, control_id, is_seen)
                    VALUES (?, ?, ?, 'paid', ?, 0)
                ");
                $stmt->execute([
                    $_POST['test_name'] ?? 'Test User',
                    $_POST['test_amount'] ?? 5.00,
                    $_POST['test_message'] ?? 'To jest testowy donejt!',
                    $controlId
                ]);
                
                $response = ['success' => true, 'message' => 'Wysłano testowy donejt!'];
                break;
            
            // === PANEL STEROWANIA ===
            case 'overlay_control':
                $controlAction = $_POST['control_action'] ?? '';
                
                if ($controlAction === 'pause') {
                    setSetting('overlay_paused', '1', 'boolean');
                } elseif ($controlAction === 'resume') {
                    setSetting('overlay_paused', '0', 'boolean');
                } elseif ($controlAction === 'mute') {
                    setSetting('overlay_muted', '1', 'boolean');
                } elseif ($controlAction === 'unmute') {
                    setSetting('overlay_muted', '0', 'boolean');
                } elseif ($controlAction === 'skip') {
                    // Skip bieżącego donejtu
                    $stmt = $pdo->prepare("
                        UPDATE donations 
                        SET is_skipped = 1, is_processing = 0, is_seen = 1
                        WHERE is_processing = 1 
                        LIMIT 1
                    ");
                    $stmt->execute();
                    
                    // Jeśli nie było przetwarzanego, skipnij pierwszy oczekujący
                    if ($stmt->rowCount() === 0) {
                        $stmt = $pdo->prepare("
                            UPDATE donations 
                            SET is_skipped = 1, is_seen = 1
                            WHERE status = 'paid' AND is_seen = 0 AND is_skipped = 0
                            ORDER BY created_at ASC
                            LIMIT 1
                        ");
                        $stmt->execute();
                    }
                }
                
                $response = ['success' => true, 'message' => 'Zmieniono stan overlay'];
                break;
            
            // === POWTÓRZ DONEJTA ===
            case 'repeat_donation':
                $donationId = $_POST['donation_id'] ?? 0;
                
                $stmt = $pdo->prepare("
                    UPDATE donations 
                    SET is_seen = 0, repeat_count = repeat_count + 1 
                    WHERE id = ? AND can_repeat = 1
                ");
                $stmt->execute([$donationId]);
                
                $response = ['success' => true, 'message' => 'Donejt zostanie powtórzony'];
                break;
            
            // === USUŃ DONEJTA ===
            case 'delete_donation':
                $donationId = $_POST['donation_id'] ?? 0;
                
                $stmt = $pdo->prepare("DELETE FROM donations WHERE id = ?");
                $stmt->execute([$donationId]);
                
                $response = ['success' => true, 'message' => 'Usunięto donejt'];
                break;
        }
    } catch (Exception $e) {
        $response = ['success' => false, 'message' => 'Błąd: ' . $e->getMessage()];
    }
    
    echo json_encode($response);
    exit;
}

// === POBIERANIE DANYCH ===
if ($isLoggedIn) {
    // Statystyki (bez testowych)
    $stats = [
        'total_donations' => $pdo->query("SELECT COUNT(*) FROM donations WHERE status = 'paid' AND (control_id NOT LIKE 'TEST_%' OR control_id IS NULL)")->fetchColumn(),
        'total_amount' => $pdo->query("SELECT IFNULL(SUM(amount), 0) FROM donations WHERE status = 'paid' AND (control_id NOT LIKE 'TEST_%' OR control_id IS NULL)")->fetchColumn(),
        'today_donations' => $pdo->query("SELECT COUNT(*) FROM donations WHERE status = 'paid' AND DATE(created_at) = CURDATE() AND (control_id NOT LIKE 'TEST_%' OR control_id IS NULL)")->fetchColumn(),
        'today_amount' => $pdo->query("SELECT IFNULL(SUM(amount), 0) FROM donations WHERE status = 'paid' AND DATE(created_at) = CURDATE() AND (control_id NOT LIKE 'TEST_%' OR control_id IS NULL)")->fetchColumn(),
    ];
    
    // Cele
    $goals = $pdo->query("SELECT * FROM goals ORDER BY is_active DESC, is_default DESC, display_order ASC, id DESC")->fetchAll();
    
    // Szablony kwotowe
    $templates = $pdo->query("SELECT * FROM amount_templates ORDER BY min_amount ASC")->fetchAll();
    
    // Ostatnie donacje
    $recentDonations = $pdo->query("
        SELECT * FROM donations 
        WHERE status = 'paid' 
        ORDER BY created_at DESC 
        LIMIT 50
    ")->fetchAll();
}
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $isLoggedIn ? 'Panel Administracyjny' : 'Logowanie'; ?> – <?php echo htmlspecialchars(getSetting('brand_name', 'OpenDonate')); ?></title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --bg-base: #0e0e10;
            --bg-surface: #18181b;
            --bg-raised: #1f1f23;
            --bg-elevated: #26262c;
            --accent: #757aff;
            --accent-rgb: 117,122,255;
            --accent-hover: #6166e6;
            --accent-soft: rgba(117,122,255,0.12);
            --gold: #FFC244;
            --danger: #eb0400;
            --danger-soft: rgba(235,4,0,0.1);
            --success: #52c41a;
            --success-soft: rgba(82,196,26,0.1);
            --warning-soft: rgba(255,165,0,0.1);
            --text-1: #efeff1;
            --text-2: #adadb8;
            --text-3: #7b7b8b;
            --border: #2a2a2e;
            --border-hover: #3a3a3e;
            --radius-sm: 6px;
            --radius-md: 10px;
            --radius-lg: 14px;
            --radius-pill: 100px;
            --ease: cubic-bezier(0.4,0,0.2,1);
        }

        *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

        body {
            font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg-base);
            color: var(--text-1);
            min-height: 100vh;
            font-size: 14px;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }

        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: var(--bg-surface); }
        ::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

        /* ===== LOGIN ===== */
        .login-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .login-box {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            padding: 44px 40px 36px;
            border-radius: var(--radius-lg);
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
            width: 100%;
            max-width: 420px;
        }

        .login-logo {
            text-align: center;
            margin-bottom: 28px;
        }

        .login-logo-icon {
            width: 56px; height: 56px;
            background: var(--accent-soft);
            border: 1px solid rgba(var(--accent-rgb),0.25);
            border-radius: var(--radius-lg);
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 24px; color: var(--accent);
            margin-bottom: 14px;
        }

        .login-logo h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
        .login-logo p { font-size: 13px; color: var(--text-3); margin-top: 4px; }

        .form-group { margin-bottom: 18px; }

        .form-group label {
            display: block;
            margin-bottom: 7px;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-2);
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .form-group input {
            width: 100%;
            padding: 11px 14px;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            background: var(--bg-raised);
            color: var(--text-1);
            font-size: 14px;
            font-family: 'Poppins', sans-serif;
            transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
            outline: none;
        }

        .form-group input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.15);
        }

        .btn {
            width: 100%;
            padding: 13px 20px;
            border: none;
            border-radius: var(--radius-pill);
            font-size: 14px;
            font-weight: 700;
            font-family: 'Poppins', sans-serif;
            cursor: pointer;
            transition: all 0.15s var(--ease);
            letter-spacing: 0.01em;
        }

        .btn-primary {
            background: var(--accent);
            color: #fff;
        }

        .btn-primary:hover {
            background: var(--accent-hover);
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(var(--accent-rgb),0.3);
        }

        .error-message {
            background: var(--danger-soft);
            border: 1px solid rgba(235,4,0,0.25);
            color: #ff6b6b;
            padding: 12px 16px;
            border-radius: var(--radius-md);
            margin-bottom: 18px;
            font-size: 13px;
        }

        /* ===== DASHBOARD LAYOUT ===== */
        .dashboard { display: flex; min-height: 100vh; }

        .sidebar {
            width: 260px;
            background: var(--bg-surface);
            border-right: 1px solid var(--border);
            padding: 20px 14px;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .sidebar-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 10px 20px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 8px;
        }

        .sidebar-logo-icon {
            width: 36px; height: 36px;
            background: var(--accent-soft);
            border-radius: var(--radius-md);
            display: flex; align-items: center; justify-content: center;
            color: var(--accent); font-size: 16px; flex-shrink: 0;
        }

        .sidebar-logo-text { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
        .sidebar-logo-sub { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; }

        .nav-label {
            font-size: 10px;
            font-weight: 700;
            color: var(--text-3);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            padding: 14px 10px 6px;
        }

        .nav-item {
            padding: 10px 12px;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.15s var(--ease);
            color: var(--text-2);
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            font-weight: 600;
        }

        .nav-item:hover {
            background: rgba(255,255,255,0.05);
            color: var(--text-1);
        }

        .nav-item.active {
            background: var(--accent-soft);
            color: var(--accent);
            border: 1px solid rgba(var(--accent-rgb),0.2);
        }

        .nav-item i {
            width: 16px;
            text-align: center;
            font-size: 14px;
            flex-shrink: 0;
        }

        /* ===== MAIN CONTENT ===== */
        .main-content {
            margin-left: 260px;
            padding: 28px 32px;
            width: calc(100% - 260px);
        }

        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 28px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border);
        }

        .page-header h1 {
            font-size: 24px;
            font-weight: 800;
            letter-spacing: -0.02em;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .user-badge {
            font-size: 12px;
            color: var(--text-2);
            padding: 6px 14px;
            background: var(--bg-raised);
            border: 1px solid var(--border);
            border-radius: var(--radius-pill);
        }

        .btn-logout {
            padding: 7px 16px;
            background: var(--danger-soft);
            border: 1px solid rgba(235,4,0,0.25);
            color: #ff6b6b;
            border-radius: var(--radius-pill);
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            font-family: 'Poppins', sans-serif;
            transition: all 0.15s var(--ease);
            text-decoration: none;
            display: inline-flex; align-items: center; gap: 6px;
        }

        .btn-logout:hover { background: rgba(235,4,0,0.18); }

        /* ===== STATS ===== */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }

        .stat-card {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            padding: 22px 24px;
            border-radius: var(--radius-lg);
            transition: all 0.2s var(--ease);
        }

        .stat-card:hover {
            border-color: rgba(var(--accent-rgb),0.3);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0,0,0,0.3);
        }

        .stat-icon {
            width: 38px; height: 38px;
            background: var(--accent-soft);
            border-radius: var(--radius-md);
            display: flex; align-items: center; justify-content: center;
            color: var(--accent); font-size: 16px;
            margin-bottom: 14px;
        }

        .stat-label { color: var(--text-3); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
        .stat-value { font-size: 30px; font-weight: 800; color: var(--accent); letter-spacing: -0.02em; }

        /* ===== SECTIONS ===== */
        .section { display: none; }
        .section.active { display: block; }

        /* ===== CARDS ===== */
        .card {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 28px;
            margin-bottom: 18px;
        }

        .card-title {
            font-size: 17px;
            font-weight: 800;
            letter-spacing: -0.01em;
            margin-bottom: 20px;
            display: flex; align-items: center; gap: 10px;
        }

        .card-title-icon {
            width: 30px; height: 30px;
            background: var(--accent-soft);
            border-radius: var(--radius-sm);
            display: flex; align-items: center; justify-content: center;
            color: var(--accent); font-size: 13px; flex-shrink: 0;
        }

        /* ===== FORMS ===== */
        .form-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 16px;
            margin-bottom: 16px;
        }

        .form-group-inline { display: flex; flex-direction: column; }

        .form-group-inline label {
            margin-bottom: 6px;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-2);
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .form-group-inline input,
        .form-group-inline select,
        .form-group-inline textarea {
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            background: var(--bg-raised);
            color: var(--text-1);
            font-size: 13px;
            font-family: 'Poppins', sans-serif;
            transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
            outline: none;
        }

        .form-group-inline textarea { min-height: 90px; resize: vertical; }

        .form-group-inline input:focus,
        .form-group-inline select:focus,
        .form-group-inline textarea:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12);
        }

        .form-group-inline select option { background: var(--bg-raised); }

        .form-group-inline small {
            margin-top: 5px;
            font-size: 11px;
            color: var(--text-3);
        }

        .section-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-2);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin: 24px 0 14px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border);
        }

        /* ===== BUTTONS ===== */
        .btn-save {
            padding: 10px 24px;
            background: var(--accent);
            color: #fff;
            border: none;
            border-radius: var(--radius-pill);
            cursor: pointer;
            font-size: 13px;
            font-weight: 700;
            font-family: 'Poppins', sans-serif;
            transition: all 0.15s var(--ease);
            display: inline-flex; align-items: center; gap: 7px;
        }

        .btn-save:hover {
            background: var(--accent-hover);
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(var(--accent-rgb),0.3);
        }

        .btn-secondary {
            padding: 10px 20px;
            background: transparent;
            color: var(--text-2);
            border: 1px solid var(--border-hover);
            border-radius: var(--radius-pill);
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            font-family: 'Poppins', sans-serif;
            transition: all 0.15s var(--ease);
            display: inline-flex; align-items: center; gap: 7px;
        }

        .btn-secondary:hover {
            background: rgba(255,255,255,0.05);
            color: var(--text-1);
            border-color: rgba(255,255,255,0.15);
        }

        .btn-danger {
            padding: 10px 20px;
            background: var(--danger-soft);
            color: #ff6b6b;
            border: 1px solid rgba(235,4,0,0.25);
            border-radius: var(--radius-pill);
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            font-family: 'Poppins', sans-serif;
            transition: all 0.15s var(--ease);
            display: inline-flex; align-items: center; gap: 7px;
        }

        .btn-danger:hover { background: rgba(235,4,0,0.18); }

        /* === WIDGETY (linki OBS) === */
        .widgets-grid {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .widget-card {
            background: rgba(255,255,255,0.02);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px 18px;
            transition: all 0.18s var(--ease);
        }

        .widget-card:hover {
            border-color: var(--border-hover);
            background: rgba(255,255,255,0.035);
        }

        .widget-card-head {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            margin-bottom: 12px;
        }

        .widget-icon {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .widget-meta {
            flex: 1;
            min-width: 0;
        }

        .widget-title {
            font: 700 15px/1.3 'Poppins', sans-serif;
            color: var(--text-1);
            margin-bottom: 4px;
        }

        .widget-desc {
            font-size: 12px;
            color: var(--text-3);
            line-height: 1.5;
        }

        .widget-dims {
            flex-shrink: 0;
        }

        .widget-dim-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            background: rgba(117,122,255,0.1);
            color: #757aff;
            border: 1px solid rgba(117,122,255,0.25);
            border-radius: 999px;
            font: 700 11px/1 'Poppins', sans-serif;
            white-space: nowrap;
        }

        .widget-url-row {
            display: flex;
            gap: 8px;
            align-items: stretch;
        }

        .widget-url-input {
            flex: 1;
            min-width: 0;
            padding: 10px 14px;
            background: rgba(0,0,0,0.35);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-1);
            font: 500 13px/1 'JetBrains Mono', 'Consolas', monospace;
            cursor: text;
            transition: all 0.15s var(--ease);
        }

        .widget-url-input:focus {
            outline: none;
            border-color: var(--accent);
            background: rgba(0,0,0,0.5);
        }

        .widget-copy-btn {
            padding: 10px 16px;
            background: var(--accent);
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font: 700 13px/1 'Poppins', sans-serif;
            transition: all 0.15s var(--ease);
            display: inline-flex;
            align-items: center;
            gap: 7px;
            white-space: nowrap;
        }

        .widget-copy-btn:hover {
            background: var(--accent-hover);
            transform: translateY(-1px);
        }

        .widget-copy-btn.copied {
            background: #22c55e;
        }

        .widget-preview-btn {
            padding: 10px 14px;
            background: transparent;
            color: var(--text-2);
            border: 1px solid var(--border);
            border-radius: 8px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            text-decoration: none;
            transition: all 0.15s var(--ease);
        }

        .widget-preview-btn:hover {
            color: var(--text-1);
            border-color: var(--border-hover);
            background: rgba(255,255,255,0.04);
        }

        @media (max-width: 640px) {
            .widget-card-head { flex-wrap: wrap; }
            .widget-dims { width: 100%; }
            .widget-url-row { flex-wrap: wrap; }
            .widget-url-input { width: 100%; }
        }

        .btn-group { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

        /* ===== TABLES ===== */
        .table-container { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border); }

        table { width: 100%; border-collapse: collapse; }

        th, td {
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid var(--border);
        }

        th {
            background: var(--bg-raised);
            color: var(--text-3);
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.07em;
        }

        tr:last-child td { border-bottom: none; }

        tr:hover td { background: rgba(255,255,255,0.02); }

        .badge {
            padding: 4px 10px;
            border-radius: var(--radius-pill);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.03em;
        }

        .badge-success { background: var(--success-soft); color: #52c41a; }
        .badge-danger { background: var(--danger-soft); color: #ff6b6b; }
        .badge-warning { background: var(--warning-soft); color: #ffa500; }

        /* ===== CONTROL PANEL ===== */
        .control-panel {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 12px;
        }

        .control-btn {
            padding: 18px 16px;
            border-radius: var(--radius-md);
            border: 1px solid var(--border-hover);
            background: var(--bg-raised);
            color: var(--text-2);
            cursor: pointer;
            transition: all 0.15s var(--ease);
            text-align: center;
            font-size: 13px;
            font-weight: 600;
            font-family: 'Poppins', sans-serif;
            display: flex; flex-direction: column; align-items: center; gap: 10px;
        }

        .control-btn i { font-size: 20px; color: var(--accent); }

        .control-btn:hover {
            background: var(--accent-soft);
            border-color: rgba(var(--accent-rgb),0.3);
            color: var(--text-1);
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(0,0,0,0.3);
        }

        .control-btn.btn-danger-ctrl {
            border-color: rgba(235,4,0,0.25);
        }

        .control-btn.btn-danger-ctrl i { color: #ff6b6b; }

        .control-btn.btn-danger-ctrl:hover {
            background: var(--danger-soft);
            border-color: rgba(235,4,0,0.4);
        }

        .control-btn.btn-warn-ctrl i { color: var(--gold); }

        /* ===== ALERT NOTIFICATIONS ===== */
        .alert {
            padding: 12px 18px;
            border-radius: var(--radius-md);
            margin-bottom: 18px;
            display: none;
            font-size: 13px;
            font-weight: 600;
            display: none; align-items: center; gap: 10px;
        }

        .alert-success {
            background: var(--success-soft);
            border: 1px solid rgba(82,196,26,0.3);
            color: #52c41a;
        }

        .alert-error {
            background: var(--danger-soft);
            border: 1px solid rgba(235,4,0,0.3);
            color: #ff6b6b;
        }

        /* ===== INFO BOXES ===== */
        .info-box {
            padding: 16px 18px;
            border-radius: var(--radius-md);
            margin: 16px 0;
            font-size: 13px;
            line-height: 1.7;
        }

        .info-box-accent {
            background: var(--accent-soft);
            border: 1px solid rgba(var(--accent-rgb),0.2);
            color: var(--text-2);
        }

        .info-box-accent strong { color: var(--text-1); }

        .info-box-success {
            background: var(--success-soft);
            border: 1px solid rgba(82,196,26,0.2);
            color: var(--text-2);
        }

        .info-box-warning {
            background: var(--warning-soft);
            border: 1px solid rgba(255,165,0,0.2);
            color: var(--text-2);
        }

        .info-box-danger {
            background: var(--danger-soft);
            border: 1px solid rgba(235,4,0,0.2);
            color: var(--text-2);
        }

        .info-box h3 {
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 8px;
            display: flex; align-items: center; gap: 8px;
        }

        .info-box-accent h3 { color: var(--accent); }
        .info-box-success h3 { color: #52c41a; }
        .info-box-warning h3 { color: var(--gold); }
        .info-box-danger h3 { color: var(--danger); }

        /* ===== MISC ===== */
        .color-preview {
            width: 36px; height: 36px;
            border-radius: var(--radius-md);
            border: 1px solid var(--border-hover);
            cursor: pointer;
        }

        .font-select { font-family: inherit; }
        .font-select option { font-family: inherit; background: var(--bg-raised); }

        /* Status badge */
        #overlay-status, #overlay-sound {
            color: #52c41a;
            font-weight: 700;
        }

        /* Animation preview row */
        .anim-preview-btn {
            padding: 8px 14px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-hover);
            border-radius: var(--radius-pill);
            color: var(--text-2);
            font-size: 12px;
            font-weight: 600;
            font-family: 'Poppins', sans-serif;
            cursor: pointer;
            transition: all 0.15s var(--ease);
            display: inline-flex; align-items: center; gap: 6px;
        }

        .anim-preview-btn:hover {
            background: var(--accent-soft);
            border-color: rgba(var(--accent-rgb),0.3);
            color: var(--accent);
        }

        /* Responsive */
        @media (max-width: 900px) {
            .sidebar { width: 220px; }
            .main-content { margin-left: 220px; width: calc(100% - 220px); padding: 20px; }
        }

        @media (max-width: 768px) {
            .sidebar { width: 100%; position: relative; height: auto; }
            .main-content { margin-left: 0; width: 100%; }
            .dashboard { flex-direction: column; }
        }

        /* ===== VISUAL PREVIEW EDITOR ===== */
        .ve-wrapper { margin-bottom: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
        .ve-header { display: flex; align-items: center; justify-content: space-between; background: var(--bg-elevated); padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--text-2); letter-spacing: .04em; text-transform: uppercase; }
        .ve-header span { color: var(--accent); }
        .ve-canvas { position: relative; width: 100%; height: 260px; overflow: hidden; background: #121212; cursor: default; }
        .ve-el { position: absolute; cursor: pointer; user-select: none; border: 2px solid transparent; border-radius: 4px; padding: 4px 8px; transition: border-color .15s; word-break: break-word; text-align: center; }
        .ve-el:hover { border-color: rgba(117,122,255,.4); }
        .ve-el.selected { border-color: var(--accent) !important; }
        .ve-toolbar { display: none; align-items: center; gap: 6px; flex-wrap: wrap; background: var(--bg-elevated); border-top: 1px solid var(--border); padding: 10px 14px; }
        .ve-toolbar.visible { display: flex; }
        .ve-toolbar label { font-size: 11px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
        .ve-toolbar select, .ve-toolbar input[type=number] { background: var(--bg-raised); border: 1px solid var(--border); color: var(--text-1); border-radius: 6px; padding: 4px 8px; font-size: 13px; height: 32px; }
        .ve-toolbar input[type=number] { width: 68px; }
        .ve-toolbar input[type=color] { width: 36px; height: 32px; border: 1px solid var(--border); border-radius: 6px; padding: 2px 3px; background: var(--bg-raised); cursor: pointer; }
        .ve-toolbar .ve-sep { width: 1px; height: 24px; background: var(--border); margin: 0 4px; }
        .ve-toolbar .ve-align-btn { background: var(--bg-raised); border: 1px solid var(--border); color: var(--text-2); border-radius: 6px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; transition: background .15s, color .15s; }
        .ve-toolbar .ve-align-btn.active, .ve-toolbar .ve-align-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
        .ve-toolbar .ve-elem-label { background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: .05em; }
        .ve-ctx { position: fixed; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 6px 0; z-index: 9999; min-width: 190px; box-shadow: 0 8px 32px rgba(0,0,0,.5); display: none; }
        .ve-ctx.visible { display: block; }
        .ve-ctx-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 13px; color: var(--text-1); cursor: pointer; transition: background .12s; }
        .ve-ctx-item i { width: 14px; color: var(--text-3); }
        .ve-ctx-item:hover { background: var(--accent-soft); color: var(--accent); }
        .ve-ctx-item:hover i { color: var(--accent); }
        .ve-ctx-sep { height: 1px; background: var(--border); margin: 4px 0; }
        .ve-ctx-item.danger { color: #ff6b6b; }
        .ve-ctx-item.danger i { color: #ff6b6b; }
        .ve-ctx-item.danger:hover { background: rgba(255,107,107,.1); }
        .ve-hint { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--text-3); pointer-events: none; white-space: nowrap; }

        /* ===== COLOR PICKER ===== */
        .cp-wrap {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--bg-raised);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 4px 8px 4px 4px;
            height: 38px;
            transition: border-color .15s;
        }
        .cp-wrap:focus-within { border-color: var(--accent); }
        .cp-wrap input[type=color] {
            width: 28px; height: 28px;
            border: none;
            border-radius: 5px;
            padding: 1px 2px;
            background: transparent;
            cursor: pointer;
            flex-shrink: 0;
        }
        .cp-wrap input[type=text] {
            background: transparent;
            border: none;
            outline: none;
            color: var(--text-1);
            font-size: 13px;
            font-family: 'Courier New', monospace;
            width: 110px;
            padding: 0;
        }
        .cp-wrap input[type=text]::placeholder { color: var(--text-3); }
        /* Ve toolbar color */
        .ve-toolbar .cp-wrap { height: 32px; padding: 2px 6px 2px 2px; }
        .ve-toolbar .cp-wrap input[type=color] { width: 24px; height: 24px; }
        .ve-toolbar .cp-wrap input[type=text] { width: 80px; font-size: 12px; }
    </style>
</head>
<body>

<?php if (!$isLoggedIn): ?>
    <!-- === STRONA LOGOWANIA === -->
    <div class="login-container">
        <div class="login-box">
            <div class="login-logo">
                <div class="login-logo-icon">
                    <i class="fas fa-bolt"></i>
                </div>
                <h1><?php echo htmlspecialchars(getSetting('brand_name', 'OpenDonate')); ?></h1>
                <p>Panel Administracyjny</p>
            </div>

            <?php if (isset($login_error)): ?>
                <div class="error-message"><i class="fas fa-exclamation-circle"></i> <?php echo $login_error; ?></div>
            <?php endif; ?>

            <form method="POST">
                <div class="form-group">
                    <label>Nazwa użytkownika</label>
                    <input type="text" name="username" required autofocus placeholder="admin">
                </div>

                <div class="form-group">
                    <label>Hasło</label>
                    <input type="password" name="password" required placeholder="••••••••">
                </div>

                <button type="submit" name="login" class="btn btn-primary">
                    <i class="fas fa-sign-in-alt"></i> Zaloguj się
                </button>
            </form>
        </div>
    </div>

<?php else: ?>
    <!-- === DASHBOARD === -->
    <div class="dashboard">
        <!-- Sidebar -->
        <div class="sidebar">
            <div class="sidebar-logo">
                <div class="sidebar-logo-icon"><i class="fas fa-bolt"></i></div>
                <div>
                    <div class="sidebar-logo-text"><?php echo htmlspecialchars(getSetting('brand_name', 'OpenDonate')); ?></div>
                    <div class="sidebar-logo-sub">Panel admina</div>
                </div>
            </div>

            <div class="nav-label">Główne</div>

            <div class="nav-item active" data-section="dashboard">
                <i class="fas fa-chart-bar"></i>
                <span>Dashboard</span>
            </div>

            <div class="nav-item" data-section="general">
                <i class="fas fa-sliders-h"></i>
                <span>Ustawienia ogólne</span>
            </div>

            <div class="nav-item" data-section="test">
                <i class="fas fa-paper-plane"></i>
                <span>Testowy donejt</span>
            </div>

            <div class="nav-item" data-section="control">
                <i class="fas fa-gamepad"></i>
                <span>Panel sterowania</span>
            </div>

            <div class="nav-label">Overlaye</div>

            <div class="nav-item" data-section="widgets">
                <i class="fas fa-link"></i>
                <span>Widgety (linki OBS)</span>
            </div>

            <div class="nav-item" data-section="goals">
                <i class="fas fa-bullseye"></i>
                <span>Cele donacji</span>
            </div>

            <div class="nav-item" data-section="top-donate">
                <i class="fas fa-trophy"></i>
                <span>Top Donate</span>
            </div>

            <div class="nav-item" data-section="last-donate">
                <i class="fas fa-history"></i>
                <span>Last Donate</span>
            </div>

            <div class="nav-item" data-section="countdown">
                <i class="fas fa-stopwatch"></i>
                <span>Odlicznik</span>
            </div>

            <div class="nav-item" data-section="templates">
                <i class="fas fa-layer-group"></i>
                <span>Szablony kwotowe</span>
            </div>

            <div class="nav-label">System</div>

            <div class="nav-item" data-section="donations">
                <i class="fas fa-list"></i>
                <span>Historia donejtów</span>
            </div>

            <div class="nav-item" data-section="stripe">
                <i class="fas fa-credit-card"></i>
                <span>Płatności</span>
            </div>
        </div>
        
        <!-- Main Content -->
        <div class="main-content">
            <div class="page-header">
                <h1 id="page-title">Dashboard</h1>
                <div class="user-info">
                    <span class="user-badge"><i class="fas fa-user" style="margin-right:6px;color:var(--accent)"></i><?php echo $_SESSION['admin_username']; ?></span>
                    <a href="?logout=1" class="btn-logout"><i class="fas fa-sign-out-alt"></i> Wyloguj</a>
                </div>
            </div>
            
            <div id="alert-container"></div>
            
            <!-- === DASHBOARD === -->
            <div class="section active" id="section-dashboard">
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon"><i class="fas fa-heart"></i></div>
                        <div class="stat-label">Wszystkie donacje</div>
                        <div class="stat-value"><?php echo $stats['total_donations']; ?></div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-icon"><i class="fas fa-coins"></i></div>
                        <div class="stat-label">Suma zebranych środków</div>
                        <div class="stat-value"><?php echo number_format($stats['total_amount'], 2); ?> zł</div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-icon"><i class="fas fa-calendar-day"></i></div>
                        <div class="stat-label">Dzisiaj donacje</div>
                        <div class="stat-value"><?php echo $stats['today_donations']; ?></div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-icon"><i class="fas fa-fire"></i></div>
                        <div class="stat-label">Dzisiaj zebrano</div>
                        <div class="stat-value"><?php echo number_format($stats['today_amount'], 2); ?> zł</div>
                    </div>
                </div>
                
                <div class="card">
                    <h2 class="card-title"><div class="card-title-icon"><i class="fas fa-list-alt"></i></div> Ostatnie donacje</h2>
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Nick</th>
                                    <th>Kwota</th>
                                    <th>Wiadomość</th>
                                    <th>Status</th>
                                    <th>Data</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach (array_slice($recentDonations, 0, 10) as $donation): ?>
                                <tr>
                                    <td>#<?php echo $donation['id']; ?></td>
                                    <td><?php echo htmlspecialchars($donation['donor_name']); ?></td>
                                    <td><?php echo number_format($donation['amount'], 2); ?> zł</td>
                                    <td><?php echo htmlspecialchars(substr($donation['message'] ?? '', 0, 50)); ?></td>
                                    <td>
                                        <?php if ($donation['is_seen']): ?>
                                            <span class="badge badge-success">Wyświetlony</span>
                                        <?php else: ?>
                                            <span class="badge badge-warning">Oczekuje</span>
                                        <?php endif; ?>
                                    </td>
                                    <td><?php echo date('Y-m-d H:i', strtotime($donation['created_at'])); ?></td>
                                </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- === USTAWIENIA OGÓLNE === -->
            <div class="section" id="section-general">
                <div class="card">
                    <h2 class="card-title"><div class="card-title-icon"><i class="fas fa-sliders-h"></i></div> Ustawienia ogólne</h2>
                    <form id="form-general">
                        <!-- === BRANDING === -->
                        <h3 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em;"><i class="fas fa-paint-brush" style="margin-right: 6px; color: #757aff;"></i> Branding</h3>
                        <div style="background: rgba(117, 122, 255, 0.06); border: 1px solid rgba(117, 122, 255, 0.2); border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; font-size: 13px; color: var(--text-2);">
                            <i class="fas fa-info-circle" style="color: #757aff;"></i> Te pola dostosowują wygląd strony donatów do Twojej marki: nazwa, logo, link, favicon i dane do regulaminu RODO.
                        </div>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Nazwa marki (widoczna w nagłówku)</label>
                                <input type="text" name="brand_name" value="<?php echo htmlspecialchars(getSetting('brand_name', 'OpenDonate')); ?>" placeholder="np. Twój Nick / nazwa kanału">
                            </div>

                            <div class="form-group-inline">
                                <label>Nazwa streamera (na stronie podziękowania)</label>
                                <input type="text" name="streamer_name" value="<?php echo htmlspecialchars(getSetting('streamer_name', '')); ?>" placeholder="np. JanKowalski">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>URL logo (link do obrazka)</label>
                                <input type="url" name="brand_logo_url" value="<?php echo htmlspecialchars(getSetting('brand_logo_url', '')); ?>" placeholder="https://twoja-domena.pl/logo.png">
                                <small style="color:var(--text-3);">Zostaw puste, aby wyświetlać tylko tekst marki</small>
                            </div>

                            <div class="form-group-inline">
                                <label>URL favicon (.ico lub .png)</label>
                                <input type="url" name="brand_favicon_url" value="<?php echo htmlspecialchars(getSetting('brand_favicon_url', '')); ?>" placeholder="https://twoja-domena.pl/favicon.ico">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>URL do powrotu (np. Twitch, YouTube)</label>
                                <input type="url" name="brand_url" value="<?php echo htmlspecialchars(getSetting('brand_url', '#')); ?>" placeholder="https://twitch.tv/twojnick">
                            </div>

                            <div class="form-group-inline">
                                <label>Email kontaktowy (regulamin RODO)</label>
                                <input type="email" name="contact_email" value="<?php echo htmlspecialchars(getSetting('contact_email', '')); ?>" placeholder="kontakt@twoja-domena.pl">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Nazwa operatora (regulamin)</label>
                                <input type="text" name="operator_name" value="<?php echo htmlspecialchars(getSetting('operator_name', '')); ?>" placeholder="np. Jan Kowalski / Firma XYZ">
                            </div>
                        </div>

                        <hr style="margin: 20px 0; border: 0; border-top: 1px solid var(--border);">
                        <h3 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em;"><i class="fas fa-sliders-h" style="margin-right: 6px; color: #757aff;"></i> Ogólne</h3>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Tytuł strony</label>
                                <input type="text" name="site_title" value="<?php echo getSetting('site_title', 'OpenDonate'); ?>">
                            </div>
                            
                            <div class="form-group-inline">
                                <label>Minimalna kwota donacji (PLN)</label>
                                <input type="number" step="0.01" name="min_donation_amount" value="<?php echo getSetting('min_donation_amount', '1.00'); ?>">
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Maksymalna kwota donacji (PLN)</label>
                                <input type="number" step="0.01" name="max_donation_amount" value="<?php echo getSetting('max_donation_amount', '10000.00'); ?>">
                            </div>
                            
                            <div class="form-group-inline">
                                <label>Maksymalna długość wiadomości (znaki)</label>
                                <input type="number" name="alert_max_chars" value="<?php echo getSetting('alert_max_chars', '200'); ?>">
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Czas trwania alertu (ms)</label>
                                <input type="number" name="alert_duration" value="<?php echo getSetting('alert_duration', '30000'); ?>" min="2000" id="alert-duration-input">
                                <small style="color:var(--text-3);">Używany tylko gdy tryb automatyczny jest wyłączony</small>
                            </div>
                            
                            <div class="form-group-inline">
                                <label>Minimalny czas trwania (ms)</label>
                                <input type="number" name="alert_min_duration" value="<?php echo getSetting('alert_min_duration', '5000'); ?>" min="2000">
                                <small style="color:var(--text-3);">Minimalna długość gdy alert nie ma dźwięku/TTS</small>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group-inline">
                                <label style="display: flex; align-items: center; gap: 10px;">
                                    <input type="checkbox" name="alert_auto_duration" value="1" <?php echo getSetting('alert_auto_duration', '1') === '1' ? 'checked' : ''; ?> id="alert-auto-checkbox" style="width: auto; height: auto;">
                                    <span>Automatyczny czas trwania donejta</span>
                                </label>
                                <small style="color:var(--text-3); display:block; margin-top:5px;">
                                    Alert będzie widoczny tyle czasu ile trwa dźwięk + TTS<br>
                                    (np. 2s alert + 10s dźwięk = alert schowa się po 2s ale dźwięk gra 10s)
                                </small>
                            </div>
                        </div>
                        
                        <div class="section-title"><i class="fas fa-magic" style="color:var(--accent)"></i> Animacje alertu</div>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Animacja wejścia</label>
                                <select name="alert_animation_in">
                                    <?php
                                    $animIn = getSetting('alert_animation_in', 'slideInUp');
                                    $optionsIn = [
                                        'slideInUp'=>'Slide In Up','slideInDown'=>'Slide In Down','slideInLeft'=>'Slide In Left','slideInRight'=>'Slide In Right',
                                        'fadeIn'=>'Fade In','zoomIn'=>'Zoom In','zoomIn'=>'Zoom In',
                                        'bounceIn'=>'Bounce In','bounceInDown'=>'Bounce In Down','bounceInUp'=>'Bounce In Up','bounceInLeft'=>'Bounce In Left','bounceInRight'=>'Bounce In Right',
                                        'backInDown'=>'Back In Down','backInLeft'=>'Back In Left','backInRight'=>'Back In Right','backInUp'=>'Back In Up',
                                        'rotateIn'=>'Rotate In','rotateInDownLeft'=>'Rotate In Down Left','rotateInDownRight'=>'Rotate In Down Right','rotateInUpLeft'=>'Rotate In Up Left','rotateInUpRight'=>'Rotate In Up Right',
                                        'lightSpeedInRight'=>'Light Speed In Right','lightSpeedInLeft'=>'Light Speed In Left',
                                        'jackInTheBox'=>'Jack In The Box','rollIn'=>'Roll In',
                                    ];
                                    foreach ($optionsIn as $val => $label):
                                    ?>
                                        <option value="<?php echo $val; ?>" <?php echo $animIn === $val ? 'selected' : ''; ?>><?php echo $label; ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </div>

                            <div class="form-group-inline">
                                <label>Animacja wyjścia</label>
                                <select name="alert_animation_out">
                                    <?php
                                    $animOut = getSetting('alert_animation_out', 'fadeOut');
                                    $optionsOut = [
                                        'fadeOut'=>'Fade Out','slideOutUp'=>'Slide Out Up','slideOutDown'=>'Slide Out Down','slideOutLeft'=>'Slide Out Left','slideOutRight'=>'Slide Out Right',
                                        'zoomOut'=>'Zoom Out','bounceOut'=>'Bounce Out','bounceOutDown'=>'Bounce Out Down','bounceOutUp'=>'Bounce Out Up','bounceOutLeft'=>'Bounce Out Left','bounceOutRight'=>'Bounce Out Right',
                                        'backOutDown'=>'Back Out Down','backOutLeft'=>'Back Out Left','backOutRight'=>'Back Out Right','backOutUp'=>'Back Out Up',
                                        'rotateOut'=>'Rotate Out','rotateOutDownLeft'=>'Rotate Out Down Left','rotateOutDownRight'=>'Rotate Out Down Right','rotateOutUpLeft'=>'Rotate Out Up Left','rotateOutUpRight'=>'Rotate Out Up Right',
                                        'lightSpeedOutRight'=>'Light Speed Out Right','lightSpeedOutLeft'=>'Light Speed Out Left',
                                        'rollOut'=>'Roll Out',
                                    ];
                                    foreach ($optionsOut as $val => $label):
                                    ?>
                                        <option value="<?php echo $val; ?>" <?php echo $animOut === $val ? 'selected' : ''; ?>><?php echo $label; ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </div>

                            <div class="form-group-inline">
                                <label>Animacja w trakcie (podczas)</label>
                                <select name="alert_animation_during">
                                    <?php
                                    $animDuring = getSetting('alert_animation_during', 'none');
                                    $optionsDuring = [
                                        'none'       => 'Brak',
                                        // ── Bardzo subtelne ──
                                        'pulse'      => 'Pulse — delikatne oddychanie',
                                        'breath'     => 'Breath — spokojny oddech',
                                        'float'      => 'Float — unosi się góra/dół',
                                        'glow'       => 'Glow — miga jasnością',
                                        // ── Subtelne ──
                                        'heartBeat'  => 'Heart Beat — bicie serca',
                                        'nod'        => 'Nod — lekkie kiwanie',
                                        'swing'      => 'Swing — delikatne wahanie',
                                        // ── Umiarkowane ──
                                        'bounce'     => 'Bounce — mały skok',
                                        'shakeX'     => 'Shake X — drganie poziome',
                                        'shakeY'     => 'Shake Y — drganie pionowe',
                                        'headShake'  => 'Head Shake — kiwanie głową',
                                        'flash'      => 'Flash — miga',
                                        // ── Bardziej wyraźne ──
                                        'rubberBand' => 'Rubber Band',
                                        'tada'       => 'Tada',
                                        'wobble'     => 'Wobble',
                                        'jello'      => 'Jello',
                                    ];
                                    foreach ($optionsDuring as $val => $label):
                                    ?>
                                        <option value="<?php echo $val; ?>" <?php echo $animDuring === $val ? 'selected' : ''; ?>><?php echo $label; ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                        </div>
                        
                        <div class="section-title"><i class="fas fa-percentage" style="color:var(--accent)"></i> Prowizje — netto w celu donacji</div>
                        <p style="color: #999; margin-bottom: 15px; font-size: 13px;">
                            Włącz, aby do celu donacji doliczać kwotę netto (po odjęciu prowizji). Dzięki temu cel pokazuje realną kwotę, którą otrzymujesz na konto. Prowizje Stripe i PayPal są rozdzielone — system automatycznie rozpoznaje skąd przyszła wpłata i odlicza odpowiednią prowizję.
                        </p>
                        
                        <div style="background: rgba(117,122,255,0.08); border: 1px solid rgba(117,122,255,0.2); border-radius: 8px; padding: 15px; margin-bottom: 15px;">
                            <div style="font-weight: 600; margin-bottom: 10px; color: #757aff;"><i class="fab fa-stripe-s"></i> Stripe</div>
                            <div class="form-row">
                                <div class="form-group-inline">
                                    <label style="display: flex; align-items: center; gap: 10px;">
                                        <input type="checkbox" name="stripe_fee_enabled" value="1" <?php echo getSetting('stripe_fee_enabled', '0') === '1' ? 'checked' : ''; ?> style="width: auto; height: auto;">
                                        <span>Odliczaj prowizję Stripe od celu donacji</span>
                                    </label>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group-inline">
                                    <label>Prowizja procentowa (%)</label>
                                    <input type="number" step="0.01" name="stripe_fee_percent" value="<?php echo getSetting('stripe_fee_percent', '1.6'); ?>" min="0" max="10">
                                    <small style="color:var(--text-3);">BLIK: 1.6% | Karty EOG: 1.5% | Revolut Pay: ~1.5%</small>
                                </div>
                                <div class="form-group-inline">
                                    <label>Stała opłata za transakcję (PLN)</label>
                                    <input type="number" step="0.01" name="stripe_fee_fixed" value="<?php echo getSetting('stripe_fee_fixed', '1.00'); ?>" min="0">
                                    <small style="color:var(--text-3);">Standardowo 1,00 zł dla Polski</small>
                                </div>
                            </div>
                        </div>
                        
                        <div style="background: rgba(0,112,210,0.08); border: 1px solid rgba(0,112,210,0.2); border-radius: 8px; padding: 15px; margin-bottom: 15px;">
                            <div style="font-weight: 600; margin-bottom: 10px; color: #0070d2;"><i class="fab fa-paypal"></i> PayPal</div>
                            <div class="form-row">
                                <div class="form-group-inline">
                                    <label style="display: flex; align-items: center; gap: 10px;">
                                        <input type="checkbox" name="paypal_fee_enabled" value="1" <?php echo getSetting('paypal_fee_enabled', '0') === '1' ? 'checked' : ''; ?> style="width: auto; height: auto;">
                                        <span>Odliczaj prowizję PayPal od celu donacji</span>
                                    </label>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group-inline">
                                    <label>Prowizja procentowa (%)</label>
                                    <input type="number" step="0.01" name="paypal_fee_percent" value="<?php echo getSetting('paypal_fee_percent', '2.90'); ?>" min="0" max="10">
                                    <small style="color:var(--text-3);">Darowizny krajowe: 2.90% | Stała opłata może się wahać (1,35–1,49 zł)</small>
                                </div>
                                <div class="form-group-inline">
                                    <label>Stała opłata za transakcję (PLN)</label>
                                    <input type="number" step="0.01" name="paypal_fee_fixed" value="<?php echo getSetting('paypal_fee_fixed', '1.45'); ?>" min="0">
                                    <small style="color:var(--text-3);">Średnia z obserwacji (1,35–1,49 zł w zależności od metody wpłacającego)</small>
                                </div>
                            </div>
                        </div>

                        <button type="submit" class="btn-save">Zapisz ustawienia</button>
                    </form>
                </div>
            </div>
            
            <!-- === WIDGETY (linki do OBS) === -->
            <div class="section" id="section-widgets">
                <div class="card">
                    <h2 class="card-title"><div class="card-title-icon"><i class="fas fa-link"></i></div> Widgety do OBS</h2>
                    <p style="color: var(--text-2); margin-bottom: 4px; font-size: 14px;">
                        Wszystkie nakładki do dodania w OBS Studio jako <strong>Browser Source</strong>. Skopiuj URL kliknięciem.
                    </p>
                    <p style="color: var(--text-3); margin-bottom: 24px; font-size: 12px;">
                        <i class="fas fa-info-circle"></i> W OBS: Źródło → <em>Dodaj</em> → <em>Browser Source</em> → wklej URL + ustaw sugerowaną szerokość/wysokość.
                    </p>

                    <div class="widgets-grid">
                        <?php
                        $widgets = [
                            [
                                'icon' => 'fa-bell',
                                'icon_color' => '#FF6B6B',
                                'title' => 'Alerty donatów',
                                'desc' => 'Główny widget z animowanymi alertami, TTS i głosówkami widzów.',
                                'file' => 'alert_box.php',
                                'width' => 800,
                                'height' => 200,
                            ],
                            [
                                'icon' => 'fa-trophy',
                                'icon_color' => '#FFD700',
                                'title' => 'Top donejtów',
                                'desc' => 'Ranking najwyższych donatów (z filtrami czasowymi i wyrównaniem).',
                                'file' => 'top_donate.php',
                                'width' => 400,
                                'height' => 600,
                            ],
                            [
                                'icon' => 'fa-history',
                                'icon_color' => '#22c55e',
                                'title' => 'Ostatnie donaty',
                                'desc' => 'Lista najświeższych donejtów chronologicznie.',
                                'file' => 'last_donate.php',
                                'width' => 400,
                                'height' => 200,
                            ],
                            [
                                'icon' => 'fa-stopwatch',
                                'icon_color' => '#eab308',
                                'title' => 'Odlicznik do końca transmisji',
                                'desc' => 'Timer dla streamów „przedłużanych" (1 PLN = X sek.). Z auto-doliczaniem czasu z donatów.',
                                'file' => 'countdown_overlay.php',
                                'width' => 600,
                                'height' => 200,
                            ],
                        ];
                        ?>

                        <?php foreach ($widgets as $w): $url = rtrim(BASE_URL, '/') . '/' . $w['file']; ?>
                        <div class="widget-card">
                            <div class="widget-card-head">
                                <div class="widget-icon" style="background: <?php echo $w['icon_color']; ?>1F; color: <?php echo $w['icon_color']; ?>;">
                                    <i class="fas <?php echo $w['icon']; ?>"></i>
                                </div>
                                <div class="widget-meta">
                                    <div class="widget-title"><?php echo htmlspecialchars($w['title']); ?></div>
                                    <div class="widget-desc"><?php echo htmlspecialchars($w['desc']); ?></div>
                                </div>
                                <div class="widget-dims">
                                    <span class="widget-dim-chip"><i class="fas fa-arrows-alt-h"></i> <?php echo $w['width']; ?>×<?php echo $w['height']; ?> px</span>
                                </div>
                            </div>

                            <div class="widget-url-row">
                                <input type="text" class="widget-url-input" value="<?php echo htmlspecialchars($url); ?>" readonly id="widget-url-<?php echo md5($w['file']); ?>" onclick="this.select()">
                                <button type="button" class="widget-copy-btn" onclick="copyWidgetUrl('widget-url-<?php echo md5($w['file']); ?>', this)" title="Skopiuj URL">
                                    <i class="fas fa-copy"></i> Kopiuj
                                </button>
                                <a href="<?php echo htmlspecialchars($url); ?>" target="_blank" class="widget-preview-btn" title="Otwórz w nowej karcie (podgląd)">
                                    <i class="fas fa-external-link-alt"></i>
                                </a>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    </div>

                    <!-- === CELE DONACJI — osobny link dla każdego celu === -->
                    <?php
                    $overlayGoals = $pdo->query("
                        SELECT id, title, is_default, is_active, show_in_overlay
                        FROM goals
                        WHERE is_active = 1
                        ORDER BY is_default DESC, display_order ASC, id ASC
                    ")->fetchAll();
                    ?>

                    <div style="margin-top: 28px;">
                        <h3 style="font: 700 16px/1.2 'Poppins', sans-serif; color: var(--text-1); margin-bottom: 4px; display: flex; align-items: center; gap: 10px;">
                            <span style="width: 28px; height: 28px; border-radius: 8px; background: rgba(117,122,255,0.18); color: #757aff; display: inline-flex; align-items: center; justify-content: center;"><i class="fas fa-bullseye" style="font-size: 13px;"></i></span>
                            Cele donacji (osobne widgety)
                        </h3>
                        <p style="color: var(--text-3); font-size: 12px; line-height: 1.5; margin-bottom: 14px;">
                            Każdy cel ma swój własny URL z parametrem <code>?cel=N</code>. Dodaj w OBS osobny Browser Source dla każdego celu, który chcesz wyświetlać. Bez parametru pokazuje się cel domyślny.
                        </p>

                        <div class="widgets-grid">
                            <?php
                            // Najpierw widget bez parametru (cel domyślny)
                            $defaultGoalUrl = rtrim(BASE_URL, '/') . '/goal_overlay.php';
                            ?>
                            <div class="widget-card" style="border-color: rgba(var(--accent-rgb), 0.35); background: rgba(var(--accent-rgb), 0.04);">
                                <div class="widget-card-head">
                                    <div class="widget-icon" style="background: rgba(117,122,255,0.18); color: #757aff;">
                                        <i class="fas fa-bullseye"></i>
                                    </div>
                                    <div class="widget-meta">
                                        <div class="widget-title">Cel domyślny <span style="font-size: 11px; font-weight: 600; color: var(--text-3); margin-left: 6px;">(bez parametru)</span></div>
                                        <div class="widget-desc">Automatycznie pokazuje cel oznaczony jako „domyślny". Gdy go nie ma — pierwszy aktywny cel z flagą „Pokazuj w overlay".</div>
                                    </div>
                                    <div class="widget-dims">
                                        <span class="widget-dim-chip"><i class="fas fa-arrows-alt-h"></i> 600×200 px</span>
                                    </div>
                                </div>
                                <div class="widget-url-row">
                                    <input type="text" class="widget-url-input" value="<?php echo htmlspecialchars($defaultGoalUrl); ?>" readonly id="widget-goal-default" onclick="this.select()">
                                    <button type="button" class="widget-copy-btn" onclick="copyWidgetUrl('widget-goal-default', this)" title="Skopiuj URL">
                                        <i class="fas fa-copy"></i> Kopiuj
                                    </button>
                                    <a href="<?php echo htmlspecialchars($defaultGoalUrl); ?>" target="_blank" class="widget-preview-btn" title="Podgląd">
                                        <i class="fas fa-external-link-alt"></i>
                                    </a>
                                </div>
                            </div>

                            <?php if (empty($overlayGoals)): ?>
                            <div style="padding: 20px; background: rgba(255,255,255,0.02); border: 1px dashed var(--border); border-radius: 12px; color: var(--text-3); text-align: center;">
                                <i class="fas fa-info-circle" style="color:#757aff;"></i> Brak aktywnych celów. Przejdź do <strong>Cele donacji</strong> aby dodać.
                            </div>
                            <?php else: ?>
                                <?php foreach ($overlayGoals as $og):
                                    $goalUrl = rtrim(BASE_URL, '/') . '/goal_overlay.php?cel=' . intval($og['id']);
                                    $inputId = 'widget-goal-' . intval($og['id']);
                                    $isShownInOverlay = (bool)$og['show_in_overlay'];
                                ?>
                                <div class="widget-card">
                                    <div class="widget-card-head">
                                        <div class="widget-icon" style="background: rgba(117,122,255,0.18); color: #757aff;">
                                            <i class="fas fa-bullseye"></i>
                                        </div>
                                        <div class="widget-meta">
                                            <div class="widget-title">
                                                <?php echo htmlspecialchars($og['title']); ?>
                                                <?php if ($og['is_default']): ?>
                                                    <span style="font-size: 10px; font-weight: 700; color: var(--accent); background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.25); padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; letter-spacing: 0.04em; text-transform: uppercase;"><i class="fas fa-thumbtack" style="font-size: 8px;"></i> Domyślny</span>
                                                <?php endif; ?>
                                                <?php if (!$isShownInOverlay): ?>
                                                    <span style="font-size: 10px; font-weight: 700; color: #ef4444; background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.25); padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; letter-spacing: 0.04em; text-transform: uppercase;"><i class="fas fa-eye-slash" style="font-size: 8px;"></i> Ukryty w overlay</span>
                                                <?php endif; ?>
                                            </div>
                                            <div class="widget-desc">ID: <?php echo intval($og['id']); ?> &middot; Parametr URL: <code>?cel=<?php echo intval($og['id']); ?></code></div>
                                        </div>
                                        <div class="widget-dims">
                                            <span class="widget-dim-chip"><i class="fas fa-arrows-alt-h"></i> 600×200 px</span>
                                        </div>
                                    </div>
                                    <div class="widget-url-row">
                                        <input type="text" class="widget-url-input" value="<?php echo htmlspecialchars($goalUrl); ?>" readonly id="<?php echo $inputId; ?>" onclick="this.select()">
                                        <button type="button" class="widget-copy-btn" onclick="copyWidgetUrl('<?php echo $inputId; ?>', this)" title="Skopiuj URL">
                                            <i class="fas fa-copy"></i> Kopiuj
                                        </button>
                                        <a href="<?php echo htmlspecialchars($goalUrl); ?>" target="_blank" class="widget-preview-btn" title="Podgląd">
                                            <i class="fas fa-external-link-alt"></i>
                                        </a>
                                    </div>
                                </div>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </div>
                    </div>

                    <div class="info-box info-box-accent" style="margin-top: 20px;">
                        <h3><i class="fas fa-lightbulb"></i> Wskazówki</h3>
                        <p style="font-size: 13px; line-height: 1.6;">
                            • W ustawieniach Browser Source zaznacz <strong>„Refresh browser when scene becomes active"</strong> — overlaye odświeżą się przy każdym wejściu na scenę<br>
                            • Wymiary są <strong>sugerowane</strong> — możesz ustawić własne (np. większe Top Donate dla pełnego ekranu)<br>
                            • Zmiany kolorów/czcionek w panelu zastosują się <strong>natychmiast, bez restartu OBS</strong><br>
                            • Jeśli BASE_URL w <code>config.php</code> jest niepoprawne, linki też będą złe — sprawdź wartość:
                            <code style="display: block; background: rgba(0,0,0,0.4); padding: 8px 12px; border-radius: 6px; margin-top: 8px; word-break: break-all;"><?php echo htmlspecialchars(BASE_URL); ?></code>
                        </p>
                    </div>
                </div>
            </div>

            <!-- === CELE DONACJI === -->
            <div class="section" id="section-goals">
                <div class="card" style="margin-bottom: 16px;">
                    <h2 class="card-title"><div class="card-title-icon"><i class="fas fa-bullseye"></i></div> Cele donacji</h2>
                    <p style="color: var(--text-2); font-size: 13px; line-height: 1.6; margin-bottom: 8px;">
                        Możesz utworzyć dowolną ilość celów donacji. <strong>Każdy donate doliczy się tylko do wybranego przez widza celu</strong> (lub do domyślnego jeśli widz nie wybrał).
                    </p>
                    <p style="color: var(--text-3); font-size: 12px; line-height: 1.6; margin-bottom: 0;">
                        • <strong>Domyślny</strong> = ten zaznaczony domyślnie na stronie wpłat (tylko 1 cel może być domyślny)<br>
                        • <strong>Pokazuj na stronie wpłat</strong> = widz może wybrać ten cel klikając na karcie<br>
                        • <strong>Pokazuj w overlay</strong> = cel pojawi się w widgecie OBS (goal_overlay.php). Jeśli aktywnych jest kilka, będą rotować co kilka sekund.
                    </p>
                </div>

                <?php foreach ($goals as $goal): ?>
                <div class="card" style="<?php echo $goal['is_default'] ? 'border: 1px solid rgba(255,215,0,0.5); background: linear-gradient(135deg, rgba(255,215,0,0.04), transparent);' : ''; ?>">
                    <h2 class="card-title">
                        <div class="card-title-icon"><i class="fas fa-bullseye"></i></div>
                        Cel: <?php echo htmlspecialchars($goal['title']); ?>
                        <?php if ($goal['is_default']): ?>
                            <span style="background: linear-gradient(135deg, #FFD700, #FFA500); color: #000; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; margin-left: 10px;"><i class="fas fa-star"></i> DOMYŚLNY</span>
                        <?php endif; ?>
                        <?php if (!$goal['is_active']): ?>
                            <span style="background: rgba(239,68,68,0.2); color: #ef4444; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; margin-left: 8px;">NIEAKTYWNY</span>
                        <?php endif; ?>
                    </h2>
                    <form class="form-goal" data-goal-id="<?php echo $goal['id']; ?>">
                        <input type="hidden" name="goal_id" value="<?php echo $goal['id']; ?>">

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Nazwa celu</label>
                                <input type="text" name="title" value="<?php echo htmlspecialchars($goal['title']); ?>" required>
                            </div>

                            <div class="form-group-inline">
                                <label>Kolejność (niższe = wyżej)</label>
                                <input type="number" name="display_order" value="<?php echo intval($goal['display_order'] ?? 0); ?>" min="0">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Już uzbierana kwota (PLN)</label>
                                <input type="number" step="0.01" name="current_amount" value="<?php echo $goal['current_amount']; ?>" required>
                                <small style="color:var(--text-3);">Możesz ręcznie zmienić kwotę (np. wpłata spoza systemu)</small>
                            </div>

                            <div class="form-group-inline">
                                <label>Docelowa kwota (PLN)</label>
                                <input type="number" step="0.01" name="target_amount" value="<?php echo $goal['target_amount']; ?>" required>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Opis</label>
                                <textarea name="description" rows="2"><?php echo htmlspecialchars($goal['description'] ?? ''); ?></textarea>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Styl paska postępu</label>
                                <select name="bar_style">
                                    <option value="normal" <?php echo $goal['bar_style'] === 'normal' ? 'selected' : ''; ?>>Normalny</option>
                                    <option value="striped" <?php echo $goal['bar_style'] === 'striped' ? 'selected' : ''; ?>>Paski</option>
                                    <option value="animated" <?php echo $goal['bar_style'] === 'animated' ? 'selected' : ''; ?>>Animowany</option>
                                    <option value="gradient" <?php echo $goal['bar_style'] === 'gradient' ? 'selected' : ''; ?>>Gradient</option>
                                </select>
                            </div>

                            <div class="form-group-inline">
                                <label>Aktywny</label>
                                <select name="is_active">
                                    <option value="1" <?php echo $goal['is_active'] ? 'selected' : ''; ?>>Tak</option>
                                    <option value="0" <?php echo !$goal['is_active'] ? 'selected' : ''; ?>>Nie</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label><i class="fas fa-star" style="color:#FFD700;"></i> Domyślny cel (na stronie wpłat)</label>
                                <select name="is_default">
                                    <option value="0" <?php echo !$goal['is_default'] ? 'selected' : ''; ?>>Nie</option>
                                    <option value="1" <?php echo $goal['is_default'] ? 'selected' : ''; ?>>Tak (zaznaczony domyślnie)</option>
                                </select>
                                <small style="color:var(--text-3);">Tylko 1 cel może być domyślny — zmiana wyzeruje pozostałe.</small>
                            </div>

                            <div class="form-group-inline">
                                <label><i class="fas fa-hand-holding-usd"></i> Pokazuj na stronie wpłat</label>
                                <select name="show_on_donation_page">
                                    <option value="1" <?php echo (!isset($goal['show_on_donation_page']) || $goal['show_on_donation_page']) ? 'selected' : ''; ?>>Tak</option>
                                    <option value="0" <?php echo (isset($goal['show_on_donation_page']) && !$goal['show_on_donation_page']) ? 'selected' : ''; ?>>Nie</option>
                                </select>
                            </div>

                            <div class="form-group-inline">
                                <label><i class="fas fa-tv"></i> Pokazuj w overlay (OBS)</label>
                                <select name="show_in_overlay">
                                    <option value="1" <?php echo $goal['show_in_overlay'] ? 'selected' : ''; ?>>Tak</option>
                                    <option value="0" <?php echo !$goal['show_in_overlay'] ? 'selected' : ''; ?>>Nie</option>
                                </select>
                            </div>
                        </div>

                        <div style="margin-top: 15px; padding: 12px 14px; background: rgba(0,0,0,0.25); border-radius: 8px;">
                            <strong>Postęp:</strong> <?php echo number_format($goal['current_amount'], 2); ?> / <?php echo number_format($goal['target_amount'], 2); ?> zł
                            (<?php echo $goal['target_amount'] > 0 ? round(($goal['current_amount'] / $goal['target_amount']) * 100, 1) : 0; ?>%)
                            <?php if (getSetting('stripe_fee_enabled', '0') === '1' || getSetting('paypal_fee_enabled', '0') === '1'): ?>
                            <span style="background: rgba(117,122,255,0.2); color: #757aff; padding: 2px 8px; border-radius: 4px; font-size: 12px; margin-left: 8px;">
                                <i class="fas fa-info-circle"></i> Kwoty netto
                            </span>
                            <?php endif; ?>
                        </div>

                        <div style="display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap;">
                            <button type="submit" class="btn-save">Zapisz zmiany</button>
                            <button type="button" class="btn-secondary" onclick="resetGoal(<?php echo $goal['id']; ?>)">Zresetuj postęp</button>
                            <button type="button" class="btn-secondary" style="background: rgba(239,68,68,0.15); color: #ef4444; border-color: rgba(239,68,68,0.3); margin-left: auto;" onclick="deleteGoal(<?php echo $goal['id']; ?>, '<?php echo htmlspecialchars(addslashes($goal['title'])); ?>')"><i class="fas fa-trash"></i> Usuń cel</button>
                        </div>
                    </form>
                </div>
                <?php endforeach; ?>

                <!-- === FORMULARZ NOWEGO CELU === -->
                <div class="card" style="border: 2px dashed rgba(117,122,255,0.3); background: rgba(117,122,255,0.03);">
                    <h2 class="card-title"><div class="card-title-icon" style="background: linear-gradient(135deg, #757aff, #5856d6);"><i class="fas fa-plus"></i></div> Dodaj nowy cel</h2>
                    <form class="form-goal" data-goal-id="0">
                        <input type="hidden" name="goal_id" value="0">

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Nazwa nowego celu</label>
                                <input type="text" name="title" placeholder="np. Nowy mikrofon" required>
                            </div>

                            <div class="form-group-inline">
                                <label>Docelowa kwota (PLN)</label>
                                <input type="number" step="0.01" name="target_amount" placeholder="np. 1000" required>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Opis (opcjonalnie)</label>
                                <textarea name="description" rows="2" placeholder="Krótki opis na czym zbieramy"></textarea>
                            </div>
                        </div>

                        <input type="hidden" name="current_amount" value="0">
                        <input type="hidden" name="is_active" value="1">
                        <input type="hidden" name="is_default" value="0">
                        <input type="hidden" name="show_in_overlay" value="1">
                        <input type="hidden" name="show_on_donation_page" value="1">
                        <input type="hidden" name="bar_style" value="animated">
                        <input type="hidden" name="display_order" value="99">

                        <button type="submit" class="btn-save"><i class="fas fa-plus"></i> Dodaj cel</button>
                        <small style="color:var(--text-3); margin-left: 12px;">Po dodaniu możesz dostosować szczegóły powyżej.</small>
                    </form>
                </div>

                <!-- === USTAWIENIA WYGLĄDU OVERLAY CELU === -->
                <div class="card" style="margin-top: 30px;">
                    <h2 class="card-title"><div class="card-title-icon"><i class="fas fa-palette"></i></div> Ustawienia wyglądu overlay celu</h2>
                    <p style="color: #999; margin-bottom: 20px;">
                        Dostosuj kolory, czcionki i animacje paska postępu celu donacji
                    </p>
                    
                    <form id="form-goal-appearance">
                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Kolor tła</label>
                                <input type="text" name="goal_bg_color" value="<?php echo getSetting('goal_bg_color', 'rgba(18, 18, 18, 0.9)'); ?>">
                            </div>
                            
                            <div class="form-group-inline">
                                <label>Kolor tekstu</label>
                                <div class="cp-wrap"><input type="color" name="goal_text_color" id="cp_goal_text_c" value="<?php echo getSetting('goal_text_color','#FFFFFF'); ?>" oninput="cpSync(this,'cp_goal_text')"><input type="text" id="cp_goal_text_t" value="<?php echo getSetting('goal_text_color','#FFFFFF'); ?>" placeholder="#rrggbb" oninput="cpSyncText(this,'cp_goal_text')"></div>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Kolor paska postępu</label>
                                <div class="cp-wrap"><input type="color" name="goal_bar_color" id="cp_goal_bar_c" value="<?php echo getSetting('goal_bar_color','#757aff'); ?>" oninput="cpSync(this,'cp_goal_bar')"><input type="text" id="cp_goal_bar_t" value="<?php echo getSetting('goal_bar_color','#757aff'); ?>" placeholder="#rrggbb" oninput="cpSyncText(this,'cp_goal_bar')"></div>
                            </div>
                            
                            <div class="form-group-inline">
                                <label>Kolor tła paska</label>
                                <div class="cp-wrap"><input type="color" name="goal_bar_bg_color" id="cp_goal_barbg_c" value="<?php echo getSetting('goal_bar_bg_color','#333333'); ?>" oninput="cpSync(this,'cp_goal_barbg')"><input type="text" id="cp_goal_barbg_t" value="<?php echo getSetting('goal_bar_bg_color','#333333'); ?>" placeholder="#rrggbb" oninput="cpSyncText(this,'cp_goal_barbg')"></div>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Wysokość paska (px)</label>
                                <input type="number" name="goal_bar_height" value="<?php echo getSetting('goal_bar_height', '50'); ?>" min="10" max="100">
                            </div>
                            
                            <div class="form-group-inline">
                                <label>Animacja paska</label>
                                <select name="goal_bar_animation">
                                    <option value="none" <?php echo getSetting('goal_bar_animation', 'striped') === 'none' ? 'selected' : ''; ?>>Brak</option>
                                    <option value="striped" <?php echo getSetting('goal_bar_animation', 'striped') === 'striped' ? 'selected' : ''; ?>>Paski (statyczne)</option>
                                    <option value="animated" <?php echo getSetting('goal_bar_animation', 'striped') === 'animated' ? 'selected' : ''; ?>>Paski (animowane)</option>
                                    <option value="gradient" <?php echo getSetting('goal_bar_animation', 'striped') === 'gradient' ? 'selected' : ''; ?>>Gradient (animowany)</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Czcionka</label>
                                <select name="goal_font_family">
                                    <option value="Inter" <?php echo getSetting('goal_font_family', 'Rubik') === 'Inter' ? 'selected' : ''; ?>>Inter (Polecane)</option>
                                    <option value="Poppins" <?php echo getSetting('goal_font_family', 'Rubik') === 'Poppins' ? 'selected' : ''; ?>>Poppins</option>
                                    <option value="Rubik" <?php echo getSetting('goal_font_family', 'Rubik') === 'Rubik' ? 'selected' : ''; ?>>Rubik</option>
                                    <option value="Arial" <?php echo getSetting('goal_font_family', 'Rubik') === 'Arial' ? 'selected' : ''; ?>>Arial</option>
                                    <option value="Helvetica" <?php echo getSetting('goal_font_family', 'Rubik') === 'Helvetica' ? 'selected' : ''; ?>>Helvetica</option>
                                    <option value="Impact" <?php echo getSetting('goal_font_family', 'Rubik') === 'Impact' ? 'selected' : ''; ?>>Impact</option>
                                    <option value="Comic Sans MS" <?php echo getSetting('goal_font_family', 'Rubik') === 'Comic Sans MS' ? 'selected' : ''; ?>>Comic Sans MS</option>
                                </select>
                            </div>
                            
                            <div class="form-group-inline">
                                <label>Rozmiar czcionki (px)</label>
                                <input type="number" name="goal_font_size" value="<?php echo getSetting('goal_font_size', '24'); ?>" min="12" max="72">
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Włącz overlay celu</label>
                                <select name="goal_overlay_enabled">
                                    <option value="1" <?php echo getSetting('goal_overlay_enabled', '1') === '1' ? 'selected' : ''; ?>>Tak</option>
                                    <option value="0" <?php echo getSetting('goal_overlay_enabled', '1') === '0' ? 'selected' : ''; ?>>Nie</option>
                                </select>
                            </div>

                            <div class="form-group-inline">
                                <label>Przeźroczystość overlay (0.0 - 1.0)</label>
                                <input type="number" name="goal_opacity" value="<?php echo getSetting('goal_opacity', '0.6'); ?>" min="0" max="1" step="0.05" style="width: 100%;">
                                <small style="color: #888;">0 = całkowicie przeźroczysty, 0.5 = w połowie, 1 = w pełni widoczny</small>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Pokazuj listę celów na stronie wpłat</label>
                                <select name="show_goals_on_donation_page">
                                    <option value="1" <?php echo getSetting('show_goals_on_donation_page', '1') === '1' ? 'selected' : ''; ?>>Tak — widz wybiera cel</option>
                                    <option value="0" <?php echo getSetting('show_goals_on_donation_page', '1') === '0' ? 'selected' : ''; ?>>Nie — wszystko leci na cel domyślny</option>
                                </select>
                                <small style="color:var(--text-3);">Globalny toggle. Pojedyncze cele możesz też ukryć w ich edycji.</small>
                            </div>

                            <div class="form-group-inline">
                                <label>Każdy cel = osobny widget OBS</label>
                                <div style="padding: 10px 14px; background: rgba(117,122,255,0.08); border: 1px solid rgba(117,122,255,0.25); border-radius: 8px; font-size: 12px; color: var(--text-2); line-height: 1.5;">
                                    <i class="fas fa-info-circle" style="color:#757aff;"></i> Każdy cel ma swój własny URL <code>goal_overlay.php?cel=N</code>. Linki gotowe do skopiowania znajdziesz w zakładce <strong>Widgety</strong>.
                                </div>
                            </div>
                        </div>

                        <button type="submit" class="btn-save">Zapisz ustawienia wyglądu</button>
                    </form>
                </div>
            </div>
            
            <!-- === TOP DONATE === -->
            <div class="section" id="section-top-donate">
                <div class="card">
                    <h2 class="card-title"><div class="card-title-icon"><i class="fas fa-trophy"></i></div> Top Donate – Ranking</h2>
                    <p style="color: #999; margin-bottom: 20px;">
                        Overlay pokazujący ranking najwyższych donatów. Link do dodania w OBS znajdziesz w zakładce <strong>Widgety</strong>.
                    </p>
                    
                    <form id="form-top-donate">
                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Włącz Top Donate</label>
                                <select name="top_donate_enabled">
                                    <option value="1" <?php echo getSetting('top_donate_enabled', '1') === '1' ? 'selected' : ''; ?>>Tak</option>
                                    <option value="0" <?php echo getSetting('top_donate_enabled', '1') === '0' ? 'selected' : ''; ?>>Nie</option>
                                </select>
                            </div>

                            <div class="form-group-inline">
                                <label>Liczba wyświetlanych donatów (1-100)</label>
                                <input type="number" name="top_donate_count" value="<?php echo getSetting('top_donate_count', '5'); ?>" min="1" max="100">
                                <small style="color:var(--text-3);">Tip: jeśli lista jest dłuższa niż widget OBS, auto-scroll w pionie zaczyna animację.</small>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Okres rankingu</label>
                                <select name="top_donate_period" id="top-donate-period-select">
                                    <option value="all" <?php echo getSetting('top_donate_period', 'all') === 'all' ? 'selected' : ''; ?>>Wszystkie czasy</option>
                                    <option value="today" <?php echo getSetting('top_donate_period', 'all') === 'today' ? 'selected' : ''; ?>>Dzisiaj</option>
                                    <option value="week" <?php echo getSetting('top_donate_period', 'all') === 'week' ? 'selected' : ''; ?>>Ten tydzień</option>
                                    <option value="month" <?php echo getSetting('top_donate_period', 'all') === 'month' ? 'selected' : ''; ?>>Ten miesiąc</option>
                                    <option value="year" <?php echo getSetting('top_donate_period', 'all') === 'year' ? 'selected' : ''; ?>>Ten rok (<?php echo date('Y'); ?>) — auto</option>
                                    <option value="custom" <?php echo getSetting('top_donate_period', 'all') === 'custom' ? 'selected' : ''; ?>>Od daty…</option>
                                </select>
                            </div>

                            <div class="form-group-inline" id="top-donate-custom-from-row" style="display: <?php echo getSetting('top_donate_period', 'all') === 'custom' ? 'flex' : 'none'; ?>; flex-direction: column;">
                                <label>Wyświetlaj od daty</label>
                                <input type="date" name="top_donate_custom_from" value="<?php echo htmlspecialchars(getSetting('top_donate_custom_from', '')); ?>">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Wyrównanie listy</label>
                                <select name="top_donate_align">
                                    <option value="left" <?php echo getSetting('top_donate_align', 'left') === 'left' ? 'selected' : ''; ?>>Do lewej</option>
                                    <option value="center" <?php echo getSetting('top_donate_align', 'left') === 'center' ? 'selected' : ''; ?>>Wyśrodkuj</option>
                                    <option value="right" <?php echo getSetting('top_donate_align', 'left') === 'right' ? 'selected' : ''; ?>>Do prawej</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Styl wyświetlania</label>
                                <select name="top_donate_style">
                                    <option value="vertical" <?php echo getSetting('top_donate_style', 'vertical') === 'vertical' ? 'selected' : ''; ?>>Lista pionowa</option>
                                    <option value="horizontal" <?php echo getSetting('top_donate_style', 'vertical') === 'horizontal' ? 'selected' : ''; ?>>Przewijanie poziome (ticker)</option>
                                </select>
                            </div>

                            <div class="form-group-inline">
                                <label>Auto-scroll pionowy (gdy lista nie mieści się w widget)</label>
                                <select name="top_donate_autoscroll">
                                    <option value="0" <?php echo getSetting('top_donate_autoscroll', '0') === '0' ? 'selected' : ''; ?>>Wyłączony</option>
                                    <option value="1" <?php echo getSetting('top_donate_autoscroll', '0') === '1' ? 'selected' : ''; ?>>Włączony</option>
                                </select>
                                <small style="color:var(--text-3);">Włącz aby lista przewijała się w pionie wewnątrz widgetu OBS gdy długa lista nie mieści się</small>
                            </div>
                        </div>

                        <div class="form-row" id="scroll-speed-row">
                            <div class="form-group-inline">
                                <label>Prędkość przewijania (0-100)</label>
                                <input type="number" name="top_donate_scroll_speed" value="<?php echo getSetting('top_donate_scroll_speed', '50'); ?>" min="0" max="100">
                                <small style="color:var(--text-3); display:block; margin-top:5px;">0 = wolno, 100 = szybko. Działa zarówno dla horizontal jak i pionowego auto-scrolla.</small>
                            </div>
                        </div>
                        
                        <!-- === USTAWIENIA WYGLĄDU === -->
                        <h3 class="section-title"><i class="fas fa-palette" style="color:var(--accent)"></i> Wygląd i kolory</h3>
                        
                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Kolor tła</label>
                                <input type="text" name="top_donate_bg_color" value="<?php echo getSetting('top_donate_bg_color', 'transparent'); ?>" placeholder="transparent lub rgba(18, 18, 18, 0.9)">
                            </div>
                            
                            <div class="form-group-inline">
                                <label>Kolor pozycji/numeru</label>
                                <div class="cp-wrap"><input type="color" name="top_donate_position_color" id="cp_toppos_c" value="<?php echo getSetting('top_donate_position_color','#FFFFFF'); ?>" oninput="cpSync(this,'cp_toppos')"><input type="text" id="cp_toppos_t" value="<?php echo getSetting('top_donate_position_color','#FFFFFF'); ?>" placeholder="#rrggbb" oninput="cpSyncText(this,'cp_toppos')"></div>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Kolor nicku</label>
                                <div class="cp-wrap"><input type="color" name="top_donate_nick_color" id="cp_topnick_c" value="<?php echo getSetting('top_donate_nick_color','#FFFFFF'); ?>" oninput="cpSync(this,'cp_topnick')"><input type="text" id="cp_topnick_t" value="<?php echo getSetting('top_donate_nick_color','#FFFFFF'); ?>" placeholder="#rrggbb" oninput="cpSyncText(this,'cp_topnick')"></div>
                            </div>
                            
                            <div class="form-group-inline">
                                <label>Kolor kwoty</label>
                                <div class="cp-wrap"><input type="color" name="top_donate_amount_color" id="cp_topamt_c" value="<?php echo getSetting('top_donate_amount_color','#00FF00'); ?>" oninput="cpSync(this,'cp_topamt')"><input type="text" id="cp_topamt_t" value="<?php echo getSetting('top_donate_amount_color','#00FF00'); ?>" placeholder="#rrggbb" oninput="cpSyncText(this,'cp_topamt')"></div>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Czcionka</label>
                                <select name="top_donate_font_family">
                                    <option value="Inter" <?php echo getSetting('top_donate_font_family', 'Poppins') === 'Inter' ? 'selected' : ''; ?>>Inter (Polecane)</option>
                                    <option value="Poppins" <?php echo getSetting('top_donate_font_family', 'Poppins') === 'Poppins' ? 'selected' : ''; ?>>Poppins</option>
                                    <option value="Rubik" <?php echo getSetting('top_donate_font_family', 'Poppins') === 'Rubik' ? 'selected' : ''; ?>>Rubik</option>
                                    <option value="Arial" <?php echo getSetting('top_donate_font_family', 'Poppins') === 'Arial' ? 'selected' : ''; ?>>Arial</option>
                                    <option value="Roboto" <?php echo getSetting('top_donate_font_family', 'Poppins') === 'Roboto' ? 'selected' : ''; ?>>Roboto</option>
                                </select>
                            </div>
                            
                            <div class="form-group-inline">
                                <label>Rozmiar czcionki (px)</label>
                                <input type="number" name="top_donate_font_size" value="<?php echo getSetting('top_donate_font_size', '32'); ?>" min="12" max="80">
                            </div>
                        </div>
                        
                        <div class="info-box info-box-accent">
                            <h3><i class="fas fa-info-circle"></i> Informacja</h3>
                            <p style="font-size: 13px; line-height: 1.6;">
                                • Ranking <strong>wykluczy automatycznie testowe donaty</strong> (control_id zawiera TEST_)<br>
                                • <strong>Auto-scroll pionowy</strong> — opcjonalny toggle. Gdy włączony i lista nie mieści się w widgecie OBS, animuje powolny przewijający scroll w pionie<br>
                                • Filtr <strong>"Ten rok"</strong> aktualizuje się automatycznie (1 stycznia restart)<br>
                                • Pełne nicki wyświetlane bez ucinania — długie nicki łamią się na nowych liniach<br>
                                • <strong>Zmiany stylów zastosują się natychmiast bez odświeżania OBS!</strong>
                            </p>
                        </div>

                        <button type="submit" class="btn-save">Zapisz ustawienia Top Donate</button>
                    </form>

                    <script>
                        // Pokaż/ukryj custom date przy zmianie period
                        document.getElementById('top-donate-period-select').addEventListener('change', function() {
                            document.getElementById('top-donate-custom-from-row').style.display =
                                this.value === 'custom' ? 'flex' : 'none';
                        });
                    </script>
                </div>
            </div>
            
            <!-- === LAST DONATE === -->
            <div class="section" id="section-last-donate">
                <div class="card">
                    <h2 class="card-title"><div class="card-title-icon"><i class="fas fa-history"></i></div> Last Donate – Ostatnie donaty</h2>
                    <p style="color: #999; margin-bottom: 20px;">
                        Overlay pokazujący ostatnie donaty chronologicznie. Link do dodania w OBS znajdziesz w zakładce <strong>Widgety</strong>.
                    </p>
                    
                    <form id="form-last-donate">
                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Włącz Last Donate</label>
                                <select name="last_donate_enabled">
                                    <option value="1" <?php echo getSetting('last_donate_enabled', '1') === '1' ? 'selected' : ''; ?>>Tak</option>
                                    <option value="0" <?php echo getSetting('last_donate_enabled', '1') === '0' ? 'selected' : ''; ?>>Nie</option>
                                </select>
                            </div>

                            <div class="form-group-inline">
                                <label>Liczba wyświetlanych donatów (1-100)</label>
                                <input type="number" name="last_donate_count" value="<?php echo getSetting('last_donate_count', '5'); ?>" min="1" max="100">
                                <small style="color:var(--text-3);">Auto-scroll w pionie gdy lista przekracza widget.</small>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Okres wyświetlania</label>
                                <select name="last_donate_period" id="last-donate-period-select">
                                    <option value="all" <?php echo getSetting('last_donate_period', 'all') === 'all' ? 'selected' : ''; ?>>Wszystkie czasy</option>
                                    <option value="today" <?php echo getSetting('last_donate_period', 'all') === 'today' ? 'selected' : ''; ?>>Dzisiaj</option>
                                    <option value="week" <?php echo getSetting('last_donate_period', 'all') === 'week' ? 'selected' : ''; ?>>Ten tydzień</option>
                                    <option value="month" <?php echo getSetting('last_donate_period', 'all') === 'month' ? 'selected' : ''; ?>>Ten miesiąc</option>
                                    <option value="year" <?php echo getSetting('last_donate_period', 'all') === 'year' ? 'selected' : ''; ?>>Ten rok (<?php echo date('Y'); ?>) — auto</option>
                                    <option value="custom" <?php echo getSetting('last_donate_period', 'all') === 'custom' ? 'selected' : ''; ?>>Od daty…</option>
                                </select>
                            </div>

                            <div class="form-group-inline" id="last-donate-custom-from-row" style="display: <?php echo getSetting('last_donate_period', 'all') === 'custom' ? 'flex' : 'none'; ?>; flex-direction: column;">
                                <label>Wyświetlaj od daty</label>
                                <input type="date" name="last_donate_custom_from" value="<?php echo htmlspecialchars(getSetting('last_donate_custom_from', '')); ?>">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Wyrównanie listy</label>
                                <select name="last_donate_align">
                                    <option value="left" <?php echo getSetting('last_donate_align', 'left') === 'left' ? 'selected' : ''; ?>>Do lewej</option>
                                    <option value="center" <?php echo getSetting('last_donate_align', 'left') === 'center' ? 'selected' : ''; ?>>Wyśrodkuj</option>
                                    <option value="right" <?php echo getSetting('last_donate_align', 'left') === 'right' ? 'selected' : ''; ?>>Do prawej</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Styl wyświetlania</label>
                                <select name="last_donate_style" id="last-donate-style-select">
                                    <option value="vertical" <?php echo getSetting('last_donate_style', 'vertical') === 'vertical' ? 'selected' : ''; ?>>Lista pionowa</option>
                                    <option value="horizontal" <?php echo getSetting('last_donate_style', 'vertical') === 'horizontal' ? 'selected' : ''; ?>>Przewijanie poziome (ticker)</option>
                                </select>
                            </div>

                            <div class="form-group-inline">
                                <label>Auto-scroll pionowy (gdy lista nie mieści się w widget)</label>
                                <select name="last_donate_autoscroll">
                                    <option value="0" <?php echo getSetting('last_donate_autoscroll', '0') === '0' ? 'selected' : ''; ?>>Wyłączony</option>
                                    <option value="1" <?php echo getSetting('last_donate_autoscroll', '0') === '1' ? 'selected' : ''; ?>>Włączony</option>
                                </select>
                                <small style="color:var(--text-3);">Włącz aby lista przewijała się w pionie wewnątrz widgetu OBS gdy długa lista nie mieści się</small>
                            </div>
                        </div>

                        <div class="form-row" id="last-scroll-speed-row">
                            <div class="form-group-inline">
                                <label>Prędkość przewijania (0-100)</label>
                                <input type="number" name="last_donate_scroll_speed" value="<?php echo getSetting('last_donate_scroll_speed', '50'); ?>" min="0" max="100">
                                <small style="color:var(--text-3); display:block; margin-top:5px;">0 = wolno, 100 = szybko</small>
                            </div>
                        </div>
                        
                        <!-- === USTAWIENIA WYGLĄDU === -->
                        <h3 class="section-title"><i class="fas fa-palette" style="color:var(--accent)"></i> Wygląd i kolory</h3>
                        
                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Kolor tła</label>
                                <input type="text" name="last_donate_bg_color" value="<?php echo getSetting('last_donate_bg_color', 'transparent'); ?>" placeholder="transparent lub rgba(18, 18, 18, 0.9)">
                            </div>
                            
                            <div class="form-group-inline">
                                <label>Kolor pozycji/numeru</label>
                                <div class="cp-wrap"><input type="color" name="last_donate_position_color" id="cp_lastpos_c" value="<?php echo getSetting('last_donate_position_color','#FFFFFF'); ?>" oninput="cpSync(this,'cp_lastpos')"><input type="text" id="cp_lastpos_t" value="<?php echo getSetting('last_donate_position_color','#FFFFFF'); ?>" placeholder="#rrggbb" oninput="cpSyncText(this,'cp_lastpos')"></div>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Kolor nicku</label>
                                <div class="cp-wrap"><input type="color" name="last_donate_nick_color" id="cp_lastnick_c" value="<?php echo getSetting('last_donate_nick_color','#FFFFFF'); ?>" oninput="cpSync(this,'cp_lastnick')"><input type="text" id="cp_lastnick_t" value="<?php echo getSetting('last_donate_nick_color','#FFFFFF'); ?>" placeholder="#rrggbb" oninput="cpSyncText(this,'cp_lastnick')"></div>
                            </div>
                            
                            <div class="form-group-inline">
                                <label>Kolor kwoty</label>
                                <div class="cp-wrap"><input type="color" name="last_donate_amount_color" id="cp_lastamt_c" value="<?php echo getSetting('last_donate_amount_color','#00FF00'); ?>" oninput="cpSync(this,'cp_lastamt')"><input type="text" id="cp_lastamt_t" value="<?php echo getSetting('last_donate_amount_color','#00FF00'); ?>" placeholder="#rrggbb" oninput="cpSyncText(this,'cp_lastamt')"></div>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Czcionka</label>
                                <select name="last_donate_font_family">
                                    <option value="Inter" <?php echo getSetting('last_donate_font_family', 'Poppins') === 'Inter' ? 'selected' : ''; ?>>Inter (Polecane)</option>
                                    <option value="Poppins" <?php echo getSetting('last_donate_font_family', 'Poppins') === 'Poppins' ? 'selected' : ''; ?>>Poppins</option>
                                    <option value="Rubik" <?php echo getSetting('last_donate_font_family', 'Poppins') === 'Rubik' ? 'selected' : ''; ?>>Rubik</option>
                                    <option value="Arial" <?php echo getSetting('last_donate_font_family', 'Poppins') === 'Arial' ? 'selected' : ''; ?>>Arial</option>
                                    <option value="Roboto" <?php echo getSetting('last_donate_font_family', 'Poppins') === 'Roboto' ? 'selected' : ''; ?>>Roboto</option>
                                </select>
                            </div>
                            
                            <div class="form-group-inline">
                                <label>Rozmiar czcionki (px)</label>
                                <input type="number" name="last_donate_font_size" value="<?php echo getSetting('last_donate_font_size', '32'); ?>" min="12" max="80">
                            </div>
                        </div>
                        
                        <div class="info-box info-box-accent">
                            <h3><i class="fas fa-info-circle"></i> Informacja</h3>
                            <p style="font-size: 13px; line-height: 1.6;">
                                • Lista pokazuje <strong>ostatnie donaty w kolejności chronologicznej</strong><br>
                                • <strong>Testowe donaty są wykluczane</strong> (control_id zawiera TEST_)<br>
                                • <strong>Auto-scroll pionowy</strong> — opcjonalny toggle. Gdy włączony i lista nie mieści się w widgecie OBS, animuje powolny przewijający scroll w pionie<br>
                                • Pełne nicki bez ucinania — długie nicki łamią się w nowe linie<br>
                                • <strong>Zmiany stylów zastosują się natychmiast bez odświeżania OBS!</strong>
                            </p>
                        </div>

                        <button type="submit" class="btn-save">Zapisz ustawienia Last Donate</button>
                    </form>

                    <script>
                        // Pokaż/ukryj custom date przy zmianie period (last donate)
                        document.getElementById('last-donate-period-select').addEventListener('change', function() {
                            document.getElementById('last-donate-custom-from-row').style.display =
                                this.value === 'custom' ? 'flex' : 'none';
                        });
                    </script>
                </div>
            </div>

            <!-- === ODLICZNIK DO KOŃCA TRANSMISJI === -->
            <div class="section" id="section-countdown">
                <div class="card">
                    <h2 class="card-title"><div class="card-title-icon"><i class="fas fa-stopwatch"></i></div> Odlicznik do końca transmisji</h2>
                    <p style="color: #999; margin-bottom: 20px;">
                        Widget timer dla streamów typu „przedłużany". Widzowie kupują czas — np. <strong>1 PLN = 60 sekund</strong>. Każdy opłacony donate automatycznie dolicza czas.
                        <br>Link do dodania w OBS jako Browser Source znajdziesz w zakładce <strong>Widgety</strong>.
                    </p>

                    <!-- === LIVE STAN ODLICZNIKA === -->
                    <div class="card" style="background: rgba(255,215,0,0.05); border: 1px solid rgba(255,215,0,0.3); margin-bottom: 20px;">
                        <h3 style="color: #FFD700; margin-bottom: 12px;"><i class="fas fa-bolt"></i> Sterowanie na żywo</h3>

                        <div style="display: flex; align-items: center; gap: 20px; margin-bottom: 16px; flex-wrap: wrap;">
                            <div>
                                <div style="color: var(--text-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;">Pozostały czas</div>
                                <div id="countdown-live-display" style="font: 900 32px/1 'Orbitron', monospace; color: #FFD700; font-variant-numeric: tabular-nums; margin-top: 4px;">--:--:--</div>
                            </div>
                            <div>
                                <div style="color: var(--text-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;">Status</div>
                                <div id="countdown-live-status" style="font: 700 16px/1 sans-serif; margin-top: 6px; padding: 4px 10px; border-radius: 4px; background: rgba(0,0,0,0.4); display: inline-block;">—</div>
                            </div>
                        </div>

                        <div style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;">
                            <button type="button" class="btn-save" style="background: #22c55e;" onclick="countdownAction('start')"><i class="fas fa-play"></i> Start</button>
                            <button type="button" class="btn-save" style="background: #eab308;" onclick="countdownAction('pause')"><i class="fas fa-pause"></i> Pauza</button>
                            <button type="button" class="btn-save" style="background: #ef4444;" onclick="countdownAction('reset')"><i class="fas fa-undo"></i> Reset</button>
                        </div>

                        <div class="form-row" style="margin-bottom: 8px;">
                            <div class="form-group-inline">
                                <label>Dodaj minuty</label>
                                <div style="display: flex; gap: 8px;">
                                    <input type="number" id="countdown-add-minutes" placeholder="np. 5" min="0" step="0.5" style="flex: 1;">
                                    <button type="button" class="btn-save" style="white-space: nowrap;" onclick="countdownAddMinutes()"><i class="fas fa-plus"></i> Dodaj min</button>
                                </div>
                                <small style="color:var(--text-3);">Dodaje dokładnie tyle minut do odliczania (bez przeliczania na PLN)</small>
                            </div>

                            <div class="form-group-inline">
                                <label>Dodaj kwotę (przeliczy na czas)</label>
                                <div style="display: flex; gap: 8px;">
                                    <input type="number" id="countdown-add-amount" placeholder="np. 10" min="0" step="0.01" style="flex: 1;">
                                    <button type="button" class="btn-save" style="white-space: nowrap;" onclick="countdownAddAmount()"><i class="fas fa-coins"></i> Dodaj PLN</button>
                                </div>
                                <small style="color:var(--text-3);">System przeliczy kwotę na sekundy wg konfiguracji niżej</small>
                            </div>
                        </div>

                        <div class="info-box" style="background: rgba(0,255,0,0.05); border: 1px solid rgba(0,255,0,0.2); margin-top: 12px;">
                            <p style="font-size: 13px; line-height: 1.6; margin: 0;">
                                <i class="fas fa-info-circle" style="color: #22c55e;"></i>
                                Dodanie czasu lub kwoty ręcznie <strong>nie usuwa</strong> czasu doliczonego automatycznie z donatów — wszystko sumuje się.
                            </p>
                        </div>
                    </div>

                    <!-- === KONFIGURACJA === -->
                    <form id="form-countdown">
                        <h3 class="section-title"><i class="fas fa-cogs" style="color:var(--accent)"></i> Konfiguracja</h3>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Włącz odlicznik (i auto-doliczanie czasu z donatów)</label>
                                <select name="countdown_enabled">
                                    <option value="1" <?php echo getSetting('countdown_enabled', '0') === '1' ? 'selected' : ''; ?>>Tak</option>
                                    <option value="0" <?php echo getSetting('countdown_enabled', '0') === '0' ? 'selected' : ''; ?>>Nie</option>
                                </select>
                            </div>

                            <div class="form-group-inline">
                                <label>Ukryj widget gdy zatrzymany</label>
                                <select name="countdown_hide_when_stopped">
                                    <option value="0" <?php echo getSetting('countdown_hide_when_stopped', '0') === '0' ? 'selected' : ''; ?>>Pokaż zawsze</option>
                                    <option value="1" <?php echo getSetting('countdown_hide_when_stopped', '0') === '1' ? 'selected' : ''; ?>>Ukryj gdy stop</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Kwota referencyjna (PLN)</label>
                                <input type="number" name="countdown_pln_per_unit" value="<?php echo getSetting('countdown_pln_per_unit', '1.00'); ?>" step="0.01" min="0.01">
                                <small style="color:var(--text-3);">np. <strong>1.00</strong> = 1 PLN dodaje X sekund</small>
                            </div>

                            <div class="form-group-inline">
                                <label>Sekundy za kwotę referencyjną</label>
                                <input type="number" name="countdown_seconds_per_unit" value="<?php echo getSetting('countdown_seconds_per_unit', '60'); ?>" min="1">
                                <small style="color:var(--text-3);">np. <strong>60</strong> = 1 minuta. Przy 1 PLN = 60s, donate 5 PLN = 5 min</small>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Minimalna kwota by doliczyć do odlicznika (PLN)</label>
                                <input type="number" name="countdown_min_amount" value="<?php echo getSetting('countdown_min_amount', '0.00'); ?>" step="0.01" min="0">
                                <small style="color:var(--text-3);">np. <strong>5.00</strong> oznacza że donate 3 PLN <strong>nie</strong> dolicza czasu, a 5+ PLN tak. Wpisz 0 = dolicz każdy donate.</small>
                            </div>

                            <div class="form-group-inline">
                                <label>Etykieta nad licznikiem</label>
                                <input type="text" name="countdown_label" value="<?php echo htmlspecialchars(getSetting('countdown_label', 'Do końca transmisji')); ?>" placeholder="Do końca transmisji">
                            </div>
                        </div>

                        <!-- === WYGLĄD === -->
                        <h3 class="section-title"><i class="fas fa-palette" style="color:var(--accent)"></i> Wygląd widgetu</h3>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Czcionka</label>
                                <select name="countdown_font_family">
                                    <option value="Orbitron" <?php echo getSetting('countdown_font_family', 'Orbitron') === 'Orbitron' ? 'selected' : ''; ?>>Orbitron (Polecane, monospace)</option>
                                    <option value="Poppins" <?php echo getSetting('countdown_font_family', 'Orbitron') === 'Poppins' ? 'selected' : ''; ?>>Poppins</option>
                                    <option value="Inter" <?php echo getSetting('countdown_font_family', 'Orbitron') === 'Inter' ? 'selected' : ''; ?>>Inter</option>
                                    <option value="Rubik" <?php echo getSetting('countdown_font_family', 'Orbitron') === 'Rubik' ? 'selected' : ''; ?>>Rubik</option>
                                    <option value="Roboto" <?php echo getSetting('countdown_font_family', 'Orbitron') === 'Roboto' ? 'selected' : ''; ?>>Roboto</option>
                                </select>
                            </div>

                            <div class="form-group-inline">
                                <label>Rozmiar licznika (px)</label>
                                <input type="number" name="countdown_font_size" value="<?php echo getSetting('countdown_font_size', '64'); ?>" min="20" max="200">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Rozmiar etykiety (px)</label>
                                <input type="number" name="countdown_label_font_size" value="<?php echo getSetting('countdown_label_font_size', '18'); ?>" min="10" max="60">
                            </div>

                            <div class="form-group-inline">
                                <label>Kolor liczb</label>
                                <div class="cp-wrap"><input type="color" name="countdown_text_color" id="cp_cdtxt_c" value="<?php echo getSetting('countdown_text_color','#FFFFFF'); ?>" oninput="cpSync(this,'cp_cdtxt')"><input type="text" id="cp_cdtxt_t" value="<?php echo getSetting('countdown_text_color','#FFFFFF'); ?>" placeholder="#rrggbb" oninput="cpSyncText(this,'cp_cdtxt')"></div>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Kolor etykiety</label>
                                <div class="cp-wrap"><input type="color" name="countdown_label_color" id="cp_cdlbl_c" value="<?php echo getSetting('countdown_label_color','#FFD700'); ?>" oninput="cpSync(this,'cp_cdlbl')"><input type="text" id="cp_cdlbl_t" value="<?php echo getSetting('countdown_label_color','#FFD700'); ?>" placeholder="#rrggbb" oninput="cpSyncText(this,'cp_cdlbl')"></div>
                            </div>

                            <div class="form-group-inline">
                                <label>Kolor tła</label>
                                <input type="text" name="countdown_bg_color" value="<?php echo htmlspecialchars(getSetting('countdown_bg_color', 'rgba(18, 18, 18, 0.85)')); ?>" placeholder="transparent lub rgba(18, 18, 18, 0.85)">
                            </div>
                        </div>

                        <div class="info-box info-box-accent">
                            <h3><i class="fas fa-info-circle"></i> Jak to działa</h3>
                            <p style="font-size: 13px; line-height: 1.6;">
                                • <strong>Auto-doliczanie:</strong> każdy donate z kwotą ≥ minimalna automatycznie dolicza czas wg wzoru (kwota / PLN referencyjne) × sekundy<br>
                                • <strong>Przykład:</strong> 1 PLN = 60s, donate 10 PLN → +600s (+10 min)<br>
                                • <strong>Real-time:</strong> licznik tyka co sekundę, synchronizacja z serwerem co 3s<br>
                                • <strong>Sterowanie:</strong> start/pause/reset + ręczne dodawanie minut/kwoty z poziomu panelu<br>
                                • Po zakończeniu odliczania widget mignie i wyświetli 00:00, gotowe na restart
                            </p>
                        </div>

                        <button type="submit" class="btn-save">Zapisz ustawienia odlicznika</button>
                    </form>
                </div>

                <script>
                    // === ODLICZNIK — STEROWANIE ===
                    async function countdownAction(action) {
                        try {
                            const fd = new FormData();
                            fd.append('action', action);
                            const r = await fetch('api/set_countdown.php', { method: 'POST', body: fd });
                            const data = await r.json();
                            if (data.success) {
                                showAlert(data.message, 'success');
                                refreshCountdownLive();
                            } else {
                                showAlert(data.message || 'Błąd', 'error');
                            }
                        } catch (e) {
                            showAlert('Błąd sieci: ' + e.message, 'error');
                        }
                    }

                    async function countdownAddMinutes() {
                        const minutes = parseFloat(document.getElementById('countdown-add-minutes').value);
                        if (!minutes || minutes <= 0) {
                            showAlert('Podaj liczbę minut', 'error');
                            return;
                        }
                        const fd = new FormData();
                        fd.append('action', 'add_minutes');
                        fd.append('minutes', minutes);
                        try {
                            const r = await fetch('api/set_countdown.php', { method: 'POST', body: fd });
                            const data = await r.json();
                            if (data.success) {
                                showAlert(data.message, 'success');
                                document.getElementById('countdown-add-minutes').value = '';
                                refreshCountdownLive();
                            } else {
                                showAlert(data.message || 'Błąd', 'error');
                            }
                        } catch (e) {
                            showAlert('Błąd sieci: ' + e.message, 'error');
                        }
                    }

                    async function countdownAddAmount() {
                        const amount = parseFloat(document.getElementById('countdown-add-amount').value);
                        if (!amount || amount <= 0) {
                            showAlert('Podaj kwotę', 'error');
                            return;
                        }
                        const fd = new FormData();
                        fd.append('action', 'add_amount');
                        fd.append('amount', amount);
                        try {
                            const r = await fetch('api/set_countdown.php', { method: 'POST', body: fd });
                            const data = await r.json();
                            if (data.success) {
                                showAlert(data.message, 'success');
                                document.getElementById('countdown-add-amount').value = '';
                                refreshCountdownLive();
                            } else {
                                showAlert(data.message || 'Błąd', 'error');
                            }
                        } catch (e) {
                            showAlert('Błąd sieci: ' + e.message, 'error');
                        }
                    }

                    // Submit konfiguracji
                    document.getElementById('form-countdown').addEventListener('submit', async function(e) {
                        e.preventDefault();
                        const fd = new FormData(this);
                        fd.append('action', 'save_settings');
                        try {
                            const r = await fetch('api/set_countdown.php', { method: 'POST', body: fd });
                            const data = await r.json();
                            if (data.success) {
                                showAlert(data.message, 'success');
                            } else {
                                showAlert(data.message || 'Błąd', 'error');
                            }
                        } catch (e2) {
                            showAlert('Błąd sieci: ' + e2.message, 'error');
                        }
                    });

                    // Live display
                    let cdEndTs = null;
                    let cdRunning = false;
                    let cdRemaining = 0;

                    async function refreshCountdownLive() {
                        try {
                            const r = await fetch('api/get_countdown.php');
                            const data = await r.json();
                            if (data.success) {
                                cdRunning = !!data.running;
                                const serverNow = parseInt(data.server_time);
                                const clientNow = Math.floor(Date.now() / 1000);
                                const drift = clientNow - serverNow;

                                if (cdRunning && data.end_timestamp) {
                                    cdEndTs = parseInt(data.end_timestamp) + drift;
                                    cdRemaining = Math.max(0, cdEndTs - Math.floor(Date.now() / 1000));
                                } else {
                                    cdEndTs = null;
                                    cdRemaining = parseInt(data.remaining_seconds) || 0;
                                }
                                renderCountdownLive();
                            }
                        } catch (e) {}
                    }

                    function renderCountdownLive() {
                        const disp = document.getElementById('countdown-live-display');
                        const st = document.getElementById('countdown-live-status');
                        if (!disp || !st) return;

                        let secs = cdRemaining;
                        if (cdRunning && cdEndTs) {
                            secs = Math.max(0, cdEndTs - Math.floor(Date.now() / 1000));
                        }

                        const h = Math.floor(secs / 3600);
                        const m = Math.floor((secs % 3600) / 60);
                        const s = secs % 60;
                        const pad = (n) => String(n).padStart(2, '0');
                        disp.textContent = h > 0 ? `${pad(h)}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;

                        if (cdRunning && secs > 0) {
                            st.textContent = '▶ Trwa';
                            st.style.background = '#22c55e';
                            st.style.color = '#fff';
                        } else if (secs > 0) {
                            st.textContent = '⏸ Zatrzymany';
                            st.style.background = '#eab308';
                            st.style.color = '#000';
                        } else {
                            st.textContent = '⏹ Stop';
                            st.style.background = 'rgba(0,0,0,0.4)';
                            st.style.color = '#999';
                        }
                    }

                    // Tick co sekundę + resync co 3s
                    setInterval(renderCountdownLive, 1000);
                    setInterval(refreshCountdownLive, 3000);
                    refreshCountdownLive();
                </script>
            </div>
            
            <!-- === SZABLONY KWOTOWE === -->
            <div class="section" id="section-templates">
                <div class="card">
                    <h2 class="card-title"><div class="card-title-icon"><i class="fas fa-layer-group"></i></div> Szablony komunikatów od kwoty</h2>
                    <p style="color: #999; margin-bottom: 20px;">
                        Szablony określają jak będzie wyglądał i brzmiał donejt w zależności od kwoty. System automatycznie wybiera najbliższy szablon.
                    </p>
                    
                    <?php foreach ($templates as $template): ?>
                    <div class="card" style="background: rgba(0,0,0,0.3); margin-bottom: 15px;">
                        <h3 style="color: #FFF; margin-bottom: 15px;">
                            <?php echo htmlspecialchars($template['name']); ?> 
                            <span style="color:var(--accent)">(od <?php echo number_format($template['min_amount'], 2); ?> zł)</span>
                        </h3>
                        
                        <form class="form-template" data-template-id="<?php echo $template['id']; ?>" enctype="multipart/form-data">
                            <input type="hidden" name="template_id" value="<?php echo $template['id']; ?>">
                            
                            <div class="form-row">
                                <div class="form-group-inline">
                                    <label>Nazwa szablonu</label>
                                    <input type="text" name="name" value="<?php echo htmlspecialchars($template['name']); ?>" required>
                                </div>
                                
                                <div class="form-group-inline">
                                    <label>Używaj od kwoty (PLN)</label>
                                    <input type="number" step="0.01" name="min_amount" value="<?php echo $template['min_amount']; ?>" required>
                                </div>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-group-inline">
                                    <label>Odtwarzaj dźwięk intro</label>
                                    <select name="intro_sound_enabled">
                                        <option value="1" <?php echo $template['intro_sound_enabled'] ? 'selected' : ''; ?>>Tak</option>
                                        <option value="0" <?php echo !$template['intro_sound_enabled'] ? 'selected' : ''; ?>>Nie</option>
                                    </select>
                                </div>
                                
                                <div class="form-group-inline">
                                    <label>Plik MP3 intro 
                                        <?php if ($template['intro_sound_file']): ?>
                                            <span style="color: #00ff00;">✓ Załadowany</span>
                                        <?php endif; ?>
                                    </label>
                                    <input type="file" name="intro_sound_file" accept=".mp3,audio/mpeg" style="color: white;">
                                    <?php if ($template['intro_sound_file']): ?>
                                        <audio controls style="width: 100%; margin-top: 5px;">
                                            <source src="<?php echo htmlspecialchars($template['intro_sound_file']); ?>" type="audio/mpeg">
                                        </audio>
                                    <?php endif; ?>
                                </div>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-group-inline">
                                    <label>Syntezator mowy (TTS)</label>
                                    <select name="tts_enabled">
                                        <option value="1" <?php echo $template['tts_enabled'] ? 'selected' : ''; ?>>Włącz</option>
                                        <option value="0" <?php echo !$template['tts_enabled'] ? 'selected' : ''; ?>>Wyłącz</option>
                                    </select>
                                </div>
                                
                                <div class="form-group-inline">
                                    <label>Lektor TTS</label>
                                    <select name="tts_voice">
                                        <optgroup label="Web Speech API">
                                            <option value="pl-PL" <?php echo $template['tts_voice'] === 'pl-PL' ? 'selected' : ''; ?>>Microsoft Adam (domyślny)</option>
                                        </optgroup>
                                        <optgroup label="StreamElements">
                                            <option value="se-pl-PL-Wavenet-A" <?php echo $template['tts_voice'] === 'se-pl-PL-Wavenet-A' ? 'selected' : ''; ?>>Wavenet-A (kobieta)</option>
                                            <option value="se-pl-PL-Wavenet-B" <?php echo $template['tts_voice'] === 'se-pl-PL-Wavenet-B' ? 'selected' : ''; ?>>Wavenet-B (mężczyzna)</option>
                                            <option value="se-Jacek" <?php echo $template['tts_voice'] === 'se-Jacek' ? 'selected' : ''; ?>>Jacek (mężczyzna)</option>
                                            <option value="se-Maja" <?php echo $template['tts_voice'] === 'se-Maja' ? 'selected' : ''; ?>>Maja (kobieta)</option>
                                            <option value="se-Ewa" <?php echo $template['tts_voice'] === 'se-Ewa' ? 'selected' : ''; ?>>Ewa (kobieta)</option>
                                            <option value="se-Jan" <?php echo $template['tts_voice'] === 'se-Jan' ? 'selected' : ''; ?>>Jan (mężczyzna)</option>
                                        </optgroup>
                                    </select>
                                </div>
                                
                                <div class="form-group-inline">
                                    <label>Głośność TTS (%)</label>
                                    <input type="number" name="tts_volume" value="<?php echo $template['tts_volume']; ?>" min="0" max="100">
                                </div>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-group-inline">
                                    <label>Szablon TTS (użyj: {NICK}, {KWOTA}, {WIADOMOŚĆ})</label>
                                    <textarea name="tts_template" rows="3"><?php echo htmlspecialchars($template['tts_template']); ?></textarea>
                                </div>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-group-inline">
                                    <label>Rozpoznawanie adresów URL</label>
                                    <select name="filter_urls">
                                        <option value="1" <?php echo $template['filter_urls'] ? 'selected' : ''; ?>>Tak (blokuj)</option>
                                        <option value="0" <?php echo !$template['filter_urls'] ? 'selected' : ''; ?>>Nie</option>
                                    </select>
                                </div>
                                
                                <div class="form-group-inline">
                                    <label>Blokowanie znaków specjalnych (☢ ☣ etc.)</label>
                                    <select name="filter_special_chars">
                                        <option value="1" <?php echo $template['filter_special_chars'] ? 'selected' : ''; ?>>Tak</option>
                                        <option value="0" <?php echo !$template['filter_special_chars'] ? 'selected' : ''; ?>>Nie</option>
                                    </select>
                                </div>
                                
                                <div class="form-group-inline">
                                    <label>Blokowanie powtórzeń wyrazów</label>
                                    <select name="filter_word_repeat">
                                        <option value="1" <?php echo $template['filter_word_repeat'] ? 'selected' : ''; ?>>Tak</option>
                                        <option value="0" <?php echo !$template['filter_word_repeat'] ? 'selected' : ''; ?>>Nie</option>
                                    </select>
                                </div>
                            </div>
                            
                            <!-- VISUAL PREVIEW EDITOR -->
                            <?php
                            $veFontWeightName = $template['font_weight_name'] ?? '700';
                            $veFontWeightMsg  = $template['font_weight_message'] ?? '400';
                            $veId = 've_' . $template['id'];
                            ?>
                            <div class="ve-wrapper" id="vewrap_<?php echo $template['id']; ?>">
                                <div class="ve-header">
                                    <span><i class="fas fa-eye" style="margin-right:6px"></i>Podgląd live</span>
                                    <span style="color:var(--text-3);font-size:11px;font-weight:400;text-transform:none">Kliknij element aby edytować &nbsp;|&nbsp; PPM = menu kontekstowe</span>
                                </div>
                                <div class="ve-canvas" id="vecanvas_<?php echo $template['id']; ?>"
                                     style="background:<?php echo htmlspecialchars($template['background_color']); ?>">
                                    <!-- NICK -->
                                    <div class="ve-el" id="veel_nick_<?php echo $template['id']; ?>"
                                         data-type="nick"
                                         data-tid="<?php echo $template['id']; ?>"
                                         style="
                                             color:<?php echo htmlspecialchars($template['nick_color']); ?>;
                                             font-family:'<?php echo htmlspecialchars($template['font_family_name']); ?>';
                                             font-size:<?php echo (int)$template['font_size_name']; ?>px;
                                             font-weight:<?php echo $veFontWeightName; ?>;
                                             text-align:center;
                                             top:20px; left:50%; transform:translateX(-50%);
                                             white-space:nowrap;
                                         ">
                                        ExampleNick
                                    </div>
                                    <!-- KWOTA -->
                                    <div class="ve-el" id="veel_amount_<?php echo $template['id']; ?>"
                                         data-type="amount"
                                         data-tid="<?php echo $template['id']; ?>"
                                         style="
                                             color:<?php echo htmlspecialchars($template['amount_color'] ?? '#11cb94'); ?>;
                                             font-family:'<?php echo htmlspecialchars($template['font_family_name']); ?>';
                                             font-size:<?php echo max(24, (int)$template['font_size_name'] - 4); ?>px;
                                             font-weight:<?php echo $veFontWeightName; ?>;
                                             text-align:center;
                                             top:<?php echo 26 + (int)$template['font_size_name']; ?>px;
                                             left:50%; transform:translateX(-50%);
                                             white-space:nowrap;
                                         ">
                                        <?php echo number_format($template['min_amount'], 2, '.', ' '); ?> zł
                                    </div>
                                    <!-- WIADOMOŚĆ -->
                                    <div class="ve-el" id="veel_msg_<?php echo $template['id']; ?>"
                                         data-type="msg"
                                         data-tid="<?php echo $template['id']; ?>"
                                         style="
                                             color:<?php echo htmlspecialchars($template['message_color']); ?>;
                                             font-family:'<?php echo htmlspecialchars($template['font_family_message']); ?>';
                                             font-size:<?php echo (int)$template['font_size_message']; ?>px;
                                             font-weight:<?php echo $veFontWeightMsg; ?>;
                                             text-align:center;
                                             top:<?php echo 38 + (int)$template['font_size_name'] * 2; ?>px;
                                             left:10%; width:80%;
                                         ">
                                        Przykładowa wiadomość od donującego 🎉
                                    </div>
                                    <div class="ve-hint"><i class="fas fa-mouse-pointer"></i> kliknij element</div>
                                </div>
                                <!-- TOOLBAR -->
                                <div class="ve-toolbar" id="vetoolbar_<?php echo $template['id']; ?>">
                                    <span class="ve-elem-label" id="velabel_<?php echo $template['id']; ?>">NICK</span>
                                    <div class="ve-sep"></div>
                                    <label>Czcionka</label>
                                    <select id="vef_family_<?php echo $template['id']; ?>" onchange="veApply('<?php echo $template['id']; ?>')">
                                        <option value="Inter">Inter</option>
                                        <option value="Poppins">Poppins</option>
                                        <option value="Rubik">Rubik</option>
                                        <option value="Lato">Lato</option>
                                        <option value="Montserrat">Montserrat</option>
                                        <option value="Oswald">Oswald</option>
                                        <option value="Roboto">Roboto</option>
                                        <option value="Arial">Arial</option>
                                        <option value="Verdana">Verdana</option>
                                        <option value="Impact">Impact</option>
                                        <option value="Courier New">Courier New</option>
                                        <option value="Comic Sans MS">Comic Sans MS</option>
                                    </select>
                                    <label>Waga</label>
                                    <select id="vef_weight_<?php echo $template['id']; ?>" onchange="veApply('<?php echo $template['id']; ?>')">
                                        <option value="100">100 — Thin</option>
                                        <option value="200">200 — ExtraLight</option>
                                        <option value="300">300 — Light</option>
                                        <option value="400">400 — Regular</option>
                                        <option value="500">500 — Medium</option>
                                        <option value="600">600 — SemiBold</option>
                                        <option value="700">700 — Bold</option>
                                        <option value="800">800 — ExtraBold</option>
                                        <option value="900">900 — Black</option>
                                    </select>
                                    <label>Rozmiar</label>
                                    <input type="number" id="vef_size_<?php echo $template['id']; ?>" min="10" max="120" value="36" oninput="veApply('<?php echo $template['id']; ?>')">
                                    <label>Kolor</label>
                                    <div class="cp-wrap">
                                        <input type="color" id="vef_color_<?php echo $template['id']; ?>" oninput="veApply('<?php echo $template['id']; ?>');cpSync(this,'vef_color_cp_<?php echo $template['id']; ?>')">
                                        <input type="text" id="vef_color_cp_<?php echo $template['id']; ?>_t" placeholder="#rrggbb" oninput="cpSyncText(this,'vef_color_cp_<?php echo $template['id']; ?>');veApply('<?php echo $template['id']; ?>')">
                                    </div>
                                    <div class="ve-sep"></div>
                                    <label>Wyrów.</label>
                                    <div class="ve-align-btn" title="Do lewej" onclick="veAlign('<?php echo $template['id']; ?>','left')"><i class="fas fa-align-left"></i></div>
                                    <div class="ve-align-btn active" title="Środek" onclick="veAlign('<?php echo $template['id']; ?>','center')"><i class="fas fa-align-center"></i></div>
                                    <div class="ve-align-btn" title="Do prawej" onclick="veAlign('<?php echo $template['id']; ?>','right')"><i class="fas fa-align-right"></i></div>
                                    <div class="ve-sep"></div>
                                    <label>Tło alertu</label>
                                    <div class="cp-wrap">
                                        <input type="color" id="vef_bg_<?php echo $template['id']; ?>"
                                               value="<?php echo (strpos($template['background_color'],'rgba') === false ? $template['background_color'] : '#121212'); ?>"
                                               oninput="veApplyBg('<?php echo $template['id']; ?>');cpSync(this,'vef_bg_cp_<?php echo $template['id']; ?>')">
                                        <input type="text" id="vef_bg_cp_<?php echo $template['id']; ?>_t"
                                               value="<?php echo (strpos($template['background_color'],'rgba') === false ? $template['background_color'] : '#121212'); ?>"
                                               placeholder="#rrggbb lub rgba()" oninput="cpSyncText(this,'vef_bg_cp_<?php echo $template['id']; ?>');document.getElementById('fi_bg_color_<?php echo $template['id']; ?>').value=this.value;veUpdateBgFromForm('<?php echo $template['id']; ?>')">
                                    </div>
                                </div>
                            </div>

                            <!-- HIDDEN FORM INPUTS (synced by JS + still usable as regular form) -->
                            <div class="form-row">
                                <div class="form-group-inline">
                                    <label>Kolor nicku</label>
                                    <div class="cp-wrap"><input type="color" name="nick_color" id="fi_nick_color_<?php echo $template['id']; ?>" value="<?php echo $template['nick_color']; ?>" oninput="cpSync(this,'cptn_<?php echo $template['id']; ?>')"><input type="text" id="cptn_<?php echo $template['id']; ?>_t" value="<?php echo $template['nick_color']; ?>" placeholder="#rrggbb" oninput="cpSyncText(this,'cptn_<?php echo $template['id']; ?>')"></div>
                                </div>
                                <div class="form-group-inline">
                                    <label>Kolor kwoty</label>
                                    <div class="cp-wrap"><input type="color" name="amount_color" id="fi_amount_color_<?php echo $template['id']; ?>" value="<?php echo htmlspecialchars($template['amount_color'] ?? '#11cb94'); ?>" oninput="cpSync(this,'cpta_<?php echo $template['id']; ?>');veUpdateAmountColor('<?php echo $template['id']; ?>')"><input type="text" id="cpta_<?php echo $template['id']; ?>_t" value="<?php echo htmlspecialchars($template['amount_color'] ?? '#11cb94'); ?>" placeholder="#rrggbb" oninput="cpSyncText(this,'cpta_<?php echo $template['id']; ?>');veUpdateAmountColor('<?php echo $template['id']; ?>')"></div>
                                </div>
                                <div class="form-group-inline">
                                    <label>Kolor wiadomości</label>
                                    <div class="cp-wrap"><input type="color" name="message_color" id="fi_msg_color_<?php echo $template['id']; ?>" value="<?php echo $template['message_color']; ?>" oninput="cpSync(this,'cptm_<?php echo $template['id']; ?>')"><input type="text" id="cptm_<?php echo $template['id']; ?>_t" value="<?php echo $template['message_color']; ?>" placeholder="#rrggbb" oninput="cpSyncText(this,'cptm_<?php echo $template['id']; ?>')"></div>
                                </div>
                                <div class="form-group-inline">
                                    <label>Kolor tła (rgba też działa)</label>
                                    <input type="text" name="background_color" id="fi_bg_color_<?php echo $template['id']; ?>" value="<?php echo htmlspecialchars($template['background_color']); ?>" placeholder="rgba(18,18,18,0.95)" oninput="veUpdateBgFromForm('<?php echo $template['id']; ?>')">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group-inline">
                                    <label>Czcionka nicku</label>
                                    <select name="font_family_name" id="fi_ff_nick_<?php echo $template['id']; ?>" class="font-select" onchange="veUpdateFromForm('<?php echo $template['id']; ?>')">
                                        <option value="Inter" <?php echo $template['font_family_name'] === 'Inter' ? 'selected' : ''; ?>>Inter (Polecane)</option>
                                        <option value="Poppins" <?php echo $template['font_family_name'] === 'Poppins' ? 'selected' : ''; ?>>Poppins</option>
                                        <option value="Rubik" <?php echo $template['font_family_name'] === 'Rubik' ? 'selected' : ''; ?>>Rubik</option>
                                        <option value="Lato" <?php echo $template['font_family_name'] === 'Lato' ? 'selected' : ''; ?>>Lato</option>
                                        <option value="Montserrat" <?php echo $template['font_family_name'] === 'Montserrat' ? 'selected' : ''; ?>>Montserrat</option>
                                        <option value="Oswald" <?php echo $template['font_family_name'] === 'Oswald' ? 'selected' : ''; ?>>Oswald</option>
                                        <option value="Roboto" <?php echo $template['font_family_name'] === 'Roboto' ? 'selected' : ''; ?>>Roboto</option>
                                        <option value="Arial" <?php echo $template['font_family_name'] === 'Arial' ? 'selected' : ''; ?>>Arial</option>
                                        <option value="Verdana" <?php echo $template['font_family_name'] === 'Verdana' ? 'selected' : ''; ?>>Verdana</option>
                                        <option value="Impact" <?php echo $template['font_family_name'] === 'Impact' ? 'selected' : ''; ?>>Impact</option>
                                        <option value="Courier New" <?php echo $template['font_family_name'] === 'Courier New' ? 'selected' : ''; ?>>Courier New</option>
                                        <option value="Comic Sans MS" <?php echo $template['font_family_name'] === 'Comic Sans MS' ? 'selected' : ''; ?>>Comic Sans MS</option>
                                    </select>
                                </div>
                                <div class="form-group-inline">
                                    <label>Waga nicku</label>
                                    <select name="font_weight_name" id="fi_fw_nick_<?php echo $template['id']; ?>" onchange="veUpdateFromForm('<?php echo $template['id']; ?>')">
                                        <option value="100" <?php echo $veFontWeightName === '100' ? 'selected' : ''; ?>>100 — Thin</option>
                                        <option value="200" <?php echo $veFontWeightName === '200' ? 'selected' : ''; ?>>200 — ExtraLight</option>
                                        <option value="300" <?php echo $veFontWeightName === '300' ? 'selected' : ''; ?>>300 — Light</option>
                                        <option value="400" <?php echo $veFontWeightName === '400' ? 'selected' : ''; ?>>400 — Regular</option>
                                        <option value="500" <?php echo $veFontWeightName === '500' ? 'selected' : ''; ?>>500 — Medium</option>
                                        <option value="600" <?php echo $veFontWeightName === '600' ? 'selected' : ''; ?>>600 — SemiBold</option>
                                        <option value="700" <?php echo $veFontWeightName === '700' ? 'selected' : ''; ?>>700 — Bold</option>
                                        <option value="800" <?php echo $veFontWeightName === '800' ? 'selected' : ''; ?>>800 — ExtraBold</option>
                                        <option value="900" <?php echo $veFontWeightName === '900' ? 'selected' : ''; ?>>900 — Black</option>
                                    </select>
                                </div>
                                <div class="form-group-inline">
                                    <label>Rozmiar nicku (px)</label>
                                    <input type="number" name="font_size_name" id="fi_fs_nick_<?php echo $template['id']; ?>" value="<?php echo (int)$template['font_size_name']; ?>" min="12" max="100" oninput="veUpdateFromForm('<?php echo $template['id']; ?>')">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group-inline">
                                    <label>Czcionka wiadomości</label>
                                    <select name="font_family_message" id="fi_ff_msg_<?php echo $template['id']; ?>" class="font-select" onchange="veUpdateFromForm('<?php echo $template['id']; ?>')">
                                        <option value="Inter" <?php echo $template['font_family_message'] === 'Inter' ? 'selected' : ''; ?>>Inter (Polecane)</option>
                                        <option value="Poppins" <?php echo $template['font_family_message'] === 'Poppins' ? 'selected' : ''; ?>>Poppins</option>
                                        <option value="Rubik" <?php echo $template['font_family_message'] === 'Rubik' ? 'selected' : ''; ?>>Rubik</option>
                                        <option value="Lato" <?php echo $template['font_family_message'] === 'Lato' ? 'selected' : ''; ?>>Lato</option>
                                        <option value="Montserrat" <?php echo $template['font_family_message'] === 'Montserrat' ? 'selected' : ''; ?>>Montserrat</option>
                                        <option value="Oswald" <?php echo $template['font_family_message'] === 'Oswald' ? 'selected' : ''; ?>>Oswald</option>
                                        <option value="Roboto" <?php echo $template['font_family_message'] === 'Roboto' ? 'selected' : ''; ?>>Roboto</option>
                                        <option value="Arial" <?php echo $template['font_family_message'] === 'Arial' ? 'selected' : ''; ?>>Arial</option>
                                        <option value="Verdana" <?php echo $template['font_family_message'] === 'Verdana' ? 'selected' : ''; ?>>Verdana</option>
                                        <option value="Impact" <?php echo $template['font_family_message'] === 'Impact' ? 'selected' : ''; ?>>Impact</option>
                                        <option value="Courier New" <?php echo $template['font_family_message'] === 'Courier New' ? 'selected' : ''; ?>>Courier New</option>
                                        <option value="Comic Sans MS" <?php echo $template['font_family_message'] === 'Comic Sans MS' ? 'selected' : ''; ?>>Comic Sans MS</option>
                                    </select>
                                </div>
                                <div class="form-group-inline">
                                    <label>Waga wiadomości</label>
                                    <select name="font_weight_message" id="fi_fw_msg_<?php echo $template['id']; ?>" onchange="veUpdateFromForm('<?php echo $template['id']; ?>')">
                                        <option value="100" <?php echo $veFontWeightMsg === '100' ? 'selected' : ''; ?>>100 — Thin</option>
                                        <option value="200" <?php echo $veFontWeightMsg === '200' ? 'selected' : ''; ?>>200 — ExtraLight</option>
                                        <option value="300" <?php echo $veFontWeightMsg === '300' ? 'selected' : ''; ?>>300 — Light</option>
                                        <option value="400" <?php echo $veFontWeightMsg === '400' ? 'selected' : ''; ?>>400 — Regular</option>
                                        <option value="500" <?php echo $veFontWeightMsg === '500' ? 'selected' : ''; ?>>500 — Medium</option>
                                        <option value="600" <?php echo $veFontWeightMsg === '600' ? 'selected' : ''; ?>>600 — SemiBold</option>
                                        <option value="700" <?php echo $veFontWeightMsg === '700' ? 'selected' : ''; ?>>700 — Bold</option>
                                        <option value="800" <?php echo $veFontWeightMsg === '800' ? 'selected' : ''; ?>>800 — ExtraBold</option>
                                        <option value="900" <?php echo $veFontWeightMsg === '900' ? 'selected' : ''; ?>>900 — Black</option>
                                    </select>
                                </div>
                                <div class="form-group-inline">
                                    <label>Rozmiar wiadomości (px)</label>
                                    <input type="number" name="font_size_message" id="fi_fs_msg_<?php echo $template['id']; ?>" value="<?php echo (int)$template['font_size_message']; ?>" min="12" max="80" oninput="veUpdateFromForm('<?php echo $template['id']; ?>')">
                                </div>
                                <div class="form-group-inline">
                                    <label>Aktywny</label>
                                    <select name="is_active">
                                        <option value="1" <?php echo $template['is_active'] ? 'selected' : ''; ?>>Tak</option>
                                        <option value="0" <?php echo !$template['is_active'] ? 'selected' : ''; ?>>Nie</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div style="display: flex; gap: 10px; margin-top: 15px;">
                                <button type="submit" class="btn-save">Zapisz szablon</button>
                                <button type="button" class="btn-danger" onclick="deleteTemplate(<?php echo $template['id']; ?>)">Usuń</button>
                            </div>
                        </form>
                    </div>
                    <?php endforeach; ?>
                    
                    <button class="btn-secondary" onclick="addNewTemplate()">+ Dodaj nowy szablon</button>
                </div>
            </div>
            
            <!-- === TESTOWY DONEJT === -->
            <div class="section" id="section-test">
                <div class="card">
                    <h2 class="card-title"><div class="card-title-icon"><i class="fas fa-paper-plane"></i></div> Wyślij testowy donejt</h2>
                    <p style="color: #999; margin-bottom: 20px;">
                        Wyślij testowy donejt aby sprawdzić jak wygląda i brzmi na overlay.
                    </p>
                    
                    <form id="form-test">
                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Nick</label>
                                <input type="text" name="test_name" value="Test User" required>
                            </div>
                            
                            <div class="form-group-inline">
                                <label>Kwota (PLN)</label>
                                <input type="number" step="0.01" name="test_amount" value="5.00" required>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Wiadomość</label>
                                <textarea name="test_message" rows="4">To jest testowy donejt! ✅</textarea>
                            </div>
                        </div>
                        
                        <button type="submit" class="btn-save"><i class="fas fa-paper-plane"></i> Wyślij testowy donejt</button>
                    </form>
                </div>
            </div>
            
            <!-- === PANEL STEROWANIA === -->
            <div class="section" id="section-control">
                <div class="card">
                    <h2 class="card-title"><div class="card-title-icon"><i class="fas fa-gamepad"></i></div> Panel sterowania overlay</h2>
                    <p style="color: #999; margin-bottom: 20px;">
                        Kontroluj overlay w czasie rzeczywistym - wstrzymuj, wyciszaj lub pomijaj alerty.
                    </p>
                    
                    <div class="control-panel">
                        <button class="control-btn" id="btn-pause" onclick="controlOverlay('pause')">
                            <i class="fas fa-pause-circle"></i>
                            Wstrzymaj alerty
                        </button>

                        <button class="control-btn" id="btn-resume" onclick="controlOverlay('resume')">
                            <i class="fas fa-play-circle"></i>
                            Wznów alerty
                        </button>

                        <button class="control-btn" id="btn-mute" onclick="controlOverlay('mute')">
                            <i class="fas fa-volume-mute"></i>
                            Wycisz dźwięk
                        </button>

                        <button class="control-btn" id="btn-unmute" onclick="controlOverlay('unmute')">
                            <i class="fas fa-volume-up"></i>
                            Włącz dźwięk
                        </button>
                        
                        <button class="control-btn btn-warn-ctrl" id="btn-skip" onclick="controlOverlay('skip')">
                            <i class="fas fa-step-forward"></i>
                            Pomiń bieżący donejt
                        </button>

                        <button class="control-btn btn-danger-ctrl" id="btn-reset-queue" onclick="resetQueue()">
                            <i class="fas fa-redo"></i>
                            Resetuj zawieszoną kolejkę
                        </button>
                    </div>
                    
                    <div class="info-box info-box-warning" style="margin-top: 24px;">
                        <h3 style="font-size:14px; font-weight:700; color:var(--gold); margin-bottom:8px;"><i class="fas fa-info-circle"></i> Informacja</h3>
                        <p style="color: #CCC;">
                            Status: <strong id="overlay-status">Aktywny</strong><br>
                            Dźwięk: <strong id="overlay-sound">Włączony</strong>
                        </p>
                    </div>
                    
                    <div class="info-box info-box-success" style="margin-top: 14px;">
                        <h3 style="font-size:14px; font-weight:700; color:var(--success); margin-bottom:8px;"><i class="fas fa-lightbulb"></i> Jak działa Skip?</h3>
                        <p style="color: #CCC; line-height: 1.6;">
                            Przycisk <strong>"Pomiń bieżący donejt"</strong> natychmiast pomija aktualnie wyświetlany alert i przechodzi do kolejnego w kolejce.<br>
                            Przydatne gdy donejt zawiera nieodpowiednie treści lub trwa zbyt długo.
                        </p>
                    </div>
                    
                    <div class="info-box info-box-danger" style="margin-top: 14px;">
                        <h3 style="font-size:14px; font-weight:700; color:#ff6b6b; margin-bottom:8px;"><i class="fas fa-sync"></i> Resetuj zawieszoną kolejkę</h3>
                        <p style="color: #CCC; line-height: 1.6;">
                            Jeśli donaty nie wyświetlają się w prawidłowej kolejności lub są "zawieszone", użyj przycisku <strong>"Resetuj zawieszoną kolejkę"</strong>.<br>
                            Resetuje statusy przetwarzania donatów, które były przetwarzane dłużej niż 5 minut bez wyświetlenia.<br>
                            <strong>Uwaga:</strong> To nie usuwa donatów, tylko resetuje ich flagi przetwarzania.
                        </p>
                    </div>
                </div>
            </div>
            
            <!-- === HISTORIA DONEJTYÓW === -->
            <div class="section" id="section-donations">
                <div class="card">
                    <h2 class="card-title"><div class="card-title-icon"><i class="fas fa-list"></i></div> Historia donejtyów</h2>
                    
                    <!-- Wyszukiwarka i filtry -->
                    <div style="margin-bottom: 20px; display: flex; gap: 15px; flex-wrap: wrap;">
                        <div style="flex: 1; min-width: 250px;">
                            <input type="text" id="search-donations" placeholder="Szukaj po nicku, kwocie lub wiadomości..." style="width: 100%; padding: 10px; border: 1px solid #444; background: #2a2a2a; color: #fff; border-radius: 5px;">
                        </div>
                        <div>
                            <select id="filter-status" style="padding: 10px; border: 1px solid #444; background: #2a2a2a; color: #fff; border-radius: 5px;">
                                <option value="">Wszystkie statusy</option>
                                <option value="seen">Wyświetlone</option>
                                <option value="waiting">Oczekujące</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="table-container" style="overflow-x: auto;">
                        <table style="font-size: 13px;">
                            <thead>
                                <tr>
                                    <th style="padding: 8px;">ID</th>
                                    <th style="padding: 8px;">Nick</th>
                                    <th style="padding: 8px;">Email</th>
                                    <th style="padding: 8px;">Kwota</th>
                                    <th style="padding: 8px;">Metoda</th>
                                    <th style="padding: 8px;">Wiadomość</th>
                                    <th style="padding: 8px;">Status</th>
                                    <th style="padding: 8px;">Data</th>
                                    <th style="padding: 8px;">Akcje</th>
                                </tr>
                            </thead>
                            <tbody id="donations-tbody">
                                <?php foreach ($recentDonations as $donation): 
                                    // Określ metodę płatności na podstawie danych
                                    $paymentMethod = 'Stripe';
                                    if (empty($donation['transaction_id'])) {
                                        $paymentMethod = 'Test';
                                    } elseif (strlen($donation['transaction_id']) <= 20) {
                                        // PayPal transaction ID są krótsze
                                        $paymentMethod = 'PayPal';
                                    }
                                ?>
                                <tr data-nick="<?php echo strtolower(htmlspecialchars($donation['donor_name'])); ?>" 
                                    data-amount="<?php echo $donation['amount']; ?>" 
                                    data-message="<?php echo strtolower(htmlspecialchars($donation['message'] ?? '')); ?>"
                                    data-status="<?php echo $donation['is_seen'] ? 'seen' : 'waiting'; ?>"
                                    style="font-size: 13px;">
                                    <td style="padding: 8px;">#<?php echo $donation['id']; ?></td>
                                    <td style="padding: 8px;"><?php echo htmlspecialchars($donation['donor_name']); ?></td>
                                    <td style="padding: 8px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="<?php echo htmlspecialchars($donation['email']); ?>">
                                        <?php echo htmlspecialchars($donation['email']); ?>
                                    </td>
                                    <td style="padding: 8px; white-space: nowrap;"><?php echo number_format($donation['amount'], 2); ?> zł</td>
                                    <td style="padding: 8px;">
                                        <span class="badge" style="font-size: 11px; padding: 3px 8px; background: <?php echo $paymentMethod === 'PayPal' ? '#0070ba' : ($paymentMethod === 'Test' ? '#555' : 'var(--accent)'); ?>;">
                                            <?php echo $paymentMethod; ?>
                                        </span>
                                    </td>
                                    <td style="padding: 8px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="<?php echo htmlspecialchars($donation['message'] ?? ''); ?>">
                                        <?php echo htmlspecialchars(substr($donation['message'] ?? '', 0, 80)); ?>
                                    </td>
                                    <td style="padding: 8px;">
                                        <?php if ($donation['is_seen']): ?>
                                            <span class="badge badge-success" style="font-size: 11px; padding: 3px 8px;">Wyświetlony</span>
                                        <?php else: ?>
                                            <span class="badge badge-warning" style="font-size: 11px; padding: 3px 8px;">Oczekuje</span>
                                        <?php endif; ?>
                                        
                                        <?php if ($donation['repeat_count'] > 0): ?>
                                            <span class="badge badge-info" style="font-size: 11px; padding: 3px 8px;">x<?php echo $donation['repeat_count']; ?></span>
                                        <?php endif; ?>
                                    </td>
                                    <td style="padding: 8px; white-space: nowrap;"><?php echo date('Y-m-d H:i', strtotime($donation['created_at'])); ?></td>
                                    <td style="padding: 8px; white-space: nowrap;">
                                        <button class="btn-secondary" style="padding: 4px 8px; font-size: 11px;" onclick="repeatDonation(<?php echo $donation['id']; ?>)">
                                            Powtórz
                                        </button>
                                        <button class="btn-danger" style="padding: 4px 8px; font-size: 11px;" onclick="deleteDonation(<?php echo $donation['id']; ?>)">
                                            Usuń
                                        </button>
                                    </td>
                                </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- === STRIPE === -->
            <div class="section" id="section-stripe">
                <div class="card">
                    <h2 class="card-title"><div class="card-title-icon"><i class="fas fa-credit-card"></i></div> Konfiguracja metod płatności</h2>
                    
                    <form id="form-stripe">
                        <h3 style="font-size:14px; font-weight:700; color:var(--accent); margin-bottom:12px;"><i class="fas fa-credit-card" style="color:#635BFF"></i> Stripe (BLIK, Przelewy, Karty)</h3>
                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Secret Key (klucz tajny)</label>
                                <input type="password" name="secret_key" value="<?php echo getSetting('stripe_secret_key'); ?>" placeholder="sk_test_... lub sk_live_...">
                                <small style="color:var(--text-3); display:block; margin-top:5px;">
                                    Klucz tajny Stripe (znajdziesz w Dashboard → Developers → API keys)
                                </small>
                            </div>
                            
                            <div class="form-group-inline">
                                <label>Publishable Key (klucz publiczny)</label>
                                <input type="text" name="publishable_key" value="<?php echo getSetting('stripe_publishable_key'); ?>" placeholder="pk_test_... lub pk_live_...">
                                <small style="color:var(--text-3); display:block; margin-top:5px;">
                                    Klucz publiczny Stripe (opcjonalny dla tej integracji)
                                </small>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Webhook Secret</label>
                                <input type="password" name="webhook_secret" value="<?php echo getSetting('stripe_webhook_secret'); ?>" placeholder="whsec_...">
                                <small style="color:var(--text-3); display:block; margin-top:5px;">
                                    Klucz webhook Stripe (Dashboard → Developers → Webhooks)
                                </small>
                            </div>
                        </div>
                        
                        <hr style="margin: 30px 0; border: 0; border-top: 1px solid rgba(255,255,255,0.1);">
                        
                        <h3 style="font-size:14px; font-weight:700; color:#0070ba; margin-bottom:12px;">💵 PayPal (Darowizny)</h3>
                        <div class="form-row">
                            <div class="form-group-inline">
                                <label>Email PayPal</label>
                                <input type="email" name="paypal_email" value="<?php echo getSetting('paypal_email'); ?>" placeholder="twoj@email.com">
                                <small style="color:var(--text-3); display:block; margin-top:5px;">
                                    Email powiązany z Twoim kontem PayPal (może być konto osobiste)
                                </small>
                            </div>
                        </div>
                        
                        <button type="submit" class="btn-save">Zapisz konfigurację płatności</button>
                    </form>
                    
                    <div class="info-box info-box-accent" style="margin-top: 24px;">
                        <h3 style="font-size:14px; font-weight:700; color:var(--accent); margin-bottom:8px;"><i class="fas fa-info-circle"></i> Ważne informacje</h3>
                        <p style="color: #CCC;">
                            <strong>Stripe:</strong><br>
                            • Zaloguj się do Stripe Dashboard: <a href="https://dashboard.stripe.com" target="_blank" style="color: #635BFF;">dashboard.stripe.com</a><br>
                            • Klucze API znajdziesz w: Developers → API keys<br>
                            • Webhook URL (w Developers → Webhooks): <code><?php echo BASE_URL; ?>/api/notification_handler.php</code><br>
                            • Events do zaznaczenia: <strong>checkout.session.completed</strong><br>
                            • Wspiera: BLIK, przelewy (Przelewy24), karty płatnicze<br><br>
                            
                            <strong>PayPal:</strong><br>
                            • Możesz używać konta osobistego lub biznesowego<br>
                            • IPN URL (w ustawieniach PayPal): <code><?php echo BASE_URL; ?>/api/notification_handler.php</code><br>
                            • Opłata standardowa PayPal: 2.9% + 0.30 PLN za transakcję
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // === NAWIGACJA ===
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function() {
                const section = this.dataset.section;
                
                // Zmień aktywną zakładkę
                document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
                this.classList.add('active');
                
                // Pokaż odpowiednią sekcję
                document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
                document.getElementById('section-' + section).classList.add('active');
                
                // Zmień tytuł
                const titles = {
                    'dashboard': 'Dashboard',
                    'general': 'Ustawienia ogólne',
                    'goals': 'Cele donacji',
                    'top-donate': 'Top Donate',
                    'last-donate': 'Last Donate',
                    'templates': 'Szablony kwotowe',
                    'test': 'Testowy donejt',
                    'control': 'Panel sterowania',
                    'donations': 'Historia donejtyów',
                    'stripe': 'Stripe'
                };
                document.getElementById('page-title').textContent = titles[section] || 'Panel';
            });
        });
        
        // === FUNKCJE POMOCNICZE ===
        function showAlert(message, type = 'success') {
            const container = document.getElementById('alert-container');
            const alert = document.createElement('div');
            alert.className = `alert alert-${type}`;
            alert.textContent = message;
            alert.style.display = 'block';
            
            container.innerHTML = '';
            container.appendChild(alert);
            
            setTimeout(() => {
                alert.style.display = 'none';
            }, 3000);
        }

        // === KOPIOWANIE LINKÓW WIDGETÓW ===
        function copyWidgetUrl(inputId, btn) {
            const input = document.getElementById(inputId);
            if (!input) return;
            const url = input.value;

            // Współczesny clipboard API (HTTPS lub localhost)
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(url).then(() => markCopied(btn)).catch(() => fallbackCopy(input, btn));
            } else {
                fallbackCopy(input, btn);
            }
        }

        function fallbackCopy(input, btn) {
            input.select();
            input.setSelectionRange(0, 99999);
            try {
                document.execCommand('copy');
                markCopied(btn);
            } catch (e) {
                showAlert('Nie udało się skopiować. Zaznacz URL ręcznie i skopiuj (Ctrl+C).', 'error');
            }
        }

        function markCopied(btn) {
            const originalHTML = btn.innerHTML;
            btn.classList.add('copied');
            btn.innerHTML = '<i class="fas fa-check"></i> Skopiowano!';
            showAlert('Link skopiowany do schowka', 'success');
            setTimeout(() => {
                btn.classList.remove('copied');
                btn.innerHTML = originalHTML;
            }, 1800);
        }
        
        function sendAjax(action, formData, callback) {
            formData.append('action', action);
            
            fetch('admin.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showAlert(data.message, 'success');
                } else {
                    showAlert(data.message, 'error');
                }
                if (callback) callback(data);
            })
            .catch(error => {
                showAlert('Błąd połączenia: ' + error, 'error');
            });
        }
        
        // === FORMULARZE ===
        document.getElementById('form-general')?.addEventListener('submit', function(e) {
            e.preventDefault();
            sendAjax('save_general', new FormData(this), () => {
                setTimeout(() => location.reload(), 1000);
            });
        });
        
        // Obsługa trybu automatycznego czasu trwania
        const autoCheckbox = document.getElementById('alert-auto-checkbox');
        const durationInput = document.getElementById('alert-duration-input');
        
        if (autoCheckbox && durationInput) {
            function updateDurationField() {
                if (autoCheckbox.checked) {
                    durationInput.disabled = true;
                    durationInput.style.opacity = '0.5';
                } else {
                    durationInput.disabled = false;
                    durationInput.style.opacity = '1';
                }
            }
            
            autoCheckbox.addEventListener('change', updateDurationField);
            updateDurationField(); // Inicjalizacja
        }
        
        document.getElementById('form-stripe')?.addEventListener('submit', function(e) {
            e.preventDefault();
            sendAjax('save_stripe', new FormData(this));
        });
        
        document.getElementById('form-top-donate')?.addEventListener('submit', function(e) {
            e.preventDefault();
            sendAjax('save_top_donate', new FormData(this), () => {
                setTimeout(() => location.reload(), 1000);
            });
        });
        
        document.getElementById('form-last-donate')?.addEventListener('submit', function(e) {
            e.preventDefault();
            sendAjax('save_last_donate', new FormData(this), () => {
                setTimeout(() => location.reload(), 1000);
            });
        });
        
        document.getElementById('form-test')?.addEventListener('submit', function(e) {
            e.preventDefault();
            sendAjax('send_test', new FormData(this));
        });
        
        // Cele
        document.querySelectorAll('.form-goal').forEach(form => {
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                sendAjax('save_goal', new FormData(this), () => {
                    setTimeout(() => location.reload(), 1000);
                });
            });
        });
        
        // Szablony
        document.querySelectorAll('.form-template').forEach(form => {
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                const formData = new FormData(this);
                sendAjax('save_template', formData, () => {
                    setTimeout(() => location.reload(), 1000);
                });
            });
        });
        
        // Ustawienia wyglądu overlay celu
        document.getElementById('form-goal-appearance')?.addEventListener('submit', function(e) {
            e.preventDefault();
            sendAjax('save_goal_appearance', new FormData(this), () => {
                setTimeout(() => location.reload(), 1000);
            });
        });
        
        // === AKCJE ===
        function resetGoal(goalId) {
            if (confirm('Czy na pewno chcesz zresetować postęp tego celu?')) {
                const formData = new FormData();
                formData.append('goal_id', goalId);
                sendAjax('reset_goal', formData, () => {
                    setTimeout(() => location.reload(), 1000);
                });
            }
        }

        function deleteGoal(goalId, title) {
            if (confirm('Czy na pewno chcesz USUNĄĆ cel: "' + title + '"?\n\nDonaty już dokonane na ten cel pozostaną w bazie, ale stracą powiązanie z celem.\nTej operacji nie da się cofnąć.')) {
                const formData = new FormData();
                formData.append('goal_id', goalId);
                sendAjax('delete_goal', formData, () => {
                    setTimeout(() => location.reload(), 1000);
                });
            }
        }
        
        function deleteTemplate(templateId) {
            if (confirm('Czy na pewno chcesz usunąć ten szablon?')) {
                const formData = new FormData();
                formData.append('template_id', templateId);
                sendAjax('delete_template', formData, () => {
                    setTimeout(() => location.reload(), 1000);
                });
            }
        }
        
        function controlOverlay(action) {
            const formData = new FormData();
            formData.append('control_action', action);
            sendAjax('overlay_control', formData, () => {
                // Odśwież status po sekundzie
                setTimeout(fetchOverlayStatus, 500);
            });
        }
        
        function fetchOverlayStatus() {
            fetch('api/get_overlay_status.php')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const statusText = document.getElementById('overlay-status');
                        const soundText = document.getElementById('overlay-sound');
                        
                        // Aktualizuj teksty
                        statusText.textContent = data.paused ? 'Wstrzymany' : 'Aktywny';
                        statusText.style.color = data.paused ? '#FFA500' : '#00ff00';
                        
                        soundText.textContent = data.muted ? 'Wyciszony' : 'Włączony';
                        soundText.style.color = data.muted ? '#ff6b6b' : '#00ff00';
                        
                        // Aktualizuj przyciski
                        document.querySelectorAll('.control-btn').forEach(btn => btn.classList.remove('active'));
                        
                        if (data.paused) {
                            document.getElementById('btn-pause').classList.add('active');
                        } else {
                            document.getElementById('btn-resume').classList.add('active');
                        }
                        
                        if (data.muted) {
                            document.getElementById('btn-mute').classList.add('active');
                        } else {
                            document.getElementById('btn-unmute').classList.add('active');
                        }
                    }
                })
                .catch(error => console.error('Błąd pobierania statusu:', error));
        }
        
        // Automatyczne odświeżanie statusu co 3 sekundy gdy jesteśmy w panelu sterowania
        setInterval(() => {
            if (document.getElementById('section-control').classList.contains('active')) {
                fetchOverlayStatus();
            }
        }, 3000);
        
        // Pierwsza aktualizacja przy załadowaniu
        if (document.getElementById('section-control')) {
            fetchOverlayStatus();
        }
        
        function repeatDonation(donationId) {
            if (confirm('Czy chcesz powtórzyć ten donejt?')) {
                const formData = new FormData();
                formData.append('donation_id', donationId);
                sendAjax('repeat_donation', formData);
            }
        }
        
        function deleteDonation(donationId) {
            if (confirm('Czy na pewno chcesz usunąć ten donejt?')) {
                const formData = new FormData();
                formData.append('donation_id', donationId);
                sendAjax('delete_donation', formData, () => {
                    setTimeout(() => location.reload(), 500);
                });
            }
        }
        
        function addNewTemplate() {
            alert('Funkcja dodawania nowego szablonu - wyślij formularz z template_id=0');
        }
        
        // Funkcja resetowania zawieszonej kolejki
        function resetQueue() {
            if (confirm('Czy na pewno chcesz zresetować zawieszoną kolejkę donatów?\n\nTo nie usunie donatów, tylko resetuje flagi przetwarzania dla donatów zawieszoych dłużej niż 5 minut.')) {
                fetch('api/reset_queue.php')
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            showAlert(data.message, 'success');
                            setTimeout(() => location.reload(), 1500);
                        } else {
                            showAlert(data.message, 'error');
                        }
                    })
                    .catch(error => {
                        showAlert('Błąd resetowania kolejki: ' + error, 'error');
                    });
            }
        }
        
        // Wyszukiwarka i filtrowanie donatów
        const searchInput = document.getElementById('search-donations');
        const filterStatus = document.getElementById('filter-status');
        
        if (searchInput && filterStatus) {
            function filterDonations() {
                const searchTerm = searchInput.value.toLowerCase();
                const statusFilter = filterStatus.value;
                const rows = document.querySelectorAll('#donations-tbody tr');
                
                rows.forEach(row => {
                    const nick = row.getAttribute('data-nick') || '';
                    const amount = row.getAttribute('data-amount') || '';
                    const message = row.getAttribute('data-message') || '';
                    const status = row.getAttribute('data-status') || '';
                    
                    // Sprawdź wyszukiwanie
                    const matchesSearch = searchTerm === '' || 
                        nick.includes(searchTerm) || 
                        amount.includes(searchTerm) || 
                        message.includes(searchTerm);
                    
                    // Sprawdź filtr statusu
                    const matchesStatus = statusFilter === '' || status === statusFilter;
                    
                    // Pokaż/ukryj wiersz
                    if (matchesSearch && matchesStatus) {
                        row.style.display = '';
                    } else {
                        row.style.display = 'none';
                    }
                });
            }
            
            searchInput.addEventListener('input', filterDonations);
            filterStatus.addEventListener('change', filterDonations);
        }
    </script>
<?php endif; ?>

<!-- ===== VISUAL EDITOR JS ===== -->
<script>
(function() {
    // ---- State ----
    const veState = {}; // keyed by template ID: { selectedEl, selectedType }

    // ---- Context menu DOM (single shared) ----
    const ctx = document.createElement('div');
    ctx.className = 've-ctx';
    ctx.id = 'veCtxMenu';
    ctx.innerHTML = `
        <div class="ve-ctx-item" id="veCtxEditStyle"><i class="fas fa-font"></i> Edytuj styl</div>
        <div class="ve-ctx-sep"></div>
        <div class="ve-ctx-item" id="veCtxFront"><i class="fas fa-layer-group"></i> Warstwa do góry</div>
        <div class="ve-ctx-item" id="veCtxBack"><i class="fas fa-layer-group fa-flip-vertical"></i> Warstwa do dołu</div>
        <div class="ve-ctx-sep"></div>
        <div class="ve-ctx-item danger" id="veCtxReset"><i class="fas fa-undo"></i> Resetuj pozycję</div>
    `;
    document.body.appendChild(ctx);
    let ctxTargetId = null;
    let ctxTid = null;

    document.addEventListener('click', () => ctx.classList.remove('visible'));

    // ---- Init all templates ----
    document.querySelectorAll('.ve-el').forEach(el => {
        const tid = el.dataset.tid;
        if (!veState[tid]) veState[tid] = { selectedEl: null, selectedType: null };

        // Click to select
        el.addEventListener('click', e => {
            e.stopPropagation();
            veSelect(el);
        });

        // Right-click context menu
        el.addEventListener('contextmenu', e => {
            e.preventDefault();
            e.stopPropagation();
            ctxTargetId = el.id;
            ctxTid = tid;
            veSelect(el);
            ctx.style.left = e.clientX + 'px';
            ctx.style.top  = e.clientY + 'px';
            ctx.classList.add('visible');
        });

        // Drag
        makeDraggable(el);
    });

    // Deselect on canvas click
    document.querySelectorAll('.ve-canvas').forEach(canvas => {
        canvas.addEventListener('click', () => {
            const tid = canvas.id.replace('vecanvas_', '');
            veDeselect(tid);
        });
    });

    // Context menu actions
    document.getElementById('veCtxEditStyle').onclick = () => {
        ctx.classList.remove('visible');
        // Toolbar already visible from veSelect
    };
    document.getElementById('veCtxFront').onclick = () => {
        if (!ctxTargetId) return;
        ctx.classList.remove('visible');
        const el = document.getElementById(ctxTargetId);
        if (el) { const z = parseInt(el.style.zIndex || 1); el.style.zIndex = z + 1; }
    };
    document.getElementById('veCtxBack').onclick = () => {
        if (!ctxTargetId) return;
        ctx.classList.remove('visible');
        const el = document.getElementById(ctxTargetId);
        if (el) { const z = parseInt(el.style.zIndex || 1); el.style.zIndex = Math.max(0, z - 1); }
    };
    document.getElementById('veCtxReset').onclick = () => {
        if (!ctxTargetId || !ctxTid) return;
        ctx.classList.remove('visible');
        const el = document.getElementById(ctxTargetId);
        if (!el) return;
        const type = el.dataset.type;
        const tid = ctxTid;
        if (type === 'nick') {
            const sz = parseInt(document.getElementById('fi_fs_nick_' + tid).value) || 36;
            el.style.top = '20px'; el.style.left = '50%'; el.style.transform = 'translateX(-50%)';
        } else if (type === 'amount') {
            const sz = parseInt(document.getElementById('fi_fs_nick_' + tid).value) || 36;
            el.style.top = (26 + sz) + 'px'; el.style.left = '50%'; el.style.transform = 'translateX(-50%)';
        } else if (type === 'msg') {
            const sz = parseInt(document.getElementById('fi_fs_nick_' + tid).value) || 36;
            el.style.top = (38 + sz * 2) + 'px'; el.style.left = '10%'; el.style.transform = '';
        }
    };

    // ---- Public functions ----
    window.veSelect = function(el) {
        const tid = el.dataset.tid;
        const type = el.dataset.type;
        // Deselect previous
        document.querySelectorAll('.ve-el.selected').forEach(e => e.classList.remove('selected'));
        el.classList.add('selected');
        veState[tid] = { selectedEl: el, selectedType: type };

        const toolbar = document.getElementById('vetoolbar_' + tid);
        const label = document.getElementById('velabel_' + tid);
        toolbar.classList.add('visible');

        // Load current values into toolbar
        let family, weight, size, color;
        if (type === 'nick' || type === 'amount') {
            family = document.getElementById('fi_ff_nick_' + tid).value;
            weight = document.getElementById('fi_fw_nick_' + tid).value;
            size   = document.getElementById('fi_fs_nick_' + tid).value;
            color  = type === 'nick'
                ? document.getElementById('fi_nick_color_' + tid).value
                : document.getElementById('fi_amount_color_' + tid).value;
            label.textContent = type === 'nick' ? 'NICK' : 'KWOTA';
        } else {
            family = document.getElementById('fi_ff_msg_' + tid).value;
            weight = document.getElementById('fi_fw_msg_' + tid).value;
            size   = document.getElementById('fi_fs_msg_' + tid).value;
            color  = document.getElementById('fi_msg_color_' + tid).value;
            label.textContent = 'WIADOMOŚĆ';
        }
        document.getElementById('vef_family_' + tid).value = family;
        document.getElementById('vef_weight_' + tid).value = weight;
        document.getElementById('vef_size_' + tid).value   = size;
        document.getElementById('vef_color_' + tid).value  = color;

        // Align buttons
        const align = el.style.textAlign || 'center';
        toolbar.querySelectorAll('.ve-align-btn').forEach(b => {
            b.classList.toggle('active', b.getAttribute('onclick').includes("'" + align + "'"));
        });
    };

    window.veDeselect = function(tid) {
        document.querySelectorAll('#vecanvas_' + tid + ' .ve-el').forEach(e => e.classList.remove('selected'));
        const toolbar = document.getElementById('vetoolbar_' + tid);
        if (toolbar) toolbar.classList.remove('visible');
        if (veState[tid]) veState[tid] = { selectedEl: null, selectedType: null };
    };

    window.veApply = function(tid) {
        const state = veState[tid];
        if (!state || !state.selectedEl) return;
        const el = state.selectedEl;
        const type = state.selectedType;
        const family = document.getElementById('vef_family_' + tid).value;
        const weight = document.getElementById('vef_weight_' + tid).value;
        const size   = document.getElementById('vef_size_' + tid).value;
        const color  = document.getElementById('vef_color_' + tid).value;

        // Apply to preview element
        el.style.fontFamily = "'" + family + "'";
        el.style.fontWeight = weight;
        el.style.fontSize   = size + 'px';
        el.style.color      = color;

        // Sync back to form inputs
        if (type === 'nick' || type === 'amount') {
            document.getElementById('fi_ff_nick_' + tid).value = family;
            document.getElementById('fi_fw_nick_' + tid).value = weight;
            document.getElementById('fi_fs_nick_' + tid).value = size;
            if (type === 'nick') {
                document.getElementById('fi_nick_color_' + tid).value = color;
                cpSync(document.getElementById('fi_nick_color_' + tid), 'cptn_' + tid);
            } else {
                document.getElementById('fi_amount_color_' + tid).value = color;
                cpSync(document.getElementById('fi_amount_color_' + tid), 'cpta_' + tid);
            }
            // Also apply font to amount element
            const amountEl = document.getElementById('veel_amount_' + tid);
            if (amountEl) {
                amountEl.style.fontFamily = "'" + family + "'";
                amountEl.style.fontWeight = weight;
            }
        } else {
            document.getElementById('fi_ff_msg_' + tid).value = family;
            document.getElementById('fi_fw_msg_' + tid).value = weight;
            document.getElementById('fi_fs_msg_' + tid).value = size;
            document.getElementById('fi_msg_color_' + tid).value = color;
            cpSync(document.getElementById('fi_msg_color_' + tid), 'cptm_' + tid);
        }

        // Load Google Font if needed
        veLoadFont(family, weight);
    };

    window.veAlign = function(tid, align) {
        const state = veState[tid];
        if (!state || !state.selectedEl) return;
        state.selectedEl.style.textAlign = align;
        // Update align button active state
        const toolbar = document.getElementById('vetoolbar_' + tid);
        toolbar.querySelectorAll('.ve-align-btn').forEach(b => {
            b.classList.toggle('active', b.getAttribute('onclick').includes("'" + align + "'"));
        });
    };

    window.veApplyBg = function(tid) {
        const color = document.getElementById('vef_bg_' + tid).value;
        document.getElementById('vecanvas_' + tid).style.background = color;
        document.getElementById('fi_bg_color_' + tid).value = color;
    };

    window.veUpdateFromForm = function(tid) {
        // Sync form → preview (called when form inputs change directly)
        const nickEl   = document.getElementById('veel_nick_' + tid);
        const amountEl = document.getElementById('veel_amount_' + tid);
        const msgEl    = document.getElementById('veel_msg_' + tid);
        if (!nickEl) return;

        const ff_nick = document.getElementById('fi_ff_nick_' + tid).value;
        const fw_nick = document.getElementById('fi_fw_nick_' + tid).value;
        const fs_nick = document.getElementById('fi_fs_nick_' + tid).value;
        const fc_nick = document.getElementById('fi_nick_color_' + tid).value;
        const ff_msg  = document.getElementById('fi_ff_msg_' + tid).value;
        const fw_msg  = document.getElementById('fi_fw_msg_' + tid).value;
        const fs_msg  = document.getElementById('fi_fs_msg_' + tid).value;
        const fc_msg  = document.getElementById('fi_msg_color_' + tid).value;

        nickEl.style.fontFamily   = "'" + ff_nick + "'";
        nickEl.style.fontWeight   = fw_nick;
        nickEl.style.fontSize     = fs_nick + 'px';
        nickEl.style.color        = fc_nick;

        amountEl.style.fontFamily = "'" + ff_nick + "'";
        amountEl.style.fontWeight = fw_nick;
        amountEl.style.fontSize   = Math.max(20, parseInt(fs_nick) - 4) + 'px';

        msgEl.style.fontFamily    = "'" + ff_msg + "'";
        msgEl.style.fontWeight    = fw_msg;
        msgEl.style.fontSize      = fs_msg + 'px';
        msgEl.style.color         = fc_msg;

        veLoadFont(ff_nick, fw_nick);
        veLoadFont(ff_msg, fw_msg);
    };

    window.veUpdateBgFromForm = function(tid) {
        const val = document.getElementById('fi_bg_color_' + tid).value;
        document.getElementById('vecanvas_' + tid).style.background = val;
        // Try to set color picker too (only works with hex)
        if (val.match(/^#[0-9a-fA-F]{6}$/)) {
            document.getElementById('vef_bg_' + tid).value = val;
        }
    };

    // ---- Font loading ----
    const loadedFonts = new Set(['Inter', 'Poppins']);
    window.veLoadFont = function(family, weight) {
        const googleFonts = ['Rubik','Lato','Montserrat','Oswald','Roboto'];
        if (!googleFonts.includes(family)) return;
        const key = family + ':' + weight;
        if (loadedFonts.has(key)) return;
        loadedFonts.add(key);
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'https://fonts.googleapis.com/css2?family=' + family.replace(' ', '+') + ':wght@' + weight + '&display=swap';
        document.head.appendChild(link);
    };

    // ---- Draggable ----
    function makeDraggable(el) {
        let ox, oy, startX, startY, dragging = false;
        el.addEventListener('mousedown', e => {
            if (e.button !== 0) return;
            dragging = true;
            startX = e.clientX; startY = e.clientY;
            const rect = el.getBoundingClientRect();
            const prect = el.parentElement.getBoundingClientRect();
            ox = rect.left - prect.left;
            oy = rect.top  - prect.top;
            el.style.transform = '';
            el.style.left = ox + 'px';
            el.style.top  = oy + 'px';
            e.preventDefault();
        });
        document.addEventListener('mousemove', e => {
            if (!dragging) return;
            const dx = e.clientX - startX;
            const dy = e.clientY - startY;
            el.style.left = (ox + dx) + 'px';
            el.style.top  = (oy + dy) + 'px';
        });
        document.addEventListener('mouseup', () => { dragging = false; });
    }

    // ---- Also sync form color inputs → preview live ----
    document.querySelectorAll('[id^="fi_nick_color_"]').forEach(input => {
        input.addEventListener('input', () => {
            const tid = input.id.replace('fi_nick_color_', '');
            const el = document.getElementById('veel_nick_' + tid);
            if (el) el.style.color = input.value;
        });
    });
    document.querySelectorAll('[id^="fi_msg_color_"]').forEach(input => {
        input.addEventListener('input', () => {
            const tid = input.id.replace('fi_msg_color_', '');
            const el = document.getElementById('veel_msg_' + tid);
            if (el) el.style.color = input.value;
        });
    });
    document.querySelectorAll('[id^="fi_amount_color_"]').forEach(input => {
        input.addEventListener('input', () => {
            const tid = input.id.replace('fi_amount_color_', '');
            const el = document.getElementById('veel_amount_' + tid);
            if (el) el.style.color = input.value;
        });
    });

    // ---- veUpdateAmountColor ----
    window.veUpdateAmountColor = function(tid) {
        const input = document.getElementById('fi_amount_color_' + tid);
        const el    = document.getElementById('veel_amount_' + tid);
        if (input && el) el.style.color = input.value;
    };

})();
</script>

<script>
/* ===== GLOBAL: Color Picker sync (cpSync / cpSyncText) ===== */
function hexFromAny(val) {
    // Try to convert rgb()/rgba() to hex for the color input
    val = val.trim();
    const m = val.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
    if (m) {
        return '#' + [m[1],m[2],m[3]].map(n => parseInt(n).toString(16).padStart(2,'0')).join('');
    }
    return val.startsWith('#') ? val : null;
}

function cpSync(colorInput, baseId) {
    // color input changed → update text sibling
    const textEl = document.getElementById(baseId + '_t');
    if (textEl) textEl.value = colorInput.value;
}

function cpSyncText(textInput, baseId) {
    // text input changed → update color sibling if valid hex
    const colorEl = document.getElementById(baseId + '_c');
    const val = textInput.value.trim();
    const hex = hexFromAny(val);
    if (colorEl && hex && /^#[0-9a-fA-F]{6}$/.test(hex)) {
        colorEl.value = hex;
        // If this input has a name (form field), update it
        if (colorEl.name) colorEl.value = hex;
    }
    // Also sync value to named field if text field has data-name
    if (textInput.dataset && textInput.dataset.name) {
        const named = document.querySelector('[name="' + textInput.dataset.name + '"]');
        if (named) named.value = val;
    }
}
</script>

</body>
</html>