/* Личный кабинет "Задачи" — Telegram Mini App. Собственная пастельная палитра (светлая/тёмная), переключается через data-theme на , который выставляет app.js по tg.colorScheme — сознательно НЕ полагаемся на --tg-theme-* переменные Telegram для критичных цветов текста/поверхностей: у части клиентских тем они приходят несогласованной парой (например светлый secondary-bg-color при тёмном text-color), из-за чего часть текста становится нечитаемой. Собственная палитра гарантирует контраст независимо от темы клиента. */ :root { --bg: #f6f4fb; --bg-secondary: #eee9f7; --card: #ffffff; --text: #3a3550; --hint: #8d87a3; --accent: #7c93f0; --accent-text: #ffffff; --link: #6c8ee6; --border: #e3dff2; --ok: #3f9c72; --ok-bg: rgba(63,156,114,.14); --ok-border: rgba(63,156,114,.35); --warn: #b9822a; --warn-bg: rgba(185,130,42,.16); --danger: #d1554b; --danger-bg: rgba(209,85,75,.12); --danger-border: rgba(209,85,75,.35); --neutral-bg: rgba(141,135,163,.14); --radius: 14px; } :root[data-theme="dark"] { --bg: #211f2e; --bg-secondary: #2b283b; --card: #322f45; --text: #f1eef9; --hint: #b3aac9; --accent: #9db4f5; --accent-text: #211f2e; --link: #a9c0f7; --border: #3e3a52; --ok: #7ed9a8; --ok-bg: rgba(126,217,168,.16); --ok-border: rgba(126,217,168,.4); --warn: #f0c27a; --warn-bg: rgba(240,194,122,.16); --danger: #f2948c; --danger-bg: rgba(242,148,140,.16); --danger-border: rgba(242,148,140,.4); --neutral-bg: rgba(179,170,201,.16); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.45; } #app { max-width: 560px; margin: 0 auto; padding: 12px 14px 32px; min-height: 100vh; } .topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-top: 6px; } .topbar h1 { font-size: 19px; margin: 0; font-weight: 600; } .topbar .org-name { color: var(--hint); font-size: 13px; margin-top: 2px; } .icon-btn { background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text); border-radius: 10px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; } .card + .card { margin-top: 0; } .card-title { font-size: 13px; color: var(--hint); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 10px; } .balance-amount { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); } .balance-sub { color: var(--hint); font-size: 13px; margin-top: 4px; } .badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; } .badge.ok { background: var(--ok-bg); color: var(--ok); } .badge.warn { background: var(--warn-bg); color: var(--warn); } .badge.danger { background: var(--danger-bg); color: var(--danger); } .badge.neutral { background: var(--neutral-bg); color: var(--hint); } .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .status-dot.active { background: var(--ok); } .status-dot.limited { background: var(--warn); } .status-dot.frozen { background: var(--danger); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--accent); color: var(--accent-text); border: none; border-radius: 12px; padding: 12px 16px; font-size: 15px; font-weight: 600; cursor: pointer; width: 100%; } .btn:disabled { opacity: .5; cursor: default; } .btn.secondary { background: var(--bg-secondary); color: var(--text); border: 1px solid var(--border); } .btn.danger { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); } .btn.small { width: auto; padding: 8px 12px; font-size: 13px; } .row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; } .row + .row { border-top: 1px solid var(--border); } .list-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; cursor: pointer; } .list-row + .list-row { border-top: 1px solid var(--border); } .list-row .main { flex: 1; min-width: 0; } .list-row .name { font-weight: 600; } .list-row .meta { color: var(--hint); font-size: 13px; margin-top: 2px; } .list-row .chevron { color: var(--hint); margin-left: 8px; } .toggle { position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--border); border: none; cursor: pointer; flex-shrink: 0; } .toggle.on { background: var(--accent); } .toggle .knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease; } .toggle.on .knob { transform: translateX(18px); } input[type=text], input[type=number], textarea { width: 100%; background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 11px 12px; font-size: 15px; margin-bottom: 10px; } input::placeholder, textarea::placeholder { color: var(--hint); } label.field-label { display: block; font-size: 13px; color: var(--hint); margin-bottom: 6px; } .chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .chip { background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 8px 14px; font-size: 14px; cursor: pointer; } .chip.selected { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } .nav-tabs { position: sticky; bottom: 0; display: flex; gap: 4px; background: var(--bg); padding: 8px 0 4px; margin-top: 16px; border-top: 1px solid var(--border); } .nav-tab { flex: 1; text-align: center; padding: 8px 4px; border-radius: 10px; color: var(--hint); font-size: 11px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; } .nav-tab .glyph { font-size: 18px; } .nav-tab.active { color: var(--accent); } .empty-hint { color: var(--hint); text-align: center; padding: 24px 10px; font-size: 14px; } .section-title { font-size: 13px; color: var(--hint); text-transform: uppercase; letter-spacing: .03em; margin: 20px 2px 8px; } .section-title:first-child { margin-top: 4px; } .error-banner { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; } .success-banner { background: var(--ok-bg); border: 1px solid var(--ok-border); color: var(--ok); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; } .spinner-wrap { display: flex; justify-content: center; padding: 40px 0; color: var(--hint); } a { color: var(--link); } .article-body { color: var(--hint); font-size: 14px; margin-top: 6px; } .help-text { color: var(--hint); font-size: 13px; margin-top: 4px; }