update ui design for all pages

src/index.css

@@ -1,5 +1,12 @@
 @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');
 
+/* Astryx component styles, pre-compiled by the package (`@layer astryx-base`).
+   Only the component layer is imported: Tailwind's preflight is already the
+   app's reset, and Astryx's own reset would be a second, global one. The theme
+   package is likewise left out — Astryx components in KROW wear KROW's tokens,
+   which the `.krow-astryx` scope below supplies. */
+@import '@astryxdesign/core/astryx.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -242,6 +249,91 @@
   }
 }
 
+/**
+ * Astryx components, wearing KROW.
+ *
+ * Astryx reads its own CSS custom properties, so dressing it in the KROW
+ * language is a matter of re-pointing those tokens at the ones the rest of the
+ * app already uses — not of overriding component rules. Scoped to `.krow-astryx`
+ * so nothing outside an Astryx island is touched, and unlayered so it wins over
+ * the package's `@layer astryx-base` defaults.
+ *
+ * Only the tokens Tab and TabList actually read are declared. Anything else
+ * keeps the package default, which is the point of restating as little as
+ * possible.
+ */
+.krow-astryx {
+  /* The selected indicator rule. KROW blue is the active state. */
+  --color-accent: #0A39DF;
+  /* Tab labels: selected picks up brand, the rest the app's secondary ink. */
+  --color-text-primary: #0A39DF;
+  --color-text-secondary: hsl(var(--ink-3));
+  --color-border: hsl(var(--border));
+  /* The hover wash sits *over* the label, so it has to stay translucent — an
+     opaque surface token here paints the tab's own text out. */
+  --color-overlay-hover: rgba(10, 57, 223, 0.06);
+  --color-overlay-pressed: rgba(10, 57, 223, 0.11);
+  --font-family-body: var(--font-body);
+}
+
+.dark .krow-astryx {
+  --color-accent: #5B8DEF;
+  --color-text-primary: #93B4FF;
+  --color-overlay-hover: rgba(147, 180, 255, 0.10);
+  --color-overlay-pressed: rgba(147, 180, 255, 0.16);
+}
+
+/**
+ * Give Astryx's own button styling back.
+ *
+ * Astryx ships its component CSS inside `@layer astryx-base`, while Tailwind
+ * emits its preflight unlayered — and unlayered always beats a layer, whatever
+ * the selectors. So Tailwind's `button { font-size: 100%; padding: 0; color:
+ * inherit }` reset silently flattened every Astryx tab: no size, no padding, no
+ * label colour, leaving five words run together under a stray indicator.
+ *
+ * `revert-layer` rolls each property back to the previous layer's value, which
+ * is Astryx's own. Nothing is re-specified here — the design system keeps
+ * authorship of its sizing, and this only stops the reset from reaching it.
+ */
+/* Same story for `hasDivider`: preflight's `*{border-width:0}` zeroed the rail
+   under the strip, so the tabs floated over the content with nothing separating
+   them from it. */
+.krow-astryx .astryx-tab-list {
+  border-bottom-width: revert-layer;
+}
+
+.krow-astryx .astryx-tab {
+  font-family: revert-layer;
+  font-size: revert-layer;
+  font-weight: revert-layer;
+  line-height: revert-layer;
+  color: revert-layer;
+  padding-inline: revert-layer;
+}
+
+/**
+ * Tab strips scroll rather than wrap.
+ *
+ * A tab row that wraps to a second line stops reading as one control, and on a
+ * phone there is never room for five section names. The strip takes the
+ * overflow so the page itself never gains a horizontal scrollbar.
+ */
+.krow-astryx-scroll {
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+.krow-astryx-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.krow-astryx-scroll > nav {
+  flex-wrap: nowrap;
+  min-width: max-content;
+}
+
 @layer base {
   /* Respect reduced-motion globally rather than per component. */
   @media (prefers-reduced-motion: reduce) {