/* assets/osk.css — Tastiera virtuale në ekran (touch screen pa tastierë fizike).
   Përdoret te login-i (përdoruesi/fjalëkalimi) dhe kudo ku inputi ka klasën .osk-input. */
.osk {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000;
    display: none; background: #0f172a; border-top: 2px solid #2563eb;
    box-shadow: 0 -14px 40px -12px rgba(0,0,0,.6);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    user-select: none; -webkit-user-select: none; touch-action: manipulation;
    animation: oskUp .18s ease-out;
}
.osk.open { display: block; }
@keyframes oskUp { from { transform: translateY(100%); } to { transform: none; } }
/* Mbyllja: rrëshqet poshtë ngadalë (njësoj si hapja, e kundërt) */
.osk.closing { display: block; animation: oskDown .22s ease-in forwards; }
@keyframes oskDown { from { transform: none; } to { transform: translateY(100%); } }

.osk-rows { max-width: 960px; margin: 0 auto; }
.osk-row { display: flex; gap: 6px; justify-content: center; margin-bottom: 6px; }
.osk-row:last-child { margin-bottom: 0; }

.osk-key {
    flex: 1 1 0; min-width: 0; height: 54px; padding: 0;
    border: none; border-radius: 9px; background: #475569; color: #fff;
    font-size: 19px; font-weight: 600; line-height: 1; cursor: pointer;
    box-shadow: 0 2px 0 rgba(0,0,0,.35); transition: background .08s, transform .05s;
    display: flex; align-items: center; justify-content: center;
}
.osk-key:hover { background: #556375; }
.osk-key:active { background: #2563eb; transform: translateY(1px); box-shadow: none; }
.osk-key.tok { background: #334155; font-size: 16px; font-weight: 700; }
.osk-key.accent { background: #2563eb; }
.osk-key.accent:active { background: #1d4ed8; }
.osk-key.tok-shift.active { background: #16a34a; }
.osk-key.tok-hide { background: #b91c1c; }
.osk-key.tok-hide:active { background: #991b1b; }

@media (max-width: 560px) {
    .osk-key { height: 48px; font-size: 17px; }
    .osk { padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
}