/* ============================================================================ InvestCabinet Mini App — «Теплий преміум» design system. Brand tokens are authoritative (fixed warm palette, light + dark pairs). Telegram's --tg-theme-* vars are used only as fallbacks in a few legacy primitives; the branded look must not inherit an arbitrary client theme. Theme is selected by [data-theme="light"|"dark"] on (set by shell.ts: follows Telegram colorScheme by default, overridable via the toggle and persisted in localStorage). Base :root == light so there is no dark FOUC. ========================================================================== */ /* ---- Manrope (self-hosted, CSP-safe: served from 'self' /fonts) ---------- */ /* One variable woff2 per subset covers weights 400–800. Cyrillic-ext carries the ₴ glyph (U+20B4); latin carries NBSP/thin-space used by the money filter. */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/manrope-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/manrope-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---- Tokens: warm light (base) ------------------------------------------ */ :root { --bg: #F3EFE9; --surface: #FFFFFF; --surface2: #FAF7F1; --ink: #221E18; --muted: #8B8377; --line: #E8E1D6; --accent: #B85C38; --accentSoft: #F4E5DC; --good: #3E7C59; --goodSoft: #E4EFE8; --warn: #B4802A; --warnSoft: #F5EAD2; --danger: #BC4A3C; --dangerSoft: #F6E1DC; --shadow: 0 6px 22px rgba(60, 45, 30, .07); /* Map Telegram vars onto brand so any residual tg-driven primitive matches. */ --tg-theme-bg-color: var(--bg); --tg-theme-text-color: var(--ink); --tg-theme-hint-color: var(--muted); --tg-theme-secondary-bg-color: var(--surface2); --tg-theme-button-color: var(--accent); --tg-theme-link-color: var(--accent); --tg-theme-section-separator-color: var(--line); --r-card: 18px; --r-card-sm: 16px; --r-field: 13px; --r-badge: 8px; --r-chip: 7px; --r-pill: 99px; --nav-h: 66px; color-scheme: light; font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; } /* ---- Tokens: warm dark -------------------------------------------------- */ :root[data-theme="dark"] { --bg: #17150F; --surface: #221E17; --surface2: #2A251D; --ink: #F1ECE3; --muted: #9C9384; --line: #332E25; --accent: #DB744C; --accentSoft: #3A2A20; --good: #6EB88B; --goodSoft: #213029; --warn: #DDA85A; --warnSoft: #342B1C; --danger: #E68A7B; --dangerSoft: #3A241F; --shadow: 0 10px 30px rgba(0, 0, 0, .5); color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); /* Never allow horizontal scroll at page level — clip any escaping element. */ overflow-x: hidden; } /* Content column. Bottom padding clears the fixed bottom-nav on every screen (harmless on nav-less onboarding views). */ .container { padding: 10px 15px calc(var(--nav-h) + 22px); max-width: 640px; margin: 0 auto; } /* Tap feedback used by all clickable surfaces. */ .tapfx { cursor: pointer; transition: transform .12s ease, background .15s ease, border-color .15s ease; } .tapfx:active { transform: scale(.985); } .error { color: var(--danger); } .muted { color: var(--muted); } /* ---- Slim app bar (theme toggle only; Telegram draws the real header) ---- */ .app-bar { display: flex; justify-content: flex-end; align-items: center; height: 38px; margin: 0 -2px 4px; } .theme-toggle { width: 34px; height: 34px; border: none; border-radius: 10px; background: var(--surface2); color: var(--muted); display: flex; align-items: center; justify-content: center; padding: 0; } .theme-toggle .ic-sun { display: none; color: var(--warn); } :root[data-theme="dark"] .theme-toggle .ic-sun { display: block; } :root[data-theme="dark"] .theme-toggle .ic-moon { display: none; } /* ---- Screen title ------------------------------------------------------- */ .screen-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 2px 2px 3px; line-height: 1.1; } .screen-sub { font-size: 13px; color: var(--muted); margin: 0 2px 16px; } .section-label { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 22px 4px 10px; display: flex; align-items: center; gap: 7px; } /* Legacy header (still used by onboarding / admin-form / detail views). */ .page-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 2px 14px; } .page-header h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; } /* ---- Generic surface card ---------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 15px 16px; box-shadow: var(--shadow); } .card-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .card-desc { margin: 6px 0; white-space: pre-wrap; word-break: break-word; } .card-meta { font-size: 12.5px; color: var(--muted); } .num { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; } /* ---- Status badges ------------------------------------------------------ */ .badge { flex: none; font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: var(--r-badge); white-space: nowrap; } .badge-accent { color: var(--accent); background: var(--accentSoft); } .badge-good { color: var(--good); background: var(--goodSoft); } .badge-danger { color: var(--danger); background: var(--dangerSoft); } .badge-muted { color: var(--muted); background: var(--surface2); } /* Legacy aliases (admin property_payments / user_detail templates). */ .badge-pending { color: var(--accent); background: var(--accentSoft); } .badge-approved { color: var(--good); background: var(--goodSoft); } .badge-rejected { color: var(--danger); background: var(--dangerSoft); } /* ---- Progress bars ------------------------------------------------------ */ .progress { height: 7px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; margin: 7px 0 0; } .progress.lg { height: 9px; } .progress-bar { height: 100%; border-radius: var(--r-pill); background: var(--accent); transition: width .3s ease; } .progress-bar.good { background: var(--good); } .progress-bar.accent { background: var(--accent); } .progress-bar.danger { background: var(--danger); } .progress-bar.muted { background: var(--muted); } /* ---- List primitive ----------------------------------------------------- */ .list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; } .card-clickable { display: block; width: 100%; text-align: left; border: none; font: inherit; color: inherit; } /* ---- Portfolio summary (properties list header) ------------------------- */ .summary-card { display: flex; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 15px 16px; box-shadow: var(--shadow); margin-bottom: 14px; } .summary-col { flex: 1; min-width: 0; } .summary-sep { width: 1px; background: var(--line); margin: 2px 4px; } .summary-key { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; } .summary-val { font-size: 16px; font-weight: 800; letter-spacing: -.01em; } .summary-val.accent { color: var(--accent); } /* ---- Object card (properties list) -------------------------------------- */ .object-card { padding: 15px 16px; } .object-title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; } .object-meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; } .object-pay { display: flex; justify-content: space-between; align-items: baseline; margin-top: 13px; font-size: 13px; } .object-pay .paid { color: var(--muted); } .object-pay .paid b { color: var(--ink); font-weight: 700; } .object-pay .pct { font-weight: 800; } .next-row { display: flex; align-items: center; gap: 6px; margin-top: 11px; font-size: 12.5px; color: var(--muted); } .next-row .val { font-weight: 700; } .next-row .spacer { flex: 1; } /* Status-tone text colors (label/pct/next). */ .t-accent { color: var(--accent); } .t-good { color: var(--good); } .t-danger { color: var(--danger); } .t-muted { color: var(--muted); } /* ---- Empty state -------------------------------------------------------- */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 24px; } .empty-tile { width: 96px; height: 96px; border-radius: 26px; background: var(--surface2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--muted); } .empty-state h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; } .empty-state p { font-size: 13.5px; color: var(--muted); margin: 7px 0 0; line-height: 1.5; max-width: 250px; } /* ---- Property detail ---------------------------------------------------- */ .detail-title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; } .detail-sub { font-size: 13px; color: var(--muted); margin-top: 4px; } .render-ph { height: 150px; border-radius: var(--r-card); margin-top: 14px; border: 1px solid var(--line); overflow: hidden; background: var(--surface2); } .render-ph svg, .render-ph img { display: block; width: 100%; height: 100%; object-fit: cover; } .kv-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; } .kv-row + .kv-row { margin-top: 9px; } .kv-row .k { color: var(--muted); } .kv-row .v { font-weight: 700; } .kv-row .v.good { color: var(--good); } .kv-row .v.accent { color: var(--accent); font-weight: 800; } .pct-note { text-align: right; font-size: 12px; font-weight: 700; margin-top: 6px; } /* ---- Payment / schedule rows -------------------------------------------- */ .rows-card { padding: 0; overflow: hidden; } .pay-row { display: flex; align-items: center; gap: 12px; padding: 13px 15px; } .pay-row + .pay-row { border-top: 1px solid var(--line); } .pay-dot { width: 9px; height: 9px; border-radius: var(--r-pill); flex: none; } .pay-main { flex: 1; min-width: 0; } .pay-label { font-size: 13.5px; font-weight: 700; } .pay-date { font-size: 11.5px; color: var(--muted); margin-top: 2px; } .pay-right { text-align: right; } .pay-amount { font-size: 13.5px; font-weight: 700; } .pay-state { font-size: 11px; font-weight: 700; margin-top: 2px; } /* ---- Profile ------------------------------------------------------------ */ .profile-card { display: flex; align-items: center; gap: 14px; padding: 18px 16px; } .avatar { border-radius: var(--r-badge); background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; letter-spacing: -.02em; flex: none; } .avatar-lg { width: 56px; height: 56px; border-radius: 16px; font-size: 20px; } .avatar-sm { width: 42px; height: 42px; border-radius: 12px; font-size: 14px; } .avatar.good { background: var(--accentSoft); color: var(--accent); } .avatar.blocked { background: var(--dangerSoft); color: var(--danger); } .profile-name { font-size: 17px; font-weight: 800; letter-spacing: -.01em; } .profile-handle { font-size: 13px; color: var(--muted); margin-top: 2px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: var(--r-chip); } .chip-sm { font-size: 10px; padding: 3px 8px; border-radius: 6px; } .chip-accent { color: var(--accent); background: var(--accentSoft); } .chip-warn { color: var(--warn); background: var(--warnSoft); } .chip-muted { color: var(--muted); background: var(--surface2); } .id-row { display: flex; align-items: center; gap: 10px; padding: 13px 15px; margin-top: 11px; } .id-row .id-main { flex: 1; min-width: 0; } .id-row .id-key { font-size: 11.5px; color: var(--muted); } .id-row .id-val { font-size: 14px; font-weight: 700; margin-top: 2px; } .id-copy { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--accent); padding: 4px 2px; } .tiles { display: flex; gap: 10px; } .tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card-sm); padding: 14px; box-shadow: var(--shadow); } .tile-num { font-size: 22px; font-weight: 800; letter-spacing: -.02em; } .tile-val { font-size: 16px; font-weight: 800; letter-spacing: -.01em; } .tile-key { font-size: 11.5px; color: var(--muted); margin-top: 2px; } /* ---- Settings list ------------------------------------------------------ */ .settings-list { padding: 0; overflow: hidden; } .setting-row { display: flex; align-items: center; gap: 12px; padding: 14px 15px; color: var(--muted); } .setting-row + .setting-row { border-top: 1px solid var(--line); } .setting-row .label { flex: 1; font-size: 14px; font-weight: 600; color: var(--ink); } .switch { width: 42px; height: 24px; border-radius: var(--r-pill); background: var(--line); padding: 2px; display: flex; justify-content: flex-start; flex: none; transition: background .15s ease; } .switch .knob { width: 20px; height: 20px; border-radius: var(--r-pill); background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s ease; } :root[data-theme="dark"] .switch { background: var(--accent); } :root[data-theme="dark"] .switch .knob { transform: translateX(18px); } /* ---- Segment control (admin) ------------------------------------------- */ .segment { display: flex; gap: 6px; background: var(--surface2); border: 1px solid var(--line); border-radius: var(--r-field); padding: 4px; margin-bottom: 16px; } .segment-tab { flex: 1; text-align: center; padding: 9px; border: none; background: none; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--muted); border-radius: 9px; } .segment-tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } /* ---- Search field (visual) --------------------------------------------- */ .search-field { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-field); padding: 11px 13px; box-shadow: var(--shadow); margin-bottom: 14px; color: var(--muted); } .search-field input { flex: 1; border: none; background: none; font: inherit; font-size: 13.5px; color: var(--ink); padding: 0; } .search-field input::placeholder { color: var(--muted); } .search-field input:focus { outline: none; } /* ---- Admin object / user rows ------------------------------------------ */ .admin-obj-foot { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); } .admin-obj-foot .who { color: var(--ink); font-weight: 600; } .user-row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; } .user-main { flex: 1; min-width: 0; } .user-name { font-size: 14px; font-weight: 700; } .user-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; } /* ---- Primary / accent button ------------------------------------------- */ .btn-primary { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--accent); color: #fff; border: none; padding: 14px 18px; border-radius: var(--r-field); font: inherit; font-size: 14.5px; font-weight: 700; box-shadow: var(--shadow); } .btn-primary:disabled { opacity: .6; } .btn-link { background: none; border: none; color: var(--accent); font: inherit; cursor: pointer; } /* ---- Bottom navigation (fixed) ----------------------------------------- */ .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; padding: 9px 8px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); } .nav-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px 0; border: none; background: none; border-radius: 12px; font: inherit; color: var(--muted); } .nav-tab span { font-size: 10.5px; font-weight: 700; } .nav-tab.active { color: var(--accent); background: var(--accentSoft); } /* ---- Icons -------------------------------------------------------------- */ .ic { display: block; flex: none; } /* ---- Forms (onboarding / admin) ---------------------------------------- */ .form { display: flex; flex-direction: column; gap: 14px; } .field { display: flex; flex-direction: column; gap: 6px; } .field span { font-size: 13px; color: var(--muted); } .field input, .field textarea, .field select { font: inherit; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-field); background: var(--surface); color: var(--ink); } .field textarea { resize: vertical; } .actions { display: flex; gap: 10px; margin-top: 20px; } /* Inline row used by the admin user_detail role toggles. */ .cart-item-qty { display: flex; align-items: center; gap: 6px; } /* ---- Overlay: PIN prompt / secret reveal ------------------------------- */ #overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; padding: 20px; } #overlay[hidden] { display: none; } .pin-prompt { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px 20px; box-shadow: var(--shadow); width: 100%; max-width: 360px; } .pin-prompt h2 { margin: 0 0 8px; font-size: 18px; font-weight: 800; } .pin-prompt .secret { background: var(--surface2); border: 1px solid var(--line); border-radius: var(--r-field); padding: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; } /* ---- Session expired ---------------------------------------------------- */ .session-expired { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 48px 16px 32px; } .session-expired h2 { margin: 0; font-size: 20px; font-weight: 800; } .session-expired p { margin: 0; line-height: 1.5; max-width: 32ch; } /* ---- Admin image grid (legacy, property has no images yet) -------------- */ .admin-images-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 12px 0; } .admin-image-card { display: flex; flex-direction: column; gap: 6px; } .admin-image-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--surface2); } /* ---- Toast -------------------------------------------------------------- */ #toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 18px); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; z-index: 9999; max-width: 90%; }