:root { color-scheme: light dark; --bg: var(--tg-theme-bg-color, #f3f4f6); --fg: var(--tg-theme-text-color, #111827); --muted: var(--tg-theme-hint-color, #6b7280); --card: var(--tg-theme-secondary-bg-color, #ffffff); --accent: var(--tg-theme-button-color, #2481cc); --accent-fg: var(--tg-theme-button-text-color, #ffffff); --border: rgba(127, 127, 127, 0.18); /* 50%-grey with alpha works on both light and dark themes — pure rgba(0,0,0,0.06) becomes invisible on a dark background. */ --surface-2: rgba(127, 127, 127, 0.16); --gold: #f4b400; --good: #10b981; --bad: #ef4444; --radius: 14px; } /* Telegram doesn't always propagate every theme variable to the WebView (e.g. desktop clients sometimes skip --tg-theme-secondary-bg-color), so when the OS reports a dark preference we substitute dark fallbacks. */ @media (prefers-color-scheme: dark) { :root { --bg: var(--tg-theme-bg-color, #17212b); --fg: var(--tg-theme-text-color, #f5f5f5); --muted: var(--tg-theme-hint-color, #aab8c2); --card: var(--tg-theme-secondary-bg-color, #232e3c); --border: rgba(255, 255, 255, 0.12); --surface-2: rgba(255, 255, 255, 0.08); } } /* Telegram WebApp toggles this attribute on based on Telegram's own theme (independent of the OS). We mirror the dark fallbacks here so the Mini App tracks Telegram's setting even when the OS is light. */ html[data-theme="dark"] { --bg: var(--tg-theme-bg-color, #17212b); --fg: var(--tg-theme-text-color, #f5f5f5); --muted: var(--tg-theme-hint-color, #aab8c2); --card: var(--tg-theme-secondary-bg-color, #232e3c); --border: rgba(255, 255, 255, 0.12); --surface-2: rgba(255, 255, 255, 0.08); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.45; } #app { max-width: 540px; margin: 0 auto; padding: 16px 14px 96px; } .hello h1 { margin: 8px 0 2px; font-size: 24px; } .muted { color: var(--muted); } .small { font-size: 13px; } .hidden { display: none !important; } .card { background: var(--card); border-radius: var(--radius); padding: 16px; margin: 12px 0; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .card-title { font-weight: 600; font-size: 16px; } .badge { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); } .badge.gold { background: linear-gradient(135deg, #fde68a, #f4b400); color: #5b3a00; font-weight: 600; } .badge.premium { background: linear-gradient(135deg, #fde68a, #f4b400); color: #5b3a00; font-weight: 600; } .meter { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; } .bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #5fb3ff); transition: width 0.4s ease; } .bar.full { background: var(--bad); } .bar.warn { background: var(--gold); } .bar.premium { background: linear-gradient(90deg, #f4b400, #fde68a); width: 100%; } #plan-meter-label { margin: 8px 0 0; } .notes { list-style: none; padding: 0; margin: 12px 0 0; } .notes li { font-size: 13px; color: var(--muted); margin: 2px 0; } .cta { /* Light theme: keep a faint warm tint so the upgrade card still pops. */ background: linear-gradient(160deg, #fffbeb, var(--card)); border-color: rgba(244, 180, 0, 0.45); box-shadow: 0 1px 4px rgba(244, 180, 0, 0.18); } /* Dark theme override — Telegram sometimes doesn't propagate --tg-theme-secondary-bg-color to the WebView, so .cta would render #fffbeb→#fff (white card) on top of a dark page. Force a dark fill here. */ html[data-theme="dark"] .cta { background: linear-gradient(160deg, #2a2f37, #1f242c); border-color: rgba(244, 180, 0, 0.55); color: var(--fg); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .cta { background: linear-gradient(160deg, #2a2f37, #1f242c); border-color: rgba(244, 180, 0, 0.55); color: var(--fg); } } .features { list-style: none; padding: 0; margin: 8px 0 14px; } .features li { margin: 4px 0; font-size: 14px; } /* Buttons and button-like links share the same shape and rhythm */ button, a.primary, a.secondary { font: inherit; border-radius: 10px; padding: 11px 16px; border: none; cursor: pointer; font-weight: 600; transition: opacity 0.15s, transform 0.05s; display: inline-block; text-decoration: none; text-align: center; box-sizing: border-box; line-height: 1.2; } button:active, a.primary:active, a.secondary:active { transform: scale(0.98); } button[disabled] { opacity: 0.5; cursor: not-allowed; } .primary { background: var(--accent); color: var(--accent-fg); width: 100%; } .secondary { background: var(--surface-2); color: var(--fg); flex: 1; } /* When .primary lives inside a .row it should flex like .secondary, not span 100% */ .row .primary { width: auto; flex: 1; } .row { display: flex; gap: 8px; margin: 10px 0 0; } .row .primary { flex: 1; } .ref-link { background: var(--surface-2); padding: 8px 10px; border-radius: 8px; margin: 10px 0 0; overflow-x: auto; white-space: nowrap; } .ref-link code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; } .list { list-style: none; padding: 0; margin: 12px 0 0; max-height: 280px; overflow-y: auto; } .list li { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; } .list li:last-child { border-bottom: none; } .history-fmt { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; } .history-date { color: var(--muted); font-size: 12px; } .history-status.ok { color: var(--good); } .history-status.err { color: var(--bad); } footer { text-align: center; margin-top: 20px; } /* ── Live scanner overlay (premium camera scan) ───────────────────────────── */ .scan-overlay { position: fixed; inset: 0; z-index: 1000; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; } .scan-overlay.hidden { display: none; } .scan-overlay > .hidden { display: none; } #scan-video { width: 100%; height: 100%; object-fit: cover; background: #000; } .scan-reader { width: 100%; height: 100%; } .scan-reader video, .scan-reader canvas { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* Aim frame — 4 corner brackets + a sweeping line, with a darkened cutout. */ .scan-frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(72vw, 280px); height: min(72vw, 280px); pointer-events: none; } /* Punch a hole through a darkened backdrop using an outset box-shadow. */ .scan-frame::before { content: ""; position: absolute; inset: 0; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55); } .scan-corner { position: absolute; width: 30px; height: 30px; border-color: #fff; border-style: solid; border-width: 0; } .scan-corner.tl { top: 0; left: 0; border-width: 3px 0 0 3px; border-top-left-radius: 12px; } .scan-corner.tr { top: 0; right: 0; border-width: 3px 3px 0 0; border-top-right-radius: 12px; } .scan-corner.bl { bottom: 0; left: 0; border-width: 0 0 3px 3px; border-bottom-left-radius: 12px; } .scan-corner.br { bottom: 0; right: 0; border-width: 0 3px 3px 0; border-bottom-right-radius: 12px; } .scan-line { position: absolute; left: 6px; right: 6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent, #2481cc) 50%, transparent); box-shadow: 0 0 12px var(--accent, #2481cc); animation: scan-sweep 1.8s ease-in-out infinite; } @keyframes scan-sweep { 0% { top: 6px; opacity: 0.9; } 50% { top: calc(100% - 8px); opacity: 1; } 100% { top: 6px; opacity: 0.9; } } .scan-hud { position: absolute; left: 0; right: 0; bottom: env(safe-area-inset-bottom, 0); padding: 16px; text-align: center; } .scan-hud-text { display: inline-block; color: #fff; background: rgba(0, 0, 0, 0.55); padding: 8px 14px; border-radius: 999px; font-size: 14px; margin: 0; } .scan-controls { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 14px; } .scan-ctrl-btn { background: rgba(0, 0, 0, 0.6); color: #fff; border: none; width: 56px; height: 56px; border-radius: 50%; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; font-weight: 500; } .scan-ctrl-btn.large { width: auto; height: auto; border-radius: 28px; padding: 14px 22px; font-size: 15px; font-weight: 600; } .scan-ctrl-btn.on { background: rgba(244, 180, 0, 0.92); color: #1a1a1a; } /* Tap-to-focus ripple — pulses once at the tap location, then hides itself. */ .scan-focus-ring { position: absolute; width: 70px; height: 70px; margin: -35px 0 0 -35px; border: 2px solid #fff; border-radius: 50%; pointer-events: none; opacity: 0.9; animation: scan-focus 0.7s ease-out forwards; } .scan-focus-ring.hidden { display: none; } @keyframes scan-focus { 0% { transform: scale(1.5); opacity: 0; } 20% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0; } } .scan-close { position: absolute; top: calc(env(safe-area-inset-top, 0) + 12px); right: 12px; width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 18px; font-weight: 600; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } /* ── PDF page thumbnails (visual split picker) ────────────────────────────── */ .thumbs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 10px; max-height: 380px; overflow-y: auto; padding: 6px; background: var(--surface-2); border-radius: 10px; } .thumb { position: relative; cursor: pointer; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #fff; aspect-ratio: 1 / 1.414; /* A-series approximation — keeps grid tidy */ user-select: none; -webkit-user-select: none; transition: transform 0.05s; } .thumb:active { transform: scale(0.97); } .thumb img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; } .thumb.selected { border-color: var(--accent); } .thumb-no { position: absolute; top: 2px; left: 2px; background: rgba(0, 0, 0, 0.65); color: #fff; padding: 1px 5px; border-radius: 4px; font-size: 10px; line-height: 1.3; } .thumb-check { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: none; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } .thumb.selected .thumb-check { display: flex; } .thumb-quick { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; } .thumb-quick button { flex: 0 0 auto; width: auto; font-size: 12px; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); color: var(--fg); font-weight: 500; border: none; } /* ── Tabs (shared by main app and admin) ──────────────────────────────────── */ .tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin: 10px 0 6px; -webkit-overflow-scrolling: touch; } .tab { background: var(--surface-2); color: var(--muted); font-size: 13px; padding: 8px 14px; border-radius: 999px; white-space: nowrap; font-weight: 500; flex: 0 0 auto; border: none; cursor: pointer; width: auto; } .tab.active { background: var(--accent); color: var(--accent-fg); } .action-btn { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; padding: 14px; border-radius: 12px; margin: 10px 0; } .toast { position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%); background: rgba(0, 0, 0, 0.85); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 13px; z-index: 100; animation: toast-fade 0.2s ease; } @keyframes toast-fade { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } } .card.highlight { animation: card-pulse 1.6s ease; border-color: var(--accent); } @keyframes card-pulse { 0% { box-shadow: 0 0 0 0 rgba(36, 129, 204, 0.55); } 60% { box-shadow: 0 0 0 14px rgba(36, 129, 204, 0); } 100% { box-shadow: 0 0 0 0 rgba(36, 129, 204, 0); } }