From a8cb21d20cd717d1e51cd6f6e981ef19ef0409af Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Fri, 10 Oct 2025 22:26:19 -0400
Subject: [PATCH] Refactor modal styles to tokenized palette

---
 components/application-form.html      |  23 +-
 components/bug-fix-form.html          |  21 +-
 components/content-appeals-form.html  |  21 +-
 components/disclaimer.html            |  44 ++-
 components/edit-video-modal.html      | 194 ++++++------
 components/feature-request-form.html  |  21 +-
 components/general-feedback-form.html |  21 +-
 components/login-modal.html           |  24 +-
 components/profile-modal.html         | 126 ++++----
 components/revert-video-modal.html    |  93 +++---
 components/upload-modal.html          | 433 +++++++++++++-------------
 components/video-modal.html           |   8 +-
 css/tailwind.generated.css            |   4 +-
 css/tailwind.source.css               |  51 +++
 css/tokens.css                        |   3 +
 tailwind.config.cjs                   |   5 +
 16 files changed, 544 insertions(+), 548 deletions(-)

diff --git a/components/application-form.html b/components/application-form.html
index cbaed02d..e455048f 100644
--- a/components/application-form.html
+++ b/components/application-form.html
@@ -10,7 +10,7 @@
     <!-- Include Tailwind CSS -->
     <link href="css/tailwind.generated.css" rel="stylesheet" />
   </head>
-  <body class="bg-gray-900 text-gray-100">
+  <body class="bg-surface text-text">
     <!-- Application Form Modal -->
     <div
       id="nostrFormModal"
@@ -19,23 +19,19 @@
       <div class="bv-modal-backdrop" data-dismiss></div>
 
       <!-- Inner content container -->
-      <div
-        class="bv-modal__panel relative my-0 w-full max-w-[90%] overflow-hidden rounded-lg bg-gray-900 lg:max-w-6xl"
-      >
+      <div class="modal-sheet">
           <!-- 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"
-          >
-            <h2 class="text-3xl font-extrabold text-white tracking-wide pb-2">
+          <div class="modal-header">
+            <h2 class="pb-2 text-3xl font-extrabold tracking-wide text-text">
               Application Form
             </h2>
             <button
               id="closeNostrFormModal"
-              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"
+              class="modal-close"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                class="w-6 h-6 text-gray-300"
+                class="h-6 w-6 text-muted"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -51,13 +47,12 @@
           </div>
 
           <!-- Main Content -->
-          <div class="p-6">
-            <div class="w-full" style="height: 80vh">
+          <div class="modal-body">
+            <div class="h-[80vh] w-full">
               <iframe
                 src="./components/iframe_forms/iframe-application-form.html"
-                class="w-full h-full"
+                class="h-full w-full rounded-lg border border-border/30 shadow-sm"
                 frameborder="0"
-                style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
               ></iframe>
             </div>
           </div>
diff --git a/components/bug-fix-form.html b/components/bug-fix-form.html
index 19c7961e..d13ef677 100644
--- a/components/bug-fix-form.html
+++ b/components/bug-fix-form.html
@@ -7,23 +7,19 @@
 <div id="bugFixModal" class="bv-modal hidden items-start justify-center overflow-y-auto">
   <div class="bv-modal-backdrop" data-dismiss></div>
 
-  <div
-    class="bv-modal__panel relative my-0 w-full max-w-[90%] overflow-hidden rounded-lg bg-gray-900 lg:max-w-6xl"
-  >
+  <div class="modal-sheet">
     <!-- Header bar (sticky) with updated title styling -->
-    <div
-      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"
-    >
-      <h2 class="pb-2 text-3xl font-extrabold tracking-wide text-white">
+    <div class="modal-header">
+      <h2 class="pb-2 text-3xl font-extrabold tracking-wide text-text">
         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"
+        class="modal-close"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          class="h-6 w-6 text-gray-300"
+          class="h-6 w-6 text-muted"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
@@ -38,13 +34,12 @@
       </button>
     </div>
 
-    <div class="p-6">
-      <div class="w-full" style="height: 80vh">
+    <div class="modal-body">
+      <div class="h-[80vh] w-full">
         <iframe
           src="./components/iframe_forms/iframe-bug-fix-form.html"
-          class="h-full w-full"
+          class="h-full w-full rounded-lg border border-border/30 shadow-sm"
           frameborder="0"
-          style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
         ></iframe>
       </div>
     </div>
diff --git a/components/content-appeals-form.html b/components/content-appeals-form.html
index 492c219b..98374c82 100644
--- a/components/content-appeals-form.html
+++ b/components/content-appeals-form.html
@@ -7,23 +7,19 @@
 >
   <div class="bv-modal-backdrop" data-dismiss></div>
 
-  <div
-    class="bv-modal__panel relative my-0 w-full max-w-[90%] overflow-hidden rounded-lg bg-gray-900 lg:max-w-6xl"
-  >
+  <div class="modal-sheet">
     <!-- Header bar (sticky) with improved title styling -->
-    <div
-      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"
-    >
-      <h2 class="pb-2 text-3xl font-extrabold tracking-wide text-white">
+    <div class="modal-header">
+      <h2 class="pb-2 text-3xl font-extrabold tracking-wide text-text">
         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"
+        class="modal-close"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          class="h-6 w-6 text-gray-300"
+          class="h-6 w-6 text-muted"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
@@ -38,13 +34,12 @@
       </button>
     </div>
 
-    <div class="p-6">
-      <div class="w-full" style="height: 80vh">
+    <div class="modal-body">
+      <div class="h-[80vh] w-full">
         <iframe
           src="./components/iframe_forms/iframe-content-appeals-form.html"
-          class="h-full w-full"
+          class="h-full w-full rounded-lg border border-border/30 shadow-sm"
           frameborder="0"
-          style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
         ></iframe>
       </div>
     </div>
diff --git a/components/disclaimer.html b/components/disclaimer.html
index d3732b9f..9ba97316 100644
--- a/components/disclaimer.html
+++ b/components/disclaimer.html
@@ -6,18 +6,14 @@
   <div class="bv-modal-backdrop" data-dismiss></div>
 
   <!-- Outer container with wide layout, just like content-appeals-form -->
-  <div
-    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"
-  >
+  <div class="modal-sheet flex flex-col overflow-hidden" tabindex="-1">
     <!-- Sticky top bar, if you want a top heading or 'X' button up here -->
-    <div
-      class="modal-header sticky top-0 flex items-center justify-between bg-gradient-to-b from-black/80 to-transparent p-4"
-    ></div>
+    <div class="modal-header"></div>
 
     <!-- Main Content -->
     <div class="modal-body flex-1 overflow-y-auto">
       <!-- Scrollable disclaimers area -->
-      <div class="space-y-6 text-gray-300">
+      <div class="space-y-6 text-muted-strong">
         <!-- Example: Insert your disclaimers here -->
 
         <div class="mb-8 flex justify-center">
@@ -27,13 +23,13 @@
             class="h-16"
           />
         </div>
-        <h2 class="mb-0 text-2xl font-bold text-white">Welcome to bitvid</h2>
+        <h2 class="mb-0 text-2xl font-bold text-text">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"
+          class="mb-6 flex items-start rounded-lg border border-warning-strong/60 bg-warning-surface p-4"
         >
           <svg
-            class="mt-0.5 mr-3 h-5 w-5 flex-shrink-0 text-yellow-500"
+            class="mt-0.5 mr-3 h-5 w-5 flex-shrink-0 text-warning-strong"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
@@ -45,7 +41,7 @@
               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">
+          <p class="text-warning">
             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
@@ -59,37 +55,37 @@
         </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">
+          <div class="rounded-lg bg-panel p-4">
+            <h3 class="mb-2 font-semibold text-text">Early Access Status</h3>
+            <p class="text-muted">
               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="rounded-lg bg-gray-800 p-4">
-            <h3 class="mb-2 font-semibold text-white">
+          <div class="rounded-lg bg-panel p-4">
+            <h3 class="mb-2 font-semibold text-text">
               Content Responsibility &amp; Moderation
             </h3>
-            <p class="text-gray-400">
+            <p class="text-muted">
               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">
+          <div class="rounded-lg bg-panel p-4">
+            <h3 class="mb-2 font-semibold text-text">Platform Status</h3>
+            <p class="text-muted">
               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">
+          <div class="rounded-lg bg-panel p-4">
+            <h3 class="mb-2 font-semibold text-text">Get Involved</h3>
+            <p class="text-muted">
               Are you a developer? We'd love your help! Visit our GitHub
               repository to contribute to building the future of decentralized
               video sharing.
@@ -103,7 +99,7 @@
     <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"
+        class="w-full rounded-md bg-info px-4 py-2 text-text transition-colors duration-200 hover:bg-info-strong focus:outline-none focus:ring-2 focus:ring-info focus:ring-offset-2 focus:ring-offset-surface"
       >
         I Understand
       </button>
diff --git a/components/edit-video-modal.html b/components/edit-video-modal.html
index 6279497c..822fe30a 100644
--- a/components/edit-video-modal.html
+++ b/components/edit-video-modal.html
@@ -8,43 +8,35 @@
 >
   <div id="editVideoModalOverlay" class="bv-modal-backdrop"></div>
 
-  <div
-    class="bv-modal__panel modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-4xl my-0 overflow-y-auto relative max-h-[90vh]"
-    tabindex="-1"
-  >
-      <div class="sticky top-0 p-4">
-        <div class="card flex items-center justify-between gap-4 p-4">
-          <h2 class="text-xl font-bold text-white">Edit Video Note</h2>
-          <button
-            id="closeEditVideoModal"
-            class="focus-ring inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/50 text-gray-300 transition hover:bg-black/70"
+  <div class="modal-sheet modal-content max-h-[90vh] overflow-y-auto lg:max-w-4xl" tabindex="-1">
+      <div class="modal-header">
+        <h2 class="text-xl font-bold text-text">Edit Video Note</h2>
+        <button id="closeEditVideoModal" class="modal-close">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6"
-              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 space-y-6">
-        <p class="text-sm text-gray-400">
+      <div class="modal-body space-y-6">
+        <p class="text-sm text-muted">
           Fields that already have values are locked. Click <strong>Edit field</strong> to make changes.
         </p>
 
         <form id="editVideoForm" class="space-y-5">
           <div class="space-y-1">
-            <label for="editVideoTitle" class="block text-sm font-medium text-gray-200">
+            <label for="editVideoTitle" class="block text-sm font-medium text-text">
               Title
             </label>
             <div class="flex flex-col gap-2 sm:flex-row">
@@ -66,7 +58,7 @@
 
           <!-- NOTE: Keep this NIP-71 markup in sync with the upload and revert modals. -->
           <div
-            class="space-y-4 rounded-lg border border-gray-800 bg-black/30 p-4"
+            class="space-y-4 rounded-lg border border-border/70 bg-overlay-black/30 p-4"
             id="editNip71EventDetails"
             data-nip71-section="event-details"
           >
@@ -75,12 +67,12 @@
               class="space-y-2"
               data-nip71-fieldset="kind"
             >
-              <legend class="text-sm font-semibold text-gray-200">
+              <legend class="text-sm font-semibold text-text">
                 NIP-71 event type
               </legend>
-              <p class="text-xs text-gray-400">
-                Choose the video format. <span class="font-medium text-gray-300">Kind 21</span> is a full video, while
-                <span class="font-medium text-gray-300">Kind 22</span> is a short.
+              <p class="text-xs text-muted">
+                Choose the video format. <span class="font-medium text-muted-strong">Kind 21</span> is a full video, while
+                <span class="font-medium text-muted-strong">Kind 22</span> is a short.
               </p>
               <div
                 class="form-control"
@@ -96,9 +88,9 @@
                       value="21"
                       checked
                       data-nip71-input="kind"
-                      class="h-4 w-4 border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                      class="h-4 w-4 border-border bg-panel text-info focus:ring-info"
                     />
-                    <span class="text-sm text-gray-200">Normal video (kind 21)</span>
+                    <span class="text-sm text-text">Normal video (kind 21)</span>
                   </label>
                   <label class="menu__item gap-3 px-0 py-0" for="editNip71KindShort">
                     <input
@@ -107,9 +99,9 @@
                       id="editNip71KindShort"
                       value="22"
                       data-nip71-input="kind"
-                      class="h-4 w-4 border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                      class="h-4 w-4 border-border bg-panel text-info focus:ring-info"
                     />
-                    <span class="text-sm text-gray-200">Short video (kind 22)</span>
+                    <span class="text-sm text-text">Short video (kind 22)</span>
                   </label>
                 </div>
               </div>
@@ -117,7 +109,7 @@
 
             <div class="grid gap-4 md:grid-cols-2" data-nip71-grid="metadata">
               <div class="space-y-2">
-                <label for="editNip71PublishedAt" class="block text-sm font-medium text-gray-200">
+                <label for="editNip71PublishedAt" class="block text-sm font-medium text-text">
                   Published at
                 </label>
                 <input
@@ -126,12 +118,12 @@
                   data-nip71-input="published_at"
                   class="input"
                 />
-                <p class="text-xs text-gray-400">
+                <p class="text-xs text-muted">
                   Set the canonical publish time for cross-client ordering.
                 </p>
               </div>
               <div class="space-y-2">
-                <label for="editNip71AltText" class="block text-sm font-medium text-gray-200">
+                <label for="editNip71AltText" class="block text-sm font-medium text-text">
                   Alt text
                 </label>
                 <input
@@ -141,12 +133,12 @@
                   placeholder="Describe the visuals for screen readers"
                   class="input"
                 />
-                <p class="text-xs text-gray-400">
+                <p class="text-xs text-muted">
                   Plain-language fallback shown when the media cannot load.
                 </p>
               </div>
               <div class="space-y-2">
-                <label for="editNip71Duration" class="block text-sm font-medium text-gray-200">
+                <label for="editNip71Duration" class="block text-sm font-medium text-text">
                   Duration (seconds)
                 </label>
                 <input
@@ -157,12 +149,12 @@
                   data-nip71-input="duration"
                   class="input"
                 />
-                <p class="text-xs text-gray-400">
+                <p class="text-xs text-muted">
                   Provide the runtime in whole seconds for timeline scrubbing.
                 </p>
               </div>
               <div class="space-y-2">
-                <label for="editNip71ContentWarning" class="block text-sm font-medium text-gray-200">
+                <label for="editNip71ContentWarning" class="block text-sm font-medium text-text">
                   Content warning
                 </label>
                 <input
@@ -172,14 +164,14 @@
                   placeholder="e.g., Flashing lights"
                   class="input"
                 />
-                <p class="text-xs text-gray-400">
+                <p class="text-xs text-muted">
                   Leave blank if the video is safe for all audiences.
                 </p>
               </div>
             </div>
 
             <div class="space-y-2">
-              <label for="editNip71Summary" class="block text-sm font-medium text-gray-200">
+              <label for="editNip71Summary" class="block text-sm font-medium text-text">
                 Summary
               </label>
               <textarea
@@ -189,7 +181,7 @@
                 class="textarea"
                 placeholder="Short synopsis used as the Nostr content field"
               ></textarea>
-              <p class="text-xs text-gray-400">
+              <p class="text-xs text-muted">
                 This becomes the event content. Keep it concise for Nostr readers.
               </p>
             </div>
@@ -197,19 +189,19 @@
 
           <fieldset
             id="editNip71TagsFieldset"
-            class="space-y-6 rounded-lg border border-gray-800 bg-black/30 p-4"
+            class="space-y-6 rounded-lg border border-border/70 bg-overlay-black/30 p-4"
             data-nip71-section="tags"
           >
-            <legend class="relative text-sm font-semibold text-gray-200">
-              <span class="inline-block -ml-2 rounded px-2 bg-black/30">NIP-71 tags</span>
+            <legend class="relative text-sm font-semibold text-text">
+              <span class="inline-block -ml-2 rounded px-2 bg-overlay-black/30">NIP-71 tags</span>
             </legend>
-            <p class="text-xs text-gray-400">
+            <p class="text-xs text-muted">
               Use the controls below to describe media variants, captions, chapters, participants, and references.
             </p>
 
             <section class="space-y-4" aria-labelledby="editNip71ImetaLabel" data-nip71-repeater="imeta">
               <div class="flex items-center justify-between">
-                <h3 id="editNip71ImetaLabel" class="text-sm font-medium text-gray-200">Image metadata (imeta)</h3>
+                <h3 id="editNip71ImetaLabel" class="text-sm font-medium text-text">Image metadata (imeta)</h3>
                 <button
                   type="button"
                   class="btn-ghost focus-ring text-xs font-semibold"
@@ -219,16 +211,16 @@
                   Add variant
                 </button>
               </div>
-              <p id="editNip71ImetaHelp" class="text-xs text-gray-400">
+              <p id="editNip71ImetaHelp" class="text-xs text-muted">
                 Provide dimensions, MIME type, and resource links for each variant. Nested repeaters let you attach multiple
                 <code>image</code>, <code>fallback</code>, or <code>service</code> values.
               </p>
               <div id="editNip71ImetaList" class="space-y-4" data-nip71-list="imeta"></div>
               <template id="editNip71ImetaTemplate" data-nip71-template="imeta">
-                <article class="card space-y-3 bg-gray-900/60 p-4" data-nip71-entry="imeta">
+                <article class="card space-y-3 bg-surface/60 p-4" data-nip71-entry="imeta">
                   <div class="grid gap-3 md:grid-cols-2">
                     <div class="space-y-2">
-                      <label class="block text-xs font-medium text-gray-300">
+                      <label class="block text-xs font-medium text-muted-strong">
                         MIME type (<code>m</code>)
                       </label>
                       <input
@@ -237,10 +229,10 @@
                         placeholder="video/mp4"
                         class="input"
                       />
-                      <p class="text-[11px] text-gray-500">RFC 2046 media type for this encoding.</p>
+                      <p class="text-[11px] text-muted">RFC 2046 media type for this encoding.</p>
                     </div>
                     <div class="space-y-2">
-                      <label class="block text-xs font-medium text-gray-300">
+                      <label class="block text-xs font-medium text-muted-strong">
                         Pixel dimensions (<code>dim</code>)
                       </label>
                       <input
@@ -249,10 +241,10 @@
                         placeholder="1920x1080"
                         class="input"
                       />
-                      <p class="text-[11px] text-gray-500">Formatted as widthxheight.</p>
+                      <p class="text-[11px] text-muted">Formatted as widthxheight.</p>
                     </div>
                     <div class="space-y-2">
-                      <label class="block text-xs font-medium text-gray-300">
+                      <label class="block text-xs font-medium text-muted-strong">
                         Streaming URL (<code>url</code>)
                       </label>
                       <input
@@ -261,10 +253,10 @@
                         placeholder="https://cdn.example.com/variant.m3u8"
                         class="input"
                       />
-                      <p class="text-[11px] text-gray-500">HTTPS variant URL shared across clients.</p>
+                      <p class="text-[11px] text-muted">HTTPS variant URL shared across clients.</p>
                     </div>
                     <div class="space-y-2">
-                      <label class="block text-xs font-medium text-gray-300">
+                      <label class="block text-xs font-medium text-muted-strong">
                         Magnet (<code>x</code>)
                       </label>
                       <input
@@ -273,13 +265,13 @@
                         placeholder="magnet:?xt=urn:btih:..."
                         class="input"
                       />
-                      <p class="text-[11px] text-gray-500">Optional magnet pointer if the variant is seeded via P2P.</p>
+                      <p class="text-[11px] text-muted">Optional magnet pointer if the variant is seeded via P2P.</p>
                     </div>
                   </div>
 
                   <div class="space-y-3" data-nip71-nested="image">
                     <div class="flex items-center justify-between">
-                      <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Image values</h4>
+                      <h4 class="text-xs font-semibold uppercase tracking-wide text-muted">Image values</h4>
                       <button
                         type="button"
                         class="btn-ghost focus-ring text-[11px] font-medium"
@@ -311,7 +303,7 @@
 
                   <div class="space-y-3" data-nip71-nested="fallback">
                     <div class="flex items-center justify-between">
-                      <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Fallback URLs</h4>
+                      <h4 class="text-xs font-semibold uppercase tracking-wide text-muted">Fallback URLs</h4>
                       <button
                         type="button"
                         class="btn-ghost focus-ring text-[11px] font-medium"
@@ -343,7 +335,7 @@
 
                   <div class="space-y-3" data-nip71-nested="service">
                     <div class="flex items-center justify-between">
-                      <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Services</h4>
+                      <h4 class="text-xs font-semibold uppercase tracking-wide text-muted">Services</h4>
                       <button
                         type="button"
                         class="btn-ghost focus-ring text-[11px] font-medium"
@@ -388,7 +380,7 @@
 
             <section class="space-y-4" aria-labelledby="editNip71TextTracksLabel" data-nip71-repeater="text-track">
               <div class="flex items-center justify-between">
-                <h3 id="editNip71TextTracksLabel" class="text-sm font-medium text-gray-200">
+                <h3 id="editNip71TextTracksLabel" class="text-sm font-medium text-text">
                   Caption &amp; subtitle tracks (text-track)
                 </h3>
                 <button
@@ -400,15 +392,15 @@
                   Add track
                 </button>
               </div>
-              <p id="editNip71TextTracksHelp" class="text-xs text-gray-400">
+              <p id="editNip71TextTracksHelp" class="text-xs text-muted">
                 Supply caption or subtitle URLs along with file type and language so players can surface accessibility features.
               </p>
               <div id="editNip71TextTrackList" class="space-y-4" data-nip71-list="text-track"></div>
               <template id="editNip71TextTrackTemplate" data-nip71-template="text-track">
-                <article class="card space-y-3 bg-gray-900/60 p-4" data-nip71-entry="text-track">
+                <article class="card space-y-3 bg-surface/60 p-4" data-nip71-entry="text-track">
                   <div class="grid gap-3 md:grid-cols-3">
                     <div class="space-y-2">
-                      <label class="block text-xs font-medium text-gray-300">Track URL</label>
+                      <label class="block text-xs font-medium text-muted-strong">Track URL</label>
                       <input
                         type="url"
                         data-nip71-field="url"
@@ -417,7 +409,7 @@
                       />
                     </div>
                     <div class="space-y-2">
-                      <label class="block text-xs font-medium text-gray-300">Type</label>
+                      <label class="block text-xs font-medium text-muted-strong">Type</label>
                       <input
                         type="text"
                         data-nip71-field="type"
@@ -426,7 +418,7 @@
                       />
                     </div>
                     <div class="space-y-2">
-                      <label class="block text-xs font-medium text-gray-300">Language</label>
+                      <label class="block text-xs font-medium text-muted-strong">Language</label>
                       <input
                         type="text"
                         data-nip71-field="language"
@@ -450,7 +442,7 @@
 
             <section class="space-y-4" aria-labelledby="editNip71SegmentsLabel" data-nip71-repeater="segment">
               <div class="flex items-center justify-between">
-                <h3 id="editNip71SegmentsLabel" class="text-sm font-medium text-gray-200">Chapters &amp; segments (segment)</h3>
+                <h3 id="editNip71SegmentsLabel" class="text-sm font-medium text-text">Chapters &amp; segments (segment)</h3>
                 <button
                   type="button"
                   class="btn-ghost focus-ring text-xs font-semibold"
@@ -460,15 +452,15 @@
                   Add segment
                 </button>
               </div>
-              <p id="editNip71SegmentsHelp" class="text-xs text-gray-400">
+              <p id="editNip71SegmentsHelp" class="text-xs text-muted">
                 Outline chapters with start and end times, titles, and optional thumbnails.
               </p>
               <div id="editNip71SegmentList" class="space-y-4" data-nip71-list="segment"></div>
               <template id="editNip71SegmentTemplate" data-nip71-template="segment">
-                <article class="card space-y-3 bg-gray-900/60 p-4" data-nip71-entry="segment">
+                <article class="card space-y-3 bg-surface/60 p-4" data-nip71-entry="segment">
                   <div class="grid gap-3 md:grid-cols-2">
                     <div class="space-y-2">
-                      <label class="block text-xs font-medium text-gray-300">Start (seconds)</label>
+                      <label class="block text-xs font-medium text-muted-strong">Start (seconds)</label>
                       <input
                         type="number"
                         data-nip71-field="start"
@@ -478,7 +470,7 @@
                       />
                     </div>
                     <div class="space-y-2">
-                      <label class="block text-xs font-medium text-gray-300">End (seconds)</label>
+                      <label class="block text-xs font-medium text-muted-strong">End (seconds)</label>
                       <input
                         type="number"
                         data-nip71-field="end"
@@ -488,7 +480,7 @@
                       />
                     </div>
                     <div class="space-y-2">
-                      <label class="block text-xs font-medium text-gray-300">Title</label>
+                      <label class="block text-xs font-medium text-muted-strong">Title</label>
                       <input
                         type="text"
                         data-nip71-field="title"
@@ -497,7 +489,7 @@
                       />
                     </div>
                     <div class="space-y-2">
-                      <label class="block text-xs font-medium text-gray-300">Thumbnail URL</label>
+                      <label class="block text-xs font-medium text-muted-strong">Thumbnail URL</label>
                       <input
                         type="url"
                         data-nip71-field="thumbnail"
@@ -521,7 +513,7 @@
 
             <section class="space-y-4" aria-labelledby="editNip71HashtagsLabel" data-nip71-repeater="t">
               <div class="flex items-center justify-between">
-                <h3 id="editNip71HashtagsLabel" class="text-sm font-medium text-gray-200">Hashtags (<code>t</code>)</h3>
+                <h3 id="editNip71HashtagsLabel" class="text-sm font-medium text-text">Hashtags (<code>t</code>)</h3>
                 <button
                   type="button"
                   class="btn-ghost focus-ring text-xs font-semibold"
@@ -530,7 +522,7 @@
                   Add hashtag
                 </button>
               </div>
-              <p class="text-xs text-gray-400">
+              <p class="text-xs text-muted">
                 Enter keywords; leading <code>#</code> characters are stripped automatically when saving.
               </p>
               <div id="editNip71HashtagList" class="space-y-2" data-nip71-list="t"></div>
@@ -555,7 +547,7 @@
 
             <section class="space-y-4" aria-labelledby="editNip71ParticipantsLabel" data-nip71-repeater="p">
               <div class="flex items-center justify-between">
-                <h3 id="editNip71ParticipantsLabel" class="text-sm font-medium text-gray-200">Participants (<code>p</code>)</h3>
+                <h3 id="editNip71ParticipantsLabel" class="text-sm font-medium text-text">Participants (<code>p</code>)</h3>
                 <button
                   type="button"
                   class="btn-ghost focus-ring text-xs font-semibold"
@@ -566,10 +558,10 @@
               </div>
               <div id="editNip71ParticipantList" class="space-y-3" data-nip71-list="p"></div>
               <template id="editNip71ParticipantTemplate" data-nip71-template="p">
-                <article class="card space-y-3 bg-gray-900/60 p-4" data-nip71-entry="p">
+                <article class="card space-y-3 bg-surface/60 p-4" data-nip71-entry="p">
                   <div class="grid gap-3 md:grid-cols-2">
                     <div class="space-y-2">
-                      <label class="block text-xs font-medium text-gray-300">Participant pubkey</label>
+                      <label class="block text-xs font-medium text-muted-strong">Participant pubkey</label>
                       <input
                         type="text"
                         data-nip71-field="pubkey"
@@ -578,7 +570,7 @@
                       />
                     </div>
                     <div class="space-y-2">
-                      <label class="block text-xs font-medium text-gray-300">Relay hint</label>
+                      <label class="block text-xs font-medium text-muted-strong">Relay hint</label>
                       <input
                         type="text"
                         data-nip71-field="relay"
@@ -602,7 +594,7 @@
 
             <section class="space-y-4" aria-labelledby="editNip71ReferencesLabel" data-nip71-repeater="r">
               <div class="flex items-center justify-between">
-                <h3 id="editNip71ReferencesLabel" class="text-sm font-medium text-gray-200">Reference links (<code>r</code>)</h3>
+                <h3 id="editNip71ReferencesLabel" class="text-sm font-medium text-text">Reference links (<code>r</code>)</h3>
                 <button
                   type="button"
                   class="btn-ghost focus-ring text-xs font-semibold"
@@ -633,7 +625,7 @@
           </fieldset>
 
           <div class="space-y-1">
-            <label for="editVideoUrl" class="block text-sm font-medium text-gray-200">
+            <label for="editVideoUrl" class="block text-sm font-medium text-text">
               Hosted video URL (https)
             </label>
             <div class="flex flex-col gap-2 sm:flex-row">
@@ -654,7 +646,7 @@
           </div>
 
           <div class="space-y-1">
-            <label for="editVideoWs" class="block text-sm font-medium text-gray-200">
+            <label for="editVideoWs" class="block text-sm font-medium text-text">
               Web seed (ws=)
             </label>
             <div class="flex flex-col gap-2 sm:flex-row">
@@ -675,7 +667,7 @@
           </div>
 
           <div class="space-y-1">
-            <label for="editVideoXs" class="block text-sm font-medium text-gray-200">
+            <label for="editVideoXs" class="block text-sm font-medium text-text">
               .torrent URL (xs=)
             </label>
             <div class="flex flex-col gap-2 sm:flex-row">
@@ -696,7 +688,7 @@
           </div>
 
           <div class="space-y-1">
-            <label for="editVideoMagnet" class="block text-sm font-medium text-gray-200">
+            <label for="editVideoMagnet" class="block text-sm font-medium text-text">
               Magnet link
             </label>
             <div class="flex flex-col gap-2 sm:flex-row">
@@ -717,7 +709,7 @@
           </div>
 
           <div class="space-y-1">
-            <label for="editVideoThumbnail" class="block text-sm font-medium text-gray-200">
+            <label for="editVideoThumbnail" class="block text-sm font-medium text-text">
               Thumbnail URL
             </label>
             <div class="flex flex-col gap-2 sm:flex-row">
@@ -738,7 +730,7 @@
           </div>
 
           <div class="space-y-1">
-            <label for="editVideoDescription" class="block text-sm font-medium text-gray-200">
+            <label for="editVideoDescription" class="block text-sm font-medium text-text">
               Description
             </label>
             <div class="flex flex-col gap-2">
@@ -759,11 +751,11 @@
           </div>
 
           <div class="space-y-1">
-            <span id="editVideoVisibilityLabel" class="block text-sm font-medium text-gray-200">
+            <span id="editVideoVisibilityLabel" class="block text-sm font-medium text-text">
               Visibility
             </span>
             <div
-              class="space-y-3 rounded-md border border-gray-800 bg-black/30 p-3"
+              class="space-y-3 rounded-md border border-border/70 bg-overlay-black/30 p-3"
               role="group"
               aria-labelledby="editVideoVisibilityLabel"
               data-visibility-toggle
@@ -798,7 +790,7 @@
                   aria-hidden="true"
                 />
               </div>
-              <p class="text-xs text-gray-400" data-visibility-helper>
+              <p class="text-xs text-muted" data-visibility-helper>
                 Private notes stay visible only to you. Switch back to public when you're ready to share.
               </p>
               <button
@@ -815,7 +807,7 @@
             <label
               for="editVideoIsNsfw"
               id="editVideoIsNsfwLabel"
-              class="block text-sm font-medium text-gray-200"
+              class="block text-sm font-medium text-text"
             >
               NSFW content
             </label>
@@ -831,7 +823,7 @@
                   class="checkbox"
                   data-default-checked="false"
                 />
-                <span class="text-sm text-gray-300">
+                <span class="text-sm text-muted-strong">
                   Mark as sensitive to blur previews and gate playback.
                 </span>
               </label>
@@ -851,7 +843,7 @@
             <label
               for="editVideoIsForKids"
               id="editVideoIsForKidsLabel"
-              class="block text-sm font-medium text-gray-200"
+              class="block text-sm font-medium text-text"
             >
               Made for kids
             </label>
@@ -867,7 +859,7 @@
                   class="checkbox"
                   data-default-checked="false"
                 />
-                <span class="text-sm text-gray-300">
+                <span class="text-sm text-muted-strong">
                   Flag kid-friendly videos to adjust recommendations and controls.
                 </span>
               </label>
@@ -887,7 +879,7 @@
             <label
               for="editEnableComments"
               id="editEnableCommentsLabel"
-              class="block text-sm font-medium text-gray-200"
+              class="block text-sm font-medium text-text"
             >
               Enable comments
             </label>
@@ -904,7 +896,7 @@
                   data-default-checked="true"
                   checked
                 />
-                <span class="text-sm text-gray-300">
+                <span class="text-sm text-muted-strong">
                   Allow replies once comment threads are available.
                 </span>
               </label>
diff --git a/components/feature-request-form.html b/components/feature-request-form.html
index 81d01c09..10c4b1d0 100644
--- a/components/feature-request-form.html
+++ b/components/feature-request-form.html
@@ -7,23 +7,19 @@
 >
   <div class="bv-modal-backdrop" data-dismiss></div>
 
-  <div
-    class="bv-modal__panel relative my-0 w-full max-w-[90%] overflow-hidden rounded-lg bg-gray-900 lg:max-w-6xl"
-  >
+  <div class="modal-sheet">
     <!-- Header bar (sticky) with updated title styling -->
-    <div
-      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"
-    >
-      <h2 class="pb-2 text-3xl font-extrabold tracking-wide text-white">
+    <div class="modal-header">
+      <h2 class="pb-2 text-3xl font-extrabold tracking-wide text-text">
         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"
+        class="modal-close"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          class="h-6 w-6 text-gray-300"
+          class="h-6 w-6 text-muted"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
@@ -38,13 +34,12 @@
       </button>
     </div>
 
-    <div class="p-6">
-      <div class="w-full" style="height: 80vh">
+    <div class="modal-body">
+      <div class="h-[80vh] w-full">
         <iframe
           src="./components/iframe_forms/iframe-request-form.html"
-          class="h-full w-full"
+          class="h-full w-full rounded-lg border border-border/30 shadow-sm"
           frameborder="0"
-          style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
         ></iframe>
       </div>
     </div>
diff --git a/components/general-feedback-form.html b/components/general-feedback-form.html
index 31975af2..053a2577 100644
--- a/components/general-feedback-form.html
+++ b/components/general-feedback-form.html
@@ -11,23 +11,19 @@
 >
   <div class="bv-modal-backdrop" data-dismiss></div>
 
-  <div
-    class="bv-modal__panel relative my-0 w-full max-w-[90%] overflow-hidden rounded-lg bg-gray-900 lg:max-w-6xl"
-  >
+  <div class="modal-sheet">
     <!-- Header bar (sticky) with updated title styling -->
-    <div
-      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"
-    >
-      <h2 class="pb-2 text-3xl font-extrabold tracking-wide text-white">
+    <div class="modal-header">
+      <h2 class="pb-2 text-3xl font-extrabold tracking-wide text-text">
         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"
+        class="modal-close"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          class="h-6 w-6 text-gray-300"
+          class="h-6 w-6 text-muted"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
@@ -42,13 +38,12 @@
       </button>
     </div>
 
-    <div class="p-6">
-      <div class="w-full" style="height: 80vh">
+    <div class="modal-body">
+      <div class="h-[80vh] w-full">
         <iframe
           src="./components/iframe_forms/iframe-feedback-form.html"
-          class="h-full w-full"
+          class="h-full w-full rounded-lg border border-border/30 shadow-sm"
           frameborder="0"
-          style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
         ></iframe>
       </div>
     </div>
diff --git a/components/login-modal.html b/components/login-modal.html
index fcbe5a65..95348190 100644
--- a/components/login-modal.html
+++ b/components/login-modal.html
@@ -1,21 +1,17 @@
 <div id="loginModal" class="bv-modal hidden items-start justify-center">
   <div class="bv-modal-backdrop" data-dismiss></div>
 
-  <div
-    class="bv-modal__panel bg-gray-900 w-full max-w-[90%] overflow-hidden lg:max-w-6xl"
-  >
+  <div class="modal-sheet overflow-hidden" tabindex="-1">
     <!-- Header with the special exit button (unchanged) -->
-    <div
-      class="sticky top-0 flex items-center justify-between bg-gradient-to-b from-black/80 to-transparent p-4"
-    >
-      <h2 class="text-xl font-bold text-white">Login Options</h2>
+    <div class="modal-header">
+      <h2 class="text-xl font-bold text-text">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"
+        class="modal-close"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          class="h-6 w-6 text-gray-300"
+          class="h-6 w-6 text-muted-strong"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
@@ -31,28 +27,28 @@
     </div>
 
     <!-- Body with buttons (unchanged) -->
-    <div class="space-y-4 p-6">
+    <div class="modal-body space-y-4">
       <!-- 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"
+        class="w-full rounded-md bg-info px-4 py-2 text-text hover:bg-info-strong focus:outline-none focus:ring-2 focus:ring-info focus:ring-offset-2"
       >
         Application Form
       </button>
 
       <!-- Simple horizontal rule -->
-      <div class="my-2 border-t border-gray-700"></div>
+      <div class="my-2 border-t border-border/60"></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"
+        class="w-full rounded-md bg-info px-4 py-2 text-text hover:bg-info-strong focus:outline-none focus:ring-2 focus:ring-info 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"
+        class="w-full cursor-not-allowed rounded-md bg-border/40 px-4 py-2 text-muted"
         disabled
       >
         Login with NSEC (Coming Soon)
diff --git a/components/profile-modal.html b/components/profile-modal.html
index 817228bd..44ac2b13 100644
--- a/components/profile-modal.html
+++ b/components/profile-modal.html
@@ -9,34 +9,26 @@
 >
   <div class="bv-modal-backdrop"></div>
 
-  <div
-    class="bv-modal__panel modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 flex flex-col overflow-hidden relative max-h-[90vh]"
-    tabindex="-1"
-  >
+  <div class="modal-sheet modal-content relative flex max-h-[90vh] flex-col overflow-hidden lg:max-w-6xl" tabindex="-1">
       <!-- Modal Header -->
-      <div class="sticky top-0 p-4">
-        <div class="card flex items-center justify-between gap-4 p-4">
-          <h2 id="profileModalTitle" class="text-xl font-bold text-white">Profile</h2>
-          <button
-            id="closeProfileModal"
-            class="focus-ring inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/50 text-gray-300 transition hover:bg-black/70"
+      <div class="modal-header">
+        <h2 id="profileModalTitle" class="text-xl font-bold text-text">Profile</h2>
+        <button id="closeProfileModal" class="modal-close">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6"
-              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>
 
       <!-- Modal Body -->
@@ -120,8 +112,8 @@
               <div id="profileSwitcherTray" class="card space-y-6 p-6">
                 <div class="flex flex-wrap items-start justify-between gap-4">
                   <div class="space-y-2">
-                    <h3 class="text-lg font-semibold text-white">Switch profiles</h3>
-                    <p class="text-sm text-gray-400">
+                    <h3 class="text-lg font-semibold text-text">Switch profiles</h3>
+                    <p class="text-sm text-muted">
                       Save multiple Nostr profiles so you can swap identities without leaving bitvid.
                     </p>
                   </div>
@@ -137,7 +129,7 @@
                   data-state="active"
                 >
                   <span
-                    class="flex h-12 w-12 flex-shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-blue-400/50 bg-slate-900"
+                    class="flex h-12 w-12 flex-shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-info/50 bg-surface"
                   >
                     <img
                       id="profileModalAvatar"
@@ -148,7 +140,7 @@
                   </span>
                   <div class="flex min-w-0 flex-1 flex-col gap-2">
                     <div class="flex flex-wrap items-center gap-3">
-                      <span class="text-[11px] font-semibold uppercase tracking-[0.2em] text-blue-200">
+                      <span class="text-[11px] font-semibold uppercase tracking-[0.2em] text-info">
                         Active profile
                       </span>
                       <a
@@ -159,8 +151,8 @@
                         View channel
                       </a>
                     </div>
-                    <span id="profileModalName" class="truncate text-sm font-semibold text-white">Loading...</span>
-                    <span id="profileModalNpub" class="break-all font-mono text-xs text-gray-400">npub1...</span>
+                    <span id="profileModalName" class="truncate text-sm font-semibold text-text">Loading...</span>
+                    <span id="profileModalNpub" class="break-all font-mono text-xs text-muted">npub1...</span>
                   </div>
                 </div>
 
@@ -180,7 +172,7 @@
                   aria-label="Add a new Nostr profile"
                 >
                   <span
-                    class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-500/20 text-blue-400"
+                    class="flex h-10 w-10 items-center justify-center rounded-full bg-info/20 text-info"
                     aria-hidden="true"
                   >
                     <svg
@@ -197,12 +189,12 @@
                     </svg>
                   </span>
                   <span class="flex flex-col text-left">
-                    <span data-profile-add-title class="text-sm font-semibold text-white">Add profile</span>
-                    <span data-profile-add-hint class="text-xs text-gray-300">Link another npub</span>
+                    <span data-profile-add-title class="text-sm font-semibold text-text">Add profile</span>
+                    <span data-profile-add-hint class="text-xs text-muted-strong">Link another npub</span>
                   </span>
                 </button>
 
-                <p class="text-sm text-gray-400">
+                <p class="text-sm text-muted">
                   Profiles you add here will stay on this device so you can quickly switch before posting or moderating.
                 </p>
               </div>
@@ -215,11 +207,11 @@
               aria-labelledby="profileNavRelays"
             >
               <div class="space-y-4">
-                <p class="text-sm text-gray-400">
+                <p class="text-sm text-muted">
                   Configure the relays bitvid will use to discover and publish your videos.
                 </p>
                 <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
-                  <label class="flex-1 text-sm text-gray-300" for="relayInput">
+                  <label class="flex-1 text-sm text-muted-strong" for="relayInput">
                     <span class="mb-2 block font-medium">Add a relay</span>
                     <input
                       id="relayInput"
@@ -256,11 +248,11 @@
               aria-labelledby="profileNavWallet"
             >
               <div class="space-y-4">
-                <p class="text-sm text-gray-400">
+                <p class="text-sm text-muted">
                   Connect a Nostr Wallet Connect (NWC) compatible wallet to zap creators directly from bitvid.
                 </p>
                 <div class="space-y-4">
-                  <label class="block text-sm text-gray-300" for="profileWalletUri">
+                  <label class="block text-sm text-muted-strong" for="profileWalletUri">
                     <span class="mb-2 block font-medium">Wallet Connect URI</span>
                     <input
                       id="profileWalletUri"
@@ -269,7 +261,7 @@
                       class="input"
                     />
                   </label>
-                  <label class="block text-sm text-gray-300" for="profileWalletDefaultZap">
+                  <label class="block text-sm text-muted-strong" for="profileWalletDefaultZap">
                     <span class="mb-2 block font-medium">Default zap amount (sats)</span>
                     <input
                       id="profileWalletDefaultZap"
@@ -308,7 +300,7 @@
                 </div>
                 <p
                   id="profileWalletStatus"
-                  class="text-sm text-gray-400"
+                  class="text-sm text-muted"
                   role="status"
                   aria-live="polite"
                 ></p>
@@ -321,12 +313,12 @@
               role="tabpanel"
               aria-labelledby="profileNavBlocked"
             >
-              <p class="text-sm text-gray-400">
+              <p class="text-sm text-muted">
                 Creators you block are hidden from your bitvid experience. This
                 list is private to your account.
               </p>
               <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
-                <label class="flex-1 text-sm text-gray-300" for="blockedInput">
+                <label class="flex-1 text-sm text-muted-strong" for="blockedInput">
                   <span class="mb-2 block font-medium">Creator npub</span>
                   <input
                     id="blockedInput"
@@ -347,7 +339,7 @@
               </div>
               <div
                 id="blockedEmpty"
-                class="card border border-dashed border-gray-700 p-6 text-center text-sm text-gray-400"
+                class="card border border-dashed border-border/60 p-6 text-center text-sm text-muted"
               >
                 You haven’t blocked any creators yet.
               </div>
@@ -359,7 +351,7 @@
               role="tabpanel"
               aria-labelledby="profileNavHistory"
             >
-              <p class="text-sm text-gray-400">
+              <p class="text-sm text-muted">
                 Your recently watched videos appear here so you can jump back into favorites.
               </p>
               <div
@@ -394,13 +386,13 @@
                     <div class="flex flex-col">
                       <span
                         id="profileHistoryMetadataLabel"
-                        class="text-sm font-medium text-gray-200"
+                        class="text-sm font-medium text-text"
                       >
                         Store titles/thumbnails locally
                       </span>
                       <span
                         id="profileHistoryMetadataDescription"
-                        class="text-xs text-gray-400"
+                        class="text-xs text-muted"
                       >
                         When disabled, bitvid skips saving rich metadata to this device.
                       </span>
@@ -408,7 +400,7 @@
                     <button
                       id="profileHistoryMetadataToggle"
                       type="button"
-                      class="focus-ring relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer items-center rounded-full border border-gray-600 bg-gray-700 transition"
+                      class="focus-ring relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer items-center rounded-full border border-border bg-panel transition"
                       role="switch"
                       aria-checked="true"
                       aria-labelledby="profileHistoryMetadataLabel"
@@ -458,13 +450,13 @@
                 </div>
                 <div
                   id="profileHistoryError"
-                  class="card hidden border border-red-500/40 bg-red-500/10 px-4 py-3 text-sm text-red-100"
+                  class="card hidden border border-critical/40 bg-critical/10 px-4 py-3 text-sm text-critical"
                   role="alert"
                   aria-live="assertive"
                 ></div>
                 <div
                   id="profileHistoryEmpty"
-                  class="card hidden border border-dashed border-gray-700 p-6 text-center text-sm text-gray-400"
+                  class="card hidden border border-dashed border-border/60 p-6 text-center text-sm text-muted"
                 >
                   You haven’t watched any videos yet.
                 </div>
@@ -487,24 +479,24 @@
               aria-labelledby="profileNavAdmin"
             >
               <div class="space-y-2">
-                <h3 class="text-lg font-semibold text-white">Platform moderation</h3>
-                <p class="text-sm text-gray-400">
+                <h3 class="text-lg font-semibold text-text">Platform moderation</h3>
+                <p class="text-sm text-muted">
                   Manage bitvid’s moderator roles and creator allow/block lists. Changes apply instantly across the app.
                 </p>
               </div>
 
               <div id="adminModeratorsSection" class="space-y-4 hidden" aria-hidden="true">
                 <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-                  <h4 class="text-base font-semibold text-white">Moderators</h4>
-                  <p class="text-xs uppercase tracking-wide text-gray-400">
+                  <h4 class="text-base font-semibold text-text">Moderators</h4>
+                  <p class="text-xs uppercase tracking-wide text-muted">
                     Super Admin only
                   </p>
                 </div>
-                <p class="text-sm text-gray-400">
+                <p class="text-sm text-muted">
                   Moderators can edit the whitelist and blacklist but cannot manage other moderators or whitelist mode.
                 </p>
                 <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
-                  <label class="flex-1 text-sm text-gray-300" for="adminModeratorInput">
+                  <label class="flex-1 text-sm text-muted-strong" for="adminModeratorInput">
                     <span class="mb-2 block font-medium">Moderator npub</span>
                     <input
                       id="adminModeratorInput"
@@ -525,7 +517,7 @@
                 </div>
                 <div
                   id="adminModeratorsEmpty"
-                  class="card border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
+                  class="card border border-dashed border-border/60 p-4 text-center text-sm text-muted"
                 >
                   No moderators configured yet.
                 </div>
@@ -534,13 +526,13 @@
 
               <div id="adminWhitelistSection" class="space-y-4">
                 <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-                  <h4 class="text-base font-semibold text-white">Whitelist</h4>
+                  <h4 class="text-base font-semibold text-text">Whitelist</h4>
                 </div>
-                <p class="text-sm text-gray-400">
+                <p class="text-sm text-muted">
                   Creators listed here remain visible when whitelist mode is enabled. Adding someone removes them from the blacklist.
                 </p>
                 <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
-                  <label class="flex-1 text-sm text-gray-300" for="adminWhitelistInput">
+                  <label class="flex-1 text-sm text-muted-strong" for="adminWhitelistInput">
                     <span class="mb-2 block font-medium">Creator npub</span>
                     <input
                       id="adminWhitelistInput"
@@ -561,7 +553,7 @@
                 </div>
                 <div
                   id="adminWhitelistEmpty"
-                  class="card border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
+                  class="card border border-dashed border-border/60 p-4 text-center text-sm text-muted"
                 >
                   No whitelisted creators yet.
                 </div>
@@ -570,13 +562,13 @@
 
               <div id="adminBlacklistSection" class="space-y-4">
                 <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-                  <h4 class="text-base font-semibold text-white">Blacklist</h4>
+                  <h4 class="text-base font-semibold text-text">Blacklist</h4>
                 </div>
-                <p class="text-sm text-gray-400">
+                <p class="text-sm text-muted">
                   Creators on the blacklist are hidden from bitvid everywhere. Adding someone removes them from the whitelist.
                 </p>
                 <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
-                  <label class="flex-1 text-sm text-gray-300" for="adminBlacklistInput">
+                  <label class="flex-1 text-sm text-muted-strong" for="adminBlacklistInput">
                     <span class="mb-2 block font-medium">Creator npub</span>
                     <input
                       id="adminBlacklistInput"
@@ -597,7 +589,7 @@
                 </div>
                 <div
                   id="adminBlacklistEmpty"
-                  class="card border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
+                  class="card border border-dashed border-border/60 p-4 text-center text-sm text-muted"
                 >
                   No blacklisted creators yet.
                 </div>
@@ -609,7 +601,7 @@
       </div>
 
       <!-- Modal Footer -->
-      <div class="flex items-center justify-end gap-3 border-t border-gray-700 p-4">
+      <div class="flex items-center justify-end gap-3 border-t border-border/60 p-4">
         <button id="profileLogoutBtn" class="btn focus-ring" data-variant="danger">
           Logout
         </button>
diff --git a/components/revert-video-modal.html b/components/revert-video-modal.html
index 5b8480cb..8671cdd8 100644
--- a/components/revert-video-modal.html
+++ b/components/revert-video-modal.html
@@ -13,30 +13,25 @@
     data-dismiss
   ></div>
 
-  <div
-    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="from-black/80 sticky top-0 flex items-center justify-between bg-gradient-to-b to-transparent p-4 transition-transform duration-150"
-      >
+  <div class="modal-sheet max-h-[92vh] overflow-hidden lg:max-w-5xl" tabindex="-1">
+      <div class="modal-header transition-transform duration-150">
         <div class="flex flex-col">
-          <h2 id="revertModalTitle" class="text-xl font-bold text-white">
+          <h2 id="revertModalTitle" class="text-xl font-bold text-text">
             Revert Video Note
           </h2>
-          <p id="revertModalSubtitle" class="text-xs text-gray-400">
+          <p id="revertModalSubtitle" class="text-xs text-muted">
             Review previous versions before restoring an older state.
           </p>
         </div>
         <button
           id="closeRevertVideoModal"
-          class="bg-black/50 hover:bg-black/70 flex h-10 w-10 items-center justify-center rounded-full backdrop-blur transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-black"
+          class="modal-close"
           type="button"
           aria-label="Close revert modal"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="h-6 w-6 text-gray-300"
+            class="h-6 w-6 text-muted-strong"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
@@ -51,26 +46,23 @@
         </button>
       </div>
 
-      <div
-        class="space-y-6 overflow-y-auto p-6"
-        style="max-height: calc(92vh - 4rem)"
-      >
+      <div class="modal-body space-y-6 overflow-y-auto max-h-[calc(92vh-4rem)]">
         <div
-          class="rounded-md border border-gray-700 bg-gray-800/60 p-4 text-sm text-gray-300"
+          class="rounded-md border border-border/60 bg-panel/60 p-4 text-sm text-muted-strong"
         >
           <p>
             Selecting an older version will mark any newer edits as reverted.
             The previous revision will become the active note on the relays.
           </p>
-          <p class="mt-2 text-xs text-gray-400">
+          <p class="mt-2 text-xs text-muted">
             Versions are grouped by their
             <code
-              class="rounded border border-gray-700 bg-gray-900/60 px-1 py-0.5 text-[0.7rem]"
+              class="rounded border border-border/60 bg-surface/60 px-1 py-0.5 text-[0.7rem]"
               >d</code
             >
             tag or shared
             <code
-              class="rounded border border-gray-700 bg-gray-900/60 px-1 py-0.5 text-[0.7rem]"
+              class="rounded border border-border/60 bg-surface/60 px-1 py-0.5 text-[0.7rem]"
               >videoRootId</code
             >. This ensures legacy clients see consistent history when multiple
             edits were published, and keeps audience flags (NSFW / for kids)
@@ -81,24 +73,23 @@
         <div class="grid gap-6 lg:grid-cols-[minmax(240px,280px)_1fr]">
           <aside class="space-y-4">
             <div class="flex items-center justify-between">
-              <h3 class="text-sm font-semibold text-gray-200">
+              <h3 class="text-sm font-semibold text-text">
                 Revision history
               </h3>
               <span
                 id="revertHistoryCount"
-                class="rounded-full bg-gray-800 px-2 py-0.5 text-xs text-gray-400"
+                class="rounded-full bg-panel px-2 py-0.5 text-xs text-muted"
               ></span>
             </div>
             <div
               id="revertVersionsList"
-              class="space-y-2 overflow-y-auto pr-1"
-              style="max-height: 48vh"
+              class="space-y-2 overflow-y-auto pr-1 max-h-[48vh]"
             ></div>
           </aside>
 
           <section
             id="revertVersionDetails"
-            class="rounded-lg border border-gray-800 bg-gray-900/70 p-4 text-sm text-gray-200"
+            class="rounded-lg border border-border/70 bg-surface/70 p-4 text-sm text-text"
             aria-live="polite"
           >
             <!-- NOTE: Keep Upload/Edit metadata fields mirrored when adjusting these sections. -->
@@ -109,80 +100,80 @@
               <div class="space-y-2 text-center">
                 <h3
                   id="revertVersionPlaceholderHeading"
-                  class="text-sm font-semibold text-gray-200"
+                  class="text-sm font-semibold text-text"
                 >
                   Revision metadata
                 </h3>
-                <p id="revertVersionPlaceholder" class="text-sm text-gray-500">
+                <p id="revertVersionPlaceholder" class="text-sm text-muted">
                   Select an earlier revision to inspect its metadata.
                 </p>
               </div>
 
               <section class="space-y-2">
                 <h4
-                  class="text-xs font-semibold uppercase tracking-wide text-gray-400"
+                  class="text-xs font-semibold uppercase tracking-wide text-muted"
                 >
                   Playback sources
                 </h4>
-                <dl class="grid gap-2 text-xs text-gray-400 sm:grid-cols-2">
+                <dl class="grid gap-2 text-xs text-muted sm:grid-cols-2">
                   <div class="space-y-1">
-                    <dt class="font-semibold text-gray-300">Hosted URL</dt>
-                    <dd class="text-gray-500">Awaiting selection</dd>
+                    <dt class="font-semibold text-muted-strong">Hosted URL</dt>
+                    <dd class="text-muted">Awaiting selection</dd>
                   </div>
                   <div class="space-y-1">
-                    <dt class="font-semibold text-gray-300">Magnet</dt>
-                    <dd class="text-gray-500">Awaiting selection</dd>
+                    <dt class="font-semibold text-muted-strong">Magnet</dt>
+                    <dd class="text-muted">Awaiting selection</dd>
                   </div>
                 </dl>
               </section>
 
               <section class="space-y-2">
                 <h4
-                  class="text-xs font-semibold uppercase tracking-wide text-gray-400"
+                  class="text-xs font-semibold uppercase tracking-wide text-muted"
                 >
                   Audience flags
                 </h4>
-                <dl class="grid gap-2 text-xs text-gray-400 sm:grid-cols-2">
+                <dl class="grid gap-2 text-xs text-muted sm:grid-cols-2">
                   <div class="space-y-1">
-                    <dt class="font-semibold text-gray-300">NSFW flag</dt>
-                    <dd class="text-gray-500">Awaiting selection</dd>
+                    <dt class="font-semibold text-muted-strong">NSFW flag</dt>
+                    <dd class="text-muted">Awaiting selection</dd>
                   </div>
                   <div class="space-y-1">
-                    <dt class="font-semibold text-gray-300">For kids flag</dt>
-                    <dd class="text-gray-500">Awaiting selection</dd>
+                    <dt class="font-semibold text-muted-strong">For kids flag</dt>
+                    <dd class="text-muted">Awaiting selection</dd>
                   </div>
                 </dl>
               </section>
 
               <section class="space-y-2">
                 <h4
-                  class="text-xs font-semibold uppercase tracking-wide text-gray-400"
+                  class="text-xs font-semibold uppercase tracking-wide text-muted"
                 >
                   NIP-71 event metadata
                 </h4>
-                <dl class="grid gap-2 text-xs text-gray-400 sm:grid-cols-2">
+                <dl class="grid gap-2 text-xs text-muted sm:grid-cols-2">
                   <div class="space-y-1">
-                    <dt class="font-semibold text-gray-300">Kind</dt>
-                    <dd class="text-gray-500">Awaiting selection</dd>
+                    <dt class="font-semibold text-muted-strong">Kind</dt>
+                    <dd class="text-muted">Awaiting selection</dd>
                   </div>
                   <div class="space-y-1">
-                    <dt class="font-semibold text-gray-300">Duration</dt>
-                    <dd class="text-gray-500">Awaiting selection</dd>
+                    <dt class="font-semibold text-muted-strong">Duration</dt>
+                    <dd class="text-muted">Awaiting selection</dd>
                   </div>
                   <div class="space-y-1 sm:col-span-2">
-                    <dt class="font-semibold text-gray-300">Summary</dt>
-                    <dd class="text-gray-500">Awaiting selection</dd>
+                    <dt class="font-semibold text-muted-strong">Summary</dt>
+                    <dd class="text-muted">Awaiting selection</dd>
                   </div>
                 </dl>
               </section>
 
               <section class="space-y-2">
                 <h4
-                  class="text-xs font-semibold uppercase tracking-wide text-gray-400"
+                  class="text-xs font-semibold uppercase tracking-wide text-muted"
                 >
                   NIP-71 media metadata
                 </h4>
-                <p class="text-xs text-gray-500">
+                <p class="text-xs text-muted">
                   Media variants, text tracks, chapters, hashtags, participants,
                   and references will appear once a revision is selected.
                 </p>
@@ -191,20 +182,20 @@
           </section>
         </div>
 
-        <p id="revertSelectionStatus" class="text-xs text-gray-400"></p>
+        <p id="revertSelectionStatus" class="text-xs text-muted"></p>
 
         <div class="flex flex-col gap-3 sm:flex-row sm:justify-end">
           <button
             type="button"
             id="cancelRevertVideo"
-            class="w-full rounded-md bg-gray-800 px-4 py-2 text-gray-200 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-900 sm:w-auto"
+            class="w-full rounded-md bg-panel px-4 py-2 text-text hover:bg-panel focus:outline-none focus:ring-2 focus:ring-info focus:ring-offset-2 focus:ring-offset-surface sm:w-auto"
           >
             Cancel
           </button>
           <button
             type="button"
             id="confirmRevertVideo"
-            class="w-full rounded-md bg-red-600 px-4 py-2 text-white hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto"
+            class="w-full rounded-md bg-critical px-4 py-2 text-text hover:bg-critical-strong focus:outline-none focus:ring-2 focus:ring-critical-strong focus:ring-offset-2 focus:ring-offset-surface disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto"
             disabled
           >
             Revert to selected version
diff --git a/components/upload-modal.html b/components/upload-modal.html
index 937de90d..f23510cd 100644
--- a/components/upload-modal.html
+++ b/components/upload-modal.html
@@ -10,27 +10,22 @@
   <div class="bv-modal-backdrop" data-dismiss></div>
 
   <!-- Modal Container -->
-  <div
-    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-sheet max-h-[90vh] overflow-y-auto" 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"
-      >
-        <h2 id="uploadModalTitle" class="text-xl font-bold text-white">
+      <div class="modal-header transition-transform duration-150">
+        <h2 id="uploadModalTitle" class="text-xl font-bold text-text">
           Share a Video
         </h2>
         <button
           id="closeUploadModal"
-          class="bg-black/50 hover:bg-black/70 flex h-10 w-10 items-center justify-center rounded-full backdrop-blur transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-black"
+          class="modal-close"
           type="button"
           aria-label="Close upload modal"
         >
           <!-- X or arrow icon -->
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="h-6 w-6 text-gray-300"
+            class="h-6 w-6 text-muted-strong"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
@@ -46,16 +41,16 @@
       </div>
 
       <!-- Form Content -->
-      <div class="space-y-6 p-6">
+      <div class="modal-body space-y-6">
         <div class="flex justify-center">
           <div
-            class="inline-flex items-center rounded-full bg-gray-800/80 p-1 text-sm"
+            class="inline-flex items-center rounded-full bg-panel/80 p-1 text-sm"
             role="group"
             aria-label="Upload mode selector"
           >
             <button
               type="button"
-              class="upload-mode-toggle flex-1 rounded-full px-4 py-2 font-medium text-gray-300 transition-colors hover:bg-gray-700/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
+              class="upload-mode-toggle flex-1 rounded-full px-4 py-2 font-medium text-muted-strong transition-colors hover:bg-panel/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-info focus-visible:ring-offset-2 focus-visible:ring-offset-surface"
               data-upload-mode="custom"
               aria-pressed="true"
             >
@@ -63,7 +58,7 @@
             </button>
             <button
               type="button"
-              class="upload-mode-toggle flex-1 rounded-full px-4 py-2 font-medium text-gray-300 transition-colors hover:bg-gray-700/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
+              class="upload-mode-toggle flex-1 rounded-full px-4 py-2 font-medium text-muted-strong transition-colors hover:bg-panel/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-info focus-visible:ring-offset-2 focus-visible:ring-offset-surface"
               data-upload-mode="cloudflare"
               aria-pressed="false"
             >
@@ -74,21 +69,21 @@
 
         <div id="customUploadSection">
           <form id="uploadForm" class="space-y-6">
-            <p id="uploadModalDescription" class="text-sm text-gray-400">
+            <p id="uploadModalDescription" class="text-sm text-muted">
               Share a title plus either a hosted video URL or a magnet link.
               Providing both helps bitvid fall back gracefully.
             </p>
             <div class="space-y-2">
               <label
                 for="uploadTitle"
-                class="block text-sm font-medium text-gray-200"
+                class="block text-sm font-medium text-text"
                 >Title</label
               >
               <input type="text" id="uploadTitle" required class="input" />
             </div>
 
             <div
-              class="bg-black/30 space-y-4 rounded-lg border border-gray-800 p-4"
+              class="bg-overlay-black/30 space-y-4 rounded-lg border border-border/70 p-4"
               id="nip71EventDetails"
               data-nip71-section="event-details"
             >
@@ -97,14 +92,14 @@
                 class="space-y-2"
                 data-nip71-fieldset="kind"
               >
-                <legend class="text-sm font-semibold text-gray-200">
+                <legend class="text-sm font-semibold text-text">
                   NIP-71 event type
                 </legend>
-                <p class="text-xs text-gray-400">
+                <p class="text-xs text-muted">
                   Choose the video format.
-                  <span class="font-medium text-gray-300">Kind 21</span> is a
+                  <span class="font-medium text-muted-strong">Kind 21</span> is a
                   full video, while
-                  <span class="font-medium text-gray-300">Kind 22</span> is a
+                  <span class="font-medium text-muted-strong">Kind 22</span> is a
                   short.
                 </p>
                 <div
@@ -127,9 +122,9 @@
                         value="21"
                         checked
                         data-nip71-input="kind"
-                        class="h-4 w-4 border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                        class="h-4 w-4 border-border bg-panel text-info focus:ring-info"
                       />
-                      <span class="text-sm text-gray-200"
+                      <span class="text-sm text-text"
                         >Normal video (kind 21)</span
                       >
                     </label>
@@ -143,9 +138,9 @@
                         id="nip71KindShort"
                         value="22"
                         data-nip71-input="kind"
-                        class="h-4 w-4 border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                        class="h-4 w-4 border-border bg-panel text-info focus:ring-info"
                       />
-                      <span class="text-sm text-gray-200"
+                      <span class="text-sm text-text"
                         >Short video (kind 22)</span
                       >
                     </label>
@@ -157,7 +152,7 @@
                 <div class="space-y-2">
                   <label
                     for="nip71PublishedAt"
-                    class="block text-sm font-medium text-gray-200"
+                    class="block text-sm font-medium text-text"
                     >Published at</label
                   >
                   <input
@@ -166,14 +161,14 @@
                     data-nip71-input="published_at"
                     class="input"
                   />
-                  <p class="text-xs text-gray-400">
+                  <p class="text-xs text-muted">
                     Set the canonical publish time for cross-client ordering.
                   </p>
                 </div>
                 <div class="space-y-2">
                   <label
                     for="nip71AltText"
-                    class="block text-sm font-medium text-gray-200"
+                    class="block text-sm font-medium text-text"
                     >Alt text</label
                   >
                   <input
@@ -183,14 +178,14 @@
                     placeholder="Describe the visuals for screen readers"
                     class="input"
                   />
-                  <p class="text-xs text-gray-400">
+                  <p class="text-xs text-muted">
                     Plain-language fallback shown when the media cannot load.
                   </p>
                 </div>
                 <div class="space-y-2">
                   <label
                     for="nip71Duration"
-                    class="block text-sm font-medium text-gray-200"
+                    class="block text-sm font-medium text-text"
                     >Duration (seconds)</label
                   >
                   <input
@@ -201,14 +196,14 @@
                     data-nip71-input="duration"
                     class="input"
                   />
-                  <p class="text-xs text-gray-400">
+                  <p class="text-xs text-muted">
                     Provide the runtime in whole seconds for timeline scrubbing.
                   </p>
                 </div>
                 <div class="space-y-2">
                   <label
                     for="nip71ContentWarning"
-                    class="block text-sm font-medium text-gray-200"
+                    class="block text-sm font-medium text-text"
                     >Content warning</label
                   >
                   <input
@@ -218,7 +213,7 @@
                     placeholder="e.g., Flashing lights"
                     class="input"
                   />
-                  <p class="text-xs text-gray-400">
+                  <p class="text-xs text-muted">
                     Leave blank if the video is safe for all audiences.
                   </p>
                 </div>
@@ -227,7 +222,7 @@
               <div class="space-y-2">
                 <label
                   for="nip71Summary"
-                  class="block text-sm font-medium text-gray-200"
+                  class="block text-sm font-medium text-text"
                   >Summary</label
                 >
                 <textarea
@@ -237,7 +232,7 @@
                   class="textarea"
                   placeholder="Short synopsis used as the Nostr content field"
                 ></textarea>
-                <p class="text-xs text-gray-400">
+                <p class="text-xs text-muted">
                   This becomes the event content. Keep it concise for Nostr
                   readers.
                 </p>
@@ -248,7 +243,7 @@
             <div class="form-group space-y-2">
               <label
                 for="uploadUrl"
-                class="block text-sm font-medium text-gray-200"
+                class="block text-sm font-medium text-text"
                 >Hosted video URL (https)</label
               >
               <input
@@ -257,7 +252,7 @@
                 class="input"
                 placeholder="https://cdn.example.com/video.mp4"
               />
-              <small class="block text-xs text-gray-400"
+              <small class="block text-xs text-muted"
                 >Optional but preferred. We will play this first and fall back
                 to P2P.</small
               >
@@ -282,7 +277,7 @@
             <div class="space-y-2">
               <label
                 for="uploadMagnet"
-                class="block text-sm font-medium text-gray-200"
+                class="block text-sm font-medium text-text"
                 >Magnet link (optional if URL provided)</label
               >
               <input
@@ -291,7 +286,7 @@
                 placeholder="magnet:?xt=urn:btih:..."
                 class="input"
               />
-              <p class="text-xs text-gray-400">
+              <p class="text-xs text-muted">
                 Provide a hosted URL for instant playback. Add a magnet for P2P
                 cost control.
               </p>
@@ -299,7 +294,7 @@
             <div class="space-y-2">
               <label
                 for="uploadThumbnail"
-                class="block text-sm font-medium text-gray-200"
+                class="block text-sm font-medium text-text"
                 >Thumbnail URL (optional)</label
               >
               <input type="url" id="uploadThumbnail" class="input" />
@@ -308,7 +303,7 @@
             <div class="space-y-2">
               <label
                 for="uploadDescription"
-                class="block text-sm font-medium text-gray-200"
+                class="block text-sm font-medium text-text"
                 >Legacy description (optional)</label
               >
               <textarea
@@ -316,22 +311,22 @@
                 rows="3"
                 class="textarea"
               ></textarea>
-              <p class="text-xs text-gray-400">
+              <p class="text-xs text-muted">
                 Kept for older clients that rely on the legacy description tag.
               </p>
             </div>
 
             <fieldset
               id="nip71TagsFieldset"
-              class="bg-black/30 space-y-6 rounded-lg border border-gray-800 p-4"
+              class="bg-overlay-black/30 space-y-6 rounded-lg border border-border/70 p-4"
               data-nip71-section="tags"
             >
-              <legend class="relative text-sm font-semibold text-gray-200">
-                <span class="bg-black/30 -ml-2 inline-block rounded px-2"
+              <legend class="relative text-sm font-semibold text-text">
+                <span class="bg-overlay-black/30 -ml-2 inline-block rounded px-2"
                   >NIP-71 tags</span
                 >
               </legend>
-              <p class="text-xs text-gray-400">
+              <p class="text-xs text-muted">
                 Use the controls below to describe media variants, captions,
                 chapters, participants, and references.
               </p>
@@ -344,20 +339,20 @@
                 <div class="flex items-center justify-between">
                   <h3
                     id="nip71ImetaLabel"
-                    class="text-sm font-medium text-gray-200"
+                    class="text-sm font-medium text-text"
                   >
                     Image metadata (imeta)
                   </h3>
                   <button
                     type="button"
-                    class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                    class="rounded-md border border-border/60 px-3 py-1 text-xs font-semibold text-text hover:border-border hover:text-text"
                     data-nip71-add="imeta"
                     aria-describedby="nip71ImetaHelp"
                   >
                     Add variant
                   </button>
                 </div>
-                <p id="nip71ImetaHelp" class="text-xs text-gray-400">
+                <p id="nip71ImetaHelp" class="text-xs text-muted">
                   Provide dimensions, MIME type, and resource links for each
                   variant. Nested repeaters let you attach multiple
                   <code>image</code>, <code>fallback</code>, or
@@ -370,12 +365,12 @@
                 ></div>
                 <template id="nip71ImetaTemplate" data-nip71-template="imeta">
                   <article
-                    class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4"
+                    class="space-y-3 rounded-md border border-border/70 bg-surface/60 p-4"
                     data-nip71-entry="imeta"
                   >
                     <div class="grid gap-3 md:grid-cols-2">
                       <div class="space-y-2">
-                        <label class="block text-xs font-medium text-gray-300">
+                        <label class="block text-xs font-medium text-muted-strong">
                           MIME type (<code>m</code>)
                         </label>
                         <input
@@ -384,12 +379,12 @@
                           placeholder="video/mp4"
                           class="input"
                         />
-                        <p class="text-[11px] text-gray-500">
+                        <p class="text-[11px] text-muted">
                           RFC 2046 media type for this encoding.
                         </p>
                       </div>
                       <div class="space-y-2">
-                        <label class="block text-xs font-medium text-gray-300">
+                        <label class="block text-xs font-medium text-muted-strong">
                           Pixel dimensions (<code>dim</code>)
                         </label>
                         <input
@@ -398,12 +393,12 @@
                           placeholder="1920x1080"
                           class="input"
                         />
-                        <p class="text-[11px] text-gray-500">
+                        <p class="text-[11px] text-muted">
                           Formatted as widthxheight.
                         </p>
                       </div>
                       <div class="space-y-2">
-                        <label class="block text-xs font-medium text-gray-300">
+                        <label class="block text-xs font-medium text-muted-strong">
                           Streaming URL (<code>url</code>)
                         </label>
                         <input
@@ -412,12 +407,12 @@
                           placeholder="https://cdn.example.com/variant.m3u8"
                           class="input"
                         />
-                        <p class="text-[11px] text-gray-500">
+                        <p class="text-[11px] text-muted">
                           HTTPS variant URL shared across clients.
                         </p>
                       </div>
                       <div class="space-y-2">
-                        <label class="block text-xs font-medium text-gray-300">
+                        <label class="block text-xs font-medium text-muted-strong">
                           Magnet (<code>x</code>)
                         </label>
                         <input
@@ -426,7 +421,7 @@
                           placeholder="magnet:?xt=urn:btih:..."
                           class="input"
                         />
-                        <p class="text-[11px] text-gray-500">
+                        <p class="text-[11px] text-muted">
                           Optional magnet pointer if the variant is seeded via
                           P2P.
                         </p>
@@ -436,13 +431,13 @@
                     <div class="space-y-3" data-nip71-nested="image">
                       <div class="flex items-center justify-between">
                         <h4
-                          class="text-xs font-semibold uppercase tracking-wide text-gray-400"
+                          class="text-xs font-semibold uppercase tracking-wide text-muted"
                         >
                           Image values
                         </h4>
                         <button
                           type="button"
-                          class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
+                          class="rounded border border-border/60 px-2 py-1 text-[11px] text-text hover:border-border hover:text-text"
                           data-nip71-nested-add="image"
                         >
                           Add image URL
@@ -465,7 +460,7 @@
                           />
                           <button
                             type="button"
-                            class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                            class="rounded border border-border/60 px-2 py-1 text-[11px] text-muted-strong hover:border-border hover:text-text"
                             data-nip71-remove="nested"
                             aria-label="Remove image URL"
                           >
@@ -478,13 +473,13 @@
                     <div class="space-y-3" data-nip71-nested="fallback">
                       <div class="flex items-center justify-between">
                         <h4
-                          class="text-xs font-semibold uppercase tracking-wide text-gray-400"
+                          class="text-xs font-semibold uppercase tracking-wide text-muted"
                         >
                           Fallback URLs
                         </h4>
                         <button
                           type="button"
-                          class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
+                          class="rounded border border-border/60 px-2 py-1 text-[11px] text-text hover:border-border hover:text-text"
                           data-nip71-nested-add="fallback"
                         >
                           Add fallback
@@ -507,7 +502,7 @@
                           />
                           <button
                             type="button"
-                            class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                            class="rounded border border-border/60 px-2 py-1 text-[11px] text-muted-strong hover:border-border hover:text-text"
                             data-nip71-remove="nested"
                             aria-label="Remove fallback URL"
                           >
@@ -520,13 +515,13 @@
                     <div class="space-y-3" data-nip71-nested="service">
                       <div class="flex items-center justify-between">
                         <h4
-                          class="text-xs font-semibold uppercase tracking-wide text-gray-400"
+                          class="text-xs font-semibold uppercase tracking-wide text-muted"
                         >
                           Services
                         </h4>
                         <button
                           type="button"
-                          class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
+                          class="rounded border border-border/60 px-2 py-1 text-[11px] text-text hover:border-border hover:text-text"
                           data-nip71-nested-add="service"
                         >
                           Add service hint
@@ -549,7 +544,7 @@
                           />
                           <button
                             type="button"
-                            class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                            class="rounded border border-border/60 px-2 py-1 text-[11px] text-muted-strong hover:border-border hover:text-text"
                             data-nip71-remove="nested"
                             aria-label="Remove service hint"
                           >
@@ -561,7 +556,7 @@
 
                     <button
                       type="button"
-                      class="rounded-md border border-red-500/50 px-3 py-1 text-xs font-semibold text-red-300 hover:border-red-400 hover:text-red-200"
+                      class="rounded-md border border-critical/60 px-3 py-1 text-xs font-semibold text-critical hover:border-critical hover:text-critical-strong"
                       data-nip71-remove="imeta"
                     >
                       Remove variant
@@ -578,20 +573,20 @@
                 <div class="flex items-center justify-between">
                   <h3
                     id="nip71TextTracksLabel"
-                    class="text-sm font-medium text-gray-200"
+                    class="text-sm font-medium text-text"
                   >
                     Caption &amp; subtitle tracks (text-track)
                   </h3>
                   <button
                     type="button"
-                    class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                    class="rounded-md border border-border/60 px-3 py-1 text-xs font-semibold text-text hover:border-border hover:text-text"
                     data-nip71-add="text-track"
                     aria-describedby="nip71TextTracksHelp"
                   >
                     Add track
                   </button>
                 </div>
-                <p id="nip71TextTracksHelp" class="text-xs text-gray-400">
+                <p id="nip71TextTracksHelp" class="text-xs text-muted">
                   Point to VTT/SRT caption files and optionally declare the
                   language code (BCP-47).
                 </p>
@@ -605,12 +600,12 @@
                   data-nip71-template="text-track"
                 >
                   <article
-                    class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4"
+                    class="space-y-3 rounded-md border border-border/70 bg-surface/60 p-4"
                     data-nip71-entry="text-track"
                   >
                     <div class="grid gap-3 md:grid-cols-3">
                       <div class="space-y-2">
-                        <label class="block text-xs font-medium text-gray-300"
+                        <label class="block text-xs font-medium text-muted-strong"
                           >Resource URL</label
                         >
                         <input
@@ -619,12 +614,12 @@
                           placeholder="https://cdn.example.com/captions.en.vtt"
                           class="input"
                         />
-                        <p class="text-[11px] text-gray-500">
+                        <p class="text-[11px] text-muted">
                           Direct link to the caption file.
                         </p>
                       </div>
                       <div class="space-y-2">
-                        <label class="block text-xs font-medium text-gray-300"
+                        <label class="block text-xs font-medium text-muted-strong"
                           >Track type</label
                         >
                         <input
@@ -633,12 +628,12 @@
                           placeholder="subtitles"
                           class="input"
                         />
-                        <p class="text-[11px] text-gray-500">
+                        <p class="text-[11px] text-muted">
                           Use values like captions, subtitles, or descriptions.
                         </p>
                       </div>
                       <div class="space-y-2">
-                        <label class="block text-xs font-medium text-gray-300"
+                        <label class="block text-xs font-medium text-muted-strong"
                           >Language (optional)</label
                         >
                         <input
@@ -647,14 +642,14 @@
                           placeholder="en-US"
                           class="input"
                         />
-                        <p class="text-[11px] text-gray-500">
+                        <p class="text-[11px] text-muted">
                           BCP-47 locale code.
                         </p>
                       </div>
                     </div>
                     <button
                       type="button"
-                      class="rounded-md border border-red-500/50 px-3 py-1 text-xs font-semibold text-red-300 hover:border-red-400 hover:text-red-200"
+                      class="rounded-md border border-critical/60 px-3 py-1 text-xs font-semibold text-critical hover:border-critical hover:text-critical-strong"
                       data-nip71-remove="text-track"
                     >
                       Remove track
@@ -671,20 +666,20 @@
                 <div class="flex items-center justify-between">
                   <h3
                     id="nip71SegmentsLabel"
-                    class="text-sm font-medium text-gray-200"
+                    class="text-sm font-medium text-text"
                   >
                     Chapters &amp; segments (segment)
                   </h3>
                   <button
                     type="button"
-                    class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                    class="rounded-md border border-border/60 px-3 py-1 text-xs font-semibold text-text hover:border-border hover:text-text"
                     data-nip71-add="segment"
                     aria-describedby="nip71SegmentsHelp"
                   >
                     Add segment
                   </button>
                 </div>
-                <p id="nip71SegmentsHelp" class="text-xs text-gray-400">
+                <p id="nip71SegmentsHelp" class="text-xs text-muted">
                   Outline the timeline using HH:MM:SS timestamps. Thumbnail URLs
                   are optional.
                 </p>
@@ -698,12 +693,12 @@
                   data-nip71-template="segment"
                 >
                   <article
-                    class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4"
+                    class="space-y-3 rounded-md border border-border/70 bg-surface/60 p-4"
                     data-nip71-entry="segment"
                   >
                     <div class="grid gap-3 md:grid-cols-4">
                       <div class="space-y-2">
-                        <label class="block text-xs font-medium text-gray-300"
+                        <label class="block text-xs font-medium text-muted-strong"
                           >Start</label
                         >
                         <input
@@ -712,10 +707,10 @@
                           placeholder="00:00:00"
                           class="input"
                         />
-                        <p class="text-[11px] text-gray-500">HH:MM:SS</p>
+                        <p class="text-[11px] text-muted">HH:MM:SS</p>
                       </div>
                       <div class="space-y-2">
-                        <label class="block text-xs font-medium text-gray-300"
+                        <label class="block text-xs font-medium text-muted-strong"
                           >End</label
                         >
                         <input
@@ -724,12 +719,12 @@
                           placeholder="00:03:30"
                           class="input"
                         />
-                        <p class="text-[11px] text-gray-500">
+                        <p class="text-[11px] text-muted">
                           Leave blank for open-ended segments.
                         </p>
                       </div>
                       <div class="space-y-2 md:col-span-2">
-                        <label class="block text-xs font-medium text-gray-300"
+                        <label class="block text-xs font-medium text-muted-strong"
                           >Chapter title</label
                         >
                         <input
@@ -740,7 +735,7 @@
                         />
                       </div>
                       <div class="space-y-2 md:col-span-2">
-                        <label class="block text-xs font-medium text-gray-300"
+                        <label class="block text-xs font-medium text-muted-strong"
                           >Thumbnail URL</label
                         >
                         <input
@@ -749,14 +744,14 @@
                           placeholder="https://cdn.example.com/segment.jpg"
                           class="input"
                         />
-                        <p class="text-[11px] text-gray-500">
+                        <p class="text-[11px] text-muted">
                           Optional still image for this moment.
                         </p>
                       </div>
                     </div>
                     <button
                       type="button"
-                      class="rounded-md border border-red-500/50 px-3 py-1 text-xs font-semibold text-red-300 hover:border-red-400 hover:text-red-200"
+                      class="rounded-md border border-critical/60 px-3 py-1 text-xs font-semibold text-critical hover:border-critical hover:text-critical-strong"
                       data-nip71-remove="segment"
                     >
                       Remove segment
@@ -773,19 +768,19 @@
                 <div class="flex items-center justify-between">
                   <h3
                     id="nip71HashtagsLabel"
-                    class="text-sm font-medium text-gray-200"
+                    class="text-sm font-medium text-text"
                   >
                     Hashtags (<code>t</code>)
                   </h3>
                   <button
                     type="button"
-                    class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                    class="rounded-md border border-border/60 px-3 py-1 text-xs font-semibold text-text hover:border-border hover:text-text"
                     data-nip71-add="t"
                   >
                     Add hashtag
                   </button>
                 </div>
-                <p class="text-xs text-gray-400">
+                <p class="text-xs text-muted">
                   Enter keywords; leading <code>#</code> characters are stripped
                   automatically when saving.
                 </p>
@@ -804,7 +799,7 @@
                     />
                     <button
                       type="button"
-                      class="rounded border border-red-500/50 px-2 py-1 text-[11px] text-red-300 hover:border-red-400 hover:text-red-200"
+                      class="rounded border border-critical/60 px-2 py-1 text-[11px] text-critical hover:border-critical hover:text-critical-strong"
                       data-nip71-remove="t"
                       aria-label="Remove hashtag"
                     >
@@ -822,19 +817,19 @@
                 <div class="flex items-center justify-between">
                   <h3
                     id="nip71ParticipantsLabel"
-                    class="text-sm font-medium text-gray-200"
+                    class="text-sm font-medium text-text"
                   >
                     Participants (<code>p</code>)
                   </h3>
                   <button
                     type="button"
-                    class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                    class="rounded-md border border-border/60 px-3 py-1 text-xs font-semibold text-text hover:border-border hover:text-text"
                     data-nip71-add="p"
                   >
                     Add participant
                   </button>
                 </div>
-                <p class="text-xs text-gray-400">
+                <p class="text-xs text-muted">
                   Paste the participant npub or hex pubkey. Optionally provide a
                   preferred relay URL.
                 </p>
@@ -845,12 +840,12 @@
                 ></div>
                 <template id="nip71ParticipantTemplate" data-nip71-template="p">
                   <article
-                    class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4"
+                    class="space-y-3 rounded-md border border-border/70 bg-surface/60 p-4"
                     data-nip71-entry="p"
                   >
                     <div class="grid gap-3 md:grid-cols-2">
                       <div class="space-y-2">
-                        <label class="block text-xs font-medium text-gray-300"
+                        <label class="block text-xs font-medium text-muted-strong"
                           >Pubkey</label
                         >
                         <input
@@ -859,12 +854,12 @@
                           placeholder="npub1..."
                           class="input"
                         />
-                        <p class="text-[11px] text-gray-500">
+                        <p class="text-[11px] text-muted">
                           Accepts npub or hex.
                         </p>
                       </div>
                       <div class="space-y-2">
-                        <label class="block text-xs font-medium text-gray-300"
+                        <label class="block text-xs font-medium text-muted-strong"
                           >Relay URL (optional)</label
                         >
                         <input
@@ -873,14 +868,14 @@
                           placeholder="wss://relay.example.com"
                           class="input"
                         />
-                        <p class="text-[11px] text-gray-500">
+                        <p class="text-[11px] text-muted">
                           Relay hint for discovering the participant.
                         </p>
                       </div>
                     </div>
                     <button
                       type="button"
-                      class="rounded-md border border-red-500/50 px-3 py-1 text-xs font-semibold text-red-300 hover:border-red-400 hover:text-red-200"
+                      class="rounded-md border border-critical/60 px-3 py-1 text-xs font-semibold text-critical hover:border-critical hover:text-critical-strong"
                       data-nip71-remove="p"
                     >
                       Remove participant
@@ -897,19 +892,19 @@
                 <div class="flex items-center justify-between">
                   <h3
                     id="nip71ReferencesLabel"
-                    class="text-sm font-medium text-gray-200"
+                    class="text-sm font-medium text-text"
                   >
                     Reference links (<code>r</code>)
                   </h3>
                   <button
                     type="button"
-                    class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                    class="rounded-md border border-border/60 px-3 py-1 text-xs font-semibold text-text hover:border-border hover:text-text"
                     data-nip71-add="r"
                   >
                     Add reference
                   </button>
                 </div>
-                <p class="text-xs text-gray-400">
+                <p class="text-xs text-muted">
                   Link to transcripts, source repositories, or related
                   resources.
                 </p>
@@ -928,7 +923,7 @@
                     />
                     <button
                       type="button"
-                      class="rounded border border-red-500/50 px-2 py-1 text-[11px] text-red-300 hover:border-red-400 hover:text-red-200"
+                      class="rounded border border-critical/60 px-2 py-1 text-[11px] text-critical hover:border-critical hover:text-critical-strong"
                       data-nip71-remove="r"
                       aria-label="Remove reference"
                     >
@@ -958,11 +953,11 @@
                 <span class="flex flex-col gap-1">
                   <span
                     id="uploadEnableCommentsLabel"
-                    class="text-sm font-medium text-gray-200"
+                    class="text-sm font-medium text-text"
                   >
                     Enable comments
                   </span>
-                  <span class="text-xs text-gray-400">
+                  <span class="text-xs text-muted">
                     Keep this on to let viewers discuss the video once comment
                     threads launch.
                   </span>
@@ -988,11 +983,11 @@
                   <span class="flex flex-col gap-1">
                     <span
                       id="uploadIsNsfwLabel"
-                      class="text-sm font-medium text-gray-200"
+                      class="text-sm font-medium text-text"
                     >
                       Is this content NSFW?
                     </span>
-                    <span class="text-xs text-gray-400">
+                    <span class="text-xs text-muted">
                       Flag mature or explicit uploads so clients can warn
                       viewers before playback.
                     </span>
@@ -1017,11 +1012,11 @@
                   <span class="flex flex-col gap-1">
                     <span
                       id="uploadIsForKidsLabel"
-                      class="text-sm font-medium text-gray-200"
+                      class="text-sm font-medium text-text"
                     >
                       Is this content created for Kids?
                     </span>
-                    <span class="text-xs text-gray-400">
+                    <span class="text-xs text-muted">
                       Mark clearly kid-friendly videos so parental controls and
                       playlists stay accurate.
                     </span>
@@ -1034,16 +1029,16 @@
               <input
                 type="checkbox"
                 id="uploadIsPrivate"
-                class="form-checkbox h-5 w-5 text-blue-500"
+                class="form-checkbox h-5 w-5 text-info"
               />
-              <span class="text-sm font-medium text-gray-200"
+              <span class="text-sm font-medium text-text"
                 >Private Listing (Hide from shared grids)</span
               >
             </div>
             -->
             <button
               type="submit"
-              class="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"
+              class="rounded-md bg-info px-4 py-2 text-text hover:bg-info-strong focus:outline-none focus:ring-2 focus:ring-info focus:ring-offset-2"
             >
               Publish
             </button>
@@ -1058,17 +1053,17 @@
               This feature is experimental and may not be working correctly.
             </p>
             <section
-              class="rounded-lg border border-gray-800 bg-gray-900/60 p-5"
+              class="rounded-lg border border-border/70 bg-surface/60 p-5"
             >
               <div class="mb-4 flex items-center justify-between">
-                <h3 class="text-lg font-semibold text-gray-100">
+                <h3 class="text-lg font-semibold text-text">
                   Cloudflare R2 credentials
                 </h3>
-                <span class="text-xs uppercase tracking-wide text-gray-500">
+                <span class="text-xs uppercase tracking-wide text-muted">
                   stored locally
                 </span>
               </div>
-              <p class="mb-4 text-sm text-gray-400">
+              <p class="mb-4 text-sm text-muted">
                 Paste your Cloudflare R2 API credentials. We keep them in your
                 browser so uploads happen client-side.
               </p>
@@ -1077,7 +1072,7 @@
                   <div class="space-y-2">
                     <label
                       for="r2AccountId"
-                      class="block text-sm font-medium text-gray-200"
+                      class="block text-sm font-medium text-text"
                       >Account ID</label
                     >
                     <input
@@ -1092,7 +1087,7 @@
                   <div class="space-y-2">
                     <label
                       for="r2AccessKeyId"
-                      class="block text-sm font-medium text-gray-200"
+                      class="block text-sm font-medium text-text"
                       >S3 Access Key ID</label
                     >
                     <input
@@ -1108,7 +1103,7 @@
                 <div class="space-y-2">
                   <label
                     for="r2SecretAccessKey"
-                    class="block text-sm font-medium text-gray-200"
+                    class="block text-sm font-medium text-text"
                     >S3 Secret Access Key</label
                   >
                   <input
@@ -1119,18 +1114,18 @@
                     required
                   />
                 </div>
-                <div class="border-t border-gray-800 pt-4">
+                <div class="border-t border-border/70 pt-4">
                   <button
                     type="button"
                     id="cloudflareAdvancedToggle"
-                    class="flex items-center gap-2 text-sm font-medium text-gray-300 transition-colors hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
+                    class="flex items-center gap-2 text-sm font-medium text-muted-strong transition-colors hover:text-text focus:outline-none focus:ring-2 focus:ring-info focus:ring-offset-2 focus:ring-offset-surface"
                     aria-expanded="false"
                     aria-controls="cloudflareAdvancedFields"
                   >
                     <svg
                       id="cloudflareAdvancedToggleIcon"
                       xmlns="http://www.w3.org/2000/svg"
-                      class="h-4 w-4 transform text-gray-300 transition-transform duration-150"
+                      class="h-4 w-4 transform text-muted-strong transition-transform duration-150"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke="currentColor"
@@ -1153,7 +1148,7 @@
                     <div class="space-y-2">
                       <label
                         for="r2ApiToken"
-                        class="block text-sm font-medium text-gray-200"
+                        class="block text-sm font-medium text-text"
                         >Cloudflare API Token (optional)</label
                       >
                       <input
@@ -1163,7 +1158,7 @@
                         class="input"
                         placeholder="Token with Workers R2 Storage Write"
                       />
-                      <p class="text-xs text-gray-500">
+                      <p class="text-xs text-muted">
                         Used to create buckets, configure CORS, and attach
                         domains automatically.
                       </p>
@@ -1172,7 +1167,7 @@
                       <div class="space-y-2">
                         <label
                           for="r2ZoneId"
-                          class="block text-sm font-medium text-gray-200"
+                          class="block text-sm font-medium text-text"
                           >Zone ID (optional)</label
                         >
                         <input
@@ -1182,7 +1177,7 @@
                           class="input"
                           placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
                         />
-                        <p class="text-xs text-gray-500">
+                        <p class="text-xs text-muted">
                           Required when you want us to attach a custom domain on
                           your behalf.
                         </p>
@@ -1190,7 +1185,7 @@
                       <div class="space-y-2">
                         <label
                           for="r2BaseDomain"
-                          class="block text-sm font-medium text-gray-200"
+                          class="block text-sm font-medium text-text"
                           >Base domain (optional)</label
                         >
                         <input
@@ -1200,12 +1195,12 @@
                           class="input"
                           placeholder="cdn.example.com"
                         />
-                        <p class="text-xs text-gray-500">
+                        <p class="text-xs text-muted">
                           We'll attach
-                          <code class="rounded bg-gray-800 px-1 py-0.5"
+                          <code class="rounded bg-panel px-1 py-0.5"
                             >npub.&lt;baseDomain&gt;</code
                           >. Leave blank to use the managed
-                          <code class="rounded bg-gray-800 px-1 py-0.5"
+                          <code class="rounded bg-panel px-1 py-0.5"
                             >*.r2.dev</code
                           >
                           domain.
@@ -1217,20 +1212,20 @@
                 <div class="flex flex-wrap items-center gap-3">
                   <button
                     type="submit"
-                    class="rounded-md bg-blue-500 px-4 py-2 text-sm font-semibold text-white transition hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    class="rounded-md bg-info px-4 py-2 text-sm font-semibold text-text transition hover:bg-info-strong focus:outline-none focus:ring-2 focus:ring-info"
                   >
                     Save settings
                   </button>
                   <button
                     type="button"
                     id="cloudflareClearSettings"
-                    class="rounded-md border border-gray-600 px-4 py-2 text-sm font-semibold text-gray-200 transition hover:border-gray-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500"
+                    class="rounded-md border border-border px-4 py-2 text-sm font-semibold text-text transition hover:border-border hover:text-text focus:outline-none focus:ring-2 focus:ring-info"
                   >
                     Clear
                   </button>
                   <span
                     id="cloudflareSettingsStatus"
-                    class="text-xs text-gray-400"
+                    class="text-xs text-muted"
                     role="status"
                   ></span>
                 </div>
@@ -1238,13 +1233,13 @@
             </section>
 
             <section
-              class="rounded-lg border border-gray-800 bg-gray-900/60 p-5"
+              class="rounded-lg border border-border/70 bg-surface/60 p-5"
             >
               <div class="mb-4">
-                <h3 class="text-lg font-semibold text-gray-100">
+                <h3 class="text-lg font-semibold text-text">
                   Upload &amp; publish
                 </h3>
-                <p class="text-sm text-gray-400">
+                <p class="text-sm text-muted">
                   Choose a file, we will upload it to R2, fill the hosted URL,
                   and publish your note automatically.
                 </p>
@@ -1253,7 +1248,7 @@
                 <div class="space-y-2">
                   <label
                     for="cloudflareTitle"
-                    class="block text-sm font-medium text-gray-200"
+                    class="block text-sm font-medium text-text"
                     >Title</label
                   >
                   <input
@@ -1264,7 +1259,7 @@
                   />
                 </div>
                 <div
-                  class="bg-black/30 space-y-4 rounded-lg border border-gray-800 p-4"
+                  class="bg-overlay-black/30 space-y-4 rounded-lg border border-border/70 p-4"
                   id="cloudflareNip71EventDetails"
                   data-nip71-section="event-details"
                 >
@@ -1273,14 +1268,14 @@
                     class="space-y-2"
                     data-nip71-fieldset="kind"
                   >
-                    <legend class="text-sm font-semibold text-gray-200">
+                    <legend class="text-sm font-semibold text-text">
                       NIP-71 event type
                     </legend>
-                    <p class="text-xs text-gray-400">
+                    <p class="text-xs text-muted">
                       Choose the video format.
-                      <span class="font-medium text-gray-300">Kind 21</span> is
+                      <span class="font-medium text-muted-strong">Kind 21</span> is
                       a full video, while
-                      <span class="font-medium text-gray-300">Kind 22</span> is
+                      <span class="font-medium text-muted-strong">Kind 22</span> is
                       a short.
                     </p>
                     <div
@@ -1303,9 +1298,9 @@
                             value="21"
                             checked
                             data-nip71-input="kind"
-                            class="h-4 w-4 border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                            class="h-4 w-4 border-border bg-panel text-info focus:ring-info"
                           />
-                          <span class="text-sm text-gray-200"
+                          <span class="text-sm text-text"
                             >Normal video (kind 21)</span
                           >
                         </label>
@@ -1319,9 +1314,9 @@
                             id="cloudflareNip71KindShort"
                             value="22"
                             data-nip71-input="kind"
-                            class="h-4 w-4 border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                            class="h-4 w-4 border-border bg-panel text-info focus:ring-info"
                           />
-                          <span class="text-sm text-gray-200"
+                          <span class="text-sm text-text"
                             >Short video (kind 22)</span
                           >
                         </label>
@@ -1336,7 +1331,7 @@
                     <div class="space-y-2">
                       <label
                         for="cloudflareNip71PublishedAt"
-                        class="block text-sm font-medium text-gray-200"
+                        class="block text-sm font-medium text-text"
                       >
                         Published at
                       </label>
@@ -1346,7 +1341,7 @@
                         data-nip71-input="published_at"
                         class="input"
                       />
-                      <p class="text-xs text-gray-400">
+                      <p class="text-xs text-muted">
                         Set the canonical publish time for cross-client
                         ordering.
                       </p>
@@ -1354,7 +1349,7 @@
                     <div class="space-y-2">
                       <label
                         for="cloudflareNip71AltText"
-                        class="block text-sm font-medium text-gray-200"
+                        class="block text-sm font-medium text-text"
                         >Alt text</label
                       >
                       <input
@@ -1364,7 +1359,7 @@
                         placeholder="Describe the visuals for screen readers"
                         class="input"
                       />
-                      <p class="text-xs text-gray-400">
+                      <p class="text-xs text-muted">
                         Plain-language fallback shown when the media cannot
                         load.
                       </p>
@@ -1372,7 +1367,7 @@
                     <div class="space-y-2">
                       <label
                         for="cloudflareNip71Duration"
-                        class="block text-sm font-medium text-gray-200"
+                        class="block text-sm font-medium text-text"
                       >
                         Duration (seconds)
                       </label>
@@ -1384,7 +1379,7 @@
                         data-nip71-input="duration"
                         class="input"
                       />
-                      <p class="text-xs text-gray-400">
+                      <p class="text-xs text-muted">
                         Provide the runtime in whole seconds for timeline
                         scrubbing.
                       </p>
@@ -1392,7 +1387,7 @@
                     <div class="space-y-2">
                       <label
                         for="cloudflareNip71ContentWarning"
-                        class="block text-sm font-medium text-gray-200"
+                        class="block text-sm font-medium text-text"
                       >
                         Content warning
                       </label>
@@ -1403,7 +1398,7 @@
                         placeholder="e.g., Flashing lights"
                         class="input"
                       />
-                      <p class="text-xs text-gray-400">
+                      <p class="text-xs text-muted">
                         Leave blank if the video is safe for all audiences.
                       </p>
                     </div>
@@ -1412,7 +1407,7 @@
                   <div class="space-y-2">
                     <label
                       for="cloudflareNip71Summary"
-                      class="block text-sm font-medium text-gray-200"
+                      class="block text-sm font-medium text-text"
                       >Summary</label
                     >
                     <textarea
@@ -1422,7 +1417,7 @@
                       class="textarea"
                       placeholder="Short synopsis used as the Nostr content field"
                     ></textarea>
-                    <p class="text-xs text-gray-400">
+                    <p class="text-xs text-muted">
                       This becomes the event content. Keep it concise for Nostr
                       readers.
                     </p>
@@ -1431,7 +1426,7 @@
                 <div class="space-y-2">
                   <label
                     for="cloudflareDescription"
-                    class="block text-sm font-medium text-gray-200"
+                    class="block text-sm font-medium text-text"
                     >Description (optional)</label
                   >
                   <textarea
@@ -1444,7 +1439,7 @@
                   <div class="space-y-2">
                     <label
                       for="cloudflareThumbnail"
-                      class="block text-sm font-medium text-gray-200"
+                      class="block text-sm font-medium text-text"
                       >Thumbnail URL (optional)</label
                     >
                     <input id="cloudflareThumbnail" type="url" class="input" />
@@ -1452,7 +1447,7 @@
                   <div class="space-y-2">
                     <label
                       for="cloudflareMagnet"
-                      class="block text-sm font-medium text-gray-200"
+                      class="block text-sm font-medium text-text"
                       >Magnet link (optional)</label
                     >
                     <input
@@ -1479,13 +1474,13 @@
                 </div>
                 <fieldset
                   id="cloudflareNip71TagsFieldset"
-                  class="bg-black/30 space-y-6 rounded-lg border border-gray-800 p-4"
+                  class="bg-overlay-black/30 space-y-6 rounded-lg border border-border/70 p-4"
                   data-nip71-section="tags"
                 >
-                  <legend class="text-sm font-semibold text-gray-200">
+                  <legend class="text-sm font-semibold text-text">
                     NIP-71 tags
                   </legend>
-                  <p class="text-xs text-gray-400">
+                  <p class="text-xs text-muted">
                     Use the controls below to describe media variants, captions,
                     chapters, participants, and references.
                   </p>
@@ -1498,13 +1493,13 @@
                     <div class="flex items-center justify-between">
                       <h3
                         id="cloudflareNip71ImetaLabel"
-                        class="text-sm font-medium text-gray-200"
+                        class="text-sm font-medium text-text"
                       >
                         Image metadata (imeta)
                       </h3>
                       <button
                         type="button"
-                        class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                        class="rounded-md border border-border/60 px-3 py-1 text-xs font-semibold text-text hover:border-border hover:text-text"
                         data-nip71-add="imeta"
                         aria-describedby="cloudflareNip71ImetaHelp"
                       >
@@ -1513,7 +1508,7 @@
                     </div>
                     <p
                       id="cloudflareNip71ImetaHelp"
-                      class="text-xs text-gray-400"
+                      class="text-xs text-muted"
                     >
                       Provide dimensions, MIME type, and resource links for each
                       variant. Nested repeaters let you attach multiple
@@ -1526,14 +1521,14 @@
                       data-nip71-list="imeta"
                     >
                       <article
-                        class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4"
+                        class="space-y-3 rounded-md border border-border/70 bg-surface/60 p-4"
                         data-nip71-entry="imeta"
                         data-nip71-primary="true"
                       >
                         <div class="grid gap-3 md:grid-cols-2">
                           <div class="space-y-2">
                             <label
-                              class="block text-xs font-medium text-gray-300"
+                              class="block text-xs font-medium text-muted-strong"
                             >
                               MIME type (<code>m</code>)
                             </label>
@@ -1543,13 +1538,13 @@
                               placeholder="Auto-filled after upload (e.g., video/mp4)"
                               class="input"
                             />
-                            <p class="text-[11px] text-gray-500">
+                            <p class="text-[11px] text-muted">
                               RFC 2046 media type for this encoding.
                             </p>
                           </div>
                           <div class="space-y-2">
                             <label
-                              class="block text-xs font-medium text-gray-300"
+                              class="block text-xs font-medium text-muted-strong"
                             >
                               Pixel dimensions (<code>dim</code>)
                             </label>
@@ -1559,13 +1554,13 @@
                               placeholder="Auto-filled if detected (e.g., 1920x1080)"
                               class="input"
                             />
-                            <p class="text-[11px] text-gray-500">
+                            <p class="text-[11px] text-muted">
                               Formatted as widthxheight.
                             </p>
                           </div>
                           <div class="space-y-2">
                             <label
-                              class="block text-xs font-medium text-gray-300"
+                              class="block text-xs font-medium text-muted-strong"
                             >
                               Streaming URL (<code>url</code>)
                             </label>
@@ -1575,13 +1570,13 @@
                               placeholder="Auto-filled after upload with the public HTTPS URL"
                               class="input"
                             />
-                            <p class="text-[11px] text-gray-500">
+                            <p class="text-[11px] text-muted">
                               HTTPS variant URL shared across clients.
                             </p>
                           </div>
                           <div class="space-y-2">
                             <label
-                              class="block text-xs font-medium text-gray-300"
+                              class="block text-xs font-medium text-muted-strong"
                             >
                               Magnet (<code>x</code>)
                             </label>
@@ -1591,7 +1586,7 @@
                               placeholder="Optional magnet pointer if seeding via P2P"
                               class="input"
                             />
-                            <p class="text-[11px] text-gray-500">
+                            <p class="text-[11px] text-muted">
                               Optional magnet pointer if the variant is seeded
                               via P2P.
                             </p>
@@ -1601,13 +1596,13 @@
                         <div class="space-y-3" data-nip71-nested="image">
                           <div class="flex items-center justify-between">
                             <h4
-                              class="text-xs font-semibold uppercase tracking-wide text-gray-400"
+                              class="text-xs font-semibold uppercase tracking-wide text-muted"
                             >
                               Image values
                             </h4>
                             <button
                               type="button"
-                              class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
+                              class="rounded border border-border/60 px-2 py-1 text-[11px] text-text hover:border-border hover:text-text"
                               data-nip71-nested-add="image"
                             >
                               Add image URL
@@ -1630,7 +1625,7 @@
                               />
                               <button
                                 type="button"
-                                class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                                class="rounded border border-border/60 px-2 py-1 text-[11px] text-muted-strong hover:border-border hover:text-text"
                                 data-nip71-remove="nested"
                                 aria-label="Remove image URL"
                               >
@@ -1643,13 +1638,13 @@
                         <div class="space-y-3" data-nip71-nested="fallback">
                           <div class="flex items-center justify-between">
                             <h4
-                              class="text-xs font-semibold uppercase tracking-wide text-gray-400"
+                              class="text-xs font-semibold uppercase tracking-wide text-muted"
                             >
                               Fallback URLs
                             </h4>
                             <button
                               type="button"
-                              class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
+                              class="rounded border border-border/60 px-2 py-1 text-[11px] text-text hover:border-border hover:text-text"
                               data-nip71-nested-add="fallback"
                             >
                               Add fallback
@@ -1672,7 +1667,7 @@
                               />
                               <button
                                 type="button"
-                                class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                                class="rounded border border-border/60 px-2 py-1 text-[11px] text-muted-strong hover:border-border hover:text-text"
                                 data-nip71-remove="nested"
                                 aria-label="Remove fallback URL"
                               >
@@ -1685,13 +1680,13 @@
                         <div class="space-y-3" data-nip71-nested="service">
                           <div class="flex items-center justify-between">
                             <h4
-                              class="text-xs font-semibold uppercase tracking-wide text-gray-400"
+                              class="text-xs font-semibold uppercase tracking-wide text-muted"
                             >
                               Services
                             </h4>
                             <button
                               type="button"
-                              class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
+                              class="rounded border border-border/60 px-2 py-1 text-[11px] text-text hover:border-border hover:text-text"
                               data-nip71-nested-add="service"
                             >
                               Add service hint
@@ -1714,7 +1709,7 @@
                               />
                               <button
                                 type="button"
-                                class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                                class="rounded border border-border/60 px-2 py-1 text-[11px] text-muted-strong hover:border-border hover:text-text"
                                 data-nip71-remove="nested"
                                 aria-label="Remove service hint"
                               >
@@ -1726,7 +1721,7 @@
 
                         <button
                           type="button"
-                          class="rounded-md border border-red-500/50 px-3 py-1 text-xs font-semibold text-red-300 hover:border-red-400 hover:text-red-200"
+                          class="rounded-md border border-critical/60 px-3 py-1 text-xs font-semibold text-critical hover:border-critical hover:text-critical-strong"
                           data-nip71-remove="imeta"
                         >
                           Remove variant
@@ -1743,13 +1738,13 @@
                     <div class="flex items-center justify-between">
                       <h3
                         id="cloudflareNip71TextTracksLabel"
-                        class="text-sm font-medium text-gray-200"
+                        class="text-sm font-medium text-text"
                       >
                         Caption &amp; subtitle tracks (text-track)
                       </h3>
                       <button
                         type="button"
-                        class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                        class="rounded-md border border-border/60 px-3 py-1 text-xs font-semibold text-text hover:border-border hover:text-text"
                         data-nip71-add="text-track"
                         aria-describedby="cloudflareNip71TextTracksHelp"
                       >
@@ -1758,7 +1753,7 @@
                     </div>
                     <p
                       id="cloudflareNip71TextTracksHelp"
-                      class="text-xs text-gray-400"
+                      class="text-xs text-muted"
                     >
                       Point to VTT/SRT caption files and optionally declare the
                       language code (BCP-47).
@@ -1778,13 +1773,13 @@
                     <div class="flex items-center justify-between">
                       <h3
                         id="cloudflareNip71SegmentsLabel"
-                        class="text-sm font-medium text-gray-200"
+                        class="text-sm font-medium text-text"
                       >
                         Timeline segments (segment)
                       </h3>
                       <button
                         type="button"
-                        class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                        class="rounded-md border border-border/60 px-3 py-1 text-xs font-semibold text-text hover:border-border hover:text-text"
                         data-nip71-add="segment"
                         aria-describedby="cloudflareNip71SegmentsHelp"
                       >
@@ -1793,7 +1788,7 @@
                     </div>
                     <p
                       id="cloudflareNip71SegmentsHelp"
-                      class="text-xs text-gray-400"
+                      class="text-xs text-muted"
                     >
                       Define chapters by timestamp so clients can build jump
                       lists.
@@ -1813,13 +1808,13 @@
                     <div class="flex items-center justify-between">
                       <h3
                         id="cloudflareNip71HashtagsLabel"
-                        class="text-sm font-medium text-gray-200"
+                        class="text-sm font-medium text-text"
                       >
                         Hashtags (t)
                       </h3>
                       <button
                         type="button"
-                        class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                        class="rounded-md border border-border/60 px-3 py-1 text-xs font-semibold text-text hover:border-border hover:text-text"
                         data-nip71-add="t"
                         aria-describedby="cloudflareNip71HashtagsHelp"
                       >
@@ -1828,7 +1823,7 @@
                     </div>
                     <p
                       id="cloudflareNip71HashtagsHelp"
-                      class="text-xs text-gray-400"
+                      class="text-xs text-muted"
                     >
                       Label the video with keywords to boost discovery across
                       clients.
@@ -1848,13 +1843,13 @@
                     <div class="flex items-center justify-between">
                       <h3
                         id="cloudflareNip71ParticipantsLabel"
-                        class="text-sm font-medium text-gray-200"
+                        class="text-sm font-medium text-text"
                       >
                         Participants (p)
                       </h3>
                       <button
                         type="button"
-                        class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                        class="rounded-md border border-border/60 px-3 py-1 text-xs font-semibold text-text hover:border-border hover:text-text"
                         data-nip71-add="p"
                         aria-describedby="cloudflareNip71ParticipantsHelp"
                       >
@@ -1863,7 +1858,7 @@
                     </div>
                     <p
                       id="cloudflareNip71ParticipantsHelp"
-                      class="text-xs text-gray-400"
+                      class="text-xs text-muted"
                     >
                       Credit guests, hosts, or collaborators with their npubs
                       and preferred relay hints.
@@ -1883,13 +1878,13 @@
                     <div class="flex items-center justify-between">
                       <h3
                         id="cloudflareNip71ReferencesLabel"
-                        class="text-sm font-medium text-gray-200"
+                        class="text-sm font-medium text-text"
                       >
                         References (r)
                       </h3>
                       <button
                         type="button"
-                        class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                        class="rounded-md border border-border/60 px-3 py-1 text-xs font-semibold text-text hover:border-border hover:text-text"
                         data-nip71-add="r"
                         aria-describedby="cloudflareNip71ReferencesHelp"
                       >
@@ -1898,7 +1893,7 @@
                     </div>
                     <p
                       id="cloudflareNip71ReferencesHelp"
-                      class="text-xs text-gray-400"
+                      class="text-xs text-muted"
                     >
                       Link to companion articles, source material, or
                       announcements that contextualize the upload.
@@ -1929,11 +1924,11 @@
                     <span class="flex flex-col gap-1">
                       <span
                         id="cloudflareEnableCommentsLabel"
-                        class="text-sm font-medium text-gray-200"
+                        class="text-sm font-medium text-text"
                       >
                         Enable comments
                       </span>
-                      <span class="text-xs text-gray-400">
+                      <span class="text-xs text-muted">
                         Publish with comments switched on. Toggle off to quietly
                         disable replies on this video.
                       </span>
@@ -1959,11 +1954,11 @@
                       <span class="flex flex-col gap-1">
                         <span
                           id="cloudflareIsNsfwLabel"
-                          class="text-sm font-medium text-gray-200"
+                          class="text-sm font-medium text-text"
                         >
                           Is this content NSFW?
                         </span>
-                        <span class="text-xs text-gray-400">
+                        <span class="text-xs text-muted">
                           Turn this on to signal mature or explicit material to
                           downstream clients.
                         </span>
@@ -1988,11 +1983,11 @@
                       <span class="flex flex-col gap-1">
                         <span
                           id="cloudflareIsForKidsLabel"
-                          class="text-sm font-medium text-gray-200"
+                          class="text-sm font-medium text-text"
                         >
                           Is this content created for Kids?
                         </span>
-                        <span class="text-xs text-gray-400">
+                        <span class="text-xs text-muted">
                           Highlight family-safe uploads so moderation tooling
                           and filters stay accurate.
                         </span>
@@ -2003,26 +1998,26 @@
                 <div class="space-y-2">
                   <label
                     for="cloudflareFile"
-                    class="block text-sm font-medium text-gray-200"
+                    class="block text-sm font-medium text-text"
                     >Video or HLS file</label
                   >
                   <input
                     id="cloudflareFile"
                     type="file"
                     accept="video/*,.m3u8,.ts,.mp4,.webm,.mov,.mkv,.mpg,.mpeg"
-                    class="input border-dashed bg-gray-900 px-3 py-4 text-gray-300"
+                    class="input border-dashed bg-surface px-3 py-4 text-muted-strong"
                     required
                   />
-                  <p class="text-xs text-gray-500">
+                  <p class="text-xs text-muted">
                     We use multipart uploads with automatic bucket creation.
                     Large files are supported.
                   </p>
                 </div>
                 <div
-                  class="bg-black/40 rounded-md border border-gray-800 p-3 text-xs text-gray-400"
+                  class="bg-black/40 rounded-md border border-border/70 p-3 text-xs text-muted"
                 >
                   <p>
-                    <strong class="text-gray-200">Bucket preview:</strong>
+                    <strong class="text-text">Bucket preview:</strong>
                     <span id="cloudflareBucketPreview" class="ml-1"
                       >We'll show your bucket and public domain after
                       setup.</span
@@ -2032,23 +2027,23 @@
                 <div class="space-y-2">
                   <div
                     id="cloudflareProgressBar"
-                    class="hidden h-2 w-full overflow-hidden rounded-full bg-gray-800"
+                    class="hidden h-2 w-full overflow-hidden rounded-full bg-panel"
                   >
                     <div
                       id="cloudflareProgressFill"
-                      class="h-full w-0 bg-blue-500 transition-all duration-150"
+                      class="h-full w-0 bg-info transition-all duration-150"
                     ></div>
                   </div>
                   <p
                     id="cloudflareUploadStatus"
-                    class="text-xs text-gray-400"
+                    class="text-xs text-muted"
                     role="status"
                   ></p>
                 </div>
                 <button
                   type="submit"
                   id="cloudflareUploadButton"
-                  class="w-full rounded-md bg-blue-500 px-4 py-2 text-sm font-semibold text-white transition hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:cursor-not-allowed disabled:bg-blue-900"
+                  class="w-full rounded-md bg-info px-4 py-2 text-sm font-semibold text-text transition hover:bg-info-strong focus:outline-none focus:ring-2 focus:ring-info disabled:cursor-not-allowed disabled:bg-blue-900"
                 >
                   Upload to R2 &amp; publish
                 </button>
diff --git a/components/video-modal.html b/components/video-modal.html
index d6a723d9..f86a28fc 100644
--- a/components/video-modal.html
+++ b/components/video-modal.html
@@ -235,7 +235,7 @@
                   </button>
                   <div class="my-2 border-t border-border/40"></div>
                   <button
-                    class="focus-ring block w-full px-4 py-2 text-left font-semibold text-critical transition hover:bg-critical hover:text-white"
+                    class="focus-ring block w-full px-4 py-2 text-left font-semibold text-critical transition hover:bg-critical hover:text-text"
                     data-action="blacklist-author"
                     data-context="modal"
                     data-blacklist-menu="true"
@@ -243,7 +243,7 @@
                     Blacklist creator
                   </button>
                   <button
-                    class="focus-ring block w-full px-4 py-2 text-left font-semibold text-critical transition hover:bg-critical hover:text-white"
+                    class="focus-ring block w-full px-4 py-2 text-left font-semibold text-critical transition hover:bg-critical hover:text-text"
                     data-action="block-author"
                     data-context="modal"
                   >
@@ -280,7 +280,7 @@
               <div class="flex items-start justify-between gap-4">
                 <h2
                   id="videoTitle"
-                  class="text-2xl font-semibold leading-tight text-white"
+                  class="text-2xl font-semibold leading-tight text-text"
                 ></h2>
                 <div
                   id="modalStatus"
@@ -311,7 +311,7 @@
               <div class="flex flex-col gap-1">
                 <h3
                   id="creatorName"
-                  class="text-lg font-semibold text-white"
+                  class="text-lg font-semibold text-text"
                 >
                   Creator Name
                 </h3>
diff --git a/css/tailwind.generated.css b/css/tailwind.generated.css
index 6032349f..d7a327d2 100644
--- a/css/tailwind.generated.css
+++ b/css/tailwind.generated.css
@@ -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-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--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-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
+: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-warning:#facc15;--color-warning-strong:#d97706;--color-warning-surface:rgba(146,64,14,.24);--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-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--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-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
 
-/*! 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-function:cubic-bezier(.4,0,.2,1)}.btn,.btn:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.btn:hover{background-color:var(--color-info-strong);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg)}.btn:focus-visible{background-color:var(--color-info-pressed)}.btn:disabled{pointer-events:none;cursor:not-allowed;opacity:.6;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.btn-ghost{outline:2px solid transparent;outline-offset:2px}.btn-ghost: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-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-lg);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;--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-function:cubic-bezier(.4,0,.2,1)}.btn-ghost:hover{background-color:var(--color-info-strong);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.btn-ghost:focus-visible{background-color:var(--color-info-pressed)}.btn-ghost:disabled{cursor:not-allowed;opacity:.6}.btn-ghost{border-width:1px;border-color:var(--color-border);--tw-border-opacity:0.6;background-color:transparent;color:var(--color-white);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.btn-ghost:hover{background-color:var(--color-panel-hover);color:var(--color-text)}.btn-ghost:focus-visible{background-color:var(--color-panel-hover)}.btn-ghost:disabled{pointer-events:none;opacity:.5;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!badge,.badge{display:inline-flex;align-items:center;gap:.25rem;border-radius:var(--radius-full);background-color:var(--color-panel);padding:.25rem .75rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);font-weight:600;text-transform:uppercase;letter-spacing:.025em;color:var(--color-muted-strong)}.\!badge[data-variant=critical],.badge[data-variant=critical]{background-color:var(--color-critical);--tw-bg-opacity:0.2;color:var(--color-critical-strong)}.\!badge[data-variant=info],.badge[data-variant=info]{background-color:var(--color-info);--tw-bg-opacity:0.2;color:var(--color-info-strong)}.\!badge[data-variant=neutral],.badge[data-variant=neutral]{background-color:var(--color-border);--tw-bg-opacity:0.4;color:var(--color-muted-strong)}.\!menu,.menu{display:flex;flex-direction:column;gap:.25rem;padding-top:.5rem;padding-bottom:.5rem}.menu__item{outline:2px solid transparent;outline-offset:2px}.menu__item: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)}.menu__item{position:relative;display:flex;width:100%;align-items:center;gap:.75rem;border-radius:var(--radius-md);padding:.5rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:500;color:var(--color-text);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:var(--motion-ease-in-out)}.menu__item:hover{background-color:var(--color-panel-hover);color:var(--color-text)}.menu__item[data-state=active]{background-color:var(--color-info);--tw-bg-opacity:0.2;color:var(--color-info-strong)}.menu__item[data-variant=critical]{color:var(--color-critical-strong)}.menu__item[data-variant=critical]:hover{background-color:var(--color-critical);--tw-bg-opacity:0.2}.menu__item:disabled,.menu__item[aria-disabled=true]{cursor:not-allowed;opacity:.6}.menu__item:disabled,.menu__item:disabled:hover,.menu__item[aria-disabled=true],.menu__item[aria-disabled=true]:hover{background-color:transparent;color:var(--color-muted)}.\!card{outline:2px solid transparent;outline-offset:2px}.\!card: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)}.\!card{position:relative;border-radius:var(--radius-lg);border-width:1px;border-color:transparent;background-color:var(--color-card);color:var(--color-text);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);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-function:cubic-bezier(.4,0,.2,1)}.card{outline:2px solid transparent;outline-offset:2px}.card: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)}.card{position:relative;border-radius:var(--radius-lg);border-width:1px;border-color:transparent;background-color:var(--color-card);color:var(--color-text);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);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-function:cubic-bezier(.4,0,.2,1)}.\!card:hover,.card:hover{--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!card:focus-visible{border-color:var(--color-info);--tw-border-opacity:0.4;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.card:focus-visible{border-color:var(--color-info);--tw-border-opacity:0.4;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!card[data-state=critical],.card[data-state=critical]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--color-card-critical)}.\!card[data-state=private],.card[data-state=private]{background-color:var(--color-card-private);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!card[data-state=disabled],.card[data-state=disabled]{opacity:.6;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.form-control{outline:2px solid transparent;outline-offset:2px}.form-control: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)}.form-control{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--color-border-subtle);background-color:var(--color-surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--color-text);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);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-function:cubic-bezier(.4,0,.2,1)}.form-control::-moz-placeholder{color:var(--color-muted)}.form-control::placeholder{color:var(--color-muted)}.form-control:hover{border-color:var(--color-border)}.form-control:focus-visible{border-color:var(--color-info-strong)}.form-control:disabled{cursor:not-allowed;background-color:var(--color-surface);color:var(--color-muted);opacity:.6}.form-control:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}.\!input{outline:2px solid transparent;outline-offset:2px}.\!input: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)}.\!input{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--color-border-subtle);background-color:var(--color-surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--color-text);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);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-function:cubic-bezier(.4,0,.2,1)}.\!input::-moz-placeholder{color:var(--color-muted)}.\!input::placeholder{color:var(--color-muted)}.\!input:hover{border-color:var(--color-border)}.\!input:focus-visible{border-color:var(--color-info-strong)}.\!input:disabled{cursor:not-allowed;background-color:var(--color-surface);color:var(--color-muted);opacity:.6}.\!input:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}@media (prefers-reduced-motion:reduce){.\!input{transition:none}}.input{outline:2px solid transparent;outline-offset:2px}.input: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)}.input{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--color-border-subtle);background-color:var(--color-surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--color-text);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);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-function:cubic-bezier(.4,0,.2,1)}.input::-moz-placeholder{color:var(--color-muted)}.input::placeholder{color:var(--color-muted)}.input:hover{border-color:var(--color-border)}.input:focus-visible{border-color:var(--color-info-strong)}.input:disabled{cursor:not-allowed;background-color:var(--color-surface);color:var(--color-muted);opacity:.6}.input:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}@media (prefers-reduced-motion:reduce){.input{transition:none}}.textarea{outline:2px solid transparent;outline-offset:2px}.textarea: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)}.textarea{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--color-border-subtle);background-color:var(--color-surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--color-text);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);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-function:cubic-bezier(.4,0,.2,1)}.textarea::-moz-placeholder{color:var(--color-muted)}.textarea::placeholder{color:var(--color-muted)}.textarea:hover{border-color:var(--color-border)}.textarea:focus-visible{border-color:var(--color-info-strong)}.textarea:disabled{cursor:not-allowed;background-color:var(--color-surface);color:var(--color-muted);opacity:.6}.textarea:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}@media (prefers-reduced-motion:reduce){.textarea{transition:none}}.textarea{min-height:8rem;resize:vertical}.select{outline:2px solid transparent;outline-offset:2px}.select: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)}.select{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--color-border-subtle);background-color:var(--color-surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--color-text);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);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-function:cubic-bezier(.4,0,.2,1)}.select::-moz-placeholder{color:var(--color-muted)}.select::placeholder{color:var(--color-muted)}.select:hover{border-color:var(--color-border)}.select:focus-visible{border-color:var(--color-info-strong)}.select:disabled{cursor:not-allowed;background-color:var(--color-surface);color:var(--color-muted);opacity:.6}.select:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}@media (prefers-reduced-motion:reduce){.select{transition:none}}.select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:2.5rem;background-image:linear-gradient(135deg,transparent 50%,var(--select-arrow-color) 50%),linear-gradient(45deg,var(--select-arrow-color) 50%,transparent 50%),linear-gradient(to right,var(--color-border-subtle),var(--color-border-subtle));background-position:right .75rem center,right .4rem center,right 2.5rem center;background-size:.6rem .6rem,.6rem .6rem,1px 60%;background-repeat:no-repeat}.select,.select:hover{--select-arrow-color:var(--color-border)}.select:focus-visible{--select-arrow-color:var(--color-info-strong)}.select:disabled{--select-arrow-color:var(--color-border-subtle)}.select:invalid{--select-arrow-color:var(--color-critical)}.\!checkbox{outline:2px solid transparent;outline-offset:2px}.\!checkbox: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)}.\!checkbox{display:inline-flex;height:1.25rem;width:1.25rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-items:center;justify-content:center;border-radius:.25rem;border-width:1px;border-color:var(--color-border-subtle);background-color:var(--color-surface-alt);color:var(--color-white);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-function:cubic-bezier(.4,0,.2,1)}.checkbox{outline:2px solid transparent;outline-offset:2px}.checkbox: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)}.checkbox{display:inline-flex;height:1.25rem;width:1.25rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-items:center;justify-content:center;border-radius:.25rem;border-width:1px;border-color:var(--color-border-subtle);background-color:var(--color-surface-alt);color:var(--color-white);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-function:cubic-bezier(.4,0,.2,1)}.\!checkbox:hover,.checkbox:hover{border-color:var(--color-border)}.\!checkbox:disabled,.checkbox:disabled{cursor:not-allowed;border-color:var(--color-border-subtle);background-color:var(--color-surface);color:var(--color-muted);opacity:.6}.\!checkbox:after{content:""!important}.checkbox:after{content:""}.\!checkbox:after,.checkbox:after{pointer-events:none;height:.5rem;width:.75rem;border-bottom-width:2px;border-right-width:2px;border-color:var(--color-white);opacity:0;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-function:cubic-bezier(.4,0,.2,1)}.\!checkbox:after{transform:rotate(45deg) translateY(-.125rem) scale(.85)!important}.checkbox:after{transform:rotate(45deg) translateY(-.125rem) scale(.85)}.\!checkbox:checked,.\!checkbox[aria-checked=true],.checkbox:checked,.checkbox[aria-checked=true]{border-color:var(--color-info-strong);background-color:var(--color-info-strong)}.\!checkbox:checked:after,.\!checkbox[aria-checked=true]:after,.checkbox:checked:after,.checkbox[aria-checked=true]:after{opacity:1}.checkbox:checked:after,.checkbox[aria-checked=true]:after{transform:rotate(45deg) translateY(-.125rem) scale(1)}.\!checkbox:checked:after,.\!checkbox[aria-checked=true]:after{transform:rotate(45deg) translateY(-.125rem) scale(1)!important}.switch{outline:2px solid transparent;outline-offset:2px}.switch: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)}.switch{position:relative;display:inline-flex;height:1.5rem;width:2.75rem;cursor:pointer;align-items:center;border-radius:var(--radius-full);border-width:1px;border-color:var(--color-border-subtle);background-color:var(--color-border-subtle);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.switch,.switch:before{transition-duration:.15s;transition-duration:var(--motion-duration-base)}.switch:before{content:"";pointer-events:none;position:absolute;left:.125rem;top:50%;height:1.25rem;width:1.25rem;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:var(--radius-full);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.switch:before,.switch:disabled{background-color:var(--color-surface)}.switch:disabled{cursor:not-allowed;border-color:var(--color-border-subtle);color:var(--color-muted);opacity:.6}.switch.is-on,.switch[aria-checked=true]{border-color:var(--color-info-strong);background-color:var(--color-info-strong)}.switch.is-on:before,.switch[aria-checked=true]:before{--tw-translate-x:1.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (prefers-reduced-motion:reduce){.\!checkbox,.\!checkbox:after,.checkbox,.checkbox:after,.form-control,.menu__item,.popover__panel,.switch,.switch:before{transition:none!important}}.bv-modal{position:fixed;inset:0;z-index:var(--z-modal-root);display:flex;align-items:center;justify-content:center;padding:1rem}@media (min-width:640px){.bv-modal{padding:1.5rem}}.bv-modal__panel{outline:2px solid transparent;outline-offset:2px}.bv-modal__panel: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)}.bv-modal__panel{position:relative;z-index:var(--z-modal-content);width:100%;max-width:48rem;border-radius:var(--radius-xl);border-width:1px;border-color:var(--color-border);--tw-border-opacity:0.4;background-color:var(--color-surface);padding:2rem 1.5rem;text-align:left;color:var(--color-white);--tw-shadow:var(--shadow-modal);--tw-shadow-colored:var(--shadow-modal);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.bv-modal__panel:focus-visible{border-color:var(--color-info);--tw-border-opacity:0.5}.bv-modal-backdrop{position:absolute;inset:0;z-index:var(--z-modal-overlay);background-color:var(--color-overlay);--tw-bg-opacity:0.8;--tw-backdrop-blur:blur(8px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.grid-stack{display:grid;gap:var(--space-lg)}.grid-stack[data-variant=cards]{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.grid-stack[data-variant=cards]{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1280px){.grid-stack[data-variant=cards]{grid-template-columns:repeat(3,minmax(0,1fr))}}.grid-stack[data-orientation=vertical]{display:flex;flex-direction:column;gap:var(--space-md)}.bv-stack{display:flex;flex-direction:column;gap:var(--space-lg)}.bv-stack--tight{gap:var(--space-md)}.bv-grid-video{display:grid;gap:var(--space-xl);padding-top:var(--space-lg);padding-bottom:var(--space-lg);grid-template-columns:repeat(auto-fill,minmax(20rem,1fr))}.video-card{outline:2px solid transparent;outline-offset:2px}.video-card: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)}.video-card{position:relative;border-radius:var(--radius-lg);border-width:1px;border-color:transparent;background-color:var(--color-card);color:var(--color-text);--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-function:cubic-bezier(.4,0,.2,1)}.video-card,.video-card:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.video-card:hover{--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg)}.video-card:focus-visible{border-color:var(--color-info);--tw-border-opacity:0.4;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.video-card[data-state=critical]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--color-card-critical)}.video-card[data-state=private]{background-color:var(--color-card-private);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg)}.video-card[data-state=disabled],.video-card[data-state=private]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.video-card[data-state=disabled]{opacity:.6;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.video-card{overflow:visible}.video-card.video-card--owner-private{background-color:var(--color-card-private)}.video-card.video-card--nsfw-owner{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--color-black)}.video-card.video-card--nsfw-owner:hover{--tw-border-opacity:0.6;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.video-card img.video-card__thumbnail--blurred{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-function:cubic-bezier(.4,0,.2,1);filter:blur(18px);transform:scale(1.05)}.video-card[data-owner-is-viewer=true][data-url-health-state=offline][data-stream-health-state=unhealthy]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--color-card-critical)}.video-visibility-toggle{display:inline-flex;align-items:center;gap:.25rem;border-radius:var(--radius-full);border-width:1px;border-color:var(--color-border);background-color:var(--color-panel);padding:.25rem}.video-visibility-toggle__option{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);border-width:1px;border-color:transparent;background-color:var(--color-panel);padding:.5rem .75rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);font-weight:600;text-transform:uppercase;color:var(--color-muted);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-function:cubic-bezier(.4,0,.2,1)}.video-visibility-toggle__option:not(.is-disabled):hover{background-color:var(--color-panel-hover);color:var(--color-text)}.video-visibility-toggle__option[data-active=true]{border-width:1px;border-color:var(--color-info);--tw-border-opacity:0.6;color:var(--color-text);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.video-visibility-toggle__option.is-disabled{cursor:not-allowed;opacity:.45}.player-modal__container,.video-modal__container{display:flex;height:100%;min-height:100vh;width:100%;flex:1 1 0%;flex-direction:column}.video-modal__panel{outline:2px solid transparent;outline-offset:2px}.video-modal__panel: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)}.video-modal__panel{z-index:var(--z-modal-content);max-width:48rem;border-radius:var(--radius-xl);border-width:1px;border-color:var(--color-border);--tw-border-opacity:0.4;padding:2rem 1.5rem;text-align:left;color:var(--color-white);--tw-shadow:var(--shadow-modal);--tw-shadow-colored:var(--shadow-modal);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.video-modal__panel:focus-visible{border-color:var(--color-info);--tw-border-opacity:0.5}.video-modal__panel{position:relative;display:flex;width:100%;flex:1 1 0%;flex-direction:column;overflow:visible;background-color:var(--color-surface);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.player-modal__content{outline:2px solid transparent;outline-offset:2px}.player-modal__content: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)}.player-modal__content{z-index:var(--z-modal-content);max-width:48rem;border-radius:var(--radius-xl);border-width:1px;border-color:var(--color-border);--tw-border-opacity:0.4;padding:2rem 1.5rem;text-align:left;color:var(--color-white);--tw-shadow:var(--shadow-modal);--tw-shadow-colored:var(--shadow-modal);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.player-modal__content:focus-visible{border-color:var(--color-info);--tw-border-opacity:0.5}.player-modal__content{position:relative;display:flex;width:100%;flex:1 1 0%;flex-direction:column;overflow:visible;background-color:var(--color-surface);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.modal-nav,.video-modal__nav{position:sticky;top:0;z-index:60;border-bottom-width:1px;border-color:var(--color-border);--tw-border-opacity:0.4;background-color:var(--color-surface)}.modal-actions,.video-modal__actions{margin-left:auto;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:.5rem}.player-modal__video,.video-modal__video{position:sticky;top:0;z-index:51;display:flex;width:100%;flex-shrink:0;align-items:center;justify-content:center;border-bottom-width:1px;border-color:var(--color-border);--tw-border-opacity:0.2;background-color:var(--color-surface)}.player-modal__video video,.video-modal__media{display:block;aspect-ratio:16/9;width:100%;border-radius:var(--radius-xl);background-color:var(--color-black);-o-object-fit:contain;object-fit:contain;--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.player-modal__info,.video-modal__info{flex:none;border-top-width:1px;border-color:var(--color-border);--tw-border-opacity:0.2;background-color:var(--color-surface)}.profile-pane{display:flex;flex-direction:column;gap:var(--space-lg)}.profile-pane.hidden{display:none}.watch-history-card{outline:2px solid transparent;outline-offset:2px}.watch-history-card: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)}.watch-history-card{position:relative;border-radius:var(--radius-lg);border-width:1px;border-color:transparent;background-color:var(--color-card);color:var(--color-text);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.watch-history-card:focus-visible{border-color:var(--color-info);--tw-border-opacity:0.4;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.watch-history-card[data-state=critical]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--color-card-critical)}.watch-history-card[data-state=private]{background-color:var(--color-card-private);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg)}.watch-history-card[data-state=disabled],.watch-history-card[data-state=private]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.watch-history-card[data-state=disabled]{opacity:.6;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.watch-history-card{display:flex;flex-wrap:wrap;align-items:stretch;gap:1.25rem;padding:1rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.watch-history-card:hover{--tw-translate-y:-0.125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media (min-width:640px){.watch-history-card{gap:1.5rem;padding:1.25rem}}.watch-history-card--private{border-color:var(--color-info);--tw-border-opacity:0.6}.watch-history-card__primary{display:flex;min-width:0;flex:1 1 0%;flex-wrap:wrap;align-items:stretch;gap:1rem}@media (min-width:640px){.watch-history-card__primary{flex-wrap:nowrap}}.watch-history-card__thumbnail{display:block;flex:none;color:var(--color-white);text-decoration-line:none}@media (min-width:640px){.watch-history-card__thumbnail{width:14rem}}.watch-history-card__thumbnailInner{aspect-ratio:16/9;width:100%;overflow:hidden;border-radius:var(--radius-lg);background-color:var(--color-surface)}.watch-history-card__thumbnailInner img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.watch-history-card__details{display:flex;min-width:0;flex:1 1 0%;flex-direction:column;justify-content:center;gap:var(--space-sm)}.watch-history-card__title{cursor:pointer;font-size:var(--font-size-lg);line-height:var(--line-height-base);font-weight:600;line-height:1.375;color:var(--color-white);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.watch-history-card__title:focus,.watch-history-card__title:hover{color:var(--color-info)}.watch-history-card__created{font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--color-muted)}.watch-history-card__meta{display:flex;min-width:0;flex-direction:column;justify-content:space-between;gap:1rem}@media (min-width:640px){.watch-history-card__meta{min-width:14rem;flex:0 0 16rem}}.watch-history-card__watched{font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--color-border-subtle)}.watch-history-card__creator{display:flex;align-items:center;gap:.75rem}.watch-history-card__creatorAvatar{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:var(--radius-full);background-color:var(--color-panel);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.watch-history-card__creatorAvatar:hover{--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.5}.watch-history-card__creatorAvatar: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.5}.watch-history-card__creatorAvatar img{height:100%;width:100%;border-radius:var(--radius-full);-o-object-fit:cover;object-fit:cover}.watch-history-card__creatorName{cursor:pointer;background-color:transparent;padding:0;text-align:left;font-size:var(--font-size-base);line-height:var(--line-height-base);font-weight:500;color:var(--color-muted);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.watch-history-card__creatorName:hover{color:var(--color-info)}.watch-history-card__creatorName:focus-visible{color:var(--color-info)}.watch-history-card__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.watch-history-card__action{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-full);border-width:1px;border-color:transparent;background-color:var(--color-panel);padding:.5rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:500;color:var(--color-muted);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.watch-history-card__action:hover{border-color:var(--color-border);background-color:var(--color-surface-alt);color:var(--color-white)}.watch-history-card__action:focus-visible{border-color:var(--color-border);background-color:var(--color-surface-alt);color:var(--color-white)}.watch-history-card__action--primary{background-color:var(--color-info-strong);color:var(--color-white)}.watch-history-card__action--primary:hover{background-color:var(--color-info-pressed)}.watch-history-card__action--primary:focus-visible{background-color:var(--color-info-pressed)}.watch-history-card__action--danger{background-color:var(--color-critical);color:var(--color-white)}.watch-history-card__action--danger:hover{background-color:var(--color-critical-strong)}.watch-history-card__action--danger:focus-visible{background-color:var(--color-critical-strong)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.\!visible{visibility:visible!important}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.bottom-1{bottom:.25rem}.bottom-4{bottom:1rem}.bottom-full{bottom:100%}.left-4{left:1rem}.right-0{right:0}.right-2{right:.5rem}.right-3{right:.75rem}.right-4{right:1rem}.top-0{top:0}.top-12{top:3rem}.top-14{top:3.5rem}.z-50{z-index:50}.z-\[60\]{z-index:60}.m-auto{margin:auto}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-0{margin-top:0;margin-bottom:0}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-4{margin-top:1rem;margin-bottom:1rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.-ml-2{margin-left:-.5rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mr-4{margin-right:1rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.box-border{box-sizing:border-box}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-1{height:.25rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-auto{height:auto}.h-full{height:100%}.max-h-\[420px\]{max-height:420px}.max-h-\[90vh\]{max-height:90vh}.max-h-\[92vh\]{max-height:92vh}.min-h-\[320px\]{min-height:320px}.min-h-screen{min-height:100vh}.w-0{width:0}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-32{width:8rem}.w-4{width:1rem}.w-40{width:10rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-72{width:18rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[0\%\]{width:0}.w-full{width:100%}.min-w-0{min-width:0}.max-w-56{max-width:14rem}.max-w-\[90\%\]{max-width:90%}.max-w-\[95\%\]{max-width:95%}.max-w-\[calc\(100vw-2rem\)\]{max-width:calc(100vw - 2rem)}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.translate-x-1{--tw-translate-x:0.25rem}.translate-x-1,.translate-x-5{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-5{--tw-translate-x:1.25rem}.rotate-90{--tw-rotate:90deg}.rotate-90,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-grabbing{cursor:grabbing}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.resize-y{resize:vertical}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.self-start{align-self:flex-start}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;white-space:nowrap}.overflow-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-full{border-radius:var(--radius-full)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-t-lg{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-amber-500\/40{border-color:rgba(245,158,11,.4)}.border-amber-500\/50{border-color:rgba(245,158,11,.5)}.border-amber-600\/70{border-color:rgba(217,119,6,.7)}.border-amber-700\/70{border-color:rgba(180,83,9,.7)}.border-blue-400\/50{border-color:rgba(96,165,250,.5)}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.border-blue-500\/40{border-color:rgba(59,130,246,.4)}.border-border{border-color:var(--color-border)}.border-emerald-700\/70{border-color:rgba(4,120,87,.7)}.border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1))}.border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity,1))}.border-gray-800{--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity,1))}.border-gray-800\/70{border-color:rgba(31,41,55,.7)}.border-green-500\/60{border-color:rgba(34,197,94,.6)}.border-purple-600\/60{border-color:rgba(147,51,234,.6)}.border-red-500\/40{border-color:rgba(239,68,68,.4)}.border-red-500\/50{border-color:rgba(239,68,68,.5)}.border-red-700\/70{border-color:rgba(185,28,28,.7)}.border-red-800\/70{border-color:rgba(153,27,27,.7)}.border-slate-500\/50{border-color:rgba(100,116,139,.5)}.border-transparent{border-color:transparent}.border-white{border-color:var(--color-white)}.border-yellow-700\/50{border-color:rgba(161,98,7,.5)}.bg-amber-500\/10{background-color:rgba(245,158,11,.1)}.bg-amber-900{--tw-bg-opacity:1;background-color:rgb(120 53 15/var(--tw-bg-opacity,1))}.bg-amber-900\/30{background-color:rgba(120,53,15,.3)}.bg-amber-900\/40{background-color:rgba(120,53,15,.4)}.bg-black{background-color:var(--color-black)}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-blue-500\/10{background-color:rgba(59,130,246,.1)}.bg-blue-500\/20{background-color:rgba(59,130,246,.2)}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-blue-900\/30{background-color:rgba(30,58,138,.3)}.bg-border-subtle{background-color:var(--color-border-subtle)}.bg-cyan-700{--tw-bg-opacity:1;background-color:rgb(14 116 144/var(--tw-bg-opacity,1))}.bg-cyan-800{--tw-bg-opacity:1;background-color:rgb(21 94 117/var(--tw-bg-opacity,1))}.bg-cyan-900{--tw-bg-opacity:1;background-color:rgb(22 78 99/var(--tw-bg-opacity,1))}.bg-cyan-950{--tw-bg-opacity:1;background-color:rgb(8 51 68/var(--tw-bg-opacity,1))}.bg-emerald-900\/40{background-color:rgba(6,78,59,.4)}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity,1))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.bg-gray-800\/60{background-color:rgba(31,41,55,.6)}.bg-gray-800\/70{background-color:rgba(31,41,55,.7)}.bg-gray-800\/80{background-color:rgba(31,41,55,.8)}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.bg-gray-900\/60{background-color:rgba(17,24,39,.6)}.bg-gray-900\/70{background-color:rgba(17,24,39,.7)}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.bg-green-500\/10{background-color:rgba(34,197,94,.1)}.bg-green-700{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity,1))}.bg-green-800{--tw-bg-opacity:1;background-color:rgb(22 101 52/var(--tw-bg-opacity,1))}.bg-green-900{--tw-bg-opacity:1;background-color:rgb(20 83 45/var(--tw-bg-opacity,1))}.bg-green-950{--tw-bg-opacity:1;background-color:rgb(5 46 22/var(--tw-bg-opacity,1))}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.bg-info{background-color:var(--color-info)}.bg-neutral-700{background-color:var(--color-neutral-700)}.bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity,1))}.bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity,1))}.bg-neutral-950{--tw-bg-opacity:1;background-color:rgb(10 10 10/var(--tw-bg-opacity,1))}.bg-orange-700{--tw-bg-opacity:1;background-color:rgb(194 65 12/var(--tw-bg-opacity,1))}.bg-orange-800{--tw-bg-opacity:1;background-color:rgb(154 52 18/var(--tw-bg-opacity,1))}.bg-orange-900{--tw-bg-opacity:1;background-color:rgb(124 45 18/var(--tw-bg-opacity,1))}.bg-orange-950{--tw-bg-opacity:1;background-color:rgb(67 20 7/var(--tw-bg-opacity,1))}.bg-panel{background-color:var(--color-panel)}.bg-purple-700{--tw-bg-opacity:1;background-color:rgb(126 34 206/var(--tw-bg-opacity,1))}.bg-purple-800{--tw-bg-opacity:1;background-color:rgb(107 33 168/var(--tw-bg-opacity,1))}.bg-purple-900{--tw-bg-opacity:1;background-color:rgb(88 28 135/var(--tw-bg-opacity,1))}.bg-purple-900\/40{background-color:rgba(88,28,135,.4)}.bg-purple-950{--tw-bg-opacity:1;background-color:rgb(59 7 100/var(--tw-bg-opacity,1))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-red-500\/10{background-color:rgba(239,68,68,.1)}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.bg-red-700{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.bg-red-800{--tw-bg-opacity:1;background-color:rgb(153 27 27/var(--tw-bg-opacity,1))}.bg-red-900{--tw-bg-opacity:1;background-color:rgb(127 29 29/var(--tw-bg-opacity,1))}.bg-red-900\/30{background-color:rgba(127,29,29,.3)}.bg-red-900\/40{background-color:rgba(127,29,29,.4)}.bg-red-950{--tw-bg-opacity:1;background-color:rgb(69 10 10/var(--tw-bg-opacity,1))}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))}.bg-stone-700{--tw-bg-opacity:1;background-color:rgb(68 64 60/var(--tw-bg-opacity,1))}.bg-stone-800{--tw-bg-opacity:1;background-color:rgb(41 37 36/var(--tw-bg-opacity,1))}.bg-stone-900{--tw-bg-opacity:1;background-color:rgb(28 25 23/var(--tw-bg-opacity,1))}.bg-stone-950{--tw-bg-opacity:1;background-color:rgb(12 10 9/var(--tw-bg-opacity,1))}.bg-surface-alt{background-color:var(--color-surface-alt)}.bg-transparent{background-color:transparent}.bg-white{background-color:var(--color-white)}.bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity,1))}.bg-yellow-900\/20{background-color:rgba(113,63,18,.2)}.bg-opacity-50{--tw-bg-opacity:0.5}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.from-cyan-900{--tw-gradient-from:#164e63 var(--tw-gradient-from-position);--tw-gradient-to:rgba(22,78,99,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-green-900{--tw-gradient-from:#14532d var(--tw-gradient-from-position);--tw-gradient-to:rgba(20,83,45,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-neutral-900{--tw-gradient-from:#171717 var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,9%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-orange-900{--tw-gradient-from:#7c2d12 var(--tw-gradient-from-position);--tw-gradient-to:rgba(124,45,18,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-900{--tw-gradient-from:#581c87 var(--tw-gradient-from-position);--tw-gradient-to:rgba(88,28,135,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-red-900{--tw-gradient-from:#7f1d1d var(--tw-gradient-from-position);--tw-gradient-to:rgba(127,29,29,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-stone-900{--tw-gradient-from:#1c1917 var(--tw-gradient-from-position);--tw-gradient-to:rgba(28,25,23,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-cyan-700{--tw-gradient-to:#0e7490 var(--tw-gradient-to-position)}.to-green-700{--tw-gradient-to:#15803d var(--tw-gradient-to-position)}.to-neutral-700{--tw-gradient-to:var(--color-neutral-700) var(--tw-gradient-to-position)}.to-orange-700{--tw-gradient-to:#c2410c var(--tw-gradient-to-position)}.to-purple-700{--tw-gradient-to:#7e22ce var(--tw-gradient-to-position)}.to-red-700{--tw-gradient-to:#b91c1c var(--tw-gradient-to-position)}.to-stone-700{--tw-gradient-to:#44403c var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pr-1{padding-right:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:var(--font-family-mono)}.font-sans{font-family:var(--font-family-sans)}.text-2xl{font-size:var(--font-size-2xl);line-height:var(--line-height-relaxed)}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-\[0\.65rem\]{font-size:.65rem}.text-\[0\.75rem\]{font-size:.75rem}.text-\[0\.7rem\]{font-size:.7rem}.text-\[11px\]{font-size:11px}.text-base{font-size:var(--font-size-base)}.text-base,.text-lg{line-height:var(--line-height-base)}.text-lg{font-size:var(--font-size-lg)}.text-sm{font-size:var(--font-size-sm);line-height:var(--line-height-snug)}.text-xl{font-size:var(--font-size-xl);line-height:var(--line-height-relaxed)}.text-xs{font-size:var(--font-size-xs);line-height:var(--line-height-tight)}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.leading-3{line-height:.75rem}.leading-4{line-height:1rem}.leading-5{line-height:1.25rem}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-wide{letter-spacing:.025em}.text-amber-100{--tw-text-opacity:1;color:rgb(254 243 199/var(--tw-text-opacity,1))}.text-amber-200{--tw-text-opacity:1;color:rgb(253 230 138/var(--tw-text-opacity,1))}.text-amber-200\/90{color:hsla(48,97%,77%,.9)}.text-amber-300{--tw-text-opacity:1;color:rgb(252 211 77/var(--tw-text-opacity,1))}.text-blue-100{--tw-text-opacity:1;color:rgb(219 234 254/var(--tw-text-opacity,1))}.text-blue-200{--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity,1))}.text-blue-300{--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity,1))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-critical{color:var(--color-critical)}.text-cyan-600{--tw-text-opacity:1;color:rgb(8 145 178/var(--tw-text-opacity,1))}.text-emerald-200\/90{color:rgba(167,243,208,.9)}.text-gray-100{--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-green-100{--tw-text-opacity:1;color:rgb(220 252 231/var(--tw-text-opacity,1))}.text-green-200{--tw-text-opacity:1;color:rgb(187 247 208/var(--tw-text-opacity,1))}.text-green-300{--tw-text-opacity:1;color:rgb(134 239 172/var(--tw-text-opacity,1))}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-green-900{--tw-text-opacity:1;color:rgb(20 83 45/var(--tw-text-opacity,1))}.text-info{color:var(--color-info)}.text-muted{color:var(--color-muted)}.text-neutral-600{color:var(--color-neutral-600)}.text-neutral-800{--tw-text-opacity:1;color:rgb(38 38 38/var(--tw-text-opacity,1))}.text-orange-600{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity,1))}.text-purple-200\/90{color:rgba(233,213,255,.9)}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity,1))}.text-red-100{--tw-text-opacity:1;color:rgb(254 226 226/var(--tw-text-opacity,1))}.text-red-200{--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity,1))}.text-red-200\/80{color:hsla(0,96%,89%,.8)}.text-red-200\/90{color:hsla(0,96%,89%,.9)}.text-red-300{--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-red-900{--tw-text-opacity:1;color:rgb(127 29 29/var(--tw-text-opacity,1))}.text-stone-600{--tw-text-opacity:1;color:rgb(87 83 78/var(--tw-text-opacity,1))}.text-text{color:var(--color-text)}.text-white{color:var(--color-white)}.text-yellow-200{--tw-text-opacity:1;color:rgb(254 240 138/var(--tw-text-opacity,1))}.text-yellow-300{--tw-text-opacity:1;color:rgb(253 224 71/var(--tw-text-opacity,1))}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21/var(--tw-text-opacity,1))}.text-yellow-500{--tw-text-opacity:1;color:rgb(234 179 8/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.decoration-dotted{text-decoration-style:dotted}.decoration-2{text-decoration-thickness:2px}.underline-offset-2{text-underline-offset:2px}.underline-offset-4{text-underline-offset:4px}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\[0_0px_10px_0px_rgba\(0\2c 0\2c 0\2c 0\.3\)\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0px_10px_0px_rgba\(0\2c 0\2c 0\2c 0\.3\)\]{--tw-shadow:0 0px 10px 0px rgba(0,0,0,.3);--tw-shadow-colored:0 0px 10px 0px var(--tw-shadow-color)}.shadow-\[0_0px_30px_0px_rgba\(0\2c 0\2c 0\2c 0\.6\)\]{--tw-shadow:0 0px 30px 0px rgba(0,0,0,.6);--tw-shadow-colored:0 0px 30px 0px var(--tw-shadow-color)}.shadow-\[0_0px_30px_0px_rgba\(0\2c 0\2c 0\2c 0\.6\)\],.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg)}.shadow-md{--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.outline-dashed{outline-style:dashed}.outline-1{outline-width:1px}.outline-offset-4{outline-offset:4px}.outline-cyan-500{outline-color:#06b6d4}.outline-green-500{outline-color:#22c55e}.outline-neutral-500{outline-color:#737373}.outline-orange-500{outline-color:#f97316}.outline-purple-500{outline-color:#a855f7}.outline-red-500{outline-color:#ef4444}.outline-stone-500{outline-color:#78716c}.ring{--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(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring,.ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-1{--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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-black{--tw-ring-color:var(--color-black)}.ring-opacity-5{--tw-ring-opacity:0.05}.blur{--tw-blur:blur(8px)}.blur,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%)}.\!filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-transform{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@media (max-width:40rem){.bv-grid-video{gap:var(--space-md);grid-template-columns:1fr}}@media (min-width:768px){.md\:hidden.profile-pane{display:none}}.hover\:border-gray-500:hover{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity,1))}.hover\:border-red-400:hover{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity,1))}.hover\:bg-\[\#e6002c\]:hover{--tw-bg-opacity:1;background-color:rgb(230 0 44/var(--tw-bg-opacity,1))}.hover\:bg-blue-400:hover{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity,1))}.hover\:bg-blue-500:hover{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.hover\:bg-blue-800\/40:hover{background-color:rgba(30,64,175,.4)}.hover\:bg-critical:hover{background-color:var(--color-critical)}.hover\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.hover\:bg-gray-700\/70:hover{background-color:rgba(55,65,81,.7)}.hover\:bg-gray-800:hover{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.hover\:bg-indigo-600:hover{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity,1))}.hover\:bg-neutral-800:hover{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity,1))}.hover\:bg-panel-hover:hover{background-color:var(--color-panel-hover)}.hover\:bg-red-500:hover{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.hover\:bg-red-900\/40:hover{background-color:rgba(127,29,29,.4)}.hover\:bg-transparent:hover{background-color:transparent}.hover\:text-blue-200:hover{--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity,1))}.hover\:text-blue-300:hover{--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity,1))}.hover\:text-blue-400:hover{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.hover\:text-gray-200:hover{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.hover\:text-info-strong:hover{color:var(--color-info-strong)}.hover\:text-red-200:hover{--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity,1))}.hover\:text-text:hover{color:var(--color-text)}.hover\:text-white:hover{color:var(--color-white)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-90:hover{opacity:.9}.hover\:shadow-2xl:hover{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:border-blue-400:focus{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-1:focus{--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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-1:focus,.focus\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-2:focus{--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)}.focus\:ring-\[\#0f172a\]:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(15 23 42/var(--tw-ring-opacity,1))}.focus\:ring-black:focus{--tw-ring-color:var(--color-black)}.focus\:ring-blue-200:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(191 219 254/var(--tw-ring-opacity,1))}.focus\:ring-blue-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(147 197 253/var(--tw-ring-opacity,1))}.focus\:ring-blue-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(96 165 250/var(--tw-ring-opacity,1))}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.focus\:ring-gray-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(107 114 128/var(--tw-ring-opacity,1))}.focus\:ring-green-500\/80:focus{--tw-ring-color:rgba(34,197,94,.8)}.focus\:ring-indigo-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(99 102 241/var(--tw-ring-opacity,1))}.focus\:ring-red-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity,1))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus\:ring-offset-black:focus{--tw-ring-offset-color:var(--color-black)}.focus\:ring-offset-gray-900:focus{--tw-ring-offset-color:#111827}.focus-visible\:ring-2: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)}.focus-visible\:ring-blue-500:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.focus-visible\:ring-offset-gray-900:focus-visible{--tw-ring-offset-color:#111827}.disabled\:cursor-default:disabled{cursor:default}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-blue-900:disabled{--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1))}.disabled\:bg-neutral-400:disabled{--tw-bg-opacity:1;background-color:rgb(163 163 163/var(--tw-bg-opacity,1))}.disabled\:text-neutral-200:disabled{--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity,1))}.disabled\:opacity-60:disabled{opacity:.6}.group:hover .group-hover\:underline{text-decoration-line:underline}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:w-96{width:24rem}.sm\:w-auto{width:auto}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:flex-wrap{flex-wrap:wrap}.sm\:items-start{align-items:flex-start}.sm\:items-end{align-items:flex-end}.sm\:items-center{align-items:center}.sm\:justify-end{justify-content:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:self-end{align-self:flex-end}.sm\:py-0{padding-top:0;padding-bottom:0}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:hidden{display:none}.md\:h-64{height:16rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:items-center{align-items:center}}@media (min-width:1024px){.lg\:sticky{position:sticky}.lg\:top-24{top:6rem}.lg\:max-w-4xl{max-width:56rem}.lg\:max-w-5xl{max-width:64rem}.lg\:max-w-6xl{max-width:72rem}.lg\:grid-cols-\[minmax\(0\2c 1\.4fr\)_minmax\(0\2c 1fr\)\]{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}.lg\:grid-cols-\[minmax\(240px\2c 280px\)_1fr\]{grid-template-columns:minmax(240px,280px) 1fr}.lg\:flex-row{flex-direction:row}.lg\:flex-col{flex-direction:column}.lg\:items-start{align-items:flex-start}.lg\:justify-between{justify-content:space-between}}
\ No newline at end of file
+/*! 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-function:cubic-bezier(.4,0,.2,1)}.btn,.btn:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.btn:hover{background-color:var(--color-info-strong);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg)}.btn:focus-visible{background-color:var(--color-info-pressed)}.btn:disabled{pointer-events:none;cursor:not-allowed;opacity:.6;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.btn-ghost{outline:2px solid transparent;outline-offset:2px}.btn-ghost: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-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-lg);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;--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-function:cubic-bezier(.4,0,.2,1)}.btn-ghost:hover{background-color:var(--color-info-strong);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.btn-ghost:focus-visible{background-color:var(--color-info-pressed)}.btn-ghost:disabled{cursor:not-allowed;opacity:.6}.btn-ghost{border-width:1px;border-color:var(--color-border);--tw-border-opacity:0.6;background-color:transparent;color:var(--color-white);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.btn-ghost:hover{background-color:var(--color-panel-hover);color:var(--color-text)}.btn-ghost:focus-visible{background-color:var(--color-panel-hover)}.btn-ghost:disabled{pointer-events:none;opacity:.5;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!badge,.badge{display:inline-flex;align-items:center;gap:.25rem;border-radius:var(--radius-full);background-color:var(--color-panel);padding:.25rem .75rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);font-weight:600;text-transform:uppercase;letter-spacing:.025em;color:var(--color-muted-strong)}.\!badge[data-variant=critical],.badge[data-variant=critical]{background-color:var(--color-critical);--tw-bg-opacity:0.2;color:var(--color-critical-strong)}.\!badge[data-variant=info],.badge[data-variant=info]{background-color:var(--color-info);--tw-bg-opacity:0.2;color:var(--color-info-strong)}.\!badge[data-variant=neutral],.badge[data-variant=neutral]{background-color:var(--color-border);--tw-bg-opacity:0.4;color:var(--color-muted-strong)}.\!menu,.menu{display:flex;flex-direction:column;gap:.25rem;padding-top:.5rem;padding-bottom:.5rem}.menu__item{outline:2px solid transparent;outline-offset:2px}.menu__item: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)}.menu__item{position:relative;display:flex;width:100%;align-items:center;gap:.75rem;border-radius:var(--radius-md);padding:.5rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:500;color:var(--color-text);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:var(--motion-ease-in-out)}.menu__item:hover{background-color:var(--color-panel-hover);color:var(--color-text)}.menu__item[data-state=active]{background-color:var(--color-info);--tw-bg-opacity:0.2;color:var(--color-info-strong)}.menu__item[data-variant=critical]{color:var(--color-critical-strong)}.menu__item[data-variant=critical]:hover{background-color:var(--color-critical);--tw-bg-opacity:0.2}.menu__item:disabled,.menu__item[aria-disabled=true]{cursor:not-allowed;opacity:.6}.menu__item:disabled,.menu__item:disabled:hover,.menu__item[aria-disabled=true],.menu__item[aria-disabled=true]:hover{background-color:transparent;color:var(--color-muted)}.\!card{outline:2px solid transparent;outline-offset:2px}.\!card: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)}.\!card{position:relative;border-radius:var(--radius-lg);border-width:1px;border-color:transparent;background-color:var(--color-card);color:var(--color-text);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);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-function:cubic-bezier(.4,0,.2,1)}.card{outline:2px solid transparent;outline-offset:2px}.card: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)}.card{position:relative;border-radius:var(--radius-lg);border-width:1px;border-color:transparent;background-color:var(--color-card);color:var(--color-text);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);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-function:cubic-bezier(.4,0,.2,1)}.\!card:hover,.card:hover{--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!card:focus-visible{border-color:var(--color-info);--tw-border-opacity:0.4;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.card:focus-visible{border-color:var(--color-info);--tw-border-opacity:0.4;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!card[data-state=critical],.card[data-state=critical]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--color-card-critical)}.\!card[data-state=private],.card[data-state=private]{background-color:var(--color-card-private);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!card[data-state=disabled],.card[data-state=disabled]{opacity:.6;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.form-control{outline:2px solid transparent;outline-offset:2px}.form-control: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)}.form-control{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--color-border-subtle);background-color:var(--color-surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--color-text);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);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-function:cubic-bezier(.4,0,.2,1)}.form-control::-moz-placeholder{color:var(--color-muted)}.form-control::placeholder{color:var(--color-muted)}.form-control:hover{border-color:var(--color-border)}.form-control:focus-visible{border-color:var(--color-info-strong)}.form-control:disabled{cursor:not-allowed;background-color:var(--color-surface);color:var(--color-muted);opacity:.6}.form-control:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}.\!input{outline:2px solid transparent;outline-offset:2px}.\!input: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)}.\!input{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--color-border-subtle);background-color:var(--color-surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--color-text);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);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-function:cubic-bezier(.4,0,.2,1)}.\!input::-moz-placeholder{color:var(--color-muted)}.\!input::placeholder{color:var(--color-muted)}.\!input:hover{border-color:var(--color-border)}.\!input:focus-visible{border-color:var(--color-info-strong)}.\!input:disabled{cursor:not-allowed;background-color:var(--color-surface);color:var(--color-muted);opacity:.6}.\!input:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}@media (prefers-reduced-motion:reduce){.\!input{transition:none}}.input{outline:2px solid transparent;outline-offset:2px}.input: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)}.input{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--color-border-subtle);background-color:var(--color-surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--color-text);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);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-function:cubic-bezier(.4,0,.2,1)}.input::-moz-placeholder{color:var(--color-muted)}.input::placeholder{color:var(--color-muted)}.input:hover{border-color:var(--color-border)}.input:focus-visible{border-color:var(--color-info-strong)}.input:disabled{cursor:not-allowed;background-color:var(--color-surface);color:var(--color-muted);opacity:.6}.input:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}@media (prefers-reduced-motion:reduce){.input{transition:none}}.textarea{outline:2px solid transparent;outline-offset:2px}.textarea: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)}.textarea{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--color-border-subtle);background-color:var(--color-surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--color-text);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);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-function:cubic-bezier(.4,0,.2,1)}.textarea::-moz-placeholder{color:var(--color-muted)}.textarea::placeholder{color:var(--color-muted)}.textarea:hover{border-color:var(--color-border)}.textarea:focus-visible{border-color:var(--color-info-strong)}.textarea:disabled{cursor:not-allowed;background-color:var(--color-surface);color:var(--color-muted);opacity:.6}.textarea:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}@media (prefers-reduced-motion:reduce){.textarea{transition:none}}.textarea{min-height:8rem;resize:vertical}.select{outline:2px solid transparent;outline-offset:2px}.select: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)}.select{display:block;width:100%;border-radius:var(--radius-md);border-width:1px;border-color:var(--color-border-subtle);background-color:var(--color-surface-alt);padding:.5rem .75rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--color-text);--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);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-function:cubic-bezier(.4,0,.2,1)}.select::-moz-placeholder{color:var(--color-muted)}.select::placeholder{color:var(--color-muted)}.select:hover{border-color:var(--color-border)}.select:focus-visible{border-color:var(--color-info-strong)}.select:disabled{cursor:not-allowed;background-color:var(--color-surface);color:var(--color-muted);opacity:.6}.select:invalid{border-color:var(--color-critical);--tw-border-opacity:0.6}@media (prefers-reduced-motion:reduce){.select{transition:none}}.select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:2.5rem;background-image:linear-gradient(135deg,transparent 50%,var(--select-arrow-color) 50%),linear-gradient(45deg,var(--select-arrow-color) 50%,transparent 50%),linear-gradient(to right,var(--color-border-subtle),var(--color-border-subtle));background-position:right .75rem center,right .4rem center,right 2.5rem center;background-size:.6rem .6rem,.6rem .6rem,1px 60%;background-repeat:no-repeat}.select,.select:hover{--select-arrow-color:var(--color-border)}.select:focus-visible{--select-arrow-color:var(--color-info-strong)}.select:disabled{--select-arrow-color:var(--color-border-subtle)}.select:invalid{--select-arrow-color:var(--color-critical)}.\!checkbox{outline:2px solid transparent;outline-offset:2px}.\!checkbox: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)}.\!checkbox{display:inline-flex;height:1.25rem;width:1.25rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-items:center;justify-content:center;border-radius:.25rem;border-width:1px;border-color:var(--color-border-subtle);background-color:var(--color-surface-alt);color:var(--color-white);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-function:cubic-bezier(.4,0,.2,1)}.checkbox{outline:2px solid transparent;outline-offset:2px}.checkbox: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)}.checkbox{display:inline-flex;height:1.25rem;width:1.25rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-items:center;justify-content:center;border-radius:.25rem;border-width:1px;border-color:var(--color-border-subtle);background-color:var(--color-surface-alt);color:var(--color-white);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-function:cubic-bezier(.4,0,.2,1)}.\!checkbox:hover,.checkbox:hover{border-color:var(--color-border)}.\!checkbox:disabled,.checkbox:disabled{cursor:not-allowed;border-color:var(--color-border-subtle);background-color:var(--color-surface);color:var(--color-muted);opacity:.6}.\!checkbox:after{content:""!important}.checkbox:after{content:""}.\!checkbox:after,.checkbox:after{pointer-events:none;height:.5rem;width:.75rem;border-bottom-width:2px;border-right-width:2px;border-color:var(--color-white);opacity:0;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-function:cubic-bezier(.4,0,.2,1)}.\!checkbox:after{transform:rotate(45deg) translateY(-.125rem) scale(.85)!important}.checkbox:after{transform:rotate(45deg) translateY(-.125rem) scale(.85)}.\!checkbox:checked,.\!checkbox[aria-checked=true],.checkbox:checked,.checkbox[aria-checked=true]{border-color:var(--color-info-strong);background-color:var(--color-info-strong)}.\!checkbox:checked:after,.\!checkbox[aria-checked=true]:after,.checkbox:checked:after,.checkbox[aria-checked=true]:after{opacity:1}.checkbox:checked:after,.checkbox[aria-checked=true]:after{transform:rotate(45deg) translateY(-.125rem) scale(1)}.\!checkbox:checked:after,.\!checkbox[aria-checked=true]:after{transform:rotate(45deg) translateY(-.125rem) scale(1)!important}.switch{outline:2px solid transparent;outline-offset:2px}.switch: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)}.switch{position:relative;display:inline-flex;height:1.5rem;width:2.75rem;cursor:pointer;align-items:center;border-radius:var(--radius-full);border-width:1px;border-color:var(--color-border-subtle);background-color:var(--color-border-subtle);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.switch,.switch:before{transition-duration:.15s;transition-duration:var(--motion-duration-base)}.switch:before{content:"";pointer-events:none;position:absolute;left:.125rem;top:50%;height:1.25rem;width:1.25rem;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:var(--radius-full);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.switch:before,.switch:disabled{background-color:var(--color-surface)}.switch:disabled{cursor:not-allowed;border-color:var(--color-border-subtle);color:var(--color-muted);opacity:.6}.switch.is-on,.switch[aria-checked=true]{border-color:var(--color-info-strong);background-color:var(--color-info-strong)}.switch.is-on:before,.switch[aria-checked=true]:before{--tw-translate-x:1.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (prefers-reduced-motion:reduce){.\!checkbox,.\!checkbox:after,.checkbox,.checkbox:after,.form-control,.menu__item,.popover__panel,.switch,.switch:before{transition:none!important}}.bv-modal{position:fixed;inset:0;z-index:var(--z-modal-root);display:flex;align-items:center;justify-content:center;padding:1rem}@media (min-width:640px){.bv-modal{padding:1.5rem}}.bv-modal__panel{outline:2px solid transparent;outline-offset:2px}.bv-modal__panel: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)}.bv-modal__panel{position:relative;z-index:var(--z-modal-content);width:100%;max-width:48rem;border-radius:var(--radius-xl);border-width:1px;border-color:var(--color-border);--tw-border-opacity:0.4;background-color:var(--color-surface);padding:2rem 1.5rem;text-align:left;color:var(--color-white);--tw-shadow:var(--shadow-modal);--tw-shadow-colored:var(--shadow-modal);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.bv-modal__panel:focus-visible{border-color:var(--color-info);--tw-border-opacity:0.5}.bv-modal-backdrop{position:absolute;inset:0;z-index:var(--z-modal-overlay);background-color:var(--color-overlay);--tw-bg-opacity:0.8;--tw-backdrop-blur:blur(8px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.bv-modal-backdrop[data-variant=veil]{background-color:var(--color-overlay-veil);--tw-bg-opacity:1}.bv-modal-backdrop[data-variant=muted]{background-color:var(--color-overlay-muted)}.modal-sheet{outline:2px solid transparent;outline-offset:2px}.modal-sheet: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)}.modal-sheet{z-index:var(--z-modal-content);max-width:48rem;border-width:1px;border-color:var(--color-border);--tw-border-opacity:0.4;padding:2rem 1.5rem;text-align:left;color:var(--color-white);--tw-shadow:var(--shadow-modal);--tw-shadow-colored:var(--shadow-modal);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.modal-sheet:focus-visible{border-color:var(--color-info);--tw-border-opacity:0.5}.modal-sheet{position:relative;margin-top:0;margin-bottom:0;width:100%;max-width:90%;overflow:hidden;border-radius:var(--radius-xl);background-color:var(--color-surface)}@media (min-width:1024px){.modal-sheet{max-width:72rem}}.modal-header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;border-width:1px;border-color:var(--color-border);--tw-border-opacity:0.6;padding:1rem;background:linear-gradient(to bottom,var(--color-overlay-panel-gradient-start),var(--color-overlay-panel-gradient-end,transparent));backdrop-filter:blur(var(--modal-header-blur,18px))}.modal-header[data-variant=flush]{border-color:transparent;background:linear-gradient(to bottom,var(--color-overlay-panel-tint),transparent)}.modal-close{outline:2px solid transparent;outline-offset:2px}.modal-close: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)}.modal-close{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:var(--radius-full);background-color:var(--color-overlay-black);--tw-bg-opacity:0.5;color:var(--color-muted);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.modal-close:hover{background-color:var(--color-overlay-black);--tw-bg-opacity:0.7;color:var(--color-text)}.modal-body>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.modal-body{padding:1.5rem}.modal-footer{border-width:1px;border-color:var(--color-border);--tw-border-opacity:0.6;background-color:var(--color-surface);padding:1rem 1.5rem}.grid-stack{display:grid;gap:var(--space-lg)}.grid-stack[data-variant=cards]{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.grid-stack[data-variant=cards]{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1280px){.grid-stack[data-variant=cards]{grid-template-columns:repeat(3,minmax(0,1fr))}}.grid-stack[data-orientation=vertical]{display:flex;flex-direction:column;gap:var(--space-md)}.bv-stack{display:flex;flex-direction:column;gap:var(--space-lg)}.bv-stack--tight{gap:var(--space-md)}.bv-grid-video{display:grid;gap:var(--space-xl);padding-top:var(--space-lg);padding-bottom:var(--space-lg);grid-template-columns:repeat(auto-fill,minmax(20rem,1fr))}.video-card{outline:2px solid transparent;outline-offset:2px}.video-card: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)}.video-card{position:relative;border-radius:var(--radius-lg);border-width:1px;border-color:transparent;background-color:var(--color-card);color:var(--color-text);--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-function:cubic-bezier(.4,0,.2,1)}.video-card,.video-card:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.video-card:hover{--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg)}.video-card:focus-visible{border-color:var(--color-info);--tw-border-opacity:0.4;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.video-card[data-state=critical]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--color-card-critical)}.video-card[data-state=private]{background-color:var(--color-card-private);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg)}.video-card[data-state=disabled],.video-card[data-state=private]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.video-card[data-state=disabled]{opacity:.6;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.video-card{overflow:visible}.video-card.video-card--owner-private{background-color:var(--color-card-private)}.video-card.video-card--nsfw-owner{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--color-black)}.video-card.video-card--nsfw-owner:hover{--tw-border-opacity:0.6;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.video-card img.video-card__thumbnail--blurred{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-function:cubic-bezier(.4,0,.2,1);filter:blur(18px);transform:scale(1.05)}.video-card[data-owner-is-viewer=true][data-url-health-state=offline][data-stream-health-state=unhealthy]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--color-card-critical)}.video-visibility-toggle{display:inline-flex;align-items:center;gap:.25rem;border-radius:var(--radius-full);border-width:1px;border-color:var(--color-border);background-color:var(--color-panel);padding:.25rem}.video-visibility-toggle__option{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);border-width:1px;border-color:transparent;background-color:var(--color-panel);padding:.5rem .75rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);font-weight:600;text-transform:uppercase;color:var(--color-muted);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-function:cubic-bezier(.4,0,.2,1)}.video-visibility-toggle__option:not(.is-disabled):hover{background-color:var(--color-panel-hover);color:var(--color-text)}.video-visibility-toggle__option[data-active=true]{border-width:1px;border-color:var(--color-info);--tw-border-opacity:0.6;color:var(--color-text);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.video-visibility-toggle__option.is-disabled{cursor:not-allowed;opacity:.45}.player-modal__container,.video-modal__container{display:flex;height:100%;min-height:100vh;width:100%;flex:1 1 0%;flex-direction:column}.video-modal__panel{outline:2px solid transparent;outline-offset:2px}.video-modal__panel: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)}.video-modal__panel{z-index:var(--z-modal-content);max-width:48rem;border-radius:var(--radius-xl);border-width:1px;border-color:var(--color-border);--tw-border-opacity:0.4;padding:2rem 1.5rem;text-align:left;color:var(--color-white);--tw-shadow:var(--shadow-modal);--tw-shadow-colored:var(--shadow-modal);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.video-modal__panel:focus-visible{border-color:var(--color-info);--tw-border-opacity:0.5}.video-modal__panel{position:relative;display:flex;width:100%;flex:1 1 0%;flex-direction:column;overflow:visible;background-color:var(--color-surface);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.player-modal__content{outline:2px solid transparent;outline-offset:2px}.player-modal__content: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)}.player-modal__content{z-index:var(--z-modal-content);max-width:48rem;border-radius:var(--radius-xl);border-width:1px;border-color:var(--color-border);--tw-border-opacity:0.4;padding:2rem 1.5rem;text-align:left;color:var(--color-white);--tw-shadow:var(--shadow-modal);--tw-shadow-colored:var(--shadow-modal);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.player-modal__content:focus-visible{border-color:var(--color-info);--tw-border-opacity:0.5}.player-modal__content{position:relative;display:flex;width:100%;flex:1 1 0%;flex-direction:column;overflow:visible;background-color:var(--color-surface);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.modal-nav,.video-modal__nav{position:sticky;top:0;z-index:60;border-bottom-width:1px;border-color:var(--color-border);--tw-border-opacity:0.4;background-color:var(--color-surface)}.modal-actions,.video-modal__actions{margin-left:auto;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:.5rem}.player-modal__video,.video-modal__video{position:sticky;top:0;z-index:51;display:flex;width:100%;flex-shrink:0;align-items:center;justify-content:center;border-bottom-width:1px;border-color:var(--color-border);--tw-border-opacity:0.2;background-color:var(--color-surface)}.player-modal__video video,.video-modal__media{display:block;aspect-ratio:16/9;width:100%;border-radius:var(--radius-xl);background-color:var(--color-black);-o-object-fit:contain;object-fit:contain;--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.player-modal__info,.video-modal__info{flex:none;border-top-width:1px;border-color:var(--color-border);--tw-border-opacity:0.2;background-color:var(--color-surface)}.profile-pane{display:flex;flex-direction:column;gap:var(--space-lg)}.profile-pane.hidden{display:none}.watch-history-card{outline:2px solid transparent;outline-offset:2px}.watch-history-card: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)}.watch-history-card{position:relative;border-radius:var(--radius-lg);border-width:1px;border-color:transparent;background-color:var(--color-card);color:var(--color-text);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.watch-history-card:focus-visible{border-color:var(--color-info);--tw-border-opacity:0.4;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.watch-history-card[data-state=critical]{border-width:1px;border-color:var(--color-critical);--tw-border-opacity:0.4;background-color:var(--color-card-critical)}.watch-history-card[data-state=private]{background-color:var(--color-card-private);--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg)}.watch-history-card[data-state=disabled],.watch-history-card[data-state=private]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.watch-history-card[data-state=disabled]{opacity:.6;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.watch-history-card{display:flex;flex-wrap:wrap;align-items:stretch;gap:1.25rem;padding:1rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.watch-history-card:hover{--tw-translate-y:-0.125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media (min-width:640px){.watch-history-card{gap:1.5rem;padding:1.25rem}}.watch-history-card--private{border-color:var(--color-info);--tw-border-opacity:0.6}.watch-history-card__primary{display:flex;min-width:0;flex:1 1 0%;flex-wrap:wrap;align-items:stretch;gap:1rem}@media (min-width:640px){.watch-history-card__primary{flex-wrap:nowrap}}.watch-history-card__thumbnail{display:block;flex:none;color:var(--color-white);text-decoration-line:none}@media (min-width:640px){.watch-history-card__thumbnail{width:14rem}}.watch-history-card__thumbnailInner{aspect-ratio:16/9;width:100%;overflow:hidden;border-radius:var(--radius-lg);background-color:var(--color-surface)}.watch-history-card__thumbnailInner img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.watch-history-card__details{display:flex;min-width:0;flex:1 1 0%;flex-direction:column;justify-content:center;gap:var(--space-sm)}.watch-history-card__title{cursor:pointer;font-size:var(--font-size-lg);line-height:var(--line-height-base);font-weight:600;line-height:1.375;color:var(--color-white);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.watch-history-card__title:focus,.watch-history-card__title:hover{color:var(--color-info)}.watch-history-card__created{font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--color-muted)}.watch-history-card__meta{display:flex;min-width:0;flex-direction:column;justify-content:space-between;gap:1rem}@media (min-width:640px){.watch-history-card__meta{min-width:14rem;flex:0 0 16rem}}.watch-history-card__watched{font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--color-border-subtle)}.watch-history-card__creator{display:flex;align-items:center;gap:.75rem}.watch-history-card__creatorAvatar{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:var(--radius-full);background-color:var(--color-panel);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.watch-history-card__creatorAvatar:hover{--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.5}.watch-history-card__creatorAvatar: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.5}.watch-history-card__creatorAvatar img{height:100%;width:100%;border-radius:var(--radius-full);-o-object-fit:cover;object-fit:cover}.watch-history-card__creatorName{cursor:pointer;background-color:transparent;padding:0;text-align:left;font-size:var(--font-size-base);line-height:var(--line-height-base);font-weight:500;color:var(--color-muted);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.watch-history-card__creatorName:hover{color:var(--color-info)}.watch-history-card__creatorName:focus-visible{color:var(--color-info)}.watch-history-card__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.watch-history-card__action{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-full);border-width:1px;border-color:transparent;background-color:var(--color-panel);padding:.5rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:500;color:var(--color-muted);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-function:cubic-bezier(0,0,.2,1)}.watch-history-card__action:hover{border-color:var(--color-border);background-color:var(--color-surface-alt);color:var(--color-white)}.watch-history-card__action:focus-visible{border-color:var(--color-border);background-color:var(--color-surface-alt);color:var(--color-white)}.watch-history-card__action--primary{background-color:var(--color-info-strong);color:var(--color-white)}.watch-history-card__action--primary:hover{background-color:var(--color-info-pressed)}.watch-history-card__action--primary:focus-visible{background-color:var(--color-info-pressed)}.watch-history-card__action--danger{background-color:var(--color-critical);color:var(--color-white)}.watch-history-card__action--danger:hover{background-color:var(--color-critical-strong)}.watch-history-card__action--danger:focus-visible{background-color:var(--color-critical-strong)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.\!visible{visibility:visible!important}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.bottom-1{bottom:.25rem}.bottom-4{bottom:1rem}.bottom-full{bottom:100%}.left-4{left:1rem}.right-0{right:0}.right-2{right:.5rem}.right-3{right:.75rem}.right-4{right:1rem}.top-0{top:0}.top-12{top:3rem}.top-14{top:3.5rem}.z-50{z-index:50}.z-\[60\]{z-index:60}.m-auto{margin:auto}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-4{margin-top:1rem;margin-bottom:1rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.-ml-2{margin-left:-.5rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mr-4{margin-right:1rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.box-border{box-sizing:border-box}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-1{height:.25rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[80vh\]{height:80vh}.h-auto{height:auto}.h-full{height:100%}.max-h-\[420px\]{max-height:420px}.max-h-\[48vh\]{max-height:48vh}.max-h-\[90vh\]{max-height:90vh}.max-h-\[92vh\]{max-height:92vh}.max-h-\[calc\(92vh-4rem\)\]{max-height:calc(92vh - 4rem)}.min-h-\[320px\]{min-height:320px}.min-h-screen{min-height:100vh}.w-0{width:0}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-32{width:8rem}.w-4{width:1rem}.w-40{width:10rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-72{width:18rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[0\%\]{width:0}.w-full{width:100%}.min-w-0{min-width:0}.max-w-56{max-width:14rem}.max-w-\[calc\(100vw-2rem\)\]{max-width:calc(100vw - 2rem)}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.translate-x-1{--tw-translate-x:0.25rem}.translate-x-1,.translate-x-5{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-5{--tw-translate-x:1.25rem}.rotate-90{--tw-rotate:90deg}.rotate-90,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-grabbing{cursor:grabbing}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.resize-y{resize:vertical}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.self-start{align-self:flex-start}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;white-space:nowrap}.overflow-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-full{border-radius:var(--radius-full)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-t-lg{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-amber-500\/40{border-color:rgba(245,158,11,.4)}.border-amber-500\/50{border-color:rgba(245,158,11,.5)}.border-amber-600\/70{border-color:rgba(217,119,6,.7)}.border-amber-700\/70{border-color:rgba(180,83,9,.7)}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.border-blue-500\/40{border-color:rgba(59,130,246,.4)}.border-border{border-color:var(--color-border)}.border-emerald-700\/70{border-color:rgba(4,120,87,.7)}.border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1))}.border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity,1))}.border-gray-800{--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity,1))}.border-gray-800\/70{border-color:rgba(31,41,55,.7)}.border-green-500\/60{border-color:rgba(34,197,94,.6)}.border-purple-600\/60{border-color:rgba(147,51,234,.6)}.border-red-500\/40{border-color:rgba(239,68,68,.4)}.border-red-500\/50{border-color:rgba(239,68,68,.5)}.border-red-700\/70{border-color:rgba(185,28,28,.7)}.border-red-800\/70{border-color:rgba(153,27,27,.7)}.border-slate-500\/50{border-color:rgba(100,116,139,.5)}.border-transparent{border-color:transparent}.border-white{border-color:var(--color-white)}.bg-amber-500\/10{background-color:rgba(245,158,11,.1)}.bg-amber-900{--tw-bg-opacity:1;background-color:rgb(120 53 15/var(--tw-bg-opacity,1))}.bg-amber-900\/30{background-color:rgba(120,53,15,.3)}.bg-amber-900\/40{background-color:rgba(120,53,15,.4)}.bg-black{background-color:var(--color-black)}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-blue-500\/10{background-color:rgba(59,130,246,.1)}.bg-blue-500\/20{background-color:rgba(59,130,246,.2)}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-blue-900\/30{background-color:rgba(30,58,138,.3)}.bg-border-subtle{background-color:var(--color-border-subtle)}.bg-critical{background-color:var(--color-critical)}.bg-cyan-700{--tw-bg-opacity:1;background-color:rgb(14 116 144/var(--tw-bg-opacity,1))}.bg-cyan-800{--tw-bg-opacity:1;background-color:rgb(21 94 117/var(--tw-bg-opacity,1))}.bg-cyan-900{--tw-bg-opacity:1;background-color:rgb(22 78 99/var(--tw-bg-opacity,1))}.bg-cyan-950{--tw-bg-opacity:1;background-color:rgb(8 51 68/var(--tw-bg-opacity,1))}.bg-emerald-900\/40{background-color:rgba(6,78,59,.4)}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.bg-gray-800\/60{background-color:rgba(31,41,55,.6)}.bg-gray-800\/70{background-color:rgba(31,41,55,.7)}.bg-gray-800\/80{background-color:rgba(31,41,55,.8)}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.bg-green-500\/10{background-color:rgba(34,197,94,.1)}.bg-green-700{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity,1))}.bg-green-800{--tw-bg-opacity:1;background-color:rgb(22 101 52/var(--tw-bg-opacity,1))}.bg-green-900{--tw-bg-opacity:1;background-color:rgb(20 83 45/var(--tw-bg-opacity,1))}.bg-green-950{--tw-bg-opacity:1;background-color:rgb(5 46 22/var(--tw-bg-opacity,1))}.bg-info{background-color:var(--color-info)}.bg-neutral-700{background-color:var(--color-neutral-700)}.bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity,1))}.bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity,1))}.bg-neutral-950{--tw-bg-opacity:1;background-color:rgb(10 10 10/var(--tw-bg-opacity,1))}.bg-orange-700{--tw-bg-opacity:1;background-color:rgb(194 65 12/var(--tw-bg-opacity,1))}.bg-orange-800{--tw-bg-opacity:1;background-color:rgb(154 52 18/var(--tw-bg-opacity,1))}.bg-orange-900{--tw-bg-opacity:1;background-color:rgb(124 45 18/var(--tw-bg-opacity,1))}.bg-orange-950{--tw-bg-opacity:1;background-color:rgb(67 20 7/var(--tw-bg-opacity,1))}.bg-panel{background-color:var(--color-panel)}.bg-purple-700{--tw-bg-opacity:1;background-color:rgb(126 34 206/var(--tw-bg-opacity,1))}.bg-purple-800{--tw-bg-opacity:1;background-color:rgb(107 33 168/var(--tw-bg-opacity,1))}.bg-purple-900{--tw-bg-opacity:1;background-color:rgb(88 28 135/var(--tw-bg-opacity,1))}.bg-purple-900\/40{background-color:rgba(88,28,135,.4)}.bg-purple-950{--tw-bg-opacity:1;background-color:rgb(59 7 100/var(--tw-bg-opacity,1))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-red-500\/10{background-color:rgba(239,68,68,.1)}.bg-red-700{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.bg-red-800{--tw-bg-opacity:1;background-color:rgb(153 27 27/var(--tw-bg-opacity,1))}.bg-red-900{--tw-bg-opacity:1;background-color:rgb(127 29 29/var(--tw-bg-opacity,1))}.bg-red-900\/30{background-color:rgba(127,29,29,.3)}.bg-red-900\/40{background-color:rgba(127,29,29,.4)}.bg-red-950{--tw-bg-opacity:1;background-color:rgb(69 10 10/var(--tw-bg-opacity,1))}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))}.bg-stone-700{--tw-bg-opacity:1;background-color:rgb(68 64 60/var(--tw-bg-opacity,1))}.bg-stone-800{--tw-bg-opacity:1;background-color:rgb(41 37 36/var(--tw-bg-opacity,1))}.bg-stone-900{--tw-bg-opacity:1;background-color:rgb(28 25 23/var(--tw-bg-opacity,1))}.bg-stone-950{--tw-bg-opacity:1;background-color:rgb(12 10 9/var(--tw-bg-opacity,1))}.bg-surface{background-color:var(--color-surface)}.bg-surface-alt{background-color:var(--color-surface-alt)}.bg-transparent{background-color:transparent}.bg-warning-surface{background-color:var(--color-warning-surface)}.bg-white{background-color:var(--color-white)}.bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity,1))}.bg-opacity-50{--tw-bg-opacity:0.5}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.from-cyan-900{--tw-gradient-from:#164e63 var(--tw-gradient-from-position);--tw-gradient-to:rgba(22,78,99,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-green-900{--tw-gradient-from:#14532d var(--tw-gradient-from-position);--tw-gradient-to:rgba(20,83,45,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-neutral-900{--tw-gradient-from:#171717 var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,9%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-orange-900{--tw-gradient-from:#7c2d12 var(--tw-gradient-from-position);--tw-gradient-to:rgba(124,45,18,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-900{--tw-gradient-from:#581c87 var(--tw-gradient-from-position);--tw-gradient-to:rgba(88,28,135,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-red-900{--tw-gradient-from:#7f1d1d var(--tw-gradient-from-position);--tw-gradient-to:rgba(127,29,29,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-stone-900{--tw-gradient-from:#1c1917 var(--tw-gradient-from-position);--tw-gradient-to:rgba(28,25,23,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-cyan-700{--tw-gradient-to:#0e7490 var(--tw-gradient-to-position)}.to-green-700{--tw-gradient-to:#15803d var(--tw-gradient-to-position)}.to-neutral-700{--tw-gradient-to:var(--color-neutral-700) var(--tw-gradient-to-position)}.to-orange-700{--tw-gradient-to:#c2410c var(--tw-gradient-to-position)}.to-purple-700{--tw-gradient-to:#7e22ce var(--tw-gradient-to-position)}.to-red-700{--tw-gradient-to:#b91c1c var(--tw-gradient-to-position)}.to-stone-700{--tw-gradient-to:#44403c var(--tw-gradient-to-position)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pr-1{padding-right:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:var(--font-family-mono)}.font-sans{font-family:var(--font-family-sans)}.text-2xl{font-size:var(--font-size-2xl);line-height:var(--line-height-relaxed)}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-\[0\.65rem\]{font-size:.65rem}.text-\[0\.75rem\]{font-size:.75rem}.text-\[0\.7rem\]{font-size:.7rem}.text-\[11px\]{font-size:11px}.text-base{font-size:var(--font-size-base)}.text-base,.text-lg{line-height:var(--line-height-base)}.text-lg{font-size:var(--font-size-lg)}.text-sm{font-size:var(--font-size-sm);line-height:var(--line-height-snug)}.text-xl{font-size:var(--font-size-xl);line-height:var(--line-height-relaxed)}.text-xs{font-size:var(--font-size-xs);line-height:var(--line-height-tight)}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.leading-3{line-height:.75rem}.leading-4{line-height:1rem}.leading-5{line-height:1.25rem}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-wide{letter-spacing:.025em}.text-amber-100{--tw-text-opacity:1;color:rgb(254 243 199/var(--tw-text-opacity,1))}.text-amber-200{--tw-text-opacity:1;color:rgb(253 230 138/var(--tw-text-opacity,1))}.text-amber-200\/90{color:hsla(48,97%,77%,.9)}.text-amber-300{--tw-text-opacity:1;color:rgb(252 211 77/var(--tw-text-opacity,1))}.text-blue-100{--tw-text-opacity:1;color:rgb(219 234 254/var(--tw-text-opacity,1))}.text-blue-200{--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity,1))}.text-blue-300{--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity,1))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-critical{color:var(--color-critical)}.text-cyan-600{--tw-text-opacity:1;color:rgb(8 145 178/var(--tw-text-opacity,1))}.text-emerald-200\/90{color:rgba(167,243,208,.9)}.text-gray-100{--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-green-100{--tw-text-opacity:1;color:rgb(220 252 231/var(--tw-text-opacity,1))}.text-green-200{--tw-text-opacity:1;color:rgb(187 247 208/var(--tw-text-opacity,1))}.text-green-300{--tw-text-opacity:1;color:rgb(134 239 172/var(--tw-text-opacity,1))}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-green-900{--tw-text-opacity:1;color:rgb(20 83 45/var(--tw-text-opacity,1))}.text-info{color:var(--color-info)}.text-muted{color:var(--color-muted)}.text-muted-strong{color:var(--color-muted-strong)}.text-neutral-600{color:var(--color-neutral-600)}.text-neutral-800{--tw-text-opacity:1;color:rgb(38 38 38/var(--tw-text-opacity,1))}.text-orange-600{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity,1))}.text-purple-200\/90{color:rgba(233,213,255,.9)}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity,1))}.text-red-100{--tw-text-opacity:1;color:rgb(254 226 226/var(--tw-text-opacity,1))}.text-red-200{--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity,1))}.text-red-200\/80{color:hsla(0,96%,89%,.8)}.text-red-200\/90{color:hsla(0,96%,89%,.9)}.text-red-300{--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-red-900{--tw-text-opacity:1;color:rgb(127 29 29/var(--tw-text-opacity,1))}.text-stone-600{--tw-text-opacity:1;color:rgb(87 83 78/var(--tw-text-opacity,1))}.text-text{color:var(--color-text)}.text-warning{color:var(--color-warning)}.text-warning-strong{color:var(--color-warning-strong)}.text-white{color:var(--color-white)}.text-yellow-300{--tw-text-opacity:1;color:rgb(253 224 71/var(--tw-text-opacity,1))}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.decoration-dotted{text-decoration-style:dotted}.decoration-2{text-decoration-thickness:2px}.underline-offset-2{text-underline-offset:2px}.underline-offset-4{text-underline-offset:4px}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\[0_0px_10px_0px_rgba\(0\2c 0\2c 0\2c 0\.3\)\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0px_10px_0px_rgba\(0\2c 0\2c 0\2c 0\.3\)\]{--tw-shadow:0 0px 10px 0px rgba(0,0,0,.3);--tw-shadow-colored:0 0px 10px 0px var(--tw-shadow-color)}.shadow-\[0_0px_30px_0px_rgba\(0\2c 0\2c 0\2c 0\.6\)\]{--tw-shadow:0 0px 30px 0px rgba(0,0,0,.6);--tw-shadow-colored:0 0px 30px 0px var(--tw-shadow-color)}.shadow-\[0_0px_30px_0px_rgba\(0\2c 0\2c 0\2c 0\.6\)\],.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg)}.shadow-md{--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md)}.shadow-md,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.outline-dashed{outline-style:dashed}.outline-1{outline-width:1px}.outline-offset-4{outline-offset:4px}.outline-cyan-500{outline-color:#06b6d4}.outline-green-500{outline-color:#22c55e}.outline-neutral-500{outline-color:#737373}.outline-orange-500{outline-color:#f97316}.outline-purple-500{outline-color:#a855f7}.outline-red-500{outline-color:#ef4444}.outline-stone-500{outline-color:#78716c}.ring{--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(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring,.ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-1{--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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-black{--tw-ring-color:var(--color-black)}.ring-opacity-5{--tw-ring-opacity:0.05}.blur{--tw-blur:blur(8px)}.blur,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%)}.\!filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-transform{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@media (max-width:40rem){.bv-grid-video{gap:var(--space-md);grid-template-columns:1fr}}@media (min-width:768px){.md\:hidden.profile-pane{display:none}}.hover\:border-border:hover{border-color:var(--color-border)}.hover\:border-critical:hover{border-color:var(--color-critical)}.hover\:bg-\[\#e6002c\]:hover{--tw-bg-opacity:1;background-color:rgb(230 0 44/var(--tw-bg-opacity,1))}.hover\:bg-blue-400:hover{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity,1))}.hover\:bg-blue-500:hover{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.hover\:bg-blue-800\/40:hover{background-color:rgba(30,64,175,.4)}.hover\:bg-critical:hover{background-color:var(--color-critical)}.hover\:bg-critical-strong:hover{background-color:var(--color-critical-strong)}.hover\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.hover\:bg-gray-700\/70:hover{background-color:rgba(55,65,81,.7)}.hover\:bg-gray-800:hover{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.hover\:bg-info-strong:hover{background-color:var(--color-info-strong)}.hover\:bg-neutral-800:hover{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity,1))}.hover\:bg-panel:hover{background-color:var(--color-panel)}.hover\:bg-panel-hover:hover{background-color:var(--color-panel-hover)}.hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.hover\:bg-red-900\/40:hover{background-color:rgba(127,29,29,.4)}.hover\:bg-transparent:hover{background-color:transparent}.hover\:text-blue-200:hover{--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity,1))}.hover\:text-blue-300:hover{--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity,1))}.hover\:text-blue-400:hover{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.hover\:text-critical-strong:hover{color:var(--color-critical-strong)}.hover\:text-gray-200:hover{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.hover\:text-info-strong:hover{color:var(--color-info-strong)}.hover\:text-text:hover{color:var(--color-text)}.hover\:text-white:hover{color:var(--color-white)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-90:hover{opacity:.9}.hover\:shadow-2xl:hover{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:border-blue-400:focus{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-1:focus{--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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-1:focus,.focus\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-2:focus{--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)}.focus\:ring-\[\#0f172a\]:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(15 23 42/var(--tw-ring-opacity,1))}.focus\:ring-black:focus{--tw-ring-color:var(--color-black)}.focus\:ring-blue-200:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(191 219 254/var(--tw-ring-opacity,1))}.focus\:ring-blue-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(147 197 253/var(--tw-ring-opacity,1))}.focus\:ring-blue-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(96 165 250/var(--tw-ring-opacity,1))}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.focus\:ring-critical-strong:focus{--tw-ring-color:var(--color-critical-strong)}.focus\:ring-green-500\/80:focus{--tw-ring-color:rgba(34,197,94,.8)}.focus\:ring-info:focus{--tw-ring-color:var(--color-info)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus\:ring-offset-gray-900:focus{--tw-ring-offset-color:#111827}.focus\:ring-offset-surface:focus{--tw-ring-offset-color:var(--color-surface)}.focus-visible\:ring-2: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)}.focus-visible\:ring-info:focus-visible{--tw-ring-color:var(--color-info)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.focus-visible\:ring-offset-surface:focus-visible{--tw-ring-offset-color:var(--color-surface)}.disabled\:cursor-default:disabled{cursor:default}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-blue-900:disabled{--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1))}.disabled\:bg-neutral-400:disabled{--tw-bg-opacity:1;background-color:rgb(163 163 163/var(--tw-bg-opacity,1))}.disabled\:text-neutral-200:disabled{--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity,1))}.disabled\:opacity-60:disabled{opacity:.6}.group:hover .group-hover\:underline{text-decoration-line:underline}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:w-96{width:24rem}.sm\:w-auto{width:auto}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:flex-wrap{flex-wrap:wrap}.sm\:items-start{align-items:flex-start}.sm\:items-end{align-items:flex-end}.sm\:items-center{align-items:center}.sm\:justify-end{justify-content:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:self-end{align-self:flex-end}.sm\:py-0{padding-top:0;padding-bottom:0}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:hidden{display:none}.md\:h-64{height:16rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:items-center{align-items:center}}@media (min-width:1024px){.lg\:sticky{position:sticky}.lg\:top-24{top:6rem}.lg\:max-w-4xl{max-width:56rem}.lg\:max-w-5xl{max-width:64rem}.lg\:max-w-6xl{max-width:72rem}.lg\:grid-cols-\[minmax\(0\2c 1\.4fr\)_minmax\(0\2c 1fr\)\]{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}.lg\:grid-cols-\[minmax\(240px\2c 280px\)_1fr\]{grid-template-columns:minmax(240px,280px) 1fr}.lg\:flex-row{flex-direction:row}.lg\:flex-col{flex-direction:column}.lg\:items-start{align-items:flex-start}.lg\:justify-between{justify-content:space-between}}
\ No newline at end of file
diff --git a/css/tailwind.source.css b/css/tailwind.source.css
index 6790cb2c..3e6dd533 100644
--- a/css/tailwind.source.css
+++ b/css/tailwind.source.css
@@ -270,6 +270,57 @@
     @apply absolute inset-0 z-[var(--z-modal-overlay)] bg-overlay bg-opacity-80 backdrop-blur;
   }
 
+  .bv-modal-backdrop[data-variant="veil"] {
+    @apply bg-overlay-veil bg-opacity-100;
+  }
+
+  .bv-modal-backdrop[data-variant="muted"] {
+    @apply bg-overlay-muted;
+  }
+
+  .modal-sheet {
+    @apply bv-modal__panel relative my-0 w-full max-w-[90%] overflow-hidden rounded-xl bg-surface lg:max-w-6xl;
+  }
+
+  .modal-header {
+    @apply sticky top-0 flex items-center justify-between border-b border border-border border-opacity-60 px-4 py-4;
+    background: linear-gradient(
+      to bottom,
+      var(--color-overlay-panel-gradient-start),
+      var(--color-overlay-panel-gradient-end, transparent)
+    );
+    backdrop-filter: blur(var(--modal-header-blur, 18px));
+  }
+
+  .modal-header[data-variant="flush"] {
+    @apply border-transparent;
+    background: linear-gradient(
+      to bottom,
+      var(--color-overlay-panel-tint),
+      transparent
+    );
+  }
+
+  .modal-header__title {
+    @apply text-xl font-bold text-text;
+  }
+
+  .modal-close {
+    @apply focus-ring flex h-10 w-10 items-center justify-center rounded-full bg-overlay-black bg-opacity-50 text-muted transition duration-base ease-out;
+  }
+
+  .modal-close:hover {
+    @apply bg-overlay-black bg-opacity-70 text-text;
+  }
+
+  .modal-body {
+    @apply space-y-4 p-6;
+  }
+
+  .modal-footer {
+    @apply border-t border border-border border-opacity-60 bg-surface px-6 py-4;
+  }
+
   .grid-stack {
     @apply grid gap-lg;
   }
diff --git a/css/tokens.css b/css/tokens.css
index ef25eeb3..78df5c9e 100644
--- a/css/tokens.css
+++ b/css/tokens.css
@@ -27,6 +27,9 @@
   --color-subtle: rgb(229 231 235);
   --color-critical: rgb(127 29 29);
   --color-critical-strong: rgb(153 27 27);
+  --color-warning: rgb(250 204 21);
+  --color-warning-strong: rgb(217 119 6);
+  --color-warning-surface: rgb(146 64 14 / 0.24);
   --color-neutral-700: rgb(63 63 70);
   --color-neutral-600: rgb(82 82 91);
   --color-white: rgb(255 255 255);
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index b7fce670..91d1d188 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -72,6 +72,11 @@ module.exports = {
           DEFAULT: "var(--color-critical)",
           strong: "var(--color-critical-strong)"
         },
+        warning: {
+          DEFAULT: "var(--color-warning)",
+          strong: "var(--color-warning-strong)",
+          surface: "var(--color-warning-surface)"
+        },
         neutral: {
           600: "var(--color-neutral-600)",
           700: "var(--color-neutral-700)"