diff --git a/static/asteroid.css b/static/asteroid.css
index a3463c6..5015c99 100644
--- a/static/asteroid.css
+++ b/static/asteroid.css
@@ -3,7 +3,7 @@ body{
     font-weight: 400;
     font-style: normal;
     background: #0a0a0a;
-    color: #00ff00;
+    color: #00ffff;
     margin: 0;
     padding: 20px;
 }
@@ -14,27 +14,27 @@ body .container{
 }
 
 body h1{
-    color: #ff6600;
+    color: #4488ff;
     text-align: center;
     font-size: 2.5em;
     margin-bottom: 30px;
 }
 
 body h2{
-    color: #ff6600;
+    color: #4488ff;
 }
 
 body .status{
-    background: #1a1a1a;
+    background: #1a2332;
     padding: 20px;
-    border: 1px solid #333;
+    border: 1px solid #2a3441;
     margin: 20px 0;
 }
 
 body .panel{
-    background: #1a1a1a;
+    background: #1a2332;
     padding: 20px;
-    border: 1px solid #333;
+    border: 1px solid #2a3441;
     margin: 20px 0;
 }
 
@@ -43,17 +43,17 @@ body .nav{
 }
 
 body .nav a{
-    color: #00ff00;
+    color: #00ffff;
     text-decoration: none;
     margin: 0 15px;
     padding: 10px 20px;
-    border: 1px solid #333;
-    background: #1a1a1a;
+    border: 1px solid #2a3441;
+    background: #1a2332;
     display: inline-block;
 }
 
 body .nav a :hover{
-    background: #333;
+    background: #2a3441;
 }
 
 body .controls{
@@ -61,42 +61,42 @@ body .controls{
 }
 
 body .controls button{
-    background: #1a1a1a;
-    color: #00ff00;
-    border: 1px solid #333;
+    background: #1a2332;
+    color: #00ffff;
+    border: 1px solid #2a3441;
     padding: 10px 20px;
     margin: 5px;
     cursor: pointer;
 }
 
 body .controls button :hover{
-    background: #333;
+    background: #2a3441;
 }
 
 body button{
-    background: #333;
-    color: #00ff00;
-    border: 1px solid #555;
+    background: #2a3441;
+    color: #00ffff;
+    border: 1px solid #3a4551;
     padding: 10px 20px;
     margin: 5px;
     cursor: pointer;
 }
 
 body button :hover{
-    background: #555;
+    background: #3a4551;
 }
 
 body .now-playing{
-    background: #1a1a1a;
+    background: #1a2332;
     padding: 20px;
-    border: 1px solid #333;
+    border: 1px solid #2a3441;
     margin: 20px 0;
     font-size: 1.5em;
-    color: #ff6600;
+    color: #4488ff;
 }
 
 body .back{
-    color: #00ff00;
+    color: #00ffff;
     text-decoration: none;
     margin-bottom: 20px;
     display: inline-block;
@@ -107,9 +107,9 @@ body .back :hover{
 }
 
 body .player{
-    background: #1a1a1a;
+    background: #1a2332;
     padding: 40px;
-    border: 1px solid #333;
+    border: 1px solid #2a3441;
     margin: 40px auto;
     max-width: 600px;
 }
@@ -123,9 +123,9 @@ body .player .controls button{
 }
 
 body .player-section{
-    background: #1a1a1a;
+    background: #1a2332;
     padding: 25px;
-    border: 1px solid #333;
+    border: 1px solid #2a3441;
     margin: 20px 0;
     border-radius: 5px;
 }
@@ -138,8 +138,8 @@ body .search-input{
     width: 100%;
     padding: 12px;
     background: #0a0a0a;
-    color: #00ff00;
-    border: 1px solid #333;
+    color: #00ffff;
+    border: 1px solid #2a3441;
     font-family: Courier New, monospace;
     font-size: 14px;
     margin-bottom: 15px;
@@ -148,7 +148,7 @@ body .search-input{
 body .track-list{
     max-height: 400px;
     overflow-y: auto;
-    border: 1px solid #333;
+    border: 1px solid #2a3441;
     background: #0a0a0a;
 }
 
@@ -157,7 +157,7 @@ body .track-item{
     justify-content: space-between;
     align-items: center;
     padding: 12px 15px;
-    border-bottom: 1px solid #333;
+    border-bottom: 1px solid #2a3441;
     -moz-transition: background-color 0.2s;
     -o-transition: background-color 0.2s;
     -webkit-transition: background-color 0.2s;
@@ -166,7 +166,7 @@ body .track-item{
 }
 
 body .track-item :hover{
-    background: #1a1a1a;
+    background: #1a2332;
 }
 
 body .track-info{
@@ -174,7 +174,7 @@ body .track-info{
 }
 
 body .track-info .track-title{
-    color: #00ff00;
+    color: #00ffff;
     font-weight: bold;
     margin-bottom: 4px;
 }
@@ -196,20 +196,20 @@ body .audio-player{
 body .track-art{
     font-size: 3em;
     margin-right: 20px;
-    color: #ff6600;
+    color: #4488ff;
 }
 
 
 
 body .track-details .track-title{
     font-size: 1.4em;
-    color: #00ff00;
+    color: #00ffff;
     margin-bottom: 5px;
 }
 
 body .track-details .track-artist{
     font-size: 1.1em;
-    color: #ff6600;
+    color: #4488ff;
     margin-bottom: 3px;
 }
 
@@ -232,12 +232,12 @@ body .player-info{
     margin-top: 15px;
     padding: 10px;
     background: #0a0a0a;
-    border: 1px solid #333;
+    border: 1px solid #2a3441;
     border-radius: 3px;
 }
 
 body .time-display{
-    color: #00ff00;
+    color: #00ffff;
     font-family: Courier New, monospace;
 }
 
@@ -248,21 +248,21 @@ body .volume-control{
 }
 
 body .volume-control label{
-    color: #ff6600;
+    color: #4488ff;
 }
 
 body .volume-slider{
     width: 100px;
     height: 5px;
-    background: #333;
+    background: #2a3441;
     outline: none;
     border-radius: 3px;
 }
 
 body .btn{
-    background: #333;
-    color: #00ff00;
-    border: 1px solid #555;
+    background: #2a3441;
+    color: #00ffff;
+    border: 1px solid #3a4551;
     padding: 8px 16px;
     margin: 3px;
     cursor: pointer;
@@ -277,106 +277,70 @@ body .btn{
 }
 
 body .btn :hover{
-    background: #555;
-    border-color: #777;
+    background: #3a4551;
+    border-color: #3a4551;
 }
 
-body .btn-primary{
+body .btn .btn-primary{
     background: #0066cc;
     border-color: #0088ff;
 }
 
-body .btn-primary :hover{
+body .btn .btn-primary :hover{
     background: #0088ff;
 }
 
-body .btn-success{
-    background: #006600;
-    border-color: #00aa00;
-}
-
-body .btn-success :hover{
-    background: #00aa00;
-}
-
-body .btn-danger{
-    background: #cc0000;
-    border-color: #ff0000;
-}
-
-body .btn-danger :hover{
-    background: #ff0000;
-}
-
-body .btn-info{
-    background: #006666;
-    border-color: #00aaaa;
-}
-
-body .btn-info :hover{
-    background: #00aaaa;
-}
-
-body .btn-warning{
-    background: #cc6600;
-    border-color: #ff8800;
-}
-
-body .btn-warning :hover{
-    background: #ff8800;
-}
-
-body .btn-secondary{
+body .btn .btn-secondary{
     background: #444;
-    border-color: #666;
+    border-color: #2a3441;
 }
 
-body .btn-secondary :hover{
+body .btn .btn-secondary :hover{
     background: #666;
 }
 
-body .btn-sm{
+body .btn .btn-sm{
     padding: 4px 8px;
     font-size: 12px;
 }
 
-body .btn.active{
-    background: #ff6600;
-    border-color: #ff8800;
+body .btn .btn.active{
+    background: #4488ff;
+    border-color: #5599ff;
     color: #000;
 }
 
-body .playlist-controls{
+body .btn .playlist-controls{
     margin-bottom: 15px;
     display: flex;
     gap: 10px;
     align-items: center;
 }
 
-body .playlist-input{
+body .btn .playlist-input{
     flex: 1;
     padding: 8px 12px;
     background: #0a0a0a;
-    color: #00ff00;
-    border: 1px solid #333;
+    color: #00ffff;
+    border: 1px solid #2a3441;
     font-family: Courier New, monospace;
 }
 
-body .playlist-list{
-    border: 1px solid #333;
+body .btn .playlist-list{
+    border: 1px solid #2a3441;
     background: #0a0a0a;
     min-height: 100px;
     padding: 10px;
 }
 
-body .queue-controls{
+body .btn .queue-controls{
     margin-bottom: 15px;
     display: flex;
     gap: 10px;
 }
 
-body .play-queue{
-    border: 1px solid #333;
+body .btn .play-queue{
+    border: 1px solid #2a3441;
     background: #0a0a0a;
     min-height: 150px;
     max-height: 300px;
@@ -384,85 +348,85 @@ body .play-queue{
     padding: 10px;
 }
 
-body .queue-item{
+body .btn .queue-item{
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 8px 10px;
-    border-bottom: 1px solid #333;
+    border-bottom: 1px solid #2a3441;
     margin-bottom: 5px;
 }
 
-body .queue-item :last-child{
+body .btn .queue-item :last-child{
     border-bottom: none;
     margin-bottom: 0;
 }
 
-body .empty-queue{
+body .btn .empty-queue{
     text-align: center;
     color: #666;
     padding: 20px;
     font-style: italic;
 }
 
-body .no-tracks{
+body .btn .no-tracks{
     text-align: center;
     color: #666;
     padding: 20px;
     font-style: italic;
 }
 
-body .no-playlists{
+body .btn .no-playlists{
     text-align: center;
     color: #666;
     padding: 20px;
     font-style: italic;
 }
 
-body .loading{
+body .btn .loading{
     text-align: center;
-    color: #ff6600;
+    color: #4488ff;
     padding: 20px;
 }
 
-body .error{
+body .btn .error{
     text-align: center;
     color: #ff0000;
     padding: 20px;
     font-weight: bold;
 }
 
-body .upload-section{
+body .btn .upload-section{
     margin: 20px 0;
     padding: 20px;
     background: #0a0a0a;
-    border: 1px solid #333;
+    border: 1px solid #2a3441;
     border-radius: 5px;
 }
 
-body .upload-controls{
+body .btn .upload-controls{
     display: flex;
     gap: 15px;
     align-items: center;
     margin-bottom: 15px;
 }
 
-body .upload-info{
+body .btn .upload-info{
     color: #888;
     font-size: 0.9em;
 }
 
-body .upload-progress{
+body .btn .upload-progress{
     margin-top: 10px;
     padding: 10px;
-    background: #1a1a1a;
-    border: 1px solid #333;
+    background: #1a2332;
+    border: 1px solid #2a3441;
     border-radius: 3px;
 }
 
-body .progress-bar{
+body .btn .progress-bar{
     height: 20px;
-    background: #ff6600;
+    background: #4488ff;
     border-radius: 3px;
     -moz-transition: width 0.3s ease;
     -o-transition: width 0.3s ease;
@@ -472,37 +436,37 @@ body .progress-bar{
     width: 0%;
 }
 
-body .progress-text{
+body .btn .progress-text{
     display: block;
     margin-top: 5px;
-    color: #00ff00;
+    color: #00ffff;
     font-size: 0.9em;
 }
 
-body input{
+body .btn input{
     padding: 8px 12px;
-    background: #1a1a1a;
-    color: #00ff00;
-    border: 1px solid #333;
+    background: #1a2332;
+    color: #00ffff;
+    border: 1px solid #2a3441;
     border-radius: 3px;
     font-family: Courier New, monospace;
 }
 
-body .upload-interface{
+body .btn .upload-interface{
     margin-top: 2rem;
     padding: 1.5rem;
-    background-color: #1a1a1a;
+    background-color: #1a2332;
     border-radius: 8px;
-    border: 1px solid #333;
+    border: 1px solid #2a3441;
 }
 
-body .upload-interface h3{
-    color: #00ff00;
+body .btn .upload-interface h3{
+    color: #00ffff;
     margin-bottom: 1rem;
 }
 
-body .upload-interface .upload-area{
-    border: 2px dashed #333;
+body .btn .upload-interface .upload-area{
+    border: 2px dashed #2a3441;
     border-radius: 8px;
     padding: 2rem;
     text-align: center;
@@ -514,26 +478,26 @@ body .upload-interface .upload-area{
     transition: border-color 0.3s ease;
 }
 
-body .upload-interface .upload-area &:hover{
-    border-color: #00ff00;
+body .btn .upload-interface .upload-area &:hover{
+    border-color: #00ffff;
 }
 
-body .upload-interface .upload-area .upload-icon{
+body .btn .upload-interface .upload-area .upload-icon{
     font-size: 3rem;
     color: #666;
     margin-bottom: 1rem;
 }
 
-body .upload-interface .upload-area p{
+body .btn .upload-interface .upload-area p{
     color: #999;
     margin-bottom: 1rem;
 }
 
-body .upload-interface .upload-area .btn{
+body .btn .upload-interface .upload-area .btn{
     margin-top: 1rem;
 }
 
-body .auth-container{
+body .btn .auth-container{
     display: flex;
     justify-content: center;
     align-items: center;
@@ -541,9 +505,9 @@ body .auth-container{
     padding: 2rem;
 }
 
-body .auth-form{
-    background-color: #1a1a1a;
-    border: 1px solid #333;
+body .btn .auth-form{
+    background-color: #1a2332;
+    border: 1px solid #2a3441;
     border-radius: 8px;
     padding: 2rem;
     width: 100%;
@@ -555,43 +519,43 @@ body .auth-form{
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
 }
 
-body .auth-form h2{
-    color: #00ff00;
+body .btn .auth-form h2{
+    color: #00ffff;
     text-align: center;
     margin-bottom: 1.5rem;
     font-size: 1.5rem;
 }
 
-body .auth-form h3{
-    color: #00ff00;
+body .btn .auth-form h3{
+    color: #00ffff;
     margin-bottom: 1rem;
     font-size: 1.2rem;
 }
 
-body .form-group{
+body .btn .form-group{
     margin-bottom: 1rem;
 }
 
-body .form-group label{
+body .btn .form-group label{
     display: block;
     color: #ccc;
     margin-bottom: 0.5rem;
     font-weight: bold;
 }
 
-body .form-group input{
+body .btn .form-group input{
     width: 100%;
     padding: 0.75rem;
     background-color: #0f0f0f;
-    border: 1px solid #333;
+    border: 1px solid #2a3441;
     border-radius: 4px;
     color: #fff;
     font-size: 1rem;
     box-sizing: border-box;
 }
 
-body .form-group input &:focus{
-    border-color: #00ff00;
+body .btn .form-group input &:focus{
+    border-color: #00ffff;
     outline: none;
     -moz-box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2);
     -o-box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2);
@@ -600,13 +564,13 @@ body .form-group input &:focus{
     box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2);
 }
 
-body .form-actions{
+body .btn .form-actions{
     display: flex;
     gap: 1rem;
     margin-top: 1.5rem;
 }
 
-body .message{
+body .btn .message{
     padding: 0.75rem;
     border-radius: 4px;
     margin-top: 1rem;
@@ -614,80 +578,80 @@ body .message{
     font-weight: bold;
 }
 
-body .message &.success{
+body .btn .message &.success{
     background-color: rgba(0, 255, 0, 0.1);
-    border: 1px solid #00ff00;
-    color: #00ff00;
+    border: 1px solid #00ffff;
+    color: #00ffff;
 }
 
-body .message &.error{
+body .btn .message &.error{
     background-color: rgba(255, 0, 0, 0.1);
     border: 1px solid #ff0000;
     color: #ff0000;
 }
 
-body .auth-link{
+body .btn .auth-link{
     text-align: center;
     margin-top: 1.5rem;
     color: #999;
 }
 
-body .auth-link a{
-    color: #00ff00;
+body .btn .auth-link a{
+    color: #00ffff;
     text-decoration: none;
 }
 
-body .auth-link a &:hover{
+body .btn .auth-link a &:hover{
     text-decoration: underline;
 }
 
-body .profile-container{
+body .btn .profile-container{
     max-width: 600px;
     margin: 2rem auto;
     padding: 0 1rem;
 }
 
-body .profile-card{
-    background-color: #1a1a1a;
-    border: 1px solid #333;
+body .btn .profile-card{
+    background-color: #1a2332;
+    border: 1px solid #2a3441;
     border-radius: 8px;
     padding: 2rem;
     margin-bottom: 2rem;
 }
 
-body .profile-card h2{
-    color: #00ff00;
+body .btn .profile-card h2{
+    color: #00ffff;
     margin-bottom: 1.5rem;
     text-align: center;
 }
 
-body .profile-info{
+body .btn .profile-info{
     margin-bottom: 2rem;
 }
 
-body .info-group{
+body .btn .info-group{
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0.75rem 0;
-    border-bottom: 1px solid #333;
+    border-bottom: 1px solid #2a3441;
 }
 
-body .info-group &:last-child{
+body .btn .info-group &:last-child{
     border-bottom: none;
 }
 
-body .info-group label{
+body .btn .info-group label{
     color: #ccc;
     font-weight: bold;
 }
 
-body .info-group span{
+body .btn .info-group span{
     color: #fff;
 }
 
-body .role-badge{
-    background-color: #00ff00;
+body .btn .role-badge{
+    background-color: #00ffff;
     color: #000;
     padding: 0.25rem 0.5rem;
     border-radius: 4px;
@@ -695,86 +659,86 @@ body .role-badge{
     font-weight: bold;
 }
 
-body .profile-actions{
+body .btn .profile-actions{
     display: flex;
     gap: 1rem;
     justify-content: center;
 }
 
-body .user-management{
+body .btn .user-management{
     margin-top: 2rem;
 }
 
-body .users-table{
+body .btn .users-table{
     width: 100%;
     border-collapse: collapse;
-    background-color: #1a1a1a;
-    border: 1px solid #333;
+    background-color: #1a2332;
+    border: 1px solid #2a3441;
     border-radius: 8px;
     overflow: hidden;
 }
 
-body .users-table thead{
+body .btn .users-table thead{
     background-color: #0f0f0f;
 }
 
-body .users-table thead th{
+body .btn .users-table thead th{
     padding: 1rem;
     text-align: left;
-    color: #00ff00;
+    color: #00ffff;
     font-weight: bold;
-    border-bottom: 1px solid #333;
+    border-bottom: 1px solid #2a3441;
 }
 
 
 
-body .users-table tbody tr{
-    border-bottom: 1px solid #333;
+body .btn .users-table tbody tr{
+    border-bottom: 1px solid #2a3441;
 }
 
-body .users-table tbody tr &:hover{
+body .btn .users-table tbody tr &:hover{
     background-color: #222;
 }
 
-body .users-table tbody tr td{
+body .btn .users-table tbody tr td{
     padding: 1rem;
     color: #fff;
     vertical-align: middle;
 }
 
-body .users-table tbody .user-actions{
+body .btn .users-table tbody .user-actions{
     display: flex;
     gap: 0.5rem;
 }
 
-body .users-table tbody .user-actions .btn{
+body .btn .users-table tbody .user-actions .btn{
     padding: 0.25rem 0.5rem;
     font-size: 0.875rem;
 }
 
-body .user-stats{
+body .btn .user-stats{
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     gap: 1rem;
     margin-bottom: 2rem;
 }
 
-body .stat-card{
-    background-color: #1a1a1a;
-    border: 1px solid #333;
+body .btn .stat-card{
+    background-color: #1a2332;
+    border: 1px solid #2a3441;
     border-radius: 8px;
     padding: 1rem;
     text-align: center;
 }
 
-body .stat-card .stat-number{
+body .btn .stat-card .stat-number{
     font-size: 2rem;
     font-weight: bold;
-    color: #00ff00;
+    color: #00ffff;
     display: block;
 }
 
-body .stat-card .stat-label{
+body .btn .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 05fb443..111b2e5 100644
--- a/static/asteroid.lass
+++ b/static/asteroid.lass
@@ -7,7 +7,7 @@
  :font-weight 400
  :font-style normal
  :background "#0a0a0a"
- :color "#00ff00"
+ :color "#00ffff"
  :margin 0
  :padding "20px"
 
@@ -16,71 +16,71 @@
   :margin "0 auto")
 
  (h1
-  :color "#ff6600"
+  :color "#4488ff"
   :text-align center
   :font-size "2.5em"
   :margin-bottom "30px")
 
  (h2
-  :color "#ff6600")
+  :color "#4488ff")
 
  (.status
-  :background "#1a1a1a"
+  :background "#1a2332"
   :padding "20px"
-  :border "1px solid #333"
+  :border "1px solid #2a3441"
   :margin "20px 0")
 
  (.panel
-  :background "#1a1a1a"
+  :background "#1a2332"
   :padding "20px"
-  :border "1px solid #333"
+  :border "1px solid #2a3441"
   :margin "20px 0")
 
  (.nav
   :margin "20px 0"
   (a
-   :color "#00ff00"
+   :color "#00ffff"
    :text-decoration none
    :margin "0 15px"
    :padding "10px 20px"
-   :border "1px solid #333"
-   :background "#1a1a1a"
+   :border "1px solid #2a3441"
+   :background "#1a2332"
    :display inline-block
    (:hover
-    :background "#333")))
+    :background "#2a3441")))
 
  (.controls
   :margin "20px 0"
   (button
-   :background "#1a1a1a"
-   :color "#00ff00"
-   :border "1px solid #333"
+   :background "#1a2332"
+   :color "#00ffff"
+   :border "1px solid #2a3441"
    :padding "10px 20px"
    :margin "5px"
    :cursor pointer
    (:hover
-    :background "#333")))
+    :background "#2a3441")))
 
  (button
-  :background "#333"
-  :color "#00ff00"
-  :border "1px solid #555"
+  :background "#2a3441"
+  :color "#00ffff"
+  :border "1px solid #3a4551"
   :padding "10px 20px"
   :margin "5px"
   :cursor pointer
   (:hover
-   :background "#555"))
+   :background "#3a4551"))
 
  (.now-playing
-  :background "#1a1a1a"
+  :background "#1a2332"
   :padding "20px"
-  :border "1px solid #333"
+  :border "1px solid #2a3441"
   :margin "20px 0"
   :font-size "1.5em"
-  :color "#ff6600")
+  :color "#4488ff")
 
  (.back
-  :color "#00ff00"
+  :color "#00ffff"
   :text-decoration none
   :margin-bottom "20px"
   :display inline-block
@@ -89,9 +89,9 @@
 
  ;; Player-specific styles
  (.player
-  :background "#1a1a1a"
+  :background "#1a2332"
   :padding "40px"
-  :border "1px solid #333"
+  :border "1px solid #2a3441"
   :margin "40px auto"
   :max-width "600px"
   (.controls
@@ -102,9 +102,9 @@
 
  ;; Web Player Widget Styles
  (.player-section
-  :background "#1a1a1a"
+  :background "#1a2332"
   :padding "25px"
-  :border "1px solid #333"
+  :border "1px solid #2a3441"
   :margin "20px 0"
   :border-radius "5px")
 
@@ -115,8 +115,8 @@
   :width "100%"
   :padding "12px"
   :background "#0a0a0a"
-  :color "#00ff00"
-  :border "1px solid #333"
+  :color "#00ffff"
+  :border "1px solid #2a3441"
   :font-family "Courier New, monospace"
   :font-size "14px"
   :margin-bottom "15px")
@@ -124,7 +124,7 @@
  (.track-list
   :max-height "400px"
   :overflow-y auto
-  :border "1px solid #333"
+  :border "1px solid #2a3441"
   :background "#0a0a0a")
 
  (.track-item
@@ -132,15 +132,15 @@
   :justify-content space-between
   :align-items center
   :padding "12px 15px"
-  :border-bottom "1px solid #333"
+  :border-bottom "1px solid #2a3441"
   :transition "background-color 0.2s"
   (:hover
-   :background "#1a1a1a"))
+   :background "#1a2332"))
 
  (.track-info
   :flex 1
   (.track-title
-   :color "#00ff00"
+   :color "#00ffff"
    :font-weight bold
    :margin-bottom "4px")
   (.track-meta
@@ -157,16 +157,16 @@
  (.track-art
   :font-size "3em"
   :margin-right "20px"
-  :color "#ff6600")
+  :color "#4488ff")
 
  (.track-details
   (.track-title
    :font-size "1.4em"
-   :color "#00ff00"
+   :color "#00ffff"
    :margin-bottom "5px")
   (.track-artist
    :font-size "1.1em"
-   :color "#ff6600"
+   :color "#4488ff"
    :margin-bottom "3px")
   (.track-album
    :color "#888"))
@@ -185,11 +185,11 @@
   :margin-top "15px"
   :padding "10px"
   :background "#0a0a0a"
-  :border "1px solid #333"
+  :border "1px solid #2a3441"
   :border-radius "3px")
 
  (.time-display
-  :color "#00ff00"
+  :color "#00ffff"
   :font-family "Courier New, monospace")
 
  (.volume-control
@@ -197,20 +197,20 @@
   :align-items center
   :gap "10px"
   (label
-   :color "#ff6600"))
+   :color "#4488ff"))
 
  (.volume-slider
   :width "100px"
   :height "5px"
-  :background "#333"
+  :background "#2a3441"
   :outline none
   :border-radius "3px")
 
  ;; Button styles
  (.btn
-  :background "#333"
-  :color "#00ff00"
-  :border "1px solid #555"
+  :background "#2a3441"
+  :color "#00ffff"
+  :border "1px solid #3a4551"
   :padding "8px 16px"
   :margin "3px"
   :cursor pointer
@@ -219,8 +219,8 @@
   :border-radius "3px"
   :transition "all 0.2s"
   (:hover
-   :background "#555"
-   :border-color "#777"))
+   :background "#3a4551"
+   :border-color "#3a4551")
 
  (.btn-primary
   :background "#0066cc"
@@ -228,43 +228,19 @@
   (:hover
    :background "#0088ff"))
 
- (.btn-success
-  :background "#006600"
-  :border-color "#00aa00"
-  (:hover
-   :background "#00aa00"))
-
- (.btn-danger
-  :background "#cc0000"
-  :border-color "#ff0000"
-  (:hover
-   :background "#ff0000"))
-
- (.btn-info
-  :background "#006666"
-  :border-color "#00aaaa"
-  (:hover
-   :background "#00aaaa"))
-
- (.btn-warning
-  :background "#cc6600"
-  :border-color "#ff8800"
-  (:hover
-   :background "#ff8800"))
-
  (.btn-secondary
   :background "#444"
-  :border-color "#666"
+  :border-color "#2a3441"
   (:hover
-   :background "#666"))
+  :background "#666"))
 
  (.btn-sm
   :padding "4px 8px"
   :font-size "12px")
 
  (.btn.active
-  :background "#ff6600"
-  :border-color "#ff8800"
+  :background "#4488ff"
+  :border-color "#5599ff"
   :color "#000")
 
  ;; Playlist and Queue styles
@@ -278,12 +254,12 @@
   :flex 1
   :padding "8px 12px"
   :background "#0a0a0a"
-  :color "#00ff00"
-  :border "1px solid #333"
+  :color "#00ffff"
+  :border "1px solid #2a3441"
   :font-family "Courier New, monospace")
 
  (.playlist-list
-  :border "1px solid #333"
+  :border "1px solid #2a3441"
   :background "#0a0a0a"
   :min-height "100px"
   :padding "10px")
@@ -294,7 +270,7 @@
   :gap "10px")
 
  (.play-queue
-  :border "1px solid #333"
+  :border "1px solid #2a3441"
   :background "#0a0a0a"
   :min-height "150px"
   :max-height "300px"
@@ -306,7 +282,7 @@
   :justify-content space-between
   :align-items center
   :padding "8px 10px"
-  :border-bottom "1px solid #333"
+  :border-bottom "1px solid #2a3441"
   :margin-bottom "5px"
   (:last-child
    :border-bottom none
@@ -332,7 +308,7 @@
 
  (.loading
   :text-align center
-  :color "#ff6600"
+  :color "#4488ff"
   :padding "20px")
 
  (.error
@@ -346,7 +322,7 @@
   :margin "20px 0"
   :padding "20px"
   :background "#0a0a0a"
-  :border "1px solid #333"
+  :border "1px solid #2a3441"
   :border-radius "5px")
 
  (.upload-controls
@@ -362,13 +338,13 @@
  (.upload-progress
   :margin-top "10px"
   :padding "10px"
-  :background "#1a1a1a"
-  :border "1px solid #333"
+  :background "#1a2332"
+  :border "1px solid #2a3441"
   :border-radius "3px")
 
  (.progress-bar
   :height "20px"
-  :background "#ff6600"
+  :background "#4488ff"
   :border-radius "3px"
   :transition "width 0.3s ease"
   :width "0%")
@@ -376,36 +352,36 @@
  (.progress-text
   :display block
   :margin-top "5px"
-  :color "#00ff00"
+  :color "#00ffff"
   :font-size "0.9em")
 
  (input
   :padding "8px 12px"
-  :background "#1a1a1a"
-  :color "#00ff00"
-  :border "1px solid #333"
+  :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 "#1a1a1a"
+   :background-color "#1a2332"
    :border-radius 8px
-   :border "1px solid #333"
+   :border "1px solid #2a3441"
    
-   (h3 :color "#00ff00"
+   (h3 :color "#00ffff"
        :margin-bottom 1rem)
    
    (.upload-area
-    :border "2px dashed #333"
+    :border "2px dashed #2a3441"
     :border-radius 8px
     :padding 2rem
     :text-align center
     :background-color "#0f0f0f"
     :transition "border-color 0.3s ease"
     
-    ("&:hover" :border-color "#00ff00")
+    ("&:hover" :border-color "#00ffff")
     
     (.upload-icon :font-size 3rem
                   :color "#666"
@@ -425,20 +401,20 @@
    :padding 2rem)
 
   (.auth-form
-   :background-color "#1a1a1a"
-   :border "1px solid #333"
+   :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 "#00ff00"
+   (h2 :color "#00ffff"
        :text-align center
        :margin-bottom 1.5rem
        :font-size 1.5rem)
    
-   (h3 :color "#00ff00"
+   (h3 :color "#00ffff"
        :margin-bottom 1rem
        :font-size 1.2rem))
 
@@ -453,13 +429,13 @@
    (input :width "100%"
           :padding 0.75rem
           :background-color "#0f0f0f"
-          :border "1px solid #333"
+          :border "1px solid #2a3441"
           :border-radius 4px
           :color "#fff"
           :font-size 1rem
           :box-sizing border-box
           
-          ("&:focus" :border-color "#00ff00"
+          ("&:focus" :border-color "#00ffff"
                      :outline none
                      :box-shadow "0 0 0 2px rgba(0, 255, 0, 0.2)")))
 
@@ -476,8 +452,8 @@
    :font-weight bold
    
    ("&.success" :background-color "rgba(0, 255, 0, 0.1)"
-                :border "1px solid #00ff00"
-                :color "#00ff00")
+                :border "1px solid #00ffff"
+                :color "#00ffff")
    
    ("&.error" :background-color "rgba(255, 0, 0, 0.1)"
               :border "1px solid #ff0000"
@@ -488,7 +464,7 @@
    :margin-top 1.5rem
    :color "#999"
    
-   (a :color "#00ff00"
+   (a :color "#00ffff"
       :text-decoration none
       
       ("&:hover" :text-decoration underline)))
@@ -500,13 +476,13 @@
    :padding 0 1rem)
 
   (.profile-card
-   :background-color "#1a1a1a"
-   :border "1px solid #333"
+   :background-color "#1a2332"
+   :border "1px solid #2a3441"
    :border-radius 8px
    :padding 2rem
    :margin-bottom 2rem
    
-   (h2 :color "#00ff00"
+   (h2 :color "#00ffff"
        :margin-bottom 1.5rem
        :text-align center))
 
@@ -518,7 +494,7 @@
    :justify-content space-between
    :align-items center
    :padding 0.75rem 0
-   :border-bottom "1px solid #333"
+   :border-bottom "1px solid #2a3441"
    
    ("&:last-child" :border-bottom none)
    
@@ -528,7 +504,7 @@
    (span :color "#fff"))
 
   (.role-badge
-   :background-color "#00ff00"
+   :background-color "#00ffff"
    :color "#000"
    :padding "0.25rem 0.5rem"
    :border-radius 4px
@@ -547,8 +523,8 @@
   (.users-table
    :width "100%"
    :border-collapse collapse
-   :background-color "#1a1a1a"
-   :border "1px solid #333"
+   :background-color "#1a2332"
+   :border "1px solid #2a3441"
    :border-radius 8px
    :overflow hidden
    
@@ -557,12 +533,12 @@
     
     (th :padding 1rem
         :text-align left
-        :color "#00ff00"
+        :color "#00ffff"
         :font-weight bold
-        :border-bottom "1px solid #333"))
+        :border-bottom "1px solid #2a3441"))
    
    (tbody
-    (tr :border-bottom "1px solid #333"
+    (tr :border-bottom "1px solid #2a3441"
         
         ("&:hover" :background-color "#222")
         
@@ -584,15 +560,15 @@
    :margin-bottom 2rem)
 
   (.stat-card
-   :background-color "#1a1a1a"
-   :border "1px solid #333"
+   :background-color "#1a2332"
+   :border "1px solid #2a3441"
    :border-radius 8px
    :padding 1rem
    :text-align center
    
    (.stat-number :font-size 2rem
                  :font-weight bold
-                 :color "#00ff00"
+                 :color "#00ffff"
                  :display block)
    
    (.stat-label :color "#ccc"
@@ -600,5 +576,7 @@
                 :margin-top 0.5rem)))
 
  ;; Center alignment for player page
- ;; (body.player-page
- ;;  :text-align center)
+;; (body.player-page
+;;  :text-align center)
+
+) ;; Close main body block