# Fluid

An immersive instrument for checking one subscription. There is no card feed: the mobile canvas itself is a vessel, and the water height represents the selected subscription's actual remaining data percentage. A quiet top navigation gives access to subscriptions, wallet and purchasing. A low account picker and swipe paging keep the primary number uninterrupted.

The visual language is translucent sky, cyan water, deep blue typography, generous vertical space and very large tabular figures. The dark theme becomes a deep ocean with luminous blue water. A custom two-layer SVG wave follows the real fill height; a 900 ms entrance runs once for each loaded value, and selection transitions take 330 ms. Reduced motion disables both CSS and Web Animations movement. Unlimited and unavailable data never masquerade as a measured percentage.

The lower selector opens a searchable list with real shared filters, sorting and ten-at-a-time pagination. Accessible arrow controls duplicate swiping. Active access prioritizes copying and QR; expired access prioritizes renewal; missing or disabled accounts prioritize support. Details expose all shared account operations, confirmations and failure handling. Display names and exact technical usernames coexist, and the latter remain LTR.

All business data and state come from `../shared/app.js` and its single shared API. The only local state is the selected subscription, picker visibility, focus and animation bookkeeping. Wallets, plans and dialogs inherit the blue palette, tactile rounded controls and typography.

Verified in Chromium with Playwright at 360 px and 390 px, in Persian and English, with both themes. No horizontal overflow or browser exceptions. Checked active/expired/missing paging, expired deletion access through details, search/no-match/clear, selection, wallet, plans, partner ten-to-twenty pagination, a search beyond the initial page, newcomer purchasing access, and reduced motion (zero running animations). Browser artifacts and the repeatable QA script are in `output/playwright/fluid-*`.