:root {
  color-scheme: dark;
  --bg: #090c12;
  --panel: #11161f;
  --panel-2: #151c27;
  --line: #263040;
  --text: #f3f6fb;
  --muted: #8994a5;
  --accent: #ffcf4a;
  --accent-2: #f4a938;
  --accent-rgb: 255, 207, 74;
  --green: #61d69b;
  --red: #ff747d;
}

* { box-sizing: border-box; }
/* 网站风格滚动条（全局统一，替代系统默认样式；细变体见 .thin-scrollbar） */
* { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), .45) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(var(--accent-rgb), .38); }
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), .68); }
.thin-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb),.45) transparent; }
.thin-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.thin-scrollbar::-webkit-scrollbar-track { background: transparent; }
.thin-scrollbar::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(var(--accent-rgb),.38); }
.thin-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb),.68); }
html {
  scrollbar-gutter: stable;
  forced-color-adjust: none;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 80% 5%, rgba(255, 207, 74, .07), transparent 25rem),
    radial-gradient(circle at 10% 40%, rgba(77, 127, 255, .05), transparent 28rem),
    var(--bg);
  color: var(--text);
  font-family: "Nunito", "Microsoft YaHei", sans-serif;
}
button, textarea { font: inherit; }
button { color: inherit; }
.app-shell { width: min(1120px, calc(100% - 40px)); margin: auto; padding-bottom: 32px; }
.topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.07); }
.brand { display: flex; gap: 12px; align-items: center; color: white; text-decoration: none; font-weight: 800; font-size: 18px; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; background: var(--accent); color: #17130a; border-radius: 9px; box-shadow: 0 0 24px rgba(255,207,74,.18); }
.streak { background: #151a22; border: 1px solid var(--line); color: var(--muted); padding: 9px 14px; border-radius: 999px; font-size: 13px; cursor: pointer; }
.streak:hover { border-color: #455165; color: white; }
.streak span { color: var(--accent); margin-right: 6px; }
.streak strong { color: white; }
.user-tools { display: flex; align-items: center; gap: 8px; }
.leaderboard-link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: #151a22; color: #e8edf5; text-decoration: none; font-size: 12px; font-weight: 800; }
.leaderboard-link span { color: var(--accent); font-size: 10px; }
.leaderboard-link:hover { border-color: var(--accent); color: white; }
.user-button, .logout-button, .menu-button { border: 1px solid var(--line); background: #151a22; border-radius: 999px; padding: 9px 13px; cursor: pointer; font-size: 12px; }
.user-button span { color: var(--green); margin-right: 5px; }
.user-button i { margin-left: 6px; color: var(--muted); font-style: normal; }
.user-button:hover, .user-button[aria-expanded="true"] { border-color: var(--accent); }
.logout-button { color: var(--muted); }
.account-wrap { position: relative; }
.account-dropdown { position: absolute; z-index: 21; top: calc(100% + 10px); right: 0; width: 225px; padding: 7px; border: 1px solid #303b4c; border-radius: 13px; background: #151c26; box-shadow: 0 18px 55px rgba(0,0,0,.55); opacity: 0; visibility: hidden; transform: translateY(-7px); transition: .16s; }
.account-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); }
.account-dropdown button { width: 100%; display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: center; padding: 10px; border: 0; border-radius: 9px; background: transparent; color: #dfe5ed; text-align: left; cursor: pointer; }
.account-dropdown button:hover { background: #202936; }
.account-dropdown button > span:first-child { color: var(--accent); font-size: 15px; text-align: center; }
.account-dropdown b, .account-dropdown small { display: block; }
.account-dropdown b { font-size: 12px; }
.account-dropdown small { margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 500; }
.menu-wrap { position: relative; }
.menu-button { color: #e8edf5; }
.menu-button span { color: var(--accent); margin-right: 5px; }
.menu-button:hover, .menu-button.open { border-color: var(--accent); }
.menu-dropdown { position: absolute; z-index: 20; top: calc(100% + 10px); right: 0; width: 250px; padding: 7px; border: 1px solid #303b4c; border-radius: 13px; background: #151c26; box-shadow: 0 18px 55px rgba(0,0,0,.55); opacity: 0; visibility: hidden; transform: translateY(-7px); transition: .16s; }
.menu-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-item { width: 100%; display: grid; grid-template-columns: 30px 1fr; gap: 9px; align-items: center; padding: 11px; border: 0; border-radius: 9px; background: transparent; color: #dfe5ed; text-align: left; cursor: pointer; }
.menu-item:hover { background: #202936; }
.menu-item:disabled, .menu-item.feature-locked { cursor: not-allowed; opacity: .48; }
.menu-item:disabled:hover, .menu-item.feature-locked:hover { background: transparent; }
.menu-item > span:first-child { color: var(--accent); font-size: 15px; text-align: center; }
.menu-svg-icon { width: 17px; height: 17px; display: inline-block; vertical-align: middle; fill: currentColor; }
.menu-item b, .menu-item small { display: block; }
.menu-item b { font-size: 12px; }
.menu-item small { margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 500; }
.menu-item strong { color: white; }
#roundCount { color: var(--accent); }
body.guest-mode .theme-setting { margin-top: 0; border-top: 0; }
body.guest-mode .app-shell button:disabled { cursor: not-allowed; opacity: .45; }
.theme-setting { margin-top: 5px; padding: 10px 11px 8px; border-top: 1px solid var(--line); }
.theme-heading { display: grid; grid-template-columns: 30px 1fr; gap: 9px; align-items: center; color: #dfe5ed; }
.theme-heading > span:first-child { color: var(--accent); text-align: center; font-size: 16px; }
.theme-heading b, .theme-heading small { display: block; }
.theme-heading b { font-size: 12px; }
.theme-heading small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.theme-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 10px; }
.theme-options button { padding: 7px 3px; border: 1px solid var(--line); border-radius: 7px; background: #111720; color: var(--muted); cursor: pointer; font-size: 10px; }
.theme-options button:hover { color: white; }
.theme-options button.active { color: #171209; border-color: var(--accent); background: var(--accent); font-weight: 800; }
.accent-heading { margin-top: 12px; color: var(--muted); font-size: 10px; font-weight: 700; }
.accent-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 7px; }
.accent-options button { padding: 6px 1px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; font-size: 9px; }
.accent-options button i { display: block; width: 15px; height: 15px; margin: 0 auto 4px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 0 0 1px rgba(0,0,0,.15); }
.accent-options button[data-accent-choice="blue"] i { background: #5b8cff; }
.accent-options button[data-accent-choice="green"] i { background: #42d392; }
.accent-options button[data-accent-choice="yellow"] i { background: #ffcf4a; }
.accent-options button[data-accent-choice="orange"] i { background: #ff9557; }
.accent-options button[data-accent-choice="purple"] i { background: #a879ff; }
.accent-options button:hover { background: rgba(255,255,255,.05); color: var(--text); }
.accent-options button.active { color: var(--text); border-color: rgba(var(--accent-rgb),.55); background: rgba(var(--accent-rgb),.12); }
body[data-accent="blue"] { --accent:#5b8cff; --accent-2:#3f70e8; --accent-rgb:91,140,255; }
body[data-accent="green"] { --accent:#08704c; --accent-2:#045239; --accent-rgb:8,112,76; }
body[data-accent="yellow"] { --accent:#ffcf4a; --accent-2:#f4a938; --accent-rgb:255,207,74; }
body[data-accent="orange"] { --accent:#ff9557; --accent-2:#e9682f; --accent-rgb:255,149,87; }
body[data-accent="purple"] { --accent:#a879ff; --accent-2:#7d55e7; --accent-rgb:168,121,255; }
body[data-accent] .brand-mark { box-shadow: 0 0 24px rgba(var(--accent-rgb),.2); }
body[data-accent] .level.active { color: var(--accent); border-color: rgba(var(--accent-rgb),.55); background: rgba(var(--accent-rgb),.1); }
body[data-accent] .key.next { box-shadow: 0 4px 18px rgba(var(--accent-rgb),.24); }
body[data-accent] .switch input:checked + .switch-track { background: rgba(var(--accent-rgb),.24); }
body[data-accent] .switch input:checked + .switch-track::after { background: var(--accent); }

body[data-resolved-theme="light"] {
  color-scheme: light;
  --bg: #eef2f7; --panel: #ffffff; --panel-2: #f5f7fa; --line: #d5dce6;
  --text: #18202b; --muted: #687487; --green: #168b5b; --red: #d93f51;
  background: radial-gradient(circle at 80% 5%, rgba(244,169,56,.11), transparent 25rem), #eef2f7;
}
body[data-resolved-theme="light"] .topbar { border-color: #d8dee7; }
body[data-resolved-theme="light"] .brand { color: #17202c; }
body[data-resolved-theme="light"] h1 { color: #182333; }
body[data-resolved-theme="light"] h1 span { color: #4c5b70; }
body[data-resolved-theme="light"] .hero-copy { color: #59677a; }
body[data-resolved-theme="light"] .eyebrow { color: var(--accent-2); }
body[data-resolved-theme="light"] .user-button,
body[data-resolved-theme="light"] .menu-button,
body[data-resolved-theme="light"] .streak,
body[data-resolved-theme="light"] .leaderboard-link { color: #344053; background: #fff; }
body[data-resolved-theme="light"] .menu-dropdown,
body[data-resolved-theme="light"] .account-dropdown { border-color: #ccd4df; background: #fff; box-shadow: 0 18px 45px rgba(42,54,72,.16); }
body[data-resolved-theme="light"] .menu-item,
body[data-resolved-theme="light"] .account-dropdown button,
body[data-resolved-theme="light"] .theme-heading { color: #283445; }
body[data-resolved-theme="light"] .menu-item:hover,
body[data-resolved-theme="light"] .account-dropdown button:hover { background: #f0f3f7; }
body[data-resolved-theme="light"] .theme-options button { background: #f4f6f9; }
body[data-resolved-theme="light"] .level-panel,
body[data-resolved-theme="light"] .trainer-card { background: #fff; box-shadow: 0 20px 55px rgba(50,62,80,.09); }
body[data-resolved-theme="light"] .level-title span { color: #1e2a3a; }
body[data-resolved-theme="light"] .level-title small { color: #59687c; }
body[data-resolved-theme="light"] .level { color: #425168; border-color: #d8dee7; background: #f8fafc; }
body[data-resolved-theme="light"] .level:hover { color: #1e2a3a; border-color: #aeb9c8; background: #eef2f6; }
body[data-resolved-theme="light"] .level b { background: #dfe5ed; color: #344359; box-shadow: inset 0 0 0 1px #cdd5e0; }
body[data-resolved-theme="light"][data-accent] .level.active { color: var(--accent-2); border-color: rgba(var(--accent-rgb),.75); background: rgba(var(--accent-rgb),.16); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.1); }
body[data-resolved-theme="light"][data-accent] .level.active b { color: #15191f; background: var(--accent); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
body[data-resolved-theme="light"] .level.locked { color: #718096; opacity: .58; background: #f1f4f7; }
body[data-resolved-theme="light"] .level.locked:hover { color: #718096; border-color: #d8dee7; background: #f1f4f7; }
body[data-resolved-theme="light"] .stats strong { color: #1c2735; }
body[data-resolved-theme="light"] .action-row { background: #f7f9fb; }
body[data-resolved-theme="light"] .new-button { color: #354155; background: #eef2f6; }
body[data-resolved-theme="light"] .new-button.secondary-action { color: #59677b; background: transparent; }
body[data-resolved-theme="light"] .keyboard-toolbar strong { color: #263346; }
body[data-resolved-theme="light"] .keyboard-toolbar small,
body[data-resolved-theme="light"] .switch-label { color: #536176; }
body[data-resolved-theme="light"] .switch-track { background: #dce3ec; box-shadow: inset 0 0 0 1px #cbd4df; }
body[data-resolved-theme="light"] .switch-track::after { background: #8794a6; }
body[data-resolved-theme="light"] .switch input:checked + .switch-track { background: rgba(var(--accent-rgb),.2); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.38); }
body[data-resolved-theme="light"] .switch input:checked + .switch-track::after { background: var(--accent-2); }
body[data-resolved-theme="light"] .key { color: #4f5c6e; border-color: #c9d1dc; background: linear-gradient(#fff,#e9edf3); }
body[data-resolved-theme="light"] .key.next { color: #171007; background: var(--accent); border-color: var(--accent-2); }
body[data-resolved-theme="light"] .auth-card,
body[data-resolved-theme="light"] .celebration-card,
body[data-resolved-theme="light"] .history-card,
body[data-resolved-theme="light"] .speed-card,
body[data-resolved-theme="light"] .about-card { color: #1b2634; border-color: #d2d9e3; background: #fff; }
body[data-resolved-theme="light"] .auth-screen,
body[data-resolved-theme="light"] .celebration,
body[data-resolved-theme="light"] .history-modal,
body[data-resolved-theme="light"] .speed-modal,
body[data-resolved-theme="light"] .about-modal { background: rgba(226,232,240,.88); }
body[data-resolved-theme="light"] .celebration.guest-demo { background: transparent; }
body[data-resolved-theme="light"] .auth-card input,
body[data-resolved-theme="light"] .speed-article { color: #202b39; background: #f6f8fa; }
body[data-resolved-theme="light"] .history-item { border-color: #d8dee7; background: #f5f7fa; }
body[data-resolved-theme="light"] .history-metrics strong { color: #1b2634; }
body[data-resolved-theme="light"] .history-retry { border-color: #c9d1dc; background: #eef2f6; color: #354155; }
body[data-resolved-theme="light"] .history-retry:hover { border-color: var(--accent-2); color: var(--accent-2); background: rgba(var(--accent-rgb),.08); }
body[data-resolved-theme="light"] .history-retry:disabled { opacity: .45; }
body[data-resolved-theme="light"] .history-summary { background: #f0f3f7; color: #59677a; }
body[data-resolved-theme="light"] .history-header button { border-color: #d2d9e3; background: #f4f6f9; color: #59677a; }
body[data-resolved-theme="light"] .history-content p { color: #344154; }
body[data-resolved-theme="light"] .sentence .upcoming { color: #78869a; }
body[data-resolved-theme="light"] .typing-guide,
body[data-resolved-theme="light"] .action-row p { color: #5e6d81; }
body[data-resolved-theme="light"] .progress-track { background: #dde3ec; }
body[data-resolved-theme="light"] .speed-header button,
body[data-resolved-theme="light"] .speed-footer button { border-color: #d2d9e3; background: #f4f6f9; color: #354155; }
body[data-resolved-theme="light"] .speed-header button:hover,
body[data-resolved-theme="light"] .speed-footer button:hover { border-color: var(--accent-2); color: var(--accent-2); }
body[data-resolved-theme="light"] .speed-progress { background: #dde3ec; }
body[data-resolved-theme="light"] #speedArticleText .upcoming { color: #9aa4b4; }
body[data-resolved-theme="light"] .celebration button.secondary-button { color: #354155; background: #eef2f6; border-color: #d2d9e3; }
body[data-resolved-theme="light"] .celebration button.secondary-button:hover { border-color: var(--accent-2); color: var(--accent-2); }
body[data-resolved-theme="light"] .auth-card label { color: #536176; }
body[data-resolved-theme="light"] .auth-card input { border-color: #d2d9e3; background: #f6f8fa; color: #1b2634; }
body[data-resolved-theme="light"] .auth-card input:focus { border-color: var(--accent-2); }
body[data-resolved-theme="light"] .auth-switch { color: #59677a; }
body[data-resolved-theme="light"] .password-modal { background: rgba(226,232,240,.86); }
body[data-resolved-theme="light"] .admin-password-modal { background: rgba(226,232,240,.84); }
body[data-resolved-theme="light"] .rating-star.empty { color: #bcc5d2; }
body[data-resolved-theme="light"] .rating-star.half { color: #bcc5d2; }
.hero { display: flex; align-items: end; justify-content: space-between; padding: 44px 6px 30px; }
.eyebrow { color: var(--accent); font-size: 11px; letter-spacing: .22em; font-weight: 800; margin: 0 0 12px; }
h1 { margin: 0; font-size: clamp(32px, 4vw, 50px); line-height: 1.12; letter-spacing: -.03em; }
h1 span { color: #aab4c2; }
.hero-copy { margin: 0 0 6px; color: var(--muted); line-height: 1.8; font-size: 14px; text-align: right; }
.level-panel { display: flex; align-items: center; gap: 30px; background: rgba(17,22,31,.92); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; }
.level-title { width: 140px; display: flex; flex-direction: column; }
.level-title span { font-weight: 800; }
.level-title small { color: var(--muted); margin-top: 3px; white-space: nowrap; }
.levels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; flex: 1; }
.level { min-height: 58px; border: 1px solid transparent; border-radius: 11px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--muted); transition: .2s ease; }
.level b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #202734; color: #aeb8c6; }
.level:hover { background: #19202b; color: white; }
.level.active { background: rgba(255,207,74,.09); border-color: rgba(255,207,74,.4); color: var(--accent); }
.level.active b { background: var(--accent); color: #151109; }
.level.locked { opacity: .42; cursor: not-allowed; }
.level.locked:hover { background: transparent; color: var(--muted); }
.level.locked b::after { content: "🔒"; position: absolute; margin: -34px 0 0 34px; font-size: 10px; filter: grayscale(1); }
.level.locked b { position: relative; }
.trainer-card { margin-top: 18px; background: linear-gradient(145deg, #141a24, #0f141c); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.25); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.stats > div { display: flex; min-width: 0; align-items: baseline; justify-content: center; gap: 7px; padding: 15px; border-right: 1px solid var(--line); }
.stats > div:last-child { border: 0; }
.stats span { color: var(--muted); font-size: 12px; margin-right: 4px; }
.stats strong { font-size: 21px; }
.stats small { color: var(--muted); font-size: 10px; }
.progress-track { height: 3px; background: #222936; }
.progress-track span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .15s; }
.sentence-wrap { position: relative; padding: 30px 32px 22px; cursor: text; outline: none; }
.sentence { min-height: 76px; margin-bottom: 22px; font-size: clamp(22px, 3vw, 32px); line-height: 1.5; letter-spacing: .035em; font-weight: 700; word-break: break-word; }
.sentence .done { color: var(--green); }
.sentence .wrong { color: var(--red); background: rgba(255,116,125,.12); border-radius: 3px; }
.sentence .current { color: var(--accent); border-bottom: 3px solid var(--accent); animation: typing-cursor-blink 1s steps(1, end) infinite; }
@keyframes typing-cursor-blink {
  0%, 49.999% { border-bottom-color: var(--accent); }
  50%, 100% { border-bottom-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .sentence .current { animation: none; }
}
.sentence .upcoming { color: #697484; }
.typing-guide { margin: 0; color: #657083; font-size: 16px; text-align: center; }
.typing-guide span { color: var(--accent); margin-right: 6px; }
.capture-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; left: 50%; bottom: 0; resize: none; padding: 0; border: 0; }
.action-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px 13px 32px; background: rgba(6,9,13,.35); border-top: 1px solid var(--line); }
.action-row p { color: var(--muted); font-size: 12px; margin: 0; }
.action-row p span { color: var(--accent); font-size: 9px; margin-right: 7px; }
.new-button { border: 1px solid #343e50; background: #1b2330; padding: 9px 15px; border-radius: 9px; cursor: pointer; font-weight: 700; font-size: 13px; }
.new-button:hover { border-color: var(--accent); color: var(--accent); }
.practice-actions { display: flex; gap: 8px; }
.new-button.secondary-action { background: transparent; color: #a8b2c0; }
.new-button .btn-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 1.1em; }
.new-button .btn-icon.is-shortcut {
  min-width: 1.3em;
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(var(--accent-rgb), .18);
  color: var(--accent);
  font-weight: 800;
}
.keyboard-section { position: relative; width: 100%; margin: 23px auto 0; padding-bottom: 10px; }
.keyboard-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 0 2px; }
.keyboard-toolbar > div { display: flex; flex-direction: column; }
.keyboard-toolbar strong { font-size: 13px; }
.keyboard-toolbar small { color: var(--muted); font-size: 10px; margin-top: 2px; }
.keyboard-toolbar > .guide-switches { display: flex; flex-direction: row; align-items: center; gap: 18px; }
.guide-switches .switch { justify-content: flex-start; }
.guide-switches .switch.hidden { display: none; }
.experimental-switch { position: relative; }
.experimental-switch::before,
.experimental-switch::after { position: absolute; left: 50%; z-index: 12; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .16s ease, transform .16s ease, visibility .16s; }
.experimental-switch::before { content: ""; bottom: calc(100% + 5px); border: 6px solid transparent; border-top-color: #303b4c; transform: translate(-50%, 3px); }
.experimental-switch::after { content: attr(data-tooltip); bottom: calc(100% + 17px); width: max-content; max-width: 190px; padding: 7px 10px; border: 1px solid #303b4c; border-radius: 8px; background: #151c26; color: #dfe5ed; box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: 11px; font-weight: 700; line-height: 1.4; white-space: nowrap; transform: translate(-50%, 3px); }
.experimental-switch:hover::before,
.experimental-switch:hover::after,
.experimental-switch:focus-within::before,
.experimental-switch:focus-within::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* 统计块 hover 解释（速度/WPM 等） */
.stat-tip { position: relative; cursor: help; outline: none; }
.stat-tip::before,
.stat-tip::after { position: absolute; left: 50%; z-index: 30; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .16s ease, transform .16s ease, visibility .16s; }
.stat-tip::before { content: ""; bottom: calc(100% + 6px); border: 6px solid transparent; border-top-color: #303b4c; transform: translate(-50%, 3px); }
.stat-tip::after { content: attr(data-tip); bottom: calc(100% + 18px); width: max-content; max-width: 250px; padding: 9px 12px; border: 1px solid #303b4c; border-radius: 8px; background: #151c26; color: #dfe5ed; box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: 12px; font-weight: 600; line-height: 1.5; white-space: normal; text-align: left; transform: translate(-50%, 3px); }
.stat-tip:hover::before,
.stat-tip:hover::after,
.stat-tip:focus::before,
.stat-tip:focus::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
body[data-resolved-theme="light"] .stat-tip::after { background: #fff; color: #1b2634; border-color: #d2d9e3; box-shadow: 0 10px 30px rgba(50,62,80,.18); }
body[data-resolved-theme="light"] .stat-tip::before { border-top-color: #d2d9e3; }
.switch { display: flex; align-items: center; gap: 9px; cursor: pointer; color: var(--muted); font-size: 11px; font-weight: 700; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track { width: 38px; height: 22px; padding: 3px; border-radius: 999px; background: #303846; transition: .2s; }
.switch-track::after { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: #8994a5; transition: .2s; }
.switch input:checked + .switch-track { background: rgba(255,207,74,.25); }
.switch input:checked + .switch-track::after { transform: translateX(16px); background: var(--accent); }
.keyboard { display: flex; flex-direction: column; width: 100%; aspect-ratio: 3 / 1; gap: clamp(2px, .625vw, 7px); opacity: 1; transform: translateY(0); transition: max-height .3s ease, opacity .2s, transform .3s, margin .3s; overflow: hidden; }
.hands-wrapper { position: fixed; z-index: 5; pointer-events: none; opacity: .7; overflow: visible; }
.hands-wrapper.hidden { display: none; }
.hand-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: transform 0.18s ease-out; will-change: transform; }
.finger-glow { position: absolute; width: 26px; height: 26px; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 1; transition: left 0.18s ease-out, top 0.18s ease-out, opacity 0.15s ease, transform 0.18s ease-out; will-change: left, top, opacity, transform; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.72) 0%, rgba(var(--accent-rgb), 0.22) 45%, rgba(var(--accent-rgb), 0) 70%); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.55), 0 0 24px rgba(var(--accent-rgb), 0.28); }
.finger-glow.hidden { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .hand-canvas { transition: none; }
  .finger-glow { transition: none; }
}
.keyboard.hidden { max-height: 0; opacity: 0; transform: translateY(-8px); margin-bottom: -8px; }
.key-row { display: flex; flex: 1 1 0; min-height: 0; gap: clamp(2px, .535vw, 6px); justify-content: center; }
.key { flex: 1 1 0; min-width: 0; height: auto; display: grid; place-items: center; position: relative; touch-action: manipulation; user-select: none; cursor: pointer; background: linear-gradient(#1c2431,#151b25); color: #aeb8c7; border: 1px solid #303a4a; border-bottom-width: 3px; border-radius: clamp(3px, .625vw, 7px); font-size: clamp(8px, 1.07vw, 12px); font-weight: 800; transition: .08s; }
.key[data-key="f"]::after,
.key[data-key="j"]::after { content: ""; position: absolute; bottom: clamp(2px, .4vw, 5px); left: 50%; translate: -50% 0; width: 42%; height: 2px; border-radius: 999px; background: #8b97ae; }
.key[data-key="f"].next::after,
.key[data-key="j"].next::after { background: rgba(0,0,0,.22); }
body[data-resolved-theme="light"] .key[data-key="f"]::after,
body[data-resolved-theme="light"] .key[data-key="j"]::after { background: #a0a8b8; }
body[data-resolved-theme="light"] .key[data-key="f"].next::after,
body[data-resolved-theme="light"] .key[data-key="j"].next::after { background: rgba(0,0,0,.18); }
.key .key-pair { display: flex; flex-direction: column; line-height: 1.05; align-items: center; }
.key .key-pair small { color: #737f90; font-size: 9px; }
.key.wide-125 { flex-grow: 1.25; }
.key.wide-15 { flex-grow: 1.5; }
.key.wide-175 { flex-grow: 1.75; }
.key.wide-2 { flex-grow: 2; }
.key.wide-225 { flex-grow: 2.25; }
.key.wide-65 { flex-grow: 6.5; }
.key.next { color: #141007; background: var(--accent); border-color: var(--accent-2); transform: translateY(-2px); box-shadow: 0 4px 18px rgba(var(--accent-rgb),.22); }
.key.pressed { transform: translateY(2px); border-bottom-width: 1px; background: #333e50; }
.key.modifier-active { color: #141007; background: var(--accent); border-color: var(--accent-2); box-shadow: 0 0 14px rgba(var(--accent-rgb),.2); }
.key.lock-active { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-rgb),.15); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.2), 0 0 14px rgba(var(--accent-rgb),.12); }
.guest-mode .key { cursor: default; }
.key.space { font-size: 10px; letter-spacing: .18em; }
footer { text-align: center; color: #606b7a; font-size: 11px; margin-top: 24px; letter-spacing: .04em; }
footer span { color: var(--accent); margin-left: 6px; }
.celebration { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(4,6,9,.76); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: .25s; z-index: 10; }
.celebration.show { opacity: 1; visibility: visible; }
.celebration.guest-demo { display: block; padding: 0; background: transparent; backdrop-filter: none; pointer-events: none; cursor: default; }
.celebration.guest-demo .celebration-card { position: fixed; left: var(--guest-popup-x, 50vw); top: var(--guest-popup-y, 50vh); width: min(360px, calc(100vw - 32px)); padding: 25px 24px 22px; text-align: center; background: var(--panel); box-shadow: 0 18px 55px rgba(0,0,0,.38); pointer-events: auto; transform: translate(-50%, -50%); }
.celebration.guest-demo .result-rating { justify-content: center; }
.celebration.guest-demo h2 { margin-top: 11px; padding-right: 30px; font-size: 22px; }
.celebration.guest-demo .result-actions { display: none; }
.celebration-card { position: relative; width: min(440px, calc(100% - 40px)); padding: 34px; text-align: center; background: #151b24; border: 1px solid #3a4351; border-radius: 20px; box-shadow: 0 30px 100px #000; }
.celebration-card .celebration-close { position: absolute; top: 13px; right: 13px; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--muted); font-size: 21px; font-weight: 500; }
.celebration-card .celebration-close:hover { color: white; border-color: #627086; }
.leaderboard-overlay { position: fixed; inset: 0; z-index: 100; background: var(--bg); opacity: 0; visibility: hidden; transition: .25s; }
.leaderboard-overlay.show { opacity: 1; visibility: visible; }
.leaderboard-overlay iframe { width: 100%; height: 100%; border: 0; }
body[data-resolved-theme="light"] .leaderboard-overlay { background: var(--bg); }
body.leaderboard-open { overflow: hidden; }
body.leaderboard-open > *:not(.leaderboard-overlay) { pointer-events: none; }
.celebration h2 { margin: 16px 0 5px; font-size: 28px; }
.celebration p { color: var(--muted); }
.result-rating { padding: 10px 15px; }
.rating-stars { display: flex; justify-content: center; gap: 6px; min-height: 36px; }
.rating-star { position: relative; display: inline-block; color: var(--accent); font-size: 34px; line-height: 1; }
.rating-star.empty { color: #657080; }
.rating-star.half::after { content: "★"; position: absolute; inset: 0; width: 50%; overflow: hidden; color: var(--accent); }
.rating-star.half { color: #657080; }
.result-requirement { margin: 10px 0 0; padding: 10px 12px; border-radius: 9px; background: var(--panel-2); color: var(--muted); font-size: 11px; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 20px; }
.celebration button { width: 100%; border: 0; padding: 12px 8px; border-radius: 10px; background: var(--accent); color: #171209; font-weight: 800; cursor: pointer; }
.celebration button.secondary-button { color: #d5dbe4; background: #222b38; border: 1px solid #394455; }
.celebration #nextLevelButton { grid-column: 1 / -1; }
.celebration .kbd-shortcut {
  display: inline-block;
  min-width: 1.3em;
  padding: 0 5px;
  margin: 0 1px;
  border-radius: 5px;
  background: rgba(var(--accent-rgb), .18);
  color: var(--accent);
  font-weight: 800;
  font-size: .82em;
  line-height: 1.5;
  letter-spacing: .02em;
}
.celebration #nextLevelButton .kbd-shortcut {
  background: #fff;
  color: var(--accent);
}
[hidden] { display: none !important; }
.auth-screen { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgba(6,8,12,.94); backdrop-filter: blur(14px); }
.auth-screen.hidden { display: none; }
.auth-card { position: relative; width: min(400px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg,#171e29,#0f141c); box-shadow: 0 30px 100px #000; }
.auth-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--muted); cursor: pointer; font-size: 20px; line-height: 1; }
.auth-close:hover { border-color: var(--accent); color: var(--accent); }
.password-modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgba(6,8,12,.86); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: .2s; }
.password-modal.show { opacity: 1; visibility: visible; }
.password-card { position: relative; width: min(420px, 100%); padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: 0 30px 100px rgba(0,0,0,.55); }
.password-card h2 { margin: 0; font-size: 27px; }
.password-copy { margin: 8px 0 4px; color: var(--muted); font-size: 11px; }
.password-card label { display: block; margin-top: 14px; color: var(--muted); font-size: 11px; font-weight: 700; }
.password-card input { width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--text); outline: 0; }
.password-card input:focus { border-color: var(--accent); }
.password-card .password-visibility { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.password-card .password-visibility input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.password-close { position: absolute; top: 13px; right: 13px; width: 33px; height: 33px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--muted); cursor: pointer; font-size: 20px; }
.password-message { min-height: 18px; margin: 10px 0 0; color: var(--red); font-size: 11px; }
.password-submit { width: 100%; padding: 11px; border: 0; border-radius: 9px; background: var(--accent); color: #171209; cursor: pointer; font-weight: 800; }
.auth-logo { margin-bottom: 18px; }
.auth-card h2 { margin: 0; font-size: 27px; }
.auth-copy { color: var(--muted); line-height: 1.6; font-size: 13px; }
.auth-card label { display: block; margin-top: 16px; color: #b8c1cd; font-size: 12px; font-weight: 700; }
.auth-card input { width: 100%; margin-top: 7px; padding: 12px 13px; border: 1px solid #354052; border-radius: 9px; outline: 0; background: #0a0e14; color: white; }
.auth-card input:focus { border-color: var(--accent); }
.auth-error { min-height: 18px; margin: 10px 0 0; color: var(--red); font-size: 11px; }
.auth-submit { width: 100%; margin-top: 5px; padding: 12px; border: 0; border-radius: 9px; background: var(--accent); color: #171209; font-weight: 800; cursor: pointer; }
.admin-screen { position: fixed; inset: 0; z-index: 31; overflow: auto; padding: 42px 20px; background: var(--bg); }
.admin-screen.hidden { display: none; }
.admin-card { width: min(1050px, 100%); margin: auto; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: 0 30px 100px rgba(0,0,0,.35); }
.admin-header { display: flex; justify-content: space-between; align-items: start; gap: 24px; }
.admin-header h2 { margin: 0; font-size: 30px; }
.admin-header p:not(.eyebrow) { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.admin-tabs { display:flex; gap:5px; margin-top:24px; overflow-x:auto; padding:5px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); }
.admin-tabs button { flex:0 0 auto; padding:9px 14px; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; font-size:11px; font-weight:800; white-space:nowrap; }
.admin-tabs button:hover { color:var(--text); background:rgba(255,255,255,.035); }
.admin-tabs button.active { background:var(--accent); color:#171209; box-shadow:0 4px 14px rgba(var(--accent-rgb),.16); }
.admin-tab-panel[hidden] { display:none; }
.admin-placeholder { min-height:300px; display:grid; place-content:center; justify-items:center; margin-top:20px; padding:40px 20px; border:1px dashed var(--line); border-radius:14px; color:var(--muted); text-align:center; }
.admin-placeholder span { color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.16em; }
.admin-placeholder h3 { margin:8px 0 5px; color:var(--text); font-size:20px; }
.admin-placeholder p { margin:0; font-size:11px; }
.admin-config-form { display:flex; flex-direction:column; gap:16px; margin-top:20px; }
.admin-config-section { padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--panel-2); }
.admin-config-heading { display:flex; align-items:center; gap:12px; margin-bottom:17px; }
.admin-config-heading > span { min-width:44px; padding:7px 8px; border-radius:7px; background:rgba(var(--accent-rgb),.12); color:var(--accent); text-align:center; font-size:9px; font-weight:800; letter-spacing:.08em; }
.admin-config-heading h3, .admin-config-heading p { margin:0; }
.admin-config-heading h3 { color:var(--text); font-size:15px; }
.admin-config-heading p { margin-top:3px; color:var(--muted); font-size:10px; }
.admin-config-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.admin-config-grid label, .admin-unlock-item label { color:var(--muted); font-size:10px; font-weight:800; }
.admin-config-grid input, .admin-unlock-item input { width:100%; margin-top:6px; padding:10px 11px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); outline:0; }
.admin-config-grid input:focus, .admin-unlock-item input:focus { border-color:var(--accent); }
.admin-config-wide { grid-column:1 / -1; }
.admin-unlock-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.admin-level-names { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.admin-level-names label { color:var(--muted); font-size:10px; font-weight:800; }
.admin-level-names input { width:100%; margin-top:6px; padding:10px 11px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); outline:0; }
.admin-level-names input:focus { border-color:var(--accent); }
.admin-unlock-item { display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--bg); }
.admin-unlock-item strong { grid-column:1 / -1; color:var(--accent); font-size:11px; }
.admin-unlock-item label { position:relative; }
.admin-unlock-item label span { position:absolute; right:8px; bottom:10px; color:var(--muted); font-size:8px; }
.admin-unlock-item input { padding-right:38px; }
.admin-config-actions { display:flex; align-items:center; justify-content:flex-end; gap:15px; padding:14px 0 0; }
.admin-config-actions p { flex:1; margin:0; color:var(--red); font-size:11px; }
.admin-config-actions p.success { color:var(--green); }
.admin-config-actions button, .admin-add-lesson { padding:10px 16px; border:0; border-radius:8px; background:var(--accent); color:#171209; cursor:pointer; font-size:11px; font-weight:800; }
.admin-lessons-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:20px; }
.admin-lesson-levels { display:flex; flex-wrap:wrap; gap:5px; }
.admin-lesson-levels button { padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel-2); color:var(--muted); cursor:pointer; font-size:10px; font-weight:800; }
.admin-lesson-levels button.active { border-color:var(--accent); background:rgba(var(--accent-rgb),.12); color:var(--accent); }
.admin-lessons-summary { margin:15px 0 9px; color:var(--muted); font-size:11px; }
.admin-lessons-list { max-height:560px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding-right:5px; }
.admin-lesson-row { display:grid; grid-template-columns:38px minmax(0,1.35fr) minmax(0,1fr) 30px; gap:10px; align-items:start; padding:11px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); }
.admin-lesson-index { padding-top:25px; color:var(--accent); text-align:center; font-size:10px; font-weight:800; }
.admin-lesson-row label { color:var(--muted); font-size:9px; font-weight:800; }
.admin-lesson-row textarea { width:100%; min-height:64px; resize:vertical; margin-top:5px; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); outline:0; line-height:1.5; font-family:Consolas,"Microsoft YaHei",monospace; font-size:11px; }
.admin-lesson-row textarea:focus { border-color:var(--accent); }
.admin-remove-lesson { width:28px; height:28px; margin-top:21px; padding:0; border:1px solid rgba(255,116,125,.4); border-radius:7px; background:transparent; color:var(--red); cursor:pointer; font-size:17px; }
.admin-article-row { grid-template-columns:38px minmax(0,1fr) 30px; }
.admin-article-row textarea { min-height:130px; }
.admin-user-tools { display: flex; align-items: center; gap: 8px; }
.admin-account-wrap { position: relative; }
.admin-user-tools .user-button, .admin-user-tools .menu-button { color: var(--text); background: var(--panel-2); white-space: nowrap; }
.admin-menu-wrap { position: relative; }
.admin-menu-dropdown { position: absolute; z-index: 4; top: calc(100% + 10px); right: 0; width: 270px; padding: 8px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); box-shadow: 0 18px 55px rgba(0,0,0,.4); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .18s; }
.admin-menu-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); }
.admin-menu-item { width: 100%; display: grid; grid-template-columns: 25px 1fr; gap: 7px; align-items: center; padding: 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.admin-menu-item:hover { background: var(--panel-2); }
.admin-menu-item b, .admin-menu-item small { display: block; }
.admin-menu-item small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.admin-password-modal { position: fixed; inset: 0; z-index: 32; display: grid; place-items: center; padding: 20px; background: rgba(6,8,12,.84); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: .2s; }
.admin-password-modal.show { opacity: 1; visibility: visible; }
.admin-password-form { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr) auto; align-items: end; gap: 10px; margin-top: 24px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.admin-password-card { position: relative; width: min(430px, 100%); grid-template-columns: 1fr; align-items: stretch; margin: 0; padding: 30px; background: var(--panel); box-shadow: 0 30px 100px rgba(0,0,0,.55); }
.admin-password-form > div { align-self: center; }
.admin-password-form strong, .admin-password-form small { display: block; }
.admin-password-form small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.admin-password-form label { color: var(--muted); font-size: 10px; font-weight: 700; }
.admin-password-form input { width: 100%; margin-top: 5px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); outline: 0; }
.admin-password-form input:focus { border-color: var(--accent); }
.admin-password-form .admin-password-visibility { display: flex; align-items: center; gap: 6px; align-self: center; cursor: pointer; white-space: nowrap; }
.admin-password-form .admin-password-visibility input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.admin-password-form button { padding: 10px 13px; border: 0; border-radius: 8px; background: var(--accent); color: #171209; cursor: pointer; font-weight: 800; }
.admin-password-form button[type="submit"] { grid-column: 1 / -1; width: 100%; }
.admin-password-form .admin-password-close { position: absolute; top: 12px; right: 12px; width: 33px; height: 33px; padding: 0; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 20px; }
.admin-password-message { min-height: 18px; margin: 0; color: var(--red); font-size: 11px; }
.admin-edit-modal { position: fixed; inset: 0; z-index: 32; display: grid; place-items: center; padding: 20px; background: rgba(6,8,12,.84); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: .2s; }
.admin-edit-modal.show { opacity: 1; visibility: visible; }
.admin-edit-card { position: relative; width: min(440px, 100%); display: grid; gap: 16px; padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 30px 100px rgba(0,0,0,.55); }
.admin-edit-card .eyebrow { margin-bottom: 4px; }
.admin-edit-card h2 { margin: 0; font-size: 26px; }
.admin-edit-card label { display: block; color: var(--muted); font-size: 10px; font-weight: 700; }
.admin-edit-card input, .admin-edit-card textarea { width: 100%; margin-top: 5px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); outline: 0; font-family: inherit; font-size: 13px; resize: vertical; }
.admin-edit-card input:focus, .admin-edit-card textarea:focus { border-color: var(--accent); }
.admin-edit-card button[type="submit"] { width: 100%; padding: 10px 22px; border: 0; border-radius: 8px; background: var(--accent); color: #171209; cursor: pointer; font-weight: 800; font-size: 12px; }
.admin-edit-close { position: absolute; top: 14px; right: 14px; width: 33px; height: 33px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--muted); cursor: pointer; font-size: 20px; }
.admin-edit-close:hover { color: var(--text); border-color: var(--accent); }
.admin-confirm-card { position: relative; width: min(400px, 100%); padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 30px 100px rgba(0,0,0,.55); }
.admin-confirm-card .eyebrow { margin-bottom: 4px; }
.admin-confirm-card h2 { margin: 0 0 10px; font-size: 24px; }
.admin-confirm-msg { margin: 0 0 20px; color: var(--muted); font-size: 13px; line-height: 1.6; white-space: pre-line; }
.admin-confirm-input { width: 100%; box-sizing: border-box; margin: 0 0 20px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--text); font-size: 13px; font-family: inherit; }
.admin-confirm-input:focus { outline: none; border-color: var(--accent); }
.admin-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.admin-confirm-cancel { padding: 9px 18px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 600; }
.admin-confirm-cancel:hover { color: var(--text); border-color: var(--accent); }
.admin-confirm-ok { padding: 9px 22px; border: 0; border-radius: 8px; background: var(--accent); color: #171209; cursor: pointer; font-size: 12px; font-weight: 800; }
.admin-confirm-actions.single { justify-content: stretch; }
.admin-confirm-actions.single .admin-confirm-ok { flex: 1; width: 100%; }
.admin-confirm-close { position: absolute; top: 14px; right: 14px; width: 33px; height: 33px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--muted); cursor: pointer; font-size: 20px; }
.admin-confirm-close:hover { color: var(--text); border-color: var(--accent); }
.feedback-detail-modal { position: fixed; inset: 0; z-index: 32; display: grid; place-items: center; padding: 20px; background: rgba(5,8,12,.84); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: .18s; }
.feedback-detail-modal.show { opacity: 1; visibility: visible; }
.feedback-detail-card { position: relative; width: min(520px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 30px 100px rgba(0,0,0,.58); }
.feedback-detail-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 22px; }
.feedback-detail-header h2 { margin: 0; font-size: 28px; }
.feedback-detail-header .eyebrow { margin-bottom: 7px; }
.feedback-detail-header button { width: 35px; height: 35px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--muted); cursor: pointer; font-size: 22px; flex-shrink: 0; }
.feedback-detail-header button:hover { color: var(--text); border-color: var(--accent); }
.feedback-detail-list { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.feedback-detail-list > div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.feedback-detail-list > div:last-child { border-bottom: 0; }
.feedback-detail-list dt { color: var(--muted); font-size: 12px; font-weight: 600; flex-shrink: 0; }
.feedback-detail-list dd { margin: 0; color: var(--text); font-size: 13px; text-align: right; word-break: break-all; line-height: 1.6; }
.feedback-detail-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 20px; }
.feedback-detail-actions .feedback-detail-message { margin: 0; text-align: center; }
.feedback-detail-actions .danger { width: 100%; padding: 11px 16px; border: 1px solid rgba(255,116,125,.45); border-radius: 8px; background: transparent; color: var(--red); cursor: pointer; font-weight: 800; font-size: 12px; }
.feedback-detail-actions .danger:hover { background: rgba(255,116,125,.1); }
.feedback-detail-actions .danger:disabled { opacity: .5; cursor: not-allowed; }
.feedback-detail-message { margin: 0; color: var(--red); font-size: 11px; }
.admin-summary { margin: 24px 0 12px; color: var(--muted); font-size: 12px; }
.admin-invite-config { margin-top:24px; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--panel-2); }
.admin-invite-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 18px; border-bottom:1px solid var(--line); }
.admin-invite-title { min-width:0; display:flex; align-items:center; gap:11px; }
.admin-invite-icon { width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; border-radius:9px; background:rgba(var(--accent-rgb),.12); color:var(--accent); font-size:11px; }
.admin-invite-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.admin-invite-config strong, .admin-invite-config small { display:block; }
.admin-invite-config strong { color:var(--text); font-size:13px; }
.admin-invite-config small { margin-top:4px; color:var(--muted); font-size:10px; font-weight:500; }
.admin-invite-toggle { flex:0 0 auto; display:flex; align-items:center; gap:9px; color:var(--text); cursor:pointer; font-size:11px; font-weight:800; white-space:nowrap; }
.admin-invite-toggle input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.admin-invite-switch { position:relative; width:38px; height:22px; border:1px solid #445064; border-radius:999px; background:#293343; transition:.18s; }
.admin-invite-switch::after { content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#8995a7; transition:.18s; }
.admin-invite-toggle input:checked + .admin-invite-switch { border-color:var(--accent); background:rgba(var(--accent-rgb),.3); }
.admin-invite-toggle input:checked + .admin-invite-switch::after { transform:translateX(16px); background:var(--accent); }
.admin-invite-toggle input:focus-visible + .admin-invite-switch { outline:2px solid var(--accent); outline-offset:2px; }
body[data-resolved-theme="light"] .admin-invite-switch { border-color: #cbd4df; background: #dce3ec; }
body[data-resolved-theme="light"] .admin-invite-switch::after { background: #8794a6; }
.admin-invite-editor { display:grid; grid-template-columns:minmax(190px,260px) 1fr; gap:16px; align-items:center; padding:16px 18px 13px; }
.admin-invite-add { grid-template-columns:minmax(150px,220px) minmax(170px,1fr) minmax(120px,160px) auto; align-items:end; }
.admin-invite-editor label { color:var(--muted); font-size:10px; font-weight:800; }
.admin-invite-code { color:var(--muted); font-size:10px; font-weight:800; }
.admin-invite-config input[type="text"], .admin-invite-config input[type="number"] { width:100%; margin-top:6px; padding:11px 12px; border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--text); outline:0; font-size:12px; }
.admin-invite-config input:focus { border-color:var(--accent); }
.admin-invite-config button { min-width:54px; min-height:32px; padding:6px 13px; border:0; border-radius:8px; background:var(--accent); color:#171209; font-size:11px; font-weight:800; cursor:pointer; white-space:nowrap; }
.admin-invite-editor button { justify-self:end; }
.admin-invite-config button:hover { filter:brightness(1.06); }
.admin-invite-config p { min-height:16px; margin:0; padding:0 18px 12px; color:var(--red); font-size:11px; }
.admin-invite-config p:empty { display:none; }
.admin-invite-value, .admin-invite-used { color:var(--accent); font-family:Consolas,monospace; }
.admin-invite-table { min-width:720px; }
.admin-invite-summary-row { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.admin-invite-summary-row .admin-summary { margin-right:auto; }

/* --- 更新日志管理 --- */
.admin-update-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
.admin-update-toolbar .admin-summary { margin-right:auto; font-size:13px; color:var(--muted); font-weight:700; }
.admin-update-toolbar button { padding:8px 18px; border:1px solid var(--accent); border-radius:8px; background:transparent; color:var(--accent); font-size:13px; font-weight:800; cursor:pointer; white-space:nowrap; }
.admin-update-toolbar button:hover { background:rgba(var(--accent-rgb),.12); }
.admin-update-list { overflow-y:auto; padding-right:4px; display:flex; flex-direction:column; gap:22px; }
.admin-update-card { border:1px solid var(--line); border-radius:14px; background:var(--panel-2); overflow:hidden; }
.admin-update-header { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); background:var(--panel); cursor:pointer; user-select:none; }
.admin-update-header:hover { background:var(--panel-2); }
.admin-update-drag { flex:0 0 auto; padding:4px 6px; cursor:grab; color:var(--muted); font-size:20px; line-height:1; user-select:none; border-radius:4px; }
.admin-update-drag:active { cursor:grabbing; }
.admin-update-drag:hover { background:var(--panel-2); color:var(--accent); }
.admin-update-title-row { min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:10px; flex:1; }
.admin-update-ver { margin:0; color:var(--accent); font-size:18px; font-weight:900; }
.admin-update-date { color:var(--muted); font-size:12px; font-weight:700; }
.admin-update-label { color:var(--text); font-size:14px; font-weight:700; }
.admin-update-content { color:var(--muted); font-size:12px; font-weight:600; flex-basis:100%; margin-top:2px; }
.admin-update-actions { flex:0 0 auto; display:flex; gap:6px; }
.admin-collapse-btn { flex:0 0 auto; padding:4px 8px; border:0; background:transparent; color:var(--muted); font-size:12px; cursor:pointer; border-radius:4px; transition:transform .2s; line-height:1; }
.admin-collapse-btn:hover { color:var(--accent); }
.admin-update-card.collapsed .admin-collapse-btn { transform:rotate(-90deg); }
.admin-update-card.collapsed .admin-update-revs { display:none; }
.admin-update-card.collapsed .admin-update-header { border-bottom:0; }
.admin-small-btn { padding:6px 12px; border:1px solid var(--line); border-radius:6px; background:var(--panel-2); color:var(--text); font-size:12px; font-weight:700; cursor:pointer; }
.admin-small-btn:hover { background:var(--panel); border-color:var(--accent); }
.admin-small-btn.danger { border-color:rgba(255,116,125,.4); color:var(--red); }
.admin-small-btn.danger:hover { background:rgba(255,116,125,.1); }
.admin-update-revs { padding:16px 20px; display:flex; flex-direction:column; gap:18px; }
.admin-update-rev { padding:14px 18px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.admin-update-rev-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.admin-rev-ver { color:var(--accent-2); font-size:13px; font-weight:900; font-family:var(--font); cursor:text; padding:2px 4px; border-radius:4px; outline:none; }
.admin-rev-ver:hover { background:rgba(var(--accent-rgb),.08); }
.admin-rev-ver:focus { background:var(--bg); box-shadow:0 0 0 2px var(--accent); }
.admin-change-list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.admin-change-list li { display:flex; align-items:flex-start; gap:10px; }
.admin-change-list li::before { content:"·"; color:var(--accent); font-weight:900; font-size:16px; line-height:1.55; flex:0 0 auto; }
.admin-change-text { flex:1; padding:4px 8px; border:1px solid transparent; border-radius:5px; font-size:13px; line-height:1.65; color:var(--text); outline:0; cursor:text; min-height:1.65em; }
.admin-change-text:hover { border-color:var(--line); }
.admin-change-text:focus { border-color:var(--accent); background:var(--panel-2); }
.admin-chg-del { flex:0 0 auto; padding:2px 8px; border:0; background:transparent; color:var(--muted); font-size:16px; line-height:1.55; cursor:pointer; border-radius:4px; }
.admin-chg-del:hover { background:rgba(255,116,125,.15); color:var(--red); }
.admin-invite-summary-row > button { padding:8px 14px; border:0; border-radius:8px; background:var(--accent); color:#171209; cursor:pointer; font-size:11px; font-weight:800; }
.admin-invite-modal { position:fixed; inset:0; z-index:32; display:grid; place-items:center; padding:20px; background:rgba(5,8,12,.84); backdrop-filter:blur(12px); opacity:0; visibility:hidden; transition:.18s; }
.admin-invite-modal.show { opacity:1; visibility:visible; }
.admin-invite-dialog { position:relative; width:min(430px,100%); display:grid; gap:13px; padding:28px; border:1px solid var(--line); border-radius:16px; background:var(--panel); box-shadow:0 30px 100px rgba(0,0,0,.58); }
.admin-invite-dialog > label { color:var(--muted); font-size:10px; font-weight:800; }
.admin-invite-dialog input { width:100%; margin-top:6px; padding:11px 12px; border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--text); outline:0; }
.admin-invite-dialog input:focus { border-color:var(--accent); }
.admin-invite-dialog #adminInviteMessage { min-height:16px; margin:0; color:var(--red); font-size:11px; }
.admin-invite-dialog .admin-invite-dialog-submit { padding:11px; border:0; border-radius:9px; background:var(--accent); color:#171209; cursor:pointer; font-weight:800; }
.admin-invite-dialog-close { position:absolute; top:12px; right:12px; width:32px; height:32px; padding:0; border:1px solid var(--line); border-radius:8px; background:var(--panel-2); color:var(--muted); cursor:pointer; font-size:20px; }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 900px; }
.admin-table th, .admin-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.admin-table th { background: var(--panel-2); color: var(--muted); font-size: 11px; }
.admin-table td { color: var(--text); font-size: 12px; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-level { color: var(--accent); font-weight: 800; }
.admin-actions { display: flex; gap: 7px; white-space: nowrap; }
.admin-actions button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); color: var(--text); cursor: pointer; }
.admin-actions .danger { border-color: rgba(255,116,125,.45); color: var(--red); }
.admin-actions .view { border-color: rgba(var(--accent-rgb),.4); color: var(--accent); }
.admin-actions button:hover { border-color: var(--accent); }
.admin-message { min-height: 18px; margin: 12px 0 0; color: var(--red); font-size: 12px; }
.admin-feedback-table { min-width: 680px; }
.admin-feedback-wrap { overflow-x: auto; }
.admin-feedback-cell-content { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.6; font-size: 12px; }
.admin-feedback-tag { display: inline-block; padding: 4px 9px; border-radius: 6px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.admin-feedback-tag.tag-danger { background: rgba(255,116,125,.14); color: var(--red); border: 1px solid rgba(255,116,125,.3); }
.admin-feedback-tag.tag-accent { background: rgba(34,197,94,.14); color: #22c55e; border: 1px solid rgba(34,197,94,.3); }
.admin-feedback-tag.tag-warn { background: rgba(255,193,7,.12); color: #ffc307; border: 1px solid rgba(255,193,7,.3); }
.admin-feedback-tag.tag-neutral { background: rgba(59,130,246,.14); color: #3b82f6; border: 1px solid rgba(59,130,246,.3); }
th.sortable { cursor: pointer; user-select: none; position: relative; padding-right: 22px; }
th.sortable:hover { color: var(--accent); }
th.sortable.sorted { color: var(--accent); }
th.sortable::after { content: ""; position: absolute; right: 7px; top: 50%; transform: translateY(-50%); font-size: 8px; opacity: .4; }
th.sortable.asc::after { content: "▲"; }
th.sortable.desc::after { content: "▼"; }
th.sortable.sorted::after { opacity: 1; }
.admin-table .muted { color: var(--muted); font-size: 11px; }
.auth-switch { width: 100%; margin-top: 10px; border: 0; background: transparent; color: #8fa4c4; cursor: pointer; font-size: 12px; }
.history-modal { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; padding: 20px; background: rgba(4,6,9,.8); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: .2s; }
.history-modal.show { opacity: 1; visibility: visible; }
.history-card { width: min(760px, 100%); max-height: min(720px, calc(100vh - 40px)); display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: #111720; box-shadow: 0 30px 100px #000; }
.history-header { display: flex; justify-content: space-between; align-items: start; }
.history-header h2 { margin: 0; font-size: 27px; }
.history-header button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 9px; background: #1c2430; color: var(--muted); cursor: pointer; font-size: 22px; }
.history-summary { margin: 18px 0 12px; padding: 11px 14px; border-radius: 10px; background: #0c1118; color: var(--muted); font-size: 12px; }
.history-list { overflow: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.history-empty { padding: 55px 20px; color: var(--muted); text-align: center; }
.history-item { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 15px; align-items: start; padding: 14px; border: 1px solid #293344; border-radius: 11px; background: #151c26; }
.history-meta { color: var(--muted); font-size: 10px; line-height: 1.6; }
.history-meta b { display: block; color: var(--accent); font-size: 12px; }
.history-content { min-width: 0; }
.history-content p { margin: 0 0 9px; color: #c7cfdb; white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.65; font-family: Consolas, monospace; font-size: 12px; }
.history-metrics { display: flex; flex-wrap: wrap; gap: 6px 13px; color: var(--muted); font-size: 10px; }
.history-metrics strong { color: white; }
.history-retry { align-self: center; border: 1px solid #40506a; background: #202a38; color: #dce3ec; padding: 8px 11px; border-radius: 8px; cursor: pointer; font-size: 11px; font-weight: 800; }
.history-retry:hover { border-color: var(--accent); color: var(--accent); }
.history-retry:disabled { opacity: .4; cursor: not-allowed; }
.speed-modal { position: fixed; inset: 0; z-index: 28; display: grid; place-items: center; padding: 20px; background: rgba(4,6,9,.88); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: .2s; }
.speed-modal.show { opacity: 1; visibility: visible; }
.speed-card { width: min(1000px, 100%); max-height: calc(100vh - 36px); overflow: auto; border: 1px solid var(--line); border-radius: 20px; background: #101720; box-shadow: 0 35px 110px #000; }
.speed-header { display: flex; justify-content: space-between; align-items: start; padding: 25px 28px 0; }
.speed-header h2 { margin: 0; font-size: 28px; }
.speed-header button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 9px; background: #1c2430; color: var(--muted); cursor: pointer; font-size: 22px; }
.speed-intro { margin: 10px 28px 20px; color: var(--muted); font-size: 12px; }
.speed-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 28px; border: 1px solid var(--line); border-radius: 11px 11px 0 0; }
.speed-stats > div { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 12px; border-right: 1px solid var(--line); }
.speed-stats > div:last-child { border: 0; }
.speed-stats span, .speed-stats small { color: var(--muted); font-size: 10px; }
.speed-stats strong { font-size: 19px; }
.speed-progress { height: 3px; margin: 0 28px; background: #242c39; }
.speed-progress span { display: block; width: 0; height: 100%; background: var(--accent); transition: width .15s; }
.speed-article { position: relative; margin: 0 28px; padding: 25px 22px; height: min(390px, 44vh); overflow: auto; overflow-x: hidden; cursor: text; border: 1px solid var(--line); border-top: 0; background: #0b1017; }
#speedArticleText { max-width: 100%; font: 600 19px/1.75 "Nunito", sans-serif; letter-spacing: .025em; white-space: normal; overflow-wrap: anywhere; word-break: normal; }
#speedArticleText .done { color: var(--green); }
#speedArticleText .wrong { color: var(--red); background: rgba(255,116,125,.12); }
#speedArticleText .current { color: var(--accent); border-bottom: 2px solid var(--accent); }
#speedArticleText .upcoming { color: #647081; }
.speed-footer { display: flex; justify-content: space-between; align-items: center; padding: 14px 28px 20px; }
.speed-footer p { margin: 0; color: var(--muted); font-size: 11px; }
.speed-footer p span { color: var(--accent); }
.speed-footer button { padding: 9px 14px; border: 1px solid #3b475a; border-radius: 9px; background: #1c2532; color: white; cursor: pointer; font-weight: 700; }
.speed-actions { display: flex; gap: 8px; }
.about-modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; background: rgba(4,6,9,.84); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: .2s; }
.about-modal.show { opacity: 1; visibility: visible; }
.about-card { position: relative; width: min(410px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 20px; background: #111720; text-align: center; box-shadow: 0 30px 100px rgba(0,0,0,.65); }
.about-close { position: absolute; top: 13px; right: 13px; width: 35px; height: 35px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--muted); cursor: pointer; font-size: 22px; }
.about-close:hover { color: var(--text); border-color: var(--accent); }
.about-logo { margin: 0 auto 18px; }
.about-card .eyebrow { margin-bottom: 7px; }
.about-card h2 { margin: 0; font-size: 28px; }
.about-description { margin: 8px 0 24px; color: var(--muted); font-size: 12px; }
.about-details { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; text-align: left; }
.about-details > div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.about-details > div:last-child { border-bottom: 0; }
.about-details dt { color: var(--muted); font-size: 12px; }
.about-details dd { margin: 0; color: var(--text); font-size: 12px; font-weight: 800; }
.update-log-link { margin:-6px -8px; padding:6px 8px; border:0; background:transparent; color:var(--accent); cursor:pointer; font-size:12px; font-weight:800; }
.update-log-link:hover { text-decoration:underline; }
.update-log-card { width:min(620px,100%); max-height:min(720px,calc(100vh - 40px)); padding:30px; text-align:left; }
.update-log-card h2 { margin-bottom:20px; }
.update-log-list { max-height:min(570px,calc(100vh - 150px)); overflow-y:auto; padding-right:6px; }
.feedback-modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; background: rgba(4,6,9,.84); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
.feedback-modal.show { opacity: 1; visibility: visible; }
.feedback-card { position: relative; width: min(460px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 20px; background: #111720; text-align: center; box-shadow: 0 30px 100px rgba(0,0,0,.65); }
.feedback-close { position: absolute; top: 13px; right: 13px; width: 35px; height: 35px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--muted); cursor: pointer; font-size: 22px; }
.feedback-close:hover { color: var(--text); border-color: var(--accent); }
.feedback-logo { margin: 0 auto 18px; }
.feedback-card .eyebrow { margin-bottom: 7px; }
.feedback-card h2 { margin: 0; font-size: 28px; }
.feedback-description { margin: 8px 0 24px; color: var(--muted); font-size: 13px; }
.feedback-card form { text-align: left; display: flex; flex-direction: column; gap: 16px; }
.feedback-card label, .feedback-field { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.feedback-label { color: var(--muted); font-size: 12px; font-weight: 700; }
.feedback-card textarea, .feedback-card input[type="text"] {
  width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text);
  font-size: 14px; font-family: inherit; box-sizing: border-box; transition: border-color .15s ease;
}
.feedback-card textarea:focus, .feedback-card input[type="text"]:focus {
  outline: none; border-color: var(--accent);
}
.custom-select { position: relative; }
.custom-select-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font-size: 14px; font-family: inherit; cursor: pointer; text-align: left; transition: border-color .15s ease; }
.custom-select-trigger:hover { border-color: var(--accent-2); }
.custom-select.open .custom-select-trigger, .custom-select-trigger:focus-visible { outline: none; border-color: var(--accent); }
.custom-select-value.placeholder { color: var(--muted); }
.custom-select-arrow { color: var(--muted); font-size: 11px; transition: transform .15s ease; }
.custom-select.open .custom-select-arrow { transform: rotate(180deg); }
.custom-select-list { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 18px 55px rgba(0,0,0,.55); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .16s; max-height: 240px; overflow-y: auto; }
.custom-select.open .custom-select-list { opacity: 1; visibility: visible; transform: translateY(0); }
.custom-select-list li { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--text); }
.custom-select-list li:hover, .custom-select-list li.active { background: rgba(var(--accent-rgb),.12); }
.custom-select-list li.selected { color: var(--accent); font-weight: 800; }
.opt-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.opt-danger .opt-dot { background: var(--red); }
.opt-accent .opt-dot { background: #22c55e; }
.opt-warn .opt-dot { background: #ffc307; }
.opt-neutral .opt-dot { background: #3b82f6; }
body[data-resolved-theme="light"] .custom-select-list { box-shadow: 0 18px 55px rgba(42,54,72,.18); border-color: #ccd4df; }
.feedback-card textarea { resize: vertical; min-height: 100px; line-height: 1.6; }
.feedback-message { margin: 0; min-height: 18px; font-size: 12px; color: var(--muted); text-align: center; }
.feedback-message.success { color: var(--green); }
.feedback-message.error { color: var(--red); }
.feedback-submit { width: 100%; padding: 13px; border: 0; border-radius: 11px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; transition: transform .1s ease, filter .15s ease; }
.feedback-submit:hover { filter: brightness(1.08); }
.feedback-submit:active { transform: scale(.98); }
.feedback-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
body[data-resolved-theme="light"] .feedback-card { color: #1b2634; border-color: #d2d9e3; background: #fff; }
body[data-resolved-theme="light"] .feedback-modal { background: rgba(226,232,240,.88); }
.update-group { padding:19px 0; border-top:1px solid var(--line); }
.update-group:first-child { padding-top:0; border-top:0; }
.update-entry-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:9px; }
.update-entry-header h3 { margin:0; color:var(--text); font-size:15px; }
.update-version { display:inline-block; margin-right:8px; color:var(--accent); }
.update-entry-header time { flex:0 0 auto; color:var(--muted); font-size:11px; }
.update-revision { margin-top:10px; padding:10px 12px; border-radius:9px; background:rgba(255,255,255,.025); }
.update-revision h4 { margin:0 0 5px; color:var(--text); font-size:11px; }
.update-revision ul { margin:0; padding-left:19px; color:var(--muted); font-size:12px; line-height:1.75; }
.update-log-error { color:var(--red); font-size:12px; }
@media (max-width: 700px) {
  .celebration.guest-demo { padding: 12px; }
  .admin-screen { padding: 12px; }
  .admin-card { padding: 18px; }
  .admin-header { align-items: center; }
  .admin-user-tools { align-self: flex-start; }
  .admin-menu-dropdown { width: min(270px, calc(100vw - 36px)); }
  .admin-password-form { grid-template-columns: 1fr; }
  .admin-invite-header { align-items:center; gap:12px; }
  .admin-invite-title { flex:1 1 auto; min-width:0; }
  .admin-invite-toggle { flex:0 0 auto; }
  .admin-invite-editor { grid-template-columns:1fr; }
  .admin-invite-add { grid-template-columns:1fr; }
  .admin-invite-config button { width:auto; justify-self:end; }
  .admin-config-grid, .admin-unlock-grid, .admin-level-names { grid-template-columns:1fr; }
  .admin-config-wide { grid-column:auto; }
  .admin-lessons-toolbar { align-items:stretch; flex-direction:column; }
  .admin-add-lesson { align-self:flex-end; }
  .admin-lesson-row { grid-template-columns:30px 1fr 30px; }
  .admin-lesson-row label:nth-of-type(2) { grid-column:2 / 3; }
  .admin-remove-lesson { grid-column:3; grid-row:1; }
  .app-shell { width: min(100% - 24px, 1120px); }
  .topbar { height: 64px; }
  .brand { gap:7px; font-size:15px; white-space:nowrap; }
  .user-tools { gap:4px; }
  .streak { padding: 8px 10px; font-size: 0; }
  .streak strong { font-size: 12px; }
  .streak strong::after { content: " 轮"; color: var(--muted); font-weight: 500; }
  .logout-button { padding: 8px; }
  .menu-button { font-size: 0; padding: 8px 10px; }
  .leaderboard-link { padding: 8px 10px; font-size: 11px; white-space: nowrap; }
  .leaderboard-link span { font-size: 11px; }
  .menu-button span { font-size: 14px; margin: 0; }
  .history-card { padding: 18px; }
  .history-item { grid-template-columns: 85px 1fr; }
  .history-retry { grid-column: 1 / -1; }
  .speed-modal { padding: 8px; }
  .speed-header { padding: 18px 18px 0; }
  .speed-intro, .speed-stats, .speed-progress, .speed-article { margin-left: 18px; margin-right: 18px; }
  .speed-stats span { display: none; }
  .speed-article { padding: 18px 14px; }
  #speedArticleText { font-size: 16px; }
  .hero { display: block; padding: 30px 4px 22px; }
  .hero-copy { display: none; }
  .level-panel { align-items: stretch; flex-direction: column; gap: 10px; padding: 13px; }
  .level-title { width: auto; flex-direction: row; justify-content: space-between; }
  .level-title small { font-size: 10px; }
  .level { min-height: 50px; gap: 0; }
  .level span { display: none; }
  .sentence-wrap { padding: 24px 18px 18px; }
  .stats > div { gap: 4px; padding: 13px 6px; }
  .stats span { margin-right: 0; font-size: 11px; white-space: nowrap; }
  .stats strong { flex: 0 1 auto; min-width: 0; font-size: clamp(16px, 4.8vw, 21px); white-space: nowrap; }
  .stats small { flex: 0 0 auto; font-size: 9px; white-space: nowrap; }
  .action-row { padding-left: 18px; }
  .action-row p { display: none; }
  .practice-actions { width: 100%; }
  .practice-actions button { flex: 1; }
  .key { height: auto; font-size: 8px; border-radius: 3px; }
  .key-row { gap: 2px; }
  .key .key-pair small { font-size: 7px; }
  .keyboard-toolbar > .guide-switches { flex-direction: row; gap: 8px; }
  .switch-label { display: inline; white-space: nowrap; }
  /* 更新日志窄屏适配 */
  .admin-update-toolbar { flex-wrap: wrap; gap: 10px; }
  .admin-update-toolbar button { flex: 1 1 auto; text-align: center; }
  .admin-update-header { flex-wrap: wrap; gap: 8px; padding: 13px 14px; }
  .admin-update-drag { display: none; }
  .admin-update-actions { flex: 1 1 100%; gap: 6px; margin-top: 2px; }
  .admin-update-actions .admin-small-btn { flex: 1 1 auto; text-align: center; }
  .admin-update-revs { padding: 12px 14px; }
  .admin-update-rev { padding: 12px 13px; }
  .admin-update-rev-head { flex-wrap: wrap; gap: 8px; }
  .admin-update-rev-head .admin-update-actions { flex: 1 1 100%; }
}
body[data-resolved-theme="dark"][data-accent="green"] { --green:#78efb6; }
body[data-resolved-theme="light"][data-accent="green"] { --green:#19a866; }

/* Homepage visit counter (fixed footer, unobtrusive) */
.visit-counter {
  position: fixed;
  left: 8px;
  bottom: 6px;
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  z-index: 5;
}
.visit-counter #visitCount {
  font-weight: 700;
  color: var(--accent);
}

/* Homepage ICP / 公安备案信息（固定底部右下角，与左下角访问计数对称） */
.site-filing {
  position: fixed;
  right: 8px;
  bottom: 6px;
  margin: 0;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  opacity: 0.7;
  z-index: 5;
}
.site-filing a {
  color: var(--muted);
  text-decoration: none;
  transition: color .15s ease;
}
.site-filing a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ============================================================ 管理后台 · 数据库页签 */

.db-banner { padding: 12px 14px; margin-bottom: 14px; border-radius: 10px; font-size: 11px; line-height: 1.55; }
.db-banner-danger { border: 1px solid rgba(255,116,125,.4); background: rgba(255,116,125,.1); color: var(--red); }
.db-banner strong { display: block; margin-bottom: 2px; font-size: 12px; }
.db-banner button { margin-top: 8px; padding: 5px 12px; border: 1px solid rgba(255,116,125,.5); border-radius: 7px; background: transparent; color: var(--red); cursor: pointer; font-size: 10px; font-weight: 800; }
.db-banner button:hover { background: rgba(255,116,125,.15); }

.db-engine-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.db-engine-badge { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.db-engine-badge .db-engine-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(var(--green-rgb, 76,175,80), .18); }
.db-engine-badge.sqlite .db-engine-dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.db-engine-badge strong { color: var(--text); font-size: 13px; }
.db-engine-info { flex: 1; min-width: 220px; color: var(--muted); font-size: 10.5px; line-height: 1.7; }
.db-engine-info strong { color: var(--text); }

.db-status-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 9px; }
.db-status-item { padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); }
.db-status-item span { display: block; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .04em; margin-bottom: 3px; }
.db-status-item strong { display: block; color: var(--text); font-size: 11px; font-weight: 700; word-break: break-all; }

.db-stat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.db-stat-card { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); cursor: pointer; text-align: left; transition: border-color .15s, transform .15s; }
.db-stat-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.db-stat-card span { color: var(--accent); font-size: 10px; font-weight: 800; }
.db-stat-card strong { color: var(--text); font-size: 22px; line-height: 1; }
.db-stat-card small { color: var(--muted); font-size: 9px; word-break: break-all; }

.db-browse-toolbar { display: flex; gap: 9px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.db-browse-select { flex: 0 0 auto; min-width: 210px; }
.db-browse-toolbar select { padding: 11px 36px 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font-size: 14px; font-family: inherit; outline: 0; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; transition: border-color .15s ease; }
.db-browse-toolbar select:hover { border-color: var(--accent-2); }
.db-browse-toolbar select:focus { border-color: var(--accent); }
.db-browse-toolbar input { padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font-size: 14px; outline: 0; }
.db-browse-toolbar input:focus { border-color: var(--accent); }
.db-browse-toolbar input { flex: 1; min-width: 160px; }
.db-browse-toolbar button { padding: 10px 18px; border: 0; border-radius: 10px; background: var(--accent); color: #171209; cursor: pointer; font-size: 13px; font-weight: 800; }
.db-browse-wrap { max-height: 380px; }
.db-browse-wrap .db-cell-long { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-browse-pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 10px; color: var(--muted); font-size: 10.5px; }
.db-browse-pager button { padding: 5px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--text); cursor: pointer; font-size: 10px; }
.db-browse-pager button:disabled { opacity: .4; cursor: default; }
.db-browse-pager select { padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--text); font-size: 10px; }

.db-backup-toolbar { display: flex; gap: 9px; margin-bottom: 12px; flex-wrap: wrap; }
.db-backup-toolbar button { padding: 9px 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); cursor: pointer; font-size: 11px; font-weight: 700; }
.db-backup-toolbar button:hover { border-color: var(--accent); color: var(--accent); }
.db-backup-wrap { max-height: 280px; }
.db-backup-actions { display: flex; gap: 6px; }
.db-backup-actions a, .db-backup-actions button { padding: 4px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); cursor: pointer; font-size: 10px; text-decoration: none; }
.db-backup-actions a:hover { border-color: var(--accent); color: var(--accent); }
.db-backup-actions button.danger { border-color: rgba(255,116,125,.45); color: var(--red); }

.db-maint-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.db-maint-actions button { padding: 9px 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); cursor: pointer; font-size: 11px; font-weight: 700; }
.db-maint-actions button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.db-maint-actions button:disabled { opacity: .38; cursor: not-allowed; }

.db-log-wrap { max-height: 260px; }
.db-log-detail { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.db-danger-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.db-danger-actions button.danger { padding: 9px 15px; border: 1px solid rgba(255,116,125,.45); border-radius: 8px; background: transparent; color: var(--red); cursor: pointer; font-size: 11px; font-weight: 800; }
.db-danger-actions button.danger:hover { background: rgba(255,116,125,.12); }

.db-wizard-card { width: min(560px, 92vw); padding: 26px; }
.db-wizard-step { display: flex; flex-direction: column; gap: 12px; }
.db-wizard-msg { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.db-wizard-preflight { display: flex; flex-direction: column; gap: 9px; max-height: 300px; overflow-y: auto; }
.db-wizard-preflight .db-status-item { border-color: var(--line); }
.db-wizard-preflight .db-status-item.ok { border-color: rgba(var(--green-rgb, 76,175,80), .45); }
.db-wizard-preflight .db-status-item.warn { border-color: rgba(255,183,77,.5); }
.db-wizard-preflight .db-status-item.block { border-color: rgba(255,116,125,.55); }
.db-wizard-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.db-wizard-actions button { padding: 9px 18px; border: 0; border-radius: 8px; background: var(--accent); color: #171209; cursor: pointer; font-size: 11px; font-weight: 800; }
.db-wizard-actions button:disabled { opacity: .45; cursor: not-allowed; }
.db-wizard-actions button.ghost { border: 1px solid var(--line); background: transparent; color: var(--text); }
.db-wizard-actions button.danger { background: rgba(255,116,125,.16); color: var(--red); }
.db-wizard-actions button:only-child { flex: 1; width: 100%; }
.db-wizard-mode { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 10.5px; font-weight: 700; }
.db-wizard-mode select { padding: 11px 36px 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font-size: 14px; font-family: inherit; outline: 0; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; transition: border-color .15s ease; }
.db-wizard-mode select:hover { border-color: var(--accent-2); }
.db-wizard-mode select:focus { border-color: var(--accent); }
.db-wizard-step input[type="text"] { padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 12px; outline: 0; text-align: center; letter-spacing: .2em; }
.db-wizard-step input[type="text"]:focus { border-color: var(--accent); }