:root {
  /* 色卡「夢境のグラデーション」：#7181c8 · #ababdc · #b7d3f4 · #f1cfed · #f1e5f6（+ 远黛蓝 #aabce6） */
  --c1: #7181c8; --c2: #ababdc; --c3: #b7d3f4; --c4: #f1cfed; --c5: #f1e5f6;
  --bg: #f5f3fb; --bg-grad: linear-gradient(160deg, #e3edfb 0%, #ece7f8 45%, #f8e6f4 100%);
  --card: rgba(255,255,255,.86); --ink: #33365a; --muted: #7a7c9c; --line: #e4e0f2;
  --accent: #5e6cb8; --accent-2: #a99bdb; --accent-soft: #ecebf9; --grad: linear-gradient(120deg, #7181c8, #ababdc 55%, #e2b6e0);
  --warn: #c0668a; --bad: #d05a74; --good: #4f9c95;
  --r: 16px; --shadow: 0 4px 18px rgba(113,129,200,.10);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1c1d33; --bg-grad: linear-gradient(160deg, #1a2038 0%, #221f3a 50%, #2b2140 100%); --card: rgba(40,40,70,.82); --ink: #e8e6f6; --muted: #a4a3c4; --line: #3a3a60; --accent: #b7c3f4; --accent-2: #c9b3ea; --accent-soft: #33345c; --grad: linear-gradient(120deg, #5e6cb8, #8a82c8 55%, #b88bc4); --warn: #f0a6c4; --bad: #f08aa0; --good: #7fd0c4; --shadow: none; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg-grad) fixed, var(--bg); color: var(--ink); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: .2em 0 .4em; } h2 { font-size: 1.25rem; margin: .2em 0; } h3 { font-size: 1.05rem; margin: .2em 0 .5em; } h4 { margin: .8em 0 .3em; font-size: .95rem; }
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea { background: var(--card); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; max-width: 100%; }
textarea { width: 100%; resize: vertical; }
button, .btn { display: inline-flex; align-items: center; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 7px; padding: 6px 12px; cursor: pointer; color: var(--ink); text-decoration: none !important; white-space: nowrap; }
button:hover, .btn:hover { border-color: var(--accent); }
button:disabled { opacity: .5; cursor: default; }
.primary { background: var(--grad); border-color: transparent; color: #fff !important; box-shadow: 0 3px 10px rgba(113,129,200,.3); text-shadow: 0 1px 2px rgba(60,60,120,.25); }
.primary:hover { filter: brightness(1.06); }
.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.small { padding: 3px 9px; font-size: .88rem; } .tiny { padding: 1px 7px; font-size: .78rem; }
.muted { color: var(--muted); } .warn { color: var(--warn); } .dim { opacity: .25; }
.small-text { font-size: .85rem; } .pre { white-space: pre-wrap; } .grow { flex: 1; min-width: 0; } .done { text-decoration: line-through; opacity: .6; }
mark { background: #f1cfed; color: #33365a; border-radius: 2px; }

/* layout */
.shell { display: flex; flex-direction: column; min-height: 100vh; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding: 8px 16px; background: linear-gradient(100deg, #b7d3f4 0%, #ababdc 45%, #f1cfed 100%); position: sticky; top: 0; z-index: 10; box-shadow: 0 3px 16px rgba(113,129,200,.22); }
.nav a { padding: 5px 12px; border-radius: 999px; color: #3f4579; text-decoration: none !important; }
.nav a:hover { background: rgba(255,255,255,.4); }
.nav a.on { background: rgba(255,255,255,.9); color: #5e6cb8; font-weight: 600; box-shadow: 0 2px 8px rgba(113,129,200,.25); }
.nav .brand { font-weight: 700; color: #4a4f93; margin-right: 10px; background: none !important; letter-spacing: .5px; }
.nav-ai { margin-left: auto; font-size: .8rem; color: #5a5d8c; }
.nav-refresh { flex: none; width: 32px; height: 32px; padding: 0; margin-right: 6px; border-radius: 50%; border: none; background: rgba(255,255,255,.55); color: #4a4f93; font-size: 1.1rem; line-height: 32px; cursor: pointer; }
.nav-refresh:hover { background: rgba(255,255,255,.9); }
.nav-refresh.spin { animation: navspin .7s linear infinite; }
@keyframes navspin { to { transform: rotate(360deg); } }
@media (prefers-color-scheme: dark) { .nav-refresh { background: rgba(255,255,255,.15); color: #eeeafc; } }
@media (max-width: 1150px) { .nav-ai { display: none; } }
@media (prefers-color-scheme: dark) {
  .nav { background: linear-gradient(100deg, #34406e 0%, #4b4a86 45%, #6a4a7e 100%); }
  .nav a, .nav .brand { color: #eeeafc; } .nav-ai { color: #c9c6e6; } .nav a:hover { background: rgba(255,255,255,.1); }
  .nav a.on { background: rgba(255,255,255,.18); color: #fff; }
}
@media (max-width: 640px) {
  .nav { flex-wrap: nowrap; overflow-x: auto; padding: 8px 10px; }
  .nav a { flex: none; } .nav-ai { display: none; }
  .main { padding: 10px; } .cols, .cols.wide-left { grid-template-columns: 1fr; }
}
.main { width: 100%; max-width: 1200px; margin: 0 auto; padding: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--shadow); backdrop-filter: blur(6px); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cols.wide-left { grid-template-columns: 2fr 1fr; }
.cols > * { min-width: 0; }
.row-flex { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.row-flex label { display: flex; flex-direction: column; font-size: .85rem; color: var(--muted); gap: 2px; }
label.inline { flex-direction: row !important; align-items: center; gap: 5px; font-size: .9rem; color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.crumbs { font-size: .9rem; color: var(--muted); margin-bottom: 8px; }
.alert { background: #fff4e5; color: #7a3e00; border: 1px solid #f3c98b; border-radius: var(--r); padding: 8px 12px; margin-bottom: 12px; }
.alert a { margin-right: 8px; font-weight: 600; }
.empty { color: var(--muted); padding: 10px 0; font-size: .9rem; }
.danger { border-color: var(--bad); }

/* rows / badges */
.row { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-bottom: 1px solid var(--line); color: var(--ink); }
a.row:hover { background: var(--accent-soft); text-decoration: none; }
.row:last-child { border-bottom: none; }
.sel-row { display: flex; align-items: center; gap: 6px; } .sel-row > .row { flex: 1; min-width: 0; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: .75rem; background: var(--line); color: var(--ink); white-space: nowrap; }
.m-unknown { background: #f6d6e6; color: #9a3561; } .m-learning { background: #f1cfed; color: #7d3a78; } .m-partial { background: #e2dcf5; color: #5a4a9c; }
.m-familiar { background: #d9e8fa; color: #2f5a8f; } .m-mastered { background: #cfe9ea; color: #226a6a; }
.t-vocabulary { background: #dde8f7; color: #1d4d8a; } .t-concept { background: #e6e0f7; color: #55408f; } .t-mistake { background: #f8d9e6; color: #a03360; } .t-question { background: #e3ecfb; color: #3d5a8f; }
.stars { color: #9b8ad6; letter-spacing: -1px; white-space: nowrap; font-size: .85rem; }
.chip { display: inline-block; padding: 2px 10px; margin: 2px 4px 2px 0; border: 1px solid var(--line); border-radius: 99px; font-size: .85rem; cursor: pointer; }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tabs button { border-radius: 99px; padding: 3px 12px; }
.tabs button.on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* stats */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 8px 0; }
.stat { background: var(--bg); border-radius: 8px; padding: 10px; text-align: center; }
.stat b { display: block; font-size: 1.6rem; color: var(--accent); } .stat span { font-size: .8rem; color: var(--muted); }
.progress { display: flex; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin: 6px 0; }
.p-m { background: var(--good); } .p-f { background: #a7d7b8; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 150px; padding-top: 6px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; min-width: 0; }
.bar { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; display: flex; flex-direction: column; justify-content: flex-end; min-height: 1px; overflow: hidden; }
.bar-bad { background: var(--bad); width: 100%; }
.bar-col small { font-size: .6rem; color: var(--muted); writing-mode: vertical-rl; height: 34px; overflow: hidden; }
.hbar { display: grid; grid-template-columns: 110px 1fr 40px; align-items: center; gap: 8px; margin: 4px 0; font-size: .88rem; }
.hbar > div { background: var(--line); border-radius: 4px; height: 10px; overflow: hidden; }
.hbar .fill { height: 100%; background: var(--accent); }

/* forms / modal */
.form { display: flex; flex-direction: column; gap: 10px; }
.form label { display: flex; flex-direction: column; gap: 3px; font-size: .88rem; color: var(--muted); }
.form label > input, .form label > select, .form label > textarea { color: var(--ink); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 12px; z-index: 50; overflow: auto; }
.modal { background: var(--card); border-radius: var(--r); width: 100%; max-width: 560px; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.modal.wide { max-width: 900px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; } .modal-body { padding: 14px 16px; max-height: 80vh; overflow: auto; }
.ref-edit { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; padding: 6px; background: var(--bg); border-radius: 7px; }
.ref-edit input:not([type=number]) { flex: 1; min-width: 120px; }
.file-btn { cursor: pointer; }

/* item page */
.learn { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; }
.learn > * { min-width: 0; }
.zh { font-size: 1.15rem; margin: 0 0 8px; }
.field { margin: 8px 0; } .field b { font-size: .8rem; color: var(--muted); text-transform: uppercase; } .field p { margin: 2px 0; }
.key-idea { background: var(--accent-soft); border-left: 4px solid var(--accent); padding: 8px 12px; border-radius: 6px; margin: 8px 0; } .key-idea p { margin: 2px 0; }
.note { background: var(--bg); padding: 8px 12px; border-radius: 6px; margin: 8px 0; }
.note.ai { border-left: 4px dashed #8c7ae6; }
.note p { margin: 4px 0 0; }
.contrast { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 10px 0; }
.contrast .side { background: var(--bg); border-radius: 8px; padding: 10px; border-top: 3px solid var(--warn); }
.contrast .side h3, .contrast .side b { color: var(--warn); }
.src-list { list-style: none; padding: 0; margin: 8px 0; } .src-list li { padding: 5px 0; border-bottom: 1px dashed var(--line); }
.src.k-ai_explanation .badge { background: #ece8fb; color: #4b3a99; } .src.k-official_course_material .badge { background: var(--accent-soft); color: var(--accent); }
.mini { display: block; position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 8px; color: var(--ink); }
.mini canvas { display: block; max-width: 100%; } .mini p { padding: 8px; margin: 0; max-height: 240px; overflow: hidden; }
.mini .btn { position: absolute; right: 8px; bottom: 8px; }
.locate { margin-top: 10px; } .hit { padding: 6px 0; border-bottom: 1px solid var(--line); } .hit p { margin: 3px 0; }
.review-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; position: sticky; bottom: 0; z-index: 5; }
.rate { flex-direction: column; min-width: 90px; font-weight: 600; } .rate small { font-weight: 400; font-size: .72rem; color: var(--muted); }
.r-again { border-color: var(--bad); color: var(--bad); } .r-hard { border-color: var(--warn); color: var(--warn); } .r-good { border-color: var(--good); color: var(--good); } .r-easy { border-color: var(--accent); color: var(--accent); }
.tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tbl th, .tbl td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { color: var(--muted); font-weight: 500; }
.note-cell { max-width: 280px; }

/* review / quiz */
.flash { min-height: 280px; text-align: center; cursor: pointer; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.flash-front { font-size: 1.9rem; font-weight: 600; }
.flash-back { border-top: 1px solid var(--line); padding-top: 10px; text-align: left; cursor: default; }
.rate-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rate-row .rate { padding: 12px; }
.options { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.opt { justify-content: flex-start; white-space: normal; text-align: left; padding: 10px 14px; }
.opt.right { background: #d5ecdc; border-color: var(--good); color: #0f5129; } .opt.wrong { background: #f8d7d3; border-color: var(--bad); color: #8a2317; }

/* pages */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.course-card { color: var(--ink); display: flex; flex-direction: column; gap: 2px; } .course-card:hover { text-decoration: none; border-color: var(--accent); }
.tree { list-style: none; padding-left: 16px; margin: 4px 0; } .card > div > .tree { padding-left: 0; }
.tree-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--line); flex-wrap: wrap; }
.filters .search { width: 100%; margin-bottom: 8px; font-size: 1rem; }
.bulk { margin-bottom: 6px; align-items: center; }
.doc-bar { align-items: center; }
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; }
.doc-view canvas { max-width: 100%; box-shadow: 0 0 0 1px var(--line); }
.doc-text { max-height: 78vh; overflow: auto; }
.page-text { max-height: 320px; overflow: auto; }
.steps li { margin: 6px 0; }
.ctx { white-space: pre-wrap; font-size: .85rem; max-height: 70vh; overflow: auto; }
details summary { cursor: pointer; margin: 6px 0; }

/* toasts */
.toasts { position: fixed; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast { background: #1f2522; color: #fff; padding: 9px 14px; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.25); max-width: 360px; }
.toast.err { background: var(--bad); }

@media (max-width: 800px) {
  .cols, .cols.wide-left, .learn, .doc-layout, .grid2, .grid3 { grid-template-columns: 1fr; }
  .rate-row { grid-template-columns: 1fr 1fr; }
  .nav-ai { display: none; }
  .main { padding: 12px; }
  .tbl { display: block; overflow-x: auto; }
}

/* 夸夸 */
.cheer-pop { position: fixed; left: 50%; top: 38%; transform: translateX(-50%); z-index: 60; background: var(--grad); color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(60,60,120,.3); padding: 10px 20px; border-radius: 999px; box-shadow: 0 6px 20px rgba(113,129,200,.35); pointer-events: none; animation: popup 3s ease forwards; }
@keyframes popup { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.8); } 8% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 12% { transform: translate(-50%, 0) scale(1); } 82% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -30px); } }
.cheer-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(90,90,150,.28); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fadein .2s; }
.cheer-box { position: relative; background: #fff; border-radius: 22px; padding: 26px 28px 20px; text-align: center; max-width: 360px; width: 100%; box-shadow: 0 16px 50px rgba(113,129,200,.3); background-image: linear-gradient(180deg, #e6eefc 0%, #f4e8f7 40%, #fff 75%); border-top: 6px solid transparent; border-image: none; outline: none; animation: bounce .5s cubic-bezier(.3,1.6,.5,1); }
.cheer-box h2 { color: var(--accent); font-size: 1.5rem; margin: 4px 0 6px; }
.cheer-box p { margin: 0 0 6px; } .cheer-box small { display: block; color: var(--muted); margin-bottom: 14px; }
.cheer-emoji { font-size: 3.2rem; line-height: 1; animation: wiggle 1s ease 0.4s 2; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { top: 105%; transform: rotate(720deg); } }
@keyframes bounce { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes wiggle { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes fadein { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cheer-pop, .cheer-box, .cheer-emoji, .confetti i { animation: none !important; } .confetti { display: none; } }

@media (prefers-color-scheme: dark) { .cheer-box { background: #2a2a4a; background-image: linear-gradient(180deg, #3a3f6e, #3a2f55 45%, #2a2a4a 80%); } }

.cheer-box::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 6px; border-radius: 22px 22px 0 0; background: linear-gradient(90deg, #b7d3f4, #ababdc, #f1cfed); }
.cheer-box h2 { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ===== 高亮 / 正向：晚霞金橘（参考「万里皆予你」），只用在需要显眼的地方 ===== */
:root { --hi: linear-gradient(120deg, #ffc15e 0%, #ff9b54 50%, #f7728a 100%); --hi-ink: #e2702e; --hi-soft: #fff1e0; --hi-glow: 0 4px 16px rgba(255,145,80,.38); }
@media (prefers-color-scheme: dark) { :root { --hi-ink: #ffb26b; --hi-soft: #3d2c2a; } }
.primary { background: var(--hi); box-shadow: var(--hi-glow); font-weight: 600; text-shadow: 0 1px 2px rgba(150,60,20,.35); }
.primary:hover { box-shadow: 0 6px 22px rgba(255,145,80,.5); filter: brightness(1.05); }
.nav a.on { box-shadow: 0 2px 8px rgba(113,129,200,.25), inset 0 -3px 0 #ffa35c; }
.stat b { background: var(--hi); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
.tabs button.on { background: var(--hi); border-color: transparent; box-shadow: var(--hi-glow); }
.m-mastered { background: var(--hi); color: #fff; text-shadow: 0 1px 1px rgba(150,60,20,.3); box-shadow: 0 1px 6px rgba(255,145,80,.35); }
.m-familiar { background: #ffe7cf; color: #b85a1c; }
.p-m { background: linear-gradient(90deg, #ffc15e, #ff9b54); } .p-f { background: #ffd9b0; }
.opt.right { background: var(--hi-soft); border-color: #ff9b54; color: var(--hi-ink); font-weight: 700; box-shadow: var(--hi-glow); }
.r-good, .r-easy { border-color: #ff9b54; color: var(--hi-ink); font-weight: 600; }
.r-good:hover, .r-easy:hover { background: var(--hi-soft); }
.cheer-pop { background: var(--hi); box-shadow: 0 6px 24px rgba(255,145,80,.5); text-shadow: 0 1px 2px rgba(150,60,20,.35); }
.cheer-box h2 { background: var(--hi); -webkit-background-clip: text; background-clip: text; }
.cheer-box::before { background: linear-gradient(90deg, #b7d3f4, #ababdc 30%, #ffc15e 70%, #f7728a); }
.cheer-emoji { filter: drop-shadow(0 0 12px rgba(255,180,90,.7)); }

.prompt { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 8px 0; background: var(--card); }
.prompt summary { cursor: pointer; }
.prompt pre { margin: 8px 0; }

/* ===== 今日激励卡片 / 背单词 / 学习任务 ===== */
.hi-text { background: var(--hi); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
.big { font-size: 1.4rem; }
.today-card { text-align: center; background: linear-gradient(135deg, rgba(183,211,244,.55), rgba(241,207,237,.55)), var(--card); }
.today-line { font-size: 1.15rem; font-weight: 700; margin: 4px 0 12px; color: var(--accent); }
.today-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.today-stat { position: relative; display: flex; flex-direction: column; align-items: center; padding: 12px 6px; border-radius: 14px; background: rgba(255,255,255,.65); color: var(--ink); text-decoration: none !important; transition: transform .15s; }
.today-stat:hover { transform: translateY(-2px); }
.today-stat b { font-size: 1.6rem; background: var(--hi); -webkit-background-clip: text; background-clip: text; color: transparent; }
.today-stat span { font-size: .82rem; color: var(--muted); }
.today-stat .ring { position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(#ff9b54 calc(var(--p) * 1%), var(--line) 0); }
@media (max-width: 640px) { .today-stats { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-color-scheme: dark) { .today-stat { background: rgba(255,255,255,.06); } .today-card { background: linear-gradient(135deg, rgba(94,108,184,.25), rgba(184,139,196,.25)), var(--card); } }
.tabs.small button { padding: 3px 10px; font-size: .88rem; }
.vocab-list table { width: 100%; border-collapse: separate; border-spacing: 0 4px; }
.vocab-list td { padding: 7px 8px; vertical-align: middle; }
.vocab-list tr:hover td { background: var(--accent-soft); }
.vocab-list td:first-child { border-radius: 8px 0 0 8px; } .vocab-list td:last-child { border-radius: 0 8px 8px 0; }
.vcell.en { min-width: 140px; } .vcell.zh { min-width: 120px; }
.vcell.covered { color: transparent !important; background: linear-gradient(120deg, #dfe6fb, #efdcf3) !important; border-radius: 8px; cursor: pointer; user-select: none; }
.vcell.covered * { color: transparent !important; }
.vcell.covered:hover { filter: brightness(.97); }
.vnote { color: var(--muted); max-width: 260px; }
@media (max-width: 640px) { .vnote, .vocab-list td:nth-child(4) { display: none; } }
ul.tasks { list-style: none; padding: 0; margin: 0; }
ul.tasks li { display: flex; align-items: center; gap: 8px; padding: 9px 4px; border-bottom: 1px dashed var(--line); flex-wrap: wrap; }
ul.tasks li:last-child { border-bottom: none; }
ul.tasks input[type=checkbox] { width: 18px; height: 18px; accent-color: #ff9b54; }
.task-bar { width: 110px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; display: inline-block; }
.task-bar i { display: block; height: 100%; background: var(--hi); }

.syl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.syl-row:last-child { border-bottom: none; }
.syl-desc { flex-basis: 100%; padding-left: 26px; }
.syl-task { display: flex !important; padding: 4px 0; }

/* 单词拓展内容 */
.vocab-list .extra-row td { padding-top: 0; }
.vocab-list .extra-row:hover td { background: transparent; }
.vextra { font-size: .85rem; color: var(--ink); display: grid; gap: 3px; margin: 2px 0 6px; }
.vextra .lbl { display: inline-block; font-size: .72rem; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 0 6px; margin-right: 6px; }
.after .vextra { margin: 6px 0; padding: 8px 10px; background: var(--accent-soft); border-radius: 10px; }
.key-badge { display: inline-block; font-size: .68rem; font-weight: 700; color: #fff; background: var(--hi); border-radius: 6px; padding: 0 5px; margin-top: 2px; }

/* ================= 猫猫卡牌 ================= */
.gcard { position: relative; aspect-ratio: 3 / 4; border-radius: 18px; padding: 5px; cursor: pointer; transition: transform .2s; }
.gcard:hover { transform: translateY(-3px); }
.gc-frame { position: relative; height: 100%; border-radius: 14px; overflow: hidden; background: #fff; border: 2px solid rgba(255,255,255,.9); }
.gc-frame::after { content: ''; position: absolute; inset: 6px; border: 1.5px solid rgba(255,255,255,.75); border-radius: 10px; pointer-events: none; z-index: 3; }
.gc-img { position: absolute; inset: 0; }
.gc-img img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }
.gc-top { position: absolute; top: 10px; left: 10px; z-index: 4; }
.gc-rar { display: inline-block; font-weight: 900; font-style: italic; letter-spacing: 1px; font-size: .8rem; color: #fff; padding: 1px 9px; border-radius: 8px; border: 1.5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.gc-bot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; justify-content: space-between; align-items: flex-end; padding: 22px 12px 9px; background: linear-gradient(transparent, rgba(30,28,70,.62)); color: #fff; font-size: .72rem; }
.gc-stars { letter-spacing: 1px; font-size: .8rem; }
.gc-no { opacity: .9; font-weight: 600; }
.gc-ltd { position: absolute; top: 14px; right: -30px; z-index: 5; width: 120px; text-align: center; transform: rotate(40deg); font-size: .66rem; font-weight: 800; color: #fff; padding: 2px 0; background: linear-gradient(90deg, #5fc7b0, #7fb6ff); box-shadow: 0 2px 6px rgba(0,0,0,.2); letter-spacing: 1px; }
.gc-sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; background-size: 260% 100%; animation: holo 3.8s linear infinite; mix-blend-mode: overlay; }

/* R：天蓝 */
.gcard.r { background: linear-gradient(145deg, #dbe8fc, #9fb6ec 50%, #e6eefd); box-shadow: 0 4px 14px rgba(113,129,200,.28); }
.gcard.r .gc-rar { background: linear-gradient(135deg, #8fa4e0, #6b7fc6); }
.gcard.r .gc-stars { color: #e3ecff; }
/* SR：紫粉流光 */
.gcard.sr { background: linear-gradient(135deg, #b9a5f0, #f1cfed 28%, #ababdc 52%, #f8d9f2 76%, #9d8fe0); background-size: 220% 220%; animation: frameshift 6s ease-in-out infinite; box-shadow: 0 6px 22px rgba(171,140,220,.5); }
.gcard.sr .gc-rar { background: linear-gradient(135deg, #a98be6, #e58fd0); }
.gcard.sr .gc-stars { color: #ffd9f6; text-shadow: 0 0 6px rgba(255,180,240,.9); }
.gcard.sr .gc-sheen { background-image: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.55) 47%, rgba(241,207,237,.5) 52%, transparent 66%); }
/* SSR：晚霞彩虹 + 镭射 + 星光 */
.gcard.ssr { background: linear-gradient(120deg, #ffcf6b, #ff9b54, #f7728a, #c58cf0, #7fb6ff, #8fe3c8, #ffcf6b); background-size: 320% 320%; animation: frameshift 4s linear infinite; box-shadow: 0 8px 30px rgba(255,145,80,.5), 0 0 42px rgba(247,114,138,.35); }
.gcard.ssr .gc-rar { background: linear-gradient(135deg, #ffc15e, #ff8f5c, #f7728a); text-shadow: 0 1px 2px rgba(150,60,20,.5); }
.gcard.ssr .gc-stars { color: #ffe9a8; text-shadow: 0 0 8px rgba(255,200,90,1); }
.gcard.ssr .gc-sheen { background-image: linear-gradient(115deg, transparent 18%, rgba(255,207,107,.55) 34%, rgba(247,114,138,.5) 43%, rgba(255,255,255,.7) 50%, rgba(127,182,255,.5) 57%, rgba(197,140,240,.5) 66%, transparent 82%); mix-blend-mode: soft-light; }
.gcard.ssr::before, .gcard.ssr::after { content: '✦'; position: absolute; z-index: 6; color: #fff; text-shadow: 0 0 8px #ffd27a, 0 0 16px #ff9b54; animation: twinkle 1.8s ease-in-out infinite; pointer-events: none; }
.gcard.ssr::before { top: -9px; right: 8px; font-size: 1.3rem; }
.gcard.ssr::after { bottom: 26px; left: -8px; font-size: .95rem; animation-delay: .9s; }
/* 未获得 */
.gcard.locked { cursor: default; filter: saturate(.3); }
.gcard.locked:hover { transform: none; }
.gcard.locked .gc-img img { filter: grayscale(1) brightness(.35) blur(7px); transform: scale(1.1); }
.gcard.locked .gc-bot .gc-stars { opacity: .5; }
.gc-lock { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; font-weight: 900; color: rgba(255,255,255,.75); }
/* 卡背 */
.gcard.back { background: linear-gradient(145deg, #b7d3f4, #ababdc 50%, #f1cfed); box-shadow: 0 6px 22px rgba(113,129,200,.35); cursor: default; }
.gc-backart { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #5e6cb8; background-color: #f6f3ff; background-image: radial-gradient(circle at 50% 46%, rgba(255,255,255,.95) 0 28%, transparent 60%), radial-gradient(rgba(171,171,220,.35) 2px, transparent 2.6px); background-size: 100% 100%, 16px 16px; }
.gc-backart span { font-size: 3rem; filter: drop-shadow(0 3px 6px rgba(113,129,200,.4)); }
.gc-backart b { letter-spacing: 3px; } .gc-backart small { font-size: .55rem; letter-spacing: 2px; opacity: .7; }
.gcard.back.glow-r { box-shadow: 0 0 40px 8px rgba(159,182,236,.9); }
.gcard.back.glow-sr { box-shadow: 0 0 50px 12px rgba(197,140,240,.95); }
.gcard.back.glow-ssr { box-shadow: 0 0 60px 16px rgba(255,170,90,1), 0 0 110px 30px rgba(247,114,138,.6); }
@keyframes frameshift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes holo { 0% { background-position: 160% 0; } 100% { background-position: -160% 0; } }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } }

/* 抽卡仪式 */
.gacha-overlay { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 16px; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(113,129,200,.55), rgba(26,24,58,.94) 70%); backdrop-filter: blur(4px); animation: fadein .25s; }
.gacha-overlay.quake { animation: quake .35s ease-in-out 2; }
.g-title { color: #fff; letter-spacing: 6px; font-weight: 700; opacity: .85; }
.g-single { width: min(300px, 70vw); }
.g-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 120px)); gap: 12px; }
@media (max-width: 640px) { .g-grid { grid-template-columns: repeat(3, minmax(0, 100px)); gap: 8px; } }
.flipwrap { perspective: 1200px; aspect-ratio: 3 / 4; }
.flipwrap.shaking { animation: summon-shake .45s ease-in-out infinite; }
.flipper { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,1.3,.5,1); }
.flipper.flipped { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face .gcard { height: 100%; }
.front-face { transform: rotateY(180deg); }
.g-new { position: absolute; top: -8px; left: -6px; z-index: 8; background: var(--hi); color: #fff; font-weight: 900; font-size: .7rem; padding: 2px 8px; border-radius: 8px; box-shadow: var(--hi-glow); animation: bounce .5s; }
.burst-text { position: absolute; top: 12%; font-size: clamp(3rem, 12vw, 6rem); font-weight: 900; font-style: italic; letter-spacing: 4px; z-index: 5; animation: burst 1.2s ease-out forwards; pointer-events: none; }
.burst-text.sr { color: #f6d9ff; text-shadow: 0 0 20px #c58cf0, 0 0 40px #f1cfed; }
.burst-text.ssr { background: linear-gradient(90deg, #ffe08a, #ff9b54, #f7728a, #c58cf0, #7fb6ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(255,170,90,.9)); }
.g-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.g-actions button { min-width: 140px; }
.g-caption { color: #fff; margin: 0; }
.g-bit { position: absolute; width: 9px; height: 14px; border-radius: 2px; z-index: 4; animation: gbit 1.9s cubic-bezier(.2,.7,.3,1) forwards; pointer-events: none; }
.pop-in { animation: bounce .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes gbit { 40% { transform: translate(calc(var(--dx) * .6), var(--dy)) rotate(calc(var(--rot) * .5)); } 100% { transform: translate(var(--dx), 520px) rotate(var(--rot)); opacity: 0; } }
@keyframes summon-shake { 0%, 100% { transform: translate(0,0) scale(1.02); } 25% { transform: translate(-4px,2px) rotate(-1.5deg) scale(1.04); } 50% { transform: translate(4px,-3px) rotate(1.5deg) scale(1.05); } 75% { transform: translate(-3px,-1px) rotate(-1deg) scale(1.04); } }
@keyframes quake { 0%, 100% { transform: translate(0,0); } 25% { transform: translate(-6px,4px); } 50% { transform: translate(6px,-4px); } 75% { transform: translate(-4px,-3px); } }
@keyframes burst { 0% { transform: scale(.3); opacity: 0; } 25% { transform: scale(1.15); opacity: 1; } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.05); opacity: 0; } }

/* 抽卡页 */
.gacha-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; background: linear-gradient(135deg, rgba(183,211,244,.6), rgba(241,207,237,.6)), var(--card); }
@media (max-width: 760px) { .gacha-hero { grid-template-columns: 1fr; } }
.gh-tickets { font-size: 1.1rem; margin: 6px 0; } .gh-tickets .hi-text { font-size: 2.6rem; vertical-align: middle; }
.big-btn { padding: 10px 22px; font-size: 1rem; border-radius: 12px; }
.gh-rules { background: rgba(255,255,255,.6); border-radius: 14px; padding: 10px 14px; }
.gh-rules h4 { margin: 0 0 6px; }
.gh-rule { display: flex; justify-content: space-between; gap: 8px; font-size: .86rem; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.gh-rule b { color: var(--hi-ink); white-space: nowrap; }
.collect-bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 4px 0 14px; }
.collect-bar i { display: block; height: 100%; background: var(--hi); }
.g-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; }
.g-log { padding-left: 18px; }
@media (prefers-color-scheme: dark) { .gh-rules { background: rgba(255,255,255,.06); } .gacha-hero { background: linear-gradient(135deg, rgba(94,108,184,.3), rgba(184,139,196,.3)), var(--card); } }
@media (prefers-reduced-motion: reduce) { .gcard.sr, .gcard.ssr, .gc-sheen, .gcard.ssr::before, .gcard.ssr::after, .flipwrap.shaking, .gacha-overlay.quake { animation: none !important; } }

/* 表情包反馈 / 思考猫 / 连续学习弹窗 */
.meme-pop, .think-pop { position: fixed; right: 18px; bottom: 18px; z-index: 75; width: 150px; background: #fff; border-radius: 16px; padding: 6px 6px 8px; box-shadow: 0 10px 30px rgba(60,60,120,.3); text-align: center; animation: bounce .45s cubic-bezier(.3,1.6,.5,1); cursor: pointer; }
.meme-pop img, .meme-pop video, .think-pop img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; }
.meme-pop span, .think-pop span { display: block; font-size: .82rem; font-weight: 700; margin-top: 4px; color: #4a4f93; }
.meme-pop.ok { border: 3px solid #ffb35c; } .meme-pop.bad { border: 3px solid #b7c3f4; }
.think-pop { left: 18px; right: auto; border: 3px dashed #ababdc; }
@media (max-width: 640px) { .meme-pop, .think-pop { width: 110px; bottom: 12px; } }
.study-pop { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 76; display: flex; gap: 14px; align-items: center; width: min(520px, calc(100vw - 32px)); padding: 12px; border-radius: 20px; background: linear-gradient(135deg, #fff, #f6eefc); box-shadow: 0 16px 40px rgba(60,60,120,.35); border: 2px solid #f1cfed; animation: bounce .5s cubic-bezier(.3,1.6,.5,1); }
.study-pop video { width: 110px; height: 110px; object-fit: cover; border-radius: 14px; flex: none; }
.study-pop b { color: #5e6cb8; } .study-pop p { margin: 4px 0 8px; font-size: .88rem; color: #33365a; }

/* 首页动图 + 抽卡券 */
.today-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; }
.today-head .today-line { margin: 0; }
.mascot { width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(113,129,200,.35); background: #fff; }
.mascot video, .mascot img { width: 100%; height: 100%; object-fit: cover; }
.ticket-chip { flex: none; padding: 4px 12px; border-radius: 999px; background: var(--hi); color: #fff !important; font-weight: 800; box-shadow: var(--hi-glow); text-decoration: none !important; }

/* 背景光晕 */
body::before, body::after { content: ''; position: fixed; z-index: -1; width: 420px; height: 420px; border-radius: 50%; filter: blur(90px); opacity: .45; pointer-events: none; }
body::before { top: -120px; left: -120px; background: #b7d3f4; }
body::after { bottom: -140px; right: -120px; background: #f1cfed; }
@media (prefers-color-scheme: dark) { body::before, body::after { opacity: .18; } }

/* 复习卡片翻面 */
.flash .flash-back { animation: flipin .45s cubic-bezier(.3,1.3,.5,1); transform-origin: top; }
@keyframes flipin { from { transform: perspective(800px) rotateX(-70deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .meme-pop, .think-pop, .study-pop, .flash .flash-back { animation: none; } }

.g-gallery.small { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin-top: 10px; }
.cc-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cc-item .gcard { width: 100%; }

.g-grid .gc-backart small, .g-gallery .gc-backart small { display: none; }
.g-grid .gc-backart span { font-size: 2rem; } .g-grid .gc-backart b { font-size: .8rem; letter-spacing: 1px; }
.g-grid .gc-rar { font-size: .62rem; padding: 0 6px; } .g-grid .gc-bot { padding: 14px 7px 5px; font-size: .6rem; } .g-grid .gc-stars { font-size: .62rem; }
.g-gallery .gc-rar { font-size: .66rem; padding: 0 6px; } .g-gallery .gc-bot { padding: 16px 8px 6px; font-size: .62rem; } .g-gallery .gc-stars { font-size: .66rem; } .g-gallery .gc-ltd { font-size: .55rem; top: 10px; right: -34px; }

.g-single .gcard { padding: 9px; border-radius: 24px; } .g-single .gc-frame { border-radius: 17px; }

/* 兑换奖励 */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 8px; }
.tier { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.6); border: 1.5px solid var(--line); }
.tier.ready { border-color: #ffb35c; box-shadow: var(--hi-glow); background: linear-gradient(135deg, #fff8ee, #fdf0f7); animation: readyglow 2.4s ease-in-out infinite; }
@keyframes readyglow { 50% { box-shadow: 0 4px 24px rgba(255,145,80,.55); } }
.tier-head { display: flex; gap: 10px; align-items: center; }
.tier-icon { font-size: 2rem; }
.tier-need { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.need-chip { font-size: .72rem; font-weight: 700; color: #fff; padding: 1px 7px; border-radius: 7px; }
.need-chip small { font-weight: 400; opacity: .9; }
.need-chip.r { background: #8fa4e0; } .need-chip.sr { background: linear-gradient(135deg, #a98be6, #e58fd0); } .need-chip.ssr { background: linear-gradient(135deg, #ffc15e, #f7728a); } .need-chip.any { background: linear-gradient(90deg, #5fc7b0, #7fb6ff); }
.tier .collect-bar { margin: 0; }
.tier-reward { margin: 0; font-size: .9rem; cursor: pointer; border-radius: 8px; padding: 4px 6px; }
.tier-reward:hover { background: var(--accent-soft); }
.confirm-box { width: min(520px, 100%); max-height: 85vh; overflow: auto; animation: bounce .4s cubic-bezier(.3,1.6,.5,1); }
@media (prefers-color-scheme: dark) { .tier { background: rgba(255,255,255,.05); } .tier.ready { background: rgba(255,155,84,.12); } }

.gcard.locked .gc-img { background-color: #e9e6f6; background-image: radial-gradient(rgba(171,171,220,.45) 2px, transparent 2.6px); background-size: 14px 14px; }
.gcard.locked .gc-lock { color: #a7a3d6; font-size: 2.2rem; text-shadow: 0 2px 0 #fff; }
.gcard.locked .gc-bot { background: none; color: #a7a3d6; }
@media (prefers-color-scheme: dark) { .gcard.locked .gc-img { background-color: #2a2b4a; } }

.zh-line { color: var(--muted); font-size: .92em; margin-top: 1px; }

.quiz.exam h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 500; font-size: 1.15rem; }
.quiz.exam .opt { text-align: left; white-space: normal; }
.opt-zh { display: block; font-size: .82rem; color: var(--muted); margin-top: 2px; }
.zh-ref { background: var(--accent-soft); border-radius: 10px; padding: 8px 12px; margin: 6px 0; font-size: .9rem; }
.zh-ref p { margin: 3px 0; }

/* 预习 */
.pv-canvas { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.08); display: block; margin-bottom: 8px; }
.pv-text { max-height: 360px; overflow: auto; background: var(--accent-soft); border-radius: 10px; padding: 10px 12px; font-size: .9rem; user-select: text; margin-top: 6px; }
.pv-known { padding-left: 18px; margin: 0; } .pv-known li { margin: 3px 0; }
.pv-ai ul { padding-left: 18px; } .pv-ai li { margin: 4px 0; }
.pv-term { display: flex !important; align-items: flex-start; gap: 6px; padding: 4px 0; }
.pv-q { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; margin: 6px 0; }
.pv-q summary { cursor: pointer; font-family: Georgia, serif; }
.pv-q .right-ans { color: var(--hi-ink); font-weight: 700; }

mark.hl { background: linear-gradient(transparent 45%, #ffd9a0 45%); color: inherit; padding: 0 1px; }
@media (prefers-color-scheme: dark) { mark.hl { background: linear-gradient(transparent 45%, rgba(255,155,84,.45) 45%); } }
.hl-item { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.hl-all { padding: 3px 0; }
.about { text-align: center; color: var(--muted); font-size: .85rem; padding: 18px 0 30px; }
.about details { display: inline-block; margin-left: 8px; text-align: left; }

.note-sheet h1 { font-size: 1.3rem; } .note-sheet h3 { margin-top: 16px; }
.note-words { display: flex; flex-wrap: wrap; gap: 6px; } .note-words a { padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); text-decoration: none; font-size: .88rem; }

.page-jump { width: 64px; text-align: center; padding: 3px 4px; font-weight: 700; }
.req-box { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--hi-soft); border: 1px solid #ffd9b0; }
.req-box h3 { margin: 0 0 6px; } .req-box summary { cursor: pointer; font-weight: 600; }
.req-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 640px) { .req-cols { grid-template-columns: 1fr; } }
.preset-row { margin-bottom: 8px; }

.today-line { cursor: pointer; user-select: none; transition: transform .15s; } .today-line:active { transform: scale(.97); }

/* 表情包：屏幕中间大图（覆盖之前的角落样式） */
.meme-pop { left: 50%; top: 50%; right: auto; bottom: auto; width: min(300px, 72vw); padding: 10px 10px 12px; border-radius: 24px; transform: translate(-50%, -50%); box-shadow: 0 20px 60px rgba(60,60,120,.4); animation: memein .4s cubic-bezier(.3,1.6,.5,1); z-index: 85; }
.meme-pop img, .meme-pop video { border-radius: 16px; }
.meme-pop span { font-size: 1.15rem; margin-top: 8px; }
.meme-pop.ok { border-width: 4px; } .meme-pop.bad { border-width: 4px; }
@keyframes memein { from { transform: translate(-50%, -50%) scale(.5); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@media (max-width: 640px) { .meme-pop { width: 70vw; bottom: auto; } }

.term-line { margin: -4px 0 10px; font-size: .88rem; color: var(--muted); }
.cal-row { gap: 6px; padding: 3px 0; flex-wrap: wrap; } .cal-row input[type=date] { width: 150px; }
.group-pick { margin: 6px 0; } .imp-row { padding: 4px 0; border-bottom: 1px dashed var(--line); }

.word-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: var(--accent-soft); font-size: .9rem; }
.word-sum .btn { margin-left: auto; }

/* ❓ 待复盘 */
.qs-unresolved { background: #fde2e6; color: #a3304a; } .qs-reviewing { background: #fff0d9; color: #9a5a00; }
.qs-resolved { background: #e3efff; color: #2b5aa8; } .qs-mastered { background: #e6f6ea; color: #23784a; }
.q-group > h3, .q-group > summary h3 { display: inline-block; margin: 14px 0 6px; font-size: 1rem; }
.q-card { padding: 10px 14px; margin-bottom: 8px; }
.q-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; }
.q-card.open .q-head { padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.q-body { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.q-body textarea { width: 100%; }
.stat-row a.stat { text-decoration: none; color: inherit; }
.dk-exam { background: #fde2e6; color: #a3304a; } .dk-assignment { background: #e3efff; color: #2b5aa8; }
.zh-help { margin: -6px 0 10px; color: var(--accent); }
.zh-ref.ok { border-color: var(--good); }
.quiz-review { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.quiz-review summary { cursor: pointer; }
.wrong-ans { color: var(--bad); text-decoration: line-through; }
.ext-quiz textarea { width: 100%; margin: 6px 0; }
.opt.picked { border-color: var(--accent); background: var(--accent-soft); }
.multi-hint { margin: -4px 0 8px; font-size: .9rem; color: var(--accent); font-weight: 600; }
/* 预习 AI：逐句对照 */
.pv-ai-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.pv-tr { margin: 8px 0; }
.tr-pair { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.tr-en { font-size: .92rem; } .tr-zh { color: var(--muted); font-size: .9rem; margin-top: 2px; }
/* 👆 预习点选模式 */
.tap-switch { margin: 6px 0; }
.tap-text .tk { cursor: pointer; border-radius: 4px; padding: 1px 0; -webkit-tap-highlight-color: transparent; }
.tap-text .tk:hover { background: var(--accent-soft); }
.tap-text .tk.hl { background: rgba(255, 200, 80, .35); }
.tap-text .tk.sel { background: var(--accent); color: #fff; }
.tap-bar { position: sticky; bottom: 8px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; padding: 8px 10px; border-radius: 14px; background: var(--card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(60,60,120,.25); }
.tap-picked { flex: 1 1 100%; font-size: .9rem; }
@media (max-width: 640px) { .tap-text { font-size: 1.05rem; line-height: 1.9; } .tap-bar button { flex: 1; } }
.dk-presentation { background: #f3e6fb; color: #7a3fa0; } .dk-other { background: var(--line); }

/* 📚 讲义笔记 */
.notes-tabs { margin-bottom: 12px; } .notes-tabs .btn { border-radius: 999px; } .notes-tabs .btn.on { background: var(--grad); color: #fff; border-color: transparent; }
.ho-make { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 12px; }
.ho-make-btn { flex-direction: column; align-items: flex-start; white-space: normal; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); border: 1px solid transparent; text-align: left; }
.ho-make-btn:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.ho-make-btn span { font-size: .82rem; color: var(--muted); }
.ho-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ho-card { display: flex; flex-direction: column; gap: 4px; text-decoration: none !important; color: var(--ink); transition: transform .15s, box-shadow .15s; margin: 0; }
.ho-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(113,129,200,.18); }
.ho-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.ho-src-ai { background: #ece8fb; color: #4b3a99; } .ho-src-kb { background: var(--accent-soft); color: var(--accent); } .ho-src-manual { background: #fff1e0; color: #b25e14; }
.ho-tools { position: sticky; top: 58px; z-index: 5; }
.ho-title-input { font-weight: 700; }
.ho-editor textarea { min-height: 320px; font-family: ui-monospace, Consolas, monospace; font-size: .9rem; line-height: 1.6; }
.ho-cheat { background: var(--accent-soft); padding: 10px; border-radius: 10px; font-size: .82rem; }
.ho-wrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: start; }
.ho-toc { position: sticky; top: 120px; max-height: calc(100vh - 140px); overflow: auto; font-size: .88rem; margin: 0; }
.ho-toc b { display: block; margin-bottom: 6px; }
.ho-toc a { display: block; color: var(--muted); padding: 3px 8px; border-radius: 8px; border-left: 3px solid transparent; text-decoration: none; }
.ho-toc a.l3 { padding-left: 20px; font-size: .84rem; }
.ho-toc a.on { color: var(--accent); background: var(--accent-soft); border-left-color: var(--accent); font-weight: 600; }
.ho-doc { margin: 0; font-size: 1rem; line-height: 1.75; padding: 22px 28px; }
.ho-doc .ho-title { font-size: 1.6rem; margin: .1em 0 .6em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ho-sec { border: 1px solid var(--line); border-radius: 16px; margin: 14px 0; overflow: hidden; background: var(--card); }
.ho-sec > summary { list-style: none; cursor: pointer; padding: 11px 16px; background: linear-gradient(90deg, var(--accent-soft), transparent); display: flex; align-items: center; gap: 8px; }
.ho-sec > summary::-webkit-details-marker { display: none; }
.ho-sec > summary::before { content: "▸"; color: var(--accent); transition: transform .2s; }
.ho-sec[open] > summary::before { transform: rotate(90deg); }
.ho-sec h2 { font-size: 1.15rem; margin: 0; scroll-margin-top: 130px; }
.ho-body { padding: 4px 20px 14px; }
.ho-body h3 { font-size: 1rem; margin: 16px 0 6px; padding-left: 10px; border-left: 4px solid var(--c2); scroll-margin-top: 130px; }
.ho-box { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 10px 14px; margin: 10px 0; background: var(--accent-soft); }
.ho-box.tip { background: #fff6e8; border-left: 4px solid #ffb35c; } .ho-box.example { background: #eef6ff; border-left: 4px solid #7fb6ff; }
.ho-box.warn { background: #fdecef; border-left: 4px solid #f08aa0; } .ho-box.quote { border-left: 4px solid var(--c2); }
.ho-box-tag { flex: none; font-size: .78rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.75); }
.ho-table { overflow-x: auto; margin: 10px 0; } .ho-table table { border-collapse: collapse; width: 100%; font-size: .93rem; }
.ho-table th { background: var(--accent-soft); text-align: left; } .ho-table th, .ho-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ho-doc mark { background: #ffe9a8; color: inherit; } .ho-doc code { background: var(--accent-soft); padding: 0 5px; border-radius: 5px; }
@media (prefers-color-scheme: dark) { .ho-box.tip { background: #3d3022; } .ho-box.example { background: #22324a; } .ho-box.warn { background: #3d2430; } .ho-doc mark { background: #6b5a20; } }
@media (max-width: 860px) { .ho-wrap { grid-template-columns: 1fr; } .ho-toc { position: static; max-height: none; } .ho-doc { padding: 16px; } .ho-tools { top: 52px; } }
.ho-name { flex: 1 1 220px; min-width: 180px; font-size: 1.05rem; }
@media (max-width: 860px) { .ho-tools { position: static; } }

/* ✨ 特效：粒子迸发 / 烟花 */
.fx-burst { position: fixed; width: 0; height: 0; z-index: 250; pointer-events: none; }
.fx-p { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); animation: fxfly 1.1s cubic-bezier(.15,.75,.3,1) forwards; line-height: 1; }
.fx-dot { width: 8px; height: 8px; border-radius: 50%; }
.fx-burst.task .fx-dot { width: 10px; height: 6px; border-radius: 3px; }
@keyframes fxfly {
  0% { transform: translate(-50%, -50%) scale(.3) rotate(0); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 40px)) scale(1) rotate(var(--rot)); opacity: 0; }
}
.fx-ring { position: absolute; left: 0; top: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 3px solid rgba(255,193,94,.9); box-shadow: 0 0 18px rgba(255,170,90,.7); animation: fxring .7s ease-out forwards; }
.fx-burst.task .fx-ring { border-color: rgba(197,140,240,.9); box-shadow: 0 0 22px rgba(197,140,240,.7); }
@keyframes fxring { from { transform: scale(.2); opacity: 1; } to { transform: scale(9); opacity: 0; } }
.opt.right { animation: fxpop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes fxpop { 0% { transform: scale(1); } 40% { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(127,208,196,.35); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .opt.right { animation: none; } }
/* 柱状图：日期标签放在柱子下方单独的位置，最高的柱子不会再伸到底线下面 */
.bar-col { position: relative; padding-bottom: 38px; }
.bar-col small { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }

/* ⭐ 重点页 / 🎯 考试会考 */
.keypage-btn { border-radius: 999px; }
.keypage-btn.on { background: linear-gradient(120deg, #ffd27a, #ffb35c); color: #7a3e00; border-color: transparent; font-weight: 700; box-shadow: 0 3px 12px rgba(255,170,60,.35); }
.keypage-note { background: #fff1d6; color: #9a5a00; }
.exam-btn { border-color: #ff9b7a; color: #d2552c; }
mark.hl.exam, .tap-text .tk.exam { background: linear-gradient(transparent 35%, rgba(255,120,90,.45) 35%); color: inherit; font-weight: 600; }
.exam-tag { background: #ffe3dc; color: #c4452a; }
.keypages-card { border-left: 4px solid #ffb35c; }
.keypage-list { display: flex; flex-wrap: wrap; gap: 4px; }
/* 💬 问 AI */
.ask-fab { position: fixed; right: 18px; bottom: 18px; z-index: 60; border-radius: 999px; padding: 10px 16px; font-size: 1rem; background: var(--grad); color: #fff; border: none; box-shadow: 0 8px 24px rgba(113,129,200,.4); display: inline-flex; gap: 6px; }
.ask-fab.on { padding: 10px 14px; }
.ask-panel { position: fixed; right: 18px; bottom: 74px; z-index: 60; width: min(400px, calc(100vw - 24px)); height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 20px; background: var(--card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 16px 40px rgba(60,60,120,.25); }
.ask-head { display: flex; align-items: center; gap: 6px; }
.ask-ctx { display: flex; gap: 6px; align-items: center; background: var(--accent-soft); padding: 6px 10px; border-radius: 10px; }
.ask-ctx b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-log { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.ask-q { align-self: flex-end; max-width: 85%; background: var(--grad); color: #fff; padding: 7px 12px; border-radius: 16px 16px 4px 16px; white-space: pre-wrap; }
.ask-a { align-self: flex-start; max-width: 95%; background: rgba(255,255,255,.85); padding: 8px 12px; border-radius: 16px 16px 16px 4px; font-size: .93rem; line-height: 1.6; }
.ask-a p { margin: 4px 0; } .ask-a ul, .ask-a ol { margin: 4px 0; padding-left: 20px; }
.ask-a .ho-sec { border: none; margin: 4px 0; } .ask-a .ho-sec > summary { padding: 4px 0; background: none; } .ask-a .ho-body { padding: 0; }
.ask-tools { display: flex; gap: 4px; }
.ask-input { display: flex; gap: 6px; align-items: flex-end; } .ask-input textarea { flex: 1; resize: none; }
@media (max-width: 640px) { .ask-fab span { display: none; } .ask-fab { right: 12px; bottom: 12px; } .ask-panel { right: 12px; bottom: 64px; } }
@media (prefers-color-scheme: dark) { .ask-a { background: rgba(255,255,255,.08); } }
/* 🥣 豆沙包吃掉完成的任务 */
.pet-feed { position: fixed; left: 16px; bottom: 16px; z-index: 255; pointer-events: none; animation: petin .35s cubic-bezier(.3,1.4,.5,1) both; }
.pet-feed.out { animation: petout .45s ease forwards; }
@keyframes petin { from { transform: translateY(140%); } to { transform: none; } }
@keyframes petout { to { transform: translateY(140%); opacity: 0; } }
.pet-bowl-wrap { position: relative; width: 130px; display: flex; flex-direction: column; align-items: center; }
.pet-cat { width: 120px; height: auto; margin-bottom: -26px; filter: drop-shadow(0 6px 10px rgba(80,60,40,.25)); }
.pet-bowl { font-size: 54px; line-height: 1; position: relative; z-index: 1; }
.pet-bowl.munch { animation: munch .35s ease-in-out 5; }
@keyframes munch { 50% { transform: translateY(3px) rotate(-6deg) scale(1.06); } }
.pet-say { position: absolute; left: 100%; bottom: 70px; white-space: nowrap; background: #fff; color: #6b4b2a; font-weight: 600; font-size: .9rem; padding: 6px 12px; border-radius: 14px 14px 14px 4px; box-shadow: 0 6px 18px rgba(80,60,40,.18); opacity: 0; transform: scale(.6); transform-origin: left bottom; transition: opacity .25s, transform .25s cubic-bezier(.3,1.6,.5,1); }
.pet-say.show { opacity: 1; transform: none; }
.pet-note { position: fixed; z-index: 256; pointer-events: none; background: #fffbe8; color: #6b4b2a; border: 1px solid #f2d79a; border-radius: 8px; padding: 4px 10px; font-size: .85rem; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 12px rgba(120,90,40,.2);
  transform: translate(-50%, -50%); animation: petfly .95s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes petfly {
  0% { transform: translate(-50%, -50%) rotate(0) scale(1); }
  50% { transform: translate(calc(-50% + var(--dx) * .5), calc(-50% + var(--dy) * .5 - 140px)) rotate(-200deg) scale(.85); }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(-360deg) scale(.3); opacity: .6; }
}
@media (max-width: 640px) { .pet-cat { width: 96px; } .pet-bowl { font-size: 44px; } .pet-say { bottom: 56px; font-size: .82rem; } }
/* 🐾 网页版豆沙包 */
.webpet { position: fixed; left: 0; bottom: 4px; z-index: 45; width: 96px; pointer-events: none; will-change: transform; }
.webpet img { width: 96px; height: auto; display: block; pointer-events: auto; cursor: pointer; filter: drop-shadow(0 4px 6px rgba(80,60,40,.22)); -webkit-tap-highlight-color: transparent; user-select: none; }
.webpet-say { position: absolute; left: 60%; bottom: 82%; white-space: nowrap; background: #fff; color: #6b4b2a; font-size: .82rem; font-weight: 600; padding: 4px 10px; border-radius: 12px 12px 12px 3px; box-shadow: 0 4px 14px rgba(80,60,40,.18); opacity: 0; transform: scale(.6); transform-origin: left bottom; transition: opacity .2s, transform .25s cubic-bezier(.3,1.6,.5,1); pointer-events: none; }
.webpet-say.show { opacity: 1; transform: none; }
@media (max-width: 640px) { .webpet, .webpet img { width: 72px; } .webpet-say { font-size: .76rem; } }
@media print { .webpet { display: none; } }
.webpet img { touch-action: none; } /* 手机上按住拖豆沙包时不滚动页面 */

.webpet.walking img { animation: petstep .26s ease-in-out infinite; } /* 走路时一颠一颠 */
@keyframes petstep { 50% { translate: 0 -3px; } }