☰

M3Unator - Web Directory Playlist Creator

Create M3U/M3U8 playlists from directory listing pages. Automatically finds video and audio files in web server indexes.

目前為 2024-12-25 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         M3Unator - Web Directory Playlist Creator
  3. // @namespace    https://github.com/hasanbeder/M3Unator
  4. // @version      1.0.1
  5. // @description  Create M3U/M3U8 playlists from directory listing pages. Automatically finds video and audio files in web server indexes.
  6. // @author       Hasan Beder
  7. // @license      GPL-3.0
  8. // @match        *://*/*
  9. // @grant        GM_addStyle
  10. // @icon         data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmNWMyZTciIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWdvbiBwb2ludHM9IjIzIDcgMTYgMTIgMjMgMTcgMjMgNyIvPjxyZWN0IHg9IjEiIHk9IjUiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNCIgcng9IjIiIHJ5PSIyIi8+PC9zdmc+
  11. // @homepageURL  https://github.com/hasanbeder/M3Unator
  12. // @supportURL   https://github.com/hasanbeder/M3Unator/issues
  13. // @run-at       document-end
  14. // @noframes     true
  15. // ==/UserScript==
  16.  
  17. (function() {
  18.     'use strict';
  19.  
  20.     if (!document.title.includes('Index of') && !document.querySelector('div#table-list')) {
  21.         console.log('This page is not an Index page, M3Unator disabled.');
  22.         return;
  23.     }
  24.  
  25.     function parseLiteSpeedDirectory() {
  26.         const links = [];
  27.         const rows = document.querySelectorAll('#table-content tr');
  28.         
  29.         rows.forEach(row => {
  30.             const linkElement = row.querySelector('a');
  31.             if (linkElement && !linkElement.textContent.includes('Parent Directory')) {
  32.                 const href = linkElement.getAttribute('href');
  33.                 if (href) {
  34.                     links.push(new URL(href, window.location.href).href);
  35.                 }
  36.             }
  37.         });
  38.         
  39.         return links;
  40.     }
  41.  
  42.     // Add LiteSpeed support to the existing getDirectoryLinks function
  43.     function getDirectoryLinks() {
  44.         const links = [];
  45.         
  46.         // LiteSpeed directory listing
  47.         if (document.querySelector('div#table-list')) {
  48.             const rows = document.querySelectorAll('#table-content tr');
  49.             rows.forEach(row => {
  50.                 const linkElement = row.querySelector('a');
  51.                 if (linkElement && !linkElement.textContent.includes('Parent Directory')) {
  52.                     const href = link.getAttribute('href');
  53.                     if (href) {
  54.                         links.push(new URL(href, window.location.href).href);
  55.                     }
  56.                 }
  57.             });
  58.             return links;
  59.         }
  60.         
  61.         // Apache/Nginx style directory listing
  62.         const anchors = document.querySelectorAll('a');
  63.         anchors.forEach(anchor => {
  64.             if (!anchor.textContent.includes('Parent Directory')) {
  65.                 const href = anchor.getAttribute('href');
  66.                 if (href && !href.startsWith('?') && !href.startsWith('/')) {
  67.                     links.push(new URL(href, window.location.href).href);
  68.                 }
  69.             }
  70.         });
  71.         
  72.         return links;
  73.     }
  74.  
  75.     GM_addStyle(`
  76.         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
  77.  
  78.         [class^="M3Unator"] {
  79.             font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  80.         }
  81.  
  82.         .M3Unator-title {
  83.             font-weight: 700;
  84.             letter-spacing: -0.02em;
  85.         }
  86.  
  87.         .M3Unator-input-group label {
  88.             font-weight: 500;
  89.             letter-spacing: -0.01em;
  90.         }
  91.  
  92.         .M3Unator-input {
  93.             font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  94.             font-size: 0.9375rem;
  95.             letter-spacing: -0.01em;
  96.         }
  97.  
  98.         .M3Unator-button {
  99.             font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  100.             font-weight: 600;
  101.             letter-spacing: -0.01em;
  102.         }
  103.  
  104.         .M3Unator-control-btn {
  105.             font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  106.             font-weight: 500;
  107.             letter-spacing: -0.01em;
  108.         }
  109.  
  110.         .M3Unator-log {
  111.             font-family: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  112.             font-size: 0.8125rem;
  113.             letter-spacing: -0.01em;
  114.             line-height: 1.5;
  115.         }
  116.  
  117.         .M3Unator-log-counter {
  118.             font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  119.             font-weight: 600;
  120.             letter-spacing: -0.01em;
  121.         }
  122.  
  123.         .M3Unator-container {
  124.             position: fixed;
  125.             inset: 0;
  126.             background: rgba(0, 0, 0, 0.75);
  127.             backdrop-filter: blur(8px);
  128.             display: none;
  129.             place-items: center;
  130.             padding: 1rem;
  131.             z-index: 9999;
  132.         }
  133.  
  134.         .M3Unator-container[data-visible="true"] {
  135.             display: grid;
  136.         }
  137.  
  138.         .M3Unator-overlay {
  139.             position: fixed;
  140.             inset: 0;
  141.             background: transparent;
  142.             z-index: 9998;
  143.         }
  144.  
  145.         body.modal-open {
  146.             overflow: hidden;
  147.             pointer-events: none; /* Arka plan tıklamalarını engelle */
  148.         }
  149.  
  150.         body.modal-open .M3Unator-container,
  151.         body.modal-open .M3Unator-popup {
  152.             pointer-events: all; /* Modal içeriğine tıklamaya izin ver */
  153.         }
  154.  
  155.         .M3Unator-popup {
  156.             background: #11111b;
  157.             color: #cdd6f4;
  158.             width: 100%;
  159.             max-width: 480px;
  160.             border-radius: 12px;
  161.             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  162.             overflow: hidden;
  163.             animation: slideUp 0.3s ease;
  164.             position: absolute;
  165.         }
  166.  
  167.         .M3Unator-header {
  168.             padding: 1.25rem 1.618rem;
  169.             background: #1e1e2e;
  170.             color: #cdd6f4;
  171.             display: flex;
  172.             align-items: center;
  173.             justify-content: space-between;
  174.             cursor: move;
  175.             user-select: none;
  176.             border-bottom: 1px solid #313244;
  177.         }
  178.  
  179.         .M3Unator-title {
  180.             display: flex;
  181.             align-items: center;
  182.             gap: 0.75rem;
  183.             margin: 0;
  184.             font-size: 1.25rem;
  185.             font-weight: 600;
  186.             line-height: 1;
  187.         }
  188.  
  189.         .M3Unator-title svg {
  190.             width: 24px;
  191.             height: 24px;
  192.             color: #f5c2e7;
  193.             filter: drop-shadow(0 0 8px rgba(245, 194, 231, 0.4));
  194.             flex-shrink: 0;
  195.             display: flex;
  196.             align-items: center;
  197.             justify-content: center;
  198.             margin-top: 1px;
  199.         }
  200.  
  201.         .M3Unator-title span {
  202.             display: flex;
  203.             align-items: center;
  204.             line-height: 24px;
  205.             background: linear-gradient(90deg,
  206.                 #f5c2e7,
  207.                 #cba6f7,
  208.                 #89b4fa,
  209.                 #a6e3a1,
  210.                 #f5c2e7
  211.             );
  212.             background-size: 300% auto;
  213.             -webkit-background-clip: text;
  214.             background-clip: text;
  215.             -webkit-text-fill-color: transparent;
  216.             animation: gradient 3s linear infinite;
  217.         }
  218.  
  219.         .M3Unator-close {
  220.             background: rgba(203, 166, 247, 0.1);
  221.             border: none;
  222.             color: #cba6f7;
  223.             width: 32px;
  224.             height: 32px;
  225.             border-radius: 8px;
  226.             display: grid;
  227.             place-items: center;
  228.             cursor: pointer;
  229.             transition: all 0.2s ease;
  230.         }
  231.  
  232.         .M3Unator-close:hover {
  233.             background: rgba(203, 166, 247, 0.2);
  234.             transform: rotate(360deg);
  235.         }
  236.  
  237.         .M3Unator-close svg {
  238.             width: 18px;
  239.             height: 18px;
  240.         }
  241.  
  242.         .M3Unator-content {
  243.             padding: 0.75rem;
  244.             display: flex;
  245.             flex-direction: column;
  246.             gap: 0.75rem;
  247.         }
  248.  
  249.         .M3Unator-input-group {
  250.             margin-bottom: 0;
  251.         }
  252.  
  253.         .M3Unator-input-group label {
  254.             display: block;
  255.             margin-bottom: 0.5rem;
  256.             font-weight: 500;
  257.             color: #bac2de;
  258.         }
  259.  
  260.         .M3Unator-input {
  261.             width: 100%;
  262.             height: 42px; /* Create Playlist butonu ile aynı yükseklik */
  263.             padding: 0 12px;
  264.             border: 1px solid #45475a;
  265.             border-radius: 8px;
  266.             background: #1e1e2e;
  267.             color: #f5c2e7;
  268.             font-size: 14px;
  269.             transition: all 0.2s ease;
  270.             box-sizing: border-box;
  271.         }
  272.  
  273.         .M3Unator-input:focus {
  274.             outline: none;
  275.             border-color: #f5c2e7;
  276.             box-shadow: 0 0 0 2px rgba(245, 194, 231, 0.1);
  277.         }
  278.  
  279.         .M3Unator-input::placeholder {
  280.             color: #6c7086;
  281.             opacity: 1;
  282.         }
  283.  
  284.         .M3Unator-toggle-container {
  285.             position: relative;
  286.             display: flex;
  287.             align-items: center;
  288.             justify-content: center;
  289.         }
  290.  
  291.         .M3Unator-toggle-container input[type="checkbox"] {
  292.             display: none;
  293.         }
  294.  
  295.         .M3Unator-toggle-container span {
  296.             width: 48px;
  297.             height: 48px;
  298.             background: #1e1e2e;
  299.             border: 2px solid #45475a;
  300.             border-radius: 12px;
  301.             display: inline-flex;
  302.             align-items: center;
  303.             justify-content: center;
  304.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  305.             position: relative;
  306.         }
  307.  
  308.         .M3Unator-toggle-container svg {
  309.             width: 24px;
  310.             height: 24px;
  311.             opacity: 0.7;
  312.             transition: all 0.3s ease;
  313.             position: absolute;
  314.             top: 50%;
  315.             left: 50%;
  316.             transform: translate(-50%, -50%);
  317.         }
  318.  
  319.         .M3Unator-toggle-container input[type="checkbox"]:checked + span {
  320.             background: rgba(203, 166, 247, 0.1);
  321.             border-color: #cba6f7;
  322.             box-shadow: 0 0 20px rgba(203, 166, 247, 0.2);
  323.         }
  324.  
  325.         .M3Unator-toggle-container input[type="checkbox"]:checked + span svg {
  326.             opacity: 1;
  327.             color: #cba6f7;
  328.             filter: drop-shadow(0 0 8px rgba(203, 166, 247, 0.4));
  329.         }
  330.  
  331.         .M3Unator-toggle-container span:hover {
  332.             background: #313244;
  333.             transform: translateY(-2px);
  334.         }
  335.  
  336.         .M3Unator-toggle-container span:active {
  337.             transform: translateY(1px);
  338.         }
  339.  
  340.         .M3Unator-toggle-container input[type="checkbox"]:checked + span:hover {
  341.             background: rgba(203, 166, 247, 0.2);
  342.         }
  343.  
  344.         .M3Unator-toggle-container span:active {
  345.             transform: translateY(1px);
  346.         }
  347.  
  348.         .M3Unator-toggle-container svg {
  349.             width: 24px;
  350.             height: 24px;
  351.             opacity: 0.8;
  352.             transition: all 0.2s ease;
  353.         }
  354.  
  355.         .M3Unator-toggle-container input[type="checkbox"]:checked + span svg {
  356.             opacity: 1;
  357.             color: #cba6f7;
  358.         }
  359.  
  360.         .M3Unator-toggle-group {
  361.             display: flex;
  362.             gap: 0.75rem;
  363.             margin: 0.75rem 0;
  364.             justify-content: center;
  365.             background: rgba(30, 30, 46, 0.4);
  366.             padding: 0.75rem;
  367.             border-radius: 12px;
  368.             backdrop-filter: blur(8px);
  369.         }
  370.  
  371.         [title]:hover::after {
  372.             content: attr(title);
  373.             position: absolute;
  374.             bottom: calc(100% + 5px);
  375.             left: 50%;
  376.             transform: translateX(-50%);
  377.             padding: 0.5rem 0.75rem;
  378.             background: rgba(30, 30, 46, 0.95);
  379.             color: #cdd6f4;
  380.             font-size: 0.875rem;
  381.             white-space: nowrap;
  382.             border-radius: 6px;
  383.             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  384.             z-index: 1000;
  385.             border: 1px solid #313244;
  386.             text-align: center;
  387.             backdrop-filter: blur(8px);
  388.             pointer-events: none;
  389.         }
  390.  
  391.         .M3Unator-button {
  392.             width: 100%;
  393.             height: 42px;
  394.             padding: 0 16px;
  395.             border: none;
  396.             border-radius: 8px;
  397.             background: #f5c2e7;
  398.             color: #1e1e2e;
  399.             font-weight: 600;
  400.             font-size: 14px;
  401.             cursor: pointer;
  402.             transition: all 0.2s ease;
  403.             display: flex;
  404.             align-items: center;
  405.             justify-content: center;
  406.             gap: 8px;
  407.         }
  408.  
  409.         .M3Unator-button:hover {
  410.             background: #f5c2e7;
  411.             transform: translateY(-1px);
  412.             box-shadow: 0 4px 12px rgba(245, 194, 231, 0.2);
  413.         }
  414.  
  415.         .M3Unator-button:active {
  416.             transform: translateY(0);
  417.         }
  418.  
  419.         .M3Unator-button:disabled {
  420.             opacity: 0.5;
  421.             cursor: not-allowed;
  422.         }
  423.  
  424.         .M3Unator-launcher {
  425.             position: fixed;
  426.             top: 1rem;
  427.             right: 1.618rem;
  428.             height: 48px;
  429.             padding: 0 1.25rem;
  430.             border-radius: 12px;
  431.             background: rgba(30, 30, 46, 0.95);
  432.             border: 2px solid #313244;
  433.             cursor: pointer;
  434.             box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  435.             display: flex;
  436.             align-items: center;
  437.             gap: 0.75rem;
  438.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  439.             z-index: 9998;
  440.             backdrop-filter: blur(12px);
  441.         }
  442.  
  443.         .M3Unator-launcher:hover {
  444.             background: rgba(30, 30, 46, 0.98);
  445.             border-color: #45475a;
  446.             transform: translateY(-2px);
  447.             box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  448.         }
  449.  
  450.         .M3Unator-launcher svg {
  451.             width: 24px;
  452.             height: 24px;
  453.             color: #f5c2e7;
  454.             filter: drop-shadow(0 0 8px rgba(245, 194, 231, 0.4));
  455.         }
  456.  
  457.         .M3Unator-launcher span {
  458.             font-weight: 600;
  459.             font-size: 0.95rem;
  460.             background: linear-gradient(90deg,
  461.                 #f5c2e7,
  462.                 #cba6f7,
  463.                 #89b4fa,
  464.                 #a6e3a1,
  465.                 #f5c2e7
  466.             );
  467.             background-size: 300% auto;
  468.             -webkit-background-clip: text;
  469.             background-clip: text;
  470.             -webkit-text-fill-color: transparent;
  471.             animation: gradient 3s linear infinite;
  472.         }
  473.  
  474.         @keyframes gradient {
  475.             0% { background-position: 0% 50%; filter: hue-rotate(0deg); }
  476.             50% { background-position: 100% 50%; filter: hue-rotate(180deg); }
  477.             100% { background-position: 0% 50%; filter: hue-rotate(360deg); }
  478.         }
  479.  
  480.         .M3Unator-dropdown {
  481.             position: relative;
  482.             width: 100%;
  483.         }
  484.  
  485.         .M3Unator-dropdown-button {
  486.             width: 100%;
  487.             padding: 0.618rem;
  488.             background: #1e1e2e;
  489.             border: 1px solid #313244;
  490.             border-radius: 8px;
  491.             color: #cdd6f4;
  492.             font-size: 0.875rem;
  493.             text-align: left;
  494.             cursor: pointer;
  495.             transition: all 0.2s ease;
  496.             display: flex;
  497.             align-items: center;
  498.             justify-content: space-between;
  499.         }
  500.  
  501.         .M3Unator-dropdown-button:hover {
  502.             border-color: #45475a;
  503.             background: rgba(30, 30, 46, 0.8);
  504.         }
  505.  
  506.         .M3Unator-dropdown-button svg {
  507.             width: 16px;
  508.             height: 16px;
  509.             min-width: 16px;
  510.             min-height: 16px;
  511.             transition: transform 0.2s ease;
  512.         }
  513.  
  514.         .M3Unator-dropdown.active .M3Unator-dropdown-button {
  515.             border-color: #cba6f7;
  516.             border-radius: 8px 8px 0 0;
  517.         }
  518.  
  519.         .M3Unator-dropdown.active .M3Unator-dropdown-button svg {
  520.             transform: rotate(180deg);
  521.         }
  522.  
  523.         .M3Unator-dropdown-menu {
  524.             position: absolute;
  525.             top: 100%;
  526.             left: 0;
  527.             right: 0;
  528.             background: #1e1e2e;
  529.             border: 1px solid #cba6f7;
  530.             border-top: none;
  531.             border-radius: 0 0 8px 8px;
  532.             overflow: hidden;
  533.             z-index: 1000;
  534.             display: none;
  535.             animation: dropdownSlide 0.2s ease;
  536.             user-select: none;
  537.         }
  538.  
  539.         .M3Unator-dropdown.active .M3Unator-dropdown-menu {
  540.             display: block;
  541.         }
  542.  
  543.         .M3Unator-dropdown-item {
  544.             padding: 0.618rem;
  545.             color: #cdd6f4;
  546.             cursor: pointer;
  547.             transition: all 0.2s ease;
  548.             user-select: none;
  549.         }
  550.  
  551.         .M3Unator-dropdown-item:hover {
  552.             background: rgba(203, 166, 247, 0.1);
  553.         }
  554.  
  555.         .M3Unator-dropdown-item.selected {
  556.             background: rgba(203, 166, 247, 0.1);
  557.             color: #cba6f7;
  558.         }
  559.  
  560.         @keyframes slideUp {
  561.             from { transform: translateY(20px); opacity: 0; }
  562.             to { transform: translateY(0); opacity: 1; }
  563.         }
  564.  
  565.         .M3Unator-log {
  566.             margin-top: 0.75rem;
  567.             max-height: calc(100vh - 70vh);
  568.             font-size: 0.8125rem;
  569.             line-height: 1.4;
  570.         }
  571.  
  572.         .M3Unator-log:empty {
  573.             display: none;
  574.         }
  575.  
  576.         .M3Unator-log-entry {
  577.             padding: 0.25rem 0.5rem;
  578.             border-bottom: 1px solid #313244;
  579.         }
  580.  
  581.         .M3Unator-log-entry:last-child {
  582.             border-bottom: none;
  583.         }
  584.  
  585.         .M3Unator-log-entry.success {
  586.             color: #94e2d5;
  587.         }
  588.  
  589.         .M3Unator-log-entry.error {
  590.             color: #f38ba8;
  591.         }
  592.  
  593.         .M3Unator-log-entry.warning {
  594.             color: #fab387;
  595.         }
  596.  
  597.         .M3Unator-log-counter {
  598.             display: inline-flex;
  599.             align-items: center;
  600.             justify-content: center;
  601.             background: rgba(245, 194, 231, 0.1);
  602.             color: #f5c2e7;
  603.             padding: 0.25rem 0.75rem;
  604.             border-radius: 8px;
  605.             font-size: 0.875rem;
  606.             font-weight: 500;
  607.             margin-left: 0.75rem;
  608.             min-width: 3rem;
  609.             text-align: center;
  610.         }
  611.  
  612.         @keyframes gradient {
  613.             0% { background-position: 0% 50%; filter: hue-rotate(0deg); }
  614.             50% { background-position: 100% 50%; filter: hue-rotate(180deg); }
  615.             100% { background-position: 0% 50%; filter: hue-rotate(360deg); }
  616.         }
  617.  
  618.         .M3Unator-title span.text {
  619.             display: inline-block;
  620.             position: relative;
  621.             padding: 0 0.25rem;
  622.         }
  623.  
  624.         .M3Unator-title.scanning span.text {
  625.             background: linear-gradient(90deg,
  626.                 #f5c2e7,
  627.                 #cba6f7,
  628.                 #89b4fa,
  629.                 #a6e3a1,
  630.                 #f5c2e7
  631.             );
  632.             background-size: 300% auto;
  633.             -webkit-background-clip: text;
  634.             background-clip: text;
  635.             -webkit-text-fill-color: transparent;
  636.             animation: gradient 3s linear infinite;
  637.             font-weight: 700;
  638.             letter-spacing: 0.5px;
  639.         }
  640.  
  641.         .M3Unator-title.scanning span.text::after {
  642.             content: '';
  643.             position: absolute;
  644.             bottom: -2px;
  645.             left: 0;
  646.             width: 100%;
  647.             height: 2px;
  648.             background: inherit;
  649.             animation: gradient 3s linear infinite;
  650.         }
  651.  
  652.         .M3Unator-title.scanning svg {
  653.             animation: morphAnimation 2s ease-in-out infinite;
  654.             filter: drop-shadow(0 0 8px rgba(203, 166, 247, 0.5));
  655.         }
  656.  
  657.         @keyframes morphAnimation {
  658.             0% {
  659.                 transform: scale(1);
  660.                 opacity: 1;
  661.             }
  662.             50% {
  663.                 transform: scale(1.2);
  664.                 opacity: 0.7;
  665.             }
  666.             100% {
  667.                 transform: scale(1);
  668.                 opacity: 1;
  669.             }
  670.         }
  671.  
  672.         .M3Unator-controls {
  673.             display: none;
  674.             gap: 0.75rem;
  675.             margin: 0.75rem 0;
  676.             justify-content: center;
  677.         }
  678.  
  679.         .M3Unator-controls.active {
  680.             display: flex;
  681.         }
  682.  
  683.         .M3Unator-control-btn {
  684.             display: none;
  685.             padding: 0.75rem 1.5rem;
  686.             border-radius: 12px;
  687.             font-weight: 600;
  688.             font-size: 0.95rem;
  689.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  690.             align-items: center;
  691.             gap: 0.75rem;
  692.             min-width: 160px;
  693.             justify-content: center;
  694.             background: rgba(30, 30, 46, 0.6);
  695.             backdrop-filter: blur(8px);
  696.             width: 160px;
  697.         }
  698.  
  699.         .M3Unator-control-btn:hover {
  700.             background: #313244;
  701.             transform: translateY(-1px);
  702.         }
  703.  
  704.         .M3Unator-control-btn:active {
  705.             transform: translateY(1px);
  706.         }
  707.  
  708.         .M3Unator-control-btn.pause {
  709.             border-color: #fab387;
  710.             color: #fab387;
  711.         }
  712.  
  713.         .M3Unator-control-btn.pause:hover {
  714.             background: rgba(250, 179, 135, 0.1);
  715.         }
  716.  
  717.         .M3Unator-control-btn.resume {
  718.             border-color: #94e2d5;
  719.             color: #94e2d5;
  720.         }
  721.  
  722.         .M3Unator-control-btn.resume:hover {
  723.             background: rgba(148, 226, 213, 0.1);
  724.         }
  725.  
  726.         .M3Unator-control-btn.cancel {
  727.             border-color: #f38ba8;
  728.             color: #f38ba8;
  729.         }
  730.  
  731.         .M3Unator-control-btn.cancel:hover {
  732.             background: rgba(243, 139, 168, 0.1);
  733.         }
  734.  
  735.         .M3Unator-control-btn svg {
  736.             width: 14px;
  737.             height: 14px;
  738.         }
  739.  
  740.         .M3Unator-button {
  741.             width: 100%;
  742.             padding: 0 1rem;
  743.             background: #f5c2e7;
  744.             color: #11111b;
  745.             border: none;
  746.             border-radius: 6px;
  747.             font-weight: 600;
  748.             font-size: 0.875rem;
  749.             cursor: pointer;
  750.             transition: all 0.2s ease;
  751.             display: flex;
  752.             align-items: center;
  753.             justify-content: center;
  754.             gap: 0.375rem;
  755.             height: 48px;
  756.             min-height: 48px;
  757.             line-height: 1;
  758.         }
  759.  
  760.         .M3Unator-spinner {
  761.             width: 20px;
  762.             height: 20px;
  763.             border: 2px solid rgba(17, 17, 27, 0.3);
  764.             border-radius: 50%;
  765.             border-top-color: #11111b;
  766.             animation: spin 0.6s linear infinite;
  767.             margin-right: 0;
  768.             flex-shrink: 0;
  769.         }
  770.  
  771.         .M3Unator-toast-container {
  772.             position: fixed;
  773.             bottom: 24px;
  774.             right: 24px;
  775.             z-index: 100002;
  776.         }
  777.  
  778.         .M3Unator-toast {
  779.             display: flex;
  780.             align-items: center;
  781.             gap: 8px;
  782.             padding: 12px 16px;
  783.             border-radius: 12px;
  784.             margin-top: 8px;
  785.             font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  786.             font-size: 14px;
  787.             font-weight: 500;
  788.             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  789.             animation: toastIn 0.3s ease;
  790.             background: #1e1e2e;
  791.             border: 2px solid;
  792.         }
  793.  
  794.         .M3Unator-toast.success {
  795.             color: #a6e3a1;
  796.             border-color: #a6e3a1;
  797.         }
  798.  
  799.         .M3Unator-toast.error {
  800.             color: #f38ba8;
  801.             border-color: #f38ba8;
  802.         }
  803.  
  804.         .M3Unator-toast.warning {
  805.             color: #fab387;
  806.             border-color: #fab387;
  807.         }
  808.  
  809.         .M3Unator-toast.removing {
  810.             animation: toastOut 0.3s ease forwards;
  811.         }
  812.  
  813.         @keyframes toastIn {
  814.             from {
  815.                 transform: translateX(100%);
  816.                 opacity: 0;
  817.             }
  818.             to {
  819.                 transform: translateX(0);
  820.                 opacity: 1;
  821.             }
  822.         }
  823.  
  824.         @keyframes toastOut {
  825.             from {
  826.                 transform: translateX(0);
  827.                 opacity: 1;
  828.             }
  829.             to {
  830.                 transform: translateX(100%);
  831.                 opacity: 0;
  832.             }
  833.         }
  834.  
  835.         .M3Unator-toast svg {
  836.             width: 20px;
  837.             height: 20px;
  838.             flex-shrink: 0;
  839.         }
  840.  
  841.         .M3Unator-input-row {
  842.             display: flex;
  843.             gap: 0.75rem;
  844.             margin-bottom: 0.75rem;
  845.         }
  846.  
  847.         .M3Unator-input-row .M3Unator-input-group {
  848.             margin-bottom: 0;
  849.         }
  850.  
  851.         .M3Unator-input-row .M3Unator-input-group:first-child {
  852.             flex: 2;
  853.         }
  854.  
  855.         .M3Unator-input-row .M3Unator-input-group:last-child {
  856.             flex: 1;
  857.         }
  858.  
  859.         .M3Unator-social {
  860.             display: flex;
  861.             gap: 8px;
  862.             margin-right: 8px;
  863.         }
  864.  
  865.         .M3Unator-social a {
  866.             width: 32px;
  867.             height: 32px;
  868.             border-radius: 8px;
  869.             display: grid;
  870.             place-items: center;
  871.             color: #cdd6f4;
  872.             background: rgba(205, 214, 244, 0.1);
  873.             transition: all 0.2s ease;
  874.         }
  875.  
  876.         .M3Unator-social a:hover {
  877.             background: rgba(205, 214, 244, 0.2);
  878.             transform: rotate(360deg);
  879.         }
  880.  
  881.         .M3Unator-social svg {
  882.             width: 18px;
  883.             height: 18px;
  884.         }
  885.  
  886.         .M3Unator-advanced-settings {
  887.             margin-top: 1rem;
  888.             padding: 1rem;
  889.             background: rgba(30, 30, 46, 0.5);
  890.             border: 1px solid #313244;
  891.             border-radius: 8px;
  892.             display: none;
  893.         }
  894.  
  895.         .M3Unator-advanced-settings.active {
  896.             display: block;
  897.             animation: fadeIn 0.3s ease;
  898.         }
  899.  
  900.         .M3Unator-advanced-toggle {
  901.             width: 100%;
  902.             padding: 0.75rem;
  903.             background: #1e1e2e;
  904.             border: 1px solid #313244;
  905.             border-radius: 8px;
  906.             color: #cdd6f4;
  907.             font-size: 0.875rem;
  908.             font-weight: 500;
  909.             cursor: pointer;
  910.             display: flex;
  911.             align-items: center;
  912.             justify-content: space-between;
  913.             transition: all 0.2s ease;
  914.         }
  915.  
  916.         .M3Unator-advanced-toggle:hover {
  917.             background: #313244;
  918.         }
  919.  
  920.         .M3Unator-advanced-toggle svg {
  921.             width: 16px;
  922.             height: 16px;
  923.             transition: transform 0.2s ease;
  924.         }
  925.  
  926.         .M3Unator-advanced-toggle.active svg {
  927.             transform: rotate(180deg);
  928.         }
  929.  
  930.         .M3Unator-depth-slider {
  931.             -webkit-appearance: none;
  932.             width: 100%;
  933.             height: 4px;
  934.             border-radius: 2px;
  935.             background: #313244;
  936.             outline: none;
  937.             margin: 1rem 0;
  938.         }
  939.  
  940.         .M3Unator-depth-slider::-webkit-slider-thumb {
  941.             -webkit-appearance: none;
  942.             appearance: none;
  943.             width: 16px;
  944.             height: 16px;
  945.             border-radius: 50%;
  946.             background: #cba6f7;
  947.             cursor: pointer;
  948.             transition: all 0.2s ease;
  949.         }
  950.  
  951.         .M3Unator-depth-slider::-webkit-slider-thumb:hover {
  952.             transform: scale(1.2);
  953.         }
  954.  
  955.         .M3Unator-depth-value {
  956.             text-align: center;
  957.             font-size: 0.875rem;
  958.             color: #cdd6f4;
  959.             margin-top: 0.5rem;
  960.         }
  961.  
  962.         @keyframes fadeIn {
  963.             from { opacity: 0; transform: translateY(-10px); }
  964.             to { opacity: 1; transform: translateY(0); }
  965.         }
  966.  
  967.         .M3Unator-depth-settings {
  968.             margin-top: 0.75rem;
  969.             margin-left: 1.75rem;
  970.             padding: 0.75rem;
  971.             background: rgba(30, 30, 46, 0.3);
  972.             border-left: 2px solid #cba6f7;
  973.             border-radius: 0 8px 8px 0;
  974.             display: none;
  975.             animation: slideDown 0.3s ease;
  976.         }
  977.  
  978.         .M3Unator-depth-settings.active {
  979.             display: block;
  980.         }
  981.  
  982.         .M3Unator-depth-input {
  983.             position: relative;
  984.             display: flex;
  985.             align-items: center;
  986.             gap: 0.75rem;
  987.             margin-top: 0.5rem;
  988.         }
  989.  
  990.         .M3Unator-depth-input input[type="number"] {
  991.             width: 64px;
  992.             padding: 0.25rem 0.375rem;
  993.             border: 1px solid #45475a;
  994.             border-radius: 4px;
  995.             background: rgba(30, 30, 46, 0.8);
  996.             color: #cdd6f4;
  997.             font-size: 0.875rem;
  998.             text-align: center;
  999.             margin: 0 0 0 0.5rem;
  1000.         }
  1001.  
  1002.         .M3Unator-depth-input input[type="number"]:focus {
  1003.             outline: none;
  1004.             border-color: #cba6f7;
  1005.             box-shadow: 0 0 0 2px rgba(203, 166, 247, 0.2);
  1006.         }
  1007.  
  1008.         .M3Unator-depth-input input[type="number"]::-webkit-inner-spin-button {
  1009.             opacity: 1;
  1010.             background: #313244;
  1011.             border-left: 1px solid #45475a;
  1012.             border-radius: 0 4px 4px 0;
  1013.             cursor: pointer;
  1014.         }
  1015.  
  1016.         .M3Unator-depth-toggle {
  1017.             display: flex;
  1018.             align-items: center;
  1019.             gap: 0.5rem;
  1020.             padding: 0.5rem;
  1021.             background: #1e1e2e;
  1022.             border: 1px solid #45475a;
  1023.             border-radius: 6px;
  1024.             color: #cdd6f4;
  1025.             font-size: 0.875rem;
  1026.             cursor: pointer;
  1027.             transition: all 0.2s ease;
  1028.         }
  1029.  
  1030.         .M3Unator-depth-toggle:hover {
  1031.             background: #313244;
  1032.             border-color: #cba6f7;
  1033.         }
  1034.  
  1035.         .M3Unator-depth-toggle.active {
  1036.             background: rgba(203, 166, 247, 0.1);
  1037.             border-color: #cba6f7;
  1038.             color: #cba6f7;
  1039.         }
  1040.  
  1041.         @keyframes slideDown {
  1042.             from { opacity: 0; transform: translateY(-10px); }
  1043.             to { opacity: 1; transform: translateY(0); }
  1044.         }
  1045.  
  1046.         .M3Unator-stats-bar {
  1047.             margin: 0.75rem 0;
  1048.             padding: 0.5rem;
  1049.             background: rgba(30, 30, 46, 0.5);
  1050.             border: 1px solid #313244;
  1051.             border-radius: 8px;
  1052.             display: none;
  1053.         }
  1054.  
  1055.         .M3Unator-stats-bar.active {
  1056.             display: block;
  1057.         }
  1058.  
  1059.         .M3Unator-stats {
  1060.             display: flex;
  1061.             align-items: center;
  1062.             justify-content: space-around;
  1063.             gap: 0.382rem;
  1064.             padding: 0.25rem;
  1065.         }
  1066.  
  1067.         .M3Unator-stat {
  1068.             display: inline-flex;
  1069.             align-items: center;
  1070.             gap: 0.25rem;
  1071.             font-size: 0.75rem;
  1072.             color: #cdd6f4;
  1073.             cursor: help;
  1074.             min-width: 40px;
  1075.             justify-content: flex-start;
  1076.             padding: 0 0.25rem;
  1077.             position: relative;
  1078.         }
  1079.  
  1080.         .M3Unator-stat span {
  1081.             min-width: 16px;
  1082.             text-align: right;
  1083.             font-variant-numeric: tabular-nums;
  1084.             font-size: 0.7rem;
  1085.             font-weight: 500;
  1086.         }
  1087.  
  1088.         .M3Unator-stat svg {
  1089.             opacity: 0.8;
  1090.             flex-shrink: 0;
  1091.             width: 14px;
  1092.             height: 14px;
  1093.         }
  1094.  
  1095.         .M3Unator-stat.video {
  1096.             color: #94e2d5;
  1097.         }
  1098.  
  1099.         .M3Unator-stat.audio {
  1100.             color: #89b4fa;
  1101.         }
  1102.  
  1103.         .M3Unator-stat.dir {
  1104.             color: #cba6f7;
  1105.         }
  1106.  
  1107.         .M3Unator-stat.error {
  1108.             color: #f38ba8;
  1109.         }
  1110.  
  1111.         .M3Unator-stat.depth {
  1112.             color: #a6e3a1;
  1113.             transition: color 0.3s ease;
  1114.         }
  1115.  
  1116.         .M3Unator-stat.depth[data-progress="high"] {
  1117.             color: #f38ba8;
  1118.         }
  1119.  
  1120.         .M3Unator-stat.depth[data-progress="medium"] {
  1121.             color: #fab387;
  1122.         }
  1123.  
  1124.         .M3Unator-stat.depth[data-progress="low"] {
  1125.             color: #f9e2af;
  1126.         }
  1127.  
  1128.         .M3Unator-stat:hover::after {
  1129.             content: attr(title);
  1130.             position: absolute;
  1131.             bottom: calc(100% + 5px);
  1132.             left: 50%;
  1133.             transform: translateX(-50%);
  1134.             padding: 0.5rem 0.75rem;
  1135.             background: rgba(30, 30, 46, 0.95);
  1136.             color: #cdd6f4;
  1137.             font-size: 0.875rem;
  1138.             white-space: nowrap;
  1139.             border-radius: 6px;
  1140.             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  1141.             z-index: 1000;
  1142.             border: 1px solid #313244;
  1143.             text-align: center;
  1144.             backdrop-filter: blur(8px);
  1145.             pointer-events: none;
  1146.         }
  1147.  
  1148.         .M3Unator-spinner {
  1149.             width: 20px;
  1150.             height: 20px;
  1151.             border: 2px solid rgba(17, 17, 27, 0.3);
  1152.             border-radius: 50%;
  1153.             border-top-color: #11111b;
  1154.             animation: spin 0.6s linear infinite;
  1155.             margin-right: 0;
  1156.             flex-shrink: 0;
  1157.         }
  1158.  
  1159.         @keyframes spin {
  1160.             to { transform: rotate(360deg); }
  1161.         }
  1162.  
  1163.         .M3Unator-toast {
  1164.             animation: toastSlideUp 0.2s ease forwards;
  1165.         }
  1166.  
  1167.         .M3Unator-toast.removing {
  1168.             animation: toastSlideDown 0.2s ease forwards;
  1169.         }
  1170.  
  1171.         .M3Unator-popup {
  1172.             animation: slideUp 0.2s ease;
  1173.         }
  1174.  
  1175.         .M3Unator-stats-bar {
  1176.             animation: fadeIn 0.2s ease;
  1177.         }
  1178.  
  1179.         .M3Unator-log {
  1180.             transition: max-height 0.3s ease;
  1181.         }
  1182.  
  1183.         .M3Unator-log.collapsed {
  1184.             max-height: 0;
  1185.             overflow: hidden;
  1186.         }
  1187.  
  1188.         .M3Unator-log-toggle {
  1189.             width: 100%;
  1190.             padding: 0.75rem;
  1191.             background: #1e1e2e;
  1192.             border: none;
  1193.             color: #cdd6f4;
  1194.             display: flex;
  1195.             align-items: center;
  1196.             justify-content: center;
  1197.             gap: 0.75rem;
  1198.             cursor: pointer;
  1199.             transition: all 0.2s ease;
  1200.             font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  1201.         }
  1202.  
  1203.         .M3Unator-log-toggle:hover {
  1204.             background: rgba(30, 30, 46, 0.8);
  1205.         }
  1206.  
  1207.         .M3Unator-log-toggle svg {
  1208.             width: 20px;
  1209.             height: 20px;
  1210.             flex-shrink: 0;
  1211.         }
  1212.  
  1213.         .M3Unator-log-toggle.active svg {
  1214.             transform: rotate(180deg);
  1215.         }
  1216.  
  1217.         .M3Unator-toggle-container span svg .infinity-icon {
  1218.             opacity: 0.5;
  1219.             transition: opacity 0.2s ease;
  1220.             transform: scale(0.6) translateY(4px);
  1221.             transform-origin: center;
  1222.             stroke-width: 1.5;
  1223.         }
  1224.  
  1225.         .M3Unator-toggle-container input[type="checkbox"]:checked + span svg .infinity-icon {
  1226.             opacity: 1;
  1227.         }
  1228.  
  1229.         .M3Unator-depth-controls {
  1230.             background: rgba(30, 30, 46, 0.4);
  1231.             backdrop-filter: blur(8px);
  1232.             border: 1px solid #313244;
  1233.             border-radius: 8px;
  1234.             padding: 0.618rem;
  1235.             margin-top: 1rem;
  1236.             display: none;
  1237.         }
  1238.  
  1239.         .M3Unator-depth-controls.active {
  1240.             display: block;
  1241.         }
  1242.  
  1243.         .M3Unator-radio-group {
  1244.             display: flex;
  1245.             gap: 0.75rem;
  1246.             justify-content: center;
  1247.             background: rgba(30, 30, 46, 0.6);
  1248.             padding: 0.5rem;
  1249.             border-radius: 6px;
  1250.         }
  1251.  
  1252.         .M3Unator-radio {
  1253.             display: flex;
  1254.             align-items: center;
  1255.             gap: 0.5rem;
  1256.             cursor: pointer;
  1257.             padding: 0.5rem;
  1258.             border-radius: 4px;
  1259.             transition: all 0.2s ease;
  1260.             background: transparent;
  1261.             border: 1px solid transparent;
  1262.         }
  1263.  
  1264.         .M3Unator-radio:hover {
  1265.             background: rgba(203, 166, 247, 0.1);
  1266.         }
  1267.  
  1268.         .M3Unator-radio input[type="radio"] {
  1269.             display: none;
  1270.         }
  1271.  
  1272.         .M3Unator-radio .radio-mark {
  1273.             width: 16px;
  1274.             height: 16px;
  1275.             border: 1.5px solid #45475a;
  1276.             border-radius: 50%;
  1277.             display: flex;
  1278.             align-items: center;
  1279.             justify-content: center;
  1280.             transition: all 0.2s ease;
  1281.             flex-shrink: 0;
  1282.             background: rgba(30, 30, 46, 0.6);
  1283.             position: relative;
  1284.         }
  1285.  
  1286.         .M3Unator-radio input[type="radio"]:checked + .radio-mark {
  1287.             border-color: #cba6f7;
  1288.             background: rgba(203, 166, 247, 0.1);
  1289.         }
  1290.  
  1291.         .M3Unator-radio input[type="radio"]:checked + .radio-mark::after {
  1292.             content: '';
  1293.             width: 8px;
  1294.             height: 8px;
  1295.             border-radius: 50%;
  1296.             background: #cba6f7;
  1297.             position: absolute;
  1298.         }
  1299.  
  1300.         .M3Unator-radio .radio-label {
  1301.             color: #cdd6f4;
  1302.             font-size: 0.875rem;
  1303.             user-select: none;
  1304.             display: flex;
  1305.             align-items: center;
  1306.             gap: 0.5rem;
  1307.         }
  1308.  
  1309.         .M3Unator-depth-input {
  1310.             width: 64px;
  1311.             padding: 0.25rem 0.375rem;
  1312.             border: 1px solid #45475a;
  1313.             border-radius: 4px;
  1314.             background: rgba(30, 30, 46, 0.8);
  1315.             color: #cdd6f4;
  1316.             font-size: 0.875rem;
  1317.             text-align: center;
  1318.             transition: all 0.2s ease;
  1319.             -moz-appearance: textfield;
  1320.             margin-top: -1px;
  1321.             display: inline-flex;
  1322.             align-items: center;
  1323.             height: 28px;
  1324.         }
  1325.  
  1326.         .M3Unator-depth-input::-webkit-outer-spin-button,
  1327.         .M3Unator-depth-input::-webkit-inner-spin-button {
  1328.             -webkit-appearance: inner-spin-button;
  1329.             opacity: 1;
  1330.             background: #313244;
  1331.             border-left: 1px solid #45475a;
  1332.             border-radius: 0 4px 4px 0;
  1333.             cursor: pointer;
  1334.             height: 100%;
  1335.             position: absolute;
  1336.             right: 0;
  1337.             top: 0;
  1338.         }
  1339.  
  1340.         .M3Unator-depth-input:focus {
  1341.             outline: none;
  1342.             border-color: #cba6f7;
  1343.             box-shadow: 0 0 0 2px rgba(203, 166, 247, 0.2);
  1344.         }
  1345.  
  1346.         .M3Unator-depth-input:disabled {
  1347.             opacity: 0.5;
  1348.             cursor: not-allowed;
  1349.             background: rgba(30, 30, 46, 0.4);
  1350.         }
  1351.  
  1352.         .M3Unator-radio .radio-label {
  1353.             display: flex;
  1354.             align-items: center;
  1355.             gap: 0.5rem;
  1356.             color: #cdd6f4;
  1357.             font-size: 0.875rem;
  1358.             user-select: none;
  1359.         }
  1360.  
  1361.         .M3Unator-url-container {
  1362.             display: flex;
  1363.             align-items: center;
  1364.             background: rgba(30, 30, 46, 0.6);
  1365.             border: 1px solid #313244;
  1366.             border-radius: 6px;
  1367.             padding: 0.618rem;
  1368.             margin-bottom: 1rem;
  1369.             transition: all 0.2s ease;
  1370.         }
  1371.  
  1372.         .M3Unator-url-container:hover {
  1373.             border-color: #45475a;
  1374.         }
  1375.  
  1376.         .M3Unator-url-icon {
  1377.             color: #6c7086;
  1378.             margin-right: 0.618rem;
  1379.             flex-shrink: 0;
  1380.         }
  1381.  
  1382.         .M3Unator-url-input {
  1383.             flex: 1;
  1384.             background: transparent;
  1385.             border: none;
  1386.             color: #cdd6f4;
  1387.             font-size: 0.875rem;
  1388.             padding: 0;
  1389.             margin: 0;
  1390.             width: 100%;
  1391.         }
  1392.  
  1393.         .M3Unator-url-input:focus {
  1394.             outline: none;
  1395.         }
  1396.  
  1397.         .M3Unator-url-copy {
  1398.             background: transparent;
  1399.             border: none;
  1400.             color: #6c7086;
  1401.             padding: 0.382rem;
  1402.             margin-left: 0.618rem;
  1403.             cursor: pointer;
  1404.             border-radius: 4px;
  1405.             transition: all 0.2s ease;
  1406.             display: flex;
  1407.             align-items: center;
  1408.             justify-content: center;
  1409.         }
  1410.  
  1411.         .M3Unator-url-copy:hover {
  1412.             color: #cdd6f4;
  1413.             background: rgba(205, 214, 244, 0.1);
  1414.         }
  1415.  
  1416.         .M3Unator-url-copy.copied {
  1417.             color: #a6e3a1;
  1418.             animation: copyPulse 0.3s ease;
  1419.         }
  1420.  
  1421.         @keyframes copyPulse {
  1422.             0% { transform: scale(1); }
  1423.             50% { transform: scale(1.2); }
  1424.             100% { transform: scale(1); }
  1425.         }
  1426.  
  1427.         .M3Unator-toggle-group {
  1428.             display: flex;
  1429.             gap: 1.25rem;
  1430.             margin: 1.5rem 0;
  1431.             justify-content: center;
  1432.             background: rgba(30, 30, 46, 0.4);
  1433.             padding: 1.25rem;
  1434.             border-radius: 16px;
  1435.             backdrop-filter: blur(8px);
  1436.         }
  1437.  
  1438.         .M3Unator-toggle-container {
  1439.             position: relative;
  1440.         }
  1441.  
  1442.         .M3Unator-toggle-container span {
  1443.             width: 64px;
  1444.             height: 64px;
  1445.             background: #1e1e2e;
  1446.             border: 2px solid #45475a;
  1447.             border-radius: 16px;
  1448.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1449.             display: flex;
  1450.             align-items: center;
  1451.             justify-content: center;
  1452.         }
  1453.  
  1454.         .M3Unator-toggle-container input[type="checkbox"]:checked + span {
  1455.             background: rgba(203, 166, 247, 0.1);
  1456.             border-color: #cba6f7;
  1457.             box-shadow: 0 0 20px rgba(203, 166, 247, 0.2);
  1458.             transform: translateY(-2px);
  1459.         }
  1460.  
  1461.         .M3Unator-toggle-container span:hover {
  1462.             background: #313244;
  1463.             transform: translateY(-2px);
  1464.             box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  1465.         }
  1466.  
  1467.         .M3Unator-toggle-container svg {
  1468.             width: 32px;
  1469.             height: 32px;
  1470.             opacity: 0.7;
  1471.             transition: all 0.3s ease;
  1472.         }
  1473.  
  1474.         .M3Unator-toggle-container input[type="checkbox"]:checked + span svg {
  1475.             opacity: 1;
  1476.             color: #cba6f7;
  1477.             filter: drop-shadow(0 0 8px rgba(203, 166, 247, 0.4));
  1478.         }
  1479.  
  1480.         .M3Unator-progress {
  1481.             background: rgba(30, 30, 46, 0.6);
  1482.             border-radius: 12px;
  1483.             padding: 1rem;
  1484.             margin: 1rem 0;
  1485.             backdrop-filter: blur(8px);
  1486.             border: 1px solid rgba(203, 166, 247, 0.2);
  1487.         }
  1488.  
  1489.         .M3Unator-progress-text {
  1490.             color: #f5c2e7;
  1491.             font-weight: 600;
  1492.             text-align: center;
  1493.             margin-bottom: 0.5rem;
  1494.             font-size: 1.1rem;
  1495.         }
  1496.  
  1497.         .M3Unator-progress-spinner {
  1498.             width: 24px;
  1499.             height: 24px;
  1500.             border: 3px solid rgba(245, 194, 231, 0.1);
  1501.             border-top-color: #f5c2e7;
  1502.             border-radius: 50%;
  1503.             animation: spin 1s linear infinite;
  1504.             margin: 0 auto;
  1505.         }
  1506.  
  1507.         .M3Unator-controls {
  1508.             display: flex;
  1509.             gap: 0.75rem;
  1510.             margin: 0.75rem 0;
  1511.             justify-content: center;
  1512.         }
  1513.  
  1514.         .M3Unator-control-btn {
  1515.             display: none;
  1516.             padding: 0.75rem 1.5rem;
  1517.             border-radius: 12px;
  1518.             font-weight: 600;
  1519.             font-size: 0.95rem;
  1520.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1521.             align-items: center;
  1522.             gap: 0.75rem;
  1523.             min-width: 160px;
  1524.             justify-content: center;
  1525.             background: rgba(30, 30, 46, 0.6);
  1526.             backdrop-filter: blur(8px);
  1527.             width: 160px;
  1528.         }
  1529.  
  1530.         .M3Unator-control-btn.pause {
  1531.             background: rgba(250, 179, 135, 0.1);
  1532.             border: 2px solid #fab387;
  1533.             color: #fab387;
  1534.         }
  1535.  
  1536.         .M3Unator-control-btn.resume {
  1537.             background: rgba(148, 226, 213, 0.1);
  1538.             border: 2px solid #94e2d5;
  1539.             color: #94e2d5;
  1540.         }
  1541.  
  1542.         .M3Unator-control-btn.cancel {
  1543.             background: rgba(243, 139, 168, 0.1);
  1544.             border: 2px solid #f38ba8;
  1545.             color: #f38ba8;
  1546.         }
  1547.  
  1548.         .M3Unator-control-btn:hover {
  1549.             transform: translateY(-2px);
  1550.             box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  1551.         }
  1552.  
  1553.         .M3Unator-control-btn svg {
  1554.             width: 20px;
  1555.             height: 20px;
  1556.         }
  1557.  
  1558.         .M3Unator-layers-icon {
  1559.             width: 20px;
  1560.             height: 20px;
  1561.             margin-right: 0.5rem;
  1562.         }
  1563.  
  1564.         .M3Unator-input:-webkit-autofill,
  1565.         .M3Unator-input:-webkit-autofill:hover,
  1566.         .M3Unator-input:-webkit-autofill:focus,
  1567.         .M3Unator-input:-webkit-autofill:active {
  1568.             -webkit-text-fill-color: #cdd6f4 !important;
  1569.             -webkit-box-shadow: 0 0 0 30px #1e1e2e inset !important;
  1570.             box-shadow: 0 0 0 30px #1e1e2e inset !important;
  1571.             background-color: #1e1e2e !important;
  1572.             color: #cdd6f4 !important;
  1573.             caret-color: #cdd6f4 !important;
  1574.             transition: background-color 5000s ease-in-out 0s !important;
  1575.             text-decoration: none !important;
  1576.             -webkit-text-decoration: none !important;
  1577.         }
  1578.  
  1579.         .M3Unator-input:-moz-autofill,
  1580.         .M3Unator-input:-moz-autofill-preview {
  1581.             background-color: #1e1e2e !important;
  1582.             color: #cdd6f4 !important;
  1583.             text-decoration: none !important;
  1584.         }
  1585.  
  1586.         .M3Unator-input:-ms-input-placeholder {
  1587.             background-color: #1e1e2e !important;
  1588.             color: #cdd6f4 !important;
  1589.             text-decoration: none !important;
  1590.         }
  1591.  
  1592.         .M3Unator-log-container {
  1593.             margin: 0;
  1594.         }
  1595.  
  1596.         .M3Unator-log-toggle {
  1597.             width: 100%;
  1598.             padding: 0.5rem 0.75rem;
  1599.             background: rgba(203, 166, 247, 0.05);
  1600.             border: none;
  1601.             color: #cdd6f4;
  1602.             display: flex;
  1603.             align-items: center;
  1604.             justify-content: space-between;
  1605.             cursor: pointer;
  1606.             transition: all 0.2s ease;
  1607.             font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  1608.             font-size: 0.875rem;
  1609.             font-weight: 500;
  1610.             border-radius: 6px;
  1611.         }
  1612.  
  1613.         .M3Unator-log-toggle:hover {
  1614.             background: rgba(203, 166, 247, 0.1);
  1615.         }
  1616.  
  1617.         .M3Unator-log-toggle svg {
  1618.             width: 18px;
  1619.             height: 18px;
  1620.             color: #cba6f7;
  1621.             opacity: 0.8;
  1622.             transition: all 0.2s ease;
  1623.             margin-right: 0.5rem;
  1624.         }
  1625.  
  1626.         .M3Unator-log-toggle.active svg {
  1627.             transform: rotate(180deg);
  1628.             opacity: 1;
  1629.         }
  1630.  
  1631.         .M3Unator-log-counter {
  1632.             background: rgba(203, 166, 247, 0.1);
  1633.             color: #cba6f7;
  1634.             padding: 0.25rem 0.75rem;
  1635.             border-radius: 12px;
  1636.             font-size: 0.75rem;
  1637.             font-weight: 600;
  1638.             min-width: 1.5rem;
  1639.             text-align: center;
  1640.             display: inline-flex;
  1641.             align-items: center;
  1642.             justify-content: center;
  1643.             margin-left: auto;
  1644.         }
  1645.  
  1646.         .M3Unator-log-toggle:hover .M3Unator-log-counter {
  1647.             background: rgba(203, 166, 247, 0.15);
  1648.         }
  1649.  
  1650.         .M3Unator-log-toggle .toggle-text {
  1651.             display: flex;
  1652.             align-items: center;
  1653.             gap: 0.5rem;
  1654.         }
  1655.  
  1656.         .M3Unator-log {
  1657.             height: 0;
  1658.             max-height: 0;
  1659.             overflow: hidden;
  1660.             transition: all 0.3s ease;
  1661.             background: #11111b;
  1662.             padding: 0;
  1663.             border-top: none;
  1664.             margin: 0;
  1665.         }
  1666.  
  1667.         .M3Unator-log.expanded {
  1668.             height: auto;
  1669.             max-height: 300px;
  1670.             padding: 0.75rem;
  1671.             border-top: 1px solid #313244;
  1672.             overflow-y: auto;
  1673.         }
  1674.  
  1675.         .M3Unator-log-entry {
  1676.             padding: 0.25rem 0.5rem;
  1677.             border-bottom: 1px solid rgba(49, 50, 68, 0.5);
  1678.             font-size: 0.875rem;
  1679.         }
  1680.  
  1681.         .M3Unator-log-entry:last-child {
  1682.             border-bottom: none;
  1683.         }
  1684.  
  1685.         .M3Unator-log-time {
  1686.             color: #6c7086;
  1687.             margin-right: 0.5rem;
  1688.         }
  1689.  
  1690.         .M3Unator-log-entry.success {
  1691.             color: #94e2d5;
  1692.         }
  1693.  
  1694.         .M3Unator-log-entry.error {
  1695.             color: #f38ba8;
  1696.         }
  1697.  
  1698.         .M3Unator-log-entry.warning {
  1699.             color: #fab387;
  1700.         }
  1701.  
  1702.         .M3Unator-log-entry.info {
  1703.             color: #89b4fa;
  1704.         }
  1705.  
  1706.         .M3Unator-log-entry.final {
  1707.             color: #a6e3a1;
  1708.             font-weight: 500;
  1709.         }
  1710.  
  1711.         .M3Unator-log {
  1712.             margin-top: 0.75rem;
  1713.             max-height: calc(100vh - 70vh);
  1714.             font-size: 0.8125rem;
  1715.             line-height: 1.4;
  1716.         }
  1717.  
  1718.         .M3Unator-log-entry {
  1719.             padding: 0.25rem 0.5rem;
  1720.             border-radius: 4px;
  1721.         }
  1722.  
  1723.         .M3Unator-log-toggle {
  1724.             padding: 0.5rem 0.75rem;
  1725.             height: 36px;
  1726.         }
  1727.  
  1728.         .M3Unator-log-counter {
  1729.             padding: 0.125rem 0.375rem;
  1730.             font-size: 0.75rem;
  1731.             border-radius: 4px;
  1732.         }
  1733.  
  1734.         .M3Unator-log-time {
  1735.             font-size: 0.75rem;
  1736.             opacity: 0.7;
  1737.             margin-right: 0.5rem;
  1738.         }
  1739.     `);
  1740.  
  1741.     GM_addStyle(`
  1742.         .M3Unator-popup {
  1743.             position: fixed;
  1744.             background: #11111b;
  1745.             color: #cdd6f4;
  1746.             width: 100%;
  1747.             max-width: 480px;
  1748.             border-radius: 12px;
  1749.             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  1750.             overflow: hidden;
  1751.             animation: slideUp 0.3s ease;
  1752.             z-index: 9999;
  1753.         }
  1754.  
  1755.         .M3Unator-header {
  1756.             padding: 1rem 1.25rem;
  1757.             background: #1e1e2e;
  1758.             color: #cdd6f4;
  1759.             display: flex;
  1760.             align-items: center;
  1761.             justify-content: space-between;
  1762.             cursor: move;
  1763.             user-select: none;
  1764.             border-bottom: 1px solid #313244;
  1765.         }
  1766.  
  1767.         .M3Unator-container {
  1768.             position: fixed;
  1769.             inset: 0;
  1770.             background: rgba(0, 0, 0, 0.75);
  1771.             backdrop-filter: blur(8px);
  1772.             display: none;
  1773.             place-items: center;
  1774.             z-index: 9999;
  1775.         }
  1776.     `);
  1777.  
  1778.     GM_addStyle(`
  1779.         /* Info Modal Styles */
  1780.         .info-modal {
  1781.             display: none;
  1782.             position: fixed;
  1783.             inset: 0;
  1784.             background: rgba(0, 0, 0, 0.75);
  1785.             backdrop-filter: blur(8px);
  1786.             z-index: 10000;
  1787.         }
  1788.  
  1789.         .info-modal-content {
  1790.             position: absolute;
  1791.             top: 50%;
  1792.             left: 50%;
  1793.             transform: translate(-50%, -50%);
  1794.             background: #1e1e2e;
  1795.             border: 1px solid #45475a;
  1796.             border-radius: 12px;
  1797.             width: 90%;
  1798.             max-width: 600px;
  1799.             color: #cdd6f4;
  1800.         }
  1801.  
  1802.         .info-modal-header {
  1803.             padding: 1rem 1.5rem;
  1804.             border-bottom: 1px solid #45475a;
  1805.             display: flex;
  1806.             align-items: center;
  1807.             justify-content: space-between;
  1808.         }
  1809.  
  1810.         .info-modal-header h3 {
  1811.             margin: 0;
  1812.             color: #f5c2e7;
  1813.             font-size: 1.25rem;
  1814.         }
  1815.  
  1816.         .info-modal-body {
  1817.             padding: 1.5rem;
  1818.             line-height: 1.6;
  1819.         }
  1820.  
  1821.         .info-modal-body p {
  1822.             margin: 0 0 1rem;
  1823.         }
  1824.  
  1825.         .info-modal-body h4 {
  1826.             margin: 1.5rem 0 0.75rem;
  1827.             color: #f5c2e7;
  1828.         }
  1829.  
  1830.         .info-modal-body ul {
  1831.             margin: 0.75rem 0;
  1832.             padding-left: 1.5rem;
  1833.         }
  1834.  
  1835.         .info-modal-body li {
  1836.             margin: 0.5rem 0;
  1837.         }
  1838.  
  1839.         .info-modal-body a {
  1840.             color: #89b4fa;
  1841.             text-decoration: none;
  1842.         }
  1843.  
  1844.         .info-modal-body a:hover {
  1845.             text-decoration: underline;
  1846.         }
  1847.  
  1848.         .info-close {
  1849.             cursor: pointer;
  1850.             color: #6c7086;
  1851.             transition: color 0.2s ease;
  1852.         }
  1853.  
  1854.         .info-close:hover {
  1855.             color: #f5c2e7;
  1856.         }
  1857.     `);
  1858.  
  1859.     GM_addStyle(`
  1860.         .m3unator-input-group {
  1861.             position: relative;
  1862.             width: 100%;
  1863.         }
  1864.  
  1865.         .m3unator-input {
  1866.             width: 100%;
  1867.             padding-right: 80px !important;
  1868.             transition: all 0.2s ease;
  1869.         }
  1870.  
  1871.         .m3unator-dropdown {
  1872.             position: absolute;
  1873.             right: 8px;
  1874.             top: 50%;
  1875.             transform: translateY(-50%);
  1876.             display: none;
  1877.             z-index: 1;
  1878.             width: 70px;
  1879.         }
  1880.  
  1881.         .m3unator-dropdown.active {
  1882.             display: block;
  1883.         }
  1884.  
  1885.         .m3unator-dropdown-button {
  1886.             width: 100%;
  1887.             padding: 4px 8px;
  1888.             border-radius: 6px;
  1889.             background: rgba(30, 30, 46, 0.6);
  1890.             border: 1px solid rgba(69, 71, 90, 0.6);
  1891.             color: #f5c2e7;
  1892.             cursor: pointer;
  1893.             display: flex;
  1894.             align-items: center;
  1895.             justify-content: space-between;
  1896.             gap: 4px;
  1897.             transition: all 0.2s ease;
  1898.         }
  1899.  
  1900.         .m3unator-dropdown-button:hover {
  1901.             background: rgba(30, 30, 46, 0.8);
  1902.             border-color: rgba(69, 71, 90, 0.8);
  1903.         }
  1904.  
  1905.         .m3unator-dropdown-menu {
  1906.             position: absolute;
  1907.             top: 100%;
  1908.             right: 0;
  1909.             width: 100%;
  1910.             margin-top: 4px;
  1911.             background: rgba(30, 30, 46, 0.95);
  1912.             border: 1px solid rgba(69, 71, 90, 0.6);
  1913.             border-radius: 6px;
  1914.             padding: 4px;
  1915.             display: none;
  1916.         }
  1917.  
  1918.         .m3unator-dropdown.active .m3unator-dropdown-menu {
  1919.             display: block;
  1920.         }
  1921.  
  1922.         .m3unator-dropdown-item {
  1923.             padding: 0.618rem;
  1924.             color: #cdd6f4;
  1925.             cursor: pointer;
  1926.             transition: all 0.2s ease;
  1927.             user-select: none;
  1928.         }
  1929.  
  1930.         .m3unator-dropdown-item:hover {
  1931.             background: rgba(203, 166, 247, 0.1);
  1932.         }
  1933.  
  1934.         .m3unator-dropdown-item.selected {
  1935.             background: rgba(203, 166, 247, 0.1);
  1936.             color: #cba6f7;
  1937.         }
  1938.     `);
  1939.  
  1940.     GM_addStyle(`
  1941.         .M3Unator-container {
  1942.             max-width: 400px;
  1943.             width: 100%;
  1944.             background: none;
  1945.             backdrop-filter: none;
  1946.         }
  1947.  
  1948.         .M3Unator-popup {
  1949.             background: #1e1e2e;
  1950.             border-radius: 12px;
  1951.             box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  1952.             border: 1px solid rgba(69, 71, 90, 0.6);
  1953.         }
  1954.  
  1955.         .M3Unator-content {
  1956.             padding: 0.75rem;
  1957.             display: flex;
  1958.             flex-direction: column;
  1959.             gap: 0.75rem;
  1960.             max-width: 100%;
  1961.             overflow: hidden;
  1962.             background: none;
  1963.         }
  1964.  
  1965.         .M3Unator-header {
  1966.             padding: 0.75rem;
  1967.             display: flex;
  1968.             align-items: center;
  1969.             justify-content: space-between;
  1970.             background: none;
  1971.             border-bottom: 1px solid rgba(69, 71, 90, 0.6);
  1972.         }
  1973.  
  1974.         .M3Unator-input {
  1975.             width: 100%;
  1976.             min-width: 0;
  1977.             padding: 8px 80px 8px 12px;
  1978.             box-sizing: border-box;
  1979.             transition: all 0.2s ease;
  1980.             background: #1e1e2e;
  1981.             border: 1px solid rgba(69, 71, 90, 0.6);
  1982.             border-radius: 6px;
  1983.             color: #f5c2e7;
  1984.             font-size: 14px;
  1985.         }
  1986.  
  1987.         .M3Unator-dropdown-button {
  1988.             width: 100%;
  1989.             padding: 4px 8px;
  1990.             border-radius: 6px;
  1991.             background: #1e1e2e;
  1992.             border: 1px solid rgba(69, 71, 90, 0.6);
  1993.             color: #f5c2e7;
  1994.             cursor: pointer;
  1995.             display: flex;
  1996.             align-items: center;
  1997.             justify-content: space-between;
  1998.             gap: 4px;
  1999.             transition: all 0.2s ease;
  2000.             box-sizing: border-box;
  2001.             font-size: 14px;
  2002.             font-family: monospace;
  2003.         }
  2004.  
  2005.         .M3Unator-dropdown-button span {
  2006.             min-width: 40px;
  2007.             text-align: left;
  2008.         }
  2009.  
  2010.         .M3Unator-dropdown-button svg {
  2011.             width: 16px;
  2012.             height: 16px;
  2013.             min-width: 16px;
  2014.             min-height: 16px;
  2015.             margin-left: auto;
  2016.         }
  2017.  
  2018.         .M3Unator-dropdown-menu {
  2019.             position: absolute;
  2020.             top: 100%;
  2021.             right: 0;
  2022.             width: 100%;
  2023.             margin-top: 4px;
  2024.             background: #1e1e2e;
  2025.             border: 1px solid rgba(69, 71, 90, 0.6);
  2026.             border-radius: 6px;
  2027.             padding: 4px;
  2028.             display: none;
  2029.             box-sizing: border-box;
  2030.             z-index: 9999;
  2031.         }
  2032.     `);
  2033.  
  2034.     GM_addStyle(`
  2035.         .M3Unator-content {
  2036.             padding: 0.75rem;
  2037.             display: flex;
  2038.             flex-direction: column;
  2039.             gap: 12px;
  2040.         }
  2041.  
  2042.         .M3Unator-toggle-group {
  2043.             margin: 0;
  2044.             display: flex;
  2045.             gap: 0.75rem;
  2046.             justify-content: center;
  2047.             background: rgba(30, 30, 46, 0.4);
  2048.             padding: 0.75rem;
  2049.             border-radius: 12px;
  2050.         }
  2051.  
  2052.         .M3Unator-button {
  2053.             margin: 0;
  2054.         }
  2055.  
  2056.         .M3Unator-log-container {
  2057.             margin: 0;
  2058.         }
  2059.  
  2060.         .M3Unator-stats-bar {
  2061.             margin: 0;
  2062.         }
  2063.     `);
  2064.  
  2065.     GM_addStyle(`
  2066.         /* Dropdown Styles */
  2067.         .M3Unator-dropdown {
  2068.             position: relative;
  2069.             display: none;
  2070.         }
  2071.  
  2072.         .M3Unator-dropdown-button {
  2073.             width: 100%;
  2074.             padding: 4px 8px;
  2075.             border-radius: 6px;
  2076.             background: #1e1e2e;
  2077.             border: 1px solid rgba(69, 71, 90, 0.6);
  2078.             color: #f5c2e7;
  2079.             cursor: pointer;
  2080.             display: flex;
  2081.             align-items: center;
  2082.             justify-content: space-between;
  2083.             gap: 4px;
  2084.             transition: all 0.2s ease;
  2085.             box-sizing: border-box;
  2086.             font-size: 14px;
  2087.             font-family: monospace;
  2088.         }
  2089.  
  2090.         .M3Unator-dropdown-button span {
  2091.             min-width: 40px;
  2092.             text-align: left;
  2093.         }
  2094.  
  2095.         .M3Unator-dropdown-button svg {
  2096.             width: 16px;
  2097.             height: 16px;
  2098.             min-width: 16px;
  2099.             min-height: 16px;
  2100.             margin-left: auto;
  2101.             transition: transform 0.2s ease;
  2102.         }
  2103.  
  2104.         .M3Unator-dropdown.active .M3Unator-dropdown-button svg {
  2105.             transform: rotate(180deg);
  2106.         }
  2107.  
  2108.         .M3Unator-dropdown-menu {
  2109.             position: absolute;
  2110.             top: 100%;
  2111.             left: 0;
  2112.             right: 0;
  2113.             margin-top: 4px;
  2114.             background: #1e1e2e;
  2115.             border: 1px solid rgba(69, 71, 90, 0.6);
  2116.             border-radius: 6px;
  2117.             overflow: hidden;
  2118.             z-index: 1000;
  2119.             display: none;
  2120.         }
  2121.  
  2122.         .M3Unator-dropdown.active .M3Unator-dropdown-menu {
  2123.             display: block;
  2124.         }
  2125.  
  2126.         .M3Unator-dropdown-item {
  2127.             padding: 6px 12px;
  2128.             color: #f5c2e7;
  2129.             cursor: pointer;
  2130.             transition: all 0.2s ease;
  2131.             font-family: monospace;
  2132.         }
  2133.  
  2134.         .M3Unator-dropdown-item:hover {
  2135.             background: rgba(69, 71, 90, 0.3);
  2136.         }
  2137.  
  2138.         .M3Unator-dropdown-item:not(:last-child) {
  2139.             border-bottom: 1px solid rgba(69, 71, 90, 0.3);
  2140.         }
  2141.  
  2142.         /* Input Styles */
  2143.         .M3Unator-input {
  2144.             width: 100%;
  2145.             height: 42px;
  2146.             padding: 0 12px;
  2147.             border: 1px solid #45475a;
  2148.             border-radius: 8px;
  2149.             background: #1e1e2e;
  2150.             color: #f5c2e7;
  2151.             font-size: 14px;
  2152.             transition: all 0.2s ease;
  2153.             box-sizing: border-box;
  2154.         }
  2155.  
  2156.         .M3Unator-input:focus {
  2157.             outline: none;
  2158.             border-color: #f5c2e7;
  2159.             box-shadow: 0 0 0 2px rgba(245, 194, 231, 0.1);
  2160.         }
  2161.  
  2162.         /* Button Styles */
  2163.         .M3Unator-button {
  2164.             height: 42px;
  2165.             padding: 0 16px;
  2166.             border: none;
  2167.             border-radius: 8px;
  2168.             background: #f5c2e7;
  2169.             color: #1e1e2e;
  2170.             font-weight: 600;
  2171.             font-size: 14px;
  2172.             cursor: pointer;
  2173.             transition: all 0.2s ease;
  2174.             display: flex;
  2175.             align-items: center;
  2176.             justify-content: center;
  2177.             gap: 8px;
  2178.         }
  2179.  
  2180.         /* Toggle Container Styles */
  2181.         .M3Unator-toggle-container {
  2182.             position: relative;
  2183.             display: flex;
  2184.             align-items: center;
  2185.             gap: 0.5rem;
  2186.             transition: all 0.2s ease;
  2187.         }
  2188.  
  2189.         /* Control Button Styles */
  2190.         .M3Unator-control-btn {
  2191.             padding: 0.75rem 1.5rem;
  2192.             border-radius: 12px;
  2193.             font-weight: 600;
  2194.             font-size: 0.95rem;
  2195.             min-width: 160px;
  2196.             background: rgba(30, 30, 46, 0.6);
  2197.             backdrop-filter: blur(8px);
  2198.         }
  2199.  
  2200.         .M3Unator-control-btn.pause {
  2201.             border-color: #fab387;
  2202.             color: #fab387;
  2203.         }
  2204.  
  2205.         .M3Unator-control-btn.resume {
  2206.             border-color: #94e2d5;
  2207.             color: #94e2d5;
  2208.         }
  2209.  
  2210.         .M3Unator-control-btn.cancel {
  2211.             border-color: #f38ba8;
  2212.             color: #f38ba8;
  2213.         }
  2214.  
  2215.         /* Stats Styles */
  2216.         .M3Unator-stat {
  2217.             display: inline-flex;
  2218.             align-items: center;
  2219.             gap: 0.382rem;
  2220.             font-size: 0.875rem;
  2221.             cursor: help;
  2222.             min-width: 52px;
  2223.             padding: 0 0.382rem;
  2224.         }
  2225.     `);
  2226.  
  2227.     class PlaylistGenerator {
  2228.         constructor() {
  2229.             this.initialStats = {
  2230.                 directories: {
  2231.                     total: 0,
  2232.                     depth: 0
  2233.                 },
  2234.                 files: {
  2235.                     video: {
  2236.                         total: 0,
  2237.                         current: 0
  2238.                     },
  2239.                     audio: {
  2240.                         total: 0,
  2241.                         current: 0
  2242.                     }
  2243.                 },
  2244.                 errors: {
  2245.                     total: 0,
  2246.                     skipped: 0
  2247.                 },
  2248.                 totalFiles: 0
  2249.             };
  2250.  
  2251.             this.domElements = {};
  2252.  
  2253.             this.state = {
  2254.                 isGenerating: false,
  2255.                 isPaused: false,
  2256.                 selectedFormat: 'm3u',
  2257.                 includeVideo: false,
  2258.                 includeAudio: false,
  2259.                 maxEntries: 100000,
  2260.                 timeoutMs: 5000,
  2261.                 retryCount: 2,
  2262.                 maxDepth: 0,
  2263.                 maxSeenUrls: 5000,
  2264.                 stats: { ...this.initialStats }
  2265.             };
  2266.  
  2267.             this.sortOptions = { numeric: true, sensitivity: 'base' };
  2268.  
  2269.             this.entries = [];
  2270.             this.seenUrls = new Set();
  2271.             this.toastQueue = [];
  2272.             this.isProcessingToast = false;
  2273.  
  2274.             this.videoFormats = [
  2275.                 '.mp4', '.mkv', '.avi', '.webm', '.mov', '.flv', '.wmv', 
  2276.                 '.m4v', '.mpg', '.mpeg', '.3gp', '.vob', '.ts', '.mts',
  2277.                 '.m2ts', '.divx', '.xvid', '.asf', '.ogv', '.rm', '.rmvb',
  2278.                 '.wtv', '.qt', '.hevc', '.f4v', '.swf', '.vro', '.ogx',
  2279.                 '.drc', '.gifv', '.mxf', '.roq', '.nsv'
  2280.             ];
  2281.  
  2282.             this.audioFormats = [
  2283.                 '.mp3', '.m4a', '.wav', '.flac', '.aac', '.ogg', '.wma',
  2284.                 '.opus', '.aiff', '.ape', '.mka', '.ac3', '.dts', '.m4b',
  2285.                 '.m4p', '.m4r', '.mid', '.midi', '.mp2', '.mpa', '.mpc',
  2286.                 '.ra', '.tta', '.voc', '.vox', '.amr', '.awb', '.dsf',
  2287.                 '.dff', '.alac', '.wv', '.oga', '.sln', '.aif', '.pcm'
  2288.             ];
  2289.  
  2290.             this.icons = {
  2291.                 video: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  2292.                     <polygon points="23 7 16 12 23 17 23 7"/>
  2293.                     <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
  2294.                 </svg>`,
  2295.                 audio: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  2296.                     <path d="M9 18V5l12-2v13"/>
  2297.                     <circle cx="6" cy="18" r="3"/>
  2298.                     <circle cx="18" cy="16" r="3"/>
  2299.                 </svg>`,
  2300.                 folder: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  2301.                     <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
  2302.                 </svg>`,
  2303.                 info: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  2304.                     <circle cx="12" cy="12" r="10"/>
  2305.                     <line x1="12" y1="16" x2="12" y2="12"/>
  2306.                     <line x1="12" y1="8" x2="12.01" y2="8"/>
  2307.                 </svg>`,
  2308.                 file: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  2309.                     <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/>
  2310.                     <polyline points="13 2 13 9 20 9"/>
  2311.                 </svg>`,
  2312.                 download: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  2313.                     <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
  2314.                     <polyline points="7 10 12 15 17 10"/>
  2315.                     <line x1="12" y1="15" x2="12" y2="3"/>
  2316.                 </svg>`,
  2317.                 close: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  2318.                     <line x1="18" y1="6" x2="6" y2="18"/>
  2319.                     <line x1="6" y1="6" x2="18" y2="18"/>
  2320.                 </svg>`,
  2321.                 pause: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  2322.                     <rect x="6" y="4" width="4" height="16"/>
  2323.                     <rect x="14" y="4" width="4" height="16"/>
  2324.                 </svg>`,
  2325.                 resume: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  2326.                     <polygon points="5 3 19 12 5 21 5 3"/>
  2327.                 </svg>`,
  2328.                 cancel: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  2329.                     <circle cx="12" cy="12" r="10"/>
  2330.                     <line x1="15" y1="9" x2="9" y2="15"/>
  2331.                     <line x1="9" y1="9" x2="15" y2="15"/>
  2332.                 </svg>`,
  2333.                 success: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  2334.                     <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
  2335.                     <polyline points="22 4 12 14.01 9 11.01"/>
  2336.                 </svg>`,
  2337.                 error: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  2338.                     <circle cx="12" cy="12" r="10"/>
  2339.                     <line x1="12" y1="8" x2="12" y2="12"/>
  2340.                     <line x1="12" y1="16" x2="12.01" y2="16"/>
  2341.                 </svg>`,
  2342.                 warning: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  2343.                     <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
  2344.                     <line x1="12" y1="9" x2="12" y2="13"/>
  2345.                     <line x1="12" y1="17" x2="12.01" y2="17"/>
  2346.                 </svg>`,
  2347.                 github: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
  2348.                     <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
  2349.                 </svg>`,
  2350.                 twitter: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
  2351.                     <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
  2352.                 </svg>`,
  2353.                 chevronDown: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  2354.                     <polyline points="6 9 12 15 18 9"/>
  2355.                 </svg>`,
  2356.                 layers: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  2357.                     <polygon points="12 2 2 7 12 12 22 7 12 2"/>
  2358.                     <polyline points="2 17 12 22 22 17"/>
  2359.                     <polyline points="2 12 12 17 22 12"/>
  2360.                 </svg>`,
  2361.                 logToggle: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  2362.                     <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
  2363.                 </svg>`
  2364.             };
  2365.  
  2366.             this.templates = {
  2367.                 toggleButton: (id, title, icon, checked = false) => `
  2368.                     <div class="M3Unator-toggle-container">
  2369.                         <label>
  2370.                             <input type="checkbox" id="${id}" ${checked ? 'checked' : ''}>
  2371.                             <span title="${title}">${icon}</span>
  2372.                         </label>
  2373.                     </div>
  2374.                 `,
  2375.                 controlButton: (type, icon, text) => `
  2376.                     <button class="M3Unator-control-btn ${type}">
  2377.                         ${icon}
  2378.                         <span>${text}</span>
  2379.                     </button>
  2380.                 `,
  2381.                 statsItem: (icon, id, title, className = '') => `
  2382.                     <span class="M3Unator-stat ${className}" title="${title}">
  2383.                         ${icon}
  2384.                         <span id="${id}">0</span>
  2385.                     </span>
  2386.                 `
  2387.             };
  2388.  
  2389.             this.baseStyles = `
  2390.                 .M3Unator-btn-base {
  2391.                     border: none;
  2392.                     border-radius: 8px;
  2393.                     font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  2394.                     font-weight: 600;
  2395.                     cursor: pointer;
  2396.                     transition: all 0.2s ease;
  2397.                     display: flex;
  2398.                     align-items: center;
  2399.                     justify-content: center;
  2400.                     gap: 0.5rem;
  2401.                 }
  2402.  
  2403.                 .M3Unator-toggle-base {
  2404.                     position: relative;
  2405.                     display: flex;
  2406.                     align-items: center;
  2407.                     gap: 0.5rem;
  2408.                     transition: all 0.2s ease;
  2409.                 }
  2410.  
  2411.                 .M3Unator-control-base {
  2412.                     padding: 0.75rem 1.5rem;
  2413.                     border-radius: 12px;
  2414.                     font-weight: 600;
  2415.                     font-size: 0.95rem;
  2416.                     min-width: 160px;
  2417.                     background: rgba(30, 30, 46, 0.6);
  2418.                     backdrop-filter: blur(8px);
  2419.                 }
  2420.  
  2421.                 .M3Unator-stat-base {
  2422.                     display: inline-flex;
  2423.                     align-items: center;
  2424.                     gap: 0.382rem;
  2425.                     font-size: 0.875rem;
  2426.                     cursor: help;
  2427.                     min-width: 52px;
  2428.                     padding: 0 0.382rem;
  2429.                 }
  2430.  
  2431.                 .M3Unator-icon-base {
  2432.                     display: flex;
  2433.                     align-items: center;
  2434.                     justify-content: center;
  2435.                     width: 24px;
  2436.                     height: 24px;
  2437.                     transition: all 0.2s ease;
  2438.                 }
  2439.             `;
  2440.  
  2441.             GM_addStyle(this.baseStyles);
  2442.         }
  2443.  
  2444.         createComponent(type, props) {
  2445.             switch (type) {
  2446.                 case 'toggle':
  2447.                     return this.templates.toggleButton(
  2448.                         props.id,
  2449.                         props.title,
  2450.                         props.icon,
  2451.                         props.checked
  2452.                     );
  2453.                 case 'control':
  2454.                     return this.templates.controlButton(
  2455.                         props.type,
  2456.                         props.icon,
  2457.                         props.text
  2458.                     );
  2459.                 case 'stats':
  2460.                     return `
  2461.                         <span class="M3Unator-stat ${props.class}" title="${props.title}">
  2462.                             ${props.icon}
  2463.                             <span id="${props.id}">0</span>
  2464.                         </span>
  2465.                     `;
  2466.                 default:
  2467.                     return '';
  2468.             }
  2469.         }
  2470.  
  2471.         async init() {
  2472.             const container = document.createElement('div');
  2473.             container.className = 'M3Unator-container';
  2474.  
  2475.             const toggleButtons = [
  2476.                 {
  2477.                     id: 'includeVideo',
  2478.                     title: 'Video (.mp4, .mkv)',
  2479.                     icon: this.icons.video,
  2480.                     checked: true
  2481.                 },
  2482.                 {
  2483.                     id: 'includeAudio',
  2484.                     title: 'Audio (.mp3, .m4a)',
  2485.                     icon: this.icons.audio,
  2486.                     checked: true
  2487.                 },
  2488.                 {
  2489.                     id: 'recursiveSearch',
  2490.                     title: 'Scan Subdirectories',
  2491.                     icon: this.icons.folder,
  2492.                     checked: true
  2493.                 }
  2494.             ].map(props => this.createComponent('toggle', props)).join('');
  2495.  
  2496.             const controlButtons = [
  2497.                 {
  2498.                     type: 'pause',
  2499.                     icon: this.icons.pause,
  2500.                     text: 'Pause'
  2501.                 },
  2502.                 {
  2503.                     type: 'resume',
  2504.                     icon: this.icons.resume,
  2505.                     text: 'Resume'
  2506.                 },
  2507.                 {
  2508.                     type: 'cancel',
  2509.                     icon: this.icons.cancel,
  2510.                     text: 'Cancel'
  2511.                 }
  2512.             ].map(props => this.createComponent('control', props)).join('');
  2513.  
  2514.             const statsItems = [
  2515.                 {
  2516.                     icon: this.icons.file,
  2517.                     id: 'totalFiles',
  2518.                     title: 'Total Files',
  2519.                     class: ''
  2520.                 },
  2521.                 {
  2522.                     icon: this.icons.video,
  2523.                     id: 'videoFiles',
  2524.                     title: 'Video (.mp4, .mkv)',
  2525.                     class: 'video'
  2526.                 },
  2527.                 {
  2528.                     icon: this.icons.audio,
  2529.                     id: 'audioFiles',
  2530.                     title: 'Audio (.mp3, .m4a)',
  2531.                     class: 'audio'
  2532.                 },
  2533.                 {
  2534.                     icon: this.icons.folder,
  2535.                     id: 'directories',
  2536.                     title: 'Subdirectories',
  2537.                     class: 'dir'
  2538.                 },
  2539.                 {
  2540.                     icon: this.icons.layers,
  2541.                     id: 'depthLevel',
  2542.                     title: 'Depth Level',
  2543.                     class: 'depth'
  2544.                 },
  2545.                 {
  2546.                     icon: this.icons.error,
  2547.                     id: 'errors',
  2548.                     title: 'Error',
  2549.                     class: 'error'
  2550.                 }
  2551.             ].map(props => this.createComponent('stats', props)).join('');
  2552.  
  2553.             container.innerHTML = `
  2554.                 <div class="M3Unator-popup">
  2555.                     <div class="M3Unator-header">
  2556.                         <h3 class="M3Unator-title">
  2557.                             ${this.icons.video}
  2558.                             <span>M3Unator</span>
  2559.                         </h3>
  2560.                         <div style="display: flex; align-items: center;">
  2561.                             <div class="M3Unator-social">
  2562.                                 <a class="info-link">
  2563.                                     ${this.icons.info}
  2564.                                 </a>
  2565.                                 <a href="https://github.com/hasanbeder/M3Unator" target="_blank" rel="noopener noreferrer" class="github-icon">
  2566.                                     ${this.icons.github}
  2567.                                 </a>
  2568.                                 <a href="https://x.com/hasanbeder" target="_blank" rel="noopener noreferrer">
  2569.                                     ${this.icons.twitter}
  2570.                                 </a>
  2571.                             </div>
  2572.                             <button class="M3Unator-close">${this.icons.close}</button>
  2573.                         </div>
  2574.                     </div>
  2575.                     <div class="info-modal">
  2576.                         <div class="info-modal-content">
  2577.                             <div class="info-modal-header">
  2578.                                 <h3>About M3Unator</h3>
  2579.                                 <span class="info-close">${this.icons.close}</span>
  2580.                             </div>
  2581.                             <div class="info-modal-body">
  2582.                                 <p><strong>M3Unator v1.0.1</strong> - Web Directory Playlist Creator</p>
  2583.                                 <p>Create M3U/M3U8 playlists from directory listing pages. Automatically finds video and audio files in web server indexes.</p>
  2584.                                 <h4>Features:</h4>
  2585.                                 <ul>
  2586.                                     <li>Supports video formats: MP4, MKV, AVI, etc.</li>
  2587.                                     <li>Supports audio formats: MP3, M4A, FLAC, etc.</li>
  2588.                                     <li>Recursive directory scanning</li>
  2589.                                     <li>Custom playlist naming</li>
  2590.                                     <li>Progress tracking</li>
  2591.                                     <li>Dark theme interface</li>
  2592.                                 </ul>
  2593.                                 <p>For more information and updates, visit the <a href="https://github.com/hasanbeder/M3Unator" target="_blank">GitHub repository</a>.</p>
  2594.                             </div>
  2595.                         </div>
  2596.                     </div>
  2597.                     <div class="M3Unator-content">
  2598.                         <div class="M3Unator-input-row">
  2599.                             <div class="M3Unator-input-group">
  2600.                                 <input type="text" 
  2601.                                     id="playlistName" 
  2602.                                     class="M3Unator-input"
  2603.                                     placeholder="Playlist Name" 
  2604.                                     required
  2605.                                     spellcheck="false"
  2606.                                     autocomplete="off"
  2607.                                     autocorrect="off"
  2608.                                     autocapitalize="off">
  2609.  
  2610.                                 <div class="M3Unator-dropdown">
  2611.                                     <button type="button" class="M3Unator-dropdown-button">
  2612.                                         <span>.m3u</span>
  2613.                                         ${this.icons.chevronDown}
  2614.                                     </button>
  2615.                                     <div class="M3Unator-dropdown-menu">
  2616.                                         <div class="M3Unator-dropdown-item selected" data-value="m3u">.m3u</div>
  2617.                                         <div class="M3Unator-dropdown-divider"></div>
  2618.                                         <div class="M3Unator-dropdown-item" data-value="m3u8">.m3u8</div>
  2619.                                     </div>
  2620.                                 </div>
  2621.                             </div>
  2622.                         </div>
  2623.  
  2624.                         <div class="M3Unator-toggle-group">
  2625.                             ${toggleButtons}
  2626.                         </div>
  2627.  
  2628.                         <div class="M3Unator-depth-controls">
  2629.                             <div class="M3Unator-radio-group">
  2630.                                 <label class="M3Unator-radio">
  2631.                                     <input type="radio" name="depthType" value="current" id="currentDepth">
  2632.                                     <span class="radio-mark"></span>
  2633.                                     <span class="radio-label">Current directory</span>
  2634.                                 </label>
  2635.                                 <label class="M3Unator-radio">
  2636.                                     <input type="radio" name="depthType" value="custom" id="customDepth">
  2637.                                     <span class="radio-mark"></span>
  2638.                                     <span class="radio-label">Custom depth:</span>
  2639.                                     <input type="number" 
  2640.                                         id="maxDepth" 
  2641.                                         value="1" 
  2642.                                         min="1" 
  2643.                                         max="99" 
  2644.                                         class="M3Unator-depth-input"
  2645.                                         title="Subdirectory scan depth" 
  2646.                                         style="width: 64px;"
  2647.                                         inputmode="numeric"
  2648.                                         pattern="[0-9]*">
  2649.                                 </label>
  2650.                             </div>
  2651.                         </div>
  2652.  
  2653.                         <button class="M3Unator-button" id="generateBtn">
  2654.                             ${this.icons.download}
  2655.                             <span>Create Playlist</span>
  2656.                         </button>
  2657.  
  2658.                         <div class="M3Unator-controls">
  2659.                             ${controlButtons}
  2660.                         </div>
  2661.  
  2662.                         <div class="M3Unator-stats-bar">
  2663.                             <div class="M3Unator-stats">
  2664.                                 ${statsItems}
  2665.                             </div>
  2666.                         </div>
  2667.  
  2668.                         <div class="M3Unator-log-container">
  2669.                             <button class="M3Unator-log-toggle">
  2670.                                 <div class="toggle-text">
  2671.                                     ${this.icons.logToggle}
  2672.                                     <span>Log Messages</span>
  2673.                                 </div>
  2674.                                 <span class="M3Unator-log-counter">0</span>
  2675.                             </button>
  2676.                             <div id="scanLog" class="M3Unator-log collapsed"></div>
  2677.                         </div>
  2678.                     </div>
  2679.  
  2680.                     <style>
  2681.                         .M3Unator-container {
  2682.                             max-width: 400px;
  2683.                             width: 100%;
  2684.                             background: transparent;
  2685.                             backdrop-filter: none;
  2686.                         }
  2687.  
  2688.                         .M3Unator-popup {
  2689.                             background: #1e1e2e;
  2690.                             border-radius: 12px;
  2691.                             box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  2692.                             border: 1px solid rgba(69, 71, 90, 0.6);
  2693.                         }
  2694.  
  2695.                         .info-modal {
  2696.                             display: none;
  2697.                             position: fixed;
  2698.                             top: 0;
  2699.                             left: 0;
  2700.                             width: 100%;
  2701.                             height: 100%;
  2702.                             background: rgba(0, 0, 0, 0.75);
  2703.                             z-index: 99999;
  2704.                         }
  2705.  
  2706.                         .info-content {
  2707.                             position: absolute;
  2708.                             top: 50%;
  2709.                             left: 50%;
  2710.                             transform: translate(-50%, -50%);
  2711.                             background: #1e1e2e;
  2712.                             padding: 2rem;
  2713.                             border-radius: 12px;
  2714.                             max-width: 600px;
  2715.                             width: 90%;
  2716.                             max-height: 80vh;
  2717.                             overflow-y: auto;
  2718.                             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  2719.                             border: 1px solid rgba(69, 71, 90, 0.6);
  2720.                         }
  2721.  
  2722.                         .M3Unator-content {
  2723.                             padding: 0.75rem;
  2724.                             display: flex;
  2725.                             flex-direction: column;
  2726.                             gap: 0.75rem;
  2727.                             max-width: 100%;
  2728.                             overflow: hidden;
  2729.                         }
  2730.  
  2731.                         .M3Unator-input-row {
  2732.                             display: flex;
  2733.                             width: 100%;
  2734.                             position: relative;
  2735.                             max-width: 100%;
  2736.                             overflow: visible;
  2737.                         }
  2738.  
  2739.                         .M3Unator-input-group {
  2740.                             flex: 1;
  2741.                             min-width: 0;
  2742.                             position: relative;
  2743.                         }
  2744.  
  2745.                         .M3Unator-input {
  2746.                             width: 100%;
  2747.                             min-width: 0;
  2748.                             padding-right: 80px;
  2749.                             box-sizing: border-box;
  2750.                             transition: all 0.2s ease;
  2751.                             background: rgba(30, 30, 46, 0.6);
  2752.                             border: 1px solid rgba(69, 71, 90, 0.6);
  2753.                             border-radius: 6px;
  2754.                             color: #f5c2e7;
  2755.                             padding: 8px 80px 8px 12px;
  2756.                             font-size: 14px;
  2757.                         }
  2758.  
  2759.                         .M3Unator-dropdown {
  2760.                             position: absolute;
  2761.                             right: 8px;
  2762.                             top: 50%;
  2763.                             transform: translateY(-50%);
  2764.                             width: 70px;
  2765.                             z-index: 9999;
  2766.                             display: none;
  2767.                         }
  2768.  
  2769.                         .M3Unator-dropdown.active {
  2770.                             display: block;
  2771.                         }
  2772.  
  2773.                         .M3Unator-dropdown-button {
  2774.                             width: 100%;
  2775.                             padding: 4px 8px;
  2776.                             border-radius: 6px;
  2777.                             background: rgba(30, 30, 46, 0.8);
  2778.                             border: 1px solid rgba(69, 71, 90, 0.6);
  2779.                             color: #f5c2e7;
  2780.                             cursor: pointer;
  2781.                             display: flex;
  2782.                             align-items: center;
  2783.                             justify-content: space-between;
  2784.                             gap: 4px;
  2785.                             transition: all 0.2s ease;
  2786.                             box-sizing: border-box;
  2787.                             font-size: 14px;
  2788.                         }
  2789.  
  2790.                         .M3Unator-dropdown-button:hover {
  2791.                             background: rgba(30, 30, 46, 0.9);
  2792.                             border-color: rgba(69, 71, 90, 0.8);
  2793.                         }
  2794.  
  2795.                         .M3Unator-dropdown-menu {
  2796.                             position: absolute;
  2797.                             top: 100%;
  2798.                             right: 0;
  2799.                             width: 100%;
  2800.                             margin-top: 4px;
  2801.                             background: rgba(30, 30, 46, 0.95);
  2802.                             border: 1px solid rgba(69, 71, 90, 0.6);
  2803.                             border-radius: 6px;
  2804.                             padding: 4px;
  2805.                             display: none;
  2806.                             box-sizing: border-box;
  2807.                             z-index: 9999;
  2808.                         }
  2809.  
  2810.                         .M3Unator-dropdown.active .M3Unator-dropdown-menu {
  2811.                             display: block;
  2812.                         }
  2813.  
  2814.                         .M3Unator-dropdown-item {
  2815.                             padding: 8px 12px;
  2816.                             cursor: pointer;
  2817.                             border-radius: 4px;
  2818.                             transition: all 0.2s ease;
  2819.                             text-align: center;
  2820.                             font-size: 14px;
  2821.                             font-family: monospace;
  2822.                             color: #cdd6f4;
  2823.                         }
  2824.  
  2825.                         .M3Unator-dropdown-divider {
  2826.                             height: 1px;
  2827.                             background: rgba(69, 71, 90, 0.6);
  2828.                             margin: 6px 0;
  2829.                         }
  2830.  
  2831.                         .M3Unator-dropdown-menu {
  2832.                             position: absolute;
  2833.                             top: 100%;
  2834.                             right: 0;
  2835.                             width: 100%;
  2836.                             margin-top: 4px;
  2837.                             background: #1e1e2e;
  2838.                             border: 1px solid rgba(69, 71, 90, 0.6);
  2839.                             border-radius: 6px;
  2840.                             padding: 6px;
  2841.                             display: none;
  2842.                             box-sizing: border-box;
  2843.                             z-index: 9999;
  2844.                         }
  2845.  
  2846.                         .M3Unator-dropdown-button {
  2847.                             width: 100%;
  2848.                             padding: 4px 8px;
  2849.                             border-radius: 6px;
  2850.                             background: #1e1e2e;
  2851.                             border: 1px solid rgba(69, 71, 90, 0.6);
  2852.                             color: #f5c2e7;
  2853.                             cursor: pointer;
  2854.                             display: flex;
  2855.                             align-items: center;
  2856.                             justify-content: space-between;
  2857.                             gap: 4px;
  2858.                             transition: all 0.2s ease;
  2859.                             box-sizing: border-box;
  2860.                             font-size: 14px;
  2861.                             font-family: monospace;
  2862.                         }
  2863.  
  2864.                         .M3Unator-dropdown-item:hover {
  2865.                             background: rgba(203, 166, 247, 0.1);
  2866.                             color: #f5c2e7;
  2867.                         }
  2868.  
  2869.                         .M3Unator-dropdown-item.selected {
  2870.                             background: rgba(203, 166, 247, 0.1);
  2871.                             color: #cba6f7;
  2872.                         }
  2873.                     </style>
  2874.                 </div>
  2875.             `;
  2876.  
  2877.             document.body.appendChild(container);
  2878.             const launcher = document.createElement('button');
  2879.             launcher.className = 'M3Unator-launcher';
  2880.             launcher.innerHTML = `
  2881.                 ${this.icons.video}
  2882.                 <span>M3Unator</span>
  2883.             `;
  2884.             
  2885.             document.body.appendChild(launcher);
  2886.             const popup = container.querySelector('.M3Unator-popup');
  2887.             const header = container.querySelector('.M3Unator-header');
  2888.             this.makeDraggable(popup, header);
  2889.             const statsBar = container.querySelector('.M3Unator-stats-bar');
  2890.             if (statsBar) {
  2891.                 statsBar.style.display = 'block';
  2892.             }
  2893.  
  2894.             this.domElements = {
  2895.                 container,
  2896.                 popup: container.querySelector('.M3Unator-popup'),
  2897.                 header: container.querySelector('.M3Unator-header'),
  2898.                 closeBtn: container.querySelector('.M3Unator-close'),
  2899.                 generateBtn: container.querySelector('#generateBtn'),
  2900.                 playlistInput: container.querySelector('#playlistName'),
  2901.                 includeVideo: container.querySelector('#includeVideo'),
  2902.                 includeAudio: container.querySelector('#includeAudio'),
  2903.                 recursiveSearch: container.querySelector('#recursiveSearch'),
  2904.                 controls: container.querySelector('.M3Unator-controls'),
  2905.                 scanLog: container.querySelector('#scanLog'),
  2906.                 statsBar: container.querySelector('.M3Unator-stats-bar'),
  2907.                 dropdown: container.querySelector('.M3Unator-dropdown'),
  2908.                 launcher,
  2909.                 stats: {
  2910.                     totalFiles: container.querySelector('#totalFiles'),
  2911.                     videoFiles: container.querySelector('#videoFiles'),
  2912.                     audioFiles: container.querySelector('#audioFiles'),
  2913.                     directories: container.querySelector('#directories'),
  2914.                     depthLevel: container.querySelector('#depthLevel'),
  2915.                     errors: container.querySelector('#errors')
  2916.                 },
  2917.                 depthControls: container.querySelector('.M3Unator-depth-controls'),
  2918.                 currentDepth: container.querySelector('#currentDepth'),
  2919.                 customDepth: container.querySelector('#customDepth'),
  2920.                 maxDepth: container.querySelector('#maxDepth'),
  2921.                 logToggle: container.querySelector('.M3Unator-log-toggle'),
  2922.                 logCounter: container.querySelector('.M3Unator-log-counter'),
  2923.             };
  2924.  
  2925.             launcher.onclick = () => {
  2926.                 this.domElements.container.setAttribute('data-visible', 'true');
  2927.                 const overlay = document.createElement('div');
  2928.                 overlay.className = 'M3Unator-overlay';
  2929.                 document.body.appendChild(overlay);
  2930.                 
  2931.                 const popup = this.domElements.popup;
  2932.                 const rect = popup.getBoundingClientRect();
  2933.                 const centerX = (window.innerWidth - rect.width) / 2;
  2934.                 const centerY = (window.innerHeight - rect.height) / 2;
  2935.                 popup.style.left = `${centerX}px`;
  2936.                 popup.style.top = `${centerY}px`;
  2937.             };
  2938.  
  2939.             document.querySelector('.M3Unator-close').onclick = () => {
  2940.                 if (this.state.isGenerating) {
  2941.                 this.state.isGenerating = false;
  2942.                 this.state.isPaused = false;
  2943.                     this.reset({ isCancelled: true, enableToggles: true });
  2944.                     this.showToast('Scan cancelled', 'warning');
  2945.                 }
  2946.                 this.domElements.container.removeAttribute('data-visible');
  2947.                 const overlay = document.querySelector('.M3Unator-overlay');
  2948.                 if (overlay) overlay.remove();
  2949.             };
  2950.  
  2951.             this.setupPopupHandlers();
  2952.  
  2953.             this.updateCounter(0);
  2954.  
  2955.             this.domElements.logToggle.addEventListener('click', () => {
  2956.                 const log = this.domElements.scanLog;
  2957.                 const toggle = this.domElements.logToggle;
  2958.                 
  2959.                 if (log.classList.contains('expanded')) {
  2960.                     log.classList.remove('expanded');
  2961.                     toggle.classList.remove('active');
  2962.                 } else {
  2963.                     log.classList.add('expanded');
  2964.                     toggle.classList.add('active');
  2965.                     log.scrollTop = log.scrollHeight;
  2966.                 }
  2967.             });
  2968.  
  2969.             this.domElements.scanLog.classList.remove('expanded');
  2970.             this.domElements.logToggle.classList.remove('active');
  2971.  
  2972.             this.logCount = 0;
  2973.         }
  2974.  
  2975.         updateStyles() {
  2976.             GM_addStyle(`
  2977.                 .M3Unator-toggle-container {
  2978.                     @extend .M3Unator-toggle-base;
  2979.                 }
  2980.  
  2981.                 .M3Unator-control-btn {
  2982.                     @extend .M3Unator-control-base;
  2983.                 }
  2984.  
  2985.                 .M3Unator-stat {
  2986.                     @extend .M3Unator-stat-base;
  2987.                 }
  2988.  
  2989.                 .M3Unator-toggle-container span {
  2990.                     @extend .M3Unator-icon-base;
  2991.                     background: #1e1e2e;
  2992.                     border: 2px solid #45475a;
  2993.                     border-radius: 16px;
  2994.                 }
  2995.  
  2996.                 .M3Unator-control-btn.pause {
  2997.                     border-color: #fab387;
  2998.                     color: #fab387;
  2999.                 }
  3000.  
  3001.                 .M3Unator-control-btn.resume {
  3002.                     border-color: #94e2d5;
  3003.                     color: #94e2d5;
  3004.                 }
  3005.  
  3006.                 .M3Unator-control-btn.cancel {
  3007.                     border-color: #f38ba8;
  3008.                     color: #f38ba8;
  3009.                 }
  3010.  
  3011.             `);
  3012.         }
  3013.  
  3014.         makeDraggable(element, handle) {
  3015.             let isDragging = false;
  3016.             let currentX;
  3017.             let currentY;
  3018.             let initialX;
  3019.             let initialY;
  3020.             let xOffset = 0;
  3021.             let yOffset = 0;
  3022.  
  3023.             const centerWindow = () => {
  3024.                 const rect = element.getBoundingClientRect();
  3025.                 const centerX = (window.innerWidth - rect.width) / 2;
  3026.                 const centerY = (window.innerHeight - rect.height) / 2;
  3027.                 
  3028.                 element.style.left = `${centerX}px`;
  3029.                 element.style.top = `${centerY}px`;
  3030.                 
  3031.                 xOffset = centerX;
  3032.                 yOffset = centerY;
  3033.                 
  3034.                 element.style.transform = 'none';
  3035.             };
  3036.  
  3037.             centerWindow();
  3038.  
  3039.             const getPosition = (e) => {
  3040.                 return {
  3041.                     x: e.type.includes('touch') ? e.touches[0].clientX : e.clientX,
  3042.                     y: e.type.includes('touch') ? e.touches[0].clientY : e.clientY
  3043.                 };
  3044.             };
  3045.  
  3046.             const dragStart = (e) => {
  3047.                 if (e.target === handle || handle.contains(e.target)) {
  3048.                     e.preventDefault();
  3049.                     const pos = getPosition(e);
  3050.                     
  3051.                     isDragging = true;
  3052.                     
  3053.                     const rect = element.getBoundingClientRect();
  3054.                     xOffset = rect.left;
  3055.                     yOffset = rect.top;
  3056.                     
  3057.                     initialX = pos.x - xOffset;
  3058.                     initialY = pos.y - yOffset;
  3059.  
  3060.                     handle.style.cursor = 'grabbing';
  3061.                 }
  3062.             };
  3063.  
  3064.             const drag = (e) => {
  3065.                 if (isDragging) {
  3066.                     e.preventDefault();
  3067.                     const pos = getPosition(e);
  3068.  
  3069.                     currentX = pos.x - initialX;
  3070.                     currentY = pos.y - initialY;
  3071.  
  3072.                     const rect = element.getBoundingClientRect();
  3073.                     const maxX = window.innerWidth - rect.width;
  3074.                     const maxY = window.innerHeight - rect.height;
  3075.  
  3076.                     currentX = Math.min(Math.max(0, currentX), maxX);
  3077.                     currentY = Math.min(Math.max(0, currentY), maxY);
  3078.  
  3079.                     element.style.left = `${currentX}px`;
  3080.                     element.style.top = `${currentY}px`;
  3081.                     
  3082.                     xOffset = currentX;
  3083.                     yOffset = currentY;
  3084.                 }
  3085.             };
  3086.  
  3087.             const dragEnd = () => {
  3088.                 if (isDragging) {
  3089.                     isDragging = false;
  3090.                     handle.style.cursor = 'grab';
  3091.                 }
  3092.             };
  3093.  
  3094.             handle.addEventListener('mousedown', dragStart);
  3095.             document.addEventListener('mousemove', drag);
  3096.             document.addEventListener('mouseup', dragEnd);
  3097.  
  3098.             handle.addEventListener('touchstart', dragStart, { passive: false });
  3099.             document.addEventListener('touchmove', drag, { passive: false });
  3100.             document.addEventListener('touchend', dragEnd);
  3101.  
  3102.             window.addEventListener('resize', () => {
  3103.                 if (!isDragging) {
  3104.                     centerWindow();
  3105.                 }
  3106.             });
  3107.  
  3108.             handle.style.cursor = 'grab';
  3109.             handle.style.userSelect = 'none';
  3110.             handle.style.touchAction = 'none';
  3111.  
  3112.             element.style.position = 'fixed';
  3113.             element.style.margin = '0';
  3114.             element.style.touchAction = 'none';
  3115.             element.style.transition = 'none';
  3116.         }
  3117.  
  3118.         showToast(message, type = 'success', duration = 3000) {
  3119.             let toastContainer = document.querySelector('.M3Unator-toast-container');
  3120.             if (!toastContainer) {
  3121.                 toastContainer = document.createElement('div');
  3122.                 toastContainer.className = 'M3Unator-toast-container';
  3123.                 document.body.appendChild(toastContainer);
  3124.             }
  3125.  
  3126.             while (toastContainer.firstChild) {
  3127.                 toastContainer.removeChild(toastContainer.firstChild);
  3128.             }
  3129.  
  3130.             const toast = document.createElement('div');
  3131.             toast.className = `M3Unator-toast ${type}`;
  3132.             toast.innerHTML = `${this.icons[type]}<span>${message}</span>`;
  3133.  
  3134.             toastContainer.appendChild(toast);
  3135.  
  3136.             setTimeout(() => {
  3137.                 toast.classList.add('removing');
  3138.                 setTimeout(() => {
  3139.                     if (toast.parentNode === toastContainer) {
  3140.                         toastContainer.removeChild(toast);
  3141.                     }
  3142.                     if (toastContainer.children.length === 0) {
  3143.                         document.body.removeChild(toastContainer);
  3144.                     }
  3145.                 }, 300);
  3146.             }, duration);
  3147.         }
  3148.  
  3149.         setupPopupHandlers() {
  3150.             const generateBtn = this.domElements.generateBtn;
  3151.             const playlistInput = this.domElements.playlistInput;
  3152.             const includeVideo = this.domElements.includeVideo;
  3153.             const includeAudio = this.domElements.includeAudio;
  3154.             const recursiveSearch = this.domElements.recursiveSearch;
  3155.             const controls = this.domElements.controls;
  3156.  
  3157.             const dropdown = this.domElements.dropdown;
  3158.             const dropdownButton = dropdown.querySelector('.M3Unator-dropdown-button');
  3159.             const dropdownItems = dropdown.querySelectorAll('.M3Unator-dropdown-item');
  3160.  
  3161.             const controlButtons = controls.querySelectorAll('.M3Unator-control-btn');
  3162.             const pauseBtn = controlButtons[0];
  3163.             const resumeBtn = controlButtons[1];
  3164.             const cancelBtn = controlButtons[2];
  3165.  
  3166.             dropdownButton.addEventListener('click', () => {
  3167.                 dropdown.classList.toggle('active');
  3168.             });
  3169.  
  3170.             document.addEventListener('click', (e) => {
  3171.                 if (!dropdown.contains(e.target)) {
  3172.                     dropdown.classList.remove('active');
  3173.                 }
  3174.             });
  3175.  
  3176.             dropdownItems.forEach(item => {
  3177.                 item.addEventListener('click', () => {
  3178.                     dropdownItems.forEach(i => i.classList.remove('selected'));
  3179.                     item.classList.add('selected');
  3180.                     dropdownButton.querySelector('span').textContent = item.textContent;
  3181.                     this.state.selectedFormat = item.dataset.value;
  3182.                     dropdown.classList.remove('active');
  3183.                 });
  3184.             });
  3185.  
  3186.             recursiveSearch.checked = true;
  3187.             this.state.recursiveSearch = true;
  3188.             includeVideo.checked = true;
  3189.             includeAudio.checked = true;
  3190.             this.state.includeVideo = true;
  3191.             this.state.includeAudio = true;
  3192.  
  3193.             includeVideo.addEventListener('change', (e) => {
  3194.                 this.state.includeVideo = e.target.checked;
  3195.                 this.addLogEntry(
  3196.                     e.target.checked ? 
  3197.                     'Video files will be included' : 
  3198.                     'Video files will not be included',
  3199.                     'info'
  3200.                 );
  3201.             });
  3202.  
  3203.             includeAudio.addEventListener('change', (e) => {
  3204.                 this.state.includeAudio = e.target.checked;
  3205.                 this.addLogEntry(
  3206.                     e.target.checked ? 
  3207.                     'Audio files will be included' : 
  3208.                     'Audio files will not be included',
  3209.                     'info'
  3210.                 );
  3211.             });
  3212.  
  3213.                 const currentDepth = this.domElements.currentDepth;
  3214.                 const customDepth = this.domElements.customDepth;
  3215.                 const maxDepth = this.domElements.maxDepth;
  3216.             const depthControls = this.domElements.depthControls;
  3217.  
  3218.             depthControls.style.display = 'none';
  3219.             depthControls.classList.remove('active');
  3220.             this.state.maxDepth = -1;
  3221.  
  3222.             currentDepth.checked = true;
  3223.             customDepth.checked = false;
  3224.             maxDepth.disabled = true;
  3225.             maxDepth.value = '1';
  3226.  
  3227.             recursiveSearch.addEventListener('change', (e) => {
  3228.                 if (!e.target.checked) {
  3229.                     depthControls.style.display = 'block';
  3230.                     depthControls.classList.add('active');
  3231.                     
  3232.                     currentDepth.checked = true;
  3233.                     customDepth.checked = false;
  3234.                     maxDepth.disabled = true;
  3235.                     this.state.maxDepth = 0;
  3236.                     
  3237.                     this.addLogEntry('Directory scanning disabled, only current directory will be scanned', 'info');
  3238.                 } else {
  3239.                     depthControls.style.display = 'none';
  3240.                     depthControls.classList.remove('active');
  3241.                     
  3242.                     this.state.maxDepth = -1;
  3243.                     this.state.recursiveSearch = true;
  3244.                     
  3245.                     this.addLogEntry('Directory scanning active, all directories will be scanned', 'info');
  3246.                 }
  3247.             });
  3248.  
  3249.             this.domElements.currentDepth.addEventListener('change', (e) => {
  3250.                 if (e.target.checked && !recursiveSearch.checked) {
  3251.                     this.state.maxDepth = 0;
  3252.                     this.domElements.maxDepth.disabled = true;
  3253.                     this.addLogEntry('Only current directory will be scanned', 'info');
  3254.                 }
  3255.             });
  3256.  
  3257.             this.domElements.customDepth.addEventListener('change', (e) => {
  3258.                 if (e.target.checked && !recursiveSearch.checked) {
  3259.                     const depthValue = parseInt(this.domElements.maxDepth.value) || 1;
  3260.                     this.state.maxDepth = depthValue;
  3261.                     this.domElements.maxDepth.disabled = false;
  3262.                     this.addLogEntry(
  3263.                         `Directory scanning depth: ${depthValue} ` +
  3264.                         `(current directory + ${depthValue} sublevels)`, 
  3265.                         'info'
  3266.                     );
  3267.                 }
  3268.             });
  3269.  
  3270.             this.domElements.maxDepth.addEventListener('input', (e) => {
  3271.                 if (this.domElements.customDepth.checked && !recursiveSearch.checked) {
  3272.                     const value = Math.min(99, Math.max(1, parseInt(e.target.value) || 1));
  3273.                     e.target.value = value;
  3274.                     this.state.maxDepth = value;
  3275.                 this.addLogEntry(
  3276.                         `Directory scanning depth updated: ${value} ` +
  3277.                         `(current directory + ${value} sublevels)`, 
  3278.                     'info'
  3279.                 );
  3280.                 }
  3281.             });
  3282.  
  3283.             pauseBtn.addEventListener('click', () => {
  3284.                 this.state.isPaused = true;
  3285.                 pauseBtn.style.display = 'none';
  3286.                 resumeBtn.style.display = 'flex';
  3287.                 
  3288.                 generateBtn.innerHTML = `
  3289.                     <div class="M3Unator-spinner" style="animation-play-state: paused;"></div>
  3290.                     <span>Scan paused</span>
  3291.                 `;
  3292.                 
  3293.                 this.showToast('Scan paused', 'warning');
  3294.                 this.addLogEntry('Scan paused...', 'warning');
  3295.             });
  3296.  
  3297.             resumeBtn.addEventListener('click', () => {
  3298.                 this.state.isPaused = false;
  3299.                 resumeBtn.style.display = 'none';
  3300.                 pauseBtn.style.display = 'flex';
  3301.                 
  3302.                 generateBtn.innerHTML = `
  3303.                     <div class="M3Unator-spinner"></div>
  3304.                     <span>Creating...</span>
  3305.                 `;
  3306.                 
  3307.                 this.showToast('Scan in progress', 'success');
  3308.                 this.addLogEntry('Scan in progress...', 'success');
  3309.             });
  3310.  
  3311.             cancelBtn.addEventListener('click', () => {
  3312.                 this.state.isGenerating = false;
  3313.                 this.state.isPaused = false;
  3314.                 
  3315.                 setTimeout(() => {
  3316.                     this.reset({ isCancelled: true, enableToggles: true });
  3317.                 this.showToast('Scan cancelled', 'warning');
  3318.                 }, 100);
  3319.             });
  3320.  
  3321.             generateBtn.addEventListener('click', async () => {
  3322.                 const playlistName = this.sanitizeInput(playlistInput.value.trim());
  3323.  
  3324.                 if (!playlistName) {
  3325.                     this.showToast('Please enter a valid playlist name', 'warning');
  3326.                     return;
  3327.                 }
  3328.  
  3329.                 if (!this.state.includeVideo && !this.state.includeAudio) {
  3330.                     this.showToast('Please select at least one media type', 'warning');
  3331.                     return;
  3332.                 }
  3333.  
  3334.                 try {
  3335.                     this.entries = [];
  3336.                     this.seenUrls.clear();
  3337.                     this.logCount = 0;
  3338.                     if (this.domElements.scanLog) {
  3339.                         this.domElements.scanLog.innerHTML = '';
  3340.                     }
  3341.                     if (this.domElements.logCounter) {
  3342.                         this.domElements.logCounter.textContent = '0';
  3343.                     }
  3344.                     this.state.stats = JSON.parse(JSON.stringify(this.initialStats));
  3345.  
  3346.                     this.state.isGenerating = true;
  3347.                     generateBtn.disabled = true;
  3348.                     generateBtn.innerHTML = `
  3349.                         <div class="M3Unator-spinner"></div>
  3350.                         <span>Creating...</span>
  3351.                     `;
  3352.  
  3353.                     this.domElements.includeVideo.disabled = true;
  3354.                     this.domElements.includeAudio.disabled = true;
  3355.                     this.domElements.recursiveSearch.disabled = true;
  3356.                     this.domElements.currentDepth.disabled = true;
  3357.                     this.domElements.customDepth.disabled = true;
  3358.                     this.domElements.maxDepth.disabled = true;
  3359.  
  3360.                     controls.style.display = 'flex';
  3361.                     controls.classList.add('active');
  3362.                     
  3363.                     if (pauseBtn) {
  3364.                         pauseBtn.style.display = 'flex';
  3365.                         resumeBtn.style.display = 'none';
  3366.                         cancelBtn.style.display = 'flex';
  3367.                     }
  3368.  
  3369.                     this.domElements.statsBar.style.display = 'block';
  3370.                     this.domElements.statsBar.classList.add('active');
  3371.  
  3372.                     const entries = await this.scanDirectory(window.location.href, '', 0);
  3373.  
  3374.                     if (!this.state.isGenerating) {
  3375.                         return;
  3376.                     }
  3377.  
  3378.                     if (entries.length === 0) {
  3379.                         this.showToast('No media files found', 'error');
  3380.                         this.reset({ isCancelled: true });
  3381.                         return;
  3382.                     }
  3383.  
  3384.                     this.addLogEntry(`Total ${entries.length} files found.`, 'success');
  3385.                     this.updateCounter(entries.length);
  3386.  
  3387.                     const content = this.createPlaylist(entries);
  3388.                     const fileName = `${playlistName}.${this.state.selectedFormat}`;
  3389.  
  3390.                     const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
  3391.                     const url = URL.createObjectURL(blob);
  3392.                     const a = document.createElement('a');
  3393.                     a.href = url;
  3394.                     a.download = fileName;
  3395.                     document.body.appendChild(a);
  3396.                     a.click();
  3397.                     document.body.removeChild(a);
  3398.                     URL.revokeObjectURL(url);
  3399.  
  3400.                     this.reset({ keepLogs: true, keepUI: true, enableToggles: true });
  3401.  
  3402.                 } catch (error) {
  3403.                     console.error('Error creating playlist:', error);
  3404.                     this.addLogEntry(`Error: ${error.message}`, 'error');
  3405.                     this.showToast('Error creating playlist', 'error');
  3406.                     this.reset({ isCancelled: true });
  3407.                 }
  3408.             });
  3409.         }
  3410.  
  3411.         reset(options = {}) {
  3412.             const {
  3413.                 isCancelled = false,
  3414.                 uiOnly = false,
  3415.                 keepLogs = false,
  3416.                 keepUI = false,
  3417.                 enableToggles = false,
  3418.                 wasGenerating = this.state.isGenerating
  3419.             } = options;
  3420.  
  3421.             this.state.isGenerating = false;
  3422.             this.state.isPaused = false;
  3423.             
  3424.             if (!uiOnly) {
  3425.                 this.entries = [];
  3426.                 this.seenUrls.clear();
  3427.                 
  3428.                 if (!keepLogs) {
  3429.                     this.logCount = 0;
  3430.                     if (this.domElements.scanLog) {
  3431.                         this.domElements.scanLog.innerHTML = '';
  3432.                     }
  3433.                     if (this.domElements.logCounter) {
  3434.                         this.domElements.logCounter.textContent = '0';
  3435.                     }
  3436.                 }
  3437.  
  3438.                 if (wasGenerating && !isCancelled) {
  3439.                     const stats = this.domElements.stats;
  3440.                     const summary = [
  3441.                         `Scan completed:`,
  3442.                         `• Video files: ${stats.videoFiles.textContent}`,
  3443.                         `• Audio files: ${stats.audioFiles.textContent}`,
  3444.                         `• Scanned directories: ${stats.directories.textContent}`,
  3445.                         `• Maximum depth: ${stats.depthLevel.textContent}`,
  3446.                         stats.errors.textContent > 0 ? `• Errors: ${stats.errors.textContent} (${this.state.stats.errors.skipped} skipped)` : null
  3447.                     ].filter(Boolean).join('\n');
  3448.  
  3449.                     this.addLogEntry(summary, 'final');
  3450.                 }
  3451.             }
  3452.             
  3453.             const elements = this.domElements;
  3454.             
  3455.             if (elements.generateBtn) {
  3456.                 elements.generateBtn.disabled = false;
  3457.                 elements.generateBtn.innerHTML = `${this.icons.download}<span>Create Playlist</span>`;
  3458.             }
  3459.  
  3460.             if (elements.controls) {
  3461.                 elements.controls.style.display = 'none';
  3462.                 elements.controls.classList.remove('active');
  3463.                 
  3464.                 const pauseBtn = elements.controls.querySelector('.M3Unator-control-btn.pause');
  3465.                 const resumeBtn = elements.controls.querySelector('.M3Unator-control-btn.resume');
  3466.                 const cancelBtn = elements.controls.querySelector('.M3Unator-control-btn.cancel');
  3467.                 
  3468.                 if (pauseBtn) pauseBtn.style.display = 'none';
  3469.                 if (resumeBtn) resumeBtn.style.display = 'none';
  3470.                 if (cancelBtn) cancelBtn.style.display = 'none';
  3471.             }
  3472.  
  3473.             if (enableToggles) {
  3474.                 if (elements.includeVideo) elements.includeVideo.disabled = false;
  3475.                 if (elements.includeAudio) elements.includeAudio.disabled = false;
  3476.                 if (elements.recursiveSearch) elements.recursiveSearch.disabled = false;
  3477.                 if (elements.currentDepth) elements.currentDepth.disabled = false;
  3478.                 if (elements.customDepth) elements.customDepth.disabled = false;
  3479.                 if (elements.maxDepth) elements.maxDepth.disabled = elements.customDepth ? !elements.customDepth.checked : true;
  3480.             }
  3481.             
  3482.             if (uiOnly) return;
  3483.  
  3484.             if (isCancelled) {
  3485.                 this.state.stats = JSON.parse(JSON.stringify(this.initialStats));
  3486.  
  3487.                 if (!keepLogs) {
  3488.                     if (elements.scanLog) {
  3489.                         elements.scanLog.innerHTML = '';
  3490.                         elements.scanLog.classList.add('collapsed');
  3491.                     }
  3492.  
  3493.                     if (elements.logCounter) {
  3494.                         elements.logCounter.textContent = '0';
  3495.                     }
  3496.  
  3497.                     if (elements.logToggle) {
  3498.                         elements.logToggle.classList.remove('active');
  3499.                     }
  3500.  
  3501.                     if (this.domElements.stats) {
  3502.                         Object.entries(this.domElements.stats).forEach(([key, element]) => {
  3503.                             if (element) {
  3504.                                 element.textContent = '0';
  3505.                                 const statContainer = element.closest('.M3Unator-stat');
  3506.                                 if (statContainer) {
  3507.                                     statContainer.style.opacity = '0.5';
  3508.                                     if (key === 'depthLevel') {
  3509.                                         statContainer.dataset.progress = '';
  3510.                                         statContainer.title = 'Depth Level: 0';
  3511.                                     }
  3512.                                 }
  3513.                             }
  3514.                         });
  3515.                     }
  3516.                 }
  3517.             }
  3518.  
  3519.             if (elements.recursiveSearch) {
  3520.                 elements.recursiveSearch.checked = true;
  3521.                 this.state.recursiveSearch = true;
  3522.                 this.state.maxDepth = -1;
  3523.             }
  3524.  
  3525.             if (elements.currentDepth) {
  3526.                 elements.currentDepth.checked = false;
  3527.             }
  3528.  
  3529.             if (elements.customDepth) {
  3530.                 elements.customDepth.checked = false;
  3531.             }
  3532.  
  3533.             if (elements.maxDepth) {
  3534.                 elements.maxDepth.disabled = true;
  3535.                 elements.maxDepth.value = '1';
  3536.             }
  3537.  
  3538.             if (elements.depthControls) {
  3539.                 elements.depthControls.classList.remove('active');
  3540.             }
  3541.         }
  3542.  
  3543.         handleError(error, context = '') {
  3544.             let userMessage = 'An error occurred';
  3545.             let logMessage = error.message;
  3546.             let type = 'error';
  3547.  
  3548.             switch (true) {
  3549.                 case error.name === 'AbortError':
  3550.                     userMessage = 'Server not responding, operation timed out';
  3551.                     logMessage = `Timeout: ${context}`;
  3552.                     type = 'warning';
  3553.                     break;
  3554.  
  3555.                 case error.message.includes('HTTP error'):
  3556.                     const status = error.message.match(/\d+/)?.[0];
  3557.                     switch (status) {
  3558.                         case '403':
  3559.                             userMessage = 'Access denied to this directory';
  3560.                             break;
  3561.                         case '404':
  3562.                             userMessage = 'Directory or file not found';
  3563.                             break;
  3564.                         case '429':
  3565.                             userMessage = 'Too many requests, please wait a while';
  3566.                             break;
  3567.                         case '500':
  3568.                         case '502':
  3569.                         case '503':
  3570.                             userMessage = 'Server is currently unable to respond, please try again later';
  3571.                             break;
  3572.                         default:
  3573.                             userMessage = 'Error communicating with server';
  3574.                     }
  3575.                     logMessage = `${error.message} (${context})`;
  3576.                     break;
  3577.  
  3578.                 case error.message.includes('decode'):
  3579.                     userMessage = 'Filename or path could not be read';
  3580.                     logMessage = `Decode error: ${context} - ${error.message}`;
  3581.                     type = 'warning';
  3582.                     break;
  3583.  
  3584.                 case error.message.includes('NetworkError'):
  3585.                     userMessage = 'Network connection error, please check your connection';
  3586.                     logMessage = `Network error: ${context}`;
  3587.                     break;
  3588.  
  3589.                 case error.message.includes('SecurityError'):
  3590.                     userMessage = 'Operation not allowed due to security restrictions';
  3591.                     logMessage = `Security error: ${context}`;
  3592.                     break;
  3593.  
  3594.                 default:
  3595.                     userMessage = 'Unexpected error occurred';
  3596.                     logMessage = `${error.name}: ${error.message} (${context})`;
  3597.             }
  3598.  
  3599.             console.error(`[${context}]`, error);
  3600.  
  3601.             this.showToast(userMessage, type);
  3602.  
  3603.             this.addLogEntry(logMessage, type);
  3604.  
  3605.             this.state.stats.errors.total++;
  3606.         }
  3607.  
  3608.         async fetchWithRetry(url, options = {}) {
  3609.             let response;
  3610.             let retryCount = 0;
  3611.             const maxRetries = this.state.retryCount;
  3612.             const baseTimeout = 1000;
  3613.             const maxTimeout = 10000;
  3614.  
  3615.             while (retryCount <= maxRetries) {
  3616.                 try {
  3617.                     const controller = new AbortController();
  3618.                     const currentTimeout = Math.min(
  3619.                         maxTimeout,
  3620.                         baseTimeout * Math.pow(2, retryCount) * (0.5 + Math.random())
  3621.                     );
  3622.                     
  3623.                     const timeoutId = setTimeout(() => controller.abort(), currentTimeout);
  3624.  
  3625.                     response = await fetch(url, {
  3626.                         ...options,
  3627.                         signal: controller.signal,
  3628.                         headers: {
  3629.                             'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
  3630.                             'Accept-Charset': 'utf-8',
  3631.                             'Accept-Language': 'en-US,en;q=0.9,tr-TR;q=0.8,tr;q=0.7'
  3632.                         }
  3633.                     });
  3634.  
  3635.                     clearTimeout(timeoutId);
  3636.  
  3637.                     if (response.ok) {
  3638.                         const contentType = response.headers.get('content-type');
  3639.                         const charset = contentType && contentType.includes('charset=') 
  3640.                             ? contentType.split('charset=')[1].toLowerCase()
  3641.                             : 'utf-8';
  3642.  
  3643.                         const buffer = await response.arrayBuffer();
  3644.                         const decoder = new TextDecoder(charset);
  3645.                         response.decodedText = decoder.decode(buffer);
  3646.  
  3647.                         return response;
  3648.                     }
  3649.  
  3650.                     throw new Error(`HTTP error! Status: ${response.status}`);
  3651.                 } catch (error) {
  3652.                     retryCount++;
  3653.                     
  3654.                     this.handleError(error, `URL: ${url}`);
  3655.  
  3656.                     if (retryCount > maxRetries) {
  3657.                         this.addLogEntry(
  3658.                             `Maximum number of attempts reached (${maxRetries}), skipping directory: ${url}`,
  3659.                             'error'
  3660.                         );
  3661.                         this.state.stats.errors.skipped++;
  3662.                         throw error;
  3663.                     }
  3664.  
  3665.                     const backoffDelay = Math.min(
  3666.                         maxTimeout,
  3667.                         baseTimeout * Math.pow(2, retryCount - 1) * (0.5 + Math.random())
  3668.                     );
  3669.  
  3670.                     this.addLogEntry(
  3671.                         `Retrying (${retryCount}/${maxRetries}), waiting for ${(backoffDelay/1000).toFixed(1)} seconds...`,
  3672.                         'warning'
  3673.                     );
  3674.  
  3675.                     await new Promise(resolve => setTimeout(resolve, backoffDelay));
  3676.                 }
  3677.             }
  3678.         }
  3679.  
  3680.         sanitizeInput(input) {
  3681.             if (!input || typeof input !== 'string') {
  3682.                 return '';
  3683.             }
  3684.  
  3685.             const sanitized = input
  3686.                 .replace(/[<>:"\/\\|?*\x00-\x1F]/g, '')
  3687.                 .trim()
  3688.                 .replace(/[\x00-\x1F\x7F]/g, '')
  3689.                 .replace(/[\u200B-\u200D\uFEFF]/g, '')
  3690.                 .replace(/[^\w\s\-_.()[\]{}#@!$%^&+=]/g, '');
  3691.  
  3692.             if (!sanitized) {
  3693.                 return 'playlist';
  3694.             }
  3695.  
  3696.             if (sanitized.length > 255) {
  3697.                 return sanitized.slice(0, 255);
  3698.             }
  3699.  
  3700.             return sanitized;
  3701.         }
  3702.  
  3703.         decodeString(str, type = 'both') {
  3704.             if (!str) return str;
  3705.             
  3706.             try {
  3707.                 let decoded = str;
  3708.                 
  3709.                 if (type === 'html' || type === 'both') {
  3710.                     decoded = decoded.replace(/&amp;/g, '&')
  3711.                      .replace(/&lt;/g, '<')
  3712.                      .replace(/&gt;/g, '>')
  3713.                      .replace(/&quot;/g, '"')
  3714.                      .replace(/&#039;/g, "'")
  3715.                      .replace(/&#x27;/g, "'")
  3716.                      .replace(/&#x2F;/g, "/");
  3717.         }
  3718.  
  3719.                 if (type === 'url' || type === 'both') {
  3720.             try {
  3721.                         decoded = decodeURIComponent(decoded);
  3722.             } catch (e) {
  3723.                         decoded = decoded.replace(/%([0-9A-F]{2})/gi, (match, hex) => {
  3724.                     try {
  3725.                         return String.fromCharCode(parseInt(hex, 16));
  3726.                     } catch {
  3727.                         return match;
  3728.                     }
  3729.                 });
  3730.                     }
  3731.                 }
  3732.                 
  3733.                 return decoded;
  3734.             } catch (error) {
  3735.                 console.warn('Decode error:', error);
  3736.                 return str;
  3737.             }
  3738.         }
  3739.  
  3740.         extractFileInfo(path) {
  3741.             try {
  3742.                 const decodedPath = this.decodeString(path);
  3743.                 const parts = decodedPath.split('/');
  3744.                 const fileName = parts.pop() || '';
  3745.                 const dirPath = parts.join('/');
  3746.                 
  3747.                 return {
  3748.                     fileName,
  3749.                     dirPath,
  3750.                     original: {
  3751.                         fileName: path.split('/').pop() || '',
  3752.                         dirPath: path.split('/').slice(0, -1).join('/')
  3753.                     }
  3754.                 };
  3755.             } catch (error) {
  3756.                 this.handleError(error, `Path decode error: ${path}`);
  3757.                 const parts = path.split('/');
  3758.                 return {
  3759.                     fileName: parts.pop() || '',
  3760.                     dirPath: parts.join('/'),
  3761.                     original: {
  3762.                         fileName: parts.pop() || '',
  3763.                         dirPath: parts.join('/')
  3764.                     }
  3765.                 };
  3766.             }
  3767.         }
  3768.  
  3769.         normalizeUrl(url) {
  3770.             let normalized = url.replace(/([^:]\/)\/+/g, "$1");
  3771.             return normalized.endsWith('/') ? normalized : normalized + '/';
  3772.         }
  3773.  
  3774.         isMediaFile(fileName, type) {
  3775.             const lowerFileName = fileName.toLowerCase();
  3776.             return type === 'video'
  3777.                 ? this.videoFormats.some(ext => lowerFileName.endsWith(ext))
  3778.                 : this.audioFormats.some(ext => lowerFileName.endsWith(ext));
  3779.         }
  3780.  
  3781.         resetCurrentStats() {
  3782.             this.state.stats.files.video.current = 0;
  3783.             this.state.stats.files.audio.current = 0;
  3784.         }
  3785.  
  3786.         updateFileStats(type) {
  3787.             this.state.stats.files[type].total++;
  3788.             this.state.stats.files[type].current++;
  3789.         }
  3790.  
  3791.         getCurrentStatsText() {
  3792.             const { video, audio } = this.state.stats.files;
  3793.             const details = [];
  3794.  
  3795.             if (video.current > 0) details.push(`${video.current} video`);
  3796.             if (audio.current > 0) details.push(`${audio.current} audio`);
  3797.  
  3798.             return details.join(' and ');
  3799.         }
  3800.  
  3801.         async scanDirectory(url, currentPath = '', depth = 0) {
  3802.             try {
  3803.                 this.resetCurrentStats();
  3804.  
  3805.                 if (!this.state.isGenerating || this.entries.length >= this.state.maxEntries) {
  3806.                     return this.entries;
  3807.                 }
  3808.  
  3809.                 while (this.state.isPaused && this.state.isGenerating) {
  3810.                     await new Promise(resolve => setTimeout(resolve, 100));
  3811.                 }
  3812.  
  3813.                 const normalizedUrl = this.normalizeUrl(url);
  3814.  
  3815.                 if (depth > this.state.stats.directories.depth) {
  3816.                 this.state.stats.directories.depth = depth;
  3817.                 }
  3818.  
  3819.                 this.state.stats.directories.total++;
  3820.  
  3821.                 this.addLogEntry(`Scanning directory (${depth}. level): ${normalizedUrl}`);
  3822.  
  3823.                 if (this.seenUrls.has(normalizedUrl)) {
  3824.                     this.addLogEntry(`Directory already scanned: ${normalizedUrl}`);
  3825.                     return this.entries;
  3826.                 }
  3827.  
  3828.                 this.seenUrls.add(normalizedUrl);
  3829.                 if (this.seenUrls.size > this.state.maxSeenUrls) {
  3830.                     const keepCount = Math.floor(this.state.maxSeenUrls * 0.75);
  3831.                     const urlsArray = Array.from(this.seenUrls);
  3832.                     const keepUrls = urlsArray.slice(-keepCount);
  3833.                     this.seenUrls = new Set(keepUrls);
  3834.                     this.addLogEntry(
  3835.                         `Cache cleared (${urlsArray.length} -> ${keepUrls.length})`,
  3836.                         'info'
  3837.                     );
  3838.                 }
  3839.  
  3840.                 let response;
  3841.                 try {
  3842.                     response = await this.fetchWithRetry(normalizedUrl);
  3843.                 } catch (error) {
  3844.                     return this.entries;
  3845.                 }
  3846.  
  3847.                 const html = response.decodedText;
  3848.                 const parser = new DOMParser();
  3849.                 const doc = parser.parseFromString(html, 'text/html');
  3850.                 
  3851.                 // Handle LiteSpeed directory listing
  3852.                 const isLiteSpeed = doc.querySelector('div#table-list') !== null;
  3853.                 let hrefs = [];
  3854.                 
  3855.                 if (isLiteSpeed) {
  3856.                     const rows = doc.querySelectorAll('#table-content tr');
  3857.                     rows.forEach(row => {
  3858.                         const link = row.querySelector('a');
  3859.                         if (link && !link.textContent.includes('Parent Directory')) {
  3860.                             const href = link.getAttribute('href');
  3861.                             if (href) hrefs.push(href);
  3862.                         }
  3863.                     });
  3864.                 } else {
  3865.                     // Handle Apache/Nginx style directory listing
  3866.                 const hrefRegex = /href="([^"]+)"/gi;
  3867.                 const matches = html.matchAll(hrefRegex);
  3868.                     hrefs = Array.from(matches, m => m[1]).filter(href =>
  3869.                     href &&
  3870.                     !href.startsWith('?') &&
  3871.                     !href.startsWith('/') &&
  3872.                     href !== '../' &&
  3873.                     !href.includes('Parent Directory')
  3874.                 );
  3875.                 }
  3876.  
  3877.                 let totalFilesInCurrentDir = 0;
  3878.  
  3879.                 for (const href of hrefs) {
  3880.                     if (!this.state.isGenerating || this.entries.length >= this.state.maxEntries) break;
  3881.  
  3882.                     try {
  3883.                         const decodedHref = this.decodeString(href);
  3884.                         const fullUrl = new URL(decodedHref, normalizedUrl).toString();
  3885.                         const { fileName } = this.extractFileInfo(decodedHref);
  3886.                         const fullPath = currentPath ? `${currentPath}/${fileName}` : fileName;
  3887.  
  3888.                         if (href.endsWith('/')) {
  3889.                             const shouldScanSubdir = 
  3890.                                 this.state.maxDepth === -1 ||
  3891.                                 (this.state.maxDepth > 0 && depth < this.state.maxDepth);
  3892.                             
  3893.                             if (shouldScanSubdir) {
  3894.                                 this.addLogEntry(`Entering directory: ${fullPath}`);
  3895.                                 await this.scanDirectory(fullUrl, fullPath, depth + 1);
  3896.                             }
  3897.                         } else {
  3898.                             totalFilesInCurrentDir++;
  3899.                             this.state.stats.totalFiles = (this.state.stats.totalFiles || 0) + 1;
  3900.  
  3901.                             const isVideo = this.isMediaFile(fileName, 'video');
  3902.                             const isAudio = this.isMediaFile(fileName, 'audio');
  3903.  
  3904.                             if ((isVideo && this.state.includeVideo) || (isAudio && this.state.includeAudio)) {
  3905.                                 if (isVideo && this.state.includeVideo) {
  3906.                                     this.updateFileStats('video');
  3907.                                 }
  3908.                                 if (isAudio && this.state.includeAudio) {
  3909.                                     this.updateFileStats('audio');
  3910.                                 }
  3911.  
  3912.                                 this.entries.push({
  3913.                                     title: fullPath,
  3914.                                     url: fullUrl
  3915.                                 });
  3916.                             }
  3917.                         }
  3918.                         this.updateCounter(this.state.stats.totalFiles);
  3919.                     } catch (error) {
  3920.                         console.error('Error processing URL:', error);
  3921.                         this.state.stats.errors.total++;
  3922.                         continue;
  3923.                     }
  3924.                 }
  3925.  
  3926.                 if (totalFilesInCurrentDir > 0) {
  3927.                     this.addLogEntry(
  3928.                         `"${currentPath || normalizedUrl}" directory contains ${totalFilesInCurrentDir} files`,
  3929.                         'info'
  3930.                     );
  3931.                 }
  3932.  
  3933.                 const statsText = this.getCurrentStatsText();
  3934.                 if (statsText) {
  3935.                     this.addLogEntry(
  3936.                         `From these, ${statsText} files were added to the playlist`,
  3937.                         'success'
  3938.                     );
  3939.                 }
  3940.  
  3941.                 return this.entries;
  3942.             } catch (error) {
  3943.                 this.state.stats.errors.total++;
  3944.                 this.addLogEntry(`Scan error (${currentPath || url}): ${error.message}`, 'error');
  3945.                 return this.entries;
  3946.             }
  3947.         }
  3948.  
  3949.         createPlaylist(entries) {
  3950.             let content = '#EXTM3U\n';
  3951.             
  3952.             const decodedEntries = entries.map(entry => {
  3953.                 try {
  3954.                     let title = this.decodeString(entry.title);
  3955.                     const depth = (title.match(/\//g) || []).length;
  3956.                     const isVideo = this.videoFormats.some(ext => title.toLowerCase().endsWith(ext));
  3957.                     const isAudio = this.audioFormats.some(ext => title.toLowerCase().endsWith(ext));
  3958.                     
  3959.                     return {
  3960.                         ...entry,
  3961.                         decodedTitle: title,
  3962.                         depth: depth,
  3963.                         isVideo: isVideo,
  3964.                         isAudio: isAudio
  3965.                     };
  3966.                 } catch (error) {
  3967.                     return {
  3968.                         ...entry,
  3969.                         decodedTitle: entry.title,
  3970.                         depth: 0,
  3971.                         isVideo: false,
  3972.                         isAudio: false
  3973.                     };
  3974.                 }
  3975.             });
  3976.  
  3977.             const videoEntries = decodedEntries.filter(entry => entry.isVideo);
  3978.             const audioEntries = decodedEntries.filter(entry => entry.isAudio);
  3979.  
  3980.             const apacheSort = (a, b) => {
  3981.                 if (a.depth !== b.depth) {
  3982.                     return a.depth - b.depth;
  3983.                 }
  3984.  
  3985.                 const aStartsWithNumber = /^\d/.test(a.decodedTitle);
  3986.                 const bStartsWithNumber = /^\d/.test(b.decodedTitle);
  3987.                 
  3988.                 if (aStartsWithNumber !== bStartsWithNumber) {
  3989.                     return aStartsWithNumber ? -1 : 1;
  3990.                 }
  3991.  
  3992.                 return a.decodedTitle.localeCompare(b.decodedTitle, undefined, {
  3993.                     numeric: true,
  3994.                     sensitivity: 'base'
  3995.                 });
  3996.             };
  3997.  
  3998.             const sortedVideoEntries = videoEntries.sort(apacheSort);
  3999.             const sortedAudioEntries = audioEntries.sort(apacheSort);
  4000.  
  4001.             const sortedEntries = [...sortedVideoEntries, ...sortedAudioEntries];
  4002.  
  4003.             sortedEntries.forEach(entry => {
  4004.                 content += `#EXTINF:-1,${entry.decodedTitle}\n${entry.url}\n`;
  4005.             });
  4006.  
  4007.             return content;
  4008.         }
  4009.  
  4010.         addLogEntry(message, type = '') {
  4011.  
  4012.             if ((this.state.isPaused || !this.state.isGenerating) && type !== 'final') {
  4013.                 return;
  4014.             }
  4015.  
  4016.             const scanLog = this.domElements.scanLog;
  4017.             const logCounter = this.domElements.logCounter;
  4018.             
  4019.             this.logCount++;
  4020.             if (logCounter) {
  4021.                 logCounter.textContent = this.logCount;
  4022.             }
  4023.             
  4024.             let decodedMessage = message;
  4025.             try {
  4026.                 if (message.includes('http')) {
  4027.                     const urlRegex = /(https?:\/\/[^\s]+)/g;
  4028.                     decodedMessage = message.replace(urlRegex, (url) => {
  4029.                         try {
  4030.                             return decodeURIComponent(url);
  4031.                         } catch (e) {
  4032.                             return url;
  4033.                         }
  4034.                     });
  4035.                 }
  4036.             } catch (error) {
  4037.                 console.warn('Decode error:', error);
  4038.             }
  4039.             
  4040.             const entry = document.createElement('div');
  4041.             entry.className = `M3Unator-log-entry ${type}`;
  4042.  
  4043.             const timestamp = new Date().toLocaleTimeString();
  4044.             entry.innerHTML = `<span class="M3Unator-log-time">[${timestamp}]</span> ${decodedMessage}`;
  4045.             
  4046.             scanLog.appendChild(entry);
  4047.             scanLog.scrollTop = scanLog.scrollHeight;
  4048.         }
  4049.  
  4050.         updateCounter(count) {
  4051.             if (!this.domElements.stats || !this.domElements.statsBar) {
  4052.                 return;
  4053.             }
  4054.  
  4055.             const stats = this.state.stats;
  4056.             const elements = this.domElements.stats;
  4057.             const statsBar = this.domElements.statsBar;
  4058.  
  4059.             statsBar.style.display = 'block';
  4060.             
  4061.             const updates = {
  4062.                 'totalFiles': count,
  4063.                 'videoFiles': stats.files.video.total,
  4064.                 'audioFiles': stats.files.audio.total,
  4065.                 'directories': stats.directories.total,
  4066.                 'depthLevel': stats.directories.depth,
  4067.                 'errors': stats.errors.total
  4068.             };
  4069.  
  4070.             Object.entries(updates).forEach(([key, value]) => {
  4071.                 const element = elements[key];
  4072.                 if (element) {
  4073.                     element.textContent = value;
  4074.                     
  4075.                     const statContainer = element.closest('.M3Unator-stat');
  4076.                     if (statContainer) {
  4077.                         statContainer.style.opacity = value > 0 ? '1' : '0.5';
  4078.                         
  4079.                         if (key === 'depthLevel') {
  4080.                             const maxDepth = this.state.maxDepth || 0;
  4081.                             if (maxDepth > 0) {
  4082.                                 const progress = (value / maxDepth) * 100;
  4083.                                 statContainer.dataset.progress = 
  4084.                                     progress >= 100 ? 'high' :
  4085.                                     progress >= 75 ? 'medium' :
  4086.                                     progress >= 50 ? 'low' : '';
  4087.                                 
  4088.                                 statContainer.title = `Depth Level: ${value}/${maxDepth}`;
  4089.                             } else {
  4090.                                 statContainer.dataset.progress = '';
  4091.                                 statContainer.title = `Depth Level: ${value}`;
  4092.                             }
  4093.                         }
  4094.                     }
  4095.                 }
  4096.             });
  4097.         }
  4098.     }
  4099.  
  4100.     const generator = new PlaylistGenerator();
  4101.     generator.init();
  4102.  
  4103.     // Event listeners for info modal
  4104.     document.querySelector('.info-link').addEventListener('click', () => {
  4105.         document.querySelector('.info-modal').style.display = 'block';
  4106.         document.body.classList.add('modal-open');
  4107.     });
  4108.  
  4109.     document.querySelector('.info-close').addEventListener('click', () => {
  4110.         document.querySelector('.info-modal').style.display = 'none';
  4111.         document.body.classList.remove('modal-open');
  4112.     });
  4113.  
  4114.     window.addEventListener('click', (event) => {
  4115.         const modal = document.querySelector('.info-modal');
  4116.         if (event.target === modal) {
  4117.             modal.style.display = 'none';
  4118.             document.body.classList.remove('modal-open');
  4119.         }
  4120.     });
  4121.  
  4122.     // Event listener for playlist name input
  4123.     generator.domElements.playlistInput.addEventListener('input', (e) => {
  4124.         const dropdown = e.target.parentElement.querySelector('.M3Unator-dropdown');
  4125.         if (e.target.value.trim()) {
  4126.             dropdown.style.display = 'block';
  4127.         } else {
  4128.             dropdown.style.display = 'none';
  4129.         }
  4130.     });
  4131. })();