/* public/assets/css/hardware/keyboard-test.css */
.kbd-wrapper { --p-bg: #ffffff; --p-border: #e2e8f0; --p-primary: #3b82f6; --p-success: #10b981; --p-success-bg: #d1fae5; --p-text: #0f172a; --p-text-muted: #64748b; --k-bg: #f8fafc; --k-border: #cbd5e1; --k-shadow: #94a3b8; width: 100%; max-width: 1300px; margin: 0 auto; background: var(--p-bg); border-radius: 20px; padding: 24px; border: 1px solid var(--p-border); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05); box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.kbd-wrapper *, .kbd-wrapper *::before, .kbd-wrapper *::after { box-sizing: border-box; }

.kbd-header { text-align: center; margin-bottom: 24px; border-bottom: 1px solid var(--p-border); padding-bottom: 24px; }
.kbd-title { font-size: 1.7rem; font-weight: 800; color: var(--p-text); margin: 0 0 10px 0; }
.kbd-subtitle { font-size: 0.95rem; color: var(--p-text-muted); max-width: 800px; margin: 0 auto; line-height: 1.6; }

/* Dashboard */
.kbd-dashboard { display: flex; gap: 16px; margin-bottom: 24px; background: #f8fafc; border: 1px solid var(--p-border); padding: 20px; border-radius: 16px; align-items: center; flex-wrap: wrap; }
.kbd-stat-box { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--p-border); padding-right: 16px; }
.kbd-stat-box:last-child { border-right: none; padding-right: 0; }
.kbd-stat-label { font-size: 0.85rem; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.kbd-stat-val { font-size: 1.4rem; font-weight: 800; color: #1e293b; font-family: monospace; }
.kbd-stat-val.highlight { color: var(--p-primary); }

.kbd-stat-actions { margin-left: auto; display: flex; gap: 12px; }
.kbd-btn-action { padding: 10px 20px; border-radius: 10px; font-weight: 700; font-size: 1rem; color: #475569; background: #ffffff; border: 2px solid #cbd5e1; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 6px; }
.kbd-btn-action:hover { border-color: var(--p-primary); color: var(--p-primary); box-shadow: 0 4px 10px rgba(59, 130, 246, 0.1); }

/* Keyboard Board Base */
.kbd-board-container { background: #e2e8f0; padding: 30px; border-radius: 16px; box-shadow: inset 0 4px 15px rgba(0,0,0,0.05); overflow-x: auto; }
.kbd-board { min-width: 1050px; display: flex; flex-direction: column; gap: 16px; }

/* 缩放包裹层 (已彻底移除 Absolute 绝对定位相关属性，回归文档流) */
.kbd-scale-wrapper { 
    width: 1050px; 
    transform-origin: center center; 
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
}

/* 原生全屏状态拦截 */
.kbd-wrapper:fullscreen {
    width: 100vw; height: 100vh; max-width: none; border-radius: 0; border: none;
    display: flex; flex-direction: column; justify-content: center;
    overflow: hidden; padding: 3vh 2vw; background: var(--p-bg);
}
.kbd-wrapper:fullscreen .kbd-header { margin-bottom: 2vh; padding-bottom: 2vh; }
.kbd-wrapper:fullscreen .kbd-board-container { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }

/* Indicators (原生流内居中，完美置于小键盘上) */
.kbd-indicators { 
    display: flex; 
    gap: 24px; 
    width: 100%;
    justify-content: center;
    padding-bottom: 8px;
}
.kbd-led-group { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kbd-led-group span { font-size: 0.7rem; font-weight: 700; color: #64748b; text-transform: uppercase; }
.kbd-led { width: 12px; height: 12px; border-radius: 50%; background: #94a3b8; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); transition: 0.2s; border: 1px solid #475569; }
.kbd-led.on { background: #34d399; box-shadow: 0 0 10px #34d399, inset 0 1px 2px rgba(255,255,255,0.8); border-color: #059669; }

/* Layout Blocks */
.kbd-row { display: flex; gap: 6px; }
.kbd-main-layout { display: flex; gap: 20px; }
.kbd-main-block { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.kbd-nav-block { display: flex; flex-direction: column; gap: 6px; width: 170px; }
.kbd-numpad-block { display: flex; flex-direction: column; gap: 6px; width: 228px; }
.kbd-row-numpad-group { display: flex; gap: 6px; }
.kbd-numpad-left { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.kbd-numpad-right { display: flex; flex-direction: column; gap: 6px; width: 52px; }

/* Spacers */
.kbd-spacer { width: 30px; }
.kbd-spacer-half { width: 15px; }

/* Individual Key Styling */
.kbd-key { width: 52px; height: 52px; background: var(--k-bg); border: 1px solid var(--k-border); border-bottom-width: 4px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: #334155; text-align: center; line-height: 1.2; box-shadow: 0 2px 4px rgba(0,0,0,0.05); user-select: none; transition: background-color 0.1s, color 0.1s, transform 0.05s, border-width 0.05s; }

/* Active (Pressed) State */
.kbd-key.pressed { transform: translateY(3px); border-bottom-width: 1px; background: #cbd5e1; box-shadow: none; color: #0f172a; filter: brightness(0.9); }

/* Tested (Working) State */
.kbd-key.tested { background: var(--p-success-bg); border-color: #34d399; color: #065f46; }
.kbd-key.tested.pressed { background: var(--p-success); color: #ffffff; border-color: #059669; }

/* Key Sizes */
.w-backspace { width: 110px; }
.w-tab { width: 80px; }
.w-backslash { width: 82px; }
.w-caps { width: 95px; }
.w-enter { width: 125px; }
.w-lshift { width: 125px; }
.w-rshift { width: 154px; }
.w-ctrl { width: 75px; }
.w-win, .w-alt, .w-menu { width: 68px; }
.w-space { flex: 1; }
.w-num0 { width: 110px; }
.h-plus, .h-enter { height: 110px; }

.kbd-hint-card { background: #fef2f2; border-left: 4px solid #ef4444; padding: 16px; border-radius: 0 10px 10px 0; font-size: 0.9rem; color: #7f1d1d; line-height: 1.6; margin-top: 24px; }

/* Dark Mode */
[data-theme="dark"] .kbd-wrapper { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .kbd-title, [data-theme="dark"] .kbd-stat-val { color: #f8fafc; }
[data-theme="dark"] .kbd-subtitle, [data-theme="dark"] .kbd-stat-label { color: #94a3b8; }
[data-theme="dark"] .kbd-dashboard { background: #0f172a; border-color: #475569; }
[data-theme="dark"] .kbd-stat-box { border-color: #334155; }
[data-theme="dark"] .kbd-btn-action { background: #1e293b; border-color: #475569; color: #cbd5e1; }
[data-theme="dark"] .kbd-btn-action:hover { border-color: var(--p-primary); color: #60a5fa; }
[data-theme="dark"] .kbd-board-container { background: #020617; box-shadow: inset 0 4px 20px rgba(0,0,0,0.5); }
[data-theme="dark"] .kbd-key { --k-bg: #1e293b; --k-border: #475569; color: #cbd5e1; }
[data-theme="dark"] .kbd-key.pressed { background: #334155; color: #f8fafc; }
[data-theme="dark"] .kbd-key.tested { background: rgba(16, 185, 129, 0.2); border-color: #059669; color: #34d399; }
[data-theme="dark"] .kbd-key.tested.pressed { background: var(--p-success); color: #ffffff; }
[data-theme="dark"] .kbd-hint-card { background: rgba(239, 68, 68, 0.1); border-left-color: #ef4444; color: #fca5a5; }
[data-theme="dark"] .kbd-led { background: #334155; border-color: #0f172a; }