/* ========================================================================= ПУСК-чекер — дизайн-система Чистый CSS, без фреймворков и сборки. Порядок разделов: 1. Шрифты 2. Токены и темы 3. База 4. Утилиты 5. Компоненты 6. Экраны ========================================================================= */ /* ---------------------------------------------------------------- 1. Шрифты Self-host: файлы лежат в public/fonts, внешние CDN недоступны в контуре. Переменные шрифты — один файл на весь диапазон насыщенности. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('fonts/jetbrains-mono-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* -------------------------------------------------- 2. Токены и темы Тёмная — основная. Светлая включается системной настройкой или кнопкой (data-theme на ). */ :root { color-scheme: dark; /* Типографика */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-11: 0.6875rem; /* 11 */ --fs-12: 0.75rem; /* 12 */ --fs-13: 0.8125rem; /* 13 */ --fs-14: 0.875rem; /* 14 */ --fs-15: 0.9375rem; /* 15 */ --fs-16: 1rem; /* 16 */ --fs-18: 1.125rem; /* 18 */ --fs-20: 1.25rem; /* 20 */ --fs-26: 1.625rem; /* 26 */ --fs-34: 2.125rem; /* 34 */ --fs-44: 2.75rem; /* 44 */ --lh-tight: 1.15; --lh-snug: 1.35; --lh-base: 1.55; /* Сетка отступов — шаг 4px */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* Радиусы */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px; /* Движение */ --dur-1: 120ms; --dur-2: 180ms; --dur-3: 260ms; --ease: cubic-bezier(0.2, 0.6, 0.3, 1); /* Слои поверхностей */ --bg: #0A0B0C; --surface: #101214; --surface-2: #16191B; --surface-3: #1C2023; --line: #23282B; --line-2: #2E3438; /* Текст */ --ink: #EDF0F2; --ink-2: #A4AEB4; --ink-3: #8A9399; /* Акцент и статусы */ --accent: #5AA2FF; --accent-soft: rgba(90, 162, 255, 0.14); --ring: rgba(90, 162, 255, 0.34); --accent-ink: #06101F; --busy: #FF6B6B; --busy-soft: rgba(255, 107, 107, 0.12); --on-busy: #1A0606; --free: #45D19A; --free-soft: rgba(69, 209, 154, 0.12); --warn: #E8B563; --warn-soft: rgba(232, 181, 99, 0.12); /* Данные на диаграмме — одна серия, один тон */ --data: #6EA8FF; --data-track: rgba(110, 168, 255, 0.14); /* Тени — только для всплывающих слоёв */ --surface-pop: #1A1D1F; --shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 48px -12px rgba(0, 0, 0, 0.7); --scrim: rgba(4, 6, 8, 0.72); } /* Светлая тема — по системной настройке, если пользователь не выбрал тёмную вручную */ @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) { color-scheme: light; --bg: #F6F7F8; --surface: #FFFFFF; --surface-2: #FAFBFB; --surface-3: #F1F3F4; --line: #E3E6E8; --line-2: #D3D8DB; --ink: #101315; --ink-2: #545C61; --ink-3: #5F686D; --accent: #0B65D0; --accent-soft: rgba(11, 101, 208, 0.10); --ring: rgba(11, 101, 208, 0.24); --accent-ink: #FFFFFF; --busy: #C9302C; --busy-soft: rgba(201, 48, 44, 0.09); --on-busy: #FFFFFF; --free: #0F7A4F; --free-soft: rgba(15, 122, 79, 0.10); --warn: #8A5B00; --warn-soft: rgba(138, 91, 0, 0.10); --data: #2C74C9; --data-track: rgba(44, 116, 201, 0.13); --surface-pop: #FFFFFF; --shadow-pop: 0 1px 2px rgba(16, 19, 21, 0.06), 0 18px 48px -14px rgba(16, 19, 21, 0.24); --scrim: rgba(16, 19, 21, 0.34); } } /* Светлая тема — выбрана кнопкой */ :root[data-theme='light'] { color-scheme: light; --bg: #F6F7F8; --surface: #FFFFFF; --surface-2: #FAFBFB; --surface-3: #F1F3F4; --line: #E3E6E8; --line-2: #D3D8DB; --ink: #101315; --ink-2: #545C61; --ink-3: #5F686D; --accent: #0B65D0; --accent-soft: rgba(11, 101, 208, 0.10); --ring: rgba(11, 101, 208, 0.24); --accent-ink: #FFFFFF; --busy: #C9302C; --busy-soft: rgba(201, 48, 44, 0.09); --on-busy: #FFFFFF; --free: #0F7A4F; --free-soft: rgba(15, 122, 79, 0.10); --warn: #8A5B00; --warn-soft: rgba(138, 91, 0, 0.10); --data: #2C74C9; --data-track: rgba(44, 116, 201, 0.13); --surface-pop: #FFFFFF; --shadow-pop: 0 1px 2px rgba(16, 19, 21, 0.06), 0 18px 48px -14px rgba(16, 19, 21, 0.24); --scrim: rgba(16, 19, 21, 0.34); } /* ------------------------------------------------------------------ 3. База */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: var(--fs-15); line-height: var(--lh-base); font-feature-settings: 'cv05' 1, 'ss03' 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, p, ul, dl, dd, figure { margin: 0; } ul { padding: 0; list-style: none; } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } :focus:not(:focus-visible) { outline: none; } ::selection { background: var(--accent-soft); } /* --------------------------------------------------------------- 4. Утилиты */ .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'zero' 1; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .h1 { font-size: var(--fs-20); font-weight: 600; letter-spacing: -0.015em; line-height: var(--lh-snug); } .h2 { font-size: var(--fs-16); font-weight: 600; letter-spacing: -0.01em; line-height: var(--lh-snug); } .h3 { font-size: var(--fs-14); font-weight: 600; letter-spacing: -0.005em; } .eyebrow { font-size: var(--fs-11); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ---------------------------------------------------------- 5. Компоненты */ /* -- Карточка --------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); } .card + .card { margin-top: var(--sp-5); } .card__title { font-size: var(--fs-18); font-weight: 600; letter-spacing: -0.015em; } .card__sub { margin-top: var(--sp-2); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-snug); max-width: 62ch; } .card__sub--tight { margin-top: 2px; } .card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); } /* -- Поля ------------------------------------------------------------- */ .field { margin-top: var(--sp-5); } .field:first-child { margin-top: 0; } .field__label { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-12); font-weight: 500; color: var(--ink-2); } .input { width: 100%; min-height: 42px; padding: 10px 12px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-md); font-family: inherit; font-size: var(--fs-15); line-height: 1.4; transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); } .input::placeholder { color: var(--ink-3); opacity: 1; } .input:hover { border-color: var(--line-2); background: var(--surface-3); } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); background: var(--surface-2); } .input:focus-visible { outline: none; } .input--area { min-height: 92px; resize: vertical; font-size: var(--fs-13); line-height: 1.5; } .input--inn, .input--code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; } .input--inn { font-size: var(--fs-20); min-height: 52px; padding: 12px 14px; } .input--code { font-size: var(--fs-20); letter-spacing: 0.34em; text-align: center; min-height: 52px; } .input--code4 { letter-spacing: 0.3em; } /* -- Кнопки ----------------------------------------------------------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 42px; padding: 0 var(--sp-4); border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--ink); font-family: inherit; font-size: var(--fs-14); font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: default; } .btn--primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; } .btn--primary:hover:not(:disabled) { filter: brightness(1.08); } .btn--primary:active:not(:disabled) { filter: brightness(0.94); } .btn--ghost { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); } .btn--ghost:hover:not(:disabled) { background: var(--surface-3); border-color: var(--line-2); } .btn--link { background: none; border: 0; padding: 0; min-height: 0; color: var(--accent); font-size: var(--fs-13); } .btn--link:hover { text-decoration: underline; } .btn--sm { min-height: 34px; padding: 0 var(--sp-3); font-size: var(--fs-13); } .btn--lg { min-height: 52px; padding: 0 var(--sp-6); font-size: var(--fs-15); } .btn--block { width: 100%; margin-top: var(--sp-5); } /* Кнопка сразу после поля или выбора файла не должна к ним прилипать */ .field + .btn, .file + .btn, .input + .btn { margin-top: var(--sp-4); } .btn--dl { margin-top: var(--sp-4); } .btn__label { display: inline-block; } /* Загрузка: спиннер появляется на месте, ширина кнопки не скачет */ .spinner { display: none; width: 15px; height: 15px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; opacity: 0.85; animation: spin 720ms linear infinite; } .btn.is-loading .spinner { display: block; } .btn.is-loading { pointer-events: none; } @keyframes spin { to { transform: rotate(360deg); } } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; padding: 0; border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--ink-2); cursor: pointer; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .icon-btn:hover { background: var(--surface-3); color: var(--ink); } .icon-btn .ic-moon { display: none; } :root[data-theme='light'] .icon-btn .ic-sun { display: none; } :root[data-theme='light'] .icon-btn .ic-moon { display: block; } @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) .icon-btn .ic-sun { display: none; } :root:not([data-theme='dark']) .icon-btn .ic-moon { display: block; } } /* -- Сообщения -------------------------------------------------------- */ .msg { margin-top: var(--sp-3); font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--ink-2); min-height: 18px; } .msg:empty { margin-top: 0; min-height: 0; } .msg--err { color: var(--busy); } /* -- Переключатель --------------------------------------------------- */ .seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); } .seg__btn { padding: 5px 11px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); font-family: inherit; font-size: var(--fs-12); font-weight: 500; cursor: pointer; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .seg__btn:hover { color: var(--ink); } .seg__btn.is-active { background: var(--surface-3); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); } /* -- Чекбокс-переключатель -------------------------------------------- */ .switch { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; font-size: var(--fs-13); color: var(--ink-2); } .switch__input { position: absolute; opacity: 0; width: 0; height: 0; } .switch__track { position: relative; width: 36px; height: 20px; flex: none; border-radius: var(--r-full); background: var(--surface-3); border: 1px solid var(--line-2); transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); } .switch__thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-3); transition: transform var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease); } .switch__input:checked + .switch__track { background: var(--accent); border-color: var(--accent); } .switch__input:checked + .switch__track .switch__thumb { transform: translateX(16px); background: var(--accent-ink); } .switch__input:focus-visible + .switch__track { outline: 2px solid var(--accent); outline-offset: 2px; } /* -- Пилюля / тег ----------------------------------------------------- */ .pill { padding: 2px 8px; border: 1px solid var(--line-2); border-radius: var(--r-full); font-size: var(--fs-11); color: var(--ink-2); white-space: nowrap; } /* -- Статус-строка ---------------------------------------------------- */ .status { display: flex; align-items: flex-start; gap: var(--sp-3); margin-top: var(--sp-4); } .status__dot { width: 8px; height: 8px; margin-top: 7px; flex: none; border-radius: 50%; background: var(--ink-3); } .status__dot.is-ok { background: var(--free); box-shadow: 0 0 0 3px var(--free-soft); } .status__dot.is-warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); } .status__dot.is-bad { background: var(--busy); box-shadow: 0 0 0 3px var(--busy-soft); } .status__text { font-size: var(--fs-14); line-height: var(--lh-snug); } .meta { margin-top: var(--sp-4); border-top: 1px solid var(--line); } .meta__row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-13); } .meta__row dt { color: var(--ink-3); } .meta__row dd { margin: 0; color: var(--ink-2); text-align: right; } /* -- Выноска ---------------------------------------------------------- */ .callout { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--warn-soft); border: 1px solid transparent; border-left: 2px solid var(--warn); border-radius: var(--r-sm); font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--ink-2); } .callout .ic { color: var(--warn); margin-top: 1px; } /* -- Таблица ---------------------------------------------------------- */ .tbl { width: 100%; border-collapse: collapse; margin-top: var(--sp-4); font-size: var(--fs-13); } .tbl th, .tbl td { padding: 6px 0; text-align: left; line-height: 1.4; border-bottom: 1px solid var(--line); } .tbl thead th { font-size: var(--fs-11); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); } .tbl__num { text-align: right; font-variant-numeric: tabular-nums; } .tbl td.tbl__num { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-2); } .tbl tbody td:first-child { color: var(--ink); } .tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; } /* -- Прогресс --------------------------------------------------------- */ .progress { margin-top: var(--sp-4); } .progress__track { height: 6px; background: var(--surface-3); border-radius: var(--r-full); overflow: hidden; } .progress__fill { height: 100%; width: 0; background: var(--accent); border-radius: var(--r-full); transition: width var(--dur-3) var(--ease); } .progress__text { margin-top: var(--sp-2); font-size: var(--fs-12); color: var(--ink-2); font-variant-numeric: tabular-nums; } /* -- Файл ------------------------------------------------------------- */ .file { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); flex-wrap: wrap; } .file__input { position: absolute; width: 1px; height: 1px; opacity: 0; } .file__btn { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 38px; padding: 0 var(--sp-4); background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: var(--r-md); font-size: var(--fs-13); color: var(--ink); cursor: pointer; transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); } .file__btn:hover { background: var(--surface-3); border-color: var(--accent); } .file__input:focus-visible + .file__name, .file__input:focus-visible ~ .file__name { outline: none; } .file:focus-within .file__btn { outline: 2px solid var(--accent); outline-offset: 2px; } .file__name { font-size: var(--fs-12); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* -- Модалки ---------------------------------------------------------- */ .modal { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-xl); background: var(--surface-pop); color: var(--ink); box-shadow: var(--shadow-pop); } .modal--wide { width: min(720px, calc(100vw - 32px)); } .modal::backdrop { background: var(--scrim); } .modal[open] { animation: pop var(--dur-2) var(--ease); } @keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.985); } } .modal__in { padding: var(--sp-6); } .modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); } .modal__title { font-size: var(--fs-16); font-weight: 600; letter-spacing: -0.01em; } .modal__text { margin-top: var(--sp-3); font-size: var(--fs-14); line-height: var(--lh-snug); color: var(--ink-2); white-space: pre-line; } .modal__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-6); } .modal__actions .btn--primary.is-danger { background: var(--busy); color: var(--on-busy); } /* -------------------------------------------------------------- 6. Экраны */ /* -- Вход ------------------------------------------------------------- */ .auth { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--sp-8) var(--sp-4); background: var(--bg); } .auth__theme { position: fixed; top: var(--sp-4); right: var(--sp-4); } .auth__inner { width: 100%; max-width: 380px; } .auth__lead { margin-top: var(--sp-2); color: var(--ink-2); font-size: var(--fs-14); } .auth__card { margin-top: var(--sp-6); } .auth__foot { margin-top: var(--sp-5); text-align: center; font-size: var(--fs-12); color: var(--ink-3); } .brand { display: inline-flex; align-items: center; gap: var(--sp-3); } .brand__mark { display: inline-flex; width: 26px; height: 26px; color: var(--accent); } .brand__mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .brand__name { font-size: var(--fs-15); font-weight: 600; letter-spacing: -0.01em; } .brand--lg .brand__mark { width: 34px; height: 34px; } .brand--lg .brand__name { font-size: var(--fs-20); letter-spacing: -0.02em; } /* -- Каркас приложения ------------------------------------------------ */ .topbar { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); } .topbar__in { display: flex; align-items: center; gap: var(--sp-6); max-width: 1360px; margin: 0 auto; padding: 0 var(--sp-6); height: 56px; } .topbar__right { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; } .topbar__sep { width: 1px; height: 20px; background: var(--line); } .user { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; margin-right: var(--sp-2); } .user__name { font-size: var(--fs-13); font-weight: 500; } .user__role { font-size: var(--fs-11); color: var(--ink-3); } .tabs { display: flex; gap: var(--sp-1); } .tab { position: relative; padding: 0 var(--sp-3); height: 56px; border: 0; background: none; color: var(--ink-2); font-family: inherit; font-size: var(--fs-13); font-weight: 500; cursor: pointer; transition: color var(--dur-1) var(--ease); } .tab:hover { color: var(--ink); } .tab.is-active { color: var(--ink); } .tab.is-active::after { content: ''; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; } .main { max-width: 1360px; margin: 0 auto; padding: var(--sp-8) var(--sp-6) var(--sp-16); } .layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-5); align-items: start; } .layout__main { min-width: 0; } .layout__side { min-width: 0; position: sticky; top: calc(56px + var(--sp-5)); } .check { margin-top: var(--sp-5); } .check__row { display: flex; gap: var(--sp-2); align-items: stretch; } .check__row .input { flex: 1; min-width: 0; } /* -- Карточка результата --------------------------------------------- */ .result { position: relative; margin-top: var(--sp-5); padding: var(--sp-6); padding-left: calc(var(--sp-6) - 2px); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: var(--r-lg); animation: rise var(--dur-3) var(--ease); } @keyframes rise { from { opacity: 0; transform: translateY(6px); } } .result.is-busy { border-left-color: var(--busy); } .result.is-free { border-left-color: var(--free); } .result__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; } .result__name { font-size: var(--fs-14); font-weight: 500; color: var(--ink); min-width: 0; overflow-wrap: anywhere; } .result__inn { display: inline-flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-13); color: var(--ink-2); } .result__inn-label { font-size: var(--fs-11); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .result__verdict { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); font-size: var(--fs-34); font-weight: 650; /* В кириллице капс без разрядки слипается — держим воздух между литерами */ letter-spacing: 0.02em; line-height: var(--lh-tight); } .result__dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--ink-3); } .result.is-busy .result__verdict { color: var(--busy); } .result.is-busy .result__dot { background: var(--busy); box-shadow: 0 0 0 4px var(--busy-soft); } .result.is-free .result__verdict { color: var(--free); } .result.is-free .result__dot { background: var(--free); box-shadow: 0 0 0 4px var(--free-soft); } .until { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); } .until__label { font-size: var(--fs-11); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .until__date { margin-top: var(--sp-1); font-size: var(--fs-44); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); } .until__date.is-text { font-size: var(--fs-20); font-family: var(--font-ui); letter-spacing: normal; color: var(--ink-2); } .until__note { margin-top: var(--sp-2); font-size: var(--fs-12); color: var(--ink-3); line-height: var(--lh-snug); } .result__block { margin-top: var(--sp-5); } .result__reason { margin-top: var(--sp-2); font-size: var(--fs-15); line-height: var(--lh-snug); } .notes { margin-top: var(--sp-5); display: grid; gap: var(--sp-2); } .notes li { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--warn-soft); border-left: 2px solid var(--warn); border-radius: var(--r-sm); font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--ink-2); } .notes .ic { color: var(--warn); margin-top: 1px; } .more { margin-top: var(--sp-5); border-top: 1px solid var(--line); padding-top: var(--sp-3); } .more__summary { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-13); color: var(--ink-2); cursor: pointer; list-style: none; user-select: none; } .more__summary::-webkit-details-marker { display: none; } .more__summary:hover { color: var(--ink); } .more__chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-2) var(--ease); } .more[open] .more__chev { transform: rotate(90deg); } .more__count { font-size: var(--fs-11); color: var(--ink-3); } .findings { margin-top: var(--sp-3); display: grid; gap: var(--sp-2); } .findings li { padding: var(--sp-3) var(--sp-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--ink-2); } .findings .finding__tail { display: block; margin-top: var(--sp-1); font-size: var(--fs-12); color: var(--ink-3); } /* Пустое состояние левой колонки — без него полстраницы выглядит сломанной */ .placeholder { margin-top: var(--sp-5); padding: var(--sp-12) var(--sp-6); border: 1px dashed var(--line-2); border-radius: var(--r-lg); text-align: center; } .placeholder__icon { width: 28px; height: 28px; margin: 0 auto var(--sp-4); color: var(--ink-3); } .placeholder__title { font-size: var(--fs-15); font-weight: 500; } .placeholder__text { margin-top: var(--sp-2); font-size: var(--fs-13); color: var(--ink-3); max-width: 44ch; margin-inline: auto; } /* Скелет загрузки */ .result--skeleton { border-left-color: var(--line-2); } .sk { background: var(--surface-3); border-radius: var(--r-sm); animation: pulse 1.4s ease-in-out infinite; } .sk--line { height: 12px; margin-top: var(--sp-4); } .sk--line:first-child { margin-top: 0; } .sk--verdict { height: 34px; width: 46%; margin-top: var(--sp-5); } .sk--hero { height: 76px; margin-top: var(--sp-5); border-radius: var(--r-md); } @keyframes pulse { 50% { opacity: 0.45; } } /* -- Дашборд ---------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: var(--sp-5); background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .stat { padding: var(--sp-4); background: var(--surface); min-width: 0; } .stat__label { font-size: var(--fs-12); color: var(--ink-2); } .stat__value { margin-top: var(--sp-2); font-size: var(--fs-26); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; } .stat__sub { margin-top: var(--sp-2); font-size: var(--fs-12); color: var(--ink-3); font-variant-numeric: tabular-nums; } .meter { height: 6px; margin-top: var(--sp-3); background: var(--data-track); border-radius: var(--r-full); overflow: hidden; } .meter__fill { height: 100%; width: 0; background: var(--data); border-radius: var(--r-full); transition: width var(--dur-3) var(--ease); } .spark { margin-top: var(--sp-3); height: 26px; } .spark svg { display: block; overflow: visible; } .chart { margin-top: var(--sp-6); } .chart__sub { margin-top: 2px; font-size: var(--fs-12); color: var(--ink-3); } .chart__plot { margin-top: var(--sp-4); } .chart__plot svg { display: block; } .chart__label { font-family: var(--font-ui); font-size: 12px; fill: var(--ink-2); } .chart__value { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-2); font-variant-numeric: tabular-nums; } .chart__axis { stroke: var(--line); stroke-width: 1; } .chart__bar { fill: var(--data); } .chart__track { fill: var(--data-track); } .empty { margin-top: var(--sp-6); padding: var(--sp-8) var(--sp-4); text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r-md); color: var(--ink-3); font-size: var(--fs-13); } /* -- Админка ---------------------------------------------------------- */ .admin { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-5); align-items: start; } .admin > .card { margin-top: 0; } .admin__token { grid-column: span 5; } .admin__ek5 { grid-column: span 7; } .admin__manual { grid-column: span 5; } .admin__batch { grid-column: span 7; } .admin__mgrs { grid-column: span 7; } .admin__add { grid-column: span 5; } .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-4); margin-top: var(--sp-5); } .cols .field { margin-top: 0; } .cols__full { grid-column: 1 / -1; } .cols .btn { justify-self: start; } .cols .switch { margin-top: var(--sp-1); } .twofa { margin-top: var(--sp-5); padding: var(--sp-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); } .twofa .field { margin-top: var(--sp-3); } .twofa .input--code { max-width: 160px; } .twofa .btn--link { margin-top: var(--sp-3); } .mgrs { margin-top: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .mgrs li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); font-size: var(--fs-13); } .mgrs li:last-child { border-bottom: 0; } .mgrs li.is-me { background: var(--surface-2); } .mgrs li.is-off .mgr__name { color: var(--ink-3); } .mgr__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .mgr__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mgr__login { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mgr__tag { flex: none; } .mgr__tag.is-admin { color: var(--accent); border-color: var(--accent); } .mgr__tag.is-off { color: var(--busy); border-color: var(--busy); } .mgr__acts { display: flex; gap: var(--sp-2); flex: none; } .mgr__acts .btn { min-height: 30px; padding: 0 10px; font-size: var(--fs-12); } .mgr__acts .btn.is-danger:hover { border-color: var(--busy); color: var(--busy); } .mgrs .empty { margin: 0; border: 0; padding: var(--sp-6); } /* -- Карточка подключения --------------------------------------------- */ .enroll { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-6); margin-top: var(--sp-5); } .enroll__qr { width: 200px; height: 200px; background: #fff; border-radius: var(--r-md); padding: 8px; } .enroll__side { min-width: 0; } .secret { display: block; margin-top: var(--sp-2); padding: var(--sp-3); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: var(--fs-14); letter-spacing: 0.08em; word-break: break-all; user-select: all; color: var(--ink); } .enroll__acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-4); } /* Нечётный последний элемент растягиваем — иначе в сетке остаётся дырка. */ .enroll__acts > :last-child:nth-child(odd) { grid-column: 1 / -1; } /* ------------------------------------------------------- Адаптив */ @media (max-width: 1180px) { .layout { grid-template-columns: minmax(0, 1fr); } .layout__side { position: static; } .admin__token, .admin__ek5, .admin__manual, .admin__batch, .admin__mgrs, .admin__add { grid-column: span 12; } } @media (max-width: 900px) { .main { padding: var(--sp-6) var(--sp-4) var(--sp-12); } .topbar__in { padding: 0 var(--sp-4); } } @media (max-width: 720px) { .topbar__in { height: auto; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; } .tabs { order: 3; width: 100%; border-top: 1px solid var(--line); margin: 0 calc(-1 * var(--sp-4)); padding: 0 var(--sp-4); } .tab { height: 44px; } .topbar__right { gap: var(--sp-1); } .topbar__sep, .user__role { display: none; } .user { margin-right: var(--sp-1); } .card { padding: var(--sp-5); } .check__row { flex-direction: column; } .check__row .btn { width: 100%; } .cols { grid-template-columns: minmax(0, 1fr); } .cols .btn { justify-self: stretch; } .stats { grid-template-columns: minmax(0, 1fr); } .result { padding: var(--sp-5); padding-left: calc(var(--sp-5) - 2px); } .result__verdict { font-size: var(--fs-26); } .until__date { font-size: var(--fs-34); } .mgrs li { flex-wrap: wrap; } .mgr__who { flex-basis: 100%; } .enroll { grid-template-columns: minmax(0, 1fr); justify-items: center; } .enroll__side { width: 100%; } .enroll__acts { grid-template-columns: minmax(0, 1fr); } .modal__in { padding: var(--sp-5); } } /* ------------------------------------------------------- Меньше движения */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .spinner { animation: none; border-top-color: currentColor; opacity: 0.5; } } /* ------------------------------------------------------- Принудительные цвета */ @media (forced-colors: active) { .card, .result, .input, .btn, .modal { border: 1px solid; } .chart__bar { fill: Highlight; } .result__dot, .status__dot { forced-color-adjust: none; } }