.kb-wrap { display:flex; flex-direction:column; gap:0.75rem; }
.kb-textarea {
    display:block; width:100%; padding:12px 16px; border:1.5px solid var(--border);
    border-radius:var(--radius-sm); background:var(--bg-glass); color:var(--text);
    font-family:var(--font); font-size:1rem; transition:border-color 0.15s,box-shadow 0.15s;
    resize:vertical; line-height:1.55; box-sizing:border-box; min-height:100px; outline:none;
}
.kb-textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
.kb-textarea[dir="rtl"] { text-align:right; }
.kb-lang-select { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:0.5rem; }
.kb-lang-btn {
    padding:6px 12px; font-size:0.72rem; font-weight:600; border:2px solid var(--border);
    border-radius:50px; background:var(--bg); color:var(--text); cursor:pointer;
    transition:all 0.15s; font-family:var(--font); display:flex; align-items:center; gap:4px;
}
.kb-lang-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }
.kb-lang-btn.active { border-color:var(--accent); background:var(--accent-light); color:var(--accent); box-shadow:0 0 0 2px var(--accent-light); }
.kb-keyboard {
    display:flex; flex-direction:column; gap:4px; background:var(--bg-card);
    border:1px solid var(--border-glass); border-radius:var(--radius-sm); padding:10px;
    user-select:none; -webkit-user-select:none; touch-action:manipulation;
}
.kb-row { display:flex; gap:4px; justify-content:center; flex-wrap:nowrap; }
.kb-key {
    flex:1 1 0; min-width:24px; height:48px; padding:0 2px; border:1.5px solid var(--border);
    border-radius:6px; background:var(--bg-glass); color:var(--text); font-family:var(--font);
    font-size:0.85rem; font-weight:600; cursor:pointer; transition:all 0.08s;
    display:flex; align-items:center; justify-content:center; text-align:center;
    position:relative; outline:none;
}
.kb-key:hover { background:var(--accent-light); border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }
.kb-key:active, .kb-key.pressed { background:var(--accent); color:#fff; border-color:var(--accent); transform:scale(0.95); box-shadow:inset 0 2px 4px rgba(0,0,0,0.15); }
.kb-key--wide { flex:1.3 1 0; }
.kb-key--xwide { flex:1.6 1 0; }
.kb-key--space { flex:4 1 0; }
.kb-key--special { background:var(--border); font-size:0.75rem; }
.kb-key--accent { background:var(--accent); color:#fff; border-color:var(--accent); }
.kb-key--accent:hover { background:var(--accent); opacity:0.85; color:#fff; }
.kb-key--accent:active, .kb-key--accent.pressed { opacity:0.75; }
.kb-shift-indicator { text-align:center; font-size:0.65rem; color:var(--text-tertiary); min-height:1.2em; margin-bottom:2px; }
.kb-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.kb-stats { display:flex; gap:1rem; flex-wrap:wrap; font-size:0.75rem; color:var(--text-tertiary); }
.kb-stats span { background:var(--bg-glass); border:1px solid var(--border-glass); border-radius:20px; padding:4px 12px; }
.kb-actions { display:flex; gap:0.5rem; flex-wrap:wrap; }
.kb-action-btn {
    padding:0.5rem 1rem; border:1.5px solid var(--border); border-radius:50px;
    background:var(--bg-glass); color:var(--text); font-family:var(--font); font-size:0.78rem;
    font-weight:500; cursor:pointer; transition:all 0.15s; display:inline-flex;
    align-items:center; gap:0.35rem;
}
.kb-action-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); transform:translateY(-1px); }
@media (max-width:600px) {
    .kb-key { min-width:22px; height:36px; font-size:0.7rem; padding:0 2px; }
    .kb-key--wide { min-width:36px; }
    .kb-key--xwide { min-width:44px; }
    .kb-key--space { max-width:180px; }
    .kb-keyboard { padding:6px; gap:3px; }
    .kb-row { gap:2px; }
}
@media (max-width:380px) {
    .kb-key { min-width:18px; height:32px; font-size:0.62rem; padding:0 1px; }
    .kb-key--wide { min-width:30px; }
    .kb-key--xwide { min-width:36px; }
    .kb-keyboard { padding:4px; }
}