/* Extracted from Views/Test/KeyboardEn.cshtml. */
    .trq-ledpanel {
        height: var(--h);
        border-radius: var(--r);
        background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
        border: 1px solid rgba(255,255,255,.10);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    }

    .trq-ledbar {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 10px;
    }

    .trq-leditem {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .trq-leddot {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: rgba(255,255,255,.18);
        border: 1px solid rgba(255,255,255,.22);
        box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
        flex: 0 0 auto;
    }

    .trq-ledlabel {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .4px;
        color: rgba(255,255,255,.60);
        white-space: nowrap;
    }

    .trq-leditem.on .trq-leddot {
        background: #62d26f;
        border-color: rgba(98,210,111,.85);
        box-shadow: 0 0 14px rgba(98,210,111,.35), inset 0 0 0 2px rgba(0,0,0,.18);
    }

    .trq-leditem.on .trq-ledlabel {
        color: rgba(255,255,255,.88);
    }

    @media (max-width: 768px) {
        .trq-ledpanel {
            padding: 0 8px;
        }

        .trq-ledlabel {
            font-size: 9.5px;
        }

        .trq-leddot {
            width: 8px;
            height: 8px;
        }
    }

    .trq-sim {
        --u: 44px;
        --h: 46px;
        --gap: 8px;
        --r: 12px;
        --bg: linear-gradient(180deg, #171717 0%, #171717 100%);
        --zone: rgba(255,255,255,.04);
        --key-bg: linear-gradient(180deg, rgba(23,23,23,1) 0%, rgba(23,23,23,1) 100%);
        --key-bd: #424242;
        --text: #f3f4f8;
        --muted: rgba(255,255,255,.55);
        --block-gap: 18px;
        position: relative;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

        .trq-sim * {
            box-sizing: border-box;
        }

    .trq-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px;
        padding: 16px;
        border-radius: 20px;
        background: rgba(23,23,23,.56);
        color: #fff;
        font-weight: 800;
        font-size: 18px;
        cursor: pointer;
        user-select: none;
        z-index: 3;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,.08);
    }

        .trq-overlay small {
            font-size: 13px;
            font-weight: 600;
            color: rgba(255,255,255,.72);
        }

    .trq-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
    }

        .trq-scroll::-webkit-scrollbar {
            height: 0;
        }

    .trq-board {
        outline: none;
        background: var(--bg);
        border-radius: 20px;
        padding: 16px;
        box-shadow: 0 24px 50px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.08);
        min-width: fit-content;
        width: max-content;
        margin-left: auto;
        margin-right: auto;
    }

        .trq-board.is-blur {
            filter: blur(2px);
            pointer-events: none;
        }

    .trq-grid {
        display: grid;
        grid-template-columns: calc(var(--u)*15 + var(--gap)*14) calc(var(--u)*3 + var(--gap)*2) calc(var(--u)*4 + var(--gap)*3);
        gap: var(--block-gap);
        align-items: start;
    }

    .trq-zone.is-hidden {
        display: none !important;
    }

    .trq-grid.is-mini {
        grid-template-columns: calc(var(--u)*15 + var(--gap)*14);
        width: max-content;
    }

    .trq-grid.is-tkl {
        grid-template-columns: calc(var(--u)*15 + var(--gap)*14) calc(var(--u)*3 + var(--gap)*2);
        width: max-content;
    }

    .trq-grid.is-full {
        grid-template-columns: calc(var(--u)*15 + var(--gap)*14) calc(var(--u)*3 + var(--gap)*2) calc(var(--u)*4 + var(--gap)*3);
        width: max-content;
    }

    .trq-grid.is-compact96 {
        grid-template-columns: calc(var(--u)*15 + var(--gap)*14) calc(var(--u)*4 + var(--gap)*3);
        width: max-content;
    }

    .trq-zone {
        background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 16px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    }

    .trq-rows {
        display: grid;
        gap: var(--gap);
    }

    .trq-rowgrid {
        display: grid;
        grid-template-columns: repeat(15, var(--u));
        gap: var(--gap);
        align-items: center;
    }

    .trq-key {
        width: 100%;
        height: var(--h);
        background: var(--key-bg);
        border: 2px solid var(--key-bd);
        border-radius: var(--r);
        color: var(--text);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        user-select: none;
        line-height: 1.05;
        transition: transform .05s, box-shadow .18s, border-color .18s, background .18s;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    }

        .trq-key .sub {
            font-size: 11px;
            font-weight: 700;
            color: var(--muted);
            margin-top: 3px;
        }

        .trq-key.active {
            transform: translateY(1px);
            border-color: #62d26f;
            box-shadow: inset 0 0 0 2px rgba(98,210,111,.60), 0 0 18px rgba(98,210,111,.18);
        }

        .trq-key.rainbow-glow {
            box-shadow: 0 0 14px rgba(98,210,111,.22), inset 0 0 0 2px rgba(98,210,111,.55);
        }

        .trq-key.sticky {
            border-color: #10a37f;
            box-shadow: inset 0 0 0 2px rgba(16,163,127,.50), 0 0 18px rgba(16,163,127,.12);
        }

        .trq-key.untested {
            border-color: rgba(248,113,113,.75);
            box-shadow: inset 0 0 0 1px rgba(248,113,113,.42);
        }

    .span-2 {
        grid-column: span 2;
    }

    .span-3 {
        grid-column: span 3;
    }

    .span-6 {
        grid-column: span 6;
    }

    .span-7 {
        grid-column: span 7;
    }

    .trq-gap {
        height: var(--h);
        border-radius: var(--r);
        background: transparent;
        pointer-events: none;
    }

    .trq-nav {
        display: grid;
        gap: var(--gap);
        align-content: start;
    }

        .trq-nav .blk {
            display: grid;
            grid-template-columns: repeat(3, var(--u));
            gap: var(--gap);
        }

    .trq-spacer {
        height: var(--h);
    }

    .trq-arrows {
        display: grid;
        grid-template-columns: repeat(3, var(--u));
        grid-template-rows: repeat(2, var(--h));
        gap: var(--gap);
        justify-content: center;
    }

    .trq-empty {
        visibility: hidden;
        pointer-events: none;
        border: none !important;
        background: transparent !important;
    }

    .trq-numpad {
        display: grid;
        grid-template-columns: repeat(4, var(--u));
        grid-template-rows: repeat(6, var(--h));
        gap: var(--gap);
        align-content: start;
        justify-content: end;
    }

    .tall-2 {
        height: calc(var(--h)*2 + var(--gap));
    }

    .np-top {
        grid-column: 1 / span 4;
        grid-row: 1;
    }

    .np-num {
        grid-column: 1;
        grid-row: 2;
    }

    .np-div {
        grid-column: 2;
        grid-row: 2;
    }

    .np-mul {
        grid-column: 3;
        grid-row: 2;
    }

    .np-sub {
        grid-column: 4;
        grid-row: 2;
    }

    .np-7 {
        grid-column: 1;
        grid-row: 3;
    }

    .np-8 {
        grid-column: 2;
        grid-row: 3;
    }

    .np-9 {
        grid-column: 3;
        grid-row: 3;
    }

    .np-add {
        grid-column: 4;
        grid-row: 3 / span 2;
    }

    .np-4 {
        grid-column: 1;
        grid-row: 4;
    }

    .np-5 {
        grid-column: 2;
        grid-row: 4;
    }

    .np-6 {
        grid-column: 3;
        grid-row: 4;
    }

    .np-1 {
        grid-column: 1;
        grid-row: 5;
    }

    .np-2 {
        grid-column: 2;
        grid-row: 5;
    }

    .np-3 {
        grid-column: 3;
        grid-row: 5;
    }

    .np-enter {
        grid-column: 4;
        grid-row: 5 / span 2;
    }

    .np-0 {
        grid-column: 1 / span 2;
        grid-row: 6;
    }

    .np-dot {
        grid-column: 3;
        grid-row: 6;
    }

    .kb-test-controls {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 16px;
    }

    .kb-test-controls__left,
    .kb-test-controls__right {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .kb-premium-box {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 52px;
        padding: 12px 16px;
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
        border: 1px solid rgba(255,255,255,.10);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 24px rgba(0,0,0,.16);
        color: rgba(255,255,255,.92);
    }

        .kb-premium-box i {
            width: 20px;
            text-align: center;
            color: #69d9bd;
        }

    .kb-test-toggle {
        cursor: pointer;
        font-weight: 800;
    }

        .kb-test-toggle input {
            margin: 0;
            transform: scale(1.12);
            cursor: pointer;
        }

    .kb-toggle-copy {
        display: flex;
        flex-direction: column;
        line-height: 1.12;
    }

        .kb-toggle-copy small {
            font-size: 12px;
            font-weight: 600;
            color: rgba(255,255,255,.60);
        }

    .kb-layout-picker {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 800;
    }

        .kb-layout-picker label {
            margin: 0;
            white-space: nowrap;
        }

        .kb-layout-picker select {
            min-width: 120px;
            border-radius: 12px;
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.12);
            color: #fff;
        }

            .kb-layout-picker select option {
                color: #111;
            }

    .kb-test-btn {
        border: none !important;
        border-radius: 999px !important;
        font-weight: 800 !important;
        padding: .7rem 1rem !important;
        color: #fff !important;
        background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06)) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px rgba(0,0,0,.16);
        transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    }

        .kb-test-btn:hover {
            transform: translateY(-1px);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 28px rgba(0,0,0,.20);
        }

        .kb-test-btn.active {
            background: linear-gradient(135deg, rgba(16,163,127,.42), rgba(16, 163, 127, .26)) !important;
        }

        .kb-test-btn.btn-premium-danger {
            background: linear-gradient(135deg, rgba(248,113,113,.38), rgba(239,68,68,.22)) !important;
        }

        .kb-test-btn.btn-premium-copy {
            background: linear-gradient(135deg, rgba(74,222,128,.30), rgba(16, 163, 127, .16)) !important;
        }

        .kb-test-btn.btn-premium-warn {
            background: linear-gradient(135deg, rgba(250,204,21,.30), rgba(245,158,11,.16)) !important;
        }

    .kb-test-helper {
        width: 100%;
        padding: 12px 16px;
        border-radius: 16px;
        background: rgba(255,255,255,.04);
        border: 1px dashed rgba(255,255,255,.10);
        color: rgba(255,255,255,.72);
        font-size: .95rem;
    }

    .trq-panels {
        display: grid;
        grid-template-columns: repeat(3, minmax(240px, 1fr));
        gap: 12px;
        margin-top: 14px;
    }

    .trq-panel {
        background: linear-gradient(180deg, rgba(23,23,23,.92), rgba(23,23,23,.86));
        color: #eaeaec;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 18px;
        padding: 14px 14px;
        min-width: 0;
        box-shadow: 0 16px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
    }

        .trq-panel .ttl {
            font-weight: 900;
            margin-bottom: 8px;
            color: rgba(255,255,255,.62);
            font-size: .9rem;
            letter-spacing: .2px;
        }

        .trq-panel .content {
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
            word-break: break-word;
            font-size: .95rem;
            line-height: 1.45;
        }

            .trq-panel .content.is-success {
                color: #86efac;
            }

            .trq-panel .content.is-warn {
                color: #fde68a;
            }

    @media (max-width: 1200px) {
        .trq-panels {
            grid-template-columns: repeat(2, minmax(240px, 1fr));
        }
    }

    @media (max-width: 768px) {
        .trq-sim {
            --u: 31px;
            --h: 36px;
            --gap: 5px;
            --block-gap: 10px;
        }

        .trq-grid {
            grid-template-columns: calc(var(--u)*15 + var(--gap)*14) calc(var(--u)*3 + var(--gap)*2) calc(var(--u)*4 + var(--gap)*3);
            gap: var(--block-gap);
            width: max-content;
        }

        .trq-zone {
            padding: 8px;
            border-radius: 12px;
        }

        .trq-board {
            padding: 12px;
            border-radius: 14px;
            max-width: none;
            width: max-content;
            margin-left: auto;
            margin-right: auto;
        }

        .trq-key {
            font-size: 11px;
            border-radius: 10px;
            border-width: 2px;
            padding: 0 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

            .trq-key .sub {
                font-size: 9px;
            }

        .trq-nav .blk {
            grid-template-columns: repeat(3, var(--u));
        }

        .kb-test-controls {
            flex-direction: column;
            align-items: stretch;
        }

        .kb-test-controls__left,
        .kb-test-controls__right {
            width: 100%;
        }

        .kb-premium-box {
            width: 100%;
        }

        .kb-layout-picker {
            width: 100%;
            justify-content: space-between;
        }

        .trq-panels {
            grid-template-columns: 1fr;
        }
    }

    .kb-mini-info {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 12px;
    }

    .kb-mini-info__item,
    .kb-step-card,
    .kb-faq-item {
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 16px;
        padding: 14px;
    }

        .kb-mini-info__item strong {
            display: block;
            margin-bottom: 4px;
        }

        .kb-mini-info__item span {
            opacity: .88;
            font-size: .95rem;
        }

    .kb-section-title {
        font-size: 1.35rem;
        font-weight: 800;
        margin-bottom: 12px;
    }

    .kb-list {
        margin: 0;
        padding-left: 18px;
    }

        .kb-list li {
            margin-bottom: 8px;
        }

    .kb-faq {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .kb-faq-item h3,
    .kb-step-card h3 {
        font-size: 1.05rem;
        font-weight: 700;
        margin-bottom: 8px;
    }

    @media (max-width: 768px) {
        .kb-mini-info {
            grid-template-columns: 1fr;
        }
    }


    .kb-app-download-card {
        position: relative;
        overflow: hidden;
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr) auto;
        align-items: center;
        gap: 14px;
        width: 100%;
        padding: 15px 16px;
        border-radius: 22px;
        color: var(--dn-text) !important;
        background: radial-gradient(560px 180px at 8% 0%, rgba(16, 163, 127, .20), transparent 62%), radial-gradient(520px 190px at 92% 70%, rgba(16, 163, 127, .16), transparent 64%), rgba(47, 47, 47, .32);
        border: 1px solid rgba(16, 163, 127, .30);
        box-shadow: 0 18px 44px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.03);
        transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    }

        .kb-app-download-card::before {
            content: "";
            position: absolute;
            right: -54px;
            top: -72px;
            width: 180px;
            height: 180px;
            border-radius: 999px;
            background: rgba(16, 163, 127, .16);
            filter: blur(26px);
            pointer-events: none;
        }

        .kb-app-download-card::after {
            content: "";
            position: absolute;
            right: 18px;
            bottom: 12px;
            width: 78px;
            height: 78px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,.08);
            background: radial-gradient(circle, rgba(16, 163, 127, .20), transparent 62%);
            opacity: .72;
            pointer-events: none;
        }

        .kb-app-download-card:hover {
            transform: translateY(-2px);
            color: #fff !important;
            border-color: rgba(16, 163, 127, .52);
            box-shadow: 0 24px 58px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.04) inset;
        }

    .kb-app-download-icon,
    .kb-app-download-copy,
    .kb-app-download-action {
        position: relative;
        z-index: 1;
    }

    .kb-app-download-icon {
        width: 52px;
        height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 17px;
        color: #fff;
        font-size: 1.25rem;
        background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 50%), linear-gradient(135deg, rgba(16, 163, 127, .90), rgba(16, 163, 127, .72));
        border: 1px solid rgba(255,255,255,.16);
        box-shadow: 0 16px 34px rgba(16, 163, 127, .14);
    }

    .kb-app-download-copy {
        min-width: 0;
    }

        .kb-app-download-copy strong {
            display: block;
            color: var(--dn-white);
            font-size: 1rem;
            font-weight: 950;
            letter-spacing: -.02em;
            margin-bottom: 3px;
        }

        .kb-app-download-copy small {
            display: block;
            color: var(--dn-text-subtle);
            font-size: .9rem;
            line-height: 1.42;
        }

    .kb-app-download-action {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 12px;
        border-radius: 999px;
        color: var(--dn-accent-text);
        background: rgba(16, 163, 127, .11);
        border: 1px solid rgba(16, 163, 127, .25);
        font-size: .88rem;
        font-weight: 900;
        white-space: nowrap;
    }

    .kb-app-download-card:hover .kb-app-download-action {
        background: rgba(16, 163, 127, .17);
        border-color: rgba(16, 163, 127, .40);
    }

    @media (max-width: 640px) {
        .kb-app-download-card {
            grid-template-columns: 48px minmax(0, 1fr);
            padding: 14px;
            border-radius: 20px;
        }

        .kb-app-download-icon {
            width: 48px;
            height: 48px;
            border-radius: 16px;
        }

        .kb-app-download-action {
            grid-column: 1 / -1;
            justify-content: center;
            width: 100%;
        }
    }

    .word-box {
        padding: 6px 10px;
        border-radius: 8px;
        font-weight: 600;
        border: 1px solid #ccc;
    }

    .correct {
        background-color: #d4edda;
        color: #155724;
        border-color: #c3e6cb;
    }

    .partial {
        background-color: #fff3cd;
        color: #856404;
        border-color: #ffeeba;
    }

    .wrong {
        background-color: #f8d7da;
        color: #721c24;
        border-color: #f5c6cb;
    }

    .pending {
        background-color: #f0f0f0;
        color: #777;
        border-color: #ccc;
    }