:root { --tg-safe-top: 0px; --tg-safe-bottom: 0px; --app-top-offset: 96px; --app-bottom-offset: 104px; /* Default theme (dark). User screens can switch to light by setting `class="theme-light"` on . */ --app-bg: #0f1012; --app-fg: #f4f4f6; --app-muted: rgba(244, 244, 246, 0.68); --app-surface: #191b20; --app-surface-2: #1f2025; --app-border: rgba(255, 255, 255, 0.1); --gold: #cfb579; --accent-green: #34c759; --nav-bg: #232326; --nav-border: rgba(255, 255, 255, 0.09); --nav-icon: rgba(207, 181, 121, 0.66); --nav-icon-active: #cfb579; --nav-shadow: 0 16px 36px rgba(0, 0, 0, 0.45); } html.theme-light { --app-bg: #f6f6f7; --app-fg: #111114; --app-muted: rgba(17, 17, 20, 0.62); --app-surface: #ffffff; --app-surface-2: #f1f1f2; --app-border: rgba(17, 17, 20, 0.12); --nav-bg: #ffffff; --nav-border: rgba(17, 17, 20, 0.12); --nav-icon: rgba(17, 17, 20, 0.55); --nav-icon-active: #111114; --nav-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); } html, body { width: 100%; max-width: 100%; overflow-x: hidden; } body { touch-action: pan-y; background: var(--app-bg); color: var(--app-fg); } .app-shell { margin: 0 auto; width: 100%; max-width: 430px; min-height: 100dvh; padding-left: 1.25rem; padding-right: 1.25rem; padding-top: calc(var(--app-top-offset, 96px) + 8px); padding-bottom: calc(var(--app-bottom-offset, 104px) + 12px); } .app-bottom-nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tg-safe-bottom, 0px) + 12px); width: min(calc(100% - 24px), 430px); z-index: 60; } .app-bottom-nav-inner { height: 72px; border-radius: 1.9rem; background: var(--nav-bg); border: 1px solid var(--nav-border); box-shadow: var(--nav-shadow); display: flex; align-items: center; justify-content: space-between; padding: 0 1.6rem; } .app-bottom-nav a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--nav-icon); transition: color 0.18s ease, transform 0.18s ease; position: relative; } .app-bottom-nav a:hover { color: var(--nav-icon-active); transform: translateY(-1px); } .app-bottom-nav a.active { color: var(--nav-icon-active); } .app-bottom-nav svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .app-nav-msg-dot { position: absolute; top: 5px; right: 3px; min-width: 8px; height: 8px; border-radius: 999px; background: #ff3b30; box-shadow: 0 0 0 2px var(--nav-bg); display: none; } .app-nav-msg-dot.show { display: block; } .app-top-spacer { height: 4px; } /* Small UI helpers (theme-aware) */ .surface-card { background: var(--app-surface); border: 1px solid var(--app-border); } .surface-card-2 { background: var(--app-surface-2); border: 1px solid var(--app-border); } .text-muted { color: var(--app-muted); } .top-circle-btn { width: 40px; height: 40px; border-radius: 999px; background: var(--app-surface); border: 1px solid var(--app-border); display: inline-flex; align-items: center; justify-content: center; color: inherit; }