feat: add check backup

components/Speed-test.vue

@@ -118,10 +118,13 @@ async function runTests() {
 
 <style scoped>
 .speedtest-card {
-  background: rgb(var(--m-secondary));
-  border-radius: 12px;
+  background:
+    linear-gradient(180deg, rgb(var(--m-secondary) / 0.78), rgb(var(--m-secondary) / 0.92));
+  border-radius: 20px;
   padding: 1.25rem;
-  transition: background-color 0.4s ease;
+  border: 1px solid rgb(var(--m-border) / 0.32);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
+  transition: background-color 0.4s ease, border-color 0.2s ease;
 }
 
 .card-header {
@@ -152,9 +155,15 @@ async function runTests() {
   transition: all 0.2s ease;
 }
 
+.reload-btn:focus-visible {
+  outline: 2px solid rgb(var(--m-accent) / 0.8);
+  outline-offset: 2px;
+}
+
 .reload-btn:hover:not(:disabled) {
   background: rgb(var(--m-accent) / 0.12);
   border-color: rgb(var(--m-accent) / 0.25);
+  transform: translateY(-1px);
 }
 
 .reload-btn:disabled {
@@ -169,10 +178,10 @@ async function runTests() {
 }
 
 .metric-card {
-  background: rgb(var(--m-tertiary));
-  border-radius: 10px;
+  background: rgb(var(--m-tertiary) / 0.72);
+  border-radius: 14px;
   padding: 1rem;
-  border: 1px solid rgb(var(--m-accent) / 0.06);
+  border: 1px solid rgb(var(--m-border) / 0.22);
   transition: border-color 0.2s ease;
 }
 
@@ -211,12 +220,22 @@ async function runTests() {
 
 .error-text {
   margin-top: 0.75rem;
-  border-radius: 8px;
-  border: 1px solid rgb(var(--m-error) / 0.12);
+  border-radius: 14px;
+  border: 1px solid rgb(var(--m-error) / 0.16);
   background: rgb(var(--m-error) / 0.06);
   padding: 0.75rem 0.875rem;
   font-family: var(--font-mono);
   font-size: 0.75rem;
   color: rgb(var(--m-error));
 }
+
+@media (max-width: 820px) {
+  .speedtest-card {
+    padding: 1rem;
+  }
+
+  .metrics-grid {
+    grid-template-columns: 1fr;
+  }
+}
 </style>