@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');

.keytest-page .main-content {
    padding: 20px 10px !important;
    margin-top: 0 !important;
    min-height: 100vh;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}
.kt-wrap {
    width: 95vw;
    max-width: 1220px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: 'Roboto Mono', monospace;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}


:root,[data-theme="dark"] {
    --u: 48px; --gap: 5px;
    --kt-accent:#ffb5a7;--kt-accent-dim:rgba(255,181,167,.25);
    --kt-key-bg:rgba(30,25,40,.55);--kt-key-text:#ffb5a7;
    --kt-key-border:rgba(255,181,167,.35);
    --kt-key-hover:rgba(255,181,167,.12);
    --kt-active-bg:#ffb5a7;--kt-active-text:#1a1525;
    --kt-badge:#e63946;
    --kt-chip-bg:rgba(255,181,167,.15);--kt-chip-text:#ffd5cc;
    --kt-bar-bg:rgba(20,15,30,.7);--kt-bar-border:rgba(255,181,167,.2);
    --kt-sub:rgba(255,181,167,.45);
}

[data-theme="light"] {
    --kt-accent:#A47864;--kt-accent-dim:rgba(164,120,100,.2);
    --kt-key-bg:rgba(255,255,255,.6);--kt-key-text:#A47864;
    --kt-key-border:rgba(164,120,100,.4);
    --kt-key-hover:rgba(164,120,100,.08);
    --kt-active-bg:#A47864;--kt-active-text:#fff;
    --kt-badge:#c0392b;
    --kt-chip-bg:rgba(164,120,100,.12);--kt-chip-text:#5a3f30;
    --kt-bar-bg:rgba(255,252,248,.75);--kt-bar-border:rgba(164,120,100,.25);
    --kt-sub:rgba(164,120,100,.5);
}


.kt-bar {
    width: 1220px !important;
    min-width: 1220px !important;
    max-width: none !important;
    flex-shrink: 0 !important;
    background:var(--kt-bar-bg);border:1px solid var(--kt-bar-border);border-radius:12px;
    padding:8px 16px;display:flex;align-items:center;gap:10px;min-height:46px;
    backdrop-filter:blur(14px);overflow:hidden;
    box-sizing:border-box;
    transform-origin: top center;
}
.kt-chips {display:flex;gap:5px;flex:1;overflow:hidden;align-items:center;flex-wrap:nowrap;}
.kt-chip {
    background:var(--kt-chip-bg);color:var(--kt-chip-text);border-radius:7px;padding:3px 9px;
    font-size:.72rem;white-space:nowrap;flex-shrink:0;animation:chipIn .15s ease;
    border:1px solid var(--kt-accent-dim);
}
.kt-chip:first-child{background:var(--kt-accent);color:#fff;font-weight:600;border-color:var(--kt-accent);}
@keyframes chipIn{from{transform:translateX(-10px);opacity:0}to{transform:translateX(0);opacity:1}}
.kt-hint{color:var(--kt-sub);font-size:.72rem;font-style:italic;}
.kt-right{display:flex;gap:16px;align-items:center;margin-left:auto;flex-shrink:0;}
.kt-cnt{font-size:.9rem;font-weight:700;color:var(--kt-accent);white-space:nowrap;opacity:.8;}
.kt-cnt b{opacity:1;}
.kt-lat{font-size:.75rem;color:var(--kt-accent);font-weight:600;white-space:nowrap;opacity:.85;}
.kt-lat span{font-size:.9rem;font-weight:700;}


.kb {
    width: 1220px !important;
    min-width: 1220px !important;
    max-width: none !important;
    flex-shrink: 0 !important;
    background: var(--kt-bar-bg);
    border: 3px solid var(--kt-bar-border);
    border-radius: 18px;
    padding: 24px 24px 28px 24px;
    user-select: none;
    backdrop-filter: blur(14px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22), 
                inset 0 1px 3px rgba(255, 255, 255, 0.04);
    box-sizing: border-box;
    outline: 1px solid var(--kt-accent-dim);
    outline-offset: 3px;
    transform-origin: top center;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

[data-theme="light"] .kb {
    box-shadow: 0 16px 40px rgba(164, 120, 100, 0.08), 
                inset 0 1px 3px rgba(255, 255, 255, 0.5);
}


.k {
    position:relative;
    background:var(--kt-key-bg);
    border:1.5px solid var(--kt-key-border);
    border-radius:8px;
    color:var(--kt-key-text);
    font-family:'Roboto Mono',monospace;font-size:.8rem;font-weight:400;
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    height:48px;width:48px;flex-shrink:0;cursor:crosshair;
    transition:background .06s,transform .06s,color .06s,border-color .06s,box-shadow .06s;
    line-height:1.2;box-sizing:border-box;padding:2px;
    backdrop-filter:blur(8px);
    box-shadow:0 2px 4px rgba(0,0,0,.15);
}
.k:hover{background:var(--kt-key-hover);box-shadow:0 0 8px var(--kt-accent-dim);}
.k.lit{
    background:var(--kt-active-bg)!important;border-color:var(--kt-active-bg)!important;
    color:var(--kt-active-text)!important;transform:scale(.95);
    box-shadow:0 0 12px var(--kt-accent)!important;
}
.k.used{border-color:var(--kt-accent);box-shadow:0 0 4px var(--kt-accent-dim);}
.k .ks{font-size:.6rem;color:var(--kt-sub);line-height:1;margin-bottom:2px;}
.k-os{opacity:.35;cursor:not-allowed!important;border-style:dashed!important;}
.k-os::after{content:'OS';position:absolute;bottom:2px;right:3px;font-size:.45rem;color:var(--kt-sub);font-weight:700;font-family:sans-serif;}


.kbdg{
    display:none;position:absolute;top:2px;right:3px;background:var(--kt-badge);color:white;
    border-radius:6px;font-size:.5rem;font-weight:700;padding:0 3px;min-width:14px;height:14px;
    line-height:14px;text-align:center;font-family:sans-serif;pointer-events:none;
}


.u125{width:calc(var(--u) * 1.25 + var(--gap) * 0.25) !important;}
.u15{width:calc(var(--u) * 1.5 + var(--gap) * 0.5) !important;}
.u175{width:calc(var(--u) * 1.75 + var(--gap) * 0.75) !important;}
.u2{width:calc(var(--u) * 2 + var(--gap) * 1) !important;}
.u225{width:calc(var(--u) * 2.25 + var(--gap) * 1.25) !important;}
.u275{width:calc(var(--u) * 2.75 + var(--gap) * 1.75) !important;}
.u625{width:calc(var(--u) * 6.25 + var(--gap) * 5.25) !important;}
.h2{height:calc(var(--u) * 2 + var(--gap) * 1) !important;}


.kb-row{display:flex;gap:var(--gap);width:100%;}
.kb-frow{display:flex;gap:var(--gap);align-items:flex-start;margin-bottom:12px;}


.k-last { flex: 1 !important; max-width: none !important; }


.kb-body{display:flex;gap:16px;align-items:flex-start;}
.kb-alpha{display:flex;flex-direction:column;gap:var(--gap);width:calc(var(--u) * 15 + var(--gap) * 14);}
.kb-nav{display:flex;flex-direction:column;gap:var(--gap);}
.nav-empty{height:var(--u);}
.nav-up{display:flex;gap:var(--gap);justify-content:center;}


.kb-num{
    display:grid;
    grid-template-columns: repeat(4, var(--u));
    grid-auto-rows: var(--u);
    gap: var(--gap);
}
.kb-num .k { width: 100% !important; height: 100% !important; }


.mouse-row{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 0 4px;border-top:1px solid var(--kt-bar-border);margin-top:12px;flex-wrap:wrap;width:0;min-width:100%;box-sizing:border-box;}
.mouse-lbl{font-size:.85rem;font-weight:400;color:var(--kt-sub);width:100%;text-align:center;margin-bottom:4px;}
.mk{
    position:relative;background:var(--kt-key-bg);border:1.5px solid var(--kt-key-border);
    border-radius:8px;color:var(--kt-key-text);font-family:'Roboto Mono',monospace;font-size:.8rem;
    font-weight:400;padding:8px 20px;cursor:crosshair;min-width:80px;text-align:center;
    transition:background .08s,transform .08s,color .08s;backdrop-filter:blur(8px);
    box-shadow:0 2px 4px rgba(0,0,0,.15);
}
.mk:hover{background:var(--kt-key-hover);}
.mk.lit{background:var(--kt-active-bg)!important;border-color:var(--kt-active-bg)!important;color:var(--kt-active-text)!important;transform:scale(.95);box-shadow:0 0 12px var(--kt-accent)!important;}
.mk .kbdg{position:absolute;top:2px;right:3px;}


.kt-back{
    position:fixed;top:18px;left:18px;z-index:200;font-family:'Roboto Mono',monospace;
    font-size:.75rem;padding:6px 14px;border-radius:8px;background:var(--kt-key-bg);
    border:1px solid var(--kt-key-border);color:var(--kt-accent);cursor:pointer;text-decoration:none;
    transition:background .15s;backdrop-filter:blur(8px);
}
.kt-back:hover{background:var(--kt-key-hover);}


@media (max-width: 1250px) {
    .kt-back {
        position: static !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 10px auto 20px auto !important;
        width: fit-content;
        z-index: auto;
    }
    .keytest-page .main-content {
        padding: 40px 10px !important;
    }
}


@media (max-width: 991px) {
    .kt-back {
        display: none !important;
    }

    .keytest-page .main-content {
        padding: 0 !important;
    }

    .keytest-page .mobile-top-bar {
        transform: translateY(0) !important;
    }
}