Refactor legacy modals to shared primitives

2026-10-27 07:52:24 +00:00 · 2025-10-10 21:49:49 -04:00
1 parent c631f2afba
commit 5f3209b410
@@ -14,27 +14,14 @@
    <!-- Application Form Modal -->
    <div
      id="nostrFormModal"
-      class="fixed inset-0 z-50 hidden"
-      style="background: transparent"
+      class="bv-modal hidden items-start justify-center overflow-y-auto"
    >
-      <!-- Dark/blur overlay -->
-      <div
-        class="absolute inset-0 z-10"
-        style="
-          background-color: rgba(0, 0, 0, 0.9);
-          backdrop-filter: blur(10px);
-          -webkit-backdrop-filter: blur(10px);
-        "
-      ></div>
+      <div class="bv-modal-backdrop" data-dismiss></div>

-      <!-- Outer container with full width and centered content -->
+      <!-- Inner content container -->
      <div
-        class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
+        class="bv-modal__panel relative my-0 w-full max-w-[90%] overflow-hidden rounded-lg bg-gray-900 lg:max-w-6xl"
      >
-        <!-- Inner content container -->
-        <div
-          class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
-        >
          <!-- Header bar with updated styling -->
          <div
            class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between border-b border-gray-700"
@@ -1,67 +1,51 @@
-<!-- components/bug-fix-form.html 
+<!-- components/bug-fix-form.html
 //    https://bitvid.network?modal=bug => open bugFixModal
 //    Admin: npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe
-//    Form: 
-//    Responses: 
+//    Form:
+//    Responses:
 -->
-<div
-  id="bugFixModal"
-  class="fixed inset-0 z-50 hidden"
-  style="background: transparent"
->
-  <!-- Dark/blur overlay -->
-  <div
-    class="absolute inset-0 z-10"
-    style="
-      background-color: rgba(0, 0, 0, 0.9);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-    "
-  ></div>
+<div id="bugFixModal" class="bv-modal hidden items-start justify-center overflow-y-auto">
+  <div class="bv-modal-backdrop" data-dismiss></div>

  <div
-    class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
+    class="bv-modal__panel relative my-0 w-full max-w-[90%] overflow-hidden rounded-lg bg-gray-900 lg:max-w-6xl"
  >
+    <!-- Header bar (sticky) with updated title styling -->
    <div
-      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
+      class="sticky top-0 flex items-center justify-between border-b border-gray-700 bg-gradient-to-b from-black/80 to-transparent p-4"
    >
-      <!-- Header bar (sticky) with updated title styling -->
-      <div
-        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between border-b border-gray-700"
+      <h2 class="pb-2 text-3xl font-extrabold tracking-wide text-white">
+        Bug Fix Form
+      </h2>
+      <button
+        id="closeBugFixModal"
+        class="flex h-10 w-10 items-center justify-center rounded-full bg-black/50 transition-all duration-200 backdrop-blur hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
      >
-        <h2 class="text-3xl font-extrabold text-white tracking-wide pb-2">
-          Bug Fix Form
-        </h2>
-        <button
-          id="closeBugFixModal"
-          class="flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 transition-all duration-200 backdrop-blur focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-6 w-6 text-gray-300"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="w-6 h-6 text-gray-300"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M6 18L18 6M6 6l12 12"
-            />
-          </svg>
-        </button>
-      </div>
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
+    </div>

-      <div class="p-6">
-        <div class="w-full" style="height: 80vh">
-          <iframe
-            src="./components/iframe_forms/iframe-bug-fix-form.html"
-            class="w-full h-full"
-            frameborder="0"
-            style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
-          ></iframe>
-        </div>
+    <div class="p-6">
+      <div class="w-full" style="height: 80vh">
+        <iframe
+          src="./components/iframe_forms/iframe-bug-fix-form.html"
+          class="h-full w-full"
+          frameborder="0"
+          style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
+        ></iframe>
      </div>
    </div>
  </div>
@@ -1,64 +1,51 @@
-<!-- components/content-appeals-form.html 
+<!-- components/content-appeals-form.html
     https://bitvid.network?modal=appeals => open contentAppealsModal
 -->
 <div
  id="contentAppealsModal"
-  class="fixed inset-0 z-50 hidden"
-  style="background: transparent"
+  class="bv-modal hidden items-start justify-center overflow-y-auto"
 >
-  <!-- Dark/blur overlay -->
-  <div
-    class="absolute inset-0 z-10"
-    style="
-      background-color: rgba(0, 0, 0, 0.9);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-    "
-  ></div>
+  <div class="bv-modal-backdrop" data-dismiss></div>

  <div
-    class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
+    class="bv-modal__panel relative my-0 w-full max-w-[90%] overflow-hidden rounded-lg bg-gray-900 lg:max-w-6xl"
  >
+    <!-- Header bar (sticky) with improved title styling -->
    <div
-      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
+      class="sticky top-0 flex items-center justify-between border-b border-gray-700 bg-gradient-to-b from-black/80 to-transparent p-4"
    >
-      <!-- Header bar (sticky) with improved title styling -->
-      <div
-        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between border-b border-gray-700"
+      <h2 class="pb-2 text-3xl font-extrabold tracking-wide text-white">
+        Content Appeals Form
+      </h2>
+      <button
+        id="closeContentAppealsModal"
+        class="flex h-10 w-10 items-center justify-center rounded-full bg-black/50 transition-all duration-200 backdrop-blur hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
      >
-        <h2 class="text-3xl font-extrabold text-white tracking-wide pb-2">
-          Content Appeals Form
-        </h2>
-        <button
-          id="closeContentAppealsModal"
-          class="flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 transition-all duration-200 backdrop-blur focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-6 w-6 text-gray-300"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="w-6 h-6 text-gray-300"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M6 18L18 6M6 6l12 12"
-            />
-          </svg>
-        </button>
-      </div>
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
+    </div>

-      <div class="p-6">
-        <div class="w-full" style="height: 80vh">
-          <iframe
-            src="./components/iframe_forms/iframe-content-appeals-form.html"
-            class="w-full h-full"
-            frameborder="0"
-            style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
-          ></iframe>
-        </div>
+    <div class="p-6">
+      <div class="w-full" style="height: 80vh">
+        <iframe
+          src="./components/iframe_forms/iframe-content-appeals-form.html"
+          class="h-full w-full"
+          frameborder="0"
+          style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
+        ></iframe>
      </div>
    </div>
  </div>
@@ -1,127 +1,112 @@
 <!-- Disclaimer Modal (wide, matching other modals) -->
 <div
  id="disclaimerModal"
-  class="fixed inset-0 z-50 hidden"
-  style="background: transparent"
+  class="bv-modal hidden items-start justify-center overflow-y-auto"
 >
-  <!-- Dark/blur overlay -->
-  <div
-    class="absolute inset-0 z-10"
-    style="
-      background-color: rgba(0, 0, 0, 0.9);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-    "
-  ></div>
+  <div class="bv-modal-backdrop" data-dismiss></div>

  <!-- Outer container with wide layout, just like content-appeals-form -->
  <div
-    class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
+    class="bv-modal__panel relative my-0 flex w-full max-w-[90%] flex-col overflow-hidden rounded-lg bg-gray-900 lg:max-w-6xl"
  >
-    <!-- The .modal-content, same classes: bg-gray-900, w-full max-w-[90%], etc. -->
+    <!-- Sticky top bar, if you want a top heading or 'X' button up here -->
    <div
-      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative flex flex-col"
-    >
-      <!-- Sticky top bar, if you want a top heading or 'X' button up here -->
-      <div
-        class="modal-header sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
-      >
-      </div>
+      class="modal-header sticky top-0 flex items-center justify-between bg-gradient-to-b from-black/80 to-transparent p-4"
+    ></div>

-      <!-- Main Content -->
-      <div class="modal-body flex-1 overflow-y-auto">
-        <!-- Scrollable disclaimers area -->
-        <div class="space-y-6 text-gray-300">
-          <!-- Example: Insert your disclaimers here -->
+    <!-- Main Content -->
+    <div class="modal-body flex-1 overflow-y-auto">
+      <!-- Scrollable disclaimers area -->
+      <div class="space-y-6 text-gray-300">
+        <!-- Example: Insert your disclaimers here -->

-          <div class="flex justify-center mb-8">
-            <img
-              src="assets/svg/bitvid-logo-dark-mode.svg"
-              alt="bitvid logo"
-              class="h-16"
-            />
-          </div>
-          <h2 class="text-2xl font-bold text-white mb-0">Welcome to bitvid</h2>
-          <!-- Warning Alert -->
-          <div
-            class="bg-yellow-900/20 border border-yellow-700/50 rounded-lg p-4 mb-6 flex items-start"
+        <div class="mb-8 flex justify-center">
+          <img
+            src="assets/svg/bitvid-logo-dark-mode.svg"
+            alt="bitvid logo"
+            class="h-16"
+          />
+        </div>
+        <h2 class="mb-0 text-2xl font-bold text-white">Welcome to bitvid</h2>
+        <!-- Warning Alert -->
+        <div
+          class="mb-6 flex items-start rounded-lg border border-yellow-700/50 bg-yellow-900/20 p-4"
+        >
+          <svg
+            class="mt-0.5 mr-3 h-5 w-5 flex-shrink-0 text-yellow-500"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
          >
-            <svg
-              class="h-5 w-5 text-yellow-500 mt-0.5 mr-3 flex-shrink-0"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-              />
-            </svg>
-            <p class="text-yellow-200">
-              This platform is currently in development and only supports Chrome
-              and Firefox-based browsers. Other browsers are not supported at
-              this time. You may encounter bugs or missing features. Give it a
-              sec. Videos might take 10 to 60 seconds to load initially.
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+            />
+          </svg>
+          <p class="text-yellow-200">
+            This platform is currently in development and only supports Chrome
+            and Firefox-based browsers. Other browsers are not supported at
+            this time. You may encounter bugs or missing features. Give it a
+            sec. Videos might take 10 to 60 seconds to load initially.
+          </p>
+        </div>
+        <p>
+          bitvid is a decentralized video platform where content is shared
+          directly between users. We want you to understand a few important
+          points before you continue:
+        </p>
+
+        <div class="space-y-4">
+          <div class="rounded-lg bg-gray-800 p-4">
+            <h3 class="mb-2 font-semibold text-white">Early Access Status</h3>
+            <p class="text-gray-400">
+              Currently, video posting is invite-only as we carefully scale
+              our platform. While anyone can watch videos, content creation is
+              limited to approved creators. This helps us maintain quality
+              content during our early stages.
            </p>
          </div>
-          <p>
-            bitvid is a decentralized video platform where content is shared
-            directly between users. We want you to understand a few important
-            points before you continue:
-          </p>
-
-          <div class="space-y-4">
-            <div class="bg-gray-800 rounded-lg p-4">
-              <h3 class="text-white font-semibold mb-2">Early Access Status</h3>
-              <p class="text-gray-400">
-                Currently, video posting is invite-only as we carefully scale
-                our platform. While anyone can watch videos, content creation is
-                limited to approved creators. This helps us maintain quality
-                content during our early stages.
-              </p>
-            </div>
-            <div class="bg-gray-800 rounded-lg p-4">
-              <h3 class="text-white font-semibold mb-2">
-                Content Responsibility & Moderation
-              </h3>
-              <p class="text-gray-400">
-                While we don't host videos directly, we maintain community
-                standards through access control. Users who violate our
-                guidelines may be blocked from accessing the platform. All
-                content must follow local laws and platform guidelines.
-              </p>
-            </div>
-            <div class="bg-gray-800 rounded-lg p-4">
-              <h3 class="text-white font-semibold mb-2">Platform Status</h3>
-              <p class="text-gray-400">
-                bitvid is a work in progress. Features may change or break, and
-                security improvements are ongoing. Your feedback and patience
-                help us build a better platform.
-              </p>
-            </div>
-            <div class="bg-gray-800 rounded-lg p-4">
-              <h3 class="text-white font-semibold mb-2">Get Involved</h3>
-              <p class="text-gray-400">
-                Are you a developer? We'd love your help! Visit our GitHub
-                repository to contribute to building the future of decentralized
-                video sharing.
-              </p>
-            </div>
+          <div class="rounded-lg bg-gray-800 p-4">
+            <h3 class="mb-2 font-semibold text-white">
+              Content Responsibility &amp; Moderation
+            </h3>
+            <p class="text-gray-400">
+              While we don't host videos directly, we maintain community
+              standards through access control. Users who violate our
+              guidelines may be blocked from accessing the platform. All
+              content must follow local laws and platform guidelines.
+            </p>
+          </div>
+          <div class="rounded-lg bg-gray-800 p-4">
+            <h3 class="mb-2 font-semibold text-white">Platform Status</h3>
+            <p class="text-gray-400">
+              bitvid is a work in progress. Features may change or break, and
+              security improvements are ongoing. Your feedback and patience
+              help us build a better platform.
+            </p>
+          </div>
+          <div class="rounded-lg bg-gray-800 p-4">
+            <h3 class="mb-2 font-semibold text-white">Get Involved</h3>
+            <p class="text-gray-400">
+              Are you a developer? We'd love your help! Visit our GitHub
+              repository to contribute to building the future of decentralized
+              video sharing.
+            </p>
          </div>
        </div>
      </div>
+    </div>

-      <!-- Button at bottom -->
-      <div class="modal-footer">
-        <button
-          id="acceptDisclaimer"
-          class="w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-black transition-colors duration-200"
-        >
-          I Understand
-        </button>
-      </div>
+    <!-- Button at bottom -->
+    <div class="modal-footer">
+      <button
+        id="acceptDisclaimer"
+        class="w-full rounded-md bg-blue-500 px-4 py-2 text-white transition-colors duration-200 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-black"
+      >
+        I Understand
+      </button>
    </div>
  </div>
 </div>
@@ -1,64 +1,51 @@
-<!-- components/feature-request-form.html 
-//    https://bitvid.network?modal=feature => open featureRequestModal 
+<!-- components/feature-request-form.html
+//    https://bitvid.network?modal=feature => open featureRequestModal
 -->
 <div
  id="featureRequestModal"
-  class="fixed inset-0 z-50 hidden"
-  style="background: transparent"
+  class="bv-modal hidden items-start justify-center overflow-y-auto"
 >
-  <!-- Dark/blur overlay -->
-  <div
-    class="absolute inset-0 z-10"
-    style="
-      background-color: rgba(0, 0, 0, 0.9);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-    "
-  ></div>
+  <div class="bv-modal-backdrop" data-dismiss></div>

  <div
-    class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
+    class="bv-modal__panel relative my-0 w-full max-w-[90%] overflow-hidden rounded-lg bg-gray-900 lg:max-w-6xl"
  >
+    <!-- Header bar (sticky) with updated title styling -->
    <div
-      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
+      class="sticky top-0 flex items-center justify-between border-b border-gray-700 bg-gradient-to-b from-black/80 to-transparent p-4"
    >
-      <!-- Header bar (sticky) with updated title styling -->
-      <div
-        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between border-b border-gray-700"
+      <h2 class="pb-2 text-3xl font-extrabold tracking-wide text-white">
+        Feature Request Form
+      </h2>
+      <button
+        id="closeFeatureRequestModal"
+        class="flex h-10 w-10 items-center justify-center rounded-full bg-black/50 transition-all duration-200 backdrop-blur hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
      >
-        <h2 class="text-3xl font-extrabold text-white tracking-wide pb-2">
-          Feature Request Form
-        </h2>
-        <button
-          id="closeFeatureRequestModal"
-          class="flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 transition-all duration-200 backdrop-blur focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-6 w-6 text-gray-300"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="w-6 h-6 text-gray-300"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M6 18L18 6M6 6l12 12"
-            />
-          </svg>
-        </button>
-      </div>
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
+    </div>

-      <div class="p-6">
-        <div class="w-full" style="height: 80vh">
-          <iframe
-            src="./components/iframe_forms/iframe-request-form.html"
-            class="w-full h-full"
-            frameborder="0"
-            style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
-          ></iframe>
-        </div>
+    <div class="p-6">
+      <div class="w-full" style="height: 80vh">
+        <iframe
+          src="./components/iframe_forms/iframe-request-form.html"
+          class="h-full w-full"
+          frameborder="0"
+          style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
+        ></iframe>
      </div>
    </div>
  </div>
@@ -1,68 +1,55 @@
-<!-- components/content-appeals-form.html 
+<!-- components/content-appeals-form.html
 //    https://bitvid.network?modal=feedback => open generalFeedbackModal
-//    
+//
 //    Admin: npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe
-//    Form: 
-//    Responses: 
+//    Form:
+//    Responses:
 -->
 <div
  id="generalFeedbackModal"
-  class="fixed inset-0 z-50 hidden"
-  style="background: transparent"
+  class="bv-modal hidden items-start justify-center overflow-y-auto"
 >
-  <!-- Dark/blur overlay -->
-  <div
-    class="absolute inset-0 z-10"
-    style="
-      background-color: rgba(0, 0, 0, 0.9);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-    "
-  ></div>
+  <div class="bv-modal-backdrop" data-dismiss></div>

  <div
-    class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
+    class="bv-modal__panel relative my-0 w-full max-w-[90%] overflow-hidden rounded-lg bg-gray-900 lg:max-w-6xl"
  >
+    <!-- Header bar (sticky) with updated title styling -->
    <div
-      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
+      class="sticky top-0 flex items-center justify-between border-b border-gray-700 bg-gradient-to-b from-black/80 to-transparent p-4"
    >
-      <!-- Header bar (sticky) with updated title styling -->
-      <div
-        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between border-b border-gray-700"
+      <h2 class="pb-2 text-3xl font-extrabold tracking-wide text-white">
+        General Feedback Form
+      </h2>
+      <button
+        id="closeGeneralFeedbackModal"
+        class="flex h-10 w-10 items-center justify-center rounded-full bg-black/50 transition-all duration-200 backdrop-blur hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
      >
-        <h2 class="text-3xl font-extrabold text-white tracking-wide pb-2">
-          General Feedback Form
-        </h2>
-        <button
-          id="closeGeneralFeedbackModal"
-          class="flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 transition-all duration-200 backdrop-blur focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-6 w-6 text-gray-300"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="w-6 h-6 text-gray-300"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M6 18L18 6M6 6l12 12"
-            />
-          </svg>
-        </button>
-      </div>
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
+    </div>

-      <div class="p-6">
-        <div class="w-full" style="height: 80vh">
-          <iframe
-            src="./components/iframe_forms/iframe-feedback-form.html"
-            class="w-full h-full"
-            frameborder="0"
-            style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
-          ></iframe>
-        </div>
+    <div class="p-6">
+      <div class="w-full" style="height: 80vh">
+        <iframe
+          src="./components/iframe_forms/iframe-feedback-form.html"
+          class="h-full w-full"
+          frameborder="0"
+          style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
+        ></iframe>
      </div>
    </div>
  </div>
@@ -1,79 +1,62 @@
-<div
-  id="loginModal"
-  class="fixed inset-0 z-50 hidden"
-  style="background: transparent"
->
-  <!-- Dark overlay with blur (unchanged) -->
-  <div
-    class="absolute inset-0 z-10"
-    style="
-      background-color: rgba(0, 0, 0, 0.9);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-    "
-  ></div>
+<div id="loginModal" class="bv-modal hidden items-start justify-center">
+  <div class="bv-modal-backdrop" data-dismiss></div>

-  <!-- Outer container matching video modal's flex layout & wide sizing -->
  <div
-    class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
+    class="bv-modal__panel bg-gray-900 w-full max-w-[90%] overflow-hidden lg:max-w-6xl"
  >
+    <!-- Header with the special exit button (unchanged) -->
    <div
-      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
+      class="sticky top-0 flex items-center justify-between bg-gradient-to-b from-black/80 to-transparent p-4"
    >
-      <!-- Header with the special exit button (unchanged) -->
-      <div
-        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
+      <h2 class="text-xl font-bold text-white">Login Options</h2>
+      <button
+        id="closeLoginModal"
+        class="flex h-10 w-10 items-center justify-center rounded-full bg-black/50 transition-all duration-200 backdrop-blur hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
      >
-        <h2 class="text-xl font-bold text-white">Login Options</h2>
-        <button
-          id="closeLoginModal"
-          class="flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 transition-all duration-200 backdrop-blur focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-6 w-6 text-gray-300"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="w-6 h-6 text-gray-300"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M6 18L18 6M6 6l12 12"
-            />
-          </svg>
-        </button>
-      </div>
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
+    </div>

-      <!-- Body with buttons (unchanged) -->
-      <div class="p-6 space-y-4">
-        <!-- Application Form button -->
-        <button
-          id="openApplicationModal"
-          class="w-full bg-indigo-500 text-white px-4 py-2 rounded-md hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-        >
-          Application Form
-        </button>
+    <!-- Body with buttons (unchanged) -->
+    <div class="space-y-4 p-6">
+      <!-- Application Form button -->
+      <button
+        id="openApplicationModal"
+        class="w-full rounded-md bg-indigo-500 px-4 py-2 text-white hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+      >
+        Application Form
+      </button>

-        <!-- Simple horizontal rule -->
-        <div class="my-2 border-t border-gray-700"></div>
+      <!-- Simple horizontal rule -->
+      <div class="my-2 border-t border-gray-700"></div>

-        <!-- Existing login buttons -->
-        <button
-          id="loginNIP07"
-          class="w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
-        >
-          Login with Extension (NIP-07)
-        </button>
-        <button
-          id="loginNSEC"
-          class="w-full bg-gray-500 text-white px-4 py-2 rounded-md cursor-not-allowed"
-          disabled
-        >
-          Login with NSEC (Coming Soon)
-        </button>
-      </div>
+      <!-- Existing login buttons -->
+      <button
+        id="loginNIP07"
+        class="w-full rounded-md bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+      >
+        Login with Extension (NIP-07)
+      </button>
+      <button
+        id="loginNSEC"
+        class="w-full cursor-not-allowed rounded-md bg-gray-500 px-4 py-2 text-white"
+        disabled
+      >
+        Login with NSEC (Coming Soon)
+      </button>
    </div>
  </div>
 </div>
@@ -1,33 +1,22 @@
 <!-- components/revert-video-modal.html -->
 <div
  id="revertVideoModal"
-  class="fixed inset-0 z-50 hidden"
-  style="background: transparent"
+  class="bv-modal hidden items-start justify-center overflow-y-auto md:items-center"
  role="dialog"
  aria-modal="true"
  aria-labelledby="revertModalTitle"
  aria-describedby="revertModalSubtitle"
-  tabindex="-1"
 >
  <div
    id="revertVideoModalOverlay"
-    class="absolute inset-0 z-10"
-    aria-hidden="true"
-    style="
-      background-color: rgba(0, 0, 0, 0.9);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-    "
+    class="bv-modal-backdrop"
+    data-dismiss
  ></div>

  <div
-    class="modal-container relative z-20 flex h-full w-full items-start justify-center overflow-y-auto md:items-center"
+    class="bv-modal__panel relative my-0 w-full max-h-[92vh] max-w-[95%] overflow-hidden rounded-lg bg-gray-900 lg:max-w-5xl"
+    tabindex="-1"
  >
-    <div
-      class="modal-content relative my-0 w-full max-w-[95%] overflow-hidden rounded-lg bg-gray-900 lg:max-w-5xl"
-      style="max-height: 92vh"
-      tabindex="-1"
-    >
      <div
        class="from-black/80 sticky top-0 flex items-center justify-between bg-gradient-to-b to-transparent p-4 transition-transform duration-150"
      >
@@ -1,34 +1,19 @@
 <!-- components/upload-modal.html -->
 <div
  id="uploadModal"
-  class="fixed inset-0 z-50 hidden"
-  style="background: transparent"
+  class="bv-modal hidden items-start justify-center overflow-y-auto md:items-center"
  role="dialog"
  aria-modal="true"
  aria-labelledby="uploadModalTitle"
  aria-describedby="uploadModalDescription"
-  tabindex="-1"
 >
-  <!-- Overlay Layer with dark background and blur -->
-  <div
-    class="absolute inset-0 z-10"
-    aria-hidden="true"
-    style="
-      background-color: rgba(0, 0, 0, 0.9);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-    "
-  ></div>
+  <div class="bv-modal-backdrop" data-dismiss></div>

  <!-- Modal Container -->
  <div
-    class="modal-container relative z-20 flex h-full w-full items-start justify-center overflow-y-auto md:items-center"
+    class="bv-modal__panel relative my-0 w-full max-h-[90vh] max-w-[90%] overflow-y-auto rounded-lg bg-gray-900 lg:max-w-6xl"
+    tabindex="-1"
  >
-    <div
-      class="modal-content relative my-0 w-full max-w-[90%] overflow-y-auto rounded-lg bg-gray-900 lg:max-w-6xl"
-      style="max-height: 90vh"
-      tabindex="-1"
-    >
      <!-- Top Bar (similar to video-modal) -->
      <div
        class="from-black/80 sticky top-0 flex items-center justify-between bg-gradient-to-b to-transparent p-4 transition-transform duration-150"
@@ -330,12 +330,11 @@ header img {
  z-index: var(--z-modal-root);
 }

-#modalContainer > [id$="Modal"]:not(#playerModal) > .absolute {
+#modalContainer > [id$="Modal"]:not(#playerModal) > .bv-modal-backdrop {
  z-index: var(--z-modal-overlay);
 }

-#modalContainer > [id$="Modal"]:not(#playerModal) .modal-container,
-#modalContainer > [id$="Modal"]:not(#playerModal) .modal-content {
+#modalContainer > [id$="Modal"]:not(#playerModal) .bv-modal__panel {
  z-index: var(--z-modal-content);
 }

@@ -741,31 +740,14 @@ footer a:hover {

 /* Disclaimer Modal Styles */
 #disclaimerModal {
-  position: fixed;
-  inset: 0;
-  background-color: var(--color-overlay-black);
-  z-index: var(--z-modal-root);
-  /* remove display: none; */
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
  overscroll-behavior: contain;
 }

-#disclaimerModal > .absolute {
-  z-index: var(--z-modal-overlay);
-}
-
-#disclaimerModal .modal-container,
-#disclaimerModal .modal-content {
-  z-index: var(--z-modal-content);
-}
-
 #disclaimerModal.hidden {
  display: none !important;
 }

-#disclaimerModal .modal-content {
+#disclaimerModal .bv-modal__panel {
  width: min(60rem, calc(100% - 2rem));
  max-height: min(90vh, 51.25rem);
  display: flex;
@@ -814,7 +796,7 @@ footer a:hover {
    padding: 0;
  }

-  #disclaimerModal .modal-content {
+  #disclaimerModal .bv-modal__panel {
    min-height: 100vh;
    border-radius: 0;
    max-height: none;
@@ -1,3 +1,3 @@
 :root{--color-page:#fff;--color-page-alt:#f9fafb;--color-surface:#0f172a;--color-surface-alt:#111827;--color-bg:var(--color-surface);--color-card:#1e293b;--color-card-private:#3b1d74;--color-card-critical:#3f0b13;--color-panel:#1f2937;--color-panel-hover:#334155;--color-border:#374151;--color-border-subtle:#d1d5db;--color-primary:#fe0032;--color-secondary:#ff93a5;--color-info:#60a5fa;--color-info-strong:#2563eb;--color-info-pressed:#1d4ed8;--color-muted-strong:#6b7280;--color-text:#f8fafc;--color-text-strong:#0f172a;--color-text-muted:var(--color-muted);--color-muted:#94a3b8;--color-muted-alt:#9ca3af;--color-subtle-text:#e2e8f0;--color-subtle:#e5e7eb;--color-critical:#7f1d1d;--color-critical-strong:#991b1b;--color-neutral-700:#3f3f46;--color-neutral-600:#52525b;--color-white:#fff;--color-black:#000;--color-overlay:#1a2234;--color-overlay-black:rgba(0,0,0,.9);--color-overlay-muted:rgba(15,23,42,.55);--color-overlay-strong:rgba(15,23,42,.75);--color-overlay-darker:rgba(15,23,42,.88);--color-overlay-panel:rgba(31,41,55,.9);--color-overlay-panel-soft:rgba(31,41,55,.75);--color-overlay-panel-tint:rgba(31,41,55,.5);--color-overlay-panel-glass:rgba(30,41,59,.85);--color-overlay-veil:rgba(11,17,32,.96);--color-overlay-banner:rgba(51,65,85,.95);--color-overlay-panel-gradient-start:rgba(30,41,59,.92);--color-overlay-panel-gradient-end:rgba(15,23,42,.92);--color-surface-tint-subtle:rgba(148,163,184,.08);--color-border-translucent:rgba(148,163,184,.18);--color-border-translucent-strong:rgba(148,163,184,.25);--color-border-translucent-bright:rgba(148,163,184,.32);--color-border-translucent-stronger:rgba(148,163,184,.35);--color-border-translucent-strongest:rgba(148,163,184,.4);--color-border-translucent-glow:rgba(148,163,184,.55);--color-border-translucent-medium:rgba(148,163,184,.2);--color-border-neutral-soft:rgba(229,231,235,.35);--color-border-info-soft:rgba(96,165,250,.35);--color-border-sidebar-strong:rgba(55,65,81,.9);--color-ring-private:rgba(168,85,247,.55);--color-ring-private-hover:rgba(192,132,252,.65);--color-ring-critical:rgba(239,68,68,.4);--color-ring-critical-soft:rgba(239,68,68,.35);--color-ring-critical-hover:rgba(239,68,68,.45);--color-ring-critical-strong:rgba(239,68,68,.55);--color-ring-alert:rgba(220,38,38,.6);--color-gradient-visibility-start:rgba(129,140,248,.4);--color-gradient-visibility-end:rgba(192,132,252,.32);--color-white-soft:hsla(0,0%,100%,.1);--color-white-softer:hsla(0,0%,100%,.3);--color-white-softest:hsla(0,0%,100%,.4);--color-shadow-floating:rgba(8,11,30,.55);--color-shadow-elevated:rgba(8,11,30,.45);--color-shadow-panel:rgba(15,23,42,.35);--color-shadow-notification:rgba(15,23,42,.3);--color-shadow-sidebar:rgba(0,0,0,.45);--color-divider-strong:rgba(15,23,42,.35);--color-text-frosted-strong:rgba(226,232,240,.94);--color-text-frosted:rgba(226,232,240,.9);--color-text-frosted-soft:rgba(226,232,240,.82);--space-2xs:0.25rem;--space-xs:0.5rem;--space-sm:0.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-full:9999px;--shadow-sm:0 0.0625rem 0.125rem 0 rgb(0 0 0/5%);--shadow-md:0 0.25rem 0.375rem -0.0625rem rgba(0,0,0,.1);--shadow-lg:0 0.625rem 0.9375rem -0.1875rem rgba(0,0,0,.1);--shadow-modal:0 1.25rem 2.5rem -0.375rem rgba(15,23,42,.55);--font-family-sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;--font-family-mono:"Fira Code","SFMono-Regular",ui-monospace,monospace;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.5rem;--font-size-2xl:2rem;--line-height-tight:1.1;--line-height-snug:1.25;--line-height-base:1.5;--line-height-relaxed:1.75;--motion-duration-fast:120ms;--motion-duration-base:160ms;--motion-duration-slow:280ms;--motion-ease-out:cubic-bezier(0.16,1,0.3,1);--motion-ease-in-out:cubic-bezier(0.4,0,0.2,1);--modal-motion-duration:var(--motion-duration-base)}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contaiLine truncated

-/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-family-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-family-mono);font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.focus-ring{outline:2px solid transparent;outline-offset:2px}.focus-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--color-info);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--color-surface);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1)}.btn{outline:2px solid transparent;outline-offset:2px}.btn:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--color-info);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--color-surface);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-lg);border-width:1px;border-color:transparent;background-color:var(--color-primary);padding:.5rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:600;text-transform:uppercase;letter-spacing:.025em;color:var(--color-white);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-funLine truncated
+/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-family-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-family-mono);font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.focus-ring{outline:2px solid transparent;outline-offset:2px}.focus-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--color-info);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--color-surface);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1)}.btn{outline:2px solid transparent;outline-offset:2px}.btn:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--color-info);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--color-surface);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-lg);border-width:1px;border-color:transparent;background-color:var(--color-primary);padding:.5rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:600;text-transform:uppercase;letter-spacing:.025em;color:var(--color-white);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-funLine truncated
@@ -342,14 +342,6 @@
    @apply cursor-not-allowed opacity-45;
  }

-  .modal-container {
-    @apply bv-modal;
-  }
-
-  .modal-content {
-    @apply bv-modal__panel flex h-full flex-col;
-  }
-
  .video-modal__container {
    @apply flex h-full min-h-screen w-full flex-1 flex-col;
  }
@@ -127,11 +127,12 @@ The helpers rely on layout utilities (`flex`, `gap-*`) so you can safely inject
 During migration we keep existing selectors alive by layering `@apply` calls in `css/style.css`. Notable shims:

 - `.video-card` → `.card`
- `.modal-content` → `.bv-modal__panel`
 - `#profileModal .profile-switcher*` → `.card`, `.badge`, `.btn-ghost`

 We continue to expose aliases such as `.profile-switcher` and nested variations (for example, `.profile-switcher__item`) so existing profile and admin controllers stay functional while downstream templates finish their migration. These shims live under the "Legacy component compatibility" section and will be removed once templates switch to the new primitives.

+> **Update (Q1 2025):** The modal shim that mapped `.modal-container`/`.modal-content` to the new primitives has been removed. All modal templates must mount `.bv-modal`, `.bv-modal-backdrop`, and `.bv-modal__panel` directly.
+
 **Target removal:** Audit usage after the Q1 2025 UI refresh and delete remaining shims no later than April 2025. At that point the compatibility layer will be deleted once dependent feature flags confirm that no legacy selectors remain in production HTML.

 ### Migration Notes (Q4 2024)