/* сторінка /tester — тестер клавіатури (sysfiles/tpl.tester.php) */
.pageBodyFull{margin:0;padding:0}
.pageBodyFull #pageBodyContent{min-height:0}

.kt{--kt-ink:#22303c;--kt-mute:#5f7282;--kt-line:#e3eaf0;--kt-soft:#f4f8fb;--kt-accent:var(--main-blue,#2da0db);
    color:var(--kt-ink);font-family:Roboto,system-ui,sans-serif;line-height:1.55;font-size:15px}
.kt h1{margin:0 0 .35em;font-size:2em;line-height:1.2;font-weight:700;color:var(--kt-ink)}
.kt h2{margin:0 0 .7em;font-size:1.3em;line-height:1.3;font-weight:700;color:var(--kt-ink)}
.kt p{margin:0 0 .8em}
.kt a{color:var(--link-color,#0b99d4)}

.kt-hero{max-width:820px;margin:.25em 0 1.1em}
.kt-lead{font-size:1.05em;color:var(--kt-mute);margin:0}

/* місце під тестер резервується заздалегідь, щоб сторінка не стрибала */
.kt-tester{margin:0 0 .6em}
.kt-skel{aspect-ratio:935/345;border-radius:14px;background:var(--kt-soft);border:1px solid var(--kt-line)}
.kt-note{padding:1em;border-radius:10px;background:#fff1de;color:#b25b00}

.kt-under{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5em 1.5em;margin:0 0 2.2em;font-size:13px;color:var(--kt-mute)}
.kt-legend{display:flex;flex-wrap:wrap;gap:1.2em;margin:0;padding:0;list-style:none}
#pageBodyContent .kt-legend li{display:flex;align-items:center;gap:.45em;margin:0;list-style:none}
.kt-sw{display:inline-block;width:16px;height:16px;border-radius:4px;border:1px solid #c9d8e4;background:#fff}
.kt-sw-down{background:#f28a1e;border-color:#e07a10}
.kt-sw-done{background:#f3faef;border-color:#5aa832;box-shadow:inset 0 0 0 1px #5aa832}
.kt-mobile{display:none;margin:0}

.kt-cols{display:grid;grid-template-columns:1fr 1fr;gap:2.5em;margin:0 0 2.2em}
.kt-sec{min-width:0}

#pageBodyContent .kt-steps{counter-reset:kt;margin:0;padding:0;list-style:none}
#pageBodyContent .kt-steps li{counter-increment:kt;position:relative;list-style:none;margin:0 0 .9em;padding-left:2.4em}
.kt-steps li::before{content:counter(kt);position:absolute;left:0;top:.05em;width:1.7em;height:1.7em;border-radius:50%;
    background:var(--kt-soft);border:1px solid var(--kt-line);color:var(--kt-ink);font-weight:700;font-size:.85em;
    display:flex;align-items:center;justify-content:center}

.kt-sym{margin:0}
.kt-sym dt{font-weight:700;margin:0 0 .2em}
.kt-sym dd{margin:0 0 1em;padding:0 0 1em;border-bottom:1px solid var(--kt-line);color:#44525e}
.kt-sym dd:last-child{border-bottom:0;padding-bottom:0}

/* ненав'язлива пропозиція */
.kt-cta{display:grid;grid-template-columns:1.2fr 1fr;gap:1em 2.5em;align-items:center;margin:0 0 2.2em;padding:1.4em 1.6em;
    border-radius:14px;background:var(--kt-soft);border:1px solid var(--kt-line)}
.kt-cta h2{margin-bottom:.35em}
.kt-cta-text p{margin:0;color:#44525e}
.kt-cta-form{display:flex;gap:.5em;margin:0}
.kt-cta-form input{flex:1;min-width:0;height:42px;padding:0 .9em;border:1px solid #c9d8e4;border-radius:8px;font:inherit;background:#fff;color:var(--kt-ink)}
.kt-cta-form input:focus{outline:0;border-color:var(--kt-accent);box-shadow:0 0 0 3px rgba(45,160,219,.18)}
.kt-cta-form button{height:42px;padding:0 1.2em;border:0;border-radius:8px;background:var(--kt-ink);color:#fff;font:500 14px Roboto,sans-serif;cursor:pointer;white-space:nowrap}
.kt-cta-form button:hover{background:#33444f}
.kt-cta-links{grid-column:1/-1;margin:0;font-size:13px;color:var(--kt-mute)}
.kt-cta-links span{margin:0 .35em}

.kt-faq details{border-bottom:1px solid var(--kt-line);padding:.75em 0}
.kt-faq details:first-of-type{border-top:1px solid var(--kt-line)}
.kt-faq summary{cursor:pointer;font-weight:500;list-style:none;position:relative;padding-right:1.8em}
.kt-faq summary::-webkit-details-marker{display:none}
.kt-faq summary::after{content:'+';position:absolute;right:.2em;top:-.1em;font-size:1.3em;color:var(--kt-mute)}
.kt-faq details[open] summary::after{content:'−'}
.kt-faq details p{margin:.6em 0 .2em;color:#44525e}

@media (max-width:900px){
    .kt-cols,.kt-cta{grid-template-columns:1fr;gap:1.5em}
}
@media (max-width:640px), (pointer:coarse) and (hover:none){
    .kt-mobile{display:block}
}
@media (max-width:640px){
    .kt{font-size:14px}
    .kt h1{font-size:1.6em}
    .kt-cta{padding:1.1em}
    .kt-cta-form{flex-direction:column}
}