upgraded and fixed multiple ui problems

lollms_core

@@ -1 +1 @@
-Subproject commit 63b09388787cb244e2dfed7422cfd91f8549a379
+Subproject commit 9942d177a1b4c8c424d6dcb89cdb1a6ff6fa99d4

scripts/windows/ui_installer/lollms_installer.iss

@@ -1,5 +1,5 @@
 #define MyAppName "LOLLMS"
-#define MyAppVersion "13.0"
+#define MyAppVersion "14.0"
 #define MyAppPublisher "ParisNeo"
 #define MyAppURL "https://github.com/ParisNeo/lollms-webui"
 
@@ -43,7 +43,6 @@ Name: "{autodesktop}\{#MyAppName}"; Filename: "{app}\lollms.bat"; IconFilename:
 Name: "{autoprograms}\{#MyAppName} CMD"; Filename: "{app}\lollms_cmd.bat"; IconFilename: "{app}\logo.ico"
 Name: "{autodesktop}\{#MyAppName} CMD"; Filename: "{app}\lollms_cmd.bat"; IconFilename: "{app}\logo.ico"; Tasks: desktopicon
 
-
 [Run]
 Filename: "{app}\lollmsenv_installer.bat"; Parameters: "--dir ""{app}\lollmsenv"" -y"; StatusMsg: "Installing LollmsEnv..."; Flags: runhidden
 Filename: "{app}\lollmsenv\bin\lollmsenv.bat"; Parameters: "create-env lollms_env"; StatusMsg: "Creating Python environment..."; Flags: runhidden
@@ -53,18 +52,17 @@ Filename: "{app}\lollmsenv\envs\lollms_env\Scripts\python.exe"; Parameters: "-m
 Filename: "{app}\lollmsenv\envs\lollms_env\Scripts\python.exe"; Parameters: "-m pip install -e ""{app}\lollms-webui\lollms_core"""; StatusMsg: "Installing LOLLMS core..."; Flags: runhidden
 Filename: "{app}\lollms.bat"; Description: "Run LOLLMS"; Flags: postinstall nowait skipifsilent; Tasks: runafterinstall
 
-
 [UninstallDelete]
 Type: files; Name: "{app}\lollms.bat"
 Type: files; Name: "{app}\lollms_cmd.bat"
 Type: filesandordirs; Name: "{app}\lollmsenv"
 Type: filesandordirs; Name: "{app}\lollms-webui"
 Type: filesandordirs; Name: "{app}\lollmsenv_install"
+
 [Code]
 var
   BindingPage: TInputOptionWizardPage;
   PersonalFolderPage: TInputDirWizardPage;
-  UninstallPersonalDataPage: TInputOptionWizardPage;
 
 function IsGitInstalled: Boolean;
 var
@@ -177,7 +175,7 @@ begin
     
     // Create global_paths_cfg.yaml file
     YamlContent := 'lollms_path: ' + ExpandConstant('{app}\lollms-webui\lollms_core\lollms') + #13#10 +
-                   'lollms_personal_path: ' + PersonalFolder;
+                   'lollms_personal_path: ' + PersonalFolder ;
     SaveStringToFile(ExpandConstant('{app}\lollms-webui\global_paths_cfg.yaml'), YamlContent, False);
 
     case BindingPage.SelectedValueIndex of
@@ -205,22 +203,21 @@ begin
            '', SW_SHOW, ewWaitUntilTerminated, ResultCode);
     end;
 
-
-
     SaveStringToFile(ExpandConstant('{app}\lollms.bat'),
       '@echo off' + #13#10 +
-      'call "' + ExpandConstant('{app}') + '\lollmsenv\envs\lollms_env\Scripts\activate.bat"' + #13#10 +
+      'call "lollmsenv\envs\lollms_env\Scripts\activate.bat"' + #13#10 +
-      'cd "' + ExpandConstant('{app}') + '\lollms-webui"' + #13#10 +
+      'cd /d "lollms-webui"' + #13#10 +
       'python app.py %*' + #13#10 +
       'pause', False);
 
     SaveStringToFile(ExpandConstant('{app}\lollms_cmd.bat'),
       '@echo off' + #13#10 +
-      'call "' + ExpandConstant('{app}') + '\lollmsenv\envs\lollms_env\Scripts\activate.bat"' + #13#10 +
+      'call "lollmsenv\envs\lollms_env\Scripts\activate.bat"' + #13#10 +
-      'cd "' + ExpandConstant('{app}') + '\lollms-webui"' + #13#10 +
+      'cd /d "lollms-webui"' + #13#10 +
       'cmd /k', False);
   end;
 end;
+
 procedure CurUninstallStepChanged(CurUninstallStep: TUninstallStep);
 var
   PersonalFolder: string;
@@ -242,6 +239,9 @@ begin
           if Pos('lollms_personal_path:', YamlContent[I]) = 1 then
           begin
             PersonalFolder := Trim(Copy(YamlContent[I], Length('lollms_personal_path:') + 1, MaxInt));
+            // Remove surrounding quotes if present
+            if (Length(PersonalFolder) > 1) and (PersonalFolder[1] = '"') and (PersonalFolder[Length(PersonalFolder)] = '"') then
+              PersonalFolder := Copy(PersonalFolder, 2, Length(PersonalFolder) - 2);
             Break;
           end;
         end;
@@ -272,4 +272,3 @@ begin
     end;
   end;
 end;
-

scripts/windows/ui_installer/lollmsenv_installer.bat

@@ -1,12 +1,17 @@
 @echo off
 setlocal enabledelayedexpansion
 :: Version number
-set VERSION=1.3.3
+set VERSION=1.4.2
 set USE_MASTER=false
 
 :: Check for --use-master option
+set ARGS=
 for %%a in (%*) do (
-    if "%%a"=="--use-master" set USE_MASTER=true
+    if "%%a"=="--use-master" (
+        set USE_MASTER=true
+    ) else (
+        set ARGS=!ARGS! %%a
+    )
 )
 
 :: Temporary directory for downloading and extraction
@@ -41,10 +46,6 @@ if "%USE_MASTER%"=="true" (
     cd /d "%TEMP_DIR%\LollmsEnv-%VERSION%"
 )
 
-:: Remove --use-master from arguments
-set ARGS=%*
-set ARGS=%ARGS:--use-master=%
-
 :: Run the install script with forwarded parameters
 echo Running installation...
 call install.bat %ARGS%

web/dist/index.html

@@ -6,8 +6,8 @@
     <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>LoLLMS WebUI</title>
-    <script type="module" crossorigin src="/assets/index-BxkXwSKb.js"></script>
+    <script type="module" crossorigin src="/assets/index-ZQkh7DUY.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-x900GuGZ.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-C4lyxCdb.css">
   </head>
   <body>
     <div id="app"></div>

web/dist/themes/amber.css

@@ -1240,6 +1240,12 @@ html{
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 }
+.line-clamp-4{
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
 .block{
   display: block;
 }
@@ -1357,9 +1363,6 @@ html{
 .h-\[200px\]{
   height: 200px;
 }
-.h-\[220px\]{
-  height: 220px;
-}
 .h-auto{
   height: auto;
 }
@@ -1399,9 +1402,18 @@ html{
 .max-h-\[80vh\]{
   max-height: 80vh;
 }
+.max-h-\[90vh\]{
+  max-height: 90vh;
+}
 .max-h-full{
   max-height: 100%;
 }
+.min-h-0{
+  min-height: 0px;
+}
+.min-h-\[220px\]{
+  min-height: 220px;
+}
 .min-h-\[500px\]{
   min-height: 500px;
 }
@@ -1477,6 +1489,9 @@ html{
 .w-4\/5{
   width: 80%;
 }
+.w-40{
+  width: 10rem;
+}
 .w-48{
   width: 12rem;
 }
@@ -1532,9 +1547,6 @@ html{
 .min-w-96{
   min-width: 24rem;
 }
-.min-w-\[120px\]{
-  min-width: 120px;
-}
 .min-w-\[14rem\]{
   min-width: 14rem;
 }
@@ -1634,9 +1646,6 @@ html{
 .origin-left{
   transform-origin: left;
 }
-.origin-top{
-  transform-origin: top;
-}
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1685,6 +1694,16 @@ html{
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.scale-100{
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.scale-95{
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .scale-x-0{
   --tw-scale-x: 0;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1827,6 +1846,9 @@ html{
 .gap-4{
   gap: 1rem;
 }
+.gap-6{
+  gap: 1.5rem;
+}
 .gap-8{
   gap: 2rem;
 }
@@ -1870,6 +1892,11 @@ html{
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.space-y-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
 .space-y-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2403,9 +2430,6 @@ html{
 .bg-opacity-70{
   --tw-bg-opacity: 0.7;
 }
-.bg-gradient-to-b{
-  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-}
 .bg-gradient-to-br{
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -2505,11 +2529,6 @@ html{
   --tw-gradient-to: rgb(6 148 162 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.from-transparent{
-  --tw-gradient-from: transparent var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
 .from-5\%{
   --tw-gradient-from-position: 5%;
 }
@@ -2553,10 +2572,6 @@ html{
   --tw-gradient-to: rgb(4 116 129 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #047481 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.via-transparent{
-  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
 .via-10\%{
   --tw-gradient-via-position: 10%;
 }
@@ -2614,9 +2629,6 @@ html{
 .to-transparent{
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
-.to-white{
-  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
-}
 .to-yellow-200{
   --tw-gradient-to: #FCE96A var(--tw-gradient-to-position);
 }
@@ -3520,6 +3532,9 @@ html{
 .scrollbar-track-bg-light-tone{
   --scrollbar-track: var(--color-bg-light-tone) !important;
 }
+.scrollbar-track-blue-100{
+  --scrollbar-track: #E1EFFE !important;
+}
 .scrollbar-track-gray-200{
   --scrollbar-track: #E5E7EB !important;
 }
@@ -3529,6 +3544,9 @@ html{
 .scrollbar-thumb-bg-light-tone-panel{
   --scrollbar-thumb: var(--color-bg-light-tone-panel) !important;
 }
+.scrollbar-thumb-blue-500{
+  --scrollbar-thumb: #3F83F8 !important;
+}
 .scrollbar-thumb-gray-400{
   --scrollbar-thumb: #9CA3AF !important;
 }
@@ -4191,23 +4209,26 @@ body:is(.dark *){
   }
 }
 .app-card{
+  border-radius: 0.75rem;
+  border-width: 1px;
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
   --tw-gradient-from: #fffbeb var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(255 251 235 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
   --tw-gradient-to: #fef3c7 var(--tw-gradient-to-position);
+  padding: 1.5rem;
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity));
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 .app-card:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .app-card:is(.dark *){
@@ -4721,9 +4742,6 @@ button:hover{
 .group\/item:hover .group-hover\/item\:opacity-100{
   opacity: 1;
 }
-.group:hover .group-hover\:opacity-0{
-  opacity: 0;
-}
 .group:hover .group-hover\:opacity-100{
   opacity: 1;
 }
@@ -4950,6 +4968,11 @@ button:hover{
   --tw-gradient-to: rgb(235 245 255 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.hover\:from-blue-500\/20:hover{
+  --tw-gradient-from: rgb(63 131 248 / 0.2) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .hover\:from-teal-200:hover{
   --tw-gradient-from: #AFECEF var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(175 236 239 / 0) var(--tw-gradient-to-position);
@@ -4961,6 +4984,9 @@ button:hover{
 .hover\:to-purple-50:hover{
   --tw-gradient-to: #F6F5FF var(--tw-gradient-to-position);
 }
+.hover\:to-purple-500\/20:hover{
+  --tw-gradient-to: rgb(144 97 249 / 0.2) var(--tw-gradient-to-position);
+}
 .hover\:text-blue-600:hover{
   --tw-text-opacity: 1;
   color: rgb(28 100 242 / var(--tw-text-opacity));
@@ -5045,11 +5071,6 @@ button:hover{
 .hover\:no-underline:hover{
   text-decoration-line: none;
 }
-.hover\:shadow-lg:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
 .hover\:shadow-md:hover{
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -5502,9 +5523,6 @@ button:hover{
   --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--color-bg-dark) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.dark\:to-gray-800:is(.dark *){
-  --tw-gradient-to: #1F2937 var(--tw-gradient-to-position);
-}
 .dark\:to-purple-400:is(.dark *){
   --tw-gradient-to: #AC94FA var(--tw-gradient-to-position);
 }
@@ -5740,6 +5758,9 @@ button:hover{
 .dark\:scrollbar-track-bg-dark-tone:is(.dark *){
   --scrollbar-track: var(--color-bg-dark-tone) !important;
 }
+.dark\:scrollbar-track-gray-700:is(.dark *){
+  --scrollbar-track: #374151 !important;
+}
 .dark\:scrollbar-track-gray-800:is(.dark *){
   --scrollbar-track: #1F2937 !important;
 }
@@ -5749,6 +5770,9 @@ button:hover{
 .dark\:scrollbar-thumb-bg-dark-tone-panel:is(.dark *){
   --scrollbar-thumb: var(--color-bg-dark-tone-panel) !important;
 }
+.dark\:scrollbar-thumb-gray-500:is(.dark *){
+  --scrollbar-thumb: #6B7280 !important;
+}
 .dark\:scrollbar-thumb-gray-600:is(.dark *){
   --scrollbar-thumb: #4B5563 !important;
 }
@@ -5861,11 +5885,19 @@ button:hover{
 .hover\:dark\:bg-bg-dark-tone-panel:is(.dark *):hover{
   background-color: var(--color-bg-dark-tone-panel);
 }
+.dark\:hover\:from-blue-400\/30:hover:is(.dark *){
+  --tw-gradient-from: rgb(118 169 250 / 0.3) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .dark\:hover\:from-blue-900\/30:hover:is(.dark *){
   --tw-gradient-from: rgb(35 56 118 / 0.3) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(35 56 118 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.dark\:hover\:to-purple-400\/30:hover:is(.dark *){
+  --tw-gradient-to: rgb(172 148 250 / 0.3) var(--tw-gradient-to-position);
+}
 .dark\:hover\:to-purple-900\/30:hover:is(.dark *){
   --tw-gradient-to: rgb(74 29 150 / 0.3) var(--tw-gradient-to-position);
 }

web/dist/themes/borg.css

@@ -1235,6 +1235,12 @@ body {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 }
+.line-clamp-4{
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
 .block{
   display: block;
 }
@@ -1352,9 +1358,6 @@ body {
 .h-\[200px\]{
   height: 200px;
 }
-.h-\[220px\]{
-  height: 220px;
-}
 .h-auto{
   height: auto;
 }
@@ -1394,9 +1397,18 @@ body {
 .max-h-\[80vh\]{
   max-height: 80vh;
 }
+.max-h-\[90vh\]{
+  max-height: 90vh;
+}
 .max-h-full{
   max-height: 100%;
 }
+.min-h-0{
+  min-height: 0px;
+}
+.min-h-\[220px\]{
+  min-height: 220px;
+}
 .min-h-\[500px\]{
   min-height: 500px;
 }
@@ -1472,6 +1484,9 @@ body {
 .w-4\/5{
   width: 80%;
 }
+.w-40{
+  width: 10rem;
+}
 .w-48{
   width: 12rem;
 }
@@ -1527,9 +1542,6 @@ body {
 .min-w-96{
   min-width: 24rem;
 }
-.min-w-\[120px\]{
-  min-width: 120px;
-}
 .min-w-\[14rem\]{
   min-width: 14rem;
 }
@@ -1629,9 +1641,6 @@ body {
 .origin-left{
   transform-origin: left;
 }
-.origin-top{
-  transform-origin: top;
-}
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1680,6 +1689,16 @@ body {
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.scale-100{
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.scale-95{
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .scale-x-0{
   --tw-scale-x: 0;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1822,6 +1841,9 @@ body {
 .gap-4{
   gap: 1rem;
 }
+.gap-6{
+  gap: 1.5rem;
+}
 .gap-8{
   gap: 2rem;
 }
@@ -1865,6 +1887,11 @@ body {
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.space-y-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
 .space-y-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2398,9 +2425,6 @@ body {
 .bg-opacity-70{
   --tw-bg-opacity: 0.7;
 }
-.bg-gradient-to-b{
-  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-}
 .bg-gradient-to-br{
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -2500,11 +2524,6 @@ body {
   --tw-gradient-to: rgb(6 148 162 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.from-transparent{
-  --tw-gradient-from: transparent var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
 .from-5\%{
   --tw-gradient-from-position: 5%;
 }
@@ -2548,10 +2567,6 @@ body {
   --tw-gradient-to: rgb(4 116 129 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #047481 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.via-transparent{
-  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
 .via-10\%{
   --tw-gradient-via-position: 10%;
 }
@@ -2609,9 +2624,6 @@ body {
 .to-transparent{
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
-.to-white{
-  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
-}
 .to-yellow-200{
   --tw-gradient-to: #FCE96A var(--tw-gradient-to-position);
 }
@@ -3515,6 +3527,9 @@ body {
 .scrollbar-track-bg-light-tone{
   --scrollbar-track: var(--color-bg-light-tone) !important;
 }
+.scrollbar-track-blue-100{
+  --scrollbar-track: #E1EFFE !important;
+}
 .scrollbar-track-gray-200{
   --scrollbar-track: #E5E7EB !important;
 }
@@ -3524,6 +3539,9 @@ body {
 .scrollbar-thumb-bg-light-tone-panel{
   --scrollbar-thumb: var(--color-bg-light-tone-panel) !important;
 }
+.scrollbar-thumb-blue-500{
+  --scrollbar-thumb: #3F83F8 !important;
+}
 .scrollbar-thumb-gray-400{
   --scrollbar-thumb: #9CA3AF !important;
 }
@@ -3954,6 +3972,45 @@ body{
   0% { background-position: -100% 0; }
   100% { background-position: 100% 0; }
 }
+.app-card{
+  border-radius: 0.75rem;
+  border-width: 1px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(225 239 254 / var(--tw-bg-opacity));
+  padding: 1.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(30 66 159 / var(--tw-text-opacity));
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-property: all;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+.app-card:hover{
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.app-card:is(.dark *){
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 66 159 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(225 239 254 / var(--tw-text-opacity));
+}
+.app-card:hover{
+  --tw-translate-y: -0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+button{
+  transition-property: all;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+button:hover{
+  --tw-translate-y: -0.125rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .scrollbar-thin {
   scrollbar-width: thin;
   scrollbar-color: #00ff00 #1a1a1a;
@@ -4224,9 +4281,6 @@ body{
 .group\/item:hover .group-hover\/item\:opacity-100{
   opacity: 1;
 }
-.group:hover .group-hover\:opacity-0{
-  opacity: 0;
-}
 .group:hover .group-hover\:opacity-100{
   opacity: 1;
 }
@@ -4453,6 +4507,11 @@ body{
   --tw-gradient-to: rgb(235 245 255 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.hover\:from-blue-500\/20:hover{
+  --tw-gradient-from: rgb(63 131 248 / 0.2) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .hover\:from-teal-200:hover{
   --tw-gradient-from: #AFECEF var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(175 236 239 / 0) var(--tw-gradient-to-position);
@@ -4464,6 +4523,9 @@ body{
 .hover\:to-purple-50:hover{
   --tw-gradient-to: #F6F5FF var(--tw-gradient-to-position);
 }
+.hover\:to-purple-500\/20:hover{
+  --tw-gradient-to: rgb(144 97 249 / 0.2) var(--tw-gradient-to-position);
+}
 .hover\:text-blue-600:hover{
   --tw-text-opacity: 1;
   color: rgb(28 100 242 / var(--tw-text-opacity));
@@ -4548,11 +4610,6 @@ body{
 .hover\:no-underline:hover{
   text-decoration-line: none;
 }
-.hover\:shadow-lg:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
 .hover\:shadow-md:hover{
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -5005,9 +5062,6 @@ body{
   --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--color-bg-dark) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.dark\:to-gray-800:is(.dark *){
-  --tw-gradient-to: #1F2937 var(--tw-gradient-to-position);
-}
 .dark\:to-purple-400:is(.dark *){
   --tw-gradient-to: #AC94FA var(--tw-gradient-to-position);
 }
@@ -5243,6 +5297,9 @@ body{
 .dark\:scrollbar-track-bg-dark-tone:is(.dark *){
   --scrollbar-track: var(--color-bg-dark-tone) !important;
 }
+.dark\:scrollbar-track-gray-700:is(.dark *){
+  --scrollbar-track: #374151 !important;
+}
 .dark\:scrollbar-track-gray-800:is(.dark *){
   --scrollbar-track: #1F2937 !important;
 }
@@ -5252,6 +5309,9 @@ body{
 .dark\:scrollbar-thumb-bg-dark-tone-panel:is(.dark *){
   --scrollbar-thumb: var(--color-bg-dark-tone-panel) !important;
 }
+.dark\:scrollbar-thumb-gray-500:is(.dark *){
+  --scrollbar-thumb: #6B7280 !important;
+}
 .dark\:scrollbar-thumb-gray-600:is(.dark *){
   --scrollbar-thumb: #4B5563 !important;
 }
@@ -5364,11 +5424,19 @@ body{
 .hover\:dark\:bg-bg-dark-tone-panel:is(.dark *):hover{
   background-color: var(--color-bg-dark-tone-panel);
 }
+.dark\:hover\:from-blue-400\/30:hover:is(.dark *){
+  --tw-gradient-from: rgb(118 169 250 / 0.3) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .dark\:hover\:from-blue-900\/30:hover:is(.dark *){
   --tw-gradient-from: rgb(35 56 118 / 0.3) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(35 56 118 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.dark\:hover\:to-purple-400\/30:hover:is(.dark *){
+  --tw-gradient-to: rgb(172 148 250 / 0.3) var(--tw-gradient-to-position);
+}
 .dark\:hover\:to-purple-900\/30:hover:is(.dark *){
   --tw-gradient-to: rgb(74 29 150 / 0.3) var(--tw-gradient-to-position);
 }
@@ -5697,3 +5765,17 @@ body{
     height: 24rem;
   }
 }
+
+
+
+
+
+
+
+
+
+
+
+
+
+

web/dist/themes/default.css

@@ -1235,6 +1235,12 @@ body {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 }
+.line-clamp-4{
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
 .block{
   display: block;
 }
@@ -1352,9 +1358,6 @@ body {
 .h-\[200px\]{
   height: 200px;
 }
-.h-\[220px\]{
-  height: 220px;
-}
 .h-auto{
   height: auto;
 }
@@ -1394,9 +1397,18 @@ body {
 .max-h-\[80vh\]{
   max-height: 80vh;
 }
+.max-h-\[90vh\]{
+  max-height: 90vh;
+}
 .max-h-full{
   max-height: 100%;
 }
+.min-h-0{
+  min-height: 0px;
+}
+.min-h-\[220px\]{
+  min-height: 220px;
+}
 .min-h-\[500px\]{
   min-height: 500px;
 }
@@ -1472,6 +1484,9 @@ body {
 .w-4\/5{
   width: 80%;
 }
+.w-40{
+  width: 10rem;
+}
 .w-48{
   width: 12rem;
 }
@@ -1527,9 +1542,6 @@ body {
 .min-w-96{
   min-width: 24rem;
 }
-.min-w-\[120px\]{
-  min-width: 120px;
-}
 .min-w-\[14rem\]{
   min-width: 14rem;
 }
@@ -1629,9 +1641,6 @@ body {
 .origin-left{
   transform-origin: left;
 }
-.origin-top{
-  transform-origin: top;
-}
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1680,6 +1689,16 @@ body {
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.scale-100{
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.scale-95{
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .scale-x-0{
   --tw-scale-x: 0;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1822,6 +1841,9 @@ body {
 .gap-4{
   gap: 1rem;
 }
+.gap-6{
+  gap: 1.5rem;
+}
 .gap-8{
   gap: 2rem;
 }
@@ -1865,6 +1887,11 @@ body {
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.space-y-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
 .space-y-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2398,9 +2425,6 @@ body {
 .bg-opacity-70{
   --tw-bg-opacity: 0.7;
 }
-.bg-gradient-to-b{
-  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-}
 .bg-gradient-to-br{
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -2500,11 +2524,6 @@ body {
   --tw-gradient-to: rgb(6 148 162 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.from-transparent{
-  --tw-gradient-from: transparent var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
 .from-5\%{
   --tw-gradient-from-position: 5%;
 }
@@ -2548,10 +2567,6 @@ body {
   --tw-gradient-to: rgb(4 116 129 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #047481 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.via-transparent{
-  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
 .via-10\%{
   --tw-gradient-via-position: 10%;
 }
@@ -2609,9 +2624,6 @@ body {
 .to-transparent{
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
-.to-white{
-  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
-}
 .to-yellow-200{
   --tw-gradient-to: #FCE96A var(--tw-gradient-to-position);
 }
@@ -3515,6 +3527,9 @@ body {
 .scrollbar-track-bg-light-tone{
   --scrollbar-track: var(--color-bg-light-tone) !important;
 }
+.scrollbar-track-blue-100{
+  --scrollbar-track: #E1EFFE !important;
+}
 .scrollbar-track-gray-200{
   --scrollbar-track: #E5E7EB !important;
 }
@@ -3524,6 +3539,9 @@ body {
 .scrollbar-thumb-bg-light-tone-panel{
   --scrollbar-thumb: var(--color-bg-light-tone-panel) !important;
 }
+.scrollbar-thumb-blue-500{
+  --scrollbar-thumb: #3F83F8 !important;
+}
 .scrollbar-thumb-gray-400{
   --scrollbar-thumb: #9CA3AF !important;
 }
@@ -4114,20 +4132,23 @@ body:is(.dark *){
   animation: bounce 2s infinite;
 }
 .app-card{
+  border-radius: 0.75rem;
+  border-width: 1px;
   --tw-bg-opacity: 1;
   background-color: rgb(225 239 254 / var(--tw-bg-opacity));
+  padding: 1.5rem;
   --tw-text-opacity: 1;
   color: rgb(30 66 159 / var(--tw-text-opacity));
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 .app-card:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .app-card:is(.dark *){
@@ -4636,9 +4657,6 @@ button:hover{
 .group\/item:hover .group-hover\/item\:opacity-100{
   opacity: 1;
 }
-.group:hover .group-hover\:opacity-0{
-  opacity: 0;
-}
 .group:hover .group-hover\:opacity-100{
   opacity: 1;
 }
@@ -4865,6 +4883,11 @@ button:hover{
   --tw-gradient-to: rgb(235 245 255 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.hover\:from-blue-500\/20:hover{
+  --tw-gradient-from: rgb(63 131 248 / 0.2) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .hover\:from-teal-200:hover{
   --tw-gradient-from: #AFECEF var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(175 236 239 / 0) var(--tw-gradient-to-position);
@@ -4876,6 +4899,9 @@ button:hover{
 .hover\:to-purple-50:hover{
   --tw-gradient-to: #F6F5FF var(--tw-gradient-to-position);
 }
+.hover\:to-purple-500\/20:hover{
+  --tw-gradient-to: rgb(144 97 249 / 0.2) var(--tw-gradient-to-position);
+}
 .hover\:text-blue-600:hover{
   --tw-text-opacity: 1;
   color: rgb(28 100 242 / var(--tw-text-opacity));
@@ -4960,11 +4986,6 @@ button:hover{
 .hover\:no-underline:hover{
   text-decoration-line: none;
 }
-.hover\:shadow-lg:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
 .hover\:shadow-md:hover{
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -5417,9 +5438,6 @@ button:hover{
   --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--color-bg-dark) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.dark\:to-gray-800:is(.dark *){
-  --tw-gradient-to: #1F2937 var(--tw-gradient-to-position);
-}
 .dark\:to-purple-400:is(.dark *){
   --tw-gradient-to: #AC94FA var(--tw-gradient-to-position);
 }
@@ -5655,6 +5673,9 @@ button:hover{
 .dark\:scrollbar-track-bg-dark-tone:is(.dark *){
   --scrollbar-track: var(--color-bg-dark-tone) !important;
 }
+.dark\:scrollbar-track-gray-700:is(.dark *){
+  --scrollbar-track: #374151 !important;
+}
 .dark\:scrollbar-track-gray-800:is(.dark *){
   --scrollbar-track: #1F2937 !important;
 }
@@ -5664,6 +5685,9 @@ button:hover{
 .dark\:scrollbar-thumb-bg-dark-tone-panel:is(.dark *){
   --scrollbar-thumb: var(--color-bg-dark-tone-panel) !important;
 }
+.dark\:scrollbar-thumb-gray-500:is(.dark *){
+  --scrollbar-thumb: #6B7280 !important;
+}
 .dark\:scrollbar-thumb-gray-600:is(.dark *){
   --scrollbar-thumb: #4B5563 !important;
 }
@@ -5776,11 +5800,19 @@ button:hover{
 .hover\:dark\:bg-bg-dark-tone-panel:is(.dark *):hover{
   background-color: var(--color-bg-dark-tone-panel);
 }
+.dark\:hover\:from-blue-400\/30:hover:is(.dark *){
+  --tw-gradient-from: rgb(118 169 250 / 0.3) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .dark\:hover\:from-blue-900\/30:hover:is(.dark *){
   --tw-gradient-from: rgb(35 56 118 / 0.3) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(35 56 118 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.dark\:hover\:to-purple-400\/30:hover:is(.dark *){
+  --tw-gradient-to: rgb(172 148 250 / 0.3) var(--tw-gradient-to-position);
+}
 .dark\:hover\:to-purple-900\/30:hover:is(.dark *){
   --tw-gradient-to: rgb(74 29 150 / 0.3) var(--tw-gradient-to-position);
 }

web/dist/themes/lollms_blue.css

@@ -1240,6 +1240,12 @@ html{
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 }
+.line-clamp-4{
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
 .block{
   display: block;
 }
@@ -1357,9 +1363,6 @@ html{
 .h-\[200px\]{
   height: 200px;
 }
-.h-\[220px\]{
-  height: 220px;
-}
 .h-auto{
   height: auto;
 }
@@ -1399,9 +1402,18 @@ html{
 .max-h-\[80vh\]{
   max-height: 80vh;
 }
+.max-h-\[90vh\]{
+  max-height: 90vh;
+}
 .max-h-full{
   max-height: 100%;
 }
+.min-h-0{
+  min-height: 0px;
+}
+.min-h-\[220px\]{
+  min-height: 220px;
+}
 .min-h-\[500px\]{
   min-height: 500px;
 }
@@ -1477,6 +1489,9 @@ html{
 .w-4\/5{
   width: 80%;
 }
+.w-40{
+  width: 10rem;
+}
 .w-48{
   width: 12rem;
 }
@@ -1532,9 +1547,6 @@ html{
 .min-w-96{
   min-width: 24rem;
 }
-.min-w-\[120px\]{
-  min-width: 120px;
-}
 .min-w-\[14rem\]{
   min-width: 14rem;
 }
@@ -1634,9 +1646,6 @@ html{
 .origin-left{
   transform-origin: left;
 }
-.origin-top{
-  transform-origin: top;
-}
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1685,6 +1694,16 @@ html{
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.scale-100{
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.scale-95{
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .scale-x-0{
   --tw-scale-x: 0;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1827,6 +1846,9 @@ html{
 .gap-4{
   gap: 1rem;
 }
+.gap-6{
+  gap: 1.5rem;
+}
 .gap-8{
   gap: 2rem;
 }
@@ -1870,6 +1892,11 @@ html{
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.space-y-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
 .space-y-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2403,9 +2430,6 @@ html{
 .bg-opacity-70{
   --tw-bg-opacity: 0.7;
 }
-.bg-gradient-to-b{
-  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-}
 .bg-gradient-to-br{
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -2505,11 +2529,6 @@ html{
   --tw-gradient-to: rgb(6 148 162 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.from-transparent{
-  --tw-gradient-from: transparent var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
 .from-5\%{
   --tw-gradient-from-position: 5%;
 }
@@ -2553,10 +2572,6 @@ html{
   --tw-gradient-to: rgb(4 116 129 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #047481 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.via-transparent{
-  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
 .via-10\%{
   --tw-gradient-via-position: 10%;
 }
@@ -2614,9 +2629,6 @@ html{
 .to-transparent{
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
-.to-white{
-  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
-}
 .to-yellow-200{
   --tw-gradient-to: #FCE96A var(--tw-gradient-to-position);
 }
@@ -3520,6 +3532,9 @@ html{
 .scrollbar-track-bg-light-tone{
   --scrollbar-track: var(--color-bg-light-tone) !important;
 }
+.scrollbar-track-blue-100{
+  --scrollbar-track: #E1EFFE !important;
+}
 .scrollbar-track-gray-200{
   --scrollbar-track: #E5E7EB !important;
 }
@@ -3529,6 +3544,9 @@ html{
 .scrollbar-thumb-bg-light-tone-panel{
   --scrollbar-thumb: var(--color-bg-light-tone-panel) !important;
 }
+.scrollbar-thumb-blue-500{
+  --scrollbar-thumb: #3F83F8 !important;
+}
 .scrollbar-thumb-gray-400{
   --scrollbar-thumb: #9CA3AF !important;
 }
@@ -4174,23 +4192,26 @@ body { /* Added text-base for default body text */
   }
 }
 .app-card{
+  border-radius: 0.75rem;
+  border-width: 1px;
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
   --tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
   --tw-gradient-to: #A4CAFE var(--tw-gradient-to-position);
+  padding: 1.5rem;
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity));
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 .app-card:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .app-card:is(.dark *){
@@ -4703,9 +4724,6 @@ button:hover{
 .group\/item:hover .group-hover\/item\:opacity-100{
   opacity: 1;
 }
-.group:hover .group-hover\:opacity-0{
-  opacity: 0;
-}
 .group:hover .group-hover\:opacity-100{
   opacity: 1;
 }
@@ -4932,6 +4950,11 @@ button:hover{
   --tw-gradient-to: rgb(235 245 255 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.hover\:from-blue-500\/20:hover{
+  --tw-gradient-from: rgb(63 131 248 / 0.2) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .hover\:from-teal-200:hover{
   --tw-gradient-from: #AFECEF var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(175 236 239 / 0) var(--tw-gradient-to-position);
@@ -4943,6 +4966,9 @@ button:hover{
 .hover\:to-purple-50:hover{
   --tw-gradient-to: #F6F5FF var(--tw-gradient-to-position);
 }
+.hover\:to-purple-500\/20:hover{
+  --tw-gradient-to: rgb(144 97 249 / 0.2) var(--tw-gradient-to-position);
+}
 .hover\:text-blue-600:hover{
   --tw-text-opacity: 1;
   color: rgb(28 100 242 / var(--tw-text-opacity));
@@ -5027,11 +5053,6 @@ button:hover{
 .hover\:no-underline:hover{
   text-decoration-line: none;
 }
-.hover\:shadow-lg:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
 .hover\:shadow-md:hover{
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -5484,9 +5505,6 @@ button:hover{
   --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--color-bg-dark) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.dark\:to-gray-800:is(.dark *){
-  --tw-gradient-to: #1F2937 var(--tw-gradient-to-position);
-}
 .dark\:to-purple-400:is(.dark *){
   --tw-gradient-to: #AC94FA var(--tw-gradient-to-position);
 }
@@ -5722,6 +5740,9 @@ button:hover{
 .dark\:scrollbar-track-bg-dark-tone:is(.dark *){
   --scrollbar-track: var(--color-bg-dark-tone) !important;
 }
+.dark\:scrollbar-track-gray-700:is(.dark *){
+  --scrollbar-track: #374151 !important;
+}
 .dark\:scrollbar-track-gray-800:is(.dark *){
   --scrollbar-track: #1F2937 !important;
 }
@@ -5731,6 +5752,9 @@ button:hover{
 .dark\:scrollbar-thumb-bg-dark-tone-panel:is(.dark *){
   --scrollbar-thumb: var(--color-bg-dark-tone-panel) !important;
 }
+.dark\:scrollbar-thumb-gray-500:is(.dark *){
+  --scrollbar-thumb: #6B7280 !important;
+}
 .dark\:scrollbar-thumb-gray-600:is(.dark *){
   --scrollbar-thumb: #4B5563 !important;
 }
@@ -5843,11 +5867,19 @@ button:hover{
 .hover\:dark\:bg-bg-dark-tone-panel:is(.dark *):hover{
   background-color: var(--color-bg-dark-tone-panel);
 }
+.dark\:hover\:from-blue-400\/30:hover:is(.dark *){
+  --tw-gradient-from: rgb(118 169 250 / 0.3) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .dark\:hover\:from-blue-900\/30:hover:is(.dark *){
   --tw-gradient-from: rgb(35 56 118 / 0.3) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(35 56 118 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.dark\:hover\:to-purple-400\/30:hover:is(.dark *){
+  --tw-gradient-to: rgb(172 148 250 / 0.3) var(--tw-gradient-to-position);
+}
 .dark\:hover\:to-purple-900\/30:hover:is(.dark *){
   --tw-gradient-to: rgb(74 29 150 / 0.3) var(--tw-gradient-to-position);
 }

web/dist/themes/matrix_reborn.css

@@ -1509,6 +1509,13 @@ body {
   -webkit-line-clamp: 3;
 }
 
+.line-clamp-4{
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
+
 .block{
   display: block;
 }
@@ -1665,10 +1672,6 @@ body {
   height: 200px;
 }
 
-.h-\[220px\]{
-  height: 220px;
-}
-
 .h-auto{
   height: auto;
 }
@@ -1721,10 +1724,22 @@ body {
   max-height: 80vh;
 }
 
+.max-h-\[90vh\]{
+  max-height: 90vh;
+}
+
 .max-h-full{
   max-height: 100%;
 }
 
+.min-h-0{
+  min-height: 0px;
+}
+
+.min-h-\[220px\]{
+  min-height: 220px;
+}
+
 .min-h-\[500px\]{
   min-height: 500px;
 }
@@ -1825,6 +1840,10 @@ body {
   width: 80%;
 }
 
+.w-40{
+  width: 10rem;
+}
+
 .w-48{
   width: 12rem;
 }
@@ -1898,10 +1917,6 @@ body {
   min-width: 24rem;
 }
 
-.min-w-\[120px\]{
-  min-width: 120px;
-}
-
 .min-w-\[14rem\]{
   min-width: 14rem;
 }
@@ -2034,10 +2049,6 @@ body {
   transform-origin: left;
 }
 
-.origin-top{
-  transform-origin: top;
-}
-
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2098,6 +2109,18 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.scale-100{
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.scale-95{
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .scale-x-0{
   --tw-scale-x: 0;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2286,6 +2309,10 @@ body {
   gap: 1rem;
 }
 
+.gap-6{
+  gap: 1.5rem;
+}
+
 .gap-8{
   gap: 2rem;
 }
@@ -2338,6 +2365,12 @@ body {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
+.space-y-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -3016,10 +3049,6 @@ body {
   --tw-bg-opacity: 0.7;
 }
 
-.bg-gradient-to-b{
-  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-}
-
 .bg-gradient-to-br{
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -3140,12 +3169,6 @@ body {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-transparent{
-  --tw-gradient-from: transparent var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
 .from-5\%{
   --tw-gradient-from-position: 5%;
 }
@@ -3200,11 +3223,6 @@ body {
   --tw-gradient-stops: var(--tw-gradient-from), #047481 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
-.via-transparent{
-  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
-
 .via-10\%{
   --tw-gradient-via-position: 10%;
 }
@@ -3281,10 +3299,6 @@ body {
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
 
-.to-white{
-  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
-}
-
 .to-yellow-200{
   --tw-gradient-to: #FCE96A var(--tw-gradient-to-position);
 }
@@ -4435,6 +4449,10 @@ body {
   --scrollbar-track: var(--color-bg-light-tone) !important;
 }
 
+.scrollbar-track-blue-100{
+  --scrollbar-track: #E1EFFE !important;
+}
+
 .scrollbar-track-gray-200{
   --scrollbar-track: #E5E7EB !important;
 }
@@ -4447,6 +4465,10 @@ body {
   --scrollbar-thumb: var(--color-bg-light-tone-panel) !important;
 }
 
+.scrollbar-thumb-blue-500{
+  --scrollbar-thumb: #3F83F8 !important;
+}
+
 .scrollbar-thumb-gray-400{
   --scrollbar-thumb: #9CA3AF !important;
 }
@@ -5162,15 +5184,17 @@ body:is(.dark *){
 }
 
 .app-card{
+  border-radius: 0.75rem;
   border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(14 159 110 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  padding: 1.5rem;
   --tw-text-opacity: 1;
   color: rgb(49 196 141 / var(--tw-text-opacity));
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   transition-property: all;
   transition-duration: 300ms;
@@ -5178,8 +5202,8 @@ body:is(.dark *){
 }
 
 .app-card:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
@@ -5783,10 +5807,6 @@ button:hover{
   opacity: 1;
 }
 
-.group:hover .group-hover\:opacity-0{
-  opacity: 0;
-}
-
 .group:hover .group-hover\:opacity-100{
   opacity: 1;
 }
@@ -6073,6 +6093,12 @@ button:hover{
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.hover\:from-blue-500\/20:hover{
+  --tw-gradient-from: rgb(63 131 248 / 0.2) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .hover\:from-teal-200:hover{
   --tw-gradient-from: #AFECEF var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(175 236 239 / 0) var(--tw-gradient-to-position);
@@ -6087,6 +6113,10 @@ button:hover{
   --tw-gradient-to: #F6F5FF var(--tw-gradient-to-position);
 }
 
+.hover\:to-purple-500\/20:hover{
+  --tw-gradient-to: rgb(144 97 249 / 0.2) var(--tw-gradient-to-position);
+}
+
 .hover\:text-blue-600:hover{
   --tw-text-opacity: 1;
   color: rgb(28 100 242 / var(--tw-text-opacity));
@@ -6193,12 +6223,6 @@ button:hover{
   text-decoration-line: none;
 }
 
-.hover\:shadow-lg:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .hover\:shadow-md:hover{
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -6765,10 +6789,6 @@ button:hover{
   --tw-gradient-stops: var(--tw-gradient-from), var(--color-bg-dark) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
-.dark\:to-gray-800:is(.dark *){
-  --tw-gradient-to: #1F2937 var(--tw-gradient-to-position);
-}
-
 .dark\:to-purple-400:is(.dark *){
   --tw-gradient-to: #AC94FA var(--tw-gradient-to-position);
 }
@@ -7065,6 +7085,10 @@ button:hover{
   --scrollbar-track: var(--color-bg-dark-tone) !important;
 }
 
+.dark\:scrollbar-track-gray-700:is(.dark *){
+  --scrollbar-track: #374151 !important;
+}
+
 .dark\:scrollbar-track-gray-800:is(.dark *){
   --scrollbar-track: #1F2937 !important;
 }
@@ -7077,6 +7101,10 @@ button:hover{
   --scrollbar-thumb: var(--color-bg-dark-tone-panel) !important;
 }
 
+.dark\:scrollbar-thumb-gray-500:is(.dark *){
+  --scrollbar-thumb: #6B7280 !important;
+}
+
 .dark\:scrollbar-thumb-gray-600:is(.dark *){
   --scrollbar-thumb: #4B5563 !important;
 }
@@ -7219,12 +7247,22 @@ button:hover{
   background-color: var(--color-bg-dark-tone-panel);
 }
 
+.dark\:hover\:from-blue-400\/30:hover:is(.dark *){
+  --tw-gradient-from: rgb(118 169 250 / 0.3) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .dark\:hover\:from-blue-900\/30:hover:is(.dark *){
   --tw-gradient-from: rgb(35 56 118 / 0.3) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(35 56 118 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.dark\:hover\:to-purple-400\/30:hover:is(.dark *){
+  --tw-gradient-to: rgb(172 148 250 / 0.3) var(--tw-gradient-to-position);
+}
+
 .dark\:hover\:to-purple-900\/30:hover:is(.dark *){
   --tw-gradient-to: rgb(74 29 150 / 0.3) var(--tw-gradient-to-position);
 }

web/dist/themes/red_dragon.css

@@ -1509,6 +1509,13 @@ body {
   -webkit-line-clamp: 3;
 }
 
+.line-clamp-4{
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
+
 .block{
   display: block;
 }
@@ -1665,10 +1672,6 @@ body {
   height: 200px;
 }
 
-.h-\[220px\]{
-  height: 220px;
-}
-
 .h-auto{
   height: auto;
 }
@@ -1721,10 +1724,22 @@ body {
   max-height: 80vh;
 }
 
+.max-h-\[90vh\]{
+  max-height: 90vh;
+}
+
 .max-h-full{
   max-height: 100%;
 }
 
+.min-h-0{
+  min-height: 0px;
+}
+
+.min-h-\[220px\]{
+  min-height: 220px;
+}
+
 .min-h-\[500px\]{
   min-height: 500px;
 }
@@ -1825,6 +1840,10 @@ body {
   width: 80%;
 }
 
+.w-40{
+  width: 10rem;
+}
+
 .w-48{
   width: 12rem;
 }
@@ -1898,10 +1917,6 @@ body {
   min-width: 24rem;
 }
 
-.min-w-\[120px\]{
-  min-width: 120px;
-}
-
 .min-w-\[14rem\]{
   min-width: 14rem;
 }
@@ -2034,10 +2049,6 @@ body {
   transform-origin: left;
 }
 
-.origin-top{
-  transform-origin: top;
-}
-
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2098,6 +2109,18 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.scale-100{
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.scale-95{
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .scale-x-0{
   --tw-scale-x: 0;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2286,6 +2309,10 @@ body {
   gap: 1rem;
 }
 
+.gap-6{
+  gap: 1.5rem;
+}
+
 .gap-8{
   gap: 2rem;
 }
@@ -2338,6 +2365,12 @@ body {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
+.space-y-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -3016,10 +3049,6 @@ body {
   --tw-bg-opacity: 0.7;
 }
 
-.bg-gradient-to-b{
-  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-}
-
 .bg-gradient-to-br{
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -3140,12 +3169,6 @@ body {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-transparent{
-  --tw-gradient-from: transparent var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
 .from-5\%{
   --tw-gradient-from-position: 5%;
 }
@@ -3200,11 +3223,6 @@ body {
   --tw-gradient-stops: var(--tw-gradient-from), #047481 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
-.via-transparent{
-  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
-
 .via-10\%{
   --tw-gradient-via-position: 10%;
 }
@@ -3281,10 +3299,6 @@ body {
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
 
-.to-white{
-  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
-}
-
 .to-yellow-200{
   --tw-gradient-to: #FCE96A var(--tw-gradient-to-position);
 }
@@ -4435,6 +4449,10 @@ body {
   --scrollbar-track: var(--color-bg-light-tone) !important;
 }
 
+.scrollbar-track-blue-100{
+  --scrollbar-track: #E1EFFE !important;
+}
+
 .scrollbar-track-gray-200{
   --scrollbar-track: #E5E7EB !important;
 }
@@ -4447,6 +4465,10 @@ body {
   --scrollbar-thumb: var(--color-bg-light-tone-panel) !important;
 }
 
+.scrollbar-thumb-blue-500{
+  --scrollbar-thumb: #3F83F8 !important;
+}
+
 .scrollbar-thumb-gray-400{
   --scrollbar-thumb: #9CA3AF !important;
 }
@@ -5126,12 +5148,15 @@ body:is(.dark *){
 }
 
 .app-card{
+  border-radius: 0.75rem;
+  border-width: 1px;
   --tw-bg-opacity: 1;
   background-color: rgb(253 232 232 / var(--tw-bg-opacity));
+  padding: 1.5rem;
   --tw-text-opacity: 1;
   color: rgb(155 28 28 / var(--tw-text-opacity));
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   transition-property: all;
   transition-duration: 300ms;
@@ -5139,8 +5164,8 @@ body:is(.dark *){
 }
 
 .app-card:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
@@ -5752,10 +5777,6 @@ button:hover{
   opacity: 1;
 }
 
-.group:hover .group-hover\:opacity-0{
-  opacity: 0;
-}
-
 .group:hover .group-hover\:opacity-100{
   opacity: 1;
 }
@@ -6042,6 +6063,12 @@ button:hover{
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.hover\:from-blue-500\/20:hover{
+  --tw-gradient-from: rgb(63 131 248 / 0.2) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .hover\:from-teal-200:hover{
   --tw-gradient-from: #AFECEF var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(175 236 239 / 0) var(--tw-gradient-to-position);
@@ -6056,6 +6083,10 @@ button:hover{
   --tw-gradient-to: #F6F5FF var(--tw-gradient-to-position);
 }
 
+.hover\:to-purple-500\/20:hover{
+  --tw-gradient-to: rgb(144 97 249 / 0.2) var(--tw-gradient-to-position);
+}
+
 .hover\:text-blue-600:hover{
   --tw-text-opacity: 1;
   color: rgb(28 100 242 / var(--tw-text-opacity));
@@ -6162,12 +6193,6 @@ button:hover{
   text-decoration-line: none;
 }
 
-.hover\:shadow-lg:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .hover\:shadow-md:hover{
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -6734,10 +6759,6 @@ button:hover{
   --tw-gradient-stops: var(--tw-gradient-from), var(--color-bg-dark) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
-.dark\:to-gray-800:is(.dark *){
-  --tw-gradient-to: #1F2937 var(--tw-gradient-to-position);
-}
-
 .dark\:to-purple-400:is(.dark *){
   --tw-gradient-to: #AC94FA var(--tw-gradient-to-position);
 }
@@ -7034,6 +7055,10 @@ button:hover{
   --scrollbar-track: var(--color-bg-dark-tone) !important;
 }
 
+.dark\:scrollbar-track-gray-700:is(.dark *){
+  --scrollbar-track: #374151 !important;
+}
+
 .dark\:scrollbar-track-gray-800:is(.dark *){
   --scrollbar-track: #1F2937 !important;
 }
@@ -7046,6 +7071,10 @@ button:hover{
   --scrollbar-thumb: var(--color-bg-dark-tone-panel) !important;
 }
 
+.dark\:scrollbar-thumb-gray-500:is(.dark *){
+  --scrollbar-thumb: #6B7280 !important;
+}
+
 .dark\:scrollbar-thumb-gray-600:is(.dark *){
   --scrollbar-thumb: #4B5563 !important;
 }
@@ -7188,12 +7217,22 @@ button:hover{
   background-color: var(--color-bg-dark-tone-panel);
 }
 
+.dark\:hover\:from-blue-400\/30:hover:is(.dark *){
+  --tw-gradient-from: rgb(118 169 250 / 0.3) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .dark\:hover\:from-blue-900\/30:hover:is(.dark *){
   --tw-gradient-from: rgb(35 56 118 / 0.3) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(35 56 118 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.dark\:hover\:to-purple-400\/30:hover:is(.dark *){
+  --tw-gradient-to: rgb(172 148 250 / 0.3) var(--tw-gradient-to-position);
+}
+
 .dark\:hover\:to-purple-900\/30:hover:is(.dark *){
   --tw-gradient-to: rgb(74 29 150 / 0.3) var(--tw-gradient-to-position);
 }

web/dist/themes/sober_gray.css

@@ -1235,6 +1235,12 @@ body {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 }
+.line-clamp-4{
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
 .block{
   display: block;
 }
@@ -1352,9 +1358,6 @@ body {
 .h-\[200px\]{
   height: 200px;
 }
-.h-\[220px\]{
-  height: 220px;
-}
 .h-auto{
   height: auto;
 }
@@ -1394,9 +1397,18 @@ body {
 .max-h-\[80vh\]{
   max-height: 80vh;
 }
+.max-h-\[90vh\]{
+  max-height: 90vh;
+}
 .max-h-full{
   max-height: 100%;
 }
+.min-h-0{
+  min-height: 0px;
+}
+.min-h-\[220px\]{
+  min-height: 220px;
+}
 .min-h-\[500px\]{
   min-height: 500px;
 }
@@ -1472,6 +1484,9 @@ body {
 .w-4\/5{
   width: 80%;
 }
+.w-40{
+  width: 10rem;
+}
 .w-48{
   width: 12rem;
 }
@@ -1527,9 +1542,6 @@ body {
 .min-w-96{
   min-width: 24rem;
 }
-.min-w-\[120px\]{
-  min-width: 120px;
-}
 .min-w-\[14rem\]{
   min-width: 14rem;
 }
@@ -1629,9 +1641,6 @@ body {
 .origin-left{
   transform-origin: left;
 }
-.origin-top{
-  transform-origin: top;
-}
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1680,6 +1689,16 @@ body {
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.scale-100{
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.scale-95{
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .scale-x-0{
   --tw-scale-x: 0;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1822,6 +1841,9 @@ body {
 .gap-4{
   gap: 1rem;
 }
+.gap-6{
+  gap: 1.5rem;
+}
 .gap-8{
   gap: 2rem;
 }
@@ -1865,6 +1887,11 @@ body {
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.space-y-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
 .space-y-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2398,9 +2425,6 @@ body {
 .bg-opacity-70{
   --tw-bg-opacity: 0.7;
 }
-.bg-gradient-to-b{
-  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-}
 .bg-gradient-to-br{
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -2500,11 +2524,6 @@ body {
   --tw-gradient-to: rgb(6 148 162 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.from-transparent{
-  --tw-gradient-from: transparent var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
 .from-5\%{
   --tw-gradient-from-position: 5%;
 }
@@ -2548,10 +2567,6 @@ body {
   --tw-gradient-to: rgb(4 116 129 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #047481 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.via-transparent{
-  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
 .via-10\%{
   --tw-gradient-via-position: 10%;
 }
@@ -2609,9 +2624,6 @@ body {
 .to-transparent{
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
-.to-white{
-  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
-}
 .to-yellow-200{
   --tw-gradient-to: #FCE96A var(--tw-gradient-to-position);
 }
@@ -3515,6 +3527,9 @@ body {
 .scrollbar-track-bg-light-tone{
   --scrollbar-track: var(--color-bg-light-tone) !important;
 }
+.scrollbar-track-blue-100{
+  --scrollbar-track: #E1EFFE !important;
+}
 .scrollbar-track-gray-200{
   --scrollbar-track: #E5E7EB !important;
 }
@@ -3524,6 +3539,9 @@ body {
 .scrollbar-thumb-bg-light-tone-panel{
   --scrollbar-thumb: var(--color-bg-light-tone-panel) !important;
 }
+.scrollbar-thumb-blue-500{
+  --scrollbar-thumb: #3F83F8 !important;
+}
 .scrollbar-thumb-gray-400{
   --scrollbar-thumb: #9CA3AF !important;
 }
@@ -4106,20 +4124,23 @@ body:is(.dark *){
   animation: bounce 2s infinite;
 }
 .app-card{
+  border-radius: 0.75rem;
+  border-width: 1px;
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  padding: 1.5rem;
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity));
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 .app-card:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .app-card:is(.dark *){
@@ -4629,9 +4650,6 @@ button:hover{
 .group\/item:hover .group-hover\/item\:opacity-100{
   opacity: 1;
 }
-.group:hover .group-hover\:opacity-0{
-  opacity: 0;
-}
 .group:hover .group-hover\:opacity-100{
   opacity: 1;
 }
@@ -4858,6 +4876,11 @@ button:hover{
   --tw-gradient-to: rgb(235 245 255 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.hover\:from-blue-500\/20:hover{
+  --tw-gradient-from: rgb(63 131 248 / 0.2) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .hover\:from-teal-200:hover{
   --tw-gradient-from: #AFECEF var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(175 236 239 / 0) var(--tw-gradient-to-position);
@@ -4869,6 +4892,9 @@ button:hover{
 .hover\:to-purple-50:hover{
   --tw-gradient-to: #F6F5FF var(--tw-gradient-to-position);
 }
+.hover\:to-purple-500\/20:hover{
+  --tw-gradient-to: rgb(144 97 249 / 0.2) var(--tw-gradient-to-position);
+}
 .hover\:text-blue-600:hover{
   --tw-text-opacity: 1;
   color: rgb(28 100 242 / var(--tw-text-opacity));
@@ -4953,11 +4979,6 @@ button:hover{
 .hover\:no-underline:hover{
   text-decoration-line: none;
 }
-.hover\:shadow-lg:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
 .hover\:shadow-md:hover{
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -5410,9 +5431,6 @@ button:hover{
   --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--color-bg-dark) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.dark\:to-gray-800:is(.dark *){
-  --tw-gradient-to: #1F2937 var(--tw-gradient-to-position);
-}
 .dark\:to-purple-400:is(.dark *){
   --tw-gradient-to: #AC94FA var(--tw-gradient-to-position);
 }
@@ -5648,6 +5666,9 @@ button:hover{
 .dark\:scrollbar-track-bg-dark-tone:is(.dark *){
   --scrollbar-track: var(--color-bg-dark-tone) !important;
 }
+.dark\:scrollbar-track-gray-700:is(.dark *){
+  --scrollbar-track: #374151 !important;
+}
 .dark\:scrollbar-track-gray-800:is(.dark *){
   --scrollbar-track: #1F2937 !important;
 }
@@ -5657,6 +5678,9 @@ button:hover{
 .dark\:scrollbar-thumb-bg-dark-tone-panel:is(.dark *){
   --scrollbar-thumb: var(--color-bg-dark-tone-panel) !important;
 }
+.dark\:scrollbar-thumb-gray-500:is(.dark *){
+  --scrollbar-thumb: #6B7280 !important;
+}
 .dark\:scrollbar-thumb-gray-600:is(.dark *){
   --scrollbar-thumb: #4B5563 !important;
 }
@@ -5769,11 +5793,19 @@ button:hover{
 .hover\:dark\:bg-bg-dark-tone-panel:is(.dark *):hover{
   background-color: var(--color-bg-dark-tone-panel);
 }
+.dark\:hover\:from-blue-400\/30:hover:is(.dark *){
+  --tw-gradient-from: rgb(118 169 250 / 0.3) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .dark\:hover\:from-blue-900\/30:hover:is(.dark *){
   --tw-gradient-from: rgb(35 56 118 / 0.3) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(35 56 118 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.dark\:hover\:to-purple-400\/30:hover:is(.dark *){
+  --tw-gradient-to: rgb(172 148 250 / 0.3) var(--tw-gradient-to-position);
+}
 .dark\:hover\:to-purple-900\/30:hover:is(.dark *){
   --tw-gradient-to: rgb(74 29 150 / 0.3) var(--tw-gradient-to-position);
 }

web/dist/themes/strawberry.css

@@ -1240,6 +1240,12 @@ html{
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 }
+.line-clamp-4{
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
 .block{
   display: block;
 }
@@ -1357,9 +1363,6 @@ html{
 .h-\[200px\]{
   height: 200px;
 }
-.h-\[220px\]{
-  height: 220px;
-}
 .h-auto{
   height: auto;
 }
@@ -1399,9 +1402,18 @@ html{
 .max-h-\[80vh\]{
   max-height: 80vh;
 }
+.max-h-\[90vh\]{
+  max-height: 90vh;
+}
 .max-h-full{
   max-height: 100%;
 }
+.min-h-0{
+  min-height: 0px;
+}
+.min-h-\[220px\]{
+  min-height: 220px;
+}
 .min-h-\[500px\]{
   min-height: 500px;
 }
@@ -1477,6 +1489,9 @@ html{
 .w-4\/5{
   width: 80%;
 }
+.w-40{
+  width: 10rem;
+}
 .w-48{
   width: 12rem;
 }
@@ -1532,9 +1547,6 @@ html{
 .min-w-96{
   min-width: 24rem;
 }
-.min-w-\[120px\]{
-  min-width: 120px;
-}
 .min-w-\[14rem\]{
   min-width: 14rem;
 }
@@ -1634,9 +1646,6 @@ html{
 .origin-left{
   transform-origin: left;
 }
-.origin-top{
-  transform-origin: top;
-}
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1685,6 +1694,16 @@ html{
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.scale-100{
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.scale-95{
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .scale-x-0{
   --tw-scale-x: 0;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1827,6 +1846,9 @@ html{
 .gap-4{
   gap: 1rem;
 }
+.gap-6{
+  gap: 1.5rem;
+}
 .gap-8{
   gap: 2rem;
 }
@@ -1870,6 +1892,11 @@ html{
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.space-y-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
 .space-y-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2403,9 +2430,6 @@ html{
 .bg-opacity-70{
   --tw-bg-opacity: 0.7;
 }
-.bg-gradient-to-b{
-  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-}
 .bg-gradient-to-br{
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -2505,11 +2529,6 @@ html{
   --tw-gradient-to: rgb(6 148 162 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.from-transparent{
-  --tw-gradient-from: transparent var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
 .from-5\%{
   --tw-gradient-from-position: 5%;
 }
@@ -2553,10 +2572,6 @@ html{
   --tw-gradient-to: rgb(4 116 129 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #047481 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.via-transparent{
-  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
 .via-10\%{
   --tw-gradient-via-position: 10%;
 }
@@ -2614,9 +2629,6 @@ html{
 .to-transparent{
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
-.to-white{
-  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
-}
 .to-yellow-200{
   --tw-gradient-to: #FCE96A var(--tw-gradient-to-position);
 }
@@ -3520,6 +3532,9 @@ html{
 .scrollbar-track-bg-light-tone{
   --scrollbar-track: var(--color-bg-light-tone) !important;
 }
+.scrollbar-track-blue-100{
+  --scrollbar-track: #E1EFFE !important;
+}
 .scrollbar-track-gray-200{
   --scrollbar-track: #E5E7EB !important;
 }
@@ -3529,6 +3544,9 @@ html{
 .scrollbar-thumb-bg-light-tone-panel{
   --scrollbar-thumb: var(--color-bg-light-tone-panel) !important;
 }
+.scrollbar-thumb-blue-500{
+  --scrollbar-thumb: #3F83F8 !important;
+}
 .scrollbar-thumb-gray-400{
   --scrollbar-thumb: #9CA3AF !important;
 }
@@ -4194,23 +4212,26 @@ body { /* Added text-base for default body text */
   }
 }
 .app-card{
+  border-radius: 0.75rem;
+  border-width: 1px;
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
   --tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
   --tw-gradient-to: #A4CAFE var(--tw-gradient-to-position);
+  padding: 1.5rem;
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity));
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 .app-card:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .app-card:is(.dark *){
@@ -4724,9 +4745,6 @@ button:hover{
 .group\/item:hover .group-hover\/item\:opacity-100{
   opacity: 1;
 }
-.group:hover .group-hover\:opacity-0{
-  opacity: 0;
-}
 .group:hover .group-hover\:opacity-100{
   opacity: 1;
 }
@@ -4953,6 +4971,11 @@ button:hover{
   --tw-gradient-to: rgb(235 245 255 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.hover\:from-blue-500\/20:hover{
+  --tw-gradient-from: rgb(63 131 248 / 0.2) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .hover\:from-teal-200:hover{
   --tw-gradient-from: #AFECEF var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(175 236 239 / 0) var(--tw-gradient-to-position);
@@ -4964,6 +4987,9 @@ button:hover{
 .hover\:to-purple-50:hover{
   --tw-gradient-to: #F6F5FF var(--tw-gradient-to-position);
 }
+.hover\:to-purple-500\/20:hover{
+  --tw-gradient-to: rgb(144 97 249 / 0.2) var(--tw-gradient-to-position);
+}
 .hover\:text-blue-600:hover{
   --tw-text-opacity: 1;
   color: rgb(28 100 242 / var(--tw-text-opacity));
@@ -5048,11 +5074,6 @@ button:hover{
 .hover\:no-underline:hover{
   text-decoration-line: none;
 }
-.hover\:shadow-lg:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
 .hover\:shadow-md:hover{
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -5505,9 +5526,6 @@ button:hover{
   --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--color-bg-dark) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.dark\:to-gray-800:is(.dark *){
-  --tw-gradient-to: #1F2937 var(--tw-gradient-to-position);
-}
 .dark\:to-purple-400:is(.dark *){
   --tw-gradient-to: #AC94FA var(--tw-gradient-to-position);
 }
@@ -5743,6 +5761,9 @@ button:hover{
 .dark\:scrollbar-track-bg-dark-tone:is(.dark *){
   --scrollbar-track: var(--color-bg-dark-tone) !important;
 }
+.dark\:scrollbar-track-gray-700:is(.dark *){
+  --scrollbar-track: #374151 !important;
+}
 .dark\:scrollbar-track-gray-800:is(.dark *){
   --scrollbar-track: #1F2937 !important;
 }
@@ -5752,6 +5773,9 @@ button:hover{
 .dark\:scrollbar-thumb-bg-dark-tone-panel:is(.dark *){
   --scrollbar-thumb: var(--color-bg-dark-tone-panel) !important;
 }
+.dark\:scrollbar-thumb-gray-500:is(.dark *){
+  --scrollbar-thumb: #6B7280 !important;
+}
 .dark\:scrollbar-thumb-gray-600:is(.dark *){
   --scrollbar-thumb: #4B5563 !important;
 }
@@ -5864,11 +5888,19 @@ button:hover{
 .hover\:dark\:bg-bg-dark-tone-panel:is(.dark *):hover{
   background-color: var(--color-bg-dark-tone-panel);
 }
+.dark\:hover\:from-blue-400\/30:hover:is(.dark *){
+  --tw-gradient-from: rgb(118 169 250 / 0.3) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .dark\:hover\:from-blue-900\/30:hover:is(.dark *){
   --tw-gradient-from: rgb(35 56 118 / 0.3) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(35 56 118 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.dark\:hover\:to-purple-400\/30:hover:is(.dark *){
+  --tw-gradient-to: rgb(172 148 250 / 0.3) var(--tw-gradient-to-position);
+}
 .dark\:hover\:to-purple-900\/30:hover:is(.dark *){
   --tw-gradient-to: rgb(74 29 150 / 0.3) var(--tw-gradient-to-position);
 }

web/dist/themes/strawberry_milkshake.css

@@ -1509,6 +1509,13 @@ body {
   -webkit-line-clamp: 3;
 }
 
+.line-clamp-4{
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
+
 .block{
   display: block;
 }
@@ -1665,10 +1672,6 @@ body {
   height: 200px;
 }
 
-.h-\[220px\]{
-  height: 220px;
-}
-
 .h-auto{
   height: auto;
 }
@@ -1721,10 +1724,22 @@ body {
   max-height: 80vh;
 }
 
+.max-h-\[90vh\]{
+  max-height: 90vh;
+}
+
 .max-h-full{
   max-height: 100%;
 }
 
+.min-h-0{
+  min-height: 0px;
+}
+
+.min-h-\[220px\]{
+  min-height: 220px;
+}
+
 .min-h-\[500px\]{
   min-height: 500px;
 }
@@ -1825,6 +1840,10 @@ body {
   width: 80%;
 }
 
+.w-40{
+  width: 10rem;
+}
+
 .w-48{
   width: 12rem;
 }
@@ -1898,10 +1917,6 @@ body {
   min-width: 24rem;
 }
 
-.min-w-\[120px\]{
-  min-width: 120px;
-}
-
 .min-w-\[14rem\]{
   min-width: 14rem;
 }
@@ -2034,10 +2049,6 @@ body {
   transform-origin: left;
 }
 
-.origin-top{
-  transform-origin: top;
-}
-
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2098,6 +2109,18 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.scale-100{
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.scale-95{
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .scale-x-0{
   --tw-scale-x: 0;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2286,6 +2309,10 @@ body {
   gap: 1rem;
 }
 
+.gap-6{
+  gap: 1.5rem;
+}
+
 .gap-8{
   gap: 2rem;
 }
@@ -2338,6 +2365,12 @@ body {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
+.space-y-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -3016,10 +3049,6 @@ body {
   --tw-bg-opacity: 0.7;
 }
 
-.bg-gradient-to-b{
-  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-}
-
 .bg-gradient-to-br{
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -3140,12 +3169,6 @@ body {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-transparent{
-  --tw-gradient-from: transparent var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
 .from-5\%{
   --tw-gradient-from-position: 5%;
 }
@@ -3200,11 +3223,6 @@ body {
   --tw-gradient-stops: var(--tw-gradient-from), #047481 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
-.via-transparent{
-  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
-
 .via-10\%{
   --tw-gradient-via-position: 10%;
 }
@@ -3281,10 +3299,6 @@ body {
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
 
-.to-white{
-  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
-}
-
 .to-yellow-200{
   --tw-gradient-to: #FCE96A var(--tw-gradient-to-position);
 }
@@ -4435,6 +4449,10 @@ body {
   --scrollbar-track: var(--color-bg-light-tone) !important;
 }
 
+.scrollbar-track-blue-100{
+  --scrollbar-track: #E1EFFE !important;
+}
+
 .scrollbar-track-gray-200{
   --scrollbar-track: #E5E7EB !important;
 }
@@ -4447,6 +4465,10 @@ body {
   --scrollbar-thumb: var(--color-bg-light-tone-panel) !important;
 }
 
+.scrollbar-thumb-blue-500{
+  --scrollbar-thumb: #3F83F8 !important;
+}
+
 .scrollbar-thumb-gray-400{
   --scrollbar-thumb: #9CA3AF !important;
 }
@@ -5126,12 +5148,15 @@ body:is(.dark *){
 }
 
 .app-card{
+  border-radius: 0.75rem;
+  border-width: 1px;
   --tw-bg-opacity: 1;
   background-color: rgb(252 232 243 / var(--tw-bg-opacity));
+  padding: 1.5rem;
   --tw-text-opacity: 1;
   color: rgb(153 21 75 / var(--tw-text-opacity));
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   transition-property: all;
   transition-duration: 300ms;
@@ -5139,8 +5164,8 @@ body:is(.dark *){
 }
 
 .app-card:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
@@ -5753,10 +5778,6 @@ button:hover{
   opacity: 1;
 }
 
-.group:hover .group-hover\:opacity-0{
-  opacity: 0;
-}
-
 .group:hover .group-hover\:opacity-100{
   opacity: 1;
 }
@@ -6043,6 +6064,12 @@ button:hover{
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.hover\:from-blue-500\/20:hover{
+  --tw-gradient-from: rgb(63 131 248 / 0.2) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .hover\:from-teal-200:hover{
   --tw-gradient-from: #AFECEF var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(175 236 239 / 0) var(--tw-gradient-to-position);
@@ -6057,6 +6084,10 @@ button:hover{
   --tw-gradient-to: #F6F5FF var(--tw-gradient-to-position);
 }
 
+.hover\:to-purple-500\/20:hover{
+  --tw-gradient-to: rgb(144 97 249 / 0.2) var(--tw-gradient-to-position);
+}
+
 .hover\:text-blue-600:hover{
   --tw-text-opacity: 1;
   color: rgb(28 100 242 / var(--tw-text-opacity));
@@ -6163,12 +6194,6 @@ button:hover{
   text-decoration-line: none;
 }
 
-.hover\:shadow-lg:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .hover\:shadow-md:hover{
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -6735,10 +6760,6 @@ button:hover{
   --tw-gradient-stops: var(--tw-gradient-from), var(--color-bg-dark) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
-.dark\:to-gray-800:is(.dark *){
-  --tw-gradient-to: #1F2937 var(--tw-gradient-to-position);
-}
-
 .dark\:to-purple-400:is(.dark *){
   --tw-gradient-to: #AC94FA var(--tw-gradient-to-position);
 }
@@ -7035,6 +7056,10 @@ button:hover{
   --scrollbar-track: var(--color-bg-dark-tone) !important;
 }
 
+.dark\:scrollbar-track-gray-700:is(.dark *){
+  --scrollbar-track: #374151 !important;
+}
+
 .dark\:scrollbar-track-gray-800:is(.dark *){
   --scrollbar-track: #1F2937 !important;
 }
@@ -7047,6 +7072,10 @@ button:hover{
   --scrollbar-thumb: var(--color-bg-dark-tone-panel) !important;
 }
 
+.dark\:scrollbar-thumb-gray-500:is(.dark *){
+  --scrollbar-thumb: #6B7280 !important;
+}
+
 .dark\:scrollbar-thumb-gray-600:is(.dark *){
   --scrollbar-thumb: #4B5563 !important;
 }
@@ -7189,12 +7218,22 @@ button:hover{
   background-color: var(--color-bg-dark-tone-panel);
 }
 
+.dark\:hover\:from-blue-400\/30:hover:is(.dark *){
+  --tw-gradient-from: rgb(118 169 250 / 0.3) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .dark\:hover\:from-blue-900\/30:hover:is(.dark *){
   --tw-gradient-from: rgb(35 56 118 / 0.3) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(35 56 118 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.dark\:hover\:to-purple-400\/30:hover:is(.dark *){
+  --tw-gradient-to: rgb(172 148 250 / 0.3) var(--tw-gradient-to-position);
+}
+
 .dark\:hover\:to-purple-900\/30:hover:is(.dark *){
   --tw-gradient-to: rgb(74 29 150 / 0.3) var(--tw-gradient-to-position);
 }

web/public/themes/amber.css

@@ -1240,6 +1240,12 @@ html{
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 }
+.line-clamp-4{
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
 .block{
   display: block;
 }
@@ -1357,9 +1363,6 @@ html{
 .h-\[200px\]{
   height: 200px;
 }
-.h-\[220px\]{
-  height: 220px;
-}
 .h-auto{
   height: auto;
 }
@@ -1399,9 +1402,18 @@ html{
 .max-h-\[80vh\]{
   max-height: 80vh;
 }
+.max-h-\[90vh\]{
+  max-height: 90vh;
+}
 .max-h-full{
   max-height: 100%;
 }
+.min-h-0{
+  min-height: 0px;
+}
+.min-h-\[220px\]{
+  min-height: 220px;
+}
 .min-h-\[500px\]{
   min-height: 500px;
 }
@@ -1477,6 +1489,9 @@ html{
 .w-4\/5{
   width: 80%;
 }
+.w-40{
+  width: 10rem;
+}
 .w-48{
   width: 12rem;
 }
@@ -1532,9 +1547,6 @@ html{
 .min-w-96{
   min-width: 24rem;
 }
-.min-w-\[120px\]{
-  min-width: 120px;
-}
 .min-w-\[14rem\]{
   min-width: 14rem;
 }
@@ -1634,9 +1646,6 @@ html{
 .origin-left{
   transform-origin: left;
 }
-.origin-top{
-  transform-origin: top;
-}
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1685,6 +1694,16 @@ html{
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.scale-100{
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.scale-95{
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .scale-x-0{
   --tw-scale-x: 0;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1827,6 +1846,9 @@ html{
 .gap-4{
   gap: 1rem;
 }
+.gap-6{
+  gap: 1.5rem;
+}
 .gap-8{
   gap: 2rem;
 }
@@ -1870,6 +1892,11 @@ html{
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.space-y-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
 .space-y-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2403,9 +2430,6 @@ html{
 .bg-opacity-70{
   --tw-bg-opacity: 0.7;
 }
-.bg-gradient-to-b{
-  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-}
 .bg-gradient-to-br{
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -2505,11 +2529,6 @@ html{
   --tw-gradient-to: rgb(6 148 162 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.from-transparent{
-  --tw-gradient-from: transparent var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
 .from-5\%{
   --tw-gradient-from-position: 5%;
 }
@@ -2553,10 +2572,6 @@ html{
   --tw-gradient-to: rgb(4 116 129 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #047481 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.via-transparent{
-  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
 .via-10\%{
   --tw-gradient-via-position: 10%;
 }
@@ -2614,9 +2629,6 @@ html{
 .to-transparent{
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
-.to-white{
-  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
-}
 .to-yellow-200{
   --tw-gradient-to: #FCE96A var(--tw-gradient-to-position);
 }
@@ -3520,6 +3532,9 @@ html{
 .scrollbar-track-bg-light-tone{
   --scrollbar-track: var(--color-bg-light-tone) !important;
 }
+.scrollbar-track-blue-100{
+  --scrollbar-track: #E1EFFE !important;
+}
 .scrollbar-track-gray-200{
   --scrollbar-track: #E5E7EB !important;
 }
@@ -3529,6 +3544,9 @@ html{
 .scrollbar-thumb-bg-light-tone-panel{
   --scrollbar-thumb: var(--color-bg-light-tone-panel) !important;
 }
+.scrollbar-thumb-blue-500{
+  --scrollbar-thumb: #3F83F8 !important;
+}
 .scrollbar-thumb-gray-400{
   --scrollbar-thumb: #9CA3AF !important;
 }
@@ -4191,23 +4209,26 @@ body:is(.dark *){
   }
 }
 .app-card{
+  border-radius: 0.75rem;
+  border-width: 1px;
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
   --tw-gradient-from: #fffbeb var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(255 251 235 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
   --tw-gradient-to: #fef3c7 var(--tw-gradient-to-position);
+  padding: 1.5rem;
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity));
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 .app-card:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .app-card:is(.dark *){
@@ -4721,9 +4742,6 @@ button:hover{
 .group\/item:hover .group-hover\/item\:opacity-100{
   opacity: 1;
 }
-.group:hover .group-hover\:opacity-0{
-  opacity: 0;
-}
 .group:hover .group-hover\:opacity-100{
   opacity: 1;
 }
@@ -4950,6 +4968,11 @@ button:hover{
   --tw-gradient-to: rgb(235 245 255 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.hover\:from-blue-500\/20:hover{
+  --tw-gradient-from: rgb(63 131 248 / 0.2) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .hover\:from-teal-200:hover{
   --tw-gradient-from: #AFECEF var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(175 236 239 / 0) var(--tw-gradient-to-position);
@@ -4961,6 +4984,9 @@ button:hover{
 .hover\:to-purple-50:hover{
   --tw-gradient-to: #F6F5FF var(--tw-gradient-to-position);
 }
+.hover\:to-purple-500\/20:hover{
+  --tw-gradient-to: rgb(144 97 249 / 0.2) var(--tw-gradient-to-position);
+}
 .hover\:text-blue-600:hover{
   --tw-text-opacity: 1;
   color: rgb(28 100 242 / var(--tw-text-opacity));
@@ -5045,11 +5071,6 @@ button:hover{
 .hover\:no-underline:hover{
   text-decoration-line: none;
 }
-.hover\:shadow-lg:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
 .hover\:shadow-md:hover{
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -5502,9 +5523,6 @@ button:hover{
   --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--color-bg-dark) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.dark\:to-gray-800:is(.dark *){
-  --tw-gradient-to: #1F2937 var(--tw-gradient-to-position);
-}
 .dark\:to-purple-400:is(.dark *){
   --tw-gradient-to: #AC94FA var(--tw-gradient-to-position);
 }
@@ -5740,6 +5758,9 @@ button:hover{
 .dark\:scrollbar-track-bg-dark-tone:is(.dark *){
   --scrollbar-track: var(--color-bg-dark-tone) !important;
 }
+.dark\:scrollbar-track-gray-700:is(.dark *){
+  --scrollbar-track: #374151 !important;
+}
 .dark\:scrollbar-track-gray-800:is(.dark *){
   --scrollbar-track: #1F2937 !important;
 }
@@ -5749,6 +5770,9 @@ button:hover{
 .dark\:scrollbar-thumb-bg-dark-tone-panel:is(.dark *){
   --scrollbar-thumb: var(--color-bg-dark-tone-panel) !important;
 }
+.dark\:scrollbar-thumb-gray-500:is(.dark *){
+  --scrollbar-thumb: #6B7280 !important;
+}
 .dark\:scrollbar-thumb-gray-600:is(.dark *){
   --scrollbar-thumb: #4B5563 !important;
 }
@@ -5861,11 +5885,19 @@ button:hover{
 .hover\:dark\:bg-bg-dark-tone-panel:is(.dark *):hover{
   background-color: var(--color-bg-dark-tone-panel);
 }
+.dark\:hover\:from-blue-400\/30:hover:is(.dark *){
+  --tw-gradient-from: rgb(118 169 250 / 0.3) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .dark\:hover\:from-blue-900\/30:hover:is(.dark *){
   --tw-gradient-from: rgb(35 56 118 / 0.3) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(35 56 118 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.dark\:hover\:to-purple-400\/30:hover:is(.dark *){
+  --tw-gradient-to: rgb(172 148 250 / 0.3) var(--tw-gradient-to-position);
+}
 .dark\:hover\:to-purple-900\/30:hover:is(.dark *){
   --tw-gradient-to: rgb(74 29 150 / 0.3) var(--tw-gradient-to-position);
 }

web/public/themes/borg.css

@@ -1235,6 +1235,12 @@ body {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 }
+.line-clamp-4{
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
 .block{
   display: block;
 }
@@ -1352,9 +1358,6 @@ body {
 .h-\[200px\]{
   height: 200px;
 }
-.h-\[220px\]{
-  height: 220px;
-}
 .h-auto{
   height: auto;
 }
@@ -1394,9 +1397,18 @@ body {
 .max-h-\[80vh\]{
   max-height: 80vh;
 }
+.max-h-\[90vh\]{
+  max-height: 90vh;
+}
 .max-h-full{
   max-height: 100%;
 }
+.min-h-0{
+  min-height: 0px;
+}
+.min-h-\[220px\]{
+  min-height: 220px;
+}
 .min-h-\[500px\]{
   min-height: 500px;
 }
@@ -1472,6 +1484,9 @@ body {
 .w-4\/5{
   width: 80%;
 }
+.w-40{
+  width: 10rem;
+}
 .w-48{
   width: 12rem;
 }
@@ -1527,9 +1542,6 @@ body {
 .min-w-96{
   min-width: 24rem;
 }
-.min-w-\[120px\]{
-  min-width: 120px;
-}
 .min-w-\[14rem\]{
   min-width: 14rem;
 }
@@ -1629,9 +1641,6 @@ body {
 .origin-left{
   transform-origin: left;
 }
-.origin-top{
-  transform-origin: top;
-}
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1680,6 +1689,16 @@ body {
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.scale-100{
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.scale-95{
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .scale-x-0{
   --tw-scale-x: 0;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1822,6 +1841,9 @@ body {
 .gap-4{
   gap: 1rem;
 }
+.gap-6{
+  gap: 1.5rem;
+}
 .gap-8{
   gap: 2rem;
 }
@@ -1865,6 +1887,11 @@ body {
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.space-y-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
 .space-y-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2398,9 +2425,6 @@ body {
 .bg-opacity-70{
   --tw-bg-opacity: 0.7;
 }
-.bg-gradient-to-b{
-  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-}
 .bg-gradient-to-br{
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -2500,11 +2524,6 @@ body {
   --tw-gradient-to: rgb(6 148 162 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.from-transparent{
-  --tw-gradient-from: transparent var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
 .from-5\%{
   --tw-gradient-from-position: 5%;
 }
@@ -2548,10 +2567,6 @@ body {
   --tw-gradient-to: rgb(4 116 129 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #047481 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.via-transparent{
-  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
 .via-10\%{
   --tw-gradient-via-position: 10%;
 }
@@ -2609,9 +2624,6 @@ body {
 .to-transparent{
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
-.to-white{
-  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
-}
 .to-yellow-200{
   --tw-gradient-to: #FCE96A var(--tw-gradient-to-position);
 }
@@ -3515,6 +3527,9 @@ body {
 .scrollbar-track-bg-light-tone{
   --scrollbar-track: var(--color-bg-light-tone) !important;
 }
+.scrollbar-track-blue-100{
+  --scrollbar-track: #E1EFFE !important;
+}
 .scrollbar-track-gray-200{
   --scrollbar-track: #E5E7EB !important;
 }
@@ -3524,6 +3539,9 @@ body {
 .scrollbar-thumb-bg-light-tone-panel{
   --scrollbar-thumb: var(--color-bg-light-tone-panel) !important;
 }
+.scrollbar-thumb-blue-500{
+  --scrollbar-thumb: #3F83F8 !important;
+}
 .scrollbar-thumb-gray-400{
   --scrollbar-thumb: #9CA3AF !important;
 }
@@ -3954,6 +3972,45 @@ body{
   0% { background-position: -100% 0; }
   100% { background-position: 100% 0; }
 }
+.app-card{
+  border-radius: 0.75rem;
+  border-width: 1px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(225 239 254 / var(--tw-bg-opacity));
+  padding: 1.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(30 66 159 / var(--tw-text-opacity));
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-property: all;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+.app-card:hover{
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.app-card:is(.dark *){
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 66 159 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(225 239 254 / var(--tw-text-opacity));
+}
+.app-card:hover{
+  --tw-translate-y: -0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+button{
+  transition-property: all;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+button:hover{
+  --tw-translate-y: -0.125rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .scrollbar-thin {
   scrollbar-width: thin;
   scrollbar-color: #00ff00 #1a1a1a;
@@ -4224,9 +4281,6 @@ body{
 .group\/item:hover .group-hover\/item\:opacity-100{
   opacity: 1;
 }
-.group:hover .group-hover\:opacity-0{
-  opacity: 0;
-}
 .group:hover .group-hover\:opacity-100{
   opacity: 1;
 }
@@ -4453,6 +4507,11 @@ body{
   --tw-gradient-to: rgb(235 245 255 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.hover\:from-blue-500\/20:hover{
+  --tw-gradient-from: rgb(63 131 248 / 0.2) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .hover\:from-teal-200:hover{
   --tw-gradient-from: #AFECEF var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(175 236 239 / 0) var(--tw-gradient-to-position);
@@ -4464,6 +4523,9 @@ body{
 .hover\:to-purple-50:hover{
   --tw-gradient-to: #F6F5FF var(--tw-gradient-to-position);
 }
+.hover\:to-purple-500\/20:hover{
+  --tw-gradient-to: rgb(144 97 249 / 0.2) var(--tw-gradient-to-position);
+}
 .hover\:text-blue-600:hover{
   --tw-text-opacity: 1;
   color: rgb(28 100 242 / var(--tw-text-opacity));
@@ -4548,11 +4610,6 @@ body{
 .hover\:no-underline:hover{
   text-decoration-line: none;
 }
-.hover\:shadow-lg:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
 .hover\:shadow-md:hover{
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -5005,9 +5062,6 @@ body{
   --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--color-bg-dark) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.dark\:to-gray-800:is(.dark *){
-  --tw-gradient-to: #1F2937 var(--tw-gradient-to-position);
-}
 .dark\:to-purple-400:is(.dark *){
   --tw-gradient-to: #AC94FA var(--tw-gradient-to-position);
 }
@@ -5243,6 +5297,9 @@ body{
 .dark\:scrollbar-track-bg-dark-tone:is(.dark *){
   --scrollbar-track: var(--color-bg-dark-tone) !important;
 }
+.dark\:scrollbar-track-gray-700:is(.dark *){
+  --scrollbar-track: #374151 !important;
+}
 .dark\:scrollbar-track-gray-800:is(.dark *){
   --scrollbar-track: #1F2937 !important;
 }
@@ -5252,6 +5309,9 @@ body{
 .dark\:scrollbar-thumb-bg-dark-tone-panel:is(.dark *){
   --scrollbar-thumb: var(--color-bg-dark-tone-panel) !important;
 }
+.dark\:scrollbar-thumb-gray-500:is(.dark *){
+  --scrollbar-thumb: #6B7280 !important;
+}
 .dark\:scrollbar-thumb-gray-600:is(.dark *){
   --scrollbar-thumb: #4B5563 !important;
 }
@@ -5364,11 +5424,19 @@ body{
 .hover\:dark\:bg-bg-dark-tone-panel:is(.dark *):hover{
   background-color: var(--color-bg-dark-tone-panel);
 }
+.dark\:hover\:from-blue-400\/30:hover:is(.dark *){
+  --tw-gradient-from: rgb(118 169 250 / 0.3) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .dark\:hover\:from-blue-900\/30:hover:is(.dark *){
   --tw-gradient-from: rgb(35 56 118 / 0.3) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(35 56 118 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.dark\:hover\:to-purple-400\/30:hover:is(.dark *){
+  --tw-gradient-to: rgb(172 148 250 / 0.3) var(--tw-gradient-to-position);
+}
 .dark\:hover\:to-purple-900\/30:hover:is(.dark *){
   --tw-gradient-to: rgb(74 29 150 / 0.3) var(--tw-gradient-to-position);
 }
@@ -5697,3 +5765,17 @@ body{
     height: 24rem;
   }
 }
+
+
+
+
+
+
+
+
+
+
+
+
+
+

web/public/themes/default.css

@@ -1235,6 +1235,12 @@ body {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 }
+.line-clamp-4{
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
 .block{
   display: block;
 }
@@ -1352,9 +1358,6 @@ body {
 .h-\[200px\]{
   height: 200px;
 }
-.h-\[220px\]{
-  height: 220px;
-}
 .h-auto{
   height: auto;
 }
@@ -1394,9 +1397,18 @@ body {
 .max-h-\[80vh\]{
   max-height: 80vh;
 }
+.max-h-\[90vh\]{
+  max-height: 90vh;
+}
 .max-h-full{
   max-height: 100%;
 }
+.min-h-0{
+  min-height: 0px;
+}
+.min-h-\[220px\]{
+  min-height: 220px;
+}
 .min-h-\[500px\]{
   min-height: 500px;
 }
@@ -1472,6 +1484,9 @@ body {
 .w-4\/5{
   width: 80%;
 }
+.w-40{
+  width: 10rem;
+}
 .w-48{
   width: 12rem;
 }
@@ -1527,9 +1542,6 @@ body {
 .min-w-96{
   min-width: 24rem;
 }
-.min-w-\[120px\]{
-  min-width: 120px;
-}
 .min-w-\[14rem\]{
   min-width: 14rem;
 }
@@ -1629,9 +1641,6 @@ body {
 .origin-left{
   transform-origin: left;
 }
-.origin-top{
-  transform-origin: top;
-}
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1680,6 +1689,16 @@ body {
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.scale-100{
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.scale-95{
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .scale-x-0{
   --tw-scale-x: 0;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1822,6 +1841,9 @@ body {
 .gap-4{
   gap: 1rem;
 }
+.gap-6{
+  gap: 1.5rem;
+}
 .gap-8{
   gap: 2rem;
 }
@@ -1865,6 +1887,11 @@ body {
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.space-y-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
 .space-y-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2398,9 +2425,6 @@ body {
 .bg-opacity-70{
   --tw-bg-opacity: 0.7;
 }
-.bg-gradient-to-b{
-  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-}
 .bg-gradient-to-br{
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -2500,11 +2524,6 @@ body {
   --tw-gradient-to: rgb(6 148 162 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.from-transparent{
-  --tw-gradient-from: transparent var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
 .from-5\%{
   --tw-gradient-from-position: 5%;
 }
@@ -2548,10 +2567,6 @@ body {
   --tw-gradient-to: rgb(4 116 129 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #047481 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.via-transparent{
-  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
 .via-10\%{
   --tw-gradient-via-position: 10%;
 }
@@ -2609,9 +2624,6 @@ body {
 .to-transparent{
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
-.to-white{
-  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
-}
 .to-yellow-200{
   --tw-gradient-to: #FCE96A var(--tw-gradient-to-position);
 }
@@ -3515,6 +3527,9 @@ body {
 .scrollbar-track-bg-light-tone{
   --scrollbar-track: var(--color-bg-light-tone) !important;
 }
+.scrollbar-track-blue-100{
+  --scrollbar-track: #E1EFFE !important;
+}
 .scrollbar-track-gray-200{
   --scrollbar-track: #E5E7EB !important;
 }
@@ -3524,6 +3539,9 @@ body {
 .scrollbar-thumb-bg-light-tone-panel{
   --scrollbar-thumb: var(--color-bg-light-tone-panel) !important;
 }
+.scrollbar-thumb-blue-500{
+  --scrollbar-thumb: #3F83F8 !important;
+}
 .scrollbar-thumb-gray-400{
   --scrollbar-thumb: #9CA3AF !important;
 }
@@ -4114,20 +4132,23 @@ body:is(.dark *){
   animation: bounce 2s infinite;
 }
 .app-card{
+  border-radius: 0.75rem;
+  border-width: 1px;
   --tw-bg-opacity: 1;
   background-color: rgb(225 239 254 / var(--tw-bg-opacity));
+  padding: 1.5rem;
   --tw-text-opacity: 1;
   color: rgb(30 66 159 / var(--tw-text-opacity));
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 .app-card:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .app-card:is(.dark *){
@@ -4636,9 +4657,6 @@ button:hover{
 .group\/item:hover .group-hover\/item\:opacity-100{
   opacity: 1;
 }
-.group:hover .group-hover\:opacity-0{
-  opacity: 0;
-}
 .group:hover .group-hover\:opacity-100{
   opacity: 1;
 }
@@ -4865,6 +4883,11 @@ button:hover{
   --tw-gradient-to: rgb(235 245 255 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.hover\:from-blue-500\/20:hover{
+  --tw-gradient-from: rgb(63 131 248 / 0.2) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .hover\:from-teal-200:hover{
   --tw-gradient-from: #AFECEF var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(175 236 239 / 0) var(--tw-gradient-to-position);
@@ -4876,6 +4899,9 @@ button:hover{
 .hover\:to-purple-50:hover{
   --tw-gradient-to: #F6F5FF var(--tw-gradient-to-position);
 }
+.hover\:to-purple-500\/20:hover{
+  --tw-gradient-to: rgb(144 97 249 / 0.2) var(--tw-gradient-to-position);
+}
 .hover\:text-blue-600:hover{
   --tw-text-opacity: 1;
   color: rgb(28 100 242 / var(--tw-text-opacity));
@@ -4960,11 +4986,6 @@ button:hover{
 .hover\:no-underline:hover{
   text-decoration-line: none;
 }
-.hover\:shadow-lg:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
 .hover\:shadow-md:hover{
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -5417,9 +5438,6 @@ button:hover{
   --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--color-bg-dark) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.dark\:to-gray-800:is(.dark *){
-  --tw-gradient-to: #1F2937 var(--tw-gradient-to-position);
-}
 .dark\:to-purple-400:is(.dark *){
   --tw-gradient-to: #AC94FA var(--tw-gradient-to-position);
 }
@@ -5655,6 +5673,9 @@ button:hover{
 .dark\:scrollbar-track-bg-dark-tone:is(.dark *){
   --scrollbar-track: var(--color-bg-dark-tone) !important;
 }
+.dark\:scrollbar-track-gray-700:is(.dark *){
+  --scrollbar-track: #374151 !important;
+}
 .dark\:scrollbar-track-gray-800:is(.dark *){
   --scrollbar-track: #1F2937 !important;
 }
@@ -5664,6 +5685,9 @@ button:hover{
 .dark\:scrollbar-thumb-bg-dark-tone-panel:is(.dark *){
   --scrollbar-thumb: var(--color-bg-dark-tone-panel) !important;
 }
+.dark\:scrollbar-thumb-gray-500:is(.dark *){
+  --scrollbar-thumb: #6B7280 !important;
+}
 .dark\:scrollbar-thumb-gray-600:is(.dark *){
   --scrollbar-thumb: #4B5563 !important;
 }
@@ -5776,11 +5800,19 @@ button:hover{
 .hover\:dark\:bg-bg-dark-tone-panel:is(.dark *):hover{
   background-color: var(--color-bg-dark-tone-panel);
 }
+.dark\:hover\:from-blue-400\/30:hover:is(.dark *){
+  --tw-gradient-from: rgb(118 169 250 / 0.3) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .dark\:hover\:from-blue-900\/30:hover:is(.dark *){
   --tw-gradient-from: rgb(35 56 118 / 0.3) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(35 56 118 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.dark\:hover\:to-purple-400\/30:hover:is(.dark *){
+  --tw-gradient-to: rgb(172 148 250 / 0.3) var(--tw-gradient-to-position);
+}
 .dark\:hover\:to-purple-900\/30:hover:is(.dark *){
   --tw-gradient-to: rgb(74 29 150 / 0.3) var(--tw-gradient-to-position);
 }

web/public/themes/lollms_blue.css

@@ -1240,6 +1240,12 @@ html{
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 }
+.line-clamp-4{
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
 .block{
   display: block;
 }
@@ -1357,9 +1363,6 @@ html{
 .h-\[200px\]{
   height: 200px;
 }
-.h-\[220px\]{
-  height: 220px;
-}
 .h-auto{
   height: auto;
 }
@@ -1399,9 +1402,18 @@ html{
 .max-h-\[80vh\]{
   max-height: 80vh;
 }
+.max-h-\[90vh\]{
+  max-height: 90vh;
+}
 .max-h-full{
   max-height: 100%;
 }
+.min-h-0{
+  min-height: 0px;
+}
+.min-h-\[220px\]{
+  min-height: 220px;
+}
 .min-h-\[500px\]{
   min-height: 500px;
 }
@@ -1477,6 +1489,9 @@ html{
 .w-4\/5{
   width: 80%;
 }
+.w-40{
+  width: 10rem;
+}
 .w-48{
   width: 12rem;
 }
@@ -1532,9 +1547,6 @@ html{
 .min-w-96{
   min-width: 24rem;
 }
-.min-w-\[120px\]{
-  min-width: 120px;
-}
 .min-w-\[14rem\]{
   min-width: 14rem;
 }
@@ -1634,9 +1646,6 @@ html{
 .origin-left{
   transform-origin: left;
 }
-.origin-top{
-  transform-origin: top;
-}
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1685,6 +1694,16 @@ html{
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.scale-100{
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.scale-95{
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .scale-x-0{
   --tw-scale-x: 0;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1827,6 +1846,9 @@ html{
 .gap-4{
   gap: 1rem;
 }
+.gap-6{
+  gap: 1.5rem;
+}
 .gap-8{
   gap: 2rem;
 }
@@ -1870,6 +1892,11 @@ html{
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.space-y-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
 .space-y-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2403,9 +2430,6 @@ html{
 .bg-opacity-70{
   --tw-bg-opacity: 0.7;
 }
-.bg-gradient-to-b{
-  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-}
 .bg-gradient-to-br{
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -2505,11 +2529,6 @@ html{
   --tw-gradient-to: rgb(6 148 162 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.from-transparent{
-  --tw-gradient-from: transparent var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
 .from-5\%{
   --tw-gradient-from-position: 5%;
 }
@@ -2553,10 +2572,6 @@ html{
   --tw-gradient-to: rgb(4 116 129 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #047481 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.via-transparent{
-  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
 .via-10\%{
   --tw-gradient-via-position: 10%;
 }
@@ -2614,9 +2629,6 @@ html{
 .to-transparent{
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
-.to-white{
-  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
-}
 .to-yellow-200{
   --tw-gradient-to: #FCE96A var(--tw-gradient-to-position);
 }
@@ -3520,6 +3532,9 @@ html{
 .scrollbar-track-bg-light-tone{
   --scrollbar-track: var(--color-bg-light-tone) !important;
 }
+.scrollbar-track-blue-100{
+  --scrollbar-track: #E1EFFE !important;
+}
 .scrollbar-track-gray-200{
   --scrollbar-track: #E5E7EB !important;
 }
@@ -3529,6 +3544,9 @@ html{
 .scrollbar-thumb-bg-light-tone-panel{
   --scrollbar-thumb: var(--color-bg-light-tone-panel) !important;
 }
+.scrollbar-thumb-blue-500{
+  --scrollbar-thumb: #3F83F8 !important;
+}
 .scrollbar-thumb-gray-400{
   --scrollbar-thumb: #9CA3AF !important;
 }
@@ -4174,23 +4192,26 @@ body { /* Added text-base for default body text */
   }
 }
 .app-card{
+  border-radius: 0.75rem;
+  border-width: 1px;
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
   --tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
   --tw-gradient-to: #A4CAFE var(--tw-gradient-to-position);
+  padding: 1.5rem;
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity));
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 .app-card:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .app-card:is(.dark *){
@@ -4703,9 +4724,6 @@ button:hover{
 .group\/item:hover .group-hover\/item\:opacity-100{
   opacity: 1;
 }
-.group:hover .group-hover\:opacity-0{
-  opacity: 0;
-}
 .group:hover .group-hover\:opacity-100{
   opacity: 1;
 }
@@ -4932,6 +4950,11 @@ button:hover{
   --tw-gradient-to: rgb(235 245 255 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.hover\:from-blue-500\/20:hover{
+  --tw-gradient-from: rgb(63 131 248 / 0.2) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .hover\:from-teal-200:hover{
   --tw-gradient-from: #AFECEF var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(175 236 239 / 0) var(--tw-gradient-to-position);
@@ -4943,6 +4966,9 @@ button:hover{
 .hover\:to-purple-50:hover{
   --tw-gradient-to: #F6F5FF var(--tw-gradient-to-position);
 }
+.hover\:to-purple-500\/20:hover{
+  --tw-gradient-to: rgb(144 97 249 / 0.2) var(--tw-gradient-to-position);
+}
 .hover\:text-blue-600:hover{
   --tw-text-opacity: 1;
   color: rgb(28 100 242 / var(--tw-text-opacity));
@@ -5027,11 +5053,6 @@ button:hover{
 .hover\:no-underline:hover{
   text-decoration-line: none;
 }
-.hover\:shadow-lg:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
 .hover\:shadow-md:hover{
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -5484,9 +5505,6 @@ button:hover{
   --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--color-bg-dark) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.dark\:to-gray-800:is(.dark *){
-  --tw-gradient-to: #1F2937 var(--tw-gradient-to-position);
-}
 .dark\:to-purple-400:is(.dark *){
   --tw-gradient-to: #AC94FA var(--tw-gradient-to-position);
 }
@@ -5722,6 +5740,9 @@ button:hover{
 .dark\:scrollbar-track-bg-dark-tone:is(.dark *){
   --scrollbar-track: var(--color-bg-dark-tone) !important;
 }
+.dark\:scrollbar-track-gray-700:is(.dark *){
+  --scrollbar-track: #374151 !important;
+}
 .dark\:scrollbar-track-gray-800:is(.dark *){
   --scrollbar-track: #1F2937 !important;
 }
@@ -5731,6 +5752,9 @@ button:hover{
 .dark\:scrollbar-thumb-bg-dark-tone-panel:is(.dark *){
   --scrollbar-thumb: var(--color-bg-dark-tone-panel) !important;
 }
+.dark\:scrollbar-thumb-gray-500:is(.dark *){
+  --scrollbar-thumb: #6B7280 !important;
+}
 .dark\:scrollbar-thumb-gray-600:is(.dark *){
   --scrollbar-thumb: #4B5563 !important;
 }
@@ -5843,11 +5867,19 @@ button:hover{
 .hover\:dark\:bg-bg-dark-tone-panel:is(.dark *):hover{
   background-color: var(--color-bg-dark-tone-panel);
 }
+.dark\:hover\:from-blue-400\/30:hover:is(.dark *){
+  --tw-gradient-from: rgb(118 169 250 / 0.3) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .dark\:hover\:from-blue-900\/30:hover:is(.dark *){
   --tw-gradient-from: rgb(35 56 118 / 0.3) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(35 56 118 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.dark\:hover\:to-purple-400\/30:hover:is(.dark *){
+  --tw-gradient-to: rgb(172 148 250 / 0.3) var(--tw-gradient-to-position);
+}
 .dark\:hover\:to-purple-900\/30:hover:is(.dark *){
   --tw-gradient-to: rgb(74 29 150 / 0.3) var(--tw-gradient-to-position);
 }

web/public/themes/matrix_reborn.css

@@ -1509,6 +1509,13 @@ body {
   -webkit-line-clamp: 3;
 }
 
+.line-clamp-4{
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
+
 .block{
   display: block;
 }
@@ -1665,10 +1672,6 @@ body {
   height: 200px;
 }
 
-.h-\[220px\]{
-  height: 220px;
-}
-
 .h-auto{
   height: auto;
 }
@@ -1721,10 +1724,22 @@ body {
   max-height: 80vh;
 }
 
+.max-h-\[90vh\]{
+  max-height: 90vh;
+}
+
 .max-h-full{
   max-height: 100%;
 }
 
+.min-h-0{
+  min-height: 0px;
+}
+
+.min-h-\[220px\]{
+  min-height: 220px;
+}
+
 .min-h-\[500px\]{
   min-height: 500px;
 }
@@ -1825,6 +1840,10 @@ body {
   width: 80%;
 }
 
+.w-40{
+  width: 10rem;
+}
+
 .w-48{
   width: 12rem;
 }
@@ -1898,10 +1917,6 @@ body {
   min-width: 24rem;
 }
 
-.min-w-\[120px\]{
-  min-width: 120px;
-}
-
 .min-w-\[14rem\]{
   min-width: 14rem;
 }
@@ -2034,10 +2049,6 @@ body {
   transform-origin: left;
 }
 
-.origin-top{
-  transform-origin: top;
-}
-
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2098,6 +2109,18 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.scale-100{
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.scale-95{
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .scale-x-0{
   --tw-scale-x: 0;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2286,6 +2309,10 @@ body {
   gap: 1rem;
 }
 
+.gap-6{
+  gap: 1.5rem;
+}
+
 .gap-8{
   gap: 2rem;
 }
@@ -2338,6 +2365,12 @@ body {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
+.space-y-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -3016,10 +3049,6 @@ body {
   --tw-bg-opacity: 0.7;
 }
 
-.bg-gradient-to-b{
-  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-}
-
 .bg-gradient-to-br{
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -3140,12 +3169,6 @@ body {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-transparent{
-  --tw-gradient-from: transparent var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
 .from-5\%{
   --tw-gradient-from-position: 5%;
 }
@@ -3200,11 +3223,6 @@ body {
   --tw-gradient-stops: var(--tw-gradient-from), #047481 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
-.via-transparent{
-  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
-
 .via-10\%{
   --tw-gradient-via-position: 10%;
 }
@@ -3281,10 +3299,6 @@ body {
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
 
-.to-white{
-  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
-}
-
 .to-yellow-200{
   --tw-gradient-to: #FCE96A var(--tw-gradient-to-position);
 }
@@ -4435,6 +4449,10 @@ body {
   --scrollbar-track: var(--color-bg-light-tone) !important;
 }
 
+.scrollbar-track-blue-100{
+  --scrollbar-track: #E1EFFE !important;
+}
+
 .scrollbar-track-gray-200{
   --scrollbar-track: #E5E7EB !important;
 }
@@ -4447,6 +4465,10 @@ body {
   --scrollbar-thumb: var(--color-bg-light-tone-panel) !important;
 }
 
+.scrollbar-thumb-blue-500{
+  --scrollbar-thumb: #3F83F8 !important;
+}
+
 .scrollbar-thumb-gray-400{
   --scrollbar-thumb: #9CA3AF !important;
 }
@@ -5162,15 +5184,17 @@ body:is(.dark *){
 }
 
 .app-card{
+  border-radius: 0.75rem;
   border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(14 159 110 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  padding: 1.5rem;
   --tw-text-opacity: 1;
   color: rgb(49 196 141 / var(--tw-text-opacity));
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   transition-property: all;
   transition-duration: 300ms;
@@ -5178,8 +5202,8 @@ body:is(.dark *){
 }
 
 .app-card:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
@@ -5783,10 +5807,6 @@ button:hover{
   opacity: 1;
 }
 
-.group:hover .group-hover\:opacity-0{
-  opacity: 0;
-}
-
 .group:hover .group-hover\:opacity-100{
   opacity: 1;
 }
@@ -6073,6 +6093,12 @@ button:hover{
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.hover\:from-blue-500\/20:hover{
+  --tw-gradient-from: rgb(63 131 248 / 0.2) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .hover\:from-teal-200:hover{
   --tw-gradient-from: #AFECEF var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(175 236 239 / 0) var(--tw-gradient-to-position);
@@ -6087,6 +6113,10 @@ button:hover{
   --tw-gradient-to: #F6F5FF var(--tw-gradient-to-position);
 }
 
+.hover\:to-purple-500\/20:hover{
+  --tw-gradient-to: rgb(144 97 249 / 0.2) var(--tw-gradient-to-position);
+}
+
 .hover\:text-blue-600:hover{
   --tw-text-opacity: 1;
   color: rgb(28 100 242 / var(--tw-text-opacity));
@@ -6193,12 +6223,6 @@ button:hover{
   text-decoration-line: none;
 }
 
-.hover\:shadow-lg:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .hover\:shadow-md:hover{
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -6765,10 +6789,6 @@ button:hover{
   --tw-gradient-stops: var(--tw-gradient-from), var(--color-bg-dark) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
-.dark\:to-gray-800:is(.dark *){
-  --tw-gradient-to: #1F2937 var(--tw-gradient-to-position);
-}
-
 .dark\:to-purple-400:is(.dark *){
   --tw-gradient-to: #AC94FA var(--tw-gradient-to-position);
 }
@@ -7065,6 +7085,10 @@ button:hover{
   --scrollbar-track: var(--color-bg-dark-tone) !important;
 }
 
+.dark\:scrollbar-track-gray-700:is(.dark *){
+  --scrollbar-track: #374151 !important;
+}
+
 .dark\:scrollbar-track-gray-800:is(.dark *){
   --scrollbar-track: #1F2937 !important;
 }
@@ -7077,6 +7101,10 @@ button:hover{
   --scrollbar-thumb: var(--color-bg-dark-tone-panel) !important;
 }
 
+.dark\:scrollbar-thumb-gray-500:is(.dark *){
+  --scrollbar-thumb: #6B7280 !important;
+}
+
 .dark\:scrollbar-thumb-gray-600:is(.dark *){
   --scrollbar-thumb: #4B5563 !important;
 }
@@ -7219,12 +7247,22 @@ button:hover{
   background-color: var(--color-bg-dark-tone-panel);
 }
 
+.dark\:hover\:from-blue-400\/30:hover:is(.dark *){
+  --tw-gradient-from: rgb(118 169 250 / 0.3) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .dark\:hover\:from-blue-900\/30:hover:is(.dark *){
   --tw-gradient-from: rgb(35 56 118 / 0.3) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(35 56 118 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.dark\:hover\:to-purple-400\/30:hover:is(.dark *){
+  --tw-gradient-to: rgb(172 148 250 / 0.3) var(--tw-gradient-to-position);
+}
+
 .dark\:hover\:to-purple-900\/30:hover:is(.dark *){
   --tw-gradient-to: rgb(74 29 150 / 0.3) var(--tw-gradient-to-position);
 }

web/public/themes/red_dragon.css

@@ -1509,6 +1509,13 @@ body {
   -webkit-line-clamp: 3;
 }
 
+.line-clamp-4{
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
+
 .block{
   display: block;
 }
@@ -1665,10 +1672,6 @@ body {
   height: 200px;
 }
 
-.h-\[220px\]{
-  height: 220px;
-}
-
 .h-auto{
   height: auto;
 }
@@ -1721,10 +1724,22 @@ body {
   max-height: 80vh;
 }
 
+.max-h-\[90vh\]{
+  max-height: 90vh;
+}
+
 .max-h-full{
   max-height: 100%;
 }
 
+.min-h-0{
+  min-height: 0px;
+}
+
+.min-h-\[220px\]{
+  min-height: 220px;
+}
+
 .min-h-\[500px\]{
   min-height: 500px;
 }
@@ -1825,6 +1840,10 @@ body {
   width: 80%;
 }
 
+.w-40{
+  width: 10rem;
+}
+
 .w-48{
   width: 12rem;
 }
@@ -1898,10 +1917,6 @@ body {
   min-width: 24rem;
 }
 
-.min-w-\[120px\]{
-  min-width: 120px;
-}
-
 .min-w-\[14rem\]{
   min-width: 14rem;
 }
@@ -2034,10 +2049,6 @@ body {
   transform-origin: left;
 }
 
-.origin-top{
-  transform-origin: top;
-}
-
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2098,6 +2109,18 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.scale-100{
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.scale-95{
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .scale-x-0{
   --tw-scale-x: 0;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2286,6 +2309,10 @@ body {
   gap: 1rem;
 }
 
+.gap-6{
+  gap: 1.5rem;
+}
+
 .gap-8{
   gap: 2rem;
 }
@@ -2338,6 +2365,12 @@ body {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
+.space-y-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -3016,10 +3049,6 @@ body {
   --tw-bg-opacity: 0.7;
 }
 
-.bg-gradient-to-b{
-  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-}
-
 .bg-gradient-to-br{
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -3140,12 +3169,6 @@ body {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-transparent{
-  --tw-gradient-from: transparent var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
 .from-5\%{
   --tw-gradient-from-position: 5%;
 }
@@ -3200,11 +3223,6 @@ body {
   --tw-gradient-stops: var(--tw-gradient-from), #047481 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
-.via-transparent{
-  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
-
 .via-10\%{
   --tw-gradient-via-position: 10%;
 }
@@ -3281,10 +3299,6 @@ body {
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
 
-.to-white{
-  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
-}
-
 .to-yellow-200{
   --tw-gradient-to: #FCE96A var(--tw-gradient-to-position);
 }
@@ -4435,6 +4449,10 @@ body {
   --scrollbar-track: var(--color-bg-light-tone) !important;
 }
 
+.scrollbar-track-blue-100{
+  --scrollbar-track: #E1EFFE !important;
+}
+
 .scrollbar-track-gray-200{
   --scrollbar-track: #E5E7EB !important;
 }
@@ -4447,6 +4465,10 @@ body {
   --scrollbar-thumb: var(--color-bg-light-tone-panel) !important;
 }
 
+.scrollbar-thumb-blue-500{
+  --scrollbar-thumb: #3F83F8 !important;
+}
+
 .scrollbar-thumb-gray-400{
   --scrollbar-thumb: #9CA3AF !important;
 }
@@ -5126,12 +5148,15 @@ body:is(.dark *){
 }
 
 .app-card{
+  border-radius: 0.75rem;
+  border-width: 1px;
   --tw-bg-opacity: 1;
   background-color: rgb(253 232 232 / var(--tw-bg-opacity));
+  padding: 1.5rem;
   --tw-text-opacity: 1;
   color: rgb(155 28 28 / var(--tw-text-opacity));
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   transition-property: all;
   transition-duration: 300ms;
@@ -5139,8 +5164,8 @@ body:is(.dark *){
 }
 
 .app-card:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
@@ -5752,10 +5777,6 @@ button:hover{
   opacity: 1;
 }
 
-.group:hover .group-hover\:opacity-0{
-  opacity: 0;
-}
-
 .group:hover .group-hover\:opacity-100{
   opacity: 1;
 }
@@ -6042,6 +6063,12 @@ button:hover{
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.hover\:from-blue-500\/20:hover{
+  --tw-gradient-from: rgb(63 131 248 / 0.2) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .hover\:from-teal-200:hover{
   --tw-gradient-from: #AFECEF var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(175 236 239 / 0) var(--tw-gradient-to-position);
@@ -6056,6 +6083,10 @@ button:hover{
   --tw-gradient-to: #F6F5FF var(--tw-gradient-to-position);
 }
 
+.hover\:to-purple-500\/20:hover{
+  --tw-gradient-to: rgb(144 97 249 / 0.2) var(--tw-gradient-to-position);
+}
+
 .hover\:text-blue-600:hover{
   --tw-text-opacity: 1;
   color: rgb(28 100 242 / var(--tw-text-opacity));
@@ -6162,12 +6193,6 @@ button:hover{
   text-decoration-line: none;
 }
 
-.hover\:shadow-lg:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .hover\:shadow-md:hover{
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -6734,10 +6759,6 @@ button:hover{
   --tw-gradient-stops: var(--tw-gradient-from), var(--color-bg-dark) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
-.dark\:to-gray-800:is(.dark *){
-  --tw-gradient-to: #1F2937 var(--tw-gradient-to-position);
-}
-
 .dark\:to-purple-400:is(.dark *){
   --tw-gradient-to: #AC94FA var(--tw-gradient-to-position);
 }
@@ -7034,6 +7055,10 @@ button:hover{
   --scrollbar-track: var(--color-bg-dark-tone) !important;
 }
 
+.dark\:scrollbar-track-gray-700:is(.dark *){
+  --scrollbar-track: #374151 !important;
+}
+
 .dark\:scrollbar-track-gray-800:is(.dark *){
   --scrollbar-track: #1F2937 !important;
 }
@@ -7046,6 +7071,10 @@ button:hover{
   --scrollbar-thumb: var(--color-bg-dark-tone-panel) !important;
 }
 
+.dark\:scrollbar-thumb-gray-500:is(.dark *){
+  --scrollbar-thumb: #6B7280 !important;
+}
+
 .dark\:scrollbar-thumb-gray-600:is(.dark *){
   --scrollbar-thumb: #4B5563 !important;
 }
@@ -7188,12 +7217,22 @@ button:hover{
   background-color: var(--color-bg-dark-tone-panel);
 }
 
+.dark\:hover\:from-blue-400\/30:hover:is(.dark *){
+  --tw-gradient-from: rgb(118 169 250 / 0.3) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .dark\:hover\:from-blue-900\/30:hover:is(.dark *){
   --tw-gradient-from: rgb(35 56 118 / 0.3) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(35 56 118 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.dark\:hover\:to-purple-400\/30:hover:is(.dark *){
+  --tw-gradient-to: rgb(172 148 250 / 0.3) var(--tw-gradient-to-position);
+}
+
 .dark\:hover\:to-purple-900\/30:hover:is(.dark *){
   --tw-gradient-to: rgb(74 29 150 / 0.3) var(--tw-gradient-to-position);
 }

web/public/themes/sober_gray.css

@@ -1235,6 +1235,12 @@ body {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 }
+.line-clamp-4{
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
 .block{
   display: block;
 }
@@ -1352,9 +1358,6 @@ body {
 .h-\[200px\]{
   height: 200px;
 }
-.h-\[220px\]{
-  height: 220px;
-}
 .h-auto{
   height: auto;
 }
@@ -1394,9 +1397,18 @@ body {
 .max-h-\[80vh\]{
   max-height: 80vh;
 }
+.max-h-\[90vh\]{
+  max-height: 90vh;
+}
 .max-h-full{
   max-height: 100%;
 }
+.min-h-0{
+  min-height: 0px;
+}
+.min-h-\[220px\]{
+  min-height: 220px;
+}
 .min-h-\[500px\]{
   min-height: 500px;
 }
@@ -1472,6 +1484,9 @@ body {
 .w-4\/5{
   width: 80%;
 }
+.w-40{
+  width: 10rem;
+}
 .w-48{
   width: 12rem;
 }
@@ -1527,9 +1542,6 @@ body {
 .min-w-96{
   min-width: 24rem;
 }
-.min-w-\[120px\]{
-  min-width: 120px;
-}
 .min-w-\[14rem\]{
   min-width: 14rem;
 }
@@ -1629,9 +1641,6 @@ body {
 .origin-left{
   transform-origin: left;
 }
-.origin-top{
-  transform-origin: top;
-}
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1680,6 +1689,16 @@ body {
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.scale-100{
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.scale-95{
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .scale-x-0{
   --tw-scale-x: 0;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1822,6 +1841,9 @@ body {
 .gap-4{
   gap: 1rem;
 }
+.gap-6{
+  gap: 1.5rem;
+}
 .gap-8{
   gap: 2rem;
 }
@@ -1865,6 +1887,11 @@ body {
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.space-y-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
 .space-y-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2398,9 +2425,6 @@ body {
 .bg-opacity-70{
   --tw-bg-opacity: 0.7;
 }
-.bg-gradient-to-b{
-  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-}
 .bg-gradient-to-br{
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -2500,11 +2524,6 @@ body {
   --tw-gradient-to: rgb(6 148 162 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.from-transparent{
-  --tw-gradient-from: transparent var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
 .from-5\%{
   --tw-gradient-from-position: 5%;
 }
@@ -2548,10 +2567,6 @@ body {
   --tw-gradient-to: rgb(4 116 129 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #047481 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.via-transparent{
-  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
 .via-10\%{
   --tw-gradient-via-position: 10%;
 }
@@ -2609,9 +2624,6 @@ body {
 .to-transparent{
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
-.to-white{
-  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
-}
 .to-yellow-200{
   --tw-gradient-to: #FCE96A var(--tw-gradient-to-position);
 }
@@ -3515,6 +3527,9 @@ body {
 .scrollbar-track-bg-light-tone{
   --scrollbar-track: var(--color-bg-light-tone) !important;
 }
+.scrollbar-track-blue-100{
+  --scrollbar-track: #E1EFFE !important;
+}
 .scrollbar-track-gray-200{
   --scrollbar-track: #E5E7EB !important;
 }
@@ -3524,6 +3539,9 @@ body {
 .scrollbar-thumb-bg-light-tone-panel{
   --scrollbar-thumb: var(--color-bg-light-tone-panel) !important;
 }
+.scrollbar-thumb-blue-500{
+  --scrollbar-thumb: #3F83F8 !important;
+}
 .scrollbar-thumb-gray-400{
   --scrollbar-thumb: #9CA3AF !important;
 }
@@ -4106,20 +4124,23 @@ body:is(.dark *){
   animation: bounce 2s infinite;
 }
 .app-card{
+  border-radius: 0.75rem;
+  border-width: 1px;
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  padding: 1.5rem;
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity));
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 .app-card:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .app-card:is(.dark *){
@@ -4629,9 +4650,6 @@ button:hover{
 .group\/item:hover .group-hover\/item\:opacity-100{
   opacity: 1;
 }
-.group:hover .group-hover\:opacity-0{
-  opacity: 0;
-}
 .group:hover .group-hover\:opacity-100{
   opacity: 1;
 }
@@ -4858,6 +4876,11 @@ button:hover{
   --tw-gradient-to: rgb(235 245 255 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.hover\:from-blue-500\/20:hover{
+  --tw-gradient-from: rgb(63 131 248 / 0.2) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .hover\:from-teal-200:hover{
   --tw-gradient-from: #AFECEF var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(175 236 239 / 0) var(--tw-gradient-to-position);
@@ -4869,6 +4892,9 @@ button:hover{
 .hover\:to-purple-50:hover{
   --tw-gradient-to: #F6F5FF var(--tw-gradient-to-position);
 }
+.hover\:to-purple-500\/20:hover{
+  --tw-gradient-to: rgb(144 97 249 / 0.2) var(--tw-gradient-to-position);
+}
 .hover\:text-blue-600:hover{
   --tw-text-opacity: 1;
   color: rgb(28 100 242 / var(--tw-text-opacity));
@@ -4953,11 +4979,6 @@ button:hover{
 .hover\:no-underline:hover{
   text-decoration-line: none;
 }
-.hover\:shadow-lg:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
 .hover\:shadow-md:hover{
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -5410,9 +5431,6 @@ button:hover{
   --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--color-bg-dark) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.dark\:to-gray-800:is(.dark *){
-  --tw-gradient-to: #1F2937 var(--tw-gradient-to-position);
-}
 .dark\:to-purple-400:is(.dark *){
   --tw-gradient-to: #AC94FA var(--tw-gradient-to-position);
 }
@@ -5648,6 +5666,9 @@ button:hover{
 .dark\:scrollbar-track-bg-dark-tone:is(.dark *){
   --scrollbar-track: var(--color-bg-dark-tone) !important;
 }
+.dark\:scrollbar-track-gray-700:is(.dark *){
+  --scrollbar-track: #374151 !important;
+}
 .dark\:scrollbar-track-gray-800:is(.dark *){
   --scrollbar-track: #1F2937 !important;
 }
@@ -5657,6 +5678,9 @@ button:hover{
 .dark\:scrollbar-thumb-bg-dark-tone-panel:is(.dark *){
   --scrollbar-thumb: var(--color-bg-dark-tone-panel) !important;
 }
+.dark\:scrollbar-thumb-gray-500:is(.dark *){
+  --scrollbar-thumb: #6B7280 !important;
+}
 .dark\:scrollbar-thumb-gray-600:is(.dark *){
   --scrollbar-thumb: #4B5563 !important;
 }
@@ -5769,11 +5793,19 @@ button:hover{
 .hover\:dark\:bg-bg-dark-tone-panel:is(.dark *):hover{
   background-color: var(--color-bg-dark-tone-panel);
 }
+.dark\:hover\:from-blue-400\/30:hover:is(.dark *){
+  --tw-gradient-from: rgb(118 169 250 / 0.3) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .dark\:hover\:from-blue-900\/30:hover:is(.dark *){
   --tw-gradient-from: rgb(35 56 118 / 0.3) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(35 56 118 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.dark\:hover\:to-purple-400\/30:hover:is(.dark *){
+  --tw-gradient-to: rgb(172 148 250 / 0.3) var(--tw-gradient-to-position);
+}
 .dark\:hover\:to-purple-900\/30:hover:is(.dark *){
   --tw-gradient-to: rgb(74 29 150 / 0.3) var(--tw-gradient-to-position);
 }

web/public/themes/strawberry.css

@@ -1240,6 +1240,12 @@ html{
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 }
+.line-clamp-4{
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
 .block{
   display: block;
 }
@@ -1357,9 +1363,6 @@ html{
 .h-\[200px\]{
   height: 200px;
 }
-.h-\[220px\]{
-  height: 220px;
-}
 .h-auto{
   height: auto;
 }
@@ -1399,9 +1402,18 @@ html{
 .max-h-\[80vh\]{
   max-height: 80vh;
 }
+.max-h-\[90vh\]{
+  max-height: 90vh;
+}
 .max-h-full{
   max-height: 100%;
 }
+.min-h-0{
+  min-height: 0px;
+}
+.min-h-\[220px\]{
+  min-height: 220px;
+}
 .min-h-\[500px\]{
   min-height: 500px;
 }
@@ -1477,6 +1489,9 @@ html{
 .w-4\/5{
   width: 80%;
 }
+.w-40{
+  width: 10rem;
+}
 .w-48{
   width: 12rem;
 }
@@ -1532,9 +1547,6 @@ html{
 .min-w-96{
   min-width: 24rem;
 }
-.min-w-\[120px\]{
-  min-width: 120px;
-}
 .min-w-\[14rem\]{
   min-width: 14rem;
 }
@@ -1634,9 +1646,6 @@ html{
 .origin-left{
   transform-origin: left;
 }
-.origin-top{
-  transform-origin: top;
-}
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1685,6 +1694,16 @@ html{
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.scale-100{
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.scale-95{
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .scale-x-0{
   --tw-scale-x: 0;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1827,6 +1846,9 @@ html{
 .gap-4{
   gap: 1rem;
 }
+.gap-6{
+  gap: 1.5rem;
+}
 .gap-8{
   gap: 2rem;
 }
@@ -1870,6 +1892,11 @@ html{
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.space-y-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
 .space-y-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2403,9 +2430,6 @@ html{
 .bg-opacity-70{
   --tw-bg-opacity: 0.7;
 }
-.bg-gradient-to-b{
-  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-}
 .bg-gradient-to-br{
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -2505,11 +2529,6 @@ html{
   --tw-gradient-to: rgb(6 148 162 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.from-transparent{
-  --tw-gradient-from: transparent var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
 .from-5\%{
   --tw-gradient-from-position: 5%;
 }
@@ -2553,10 +2572,6 @@ html{
   --tw-gradient-to: rgb(4 116 129 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #047481 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.via-transparent{
-  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
 .via-10\%{
   --tw-gradient-via-position: 10%;
 }
@@ -2614,9 +2629,6 @@ html{
 .to-transparent{
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
-.to-white{
-  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
-}
 .to-yellow-200{
   --tw-gradient-to: #FCE96A var(--tw-gradient-to-position);
 }
@@ -3520,6 +3532,9 @@ html{
 .scrollbar-track-bg-light-tone{
   --scrollbar-track: var(--color-bg-light-tone) !important;
 }
+.scrollbar-track-blue-100{
+  --scrollbar-track: #E1EFFE !important;
+}
 .scrollbar-track-gray-200{
   --scrollbar-track: #E5E7EB !important;
 }
@@ -3529,6 +3544,9 @@ html{
 .scrollbar-thumb-bg-light-tone-panel{
   --scrollbar-thumb: var(--color-bg-light-tone-panel) !important;
 }
+.scrollbar-thumb-blue-500{
+  --scrollbar-thumb: #3F83F8 !important;
+}
 .scrollbar-thumb-gray-400{
   --scrollbar-thumb: #9CA3AF !important;
 }
@@ -4194,23 +4212,26 @@ body { /* Added text-base for default body text */
   }
 }
 .app-card{
+  border-radius: 0.75rem;
+  border-width: 1px;
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
   --tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
   --tw-gradient-to: #A4CAFE var(--tw-gradient-to-position);
+  padding: 1.5rem;
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity));
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 .app-card:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .app-card:is(.dark *){
@@ -4724,9 +4745,6 @@ button:hover{
 .group\/item:hover .group-hover\/item\:opacity-100{
   opacity: 1;
 }
-.group:hover .group-hover\:opacity-0{
-  opacity: 0;
-}
 .group:hover .group-hover\:opacity-100{
   opacity: 1;
 }
@@ -4953,6 +4971,11 @@ button:hover{
   --tw-gradient-to: rgb(235 245 255 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.hover\:from-blue-500\/20:hover{
+  --tw-gradient-from: rgb(63 131 248 / 0.2) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .hover\:from-teal-200:hover{
   --tw-gradient-from: #AFECEF var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(175 236 239 / 0) var(--tw-gradient-to-position);
@@ -4964,6 +4987,9 @@ button:hover{
 .hover\:to-purple-50:hover{
   --tw-gradient-to: #F6F5FF var(--tw-gradient-to-position);
 }
+.hover\:to-purple-500\/20:hover{
+  --tw-gradient-to: rgb(144 97 249 / 0.2) var(--tw-gradient-to-position);
+}
 .hover\:text-blue-600:hover{
   --tw-text-opacity: 1;
   color: rgb(28 100 242 / var(--tw-text-opacity));
@@ -5048,11 +5074,6 @@ button:hover{
 .hover\:no-underline:hover{
   text-decoration-line: none;
 }
-.hover\:shadow-lg:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
 .hover\:shadow-md:hover{
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -5505,9 +5526,6 @@ button:hover{
   --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--color-bg-dark) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.dark\:to-gray-800:is(.dark *){
-  --tw-gradient-to: #1F2937 var(--tw-gradient-to-position);
-}
 .dark\:to-purple-400:is(.dark *){
   --tw-gradient-to: #AC94FA var(--tw-gradient-to-position);
 }
@@ -5743,6 +5761,9 @@ button:hover{
 .dark\:scrollbar-track-bg-dark-tone:is(.dark *){
   --scrollbar-track: var(--color-bg-dark-tone) !important;
 }
+.dark\:scrollbar-track-gray-700:is(.dark *){
+  --scrollbar-track: #374151 !important;
+}
 .dark\:scrollbar-track-gray-800:is(.dark *){
   --scrollbar-track: #1F2937 !important;
 }
@@ -5752,6 +5773,9 @@ button:hover{
 .dark\:scrollbar-thumb-bg-dark-tone-panel:is(.dark *){
   --scrollbar-thumb: var(--color-bg-dark-tone-panel) !important;
 }
+.dark\:scrollbar-thumb-gray-500:is(.dark *){
+  --scrollbar-thumb: #6B7280 !important;
+}
 .dark\:scrollbar-thumb-gray-600:is(.dark *){
   --scrollbar-thumb: #4B5563 !important;
 }
@@ -5864,11 +5888,19 @@ button:hover{
 .hover\:dark\:bg-bg-dark-tone-panel:is(.dark *):hover{
   background-color: var(--color-bg-dark-tone-panel);
 }
+.dark\:hover\:from-blue-400\/30:hover:is(.dark *){
+  --tw-gradient-from: rgb(118 169 250 / 0.3) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .dark\:hover\:from-blue-900\/30:hover:is(.dark *){
   --tw-gradient-from: rgb(35 56 118 / 0.3) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(35 56 118 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.dark\:hover\:to-purple-400\/30:hover:is(.dark *){
+  --tw-gradient-to: rgb(172 148 250 / 0.3) var(--tw-gradient-to-position);
+}
 .dark\:hover\:to-purple-900\/30:hover:is(.dark *){
   --tw-gradient-to: rgb(74 29 150 / 0.3) var(--tw-gradient-to-position);
 }

web/public/themes/strawberry_milkshake.css

@@ -1509,6 +1509,13 @@ body {
   -webkit-line-clamp: 3;
 }
 
+.line-clamp-4{
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
+
 .block{
   display: block;
 }
@@ -1665,10 +1672,6 @@ body {
   height: 200px;
 }
 
-.h-\[220px\]{
-  height: 220px;
-}
-
 .h-auto{
   height: auto;
 }
@@ -1721,10 +1724,22 @@ body {
   max-height: 80vh;
 }
 
+.max-h-\[90vh\]{
+  max-height: 90vh;
+}
+
 .max-h-full{
   max-height: 100%;
 }
 
+.min-h-0{
+  min-height: 0px;
+}
+
+.min-h-\[220px\]{
+  min-height: 220px;
+}
+
 .min-h-\[500px\]{
   min-height: 500px;
 }
@@ -1825,6 +1840,10 @@ body {
   width: 80%;
 }
 
+.w-40{
+  width: 10rem;
+}
+
 .w-48{
   width: 12rem;
 }
@@ -1898,10 +1917,6 @@ body {
   min-width: 24rem;
 }
 
-.min-w-\[120px\]{
-  min-width: 120px;
-}
-
 .min-w-\[14rem\]{
   min-width: 14rem;
 }
@@ -2034,10 +2049,6 @@ body {
   transform-origin: left;
 }
 
-.origin-top{
-  transform-origin: top;
-}
-
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2098,6 +2109,18 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.scale-100{
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.scale-95{
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .scale-x-0{
   --tw-scale-x: 0;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2286,6 +2309,10 @@ body {
   gap: 1rem;
 }
 
+.gap-6{
+  gap: 1.5rem;
+}
+
 .gap-8{
   gap: 2rem;
 }
@@ -2338,6 +2365,12 @@ body {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
+.space-y-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -3016,10 +3049,6 @@ body {
   --tw-bg-opacity: 0.7;
 }
 
-.bg-gradient-to-b{
-  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-}
-
 .bg-gradient-to-br{
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -3140,12 +3169,6 @@ body {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-transparent{
-  --tw-gradient-from: transparent var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
 .from-5\%{
   --tw-gradient-from-position: 5%;
 }
@@ -3200,11 +3223,6 @@ body {
   --tw-gradient-stops: var(--tw-gradient-from), #047481 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
-.via-transparent{
-  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
-
 .via-10\%{
   --tw-gradient-via-position: 10%;
 }
@@ -3281,10 +3299,6 @@ body {
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
 
-.to-white{
-  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
-}
-
 .to-yellow-200{
   --tw-gradient-to: #FCE96A var(--tw-gradient-to-position);
 }
@@ -4435,6 +4449,10 @@ body {
   --scrollbar-track: var(--color-bg-light-tone) !important;
 }
 
+.scrollbar-track-blue-100{
+  --scrollbar-track: #E1EFFE !important;
+}
+
 .scrollbar-track-gray-200{
   --scrollbar-track: #E5E7EB !important;
 }
@@ -4447,6 +4465,10 @@ body {
   --scrollbar-thumb: var(--color-bg-light-tone-panel) !important;
 }
 
+.scrollbar-thumb-blue-500{
+  --scrollbar-thumb: #3F83F8 !important;
+}
+
 .scrollbar-thumb-gray-400{
   --scrollbar-thumb: #9CA3AF !important;
 }
@@ -5126,12 +5148,15 @@ body:is(.dark *){
 }
 
 .app-card{
+  border-radius: 0.75rem;
+  border-width: 1px;
   --tw-bg-opacity: 1;
   background-color: rgb(252 232 243 / var(--tw-bg-opacity));
+  padding: 1.5rem;
   --tw-text-opacity: 1;
   color: rgb(153 21 75 / var(--tw-text-opacity));
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   transition-property: all;
   transition-duration: 300ms;
@@ -5139,8 +5164,8 @@ body:is(.dark *){
 }
 
 .app-card:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
@@ -5753,10 +5778,6 @@ button:hover{
   opacity: 1;
 }
 
-.group:hover .group-hover\:opacity-0{
-  opacity: 0;
-}
-
 .group:hover .group-hover\:opacity-100{
   opacity: 1;
 }
@@ -6043,6 +6064,12 @@ button:hover{
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.hover\:from-blue-500\/20:hover{
+  --tw-gradient-from: rgb(63 131 248 / 0.2) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .hover\:from-teal-200:hover{
   --tw-gradient-from: #AFECEF var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(175 236 239 / 0) var(--tw-gradient-to-position);
@@ -6057,6 +6084,10 @@ button:hover{
   --tw-gradient-to: #F6F5FF var(--tw-gradient-to-position);
 }
 
+.hover\:to-purple-500\/20:hover{
+  --tw-gradient-to: rgb(144 97 249 / 0.2) var(--tw-gradient-to-position);
+}
+
 .hover\:text-blue-600:hover{
   --tw-text-opacity: 1;
   color: rgb(28 100 242 / var(--tw-text-opacity));
@@ -6163,12 +6194,6 @@ button:hover{
   text-decoration-line: none;
 }
 
-.hover\:shadow-lg:hover{
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .hover\:shadow-md:hover{
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -6735,10 +6760,6 @@ button:hover{
   --tw-gradient-stops: var(--tw-gradient-from), var(--color-bg-dark) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
-.dark\:to-gray-800:is(.dark *){
-  --tw-gradient-to: #1F2937 var(--tw-gradient-to-position);
-}
-
 .dark\:to-purple-400:is(.dark *){
   --tw-gradient-to: #AC94FA var(--tw-gradient-to-position);
 }
@@ -7035,6 +7056,10 @@ button:hover{
   --scrollbar-track: var(--color-bg-dark-tone) !important;
 }
 
+.dark\:scrollbar-track-gray-700:is(.dark *){
+  --scrollbar-track: #374151 !important;
+}
+
 .dark\:scrollbar-track-gray-800:is(.dark *){
   --scrollbar-track: #1F2937 !important;
 }
@@ -7047,6 +7072,10 @@ button:hover{
   --scrollbar-thumb: var(--color-bg-dark-tone-panel) !important;
 }
 
+.dark\:scrollbar-thumb-gray-500:is(.dark *){
+  --scrollbar-thumb: #6B7280 !important;
+}
+
 .dark\:scrollbar-thumb-gray-600:is(.dark *){
   --scrollbar-thumb: #4B5563 !important;
 }
@@ -7189,12 +7218,22 @@ button:hover{
   background-color: var(--color-bg-dark-tone-panel);
 }
 
+.dark\:hover\:from-blue-400\/30:hover:is(.dark *){
+  --tw-gradient-from: rgb(118 169 250 / 0.3) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .dark\:hover\:from-blue-900\/30:hover:is(.dark *){
   --tw-gradient-from: rgb(35 56 118 / 0.3) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(35 56 118 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.dark\:hover\:to-purple-400\/30:hover:is(.dark *){
+  --tw-gradient-to: rgb(172 148 250 / 0.3) var(--tw-gradient-to-position);
+}
+
 .dark\:hover\:to-purple-900\/30:hover:is(.dark *){
   --tw-gradient-to: rgb(74 29 150 / 0.3) var(--tw-gradient-to-position);
 }

web/src/components/AppCard.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="app-card bg-white border rounded-xl shadow-lg p-6 hover:shadow-xl transition duration-300 ease-in-out flex flex-col h-full">
+    <div class="app-card flex flex-col h-full">
       <div class="flex-grow">
         <div class="flex items-center mb-4">
           <img :src="app.icon" alt="App Icon" class="w-16 h-16 rounded-full border border-gray-300 mr-4" />

web/src/components/PersonalityEntry.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="personality-card bg-white border rounded-xl shadow-lg p-6 hover:shadow-xl transition duration-300 ease-in-out flex flex-col h-full"
+  <div class="app-card flex flex-col h-full"
     :class="selected_computed ? 'border-primary-light' : 'border-transparent', isMounted ? 'bg-blue-200 dark:bg-blue-700' : ''"
     :title="!personality.installed ? 'Not installed' : ''">
     <div class="flex-grow">

web/src/components/TopBar.vue

@@ -163,25 +163,27 @@
         </div>    
 
         <div class="relative inline-flex">
-          <!-- Custom button with enhanced styling -->
+          <!-- Enhanced custom button -->
           <button 
-            @click="themeDropdownOpen = !themeDropdownOpen"
+            @click.stop="toggleThemeDropDown"
-            class="inline-flex items-center justify-between min-w-[120px] px-4 py-2
+            class="inline-flex items-center justify-between w-40 px-4 py-2
                   bg-gradient-to-r from-blue-500/10 to-purple-500/10
                   dark:from-blue-400/20 dark:to-purple-400/20
                   border border-blue-200 dark:border-blue-700
                   rounded-lg shadow-sm
                   text-gray-700 dark:text-gray-200
+                  hover:from-blue-500/20 hover:to-purple-500/20
+                  dark:hover:from-blue-400/30 dark:hover:to-purple-400/30
                   hover:border-blue-300 dark:hover:border-blue-600
                   hover:shadow-md
                   focus:outline-none focus:ring-2 focus:ring-blue-500/50
                   transition-all duration-300 ease-in-out
                   backdrop-blur-sm"
           >
-            <div class="flex items-center space-x-2">
+            <div class="flex items-center space-x-2 overflow-hidden">
               <!-- Theme Icon -->
               <svg 
-                class="w-5 h-5 text-blue-500 dark:text-blue-400"
+                class="w-5 h-5 flex-shrink-0 text-blue-500 dark:text-blue-400"
                 xmlns="http://www.w3.org/2000/svg" 
                 fill="none" 
                 viewBox="0 0 24 24" 
@@ -190,10 +192,10 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                       d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
               </svg>
-              <span class="font-medium">{{ currentTheme }}</span>
+              <span class="font-medium truncate">{{ currentTheme }}</span>
             </div>
             <svg 
-              class="w-5 h-5 text-blue-500 dark:text-blue-400 transition-transform duration-300"
+              class="w-5 h-5 flex-shrink-0 text-blue-500 dark:text-blue-400 transition-transform duration-300"
               :class="{ 'rotate-180': themeDropdownOpen }"
               xmlns="http://www.w3.org/2000/svg" 
               viewBox="0 0 20 20" 
@@ -206,36 +208,43 @@
           </button>
 
           <!-- Enhanced Dropdown menu with animations -->
-          <div 
+          <transition
-            v-if="themeDropdownOpen"
+            enter-active-class="transition duration-200 ease-out"
-            class="absolute left-0 z-50 w-full mt-2 
+            enter-from-class="transform scale-95 opacity-0"
-                  overflow-hidden
+            enter-to-class="transform scale-100 opacity-100"
-                  bg-white dark:bg-gray-800 
+            leave-active-class="transition duration-75 ease-in"
-                  border border-blue-200 dark:border-blue-700
+            leave-from-class="transform scale-100 opacity-100"
-                  rounded-lg shadow-lg
+            leave-to-class="transform scale-95 opacity-0"
-                  transform origin-top
-                  animate-dropdown"
           >
-            <div class="max-h-60 overflow-y-auto">
+            <div 
-              <a
+              v-if="themeDropdownOpen"
-                v-for="theme in availableThemes"
+              class="absolute left-0 z-50 w-48 mt-2 
-                :key="theme"
+                    overflow-hidden
-                @click="loadTheme(theme); currentTheme = theme; themeDropdownOpen = false"
+                    bg-white dark:bg-gray-800 
-                class="flex items-center space-x-2 px-4 py-3
+                    border border-blue-200 dark:border-blue-700
-                      text-gray-700 dark:text-gray-200
+                    rounded-lg shadow-lg"
-                      hover:bg-gradient-to-r hover:from-blue-50 hover:to-purple-50
+            >
-                      dark:hover:from-blue-900/30 dark:hover:to-purple-900/30
+              <div class="max-h-60 overflow-y-auto scrollbar-thin scrollbar-thumb-blue-500 scrollbar-track-blue-100">
-                      cursor-pointer
+                <a
-                      transition-colors duration-150
+                  v-for="theme in availableThemes"
-                      group"
+                  :key="theme"
-              >
+                  @click="loadTheme(theme); currentTheme = theme; themeDropdownOpen = false"
-                <div class="w-2 h-2 rounded-full bg-blue-400 group-hover:bg-blue-500 
+                  class="flex items-center space-x-3 px-4 py-3
-                            transition-colors duration-150"></div>
+                        text-gray-700 dark:text-gray-200
-                <span class="font-medium">{{ theme }}</span>
+                        hover:bg-gradient-to-r hover:from-blue-50 hover:to-purple-50
-              </a>
+                        dark:hover:from-blue-900/30 dark:hover:to-purple-900/30
+                        cursor-pointer
+                        transition-colors duration-150
+                        group"
+                >
+                  <div class="w-2 h-2 rounded-full bg-blue-400 group-hover:bg-blue-500 
+                              transition-colors duration-150"></div>
+                  <span class="font-medium truncate">{{ theme }}</span>
+                </a>
+              </div>
             </div>
-          </div>
+          </transition>
-        </div>        
+        </div>    
         
       </div>
     </div>
@@ -382,7 +391,12 @@ export default {
 
   },
   methods: {
-    
+    toggleThemeDropDown()
+    {
+      console.log("Toggling theme down:", this.themeDropdownOpen)
+      this.themeDropdownOpen = !this.themeDropdownOpen;
+      console.log("Toggled theme down:", this.themeDropdownOpen)
+    },
     addCustomLanguage() {
         if (this.customLanguage.trim() !== '') {
         this.selectLanguage(this.customLanguage);
@@ -393,6 +407,7 @@ export default {
       const dropdown = this.$el
       if (!dropdown.contains(e.target)) {
         this.themeDropdownOpen = false
+        console.log("Outside click detected")
       }
     },
     getSavedTheme() {

web/src/themes/amber.css

@@ -282,7 +282,7 @@ body {
 }
 
 .app-card {
-  @apply transition-all duration-300 ease-in-out bg-gradient-to-br from-amber-50 to-amber-100 dark:from-gray-800 dark:to-gray-700 text-gray-800 dark:text-gray-200 shadow-md hover:shadow-lg;
+  @apply transition-all duration-300 ease-in-out bg-gradient-to-br from-amber-50 to-amber-100 dark:from-gray-800 dark:to-gray-700 text-gray-800 dark:text-gray-200 border rounded-xl shadow-lg p-6 hover:shadow-xl;
 }
 
 .app-card:hover {

web/src/themes/borg.css

@@ -215,6 +215,24 @@ body {
   100% { background-position: 100% 0; }
 }
 
+
+.app-card {
+  @apply transition-all duration-300 ease-in-out bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-100 border rounded-xl shadow-lg p-6 hover:shadow-xl ;
+}
+
+.app-card:hover {
+  @apply transform -translate-y-1;
+}
+
+button {
+  @apply transition-all duration-300 ease-in-out;
+}
+
+button:hover {
+  @apply transform -translate-y-0.5;
+}
+
+
 .scrollbar-thin {
   scrollbar-width: thin;
   scrollbar-color: #00ff00 #1a1a1a;
@@ -276,3 +294,17 @@ body {
   @apply absolute top-0 left-0 h-full bg-gradient-to-r from-emerald-500 to-emerald-600 dark:from-emerald-400 dark:to-emerald-500 transition-all duration-300 
   [background-image:repeating-linear-gradient(45deg,transparent,transparent_10px,rgba(0,0,0,0.2)_10px,rgba(0,0,0,0.2)_20px)]
 }
+
+
+
+
+
+
+
+
+
+
+
+
+
+

web/src/themes/default.css

@@ -232,7 +232,7 @@ body {
 }
 
 .app-card {
-  @apply transition-all duration-300 ease-in-out bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-100 shadow-md hover:shadow-lg;
+  @apply transition-all duration-300 ease-in-out bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-100 border rounded-xl shadow-lg p-6 hover:shadow-xl ;
 }
 
 .app-card:hover {

web/src/themes/lollms_blue.css

@@ -282,7 +282,7 @@ body {
 
 
 .app-card {
-  @apply transition-all duration-300 ease-in-out bg-gradient-to-br from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-900 text-gray-800 dark:text-gray-100 shadow-md hover:shadow-lg;
+  @apply transition-all duration-300 ease-in-out bg-gradient-to-br from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-900 text-gray-800 dark:text-gray-100 rounded-xl shadow-lg p-6 hover:shadow-xl border;
 }
 
 .app-card:hover {

web/src/themes/strawberry.css

@@ -281,7 +281,7 @@ body {
 
 
 .app-card {
-  @apply transition-all duration-300 ease-in-out bg-gradient-to-br from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-900 text-gray-800 dark:text-gray-100 shadow-md hover:shadow-lg;
+  @apply transition-all duration-300 ease-in-out bg-gradient-to-br from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-900 text-gray-800 dark:text-gray-100 border rounded-xl shadow-lg p-6 hover:shadow-xl;
 }
 
 .app-card:hover {

web/src/views/AppsZoo.vue

@@ -222,9 +222,8 @@ export default {
         return matchesSearch && matchesCategory && matchesInstalled;
       });
     },
-
     sortedAndFilteredApps() {
-      return this.filteredApps.sort((a, b) => {
+      return [...this.filteredApps].sort((a, b) => {
         let comparison = 0;
         switch (this.sortBy) {
           case 'name':
@@ -234,20 +233,27 @@ export default {
             comparison = a.author.localeCompare(b.author);
             break;
           case 'date':
-            comparison = new Date(a.creation_date) - new Date(b.creation_date);
+            comparison = this.getDateValue(a.creation_date) - this.getDateValue(b.creation_date);
             break;
           case 'update':
-            comparison = new Date(a.last_update_date) - new Date(b.last_update_date);
+            comparison = this.getDateValue(a.last_update_date) - this.getDateValue(b.last_update_date);
             break;
         }
         return this.sortOrder === 'asc' ? comparison : -comparison;
       });
     },
+
     favoriteApps() {
       return this.combinedApps.filter(app => this.favorites.includes(app.appName));
     },
   },
   methods: {
+    getDateValue(dateString) {
+        if (!dateString) return 0; // Gère les valeurs manquantes
+        const date = new Date(dateString);
+        return isNaN(date.getTime()) ? 0 : date.getTime();
+    },
+
     toggleSortOrder() {
       this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
     },

web/src/views/PersonalitiesZoo.vue

@@ -85,11 +85,11 @@
       </div>
       <div class="container mx-auto px-4 flex flex-column pb-20">
         <!-- Current Category Section -->
-        <h2 class="text-2xl font-bold my-8">{{ currentCategoryName }} ({{ sortedAndFilteredApps.length }})</h2>
+        <h2 class="text-2xl font-bold my-8">{{ currentCategoryName }} ({{ sortedAndFilteredPersonalities.length }})</h2>
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
           <personality-entry
             ref="personalitiesZoo"
-            v-for="pers in sortedAndFilteredApps"
+            v-for="pers in sortedAndFilteredPersonalities"
             :key="pers.uid"
             :personality="pers"
             :select_language="true"
@@ -199,8 +199,8 @@ export default {
         return matchesSearch && matchesCategory;
       });
     },    
-    sortedAndFilteredApps() {
+    sortedAndFilteredPersonalities() {
-      return this.filteredApps.sort((a, b) => {
+      return [...this.filteredApps].sort((a, b) => {
         let comparison = 0;
         switch (this.sortBy) {
           case 'name':
@@ -210,21 +210,26 @@ export default {
             comparison = a.author.localeCompare(b.author);
             break;
           case 'date':
-            comparison = new Date(a.creation_date) - new Date(b.creation_date);
+            comparison = this.getDateValue(a.creation_date) - this.getDateValue(b.creation_date);
             break;
           case 'update':
-            comparison = new Date(a.last_update_date) - new Date(b.last_update_date);
+            comparison = this.getDateValue(a.last_update_date) - this.getDateValue(b.last_update_date);
             break;
         }
         return this.sortOrder === 'asc' ? comparison : -comparison;
       });
     },
+
     favoriteApps() {
       return this.combinedApps.filter(app => this.favorites.includes(app.uid));
     },
   },
   methods: {
-
+    getDateValue(dateString) {
+        if (!dateString) return 0; // Gère les valeurs manquantes
+        const date = new Date(dateString);
+        return isNaN(date.getTime()) ? 0 : date.getTime();
+    },
     async onPersonalitySelected(pers) {
             console.log('on pers', pers)
             // eslint-disable-next-line no-unused-vars