/* Sign-in: the lock dial (login-fx.js) — dotted ring that turns with every key and closes green with a check — and the
   CRM keyboard (keyboard.js): dark glass tiles like the verification slots; colour is kept for the verdict only. */
:root{--dial-ok:#10b981;--dial-ice:#3460f0;--dial-size:176px}
:root[data-theme=dark]{--dial-ok:#2ee6a8;--dial-ice:#dceaff}

/* ---------- lock dial ---------- */
.login-dial{position:relative;width:var(--dial-size);height:var(--dial-size);margin:0 auto 4px;transition:width .25s,height .25s}
.dial__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dial__svg *{transform-box:view-box;transform-origin:50% 50%}
.dial__halo{fill:color-mix(in srgb,var(--dial-ice) 4%,transparent);transition:fill .35s}
.dial__track{fill:none;stroke:color-mix(in srgb,var(--dial-ice) 45%,transparent);stroke-width:1.6;stroke-dasharray:2 8;stroke-linecap:round;transition:stroke .3s,stroke-width .3s,filter .3s}
.dial__face{transform:rotate(var(--turn,0deg));transition:transform .62s cubic-bezier(.6,-.3,.32,1.3),opacity .3s}
.dial__ticks{fill:none;stroke:color-mix(in srgb,var(--text) 22%,transparent);stroke-width:6;stroke-dasharray:.6 9.4}
.dial__major{fill:none;stroke:var(--text);stroke-width:8;stroke-dasharray:1.2 88.8;opacity:.45}
.dial__hand{fill:var(--dial-ice);filter:drop-shadow(0 0 5px var(--dial-ice))}
.dial__inner{fill:color-mix(in srgb,var(--panel) 70%,transparent);stroke:color-mix(in srgb,var(--dial-ice) 30%,transparent);stroke-width:1;transition:stroke .3s,fill .35s,filter .3s}
.login-dial .login-logo{position:absolute;left:50%;top:50%;width:38%;height:28%;margin:0;transform:translate(-50%,-50%);transition:opacity .3s,transform .45s cubic-bezier(.3,1.4,.5,1)}
.dial__caption{position:absolute;left:0;right:0;top:79%;text-align:center;font-size:max(10px,calc(var(--dial-size) * .058));font-weight:800;letter-spacing:.14em;color:var(--muted);opacity:0;transition:opacity .3s,color .25s,letter-spacing .4s;pointer-events:none}
.dial__check,.dial__cross{fill:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;opacity:0}
.dial__check{stroke:var(--dial-ok);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--dial-ok) 75%,transparent))}
.dial__cross{stroke:var(--red)}
.login-dial.focused .dial__track{stroke:color-mix(in srgb,var(--dial-ice) 70%,transparent)}
.login-dial[data-state] .dial__caption{opacity:1}
.login-dial[data-state=verify] .dial__track{stroke:var(--dial-ice);stroke-width:2.4;animation:dial-spin 1.1s cubic-bezier(.6,-.15,.3,1.15) infinite}
.login-dial[data-state=verify] .dial__halo{animation:dial-breathe 1.1s ease-in-out infinite}
.login-dial[data-state=verify] .dial__caption{color:var(--dial-ice)}
.login-dial[data-state=ok] .dial__track{stroke:var(--dial-ok);stroke-dasharray:none;stroke-width:4.5;filter:drop-shadow(0 0 7px var(--dial-ok)) drop-shadow(0 0 18px color-mix(in srgb,var(--dial-ok) 60%,transparent))}
.login-dial[data-state=ok] .dial__halo{fill:color-mix(in srgb,var(--dial-ok) 10%,transparent)}
.login-dial[data-state=ok] .dial__inner{stroke:var(--dial-ok);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--dial-ok) 60%,transparent))}
.login-dial[data-state=ok] .dial__face,.login-dial[data-state=bad] .dial__face{opacity:0}
.login-dial[data-state=ok] .dial__check{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset .5s .12s cubic-bezier(.65,0,.35,1),opacity .1s .12s}
.login-dial[data-state=ok] .login-logo,.login-dial[data-state=bad] .login-logo{opacity:0;transform:translate(-50%,-50%) scale(.6)}
.login-dial[data-state=ok] .dial__caption{color:var(--dial-ok);letter-spacing:.22em}
.login-dial[data-state=bad] .dial__svg{animation:dial-shake .45s}
.login-dial[data-state=bad] .dial__track{stroke:var(--red);stroke-dasharray:none;stroke-width:4;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--red) 70%,transparent))}
.login-dial[data-state=bad] .dial__inner{stroke:var(--red)}
.login-dial[data-state=bad] .dial__cross{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset .35s .08s ease-out}
.login-dial[data-state=bad] .dial__caption{color:var(--red)}
@keyframes dial-spin{from{transform:rotate(0)}to{transform:rotate(450deg)}}
@keyframes dial-breathe{50%{fill:color-mix(in srgb,var(--dial-ice) 12%,transparent)}}
@keyframes dial-shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}

.kbd-toggle{justify-self:start;margin-top:-4px;padding:2px 0;border:0;background:none;color:var(--blue);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.kbd-toggle[hidden]{display:none}
.login-screen{overflow-y:auto}
html.vkb-open .login-screen{padding-bottom:calc(var(--vkb-h,280px) + 14px)}
html.vkb-open{--dial-size:124px}
html.vkb-open #loginNote,html.vkb-open #loginHint{display:none}
@media(max-height:820px){.vkb[data-skin=win]{--kh:40px}}

/* ---------- keyboard: dark glass tiles ---------- */
.vkb{--k-line:rgba(255,255,255,.08);--k-text:#eef1f6;--k-dim:#9aa3b2;--k-ice:#dceaff;position:fixed;left:0;right:0;bottom:0;z-index:11;color:var(--k-text);background:linear-gradient(180deg,rgba(30,32,38,.95),rgba(13,14,18,.98));border-top:1px solid rgba(255,255,255,.07);border-radius:24px 24px 0 0;box-shadow:0 -18px 50px rgba(0,0,0,.38);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;animation:vkb-in .3s cubic-bezier(.2,.8,.3,1)}
.vkb[hidden]{display:none}
.vkb__grip{display:block;width:38px;height:4px;margin:8px auto 0;border-radius:2px;background:rgba(255,255,255,.18)}
.vkb__row{display:flex;justify-content:center;gap:var(--gap);margin-top:var(--gap)}
.vkb__key{position:relative;display:grid;place-items:center;align-content:center;min-width:0;height:var(--kh);margin:0;padding:0;border:1px solid var(--k-line);border-radius:var(--kr);background:linear-gradient(180deg,#24262d,#1a1b21);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.45);color:var(--k-text);font:inherit;font-family:var(--k-font);line-height:1;cursor:pointer;transition:border-color .15s,box-shadow .22s,transform .1s,background .15s}
.vkb__key span,.vkb__key small{pointer-events:none}
.vkb__key.special{background:linear-gradient(180deg,#18191e,#121317);color:var(--k-dim)}
.vkb__key.enter{background:var(--k-ice);border-color:transparent;color:#0c1018;font-family:var(--font);font-weight:800}
.vkb__key.on{border-color:rgba(220,234,255,.75);color:var(--k-ice)}
.vkb__key.on.locked{box-shadow:inset 0 -3px 0 var(--k-ice)}
/* A pressed key lights up like the active slot. */
.vkb__key.down{border-color:rgba(255,255,255,.92);box-shadow:0 0 0 3px rgba(220,234,255,.14),0 0 22px rgba(220,234,255,.24),inset 0 1px 0 rgba(255,255,255,.08);transform:scale(.97)}
.vkb__key.down span{animation:key-in .22s ease-out}
.vkb__key.enter.down{filter:brightness(.9);box-shadow:0 0 22px rgba(220,234,255,.35)}
@keyframes key-in{from{filter:blur(3px);opacity:.35;transform:translateY(3px)}}
@keyframes vkb-in{from{transform:translateY(100%)}}

/* iPhone layout */
.vkb[data-skin=ios]{--gap:6px;--kh:44px;--kr:10px;--u:calc((100vw - 8px - 9 * var(--gap)) / 10);--k-font:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif;padding:0 4px calc(2px + env(safe-area-inset-bottom))}
.vkb[data-skin=ios] .vkb__key{width:calc(var(--u) * var(--w,1) + (var(--w,1) - 1) * var(--gap));flex:none;font-size:21px}
.vkb[data-skin=ios] .vkb__key.special{font-size:17px}
.vkb[data-skin=ios] .vkb__key[data-k=space]{font-size:15px;color:var(--k-dim)}
.vkb[data-skin=ios] .vkb__key.enter{font-size:15px}
.vkb[data-skin=ios]:not([data-layer=phone]) .vkb__key[data-pop].down::after{content:attr(data-pop);position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);min-width:calc(100% + 14px);height:52px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.85);border-radius:14px;background:linear-gradient(180deg,#2a2c34,#1d1e24);color:#fff;font-size:30px;box-shadow:0 0 0 3px rgba(220,234,255,.12),0 10px 28px rgba(0,0,0,.5);z-index:2;pointer-events:none}
.vkb[data-layer=phone] .vkb__row{padding:0 6px}
.vkb[data-layer=phone] .vkb__key{width:auto;flex:1 1 0;height:52px;gap:3px;font-size:26px;font-weight:400}
.vkb[data-layer=phone] .vkb__key small{font-size:9.5px;font-weight:700;letter-spacing:.2em;color:var(--k-dim)}
.vkb[data-layer=phone] .vkb__key.flat{background:transparent;border-color:transparent;box-shadow:none;color:var(--k-text);font-size:19px}
.vkb[data-layer=phone] .vkb__key.enter.flat{color:var(--k-ice);font-size:15px}
.vkb[data-layer=phone] .vkb__key.flat.down{border-color:rgba(255,255,255,.6)}
.vkb__bar{display:flex;align-items:center;height:40px;padding:0 14px}
.vkb__globe{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:10px;background:none;color:var(--k-dim);cursor:pointer}
.vkb__globe svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5}
.vkb__globe:active{background:rgba(255,255,255,.08)}

/* Windows layout */
.vkb[data-skin=win]{--gap:6px;--kh:46px;--kr:10px;--k-font:'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif;padding:0 max(12px,calc((100vw - 980px) / 2)) 12px}
.vkb[data-skin=win] .vkb__key{flex:var(--w,1) 1 0;font-size:16px}
.vkb[data-skin=win] .vkb__key small{position:absolute;top:6px;left:9px;font-size:10.5px;color:var(--k-dim)}
.vkb[data-skin=win] .vkb__key.special{font-size:13.5px}
.vkb[data-skin=win] .vkb__key.enter{font-size:14px}
@media(hover:hover){.vkb[data-skin=win] .vkb__key:hover{border-color:rgba(255,255,255,.28)}}
@media(prefers-reduced-motion:reduce){.dial__face{transition:none}.login-dial[data-state] .dial__track,.login-dial[data-state] .dial__svg,.login-dial[data-state] .dial__halo,.vkb,.vkb__key.down span{animation:none}}