/* ==========================================================================
   PundiKita - "Kobalt Tenang" Semantic Token Map
   Auto-generated bridge from legacy hardcoded styles to clean design tokens.
   ========================================================================== */

:root {
  /* --- Brand & Semantic Core (Kobalt Tenang) --- */
  --pk-ground: #F3F5F7;
  --pk-surface: #FFFFFF;
  --pk-raised: #F1F5F9;
  --pk-border: #E2E8F0;
  --pk-border-light: #F1F5F9;
  --pk-rule: #F8FAFC;

  --pk-ink: #0F172A;
  --pk-ink-muted: #475569;
  --pk-ink-faint: #64748B;
  --pk-ink-white: #FFFFFF;

  --pk-cobalt: #1D5FD6;
  --pk-cobalt-hover: #174CB3;
  --pk-cobalt-ink: #0A3A80;
  --pk-cobalt-soft: #EFF6FF;
  --pk-cobalt-line: #BFDBFE;

  --pk-positive: #16A34A;
  --pk-positive-ink: #0F5132;
  --pk-positive-soft: #F0FDF4;

  --pk-negative: #DC2626;
  --pk-negative-ink: #991B1B;
  --pk-negative-soft: #FEF2F2;

  --pk-warning: #D97706;
  --pk-warning-soft: #FFFBEB;

  --pk-font: 'Manrope', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --pk-font-display: 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Backward compatibility: map legacy --sr-* to new tokens --- */
  --sr-bg: var(--pk-ground);
  --sr-bg-subtle: #EBF0F5;
  --sr-surface: var(--pk-surface);
  --sr-surface-muted: var(--pk-raised);
  --sr-border: var(--pk-border);
  --sr-border-light: var(--pk-border-light);
  --sr-border-focus: var(--pk-cobalt);

  --sr-text: var(--pk-ink);
  --sr-text-muted: var(--pk-ink-muted);
  --sr-text-faint: var(--pk-ink-faint);
  --sr-text-white: #FFFFFF;

  --sr-primary-dark: #0F172A;
  --sr-primary-green: #1D5FD6;
  --sr-primary-light: #3B82F6;
  --sr-hero-green: linear-gradient(135deg, #0F172A 0%, #1E293B 60%, #1D5FD6 100%);

  --sr-accent-gold: var(--pk-cobalt);
  --sr-accent-gold-hover: var(--pk-cobalt-hover);
  --sr-gold-subtle: var(--pk-cobalt-soft);
  --sr-gold-banner: #DBEAFE;

  --sr-status-income: var(--pk-positive);
  --sr-status-expense: var(--pk-ink-muted);
  --sr-status-danger: var(--pk-negative);

  --sr-radius-xs: 6px;
  --sr-radius-sm: 10px;
  --sr-radius-md: 16px;
  --sr-radius-lg: 20px;
  --sr-radius-xl: 24px;
  --sr-radius-full: 9999px;

  /* Restrained Craft Floor elevation (soft offset, no muddy halos) */
  --sr-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
  --sr-shadow-md: 0 4px 14px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
  --sr-shadow-lg: 0 12px 32px -4px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);

  --sr-font-display: var(--pk-font-display);
  --sr-font-body: var(--pk-font);

  /* --- Legacy Variable Replacements (--lc-xxxxxx) --- */
  --lc-2b2620: #0F172A; /* was #2B2620 (ink) */
  --lc-ffffff: #FFFFFF; /* was #FFFFFF (surface) */
  --lc-6b6150: #475569; /* was #6B6150 (muted) */
  --lc-e8e1d1: #F1F5F9; /* was #E8E1D1 (raised) */
  --lc-8c867a: #64748B; /* was #8C867A (faint) */
  --lc-faf8f4: #EFF6FF; /* was #FAF8F4 (accent-soft) */
  --lc-6b6355: #475569; /* was #6B6355 (muted) */
  --lc-7c7365: #475569; /* was #7C7365 (muted) */
  --lc-8c8578: #64748B; /* was #8C8578 (faint) */
  --lc-245d3b: #1D5FD6; /* was #245D3B (accent) */
  --lc-eae4d7: #F1F5F9; /* was #EAE4D7 (raised) */
  --lc-5e574c: #475569; /* was #5E574C (muted) */
  --lc-f0ece3: #F1F5F9; /* was #F0ECE3 (raised) */
  --lc-7a5a10: #0A3A80; /* was #7A5A10 (accent-ink) */
  --lc-c9a227: #1D5FD6; /* was #C9A227 (accent) */
  --lc-1f6f40: #1D5FD6; /* was #1F6F40 (accent) */
  --lc-f0ebe1: #F1F5F9; /* was #F0EBE1 (raised) */
  --lc-e6e1d6: #F1F5F9; /* was #E6E1D6 (raised) */
  --lc-202623: #0F172A; /* was #202623 (ink) */
  --lc-e2ddd2: #F1F5F9; /* was #E2DDD2 (raised) */
  --lc-e8e5df: #F1F5F9; /* was #E8E5DF (raised) */
  --lc-5a5246: #1E293B; /* was #5A5246 (ink-2) */
  --lc-ece7db: #F1F5F9; /* was #ECE7DB (raised) */
  --lc-faf7f0: #EFF6FF; /* was #FAF7F0 (accent-soft) */
  --lc-e2dac9: #BFDBFE; /* was #E2DAC9 (accent-line) */
  --lc-6f685c: #475569; /* was #6F685C (muted) */
  --lc-17653a: #0F5132; /* was #17653A (positive-ink) */
  --lc-4a443b: #1E293B; /* was #4A443B (ink-2) */
  --lc-5c564b: #1E293B; /* was #5C564B (ink-2) */
  --lc-8c6e15: #0A3A80; /* was #8C6E15 (accent-ink) */
  --lc-efeae0: #F1F5F9; /* was #EFEAE0 (raised) */
  --lc-1f6e43: #1D5FD6; /* was #1F6E43 (accent) */
  --lc-10b981: #0F5132; /* was #10B981 (positive-ink) */
  --lc-785e1a: #0A3A80; /* was #785E1A (accent-ink) */
  --lc-c49a2c: #1D5FD6; /* was #C49A2C (accent) */
  --lc-a5675e: #DC2626; /* was #A5675E (negative) */
  --lc-97791c: #0A3A80; /* was #97791C (accent-ink) */
  --lc-efebe2: #F1F5F9; /* was #EFEBE2 (raised) */
  --lc-a5402b: #991B1B; /* was #A5402B (negative-ink) */
  --lc-f0ece4: #F1F5F9; /* was #F0ECE4 (raised) */
  --lc-f4efe6: #EFF6FF; /* was #F4EFE6 (accent-soft) */
  --lc-8a6d1b: #0A3A80; /* was #8A6D1B (accent-ink) */
  --lc-3f6b4a: #0F5132; /* was #3F6B4A (positive-ink) */
  --lc-4c4434: #1E293B; /* was #4C4434 (ink-2) */
  --lc-15321e: #0F172A; /* was #15321E (ink) */
  --lc-0f9d58: #1D5FD6; /* was #0F9D58 (accent) */
  --lc-5c5446: #1E293B; /* was #5C5446 (ink-2) */
  --lc-f3efe6: #EFF6FF; /* was #F3EFE6 (accent-soft) */
  --lc-5c5549: #1E293B; /* was #5C5549 (ink-2) */
  --lc-6b6459: #475569; /* was #6B6459 (muted) */
  --lc-1f8a4c: #1D5FD6; /* was #1F8A4C (accent) */
  --lc-f3e6e3: #FEF2F2; /* was #F3E6E3 (negative-soft) */
  --lc-8c8273: #64748B; /* was #8C8273 (faint) */
  --lc-eae6de: #F1F5F9; /* was #EAE6DE (raised) */
  --lc-3a352d: #1E293B; /* was #3A352D (ink-2) */
  --lc-eae3d2: #BFDBFE; /* was #EAE3D2 (accent-line) */
  --lc-586e34: #1D5FD6; /* was #586E34 (accent) */
  --lc-9a5a52: #DC2626; /* was #9A5A52 (negative) */
  --lc-706859: #475569; /* was #706859 (muted) */
  --lc-f2ede2: #EFF6FF; /* was #F2EDE2 (accent-soft) */
  --lc-4a443a: #1E293B; /* was #4A443A (ink-2) */
  --lc-fbefd2: #EFF6FF; /* was #FBEFD2 (accent-soft) */
  --lc-4c7a57: #0F5132; /* was #4C7A57 (positive-ink) */
  --lc-eae1c8: #BFDBFE; /* was #EAE1C8 (accent-line) */
  --lc-665e50: #475569; /* was #665E50 (muted) */
  --lc-faf8f3: #EFF6FF; /* was #FAF8F3 (accent-soft) */
  --lc-1f1d1a: #0F172A; /* was #1F1D1A (ink) */
  --lc-ede8df: #F1F5F9; /* was #EDE8DF (raised) */
  --lc-ebf3ef: #F1F5F9; /* was #EBF3EF (raised) */
  --lc-f3c7c2: #FECACA; /* was #F3C7C2 (negative-line) */
  --lc-faf7ec: #EFF6FF; /* was #FAF7EC (accent-soft) */
  --lc-decfa8: #BFDBFE; /* was #DECFA8 (accent-line) */
  --lc-e5e0d5: #F1F5F9; /* was #E5E0D5 (raised) */
  --lc-f7f4ed: #EFF6FF; /* was #F7F4ED (accent-soft) */
  --lc-cfc6b4: #BFDBFE; /* was #CFC6B4 (accent-line) */
  --lc-0a2315: #0F172A; /* was #0A2315 (ink) */
  --lc-faf8f2: #EFF6FF; /* was #FAF8F2 (accent-soft) */
  --lc-1f4529: #0F172A; /* was #1F4529 (ink) */
  --lc-9e782f: #0A3A80; /* was #9E782F (accent-ink) */
  --lc-f1ecdf: #EFF6FF; /* was #F1ECDF (accent-soft) */
  --lc-4a4337: #1E293B; /* was #4A4337 (ink-2) */
  --lc-6d6556: #475569; /* was #6D6556 (muted) */
  --lc-9a9080: #64748B; /* was #9A9080 (faint) */
  --lc-f6ebd3: #BFDBFE; /* was #F6EBD3 (accent-line) */
  --lc-c09827: #1D5FD6; /* was #C09827 (accent) */
  --lc-d6cebf: #BFDBFE; /* was #D6CEBF (accent-line) */
  --lc-5a544a: #1E293B; /* was #5A544A (ink-2) */
  --lc-eae5dc: #F1F5F9; /* was #EAE5DC (raised) */
  --lc-963e32: #991B1B; /* was #963E32 (negative-ink) */
  --lc-cfc7b3: #BFDBFE; /* was #CFC7B3 (accent-line) */
  --lc-9e4d40: #DC2626; /* was #9E4D40 (negative) */
  --lc-fffdf7: #EFF6FF; /* was #FFFDF7 (accent-soft) */
  --lc-d6d0c4: #CBD5E1; /* was #D6D0C4 (control) */
  --lc-8d5b4c: #DC2626; /* was #8D5B4C (negative) */
  --lc-a63b30: #DC2626; /* was #A63B30 (negative) */
  --lc-fdf1f0: #FEF2F2; /* was #FDF1F0 (negative-soft) */
  --lc-fffdf9: #EFF6FF; /* was #FFFDF9 (accent-soft) */
  --lc-efece6: #F1F5F9; /* was #EFECE6 (raised) */
  --lc-cfc8ba: #CBD5E1; /* was #CFC8BA (control) */
  --lc-fbf3dc: #EFF6FF; /* was #FBF3DC (accent-soft) */
  --lc-5b5346: #1E293B; /* was #5B5346 (ink-2) */
  --lc-e5dac0: #BFDBFE; /* was #E5DAC0 (accent-line) */
  --lc-f5eedb: #EFF6FF; /* was #F5EEDB (accent-soft) */
  --lc-f5f1e8: #EFF6FF; /* was #F5F1E8 (accent-soft) */
  --lc-f6f1e7: #EFF6FF; /* was #F6F1E7 (accent-soft) */
  --lc-efe9dc: #EFF6FF; /* was #EFE9DC (accent-soft) */
  --lc-5a7261: #475569; /* was #5A7261 (muted) */
  --lc-f0fdf4: #F0FDF4; /* was #F0FDF4 (positive-soft) */
  --lc-3b82f6: #1D5FD6; /* was #3B82F6 (accent) */
  --lc-c4bcad: #CBD5E1; /* was #C4BCAD (control) */
  --lc-f2efe9: #F1F5F9; /* was #F2EFE9 (raised) */
  --lc-4a3e2c: #0A3A80; /* was #4A3E2C (accent-ink) */
  --lc-d6cfbe: #BFDBFE; /* was #D6CFBE (accent-line) */
  --lc-665f53: #475569; /* was #665F53 (muted) */
  --lc-b59334: #1D5FD6; /* was #B59334 (accent) */
  --lc-5b8e9b: #1D5FD6; /* was #5B8E9B (accent) */
  --lc-1e5631: #0F5132; /* was #1E5631 (positive-ink) */
  --lc-b9707e: #DC2626; /* was #B9707E (negative) */
  --lc-e6e0d3: #F1F5F9; /* was #E6E0D3 (raised) */
  --lc-e6e0d2: #F1F5F9; /* was #E6E0D2 (raised) */
  --lc-e6dfcf: #F1F5F9; /* was #E6DFCF (raised) */
  --lc-7a6116: #0A3A80; /* was #7A6116 (accent-ink) */
  --lc-f0f5f0: #F1F5F9; /* was #F0F5F0 (raised) */
  --lc-b34040: #DC2626; /* was #B34040 (negative) */
  --lc-c8c2b5: #CBD5E1; /* was #C8C2B5 (control) */
  --lc-e0dad0: #CBD5E1; /* was #E0DAD0 (control) */
  --lc-d8a638: #1D5FD6; /* was #D8A638 (accent) */
  --lc-a8a296: #64748B; /* was #A8A296 (faint) */
  --lc-efece4: #F1F5F9; /* was #EFECE4 (raised) */
  --lc-f1e5c7: #BFDBFE; /* was #F1E5C7 (accent-line) */
  --lc-8c8479: #64748B; /* was #8C8479 (faint) */
  --lc-fff9ea: #EFF6FF; /* was #FFF9EA (accent-soft) */
  --lc-b85d6f: #DC2626; /* was #B85D6F (negative) */
  --lc-e6dec8: #BFDBFE; /* was #E6DEC8 (accent-line) */
  --lc-857c6c: #475569; /* was #857C6C (muted) */
  --lc-e6f2ea: #F1F5F9; /* was #E6F2EA (raised) */
  --lc-8c4c5a: #DC2626; /* was #8C4C5A (negative) */
  --lc-6b7280: #475569; /* was #6B7280 (muted) */
  --lc-d6cfc2: #CBD5E1; /* was #D6CFC2 (control) */
  --lc-fff6da: #EFF6FF; /* was #FFF6DA (accent-soft) */
  --lc-5a4a12: #0A3A80; /* was #5A4A12 (accent-ink) */
  --lc-f9ebea: #FEF2F2; /* was #F9EBEA (negative-soft) */
  --lc-fbeae6: #FEF2F2; /* was #FBEAE6 (negative-soft) */
  --lc-7e3a31: #991B1B; /* was #7E3A31 (negative-ink) */
  --lc-e8e2d5: #F1F5F9; /* was #E8E2D5 (raised) */
  --lc-ef4444: #DC2626; /* was #EF4444 (negative) */
  --lc-f5d37e: #1D5FD6; /* was #F5D37E (accent) */
  --lc-d6cebd: #BFDBFE; /* was #D6CEBD (accent-line) */
  --lc-6f7fad: #1D5FD6; /* was #6F7FAD (accent) */
  --lc-8b7bb5: #1D5FD6; /* was #8B7BB5 (accent) */
  --lc-e8f8f0: #F0FDF4; /* was #E8F8F0 (positive-soft) */
  --lc-5575bb: #1D5FD6; /* was #5575BB (accent) */
  --lc-e4d5b7: #BFDBFE; /* was #E4D5B7 (accent-line) */
  --lc-63562c: #0A3A80; /* was #63562C (accent-ink) */
  --lc-d8d2c5: #CBD5E1; /* was #D8D2C5 (control) */
  --lc-1f4a2b: #1D5FD6; /* was #1F4A2B (accent) */
  --lc-a53630: #991B1B; /* was #A53630 (negative-ink) */
  --lc-113822: #0F172A; /* was #113822 (ink) */
  --lc-155724: #0F5132; /* was #155724 (positive-ink) */
  --lc-244131: #0F172A; /* was #244131 (ink) */
  --lc-783126: #991B1B; /* was #783126 (negative-ink) */
  --lc-ede7dc: #F1F5F9; /* was #EDE7DC (raised) */
  --lc-387b4c: #1D5FD6; /* was #387B4C (accent) */
  --lc-b58a28: #1D5FD6; /* was #B58A28 (accent) */
  --lc-c48344: #DC2626; /* was #C48344 (negative) */
  --lc-5b7b9e: #1D5FD6; /* was #5B7B9E (accent) */
  --lc-a3d9a5: #16A34A; /* was #A3D9A5 (positive) */
  --lc-2e7d32: #1D5FD6; /* was #2E7D32 (accent) */
  --lc-e5b232: #1D5FD6; /* was #E5B232 (accent) */
  --lc-bee0c2: #BBF7D0; /* was #BEE0C2 (positive-line) */
  --lc-64a76c: #16A34A; /* was #64A76C (positive) */
  --lc-2d6839: #1D5FD6; /* was #2D6839 (accent) */
  --lc-eed2cb: #FECACA; /* was #EED2CB (negative-line) */
  --lc-d4897b: #DC2626; /* was #D4897B (negative) */
  --lc-e8f5e9: #F0FDF4; /* was #E8F5E9 (positive-soft) */
  --lc-16a34a: #0F5132; /* was #16A34A (positive-ink) */
  --lc-dfd8c8: #BFDBFE; /* was #DFD8C8 (accent-line) */
  --lc-3d5a73: #0A3A80; /* was #3D5A73 (accent-ink) */
  --lc-5f9467: #16A34A; /* was #5F9467 (positive) */
  --lc-4e8c8c: #1D5FD6; /* was #4E8C8C (accent) */
  --lc-3f6f7a: #0A3A80; /* was #3F6F7A (accent-ink) */
  --lc-1b7a44: #1D5FD6; /* was #1B7A44 (accent) */
  --lc-5b6fb5: #1D5FD6; /* was #5B6FB5 (accent) */
  --lc-d8d0be: #BFDBFE; /* was #D8D0BE (accent-line) */
  --lc-e0d9c9: #BFDBFE; /* was #E0D9C9 (accent-line) */
  --lc-fffbef: #EFF6FF; /* was #FFFBEF (accent-soft) */
  --lc-c9c2af: #CBD5E1; /* was #C9C2AF (control) */
  --lc-e8c766: #1D5FD6; /* was #E8C766 (accent) */
  --lc-faf5e8: #EFF6FF; /* was #FAF5E8 (accent-soft) */
  --lc-f3e6c4: #BFDBFE; /* was #F3E6C4 (accent-line) */
  --lc-2f80ed: #1D5FD6; /* was #2F80ED (accent) */
  --lc-fffdf5: #EFF6FF; /* was #FFFDF5 (accent-soft) */
  --lc-5e93a0: #1D5FD6; /* was #5E93A0 (accent) */
  --lc-f0f8fa: #EFF6FF; /* was #F0F8FA (accent-soft) */
  --lc-dc2626: #DC2626; /* was #DC2626 (negative) */
  --lc-fee2e2: #FEF2F2; /* was #FEE2E2 (negative-soft) */
  --lc-6b5515: #0A3A80; /* was #6B5515 (accent-ink) */
  --lc-e2dccf: #BFDBFE; /* was #E2DCCF (accent-line) */
  --lc-f5f2eb: #F1F5F9; /* was #F5F2EB (raised) */
  --lc-3d3528: #0F172A; /* was #3D3528 (ink) */
  --lc-fff5f5: #FEF2F2; /* was #FFF5F5 (negative-soft) */
  --lc-f6d0d0: #FECACA; /* was #F6D0D0 (negative-line) */
  --lc-b91c1c: #991B1B; /* was #B91C1C (negative-ink) */
  --lc-f5efe6: #EFF6FF; /* was #F5EFE6 (accent-soft) */
  --lc-a66155: #DC2626; /* was #A66155 (negative) */
  --lc-fdf3d6: #EFF6FF; /* was #FDF3D6 (accent-soft) */
  --lc-d6bd7a: #1D5FD6; /* was #D6BD7A (accent) */
  --lc-eae5d9: #F1F5F9; /* was #EAE5D9 (raised) */
  --lc-4e8e9b: #1D5FD6; /* was #4E8E9B (accent) */
  --lc-a36052: #DC2626; /* was #A36052 (negative) */
  --lc-5c728e: #475569; /* was #5C728E (muted) */
  --lc-8e5781: #6366F1; /* was #8E5781 (chart-4) */
  --lc-9c6955: #DC2626; /* was #9C6955 (negative) */
  --lc-6d639c: #1D5FD6; /* was #6D639C (accent) */
  --lc-5f6c72: #475569; /* was #5F6C72 (muted) */
  --lc-77756d: #475569; /* was #77756D (muted) */
  --lc-f3ece1: #EFF6FF; /* was #F3ECE1 (accent-soft) */
  --lc-588d96: #1D5FD6; /* was #588D96 (accent) */
  --lc-efe8da: #BFDBFE; /* was #EFE8DA (accent-line) */
  --lc-8f3326: #991B1B; /* was #8F3326 (negative-ink) */
  --lc-85612a: #0A3A80; /* was #85612A (accent-ink) */
  --lc-7a7265: #475569; /* was #7A7265 (muted) */
  --lc-f3eee3: #EFF6FF; /* was #F3EEE3 (accent-soft) */
  --lc-9b7ba8: #64748B; /* was #9B7BA8 (faint) */
  --lc-ddd6c8: #BFDBFE; /* was #DDD6C8 (accent-line) */
  --lc-5a5348: #1E293B; /* was #5A5348 (ink-2) */
  --lc-4a443c: #1E293B; /* was #4A443C (ink-2) */
  --lc-8b4a52: #991B1B; /* was #8B4A52 (negative-ink) */
  --lc-2563eb: #1D5FD6; /* was #2563EB (accent) */
  --lc-6b5416: #0A3A80; /* was #6B5416 (accent-ink) */
  --lc-8e5249: #DC2626; /* was #8E5249 (negative) */
  --lc-274b2e: #1D5FD6; /* was #274B2E (accent) */
  --lc-ebd58c: #1D5FD6; /* was #EBD58C (accent) */
  --lc-8e4f47: #991B1B; /* was #8E4F47 (negative-ink) */
  --lc-e2d6b4: #BFDBFE; /* was #E2D6B4 (accent-line) */
  --lc-fffdf8: #EFF6FF; /* was #FFFDF8 (accent-soft) */
  --lc-fff6d6: #EFF6FF; /* was #FFF6D6 (accent-soft) */
  --lc-6e5814: #0A3A80; /* was #6E5814 (accent-ink) */
  --lc-f7f2e6: #EFF6FF; /* was #F7F2E6 (accent-soft) */
  --lc-8c6a9c: #64748B; /* was #8C6A9C (faint) */
  --lc-efebf3: #F1F5F9; /* was #EFEBF3 (raised) */
  --lc-eef1f6: #F1F5F9; /* was #EEF1F6 (raised) */
  --lc-3e5670: #0A3A80; /* was #3E5670 (accent-ink) */
  --lc-7a4f24: #991B1B; /* was #7A4F24 (negative-ink) */
  --lc-e2dcd0: #F1F5F9; /* was #E2DCD0 (raised) */
  --lc-dfd7c5: #BFDBFE; /* was #DFD7C5 (accent-line) */
  --lc-d5cbb8: #BFDBFE; /* was #D5CBB8 (accent-line) */
  --lc-4c6329: #0F5132; /* was #4C6329 (positive-ink) */
  --lc-b3402f: #DC2626; /* was #B3402F (negative) */
  --lc-fbf3d9: #EFF6FF; /* was #FBF3D9 (accent-soft) */
  --lc-fbf3e6: #EFF6FF; /* was #FBF3E6 (accent-soft) */
  --lc-eae2d0: #BFDBFE; /* was #EAE2D0 (accent-line) */
  --lc-8f8678: #64748B; /* was #8F8678 (faint) */
  --lc-fbf7ee: #EFF6FF; /* was #FBF7EE (accent-soft) */
  --lc-efe6d4: #BFDBFE; /* was #EFE6D4 (accent-line) */
  --lc-eadfbf: #BFDBFE; /* was #EADFBF (accent-line) */
  --lc-5a4a1c: #0A3A80; /* was #5A4A1C (accent-ink) */
  --lc-8a6a12: #0A3A80; /* was #8A6A12 (accent-ink) */
  --lc-d8cfb9: #BFDBFE; /* was #D8CFB9 (accent-line) */
  --lc-fff4cc: #EFF6FF; /* was #FFF4CC (accent-soft) */
  --lc-d9b94c: #1D5FD6; /* was #D9B94C (accent) */
  --lc-f0e3b0: #BFDBFE; /* was #F0E3B0 (accent-line) */
  --lc-fff9e3: #EFF6FF; /* was #FFF9E3 (accent-soft) */
  --lc-e2daca: #BFDBFE; /* was #E2DACA (accent-line) */
  --lc-e5e7eb: #F1F5F9; /* was #E5E7EB (raised) */
  --lc-ebd9a0: #BFDBFE; /* was #EBD9A0 (accent-line) */
  --lc-a39b8b: #64748B; /* was #A39B8B (faint) */
  --lc-f2f7f4: #F1F5F9; /* was #F2F7F4 (raised) */
  --lc-f0f7f2: #F1F5F9; /* was #F0F7F2 (raised) */
  --lc-efe9da: #BFDBFE; /* was #EFE9DA (accent-line) */
  --lc-eaf5ee: #F0FDF4; /* was #EAF5EE (positive-soft) */
  --lc-f8f5ee: #EFF6FF; /* was #F8F5EE (accent-soft) */
  --lc-0d2818: #0F172A; /* was #0D2818 (ink) */
  --lc-1c1917: #0F172A; /* was #1C1917 (ink) */
  --lc-645d52: #475569; /* was #645D52 (muted) */
  --lc-948b7d: #64748B; /* was #948B7D (faint) */
  --lc-143d25: #0F172A; /* was #143D25 (ink) */
  --lc-1d5333: #1D5FD6; /* was #1D5333 (accent) */
  --lc-184d30: #0F172A; /* was #184D30 (ink) */
  --lc-aa841e: #0A3A80; /* was #AA841E (accent-ink) */
  --lc-f7eeda: #EFF6FF; /* was #F7EEDA (accent-soft) */
  --lc-e4cd96: #1D5FD6; /* was #E4CD96 (accent) */
  --lc-d8d2c4: #CBD5E1; /* was #D8D2C4 (control) */
  --lc-b6ad9c: #64748B; /* was #B6AD9C (faint) */
  --lc-5a4208: #0A3A80; /* was #5A4208 (accent-ink) */
  --lc-f8da8d: #BFDBFE; /* was #F8DA8D (accent-line) */
  --lc-faf2d8: #EFF6FF; /* was #FAF2D8 (accent-soft) */
  --lc-ddc58c: #1D5FD6; /* was #DDC58C (accent) */
  --lc-fffefa: #EFF6FF; /* was #FFFEFA (accent-soft) */
  --lc-f8fafd: #EFF6FF; /* was #F8FAFD (accent-soft) */
  --lc-faf8fd: #EFF6FF; /* was #FAF8FD (accent-soft) */
  --lc-efece5: #F1F5F9; /* was #EFECE5 (raised) */
  --lc-1e5936: #1D5FD6; /* was #1E5936 (accent) */
  --lc-faf7f2: #EFF6FF; /* was #FAF7F2 (accent-soft) */
  --lc-6b6458: #475569; /* was #6B6458 (muted) */
  --lc-f5efeb: #F1F5F9; /* was #F5EFEB (raised) */
  --lc-eae1da: #F1F5F9; /* was #EAE1DA (raised) */
  --lc-dda092: #DC2626; /* was #DDA092 (negative) */
  --lc-d09385: #DC2626; /* was #D09385 (negative) */
  --lc-b25844: #DC2626; /* was #B25844 (negative) */
  --lc-9e4d3c: #DC2626; /* was #9E4D3C (negative) */
  --lc-a04a37: #DC2626; /* was #A04A37 (negative) */
  --lc-8b3e2d: #991B1B; /* was #8B3E2D (negative-ink) */
  --lc-8e3e32: #991B1B; /* was #8E3E32 (negative-ink) */
  --lc-ebf5ec: #F1F5F9; /* was #EBF5EC (raised) */
  --lc-dbeadb: #F1F5F9; /* was #DBEADB (raised) */
  --lc-d5e8d6: #F1F5F9; /* was #D5E8D6 (raised) */
  --lc-c4dec5: #BBF7D0; /* was #C4DEC5 (positive-line) */
  --lc-a3cfa5: #16A34A; /* was #A3CFA5 (positive) */
  --lc-8cbf95: #16A34A; /* was #8CBF95 (positive) */
  --lc-6fa87a: #16A34A; /* was #6FA87A (positive) */
  --lc-5d9668: #16A34A; /* was #5D9668 (positive) */
  --lc-3e7d48: #1D5FD6; /* was #3E7D48 (accent) */
  --lc-336b3c: #1D5FD6; /* was #336B3C (accent) */
  --lc-d5cebf: #CBD5E1; /* was #D5CEBF (control) */
  --lc-1e3e2b: #0F172A; /* was #1E3E2B (ink) */
  --lc-a8a193: #64748B; /* was #A8A193 (faint) */
  --lc-fffbf0: #EFF6FF; /* was #FFFBF0 (accent-soft) */
  --lc-1e3a2b: #0F172A; /* was #1E3A2B (ink) */
  --lc-313a35: #1E293B; /* was #313A35 (ink-2) */
  --lc-24221e: #0F172A; /* was #24221E (ink) */
  --lc-fcf8ed: #EFF6FF; /* was #FCF8ED (accent-soft) */
  --lc-d5cebe: #CBD5E1; /* was #D5CEBE (control) */
  --lc-e8e2d2: #F1F5F9; /* was #E8E2D2 (raised) */
  --lc-cfc9bc: #CBD5E1; /* was #CFC9BC (control) */
  --lc-e5decd: #F1F5F9; /* was #E5DECD (raised) */
  --lc-a9ceba: #16A34A; /* was #A9CEBA (positive) */
  --lc-e1efe7: #F1F5F9; /* was #E1EFE7 (raised) */
  --lc-ede9e0: #F1F5F9; /* was #EDE9E0 (raised) */
  --lc-fae3e1: #FEF2F2; /* was #FAE3E1 (negative-soft) */
  --lc-f4f0e8: #EFF6FF; /* was #F4F0E8 (accent-soft) */
  --lc-f4efeb: #F1F5F9; /* was #F4EFEB (raised) */
  --lc-a64b5b: #DC2626; /* was #A64B5B (negative) */
  --lc-fafdf9: #F0FDF4; /* was #FAFDF9 (positive-soft) */
  --lc-eaf2ec: #F1F5F9; /* was #EAF2EC (raised) */
  --lc-c4d9ca: #BBF7D0; /* was #C4D9CA (positive-line) */
  --lc-385e42: #0F5132; /* was #385E42 (positive-ink) */
  --lc-a0988a: #64748B; /* was #A0988A (faint) */
  --lc-7a7468: #475569; /* was #7A7468 (muted) */
  --lc-524b40: #1E293B; /* was #524B40 (ink-2) */
  --lc-ddd7c9: #BFDBFE; /* was #DDD7C9 (accent-line) */
  --lc-fdf2f0: #FEF2F2; /* was #FDF2F0 (negative-soft) */
  --lc-f5c6cb: #FECACA; /* was #F5C6CB (negative-line) */
  --lc-edf7f0: #F0FDF4; /* was #EDF7F0 (positive-soft) */
  --lc-c3e6cb: #BBF7D0; /* was #C3E6CB (positive-line) */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

::selection {
  background: var(--pk-cobalt);
  color: #FFFFFF;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

:focus-visible {
  outline: 2px solid var(--pk-cobalt);
  outline-offset: 2px;
}

.fig-num, [data-nominal], .sr-wallet-balance, .sr-net-worth-amount, .sr-trans-amount, .sr-cat-amount {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--sr-font-body);
  background-color: var(--sr-bg);
  color: var(--sr-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   Demo Banner
   ========================================================================== */
.sr-demo-banner {
  display: none !important;
}

.sr-demo-exit-btn {
  background: none;
  border: none;
  color: #5A4208;
  font-weight: 700;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

/* ==========================================================================
   App Container & Layout
   ========================================================================== */
.sr-app-container {
  display: flex;
  flex: 1;
  min-height: calc(100vh - 37px);
  width: 100%;
}

/* Sidebar - Kobalt Tenang Crisp Light Plane */
.sr-sidebar {
  width: 256px;
  background-color: #FFFFFF;
  color: var(--pk-ink);
  display: flex;
  flex-direction: column;
  padding: 20px 14px 16px;
  flex-shrink: 0;
  border-right: 1px solid var(--pk-border);
}

.sr-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px 18px;
}

.sr-brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.sr-brand-info h2 {
  font-family: var(--sr-font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--pk-ink);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.sr-brand-info span {
  font-size: 11px;
  color: var(--pk-cobalt-ink);
  font-weight: 700;
  background: var(--pk-cobalt-soft);
  border: 1px solid var(--pk-cobalt-line);
  padding: 2px 7px;
  border-radius: 6px;
  display: inline-block;
  margin-top: 3px;
}

.sr-sidebar-search {
  margin-bottom: 16px;
  position: relative;
}

.sr-sidebar-search input {
  width: 100%;
  background: var(--pk-ground);
  border: 1px solid var(--pk-border);
  border-radius: 10px;
  padding: 9px 12px 9px 34px;
  color: var(--pk-ink);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: all var(--duration-quick) var(--ease-smooth-out);
}

.sr-sidebar-search input:focus {
  background: #FFFFFF;
  border-color: var(--pk-cobalt);
  box-shadow: 0 0 0 3px rgba(29, 95, 214, 0.12);
}

.sr-sidebar-search input::placeholder {
  color: var(--pk-ink-faint);
}

.sr-sidebar-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pk-ink-faint);
  font-size: 13px;
}

.sr-nav-menu {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.sr-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--pk-ink-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: all var(--duration-quick) var(--ease-smooth-out);
  user-select: none;
}

.sr-nav-item-left {
  display: flex;
  align-items: center;
  gap: 11px;
}

.sr-nav-item:hover {
  background: var(--pk-ground);
  color: var(--pk-ink);
  transform: translateX(1px);
}

.sr-nav-item.active {
  background: var(--pk-cobalt-soft);
  color: var(--pk-cobalt-ink);
  font-weight: 800;
  border: 1px solid var(--pk-cobalt-line);
  box-shadow: none;
  transform: none;
}

.sr-nav-item.active-parent {
  background: var(--pk-ground);
  color: var(--pk-ink);
  font-weight: 700;
}

.sr-nav-sublist {
  display: flex;
  flex-direction: column;
  padding-left: 16px;
  margin-left: 16px;
  border-left: 1.5px solid var(--pk-border);
  gap: 2px;
  margin-top: 4px;
  margin-bottom: 8px;
}

.sr-nav-subitem {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--pk-ink-muted);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-quick) var(--ease-smooth-out);
}

.sr-nav-subitem:hover {
  color: var(--pk-ink);
  background: var(--pk-ground);
  transform: translateX(1px);
}

.sr-nav-subitem.active {
  color: var(--pk-cobalt);
  font-weight: 700;
  background: var(--pk-cobalt-soft);
}

.sr-sidebar-footer {
  margin-top: auto;
  border-top: 1px solid var(--pk-border);
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sr-profile-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--pk-ground);
  border: 1px solid var(--pk-border);
  cursor: pointer;
  transition: all var(--duration-quick) var(--ease-smooth-out);
  flex: 1;
  min-width: 0;
}

.sr-profile-card:hover {
  background: #FFFFFF;
  border-color: var(--pk-cobalt-line);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  transform: translateY(-0.5px);
}

.sr-profile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--pk-cobalt);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
}

.sr-profile-info {
  display: flex;
  flex-direction: column;
}

.sr-profile-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--pk-ink);
}

.sr-profile-role {
  font-size: 11px;
  color: var(--pk-ink-faint);
}

/* ==========================================================================
   Main Content Area
   ========================================================================== */
.sr-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 24px 32px 64px;
  background-color: var(--sr-bg);
}

/* Top App Header */
.sr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.sr-header-greeting h1 {
  font-family: var(--sr-font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sr-text);
}

.sr-header-greeting p {
  font-size: 13.5px;
  color: var(--sr-text-muted);
  font-weight: 500;
  margin-top: 2px;
}

.sr-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sr-btn-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--sr-radius-md);
  border: 1px solid var(--sr-border);
  background: var(--sr-surface);
  color: var(--sr-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.15s ease;
}

.sr-btn-icon:hover {
  background: var(--sr-bg-subtle);
  border-color: #D6CEBF;
}

.sr-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--sr-surface);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-md);
  padding: 8px 16px;
  font-size: 13.5px;
  color: var(--sr-text-muted);
  cursor: pointer;
  position: relative;
  transition: all var(--duration-quick) var(--ease-smooth-out);
}

.sr-search-bar:focus-within {
  border-color: var(--pk-cobalt);
  box-shadow: 0 0 0 3px rgba(29, 95, 214, 0.12);
}

.sr-search-kbd {
  background: var(--sr-bg-subtle);
  border: 1px solid var(--sr-border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--sr-text-muted);
}

.sr-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  min-width: 320px;
  background: #FFFFFF;
  border: 1px solid var(--pk-border);
  border-radius: 14px;
  box-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
  padding: 8px;
  max-height: 380px;
  overflow-y: auto;
  z-index: 1000;
  animation: searchFadeIn 0.15s var(--ease-smooth-out);
}

@keyframes searchFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.sr-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 9px;
  cursor: pointer;
  color: var(--pk-ink);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  transition: background var(--duration-micro) ease;
}

.sr-search-item:hover,
.sr-search-item.highlighted {
  background: var(--pk-cobalt-soft);
  color: var(--pk-cobalt-ink);
}

.sr-search-item-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--pk-ink-muted);
  background: var(--pk-ground);
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: auto;
}

.sr-search-empty {
  padding: 16px;
  text-align: center;
  color: var(--pk-ink-muted);
  font-size: 13px;
}

.sr-btn-catat {
  background-color: var(--pk-cobalt);
  color: #FFFFFF;
  border: none;
  border-radius: var(--sr-radius-md);
  padding: 10px 20px;
  font-family: var(--sr-font-display);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(29, 95, 214, 0.25);
  transition: all 0.15s ease;
}

.sr-btn-catat:hover {
  background-color: var(--pk-cobalt-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(29, 95, 214, 0.35);
}

.sr-btn-catat kbd {
  background: rgba(0, 0, 0, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}

/* ==========================================================================
   Dashboard Widgets Grid
   ========================================================================== */
.sr-dashboard-top-grid {
  display: grid;
  grid-template-columns: 1.6fr 1.2fr;
  gap: 20px;
  margin-bottom: 24px;
}

/* Hero Net Worth Card - Kobalt Tenang Obsidian & Cobalt */
.sr-net-worth-card {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 55%, #1D5FD6 100%);
  color: #FFFFFF;
  border-radius: var(--sr-radius-xl);
  padding: 26px 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.18), 0 4px 12px -2px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform var(--duration-quick) var(--ease-smooth-out), box-shadow var(--duration-quick) var(--ease-smooth-out);
}

.sr-net-worth-card:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 16px 40px -6px rgba(15, 23, 42, 0.24), 0 6px 16px -3px rgba(15, 23, 42, 0.12);
}

.sr-net-worth-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.sr-net-worth-label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.sr-net-worth-change {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--sr-radius-full);
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sr-net-worth-amount {
  font-family: var(--sr-font-display);
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.sr-net-worth-sparkline {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  width: 170px;
  height: 80px;
  opacity: 0.92;
}

.sr-net-worth-metrics {
  display: flex;
  gap: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 18px;
}

.sr-metric-col span {
  display: block;
}

.sr-metric-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 4px;
}

.sr-metric-val {
  font-family: var(--sr-font-display);
  font-size: 17px;
  font-weight: 800;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}

/* 6-Month Cashflow Widget */
.sr-cashflow-card {
  background: var(--sr-surface);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-xl);
  padding: 24px 26px;
  box-shadow: var(--sr-shadow-sm);
  display: flex;
  flex-direction: column;
  transition: all var(--duration-quick) var(--ease-smooth-out);
}

.sr-cashflow-card:hover {
  border-color: #D6CEBF;
  box-shadow: var(--sr-shadow-md);
  transform: translateY(-1.5px);
}

.sr-cashflow-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.sr-cashflow-title {
  font-family: var(--sr-font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--sr-text);
}

.sr-cashflow-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sr-text-muted);
}

.sr-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  display: inline-block;
}

.sr-dot-in { background-color: #10B981; }
.sr-dot-out { background-color: #3B82F6; }

.sr-chart-container {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 140px;
  padding: 10px 10px 0;
  border-bottom: 1px solid var(--sr-border-light);
}

.sr-chart-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 14%;
}

.sr-bar-pair {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 110px;
}

.sr-bar {
  width: 12px;
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
}

.sr-bar-in { background-color: #10B981; }
.sr-bar-out { background-color: #3B82F6; }

.sr-chart-month {
  font-size: 11px;
  font-weight: 600;
  color: var(--sr-text-muted);
}

/* Bottom Grid: Cards row */
.sr-dashboard-bottom-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.sr-card {
  background: var(--sr-surface);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-xl);
  padding: 22px 24px;
  box-shadow: var(--sr-shadow-sm);
  transition: all var(--duration-quick) var(--ease-smooth-out);
}

.sr-card:hover {
  border-color: #D6CEBD;
  box-shadow: var(--sr-shadow-md);
  transform: translateY(-1.5px);
}

.sr-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.sr-card-title {
  font-family: var(--sr-font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--sr-text);
  letter-spacing: -0.015em;
}

.sr-card-action {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sr-accent-gold);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-micro) ease;
}

.sr-card-action:hover {
  color: var(--sr-accent-gold-hover);
  text-decoration: underline;
}

/* Wallets mini list */
.sr-wallet-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px;
  border-radius: var(--sr-radius-sm);
  border-bottom: 1px solid var(--sr-border-light);
  transition: background var(--duration-micro) ease;
}

.sr-wallet-item:hover {
  background: var(--sr-surface-muted);
}

.sr-wallet-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sr-wallet-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sr-wallet-icon-box {
  width: 38px;
  height: 38px;
  border-radius: var(--sr-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.sr-wallet-name {
  font-weight: 700;
  font-size: 14px;
}

.sr-wallet-balance {
  font-family: var(--sr-font-display);
  font-weight: 700;
  font-size: 14px;
}

/* Goal Progress Item */
.sr-goal-item {
  margin-bottom: 16px;
}

.sr-goal-item:last-child {
  margin-bottom: 0;
}

.sr-goal-info {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 6px;
}

.sr-progress-track {
  width: 100%;
  height: 8px;
  background-color: var(--sr-bg-subtle);
  border-radius: var(--sr-radius-full);
  overflow: hidden;
}

.sr-progress-fill {
  height: 100%;
  border-radius: var(--sr-radius-full);
  transition: width 0.3s ease;
}

/* Agenda / Checklist */
.sr-agenda-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--sr-border-light);
}

.sr-agenda-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sr-checkbox {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid #C4BCAD;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #FFFFFF;
  background: #FFFFFF;
}

.sr-checkbox.checked {
  background: var(--sr-primary-green);
  border-color: var(--sr-primary-green);
}

.sr-agenda-text {
  font-size: 13.5px;
  font-weight: 600;
  flex: 1;
}

.sr-agenda-text.done {
  text-decoration: line-through;
  color: var(--sr-text-faint);
}

/* Subpage Tab Pills Header */
.sr-subpage-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.sr-pill-btn {
  padding: 8px 18px;
  border-radius: var(--sr-radius-full);
  font-family: var(--sr-font-display);
  font-weight: 700;
  font-size: 13.5px;
  border: 1px solid var(--sr-border);
  background: var(--sr-surface);
  color: var(--sr-text);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.sr-pill-btn:hover {
  border-color: #D6CEBF;
}

.sr-pill-btn.active {
  background-color: var(--sr-primary-green);
  color: #FFFFFF;
  border-color: var(--sr-primary-green);
}

/* ==========================================================================
   Table & Lists (Transactions, Debts, Assets)
   ========================================================================== */
.sr-table-container {
  background: var(--sr-surface);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-lg);
  overflow: hidden;
  box-shadow: var(--sr-shadow-sm);
}

.sr-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.sr-table th {
  background: var(--sr-surface-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sr-text-muted);
  padding: 14px 20px;
  border-bottom: 1px solid var(--sr-border);
}

.sr-table td {
  padding: 16px 20px;
  font-size: 14px;
  border-bottom: 1px solid var(--sr-border-light);
  color: var(--sr-text);
}

.sr-table tr:last-child td {
  border-bottom: none;
}

.sr-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--sr-radius-full);
  font-size: 12px;
  font-weight: 700;
}

/* ==========================================================================
   Modal Styles
   ========================================================================== */
.sr-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 35, 21, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-smooth-out);
}

.sr-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.sr-modal {
  background: var(--sr-surface);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-xl);
  width: 90%;
  max-width: 480px;
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px -12px rgba(10, 35, 21, 0.22);
  overflow: hidden;
  transform: translateY(16px) scale(0.98);
  transition: transform var(--duration-fast) var(--ease-smooth-out);
}

.sr-modal > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.sr-modal-backdrop.open .sr-modal {
  transform: translateY(0) scale(1);
}

.sr-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--sr-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.sr-modal-title {
  font-family: var(--sr-font-display);
  font-weight: 800;
  font-size: 19px;
  color: var(--sr-text);
}

.sr-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--sr-text-muted);
  cursor: pointer;
  line-height: 1;
}

.sr-modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}

.sr-type-toggle {
  display: flex;
  background: var(--sr-bg-subtle);
  border-radius: var(--sr-radius-md);
  padding: 4px;
  gap: 4px;
}

.sr-type-btn {
  flex: 1;
  border: none;
  padding: 8px 0;
  border-radius: var(--sr-radius-sm);
  font-family: var(--sr-font-display);
  font-weight: 700;
  font-size: 13px;
  background: none;
  color: var(--sr-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sr-type-btn.active {
  background: #FFFFFF;
  color: var(--sr-text);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.sr-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sr-form-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sr-text-muted);
}

.sr-form-input,
.sr-form-select {
  padding: 12px 14px;
  border: 1.5px solid var(--sr-border);
  border-radius: var(--sr-radius-md);
  font-family: inherit;
  font-size: 14.5px;
  color: var(--sr-text);
  background: #FFFFFF;
  outline: none;
  transition: all var(--duration-quick) var(--ease-smooth-out);
}

.sr-form-input:focus,
.sr-form-select:focus {
  border-color: var(--sr-border-focus);
  box-shadow: 0 0 0 3px rgba(10, 35, 21, 0.08);
}

.sr-modal-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--sr-border-light);
  display: flex;
  gap: 10px;
}

.sr-btn-primary {
  flex: 1;
  background: var(--sr-primary-dark);
  color: #FFFFFF;
  border: none;
  border-radius: var(--sr-radius-md);
  padding: 12px 16px;
  font-family: var(--sr-font-display);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(10, 35, 21, 0.18);
  transition: all var(--duration-quick) var(--ease-smooth-out);
}

.sr-btn-primary:hover {
  background: var(--sr-primary-green);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(10, 35, 21, 0.24);
}

.sr-btn-primary:active {
  transform: scale(0.98);
}

.sr-btn-secondary {
  border: 1px solid var(--sr-border);
  background: var(--sr-surface);
  color: var(--sr-text);
  border-radius: var(--sr-radius-md);
  padding: 12px 18px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--duration-quick) var(--ease-smooth-out);
}

.sr-btn-secondary:hover {
  background: var(--sr-bg-subtle);
  border-color: #D6CEBD;
}

/* Install Banner matching PundiKita screenshot */
.sr-install-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 680px;
  background: var(--sr-surface);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-lg);
  padding: 16px 20px;
  box-shadow: var(--sr-shadow-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 90;
}

.sr-install-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sr-install-logo {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
}

.sr-install-text h4 {
  font-family: var(--sr-font-display);
  font-size: 14px;
  font-weight: 700;
}

.sr-install-text p {
  font-size: 12px;
  color: var(--sr-text-muted);
}

.sr-install-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sr-install-btn-dismiss {
  background: none;
  border: 1px solid var(--sr-border);
  padding: 8px 16px;
  border-radius: var(--sr-radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.sr-install-btn-ok {
  background: var(--sr-accent-gold);
  color: #FFFFFF;
  border: none;
  padding: 8px 20px;
  border-radius: var(--sr-radius-md);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   Ringkasan 2-Column Interactive View (PundiKita Screenshot 1 & 2)
   ========================================================================== */

/* Yellow Notification Banner */
.sr-alert-banner {
  background-color: #FAF2D8;
  border: 1.5px dashed #DDC58C;
  border-radius: var(--sr-radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
}

.sr-alert-banner-icon {
  font-size: 22px;
  line-height: 1;
}

.sr-alert-banner-content {
  flex: 1;
}

.sr-alert-banner-title {
  font-family: var(--sr-font-display);
  font-weight: 800;
  font-size: 14.5px;
  color: #2B2620;
  margin-bottom: 4px;
}

.sr-alert-banner-desc {
  font-size: 13px;
  line-height: 1.5;
  color: #5C564B;
  margin-bottom: 12px;
}

.sr-alert-banner-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sr-alert-btn-primary {
  background-color: #2B2620;
  color: #FFFFFF;
  border: none;
  border-radius: var(--sr-radius-sm);
  padding: 7px 16px;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.sr-alert-btn-primary:hover {
  opacity: 0.9;
}

.sr-alert-btn-secondary {
  background: none;
  border: none;
  color: #5C564B;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: underline;
}

/* Filter Bar */
.sr-top-filters-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.sr-filter-dropdown-btn {
  background: var(--sr-surface);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-md);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sr-text);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.sr-filter-dropdown-btn:hover {
  background: var(--sr-bg-subtle);
}

.sr-stepper-control {
  display: flex;
  align-items: center;
  background: var(--sr-surface);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-md);
  padding: 3px 8px;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
}

.sr-stepper-btn {
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 800;
  color: var(--sr-text-muted);
  cursor: pointer;
  padding: 2px 6px;
}

.sr-stepper-btn:hover {
  color: var(--sr-text);
}

/* 2-Column Ringkasan Layout */
.sr-ringkasan-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  align-items: start;
}

/* Left Column */
.sr-ringkasan-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sr-wallet-card-interactive {
  background: var(--sr-surface);
  border: 1.5px solid var(--sr-border);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.sr-wallet-card-interactive:hover {
  transform: translateY(-1px);
  border-color: #D6CEBF;
  box-shadow: 0 4px 12px rgba(43, 38, 32, 0.05);
}

.sr-wallet-card-interactive.active {
  border: 2px solid #C09827 !important;
  background-color: #FFFEFA;
  box-shadow: 0 4px 16px rgba(192, 152, 39, 0.12);
}

.sr-wallet-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sr-wallet-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.sr-wallet-card-name {
  font-family: var(--sr-font-display);
  font-weight: 800;
  font-size: 14.5px;
  color: var(--sr-text);
}

.sr-wallet-card-balance {
  font-family: var(--sr-font-display);
  font-weight: 800;
  font-size: 14.5px;
  color: var(--sr-text);
}

/* Saldo Aktif Summary Box */
.sr-saldo-aktif-card {
  background: var(--sr-surface);
  border: 1.5px solid var(--sr-border);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sr-saldo-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.sr-saldo-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--sr-text-muted);
}

.sr-saldo-val {
  font-family: var(--sr-font-display);
  font-weight: 800;
  font-size: 14.5px;
  color: var(--sr-text);
}

.sr-saldo-subtext {
  font-size: 11.5px;
  color: var(--sr-text-faint);
  margin-top: 2px;
}

.sr-saldo-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--sr-text-muted);
  text-decoration: none;
  cursor: pointer;
  align-self: flex-start;
  margin-top: 4px;
}

.sr-saldo-link:hover {
  text-decoration: underline;
  color: var(--sr-text);
}

/* Laporan Keuangan Nav Card */
.sr-laporan-nav-card {
  background: var(--sr-surface);
  border: 1.5px solid var(--sr-border);
  border-radius: 18px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  width: 100%;
}

.sr-laporan-nav-card:hover {
  border-color: #6F7FAD;
  background: #F8FAFD;
  transform: translateY(-1px);
}

.sr-laporan-nav-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #6F7FAD;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #FFFFFF;
  flex-shrink: 0;
}

.sr-laporan-nav-title {
  font-family: var(--sr-font-display);
  font-weight: 800;
  font-size: 14.5px;
  color: var(--sr-text);
  flex: 1;
}

.sr-laporan-nav-arrow {
  font-size: 18px;
  font-weight: 700;
  color: var(--sr-text-muted);
}

/* Alat Bantu Section */
.sr-alat-bantu-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.sr-alat-bantu-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--sr-text-muted);
}

.sr-alat-bantu-card {
  background: var(--sr-surface);
  border: 1.5px solid var(--sr-border);
  border-radius: 16px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s;
  align-self: flex-start;
}

.sr-alat-bantu-card:hover {
  border-color: #8B7BB5;
  background: #FAF8FD;
}

.sr-alat-bantu-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #8B7BB5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #FFFFFF;
}

.sr-alat-bantu-text {
  font-family: var(--sr-font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--sr-text);
}

/* Right Column: Selected Wallet Detail */
.sr-wallet-detail-card {
  background: var(--sr-surface);
  border: 1.5px solid var(--sr-border);
  border-radius: 24px;
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sr-shadow-sm);
}

.sr-wallet-detail-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 8px;
}

.sr-wallet-detail-title {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--sr-text-muted);
  text-transform: uppercase;
}

.sr-wallet-detail-badge {
  background: #E8F8F0;
  color: #10B981;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--sr-radius-full);
}

.sr-wallet-detail-amount {
  font-family: var(--sr-font-display);
  font-weight: 800;
  font-size: 38px;
  color: var(--sr-text);
  margin-bottom: 16px;
}

/* Trendline Box */
.sr-wallet-trendline {
  width: 100%;
  height: 120px;
  margin-bottom: 24px;
}

/* ==========================================================================
   Kalender Belanja & Heatmap Styles (Matching PundiKita Screenshot 1 & 2)
   ========================================================================== */
.sr-kalender-card {
  background: var(--sr-surface);
  border: 1.5px solid var(--sr-border);
  border-radius: 24px;
  padding: 24px 28px;
  margin-bottom: 20px;
  box-shadow: var(--sr-shadow-sm);
}

.sr-kalender-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.sr-kalender-title {
  font-family: var(--sr-font-display);
  font-size: 17.5px;
  font-weight: 800;
  color: var(--sr-text);
  margin-bottom: 4px;
}

.sr-kalender-subtitle {
  font-size: 12px;
  color: var(--sr-text-muted);
}

.sr-kalender-toggle-group {
  display: inline-flex;
  align-items: center;
  background: #EFECE5;
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}

.sr-kalender-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  color: #4A4337;
  transition: all 0.15s ease;
}

.sr-kalender-toggle-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.04);
}

.sr-kalender-toggle-btn.active {
  background: #1E5936 !important;
  color: #FFFFFF !important;
  font-weight: 700;
}

.sr-kalender-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

.sr-kalender-stat-card {
  background: #FAF7F2;
  border-radius: 14px;
  padding: 14px 18px;
  border: none;
}

.sr-kalender-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: #6B6458;
  margin-bottom: 4px;
}

.sr-kalender-stat-value {
  font-family: var(--sr-font-display);
  font-size: 18px;
  font-weight: 800;
  color: #1F1D1A;
}

.sr-kalender-stat-value.paling-boros {
  color: #963E32;
}

.sr-kalender-stat-value.income-max {
  color: #245D3B;
}

.sr-kalender-stat-sub {
  font-size: 11.5px;
  color: #8C8578;
  margin-top: 3px;
}

.sr-kalender-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  text-align: center;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sr-text-muted);
}

.sr-kalender-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.sr-kalender-cell {
  position: relative;
  min-height: 56px;
  border-radius: 12px;
  padding: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.15s ease;
  user-select: none;
}

.sr-kalender-cell:hover:not(.empty):not(.future) {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(43, 38, 32, 0.08);
}

.sr-kalender-cell.empty {
  background: transparent;
  cursor: default;
  border: none;
}

/* Heatmap Level Colors (Expense / Pengeluaran - Exact PundiKita Palette) */
.sr-kalender-cell.level-0 {
  background: #EDE8DF;
  border: none;
  color: var(--sr-text);
}

.sr-kalender-cell.level-1 {
  background: #F5EFEB;
  border: 1px solid #EAE1DA;
  color: var(--sr-text);
}

.sr-kalender-cell.level-2 {
  background: #DDA092;
  border: 1px solid #D09385;
  color: var(--sr-text);
}

.sr-kalender-cell.level-3 {
  background: #B25844;
  border: 1px solid #9E4D3C;
  color: #FFFFFF;
}

.sr-kalender-cell.level-4 {
  background: #A04A37;
  border: 1px solid #8B3E2D;
  color: #FFFFFF;
}

.sr-kalender-cell.level-5 {
  background: #8E3E32;
  border: 1px solid #783126;
  color: #FFFFFF;
}

/* Heatmap Level Colors (Income / Pemasukan - Exact PundiKita Palette) */
.sr-kalender-cell.income-level-0 {
  background: #EDE8DF;
  border: none;
  color: var(--sr-text);
}

.sr-kalender-cell.income-level-1 {
  background: #EBF5EC;
  border: 1px solid #DBEADB;
  color: var(--sr-text);
}

.sr-kalender-cell.income-level-2 {
  background: #D5E8D6;
  border: 1px solid #C4DEC5;
  color: var(--sr-text);
}

.sr-kalender-cell.income-level-3 {
  background: #A3CFA5;
  border: 1px solid #8CBF95;
  color: var(--sr-text);
}

.sr-kalender-cell.income-level-4 {
  background: #6FA87A;
  border: 1px solid #5D9668;
  color: #FFFFFF;
}

.sr-kalender-cell.income-level-5 {
  background: #3E7D48;
  border: 1px solid #336B3C;
  color: #FFFFFF;
}

.sr-kalender-cell.today {
  outline: 2px solid #2B2620 !important;
  outline-offset: -1px;
  z-index: 2;
}

/* Date Detail Modal Popup (Matching Reference Screenshot media_1792548522278.png) */
#modal-ringkasan-date {
  background: rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 999;
}

.sr-date-modal {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 26px 30px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
  position: relative;
  animation: srModalPop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes srModalPop {
  0% { transform: scale(0.96); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.sr-date-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.sr-date-modal-title {
  font-family: var(--sr-font-display);
  font-size: 20px;
  font-weight: 800;
  color: #1F1D1A;
  margin: 0;
}

.sr-date-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F2EFE9;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #5A544A;
  font-weight: 600;
  transition: all 0.15s ease;
}

.sr-date-modal-close:hover {
  background: #E8E2D5;
  color: #1F1D1A;
}

.sr-date-modal-subrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  font-weight: 600;
  color: #706859;
  margin-bottom: 16px;
}

.sr-date-modal-total {
  font-family: var(--sr-font-display);
  font-size: 17.5px;
  font-weight: 800;
  color: #963E32;
}

.sr-date-modal-total.income {
  color: #245D3B;
}

.sr-date-modal-tx-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #F5F1E8;
}

.sr-date-modal-tx-item:last-child {
  border-bottom: none;
}

.sr-date-modal-footer {
  text-align: center;
  margin-top: 24px;
  padding-top: 4px;
}

.sr-date-modal-link {
  background: none;
  border: none;
  font-size: 13.5px;
  font-weight: 700;
  color: #8C6E15;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
}

.sr-date-modal-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.sr-kalender-cell.future {
  background: #FFFFFF;
  border: 1.5px dashed #D5CEBF;
  color: #8C8578;
  cursor: default;
}

.sr-kalender-day-num {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.sr-kalender-day-amount {
  font-size: 11px;
  font-weight: 800;
  text-align: right;
  line-height: 1;
}

.sr-kalender-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 14px;
  font-size: 11px;
  color: #8C8578;
}

.sr-kalender-legend-box {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
  margin: 0 1px;
}

/* Arus Kas 6 Bulan Chart Card */
.sr-arus-kas-chart-card {
  margin-top: 20px;
  margin-bottom: 24px;
}

.sr-arus-kas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.sr-arus-kas-title {
  font-family: var(--sr-font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--sr-text);
}

.sr-arus-kas-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--sr-text-muted);
}

.sr-arus-kas-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sr-dot-income-green {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #1E3E2B;
}

.sr-dot-expense-blue {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #5575BB;
}

.sr-wallet-tx-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--sr-border-light);
  margin-bottom: 14px;
}

.sr-wallet-tx-title {
  font-family: var(--sr-font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--sr-text);
}

.sr-wallet-tx-link {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sr-text-muted);
  cursor: pointer;
  text-decoration: none;
}

.sr-wallet-tx-link:hover {
  color: var(--sr-text);
  text-decoration: underline;
}

/* Transaction List Items */
.sr-tx-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--sr-border-light);
}

.sr-tx-item-row:last-child {
  border-bottom: none;
}

.sr-tx-item-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sr-tx-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
}

.sr-tx-icon-expense {
  background: #F3EFE6;
  color: #2B2620;
}

.sr-tx-icon-income {
  background: #E8F8F0;
  color: #10B981;
}

.sr-tx-item-desc {
  font-family: var(--sr-font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--sr-text);
}

.sr-tx-item-meta {
  font-size: 12px;
  color: var(--sr-text-muted);
  margin-top: 2px;
}

.sr-tx-item-amount {
  font-family: var(--sr-font-display);
  font-weight: 800;
  font-size: 14px;
}

.sr-tx-amount-expense {
  color: var(--sr-text);
}

.sr-tx-amount-income {
  color: #10B981;
}

/* ==========================================================================
   Laporan Keuangan Layout (Matching Screenshot 2)
   ========================================================================== */
.sr-laporan-top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.sr-laporan-tabs-group {
  display: flex;
  gap: 6px;
  background: #F0EBE1;
  padding: 4px;
  border-radius: var(--sr-radius-full);
}

.sr-laporan-tab-btn {
  background: transparent;
  border: none;
  border-radius: var(--sr-radius-full);
  padding: 6px 18px;
  font-family: var(--sr-font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--sr-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.sr-laporan-tab-btn.active {
  background: var(--sr-primary-green);
  color: #FFFFFF;
}

.sr-laporan-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sr-laporan-action-btn {
  background: var(--sr-surface);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-md);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sr-text);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.sr-laporan-action-btn:hover {
  background: var(--sr-bg-subtle);
}

/* Laporan Wallet Section */
.sr-laporan-wallet-section {
  margin-bottom: 20px;
}

.sr-laporan-wallet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.sr-laporan-wallet-title {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--sr-text-muted);
  text-transform: uppercase;
}

.sr-laporan-wallet-links {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 700;
}

.sr-laporan-wallet-link {
  color: #706859;
  text-decoration: none;
  cursor: pointer;
}

.sr-laporan-wallet-link:hover {
  text-decoration: underline;
}

.sr-laporan-wallet-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sr-laporan-wallet-pill {
  background: var(--sr-surface);
  border: 1.5px solid var(--sr-border);
  border-radius: var(--sr-radius-full);
  padding: 8px 18px;
  font-family: var(--sr-font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--sr-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}

.sr-laporan-wallet-pill:hover {
  border-color: #C4BCAD;
}

.sr-laporan-wallet-pill.active {
  background: #2B2620;
  color: #FFFFFF;
  border-color: #2B2620;
}

/* Laporan Bento Cards Grid */
.sr-laporan-bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.sr-bento-card {
  background: var(--sr-surface);
  border: 1.5px solid var(--sr-border);
  border-radius: 20px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 120px;
}

.sr-bento-card-title {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--sr-text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.sr-bento-card-amount {
  font-family: var(--sr-font-display);
  font-weight: 800;
  font-size: 26px;
  color: var(--sr-text);
  margin-bottom: 4px;
}

.sr-bento-card-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--sr-text-muted);
}

.sr-bento-card-sparkline {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 60px;
  height: 32px;
}

/* Laporan Cashflow 6-Month Chart */
.sr-laporan-chart-card {
  background: var(--sr-surface);
  border: 1.5px solid var(--sr-border);
  border-radius: 24px;
  padding: 24px 28px;
  margin-bottom: 24px;
}

.sr-laporan-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.sr-laporan-chart-title {
  font-family: var(--sr-font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--sr-text);
}

.sr-laporan-chart-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sr-text-muted);
}

.sr-laporan-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sr-dot-income {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #1F4529;
}

.sr-dot-expense {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #5575BB;
}

.sr-chart-svg-container {
  width: 100%;
  height: 240px;
}

/* ==========================================================================
   Kekayaan & Komposisi View Styles (Matching Screenshot 2)
   ========================================================================== */
.sr-kekayaan-main-card {
  background: var(--sr-surface);
  border: 1.5px solid var(--sr-border);
  border-radius: 24px;
  padding: 24px 28px;
  margin-bottom: 20px;
}

.sr-kekayaan-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}

.sr-kekayaan-card-label {
  font-family: var(--sr-font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--sr-text);
}

.sr-kekayaan-card-badge {
  color: #10B981;
  font-size: 12.5px;
  font-weight: 700;
}

.sr-kekayaan-card-amount {
  font-family: var(--sr-font-display);
  font-weight: 800;
  font-size: 38px;
  color: var(--sr-text);
  margin-bottom: 12px;
}

.sr-kekayaan-trendline-box {
  width: 100%;
  margin-top: 8px;
}

.sr-kekayaan-days-row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sr-text-muted);
  padding: 6px 4px 0;
  border-top: 1px solid var(--sr-border-light);
}

/* Komposisi Kekayaan Card */
.sr-komposisi-card {
  background: var(--sr-surface);
  border: 1.5px solid var(--sr-border);
  border-radius: 24px;
  padding: 24px 28px;
  margin-bottom: 24px;
}

.sr-komposisi-title {
  font-family: var(--sr-font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--sr-text);
  margin-bottom: 14px;
}

.sr-komposisi-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--sr-border-light);
  font-size: 14px;
}

.sr-komposisi-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sr-komposisi-item-name {
  color: var(--sr-text);
  font-weight: 600;
}

.sr-komposisi-item-val {
  font-family: var(--sr-font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--sr-text);
}

/* Rincian Pengeluaran Card */
.sr-rincian-card {
  background: var(--sr-surface);
  border: 1.5px solid var(--sr-border);
  border-radius: 24px;
  padding: 24px 28px;
  margin-bottom: 24px;
}

.sr-rincian-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.sr-rincian-title {
  font-family: var(--sr-font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--sr-text);
}

.sr-rincian-table {
  width: 100%;
  border-collapse: collapse;
}

.sr-rincian-table th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--sr-text-muted);
  text-transform: uppercase;
  padding: 8px 12px;
  border-bottom: 1.5px solid var(--sr-border);
}

.sr-rincian-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--sr-border-light);
  font-size: 13.5px;
}

.sr-rincian-table tr:last-child td {
  border-bottom: none;
}

/* Multi-select Mode Indicator & Buttons */
.sr-multiselect-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--sr-text-muted);
  margin-left: 8px;
}

.sr-multiselect-active-btn {
  background: #1F4529 !important;
  color: #FFFFFF !important;
  border-color: #1F4529 !important;
  padding: 4px 12px !important;
  border-radius: var(--sr-radius-md) !important;
}

.sr-wallet-pill-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid #A8A193;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #FFFFFF;
  margin-right: 4px;
}

.sr-wallet-pill-checkbox.checked {
  background: #10B981;
  border-color: #10B981;
}


/* ==========================================================================
   Dana Pendidikan Modal Styles
   ========================================================================== */
.sr-modal-lg {
  max-width: 680px !important;
  width: 92%;
}

.sr-edu-table-container {
  background: #F4EFE6;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 18px;
}

.sr-edu-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.sr-edu-row:last-child {
  margin-bottom: 0;
}

.sr-edu-input-name {
  flex: 2;
  background: #FFFFFF;
  border: 1px solid var(--sr-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--sr-font-body);
}

.sr-edu-input-nominal {
  flex: 1.5;
  background: #FFFFFF;
  border: 1px solid var(--sr-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--sr-font-body);
}

.sr-edu-input-kali {
  width: 60px;
  background: #FFFFFF;
  border: 1px solid var(--sr-border);
  border-radius: 8px;
  padding: 8px 6px;
  font-size: 13px;
  text-align: center;
  font-family: var(--sr-font-body);
}

.sr-edu-btn-del {
  background: none;
  border: none;
  color: #EF4444;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 4px;
}

.sr-edu-btn-add {
  background: none;
  border: 1.5px dashed #C4BCAD;
  border-radius: 10px;
  width: 100%;
  padding: 8px;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--sr-text);
  cursor: pointer;
  margin-top: 10px;
  transition: all 0.15s;
}

.sr-edu-btn-add:hover {
  background: #FFFFFF;
  border-color: #2B2620;
}

.sr-edu-projections-card {
  background: #FFFBF0;
  border: 1.5px solid #E4D5B7;
  border-radius: 16px;
  padding: 16px 20px;
  margin-top: 16px;
}

.sr-edu-calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}

.sr-edu-calc-row:last-child {
  margin-bottom: 0;
  padding-top: 8px;
  border-top: 1px dashed #E4D5B7;
}

.sr-edu-calc-val-big {
  font-family: var(--sr-font-display);
  font-weight: 800;
  font-size: 18px;
  color: #C09827;
}

/* ==========================================================================
   Anggaran & Kategori View (1:1 PundiKita.app Match)
   ========================================================================== */
.sr-anggaran-layout {
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 22px;
  align-items: start;
}

.sr-anggaran-left {
  display: flex;
  flex-direction: column;
}

.sr-anggaran-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.sr-anggaran-subrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.sr-segmented-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sr-seg-btn {
  padding: 6px 16px;
  border-radius: 100px;
  font-family: var(--sr-font-display);
  font-size: 13.5px;
  font-weight: 700;
  border: none;
  background: transparent;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sr-seg-btn.active {
  background-color: #1E3A2B;
  color: #FFFFFF;
}

.sr-btn-atur-anggaran {
  background-color: #202623;
  color: #FFFFFF;
  font-family: var(--sr-font-display);
  font-size: 13px;
  font-weight: 700;
  border-radius: 12px;
  padding: 9px 18px;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.sr-btn-atur-anggaran:hover {
  background-color: #313A35;
}

.sr-anggaran-total-card {
  background: #FFFFFF;
  border: 1px solid #EAE6DE;
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.sr-anggaran-total-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8C867A;
}

.sr-anggaran-total-val {
  font-family: var(--sr-font-display);
  font-size: 26px;
  font-weight: 800;
  color: #24221E;
  margin-top: 4px;
}

.sr-anggaran-banner {
  background: #FCF8ED;
  border: 1px solid #F1E5C7;
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 14px;
}

.sr-anggaran-banner-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.sr-anggaran-banner-text {
  font-size: 13px;
  color: #63562C;
  font-weight: 600;
  line-height: 1.45;
}

.sr-anggaran-banner-close {
  background: #FFFFFF;
  border: 1px solid #D5CEBE;
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: #63562C;
  cursor: pointer;
  white-space: nowrap;
}

.sr-anggaran-banner-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sr-banner-chip {
  background: #FFFFFF;
  border: 1px solid #E8E2D2;
  border-radius: 100px;
  padding: 5px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #2B2620;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sr-banner-chip:hover {
  border-color: #C9A227;
  color: #C9A227;
}

.sr-anggaran-grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.sr-cat-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 16px 16px 14px;
  cursor: pointer;
  border: 1px solid #E8E5DF;
  transition: all 0.15s ease;
  position: relative;
}

.sr-cat-card:hover {
  border-color: #CFC9BC;
  transform: translateY(-1px);
}

.sr-cat-card.selected {
  border: 2px solid #D8A638 !important;
  box-shadow: 0 2px 8px rgba(216, 166, 56, 0.12);
}

.sr-cat-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.sr-cat-solid-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 16px;
  flex-shrink: 0;
}

.sr-cat-card-name {
  font-weight: 700;
  font-size: 14px;
  color: #2B2620;
}

.sr-cat-card-amount {
  font-family: var(--sr-font-display);
  font-size: 17.5px;
  font-weight: 800;
  color: #2B2620;
  margin-bottom: 3px;
}

.sr-cat-card-status {
  font-size: 12.5px;
  color: #8C867A;
  font-weight: 500;
}

.sr-anggaran-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.sr-anggaran-action-pill {
  background: #FAF8F3;
  border: 1.5px solid #E5DECD;
  border-radius: 100px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #2B2620;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sr-anggaran-action-pill:hover {
  border-color: #2B2620;
}

.sr-anggaran-multi-cat-btn {
  background: #EBF3EF;
  border: 1.5px dashed #A9CEBA;
  border-radius: 14px;
  padding: 13px 20px;
  font-size: 13.5px;
  font-weight: 700;
  color: #244131;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s ease;
}

.sr-anggaran-multi-cat-btn:hover {
  background: #E1EFE7;
}

.sr-anggaran-sidebar-card {
  background: #FFFFFF;
  border: 1px solid #E8E5DF;
  border-radius: 18px;
  padding: 22px 20px;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.sr-anggaran-sidebar-card::-webkit-scrollbar {
  width: 6px;
}

.sr-anggaran-sidebar-card::-webkit-scrollbar-thumb {
  background-color: #D6D0C4;
  border-radius: 4px;
}

.sr-cat-detail-pill {
  background: #FFFFFF;
  border: 1px solid #E6E1D6;
  border-radius: 100px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #4A3E2C;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
}

.sr-cat-detail-pill:hover {
  background: #FAF8F4;
  border-color: #D8D2C5;
  transform: translateY(-0.5px);
}

.sr-cat-stepper-box {
  background: #FAF8F2;
  border: 1px solid #EFEAE0;
  border-radius: 14px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.sr-cat-stepper-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #EDE9E0;
  border: none;
  font-size: 15px;
  font-weight: 800;
  color: #4A3E2C;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.sr-cat-stepper-btn:hover {
  background: #E2DDD2;
}

.sr-cat-card-container {
  background: #FAF7F0;
  border: 1px solid #ECE7DB;
  border-radius: 20px;
  padding: 22px 18px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.sr-cat-tx-card {
  background: #FFFFFF;
  border: 1px solid #ECE7DB;
  border-radius: 14px;
  padding: 13px 16px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-color 0.15s ease;
}

.sr-cat-tx-card:hover {
  border-color: #D8D2C5;
}

.sr-cat-danger-btn {
  width: 100%;
  margin-top: 10px;
  background: #FDF1F0;
  border: 1px solid #F3C7C2;
  border-radius: 14px;
  padding: 12px 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: #A63B30;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s ease;
}

.sr-cat-danger-btn:hover {
  background: #FAE3E1;
}

/* Dropdowns for Anggaran Filters */
.sr-dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.sr-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #FFFFFF;
  border: 1px solid #E8E5DF;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 190px;
  padding: 6px;
  z-index: 100;
  display: none;
}

.sr-dropdown-menu.show {
  display: block;
}

.sr-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #2B2620;
  cursor: pointer;
  transition: background 0.12s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

.sr-dropdown-item:hover {
  background: #FAF7F0;
}

.sr-dropdown-item.active {
  background: #EBF3EF;
  color: #245D3B;
  font-weight: 700;
}

/* Accordion for Tren 6 Bulan */
.sr-accordion-content {
  display: none;
  padding: 12px 0 4px;
  border-top: 1px solid #ECE7DB;
  margin-top: 10px;
}

.sr-accordion-content.show {
  display: block;
}

/* ========================================================
   TRANSAKSI VIEW STYLING (Presisi 100% Sesuai Screenshot)
   ======================================================== */

.sr-tx-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1080px) {
  .sr-tx-layout {
    grid-template-columns: 1fr;
  }
}

.sr-tx-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.sr-tx-mode-group {
  display: inline-flex;
  background: #FAF8F4;
  border: 1.5px solid #E6E1D6;
  border-radius: 100px;
  padding: 3px;
  gap: 3px;
}

.sr-tx-mode-btn {
  border: none;
  background: none;
  padding: 6px 18px;
  border-radius: 100px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #3A352D;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sr-tx-mode-btn.active {
  background: #245D3B;
  color: #FFFFFF;
}

.sr-tx-wallet-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FAF8F4;
  border: 1.5px solid #E6E1D6;
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #2B2620;
  cursor: pointer;
  transition: background 0.15s;
}

.sr-tx-wallet-btn:hover {
  background: #F2EFE9;
}

.sr-tx-search-input {
  background: #FAF8F4;
  border: 1.5px solid #E6E1D6;
  border-radius: 100px;
  padding: 8px 18px;
  font-size: 13px;
  color: #2B2620;
  outline: none;
  min-width: 200px;
  font-family: inherit;
  transition: border-color 0.15s;
}

.sr-tx-search-input:focus {
  border-color: #245D3B;
  background: #FFFFFF;
}

.sr-tx-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FAF8F4;
  border: 1.5px solid #E6E1D6;
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #2B2620;
  cursor: pointer;
  transition: all 0.15s;
}

.sr-tx-action-btn:hover {
  background: #F2EFE9;
}

.sr-tx-action-btn.active {
  background: #245D3B;
  color: #FFFFFF;
  border-color: #245D3B;
}

/* Transaksi Left Column Container */
.sr-tx-card-container {
  background: #FFFFFF;
  border: 1.5px solid #E8E5DF;
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: var(--sr-shadow-sm);
}

.sr-tx-table-header {
  display: grid;
  grid-template-columns: 65px 1fr 140px 100px 140px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #8C867A;
  text-transform: uppercase;
  padding-bottom: 12px;
  border-bottom: 1.5px solid #EAE6DE;
}

.sr-tx-date-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0 8px;
  border-bottom: 1px solid #F0ECE4;
  font-family: var(--sr-font-display);
  font-weight: 800;
  font-size: 14.5px;
  color: #2B2620;
}

.sr-tx-row {
  display: grid;
  grid-template-columns: 65px 1fr 140px 100px 140px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid #F4F0E8;
  transition: background 0.1s ease;
}

.sr-tx-row:hover {
  background: #FAF8F4;
}

.sr-tx-category-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  background: #F4EFEB;
  color: #3A352D;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

/* Right Bento Cards */
.sr-tx-bento-card {
  background: #FFFFFF;
  border: 1.5px solid #E8E5DF;
  border-radius: 22px;
  padding: 24px;
  margin-bottom: 18px;
  box-shadow: var(--sr-shadow-sm);
}

.sr-tx-bento-title {
  font-family: var(--sr-font-display);
  font-size: 18px;
  font-weight: 800;
  color: #2B2620;
}

.sr-tx-cat-bar-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.sr-tx-cat-bar-track {
  flex: 1;
  height: 8px;
  border-radius: 100px;
  background: #EAE6DE;
  overflow: hidden;
}

.sr-tx-cat-bar-fill {
  height: 100%;
  border-radius: 100px;
  background: #C8C2B5;
}

.sr-tx-cat-bar-fill.active {
  background: #245D3B;
}

/* Popovers */
.sr-tx-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #FFFFFF;
  border: 1.5px solid #E6E1D6;
  border-radius: 18px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
  padding: 20px;
  z-index: 200;
  min-width: 380px;
  max-width: 440px;
}

.sr-tx-popover-chip {
  background: #FAF8F4;
  border: 1px solid #E6E1D6;
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #2B2620;
  cursor: pointer;
  transition: all 0.15s;
}

.sr-tx-popover-chip.active {
  background: #245D3B;
  color: #FFFFFF;
  border-color: #245D3B;
}

/* Mutasi View Styles */
.sr-tx-mutasi-box {
  background: #FFFFFF;
  border: 1.5px solid #E8E5DF;
  border-radius: 20px;
  padding: 22px 24px;
  margin-top: 14px;
  box-shadow: var(--sr-shadow-sm);
}

.sr-tx-mutasi-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid #F0ECE4;
}

.sr-tx-avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #A64B5B;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}

/* Responsive */

@media (max-width: 1024px) {
  .sr-ringkasan-grid {
    grid-template-columns: 1fr;
  }
  .sr-laporan-bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sr-dashboard-top-grid {
    grid-template-columns: 1fr;
  }
  .sr-dashboard-bottom-grid {
    grid-template-columns: 1fr;
  }
}

/* Note: Mobile and Tablet media queries are unified at the bottom of this stylesheet */

/* ========================================================
   UTANG PIUTANG VIEW & MODAL STYLING (Presisi Sesuai Screenshot)
   ======================================================== */

.sr-utang-layout {
  display: grid;
  grid-template-columns: 390px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

@media (max-width: 980px) {
  .sr-utang-layout {
    grid-template-columns: 1fr;
  }
}

.sr-utang-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sr-utang-summary-card {
  background: #FFFFFF;
  border: 1.5px solid #E8E5DF;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.sr-utang-summary-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #8C867A;
  text-transform: uppercase;
}

.sr-utang-summary-val {
  font-family: var(--sr-font-display);
  font-size: 22px;
  font-weight: 800;
  margin-top: 4px;
}

.sr-utang-add-btn {
  background: #C9A227;
  color: #FFFFFF;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  border-radius: 12px;
  padding: 12px;
  border: none;
  cursor: pointer;
  text-align: center;
  width: 100%;
  margin-top: 14px;
  transition: opacity 0.15s ease, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.sr-utang-add-btn:hover {
  opacity: 0.92;
  transform: translateY(-0.5px);
}

.sr-utang-tabs {
  background: #EFECE6;
  border-radius: 12px;
  padding: 4px;
  display: flex;
  gap: 4px;
  margin-top: 14px;
}

.sr-utang-tab-btn {
  background: none;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #6B6355;
  cursor: pointer;
  flex: 1;
  text-align: center;
  font-family: inherit;
  transition: all 0.12s ease;
}

.sr-utang-tab-btn.active {
  background: #245D3B;
  color: #FFFFFF;
  font-weight: 700;
}

.sr-utang-empty-box {
  text-align: center;
  padding: 44px 16px;
  color: #8C867A;
  font-size: 13.5px;
  line-height: 1.5;
}

.sr-utang-footer-links {
  display: flex;
  gap: 20px;
  font-size: 13px;
  font-weight: 700;
  color: #8C6E15;
  margin-top: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.sr-utang-footer-links a {
  color: #8C6E15;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sr-utang-footer-links a:hover {
  text-decoration: underline;
}

.sr-utang-detail-card {
  background: #FFFFFF;
  border: 1.5px solid #E8E5DF;
  border-radius: 20px;
  padding: 28px 24px;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.sr-utang-item-card {
  background: #FFFFFF;
  border: 1px solid #ECE7DB;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sr-utang-item-card:hover, .sr-utang-item-card.active {
  border-color: #245D3B;
  background: #FAFDF9;
}

/* Modal Utang Piutang Form Styling */
.sr-utang-segmented-group {
  display: flex;
  background: #FAF8F4;
  border: 1.5px solid #E6E1D6;
  border-radius: 12px;
  padding: 3px;
  gap: 3px;
  margin-bottom: 12px;
}

.sr-utang-segmented-btn {
  flex: 1;
  border: none;
  background: none;
  padding: 9px 12px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #4A443A;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

.sr-utang-segmented-btn.active-brown {
  background: #8D5B4C;
  color: #FFFFFF;
}

.sr-utang-segmented-btn.active-green {
  background: #245D3B;
  color: #FFFFFF;
}

.sr-utang-form-input {
  width: 100%;
  background: #FAF8F4;
  border: 1.5px solid #E6E1D6;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 13.5px;
  color: #2B2620;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.sr-utang-form-input:focus {
  border-color: #245D3B;
  background: #FFFFFF;
}

.sr-utang-photo-upload-box {
  border: 1.5px dashed #D6CFBE;
  background: #FAF8F2;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: #8C6E15;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sr-utang-photo-upload-box:hover {
  background: #F3EFE6;
}

/* ==========================================================================
   Anggaran & Kategori Refined Styles (Screenshots 1 - 5)
   ========================================================================== */
.sr-cat-detail-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.sr-cat-detail-modal {
  background: #FFFFFF;
  border-radius: 24px;
  width: 100%;
  max-width: 880px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  animation: srFadeUp 0.18s ease-out;
}

.sr-cat-modal-card {
  background: #FAF7F0;
  border: 1px solid #ECE7DB;
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 14px;
}

.sr-cat-modal-pill-btn {
  background: #FFFFFF;
  border: 1px solid #E6E1D6;
  border-radius: 100px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #4A3E2C;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  text-decoration: none;
}

.sr-cat-modal-pill-btn:hover {
  background: #FAF8F4;
  border-color: #C9A227;
}

.sr-cat-tx-item {
  background: #FFFFFF;
  border: 1px solid #ECE7DB;
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sr-atur-stat-card {
  background: #FFFFFF;
  border: 1px solid #E8E5DF;
  border-radius: 16px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sr-atur-stat-label {
  font-size: 13px;
  font-weight: 600;
  color: #6B6355;
}

.sr-atur-stat-value {
  font-family: var(--sr-font-display);
  font-size: 24px;
  font-weight: 800;
  color: #202623;
}

.sr-atur-stat-sub {
  font-size: 12px;
  color: #8C867A;
}

.sr-atur-anggaran-input {
  border: 1px solid #E8E5DF;
  border-radius: 12px;
  padding: 8px 16px;
  font-family: var(--sr-font-display);
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  width: 150px;
  background: #FFFFFF;
  color: #2B2620;
  outline: none;
  transition: all 0.15s ease;
}

.sr-atur-anggaran-input:focus {
  border-color: #245D3B;
  box-shadow: 0 0 0 3px rgba(36, 93, 59, 0.12);
}

/* ==========================================================================
   Goal & Tabungan Refined Styles (Screenshots 1 - 5)
   ========================================================================== */
.sr-goal-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 22px;
  align-items: start;
}

.sr-goal-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.sr-goal-card {
  background: #FFFFFF;
  border: 1px solid #E8E5DF;
  border-radius: 18px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}

.sr-goal-card:hover {
  border-color: #D6CFBE;
  transform: translateY(-1px);
}

.sr-goal-card.selected {
  border: 2px solid #C49A2C !important;
  background: #FFFDF9 !important;
  box-shadow: 0 2px 10px rgba(196, 154, 44, 0.12) !important;
}

.sr-goal-sidebar {
  background: #FFFFFF;
  border: 1px solid #E8E5DF;
  border-radius: 20px;
  padding: 24px;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.sr-goal-sidebar::-webkit-scrollbar {
  width: 6px;
}

.sr-goal-sidebar::-webkit-scrollbar-thumb {
  background-color: #D6D0C4;
  border-radius: 4px;
}

.sr-goal-nabung-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.sr-goal-nabung-modal {
  background: #FFFFFF;
  border-radius: 24px;
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: srFadeUp 0.18s ease-out;
}

.sr-goal-opt-card {
  background: #FFFFFF;
  border: 1px solid #E8E5DF;
  border-radius: 14px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sr-goal-opt-card:hover {
  border-color: #D6CFBE;
}

.sr-goal-opt-card.selected {
  border: 2px solid #C49A2C !important;
  background: #FFFDF9 !important;
}

/* ==========================================================================
   AUTHENTICATION & MULTI-ACCOUNT MANAGEMENT SYSTEM (OFFLINE-FIRST)
   ========================================================================== */

.sr-auth-screen {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background-color: var(--pk-ground);
  background-image: radial-gradient(var(--pk-border) 1px, transparent 1px);
  background-size: 20px 20px;
  box-sizing: border-box;
}

.sr-auth-card {
  width: 100%;
  max-width: 480px;
  background: #FFFFFF;
  border: 1px solid var(--pk-border);
  border-radius: 20px;
  box-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
  padding: 36px 32px;
  box-sizing: border-box;
  animation: authCardFadeIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes authCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.sr-auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 24px;
  gap: 10px;
}

.sr-auth-logo {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: contain;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.sr-auth-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--pk-ink);
  margin: 0;
  letter-spacing: -0.02em;
}

.sr-auth-tagline {
  font-size: 13px;
  color: var(--pk-ink-muted);
  margin: 3px 0 0;
  font-weight: 500;
}

.sr-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--pk-ground);
  border: 1px solid var(--pk-border);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 20px;
}

.sr-auth-tab {
  border: none;
  background: transparent;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pk-ink-muted);
  padding: 9px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.sr-auth-tab.active {
  background: #FFFFFF;
  color: var(--pk-cobalt-ink);
  font-weight: 800;
  border: 1px solid var(--pk-cobalt-line);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
}

.sr-auth-demo-banner {
  background: var(--pk-cobalt-soft);
  border: 1px solid var(--pk-cobalt-line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sr-auth-demo-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.sr-auth-demo-badge {
  background: var(--pk-cobalt);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  margin-top: 1px;
}

.sr-auth-demo-desc strong {
  font-size: 13px;
  color: var(--pk-ink);
  display: block;
  font-weight: 700;
}

.sr-auth-demo-desc p {
  font-size: 11.5px;
  color: var(--pk-cobalt-ink);
  margin: 2px 0 0;
  line-height: 1.35;
}

.sr-btn-demo-quick {
  background: var(--pk-cobalt);
  color: #FFFFFF;
  border: none;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.sr-btn-demo-quick:hover {
  background: var(--pk-cobalt-hover);
  box-shadow: 0 3px 10px rgba(29, 95, 214, 0.25);
}

.sr-auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 16px 0;
  color: var(--pk-ink-faint);
  font-size: 11.5px;
  font-weight: 600;
}

.sr-auth-divider::before,
.sr-auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--pk-border);
}

.sr-auth-divider span {
  padding: 0 12px;
}

.sr-password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sr-password-wrapper .sr-form-input {
  padding-right: 42px;
}

.sr-btn-toggle-eye {
  position: absolute;
  right: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  color: var(--pk-ink-faint);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.sr-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sr-auth-row-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  margin: 10px 0 16px;
}

.sr-auth-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--pk-ink-muted);
  font-weight: 600;
  user-select: none;
}

.sr-auth-forgot {
  color: var(--pk-cobalt);
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
}

.sr-auth-forgot:hover {
  text-decoration: underline;
}

.sr-btn-auth {
  width: 100%;
  min-height: 44px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  margin-top: 6px;
  background: var(--pk-cobalt);
  color: #FFFFFF;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
}

.sr-btn-auth:hover {
  background: #1F4A2B;
  box-shadow: 0 4px 14px rgba(21, 50, 30, 0.2);
}

.sr-btn-auth:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.sr-auth-switch-text {
  text-align: center;
  margin: 16px 0 0;
  font-size: 12.5px;
  color: #6B6150;
  font-weight: 600;
}

.sr-auth-switch-text a {
  color: #15321E;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

.sr-auth-terms-note {
  background: #FAF8F4;
  border: 1px dashed #DDD7C9;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 11px;
  color: #6B6150;
  line-height: 1.45;
  margin: 12px 0 16px;
}

.sr-auth-alert {
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 16px;
  animation: authAlertSlideDown 0.2s ease;
}

@keyframes authAlertSlideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sr-auth-alert-error {
  background: #FDF2F0;
  border: 1px solid #F5C6CB;
  color: #A53630;
}

.sr-auth-alert-success {
  background: #EDF7F0;
  border: 1px solid #C3E6CB;
  color: #155724;
}

.sr-auth-alert-info {
  background: #F4EFE6;
  border: 1px solid #E8E1D1;
  color: #6B6150;
}

.sr-btn-sidebar-logout {
  background: transparent;
  border: none;
  color: #9A5A52;
  cursor: pointer;
  padding: 8px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.sr-btn-sidebar-logout svg {
  pointer-events: none;
}

.sr-btn-sidebar-logout:hover {
  background: #F3E6E3;
  color: #A53630;
}

@media (max-width: 600px) {
  .sr-auth-card {
    padding: 24px 20px;
    border-radius: 20px;
  }
  .sr-form-row-2 {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ==========================================================================
   MULTI-DEVICE RESPONSIVE SYSTEM (Mobile Android, Tablet, & Apple iOS)
   ========================================================================== */

/* 1. Global Safe Area & Touch Standards */
:root {
  --sr-safe-top: env(safe-area-inset-top, 0px);
  --sr-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sr-safe-left: env(safe-area-inset-left, 0px);
  --sr-safe-right: env(safe-area-inset-right, 0px);
}

body {
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding-left: var(--sr-safe-left);
  padding-right: var(--sr-safe-right);
}

/* Touch Targets Standard (WCAG AAA 44x44px minimum) */
.sr-btn-icon,
.sr-btn-sidebar-logout,
.sr-sidebar-close,
.sr-btn-hamburger {
  min-width: 44px;
  min-height: 44px;
}

.sr-btn-catat {
  min-height: 44px;
}

/* 2. Desktop Defaults for Mobile-Only Components */
.sr-btn-hamburger {
  display: none !important;
  background: transparent;
  border: 1px solid var(--pk-border);
  border-radius: 10px;
  padding: 8px;
  color: var(--pk-ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-quick) var(--ease-smooth-out);
}

.sr-sidebar-close {
  display: none !important;
  background: transparent;
  border: none;
  font-size: 20px;
  font-weight: 700;
  color: var(--pk-ink-muted);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  line-height: 1;
}

.sr-sidebar-backdrop {
  display: none !important;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1040;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-smooth-out);
}

.sr-mobile-bottom-nav {
  display: none !important;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #FFFFFF;
  border-top: 1px solid var(--pk-border);
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.05);
  z-index: 950;
  align-items: center;
  justify-content: space-around;
}

.sr-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--pk-ink-muted);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  min-width: 54px;
  min-height: 48px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
  user-select: none;
}

.sr-bottom-nav-item.active {
  color: var(--pk-cobalt);
  font-weight: 700;
}

.sr-bottom-nav-item svg {
  pointer-events: none;
}

.sr-bottom-nav-fab {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--pk-cobalt);
  color: #FFFFFF;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(29, 95, 214, 0.35);
  cursor: pointer;
  margin-top: -16px;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.sr-bottom-nav-fab:active {
  transform: scale(0.92);
}

/* 3. Responsive Subviews (Lainnya & Pengaturan) */
.sr-lainnya-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.sr-pengaturan-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* 4. Tablet Breakpoints (769px - 1024px) */
@media (max-width: 1024px) {
  .sr-dashboard-top-grid {
    grid-template-columns: 1fr;
  }
  .sr-ringkasan-grid {
    grid-template-columns: 1fr;
  }
  .sr-tx-layout {
    grid-template-columns: 1fr;
  }
  .sr-utang-layout {
    grid-template-columns: 1fr;
  }
  .sr-lainnya-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .sr-laporan-bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 5. Mobile Breakpoints (<= 768px: Android Phone, iPhone) */
@media (max-width: 768px) {
  /* Prevent iOS Safari Viewport Auto-Zoom on form input focus */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* App container adjustments */
  .sr-app-container {
    display: block;
    width: 100%;
    min-height: 100dvh;
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }

  /* Hamburger & Close Buttons */
  .sr-btn-hamburger {
    display: flex !important;
  }
  .sr-sidebar-close {
    display: flex !important;
  }
  .sr-sidebar-backdrop {
    display: block !important;
  }
  .sr-sidebar-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Off-canvas Mobile Drawer */
  .sr-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 285px !important;
    max-width: 85vw !important;
    height: 100dvh !important;
    background: #FFFFFF !important;
    z-index: 1050 !important;
    transform: translateX(-100%) !important;
    transition: transform var(--duration-fast) cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 8px 0 32px rgba(15, 23, 42, 0.2) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: max(18px, env(safe-area-inset-top, 0px)) 16px max(24px, env(safe-area-inset-bottom, 0px)) !important;
    border-right: 1px solid var(--pk-border) !important;
  }

  .sr-sidebar.open {
    transform: translateX(0) !important;
  }

  /* Main content fills phone screen */
  .sr-main-content {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 14px 28px !important;
  }

  /* Mobile Header */
  .sr-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }

  .sr-header-greeting h1 {
    font-size: 19px !important;
  }

  .sr-header-greeting p {
    font-size: 12px !important;
  }

  .sr-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  /* Hide desktop search kbd and shrink search on phone */
  .sr-search-kbd {
    display: none !important;
  }

  .sr-search-bar {
    padding: 6px 8px !important;
  }

  .sr-search-bar input {
    width: 80px !important;
    font-size: 16px !important;
  }

  .sr-btn-catat kbd {
    display: none !important;
  }

  .sr-btn-catat {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  /* Show Bottom Nav Bar */
  .sr-mobile-bottom-nav {
    display: flex !important;
  }

  /* Net worth hero responsive */
  .sr-net-worth-amount {
    font-size: 28px !important;
  }

  .sr-net-worth-card {
    padding: 20px 18px !important;
  }

  .sr-net-worth-metrics {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Pengaturan & Profil Layout Stack */
  .sr-pengaturan-layout {
    grid-template-columns: 1fr !important;
  }

  .sr-lainnya-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 6. Native Bottom-Sheet Modals on Mobile (<= 600px) */
@media (max-width: 600px) {
  .sr-modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .sr-modal,
  .sr-modal-lg {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 85dvh !important;
    border-radius: 24px 24px 0 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateY(100%) !important;
    transition: transform var(--duration-fast) cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
  }

  .sr-modal-backdrop.open .sr-modal,
  .sr-modal-backdrop.open .sr-modal-lg {
    transform: translateY(0) !important;
  }

  .sr-modal > form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: calc(85dvh - 64px) !important;
    overflow: hidden !important;
  }

  .sr-modal-header {
    padding: 16px 20px !important;
    flex-shrink: 0 !important;
  }

  .sr-modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px 20px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  .sr-modal-footer {
    padding: 14px 20px max(16px, env(safe-area-inset-bottom, 0px)) !important;
    flex-shrink: 0 !important;
    background: #FFFFFF !important;
    border-top: 1px solid var(--sr-border-light) !important;
    position: relative !important;
    z-index: 10 !important;
  }

  .sr-auth-card {
    padding: 24px 18px !important;
    border-radius: 20px !important;
  }

  .sr-form-row-2 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* ==========================================================================
   PWA Installation Banner & iOS Guide Sheet (Craft Floor Kobalt Tenang)
   ========================================================================== */

.pk-pwa-banner {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  max-width: 440px;
  width: calc(100% - 48px);
  animation: pkFadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.pk-pwa-banner-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: 0 14px 34px -6px rgba(15, 23, 42, 0.16), 0 6px 12px -4px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
  backdrop-filter: blur(8px);
}

.pk-pwa-close-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: #94A3B8;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  transition: all 0.15s ease;
}

.pk-pwa-close-btn:hover {
  color: #0F172A;
  background: #F1F5F9;
}

.pk-pwa-body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-right: 20px;
}

.pk-pwa-icon-wrap {
  position: relative;
  flex-shrink: 0;
}

.pk-pwa-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(29, 95, 214, 0.18);
}

.pk-pwa-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: #1D5FD6;
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 5px;
  border-radius: 6px;
  border: 1.5px solid #FFFFFF;
}

.pk-pwa-content {
  flex: 1;
  min-width: 0;
}

.pk-pwa-title {
  margin: 0 0 4px 0;
  font-family: var(--pk-font, 'Plus Jakarta Sans', sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.01em;
}

.pk-pwa-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #475569;
}

.pk-pwa-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px;
}

.pk-btn-pwa-dismiss {
  background: transparent;
  border: 1px solid #CBD5E1;
  color: #475569;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.pk-btn-pwa-dismiss:hover {
  background: #F1F5F9;
  color: #0F172A;
  border-color: #94A3B8;
}

.pk-btn-pwa-install {
  background: #1D5FD6;
  border: none;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 10px;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(29, 95, 214, 0.28);
  transition: all 0.18s ease;
}

.pk-btn-pwa-install:hover {
  background: #154BB2;
  box-shadow: 0 6px 16px rgba(29, 95, 214, 0.36);
  transform: translateY(-1px);
}

.pk-btn-pwa-install:active {
  transform: translateY(0);
}

/* Mobile Placement for PWA Banner */
@media (max-width: 768px) {
  .pk-pwa-banner {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px);
    left: 12px;
    right: 12px;
    max-width: none;
    width: auto;
  }
  .pk-pwa-banner-card {
    padding: 14px 16px;
    gap: 12px;
  }
  .pk-pwa-actions {
    width: 100%;
  }
  .pk-btn-pwa-dismiss {
    flex: 1;
  }
  .pk-btn-pwa-install {
    flex: 1.5;
  }
}

/* iOS Safari Guide Sheet */
.pk-pwa-ios-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: pkFadeIn 0.25s ease forwards;
}

.pk-pwa-ios-sheet {
  background: #FFFFFF;
  width: 100%;
  max-width: 480px;
  border-radius: 24px 24px 0 0;
  padding: 14px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: pkSheetUp 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.pk-pwa-sheet-handle {
  width: 38px;
  height: 4.5px;
  border-radius: 3px;
  background: #CBD5E1;
  margin: 0 auto;
}

.pk-pwa-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pk-pwa-sheet-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pk-pwa-sheet-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
}

.pk-pwa-sheet-title {
  margin: 0;
  font-family: var(--pk-font, 'Plus Jakarta Sans', sans-serif);
  font-size: 16px;
  font-weight: 700;
  color: #0F172A;
}

.pk-pwa-sheet-subtitle {
  margin: 2px 0 0 0;
  font-size: 12px;
  color: #64748B;
}

.pk-pwa-sheet-close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: #94A3B8;
  cursor: pointer;
  padding: 6px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pk-pwa-ios-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pk-pwa-step-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 12px 14px;
}

.pk-pwa-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #E2E8F0;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pk-pwa-step-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #EFF6FF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pk-pwa-step-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
  color: #334155;
}

.pk-pwa-step-text strong {
  font-size: 13.5px;
  font-weight: 600;
  color: #0F172A;
}

.pk-pwa-sheet-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pk-pwa-sheet-actions .pk-btn-pwa-dismiss {
  flex: 1;
}

.pk-pwa-sheet-actions .pk-btn-pwa-install {
  flex: 1.5;
}

@keyframes pkFadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pkFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pkSheetUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* ==========================================================================
   Cloud Sync Status Pill Badge in Header
   ========================================================================== */

.pk-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 6px 12px;
  font-family: var(--pk-font, 'Plus Jakarta Sans', sans-serif);
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  min-height: 38px;
  transition: all 0.15s ease;
}

.pk-sync-badge:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
}

.pk-sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94A3B8;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

/* Active / Synced: Green */
.pk-sync-badge.pk-sync-active {
  border-color: #BBF7D0;
  background: #F0FDF4;
  color: #166534;
}
.pk-sync-badge.pk-sync-active .pk-sync-dot {
  background: #22C55E;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

/* Syncing: Amber Pulse */
.pk-sync-badge.pk-sync-syncing {
  border-color: #FED7AA;
  background: #FFF7ED;
  color: #9A3412;
}
.pk-sync-badge.pk-sync-syncing .pk-sync-dot {
  background: #F97316;
  animation: pkPulse 1.2s infinite;
}

/* Offline: Red */
.pk-sync-badge.pk-sync-offline {
  border-color: #FECACA;
  background: #FEF2F2;
  color: #991B1B;
}
.pk-sync-badge.pk-sync-offline .pk-sync-dot {
  background: #EF4444;
}

/* Error: Amber/Red */
.pk-sync-badge.pk-sync-error {
  border-color: #FED7AA;
  background: #FFFBEB;
  color: #B45309;
}
.pk-sync-badge.pk-sync-error .pk-sync-dot {
  background: #F59E0B;
}

/* Unconfigured: Subtle Slate */
.pk-sync-badge.pk-sync-unconfigured {
  border-color: #E2E8F0;
  background: #F8FAFC;
  color: #64748B;
}
.pk-sync-badge.pk-sync-unconfigured .pk-sync-dot {
  background: #94A3B8;
}

@keyframes pkPulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 8px rgba(249, 115, 22, 0.7); }
  100% { transform: scale(0.95); opacity: 0.8; }
}