From d3da77a869479c04139a9b63e4c815f72dfa155d Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Fri, 10 Oct 2025 16:22:39 -0400
Subject: [PATCH] refactor: apply shared form control classes

---
 components/edit-video-modal.html |  66 ++++++++---------
 components/profile-modal.html    |  14 ++--
 components/upload-modal.html     | 118 +++++++++++++++----------------
 3 files changed, 99 insertions(+), 99 deletions(-)

diff --git a/components/edit-video-modal.html b/components/edit-video-modal.html
index c8c69afd..7077dd54 100644
--- a/components/edit-video-modal.html
+++ b/components/edit-video-modal.html
@@ -51,7 +51,7 @@
               <input
                 type="text"
                 id="editVideoTitle"
-                class="flex-1 rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                class="flex-1 input"
                 placeholder="Video title"
               />
               <button
@@ -122,7 +122,7 @@
                   type="datetime-local"
                   id="editNip71PublishedAt"
                   data-nip71-input="published_at"
-                  class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                  class="mt-1 input"
                 />
                 <p class="mt-1 text-xs text-gray-400">
                   Set the canonical publish time for cross-client ordering.
@@ -137,7 +137,7 @@
                   id="editNip71AltText"
                   data-nip71-input="alt"
                   placeholder="Describe the visuals for screen readers"
-                  class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                  class="mt-1 input"
                 />
                 <p class="mt-1 text-xs text-gray-400">
                   Plain-language fallback shown when the media cannot load.
@@ -153,7 +153,7 @@
                   min="0"
                   step="1"
                   data-nip71-input="duration"
-                  class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                  class="mt-1 input"
                 />
                 <p class="mt-1 text-xs text-gray-400">
                   Provide the runtime in whole seconds for timeline scrubbing.
@@ -168,7 +168,7 @@
                   id="editNip71ContentWarning"
                   data-nip71-input="content-warning"
                   placeholder="e.g., Flashing lights"
-                  class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                  class="mt-1 input"
                 />
                 <p class="mt-1 text-xs text-gray-400">
                   Leave blank if the video is safe for all audiences.
@@ -184,7 +184,7 @@
                 id="editNip71Summary"
                 rows="3"
                 data-nip71-input="summary"
-                class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                class="mt-1 textarea"
                 placeholder="Short synopsis used as the Nostr content field"
               ></textarea>
               <p class="mt-1 text-xs text-gray-400">
@@ -233,7 +233,7 @@
                         type="text"
                         data-nip71-field="m"
                         placeholder="video/mp4"
-                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                        class="mt-1 input"
                       />
                       <p class="mt-1 text-[11px] text-gray-500">RFC 2046 media type for this encoding.</p>
                     </div>
@@ -245,7 +245,7 @@
                         type="text"
                         data-nip71-field="dim"
                         placeholder="1920x1080"
-                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                        class="mt-1 input"
                       />
                       <p class="mt-1 text-[11px] text-gray-500">Formatted as widthxheight.</p>
                     </div>
@@ -257,7 +257,7 @@
                         type="url"
                         data-nip71-field="url"
                         placeholder="https://cdn.example.com/variant.m3u8"
-                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                        class="mt-1 input"
                       />
                       <p class="mt-1 text-[11px] text-gray-500">HTTPS variant URL shared across clients.</p>
                     </div>
@@ -269,7 +269,7 @@
                         type="text"
                         data-nip71-field="x"
                         placeholder="magnet:?xt=urn:btih:..."
-                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                        class="mt-1 input"
                       />
                       <p class="mt-1 text-[11px] text-gray-500">Optional magnet pointer if the variant is seeded via P2P.</p>
                     </div>
@@ -293,7 +293,7 @@
                           type="url"
                           placeholder="https://cdn.example.com/poster.jpg"
                           data-nip71-nested-field="image"
-                          class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                          class="flex-1 input"
                         />
                         <button
                           type="button"
@@ -325,7 +325,7 @@
                           type="url"
                           placeholder="https://cdn.backup.net/video.mp4"
                           data-nip71-nested-field="fallback"
-                          class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                          class="flex-1 input"
                         />
                         <button
                           type="button"
@@ -357,7 +357,7 @@
                           type="text"
                           placeholder="https://api.example.com"
                           data-nip71-nested-field="service"
-                          class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                          class="flex-1 input"
                         />
                         <button
                           type="button"
@@ -411,7 +411,7 @@
                         type="url"
                         data-nip71-field="url"
                         placeholder="https://cdn.example.com/subs.vtt"
-                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                        class="mt-1 input"
                       />
                     </div>
                     <div>
@@ -420,7 +420,7 @@
                         type="text"
                         data-nip71-field="type"
                         placeholder="text/vtt"
-                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                        class="mt-1 input"
                       />
                     </div>
                     <div>
@@ -429,7 +429,7 @@
                         type="text"
                         data-nip71-field="language"
                         placeholder="en"
-                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                        class="mt-1 input"
                       />
                     </div>
                   </div>
@@ -472,7 +472,7 @@
                         data-nip71-field="start"
                         min="0"
                         step="1"
-                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                        class="mt-1 input"
                       />
                     </div>
                     <div>
@@ -482,7 +482,7 @@
                         data-nip71-field="end"
                         min="0"
                         step="1"
-                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                        class="mt-1 input"
                       />
                     </div>
                     <div>
@@ -491,7 +491,7 @@
                         type="text"
                         data-nip71-field="title"
                         placeholder="Chapter title"
-                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                        class="mt-1 input"
                       />
                     </div>
                     <div>
@@ -500,7 +500,7 @@
                         type="url"
                         data-nip71-field="thumbnail"
                         placeholder="https://cdn.example.com/frame.jpg"
-                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                        class="mt-1 input"
                       />
                     </div>
                   </div>
@@ -538,7 +538,7 @@
                     type="text"
                     data-nip71-field="value"
                     placeholder="#nostr"
-                    class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                    class="flex-1 input"
                   />
                   <button
                     type="button"
@@ -572,7 +572,7 @@
                         type="text"
                         data-nip71-field="pubkey"
                         placeholder="npub1... or hex"
-                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                        class="mt-1 input"
                       />
                     </div>
                     <div>
@@ -581,7 +581,7 @@
                         type="text"
                         data-nip71-field="relay"
                         placeholder="wss://relay.example.com"
-                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                        class="mt-1 input"
                       />
                     </div>
                   </div>
@@ -616,7 +616,7 @@
                     type="url"
                     data-nip71-field="url"
                     placeholder="https://example.com/context"
-                    class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                    class="flex-1 input"
                   />
                   <button
                     type="button"
@@ -638,7 +638,7 @@
               <input
                 type="url"
                 id="editVideoUrl"
-                class="flex-1 rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                class="flex-1 input"
                 placeholder="https://cdn.example.com/video.mp4"
               />
               <button
@@ -659,7 +659,7 @@
               <input
                 type="url"
                 id="editVideoWs"
-                class="flex-1 rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                class="flex-1 input"
                 placeholder="https://cdn.example.com/video.mp4"
               />
               <button
@@ -680,7 +680,7 @@
               <input
                 type="url"
                 id="editVideoXs"
-                class="flex-1 rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                class="flex-1 input"
                 placeholder="https://cdn.example.com/video.torrent"
               />
               <button
@@ -701,7 +701,7 @@
               <input
                 type="text"
                 id="editVideoMagnet"
-                class="flex-1 rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                class="flex-1 input"
                 placeholder="magnet:?xt=urn:btih:..."
               />
               <button
@@ -722,7 +722,7 @@
               <input
                 type="url"
                 id="editVideoThumbnail"
-                class="flex-1 rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                class="flex-1 input"
                 placeholder="https://cdn.example.com/preview.jpg"
               />
               <button
@@ -743,7 +743,7 @@
               <textarea
                 id="editVideoDescription"
                 rows="4"
-                class="w-full rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                class="textarea"
                 placeholder="What is this video about?"
               ></textarea>
               <button
@@ -820,7 +820,7 @@
                 <input
                   type="checkbox"
                   id="editVideoIsNsfw"
-                  class="h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                  class="checkbox"
                   data-default-checked="false"
                 />
                 <span class="text-sm text-gray-300">
@@ -848,7 +848,7 @@
                 <input
                   type="checkbox"
                   id="editVideoIsForKids"
-                  class="h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                  class="checkbox"
                   data-default-checked="false"
                 />
                 <span class="text-sm text-gray-300">
@@ -876,7 +876,7 @@
                 <input
                   type="checkbox"
                   id="editEnableComments"
-                  class="h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                  class="checkbox"
                   data-default-checked="true"
                   checked
                 />
diff --git a/components/profile-modal.html b/components/profile-modal.html
index 009f0c3e..817228bd 100644
--- a/components/profile-modal.html
+++ b/components/profile-modal.html
@@ -225,7 +225,7 @@
                       id="relayInput"
                       type="url"
                       placeholder="wss://relay.example.com"
-                      class="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      class="input"
                     />
                   </label>
                   <div class="flex gap-2">
@@ -266,7 +266,7 @@
                       id="profileWalletUri"
                       type="url"
                       placeholder="nostr+walletconnect://<public-key>?relay=wss://relay.example.com"
-                      class="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      class="input"
                     />
                   </label>
                   <label class="block text-sm text-gray-300" for="profileWalletDefaultZap">
@@ -278,7 +278,7 @@
                       min="0"
                       step="1"
                       placeholder="500"
-                      class="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      class="input"
                     />
                   </label>
                 </div>
@@ -333,7 +333,7 @@
                     type="text"
                     inputmode="text"
                     autocomplete="off"
-                    class="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    class="input"
                     placeholder="npub1..."
                   />
                 </label>
@@ -511,7 +511,7 @@
                       type="text"
                       inputmode="text"
                       autocomplete="off"
-                      class="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      class="input"
                       placeholder="npub1..."
                     />
                   </label>
@@ -547,7 +547,7 @@
                       type="text"
                       inputmode="text"
                       autocomplete="off"
-                      class="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      class="input"
                       placeholder="npub1..."
                     />
                   </label>
@@ -583,7 +583,7 @@
                       type="text"
                       inputmode="text"
                       autocomplete="off"
-                      class="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      class="input"
                       placeholder="npub1..."
                     />
                   </label>
diff --git a/components/upload-modal.html b/components/upload-modal.html
index 2f52a5f3..9fb813a6 100644
--- a/components/upload-modal.html
+++ b/components/upload-modal.html
@@ -91,7 +91,7 @@
                 type="text"
                 id="uploadTitle"
                 required
-                class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                class="mt-1 input"
               />
             </div>
 
@@ -136,7 +136,7 @@
                     type="datetime-local"
                     id="nip71PublishedAt"
                     data-nip71-input="published_at"
-                    class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                    class="mt-1 input"
                   />
                   <p class="mt-1 text-xs text-gray-400">Set the canonical publish time for cross-client ordering.</p>
                 </div>
@@ -147,7 +147,7 @@
                     id="nip71AltText"
                     data-nip71-input="alt"
                     placeholder="Describe the visuals for screen readers"
-                    class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                    class="mt-1 input"
                   />
                   <p class="mt-1 text-xs text-gray-400">Plain-language fallback shown when the media cannot load.</p>
                 </div>
@@ -159,7 +159,7 @@
                     min="0"
                     step="1"
                     data-nip71-input="duration"
-                    class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                    class="mt-1 input"
                   />
                   <p class="mt-1 text-xs text-gray-400">Provide the runtime in whole seconds for timeline scrubbing.</p>
                 </div>
@@ -170,7 +170,7 @@
                     id="nip71ContentWarning"
                     data-nip71-input="content-warning"
                     placeholder="e.g., Flashing lights"
-                    class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                    class="mt-1 input"
                   />
                   <p class="mt-1 text-xs text-gray-400">Leave blank if the video is safe for all audiences.</p>
                 </div>
@@ -182,7 +182,7 @@
                   id="nip71Summary"
                   rows="3"
                   data-nip71-input="summary"
-                  class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                  class="mt-1 textarea"
                   placeholder="Short synopsis used as the Nostr content field"
                 ></textarea>
                 <p class="mt-1 text-xs text-gray-400">This becomes the event content. Keep it concise for Nostr readers.</p>
@@ -199,7 +199,7 @@
               <input
                 id="uploadUrl"
                 type="url"
-                class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                class="mt-1 input"
                 placeholder="https://cdn.example.com/video.mp4"
               />
               <small class="mt-1 block text-xs text-gray-400"
@@ -234,7 +234,7 @@
                 type="text"
                 id="uploadMagnet"
                 placeholder="magnet:?xt=urn:btih:..."
-                class="mt-1 block w-full rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                class="mt-1 input"
               />
               <p class="mt-1 text-xs text-gray-400">
                 Provide a hosted URL for instant playback. Add a magnet for P2P
@@ -250,7 +250,7 @@
               <input
                 type="url"
                 id="uploadThumbnail"
-                class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                class="mt-1 input"
               />
             </div>
 
@@ -263,7 +263,7 @@
               <textarea
                 id="uploadDescription"
                 rows="3"
-                class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                class="mt-1 textarea"
               ></textarea>
               <p class="mt-1 text-xs text-gray-400">Kept for older clients that rely on the legacy description tag.</p>
             </div>
@@ -308,7 +308,7 @@
                           type="text"
                           data-nip71-field="m"
                           placeholder="video/mp4"
-                          class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                          class="mt-1 input"
                         />
                         <p class="mt-1 text-[11px] text-gray-500">RFC 2046 media type for this encoding.</p>
                       </div>
@@ -320,7 +320,7 @@
                           type="text"
                           data-nip71-field="dim"
                           placeholder="1920x1080"
-                          class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                          class="mt-1 input"
                         />
                         <p class="mt-1 text-[11px] text-gray-500">Formatted as widthxheight.</p>
                       </div>
@@ -332,7 +332,7 @@
                           type="url"
                           data-nip71-field="url"
                           placeholder="https://cdn.example.com/variant.m3u8"
-                          class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                          class="mt-1 input"
                         />
                         <p class="mt-1 text-[11px] text-gray-500">HTTPS variant URL shared across clients.</p>
                       </div>
@@ -344,7 +344,7 @@
                           type="text"
                           data-nip71-field="x"
                           placeholder="magnet:?xt=urn:btih:..."
-                          class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                          class="mt-1 input"
                         />
                         <p class="mt-1 text-[11px] text-gray-500">Optional magnet pointer if the variant is seeded via P2P.</p>
                       </div>
@@ -368,7 +368,7 @@
                             type="url"
                             placeholder="https://cdn.example.com/poster.jpg"
                             data-nip71-nested-field="image"
-                            class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                            class="flex-1 input"
                           />
                           <button
                             type="button"
@@ -400,7 +400,7 @@
                             type="url"
                             placeholder="https://cdn.backup.net/video.mp4"
                             data-nip71-nested-field="fallback"
-                            class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                            class="flex-1 input"
                           />
                           <button
                             type="button"
@@ -432,7 +432,7 @@
                             type="text"
                             placeholder="streaming-provider-id"
                             data-nip71-nested-field="service"
-                            class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                            class="flex-1 input"
                           />
                           <button
                             type="button"
@@ -482,7 +482,7 @@
                           type="url"
                           data-nip71-field="url"
                           placeholder="https://cdn.example.com/captions.en.vtt"
-                          class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                          class="mt-1 input"
                         />
                         <p class="mt-1 text-[11px] text-gray-500">Direct link to the caption file.</p>
                       </div>
@@ -492,7 +492,7 @@
                           type="text"
                           data-nip71-field="type"
                           placeholder="subtitles"
-                          class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                          class="mt-1 input"
                         />
                         <p class="mt-1 text-[11px] text-gray-500">Use values like captions, subtitles, or descriptions.</p>
                       </div>
@@ -502,7 +502,7 @@
                           type="text"
                           data-nip71-field="language"
                           placeholder="en-US"
-                          class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                          class="mt-1 input"
                         />
                         <p class="mt-1 text-[11px] text-gray-500">BCP-47 locale code.</p>
                       </div>
@@ -543,7 +543,7 @@
                           type="text"
                           data-nip71-field="start"
                           placeholder="00:00:00"
-                          class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                          class="mt-1 input"
                         />
                         <p class="mt-1 text-[11px] text-gray-500">HH:MM:SS</p>
                       </div>
@@ -553,7 +553,7 @@
                           type="text"
                           data-nip71-field="end"
                           placeholder="00:03:30"
-                          class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                          class="mt-1 input"
                         />
                         <p class="mt-1 text-[11px] text-gray-500">Leave blank for open-ended segments.</p>
                       </div>
@@ -563,7 +563,7 @@
                           type="text"
                           data-nip71-field="title"
                           placeholder="Introduction"
-                          class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                          class="mt-1 input"
                         />
                       </div>
                       <div class="md:col-span-2">
@@ -572,7 +572,7 @@
                           type="url"
                           data-nip71-field="thumbnail"
                           placeholder="https://cdn.example.com/segment.jpg"
-                          class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                          class="mt-1 input"
                         />
                         <p class="mt-1 text-[11px] text-gray-500">Optional still image for this moment.</p>
                       </div>
@@ -609,7 +609,7 @@
                       type="text"
                       data-nip71-field="value"
                       placeholder="#nostr"
-                      class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                      class="flex-1 input"
                     />
                     <button
                       type="button"
@@ -645,7 +645,7 @@
                           type="text"
                           data-nip71-field="pubkey"
                           placeholder="npub1..."
-                          class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                          class="mt-1 input"
                         />
                         <p class="mt-1 text-[11px] text-gray-500">Accepts npub or hex.</p>
                       </div>
@@ -655,7 +655,7 @@
                           type="url"
                           data-nip71-field="relay"
                           placeholder="wss://relay.example.com"
-                          class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                          class="mt-1 input"
                         />
                         <p class="mt-1 text-[11px] text-gray-500">Relay hint for discovering the participant.</p>
                       </div>
@@ -690,7 +690,7 @@
                       type="url"
                       data-nip71-field="url"
                       placeholder="https://example.com/article"
-                      class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                      class="flex-1 input"
                     />
                     <button
                       type="button"
@@ -709,7 +709,7 @@
               <input
                 type="checkbox"
                 id="uploadEnableComments"
-                class="mt-1 h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                class="mt-1 checkbox"
                 checked
                 data-default-checked="true"
               />
@@ -727,7 +727,7 @@
                 <input
                   type="checkbox"
                   id="uploadIsNsfw"
-                  class="mt-1 h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                  class="mt-1 checkbox"
                   data-default-checked="false"
                 />
                 <div>
@@ -743,7 +743,7 @@
                 <input
                   type="checkbox"
                   id="uploadIsForKids"
-                  class="mt-1 h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                  class="mt-1 checkbox"
                   data-default-checked="false"
                 />
                 <div>
@@ -805,7 +805,7 @@
                       id="r2AccountId"
                       type="text"
                       autocomplete="off"
-                      class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      class="mt-1 input"
                       placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
                       required
                     />
@@ -818,7 +818,7 @@
                       id="r2AccessKeyId"
                       type="text"
                       autocomplete="off"
-                      class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      class="mt-1 input"
                       placeholder="AKIA..."
                       required
                     />
@@ -832,7 +832,7 @@
                     id="r2SecretAccessKey"
                     type="password"
                     autocomplete="off"
-                    class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    class="mt-1 input"
                     required
                   />
                 </div>
@@ -869,7 +869,7 @@
                         id="r2ApiToken"
                         type="password"
                         autocomplete="off"
-                        class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        class="mt-1 input"
                         placeholder="Token with Workers R2 Storage Write"
                       />
                       <p class="mt-1 text-xs text-gray-500">
@@ -885,7 +885,7 @@
                           id="r2ZoneId"
                           type="text"
                           autocomplete="off"
-                          class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                          class="mt-1 input"
                           placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
                         />
                         <p class="mt-1 text-xs text-gray-500">
@@ -900,7 +900,7 @@
                           id="r2BaseDomain"
                           type="text"
                           autocomplete="off"
-                          class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                          class="mt-1 input"
                           placeholder="cdn.example.com"
                         />
                         <p class="mt-1 text-xs text-gray-500">
@@ -953,7 +953,7 @@
                     id="cloudflareTitle"
                     type="text"
                     required
-                    class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    class="mt-1 input"
                   />
                 </div>
                 <div
@@ -1013,7 +1013,7 @@
                         type="datetime-local"
                         id="cloudflareNip71PublishedAt"
                         data-nip71-input="published_at"
-                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                        class="mt-1 input"
                       />
                       <p class="mt-1 text-xs text-gray-400">Set the canonical publish time for cross-client ordering.</p>
                     </div>
@@ -1024,7 +1024,7 @@
                         id="cloudflareNip71AltText"
                         data-nip71-input="alt"
                         placeholder="Describe the visuals for screen readers"
-                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                        class="mt-1 input"
                       />
                       <p class="mt-1 text-xs text-gray-400">Plain-language fallback shown when the media cannot load.</p>
                     </div>
@@ -1038,7 +1038,7 @@
                         min="0"
                         step="1"
                         data-nip71-input="duration"
-                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                        class="mt-1 input"
                       />
                       <p class="mt-1 text-xs text-gray-400">Provide the runtime in whole seconds for timeline scrubbing.</p>
                     </div>
@@ -1051,7 +1051,7 @@
                         id="cloudflareNip71ContentWarning"
                         data-nip71-input="content-warning"
                         placeholder="e.g., Flashing lights"
-                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                        class="mt-1 input"
                       />
                       <p class="mt-1 text-xs text-gray-400">Leave blank if the video is safe for all audiences.</p>
                     </div>
@@ -1063,7 +1063,7 @@
                       id="cloudflareNip71Summary"
                       rows="3"
                       data-nip71-input="summary"
-                      class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                      class="mt-1 textarea"
                       placeholder="Short synopsis used as the Nostr content field"
                     ></textarea>
                     <p class="mt-1 text-xs text-gray-400">This becomes the event content. Keep it concise for Nostr readers.</p>
@@ -1076,7 +1076,7 @@
                   <textarea
                     id="cloudflareDescription"
                     rows="3"
-                    class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    class="mt-1 input"
                   ></textarea>
                 </div>
                 <div class="grid gap-3 md:grid-cols-2">
@@ -1087,7 +1087,7 @@
                     <input
                       id="cloudflareThumbnail"
                       type="url"
-                      class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      class="mt-1 input"
                     />
                   </div>
                   <div>
@@ -1098,7 +1098,7 @@
                       id="cloudflareMagnet"
                       type="text"
                       placeholder="magnet:?xt=urn:btih:..."
-                      class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      class="mt-1 input"
                     />
                   </div>
                 </div>
@@ -1107,13 +1107,13 @@
                     id="cloudflareWs"
                     type="url"
                     placeholder="Web seed (ws=)"
-                    class="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    class="input"
                   />
                   <input
                     id="cloudflareXs"
                     type="url"
                     placeholder=".torrent URL (xs=)"
-                    class="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    class="input"
                   />
                 </div>
                 <fieldset
@@ -1163,7 +1163,7 @@
                               type="text"
                               data-nip71-field="m"
                               placeholder="Auto-filled after upload (e.g., video/mp4)"
-                              class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                              class="mt-1 input"
                             />
                             <p class="mt-1 text-[11px] text-gray-500">RFC 2046 media type for this encoding.</p>
                           </div>
@@ -1175,7 +1175,7 @@
                               type="text"
                               data-nip71-field="dim"
                               placeholder="Auto-filled if detected (e.g., 1920x1080)"
-                              class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                              class="mt-1 input"
                             />
                             <p class="mt-1 text-[11px] text-gray-500">Formatted as widthxheight.</p>
                           </div>
@@ -1187,7 +1187,7 @@
                               type="url"
                               data-nip71-field="url"
                               placeholder="Auto-filled after upload with the public HTTPS URL"
-                              class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                              class="mt-1 input"
                             />
                             <p class="mt-1 text-[11px] text-gray-500">HTTPS variant URL shared across clients.</p>
                           </div>
@@ -1199,7 +1199,7 @@
                               type="text"
                               data-nip71-field="x"
                               placeholder="Optional magnet pointer if seeding via P2P"
-                              class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                              class="mt-1 input"
                             />
                             <p class="mt-1 text-[11px] text-gray-500">Optional magnet pointer if the variant is seeded via P2P.</p>
                           </div>
@@ -1223,7 +1223,7 @@
                                 type="url"
                                 placeholder="https://cdn.example.com/poster.jpg"
                                 data-nip71-nested-field="image"
-                                class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                                class="flex-1 input"
                               />
                               <button
                                 type="button"
@@ -1255,7 +1255,7 @@
                                 type="url"
                                 placeholder="https://cdn.backup.net/video.mp4"
                                 data-nip71-nested-field="fallback"
-                                class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                                class="flex-1 input"
                               />
                               <button
                                 type="button"
@@ -1287,7 +1287,7 @@
                                 type="text"
                                 placeholder="streaming-provider-id"
                                 data-nip71-nested-field="service"
-                                class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                                class="flex-1 input"
                               />
                               <button
                                 type="button"
@@ -1418,7 +1418,7 @@
                   <input
                     type="checkbox"
                     id="cloudflareEnableComments"
-                    class="mt-1 h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                    class="mt-1 checkbox"
                     checked
                     data-default-checked="true"
                   />
@@ -1436,7 +1436,7 @@
                     <input
                       type="checkbox"
                       id="cloudflareIsNsfw"
-                      class="mt-1 h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                      class="mt-1 checkbox"
                       data-default-checked="false"
                     />
                     <div>
@@ -1452,7 +1452,7 @@
                     <input
                       type="checkbox"
                       id="cloudflareIsForKids"
-                      class="mt-1 h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                      class="mt-1 checkbox"
                       data-default-checked="false"
                     />
                     <div>
@@ -1473,7 +1473,7 @@
                     id="cloudflareFile"
                     type="file"
                     accept="video/*,.m3u8,.ts,.mp4,.webm,.mov,.mkv,.mpg,.mpeg"
-                    class="mt-1 w-full rounded-md border border-dashed border-gray-600 bg-gray-900 px-3 py-4 text-sm text-gray-300 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    class="mt-1 input border-dashed bg-gray-900 px-3 py-4 text-gray-300"
                     required
                   />
                   <p class="mt-1 text-xs text-gray-500">