/* v20.18.5：打字练习工具 */
.typing-page{min-height:calc(100vh - 120px);padding:clamp(28px,5vw,72px) clamp(16px,4vw,56px)}
.typing-shell{max-width:960px;margin:0 auto}
.typing-panel{position:relative;border:1px solid rgba(148,163,184,.24);background:radial-gradient(circle at 18% 12%,rgba(56,189,248,.12),transparent 32%),radial-gradient(circle at 84% 22%,rgba(168,85,247,.12),transparent 36%),rgba(255,255,255,.72);border-radius:32px;padding:clamp(16px,4vw,30px);box-shadow:0 24px 70px rgba(15,23,42,.13);backdrop-filter:blur(18px)}
.typing-topbar,.typing-stats{display:flex;align-items:stretch;gap:12px;margin-bottom:18px}.typing-mode-group{display:flex;gap:8px;flex-wrap:wrap}.typing-mode,.typing-button,.typing-sound-toggle,.typing-stat-card{border:1px solid rgba(148,163,184,.28);background:rgba(255,255,255,.72);border-radius:18px;padding:.75rem .95rem;box-shadow:0 12px 28px rgba(15,23,42,.08)}
.typing-mode,.typing-button,.typing-sound-toggle{cursor:pointer;color:#0f172a;font-weight:850;transition:transform .16s ease,border-color .16s ease,background-color .16s ease,box-shadow .16s ease,color .16s ease}.typing-mode:hover,.typing-button:hover,.typing-sound-toggle:hover,.typing-mode:focus-visible,.typing-button:focus-visible,.typing-sound-toggle:focus-visible{transform:translateY(-2px);border-color:rgba(14,165,233,.48);background:rgba(224,242,254,.92);color:#075985;box-shadow:0 18px 34px rgba(14,165,233,.18);outline:none}.typing-mode:active,.typing-button:active,.typing-sound-toggle:active{transform:translateY(1px) scale(.98)}.typing-mode.is-active{background:linear-gradient(135deg,rgba(14,165,233,.95),rgba(168,85,247,.78));color:white;border-color:rgba(125,211,252,.55)}.typing-sound-toggle{margin-left:auto}.typing-sound-toggle::before{content:"♪";display:inline-flex;align-items:center;justify-content:center;width:1.35em;height:1.35em;margin-right:.35em;border-radius:999px;background:rgba(14,165,233,.18);color:#0369a1;font-weight:900}.typing-sound-toggle.is-muted::before{content:"×";background:rgba(148,163,184,.18);color:#64748b}
.typing-stat-card{min-width:118px}.typing-stat-card span{display:block;font-size:.76rem;color:rgba(100,116,139,.82)}.typing-stat-card strong{display:block;margin-top:.1rem;font-size:1.35rem;line-height:1;color:#0f172a}.typing-card{border:1px solid rgba(148,163,184,.24);border-radius:28px;background:rgba(255,255,255,.62);padding:clamp(16px,3vw,24px);box-shadow:0 18px 48px rgba(15,23,42,.1)}.typing-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;color:rgba(15,23,42,.82);font-weight:900}.typing-meta small{padding:.25rem .62rem;border-radius:999px;background:rgba(14,165,233,.12);color:#075985}.typing-text{min-height:120px;border-radius:20px;background:rgba(15,23,42,.04);padding:18px;font-size:1.14rem;line-height:2;color:rgba(15,23,42,.72);word-break:break-word}.typing-text span{border-radius:.25em;padding:.04em .02em}.typing-text .is-correct{color:#16a34a;background:rgba(34,197,94,.1)}.typing-text .is-wrong{color:#dc2626;background:rgba(239,68,68,.14)}.typing-text .is-current{background:rgba(14,165,233,.18);box-shadow:0 0 0 1px rgba(14,165,233,.26)}.typing-input{display:block;width:100%;min-height:132px;margin-top:14px;resize:vertical;border:1px solid rgba(148,163,184,.3);border-radius:20px;background:rgba(255,255,255,.82);padding:16px;font:inherit;line-height:1.7;color:#0f172a;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);outline:none}.typing-input:focus{border-color:rgba(14,165,233,.48);box-shadow:0 0 0 4px rgba(14,165,233,.12)}.typing-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}.typing-leaderboard{width:min(100%,760px);margin:18px auto 0!important}body.dark .typing-panel,html.dark .typing-panel,body.dark .typing-card,html.dark .typing-card,body.dark .typing-mode,html.dark .typing-mode,body.dark .typing-button,html.dark .typing-button,body.dark .typing-sound-toggle,html.dark .typing-sound-toggle,body.dark .typing-stat-card,html.dark .typing-stat-card{background:rgba(15,23,42,.66);color:rgba(248,250,252,.92);border-color:rgba(148,163,184,.22)}body.dark .typing-stat-card strong,html.dark .typing-stat-card strong{color:rgba(248,250,252,.94)}body.dark .typing-input,html.dark .typing-input{background:rgba(15,23,42,.58);color:rgba(248,250,252,.92);border-color:rgba(148,163,184,.24)}body.dark .typing-text,html.dark .typing-text{background:rgba(15,23,42,.38);color:rgba(226,232,240,.74)}body.dark .typing-meta,html.dark .typing-meta{color:rgba(248,250,252,.88)}
@media(max-width:720px){.typing-page{padding:18px 12px 34px}.typing-topbar,.typing-stats{display:grid;grid-template-columns:1fr 1fr}.typing-mode-group{grid-column:1 / -1}.typing-sound-toggle{margin-left:0}.typing-card{border-radius:24px}.typing-text{font-size:1.02rem;padding:14px}.typing-input{min-height:120px}.typing-actions{display:grid;grid-template-columns:1fr 1fr}}