imporoved panel active letter visibility

Author: Ciphrox

src/assets/styles/panel.css

@@ -1,4 +1,5 @@
-:root {
+:root,
+[data-theme="dark"] {
   --bg: #0f172a;
   --surface: #1e293b;
   --text: #f8fafc;
@@ -18,6 +19,13 @@
   --color-10: linear-gradient(135deg, #14b8a6, #0d9488);
 }
 
+[data-theme="light"] {
+  --bg: #f8fafc;
+  --surface: #e2e8f0;
+  --text: #0f172a;
+  --shadow: rgba(0, 0, 0, 0.1);
+}
+
 .panel__options {
   background: var(--surface);
   z-index: 10;
@@ -44,27 +52,18 @@
     cursor: pointer;
     transition: 0.2s;
     position: relative;
+    color: var(--text);
   }
 
   & label:focus-within,
   & .icon:hover {
     background: var(--primary);
+    color: white;
   }
 
   & input[type="radio"]:focus-visible+.icon {
     outline: 2px solid var(--primary);
     outline-offset: 2px;
-    border-radius: 0.5rem;
-  }
-
-  & input[type="radio"]:checked+.icon {
-    color: white;
-    background: var(--primary);
-    border-radius: 0.5rem;
-    padding: 0.25rem;
-  }
-
-  & .sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -81,6 +80,7 @@
   }
 
   & input[type="radio"]:checked+.icon {
+    background: var(--primary);
     color: white;
   }
 
@@ -152,7 +152,7 @@
     align-items: center;
     justify-content: center;
     font-size: 3rem;
-    color: var(--text);
+    color: white;
     background: var(--surface);
     border-radius: 0.5rem;
     box-shadow: 0 2px 8px var(--shadow);
@@ -203,7 +203,7 @@
   & .panel__cell.front {
     font-size: 10rem;
     background-color: black;
-    transition: font-size 0.6s, background-color 0.6s;
+    transition: transform 0.6s, font-size 0.6s, background-color 0.6s;
   }
 
   & .panel__cell:nth-child(1) {