Add custom CSS for improved styling and layout enhancements

conf.yml

@@ -8,6 +8,34 @@ appConfig:
   routingMode: history
   statusCheck: true
   statusCheckInterval: 60
+  externalStyleSheet:
+    - https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap
+  customCss: |
+    :root {
+      --nik-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
+    }
+
+    body, .q-layout, .q-page, .q-item, .q-card, .q-toolbar, .markdown {
+      font-family: var(--nik-font) !important;
+      letter-spacing: 0.1px;
+    }
+
+    /* Softer, more modern cards */
+    .q-card {
+      border-radius: 16px !important;
+      box-shadow: 0 10px 30px rgba(0,0,0,.25) !important;
+      backdrop-filter: blur(10px);
+    }
+
+    /* Sidebar polish */
+    .q-drawer {
+      backdrop-filter: blur(12px);
+    }
+
+    /* Item tiles feel less “boxed” */
+    .item {
+      border-radius: 14px !important;
+    }
 sections:
   - name: At a Glance
     icon: mdi-home-variant-outline