feat(ui): redesign with transparent liquid glass (#414)

* docs: add design spec for iOS 26 Liquid Glass UI redesign

* docs: add implementation plan for iOS 26 Liquid Glass UI redesign

* feat(ui): add liquid glass CSS variables and update root layouts

* feat(ui): update Card and Modal components to iOS 26 Liquid Glass style

* feat(ui): redesign dashboard page to Liquid Glass style

* feat(ui): redesign node management page cards and charts

* feat(ui): redesign monitor page to Liquid Glass style

* feat(ui): redesign group and panel-sharing cards to Liquid Glass

* feat(ui): redesign settings and user components to Liquid Glass

* feat(ui): redesign profile and auth pages to Liquid Glass

* fix(ui): revert to LineChart to fix compilation issues

* refactor(ui): extract dashboard user header and cleanup admin layout

* feat(ui): refine monitor page hero metrics and fix build

* fix(ui): real data for monitor hero metrics and card padding adjustments

* fix(ui): apply global card padding and fix index layouts

* feat(ui): implement liquid-glass-react for all Card components

* fix(ui): resolve liquid-glass-react rendering issues causing invisible text and broken layout

* fix(ui): native CSS liquid-glass effect replacing NPM package

* fix(ui): cleanup duplicate closing tags and complete liquid glass tables

* fix(ui): apply perfect rounded corners to list views and table headers in non-compact mode

* fix(ui): apply liquid glass styling to grouped rules view in forward page

* fix(ui): re-implement liquid-glass natively to prevent text distortion and remove package dependency

* fix(ui): remove mouse distortion and preserve proper liquid glass texture

* fix(ui): remove svg filter causing text distortion and replace with pure css liquid glass

* fix(ui): apply properly scoped border radius to table headers

* fix(ui): remove hardcoded bg-default-50/60 from TableHeader

* fix(ui): apply global liquid glass styling and transparent overlays to all modals and dialogs

* fix(ui): remove absolute/relative class conflicts hiding Dialog modales and implement pure transparent layout

* feat(ui): apply global liquid glass styling to cards, buttons, and diagnosis modals

docs/superpowers/specs/2026-04-04-flvx-ios26-redesign-design.md

@@ -0,0 +1,60 @@
+# Flvx iOS 26 Liquid Glass UI Redesign Spec
+
+## 1. Overview
+This document specifies the comprehensive UI/UX redesign of the Flvx frontend using an "Apple iOS 26 Liquid Glass" design language. The goal is to elevate the visual quality of the entire application, making it modern, spatially aware, and highly legible through extensive use of blur, translucency, squircle borders, and semantic contrast.
+
+## 2. Scope
+The redesign covers 100% of the frontend routing pages and overlay components under `vite-frontend/src/pages/` and global UI modules:
+- Dashboard (`dashboard.tsx`)
+- Node Management (`node.tsx`)
+- Tunnel & Rule Configurations (`tunnel.tsx`, `forward.tsx`)
+- System Monitor (`monitor.tsx`)
+- User Management (`user.tsx`)
+- Speed Limit Management (`limit.tsx`)
+- Group Management (`group.tsx`)
+- Panel Sharing (`panel-sharing.tsx`)
+- Global Settings & Config (`config.tsx`, `settings.tsx`)
+- Profile & Change Password (`profile.tsx`, `change-password.tsx`)
+- All related Modals, Drawers, and floating UI (e.g., "Create Node", "Add Rule" forms).
+
+## 3. Design System & Tokens
+The new UI replaces traditional solid-color borders and flat surfaces with the following spatial design tokens:
+
+### 3.1. Corner Radii (Squircles)
+- **Outer Shell / Viewports**: 32px (`rounded-3xl` equivalent)
+- **Cards / Containers**: 24px (`rounded-2xl`)
+- **Buttons / Inputs**: 16px (`rounded-xl` or `rounded-full`)
+- **Badges / Tags**: 6px or fully rounded.
+
+### 3.2. Backgrounds & Blurs
+- **Global Background**: A mesh gradient blending soft pinks and blues (`#ff9a9e`, `#fecfef`, `#a1c4fd`, `#c2e9fb`).
+- **Glass Base (Primary Containers)**: `backdrop-blur-3xl` with an ultra-thin white overlay (`rgba(255, 255, 255, 0.6)` or `#ffffff99`).
+- **Glass Inner Glow (Borders)**: 1px solid `rgba(255, 255, 255, 0.8)` (`#ffffffcc`).
+- **Modals Background Overlay**: 30% black overlay (`#0000004d`).
+
+### 3.3. Semantic Colors
+- **Brand / Active / Primary / TCP**: Blue `#007aff`
+- **Healthy / Success / Online**: Green `#34c759`
+- **Warning / Wait / UDP**: Orange `#ff9500`
+- **Danger / Offline / Delete**: Red `#ff3b30`
+- **Secondary / Purple / Data**: Purple `#af52de`
+- **Text**: Primary (`#1d1d1f`), Secondary (`#86868b`).
+
+### 3.4. Elevation & Shadow
+- Soft, highly diffused drop shadows rather than sharp lines: e.g., `box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1)`.
+
+## 4. Implementation Strategy
+We will implement the redesign systematically across the React + TailwindCSS + shadcn/HeroUI stack:
+1. **CSS Variables / Tailwind Config**: Inject the new Liquid Glass design tokens (colors, extended radiuses, customized backdrop blurs, box shadows) into `tailwind.config.js` and `globals.css`.
+2. **Global App Shell**: Update the root layout (`index.tsx` or main `App` layout) to host the dynamic mesh gradient background and the new translucent sidebar.
+3. **Component Re-styling**: 
+   - Override HeroUI default card, input, and modal styles using custom `classNames`.
+   - Update `MetricCard`, `PageEmptyState`, `PageLoadingState`, and other base components to support the `glass_card` spec.
+4. **Page-by-Page Integration**: Rewrite the JSX of each page to utilize the new layout structure, ensuring all existing interactive state and API logic is seamlessly preserved.
+5. **Modal System Update**: Apply the transparent `#0000004d` overlay and 480px width glassy card style to all global dialogs.
+
+## 5. Success Criteria
+- [ ] No regression in business logic; all forms, interactions, and data rendering operate exactly as before.
+- [ ] The visual system consistently employs the `glass_bg`, `glass_card`, and corresponding squircle radiuses across 100% of the UI.
+- [ ] Modals and Overlays correctly blur the background mesh gradient.
+- [ ] All responsive layouts appropriately wrap the card components on smaller displays.