:root {
      --page-max: 1120px;
      --accent: #6f5cf2;
      --accent-dark: #5140bf;
      --text-main: #4e4696;
      --text-sub: #766eb0;
      --soft-panel: linear-gradient(145deg, rgba(234,237,255,.94), rgba(243,244,255,.98));
      --card-bg: #ffffff;
      --shadow: 0 12px 28px rgba(53,45,111,.14);
      --success: #71ea74;
      --danger: #f57c7c;
      --muted: #eef1ff;
      --neutral: #f6f6f8;
      --line: rgba(67, 58, 118, .18);
    }
    * { box-sizing: border-box; }
    html, body {
      margin: 0;
      min-height: 100%;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
      background: transparent;
      color: var(--text-main);
    }
    body { padding: 18px; display: flex; justify-content: center; }
    .app { width: min(var(--page-max), 100%); }
    .screen[hidden] { display: none !important; }
    .headline { margin: 6px 0 18px; font-size: clamp(18px, 2.5vw, 28px); font-weight: 700; color: #2d2870; }
    .desc { margin: 0 0 18px; font-size: 16px; line-height: 1.8; color: #39327d; }

    .stage {
      position: relative; width: 100%; min-height: 620px; padding: 24px 84px 82px;
      border-radius: 28px; overflow: hidden; background: var(--soft-panel);
    }
    .stage::before, .stage::after {
      content: ""; position: absolute; border-radius: 999px; background: rgba(255,255,255,.22); pointer-events: none;
    }
    .stage::before { width: 120%; height: 55%; left: -36%; top: 10%; transform: rotate(-18deg); }
    .stage::after { width: 95%; height: 40%; right: -25%; bottom: 8%; transform: rotate(-14deg); }
    .deck { position: relative; z-index: 1; min-height: 500px; display: flex; align-items: center; justify-content: center; }
    .study-card-shell { width: min(86vw, 380px); min-height: 520px; perspective: 1400px; }
    .study-card { position: relative; width: 100%; min-height: 520px; transform-style: preserve-3d; transition: transform .6s ease; cursor: pointer; }
    .study-card.is-flipped { transform: rotateY(180deg); }
    .face {
      position: absolute; inset: 0; border-radius: 16px; background: var(--card-bg); box-shadow: var(--shadow);
      backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 14px 18px 18px; overflow: hidden;
      display: flex; flex-direction: column; align-items: center; text-align: center;
    }
    .back { transform: rotateY(180deg); }
    .bookmark {
      align-self: flex-start; width: 20px; height: 28px; border: 2px solid rgba(123, 99, 241, .28); border-bottom: none;
      clip-path: polygon(0 0,100% 0,100% 100%,50% 78%,0 100%); border-radius: 2px 2px 0 0; margin-left: 2px; opacity: .9;
    }
    .word { margin-top: 10px; font-size: clamp(28px, 3.5vw, 48px); line-height: 1.08; font-weight: 600; color: var(--text-main); }
    .phonetic, .meaning, .sentence-zh { color: var(--text-sub); }
    .phonetic { font-size: clamp(14px, 2vw, 22px); margin-top: 8px; font-style: italic; line-height: 1.2; }
    .meaning { font-size: clamp(18px, 2.2vw, 28px); line-height: 1.28; white-space: pre-line; margin-top: 8px; }
    .audio-btn {
      width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(123,99,241,.14); background: var(--accent);
      color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px rgba(123,99,241,.20);
      cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; margin-top: 14px; flex: 0 0 auto;
    }
    .audio-btn.secondary { width: 34px; height: 34px; background: transparent; color: var(--accent); box-shadow: none; border: 1.5px solid rgba(123,99,241,.55); margin-top: 8px; }
    .audio-btn.small { width: 34px; height: 34px; margin: 0; box-shadow: none; border-radius: 10px; flex: 0 0 auto; }
    .audio-btn:active { transform: scale(.95); }
    .audio-btn[disabled] { opacity: .45; cursor: default; }
    .example-box { width: 100%; margin-top: 24px; padding: 22px 16px 16px; border-radius: 14px; background: linear-gradient(180deg, rgba(243,241,252,.96), rgba(240,237,250,.88)); }
    .example-label { font-size: 13px; color: var(--accent); font-weight: 700; letter-spacing: .03em; }
    .sentence { margin-top: 14px; font-size: clamp(16px, 2vw, 21px); line-height: 1.6; color: var(--text-main); min-height: 82px; display: flex; align-items: center; justify-content: center; white-space: pre-line; }
    .sentence-zh { margin-top: 10px; font-size: 15px; line-height: 1.6; white-space: pre-line; }
    .image-wrap { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 200px; margin-top: 14px; flex: 1; }
    .image-wrap img { max-width: 100%; max-height: 260px; object-fit: contain; border-radius: 10px; display: block; }
    .flip-tip { margin-top: auto; font-size: 12px; color: rgba(78, 70, 150, .66); padding-top: 12px; }
    .nav-btn {
      position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(78,70,150,.16);
      background: rgba(255,255,255,.78); color: var(--text-main); font-size: 28px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
    }
    .nav-btn[disabled] { opacity: .42; cursor: default; }
    .nav-prev { left: 22px; }
    .nav-next { right: 22px; }
    .counter {
      position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); min-width: 76px; padding: 9px 18px; border-radius: 10px;
      background: rgba(255,255,255,.92); box-shadow: 0 8px 20px rgba(56, 50, 107, .08); font-size: 18px; color: var(--text-main); text-align: center; z-index: 2;
    }
    .footer-actions { margin-top: 18px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
    .primary-btn, .ghost-btn {
      min-width: 164px; border: none; border-radius: 12px; padding: 16px 28px; font-size: 22px; line-height: 1; color: #fff; background: var(--accent);
      box-shadow: 0 10px 20px rgba(111, 92, 242, .18); cursor: pointer; transition: transform .18s ease, opacity .18s ease;
    }
    .ghost-btn { background: #2558d3; }
    .wide-btn, .start-btn, .listen-btn {
      width: 100%; border: none; border-radius: 12px; padding: 18px 24px; color: #fff; font-size: 20px; font-weight: 700; cursor: pointer;
      box-shadow: 0 10px 20px rgba(44, 99, 221, .18);
    }
    .wide-btn { background: #2c63dd; }
    .start-btn { background: #29aa42; }
    .listen-btn { background: #2c63dd; }
    .review-panel { border: 2px solid rgba(61, 56, 125, .28); background: rgba(255,255,255,.54); padding: 12px; }
    .review-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
    .mini-shell { perspective: 1200px; min-height: 176px; }
    .mini-card { position: relative; min-height: 176px; transform-style: preserve-3d; transition: transform .55s ease; cursor: pointer; }
    .mini-card.is-flipped { transform: rotateY(180deg); }
    .mini-face {
      position: absolute; inset: 0; background: #f2e8ea; border: 1px solid rgba(67, 58, 118, .2); backface-visibility: hidden;
      -webkit-backface-visibility: hidden; padding: 12px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    }
    .mini-back { transform: rotateY(180deg); background: #ffffff; justify-content: flex-start; padding: 10px 10px 12px; }
    .mini-front-top { width: 100%; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 10px; }
    .mini-word { font-size: clamp(20px, 2.8vw, 30px); line-height: 1.25; color: #333; word-break: break-word; }
    .mini-back img { width: 100%; height: 82px; object-fit: cover; border-radius: 6px; margin-bottom: 8px; background: #eef1ff; }
    .mini-meaning, .mini-phonetic, .mini-sentence { width: 100%; line-height: 1.3; color: #333; word-break: break-word; white-space: pre-line; }
    .mini-meaning { font-size: 14px; font-weight: 700; }
    .mini-phonetic { font-size: 13px; font-style: italic; margin-top: 2px; }
    .mini-sentence { font-size: 13px; margin-top: 4px; }

    .quiz-wrap { max-width: 1080px; margin: 0 auto; }
    .timer-bar { background: #000; color: #7eff00; font-size: 36px; text-align: center; padding: 12px 20px; line-height: 1; margin-top: 10px; }
    .dot-row { display: flex; justify-content: center; gap: 10px; padding: 12px 0 8px; }
    .dot { width: 24px; height: 24px; border-radius: 50%; background: #b5b5b5; }
    .dot.active { background: #8a8a8a; transform: scale(1.08); }
    .dot.correct { background: green; }
    .dot.wrong { background: red; }

    .quiz-card {
      margin-top: 6px; border: 3px solid #6a7cd6; background: rgba(255,255,255,.48); display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 18px; padding: 10px 14px; min-height: 122px;
    }
    .quiz-card img { width: 104px; height: 104px; object-fit: cover; border: 1px solid rgba(0,0,0,.25); background: #fff; }
    .quiz-word { font-size: clamp(40px, 5vw, 60px); text-align: center; color: #333; }
    .options { margin-top: 8px; border: 1px solid rgba(0,0,0,.1); background: rgba(255,255,255,.38); }
    .option {
      border-top: 1px solid rgba(0,0,0,.12); padding: 14px 20px; cursor: pointer; transition: background .2s ease; text-align: center;
      min-height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    }
    .option:first-child { border-top: none; }
    .option:hover { background: rgba(111, 92, 242, .06); }
    .option.correct { background: var(--success); }
    .option.wrong { background: var(--danger); }
    .option.disabled { pointer-events: none; }
    .option-meaning, .option-phonetic, .option-sentence, .option-word { color: #333; white-space: pre-line; }
    .option-meaning, .option-word { font-size: 18px; }
    .option-phonetic, .option-sentence { font-size: 18px; margin-top: 2px; }
    .option-mark { font-size: 28px; line-height: 1; margin-top: 6px; }
    .quiz-result { text-align: center; padding: 26px 16px 6px; }
    .result-title { font-size: clamp(26px, 4vw, 38px); color: #2d2870; font-weight: 700; }
    .result-sub { margin-top: 10px; font-size: 18px; color: #4a438b; line-height: 1.8; }

    .spell-answer {
      margin-top: 8px; min-height: 64px; border: 1px solid rgba(0,0,0,.18); background: rgba(255,255,255,.48);
      display: flex; align-items: center; justify-content: center; padding: 8px 14px; font-size: clamp(28px, 4vw, 42px); color: #333;
      transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
    }
    .spell-answer.correct { background: rgba(118, 232, 109, .96); border-color: rgba(54, 157, 47, .9); color: #173d13; }
    .spell-answer.wrong { background: rgba(244, 67, 54, .24); border-color: rgba(244, 67, 54, .85); color: #b71c1c; }
    .spell-answer.over { background: rgba(244, 67, 54, .18); border-color: rgba(244, 67, 54, .8); color: #b71c1c; }
    .spell-answer.flash { animation: spellFlash .32s ease; }
    .spell-actions { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .spell-action-btn {
      min-height: 54px; border: none; border-radius: 8px; font-size: 24px; font-weight: 700; color: #fff; cursor: pointer;
      box-shadow: 0 10px 24px rgba(34, 31, 86, .12);
    }
    .spell-action-btn.undo { background: #6282d8; }
    .spell-action-btn.submit { background: #53b85b; }
    .spell-action-btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
    .letter-bank { margin-top: 8px; border: 1px solid rgba(0,0,0,.18); background: rgba(255,255,255,.38); padding: 12px 10px; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
    .letter-btn {
      min-width: 48px; height: 50px; border-radius: 6px; border: 1px solid rgba(0,0,0,.3); background: #fff; color: #333; font-size: 22px; cursor: pointer;
    }
    .letter-btn:disabled { opacity: .35; cursor: default; }
    .feedback-bar { display: none !important; }
    .spell-result-word { margin-top: 8px; min-height: 64px; border-radius: 6px; display: none; align-items: center; justify-content: center; font-size: 26px; color: #333; }
    .spell-result-word.correct { display: flex; background: var(--success); }
    .spell-result-word.wrong { display: flex; background: var(--danger); color: #8d1713; }
    @keyframes spellFlash {
      0% { background: rgba(255,255,255,.48); border-color: rgba(0,0,0,.18); transform: scale(1); }
      30% { background: rgba(244, 67, 54, .28); border-color: rgba(244, 67, 54, .92); transform: scale(1.01); }
      100% { background: rgba(255,255,255,.48); border-color: rgba(0,0,0,.18); transform: scale(1); }
    }

    @media (max-width: 980px) {
      .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .stage { padding: 22px 58px 82px; }
    }
    @media (max-width: 700px) {
      body { padding: 10px; }
      .stage { min-height: 560px; padding: 18px 48px 76px; border-radius: 18px; }
      .nav-prev { left: 10px; }
      .nav-next { right: 10px; }
      .nav-btn { width: 42px; height: 42px; font-size: 24px; }
      .study-card-shell, .study-card { min-height: 500px; }
      .review-grid { grid-template-columns: 1fr; }
      .quiz-card { grid-template-columns: 1fr; justify-items: center; }
      .quiz-word { font-size: 42px; }
      .option-meaning, .option-phonetic, .option-sentence, .option-word { font-size: 16px; }
      .primary-btn, .ghost-btn, .wide-btn, .start-btn, .listen-btn { font-size: 18px; }
    }

    .panel-card { max-width: 760px; margin: 20px auto 0; background: #fff; border-radius: 24px; box-shadow: var(--shadow); padding: 36px 28px; text-align: center; }
    .panel-icon { width: 86px; height: 86px; margin: 0 auto 18px; border-radius: 50%; display:flex; align-items:center; justify-content:center; font-size: 40px; background: rgba(111,92,242,.12); color: var(--accent); }
    .panel-title { margin: 0 0 12px; font-size: clamp(24px, 3vw, 34px); color:#2d2870; font-weight:700; }
    .panel-desc { margin: 0 auto; max-width: 560px; font-size: 17px; line-height: 1.9; color: #50499a; }
    .panel-stats { margin: 22px auto 0; max-width: 520px; padding: 18px 20px; border-radius: 18px; background: #f3f1ff; color:#3a347e; font-size:18px; line-height:1.9; }

  
.loading-mask{display:flex;align-items:center;justify-content:center;min-height:260px;background:#fff;border-radius:24px;box-shadow:var(--shadow);font-size:22px;color:#4e4696;}