.kb-tool .kb-panels{margin: 0 -8px}.kb-tool [class*='col-']{padding: 0 8px}.kb-input-panel,.kb-output-panel{height: 100%}.kb-panel-header{display: flex;align-items: center;justify-content: space-between;gap: 12px;flex-wrap: wrap}.kb-panel-header .btn{white-space: nowrap}.kb-body{display: flex;flex-direction: column}.kb-keyboard-wrap{overflow-x: auto;-webkit-overflow-scrolling: touch;padding-bottom: 4px}.kb-keyboard{display: flex;flex-direction: column;gap: 4px;min-width: 620px;background: var(--bg-subtle,#eef0f3);border: 1px solid var(--border-color,#dde1e6);border-radius: 10px;padding: 10px}.kb-row{display: flex;gap: 4px}.kb-key{position: relative;flex: 1 1 0;min-width: 0;height: 42px;display: flex;align-items: center;justify-content: center;background: linear-gradient(180deg,#ffffff,#f0f1f4);border: 1px solid #c9cdd4;border-bottom-width: 2px;border-radius: 6px;color: var(--text-primary,#212529);font-size: 12px;font-weight: 600;cursor: default;user-select: none;box-shadow: 0 1px 1px rgba(0,0,0,0.06);transition: background 0.12s,border-color 0.12s,transform 0.06s}.kb-key.is-pressed{background: #ffc107;border-color: #e0a800;color: #fff}.kb-key.is-pressing{background: #ff9800 !important;border-color: #ed8b00 !important;color: #fff;transform: translateY(1px)}.kb-key-sub{position: absolute;top: 4px;left: 6px;font-size: 9px;font-weight: 400;line-height: 1;opacity: 0.75}.kb-key-main{font-size: 12px;line-height: 1.1}.kb-key-single{font-size: 11.5px}.kb-w-125{flex-grow: 1.25}.kb-w-150{flex-grow: 1.5}.kb-w-175{flex-grow: 1.75}.kb-w-200{flex-grow: 2}.kb-w-225{flex-grow: 2.25}.kb-w-275{flex-grow: 2.75}.kb-w-625{flex-grow: 6.25}.kb-numlock{margin-top: 12px;display: flex;align-items: center;gap: 8px;font-size: 12.5px;color: var(--text-secondary,#5f6b7a)}.kb-numlock i{color: var(--brand-color,#2f6fed)}.kb-empty{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 10px;min-height: 220px;border: 1px dashed var(--border-color,#dde1e6);border-radius: 8px;color: var(--text-secondary,#5f6b7a);text-align: center;padding: 20px}.kb-empty i{font-size: 40px;opacity: 0.45}.kb-empty p{margin: 0;font-size: 13px;max-width: 320px;line-height: 1.6}.kb-empty.hidden{display: none}.kb-result{display: flex;flex-direction: column;gap: 14px}.kb-result.hidden{display: none}.kb-hero{display: flex;align-items: stretch;gap: 14px;background: linear-gradient(135deg,#2563eb,#f97316);border-radius: 10px;color: #fff;padding: 16px 20px}.kb-hero-item{flex: 1;text-align: center}.kb-hero-value{display: block;font-size: 34px;font-weight: 800;line-height: 1.1;letter-spacing: -0.5px;font-family: Consolas,Menlo,monospace}.kb-hero-label{display: block;font-size: 12px;opacity: 0.88;margin-top: 4px}.kb-hero-divider{width: 1px;background: rgba(255,255,255,0.35)}.kb-section{border: 1px solid var(--border-color,#e3e6ea);border-radius: 8px;padding: 12px 14px}.kb-section-title{font-size: 12px;font-weight: 700;text-transform: uppercase;letter-spacing: 0.4px;color: var(--text-secondary,#5f6b7a);margin-bottom: 8px}.kb-formula-row{display: flex;align-items: center;justify-content: space-between;gap: 12px;padding: 5px 0;font-size: 13px}.kb-formula-label{color: var(--text-secondary,#5f6b7a)}.kb-formula-val{font-family: Consolas,Menlo,monospace;font-weight: 600;color: var(--text-primary,#212529);text-align: right;word-break: break-all}.kb-key-list{display: flex;flex-wrap: wrap;gap: 6px;min-height: 26px}.kb-key-list-empty{font-size: 12.5px;color: var(--text-secondary,#5f6b7a);font-style: italic}.kb-key-chip{display: inline-flex;align-items: center;gap: 6px;border: 1px solid var(--border-color,#dde1e6);background: var(--panel-bg,#fff);border-radius: 999px;padding: 3px 10px;font-size: 12px}.kb-key-chip-name{font-weight: 600;color: var(--text-primary,#212529);font-family: Consolas,Menlo,monospace}.kb-key-chip-count{color: var(--brand-color,#2f6fed);font-size: 11px;font-weight: 700}.kb-tip{display: flex;align-items: flex-start;gap: 8px;border: 1px solid rgba(217,119,6,0.4);background: rgba(255,251,235,0.55);border-radius: 8px;padding: 10px 12px;font-size: 12px;color: #92400e;line-height: 1.55}.kb-tip i{margin-top: 2px}.kb-tip p{margin: 0 0 6px 0}.kb-tip p:last-child{margin-bottom: 0}.kb-result .result-toolbar{display: flex;align-items: center;justify-content: space-between;gap: 14px;flex-wrap: wrap;margin-top: 2px}.kb-meta-stack{display: flex;align-items: center;gap: 10px;flex-wrap: wrap;min-width: 0}.kb-output-actions{display: flex;gap: 8px;flex-wrap: wrap}.kb-note{margin-top: 14px;display: flex;align-items: flex-start;gap: 8px;font-size: 12px;color: var(--text-secondary,#5f6b7a);line-height: 1.6;background: var(--bg-subtle,#f8f9fa);border: 1px solid var(--border-color,#e3e6ea);border-radius: 8px;padding: 10px 12px}.kb-note i{margin-top: 2px}.kb-message{display: flex;align-items: flex-start;gap: 8px;font-size: 13px;line-height: 1.5;border-radius: 8px;padding: 10px 12px;margin-top: 16px;transition: opacity 0.25s ease}.kb-message.is-fading{opacity: 0}.kb-message.hidden{display: none}.kb-msg-error{background: rgba(220,53,69,0.08);border: 1px solid rgba(220,53,69,0.35);color: #c0392b}.kb-msg-success{background: rgba(40,167,69,0.08);border: 1px solid rgba(40,167,69,0.35);color: #1e7e34}.kb-msg-info{background: rgba(47,111,237,0.08);border: 1px solid rgba(47,111,237,0.35);color: #2f6fed}[data-theme='dark'] .kb-msg-success{background: rgba(40,167,69,0.14);color: #7ddc95}[data-theme='dark'] .kb-msg-error{background: rgba(220,53,69,0.14);color: #f19aa0}[data-theme='dark'] .kb-msg-info{background: rgba(47,111,237,0.14);color: #9dbcf7}@media (max-width: 991px){.kb-panels [class*='col-']{margin-bottom: 16px}}@media (max-width: 575px){.kb-hero{padding: 14px 12px;gap: 8px}.kb-hero-value{font-size: 26px}.kb-result .result-toolbar{flex-direction: column;align-items: stretch}.kb-output-actions .btn{flex: 1}}[data-theme='dark'] .kb-section{background: var(--panel-bg,#1e2430)}[data-theme='dark'] .kb-keyboard{background: rgba(255,255,255,0.05);border-color: rgba(255,255,255,0.12)}[data-theme='dark'] .kb-key{background: linear-gradient(180deg,#2a3140,#232936);border-color: #3a4252;color: #e8ecf2}[data-theme='dark'] .kb-tip{background: rgba(180,83,9,0.12);border-color: rgba(217,119,6,0.45);color: #fbbf77}[data-theme='dark'] .kb-key-chip{background: var(--panel-bg,#1e2430)}