From 5f6263f3c9ce02a588b6f7427d8ce6fbf96e4df7 Mon Sep 17 00:00:00 2001
From: Devdatt Bhatt <devdatt.bhatt@dbhatt.org>
Date: Thu, 16 Apr 2026 03:39:09 +0000
Subject: [PATCH] update

---
 html/header.php | 442 +-----------------------------------------------
 html/input.php  |  16 +-
 html/style.css  | 436 +++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 446 insertions(+), 448 deletions(-)
 create mode 100644 html/style.css

diff --git a/html/header.php b/html/header.php
index 65e2d16..f48bf4a 100755
--- a/html/header.php
+++ b/html/header.php
@@ -7,6 +7,7 @@ Copyright (c) 2026 shreebhattji
 
 License text:
 https://github.com/shreebhattji/Urmi/blob/main/licence.md
+
 */
 
 require 'require_login.php';
@@ -20,444 +21,7 @@ include 'static.php';
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>ShreeBhattJi</title>
     <script src="chart.js"></script>
-    <style>
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        html,
-        body {
-            height: 100%;
-            margin: 0;
-        }
-
-        body {
-            display: flex;
-            flex-direction: column;
-            min-height: 100vh;
-        }
-
-        :root {
-            --header-h: 64px;
-            --header-bg: linear-gradient(90deg, #1e293b, #0f172a);
-            --header-color: #e6eef8;
-            --footer-h: 52px;
-            --footer-bg: linear-gradient(90deg, #1e293b, #0f172a);
-            --footer-color: #e6eef8;
-        }
-
-        main {
-            height: calc(100vh - var(--header-h) - var(--footer-h));
-            overflow: auto;
-            -webkit-overflow-scrolling: touch;
-            padding: 16px;
-            padding-bottom: calc(var(--footer-h) + 16px);
-        }
-
-        .container {
-            max-width: 1100px;
-            margin: 12px auto;
-            padding: 12px;
-            background: #ffffff;
-            border-radius: 12px;
-            box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06);
-        }
-
-        .containerindex {
-            max-width: 1100px;
-            margin: 12px auto;
-            padding: 12px;
-            padding-top: 160px;
-            /* Adjusted for multiple headers */
-            background: #ffffff;
-            border-radius: 12px;
-            box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06);
-        }
-
-        .grid {
-            display: flex;
-            gap: 12px;
-            flex-wrap: wrap;
-            align-items: flex-start;
-        }
-
-        .card {
-            flex: 1 1 43%;
-            min-width: 300px;
-            display: flex;
-            flex-direction: column;
-            background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02));
-            border-radius: 10px;
-            padding: 12px;
-            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
-        }
-
-        .card.wide {
-            flex-basis: 100%;
-        }
-
-        .card h3 {
-            margin: 0 0 8px 0;
-            font-size: 1.3rem;
-        }
-
-        .card .chart-wrap {
-            flex: 1 1 auto;
-            min-height: 180px;
-            height: 247px;
-            position: relative;
-        }
-
-        .card canvas {
-            display: block;
-            width: 100% !important;
-            height: 100% !important;
-        }
-
-        .status-row {
-            margin-top: 12px;
-            color: #9fb2d6;
-            display: flex;
-            justify-content: space-between;
-            font-size: 11px;
-        }
-
-        @media (max-width: 640px) {
-            :root {
-                --header-h: 56px;
-                --footer-h: 56px;
-            }
-
-            main {
-                padding: 10px;
-            }
-
-            .card {
-                flex: 1 1 100%;
-                min-width: auto;
-            }
-
-            .card .chart-wrap {
-                height: 220px;
-                min-height: 160px;
-            }
-        }
-
-        .site-footer {
-            position: fixed;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            height: var(--footer-h);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            padding: 0 32px;
-            background: var(--footer-bg);
-            color: var(--footer-color);
-            z-index: 999;
-            box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.18);
-            font-size: 14px;
-        }
-
-        /* === MULTIPLE TOP HEADERS === */
-        .top-header-1 {
-            position: fixed;
-            left: 0;
-            right: 0;
-            height: 50px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #e6eef8;
-            font-size: 17px;
-            z-index: 1001;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        .top-header-2 {
-            position: fixed;
-            left: 0;
-            right: 0;
-            height: 40px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #e6eef8;
-            font-size: 14px;
-            z-index: 1001;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        .top-header-1 {
-            top: 0;
-            background: #0f172a;
-            font-size: 20px;
-        }
-
-        .top-header-2 {
-            position: fixed;
-            top: 50px;
-            left: 0;
-            right: 0;
-            height: var(--footer-h, 73px);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0 48px;
-            margin-bottom: 57px;
-            background: linear-gradient(90deg, #0f172a, #1e293b);
-            color: #e6eef8;
-            font-weight: bold;
-            font-size: 15px;
-            font-weight: 500;
-            letter-spacing: 0.4px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-            z-index: 999;
-            transition: all 0.3s ease;
-        }
-
-        .top-header-2 nav a {
-            margin-left: 28px;
-            color: #e6eef8;
-            text-decoration: none;
-            transition: color 0.3s ease;
-            font-weight: bold;
-        }
-
-
-        /* === MAIN NAV HEADER === */
-        .site-header {
-            position: fixed;
-            top: 90px;
-            left: 0;
-            right: 0;
-            height: var(--footer-h, 73px);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0 48px;
-            margin-bottom: 57px;
-            background: linear-gradient(90deg, #0f172a, #1e293b);
-            color: #e6eef8;
-            font-weight: bold;
-            font-size: 15px;
-            font-weight: 500;
-            letter-spacing: 0.4px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-            z-index: 999;
-            transition: all 0.3s ease;
-        }
-
-        .site-header nav a {
-            margin-left: 28px;
-            color: #e6eef8;
-            text-decoration: none;
-            transition: color 0.3s ease;
-            font-weight: bold;
-        }
-
-        .site-header nav a:hover {
-            color: #38bdf8;
-        }
-
-        .dropdown-container {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            margin: 7px;
-        }
-
-        .dropdown-label {
-            font-size: 13px;
-            font-weight: 500;
-            color: #1e293b;
-        }
-
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown select {
-            appearance: none;
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            color: black;
-            padding: 12px 40px 12px 16px;
-            border: none;
-            border-radius: 12px;
-            font-size: 13px;
-            cursor: pointer;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-            transition: transform 0.2s ease, box-shadow 0.2s ease;
-        }
-
-        .dropdown select:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
-        }
-
-        .dropdown::after {
-            content: "▼";
-            position: absolute;
-            right: 16px;
-            top: 50%;
-            transform: translateY(-50%);
-            pointer-events: none;
-            color: white;
-            font-size: 12px;
-        }
-
-        .dropdown select option {
-            background: #ffffff;
-            color: #1e293b;
-            padding: 7px;
-        }
-
-        .input-container {
-            display: flex;
-            flex-wrap: nowrap;
-            gap: 10px;
-        }
-
-        .input-group {
-            position: relative;
-            width: auto;
-            min-width: 333px;
-            margin: 5px;
-        }
-
-        .input-group input {
-            width: 100%;
-            padding: 11px 11px;
-            font-size: 13px;
-            border: 2px solid #cbd5e1;
-            border-radius: 8px;
-            outline: none;
-            background: white;
-            transition: border-color 0.3s ease;
-            margin: 5px;
-        }
-
-        .input-group input:focus {
-            border-color: #3b82f6;
-        }
-
-        .input-group label {
-            position: absolute;
-            left: 12px;
-            top: 50%;
-            transform: translateY(-50%);
-            color: #64748b;
-            font-size: 13px;
-            pointer-events: none;
-            transition: 0.3s ease all;
-            background: white;
-            padding: 0 4px;
-        }
-
-        .input-group input:focus+label,
-        .input-group input:not(:placeholder-shown)+label {
-            top: -6px;
-            left: 8px;
-            font-size: 12px;
-            color: #3b82f6;
-        }
-
-        .checkbox-group {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 12px;
-        }
-
-        .checkbox-group input[type="checkbox"] {
-            accent-color: #3b82f6;
-            width: 18px;
-            height: 18px;
-            cursor: pointer;
-        }
-
-        .checkbox-group label {
-            font-size: 13px;
-            color: #1e293b;
-            cursor: pointer;
-        }
-
-        .green-btn {
-            background-color: green;
-            color: white;
-            font-weight: bold;
-            padding: 10px 20px;
-            border: none;
-            width: 33%;
-            border-radius: 7px;
-            cursor: pointer;
-        }
-
-        .red-btn {
-            background-color: red;
-            color: white;
-            font-weight: bold;
-            padding: 10px 20px;
-            border: none;
-            width: 33%;
-            border-radius: 7px;
-            cursor: pointer;
-        }
-
-        .red-btn:hover {
-            background-color: darkred;
-        }
-
-        .form-center {
-            text-align: center;
-        }
-
-        .social-row {
-            display: flex;
-            gap: 12px;
-            align-items: center;
-            padding: 8px;
-        }
-
-        .social-btn {
-            width: 67px;
-            height: 67px;
-            display: inline-grid;
-            place-items: center;
-            border-radius: 8px;
-            background: #f3f4f6;
-            text-decoration: none;
-            transition: transform .12s, box-shadow .12s;
-        }
-
-        .social-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
-        }
-
-        .social-btn svg {
-            width: 22px;
-            height: 22px;
-            display: block;
-        }
-
-        .sr-only {
-            position: absolute;
-            left: -10000px;
-            top: auto;
-            width: 1px;
-            height: 1px;
-            overflow: hidden;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
@@ -481,6 +45,4 @@ include 'static.php';
             <a href="logout.php">Logout</a>
         </nav>
     </header>
-</body>
 
-</html>
\ No newline at end of file
diff --git a/html/input.php b/html/input.php
index 4372843..89d72c3 100755
--- a/html/input.php
+++ b/html/input.php
@@ -168,9 +168,9 @@ function all_service_update()
             . ' --preferred=' . $node
             . ' taskset -c ' . $core
             . ' ffmpeg -hide_banner -loglevel info -thread_queue_size 512 -fflags +genpts+discardcorrupt+nobuffer -readrate 1.0'
-            . ' -i "udp://@' . $new["input_udp"] . '?fifo_size=50000&buffer_size=50000&overrun_nonfatal=1"'
+            . ' -i "udp://@' . $new["input_udp"] . '?fifo_size=70000&buffer_size=70000&overrun_nonfatal=1&timeout=5000000"'
             . ' -vf "scale=' . $new["resolution"] . ',format=yuv420p" '
-            . ' -c:v ' . $new["video_format"] . ' -pix_fmt yuv420p -flags -ildct-ilme -top 1 -threads 1 -g 25 -bf 2 -qmin 2 -qmax 5 '
+            . ' -c:v ' . $new["video_format"] . ' -pix_fmt yuv420p -flags -ildct-ilme -top 1 -threads 1 -g 25 -bf 2 -qmin 2 -qmax 8 '
             . ' -b:v ' . $new["video_bitrate"] . 'k -minrate ' . max(0, $new["video_bitrate"] - 500) . 'k -maxrate ' . ($new["video_bitrate"] + 500) . 'k -bufsize ' .  ($new["video_bitrate"] + 500) . 'k '
             . ' -c:a ' . $new["audio_format"] . ' -b:a ' . $new["audio_bitrate"] . 'k -ar 48000 -ac 2 -af "volume=' . $new["volume"] . 'dB,aresample=async=1000:min_hard_comp=0.100000:first_pts=0" '
             . ' -metadata service_provider="ShreeBhattJI" ';
@@ -219,9 +219,9 @@ function all_service_start()
             . ' --preferred=' . $node
             . ' taskset -c ' . $core
             . ' ffmpeg -hide_banner -loglevel info -thread_queue_size 512 -fflags +genpts+discardcorrupt+nobuffer -readrate 1.0'
-            . ' -i "udp://@' . $new["input_udp"] . '?fifo_size=50000&buffer_size=50000&overrun_nonfatal=1"'
+            . ' -i "udp://@' . $new["input_udp"] . '?fifo_size=70000&buffer_size=70000&overrun_nonfatal=1&timeout=5000000"'
             . ' -vf "scale=' . $new["resolution"] . ',format=yuv420p" '
-            . ' -c:v ' . $new["video_format"] . ' -pix_fmt yuv420p -flags -ildct-ilme -top 1 -threads 1 -g 25 -bf 2 -qmin 2 -qmax 5 '
+            . ' -c:v ' . $new["video_format"] . ' -pix_fmt yuv420p -flags -ildct-ilme -top 1 -threads 1 -g 25 -bf 2 -qmin 2 -qmax 8 '
             . ' -b:v ' . $new["video_bitrate"] . 'k -minrate ' . max(0, $new["video_bitrate"] - 500) . 'k -maxrate ' . ($new["video_bitrate"] + 500) . 'k -bufsize ' .  ($new["video_bitrate"] + 500) . 'k '
             . ' -c:a ' . $new["audio_format"] . ' -b:a ' . $new["audio_bitrate"] . 'k -ar 48000 -ac 2 -af "volume=' . $new["volume"] . 'dB,aresample=async=1000:min_hard_comp=0.100000:first_pts=0" '
             . ' -metadata service_provider="ShreeBhattJI" ';
@@ -313,9 +313,9 @@ if ($_SERVER["REQUEST_METHOD"] === "POST") {
                 . ' --preferred=' . $node
                 . ' taskset -c ' . $core
                 . ' ffmpeg -hide_banner -loglevel info -thread_queue_size 512 -fflags +genpts+discardcorrupt+nobuffer -readrate 1.0'
-                . ' -i "udp://@' . $new["input_udp"] . '?fifo_size=50000&buffer_size=50000&overrun_nonfatal=1"'
+                . ' -i "udp://@' . $new["input_udp"] . '?fifo_size=70000&buffer_size=70000&overrun_nonfatal=1&timeout=5000000"'
                 . ' -vf "scale=' . $new["resolution"] . ',format=yuv420p" '
-                . ' -c:v ' . $new["video_format"] . ' -pix_fmt yuv420p -flags -ildct-ilme -top 1 -threads 1 -g 25 -bf 2 -qmin 2 -qmax 5 '
+                . ' -c:v ' . $new["video_format"] . ' -pix_fmt yuv420p -flags -ildct-ilme -top 1 -threads 1 -g 25 -bf 2 -qmin 2 -qmax 8 '
                 . ' -b:v ' . $new["video_bitrate"] . 'k -minrate ' . max(0, $new["video_bitrate"] - 500) . 'k -maxrate ' . ($new["video_bitrate"] + 500) . 'k -bufsize ' .  ($new["video_bitrate"] + 500) . 'k '
                 . ' -c:a ' . $new["audio_format"] . ' -b:a ' . $new["audio_bitrate"] . 'k -ar 48000 -ac 2 -af "volume=' . $new["volume"] . 'dB,aresample=async=1000:min_hard_comp=0.100000:first_pts=0" '
                 . ' -metadata service_provider="ShreeBhattJI" ';
@@ -381,9 +381,9 @@ if ($_SERVER["REQUEST_METHOD"] === "POST") {
                         . ' --preferred=' . $node
                         . ' taskset -c ' . $core
                         . ' ffmpeg -hide_banner -loglevel info -thread_queue_size 512 -fflags +genpts+discardcorrupt+nobuffer -readrate 1.0'
-                        . ' -i "udp://@' . $new["input_udp"] . '?fifo_size=50000&buffer_size=50000&overrun_nonfatal=1"'
+                        . ' -i "udp://@' . $new["input_udp"] . '?fifo_size=70000&buffer_size=70000&overrun_nonfatal=1&timeout=5000000"'
                         . ' -vf "scale=' . $new["resolution"] . ',format=yuv420p" '
-                        . ' -c:v ' . $new["video_format"] . ' -pix_fmt yuv420p -flags -ildct-ilme -top 1 -threads 1 -g 25 -bf 2 -qmin 2 -qmax 5 '
+                        . ' -c:v ' . $new["video_format"] . ' -pix_fmt yuv420p -flags -ildct-ilme -top 1 -threads 1 -g 25 -bf 2 -qmin 2 -qmax 8 '
                         . ' -b:v ' . $new["video_bitrate"] . 'k -minrate ' . max(0, $new["video_bitrate"] - 500) . 'k -maxrate ' . ($new["video_bitrate"] + 500) . 'k -bufsize ' .  ($new["video_bitrate"] + 500) . 'k '
                         . ' -c:a ' . $new["audio_format"] . ' -b:a ' . $new["audio_bitrate"] . 'k -ar 48000 -ac 2 -af "volume=' . $new["volume"] . 'dB,aresample=async=1000:min_hard_comp=0.100000:first_pts=0" '
                         . ' -metadata service_provider="ShreeBhattJI" ';
diff --git a/html/style.css b/html/style.css
new file mode 100644
index 0000000..2347aed
--- /dev/null
+++ b/html/style.css
@@ -0,0 +1,436 @@
+    *,
+    *::before,
+    *::after {
+        box-sizing: border-box;
+    }
+
+    html,
+    body {
+        height: 100%;
+        margin: 0;
+    }
+
+    body {
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+    }
+
+    :root {
+        --header-h: 64px;
+        --header-bg: linear-gradient(90deg, #1e293b, #0f172a);
+        --header-color: #e6eef8;
+        --footer-h: 52px;
+        --footer-bg: linear-gradient(90deg, #1e293b, #0f172a);
+        --footer-color: #e6eef8;
+    }
+
+    main {
+        height: calc(100vh - var(--header-h) - var(--footer-h));
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+        padding: 16px;
+        padding-bottom: calc(var(--footer-h) + 16px);
+    }
+
+    .container {
+        max-width: 1100px;
+        margin: 12px auto;
+        padding: 12px;
+        background: #ffffff;
+        border-radius: 12px;
+        box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06);
+    }
+
+    .containerindex {
+        max-width: 1100px;
+        margin: 12px auto;
+        padding: 12px;
+        padding-top: 160px;
+        /* Adjusted for multiple headers */
+        background: #ffffff;
+        border-radius: 12px;
+        box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06);
+    }
+
+    .grid {
+        display: flex;
+        gap: 12px;
+        flex-wrap: wrap;
+        align-items: flex-start;
+    }
+
+    .card {
+        flex: 1 1 43%;
+        min-width: 300px;
+        display: flex;
+        flex-direction: column;
+        background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02));
+        border-radius: 10px;
+        padding: 12px;
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
+    }
+
+    .card.wide {
+        flex-basis: 100%;
+    }
+
+    .card h3 {
+        margin: 0 0 8px 0;
+        font-size: 1.3rem;
+    }
+
+    .card .chart-wrap {
+        flex: 1 1 auto;
+        min-height: 180px;
+        height: 247px;
+        position: relative;
+    }
+
+    .card canvas {
+        display: block;
+        width: 100% !important;
+        height: 100% !important;
+    }
+
+    .status-row {
+        margin-top: 12px;
+        color: #9fb2d6;
+        display: flex;
+        justify-content: space-between;
+        font-size: 11px;
+    }
+
+    @media (max-width: 640px) {
+        :root {
+            --header-h: 56px;
+            --footer-h: 56px;
+        }
+
+        main {
+            padding: 10px;
+        }
+
+        .card {
+            flex: 1 1 100%;
+            min-width: auto;
+        }
+
+        .card .chart-wrap {
+            height: 220px;
+            min-height: 160px;
+        }
+    }
+
+    .site-footer {
+        position: fixed;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: var(--footer-h);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        padding: 0 32px;
+        background: var(--footer-bg);
+        color: var(--footer-color);
+        z-index: 999;
+        box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.18);
+        font-size: 14px;
+    }
+
+    /* === MULTIPLE TOP HEADERS === */
+    .top-header-1 {
+        position: fixed;
+        left: 0;
+        right: 0;
+        height: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #e6eef8;
+        font-size: 17px;
+        z-index: 1001;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .top-header-2 {
+        position: fixed;
+        left: 0;
+        right: 0;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #e6eef8;
+        font-size: 14px;
+        z-index: 1001;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .top-header-1 {
+        top: 0;
+        background: #0f172a;
+        font-size: 20px;
+    }
+
+    .top-header-2 {
+        position: fixed;
+        top: 50px;
+        left: 0;
+        right: 0;
+        height: var(--footer-h, 73px);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 48px;
+        margin-bottom: 57px;
+        background: linear-gradient(90deg, #0f172a, #1e293b);
+        color: #e6eef8;
+        font-weight: bold;
+        font-size: 15px;
+        font-weight: 500;
+        letter-spacing: 0.4px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+        z-index: 999;
+        transition: all 0.3s ease;
+    }
+
+    .top-header-2 nav a {
+        margin-left: 28px;
+        color: #e6eef8;
+        text-decoration: none;
+        transition: color 0.3s ease;
+        font-weight: bold;
+    }
+
+
+    /* === MAIN NAV HEADER === */
+    .site-header {
+        position: fixed;
+        top: 90px;
+        left: 0;
+        right: 0;
+        height: var(--footer-h, 73px);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 48px;
+        margin-bottom: 57px;
+        background: linear-gradient(90deg, #0f172a, #1e293b);
+        color: #e6eef8;
+        font-weight: bold;
+        font-size: 15px;
+        font-weight: 500;
+        letter-spacing: 0.4px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+        z-index: 999;
+        transition: all 0.3s ease;
+    }
+
+    .site-header nav a {
+        margin-left: 28px;
+        color: #e6eef8;
+        text-decoration: none;
+        transition: color 0.3s ease;
+        font-weight: bold;
+    }
+
+    .site-header nav a:hover {
+        color: #38bdf8;
+    }
+
+    .dropdown-container {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin: 7px;
+    }
+
+    .dropdown-label {
+        font-size: 13px;
+        font-weight: 500;
+        color: #1e293b;
+    }
+
+    .dropdown {
+        position: relative;
+        display: inline-block;
+    }
+
+    .dropdown select {
+        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        color: black;
+        padding: 12px 40px 12px 16px;
+        border: none;
+        border-radius: 12px;
+        font-size: 13px;
+        cursor: pointer;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .dropdown select:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
+    }
+
+    .dropdown::after {
+        content: "▼";
+        position: absolute;
+        right: 16px;
+        top: 50%;
+        transform: translateY(-50%);
+        pointer-events: none;
+        color: white;
+        font-size: 12px;
+    }
+
+    .dropdown select option {
+        background: #ffffff;
+        color: #1e293b;
+        padding: 7px;
+    }
+
+    .input-container {
+        display: flex;
+        flex-wrap: nowrap;
+        gap: 10px;
+    }
+
+    .input-group {
+        position: relative;
+        width: auto;
+        min-width: 333px;
+        margin: 5px;
+    }
+
+    .input-group input {
+        width: 100%;
+        padding: 11px 11px;
+        font-size: 13px;
+        border: 2px solid #cbd5e1;
+        border-radius: 8px;
+        outline: none;
+        background: white;
+        transition: border-color 0.3s ease;
+        margin: 5px;
+    }
+
+    .input-group input:focus {
+        border-color: #3b82f6;
+    }
+
+    .input-group label {
+        position: absolute;
+        left: 12px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #64748b;
+        font-size: 13px;
+        pointer-events: none;
+        transition: 0.3s ease all;
+        background: white;
+        padding: 0 4px;
+    }
+
+    .input-group input:focus+label,
+    .input-group input:not(:placeholder-shown)+label {
+        top: -6px;
+        left: 8px;
+        font-size: 12px;
+        color: #3b82f6;
+    }
+
+    .checkbox-group {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 12px;
+    }
+
+    .checkbox-group input[type="checkbox"] {
+        accent-color: #3b82f6;
+        width: 18px;
+        height: 18px;
+        cursor: pointer;
+    }
+
+    .checkbox-group label {
+        font-size: 13px;
+        color: #1e293b;
+        cursor: pointer;
+    }
+
+    .green-btn {
+        background-color: green;
+        color: white;
+        font-weight: bold;
+        padding: 10px 20px;
+        border: none;
+        width: 33%;
+        border-radius: 7px;
+        cursor: pointer;
+    }
+
+    .red-btn {
+        background-color: red;
+        color: white;
+        font-weight: bold;
+        padding: 10px 20px;
+        border: none;
+        width: 33%;
+        border-radius: 7px;
+        cursor: pointer;
+    }
+
+    .red-btn:hover {
+        background-color: darkred;
+    }
+
+    .form-center {
+        text-align: center;
+    }
+
+    .social-row {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        padding: 8px;
+    }
+
+    .social-btn {
+        width: 67px;
+        height: 67px;
+        display: inline-grid;
+        place-items: center;
+        border-radius: 8px;
+        background: #f3f4f6;
+        text-decoration: none;
+        transition: transform .12s, box-shadow .12s;
+    }
+
+    .social-btn:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
+    }
+
+    .social-btn svg {
+        width: 22px;
+        height: 22px;
+        display: block;
+    }
+
+    .sr-only {
+        position: absolute;
+        left: -10000px;
+        top: auto;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+    }