@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 900;
  font-display: block;
  src: url('/static/fonts/cairo-arabic.woff2?v=20261012a') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 900;
  font-display: block;
  src: url('/static/fonts/cairo-latin-ext.woff2?v=20261012a') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 900;
  font-display: block;
  src: url('/static/fonts/cairo-latin.woff2?v=20261012a') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Almarai Figures';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/almarai-figures-400.woff2?v=20261012a') format('woff2');
  unicode-range: U+0660-0669, U+066B-066C;
  ascent-override: 130.3%;
  descent-override: 57.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Almarai Figures';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/almarai-figures-700.woff2?v=20261012a') format('woff2');
  unicode-range: U+0660-0669, U+066B-066C;
  ascent-override: 130.3%;
  descent-override: 57.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Almarai Figures';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/almarai-figures-800.woff2?v=20261012a') format('woff2');
  unicode-range: U+0660-0669, U+066B-066C;
  ascent-override: 130.3%;
  descent-override: 57.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: block;
  src: url('/static/fonts/outfit-latin-ext.woff2?v=20261012a') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: block;
  src: url('/static/fonts/outfit-latin.woff2?v=20261012a') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/robotomono-latin.woff2?v=20261012a') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  --font-app: 'Cairo', 'Outfit', sans-serif;
  --font-app-figures: 'Almarai Figures', var(--font-app);
  --font-system: system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, 'Roboto Mono', Menlo, monospace;
  --font-figures-mono: 'Almarai Figures', var(--font-mono);
  --font-size-xs: 0.8125rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 0.9375rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --color-slate-950: #020617;
  --color-slate-900: #0f172a;
  --color-slate-800: #1e293b;
  --color-slate-200: #e2e8f0;
  --color-slate-50: #f8fafc;
  --color-sky-600: #0284c7;
  --color-sky-400: #38bdf8;
  --color-sky-300: #7dd3fc;
  --color-sky-200: #bae6fd;
  --color-slate-400: #94a3b8;
  --color-green-400: #4ade80;
  --color-red-400: #f87171;
  --color-amber-400: #fbbf24;
  --color-purple-400: #c084fc;

  --color-emerald-950: #062419;
  --color-emerald-900: #0d4a2e;
  --color-emerald-800: #0f5132;
  --color-emerald-600: #059669;
  --color-emerald-500: #10b981;
  --color-emerald-400: #34d399;
  --color-mint-400: #34d399;
  --color-mint-300: #6ee7b7;
  --color-badge-chip: rgba(12, 58, 92, 0.95);
  --color-featured-soft: rgba(12, 58, 92, 0.25);
  --color-accent-chip: rgba(56, 189, 248, 0.12);
  --color-accent-chip-border: rgba(56, 189, 248, 0.28);
  --color-brand-chip: #082f49;
  --glow-accent: 0 4px 24px -2px rgba(56, 189, 248, 0.35);
  --glow-brand: 0 4px 20px -2px rgba(56, 189, 248, 0.35);
  --glow-accent-strong: 0 12px 38px -4px rgba(56, 189, 248, 0.55);
  --glow-brand-strong: 0 8px 28px -2px rgba(56, 189, 248, 0.55);
  --glow-nav-add: 0 4px 18px rgba(56, 189, 248, 0.45);
  --glow-danger: 0 4px 12px -2px rgba(248, 113, 113, 0.30);

  --color-elevated-soft: rgba(192, 132, 252, 0.12);
  --color-elevated-border: rgba(192, 132, 252, 0.30);


  --color-page: var(--color-slate-950);

  --color-surface: rgba(33, 46, 70, 0.85);
  --color-surface-solid: var(--color-slate-900);
  --color-surface-input: rgba(15, 23, 42, 0.8);
  --color-surface-hover: rgba(255, 255, 255, 0.10);
  --color-segment-thumb: #36414c;

  --color-surface-subtle: rgba(255, 255, 255, 0.055);
  --color-surface-band: rgba(15, 23, 42, 0.6);
  --color-btn-face: var(--color-surface);
  --color-surface-row: #2a374c;
  --color-stripe-down: rgba(0, 0, 0, 0.45);

  --color-surface-raised: #202c47;

  --glow-ambient: rgba(56, 189, 248, 0.13);
  --color-surface-footer: rgba(2, 6, 23, 0.7);
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.20);
  --color-border-control: #8390a4;
  --color-text: var(--color-slate-50);
  --color-text-placeholder: #94a3b8;
  --color-text-muted: #a8b5cc;
  --color-brand: var(--color-sky-400);
  --color-brand-hover: #0ea5e9;
  --color-accent-on-page: var(--color-sky-400);
  --color-success: var(--color-green-400);
  --color-danger: var(--color-red-400);
  --color-warning: var(--color-amber-400);
  --color-series-2: var(--color-sky-200);
  --color-series-3: var(--color-slate-400);
  --color-accent: var(--color-purple-400);
  --color-on-brand: var(--color-slate-900);
  --color-on-strong: var(--color-slate-900);

  --color-provider-face: #131314;
  --color-provider-face-hover: #1e1f20;
  --color-provider-border: #8e918f;
  --color-provider-text: #e3e3e3;
  --gradient-page: linear-gradient(135deg, var(--color-slate-900) 0%, var(--color-slate-950) 100%);
  --gradient-final: linear-gradient(135deg, rgba(13, 74, 46, 0.35) 0%, rgba(15, 23, 42, 0.7) 100%);


  --color-receipt: #1e2b3f;
  --color-ink: #eef3f8;
  --color-rule: #31445a;

  --color-surface-nav: rgba(15, 23, 42, 0.92);
  --color-page-top: var(--color-slate-900);

  --color-brand-soft: rgba(56, 189, 248, 0.12);
  --color-brand-border: rgba(56, 189, 248, 0.3);
  --color-stamp: #f69910;
  --color-success-soft: rgba(74, 222, 128, 0.15);
  --color-success-border: rgba(74, 222, 128, 0.3);
  --color-danger-soft: rgba(248, 113, 113, 0.15);
  --color-danger-border: rgba(248, 113, 113, 0.3);
  --color-danger-ink: #fca5a5;
  --color-warning-soft: rgba(251, 191, 36, 0.15);
  --color-warning-border: rgba(251, 191, 36, 0.3);
  --color-accent-soft: rgba(192, 132, 252, 0.12);
  --color-accent-border: rgba(192, 132, 252, 0.3);
  --color-muted-soft: rgba(148, 163, 184, 0.15);
  --color-muted-border: rgba(148, 163, 184, 0.3);

  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-card: 20px;
  --radius-hero: 24px;
  --page-pad: 16px;
  --section-gap: 20px;
  --section-title-gap: 8px;
  --card-pad: 16px;
  --hero-pad: 20px;
  --card-gap: 12px;
  --press-opacity: 1;
  --press-scale: 0.95;
  --press-duration: 80ms;
  --radius-inset: var(--radius-lg);
  --radius-dialog: 20px;
  --radius-alert: 24px;
  --radius-sheet: 26px;
  --shadow-sheet: 0 -10px 40px rgba(2, 6, 23, .25);
  --shadow-alert: 0 24px 64px rgba(2, 6, 23, .35);
  --shadow-segment: 0 1px 3px rgba(15, 23, 42, .16);

  --measure-content: clamp(720px, 62vw, 960px);


  --nav-height: 44px;
  --radius-pill: 999px;

  --control-height-sm: 36px;
  --control-height: 44px;
  --control-height-lg: 48px;
  --focus-ring: 0 0 0 3px rgba(56, 189, 248, 0.2);
  --focus-ring-danger: 0 0 0 3px rgba(248, 113, 113, 0.2);
  --field-height: 48px;
  --field-gap: 20px;
  --label-gap: 6px;
  --sheet-pad: 24px;

  --ease-standard: cubic-bezier(.2, .7, .2, 1);
  --transition-fast: 120ms var(--ease-standard);
  --transition-base: 180ms var(--ease-standard);
  --transition-slow: 280ms var(--ease-standard);

  --z-raised: 1;
  --z-sticky: 100;
  --z-nav: 200;
  --z-sheet: 1000;
  --z-popover: 1100;
  --z-toast: 1200;

  --tint-info: color-mix(in oklab, var(--color-brand) 11%, var(--color-surface));
  --tint-success: color-mix(in oklab, var(--color-success) 12%, var(--color-surface));
  --tint-warning: color-mix(in oklab, var(--color-warning) 15%, var(--color-surface));
  --tint-danger: color-mix(in oklab, var(--color-danger) 11%, var(--color-surface));

  --fw-inline-sign: 1;

  --ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
  --ico-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.8'/%3E%3C/svg%3E");
  --ico-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8 2.6 20h18.8Z'/%3E%3Cpath d='M12 10v4.5M12 17.2h.01'/%3E%3C/svg%3E");
  --ico-danger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.2 9.2l5.6 5.6M14.8 9.2l-5.6 5.6'/%3E%3C/svg%3E");
  --ico-chevron-end: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  --ico-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --ico-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --ico-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3'/%3E%3C/svg%3E");
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");

  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  --shadow-dialog: 0 25px 50px rgba(0, 0, 0, 0.5);
  --shadow-receipt: 0 16px 30px rgba(2, 6, 23, 0.8);
  --shadow-dock: 0 -8px 24px rgba(2, 6, 23, 0.7);
  --shadow-card: var(--shadow-md);

  --bg-gradient: var(--gradient-page);
  --bg: var(--color-surface-solid);
  --card-bg: var(--color-surface);
  --border: var(--color-border);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --primary: var(--color-brand);
  --primary-hover: var(--color-brand-hover);
  --green: var(--color-success);
  --red: var(--color-danger);
  --amber: var(--color-warning);
  --purple: var(--color-accent);

  --color-surface-popover: #283550;
  --color-scrim: rgba(2, 6, 23, 0.75);
  --color-scrim-alert: rgba(2, 6, 23, 0.55);
  --color-track: rgba(255, 255, 255, 0.09);
  --color-track-strong: rgba(255, 255, 255, 0.38);
  --spinner-track: rgba(255, 255, 255, 0.25);
  --skeleton-base: rgba(255, 255, 255, 0.05);
  --skeleton-shine: rgba(255, 255, 255, 0.12);
  --color-text-disabled: #94a1b4;
  --gradient-title: linear-gradient(135deg, #f8fafc 0%, #a8b5cc 100%);

  --navbar-bg: #0f172a;
  --imp: #64748b;
  --imp-essential: #22c55e;
  --imp-important: #3b82f6;
  --imp-optional: #f59e0b;
  --imp-luxury: #ef4444;

  --pl-card: #172033;
  --pl-bd: #253149;
  --pl-sub: #0f1726;
  --pl-shadow: none;
  --pl-dash: #3a4863;
  --tile-l: .30;
  --tile-c: .07;
  --color-danger-solid: #dc2626;
  --color-on-danger-solid: #ffffff;

  --cat-groceries: #22c55e;
  --cat-household: #3b82f6;
  --cat-rent: #0ea5e9;
  --cat-electronics: #a855f7;
  --cat-clothing: #ec4899;
  --cat-health: #ef4444;
  --cat-transport: #f59e0b;
  --cat-education: #06b6d4;
  --cat-entertainment: #f97316;
  --cat-dining: #eab308;
  --cat-personal-care: #8b5cf6;
  --cat-gifts: #f43f5e;
  --cat-donations: #10b981;
  --cat-utilities: #6366f1;
  --cat-lending: #94a3b8;
  --cat-debt: #f472b6;
  --cat-family-support: #14b8a6;
  --cat-other: #64748b;

  --color-surface-dialog: var(--color-slate-800);
  --color-dialog-chrome: var(--color-surface-dialog);
  --color-dialog-raised: #2c3a56;
  --color-dialog-raised-focus: #2f3f5e;
  --color-dialog-action: rgba(56, 189, 248, 0.10);
  --color-dialog-action-edge: rgba(56, 189, 248, 0.28);
  --color-dialog-label: #cbd5e1;
  --shadow-dialog-footer: 0 -12px 20px -16px rgba(0, 0, 0, 0.8);
  --motion-dialog-enter: 220ms;
  --motion-dialog-exit: 160ms;
  --motion-control: 120ms;
  --ease-dialog: cubic-bezier(0.2, 0.7, 0.2, 1);

  --item-list-gap: 0.4rem;
  --purchase-qty-width: 128px;
  --icon-square: max(var(--field-height), 2.75rem);
  --fw-bar-clearance: 0px;
  --hero-accent: var(--muted);
  --iti-dropdown-bg: var(--color-surface-solid);
  --iti-border-color: var(--color-border);
  --iti-hover-color: var(--color-brand-soft);
  --iti-dialcode-color: var(--color-text-muted);
  --iti-arrow-color: var(--color-text-muted);
  --m-nav-h: 69px;
  --tooth: 11px;
  --tooth-h: 7px;
  --color-toast-info-ink: var(--color-brand);
  --color-toast-success-ink: var(--color-success);
  --color-toast-error-ink: var(--color-danger);
  --color-toast-warning-ink: var(--color-warning);
}
:root[dir="rtl"] { --fw-inline-sign: -1; }


:root[data-theme="light"] {
  color-scheme: light;

  --color-page: #eef2f7;
  --gradient-page: linear-gradient(180deg, #eef2f7 0%, #eef2f7 100%);
  --color-surface: #ffffff;
  --color-surface-solid: #ffffff;
  --color-surface-input: #f1f5f9;
  --color-surface-nav: rgba(255, 255, 255, 0.94);
  --color-surface-hover: rgba(15, 23, 42, 0.11);
  --color-segment-thumb: #ffffff;
  --color-surface-subtle: rgba(15, 23, 42, 0.075);
  --color-surface-band: rgba(241, 245, 249, 0.8);
  --color-surface-raised: #ffffff;
  --glow-ambient: rgba(56, 189, 248, 0.16);
  --color-surface-footer: #ffffff;
  --color-border: rgba(15, 23, 42, 0.12);
  --color-border-strong: rgba(15, 23, 42, 0.20);
  --color-border-control: #788292;
  --color-text: #0f172a;
  --color-text-placeholder: #5f6b7c;
  --color-text-muted: #586576;

  --color-brand: #0369a1;
  --color-brand-hover: #075985;
  --color-series-2: var(--color-sky-400);
  --color-brand-soft: rgba(3, 105, 161, 0.08);
  --color-brand-border: rgba(3, 105, 161, 0.25);
  --color-stamp: #a8560a;
  --color-accent-on-page: #0c4a6e;
  --color-on-brand: #ffffff;
  --color-on-strong: #ffffff;

  --color-provider-face: #ffffff;
  --color-provider-face-hover: #f4f6f8;
  --color-provider-border: #747775;
  --color-provider-text: #1f1f1f;

  --color-success: #166534;
  --color-danger: #991b1b;
  --color-warning: #854d0e;
  --color-accent: #6b21a8;

  --color-success-soft: rgba(22, 101, 52, 0.08);
  --color-success-border: rgba(22, 101, 52, 0.22);
  --color-danger-soft: rgba(153, 27, 27, 0.08);
  --color-danger-border: rgba(153, 27, 27, 0.22);
  --color-danger-ink: var(--color-danger);
  --color-warning-soft: rgba(133, 77, 14, 0.08);
  --color-warning-border: rgba(133, 77, 14, 0.22);
  --color-accent-soft: rgba(107, 33, 168, 0.08);
  --color-accent-border: rgba(107, 33, 168, 0.22);
  --color-muted-soft: rgba(148, 163, 184, 0.12);
  --color-muted-border: rgba(148, 163, 184, 0.22);

  --focus-ring: 0 0 0 3px rgba(3, 105, 161, 0.25);
  --focus-ring-danger: 0 0 0 3px rgba(153, 27, 27, 0.25);

  --color-badge-chip: #0c3a5c;
  --color-featured-soft: rgba(56, 189, 248, 0.08);
  --color-accent-chip: #0c3a5c;
  --color-accent-chip-border: var(--color-sky-600);
  --color-brand-chip: #0c3a5c;
  --glow-accent: 0 4px 20px -2px rgba(56, 189, 248, 0.16);
  --glow-brand: 0 4px 20px -2px rgba(3, 105, 161, 0.16);
  --glow-accent-strong: 0 10px 28px -4px rgba(56, 189, 248, 0.28);
  --glow-brand-strong: 0 8px 24px -2px rgba(3, 105, 161, 0.28);
  --glow-nav-add: 0 4px 18px rgba(3, 105, 161, 0.22);
  --glow-danger: 0 4px 12px -2px rgba(153, 27, 27, 0.18);

  --color-elevated-soft: rgba(107, 33, 168, 0.08);
  --color-elevated-border: rgba(107, 33, 168, 0.22);


  --color-receipt: #ffffff;
  --color-ink: #0f172a;
  --color-rule: #e2e8f0;

  --shadow-sm: 0 2px 8px -2px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 16px -2px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 12px 28px -4px rgba(15, 23, 42, 0.12);
  --shadow-dialog: 0 20px 40px rgba(15, 23, 42, 0.16);
  --shadow-receipt: 0 16px 30px rgba(15, 23, 42, 0.08);
  --shadow-dock: 0 -6px 20px -2px rgba(15, 23, 42, 0.14);
  --gradient-final: linear-gradient(135deg, rgba(236, 253, 245, 0.8) 0%, rgba(241, 245, 249, 0.8) 100%);

  --color-surface-popover: #ffffff;
  --color-scrim: rgba(15, 23, 42, 0.4);
  --color-track: rgba(15, 23, 42, 0.08);
  --color-track-strong: rgba(15, 23, 42, 0.50);
  --spinner-track: rgba(15, 23, 42, 0.15);
  --skeleton-base: rgba(15, 23, 42, 0.06);
  --skeleton-shine: rgba(15, 23, 42, 0.12);
  --color-text-disabled: #5f6d84;
  --gradient-title: linear-gradient(135deg, #0f172a 0%, #334155 100%);

  --navbar-bg: #ffffff;
  --imp: #64748b;

  --cat-groceries: #15803d;
  --cat-household: #1d4ed8;
  --cat-rent: #0284c7;
  --cat-electronics: #7e22ce;
  --cat-clothing: #be185d;
  --cat-health: #b91c1c;
  --cat-transport: #b45309;
  --cat-education: #0e7490;
  --cat-entertainment: #c2410c;
  --cat-dining: #a16207;
  --cat-personal-care: #6d28d9;
  --cat-gifts: #be123c;
  --cat-donations: #047857;
  --cat-utilities: #4338ca;
  --cat-lending: #475569;
  --cat-debt: #9d174d;
  --cat-family-support: #0f766e;
  --cat-other: #64748b;

  --bg-gradient: var(--gradient-page);
  --bg: var(--color-surface-solid);
  --card-bg: var(--color-surface);
  --border: var(--color-border);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --primary: var(--color-brand);
  --primary-hover: var(--color-brand-hover);

  --color-page-top: #eef2f7;
  --shadow-card: var(--shadow-sm);
  --color-btn-face: #eef2f7;
  --color-stripe-down: rgba(15, 23, 42, 0.35);
  --color-surface-row: #edeeef;
  --imp-essential: #15803d;
  --imp-important: #1d4ed8;
  --imp-optional: #b45309;
  --imp-luxury: #b91c1c;
  --pl-card: #ffffff;
  --pl-bd: #d6dee9;
  --pl-sub: #f1f4f9;
  --pl-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 14px rgba(15, 23, 42, .04);
  --pl-dash: #b4c0d0;
  --tile-l: .93;
  --tile-c: .06;

  --color-surface-dialog: var(--color-surface);
  --color-dialog-chrome: var(--color-surface);
  --color-dialog-raised: var(--color-surface-subtle);
  --color-dialog-raised-focus: var(--color-surface-hover);
  --color-dialog-action: var(--color-surface-subtle);
  --color-dialog-action-edge: var(--color-border-strong);
  --color-dialog-label: var(--color-text-muted);
  --shadow-dialog-footer: none;
}

body.identity-v2 {
  --font-display: 'Alexandria', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-text: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-display: 2.75rem;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 240ms;
  --color-bg: oklch(0.972 0.005 245);
  --color-surface: oklch(1 0 0);
  --color-surface-sunken: oklch(0.952 0.008 245);
  --color-border: oklch(0.905 0.01 245);
  --color-text: oklch(0.23 0.025 250);
  --color-text-muted: oklch(0.47 0.022 250);
  --color-brand: oklch(0.52 0.15 247);
  --color-brand-strong: oklch(0.43 0.13 249);
  --color-brand-soft: oklch(0.95 0.03 245);
  --color-on-brand: oklch(0.99 0.005 245);
  --color-success: oklch(0.48 0.11 155);
  --color-success-soft: oklch(0.95 0.04 155);
  --color-warning: oklch(0.52 0.11 70);
  --color-warning-soft: oklch(0.95 0.05 80);
  --color-danger: oklch(0.50 0.16 25);
  --color-danger-soft: oklch(0.95 0.03 25);
  --color-scrim: oklch(0.2 0.03 250 / 0.45);
  --shadow-card: 0 1px 2px oklch(0.23 0.025 250 / 0.06);
  --shadow-overlay: 0 -8px 32px oklch(0.23 0.025 250 / 0.14);
}
:root[data-theme="dark"] body.identity-v2 {
  --color-bg: oklch(0.17 0.016 252);
  --color-surface: oklch(0.215 0.018 252);
  --color-surface-sunken: oklch(0.25 0.02 252);
  --color-border: oklch(0.29 0.02 252);
  --color-text: oklch(0.96 0.006 245);
  --color-text-muted: oklch(0.76 0.018 245);
  --color-brand: oklch(0.76 0.12 243);
  --color-brand-strong: oklch(0.85 0.09 243);
  --color-brand-soft: oklch(0.29 0.06 247);
  --color-on-brand: oklch(0.19 0.04 250);
  --color-success: oklch(0.80 0.13 155);
  --color-success-soft: oklch(0.29 0.05 155);
  --color-warning: oklch(0.84 0.12 80);
  --color-warning-soft: oklch(0.30 0.05 75);
  --color-danger: oklch(0.76 0.14 25);
  --color-danger-soft: oklch(0.30 0.06 25);
  --color-scrim: oklch(0.08 0.02 250 / 0.66);
  --shadow-card: none;
  --shadow-overlay: 0 -1px 0 oklch(0.34 0.02 252), 0 -12px 40px oklch(0 0 0 / 0.5);
}

@media (max-width: 768px) {
  :root { --sheet-pad: clamp(16px, 5vw, 20px); }
}

[hidden] { display: none !important; }

.btn {
  min-height: var(--control-height);
  padding: 0.65rem 1.2rem;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: background-color var(--transition-base), border-color var(--transition-base),
    color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.btn:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

:is(.btn, .settings-row, .goal-card, .quick-chip, .date-range-btn, .nav-tab):focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.btn.is-busy:is(:disabled, [aria-disabled="true"]) { opacity: 1; cursor: progress; }

.btn-primary {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-on-brand);
}

.btn-primary:hover {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  color: var(--color-on-strong);
}

.btn-secondary {
  background: transparent;
  border-color: var(--color-border-control);
  color: var(--color-text);
}

.btn-secondary:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

.btn-danger {
  background: transparent;
  border-color: var(--color-danger-border);
  color: var(--color-danger);
}

.btn-danger:hover {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-on-strong);
}

.btn-secondary.btn-danger-ink,
.btn-secondary.btn-danger-ink:hover { color: var(--color-danger); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-brand);
}
.btn-ghost:hover { background: var(--color-brand-soft); border-color: transparent; color: var(--color-brand); }
.btn[aria-busy="true"] { cursor: progress; }

.btn-sm {
  min-height: var(--control-height-sm);
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.btn-lg { min-height: var(--control-height-lg); padding: 0.85rem 1.5rem; font-size: var(--font-size-base); }
.btn-full { width: 100%; }
.btn-icon { width: var(--control-height); padding: 0; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--control-height);
  padding-inline: 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit; font-size: var(--font-size-sm); font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.chip:hover { background: var(--color-surface-hover); }
.chip img { width: 18px; height: 18px; }
.chip[aria-pressed="true"] { background: var(--color-brand-soft); border-color: var(--color-brand); }
.chip[aria-pressed="true"]::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background: var(--color-brand);
  -webkit-mask: var(--ico-check) center / contain no-repeat;
  mask: var(--ico-check) center / contain no-repeat;
}

.form-control,
.form-group input,
.modal-input,
.modal select,
.modal-select,
.add-input,
.add-select {
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-surface-input);
  color: var(--color-text);
  font-family: inherit;
  transition: border-color var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base);
}
.form-control::placeholder,
.form-group input::placeholder,
.modal-input::placeholder,
.add-input::placeholder,
.qty-step-value::placeholder {
  color: var(--color-text-placeholder);
  opacity: 1;
}

.form-control {
  width: 100%;
  min-height: var(--control-height);
  padding: 0.6rem 0.75rem;
  font-size: 16px;
}
.form-control,
.modal-input,
.modal-select,
.modal select {
  min-height: var(--field-height);
  padding-block: 0.7rem;
  padding-inline: 0.875rem;
  border-radius: var(--radius-md);
  font-size: 16px;
  line-height: 1.4;
}
select.form-control,
select.modal-select,
.modal select {
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
  padding-inline-end: 2.75rem;
  position: relative;
}
.select-wrap { position: relative; display: block; min-inline-size: 0; }
.select-wrap > select { inline-size: 100%; }
.select-wrap::after {
  content: "";
  position: absolute;
  inset-inline-end: 14px;
  inset-block-start: 50%;
  margin-block-start: -9px;
  width: 18px;
  height: 18px;
  background: var(--color-text-muted);
  -webkit-mask: var(--ico-chevron-down) center / contain no-repeat;
  mask: var(--ico-chevron-down) center / contain no-repeat;
  pointer-events: none;
}
.select-wrap:has(> select:disabled)::after { opacity: 0.5; }

.form-control:focus,
.form-group input:focus,
.modal-input:focus,
.modal select:focus,
.modal-select:focus,
.add-input:focus,
.add-select:focus {
  border-color: var(--color-brand);
  box-shadow: var(--focus-ring);
  outline: none;
}

.modal-input[readonly] {
  background: var(--color-surface-sunken);
  border-style: dashed;
  color: var(--color-text-muted);
  cursor: default;
}
.modal-input[readonly]:focus { border-color: var(--color-border-control); box-shadow: none; }

.form-control[aria-invalid="true"],
.form-group input[aria-invalid="true"],
.modal-input[aria-invalid="true"],
.modal select[aria-invalid="true"],
.modal-select[aria-invalid="true"],
.add-input[aria-invalid="true"],
.add-select[aria-invalid="true"],
.form-control.error,
.form-group input.error {
  border-color: var(--color-danger);
  box-shadow: var(--focus-ring-danger);
}
:is(.form-control, .modal-input, .modal-select)[aria-invalid="true"] {
  border-color: var(--color-danger);
  box-shadow: inset 0 0 0 1px var(--color-danger);
}
:is(.form-control, .modal-input, .modal-select)[aria-invalid="true"]:focus {
  box-shadow: inset 0 0 0 1px var(--color-danger), var(--focus-ring-danger);
}
.field-group:has([aria-invalid="true"]) .field-label { color: var(--color-danger); }


[dir="rtl"] .form-control[dir="ltr"],
[dir="rtl"] .modal-input[dir="ltr"],
[dir="rtl"] .add-input[dir="ltr"] { text-align: right; }

input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-inline-size: 0;
}
input[type="date"]::-webkit-date-and-time-value {
  text-align: inherit;
  min-block-size: 1.4em;
}
[dir="rtl"] input[type="date"][dir="ltr"] { text-align: right; }

input[inputmode="decimal"],
input[inputmode="numeric"],
input[inputmode="tel"] { font-variant-numeric: tabular-nums; }

.field-label,
.modal .field-label,
.modal .form-field label {
  display: block;
  margin-block: 0 var(--label-gap);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

.field-help,
.modal .field-help {
  display: block;
  margin-block: var(--label-gap) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.55;
}
.field-group { margin-block: 0 var(--field-gap); }
.field-group-lg { margin-bottom: var(--space-5); }
.field-label-spaced { margin-top: var(--space-3); }

.modal-copy {
  margin-bottom: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  line-height: 1.6;
}
.modal .modal-copy { margin-block: 0 var(--field-gap); font-size: var(--font-size-sm); }

.ui-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}

.alert {
  position: relative;
  padding: 12px 14px;
  padding-inline-start: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-inset);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}
.alert::before {
  content: "";
  position: absolute;
  inset-inline-start: 14px;
  inset-block-start: 13px;
  width: 20px;
  height: 20px;
  background: var(--alert-ink);
  -webkit-mask: var(--alert-ico) center / contain no-repeat;
  mask: var(--alert-ico) center / contain no-repeat;
}

.alert-info { --alert-ink: var(--color-brand); --alert-ico: var(--ico-info); background: var(--tint-info); border-color: var(--color-brand-border); color: var(--color-text); }
.alert-success { --alert-ink: var(--color-success); --alert-ico: var(--ico-success); background: var(--tint-success); border-color: var(--color-success-border); color: var(--color-text); }
.alert-warning { --alert-ink: var(--color-warning); --alert-ico: var(--ico-warning); background: var(--tint-warning); border-color: var(--color-warning-border); color: var(--color-text); }
.alert-danger { --alert-ink: var(--color-danger); --alert-ico: var(--ico-danger); background: var(--tint-danger); border-color: var(--color-danger-border); color: var(--color-text); }

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

[dir="ltr"] .badge {
  letter-spacing: 0.5px;
}

.badge-success { background: var(--color-success-soft); border-color: var(--color-success-border); color: var(--color-success); }
.badge-info { background: var(--color-brand-soft); border-color: var(--color-brand-border); color: var(--color-brand); }
.badge-warning { background: var(--color-warning-soft); border-color: var(--color-warning-border); color: var(--color-warning); }
.badge-danger { background: var(--color-danger-soft); border-color: var(--color-danger-border); color: var(--color-danger-ink); }
.badge-muted { background: var(--color-muted-soft); border-color: var(--color-muted-border); color: var(--color-text-muted); }

.cluster { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.text-muted { color: var(--color-text-muted); }
.text-danger { color: var(--color-danger); }
.text-center { text-align: center; }

@keyframes fw-enter-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes fw-enter-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fw-meter-fill { from { transform: scaleX(0); } }
.fw-meter-fill {
  animation: fw-meter-fill 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 250ms both;
  transform-origin: left;
}
[dir="rtl"] .fw-meter-fill { transform-origin: right; }
.fw-settled .fw-meter-fill { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition-duration: 0.01ms; }
  [class*="fw-enter"],
  .fw-meter-fill,
  .settings-header,
  .settings-page > * { animation-duration: 0.01ms !important; animation-delay: 0ms !important; }
}

.is-busy { pointer-events: none; }

.is-busy::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-inline-end: 0.5em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: fw-busy-spin 0.7s linear infinite;
  flex: none;
}

@keyframes fw-busy-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .is-busy::before { animation-duration: 2.4s; }
}


.fw-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--section-title-gap); margin-block-end: var(--section-gap); }
.fw-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: var(--space-2);
  padding-inline: var(--space-1);
}
.fw-section-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-text);
}
.fw-section-meta { font-size: 0.8125rem; font-weight: 700; color: var(--color-text-muted); white-space: nowrap; }
.fw-section-meta b { font-weight: 800; color: var(--color-text); font-variant-numeric: tabular-nums; }
.fw-section-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-block-size: 44px;
  min-inline-size: 44px;
  margin-block: -12px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-brand);
  text-decoration: none;
  cursor: pointer;
}
.fw-section-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.fw-list-card {
  border-radius: var(--radius-card);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.fw-hero-card {
  padding: var(--hero-pad);
  border-radius: var(--radius-hero);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}
.ui-card.fw-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: var(--hero-pad);
  border-radius: var(--radius-hero);
  text-align: center;
}
.fw-empty[hidden] { display: none; }
.fw-empty-mark {
  display: grid;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  margin-block-end: var(--space-1);
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border-radius: var(--radius-3xl);
}
.fw-empty-mark svg { inline-size: 30px; block-size: 30px; }
.fw-empty-title { margin: 0; font-size: 1.1875rem; font-weight: 800; line-height: 1.35; color: var(--color-text); }
.fw-empty-text { max-inline-size: 280px; margin: 0; font-size: var(--font-size-sm); line-height: 1.7; color: var(--color-text-muted); }
.fw-empty .btn.fw-empty-add {
  inline-size: auto;
  min-inline-size: 200px;
  min-block-size: 50px;
  margin-block: var(--space-2) 0;
  padding-inline: 22px;
  border: 0;
  border-radius: var(--radius-xl);
  font-size: 0.9375rem;
  font-weight: 800;
}
:where(.fw-app) .tab-panel.active:not(#tab-shopping):has(.fw-empty) {
  display: flex;
  flex-direction: column;
}
:where(.fw-app) .tab-panel.active:not(#tab-shopping):has(.fw-empty) {
  min-block-size: calc(100dvh - var(--nav-height) - var(--space-16));
}
@media (max-width: 768px) {
  :where(.fw-app) .tab-panel.active:not(#tab-shopping):has(.fw-empty) {
    min-block-size: calc(100dvh - var(--nav-height) - var(--fw-nav-h, var(--nav-height)) - var(--space-8));
  }
}
:where(.fw-app) .tab-panel.active:not(#tab-shopping):has(.fw-empty) :has(.fw-empty) {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}
:where(.fw-app) .tab-panel.active:not(#tab-shopping) .fw-empty { margin-block: auto; }




html:where(.fw-app)[lang="ar"] .en,
html:where(.fw-app)[lang="en"] .ar { display: none !important; }
html:where(.fw-app)[lang="en"] span.en[style="display:none"]:not([hidden]) {
  display: inline !important;
}
html:where(.fw-app)[lang="en"] div.en.legal-content[style="display:none"]:not([hidden]) {
  display: block !important;
}


:where(.fw-app), :where(.fw-app) * { margin: 0; padding: 0; box-sizing: border-box; }

html:where(.fw-app) {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  touch-action: pan-x pan-y;
  background: var(--color-page);
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
}

:where(.fw-app) body {
  font-family: var(--font-app-figures);
  background: var(--bg-gradient);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;


  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}



:where(.fw-app) body[data-page], :where(.fw-app) body[data-page] * {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}


:where(.fw-app) body[data-page] input, :where(.fw-app) body[data-page] textarea, :where(.fw-app) body[data-page] select, :where(.fw-app) body[data-page] .selectable, :where(.fw-app) body[data-page] .selectable * {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}



:where(.fw-app) :is(button, a[href], [role="button"], [role="tab"], [role="option"], [role="menuitem"], [role="radio"], [role="switch"], summary):not(:disabled, [aria-disabled="true"]):active:not(:has(:is(button, a[href], [role="button"], [role="tab"], [role="option"], [role="menuitem"], [role="radio"], [role="switch"], summary):active)) {
  opacity: var(--press-opacity);
  scale: var(--press-scale);
  transition: opacity var(--press-duration) ease-out, scale var(--press-duration) ease-out;
}
:where(.fw-app) .recent-purchase-row:has(> .row-open:active) > .item-line-static,
:where(.fw-app) .repeated-due-row:has(> .repeated-due-line > .repeated-due-info:is(button, a):active) > .repeated-due-line {
  opacity: var(--press-opacity);
  scale: var(--press-scale);
  transition: opacity var(--press-duration) ease-out, scale var(--press-duration) ease-out;
}
:where(.fw-app) .repeated-due-row > .repeated-due-line > .repeated-due-info:is(button, a[href]):not(:disabled):active { opacity: 1; scale: 1; }
:where(.fw-app) :is(.is-swiping, .swiping) :is(button, a[href], [role="button"], [role="tab"], [role="option"], [role="menuitem"], [role="radio"], [role="switch"], summary):active,
:where(.fw-app) .hold-add:is(.is-arming, .is-recording, .is-working) { opacity: 1 !important; scale: 1 !important; }

:where(.fw-app) .toast-container {
  position: fixed;
  bottom: 24px;
  inset-inline: var(--page-pad);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

:where(.fw-app) .toast {
  background: var(--color-surface-popover);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: 56px;
  padding-block: 6px;
  padding-inline: 46px 6px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-sm);
  font-weight: 600;
  overflow: hidden;
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  animation: fwToastIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
  pointer-events: auto;
}

@keyframes fwToastIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

:where(.fw-app) .toast.hide {
  opacity: 0;
  transform: translateY(20px);
}

:where(.fw-app) .toast > .toast-icon {
  position: absolute;
  inset-inline-start: 16px;
  inset-block-start: 50%;
  display: flex;
  margin-block-start: -10px;
  color: var(--color-toast-info-ink);
}
:where(.fw-app) .toast-success > .toast-icon { color: var(--color-toast-success-ink); }
:where(.fw-app) .toast-error > .toast-icon { color: var(--color-toast-error-ink); }
:where(.fw-app) .toast-warning > .toast-icon { color: var(--color-toast-warning-ink); }
:where(.fw-app) .toast > .toast-text { flex: 1; min-inline-size: 0; padding-block: var(--space-2); }

:where(.fw-app) .toast-action {
  margin-inline-start: auto;
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 800;
  cursor: pointer;
}

:where(.fw-app) .toast.has-timer::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 3px;
  background: var(--color-brand);
  opacity: 0.55;
  transform-origin: left;
  animation: fwToastTimer var(--toast-ms, 3s) linear forwards;
}
:where(.fw-app)[dir="rtl"] .toast.has-timer::after, :where(.fw-app) [dir="rtl"] .toast.has-timer::after { transform-origin: right; }
@keyframes fwToastTimer { to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  :where(.fw-app) .toast { animation: none; }
}

:where(.fw-app) .note { font-size: var(--font-size-sm); color: var(--muted); margin-top: 1.5rem; line-height: 1.6; }

:where(.fw-app) .note a,
:where(.fw-app) .field-help a {
  color: var(--primary); font-weight: 600; text-decoration: none; transition: color var(--transition-slow);
  display: inline-flex; align-items: center; min-height: var(--control-height);
}

:where(.fw-app) .note a:hover,
:where(.fw-app) .field-help a:hover { text-decoration: underline; }

:where(.fw-app) .status { padding: 1rem; border-radius: var(--radius-lg); margin-top: 1.25rem; font-size: var(--font-size-md); display: none; font-weight: 600; animation: fadeInScale 0.3s; }

:where(.fw-app) .status.show { display: block; }

:where(.fw-app) .status.err { background: var(--color-danger-soft); border: 1px solid var(--red); color: var(--red); }
:where(.fw-app) .status.show {
  position: relative;
  padding: 12px 14px;
  padding-inline-start: 44px;
  border-radius: var(--radius-inset);
  border: 1px solid;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text);
}
:where(.fw-app) .status.show.err { background: var(--tint-danger); border-color: var(--color-danger-border); }
:where(.fw-app) .status.show.ok { background: var(--tint-success); border-color: var(--color-success-border); }
:where(.fw-app) .status.show::before {
  content: "";
  position: absolute;
  inset-inline-start: 14px;
  inset-block-start: 13px;
  width: 20px;
  height: 20px;
  background: var(--color-danger);
  -webkit-mask: var(--ico-danger) center / contain no-repeat;
  mask: var(--ico-danger) center / contain no-repeat;
}
:where(.fw-app) .status.show.ok::before { background: var(--color-success); -webkit-mask-image: var(--ico-success); mask-image: var(--ico-success); }

:where(.fw-app) .modal-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.25rem; }

:where(.fw-app) .ac-item {
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-radius: 7px;
  transition: background var(--transition-fast);
}

:where(.fw-app) .ac-item:hover, :where(.fw-app) .ac-item.active { background: var(--color-brand-soft); }

:where(.fw-app) .btn-full { padding: .85rem; margin-top: .5rem; text-align: center; }

@media (hover: hover) {

:where(.fw-app) .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

:where(.fw-app) .btn-primary:hover { box-shadow: var(--glow-brand-strong); }

}

@media (hover: none) {
:where(.fw-app) .card:hover, :where(.fw-app) .btn:hover, :where(.fw-app) .fab:hover, :where(.fw-app) .btn-danger:hover {
    transform: none !important;
    box-shadow: none !important;
  }

:where(.fw-app) button, :where(.fw-app) a, :where(.fw-app) .btn {
    touch-action: manipulation;
  }

:where(.fw-app) .btn {
    min-height: 48px;
  }

}

:where(.fw-app) body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--color-scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
  z-index: calc(var(--z-nav) + 10);
}

:where(.fw-app) .skip-link {
  position: absolute;
  top: 0;
  transform: translateY(-100%);
  inset-inline-start: 0;
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  background: var(--color-surface-solid);
  color: var(--color-text);
  padding: 8px 16px;
  z-index: calc(var(--z-toast) + 1);
  text-decoration: none;
  border-end-end-radius: var(--radius-xs);
  font-size: var(--font-size-sm);
}

:where(.fw-app) .skip-link:focus {
  transform: translateY(0);
}

:where(.fw-app):focus-visible, :where(.fw-app) *:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (max-width: 768px) {
:where(.fw-app) .toast-container { bottom: calc(64px + env(safe-area-inset-bottom)); }
:where(.fw-app) body:has(.bottom-nav):not(:has(.modal-overlay.show)) .toast-container {
  bottom: calc(var(--fw-nav-h, calc(var(--nav-height) + env(safe-area-inset-bottom))) + 30px);
}

}

:where(.fw-app) body:has(.modal-overlay.show) .toast-container {
  bottom: calc(var(--fw-toast-floor, env(safe-area-inset-bottom, 0px)) + 12px);
}



:where(.fw-app) .modal-overlay { display: none; position: fixed; inset: 0; background: transparent; z-index: var(--z-sheet); isolation: isolate; justify-content: center; align-items: center; backdrop-filter: none; -webkit-backdrop-filter: none; padding: var(--space-4); }
:where(.fw-app) .modal-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-scrim);
  animation: fw-scrim-in var(--motion-dialog-enter) ease-out both;
}
:where(.fw-app) .modal-overlay.show { display: flex; }
:where(.fw-app) .modal-overlay.fw-modal-closing::before { animation: fw-scrim-out var(--motion-dialog-exit) ease-in both; }
:where(.fw-app) .modal-overlay.fw-modal-closing {
  display: flex;
  pointer-events: none;
}
:where(.fw-app) .modal-overlay .modal.fw-modal-panel {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: var(--color-surface-dialog);
  border: 0;
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-sheet);
  max-height: 90dvh;
  animation: fw-dialog-in var(--motion-dialog-enter) var(--ease-dialog) both;
}
:where(.fw-app) .fw-modal-closing .modal.fw-modal-panel { animation: fw-dialog-out var(--motion-dialog-exit) ease-in both; }
:where(.fw-app) .modal-overlay:not(.is-page):not(.app-drawer):not(.fw-page-layer) .modal.fw-modal-panel::before {
  content: "";
  flex: none;
  align-self: center;
  inline-size: 40px;
  block-size: 5px;
  margin-block-start: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
}
:where(.fw-app) .fw-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) 0;
  border: 0;
  background: var(--color-dialog-chrome);
}
:where(.fw-app) .modal .fw-modal-header h3, :where(.fw-app) .modal .fw-modal-header h2 { flex: 1; min-inline-size: 0; margin: 0; font-size: 1.1875rem; font-weight: 800; line-height: 1.3; color: var(--color-text); }
:where(.fw-app) .fw-modal-header .fw-modal-close {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 36px;
  min-inline-size: 36px;
  block-size: 36px;
  min-block-size: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  box-shadow: none;
}
:where(.fw-app) .fw-modal-header .fw-modal-close::after { content: ""; position: absolute; inset: -4px; }
:where(.fw-app) .fw-modal-header .fw-modal-close:hover { background: var(--color-surface-hover); color: var(--color-text); }
:where(.fw-app) .fw-modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--page-pad);
  scroll-padding-block: var(--space-4);
}
:where(.fw-app) .fw-modal-panel .fw-modal-footer {
  position: static;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-1) var(--space-4) max(28px, env(safe-area-inset-bottom));
  border: 0;
  background: var(--color-dialog-chrome);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:where(.fw-app) .fw-modal-footer > .btn,
:where(.fw-app) .fw-modal-body .modal-actions > .btn {
  flex: 1 1 0;
  min-inline-size: 0;
  min-block-size: 50px;
  margin: 0;
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius-xl);
  font-size: 0.9375rem;
  font-weight: 800;
}
:where(.fw-app) .fw-modal-footer > .btn-secondary,
:where(.fw-app) .fw-modal-footer > .btn-ghost,
:where(.fw-app) .fw-modal-footer > .btn:not([class*="btn-"]),
:where(.fw-app) .fw-modal-body .modal-actions > .btn-secondary {
  background: var(--color-surface-subtle);
  color: var(--color-text);
}
:where(.fw-app) .fw-modal-footer > .btn-danger { background: var(--color-danger); color: var(--color-on-strong); }
:where(.fw-app) .fw-modal-footer[hidden] { display: none; }
:where(.fw-app) .fw-modal-discard {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sheet) + 10);
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background: var(--color-scrim-alert);
  animation: fw-scrim-in 150ms ease-out;
}
:where(.fw-app) .fw-modal-discard-card {
  display: grid;
  gap: var(--space-2);
  inline-size: 100%;
  max-inline-size: 340px;
  padding: var(--space-6) var(--space-5) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-alert);
  background: var(--color-surface);
  box-shadow: var(--shadow-alert);
  text-align: center;
  animation: fw-alert-in 150ms cubic-bezier(.2, .8, .2, 1);
}
:where(.fw-app) .fw-modal-discard-title { margin: 0; font-size: 1.1875rem; font-weight: 800; color: var(--color-text); }
:where(.fw-app) .fw-modal-discard-body { margin: 0 0 var(--space-3); font-size: 0.90625rem; line-height: 1.7; color: var(--color-text-muted); }
:where(.fw-app) .fw-modal-discard-actions { display: flex; gap: var(--space-2); }
:where(.fw-app) .fw-modal-discard-actions .btn { flex: 1 1 0; min-inline-size: 0; min-block-size: var(--control-height-lg); margin: 0; padding-inline: var(--space-3); border-radius: var(--radius-lg); font-size: 0.9375rem; font-weight: 800; }
:where(.fw-app) .fw-modal-discard-actions .btn-danger-ink { border: 1px solid var(--color-border); background: transparent; color: var(--color-danger); }
@keyframes fw-alert-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
:where(.fw-app) .fw-modal-body > .form-field + .form-field { margin-block-start: var(--space-4); }
:where(.fw-app) .fw-modal-body .form-row > .form-field { margin-block-start: 0; }
:where(.fw-app) .field-error {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-block: var(--label-gap) 0;
  color: var(--color-danger-ink);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.55;
}
:where(.fw-app) .field-error::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-block-start: 2px;
  background: currentColor;
  -webkit-mask: var(--ico-danger) center / contain no-repeat;
  mask: var(--ico-danger) center / contain no-repeat;
}
:where(.fw-app) .fw-modal-body details > summary { cursor: pointer; min-height: var(--control-height); align-content: center; color: var(--color-text-muted); }
@keyframes fw-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fw-scrim-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes fw-dialog-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fw-dialog-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(8px); } }
@keyframes fw-sheet-in { from { opacity: 0; transform: translateY(var(--space-8)); } to { opacity: 1; transform: translateY(0); } }
@keyframes fw-sheet-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(var(--space-6)); } }
@media (max-width: 768px) {
  :where(.fw-app) .modal-overlay { align-items: flex-end; padding: 0; top: var(--vv-top, 0px); bottom: var(--kb-inset, 0px); }
  :where(.fw-app) .modal-overlay .modal.fw-modal-panel {
    max-height: 94%;
    width: 100%;
    max-width: 100%;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    animation-name: fw-sheet-in;
  }
  :where(.fw-app) .fw-modal-closing .modal.fw-modal-panel { animation-name: fw-sheet-out; }
  :where(.fw-app) .fw-modal-panel .fw-modal-footer {
    padding-block-end: max(28px, calc(env(safe-area-inset-bottom) - var(--kb-inset, 0px)));
  }
}
:where(.fw-app) .page-back-glyph { display: inline-block; direction: ltr; unicode-bidi: isolate; font-size: 1.5rem; line-height: 1; }
:where(.fw-app)[dir="rtl"] .page-back-arrow { transform: scaleX(-1); }
:where(.fw-app) .page-back-arrow { display: block; color: var(--color-text); }
:where(.fw-app)[dir="rtl"] .page-back-glyph { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  :where(.fw-app) .modal-overlay::before,
  :where(.fw-app) .modal-overlay.fw-modal-closing::before,
  :where(.fw-app) .modal-overlay .modal.fw-modal-panel,
  :where(.fw-app) .fw-modal-discard,
  :where(.fw-app) .fw-modal-discard-card { animation: none; }
}

:where(.fw-app) .btn, :where(.fw-app) .csel-btn, :where(.fw-app) .quick-chip {
  transition-duration: var(--motion-control);
}