:root{
  --bg:#ffffff;
  --fg:#0a0a0a;
  --muted:#737373;
  --line:#e5e5e5;
  --soft:#f4f4f4;
  --card:#ffffff;
  --radius:20px;
  --shadow:0 18px 50px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.page{max-width:680px;margin:0 auto;padding:22px 18px 40px}

/* top */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:42px;height:42px;border:2px solid var(--fg);border-radius:12px;display:grid;align-content:center;gap:4px;padding:10px 8px}
.brand-mark span{display:block;height:2px;background:var(--fg)}
.brand-mark span:nth-child(2){width:70%}
.brand-mark span:nth-child(3){width:45%}
.brand h1{font-size:20px;margin:0;letter-spacing:-.02em}
.brand p{font-size:12px;color:var(--muted);margin:3px 0 0}
.timer-btn{
  display:flex;align-items:center;gap:8px;min-width:150px;justify-content:center;
  border:1.5px solid var(--fg);background:var(--fg);color:#fff;border-radius:999px;
  padding:10px 14px;cursor:pointer;font:inherit;font-size:13px;
}
.timer-btn.paused{background:#fff;color:var(--fg)}
.timer-dot{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.4)}
.timer-btn.paused .timer-dot{background:var(--fg);box-shadow:none}
.timer-btn strong{font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.stat{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:12px 12px 10px;min-width:0}
.stat-label{display:block;font-size:11px;color:var(--muted);margin-bottom:6px}
.stat strong{display:block;font-size:18px;font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.stat small{display:block;color:var(--muted);font-size:11px;margin-top:3px}

/* category chips */
.cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.cat{
  border:1.5px solid var(--line);background:#fff;color:var(--fg);
  border-radius:999px;padding:8px 14px;font:inherit;font-size:13px;cursor:pointer;
}
.cat:hover{border-color:#a3a3a3}
.cat.active{background:var(--fg);color:#fff;border-color:var(--fg)}

/* card */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 22px;position:relative}
.word-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.word-head h2{font-size:clamp(24px,7vw,34px);line-height:1.35;margin:0;letter-spacing:-.01em;word-break:break-word}
.phonetic{font-size:14px;color:var(--muted);margin:10px 0 0;min-height:0}
.pos-box{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px}
.pos-label{font-size:11px;color:var(--muted)}
.pos{border:1.5px solid var(--fg);border-radius:8px;padding:5px 9px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.question-hint{font-size:13px;color:var(--muted);margin:22px 0 10px}
.answer-form{display:flex;gap:10px}
.answer-input{
  flex:1;min-width:0;border:1.5px solid var(--line);background:#fff;color:var(--fg);
  border-radius:14px;padding:14px 14px;font:inherit;font-size:16px;outline:none;
}
.answer-input:focus{border-color:var(--fg)}
.answer-input.correct{border-color:var(--fg);background:var(--fg);color:#fff}
.answer-input.wrong{border-color:var(--fg);background:#fff;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--fg)}
.submit-btn{
  border:1.5px solid var(--fg);background:var(--fg);color:#fff;border-radius:14px;
  padding:14px 18px;font:inherit;font-size:15px;font-weight:700;cursor:pointer;
}
.submit-btn:hover{opacity:.9}
.submit-btn:disabled{opacity:.45;cursor:default}
.skip-btn{
  border:1.5px solid var(--line);background:#fff;color:var(--fg);border-radius:14px;
  padding:14px 16px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;
}
.skip-btn:hover{border-color:var(--fg)}
.skip-btn:disabled{opacity:.4;cursor:default}
.feedback{margin-top:18px;border-top:1.5px solid var(--fg);padding-top:16px;font-size:14px;line-height:1.7}
.feedback .verdict{font-weight:700;font-size:16px;display:block;margin-bottom:6px}
.feedback .ans{display:inline-block;background:var(--fg);color:#fff;border-radius:8px;padding:2px 8px;margin:0 4px;font-weight:600}
.feedback .user-ans{display:inline-block;border:1px solid var(--fg);border-radius:8px;padding:2px 8px;margin:0 4px}
.primary{
  width:100%;margin-top:16px;border:none;background:var(--fg);color:#fff;
  border-radius:14px;padding:14px;font:inherit;font-size:15px;font-weight:700;cursor:pointer;
}
.primary:hover{opacity:.9}
.primary[hidden]{display:none}

/* footer */
.footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;font-size:12px;color:var(--muted)}
.ghost{border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;padding:7px 12px;font:inherit;font-size:12px;cursor:pointer}
.ghost:hover{color:var(--fg);border-color:var(--fg)}

@media (max-width:520px){
  .page{padding:18px 14px 32px}
  .topbar{flex-direction:column;align-items:stretch}
  .timer-btn{width:100%}
  .stats{grid-template-columns:repeat(2,1fr);gap:8px}
  .stat{padding:10px}
  .stat strong{font-size:16px}
  .card{padding:22px 16px}
  .word-head h2{font-size:31px}
  .answer-form{flex-direction:column}
  .submit-btn{width:100%}
  .skip-btn{width:100%}
}

/* splash intro */
.splash{position:fixed;inset:0;z-index:100;background:#000;display:grid;place-items:center;overflow:hidden;animation:splash 3.2s ease forwards}
.splash-word{
  color:#fff;font-size:clamp(28px,7vw,56px);font-weight:600;letter-spacing:.22em;
  text-transform:lowercase;opacity:0;transform:scale(.94);
  animation:splash-word 3.2s ease forwards;
}
@keyframes splash{
  0%{opacity:1;visibility:visible}
  70%{opacity:1;visibility:visible}
  100%{opacity:0;visibility:hidden}
}
@keyframes splash-word{
  0%{opacity:0;transform:scale(.94);letter-spacing:.34em;filter:blur(6px)}
  22%{opacity:1;transform:scale(1);letter-spacing:.22em;filter:blur(0)}
  78%{opacity:1;filter:blur(0)}
  100%{opacity:0;transform:scale(1.03);filter:blur(3px)}
}

.license-link{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px}
.license-link:hover{color:var(--fg);border-color:var(--fg)}

/* mode nav and extra sections */
.modes{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.mode{border:1.5px solid var(--line);background:#fff;color:var(--fg);border-radius:999px;padding:9px 15px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.mode:hover{border-color:#a3a3a3}
.mode.active{background:var(--fg);color:#fff;border-color:var(--fg)}
.mode.locked{opacity:.6}
.mode-hint{font-size:13px;color:var(--muted);margin:0 0 18px}
.mode-progress{font-size:12px;color:var(--muted);margin:12px 0 0}
.vocab-head h2{font-size:36px;margin:0;letter-spacing:-.01em;word-break:break-word}
.vocab-actions{display:flex;gap:10px;margin-top:20px}
.vocab-actions .submit-btn,.vocab-actions .skip-btn{flex:1}
.sentence-zh{font-size:24px;line-height:1.5;margin:0 0 14px}
.sentence-en{font-size:18px;line-height:1.7;margin:0 0 12px;border-left:3px solid var(--fg);padding-left:12px}
.sentence-pos{font-size:13px;color:var(--muted);margin:0 0 12px;min-height:18px}
@media (max-width:520px){
  .mode{flex:1;text-align:center;padding:9px 8px;font-size:13px}
  .vocab-actions{flex-direction:column}
}