/* ============================================================================
   WOWTeam — страница входа. Собранная таблица стилей. НЕ РЕДАКТИРОВАТЬ ВРУЧНУЮ.
   ============================================================================
   Сгенерировано 2026-07-27 из пакета @wowblogger/wowteam-ui:
       npm run build:prod-css   →   dist-prod/login.css

   Источник — src/styles/standalone/login.css, дословная копия блока <style>
   из app/templates/login.html. Это САМОСТОЯТЕЛЬНЫЙ документ: НЕ участвует в
   общем бандле style.css (см. шапку исходника — почему). Кладётся вместо
   отдельного файла подключаемого только страницей входа, не в общий style.css.

   Правки вносятся в src/styles/standalone/login.css пакета, затем файл
   пересобирается. Правка этого файла на месте будет затёрта следующей
   выкладкой.
   ============================================================================ */

/* ═══ @font-face — тот же слой, что в общем style.css ═══ */
/* Unbounded — заголовочный шрифт WOWBLOGGER (переменная --font-heading),
   версия для прод-сборки WOWTeam.

   Отличие от src/styles/fonts.css: тот вшивает шрифт как data-URI, чтобы
   дизайн-система (бандл пакета, demo, claude.ai/design) не делала сетевых
   запросов. Здесь — обычные url() на файлы, уже выложенные на проде:
       /opt/wowteam/app/static/fonts/unbounded-cyrillic.woff2
       /opt/wowteam/app/static/fonts/unbounded-latin.woff2
   (доступны по /static/fonts/... из шаблонов). Раньше шрифт подключался
   с Google Fonts в base.html/login.html — эта волна убирает внешний запрос.

   Файл сознательно НЕ импортируется из src/styles/index.css: попав в
   npm run build (dist/wowteam-ui.css), он бы либо задвоил @font-face с
   fonts.css, либо (при удалении fonts.css из index.css) лишил дизайн-систему
   локального шрифта без сети. Подключается только в прод-сборку —
   см. scripts/build-prod-css.mjs.

   Шрифт вариативный, одна ось wght 200–900, поэтому одно правило на
   подмножество покрывает все начертания. unicode-range и font-display —
   как в src/styles/fonts.css (не менять поведение бездумно: swap оставляет
   текст в системном шрифте до загрузки Unbounded, что было и на Google Fonts
   подключении, и в текущем fonts.css). */

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/static/fonts/unbounded-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/static/fonts/unbounded-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================================
   WOWTeam — самостоятельная таблица стилей страницы входа.
   ============================================================================
   app/templates/login.html — независимый документ: не наследует base.html,
   не подключает общий style.css и держит все стили в собственном блоке
   <style>. Он использует имена классов (.container, .card, .msg), которые
   СОВПАДАЮТ с классами общей дизайн-системы, но означают другое — например,
   .container здесь max-width: 420px, а в общем бандле (components.css) —
   1170px. Сложи это в общий бандл — и поедет либо страница входа, либо все
   остальные страницы.

   Переименовывать классы нельзя: login.html — точка входа SSO, а по
   договорённости волны 1b внешний вид страницы не меняется ни на пиксель.

   Поэтому эта таблица — отдельное пространство имён. Она собирается в свой
   выходной файл dist-prod/login.css (см. scripts/build-prod-css.mjs) и НЕ
   импортируется в src/styles/index.css — попадание в общий бандл станет
   ровно той поломкой, которую этот файл обходит.

   Содержимое ниже — дословная копия блока <style> из login.html: без
   переформатирования, без замены hex на переменные, без сортировки. Любая
   правка значения здесь — это изменение вида страницы входа.
   ============================================================================ */

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; background: #f0f0f0; color: #1C1C1C;
               min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
        .container { max-width: 420px; width: 100%; }
        .logo-block { text-align: center; margin-bottom: 28px; }
        .logo { font-family: 'Unbounded', Arial, sans-serif; font-size: 32px; font-weight: 700; }
        .logo span { color: #BFF93F; background: #1C1C1C; padding: 1px 6px 2px 4px; border-radius: 5px; }
        .subtitle { font-size: 13px; color: rgba(0,0,0,0.4); margin-top: 4px; }
        .card { background: #fff; border: 1px solid #ebebeb; border-radius: 20px;
                 padding: 24px; margin-bottom: 12px; }
        .msg { font-size: 12px; padding: 10px 14px; border-radius: 10px;
               text-align: center; line-height: 1.5; margin: 0; }
        .msg.error { background: #fdeaec; color: #d94452; }
        .msg.ok { background: #e8f8ef; color: #27ae60; }

        /* Tabs */
        .tabs { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 2px solid #ebebeb; }
        .tab { flex: 1; padding: 12px 0; text-align: center; font-size: 14px; font-weight: 600;
               color: rgba(0,0,0,0.35); cursor: pointer; border-bottom: 2px solid transparent;
               margin-bottom: -2px; transition: all 0.2s; }
        .tab:hover { color: rgba(0,0,0,0.6); }
        .tab.active { color: #1C1C1C; border-bottom-color: #BFF93F; }
        .tab-panel { display: none; }
        .tab-panel.active { display: block; }

        /* Email form */
        .email-input { width: 100%; height: 48px; border: 2px solid #ebebeb; border-radius: 14px;
                        padding: 0 16px; font-family: inherit; font-size: 15px;
                        outline: none; transition: border-color 0.2s; margin-bottom: 12px; }
        .email-input:focus { border-color: #BFF93F; }
        .email-hint { font-size: 12px; color: rgba(0,0,0,0.4); text-align: center; margin-top: 8px; }
        #email-msg { display: none; margin-bottom: 12px; }

        .how-to { font-size: 13px; color: rgba(0,0,0,0.5); line-height: 1.6; text-align: center; }
        .command-tag { background: #EFF9D9; padding: 2px 8px; border-radius: 6px;
                        font-family: monospace; font-size: 13px; font-weight: 600; color: #1C1C1C; }
        .step-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
        .step-num { width: 28px; height: 28px; border-radius: 50%; background: #f2f2f2;
                     display: flex; align-items: center; justify-content: center;
                     font-size: 13px; font-weight: 700; color: rgba(0,0,0,0.35); flex-shrink: 0; }
        .step-title { font-family: 'Unbounded', Arial, sans-serif; font-size: 11px; font-weight: 700; color: rgba(0,0,0,0.3);
                       text-transform: uppercase; letter-spacing: 1px; }
        .code-input { width: 100%; height: 56px; border: 2px solid #ebebeb; border-radius: 14px;
                       padding: 0 16px; font-family: inherit; font-size: 24px; font-weight: 700;
                       text-align: center; letter-spacing: 10px; text-transform: uppercase;
                       outline: none; transition: border-color 0.2s; margin-bottom: 16px; }
        .code-input:focus { border-color: #BFF93F; }
        .submit-btn { display: block; width: 100%; height: 48px; border-radius: 50px; border: none;
                       background: #BFF93F; font-family: 'Unbounded', Arial, sans-serif; font-size: 15px; font-weight: 600;
                       cursor: pointer; color: #0b1215; transition: all 0.15s; }
        .submit-btn:hover { background: #a8e030; }
        .submit-btn:disabled { background: #e0e0e0; color: rgba(0,0,0,0.3); cursor: default; }
        @media (max-width: 440px) {
            .container { max-width: 100%; }
            .card { padding: 20px; }
        }
        @keyframes spin { to { transform: rotate(360deg); } }