:root { --ink:#14213d; --muted:#64748b; --blue:#2458ca; --blue-dark:#173c91; --blue-pale:#edf4ff; --line:#dbe5f2; --card:#fff; --green:#0b8f62; --red:#b42318; --shadow:0 14px 34px rgba(22,47,94,.11); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif; color:var(--ink); background:linear-gradient(130deg,#eaf2ff 0%,#f7faff 47%,#eef7f4 100%); }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
.typing-shell { max-width:1180px; min-height:100vh; margin:0 auto; padding:24px; }
.loading-card,.panel,.hero,.result-card { border:1px solid rgba(255,255,255,.82); background:rgba(255,255,255,.91); border-radius:20px; box-shadow:var(--shadow); }
.loading-card { max-width:460px; margin:13vh auto; padding:44px 30px; text-align:center; }
.typing-mark { display:inline-flex; width:52px; height:52px; align-items:center; justify-content:center; border-radius:16px; color:#fff; background:linear-gradient(135deg,var(--blue),#58a1fd); font-size:27px; }
.loading-card h1 { margin:18px 0 8px; font-size:1.4rem; }.loading-card p { color:var(--muted); }
.app-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }.brand { display:flex; gap:12px; align-items:center; text-decoration:none; }.brand-mark { display:grid; place-items:center; width:42px; height:42px; color:#fff; background:var(--blue); border-radius:13px; font-weight:900; }.brand b { display:block; font-size:1.06rem; }.brand small,.user-block small { color:var(--muted); }.user-block { text-align:right; }
.hero { padding:28px; background:linear-gradient(118deg,#113a91,#2866d6 58%,#49a2e4); color:#fff; }.hero-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:24px; align-items:center; }.eyebrow { margin:0 0 7px; letter-spacing:.08em; font-size:.76rem; font-weight:800; opacity:.82; }.hero h1 { margin:0; font-size:clamp(1.65rem,3vw,2.5rem); }.hero p { line-height:1.75; opacity:.93; }.stat-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.stat-strip div { padding:13px 10px; border:1px solid rgba(255,255,255,.3); border-radius:13px; background:rgba(8,26,83,.19); text-align:center; }.stat-strip strong,.stat-strip span { display:block; }.stat-strip strong { font-size:1.25rem; }.stat-strip span { margin-top:3px; font-size:.76rem; opacity:.86; }
.main-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:20px; margin-top:20px; }.panel { padding:22px; }.panel h2 { margin:0 0 4px; font-size:1.15rem; }.panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:18px; }.panel-note { margin:0; color:var(--muted); font-size:.88rem; line-height:1.6; }
.choice-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }.choice { border:1px solid var(--line); border-radius:12px; padding:14px; background:#fff; text-align:left; color:var(--ink); }.choice b,.choice small { display:block; }.choice small { margin-top:4px; color:var(--muted); }.choice.active { border-color:var(--blue); box-shadow:0 0 0 3px rgba(36,88,202,.14); background:var(--blue-pale); }.duration-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }.duration { padding:12px 8px; border:1px solid var(--line); border-radius:11px; background:#fff; color:var(--ink); font-weight:800; }.duration.active { color:#fff; border-color:var(--blue); background:var(--blue); }
.primary,.secondary,.text-button { border:0; border-radius:10px; padding:11px 15px; font-weight:800; }.primary { color:#fff; background:var(--blue); box-shadow:0 4px 10px rgba(36,88,202,.25); }.primary:hover { background:var(--blue-dark); }.secondary { border:1px solid var(--line); color:var(--ink); background:#fff; }.danger { color:#fff; background:var(--red); }.start-line { display:flex; gap:10px; align-items:center; margin-top:20px; }.start-line small { color:var(--muted); }
.segmented { display:flex; flex-wrap:wrap; gap:7px; }.seg { border:1px solid var(--line); border-radius:9px; padding:7px 10px; color:var(--muted); background:#fff; font-size:.83rem; font-weight:800; }.seg.active { color:#fff; border-color:var(--blue); background:var(--blue); }.leaderboard-tabs { margin-bottom:14px; }.leaderboard-list { display:grid; gap:7px; }.rank-row { display:grid; grid-template-columns:30px 1fr auto; gap:9px; align-items:center; padding:9px 8px; border-bottom:1px solid #edf0f5; }.rank-row:last-child { border:0; }.rank { display:grid; width:26px; height:26px; place-items:center; border-radius:50%; background:#eef3fa; color:#42536b; font-weight:900; font-size:.8rem; }.rank.top { color:#745200; background:#fff0bd; }.rank-user b,.rank-user small { display:block; }.rank-user small { color:var(--muted); font-size:.75rem; }.rank-score { text-align:right; }.rank-score strong,.rank-score small { display:block; }.rank-score strong { color:var(--blue); }.rank-score small { color:var(--muted); font-size:.72rem; }
.test-shell { max-width:1020px; margin:0 auto; }.test-top { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:16px 0; }.timer { min-width:105px; padding:10px 14px; border-radius:12px; text-align:center; color:#fff; background:#162957; font-variant-numeric:tabular-nums; font-size:1.35rem; font-weight:900; }.timer.warning { background:var(--red); }.test-card { padding:24px; }.prompt-text { height:clamp(190px,30vh,300px); min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:18px; border-left:5px solid var(--blue); border-radius:10px; background:#f5f8fc; color:#233957; font-size:1.1rem; line-height:2; white-space:pre-wrap; }.typing-scroll-note { margin:.5rem 0 0; color:#63748a; font-size:.78rem; line-height:1.45; }.typing-input { width:100%; min-height:180px; margin-top:18px; padding:15px; border:2px solid var(--line); border-radius:12px; outline:0; resize:vertical; line-height:1.75; }
/* 中文系統輸入法通常把候選字清單浮於輸入欄上方；保留此空白區可避免清單遮住題文。 */
.ime-candidate-buffer { display:none; }
.zh-ime-layout .ime-candidate-buffer { display:block; height:168px; margin:8px 0 0; }
.zh-ime-layout .typing-input { margin-top:0; }.typing-input:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(36,88,202,.13); }.live-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:17px 0; }.live-metrics div { padding:10px; border-radius:10px; background:var(--blue-pale); }.live-metrics span,.live-metrics strong { display:block; }.live-metrics span { color:var(--muted); font-size:.78rem; }.live-metrics strong { margin-top:2px; color:var(--blue-dark); }.test-actions { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:20px; padding-top:17px; border-top:1px solid var(--line); }.test-actions small { color:var(--muted); font-size:.82rem; line-height:1.55; }.secondary.danger { border-color:#b42318; color:#fff; background:var(--red); }.secondary.danger:hover { background:#8e1a13; }
.result-card { max-width:720px; margin:8vh auto; padding:32px; text-align:center; }.result-card h1 { margin:7px 0; }.result-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:24px 0; }.result-grid div { padding:13px 7px; border-radius:11px; background:var(--blue-pale); }.result-grid span,.result-grid strong { display:block; }.result-grid span { font-size:.78rem; color:var(--muted); }.result-grid strong { margin-top:4px; color:var(--blue-dark); }.result-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.teacher-panel { margin-top:20px; }.filters { display:grid; grid-template-columns:1.2fr 1fr 1fr auto; gap:10px; align-items:end; }.field label { display:block; margin-bottom:5px; color:#43536a; font-size:.8rem; font-weight:800; }.field select { width:100%; padding:10px; border:1px solid var(--line); border-radius:10px; background:#fff; }.table-wrap { overflow:auto; margin-top:14px; }.score-table { width:100%; min-width:700px; border-collapse:collapse; font-size:.88rem; }.score-table th,.score-table td { padding:10px; border-bottom:1px solid #e9eef5; text-align:left; }.score-table th { color:#51627a; background:#f5f8fc; font-size:.78rem; }.empty { padding:20px; color:var(--muted); text-align:center; }.notice { margin:14px 0; padding:11px 13px; border-radius:10px; color:#754d00; background:#fff7db; font-size:.86rem; }.hidden { display:none!important; }
@media (max-width:760px) { .typing-shell { padding:14px; }.app-head,.hero-grid,.main-grid { display:block; }.user-block { margin-top:8px; text-align:left; }.hero { padding:22px; }.stat-strip { margin-top:18px; }.main-grid { margin-top:14px; }.panel { margin-bottom:14px; padding:17px; }.filters { grid-template-columns:1fr 1fr; }.filters .field:first-child { grid-column:span 2; }.filters button { grid-column:span 2; }.choice-grid { grid-template-columns:1fr; }.result-grid { grid-template-columns:repeat(2,1fr); }.test-card { padding:16px; }.live-metrics { grid-template-columns:1fr; }.test-top { align-items:flex-start; }.prompt-text { height:clamp(180px,28vh,240px); padding:14px; font-size:1rem; line-height:1.85; }.zh-ime-layout .ime-candidate-buffer { height:132px; }.start-line,.test-actions { align-items:flex-start; flex-direction:column; }.start-line .primary,.test-actions button { width:100%; } }

/* 逐字輸入引導：綠色為正確、藍色為目前字、紅色為錯誤 */
.typing-guide-key { display:flex; flex-wrap:wrap; gap:.65rem 1rem; margin-bottom:.8rem; color:#5b6b80; font-size:.8rem; font-weight:700; }
.typing-guide-key span { display:inline-flex; align-items:center; gap:.35rem; }
.guide-dot { width:.72rem; height:.72rem; border-radius:50%; display:inline-block; }
.guide-correct { background:#16875d; }.guide-current { background:#1d61d4; }.guide-incorrect { background:#d33831; }
.typing-prompt { letter-spacing:.02em; overflow-wrap:anywhere; word-break:normal; }
.typing-char { display:inline; min-width:0; border-radius:.22rem; box-decoration-break:clone; -webkit-box-decoration-break:clone; transition:color .12s ease, background-color .12s ease, box-shadow .12s ease; }
.type-pending { color:#425772; }
.type-correct { color:#08734d; background:#dff8eb; font-weight:750; }
.type-current { position:relative; z-index:0; color:#123f99; background:#d8e8ff; box-shadow:inset 0 -2px 0 #1d61d4; font-weight:900; animation:typing-caret 1.1s ease-in-out infinite; }
.type-incorrect { color:#ae211c; background:#fee4e2; text-decoration:underline wavy #d33831 1px; font-weight:750; }
.typing-position { margin:.55rem 0; color:#2458a9; font-size:.82rem; font-weight:800; }
@keyframes typing-caret { 50% { background:#afceff; } }
@media (prefers-reduced-motion:reduce) { .type-current { animation:none; } }

/* 老師／管理員測試文章庫 */
.typing-prompt-list { display:grid; gap:.8rem; margin-top:1rem; }
.typing-prompt-card { padding:1rem; border:1px solid #dbe5f2; border-radius:.8rem; background:#fbfdff; }
.typing-prompt-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.typing-prompt-card h3 { margin:.45rem 0 0; color:#162b50; font-size:1rem; }
.typing-prompt-card p { margin:.75rem 0 .55rem; color:#455c78; line-height:1.65; white-space:pre-wrap; }
.typing-prompt-card small { color:#63748a; }
.prompt-status { display:inline-block; padding:.2rem .5rem; border-radius:99rem; font-size:.73rem; font-weight:800; }
.prompt-status.active { color:#08734d; background:#ddf8e9; }.prompt-status.inactive { color:#7a5200; background:#fff2c6; }
.prompt-meta { margin-left:.4rem; color:#61728a; font-size:.8rem; font-weight:700; }
.prompt-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.45rem; }.prompt-actions .secondary { padding:.45rem .65rem; font-size:.8rem; }
.typing-modal { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:1.5rem; overflow:auto; background:rgba(13,27,54,.48); }
.typing-modal-card { width:min(790px,100%); max-height:calc(100vh - 3rem); overflow:auto; padding:1.4rem; border-radius:1rem; background:#fff; box-shadow:0 20px 65px rgba(6,21,49,.32); }
.typing-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }.typing-modal-head h2 { margin:0; color:#142b52; }.typing-modal-head p { margin:.4rem 0 0; color:#68788e; font-size:.86rem; line-height:1.5; }
.typing-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }.form-span { grid-column:span 2; }.typing-form-grid input,.typing-form-grid select,.typing-form-grid textarea { width:100%; padding:.7rem .8rem; border:1px solid #cbd8ea; border-radius:.6rem; outline:0; background:#fff; }.typing-form-grid textarea { min-height:92px; line-height:1.65; resize:vertical; }.typing-form-grid #typing-form-body { min-height:210px; }.typing-form-grid input:focus,.typing-form-grid select:focus,.typing-form-grid textarea:focus { border-color:#2458ca; box-shadow:0 0 0 3px rgba(36,88,202,.12); }
.ai-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.35rem; }.form-count { display:block; margin-top:.4rem; color:#61728a; font-size:.8rem; }.typing-modal-actions { display:flex; justify-content:flex-end; gap:.65rem; margin-top:1.1rem; }
@media(max-width:700px) { .typing-prompt-card-head { display:block; }.prompt-actions { justify-content:flex-start; margin-top:.75rem; }.typing-form-grid { grid-template-columns:1fr; }.form-span { grid-column:span 1; }.typing-modal { padding:.6rem; }.typing-modal-card { max-height:calc(100vh - 1.2rem); padding:1rem; }.typing-modal-head { display:block; }.typing-modal-head button { margin-top:.7rem; }.ai-row { align-items:flex-start; flex-direction:column; gap:.45rem; }.typing-modal-actions { flex-direction:column-reverse; }.typing-modal-actions button { width:100%; } }