/* Страница «Проверка текста на ИИ» (/ai-check/). Светлая тема — по умолчанию, тёмная включается классом .dark-theme на (переменные объявлены в app_style.css). Новых цветов не вводим: берём палитру проекта — фиолетовый #8000FF/#B164FD, зелёный #2ECE7A, красный #FF6B6B. */ .aic-page { display: flex; flex-direction: column; gap: 20px; } .aic-card { width: 100%; } /* ---------- Баннер техработ ---------- */ .aic-shutdown-banner { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px; border-radius: 16px; border: 1px solid #B164FD; background: rgba(177, 100, 253, 0.12); color: var(--text-color); font-family: 'Rubik', sans-serif; font-size: 14px; } /* ---------- Заголовок и поле ввода ---------- */ .aic-title { font-family: 'Rubik', sans-serif; font-size: 28px; font-weight: 700; color: var(--text-color); margin-bottom: 8px; } .aic-subtitle { font-family: 'Rubik', sans-serif; font-size: 15px; line-height: 1.5; color: var(--text-secondary); margin-bottom: 20px; } .aic-textarea { width: 100%; min-height: 220px; max-height: 640px; resize: vertical; overflow-y: auto; padding: 16px; border-radius: 16px; border: 1px solid var(--border-color-secondary); background: var(--input-bg); color: var(--text-color); font-family: 'Rubik', sans-serif; font-size: 15px; line-height: 1.55; outline: none; transition: border-color 0.2s; } .aic-textarea:focus { border-color: var(--border-color); } .aic-textarea::placeholder { color: var(--text-tertiary); } /* Виджет reCAPTCHA: ширина фиксирована (304 px), центрируем */ .aic-captcha { display: flex; justify-content: flex-start; margin: 16px 0 4px; min-height: 78px; } /* Пояснение, если виджет не загрузился или сломался */ .aic-captcha-hint { margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid #F5A623; background: rgba(245, 166, 35, 0.1); color: var(--text-color); font-family: 'Rubik', sans-serif; font-size: 13px; } .aic-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 12px; } .aic-form-hints { display: flex; flex-direction: column; gap: 4px; } .aic-counter { font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 500; color: var(--text-secondary); } /* Счётчик у верхней границы — предупреждающий цвет */ .aic-counter--limit { color: #FF6B6B; font-weight: 700; } .aic-min-hint { font-family: 'Rubik', sans-serif; font-size: 13px; color: var(--text-tertiary); } .aic-min-hint--hidden { visibility: hidden; } .aic-submit { padding: 12px 40px; border: none; border-radius: 12px; background: linear-gradient(90deg, #8000FF 0%, #B164FD 100%); color: #ffffff; font-family: 'Rubik', sans-serif; font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity 0.2s, filter 0.2s; } .aic-submit:hover:not(:disabled) { filter: brightness(1.08); } .aic-submit:disabled { opacity: 0.5; cursor: not-allowed; } .aic-error { margin-top: 16px; padding: 12px 16px; border-radius: 12px; border: 1px solid #FF6B6B; background: rgba(255, 107, 107, 0.12); color: var(--text-color); font-family: 'Rubik', sans-serif; font-size: 14px; } /* ---------- Результат ---------- */ .aic-result-header { font-family: 'Rubik', sans-serif; font-size: 20px; font-weight: 700; color: var(--text-color); margin-bottom: 18px; } .aic-verdict { padding: 16px 20px; border-radius: 16px; border-left: 4px solid var(--border-color); background: rgba(128, 0, 255, 0.06); margin-bottom: 20px; } .aic-verdict--human { border-left-color: #2ECE7A; background: rgba(46, 206, 122, 0.1); } .aic-verdict--grey { border-left-color: #F5A623; background: rgba(245, 166, 35, 0.1); } .aic-verdict--ai { border-left-color: #FF6B6B; background: rgba(255, 107, 107, 0.1); } /* Текста мало для вердикта — нейтральный серый, без оценки */ .aic-verdict--insufficient { border-left-color: var(--text-tertiary); background: rgba(128, 128, 128, 0.1); } .aic-verdict-title { font-family: 'Rubik', sans-serif; font-size: 17px; font-weight: 700; color: var(--text-color); margin-bottom: 6px; } .aic-verdict-text { font-family: 'Rubik', sans-serif; font-size: 14px; line-height: 1.5; color: var(--text-secondary); } /* ---------- Круговые диаграммы ---------- */ .aic-scores { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; } .aic-score-item { display: flex; flex-direction: column; align-items: center; gap: 8px; } .aic-page .score-circle { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; background: conic-gradient( currentColor calc(var(--score) * 1%), var(--border-color-secondary) calc(var(--score) * 1%) ); } .aic-page .aic-human-score .score-circle { color: #2ECE7A; } .aic-page .aic-ai-score .score-circle { color: #FF6B6B; } .aic-page .score-circle::before { content: ''; position: absolute; width: 74px; height: 74px; border-radius: 50%; background: var(--card-bg); } .aic-page .score-value { position: relative; z-index: 1; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 20px; color: var(--text-color); } .aic-page .score-label { font-family: 'Rubik', sans-serif; font-size: 13px; font-weight: 500; color: var(--text-secondary); } /* ---------- Таблица метрик ---------- */ .aic-metrics { display: flex; flex-direction: column; gap: 14px; } .aic-metric { display: flex; flex-direction: column; gap: 6px; } .aic-metric-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-family: 'Rubik', sans-serif; } .aic-metric-title { font-size: 14px; font-weight: 600; color: var(--text-color); } .aic-metric-value { font-size: 13px; color: var(--text-secondary); } .aic-metric-bar { height: 8px; border-radius: 4px; background: var(--border-color-secondary); overflow: hidden; } .aic-metric-bar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #8000FF 0%, #B164FD 100%); transition: width 0.4s ease; } .aic-metric-foot { font-family: 'Rubik', sans-serif; font-size: 12px; color: var(--text-tertiary); } .aic-warning { margin-top: 18px; padding: 12px 16px; border-radius: 12px; border: 1px solid #F5A623; background: rgba(245, 166, 35, 0.1); color: var(--text-color); font-family: 'Rubik', sans-serif; font-size: 13px; } .aic-disclaimer { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-color-secondary); font-family: 'Rubik', sans-serif; font-size: 13px; line-height: 1.5; color: var(--text-tertiary); } /* ---------- Подозрительные фрагменты ---------- */ .aic-chunks-hint { margin: -8px 0 16px; font-family: 'Rubik', sans-serif; font-size: 13px; line-height: 1.5; color: var(--text-tertiary); } .aic-chunks-list { display: flex; flex-direction: column; gap: 14px; } /* Карточка фрагмента — кнопка: клик открывает разбор в модальном окне */ .aic-chunk { display: block; width: 100%; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border-color-secondary); background: var(--task-bg); color: inherit; font-family: 'Rubik', sans-serif; cursor: pointer; transition: border-color 0.2s, background 0.2s; } .aic-chunk:hover { border-color: var(--border-color); background: rgba(128, 0, 255, 0.06); } .aic-chunk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-family: 'Rubik', sans-serif; } .aic-chunk-score { font-size: 14px; font-weight: 700; color: #FF6B6B; } .aic-chunk-words { font-size: 12px; color: var(--text-tertiary); } .aic-chunk-chips, .aic-modal-metrics { display: flex; flex-wrap: wrap; gap: 8px; } .aic-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: 10px; border: 1px solid var(--border-color-secondary); background: var(--card-bg); font-size: 12px; color: var(--text-secondary); } /* Проваленный признак — красным: это и есть «недочёт» */ .aic-chip-failed { border-color: #FF6B6B; background: rgba(255, 107, 107, 0.12); color: var(--text-color); } .aic-chip-name { font-weight: 600; } .aic-chip-failed .aic-chip-name { color: #FF6B6B; } .aic-chip-value { font-variant-numeric: tabular-nums; } .aic-chunk-more { margin-top: 10px; font-size: 12px; color: var(--link-color); } .aic-chunks-more { margin-top: 14px; font-family: 'Rubik', sans-serif; font-size: 13px; color: var(--text-secondary); } /* ---------- Модальное окно с разбором фрагмента ---------- */ body.aic-modal-open { overflow: hidden; } .aic-modal-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.6); } .aic-modal-overlay[hidden] { display: none; } .aic-modal { position: relative; width: 100%; max-width: 760px; max-height: 86vh; overflow-y: auto; padding: 24px; border-radius: 20px; border: 1px solid var(--border-color); background: var(--card-bg); box-shadow: 0 12px 40px var(--card-shadow); outline: none; } .aic-modal-close { position: absolute; top: 12px; right: 16px; width: 32px; height: 32px; border: none; border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 24px; line-height: 1; cursor: pointer; } .aic-modal-close:hover { background: rgba(128, 0, 255, 0.1); color: var(--text-color); } .aic-modal-title { font-family: 'Rubik', sans-serif; font-size: 20px; font-weight: 700; color: var(--text-color); margin-bottom: 6px; } .aic-modal-subtitle { font-family: 'Rubik', sans-serif; font-size: 13px; color: var(--text-secondary); margin-bottom: 18px; } .aic-modal-recommendations { margin: 18px 0; } .aic-modal-recommendations-title { font-family: 'Rubik', sans-serif; font-size: 15px; font-weight: 700; color: var(--text-color); margin-bottom: 10px; } .aic-recommendation { padding: 10px 14px; margin-bottom: 8px; border-radius: 12px; border-left: 3px solid #FF6B6B; background: rgba(255, 107, 107, 0.1); font-family: 'Rubik', sans-serif; font-size: 13px; line-height: 1.55; color: var(--text-color); } .aic-recommendation strong { color: #FF6B6B; } .aic-recommendations-ok { padding: 10px 14px; border-radius: 12px; background: var(--task-bg); font-family: 'Rubik', sans-serif; font-size: 13px; line-height: 1.55; color: var(--text-secondary); } .aic-modal-text-label { font-family: 'Rubik', sans-serif; font-size: 15px; font-weight: 700; color: var(--text-color); margin-bottom: 10px; } .aic-modal-text { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border-color-secondary); background: var(--task-bg); font-family: 'Rubik', sans-serif; font-size: 14px; line-height: 1.65; color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; } /* Оборот-маркер ИИ внутри текста */ .aic-mark { padding: 1px 3px; border-radius: 4px; background: rgba(255, 107, 107, 0.25); color: #FF6B6B; font-weight: 600; } /* ---------- CTA ---------- */ .aic-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; border: 1px solid var(--border-color); } .aic-cta-title { font-family: 'Rubik', sans-serif; font-size: 20px; font-weight: 700; line-height: 1.35; color: var(--text-color); } .aic-cta-text { font-family: 'Rubik', sans-serif; font-size: 16px; line-height: 1.5; color: var(--text-color); } .aic-cta-btn { display: inline-block; padding: 12px 32px; border-radius: 12px; background: linear-gradient(90deg, #8000FF 0%, #B164FD 100%); color: #ffffff; font-family: 'Rubik', sans-serif; font-size: 16px; font-weight: 600; transition: filter 0.2s; } .aic-cta-btn:hover { filter: brightness(1.08); } .aic-cta-note { font-family: 'Rubik', sans-serif; font-size: 13px; color: var(--text-secondary); } /* ---------- Описание алгоритма и FAQ ---------- */ .aic-about-title { font-family: 'Rubik', sans-serif; font-size: 20px; font-weight: 700; color: var(--text-color); margin-bottom: 14px; } .aic-about-subtitle { font-family: 'Rubik', sans-serif; font-size: 17px; font-weight: 700; color: var(--text-color); margin: 22px 0 12px; } .aic-about p, .aic-faq p { font-family: 'Rubik', sans-serif; font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 10px; } .aic-about-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 18px 0; } .aic-about-metric { border-radius: 14px; border: 1px solid var(--border-color-secondary); background: var(--task-bg); overflow: hidden; } /* Вся плитка — область нажатия: отступы лежат ВНУТРИ summary, а не на плите. Иначе клик по отступу не раскрывал бы блок. */ .aic-about-metric-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; font-family: 'Rubik', sans-serif; } /* Содержимое сворачиваемого блока: высотой управляет JS (анимация) */ .aic-collapse { overflow: hidden; } .aic-about-metric .aic-collapse p { margin: 0; padding: 0 16px 14px; font-family: 'Rubik', sans-serif; font-size: 14px; line-height: 1.6; color: var(--text-secondary); } .aic-about-metric-name { font-size: 15px; font-weight: 600; color: var(--text-color); } .aic-about-metric-weight { margin-left: auto; font-size: 12px; color: var(--text-tertiary); white-space: nowrap; } .aic-about-metric p { margin-bottom: 0; } /* ---------- Сворачиваемые блоки (details/summary, без JS) ---------- */ .aic-about-metric > summary, .aic-faq-item > summary { cursor: pointer; list-style: none; /* убираем системный маркер — рисуем свою стрелку */ } .aic-about-metric > summary::-webkit-details-marker, .aic-faq-item > summary::-webkit-details-marker { display: none; } .aic-about-metric > summary:hover .aic-about-metric-name, .aic-faq-item > summary:hover span:first-child { color: var(--link-color); } /* Стрелка: вниз у свёрнутого блока, вверх у раскрытого */ .aic-chevron { flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid var(--text-tertiary); border-bottom: 2px solid var(--text-tertiary); transform: rotate(45deg); transition: transform 0.2s ease; } /* Без JS состояние читается по атрибуту open */ details:not(.aic-animated)[open] > summary .aic-chevron { transform: rotate(-135deg); } /* С анимацией стрелка поворачивается сразу по клику, вместе с блоком: во время сворачивания details[open] ещё стоит, и по нему она бы перевернулась только в самом конце */ details.aic-expanded > summary .aic-chevron { transform: rotate(-135deg); } .aic-about-list { display: flex; flex-direction: column; gap: 10px; padding-left: 20px; } .aic-about-list li { font-family: 'Rubik', sans-serif; font-size: 14px; line-height: 1.6; color: var(--text-secondary); } .aic-faq-item { border-bottom: 1px solid var(--border-color-secondary); } .aic-faq-item:last-child { border-bottom: none; } .aic-faq-item:last-child .aic-faq-question { padding-bottom: 0; } /* Вопрос — вся строка целиком, вместе с вертикальными отступами */ .aic-faq-question { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 0; font-family: 'Rubik', sans-serif; font-size: 15px; font-weight: 600; color: var(--text-color); } .aic-faq-question .aic-chevron { margin-left: auto; } .aic-faq-item .aic-collapse p { margin: 0; padding: 0 0 14px; font-family: 'Rubik', sans-serif; font-size: 14px; line-height: 1.6; color: var(--text-secondary); } /* ---------- Адаптив ---------- */ @media (max-width: 768px) { .aic-title { font-size: 22px; } .aic-about-metrics { grid-template-columns: minmax(0, 1fr); } .aic-form-footer { flex-direction: column; align-items: stretch; } .aic-submit { width: 100%; } .aic-scores { gap: 24px; } .aic-page .score-circle { width: 84px; height: 84px; } .aic-page .score-circle::before { width: 64px; height: 64px; } .aic-page .score-value { font-size: 17px; } }