/* Logowanie do CRM w stylu D3 (03.11.2026) — шаблон «6 · Logowanie do CRM».
   Подключается после style.css и /_shared/d3-crm.css. Форма, id и script.js те же. */
@media screen {
html body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: flex-end; padding: 48px 8vw; box-sizing: border-box; position: relative; overflow-x: clip; }
.d3-login-side { position: absolute; inset: 0 auto 0 0; width: 50%; padding: 0 0 0 6vw; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;
  background: repeating-linear-gradient(105deg, rgba(0,0,0,.06) 0 1px, transparent 1px 34px), var(--d3-hot);
  clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%); color: var(--d3-on-hot); }
.d3-login-side > * { max-width: 400px; }
.d3-login-eb { display: flex; align-items: center; gap: 10px; font: 700 11px var(--d3-font); letter-spacing: .14em; text-transform: uppercase; }
.d3-login-eb i { display: block; width: 22px; height: 3px; background: var(--d3-on-hot); transform: skewX(-20deg); }
.d3-login-h { margin: 14px 0 0; font: 700 52px/1.02 var(--d3-font); letter-spacing: -.035em; }
.d3-login-list { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font: 600 15px var(--d3-font); }
.d3-login-list li { display: flex; align-items: center; gap: 12px; }
.d3-login-list li::before { content: ''; width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px;
  background: var(--d3-gr) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.d3-tapes--login { position: absolute; left: 0; right: 0; bottom: 40px; height: 116px; background: transparent; z-index: 0; overflow: hidden; }
.d3-tapes--login .d3-tape { left: -20%; width: 140%; font-size: 13px; letter-spacing: .22em; gap: 36px; transform: rotate(calc(-1 * atan2(14px, 50vw))); }
.d3-tapes--login .d3-tape--o { top: 20px; height: 38px; box-shadow: 0 12px 20px -12px rgba(0,0,0,.8); }
.d3-tapes--login .d3-tape--w { top: 60px; height: 32px; font-size: 12px; padding-left: 220px; }

.login-container { position: relative; z-index: 1; width: 100%; max-width: 440px; margin: 0 !important; background: var(--d3-plate) !important; border: 0 !important;
  border-radius: 20px !important; padding: 34px !important; box-shadow: 0 40px 80px -30px rgba(0,0,0,.75) !important; box-sizing: border-box; }
.login-container::before { content: ''; position: absolute; left: 34px; top: 0; width: 64px; height: 4px; background: var(--d3-hot); }
.login-header { text-align: left !important; }
.login-header .logo-img { content: url('/_shared/d3/logo-trust.png'); width: auto !important; height: 32px !important; filter: none !important; margin: 0 0 22px !important; display: block; }
.login-header h1 { font: 700 26px var(--d3-font) !important; letter-spacing: -.015em !important; margin: 0 0 4px !important; text-align: left !important; }
.login-header h1::before { display: none !important; }
.login-header p { color: var(--d3-ink-3) !important; text-align: left !important; }
.form-group label { color: var(--d3-ink-3) !important; font: 600 12px var(--d3-font) !important; letter-spacing: 0 !important; text-transform: none !important; }
.form-group input { background: var(--d3-deep) !important; border: 1px solid var(--d3-hi) !important; border-radius: 10px !important; color: #fff !important; height: 46px; }
.login-button { background: var(--d3-hot) !important; color: var(--d3-on-hot) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); font: 700 15px var(--d3-font) !important; letter-spacing: .04em; text-transform: uppercase; height: 50px; }
.login-button:hover { filter: brightness(1.07); transform: none !important; }
#twoFaBackBtn { clip-path: none; text-transform: none; }
@media (max-width: 900px) {
  html body { flex-direction: column; justify-content: flex-start; padding: 0 16px 120px; }
  .d3-login-side { position: relative; width: calc(100% + 32px); margin: 0 -16px 28px; padding: 40px 24px 70px; clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%); }
  .d3-login-h { font-size: 36px; }
  .d3-login-list { display: none; }
  .login-container { margin: 0 auto !important; }
  .d3-tapes--login { bottom: 10px; height: 84px; }
  .d3-tapes--login .d3-tape { font-size: 11px; gap: 26px; transform: rotate(calc(-1 * atan2(6px, 50vw))); }
  .d3-tapes--login .d3-tape--o { top: 14px; height: 30px; }
  .d3-tapes--login .d3-tape--w { top: 46px; height: 25px; font-size: 10px; padding-left: 90px; }
}
}

/* Выбор языка на странице входа (08.11.2026) */
.login-langs { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.login-langs button { all: unset; cursor: pointer; padding: 6px 10px; border-radius: 8px; font: 700 12px var(--d3-font, sans-serif); letter-spacing: .08em; color: var(--d3-ink-3, #9aa0aa); }
.login-langs button:hover, .login-langs button:focus-visible { background: var(--d3-plate, #2c2f36); color: var(--d3-ink, #fff); }
.login-langs button.is-current { color: var(--d3-or, #ff6200); }
