.virtual-text-div { position: fixed; inset: 0; display: flex; justify-content: center; align-items: center; pointer-events: none; background: transparent; z-index: 9999; }

.virtual-text-div table { pointer-events: auto; background: #1b1b2d; padding: 15px; border-radius: 16px; border-spacing: 8px; width: auto; max-width: 90vw; box-shadow: 0 20px 50px rgba(0,0,0,0.6); animation: popIn 0.2s ease; }

.virtual-text-div input { pointer-events: auto; }

.virtual-text-div .key { pointer-events: auto; }

#virtual-text-input { width: 100% !important; background: #1e1e2f !important; height: 65px !important; font-size: 28px !important; color: #ffffff !important; border-radius: 10px; border: 2px solid #3a3a55 !important; padding: 10px 15px !important; margin-bottom: 12px; outline: none; box-sizing: border-box; }

.virtual-text-div td { text-align: center; }

.key { background: linear-gradient(145deg,#2a2a40,#1c1c2b); color: #fff; font-size: 20px; height: 55px; min-width: 55px; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 4px 4px 10px rgba(0,0,0,0.4),-2px -2px 6px rgba(255,255,255,0.05); transition: all 0.15s ease; user-select: none; }

.key:hover { background: linear-gradient(145deg,#3a3a5a,#25253a); transform: translateY(-2px); }

.key:active { transform: scale(0.95); box-shadow: inset 2px 2px 6px rgba(0,0,0,0.5); }

.key.ok { background: linear-gradient(145deg,#4CAF50,#2e7d32); }

.key.cancel { background: linear-gradient(145deg,#e53935,#b71c1c); }

.key.delete { background: linear-gradient(145deg,#ff9800,#ef6c00); }

.key.clear { background: linear-gradient(145deg,#607d8b,#37474f); }

.key.caps { background: linear-gradient(145deg,#3f51b5,#283593); }

.key.space { min-width: 120px; }

.key.caps.active { box-shadow: 0 0 10px #3f51b5; }

.hide { display: none; }

@keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }