:root {
    --kt-bg:#0d1015;
    --kt-panel:#151922;
    --kt-key:#202731;
    --kt-key-border:#344050;
    --kt-text:#edf2fa;
    --kt-muted:#9aa6b7;
    --kt-accent:#62d7a4;
    --kt-gap:6px;
    --kt-row:50px;
}

.kt-app {
    box-sizing:border-box;
    width:100%;
    max-width:1400px;
    margin:30px auto;
    padding:24px;
    border-radius:22px;
    background:var(--kt-bg);
    color:var(--kt-text);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
.kt-app *{box-sizing:border-box}
.kt-toolbar{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.kt-control-group{display:flex;flex-direction:column;gap:7px}
.kt-control-group label{font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--kt-muted);text-transform:uppercase}
.kt-select,.kt-reset{height:44px;border:1px solid #344050;border-radius:10px;font:inherit}
.kt-select{min-width:170px;padding:0 36px 0 13px;background:var(--kt-panel);color:var(--kt-text)}
.kt-reset{margin-left:auto;padding:0 18px;background:var(--kt-accent);border-color:var(--kt-accent);color:#07120d;font-weight:800;cursor:pointer}
.kt-status{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:20px}
.kt-status-card{padding:13px 15px;border:1px solid #344050;border-radius:13px;background:var(--kt-panel);min-width:0}
.kt-status-label{display:block;margin-bottom:5px;color:var(--kt-muted);font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.kt-status-card strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.kt-keyboard-wrap{width:100%;overflow:visible;padding:18px;border:1px solid #29323e;border-radius:18px;background:linear-gradient(145deg,#151a22,#0e1319)}
.kt-keyboard{width:100%;display:block}
.kt-function-grid,
.kt-body-grid{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:var(--kt-gap)}
.kt-function-grid{margin-bottom:14px}
.kt-body-grid{align-items:start}
.kt-main{grid-column:1 / span 15;min-width:0}
.kt-nav{grid-column:17 / span 3;min-width:0}
.kt-body-grid>div:last-child{grid-column:21 / span 4;min-width:0}

.kt-grid-row{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:var(--kt-gap);height:var(--kt-row);margin-bottom:var(--kt-gap)}
.kt-grid-row .kt-key{min-width:0;grid-column:span var(--kt-span)}
.kt-function-grid{grid-template-columns:repeat(24,minmax(0,1fr));}
.kt-function-grid .kt-key{min-width:0;height:38px}

.kt-nav-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--kt-gap);height:var(--kt-row);margin-bottom:var(--kt-gap)}
.kt-nav-row .kt-key,.kt-spacer{min-width:0}
.kt-spacer{display:block}

.kt-numpad-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--kt-gap)}
.kt-numpad-body{grid-template-rows:repeat(4,var(--kt-row));}
.kt-numpad-grid .kt-key{min-width:0}
.kt-key{
    width:100%;height:100%;padding:4px 5px;
    border:1px solid var(--kt-key-border);
    border-bottom-width:3px;border-radius:8px;
    background:linear-gradient(180deg,#27303b,#1d242e);
    color:var(--kt-text);
    font:700 11px/1.1 ui-sans-serif,system-ui,sans-serif;
    display:flex;align-items:center;justify-content:center;text-align:center;
    cursor:pointer;user-select:none;
    transition:transform .07s ease,background .07s ease,border-color .07s ease,box-shadow .07s ease;
}
.kt-key:hover{border-color:#526074;background:linear-gradient(180deg,#2c3541,#222a34)}
.kt-key:focus-visible{outline:2px solid var(--kt-accent);outline-offset:2px}
.kt-key.is-pressed{transform:translateY(2px);border-color:var(--kt-accent);background:var(--kt-accent);color:#07120d;box-shadow:0 0 0 2px rgba(98,215,164,.12),0 4px 15px rgba(98,215,164,.16)}
.kt-note{margin:9px 1px 0;color:var(--kt-muted);font-size:11px;line-height:1.5}

.kt-layout-60 .kt-main{grid-column:1 / span 15}
.kt-layout-65 .kt-main{grid-column:1 / span 15}
.kt-layout-75 .kt-main{grid-column:1 / span 15}
.kt-layout-tkl .kt-main{grid-column:1 / span 15}

@media (max-width:1100px){
    .kt-keyboard-wrap{overflow-x:auto}
    .kt-keyboard{min-width:1050px}
}
@media (max-width:760px){
    .kt-app{padding:15px}
    .kt-status{grid-template-columns:1fr 1fr}
    .kt-reset{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){.kt-key{transition:none}}