/* Пульт ИИ-кураторов — тёмная тема. * * Значения цветов живут только здесь, в токенах `:root`: разметка шаблонов на тему не завязана. * Светлый набор лежит рядом под `:root[data-theme="light"]` — переключатель можно повесить позже, * выставляя атрибут на , разметку менять не придётся. */ :root { --ground: #080910; --surface: #111420; --sunken: #0c0e18; --ink: #e8ecf7; --ink-2: #aeb6cc; --muted: #8992a8; --line: #242938; --line-2: #1a1e2b; --accent: #2de2e6; --accent-bright: #7cf3f6; --accent-ink: #04161b; --accent-soft: rgba(45, 226, 230, 0.12); --accent-edge: rgba(45, 226, 230, 0.35); --ok: #2fe08c; --ok-soft: rgba(47, 224, 140, 0.12); --ok-edge: rgba(47, 224, 140, 0.4); --warn: #ffb020; --warn-soft: rgba(255, 176, 32, 0.12); --warn-edge: rgba(255, 176, 32, 0.4); --danger: #ff4d6a; --danger-soft: rgba(255, 77, 106, 0.13); --danger-edge: rgba(255, 77, 106, 0.45); --silent: #8b7cff; --silent-soft: rgba(139, 124, 255, 0.14); --silent-edge: rgba(139, 124, 255, 0.45); --glow-accent: 0 0 18px rgba(45, 226, 230, 0.3); } :root[data-theme="light"] { --ground: #f3f2ee; --surface: #ffffff; --sunken: #faf9f6; --ink: #191917; --ink-2: #4a4944; --muted: #6a6862; --line: #e2dfd7; --line-2: #efede6; --accent: #1c5c4e; --accent-bright: #123f35; --accent-ink: #ffffff; --accent-soft: #e8f1ee; --accent-edge: rgba(28, 92, 78, 0.3); --ok: #2c6e31; --ok-soft: #e9f2e9; --ok-edge: rgba(44, 110, 49, 0.3); --warn: #8a5500; --warn-soft: #fbf0de; --warn-edge: rgba(138, 85, 0, 0.3); --danger: #a32118; --danger-soft: #fbeae8; --danger-edge: rgba(163, 33, 24, 0.3); --silent: #1b4e8f; --silent-soft: #e9eff8; --silent-edge: rgba(27, 78, 143, 0.3); --glow-accent: none; } /* --- Основа --- */ body { margin: 0; min-height: 100vh; font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: 14px; color: var(--ink); background-color: var(--ground); /* Строчная сетка вместо градиента: даёт фактуру, но не спорит с текстом. */ background-image: repeating-linear-gradient( 0deg, rgba(45, 226, 230, 0.035) 0 1px, transparent 1px 3px ); -webkit-font-smoothing: antialiased; } :root[data-theme="light"] body { background-image: none; } a { color: var(--accent); } a:hover { color: var(--accent-bright); } code, .mono, .num { font-family: "IBM Plex Mono", ui-monospace, monospace; } /* --- Шапка --- */ .topbar { display: flex; align-items: center; gap: 28px; height: 60px; padding: 0 40px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 var(--accent-edge); } .brand { display: flex; align-items: center; gap: 10px; font-family: "Exo 2", "IBM Plex Sans", sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } .brand-mark { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--accent); box-shadow: 0 0 14px var(--accent-edge); } .brand-mark svg { stroke: var(--accent-ink); } .navlinks { display: flex; gap: 4px; flex-grow: 1; flex-wrap: wrap; } .navlinks a { display: block; padding: 7px 12px; border-radius: 7px; font-size: 14px; text-decoration: none; color: var(--ink-2); } .navlinks a:hover { background: var(--sunken); color: var(--ink); } /* Подсветка текущего пункта — по порядку ссылок, без классов на самих : разметка меню зафиксирована тестом (журнал должен стоять сразу за очередью ревью), и добавлять в неё атрибуты нельзя. Порядок: кураторы · пульт · ревью · журнал · прогоны. */ .navlinks[data-page="curators"] a:nth-child(1), .navlinks[data-page="curator"] a:nth-child(2), .navlinks[data-page="review"] a:nth-child(3), .navlinks[data-page="journal"] a:nth-child(4), .navlinks[data-page="evals"] a:nth-child(5) { background: var(--accent-soft); color: var(--accent); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent-edge); } .topmeta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); white-space: nowrap; } /* --- Поле страницы --- */ .page { max-width: 1440px; margin: 0 auto; padding: 28px 40px 48px; display: flex; flex-direction: column; gap: 18px; } .page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; } h1 { margin: 0; font-family: "Exo 2", "IBM Plex Sans", sans-serif; font-size: 25px; font-weight: 600; letter-spacing: 0.005em; } .subtitle, .hint { margin: 6px 0 0; max-width: 820px; font-size: 13px; line-height: 1.55; color: var(--muted); } .spacer { flex-grow: 1; } .muted { color: var(--muted); font-size: 12.5px; } /* --- Карточки --- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; } .card-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); } .card-title { font-size: 14px; font-weight: 600; } .card-pad { padding: 20px; } /* --- Чипы, лампочки, бейдж режима --- */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid transparent; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 18px; white-space: nowrap; } .chip-neutral { background: var(--sunken); color: var(--ink-2); border-color: var(--line); } .chip-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-edge); } .chip-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-edge); } .chip-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-edge); } .chip-silent { background: var(--silent-soft); color: var(--silent); border-color: var(--silent-edge); } .lamp { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .lamp-green { background: var(--ok); box-shadow: 0 0 10px rgba(47, 224, 140, 0.9); } .lamp-yellow { background: var(--warn); box-shadow: 0 0 10px rgba(255, 176, 32, 0.7); } .lamp-red { background: var(--danger); box-shadow: 0 0 12px rgba(255, 77, 106, 0.9); } /* Лампочки легенды — своими классами: разметка строки таблицы (`lamp lamp-red`) проверяется тестом «Qdrant недоступен — не повод красить куратора красным», и легенда не должна её подделывать. */ .legend-ok { background: var(--ok); } .legend-off { background: var(--warn); } .legend-bad { background: var(--danger); } /* Цвет ступени = насколько она затрагивает живых учеников. Красный только у боевой. */ .badge-mode { display: inline-flex; align-items: center; padding: 4px 11px; border: 1px solid transparent; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; } .badge-mode.mode-off { background: var(--sunken); color: var(--ink-2); border-color: var(--line); } .badge-mode.mode-silent { background: var(--silent-soft); color: var(--silent); border-color: var(--silent-edge); } .badge-mode.mode-test { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-edge); } .badge-mode.mode-live { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-edge); } .warn-tag { color: var(--warn); font-size: 12.5px; } /* --- Кнопки --- */ button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 9px; background: var(--sunken); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; } button:hover, .btn:hover { border-color: var(--accent-edge); color: var(--accent); } .btn-primary, button.approve { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow-accent); } .btn-primary:hover, button.approve:hover { background: var(--accent-bright); color: var(--accent-ink); } button.skip { background: var(--sunken); border-color: var(--line); color: var(--ink); box-shadow: none; } button[disabled], button.approve[disabled] { background: var(--sunken); border-color: var(--line-2); color: #5a6072; box-shadow: none; cursor: not-allowed; } .btn-sm, .actions button { height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; } /* --- Плитки-показатели --- */ .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .tile { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; } .tile-label { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .tile-value { font-family: "Exo 2", "IBM Plex Sans", sans-serif; font-size: 27px; font-weight: 600; line-height: 1.1; } .tile-note { font-size: 12px; color: var(--muted); } /* --- Таблицы (список кураторов, статусы) --- */ table { width: 100%; border-collapse: collapse; } th { padding: 10px 18px; border-bottom: 1px solid var(--line-2); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; color: var(--muted); } td { padding: 14px 18px; border-bottom: 1px solid var(--line-2); font-size: 14px; vertical-align: middle; } tr:last-child td { border-bottom: 0; } .curators a.name { font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; } .curators a.name:hover { color: var(--accent); } .cell-name { display: flex; align-items: center; gap: 10px; } /* --- Сообщения --- */ .flash { padding: 11px 16px; border: 1px solid var(--accent-edge); border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 13.5px; } .alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border: 1px solid var(--danger-edge); border-radius: 12px; background: var(--danger-soft); } .alert-title { font-size: 13.5px; font-weight: 600; color: var(--danger); } /* Деградация, а не остановка: провайдер второго плана (факт-чек, картинки) заблокирован */ .alert-warn { border-color: var(--warn-edge); background: var(--warn-soft); } .alert-warn .alert-title { color: var(--warn); } .warn { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--warn-soft); border-bottom: 1px solid var(--warn-edge); font-size: 13px; color: var(--warn); } /* --- Ступени режима --- */ form.modes { display: flex; flex-direction: column; gap: 12px; padding: 20px; } label.mode { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--sunken); cursor: pointer; } label.mode:hover { border-color: var(--accent-edge); } label.mode input { flex-shrink: 0; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--accent); } label.mode:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent), 0 0 24px rgba(45, 226, 230, 0.12); } label.mode.mode-live { border-color: var(--danger-edge); } .mode-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; } .mode-hint { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--muted); } /* --- Строки-переходы (пульт куратора) --- */ .link-row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); color: var(--ink); text-decoration: none; } .link-row:last-child { border-bottom: 0; } a.link-row:hover { background: var(--sunken); } .link-title { display: block; font-size: 14px; font-weight: 600; } .link-note { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); } .status-row { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--line-2); font-size: 13.5px; } .status-row:last-child { border-bottom: 0; } .status-row .name { width: 130px; } .bar { height: 6px; border-radius: 3px; background: var(--accent); opacity: 0.75; box-shadow: 0 0 10px var(--accent-edge); } /* --- Лента работ: очередь ревью, журнал, пробные прогоны --- */ .items { display: flex; flex-direction: column; gap: 16px; } .item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 0 24px rgba(0, 0, 0, 0.35); } :root[data-theme="light"] .item { box-shadow: none; } .item-head { display: flex; align-items: center; gap: 12px; padding: 13px 18px; background: var(--sunken); border-bottom: 1px solid var(--line-2); flex-wrap: wrap; } .item-id { font-family: "IBM Plex Mono", monospace; font-size: 13.5px; font-weight: 500; color: var(--accent); text-decoration: none; text-shadow: 0 0 12px var(--accent-edge); } .item-id:hover { text-decoration: underline; } .item-who { font-size: 13.5px; font-weight: 500; } .item-where { font-size: 13.5px; color: var(--ink-2); } .when { min-width: 96px; font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--ink-2); } .dot { color: var(--line); } .cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1px; background: var(--line-2); } .cols-even { grid-template-columns: repeat(2, minmax(0, 1fr)); } .col { padding: 15px 18px; background: var(--surface); } .col.bot { background: var(--sunken); box-shadow: inset 3px 0 0 var(--accent); } .col-label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); flex-wrap: wrap; } .text, pre { margin: 0; font: inherit; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; color: var(--ink-2); } .text.reply, .reply pre { color: var(--ink); } .item-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--muted); flex-wrap: wrap; } .reasons { display: flex; gap: 6px; flex-wrap: wrap; } .actions { display: flex; gap: 8px; flex-wrap: wrap; } .actions form { margin: 0; } .stage { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--muted); } /* Тред «ученик + урок»: карточка-гармошка, внутри — все генерации по одной сдаче. Правила общих
ниже ей не подходят, поэтому здесь они сняты. */ details.thread { margin-top: 0; padding-top: 0; border-top: 0; } .thread > summary { color: inherit; font-size: inherit; font-weight: inherit; cursor: pointer; } .thread > summary:hover { background: var(--line-2); } .thread > summary::before { content: ""; flex-shrink: 0; width: 0; height: 0; border-left: 5px solid var(--muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.12s ease; } .thread[open] > summary::before { transform: rotate(90deg); } .entry + .entry { border-top: 1px solid var(--line); } .entry-head { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--sunken); border-bottom: 1px solid var(--line-2); flex-wrap: wrap; } /* Раскрываемые блоки: что было до факт-чека, что увидела нейросеть на скринах, исходная сдача. */ details { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line); } details summary { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); cursor: pointer; list-style: none; } details summary::-webkit-details-marker { display: none; } details summary:hover { color: var(--ink-2); } details.fc summary { color: var(--warn); } details pre { margin-top: 8px; font-size: 13px; color: var(--muted); } /* --- Страницы --- */ .pager { display: flex; align-items: center; gap: 6px; } .pager a, .pager b { display: flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; border-radius: 8px; font-size: 13px; text-decoration: none; color: var(--ink-2); } .pager a:hover { background: var(--surface); } .pager b { background: var(--accent); color: var(--accent-ink); font-weight: 600; } @media (max-width: 900px) { .topbar { height: auto; padding: 10px 20px; flex-wrap: wrap; } .page { padding: 20px; } .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols, .cols-even { grid-template-columns: minmax(0, 1fr); } } /* --- Вход и пользователь в шапке --- */ .userbox { display: flex; align-items: center; gap: 10px; margin-left: 16px; font-size: 12.5px; color: var(--muted); white-space: nowrap; } .userbox form { margin: 0; } .login-wrap { display: flex; justify-content: center; padding-top: 12vh; } .login-card { width: 100%; max-width: 420px; } .login-card h1 { margin-top: 0; } .login-alert { margin: 16px 0; } .login-btn { box-sizing: border-box; /* у ссылки-кнопки иначе width 100% + padding вылезает из карточки */ width: 100%; margin-top: 8px; } /* --- Белый список (/admin/users) --- */ .users-add { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; } .users-add .card-title { flex: 1 0 100%; } .users-add input[type="email"], .users-add select { height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--sunken); color: var(--ink); font: inherit; font-size: 14px; } .users-add input[type="email"] { flex: 1 1 280px; min-width: 0; } .users-add input:focus, .users-add select:focus { outline: none; border-color: var(--accent-edge); } .users-wrap { overflow-x: auto; } .users tr.user-off td { opacity: 0.55; } .user-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .user-actions form { margin: 0; } /* --- Предохранитель боевого постинга (live_guard.html) --- */ .live-guard-total { font-size: 18px; margin: 0 0 8px; } .live-guard-split { margin: 0 0 12px; padding-left: 20px; } .live-guard-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 18px; } .live-guard-actions form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; } /* --- Вход по паролю (login.html) --- */ .login-or { margin: 16px 0 8px; text-align: center; color: var(--muted); font-size: 13px; } .login-form { display: flex; flex-direction: column; gap: 12px; } .login-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; } .login-form input[type="email"], .login-form input[type="password"] { height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--sunken); color: var(--ink); font: inherit; } .login-form input:focus { outline: none; border-color: var(--accent-edge); } /* --- Ссылка для пароля (password_link.html) --- */ .password-link { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .password-link input { flex: 1 1 360px; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--sunken); color: var(--ink); font: inherit; font-family: var(--mono, monospace); font-size: 13px; }