From d87c1be373074d9c580671604ce17179a8179124 Mon Sep 17 00:00:00 2001
From: Luis Pereira <luispereira.tkd@gmail.com>
Date: Sun, 5 Oct 2025 18:11:05 +0100
Subject: [PATCH] fix: lass rules moved up one level

Some rules were one level deeper and being created inside the btn rule
---
 static/asteroid.css  | 130 ++++++++--------
 static/asteroid.lass | 347 ++++++++++++++++++++++---------------------
 template/login.chtml |   4 +-
 3 files changed, 241 insertions(+), 240 deletions(-)

diff --git a/static/asteroid.css b/static/asteroid.css
index 19f6e4e..338af75 100644
--- a/static/asteroid.css
+++ b/static/asteroid.css
@@ -312,14 +312,14 @@ body .btn .btn.active{
     color: #000;
 }
 
-body .btn .playlist-controls{
+body .playlist-controls{
     margin-bottom: 15px;
     display: flex;
     gap: 10px;
     align-items: center;
 }
 
-body .btn .playlist-input{
+body .playlist-input{
     flex: 1;
     padding: 8px 12px;
     background: #0a0a0a;
@@ -328,20 +328,20 @@ body .btn .playlist-input{
     font-family: Courier New, monospace;
 }
 
-body .btn .playlist-list{
+body .playlist-list{
     border: 1px solid #2a3441;
     background: #0a0a0a;
     min-height: 100px;
     padding: 10px;
 }
 
-body .btn .queue-controls{
+body .queue-controls{
     margin-bottom: 15px;
     display: flex;
     gap: 10px;
 }
 
-body .btn .play-queue{
+body .play-queue{
     border: 1px solid #2a3441;
     background: #0a0a0a;
     min-height: 150px;
@@ -350,7 +350,7 @@ body .btn .play-queue{
     padding: 10px;
 }
 
-body .btn .queue-item{
+body .queue-item{
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -359,46 +359,46 @@ body .btn .queue-item{
     margin-bottom: 5px;
 }
 
-body .btn .queue-item :last-child{
+body .queue-item :last-child{
     border-bottom: none;
     margin-bottom: 0;
 }
 
-body .btn .empty-queue{
+body .empty-queue{
     text-align: center;
     color: #666;
     padding: 20px;
     font-style: italic;
 }
 
-body .btn .no-tracks{
+body .no-tracks{
     text-align: center;
     color: #666;
     padding: 20px;
     font-style: italic;
 }
 
-body .btn .no-playlists{
+body .no-playlists{
     text-align: center;
     color: #666;
     padding: 20px;
     font-style: italic;
 }
 
-body .btn .loading{
+body .loading{
     text-align: center;
     color: #4488ff;
     padding: 20px;
 }
 
-body .btn .error{
+body .error{
     text-align: center;
     color: #ff0000;
     padding: 20px;
     font-weight: bold;
 }
 
-body .btn .upload-section{
+body .upload-section{
     margin: 20px 0;
     padding: 20px;
     background: #0a0a0a;
@@ -406,19 +406,19 @@ body .btn .upload-section{
     border-radius: 5px;
 }
 
-body .btn .upload-controls{
+body .upload-controls{
     display: flex;
     gap: 15px;
     align-items: center;
     margin-bottom: 15px;
 }
 
-body .btn .upload-info{
+body .upload-info{
     color: #888;
     font-size: 0.9em;
 }
 
-body .btn .upload-progress{
+body .upload-progress{
     margin-top: 10px;
     padding: 10px;
     background: #1a2332;
@@ -426,7 +426,7 @@ body .btn .upload-progress{
     border-radius: 3px;
 }
 
-body .btn .progress-bar{
+body .progress-bar{
     height: 20px;
     background: #4488ff;
     border-radius: 3px;
@@ -438,14 +438,14 @@ body .btn .progress-bar{
     width: 0%;
 }
 
-body .btn .progress-text{
+body .progress-text{
     display: block;
     margin-top: 5px;
     color: #00ffff;
     font-size: 0.9em;
 }
 
-body .btn input{
+body input{
     padding: 8px 12px;
     background: #1a2332;
     color: #00ffff;
@@ -454,7 +454,7 @@ body .btn input{
     font-family: Courier New, monospace;
 }
 
-body .btn .upload-interface{
+body .upload-interface{
     margin-top: 2rem;
     padding: 1.5rem;
     background-color: #1a2332;
@@ -462,12 +462,12 @@ body .btn .upload-interface{
     border: 1px solid #2a3441;
 }
 
-body .btn .upload-interface h3{
+body .upload-interface h3{
     color: #00ffff;
     margin-bottom: 1rem;
 }
 
-body .btn .upload-interface .upload-area{
+body .upload-interface .upload-area{
     border: 2px dashed #2a3441;
     border-radius: 8px;
     padding: 2rem;
@@ -480,26 +480,26 @@ body .btn .upload-interface .upload-area{
     transition: border-color 0.3s ease;
 }
 
-body .btn .upload-interface .upload-area &:hover{
+body .upload-interface .upload-area &:hover{
     border-color: #00ffff;
 }
 
-body .btn .upload-interface .upload-area .upload-icon{
+body .upload-interface .upload-area .upload-icon{
     font-size: 3rem;
     color: #666;
     margin-bottom: 1rem;
 }
 
-body .btn .upload-interface .upload-area p{
+body .upload-interface .upload-area p{
     color: #999;
     margin-bottom: 1rem;
 }
 
-body .btn .upload-interface .upload-area .btn{
+body .upload-interface .upload-area .btn{
     margin-top: 1rem;
 }
 
-body .btn .auth-container{
+body .auth-container{
     display: flex;
     justify-content: center;
     align-items: center;
@@ -507,7 +507,7 @@ body .btn .auth-container{
     padding: 2rem;
 }
 
-body .btn .auth-form{
+body .auth-form{
     background-color: #1a2332;
     border: 1px solid #2a3441;
     border-radius: 8px;
@@ -521,31 +521,31 @@ body .btn .auth-form{
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
 }
 
-body .btn .auth-form h2{
+body .auth-form h2{
     color: #00ffff;
     text-align: center;
     margin-bottom: 1.5rem;
     font-size: 1.5rem;
 }
 
-body .btn .auth-form h3{
+body .auth-form h3{
     color: #00ffff;
     margin-bottom: 1rem;
     font-size: 1.2rem;
 }
 
-body .btn .form-group{
-    margin-bottom: 1rem;
+body .form-group{
+    margin-bottom: 3rem;
 }
 
-body .btn .form-group label{
+body .form-group label{
     display: block;
     color: #ccc;
     margin-bottom: 0.5rem;
     font-weight: bold;
 }
 
-body .btn .form-group input{
+body .form-group input{
     width: 100%;
     padding: 0.75rem;
     background-color: #0f0f0f;
@@ -556,7 +556,7 @@ body .btn .form-group input{
     box-sizing: border-box;
 }
 
-body .btn .form-group input &:focus{
+body .form-group input &:focus{
     border-color: #00ffff;
     outline: none;
     -moz-box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2);
@@ -566,13 +566,13 @@ body .btn .form-group input &:focus{
     box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2);
 }
 
-body .btn .form-actions{
+body .form-actions{
     display: flex;
     gap: 1rem;
     margin-top: 1.5rem;
 }
 
-body .btn .message{
+body .message{
     padding: 0.75rem;
     border-radius: 4px;
     margin-top: 1rem;
@@ -580,40 +580,40 @@ body .btn .message{
     font-weight: bold;
 }
 
-body .btn .message &.success{
+body .message &.success{
     background-color: rgba(0, 255, 0, 0.1);
     border: 1px solid #00ffff;
     color: #00ffff;
 }
 
-body .btn .message &.error{
+body .message &.error{
     background-color: rgba(255, 0, 0, 0.1);
     border: 1px solid #ff0000;
     color: #ff0000;
 }
 
-body .btn .auth-link{
+body .auth-link{
     text-align: center;
     margin-top: 1.5rem;
     color: #999;
 }
 
-body .btn .auth-link a{
+body .auth-link a{
     color: #00ffff;
     text-decoration: none;
 }
 
-body .btn .auth-link a &:hover{
+body .auth-link a &:hover{
     text-decoration: underline;
 }
 
-body .btn .profile-container{
+body .profile-container{
     max-width: 600px;
     margin: 2rem auto;
     padding: 0 1rem;
 }
 
-body .btn .profile-card{
+body .profile-card{
     background-color: #1a2332;
     border: 1px solid #2a3441;
     border-radius: 8px;
@@ -621,17 +621,17 @@ body .btn .profile-card{
     margin-bottom: 2rem;
 }
 
-body .btn .profile-card h2{
+body .profile-card h2{
     color: #00ffff;
     margin-bottom: 1.5rem;
     text-align: center;
 }
 
-body .btn .profile-info{
+body .profile-info{
     margin-bottom: 2rem;
 }
 
-body .btn .info-group{
+body .info-group{
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -639,20 +639,20 @@ body .btn .info-group{
     border-bottom: 1px solid #2a3441;
 }
 
-body .btn .info-group &:last-child{
+body .info-group &:last-child{
     border-bottom: none;
 }
 
-body .btn .info-group label{
+body .info-group label{
     color: #ccc;
     font-weight: bold;
 }
 
-body .btn .info-group span{
+body .info-group span{
     color: #fff;
 }
 
-body .btn .role-badge{
+body .role-badge{
     background-color: #00ffff;
     color: #000;
     padding: 0.25rem 0.5rem;
@@ -661,17 +661,17 @@ body .btn .role-badge{
     font-weight: bold;
 }
 
-body .btn .profile-actions{
+body .profile-actions{
     display: flex;
     gap: 1rem;
     justify-content: center;
 }
 
-body .btn .user-management{
+body .user-management{
     margin-top: 2rem;
 }
 
-body .btn .users-table{
+body .users-table{
     width: 100%;
     border-collapse: collapse;
     background-color: #1a2332;
@@ -680,11 +680,11 @@ body .btn .users-table{
     overflow: hidden;
 }
 
-body .btn .users-table thead{
+body .users-table thead{
     background-color: #0f0f0f;
 }
 
-body .btn .users-table thead th{
+body .users-table thead th{
     padding: 1rem;
     text-align: left;
     color: #00ffff;
@@ -694,38 +694,38 @@ body .btn .users-table thead th{
 
 
 
-body .btn .users-table tbody tr{
+body .users-table tbody tr{
     border-bottom: 1px solid #2a3441;
 }
 
-body .btn .users-table tbody tr &:hover{
+body .users-table tbody tr &:hover{
     background-color: #222;
 }
 
-body .btn .users-table tbody tr td{
+body .users-table tbody tr td{
     padding: 1rem;
     color: #fff;
     vertical-align: middle;
 }
 
-body .btn .users-table tbody .user-actions{
+body .users-table tbody .user-actions{
     display: flex;
     gap: 0.5rem;
 }
 
-body .btn .users-table tbody .user-actions .btn{
+body .users-table tbody .user-actions .btn{
     padding: 0.25rem 0.5rem;
     font-size: 0.875rem;
 }
 
-body .btn .user-stats{
+body .user-stats{
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     gap: 1rem;
     margin-bottom: 2rem;
 }
 
-body .btn .stat-card{
+body .stat-card{
     background-color: #1a2332;
     border: 1px solid #2a3441;
     border-radius: 8px;
@@ -733,14 +733,14 @@ body .btn .stat-card{
     text-align: center;
 }
 
-body .btn .stat-card .stat-number{
+body .stat-card .stat-number{
     font-size: 2rem;
     font-weight: bold;
     color: #00ffff;
     display: block;
 }
 
-body .btn .stat-card .stat-label{
+body .stat-card .stat-label{
     color: #ccc;
     font-size: 0.875rem;
     margin-top: 0.5rem;
diff --git a/static/asteroid.lass b/static/asteroid.lass
index d6ea5c3..1142d5c 100644
--- a/static/asteroid.lass
+++ b/static/asteroid.lass
@@ -243,173 +243,173 @@
      (.btn.active
       :background "#4488ff"
       :border-color "#5599ff"
-      :color "#000")
+      :color "#000"))
 
     ;; Playlist and Queue styles
-     (.playlist-controls
-      :margin-bottom "15px"
-      :display flex
-      :gap "10px"
-      :align-items center)
+    (.playlist-controls
+    :margin-bottom "15px"
+    :display flex
+    :gap "10px"
+    :align-items center)
 
-     (.playlist-input
-      :flex 1
-      :padding "8px 12px"
-      :background "#0a0a0a"
-      :color "#00ffff"
-      :border "1px solid #2a3441"
-      :font-family "Courier New, monospace")
+    (.playlist-input
+    :flex 1
+    :padding "8px 12px"
+    :background "#0a0a0a"
+    :color "#00ffff"
+    :border "1px solid #2a3441"
+    :font-family "Courier New, monospace")
 
-     (.playlist-list
-      :border "1px solid #2a3441"
-      :background "#0a0a0a"
-      :min-height "100px"
-      :padding "10px")
+    (.playlist-list
+    :border "1px solid #2a3441"
+    :background "#0a0a0a"
+    :min-height "100px"
+    :padding "10px")
 
-     (.queue-controls
-      :margin-bottom "15px"
-      :display flex
-      :gap "10px")
+    (.queue-controls
+    :margin-bottom "15px"
+    :display flex
+    :gap "10px")
 
-     (.play-queue
-      :border "1px solid #2a3441"
-      :background "#0a0a0a"
-      :min-height "150px"
-      :max-height "300px"
-      :overflow-y auto
-      :padding "10px")
+    (.play-queue
+    :border "1px solid #2a3441"
+    :background "#0a0a0a"
+    :min-height "150px"
+    :max-height "300px"
+    :overflow-y auto
+    :padding "10px")
 
-     (.queue-item
-      :display flex
-      :justify-content space-between
-      :align-items center
-      :padding "8px 10px"
-      :border-bottom "1px solid #2a3441"
-      :margin-bottom "5px"
-      (:last-child
-       :border-bottom none
-       :margin-bottom 0))
+    (.queue-item
+    :display flex
+    :justify-content space-between
+    :align-items center
+    :padding "8px 10px"
+    :border-bottom "1px solid #2a3441"
+    :margin-bottom "5px"
+    (:last-child
+    :border-bottom none
+    :margin-bottom 0))
 
-     (.empty-queue
-      :text-align center
-      :color "#666"
-      :padding "20px"
-      :font-style italic)
+    (.empty-queue
+    :text-align center
+    :color "#666"
+    :padding "20px"
+    :font-style italic)
 
-     (.no-tracks
-      :text-align center
-      :color "#666"
-      :padding "20px"
-      :font-style italic)
+    (.no-tracks
+    :text-align center
+    :color "#666"
+    :padding "20px"
+    :font-style italic)
 
-     (.no-playlists
-      :text-align center
-      :color "#666"
-      :padding "20px"
-      :font-style italic)
+    (.no-playlists
+    :text-align center
+    :color "#666"
+    :padding "20px"
+    :font-style italic)
 
-     (.loading
-      :text-align center
-      :color "#4488ff"
-      :padding "20px")
+    (.loading
+    :text-align center
+    :color "#4488ff"
+    :padding "20px")
 
-     (.error
-      :text-align center
-      :color "#ff0000"
-      :padding "20px"
-      :font-weight bold)
+    (.error
+    :text-align center
+    :color "#ff0000"
+    :padding "20px"
+    :font-weight bold)
 
     ;; Upload interface styles
-     (.upload-section
-      :margin "20px 0"
-      :padding "20px"
-      :background "#0a0a0a"
-      :border "1px solid #2a3441"
-      :border-radius "5px")
+    (.upload-section
+    :margin "20px 0"
+    :padding "20px"
+    :background "#0a0a0a"
+    :border "1px solid #2a3441"
+    :border-radius "5px")
 
-     (.upload-controls
-      :display flex
-      :gap "15px"
-      :align-items center
-      :margin-bottom "15px")
+    (.upload-controls
+    :display flex
+    :gap "15px"
+    :align-items center
+    :margin-bottom "15px")
 
-     (.upload-info
-      :color "#888"
-      :font-size "0.9em")
+    (.upload-info
+    :color "#888"
+    :font-size "0.9em")
 
-     (.upload-progress
-      :margin-top "10px"
-      :padding "10px"
-      :background "#1a2332"
-      :border "1px solid #2a3441"
-      :border-radius "3px")
+    (.upload-progress
+    :margin-top "10px"
+    :padding "10px"
+    :background "#1a2332"
+    :border "1px solid #2a3441"
+    :border-radius "3px")
 
-     (.progress-bar
-      :height "20px"
-      :background "#4488ff"
-      :border-radius "3px"
-      :transition "width 0.3s ease"
-      :width "0%")
+    (.progress-bar
+    :height "20px"
+    :background "#4488ff"
+    :border-radius "3px"
+    :transition "width 0.3s ease"
+    :width "0%")
 
-     (.progress-text
-      :display block
-      :margin-top "5px"
-      :color "#00ffff"
-      :font-size "0.9em")
+    (.progress-text
+    :display block
+    :margin-top "5px"
+    :color "#00ffff"
+    :font-size "0.9em")
 
-     (input
-      :padding "8px 12px"
-      :background "#1a2332"
-      :color "#00ffff"
-      :border "1px solid #2a3441"
-      :border-radius "3px"
-      :font-family "Courier New, monospace")
+    (input
+    :padding "8px 12px"
+    :background "#1a2332"
+    :color "#00ffff"
+    :border "1px solid #2a3441"
+    :border-radius "3px"
+    :font-family "Courier New, monospace")
 
-     (.upload-interface
-      :margin-top 2rem
-      :padding 1.5rem
-      :background-color "#1a2332"
-      :border-radius 8px
-      :border "1px solid #2a3441"
-    
-      (h3 :color "#00ffff"
-          :margin-bottom 1rem)
-    
-      (.upload-area
-          :border "2px dashed #2a3441"
-          :border-radius 8px
-          :padding 2rem
-          :text-align center
-          :background-color "#0f0f0f"
-          :transition "border-color 0.3s ease"
+    (.upload-interface
+    :margin-top 2rem
+    :padding 1.5rem
+    :background-color "#1a2332"
+    :border-radius 8px
+    :border "1px solid #2a3441"
+
+        (h3 :color "#00ffff"
+            :margin-bottom 1rem)
+
+        (.upload-area
+            :border "2px dashed #2a3441"
+            :border-radius 8px
+            :padding 2rem
+            :text-align center
+            :background-color "#0f0f0f"
+            :transition "border-color 0.3s ease"
         
-          ("&:hover" :border-color "#00ffff")
+            ("&:hover" :border-color "#00ffff")
         
-          (.upload-icon :font-size 3rem
-                      :color "#666"
-                      :margin-bottom 1rem)
+            (.upload-icon :font-size 3rem
+                        :color "#666"
+                        :margin-bottom 1rem)
         
-          (p :color "#999"
-           :margin-bottom 1rem)
+            (p :color "#999"
+            :margin-bottom 1rem)
         
-          (.btn :margin-top 1rem)))
+            (.btn :margin-top 1rem)))
 
     ;; Authentication Styles
-     (.auth-container
-      :display flex
-      :justify-content center
-      :align-items center
-      :min-height "60vh"
-      :padding 2rem)
+    (.auth-container
+    :display flex
+    :justify-content center
+    :align-items center
+    :min-height "60vh"
+    :padding 2rem)
 
-     (.auth-form
-      :background-color "#1a2332"
-      :border "1px solid #2a3441"
-      :border-radius 8px
-      :padding 2rem
-      :width "100%"
-      :max-width 400px
-      :box-shadow "0 4px 6px rgba(0, 0, 0, 0.3)"
+    (.auth-form
+    :background-color "#1a2332"
+    :border "1px solid #2a3441"
+    :border-radius 8px
+    :padding 2rem
+    :width "100%"
+    :max-width 400px
+    :box-shadow "0 4px 6px rgba(0, 0, 0, 0.3)"
     
       (h2 :color "#00ffff"
           :text-align center
@@ -420,8 +420,8 @@
           :margin-bottom 1rem
           :font-size 1.2rem))
 
-     (.form-group
-      :margin-bottom 1rem
+    (.form-group
+      :margin-bottom 3rem
     
       (label :display block
               :color "#ccc"
@@ -441,71 +441,71 @@
                           :outline none
                           :box-shadow "0 0 0 2px rgba(0, 255, 0, 0.2)")))
 
-     (.form-actions
+    (.form-actions
       :display flex
       :gap 1rem
       :margin-top 1.5rem)
 
-     (.message
+    (.message
       :padding 0.75rem
       :border-radius 4px
       :margin-top 1rem
       :text-align center
       :font-weight bold
-    
+
       ("&.success" :background-color "rgba(0, 255, 0, 0.1)"
                       :border "1px solid #00ffff"
                       :color "#00ffff")
-    
+
       ("&.error" :background-color "rgba(255, 0, 0, 0.1)"
                   :border "1px solid #ff0000"
                   :color "#ff0000"))
 
-     (.auth-link
+    (.auth-link
       :text-align center
       :margin-top 1.5rem
       :color "#999"
-    
+
       (a :color "#00ffff"
           :text-decoration none
-        
+
           ("&:hover" :text-decoration underline)))
 
     ;; Profile Styles
-     (.profile-container
+    (.profile-container
       :max-width 600px
       :margin "2rem auto"
       :padding 0 1rem)
 
-     (.profile-card
+    (.profile-card
       :background-color "#1a2332"
       :border "1px solid #2a3441"
       :border-radius 8px
       :padding 2rem
       :margin-bottom 2rem
-    
+
       (h2 :color "#00ffff"
           :margin-bottom 1.5rem
           :text-align center))
 
-     (.profile-info
+    (.profile-info
       :margin-bottom 2rem)
 
-     (.info-group
+    (.info-group
       :display flex
       :justify-content space-between
       :align-items center
       :padding 0.75rem 0
       :border-bottom "1px solid #2a3441"
-    
+
       ("&:last-child" :border-bottom none)
-    
+
       (label :color "#ccc"
               :font-weight bold)
-    
+
       (span :color "#fff"))
 
-     (.role-badge
+    (.role-badge
       :background-color "#00ffff"
       :color "#000"
       :padding "0.25rem 0.5rem"
@@ -513,72 +513,73 @@
       :font-size 0.875rem
       :font-weight bold)
 
-     (.profile-actions
+    (.profile-actions
       :display flex
       :gap 1rem
       :justify-content center)
 
     ;; User Management Styles
-     (.user-management
+    (.user-management
       :margin-top 2rem)
 
-     (.users-table
+    (.users-table
       :width "100%"
       :border-collapse collapse
       :background-color "#1a2332"
       :border "1px solid #2a3441"
       :border-radius 8px
       :overflow hidden
-    
+
       (thead
           :background-color "#0f0f0f"
-        
+
           (th :padding 1rem
               :text-align left
               :color "#00ffff"
               :font-weight bold
               :border-bottom "1px solid #2a3441"))
-    
+
       (tbody
           (tr :border-bottom "1px solid #2a3441"
-            
+
               ("&:hover" :background-color "#222")
-            
+
               (td :padding 1rem
                   :color "#fff"
                   :vertical-align middle))
-        
+
           (.user-actions
            :display flex
            :gap 0.5rem
-        
+
            (.btn :padding "0.25rem 0.5rem"
                :font-size 0.875rem))))
 
-     (.user-stats
+    (.user-stats
       :display grid
       :grid-template-columns "repeat(auto-fit, minmax(150px, 1fr))"
       :gap 1rem
       :margin-bottom 2rem)
 
-     (.stat-card
+    (.stat-card
       :background-color "#1a2332"
       :border "1px solid #2a3441"
       :border-radius 8px
       :padding 1rem
       :text-align center
-    
+
       (.stat-number :font-size 2rem
                       :font-weight bold
                       :color "#00ffff"
                       :display block)
-    
+
       (.stat-label :color "#ccc"
                       :font-size 0.875rem
-                      :margin-top 0.5rem)))))
+                      :margin-top 0.5rem))
 
     ;; Center alignment for player page
     ;; (body.player-page
     ;;  :text-align center)
 
-     ;; Close main body block
+    )) ;; Close main body block
+
diff --git a/template/login.chtml b/template/login.chtml
index ef45cd1..086246e 100644
--- a/template/login.chtml
+++ b/template/login.chtml
@@ -30,8 +30,8 @@
         </form>
         <div class="panel" style="margin-top: 20px; text-align: center;">
           <strong style="color: #ff6600;">Default Admin Credentials:</strong><br>
-          Username: <code style="color: #00ff00;">admin</code><br>
-          Password: <code style="color: #00ff00;">asteroid123</code>
+          Username: <br><code style="color: #00ff00;">admin</code><br>
+          Password: <br><code style="color: #00ff00;">asteroid123</code>
         </div>
       </div>
     </div>