/* =======================================
   On-Screen Keyboard — Pro Dark Theme
   ======================================= */
:root{
  --vk-radius: 12px;
  --vk-key-radius: 10px;
  --vk-pad: 10px;
  --vk-gap: 6px;
  --vk-font: 13.5px;
  --vk-bg: #0e1115;
  --vk-bg-2: #10141a;
  --vk-border: #20262e;
  --vk-divider: #1c222a;
  --vk-key: #151a20;
  --vk-key-hover: #1b222a;
  --vk-key-active: #0f141a;
  --vk-key-border: #26303a;
  --vk-fn: #182333;
  --vk-fn-border: #2a3a4d;
  --vk-danger: #3a2121;
  --vk-danger-border: #5a2d2d;
  --vk-text: #e8edf3;
  --vk-text-dim: #c3ccd7;
  --vk-accent: #86e1ff;
  --vk-accent-2: #8b5cf6;
}

.vk.hidden{ display:none !important; }
.vk{
  position: fixed; left: 20px; bottom: 90px;
  width: 560px; max-width: min(95vw, 760px);
  background: radial-gradient(1200px 600px at 10% 110%, rgba(14,17,21,.5) 0%, rgba(14,17,21,1) 28%),
              linear-gradient(180deg, var(--vk-bg), #0b0f14);
  color: var(--vk-text);
  border: 1px solid var(--vk-border);
  border-radius: var(--vk-radius);
  box-shadow: 0 20px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02) inset;
  backdrop-filter: saturate(120%) blur(4px);
  z-index: 10001; user-select: none; overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  transform-origin: bottom left; animation: vkIn .18s ease-out both;
}
.vk.pinned{ bottom: calc(var(--bottombar-h, 56px) + var(--statusbar-h, 26px) + 10px); }

.vk-header{
  cursor: move; display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; background: linear-gradient(180deg, #151a21 0%, var(--vk-bg-2) 100%);
  border-bottom: 1px solid var(--vk-divider);
}
.vk-title{ font-weight: 700; font-size: 12.5px; letter-spacing: .3px; color: var(--vk-text-dim); }
.vk-actions{ display: flex; gap: 6px; }
.vk-btn{
  min-width: 34px; height: 30px; padding: 0 8px; border-radius: 8px;
  background: #202733; border: 1px solid #2a3340; color: #dbe7ff; font-size: 12px; font-weight: 600;
  transition: background .15s ease, transform .05s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 6px 16px rgba(0,0,0,.35);
}
.vk-btn:hover{ background:#243043; }
.vk-btn:active{ transform: translateY(1px); }
#vk-pin.active{ color:#baf7d3; background:#183f33; border-color:#2a6b58; box-shadow: 0 0 0 1px rgba(186,247,211,.08) inset, 0 10px 24px rgba(8,200,120,.15); }

.vk-body{ padding: var(--vk-pad); }
.vk-layout.hidden{ display:none; }

.vk-row{ display:flex; gap: var(--vk-gap); margin-bottom: var(--vk-gap); }
.vk-key{
  flex: 1 1 0; height: 44px; border-radius: var(--vk-key-radius);
  background: linear-gradient(180deg, var(--vk-key), #12161c);
  border: 1px solid var(--vk-key-border); color: var(--vk-text);
  font-size: var(--vk-font); font-weight: 700; letter-spacing: .2px;
  display:grid; place-items:center;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 18px rgba(0,0,0,.28);
  transition: background .15s ease, transform .05s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.vk-key:hover{
  background: linear-gradient(180deg, var(--vk-key-hover), #141a21);
  border-color:#2e3a46;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 28px rgba(0,0,0,.34);
}
.vk-key:active{ background: var(--vk-key-active); transform: translateY(1px); box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 6px 16px rgba(0,0,0,.32); }
.vk-key.vk-fn{ background: linear-gradient(180deg, var(--vk-fn), #132237); border-color: var(--vk-fn-border); color: #e4eef8; }
.vk-key.vk-danger{ background: linear-gradient(180deg, var(--vk-danger), #2b1616); border-color: var(--vk-danger-border); color: #ffd7d7; }
.vk-key.vk-wide{ flex: 2.25 1 0; }

.vk-key.active-sim{ outline: 2px solid rgba(134,225,255,.25); box-shadow: 0 0 0 2px rgba(134,225,255,.12) inset, 0 12px 28px rgba(0,0,0,.38); }
.vk-key.vk-fn, .vk-key[data-key="Enter"], .vk-key[data-key="Tab"]{ font-weight: 600; color: #d7e3f3; }

.vk-resize{
  position: absolute; right: 8px; bottom: 8px; width: 16px; height: 16px;
  background: linear-gradient(135deg, transparent 0 50%, rgba(255,255,255,.09) 50% 100%), linear-gradient(135deg, transparent 0 36%, rgba(255,255,255,.05) 36% 70%, transparent 0);
  border-bottom: 3px solid #334155; border-right: 3px solid #334155; border-radius: 3px;
  cursor: nwse-resize; opacity: .9; filter: drop-shadow(0 4px 8px rgba(0,0,0,.3));
}

.vk:not(.hidden){
  border-color: #24303b;
  box-shadow: 0 18px 36px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.03) inset, 0 0 40px -16px rgba(134,225,255,.25);
}

#vk-caps.active, #vk-shift.active, #vk-shift-r.active{
  background: radial-gradient(180px 80px at 50% 120%, rgba(139,92,246,.25) 0%, rgba(24,35,51,0) 70%), linear-gradient(180deg, #232043, #1b1f35);
  border-color: #3a3e7a; color: #eae8ff;
  box-shadow: 0 0 0 2px rgba(139,92,246,.18) inset, 0 8px 18px rgba(34,12,92,.35);
}

@media (max-width: 768px){
  :root{ --vk-font: 13px; }
  .vk{ left: 8px; right: 8px; width: auto; bottom: calc(var(--bottombar-h, 60px) + var(--statusbar-h, 26px) + 10px); }
  .vk-key{ height: 42px; }
}

@keyframes vkIn{ from{ transform: scale(.98); opacity:.96; } to{ transform: scale(1); opacity:1; } }