/* Замок экрана CRM (02.10.2026): заставка-видео «семья за матовым
   стеклом» и стеклянное окно PIN-кода — по макету Detagram_PIN.html. */

.crm-lock-btn {
    position: fixed; top: 14px; right: 16px; z-index: 1040;
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    border: 1px solid #e3e1ea; background: rgba(255, 255, 255, .86); color: #5c528e;
    box-shadow: 0 6px 18px -12px rgba(60, 50, 90, .5);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: background .2s, transform .2s, color .2s;
}
.crm-lock-btn:hover { background: #fff; color: #3c4255; transform: translateY(-1px); }
.crm-lock-btn:focus-visible { outline: 3px solid #b5a7da; outline-offset: 2px; }
.crm-lock-btn svg { width: 17px; height: 17px; }
.crm-lock-btn.in-bar { position: static; width: 43px; height: 43px; box-shadow: none; background: #fff; border-color: #dfe2ec; }
.crm-lock-li { display: flex; align-items: center; }
@media (max-width: 991.98px) { .crm-lock-btn { top: 9px; right: 66px; width: 34px; height: 34px; } }

.crm-lock {
    position: fixed; inset: 0; z-index: 2147483000;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #66625d;
    background: #e7dac6 url('/media/lock-scene-2.jpg') center / cover no-repeat;
    overflow: hidden; opacity: 0; transition: opacity .45s ease;
    user-select: none;
}
.crm-lock.on { opacity: 1; }
.crm-lock .scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.crm-lock .stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 22px; }
.crm-lock .card {
    position: relative; width: min(330px, calc(100vw - 44px)); padding: 34px 24px 26px;
    border: 1px solid #ffffffa3; border-radius: 30px;
    background: linear-gradient(135deg, #ffffff85, #ffffff45);
    box-shadow: 0 22px 70px #77664d1c, inset 0 1px 0 #ffffffc9;
    backdrop-filter: blur(28px) saturate(.8); -webkit-backdrop-filter: blur(28px) saturate(.8);
    display: flex; align-items: center; flex-direction: column; text-align: center;
    transition: opacity .7s, transform .7s, filter .7s;
}
.crm-lock .card.away { opacity: 0; transform: translateY(12px) scale(.97); filter: blur(7px); pointer-events: none; }
.crm-lock.idle { cursor: none; }
.crm-lock .who { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #8e867d; margin-bottom: 14px; }
.crm-lock .who i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
    background: #ffffff70; border: 1px solid #ffffffb0; color: #7b746c; font-weight: 600; font-size: 11px; }
/* фото из профиля (06.10.2026); инициалы не вылезают за круг */
.crm-lock .who i { width: 36px; height: 36px; flex: none; overflow: hidden; font-size: 12px; letter-spacing: -.3px; line-height: 1; }
.crm-lock .who i.has-photo { padding: 0; border-color: #ffffffd0; }
.crm-lock .who i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crm-lock .who { font-size: 13px; }
.crm-lock .lock-ico { width: 28px; height: 28px; margin-bottom: 14px; stroke: #827b72; fill: none; stroke-width: 1.3; }
.crm-lock h1 { font-size: 20px; letter-spacing: -.5px; font-weight: 500; margin: 0 0 8px; color: #66625d; }
.crm-lock .sub { font-size: 12px; color: #918980; margin: 0 0 24px; }
.crm-lock .pin-wrap { position: relative; width: 230px; height: 55px; }
.crm-lock .slots { display: flex; gap: 10px; height: 100%; }
.crm-lock .slot { flex: 1; border: 1px solid #ffffffb3; border-radius: 13px; background: #ffffff45; display: grid; place-items: center;
    box-shadow: inset 0 1px 4px #71604705; font-size: 23px; color: #7b746c; transition: .2s; }
.crm-lock .slot.active { border-color: #a49b8b; box-shadow: 0 0 0 3px #ffffff36; }
.crm-lock .slot:not(.filled)::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #bdb4a640; }
.crm-lock .pin { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: text; font-size: 16px; border: 0; }
.crm-lock .status { min-height: 34px; margin: 16px 0 0; font-size: 11.5px; line-height: 1.45; color: #8e867d; max-width: 260px; }
.crm-lock .status.err { color: #9a4b3c; }
.crm-lock .card.ok .slot { border-color: #9cae9a; }
.crm-lock .card.shake { animation: crm-lock-shake .42s; }
@keyframes crm-lock-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.crm-lock .forgot { margin-top: 10px; border: 0; background: none; color: #8e867d; font: inherit; font-size: 11px;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.crm-lock .forgot:hover { color: #66625d; }
.crm-lock .set-pin { margin-top: 14px; display: inline-block; padding: 9px 16px; border-radius: 100px; border: 1px solid #ffffff90;
    background: #ffffff55; color: #66625d; font-size: 12px; text-decoration: none; }
.crm-lock .hint { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; font-size: 12px; color: #ffffffd9;
    text-shadow: 0 1px 8px #6b5a4080; transition: opacity .7s; }
.crm-lock:not(.idle) .hint { opacity: 0; }
.crm-lock .time { position: absolute; top: 28px; left: 0; right: 0; text-align: center; color: #fffffff0;
    font-size: clamp(44px, 7vw, 76px); font-weight: 300; letter-spacing: -2px; text-shadow: 0 2px 24px #6b5a4055; transition: opacity .7s; }
.crm-lock:not(.idle) .time { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .crm-lock .scene { display: none; } .crm-lock, .crm-lock .card { transition: none; } }