☰

Greasy Fork is available in English.

M3Unator - Web Directory Playlist Creator

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

  1. // ==UserScript==
  2. // @name         M3Unator - Web Directory Playlist Creator
  3. // @namespace    https://github.com/hasanbeder/M3Unator
  4. // @version      1.0.2
  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 = linkElement.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; /* Prevent background clicks */
  148.         }
  149.  
  150.         body.modal-open .M3Unator-container,
  151.         body.modal-open .M3Unator-popup {
  152.             pointer-events: all; /* Allow clicks on modal content */
  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; /* Same height as Create Playlist button */
  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.             left: 50%;
  775.             transform: translateX(-50%);
  776.             z-index: 999999;
  777.             pointer-events: none;
  778.             display: flex;
  779.             flex-direction: column;
  780.             align-items: center;
  781.             width: auto;
  782.         }
  783.  
  784.         .M3Unator-toast {
  785.             display: flex;
  786.             align-items: center;
  787.             gap: 12px;
  788.             padding: 12px 24px;
  789.             border-radius: 12px;
  790.             margin-bottom: 12px;
  791.             font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  792.             font-size: 14px;
  793.             font-weight: 500;
  794.             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  795.             background: rgba(17, 17, 27, 0.95);
  796.             border: 2px solid;
  797.             pointer-events: all;
  798.             min-width: 300px;
  799.             max-width: 500px;
  800.             backdrop-filter: blur(16px);
  801.             will-change: transform, opacity;
  802.             animation: none;
  803.             transform-origin: center bottom;
  804.         }
  805.  
  806.         .M3Unator-toast.show {
  807.             animation: toastBounceIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  808.         }
  809.  
  810.         .M3Unator-toast.removing {
  811.             animation: toastBounceOut 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
  812.         }
  813.  
  814.         @keyframes toastBounceIn {
  815.             0% {
  816.                 opacity: 0;
  817.                 transform: scale(0.3) translateY(2000px);
  818.             }
  819.             60% {
  820.                 opacity: 1;
  821.                 transform: scale(1.1) translateY(-20px);
  822.             }
  823.             75% {
  824.                 transform: scale(0.95) translateY(10px);
  825.             }
  826.             90% {
  827.                 transform: scale(1.02) translateY(-5px);
  828.             }
  829.             100% {
  830.                 transform: scale(1) translateY(0);
  831.             }
  832.         }
  833.  
  834.         @keyframes toastBounceOut {
  835.             0% {
  836.                 transform: scale(1) translateY(0);
  837.                 opacity: 1;
  838.             }
  839.             20% {
  840.                 transform: scale(1.1) translateY(-20px);
  841.                 opacity: 0.8;
  842.             }
  843.             100% {
  844.                 transform: scale(0.3) translateY(2000px);
  845.                 opacity: 0;
  846.             }
  847.         }
  848.  
  849.         .M3Unator-toast svg {
  850.             width: 20px;
  851.             height: 20px;
  852.             flex-shrink: 0;
  853.             filter: drop-shadow(0 0 4px currentColor);
  854.             animation: iconPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  855.             opacity: 0;
  856.             transform: scale(0.5);
  857.         }
  858.  
  859.         @keyframes iconPop {
  860.             0% {
  861.                 opacity: 0;
  862.                 transform: scale(0.5) rotate(-180deg);
  863.             }
  864.             100% {
  865.                 opacity: 1;
  866.                 transform: scale(1) rotate(0deg);
  867.             }
  868.         }
  869.  
  870.         .M3Unator-toast span {
  871.             opacity: 0;
  872.             transform: translateX(-10px);
  873.             animation: textSlide 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  874.             animation-delay: 0.15s;
  875.         }
  876.  
  877.         @keyframes textSlide {
  878.             0% {
  879.                 opacity: 0;
  880.                 transform: translateX(-10px);
  881.             }
  882.             100% {
  883.                 opacity: 1;
  884.                 transform: translateX(0);
  885.             }
  886.         }
  887.  
  888.         .M3Unator-input-row {
  889.             display: flex;
  890.             gap: 0.75rem;
  891.             margin-bottom: 0.75rem;
  892.         }
  893.  
  894.         .M3Unator-input-row .M3Unator-input-group {
  895.             margin-bottom: 0;
  896.         }
  897.  
  898.         .M3Unator-input-row .M3Unator-input-group:first-child {
  899.             flex: 2;
  900.         }
  901.  
  902.         .M3Unator-input-row .M3Unator-input-group:last-child {
  903.             flex: 1;
  904.         }
  905.  
  906.         .M3Unator-social {
  907.             display: flex;
  908.             gap: 8px;
  909.             margin-right: 8px;
  910.         }
  911.  
  912.         .M3Unator-social a {
  913.             width: 32px;
  914.             height: 32px;
  915.             border-radius: 8px;
  916.             display: grid;
  917.             place-items: center;
  918.             color: #cdd6f4;
  919.             background: rgba(205, 214, 244, 0.1);
  920.             transition: all 0.2s ease;
  921.         }
  922.  
  923.         .M3Unator-social a:hover {
  924.             background: rgba(205, 214, 244, 0.2);
  925.             transform: rotate(360deg);
  926.         }
  927.  
  928.         .M3Unator-social svg {
  929.             width: 18px;
  930.             height: 18px;
  931.         }
  932.  
  933.         .M3Unator-advanced-settings {
  934.             margin-top: 1rem;
  935.             padding: 1rem;
  936.             background: rgba(30, 30, 46, 0.5);
  937.             border: 1px solid #313244;
  938.             border-radius: 8px;
  939.             display: none;
  940.         }
  941.  
  942.         .M3Unator-advanced-settings.active {
  943.             display: block;
  944.             animation: fadeIn 0.3s ease;
  945.         }
  946.  
  947.         .M3Unator-advanced-toggle {
  948.             width: 100%;
  949.             padding: 0.75rem;
  950.             background: #1e1e2e;
  951.             border: 1px solid #313244;
  952.             border-radius: 8px;
  953.             color: #cdd6f4;
  954.             font-size: 0.875rem;
  955.             font-weight: 500;
  956.             cursor: pointer;
  957.             display: flex;
  958.             align-items: center;
  959.             justify-content: space-between;
  960.             transition: all 0.2s ease;
  961.         }
  962.  
  963.         .M3Unator-advanced-toggle:hover {
  964.             background: #313244;
  965.         }
  966.  
  967.         .M3Unator-advanced-toggle svg {
  968.             width: 16px;
  969.             height: 16px;
  970.             transition: transform 0.2s ease;
  971.         }
  972.  
  973.         .M3Unator-advanced-toggle.active svg {
  974.             transform: rotate(180deg);
  975.         }
  976.  
  977.         .M3Unator-depth-slider {
  978.             -webkit-appearance: none;
  979.             width: 100%;
  980.             height: 4px;
  981.             border-radius: 2px;
  982.             background: #313244;
  983.             outline: none;
  984.             margin: 1rem 0;
  985.         }
  986.  
  987.         .M3Unator-depth-slider::-webkit-slider-thumb {
  988.             -webkit-appearance: none;
  989.             appearance: none;
  990.             width: 16px;
  991.             height: 16px;
  992.             border-radius: 50%;
  993.             background: #cba6f7;
  994.             cursor: pointer;
  995.             transition: all 0.2s ease;
  996.         }
  997.  
  998.         .M3Unator-depth-slider::-webkit-slider-thumb:hover {
  999.             transform: scale(1.2);
  1000.         }
  1001.  
  1002.         .M3Unator-depth-value {
  1003.             text-align: center;
  1004.             font-size: 0.875rem;
  1005.             color: #cdd6f4;
  1006.             margin-top: 0.5rem;
  1007.         }
  1008.  
  1009.         @keyframes fadeIn {
  1010.             from { opacity: 0; transform: translateY(-10px); }
  1011.             to { opacity: 1; transform: translateY(0); }
  1012.         }
  1013.  
  1014.         .M3Unator-depth-settings {
  1015.             margin-top: 0.75rem;
  1016.             margin-left: 1.75rem;
  1017.             padding: 0.75rem;
  1018.             background: rgba(30, 30, 46, 0.3);
  1019.             border-left: 2px solid #cba6f7;
  1020.             border-radius: 0 8px 8px 0;
  1021.             display: none;
  1022.             animation: slideDown 0.3s ease;
  1023.         }
  1024.  
  1025.         .M3Unator-depth-settings.active {
  1026.             display: block;
  1027.         }
  1028.  
  1029.         .M3Unator-depth-input {
  1030.             position: relative;
  1031.             display: flex;
  1032.             align-items: center;
  1033.             gap: 0.75rem;
  1034.             margin-top: 0.5rem;
  1035.         }
  1036.  
  1037.         .M3Unator-depth-input input[type="number"] {
  1038.             width: 64px;
  1039.             padding: 0.25rem 0.375rem;
  1040.             border: 1px solid #45475a;
  1041.             border-radius: 4px;
  1042.             background: rgba(30, 30, 46, 0.8);
  1043.             color: #cdd6f4;
  1044.             font-size: 0.875rem;
  1045.             text-align: center;
  1046.             margin: 0 0 0 0.5rem;
  1047.         }
  1048.  
  1049.         .M3Unator-depth-input input[type="number"]:focus {
  1050.             outline: none;
  1051.             border-color: #cba6f7;
  1052.             box-shadow: 0 0 0 2px rgba(203, 166, 247, 0.2);
  1053.         }
  1054.  
  1055.         .M3Unator-depth-input input[type="number"]::-webkit-inner-spin-button {
  1056.             opacity: 1;
  1057.             background: #313244;
  1058.             border-left: 1px solid #45475a;
  1059.             border-radius: 0 4px 4px 0;
  1060.             cursor: pointer;
  1061.         }
  1062.  
  1063.         .M3Unator-depth-toggle {
  1064.             display: flex;
  1065.             align-items: center;
  1066.             gap: 0.5rem;
  1067.             padding: 0.5rem;
  1068.             background: #1e1e2e;
  1069.             border: 1px solid #45475a;
  1070.             border-radius: 6px;
  1071.             color: #cdd6f4;
  1072.             font-size: 0.875rem;
  1073.             cursor: pointer;
  1074.             transition: all 0.2s ease;
  1075.         }
  1076.  
  1077.         .M3Unator-depth-toggle:hover {
  1078.             background: #313244;
  1079.             border-color: #cba6f7;
  1080.         }
  1081.  
  1082.         .M3Unator-depth-toggle.active {
  1083.             background: rgba(203, 166, 247, 0.1);
  1084.             border-color: #cba6f7;
  1085.             color: #cba6f7;
  1086.         }
  1087.  
  1088.         @keyframes slideDown {
  1089.             from { opacity: 0; transform: translateY(-10px); }
  1090.             to { opacity: 1; transform: translateY(0); }
  1091.         }
  1092.  
  1093.         .M3Unator-stats-bar {
  1094.             margin: 0.75rem 0;
  1095.             padding: 0.5rem;
  1096.             background: rgba(30, 30, 46, 0.5);
  1097.             border: 1px solid #313244;
  1098.             border-radius: 8px;
  1099.             display: none;
  1100.         }
  1101.  
  1102.         .M3Unator-stats-bar.active {
  1103.             display: block;
  1104.         }
  1105.  
  1106.         .M3Unator-stats {
  1107.             display: flex;
  1108.             align-items: center;
  1109.             justify-content: space-around;
  1110.             gap: 0.382rem;
  1111.             padding: 0.25rem;
  1112.         }
  1113.  
  1114.         .M3Unator-stat {
  1115.             display: inline-flex;
  1116.             align-items: center;
  1117.             gap: 0.25rem;
  1118.             font-size: 0.75rem;
  1119.             color: #cdd6f4;
  1120.             cursor: help;
  1121.             min-width: 40px;
  1122.             justify-content: flex-start;
  1123.             padding: 0 0.25rem;
  1124.             position: relative;
  1125.         }
  1126.  
  1127.         .M3Unator-stat span {
  1128.             min-width: 16px;
  1129.             text-align: right;
  1130.             font-variant-numeric: tabular-nums;
  1131.             font-size: 0.7rem;
  1132.             font-weight: 500;
  1133.         }
  1134.  
  1135.         .M3Unator-stat svg {
  1136.             opacity: 0.8;
  1137.             flex-shrink: 0;
  1138.             width: 14px;
  1139.             height: 14px;
  1140.         }
  1141.  
  1142.         .M3Unator-stat.video {
  1143.             color: #94e2d5;
  1144.         }
  1145.  
  1146.         .M3Unator-stat.audio {
  1147.             color: #89b4fa;
  1148.         }
  1149.  
  1150.         .M3Unator-stat.dir {
  1151.             color: #cba6f7;
  1152.         }
  1153.  
  1154.         .M3Unator-stat.error {
  1155.             color: #f38ba8;
  1156.         }
  1157.  
  1158.         .M3Unator-stat.depth {
  1159.             color: #a6e3a1;
  1160.             transition: color 0.3s ease;
  1161.         }
  1162.  
  1163.         .M3Unator-stat.depth[data-progress="high"] {
  1164.             color: #f38ba8;
  1165.         }
  1166.  
  1167.         .M3Unator-stat.depth[data-progress="medium"] {
  1168.             color: #fab387;
  1169.         }
  1170.  
  1171.         .M3Unator-stat.depth[data-progress="low"] {
  1172.             color: #f9e2af;
  1173.         }
  1174.  
  1175.         .M3Unator-stat:hover::after {
  1176.             content: attr(title);
  1177.             position: absolute;
  1178.             bottom: calc(100% + 5px);
  1179.             left: 50%;
  1180.             transform: translateX(-50%);
  1181.             padding: 0.5rem 0.75rem;
  1182.             background: rgba(30, 30, 46, 0.95);
  1183.             color: #cdd6f4;
  1184.             font-size: 0.875rem;
  1185.             white-space: nowrap;
  1186.             border-radius: 6px;
  1187.             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  1188.             z-index: 1000;
  1189.             border: 1px solid #313244;
  1190.             text-align: center;
  1191.             backdrop-filter: blur(8px);
  1192.             pointer-events: none;
  1193.         }
  1194.  
  1195.         .M3Unator-spinner {
  1196.             width: 20px;
  1197.             height: 20px;
  1198.             border: 2px solid rgba(17, 17, 27, 0.3);
  1199.             border-radius: 50%;
  1200.             border-top-color: #11111b;
  1201.             animation: spin 0.6s linear infinite;
  1202.             margin-right: 0;
  1203.             flex-shrink: 0;
  1204.         }
  1205.  
  1206.         @keyframes spin {
  1207.             to { transform: rotate(360deg); }
  1208.         }
  1209.  
  1210.         .M3Unator-toast {
  1211.             animation: toastSlideUp 0.2s ease forwards;
  1212.         }
  1213.  
  1214.         .M3Unator-toast.removing {
  1215.             animation: toastSlideDown 0.2s ease forwards;
  1216.         }
  1217.  
  1218.         .M3Unator-popup {
  1219.             animation: slideUp 0.2s ease;
  1220.         }
  1221.  
  1222.         .M3Unator-stats-bar {
  1223.             animation: fadeIn 0.2s ease;
  1224.         }
  1225.  
  1226.         .M3Unator-log {
  1227.             transition: max-height 0.3s ease;
  1228.         }
  1229.  
  1230.         .M3Unator-log.collapsed {
  1231.             max-height: 0;
  1232.             overflow: hidden;
  1233.         }
  1234.  
  1235.         .M3Unator-log-toggle {
  1236.             width: 100%;
  1237.             padding: 0.5rem 0.75rem;
  1238.             background: rgba(203, 166, 247, 0.05);
  1239.             border: none;
  1240.             color: #cdd6f4;
  1241.             display: flex;
  1242.             align-items: center;
  1243.             justify-content: space-between;
  1244.             cursor: pointer;
  1245.             transition: all 0.2s ease;
  1246.             font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  1247.             font-size: 0.875rem;
  1248.             font-weight: 500;
  1249.             border-radius: 6px;
  1250.         }
  1251.  
  1252.         .M3Unator-log-toggle:hover {
  1253.             background: rgba(203, 166, 247, 0.1);
  1254.         }
  1255.  
  1256.         .M3Unator-activity-indicator {
  1257.             width: 14px;
  1258.             height: 14px;
  1259.             border-radius: 50%;
  1260.             background: #45475a;  /* Darker gray */
  1261.             margin-left: auto;
  1262.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1263.         }
  1264.  
  1265.         .M3Unator-activity-indicator.active {
  1266.             background: #89dceb;  /* Brighter blue */
  1267.             box-shadow: 0 0 0 3px rgba(137, 220, 235, 0.2);
  1268.             animation: pulseActive 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  1269.         }
  1270.  
  1271.         .M3Unator-activity-indicator.paused {
  1272.             background: #f9e2af;  /* More visible yellow */
  1273.             box-shadow: 0 0 0 3px rgba(249, 226, 175, 0.2);
  1274.         }
  1275.  
  1276.         .M3Unator-activity-indicator.error {
  1277.             background: #f38ba8;  /* Current red is good */
  1278.             box-shadow: 0 0 0 3px rgba(243, 139, 168, 0.2);
  1279.         }
  1280.  
  1281.         .M3Unator-activity-indicator.completed {
  1282.             background: #94e2d5;  /* Brighter green-turquoise */
  1283.             box-shadow: 0 0 0 3px rgba(148, 226, 213, 0.2);
  1284.         }
  1285.  
  1286.         @keyframes pulseActive {
  1287.             0% {
  1288.                 box-shadow: 0 0 0 0 rgba(137, 220, 235, 0.4);
  1289.             }
  1290.             70% {
  1291.                 box-shadow: 0 0 0 8px rgba(137, 220, 235, 0);
  1292.             }
  1293.             100% {
  1294.                 box-shadow: 0 0 0 0 rgba(137, 220, 235, 0);
  1295.             }
  1296.         }
  1297.  
  1298.         @keyframes pulsePaused {
  1299.             0% {
  1300.                 box-shadow: 0 0 0 0 rgba(249, 226, 175, 0.4);
  1301.             }
  1302.             70% {
  1303.                 box-shadow: 0 0 0 8px rgba(249, 226, 175, 0);
  1304.             }
  1305.             100% {
  1306.                 box-shadow: 0 0 0 0 rgba(249, 226, 175, 0);
  1307.             }
  1308.         }
  1309.  
  1310.         @keyframes completeScale {
  1311.             0% {
  1312.                 transform: scale(0.8);
  1313.                 opacity: 0.5;
  1314.             }
  1315.             50% {
  1316.                 transform: scale(1.2);
  1317.             }
  1318.             100% {
  1319.                 transform: scale(1);
  1320.                 opacity: 1;
  1321.             }
  1322.         }
  1323.  
  1324.         .M3Unator-toggle-container span svg .infinity-icon {
  1325.             opacity: 0.5;
  1326.             transition: opacity 0.2s ease;
  1327.             transform: scale(0.6) translateY(4px);
  1328.             transform-origin: center;
  1329.             stroke-width: 1.5;
  1330.         }
  1331.  
  1332.         .M3Unator-toggle-container input[type="checkbox"]:checked + span svg .infinity-icon {
  1333.             opacity: 1;
  1334.         }
  1335.  
  1336.         .M3Unator-depth-controls {
  1337.             background: rgba(30, 30, 46, 0.4);
  1338.             backdrop-filter: blur(8px);
  1339.             border: 1px solid #313244;
  1340.             border-radius: 8px;
  1341.             padding: 0.618rem;
  1342.             margin-top: 1rem;
  1343.             display: none;
  1344.         }
  1345.  
  1346.         .M3Unator-depth-controls.active {
  1347.             display: block;
  1348.         }
  1349.  
  1350.         .M3Unator-radio-group {
  1351.             display: flex;
  1352.             gap: 0.75rem;
  1353.             justify-content: center;
  1354.             background: rgba(30, 30, 46, 0.6);
  1355.             padding: 0.5rem;
  1356.             border-radius: 6px;
  1357.         }
  1358.  
  1359.         .M3Unator-radio {
  1360.             display: flex;
  1361.             align-items: center;
  1362.             gap: 0.5rem;
  1363.             cursor: pointer;
  1364.             padding: 0.5rem;
  1365.             border-radius: 4px;
  1366.             transition: all 0.2s ease;
  1367.             background: transparent;
  1368.             border: 1px solid transparent;
  1369.         }
  1370.  
  1371.         .M3Unator-radio:hover {
  1372.             background: rgba(203, 166, 247, 0.1);
  1373.         }
  1374.  
  1375.         .M3Unator-radio input[type="radio"] {
  1376.             display: none;
  1377.         }
  1378.  
  1379.         .M3Unator-radio .radio-mark {
  1380.             width: 16px;
  1381.             height: 16px;
  1382.             border: 1.5px solid #45475a;
  1383.             border-radius: 50%;
  1384.             display: flex;
  1385.             align-items: center;
  1386.             justify-content: center;
  1387.             transition: all 0.2s ease;
  1388.             flex-shrink: 0;
  1389.             background: rgba(30, 30, 46, 0.6);
  1390.             position: relative;
  1391.         }
  1392.  
  1393.         .M3Unator-radio input[type="radio"]:checked + .radio-mark {
  1394.             border-color: #cba6f7;
  1395.             background: rgba(203, 166, 247, 0.1);
  1396.         }
  1397.  
  1398.         .M3Unator-radio input[type="radio"]:checked + .radio-mark::after {
  1399.             content: '';
  1400.             width: 8px;
  1401.             height: 8px;
  1402.             border-radius: 50%;
  1403.             background: #cba6f7;
  1404.             position: absolute;
  1405.         }
  1406.  
  1407.         .M3Unator-radio .radio-label {
  1408.             color: #cdd6f4;
  1409.             font-size: 0.875rem;
  1410.             user-select: none;
  1411.             display: flex;
  1412.             align-items: center;
  1413.             gap: 0.5rem;
  1414.         }
  1415.  
  1416.         .M3Unator-depth-input {
  1417.             width: 64px;
  1418.             padding: 0.25rem 0.375rem;
  1419.             border: 1px solid #45475a;
  1420.             border-radius: 4px;
  1421.             background: rgba(30, 30, 46, 0.8);
  1422.             color: #cdd6f4;
  1423.             font-size: 0.875rem;
  1424.             text-align: center;
  1425.             transition: all 0.2s ease;
  1426.             -moz-appearance: textfield;
  1427.             margin-top: -1px;
  1428.             display: inline-flex;
  1429.             align-items: center;
  1430.             height: 28px;
  1431.         }
  1432.  
  1433.         .M3Unator-depth-input::-webkit-outer-spin-button,
  1434.         .M3Unator-depth-input::-webkit-inner-spin-button {
  1435.             -webkit-appearance: inner-spin-button;
  1436.             opacity: 1;
  1437.             background: #313244;
  1438.             border-left: 1px solid #45475a;
  1439.             border-radius: 0 4px 4px 0;
  1440.             cursor: pointer;
  1441.             height: 100%;
  1442.             position: absolute;
  1443.             right: 0;
  1444.             top: 0;
  1445.         }
  1446.  
  1447.         .M3Unator-depth-input:focus {
  1448.             outline: none;
  1449.             border-color: #cba6f7;
  1450.             box-shadow: 0 0 0 2px rgba(203, 166, 247, 0.2);
  1451.         }
  1452.  
  1453.         .M3Unator-depth-input:disabled {
  1454.             opacity: 0.5;
  1455.             cursor: not-allowed;
  1456.             background: rgba(30, 30, 46, 0.4);
  1457.         }
  1458.  
  1459.         .M3Unator-radio .radio-label {
  1460.             display: flex;
  1461.             align-items: center;
  1462.             gap: 0.5rem;
  1463.             color: #cdd6f4;
  1464.             font-size: 0.875rem;
  1465.             user-select: none;
  1466.         }
  1467.  
  1468.         .M3Unator-url-container {
  1469.             display: flex;
  1470.             align-items: center;
  1471.             background: rgba(30, 30, 46, 0.6);
  1472.             border: 1px solid #313244;
  1473.             border-radius: 6px;
  1474.             padding: 0.618rem;
  1475.             margin-bottom: 1rem;
  1476.             transition: all 0.2s ease;
  1477.         }
  1478.  
  1479.         .M3Unator-url-container:hover {
  1480.             border-color: #45475a;
  1481.         }
  1482.  
  1483.         .M3Unator-url-icon {
  1484.             color: #6c7086;
  1485.             margin-right: 0.618rem;
  1486.             flex-shrink: 0;
  1487.         }
  1488.  
  1489.         .M3Unator-url-input {
  1490.             flex: 1;
  1491.             background: transparent;
  1492.             border: none;
  1493.             color: #cdd6f4;
  1494.             font-size: 0.875rem;
  1495.             padding: 0;
  1496.             margin: 0;
  1497.             width: 100%;
  1498.         }
  1499.  
  1500.         .M3Unator-url-input:focus {
  1501.             outline: none;
  1502.         }
  1503.  
  1504.         .M3Unator-url-copy {
  1505.             background: transparent;
  1506.             border: none;
  1507.             color: #6c7086;
  1508.             padding: 0.382rem;
  1509.             margin-left: 0.618rem;
  1510.             cursor: pointer;
  1511.             border-radius: 4px;
  1512.             transition: all 0.2s ease;
  1513.             display: flex;
  1514.             align-items: center;
  1515.             justify-content: center;
  1516.         }
  1517.  
  1518.         .M3Unator-url-copy:hover {
  1519.             color: #cdd6f4;
  1520.             background: rgba(205, 214, 244, 0.1);
  1521.         }
  1522.  
  1523.         .M3Unator-url-copy.copied {
  1524.             color: #a6e3a1;
  1525.             animation: copyPulse 0.3s ease;
  1526.         }
  1527.  
  1528.         @keyframes copyPulse {
  1529.             0% { transform: scale(1); }
  1530.             50% { transform: scale(1.2); }
  1531.             100% { transform: scale(1); }
  1532.         }
  1533.  
  1534.         .M3Unator-toggle-group {
  1535.             display: flex;
  1536.             gap: 1.25rem;
  1537.             margin: 1.5rem 0;
  1538.             justify-content: center;
  1539.             background: rgba(30, 30, 46, 0.4);
  1540.             padding: 1.25rem;
  1541.             border-radius: 16px;
  1542.             backdrop-filter: blur(8px);
  1543.         }
  1544.  
  1545.         .M3Unator-toggle-container {
  1546.             position: relative;
  1547.         }
  1548.  
  1549.         .M3Unator-toggle-container span {
  1550.             width: 64px;
  1551.             height: 64px;
  1552.             background: #1e1e2e;
  1553.             border: 2px solid #45475a;
  1554.             border-radius: 16px;
  1555.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1556.             display: flex;
  1557.             align-items: center;
  1558.             justify-content: center;
  1559.         }
  1560.  
  1561.         .M3Unator-toggle-container input[type="checkbox"]:checked + span {
  1562.             background: rgba(203, 166, 247, 0.1);
  1563.             border-color: #cba6f7;
  1564.             box-shadow: 0 0 20px rgba(203, 166, 247, 0.2);
  1565.             transform: translateY(-2px);
  1566.         }
  1567.  
  1568.         .M3Unator-toggle-container span:hover {
  1569.             background: #313244;
  1570.             transform: translateY(-2px);
  1571.             box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  1572.         }
  1573.  
  1574.         .M3Unator-toggle-container svg {
  1575.             width: 32px;
  1576.             height: 32px;
  1577.             opacity: 0.7;
  1578.             transition: all 0.3s ease;
  1579.         }
  1580.  
  1581.         .M3Unator-toggle-container input[type="checkbox"]:checked + span svg {
  1582.             opacity: 1;
  1583.             color: #cba6f7;
  1584.             filter: drop-shadow(0 0 8px rgba(203, 166, 247, 0.4));
  1585.         }
  1586.  
  1587.         .M3Unator-progress {
  1588.             background: rgba(30, 30, 46, 0.6);
  1589.             border-radius: 12px;
  1590.             padding: 1rem;
  1591.             margin: 1rem 0;
  1592.             backdrop-filter: blur(8px);
  1593.             border: 1px solid rgba(203, 166, 247, 0.2);
  1594.         }
  1595.  
  1596.         .M3Unator-progress-text {
  1597.             color: #f5c2e7;
  1598.             font-weight: 600;
  1599.             text-align: center;
  1600.             margin-bottom: 0.5rem;
  1601.             font-size: 1.1rem;
  1602.         }
  1603.  
  1604.         .M3Unator-progress-spinner {
  1605.             width: 24px;
  1606.             height: 24px;
  1607.             border: 3px solid rgba(245, 194, 231, 0.1);
  1608.             border-top-color: #f5c2e7;
  1609.             border-radius: 50%;
  1610.             animation: spin 1s linear infinite;
  1611.             margin: 0 auto;
  1612.         }
  1613.  
  1614.         .M3Unator-controls {
  1615.             display: flex;
  1616.             gap: 0.75rem;
  1617.             margin: 0.75rem 0;
  1618.             justify-content: center;
  1619.         }
  1620.  
  1621.         .M3Unator-control-btn {
  1622.             display: none;
  1623.             padding: 0.75rem 1.5rem;
  1624.             border-radius: 12px;
  1625.             font-weight: 600;
  1626.             font-size: 0.95rem;
  1627.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1628.             align-items: center;
  1629.             gap: 0.75rem;
  1630.             min-width: 160px;
  1631.             justify-content: center;
  1632.             background: rgba(30, 30, 46, 0.6);
  1633.             backdrop-filter: blur(8px);
  1634.             width: 160px;
  1635.         }
  1636.  
  1637.         .M3Unator-control-btn.pause {
  1638.             background: rgba(250, 179, 135, 0.1);
  1639.             border: 2px solid #fab387;
  1640.             color: #fab387;
  1641.         }
  1642.  
  1643.         .M3Unator-control-btn.resume {
  1644.             background: rgba(148, 226, 213, 0.1);
  1645.             border: 2px solid #94e2d5;
  1646.             color: #94e2d5;
  1647.         }
  1648.  
  1649.         .M3Unator-control-btn.cancel {
  1650.             background: rgba(243, 139, 168, 0.1);
  1651.             border: 2px solid #f38ba8;
  1652.             color: #f38ba8;
  1653.         }
  1654.  
  1655.         .M3Unator-control-btn:hover {
  1656.             transform: translateY(-2px);
  1657.             box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  1658.         }
  1659.  
  1660.         .M3Unator-control-btn svg {
  1661.             width: 20px;
  1662.             height: 20px;
  1663.         }
  1664.  
  1665.         .M3Unator-layers-icon {
  1666.             width: 20px;
  1667.             height: 20px;
  1668.             margin-right: 0.5rem;
  1669.         }
  1670.  
  1671.         .M3Unator-input:-webkit-autofill,
  1672.         .M3Unator-input:-webkit-autofill:hover,
  1673.         .M3Unator-input:-webkit-autofill:focus,
  1674.         .M3Unator-input:-webkit-autofill:active {
  1675.             -webkit-text-fill-color: #cdd6f4 !important;
  1676.             -webkit-box-shadow: 0 0 0 30px #1e1e2e inset !important;
  1677.             box-shadow: 0 0 0 30px #1e1e2e inset !important;
  1678.             background-color: #1e1e2e !important;
  1679.             color: #cdd6f4 !important;
  1680.             caret-color: #cdd6f4 !important;
  1681.             transition: background-color 5000s ease-in-out 0s !important;
  1682.             text-decoration: none !important;
  1683.             -webkit-text-decoration: none !important;
  1684.         }
  1685.  
  1686.         .M3Unator-input:-moz-autofill,
  1687.         .M3Unator-input:-moz-autofill-preview {
  1688.             background-color: #1e1e2e !important;
  1689.             color: #cdd6f4 !important;
  1690.             text-decoration: none !important;
  1691.         }
  1692.  
  1693.         .M3Unator-input:-ms-input-placeholder {
  1694.             background-color: #1e1e2e !important;
  1695.             color: #cdd6f4 !important;
  1696.             text-decoration: none !important;
  1697.         }
  1698.  
  1699.         .M3Unator-log-container {
  1700.             margin: 0;
  1701.         }
  1702.  
  1703.         .M3Unator-log-toggle {
  1704.             width: 100%;
  1705.             padding: 0.5rem 0.75rem;
  1706.             background: rgba(203, 166, 247, 0.05);
  1707.             border: none;
  1708.             color: #cdd6f4;
  1709.             display: flex;
  1710.             align-items: center;
  1711.             justify-content: space-between;
  1712.             cursor: pointer;
  1713.             transition: all 0.2s ease;
  1714.             font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  1715.             font-size: 0.875rem;
  1716.             font-weight: 500;
  1717.             border-radius: 6px;
  1718.         }
  1719.  
  1720.         .M3Unator-log-toggle:hover {
  1721.             background: rgba(203, 166, 247, 0.1);
  1722.         }
  1723.  
  1724.         .M3Unator-activity-indicator {
  1725.             width: 14px;
  1726.             height: 14px;
  1727.             border-radius: 50%;
  1728.             background: #45475a;  /* Darker gray */
  1729.             margin-left: auto;
  1730.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1731.         }
  1732.  
  1733.         .M3Unator-activity-indicator.active {
  1734.             background: #89dceb;  /* Brighter blue */
  1735.             box-shadow: 0 0 0 3px rgba(137, 220, 235, 0.2);
  1736.             animation: pulseActive 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  1737.         }
  1738.  
  1739.         .M3Unator-activity-indicator.paused {
  1740.             background: #f9e2af;  /* More visible yellow */
  1741.             box-shadow: 0 0 0 3px rgba(249, 226, 175, 0.2);
  1742.         }
  1743.  
  1744.         .M3Unator-activity-indicator.error {
  1745.             background: #f38ba8;  /* Current red is good */
  1746.             box-shadow: 0 0 0 3px rgba(243, 139, 168, 0.2);
  1747.         }
  1748.  
  1749.         .M3Unator-activity-indicator.completed {
  1750.             background: #94e2d5;  /* Brighter green-turquoise */
  1751.             box-shadow: 0 0 0 3px rgba(148, 226, 213, 0.2);
  1752.         }
  1753.  
  1754.         @keyframes pulseActive {
  1755.             0% {
  1756.                 box-shadow: 0 0 0 0 rgba(137, 220, 235, 0.4);
  1757.             }
  1758.             70% {
  1759.                 box-shadow: 0 0 0 8px rgba(137, 220, 235, 0);
  1760.             }
  1761.             100% {
  1762.                 box-shadow: 0 0 0 0 rgba(137, 220, 235, 0);
  1763.             }
  1764.         }
  1765.  
  1766.         @keyframes pulsePaused {
  1767.             0% {
  1768.                 box-shadow: 0 0 0 0 rgba(249, 226, 175, 0.4);
  1769.             }
  1770.             70% {
  1771.                 box-shadow: 0 0 0 8px rgba(249, 226, 175, 0);
  1772.             }
  1773.             100% {
  1774.                 box-shadow: 0 0 0 0 rgba(249, 226, 175, 0);
  1775.             }
  1776.         }
  1777.  
  1778.         @keyframes completeScale {
  1779.             0% {
  1780.                 transform: scale(0.8);
  1781.                 opacity: 0.5;
  1782.             }
  1783.             50% {
  1784.                 transform: scale(1.2);
  1785.             }
  1786.             100% {
  1787.                 transform: scale(1);
  1788.                 opacity: 1;
  1789.             }
  1790.         }
  1791.  
  1792.         .M3Unator-log-toggle:hover .M3Unator-activity-indicator {
  1793.             background: #6c7086;
  1794.             animation: none;
  1795.         }
  1796.  
  1797.         .M3Unator-log-toggle.active .M3Unator-activity-indicator {
  1798.             background: #6c7086;
  1799.             animation: none;
  1800.         }
  1801.  
  1802.         .M3Unator-log-toggle .toggle-text {
  1803.             display: flex;
  1804.             align-items: center;
  1805.             gap: 0.5rem;
  1806.         }
  1807.  
  1808.         .M3Unator-log {
  1809.             height: 0;
  1810.             max-height: 0;
  1811.             overflow: hidden;
  1812.             transition: all 0.3s ease;
  1813.             background: #11111b;
  1814.             padding: 0;
  1815.             border-top: none;
  1816.             margin: 0;
  1817.         }
  1818.  
  1819.         .M3Unator-log.expanded {
  1820.             height: auto;
  1821.             max-height: 300px;
  1822.             padding: 0.75rem;
  1823.             border-top: 1px solid #313244;
  1824.             overflow-y: auto;
  1825.         }
  1826.  
  1827.         .M3Unator-log-entry {
  1828.             padding: 0.25rem 0.5rem;
  1829.             border-bottom: 1px solid rgba(49, 50, 68, 0.5);
  1830.             font-size: 0.875rem;
  1831.         }
  1832.  
  1833.         .M3Unator-log-entry:last-child {
  1834.             border-bottom: none;
  1835.         }
  1836.  
  1837.         .M3Unator-log-time {
  1838.             color: #6c7086;
  1839.             margin-right: 0.5rem;
  1840.         }
  1841.  
  1842.         .M3Unator-log-entry.success {
  1843.             color: #94e2d5;
  1844.         }
  1845.  
  1846.         .M3Unator-log-entry.error {
  1847.             color: #f38ba8;
  1848.         }
  1849.  
  1850.         .M3Unator-log-entry.warning {
  1851.             color: #fab387;
  1852.         }
  1853.  
  1854.         .M3Unator-log-entry.info {
  1855.             color: #89b4fa;
  1856.         }
  1857.  
  1858.         .M3Unator-log-entry.final {
  1859.             color: #a6e3a1;
  1860.             font-weight: 500;
  1861.         }
  1862.  
  1863.         .M3Unator-log {
  1864.             margin-top: 0.75rem;
  1865.             max-height: calc(100vh - 70vh);
  1866.             font-size: 0.8125rem;
  1867.             line-height: 1.4;
  1868.         }
  1869.  
  1870.         .M3Unator-log-entry {
  1871.             padding: 0.25rem 0.5rem;
  1872.             border-radius: 4px;
  1873.         }
  1874.  
  1875.         .M3Unator-log-toggle {
  1876.             padding: 10px 12px;
  1877.             height: 42px;
  1878.             display: flex;
  1879.             align-items: center;
  1880.             justify-content: space-between;
  1881.         }
  1882.  
  1883.         .M3Unator-log-counter {
  1884.             padding: 0.125rem 0.375rem;
  1885.             font-size: 0.75rem;
  1886.             border-radius: 4px;
  1887.         }
  1888.  
  1889.         .M3Unator-log-time {
  1890.             font-size: 0.75rem;
  1891.             opacity: 0.7;
  1892.             margin-right: 0.5rem;
  1893.         }
  1894.     `);
  1895.  
  1896.     GM_addStyle(`
  1897.         .M3Unator-popup {
  1898.             position: fixed;
  1899.             background: #11111b;
  1900.             color: #cdd6f4;
  1901.             width: 100%;
  1902.             max-width: 480px;
  1903.             border-radius: 12px;
  1904.             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  1905.             overflow: hidden;
  1906.             animation: slideUp 0.3s ease;
  1907.             z-index: 9999;
  1908.         }
  1909.  
  1910.         .M3Unator-header {
  1911.             padding: 1rem 1.25rem;
  1912.             background: #1e1e2e;
  1913.             color: #cdd6f4;
  1914.             display: flex;
  1915.             align-items: center;
  1916.             justify-content: space-between;
  1917.             cursor: move;
  1918.             user-select: none;
  1919.             border-bottom: 1px solid #313244;
  1920.         }
  1921.  
  1922.         .M3Unator-container {
  1923.             position: fixed;
  1924.             inset: 0;
  1925.             background: rgba(0, 0, 0, 0.75);
  1926.             backdrop-filter: blur(8px);
  1927.             display: none;
  1928.             place-items: center;
  1929.             z-index: 9999;
  1930.         }
  1931.     `);
  1932.  
  1933.     GM_addStyle(`
  1934.         /* Info Modal Styles */
  1935.         .info-modal {
  1936.             display: none;
  1937.             position: fixed;
  1938.             inset: 0;
  1939.             background: rgba(0, 0, 0, 0.75);
  1940.             backdrop-filter: blur(8px);
  1941.             z-index: 10000;
  1942.         }
  1943.  
  1944.         .info-modal-content {
  1945.             position: absolute;
  1946.             top: 50%;
  1947.             left: 50%;
  1948.             transform: translate(-50%, -50%);
  1949.             background: #1e1e2e;
  1950.             border: 1px solid #45475a;
  1951.             border-radius: 12px;
  1952.             width: 90%;
  1953.             max-width: 600px;
  1954.             color: #cdd6f4;
  1955.         }
  1956.  
  1957.         .info-modal-header {
  1958.             padding: 1rem 1.5rem;
  1959.             border-bottom: 1px solid #45475a;
  1960.             display: flex;
  1961.             align-items: center;
  1962.             justify-content: space-between;
  1963.         }
  1964.  
  1965.         .info-modal-header h3 {
  1966.             margin: 0;
  1967.             color: #f5c2e7;
  1968.             font-size: 1.25rem;
  1969.         }
  1970.  
  1971.         .info-modal-body {
  1972.             padding: 1.5rem;
  1973.             line-height: 1.6;
  1974.         }
  1975.  
  1976.         .info-modal-body p {
  1977.             margin: 0 0 1rem;
  1978.         }
  1979.  
  1980.         .info-modal-body h4 {
  1981.             margin: 1.5rem 0 0.75rem;
  1982.             color: #f5c2e7;
  1983.         }
  1984.  
  1985.         .info-modal-body ul {
  1986.             margin: 0.75rem 0;
  1987.             padding-left: 1.5rem;
  1988.         }
  1989.  
  1990.         .info-modal-body li {
  1991.             margin: 0.5rem 0;
  1992.         }
  1993.  
  1994.         .info-modal-body a {
  1995.             color: #89b4fa;
  1996.             text-decoration: none;
  1997.         }
  1998.  
  1999.         .info-modal-body a:hover {
  2000.             text-decoration: underline;
  2001.         }
  2002.  
  2003.         .info-close {
  2004.             cursor: pointer;
  2005.             color: #6c7086;
  2006.             transition: color 0.2s ease;
  2007.         }
  2008.  
  2009.         .info-close:hover {
  2010.             color: #f5c2e7;
  2011.         }
  2012.     `);
  2013.  
  2014.     GM_addStyle(`
  2015.         .m3unator-input-group {
  2016.             position: relative;
  2017.             width: 100%;
  2018.         }
  2019.  
  2020.         .m3unator-input {
  2021.             width: 100%;
  2022.             padding-right: 80px !important;
  2023.             transition: all 0.2s ease;
  2024.         }
  2025.  
  2026.         .m3unator-dropdown {
  2027.             position: absolute;
  2028.             right: 8px;
  2029.             top: 50%;
  2030.             transform: translateY(-50%);
  2031.             display: none;
  2032.             z-index: 1;
  2033.             width: 70px;
  2034.         }
  2035.  
  2036.         .m3unator-dropdown.active {
  2037.             display: block;
  2038.         }
  2039.  
  2040.         .m3unator-dropdown-button {
  2041.             width: 100%;
  2042.             padding: 4px 8px;
  2043.             border-radius: 6px;
  2044.             background: rgba(30, 30, 46, 0.6);
  2045.             border: 1px solid rgba(69, 71, 90, 0.6);
  2046.             color: #f5c2e7;
  2047.             cursor: pointer;
  2048.             display: flex;
  2049.             align-items: center;
  2050.             justify-content: space-between;
  2051.             gap: 4px;
  2052.             transition: all 0.2s ease;
  2053.         }
  2054.  
  2055.         .m3unator-dropdown-button:hover {
  2056.             background: rgba(30, 30, 46, 0.8);
  2057.             border-color: rgba(69, 71, 90, 0.8);
  2058.         }
  2059.  
  2060.         .m3unator-dropdown-menu {
  2061.             position: absolute;
  2062.             top: 100%;
  2063.             right: 0;
  2064.             width: 100%;
  2065.             margin-top: 4px;
  2066.             background: rgba(30, 30, 46, 0.95);
  2067.             border: 1px solid rgba(69, 71, 90, 0.6);
  2068.             border-radius: 6px;
  2069.             padding: 4px;
  2070.             display: none;
  2071.         }
  2072.  
  2073.         .m3unator-dropdown.active .m3unator-dropdown-menu {
  2074.             display: block;
  2075.         }
  2076.  
  2077.         .m3unator-dropdown-item {
  2078.             padding: 0.618rem;
  2079.             color: #cdd6f4;
  2080.             cursor: pointer;
  2081.             transition: all 0.2s ease;
  2082.             user-select: none;
  2083.         }
  2084.  
  2085.         .m3unator-dropdown-item:hover {
  2086.             background: rgba(203, 166, 247, 0.1);
  2087.         }
  2088.  
  2089.         .m3unator-dropdown-item.selected {
  2090.             background: rgba(203, 166, 247, 0.1);
  2091.             color: #cba6f7;
  2092.         }
  2093.     `);
  2094.  
  2095.     GM_addStyle(`
  2096.         .M3Unator-container {
  2097.             max-width: 400px;
  2098.             width: 100%;
  2099.             background: none;
  2100.             backdrop-filter: none;
  2101.         }
  2102.  
  2103.         .M3Unator-popup {
  2104.             background: #1e1e2e;
  2105.             border-radius: 12px;
  2106.             box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  2107.             border: 1px solid rgba(69, 71, 90, 0.6);
  2108.         }
  2109.  
  2110.         .M3Unator-content {
  2111.             padding: 0.75rem;
  2112.             display: flex;
  2113.             flex-direction: column;
  2114.             gap: 0.75rem;
  2115.             max-width: 100%;
  2116.             overflow: hidden;
  2117.             background: none;
  2118.         }
  2119.  
  2120.         .M3Unator-header {
  2121.             padding: 0.75rem;
  2122.             display: flex;
  2123.             align-items: center;
  2124.             justify-content: space-between;
  2125.             background: none;
  2126.             border-bottom: 1px solid rgba(69, 71, 90, 0.6);
  2127.         }
  2128.  
  2129.         .M3Unator-input {
  2130.             width: 100%;
  2131.             min-width: 0;
  2132.             padding: 8px 80px 8px 12px;
  2133.             box-sizing: border-box;
  2134.             transition: all 0.2s ease;
  2135.             background: #1e1e2e;
  2136.             border: 1px solid rgba(69, 71, 90, 0.6);
  2137.             border-radius: 6px;
  2138.             color: #f5c2e7;
  2139.             font-size: 14px;
  2140.         }
  2141.  
  2142.         .M3Unator-dropdown-button {
  2143.             width: 100%;
  2144.             padding: 4px 8px;
  2145.             border-radius: 6px;
  2146.             background: #1e1e2e;
  2147.             border: 1px solid rgba(69, 71, 90, 0.6);
  2148.             color: #f5c2e7;
  2149.             cursor: pointer;
  2150.             display: flex;
  2151.             align-items: center;
  2152.             justify-content: space-between;
  2153.             gap: 4px;
  2154.             transition: all 0.2s ease;
  2155.             box-sizing: border-box;
  2156.             font-size: 14px;
  2157.             font-family: monospace;
  2158.         }
  2159.  
  2160.         .M3Unator-dropdown-button span {
  2161.             min-width: 40px;
  2162.             text-align: left;
  2163.         }
  2164.  
  2165.         .M3Unator-dropdown-button svg {
  2166.             width: 16px;
  2167.             height: 16px;
  2168.             min-width: 16px;
  2169.             min-height: 16px;
  2170.             margin-left: auto;
  2171.         }
  2172.  
  2173.         .M3Unator-dropdown-menu {
  2174.             position: absolute;
  2175.             top: 100%;
  2176.             right: 0;
  2177.             width: 100%;
  2178.             margin-top: 4px;
  2179.             background: #1e1e2e;
  2180.             border: 1px solid rgba(69, 71, 90, 0.6);
  2181.             border-radius: 6px;
  2182.             padding: 4px;
  2183.             display: none;
  2184.             box-sizing: border-box;
  2185.             z-index: 9999;
  2186.         }
  2187.     `);
  2188.  
  2189.     GM_addStyle(`
  2190.         .M3Unator-content {
  2191.             padding: 0.75rem;
  2192.             display: flex;
  2193.             flex-direction: column;
  2194.             gap: 12px;
  2195.         }
  2196.  
  2197.         .M3Unator-toggle-group {
  2198.             margin: 0;
  2199.             display: flex;
  2200.             gap: 0.75rem;
  2201.             justify-content: center;
  2202.             background: rgba(30, 30, 46, 0.4);
  2203.             padding: 0.75rem;
  2204.             border-radius: 12px;
  2205.         }
  2206.  
  2207.         .M3Unator-button {
  2208.             margin: 0;
  2209.         }
  2210.  
  2211.         .M3Unator-log-container {
  2212.             margin: 0;
  2213.         }
  2214.  
  2215.         .M3Unator-stats-bar {
  2216.             margin: 0;
  2217.         }
  2218.     `);
  2219.  
  2220.     GM_addStyle(`
  2221.         /* Dropdown Styles */
  2222.         .M3Unator-dropdown {
  2223.             position: relative;
  2224.             display: none;
  2225.         }
  2226.  
  2227.         .M3Unator-dropdown-button {
  2228.             width: 100%;
  2229.             padding: 4px 8px;
  2230.             border-radius: 6px;
  2231.             background: #1e1e2e;
  2232.             border: 1px solid rgba(69, 71, 90, 0.6);
  2233.             color: #f5c2e7;
  2234.             cursor: pointer;
  2235.             display: flex;
  2236.             align-items: center;
  2237.             justify-content: space-between;
  2238.             gap: 4px;
  2239.             transition: all 0.2s ease;
  2240.             box-sizing: border-box;
  2241.             font-size: 14px;
  2242.             font-family: monospace;
  2243.         }
  2244.  
  2245.         .M3Unator-dropdown-button span {
  2246.             min-width: 40px;
  2247.             text-align: left;
  2248.         }
  2249.  
  2250.         .M3Unator-dropdown-button svg {
  2251.             width: 16px;
  2252.             height: 16px;
  2253.             min-width: 16px;
  2254.             min-height: 16px;
  2255.             margin-left: auto;
  2256.             transition: transform 0.2s ease;
  2257.         }
  2258.  
  2259.         .M3Unator-dropdown.active .M3Unator-dropdown-button svg {
  2260.             transform: rotate(180deg);
  2261.         }
  2262.  
  2263.         .M3Unator-dropdown-menu {
  2264.             position: absolute;
  2265.             top: 100%;
  2266.             left: 0;
  2267.             right: 0;
  2268.             margin-top: 4px;
  2269.             background: #1e1e2e;
  2270.             border: 1px solid rgba(69, 71, 90, 0.6);
  2271.             border-radius: 6px;
  2272.             overflow: hidden;
  2273.             z-index: 1000;
  2274.             display: none;
  2275.         }
  2276.  
  2277.         .M3Unator-dropdown.active .M3Unator-dropdown-menu {
  2278.             display: block;
  2279.         }
  2280.  
  2281.         .M3Unator-dropdown-item {
  2282.             padding: 6px 12px;
  2283.             color: #f5c2e7;
  2284.             cursor: pointer;
  2285.             transition: all 0.2s ease;
  2286.             font-family: monospace;
  2287.         }
  2288.  
  2289.         .M3Unator-dropdown-item:hover {
  2290.             background: rgba(69, 71, 90, 0.3);
  2291.         }
  2292.  
  2293.         .M3Unator-dropdown-item:not(:last-child) {
  2294.             border-bottom: 1px solid rgba(69, 71, 90, 0.3);
  2295.         }
  2296.  
  2297.         /* Input Styles */
  2298.         .M3Unator-input {
  2299.             width: 100%;
  2300.             height: 42px;
  2301.             padding: 0 12px;
  2302.             border: 1px solid #45475a;
  2303.             border-radius: 8px;
  2304.             background: #1e1e2e;
  2305.             color: #f5c2e7;
  2306.             font-size: 14px;
  2307.             transition: all 0.2s ease;
  2308.             box-sizing: border-box;
  2309.         }
  2310.  
  2311.         .M3Unator-input:focus {
  2312.             outline: none;
  2313.             border-color: #f5c2e7;
  2314.             box-shadow: 0 0 0 2px rgba(245, 194, 231, 0.1);
  2315.         }
  2316.  
  2317.         /* Button Styles */
  2318.         .M3Unator-button {
  2319.             height: 42px;
  2320.             padding: 0 16px;
  2321.             border: none;
  2322.             border-radius: 8px;
  2323.             background: #f5c2e7;
  2324.             color: #1e1e2e;
  2325.             font-weight: 600;
  2326.             font-size: 14px;
  2327.             cursor: pointer;
  2328.             transition: all 0.2s ease;
  2329.             display: flex;
  2330.             align-items: center;
  2331.             justify-content: center;
  2332.             gap: 8px;
  2333.         }
  2334.  
  2335.         /* Toggle Container Styles */
  2336.         .M3Unator-toggle-container {
  2337.             position: relative;
  2338.             display: flex;
  2339.             align-items: center;
  2340.             gap: 0.5rem;
  2341.             transition: all 0.2s ease;
  2342.         }
  2343.  
  2344.         /* Control Button Styles */
  2345.         .M3Unator-control-btn {
  2346.             padding: 0.75rem 1.5rem;
  2347.             border-radius: 12px;
  2348.             font-weight: 600;
  2349.             font-size: 0.95rem;
  2350.             min-width: 160px;
  2351.             background: rgba(30, 30, 46, 0.6);
  2352.             backdrop-filter: blur(8px);
  2353.         }
  2354.  
  2355.         .M3Unator-control-btn.pause {
  2356.             border-color: #fab387;
  2357.             color: #fab387;
  2358.         }
  2359.  
  2360.         .M3Unator-control-btn.resume {
  2361.             border-color: #94e2d5;
  2362.             color: #94e2d5;
  2363.         }
  2364.  
  2365.         .M3Unator-control-btn.cancel {
  2366.             border-color: #f38ba8;
  2367.             color: #f38ba8;
  2368.         }
  2369.  
  2370.         /* Stats Styles */
  2371.         .M3Unator-stat {
  2372.             display: inline-flex;
  2373.             align-items: center;
  2374.             gap: 0.382rem;
  2375.             font-size: 0.875rem;
  2376.             cursor: help;
  2377.             min-width: 52px;
  2378.             padding: 0 0.382rem;
  2379.         }
  2380.     `);
  2381.  
  2382.     GM_addStyle(`
  2383.         .M3Unator-toast.success {
  2384.             color: #a6e3a1;
  2385.             border-color: #a6e3a1;
  2386.             background: linear-gradient(rgba(17, 17, 27, 0.95), rgba(17, 17, 27, 0.95)), rgba(166, 227, 161, 0.1);
  2387.         }
  2388.  
  2389.         .M3Unator-toast.error {
  2390.             color: #f38ba8;
  2391.             border-color: #f38ba8;
  2392.             background: linear-gradient(rgba(17, 17, 27, 0.95), rgba(17, 17, 27, 0.95)), rgba(243, 139, 168, 0.1);
  2393.         }
  2394.  
  2395.         .M3Unator-toast.warning {
  2396.             color: #fab387;
  2397.             border-color: #fab387;
  2398.             background: linear-gradient(rgba(17, 17, 27, 0.95), rgba(17, 17, 27, 0.95)), rgba(250, 179, 135, 0.1);
  2399.         }
  2400.     `);
  2401.  
  2402.     class LogCache {
  2403.         constructor(maxSize = 100) {
  2404.             this.maxSize = maxSize;
  2405.             this.logs = [];
  2406.             this.stats = {
  2407.                 totalLogs: 0,
  2408.                 skippedLogs: 0
  2409.             };
  2410.         }
  2411.  
  2412.         add(message, type = '') {
  2413.             const timestamp = new Date().toLocaleTimeString();
  2414.             this.logs.push({ message, type, timestamp });
  2415.             this.stats.totalLogs++;
  2416.             
  2417.             if (this.logs.length > this.maxSize) {
  2418.                 this.logs.shift();
  2419.                 this.stats.skippedLogs++;
  2420.             }
  2421.         }
  2422.  
  2423.         getSummary() {
  2424.             return {
  2425.                 logs: [...this.logs],
  2426.                 stats: { ...this.stats }
  2427.             };
  2428.         }
  2429.  
  2430.         clear() {
  2431.             this.logs = [];
  2432.             this.stats.totalLogs = 0;
  2433.             this.stats.skippedLogs = 0;
  2434.         }
  2435.     }
  2436.  
  2437.     class PlaylistGenerator {
  2438.         constructor() {
  2439.             this.initialStats = {
  2440.                 directories: {
  2441.                     total: 0,
  2442.                     depth: 0
  2443.                 },
  2444.                 files: {
  2445.                     video: {
  2446.                         total: 0,
  2447.                         current: 0
  2448.                     },
  2449.                     audio: {
  2450.                         total: 0,
  2451.                         current: 0
  2452.                     }
  2453.                 },
  2454.                 errors: {
  2455.                     total: 0,
  2456.                     skipped: 0
  2457.                 },
  2458.                 totalFiles: 0
  2459.             };
  2460.  
  2461.             this.videoFormats = [
  2462.                 '.mp4', '.mkv', '.avi', '.webm', '.mov', '.flv', '.wmv', 
  2463.                 '.m4v', '.mpg', '.mpeg', '.3gp', '.vob', '.ts', '.mts',
  2464.                 '.m2ts', '.divx', '.xvid', '.asf', '.ogv', '.rm', '.rmvb',
  2465.                 '.wtv', '.qt', '.hevc', '.f4v', '.swf', '.vro', '.ogx',
  2466.                 '.drc', '.gifv', '.mxf', '.roq', '.nsv'
  2467.             ];
  2468.  
  2469.             this.audioFormats = [
  2470.                 '.mp3', '.m4a', '.wav', '.flac', '.aac', '.ogg', '.wma',
  2471.                 '.opus', '.aiff', '.ape', '.mka', '.ac3', '.dts', '.m4b',
  2472.                 '.m4p', '.m4r', '.mid', '.midi', '.mp2', '.mpa', '.mpc',
  2473.                 '.ra', '.tta', '.voc', '.vox', '.amr', '.awb', '.dsf',
  2474.                 '.dff', '.alac', '.wv', '.oga', '.sln', '.aif', '.pcm'
  2475.             ];
  2476.  
  2477.             // Create Map for file extensions
  2478.             this.extensionMap = new Map();
  2479.  
  2480.             // Add video extensions to Map
  2481.             this.videoFormats.forEach(ext => {
  2482.                 this.extensionMap.set(ext.slice(1), 'video'); // .mp4 -> mp4
  2483.             });
  2484.  
  2485.             // Add audio extensions to Map
  2486.             this.audioFormats.forEach(ext => {
  2487.                 this.extensionMap.set(ext.slice(1), 'audio'); // .mp3 -> mp3
  2488.             });
  2489.  
  2490.             this.domElements = {};
  2491.  
  2492.             this.state = {
  2493.                 isGenerating: false,
  2494.                 isPaused: false,
  2495.                 selectedFormat: 'm3u',
  2496.                 includeVideo: false,
  2497.                 includeAudio: false,
  2498.                 maxEntries: 1000000,
  2499.                 timeoutMs: 5000,
  2500.                 retryCount: 2,
  2501.                 maxDepth: 0,
  2502.                 maxSeenUrls: 5000,
  2503.                 stats: { ...this.initialStats }
  2504.             };
  2505.  
  2506.             this.sortOptions = { numeric: true, sensitivity: 'base' };
  2507.  
  2508.             this.entries = [];
  2509.             this.seenUrls = new Set();
  2510.             this.toastQueue = [];
  2511.             this.isProcessingToast = false;
  2512.  
  2513.             this.icons = {
  2514.                 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">
  2515.                     <polygon points="23 7 16 12 23 17 23 7"/>
  2516.                     <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
  2517.                 </svg>`,
  2518.                 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">
  2519.                     <path d="M9 18V5l12-2v13"/>
  2520.                     <circle cx="6" cy="18" r="3"/>
  2521.                     <circle cx="18" cy="16" r="3"/>
  2522.                 </svg>`,
  2523.                 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">
  2524.                     <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"/>
  2525.                 </svg>`,
  2526.                 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">
  2527.                     <circle cx="12" cy="12" r="10"/>
  2528.                     <line x1="12" y1="16" x2="12" y2="12"/>
  2529.                     <line x1="12" y1="8" x2="12.01" y2="8"/>
  2530.                 </svg>`,
  2531.                 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">
  2532.                     <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/>
  2533.                     <polyline points="13 2 13 9 20 9"/>
  2534.                 </svg>`,
  2535.                 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">
  2536.                     <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
  2537.                     <polyline points="7 10 12 15 17 10"/>
  2538.                     <line x1="12" y1="15" x2="12" y2="3"/>
  2539.                 </svg>`,
  2540.                 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">
  2541.                     <line x1="18" y1="6" x2="6" y2="18"/>
  2542.                     <line x1="6" y1="6" x2="18" y2="18"/>
  2543.                 </svg>`,
  2544.                 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">
  2545.                     <rect x="6" y="4" width="4" height="16"/>
  2546.                     <rect x="14" y="4" width="4" height="16"/>
  2547.                 </svg>`,
  2548.                 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">
  2549.                     <polygon points="5 3 19 12 5 21 5 3"/>
  2550.                 </svg>`,
  2551.                 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">
  2552.                     <circle cx="12" cy="12" r="10"/>
  2553.                     <line x1="15" y1="9" x2="9" y2="15"/>
  2554.                     <line x1="9" y1="9" x2="15" y2="15"/>
  2555.                 </svg>`,
  2556.                 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">
  2557.                     <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
  2558.                     <polyline points="22 4 12 14.01 9 11.01"/>
  2559.                 </svg>`,
  2560.                 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">
  2561.                     <circle cx="12" cy="12" r="10"/>
  2562.                     <line x1="12" y1="8" x2="12" y2="12"/>
  2563.                     <line x1="12" y1="16" x2="12.01" y2="16"/>
  2564.                 </svg>`,
  2565.                 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">
  2566.                     <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"/>
  2567.                     <line x1="12" y1="9" x2="12" y2="13"/>
  2568.                     <line x1="12" y1="17" x2="12.01" y2="17"/>
  2569.                 </svg>`,
  2570.                 github: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
  2571.                     <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"/>
  2572.                 </svg>`,
  2573.                 twitter: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
  2574.                     <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"/>
  2575.                 </svg>`,
  2576.                 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">
  2577.                     <polyline points="6 9 12 15 18 9"/>
  2578.                 </svg>`,
  2579.                 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">
  2580.                     <polygon points="12 2 2 7 12 12 22 7 12 2"/>
  2581.                     <polyline points="2 17 12 22 22 17"/>
  2582.                     <polyline points="2 12 12 17 22 12"/>
  2583.                 </svg>`,
  2584.                 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">
  2585.                     <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
  2586.                 </svg>`
  2587.             };
  2588.  
  2589.             this.templates = {
  2590.                 toggleButton: (id, title, icon, checked = false) => `
  2591.                     <div class="M3Unator-toggle-container">
  2592.                         <label>
  2593.                             <input type="checkbox" id="${id}" ${checked ? 'checked' : ''}>
  2594.                             <span title="${title}">${icon}</span>
  2595.                         </label>
  2596.                     </div>
  2597.                 `,
  2598.                 controlButton: (type, icon, text) => `
  2599.                     <button class="M3Unator-control-btn ${type}">
  2600.                         ${icon}
  2601.                         <span>${text}</span>
  2602.                     </button>
  2603.                 `,
  2604.                 statsItem: (icon, id, title, className = '') => `
  2605.                     <span class="M3Unator-stat ${className}" title="${title}">
  2606.                         ${icon}
  2607.                         <span id="${id}">0</span>
  2608.                     </span>
  2609.                 `
  2610.             };
  2611.  
  2612.             this.baseStyles = `
  2613.                 .M3Unator-btn-base {
  2614.                     border: none;
  2615.                     border-radius: 8px;
  2616.                     font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  2617.                     font-weight: 600;
  2618.                     cursor: pointer;
  2619.                     transition: all 0.2s ease;
  2620.                     display: flex;
  2621.                     align-items: center;
  2622.                     justify-content: center;
  2623.                     gap: 0.5rem;
  2624.                 }
  2625.  
  2626.                 .M3Unator-toggle-base {
  2627.                     position: relative;
  2628.                     display: flex;
  2629.                     align-items: center;
  2630.                     gap: 0.5rem;
  2631.                     transition: all 0.2s ease;
  2632.                 }
  2633.  
  2634.                 .M3Unator-control-base {
  2635.                     padding: 0.75rem 1.5rem;
  2636.                     border-radius: 12px;
  2637.                     font-weight: 600;
  2638.                     font-size: 0.95rem;
  2639.                     min-width: 160px;
  2640.                     background: rgba(30, 30, 46, 0.6);
  2641.                     backdrop-filter: blur(8px);
  2642.                 }
  2643.  
  2644.                 .M3Unator-stat-base {
  2645.                     display: inline-flex;
  2646.                     align-items: center;
  2647.                     gap: 0.382rem;
  2648.                     font-size: 0.875rem;
  2649.                     cursor: help;
  2650.                     min-width: 52px;
  2651.                     padding: 0 0.382rem;
  2652.                 }
  2653.  
  2654.                 .M3Unator-icon-base {
  2655.                     display: flex;
  2656.                     align-items: center;
  2657.                     justify-content: center;
  2658.                     width: 24px;
  2659.                     height: 24px;
  2660.                     transition: all 0.2s ease;
  2661.                 }
  2662.             `;
  2663.  
  2664.             GM_addStyle(this.baseStyles);
  2665.  
  2666.             this.updateActivityIndicator = (status) => {
  2667.                 const indicator = this.domElements.activityIndicator;
  2668.                 if (!indicator) return;
  2669.                 
  2670.                 // Remove all classes first
  2671.                 indicator.classList.remove('active', 'paused', 'cancelled', 'completed');
  2672.                 
  2673.                 // Status check
  2674.                 if (this.state.isGenerating) {
  2675.                     if (this.state.isPaused) {
  2676.                         indicator.classList.add('paused');
  2677.                     } else {
  2678.                         indicator.classList.add('active');
  2679.                     }
  2680.                 } else if (status === 'cancelled') {
  2681.                     indicator.classList.add('cancelled');
  2682.                 } else if (status === 'completed') {
  2683.                     indicator.classList.add('completed');
  2684.                 }
  2685.             };
  2686.  
  2687.             this.logCache = new LogCache(100);
  2688.         }
  2689.  
  2690.         createComponent(type, props) {
  2691.             switch (type) {
  2692.                 case 'toggle':
  2693.                     return this.templates.toggleButton(
  2694.                         props.id,
  2695.                         props.title,
  2696.                         props.icon,
  2697.                         props.checked
  2698.                     );
  2699.                 case 'control':
  2700.                     return this.templates.controlButton(
  2701.                         props.type,
  2702.                         props.icon,
  2703.                         props.text
  2704.                     );
  2705.                 case 'stats':
  2706.                     return `
  2707.                         <span class="M3Unator-stat ${props.class}" title="${props.title}">
  2708.                             ${props.icon}
  2709.                             <span id="${props.id}">0</span>
  2710.                         </span>
  2711.                     `;
  2712.                 default:
  2713.                     return '';
  2714.             }
  2715.         }
  2716.  
  2717.         async init() {
  2718.             const container = document.createElement('div');
  2719.             container.className = 'M3Unator-container';
  2720.  
  2721.             const toggleButtons = [
  2722.                 {
  2723.                     id: 'includeVideo',
  2724.                     title: 'Video (.mp4, .mkv)',
  2725.                     icon: this.icons.video,
  2726.                     checked: true
  2727.                 },
  2728.                 {
  2729.                     id: 'includeAudio',
  2730.                     title: 'Audio (.mp3, .m4a)',
  2731.                     icon: this.icons.audio,
  2732.                     checked: true
  2733.                 },
  2734.                 {
  2735.                     id: 'recursiveSearch',
  2736.                     title: 'Scan Subdirectories',
  2737.                     icon: this.icons.folder,
  2738.                     checked: true
  2739.                 }
  2740.             ].map(props => this.createComponent('toggle', props)).join('');
  2741.  
  2742.             const controlButtons = [
  2743.                 {
  2744.                     type: 'pause',
  2745.                     icon: this.icons.pause,
  2746.                     text: 'Pause'
  2747.                 },
  2748.                 {
  2749.                     type: 'resume',
  2750.                     icon: this.icons.resume,
  2751.                     text: 'Resume'
  2752.                 },
  2753.                 {
  2754.                     type: 'cancel',
  2755.                     icon: this.icons.cancel,
  2756.                     text: 'Cancel'
  2757.                 }
  2758.             ].map(props => this.createComponent('control', props)).join('');
  2759.  
  2760.             const statsItems = [
  2761.                 {
  2762.                     icon: this.icons.file,
  2763.                     id: 'totalFiles',
  2764.                     title: 'Total Files',
  2765.                     class: ''
  2766.                 },
  2767.                 {
  2768.                     icon: this.icons.video,
  2769.                     id: 'videoFiles',
  2770.                     title: 'Video (.mp4, .mkv)',
  2771.                     class: 'video'
  2772.                 },
  2773.                 {
  2774.                     icon: this.icons.audio,
  2775.                     id: 'audioFiles',
  2776.                     title: 'Audio (.mp3, .m4a)',
  2777.                     class: 'audio'
  2778.                 },
  2779.                 {
  2780.                     icon: this.icons.folder,
  2781.                     id: 'directories',
  2782.                     title: 'Subdirectories',
  2783.                     class: 'dir'
  2784.                 },
  2785.                 {
  2786.                     icon: this.icons.layers,
  2787.                     id: 'depthLevel',
  2788.                     title: 'Depth Level',
  2789.                     class: 'depth'
  2790.                 },
  2791.                 {
  2792.                     icon: this.icons.error,
  2793.                     id: 'errors',
  2794.                     title: 'Error',
  2795.                     class: 'error'
  2796.                 }
  2797.             ].map(props => this.createComponent('stats', props)).join('');
  2798.  
  2799.             container.innerHTML = `
  2800.                 <div class="M3Unator-popup">
  2801.                     <div class="M3Unator-header">
  2802.                         <h3 class="M3Unator-title">
  2803.                             ${this.icons.video}
  2804.                             <span>M3Unator</span>
  2805.                         </h3>
  2806.                         <div style="display: flex; align-items: center;">
  2807.                             <div class="M3Unator-social">
  2808.                                 <a class="info-link">
  2809.                                     ${this.icons.info}
  2810.                                 </a>
  2811.                                 <a href="https://github.com/hasanbeder/M3Unator" target="_blank" rel="noopener noreferrer" class="github-icon">
  2812.                                     ${this.icons.github}
  2813.                                 </a>
  2814.                                 <a href="https://x.com/hasanbeder" target="_blank" rel="noopener noreferrer">
  2815.                                     ${this.icons.twitter}
  2816.                                 </a>
  2817.                             </div>
  2818.                             <button class="M3Unator-close">${this.icons.close}</button>
  2819.                         </div>
  2820.                     </div>
  2821.                     <div class="info-modal">
  2822.                         <div class="info-modal-content">
  2823.                             <div class="info-modal-header">
  2824.                                 <h3>About M3Unator</h3>
  2825.                                 <span class="info-close">${this.icons.close}</span>
  2826.                             </div>
  2827.                             <div class="info-modal-body">
  2828.                                 <p><strong>M3Unator v1.0.2</strong> - The Ultimate Web Directory Playlist Creator</p>
  2829.                                 <p>Create M3U/M3U8 playlists effortlessly from any web directory. Experience ultrafast scanning and intelligent media detection.</p>
  2830.                                 <h4>Key Features:</h4>
  2831.                                 <ul>
  2832.                                     <li>⚡ Ultrafast directory scanning with parallel processing</li>
  2833.                                     <li>🎥 Comprehensive media support (MP4, MKV, MP3, FLAC, etc.)</li>
  2834.                                     <li>🔍 Smart recursive directory scanning</li>
  2835.                                     <li>🛡️ Enhanced error handling and stability</li>
  2836.                                     <li>🌙 Modern dark theme interface</li>
  2837.                                 </ul>
  2838.                                 <p>For updates and more information, visit the <a href="https://github.com/hasanbeder/M3Unator" target="_blank">GitHub repository</a>.</p>
  2839.                             </div>
  2840.                         </div>
  2841.                     </div>
  2842.                     <div class="M3Unator-content">
  2843.                         <div class="M3Unator-input-row">
  2844.                             <div class="M3Unator-input-group">
  2845.                                 <input type="text" 
  2846.                                     id="playlistName" 
  2847.                                     class="M3Unator-input"
  2848.                                     placeholder="Playlist Name" 
  2849.                                     required
  2850.                                     spellcheck="false"
  2851.                                     autocomplete="off"
  2852.                                     autocorrect="off"
  2853.                                     autocapitalize="off">
  2854.  
  2855.                                 <div class="M3Unator-dropdown">
  2856.                                     <button type="button" class="M3Unator-dropdown-button">
  2857.                                         <span>.m3u</span>
  2858.                                         ${this.icons.chevronDown}
  2859.                                     </button>
  2860.                                     <div class="M3Unator-dropdown-menu">
  2861.                                         <div class="M3Unator-dropdown-item selected" data-value="m3u">.m3u</div>
  2862.                                         <div class="M3Unator-dropdown-divider"></div>
  2863.                                         <div class="M3Unator-dropdown-item" data-value="m3u8">.m3u8</div>
  2864.                                     </div>
  2865.                                 </div>
  2866.                             </div>
  2867.                         </div>
  2868.  
  2869.                         <div class="M3Unator-toggle-group">
  2870.                             ${toggleButtons}
  2871.                         </div>
  2872.  
  2873.                         <div class="M3Unator-depth-controls">
  2874.                             <div class="M3Unator-radio-group">
  2875.                                 <label class="M3Unator-radio">
  2876.                                     <input type="radio" name="depthType" value="current" id="currentDepth">
  2877.                                     <span class="radio-mark"></span>
  2878.                                     <span class="radio-label">Current directory</span>
  2879.                                 </label>
  2880.                                 <label class="M3Unator-radio">
  2881.                                     <input type="radio" name="depthType" value="custom" id="customDepth">
  2882.                                     <span class="radio-mark"></span>
  2883.                                     <span class="radio-label">Custom depth:</span>
  2884.                                     <input type="number" 
  2885.                                         id="maxDepth" 
  2886.                                         value="1" 
  2887.                                         min="1" 
  2888.                                         max="99" 
  2889.                                         class="M3Unator-depth-input"
  2890.                                         title="Subdirectory scan depth" 
  2891.                                         style="width: 64px;"
  2892.                                         inputmode="numeric"
  2893.                                         pattern="[0-9]*">
  2894.                                 </label>
  2895.                             </div>
  2896.                         </div>
  2897.  
  2898.                         <button class="M3Unator-button" id="generateBtn">
  2899.                             ${this.icons.download}
  2900.                             <span>Create Playlist</span>
  2901.                         </button>
  2902.  
  2903.                         <div class="M3Unator-controls">
  2904.                             ${controlButtons}
  2905.                         </div>
  2906.  
  2907.                         <div class="M3Unator-stats-bar">
  2908.                             <div class="M3Unator-stats">
  2909.                                 ${statsItems}
  2910.                             </div>
  2911.                         </div>
  2912.  
  2913.                         <div class="M3Unator-log-container">
  2914.                             <button class="M3Unator-log-toggle">
  2915.                                 <div class="toggle-text">
  2916.                                     ${this.icons.logToggle}
  2917.                                     <span>Recent Activity</span>
  2918.                                 </div>
  2919.                                 <div class="M3Unator-activity-indicator"></div>
  2920.                             </button>
  2921.                             <div id="scanLog" class="M3Unator-log collapsed"></div>
  2922.                         </div>
  2923.                     </div>
  2924.  
  2925.                     <style>
  2926.                         .M3Unator-container {
  2927.                             max-width: 400px;
  2928.                             width: 100%;
  2929.                             background: transparent;
  2930.                             backdrop-filter: none;
  2931.                         }
  2932.  
  2933.                         .M3Unator-popup {
  2934.                             background: #1e1e2e;
  2935.                             border-radius: 12px;
  2936.                             box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  2937.                             border: 1px solid rgba(69, 71, 90, 0.6);
  2938.                         }
  2939.  
  2940.                         .info-modal {
  2941.                             display: none;
  2942.                             position: fixed;
  2943.                             top: 0;
  2944.                             left: 0;
  2945.                             width: 100%;
  2946.                             height: 100%;
  2947.                             background: rgba(0, 0, 0, 0.75);
  2948.                             z-index: 99999;
  2949.                         }
  2950.  
  2951.                         .info-content {
  2952.                             position: absolute;
  2953.                             top: 50%;
  2954.                             left: 50%;
  2955.                             transform: translate(-50%, -50%);
  2956.                             background: #1e1e2e;
  2957.                             padding: 2rem;
  2958.                             border-radius: 12px;
  2959.                             max-width: 600px;
  2960.                             width: 90%;
  2961.                             max-height: 80vh;
  2962.                             overflow-y: auto;
  2963.                             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  2964.                             border: 1px solid rgba(69, 71, 90, 0.6);
  2965.                         }
  2966.  
  2967.                         .M3Unator-content {
  2968.                             padding: 0.75rem;
  2969.                             display: flex;
  2970.                             flex-direction: column;
  2971.                             gap: 0.75rem;
  2972.                             max-width: 100%;
  2973.                             overflow: hidden;
  2974.                         }
  2975.  
  2976.                         .M3Unator-input-row {
  2977.                             display: flex;
  2978.                             width: 100%;
  2979.                             position: relative;
  2980.                             max-width: 100%;
  2981.                             overflow: visible;
  2982.                         }
  2983.  
  2984.                         .M3Unator-input-group {
  2985.                             flex: 1;
  2986.                             min-width: 0;
  2987.                             position: relative;
  2988.                         }
  2989.  
  2990.                         .M3Unator-input {
  2991.                             width: 100%;
  2992.                             min-width: 0;
  2993.                             padding-right: 80px;
  2994.                             box-sizing: border-box;
  2995.                             transition: all 0.2s ease;
  2996.                             background: rgba(30, 30, 46, 0.6);
  2997.                             border: 1px solid rgba(69, 71, 90, 0.6);
  2998.                             border-radius: 6px;
  2999.                             color: #f5c2e7;
  3000.                             padding: 8px 80px 8px 12px;
  3001.                             font-size: 14px;
  3002.                         }
  3003.  
  3004.                         .M3Unator-dropdown {
  3005.                             position: absolute;
  3006.                             right: 8px;
  3007.                             top: 50%;
  3008.                             transform: translateY(-50%);
  3009.                             width: 70px;
  3010.                             z-index: 9999;
  3011.                             display: none;
  3012.                         }
  3013.  
  3014.                         .M3Unator-dropdown.active {
  3015.                             display: block;
  3016.                         }
  3017.  
  3018.                         .M3Unator-dropdown-button {
  3019.                             width: 100%;
  3020.                             padding: 4px 8px;
  3021.                             border-radius: 6px;
  3022.                             background: rgba(30, 30, 46, 0.8);
  3023.                             border: 1px solid rgba(69, 71, 90, 0.6);
  3024.                             color: #f5c2e7;
  3025.                             cursor: pointer;
  3026.                             display: flex;
  3027.                             align-items: center;
  3028.                             justify-content: space-between;
  3029.                             gap: 4px;
  3030.                             transition: all 0.2s ease;
  3031.                             box-sizing: border-box;
  3032.                             font-size: 14px;
  3033.                         }
  3034.  
  3035.                         .M3Unator-dropdown-button:hover {
  3036.                             background: rgba(30, 30, 46, 0.9);
  3037.                             border-color: rgba(69, 71, 90, 0.8);
  3038.                         }
  3039.  
  3040.                         .M3Unator-dropdown-menu {
  3041.                             position: absolute;
  3042.                             top: 100%;
  3043.                             right: 0;
  3044.                             width: 100%;
  3045.                             margin-top: 4px;
  3046.                             background: rgba(30, 30, 46, 0.95);
  3047.                             border: 1px solid rgba(69, 71, 90, 0.6);
  3048.                             border-radius: 6px;
  3049.                             padding: 4px;
  3050.                             display: none;
  3051.                             box-sizing: border-box;
  3052.                             z-index: 9999;
  3053.                         }
  3054.  
  3055.                         .M3Unator-dropdown.active .M3Unator-dropdown-menu {
  3056.                             display: block;
  3057.                         }
  3058.  
  3059.                         .M3Unator-dropdown-item {
  3060.                             padding: 8px 12px;
  3061.                             cursor: pointer;
  3062.                             border-radius: 4px;
  3063.                             transition: all 0.2s ease;
  3064.                             text-align: center;
  3065.                             font-size: 14px;
  3066.                             font-family: monospace;
  3067.                             color: #cdd6f4;
  3068.                         }
  3069.  
  3070.                         .M3Unator-dropdown-divider {
  3071.                             height: 1px;
  3072.                             background: rgba(69, 71, 90, 0.6);
  3073.                             margin: 6px 0;
  3074.                         }
  3075.  
  3076.                         .M3Unator-dropdown-menu {
  3077.                             position: absolute;
  3078.                             top: 100%;
  3079.                             right: 0;
  3080.                             width: 100%;
  3081.                             margin-top: 4px;
  3082.                             background: #1e1e2e;
  3083.                             border: 1px solid rgba(69, 71, 90, 0.6);
  3084.                             border-radius: 6px;
  3085.                             padding: 6px;
  3086.                             display: none;
  3087.                             box-sizing: border-box;
  3088.                             z-index: 9999;
  3089.                         }
  3090.  
  3091.                         .M3Unator-dropdown-button {
  3092.                             width: 100%;
  3093.                             padding: 4px 8px;
  3094.                             border-radius: 6px;
  3095.                             background: #1e1e2e;
  3096.                             border: 1px solid rgba(69, 71, 90, 0.6);
  3097.                             color: #f5c2e7;
  3098.                             cursor: pointer;
  3099.                             display: flex;
  3100.                             align-items: center;
  3101.                             justify-content: space-between;
  3102.                             gap: 4px;
  3103.                             transition: all 0.2s ease;
  3104.                             box-sizing: border-box;
  3105.                             font-size: 14px;
  3106.                             font-family: monospace;
  3107.                         }
  3108.  
  3109.                         .M3Unator-dropdown-item:hover {
  3110.                             background: rgba(203, 166, 247, 0.1);
  3111.                             color: #f5c2e7;
  3112.                         }
  3113.  
  3114.                         .M3Unator-dropdown-item.selected {
  3115.                             background: rgba(203, 166, 247, 0.1);
  3116.                             color: #cba6f7;
  3117.                         }
  3118.                     </style>
  3119.                 </div>
  3120.             `;
  3121.  
  3122.             document.body.appendChild(container);
  3123.             const launcher = document.createElement('button');
  3124.             launcher.className = 'M3Unator-launcher';
  3125.             launcher.innerHTML = `
  3126.                 ${this.icons.video}
  3127.                 <span>M3Unator</span>
  3128.             `;
  3129.             
  3130.             document.body.appendChild(launcher);
  3131.             const popup = container.querySelector('.M3Unator-popup');
  3132.             const header = container.querySelector('.M3Unator-header');
  3133.             this.makeDraggable(popup, header);
  3134.             const statsBar = container.querySelector('.M3Unator-stats-bar');
  3135.             if (statsBar) {
  3136.                 statsBar.style.display = 'block';
  3137.             }
  3138.  
  3139.             this.domElements = {
  3140.                 container,
  3141.                 popup: container.querySelector('.M3Unator-popup'),
  3142.                 header: container.querySelector('.M3Unator-header'),
  3143.                 closeBtn: container.querySelector('.M3Unator-close'),
  3144.                 generateBtn: container.querySelector('#generateBtn'),
  3145.                 playlistInput: container.querySelector('#playlistName'),
  3146.                 includeVideo: container.querySelector('#includeVideo'),
  3147.                 includeAudio: container.querySelector('#includeAudio'),
  3148.                 recursiveSearch: container.querySelector('#recursiveSearch'),
  3149.                 controls: container.querySelector('.M3Unator-controls'),
  3150.                 scanLog: container.querySelector('#scanLog'),
  3151.                 statsBar: container.querySelector('.M3Unator-stats-bar'),
  3152.                 dropdown: container.querySelector('.M3Unator-dropdown'),
  3153.                 launcher,
  3154.                 stats: {
  3155.                     totalFiles: container.querySelector('#totalFiles'),
  3156.                     videoFiles: container.querySelector('#videoFiles'),
  3157.                     audioFiles: container.querySelector('#audioFiles'),
  3158.                     directories: container.querySelector('#directories'),
  3159.                     depthLevel: container.querySelector('#depthLevel'),
  3160.                     errors: container.querySelector('#errors')
  3161.                 },
  3162.                 depthControls: container.querySelector('.M3Unator-depth-controls'),
  3163.                 currentDepth: container.querySelector('#currentDepth'),
  3164.                 customDepth: container.querySelector('#customDepth'),
  3165.                 maxDepth: container.querySelector('#maxDepth'),
  3166.                 logToggle: container.querySelector('.M3Unator-log-toggle'),
  3167.                 logCounter: container.querySelector('.M3Unator-log-counter'),
  3168.                 activityIndicator: container.querySelector('.M3Unator-activity-indicator'),
  3169.             };
  3170.  
  3171.             launcher.onclick = () => {
  3172.                 this.domElements.container.setAttribute('data-visible', 'true');
  3173.                 const overlay = document.createElement('div');
  3174.                 overlay.className = 'M3Unator-overlay';
  3175.                 document.body.appendChild(overlay);
  3176.                 
  3177.                 const popup = this.domElements.popup;
  3178.                 const rect = popup.getBoundingClientRect();
  3179.                 const centerX = (window.innerWidth - rect.width) / 2;
  3180.                 const centerY = (window.innerHeight - rect.height) / 2;
  3181.                 popup.style.left = `${centerX}px`;
  3182.                 popup.style.top = `${centerY}px`;
  3183.             };
  3184.  
  3185.             document.querySelector('.M3Unator-close').onclick = () => {
  3186.                 if (this.state.isGenerating) {
  3187.                 this.state.isGenerating = false;
  3188.                 this.state.isPaused = false;
  3189.                     this.reset({ isCancelled: true, enableToggles: true });
  3190.                     this.showToast('Scan cancelled', 'warning');
  3191.                 }
  3192.                 this.domElements.container.removeAttribute('data-visible');
  3193.                 const overlay = document.querySelector('.M3Unator-overlay');
  3194.                 if (overlay) overlay.remove();
  3195.             };
  3196.  
  3197.             this.setupPopupHandlers();
  3198.  
  3199.             this.updateCounter(0);
  3200.  
  3201.             this.domElements.logToggle.addEventListener('click', () => {
  3202.                 const log = this.domElements.scanLog;
  3203.                 const toggle = this.domElements.logToggle;
  3204.                 
  3205.                 if (log.classList.contains('expanded')) {
  3206.                     log.classList.remove('expanded');
  3207.                     toggle.classList.remove('active');
  3208.                 } else {
  3209.                     log.classList.add('expanded');
  3210.                     toggle.classList.add('active');
  3211.                     log.scrollTop = log.scrollHeight;
  3212.                 }
  3213.             });
  3214.  
  3215.             this.domElements.scanLog.classList.remove('expanded');
  3216.             this.domElements.logToggle.classList.remove('active');
  3217.  
  3218.             this.logCount = 0;
  3219.         }
  3220.  
  3221.         updateStyles() {
  3222.             GM_addStyle(`
  3223.                 .M3Unator-toggle-container {
  3224.                     @extend .M3Unator-toggle-base;
  3225.                 }
  3226.  
  3227.                 .M3Unator-control-btn {
  3228.                     @extend .M3Unator-control-base;
  3229.                 }
  3230.  
  3231.                 .M3Unator-stat {
  3232.                     @extend .M3Unator-stat-base;
  3233.                 }
  3234.  
  3235.                 .M3Unator-toggle-container span {
  3236.                     @extend .M3Unator-icon-base;
  3237.                     background: #1e1e2e;
  3238.                     border: 2px solid #45475a;
  3239.                     border-radius: 16px;
  3240.                 }
  3241.  
  3242.                 .M3Unator-control-btn.pause {
  3243.                     border-color: #fab387;
  3244.                     color: #fab387;
  3245.                 }
  3246.  
  3247.                 .M3Unator-control-btn.resume {
  3248.                     border-color: #94e2d5;
  3249.                     color: #94e2d5;
  3250.                 }
  3251.  
  3252.                 .M3Unator-control-btn.cancel {
  3253.                     border-color: #f38ba8;
  3254.                     color: #f38ba8;
  3255.                 }
  3256.  
  3257.             `);
  3258.         }
  3259.  
  3260.         makeDraggable(element, handle) {
  3261.             let isDragging = false;
  3262.             let currentX;
  3263.             let currentY;
  3264.             let initialX;
  3265.             let initialY;
  3266.             let xOffset = 0;
  3267.             let yOffset = 0;
  3268.  
  3269.             const centerWindow = () => {
  3270.                 const rect = element.getBoundingClientRect();
  3271.                 const centerX = (window.innerWidth - rect.width) / 2;
  3272.                 const centerY = (window.innerHeight - rect.height) / 2;
  3273.                 
  3274.                 element.style.left = `${centerX}px`;
  3275.                 element.style.top = `${centerY}px`;
  3276.                 
  3277.                 xOffset = centerX;
  3278.                 yOffset = centerY;
  3279.                 
  3280.                 element.style.transform = 'none';
  3281.             };
  3282.  
  3283.             centerWindow();
  3284.  
  3285.             const getPosition = (e) => {
  3286.                 return {
  3287.                     x: e.type.includes('touch') ? e.touches[0].clientX : e.clientX,
  3288.                     y: e.type.includes('touch') ? e.touches[0].clientY : e.clientY
  3289.                 };
  3290.             };
  3291.  
  3292.             const dragStart = (e) => {
  3293.                 if (e.target === handle || handle.contains(e.target)) {
  3294.                     e.preventDefault();
  3295.                     const pos = getPosition(e);
  3296.                     
  3297.                     isDragging = true;
  3298.                     
  3299.                     const rect = element.getBoundingClientRect();
  3300.                     xOffset = rect.left;
  3301.                     yOffset = rect.top;
  3302.                     
  3303.                     initialX = pos.x - xOffset;
  3304.                     initialY = pos.y - yOffset;
  3305.  
  3306.                     handle.style.cursor = 'grabbing';
  3307.                 }
  3308.             };
  3309.  
  3310.             const drag = (e) => {
  3311.                 if (isDragging) {
  3312.                     e.preventDefault();
  3313.                     const pos = getPosition(e);
  3314.  
  3315.                     currentX = pos.x - initialX;
  3316.                     currentY = pos.y - initialY;
  3317.  
  3318.                     const rect = element.getBoundingClientRect();
  3319.                     const maxX = window.innerWidth - rect.width;
  3320.                     const maxY = window.innerHeight - rect.height;
  3321.  
  3322.                     currentX = Math.min(Math.max(0, currentX), maxX);
  3323.                     currentY = Math.min(Math.max(0, currentY), maxY);
  3324.  
  3325.                     element.style.left = `${currentX}px`;
  3326.                     element.style.top = `${currentY}px`;
  3327.                     
  3328.                     xOffset = currentX;
  3329.                     yOffset = currentY;
  3330.                 }
  3331.             };
  3332.  
  3333.             const dragEnd = () => {
  3334.                 if (isDragging) {
  3335.                     isDragging = false;
  3336.                     handle.style.cursor = 'grab';
  3337.                 }
  3338.             };
  3339.  
  3340.             handle.addEventListener('mousedown', dragStart);
  3341.             document.addEventListener('mousemove', drag);
  3342.             document.addEventListener('mouseup', dragEnd);
  3343.  
  3344.             handle.addEventListener('touchstart', dragStart, { passive: false });
  3345.             document.addEventListener('touchmove', drag, { passive: false });
  3346.             document.addEventListener('touchend', dragEnd);
  3347.  
  3348.             window.addEventListener('resize', () => {
  3349.                 if (!isDragging) {
  3350.                     centerWindow();
  3351.                 }
  3352.             });
  3353.  
  3354.             handle.style.cursor = 'grab';
  3355.             handle.style.userSelect = 'none';
  3356.             handle.style.touchAction = 'none';
  3357.  
  3358.             element.style.position = 'fixed';
  3359.             element.style.margin = '0';
  3360.             element.style.touchAction = 'none';
  3361.             element.style.transition = 'none';
  3362.         }
  3363.  
  3364.         showToast(message, type = 'success', duration = 3000) {
  3365.             let toastContainer = document.querySelector('.M3Unator-toast-container');
  3366.             if (!toastContainer) {
  3367.                 toastContainer = document.createElement('div');
  3368.                 toastContainer.className = 'M3Unator-toast-container';
  3369.                 document.body.appendChild(toastContainer);
  3370.             }
  3371.  
  3372.             // Remove previous toasts
  3373.             const existingToasts = toastContainer.querySelectorAll('.M3Unator-toast');
  3374.             existingToasts.forEach(toast => {
  3375.                 toast.classList.add('removing');
  3376.                 setTimeout(() => toast.remove(), 300);
  3377.             });
  3378.  
  3379.             const toast = document.createElement('div');
  3380.             toast.className = `M3Unator-toast ${type}`;
  3381.             
  3382.             const icon = this.icons[type] || this.icons.info;
  3383.             toast.innerHTML = `${icon}<span>${message}</span>`;
  3384.             
  3385.             toastContainer.appendChild(toast);
  3386.             
  3387.             // Force a reflow to ensure the animation plays
  3388.             void toast.offsetWidth;
  3389.             
  3390.             // Add show class to trigger animation
  3391.             requestAnimationFrame(() => {
  3392.                 toast.classList.add('show');
  3393.             });
  3394.  
  3395.             setTimeout(() => {
  3396.                 toast.classList.add('removing');
  3397.                 toast.classList.remove('show');
  3398.                 setTimeout(() => {
  3399.                     if (toast.parentNode === toastContainer) {
  3400.                         toast.remove();
  3401.                     }
  3402.                     if (toastContainer.children.length === 0) {
  3403.                         toastContainer.remove();
  3404.                     }
  3405.                 }, 300);
  3406.             }, duration);
  3407.         }
  3408.  
  3409.         setupPopupHandlers() {
  3410.             const generateBtn = this.domElements.generateBtn;
  3411.             const playlistInput = this.domElements.playlistInput;
  3412.             const includeVideo = this.domElements.includeVideo;
  3413.             const includeAudio = this.domElements.includeAudio;
  3414.             const recursiveSearch = this.domElements.recursiveSearch;
  3415.             const controls = this.domElements.controls;
  3416.  
  3417.             const dropdown = this.domElements.dropdown;
  3418.             const dropdownButton = dropdown.querySelector('.M3Unator-dropdown-button');
  3419.             const dropdownItems = dropdown.querySelectorAll('.M3Unator-dropdown-item');
  3420.  
  3421.             const controlButtons = controls.querySelectorAll('.M3Unator-control-btn');
  3422.             const pauseBtn = controlButtons[0];
  3423.             const resumeBtn = controlButtons[1];
  3424.             const cancelBtn = controlButtons[2];
  3425.  
  3426.             dropdownButton.addEventListener('click', () => {
  3427.                 dropdown.classList.toggle('active');
  3428.             });
  3429.  
  3430.             document.addEventListener('click', (e) => {
  3431.                 if (!dropdown.contains(e.target)) {
  3432.                     dropdown.classList.remove('active');
  3433.                 }
  3434.             });
  3435.  
  3436.             dropdownItems.forEach(item => {
  3437.                 item.addEventListener('click', () => {
  3438.                     dropdownItems.forEach(i => i.classList.remove('selected'));
  3439.                     item.classList.add('selected');
  3440.                     dropdownButton.querySelector('span').textContent = item.textContent;
  3441.                     this.state.selectedFormat = item.dataset.value;
  3442.                     dropdown.classList.remove('active');
  3443.                 });
  3444.             });
  3445.  
  3446.             recursiveSearch.checked = true;
  3447.             this.state.recursiveSearch = true;
  3448.             includeVideo.checked = true;
  3449.             includeAudio.checked = true;
  3450.             this.state.includeVideo = true;
  3451.             this.state.includeAudio = true;
  3452.  
  3453.             includeVideo.addEventListener('change', (e) => {
  3454.                 this.state.includeVideo = e.target.checked;
  3455.                 this.addLogEntry(
  3456.                     e.target.checked ? 
  3457.                     'Video files will be included' : 
  3458.                     'Video files will not be included',
  3459.                     'info'
  3460.                 );
  3461.             });
  3462.  
  3463.             includeAudio.addEventListener('change', (e) => {
  3464.                 this.state.includeAudio = e.target.checked;
  3465.                 this.addLogEntry(
  3466.                     e.target.checked ? 
  3467.                     'Audio files will be included' : 
  3468.                     'Audio files will not be included',
  3469.                     'info'
  3470.                 );
  3471.             });
  3472.  
  3473.                 const currentDepth = this.domElements.currentDepth;
  3474.                 const customDepth = this.domElements.customDepth;
  3475.                 const maxDepth = this.domElements.maxDepth;
  3476.             const depthControls = this.domElements.depthControls;
  3477.  
  3478.             depthControls.style.display = 'none';
  3479.             depthControls.classList.remove('active');
  3480.             this.state.maxDepth = -1;
  3481.  
  3482.             currentDepth.checked = true;
  3483.             customDepth.checked = false;
  3484.             maxDepth.disabled = true;
  3485.             maxDepth.value = '1';
  3486.  
  3487.             recursiveSearch.addEventListener('change', (e) => {
  3488.                 if (!e.target.checked) {
  3489.                     depthControls.style.display = 'block';
  3490.                     depthControls.classList.add('active');
  3491.                     
  3492.                     currentDepth.checked = true;
  3493.                     customDepth.checked = false;
  3494.                     maxDepth.disabled = true;
  3495.                     this.state.maxDepth = 0;
  3496.                     
  3497.                     this.addLogEntry('Directory scanning disabled, only current directory will be scanned', 'info');
  3498.                 } else {
  3499.                     depthControls.style.display = 'none';
  3500.                     depthControls.classList.remove('active');
  3501.                     
  3502.                     this.state.maxDepth = -1;
  3503.                     this.state.recursiveSearch = true;
  3504.                     
  3505.                     this.addLogEntry('Directory scanning active, all directories will be scanned', 'info');
  3506.                 }
  3507.             });
  3508.  
  3509.             this.domElements.currentDepth.addEventListener('change', (e) => {
  3510.                 if (e.target.checked && !recursiveSearch.checked) {
  3511.                     this.state.maxDepth = 0;
  3512.                     this.domElements.maxDepth.disabled = true;
  3513.                     this.addLogEntry('Only current directory will be scanned', 'info');
  3514.                 }
  3515.             });
  3516.  
  3517.             this.domElements.customDepth.addEventListener('change', (e) => {
  3518.                 if (e.target.checked && !recursiveSearch.checked) {
  3519.                     const depthValue = parseInt(this.domElements.maxDepth.value) || 1;
  3520.                     this.state.maxDepth = depthValue;
  3521.                     this.domElements.maxDepth.disabled = false;
  3522.                     this.addLogEntry(
  3523.                         `Directory scanning depth: ${depthValue} ` +
  3524.                         `(current directory + ${depthValue} sublevels)`, 
  3525.                         'info'
  3526.                     );
  3527.                 }
  3528.             });
  3529.  
  3530.             this.domElements.maxDepth.addEventListener('input', (e) => {
  3531.                 if (this.domElements.customDepth.checked && !recursiveSearch.checked) {
  3532.                     const value = Math.min(99, Math.max(1, parseInt(e.target.value) || 1));
  3533.                     e.target.value = value;
  3534.                     this.state.maxDepth = value;
  3535.                     this.addLogEntry(
  3536.                         `Directory scanning depth updated: ${value} ` +
  3537.                         `(current directory + ${value} sublevels)`, 
  3538.                         'info'
  3539.                     );
  3540.                 }
  3541.             });
  3542.  
  3543.             pauseBtn.addEventListener('click', () => {
  3544.                 this.state.isPaused = true;
  3545.                 this.updateActivityIndicator('paused');
  3546.                 pauseBtn.style.display = 'none';
  3547.                 resumeBtn.style.display = 'flex';
  3548.                 
  3549.                 generateBtn.innerHTML = `
  3550.                     <div class="M3Unator-spinner" style="animation-play-state: paused;"></div>
  3551.                     <span>Scan paused</span>
  3552.                 `;
  3553.                 
  3554.                 this.showToast('Scan paused', 'warning');
  3555.                 this.addLogEntry('Scan paused...', 'warning');
  3556.             });
  3557.  
  3558.             resumeBtn.addEventListener('click', () => {
  3559.                 this.state.isPaused = false;
  3560.                 this.updateActivityIndicator('active');
  3561.                 resumeBtn.style.display = 'none';
  3562.                 pauseBtn.style.display = 'flex';
  3563.                 
  3564.                 generateBtn.innerHTML = `
  3565.                     <div class="M3Unator-spinner"></div>
  3566.                     <span>Creating...</span>
  3567.                 `;
  3568.                 
  3569.                 this.showToast('Scan resumed', 'success');
  3570.                 this.addLogEntry('Scan in progress...', 'success');
  3571.             });
  3572.  
  3573.             cancelBtn.addEventListener('click', () => {
  3574.                 this.state.isGenerating = false;
  3575.                 this.state.isPaused = false;
  3576.                 this.updateActivityIndicator('cancelled');
  3577.                 
  3578.                 setTimeout(() => {
  3579.                     this.reset({ isCancelled: true, enableToggles: true });
  3580.                 this.showToast('Scan cancelled', 'warning');
  3581.                 }, 100);
  3582.             });
  3583.  
  3584.             generateBtn.addEventListener('click', async () => {
  3585.                 const playlistName = this.sanitizeInput(playlistInput.value.trim());
  3586.  
  3587.                 if (!playlistName) {
  3588.                     this.showToast('Please enter a valid playlist name', 'warning');
  3589.                     playlistInput.focus();
  3590.                     return;
  3591.                 }
  3592.  
  3593.                 if (!this.state.includeVideo && !this.state.includeAudio) {
  3594.                     this.showToast('Please select at least one media type', 'warning');
  3595.                     return;
  3596.                 }
  3597.  
  3598.                 try {
  3599.                     this.entries = [];
  3600.                     this.seenUrls.clear();
  3601.                     this.logCount = 0;
  3602.                     if (this.domElements.scanLog) {
  3603.                         this.domElements.scanLog.innerHTML = '';
  3604.                     }
  3605.                     this.state.stats = JSON.parse(JSON.stringify(this.initialStats));
  3606.  
  3607.                     this.state.isGenerating = true;
  3608.                     this.state.isPaused = false;
  3609.                     this.updateActivityIndicator('active');
  3610.                     this.showToast('Scan started', 'success');
  3611.                     
  3612.                     generateBtn.disabled = true;
  3613.                     generateBtn.innerHTML = `
  3614.                         <div class="M3Unator-spinner"></div>
  3615.                         <span>Creating...</span>
  3616.                     `;
  3617.  
  3618.                     this.domElements.includeVideo.disabled = true;
  3619.                     this.domElements.includeAudio.disabled = true;
  3620.                     this.domElements.recursiveSearch.disabled = true;
  3621.                     this.domElements.currentDepth.disabled = true;
  3622.                     this.domElements.customDepth.disabled = true;
  3623.                     this.domElements.maxDepth.disabled = true;
  3624.  
  3625.                     controls.style.display = 'flex';
  3626.                     controls.classList.add('active');
  3627.                     
  3628.                     if (pauseBtn) {
  3629.                         pauseBtn.style.display = 'flex';
  3630.                         resumeBtn.style.display = 'none';
  3631.                         cancelBtn.style.display = 'flex';
  3632.                     }
  3633.  
  3634.                     this.domElements.statsBar.style.display = 'block';
  3635.                     this.domElements.statsBar.classList.add('active');
  3636.  
  3637.                     const entries = await this.scanDirectory(window.location.href, '', 0);
  3638.  
  3639.                     if (!this.state.isGenerating) {
  3640.                         return;
  3641.                     }
  3642.  
  3643.                     if (entries.length === 0) {
  3644.                         this.state.isGenerating = false;
  3645.                         this.updateActivityIndicator('cancelled');
  3646.                         this.showToast('No media files found', 'error');
  3647.                         this.reset({ isCancelled: true });
  3648.                         return;
  3649.                     }
  3650.  
  3651.                     this.addLogEntry(`Total ${entries.length} files found.`, 'success');
  3652.                     this.updateCounter(entries.length);
  3653.  
  3654.                     const content = this.createPlaylist(entries);
  3655.                     const fileName = `${playlistName}.${this.state.selectedFormat}`;
  3656.  
  3657.                     const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
  3658.                     const url = URL.createObjectURL(blob);
  3659.                     const a = document.createElement('a');
  3660.                     a.href = url;
  3661.                     a.download = fileName;
  3662.                     document.body.appendChild(a);
  3663.                     a.click();
  3664.                     document.body.removeChild(a);
  3665.                     URL.revokeObjectURL(url);
  3666.  
  3667.                     this.showToast(`Playlist "${fileName}" created successfully`, 'success');
  3668.                     this.updateActivityIndicator('completed');
  3669.                     this.reset({ keepLogs: true, keepUI: true, enableToggles: true });
  3670.  
  3671.                 } catch (error) {
  3672.                     this.state.isGenerating = false;
  3673.                     this.state.isPaused = false;
  3674.                     this.updateActivityIndicator('cancelled');
  3675.                     console.error('Error creating playlist:', error);
  3676.                     this.addLogEntry(`Error: ${error.message}`, 'error');
  3677.                     this.showToast('Error creating playlist', 'error');
  3678.                     this.reset({ isCancelled: true });
  3679.                 }
  3680.             });
  3681.         }
  3682.  
  3683.         reset(options = {}) {
  3684.             const {
  3685.                 isCancelled = false,
  3686.                 uiOnly = false,
  3687.                 keepLogs = false,
  3688.                 keepUI = false,
  3689.                 enableToggles = false,
  3690.                 wasGenerating = this.state.isGenerating
  3691.             } = options;
  3692.  
  3693.             // Save current state before updating
  3694.             const wasPaused = this.state.isPaused;
  3695.             
  3696.             this.state.isGenerating = false;
  3697.             this.state.isPaused = false;
  3698.             
  3699.             // Update activity indicator
  3700.             if (isCancelled || wasPaused) {
  3701.                 this.updateActivityIndicator('cancelled');
  3702.             } else if (wasGenerating) {
  3703.                 this.updateActivityIndicator('completed');
  3704.             } else {
  3705.                 this.updateActivityIndicator(null);
  3706.             }
  3707.             
  3708.             if (!uiOnly) {
  3709.                 this.entries = [];
  3710.                 this.seenUrls.clear();
  3711.                 
  3712.                 if (!keepLogs) {
  3713.                     this.logCount = 0;
  3714.                     if (this.domElements.scanLog) {
  3715.                         this.domElements.scanLog.innerHTML = '';
  3716.                     }
  3717.                     if (this.domElements.logCounter) {
  3718.                         this.domElements.logCounter.textContent = '0';
  3719.                     }
  3720.                 }
  3721.  
  3722.                 if (wasGenerating && !isCancelled) {
  3723.                     const stats = this.domElements.stats;
  3724.                     const summary = [
  3725.                         `Scan completed:`,
  3726.                         `• Video files: ${stats.videoFiles.textContent}`,
  3727.                         `• Audio files: ${stats.audioFiles.textContent}`,
  3728.                         `• Scanned directories: ${stats.directories.textContent}`,
  3729.                         `• Maximum depth: ${stats.depthLevel.textContent}`,
  3730.                         stats.errors.textContent > 0 ? `• Errors: ${stats.errors.textContent} (${this.state.stats.errors.skipped} skipped)` : null
  3731.                     ].filter(Boolean).join('\n');
  3732.  
  3733.                     this.addLogEntry(summary, 'final');
  3734.                 }
  3735.             }
  3736.             
  3737.             const elements = this.domElements;
  3738.             
  3739.             if (elements.generateBtn) {
  3740.                 elements.generateBtn.disabled = false;
  3741.                 elements.generateBtn.innerHTML = `${this.icons.download}<span>Create Playlist</span>`;
  3742.             }
  3743.  
  3744.             if (elements.controls) {
  3745.                 elements.controls.style.display = 'none';
  3746.                 elements.controls.classList.remove('active');
  3747.                 
  3748.                 const pauseBtn = elements.controls.querySelector('.M3Unator-control-btn.pause');
  3749.                 const resumeBtn = elements.controls.querySelector('.M3Unator-control-btn.resume');
  3750.                 const cancelBtn = elements.controls.querySelector('.M3Unator-control-btn.cancel');
  3751.                 
  3752.                 if (pauseBtn) pauseBtn.style.display = 'none';
  3753.                 if (resumeBtn) resumeBtn.style.display = 'none';
  3754.                 if (cancelBtn) cancelBtn.style.display = 'none';
  3755.             }
  3756.  
  3757.             if (enableToggles) {
  3758.                 if (elements.includeVideo) elements.includeVideo.disabled = false;
  3759.                 if (elements.includeAudio) elements.includeAudio.disabled = false;
  3760.                 if (elements.recursiveSearch) elements.recursiveSearch.disabled = false;
  3761.                 if (elements.currentDepth) elements.currentDepth.disabled = false;
  3762.                 if (elements.customDepth) elements.customDepth.disabled = false;
  3763.                 if (elements.maxDepth) elements.maxDepth.disabled = elements.customDepth ? !elements.customDepth.checked : true;
  3764.             }
  3765.             
  3766.             if (uiOnly) return;
  3767.  
  3768.             if (isCancelled) {
  3769.                 this.state.stats = JSON.parse(JSON.stringify(this.initialStats));
  3770.  
  3771.                 if (!keepLogs) {
  3772.                     if (elements.scanLog) {
  3773.                         elements.scanLog.innerHTML = '';
  3774.                         elements.scanLog.classList.add('collapsed');
  3775.                     }
  3776.  
  3777.                     if (elements.logToggle) {
  3778.                         elements.logToggle.classList.remove('active');
  3779.                     }
  3780.  
  3781.                     if (this.domElements.stats) {
  3782.                         Object.entries(this.domElements.stats).forEach(([key, element]) => {
  3783.                             if (element) {
  3784.                                 element.textContent = '0';
  3785.                                 const statContainer = element.closest('.M3Unator-stat');
  3786.                                 if (statContainer) {
  3787.                                     statContainer.style.opacity = '0.5';
  3788.                                     if (key === 'depthLevel') {
  3789.                                         statContainer.dataset.progress = '';
  3790.                                         statContainer.title = 'Depth Level: 0';
  3791.                                     }
  3792.                                 }
  3793.                             }
  3794.                         });
  3795.                     }
  3796.                 }
  3797.             }
  3798.  
  3799.             if (elements.recursiveSearch) {
  3800.                 elements.recursiveSearch.checked = true;
  3801.                 this.state.recursiveSearch = true;
  3802.                 this.state.maxDepth = -1;
  3803.             }
  3804.  
  3805.             if (elements.currentDepth) {
  3806.                 elements.currentDepth.checked = false;
  3807.             }
  3808.  
  3809.             if (elements.customDepth) {
  3810.                 elements.customDepth.checked = false;
  3811.             }
  3812.  
  3813.             if (elements.maxDepth) {
  3814.                 elements.maxDepth.disabled = true;
  3815.                 elements.maxDepth.value = '1';
  3816.             }
  3817.  
  3818.             if (elements.depthControls) {
  3819.                 elements.depthControls.classList.remove('active');
  3820.             }
  3821.         }
  3822.  
  3823.         handleError(error, context = '') {
  3824.             let userMessage = 'An error occurred';
  3825.             let logMessage = error.message;
  3826.             let type = 'error';
  3827.  
  3828.             switch (true) {
  3829.                 case error.name === 'AbortError':
  3830.                     userMessage = 'Server not responding, operation timed out';
  3831.                     logMessage = `Timeout: ${context}`;
  3832.                     type = 'warning';
  3833.                     break;
  3834.  
  3835.                 case error.message.includes('HTTP error'):
  3836.                     const status = error.message.match(/\d+/)?.[0];
  3837.                     switch (status) {
  3838.                         case '403':
  3839.                             userMessage = 'Access denied to this directory';
  3840.                             break;
  3841.                         case '404':
  3842.                             userMessage = 'Directory or file not found';
  3843.                             break;
  3844.                         case '429':
  3845.                             userMessage = 'Too many requests, please wait a while';
  3846.                             break;
  3847.                         case '500':
  3848.                         case '502':
  3849.                         case '503':
  3850.                             userMessage = 'Server is currently unable to respond, please try again later';
  3851.                             break;
  3852.                         default:
  3853.                             userMessage = 'Error communicating with server';
  3854.                     }
  3855.                     logMessage = `${error.message} (${context})`;
  3856.                     break;
  3857.  
  3858.                 case error.message.includes('decode'):
  3859.                     userMessage = 'Filename or path could not be read';
  3860.                     logMessage = `Decode error: ${context} - ${error.message}`;
  3861.                     type = 'warning';
  3862.                     break;
  3863.  
  3864.                 case error.message.includes('NetworkError'):
  3865.                     userMessage = 'Network connection error, please check your connection';
  3866.                     logMessage = `Network error: ${context}`;
  3867.                     break;
  3868.  
  3869.                 case error.message.includes('SecurityError'):
  3870.                     userMessage = 'Operation not allowed due to security restrictions';
  3871.                     logMessage = `Security error: ${context}`;
  3872.                     break;
  3873.  
  3874.                 default:
  3875.                     userMessage = 'Unexpected error occurred';
  3876.                     logMessage = `${error.name}: ${error.message} (${context})`;
  3877.             }
  3878.  
  3879.             console.error(`[${context}]`, error);
  3880.  
  3881.             this.showToast(userMessage, type);
  3882.  
  3883.             this.addLogEntry(logMessage, type);
  3884.  
  3885.             this.state.stats.errors.total++;
  3886.         }
  3887.  
  3888.         async fetchWithRetry(url, options = {}, retries = 3) {
  3889.             let lastError;
  3890.             for (let i = 0; i < retries; i++) {
  3891.                 try {
  3892.                     const response = await fetch(url, {
  3893.                         ...options,
  3894.                         headers: {
  3895.                             'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
  3896.                             'Accept-Language': 'en-US,en;q=0.9',
  3897.                             'Connection': 'keep-alive',
  3898.                             'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'
  3899.                         },
  3900.                         timeout: options.timeout || 30000,
  3901.                         signal: options.signal
  3902.                     });
  3903.  
  3904.                     if (!response.ok) {
  3905.                         throw new Error(`HTTP error! Status: ${response.status}`);
  3906.                     }
  3907.  
  3908.                     const text = await response.text();
  3909.                     return {
  3910.                         decodedText: text,
  3911.                         status: response.status,
  3912.                         ok: response.ok
  3913.                     };
  3914.                 } catch (error) {
  3915.                     lastError = error;
  3916.                     if (error.name === 'AbortError' || error.message.includes('404')) {
  3917.                         throw error; // Throw these errors immediately
  3918.                     }
  3919.                     if (i < retries - 1) {
  3920.                         await new Promise(resolve => setTimeout(resolve, Math.pow(2, i) * 1000));
  3921.                         continue;
  3922.                     }
  3923.                 }
  3924.             }
  3925.             throw lastError;
  3926.         }
  3927.  
  3928.         sanitizeInput(input) {
  3929.             if (!input || typeof input !== 'string') {
  3930.                 return '';
  3931.             }
  3932.  
  3933.             const sanitized = input
  3934.                 .replace(/[<>:"\/\\|?*\x00-\x1F]/g, '')
  3935.                 .trim()
  3936.                 .replace(/[\x00-\x1F\x7F]/g, '')
  3937.                 .replace(/[\u200B-\u200D\uFEFF]/g, '')
  3938.                 .replace(/[^\w\s\-_.()[\]{}#@!$%^&+=]/g, '');
  3939.  
  3940.             if (!sanitized) {
  3941.                 return 'playlist';
  3942.             }
  3943.  
  3944.             if (sanitized.length > 255) {
  3945.                 return sanitized.slice(0, 255);
  3946.             }
  3947.  
  3948.             return sanitized;
  3949.         }
  3950.  
  3951.         decodeString(str, type = 'both') {
  3952.             if (!str) return str;
  3953.             
  3954.             try {
  3955.                 let decoded = str;
  3956.                 
  3957.                 if (type === 'html' || type === 'both') {
  3958.                     decoded = decoded.replace(/&amp;/g, '&')
  3959.                      .replace(/&lt;/g, '<')
  3960.                      .replace(/&gt;/g, '>')
  3961.                      .replace(/&quot;/g, '"')
  3962.                      .replace(/&#039;/g, "'")
  3963.                      .replace(/&#x27;/g, "'")
  3964.                      .replace(/&#x2F;/g, "/");
  3965.         }
  3966.  
  3967.                 if (type === 'url' || type === 'both') {
  3968.             try {
  3969.                         decoded = decodeURIComponent(decoded);
  3970.             } catch (e) {
  3971.                         decoded = decoded.replace(/%([0-9A-F]{2})/gi, (match, hex) => {
  3972.                     try {
  3973.                         return String.fromCharCode(parseInt(hex, 16));
  3974.                     } catch {
  3975.                         return match;
  3976.                     }
  3977.                 });
  3978.                     }
  3979.                 }
  3980.                 
  3981.                 return decoded;
  3982.             } catch (error) {
  3983.                 console.warn('Decode error:', error);
  3984.                 return str;
  3985.             }
  3986.         }
  3987.  
  3988.         extractFileInfo(path) {
  3989.             try {
  3990.                 const decodedPath = this.decodeString(path);
  3991.                 const parts = decodedPath.split('/');
  3992.                 const fileName = parts.pop() || '';
  3993.                 const dirPath = parts.join('/');
  3994.                 
  3995.                 return {
  3996.                     fileName,
  3997.                     dirPath,
  3998.                     original: {
  3999.                         fileName: path.split('/').pop() || '',
  4000.                         dirPath: path.split('/').slice(0, -1).join('/')
  4001.                     }
  4002.                 };
  4003.             } catch (error) {
  4004.                 this.handleError(error, `Path decode error: ${path}`);
  4005.                 const parts = path.split('/');
  4006.                 return {
  4007.                     fileName: parts.pop() || '',
  4008.                     dirPath: parts.join('/'),
  4009.                     original: {
  4010.                         fileName: parts.pop() || '',
  4011.                         dirPath: parts.join('/')
  4012.                     }
  4013.                 };
  4014.             }
  4015.         }
  4016.  
  4017.         normalizeUrl(url) {
  4018.             let normalized = url.replace(/([^:]\/)\/+/g, "$1");
  4019.             return normalized.endsWith('/') ? normalized : normalized + '/';
  4020.         }
  4021.  
  4022.         isMediaFile(fileName, type) {
  4023.             const lowerFileName = fileName.toLowerCase();
  4024.             return type === 'video'
  4025.                 ? this.videoFormats.some(ext => lowerFileName.endsWith(ext))
  4026.                 : this.audioFormats.some(ext => lowerFileName.endsWith(ext));
  4027.         }
  4028.  
  4029.         resetCurrentStats() {
  4030.             this.state.stats.files.video.current = 0;
  4031.             this.state.stats.files.audio.current = 0;
  4032.         }
  4033.  
  4034.         updateFileStats(type) {
  4035.             this.state.stats.files[type].total++;
  4036.             this.state.stats.files[type].current++;
  4037.         }
  4038.  
  4039.         getCurrentStatsText() {
  4040.             const { video, audio } = this.state.stats.files;
  4041.             const details = [];
  4042.  
  4043.             if (video.current > 0) details.push(`${video.current} video`);
  4044.             if (audio.current > 0) details.push(`${audio.current} audio`);
  4045.  
  4046.             return details.join(' and ');
  4047.         }
  4048.  
  4049.         async scanDirectory(url, currentPath = '', depth = 0) {
  4050.             try {
  4051.                 this.resetCurrentStats();
  4052.  
  4053.                 if (!this.state.isGenerating || this.entries.length >= this.state.maxEntries) {
  4054.                     return this.entries;
  4055.                 }
  4056.  
  4057.                 while (this.state.isPaused && this.state.isGenerating) {
  4058.                     await new Promise(resolve => setTimeout(resolve, 100));
  4059.                 }
  4060.  
  4061.                 // Encode special characters properly
  4062.                 const normalizedUrl = this.normalizeUrl(url).replace(/#/g, '%23')
  4063.                     .replace(/\s+/g, '%20')
  4064.                     .replace(/\[/g, '%5B')
  4065.                     .replace(/\]/g, '%5D')
  4066.                     .replace(/'/g, '%27')
  4067.                     .replace(/"/g, '%22');
  4068.  
  4069.                 if (depth > this.state.stats.directories.depth) {
  4070.                     this.state.stats.directories.depth = depth;
  4071.                 }
  4072.  
  4073.                 this.state.stats.directories.total++;
  4074.  
  4075.                 this.addLogEntry(`Scanning directory (level ${depth}): ${decodeURIComponent(normalizedUrl)}`);
  4076.  
  4077.                 if (this.seenUrls.has(normalizedUrl)) {
  4078.                     this.addLogEntry(`This directory was previously scanned: ${decodeURIComponent(normalizedUrl)}`);
  4079.                     return this.entries;
  4080.                 }
  4081.  
  4082.                 this.seenUrls.add(normalizedUrl);
  4083.                 if (this.seenUrls.size > this.state.maxSeenUrls) {
  4084.                     const keepCount = Math.floor(this.state.maxSeenUrls * 0.75);
  4085.                     const urlsArray = Array.from(this.seenUrls);
  4086.                     const keepUrls = urlsArray.slice(-keepCount);
  4087.                     this.seenUrls = new Set(keepUrls);
  4088.                     this.addLogEntry(
  4089.                         `Cache cleared (${urlsArray.length} -> ${keepUrls.length})`,
  4090.                         'info'
  4091.                     );
  4092.                 }
  4093.  
  4094.                 let response;
  4095.                 try {
  4096.                     response = await this.fetchWithRetry(normalizedUrl, {
  4097.                         signal: null, // Remove cancel signal
  4098.                         timeout: 30000 // 30 second timeout
  4099.                     });
  4100.                 } catch (error) {
  4101.                     if (error.name === 'AbortError') {
  4102.                         this.addLogEntry(`Request cancelled: ${decodeURIComponent(normalizedUrl)}`, 'warning');
  4103.                     } else if (error.message.includes('404')) {
  4104.                         this.addLogEntry(`Directory not found: ${decodeURIComponent(normalizedUrl)}`, 'warning');
  4105.                     } else {
  4106.                         this.addLogEntry(`Connection error: ${error.message}`, 'error');
  4107.                     }
  4108.                     return this.entries;
  4109.                 }
  4110.  
  4111.                 const html = response.decodedText;
  4112.                 const parser = new DOMParser();
  4113.                 const doc = parser.parseFromString(html, 'text/html');
  4114.                 
  4115.                 const isLiteSpeed = doc.querySelector('div#table-list') !== null;
  4116.                 let hrefs = [];
  4117.                 
  4118.                 if (isLiteSpeed) {
  4119.                     const rows = doc.querySelectorAll('#table-content tr');
  4120.                     rows.forEach(row => {
  4121.                         const linkElement = row.querySelector('a');
  4122.                         if (linkElement && !linkElement.textContent.includes('Parent Directory')) {
  4123.                             const href = linkElement.getAttribute('href');
  4124.                             if (href) hrefs.push(href);
  4125.                         }
  4126.                     });
  4127.                 } else {
  4128.                     const hrefRegex = /href="([^"]+)"/gi;
  4129.                     const matches = html.matchAll(hrefRegex);
  4130.                     hrefs = Array.from(matches, m => m[1]).filter(href =>
  4131.                         href &&
  4132.                         !href.startsWith('?') &&
  4133.                         !href.startsWith('/') &&
  4134.                         href !== '../' &&
  4135.                         !href.includes('Parent Directory')
  4136.                     );
  4137.                 }
  4138.  
  4139.                 // Separate directories and files
  4140.                 const directories = [];
  4141.                 const files = [];
  4142.  
  4143.                 for (const href of hrefs) {
  4144.                     if (href.endsWith('/')) {
  4145.                         directories.push(href);
  4146.                     } else {
  4147.                         files.push(href);
  4148.                     }
  4149.                 }
  4150.  
  4151.                 // Process files in batches
  4152.                 const batchSize = 100; // Increased from 50 to 100
  4153.                 for (let i = 0; i < files.length; i += batchSize) {
  4154.                     if (!this.state.isGenerating || this.entries.length >= this.state.maxEntries) break;
  4155.  
  4156.                     const batch = files.slice(i, i + batchSize);
  4157.                     const batchProgress = {
  4158.                         total: batch.length,
  4159.                         processed: 0,
  4160.                         success: 0,
  4161.                         errors: 0
  4162.                     };
  4163.  
  4164.                     // Use Set for better performance
  4165.                     const processedUrls = new Set();
  4166.  
  4167.                     await Promise.all(batch.map(async href => {
  4168.                         try {
  4169.                             // Skip if URL was previously processed
  4170.                             const fullUrl = new URL(href, normalizedUrl).toString();
  4171.                             if (processedUrls.has(fullUrl)) return;
  4172.                             processedUrls.add(fullUrl);
  4173.  
  4174.                             const decodedHref = this.decodeString(href);
  4175.                             const { fileName } = this.extractFileInfo(decodedHref);
  4176.                             const fullPath = currentPath ? `${currentPath}/${fileName}` : fileName;
  4177.  
  4178.                             this.state.stats.totalFiles = (this.state.stats.totalFiles || 0) + 1;
  4179.  
  4180.                             // Check file type using Map
  4181.                             const mediaType = this.isMediaFileOptimized(fileName);
  4182.                             
  4183.                             if (mediaType && ((mediaType === 'video' && this.state.includeVideo) || 
  4184.                                             (mediaType === 'audio' && this.state.includeAudio))) {
  4185.                                 if (mediaType === 'video') {
  4186.                                     this.updateFileStats('video');
  4187.                                 } else {
  4188.                                     this.updateFileStats('audio');
  4189.                                 }
  4190.  
  4191.                                 this.entries.push({
  4192.                                     title: fullPath,
  4193.                                     url: fullUrl
  4194.                                 });
  4195.                                 batchProgress.success++;
  4196.                             }
  4197.                         } catch (error) {
  4198.                             console.error('URL processing error:', error);
  4199.                             this.state.stats.errors.total++;
  4200.                             batchProgress.errors++;
  4201.                         } finally {
  4202.                             batchProgress.processed++;
  4203.                             
  4204.                             // Update progress every 20 operations (instead of 10)
  4205.                             if (batchProgress.processed % 20 === 0 || batchProgress.processed === batchProgress.total) {
  4206.                                 const progress = Math.floor((batchProgress.processed / batchProgress.total) * 100);
  4207.                                 this.addLogEntry(
  4208.                                     `Batch Processing: ${progress}% (${batchProgress.processed}/${batchProgress.total}, ` +
  4209.                                     `Success: ${batchProgress.success}, Error: ${batchProgress.errors})`,
  4210.                                     'info'
  4211.                                 );
  4212.                             }
  4213.                         }
  4214.                     }));
  4215.  
  4216.                     // Increase interval for memory cleanup
  4217.                     if (i > 0 && i % (batchSize * 20) === 0) {
  4218.                         global.gc && global.gc();
  4219.                     }
  4220.                 }
  4221.  
  4222.                 // Scan directories in parallel
  4223.                 const shouldScanSubdir = 
  4224.                     this.state.maxDepth === -1 ||
  4225.                     (this.state.maxDepth > 0 && depth < this.state.maxDepth);
  4226.  
  4227.                 if (shouldScanSubdir && directories.length > 0) {
  4228.                     const parallelLimit = 15; // Parallel limit increased to 15
  4229.                     const queue = [...directories];
  4230.                     const activeRequests = new Set();
  4231.                     
  4232.                     while (queue.length > 0 || activeRequests.size > 0) {
  4233.                         // Start new request if there are items in queue and active request limit is not reached
  4234.                         while (queue.length > 0 && activeRequests.size < parallelLimit) {
  4235.                             const dir = queue.shift();
  4236.                             try {
  4237.                                 const decodedDir = this.decodeString(dir);
  4238.                                 const fullUrl = new URL(decodedDir, normalizedUrl).toString();
  4239.                                 const { fileName } = this.extractFileInfo(decodedDir);
  4240.                                 const fullPath = currentPath ? `${currentPath}/${fileName}` : fileName;
  4241.  
  4242.                                 const promise = this.scanDirectory(fullUrl, fullPath, depth + 1)
  4243.                                     .finally(() => {
  4244.                                         activeRequests.delete(promise);
  4245.                                     });
  4246.  
  4247.                                 activeRequests.add(promise);
  4248.                                 this.addLogEntry(`Entering subdirectory: ${fullPath}`);
  4249.                             } catch (error) {
  4250.                                 console.error('Directory scanning error:', error);
  4251.                                 this.state.stats.errors.total++;
  4252.                             }
  4253.                         }
  4254.  
  4255.                         // Wait for one of the active requests to complete
  4256.                         if (activeRequests.size > 0) {
  4257.                             await Promise.race(activeRequests);
  4258.                         }
  4259.                     }
  4260.                 }
  4261.  
  4262.                 this.updateCounter(this.state.stats.totalFiles);
  4263.                 return this.entries;
  4264.  
  4265.             } catch (error) {
  4266.                 this.state.stats.errors.total++;
  4267.                 this.addLogEntry(`Scan error (${currentPath || url}): ${error.message}`, 'error');
  4268.                 return this.entries;
  4269.             }
  4270.         }
  4271.  
  4272.         createPlaylist(entries) {
  4273.             let content = '#EXTM3U\n';
  4274.             
  4275.             const decodedEntries = entries.map(entry => {
  4276.                 try {
  4277.                     let title = this.decodeString(entry.title);
  4278.                     const depth = (title.match(/\//g) || []).length;
  4279.                     const isVideo = this.videoFormats.some(ext => title.toLowerCase().endsWith(ext));
  4280.                     const isAudio = this.audioFormats.some(ext => title.toLowerCase().endsWith(ext));
  4281.                     
  4282.                     return {
  4283.                         ...entry,
  4284.                         decodedTitle: title,
  4285.                         depth: depth,
  4286.                         isVideo: isVideo,
  4287.                         isAudio: isAudio
  4288.                     };
  4289.                 } catch (error) {
  4290.                     return {
  4291.                         ...entry,
  4292.                         decodedTitle: entry.title,
  4293.                         depth: 0,
  4294.                         isVideo: false,
  4295.                         isAudio: false
  4296.                     };
  4297.                 }
  4298.             });
  4299.  
  4300.             const videoEntries = decodedEntries.filter(entry => entry.isVideo);
  4301.             const audioEntries = decodedEntries.filter(entry => entry.isAudio);
  4302.  
  4303.             const apacheSort = (a, b) => {
  4304.                 if (a.depth !== b.depth) {
  4305.                     return a.depth - b.depth;
  4306.                 }
  4307.  
  4308.                 const aStartsWithNumber = /^\d/.test(a.decodedTitle);
  4309.                 const bStartsWithNumber = /^\d/.test(b.decodedTitle);
  4310.                 
  4311.                 if (aStartsWithNumber !== bStartsWithNumber) {
  4312.                     return aStartsWithNumber ? -1 : 1;
  4313.                 }
  4314.  
  4315.                 return a.decodedTitle.localeCompare(b.decodedTitle, undefined, {
  4316.                     numeric: true,
  4317.                     sensitivity: 'base'
  4318.                 });
  4319.             };
  4320.  
  4321.             const sortedVideoEntries = videoEntries.sort(apacheSort);
  4322.             const sortedAudioEntries = audioEntries.sort(apacheSort);
  4323.  
  4324.             const sortedEntries = [...sortedVideoEntries, ...sortedAudioEntries];
  4325.  
  4326.             sortedEntries.forEach(entry => {
  4327.                 content += `#EXTINF:-1,${entry.decodedTitle}\n${entry.url}\n`;
  4328.             });
  4329.  
  4330.             return content;
  4331.         }
  4332.  
  4333.         addLogEntry(message, type = '') {
  4334.             if ((this.state.isPaused || !this.state.isGenerating) && type !== 'final') {
  4335.                 return;
  4336.             }
  4337.  
  4338.             let decodedMessage = message;
  4339.             try {
  4340.                 if (message.includes('http')) {
  4341.                     const urlRegex = /(https?:\/\/[^\s]+)/g;
  4342.                     decodedMessage = message.replace(urlRegex, (url) => {
  4343.                         try {
  4344.                             return decodeURIComponent(url);
  4345.                         } catch (e) {
  4346.                             return url;
  4347.                         }
  4348.                     });
  4349.                 }
  4350.             } catch (error) {
  4351.                 console.warn('Decode error:', error);
  4352.             }
  4353.  
  4354.             // Add only to cache
  4355.             this.logCache.add(decodedMessage, type);
  4356.  
  4357.             // Update UI every 10 logs
  4358.             if (this.logCache.stats.totalLogs % 10 === 0) {
  4359.                 this.updateLogUI();
  4360.             }
  4361.         }
  4362.  
  4363.         updateLogUI() {
  4364.             const scanLog = this.domElements.scanLog;
  4365.             if (!scanLog) return;
  4366.  
  4367.             // Add throttle for performance
  4368.             if (this._updateLogUITimeout) {
  4369.                 clearTimeout(this._updateLogUITimeout);
  4370.             }
  4371.  
  4372.             this._updateLogUITimeout = setTimeout(() => {
  4373.                 requestAnimationFrame(() => {
  4374.                     const wasAtBottom = Math.abs(scanLog.scrollHeight - scanLog.clientHeight - scanLog.scrollTop) < 50;
  4375.                     
  4376.                     // Use fragment to minimize DOM manipulation
  4377.                     const fragment = document.createDocumentFragment();
  4378.                     
  4379.                     // Show last 50 logs (instead of 100)
  4380.                     const recentLogs = this.logCache.logs.slice(-50);
  4381.                     
  4382.                     recentLogs.forEach(log => {
  4383.                         const div = document.createElement('div');
  4384.                         div.className = `M3Unator-log-entry ${log.type}`;
  4385.                         div.innerHTML = `
  4386.                             <span class="M3Unator-log-time">${log.timestamp}</span>
  4387.                             <span class="M3Unator-log-content">${log.message}</span>
  4388.                         `;
  4389.                         fragment.appendChild(div);
  4390.                     });
  4391.  
  4392.                     scanLog.innerHTML = '';
  4393.                     scanLog.appendChild(fragment);
  4394.  
  4395.                     if (wasAtBottom) {
  4396.                         scanLog.scrollTop = scanLog.scrollHeight;
  4397.                     }
  4398.                 });
  4399.             }, 100); // 100ms throttle
  4400.         }
  4401.  
  4402.         generateScanReport() {
  4403.             const stats = this.state.stats;
  4404.             const logCache = this.logCache;
  4405.             
  4406.             const summary = [
  4407.                 `📊 Scan Summary`,
  4408.                 `───────────────`,
  4409.                 `📁 Total Files: ${stats.totalFiles}`,
  4410.                 `🎥 Video Files: ${stats.files.video.total}`,
  4411.                 `🎵 Audio Files: ${stats.files.audio.total}`,
  4412.                 `📂 Directories: ${stats.directories.total}`,
  4413.                 `↕️ Maximum Depth: ${stats.directories.depth}`,
  4414.                 stats.errors.total > 0 ? 
  4415.                     `⚠️ Errors: ${stats.errors.total} (${stats.errors.skipped} skipped)` : 
  4416.                     null,
  4417.                 ``,
  4418.                 `📝 Log Statistics`,
  4419.                 `───────────────`,
  4420.                 `Total Logs: ${logCache.stats.totalLogs}`,
  4421.                 logCache.stats.skippedLogs > 0 ? 
  4422.                     `Skipped Logs: ${logCache.stats.skippedLogs}` :
  4423.                     null,
  4424.                 ``,
  4425.                 `🔍 Last ${logCache.maxSize} Log Entries`,
  4426.                 `───────────────`,
  4427.                 ...logCache.logs.map(log => 
  4428.                     `[${log.timestamp}] ${log.type === 'error' ? '❌' : 
  4429.                                        log.type === 'warning' ? '⚠️' : 
  4430.                                        log.type === 'success' ? '✅' : 'ℹ️'} ${log.message}`)
  4431.             ].filter(Boolean).join('\n');
  4432.  
  4433.             return summary;
  4434.         }
  4435.  
  4436.         updateCounter(count) {
  4437.             if (!this.domElements.stats || !this.domElements.statsBar) {
  4438.                 return;
  4439.             }
  4440.  
  4441.             const stats = this.state.stats;
  4442.             const elements = this.domElements.stats;
  4443.             const statsBar = this.domElements.statsBar;
  4444.  
  4445.             statsBar.style.display = 'block';
  4446.             
  4447.             const updates = {
  4448.                 'totalFiles': count,
  4449.                 'videoFiles': stats.files.video.total,
  4450.                 'audioFiles': stats.files.audio.total,
  4451.                 'directories': stats.directories.total,
  4452.                 'depthLevel': stats.directories.depth,
  4453.                 'errors': stats.errors.total
  4454.             };
  4455.  
  4456.             Object.entries(updates).forEach(([key, value]) => {
  4457.                 const element = elements[key];
  4458.                 if (element) {
  4459.                     element.textContent = value;
  4460.                     
  4461.                     const statContainer = element.closest('.M3Unator-stat');
  4462.                     if (statContainer) {
  4463.                         statContainer.style.opacity = value > 0 ? '1' : '0.5';
  4464.                         
  4465.                         if (key === 'depthLevel') {
  4466.                             const maxDepth = this.state.maxDepth || 0;
  4467.                             if (maxDepth > 0) {
  4468.                                 const progress = (value / maxDepth) * 100;
  4469.                                 statContainer.dataset.progress = 
  4470.                                     progress >= 100 ? 'high' :
  4471.                                     progress >= 75 ? 'medium' :
  4472.                                     progress >= 50 ? 'low' : '';
  4473.                                 
  4474.                                 statContainer.title = `Depth Level: ${value}/${maxDepth}`;
  4475.                             } else {
  4476.                                 statContainer.dataset.progress = '';
  4477.                                 statContainer.title = `Depth Level: ${value}`;
  4478.                             }
  4479.                         }
  4480.                     }
  4481.                 }
  4482.             });
  4483.         }
  4484.  
  4485.         // Add new method for file type checking
  4486.         isMediaFileOptimized(fileName) {
  4487.             const extension = fileName.toLowerCase().split('.').pop();
  4488.             return this.extensionMap.get(extension);
  4489.         }
  4490.     }
  4491.  
  4492.     const generator = new PlaylistGenerator();
  4493.     generator.init();
  4494.  
  4495.     // Event listeners for info modal
  4496.     document.querySelector('.info-link').addEventListener('click', () => {
  4497.         document.querySelector('.info-modal').style.display = 'block';
  4498.         document.body.classList.add('modal-open');
  4499.     });
  4500.  
  4501.     document.querySelector('.info-close').addEventListener('click', () => {
  4502.         document.querySelector('.info-modal').style.display = 'none';
  4503.         document.body.classList.remove('modal-open');
  4504.     });
  4505.  
  4506.     window.addEventListener('click', (event) => {
  4507.         const modal = document.querySelector('.info-modal');
  4508.         if (event.target === modal) {
  4509.             modal.style.display = 'none';
  4510.             document.body.classList.remove('modal-open');
  4511.         }
  4512.     });
  4513.  
  4514.     // Event listener for playlist name input
  4515.     generator.domElements.playlistInput.addEventListener('input', (e) => {
  4516.         const dropdown = e.target.parentElement.querySelector('.M3Unator-dropdown');
  4517.         if (e.target.value.trim()) {
  4518.             dropdown.style.display = 'block';
  4519.         } else {
  4520.             dropdown.style.display = 'none';
  4521.         }
  4522.     });
  4523. })();