/* ============================
   1. CSS 变量与主题
   ============================ */
:root {
    --bg: #06080e;
    --surface: #11141e;
    --surface2: #181b28;
    --surface3: #1f2230;
    --key-bg: #232736;
    --key-hover: #2f3345;
    --key-mod: #1a1d29;
    --key-special: #1d202d;
    --key-enter-bg: #152d4a;
    --key-enter-text: #b8d6f8;
    --key-esc-bg: #351c1c;
    --key-esc-text: #f0b0b0;
    --text: #c2c7d4;
    --text2: #858a98;
    --text3: #e2e6f0;
    --accent: #4dc9f6;
    --accent2: #7c6ff7;
    --green: #4df69b;
    --amber: #f6c84d;
    --danger: #f64d6e;
    --border: #1e2230;
    --border2: #2a2e3c;
    --radius: 6px;
    --radius2: 9px;
    --radius3: 12px;
    --u: 52px;
    --gap: 7px;
    --font: 15px;
    --font-sm: 12px;
    --font-arrow: 24px;
    --transition: 0.15s ease;
    --shadow: 0 2px 0 1px #0a0c14, 0 3px 8px rgba(0,0,0,0.5);
    --shadow-pressed: 0 1px 0 0px #04050a, 0 1px 3px rgba(0,0,0,0.7);
    --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', 'Monaco', 'JetBrains Mono', monospace;
    --font-sans: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;

    /* 渐变色 */
    --gradient-primary: linear-gradient(135deg, #4dc9f6 0%, #7c6ff7 50%, #c471f5 100%);
    --gradient-surface: linear-gradient(145deg, rgba(17,20,30,0.9), rgba(31,34,48,0.7));
    --gradient-glow: radial-gradient(ellipse at 50% 0%, rgba(77,201,246,0.08) 0%, transparent 60%);

    /* 高级毛玻璃系统 */
    --glass-bg: rgba(12, 15, 24, 0.45);
    --glass-bg-heavy: rgba(12, 15, 24, 0.6);
    --glass-bg-light: rgba(12, 15, 24, 0.25);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-border-light: rgba(255, 255, 255, 0.05);
    --glass-highlight: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 100%);
    --glass-blur: 24px;
    --glass-blur-heavy: 32px;
    --glass-blur-light: 16px;

    /* 增强阴影 */
    --shadow-glow: 0 0 40px rgba(77,201,246,0.12);
    --shadow-elevated: 0 8px 32px rgba(0,0,0,0.4), 0 0 1px rgba(255,255,255,0.06);
    --shadow-glass: 0 4px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
    --shadow-glass-hover: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);

    /* 热力图色阶 */
    --heat-0: transparent;
    --heat-1: rgba(77,201,246,0.15);
    --heat-2: rgba(77,201,246,0.3);
    --heat-3: rgba(77,247,166,0.4);
    --heat-4: rgba(246,200,77,0.5);
    --heat-5: rgba(246,77,110,0.6);
}
body.light-theme {
    --bg: #e9ecf2;
    --surface: #f8f9fc;
    --surface2: #eef1f7;
    --surface3: #e3e6ee;
    --key-bg: #dde1e9;
    --key-hover: #cdd2dc;
    --key-mod: #d2d6df;
    --key-special: #d7dbe3;
    --key-enter-bg: #c1d4ef;
    --key-enter-text: #142840;
    --key-esc-bg: #efcfcf;
    --key-esc-text: #6a1a1a;
    --text: #1a1e27;
    --text2: #585d68;
    --text3: #080b12;
    --accent: #1a6fdc;
    --accent2: #5c3df0;
    --green: #14803a;
    --amber: #b85c00;
    --danger: #d93025;
    --border: #c8ccd5;
    --border2: #d9dde5;
    --shadow: 0 2px 0 1px #babec7, 0 3px 5px rgba(0,0,0,0.06);
    --shadow-pressed: 0 1px 0 0px #a6aab4, 0 1px 2px rgba(0,0,0,0.1);
    --gradient-primary: linear-gradient(135deg, #1a6fdc 0%, #5c3df0 50%, #9b59b6 100%);
    --gradient-surface: linear-gradient(145deg, rgba(248,249,252,0.9), rgba(238,241,247,0.7));
    --gradient-glow: radial-gradient(ellipse at 50% 0%, rgba(26,111,220,0.06) 0%, transparent 60%);
    --glass-bg: rgba(238, 241, 247, 0.55);
    --glass-bg-heavy: rgba(238, 241, 247, 0.7);
    --glass-bg-light: rgba(238, 241, 247, 0.35);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-border-light: rgba(0, 0, 0, 0.04);
    --glass-highlight: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
    --glass-blur: 24px;
    --glass-blur-heavy: 32px;
    --glass-blur-light: 16px;
    --shadow-glow: 0 0 40px rgba(26,111,220,0.08);
    --shadow-elevated: 0 8px 32px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.08);
    --shadow-glass: 0 4px 16px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.4);
    --shadow-glass-hover: 0 8px 24px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.5);
    --heat-1: rgba(26,111,220,0.12);
    --heat-2: rgba(26,111,220,0.24);
    --heat-3: rgba(20,128,58,0.3);
    --heat-4: rgba(184,92,0,0.35);
    --heat-5: rgba(217,48,37,0.4);
}

/* ============================
   2. 基础重置与全局样式
   ============================ */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
    background: var(--bg); color: var(--text); font-family: var(--font-sans);
    min-height: 100vh; transition: background 0.4s, color 0.4s;
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; overflow-x: hidden;
    display: flex; flex-direction: column; position: relative;
}
/* 背景网格纹理 - 让毛玻璃效果更可见 */
body::before, body::after { z-index: 0; }
.bg-grid {
    position: fixed; top:0; left:0; width:100%; height:100%;
    pointer-events: none; z-index: 0;
    background-image:
        linear-gradient(rgba(77,201,246,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(77,201,246,0.02) 1px, transparent 1px);
    background-size: 60px 60px;
}
body.light-theme .bg-grid {
    background-image:
        linear-gradient(rgba(26,111,220,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,111,220,0.04) 1px, transparent 1px);
}

/* ============================
   3. 装饰层（背景光斑）
   ============================ */
body::before {
    content: '';
    position: fixed;
    top: -20%; left: -10%;
    width: 55%; height: 55%;
    background: radial-gradient(ellipse, rgba(77,201,246,0.12) 0%, rgba(77,201,246,0.03) 50%, transparent 70%);
    pointer-events: none; z-index: 0;
    animation: floatBlob1 20s ease-in-out infinite;
}
body::after {
    content: '';
    position: fixed;
    bottom: -15%; right: -10%;
    width: 50%; height: 50%;
    background: radial-gradient(ellipse, rgba(124,111,247,0.12) 0%, rgba(124,111,247,0.03) 50%, transparent 70%);
    pointer-events: none; z-index: 0;
    animation: floatBlob2 25s ease-in-out infinite;
}
/* 第三个装饰光斑 - 中心偏移 */
.main-content::before {
    content: '';
    position: fixed;
    top: 30%; right: 20%;
    width: 40%; height: 40%;
    background: radial-gradient(ellipse, rgba(196,113,245,0.06) 0%, transparent 65%);
    pointer-events: none; z-index: 0;
    animation: floatBlob3 30s ease-in-out infinite;
}
/* 浅色主题光斑增强 */
body.light-theme::before {
    background: radial-gradient(ellipse, rgba(26,111,220,0.1) 0%, rgba(26,111,220,0.02) 50%, transparent 70%);
}
body.light-theme::after {
    background: radial-gradient(ellipse, rgba(92,61,240,0.1) 0%, rgba(92,61,240,0.02) 50%, transparent 70%);
}
body.light-theme .main-content::before {
    background: radial-gradient(ellipse, rgba(155,89,182,0.06) 0%, transparent 65%);
}

/* ============================
   4. 导航栏
   ============================ */
.navbar {
    position: sticky; top:8px; z-index:1000; display:flex; align-items:center; gap:6px;
    padding:10px 20px; margin:8px 12px 0;
    background: var(--glass-bg-heavy);
    border:1px solid var(--glass-border);
    border-radius: 16px;
    backdrop-filter: blur(var(--glass-blur-heavy)) saturate(200%);
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(200%);
    box-shadow: var(--shadow-glass), 0 0 0 1px rgba(255,255,255,0.03);
    flex-wrap:wrap;
    transition: box-shadow 0.3s, background 0.3s;
}
.navbar.scrolled {
    background: var(--glass-bg-heavy);
    box-shadow: var(--shadow-glass-hover), 0 0 40px rgba(77,201,246,0.06);
}
.navbar-brand {
    font-weight:700; font-size:1.1rem; color:var(--text3); white-space:nowrap;
    letter-spacing:-0.3px; margin-right:10px;
    display:flex; align-items:center; gap:8px;
}
.brand-icon {
    width:22px; height:22px;
    display:inline-flex; align-items:center; justify-content:center;
    flex-shrink: 0; color:var(--text3);
}
.nav-btn {
    padding:8px 16px; border-radius:22px; border:1px solid var(--glass-border-light);
    background:var(--glass-bg-light); color:var(--text); font-weight:600; font-size:0.78rem;
    cursor:pointer; transition:all 0.22s; white-space:nowrap; letter-spacing:0.2px;
    position:relative; overflow:hidden;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.nav-btn:hover { background:var(--glass-bg); border-color:var(--glass-border); transform:translateY(-1px); }
.nav-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 4px 18px rgba(77,201,246,0.35); }
.nav-btn::after {
    content:''; position:absolute; bottom:0; left:50%;
    width:0; height:2px; background:var(--accent); border-radius:1px;
    transition: width 0.3s, left 0.3s;
}
.nav-btn.active::after { width:60%; left:20%; }

.right-nav-group {
    margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
}
.ctrl-btn, .resource-link-btn {
    background:var(--glass-bg-light); border:1px solid var(--glass-border-light); color:var(--text);
    padding:7px 13px; border-radius:20px; font-size:0.7rem; font-weight:600;
    cursor:pointer; transition:all 0.16s; white-space:nowrap;
    text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ctrl-btn:hover, .resource-link-btn:hover { background:var(--glass-bg); border-color:var(--glass-border); transform:translateY(-1px); }

/* ============================
   5. 英雄区与提示
   ============================ */
.hero-title {
    font-size: 2.5rem; font-weight: 800; color: var(--text3);
    letter-spacing: -1.5px; text-align: center; margin-bottom: 8px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: heroFadeIn 0.8s ease-out;
}
.hero-subtitle {
    font-size: 1.1rem; color: var(--text2); text-align: center;
    letter-spacing: 1px; margin-bottom: 12px;
    animation: heroFadeIn 0.8s ease-out 0.2s both;
}
.quick-hint {
    display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px;
    animation: heroFadeIn 0.8s ease-out 0.4s both;
}
.hint-pill {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 14px; background: var(--glass-bg-light); border: 1px solid var(--glass-border-light);
    border-radius: 20px; font-size: 0.72rem; color: var(--text2); transition: all 0.25s;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.hint-pill:hover { border-color: var(--accent); color: var(--text); background: var(--glass-bg); }
.hint-pill kbd {
    background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 4px;
    padding: 1px 6px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--accent);
}

/* ============================
   6. 键盘区
   ============================ */
.main-content {
    flex: 1 0 auto; display: flex; flex-direction: column; align-items: center;
    padding: 20px 16px 60px; gap: 18px; max-width: 1280px; margin: 0 auto; width: 100%;
    position: relative; z-index: 1;
}
.keyboard-wrap-outer {
    width:100%; max-width:1250px; transform-origin:center top;
    transition: transform 0.5s cubic-bezier(0.22,0.61,0.36,1), opacity 0.5s;
    margin: 0 auto;
}
.keyboard-wrap-outer.shrunk { transform:scale(0.82); opacity:0.88; }
.main-content.panel-active .hero-title,
.main-content.panel-active .hero-subtitle,
.main-content.panel-active .quick-hint,
.main-content.panel-active .keyboard-wrap-outer {
    opacity:0; max-height:0; margin:0; padding:0; overflow:hidden;
    transform:translateY(-12px) scale(0.98);
    transition: all 0.32s cubic-bezier(0.4,0,1,1);
    pointer-events:none;
}
.main-content .hero-title,
.main-content .hero-subtitle,
.main-content .quick-hint,
.main-content .keyboard-wrap-outer {
    transition: all 0.38s cubic-bezier(0.32,0.72,0,1);
}
.keyboard-section {
    background: var(--glass-bg-heavy); border-radius:var(--radius3);
    border:1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    padding:14px 14px 10px;
    box-shadow: var(--shadow-glass), var(--shadow-glow);
    position: relative; overflow: hidden;
}
.keyboard-section::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background: linear-gradient(90deg, transparent 5%, rgba(77,201,246,0.25) 30%, rgba(124,111,247,0.25) 70%, transparent 95%);
    pointer-events:none;
}
.keyboard-section::after {
    content:''; position:absolute; bottom:0; left:10%; right:10%; height:40px;
    background:radial-gradient(ellipse, rgba(77,201,246,0.05), transparent);
    pointer-events:none;
}
.info-strip {
    display:flex; flex-wrap:wrap; align-items:center; gap:10px;
    padding:10px 14px; margin-bottom:10px;
    background: var(--glass-bg-light); border:1px solid var(--glass-border-light);
    border-radius:var(--radius2); font-size:0.75rem;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.info-strip .label { color:var(--text2); font-weight:600; text-transform:uppercase; letter-spacing:0.4px; font-size:0.65rem; }
.info-strip .val { font-family:var(--font-mono); font-weight:700; font-size:0.95rem; color:var(--accent); min-width:42px; text-align:center; transition: transform 0.15s, color 0.15s; }
.info-strip .val.code { color:var(--accent2); font-size:0.78rem; min-width:45px; }
.info-strip .val.keycode { color:var(--amber); }
.info-strip .val.flash { animation: valFlash 0.3s ease; }
.status-minis { margin-left:auto; display:flex; gap:4px; flex-wrap:wrap; }
.status-mini { font-size:0.6rem; padding:4px 8px; border-radius:10px; background:var(--glass-bg-light); font-weight:600; letter-spacing:0.2px; transition:all 0.25s; border:1px solid transparent; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.status-mini.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.keyboard-wrapper {
    overflow-x:auto; padding:4px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: var(--border2) transparent;
}
.keyboard-wrapper::-webkit-scrollbar { height: 4px; }
.keyboard-wrapper::-webkit-scrollbar-track { background: transparent; }
.keyboard-wrapper::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

/* ============================
   7. 按键样式（含热力图/波纹/发光）
   ============================ */
.kb-grid { display:grid; grid-template-columns:calc(var(--u)*1.25) repeat(23,var(--u)); grid-auto-rows:var(--u); gap:var(--gap); min-width:fit-content; margin:0 auto; }
.key {
    position:relative; height:100%; background:var(--glass-bg-light);
    border:1px solid var(--glass-border-light); border-bottom:3px solid rgba(0,0,0,0.3);
    border-radius:var(--radius); color:var(--text); font-family:var(--font-sans);
    font-size:var(--font); font-weight:600; display:flex; flex-direction:column;
    align-items:center; justify-content:center; transition:all var(--transition);
    box-shadow: var(--shadow-glass); text-align:center; line-height:1.2;
    cursor:default; white-space:nowrap; overflow:hidden;
    grid-row:span 1; grid-column:span 1;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 0 1px rgba(0,0,0,0.3);
    user-select:none; -webkit-user-select:none;
}
.key:not([style*="span 2"]):not([style*="span 3"]) { height:var(--u); }
.key.pressed {
    transform:translateY(2px); border-bottom-width:1px;
    box-shadow: var(--shadow-pressed), 0 0 20px rgba(77,201,246,0.4), 0 0 60px rgba(77,201,246,0.15), inset 0 0 12px rgba(77,201,246,0.1);
    border-color:var(--accent); color:#fff; z-index:5;
}
.key.modifier { background:rgba(20,23,35,0.5); font-size:var(--font-sm); font-weight:600; color:#9a9fad; }
.key.modifier.pressed { background:var(--heat-color,rgba(30,37,64,0.7))!important; border-color:var(--accent2); box-shadow:var(--shadow-pressed),0 0 24px rgba(124,111,247,0.45); }
.key.special { background:rgba(22,25,38,0.45); font-weight:600; font-size:var(--font-sm); }
.key.special.pressed { background:var(--heat-color,var(--glass-bg-heavy))!important; border-color:var(--accent); color:#fff; }
.key.esc-key { background:rgba(53,28,28,0.5); color:var(--key-esc-text); font-weight:700; font-size:var(--font); }
.key.esc-key.pressed { background:var(--heat-color,var(--glass-bg-heavy))!important; }
.key.enter-key { background:rgba(21,45,74,0.5); color:var(--key-enter-text); font-weight:700; font-size:13px; letter-spacing:0.3px; }
.key.enter-key.pressed { background:var(--heat-color,var(--glass-bg-heavy))!important; }
body.light-theme .key.modifier { background:rgba(210,214,223,0.5); color:#585d68; }
body.light-theme .key.modifier.pressed { background:var(--heat-color,rgba(193,202,220,0.7))!important; }
body.light-theme .key.special { background:rgba(215,219,227,0.45); }
body.light-theme .key.special.pressed { background:var(--heat-color,rgba(180,200,230,0.7))!important; color:#1a1e27; }
body.light-theme .key.esc-key { background:rgba(239,207,207,0.5); }
body.light-theme .key.esc-key.pressed { background:var(--heat-color,rgba(180,200,230,0.7))!important; }
body.light-theme .key.enter-key { background:rgba(193,212,239,0.5); }
body.light-theme .key.enter-key.pressed { background:var(--heat-color,rgba(180,200,230,0.7))!important; }
body.light-theme .key.pressed { background: var(--heat-color, rgba(180,200,230,0.7)) !important; color: #1a1e27; }
body.light-theme .key-char-shift { color: #888; }
body.light-theme .key { text-shadow: 0 1px 1px rgba(255,255,255,0.3), 0 0 1px rgba(0,0,0,0.1); }
body.light-theme .appreciate-btn { background:#1a1a2e!important; border-color:rgba(0,0,0,0.15)!important; }
body.light-theme .appreciate-btn:hover { background:#252540!important; }
.key-char-shift { font-size:7px; color:#7a7f8c; position:absolute; top:3px; left:5px; pointer-events:none; }
.key.arrow-key { font-size:var(--font-arrow); font-weight:700; color:var(--text3); }
.key.was-pressed::after {
    content:''; position:absolute; top:4px; right:4px; width:6px; height:6px;
    background:var(--green); border-radius:50%;
    box-shadow:0 0 8px var(--green), 0 0 16px rgba(77,247,166,0.3);
    animation: glowPulse 2s ease-in-out infinite;
}
.key.was-pressed { border-color:var(--accent)!important; box-shadow:var(--shadow),0 0 6px rgba(77,201,246,0.3); }
/* 松开后保留热力颜色 */
.key.was-pressed:not(.pressed) { background:var(--heat-color, var(--key-bg)) !important; transition: background 0.3s ease; }

/* 波纹效果 */
.key .ripple {
    position:absolute; border-radius:50%;
    background:rgba(77,201,246,0.3);
    animation:rippleEffect 0.5s ease-out forwards;
    pointer-events:none; z-index:2;
}
@keyframes rippleEffect {
    0% { width:0; height:0; opacity:0.5; }
    100% { width:80px; height:80px; opacity:0; margin-left:-40px; margin-top:-40px; }
}

/* 热力图 */
.key.heatmap-active { background: var(--heat-color, var(--key-bg)) !important; transition: background 0.15s ease; }
/* 按键按下时使用热力颜色（长按实时更新 + 次数热力图） */
.key.pressed.heatmap-active { background: var(--heat-color, var(--glass-bg-heavy)) !important; transition: background 0.08s ease; }
.key.pressed:not(.heatmap-active) { background: var(--glass-bg-heavy) !important; }

.clear-state-wrap { display:flex; align-items:center; gap:6px; font-size:0.7rem; color:var(--text2); margin-left:auto; }
.layout-switcher {
    display:inline-flex; align-items:center; height:28px;
    background:rgba(77,201,246,0.08); border:1px solid rgba(77,201,246,0.2);
    border-radius:6px; overflow:hidden; gap:0;
}
.layout-opt {
    display:inline-flex; align-items:center; justify-content:center; gap:3px;
    height:100%; padding:0 8px; border:none; background:none;
    color:var(--text2); font-size:0.65rem; font-weight:600;
    cursor:pointer; transition:all 0.18s; white-space:nowrap;
    font-family:var(--font-sans);
}
.layout-opt svg { flex-shrink:0; opacity:0.55; transition:opacity 0.18s; }
.layout-opt.active {
    background:rgba(77,201,246,0.18); color:var(--accent);
}
.layout-opt.active svg { opacity:1; }
.layout-opt:not(.active):hover { background:rgba(77,201,246,0.08); color:var(--text); }
.layout-opt:not(.active):hover svg { opacity:0.75; }
body.light-theme .layout-switcher { background:rgba(26,111,220,0.06); border-color:rgba(26,111,220,0.2); }
body.light-theme .layout-opt.active { background:rgba(26,111,220,0.15); color:var(--accent); }
.sound-toggle-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; padding:0;
    background:var(--glass-bg-light); border:1px solid var(--glass-border-light);
    border-radius:6px; color:var(--text2); cursor:pointer;
    transition:all 0.18s;
}
.sound-toggle-btn:hover { background:var(--glass-bg); border-color:var(--glass-border); color:var(--text); }
.sound-toggle-btn.active { background:rgba(77,201,246,0.15); border-color:rgba(77,201,246,0.3); color:var(--accent); }
body.light-theme .sound-toggle-btn.active { background:rgba(26,111,220,0.12); border-color:rgba(26,111,220,0.25); color:var(--accent); }
.clear-state-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; padding:0;
    background:var(--glass-bg-light); border:1px solid var(--glass-border-light);
    border-radius:6px; color:var(--text2); cursor:pointer; font-size:0.68rem; transition: all 0.25s;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.clear-state-btn:hover { background:var(--glass-bg); border-color:var(--accent); color:var(--accent); }
.clear-state-btn:hover svg { transform:rotate(360deg); }
.clear-state-btn svg { transition:transform 0.4s cubic-bezier(0.32,0.72,0,1); }

/* ============================
   8. 测试面板通用样式
   ============================ */
.test-panel-area { width:100%; max-width:1250px; margin-top:16px; }
.test-panel { display:none; }
.test-panel.active {
    display:block;
    animation: panelEnter 0.48s cubic-bezier(0.32,0.72,0,1) both;
}
.test-panel.leaving {
    display:block;
    animation: panelLeave 0.22s cubic-bezier(0.4,0,1,1) both;
    pointer-events:none;
}

.dashboard-panel {
    background: var(--glass-bg-heavy); border:1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border-radius:var(--radius3); padding:24px 28px;
    box-shadow: var(--shadow-glass), var(--shadow-glow);
    position:relative; overflow:hidden;
}
.dashboard-panel::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background: var(--glass-highlight);
}
.dashboard-panel .panel-header { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.dashboard-panel .panel-icon { font-size:1.4rem; display:inline-flex; align-items:center; justify-content:center; }
.panel-icon svg, .feature-card .icon svg { width:1.2em; height:1.2em; stroke:var(--accent); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
.feature-card .icon { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:var(--glass-bg-light); margin-bottom:8px; }
.feature-card .icon svg { width:20px; height:20px; }
.panel-icon.icon-accent2 svg { stroke:var(--accent2); }
.panel-icon.icon-green svg { stroke:var(--green); }
.panel-icon.icon-amber svg { stroke:var(--amber); }
.panel-icon.icon-danger svg { stroke:var(--danger); }
.feature-card .icon.icon-accent2 svg { stroke:var(--accent2); }
.feature-card .icon.icon-green svg { stroke:var(--green); }
.feature-card .icon.icon-amber svg { stroke:var(--amber); }
.feature-card .icon.icon-danger svg { stroke:var(--danger); }
.dashboard-panel h3 { font-size:1.05rem; font-weight:700; color:var(--text3); }
.dashboard-panel .subtitle { font-size:0.76rem; color:var(--text2); margin-bottom:18px; }

/* 主按钮样式 */
button.primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
    border: none; color: white; padding: 12px 24px; border-radius: 25px;
    font-weight: 700; font-size: 0.85rem; cursor: pointer;
    transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(77, 201, 246, 0.4);
    letter-spacing: 0.5px;
}
button.primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(77, 201, 246, 0.5); }
button.primary:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(77, 201, 246, 0.4); }

/* 辅助按钮样式 */
.secondary-btn {
    background: var(--glass-bg-light); border: 1px solid var(--glass-border-light); color: var(--text);
    padding: 12px 24px; border-radius: 25px; font-weight: 600; font-size: 0.85rem;
    cursor: pointer; transition: all 0.3s ease; letter-spacing: 0.5px;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.secondary-btn:hover:not(:disabled) { background: var(--glass-bg); border-color: var(--accent); color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(77,201,246,0.2); }
.secondary-btn:active:not(:disabled) { transform: translateY(0); }
.secondary-btn:disabled { opacity: 0.5; cursor: not-allowed; background: var(--glass-bg-light); border-color: var(--glass-border-light); color: var(--text2); }

/* ============================
   9. 延迟面板
   ============================ */
.data-table { width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:0.85rem; line-height:1.5; }
.data-table thead th {
    text-align:left; padding:10px 12px; font-size:0.75rem; text-transform:uppercase;
    letter-spacing:0.5px; color:var(--text3); border-bottom:2px solid var(--glass-border);
    font-weight:700; background:var(--glass-bg-light);
}
.data-table tbody td { padding:9px 12px; border-bottom:1px solid var(--glass-border-light); color:var(--text3); transition:background 0.15s; line-height:1.5; }
.data-table tbody tr:hover td { background:var(--glass-bg-light); }
.event-down { color:var(--green); font-weight:700; } .event-up { color:var(--amber); font-weight:700; }
.interval-cell { color:var(--accent); font-weight:600; }

/* ============================
   10. CPS 面板
   ============================ */
.metric-row { display:flex; gap:40px; flex-wrap:wrap; align-items:center; justify-content:center; }
.metric-block { text-align:center; }
.metric-big { font-size:4.5rem; font-weight:800; color:var(--accent); line-height:1; letter-spacing:-2px; transition:all 0.3s; }
.metric-big.purple { color:var(--accent2); }
.metric-divider { font-size:3rem; color:var(--text2); font-weight:200; }
.metric-label { font-size:0.7rem; color:var(--text2); text-transform:uppercase; letter-spacing:0.6px; margin-top:4px; }
.section-label {
    display:block; font-size:0.62rem; text-transform:uppercase;
    letter-spacing:0.8px; color:var(--text2); font-weight:700; margin-bottom:10px;
}
.cps-config-row {
    display:flex; gap:12px; justify-content:center; align-items:stretch;
    flex-wrap:wrap; margin-bottom:22px;
}
.cps-config-card {
    flex:1; min-width:180px; max-width:320px;
    background:var(--glass-bg-light); border:1px solid var(--glass-border-light);
    border-radius:var(--radius2); padding:14px 16px;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.cps-mode-selector { display:flex; gap:6px; flex-wrap:wrap; }
.cps-mode-btn {
    padding:6px 14px; border-radius:16px; border:1px solid var(--glass-border-light);
    background:var(--glass-bg-light); color:var(--text2); font-weight:600; font-size:0.72rem;
    cursor:pointer; transition:all 0.2s;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.cps-mode-btn:hover { border-color:var(--accent); color:var(--text); background:var(--glass-bg); }
.cps-mode-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 2px 12px rgba(77,201,246,0.3); }
.target-key-badge {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:52px; padding:6px 16px;
    font-family:var(--font-mono); font-size:1rem; font-weight:800;
    color:var(--text2); border-radius:var(--radius2);
    background:var(--glass-bg-light); border:1px dashed var(--glass-border);
    transition:all 0.25s;
}
.target-key-badge.has-key {
    color:var(--accent); background:rgba(77,201,246,0.08);
    border:1px solid rgba(77,201,246,0.3); border-style:solid;
    box-shadow:0 0 12px rgba(77,201,246,0.12);
}
.target-key-hint { font-size:0.75rem; color:var(--text2); }
.cps-metrics-grid {
    display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
    max-width:460px; margin:0 auto 20px;
}
.cps-metric-card {
    background:var(--glass-bg-light); border:1px solid var(--glass-border-light);
    border-radius:var(--radius3); padding:22px 16px; text-align:center;
    transition:all 0.3s; position:relative; overflow:hidden;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.cps-metric-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
}
.cps-metric-card.card-accent::before { background:linear-gradient(90deg, var(--accent), transparent); }
.cps-metric-card.card-accent2::before { background:linear-gradient(90deg, var(--accent2), transparent); }
.cps-metric-card:hover { border-color:var(--glass-border); transform:translateY(-2px); box-shadow:var(--shadow-glass-hover); }
.cps-metric-card .metric-big { font-size:2.8rem; }
.cps-metric-card .metric-label { margin-top:6px; }
.cps-progress-wrap { max-width:400px; margin:0 auto; text-align:center; }
.cps-progress-bar {
    width:100%; height:5px; background:var(--glass-bg-light);
    border-radius:3px; overflow:hidden; margin-top:10px;
    border:1px solid var(--glass-border-light);
}
.cps-progress-fill {
    height:100%; width:0%; border-radius:3px;
    background:linear-gradient(90deg, var(--accent), var(--accent2));
    transition:width 0.1s linear;
}
.cps-actions {
    display:flex; align-items:center; justify-content:center;
    gap:12px; flex-wrap:wrap; margin-top:20px;
}

/* ============================
   11. 冲突面板
   ============================ */
.conflict-metrics-grid {
    display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
    max-width:400px; margin:20px auto;
}
.conflict-metric-card {
    background:var(--glass-bg-light); border:1px solid var(--glass-border-light);
    border-radius:var(--radius3); padding:22px 16px; text-align:center;
    transition:all 0.3s; position:relative; overflow:hidden;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.conflict-metric-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
}
.conflict-metric-card.card-accent::before { background:linear-gradient(90deg, var(--accent), transparent); }
.conflict-metric-card.card-accent2::before { background:linear-gradient(90deg, var(--accent2), transparent); }
.conflict-metric-card:hover { border-color:var(--glass-border); transform:translateY(-2px); box-shadow:var(--shadow-glass-hover); }
.conflict-metric-card .metric-big { font-size:2.8rem; }
.conflict-keys-area { margin-top:20px; }
.conflict-keys-area .section-label { text-align:center; margin-bottom:12px; }
.tag-cloud { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; min-height:44px; align-items:center; }
.tag-item {
    padding:8px 14px; background:var(--glass-bg-light); border-radius:20px;
    font-family:var(--font-mono); font-weight:700; font-size:0.78rem;
    border:1px solid var(--glass-border-light);
    animation:tagPop 0.32s ease; transition:all 0.2s;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.tag-item:hover { background:var(--glass-bg); border-color:var(--accent); color:var(--accent); }
.conflict-empty-state {
    text-align:center; padding:20px 12px; color:var(--text2); font-size:0.8rem; line-height:1.6;
}
.conflict-empty-state .empty-icon { font-size:1.6rem; margin-bottom:6px; opacity:0.35; }
.conflict-guide {
    margin-top:18px; padding:12px 16px;
    background:var(--glass-bg-light); border-radius:var(--radius2);
    border:1px solid var(--glass-border-light);
    text-align:center; font-size:0.75rem; color:var(--text2); line-height:1.7;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.conflict-guide strong { color:var(--accent); font-weight:700; }

/* ============================
   12. 断触面板
   ============================ */
.chatter-controls-row {
    display:flex; gap:10px; align-items:center; justify-content:center;
    flex-wrap:wrap; margin-bottom:18px;
}
.chatter-toggle-btn {
    display:inline-flex; align-items:center; gap:7px;
    padding:9px 22px; border-radius:22px; border:none;
    font-weight:700; font-size:0.82rem; cursor:pointer;
    transition:all 0.25s; letter-spacing:0.3px;
}
.chatter-toggle-btn.chatter-toggle-start {
    background:linear-gradient(135deg, #22c55e, #16a34a);
    color:#fff; box-shadow:0 3px 14px rgba(34,197,94,0.35);
}
.chatter-toggle-btn.chatter-toggle-start:hover {
    transform:translateY(-2px); box-shadow:0 5px 20px rgba(34,197,94,0.45);
}
.chatter-toggle-btn.chatter-toggle-start:active {
    transform:translateY(0); box-shadow:0 2px 8px rgba(34,197,94,0.3);
}
.chatter-toggle-btn.chatter-toggle-stop {
    background:linear-gradient(135deg, #ef4444, #dc2626);
    color:#fff; box-shadow:0 3px 14px rgba(239,68,68,0.35);
}
.chatter-toggle-btn.chatter-toggle-stop:hover {
    transform:translateY(-2px); box-shadow:0 5px 20px rgba(239,68,68,0.45);
}
.chatter-toggle-btn.chatter-toggle-stop:active {
    transform:translateY(0); box-shadow:0 2px 8px rgba(239,68,68,0.3);
}
.chatter-key-badge {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:44px; padding:5px 14px;
    font-family:var(--font-mono); font-size:0.9rem; font-weight:800;
    color:var(--text2); border-radius:var(--radius2);
    background:var(--glass-bg-light); border:1px dashed var(--glass-border);
    transition:all 0.25s;
}
.chatter-key-badge.has-key {
    color:var(--accent); background:rgba(77,201,246,0.08);
    border:1px solid rgba(77,201,246,0.3); border-style:solid;
    box-shadow:0 0 10px rgba(77,201,246,0.1);
}
.chatter-signal-section {
    background:var(--glass-bg-light); border:1px solid var(--glass-border-light);
    border-radius:var(--radius3); padding:16px;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    margin-bottom:14px; position:relative;
}
.chatter-signal-labels {
    position:absolute; left:16px; top:12px; bottom:12px;
    display:flex; flex-direction:column; justify-content:space-between;
    pointer-events:none;
}
.signal-label-high, .signal-label-low {
    font-size:0.65rem; font-weight:600; letter-spacing:0.5px; text-transform:uppercase;
}
.signal-label-high { color:rgba(34,197,94,0.5); }
.signal-label-low { color:rgba(128,128,128,0.35); }
.chatter-signal-canvas {
    width:100%; height:160px; display:block; border-radius:var(--radius2);
    background:rgba(0,0,0,0.2);
}
body.light-theme .chatter-signal-canvas { background:rgba(240,242,248,0.5); }
.chatter-stats-row {
    display:flex; gap:16px; align-items:stretch; justify-content:center;
}
.chatter-stat-card {
    flex:1; max-width:200px; text-align:center; padding:14px 10px;
    background:var(--glass-bg-light); border:1px solid var(--glass-border-light);
    border-radius:var(--radius2);
}
.chatter-stat-val { font-size:2rem; font-weight:800; color:var(--text3); font-family:var(--font-mono); }
.chatter-stat-val.danger { color:var(--danger); }
.chatter-stat-val.ok { color:var(--green); }
.chatter-stat-label { font-size:0.7rem; color:var(--text2); margin-top:2px; }

/* ============================
   13. 打字测试面板
   ============================ */
.typing-area {
    background:var(--glass-bg-light); border:1px solid var(--glass-border-light);
    border-radius:var(--radius2); padding:20px; margin-top:14px;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.typing-text {
    font-family:var(--font-mono); font-size:1.05rem; line-height:1.8;
    color:var(--text2); min-height:60px; margin-bottom:16px; letter-spacing:0.3px;
}
.typing-text .correct { color:var(--green); }
.typing-text .wrong { color:var(--danger); text-decoration:underline; }
.typing-text .current { border-bottom:2px solid var(--accent); animation:cursorBlink 1s step-end infinite; }
.typing-input {
    width:100%; background:var(--glass-bg-light); border:1px solid var(--glass-border-light);
    border-radius:var(--radius); padding:12px 16px; font-family:var(--font-mono);
    font-size:1rem; color:var(--text); resize:none; outline:none;
    transition:border-color 0.2s; height:80px;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.typing-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(77,201,246,0.15), inset 0 0 8px rgba(77,201,246,0.05); }

/* ============================
   14. 介绍面板
   ============================ */
.feature-cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:12px; margin-top:16px; }
.feature-card {
    background:var(--glass-bg-light); border:1px solid var(--glass-border-light); border-radius:var(--radius3);
    padding:18px; transition:all 0.3s; box-shadow: var(--shadow-glass);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.feature-card:hover { transform:translateY(-3px); border-color:var(--glass-border); box-shadow: var(--shadow-glass-hover), 0 0 20px rgba(77,201,246,0.08); }
.feature-card .icon { font-size:1.8rem; margin-bottom:6px; }
.feature-card h4 { font-size:0.9rem; font-weight:700; color:var(--text3); margin-bottom:4px; }
.feature-card p { font-size:0.72rem; color:var(--text2); line-height:1.5; }
.contact-info {
    margin-top:18px; padding:12px 16px; background:var(--glass-bg-light); border-radius:var(--radius2);
    border:1px solid var(--glass-border-light); text-align:center; font-size:0.75rem; color:var(--text2);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.contact-info strong { color:var(--accent); }

/* ============================
   15. 统计卡片
   ============================ */
.stat-card {
    background:var(--glass-bg-light); border:1px solid var(--glass-border-light);
    border-radius:var(--radius2); padding:14px; text-align:center; transition:all 0.25s;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.stat-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow: var(--shadow-glass-hover), 0 0 16px rgba(77,201,246,0.1); }
.stat-value { font-family:var(--font-mono); font-size:1.4rem; font-weight:800; color:var(--accent); line-height:1.3; }
.stat-label { font-size:0.78rem; color:var(--text3); text-transform:uppercase; letter-spacing:0.5px; margin-top:6px; font-weight:500; }
.latency-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.typing-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px; }

/* ============================
   16. Toast 通知
   ============================ */
.toast-container {
    position:fixed; top:80px; right:20px; z-index:9999;
    display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.toast {
    background:var(--glass-bg-heavy); backdrop-filter:blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
    border:1px solid var(--glass-border); border-left:3px solid var(--accent);
    border-radius:var(--radius2); padding:12px 20px; font-size:0.82rem;
    color:var(--text); box-shadow: var(--shadow-glass-hover);
    animation:toastIn 0.35s ease, toastOut 0.35s ease 2.65s forwards;
    pointer-events:auto; max-width:320px;
}
.toast.success { border-left-color:var(--green); }
.toast.warning { border-left-color:var(--amber); }
.toast.error { border-left-color:var(--danger); }

/* ============================
   17. 底部栏
   ============================ */
.footer {
    position: relative;
    background: var(--glass-bg-heavy); backdrop-filter:blur(var(--glass-blur-light)) saturate(150%);
    -webkit-backdrop-filter:blur(var(--glass-blur-light)) saturate(150%);
    border-top: 1px solid var(--glass-border);
    padding: 14px 24px; font-size: 0.72rem; color: var(--text2);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; white-space: nowrap; overflow-x: auto; flex-wrap: nowrap;
    z-index: 999;
}
.footer .copyright {
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap; flex-shrink: 0;
}
.footer .footer-right { flex-shrink: 0; white-space: nowrap; }
.footer a { color: var(--text2); text-decoration: none; cursor: pointer; }
.footer a:hover { color: var(--accent); text-decoration: none; }

/* ============================
   18. 导航扩展：+按钮、下拉菜单、模态框
   ============================ */
.circle-btn {
    width:32px; height:32px; padding:0!important;
    border-radius:50%!important;
    display:inline-flex!important; align-items:center; justify-content:center;
    transition:transform 0.22s cubic-bezier(0.32,0.72,0,1), background 0.16s, box-shadow 0.22s;
}
.circle-btn:hover {
    transform:translateY(-1px) rotate(90deg);
    box-shadow:0 4px 16px rgba(77,201,246,0.2);
}
.circle-btn.active {
    background:var(--accent)!important; color:#fff;
    transform:rotate(45deg); border-color:var(--accent);
}
.theme-circle-btn {
    width:32px; height:32px; padding:0!important;
    border-radius:50%!important;
    display:inline-flex!important; align-items:center; justify-content:center;
    transition:transform 0.22s cubic-bezier(0.32,0.72,0,1), background 0.16s, box-shadow 0.22s;
}
.theme-circle-btn:hover {
    transform:translateY(-1px);
    box-shadow:0 4px 16px rgba(77,201,246,0.2);
}
.appreciate-btn {
    background:#1a1a2e!important;
    color:#fff!important; border:1px solid rgba(255,255,255,0.1)!important;
    box-shadow:0 2px 12px rgba(0,0,0,0.3);
    display:inline-flex!important; align-items:center; gap:5px;
}
.appreciate-btn:hover {
    background:#252540!important;
    box-shadow:0 4px 20px rgba(0,0,0,0.4);
    transform:translateY(-1px);
}
.appreciate-btn svg { flex-shrink:0; }
.nav-dropdown-wrap { position:relative; display:inline-flex; }
.dropdown-menu {
    position:absolute; top:calc(100% + 8px); right:0; min-width:160px;
    background:var(--glass-bg-heavy);
    backdrop-filter:blur(40px) saturate(220%) brightness(1.05);
    -webkit-backdrop-filter:blur(40px) saturate(220%) brightness(1.05);
    border:1px solid var(--glass-border); border-radius:var(--radius3);
    box-shadow:
        0 12px 48px rgba(0,0,0,0.4),
        0 0 0 1px rgba(255,255,255,0.05),
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(255,255,255,0.02);
    padding:6px; z-index:1100;
    opacity:0; visibility:hidden;
    transform:translateY(-6px) scale(0.96);
    transition:opacity 0.22s ease, transform 0.28s cubic-bezier(0.32,0.72,0,1), visibility 0.22s;
}
.dropdown-menu::before {
    content:'';
    position:absolute; top:0; left:0; right:0; height:50%;
    background:linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 100%);
    border-radius:var(--radius3) var(--radius3) 0 0;
    pointer-events:none;
}
.dropdown-menu.open {
    opacity:1; visibility:visible;
    transform:translateY(0) scale(1);
}
.dropdown-item {
    display:flex; align-items:center; gap:10px;
    width:100%; padding:9px 14px; border:none; background:none;
    color:var(--text); font-size:0.78rem; font-weight:500;
    cursor:pointer; border-radius:8px; transition:all 0.2s;
    white-space:nowrap; font-family:var(--font-sans);
    position:relative;
}
.dropdown-item:hover {
    background:var(--glass-bg);
    backdrop-filter:blur(8px) saturate(150%);
    -webkit-backdrop-filter:blur(8px) saturate(150%);
}
.dropdown-icon { flex-shrink:0; opacity:0.7; transition:opacity 0.2s, transform 0.2s; }
.dropdown-item:hover .dropdown-icon { opacity:1; transform:scale(1.1); }
.modal-overlay {
    position:fixed; inset:0;
    background:rgba(0,0,0,0.55);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    z-index:5000; display:flex; align-items:center; justify-content:center;
    padding:20px;
    opacity:0; visibility:hidden;
    transition:opacity 0.3s ease, visibility 0.3s;
}
.modal-overlay.open { opacity:1; visibility:visible; }
.modal-box {
    background:var(--glass-bg-heavy);
    backdrop-filter:blur(var(--glass-blur-heavy)) saturate(200%);
    -webkit-backdrop-filter:blur(var(--glass-blur-heavy)) saturate(200%);
    border:1px solid var(--glass-border); border-radius:20px;
    box-shadow:0 16px 48px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.03);
    max-width:500px; width:100%; max-height:85vh; overflow-y:auto;
    position:relative;
    transform:translateY(28px) scale(0.96); opacity:0;
    transition:transform 0.4s cubic-bezier(0.32,0.72,0,1), opacity 0.3s ease;
}
.modal-overlay.open .modal-box { transform:translateY(0) scale(1); opacity:1; }
.modal-close {
    position:absolute; top:14px; right:14px;
    width:32px; height:32px; border-radius:50%;
    border:1px solid var(--glass-border-light);
    background:var(--glass-bg-light); color:var(--text2);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background 0.15s, color 0.15s; z-index:1;
}
.modal-close:hover { background:var(--glass-bg); color:var(--text); }
.modal-header {
    display:flex; align-items:center; gap:12px;
    padding:24px 24px 0;
}
.modal-header-icon { stroke:var(--accent); flex-shrink:0; }
.modal-title {
    font-size:1.15rem; font-weight:700; color:var(--text3); margin:0;
}
.modal-body { padding:16px 24px 24px; }
.modal-desc {
    font-size:0.85rem; color:var(--text2); line-height:1.65; margin-bottom:18px;
}
.modal-section { margin-bottom:16px; }
.modal-section-title {
    font-size:0.88rem; font-weight:700; color:var(--text3);
    margin:0 0 8px; display:flex; align-items:center; gap:6px;
}
.modal-section-title .section-dot {
    width:6px; height:6px; border-radius:50%; background:var(--accent);
}
.modal-contact { font-size:0.82rem; color:var(--text2); line-height:1.6; }
.modal-contact a { color:var(--accent); text-decoration:none; }
.modal-contact a:hover { text-decoration:underline; }
.modal-email-box {
    display:inline-flex; align-items:center; gap:8px;
    background:var(--glass-bg-light); border:1px solid var(--glass-border-light);
    border-radius:8px; padding:8px 14px; margin-top:8px;
    font-size:0.82rem; color:var(--accent); font-weight:600;
    font-family:var(--font-mono);
}
.modal-email-box a { color:inherit; text-decoration:none; }
.modal-email-box a:hover { text-decoration:underline; }
body:not(.light-theme) .modal-email-box { color:#fff; }
.faq-item {
    padding:12px 0; border-bottom:1px solid var(--glass-border-light);
}
.faq-item:last-child { border-bottom:none; }
.faq-q {
    font-size:0.82rem; font-weight:600; color:var(--text3); margin-bottom:4px;
}
.faq-a {
    font-size:0.78rem; color:var(--text2); line-height:1.55;
}
.qr-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0;
}
.qr-card {
    background:var(--glass-bg-light); border:1px solid var(--glass-border-light);
    border-radius:var(--radius2); padding:16px; text-align:center;
    transition:all 0.25s;
}
.qr-card:hover { border-color:var(--glass-border); transform:translateY(-2px); }
.qr-label {
    font-size:0.88rem; font-weight:700; color:var(--text3); margin-bottom:10px;
    display:flex; align-items:center; justify-content:center; gap:6px;
    line-height:1.4;
}
.qr-icon { flex-shrink:0; }
/* 微信支付 - 绿色主题 */
.qr-wechat {
    background:linear-gradient(135deg, rgba(7,193,96,0.12) 0%, rgba(6,168,82,0.08) 100%);
    border-color:rgba(7,193,96,0.25);
}
.qr-wechat:hover {
    border-color:rgba(7,193,96,0.4);
    box-shadow:0 4px 20px rgba(7,193,96,0.2);
}
.qr-wechat .qr-label { 
    color:#048d48; 
    text-shadow:0 1px 2px rgba(0,0,0,0.3);
}
.qr-wechat .qr-icon { color:#048d48; }
.qr-wrap-wechat {
    background:linear-gradient(135deg, #f5f5f5 0%, #e8f5e8 100%);
    border:2px solid rgba(7,193,96,0.2);
}
/* 支付宝 - 蓝色主题 */
.qr-alipay {
    background:linear-gradient(135deg, rgba(19,124,213,0.12) 0%, rgba(16,100,180,0.08) 100%);
    border-color:rgba(19,124,213,0.25);
}
.qr-alipay:hover {
    border-color:rgba(19,124,213,0.4);
    box-shadow:0 4px 20px rgba(19,124,213,0.2);
}
.qr-alipay .qr-label { 
    color:#1266a8; 
    text-shadow:0 1px 2px rgba(0,0,0,0.3);
}
.qr-alipay .qr-icon { color:#1266a8; }
.qr-wrap-alipay {
    background:linear-gradient(135deg, #f5f5f5 0%, #e8f0f8 100%);
    border:2px solid rgba(19,124,213,0.2);
}
/* 浅色主题下的支付卡片 */
body.light-theme .qr-wechat { background:linear-gradient(135deg, rgba(7,193,96,0.08) 0%, rgba(6,168,82,0.05) 100%); }
body.light-theme .qr-alipay { background:linear-gradient(135deg, rgba(19,124,213,0.08) 0%, rgba(16,100,180,0.05) 100%); }
body.light-theme .qr-wechat .qr-label { color:#06a050; text-shadow:none; }
body.light-theme .qr-alipay .qr-label { color:#1565c0; text-shadow:none; }
.qr-image-wrap {
    width:150px; height:150px; margin:0 auto;
    background:#fff; border-radius:8px; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
}
.qr-image { width:100%; height:100%; object-fit:contain; }
.qr-placeholder {
    width:100%; height:100%; color:#999; font-size:0.72rem;
    display:flex; align-items:center; justify-content:center; text-align:center;
    padding:8px;
}
.qr-sub {
    font-size:0.72rem; color:var(--text2); margin-top:8px; line-height:1.4;
}
.modal-footer-btns {
    display:flex; gap:10px; justify-content:center; margin-top:12px;
}
.modal-action-btn {
    padding:8px 20px; border-radius:20px; font-size:0.78rem; font-weight:600;
    cursor:pointer; border:1px solid var(--glass-border-light);
    transition:all 0.16s; font-family:var(--font-sans);
}
.modal-action-btn.primary {
    background:var(--accent); color:#fff; border-color:var(--accent);
}
.modal-action-btn.primary:hover { box-shadow:0 4px 16px rgba(77,201,246,0.3); }
.modal-action-btn.secondary { background:var(--glass-bg-light); color:var(--text); }
.modal-action-btn.secondary:hover { background:var(--glass-bg); }
.modal-note {
    font-size:0.72rem; color:var(--text2); text-align:center;
    margin-top:12px; opacity:0.7;
}

/* ============================
   19. 动画 Keyframes
   ============================ */
@keyframes fadeSlideIn { 0%{ opacity:0; transform:translateY(12px); } 100%{ opacity:1; transform:translateY(0); } }
@keyframes panelEnter {
    0% { opacity:0; transform:translateY(28px) scale(0.96); }
    60% { opacity:1; }
    100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes panelLeave {
    0% { opacity:1; transform:translateY(0) scale(1); }
    100% { opacity:0; transform:translateY(-10px) scale(0.98); }
}
@keyframes tagPop { 0%{ transform:scale(0.6); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
@keyframes pulseDot { 0%,100%{ box-shadow:0 0 8px currentColor; } 50%{ box-shadow:0 0 22px currentColor,0 0 36px currentColor; } }
@keyframes floatBlob1 { 0%,100%{ transform:translate(0,0) scale(1); } 33%{ transform:translate(5%,8%) scale(1.05); } 66%{ transform:translate(-3%,-5%) scale(0.95); } }
@keyframes floatBlob2 { 0%,100%{ transform:translate(0,0) scale(1); } 33%{ transform:translate(-6%,-4%) scale(1.03); } 66%{ transform:translate(4%,6%) scale(0.97); } }
@keyframes floatBlob3 { 0%,100%{ transform:translate(0,0) scale(1); } 33%{ transform:translate(3%,-6%) scale(1.04); } 66%{ transform:translate(-4%,5%) scale(0.96); } }
@keyframes heroFadeIn { 0%{ opacity:0; transform:translateY(20px); } 100%{ opacity:1; transform:translateY(0); } }
@keyframes glowPulse { 0%,100%{ opacity:0.7; } 50%{ opacity:1; } }
@keyframes valFlash { 0%{ transform:scale(1.15); color:#fff; } 100%{ transform:scale(1); } }
@keyframes toastIn { 0%{ opacity:0; transform:translateX(40px); } 100%{ opacity:1; transform:translateX(0); } }
@keyframes toastOut { 0%{ opacity:1; transform:translateX(0); } 100%{ opacity:0; transform:translateX(40px); } }
@keyframes cursorBlink { 50%{ border-color:transparent; } }
@keyframes statCardIn { 0%{ opacity:0; transform:translateY(10px); } 100%{ opacity:1; transform:translateY(0); } }

.test-panel.active .stat-card:nth-child(1) { animation:statCardIn 0.4s ease 0.1s both; }
.test-panel.active .stat-card:nth-child(2) { animation:statCardIn 0.4s ease 0.15s both; }
.test-panel.active .stat-card:nth-child(3) { animation:statCardIn 0.4s ease 0.2s both; }
.test-panel.active .stat-card:nth-child(4) { animation:statCardIn 0.4s ease 0.25s both; }

/* ============================
   19. 响应式 - 超大屏
   ============================ */
@media (min-width: 1400px) {
    :root { --u:44px; --gap:5px; }
    .main-content { padding:24px 24px 80px; }
}

/* ============================
   20. 响应式 - 平板
   ============================ */
@media (max-width:1049px) {
    :root { --u:36px; --gap:3.5px; --font:11px; --font-sm:9px; --font-arrow:17px; }
    .hero-title { font-size:1.6rem; }
    .metric-big { font-size:3rem; }
    .dashboard-panel { padding:18px 16px; }
    .latency-stats { grid-template-columns:repeat(2,1fr); }
    .typing-stats { grid-template-columns:repeat(2,1fr); }
    .cps-metric-card .metric-big, .conflict-metric-card .metric-big { font-size:2.2rem; }
    .cps-config-card { min-width:160px; }
}

/* ============================
   21. 响应式 - 手机
   ============================ */
@media (max-width:819px) {
    :root { --u:28px; --gap:2.5px; --font:9px; --font-sm:7px; --font-arrow:14px; }
    .hero-title { font-size:1.3rem; }
    .navbar { padding:6px 8px; gap:3px; }
    .nav-btn { padding:5px 8px; font-size:0.6rem; }
    .metric-big { font-size:2.2rem; }
    .dashboard-panel { padding:14px 12px; }
    .data-table { font-size:0.75rem; }
    .data-table thead th { font-size:0.68rem; }
    .data-table thead th, .data-table tbody td { padding:6px 8px; }
    .feature-cards { grid-template-columns:repeat(2,1fr); }
    .quick-hint { display:none; }
    .cps-metric-card .metric-big, .conflict-metric-card .metric-big { font-size:1.8rem; }
    .cps-metrics-grid, .conflict-metrics-grid { gap:10px; }
    .cps-config-row { flex-direction:column; align-items:stretch; }
    .cps-config-card { max-width:100%; }
    .chatter-signal-section { padding:12px 8px; }
    .chatter-stats-row { gap:8px; }
    .chatter-stat-card { padding:10px 6px; }
    .chatter-stat-val { font-size:1.5rem; }
}
@media (max-width:679px) {
    .footer { font-size:0.6rem; padding:8px 12px; gap:6px; }
    .ctrl-btn, .resource-link-btn { padding:5px 10px; font-size:0.6rem; }
    .nav-btn { padding:5px 10px; font-size:0.65rem; }
    .metric-row { gap:20px; }
    .stat-card { padding:10px; }
    .stat-value { font-size:1.1rem; }
    .stat-label { font-size:0.68rem; }
    .cps-metric-card { padding:14px 10px; }
    .conflict-metric-card { padding:14px 10px; }
    .chatter-controls-row { gap:8px; }
    .circle-btn { width:28px; height:28px; }
    .appreciate-btn { padding:5px 10px!important; font-size:0.6rem!important; }
    .dropdown-menu { min-width:140px; }
    .modal-box { max-width:95vw; }
    .qr-image-wrap { width:120px; height:120px; }
}

/* ============================
   22. 响应式 - 小屏手机
   ============================ */
@media (max-width:479px) {
    :root { --u:22px; --gap:2px; --font:7px; --font-sm:6px; --font-arrow:11px; }
    .hero-title { font-size:1.1rem; }
    .hero-subtitle { font-size:0.85rem; }
    .navbar { flex-wrap:wrap; }
    .right-nav-group { margin-left:0; margin-top:6px; }
    .keyboard-section { padding:8px 6px 6px; }
    .feature-cards { grid-template-columns:1fr; }
    .latency-stats { grid-template-columns:repeat(2,1fr); gap:8px; }
    .typing-stats { grid-template-columns:repeat(2,1fr); gap:8px; }
    .cps-mode-selector { flex-wrap:wrap; }
    .toast-container { right:10px; left:10px; }
    .toast { max-width:100%; }
    .cps-metrics-grid, .conflict-metrics-grid { grid-template-columns:1fr 1fr; gap:8px; }
    .cps-metric-card .metric-big, .conflict-metric-card .metric-big { font-size:1.5rem; }
    .conflict-guide { font-size:0.68rem; padding:10px 12px; }
    .chatter-key-badge { font-size:0.8rem; padding:4px 10px; }
    .qr-grid { grid-template-columns:1fr; }
    .modal-body { padding:12px 16px 20px; }
    .modal-header { padding:18px 16px 0; }
}

/* ============================
   23. 自定义右键菜单
   ============================ */
.context-menu {
    position: fixed; z-index: 9999;
    min-width: 160px; padding: 6px;
    background: var(--glass-bg-heavy);
    backdrop-filter: blur(40px) saturate(220%) brightness(1.05);
    -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(1.05);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius3);
    box-shadow:
        0 12px 48px rgba(0,0,0,0.45),
        0 0 0 1px rgba(255,255,255,0.05),
        inset 0 1px 0 rgba(255,255,255,0.08);
    opacity: 0; visibility: hidden;
    transform: scale(0.92) translateY(-8px);
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.32,0.72,0,1), visibility 0.2s;
}
.context-menu::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 45%;
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 100%);
    border-radius: var(--radius3) var(--radius3) 0 0;
    pointer-events: none;
}
.context-menu.open {
    opacity: 1; visibility: visible;
    transform: scale(1) translateY(0);
}
.context-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 8px;
    font-size: 0.85rem; font-weight: 500; color: var(--text);
    cursor: pointer; transition: all 0.18s;
    font-family: var(--font-sans);
}
.context-menu-item:hover {
    background: var(--glass-bg);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
}
.ctx-icon {
    flex-shrink: 0; opacity: 0.75;
    transition: opacity 0.18s, transform 0.2s;
}
.context-menu-item:hover .ctx-icon {
    opacity: 1; transform: scale(1.12);
}
.context-menu-divider {
    height: 1px; margin: 6px 8px;
    background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
}
.context-menu-item.ctx-appreciate {
    color: var(--danger);
}
.context-menu-item.ctx-appreciate:hover {
    background: rgba(246,77,110,0.12);
}
.context-menu-item.ctx-appreciate .ctx-icon {
    color: var(--danger);
}
/* 浅色主题下的右键菜单 */
body.light-theme .context-menu {
    box-shadow:
        0 12px 48px rgba(0,0,0,0.15),
        0 0 0 1px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,0.5);
}
body.light-theme .context-menu::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 100%);
}

/* 移动端竖屏提示 */
@media (max-width:819px) and (orientation:portrait) {
    .keyboard-wrap-outer .mobile-hint {
        display:block; text-align:center; font-size:0.72rem;
        color:var(--text2); padding:6px; margin-bottom:6px;
    }
}
@media (min-width:820px) {
    .keyboard-wrap-outer .mobile-hint { display:none; }
}