/* ARKANA brand layer (14.10): токены, шапка сайдбара, полоса приложения, основная кнопка, вход. Подключается ПОСЛЕДНИМ в index.html.
   Зелёный акцент (--accent-primary) остаётся вторичным — активные пункты, значки, статусы; синий — главный цвет бренда и основных кнопок. */

:root {
  --arkan-blue-900: #0A1F44;   /* тёмно-синий лого */
  --arkan-blue-700: #152B5C;
  --arkan-blue-500: #2E4EA8;   /* акцент */
  --arkan-gold:     #D4A017;   /* золотой */
  --arkan-silver:   #B8C5D6;   /* серебристый оттенок */
  --arkan-glow-gold: 0 0 0 1px rgba(212, 160, 23, .55), 0 4px 18px rgba(212, 160, 23, .30);
}

/* ── Шапка приложения: тонкая синяя полоса ──────────────────────────────────────────────────────────────────────────── */
#app-header { position: relative; }
#app-header::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--arkan-blue-700); z-index: 5; pointer-events: none; }
body.login-mode #app-header::before { display: none; }

/* ── Основная кнопка: синий градиент, золотое свечение при наведении ────────────────────────────────────────────────── */
.btn--primary, .btn-primary {
  background: linear-gradient(135deg, var(--arkan-blue-700) 0%, var(--arkan-blue-500) 100%);
  color: #fff; border-color: transparent;
}
.btn--primary:hover:not(:disabled), .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--arkan-blue-700) 0%, #3A5FC0 100%);
  box-shadow: var(--arkan-glow-gold), 0 1px 3px rgba(0, 0, 0, .3);
}
.btn--primary:focus-visible, .btn-primary:focus-visible { outline: 2px solid var(--arkan-gold); outline-offset: 2px; }
.btn--primary:disabled, .btn-primary:disabled { background: linear-gradient(135deg, var(--arkan-blue-700), var(--arkan-blue-500)); opacity: .5; }

/* ── Шапка бокового меню: логотип на тёмно-синей плашке (серебристая надпись логотипа читается на любой теме) ──────────── */
.ak-brand--logo { flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 0 18px; }
.ak-brand--logo .ak-brand__plate {
  display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 12px;
  background: linear-gradient(160deg, var(--arkan-blue-900) 0%, var(--arkan-blue-700) 100%);
  border: 1px solid rgba(184, 197, 214, .16); box-shadow: 0 2px 10px rgba(10, 31, 68, .35);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.ak-brand--logo:hover .ak-brand__plate { border-color: rgba(212, 160, 23, .55); box-shadow: var(--arkan-glow-gold); }
.ak-brand__logo { height: 44px; width: auto; display: block; user-select: none; }
.ak-brand--logo .ak-brand__sub { padding: 0 2px; }
.ak-logo-mob__mark { width: 30px; height: 30px; display: block; object-fit: contain; }

/* ── Вход ───────────────────────────────────────────────────────────────────────────────────────────────────────────── */
body.login-mode { background: var(--arkan-blue-900); }
body.login-mode .auth-root { background: linear-gradient(160deg, var(--arkan-blue-900) 0%, var(--arkan-blue-700) 100%); }
body.login-mode .auth-visual { background: transparent; border-right: 1px solid rgba(184, 197, 214, .10); }
body.login-mode .auth-panel { background: transparent; border-left: 0; flex-direction: column; gap: 22px; }
body.login-mode .auth-panel::before { display: none; }
.auth-panel__logo { display: block; width: auto; height: 104px; max-width: 80%; object-fit: contain; filter: drop-shadow(0 8px 28px rgba(46, 78, 168, .55)); user-select: none; }
body.login-mode .auth-brand__logo { width: 44px; height: 44px; object-fit: contain; border-radius: 0; filter: drop-shadow(0 2px 12px rgba(46, 78, 168, .6)); }

/* белая карточка формы (кроме экрана приветствия после входа — он остаётся тёмным): все состояния (вход, пароль, код, настройка) на светлой поверхности */
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) {
  background: #fff; border: 1px solid rgba(10, 31, 68, .08); backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 24px 60px rgba(2, 8, 23, .45), 0 2px 8px rgba(2, 8, 23, .18);
}
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-form-eyebrow { color: var(--arkan-blue-500); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-form-title { color: var(--arkan-blue-900); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-form-desc { color: #52617a; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-form-desc strong { color: var(--arkan-blue-900); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-field__label { color: #3b4a63; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-field__label-link, body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-link { color: var(--arkan-blue-500); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-field__label-link:hover, body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-link:hover { color: var(--arkan-blue-700); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-input { background: #f5f7fb; border: 1px solid #cdd6e4; color: var(--arkan-blue-900); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-input::placeholder { color: #8a97ad; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-input:hover { background: #fff; border-color: #9fb0cf; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-input:focus { background: #fff; border-color: var(--arkan-blue-500); box-shadow: 0 0 0 3px rgba(46, 78, 168, .18); outline: none; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-input-icon, body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-input-toggle { color: #7a889f; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-input-wrap:focus-within .auth-input-icon { color: var(--arkan-blue-500); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-input-toggle:hover { color: var(--arkan-blue-700); background: rgba(46, 78, 168, .08); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-checkbox span { color: #52617a; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-checkbox input[type="checkbox"] { accent-color: var(--arkan-blue-500); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-error { background: #fdecec; border-color: #f3b9b9; color: #a12a2a; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-btn, body.login-mode .auth-btn--sso {
  background: linear-gradient(135deg, var(--arkan-blue-700) 0%, var(--arkan-blue-500) 100%); color: #fff; border: 0;
  box-shadow: 0 4px 14px rgba(21, 43, 92, .35);
}
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-btn:hover:not(:disabled) { box-shadow: var(--arkan-glow-gold), 0 4px 14px rgba(21, 43, 92, .35); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-btn--ghost { background: transparent; color: var(--arkan-blue-700); border: 1px solid #cdd6e4; box-shadow: none; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-btn--ghost:hover { background: #f0f3fa; border-color: var(--arkan-blue-500); box-shadow: none; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-back { color: #52617a; } body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-back:hover { color: var(--arkan-blue-500); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-step { background: #d5ddeb; } body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-step--active { background: var(--arkan-blue-500); } body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-step--done { background: rgba(46, 78, 168, .4); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-otp__digit { background: #f5f7fb; border: 1px solid #cdd6e4; color: var(--arkan-blue-900); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-otp__digit:focus, body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-otp__digit--filled { border-color: var(--arkan-blue-500); background: #fff; box-shadow: 0 0 0 3px rgba(46, 78, 168, .15); color: var(--arkan-blue-900); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-mfa-timer { color: #52617a; } body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-mfa-icon { background: #eaf0fb; color: var(--arkan-blue-500); }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) p, body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) small { color: #52617a; }
body.login-mode .auth-panel__inner :focus-visible { outline: 2px solid var(--arkan-gold); outline-offset: 2px; }

/* чекбокс «Запомнить меня» на светлой карточке */
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-checkbox-label { color: #52617a; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-checkbox-custom { background: #fff; border-color: #9fb0cf; }
body.login-mode .auth-panel__inner:not(:has(#view-welcome:not(.auth-view--hidden))) .auth-checkbox:checked + .auth-checkbox-custom { background: var(--arkan-blue-500); border-color: var(--arkan-blue-500); }
/* основная кнопка входа — фирменная и в приветствии */
body.login-mode .auth-btn { background: linear-gradient(135deg, var(--arkan-blue-700) 0%, var(--arkan-blue-500) 100%); color: #fff; }
body.login-mode .auth-btn:hover:not(:disabled) { box-shadow: var(--arkan-glow-gold), 0 4px 14px rgba(21, 43, 92, .35); }

@media (max-width: 900px) { .auth-panel__logo { height: 84px; } }
@media (prefers-reduced-motion: reduce) { .ak-brand__plate { transition: none; } }