feat: add check backup

components/SystemResources.vue

@@ -87,13 +87,16 @@ const metrics = computed(() => [
 
 <style scoped>
 .resources-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;
+  border: 1px solid rgb(var(--m-border) / 0.32);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  transition: background-color 0.4s ease;
+  transition: background-color 0.4s ease, border-color 0.2s ease;
 }
 
 .card-header {
@@ -121,10 +124,10 @@ const metrics = computed(() => [
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 0.75rem;
   align-items: center;
-  padding: 0.875rem 1rem;
-  border-radius: 10px;
-  background: rgb(var(--m-tertiary));
-  border: 1px solid rgb(var(--m-accent) / 0.06);
+  padding: 0.95rem 1rem;
+  border-radius: 14px;
+  background: rgb(var(--m-tertiary) / 0.72);
+  border: 1px solid rgb(var(--m-border) / 0.22);
 }
 
 .metric-copy {
@@ -187,4 +190,18 @@ const metrics = computed(() => [
 .tone-error {
   background: rgb(var(--m-error));
 }
+
+@media (max-width: 820px) {
+  .resources-card {
+    padding: 1rem;
+  }
+
+  .metric-row {
+    grid-template-columns: 1fr;
+  }
+
+  .metric-value-area {
+    justify-content: flex-start;
+  }
+}
 </style>