/* ============================================================================
   zz-modern.css — Stage 2F-10. Clean, modern, lightweight restyle of the
   ear-training test (/test/ /question/ /form/ /result/). Scoped to the page-test
   template so it never leaks site-wide. No remote fonts/icons/CDN. Layui is kept
   for now (the JS uses its button classes) but its look is fully overridden.
   ============================================================================ */
body.page-template-page-test-php {
  --ww-pink: #ffb7c5; --ww-pink-d: #ff7a98; --ww-ink: #4a4a52; --ww-soft: #fff5f7;
}
/* ---- shared card shell ---- */
body.page-template-page-test-php .index,
body.page-template-page-test-php .question,
body.page-template-page-test-php .form,
body.page-template-page-test-php .score {
  max-width: 680px; margin: 32px auto; padding: 30px 32px;
  background: rgba(255,255,255,.86); backdrop-filter: blur(6px);
  border: 1px solid #ffe0e6; border-radius: 18px;
  box-shadow: 0 10px 34px rgba(255,150,170,.18), 0 2px 8px rgba(0,0,0,.04);
  line-height: 1.85; color: var(--ww-ink);
  font-family: -apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft Yahei',system-ui,sans-serif;
}
body.page-template-page-test-php .index ul,
body.page-template-page-test-php .form ul { padding-left: 1.1em; }
body.page-template-page-test-php h1,
body.page-template-page-test-php .score h1 { font-size: 22px; font-weight: 800; margin: 0 0 14px; color: #d2607a; letter-spacing: .5px; }

/* ---- buttons (override layui) ---- */
body.page-template-page-test-php .layui-btn {
  height: auto; line-height: 1.5; padding: 11px 22px; border: none; border-radius: 12px;
  font-size: 15px; font-weight: 600; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, var(--ww-pink), var(--ww-pink-d));
  box-shadow: 0 4px 12px rgba(255,122,152,.28); transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
body.page-template-page-test-php .layui-btn:hover { filter: brightness(1.05); box-shadow: 0 6px 16px rgba(255,122,152,.36); }
body.page-template-page-test-php .layui-btn:active { transform: translateY(1px); }
body.page-template-page-test-php .layui-btn-primary { background: #fff; color: var(--ww-pink-d); border: 1.5px solid var(--ww-pink); box-shadow: none; }
body.page-template-page-test-php #testVolumeButton, body.page-template-page-test-php .test-volume-button {
  background: linear-gradient(135deg,#ffd36b,#ff9f43); box-shadow: 0 4px 12px rgba(255,159,67,.3);
}

/* ---- question page ---- */
body.page-template-page-test-php .question-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
body.page-template-page-test-php #question-number { font-size: 15px; font-weight: 700; color: var(--ww-pink-d); background: var(--ww-soft); padding: 4px 12px; border-radius: 999px; }
body.page-template-page-test-php #question-line { flex: 1; height: 6px; background: #ffe6ec; border-radius: 999px; overflow: hidden; min-width: 120px; }
body.page-template-page-test-php #question-line > * { background: var(--ww-pink-d); height: 100%; display: block; }
body.page-template-page-test-php #tips {
  display: inline-block; margin: 16px 0; background: linear-gradient(135deg,#7ec8ff,#4aa3ff);
  box-shadow: 0 4px 12px rgba(74,163,255,.3);
}
body.page-template-page-test-php .select {
  display: block; width: 100%; text-align: left; margin: 10px 0; padding: 15px 20px;
  background: #fff !important; color: var(--ww-ink) !important; border: 1.5px solid #ffe0e6 !important;
  border-radius: 14px !important; font-size: 16px; box-shadow: 0 2px 6px rgba(0,0,0,.03) !important;
  transition: border-color .15s ease, background .15s ease, transform .06s ease;
}
body.page-template-page-test-php .select:not([disabled]):hover { border-color: var(--ww-pink) !important; background: var(--ww-soft) !important; }
body.page-template-page-test-php .select:not([disabled]):active { transform: translateY(1px); }
body.page-template-page-test-php .select[disabled] { opacity: .55; cursor: not-allowed; }

/* ---- form page ---- */
body.page-template-page-test-php .layui-input, body.page-template-page-test-php #suggestion {
  width: 100%; box-sizing: border-box; padding: 12px 14px; margin: 6px 0 16px;
  border: 1.5px solid #ffe0e6; border-radius: 12px; font-size: 15px; background: #fff; transition: border-color .15s ease;
}
body.page-template-page-test-php .layui-input:focus, body.page-template-page-test-php #suggestion:focus { outline: none; border-color: var(--ww-pink); }

/* ---- result page ---- */
body.page-template-page-test-php .score { text-align: center; }
body.page-template-page-test-php .scoreCount { font-size: 20px; margin: 10px 0 6px; }
body.page-template-page-test-php #score { font-size: 56px; font-weight: 900; color: var(--ww-pink-d); display: inline-block; line-height: 1; }
body.page-template-page-test-php .score .remark { text-align: left; margin-top: 18px; }

/* ---- mobile ---- */
@media (max-width: 600px) {
  body.page-template-page-test-php .index,
  body.page-template-page-test-php .question,
  body.page-template-page-test-php .form,
  body.page-template-page-test-php .score { margin: 14px; padding: 20px 18px; border-radius: 14px; }
  body.page-template-page-test-php #score { font-size: 44px; }
  body.page-template-page-test-php .select { padding: 13px 16px; font-size: 15px; }
}

/* ===== 2G-05C: result distribution chart + light exam polish (scoped, lightweight, no remote) ===== */
.ww-ear-dist-card{margin:18px auto;max-width:560px;padding:18px 20px;border-radius:16px;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:0 10px 30px rgba(31,35,48,.12),inset 0 1px 0 rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.6);
  font-size:14px;color:#2d303a;box-sizing:border-box;}
.ww-ear-dist-title{font-size:16px;font-weight:600;margin-bottom:2px;}
.ww-ear-dist-title b{color:#e3742b;}
.ww-ear-dist-sub{font-size:12px;color:#7a7f8c;margin:6px 0 12px;}
.ww-ear-bar{display:flex;align-items:center;gap:10px;margin:7px 0;}
.ww-ear-bar-label{flex:0 0 56px;font-variant-numeric:tabular-nums;color:#555a66;font-size:13px;}
.ww-ear-bar-track{flex:1;height:12px;border-radius:7px;background:rgba(60,64,75,.12);overflow:hidden;}
.ww-ear-bar-track>i{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,#f0a24b,#e3742b);transition:width .5s ease;}
.ww-ear-bar-val{flex:0 0 46px;text-align:right;font-variant-numeric:tabular-nums;color:#555a66;font-size:13px;}
.ww-ear-bar.is-me .ww-ear-bar-label{color:#e3742b;font-weight:700;}
.ww-ear-bar.is-me .ww-ear-bar-track>i{background:linear-gradient(90deg,#5b8def,#3a6fe0);}
.ww-ear-bar.is-me .ww-ear-bar-val{color:#3a6fe0;font-weight:700;}
.ww-ear-dist-note{margin-top:10px;font-size:12px;color:#9aa0ad;text-align:center;}
@media (max-width:600px){.ww-ear-dist-card{max-width:calc(100% - 24px);padding:15px 16px;}.ww-ear-bar-label{flex-basis:48px;}}
@media (prefers-reduced-motion:reduce){.ww-ear-bar-track>i{transition:none;}}

/* ===== 2G-05C-FIX1: result-page font fix + i18n bits (scoped to the exam pages / .ww-earapp) ===== */
/* The /result/ markup uses theme <h1>/<h3> in .entry-content -> giant. Tame them. */
.page-template-page-test-php .score{max-width:680px;margin:0 auto;}
.page-template-page-test-php .score h1,
.page-template-page-test-php .scoreCount h1{font-size:clamp(20px,3.4vw,28px);line-height:1.35;margin:6px 0 4px;
  word-break:break-word;font-weight:700;color:#2d303a;}
.page-template-page-test-php .scoreCount #score{color:#e3742b;font-weight:800;}
.page-template-page-test-php .scoreList h3{font-size:clamp(14px,2.2vw,17px);line-height:1.6;margin:5px 0;font-weight:600;color:#444a57;}
.page-template-page-test-php .scoreList h3 span{color:#3a6fe0;font-weight:700;}
.page-template-page-test-php .score .remark{margin-top:10px;}
/* language toggle */
.ww-ear-lang{display:flex;gap:8px;justify-content:flex-end;margin:0 0 14px;}
.ww-ear-lang button{cursor:pointer;border:1px solid rgba(60,64,75,.25);background:rgba(255,255,255,.6);
  border-radius:999px;padding:5px 14px;font-size:13px;color:#555a66;transition:all .15s ease;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.ww-ear-lang button.is-on{background:#e3742b;border-color:#e3742b;color:#fff;font-weight:600;}
/* score explanation card */
.ww-ear-exp{max-width:560px;margin:14px auto 0;padding:14px 18px;border-radius:14px;text-align:left;
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.6);box-shadow:0 8px 24px rgba(31,35,48,.1);
  font-size:14px;line-height:1.65;color:#3a3e49;}
.ww-ear-exp-h{font-size:15px;font-weight:700;color:#e3742b;margin-bottom:6px;}
.ww-ear-exp p{margin:4px 0;font-size:14px;}
.ww-ear-exp .ww-ear-note{margin-top:10px;font-size:12.5px;color:#7a7f8c;border-top:1px dashed rgba(60,64,75,.2);padding-top:8px;}
/* retry button */
.ww-ear-retry{display:inline-block;margin:16px auto 6px;padding:9px 22px;border-radius:999px;background:#e3742b;color:#fff;
  font-size:14px;font-weight:600;text-decoration:none;box-shadow:0 6px 16px rgba(227,116,43,.3);}
.ww-ear-retry:hover{background:#cf6420;color:#fff;}
@media (max-width:600px){.page-template-page-test-php .score{max-width:calc(100% - 20px);}.ww-ear-exp{max-width:calc(100% - 20px);}}

/* ===== 2G-05C-FIX2: single-page ear-app (scoped to .ww-earapp; lightweight, no remote) ===== */
.ww-earapp{max-width:680px;margin:0 auto;padding:4px 0 24px;color:#2d303a;font-size:15px;line-height:1.6;}
.ww-earapp *{box-sizing:border-box;}
.ww-langbar{display:flex;gap:8px;justify-content:flex-end;margin-bottom:12px;}
.ww-langbar button{cursor:pointer;border:1px solid rgba(60,64,75,.22);background:rgba(255,255,255,.6);border-radius:999px;padding:5px 14px;font-size:13px;color:#555a66;}
.ww-langbar button.is-on{background:#e3742b;border-color:#e3742b;color:#fff;font-weight:600;}
.ww-card{padding:22px 22px 20px;border-radius:18px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 12px 34px rgba(31,35,48,.12),inset 0 1px 0 rgba(255,255,255,.6);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);}
.ww-card .ww-h{font-size:clamp(19px,3vw,24px)!important;line-height:1.3;margin:0 0 12px;font-weight:700;color:#2d303a;}
.ww-card p{margin:7px 0;font-size:14.5px;color:#3a3e49;}
.ww-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.ww-btn{cursor:pointer;border:none;border-radius:999px;padding:10px 22px;font-size:15px;font-weight:600;transition:transform .1s ease,background .15s ease;}
.ww-btn:active{transform:scale(.97);}
.ww-btn-main{background:#e3742b;color:#fff;box-shadow:0 6px 16px rgba(227,116,43,.3);}
.ww-btn-main:hover{background:#cf6420;} .ww-btn-main:disabled{opacity:.6;cursor:default;}
.ww-btn-ghost{background:rgba(255,255,255,.7);color:#555a66;border:1px solid rgba(60,64,75,.2);}
.ww-btn-play{background:#3a6fe0;color:#fff;box-shadow:0 6px 16px rgba(58,111,224,.28);}
.ww-tip,.ww-lock-tip{font-size:13.5px;color:#7a7f8c;margin:10px 0 0;}
.ww-lock-tip{background:rgba(58,111,224,.08);border:1px dashed rgba(58,111,224,.3);border-radius:12px;padding:9px 12px;color:#3a6fe0;}
.ww-progress{display:flex;align-items:center;gap:12px;font-size:13.5px;color:#555a66;margin-bottom:12px;font-weight:600;}
.ww-track{flex:1;height:8px;border-radius:5px;background:rgba(60,64,75,.12);overflow:hidden;}
.ww-track>i{display:block;height:100%;background:linear-gradient(90deg,#f0a24b,#e3742b);transition:width .35s ease;}
.ww-q-prompt{font-size:clamp(16px,2.4vw,18px);font-weight:600;line-height:1.5;margin:6px 0 14px;color:#2d303a;}
.ww-play-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.ww-plays{font-size:13px;color:#9aa0ad;}
.ww-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;}
.ww-opts.locked{opacity:.55;}
.ww-opt{cursor:pointer;text-align:left;border:1.5px solid rgba(60,64,75,.16);background:rgba(255,255,255,.85);border-radius:14px;
  padding:13px 15px;font-size:14.5px;color:#2d303a;line-height:1.45;transition:all .12s ease;min-height:52px;}
.ww-opts.locked .ww-opt{cursor:not-allowed;}
.ww-opt:hover{border-color:rgba(227,116,43,.5);}
.ww-opt.is-on{border-color:#e3742b;background:rgba(227,116,43,.1);font-weight:600;box-shadow:0 4px 12px rgba(227,116,43,.18);}
.ww-opt img{display:block;margin:0 auto;}
.ww-nav{margin-top:16px;}
.ww-field{margin:12px 0;}
.ww-field label{display:block;font-size:13.5px;color:#555a66;margin-bottom:5px;font-weight:600;}
.ww-field input,.ww-field textarea{width:100%;border:1.5px solid rgba(60,64,75,.18);border-radius:12px;padding:10px 13px;font-size:14.5px;background:#fff;color:#2d303a;}
.ww-field textarea{min-height:80px;resize:vertical;}
.ww-result .ww-score-big{font-size:clamp(15px,2.4vw,18px);color:#555a66;text-align:center;margin-bottom:8px;}
.ww-result .ww-score-big b{display:block;font-size:clamp(34px,7vw,52px);color:#e3742b;font-weight:800;line-height:1.15;margin-top:4px;}
.ww-dims{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0;}
.ww-dim{flex:0 0 auto;background:rgba(58,111,224,.08);border-radius:12px;padding:7px 13px;font-size:13.5px;color:#444a57;}
.ww-dim b{color:#3a6fe0;margin-left:5px;}
.ww-exp{margin-top:14px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.6);font-size:14px;line-height:1.65;}
.ww-exp-h{font-weight:700;color:#e3742b;margin-bottom:6px;}
.ww-exp p{margin:4px 0;font-size:13.5px;}
.ww-note{margin-top:9px;font-size:12.5px;color:#7a7f8c;border-top:1px dashed rgba(60,64,75,.2);padding-top:8px;}
.ww-dist{margin-top:16px;}
.ww-dist-h{font-size:13.5px;font-weight:600;color:#555a66;margin-bottom:8px;}
.ww-bar{display:flex;align-items:center;gap:10px;margin:6px 0;}
.ww-bar-l{flex:0 0 92px;font-size:12.5px;color:#555a66;}
.ww-bar-t{flex:1;height:11px;border-radius:6px;background:rgba(60,64,75,.12);overflow:hidden;}
.ww-bar-t>i{display:block;height:100%;background:linear-gradient(90deg,#f0a24b,#e3742b);}
.ww-bar-v{flex:0 0 42px;text-align:right;font-size:12.5px;color:#555a66;}
.ww-bar.is-me .ww-bar-l{color:#3a6fe0;font-weight:700;} .ww-bar.is-me .ww-bar-t>i{background:linear-gradient(90deg,#5b8def,#3a6fe0);} .ww-bar.is-me .ww-bar-v{color:#3a6fe0;font-weight:700;}
.ww-toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(10px);background:rgba(45,48,58,.92);color:#fff;
  padding:11px 20px;border-radius:999px;font-size:14px;z-index:99999;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:88vw;text-align:center;}
.ww-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
@media (max-width:600px){.ww-earapp{padding-left:2px;padding-right:2px;}.ww-card{padding:18px 16px;}.ww-opts{grid-template-columns:1fr;}.ww-bar-l{flex-basis:80px;}}
@media (prefers-reduced-motion:reduce){.ww-track>i,.ww-toast,.ww-btn{transition:none;}}

/* ===== 2G-05C-FIX3: .ww-ear-option (visible-but-locked) + nav + diagnostic ===== */
.ww-ear-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
.ww-ear-option{cursor:pointer;text-align:left;border:1.5px solid rgba(60,64,75,.16);background:rgba(255,255,255,.9);
  border-radius:14px;padding:13px 15px;font-size:14.5px;line-height:1.45;color:#2d303a;transition:all .15s ease;width:100%;}
.ww-ear-option:hover{border-color:rgba(227,116,43,.5);}
.ww-ear-option.is-on{border-color:#e3742b;background:rgba(227,116,43,.12);font-weight:600;box-shadow:0 4px 12px rgba(227,116,43,.18);}
.ww-ear-option img{display:block;margin:0 auto;}
/* locked = clearly VISIBLE (not hidden), just dimmed + "not yet" cursor; click is intercepted -> toast */
.ww-ear-options.is-locked{opacity:.62;}
.ww-ear-options.is-locked .ww-ear-option{cursor:not-allowed;border-style:dashed;}
.ww-lock-tip{margin-top:10px;font-size:13px;color:#9a6a3a;background:rgba(227,116,43,.08);
  border-radius:10px;padding:8px 12px;display:inline-block;}
.ww-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;}
.ww-err-block{border:1.5px solid rgba(200,60,60,.4);background:rgba(255,238,238,.9);}
.ww-err-block p{color:#a33;font-size:14.5px;margin:0;}
@media (max-width:600px){.ww-ear-options{grid-template-columns:1fr;}}

/* ===== 2G-05C-FIX4: numeric-field error highlight + sr-only SEO intro ===== */
.ww-field-bad input,.ww-field-bad textarea,input.ww-field-bad,textarea.ww-field-bad{
  border-color:#d9534f!important;box-shadow:0 0 0 2px rgba(217,83,79,.15)!important;}
.ww-field input[type="number"]{-moz-appearance:textfield;}
/* crawlable static intro for /test/, visually hidden so it never affects the exam UI */
.ww-seo-intro{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ===== 2G-05C-FIX6B: photo background moved to /wp-test/css/index.css #content (real source); glass/play/copyright kept below ===== */
/* glass exam cards (readable over the photo) */
.ww-earapp .ww-card{
  background:rgba(255,255,255,.74);
  -webkit-backdrop-filter:blur(12px) saturate(1.1); backdrop-filter:blur(12px) saturate(1.1);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 10px 30px rgba(31,35,48,.14);
}

/* play button: stable width so 播放 / 加载中… / 再听一次 / 已播完 (Play/Loading…/Play again/Done)
 * never resize it; greyed disabled state after 2 plays. */
.ww-earapp .ww-btn-play{ min-width:9.5em; white-space:nowrap; text-align:center; }
.ww-earapp .ww-btn-play:disabled{ background:#c2c7d0 !important; color:#fff !important; box-shadow:none !important; cursor:not-allowed; opacity:1; }

/* static copyright bar — two centered lines, in-flow, never covers the answer area */
body.page-id-802 #colophon{ display:none !important; }   /* no global floating/reveal footer on /test/ */
.ww-ear-copyright{
  max-width:680px; margin:18px auto 30px; padding:12px 14px; text-align:center;
  font-size:12.5px; line-height:1.8; color:#5a6070;
  background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.5); border-radius:14px;
}
.ww-ear-copyright .ww-ear-copyright-l1{ display:block; font-weight:600; color:#454b59; }
.ww-ear-copyright .ww-ear-copyright-l2{ display:block; color:#6a7080; }
.ww-ear-copyright .ww-heart{ color:#e3556b; }

/* zh/en consistency: long English must wrap inside cards/buttons, never overflow or jump out. */
.ww-earapp .ww-ear-option,.ww-earapp .ww-btn,.ww-earapp .ww-q-prompt,.ww-earapp .ww-dim,.ww-earapp p,.ww-earapp label{
  overflow-wrap:anywhere; word-break:break-word;
}
.ww-earapp .ww-btn{ white-space:normal; height:auto; min-height:40px; }
.ww-earapp .ww-actions{ flex-wrap:wrap; gap:10px; }