/* ============================================================ Phase 31A — Semantic colour tokens (single source of truth) Light values are the default in :root. Dark overrides live in html[data-theme="dark"] AND in the prefers-color-scheme media query below (user override wins). ============================================================ */ :root { /* Surfaces */ --color-bg: #FBF9F6; --color-surface: #FFFFFF; --color-surface-low: #F5F0EB; --color-surface-mid: #EDE5DC; --color-surface-hi: #E0D8CE; /* Brand */ --color-primary: #C47A5A; --color-primary-deep: #A4593B; --color-accent: #7A9E7E; /* Text */ --color-text: #2C2418; --color-text-muted: #5E5244; /* Utility */ --color-border: #D6CCBF; --color-success: #4D7A52; --color-danger: #BA1A1A; --color-warn: #D68A3C; /* Derived — gradient endpoint (replaces legacy --theme-primary-container flat collapse, W2 regression fix). Lightened primary in light mode, darkened primary in dark mode. */ --color-primary-soft: color-mix(in srgb, var(--color-primary) 65%, #FFFFFF); /* Channel triplets — enables Tailwind opacity modifiers (bg-surface/90, border-outline-variant/15) on CSS-var colours. Tailwind compiles alpha modifiers to `rgb(var(--…) / )`, which requires space-separated R G B integers, NOT hex. Keep in sync with the hex tokens above. */ --color-bg-rgb: 251 249 246; --color-surface-rgb: 255 255 255; --color-surface-low-rgb: 245 240 235; --color-surface-mid-rgb: 237 229 220; --color-surface-hi-rgb: 224 216 206; --color-primary-rgb: 196 122 90; --color-primary-deep-rgb: 164 89 59; --color-accent-rgb: 122 158 126; --color-text-rgb: 44 36 24; --color-text-muted-rgb: 94 82 68; --color-border-rgb: 214 204 191; --color-success-rgb: 77 122 82; --color-danger-rgb: 186 26 26; --color-warn-rgb: 214 138 60; } /* User override — theme picker (31D) sets html[data-theme="..."] */ html[data-theme="dark"] { --color-bg: #15130F; --color-surface: #1E1B16; --color-surface-low: #1A1813; --color-surface-mid: #27231C; --color-surface-hi: #322D25; --color-primary: #E69873; --color-primary-deep: #C47A5A; --color-accent: #9FCCA4; --color-text: #F2EDE4; --color-text-muted: #A8A094; --color-border: #403A31; --color-success: #8FC398; --color-danger: #F0736A; --color-warn: #E6B063; /* Derived — darkened primary for gradient endpoints on dark surfaces. */ --color-primary-soft: color-mix(in srgb, var(--color-primary) 75%, #000000); /* Channel triplets (dark) — keep in sync with hex tokens above */ --color-bg-rgb: 21 19 15; --color-surface-rgb: 30 27 22; --color-surface-low-rgb: 26 24 19; --color-surface-mid-rgb: 39 35 28; --color-surface-hi-rgb: 50 45 37; --color-primary-rgb: 230 152 115; --color-primary-deep-rgb: 196 122 90; --color-accent-rgb: 159 204 164; --color-text-rgb: 242 237 228; --color-text-muted-rgb: 168 160 148; --color-border-rgb: 64 58 49; --color-success-rgb: 143 195 152; --color-danger-rgb: 240 115 106; --color-warn-rgb: 230 176 99; } /* System fallback — when user has not explicitly picked a theme, follow OS. The inline script sets data-theme BEFORE paint so this media query is a belt-and-braces fallback (covers the race where JS fails to load). */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { --color-bg: #15130F; --color-surface: #1E1B16; --color-surface-low: #1A1813; --color-surface-mid: #27231C; --color-surface-hi: #322D25; --color-primary: #E69873; --color-primary-deep: #C47A5A; --color-accent: #9FCCA4; --color-text: #F2EDE4; --color-text-muted: #A8A094; --color-border: #403A31; --color-success: #8FC398; --color-danger: #F0736A; --color-warn: #E6B063; --color-primary-soft: color-mix(in srgb, var(--color-primary) 75%, #000000); --color-bg-rgb: 21 19 15; --color-surface-rgb: 30 27 22; --color-surface-low-rgb: 26 24 19; --color-surface-mid-rgb: 39 35 28; --color-surface-hi-rgb: 50 45 37; --color-primary-rgb: 230 152 115; --color-primary-deep-rgb: 196 122 90; --color-accent-rgb: 159 204 164; --color-text-rgb: 242 237 228; --color-text-muted-rgb: 168 160 148; --color-border-rgb: 64 58 49; --color-success-rgb: 143 195 152; --color-danger-rgb: 240 115 106; --color-warn-rgb: 230 176 99; } } /* ── Theme palette defaults — legacy alias layer (31A) ── */ :root { /* === Legacy --theme-* aliases — forwarded to --color-* === */ --theme-primary: var(--color-primary); --theme-primary-container: var(--color-primary-soft); --theme-surface: var(--color-bg); --theme-surface-low: var(--color-surface-low); --theme-surface-high: var(--color-surface-mid); --theme-surface-highest: var(--color-surface-hi); --theme-surface-lowest: var(--color-surface); --theme-surface-container: var(--color-surface-low); --theme-on-surface: var(--color-text); --theme-on-surface-variant: var(--color-text-muted); --theme-tertiary: var(--color-text-muted); --theme-outline: var(--color-border); --theme-outline-variant: var(--color-border); --theme-error: var(--color-danger); --theme-error-container: var(--color-surface-low); --theme-secondary-container: var(--color-surface-low); --theme-on-secondary-container: var(--color-text-muted); /* === Legacy --md-sys-color-* aliases — forwarded to --color-* === */ --md-sys-color-primary: var(--color-primary); --md-sys-color-primary-container: var(--color-primary-soft); --md-sys-color-surface: var(--color-surface); --md-sys-color-surface-container-low: var(--color-surface-low); --md-sys-color-surface-container-high: var(--color-surface-mid); --md-sys-color-on-surface: var(--color-text); --md-sys-color-on-surface-variant: var(--color-text-muted); --md-sys-color-outline-variant: var(--color-border); --md-sys-color-tertiary: var(--color-text-muted); /* === Motion tokens (Phase 29) — UNCHANGED === */ --ease-ios: cubic-bezier(0.32, 0.72, 0, 1); --ease-material: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --t-fast: 180ms; --t-med: 300ms; --t-slow: 500ms; } /* Material Symbols configuration */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; font-size: 24px; line-height: 1; vertical-align: middle; } .material-symbols-outlined.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .material-symbols-outlined.sm { font-size: 20px; } .material-symbols-outlined.lg { font-size: 32px; } .material-symbols-outlined.xl { font-size: 40px; } /* Editorial shadows — v2 only */ .v2 .shadow-editorial { box-shadow: 0 12px 32px rgba(28, 28, 25, 0.04); } .v2 .shadow-editorial-lg { box-shadow: 0 16px 48px rgba(28, 28, 25, 0.08); } /* Gradient button — v2 only */ .v2 .btn-gradient { background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-container) 100%); color: white; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .v2 .btn-gradient:hover { box-shadow: 0 6px 20px rgba(161, 62, 42, 0.3); transform: translateY(-1px); } .v2 .btn-gradient:active { transform: scale(0.97); } /* Base resets */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { overflow-x: hidden; width: 100%; } body { font-family: 'Inter', -apple-system, sans-serif; background: var(--theme-surface); color: var(--theme-on-surface); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* View switching */ .view { display: none; } .view.active { display: block; animation: viewFadeIn 0.2s ease; } @keyframes viewFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Modal system */ .modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(28, 28, 25, 0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1001; align-items: flex-end; justify-content: center; overflow-y: auto; padding: 0; } .modal.active { display: flex; animation: modalOverlayIn 0.2s ease; } @keyframes modalOverlayIn { from { opacity: 0; } to { opacity: 1; } } /* 31G.2 — migrated .modal-content/.modal-header from --theme-* alias layer to direct --color-* tokens. Symptom: currency picker bottom-sheet (and any modal using the shared .modal-content skin) rendered with light/cream surface in dark mode while the rest of the app was correctly dark. Body still uses --theme-surface and renders correctly, which suggests a browser-specific resolution bug in the nested `var(--theme-*) → var(--color-*)` indirection on some engines. Collapsing one level of indirection for these consumers fixes it deterministically. The --theme-* alias layer at :root is unchanged (per 31A decision) — this edit only touches direct consumers. */ .modal-content { background: var(--color-surface); border-radius: 1.5rem 1.5rem 0 0; padding: 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 -8px 40px rgba(28, 28, 25, 0.12); animation: sheetSlideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1); position: relative; } .modal-panel { max-height: 90vh; overflow-y: auto; animation: sheetSlideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1); padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)); } @keyframes sheetSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .modal-header { font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 18px; color: var(--color-text); } .modal-actions { display: flex; gap: 10px; margin-top: 20px; } /* Sheet grab bar */ .sheet-grab-bar { width: 36px; height: 4px; background: rgba(28, 28, 25, 0.15); border-radius: 2px; margin: 0 auto 16px; } /* Toast */ .toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); background: rgba(28, 28, 25, 0.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: white; padding: 12px 24px; border-radius: 100px; box-shadow: 0 8px 32px rgba(28, 28, 25, 0.15); animation: toastIn 0.3s ease-out; z-index: 1100; font-size: 13px; font-weight: 500; white-space: nowrap; } @keyframes toastIn { from { transform: translateX(-50%) translateY(16px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } } /* Undo toast */ .undo-toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); background: var(--theme-on-surface); color: white; padding: 12px 20px; border-radius: 1rem; box-shadow: 0 4px 20px rgba(28, 28, 25, 0.2); display: flex; align-items: center; gap: 12px; z-index: 1100; font-size: 14px; font-weight: 500; animation: toastIn 0.3s ease-out; max-width: calc(100% - 32px); overflow: hidden; } /* Phase 29: countdown bar (1.4) — shrinks left-to-right while the toast is live */ .undo-toast-countdown { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--theme-primary); transform-origin: left center; transform: scaleX(1); animation: undoCountdown 5s linear forwards; pointer-events: none; } @keyframes undoCountdown { from { transform: scaleX(1); } to { transform: scaleX(0); } } .undo-toast button { background: var(--theme-primary); color: white; border: none; padding: 6px 14px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; font-family: 'Inter', sans-serif; white-space: nowrap; } /* Spinner */ @keyframes spin { to { transform: rotate(360deg); } } /* Side menu */ .side-menu-overlay { display: none; position: fixed; inset: 0; background: rgba(28, 28, 25, 0.4); z-index: 998; opacity: 0; transition: opacity 0.3s; } .side-menu-overlay.open { display: block; opacity: 1; } .side-menu { position: fixed; top: 0; right: -300px; width: 300px; height: 100%; background: var(--theme-surface-lowest); z-index: 999; box-shadow: -4px 0 20px rgba(28, 28, 25, 0.12); transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; display: none; } .side-menu.open { right: 0; } /* More menu */ .more-menu-backdrop { position: fixed; inset: 0; z-index: 899; background: rgba(28, 28, 25, 0.3); animation: modalOverlayIn 0.15s ease; } .more-menu { position: fixed; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px; z-index: 900; background: var(--theme-surface-lowest); border-radius: 1rem; box-shadow: 0 -4px 24px rgba(28, 28, 25, 0.12); padding: 8px; animation: sheetSlideUp 0.2s cubic-bezier(0.32, 0.72, 0, 1); } .more-menu-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: none; background: none; font-size: 15px; font-family: 'Inter', sans-serif; color: var(--theme-on-surface); border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s; } .more-menu-item:active { background: var(--theme-surface-high); } .more-menu-item svg { width: 22px; height: 22px; stroke-width: 1.8; flex-shrink: 0; } .more-menu-item .menu-label { flex: 1; text-align: left; font-weight: 500; } /* Add type toggle */ .add-type-toggle { display: flex; background: var(--theme-surface-high); border-radius: 1rem; padding: 4px; margin-bottom: 16px; } .toggle-option { flex: 1; padding: 10px 16px; border: none; background: transparent; border-radius: 0.75rem; cursor: pointer; font-weight: 600; font-size: 14px; font-family: 'Inter', sans-serif; color: var(--theme-on-surface-variant); transition: all 0.2s; } .toggle-option.active { background: var(--theme-primary); color: white; box-shadow: 0 2px 8px rgba(161, 62, 42, 0.25); } /* Category grid & chips */ .category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 16px; } .category-btn { padding: 10px 8px; border: 1.5px solid var(--theme-outline-variant); background: var(--theme-surface-lowest); border-radius: 1rem; cursor: pointer; font-weight: 500; font-size: 13px; font-family: 'Inter', sans-serif; transition: all 0.2s; text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; } .category-btn:hover { border-color: var(--theme-primary); background: var(--theme-error-container); } .category-btn.active { background: var(--theme-primary); color: white; border-color: var(--theme-primary); box-shadow: 0 2px 8px rgba(161, 62, 42, 0.25); } /* Table styles */ .table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; table-layout: fixed; } .table th { background: var(--theme-surface-low); padding: 10px; text-align: center; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--theme-on-surface-variant); border-bottom: 2px solid var(--theme-outline-variant); } .table td { padding: 11px 10px; border-bottom: 1px solid var(--theme-surface-highest); overflow: hidden; text-overflow: ellipsis; } .table td:first-child, .table th:first-child { width: 30%; word-wrap: break-word; overflow-wrap: break-word; } .table tbody tr:nth-child(even) { background: var(--theme-surface-low); } .table tr:hover { background: var(--theme-surface-high); } .table-num { font-family: 'Manrope', sans-serif; text-align: right; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; } th.sortable { cursor: pointer; user-select: none; -webkit-user-select: none; } th.sortable:hover { color: var(--theme-primary); } th.sortable .sort-arrow { font-size: 10px; margin-left: 3px; opacity: 0.4; } th.sortable.sort-active .sort-arrow { opacity: 1; color: var(--theme-primary); } .expandable-row { cursor: pointer; } .expandable-row:hover { background: var(--theme-error-container) !important; } .subcategory-row td { padding-left: 44px !important; font-size: 12px; background: var(--theme-surface-low); color: var(--theme-on-surface-variant); } .expense-category-cell { display: flex; align-items: center; gap: 6px; } .expand-icon { width: 20px; text-align: center; color: var(--theme-outline); font-size: 12px; transition: transform 0.2s; } /* KPI cards — v2 only */ .v2 .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; } .v2 .kpi-card { padding: 16px 18px; border-radius: 1rem; border: 1px solid var(--theme-surface-highest); border-left: 3px solid var(--theme-primary); background: var(--theme-surface-lowest); transition: all 0.2s; box-shadow: 0 12px 32px rgba(28, 28, 25, 0.04); } .v2 .kpi-card:hover { box-shadow: 0 16px 48px rgba(28, 28, 25, 0.08); transform: translateY(-1px); } .v2 .kpi-card.kpi-income { border-left-color: #22c55e; } .v2 .kpi-card.kpi-expense { border-left-color: var(--theme-error); } .v2 .kpi-card.kpi-balance { border-left-color: var(--theme-primary); } .v2 .kpi-label { font-size: 11px; color: var(--theme-outline); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; font-weight: 600; } .v2 .kpi-value { font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 700; color: var(--theme-on-surface); font-variant-numeric: tabular-nums; } .v2 .kpi-value.positive { color: #22c55e; } .v2 .kpi-value.negative { color: var(--theme-error); } /* Cards */ .card { background: var(--theme-surface-lowest); border-radius: 1.5rem; padding: 24px; margin-bottom: 16px; box-shadow: 0 12px 32px rgba(28, 28, 25, 0.04); border: 1px solid var(--theme-surface-highest); overflow: hidden; max-width: 100%; } .card h2 { font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 700; margin-bottom: 16px; color: var(--theme-on-surface); text-transform: uppercase; letter-spacing: 0.5px; } /* Form elements */ input[type="text"], input[type="number"], input[type="date"], input[type="password"], select, textarea { width: 100%; padding: 10px 14px; border: 1.5px solid var(--theme-outline-variant); border-radius: 1rem; font-family: 'Inter', sans-serif; font-size: 16px; transition: all 0.2s; background: var(--theme-surface-lowest); color: var(--theme-on-surface); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--theme-primary); box-shadow: 0 0 0 3px rgba(161, 62, 42, 0.1); } textarea { resize: vertical; min-height: 72px; } .form-group { margin-bottom: 14px; } label { display: block; font-weight: 500; margin-bottom: 5px; font-size: 13px; color: var(--theme-on-surface-variant); } /* Buttons */ .btn { padding: 9px 16px; border: none; border-radius: 1rem; cursor: pointer; font-weight: 600; font-size: 13px; font-family: 'Inter', sans-serif; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--theme-primary); color: white; } .btn-primary:hover { background: #8a3424; box-shadow: 0 2px 8px rgba(161, 62, 42, 0.25); } .btn-success { background: #22c55e; color: white; } .btn-success:hover { background: #16a34a; box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25); } .btn-outline { background: transparent; color: #22c55e; border: 1.5px solid #22c55e; } .btn-outline:hover { background: #ecfdf5; } .btn-warning { background: #f59e0b; color: white; } .btn-warning:hover { background: #d97706; } .btn-danger { background: var(--theme-error); color: white; } .btn-danger:hover { background: #93000a; box-shadow: 0 2px 8px rgba(186, 26, 26, 0.25); } .btn-small { min-height: 36px; min-width: 36px; padding: 6px 12px; font-size: 13px; } .btn-group { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } /* Entry list */ .entry-list { margin-top: 16px; } .entry-item { background: var(--theme-surface-low); padding: 12px 14px; border-radius: 1rem; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; } .entry-item:hover { background: var(--theme-surface-high); } .entry-info { flex: 1; } .entry-category { font-weight: 600; color: var(--theme-primary); font-size: 14px; } .entry-amount { font-family: 'Manrope', sans-serif; font-weight: 600; color: var(--theme-on-surface); font-size: 14px; font-variant-numeric: tabular-nums; } .entry-note { font-size: 12px; color: var(--theme-outline); } .entry-actions { display: flex; gap: 6px; } .entry-actions .btn-small { min-height: 36px; min-width: 36px; display: flex; align-items: center; justify-content: center; } /* Date navigator */ .date-navigator { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .date-navigator button { padding: 8px 14px; background: var(--theme-surface-lowest); border: 1.5px solid var(--theme-outline-variant); border-radius: 1rem; cursor: pointer; font-size: 16px; transition: all 0.2s; font-family: 'Inter', sans-serif; color: var(--theme-on-surface); } .date-navigator button:hover { background: var(--theme-error-container); border-color: var(--theme-primary); color: var(--theme-primary); } .date-display { font-family: 'Manrope', sans-serif; font-weight: 600; min-width: 150px; text-align: center; font-size: 15px; } /* Day total */ .day-total { font-size: 14px; font-weight: 600; padding: 14px 16px; background: rgba(161, 62, 42, 0.08); border-radius: 1rem; margin-top: 14px; text-align: right; border: 1px solid rgba(161, 62, 42, 0.1); } .day-total-amount { font-family: 'Manrope', sans-serif; color: var(--theme-primary); font-size: 20px; } /* Calendar */ .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 16px; background: var(--theme-surface-highest); border-radius: 1rem; padding: 3px; } .cal-header { text-align: center; font-weight: 600; font-size: 11px; color: var(--theme-outline); padding: 8px 4px; text-transform: uppercase; letter-spacing: 0.5px; } .cal-cell { min-height: 72px; padding: 5px; background: var(--theme-surface-lowest); border: 2px solid transparent; border-radius: 1rem; cursor: pointer; transition: all 0.2s; position: relative; overflow: hidden; } .cal-cell:hover { background: var(--theme-surface-high); border-color: var(--theme-outline-variant); } .cal-cell.today { border-color: var(--theme-primary); background: rgba(161, 62, 42, 0.06); } .cal-cell.today .cal-day-num { color: var(--theme-primary); } .cal-cell.selected { background: rgba(161, 62, 42, 0.06); border-color: var(--theme-primary); box-shadow: 0 0 0 2px rgba(161, 62, 42, 0.15); } .cal-cell.empty { background: transparent; cursor: default; min-height: 0; } .cal-cell.empty:hover { background: transparent; border-color: transparent; } .cal-day-num { font-weight: 600; font-size: 13px; color: var(--theme-on-surface); margin-bottom: 3px; } .cal-day-expense { font-family: 'Manrope', sans-serif; font-size: 9px; color: var(--theme-error); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-day-income { font-family: 'Manrope', sans-serif; font-size: 9px; color: #22c55e; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* POL-CAL-01: muted Dziś pill when viewing current month */ .cal-today-inert { opacity: 0.5; cursor: default; pointer-events: none; } /* POL-CAL-04: close button + full-width CTA inside opened add-forms */ .cal-inline-form-header { display: flex; justify-content: flex-end; margin-bottom: 4px; } .cal-inline-form-close { background: transparent; border: none; cursor: pointer; color: var(--theme-outline); padding: 4px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } .cal-inline-form-close:hover { background: var(--theme-surface-high); color: var(--theme-on-surface); } .cal-inline-form-submit { width: 100%; } /* Calendar day panel */ .cal-day-panel { background: var(--theme-surface-lowest); border-radius: 1.5rem; padding: 24px; margin-top: 8px; box-shadow: 0 12px 32px rgba(28, 28, 25, 0.04); animation: viewFadeIn 0.2s ease; position: relative; } .cal-day-panel .sheet-close-btn { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--theme-surface-high); color: var(--theme-outline); font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .cal-day-panel .sheet-close-btn:hover { background: var(--theme-outline-variant); color: var(--theme-on-surface); } .cal-day-panel h3 { font-family: 'Manrope', sans-serif; font-size: 16px; margin-bottom: 16px; color: var(--theme-on-surface); font-weight: 700; } .cal-section { margin-bottom: 20px; } .cal-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .cal-section-title { font-weight: 600; font-size: 12px; color: var(--theme-outline); text-transform: uppercase; letter-spacing: 0.5px; } .cal-entry-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; background: var(--theme-surface-low); border-radius: 0.5rem; margin-bottom: 4px; font-size: 13px; transition: background 0.2s; } .cal-entry-row:hover { background: var(--theme-surface-high); } .cal-entry-row .entry-category { font-weight: 600; font-size: 13px; } .cal-entry-row .entry-amount { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13px; } .cal-entry-row .entry-note { font-size: 11px; color: var(--theme-outline); margin-left: 8px; } .billing-badge { display: inline-block; font-size: 10px; background: rgba(161, 62, 42, 0.1); color: var(--theme-primary); padding: 2px 7px; border-radius: 10px; margin-left: 6px; font-weight: 600; } .cal-inline-form { background: var(--theme-surface-low); border-radius: 1rem; padding: 16px; margin-top: 12px; border: 1px solid var(--theme-outline-variant); } .cal-inline-form .form-group { margin-bottom: 12px; } .cal-summary { display: flex; gap: 20px; padding: 14px 0; border-top: 1px solid var(--theme-outline-variant); margin-top: 10px; flex-wrap: wrap; } .cal-summary-item { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13px; } .cal-summary-item.expense { color: var(--theme-error); } .cal-summary-item.income { color: #22c55e; } .cal-summary-item.balance { color: var(--theme-primary); } /* Progress bars */ .progress-bar { height: 6px; background: var(--theme-surface-highest); border-radius: 3px; overflow: hidden; margin-top: 6px; } /* Phase 29 (3.3): spring curve zamiast linear ease — pasek "trafia" w miejsce zamiast leniwie dojeżdżać. */ .progress-fill { height: 100%; background: #22c55e; transition: width 520ms var(--ease-spring); border-radius: 3px; } .progress-fill.warning { background: #f59e0b; } .progress-fill.danger { background: var(--theme-error); } /* Planning bar */ .planning-bar { position: sticky; top: 0; background: var(--theme-surface-lowest); padding: 12px 18px; margin-bottom: 16px; border-radius: 1rem; box-shadow: 0 12px 32px rgba(28, 28, 25, 0.04); display: flex; gap: 20px; flex-wrap: wrap; align-items: center; z-index: 10; border-bottom: 2px solid var(--theme-surface-highest); } .planning-bar-item { display: flex; flex-direction: column; gap: 2px; } .planning-bar-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--theme-outline); font-weight: 600; } .planning-bar-value { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 15px; } /* Plan cell — v2 only */ .v2 .plan-cell { cursor: pointer; border-radius: 4px; transition: background 0.15s; } .v2 .plan-cell:hover { background: rgba(161, 62, 42, 0.06); } .v2 .plan-cell input, .v2 .plan-cell-input { width: 80px; max-width: 100%; padding: 4px 6px; font-family: 'Manrope', sans-serif; font-size: 16px; border: 2px solid var(--theme-primary); border-radius: 4px; text-align: right; background: white; outline: none; box-shadow: 0 0 0 3px rgba(161, 62, 42, 0.15); } /* Today button */ .today-btn { background: #22c55e !important; color: white !important; border-color: #22c55e !important; font-size: 12px !important; padding: 6px 12px !important; font-weight: 600; } .today-btn:hover { background: #16a34a !important; } /* Monthly section title */ .monthly-section-title { font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 700; color: var(--theme-on-surface-variant); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; } /* Tree view (categories) */ .tree-item { margin-bottom: 10px; } .tree-main { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--theme-surface-low); border-radius: 1rem; transition: background 0.2s; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; } .tree-main:active { background: var(--theme-surface-high); } .tree-chevron { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease; color: var(--theme-outline); flex-shrink: 0; } .tree-chevron svg { width: 16px; height: 16px; } .tree-item.expanded .tree-chevron { transform: rotate(180deg); } .tree-cat-info { flex: 1; min-width: 0; } .tree-cat-name { font-weight: 500; font-size: 15px; color: var(--theme-on-surface); } .tree-cat-badge { font-size: 11px; color: var(--theme-outline); margin-top: 1px; } .tree-actions { display: flex; gap: 4px; flex-shrink: 0; } .tree-actions .reorder-btn { display: inline-flex; } .tree-grab-handle { display: flex; align-items: center; padding: 0 6px; color: var(--theme-outline); cursor: grab; touch-action: none; flex-shrink: 0; } .tree-grab-handle:hover { color: var(--theme-on-surface-variant); } .tree-item.dragging { user-select: none; -webkit-user-select: none; } .tree-children { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; padding-left: 14px; } .tree-item.expanded .tree-children { max-height: 2000px; } .tree-children-inner { padding: 6px 0 4px 0; } .tree-child { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--theme-surface-lowest); border-radius: 1rem; margin-bottom: 4px; border-left: 3px solid var(--theme-primary); transition: background 0.2s; } .tree-child.hidden { display: none; } .tree-add-sub { padding: 8px 12px; margin-top: 2px; } .tree-add-sub button { font-size: 13px; padding: 6px 12px; } .cat-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .cat-section-header h2 { margin: 0; } .cat-section-count { font-size: 12px; color: var(--theme-outline); background: var(--theme-surface-low); padding: 2px 10px; border-radius: 20px; } .archived-section-toggle { display: flex; align-items: center; gap: 6px; padding: 10px 0; margin-top: 8px; font-size: 12px; color: var(--theme-outline); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-top: 1px solid var(--theme-outline-variant); cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; } .archived-section-toggle .chevron-sm { transition: transform 0.2s ease; width: 14px; height: 14px; } .archived-section-toggle.open .chevron-sm { transform: rotate(180deg); } .archived-items { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; } .archived-section-toggle.open + .archived-items { max-height: 1000px; } .hidden { display: none !important; } .stat-row { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--theme-surface-highest); } .stat-row:last-child { border-bottom: none; } .stat-label { color: var(--theme-on-surface-variant); font-size: 14px; } .stat-value { font-weight: 600; font-family: 'Manrope', sans-serif; font-size: 14px; } .chart-container { position: relative; height: 300px; margin-bottom: 16px; } /* Amount input */ .amount-input-wrap { position: relative; margin-bottom: 4px; } .amount-input-big { font-family: 'Manrope', sans-serif; font-size: 32px; font-weight: 700; text-align: center; border: none; background: transparent; width: 100%; padding: 16px 40px 16px 16px; color: var(--theme-on-surface); } .amount-input-big:focus { outline: none; } .amount-input-big::placeholder { color: var(--theme-outline-variant); } .amount-currency { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 700; color: var(--theme-outline); } /* Section label */ .section-label { font-size: 12px; color: var(--theme-outline); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 8px; margin-top: 16px; } /* Chips scroll */ .chips-scroll { display: flex; gap: 8px; flex-wrap: wrap; } /* Note toggle and expandable */ .note-toggle { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--theme-outline); font-size: 13px; font-weight: 500; cursor: pointer; padding: 8px 0; margin-top: 12px; font-family: 'Inter', sans-serif; } .note-expandable { margin-top: 8px; } .note-input { font-size: 14px; padding: 10px 14px; border: 1.5px solid var(--theme-outline-variant); border-radius: 1rem; width: 100%; font-family: 'Inter', sans-serif; background: var(--theme-surface-lowest); color: var(--theme-on-surface); } .note-input:focus { outline: none; border-color: var(--theme-primary); box-shadow: 0 0 0 3px rgba(161, 62, 42, 0.1); } /* Submit button wrap */ .submit-btn-wrap { margin-top: 16px; } .submit-btn { width: 100%; padding: 14px; font-size: 15px; border-radius: 1rem; } /* Field error messages */ .field-error-msg { color: var(--theme-error); font-size: 12px; font-weight: 500; margin-top: 4px; display: none; } .field-error-msg.visible { display: block; animation: viewFadeIn 0.2s ease; } .form-error { color: var(--theme-error); font-size: 12px; margin-top: 4px; font-weight: 500; animation: viewFadeIn 0.2s ease; } /* Phase 29 (1.5): outline ring that grows + fades on apply. `outline` is used because .input-error's `box-shadow: ... !important` would block any box-shadow animation at equal-or-lower precedence. */ .input-error { border-color: var(--theme-error) !important; box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.1) !important; outline: 3px solid transparent; animation: errorRingPulse 0.7s ease; } .chips-error { border: 2px solid var(--theme-error); border-radius: 1rem; padding: 4px; outline: 2px solid transparent; animation: shake 0.4s ease, errorRingPulse 0.7s ease; } @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } @keyframes errorRingPulse { 0% { outline-color: rgba(186, 26, 26, 0.38); outline-offset: 0; } 100% { outline-color: rgba(186, 26, 26, 0); outline-offset: 6px; } } /* Quick add section */ .quick-add-section { margin-bottom: 16px; } .quick-add-title { font-size: 12px; color: var(--theme-outline); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 8px; } .quick-add-chips { display: flex; gap: 8px; flex-wrap: wrap; } .quick-add-chip { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1.5px solid var(--theme-outline-variant); background: var(--theme-surface-lowest); border-radius: 20px; cursor: pointer; font-size: 13px; font-family: 'Inter', sans-serif; font-weight: 500; color: var(--theme-on-surface); transition: all 0.2s; min-height: 40px; } .quick-add-chip:active { transform: scale(0.96); background: rgba(161, 62, 42, 0.06); border-color: var(--theme-primary); } .quick-add-chip .chip-amount { font-family: 'Manrope', sans-serif; color: var(--theme-outline); font-size: 12px; } /* Phase 29 (1.2): checkmark pops in then draws its stroke, instead of the old green plamka that flashed + faded in 600 ms. Palette shifts from #22c55e (jaskrawa zieleń) to --theme-tertiary (brąz sand) so the potwierdzenie nie wybija się z aplikacji. */ .add-success { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--theme-tertiary); color: white; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1200; animation: successPop 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275); pointer-events: none; box-shadow: 0 10px 28px rgba(139, 115, 85, 0.35); } .add-success svg path, .add-success svg polyline { fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: successCheck 360ms cubic-bezier(0.65, 0, 0.35, 1) 180ms forwards; } @keyframes successPop { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } 70% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } } @keyframes successCheck { to { stroke-dashoffset: 0; } } /* Empty state */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; text-align: center; } .empty-state-icon { width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(135deg, rgba(161, 62, 42, 0.08), rgba(161, 62, 42, 0.04)); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .empty-state-icon svg { width: 24px; height: 24px; stroke: var(--theme-primary); stroke-width: 1.5; fill: none; } .empty-state-title { font-size: 14px; font-weight: 600; color: var(--theme-on-surface-variant); margin-bottom: 4px; } .empty-state-desc { font-size: 12px; color: var(--theme-outline); line-height: 1.4; max-width: 220px; } .empty-state-text { font-size: 12px; color: var(--theme-outline); line-height: 1.4; max-width: 220px; } .empty-state .btn { display: inline-flex; min-height: 40px; } /* Skeleton loading */ .skeleton { background: linear-gradient(90deg, var(--theme-surface-low) 25%, var(--theme-surface-highest) 50%, var(--theme-surface-low) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 1rem; } .skeleton-line { height: 14px; margin-bottom: 10px; border-radius: 6px; } .skeleton-line.short { width: 60%; } .skeleton-line.medium { width: 80%; } .skeleton-kpi { height: 80px; border-radius: 1rem; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Expense card list */ .expense-card-list { display: none; } .expense-card { background: var(--theme-surface-low); border-radius: 1rem; padding: 14px 16px; margin-bottom: 8px; } .expense-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .expense-card-name { font-weight: 600; font-size: 14px; } .expense-card-amount { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; } .expense-card-progress { height: 6px; background: var(--theme-surface-highest); border-radius: 3px; overflow: hidden; margin-bottom: 6px; } /* Phase 29 (3.3): spring curve dla paska kategorii (Plan 02) */ .expense-card-progress-fill { height: 100%; border-radius: 3px; transition: width 520ms var(--ease-spring); } .expense-card-detail { display: flex; justify-content: space-between; font-size: 12px; color: var(--theme-outline); } /* Inline edit */ .inline-edit { padding: 4px 8px; width: 120px; } .amount-input { font-family: 'Manrope', sans-serif; } /* Swipeable */ .swipeable { touch-action: pan-y; } /* Sticky add button */ .sticky-add-btn { position: sticky; bottom: 0; z-index: 10; padding: 12px 0 16px; background: linear-gradient(to top, var(--theme-surface-lowest) 70%, transparent); margin: 0 -24px; padding-left: 24px; padding-right: 24px; } .sticky-add-btn .btn { width: 100%; padding: 14px; font-size: 15px; border-radius: 1rem; } /* Tutorial */ .tutorial-content { max-width: 480px; padding: 24px 24px 20px; } .tutorial-icon-wrap { width: 80px; height: 80px; border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .tutorial-icon-wrap svg { width: 40px; height: 40px; stroke-width: 1.8; } .tutorial-title { font-family: 'Manrope', sans-serif; font-size: 19px; font-weight: 700; text-align: center; margin-bottom: 8px; color: var(--theme-on-surface); } .tutorial-desc { font-size: 14px; color: var(--theme-on-surface-variant); text-align: center; line-height: 1.6; margin-bottom: 16px; } .tutorial-details { list-style: none; padding: 0; margin: 0 0 12px; } .tutorial-details li { position: relative; padding: 8px 0 8px 24px; font-size: 13px; line-height: 1.5; color: var(--theme-on-surface); border-bottom: 1px solid var(--theme-surface-highest); } .tutorial-details li:last-child { border-bottom: none; } .tutorial-details li::before { content: ''; position: absolute; left: 0; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--theme-primary); } .tutorial-tip { background: var(--theme-error-container); border-radius: 10px; padding: 10px 14px; font-size: 12px; color: #93000a; line-height: 1.5; margin-bottom: 12px; } .tutorial-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; } .tutorial-dots { display: flex; gap: 6px; } .tutorial-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--theme-outline-variant); transition: all 0.2s; } .tutorial-dot.active { background: var(--theme-primary); width: 20px; border-radius: 4px; } .tutorial-skip { background: none; border: none; color: var(--theme-outline); font-size: 13px; cursor: pointer; padding: 8px 0; font-family: 'Inter', sans-serif; } .tutorial-step { display: none; } .tutorial-step.active { display: block; animation: viewFadeIn 0.2s ease; } /* Spotlight / Coach Marks */ .spotlight-overlay { position: fixed; inset: 0; z-index: 10000; pointer-events: auto; } .spotlight-hole { position: absolute; z-index: 10001; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(28, 28, 25, 0.6); pointer-events: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .spotlight-hole::after { content: ''; position: absolute; inset: -4px; border-radius: 14px; border: 2px solid rgba(255,255,255,0.5); animation: spotlightPulse 2s ease-in-out infinite; } @keyframes spotlightPulse { 0%, 100% { border-color: rgba(255,255,255,0.3); } 50% { border-color: rgba(255,255,255,0.7); } } .spotlight-tooltip { position: absolute; z-index: 10002; background: white; border-radius: 14px; padding: 16px 18px; max-width: 280px; box-shadow: 0 8px 32px rgba(28, 28, 25, 0.2); pointer-events: auto; animation: sheetSlideUp 0.3s ease; } .spotlight-tooltip-title { font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 600; color: var(--theme-on-surface); margin-bottom: 6px; } .spotlight-tooltip-desc { font-size: 13px; color: var(--theme-on-surface-variant); line-height: 1.5; margin-bottom: 14px; } .spotlight-tooltip-arrow { position: absolute; width: 14px; height: 14px; background: white; transform: rotate(45deg); } .spotlight-tooltip-actions { display: flex; gap: 8px; align-items: center; justify-content: space-between; } .spotlight-tooltip-actions .spotlight-step-info { font-size: 11px; color: var(--theme-outline); } .spotlight-tooltip-actions .btn { font-size: 13px; padding: 7px 16px; } .spotlight-skip { background: none; border: none; font-size: 12px; color: rgba(255,255,255,0.7); cursor: pointer; position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 10003; font-family: 'Inter', sans-serif; padding: 8px 16px; } .spotlight-skip:hover { color: white; } /* Analytics modal */ .analytics-tabs { display: flex; border-bottom: 2px solid var(--theme-surface-highest); margin-bottom: 16px; gap: 0; } .analytics-tab-btn { flex: 1; padding: 10px 8px; border: none; background: none; font-size: 13px; font-weight: 500; color: var(--theme-on-surface-variant); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; white-space: nowrap; } .analytics-tab-btn.active { color: var(--theme-primary); border-bottom-color: var(--theme-primary); font-weight: 600; } .analytics-tab-btn:hover:not(.active) { color: var(--theme-on-surface); background: rgba(161, 62, 42, 0.04); } .analytics-tab-content { display: none; } .analytics-tab-content.active { display: block; } .analytics-kpi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } .analytics-kpi { background: rgba(161, 62, 42, 0.06); border-radius: 10px; padding: 14px; text-align: center; } .analytics-kpi-label { font-size: 12px; color: var(--theme-on-surface-variant); margin-bottom: 4px; } .analytics-kpi-value { font-size: 20px; font-weight: 700; font-family: 'Manrope', sans-serif; color: var(--theme-on-surface); } .analytics-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } .analytics-stat { background: var(--theme-surface-lowest); border: 1px solid var(--theme-surface-highest); border-radius: 8px; padding: 10px 12px; } .analytics-stat-label { font-size: 11px; color: var(--theme-on-surface-variant); margin-bottom: 2px; } .analytics-stat-value { font-size: 15px; font-weight: 600; font-family: 'Manrope', sans-serif; } .analytics-chart-wrap { position: relative; height: 220px; margin-bottom: 8px; } .analytics-btn { background: none; border: none; cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 4px; opacity: 0.6; transition: opacity 0.15s; vertical-align: middle; } .analytics-btn:hover { opacity: 1; background: rgba(161, 62, 42, 0.06); } .analytics-breakdown-table { width: 100%; font-size: 13px; margin-top: 12px; } .analytics-breakdown-table td { padding: 6px 8px; border-bottom: 1px solid var(--theme-surface-highest); } .analytics-breakdown-table td:not(:first-child) { text-align: right; font-family: 'Manrope', sans-serif; } .analytics-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; text-align: center; } /* View nav (annual) */ .view-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 20px; } .nav-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--theme-outline-variant); background: var(--theme-surface-lowest); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; color: var(--theme-on-surface); } .nav-arrow:hover { border-color: var(--theme-primary); background: rgba(161, 62, 42, 0.06); color: var(--theme-primary); } .nav-title { font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 700; min-width: 80px; text-align: center; } /* Tab buttons (desktop) */ .tab-btn { padding: 8px 16px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-weight: 500; transition: all 0.2s; font-size: 13px; color: var(--theme-outline); font-family: 'Manrope', sans-serif; white-space: nowrap; letter-spacing: -0.1px; } .tab-btn:hover { background: rgba(161, 62, 42, 0.06); color: var(--theme-primary); } .tab-btn.active { background: var(--theme-primary); color: white; font-weight: 600; box-shadow: 0 1px 3px rgba(161, 62, 42, 0.3); } /* Responsive */ @media (max-width: 768px) { .tree-actions .reorder-btn { display: none; } .expense-card-list { display: block; } .cal-grid { gap: 2px; padding: 2px; } .cal-cell { min-height: 48px; padding: 4px; border-radius: 0.5rem; } .cal-cell:hover { transform: none; } .cal-header { font-size: 10px; padding: 6px 2px; } .cal-day-num { font-size: 11px; } .cal-day-expense, .cal-day-income { font-size: 9px; } .cal-day-panel { position: fixed; bottom: 0; left: 0; right: 0; z-index: 800; border-radius: 1.5rem 1.5rem 0 0; max-height: 75vh; overflow-y: auto; box-shadow: 0 -4px 20px rgba(28, 28, 25, 0.12); animation: sheetSlideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1); padding-bottom: calc(16px + env(safe-area-inset-bottom)); background: rgba(255,255,255,0.97); } .cal-day-panel .sheet-handle { display: block; width: 36px; height: 4px; background: rgba(28, 28, 25, 0.15); border-radius: 2px; margin: 0 auto 8px; } .cal-day-backdrop { position: fixed; inset: 0; z-index: 799; background: rgba(28, 28, 25, 0.25); animation: modalOverlayIn 0.2s ease; } .planning-bar { flex-wrap: wrap; padding: 10px 12px; gap: 12px; } .planning-bar-value { font-size: 13px; } .analytics-stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .analytics-kpi-value { font-size: 17px; } .analytics-chart-wrap { height: 180px; } .analytics-tab-btn { font-size: 12px; padding: 8px 4px; } } @media (max-width: 480px) { .kpi-grid { grid-template-columns: 1fr; } .cal-cell { min-height: 44px; } .cal-day-expense, .cal-day-income { font-size: 7px; } } /* Hover only on hover devices */ @media (hover: none) { .kpi-card:hover, .category-btn:hover, .cal-cell:hover, .entry-item:hover, .expandable-row:hover, .cal-entry-row:hover, .table tr:hover { background: inherit; transform: none; box-shadow: inherit; border-color: inherit; } .cal-cell.today:hover { background: rgba(161, 62, 42, 0.06); } } @media (hover: hover) { .tree-main:hover { background: var(--theme-surface-high); } .tree-child:hover { background: var(--theme-surface-low); } } /* ── Bottom navigation active states ── */ .v2 .bottom-nav-item { color: var(--theme-on-surface-variant); transition: color 0.2s; } .v2 .bottom-nav-item.active { color: var(--theme-primary); font-weight: 700; } .v2 .bottom-nav-item.active .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .v2 .bottom-nav-fab { color: var(--theme-on-surface-variant); transition: color 0.2s; } .v2 .bottom-nav-fab .fab-circle { transition: transform 0.2s, box-shadow 0.2s; } .v2 .bottom-nav-fab.active .fab-circle { box-shadow: 0 6px 20px rgba(161, 62, 42, 0.45); transform: scale(1.05); } /* ── Desktop sidebar: ensure visible on md+ ── */ @media (min-width: 768px) { .v2 #desktopSideNav { display: flex !important; } } /* ── Desktop sidebar navigation active states ── */ .v2 .desktop-nav-item { color: var(--theme-on-surface-variant); background: transparent; transition: all 0.2s; } .v2 .desktop-nav-item:hover { color: var(--theme-primary); background: var(--theme-surface-high); } .v2 .desktop-nav-item.active { color: var(--theme-primary); background: var(--theme-surface-lowest); font-weight: 700; box-shadow: 0 2px 8px rgba(28, 28, 25, 0.06); transform: translateX(2px); } .v2 .desktop-nav-item.active .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* ── Planning View (v2 scoped) — replaces Phase 03 Monthly View ── */ /* Planning bento grid card shadow */ .v2 .shadow-planning-card { box-shadow: 0 12px 32px rgba(28, 28, 25, 0.04); } /* Planning income card — new design */ .v2 .planning-income-card { box-shadow: 0 12px 32px rgba(28, 28, 25, 0.04); transition: box-shadow 0.2s; } .v2 .planning-income-card:hover { box-shadow: 0 16px 40px rgba(28, 28, 25, 0.08); } /* POL-PLA-03: source name can wrap to a second line before truncating, so names up to ~24 chars fit on one line and longer names get a second line. */ .v2 .planning-income-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; line-height: 1.2; } /* Planning expense card — rounded corners updated */ .v2 .planning-expense-card { border-radius: 1.5rem; } /* Planning total card */ .v2 .planning-total-card { border-radius: 0.75rem; } .v2 .income-card { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: var(--theme-surface-lowest); border-radius: 0.75rem; box-shadow: 0 12px 32px rgba(28, 28, 25, 0.04); gap: 0.75rem; } .v2 .income-card-left { flex: 1; min-width: 0; } .v2 .income-card-name { font-family: Manrope, sans-serif; font-size: 0.9375rem; font-weight: 700; color: var(--theme-on-surface); margin-bottom: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v2 .income-card-plan { font-size: 0.75rem; color: var(--theme-on-surface-variant); display: flex; align-items: center; gap: 0.25rem; } .v2 .income-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex-shrink: 0; } .v2 .income-card-actual { font-family: Manrope, sans-serif; font-size: 1.125rem; font-weight: 800; color: var(--theme-tertiary); } .v2 .income-status-icon { width: 18px; height: 18px; } .v2 .plan-cell { cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.375rem; border-radius: 0.375rem; transition: background 0.15s; } .v2 .plan-cell:hover { background: var(--theme-surface-highest); } .v2 .plan-cell-input { width: 90px; padding: 0.25rem 0.5rem; background: var(--theme-surface-highest); border: none; border-radius: 0.375rem; font-family: Inter, sans-serif; font-size: 0.875rem; font-weight: 600; color: var(--theme-on-surface); text-align: right; outline: none; box-shadow: 0 0 0 1px rgba(161, 62, 42, 0.3); } .v2 .sub-plan-edit-hint { opacity: 0.5; flex-shrink: 0; } .v2 .category-card { background: var(--theme-surface-lowest); border-radius: 1.5rem; padding: 1.25rem; box-shadow: 0 12px 32px rgba(28, 28, 25, 0.04); cursor: pointer; transition: box-shadow 0.2s; } .v2 .category-card:hover { box-shadow: 0 16px 48px rgba(28, 28, 25, 0.08); } /* PHASE 31G.5 — dark-aware over-budget tint. Light mode keeps the original pale pink. Dark mode folds the tint onto a translucent danger-token background so the card no longer flashes pastel on a dark canvas (images #12, #16 from 2026-04-19 testing). */ .v2 .category-card.over-budget { background: #fff5f5; } html[data-theme="dark"] .v2 .category-card.over-budget { background: rgb(var(--color-danger-rgb) / 0.12); } .v2 .cat-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; gap: 0.5rem; } .v2 .cat-card-name { font-family: Manrope, sans-serif; font-size: 1rem; font-weight: 700; color: var(--theme-on-surface); display: flex; align-items: center; gap: 0.5rem; } .v2 .cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .v2 .cat-card-amount { font-family: Manrope, sans-serif; font-size: 0.9375rem; font-weight: 700; color: var(--theme-on-surface); text-align: right; white-space: nowrap; } .v2 .cat-card-amount small { font-size: 0.75rem; font-weight: 500; color: var(--theme-on-surface-variant); } .v2 .progress-bar-bg { height: 6px; background: var(--theme-surface-highest); border-radius: 999px; overflow: hidden; margin-bottom: 0.5rem; } .v2 .progress-bar-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; } .v2 .fill-green { background: #22c55e; } .v2 .fill-orange { background: #f59e0b; } .v2 .fill-red { background: var(--theme-error); } .v2 .cat-card-footer { display: flex; justify-content: space-between; font-size: 0.75rem; font-weight: 600; color: var(--theme-on-surface-variant); } .v2 .diff-positive { color: #22c55e; } .v2 .diff-negative { color: var(--theme-error); } /* Phase 29: animowany expand/collapse podkategorii (Planowanie). max-height + opacity zamiast display:none — subcategories rozwijają się płynnie zamiast skokowego pojawienia się. */ .v2 .cat-card-subs { margin-top: 0.75rem; overflow: hidden; max-height: 1200px; opacity: 1; transition: max-height 320ms var(--ease-ios), opacity 220ms ease, margin-top 260ms var(--ease-ios); } .v2 .cat-card-subs.hidden { display: block !important; /* override Tailwind .hidden { display: none } */ max-height: 0; opacity: 0; margin-top: 0; pointer-events: none; } .v2 .sub-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-top: 1px solid rgba(221, 192, 186, 0.15); } .v2 .sub-name { font-size: 0.8125rem; color: var(--theme-on-surface-variant); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 0.5rem; } .v2 .sub-amounts { display: flex; gap: 1rem; align-items: center; flex-shrink: 0; } .v2 .sub-plan-cell { font-size: 0.8125rem; color: var(--theme-on-surface-variant); font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.1rem 0.3rem; border-radius: 0.25rem; } .v2 .sub-plan-cell:hover { background: var(--theme-surface-highest); } .v2 .sub-actual { font-size: 0.8125rem; font-weight: 700; color: var(--theme-on-surface); min-width: 70px; text-align: right; } .v2 .cat-card-expand { text-align: center; padding-top: 0.5rem; color: var(--theme-on-surface-variant); } /* ── Phase 03 Categories View (v2 scoped) ── */ .v2 .tree-item { background: var(--theme-surface-lowest); border-radius: 1rem; margin-bottom: 0.75rem; overflow: hidden; transition: box-shadow 0.15s; box-shadow: 0 1px 2px rgba(28, 28, 25, 0.03), 0 8px 24px rgba(28, 28, 25, 0.05); border: 1px solid rgba(214, 204, 191, 0.4); } .v2 .tree-item.dragging { opacity: 0.9; box-shadow: 0 16px 48px rgba(28, 28, 25, 0.08); } .v2 .tree-main { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; min-height: 3.75rem; cursor: pointer; transition: background 0.15s; } .v2 .tree-main:hover { background: var(--theme-surface-low); } .v2 .tree-chevron { width: 20px; flex-shrink: 0; color: var(--theme-outline); transition: transform 0.2s; } .v2 .tree-item.expanded > .tree-main .tree-chevron { transform: rotate(180deg); } .v2 .tree-cat-info { flex: 1; min-width: 0; } .v2 .tree-cat-name { font-family: Manrope, sans-serif; font-size: 0.9375rem; font-weight: 700; color: var(--theme-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v2 .tree-cat-badge { font-size: 0.6875rem; color: var(--theme-on-surface-variant); margin-top: 0.125rem; font-weight: 500; } .v2 .tree-actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; } .v2 .tree-grab-handle { cursor: grab; color: var(--theme-outline); padding: 0 0.25rem; flex-shrink: 0; touch-action: none; } .v2 .tree-grab-handle:active { cursor: grabbing; } .v2 .tree-children { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .v2 .tree-item.expanded > .tree-children { max-height: 2000px; } .v2 .tree-children-inner { padding: 0.75rem 1rem 1rem 2.75rem; } .v2 .tree-child { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.5rem; border-top: 1px solid rgba(221, 192, 186, 0.1); background: transparent; border-left: none; border-radius: 0; margin-bottom: 0; } .v2 .tree-add-sub { padding: 0.5rem 0; border-top: 1px solid rgba(221, 192, 186, 0.1); } .v2 .archived-section-toggle { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: var(--theme-on-surface-variant); padding: 0.5rem 0; user-select: none; } .v2 .archived-section-toggle .chevron-sm { transition: transform 0.2s; color: var(--theme-outline); } .v2 .archived-section-toggle.open .chevron-sm { transform: rotate(180deg); } .v2 .archived-items { display: none; } .v2 .archived-section-toggle.open + .archived-items { display: block; } /* ── Desktop modals: centered overlay instead of bottom sheet ── */ @media (min-width: 768px) { .v2 #categoryAnalyticsModal.active, .v2 #statementImportModal.active, .v2 #iconPickerModal.active, .v2 #themePaletteModal.active { align-items: center; background: rgba(28, 28, 25, 0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 2rem; } .v2 #statementImportModal.active .modal-content { max-width: 64rem !important; border-radius: 1.5rem; } } /* ── Phase 03 Category Analytics Modal (v2 scoped) ── */ .v2 #analyticsScrollArea { overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(221, 192, 186, 0.5) transparent; } .v2 #analyticsScrollArea::-webkit-scrollbar { width: 4px; } .v2 #analyticsScrollArea::-webkit-scrollbar-track { background: transparent; } .v2 #analyticsScrollArea::-webkit-scrollbar-thumb { background: rgba(221, 192, 186, 0.5); border-radius: 10px; } /* ── Phase 04 Calendar — Editorial Sanctuary (v2 scoped) ── */ /* Nav bar (prev-arrow / Dziś-pill / title / next-arrow) */ .v2 .cal-nav { width: 100%; } .v2 .cal-nav-arrow { width: 36px; height: 36px; background: var(--theme-surface-low); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: none; cursor: pointer; padding: 0; } .v2 .cal-today-pill { background: var(--theme-primary); color: #fff; border: none; padding: 7px 14px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; flex-shrink: 0; } .v2 .cal-today-pill.cal-today-inert { opacity: 0.5; cursor: default; pointer-events: none; } .v2 .cal-nav-title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; } /* Calendar — tan outer tray with white rounded grid inside (matches mockup) */ .v2 #calendarGrid.cal-grid-wrap, .v2 .cal-grid-wrap { background: var(--theme-surface-low); border-radius: 20px; padding: 4px; display: block; } .v2 .cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); padding: 10px 4px; } .v2 .cal-dow__cell { text-align: center; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--theme-on-surface-variant); text-transform: uppercase; } .v2 .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; background: var(--theme-surface-lowest); border-radius: 16px; overflow: hidden; margin: 0; padding: 0; } .v2 .cal-cell { aspect-ratio: 0.95; background: var(--theme-surface-lowest); display: flex; flex-direction: column; padding: 7px 9px; cursor: pointer; transition: background 0.15s ease; border-top: 0; border-left: 0; border-right: 1px solid color-mix(in srgb, var(--theme-outline-variant) 45%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--theme-outline-variant) 45%, transparent); border-radius: 0; min-height: 0; overflow: hidden; position: relative; box-shadow: none; } .v2 .cal-cell:nth-child(7n) { border-right: none; } .v2 .cal-cell:nth-last-child(-n+7) { border-bottom: none; } .v2 .cal-cell:hover { background: color-mix(in srgb, var(--theme-primary) 4%, var(--theme-surface-lowest)); } .v2 .cal-cell.empty { background: var(--theme-surface-lowest); cursor: default; } .v2 .cal-cell.empty:hover { background: var(--theme-surface-lowest); } .v2 .cal-cell.today { background: color-mix(in srgb, var(--theme-primary) 18%, var(--theme-surface-lowest)); border-color: color-mix(in srgb, var(--theme-outline-variant) 45%, transparent); box-shadow: none; } .v2 .cal-cell.today .cal-day-num { color: var(--theme-primary); } .v2 .cal-cell.selected { background: color-mix(in srgb, var(--theme-primary) 18%, var(--theme-surface-lowest)); border-color: color-mix(in srgb, var(--theme-outline-variant) 45%, transparent); box-shadow: none; } .v2 .cal-cell.today.selected { background: color-mix(in srgb, var(--theme-primary) 18%, var(--theme-surface-lowest)); border-color: color-mix(in srgb, var(--theme-outline-variant) 45%, transparent); box-shadow: none; } .v2 .cal-day-num { font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700; color: var(--theme-on-surface); line-height: 1; } .v2 .cal-day-amounts { margin-top: 2px; line-height: 1.1; } .v2 .cal-day-exp { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 700; color: var(--theme-error); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .v2 .cal-day-inc { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 700; color: #4D7A52; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; margin-top: 1px; } /* Ensure first amount after day-num has consistent gap (JS doesn't wrap in .cal-day-amounts) */ .v2 .cal-day-exp { margin-top: 2px; } /* ── Inline day panel (always visible below calendar) ── */ .v2 #calendarDayPanel { position: relative; display: block !important; z-index: auto; margin-top: 20px; } @media (max-width: 767px) { .v2 .cal-nav-title { font-size: 17px; } } @media (min-width: 768px) { .v2 .cal-cell { padding: 10px 10px 8px; } .v2 .cal-day-num { font-size: 15px; } .v2 .cal-day-exp, .v2 .cal-day-inc { font-size: 11px; } } /* PHASE 31G.5 — desktop-only calendar day-number bump. At >=1024 px the mobile-tuned 15px numbers feel lost in the wider grid cells (image #14 from 2026-04-19 user testing). This block fires AFTER the 768px rule above and overrides it for desktop widths. Amount lines bumped proportionally to keep the visual hierarchy (number > amount) intact. Cells get a bit more vertical room so the bigger number doesn't crowd the amounts. */ @media (min-width: 1024px) { .v2 .cal-cell { padding: 12px 10px 10px; } .v2 .cal-day-num { font-size: 22px; } .v2 .cal-day-exp, .v2 .cal-day-inc { font-size: 13px; } } @media (min-width: 1280px) { .v2 #calendarDayPanel { position: sticky; top: 16px; align-self: start; margin-top: 0; } } .v2 .cal-day-inline { background: transparent; padding: 0; } .v2 .cal-day-headline { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .v2 .cal-day-info { flex: 1; min-width: 0; } .v2 .cal-day-eyebrow { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; color: var(--theme-primary); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 6px; } .v2 .cal-day-headtitle { font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--theme-on-surface); line-height: 1.25; } .v2 .cal-day-summary-amount { font-weight: 800; font-variant-numeric: tabular-nums; } .v2 .cal-day-summary-amount.expense { color: var(--theme-primary); } .v2 .cal-day-summary-amount.income { color: #4D7A52; } .v2 .cal-day-summary-meta { font-size: 14px; font-weight: 500; color: var(--theme-on-surface-variant); } .v2 .cal-day-summary-placeholder { font-size: 16px; font-weight: 500; color: var(--theme-on-surface-variant); } .v2 .cal-day-add { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; background: var(--theme-primary); color: white; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px rgba(196, 122, 90, 0.35); transition: transform 0.15s ease, opacity 0.15s ease; } .v2 .cal-day-add:hover { opacity: 0.92; } .v2 .cal-day-add:active { transform: scale(0.94); } .v2 .cal-day-add .material-symbols-outlined { font-size: 28px; font-variation-settings: 'FILL' 1, 'wght' 500; } .v2 .cal-day-empty { padding: 28px 18px; text-align: center; color: var(--theme-on-surface-variant); font-size: 14px; line-height: 1.5; background: var(--theme-surface-low); border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--theme-outline-variant) 60%, transparent); } /* Show correct empty-state copy per viewport (mobile has FAB, desktop has inline buttons) */ .v2 .cal-day-empty-desktop { display: none; } @media (min-width: 768px) { .v2 .cal-day-empty-mobile { display: none; } .v2 .cal-day-empty-desktop { display: inline; } } .v2 .cal-day-entries { padding-bottom: 120px; } @media (min-width: 768px) { .v2 .cal-day-entries { padding-bottom: 16px; } } /* Section labels separating Wydatki / Przychody buckets */ .v2 .cal-day-section { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--theme-on-surface-variant); margin: 14px 4px 8px; display: flex; align-items: center; gap: 10px; } .v2 .cal-day-section:first-child { margin-top: 2px; } .v2 .cal-day-section::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--theme-outline-variant) 60%, transparent); } .v2 .cal-day-section--expense { color: var(--theme-primary); } .v2 .cal-day-section--income { color: #4D7A52; } /* Income row — subtle green tint to distinguish from expense rows */ .v2 .cal-entry-item--income { background: color-mix(in srgb, #4D7A52 8%, var(--theme-surface-low)); } .v2 .cal-entry-icon--income { background: color-mix(in srgb, #4D7A52 14%, transparent); } /* Desktop-only: single "Dodaj" button inside day panel (mobile uses bottom-nav FAB) */ .v2 .cal-day-desktop-actions { display: none; } @media (min-width: 768px) { .v2 .cal-day-desktop-actions { display: flex; margin-top: 18px; } .v2 .cal-day-action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 18px; border: none; border-radius: 14px; font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 700; color: white; cursor: pointer; transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease; } .v2 .cal-day-action-btn.primary { background: linear-gradient(135deg, var(--theme-primary, #C47A5A), color-mix(in srgb, var(--theme-primary, #C47A5A) 82%, #8B4A2E)); box-shadow: 0 4px 14px rgba(196, 122, 90, 0.28); } .v2 .cal-day-action-btn:hover { opacity: 0.92; } .v2 .cal-day-action-btn:active { transform: scale(0.98); } } /* Inline add form inside day panel — tab switcher + close X */ .v2 .cal-inline-form--inpanel { margin-top: 18px; padding: 14px 0 0; background: transparent; border-radius: 0; border: none; } .v2 .cal-inline-form--inpanel .cal-inline-form-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; } .v2 .cal-inline-form-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--theme-surface-high); border-radius: 999px; } .v2 .cal-inline-form-tab { appearance: none; border: none; background: transparent; padding: 7px 16px; border-radius: 999px; font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 600; color: var(--theme-on-surface-variant); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .v2 .cal-inline-form-tab.active { background: var(--theme-surface-lowest); color: var(--theme-on-surface); box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .v2 .cal-inline-form-tab:not(.active):hover { color: var(--theme-on-surface); } /* Entry row — tapable card */ .v2 .cal-entry-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--theme-surface-low); border-radius: 14px; margin-bottom: 8px; } .v2 .cal-entry-icon { width: 40px; height: 40px; border-radius: 20px; background: color-mix(in srgb, var(--theme-primary) 15%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .v2 .cal-entry-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .v2 .cal-entry-name { font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 700; color: var(--theme-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v2 .cal-entry-sub { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--theme-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v2 .cal-entry-amount { font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .v2 .cal-entry-amount.expense { color: var(--theme-error); } .v2 .cal-entry-amount.income { color: #4D7A52; } .v2 .cal-entry-edit-btn, .v2 .cal-entry-del-btn { width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; color: var(--theme-on-surface-variant); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .v2 .cal-entry-edit-btn:hover { background: var(--theme-surface-high); color: var(--theme-primary); } .v2 .cal-entry-del-btn:hover { background: var(--theme-error-container, #FFDAD6); color: var(--theme-error); } /* On mobile inside swipe-row, hide inline edit/del — swipe replaces them */ .v2 .swipe-row .cal-entry-edit-btn, .v2 .swipe-row .cal-entry-del-btn { display: none; } /* When wrapped in .swipe-row (mobile), collapse vertical margin */ .v2 .swipe-row .cal-entry-item { margin-bottom: 0 !important; } .v2 .swipe-row { margin-bottom: 8px; } /* Inline form used inside the add sheet */ .v2 .cal-inline-form { background: transparent; border-radius: 0; padding: 0; margin-top: 8px; } .v2 .cal-inline-form .form-group { margin-bottom: 12px; } /* ── Add & Edit entry bottom sheets (shared shell) ── */ .v2 #calAddSheet, .v2 #calEditSheet { position: fixed; inset: 0; z-index: 1100; display: none; align-items: flex-end; justify-content: center; } .v2 #calAddSheet.active, .v2 #calEditSheet.active { display: flex; } .v2 .cal-add-backdrop { position: absolute; inset: 0; background: rgba(28, 28, 25, 0.38); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: modalOverlayIn 0.2s ease; } .v2 .cal-add-panel { position: relative; width: 100%; max-width: 520px; background: var(--theme-surface-lowest); border-radius: 24px 24px 0 0; padding: 6px 16px calc(20px + env(safe-area-inset-bottom)); max-height: 88vh; overflow-y: auto; animation: sheetSlideUp 0.28s cubic-bezier(0.32, 0.72, 0, 1); } @media (min-width: 768px) { .v2 #calAddSheet, .v2 #calEditSheet { align-items: center; padding: 40px 24px; } .v2 .cal-add-panel { border-radius: 24px; max-height: min(86vh, 720px); padding: 16px 20px 20px; box-shadow: 0 24px 64px rgba(28, 28, 25, 0.18); } } .v2 .cal-add-handle { width: 40px; height: 4px; background: var(--theme-outline-variant); border-radius: 2px; margin: 4px auto 14px; } @media (min-width: 768px) { .v2 .cal-add-handle { display: none; } } .v2 .cal-add-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: var(--theme-surface-high); border: none; color: var(--theme-on-surface-variant); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; } .v2 .cal-add-close:hover { background: var(--theme-surface-highest); color: var(--theme-on-surface); } .v2 .cal-add-tabs { display: flex; gap: 4px; padding: 4px; background: var(--theme-surface-low); border-radius: 999px; margin: 4px 0 10px; } .v2 .cal-add-tab { flex: 1; padding: 9px 14px; border: none; background: transparent; border-radius: 999px; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; color: var(--theme-on-surface-variant); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .v2 .cal-add-tab.active { background: var(--theme-primary); color: white; box-shadow: 0 4px 12px rgba(196, 122, 90, 0.25); } .v2 .cal-add-content { padding-top: 0; } .v2 .cal-add-content .form-group { margin-bottom: 10px; } .v2 .cal-add-content .form-group label { margin-bottom: 4px; font-size: 11px; } .v2 .cal-add-content .category-grid { gap: 6px; } .v2 .cal-edit-title { font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 800; color: var(--theme-on-surface); margin: 4px 0 10px; letter-spacing: -0.01em; } .v2 .cal-edit-actions { display: flex; gap: 8px; align-items: stretch; margin-top: 16px; } .v2 .cal-edit-delete { width: 48px; flex-shrink: 0; background: transparent; border: 1px solid var(--theme-outline-variant); color: var(--theme-error); border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .v2 .cal-edit-delete:hover { background: color-mix(in srgb, var(--theme-error) 8%, transparent); border-color: var(--theme-error); } /* ── Expense-entry view as bottom sheet (mobile only — desktop uses full view via sidebar) ── */ .v2 .entry-sheet-handle, .v2 .entry-sheet-close { display: none; } .v2 body.entry-sheet-open, body.v2.entry-sheet-open { overflow: hidden; } body.entry-sheet-open .view.entry-sheet-hidden { /* Keep the origin view in DOM but visually hidden behind the backdrop */ pointer-events: none; } body.entry-sheet-open::before { content: ''; position: fixed; inset: 0; background: rgba(28, 28, 25, 0.38); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1099; animation: modalOverlayIn 0.2s ease; } body.entry-sheet-open #expense-entry { display: block !important; position: fixed; bottom: 0; left: 0; right: 0; top: auto; z-index: 1100; background: var(--theme-surface-lowest); border-radius: 24px 24px 0 0; /* Reserve top strip for handle + close button so content never overlaps */ padding: 48px 16px calc(24px + env(safe-area-inset-bottom)); max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; animation: sheetSlideUp 0.28s cubic-bezier(0.32, 0.72, 0, 1); box-shadow: 0 -8px 40px rgba(28, 28, 25, 0.12); margin: 0; transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1); will-change: transform; } body.entry-sheet-open #expense-entry .max-w-3xl { max-width: none; } body.entry-sheet-open #expense-entry .max-w-3xl > .space-y-8 { background: transparent; border-radius: 0; padding: 0; box-shadow: none; } body.entry-sheet-open #expense-entry .max-w-3xl > .space-y-8 > * + * { margin-top: 1.25rem; } /* Grab handle — sits in the reserved top strip, centered */ body.entry-sheet-open #expense-entry .entry-sheet-handle { display: block; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; background: var(--theme-outline-variant); border-radius: 2px; margin: 0; } /* Close (X) button — also in the top strip, right corner */ body.entry-sheet-open #expense-entry .entry-sheet-close { display: flex; position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border-radius: 50%; background: var(--theme-surface-high); border: none; color: var(--theme-on-surface-variant); align-items: center; justify-content: center; cursor: pointer; z-index: 3; } body.entry-sheet-open #expense-entry .entry-sheet-close:hover { background: var(--theme-surface-highest); color: var(--theme-on-surface); } /* Hide "Ostatnie wpisy" list in sheet (user is in quick-add flow) */ body.entry-sheet-open #expense-entry section.mt-8 { display: none; } /* Tighter inner layout: reduce big amount input size on mobile sheet */ body.entry-sheet-open #expense-entry #amountInput { font-size: 42px; } body.entry-sheet-open #expense-entry .flex.items-center.justify-between.border-b { padding-bottom: 12px; } /* ── v2 Tutorial modal — Editorial Sanctuary ── */ .v2 #tutorialModal .modal-content { max-width: 420px; padding: 28px 28px 20px; border-radius: 2rem 2rem 0 0; background: var(--theme-surface); } @media (min-width: 768px) { .v2 #tutorialModal .modal-content { border-radius: 2rem; margin: auto; } } .v2 .tutorial-step { text-align: center; padding: 0 4px; } .v2 .tutorial-icon-wrap { width: 80px; height: 80px; border-radius: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: 0 12px 32px rgba(28, 28, 25, 0.12); } .v2 .tutorial-icon-wrap svg { width: 36px; height: 36px; stroke-width: 1.8; } .v2 .tutorial-title { font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 800; text-align: center; margin-bottom: 10px; color: var(--theme-on-surface); letter-spacing: -0.02em; } .v2 .tutorial-desc { font-size: 14px; color: var(--theme-on-surface-variant); text-align: center; line-height: 1.65; margin-bottom: 16px; } .v2 .tutorial-details { list-style: none; padding: 0; margin: 0 0 12px; text-align: left; } .v2 .tutorial-details li { padding: 10px 0 10px 28px; font-size: 13px; color: var(--theme-on-surface-variant); border-bottom: 1px solid rgba(221, 192, 186, 0.3); position: relative; } .v2 .tutorial-details li:last-child { border-bottom: none; } .v2 .tutorial-details li::before { content: ''; position: absolute; left: 6px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--theme-primary); } .v2 .tutorial-tip { background: rgba(161, 62, 42, 0.06); border-radius: 0.75rem; padding: 10px 14px; font-size: 12px; color: var(--theme-primary); margin-bottom: 8px; } /* Navigation row */ .v2 .tutorial-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; gap: 8px; } /* Dots */ .v2 .tutorial-dots { display: flex; gap: 6px; align-items: center; } .v2 .tutorial-dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--theme-surface-highest); transition: all 0.25s ease; } .v2 .tutorial-dot.active { width: 24px; background: var(--theme-primary); } /* Przycisk Dalej/Zaczynamy */ .v2 #tutorialNextBtn { padding: 10px 20px; background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-container) 100%); color: white; border: none; border-radius: 9999px; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: 0 4px 16px rgba(161, 62, 42, 0.3); } .v2 #tutorialBackBtn { padding: 10px 16px; background: var(--theme-surface-high); color: var(--theme-on-surface-variant); border: none; border-radius: 9999px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px; cursor: pointer; } .v2 .tutorial-skip { background: none; border: none; font-size: 12px; color: var(--theme-outline); cursor: pointer; padding: 4px 8px; font-family: 'Inter', sans-serif; } /* Privacy consent modal */ /* 31G.2 — same --theme-surface-lowest → --color-surface migration as the base .modal-content rule above. This specific override shadows the base background, so the migration must be repeated here to keep dark-mode rendering consistent. */ .v2 #privacyConsentModal .modal-content { max-width: 440px; background: var(--color-surface); } .v2 #privacyConsentModal .modal-header { font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 800; color: var(--color-text); } .v2 #privacyConsentModal .btn-gradient { background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-container) 100%); color: white; border: none; border-radius: 9999px; padding: 14px; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; width: 100%; box-shadow: 0 6px 20px rgba(161, 62, 42, 0.3); } /* ── v2 Spotlight — Editorial Sanctuary ── */ .v2 .spotlight-overlay { position: fixed; inset: 0; z-index: 10000; pointer-events: none; } .v2 .spotlight-hole { position: absolute; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(28, 28, 25, 0.55); pointer-events: none; } .v2 .spotlight-tooltip { position: fixed; width: 270px; background: var(--theme-surface-lowest); border-radius: 1rem; padding: 16px; box-shadow: 0 16px 48px rgba(28, 28, 25, 0.15); pointer-events: auto; z-index: 10001; } .v2 .spotlight-tooltip-title { font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 800; color: var(--theme-on-surface); margin-bottom: 6px; } .v2 .spotlight-tooltip-desc { font-size: 13px; color: var(--theme-on-surface-variant); line-height: 1.55; margin-bottom: 12px; } .v2 .spotlight-tooltip-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .v2 .spotlight-step-info { font-size: 11px; color: var(--theme-outline); font-weight: 600; } .v2 .spotlight-tooltip-arrow { position: absolute; width: 14px; height: 14px; background: var(--theme-surface-lowest); transform: rotate(45deg); box-shadow: -2px -2px 4px rgba(28, 28, 25, 0.04); } /* ── Annual Statistics View (v2 only) ─────────────────────────────── */ /* Year pill navigation */ .v2 .annual-year-pill { display: flex; align-items: center; justify-content: space-between; background: var(--theme-surface-low); border-radius: 999px; padding: 0.25rem; margin-bottom: 1.5rem; } .v2 .annual-year-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: none; background: transparent; color: var(--theme-on-surface-variant); cursor: pointer; transition: background 0.15s; font-size: 24px; } .v2 .annual-year-btn:hover { background: var(--theme-surface-highest); color: var(--theme-primary); } .v2 .annual-year-label { font-family: 'Manrope', sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--theme-primary); letter-spacing: -0.025em; min-width: 4rem; text-align: center; } /* Desktop page header */ .v2 .annual-page-header { display: none; } @media (min-width: 768px) { .v2 .annual-page-header { display: block; margin-bottom: 2rem; } .v2 .annual-page-header h2 { font-family: 'Manrope', sans-serif; font-size: 1.875rem; font-weight: 800; color: var(--theme-primary); letter-spacing: -0.025em; line-height: 1.2; } .v2 .annual-page-header p { font-size: 0.875rem; color: var(--theme-on-surface-variant); margin-top: 0.25rem; } } /* Section wrapper */ .v2 .annual-section { margin-bottom: 1.5rem; } .v2 .annual-section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1rem; } .v2 .annual-section-title { font-family: 'Manrope', sans-serif; font-size: 1.0625rem; font-weight: 700; color: var(--theme-on-surface); } .v2 .annual-section-subtitle { font-size: 0.8125rem; color: var(--theme-on-surface-variant); margin-top: 0.125rem; } /* Chart legend inline (Przychody/Wydatki) */ .v2 .annual-chart-legend { display: flex; gap: 1rem; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--theme-on-surface-variant); flex-shrink: 0; } .v2 .annual-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; } /* Chart card */ .v2 .annual-chart-card { background: var(--theme-surface-lowest); border-radius: 0.75rem; padding: 1.5rem; box-shadow: 0 12px 32px rgba(28, 28, 25, 0.04); } /* Bento summary grid — JS fills #annualBarSummary, CSS styles .annual-bento-* inside it */ .v2 .annual-bento-wrap .annual-summary-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1rem 0 1.5rem; } @media (min-width: 768px) { .v2 .annual-bento-wrap .annual-summary-bar { grid-template-columns: 1fr 1fr 1fr; gap: 1rem; } } .v2 .annual-bento-wrap .annual-summary-item { background: var(--theme-surface-low); border-radius: 0.75rem; padding: 1rem 1.25rem; } .v2 .annual-bento-wrap .annual-summary-item:last-child { background: rgba(161, 62, 42, 0.08); grid-column: 1 / -1; } .v2 .annual-bento-wrap .annual-summary-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--theme-on-surface-variant); margin-bottom: 0.25rem; } .v2 .annual-bento-wrap .annual-summary-value { font-family: 'Manrope', sans-serif; font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.02em; } /* Category chart legend (custom list built by JS) */ .v2 .chart-legend { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; } .v2 .legend-item { display: flex; align-items: center; gap: 0.75rem; justify-content: space-between; } .v2 .legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .v2 .legend-name { font-size: 0.875rem; font-weight: 600; color: var(--theme-on-surface); flex: 1; } .v2 .legend-amount { font-family: 'Manrope', sans-serif; font-size: 0.875rem; font-weight: 700; color: var(--theme-on-surface); } /* Annual cards grid (category summary table) */ .v2 .annual-cards-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } @media (min-width: 768px) { .v2 .annual-cards-grid { grid-template-columns: 1fr 1fr; gap: 1rem; } } @media (min-width: 1280px) { .v2 .annual-cards-grid { grid-template-columns: 1fr 1fr 1fr; gap: 1rem; } } /* Desktop: two-column layout for bar chart + doughnut */ @media (min-width: 1024px) { .v2 .annual-charts-row { display: grid; grid-template-columns: 3fr 2fr; gap: 1.5rem; align-items: start; } .v2 .annual-charts-row .annual-section { margin-bottom: 0; } } /* Desktop: bento summary 3-column row — matches category cards layout */ @media (min-width: 768px) { .v2 .annual-bento-wrap .annual-summary-item:last-child { grid-column: auto; } } /* ── Icon Picker (v2 scoped) ── */ .v2 .icon-pick-btn { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--theme-surface-low); border-radius: 1rem; border: none; cursor: pointer; transition: all 0.15s; } .v2 .icon-pick-btn:hover { background: var(--theme-error-container); } .v2 .icon-pick-btn.selected { background: var(--theme-primary); color: #ffffff; } .v2 .icon-pick-btn .material-symbols-outlined { font-size: 24px; } /* -- Annual Range Pills (Phase 6) -- */ .v2 .annual-range-pills { display: flex; background: var(--theme-surface-high); border-radius: 1rem; padding: 4px; margin-bottom: 16px; } .v2 .annual-range-pill { flex: 1; padding: 8px 16px; border: none; background: transparent; border-radius: 0.75rem; cursor: pointer; font-weight: 400; font-size: 14px; font-family: 'Inter', sans-serif; color: var(--theme-on-surface-variant); transition: all 0.2s; } .v2 .annual-range-pill.active { background: var(--theme-primary); color: white; font-weight: 600; box-shadow: 0 2px 8px rgba(196, 122, 90, 0.25); } @media (max-width: 480px) { .v2 .annual-range-pill { padding: 6px 8px; font-size: 13px; } } /* -- Annual Month Filter Label (Phase 6) -- */ .v2 .annual-month-filter-label { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--theme-secondary-container, #f0e6d6); border-radius: 0.5rem; margin-bottom: 16px; font-size: 14px; font-family: 'Inter', sans-serif; color: var(--theme-on-secondary-container, #1d1b16); } .v2 .annual-filter-dismiss { width: 32px; height: 32px; border: none; background: transparent; cursor: pointer; color: var(--theme-on-surface-variant); display: flex; align-items: center; justify-content: center; border-radius: 50%; } .v2 .annual-filter-dismiss:hover { background: rgba(0, 0, 0, 0.06); } /* -- Annual Analytics Fullscreen Panel (Phase 6) -- */ .v2 .annual-analytics-panel { position: absolute; top: 0; left: 0; right: 0; min-height: 100%; background: var(--theme-surface); z-index: 10; padding: 24px; overflow-y: auto; } .v2 .annual-analytics-panel:not(.hidden) { animation: annualPanelSlideIn 0.25s cubic-bezier(0.32, 0.72, 0, 1); } @keyframes annualPanelSlideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* -- Annual Analytics Panel Inner Layout (Phase 6, Plan 02) -- */ .v2 .annual-panel-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; } .v2 .annual-panel-back-btn { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; border: none; background: var(--theme-surface-low); color: var(--theme-on-surface-variant); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; margin-top: 4px; } .v2 .annual-panel-back-btn:hover { background: var(--theme-surface-high); } .v2 .annual-panel-title-block { flex: 1; } .v2 .annual-panel-superlabel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--theme-on-surface-variant); font-family: 'Inter', sans-serif; margin-bottom: 4px; } .v2 .annual-panel-category-name { font-size: 28px; font-weight: 700; font-family: 'Manrope', sans-serif; color: var(--theme-primary); letter-spacing: -0.025em; line-height: 1.2; } /* KPI row */ .v2 .annual-panel-kpi-row { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 24px; } .v2 .annual-panel-kpi-card { background: var(--theme-surface-low); border-radius: 0.75rem; padding: 16px 20px; } .v2 .annual-panel-kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--theme-on-surface-variant); font-family: 'Inter', sans-serif; margin-bottom: 8px; } .v2 .annual-panel-kpi-value { font-size: 28px; font-weight: 700; font-family: 'Manrope', sans-serif; color: var(--theme-on-surface); line-height: 1.2; } .v2 .annual-panel-kpi-accent { color: var(--theme-primary); } /* Sections */ .v2 .annual-panel-section { margin-bottom: 24px; } .v2 .annual-panel-section-title { font-size: 17px; font-weight: 700; font-family: 'Manrope', sans-serif; color: var(--theme-on-surface); line-height: 1.2; margin-bottom: 16px; } /* Subcategory breakdown rows */ .v2 .annual-panel-breakdown-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--theme-surface-low); border-radius: 0.75rem; margin-bottom: 8px; } .v2 .annual-panel-breakdown-name { font-size: 14px; font-weight: 400; font-family: 'Inter', sans-serif; color: var(--theme-on-surface); } .v2 .annual-panel-breakdown-pct { font-size: 11px; font-weight: 700; font-family: 'Inter', sans-serif; color: var(--theme-on-surface-variant); margin-top: 2px; } .v2 .annual-panel-breakdown-right { text-align: right; } .v2 .annual-panel-breakdown-amount { font-size: 14px; font-weight: 700; font-family: 'Manrope', sans-serif; color: var(--theme-on-surface); } .v2 .annual-panel-breakdown-bar-track { width: 96px; height: 4px; background: var(--theme-surface-highest); border-radius: 2px; margin-top: 4px; margin-left: auto; } .v2 .annual-panel-breakdown-bar-fill { height: 4px; background: var(--theme-primary); border-radius: 2px; max-width: 100%; } /* Empty state */ .v2 .annual-panel-empty { font-size: 14px; font-weight: 400; font-family: 'Inter', sans-serif; color: var(--theme-on-surface-variant); text-align: center; padding: 24px 16px; } /* Dashboard grid (2-col desktop, 1-col mobile) */ .v2 .annual-panel-dashboard-grid { display: flex; flex-direction: column; gap: 0; } @media (min-width: 768px) { .v2 .annual-panel-dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } } .v2 .annual-panel-col-left, .v2 .annual-panel-col-right { min-width: 0; } /* KPI trend indicator */ .v2 .annual-panel-kpi-trend { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; } .v2 .annual-panel-kpi-trend--up { color: var(--theme-error, #BA1A1A); } .v2 .annual-panel-kpi-trend--down { color: var(--theme-tertiary, #8B7355); } .v2 .annual-panel-kpi-trend--flat { color: var(--theme-on-surface-variant); } /* Chart legend */ .v2 .annual-panel-chart-legend { display: flex; gap: 16px; margin-bottom: 12px; font-size: 12px; color: var(--theme-on-surface-variant); } .v2 .annual-panel-legend-item { display: flex; align-items: center; gap: 6px; } .v2 .annual-panel-legend-dot { width: 8px; height: 8px; border-radius: 50%; } .v2 .annual-panel-legend-dot--current { background: var(--theme-primary); } .v2 .annual-panel-legend-dot--prev { background: var(--theme-primary); opacity: 0.3; } /* Min/Max row */ .v2 .annual-panel-minmax-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; } .v2 .annual-panel-minmax-card { background: var(--theme-surface-low); border-radius: 0.75rem; padding: 12px 16px; } .v2 .annual-panel-minmax-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--theme-on-surface-variant); margin-bottom: 4px; } .v2 .annual-panel-minmax-value { font-size: 20px; font-weight: 700; color: var(--theme-on-surface); } .v2 .annual-panel-minmax-month { font-size: 11px; color: var(--theme-on-surface-variant); margin-top: 2px; } /* Manage button */ .v2 .annual-panel-manage-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px; margin-top: 16px; border: 1px dashed var(--theme-outline-variant); border-radius: 0.75rem; background: transparent; color: var(--theme-on-surface-variant); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; } .v2 .annual-panel-manage-btn:hover { background: var(--theme-surface-low); color: var(--theme-on-surface); } /* Enhanced subcategory row icon and meta */ .v2 .annual-panel-breakdown-icon { font-size: 20px; color: var(--theme-primary); margin-right: 12px; flex-shrink: 0; } .v2 .annual-panel-breakdown-meta { font-size: 11px; color: var(--theme-on-surface-variant); margin-top: 2px; } /* ── Bottom nav: force fixed positioning and safe-area-aware content padding ── */ /* Ensures the nav stays fixed on iOS Safari even when backdrop-filter is present on siblings */ @media (max-width: 767px) { .v2 #bottomNav { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 900 !important; /* Force GPU layer to prevent iOS scroll-related positioning glitches */ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); /* Prevent the nav from being hidden behind the virtual keyboard */ transition: none; } /* Ensure the main content wrapper always has enough bottom clearance to account for the nav bar height (~64px) plus iOS safe area inset */ .v2 .md\:ml-64 { padding-bottom: max(6rem, calc(64px + env(safe-area-inset-bottom, 0px))) !important; } } /* Increase chart height for better readability */ .v2 .annual-panel-chart-wrap { position: relative; height: 200px; margin-bottom: 8px; } /* ─────────────────────────────────────────────────────────────── Phase 28: :focus-visible global — keyboard users get a visible focus ring on every interactive element; mouse/touch users keep a clean, ringless interaction (browser handles :focus-visible heuristics so the ring appears only on keyboard navigation). ─────────────────────────────────────────────────────────────── */ .v2 button:focus-visible, .v2 a:focus-visible, .v2 [role="button"]:focus-visible, .v2 [role="menuitem"]:focus-visible, .v2 input:focus-visible, .v2 select:focus-visible, .v2 textarea:focus-visible, .v2 [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--theme-primary, #C47A5A); outline-offset: 2px; border-radius: 6px; } /* ═══════════════════════════════════════════════════════════════════ Phase 29: Tier 2 navigation animations ═══════════════════════════════════════════════════════════════════ */ /* 2.1 — directional view transitions override viewFadeIn. switchView() adds .view-enter-forward or .view-enter-back depending on where the new view sits in VIEW_ORDER relative to the previous. */ .view.active.view-enter-forward { animation: viewEnterForward 300ms var(--ease-ios); } .view.active.view-enter-back { animation: viewEnterBack 300ms var(--ease-ios); } @keyframes viewEnterForward { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } @keyframes viewEnterBack { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } } /* 2.2 — FAB ripple: półprzezroczysty biały krąg rozchodzi się z punktu tapu. Wymaga position: relative + overflow: hidden na .fab-circle; sam ripple span jest wstrzykiwany z JS (ui.js setupEventListeners). */ .v2 .bottom-nav-fab .fab-circle { position: relative; overflow: hidden; } .v2 .fab-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.55); transform: scale(0); pointer-events: none; animation: fabRipple 620ms var(--ease-decelerate); } @keyframes fabRipple { to { transform: scale(3.2); opacity: 0; } } /* 2.3 — month-nav slide: motion.js::slideSwapText toggles the classes below to swap text with a directional slide (left when nav → forward, right when nav → back). */ .ms-leave-forward { animation: msLeaveForward 200ms var(--ease-ios) forwards; } .ms-enter-forward { animation: msEnterForward 240ms var(--ease-ios) forwards; } .ms-leave-back { animation: msLeaveBack 200ms var(--ease-ios) forwards; } .ms-enter-back { animation: msEnterBack 240ms var(--ease-ios) forwards; } @keyframes msLeaveForward { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-12px); } } @keyframes msEnterForward { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } } @keyframes msLeaveBack { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(12px); } } @keyframes msEnterBack { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } /* ═══════════════════════════════════════════════════════════════════ Phase 29: Tier 4 gesture animations ═══════════════════════════════════════════════════════════════════ */ /* 4.2 — lock-in: scale bounce po wyborze kategorii. Sekwencja 1 → 0.94 → 1.04 → 1 daje fizyczne "kliknięcie w miejsce". Krzywa back-out dla delikatnego overshoot. */ .lock-in { animation: lockInBounce 420ms cubic-bezier(0.175, 0.885, 0.32, 1.275); } @keyframes lockInBounce { 0% { transform: scale(1); } 30% { transform: scale(0.94); } 70% { transform: scale(1.04); } 100% { transform: scale(1); } } /* 4.1 — swipe-to-delete: wrapper ze strefą "Usuń" w tle i przesuwaną warstwą karty na wierzchu. `touch-action: pan-y` pozwala scrollować listę pionowo, ale horyzontalny drag obsługujemy w JS. */ .swipe-row { position: relative; overflow: hidden; border-radius: 1rem; margin-bottom: 8px; } .swipe-row .swipe-reveal { position: absolute; inset: 0; background: var(--theme-error); color: white; display: flex; align-items: center; justify-content: flex-end; padding-right: 20px; font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; border-radius: 1rem; } .swipe-row .swipe-reveal .material-symbols-outlined { font-size: 20px; margin-right: 6px; } .swipe-row .swipe-front { position: relative; z-index: 2; touch-action: pan-y; user-select: none; -webkit-user-select: none; transition: transform 260ms var(--ease-ios); /* margin-bottom przeniesiony do .swipe-row, żeby reveal też był "wysoki" */ margin-bottom: 0 !important; } .swipe-row .swipe-front.swipe-dragging { transition: none; } /* Gdy karta jest w swipe-row (mobile), ukryj ikonę kosza — swipe zastępuje klik. */ .swipe-row .swipe-front button[aria-label="Usuń"] { display: none; } /* ═══════════════════════════════════════════════════════════════════ Phase 29: motion foundation — `prefers-reduced-motion: reduce` collapses every animation and transition to ~0 duration. Previously only landing pages honored this preference; the app itself did not (WCAG 2.3.3 gap). — `.rm-sim` body class emulates the same behavior for the in-app toggle / test scenarios. ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; } } body.rm-sim, body.rm-sim *, body.rm-sim *::before, body.rm-sim *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; } /* ===== GOALS (Phase 30B) ===== */ #goals { position: relative; padding-bottom: 120px; } .goals-fab { position: fixed; right: 20px; bottom: 96px; display: inline-flex; align-items: center; gap: 6px; padding: 12px 18px; border-radius: 999px; background: var(--md-sys-color-primary, #C47A5A); color: #fff; border: none; cursor: pointer; font-weight: 700; box-shadow: 0 6px 16px rgba(196, 122, 90, 0.35); z-index: 50; } @media (min-width: 768px) { .goals-fab { bottom: 32px; } } .goal-card { background: var(--md-sys-color-surface, #fff); border-radius: 24px; padding: 16px; border: 1px solid rgba(160, 149, 133, 0.2); display: flex; gap: 12px; align-items: center; cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease; } .goal-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .goal-card-delayed { border: 1.5px solid #E89834; } .goal-card .goal-icon-circle { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .goal-card .goal-progress-bar { height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.06); margin-top: 8px; overflow: hidden; } .goal-card .goal-progress-bar-fill { height: 100%; transition: width 240ms ease; } .goals-hero-bar { background: linear-gradient(135deg, var(--md-sys-color-primary, #C47A5A), var(--md-sys-color-primary-container, #D4A088)); color: #fff; border-radius: 24px; padding: 24px; margin-bottom: 16px; } .goals-hero-bar .amount { font-family: 'Manrope', sans-serif; font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .goals-hero-bar .label { opacity: 0.88; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; margin-bottom: 8px; } .goal-circular { width: 200px; height: 200px; position: relative; margin: 0 auto; } .goal-circular svg { transform: rotate(-90deg); width: 100%; height: 100%; } .goal-circular .goal-circular-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .goal-circular .goal-circular-pct { font-family: 'Manrope', sans-serif; font-size: 42px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .goal-circular .goal-circular-label { font-size: 12px; color: var(--md-sys-color-on-surface-variant, #5E5244); margin-top: 4px; } .goal-circular--delayed { width: 180px; height: 180px; } .goal-circular--delayed .goal-circular-pct { color: #E89834; } .goal-timeline-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 12px; } .goal-timeline-cell { width: 30px; height: 30px; border-radius: 50%; margin: 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; } .goal-timeline-cell.done { background: var(--md-sys-color-primary, #C47A5A); color: #fff; } .goal-timeline-cell.current { background: rgba(196, 122, 90, 0.16); border: 2px solid var(--md-sys-color-primary, #C47A5A); } .goal-timeline-cell.future { background: var(--md-sys-color-surface-container-low, #F5F0EB); } .goal-timeline-cell.missed { background: #E89834; color: #fff; } .goal-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; } .goal-stat-cell { background: var(--md-sys-color-surface-container-low, #F5F0EB); border-radius: 14px; padding: 12px; text-align: center; } .goal-stat-cell .kicker { font-size: 9px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--md-sys-color-on-surface-variant, #5E5244); font-weight: 700; } .goal-stat-cell .value { font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 800; margin-top: 4px; } .goal-template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 16px; } .goal-template-tile { padding: 14px 6px; border-radius: 16px; border: 1.5px solid var(--md-sys-color-outline-variant, #D6CCBF); background: var(--md-sys-color-surface, #fff); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--md-sys-color-on-surface, #2C2418); transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .goal-template-tile .material-symbols-outlined { color: var(--md-sys-color-on-surface, #2C2418); transition: color 120ms ease; } .goal-template-tile.active { background: rgba(196, 122, 90, 0.10); border-color: var(--md-sys-color-primary, #C47A5A); color: var(--md-sys-color-primary, #C47A5A); } .goal-template-tile.active .material-symbols-outlined { color: var(--md-sys-color-primary, #C47A5A); } /* Custom month-picker cells (Step 2 date mode) */ .goal-month-cell { padding: 14px 8px; border-radius: 12px; border: 1.5px solid transparent; background: var(--md-sys-color-surface-container-low, #F5F0EB); color: var(--md-sys-color-on-surface, #2C2418); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; text-transform: capitalize; } .goal-month-cell:not(:disabled):hover { background: var(--md-sys-color-surface-container-high, #EAE2D9); } .goal-month-cell.active { background: rgba(196, 122, 90, 0.10); border-color: var(--md-sys-color-primary, #C47A5A); color: var(--md-sys-color-primary, #C47A5A); font-weight: 800; } .goal-month-cell.disabled { opacity: 0.35; cursor: not-allowed; } .goal-template-tile .template-name { font-size: 12px; font-weight: 600; } .goal-progress-dots { display: flex; gap: 6px; align-items: center; } .goal-progress-dots .dot { flex: 1; height: 4px; border-radius: 2px; background: rgba(160, 149, 133, 0.4); transition: background 200ms ease; } .goal-progress-dots .dot.active { background: var(--md-sys-color-primary, #C47A5A); } .goal-new-footer { /* Inline, not fixed — sits at the end of the step content instead of hovering over form fields. Bottom spacing clears the mobile bottom-nav (~88px + safe-area) so the button doesn't get cut off on the last step when the form is short. */ margin-top: 24px; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } @media (min-width: 768px) { .goal-new-footer { padding-bottom: 24px; } } .goal-new-primary { width: 100%; padding: 16px; border-radius: 999px; background: var(--md-sys-color-primary, #C47A5A); color: #fff; border: none; cursor: pointer; font-weight: 700; font-size: 16px; box-shadow: 0 6px 16px rgba(196, 122, 90, 0.35); transition: opacity 120ms ease; } .goal-new-primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; } /* ===== GOALS — polish (post-T30B.7 user feedback) ===== */ /* Bump FAB above bottom-nav (was 96, hidden under nav on mobile) */ .goals-fab { bottom: 124px; } @media (min-width: 768px) { .goals-fab { bottom: 32px; } } /* Months card (Step 2) — white surface, ample padding, subtle border */ .goal-months-card { background: var(--md-sys-color-surface, #fff); border: 1px solid var(--md-sys-color-outline-variant, #D6CCBF); border-radius: 24px; padding: 28px 24px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } /* Live rate pill (Step 2) — shows monthly contribution as duration changes */ .goal-rate-pill { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; padding: 14px 16px; border-radius: 14px; background: rgba(196, 122, 90, 0.08); border: 1px solid rgba(196, 122, 90, 0.18); } .goal-rate-pill-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant, #5E5244); } .goal-rate-pill-value { font-family: 'Manrope', var(--font-headline, system-ui), sans-serif; font-weight: 800; font-size: 22px; color: var(--md-sys-color-primary, #C47A5A); letter-spacing: -0.01em; line-height: 1; } /* Slider row: bound labels at both ends */ .goal-slider-row { display: flex; align-items: center; gap: 12px; } .goal-slider-bound { font-size: 12px; font-weight: 700; color: var(--md-sys-color-on-surface-variant, #5E5244); min-width: 18px; text-align: center; } /* Custom range slider — primary track with white thumb */ .goal-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; outline: none; background: linear-gradient(to right, var(--md-sys-color-primary, #C47A5A) 0%, var(--md-sys-color-primary, #C47A5A) calc((var(--val, 12) - 3) / 57 * 100%), rgba(160, 149, 133, 0.3) calc((var(--val, 12) - 3) / 57 * 100%), rgba(160, 149, 133, 0.3) 100%); cursor: pointer; } .goal-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--md-sys-color-primary, #C47A5A); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); cursor: pointer; } .goal-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--md-sys-color-primary, #C47A5A); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); cursor: pointer; } /* Step 3 proposal cards (Nie pasuje? Dopasuj) */ .goal-proposal-card { background: var(--md-sys-color-surface, #fff); border: 1px solid var(--md-sys-color-outline-variant, #D6CCBF); border-radius: 18px; padding: 16px; text-align: left; cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; display: block; width: 100%; } .goal-proposal-card:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); border-color: var(--md-sys-color-primary, #C47A5A); } .goal-proposal-icon { color: var(--md-sys-color-on-surface-variant, #5E5244); font-size: 22px; display: block; margin-bottom: 6px; } .goal-proposal-title { font-weight: 700; font-size: 14px; color: var(--md-sys-color-on-surface, #2C2418); margin-bottom: 4px; } .goal-proposal-body { font-size: 13px; color: var(--md-sys-color-on-surface-variant, #5E5244); } /* Hide app brand header on goals views (matches mockup back+title layout) */ body.on-goals #appHeader { display: none; } /* Goals top-bar: back-arrow + title (grows left-aligned) + action/spacer */ .goals-topbar { display: flex; align-items: center; gap: 12px; } .goals-topbar-btn { flex-shrink: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--md-sys-color-surface-container-low, #F5F0EB); border: none; border-radius: 999px; cursor: pointer; transition: background 120ms ease, transform 80ms ease; } .goals-topbar-btn:hover { background: var(--md-sys-color-surface-container-high, #EAE2D9); } .goals-topbar-btn:active { transform: scale(0.95); } .goals-topbar-title { flex: 1; min-width: 0; text-align: left; line-height: 1.15; /* Keep on one line where possible; gracefully wrap on very narrow screens */ overflow: hidden; text-overflow: ellipsis; } .goals-topbar-spacer { flex-shrink: 0; width: 44px; height: 44px; } /* ===== GOALS DELAY (Phase 30C) ===== */ /* Bottom sheet scaffolding — used by #delayDecisionSheet and #delayProactivePrompt. The existing .modal display rules drive show/hide via the .active class that _openModal toggles. */ .goal-bottom-sheet { position: fixed; inset: 0; z-index: 1000; display: none; } .goal-bottom-sheet.active { display: flex; flex-direction: column; justify-content: flex-end; } .goal-sheet-backdrop { position: absolute; inset: 0; background: rgba(20, 24, 30, 0.55); transition: opacity 180ms ease; } .goal-sheet-body { position: relative; background: var(--md-sys-color-surface, #fff); border-top-left-radius: 28px; border-top-right-radius: 28px; padding: 10px 20px 28px; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.2); max-height: 92vh; overflow-y: auto; } @media (min-width: 640px) { .goal-sheet-body { max-width: 480px; margin: 0 auto; border-radius: 28px; margin-bottom: 32px; } } .goal-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.15); margin: 0 auto 12px; } /* "POMINIĘTY MARZEC" pill */ .delay-pill { display: inline-flex; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; background: #FEF3E4; color: #7A4A10; } /* Decision sheet strategy cards */ .decision-card { display: block; width: 100%; padding: 16px; border-radius: 18px; border: 1.5px solid rgba(160, 149, 133, 0.4); background: var(--md-sys-color-surface, #fff); text-align: left; cursor: pointer; position: relative; transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; } .decision-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } .decision-card.recommended { background: rgba(196, 122, 90, 0.08); border: 1.5px solid var(--md-sys-color-primary, #C47A5A); } .decision-card.recommended::before { content: 'ZALECANE'; position: absolute; top: -8px; right: 12px; padding: 2px 8px; border-radius: 999px; background: var(--md-sys-color-primary, #C47A5A); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0.15em; } .decision-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; margin-bottom: 10px; color: #fff; } .decision-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; color: var(--md-sys-color-on-surface, #2C2418); } .decision-body { font-size: 13px; color: var(--md-sys-color-on-surface-variant, #5E5244); line-height: 1.4; } .decision-body strong { color: var(--md-sys-color-on-surface, #2C2418); font-weight: 700; } /* Summary widget attention pill */ .attention-pill { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #FEF3E4; border: 1px solid #F0C382; } .attention-pill .attention-icon { width: 26px; height: 26px; border-radius: 999px; background: #E89834; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .attention-pill .attention-text { flex: 1; min-width: 0; } .attention-pill .attention-title { font-size: 12px; font-weight: 700; color: #7A4A10; line-height: 1.2; } .attention-pill .attention-subtitle { font-size: 11px; color: #8B5E20; margin-top: 2px; } .attention-pill .attention-cta { padding: 6px 14px; border-radius: 999px; background: #E89834; color: #fff; font-weight: 700; font-size: 12px; border: none; cursor: pointer; flex-shrink: 0; } /* Goals-detail amber warning banner */ .delay-warning-banner { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #E89834, #C97A20); } .delay-warning-banner .banner-icon { flex-shrink: 0; font-size: 24px; } .delay-warning-banner .banner-title { font-size: 14px; font-weight: 700; } .delay-warning-banner .banner-subtitle { font-size: 12px; opacity: 0.92; margin-top: 4px; line-height: 1.4; } .delay-warning-banner .banner-cta { margin-top: 10px; padding: 8px 14px; border-radius: 999px; background: #fff; color: #C97A20; font-weight: 700; font-size: 12px; border: none; cursor: pointer; } /* Proactive prompt 72×72 icon circle */ .delay-prompt-icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(196, 122, 90, 0.18); display: inline-flex; align-items: center; justify-content: center; color: var(--md-sys-color-primary, #C47A5A); margin: 0 auto; } /* Filter-sheet option rows (single-select per section) */ .goals-filter-option { display: block; width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1.5px solid transparent; background: var(--md-sys-color-surface-container-low, #F5F0EB); font-size: 14px; font-weight: 500; color: var(--md-sys-color-on-surface, #2C2418); cursor: pointer; transition: background 120ms ease, border-color 120ms ease; } .goals-filter-option:hover { background: var(--md-sys-color-surface-container-high, #EAE2D9); } .goals-filter-option.active { background: rgba(196, 122, 90, 0.10); border-color: var(--md-sys-color-primary, #C47A5A); font-weight: 700; } /* ============================================================ Phase 31A — Dark-mode: shadow → border swap per SPEC §2. Targets the shared card surfaces. Modal backdrops keep their shadow on purpose — it reads as a proper elevation cue. ============================================================ */ html[data-theme="dark"] .card { box-shadow: none; border: 1px solid var(--color-border); } html[data-theme="dark"] .v2 .shadow-editorial { box-shadow: none; border: 1px solid var(--color-border); } html[data-theme="dark"] .v2 .shadow-editorial-lg { box-shadow: none; border: 1px solid var(--color-border); } /* Slight contrast bump on inputs in dark mode so the border is visible. */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--color-surface-low); } /* ============================================================ Phase 31A — Danger zone surfaces. Light: pink tint. Dark: terracotta-red tint (NOT pink — pink on dark looks synthetic per SPEC §2). White text on solid button stays #fff in both modes (AA verified in SPEC). ============================================================ */ .danger-zone { background: #FDF0ED; border: 1px solid #F0C8C4; border-radius: 24px; padding: 20px; color: var(--color-danger); } /* 31C hotfix #2 — danger-zone 2-button layout (image #63 reference). Outline "Wyczyść" + solid "Usuń konto i dane" stacked. */ .danger-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 999px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; transition: filter 0.15s, background 0.15s, transform 0.06s; -webkit-tap-highlight-color: transparent; width: 100%; } .danger-action:active { transform: scale(0.985); } .danger-action--outline { background: transparent; border: 1.5px solid rgb(var(--color-danger-rgb) / 0.5); color: var(--color-danger); } .danger-action--outline:hover { background: rgb(var(--color-danger-rgb) / 0.06); } .danger-action--solid { background: var(--color-danger); color: #fff; border: none; } .danger-action--solid:hover { filter: brightness(0.94); } html[data-theme="dark"] .danger-action--outline { border-color: rgb(var(--color-danger-rgb) / 0.6); } .danger-zone h2, .danger-zone h3, .danger-zone .danger-title { color: var(--color-danger); } .danger-zone .danger-body { color: var(--color-text); } .danger-zone .danger-hint { color: var(--color-text-muted); } html[data-theme="dark"] .danger-zone { background: #2A1816; border-color: #4A2520; } .btn-solid-danger { background: var(--color-danger); color: #fff; border: none; border-radius: 1rem; padding: 10px 18px; font-weight: 600; font-size: 13px; cursor: pointer; min-height: 44px; transition: filter 0.2s; } .btn-solid-danger:hover { filter: brightness(0.92); } /* ============================================================ Phase 31B — "Więcej" hub primitives. Group labels (eyebrow caps), row buttons with icon tile + label + sub + trailing, grouped card wrapper. All colours via --color-* tokens (31A). Mobile-first; desktop hub is not in scope (31E lands desktop Settings layout). ============================================================ */ .more-group-label { font-size: 11px; letter-spacing: 0.2em; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; padding: 14px 4px 6px; } .more-hub-card { background: var(--color-surface); border-radius: 24px; overflow: hidden; margin: 0; box-shadow: 0 1px 3px rgb(var(--color-border-rgb) / 0.33); } html[data-theme="dark"] .more-hub-card { box-shadow: none; border: 1px solid var(--color-border); } .more-hub-row { width: 100%; box-sizing: border-box; text-align: left; cursor: pointer; background: transparent; border: none; border-top: 1px solid rgb(var(--color-border-rgb) / 0.22); padding: 12px 14px; display: flex; align-items: center; gap: 12px; font-family: inherit; color: var(--color-text); text-decoration: none; transition: background 0.15s; -webkit-tap-highlight-color: transparent; } .more-hub-row.is-first { border-top: none; border-top-left-radius: 24px; border-top-right-radius: 24px; } .more-hub-row.is-last { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; } .more-hub-row:hover { background: var(--color-surface-low); } .more-hub-row:active { transform: scale(0.985); } .more-hub-row-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; } .more-hub-row-text { flex: 1; min-width: 0; } .more-hub-row-label { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--color-text); } .more-hub-row-sub { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .more-hub-row-trailing { display: flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--color-text-muted); } /* Promoted Import card inside Budżet group — visually distinct from siblings. Applied to the MOVED #importSection wrapper in T31B.3. */ #importSection.more-import-promoted { margin: 4px 0 12px; background: rgb(var(--color-primary-rgb) / 0.05); border: 1px solid rgb(var(--color-primary-rgb) / 0.30); border-radius: 24px; } /* #more view wrapper — scroll + bottom nav clearance. */ #more { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 110px); } /* ============================================================ Phase 31B hotfix — compact profile hero (image #53 reference). Single card: horizontal row (avatar + name+email + tier badge), second row with two equal-width action buttons. ============================================================ */ .more-hero-card { background: var(--color-surface); border-radius: 24px; padding: 14px; margin-bottom: 14px; box-shadow: 0 1px 3px rgb(var(--color-border-rgb) / 0.33); } html[data-theme="dark"] .more-hero-card { box-shadow: none; border: 1px solid var(--color-border); } .more-hero-top { display: flex; align-items: center; gap: 10px; } .more-hero-info { flex: 1; min-width: 0; } .more-hero-name { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 16px; line-height: 1.2; color: var(--color-text); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .more-hero-email { font-size: 12px; color: var(--color-text-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .more-hero-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: rgb(var(--color-primary-rgb) / 0.14); color: var(--color-primary); white-space: nowrap; flex-shrink: 0; } .more-hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; } .more-hero-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 10px; border-radius: 10px; border: 1px solid rgb(var(--color-border-rgb) / 0.5); background: transparent; color: var(--color-text); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s; -webkit-tap-highlight-color: transparent; } .more-hero-btn:hover { background: var(--color-surface-low); } .more-hero-btn:active { transform: scale(0.98); } /* Motyw row — duo-tone palette preview (image #51) */ .motyw-preview-outer { display: inline-flex; align-items: center; gap: 6px; } .motyw-preview { display: inline-flex; align-items: center; } .motyw-preview-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--color-surface); box-sizing: border-box; } .motyw-preview-dot.dot-primary { background: var(--color-primary); } .motyw-preview-dot.dot-surface { background: var(--color-bg); border: 2px solid rgb(var(--color-border-rgb) / 0.5); margin-left: -8px; } /* ============================================================ Phase 31B hotfix #2 — Cele FAB jump fix. The .view.active.view-enter-* animations use translateX on the view container. CSS rule: a transform on an ancestor creates a new containing block for any position: fixed descendant, so during the 300ms slide animation the .goals-fab (position: fixed; bottom: 124px) jumps to an offset relative to #goals rather than the viewport. The result is a visible snap when the animation ends. Override the keyframes for #goals so it uses a pure opacity fade — no transform on the ancestor, no containing-block shuffle, FAB stays pinned throughout. ============================================================ */ #goals.view.active.view-enter-forward, #goals.view.active.view-enter-back { animation: viewFadeNoTransform 220ms var(--ease-ios); } @keyframes viewFadeNoTransform { from { opacity: 0; } to { opacity: 1; } } /* ============================================================ Phase 31C — Ustawienia view (cards, rows, toggles, USUŃ modal) All colours via --color-* tokens (set in 31A) so dark mode is automatic. The .danger-zone block lives separately at the top of this file (added by 31A) — do not redefine here. ============================================================ */ /* ---- Group label (eyebrow above each settings-card) ---- */ .settings-group-label { font-size: 11px; letter-spacing: 0.18em; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; margin: 0 0 8px 4px; } /* 31G.2 — dark-mode perceptual lift for eyebrow labels. Numeric contrast of --color-text-muted (#A8A094) against --color-bg (#15130F) is ~7:1 and passes WCAG AA comfortably, but the combination of 11px size, 700 weight, and 0.18em letter-spacing renders the letters visually thin against the dark warm background, so the labels read as faint. Lift the color toward --color-text (#F2EDE4) and knock opacity back to 0.72 to preserve the hierarchy below card content. Light mode is unchanged. */ html[data-theme="dark"] .settings-group-label { color: var(--color-text); opacity: 0.72; } /* ---- Cards & rows (mirror more-settings.jsx visual contract) ---- */ .settings-card { background: var(--color-surface); border-radius: 24px; overflow: hidden; box-shadow: 0 1px 3px rgb(var(--color-border-rgb) / 0.33); } html[data-theme="dark"] .settings-card { box-shadow: none; border: 1px solid var(--color-border); } .settings-row { width: 100%; text-align: left; cursor: pointer; background: transparent; border: none; padding: 14px 16px; display: flex; align-items: center; gap: 14px; font-family: 'Inter', sans-serif; color: var(--color-text); transition: background 0.12s; } .settings-row:hover { background: rgb(var(--color-surface-low-rgb) / 0.5); } .settings-row:not(:first-child) { border-top: 1px solid rgb(var(--color-border-rgb) / 0.22); } .settings-row[disabled], .settings-row[data-readonly="true"] { cursor: default; } .settings-row[data-readonly="true"]:hover { background: transparent; } .settings-row-icon { width: 36px; height: 36px; border-radius: 10px; background: rgb(var(--color-primary-rgb) / 0.18); color: var(--color-primary); display: grid; place-items: center; flex-shrink: 0; } .settings-row-icon .material-symbols-outlined { font-size: 20px; } .settings-row-icon--success { background: rgb(var(--color-success-rgb) / 0.18); color: var(--color-success); } .settings-row-icon--warn { background: rgb(var(--color-warn-rgb) / 0.18); color: var(--color-warn); } .settings-row-icon--muted { background: rgb(var(--color-text-muted-rgb) / 0.14); color: var(--color-text-muted); } .settings-row-icon--danger { background: rgb(var(--color-danger-rgb) / 0.18); color: var(--color-danger); } .settings-row-body { flex: 1; min-width: 0; } .settings-row-label { font-size: 14px; font-weight: 600; color: var(--color-text); } .settings-row-sub { font-size: 12px; color: var(--color-text-muted); margin-top: 1px; } /* Variant — danger zone uses red dividers for legibility on the pink/red bg */ .danger-zone .settings-row:not(:first-child) { border-top-color: rgb(var(--color-danger-rgb) / 0.18); } .danger-zone .settings-row-label, .danger-zone .settings-row-sub { color: var(--color-danger); } html[data-theme="dark"] .danger-zone .settings-row-sub { color: rgb(var(--color-danger-rgb) / 0.85); } /* ---- Toggle pill (iOS-style) ---- */ .toggle-pill { width: 44px; height: 26px; border-radius: 13px; background: var(--color-border); position: relative; border: none; cursor: pointer; transition: background 0.18s; padding: 0; flex-shrink: 0; } .toggle-pill.is-on { background: var(--color-success); } .toggle-pill-knob { width: 22px; height: 22px; border-radius: 11px; background: #fff; position: absolute; top: 2px; left: 2px; transition: left 0.18s; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .toggle-pill.is-on .toggle-pill-knob { left: 20px; } /* ---- Mini number input (Pierwszy dzień miesiąca) ---- */ .settings-mini-input { width: 60px; height: 36px; text-align: right; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); padding: 0 8px; font-size: 14px; font-weight: 600; } .settings-mini-input:focus { outline: none; border-color: var(--color-primary); } /* ---- Sync status row ---- */ .settings-sync-status { display: flex; align-items: flex-start; gap: 10px; padding: 16px; } .settings-sync-status .material-symbols-outlined { font-size: 22px; } .settings-sync-status--online .material-symbols-outlined { color: var(--color-success); } .settings-sync-status--offline .material-symbols-outlined { color: var(--color-warn); } /* ---- Kopia zapasowa action buttons ---- */ .settings-action-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: 12px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.12s; } .settings-action-btn:hover { background: rgb(var(--color-surface-low-rgb) / 0.5); } .settings-action-btn .material-symbols-outlined { font-size: 18px; color: var(--color-primary); } .settings-action-btn--wide { width: 100%; } /* ---- Stat row (Dane i statystyki) ---- */ .settings-stat-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; font-size: 13px; } .settings-stat-row:not(:last-child) { border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.22); } .settings-stat-row > span:first-child { color: var(--color-text-muted); } .settings-stat-row > .value { color: var(--color-text); font-weight: 700; } /* ---- Quiet hours panel ---- */ .quiet-hours-panel { display: flex; align-items: center; gap: 8px; padding: 0 16px 14px 66px; color: var(--color-text-muted); font-size: 12px; } .quiet-hours-panel input[type="time"] { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: 8px; padding: 6px 10px; font-size: 13px; } /* ---- USUŃ confirm modal ---- */ .delete-confirm-icon-wrap { width: 64px; height: 64px; border-radius: 32px; margin: 8px auto 0; background: #FDE4DF; /* SPEC §4 line 332 — light-only ramp, no token */ display: grid; place-items: center; color: var(--color-danger); } html[data-theme="dark"] .delete-confirm-icon-wrap { background: rgb(var(--color-danger-rgb) / 0.18); } .delete-confirm-insight { background: rgb(var(--color-warn-rgb) / 0.16); border: 1px solid rgb(var(--color-warn-rgb) / 0.4); border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; } .delete-confirm-insight .material-symbols-outlined { color: var(--color-warn); font-size: 18px; } .delete-confirm-insight p { flex: 1; margin: 0; font-size: 12px; color: var(--color-text); } .delete-confirm-insight button { padding: 4px 10px; background: var(--color-warn); color: #fff; border: none; border-radius: 999px; font-size: 11px; font-weight: 700; cursor: pointer; } .delete-confirm-input-label { display: block; font-size: 11px; letter-spacing: 0.18em; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; margin: 14px 0 6px; } #deleteConfirmInput { width: 100%; padding: 14px 16px; background: var(--color-surface); border: 1.5px solid rgb(var(--color-border-rgb) / 0.66); border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--color-text); letter-spacing: 0.15em; transition: border-color 0.18s; box-sizing: border-box; } #deleteConfirmInput:focus { outline: none; border-color: var(--color-primary); } #deleteConfirmInput.is-warn { border-color: var(--color-warn); } .delete-confirm-actions { display: flex; flex-direction: column; gap: 8px; } #deleteConfirmYes { width: 100%; padding: 14px; border: none; background: var(--color-border); color: rgb(var(--color-text-rgb) / 0.6); border-radius: 999px; font-size: 14px; font-weight: 700; cursor: not-allowed; } #deleteConfirmYes:not([disabled]) { background: var(--color-danger); color: #fff; cursor: pointer; } .delete-confirm-cancel { width: 100%; padding: 14px; border: none; background: transparent; color: var(--color-text); border-radius: 999px; font-size: 14px; font-weight: 700; cursor: pointer; } /* ===================================================================== */ /* PHASE 31F — Currency picker + CSV import + income shift */ /* ===================================================================== */ /* ---- Currency picker ---- */ .currency-picker-list, .theme-mode-picker-list { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; } .currency-picker-row, .theme-mode-picker-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; background: transparent; border: none; border-radius: 12px; cursor: pointer; transition: background 0.15s ease; } .currency-picker-row:hover, .theme-mode-picker-row:hover { background: rgb(var(--color-surface-low-rgb) / 0.5); } .currency-picker-row.is-active, .theme-mode-picker-row.is-active { background: rgb(var(--color-primary-rgb) / 0.10); } .currency-picker-radio, .theme-mode-picker-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--color-border); position: relative; transition: border-color 0.15s ease; flex-shrink: 0; } .currency-picker-radio.is-on, .theme-mode-picker-radio.is-on { border-color: var(--color-primary); } .currency-picker-radio.is-on::after, .theme-mode-picker-radio.is-on::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); } /* ---- PHASE 31G.5 — iOS-style wheel picker ---- Used by #incomeShiftDayPickerSheet (replaces the 31G.3 17-row list). CSS-only scroll-snap wheel — iOS Safari 11+ supports `scroll-snap-type` and `scroll-snap-align`. The mask-image gradient fades top/bottom rows so only the center selection reads as solid; -webkit-mask-image keeps Safari ≤ 16 happy. The in-line mask strip is a separate absolutely- positioned element so it overlays the wheel without participating in scroll. JS (views/ustawienia.js) drives `.is-center` on the row nearest the vertical midline plus `_pendingIncomeShiftDay` for confirm. */ .wheel-picker { position: relative; height: 220px; overflow-y: scroll; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; mask-image: linear-gradient( to bottom, transparent 0%, rgb(0 0 0 / 0.4) 16%, rgb(0 0 0 / 1) 40%, rgb(0 0 0 / 1) 60%, rgb(0 0 0 / 0.4) 84%, transparent 100% ); -webkit-mask-image: linear-gradient( to bottom, transparent 0%, rgb(0 0 0 / 0.4) 16%, rgb(0 0 0 / 1) 40%, rgb(0 0 0 / 1) 60%, rgb(0 0 0 / 0.4) 84%, transparent 100% ); } .wheel-picker::-webkit-scrollbar { display: none; } .wheel-picker-list { display: flex; flex-direction: column; /* (container height - row height) / 2 = (220 - 44) / 2 = 88. Lets the first/last items center under the selection strip. */ padding: 88px 0; } .wheel-picker-row { flex: 0 0 auto; height: 44px; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; scroll-snap-stop: always; font-size: 22px; font-weight: 600; color: var(--color-text); opacity: 0.38; transition: opacity 0.18s ease, transform 0.18s ease; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } .wheel-picker-row.is-center { opacity: 1; transform: scale(1.08); } .wheel-picker-mask { position: absolute; top: 50%; left: 16px; right: 16px; height: 44px; transform: translateY(-50%); border-top: 1px solid rgb(var(--color-border-rgb) / 0.55); border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.55); pointer-events: none; z-index: 1; } .wheel-picker-actions { display: flex; gap: 10px; margin-top: 16px; } .wheel-picker-btn { flex: 1; padding: 12px 16px; border-radius: 12px; border: none; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.12s ease; } .wheel-picker-btn-cancel { background: rgb(var(--color-surface-low-rgb) / 0.6); color: var(--color-text); } .wheel-picker-btn-cancel:hover { background: rgb(var(--color-surface-low-rgb) / 0.9); } .wheel-picker-btn-confirm { background: var(--color-primary); color: white; } .wheel-picker-btn-confirm:hover { background: var(--color-primary-deep); } /* ---- CSV import sheet ---- */ .csv-import-icon-wrap { width: 64px; height: 64px; border-radius: 50%; background: rgb(var(--color-primary-rgb) / 0.18); color: var(--color-primary); display: grid; place-items: center; margin: 0 auto; } .csv-import-stats { list-style: none; padding: 0; margin: 0 0 16px 0; display: flex; flex-direction: column; gap: 8px; } .csv-import-stats > li { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--color-text); padding: 8px 12px; background: rgb(var(--color-surface-low-rgb) / 0.5); border-radius: 8px; } .csv-import-stats > li > strong { color: var(--color-text); font-weight: 700; } .csv-import-actions { display: flex; flex-direction: column; gap: 8px; } .csv-import-actions > button { padding: 12px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; border: none; cursor: pointer; transition: opacity 0.15s ease, background 0.15s ease; } .csv-import-actions > #csvImportAll { background: var(--color-primary); color: #fff; } .csv-import-actions > #csvImportAll:disabled { background: var(--color-border); color: var(--color-text-muted); cursor: not-allowed; } .csv-import-actions > #csvImportMapped { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); } .csv-import-actions > #csvImportMapped:disabled { color: var(--color-text-muted); border-color: var(--color-border); cursor: not-allowed; } /* Phase 31G.3 — the mini number input block (income-shift threshold) was removed here. Row 2 in Ustawienia → Przychody now opens a bottom-sheet day picker (#incomeShiftDayPickerSheet) and reuses the shared .currency-picker-* classes for its rows — no dedicated input styling is required anymore. */ /* Phase 31G.1 — the 31D Theme picker block (segmented mode control + palette swatches) was removed here. The Wygląd card is now two settings-rows (Motyw + Tryb jasny / ciemny) that use the existing .settings-row / .settings-card rules, and the mode bottom-sheet rides on the shared currency-picker-* rules in the Phase 31F block above. */ /* ============================================================ PHASE 31E — DESKTOP SETTINGS LAYOUT (>= 1024 px) Two-column shell for #ustawienia + width cap for #more. Mobile (< 1024 px) renders byte-identical to 31B/31C ship. All colours via existing --color-* tokens (31A). ============================================================ */ /* Below 1024 px the desktop grid collapses to a single column — the sidebar is hidden and the content column flows naturally. This keeps the markup the same shape across breakpoints, which simplifies the JS render path. */ .ustawienia-desktop-sidebar { display: none; } .ustawienia-desktop-grid { display: block; } .ustawienia-desktop-header { display: none; } @media (min-width: 1024px) { #ustawienia .ustawienia-desktop-grid { display: grid; grid-template-columns: 260px 1fr; gap: 0; align-items: start; min-height: calc(100vh - 56px); } #ustawienia .ustawienia-desktop-sidebar { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; background: var(--color-surface); border-right: 1px solid rgb(var(--color-border-rgb) / 0.33); padding: 18px 12px; } #ustawienia .ustawienia-desktop-content { padding: 28px 36px 60px; max-width: 760px; margin: 0 auto; width: 100%; min-width: 0; } #ustawienia .ustawienia-desktop-profile { display: flex; align-items: center; gap: 10px; padding: 10px 10px 14px; border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.44); margin-bottom: 10px; } #ustawienia .ustawienia-desktop-profile-avatar { width: 40px; height: 40px; border-radius: 20px; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-deep)); display: grid; place-items: center; color: #fff; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 16px; flex-shrink: 0; } #ustawienia .ustawienia-desktop-profile-text { flex: 1; min-width: 0; } #ustawienia .ustawienia-desktop-profile-name { font-size: 13px; font-weight: 700; color: var(--color-text); line-height: 1.2; } #ustawienia .ustawienia-desktop-profile-email { font-size: 11px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; } #ustawienia .ustawienia-desktop-profile-badge { padding: 2px 6px; background: rgb(var(--color-primary-rgb) / 0.18); color: var(--color-primary); border-radius: 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; flex-shrink: 0; } /* Phase 31G.5 — Edytuj profil + Wyloguj buttons (image #18 from 2026-04-19 user testing). Sits directly under the profile mini card inside the desktop sidebar. Token-driven so every palette × mode combo reads correctly. Scoped to #ustawienia so the classes don't leak elsewhere. */ #ustawienia .desktop-profile-actions { display: flex; gap: 8px; padding: 0 10px 12px; margin-bottom: 6px; border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.44); } #ustawienia .desktop-profile-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: rgb(var(--color-surface-low-rgb) / 0.5); color: var(--color-text); border: 1px solid rgb(var(--color-border-rgb) / 0.4); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.12s ease; } #ustawienia .desktop-profile-btn:hover { background: rgb(var(--color-surface-low-rgb) / 0.9); } #ustawienia .desktop-profile-btn .material-symbols-outlined { font-size: 16px; color: var(--color-text-muted); } /* Reserved for a future "group by category" iteration (spec parity). */ #ustawienia .ustawienia-desktop-nav-group-label { font-size: 10px; letter-spacing: 0.18em; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; padding: 14px 12px 6px; } #ustawienia .ustawienia-desktop-nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; background: transparent; color: var(--color-text); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; border: none; cursor: pointer; text-align: left; width: 100%; transition: background 0.12s, color 0.12s; } #ustawienia .ustawienia-desktop-nav-item:hover { background: rgb(var(--color-text-muted-rgb) / 0.06); } #ustawienia .ustawienia-desktop-nav-item .material-symbols-outlined { font-size: 18px; color: var(--color-text-muted); transition: color 0.12s; } #ustawienia .ustawienia-desktop-nav-item.is-active { background: rgb(var(--color-primary-rgb) / 0.14); color: var(--color-primary); font-weight: 700; } #ustawienia .ustawienia-desktop-nav-item.is-active .material-symbols-outlined { color: var(--color-primary); } #ustawienia .ustawienia-desktop-nav-item--danger { color: var(--color-danger); } #ustawienia .ustawienia-desktop-nav-item--danger .material-symbols-outlined { color: var(--color-danger); } #ustawienia .ustawienia-desktop-nav-item--danger.is-active { background: rgb(var(--color-danger-rgb) / 0.14); color: var(--color-danger); } #ustawienia .ustawienia-desktop-nav-item--danger.is-active .material-symbols-outlined { color: var(--color-danger); } /* display:block is REQUIRED to override the dormant `display:none` fallback above (specificity 1,1,0 vs 0,1,0). Without it the eyebrow/h1/subtitle stay hidden inside the @media block too. */ #ustawienia .ustawienia-desktop-header { display: block; margin-bottom: 28px; } #ustawienia .ustawienia-desktop-eyebrow { font-size: 11px; letter-spacing: 0.18em; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; margin-bottom: 6px; } #ustawienia .ustawienia-desktop-h1 { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -0.02em; color: var(--color-text); line-height: 1.15; margin: 0; } #ustawienia .ustawienia-desktop-subtitle { font-size: 14px; color: var(--color-text-muted); margin-top: 4px; } /* The mobile push-nav back-arrow is redundant on desktop — the sidebar provides navigation. Block stays in the DOM for mobile. */ #ustawienia .goals-topbar { display: none; } /* Więcej hub width cap (option b — simpler than a full sidebar layout). SPEC §3 inspired — narrower than Ustawienia (720 vs 760) because Więcej cards are dense rows, not paragraphs. */ #more { max-width: 720px; margin: 0 auto; } } /* ===================================================================== */ /* PHASE 33A — Lock screen overlay */ /* ===================================================================== */ #lockScreen { position: fixed; inset: 0; z-index: 100000; /* above modals, above everything */ background: var(--color-bg); display: flex; align-items: center; justify-content: center; padding: 24px; padding-top: max(48px, env(safe-area-inset-top, 0px) + 24px); padding-bottom: max(24px, env(safe-area-inset-bottom, 0px) + 24px); } .lock-screen-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .lock-screen-logo { width: 72px; height: 72px; border-radius: 50%; background: rgb(var(--color-primary-rgb) / 0.15); color: var(--color-primary); display: grid; place-items: center; } .lock-screen-logo .material-symbols-outlined { font-size: 36px; } .lock-screen-title { font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 800; color: var(--color-text); margin: 4px 0 0 0; text-align: center; } .lock-screen-email { font-size: 13px; color: var(--color-text-muted); margin: 0; text-align: center; } .lock-screen-prompt { font-size: 14px; color: var(--color-text-muted); margin: 12px 0 4px 0; text-align: center; } .lock-pin-dots { display: flex; gap: 12px; margin: 8px 0; } .lock-pin-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--color-border); transition: background 0.12s ease, border-color 0.12s ease; } .lock-pin-dot.is-filled { background: var(--color-primary); border-color: var(--color-primary); } .lock-pin-error { color: var(--color-danger); font-size: 13px; font-weight: 600; margin: 4px 0; min-height: 18px; } .lock-pin-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; margin-top: 12px; } .lock-pin-pad-btn { /* 33A polish: width === height for a perfect circle (was 72×64 oval). */ width: 72px; height: 72px; border-radius: 50%; border: 1px solid rgb(var(--color-border-rgb) / 0.5); background: var(--color-surface); color: var(--color-text); font-size: 22px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.1s ease, transform 0.08s ease; -webkit-tap-highlight-color: transparent; } .lock-pin-pad-btn:active { background: rgb(var(--color-surface-low-rgb) / 0.8); transform: scale(0.96); } .lock-pin-pad-btn.is-action { font-size: 14px; } .lock-pin-pad-btn[disabled] { opacity: 0.4; cursor: not-allowed; } /* Disable-lock confirm modal action buttons (Phase 33A polish). */ .disable-lock-confirm-actions { display: flex; gap: 10px; margin-top: 16px; } .disable-lock-confirm-btn { flex: 1; padding: 12px 16px; border-radius: 12px; border: none; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.12s ease, filter 0.12s ease; } .disable-lock-confirm-btn-cancel { background: rgb(var(--color-surface-low-rgb) / 0.6); color: var(--color-text); } .disable-lock-confirm-btn-cancel:hover { background: rgb(var(--color-surface-low-rgb) / 0.9); } .disable-lock-confirm-btn-danger { background: var(--color-danger); color: white; } .disable-lock-confirm-btn-danger:hover { filter: brightness(0.92); } .lock-screen-signout { margin-top: 20px; background: none; border: none; color: var(--color-text-muted); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } /* Subtle shake on wrong PIN */ @keyframes lockPinShake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } .lock-pin-dots.is-shaking { animation: lockPinShake 0.32s ease; } /* ===================================================================== */ /* PHASE 33B — Lock screen biometric button */ /* ===================================================================== */ /* Pill above the PIN pad; shown only when hasBiometricEnrolled() is */ /* true (lock-screen.js flips display to inline-flex). Clicking it runs */ /* unlockWithBiometric(); PIN pad stays available as fallback. */ .lock-biometric-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; border: 1px solid rgb(var(--color-primary-rgb) / 0.4); background: rgb(var(--color-primary-rgb) / 0.10); color: var(--color-primary); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; margin: 8px 0 4px; transition: background 0.12s ease, transform 0.08s ease; } .lock-biometric-btn:hover { background: rgb(var(--color-primary-rgb) / 0.18); } .lock-biometric-btn:active { transform: scale(0.97); } .lock-biometric-btn .material-symbols-outlined { font-size: 22px; } /* ─────────────────────────────────────────────────────────────────────── */ /* PHASE 34 — Edit profile modal */ /* ─────────────────────────────────────────────────────────────────────── */ .edit-profile-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 20px; } .edit-profile-avatar { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-soft)); color: white; display: grid; place-items: center; font-size: 36px; font-weight: 800; overflow: hidden; position: relative; } .edit-profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .edit-profile-change-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgb(var(--color-primary-rgb) / 0.4); background: rgb(var(--color-primary-rgb) / 0.10); color: var(--color-primary); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; } .edit-profile-change-btn .material-symbols-outlined { font-size: 18px; } .edit-profile-change-btn:hover { background: rgb(var(--color-primary-rgb) / 0.18); } .edit-profile-remove-btn { background: none; border: none; color: var(--color-danger); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 4px 8px; } .edit-profile-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .edit-profile-label { font-size: 12px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .edit-profile-input { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 15px; font-family: inherit; outline: none; transition: border-color 0.12s ease; } .edit-profile-input:focus { border-color: var(--color-primary); } .edit-profile-error { color: var(--color-danger); font-size: 13px; font-weight: 500; margin-bottom: 10px; text-align: center; } .edit-profile-actions { display: flex; gap: 10px; margin-top: 8px; } .edit-profile-btn { flex: 1; padding: 12px 16px; border-radius: 12px; border: none; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.12s ease, filter 0.12s ease; } .edit-profile-btn-cancel { background: rgb(var(--color-surface-low-rgb) / 0.6); color: var(--color-text); } .edit-profile-btn-cancel:hover { background: rgb(var(--color-surface-low-rgb) / 0.9); } .edit-profile-btn-confirm { background: var(--color-primary); color: white; } .edit-profile-btn-confirm:hover { filter: brightness(0.92); } .edit-profile-btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* Avatar crop sheet (Phase 34 polish 2026-04-19). Square stage with circular cutout mask shows exactly what will be kept. Image is position:absolute + transform: translate+scale. touch-action:none prevents the browser's native swipe-to-scroll swallowing our drag. */ .avatar-crop-stage { position: relative; width: 280px; height: 280px; margin: 0 auto 14px; background: #1a1a1a; border-radius: 18px; overflow: hidden; touch-action: none; cursor: grab; user-select: none; } .avatar-crop-stage:active { cursor: grabbing; } .avatar-crop-stage img { position: absolute; top: 0; left: 0; max-width: none; max-height: none; touch-action: none; user-select: none; pointer-events: none; -webkit-user-drag: none; will-change: transform; } .avatar-crop-mask { position: absolute; inset: 0; pointer-events: none; /* Dim the corners (outside the circle) with a radial gradient. Circle radius = 138 keeps a 2px gap from the 280px stage edges so the ring outline below has room to sit on the dim area. */ background: radial-gradient( circle at center, transparent 0, transparent 138px, rgba(0, 0, 0, 0.55) 139px ); } .avatar-crop-mask::after { content: ''; position: absolute; top: 50%; left: 50%; width: 276px; height: 276px; transform: translate(-50%, -50%); border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 50%; box-sizing: border-box; pointer-events: none; } .avatar-crop-zoom { display: flex; align-items: center; gap: 10px; padding: 0 4px; margin-bottom: 16px; } .avatar-crop-zoom input[type="range"] { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: rgb(var(--color-border-rgb) / 0.6); outline: none; } .avatar-crop-zoom input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--color-primary); border: 2px solid var(--color-surface); cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .avatar-crop-zoom input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--color-primary); border: 2px solid var(--color-surface); cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } /* ─────────────────────────────────────────────────────────────────────── */ /* PHASE 35 — Historia importów */ /* ─────────────────────────────────────────────────────────────────────── */ .import-history-list { display: flex; flex-direction: column; gap: 10px; } .import-history-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 24px; background: var(--color-surface-lowest); border: 1px solid rgb(var(--color-border-rgb) / 0.3); text-align: left; cursor: pointer; font-family: inherit; transition: transform 120ms ease, box-shadow 120ms ease; } .import-history-row:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .import-history-row-icon { width: 40px; height: 40px; border-radius: 14px; background: rgb(var(--color-primary-rgb) / 0.10); color: var(--color-primary); display: grid; place-items: center; flex-shrink: 0; } .import-history-row-center { flex: 1; min-width: 0; } .import-history-row-title { font-weight: 700; font-size: 14px; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .import-history-row-meta { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; } .import-history-row-counts { font-size: 12px; color: var(--color-text-muted); margin-top: 1px; } .import-history-row-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .import-history-row-amount { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 14px; color: var(--color-text); } .import-detail-list { display: flex; flex-direction: column; gap: 2px; background: var(--color-surface-low); border-radius: 16px; overflow: hidden; max-height: 45vh; overflow-y: auto; margin-bottom: 16px; } .import-detail-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--color-surface-lowest); } .import-detail-row-left { flex: 1; min-width: 0; } .import-detail-row-name { font-size: 13px; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .import-detail-row-date { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; } .import-detail-row-amount { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13px; color: var(--color-danger); flex-shrink: 0; } .import-detail-row-amount.income { color: var(--color-primary); } .import-detail-empty { padding: 20px 14px; text-align: center; font-size: 13px; color: var(--color-text-muted); } .import-detail-actions { display: flex; flex-direction: column; gap: 8px; } .import-detail-undo-btn { padding: 12px 16px; border-radius: 999px; border: none; background: var(--color-danger); color: white; font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; } .import-detail-undo-btn:hover { filter: brightness(0.92); } .import-detail-close-btn { padding: 12px 16px; border-radius: 999px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text); font-weight: 600; font-size: 14px; font-family: inherit; cursor: pointer; } .import-detail-close-btn:hover { background: rgb(var(--color-surface-low-rgb) / 0.9); } /* ─────────────────────────────────────────────────────────────────── */ /* PHASE 37B — Upgrade / pricing view */ /* ─────────────────────────────────────────────────────────────────── */ .upgrade-hero { text-align: center; padding: 8px 4px 20px; } .upgrade-hero-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; color: var(--color-primary); background: rgb(var(--color-primary-rgb) / 0.12); margin-bottom: 14px; } .upgrade-hero-title { font-family: 'Manrope', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--color-text); } .upgrade-hero-sub { font-size: 14px; color: var(--color-text-muted); margin: 0 auto; max-width: 360px; line-height: 1.5; } .upgrade-features-card { background: var(--color-surface-lowest); border-radius: 24px; border: 1px solid rgb(var(--color-border-rgb) / 0.25); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; } .upgrade-feature-row { display: flex; align-items: center; gap: 12px; } .upgrade-feature-icon { width: 28px; height: 28px; border-radius: 50%; background: rgb(var(--color-primary-rgb) / 0.12); color: var(--color-primary); display: grid; place-items: center; flex-shrink: 0; } .upgrade-feature-text { font-size: 14px; color: var(--color-text); line-height: 1.4; } .upgrade-plan-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .upgrade-plan-card { padding: 16px 14px; border-radius: 20px; background: var(--color-surface-lowest); border: 2px solid rgb(var(--color-border-rgb) / 0.35); text-align: left; cursor: pointer; font-family: inherit; color: var(--color-text); transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease; } .upgrade-plan-card:hover { transform: translateY(-1px); } .upgrade-plan-card.active { border-color: var(--color-primary); box-shadow: 0 6px 18px rgb(var(--color-primary-rgb) / 0.12); } .upgrade-plan-label { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 6px; } .upgrade-plan-price-row { display: flex; align-items: baseline; gap: 4px; } .upgrade-plan-amount { font-family: 'Manrope', sans-serif; font-size: 24px; font-weight: 800; color: var(--color-text); letter-spacing: -0.02em; } .upgrade-plan-period { font-size: 13px; color: var(--color-text-muted); } .upgrade-plan-hint { font-size: 11px; color: var(--color-text-muted); margin-top: 8px; line-height: 1.4; } .upgrade-cta-wrap { padding: 4px 0; } .upgrade-cta-btn { width: 100%; padding: 14px 18px; border-radius: 999px; border: none; background: var(--color-primary); color: white; font-weight: 800; font-size: 15px; font-family: inherit; cursor: pointer; transition: filter 120ms ease; } .upgrade-cta-btn:hover:not(:disabled) { filter: brightness(0.92); } .upgrade-cta-btn:disabled { opacity: 0.6; cursor: wait; } .upgrade-small-print { font-size: 11px; color: var(--color-text-muted); text-align: center; line-height: 1.5; padding: 0 8px; margin: 0; } .upgrade-already-pro { background: var(--color-surface-lowest); border-radius: 24px; border: 1px solid rgb(var(--color-border-rgb) / 0.25); padding: 32px 24px; text-align: center; color: var(--color-text); } .upgrade-already-pro .material-symbols-outlined { color: var(--color-primary); font-variation-settings: 'FILL' 1; margin-bottom: 12px; } .upgrade-ap-title { font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 800; margin: 0 0 8px; } .upgrade-ap-sub { font-size: 14px; color: var(--color-text-muted); margin: 0 0 20px; line-height: 1.5; }