/* تست کیبورد — فقط استایل‌های این ابزار (رنگ‌ها از متغیرهای قالب، تم روشن و تیره) */
.t-keyboard{display:flex;flex-direction:column;gap:1rem}
.t-keyboard .w-seg button{min-block-size:2.75rem}

/* محدوده‌ی تست */
.t-keyboard-area{position:relative;padding:.75rem;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);cursor:pointer;outline:0;
    transition:border-color var(--dur-1,.15s) ease,box-shadow var(--dur-1,.15s) ease}
.t-keyboard-area:focus,.t-keyboard-area.is-active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-050)}
.t-keyboard-status{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .6rem;margin-block-end:.65rem;font-size:var(--fs-sm);font-weight:700;color:var(--ink-2)}
.t-keyboard-dot{flex:none;inline-size:.65rem;block-size:.65rem;border-radius:50%;background:var(--muted)}
.t-keyboard-area.is-active .t-keyboard-dot{background:var(--ok);box-shadow:0 0 0 4px color-mix(in oklab,var(--ok) 25%,transparent)}
.t-keyboard-exit{margin-inline-start:auto;font-weight:500;color:var(--muted);font-size:var(--fs-xs)}
.t-keyboard-area:not(.is-active) .t-keyboard-exit{display:none}

/* نقشه‌ی کلیدها: شبکه‌ای با ستون‌های ربع‌واحد و ردیف‌های نیم‌واحد؛ --u را app.js از عرض محدوده حساب می‌کند */
.t-keyboard-board{--u:40px;display:grid;grid-template-columns:repeat(var(--cols),calc(var(--u) / 4));grid-template-rows:repeat(var(--rows),calc(var(--u) / 2));
    justify-content:center;margin-inline:auto;user-select:none;-webkit-user-select:none}
.t-keyboard-key{position:relative;margin:calc(var(--u) * .045);border:1px solid var(--line);border-block-end-width:calc(var(--u) * .07 + 1px);border-radius:calc(var(--u) * .14);
    background:var(--surface);color:var(--ink-2);font-size:max(7px,calc(var(--u) * .24));font-weight:700;line-height:1.1;overflow:hidden;
    transition:background-color .35s,border-color .35s,color .35s}
.t-keyboard-en{position:absolute;inset-block-start:.3em;left:.4em;white-space:nowrap;font-family:Consolas,'Segoe UI',system-ui,sans-serif}
.t-keyboard-lo{position:absolute;bottom:.12em;right:.32em;font-size:1.4em;line-height:1.2;color:var(--accent-text);white-space:nowrap}
.t-keyboard-key.is-solo .t-keyboard-en{inset:0;display:grid;place-items:center;padding-inline:.2em}
.t-keyboard-key.is-half{font-size:max(6px,calc(var(--u) * .2))}
.t-keyboard-board.is-tiny .t-keyboard-en{inset-block-start:.12em;left:.2em}
.t-keyboard-board.is-tiny .t-keyboard-lo{bottom:0;right:.18em;font-size:1.3em}
.t-keyboard-board.is-tiny .t-keyboard-key.is-solo .t-keyboard-en{inset:0;left:0}
.t-keyboard-key.is-tested{background:var(--accent-050);border-color:var(--accent-300);color:var(--accent-text)}
.t-keyboard-key.is-down{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:translateY(1px);transition:none}
.t-keyboard-key.is-down .t-keyboard-lo{color:inherit}
.t-keyboard-key.is-os{border-style:dashed}
.t-keyboard-key.is-os:not(.is-tested):not(.is-down){opacity:.65}
.t-keyboard-key.is-warn{box-shadow:inset 0 0 0 2px var(--err)}
.t-keyboard-key.is-flash{animation:t-keyboard-flash .7s ease-out}
@keyframes t-keyboard-flash{from{background:var(--accent);color:var(--accent-ink)}}

/* پیشرفت و پنل‌ها */
.t-keyboard-prog{display:flex;flex-direction:column;gap:.35rem}
.t-keyboard-grid{--w-col:17rem;align-items:start}
.t-keyboard-last{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.t-keyboard-big{min-inline-size:3.6rem;block-size:3.6rem;padding-inline:.8rem;font-size:1.3rem;color:var(--accent-text);border-color:var(--accent-300)}
.t-keyboard-dl{display:grid;grid-template-columns:auto auto;gap:.1rem .8rem;margin:0;font-size:var(--fs-sm)}
.t-keyboard-dl dt{color:var(--muted);font-weight:600;font-family:Consolas,'Courier New',monospace}
.t-keyboard-dl dd{margin:0;font-weight:700;word-break:break-all}
.t-keyboard-lang{margin:.6rem 0 0}
.t-keyboard-chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-block-start:.5rem}
.t-keyboard-chips:empty{display:none}
.t-keyboard-chips .w-kbd{min-inline-size:2rem;block-size:2rem;font-size:.75rem}
.t-keyboard-ro{display:flex;gap:1.6rem;margin-block-start:.4rem}
.t-keyboard-ro div{display:flex;flex-direction:column}
.t-keyboard-ro b{font-size:2rem;font-weight:900;line-height:1.2;color:var(--accent-text);font-variant-numeric:tabular-nums}
.t-keyboard-verdict{margin:.5rem 0 0;font-size:var(--fs-sm);font-weight:700;color:var(--ink-2)}
.t-keyboard-verdict:empty{display:none}
.t-keyboard-verdict.is-ok{color:var(--ok)}
.t-keyboard-warns{display:flex;flex-direction:column;gap:.5rem}
.t-keyboard-extra{margin-block-start:.7rem}
.t-keyboard-extra p{margin:0}
.t-keyboard-type{display:flex;flex-direction:column;gap:.5rem}
.t-keyboard-type .w-title{margin:0}
.t-keyboard-type .w-input{box-sizing:border-box;inline-size:100%;font-size:1.1rem;min-block-size:3rem}
.t-keyboard-tl{margin:0;font-weight:700}
.t-keyboard-type .w-mono{margin:0}
.t-keyboard-notes .w-note{font-size:var(--fs-xs)}

@media (prefers-reduced-motion:reduce){
    .t-keyboard-key,.t-keyboard-area{transition:none}
    .t-keyboard-key.is-flash{animation:none}
}