:root{--vk-height:0px}
html.vk-enabled{scroll-padding-bottom:calc(var(--vk-height,0px) + 24px)}
body.vk-open{padding-bottom:calc(var(--vk-height,420px) + env(safe-area-inset-bottom,0px))}
.vk-input-wrap{position:relative;width:100%}
.vk-input-wrap>input{padding-inline-end:64px!important}
.vk-input-toggle{position:absolute;inset-inline-end:7px;top:50%;width:44px;height:40px;transform:translateY(-50%);border:1px solid rgba(110,231,183,.32);border-radius:10px;background:rgba(15,118,110,.18);color:#a7f3d0;font:inherit;font-size:20px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.virtual-keyboard{position:fixed;inset-inline:0;bottom:0;z-index:99999;max-height:min(52dvh,620px);overflow:auto;padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));border-top:1px solid rgba(148,163,184,.24);background:rgba(3,18,25,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 -24px 80px rgba(0,0,0,.38);transform:translateY(105%);opacity:0;pointer-events:none;transition:transform .2s ease,opacity .2s ease}
.virtual-keyboard.is-visible{transform:translateY(0);opacity:1;pointer-events:auto}
.vk-panel{width:min(100%,1180px);margin-inline:auto;padding:clamp(10px,1.5vw,18px);border:1px solid rgba(110,231,183,.13);border-radius:24px;background:linear-gradient(150deg,rgba(7,30,40,.97),rgba(5,43,36,.96))}
.vk-header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid rgba(148,163,184,.13)}
.vk-header__copy{min-width:0;display:grid;gap:2px}
.vk-header__copy small{color:#6ee7b7;font-size:11px;font-weight:900}
.vk-header__copy strong{overflow:hidden;color:#f8fafc;font-size:clamp(14px,1.5vw,20px);text-overflow:ellipsis;white-space:nowrap}
.vk-keys{display:grid;gap:8px}
.vk-row{display:flex;justify-content:center;gap:clamp(4px,.55vw,8px)}
.vk-key{min-width:0;min-height:52px;flex:1 1 0;border:1px solid rgba(148,163,184,.22);border-radius:12px;background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.035));color:#f8fafc;font-family:"Tajawal","Segoe UI",sans-serif;font-size:clamp(15px,1.6vw,22px);font-weight:850;cursor:pointer;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.vk-key:active,.vk-key.is-active{border-color:rgba(94,234,212,.55);background:rgba(13,148,136,.3);transform:translateY(1px)}
.vk-key:focus-visible,.vk-input-toggle:focus-visible{outline:3px solid rgba(94,234,212,.33);outline-offset:2px}
.vk-key--action{flex:.8 1 0;color:#bae6fd}
.vk-key--space{flex:3 1 0;color:#d1fae5}
.vk-key--done{flex:1.35 1 0;border-color:rgba(52,211,153,.35);background:linear-gradient(135deg,#34d399,#14b8a6);color:#022c22}
.vk-key--hide{min-height:42px;flex:0 0 auto;padding-inline:18px;color:#cbd5e1}
.vk-row--numeric{width:min(100%,560px);margin-inline:auto}
.vk-row--symbols{width:min(100%,720px);margin-inline:auto}
@media(min-width:900px) and (orientation:portrait){.virtual-keyboard{max-height:48dvh}.vk-panel{padding:18px 22px 22px}.vk-keys{gap:10px}.vk-key{min-height:68px;border-radius:15px;font-size:clamp(20px,2.1vw,28px)}.vk-key--hide{min-height:48px;font-size:16px}}
@media(max-width:640px){body.vk-open{padding-bottom:calc(var(--vk-height,350px) + env(safe-area-inset-bottom,0px))}.virtual-keyboard{max-height:56dvh;padding-inline:4px}.vk-panel{padding:8px 6px 10px;border-radius:18px 18px 0 0}.vk-row{gap:3px}.vk-key{min-height:44px;border-radius:8px;font-size:13px}.vk-key--action,.vk-key--done{font-size:12px}}
@media(prefers-reduced-motion:reduce){.virtual-keyboard,.vk-key{transition:none}}

.vk-row--password {
  width: min(100%, 760px);
  margin-inline: auto;
}

[data-vk-layout="password"] {
  letter-spacing: .04em;
}