.mm-auth { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding-block: 80px; background: var(--mm-surface-page); } .mm-auth__card { width: 424px; max-width: 100%; padding: 24px; background: var(--mm-surface); border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, .08); } .mm-auth__head { display: flex; align-items: flex-start; justify-content: flex-start; gap: 12px; height: 72px; border-bottom: 1px solid var(--mm-border); } .mm-auth__head-icon { width: 48px; height: 48px; flex: none; order: -1; } .mm-auth__title { margin: 8px 0 0; font-size: 20px; font-weight: var(--mm-fw-semibold); line-height: 32px; color: var(--mm-text); } .mm-auth__desc { margin: 24px 0 0; font-size: 16px; font-weight: var(--mm-fw-regular); line-height: 24px; color: var(--mm-text); } .mm-auth__desc--center { text-align: center; } .mm-auth__desc b { font-weight: var(--mm-fw-semibold); color: var(--mm-text); direction: ltr; display: inline-block; } .mm-auth__desc--error { color: var(--mm-danger); } .mm-auth__field { position: relative; margin-top: 24px; } .mm-auth__label { position: absolute; top: -10px; inset-inline-start: 12px; z-index: 2; padding-inline: 6px; background: var(--mm-surface); font-size: 14px; font-weight: var(--mm-fw-semibold); line-height: 20px; color: var(--mm-text); white-space: nowrap; } .mm-auth__card .mm-auth__input { width: 100%; height: 48px; padding: 0 12px; background: transparent; border: 1px solid var(--mm-border); border-radius: 12px; font-family: inherit; font-size: 12px; font-weight: var(--mm-fw-light); color: var(--mm-text); } .mm-auth__card .mm-auth__input::placeholder { font-size: 12px; font-weight: var(--mm-fw-light); color: var(--mm-text-muted); } .mm-auth__card .mm-auth__input:focus { outline: none; border-color: var(--mm-primary); box-shadow: 0 0 0 3px rgba(6, 56, 190, .12); } .mm-auth__card .mm-auth__input--code { letter-spacing: .4em; text-align: center; font-size: 18px; font-weight: var(--mm-fw-semibold); } .mm-auth__timer { margin: 21px 0 0; font-size: 14px; font-weight: var(--mm-fw-semibold); line-height: 20px; text-align: center; color: var(--mm-text); direction: ltr; } .mm-auth__hint { margin: 22px 0 0; font-size: 14px; font-weight: var(--mm-fw-light); line-height: 20px; text-align: center; color: var(--mm-text-muted); } .mm-auth__resend { display: block; width: 100%; margin-top: 16px; padding: 0; background: none; border: 0; font-family: inherit; font-size: 14px; font-weight: var(--mm-fw-semibold); color: var(--mm-primary); cursor: pointer; } .mm-auth__submit { width: 100%; height: 48px; margin-top: 24px; border-radius: 16px; font-size: 16px; font-weight: var(--mm-fw-regular); line-height: 24px; } .mm-auth__submit.is-busy { opacity: .7; pointer-events: none; } .mm-auth__link { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin-top: 24px; padding: 0; background: none; border: 0; border-radius: 16px; font-family: inherit; font-size: 16px; font-weight: var(--mm-fw-regular); line-height: 24px; color: var(--mm-primary); cursor: pointer; } .mm-auth__link:hover { background: var(--mm-blue-50); } .mm-auth__check { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-top: 24px; font-size: 16px; font-weight: var(--mm-fw-regular); line-height: 24px; cursor: pointer; } .mm-auth__check input { position: absolute; opacity: 0; width: 0; height: 0; } .mm-auth__check-box { order: -1; width: 20px; height: 20px; flex: none; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--mm-border); transition: background-color var(--mm-transition), box-shadow var(--mm-transition); } .mm-auth__check input:checked + .mm-auth__check-box { background: var(--mm-primary); box-shadow: inset 0 0 0 1px var(--mm-primary); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 10.5l3 3 6-6' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 20px 20px; } .mm-auth__check input:focus-visible + .mm-auth__check-box { outline: 2px solid var(--mm-primary); outline-offset: 2px; } .mm-auth__error { margin: 12px 0 0; padding: 10px 12px; background: rgba(239, 68, 68, .08); border-radius: 12px; font-size: 14px; line-height: 20px; color: var(--mm-danger); } @media (max-width: 520px) { .mm-auth { padding-block: 40px; } .mm-auth__card { padding: 16px; } } body.mm-authmodal-open { overflow: hidden; } .mm-authmodal { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(4, 12, 38, .78); backdrop-filter: blur(6px); animation: mm-authmodal-in .18s ease-out; } .mm-authmodal[hidden] { display: none; } @keyframes mm-authmodal-in { from { opacity: 0; } to { opacity: 1; } } .mm-authmodal__card { position: relative; max-height: calc(100vh - 48px); overflow-y: auto; animation: mm-authmodal-card .22s ease-out; } @keyframes mm-authmodal-card { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } .mm-authmodal__close { position: absolute; top: 14px; inset-inline-end: 14px; width: 36px; height: 36px; border: 1px solid var(--mm-border); border-radius: 10px; background: var(--mm-white); font-size: 22px; line-height: 1; color: var(--mm-text-muted); cursor: pointer; transition: color var(--mm-transition), border-color var(--mm-transition); } .mm-authmodal__close:hover { color: var(--mm-danger); border-color: var(--mm-danger); } @media (prefers-reduced-motion: reduce) { .mm-authmodal, .mm-authmodal__card { animation: none; } }