:root[data-theme="simple"]{
    --bg:#f5f6f8; --surface:#ffffff; --surface-2:#eef1f5;
    --text:#1f2328; --text-2:#626b76; --primary:#2f6fed;
    --border:#e3e6ea; --shadow:0 1px 3px rgba(0,0,0,.07);
    --ok:#1a9e6b; --bad:#d64545;
  }
  :root[data-theme="classic"]{
    --bg:#f2ecd9; --surface:#fbf6e9; --surface-2:#efe6cf;
    --text:#3a2b1a; --text-2:#7c6c50; --primary:#8a5a2b;
    --border:#dfd1b4; --shadow:0 1px 4px rgba(90,70,40,.10);
    --ok:#3f7d54; --bad:#b04a3f;
  }
  :root[data-theme="dark"]{
    --bg:#111318; --surface:#1b1e25; --surface-2:#242833;
    --text:#e8eaee; --text-2:#9aa3ae; --primary:#6ea8ff;
    --border:#2b303b; --shadow:0 1px 3px rgba(0,0,0,.4);
    --ok:#4cc38a; --bad:#f26d6d;
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{background:var(--bg);color:var(--text);font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;line-height:1.7;min-height:100vh}
  [data-theme="classic"] body{font-family:"Noto Serif CJK SC","Songti SC","STSong",Georgia,serif}

  #bg-layer{position:fixed;inset:0;background-size:cover;background-position:center;z-index:-3;display:none}
  body.has-bg #bg-layer{display:block}
  #bg-scrim{position:fixed;inset:0;background:#000;opacity:.35;z-index:-2;display:none}
  body.has-bg #bg-scrim{display:block}

  header{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow)}
  .head-inner{max-width:900px;margin:0 auto;padding:12px 16px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .logo{font-weight:700;font-size:17px;white-space:nowrap}
  .logo small{display:block;font-weight:400;font-size:11px;color:var(--text-2)}
  #search{flex:1;min-width:200px;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:14px;outline:none}
  #search:focus{border-color:var(--primary)}
  .icon-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;padding:8px 11px;font-size:13px;cursor:pointer}
  .icon-btn:hover{border-color:var(--primary);color:var(--primary)}

  #search-panel{position:relative;max-width:900px;margin:0 auto;padding:0 16px}
  #search-results{position:absolute;left:16px;right:16px;top:4px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.14);max-height:70vh;overflow:auto;display:none;z-index:30}
  #search-results.show{display:block}
  .s-item{padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer}
  .s-item:last-child{border-bottom:none}
  .s-item:hover{background:var(--surface-2)}
  .s-item .from{font-size:12px;color:var(--text-2);margin-top:2px}
  .s-empty{padding:16px;color:var(--text-2);text-align:center;font-size:14px}
  mark{background:transparent;color:var(--primary);font-weight:700}

  nav{display:flex;gap:4px;max-width:900px;margin:18px auto 0;padding:0 16px}
  nav button{flex:1;padding:9px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);border-radius:8px;cursor:pointer;font-size:14px}
  nav button.active{background:var(--primary);color:#fff;border-color:var(--primary)}

  main{max-width:900px;margin:16px auto 0;padding:0 16px}
  .card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}
  h2{font-size:17px;margin:0 0 12px}
  h3{font-size:15px;margin:14px 0 8px}
  .muted{color:var(--text-2);font-size:13px}
  .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

  .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
  .stat{padding:14px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
  .stat b{font-size:20px;display:block;word-break:break-all}
  .stat span{font-size:12px;color:var(--text-2)}

  .btn{display:inline-block;padding:9px 16px;border:none;border-radius:8px;background:var(--primary);color:#fff;font-size:14px;cursor:pointer}
  .btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--border)}
  .btn:disabled{opacity:.5;cursor:not-allowed}

  select,input[type=text],input.match-input{padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:14px;outline:none}
  select:focus,input:focus{border-color:var(--primary)}

  .prompt{font-size:18px;padding:14px;background:var(--surface-2);border-radius:10px;margin-bottom:12px;line-height:2.1}
  .hint{color:var(--text-2);font-size:13px;margin:6px 0;padding-left:8px;border-left:2px solid var(--border)}
  .hint-prompt{font-size:15px;padding:12px 14px;background:var(--surface-2);border-radius:10px;margin-bottom:10px;line-height:1.9}
  .fill-line{font-size:20px;letter-spacing:2px;line-height:2.6;display:flex;flex-wrap:wrap;gap:2px;align-items:center}
  .fill-line .ch{padding:0 1px}
  input.blank{width:26px;height:30px;text-align:center;font-size:19px;border:1px solid var(--border);border-bottom:2px solid var(--primary);border-radius:4px;background:var(--surface);color:var(--text);margin:0 1px}
  input.blank.right{border-color:var(--ok);color:var(--ok)}
  input.blank.wrong{border-color:var(--bad);color:var(--bad)}
  .match-input{width:100%;font-size:16px;margin:8px 0}
  .feedback{margin-top:12px;font-size:14px}
  .feedback .ok{color:var(--ok)} .feedback .bad{color:var(--bad)}
  .answer-line{background:var(--surface-2);padding:10px;border-radius:8px;margin-top:8px;font-size:15px}
  .q-card{border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:12px}
  .q-card .idx{font-size:12px;color:var(--text-2);margin-bottom:6px}

  .poem-row{display:flex;align-items:center;gap:10px;padding:10px 6px;border-bottom:1px solid var(--border);flex-wrap:wrap}
  .poem-row:last-child{border-bottom:none}
  .poem-row .no{color:var(--text-2);font-size:12px;width:28px;flex-shrink:0}
  .poem-row .title{font-weight:600;cursor:pointer}
  .poem-row .title:hover{color:var(--primary)}
  .poem-row .meta{font-size:12px;color:var(--text-2);flex:1;min-width:120px}
  .badge{font-size:11px;padding:2px 8px;border-radius:10px;border:1px solid var(--border);color:var(--text-2);cursor:pointer;white-space:nowrap}
  .badge.s1{color:var(--primary);border-color:var(--primary)}
  .badge.s2{color:var(--ok);border-color:var(--ok)}

  .overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
  .overlay.show{display:flex}
  .modal{background:var(--surface);color:var(--text);border-radius:14px;padding:22px;max-width:420px;width:100%;box-shadow:0 12px 50px rgba(0,0,0,.3)}
  .modal h3{margin:0 0 8px}
  .modal .body{font-size:14px;color:var(--text-2);margin-bottom:16px}
  .pre{white-space:pre-wrap;font-size:15px;line-height:2;margin:8px 0}
  .settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}
  .help-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--border);font-size:14px}
  .help-row:last-child{border-bottom:none}
  @media(max-width:520px){.settings-grid{grid-template-columns:1fr}}

  #toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 18px;border-radius:8px;font-size:13px;opacity:0;transition:opacity .2s;z-index:200;pointer-events:none}
  #toast.show{opacity:1}

  kbd{border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;padding:0 6px;font-size:11px;background:var(--surface-2);color:var(--text)}

  /* ── 动效 ─────────────────────────────── */
  @keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  @keyframes pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
  @keyframes shake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
  .q-card{animation:fadeInUp .25s ease}
  .overlay.show{animation:fadeIn .15s ease}
  .overlay.show .modal{animation:pop .18s ease}
  .feedback .ok,.feedback .bad{display:inline-block;animation:pop .2s ease}
  .wrong-shake{animation:shake .3s}
  .btn{transition:transform .08s ease,box-shadow .15s ease,background .15s ease}
  .btn:active{transform:scale(.97)}
  .card{transition:box-shadow .2s ease}
  .s-item{transition:background .12s ease}
  nav button{transition:background .15s ease,color .15s ease,border-color .15s ease}
  input.blank,.match-input{transition:border-color .12s ease,color .12s ease}
  @media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

  /* ── 词汇背诵 ─────────────────────────── */
  .v-opt{display:block;width:100%;text-align:left;padding:12px 16px;margin:8px 0;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font-size:15px;cursor:pointer;transition:border-color .12s ease,color .12s ease,background .12s ease}
  .v-opt:hover:not(:disabled){border-color:var(--primary)}
  .v-opt:disabled{cursor:default;opacity:1}
  .v-opt .tag{display:inline-block;font-size:11px;color:var(--text-2);border:1px solid var(--border);border-radius:6px;padding:0 7px;margin-right:9px;vertical-align:middle;line-height:1.5}
  .v-opt.right{border-color:var(--ok);color:var(--ok);background:var(--surface-2)}
  .v-opt.wrong{border-color:var(--bad);color:var(--bad);background:var(--surface-2)}
  .v-opt.right .tag,.v-opt.wrong .tag{border-color:currentColor;color:currentColor}
  .v-word{font-size:24px;font-weight:700;letter-spacing:1px;word-break:break-word}
  .v-meaning{font-size:15px;line-height:1.8;word-break:break-word}
  .v-prompt-label{font-size:12px;color:var(--text-2);margin-bottom:6px}
  .v-summary .score{font-size:44px;font-weight:700;text-align:center;line-height:1.2}
  .v-summary .acc{text-align:center;color:var(--text-2);font-size:14px;margin-top:4px}
  .v-wrong-item{padding:10px 12px;border:1px solid var(--border);border-radius:10px;margin-bottom:8px;font-size:14px;line-height:1.7}

  /* ── 题库（理解性默写）────────────────── */
  .bank-q{padding:12px 14px;border:1px solid var(--border);border-radius:10px;margin-bottom:10px;background:var(--surface)}
  .bank-hint{font-size:14px;line-height:1.7;color:var(--text)}
  .bank-hint b{color:var(--text-2);margin-right:4px}
  .bank-ans{margin-top:8px;padding:8px 12px;border-radius:8px;background:var(--surface-2);color:var(--primary);font-weight:600;font-size:15px;line-height:1.8;word-break:break-word}
  .bank-ans::before{content:'答案：';font-weight:400;color:var(--text-2);font-size:12px}
  @media(max-width:520px){
    .bank-q{padding:10px 12px}
    .bank-hint{font-size:13px}
    .bank-ans{font-size:14px}
  }