Update style.css

Author: Vanish-Coder

style.css

@@ -1,3 +1,4 @@
+/* ===== Body & Container ===== */
 body {
   font-family: system-ui, sans-serif;
   background: #f5f5f5;
@@ -16,114 +17,189 @@ body {
   width: 90vw;
   max-width: 600px;
   height: 85vh;
+  max-height: 85vh;
   text-align: center;
   box-shadow: 0 10px 25px rgba(0,0,0,0.1);
   display: flex;
   flex-direction: column;
   overflow-y: auto;
 }
 
-h1 { font-size: 2.5rem; margin-bottom: 0.3rem; }
+@media (max-width: 768px) {
+  .container {
+    height: 85vh;
+    max-height: 85vh;
+  }
+}
+
+/* ===== Headings ===== */
+h1 {
+  margin-bottom: 0.5rem;
+  font-size: 2.5rem;
+}
 
-.shortcut-hint {
+.shortcut-note {
   font-size: 0.95rem;
-  color: #4b5563;
   margin-bottom: 1rem;
+  color: #374151;
 }
 
+/* ===== Mode Selector ===== */
 .mode-selector {
-  margin: 1.2rem 0;
+  margin-bottom: 1.5rem;
   display: flex;
+  align-items: center;
   justify-content: center;
   gap: 0.8rem;
 }
 
-.buttons button,
-.actions button,
-#addToPractice,
+.mode-selector label {
+  font-weight: 600;
+  font-size: 1.1rem;
+}
+
+.mode-selector select {
+  padding: 0.6rem 1rem;
+  font-size: 1rem;
+  border: 2px solid #4f46e5;
+  border-radius: 6px;
+  cursor: pointer;
+  background: white;
+  color: #1f2937;
+  font-weight: 500;
+}
+
+.mode-selector select:hover {
+  background: #f0f0ff;
+}
+
+.mode-selector select:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
+}
+
+/* ===== Buttons ===== */
+#addToPractice {
+  margin-bottom: 1rem;
+  background: #8b5cf6;
+  padding: 0.8rem 1.2rem;
+  border: none;
+  border-radius: 8px;
+  color: white;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+#addToPractice:hover {
+  background: #7c3aed;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+}
+
+#addToPractice:active {
+  transform: translateY(0);
+}
+
 #clearCache {
-  margin: 0.5rem;
+  margin-bottom: 1rem;
+  margin-left: 0.5rem;
+  background: #ef4444;
+  padding: 0.8rem 1.2rem;
+  border: none;
+  border-radius: 8px;
+  color: white;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.buttons button,
+.actions button {
+  margin: 0.6rem;
   padding: 1rem 1.5rem;
   border: none;
   border-radius: 8px;
   cursor: pointer;
   background: #4f46e5;
   color: white;
-  font-size: 1.2rem;
+  font-size: 1.3rem;
   font-weight: 600;
 }
 
-#clearCache { background: #ef4444; }
-#addToPractice { background: #8b5cf6; }
+@media (max-width: 768px) {
+  .buttons button,
+  .actions button {
+    font-size: 1.35rem;
+    padding: 1.1rem 1.5rem;
+    margin: 0.7rem;
+  }
+}
 
+/* ===== Input ===== */
 input {
   width: 100%;
   padding: 0.8rem;
-  font-size: 1.2rem;
   margin-top: 1rem;
+  font-size: 1.2rem;
+}
+
+@media (max-width: 768px) {
+  input {
+    font-size: 1.15rem;
+    padding: 0.9rem;
+  }
 }
 
+/* ===== Feedback ===== */
 #feedback {
   margin-top: 1rem;
   font-weight: bold;
   font-size: 1.2rem;
 }
 
+@media (max-width: 768px) {
+  #feedback {
+    font-size: 1.15rem;
+  }
+}
+
 /* ===== Popup ===== */
 .popup-overlay {
   position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,0.5);
+  top:0; left:0; right:0; bottom:0;
+  background: rgba(0,0,0,0.4);
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 9999;
+  z-index: 1000;
 }
 
-.popup-box {
+.popup-content {
   background: white;
-  padding: 1.8rem;
+  padding: 2rem;
   border-radius: 12px;
-  max-width: 420px;
   width: 90%;
+  max-width: 500px;
   text-align: center;
+  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
 }
 
-.popup-box a {
-  color: #4f46e5;
-  font-weight: 600;
-}
-
-.dont-show {
-  display: block;
+#popupControls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
   margin-top: 1rem;
-  font-size: 0.9rem;
 }
 
-/* Got it button bigger */
-.popup-box button.popup-confirm {
-  margin-top: 1.4rem;
-  background: #4f46e5;
-  border: none;
-  color: white;
-  padding: 0.9rem 2.2rem;
-  border-radius: 10px;
-  font-size: 1.15rem;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.popup-box button.popup-confirm:hover {
-  background: #4338ca;
+#popupControls label {
+  margin: 0;
+  font-size: 0.9rem;
 }
 
 /* ===== Button Glow ===== */
-@keyframes pressGlow {
-  0% { box-shadow: 0 0 0 rgba(79,70,229,0); }
-  50% { box-shadow: 0 0 18px rgba(79,70,229,0.7); }
-  100% { box-shadow: 0 0 0 rgba(79,70,229,0); }
-}
-
 .button-glow {
-  animation: pressGlow 0.6s ease-out;
+  box-shadow: 0 0 12px 4px rgba(79, 70, 229, 0.7);
+  transition: box-shadow 0.2s ease;
 }