.kb{--kb-key-h:clamp(64px,6.2vh,110px);--kb-key-fs:clamp(26px,2.6vh,44px);--kb-gap:clamp(6px,0.85vh,16px);--kb-radius:clamp(10px,1.1vh,20px);--kb-ripple-ms:120ms;--kb-key-bg:#ffffff;--kb-key-text:#123243;--kb-soft-bg:var(--app-selected,#e9eff7);--kb-soft-text:#1d5a78;--kb-action-bg:var(--app-btn,#d9ead3);--kb-action-text:var(--app-btn-text,#58d0a0);width:100%;max-width:min(1000px,96vw);margin-inline:auto;padding:var(--kb-gap);display:flex;flex-direction:column;gap:var(--kb-gap);border-radius:calc(var(--kb-radius) * 1.4);background:rgba(6,30,42,.42);box-shadow:0 clamp(6px,.8vh,14px) clamp(20px,3vh,48px) rgba(0,0,0,.28);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.kb--email{--kb-key-h:clamp(56px,5.3vh,94px);--kb-key-fs:clamp(22px,2.2vh,38px)}.kb--numeric{--kb-key-h:clamp(84px,8.4vh,150px);--kb-key-fs:clamp(36px,3.8vh,64px);max-width:min(680px,92vw)}.kb__row{display:flex;gap:var(--kb-gap);align-items:stretch}.kb--numeric .kb__row{display:grid;grid-template-columns:repeat(3,1fr)}.kb__key,.kb__slot{position:relative;display:flex;min-width:0}.kb__key{flex:1;height:var(--kb-key-h);align-items:center;justify-content:center;border-radius:var(--kb-radius);background:var(--kb-key-bg);color:var(--kb-key-text);font-size:var(--kb-key-fs);font-weight:600;line-height:1;white-space:nowrap;overflow:visible;cursor:pointer;touch-action:none;box-shadow:0 clamp(3px,.4vh,6px) 0 rgba(0,0,0,.3);transition:transform 60ms ease-out,box-shadow 60ms ease-out,background-color .12s ease-out}.kb__key.is-down{transform:translateY(clamp(2px,.3vh,5px));box-shadow:0 1px 0 rgba(0,0,0,.3)}.kb__key--soft{background:var(--kb-soft-bg);color:var(--kb-soft-text);font-size:calc(var(--kb-key-fs) * .8);font-weight:700}.kb__key--action{background:var(--kb-action-bg);color:var(--kb-action-text);font-size:calc(var(--kb-key-fs) * .72);font-weight:800;letter-spacing:.02em;border:2px solid rgba(0,0,0,.08)}.kb--numeric .kb__key--action{font-size:calc(var(--kb-key-fs) * .46);padding-inline:clamp(4px,.6vw,12px)}.kb--numeric .kb__key--soft{font-size:calc(var(--kb-key-fs) * .72)}.kb__key.is-active{background:#123243;color:#ffffff}.kb__key.is-disabled{opacity:.32;cursor:default}.kb__label{position:relative;z-index:1;pointer-events:none}.kb__dot{top:clamp(5px,.7vh,10px);right:clamp(7px,.9vh,13px);width:clamp(5px,.6vh,9px);height:clamp(5px,.6vh,9px);border-radius:50%;background:currentColor;opacity:.35}.kb__dot,.kb__ink{position:absolute;pointer-events:none}.kb__ink{inset:0;border-radius:inherit;overflow:hidden}.kb__ripple{position:absolute;width:0;height:0;border-radius:50%;background:currentColor;opacity:.28;transform:translate(-50%,-50%);animation:kbRipple var(--kb-ripple-ms) ease-out forwards}@keyframes kbRipple{0%{width:0;height:0;opacity:.3}to{width:260%;height:260%;opacity:0}}.kb__backdrop{position:fixed;inset:0;z-index:40;background:transparent}.kb__accents{position:absolute;z-index:41;bottom:calc(100% + clamp(8px, 1vh, 16px));left:50%;transform:translateX(-50%);display:flex;gap:calc(var(--kb-gap) * .7);padding:calc(var(--kb-gap) * .7);border-radius:calc(var(--kb-radius) * 1.3);background:#ffffff;box-shadow:0 clamp(8px,1.2vh,20px) clamp(24px,3.4vh,54px) rgba(0,0,0,.4);animation:kbPop .12s ease-out;max-width:92vw;flex-wrap:wrap;justify-content:center}@keyframes kbPop{0%{opacity:0;transform:translateX(-50%) translateY(8px) scale(.94)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}.kb__accent{min-width:clamp(60px,5.6vh,100px);height:clamp(64px,6.2vh,110px);display:flex;align-items:center;justify-content:center;padding-inline:clamp(8px,1vh,16px);border-radius:var(--kb-radius);background:#f2f6fa;color:#123243;font-size:var(--kb-key-fs);font-weight:700;cursor:pointer;touch-action:none}.kb__accent:active{background:var(--kb-soft-bg);transform:translateY(2px)}.ff{--ff-border:rgba(255,255,255,0.28);--ff-bg:rgba(255,255,255,0.1);width:100%;display:flex;flex-direction:column;gap:clamp(2px,.3vh,6px);padding:clamp(8px,1vh,17px) clamp(16px,1.8vw,32px);min-height:76px;justify-content:center;border-radius:clamp(12px,1.3vh,24px);border:3px solid var(--ff-border);background:var(--ff-bg);color:#ffffff;text-align:left;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:border-color .14s ease-out,background-color .14s ease-out,box-shadow .14s ease-out}.ff.is-active{--ff-border:#ffffff;--ff-bg:rgba(255,255,255,0.2);box-shadow:0 0 0 3px rgba(255,255,255,.22)}.ff.has-error{--ff-border:#ffb4ad}.ff.has-error.is-active{--ff-border:#ffc9c3;box-shadow:0 0 0 3px rgba(255,180,173,.3)}.ff__head{display:flex;align-items:baseline;gap:clamp(8px,1vw,18px);flex-wrap:wrap}.ff__label{font-size:clamp(13px,1.2vh,21px);font-weight:800;letter-spacing:.06em;opacity:.92}.ff__rule{font-size:clamp(10px,.9vh,16px);font-weight:600;letter-spacing:.04em;opacity:.55}.ff__value{display:flex;align-items:center;min-height:clamp(30px,2.9vh,50px);font-size:clamp(21px,2.1vh,37px);font-weight:700;line-height:1.15;word-break:break-all}.ff__placeholder{opacity:.42;font-weight:500}.ff__caret{display:inline-block;width:clamp(3px,.3vw,6px);height:clamp(28px,2.8vh,50px);margin-left:3px;background:#ffffff;animation:ffCaret 1s step-end infinite}@keyframes ffCaret{0%,50%{opacity:1}50.01%,to{opacity:0}}.ff__error{font-size:clamp(12px,1.1vh,19px);font-weight:700;color:#ffd7d2}.ff__clear{position:absolute;top:50%;right:clamp(10px,1vw,20px);transform:translateY(-50%);width:clamp(56px,5vh,88px);height:clamp(56px,5vh,88px);display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;background:rgba(255,255,255,.16);color:#ffffff;font-size:clamp(22px,2.2vh,38px);cursor:pointer;touch-action:manipulation}.ff__clear:active{background:rgba(255,255,255,.3)}.ff__wrap{position:relative;width:100%}.ff__wrap.has-clear .ff{padding-right:clamp(76px,7vh,124px)}@media (prefers-reduced-motion:reduce){.ff__caret,.kb__accents,.kb__ripple{animation:none}.ff,.kb__key{transition:none}}