/* ============ 四级闯关 CET4 Quest ============ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --bg: #0f1220; --bg2: #161b30; --card: #1b2140; --card2: #222a52;
  --line: rgba(255,255,255,.08); --txt: #eef0ff; --sub: #9aa3c7;
  --orange: #ff7a3d; --pink: #ff4d6d; --purple: #8b5cf6; --blue: #4cc9f0;
  --green: #2dd4a7; --gold: #ffc53d;
  --grad: linear-gradient(135deg, #ff7a3d, #ff4d6d 55%, #8b5cf6);
  --radius: 18px;
  --nav-h: 62px;
}
html[data-theme="light"] {
  --bg: #f2f4fa; --bg2: #ffffff; --card: #ffffff; --card2: #edf0f8;
  --line: rgba(25,35,70,.1); --txt: #1b2138; --sub: #6b7594;
}
html[data-theme="light"] body { background: var(--bg); }
html[data-theme="light"] #tabbar { background: rgba(255,255,255,.94); border-top: 1px solid var(--line); }
html[data-theme="light"] .hero { background: linear-gradient(140deg, #ece7ff, #fff0f3 60%); border-color: rgba(139,92,246,.25); }
html[data-theme="light"] .hero::before { background: radial-gradient(circle, rgba(255,77,109,.18), transparent 70%); }
html[data-theme="light"] .exam-date { color: #7a5cf0; }
html[data-theme="light"] .passage { background: rgba(30,40,80,.05); }
html[data-theme="light"] .toast { background: rgba(255,255,255,.98); color: #1b2138; }
html[data-theme="light"] .wcard .sent, html[data-theme="light"] .dir-box, html[data-theme="light"] .trans-src { background: rgba(30,40,80,.05); }
html[data-theme="light"] .exam-tile, html[data-theme="light"] .level-item, html[data-theme="light"] .badge, html[data-theme="light"] .quick { box-shadow: 0 1px 4px rgba(30,40,80,.06); }
html[data-theme="light"] .modal-card { background: #fff; }
html[data-theme="light"] .opt-l.bank-w { background: var(--card2); }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", sans-serif;
  overscroll-behavior-y: none;
}
#app { max-width: 560px; margin: 0 auto; min-height: 100dvh; position: relative; }
.view { padding: 14px 14px calc(var(--nav-h) + 26px); }
button { font-family: inherit; border: none; cursor: pointer; color: inherit; background: none; }
input, textarea, select { font-family: inherit; }

/* ---------- tabbar ---------- */
#tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 560px; height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(18, 22, 42, .92); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); display: flex; z-index: 90;
}
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--sub); transition: .15s; }
.tab .t-ico { font-size: 22px; line-height: 1; filter: grayscale(.5); opacity: .85; transition: .15s; }
.tab .t-txt { font-size: 10.5px; }
.tab.active { color: #fff; }
.tab.active .t-ico { filter: none; opacity: 1; transform: translateY(-2px) scale(1.12); }
.tab.active .t-txt { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }

/* ---------- common ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.card-title { font-size: 15px; font-weight: 800; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.grad-txt { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 18px; border-radius: 14px; font-weight: 800; font-size: 15px;
  transition: transform .1s; user-select: none;
}
.btn:active { transform: scale(.96); }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 6px 18px rgba(255, 77, 109, .35); }
.btn-ghost { background: var(--card2); border: 1px solid var(--line); color: var(--txt); }
.btn-green { background: linear-gradient(135deg, #21c087, #14b8a6); color: #fff; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; background: var(--card2); border: 1px solid var(--line); color: var(--sub); }
.chip.hot { background: linear-gradient(135deg, rgba(255,122,61,.2), rgba(255,77,109,.2)); color: #ffb38a; border-color: rgba(255,122,61,.4); }
.progress { height: 10px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--grad); border-radius: 999px; transition: width .5s cubic-bezier(.22,1,.36,1); }
.hr { height: 1px; background: var(--line); margin: 12px 0; }
.sub { color: var(--sub); font-size: 12.5px; }
.en { font-family: Georgia, "Times New Roman", serif; }

/* ---------- home ---------- */
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.topbar .logo { font-weight: 900; font-size: 17px; }
.topbar .logo span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero {
  border-radius: 22px; padding: 18px; margin-bottom: 12px; position: relative; overflow: hidden;
  background: linear-gradient(140deg, #2a1a4a, #1b2140 60%); border: 1px solid rgba(139,92,246,.35);
}
.hero::before { content: ""; position: absolute; top: -40px; right: -30px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(255,77,109,.4), transparent 70%); }
.count-row { display: flex; align-items: baseline; gap: 10px; }
.count-num { font-size: 58px; font-weight: 900; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -2px; }
.count-label { color: var(--sub); font-size: 13px; }
.exam-date { margin-top: 6px; font-size: 12.5px; color: #c3b5ff; }
.stat-row { display: flex; gap: 10px; margin-bottom: 12px; }
.stat-box { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 10px; text-align: center; }
.stat-box .v { font-size: 20px; font-weight: 900; }
.stat-box .k { font-size: 11px; color: var(--sub); margin-top: 3px; }
.streak-flame { display: inline-block; animation: flick 1.6s infinite; }
@keyframes flick { 0%,100% { transform: scale(1) rotate(-2deg);} 50% { transform: scale(1.12) rotate(3deg);} }
.level-card { display: flex; align-items: center; gap: 12px; }
.xp-ring { --p: 0; width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--orange) calc(var(--p)*1%), rgba(255,255,255,.09) 0);
  display: flex; align-items: center; justify-content: center; position: relative; }
.xp-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--card); }
.xp-ring b { position: relative; font-size: 17px; font-weight: 900; }
.task-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.task-item:last-child { border-bottom: none; }
.task-check { width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--sub); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.task-check.done { background: var(--green); border-color: var(--green); color: #fff; }
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.quick { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 6px; transition: .12s; }
.quick:active { transform: scale(.97); }
.quick .q-ico { font-size: 24px; }
.quick .q-t { font-weight: 800; font-size: 14px; }
.quick .q-d { font-size: 11.5px; color: var(--sub); }
.heat { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; gap: 3px; }
.heat i { width: 11px; height: 11px; border-radius: 3px; background: rgba(255,255,255,.07); }
.heat i.l1 { background: rgba(255,122,61,.35); } .heat i.l2 { background: rgba(255,122,61,.6); }
.heat i.l3 { background: rgba(255,77,109,.85); } .heat i.l4 { background: var(--pink); }
.est-card { text-align: center; }
.est-num { font-size: 42px; font-weight: 900; }
.est-bar { height: 14px; border-radius: 999px; background: rgba(255,255,255,.08); position: relative; margin: 10px 0 6px; overflow: hidden; }
.est-bar > i { position: absolute; left: 0; top: 0; height: 100%; background: var(--grad); border-radius: 999px; }
.est-bar .pass { position: absolute; left: 59.8%; top: -4px; width: 2px; height: 22px; background: #fff; opacity: .7; }

/* ---------- words ---------- */
.mode-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.mode-tab { flex: 1; padding: 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--sub); font-weight: 700; font-size: 13.5px; }
.mode-tab.active { background: var(--card2); color: #fff; border-color: rgba(139,92,246,.5); }
.wcard { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 26px 20px; text-align: center; margin-bottom: 12px; position: relative; overflow: hidden; }
.wcard .word { font-size: 34px; font-weight: 800; letter-spacing: .5px; }
.wcard .phon { color: var(--blue); font-size: 14px; margin-top: 6px; min-height: 18px; }
.wcard .trans { margin-top: 14px; font-size: 16.5px; line-height: 1.65; min-height: 54px; }
.wcard .trans .pos { color: var(--gold); font-style: italic; margin-right: 4px; }
.wcard .hidden-trans { filter: blur(9px); user-select: none; transition: .3s; }
.wcard .sent { margin-top: 12px; font-size: 13.5px; color: var(--sub); line-height: 1.6; text-align: left; background: rgba(255,255,255,.04); border-radius: 12px; padding: 10px 12px; }
.wcard .sent b { color: var(--txt); }
.wcard .exam-tag { position: absolute; top: 12px; left: 12px; font-size: 10.5px; background: linear-gradient(135deg, rgba(255,122,61,.25), rgba(255,77,109,.25)); color: #ffb38a; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255,122,61,.4); }
.speak-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--card2); border: 1px solid var(--line); font-size: 19px; margin-top: 10px; }
.grade-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.grade { padding: 14px 6px; border-radius: 16px; font-weight: 800; font-size: 14.5px; display: flex; flex-direction: column; gap: 3px; align-items: center; transition: .12s; }
.grade:active { transform: scale(.94); }
.grade .g-ico { font-size: 22px; }
.grade.no { background: rgba(255,77,109,.16); border: 1px solid rgba(255,77,109,.45); color: #ff9db2; }
.grade.soso { background: rgba(255,197,61,.13); border: 1px solid rgba(255,197,61,.4); color: #ffd97a; }
.grade.yes { background: rgba(45,212,167,.13); border: 1px solid rgba(45,212,167,.45); color: #7cecc9; }
.w-session-bar { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--sub); margin-bottom: 8px; }
.wordlist-item { display: flex; justify-content: space-between; align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.wordlist-item .w { font-weight: 700; font-size: 15.5px; }
.wordlist-item .m { color: var(--sub); font-size: 12.5px; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-state { font-size: 11px; padding: 3px 8px; border-radius: 999px; flex-shrink: 0; }
.b-new { background: rgba(76,201,240,.15); color: var(--blue); }
.b-due { background: rgba(255,197,61,.15); color: var(--gold); }
.b-done { background: rgba(45,212,167,.15); color: var(--green); }

/* ---------- quiz / exam ---------- */
.map-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.season-h { font-size: 16px; font-weight: 900; margin: 16px 2px 10px; display: flex; align-items: center; gap: 8px; }
.season-h::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--grad); }
.exam-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.exam-tile { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 13px; position: relative; transition: .12s; }
.exam-tile:active { transform: scale(.97); }
.exam-tile .et-t { font-weight: 800; font-size: 14px; }
.exam-tile .et-s { margin-top: 4px; font-size: 11.5px; color: var(--sub); }
.exam-tile .et-stars { margin-top: 7px; font-size: 12px; letter-spacing: 2px; color: var(--gold); }
.level-list { display: flex; flex-direction: column; gap: 10px; }
.level-item { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; align-items: center; gap: 12px; transition: .12s; }
.level-item:active { transform: scale(.98); }
.level-item.locked { opacity: .55; }
.level-item .li-ico { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--card2); flex-shrink: 0; }
.level-item.done .li-ico { background: linear-gradient(135deg, rgba(255,122,61,.3), rgba(139,92,246,.3)); }
.level-item .li-t { font-weight: 800; font-size: 14.5px; }
.level-item .li-d { font-size: 11.5px; color: var(--sub); margin-top: 2px; }
.level-item .li-right { margin-left: auto; text-align: right; font-size: 12px; color: var(--gold); flex-shrink: 0; }
.quiz-pass { text-align: center; color: var(--sub); font-size: 12px; margin: 8px 0; }
.q-count { font-size: 12.5px; color: var(--sub); display: flex; justify-content: space-between; margin-bottom: 10px; }
.q-stem { font-size: 16.5px; line-height: 1.7; margin-bottom: 14px; }
.q-stem .blank { color: var(--orange); font-weight: 900; }
.q-stem .filled { color: var(--green); font-weight: 700; border-bottom: 2px solid var(--green); }
.opt { display: block; width: 100%; text-align: left; padding: 13px 14px; border-radius: 14px; background: var(--card); border: 1.5px solid var(--line); margin-bottom: 9px; font-size: 14.5px; line-height: 1.55; transition: .12s; }
.opt:active { transform: scale(.98); }
.opt .ol { display: inline-flex; width: 24px; height: 24px; border-radius: 8px; background: var(--card2); align-items: center; justify-content: center; font-weight: 800; font-size: 12.5px; margin-right: 9px; flex-shrink: 0; }
.opt.correct { border-color: var(--green); background: rgba(45,212,167,.14); }
.opt.correct .ol { background: var(--green); color: #fff; }
.opt.wrong { border-color: var(--pink); background: rgba(255,77,109,.12); animation: shake .35s; }
.opt.wrong .ol { background: var(--pink); color: #fff; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.passage { background: rgba(255,255,255,.045); border-radius: 14px; padding: 14px; font-size: 14.5px; line-height: 1.85; margin-bottom: 14px; max-height: 46vh; overflow-y: auto; }
.passage.tight { max-height: 30vh; }
.paragraph { margin-bottom: 8px; }
.paragraph .pl { color: var(--gold); font-weight: 800; margin-right: 5px; }
.fb-banner { border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; font-size: 13.5px; line-height: 1.6; }
.fb-ok { background: rgba(45,212,167,.13); border: 1px solid rgba(45,212,167,.4); }
.fb-no { background: rgba(255,77,109,.12); border: 1px solid rgba(255,77,109,.4); }
.combo-pop { position: fixed; left: 50%; top: 34%; transform: translateX(-50%); font-size: 30px; font-weight: 900; color: var(--gold); text-shadow: 0 0 24px rgba(255,197,61,.6); pointer-events: none; z-index: 200; animation: combo .8s forwards; }
@keyframes combo { 0%{opacity:0; transform:translateX(-50%) scale(.4)} 25%{opacity:1; transform:translateX(-50%) scale(1.15)} 75%{transform:translateX(-50%) scale(1)} 100%{opacity:0; transform:translateX(-50%) scale(1) translateY(-30px)} }
.xp-float { position: fixed; font-weight: 900; color: var(--green); z-index: 210; pointer-events: none; animation: xpfloat 1s forwards; font-size: 17px; }
@keyframes xpfloat { 0%{opacity:0; transform:translateY(6px)} 20%{opacity:1} 100%{opacity:0; transform:translateY(-44px)} }
.bank-words { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 14px; }
.bank-w { padding: 6px 11px; border-radius: 10px; background: var(--card2); border: 1px solid var(--line); font-size: 13px; }
.bank-w .bl { color: var(--gold); font-weight: 800; margin-right: 3px; }
.bank-w.used { opacity: .35; }
.bank-w.picked { border-color: var(--orange); background: rgba(255,122,61,.18); }
.bank-w.correct { border-color: var(--green); background: rgba(45,212,167,.2); }
.bank-w.wrong { border-color: var(--pink); background: rgba(255,77,109,.15); animation: shake .3s; }
.trans-src { font-size: 15.5px; line-height: 1.95; background: rgba(255,255,255,.045); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.answer-area textarea, .answer-area input {
  width: 100%; background: var(--card); border: 1px solid var(--line); color: var(--txt);
  border-radius: 14px; padding: 13px; font-size: 15px; line-height: 1.7; min-height: 130px; resize: vertical;
}
.ref-box { background: rgba(76,201,240,.07); border: 1px solid rgba(76,201,240,.3); border-radius: 14px; padding: 13px; margin-top: 10px; font-size: 13.5px; line-height: 1.7; color: #c8e9f7; }
.ref-box .rb-t { font-weight: 800; color: var(--blue); margin-bottom: 6px; font-size: 12.5px; }
audio { width: 100%; margin: 10px 0 4px; border-radius: 10px; }
.rate-btns { display: flex; gap: 6px; margin-bottom: 8px; }
.rate-btn { padding: 6px 13px; border-radius: 999px; background: var(--card2); font-size: 12.5px; color: var(--sub); border: 1px solid var(--line); }
.rate-btn.on { color: #fff; border-color: var(--orange); background: rgba(255,122,61,.2); }
.result-hero { text-align: center; padding: 26px 16px; }
.result-hero .rh-emoji { font-size: 54px; }
.result-hero .rh-num { font-size: 46px; font-weight: 900; margin: 8px 0 2px; }
.stars-big { font-size: 34px; letter-spacing: 6px; margin: 6px 0; }
.stars-big .off { opacity: .22; }

/* ---------- games ---------- */
.game-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.game-tile { border-radius: 20px; padding: 18px; position: relative; overflow: hidden; border: 1px solid var(--line); transition: .12s; }
.game-tile:active { transform: scale(.98); }
.game-tile .g-emoji { font-size: 34px; }
.game-tile .g-name { font-size: 17px; font-weight: 900; margin-top: 8px; }
.game-tile .g-desc { font-size: 12.5px; color: var(--sub); margin-top: 4px; }
.wl-board { display: grid; grid-template-rows: repeat(6, 1fr); gap: 6px; max-width: 330px; margin: 0 auto 14px; }
.wl-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wl-cell { aspect-ratio: 1; border: 2px solid var(--line); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 800; text-transform: uppercase; }
.wl-cell.filled { border-color: var(--sub); animation: pop .18s; }
.wl-cell.hit { background: var(--green); border-color: var(--green); color: #04281d; }
.wl-cell.near { background: var(--gold); border-color: var(--gold); color: #3d2c00; }
.wl-cell.miss { background: var(--card2); border-color: var(--card2); color: var(--sub); }
@keyframes pop { 0%{transform:scale(.85)} 60%{transform:scale(1.06)} 100%{transform:scale(1)} }
.wl-key { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; max-width: 420px; margin: 0 auto; }
.wl-key button { grid-column: span 2; aspect-ratio: 1.15; border-radius: 8px; background: var(--card2); font-weight: 800; font-size: 14px; text-transform: uppercase; border: 1px solid var(--line); }
.wl-key button.wk-enter { grid-column: span 3; background: var(--green); color: #fff; }
.wl-key button.wk-del { grid-column: span 3; background: var(--pink); color: #fff; }
.wl-key button:disabled { opacity: .4; }
.match-tile { aspect-ratio: 1; border-radius: 14px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px; font-size: 12.5px; line-height: 1.35; background: var(--card); border: 1.5px solid var(--line); transition: .12s; font-weight: 600; }
.match-tile:active { transform: scale(.95); }
.match-tile.en-t { font-size: 14px; font-weight: 800; }
.match-tile.sel { border-color: var(--orange); background: rgba(255,122,61,.18); }
.match-tile.ok { border-color: var(--green); background: rgba(45,212,167,.2); opacity: .55; }
.match-tile.no { border-color: var(--pink); animation: shake .3s; }
.match-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ---------- me ---------- */
.me-head { display: flex; align-items: center; gap: 14px; padding: 6px 2px 14px; }
.pet { font-size: 52px; filter: drop-shadow(0 4px 14px rgba(255,122,61,.4)); }
.pet-name { font-size: 12px; color: var(--sub); }
.badge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.badge { text-align: center; padding: 10px 4px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.badge .b-emoji { font-size: 24px; }
.badge.locked { opacity: .3; filter: grayscale(1); }
.badge .b-name { font-size: 10.5px; color: var(--sub); margin-top: 4px; }
.set-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 2px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.seg { display: flex; gap: 5px; }
.seg button { padding: 6px 12px; border-radius: 9px; background: var(--card2); border: 1px solid var(--line); font-size: 12.5px; color: var(--sub); }
.seg button.on { background: var(--grad); color: #fff; border: none; }

/* ---------- toast / modal / confetti ---------- */
#toast-wrap { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: rgba(30, 36, 68, .96); border: 1px solid var(--line); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 700; box-shadow: 0 8px 30px rgba(0,0,0,.4); animation: toastIn .25s; max-width: 86vw; text-align: center; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-12px);} }
.modal-mask { position: fixed; inset: 0; background: rgba(5,8,18,.72); backdrop-filter: blur(4px); z-index: 250; display: flex; align-items: flex-end; justify-content: center; animation: fadeIn .2s; }
.modal-card { width: 100%; max-width: 560px; background: var(--bg2); border-radius: 24px 24px 0 0; padding: 20px 18px calc(24px + env(safe-area-inset-bottom)); animation: slideUp .25s; max-height: 82dvh; overflow-y: auto; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes slideUp { from { transform: translateY(60px); opacity: .6; } }
.confetti { position: fixed; top: -14px; z-index: 400; font-size: 16px; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(105dvh) rotate(660deg); opacity: .7; } }
.lvlup { position: fixed; inset: 0; z-index: 350; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(8,10,22,.86); backdrop-filter: blur(6px); animation: fadeIn .3s; }
.lvlup .lu-t { font-size: 15px; color: var(--sub); letter-spacing: 6px; }
.lvlup .lu-n { font-size: 74px; font-weight: 900; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; animation: pop .5s; }
.lvlup .lu-title { font-size: 20px; font-weight: 900; margin-top: 8px; }
.empty-hint { text-align: center; color: var(--sub); padding: 40px 16px; font-size: 14px; line-height: 2; }
.dir-box { font-size: 13.5px; color: var(--sub); line-height: 1.7; background: rgba(255,255,255,.04); border-radius: 12px; padding: 11px 13px; margin-bottom: 12px; }

/* ---------- 句境模式 ---------- */
.ctx-box { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: 14px; padding: 14px 15px; margin-bottom: 4px; }
.ctx-src { font-size: 11px; color: var(--gold); font-weight: 800; margin-bottom: 9px; letter-spacing: .5px; }
.ctx-sent { font-size: 16.5px; line-height: 2; }
.ctx-sent u.hl { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 5px; font-weight: 700; background: rgba(255,122,61,.13); padding: 0 4px; border-radius: 4px; }
html[data-theme="light"] .ctx-sent u.hl { background: rgba(255,122,61,.18); }
.ctx-cn { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line); }

/* ---------- 打字模式 ---------- */
.typing-area { display: flex; gap: 8px; margin-bottom: 10px; }
.typing-area input {
  flex: 1; background: var(--card); border: 1.5px solid var(--line); color: var(--txt);
  border-radius: 14px; padding: 13px 15px; font-size: 16px; outline: none; transition: .2s;
}
.typing-area input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,122,61,.15); }
.typing-area .btn { padding: 12px 20px; }
/* 页面切换动效 */
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#view.vin > * { animation: viewIn .3s cubic-bezier(.22,1,.36,1) both; }
#view.vin > *:nth-child(2) { animation-delay: .04s; }
#view.vin > *:nth-child(3) { animation-delay: .08s; }
#view.vin > *:nth-child(n+4) { animation-delay: .11s; }
/* 引导 */
.onb-card { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 1px dashed var(--line); }
.onb-card:last-of-type { border-bottom: none; }
.onb-ico { font-size: 26px; flex-shrink: 0; }