From 9c5aa2e6622aadf2b65f472f41de3430f33f6962 Mon Sep 17 00:00:00 2001
From: kiddin9 <48883331+kiddin9@users.noreply.github.com>
Date: Wed, 11 Nov 2026 01:18:59 +0800
Subject: [PATCH] update

---
 .github/workflows/upstream.yml           |    7 +-
 luci-app-nekobox/htdocs/nekobox/ping.php | 8023 ----------------------
 2 files changed, 4 insertions(+), 8026 deletions(-)
 delete mode 100644 luci-app-nekobox/htdocs/nekobox/ping.php

diff --git a/.github/workflows/upstream.yml b/.github/workflows/upstream.yml
index 90c2c9fc1..2edab1b4a 100644
--- a/.github/workflows/upstream.yml
+++ b/.github/workflows/upstream.yml
@@ -106,6 +106,7 @@ jobs:
         git_clone https://github.com/kiddin9/luci-app-vsftpd
         git_clone https://github.com/kiddin9/openwrt-subconverter && mvdir openwrt-subconverter
         git_clone https://github.com/kiddin9/luci-app-syncdial
+        git_clone https://github.com/kiddin9/openwrt-gately && mvdir openwrt-gately
         ) &
         (
         git_clone https://github.com/Openwrt-Passwall/openwrt-passwall && mvdir openwrt-passwall
@@ -178,7 +179,7 @@ jobs:
         git_clone https://github.com/nikkinikki-org/OpenWrt-nikki && mv -f OpenWrt-nikki/{luci-app-nikki,nikki,mihomo*} ./;rm -rf OpenWrt-nikki
         git_clone https://github.com/nikkinikki-org/OpenWrt-momo && mv -f OpenWrt-momo/{luci-app-momo,momo} ./;rm -rf OpenWrt-momo
         git_clone https://github.com/fcshark-org/openwrt-fchomo && mvdir openwrt-fchomo
-        git clone https://github.com/fw876/helloworld -b dev && mvdir helloworld
+        git clone https://github.com/fw876/helloworld -b dev; rm -rf helloworld/v2raya;mvdir helloworld
         git_clone https://github.com/umk0/openwrt-luci-haproxy-manager && mv -f openwrt-luci-haproxy-manager/luci-app-haproxy-manager ./;rm -rf openwrt-luci-haproxy-manager
         ) &
         (
@@ -405,7 +406,6 @@ jobs:
         git_clone https://github.com/Tokisaki-Galaxy/luci-app-tailscale-community tailscalec && mv -f tailscalec/luci-app* ./;rm -rf tailscalec
         git_clone https://github.com/szwjp/luci-app-ipsec-vpnd
         git_clone https://github.com/arafatrahmanzami/luci-app-easymesh;rm -rf luci-app-easymesh/meta-packages
-        git_clone https://github.com/kiddin9/openwrt-gately && mvdir openwrt-gately
         git_clone https://github.com/Zesuy/UA-Mask && cp -rf UA-Mask/openwrt/package/Makefile UA-Mask/
         git_clone https://github.com/wrttools/luci-app-liteportal
         git_clone https://github.com/matthewlu070111/smart-srun
@@ -559,7 +559,8 @@ jobs:
 
         (
         for pkg in $(ls -d */ | grep -v "naiveproxy" | grep -v "luci-app-store" | grep -v "luci-app-quickstart"); do
-        if [[ $pkg == luci-* ]]; then
+        pkg="${pkg%/}"
+        if [[ $pkg == luci-app-v2raya ]]; then
           sed -i '/^[[:space:]]*PKG_\(VERSION\|RELEASE\):*=/d' $pkg/Makefile || true
         else
           if [[ "$(grep "PKG_VERSION" $pkg/Makefile)" && ! "$(grep "PKG_RELEASE" $pkg/Makefile)" ]]; then
diff --git a/luci-app-nekobox/htdocs/nekobox/ping.php b/luci-app-nekobox/htdocs/nekobox/ping.php
deleted file mode 100644
index b9f1b112b..000000000
--- a/luci-app-nekobox/htdocs/nekobox/ping.php
+++ /dev/null
@@ -1,8023 +0,0 @@
-<?php
-$timezone = trim(shell_exec("uci get system.@system[0].zonename 2>/dev/null"));
-
-date_default_timezone_set($timezone ?: 'UTC');
-?>
-
-<?php
-if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'clearNekoTmpDir') {
-    $nekoDir = '/tmp/neko';
-    $response = [
-        'success' => false,
-        'message' => ''
-    ];
-
-    if (is_dir($nekoDir)) {
-        if (deleteNekoTmpDirectory($nekoDir)) {
-            $response['success'] = true;
-            $response['message'] = 'Directory cleared successfully.';
-        } else {
-            $response['message'] = 'Failed to delete the directory.';
-        }
-    } else {
-        $response['message'] = 'The directory does not exist.';
-    }
-
-    header('Content-Type: application/json');
-    echo json_encode($response);
-    exit;
-}
-
-function deleteNekoTmpDirectory($dir) {
-    if (!file_exists($dir)) {
-        return true;
-    }
-    if (!is_dir($dir)) {
-        return unlink($dir);
-    }
-
-    foreach (scandir($dir) as $item) {
-        if ($item === '.' || $item === '..') {
-            continue;
-        }
-
-        if (!deleteNekoTmpDirectory($dir . DIRECTORY_SEPARATOR . $item)) {
-            return false;
-        }
-    }
-
-    return rmdir($dir);
-}
-?>
-
-<?php
-$singbox_autostart = exec("uci -q get neko.cfg.singbox_autostart") ?: '0';
-
-if (isset($_POST['save_autostart'])) {
-    $autostart = isset($_POST['autostart']) ? '1' : '0';
-    shell_exec("uci set neko.cfg.singbox_autostart='$autostart'");
-    shell_exec("uci commit neko");
-    writeToLog("Autostart setting changed to: $autostart");
-    echo "<div class='log-message alert alert-danger'><span data-translate='settingSaved'></span></div>";
-    $singbox_autostart = $autostart;
-}
-?>
-
-<style>
-.modal {
-    opacity: 0;
-    visibility: hidden;
-}
-
-.modal.show {
-    opacity: 1;
-    visibility: visible;
-}
-
-#theme-loader {
-    position: fixed;
-    inset: 0;
-    background: linear-gradient(135deg,
-            var(--accent-color),
-            color-mix(in oklch, var(--accent-color), white 30%),
-            color-mix(in oklch, var(--accent-color), black 30%));
-    background-size: 300% 300%;
-    animation: animated-gradient 6s ease infinite;
-    z-index: 9999;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: opacity 0.6s ease;
-    color: var(--text-primary);
-    font-family: "Segoe UI", sans-serif;
-}
-
-.theme-loader-content {
-    text-align: center;
-    backdrop-filter: var(--glass-blur);
-    padding: 2rem 3rem;
-    border-radius: var(--radius);
-    background: color-mix(in oklch, var(--bg-container), white 10%);
-    box-shadow: 0 0 20px oklch(0 0 0 / 0.2);
-}
-
-.loader-icon {
-    font-size: 3.5rem;
-    animation: bounceIn 1s ease-in-out infinite alternate;
-}
-
-.loader-title {
-    font-size: 1.25rem;
-    margin-top: 1rem;
-    opacity: 0.85;
-}
-
-@keyframes animated-gradient {
-    0% {
-        background-position: 0% 50%;
-    }
-
-    50% {
-        background-position: 100% 50%;
-    }
-
-    100% {
-        background-position: 0% 50%;
-    }
-}
-
-@keyframes bounceIn {
-    0% {
-        transform: scale(1) translateY(0);
-    }
-
-    100% {
-        transform: scale(1.1) translateY(-10px);
-    }
-}
-
-.navbar {
-    backdrop-filter: none;
-    -webkit-backdrop-filter: none;
-    border: none;
-    padding: 0.8rem 1.2rem;
-    border-radius: 0;
-    box-shadow: none;
-    color: var(--text-primary);
-    transition: var(--transition);
-}
-
-.navbar-brand {
-    font-size: 1.5rem !important;
-    font-weight: 900 !important;
-    color: var(--accent-color) !important;
-    text-decoration: none;
-    transition: var(--transition);
-}
-
-.nav-link::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 0;
-    height: 2px;
-    background: var(--accent-color);
-    transition: width var(--transition-speed) ease;
-}
-
-.nav-link:hover::after {
-    width: 70%;
-}
-
-.navbar-brand:hover {
-    color: var(--accent-color) !important;
-}
-
-.navbar .nav-link {
-    color: var(--text-primary) !important;
-    padding: 0.5rem 1rem;
-    border-radius: var(--radius);
-    transition: var(--transition);
-    display: flex;
-    align-items: center;
-    gap: 0.4rem;
-    font-weight: 500;
-    position: relative;
-}
-
-.navbar .nav-link.active:hover,
-.navbar .nav-link:hover {
-    color: var(--accent-color) !important;
-}
-
-.navbar .nav-link.active {
-    color: var(--accent-color) !important;
-    font-weight: 600;
-}
-
-.navbar-toggler {
-    color: var(--accent-color) !important;
-    border: none;
-    background: transparent;
-    outline: none;
-}
-
-.navbar-toggler i {
-    color: var(--accent-color) !important;
-    font-size: 1.8rem;
-    transition: var(--transition);
-}
-
-.icon-btn-group {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.7rem !important;
-    justify-content: flex-start;
-}
-
-.icon-btn {
-    display: inline-flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    width: 2rem !important;
-    height: 2rem !important;
-    padding: 0 !important;
-    border-radius: 1rem !important;
-    font-size: 1rem !important;
-    line-height: 1 !important;
-    flex-shrink: 0;
-}
-
-.log-message.alert {
-    position: fixed;
-    left: 20px;
-    padding: 12px 16px;
-    background: rgb(45, 125, 55) !important;
-    color: #fff !important;
-    color: white;
-    border-radius: 8px;
-    z-index: 9999;
-    max-width: 370px;
-    font-size: 15px;
-    word-wrap: break-word;
-    line-height: 1.5;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(2px);
-    transform: translateY(0);
-    opacity: 0;
-    animation: scrollUp 12s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
-    display: inline-block;
-    margin-bottom: 10px;
-    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-@keyframes scrollUp {
-    0% {
-        top: 90%;
-        opacity: 0;
-    }
-
-    20% {
-        opacity: 1;
-    }
-
-    80% {
-        top: 50%;
-        opacity: 1;
-    }
-
-    100% {
-        top: 45%;
-        opacity: 0;
-    }
-}
-
-.white-text-table,
-.white-text-table td,
-.white-text-table input {
-    color: var(--text-primary) !important;
-}
-
-.custom-tooltip {
-    position: fixed;
-    background: var(--accent-color);
-    color: #fff;
-    padding: 8px 12px;
-    border-radius: var(--radius);
-    font-size: 0.85rem;
-    pointer-events: none;
-    z-index: 10000000;
-    white-space: normal;
-    max-width: 300px;
-    line-height: 1.4;
-    backdrop-filter: var(--glass-blur);
-    border: var(--glass-border);
-    box-shadow: 0 4px 20px color-mix(in oklch, var(--bg-container), black 85%),
-        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-    opacity: 0;
-    transform: translateY(10px);
-    transition: opacity 0.2s ease-out,
-        transform 0.2s ease-out;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-}
-
-.custom-tooltip.show {
-    opacity: var(--glass-opacity);
-    transform: translateY(0);
-}
-
-.custom-tooltip::after {
-    content: '';
-    position: absolute;
-    top: -5px;
-    left: 50%;
-    transform: translateX(-50%) rotate(45deg);
-    width: 10px;
-    height: 10px;
-    background: inherit;
-    border-top: var(--glass-border);
-    border-left: var(--glass-border);
-    z-index: -1;
-}
-
-.custom-tooltip[data-position="top"]::after {
-    top: auto;
-    bottom: -5px;
-    border: none;
-    border-right: var(--glass-border);
-    border-bottom: var(--glass-border);
-}
-
-@media (max-width: 768px) {
-    .custom-tooltip {
-        max-width: 200px;
-        white-space: normal;
-        font-size: 0.8rem;
-    }
-}
-
-.modal-body .alert.alert-warning .note-text {
-    color: #ff0000 !important;
-}
-
-@media (max-width: 600px) {
-    .navbar-brand {
-        flex-shrink: 1;
-        min-width: 0;
-        white-space: nowrap;
-    }
-
-    #dynamicTitle {
-        white-space: nowrap;
-    }
-
-    .navbar-toggler i {
-        font-size: 1.2rem !important;
-    }
-
-    .navbar-toggler {
-        padding: 0.15rem 0.35rem;
-    }
-}
-
-@media (max-width: 768px) {
-    .row>.col {
-        flex: 0 0 50%;
-        max-width: 50%;
-    }
-
-    .row>.col:nth-child(n+3) {
-        flex: 0 0 33.3333%;
-        max-width: 33.3333%;
-    }
-
-    .row {
-        row-gap: 13px;
-    }
-
-    .d-flex.flex-wrap.mb-4 {
-        flex-wrap: nowrap !important;
-    }
-}
-
-.centered-img {
-    transition: transform 0.6s ease-in-out;
-    transform-style: preserve-3d;
-    transform: rotateY(0deg);
-}
-</style>
-
-<div id="theme-loader" style="display: none;">
-  <div class="theme-loader-content">
-    <div class="loader-icon">🚀</div>
-    <div class="loader-title">Updating...</div>
-  </div>
-</div>
-
-<script>
-document.addEventListener("DOMContentLoaded", () => {
-  const loader = document.getElementById("theme-loader");
-  const MAX_WAIT_TIME = 15000;
-
-  document.querySelectorAll("form").forEach(form => {
-    form.addEventListener("submit", (e) => {
-      if (e.submitter?.classList.contains('cancel-btn')) {
-        e.preventDefault();
-        return;
-      }
-
-      if (form.classList.contains('no-loader')) {
-        return;
-      }
-
-      if (loader) {
-        loader.style.display = "flex";
-        setTimeout(() => {
-          loader.style.opacity = "0";
-          setTimeout(() => {
-            loader.style.display = "none";
-            loader.style.opacity = "1";
-          }, 600);
-        }, MAX_WAIT_TIME);
-      }
-    });
-  });
-});
-</script>
-
-<script>
-document.addEventListener('DOMContentLoaded', () => {
-  const tooltip = document.createElement('div');
-  tooltip.className = 'custom-tooltip';
-  document.body.appendChild(tooltip);
-
-  document.querySelectorAll('[data-tooltip]').forEach(el => {
-    el.addEventListener('mouseenter', e => {
-      tooltip.textContent = el.getAttribute('data-tooltip');
-      tooltip.classList.add('show');
-
-      requestAnimationFrame(() => {
-        positionTooltip(e);
-      });
-    });
-
-    el.addEventListener('mousemove', e => {
-      positionTooltip(e);
-    });
-
-    el.addEventListener('mouseleave', () => {
-      tooltip.classList.remove('show');
-    });
-  });
-
-  function positionTooltip(e) {
-    const spacing = 20;
-    const tooltipRect = tooltip.getBoundingClientRect();
-    const targetRect = e.target.getBoundingClientRect();
-
-    const top = targetRect.bottom + spacing;
-    const left = targetRect.left + (targetRect.width - tooltipRect.width) / 2;
-
-    tooltip.style.top = `${top}px`;
-    tooltip.style.left = `${left}px`;
-    tooltip.dataset.position = 'bottom';
-  }
-});
-
-document.addEventListener('click', e => {
-  if (e.target.closest('.btn-refresh-page')) {
-    location.reload();
-  }
-});
-</script>
-
-<div class="modal fade" id="autostartModal" tabindex="-1" aria-labelledby="autostartModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
-  <div class="modal-dialog modal-lg">
-    <form method="post" class="no-loader">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" id="autostartModalLabel" data-translate="singboxAutostartTitle">
-            Sing-box Auto Start
-          </h5>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div class="modal-body">
-          <div class="form-check form-switch">
-            <input class="form-check-input" type="checkbox" name="autostart" id="autostart"
-                   <?php echo ($singbox_autostart === '1') ? 'checked' : ''; ?>>
-            <label class="form-check-label" for="autostart">
-              <strong data-translate="enableAutostart">Enable Auto Start</strong>
-            </label>
-          </div>
-          <div class="mt-3">
-            <small class="text-muted" data-translate="autostartTip">
-              When checked, Sing-box will start automatically on router reboot (if Mihomo is not running)
-            </small>
-          </div>
-        </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-translate="cancel">Cancel</button>
-          <button type="submit" name="save_autostart" class="btn btn-primary" data-translate="saveButton">Save</button>
-        </div>
-      </div>
-    </form>
-  </div>
-</div>
-
-<div class="modal fade" id="portModal" tabindex="-1" aria-labelledby="portModalLabel" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered modal-xl">
-    <form id="portForm" method="POST" action="./save_ports.php" class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="portModalLabel" data-translate="portInfoTitle">Port Information</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-      <div class="modal-body">
-        <table class="table table-light table-striped text-center align-middle w-100 mb-0 white-text-table">
-          <thead class="table-light">
-            <tr>
-              <th style="width: 20%;" class="text-center" data-translate="componentName">Component Name</th>
-              <th style="width: 16%;" class="text-center">socks-port</th>
-              <th style="width: 16%;" class="text-center">mixed-port</th>
-              <th style="width: 16%;" class="text-center">redir-port</th>
-              <th style="width: 16%;" class="text-center">port</th>
-              <th style="width: 16%;" class="text-center">tproxy-port</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Mihomo</td>
-              <td><input type="number" class="form-control text-center" name="mihomo_socks" value="<?= htmlspecialchars($neko_cfg['socks']) ?>"></td>
-              <td><input type="number" class="form-control text-center" name="mihomo_mixed" value="<?= htmlspecialchars($neko_cfg['mixed']) ?>"></td>
-              <td><input type="number" class="form-control text-center" name="mihomo_redir" value="<?= htmlspecialchars($neko_cfg['redir']) ?>"></td>
-              <td><input type="number" class="form-control text-center" name="mihomo_port" value="<?= htmlspecialchars($neko_cfg['port']) ?>"></td>
-              <td><input type="number" class="form-control text-center" name="mihomo_tproxy" value="<?= htmlspecialchars($neko_cfg['tproxy']) ?>"></td>
-            </tr>
-            <tr>
-              <td>Sing-box</td>
-              <td><input type="number" class="form-control text-center" name="singbox_http" value="<?= htmlspecialchars($http_port) ?>"></td>
-              <td><input type="number" class="form-control text-center" name="singbox_mixed" value="<?= htmlspecialchars($mixed_port) ?>"></td>
-              <td><input type="text" class="form-control text-center" name="singbox_mixed" value="—" disabled></td>
-              <td><input type="text" class="form-control text-center" name="singbox_mixed" value="—" disabled></td>
-              <td><input type="text" class="form-control text-center" name="singbox_mixed" value="—" disabled></td>
-            </tr>
-          </tbody>
-        </table>
-        <div class="text-danger text-center fw-bold mt-3 mb-1" data-translate="portChangeNotice">
-          Port changes will take effect after restarting the service.
-        </div>
-      </div>
-      <div class="modal-footer justify-content-end">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-translate="closeButton">Close</button>
-        <button type="submit" class="btn btn-primary" data-translate="save">Save</button>
-      </div>
-    </form>
-  </div>
-</div>
-
-<?php include './language.php'; include './cfg.php'; $current = basename($_SERVER['PHP_SELF']); ?>
-<html lang="<?php echo $currentLang; ?>">
-<div class="modal fade" id="langModal" tabindex="-1" aria-labelledby="langModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
-    <div class="modal-dialog modal-lg modal-dialog-centered">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="langModalLabel" data-translate="select_language">Select Language</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                <select id="langSelect" class="form-select" onchange="changeLanguage(this.value)">
-                    <option value="zh" data-translate="simplified_chinese">Simplified Chinese</option>
-                    <option value="hk" data-translate="traditional_chinese">Traditional Chinese</option>
-                    <option value="en" data-translate="english">English</option>
-                    <option value="ko" data-translate="korean">Korean</option>
-                    <option value="vi" data-translate="vietnamese">Vietnamese</option>
-                    <option value="ja" data-translate="japanese"></option>
-                    <option value="ru" data-translate="russian"></option>
-                    <option value="de" data-translate="germany">Germany</option>
-                    <option value="fr" data-translate="france">France</option>
-                    <option value="ar" data-translate="arabic"></option>
-                    <option value="es" data-translate="spanish">spanish</option>
-                </select>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-translate="close">Close</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<?php
-$default_url = 'https://raw.githubusercontent.com/Thaolga/Rules/main/music/songs.txt';
-$file_path = __DIR__ . '/lib/url_config.txt'; 
-$message = '';
-
-if (!file_exists($file_path)) {
-    if (file_put_contents($file_path, $default_url) !== false) {
-        chmod($file_path, 0644); 
-    }
-}
-
-if ($_SERVER['REQUEST_METHOD'] === 'POST') {
-    if (isset($_POST['new_url'])) {
-        $new_url = $_POST['new_url'];
-        if (file_put_contents($file_path, $new_url) !== false) {
-            chmod($file_path, 0644);  
-            $message = 'Update successful!';
-        } else {
-            $message = 'Update failed, please check permissions.';
-        }
-    }
-
-    if (isset($_POST['reset_default'])) {
-        if (file_put_contents($file_path, $default_url) !== false) {
-            chmod($file_path, 0644);
-            $message = 'Default URL restored!';
-        } else {
-            $message = 'Restore failed, please check permissions.';
-        }
-    }
-} else {
-    $new_url = file_exists($file_path) ? file_get_contents($file_path) : $default_url;
-}
-?>
-
-<div class="modal fade" id="colorModal" tabindex="-1" aria-hidden="true">
-  <div class="modal-dialog modal-xl modal-dialog-centered">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" data-translate="advanced_color_control">Advanced Color Control</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-      <div class="modal-body">
-        <div class="row">
-          <div class="col-md-6">
-            <div class="card h-100">
-              <div class="card-header bg-primary text-white">
-                <i class="bi bi-sliders"></i> <span data-translate="color_control">Color Control</span>
-              </div>
-              <div class="card-body">
-                <div class="mb-3">
-                  <label class="form-label" data-translate="primary_hue">Primary Hue</label>
-                  <div class="d-flex align-items-center">
-                    <input type="range" class="form-range flex-grow-1" id="hueSlider" min="0" max="360" step="1">
-                    <span class="ms-2" style="min-width: 50px;" id="hueValue">0°</span>
-                  </div>
-                </div>
-                
-                <div class="mb-3">
-                  <label class="form-label" data-translate="chroma">Chroma</label>
-                  <div class="d-flex align-items-center">
-                    <input type="range" class="form-range flex-grow-1" id="chromaSlider" min="0" max="0.3" step="0.01">
-                    <span class="ms-2" style="min-width: 50px;" id="chromaValue">0.10</span>
-                  </div>
-                </div>
-                
-                <div class="mb-3">
-                  <label class="form-label" data-translate="lightness">Lightness</label>
-                  <div class="d-flex align-items-center">
-                    <input type="range" class="form-range flex-grow-1" id="lightnessSlider" min="0" max="100" step="1">
-                    <span class="ms-2" style="min-width: 50px;" id="lightnessValue">30%</span>
-                  </div>
-                </div>
-                
-                <div class="mb-3">
-                  <label class="form-label" data-translate="or_use_palette">Or use palette:</label>
-                  <div class="d-flex flex-wrap gap-2">
-                    <button class="btn btn-sm p-3 rounded-circle" style="background-color:#4d79ff" data-h="240" data-c="0.2" data-l="30"></button>
-                    <button class="btn btn-sm p-3 rounded-circle" style="background-color:#ff4d94" data-h="340" data-c="0.25" data-l="35"></button>
-                    <button class="btn btn-sm p-3 rounded-circle" style="background-color:#4dff88" data-h="150" data-c="0.18" data-l="40"></button>
-                    <button class="btn btn-sm p-3 rounded-circle" style="background-color:#ffb84d" data-h="40" data-c="0.22" data-l="45"></button>
-                    <button class="btn btn-sm p-3 rounded-circle" style="background-color:#bf4dff" data-h="280" data-c="0.23" data-l="50"></button>
-                    <button class="btn btn-sm p-3 rounded-circle" style="background-color:#ff6b6b" data-h="10" data-c="0.24" data-l="55"></button>
-                    <button class="btn btn-sm p-3 rounded-circle" style="background-color:#4eca9e" data-h="160" data-c="0.19" data-l="60"></button>
-                    <button class="btn btn-sm p-3 rounded-circle" style="background-color:#ff9ff3" data-h="310" data-c="0.21" data-l="65"></button>
-                    <button class="btn btn-sm p-3 rounded-circle" style="background-color:#6c757d" data-h="200" data-c="0.05" data-l="50"></button>
-                    <button class="btn btn-sm p-3 rounded-circle" style="background-color:#ffc107" data-h="50" data-c="0.26" data-l="70"></button>
-                  </div>
-                </div>
-                
-                <div class="mt-3">
-                  <button class="btn btn-secondary w-100" id="resetColorBtn">
-                    <i class="bi bi-arrow-counterclockwise"></i> <span data-translate="reset_to_default">Reset to Default</span>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-md-6">
-            <div class="card h-100">
-              <div class="card-header bg-primary text-white">
-                <i class="bi bi-eye"></i> <span data-translate="color_preview">Color Preview</span>
-              </div>
-              <div class="card-body">
-                <div id="colorPreview" style="height: 100px; border-radius: 5px; margin-bottom: 15px;"></div>
-                <div class="mb-3">
-                  <label class="form-label" data-translate="oklch_values">OKLCH Values:</label>
-                  <div id="oklchValue" class="text-monospace">OKLCH(30%, 0.10, 260°)</div>
-                </div>
-                <div class="mb-3">
-                  <label class="form-label" data-translate="contrast_ratio">Contrast Ratio:</label>
-                  <div id="contrastRatio">21.00:1</div>
-                  <div id="contrastRating" class="mt-1 text-success fw-bold"><i class="bi bi-check-circle-fill"></i> Excellent (AAA)</div>
-                </div>
-                <div class="mb-3">
-                  <label class="form-label" data-translate="recent_colors">Recent Colors:</label>
-                  <div id="recentColors" class="d-flex flex-wrap gap-2"></div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
-          <i class="bi bi-x"></i> <span data-translate="cancel">Cancel</span>
-        </button>
-        <button type="button" class="btn btn-danger" id="removeAppColorBtn">
-          <i class="bi bi-eraser"></i> <span data-translate="reset">Reset</span>
-        </button>
-        <button type="button" class="btn btn-primary" id="applyColorBtn">
-          <i class="bi bi-check"></i> <span data-translate="apply_color">Apply Color</span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="modal fade" id="colorPickerModal" tabindex="-1" aria-labelledby="colorPickerModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
-  <div class="modal-dialog modal-xl modal-dialog-centered">
-    <div class="modal-content bg-dark text-white border border-secondary rounded">
-      <div class="modal-header">
-        <h5 class="modal-title" id="colorPickerModalLabel" data-translate="color_width_panel">Color & Width Panel</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-      <div class="modal-body">
-        <div class="row mb-3">
-          <div class="col-md-6">
-            <label for="containerWidth" class="form-label" data-translate="page_width">Page Width</label>
-            <input type="range" class="form-range" name="containerWidth" id="containerWidth" min="800" max="5400" step="50" value="1800" style="width: 100%;">
-            <div id="widthValue" class="mt-2" style="color: #FF00FF;" data-translate="current_width">Current Width: 1800px</div>
-          </div>
-          <div class="col-md-6">
-            <label for="modalMaxWidth" class="form-label" data-translate="settings.modal.maxWidth">Modal Max Width</label>
-            <input type="range" class="form-range" name="modalMaxWidth" id="modalMaxWidth" min="500" max="5400" step="50" value="800" style="width: 100%;">
-            <div id="modalWidthValue" class="mt-2" style="color: #00FF00;" data-translate="current_max_width">Current Max Width: 800px</div>
-          </div>
-        </div>
-        <div id="color-preview" class="rounded border mb-3" style="height: 100px; background: #333;"></div>
-        <div class="d-flex align-items-center gap-2 mb-3">
-          <div class="d-flex align-items-center justify-content-center rounded"
-               style="width: 80px; height: 50px; background: rgba(255,255,255,0.05); border: var(--border-strong);">
-            <input type="color" id="color-selector"
-                   class="form-control form-control-color p-0"
-                   value="#0f3460"
-                   data-tooltip="choose_color"
-                   style="width: 36px; height: 36px; cursor: pointer;">
-          </div>
-          <div id="current-color-block"
-               class="rounded d-flex align-items-center justify-content-center text-white position-relative"
-               style="height: 50px; flex: 1; cursor: pointer; background: #333; border: var(--border-strong); transition: all 0.3s ease;">
-            <input type="text"
-                   id="color-input"
-                   class="form-control text-center border-0 bg-transparent text-white p-0 m-0"
-                   value=" "
-                   style="width: 100%; font-size: 0.9rem;">
-                   <span class="fake-cursor">|</span>
-          </div>
-        </div>
-        <div class="d-flex gap-2 mb-3">
-          <button id="apply-color" class="btn btn-success flex-fill"><i class="fa fa-paint-brush"></i> <span data-translate="apply_color">Apply</span> </button>
-          <button id="reset-color" class="btn btn-danger flex-fill"><i class="fa fa-undo"></i> <span data-translate="reset">Reset</span></button>
-        </div>
-        <div id="preset-colors" class="d-grid gap-2"></div>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="fa fa-times"></i> <span data-translate="close">Close</span></button>
-      </div>
-    </div>
-  </div>
-</div>
-
- <div class="control-panel-overlay" id="controlPanelOverlay" style="display:none;">
-    <div class="control-panel">
-        <div class="panel-header">
-            <h3><i class="bi bi-gear"></i> <span data-translate="control_panel_title">Control Panel</span></h3>
-            <button class="close-icon" onclick="toggleControlPanel()" data-tooltip="close">
-                <i class="bi bi-x-lg"></i>
-            </button>
-        </div>
-        <div class="buttons-grid">
-            <button class="panel-btn" data-bs-toggle="modal" data-bs-target="#musicModal" data-tooltip="music_player">
-                <div class="btn-icon">
-                    <i class="bi bi-music-note-beamed"></i>
-                </div>
-                <div>
-                    <div data-translate="music_player">Music Player</div>
-                    <small class="opacity-75" data-translate="music_desc">Control background music settings</small>
-                </div>
-            </button>
-            <button class="panel-btn" id="color-panel-btn" data-bs-toggle="modal" data-bs-target="#colorPickerModal">
-                <div class="btn-icon">
-                    <i class="bi bi-palette"></i>
-                </div>
-                <div>
-                    <div data-translate="color_panel">Color Panel</div>
-                    <small class="opacity-75" data-translate="color_desc">Customize interface colors</small>
-                </div>
-            </button>
-            <button class="panel-btn" id="advancedColorBtn" data-tooltip="advanced_color_settings">
-                <div class="btn-icon">
-                    <i class="bi bi-palette2"></i>
-                </div>
-                <div>
-                    <div data-translate="advanced_color">Advanced Color Settings</div>
-                    <small class="opacity-75" data-translate="advanced_color_desc">Professional color adjustments</small>
-                </div>
-            </button>
-            <button class="panel-btn" id="clear-cache-btn" data-tooltip="clear_cache">
-                <div class="btn-icon">
-                    <i class="bi bi-trash"></i>
-                </div>
-                <div>
-                    <div data-translate="clear_cache">Clear Cache</div>
-                    <small class="opacity-75" data-translate="cache_desc">Free up system resources</small>
-                </div>
-            </button>
-            <button class="panel-btn" id="startCheckBtn" data-tooltip="start_check">
-                <div class="btn-icon">
-                    <i class="bi bi-globe2"></i>
-                </div>
-                <div>
-                    <div data-translate="start_check">Start Website Check</div>
-                    <small class="opacity-75" data-translate="check_desc">Diagnose website status</small>
-               </div>
-                    <i class="bi bi-toggle-off" id="autoCheckIcon"  style="cursor: pointer; margin-left: 10px;"></i>
-            </button>
-            <button class="panel-btn" id="openModalBtn" data-tooltip="open_animation">
-                <div class="btn-icon">
-                    <i class="bi bi-sliders"></i>
-                </div>
-                <div>
-                    <div data-translate="open_animation">Animation Control</div>
-                    <small class="opacity-75" data-translate="animation_desc">Adjust animation effects</small>
-                </div>
-            </button>
-            <button class="panel-btn" data-bs-toggle="modal" data-bs-target="#langModal">
-                <div class="btn-icon">
-                    <i class="bi bi-translate"></i>
-                </div>
-                <div class="language-container">
-                    <div>
-                        <div data-translate="set_language">Set Language</div>
-                        <small class="opacity-75" data-translate="language_desc">Choose interface language</small>
-                    </div>
-                    <img id="flagIcon" src="https://flagcdn.com/w20/cn.png" class="flag-icon" alt="Country Flag">
-                </div>
-            </button>
-            <button class="panel-btn" onclick="window.open('./monaco.php', '_blank')">
-                <div class="btn-icon">
-                    <i class="bi bi-file-earmark"></i>
-                </div>
-                <div>
-                    <div data-translate="fileHelper">File Helper</div>
-                    <small class="opacity-75" data-translate="file_desc">Manage your files</small>
-                </div>
-            </button>
-            <button class="panel-btn" id="translationToggleBtn" data-tooltip="enable">
-                <div class="btn-icon" id="translationToggleIcon">
-                    <i class="bi bi-toggle-off"></i>
-                </div>
-                <div>
-                    <div data-translate="ip_info">IP Info</div>
-                    <div class="opacity-75" id="translationToggleText" style="font-size: 0.85rem;">enable</div>
-                </div>
-            </button>
-        </div>
-        <div class="action-row">
-            <div class="color-picker">
-                <button class="btn btn-info ms-2" id="fontSwitchBtn" data-tooltip="toggle_font">
-                    <i id="fontSwitchIcon" class="fa-solid fa-font" style="color: white;"></i>
-                </button>
-                <label for="colorPicker" data-translate="component_bg_color">Component Background</label>
-                <input type="color" id="colorPicker" value="#0f3460">
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="animationModal" class="animation-modal" style="display: none;">
-    <div class="animation-modal-content">
-        <button id="toggleAnimationBtn" data-translate="start_cube_animation">🖥️ Start Cube Animation</button>
-        <button id="toggleSnowBtn" data-translate="start_snow_animation">❄️ Start Snow Animation</button>
-        <button id="toggleLightEffectBtn" data-translate="start_light_effect_animation">✨Start Light Effect Animation</button>
-        <button class="modal-close-btn" onclick="closeModal()" data-translate="close">Close</button>
-    </div>
-</div>
-
-<div id="floatingLyrics" style="display: none;">
-    <div class="floating-controls">
-        <button class="ctrl-btn" onclick="changeTrack(-1, true)" data-tooltip="previous_track">
-            <i class="fas fa-backward"></i>
-        </button>
-        <button class="ctrl-btn" id="floatingPlayBtn" onclick="togglePlay()" data-tooltip="play_pause">
-            <i class="bi bi-play-fill"></i>
-        </button>
-        <button class="ctrl-btn" onclick="changeTrack(1, true)" data-tooltip="next_track">
-            <i class="fas fa-forward"></i>
-        </button>
-        <button class="ctrl-btn" id="floatingRepeatBtn" onclick="toggleRepeat()">
-            <i class="bi bi-arrow-repeat"></i>
-        </button>
-        <button class="ctrl-btn" id="speedToggle" data-tooltip="playback_speed">
-            <span id="speedLabel">1×</span>
-        </button>
-        <button class="ctrl-btn" id="muteToggle" data-tooltip="volume">
-            <i class="bi bi-volume-up-fill"></i>
-        </button>
-        <button class="ctrl-btn" id="updatePlaylistBtn" onclick="updatePlaylist()" 
-                data-tooltip="update_playlist">
-            <i class="fa fa-sync-alt"></i>
-        </button>
-        <button class="ctrl-btn" id="goFirstBtn">
-            <i class="fas fa-circle-left"></i>
-        </button>
-        <button id="toggleFloatingLyricsBtn" class="ctrl-btn toggleFloatingLyricsBtn" data-tooltip="toggle_floating_lyrics">
-            <i class="bi bi-display floatingIcon"></i>
-        </button>
-    </div>
-    <div id="floatingCurrentSong" class="vertical-title"></div>
-    <div class="vertical-lyrics"></div>
-</div>
-
-<span id="clearConfirmText" data-translate="clear_confirm" class="d-none"></span>
-
-<div class="modal fade" id="musicModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
-    <div class="modal-dialog modal-xl">
-        <div class="modal-content bg-dark text-white">
-            <div class="modal-header">
-                <h5 class="modal-title" id="langModalLabel" data-translate="music_player"></h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                <div id="floatingLyrics"></div>
-                <div id="currentSong" class="mb-3 text-center font-weight-bold fs-4"></div>
-                <div class="lyrics-container" id="lyricsContainer" style="height: 300px; overflow-y: auto;"></div>
-            <div class="non-lyrics-content">
-                <div class="progress-container mt-3">
-                    <div class="progress">
-                        <div class="progress-bar bg-success" role="progressbar" id="progressBar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
-                    </div>
-                </div>
-                <div class="d-flex justify-content-between mt-2 small">
-                    <span id="currentTime">0:00</span>
-                    <span id="duration">0:00</span>
-                </div>          
-                <div class="controls d-flex justify-content-center gap-3 mt-4">
-                    <button class="control-btn toggleFloatingLyricsBtn" data-tooltip="toggle_floating_lyrics">
-                        <i class="bi bi-display floatingIcon"></i>
-                    </button>
-                    <button class="control-btn" id="repeatBtn" onclick="toggleRepeat()">
-                        <i class="bi bi-arrow-repeat"></i>
-                    </button>
-                    <button class="control-btn" onclick="changeTrack(-1, true)" data-tooltip="previous_track">
-                        <i class="bi bi-caret-left-fill"></i>
-                    </button>
-                    <button class="control-btn" id="playPauseBtn" onclick="togglePlay()" data-tooltip="play_pause">
-                        <i class="bi bi-play-fill"></i>
-                    </button>
-                    <button class="control-btn" onclick="changeTrack(1, true)" data-tooltip="next_track">
-                        <i class="bi bi-caret-right-fill"></i>
-                    </button>
-                    <button class="control-btn" type="button" data-bs-toggle="modal" data-bs-target="#urlModal" data-tooltip="custom_playlist">
-                        <i class="bi bi-music-note-list"></i>
-                    </button>
-                    <button class="btn btn-volume position-relative" id="volumeToggle" data-tooltip="volume">
-                        <i class="bi bi-volume-up-fill"></i>
-                        <div class="volume-slider-container position-absolute bottom-100 start-50 translate-middle-x mb-1 p-2" id="volumePanel" style="display: none; width: 120px;">
-                            <input type="range" class="form-range volume-slider" id="volumeSlider" min="0" max="1" step="0.01" value="1">
-                        </div>
-                    </button>
-                </div>
-                <div class="playlist mt-3" id="playlist"></div>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button class="btn btn-info" id="lyricsToggle"><i class="bi bi-chevron-down" id="lyricsIcon"></i></button>
-                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal" data-translate="cancel">Cancel</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div class="modal fade" id="urlModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
-    <div class="modal-dialog modal-xl">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" data-translate="update_playlist"></h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
-            </div>
-            <div class="modal-body">
-                <form method="POST">
-                    <div class="mb-3">
-                        <label data-translate="playlist_url"></label>
-                        <input 
-                            type="text" 
-                            name="new_url" 
-                            id="new_url" 
-                            class="form-control" 
-                            value="<?= htmlspecialchars($new_url) ?>" 
-                            required
-                        >
-                    </div>
-                    <div class="d-flex gap-2">
-                        <button type="submit" class="btn btn-primary" data-translate="save"></button>
-                        <button type="submit" name="reset_default" class="btn btn-secondary" data-translate="reset_default"></button>
-                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-translate="cancel"></button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div class="modal fade" id="confirmModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" style="z-index: 9999;">
-    <div class="modal-dialog modal-lg modal-dialog-centered">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" data-translate="confirm_title">Confirm Action</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div class="modal-body" id="confirmModalMessage"></div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-translate="cancel">Cancel</button>
-                <button type="button" class="btn btn-danger" id="confirmModalYes" data-translate="confirm">Confirm</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<script>
-document.addEventListener('DOMContentLoaded', function () {
-    const navbar = document.getElementById('navbarContent');
-    const toggler = document.querySelector('.navbar-toggler');
-
-    if (!navbar || !toggler) return;
-
-    function isMobile() {
-        return window.innerWidth < 992;
-    }
-
-    navbar.querySelectorAll('.nav-link').forEach(link => {
-        link.addEventListener('click', () => {
-            if (isMobile() && navbar.classList.contains('show')) {
-                toggler.click();
-            }
-        });
-    });
-
-    document.addEventListener('click', (e) => {
-        const isInside = navbar.contains(e.target) || toggler.contains(e.target);
-        if (!isInside && navbar.classList.contains('show') && isMobile()) {
-            toggler.click();
-        }
-    });
-});
-</script>
-
-<script>
-function clearNekoTmpDir() {
-    fetch('', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        body: 'action=clearNekoTmpDir'
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            alert(translations["tmp_neko_cleared"] || "The /tmp/neko directory has been cleared successfully.");
-        } else {
-            if (data.message === 'The directory does not exist.') {
-                alert(translations["tmp_neko_not_exist"] || "The /tmp/neko directory does not exist. No action was taken.");
-            } else {
-                alert('Failed to clear the /tmp/neko directory: ' + data.message);
-            }
-        }
-    })
-    .catch(error => {
-        console.error('Error:', error);
-        alert('An error occurred while trying to clear the /tmp/neko directory.');
-    });
-}
-</script>
-
-<script>
-document.addEventListener("DOMContentLoaded", function () {
-    const animationModal = document.getElementById('animationModal');
-    const openModalBtn = document.getElementById('openModalBtn');
-    openModalBtn.addEventListener('click', function () {
-        animationModal.style.display = 'flex';
-    });
-
-    animationModal.addEventListener('click', function (e) {
-        if (e.target === animationModal) {
-            animationModal.style.display = 'none';
-        }
-    });
-});
-
-function closeModal() {
-    document.getElementById('animationModal').style.display = 'none';
-}
-</script>
-
-<script>
-document.addEventListener('DOMContentLoaded', function () {
-  interact('.modal-dialog.draggable').draggable({
-    allowFrom: '.modal-header',
-    modifiers: [
-      interact.modifiers.restrictRect({
-        restriction: 'parent', 
-        endOnly: true
-      })
-    ],
-    listeners: {
-      start(event) {
-        event.target.style.transition = 'none';
-        event.target.classList.add('dragging');
-      },
-      move(event) {
-        const target = event.target;
-        const x = (parseFloat(target.dataset.x) || 0) + event.dx;
-        const y = (parseFloat(target.dataset.y) || 0) + event.dy;
-
-        target.style.transform = `translate(${x}px, ${y}px)`;
-        target.dataset.x = x;
-        target.dataset.y = y;
-      },
-      end(event) {
-        event.target.style.transition = '';
-        event.target.classList.remove('dragging');
-      }
-    }
-  });
-
-  document.querySelectorAll('.modal').forEach(modal => {
-    const dialog = modal.querySelector('.modal-dialog');
-    dialog.classList.add('draggable');
-
-    modal.addEventListener('show.bs.modal', () => {
-      dialog.style.transform = ''; 
-      dialog.dataset.x = 0;
-      dialog.dataset.y = 0;
-    });
-  });
-});
-</script>
-
-<script>
-const langData = <?php echo json_encode($langData); ?>;  
-const currentLang = "<?php echo $currentLang; ?>"; 
-
-let translations = langData[currentLang] || langData['en'];
-
-document.addEventListener("DOMContentLoaded", () => {
-    updateLanguage(currentLang); 
-    updateFlagIcon(currentLang);  
-    document.getElementById("langSelect").value = currentLang; 
-});
-
-function updateLanguage(lang) {
-    translations = langData[lang] || langData['en'];  
-
-    const translateElement = (el, attribute, property) => {
-        const translationKey = el.getAttribute(attribute);
-        if (translations[translationKey]) {
-            el[property] = translations[translationKey];
-        }
-    };
-
-    document.querySelectorAll('[data-translate]').forEach(el => {
-        const translationKey = el.getAttribute('data-translate');
-        const dynamicContent = el.getAttribute('data-dynamic-content') || '';
-
-        if (translations[translationKey]) {
-            let translatedText = translations[translationKey];
-        
-            const indexValue = el.getAttribute('data-index');
-            if (indexValue) {
-                translatedText = translatedText.replace('{index}', indexValue);
-            }
-        
-            const countValue = el.getAttribute('data-count');
-            if (countValue) {
-                translatedText = translatedText.replace('{count}', countValue);
-            }
-
-            if (el.tagName === 'OPTGROUP') {
-                el.setAttribute('label', translatedText);
-            } else {
-                el.innerText = translatedText + dynamicContent; 
-            }
-        }
-    });
-
-    document.querySelectorAll('[data-translate-title]').forEach(el => {
-        const translationKey = el.getAttribute('data-translate-title');
-        if (translations[translationKey]) {
-            el.title = translations[translationKey];
-            el.setAttribute('data-tooltip', translations[translationKey]);
-        } else {
-            el.removeAttribute('title');
-            el.removeAttribute('data-tooltip');
-        }
-    });
-
-    document.querySelectorAll('[data-tooltip]').forEach(el => {
-      const key = el.getAttribute('data-tooltip');
-      if (translations[key]) {
-        el.setAttribute('data-tooltip', translations[key]);
-      }
-   });
-
-    document.querySelectorAll('[data-translate-placeholder]').forEach(el => {
-        const translationKey = el.getAttribute('data-translate-placeholder');
-        if (translations[translationKey]) {
-            el.setAttribute('placeholder', translations[translationKey]);
-            el.setAttribute('aria-label', translations[translationKey]);  
-            el.setAttribute('title', translations[translationKey]); 
-        }
-    });
-
-    document.querySelectorAll('pre[data-translate]').forEach(el => {
-        const translationKey = el.getAttribute('data-translate');
-        if (translationKey && translations[translationKey]) {
-            const text = el.innerText;
-            const suffix = text.includes(':') ? text.split(':').slice(1).join(':').trim() : '';
-            el.innerText = translations[translationKey] + (suffix ? ': ' + suffix : '');
-        }
-    });
-
-    document.querySelectorAll('[data-translate]').forEach(el => {
-        const translationKey = el.getAttribute('data-translate');
-        if (translationKey && translations[translationKey]) {
-            el.setAttribute('label', translations[translationKey]);  
-        }
-    });
-}
-
-const languageStandardMap = {
-    'zh': 'zh-CN',
-    'hk': 'zh-TW', 
-    'en': 'en-US',
-    'ko': 'ko-KR',
-    'ja': 'ja-JP',
-    'ru': 'ru-RU',
-    'ar': 'ar-EG',
-    'es': 'es-ES',
-    'de': 'de-DE',
-    'fr': 'fr-FR',
-    'th': 'th-TH',
-    'bn': 'bn-BD',
-    'vi': 'vi-VN'
-};
-
-const langToVoiceLangMap = {
-    'zh': ['zh-CN', 'zh-HK', 'zh-TW'],
-    'hk': ['zh-CN', 'zh-HK', 'zh-TW'],
-    'en': ['en-US', 'en-GB', 'en-AU', 'en-CA', 'en-IN'],
-    'ko': ['ko-KR'],
-    'ja': ['ja-JP'],
-    'vi': ['vi-VN'],
-    'th': ['th-TH'],
-    'ru': ['ru-RU'],
-    'ar': ['ar-SA', 'ar-EG', 'ar-AE'],
-    'es': ['es-ES', 'es-MX', 'es-US'],
-    'de': ['de-DE', 'de-AT', 'de-CH'],
-    'fr': ['fr-FR', 'fr-CA', 'fr-CH'],
-    'bn': ['bn-BD', 'bn-IN']
-};
-
-function speakMessage(message) {
-    const globalVoiceEnabled = localStorage.getItem('colorVoiceEnabled') !== 'false';
-    if (!globalVoiceEnabled) return;
-
-    function speakWithVoices() {
-        const voices = speechSynthesis.getVoices();
-        if (voices.length === 0) {
-            setTimeout(speakWithVoices, 100);
-            return;
-        }
-
-        const xhr = new XMLHttpRequest();
-        xhr.open('GET', './lib/language.txt', true);
-        xhr.onreadystatechange = function() {
-            if (xhr.readyState === 4 && xhr.status === 200) {
-                const lang = xhr.responseText.trim();
-                
-                const voiceKey = getVoicePreferenceKey(lang);
-                const savedVoiceIndex = localStorage.getItem(voiceKey);
-                
-                let selectedVoice = null;
-                
-                if (savedVoiceIndex !== null) {
-                    const targetLangs = langToVoiceLangMap[lang] || [languageStandardMap[lang] || lang];
-                    const filteredVoices = voices.filter(voice => 
-                        targetLangs.some(targetLang => voice.lang.startsWith(targetLang))
-                    );
-                    selectedVoice = filteredVoices[savedVoiceIndex];
-                }
-                
-                if (!selectedVoice) {
-                    const chineseVoiceKey = getChineseVoiceKey();
-                    const savedChineseIndex = localStorage.getItem(chineseVoiceKey);
-                    const chineseVoices = voices.filter(voice => 
-                        ['zh-CN', 'zh-HK', 'zh-TW'].some(lang => voice.lang.startsWith(lang))
-                    );
-                    
-                    if (savedChineseIndex !== null && chineseVoices[savedChineseIndex]) {
-                        selectedVoice = chineseVoices[savedChineseIndex];
-                    } else if (chineseVoices.length > 0) {
-                        selectedVoice = chineseVoices[0];
-                    }
-                }
-                
-                if (!selectedVoice) {
-                    selectedVoice = voices.find(voice => voice.lang.includes('zh')) || voices[0];
-                }
-                
-                if (selectedVoice) {
-                    const utterance = new SpeechSynthesisUtterance(message);
-                    utterance.voice = selectedVoice;
-                    speechSynthesis.speak(utterance);
-                }
-            }
-        };
-        xhr.send();
-    }
-
-    speakWithVoices();
-}
-
-function getVoicePreferenceKey(lang) {
-    if (lang === 'zh' || lang === 'hk') {
-        return 'voicePreference_chinese';
-    }
-    return `voicePreference_${lang}`;
-}
-
-function getChineseVoiceKey() {
-    return 'voicePreference_chinese';
-}
-
-function updateFlagIcon(lang) {
-    const flagImg = document.getElementById('flagIcon');
-    if (!flagImg) return; 
-
-    const flagMap = {
-        'zh': './assets/neko/flags/cn.png', 
-        'hk': './assets/neko/flags/hk.png', 
-        'en': './assets/neko/flags/us.png',  
-        'ko': './assets/neko/flags/kr.png',  
-        'ja': './assets/neko/flags/jp.png', 
-        'ru': './assets/neko/flags/ru.png',  
-        'ar': './assets/neko/flags/sa.png', 
-        'es': './assets/neko/flags/es.png',  
-        'de': './assets/neko/flags/de.png', 
-        'fr': './assets/neko/flags/fr.png',  
-        'vi': './assets/neko/flags/vn.png'      
-    };
-    flagImg.src = flagMap[lang] || flagMap['en']; 
-}
-
-function changeLanguage(lang) {
-    fetch('', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/x-www-form-urlencoded'
-        },
-        body: 'lang=' + lang
-    }).then(response => response.text())
-      .then(data => {
-          console.log(data); 
-          updateLanguage(lang);  
-          updateFlagIcon(lang);  
-          const langLabelMap = {
-              'zh': '语言已切换为简体中文',
-              'hk': '語言已切換為繁體中文',
-              'en': 'Language switched to English',
-              'ko': '언어가 한국어로 변경되었습니다',
-              'ja': '言語が日本語に変更されました',
-              'ru': 'Язык переключен на русский',
-              'ar': 'تم تغيير اللغة إلى العربية',
-              'es': 'El idioma ha cambiado a español',
-              'de': 'Sprache auf Deutsch umgestellt',
-              'fr': 'Langue changée en français',
-              'vi': 'Đã chuyển ngôn ngữ sang tiếng Việt'
-          };
-
-          const message = langLabelMap[lang] || 'Language switched';
-
-          if (typeof speakMessage === 'function') {
-              speakMessage(message);
-          }
-          if (typeof showLogMessage === 'function') {
-              showLogMessage(message);
-          }
-      });
-}
-</script>
-
-<script>
-function manageNotifications() {
-    const messages = document.querySelectorAll('.log-message:not(.initialized)');
-    let basePosition = 20;
-
-    const iconPaths = {
-        error: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z',
-        warning: 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z',
-        info: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'
-    };
-
-    function generateIcon(type) {
-        const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="${iconPaths[type] || iconPaths.info}"/></svg>`;
-        return `data:image/svg+xml;base64,${btoa(svg)}`;
-    }
-
-    messages.forEach((msg, index) => {
-        msg.classList.add('initialized');
-
-        const type = msg.dataset.type || (msg.classList.contains('error') ? 'error' : msg.classList.contains('warning') ? 'warning' : 'info');
-
-        const originalContent = msg.innerHTML;
-        msg.innerHTML = `
-            <div class="log-content">
-                <span class="log-icon" style="background-image:url('${generateIcon(type)}')"></span>
-                ${originalContent}
-                <button class="log-close-btn">&times;</button>
-            </div>
-        `;
-
-        msg.style.transform = `translateY(${index * 70}px)`;
-
-        setTimeout(() => {
-            msg.classList.add('show');
-
-            setTimeout(() => {
-                msg.classList.remove('show');
-                msg.classList.add('hiding');
-                
-                setTimeout(() => msg.remove(), 500);
-            }, 12000);
-        }, index * 150);
-
-        const closeBtn = msg.querySelector('.log-close-btn');
-        closeBtn.addEventListener('click', () => {
-            msg.classList.remove('show');
-            msg.classList.add('hiding');
-            setTimeout(() => msg.remove(), 500);
-        });
-    });
-}
-
-manageNotifications();
-
-new MutationObserver(manageNotifications).observe(document.body, {
-    childList: true,
-    subtree: true
-});
-</script>
-
-<style>
-.img-con {
-	width: 65px;
-	height: 45px;
-	display: flex;
-	justify-content: center;
-	overflow: visible;
-}
-
-#flag {
-	width: auto;
-	height: auto;
-	max-width: 65px;
-	max-height: 45px;
-	object-fit: contain;
-}
-
-.status-icon {
-	width: 48px;
-	height: 48px;
-	object-fit: contain;
-	display: block;
-}
-
-.status-icons {
-	display: flex;
-	height: 45px;
-	margin-left: auto;
-}
-
-.site-icon {
-	display: flex;
-	justify-content: center;
-	height: 45px;
-	margin: 0 6px;
-}
-
-.mx-1 {
-	margin: 0 4px;
-}
-
-.site-icon[onclick*="github"] .status-icon {
-	width: 51px;
-	height: 49px;
-}
-
-.site-icon[onclick*="github"] {
-	width: 50px;
-	height: 47px;
-	display: flex;
-	justify-content: center;
-}
-
-.site-icon[onclick*="openai"] .status-icon {
-	width: 52px;
-	height: 54px;
-	margin-top: -2px;
-}
-
-.site-icon[onclick*="openai"] {
-	width: 52px;
-	height: 54px;
-	display: flex;
-	justify-content: center;
-}
-
-.container-sm.container-bg.callout.border {
-	padding: 12px 15px;
-	min-height: 70px;
-	margin-bottom: 15px;
-}
-
-.row.align-items-center {
-	width: 100%;
-	margin: 0;
-	display: flex;
-	gap: 12px;
-	height: 45px;
-}
-
-.col-3 {
-	height: 45px;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-}
-
-.col.text-center {
-	position: static;
-	left: auto;
-	transform: none;
-}
-
-.container-sm .row .col-4 {
-	position: static !important;
-	order: 2 !important;
-	width: 100% !important;
-	padding-left: 54px !important;
-	margin-top: 5px !important;
-	text-align: left !important;
-}
-
-#ping-result {
-	font-weight: bold;
-}
-
-#d-ip {
-	color: #09B63F;
-	font-weight: 700 !important;
-}
-
-#d-ip > .ip-main {
-	font-size: 14px !important;
-}
-
-#d-ip .badge-primary {
-	font-size: 13px !important;
-}
-
-.info.small {
-	color: #ff69b4;
-	font-weight: 600;
-	white-space: nowrap;
-}
-
-.site-icon, .img-con {
-	cursor: pointer !important;
-	transition: all 0.2s ease !important;
-	position: relative !important;
-	user-select: none !important;
-}
-
-.site-icon:hover, .img-con:hover {
-	transform: translateY(-2px) !important;
-}
-
-.site-icon:active, .img-con:active {
-	transform: translateY(1px) !important;
-	opacity: 0.8 !important;
-}
-
-@media (max-width: 1206px) {
-	.site-icon[onclick*="baidu"],
- .site-icon[onclick*="taobao"], 
- .site-icon[onclick*="google"],
- .site-icon[onclick*="openai"],
- .site-icon[onclick*="youtube"],
- .site-icon[onclick*="github"] {
-		display: none !important;
-	}
-}
-
-.animation-modal {
-        position: absolute;
-        top: 100px;
-        left: 50%;
-        transform: translateX(-50%);
-        z-index: 1050;
-        display: none;
-}
-
-.animation-modal-content {
-        background: linear-gradient(135deg, #1e3c72, #2a5298);
-        padding: 30px 40px;
-        border-radius: 20px;
-        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
-        max-width: 400px;
-        width: 90%;
-        text-align: center;
-        color: white;
-        animation: scaleIn 0.3s ease;
-}
-
-.animation-modal-content button {
-        display: block;
-        width: 100%;
-        padding: 12px 20px;
-        margin: 10px 0;
-        font-size: 1rem;
-        border: none;
-        border-radius: 12px;
-        background: rgba(255, 255, 255, 0.2);
-        color: white;
-        cursor: pointer;
-        transition: background 0.3s, transform 0.2s;
-}
-
-.animation-modal-content button:hover {
-        background: rgba(255, 255, 255, 0.3);
-        transform: scale(1.03);
-}
-
-@keyframes scaleIn {
-        from {
-            transform: scale(0.85);
-            opacity: 0;
-        }
-        to {
-            transform: scale(1);
-            opacity: 1;
-        }
-}
-</style>
-
-<link rel="stylesheet" href="./assets/bootstrap/bootstrap.min.css">
-<link rel="stylesheet" href="./assets/bootstrap/all.min.css">
-<link rel="stylesheet" href="./assets/bootstrap/bootstrap-icons.css">
-<link rel="stylesheet" href="./assets/bootstrap/leaflet.css">
-<link rel="stylesheet" href="./assets/bootstrap/Control.FullScreen.min.css">
-<link rel="stylesheet" href="./assets/bootstrap/custom.css">
-<link rel="icon" href="./assets/img/nekobox.png">
-
-<script src="./assets/bootstrap/jquery.min.js"></script>
-<script src="./assets/bootstrap/bootstrap.bundle.min.js"></script>
-<script src="./assets/js/feather.min.js"></script>
-<script src="./assets/bootstrap/interact.min.js"></script>
-<script src="./assets/bootstrap/Sortable.min.js"></script>
-<script src="./assets/bootstrap/leaflet.js"></script>
-<script src="./assets/bootstrap/Control.FullScreen.min.js"></script>
-<script src="./assets/js/neko.js"></script>
-
-<?php
-$translate = [
-
-];
-$lang = $_GET['lang'] ?? 'en';
-?>
-
-<?php if (in_array($currentLang, ['zh', 'en', 'hk', 'vi', 'ja', 'ru', 'ar', 'es', 'ko', 'de', 'fr'])): ?>
-    <div id="status-bar-component" class="container-sm container-bg mt-4" style="display: none;">
-        <div class="row align-items-center">
-            <div class="col-auto">
-                <div class="img-con">
-                    <img src="./assets/neko/img/loading.svg" id="flag" title="<?php echo $translations['refresh_ip']; ?>" onclick="IP.getIpipnetIP()">
-                </div>
-            </div>
-            <div class="col-3">
-                <p id="d-ip" class="ip-address mb-0">Checking...</p>
-                <p id="ipip" class="info small mb-0"></p>
-            </div>
-            <div class="col text-center"> 
-                <p id="ping-result" class="mb-0"></p>
-            </div>
-            <div class="col-auto ms-auto">
-                <div class="status-icons d-flex">
-                    <div class="site-icon mx-1" onclick="pingHost('baidu', 'Baidu')">
-                        <img src="./assets/neko/img/site_icon_01.png" id="baidu-normal" title="<?php echo sprintf($translations['test_latency'], 'Baidu'); ?>" class="status-icon" style="display: none;">
-                        <img src="./assets/neko/img/site_icon1_01.png" id="baidu-gray" class="status-icon">
-                    </div>
-                    <div class="site-icon mx-1" onclick="pingHost('taobao', 'Taobao')">
-                        <img src="./assets/neko/img/site_icon_02.png" id="taobao-normal" title="<?php echo sprintf($translations['test_latency'], 'Taobao'); ?>"  class="status-icon" style="display: none;">
-                        <img src="./assets/neko/img/site_icon1_02.png" id="taobao-gray" class="status-icon">
-                    </div>
-                    <div class="site-icon mx-1" onclick="pingHost('google', 'Google')">
-                        <img src="./assets/neko/img/site_icon_03.png" id="google-normal" title="<?php echo sprintf($translations['test_latency'], 'Google'); ?>"  class="status-icon" style="display: none;">
-                        <img src="./assets/neko/img/site_icon1_03.png" id="google-gray" class="status-icon">
-                    </div>
-                    <div class="site-icon mx-1" onclick="pingHost('openai', 'OpenAI')">
-                        <img src="./assets/neko/img/site_icon_06.png" id="openai-normal" title="<?php echo sprintf($translations['test_latency'], 'OpenAI'); ?>"  class="status-icon" style="display: none;">
-                        <img src="./assets/neko/img/site_icon1_06.png" id="openai-gray" class="status-icon">
-                    </div>
-                    <div class="site-icon mx-1" onclick="pingHost('youtube', 'YouTube')">
-                        <img src="./assets/neko/img/site_icon_04.png" id="youtube-normal" title="<?php echo sprintf($translations['test_latency'], 'YouTube'); ?>" class="status-icon" style="display: none;">
-                        <img src="./assets/neko/img/site_icon1_04.png" id="youtube-gray" class="status-icon">
-                    </div>
-                    <div class="site-icon mx-1" onclick="pingHost('github', 'GitHub')">
-                        <img src="./assets/neko/img/site_icon_05.png" id="github-normal" title="<?php echo sprintf($translations['test_latency'], 'GitHub'); ?>" class="status-icon" style="display: none;">
-                        <img src="./assets/neko/img/site_icon1_05.png" id="github-gray" class="status-icon">
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-<?php endif; ?>
-
-<script type="text/javascript">
-const _IMG = './assets/neko/';
-const translate = <?php echo json_encode($translate, JSON_UNESCAPED_UNICODE); ?>;
-let cachedIP = null;
-let cachedInfo = null;
-let random = parseInt(Math.random() * 100000000);
-
-const sitesToPing = {
-    baidu: { url: 'https://www.baidu.com', name: 'Baidu' },
-    taobao: { url: 'https://www.taobao.com', name: 'Taobao' },
-    google: { url: 'https://www.google.com', name: 'Google' },
-    youtube: { url: 'https://www.youtube.com', name: 'YouTube' },
-    github: { url: 'https://www.github.com', name: 'GitHub' },
-    openai : { url: 'https://www.openai.com', name: 'OpenAI' }
-};
-
-async function checkAllPings() {
-    const pingResults = {};
-    for (const [key, site] of Object.entries(sitesToPing)) {
-        const { url, name } = site;
-        try {
-            const startTime = performance.now();
-            await fetch(url, { mode: 'no-cors', cache: 'no-cache' });
-            const endTime = performance.now();
-            const pingTime = Math.round(endTime - startTime);
-            pingResults[key] = { name, pingTime };
-        } catch (error) {
-            pingResults[key] = { name, pingTime: '超时' };
-        }
-    }
-    return pingResults;
-}
-
-const checkSiteStatus = {
-    sites: {
-        baidu: 'https://www.baidu.com',
-        taobao: 'https://www.taobao.com',
-        google: 'https://www.google.com',
-        youtube: 'https://www.youtube.com',
-        github: 'https://www.github.com',
-        openai: 'https://www.openai.com'
-    },
-    
-    check: async function() {
-        for (let [site, url] of Object.entries(this.sites)) {
-            try {
-                const response = await fetch(url, {
-                    mode: 'no-cors',
-                    cache: 'no-cache'
-                });
-                
-                document.getElementById(`${site}-normal`).style.display = 'inline';
-                document.getElementById(`${site}-gray`).style.display = 'none';
-            } catch (error) {
-                document.getElementById(`${site}-normal`).style.display = 'none';
-                document.getElementById(`${site}-gray`).style.display = 'inline';
-            }
-        }
-    }
-};
-
-async function pingHost(site, siteName) {
-    const url = checkSiteStatus.sites[site];
-    const resultElement = document.getElementById('ping-result');
-
-    try {
-        resultElement.innerHTML = `<span style="font-size: 22px">${translations.testing_latency.replace('%s', siteName)}...</span>`;
-        resultElement.style.color = '#87CEFA';
-        resultElement.style.display = 'block';
-
-        const startTime = performance.now();
-        await fetch(url, {
-            mode: 'no-cors',
-            cache: 'no-cache'
-        });
-        const endTime = performance.now();
-        const pingTime = Math.round(endTime - startTime);
-
-        resultElement.innerHTML = `<span style="font-size: 22px">${translations.latency_result.replace('%s', siteName).replace('%d', pingTime)}</span>`;
-
-        if (pingTime <= 300) {
-            resultElement.style.color = '#09B63F';  
-        } else if (pingTime <= 700) {
-            resultElement.style.color = '#FFA500';  
-        } else {
-            resultElement.style.color = '#ff6b6b';  
-        }
-    } catch (error) {
-        resultElement.innerHTML = `<span style="font-size: 22px">${translations.connection_timeout.replace('%s', siteName)}</span>`;
-        resultElement.style.color = '#ff6b6b';
-        resultElement.style.display = 'block';
-    }
-    setTimeout(() => {
-        resultElement.style.display = 'none';
-    }, 6000);
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-    const translationBtn = document.getElementById('translationToggleBtn');
-    const translationText = document.getElementById('translationToggleText');
-    const translationIcon = document.getElementById('translationToggleIcon').querySelector('i');
-
-    if (!localStorage.getItem('translationEnabled')) {
-        localStorage.setItem('translationEnabled', 'false');
-    }
-
-    const updateButtonState = () => {
-        const isEnabled = localStorage.getItem('translationEnabled') === 'true';
-        translationText.textContent = isEnabled
-            ? (langData[currentLang]?.disable || 'Disable')
-            : (langData[currentLang]?.enable || 'Enable');
-
-        translationIcon.className = isEnabled
-            ? 'bi bi-toggle-on text-success'
-            : 'bi bi-toggle-off text-white';
-    };
-
-    updateButtonState();
-
-    translationBtn.addEventListener('click', () => {
-        const newState = localStorage.getItem('translationEnabled') !== 'true';
-        localStorage.setItem('translationEnabled', newState);
-        updateButtonState();
-
-        const spokenMessage = newState
-            ? (langData[currentLang]?.translation_enabled || 'Translation Enabled')
-            : (langData[currentLang]?.translation_disabled || 'Translation Disabled');
-        speakMessage(spokenMessage);
-        showLogMessage(spokenMessage);
-        translationBtn.style.transform = "scale(0.95)";
-        setTimeout(() => {
-            translationBtn.style.transform = "scale(1)";
-        }, 100);
-    });
-});
-
-async function translateText(text, targetLang = null) {
-    if (!text?.trim()) return text;
-
-    if (!targetLang) {
-        try {
-            const response = await fetch('./lib/language.txt?t=' + new Date().getTime());
-            if (response.ok) {
-                const lang = await response.text();
-                targetLang = lang.trim().toLowerCase() || 'zh';
-            } else {
-                targetLang = 'zh';
-            }
-        } catch (error) {
-            targetLang = 'zh';
-        }
-    }
-    
-    const apiLangMap = {
-        'zh':'zh-CN','zh-tw':'zh-TW','zh-CN':'zh-CN','hk':'zh-TW', 'zh-mo': 'zh-TW',
-        'en':'en','ja':'ja','ko':'ko','fr':'fr','de':'de','es':'es',
-        'it':'it','pt':'pt','ru':'ru','ar':'ar','hi':'hi','bn':'bn',
-        'ms':'ms','id':'id','vi':'vi','th':'th','nl':'nl','pl':'pl',
-        'tr':'tr','sv':'sv','no':'no','fi':'fi','da':'da','cs':'cs',
-        'he':'he','el':'el','hu':'hu','ro':'ro','sk':'sk','bg':'bg','uk':'uk'
-    };
-    
-    const apiTargetLang = apiLangMap[targetLang.toLowerCase()] || 'zh-CN';
-
-    const detectJP = (text) => /[\u3040-\u309F\u30A0-\u30FF\u4E00-\u9FAF]/.test(text);
-    const sourceLang = detectJP(text) ? 'ja' : 'en';
-
-    const isSameLang = () => {
-        const sourceBase = sourceLang.split('-')[0];
-        const targetBase = apiTargetLang.split('-')[0];
-        return sourceBase === targetBase;
-    };
-    
-    if (isSameLang()) return text;
-
-    if (localStorage.getItem('translationEnabled') !== 'true') return text;
-
-    const cacheKey = `trans_${sourceLang}_${apiTargetLang}_${text}`;
-    const cached = localStorage.getItem(cacheKey);
-    if (cached) return cached;
-
-    const apis = [
-        {
-            url: `https://api.mymemory.translated.net/get?q=${encodeURIComponent(text)}&langpair=${sourceLang}|${apiTargetLang}&de=example@yourdomain.com`,
-            method: 'GET',
-            parse: data => data.responseData?.translatedText
-        }
-    ];
-
-    const controller = new AbortController();
-    try {
-        const promises = apis.map(async (api) => {
-            const timeoutPromise = new Promise((_, reject) => 
-                setTimeout(() => reject('timeout'), api.timeout || 3000)
-            );
-
-            try {
-                const fetchPromise = fetch(api.url, {
-                    method: api.method,
-                    headers: api.headers || {},
-                    body: api.method === 'POST' ? api.body : undefined,
-                    signal: controller.signal
-                });
-                
-                const response = await Promise.race([fetchPromise, timeoutPromise]);
-                if (!response.ok) throw new Error('API response not OK');
-                const data = await response.json();
-                return api.parse ? api.parse(data) : data?.translatedText;
-            } catch (e) {
-                return null;
-            }
-        });
-
-        for (const promise of promises) {
-            const result = await promise;
-            if (result) {
-                localStorage.setItem(cacheKey, result);
-                clearOldCache();
-                return result;
-            }
-        }
-    } finally {
-        controller.abort();
-    }
-
-    return text;
-}
-
-function clearOldCache() {
-    const cachePrefix = 'trans_';
-    const cacheKeys = Object.keys(localStorage).filter(key => 
-        key.startsWith(cachePrefix)
-    );
-    
-    if (cacheKeys.length > 1000) {
-        const itemsToRemove = cacheKeys.slice(0, cacheKeys.length - 1000);
-        itemsToRemove.forEach(key => localStorage.removeItem(key));
-    }
-}
-
-let IP = {
-    isRefreshing: false,
-    lastGeoData: null, 
-    ipApis: [
-        {url: 'https://api.ipify.org?format=json', type: 'json', key: 'ip'},
-        {url: 'https://api-ipv4.ip.sb/geoip', type: 'json', key: 'ip'},
-        {url: 'https://myip.ipip.net', type: 'text'},
-        {url: 'http://pv.sohu.com/cityjson', type: 'text'},
-        {url: 'https://ipinfo.io/json', type: 'json', key: 'ip'},
-        {url: 'https://ipapi.co/json/', type: 'json'},
-        {url: 'https://freegeoip.app/json/', type: 'json'}
-    ],
-
-    fetchIP: async () => {
-        let error;
-        for(let api of IP.ipApis) {
-            try {
-                const response = await IP.get(api.url, api.type);
-                if(api.type === 'json') {
-                    const ipData = api.key ? response.data[api.key] : response.data;
-                    cachedIP = ipData;
-                    document.getElementById('d-ip').innerHTML = ipData;
-                    return ipData;
-                } else {
-                    const ipData = response.data.match(/\d+\.\d+\.\d+\.\d+/)?.[0];
-                    if(ipData) {
-                        cachedIP = ipData;
-                        document.getElementById('d-ip').innerHTML = ipData;
-                        return ipData;
-                    }
-                }
-            } catch(e) {
-                error = e;
-                console.error(`Error with ${api.url}:`, e);
-                continue;
-            }
-        }
-        throw error || new Error("All IP APIs failed");
-    },
-
-    get: (url, type) =>
-        fetch(url, { 
-            method: 'GET',
-            cache: 'no-store'
-        }).then((resp) => {
-            if (type === 'text')
-                return Promise.all([resp.ok, resp.status, resp.text(), resp.headers]);
-            else
-                return Promise.all([resp.ok, resp.status, resp.json(), resp.headers]);
-        }).then(([ok, status, data, headers]) => {
-            if (ok) {
-                return { ok, status, data, headers };
-            } else {
-                throw new Error(JSON.stringify(data.error));
-            }
-        }).catch(error => {
-            console.error("Error fetching data:", error);
-            throw error;
-        }),
-
-    Ipip: async (ip, elID) => {
-        const geoApis = [
-            {url: `https://api.ip.sb/geoip/${ip}`, type: 'json'},
-            {url: 'https://myip.ipip.net', type: 'text'},
-            {url: `http://ip-api.com/json/${ip}`, type: 'json'},
-            {url: `https://ipinfo.io/${ip}/json`, type: 'json'},
-            {url: `https://ipapi.co/${ip}/json/`, type: 'json'},
-            {url: `https://freegeoip.app/json/${ip}`, type: 'json'}
-        ];
-
-        let geoData = null;
-        let error;
-
-        for(let api of geoApis) {
-            try {
-                const response = await IP.get(api.url, api.type);
-                geoData = response.data;
-                break;
-            } catch(e) {
-                error = e;
-                console.error(`Error with ${api.url}:`, e);
-                continue;
-            }
-        }
-
-        if(!geoData) {
-            throw error || new Error("All Geo APIs failed");
-        }
-
-        cachedIP = ip;
-        IP.lastGeoData = geoData; 
-        
-        IP.updateUI(geoData, elID);
-    },
-
-    updateUI: async (data, elID) => {
-        try {
-            const country = await translateText(data.country || translations['unknown']);
-            const region = await translateText(data.region || "");
-            const city = await translateText(data.city || "");
-            const isp = await translateText(data.isp || "");
-            const asnOrganization = await translateText(data.asn_organization || "");
-
-            let location = `${region && city && region !== city ? `${region} ${city}` : region || city || ''}`;
-
-            let displayISP = isp;
-            let displayASN = asnOrganization;
-
-            if (isp && asnOrganization && asnOrganization.includes(isp)) {
-                displayISP = '';  
-            } else if (isp && asnOrganization && isp.includes(asnOrganization)) {
-                displayASN = '';  
-            }
-
-            const isSmallScreen = window.innerWidth < 768; 
-
-            let locationInfo;
-            if (isSmallScreen) {
-                locationInfo = `<span style="margin-left: 8px; position: relative; top: -4px;">${location} ${data.asn || ''} ${displayASN}</span>`;
-            } else {
-                locationInfo = `<span style="margin-left: 8px; position: relative; top: -4px;">${location} ${displayISP} ${data.asn || ''} ${displayASN}</span>`;
-            }
-
-            const isHidden = localStorage.getItem("ipHidden") === "true";
-
-            let simpleDisplay = `
-                <div class="ip-row" style="display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;">
-                    <div class="ip-main" style="cursor: pointer;" onclick="handleIPClick()" title="${translations['show_ip']}">
-                        <div style="display: flex; align-items: center; gap: 5px;">
-                            <span id="ip-address" style="margin-left: 0.3ch">${isHidden ? '**.**.**.**.**' : cachedIP}</span> 
-                            <span class="badge badge-primary" style="color: #333;">${country}</span>
-                        </div>
-                    </div>
-
-                    <span id="toggle-ip" style="cursor: pointer; text-indent: 0.3ch; padding-top: 2px;" title="${translations['hide_ip']}">
-                        <i class="bi ${isHidden ? 'bi-eye-slash' : 'bi-eye'}" style="font-size: 1.4rem; vertical-align: middle;"></i>  
-                    </span>
-            `;
-
-            document.getElementById('d-ip').innerHTML = simpleDisplay;
-            document.getElementById('ipip').innerHTML = locationInfo;
-
-            const countryCode = data.country_code || 'unknown';
-            const flagSrc = (countryCode !== 'unknown') ? _IMG + "flags/" + countryCode.toLowerCase() + ".png"  : './assets/neko/flags/cn.png';
-            $("#flag").attr("src", flagSrc);
-
-            const ipContainer = document.querySelector('.ip-row');
-            const toggleIcon = document.getElementById('toggle-ip');
-        
-            if (ipContainer && toggleIcon) {
-
-                toggleIcon.style.opacity = '0';
-
-                ipContainer.addEventListener('mouseenter', function() {
-                    toggleIcon.style.opacity = '1';
-                });
-            
-                ipContainer.addEventListener('mouseleave', function() {
-                    toggleIcon.style.opacity = '0';
-                });
-            }
-
-            document.getElementById('toggle-ip').addEventListener('click', () => {
-                const ipElement = document.getElementById('ip-address');
-                const iconElement = document.getElementById('toggle-ip').querySelector('i');
-
-                if (ipElement.textContent === cachedIP) {
-                    ipElement.textContent = '***.***.***.***.***';
-                    iconElement.classList.remove('bi-eye');
-                    iconElement.classList.add('bi-eye-slash');  
-                    localStorage.setItem("ipHidden", "true");  
-                } else {
-                    ipElement.textContent = cachedIP;  
-                    iconElement.classList.remove('bi-eye-slash');
-                    iconElement.classList.add('bi-eye');  
-                    localStorage.setItem("ipHidden", "false");  
-                }
-            });
-
-        } catch (error) {
-            console.error("Error in updateUI:", error);
-            document.getElementById('d-ip').innerHTML = langData[currentLang]['connection_timeout'];
-            $("#flag").attr("src", "./assets/neko/flags/mo.png");
-        }
-    },
-
-    showDetailModal: async () => {
-        const data = IP.lastGeoData;
-        if (!data) return;
-
-        const translatedCountry = await translateText(data.country, currentLang) || data.country || langData[currentLang]['unknown'];
-        const translatedRegion = await translateText(data.region, currentLang) || data.region || "";
-        const translatedCity = await translateText(data.city, currentLang) || data.city || "";
-        const translatedIsp = await translateText(data.isp, currentLang) || data.isp || "";
-        const translatedAsnOrganization = await translateText(data.asn_organization, currentLang) || data.asn_organization || "";
-
-        let country = translatedCountry;
-        let region = translatedRegion;
-        let city = translatedCity;
-        let isp = translatedIsp;
-        let asnOrganization = translatedAsnOrganization;
-        let timezone = data.timezone || "";
-        let asn = data.asn || "";
-
-        let areaParts = [country, region, city].filter(Boolean);
-
-        if (region && city && region === city) {
-            areaParts = [country, region];
-        }
-
-        if (country && region && country === region) {
-            areaParts = [country];
-        }
-
-        if (country && city && country === city) {
-            areaParts = [country];
-        }
-        let areaDisplay = areaParts.join(" ");
-
-        const pingResults = await checkAllPings();
-        const delayInfoHTML = Object.entries(pingResults).map(([key, { name, pingTime }]) => {
-            let color = '#ff6b6b';
-            if (typeof pingTime === 'number') {
-                color = pingTime <= 300 ? '#09B63F' : pingTime <= 700 ? '#FFA500' : '#ff6b6b';
-            }
-            return `<span style="margin-right: 20px; font-size: 18px; color: ${color};">${name}: ${pingTime === '超时' ? langData[currentLang]['timeout'] : `${pingTime}ms`}</span>`;
-        }).join('');
-
-        let lat = data.latitude || null;
-        let lon = data.longitude || null;
-
-        if (!lat || !lon) {
-            try {
-                const response = await fetch(`https://ipapi.co/${cachedIP}/json/`);
-                const geoData = await response.json();
-                lat = geoData.latitude;
-                lon = geoData.longitude;
-            } catch (error) {
-                console.error(langData[currentLang]['geo_location_error'], error);
-            }
-        }
-
-        const modalHTML = `
-            <div class="modal fade custom-modal" id="ipDetailModal" tabindex="-1" role="dialog" aria-labelledby="ipDetailModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
-                <div class="modal-dialog modal-xl draggable" role="document">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <h5 class="modal-title" id="ipDetailModalLabel">${translations['ip_info']}</h5>
-                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
-                                <span aria-hidden="true">&times;</span>
-                            </button>
-                        </div>
-                        <div class="modal-body">
-                            <div class="detail-row">
-                                <span class="detail-label">${translations['ip_address']}:</span>
-                                <span class="detail-value">${cachedIP}</span>
-                            </div>
-                            <div class="detail-row">
-                                <span class="detail-label">${translations['location']}:</span>
-                                <span class="detail-value">${areaDisplay}</span>
-                            </div>
-                            <div class="detail-row">
-                                <span class="detail-label">${translations['isp']}:</span>
-                                <span class="detail-value">${isp}</span>
-                            </div>
-                            <div class="detail-row">
-                                <span class="detail-label">${translations['asn']}:</span>
-                                <span class="detail-value">${asn} ${asnOrganization}</span>
-                            </div>
-                            <div class="detail-row">
-                                <span class="detail-label">${translations['timezone']}:</span>
-                                <span class="detail-value">${timezone}</span>
-                            </div>
-                            ${lat && lon ? `
-                            <div class="detail-row">
-                                <span class="detail-label">${translations['latitude_longitude']}:</span>
-                                <span class="detail-value">${lat}, ${lon}</span>
-                            </div>
-                            <div class="detail-row" style="height: 400px; margin-top: 20px;">
-                                <div id="leafletMap" style="width: 100%; height: 100%;"></div>
-                            </div>` : ''}
-                            <h5 style="margin-top: 15px;">${translations['latency_info']}:</h5>
-                            <div class="detail-row" style="display: flex; flex-wrap: wrap;">
-                                ${delayInfoHTML}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        `;
-
-        $('#ipDetailModal').remove();
-        $('body').append(modalHTML);
-        $('#ipDetailModal').modal('show');
-
-        if (lat && lon) {
-            setTimeout(() => {
-                if (window._leafletMap) {
-                    window._leafletMap.remove();
-                }
-                window._leafletMap = L.map('leafletMap').setView([lat, lon], 10);
-                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                    attribution: ''
-                }).addTo(window._leafletMap);
-                const areaDisplayForPopup = [country, region].filter(Boolean).join(" ");
-                L.marker([lat, lon])
-                    .addTo(window._leafletMap)
-                    .bindPopup(areaDisplay)
-                    .openPopup();
-                try {
-                    if (typeof L.Control.FullScreen !== 'undefined') {
-                        const fullscreenControl = new L.Control.FullScreen({
-                            position: 'topright',
-                            title: 'Full Screen',
-                            titleCancel: 'Exit Full Screen',
-                            content: null
-                        });
-                        window._leafletMap.addControl(fullscreenControl);
-                        console.log('FullScreen control added:', fullscreenControl);
-                    } else {
-                        console.error('FullScreen control plugin is not loaded.');
-                    }
-                } catch (error) {
-                    console.error('Error adding FullScreen control:', error);
-                }
-            }, 200);
-        }
-    },
-
-    getIpipnetIP: async () => {
-        if (IP.isRefreshing) return;
-
-        try {
-            IP.isRefreshing = true;
-            document.getElementById('d-ip').innerHTML = `
-                <div class="ip-main">
-                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                    ${langData[currentLang]['checking']} 
-                </div>
-            `;
-            document.getElementById('ipip').innerHTML = "";
-            $("#flag").attr("src", _IMG + "img/loading.svg");
-
-            const ip = await IP.fetchIP();
-            await IP.Ipip(ip, 'ipip');
-        } catch (error) {
-            console.error("Error in getIpipnetIP function:", error);
-            document.getElementById('ipip').innerHTML = langData[currentLang]['ip_info_fail'];
-        } finally {
-            IP.isRefreshing = false;
-        }
-    }
-};
-
-const style = document.createElement('style');
-style.textContent = `
-.ip-main {
-	font-size: 15px;
-	padding: 5px;
-	transition: all 0.3s;
-	display: inline-flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.badge-primary {
-	color: #ff69b4 !important;
-	background-color: #f8f9fa !important;
-	border: 1px solid #dee2e6;
-}
-
-#ipip {
-	margin-left: -3px;
-	font-size: 1rem;
-	color: rgb(255, 0, 255) !important;
-}
-
-.ip-main:hover {
-	background: #f0f0f0;
-	border-radius: 4px;
-}
-
-.ip-details {
-	font-size: 18px !important;
-	line-height: 1.6;
-}
-
-.detail-row {
-	display: flex;
-	margin-bottom: 10px;
-	line-height: 1.6;
-}
-
-.detail-label {
-	flex: 0 0 200px;
-	text-align: left;
-	font-weight: 500;
-	padding-right: 18px;
-}
-
-.detail-value {
-	flex: 1;
-	text-align: left;
-	word-break: break-all;
-	margin-left: 0;
-}
-`;
-document.head.appendChild(style);
-IP.getIpipnetIP();
-if(typeof checkSiteStatus !== 'undefined') {
-    checkSiteStatus.check();
-    setInterval(() => checkSiteStatus.check(), 30000);
-}
-
-setInterval(IP.getIpipnetIP, 180000);
-</script>
-
-<script>
-function handleIPClick() {
-    if (window.innerWidth <= 768) {
-        return;
-    }
-    IP.showDetailModal();
-}
-</script>
-
-<script>
-    function toggleControlPanel() {
-        const overlay = document.getElementById('controlPanelOverlay');
-        if (overlay.style.display === 'none' || overlay.style.display === '') {
-            overlay.style.display = 'flex';
-        } else {
-            overlay.style.display = 'none';
-        }
-    }
-
-    const colorPicker = document.getElementById('colorPicker');
-    const controlPanel = document.querySelector('.control-panel');
-
-    colorPicker.addEventListener('input', function() {
-        const color = this.value;
-        controlPanel.style.background = `linear-gradient(135deg, ${color}, #1a508b, #2d8bc0)`;
-    });
-
-    document.querySelectorAll('.panel-btn, .panel-close-btn, .close-icon').forEach(button => {
-        button.addEventListener('mousedown', function() {
-            this.style.transform = 'translateY(0)';
-        });
-
-        button.addEventListener('mouseup', function() {
-            this.style.transform = this.classList.contains('panel-close-btn') || this.classList.contains('close-icon') ? 
-                'translateY(-3px)' : 'translateY(0)';
-        });
-
-        button.addEventListener('mouseleave', function() {
-            this.style.transform = 'translateY(0)';
-        });
-    });
-</script>
-
-<script>
-document.addEventListener('keydown', function(event) {
-    if (event.ctrlKey && event.shiftKey && event.code === 'KeyC') {
-        clearCache();
-        event.preventDefault();  
-    }
-});
-
-document.getElementById('clear-cache-btn').addEventListener('click', function() {
-    clearCache();
-});
-
-const notificationMessage = translations['cache_cleared_notification'];
-const speechMessage = translations['cache_cleared_speech'];
-
-function clearCache() {
-    location.reload(true); 
-
-    localStorage.clear();
-    sessionStorage.clear();
-
-    sessionStorage.setItem('cacheCleared', 'true');
-
-    showLogMessage(translations['notificationMessage']);
-    speakMessage(translations['notificationMessage']);
-}
-
-window.addEventListener('load', function() {
-    if (sessionStorage.getItem('cacheCleared') === 'true') {
-        showLogMessage(translations['notificationMessage']);
-        speakMessage(translations['notificationMessage']);
-        sessionStorage.removeItem('cacheCleared'); 
-    }
-});
-</script>
-
-<script>
-const bars = document.querySelectorAll('.bar');
-function synthWave() {
-  const time = Date.now() / 1000;
-  
-  bars.forEach((bar, i) => {
-    const frequency = 0.5 + i * 0.2; 
-    const amplitude = Math.sin(time * frequency) * 50 + 50; 
-    const height = amplitude * (0.8 + Math.random() * 0.2); 
-    
-    bar.style.height = `${Math.max(5, height)}%`;
-    bar.style.backgroundColor = `hsl(${(time * 50 + i * 30) % 360}, 80%, 60%)`;
-  });
-  
-  requestAnimationFrame(synthWave);
-}
-synthWave();
-</script> 
-
-<script>
-function toggleFloatingLyrics() {
-    const lyrics = document.getElementById('floatingLyrics');
-    const isHidden = lyrics.style.display === 'none';
-    lyrics.style.display = isHidden ? '' : 'none';
-    localStorage.setItem('floatingLyricsVisible', isHidden ? 'true' : 'false');
-
-    document.querySelectorAll('.toggleFloatingLyricsBtn i').forEach(icon => {
-        icon.className = isHidden ? 'bi bi-display-fill floatingIcon' : 'bi bi-display floatingIcon';
-    });
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-    const lyrics = document.getElementById('floatingLyrics');
-    const isVisible = localStorage.getItem('floatingLyricsVisible') === 'true';
-
-    lyrics.style.display = isVisible ? '' : 'none';
-
-    document.querySelectorAll('.toggleFloatingLyricsBtn i').forEach(icon => {
-        icon.className = isVisible ? 'bi bi-display-fill floatingIcon' : 'bi bi-display floatingIcon';
-    });
-
-    document.querySelectorAll('.toggleFloatingLyricsBtn').forEach(btn => {
-        btn.addEventListener('click', toggleFloatingLyrics);
-    });
-});
-</script>
-
-<script>
-const audioPlayer = new Audio();
-let songs = JSON.parse(localStorage.getItem('cachedPlaylist') || '[]');
-let currentTrackIndex = JSON.parse(localStorage.getItem('currentTrackIndex') || '0');
-let isPlaying = JSON.parse(localStorage.getItem('isPlaying') || 'false');
-let repeatMode = JSON.parse(localStorage.getItem('repeatMode') || '0');
-let isHovering = false;
-let isManualScroll = false;
-let isSmallScreen = window.innerWidth < 768;
-
-const showLogMessage = (function() {
-    let currentIndex = 0;
-    const activeLogs = new Set();
-    const BASE_OFFSET = 20;
-    const MARGIN = 10;
-
-    function createIcon(type) {
-        const icons = {
-            error: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z',
-            warning: 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z',
-            info: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'
-        };
-
-        const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="${icons[type] || icons.info}"/></svg>`;
-
-        return `data:image/svg+xml;base64,${btoa(svg)}`;
-    }
-
-    function updatePositions() {
-        let verticalPos = BASE_OFFSET;
-        activeLogs.forEach(log => {
-            log.style.transform = `translateY(${verticalPos}px)`;
-            verticalPos += log.offsetHeight + MARGIN;
-        });
-    }
-
-    return function(message, type = '') {
-        const logBox = document.createElement('div');
-        logBox.className = `log-box ${type}`;
-
-        if (!type) {
-            logBox.dataset.dynamicBg = 'true';
-        }
-
-        logBox.innerHTML = `
-            <div class="log-content">
-                <span class="log-icon" style="background-image:url('${createIcon(type)}')"></span>
-                ${decodeURIComponent(message)}
-                <button class="log-close-btn">&times;</button>
-            </div>
-        `;
-
-        logBox.querySelector('.log-close-btn').onclick = () => {
-            logBox.classList.add('exiting');
-            setTimeout(() => {
-                logBox.remove();
-                activeLogs.delete(logBox);
-                updatePositions();
-            }, 300);
-        };
-
-        logBox.addEventListener('mouseenter', () =>
-            logBox.style.animationPlayState = 'paused');
-        logBox.addEventListener('mouseleave', () =>
-            logBox.style.animationPlayState = 'running');
-
-        document.body.appendChild(logBox);
-        activeLogs.add(logBox);
-
-        requestAnimationFrame(() => {
-            logBox.classList.add('active');
-            updatePositions();
-        });
-
-        setTimeout(() => {
-            logBox.classList.add('exiting');
-            setTimeout(() => {
-                logBox.remove();
-                activeLogs.delete(logBox);
-                updatePositions();
-            }, 300);
-        }, 12000);
-    };
-})();
-
-function togglePlay() {
-    if (isPlaying) {
-        audioPlayer.pause();
-        const pauseMessage = translations['pause_playing'] || 'Pause_Playing';
-        showLogMessage(pauseMessage);
-        speakMessage(pauseMessage);
-    } else {
-        audioPlayer.play();
-        const playMessage = translations['start_playing'] || 'Start_Playing';
-        showLogMessage(playMessage);
-        speakMessage(playMessage);
-    }
-    isPlaying = !isPlaying;
-    updatePlayButton();
-    savePlayerState();
-
-    const btn = event.target.closest('button');
-    if(btn) {
-        btn.classList.add('clicked');
-        setTimeout(() => btn.classList.remove('clicked'), 200);
-    }
-}
-
-function updatePlayButton() {
-    const btn = document.getElementById('playPauseBtn');
-    const floatingBtn = document.getElementById('floatingPlayBtn');
-    const icon = isPlaying ? 'bi-pause-fill' : 'bi-play-fill';
-    
-    btn.innerHTML = `<i class="bi ${icon}"></i>`;
-    floatingBtn.innerHTML = `<i class="bi ${icon}"></i>`;
-}
-
-function changeTrack(direction, isManual = false) {
-    const oldSong = songs[currentTrackIndex];
-    
-    if (repeatMode === 2 && !isManual) { 
-        currentTrackIndex = Math.floor(Math.random() * songs.length);
-    } else {
-        currentTrackIndex = (currentTrackIndex + direction + songs.length) % songs.length;
-    }
-
-    const songName = decodeURIComponent(
-        songs[currentTrackIndex].split('/').pop().replace(/\.\w+$/, '')
-    );
-
-    if (isManual) {
-        const action = direction === -1
-            ? translations['previous_track'] || 'Previous Track'
-            : translations['next_track'] || 'Next Track';
-        showLogMessage(`${translations['manual_switch'] || 'Manual Switch'}${action}：${songName}`);
-        speakMessage(`${translations['switch_to'] || 'Switch to'}${action}：${songName}`);
-    } else {
-        showLogMessage(`${translations['auto_switch'] || 'Auto Switch to'}：${songName}`);
-        speakMessage(`${translations['auto_play'] || 'Auto Play'}：${songName}`);
-    }
-
-    loadTrack(songs[currentTrackIndex]);
-}
-
-function toggleRepeat() {
-    repeatMode = (repeatMode + 1) % 3;
-    const mainBtn = document.getElementById('repeatBtn');
-    const floatingBtn = document.getElementById('floatingRepeatBtn');
-
-    [mainBtn, floatingBtn].forEach(btn => {
-        btn.classList.remove('btn-success', 'btn-warning');
-        btn.title = [
-            translations['order_play'] || 'Order_Play',
-            translations['single_loop'] || 'Single_Loop',
-            translations['shuffle_play'] || 'Shuffle_Play'
-        ][repeatMode];
-
-        switch (repeatMode) {
-            case 0:
-                btn.innerHTML = '<i class="bi bi-arrow-repeat"></i>';
-                break;
-            case 1:
-                btn.innerHTML = '<i class="bi bi-repeat-1"></i>';
-                btn.classList.add('btn-success');
-                break;
-            case 2:
-                btn.innerHTML = '<i class="bi bi-shuffle"></i>';
-                btn.classList.add('btn-warning');
-                break;
-        }
-    });
-
-    showLogMessage([
-        translations['order_play'] || 'Order_Play',
-        translations['single_loop'] || 'Single_Loop',
-        translations['shuffle_play'] || 'Shuffle_Play'
-    ][repeatMode]);
-    speakMessage([
-        translations['order_play'] || 'Order_Play',
-        translations['single_loop'] || 'Single_Loop',
-        translations['shuffle_play'] || 'Shuffle_Play'
-    ][repeatMode]);
-    savePlayerState();
-}
-
-function updatePlaylistUI() {
-    const playlist = document.getElementById('playlist');
-    playlist.innerHTML = songs.map((url, index) => `
-        <div class="playlist-item ${index === currentTrackIndex ? 'active' : ''}" 
-             onclick="playTrack(${index})">
-            ${decodeURIComponent(url.split('/').pop().replace(/\.\w+$/, ''))}
-        </div>
-    `).join('');
-    showLogMessage(`Playlist loaded: ${songs.length} songs`);
-    setTimeout(() => scrollToCurrentTrack(), 100);
-}
-
-function updatePlaylist() {
-    const btn = document.getElementById('updatePlaylistBtn');
-    const originalHTML = btn.innerHTML;
-    btn.innerHTML = '<i class="bi bi-arrow-repeat spinning"></i>';
-    
-    fetch('<?php echo $new_url; ?>')
-        .then(response => response.text())
-        .then(data => {
-            const newSongs = data.split('\n')
-                .filter(url => url.trim());
-            
-            songs = newSongs;
-            localStorage.setItem('cachedPlaylist', JSON.stringify(songs));
-            
-            if (currentTrackIndex >= songs.length) {
-                currentTrackIndex = 0;
-            }
-
-            updatePlaylistUI();
-            
-            if (songs.length > 0 && songs[currentTrackIndex]) {
-                loadTrack(songs[currentTrackIndex]);
-            }
-            
-            btn.innerHTML = originalHTML;
-            
-            const successMsg = translations['playlist_updated'] 
-                ? translations['playlist_updated'] 
-                : 'Playlist updated successfully';
-            const songCountMsg = translations['song_count'] 
-                ? translations['song_count'].replace('{count}', songs.length) 
-                : `Total ${songs.length} songs`;
-            
-            showLogMessage(`${successMsg}，${songCountMsg}`);
-            speakMessage(`${successMsg}，${songCountMsg}`);
-        })
-        .catch(error => {
-            console.error('Playlist update failed:', error);
-            
-            btn.innerHTML = '<i class="bi bi-x-circle"></i>';
-            setTimeout(() => {
-                btn.innerHTML = originalHTML;
-            }, 1000);
-            
-            const errorMsg = translations['update_failed'] 
-                ? translations['update_failed'] 
-                : 'Playlist update failed';
-            showLogMessage(errorMsg, 'error');
-            speakMessage(errorMsg);
-        });
-}
-
-function playTrack(index) {
-    const songName = decodeURIComponent(songs[index].split('/').pop().replace(/\.\w+$/, ''));
-    const message = `${translations['playlist_click'] || 'Playlist Click'}：${translations['index'] || 'Index'}：${index + 1}，${translations['song_name'] || 'Song Name'}：${songName}`;
-    audioPlayer.pause();
-    currentTrackIndex = index;
-    loadTrack(songs[index]);
-    
-    isPlaying = true;
-    audioPlayer.play().catch((error) => {
-        isPlaying = false;
-    });
-    
-    updatePlayButton();
-    savePlayerState();
-    showLogMessage(message);
-    speakMessage(message);
-    
-    event.target.classList.add('clicked');
-    setTimeout(() => event.target.classList.remove('clicked'), 200);
-}
-
-function scrollToCurrentTrack() {
-    const playlist = document.getElementById('playlist');
-    const activeItem = playlist.querySelector('.playlist-item.active');
-    if (activeItem) {
-        activeItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    }
-}
-
-function loadLyrics(songUrl) {
-    const lyricsUrl = songUrl.replace(/\.\w+$/, '.lrc');
-    
-    window.lyrics = {};
-    window.lyricTimes = [];
-    
-    const containers = [
-        document.getElementById('lyricsContainer'),
-        document.querySelector('#floatingLyrics .vertical-lyrics')
-    ];
-    
-    containers.forEach(container => {
-        const message = translations['loading_lyrics'] || 'Loading Lyrics...';
-        const verticalText = message.split('').map(char => `<span class="char">${char}</span>`).join('');
-    
-        const statusMsg = container.id === 'lyricsContainer' 
-            ? `<div id="no-lyrics">${message}</div>`
-            : `<div id="noLyricsFloating" class="vertical-message">${verticalText}</div>`;
-
-        container.innerHTML = statusMsg;
-    });
-
-    fetch(lyricsUrl)
-        .then(response => {
-            if (!response.ok) {
-                if (response.status === 404) {
-                    throw new Error('LYRICS_NOT_FOUND');
-                } else {
-                    throw new Error(`HTTP error! status: ${response.status}`);
-                }
-            }
-            return response.arrayBuffer();
-        })
-        .then(buffer => {
-            const decoder = new TextDecoder('utf-8');
-            parseLyrics(decoder.decode(buffer));
-            displayLyrics();
-            document.dispatchEvent(new Event('lyricsLoaded'));
-        })
-        .catch(error => {
-            if (error.message === 'LYRICS_NOT_FOUND') {
-                containers.forEach(container => {
-                    if (container.id === 'lyricsContainer') {
-                        container.innerHTML = `<div id="no-lyrics">${translations['no_lyrics'] || 'No Lyrics Available'}</div>`;
-                    } else {
-                        const message = translations['no_lyrics'] || 'No Lyrics Available';
-                        const verticalText = message.split('').map(char => `<span class="char">${char}</span>`).join('');
-                        container.innerHTML = `<div id="noLyricsFloating" class="vertical-text">${verticalText}</div>`;
-                    }
-                });
-            } else {
-                console.error(`${translations['lyrics_load_failed'] || 'Lyrics Load Failed'}:`, error);
-                containers.forEach(container => {
-                    if (container.id === 'lyricsContainer') {
-                        container.innerHTML = `<div id="no-lyrics">${translations['lyrics_load_failed'] || 'Failed to load lyrics'}</div>`;
-                    } else {
-                        const message = translations['lyrics_load_failed'] || 'Failed to load lyrics';
-                        const verticalText = message.split('').map(char => `<span class="char">${char}</span>`).join('');
-                        container.innerHTML = `<div id="noLyricsFloating" class="vertical-message">${verticalText}</div>`;
-                    }
-                });
-            }
-        });
-}
-
-function parseLyrics(text) {
-    window.lyrics = {};
-    window.lyricTimes = [];
-    const regex = /\[(\d+):(\d+)\.(\d+)\](.+)/g;
-    let match;
-    while ((match = regex.exec(text)) !== null) {
-        const time = parseInt(match[1]) * 60 + parseInt(match[2]) + parseInt(match[3])/1000;
-        const content = match[4].replace(/\[\d+:\d+\.\d+\]/g, '').trim();
-        lyrics[time] = content;
-        lyricTimes.push(time);
-    }
-    lyricTimes.sort((a, b) => a - b);
-}
-
-function tokenize(text) {
-    const tokens = [];
-    let currentWord = '';
-    
-    for (const char of text) {
-        if (/\s/.test(char)) {
-            if (currentWord) {
-                tokens.push(currentWord);
-                currentWord = '';
-            }
-            tokens.push({ type: 'space', value: char });
-            continue;
-        }
-
-        if (/[-–—]/.test(char)) {
-            if (currentWord) {
-                tokens.push(currentWord);
-                currentWord = '';
-            }
-            tokens.push({ type: 'punctuation', value: char });
-            continue;
-        }
-
-        if (/[a-zA-Z0-9]/.test(char)) {
-            currentWord += char;
-        } else {
-            if (currentWord) {
-                tokens.push(currentWord);
-                currentWord = '';
-            }
-            tokens.push({ type: 'char', value: char });
-        }
-    }
-
-    if (currentWord) tokens.push(currentWord);
-    return tokens;
-}
-
-function createCharSpans(text, startTime, endTime) {
-    const tokens = tokenize(text);
-    const totalDuration = endTime - startTime;
-    const charCount = text.replace(/\s/g, '').length; 
-    const durationPerChar = totalDuration / charCount;
-
-    let charIndex = 0;
-    const spans = [];
-
-    tokens.forEach(token => {
-        if (typeof token === 'string') { 
-            const wordSpan = document.createElement('span');
-            wordSpan.className = 'word';
-            const letters = token.split('');
-            
-            letters.forEach(letter => {
-                const span = document.createElement('span');
-                span.className = 'char';
-                span.textContent = letter;
-                span.dataset.start = startTime + charIndex * durationPerChar;
-                span.dataset.end = startTime + (charIndex + 1) * durationPerChar;
-                wordSpan.appendChild(span);
-                charIndex++;
-            });
-            
-            spans.push(wordSpan);
-        } else if (token.type === 'space') { 
-            const spaceSpan = document.createElement('span');
-            spaceSpan.className = 'char space';
-            spaceSpan.innerHTML = '&nbsp;';
-            spans.push(spaceSpan);
-        } else if (token.type === 'punctuation') { 
-            const punctSpan = document.createElement('span');
-            punctSpan.className = 'char punctuation';
-            punctSpan.textContent = token.value;
-            punctSpan.dataset.start = startTime + charIndex * durationPerChar;
-            punctSpan.dataset.end = startTime + (charIndex + 1) * durationPerChar;
-            spans.push(punctSpan);
-            charIndex++;
-        } else { 
-            const span = document.createElement('span');
-            span.className = 'char';
-            span.textContent = token.value;
-            span.dataset.start = startTime + charIndex * durationPerChar;
-            span.dataset.end = startTime + (charIndex + 1) * durationPerChar;
-            spans.push(span);
-            charIndex++;
-        }
-    });
-
-    return spans;
-}
-
-function isEnglishWord(text) {
-    return /^[a-zA-Z']+$/.test(text);
-}
-
-function createCharSpans(text, startTime, endTime) {
-    const elements = [];
-    const words = text.split(/(\s+)/); 
-    
-    let currentTime = startTime;
-    const totalDuration = endTime - startTime;
-    const validWords = words.filter(word => word.trim().length > 0);
-    const durationPerWord = totalDuration / validWords.length;
-
-    words.forEach(word => {
-        if (word.trim().length === 0) return;
-
-        const isEnglish = isEnglishWord(word.replace(/[^a-zA-Z']/g, ''));
-        const span = document.createElement('span');
-        span.className = 'char';
-        
-        if (isEnglish) {
-            span.textContent = word;
-            span.dataset.start = currentTime;
-            span.dataset.end = currentTime + durationPerWord;
-            currentTime += durationPerWord;
-        } else {
-            const chars = word.split('');
-            const charDuration = durationPerWord / chars.length;
-            chars.forEach((char, index) => {
-                const charSpan = document.createElement('span');
-                charSpan.className = 'char';
-                charSpan.textContent = char;
-                charSpan.dataset.start = currentTime + index * charDuration;
-                charSpan.dataset.end = currentTime + (index + 1) * charDuration;
-                elements.push(charSpan);
-            });
-            currentTime += durationPerWord;
-            return;
-        }
-        
-        elements.push(span);
-    });
-
-    return elements;
-}
-
-function displayLyrics() {
-    const lyricsContainer = document.getElementById('lyricsContainer');
-    const floatingLyrics = document.querySelector('#floatingLyrics .vertical-lyrics');
-    
-    lyricsContainer.innerHTML = '';
-    floatingLyrics.innerHTML = '';
-
-    if (Object.keys(window.lyrics).length === 0) {
-        const message = translations['no_lyrics'] || 'No Lyrics Available';
-        const verticalText = message.split('').map(char => `<span class="char">${char}</span>`).join('');
-    
-        lyricsContainer.innerHTML = `<div id="no-lyrics">${message}</div>`;
-        floatingLyrics.innerHTML = `<div id="noLyricsFloating" class="vertical-message">${verticalText}</div>`;
-        return;
-    }
-
-    lyricTimes.forEach((time, index) => {
-        const line = document.createElement('div');
-        line.className = 'lyric-line';
-        line.dataset.time = time;
-        
-        const endTime = index < lyricTimes.length - 1 
-                      ? lyricTimes[index + 1] 
-                      : time + 3; 
-        
-        const elements = createCharSpans(lyrics[time], time, endTime);
-        elements.forEach(element => line.appendChild(element));
-        lyricsContainer.appendChild(line);
-    });
-
-    audioPlayer.addEventListener('timeupdate', syncLyrics);
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-    const lyricsContainer = document.getElementById('lyricsContainer');
-    
-    lyricsContainer.addEventListener('mouseenter', () => {
-        isHovering = true;
-    });
-
-    lyricsContainer.addEventListener('mouseleave', () => {
-        isHovering = false;
-        isManualScroll = false;
-    });
-
-    lyricsContainer.addEventListener('scroll', () => {
-        if (isHovering) {
-            isManualScroll = true;
-            setTimeout(() => {
-                isManualScroll = false;
-            }, 3000); 
-        }
-    });
-
-    loadPlayerState();
-    updatePlaylistUI();
-});
-
-function syncLyrics() {
-    const currentTime = audioPlayer.currentTime;
-    const lyricsContainer = document.getElementById('lyricsContainer');
-    const lines = lyricsContainer.querySelectorAll('.lyric-line');
-    let currentLine = null;
-    let hasActiveLine = false;
-
-    lines.forEach(line => {
-    line.classList.remove('highlight', 'played');
-    line.style.color = 'white'; 
-    });
-
-    for (let i = lines.length - 1; i >= 0; i--) {
-        const line = lines[i];
-        const lineTime = parseFloat(line.dataset.time);
-        if (currentTime >= lineTime) {
-            line.classList.add('highlight');
-            currentLine = line;
-            hasActiveLine = true;
-            break;
-        }
-    }
-
-    if (currentLine) {
-        const chars = currentLine.querySelectorAll('.char');
-        chars.forEach(char => {
-            const start = parseFloat(char.dataset.start);
-            const end = parseFloat(char.dataset.end);
-
-            if (currentTime >= start && currentTime <= end) {
-                char.classList.add('active');
-            } else if (currentTime > end && !char.classList.contains('played')) {
-                char.classList.add('played');
-                spawnHeartAbove(char); 
-            }
-        });
-
-        const floatingContainer = document.getElementById('floatingLyrics');
-        const floatingLyrics = floatingContainer.querySelector('.vertical-lyrics');
-        if (!floatingLyrics.innerHTML || currentLine.dataset.time !== floatingLyrics.dataset.time) {
-            floatingLyrics.innerHTML = currentLine.innerHTML;
-            floatingLyrics.dataset.time = currentLine.dataset.time;
-            floatingLyrics.classList.add('enter-active');
-            setTimeout(() => floatingLyrics.classList.remove('enter-active'), 500);
-        }
-
-        const floatingChars = floatingLyrics.querySelectorAll('.char');
-        chars.forEach((char, index) => {
-            const floatingChar = floatingChars[index];
-            if (!floatingChar) return;
-
-            const start = parseFloat(char.dataset.start);
-            const end = parseFloat(char.dataset.end);
-            
-            if (currentTime >= start && currentTime <= end) {
-                floatingChar.classList.add('active');
-                const progress = (currentTime - start) / (end - start);
-                floatingChar.style.transform = `scale(${1 + progress * 0.2})`;
-            } else {
-                floatingChar.classList.remove('active');
-                floatingChar.style.transform = '';
-            }
-        });
-
-        if (!isSmallScreen && !isHovering && !isManualScroll) {
-            const lineRect = currentLine.getBoundingClientRect();
-            const containerRect = lyricsContainer.getBoundingClientRect();
-            const targetPosition = lineRect.top - containerRect.top + lyricsContainer.scrollTop - (lyricsContainer.clientHeight / 2) + (lineRect.height / 2);
-            
-            const buffer = 50;
-            if (lineRect.top < containerRect.top + buffer || 
-                lineRect.bottom > containerRect.bottom - buffer) {
-                lyricsContainer.scrollTo({ top: targetPosition, behavior: 'smooth' });
-            }
-        }
-
-        if (!hasActiveLine && lyricsContainer.scrollTop !== 0) {
-            lyricsContainer.scrollTo({ top: 0, behavior: 'smooth' });
-        }
-    }
-}
-
-function spawnHeartAbove(char) {
-    const heart = document.createElement('span');
-    heart.className = 'heart';
-    heart.textContent = '💖';
-
-    const rect = char.getBoundingClientRect();
-    const offsetTop = rect.top + window.scrollY;
-    const offsetLeft = rect.left + window.scrollX;
-
-    heart.style.left = `${offsetLeft + char.offsetWidth / 2}px`;
-    heart.style.top = `${offsetTop - 30}px`; 
-
-    document.body.appendChild(heart);
-
-    requestAnimationFrame(() => {
-        heart.classList.add('pop');
-    });
-
-    setTimeout(() => {
-        heart.remove(); 
-    }, 1000);
-}
-
-function loadTrack(url) {
-    window.lyrics = {};
-    window.lyricTimes = [];
-    
-    const lyricsContainers = [
-        document.getElementById('lyricsContainer'),
-        document.querySelector('#floatingLyrics .vertical-lyrics')
-    ];
-    
-    lyricsContainers.forEach(container => {
-        container.innerHTML = `<div class="no-lyrics">${translations['loading_lyrics'] || 'Loading Lyrics...'}</div>`;
-    });
-
-    audioPlayer.pause();
-    audioPlayer.src = url;
-    
-    audioPlayer.load();
-    audioPlayer.addEventListener('canplaythrough', () => {
-        audioPlayer.play().catch((error) => {
-            console.log(`${translations['autoplay_blocked'] || 'Autoplay Blocked'}:`, error);
-            showLogMessage(translations['click_to_play'] || 'Click play button to start');
-        });
-        isPlaying = true;
-        updatePlayButton();
-    }, { once: true });
-
-    updatePlayButton(); 
-    updatePlaylistUI();
-    loadLyrics(url);
-    updateCurrentSong(url);
-    updateTimeDisplay();
-    
-    savePlayerState();
-}
-
-function initializePlayer() {
-    audioPlayer.src = songs[currentTrackIndex] || '';
-    audioPlayer.currentTime = JSON.parse(localStorage.getItem('currentTime') || '0');
-    
-    audioPlayer.addEventListener('loadedmetadata', () => {
-        loadLyrics(songs[currentTrackIndex]); 
-        updateCurrentSong(songs[currentTrackIndex]);
-    });
-
-    updatePlayButton();
-    setRepeatButtonState();
-    updateTimeDisplay(true); 
-    
-    if (isPlaying) {
-        audioPlayer.play().catch((error) => {
-            console.log(`${translations['autoplay_blocked'] || 'Autoplay Blocked'}:`, error);
-            isPlaying = false;
-            saveCoreState();
-            updatePlayButton();
-        });
-    }
-}
-
-function saveCoreState() {
-    localStorage.setItem('cachedPlaylist', JSON.stringify(songs));
-    localStorage.setItem('currentTrackIndex', currentTrackIndex);
-    localStorage.setItem('isPlaying', isPlaying);
-    localStorage.setItem('repeatMode', repeatMode);
-    localStorage.setItem('currentTime', audioPlayer.currentTime);
-}
-
-function updateCurrentSong(url) {
-    const songName = decodeURIComponent(url.split('/').pop().replace(/\.\w+$/, ''));
-    document.getElementById('currentSong').textContent = songName;
-    
-    const floatingTitle = document.querySelector('#floatingLyrics #floatingCurrentSong');
-    if (floatingTitle) floatingTitle.textContent = songName;
-
-    const modalTitle = document.querySelector('#musicModal #currentSong');
-    if (modalTitle) modalTitle.textContent = songName;
-}
-
-function updateTimeDisplay() {
-    const currentTimeElement = document.getElementById('currentTime');
-    const durationElement = document.getElementById('duration');
-    const progressBar = document.getElementById('progressBar');
-
-    audioPlayer.addEventListener('timeupdate', () => {
-        const currentTime = audioPlayer.currentTime;
-        const duration = audioPlayer.duration || 0;
-        const progress = (currentTime / duration) * 100 || 0;
-
-        currentTimeElement.textContent = formatTime(currentTime);
-        durationElement.textContent = formatTime(duration);
-        progressBar.style.width = `${progress}%`;
-        progressBar.setAttribute('aria-valuenow', progress);
-    });
-
-    progressBar.parentElement.addEventListener('click', (e) => {
-        const rect = progressBar.parentElement.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const clickedPercent = (x / rect.width) * 100;
-        const newTime = (clickedPercent / 100) * audioPlayer.duration;
-        audioPlayer.currentTime = newTime;
-    });
-}
-
-function formatTime(seconds) {
-    const minutes = Math.floor(seconds / 60);
-    const remainingSeconds = Math.floor(seconds % 60);
-    return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
-}
-
-audioPlayer.addEventListener('ended', () => {
-    if (repeatMode === 1) {
-        audioPlayer.play();
-    } else {
-        changeTrack(1); 
-    }
-});
-
-function savePlayerState() {
-    localStorage.setItem('playerState', JSON.stringify({
-        isPlaying: isPlaying,
-        repeatMode: repeatMode,
-        currentTrackIndex: currentTrackIndex,
-        currentTime: audioPlayer.currentTime,
-        currentTrack: songs[currentTrackIndex]
-    }));
-}
-
-function loadPlayerState() {
-    const savedState = localStorage.getItem('playerState');
-    if (savedState) {
-        const state = JSON.parse(savedState);
-        isPlaying = state.isPlaying; 
-        repeatMode = state.repeatMode;
-        currentTrackIndex = state.currentTrackIndex || 0;
-        
-        if (state.currentTrack) {
-            audioPlayer.currentTime = state.currentTime;
-            setRepeatButtonState();
-        }
-    }
-}
-
-function setRepeatButtonState() {
-    const mainBtn = document.getElementById('repeatBtn');
-    const floatingBtn = document.getElementById('floatingRepeatBtn');
-    
-    [mainBtn, floatingBtn].forEach(btn => {
-        btn.classList.remove('btn-success', 'btn-warning');
-        btn.title = [
-            translations['order_play'] || 'Order_Play',
-            translations['single_loop'] || 'Single_Loop',
-            translations['shuffle_play'] || 'Shuffle_Play'
-        ][repeatMode];
-        
-        switch(repeatMode) {
-            case 1:
-                btn.classList.add('btn-success'); 
-                btn.innerHTML = '<i class="bi bi-repeat-1"></i>';
-                break;
-            case 2:
-                btn.classList.add('btn-warning'); 
-                btn.innerHTML = '<i class="bi bi-shuffle"></i>';
-                break;
-            default:
-                btn.innerHTML = '<i class="bi bi-arrow-repeat"></i>';
-        }
-    });
-}
-
-function loadDefaultPlaylist() {
-    fetch('<?php echo $new_url; ?>')
-        .then(response => response.text())
-        .then(data => {
-            const newSongs = data.split('\n').filter(url => url.trim());
-            
-            if (JSON.stringify(songs) !== JSON.stringify(newSongs)) {
-                songs = [...new Set([...songs, ...newSongs])];
-                currentTrackIndex = songs.findIndex(url => url === localStorage.getItem('currentTrack'));
-                if (currentTrackIndex === -1) currentTrackIndex = 0;
-                localStorage.setItem('cachedPlaylist', JSON.stringify(songs));
-            }
-            
-            updatePlaylistUI();
-            initializePlayer();
-            
-            if (songs[currentTrackIndex]) {
-                loadLyrics(songs[currentTrackIndex]);
-                updateCurrentSong(songs[currentTrackIndex]);
-            }
-        })
-        .catch(error => console.error('Playlist loading failed:', error));
-}
-
-function updatePlaylistUI() {
-    const playlist = document.getElementById('playlist');
-    playlist.innerHTML = songs.map((url, index) => `
-        <div class="playlist-item 
-            ${index === currentTrackIndex ? 'active' : ''}
-            ${!isPlaying && index === currentTrackIndex ? 'paused' : ''}" 
-            onclick="playTrack(${index})">
-            ${decodeURIComponent(url.split('/').pop().replace(/\.\w+$/, ''))}
-        </div>
-    `).join('');
-    setTimeout(() => {
-        const activeItem = playlist.querySelector('.active');
-        if (activeItem) {
-            const itemTop = activeItem.offsetTop;
-            const itemHeight = activeItem.offsetHeight;
-            const containerHeight = playlist.offsetHeight;
-
-            if (itemTop < playlist.scrollTop || 
-                itemTop + itemHeight > playlist.scrollTop + containerHeight) {
-                activeItem.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'center',
-                    inline: 'nearest'
-                });
-            }
-
-            activeItem.style.animation = 'none';
-        }
-    }, 300);
-}
-
-loadDefaultPlaylist();
-window.addEventListener('resize', () => {
-    isSmallScreen = window.innerWidth < 768;
-});
-</script>
-
-<script>
-  const muteToggle    = document.getElementById('muteToggle');
-  const volumeToggle  = document.getElementById('volumeToggle');
-  const volumePanel   = document.getElementById('volumePanel');
-  const volumeSlider  = document.getElementById('volumeSlider');
-  const muteIconEl    = muteToggle.querySelector('i');
-  const volumeIconEl  = volumeToggle.querySelector('i');
-
-  let lastVolume = 1;
-
-  const savedVolume = localStorage.getItem('audioVolume');
-  const savedMuted  = localStorage.getItem('audioMuted');
-  if (savedVolume !== null) {
-    lastVolume = parseFloat(savedVolume);
-  }
-  audioPlayer.volume = lastVolume;
-  volumeSlider.value = lastVolume;
-  audioPlayer.muted = (savedMuted === 'true');
-
-  updateVolumeIcon();
-
-  function togglePanel() {
-    const isVisible = volumePanel.classList.contains('show');
-    if (isVisible) {
-      volumePanel.classList.remove('show');
-      setTimeout(() => (volumePanel.style.display = 'none'), 200);
-    } else {
-      volumePanel.style.display = 'block';
-      setTimeout(() => volumePanel.classList.add('show'), 10);
-    }
-  }
-
-  function toggleMute() {
-    audioPlayer.muted = !audioPlayer.muted;
-    if (!audioPlayer.muted && audioPlayer.volume === 0) {
-      audioPlayer.volume = lastVolume;
-      volumeSlider.value = lastVolume;
-    }
-    localStorage.setItem('audioMuted', audioPlayer.muted);
-    updateVolumeIcon();
-
-    const muteMessage = audioPlayer.muted
-      ? (translations['mute_on']  || 'Audio muted')
-      : (translations['mute_off'] || 'Audio unmuted');
-    showLogMessage(muteMessage);
-    speakMessage(muteMessage);
-  }
-
-  function updateVolumeIcon() {
-    let cls;
-    if (audioPlayer.muted || audioPlayer.volume === 0) {
-      cls = 'bi bi-volume-mute-fill';
-    } else if (audioPlayer.volume < 0.5) {
-      cls = 'bi bi-volume-down-fill';
-    } else {
-      cls = 'bi bi-volume-up-fill';
-    }
-    muteIconEl.className = cls;
-    volumeIconEl.className = cls;
-
-    if (!audioPlayer.muted) {
-      lastVolume = audioPlayer.volume;
-      localStorage.setItem('audioVolume', lastVolume);
-    }
-  }
-
-  muteToggle.addEventListener('click', e => {
-    e.stopPropagation();
-    toggleMute();
-  });
-
-  volumeToggle.addEventListener('click', e => {
-    e.stopPropagation();
-    if (e.target === volumeIconEl) {
-      toggleMute();
-    } else {
-      togglePanel();
-    }
-  });
-
-  document.addEventListener('click', () => {
-    if (volumePanel.classList.contains('show')) {
-      volumePanel.classList.remove('show');
-      setTimeout(() => (volumePanel.style.display = 'none'), 200);
-    }
-  });
-
-  volumeSlider.addEventListener('input', e => {
-    const vol = Math.round(parseFloat(e.target.value) * 100);
-    audioPlayer.volume = e.target.value;
-    if (audioPlayer.muted) {
-      audioPlayer.muted = false;
-      localStorage.setItem('audioMuted', 'false');
-    }
-    updateVolumeIcon();
-
-    const volumeMessage = translations['volume_change']
-      ? translations['volume_change'].replace('{vol}', vol)
-      : `Volume adjusted to ${vol}%`;
-    showLogMessage(volumeMessage);
-    speakMessage(volumeMessage);
-  });
-
-  const speedToggle = document.getElementById('speedToggle');
-  const speedLabel = document.getElementById('speedLabel');
-  const speeds = [0.75, 1, 1.25, 1.5, 1.75, 2];
-  let speedIndex = 1;
-
-  const savedSpeed = localStorage.getItem('audioSpeed');
-  if (savedSpeed !== null) {
-    const idx = speeds.indexOf(parseFloat(savedSpeed));
-    if (idx !== -1) {
-      speedIndex = idx;
-    }
-  }
-
-  audioPlayer.playbackRate = speeds[speedIndex];
-  speedLabel.textContent = speeds[speedIndex] + '×';
-
-  function toggleSpeed() {
-    speedIndex = (speedIndex + 1) % speeds.length;
-    const rate = speeds[speedIndex];
-    audioPlayer.playbackRate = rate;
-    speedLabel.textContent = rate + '×';
-    localStorage.setItem('audioSpeed', rate);
-
-    const speedMessage = translations['speed_change']
-      ? translations['speed_change'].replace('{rate}', rate)
-      : `Playback speed changed to ${rate}x`;
-    showLogMessage(speedMessage);
-    speakMessage(speedMessage);
-  }
-
-  speedToggle.addEventListener('click', e => {
-    e.stopPropagation();
-    toggleSpeed();
-  });
-
-  speedToggle.addEventListener('click', e => e.stopPropagation());
-</script>
-
-<script>
-(function() {
-  const toggleBtns = document.querySelectorAll('.toggleFloatingLyricsBtn');
-  const box = document.getElementById('floatingLyrics');
-
-  const savedState = localStorage.getItem('floatingLyricsVisible') === 'true';
-  const savedLeft = localStorage.getItem('floatingLyricsLeft');
-  const savedTop = localStorage.getItem('floatingLyricsTop');
-
-  box.classList.toggle('visible', savedState);
-  box.style.resize = 'none';
-  box.style.overflow = 'auto';
-  box.style.position = 'absolute';
-
-  if (savedLeft && savedTop) {
-    box.style.left = savedLeft;
-    box.style.top = savedTop;
-  } else {
-    box.style.left = '20px';
-    box.style.top = '20px';
-  }
-
-  toggleBtns.forEach(btn => {
-    btn.addEventListener('click', e => {
-      e.stopPropagation();
-      const isNowVisible = box.classList.toggle('visible');
-      localStorage.setItem('floatingLyricsVisible', isNowVisible);
-
-      const msgKey = isNowVisible
-        ? 'floating_lyrics_enabled'
-        : 'floating_lyrics_disabled';
-      const message = translations[msgKey] ||
-        (isNowVisible
-          ? "Floating lyrics enabled"
-          : "Floating lyrics disabled");
-      showLogMessage(message);
-      speakMessage(message);
-    });
-  });
-
-  let isDragging = false, offsetX = 0, offsetY = 0;
-
-  box.addEventListener('mousedown', e => {
-    if (e.target.closest('.ctrl-btn')) return;
-    e.preventDefault();
-    isDragging = true;
-    offsetX = e.clientX - box.offsetLeft;
-    offsetY = e.clientY - box.offsetTop;
-  });
-
-  document.addEventListener('mousemove', e => {
-    if (!isDragging) return;
-    updatePosition(e.clientX, e.clientY);
-  });
-
-  document.addEventListener('mouseup', () => {
-    if (isDragging) {
-      isDragging = false;
-      savePosition();
-    }
-  });
-
-  let touchId = null;
-
-  box.addEventListener('touchstart', e => {
-    if (e.target.closest('.ctrl-btn')) return;
-    e.preventDefault();
-    const touch = e.touches[0];
-    touchId = touch.identifier;
-    offsetX = touch.clientX - box.offsetLeft;
-    offsetY = touch.clientY - box.offsetTop;
-  }, { passive: false });
-
-  document.addEventListener('touchmove', e => {
-    if (!touchId) return;
-    const touch = Array.from(e.touches).find(t => t.identifier === touchId);
-    if (!touch) return;
-    updatePosition(touch.clientX, touch.clientY);
-  }, { passive: false });
-
-  document.addEventListener('touchend', () => {
-    if (touchId) {
-      touchId = null;
-      savePosition();
-    }
-  });
-
-  function updatePosition(clientX, clientY) {
-    const newLeft = (clientX - offsetX) + 'px';
-    const newTop = (clientY - offsetY) + 'px';
-    box.style.left = newLeft;
-    box.style.top = newTop;
-  }
-
-  function savePosition() {
-    localStorage.setItem('floatingLyricsLeft', box.style.left);
-    localStorage.setItem('floatingLyricsTop', box.style.top);
-  }
-})();
-</script>
-
-<script>
-document.addEventListener('keydown', function (event) {
-    const target = event.target;
-    const isTyping = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
-
-    if (isTyping) return;
-
-    switch (event.code) {
-        case 'ArrowUp':
-            event.preventDefault();
-            document.querySelector('.toggleFloatingLyricsBtn')?.click();
-            break;
-        case 'Delete':
-          if (currentTrackIndex !== 0) {
-            currentTrackIndex = 0;
-            loadTrack(songs[0]);
-          }
-            const message = translations['back_to_first'] || 'Returned to the first song in the playlist';
-            showLogMessage(message);
-            speakMessage(message);
-            break;
-        case 'Insert':
-            document.getElementById('repeatBtn')?.click();
-            break;
-        case 'Home':
-            event.preventDefault();
-            document.querySelector('.panel-btn[data-bs-target="#musicModal"]')?.click();
-            break;
-        case 'Escape':
-            event.preventDefault();
-            const confirmText = document.getElementById('clearConfirmText')?.textContent.trim() || 'Are you sure you want to clear the config?';
-            showConfirmation(confirmText, () => {
-                document.getElementById('clear-cache-btn')?.click();
-            });
-            speakMessage(translations['clear_confirm'] || 'Are you sure you want to clear the configuration?');
-            break;
-    }
-});
-
-document.getElementById('goFirstBtn')?.addEventListener('click', function() {
-    if (currentTrackIndex !== 0) {
-        currentTrackIndex = 0;
-        loadTrack(songs[0]);
-    }
-    const message = translations['back_to_first'] || 'Returned to the first song in the playlist';
-    showLogMessage(message);
-    speakMessage(message);
-});
-</script>
-
-<script>
-const websites = [
-    'https://www.baidu.com/', 
-    'https://www.cloudflare.com/', 
-    'https://openai.com/',
-    'https://www.youtube.com/',
-    'https://www.google.com/',
-    'https://www.facebook.com/',
-    'https://www.twitter.com/',
-    'https://www.github.com/'
-];
-
-function getWebsiteStatusMessage(url, status) {
-    const statusMessages = translations['statusMessages'][url] || {};
-    
-    const message = status 
-        ? statusMessages['accessible'] || `${url} 网站访问正常。`
-        : statusMessages['notAccessible'] || `无法访问 ${url} 网站，请检查网络连接。`;
-
-    return message;
-}
-
-function checkWebsiteAccess(urls) {
-    const statusMessages = [];
-    let requestsCompleted = 0;
-
-    urls.forEach(url => {
-        fetch(url, { mode: 'no-cors' })
-            .then(response => {
-                const isAccessible = response.type === 'opaque';  
-                statusMessages.push(getWebsiteStatusMessage(url, isAccessible));
-            })
-            .catch(() => {
-                statusMessages.push(getWebsiteStatusMessage(url, false));
-            })
-            .finally(() => {
-                requestsCompleted++;
-                if (requestsCompleted === urls.length) {
-                    speakMessage(statusMessages.join(' '));  
-                    speakMessage(translations['websiteChecked']); 
-                }
-            });
-    });
-}
-
-let autoCheckInterval;
-let isAutoCheckEnabled = localStorage.getItem('autoCheckEnabled') === 'true';
-let userInteracted = localStorage.getItem('userInteracted') === 'true';
-
-function updateToggleIcon() {
-    const icon = document.getElementById('autoCheckIcon');
-    if (isAutoCheckEnabled) {
-        icon.classList.replace('bi-toggle-off', 'bi-toggle-on');
-    } else {
-        icon.classList.replace('bi-toggle-on', 'bi-toggle-off');
-    }
-}
-
-function startAutoCheck(shouldAnnounce = false) {
-    if (autoCheckInterval) clearInterval(autoCheckInterval);
-    autoCheckInterval = setInterval(() => {
-        if (userInteracted) {
-            speakMessage(translations['startCheck']);
-            showLogMessage(translations['startCheck']);
-        }
-        checkWebsiteAccess(websites);
-    }, 3600000);
-    
-    isAutoCheckEnabled = true;
-    localStorage.setItem('autoCheckEnabled', 'true');
-    updateToggleIcon();
-    
-    if (shouldAnnounce && userInteracted) {
-        const msg = translations['autoCheckEnabled'] || "Auto check enabled";
-        speakMessage(msg);
-        showLogMessage(msg);
-    }
-}
-
-function stopAutoCheck(shouldAnnounce = false) {
-    if (autoCheckInterval) {
-        clearInterval(autoCheckInterval);
-        autoCheckInterval = null;
-    }
-    
-    isAutoCheckEnabled = false;
-    localStorage.setItem('autoCheckEnabled', 'false');
-    updateToggleIcon();
-    
-    if (shouldAnnounce && userInteracted) {
-        const msg = translations['autoCheckDisabled'] || "Auto check disabled";
-        speakMessage(msg);
-        showLogMessage(msg);
-    }
-}
-
-document.addEventListener('click', function() {
-    if (!userInteracted) {
-        userInteracted = true;
-        localStorage.setItem('userInteracted', 'true');
-    }
-});
-
-document.getElementById('autoCheckIcon').addEventListener('click', function(event) {
-    event.stopPropagation();
-    if (isAutoCheckEnabled) {
-        stopAutoCheck(true);
-    } else {
-        startAutoCheck(true);
-    }
-});
-
-updateToggleIcon();
-if (isAutoCheckEnabled) {
-    startAutoCheck(false);
-}
-
-let isDetectionStarted = false;
-
-document.addEventListener('keydown', function(event) {
-    if (event.key === 'F8' && !isDetectionStarted) {  
-        event.preventDefault();  
-        speakMessage(translations['checkStarted']);
-        checkWebsiteAccess(websites);
-        isDetectionStarted = true;
-    }
-});
-
-document.getElementById('startCheckBtn').addEventListener('click', function() {
-    speakMessage(translations['checkStarted']);
-    checkWebsiteAccess(websites);
-});
-
-function speakTimeNow() {
-    const now = new Date();
-    let hour = now.getHours();
-    const minute = now.getMinutes();
-    const second = now.getSeconds();
-
-    if (minute !== 0 || second !== 0) return;
-
-    let lang = currentLang.split('-')[0];
-    let message = '';
-
-    if (lang === 'zh' || lang === 'zh-tw' || lang === 'hk') {
-        let period = '';
-        if (hour >= 0 && hour < 6) period = translations['periods']?.['earlyMorning'] || '凌晨';
-        else if (hour >= 6 && hour < 12) period = translations['periods']?.['morning'] || '早上';
-        else if (hour >= 12 && hour < 18) period = translations['periods']?.['afternoon'] || '下午';
-        else period = translations['periods']?.['evening'] || '晚上';
-
-        const template = translations['timeReport'] || "整点报时，现在是北京时间{period}{hour}点整";
-        message = template.replace("{period}", period).replace("{hour}", hour);
-    } else {
-        let period = 'AM';
-        if (hour >= 12) period = 'PM';
-        let displayHour = hour % 12;
-        displayHour = displayHour === 0 ? 12 : displayHour;
-
-        const template = translations['timeReport']?.[lang] || translations['timeReport']?.['en'] || "It is now {hour} {period}.";
-        message = template.replace("{hour}", displayHour).replace("{period}", period);
-    }
-
-    speakMessage(message);
-}
-
-setInterval(speakTimeNow, 1000);
-</script>
-<style>
-.animated-box {
-	width: 50px;
-	height: 50px;
-	margin: 10px;
-	background: linear-gradient(45deg, #ff6b6b, #ffd93d);
-	border-radius: 10px;
-	position: absolute;
-	animation: complex-animation 5s infinite alternate ease-in-out;
-	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
-}
-
-@keyframes complex-animation {
-	0% {
-		transform: rotate(0deg) scale(1);
-		background: linear-gradient(45deg, #ff6b6b, #ffd93d);
-	}
-
-	25% {
-		transform: rotate(45deg) scale(1.2);
-		background: linear-gradient(135deg, #42a5f5, #66bb6a);
-	}
-
-	50% {
-		transform: rotate(90deg) scale(0.8);
-		background: linear-gradient(225deg, #ab47bc, #ff7043);
-	}
-
-	75% {
-		transform: rotate(135deg) scale(1.5);
-		background: linear-gradient(315deg, #29b6f6, #8e24aa);
-	}
-
-	100% {
-		transform: rotate(180deg) scale(1);
-		background: linear-gradient(45deg, #ff6b6b, #ffd93d);
-	}
-}
-</style>
-
-<script>
-(function() {
-    let isAnimationActive = localStorage.getItem('animationActive') === 'true';
-    let intervalId;
-
-    function createAnimatedBox() {
-        const box = document.createElement('div');
-        box.className = 'animated-box';
-        document.body.appendChild(box);
-        const randomX = Math.random() * window.innerWidth;
-        const randomY = Math.random() * window.innerHeight;
-        box.style.left = randomX + 'px';
-        box.style.top = randomY + 'px';
-        const randomDuration = Math.random() * 3 + 3;
-        box.style.animationDuration = randomDuration + 's';
-        setTimeout(() => {
-            box.remove();
-        }, randomDuration * 1000);
-    }
-
-    function startAnimation() {
-        intervalId = setInterval(() => {
-            createAnimatedBox();
-        }, 1000);
-        localStorage.setItem('animationActive', 'true');
-        isAnimationActive = true;
-        updateButtonText();
-    }
-
-    function stopAnimation() {
-        clearInterval(intervalId);
-        localStorage.setItem('animationActive', 'false');
-        isAnimationActive = false;
-        updateButtonText();
-    }
-
-    function updateButtonText() {
-        document.getElementById('toggleAnimationBtn').innerText = isAnimationActive 
-            ? translations['toggleButton']['stop']
-            : translations['toggleButton']['start'];
-    }
-
-    window.addEventListener('keydown', function(event) {
-        if (event.ctrlKey && event.key === 'F10') {
-            isAnimationActive = !isAnimationActive;
-            if (isAnimationActive) {
-                startAnimation();
-                showLogMessage(translations['startAnimation']);
-                speakMessage(translations['startAnimation']);
-            } else {
-                stopAnimation();
-                    showLogMessage(translations['stopAnimation']);
-                    speakMessage(translations['stopAnimation']);
-            }
-        }
-    });
-
-    document.getElementById('toggleAnimationBtn').addEventListener('click', function() {
-        if (isAnimationActive) {
-            stopAnimation();
-                showLogMessage(translations['stopAnimation']);
-                speakMessage(translations['stopAnimation']);
-        } else {
-            startAnimation();
-                showLogMessage(translations['startAnimation']);
-                speakMessage(translations['startAnimation']);
-        }
-    });
-
-    if (isAnimationActive) {
-        startAnimation();
-    }
-    updateButtonText();
-    })();
-</script>
-
-<style>
-.snowflake {
-	position: absolute;
-	top: -10px;
-	width: 10px;
-	height: 10px;
-	background-color: white;
-	border-radius: 50%;
-	animation: fall linear infinite;
-}
-
-@keyframes fall {
-	0% {
-		transform: translateY(0) rotate(0deg);
-	}
-
-	100% {
-		transform: translateY(100vh) rotate(360deg);
-	}
-}
-
-.snowflake:nth-child(1) {
-	animation-duration: 8s;
-	animation-delay: -2s;
-	left: 10%;
-	width: 12px;
-	height: 12px;
-}
-
-.snowflake:nth-child(2) {
-	animation-duration: 10s;
-	animation-delay: -3s;
-	left: 20%;
-	width: 8px;
-	height: 8px;
-}
-
-.snowflake:nth-child(3) {
-	animation-duration: 12s;
-	animation-delay: -1s;
-	left: 30%;
-	width: 15px;
-	height: 15px;
-}
-
-.snowflake:nth-child(4) {
-	animation-duration: 9s;
-	animation-delay: -5s;
-	left: 40%;
-	width: 10px;
-	height: 10px;
-}
-
-.snowflake:nth-child(5) {
-	animation-duration: 11s;
-	animation-delay: -4s;
-	left: 50%;
-	width: 14px;
-	height: 14px;
-}
-
-.snowflake:nth-child(6) {
-	animation-duration: 7s;
-	animation-delay: -6s;
-	left: 60%;
-	width: 9px;
-	height: 9px;
-}
-
-.snowflake:nth-child(7) {
-	animation-duration: 8s;
-	animation-delay: -7s;
-	left: 70%;
-	width: 11px;
-	height: 11px;
-}
-
-.snowflake:nth-child(8) {
-	animation-duration: 10s;
-	animation-delay: -8s;
-	left: 80%;
-	width: 13px;
-	height: 13px;
-}
-
-.snowflake:nth-child(9) {
-	animation-duration: 6s;
-	animation-delay: -9s;
-	left: 90%;
-	width: 10px;
-	height: 10px;
-}
-</style>
-
-<script>
-    function createSnowflakes() {
-        for (let i = 0; i < 80; i++) {
-            let snowflake = document.createElement('div');
-            snowflake.classList.add('snowflake');
-                
-            let size = Math.random() * 10 + 5 + 'px';  
-            snowflake.style.width = size;
-            snowflake.style.height = size;
-                
-            let speed = Math.random() * 3 + 2 + 's'; 
-            snowflake.style.animationDuration = speed;
-
-            let rotate = Math.random() * 360 + 'deg'; 
-            let rotateSpeed = Math.random() * 5 + 2 + 's'; 
-            snowflake.style.animationName = 'fall';
-            snowflake.style.animationDuration = speed;
-            snowflake.style.animationTimingFunction = 'linear';
-            snowflake.style.animationIterationCount = 'infinite';
-
-            let leftPosition = Math.random() * 100 + 'vw';  
-            snowflake.style.left = leftPosition;
-
-            snowflake.style.animationDelay = Math.random() * 5 + 's';  
-
-            document.body.appendChild(snowflake);
-        }
-    }
-
-    function stopSnowflakes() {
-        let snowflakes = document.querySelectorAll('.snowflake');
-        snowflakes.forEach(snowflake => snowflake.remove());
-    }
-
-    function getSnowingState() {
-        return localStorage.getItem('isSnowing') === 'true';
-    }
-
-    function saveSnowingState(state) {
-        localStorage.setItem('isSnowing', state);
-    }
-
-    let isSnowing = getSnowingState();
-
-    if (isSnowing) {
-        createSnowflakes();  
-    }
-
-    function toggleSnowflakes() {
-        isSnowing = !isSnowing;
-        saveSnowingState(isSnowing);
-        if (isSnowing) {
-            createSnowflakes();
-            showLogMessage(translations['startSnowflakes']);
-            speakMessage(translations['startSnowflakes']);
-            document.getElementById('toggleSnowBtn').innerText = translations['toggleSnowButton']['stop'];
-        } else {
-            stopSnowflakes();
-            showLogMessage(translations['stopSnowflakes']);
-            speakMessage(translations['stopSnowflakes']);
-            document.getElementById('toggleSnowBtn').innerText = translations['toggleSnowButton']['start'];
-        }
-    }
-
-    window.addEventListener('keydown', function(event) {
-        if (event.ctrlKey && event.key === 'F6') {
-            toggleSnowflakes();
-        }
-    });
-
-    document.getElementById('toggleSnowBtn').addEventListener('click', toggleSnowflakes);
-
-    if (isSnowing) {
-        document.getElementById('toggleSnowBtn').innerText = translations['toggleSnowButton']['stop'];
-    }
-
-</script>
-
-<style>
-@keyframes lightPulse {
-	0% {
-		transform: scale(0.5);
-		opacity: 1;
-	}
-
-	50% {
-		transform: scale(1.5);
-		opacity: 0.7;
-	}
-
-	100% {
-		transform: scale(3);
-		opacity: 0;
-	}
-}
-
-.light-point {
-	position: fixed;
-	width: 10px;
-	height: 10px;
-	background: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.2));
-	border-radius: 50%;
-	pointer-events: none;
-	z-index: 9999;
-	animation: lightPulse 3s linear infinite;
-}
-</style>
-
-<script>
-(function () {
-    let isLightEffectActive = localStorage.getItem('lightEffectAnimation') === 'true';
-    let lightInterval;
-
-    function createLightPoint() {
-        const lightPoint = document.createElement('div');
-        lightPoint.className = 'light-point';
-
-        const posX = Math.random() * window.innerWidth;
-        const posY = Math.random() * window.innerHeight;
-
-        lightPoint.style.left = `${posX}px`;
-        lightPoint.style.top = `${posY}px`;
-
-        const colors = ['#ffcc00', '#00ccff', '#ff6699', '#99ff66', '#cc99ff'];
-        const randomColor = colors[Math.floor(Math.random() * colors.length)];
-        lightPoint.style.background = `radial-gradient(circle, ${randomColor}, rgba(255, 255, 255, 0.1))`;
-
-        document.body.appendChild(lightPoint);
-        setTimeout(() => {
-            lightPoint.remove();
-        }, 3000); 
-    }
-
-    function startLightEffect(showLog = true) {
-        if (lightInterval) clearInterval(lightInterval);
-        lightInterval = setInterval(createLightPoint, 200); 
-        localStorage.setItem('lightEffectAnimation', 'true');
-        if (showLog) {
-            showLogMessage(translations['startLightEffect']);
-            speakMessage(translations['startLightEffect']);
-        }
-        updateButtonText();
-    }
-
-    function stopLightEffect(showLog = true) {
-        clearInterval(lightInterval);
-        document.querySelectorAll('.light-point').forEach((light) => light.remove());
-        localStorage.setItem('lightEffectAnimation', 'false');
-        if (showLog) {
-            showLogMessage(translations['stopLightEffect']);
-            speakMessage(translations['stopLightEffect']);
-        }
-        updateButtonText();
-    }
-
-    function showNotification(message) {
-        const notification = document.createElement('div');
-        notification.style.position = 'fixed';
-        notification.style.top = '10px';
-        notification.style.right = '10px';
-        notification.style.padding = '10px';
-        notification.style.backgroundColor = '#4CAF50';
-        notification.style.color = '#fff';
-        notification.style.borderRadius = '5px';
-        notification.style.zIndex = 9999;
-        notification.textContent = message;
-
-        document.body.appendChild(notification);
-        setTimeout(() => {
-            notification.remove();
-        }, 3000);
-    }
-
-    function toggleLightEffect() {
-        isLightEffectActive = !isLightEffectActive;
-        if (isLightEffectActive) {
-            startLightEffect();
-        } else {
-            stopLightEffect();
-        }
-    }
-
-    window.addEventListener('keydown', function (event) {
-        if (event.ctrlKey && event.key === 'F11') {
-            toggleLightEffect();
-                }
-            });
-
-            document.getElementById('toggleLightEffectBtn').addEventListener('click', toggleLightEffect);
-
-            if (isLightEffectActive) {
-                document.getElementById('toggleLightEffectBtn').innerText = translations['toggleLightEffectButton']['stop'];
-            } else {
-                document.getElementById('toggleLightEffectBtn').innerText = translations['toggleLightEffectButton']['start'];
-            }
-        })();
-</script>
-
-<script>
-    document.addEventListener("DOMContentLoaded", function() {
-        feather.replace();
-    });
-</script>
-
-<style>
-
-@media (max-width: 767.98px) {
-	#musicModal .modal-dialog {
-		margin: 0.5rem;
-		max-width: calc(100% - 1rem);
-		max-height: 90vh;
-	}
-
-	#musicModal .modal-content {
-		max-height: 90vh;
-		display: flex;
-		flex-direction: column;
-	}
-
-	#musicModal .modal-body {
-		overflow-y: auto;
-		max-height: calc(90vh - 120px);
-		padding: 15px;
-	}
-
-	#musicModal #floatingLyrics {
-		font-size: 1.1rem;
-		padding: 8px 12px;
-		margin-bottom: 10px;
-	}
-
-	#musicModal #currentSong {
-		font-size: 1.1rem;
-		margin-bottom: 8px;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	#musicModal .lyrics-container {
-		height: 200px;
-		font-size: 0.95rem;
-		line-height: 1.6;
-		padding: 10px;
-		overflow-y: auto;
-	}
-
-	#musicModal .progress-container {
-		margin-top: 12px;
-	}
-
-	#musicModal .d-flex.justify-content-between {
-		font-size: 0.85rem;
-	}
-
-	#musicModal .controls {
-		display: flex;
-		flex-wrap: nowrap;
-		justify-content: space-between;
-		gap: 4px;
-		margin-top: 15px;
-		overflow-x: auto;
-		padding-bottom: 5px;
-	}
-
-	#musicModal .control-btn,
-        #musicModal .btn-volume {
-		width: 35px;
-		height: 35px;
-		min-width: 35px;
-		padding: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 1rem;
-	}
-
-	#musicModal #playPauseBtn {
-		width: 35px;
-		height: 35px;
-		min-width: 35px;
-		font-size: 1rem;
-	}
-
-	#musicModal .btn-volume {
-		position: relative;
-	}
-
-	#musicModal #volumePanel {
-		position: absolute;
-		bottom: 100%;
-		left: 50%;
-		transform: translateX(-50%);
-		width: 100px;
-		z-index: 10;
-		background: rgba(0, 0, 0, 0.8);
-		border-radius: 5px;
-		display: none;
-		padding: 8px;
-	}
-
-	#musicModal .btn-volume:hover #volumePanel,
-        #musicModal .btn-volume:focus-within #volumePanel {
-		display: block;
-	}
-
-	#musicModal .playlist {
-		margin-top: 15px;
-		max-height: 150px;
-		overflow-y: auto;
-	}
-
-	#musicModal .playlist-item {
-		padding: 6px 10px;
-		font-size: 0.9rem;
-	}
-
-	#musicModal .modal-footer {
-		padding: 10px 15px;
-	}
-
-	#musicModal .modal-footer .btn {
-		padding: 5px 10px;
-		font-size: 0.85rem;
-	}
-
-	#musicModal .modal-body::-webkit-scrollbar,
-        #musicModal .lyrics-container::-webkit-scrollbar,
-        #musicModal .playlist::-webkit-scrollbar {
-		width: 6px;
-	}
-
-	#musicModal .modal-body::-webkit-scrollbar-track,
-        #musicModal .lyrics-container::-webkit-scrollbar-track,
-        #musicModal .playlist::-webkit-scrollbar-track {
-		background: rgba(0, 0, 0, 0.1);
-	}
-
-	#musicModal .modal-body::-webkit-scrollbar-thumb,
-        #musicModal .lyrics-container::-webkit-scrollbar-thumb,
-        #musicModal .playlist::-webkit-scrollbar-thumb {
-		background: #4ecca3;
-		border-radius: 3px;
-	}
-}
-</style>
-
-<script>
-document.addEventListener('DOMContentLoaded', () => {
-    function initializeStyles() {
-        const containerWidth = localStorage.getItem('containerWidth') || 1600;
-        const modalMaxWidth = localStorage.getItem('modalMaxWidth') || 1100;
-        document.documentElement.style.setProperty('--container-width', `${containerWidth}px`);
-        document.documentElement.style.setProperty('--modal-max-width', `${modalMaxWidth}px`);
-    }
-
-    initializeStyles();
-
-    const slider = document.getElementById("containerWidth");
-    const widthValue = document.getElementById("widthValue");
-    const modalSlider = document.getElementById("modalMaxWidth");
-    const modalWidthValue = document.getElementById("modalWidthValue");
-
-    slider.value = localStorage.getItem('containerWidth') || 1600;
-    modalSlider.value = localStorage.getItem('modalMaxWidth') || 1100;
-
-    function updateSliderColor(value, slider, valueElement) {
-        let red = Math.min(Math.max((value - 800) / (5400 - 800) * 255, 0), 255);
-        let green = 255 - red;
-        slider.style.background = `linear-gradient(to right, rgb(${red}, ${green}, 255), rgb(${255 - red}, ${green}, ${255 - red}))`;
-        slider.style.setProperty('--thumb-color', `rgb(${red}, ${green}, 255)`);
-        const currentWidthText = translations && translations['current_width'] 
-            ? translations['current_width'] 
-            : 'Current Width';
-        valueElement.textContent = `${currentWidthText}: ${value}px`;
-        valueElement.style.color = `rgb(${red}, ${green}, 255)`;
-    }
-
-    updateSliderColor(slider.value, slider, widthValue);
-    updateSliderColor(modalSlider.value, modalSlider, modalWidthValue);
-
-    slider.oninput = function () {
-        updateSliderColor(slider.value, slider, widthValue);
-        localStorage.setItem('containerWidth', slider.value);
-        document.documentElement.style.setProperty('--container-width', `${slider.value}px`);
-        const msg = translations['page_width_updated'].replace('%s', slider.value);
-        showLogMessage(msg);
-        if (typeof speakMessage === 'function') speakMessage(msg);
-    };
-
-    modalSlider.oninput = function () {
-        updateSliderColor(modalSlider.value, modalSlider, modalWidthValue);
-        localStorage.setItem('modalMaxWidth', modalSlider.value);
-        document.documentElement.style.setProperty('--modal-max-width', `${modalSlider.value}px`);
-        const msg = translations['modal_width_updated'].replace('%s', modalSlider.value);
-        showLogMessage(msg);
-        if (typeof speakMessage === 'function') speakMessage(msg);
-    };
-
-    const savedColor = localStorage.getItem('themeBackgroundColor') || '';
-    const preview = document.getElementById('color-preview');
-    const selector = document.getElementById('color-selector');
-    const input = document.getElementById('color-input');
-    const colorBlock = document.getElementById('current-color-block');
-
-    preview.style.background = savedColor;
-    selector.value = savedColor;
-    input.value = savedColor;
-    colorBlock.style.background = savedColor;
-    applyCustomBackgroundColor(savedColor);
-
-    selector.addEventListener('input', e => {
-        const color = e.target.value;
-        preview.style.background = color;
-        input.value = color;
-        colorBlock.style.background = color;
-    });
-
-    input.addEventListener('input', e => {
-        const color = e.target.value;
-        if (isValidColor(color)) {
-            preview.style.background = color;
-            selector.value = color;
-            colorBlock.style.background = color;
-        }
-    });
-
-    colorBlock.addEventListener('click', () => {
-        const color = selector.value;
-        preview.style.background = color;
-        input.value = color;
-        applyCustomBackgroundColor(color);
-    });
-
-    document.getElementById('apply-color').addEventListener('click', () => {
-        const color = document.getElementById('color-input').value;
-        if (isValidColor(color)) {
-            applyCustomBackgroundColor(color);
-            const successMsgTemplate = translations['apply_color_success'] || 'Background color %s has been applied successfully.';
-            const successMsg = successMsgTemplate.replace('%s', color);
-            if (typeof showLogMessage === 'function') showLogMessage(successMsg);
-            if (typeof speakMessage === 'function') speakMessage(successMsg);
-        } else {
-            const invalidMsg = translations['invalid_color'] || 'The color entered is invalid.';
-            if (typeof showLogMessage === 'function') showLogMessage(invalidMsg);
-            if (typeof speakMessage === 'function') speakMessage(invalidMsg);
-        }
-    });
-
-    document.getElementById('reset-color').addEventListener('click', () => {
-        resetCustomBackgroundColor();
-        const defaultColor = '';
-        preview.style.background = defaultColor;
-        selector.value = defaultColor;
-        input.value = defaultColor;
-        colorBlock.style.background = defaultColor;
-        const successMsg = translations['reset_color_success'] || 'Background color has been reset to default.';
-        if (typeof showLogMessage === 'function') showLogMessage(successMsg);
-        if (typeof speakMessage === 'function') speakMessage(successMsg);
-    });
-
-    generateColorPresets();
-    window.addEventListener('resize', generateColorPresets);
-
-    document.querySelectorAll('input[type=range]').forEach(range => {
-        updateRangeBackground(range);
-        range.addEventListener('input', () => updateRangeBackground(range));
-    });
-});
-
-function isValidColor(str) {
-    const s = new Option().style;
-    s.color = str;
-    return s.color !== '';
-}
-
-function applyCustomBackgroundColor(color) {
-    document.body.style.background = color;
-    localStorage.setItem('themeBackgroundColor', color);
-}
-
-function resetCustomBackgroundColor() {
-    document.body.style.background = '';
-    localStorage.removeItem('themeBackgroundColor');
-}
-
-function generateColorPresets() {
-    const presets = [
-        '#0f3460', '#0f172a', '#1e293b', '#1e3a8a', '#1d4ed8', '#2563eb',
-        '#3b82f6', '#1e40af', '#3730a3', '#4c1d95', '#5b21b6', '#6d28d9',
-        '#7c3aed', '#0369a1', '#0284c7', '#0ea5e9', '#38bdf8', '#7dd3fc',
-        '#bae6fd', '#1d4ed8', '#60a5fa', '#93c5fd', '#bfdbfe',
-        '#064e3b', '#047857', '#059669', '#10b981', '#34d399', '#6ee7b7',
-        '#a7f3d0', '#d1fae5', '#166534', '#22c55e',
-        '#854d0e', '#a16207', '#ca8a04', '#eab308', '#facc15', '#fde047',
-        '#fef08a', '#fef9c3', '#ea580c', '#f97316', '#fb923c', '#fdba74',
-        '#7f1d1d', '#b91c1c', '#dc2626', '#ef4444', '#f87171', '#fca5a5',
-        '#fecaca', '#fee2e2', '#9d174d', '#be185d', '#db2777', '#ec4899',
-        '#581c87', '#6b21a8', '#7e22ce', '#9333ea', '#a855f7', '#c084fc',
-        '#d8b4fe', '#e9d5ff', '#5b21b6', '#7c3aed',
-        '#111827', '#1f2937', '#374151', '#4b5563', '#6b7280', '#9ca3af',
-        '#d1d5db', '#e5e7eb', '#f3f4f6', '#f9fafb', '#ffffff',
-        '#134e4a', '#0d9488', '#14b8a6', '#2dd4bf', '#5eead4', '#99f6e4',
-        '#ccfbf1', '#ecfdf5', '#0891b2', '#06b6d4',
-        '#4338ca', '#4f46e5', '#6366f1', '#8b5cf6', '#a855f7', '#d946ef',
-        '#ec4899', '#f43f5e', '#ef4444', '#f97316', '#f59e0b', '#eab308'
-    ];
-
-    const container = document.getElementById('preset-colors');
-    container.innerHTML = '';
-    container.style.gridTemplateColumns = window.innerWidth < 768 ? 'repeat(10, 1fr)' : 'repeat(15, 1fr)';
-
-    presets.forEach(color => {
-        const div = document.createElement('div');
-        div.className = 'color-preset rounded';
-        div.style.background = color;
-        div.style.height = '30px';
-        div.style.cursor = 'pointer';
-        div.title = color;
-        div.style.border = '2px solid transparent';
-        div.addEventListener('click', () => {
-            document.getElementById('color-preview').style.background = color;
-            document.getElementById('color-selector').value = color;
-            document.getElementById('color-input').value = color;
-            document.getElementById('current-color-block').style.background = color;
-            applyCustomBackgroundColor(color);
-            const msgTemplate = translations['apply_color_success'] || 'Background color %s has been applied successfully.';
-            const msg = msgTemplate.replace('%s', color);
-            if (typeof showLogMessage === 'function') showLogMessage(msg);
-            if (typeof speakMessage === 'function') speakMessage(msg);
-        });
-        container.appendChild(div);
-    });
-}
-
-function updateRangeBackground(range) {
-    const val = range.value;
-    const min = range.min ? range.min : 0;
-    const max = range.max ? range.max : 100;
-    const percent = (val - min) / (max - min) * 100;
-    range.style.background = `linear-gradient(to right, #00ff00 0%, #00ff00 ${percent}%, #ffffff ${percent}%, #ffffff 100%)`;
-}
-</script>
-
-<script>
-document.addEventListener("DOMContentLoaded", () => {
-  const colorModal = new bootstrap.Modal(document.getElementById('colorModal'));
-  let currentHue = 260, currentChroma = 0.10, currentLightness = 30;
-  let recentColors = [];
-
-  function hexToRgb(hex) {
-    const fullHex = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, 
-      (_, r, g, b) => `#${r}${r}${g}${g}${b}${b}`);
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(fullHex);
-    return result ? {
-      r: parseInt(result[1], 16),
-      g: parseInt(result[2], 16),
-      b: parseInt(result[3], 16)
-    } : { r: 0, g: 0, b: 0 };
-  }
-
-  function rgbToLinear(c) {
-    const normalized = c / 255;
-    return normalized <= 0.04045 
-      ? normalized / 12.92 
-      : Math.pow((normalized + 0.055) / 1.055, 2.4);
-  }
-
-  function rgbToOklch(r, g, b) {
-    const [lr, lg, lb] = [r, g, b].map(rgbToLinear);
-    const l = 0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb;
-    const m = 0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb;
-    const s = 0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb;
-    const l_ = Math.cbrt(l);
-    const m_ = Math.cbrt(m);
-    const s_ = Math.cbrt(s);
-    const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
-    const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
-    const b_ = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;
-    const c = Math.sqrt(a ** 2 + b_ ** 2);
-    let h = Math.atan2(b_, a) * 180 / Math.PI;
-    h = h >= 0 ? h : h + 360;
-    return { l: L * 100, c: c, h: h };
-  }
-
-  function hexToOklch(hex) {
-    const { r, g, b } = hexToRgb(hex);
-    return rgbToOklch(r, g, b);
-  }
-
-  function oklchToHex(h, c, l = 50) {
-    const L = l / 100;
-    const a = c * Math.cos(h * Math.PI / 180);
-    const b = c * Math.sin(h * Math.PI / 180);
-    const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
-    const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
-    const s_ = L - 0.0894841775 * a - 1.2914855480 * b;
-    const [lr, lg, lb] = [l_, m_, s_].map(v => v ** 3);
-    const r = 4.0767416621 * lr - 3.3077115913 * lg + 0.2309699292 * lb;
-    const g = -1.2684380046 * lr + 2.6097574011 * lg - 0.3413193965 * lb;
-    const bLinear = -0.0041960863 * lr - 0.7034186147 * lg + 1.7076147010 * lb;
-    const toSRGB = (v) => {
-      v = Math.min(Math.max(v, 0), 1);
-      return v > 0.0031308 
-        ? 1.055 * (v ** (1/2.4)) - 0.055 
-        : 12.92 * v;
-    };
-    const [R, G, B] = [r, g, bLinear].map(v => Math.round(toSRGB(v) * 255));
-    return `#${[R, G, B].map(x => x.toString(16).padStart(2, '0')).join('')}`.toUpperCase();
-  }
-
-  function updateTextPrimary(currentL) {
-    const textL = currentL > 60 ? 20 : 95;
-    document.documentElement.style.setProperty('--text-primary', `oklch(${textL}% 0 0)`);
-    document.body.offsetHeight;
-  }
-
-  function updateColorPreview() {
-    const hexColor = oklchToHex(currentHue, currentChroma, currentLightness);
-    document.getElementById('colorPreview').style.backgroundColor = hexColor;
-    const contrastRatio = calculateContrast(hexColor);
-    document.getElementById('contrastRatio').textContent = contrastRatio;
-    updateContrastRating(parseFloat(contrastRatio.split(':')[0]));
-    document.getElementById('oklchValue').textContent = `OKLCH(${currentLightness.toFixed(0)}%, ${currentChroma.toFixed(2)}, ${Math.round(currentHue)}°)`;
-  }
-
-  function calculateContrast(hexColor) {
-    const rgb = hexToRgb(hexColor);
-    const luminance = (0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b) / 255;
-    const textLuminance = luminance > 0.5 ? 0 : 1;
-    const contrast = (Math.max(luminance, textLuminance) + 0.05) / (Math.min(luminance, textLuminance) + 0.05);
-    return contrast.toFixed(2) + ":1";
-  }
-
-  function updateContrastRating(contrast) {
-    const container = document.getElementById('contrastRating');
-    let icon = '';
-    if (contrast >= 7) {
-      icon = '<i class="bi bi-check-circle-fill"></i> ';
-      container.className = "mt-1 text-success fw-bold";
-      container.innerHTML = `${icon}${translations['excellent_aaa'] || 'Excellent (AAA)'}`;
-    } else if (contrast >= 4.5) {
-      icon = '<i class="bi bi-check-circle"></i> ';
-      container.className = "mt-1 text-primary fw-bold";
-      container.innerHTML = `${icon}${translations['good_aa'] || 'Good (AA)'}`;
-    } else {
-      icon = '<i class="bi bi-exclamation-triangle-fill"></i> ';
-      container.className = "mt-1 text-danger fw-bold";
-      container.innerHTML = `${icon}${translations['poor_needs_improvement'] || 'Needs Improvement'}`;
-    }
-  }
-
-  function adjustHue(amount) {
-    currentHue = (currentHue + amount + 360) % 360;
-    document.getElementById('hueSlider').value = currentHue;
-    document.getElementById('hueValue').textContent = Math.round(currentHue) + '°';
-    updateColorPreview();
-  }
-
-  function addToRecentColors(color) {
-    recentColors = recentColors.filter(c => c !== color);
-    recentColors.unshift(color);
-  
-    if (recentColors.length > 10) {
-      recentColors.pop();
-    }
-  
-    updateRecentColors();
-    localStorage.setItem('appColorSettings', JSON.stringify({
-      recentColors,
-      hue: currentHue,
-      chroma: currentChroma,
-      lightness: currentLightness
-    }));
-  }
-
-  function updateRecentColors() {
-    const container = document.getElementById('recentColors');
-    container.innerHTML = '';
-    recentColors.forEach(color => {
-      const swatch = document.createElement('button');
-      swatch.className = 'btn btn-sm p-2';
-      swatch.style.backgroundColor = color;
-      swatch.style.width = '30px';
-      swatch.style.height = '30px';
-      swatch.title = color;
-      swatch.addEventListener('click', function() {
-        const { h, c, l } = hexToOklch(color);
-        document.getElementById('hueSlider').value = h;
-        document.getElementById('chromaSlider').value = c;
-        document.getElementById('lightnessSlider').value = l;
-        document.getElementById('hueValue').textContent = Math.round(h) + '°';
-        document.getElementById('chromaValue').textContent = c.toFixed(2);
-        document.getElementById('lightnessValue').textContent = l + '%';
-        currentHue = h;
-        currentChroma = c;
-        currentLightness = l;
-        updateColorPreview();
-        document.getElementById('colorPicker').value = color;
-        document.documentElement.style.setProperty('--base-hue', currentHue);
-        document.documentElement.style.setProperty('--base-chroma', currentChroma);
-        updateTextPrimary(currentLightness);
-        addToRecentColors(color);
-      });
-      container.appendChild(swatch);
-    });
-  }
-
-  function initRecentColors() {
-      const savedSettings = localStorage.getItem('appColorSettings');
-      let initialTheme = 'dark';
-      if (savedSettings) {
-          const settings = JSON.parse(savedSettings);
-          recentColors = settings.recentColors || [];
-          if (recentColors.length > 10) {
-              recentColors = recentColors.slice(0, 10);
-          }
-          currentHue = settings.hue || 260;
-          currentChroma = settings.chroma || 0.10;
-          currentLightness = settings.lightness || 30;
-          initialTheme = currentLightness > 60 ? 'light' : 'dark';
-      } else {
-          recentColors = [
-              '#4d79ff', '#ff4d94', '#4dff88', '#ffb84d', 
-              '#bf4dff', '#ff6b6b', '#4eca9e', '#ff9ff3',
-              '#6c757d', '#ffc107'
-          ];
-      }
-      document.documentElement.setAttribute('data-theme', initialTheme);
-      document.getElementById('lightnessSlider').value = currentLightness;
-      document.getElementById('lightnessValue').textContent = currentLightness + '%';
-      updateColorPreview();
-      updateTextPrimary(currentLightness);
-      updateRecentColors();
-  }
-
-  const picker = document.getElementById("colorPicker");
-  picker.addEventListener('input', (event) => {
-    const color = event.target.value;
-    const { h, c, l } = hexToOklch(color);
-    currentHue = h;
-    currentChroma = c;
-    currentLightness = l;
-    
-    document.getElementById('hueSlider').value = h;
-    document.getElementById('chromaSlider').value = c;
-    document.getElementById('lightnessSlider').value = l;
-    document.getElementById('hueValue').textContent = Math.round(h) + '°';
-    document.getElementById('chromaValue').textContent = c.toFixed(2);
-    document.getElementById('lightnessValue').textContent = l + '%';
-    
-    const theme = l > 60 ? 'light' : 'dark';
-    document.documentElement.setAttribute('data-theme', theme);
-    
-    updateColorPreview();
-    document.documentElement.style.setProperty('--base-hue', currentHue);
-    document.documentElement.style.setProperty('--base-chroma', currentChroma);
-    updateTextPrimary(currentLightness);
-    addToRecentColors(color);
-  });
-
-  document.getElementById('advancedColorBtn').addEventListener('click', () => {
-    document.getElementById('hueSlider').value = currentHue;
-    document.getElementById('chromaSlider').value = currentChroma;
-    document.getElementById('lightnessSlider').value = currentLightness;
-    document.getElementById('hueValue').textContent = Math.round(currentHue) + '°';
-    document.getElementById('chromaValue').textContent = currentChroma.toFixed(2);
-    document.getElementById('lightnessValue').textContent = currentLightness + '%';
-    updateColorPreview();
-    colorModal.show();
-  });
-
-  document.getElementById('hueSlider').addEventListener('input', function() {
-    currentHue = parseFloat(this.value);
-    document.getElementById('hueValue').textContent = Math.round(currentHue) + '°';
-    updateColorPreview();
-    document.getElementById('colorPicker').value = oklchToHex(currentHue, currentChroma, currentLightness);
-    document.documentElement.style.setProperty('--base-hue', currentHue);
-    updateTextPrimary(currentLightness);
-  });
-
-  document.getElementById('chromaSlider').addEventListener('input', function() {
-    currentChroma = parseFloat(this.value);
-    document.getElementById('chromaValue').textContent = currentChroma.toFixed(2);
-    updateColorPreview();
-    document.getElementById('colorPicker').value = oklchToHex(currentHue, currentChroma, currentLightness);
-    document.documentElement.style.setProperty('--base-chroma', currentChroma);
-    updateTextPrimary(currentLightness);
-  });
-
-  document.getElementById('lightnessSlider').addEventListener('input', function() {
-    currentLightness = parseFloat(this.value);
-    document.getElementById('lightnessValue').textContent = currentLightness + '%';
-    updateColorPreview();
-    document.getElementById('colorPicker').value = oklchToHex(currentHue, currentChroma, currentLightness);
-    updateTextPrimary(currentLightness);
-
-    const theme = currentLightness > 60 ? 'light' : 'dark';
-    document.documentElement.setAttribute('data-theme', theme);
-  });
-
-  document.querySelectorAll('[data-h]').forEach(button => {
-    button.addEventListener('click', function() {
-      currentHue = parseFloat(this.dataset.h);
-      currentChroma = parseFloat(this.dataset.c);
-      currentLightness = parseFloat(this.dataset.l);
-      document.getElementById('hueSlider').value = currentHue;
-      document.getElementById('chromaSlider').value = currentChroma;
-      document.getElementById('lightnessSlider').value = currentLightness;
-      document.getElementById('hueValue').textContent = Math.round(currentHue) + '°';
-      document.getElementById('chromaValue').textContent = currentChroma.toFixed(2);
-      document.getElementById('lightnessValue').textContent = currentLightness + '%';
-      addToRecentColors(oklchToHex(currentHue, currentChroma, currentLightness));
-      updateColorPreview();
-      document.getElementById('colorPicker').value = oklchToHex(currentHue, currentChroma, currentLightness);
-      document.documentElement.style.setProperty('--base-hue', currentHue);
-      document.documentElement.style.setProperty('--base-chroma', currentChroma);
-      updateTextPrimary(currentLightness);
-    });
-  });
-
-  document.getElementById('applyColorBtn').addEventListener('click', function() {
-      const settings = {
-          hue: currentHue,
-          chroma: currentChroma,
-          lightness: currentLightness,
-          recentColors: recentColors || []
-      };
-      localStorage.setItem('appColorSettings', JSON.stringify(settings));
-
-      document.documentElement.style.setProperty('--base-hue', currentHue);
-      document.documentElement.style.setProperty('--base-chroma', currentChroma);
-      document.getElementById('colorPicker').value = oklchToHex(currentHue, currentChroma, currentLightness);
-      updateTextPrimary(currentLightness);
-
-      const hexColor = oklchToHex(currentHue, currentChroma, currentLightness);
-      const successMsg = (translations['apply_color_success'] || 'Background color %s has been applied successfully.').replace('%s', hexColor);
-      if (typeof showLogMessage === 'function') showLogMessage(successMsg);
-      if (typeof speakMessage === 'function') speakMessage(successMsg);
-
-      colorModal.hide();
-  });
-
-  document.getElementById('resetColorBtn').addEventListener('click', function() {
-      currentHue = 260;
-      currentChroma = 0.10;
-      currentLightness = 30;
-      document.getElementById('hueSlider').value = currentHue;
-      document.getElementById('chromaSlider').value = currentChroma;
-      document.getElementById('lightnessSlider').value = currentLightness;
-      document.getElementById('hueValue').textContent = currentHue + '°';
-      document.getElementById('chromaValue').textContent = currentChroma.toFixed(2);
-      document.getElementById('lightnessValue').textContent = currentLightness + '%';
-      updateColorPreview();
-      document.getElementById('colorPicker').value = oklchToHex(currentHue, currentChroma, currentLightness);
-      document.documentElement.style.setProperty('--base-hue', currentHue);
-      document.documentElement.style.setProperty('--base-chroma', currentChroma);
-      updateTextPrimary(currentLightness);
-
-      const resetMsg = translations['reset_color_success'] || 'Application color settings have been reset to default.';
-      if (typeof showLogMessage === 'function') showLogMessage(resetMsg);
-      if (typeof speakMessage === 'function') speakMessage(resetMsg);
-  });
-
-  initRecentColors();
-  const savedSettings = localStorage.getItem('appColorSettings');
-  if (savedSettings) {
-    const settings = JSON.parse(savedSettings);
-    document.documentElement.style.setProperty('--base-hue', settings.hue || 260);
-    document.documentElement.style.setProperty('--base-chroma', settings.chroma || 0.10);
-    document.getElementById('colorPicker').value = oklchToHex(settings.hue || 260, settings.chroma || 0.10, settings.lightness || 30);
-    updateTextPrimary(settings.lightness || 30);
-  }
-});
-
-document.getElementById('removeAppColorBtn').addEventListener('click', function() {
-    const confirmMsg = translations['confirm_reset_color'] || 'Are you sure you want to reset color settings to default?';
-
-    showConfirmation(confirmMsg, function() {
-        localStorage.removeItem('appColorSettings');
-
-        let defaultHue = 260;
-        let defaultChroma = 0.10;
-        let defaultLightness = 30;
-        document.getElementById('hueSlider').value = defaultHue;
-        document.getElementById('chromaSlider').value = defaultChroma;
-        document.getElementById('lightnessSlider').value = defaultLightness;
-        document.getElementById('hueValue').textContent = defaultHue + '°';
-        document.getElementById('chromaValue').textContent = defaultChroma.toFixed(2);
-        document.getElementById('lightnessValue').textContent = defaultLightness + '%';
-
-        if (typeof oklchToHex === 'function') {
-            const hex = oklchToHex(defaultHue, defaultChroma, defaultLightness);
-            document.getElementById('colorPreview').style.backgroundColor = hex;
-            document.getElementById('colorPicker').value = hex;
-        } else {
-            document.getElementById('colorPreview').style.backgroundColor = '';
-            document.getElementById('colorPicker').value = '';
-        }
-
-        let recentColorsDiv = document.getElementById('recentColors');
-        if (recentColorsDiv) recentColorsDiv.innerHTML = '';
-
-        document.documentElement.style.setProperty('--base-hue', defaultHue);
-        document.documentElement.style.setProperty('--base-chroma', defaultChroma);
-
-        document.documentElement.setAttribute('data-theme', defaultLightness > 60 ? 'light' : 'dark');
-
-        const successMsg = translations['reset_color_success'] || 'Application color settings have been reset to default.';
-        if (typeof showLogMessage === 'function') showLogMessage(successMsg);
-        if (typeof speakMessage === 'function') speakMessage(successMsg);
-    });
-});
-
-function checkColorChange() {
-    const saved = localStorage.getItem('appColorSettings');
-    
-    if (saved) {
-        const settings = JSON.parse(saved);
-        
-        const rootStyles = getComputedStyle(document.documentElement);
-        const currentHueValue = parseFloat(rootStyles.getPropertyValue('--base-hue').trim()) || 0;
-        const currentChromaValue = parseFloat(rootStyles.getPropertyValue('--base-chroma').trim()) || 0;
-        
-        if (Math.abs(settings.hue - currentHueValue) > 1 || Math.abs(settings.chroma - currentChromaValue) > 0.01) {
-            document.documentElement.style.setProperty('--base-hue', settings.hue);
-            document.documentElement.style.setProperty('--base-chroma', settings.chroma);
-            
-            const textL = settings.lightness > 60 ? 20 : 95;
-            document.documentElement.style.setProperty('--text-primary', `oklch(${textL}% 0 0)`);
-            
-            const theme = settings.lightness > 60 ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', theme);
-        }
-    }
-}
-
-setInterval(checkColorChange, 1000);
-</script>
-
-<script>
-window.showConfirmation = function(message, onConfirm) {
-    const decodedMessage = decodeURIComponent(message);
-    const modalElement = document.getElementById('confirmModal');
-    document.getElementById('confirmModalMessage').innerText = decodedMessage;
-
-    const oldBtn = document.getElementById('confirmModalYes');
-    const newBtn = oldBtn.cloneNode(true);
-    oldBtn.parentNode.replaceChild(newBtn, oldBtn);
-
-    newBtn.addEventListener('click', () => {
-        const modal = bootstrap.Modal.getInstance(modalElement);
-        modal.hide();
-        if (typeof onConfirm === 'function') onConfirm();
-    });
-
-    let modal = bootstrap.Modal.getInstance(modalElement);
-    if (!modal) {
-        modal = new bootstrap.Modal(modalElement);
-    }
-    modal.show();
-};
-</script>
-
-<script>
-document.addEventListener('DOMContentLoaded', () => {
-    const currentSong = document.querySelector('#currentSong');
-    const floatingCurrentSong = document.getElementById('floatingCurrentSong');
-    const dynamicTitle = document.getElementById('dynamicTitle');
-
-    let usedColors = [];
-    let usedLogBoxColors = [];
-
-    function getColorListFromTheme() {
-        const styles = getComputedStyle(document.documentElement);
-        const lightness = styles.getPropertyValue('--l').trim();
-        const chroma = styles.getPropertyValue('--c').trim();
-
-        const colors = [];
-        for (let i = 1; i <= 7; i++) {
-            const hue = styles.getPropertyValue(`--base-hue-${i}`).trim();
-            const color = `oklch(${lightness} ${chroma} ${hue})`;
-            colors.push(color);
-        }
-        return colors;
-    }
-
-    function getNextColor(colorList) {
-        if (usedColors.length === colorList.length) {
-            usedColors = [];
-        }
-        const remaining = colorList.filter(c => !usedColors.includes(c));
-        const next = remaining[Math.floor(Math.random() * remaining.length)];
-        usedColors.push(next);
-        return next;
-    }
-
-    function rotateColors() {
-        const colorList = getColorListFromTheme();
-
-        if (currentSong) {
-            currentSong.style.color = getNextColor(colorList);
-        }
-        if (floatingCurrentSong) {
-            floatingCurrentSong.style.color = getNextColor(colorList);
-        }
-        if (dynamicTitle) {
-            dynamicTitle.style.color = getNextColor(colorList);
-        }
-    }
-
-    function getLogBoxColorListFromTheme() {
-        const styles = getComputedStyle(document.documentElement);
-        const lightness = '35%';
-        const chroma = styles.getPropertyValue('--c').trim();
-
-        const colors = new Set();
-        for (let i = 1; i <= 7; i++) {
-            let hue = styles.getPropertyValue(`--base-hue-${i}`).trim();
-            if (!hue) continue;
-            let color = `oklch(${lightness} ${chroma} ${hue})`;
-            colors.add(color);
-        }
-        return Array.from(colors);
-    }
-
-    function getNextLogBoxColor(colorList) {
-        if (usedLogBoxColors.length >= colorList.length) {
-            usedLogBoxColors = [];
-        }
-        const remaining = colorList.filter(c => !usedLogBoxColors.includes(c));
-        const next = remaining[Math.floor(Math.random() * remaining.length)];
-        usedLogBoxColors.push(next);
-        return next;
-    }
-
-    function rotateLogBoxColors() {
-        const colorList = getLogBoxColorListFromTheme();
-        if (colorList.length === 0) return;
-
-        document.querySelectorAll('.log-box[data-dynamic-bg="true"]').forEach(box => {
-            const color = getNextLogBoxColor(colorList);
-            box.style.background = color;
-        });
-    }
-
-    rotateColors();
-    rotateLogBoxColors();
-    setInterval(rotateColors, 4000);
-    setInterval(rotateLogBoxColors, 4000);
-});
-</script>
-
-<style>
-.lyrics-mode {
-    .non-lyrics-content {
-        display: none !important;
-    }
-
-    #lyricsContainer {
-        height: calc(70vh - 150px) !important; 
-        position: relative;
-        z-index: 1000;
-    }
-
-    #currentSong {
-        font-size: 1.5rem;
-        margin-bottom: 1rem;
-    }
-
-    #floatingLyrics {
-        display: none;
-    }
-}
-
-#lyricsToggle .bi {
-    transition: transform 0.3s;
-}
-.lyrics-mode #lyricsToggle .bi {
-    transform: rotate(180deg);
-}
-</style>
-
-<script>
-let isLyricsMode = localStorage.getItem('lyricsMode') === 'true';
-
-function toggleLyricsMode() {
-    const modal = document.getElementById('musicModal');
-    const icon = document.getElementById('lyricsIcon');
-
-    isLyricsMode = !isLyricsMode;
-    modal.classList.toggle('lyrics-mode', isLyricsMode);
-    localStorage.setItem('lyricsMode', isLyricsMode);
-
-    icon.className = isLyricsMode ? 'bi bi-chevron-up' : 'bi bi-chevron-down';
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-    const icon = document.getElementById('lyricsIcon');
-    document.getElementById('lyricsToggle').addEventListener('click', toggleLyricsMode);
-
-    if (isLyricsMode) {
-        document.getElementById('musicModal').classList.add('lyrics-mode');
-        icon.className = 'bi bi-chevron-up';
-    }
-});
-</script>
-
-<script>
-    window.toggleIpStatusBar = function() {
-        const ipStatusBar = document.getElementById('status-bar-component');
-        if (!ipStatusBar) return;
-        
-        const isHidden = ipStatusBar.style.display === 'none';
-
-        if (isHidden) {
-            ipStatusBar.style.display = '';
-            localStorage.setItem('neko_ip_status_hidden', 'false');
-            if (typeof speakMessage === 'function') {
-                speakMessage(translations['ip_info_shown'] || 'IP Information Shown');
-            }
-            if (typeof showLogMessage === 'function') {
-                showLogMessage(translations['ip_info_shown'] || 'IP Information Shown');
-            }
-        } else {
-            ipStatusBar.style.display = 'none';
-            localStorage.setItem('neko_ip_status_hidden', 'true');
-            if (typeof speakMessage === 'function') {
-                speakMessage(translations['ip_info_hidden'] || 'IP Information Hidden');
-            }
-            if (typeof showLogMessage === 'function') {
-                showLogMessage(translations['ip_info_hidden'] || 'IP Information Hidden');
-            }
-        }
-    };
-
-    document.addEventListener('DOMContentLoaded', () => {
-        const storedValue = localStorage.getItem('neko_ip_status_hidden');
-        const ipStatusHidden = storedValue === null || storedValue === 'true';
-        const ipStatusBar = document.getElementById('status-bar-component');
-        
-        if (ipStatusBar) {
-            ipStatusBar.style.display = ipStatusHidden ? 'none' : '';
-        }
-        localStorage.setItem('neko_ip_status_hidden', ipStatusHidden.toString());
-    });
-</script>
-
-<script>
-document.addEventListener("DOMContentLoaded", () => {
-  const btn = document.getElementById("fontSwitchBtn");
-  const icon = document.getElementById("fontSwitchIcon");
-  const body = document.body;
-  const storageKey = "fontSwitch";
-
-  const fonts = [
-    { class: "default-font", key: "font_default", icon: "fa-font" },
-    { class: "fredoka-font", key: "font_fredoka", icon: "fa-child-reaching" },
-    { class: "cinzel-font", key: "font_cinzel", icon: "fa-crown" },
-    { class: "system-nofo-font", key: "font_noto", icon: "fa-language" },
-    { class: "noto-sans-font", key: "font_noto_sans", icon: "fa-globe" },
-    { class: "system-mono-font", key: "font_mono", icon: "fa-code" },
-    { class: "dm-serif-font", key: "font_dm_serif", icon: "fa-feather-pointed" }
-  ];
-
-  const savedFont = localStorage.getItem(storageKey);
-  if (savedFont) {
-    const fontObj = fonts.find(f => f.class === savedFont);
-    body.classList.add(savedFont);
-    if (fontObj) updateIcon(fontObj.icon);
-  } else {
-    updateIcon("fa-font");
-  }
-
-  btn.addEventListener("click", () => {
-    const currentIndex = fonts.findIndex(f => body.classList.contains(f.class));
-    const nextIndex = (currentIndex + 1) % fonts.length;
-    const nextFont = fonts[nextIndex];
-
-    fonts.forEach(f => body.classList.remove(f.class));
-    body.classList.add(nextFont.class);
-
-    body.classList.add("font-transition");
-
-    setTimeout(() => {
-      body.classList.remove("font-transition");
-    }, 400);
-
-    localStorage.setItem(storageKey, nextFont.class);
-
-    updateIcon(nextFont.icon);
-
-    const message = translations[nextFont.key] || "Switched font";
-    if (typeof speakMessage === "function") speakMessage(message);
-    if (typeof showLogMessage === "function") showLogMessage(message);
-  });
-
-  function updateIcon(iconName) {
-    icon.className = `fa-solid ${iconName}`;
-    icon.style.color = "white";
-  }
-});
-</script>
-
-<style>
-:root {
-    --base-hue: 260;
-    --base-chroma: 0.03;
-    --danger-base: 15;
-    --base-hue-1: 20;
-    --base-hue-2: 200;
-    --base-hue-3: 135;
-    --base-hue-4: 80;
-    --base-hue-5: 270;
-    --base-hue-6: 170;
-    --base-hue-7: 340;
-    --l: 85%;
-    --c: 0.18;
-    --glass-blur: blur(20px);
-    --radius: 20px;
-    --glass-opacity: 0.85;
-    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
-    --shadow-intensity: 0.25;
-    --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-    --transition-speed: 0.3s;
-    --highlight-intensity: 0.8;
-    --border-strong: 1px solid oklch(70% 0.1 var(--base-hue) / 0.6);
-    --bg-body: oklch(40% var(--base-chroma) var(--base-hue) / 90%);
-    --bg-container: oklch(30% var(--base-chroma) var(--base-hue));
-    --text-primary: oklch(95% 0 0);
-    --accent-color: oklch(70% 0.2 calc(var(--base-hue) + 0));
-    --card-bg: oklch(25% var(--base-chroma) var(--base-hue));
-    --header-bg: oklch(35% var(--base-chroma) var(--base-hue));
-    --border-color: oklch(40% var(--base-chroma) var(--base-hue));
-    --btn-primary-bg: oklch(50% 0.18 var(--base-hue));
-    --btn-primary-hover: color-mix(in oklch, var(--btn-primary-bg), white 12%);
-    --btn-success-bg: oklch(55% 0.22 140);
-    --btn-info-bg: oklch(55% 0.22 220);
-    --btn-warning-bg: oklch(65% 0.18 80);
-    --btn-danger-bg: oklch(55% 0.25 var(--danger-base));
-    --item-hover-bg: color-mix(in oklch, var(--btn-primary-bg), white 15%);
-    --item-hover-shadow: 0 4px 12px oklch(0 0 0 / 0.4);
-    --drag-over-bg: oklch(35% 0.05 var(--base-hue) / 0.3);
-    --drag-over-shadow: 0 0 25px oklch(var(--base-hue) 0.2 0.4 / 0.3);
-    --text-secondary: oklch(75% 0.03 0);
-    --success-text: oklch(75% 0.22 140);
-    --info-text: oklch(75% 0.22 220);
-    --warning-text: oklch(80% 0.22 80);
-    --danger-text: oklch(70% 0.28 30);
-    --ocean-bg: oklch(48% 0.32 calc(var(--base-hue) + 220));
-    --forest-bg: oklch(42% 0.32 calc(var(--base-hue) + 140));
-    --rose-bg: oklch(48% 0.32 calc(var(--base-hue) + 350));
-    --lavender-bg: oklch(46% 0.32 calc(var(--base-hue) + 270));
-    --sand-bg: oklch(45% 0.32 calc(var(--base-hue) + 60));
-    --glass-blur: blur(20px);
-    --radius: 16px;
-    --transition: all 0.25s ease;
-    --primary-color: var(--accent-color);
-    --secondary-color: var(--btn-primary-bg);
-    --background: var(--bg-body);
-    --text-color: var(--text-primary);
-}
-
-[data-theme="light"] {
-    --base-hue: 200;
-    --base-chroma: 0.01;
-    --l: 60%;
-    --c: 0.25;
-    --bg-body: oklch(95% var(--base-chroma) var(--base-hue) / 90%);
-    --bg-container: oklch(99% var(--base-chroma) var(--base-hue));
-    --text-primary: oklch(25% var(--base-chroma) var(--base-hue));
-    --accent-color: oklch(60% 0.2 calc(var(--base-hue) + 60));
-    --card-bg: oklch(96% var(--base-chroma) var(--base-hue));
-    --header-bg: oklch(88% var(--base-chroma) var(--base-hue));
-    --border-color: oklch(85% 0.03 var(--base-hue));
-    --border-strong: 1px solid oklch(70% 0.1 var(--base-hue) / 0.6);
-    --btn-primary-bg: oklch(60% 0.35 var(--base-hue));
-    --btn-success-bg: oklch(75% 0.25 140);
-    --btn-info-bg: oklch(65% 0.3 220);
-    --btn-warning-bg: oklch(65% 0.25 80);
-    --btn-danger-bg: oklch(55% 0.35 var(--danger-base));
-    --item-hover-bg: color-mix(in oklch, var(--accent-color), white 25%);
-    --item-hover-shadow: 0 2px 15px oklch(0 0 0 / 0.15);
-    --drag-over-bg: oklch(92% 0.01 var(--base-hue) / 0.3);
-    --drag-over-shadow: 0 0 20px oklch(0 0 0 / 0.1);
-    --text-secondary: oklch(45% 0.03 0);
-    --success-text: oklch(40% 0.25 140);
-    --info-text: oklch(40% 0.25 220);
-    --warning-text: oklch(45% 0.25 80);
-    --danger-text: oklch(45% 0.35 30);
-    --ocean-bg: oklch(85% 0.18 calc(var(--base-hue) + 220));
-    --highlight-color: oklch(90% 0.15 calc(var(--base-hue) + 90));
-    --soft-highlight: oklch(85% 0.1 calc(var(--base-hue) + 90));
-}
-
-@font-face {
-    font-family: 'Cinzel Decorative';
-    font-style: normal;
-    font-weight: 700;
-    src: url('./assets/webfonts/cinzel-decorative-v17-latin-700.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Cinzel Decorative';
-    font-style: normal;
-    font-weight: 900;
-    src: url('./assets/webfonts/cinzel-decorative-v17-latin-900.woff2') format('woff2');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: 'Fredoka One';
-    font-style: normal;
-    font-weight: 400;
-    src: url('./assets/webfonts/fredoka-v16-latin-regular.woff2') format('woff2');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: 'Noto Serif SC';
-    font-style: normal;
-    font-weight: 400;
-    src: url('./assets/webfonts/noto-serif-sc-v31-latin-regular.woff2') format('woff2');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: 'Comic Neue';
-    font-style: normal;
-    font-weight: 400;
-    src: url('./assets/webfonts/comic-neue-v8-latin-regular.woff2') format('woff2');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: 'DM Serif Display';
-    font-style: normal;
-    font-weight: 400;
-    src: url('./assets/webfonts/dm-serif-display-v15-latin-regular.woff2') format('woff2');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: 'Noto Sans';
-    font-style: normal;
-    font-weight: 400;
-    src: url('./assets/webfonts/noto-sans-v39-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: 'Noto Sans';
-    font-style: normal;
-    font-weight: 500;
-    src: url('./assets/webfonts/noto-sans-v39-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-500.woff2') format('woff2');
-}
-
-body {
-    margin: 0;
-    color: var(--text-color);
-    background-attachment: fixed;
-}
-
-#playerModal.active {
-    display: flex;
-    animation: slideIn 0.3s ease forwards;
-}
-
-@keyframes slideIn {
-    from {
-        transform: translateY(40px);
-        opacity: 0;
-    }
-
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
-}
-
-.lyrics-container {
-    flex: 1;
-    overflow-y: auto;
-    padding: 12px;
-    margin-bottom: 15px;
-    border-radius: var(--radius);
-    background: var(--card-bg);
-    border: var(--border-strong);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.lyric-line {
-    opacity: 1 !important;
-    color: var(--text-primary) !important;
-    font-size: 1.1rem;
-    transition: all 0.3s ease;
-    transition: color 0.3s;
-}
-
-.lyric-line .char {
-    display: inline-block;
-    white-space: nowrap;
-    margin-right: 0.1rem;
-}
-
-.lyric-line .char.played {
-    background: linear-gradient(...);
-}
-
-.lyric-line.highlight {
-    color: var(--text-primary) !important;
-    font-size: 1.3rem;
-}
-
-.lyric-line.highlight .char {
-    transition: all 0.1s ease;
-}
-
-.lyric-line.highlight .char.active {
-    opacity: 1;
-    transform: scale(1.3);
-    background: linear-gradient(90deg,
-            oklch(65% 0.25 15) 0%,
-            oklch(70% 0.25 50) 25%,
-            oklch(75% 0.25 85) 50%,
-            oklch(70% 0.25 135) 75%,
-            oklch(65% 0.25 240) 100%);
-    background-size: 200% auto;
-    background-clip: text;
-    -webkit-background-clip: text;
-    color: transparent !important;
-    animation: color-flow 1s linear infinite;
-    0 0 10px rgba(255, 51, 102, 0.5),
-    0 0 15px rgba(102, 255, 51, 0.5),
-    0 0 20px rgba(51, 204, 255, 0.5);
-}
-
-.lyric-line.enter-active {
-    animation: textPop 0.5s ease;
-}
-
-@keyframes textPop {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes color-flow {
-    0% {
-        background-position: 0% 50%;
-    }
-
-    50% {
-        background-position: 100% 50%;
-    }
-
-    100% {
-        background-position: 0% 50%;
-    }
-}
-
-.char.space {
-    display: inline;
-    min-width: 0.5em;
-}
-
-.progress-container {
-    width: 100%;
-    height: 6px;
-    background: var(--border-color);
-    border-radius: 4px;
-    margin: 16px 0;
-    overflow: hidden;
-}
-
-.progress-bar {
-    height: 100%;
-    background: var(--accent-color);
-    transition: width 0.2s ease;
-}
-
-.controls {
-    display: flex;
-    justify-content: center;
-    gap: 20px;
-    margin-top: 15px;
-}
-
-.control-btn,
-#volumeToggle {
-    background: var(--card-bg);
-    border: var(--border-strong);
-    color: var(--text-color);
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    cursor: pointer;
-    font-size: 1.2rem;
-    transition: all 0.3s ease;
-}
-
-.control-btn:hover,
-#volumeToggle:hover {
-    background: var(--item-hover-bg);
-    transform: scale(1.1);
-}
-
-#playPauseBtn {
-    width: 60px;
-    height: 60px;
-    font-size: 1.5rem;
-    background: var(--accent-color);
-    color: var(--text-primary);
-    box-shadow: 0 4px 20px rgba(var(--accent-color), 0.3);
-}
-
-.playlist {
-    margin-top: 20px;
-    max-height: 380px;
-    overflow-y: auto;
-    padding: 10px;
-    border-radius: var(--radius);
-    background: var(--card-bg);
-    box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.1),
-        inset -1px -1px 2px rgba(0, 0, 0, 0.15),
-        inset 1px -1px 1px rgba(0, 0, 0, 0.08),
-        inset -1px 1px 1px rgba(0, 0, 0, 0.08);
-    border: var(--border-strong);
-    transition: all 0.3s ease;
-}
-
-.lyrics-container:hover,
-.playlist:hover {
-    transform: translateY(-2px);
-    box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.1),
-        inset -1px -1px 2px rgba(0, 0, 0, 0.15),
-        inset 1px -1px 1px rgba(0, 0, 0, 0.08),
-        inset -1px 1px 1px rgba(0, 0, 0, 0.08),
-        0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.playlist-item {
-    padding: 10px 14px;
-    border-radius: 10px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-size: 0.95rem;
-}
-
-.playlist-item:hover {
-    background: var(--item-hover-bg);
-    color: #fff;
-    font-weight: bold;
-}
-
-.playlist-item.active {
-    background: var(--rose-bg);
-    color: white;
-    font-weight: bold;
-}
-
-#floatingLyrics {
-    position: fixed;
-    top: 1%;
-    left: 4.5%;
-    background: var(--bg-container);
-    padding: 15px 10px;
-    border-radius: 20px;
-    backdrop-filter: var(--glass-blur);
-    display: none;
-    opacity: 0;
-    pointer-events: none;
-    cursor: grab;
-    transition: opacity 0.3s ease;
-    writing-mode: vertical-rl;
-    text-orientation: mixed;
-    line-height: 2;
-    z-index: 1060;
-    flex-direction: column;
-    gap: 0.5em;
-    width: 200px;
-    resize: none;
-    overflow: auto;
-    user-select: none;
-    border: var(--border-strong);
-}
-
-@keyframes float {
-    from {
-        transform: translateY(0);
-    }
-
-    to {
-        transform: translateY(-10px);
-    }
-}
-
-@keyframes breath {
-
-    0%,
-    100% {
-        --glow-primary: oklch(85% 0.32 var(--glow-base));
-        box-shadow: 0 0 10px 2px color-mix(in oklch, var(--glow-primary), transparent 50%),
-            inset 0 -10px 20px color-mix(in oklch, var(--glow-primary), transparent 70%);
-    }
-
-    50% {
-        --glow-primary: oklch(92% 0.38 var(--glow-base));
-        box-shadow: 0 0 20px 4px color-mix(in oklch, var(--glow-primary), transparent 30%),
-            inset 0 -15px 30px color-mix(in oklch, var(--glow-primary), transparent 50%);
-    }
-}
-
-[data-theme="dark"] #floatingLyrics {
-    --glow-base: var(--base-hue);
-    --glow-primary: oklch(88% 0.35 var(--glow-base));
-    --glow-secondary: oklch(85% 0.3 calc(var(--glow-base) + 15));
-    border: 1px solid color-mix(in oklch, var(--glow-primary), transparent 10%);
-    box-shadow: 0 0 12px 2px color-mix(in oklch, var(--glow-primary), transparent 40%),
-        inset 0 -12px 24px color-mix(in oklch, var(--glow-primary), transparent 60%);
-    animation: float 3s ease-in-out infinite alternate,
-        breath 4s ease-in-out infinite;
-}
-
-[data-theme="dark"] #floatingLyrics:hover {
-    animation-play-state: paused;
-    --glow-primary: oklch(92% 0.38 var(--glow-base));
-    box-shadow: 0 0 20px 4px color-mix(in oklch, var(--glow-primary), transparent 30%),
-        inset 0 -15px 30px color-mix(in oklch, var(--glow-primary), transparent 50%);
-}
-
-#floatingLyrics.visible {
-    display: flex;
-    opacity: 1;
-    pointer-events: auto;
-    cursor: move;
-}
-
-#floatingLyrics #floatingCurrentSong.vertical-title {
-    font-size: 1.8rem;
-    font-weight: 700;
-    writing-mode: vertical-rl;
-    padding-right: 0.5em;
-    margin-left: auto;
-    margin-right: auto;
-    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3),
-        0px -1px 2px rgba(255, 255, 255, 0.4);
-}
-
-#floatingLyrics .vertical-lyrics {
-    writing-mode: vertical-rl;
-    text-combine-upright: all;
-}
-
-#floatingLyrics .char {
-    font-size: 1.6rem;
-    transition: transform 0.3s ease;
-    display: inline-block;
-    position: relative;
-    margin-bottom: 10px;
-}
-
-.floating-controls {
-    display: flex;
-    flex-direction: row;
-    gap: 0.8em;
-    margin-bottom: 1em;
-    order: -1;
-}
-
-.ctrl-btn {
-    background: var(--bg-body);
-    border: var(--border-strong);
-    color: var(--text-primary) !important;
-    border-radius: 50%;
-    width: 36px;
-    height: 36px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.3s ease;
-    backdrop-filter: blur(5px);
-}
-
-.ctrl-btn:hover {
-    background: var(--item-hover-bg);
-    transform: scale(1.1);
-}
-
-.ctrl-btn.clicked {
-    transform: scale(0.9);
-    background: rgba(50, 205, 50, 0.5);
-}
-
-.ctrl-btn i {
-    font-size: 1.6rem;
-    display: block;
-    vertical-align: middle;
-    line-height: 1;
-    margin: 0;
-    padding: 0;
-}
-
-#currentSong.vertical-title {
-    margin-top: 0.5em;
-    border-right: none;
-    padding-right: 0;
-    padding-bottom: 0.8em;
-    margin-right: 0;
-    writing-mode: horizontal-tb;
-}
-
-.vertical-lyrics {
-    margin-top: 0.5em;
-    overflow-x: hidden;
-    max-width: 100%;
-    word-break: break-all;
-}
-
-.char {
-    transition: all 0.3s ease;
-    display: inline-block;
-    margin-right: 2px;
-}
-
-#floatingLyrics .char.active {
-    color: var(--accent-color);
-    animation: bounce-scale 0.6s ease-out;
-    transform: scale(1.3);
-    position: relative;
-    text-shadow: none !important;
-}
-
-@keyframes bounce-scale {
-    0% {
-        transform: scale(1);
-    }
-
-    50% {
-        transform: scale(1.3);
-    }
-
-    70% {
-        transform: scale(1.1);
-    }
-
-    100% {
-        transform: scale(1);
-    }
-}
-
-.char.played {
-    transform: scale(1) !important;
-}
-
-.playlist {
-    counter-reset: list-item;
-}
-
-.playlist-item::before {
-    content: counter(list-item) ".";
-    counter-increment: list-item;
-    margin-right: 8px;
-    opacity: 0.6;
-}
-
-.time-display {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 8px;
-    font-size: 0.9em;
-    color: var(--text-secondary);
-}
-
-.progress-container {
-    cursor: pointer;
-}
-
-.char.active {
-    transform: scale(1.2);
-}
-
-.char[data-start]+.char[data-start] {
-    margin-left: 12px;
-}
-
-.lyrics-loading {
-    position: relative;
-    min-height: 100px;
-}
-
-#no-lyrics {
-    text-align: center;
-    color: var(--text-secondary);
-    padding: 2rem;
-    font-size: 1.8em;
-}
-
-#noLyricsFloating {
-    width: min-content;
-    max-width: 4em;
-    text-align: center;
-    color: var(--text-primary) !important;
-    line-height: 1.2;
-    font-size: 1.5rem;
-    padding: 10px 2px;
-    letter-spacing: 0.2em;
-    writing-mode: vertical-rl;
-    text-orientation: upright;
-}
-
-@keyframes glow {
-    0% {
-        opacity: 0.8;
-    }
-
-    50% {
-        opacity: 1;
-    }
-
-    100% {
-        opacity: 0.8;
-    }
-}
-
-.progress-bar {
-    height: 100%;
-    background: var(--btn-success-bg);
-    border-radius: 4px;
-    transition: width 0.1s linear;
-}
-
-.progress-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 2;
-}
-
-#currentSong {
-    font-weight: bold !important;
-    color: var(--accent-color);
-    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3),
-        0px -1px 2px rgba(255, 255, 255, 0.4);
-}
-
-#volumePanel {
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    margin-bottom: 10px;
-    background-color: var(--card-bg);
-    border: var(--border-strong);
-    border-radius: 0.5rem;
-    padding: 10px;
-    width: 160px;
-    box-shadow: 0 4px 10px var(--border-color);
-    z-index: 1000;
-    display: none;
-}
-
-#volumeSlider {
-    width: 100%;
-    accent-color: var(--text-color);
-}
-
-#volumeLabel {
-    color: var(--text-color);
-    font-size: 0.9rem;
-    text-align: right;
-    margin-top: 5px;
-}
-
-.heart {
-    position: absolute;
-    font-size: 2rem;
-    color: #ff69b4;
-    pointer-events: none;
-    opacity: 0;
-    z-index: 9999;
-    animation: heartAnimation 1s ease-in-out forwards;
-}
-
-@keyframes heartAnimation {
-    0% {
-        transform: scale(1) translateY(0);
-        opacity: 1;
-    }
-
-    50% {
-        transform: scale(1.5) translateY(-50px);
-        opacity: 1;
-    }
-
-    100% {
-        transform: scale(0) translateY(-100px);
-        opacity: 0;
-    }
-}
-
-.log-box {
-    position: fixed;
-    left: 20px;
-    padding: 12px 16px;
-    background: var(--accent-color);
-    color: white;
-    border-radius: 8px;
-    z-index: 9999;
-    max-width: 370px;
-    font-size: 15px;
-    word-wrap: break-word;
-    line-height: 1.5;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
-    border: var(--border-strong);
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(2px);
-    transform: translateY(0);
-    opacity: 0;
-    animation: scrollUp 12s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
-    display: inline-block;
-    margin-bottom: 10px;
-    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-@keyframes scrollUp {
-    0% {
-        top: 90%;
-        opacity: 0;
-    }
-
-    20% {
-        opacity: 1;
-    }
-
-    80% {
-        top: 50%;
-        opacity: 1;
-    }
-
-    100% {
-        top: 45%;
-        opacity: 0;
-    }
-}
-
-.log-box.exiting {
-    animation: fadeOut 0.3s forwards;
-}
-
-.log-content {
-    padding: 6px 20px 6px 8px;
-    color: white;
-}
-
-.log-close-btn {
-    position: absolute;
-    top: 6px;
-    right: 10px;
-    background: transparent;
-    border: none;
-    color: inherit;
-    cursor: pointer;
-    font-size: 20px;
-    line-height: 1;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.2s;
-}
-
-.log-box:hover .log-close-btn {
-    opacity: 0.7;
-    pointer-events: auto;
-}
-
-.log-box:hover .log-close-btn:hover {
-    opacity: 1;
-}
-
-@keyframes fadeOut {
-    to {
-        opacity: 0;
-        transform: translateY(-20px) scale(0.95);
-    }
-}
-
-.log-icon {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    margin-right: 3px;
-    vertical-align: middle;
-}
-
-.log-box.error {
-    background: linear-gradient(145deg, #ff4444, #cc0000);
-}
-
-.log-box.warning {
-    background: linear-gradient(145deg, #ffc107, #ffab00);
-}
-
-.log-box.info {
-    background: linear-gradient(145deg, #2196F3, #1976D2);
-}
-
-@media (max-width: 768px) {
-    .log-box {
-        left: 10px;
-        right: 10px;
-        max-width: none;
-        font-size: 14px;
-    }
-}
-
-.list-group-item {
-    cursor: pointer;
-    color: var(--text-primary);
-    background: var(--bg-container);
-    border: var(--border-strong);
-    transition: background 0.3s ease;
-}
-
-.list-group-item:hover {
-    background: var(--item-hover-bg);
-    color: white !important;
-}
-
-.list-group-item:hover .text-muted,
-.list-group-item:hover .text-truncate {
-    color: white !important;
-}
-
-.list-group-item.active {
-    background: var(--accent-color);
-    color: white;
-    border: 1px solid var(--accent-color);
-}
-
-.list-group-item.active .badge,
-.list-group-item.active .text-truncate,
-.list-group-item.active small,
-.list-group-item.active i {
-    color: white !important;
-}
-
-.list-group-item .delete-item {
-    cursor: pointer;
-}
-
-.modal-xl {
-    max-width: 60% !important;
-    width: 90% !important;
-}
-
-@media (max-width: 768px) {
-    .modal-xl {
-        max-width: 95% !important;
-        width: 95% !important;
-        margin: 1rem auto !important;
-    }
-}
-
-@media (max-width: 576px) {
-    .modal-xl {
-        max-width: 100% !important;
-        width: 100% !important;
-        margin: 0.5rem auto !important;
-    }
-}
-
-@media (max-width: 768px) {
-    .container-sm .btn i {
-        margin-right: 0;
-    }
-
-    .container-sm .btn {
-        font-size: 9px;
-    }
-}
-
-@media (max-width: 768px) {
-    .modal-body img {
-        display: none;
-    }
-
-    .datetime-container {
-        font-size: 17px !important;
-    }
-}
-
-@media (max-width: 768px) {
-
-    .section-container .nav-pills {
-        justify-content: center !important;
-    }
-
-    .section-container .nav-pills .nav-link {
-        text-align: center;
-    }
-}
-
-.control-panel-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: none !important;
-    backdrop-filter: none !important;
-    display: none;
-    justify-content: center;
-    align-items: center;
-    z-index: 1050;
-    backdrop-filter: blur(3px);
-    transition: opacity 0.3s ease;
-}
-
-.control-panel {
-    --primary-gradient: linear-gradient(135deg, #0f3460, #1a508b, #2d8bc0);
-    --button-hover: rgba(255, 255, 255, 0.2);
-    --panel-padding: 20px;
-    background: var(--primary-gradient);
-    border-radius: 20px;
-    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
-    overflow: hidden;
-    padding: var(--panel-padding);
-    position: relative;
-    z-index: 10;
-    max-width: 1000px;
-    width: 90%;
-    margin: 0;
-    display: block;
-}
-
-.control-panel::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjAuNSIgZmlsbD0iIzEzNDI3OSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIgb3BhY2l0eT0iMC4xIi8+PC9zdmc+');
-    opacity: 0.1;
-    z-index: -1;
-}
-
-.panel-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 25px;
-    padding-bottom: 15px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.panel-header h3 {
-    margin: 0;
-    font-weight: 600;
-    font-size: 1.8rem;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    color: var(--accent-color);
-}
-
-.panel-header h3 i {
-    background: rgba(255, 255, 255, 0.15);
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.5rem;
-}
-
-.close-icon {
-    background: #e74c3c;
-    border: none;
-    color: white;
-    width: 35px;
-    height: 35px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    transform: scale(1);
-}
-
-.close-icon:hover {
-    transform: scale(1.1);
-    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
-}
-
-.close-icon i,
-.close-icon svg,
-.close-icon span {
-    transition: transform 0.3s ease;
-    transform: rotate(0deg);
-}
-
-.close-icon:hover i,
-.close-icon:hover svg {
-    transform: rotate(180deg);
-}
-
-.buttons-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 15px;
-    margin-bottom: 15px;
-}
-
-.action-row {
-    display: flex;
-    justify-content: flex-end;
-    gap: 15px;
-    padding-top: 15px;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.panel-btn {
-    background: rgba(255, 255, 255, 0.1);
-    border: none;
-    color: white;
-    padding: 15px;
-    border-radius: 12px;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    transition: all 0.3s ease;
-    cursor: pointer;
-    width: 100%;
-    text-align: left;
-    backdrop-filter: blur(5px);
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-}
-
-.panel-btn:hover {
-    background: var(--button-hover);
-    transform: translateY(-3px);
-    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.2);
-}
-
-.panel-btn:active {
-    transform: translateY(0);
-}
-
-.panel-btn i {
-    font-size: 1.4rem;
-    min-width: 30px;
-}
-
-.btn-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    background: rgba(255, 255, 255, 0.15);
-    border-radius: 10px;
-    font-size: 1.2rem;
-}
-
-.btn-icon i {
-    margin-left: 0.6ch;
-    position: relative;
-    top: 0.09em;
-}
-
-.color-picker {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-    background: rgba(255, 255, 255, 0.1);
-    padding: 10px 15px;
-    border-radius: 12px;
-    backdrop-filter: blur(5px);
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-}
-
-.color-picker label {
-    font-weight: 500;
-    white-space: nowrap;
-    color: white !important;
-}
-
-.color-picker input {
-    width: 40px;
-    height: 32px;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    padding: 0;
-    border-radius: 8px;
-    overflow: hidden;
-}
-
-.panel-close-btn {
-    background: rgba(255, 255, 255, 0.1);
-    border: none;
-    color: white;
-    padding: 10px 25px;
-    border-radius: 12px;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    transition: all 0.3s ease;
-    cursor: pointer;
-    backdrop-filter: blur(5px);
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-}
-
-.panel-close-btn:hover {
-    background: rgba(231, 76, 60, 0.2);
-    transform: translateY(-3px) scale(1.05);
-    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.2);
-}
-
-.language-container {
-    display: flex;
-    align-items: center;
-    gap: 25px;
-}
-
-.flag-icon {
-    width: 50px;
-    height: 40px;
-    border-radius: 3px;
-    object-fit: cover;
-}
-
-@media (max-width: 992px) {
-    .buttons-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
-}
-
-@media (max-width: 576px) {
-    .buttons-grid {
-        grid-template-columns: 1fr;
-    }
-
-    .action-row {
-        flex-direction: column;
-    }
-
-    .color-picker {
-        width: 100%;
-        justify-content: space-between;
-    }
-
-    .panel-close-btn {
-        width: 100%;
-        justify-content: center;
-    }
-}
-
-.flag-container {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.flag-icon {
-    width: 30px;
-    height: 20px;
-    border-radius: 3px;
-    object-fit: cover;
-}
-
-label[for="newPath"],
-label[for="permissions"],
-.form-text {
-    color: white !important;
-}
-
-.container-bg {
-    border-radius: 12px;
-    box-shadow: var(--bs-shadow-medium);
-    padding: 2rem;
-    margin-top: 2rem;
-    margin-bottom: 2rem;
-}
-
-#log-message {
-    transition: opacity 0.5s ease;
-}
-
-@media (max-width: 767.98px) {
-
-    #colorModal .modal-dialog,
-    #colorPickerModal .modal-dialog {
-        max-height: 95vh;
-        margin: 1rem;
-    }
-
-    #colorModal .modal-content,
-    #colorPickerModal .modal-content {
-        max-height: 95vh;
-        display: flex;
-        flex-direction: column;
-    }
-
-    #colorModal .modal-body,
-    #colorPickerModal .modal-body {
-        overflow-y: auto;
-        max-height: calc(90vh - 120px);
-        padding: 15px;
-    }
-
-    #colorModal .row {
-        flex-direction: column;
-    }
-
-    #colorModal .col-md-6 {
-        width: 100%;
-        margin-bottom: 15px;
-    }
-
-    #colorModal .card {
-        margin-bottom: 10px;
-    }
-
-    #colorModal .mb-3 {
-        margin-bottom: 12px !important;
-    }
-
-    #colorModal .form-label {
-        font-size: 0.9rem;
-        margin-bottom: 6px;
-    }
-
-    #colorModal .d-flex {
-        gap: 8px;
-    }
-
-    #colorModal .gap-2>button {
-        width: 24px;
-        height: 24px;
-        padding: 0;
-    }
-
-    #colorPickerModal .modal-body>.row {
-        flex-direction: column;
-    }
-
-    #colorPickerModal .col-md-6 {
-        width: 100%;
-        margin-bottom: 15px;
-    }
-
-    #colorPickerModal .form-label {
-        font-size: 0.9rem;
-        margin-bottom: 6px;
-    }
-
-    #colorPickerModal .mb-3 {
-        margin-bottom: 12px !important;
-    }
-
-    #colorPickerModal #color-preview {
-        height: 80px;
-    }
-
-    #colorPickerModal .d-flex {
-        gap: 8px;
-    }
-
-    #colorPickerModal #current-color-block {
-        height: 40px;
-        font-size: 0.85rem;
-    }
-
-    #colorPickerModal #apply-color,
-    #colorPickerModal #reset-color {
-        height: 42px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-}
-
-html,
-body {
-    overflow-y: scroll !important;
-    scrollbar-width: none !important;
-    -ms-overflow-style: none !important;
-}
-
-html::-webkit-scrollbar,
-body::-webkit-scrollbar {
-    display: none !important;
-    width: 0 !important;
-    background: transparent !important;
-}
-
-.link-box a {
-    color: var(--accent-color) !important;
-}
-
-h2#neko-title.neko-title-style {
-    color: var(--accent-color) !important;
-}
-
-.table.custom-table thead th {
-    color: var(--purple-text) !important;
-}
-
-.container-sm .row a {
-    color: var(--accent-color) !important;
-    text-decoration: none;
-    transition: color 0.3s ease;
-}
-
-.container-sm .row a:hover {
-    color: var(--purple-text) !important;
-}
-
-.container-sm .row a .bi {
-    color: inherit;
-}
-
-.form-select option {
-    background-color: var(--header-bg) !important;
-    color: var(--text-primary) !important;
-}
-
-.form-select {
-    color: var(--accent-color) !important;
-    border: var(--border-strong) !important;
-}
-
-.form-select option:hover {
-    background: var(--border-color) !important;
-    color: var(--accent-color) !important;
-}
-
-.modal-footer {
-    position: relative;
-    height: 60px;
-    flex-shrink: 0;
-    border: none !important;
-    box-shadow: none !important;
-    background-color: var(--header-bg) !important;
-    border-top: 1px solid var(--border-color) !important;
-}
-
-.container-bg,
-.modal-content,
-.table {
-    --bg-l: oklch(30% 0 0);
-    color: oklch(calc(100% - var(--bg-l)) 0 0) !important;
-}
-
-.container-bg {
-    padding: 20px;
-    border-radius: 10px;
-    background: var(--bg-container);
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-}
-
-.card {
-    --card-padding: 1.25rem;
-    --card-border-width: 1px;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-    background: var(--bg-container) !important;
-    border: var(--border-strong);
-    border-radius: var(--radius);
-    box-shadow: 0 2px 8px color-mix(in oklch, var(--border-color), transparent 70%);
-    transform: translateY(-2px);
-    transition: var(--transition);
-    overflow: hidden;
-}
-
-.card:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 16px color-mix(in oklch, var(--border-color), transparent 60%),
-        0 0 0 1px var(--accent-color);
-}
-
-.card-header {
-    padding: calc(var(--card-padding) * 0.8) var(--card-padding);
-    background: var(--header-bg);
-    border-bottom: var(--card-border-width) solid var(--border-color);
-    font-weight: 600;
-    color: var(--text-primary);
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-}
-
-.card-body {
-    padding: var(--card-padding);
-    flex: 1 1 auto;
-    color: var(--text-primary);
-    background: var(--bg-container);
-}
-
-.card-footer {
-    padding: calc(var(--card-padding) * 0.8) var(--card-padding);
-    background: var(--header-bg);
-    border-top: var(--card-border-width) solid var(--border-color);
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-}
-
-.card-glass {
-    background: color-mix(in oklch, var(--card-bg), transparent 15%);
-    backdrop-filter: var(--glass-blur);
-    border-color: color-mix(in oklch, var(--border-color), white 30%);
-}
-
-.card-elevated {
-    --card-shadow-color: color-mix(in oklch, var(--border-color), black 30%);
-    box-shadow: 0 3px 6px var(--card-shadow-color),
-        0 8px 24px color-mix(in oklch, var(--card-shadow-color), transparent 70%);
-}
-
-.card-floating {
-    position: relative;
-    top: 0;
-    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-
-.card-floating:hover {
-    top: -4px;
-    box-shadow: 0 12px 28px color-mix(in oklch, var(--border-color), transparent 60%),
-        0 0 0 1px var(--accent-color);
-}
-
-.card-badge {
-    position: absolute;
-    top: -0.5rem;
-    right: 1rem;
-    background: var(--btn-danger-bg);
-    color: var(--text-primary);
-    padding: 0.25rem 0.75rem;
-    border-radius: calc(var(--radius) * 2);
-    font-size: 0.75rem;
-    font-weight: bold;
-    box-shadow: 0 2px 4px oklch(0% 0 0 / 0.2);
-    z-index: 1;
-}
-
-@media (max-width: 768px) {
-    .card {
-        --card-padding: 1rem;
-        border-radius: calc(var(--radius) * 0.8);
-    }
-
-    .card-elevated {
-        box-shadow: 0 2px 4px color-mix(in oklch, var(--border-color), transparent 70%),
-            0 4px 12px color-mix(in oklch, var(--border-color), transparent 80%);
-    }
-}
-
-@media (prefers-color-scheme: dark) {
-    .card {
-        --card-shadow-color: oklch(0% 0 0 / 0.4);
-    }
-
-    .card-glass {
-        background: color-mix(in oklch, var(--card-bg), transparent 20%);
-        border-color: color-mix(in oklch, var(--border-color), black 30%);
-    }
-}
-
-[data-theme="dark"] .container-sm .card {
-    --glow-base: var(--base-hue);
-    --glow-primary: oklch(82% 0.32 var(--glow-base));
-    --glow-secondary: oklch(78% 0.28 calc(var(--glow-base) + 10));
-    border: 1px solid color-mix(in oklch, var(--glow-primary), transparent 20%);
-    box-shadow: 0 2px 8px 1px color-mix(in oklch, var(--glow-primary), transparent 40%),
-        0 4px 24px 2px color-mix(in oklch, var(--glow-secondary), transparent 60%),
-        inset 0 0 12px color-mix(in oklch, var(--glow-primary), transparent 70%);
-    transform: translateY(-2px) !important;
-    transition: all 0.25s ease-out;
-    animation: breath 3s ease-in-out infinite;
-}
-
-[data-theme="dark"] .container-sm .card:hover {
-    --glow-primary: oklch(88% 0.35 var(--glow-base));
-    --glow-secondary: oklch(85% 0.3 calc(var(--glow-base) + 15));
-    box-shadow: 0 4px 16px 2px color-mix(in oklch, var(--glow-primary), transparent 30%),
-        0 8px 32px 4px color-mix(in oklch, var(--glow-secondary), transparent 50%),
-        inset 0 0 24px color-mix(in oklch, var(--glow-primary), transparent 60%);
-    transform: translateY(-4px) !important;
-    /* animation-play-state: paused; */
-}
-
-@keyframes breath {
-
-    0%,
-    100% {
-        --glow-primary: oklch(82% 0.32 var(--glow-base));
-        --glow-secondary: oklch(78% 0.28 calc(var(--glow-base) + 10));
-        box-shadow: 0 2px 8px 1px color-mix(in oklch, var(--glow-primary), transparent 40%),
-            0 4px 24px 2px color-mix(in oklch, var(--glow-secondary), transparent 60%),
-            inset 0 0 12px color-mix(in oklch, var(--glow-primary), transparent 70%);
-    }
-
-    50% {
-        --glow-primary: oklch(88% 0.35 var(--glow-base));
-        --glow-secondary: oklch(85% 0.3 calc(var(--glow-base) + 15));
-        box-shadow: 0 4px 16px 2px color-mix(in oklch, var(--glow-primary), transparent 30%),
-            0 8px 32px 4px color-mix(in oklch, var(--glow-secondary), transparent 50%),
-            inset 0 0 24px color-mix(in oklch, var(--glow-primary), transparent 60%);
-    }
-}
-
-[data-theme="dark"] .neko-title-style {
-    --glow-base: var(--base-hue);
-    --glow-primary: oklch(92% 0.35 var(--glow-base));
-    --glow-secondary: oklch(88% 0.3 calc(var(--glow-base) + 10));
-    animation: nekoBreath 3s ease-in-out infinite;
-    text-shadow: 1px 1px 0 color-mix(in oklch, var(--glow-primary), #999 50%),
-        2px 2px 0 color-mix(in oklch, var(--glow-primary), #888 50%),
-        3px 3px 0 color-mix(in oklch, var(--glow-primary), #777 50%),
-        4px 4px 0 color-mix(in oklch, var(--glow-primary), #666 50%),
-        0 0 10px color-mix(in oklch, var(--glow-primary), transparent 60%),
-        0 0 20px color-mix(in oklch, var(--glow-secondary), transparent 70%) !important;
-}
-
-[data-theme="dark"] .neko-title-style:hover {
-    --glow-primary: oklch(96% 0.38 var(--glow-base));
-    --glow-secondary: oklch(92% 0.32 calc(var(--glow-base) + 15));
-    text-shadow: 1px 1px 1px color-mix(in oklch, var(--glow-primary), #999 50%),
-        2px 2px 1px color-mix(in oklch, var(--glow-primary), #888 50%),
-        3px 3px 2px color-mix(in oklch, var(--glow-primary), #777 50%),
-        4px 4px 2px color-mix(in oklch, var(--glow-primary), #666 50%),
-        0 0 15px color-mix(in oklch, var(--glow-primary), transparent 50%),
-        0 0 30px color-mix(in oklch, var(--glow-secondary), transparent 60%) !important;
-}
-
-@keyframes nekoBreath {
-
-    0%,
-    100% {
-        --glow-primary: oklch(88% 0.32 var(--glow-base));
-        text-shadow: 1px 1px 0 color-mix(in oklch, var(--glow-primary), #999 50%),
-            2px 2px 0 color-mix(in oklch, var(--glow-primary), #888 50%),
-            3px 3px 0 color-mix(in oklch, var(--glow-primary), #777 50%),
-            4px 4px 0 color-mix(in oklch, var(--glow-primary), #666 50%),
-            0 0 8px color-mix(in oklch, var(--glow-primary), transparent 70%),
-            0 0 15px color-mix(in oklch, var(--glow-secondary), transparent 80%);
-    }
-
-    50% {
-        --glow-primary: oklch(96% 0.38 var(--glow-base));
-        text-shadow: 1px 1px 0 color-mix(in oklch, var(--glow-primary), #999 50%),
-            2px 2px 0 color-mix(in oklch, var(--glow-primary), #888 50%),
-            3px 3px 0 color-mix(in oklch, var(--glow-primary), #777 50%),
-            4px 4px 0 color-mix(in oklch, var(--glow-primary), #666 50%),
-            0 0 15px color-mix(in oklch, var(--glow-primary), transparent 50%),
-            0 0 30px color-mix(in oklch, var(--glow-secondary), transparent 60%);
-    }
-}
-
-.footer-text {
-    color: var(--accent-color) !important;
-    font-weight: 700;
-}
-
-.footer-text b {
-    font-weight: 800;
-    letter-spacing: 0.5px;
-}
-
-.log-content-container {
-    border: var(--border-strong);
-    border-radius: var(--radius);
-    margin-bottom: 0.5rem;
-    overflow: hidden;
-    box-shadow: var(--item-hover-shadow);
-    transition: var(--transition);
-}
-
-.log-actions {
-    padding: 0.5rem 0;
-    background: none !important;
-    border-radius: 0 !important;
-    border: none !important;
-    display: flex;
-    justify-content: center;
-}
-
-.log-actions.multiple-actions {
-    padding: 0.5rem;
-    background: none !important;
-    border-radius: 0 !important;
-    border: none !important;
-    justify-content: center;
-}
-
-.log-action-group {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    flex-wrap: wrap;
-    width: auto;
-    background: none !important;
-    border-radius: 0 !important;
-    border: none !important;
-}
-
-.log-content-container:hover {
-    border-color: var(--accent-color);
-    box-shadow: 0 4px 16px color-mix(in oklch, var(--accent-color), transparent 85%);
-}
-
-.log-content-area {
-    display: block;
-    width: 100%;
-    height: 330px;
-    margin-top: 15px;
-    margin-left: 15px;
-    padding: 0.75rem;
-    margin: 0;
-    font-family: Consolas, "Courier New", monospace;
-    font-size: 0.875rem;
-    line-height: 1.5;
-    color: var(--text-primary);
-    background: var(--bg-container);
-    border: 0;
-    border-radius: 0;
-    resize: vertical;
-    white-space: pre-wrap;
-    overflow: auto;
-    box-shadow: inset 0 1px 3px oklch(0% 0 0 / 0.1);
-    transition: var(--transition);
-}
-
-.log-content-area:focus {
-    outline: none;
-    box-shadow: inset 0 1px 3px oklch(0% 0 0 / 0.15),
-        0 0 0 2px var(--accent-color);
-}
-
-.btn-clear-log {
-    color: #fff;
-    background: var(--btn-danger-bg);
-    border: var(--border-strong);
-    padding: 0.375rem 0.75rem;
-    font-size: 0.875rem;
-    border-radius: calc(var(--radius) / 2);
-    transition: var(--transition);
-}
-
-.btn-clear-log:hover {
-    color: #fff;
-    background: color-mix(in oklch, var(--btn-danger-bg), black 10%);
-    transform: translateY(-1px);
-}
-
-.btn-schedule {
-    color: #fff;
-    background: var(--btn-primary-bg);
-    border: var(--border-strong);
-    padding: 0.375rem 0.75rem;
-    font-size: 0.875rem;
-    border-radius: calc(var(--radius) / 2);
-    transition: var(--transition);
-}
-
-.btn-schedule:hover {
-    color: #fff;
-    background: var(--btn-primary-hover);
-    box-shadow: 0 2px 8px color-mix(in oklch, var(--accent-color), transparent 80%);
-}
-
-.form-check {
-    margin-bottom: 0;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.form-check-input {
-    width: 1.1em;
-    height: 1.1em;
-    margin: 0;
-    background-color: var(--bg-container);
-    border: var(--border-strong);
-    appearance: none;
-    -webkit-appearance: none;
-    transition: var(--transition);
-}
-
-.form-check-input:checked {
-    background-color: var(--accent-color);
-    border-color: var(--accent-color);
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
-}
-
-.form-check-label {
-    color: var(--text-secondary);
-    font-size: 0.875rem;
-    cursor: pointer;
-}
-
-@media (max-width: 768px) {
-    .log-content-container {
-        border-radius: calc(var(--radius) * 0.8);
-    }
-
-    .log-action-group {
-        flex-direction: column;
-        align-items: stretch;
-        gap: 0.5rem;
-    }
-
-    .btn-clear-log,
-    .btn-schedule {
-        width: 100%;
-        justify-content: center;
-    }
-
-    .form-check {
-        justify-content: center;
-    }
-}
-
-@media (prefers-color-scheme: dark) {
-    .log-content-area {
-        box-shadow: inset 0 1px 3px oklch(0% 0 0 / 0.3);
-    }
-
-    .form-check-input {
-        background-color: var(--bg-body);
-    }
-}
-
-.table {
-    --bs-table-bg: var(--card-bg);
-    --bs-table-color: var(--text-primary);
-    --bs-table-border-color: var(--border-color);
-    --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
-}
-
-.img-thumbnail {
-    background: var(--bg-container);
-    border: var(--border-strong);
-}
-
-#toggleButton {
-    background-color: var(--sand-bg);
-}
-
-.modal-content {
-    background: var(--bg-container);
-    border: var(--border-strong);
-}
-
-.modal-header {
-    background: var(--header-bg);
-    border-bottom: 1px solid var(--border-color);
-}
-
-.modal-title {
-    color: var(--accent-color) !important;
-}
-
-.modal-body {
-    background: var(--card-bg);
-    color: var(--text-primary);
-}
-
-label {
-    color: var(--text-primary) !important;
-}
-
-.btn-primary,
-.btn-success,
-.btn-info,
-.btn-warning,
-.btn btn-danger,
-.btn-pink {
-    color: white !important;
-}
-
-.container-bg {
-    border-radius: 12px !important;
-    margin-top: 1rem !important;
-}
-
-.neko-title-style {
-    font-family: 'Cinzel Decorative', cursive;
-    font-weight: 900;
-    font-size: 80px;
-    letter-spacing: 4px;
-    text-align: center;
-    margin-top: 20px;
-    transition: all var(--bs-transition-speed);
-    color: #fff;
-    text-shadow: 1px 1px 0 #999,
-        2px 2px 0 #888,
-        3px 3px 0 #777,
-        4px 4px 0 #666,
-        5px 5px 10px rgba(0, 0, 0, 0.3);
-    transform-style: preserve-3d;
-    perspective: 1000px;
-}
-
-.neko-title-style:hover {
-    transform: rotateX(5deg) rotateY(-5deg) skew(-5deg);
-    text-shadow: 1px 1px 1px #999,
-        2px 2px 1px #888,
-        3px 3px 2px #777,
-        4px 4px 2px #666,
-        5px 5px 10px rgba(0, 0, 0, 0.4);
-}
-
-.form-select {
-    background-color: var(--card-bg) !important;
-}
-
-.form-control {
-    background-color: var(--card-bg) !important;
-    color: var(--text-primary) !important;
-}
-
-.form-control:focus {
-    background-color: var(--card-bg) !important;
-    border-color: #4eedf9 !important;
-    box-shadow: none !important;
-}
-
-table td,
-.alert.alert-info {
-    background-color: var(--card-bg) !important;
-    border: var(--border-strong) !important;
-}
-
-.form-control::placeholder {
-    color: var(--text-primary) !important;
-    opacity: 1;
-}
-
-.form-label,
-legend.form-label {
-    font-size: 1rem !important;
-    font-weight: 500 !important;
-    line-height: 1.5 !important;
-}
-
-#customTemplateUrl {
-    display: none;
-}
-
-input[type="text"] {
-    background-color: var(--header-bg);
-    color: var(--text-primary);
-    border: var(--border-strong);
-}
-
-#color-input {
-    background: transparent !important;
-    border: none !important;
-    color: white !important;
-    font-size: 0.9rem !important;
-    width: 100% !important;
-    text-align: center !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    box-shadow: none !important;
-    outline: none !important;
-}
-
-.input-wrapper {
-    position: relative;
-    display: inline-block;
-    width: 100%;
-}
-
-.fake-cursor {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(calc(-50% + 3.7ch), -50%);
-    color: white;
-    animation: blinkCursor 1s step-start infinite;
-    pointer-events: none;
-    font-size: 0.9rem;
-    font-weight: normal;
-}
-
-@keyframes blinkCursor {
-    50% {
-        opacity: 0;
-    }
-}
-
-footer {
-    margin-top: 10px !important;
-    padding: 8px 0;
-    color: var(--btn-primary-bg);
-    font-size: 1.1rem;
-    font-weight: 500;
-}
-
-footer p {
-    margin: 0;
-}
-
-h1 {
-    color: oklch(var(--l) var(--c) var(--base-hue)) !important;
-    font-weight: 900;
-}
-
-h2,
-h3,
-h4,
-h5,
-h6 {
-    color: var(--accent-color) !important;
-    font-weight: bold;
-}
-
-h1:hover,
-h2:hover {
-    opacity: 0.9;
-    transform: translateY(-1px);
-}
-
-a.link-primary:hover {
-    color: var(--ocean-bg) !important;
-}
-
-a.link-primary:hover svg,
-a.link-primary:hover svg path {
-    stroke: var(--ocean-bg) !important;
-    fill: var(--ocean-bg) !important;
-}
-
-.row>a.btn,
-.row>a.btn i,
-.row>a.btn span {
-    transition: color 0.3s ease;
-}
-
-.row>a.btn:hover,
-.row>a.btn:hover i,
-.row>a.btn:hover span {
-    color: var(--ocean-bg) !important;
-}
-
-.triangle-icon {
-    border-top: 12px solid var(--accent-color) !important;
-}
-
-table {
-    border-collapse: separate;
-    border-spacing: 0;
-    width: 100%;
-}
-
-thead.table-light th {
-    font-weight: 600;
-    padding: 0.85rem 1.25rem;
-    border: none !important;
-    background: var(--accent-color) !important;
-    color: #fff !important;
-    text-align: left;
-    font-size: 0.925rem;
-    transition: all 0.2s ease;
-}
-
-thead.table-light th:hover {
-    background: color-mix(in oklch, var(--accent-color), black 10%) !important;
-}
-
-thead.table-light tr:first-child th:first-child {
-    border-top-left-radius: var(--radius) !important;
-}
-
-thead.table-light tr:first-child th:last-child {
-    border-top-right-radius: var(--radius) !important;
-}
-
-thead.table-light th:not(:last-child)::after {
-    content: none;
-}
-
-.btn-primary,
-.btn-primary svg,
-.btn-primary svg * {
-    color: white !important;
-    stroke: white !important;
-}
-
-@media (max-width: 768px) {
-    h1 {
-        font-size: 1.8rem;
-    }
-
-    h2 {
-        font-size: 1.5rem;
-    }
-}
-
-.alert,
-.alert.alert-info ul,
-.alert.alert-info ul li {
-    color: var(--text-primary) !important;
-}
-
-button.btn,
-a.btn,
-input.btn {
-    transition: transform 0.2s ease !important;
-}
-
-button.btn:hover,
-a.btn:hover,
-input.btn:hover,
-button.btn:focus,
-a.btn:focus,
-input.btn:focus {
-    transform: scale(1.05) !important;
-}
-
-#logTabs .nav-link:hover {
-    color: var(--ocean-bg) !important;
-}
-
-svg.feather {
-    width: 20px !important;
-    height: 20px !important;
-    vertical-align: middle !important;
-    margin-right: 5px !important;
-    stroke: var(--btn-primary-bg) !important;
-    fill: none !important;
-}
-
-svg.feather:hover,
-.custom-icon:hover {
-    color: var(--btn-primary-bg);
-}
-
-.custom-icon {
-    color: var(--accent-color);
-    font-size: 18px;
-    vertical-align: middle;
-    margin-right: 5px;
-    transition: color 0.25s ease;
-}
-
-* {
-    scrollbar-width: thin;
-    scrollbar-color: var(--accent-color) var(--header-bg);
-}
-
-*::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-    background: transparent;
-}
-
-*::-webkit-scrollbar-track {
-    background: var(--header-bg);
-    border-radius: 3px;
-    margin: 4px 0;
-}
-
-*::-webkit-scrollbar-thumb {
-    background: var(--accent-color);
-    border-radius: 3px;
-    transition: background 0.3s ease;
-    min-height: 40px;
-    min-width: 40px;
-}
-
-*::-webkit-scrollbar-thumb:hover {
-    background: color-mix(in oklch, var(--accent-color), white 20%);
-}
-
-body {
-    color: var(--text-primary);
-    -webkit-backdrop-filter: blur(10px);
-    transition: all 0.3s ease;
-    font-family: 'Fredoka One', cursive;
-    font-weight: 400;
-    background: oklch(var(--bg-l) var(--base-chroma) var(--base-hue));
-}
-
-body.default-font {
-    font-family: system-ui, sans-serif;
-    font-weight: 400;
-}
-
-body.system-nofo-font {
-    font-family: 'Noto Serif SC';
-    font-weight: 400;
-}
-
-body.system-mono-font {
-    font-family: 'Comic Neue';
-    font-weight: 400;
-}
-
-body.dm-serif-font {
-    font-family: 'DM Serif Display';
-    font-weight: 400;
-}
-
-body.cinzel-font {
-    font-family: 'Cinzel Decorative';
-    font-weight: 700;
-}
-
-body.noto-sans-font {
-    font-family: 'Noto Sans';
-    font-weight: 400;
-}
-
-body.font-transition {
-    animation: fontFade 0.4s ease-in-out;
-}
-
-@keyframes fontFade {
-    0% {
-        opacity: 0.3;
-        transform: scale(0.98);
-    }
-
-    100% {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-.modal-backdrop {
-    background: oklch(0 0 0 / 0.4);
-}
-
-.color-preset {
-    transition: transform 0.2s ease;
-}
-
-.color-preset:hover {
-    transform: scale(1.1);
-}
-
-#color-input {
-    font-weight: 700 !important;
-    color: white !important;
-}
-
-@supports (color: oklch(1 0 0)) {
-    #color-input {
-        color: oklch(0.95 0 0) !important;
-    }
-}
-
-input,
-textarea,
-select,
-button {
-    font-family: inherit !important;
-}
-
-input[type=range] {
-    -webkit-appearance: none;
-    width: 100%;
-    height: 8px;
-    border-radius: 5px;
-    background: var(--accent-color) !important;
-    outline: none;
-    transition: background 0.3s ease;
-}
-
-input[type=range]:hover {
-    background: linear-gradient(to right,
-            var(--btn-primary-bg),
-            var(--accent-color)) !important;
-}
-
-input[type=range]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    background: #ffffff !important;
-    border: var(--border-strong) !important;
-    cursor: pointer;
-    transition: background 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
-}
-
-input[type=range]::-webkit-slider-thumb:hover {
-    background: #f0f0f0 !important;
-    transform: scale(1.2);
-}
-
-input[type=range]::-moz-range-thumb {
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    background: #ffffff !important;
-    border: 2px solid var(--accent-color) !important;
-    cursor: pointer;
-    transition: background 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
-}
-
-input[type=range]::-moz-range-thumb:hover {
-    background: #f0f0f0 !important;
-    transform: scale(1.2);
-}
-
-input[type=range]::-ms-thumb {
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    background: #ffffff !important;
-    border: 2px solid var(--accent-color) !important;
-    cursor: pointer;
-    transition: background 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
-}
-
-.panel-header h3,
-.panel-header button.close-icon,
-.panel-header button.close-icon i {
-    color: var(--accent-color) !important;
-}
-
-#modalWidthValue,
-#widthValue {
-    color: var(--text-primary) !important;
-}
-
-.btn {
-    border: none;
-    border-radius: var(--radius);
-    transition: var(--transition);
-    font-weight: 500;
-    position: relative;
-    overflow: visible;
-}
-
-.btn-primary {
-    background: var(--btn-primary-bg);
-    color: var(--text-primary);
-}
-
-.btn-primary:hover {
-    background: var(--btn-primary-hover);
-    box-shadow: var(--item-hover-shadow);
-}
-
-.btn-success {
-    background: var(--btn-success-bg);
-    color: var(--success-text);
-}
-
-.btn-success:hover {
-    background: color-mix(in oklch, var(--btn-success-bg), white 10%);
-    box-shadow: var(--item-hover-shadow);
-}
-
-.btn-info {
-    background: var(--btn-info-bg);
-    color: var(--info-text);
-}
-
-.btn-info:hover {
-    background: color-mix(in oklch, var(--btn-info-bg), white 10%);
-    box-shadow: var(--item-hover-shadow);
-}
-
-.btn-danger {
-    background: oklch(55% 0.25 25);
-    color: oklch(95% 0.05 25);
-}
-
-.btn-danger:hover {
-    background: oklch(60% 0.25 25);
-}
-
-.btn-warning {
-    background: oklch(75% 0.22 80);
-    color: oklch(25% 0.05 80);
-}
-
-.btn-warning:hover {
-    background: oklch(80% 0.22 80);
-}
-
-[data-theme="light"] {
-    --danger-text: oklch(95% 0.05 25);
-    --warning-text: oklch(20% 0.15 80);
-
-    .btn-danger {
-        background: oklch(60% 0.3 25);
-        color: var(--danger-text);
-    }
-
-    .btn-warning {
-        background: oklch(85% 0.25 80);
-        color: var(--warning-text);
-    }
-}
-
-.btn-outline-primary {
-    border: 1px solid var(--btn-primary-bg);
-    color: var(--btn-primary-bg);
-    background: transparent;
-}
-
-.btn-outline-primary:hover {
-    background: var(--btn-primary-bg);
-    color: var(--text-primary);
-}
-
-.btn-sm {
-    padding: 0.25rem 0.5rem;
-    font-size: 0.875rem;
-}
-
-.btn-lg {
-    padding: 0.5rem 1rem;
-    font-size: 1.25rem;
-}
-
-.ace_search {
-    background: var(--bg-container) !important;
-    border: var(--border-strong) !important;
-    border-radius: var(--radius);
-    box-shadow: var(--item-hover-shadow);
-    padding: 8px 12px !important;
-    color: var(--text-primary);
-    backdrop-filter: var(--glass-blur);
-    transition: var(--transition);
-}
-
-.ace_search_form,
-.ace_replace_form {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 8px;
-}
-
-.ace_search_field {
-    background: var(--card-bg) !important;
-    border: var(--border-strong) !important;
-    color: var(--text-primary) !important;
-    padding: 6px 12px !important;
-    border-radius: calc(var(--radius) - 4px) !important;
-    font-size: 14px !important;
-    min-width: 200px;
-    transition: var(--transition);
-}
-
-.ace_search_field:focus {
-    border-color: var(--accent-color) !important;
-    outline: none;
-    box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent-color), transparent 70%);
-}
-
-.ace_searchbtn {
-    background: var(--btn-primary-bg) !important;
-    color: white !important;
-    border: none !important;
-    border-radius: calc(var(--radius) - 4px) !important;
-    background-image: none !important;
-    padding: 6px 12px !important;
-    font-size: 13px !important;
-    cursor: pointer;
-    transition: var(--transition);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 60px;
-    filter: contrast(1.2) brightness(1.1);
-}
-
-.ace_searchbtn:hover {
-    background: var(--btn-primary-hover) !important;
-    color: white !important;
-}
-
-.ace_searchbtn.prev,
-.ace_searchbtn.next {
-    position: relative;
-}
-
-.ace_searchbtn.prev::before,
-.ace_searchbtn.next::before {
-    content: "";
-    font-size: 14px;
-    color: white !important;
-    filter: contrast(1.3);
-    display: inline-block;
-    line-height: 1;
-}
-
-.ace_searchbtn.prev::before {
-    content: "↑";
-}
-
-.ace_searchbtn.next::before {
-    content: "↓";
-}
-
-.ace_searchbtn .ace_icon,
-.ace_searchbtn::after {
-    display: none !important;
-    opacity: 0 !important;
-}
-
-.ace_searchbtn_close {
-    background: transparent !important;
-    color: var(--text-secondary) !important;
-    position: absolute;
-    right: 12px;
-    top: 12px;
-    cursor: pointer;
-    font-size: 16px;
-    transition: var(--transition);
-    width: 20px;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 3px;
-}
-
-.ace_searchbtn_close:hover {
-    color: white !important;
-    background: var(--btn-primary-bg) !important;
-}
-
-.ace_searchbtn_close::before {
-    content: "×";
-}
-
-.ace_search_options {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-top: 8px;
-}
-
-.ace_button {
-    background: var(--btn-primary-bg) !important;
-    color: white !important;
-    border: none !important;
-    border-radius: calc(var(--radius) - 4px) !important;
-    padding: 4px 8px !important;
-    font-size: 12px !important;
-    cursor: pointer;
-    transition: var(--transition);
-    filter: contrast(1.2);
-}
-
-.ace_button:hover {
-    background: var(--btn-primary-hover) !important;
-    color: white !important;
-}
-
-.ace_search_counter {
-    color: var(--text-secondary);
-    font-size: 12px;
-    margin-right: auto;
-}
-
-[action="toggleRegexpMode"] {
-    background: var(--btn-info-bg) !important;
-    color: white !important;
-}
-
-[action="toggleCaseSensitive"] {
-    background: var(--btn-warning-bg) !important;
-    color: white !important;
-}
-
-[action="toggleWholeWords"] {
-    background: var(--btn-success-bg) !important;
-    color: white !important;
-}
-
-[action="searchInSelection"] {
-    background: var(--ocean-bg) !important;
-    color: white !important;
-}
-
-[action="toggleReplace"] {
-    background: var(--lavender-bg) !important;
-    color: white !important;
-}
-
-#editorStatus {
-    font-weight: bold !important;
-    font-size: 0.9rem !important;
-    color: var(--text-secondary) !important;
-}
-
-#editorStatus #lineColumnDisplay,
-#editorStatus #charCountDisplay {
-    font-size: 1.1rem !important;
-    color: var(--info-text) !important;
-    transition: var(--transition) !important;
-}
-
-#editorStatus:hover #lineColumnDisplay,
-#editorStatus:hover #charCountDisplay {
-    color: var(--accent-color) !important;
-}
-
-[data-theme="light"] #editorStatus #lineColumnDisplay,
-[data-theme="light"] #editorStatus #charCountDisplay {
-    color: var(--info-text) !important;
-}
-
-.btn-close {
-    width: 15px !important;
-    height: 15px !important;
-    background-color: #30e8dc !important;
-    border-radius: 6px !important;
-    border: none !important;
-    position: relative !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    cursor: pointer !important;
-    transition: background-color 0.2s ease, transform 0.2s ease !important;
-}
-
-.btn-close::before,
-.btn-close::after {
-    content: '' !important;
-    position: absolute !important;
-    width: 12px !important;
-    height: 2px !important;
-    background-color: #ff4d4f !important;
-    border-radius: 2px !important;
-    transition: background-color 0.2s ease !important;
-}
-
-.btn-close::before {
-    transform: rotate(45deg) !important;
-}
-
-.btn-close::after {
-    transform: rotate(-45deg) !important;
-}
-
-.btn-close:hover {
-    background-color: #30e8dc !important;
-    transform: scale(1.1) !important;
-}
-
-.btn-close:hover::before,
-.btn-close:hover::after {
-    background-color: #d9363e !important;
-}
-
-.btn-close:active {
-    transform: scale(0.9) !important;
-}
-
-@media (max-width: 768px) {
-    .control-panel {
-        display: flex;
-        flex-direction: column;
-        max-height: 100vh;
-    }
-
-    .buttons-grid {
-        overflow-y: auto;
-        flex-grow: 1;
-        padding-right: 8px;
-        -webkit-overflow-scrolling: touch;
-    }
-}
-
-@media (max-width: 768px) {
-    #toggle-ip {
-        display: none !important;
-    }
-}
-
-.scrollable-container:hover {
-    overflow: auto;
-}
-
-:root {
-    --container-width: 2350px;
-    --modal-max-width: 1100px;
-}
-
-.container-sm {
-    width: var(--container-width) !important;
-    max-width: 100%;
-    margin: 0 auto;
-}
-
-.modal-xl {
-    max-width: var(--modal-max-width) !important;
-    margin: 0 auto;
-}
-
-@media (max-width: 768px) {
-    .modal-xl {
-        max-width: 100%;
-    }
-}
-
-[data-theme="dark"] {
-    --glow-base: var(--base-hue);
-    --glow-primary: oklch(88% 0.35 var(--glow-base));
-    --glow-secondary: oklch(85% 0.3 calc(var(--glow-base) + 15));
-}
-
-[data-theme="dark"] .form-select,
-[data-theme="dark"] .form-control:disabled,
-[data-theme="dark"] input[type="text"] {
-    border: 1px solid color-mix(in oklch, var(--glow-primary), transparent 30%);
-    box-shadow: 0 0 8px 1px color-mix(in oklch, var(--glow-primary), transparent 60%),
-        inset 0 -4px 12px color-mix(in oklch, var(--glow-primary), transparent 80%);
-    transition: box-shadow 0.3s ease;
-}
-
-[data-theme="dark"] .form-select:hover,
-[data-theme="dark"] .form-select:focus,
-[data-theme="dark"] input[type="text"]:hover,
-[data-theme="dark"] input[type="text"]:focus {
-    box-shadow: 0 0 12px 2px color-mix(in oklch, var(--glow-primary), transparent 40%),
-        inset 0 -6px 16px color-mix(in oklch, var(--glow-primary), transparent 70%);
-}
-
-[data-theme="dark"] .form-control:disabled {
-    opacity: 0.7;
-    box-shadow: 0 0 4px 0 color-mix(in oklch, var(--glow-primary), transparent 70%),
-        inset 0 -2px 8px color-mix(in oklch, var(--glow-primary), transparent 90%);
-}
-
-[data-theme="dark"] .form-check-input[type="checkbox"] {
-    border: 1px solid color-mix(in oklch, var(--glow-primary), transparent 50%);
-    background-color: color-mix(in oklch, var(--bg-body), transparent 20%);
-    box-shadow: 0 0 6px color-mix(in oklch, var(--glow-primary), transparent 70%);
-    transition: all 0.3s ease;
-}
-
-[data-theme="dark"] .form-check-input:checked[type="checkbox"] {
-    background-color: var(--glow-primary);
-    border-color: var(--glow-primary);
-    box-shadow: 0 0 8px var(--glow-primary),
-        inset 0 0 4px white;
-}
-
-[data-theme="dark"] .form-check-input[type="radio"] {
-    border: 1px solid color-mix(in oklch, var(--glow-primary), transparent 50%);
-    background-color: color-mix(in oklch, var(--bg-body), transparent 20%);
-    box-shadow: 0 0 6px color-mix(in oklch, var(--glow-primary), transparent 70%);
-    transition: all 0.3s ease;
-}
-
-[data-theme="dark"] .form-check-input:checked[type="radio"] {
-    background-color: var(--glow-primary);
-    border-color: var(--glow-primary);
-    box-shadow: 0 0 8px var(--glow-primary),
-        inset 0 0 6px color-mix(in oklch, white, transparent 60%);
-}
-
-[data-theme="dark"] .form-check-input:hover {
-    box-shadow: 0 0 10px color-mix(in oklch, var(--glow-primary), transparent 50%);
-}
-
-[data-theme="dark"] .form-check-input:disabled {
-    opacity: 0.5;
-    box-shadow: 0 0 4px color-mix(in oklch, var(--glow-primary), transparent 80%);
-}
-
-[data-theme="dark"] table a svg {
-    filter: drop-shadow(0 0 2px color-mix(in oklch, var(--glow-primary), transparent 30%));
-    transition: filter 0.3s ease;
-}
-
-[data-theme="dark"] table a:hover svg {
-    filter: drop-shadow(0 0 6px var(--glow-primary));
-}
-
-[data-theme="dark"] #dynamicTitle,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    position: relative;
-    color: color-mix(in oklch, var(--glow-primary), white 20%);
-    text-shadow: 0 0 5px color-mix(in oklch, var(--glow-primary), transparent 40%),
-        0 0 15px color-mix(in oklch, var(--glow-primary), transparent 70%);
-    animation: text-glow-pulse 3s ease-in-out infinite alternate;
-}
-
-@keyframes text-glow-pulse {
-    0% {
-        text-shadow: 0 0 5px color-mix(in oklch, var(--glow-primary), transparent 40%),
-            0 0 15px color-mix(in oklch, var(--glow-primary), transparent 70%);
-    }
-
-    100% {
-        text-shadow: 0 0 10px color-mix(in oklch, var(--glow-primary), transparent 30%),
-            0 0 25px color-mix(in oklch, var(--glow-primary), transparent 60%);
-    }
-}
-
-.rounded-3.border {
-    border: var(--border-strong) !important;
-}
-</style>
\ No newline at end of file