/** * Кабинет салона — оформление. * * Всё держится на переменных: цвета, отступы, скругления, тени. Это не педантизм — * благодаря им тёмная тема появляется одним блоком в конце файла, а не переписыванием * каждого правила. Классы те же, что были: разметку в app.js не трогаем без нужды. * * Принципы, по которым это собрано: * — воздух важнее украшений. Салон смотрит в календарь между клиентами, ему нужна * читаемость, а не градиенты; * — граница вместо тени. Тени только там, где элемент действительно «над» страницей * (модальное окно, всплывающее сообщение); * — одно фирменное пятно на экран. Фиолетовым выделяется действие, а не всё подряд; * — состояние видно всегда: наведение, нажатие, фокус с клавиатуры, отключённость. */ /* * Палитра — «Звёздная ночь» из брендбука. * * Светлая тема — то же небо на рассвете: холодные белые с синим подтоном и тот же синий * акцент, только затемнённый до читаемого на белом. Так рабочее пространство остаётся * одной вещью с сайтом, а салон не слепнет от ночного экрана в полдень. * * Тема выбирается человеком (`data-theme` на ), а по умолчанию берётся системная. * Поэтому каждый токен определён трижды: на голом :root — светлый, в media-запросе — для * тех, у кого система тёмная и выбора нет, и в `[data-theme=dark]` — для явного выбора. * Определить цвет только внутри media-запроса нельзя: переключатель тогда работает в одну * сторону. */ :root { /* Холодные нейтральные: белый с синим подтоном, а не серый */ --bg: #f2f5fb; --surface: #ffffff; --surface-2: #f8fafe; --surface-3: #eef2fa; --ink: #0e1726; --ink-2: #2f3d55; --muted: #5d6d88; --line: #dfe6f2; --line-strong: #c8d3e6; /* Фирменный синий со знака Каллисто */ --brand: #2f6fc4; --brand-hover: #275fab; --brand-active: #1f4f90; --brand-soft: #e4eefc; --brand-softer: #f1f7ff; --on-brand: #ffffff; --danger: #cf4040; --danger-soft: #fdeaea; --ok: #147a58; --ok-soft: #e0f5ec; --warn: #a8560a; --warn-soft: #fcf0dc; --info: #2f6fc4; --info-soft: #e4eefc; /* Шкала отступов — кратна 4, чтобы всё вставало на общую сетку */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --radius: 10px; --radius-sm: 7px; --radius-lg: 14px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(20, 21, 26, 0.05); --shadow: 0 4px 16px -4px rgba(20, 21, 26, 0.12), 0 2px 6px -2px rgba(20, 21, 26, 0.06); --shadow-lg: 0 24px 48px -12px rgba(20, 21, 26, 0.24); --ring: 0 0 0 3px var(--brand-soft); --sidebar-w: 236px; --fast: 120ms ease; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, ui-sans-serif, system-ui, sans-serif; font-size: 14px; line-height: 1.5; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { line-height: 1.25; letter-spacing: -0.015em; font-weight: 650; } h3 { font-size: 15px; } b, strong { font-weight: 620; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; background: var(--surface-3); padding: 1px 5px; border-radius: 5px; } a { color: var(--brand); } /* Фокус только с клавиатуры: мышью он выглядит как ошибка вёрстки */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } ::selection { background: var(--brand-soft); } /* ── Вход ───────────────────────────────────────────────── */ .auth-wrap { display: flex; align-items: center; justify-content: center; /* 100% не работает: у #app нет заданной высоты, и карточка прилипала к верху */ min-height: 100vh; padding: var(--s5); /* Мягкое пятно на фоне: страница входа — единственное место, где уместно украшение */ background: radial-gradient(60rem 40rem at 15% -10%, var(--brand-softer), transparent 60%), radial-gradient(50rem 34rem at 110% 110%, #fdf0f7, transparent 55%), var(--bg); } .auth-card { background: var(--surface); padding: var(--s8); border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow); width: 380px; max-width: 100%; } .auth-card h1 { margin-bottom: var(--s6); font-size: 24px; } .eyebrow { font-size: 11px; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--brand); margin-bottom: var(--s2); } .linkish { background: none; border: none; padding: 0; cursor: pointer; color: var(--muted); font-size: 12px; text-decoration: underline; text-underline-offset: 2px; font-family: inherit; } .linkish:hover { color: var(--brand); } .error { color: var(--danger); font-size: 13px; margin-top: var(--s2); } /* ── Каркас ─────────────────────────────────────────────── */ .shell { display: flex; height: 100vh; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: var(--s4) var(--s3); overflow-y: auto; } .brand { padding: var(--s2) var(--s3) var(--s4); margin-bottom: var(--s3); border-bottom: 1px solid var(--line); } .brand b { color: var(--brand); font-size: 17px; display: block; letter-spacing: -0.02em; } .brand span { color: var(--muted); font-size: 12px; display: block; margin-top: 2px; } .spacer { flex: 1; min-height: var(--s4); } .side-foot { font-size: 11px; color: var(--muted); padding: var(--s3); line-height: 1.55; border-top: 1px solid var(--line); margin-top: var(--s2); } .nav-btn { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: 9px var(--s3); text-align: left; border: none; background: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; font-family: inherit; color: var(--ink-2); margin-bottom: 1px; position: relative; transition: background var(--fast), color var(--fast); } .nav-btn svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.75; } .nav-btn:hover { background: var(--surface-3); color: var(--ink); } .nav-btn.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; } .nav-btn.active svg { opacity: 1; } /* Тонкая метка слева — активный пункт читается даже боковым зрением */ .nav-btn.active::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); } .content { flex: 1; overflow-y: auto; padding: var(--s6) var(--s8); } .topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s6); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); } .topbar h2 { font-size: 21px; } .topbar .sub { color: var(--muted); font-size: 13px; margin-top: 2px; } .row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); } /* ── Карточки ───────────────────────────────────────────── */ .card { background: var(--surface); padding: var(--s5); border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-sm); margin-bottom: var(--s3); } .card h3 { margin-bottom: var(--s2); } .muted { color: var(--muted); font-size: 12.5px; line-height: 1.55; } /* Пустое состояние: «ничего нет» должно выглядеть намеренно, а не как поломка */ .card.muted, .empty { display: flex; align-items: center; justify-content: center; min-height: 88px; text-align: center; color: var(--muted); border-style: dashed; border-color: var(--line-strong); background: var(--surface-2); } /* ── Кнопки ─────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px var(--s4); border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 13px; font-weight: 550; font-family: inherit; cursor: pointer; background: var(--brand); color: var(--on-brand); transition: background var(--fast), box-shadow var(--fast), transform var(--fast); white-space: nowrap; } .btn:hover { background: var(--brand-hover); } .btn:active { background: var(--brand-active); transform: translateY(1px); } .btn:focus-visible { box-shadow: var(--ring); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .btn.sm { padding: 6px var(--s3); font-size: 12.5px; } .btn.secondary { background: var(--surface); color: var(--ink-2); border-color: var(--line-strong); } .btn.secondary:hover { background: var(--surface-3); color: var(--ink); } .btn.secondary:active { background: var(--line); } .btn.danger { background: var(--danger); } .btn.danger:hover { background: #c03a3a; } .btn.ghost { background: transparent; color: var(--muted); border-color: var(--line); } .btn.ghost:hover { background: var(--surface-3); color: var(--ink); } /* ── Поля ───────────────────────────────────────────────── */ .field { margin-bottom: var(--s3); } .field label { display: block; font-size: 12px; font-weight: 550; color: var(--ink-2); margin-bottom: 5px; } .field input, .field select, .field textarea, .auth-card input { width: 100%; padding: 9px var(--s3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-size: 13.5px; font-family: inherit; color: var(--ink); background: var(--surface); transition: border-color var(--fast), box-shadow var(--fast); } .auth-card input { margin-bottom: var(--s3); } .field input::placeholder, .auth-card input::placeholder { color: #a9adbd; } .field input:hover, .field select:hover { border-color: var(--muted); } .field input:focus, .field select:focus, .field textarea:focus, .auth-card input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); } .field input[readonly] { background: var(--surface-3); color: var(--muted); } input[type='checkbox'] { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; } input[type='color'] { padding: 2px; height: 36px; cursor: pointer; } /* ── Таблицы ────────────────────────────────────────────── */ .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table th, .table td { padding: 10px var(--s3); border-bottom: 1px solid var(--line); text-align: left; } .table th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; background: var(--surface-2); position: sticky; top: 0; z-index: 1; } .table tbody tr { transition: background var(--fast); } .table tbody tr:hover { background: var(--brand-softer); } .table tbody tr:last-child td { border-bottom: none; } /* ── Значки состояния ───────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 600; background: var(--ok-soft); color: var(--ok); } .badge.trial { background: var(--warn-soft); color: var(--warn); } .badge.active { background: var(--ok-soft); color: var(--ok); } .badge.cancelled { background: var(--surface-3); color: var(--muted); } .badge.danger { background: var(--danger-soft); color: var(--danger); } .badge.info { background: var(--info-soft); color: var(--info); } /* ── Календарь ──────────────────────────────────────────── */ .cal-toolbar { display: flex; gap: var(--s2); margin-bottom: var(--s4); align-items: center; flex-wrap: wrap; } .cal-week { display: flex; gap: 5px; flex-wrap: wrap; } .cal-day-chip { padding: 7px var(--s3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; text-align: center; min-width: 54px; transition: all var(--fast); font-family: inherit; color: var(--ink); } .cal-day-chip:hover { border-color: var(--brand); background: var(--brand-softer); } .cal-day-chip.active { background: var(--brand); color: var(--on-brand); border-color: var(--brand); } .cal-day-chip .d { font-size: 17px; font-weight: 680; line-height: 1.2; } .cal-day-chip .w { font-size: 10px; text-transform: uppercase; opacity: 0.65; letter-spacing: 0.04em; } .cal-timeline { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .cal-gutter { width: 58px; flex-shrink: 0; background: var(--surface-2); border-right: 1px solid var(--line); } .cal-gutter-hour { height: 48px; display: flex; align-items: flex-start; justify-content: center; font-size: 10.5px; color: var(--muted); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; padding-top: 2px; } .cal-lane { flex: 1; min-width: 148px; position: relative; border-right: 1px solid var(--line); } .cal-lane:last-child { border-right: none; } .cal-lane-head { padding: 11px var(--s2); text-align: center; font-weight: 620; font-size: 12.5px; border-bottom: 1px solid var(--line-strong); color: var(--ink); background: var(--surface-2); } .cal-lane-body { position: relative; } .cal-lane-grid { position: absolute; inset: 0; } .cal-lane-grid div { height: 48px; border-bottom: 1px solid var(--line); } .cal-appt { position: absolute; left: 3px; right: 3px; border-radius: 6px; padding: 4px 7px; font-size: 11px; cursor: grab; overflow: hidden; color: #fff; transition: box-shadow var(--fast), transform var(--fast); z-index: 1; box-shadow: var(--shadow-sm); } .cal-appt:hover { box-shadow: var(--shadow); transform: scale(1.015); z-index: 3; } .cal-appt.dragging { opacity: 0.65; z-index: 5; cursor: grabbing; } .cal-appt.cancelled { opacity: 0.32; text-decoration: line-through; cursor: pointer; } .cal-appt .at { font-weight: 650; font-size: 10.5px; font-variant-numeric: tabular-nums; } .cal-appt .an { font-size: 10.5px; opacity: 0.9; } .cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 2; pointer-events: none; } .cal-now::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); } .cal-hour-hint { position: absolute; left: 0; right: 0; pointer-events: none; } /* ── Смены ──────────────────────────────────────────────── */ .shift-week { display: flex; } .shift-day { flex: 1; text-align: center; border-right: 1px solid var(--line); } .shift-day:last-child { border-right: none; } .shift-day-head { padding: var(--s2) var(--s1); font-weight: 600; font-size: 11px; background: var(--surface-2); border-bottom: 1px solid var(--line); color: var(--muted); } .shift-day-date { font-size: 17px; font-weight: 680; color: var(--ink); } .shift-master-row { display: flex; border-bottom: 1px solid var(--line); } .shift-master-row:last-child { border-bottom: none; } .shift-master-name { width: 132px; flex-shrink: 0; padding: 10px var(--s3); font-weight: 600; font-size: 13px; border-right: 1px solid var(--line); display: flex; align-items: center; gap: 7px; background: var(--surface-2); } .shift-master-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .shift-cell { flex: 1; padding: var(--s2) var(--s1); border-right: 1px solid var(--line); min-height: 58px; cursor: pointer; transition: background var(--fast); display: flex; flex-direction: column; gap: 3px; } .shift-cell:last-child { border-right: none; } .shift-cell:hover { background: var(--brand-softer); } .shift-cell.has-shift { background: var(--brand-soft); } .shift-block { background: var(--brand); color: var(--on-brand); padding: 3px 7px; border-radius: 5px; font-size: 10.5px; cursor: pointer; font-variant-numeric: tabular-nums; } .shift-block:hover { background: var(--brand-hover); } .shift-tag { display: inline-block; padding: 2px 7px; border-radius: 5px; font-size: 10px; background: var(--brand-soft); color: var(--brand); margin: 1px; } /* ── Модальное окно ─────────────────────────────────────── * * * Классы здесь именно те, что стоят в разметке (`.modal-backdrop` / `.modal`). Раньше в * стилях описывались `.modal-mask` / `.modal-box`, которых в разметке нет, — окно * открывалось вообще без оформления: без затемнения, во всю правую половину экрана. * Ни компилятор, ни тесты такого не видят, только глаза. */ .modal-backdrop { position: fixed; inset: 0; background: rgba(20, 21, 26, 0.45); backdrop-filter: blur(2px); z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--s4); animation: fade var(--fast); } .modal { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-lg); width: 520px; max-width: 100%; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; animation: pop 150ms cubic-bezier(0.2, 0.9, 0.3, 1); } .modal > header { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s5) var(--s6); border-bottom: 1px solid var(--line); } .modal > header h3 { font-size: 16px; margin: 0; } .modal > .body { padding: var(--s5) var(--s6); overflow-y: auto; } .modal .actions { display: flex; gap: var(--s2); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); } /* Опасное действие уводим влево, подальше от «Сохранить» */ .modal .actions #m-delete { margin-right: auto; } .modal-mask { position: fixed; inset: 0; background: rgba(20, 21, 26, 0.45); backdrop-filter: blur(2px); z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--s4); animation: fade var(--fast); } .modal-box { background: var(--surface); padding: var(--s6); border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-lg); min-width: 400px; max-width: 92vw; max-height: 86vh; overflow-y: auto; animation: pop 150ms cubic-bezier(0.2, 0.9, 0.3, 1); } @keyframes fade { from { opacity: 0; } } @keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.985); } } /* ── Всплывающее сообщение ──────────────────────────────── */ .toast { position: fixed; bottom: var(--s6); right: var(--s6); background: var(--ink); color: #fff; padding: var(--s3) var(--s5); border-radius: var(--radius); z-index: 80; max-width: min(380px, calc(100vw - 32px)); box-shadow: var(--shadow-lg); font-size: 13px; line-height: 1.5; animation: pop 160ms cubic-bezier(0.2, 0.9, 0.3, 1); } /* ── Диалоги ────────────────────────────────────────────── */ .msg-in { background: var(--surface-3); margin-right: 18%; } .msg-out { background: var(--brand-soft); margin-left: 18%; } .msg-out-staff { background: var(--warn-soft); margin-left: 18%; border-left: 3px solid var(--warn); } .msg-system { background: var(--surface-2); text-align: center; font-size: 11px; color: var(--muted); } .conv-row { transition: background var(--fast); } .conv-row:hover { background: var(--brand-softer); } /* ── Числа ──────────────────────────────────────────────── */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s3); margin-bottom: var(--s4); } .stat { background: var(--surface); padding: var(--s5); border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .stat .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .stat .v { font-size: 27px; font-weight: 680; margin-top: 5px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } /* ── Ошибка ─────────────────────────────────────────────── */ .error-box { background: var(--danger-soft); color: var(--danger); padding: 10px var(--s3); border-radius: var(--radius-sm); font-size: 12.5px; margin-bottom: var(--s3); border: 1px solid #f5cfcf; } .boot { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); } /* ── Телефон ────────────────────────────────────────────── * * * Кабинет верстался под десктоп, а салон живёт с телефоном в руках: мастер смотрит записи * между клиентами, владелец — по дороге. Боковое меню на 236 px из 375 px съедает больше * половины ширины, поэтому на узких экранах оно превращается в ленту сверху. */ @media (max-width: 860px) { .shell { flex-direction: column; height: auto; min-height: 100vh; } .sidebar { width: auto; border-right: none; border-bottom: 1px solid var(--line); flex-direction: row; gap: var(--s1); padding: var(--s2); align-items: center; overflow-x: auto; overflow-y: hidden; position: sticky; top: 0; z-index: 20; scrollbar-width: none; } .sidebar::-webkit-scrollbar { display: none; } .brand { flex: 0 0 auto; margin-right: var(--s2); padding: 0 var(--s2) 0 var(--s1); border-bottom: none; border-right: 1px solid var(--line); } .brand span { display: none; } .nav-btn { width: auto; white-space: nowrap; padding: 8px var(--s3); margin-bottom: 0; } .nav-btn.active::before { display: none; } .nav-btn span { display: none; } /* на ленте остаются значки, подписи не влезают */ .nav-btn.active span { display: inline; } .spacer, .side-foot { display: none; } .content { padding: var(--s4); } .topbar { flex-direction: column; align-items: flex-start; gap: var(--s3); } .grid-2 { grid-template-columns: 1fr; } table { display: block; overflow-x: auto; white-space: nowrap; } .table th { position: static; } /* Пальцем в кнопку 24 px не попасть */ .btn, input, select { min-height: 40px; } .btn.sm { min-height: 34px; } .nav-btn { min-height: 38px; } .cal-timeline { overflow-x: auto; } .modal-box { min-width: 0; width: 100%; padding: var(--s5); } .modal { width: 100%; max-height: 92vh; } .modal > header, .modal > .body { padding-left: var(--s4); padding-right: var(--s4); } .toast { left: var(--s3); right: var(--s3); bottom: var(--s3); max-width: none; } } /* ── Тёмная тема: «Звёздная ночь» ───────────────────────── * * * Кабинет открыт весь день, и вечером белый экран режет глаза. Меняем только переменные: * ниже нет ни одного нового правила — если что-то в тёмной теме выглядит не так, значит * где-то в разметке остался жёстко прописанный цвет, и чинить надо там. * * Ночь здесь именно фон, а не украшение: никаких звёзд поверх календаря. Салон в этом * окне работает, и мерцающая точка рядом с записью на 14:30 — это помеха, а не стиль. * Звёзды живут на витрине, где им и место. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bg: #070c16; --surface: #0e1626; --surface-2: #121c2e; --surface-3: #182339; --ink: #e8eefb; --ink-2: #bcc9e0; --muted: #8496b3; --line: #1d2942; --line-strong: #2a3a58; --brand: #6ba5e7; --brand-hover: #85b6ee; --brand-active: #5b93d4; --brand-soft: #14273f; --brand-softer: #0f1e31; --on-brand: #06101d; --danger: #ef8080; --danger-soft: #331a1c; --ok: #5ed3a2; --ok-soft: #0f2a20; --warn: #e0a458; --warn-soft: #2b2113; --info: #6ba5e7; --info-soft: #14273f; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.6), 0 2px 6px -2px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.75); --ring: 0 0 0 3px rgba(107, 165, 231, 0.3); } } /* Явный выбор человека — сильнее системной настройки, в обе стороны */ :root[data-theme='dark'] { --bg: #070c16; --surface: #0e1626; --surface-2: #121c2e; --surface-3: #182339; --ink: #e8eefb; --ink-2: #bcc9e0; --muted: #8496b3; --line: #1d2942; --line-strong: #2a3a58; --brand: #6ba5e7; --brand-hover: #85b6ee; --brand-active: #5b93d4; --brand-soft: #14273f; --brand-softer: #0f1e31; --on-brand: #06101d; --danger: #ef8080; --danger-soft: #331a1c; --ok: #5ed3a2; --ok-soft: #0f2a20; --warn: #e0a458; --warn-soft: #2b2113; --info: #6ba5e7; --info-soft: #14273f; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.6), 0 2px 6px -2px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.75); --ring: 0 0 0 3px rgba(107, 165, 231, 0.3); } /* Правила, а не только цвета, — для обоих способов включить тёмную тему */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .auth-wrap { background: var(--night-auth-bg); } :root:not([data-theme='light']) .toast { background: var(--surface-3); color: var(--ink); border: 1px solid var(--line-strong); } :root:not([data-theme='light']) .error-box { border-color: #4a2626; } /* Цветные плашки записей приходят из настроек мастера и рассчитаны на светлый фон */ :root:not([data-theme='light']) .cal-appt { filter: saturate(0.85) brightness(0.92); } } :root[data-theme='dark'] .auth-wrap { background: var(--night-auth-bg); } :root[data-theme='dark'] .toast { background: var(--surface-3); color: var(--ink); border: 1px solid var(--line-strong); } :root[data-theme='dark'] .error-box { border-color: #4a2626; } :root[data-theme='dark'] .cal-appt { filter: saturate(0.85) brightness(0.92); } :root { /* Фон страницы входа в тёмной теме — вынесен в переменную, чтобы не дублировать градиент в двух селекторах и не разъехаться при правке */ --night-auth-bg: radial-gradient(60rem 40rem at 15% -10%, #10203a, transparent 60%), radial-gradient(50rem 34rem at 110% 110%, #0d1a2e, transparent 55%), var(--bg); } /* ── Переключатель темы ─────────────────────────────────── */ .theme-toggle { display: flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--line); color: var(--muted); padding: 5px 9px; border-radius: var(--radius-pill); cursor: pointer; font-size: 12px; transition: color var(--fast), border-color var(--fast), background var(--fast); } .theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface-2); } .theme-toggle svg { width: 14px; height: 14px; } /* Уважаем системную настройку «меньше движения» */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Кружок цвета мастера. Показывать сам код (#E84393) в таблице бессмысленно — салон выбирает цвет глазами, а не по шестнадцатеричной записи. */ .swatch { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 9px; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) inset; } .dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; } /* ── Пошаговые инструкции подключения ────────────────────── */ /* * Нумерованный список здесь не годится: в шагах живут кнопки и поля, а маркер списка * съезжает относительно многострочного блока. Своя сетка держит номер и содержимое ровно. */ .steps { display: flex; flex-direction: column; gap: var(--s4); margin: var(--s5) 0; } .step { display: grid; grid-template-columns: 26px 1fr; gap: var(--s3); align-items: start; } .step-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 12.5px; font-weight: 650; } .step > div { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; } .step b { color: var(--ink); } /* Команда, которую надо отправить боту: нажал — скопировалось, без выделения мышью */ .copy-line { display: inline-flex; align-items: center; gap: var(--s3); margin-top: var(--s2); padding: 7px 12px; background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; transition: border-color var(--fast), background var(--fast); } .copy-line:hover { border-color: var(--brand); background: var(--brand-softer); } .copy-line code { background: none; padding: 0; font-size: 13px; color: var(--ink); } .copy-line span { font-size: 11.5px; color: var(--muted); } .copy-line.done span { color: var(--ok); } /* Запасной способ подключения — свёрнут, чтобы не спорить с основным за внимание */ .fallback { margin-top: var(--s5); border-top: 1px solid var(--line); padding-top: var(--s4); } .fallback summary { cursor: pointer; font-size: 13px; color: var(--muted); list-style: none; display: inline-flex; align-items: center; gap: 6px; } .fallback summary::-webkit-details-marker { display: none; } .fallback summary::before { content: '▸'; transition: transform var(--fast); display: inline-block; } .fallback[open] summary::before { transform: rotate(90deg); } .fallback summary:hover { color: var(--brand); } .fallback > *:not(summary) { margin-top: var(--s3); }