/* ═══════════════════════════════════════════════════ THEME — Telegram integration layer Uses CSS custom properties. Falls back to defaults if running outside Telegram (desktop preview). ═══════════════════════════════════════════════════ */ :root { /* Telegram theme vars (set by TG runtime) */ --tg-theme-bg-color: #F5F5F0; --tg-theme-secondary-bg-color: #FFFFFF; --tg-theme-text-color: #1F2937; --tg-theme-hint-color: #9CA3AF; --tg-theme-link-color: #F59E0B; --tg-theme-button-color: #F59E0B; --tg-theme-button-text-color: #FFFFFF; --tg-theme-header-bg-color: #FFFFFF; /* Semantic layer — app uses these */ --bg: var(--tg-theme-bg-color); --surface: var(--tg-theme-secondary-bg-color); --accent: var(--tg-theme-button-color, #F59E0B); --accent-light: color-mix(in srgb, var(--tg-theme-button-color, #F59E0B) 12%, transparent); --accent-dark: color-mix(in srgb, var(--tg-theme-button-color, #F59E0B) 85%, #000); --text-primary: var(--tg-theme-text-color, #1F2937); --text-secondary: var(--tg-theme-hint-color, #9CA3AF); --text-muted: var(--tg-theme-hint-color, #9CA3AF); --link-color: var(--tg-theme-link-color, #F59E0B); --header-bg: var(--tg-theme-header-bg-color, #FFFFFF); --border: color-mix(in srgb, var(--tg-theme-text-color, #1F2937) 8%, var(--tg-theme-secondary-bg-color, #FFF)); --danger: #EF4444; --success: #10B981; --radius: 12px; --radius-lg: 16px; --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --transition: 200ms ease; /* Native controls (date picker, select, scrollbars) follow the theme */ color-scheme: light; } /* Dark fallback palette. `data-theme` is set from Telegram's colorScheme; real themeParams (inline styles on ) take precedence, so this only fills the gaps when params are missing or partial. */ :root[data-theme="dark"] { color-scheme: dark; --tg-theme-bg-color: #17212B; --tg-theme-secondary-bg-color: #232E3C; --tg-theme-text-color: #F5F5F5; --tg-theme-hint-color: #8B9AA8; --tg-theme-link-color: #FBBF24; --tg-theme-button-color: #F59E0B; --tg-theme-header-bg-color: #17212B; --border: color-mix(in srgb, var(--tg-theme-text-color, #F5F5F5) 12%, var(--tg-theme-secondary-bg-color, #232E3C)); --shadow: 0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25); } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Buttons do NOT inherit color by default — the UA paints them black, which is unreadable on dark surfaces. Force inheritance; themed buttons (.btn-primary, .key-accent, ...) override explicitly. */ button { color: inherit; } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } html { /* Prevent bounce/overscroll on iOS */ overflow: hidden; touch-action: manipulation; } body { font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--text-primary); height: 100vh; height: 100dvh; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ─── App Shell ─── */ #app { display: flex; flex-direction: column; height: 100%; overflow: hidden; } /* ─── Screens ─── */ .screen { display: none; flex-direction: column; height: 100%; animation: fadeSlideIn 300ms ease; } .screen.active { display: flex; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ─── Header ─── */ .header { background: var(--header-bg); border-bottom: 1px solid var(--border); padding: 12px 16px; flex-shrink: 0; } .header-inner { display: flex; align-items: center; justify-content: space-between; } .header-title { font-size: 19px; font-weight: 700; color: var(--text-primary); } .header-subtitle { font-size: 13px; color: var(--text-secondary); margin-top: 2px; } .header-actions { display: flex; gap: 4px; } .header-btn { width: 44px; height: 44px; border-radius: 50%; border: none; background: transparent; color: var(--text-primary); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition); } .header-btn:active { background: var(--border); } /* ─── Scrollable Content ─── */ .content { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 24px; } /* ─── Buttons ─── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: var(--radius); border: none; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: all var(--transition); min-height: 48px; min-width: 48px; text-decoration: none; -webkit-user-select: none; user-select: none; } .btn:active { transform: scale(0.97); opacity: 0.85; } .btn:disabled { opacity: 0.5; pointer-events: none; } .btn-primary { background: var(--accent); color: var(--tg-theme-button-text-color, #fff); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 25%, transparent); } .btn-primary:active { opacity: 0.8; } .btn-secondary { background: var(--surface); color: var(--text-primary); border: 1.5px solid var(--border); } .btn-ghost { background: transparent; color: var(--text-secondary); padding: 12px; } .btn-danger { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger); } .btn-full { width: 100%; } /* ─── Cards ─── */ .card { background: var(--surface); border-radius: var(--radius-lg); margin: 0 16px 12px; box-shadow: var(--shadow); overflow: hidden; } .card-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 10px; } .card-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.6px; } /* ─── Collapsible cards (admin tab) ─── */ .card-header-toggle { gap: 8px; cursor: pointer; } .card-header-toggle .card-title { flex: 1; min-width: 0; } .card-chevron { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; border-radius: var(--radius); transition: transform var(--transition), background var(--transition); } .card-chevron:active { background: var(--border); } .card-chevron svg { transition: transform var(--transition); } .collapsible-card.collapsed .card-chevron svg { transform: rotate(-90deg); } .card-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--transition); } .card-body > * { overflow: hidden; min-height: 0; } .collapsible-card.collapsed .card-body { grid-template-rows: 0fr; } .budget-settings-body { padding: 0 20px 16px; } /* ─── Inputs ─── */ input[type="text"], input[type="number"], input[type="date"], textarea, select { font-family: inherit; font-size: 16px; padding: 14px 16px; border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--surface); color: var(--text-primary); width: 100%; transition: border-color var(--transition); -webkit-appearance: none; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); } textarea { resize: vertical; min-height: 60px; } .input-group { margin-bottom: 16px; } .input-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; padding: 0 20px; } .input-group-row { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; } .input-group-row .input-label { margin-bottom: 0; padding: 0; flex: 1; } .input-group-row input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; } /* ─── Cash toggle (entry modal) ─── A right-aligned pill rather than the label-left / checkbox-right split of .input-group-row: at the far edges of a full-width row the label and the box it controls read as two unrelated controls, and the tap target is only as big as the box. Here the whole pill is the