/* Общий вид трёх страниц, которые видит НЕвошедший: вход, первый запуск и приглашение. Отдельный файл, а не копия стилей в каждой: три одинаковых карточки, разъехавшиеся по мелочам, выглядят как три разных сервиса. Отдаётся без авторизации (см. OPEN_PREFIXES в web.py) — иначе форма входа приезжала бы без стилей. Ш36: цвета переехали в токены и получили тёмную тему — ту же и тем же способом, что в терминале (`data-theme` на ставит скрипт в ). Своя палитра здесь была бы двумя источниками правды об одном фирменном цвете, а светлая страница входа после тёмного терминала бьёт по глазам ровно в тот момент, когда человек ничего не выбирал. */ :root { color-scheme: light; --bg: #E9EEF4; --surface: #FFFFFF; --ink: #0F1A24; --ink-2: #51687A; --ink-3: #90A5B5; --ink-4: #7B93A6; --line: #E0E7EE; --accent: #2AABEE; --accent-deep: #0F76AC; --on-accent: #FFFFFF; --muted-btn: #A9C4D6; --code-bg: #F1F6FA; --danger: #C13A3A; --shadow: 0 1px 2px rgba(18,33,46,.06), 0 10px 34px rgba(18,33,46,.08); } :root[data-theme="dark"] { color-scheme: dark; --bg: #0D151C; --surface: #151F29; --ink: #E4EDF4; --ink-2: #A2B6C5; --ink-3: #6D8497; --ink-4: #7E93A4; --line: #26343F; --accent: #2E9FDE; --accent-deep: #7CCBF7; --on-accent: #06202D; --muted-btn: #33485A; --code-bg: #1B2733; --danger: #F08A8A; --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 34px rgba(0,0,0,.45); } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--bg); color: var(--ink); font: 14px/1.45 Arial, "Helvetica Neue", Helvetica, "Segoe UI", Roboto, sans-serif; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 30px 32px; width: 360px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; margin-bottom: 4px; } .mark { width: 26px; height: 26px; border-radius: 7px; flex: none; background: linear-gradient(135deg, #2AABEE, #0F76AC); position: relative; } /* самолётик на фирменном градиенте — белый в любой теме: градиент под ним свой */ .mark::after { content: ""; position: absolute; left: 7px; top: 9px; width: 12px; height: 9px; background: #fff; clip-path: polygon(0 45%, 100% 0, 62% 100%, 38% 62%); } .sub { color: var(--ink-3); font-size: 12.5px; margin-bottom: 20px; } label { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; margin-top: 12px; } label:first-of-type { margin-top: 0; } input { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; font: inherit; background: var(--surface); color: var(--ink); } input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } button { width: 100%; margin-top: 18px; border: none; border-radius: 9px; padding: 10px; background: var(--accent); color: var(--on-accent); font: 600 14px inherit; font-family: inherit; cursor: pointer; } button:hover { background: var(--accent-deep); } button[disabled] { background: var(--muted-btn); cursor: default; } .err { color: var(--danger); font-size: 13px; margin-top: 10px; min-height: 18px; } .hint { color: var(--ink-4); font-size: 12px; margin-top: 14px; line-height: 1.5; } .hint code { background: var(--code-bg); padding: 1px 5px; border-radius: 5px; font-size: 11.5px; } /* Ш-multiacc: вошедший пришёл за второй учёткой — рамкой над полями, а не строкой под кнопкой: это ответ на «почему я снова вижу вход», и читать его надо ДО пароля */ .another { margin: 0 0 14px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--code-bg); color: var(--ink-2); } .another b { color: var(--ink); font-weight: 600; } .another a { color: var(--accent-deep); text-decoration: none; white-space: nowrap; } .another a:hover { text-decoration: underline; } /* Ш52: ожидание нажатия в боте. Строка со «спиннером» стоит НАД полем кода — она и есть главное действие этого шага, а поле остаётся запасным путём. */ .wait { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; line-height: 1.45; } .spin { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* «Уже не крутится» — это ответ, а не украшение: ожидание кончилось, и дальше человек нажимает сам. Прячем целиком, чтобы не спорить с текстом рядом. */ .spin[hidden] { display: none; }