/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #1a1a1a;
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0;
}

/* 头部导航样式 */
.header-nav {
    background-color: #2a2a2a;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto;
    height: 60px;
}

.nav-brand h1 {
    color: #fbfbfc;
    font-size: 24px;
    font-weight: 600;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-brand .logo {
    height: 30px;
    max-width: auto;
    vertical-align: middle;
}

.nav-brand .brand-text {
    color: #fbfbfc;
    font-size: 20px;
    font-weight: 600;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 5px;
}

.nav-item {
    margin: 0;
}

.nav-link {
    display: inline-block;
    color: #e0e0e0;
    text-decoration: none;
    padding: 5px 10px;
    margin: 0 5px;
    transition: all 0.3s ease;
    font-size: 16px;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #007acc;
    transition: width 0.3s ease;
}

.nav-link:hover {
    color: #007acc;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link.active {
    color: #007acc;
}

.nav-link.active::after {
    width: 100%;
}

.container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    margin: 0 auto;
}

/* 内容部分样式 */
.content-section {
    background-color: #2a2a2a;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: none; /* 默认隐藏所有内容部分 */
}

/* 显示键盘测试部分 */
#test {
    display: block;
}

.content-section h2 {
    color: #007acc;
    margin-bottom: 20px;
    font-size: 24px;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}

.content-section h3 {
    color: #e0e0e0;
    margin: 15px 0 10px;
    font-size: 18px;
}

.content-section h4 {
    color: #e0e0e0;
    margin: 10px 0 5px;
    font-size: 16px;
}

.content-section p {
    margin-bottom: 10px;
    line-height: 1.5;
}

.guide-content, .about-content, .help-content {
    color: #e0e0e0;
}

.faq-item {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #333;
    border-radius: 4px;
}

/* 平滑滚动 */
html {
    scroll-behavior: smooth;
}

/* 键盘容器样式 */
.keyboard-container {
    background-color: #1e1e1e;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* 键盘布局容器 - 作为所有按键的相对定位基准 */
.keyboard-layout {
    position: relative;
    width: 100%;
    height: 400px; /* 固定高度以便使用相对坐标 */
    box-sizing: border-box;
    overflow: visible;
    margin-left: -20px; /* 向左移动5px */
}

/* 按键基本样式 - 1U = 19.05mm 作为基准单位 */
.key {
    background-color: #3d3d3d;
    border: 1px solid #555;
    border-radius: 4px;
    color: #e0e0e0;
    font-size: 14px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.1s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    user-select: none;
}

/* 按键按下状态 */
.key.active {
    background-color: #007acc;
    color: #fff;
    border-color: #005a9e;
    box-shadow: 0 0 10px rgba(0, 122, 204, 0.8), inset 0 1px 2px rgba(0, 0, 0, 0.3);
    transform: translateY(1px);
}

/* 功能键样式 */
.function-key {
    background-color: #2a2a2a;
    font-size: 12px;
}

/* 数字小键盘按键样式 */
.numpad-key {
    background-color: #3d3d3d;
    border: 1px solid #555;
    border-radius: 4px;
    color: #e0e0e0;
    font-size: 14px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.1s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    user-select: none;
    z-index: 10;
}

/* 数字小键盘按键按下状态 */
.numpad-key.active {
    background-color: #007acc;
    color: #fff;
    border-color: #005a9e;
    box-shadow: 0 0 10px rgba(0, 122, 204, 0.8), inset 0 1px 2px rgba(0, 0, 0, 0.3);
    transform: translateY(1px);
}

/* 数字小键盘容器 */
.numpad-container {
    position: absolute;
    left: 85%; /* 根据规范 [0.83, 0.22, 1.0, 1.0] */
    top: 22%;
    width: 17%;
    height: 78%;
    background-color: #1e1e1e; /* 与键盘容器保持一致 */
    padding: 0; /* 去掉padding，避免影响按键定位 */
    margin: 0; /* 去掉margin */
    border-radius: 8px;

    box-sizing: border-box;
    z-index: 5;
    overflow: visible;
}

/* ==================== 位置坐标样式 ==================== */

/* 功能键区 - Esc [0.01, 0.02, 0.06, 0.2] 1U×1U */
[data-key="Escape"] {
    left: 1%;
    top: 2%;
    width: 5%;
    height: 13%;
}

/* 功能键区 - F1-F4 [0.1, 0.02, 0.27, 0.2] 各1U×1U */
[data-key="F1"] {
    left: 10%;
    top: 2%;
    width: 4.25%;
    height: 13%;
}
[data-key="F2"] {
    left: 14.5%;
    top: 2%;
    width: 4.25%;
    height: 13%;
}
[data-key="F3"] {
    left: 19%;
    top: 2%;
    width: 4.25%;
    height: 13%;
}
[data-key="F4"] {
    left: 23.5%;
    top: 2%;
    width: 4.25%;
    height: 13%;
}

/* 功能键区 - F5-F8 [0.29, 0.02, 0.46, 0.2] 各1U×1U */
[data-key="F5"] {
    left: 29%;
    top: 2%;
    width: 4.25%;
    height: 13%;
}
[data-key="F6"] {
    left: 33.5%;
    top: 2%;
    width: 4.25%;
    height: 13%;
}
[data-key="F7"] {
    left: 38%;
    top: 2%;
    width: 4.25%;
    height: 13%;
}
[data-key="F8"] {
    left: 42.5%;
    top: 2%;
    width: 4.25%;
    height: 13%;
}

/* 功能键区 - F9-F12 [0.49, 0.02, 0.66, 0.2] 各1U×1U */
[data-key="F9"] {
    left: 50.5%;
    top: 2%;
    width: 4.25%;
    height: 13%;
}
[data-key="F10"] {
    left: 55%;
    top: 2%;
    width: 4.25%;
    height: 13%;
}
[data-key="F11"] {
    left: 59.5%;
    top: 2%;
    width: 4.25%;
    height: 13%;
}
[data-key="F12"] {
    left: 64%;
    top: 2%;
    width: 4.25%;
    height: 13%;
}

/* 编辑键区 - PRTSC, LOCK, PAUSE [0.68, 0.02, 0.81, 0.2] 各1U×1U */
[data-key="PrintScreen"] {
    left: 70%;
    top: 2%;
    width: 4.33%;
    height: 13%;
}
[data-key="ScrollLock"] {
    left: 74.7%;
    top: 2%;
    width: 4.33%;
    height: 13%;
}
[data-key="Pause"] {
    left: 79.4%;
    top: 2%;
    width: 4.33%;
    height: 13%;
}

/* 主键盘区 - 数字符号行 [0.01, 0.22, 0.66, 0.35] 各1U×1U（Backspace为2U×1U） */
[data-key="Backquote"] {
    left: 1%;
    top: 22%;
    width: 4.25%;
    height: 13%;
}
[data-key="Digit1"] {
    left: 5.5%;
    top: 22%;
    width: 4.25%;
    height: 13%;
}
[data-key="Digit2"] {
    left: 10%;
    top: 22%;
    width: 4.25%;
    height: 13%;
}
[data-key="Digit3"] {
    left: 14.5%;
    top: 22%;
    width: 4.25%;
    height: 13%;
}
[data-key="Digit4"] {
    left: 19%;
    top: 22%;
    width: 4.25%;
    height: 13%;
}
[data-key="Digit5"] {
    left: 23.5%;
    top: 22%;
    width: 4.25%;
    height: 13%;
}
[data-key="Digit6"] {
    left: 28%;
    top: 22%;
    width: 4.25%;
    height: 13%;
}
[data-key="Digit7"] {
    left: 32.5%;
    top: 22%;
    width: 4.25%;
    height: 13%;
}
[data-key="Digit8"] {
    left: 37%;
    top: 22%;
    width: 4.25%;
    height: 13%;
}
[data-key="Digit9"] {
    left: 41.5%;
    top: 22%;
    width: 4.25%;
    height: 13%;
}
[data-key="Digit0"] {
    left: 46%;
    top: 22%;
    width: 4.25%;
    height: 13%;
}
[data-key="Minus"] {
    left: 50.5%;
    top: 22%;
    width: 4.25%;
    height: 13%;
}
[data-key="Equal"] {
    left: 55%;
    top: 22%;
    width: 4.25%;
    height: 13%;
}
[data-key="Backspace"] {
    left: 59.5%;
    top: 22%;
    width: 8.5%; /* 2U宽度 */
    height: 13%;
}

/* 编辑键区 - INS, HOME, PGUP [0.68, 0.22, 0.81, 0.35] 各1U×1U */
[data-key="Insert"] {
    left: 70%;
    top: 22%;
    width: 4.33%;
    height: 13%;
}
[data-key="Home"] {
    left: 74.7%;
    top: 22%;
    width: 4.33%;
    height: 13%;
}
[data-key="PageUp"] {
    left: 79.4%;
    top: 22%;
    width: 4.33%;
    height: 13%;
}

/* 主键盘区 - Tab行 [0.01, 0.37, 0.66, 0.5] Tab为1.5U×1U，其余1U×1U */
[data-key="Tab"] {
    left: 1%;
    top: 37%;
    width: 6.38%; /* 1.5U宽度 */
    height: 13%;
}
[data-key="KeyQ"] {
    left: 7.5%;
    top: 37%;
    width: 4.25%;
    height: 13%;
}
[data-key="KeyW"] {
    left: 12%;
    top: 37%;
    width: 4.25%;
    height: 13%;
}
[data-key="KeyE"] {
    left: 16.5%;
    top: 37%;
    width: 4.25%;
    height: 13%;
}
[data-key="KeyR"] {
    left: 21%;
    top: 37%;
    width: 4.25%;
    height: 13%;
}
[data-key="KeyT"] {
    left: 25.5%;
    top: 37%;
    width: 4.25%;
    height: 13%;
}
[data-key="KeyY"] {
    left: 30%;
    top: 37%;
    width: 4.25%;
    height: 13%;
}
[data-key="KeyU"] {
    left: 34.5%;
    top: 37%;
    width: 4.25%;
    height: 13%;
}
[data-key="KeyI"] {
    left: 39%;
    top: 37%;
    width: 4.25%;
    height: 13%;
}
[data-key="KeyO"] {
    left: 43.5%;
    top: 37%;
    width: 4.25%;
    height: 13%;
}
[data-key="KeyP"] {
    left: 48%;
    top: 37%;
    width: 4.25%;
    height: 13%;
}
[data-key="BracketLeft"] {
    left: 52.5%;
    top: 37%;
    width: 4.25%;
    height: 13%;
}
[data-key="BracketRight"] {
    left: 57%;
    top: 37%;
    width: 4.25%;
    height: 13%;
}
[data-key="Backslash"] {
    left: 61.5%;
    top: 37%;
    width: 6.35%;
    height: 13%;
}

/* 编辑键区 - DEL, END, PGDN [0.68, 0.37, 0.81, 0.5] 各1U×1U */
[data-key="Delete"] {
    left: 70%;
    top: 37%;
    width: 4.33%;
    height: 13%;
}
[data-key="End"] {
    left: 74.7%;
    top: 37%;
    width: 4.33%;
    height: 13%;
}
[data-key="PageDown"] {
    left: 79.4%;
    top: 37%;
    width: 4.33%;
    height: 13%;
}

/* 主键盘区 - Caps Lock行 [0.01, 0.52, 0.66, 0.67] Caps Lock为1.75U×1U，Enter为2.25U×1U，其余1U×1U */
[data-key="CapsLock"] {
    left: 1%;
    top: 52%;
    width: 7.44%; /* 1.75U宽度 */
    height: 13%;
}
[data-key="KeyA"] {
    left: 8.5%;
    top: 52%;
    width: 4.25%;
    height: 13%;
}
[data-key="KeyS"] {
    left: 13%;
    top: 52%;
    width: 4.25%;
    height: 13%;
}
[data-key="KeyD"] {
    left: 17.5%;
    top: 52%;
    width: 4.25%;
    height: 13%;
}
[data-key="KeyF"] {
    left: 22%;
    top: 52%;
    width: 4.25%;
    height: 13%;
}
[data-key="KeyG"] {
    left: 26.5%;
    top: 52%;
    width: 4.25%;
    height: 13%;
}
[data-key="KeyH"] {
    left: 31%;
    top: 52%;
    width: 4.25%;
    height: 13%;
}
[data-key="KeyJ"] {
    left: 35.5%;
    top: 52%;
    width: 4.25%;
    height: 13%;
}
[data-key="KeyK"] {
    left: 40%;
    top: 52%;
    width: 4.25%;
    height: 13%;
}
[data-key="KeyL"] {
    left: 44.5%;
    top: 52%;
    width: 4.25%;
    height: 13%;
}
[data-key="Semicolon"] {
    left: 49%;
    top: 52%;
    width: 4.25%;
    height: 13%;
}
[data-key="Quote"] {
    left: 53.5%;
    top: 52%;
    width: 4.25%;
    height: 13%;
}
[data-key="Enter"] {
    left: 58%;
    top: 52%;
    width: 9.78%; /* 2.25U宽度 */
    height: 13%;
}

/* 主键盘区 - Shift行 [0.01, 0.69, 0.66, 0.84] 左Shift为2.25U×1U，右Shift为2.25U×1U，其余1U×1U */
[data-key="ShiftLeft"] {
    left: 1%;
    top: 67%;
    width: 9.56%; /* 2.25U宽度 */
    height: 13%;
}
[data-key="KeyZ"] {
    left: 10.75%;
    top: 67%;
    width: 4.25%;
    height: 13%;
}
[data-key="KeyX"] {
    left: 15.15%;
    top: 67%;
    width: 4.25%;
    height: 13%;
}
[data-key="KeyC"] {
    left: 19.68%;
    top: 67%;
    width: 4.25%;
    height: 13%;
}
[data-key="KeyV"] {
    left: 24.15%;
    top: 67%;
    width: 4.25%;
    height: 13%;
}
[data-key="KeyB"] {
    left: 28.65%;
    top: 67%;
    width: 4.25%;
    height: 13%;
}
[data-key="KeyN"] {
    left: 33.25%;
    top: 67%;
    width: 4.25%;
    height: 13%;
}
[data-key="KeyM"] {
    left: 37.68%;
    top: 67%;
    width: 4.25%;
    height: 13%;
}
[data-key="Comma"] {
    left: 42.28%;
    top: 67%;
    width: 4.25%;
    height: 13%;
}
[data-key="Period"] {
    left: 46.75%;
    top: 67%;
    width: 4.25%;
    height: 13%;
}
[data-key="Slash"] {
    left: 51.45%;
    top: 67%;
    width: 4.25%;
    height: 13%;
}
[data-key="ShiftRight"] {
    left: 56.0%;
    top: 67%;
    width: 11.85%; /* 2.25U宽度 */
    height: 13%;
}

/* 编辑键区 - 方向键上 [0.73, 0.69, 0.78, 0.84] 1U×1U */
[data-key="ArrowUp"] {
    left: 74.7%;
    top: 67%;
    width: 4.33%;
    height: 13%;
}

/* 主键盘区 - 控制行 [0.01, 0.86, 0.66, 1.0] 各1.25U×1U（空格键为6.25U×1U，位于中间） */
[data-key="ControlLeft"] {
    left: 1%;
    top: 82%;
    width: 5.21%; /* 1.25U宽度 */
    height: 13%;
}
[data-key="MetaLeft"] {
    left: 6.5%;
    top: 82%;
    width: 5.21%; /* 1.25U宽度 */
    height: 13%;
}
[data-key="AltLeft"] {
    left: 12%;
    top: 82%;
    width: 5.21%; /* 1.25U宽度 */
    height: 13%;
}
[data-key="Space"] {
    left: 17.5%;
    top: 82%;
    width: 28.14%; /* 6.25U宽度 */
    height: 13%;
}
[data-key="AltRight"] {
    left: 45.95%;
    top: 82%;
    width: 5.21%; /* 1.25U宽度 */
    height: 13%;
}
[data-key="MetaRight"] {
    left: 51.5%;
    top: 82%;
    width: 5.21%; /* 1.25U宽度 */
    height: 13%;
}
[data-key="ContextMenu"] {
    left: 57%;
    top: 82%;
    width: 5.21%; /* 1.25U宽度 */
    height: 13%;
}
[data-key="ControlRight"] {
    left: 62.55%;
    top: 82%;
    width: 5.21%; /* 1.25U宽度 */
    height: 13%;
}

/* 编辑键区 - 方向键左、下、右 */
[data-key="ArrowLeft"] {
    left: 70%;
    top: 82%;
    width: 4.33%;
    height: 13%;
}
[data-key="ArrowDown"] {
    left: 74.7%;
    top: 82%;
    width: 4.33%;
    height: 13%;
}
[data-key="ArrowRight"] {
    left: 79.4%;
    top: 82%;
    width: 4.33%;
    height: 13%;
}

/* 数字小键盘按键位置 - 根据精确坐标规范更新 */

/* 第一行：NUM LOCK、/、*、- [0.83, 0.22, 1.0, 0.35] 各1U×1U */
.numpad-container [data-key="NumLock"] {
    left: 0%;
    top: 0%;
    width: 25%;
    height: 16.67%; /* (0.35-0.22)/(1.0-0.22) * 100% ≈ 16.67% */
}
.numpad-container [data-key="NumpadDivide"] {
    left: 27%;
    top: 0%;
    width: 25%;
    height: 16.67%;
}
.numpad-container [data-key="NumpadMultiply"] {
    left: 54%;
    top: 0%;
    width: 25%;
    height: 16.67%;
}
.numpad-container [data-key="NumpadSubtract"] {
    left: 81%;
    top: 0%;
    width: 25%;
    height: 16.67%;
}

/* 第二行：7、8、9、+ [0.83, 0.37, 1.0, 0.5] 各1U×1U */
.numpad-container [data-key="Numpad7"] {
    left: 0%;
    top: 19.23%; /* (0.37-0.22)/(1.0-0.22) * 100% ≈ 19.23% */
    width: 25%;
    height: 16.67%; /* (0.5-0.37)/(1.0-0.22) * 100% ≈ 16.67% */
}
.numpad-container [data-key="Numpad8"] {
    left: 27%;
    top: 19.23%;
    width: 25%;
    height: 16.67%;
}
.numpad-container [data-key="Numpad9"] {
    left: 54%;
    top: 19.23%;
    width: 25%;
    height: 16.67%;
}
.numpad-container [data-key="NumpadAdd"] {
    left: 81%;
    top: 19.23%;
    width: 25%;
    height: 35.70%;
}

/* 第三行：4、5、6 [0.83, 0.52, 1.0, 0.67] 各1U×1U */
.numpad-container [data-key="Numpad4"] {
    left: 0%;
    top: 38.46%; /* (0.52-0.22)/(1.0-0.22) * 100% ≈ 38.46% */
    width: 25%;
    height: 16.67% /* (0.67-0.52)/(1.0-0.22) * 100% ≈ 19.23% */
}
.numpad-container [data-key="Numpad5"] {
    left: 27%;
    top: 38.46%;
    width: 25%;
    height: 16.67%;
}
.numpad-container [data-key="Numpad6"] {
    left: 54%;
    top: 38.46%;
    width: 25%;
    height: 16.67%;
}

/* 第四行：1、2、3、ENTER [0.83, 0.69, 1.0, 0.84] 1、2、3为1U×1U，ENTER为2U×1U */
.numpad-container [data-key="Numpad1"] {
    left: 0%;
    top: 57.6%; /* (0.69-0.22)/(1.0-0.22) * 100% ≈ 60.26% */
    width: 25%;
    height: 16.67%; /* (0.84-0.69)/(1.0-0.22) * 100% ≈ 19.23% */
}
.numpad-container [data-key="Numpad2"] {
    left: 27%;
    top: 57.6%;
    width: 25%;
    height: 16.67%;
}
.numpad-container [data-key="Numpad3"] {
    left: 54%;
    top: 57.6%;
    width: 25%;
    height: 16.67%;
}
.numpad-container [data-key="NumpadEnter"] {
    left: 81%;
    top: 57.6%;
    width: 25%;
    height: 35.70%;
}

/* 第五行：0、. [0.83, 0.86, 1.0, 1.0] 0为2U×1U，.为1U×1U */
.numpad-container [data-key="Numpad0"] {
    left: 0%;
    top: 77.05%; /* (0.86-0.22)/(1.0-0.22) * 100% ≈ 82.05% */
    width: 52%;  /* 2U宽度 */
    height: 16.67%; /* (1.0-0.86)/(1.0-0.22) * 100% ≈ 17.95% */
}
.numpad-container [data-key="NumpadDecimal"] {
    left: 54%;
    top: 77.05%;
    width: 25%;
    height: 16.67%;;
}

/* 控制面板样式 */
.control-panel {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.history-container, .apm-container {
    flex: 1;
    background-color: #1e1e1e;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.history-container h3, .apm-container h3 {
    color: #fbfbfc;
    margin-bottom: 15px;
    font-size: 18px;
}

/* APM显示样式 */
.apm-display {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    background-color: #2a2a2a;
    border-radius: 6px;
    padding: 15px;
}

.apm-value {
    font-size: 36px;
    font-weight: bold;
    color: #007acc;
    margin-right: 10px;
}

.apm-label {
    font-size: 16px;
    color: #e0e0e0;
}

.apm-chart-container {
    background-color: #2a2a2a;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
}

#apm-chart {
    max-width: 100%;
    height: auto;
}

.apm-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.apm-stat {
    display: flex;
    justify-content: space-between;
    background-color: #2a2a2a;
    border-radius: 4px;
    padding: 8px 12px;
}

.stat-label {
    color: #e0e0e0;
    font-size: 14px;
}

.stat-value {
    color: #007acc;
    font-weight: bold;
    font-size: 14px;
}

.history-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    align-items: center;
}

.history-btn, .reset-btn {
    background-color: #4d4d4d;
    border: 1px solid #666;
    color: #e0e0e0;
    padding: 5px 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    user-select: none;
    z-index: 10;
}

.history-btn:hover, .reset-btn:hover {
    background-color: #5d5d5d;
}

.history-btn.active {
    background-color: #1e6f9f;
    border-color: #2563eb;
}

.reset-btn {
    margin-left: auto;
    background-color: #6d28d9;
    border-color: #7c3aed;
}

.reset-btn:hover {
    background-color: #5b21b6;
}

.history-list {
    max-height: 300px;
    overflow-y: auto;
    background-color: #1f1f1f;
    border-radius: 4px;
    padding: 10px;
    font-family: monospace;
    font-size: 13px;
}

.history-item {
    padding: 4px 0;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
}

.history-item:last-child {
    border-bottom: none;
}

.history-item .key-name {
    font-weight: bold;
    background-color: #333;
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
    margin-right: 8px;
}

.history-item .event-type {
    color: #818cf8;
    font-size: 12px;
}

.history-item .timestamp {
    color: #9ca3af;
    font-size: 11px;
    margin-left: auto;
}

/* 浏览器限制提示 */
.browser-limit-note {
    text-align: center;
    color: #9ca3af;
    font-size: 12px;
    padding: 10px;
    background-color: #2d2d2d;
    border-radius: 4px;
    margin-top: 10px;
}

/* 滚动条样式 */
.history-list::-webkit-scrollbar {
    width: 8px;
}

.history-list::-webkit-scrollbar-track {
    background: #1f1f1f;
    border-radius: 4px;
}

.history-list::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

/* 弹窗模态框样式 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
    animation: fadeIn 0.3s;
}

.modal-content {
    background-color: #2a2a2a;
    margin: 10% auto;
    padding: 0;
    border: 1px solid #444;
    border-radius: 8px;
    width: 80%;
    max-width: 600px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    animation: slideIn 0.3s;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #444;
    border-radius: 8px 8px 0 0;
}

.modal-header h2 {
    margin: 0;
    color: #fdfdfd;
    font-size: 20px;
}

.modal-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.modal-close:hover {
    color: #fff;
}

.modal-body {
    padding: 20px;
    color: #e0e0e0;
    max-height: 60vh;
    overflow-y: auto;
}

.modal-body h3 {
    color: #007acc;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 18px;
}

.modal-body h4 {
    color: #e0e0e0;
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 16px;
}

.modal-body p {
    margin-bottom: 10px;
    line-height: 1.5;
}

.modal-body .faq-item {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #333;
    border-radius: 4px;
}

/* 弹窗动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { 
        opacity: 0;
        transform: translateY(-50px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

.history-list::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .key {
        height: 35px;
        min-width: 35px;
        font-size: 12px;
    }
    
    .space-key {
        width: 200px;
    }
}

@media (max-width: 768px) {
    body {
        padding: 10px;
    }
    
    .key {
        height: 30px;
        min-width: 30px;
        font-size: 10px;
    }
    
    .space-key {
        width: 150px;
    }
    
    .history-controls {
        flex-wrap: wrap;
    }
}

/* 使用指南与帮助部分的样式 */
.guide-help-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.guide-section, .help-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 20px;
}

.guide-section h3, .help-section h3 {
    color: #4fc3f7;
    margin-bottom: 15px;
    font-size: 1.2rem;
    border-bottom: 1px solid rgba(79, 195, 247, 0.3);
    padding-bottom: 8px;
}

.guide-section p, .help-section p {
    margin-bottom: 10px;
    line-height: 1.5;
}

.faq-item {
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

.faq-item h4 {
    color: #81c784;
    margin-bottom: 8px;
    font-size: 1rem;
}

.faq-item p {
    margin: 0;
    font-size: 0.9rem;
    color: #e0e0e0;
}

/* 弹窗内容样式优化 */
.modal-body {
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 10px;
}

/* 滚动条样式 */
.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: rgba(79, 195, 247, 0.5);
    border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(79, 195, 247, 0.7);
}



/* 页脚样式 */
.footer {
    background-color: #1a1a1a;
    border-top: 1px solid #333;
    padding: 20px 0;
    margin-top: 40px;
    width: 100%;
}

.copyright {
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.copyright p {
    margin: 0;
    line-height: 1.5;
}