@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@300;400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap');

:root { --bg-primary: #faf8f5; --text-primary: #1a1a1a; --text-secondary: #666; --text-muted: #999; --accent: #2563eb; }

* { margin:0;padding:0;box-sizing:border-box; }
html { background:var(--bg-primary); scrollbar-width: none; }
body { font-family:'Inter','Noto Sans SC',sans-serif; background:var(--bg-primary); color:var(--text-primary); -webkit-font-smoothing:antialiased; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; } body::-webkit-scrollbar { display: none; }

.custom-scrollbar { position: fixed; right: 6px; top: 10%; bottom: 10%; width: 4px; z-index: 9999; }
.custom-scrollbar-track { width: 100%; height: 100%; border-radius: 2px; background: rgba(0,0,0,0.06); }
.custom-scrollbar-thumb { position: absolute; top: 0; width: 100%; min-height: 20px; border-radius: 2px; background: rgba(0,0,0,0.15); }

.wide-container { width:min(96%,2200px); margin:0 auto; padding:0 max(12px,1.5vw); }

/* ── 页面布局 ── */
.exam-section { padding: 80px 24px; }
.exam-header { text-align: center; margin-bottom: 24px; }
.exam-title { font-size: clamp(28px,4vw,48px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 16px; }

/* ── 日历触发按钮 ── */
.cal-btn { display:inline-flex;align-items:center;gap:12px;padding:14px 32px;border-radius:12px;border:1.5px solid rgba(201,164,75,0.3);background:linear-gradient(135deg,rgba(26,26,42,0.95),rgba(15,23,42,0.95));color:#e2c170;font-size:15px;font-weight:600;cursor:pointer;font-family:'Source Serif 4','Georgia',serif;letter-spacing:0.04em;box-shadow:0 0 20px rgba(180,130,40,0.12),inset 0 1px 0 rgba(255,255,255,0.06);transition:all 0.35s cubic-bezier(0.25,0.1,0.25,1) }
.cal-btn:hover{box-shadow:0 0 32px rgba(180,130,40,0.25),inset 0 1px 0 rgba(255,255,255,0.1);border-color:rgba(226,193,112,0.6);transform:translateY(-1px)}
.cal-btn__label{font-family:'Source Serif 4','Georgia',serif}

/* ── 日历弹窗 ── */
.cal-overlay{display:none;position:fixed;inset:0;z-index:100000;background:rgba(10,10,20,0.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);align-items:center;justify-content:center;font-family:'Inter','Noto Sans SC',sans-serif}
.cal-box{position:relative;background:#fff;width:440px;max-width:95%;border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,0.18),0 0 0 1px rgba(0,0,0,0.04);overflow:hidden}
.cal-header{background:linear-gradient(135deg,rgba(26,26,42,0.96),rgba(15,23,42,0.96));padding:24px 32px 20px;color:#fff;position:relative;overflow:hidden}
.cal-header__decor--tr{position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;background:rgba(201,164,75,0.06);pointer-events:none}
.cal-header__decor--bl{position:absolute;bottom:-30px;left:-20px;width:80px;height:80px;border-radius:50%;background:rgba(201,164,75,0.04);pointer-events:none}
.cal-header__row{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between}
.cal-header__title{font-family:'Source Serif 4','Georgia',serif;font-size:28px;font-weight:700;letter-spacing:0.03em;color:#e2c170;margin-bottom:2px}
.cal-header__sub{font-size:11px;color:rgba(255,255,255,0.45);letter-spacing:0.06em;font-weight:400}
.cal-header__date{font-family:'Source Serif 4','Georgia',serif;font-size:28px;font-weight:700;letter-spacing:0.03em;color:#f59e0b;white-space:nowrap}
.cal-year-nav{display:flex;align-items:center;justify-content:space-between;padding:20px 28px 8px}
.cal-year-nav__btn{cursor:pointer;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;color:#94a3b8;font-size:18px;user-select:none;transition:all 0.2s}
.cal-year-nav__btn:hover{background:#f5f5f4;color:#1a1a1a}
.cal-year-nav__label{font-family:'Source Serif 4','Georgia',serif;font-size:26px;font-weight:700;color:#1a1a1a;letter-spacing:0.02em}
.cal-month-nav{display:flex;align-items:center;justify-content:center;gap:24px;padding:0 28px 12px}
.cal-month-nav__btn{cursor:pointer;padding:6px 14px;border-radius:9999px;border:1px solid rgba(0,0,0,0.08);font-size:12px;color:#78716c;user-select:none;letter-spacing:0.03em;font-weight:500;transition:all 0.2s;font-family:'Inter','Noto Sans SC',sans-serif}
.cal-month-nav__btn:hover{background:#faf8f5;border-color:rgba(201,164,75,0.4);color:#1a1a1a}
.cal-month-nav__label{cursor:pointer;font-size:30px;color:#c9a44b;font-weight:700;padding:4px 0;user-select:none;letter-spacing:0.04em;font-family:'Source Serif 4','Georgia',serif;transition:opacity 0.2s}
.cal-month-nav__label:hover{opacity:0.7}
.cal-divider{margin:4px 28px 0;border-top:1px solid rgba(0,0,0,0.05)}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;padding:12px 24px 6px}
.cal-weekdays__day{font-size:10px;font-weight:500;letter-spacing:0.06em;font-family:'Inter','Noto Sans SC',sans-serif;color:#a8a29e}
.cal-weekdays__day--sun,.cal-weekdays__day--sat{color:#c9a44b;font-weight:600;letter-spacing:0.08em}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;padding:4px 24px 16px;row-gap:4px}
/* mac 风格关闭: 右上角红点带 × */
.cal-close__btn{position:absolute;top:12px;right:12px;z-index:10;width:16px;height:16px;padding:0;margin:0;border:none;border-radius:50%;background:#ff5f57;color:rgba(0,0,0,0.5);font-size:12px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.2s,transform 0.15s;box-shadow:inset 0 0 0 0.5px rgba(0,0,0,0.12)}
.cal-close__btn:hover{background:#ff453a;color:rgba(0,0,0,0.72);transform:scale(1.12)}

/* ── 文章区域 ── */
.exam-article{background:#fff;border:1px solid rgba(0,0,0,0.06);border-radius:14px;padding:32px 24px;margin-bottom:32px;box-shadow:0 2px 12px rgba(0,0,0,0.04)}
.exam-btn-row{text-align:center;margin-top:24px}
.exam-submit-row{text-align:center;margin-bottom:48px}
.exam-questions{margin-bottom:32px}
.tq-check-row{text-align:center;margin-top:20px}
#btnCheckAnswers{display:none}

.btn-capsule { display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:9999px;font-size:14px;font-weight:500;border:1px solid rgba(0,0,0,0.08);background:rgba(0,0,0,0.02);color:var(--text-secondary);transition:all .35s;white-space:nowrap;text-decoration:none; }
.btn-capsule:hover { border-color:rgba(37,99,235,0.3);color:#1a1a1a;background:rgba(37,99,235,0.04); }
.btn-capsule.accent { background:var(--accent);border-color:var(--accent);font-weight:600;color:#fff; }
.btn-capsule.accent:hover { background:#3b82f6; }
.btn-capsule.nav-active { background:rgba(37,99,235,0.1);border-color:rgba(37,99,235,0.3);color:#2563eb;font-weight:600; }
.btn-icon { width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;background:rgba(0,0,0,0.02);border:1px solid rgba(0,0,0,0.06);color:#555;transition:all .3s; }
.btn-icon:hover { background:rgba(0,0,0,0.06);color:#1a1a1a; }

/* Nav */

/* Floating logos */
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(12px,-8px) scale(1.04)}50%{transform:translate(-6px,-16px) scale(0.96)}75%{transform:translate(-14px,6px) scale(1.02)}}
.float-logo{position:fixed;pointer-events:none;z-index:9999;border-radius:50%;filter:blur(1px)}
.float-logo--tl{opacity:.07;width:140px;height:140px;top:12%;left:3%;transform:rotate(-18deg);animation:drift 18s ease-in-out infinite}
.float-logo--br{opacity:.065;width:120px;height:120px;bottom:12%;right:3%;transform:rotate(-8deg);animation:drift 17s ease-in-out infinite;animation-delay:-5s}
@media(max-width:640px){.float-logo{display:none}}

/* Article */
.article-body { font-family:'Source Serif 4','Noto Serif SC',serif; font-size:26px; line-height:2.2; color:#1a1a1a; letter-spacing:0.01em; }
.article-body p { text-indent: 2em; }
.article-body .blank-input {
  display:inline; width:auto;
  border:none; border-bottom:2px dashed rgba(37,99,235,0.35);
  border-radius:0; background:transparent;
  font-family:inherit; font-size:inherit;
  text-align:center; outline:none; transition:all 0.25s;
  padding:0 2px; margin:0; color:#2563eb;
  vertical-align:baseline; line-height:inherit;
}
.article-body .blank-input:focus { border-bottom-style:solid; border-bottom-color:rgba(37,99,235,0.6); background:rgba(37,99,235,0.04); box-shadow:0 2px 0 rgba(37,99,235,0.12); }
.article-body .blank-input.correct { border-bottom-style:solid; border-bottom-color:rgba(22,163,74,0.5); background:rgba(22,163,74,0.04); color:#16a34a; }
.article-body .blank-input.wrong { border-style:solid; border-color:rgba(220,38,38,0.4); background:rgba(220,38,38,0.06); color:#dc2626; }
.blank-wrapper { display:inline-flex;align-items:center;gap:6px;vertical-align:middle; }
.blank-hint { font-size:14px;color:#94a3b8;white-space:nowrap;font-family:'Source Serif 4','Noto Serif SC',serif; }

/* Questions */
.q-card { background:#fff; border:1px solid rgba(0,0,0,0.06); border-radius:14px; padding:24px 28px; margin-bottom:16px; box-shadow:0 2px 12px rgba(0,0,0,0.04); }
.q-card .q-title { font-family:'Source Serif 4','Noto Serif SC',serif; font-size:21px; font-weight:700; color:#1a1a1a; margin-bottom:16px; line-height:1.7; }
.q-card .q-option { display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;cursor:pointer;transition:all 0.2s;border:1px solid rgba(0,0,0,0.06);margin-bottom:6px;font-size:18px;font-family:'Source Serif 4','Noto Serif SC',serif; }
.q-card .q-option:hover { background:rgba(0,0,0,0.03); }
.q-card .q-option.selected { background:rgba(37,99,235,0.08);border-color:rgba(37,99,235,0.25); }
.q-card .q-option.correct { background:rgba(22,163,74,0.08);border-color:rgba(22,163,74,0.25); }
.q-card .q-option.wrong { background:rgba(220,38,38,0.06);border-color:rgba(220,38,38,0.2); }
.q-card .opt-letter { width:32px;height:32px;border-radius:50%;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#555;flex-shrink:0; }
.q-card .q-explanation { margin-top:12px;padding:14px 16px;background:rgba(37,99,235,0.04);border-radius:8px;font-size:16px;color:#555;display:none;font-family:'Source Serif 4','Noto Serif SC',serif;line-height:1.8; }
.q-card .q-explanation.show { display:block; }

/* Analysis */
.analysis-section { display:none;background:#fff;border:1px solid rgba(0,0,0,0.06);border-radius:14px;padding:28px 32px;box-shadow:0 2px 12px rgba(0,0,0,0.04); }
.analysis-section h3 { font-family:'Source Serif 4','Noto Serif SC',serif; font-size:21px;font-weight:700;margin-bottom:16px; }
.analysis-section .content { font-family:'Source Serif 4','Noto Serif SC',serif; font-size:22px;line-height:2;color:#333;white-space:pre-wrap; }

.btn-check {
  display:inline-flex;align-items:center;padding:8px 20px;
  border:1px solid rgba(0,0,0,0.12);background:transparent;
  color:#555;font-size:13px;font-weight:500;cursor:pointer;
  font-family:inherit;letter-spacing:0.06em;
  transition:all 0.2s ease;
}
.btn-check:hover {
  background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.2);color:#1a1a1a;
}
#articleSection, #questionsSection, #translationQuizSection { cursor: default; user-select: none; }

.toast { position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(100px);background:rgba(30,30,35,.95);border-radius:9999px;padding:10px 24px;font-size:13px;color:#fff;z-index:9999;transition:transform .4s;pointer-events:none; }
.toast.show { transform:translateX(-50%) translateY(0); }
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);z-index:100000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s; }
.modal-overlay.open { opacity:1;pointer-events:auto; }
.modal-box { background:#fff;border-radius:20px;padding:36px;max-width:420px;width:90%;text-align:center;box-shadow:0 24px 80px rgba(0,0,0,.15); }
.modal-box h3 { font-size:20px;font-weight:700;margin-bottom:8px;color:#1a1a1a; }
.modal-box .modal-sub { font-size:13px;color:#999;margin-bottom:28px; }
.modal-logos { display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:24px; }
.modal-logo-item { display:flex;flex-direction:column;align-items:center;gap:8px; }
.modal-logo-item .logo-circle { width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;border:1px solid rgba(0,0,0,.06); }
.modal-logo-item .modal-label { font-size:11px;color:#999; }
.modal-qr { width:100px;height:100px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:11px;color:#999; }
.modal-close { margin-top:20px;padding:8px 28px;border-radius:9999px;border:1px solid rgba(0,0,0,.1);background:rgba(0,0,0,.02);color:#666;font-size:13px;cursor:pointer; }
@keyframes shimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }
.shimmer-text { user-select:none;cursor:default; background:linear-gradient(90deg,#0c1929,#1a365d,#1e4d8c,#2563eb,#3b82f6,#1e4d8c,#0c1929);background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 10s linear infinite; }

/* Lock / Paywall animations (PUVIC Pass) */
<!-- lock keyframes now in components/lock.css -->
@media(max-width:768px){.modal-box{max-width:90%;padding:28px 20px}.modal-logos{gap:12px}.modal-logo-item .logo-circle{width:44px;height:44px;font-size:20px}}
@media(max-width:640px){.modal-box{padding:20px 14px}.modal-box h3{font-size:18px}.container > div[style*="max-width"]{padding:12px!important}}
@media(max-width:400px){.modal-logos{gap:8px}.modal-logo-item .logo-circle{width:36px;height:36px;font-size:16px}.modal-box{padding:16px 10px;border-radius:14px}}
@media(max-height:500px) and (orientation:landscape){.q-card{padding:10px 14px!important;margin-bottom:8px!important}.q-card .q-title{font-size:13px!important;margin-bottom:8px!important}.q-card .q-option{padding:6px 10px!important;font-size:12px!important}.analysis-section{padding:14px 16px!important}.analysis-section h3{font-size:14px!important}}



/* ══════════════════════════════════════════════════════════════
   📝 Translation Quiz — 汉译英练习
   ══════════════════════════════════════════════════════════════ */
.translation-quiz-section {
  display: none;
  background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 14px;
  padding: 28px 32px; margin-top: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.tq-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px; }
.tq-title { font-family:'Source Serif 4','Noto Serif SC',serif;font-size:21px;font-weight:700;color:#1a1a1a;display:flex;align-items:center;gap:10px; }
.tq-stats { display:flex;gap:0;background:rgba(0,0,0,0.015);border-radius:12px;padding:2px;border:1px solid rgba(0,0,0,0.04); }
.tq-stat { padding:8px 16px;text-align:center;min-width:60px; }
.tq-stat+.tq-stat { border-left:1px solid rgba(0,0,0,0.06); }
.tq-stat-val { font-family:'JetBrains Mono','Inter',monospace;font-size:17px;font-weight:600;color:#1e293b; }
.tq-stat-lbl { font-size:9px;color:#94a3b8;text-transform:uppercase;letter-spacing:0.08em;margin-top:2px; }
.tq-item { background:#fafaf9;border:1px solid rgba(0,0,0,0.05);border-radius:12px;padding:20px 22px;margin-bottom:16px;transition:all 0.3s; }
.tq-item.checked-correct { border-color:rgba(22,163,74,0.2);background:rgba(22,163,74,0.02); }
.tq-item.checked-wrong { border-color:rgba(220,38,38,0.15);background:rgba(220,38,38,0.015); }
.tq-prompt-label { font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px; }
.tq-prompt { font-family:'Noto Sans SC','Inter',sans-serif;font-size:18px;line-height:1.8;color:#1e293b;margin-bottom:16px;padding:12px 16px;background:rgba(37,99,235,0.025);border-radius:8px;border-left:3px solid rgba(37,99,235,0.2); }
.tq-input { display:block;width:100%;padding:12px 16px;border-radius:10px;border:1.5px solid rgba(0,0,0,0.1);background:#fff;font-family:'Source Serif 4','Noto Serif SC',serif;font-size:17px;line-height:1.8;color:#1a1a1a;outline:none;resize:vertical;min-height:60px;transition:all 0.25s;box-sizing:border-box; }
.tq-input:focus { border-color:rgba(37,99,235,0.35);box-shadow:0 0 0 4px rgba(37,99,235,0.05); }
.tq-input.correct { border-color:rgba(22,163,74,0.3);background:rgba(22,163,74,0.015); }
.tq-input.wrong { border-color:rgba(220,38,38,0.25);background:rgba(220,38,38,0.015); }
.tq-answer-toggle { display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 14px;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid rgba(0,0,0,0.08);background:rgba(0,0,0,0.02);color:#666;font-family:inherit;transition:all 0.2s; }
.tq-answer-toggle:hover { background:rgba(37,99,235,0.04);border-color:rgba(37,99,235,0.2);color:#2563eb; }
.tq-answer-toggle .arrow { display:inline-block;transition:transform 0.2s;font-size:10px; }
.tq-answer-toggle.open .arrow { transform:rotate(90deg); }
.tq-answer { margin-top:10px;padding:14px 16px;background:linear-gradient(135deg,rgba(22,163,74,0.04),rgba(22,163,74,0.01));border:1px solid rgba(22,163,74,0.12);border-radius:10px;font-family:'Source Serif 4','Noto Serif SC',serif;font-size:17px;line-height:1.8;color:#166534;display:none; }
.tq-answer.show { display:block;animation:tq-fadein 0.25s ease; }
@keyframes tq-fadein { from{opacity:0;transform:translateY(-6px);} to{opacity:1;transform:translateY(0);} }
.tq-check-btn {
  display:inline-flex;align-items:center;padding:8px 20px;
  border:1px solid rgba(0,0,0,0.12);background:transparent;
  color:#555;font-size:13px;font-weight:500;cursor:pointer;
  font-family:inherit;letter-spacing:0.06em;
  transition:all 0.2s ease;
}
.tq-check-btn:hover {
  background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.2);color:#1a1a1a;
}
.tq-feedback { font-size:12px;font-weight:600;margin-top:8px;display:none; }
.tq-feedback.show { display:block; }
.tq-feedback.correct-fb { color:#16a34a; }
.tq-feedback.wrong-fb { color:#dc2626; }
@media(max-width:768px){ .translation-quiz-section{padding:20px 16px;} .tq-item{padding:16px 14px;} .tq-prompt{font-size:16px;} .tq-input{font-size:15px;} }
@media(max-width:640px){ .translation-quiz-section{padding:14px 10px;border-radius:10px;margin-top:12px;} .tq-title{font-size:18px;} .tq-item{padding:12px 10px;} .tq-prompt{font-size:15px;padding:10px 12px;} .tq-input{font-size:14px;min-height:50px;} .tq-answer{font-size:14px;} }

/* ═══ 手机端全面适配 ═══ */
@media(max-width:640px){
  .exam-section{padding:calc(138px + env(safe-area-inset-top,0px)) 0 24px!important;overflow-x:hidden!important}
  .exam-section .wide-container,.footer .wide-container{width:100%!important;padding-left:8px!important;padding-right:8px!important;box-sizing:border-box!important}
  .wide-container{padding-left:8px!important;padding-right:8px!important}
  .exam-title{font-size:4vw!important;white-space:nowrap!important;margin-bottom:6px!important;padding:0 4px!important}
  .cal-btn{transform:scale(0.8)!important;transform-origin:center center!important}
  .exam-header{margin-bottom:10px!important}
  .custom-scrollbar{display:none!important}
  /* 日历弹窗保持原尺寸(对齐 word 基准) */
  /* 全面缩小正文字体(26px太大→16px) */
  .article-body{font-size:16px!important;line-height:1.8!important}
  .article-body p{text-indent:1em!important}
  .exam-article{padding:16px 12px!important}
  .q-card{padding:16px 12px!important}
  .q-card .q-title{font-size:16px!important;margin-bottom:10px!important}
  .q-card .q-option{font-size:14px!important;padding:8px 10px!important}
  .q-card .q-explanation{font-size:13px!important}
  .analysis-section .content{font-size:15px!important;line-height:1.8!important}
  .tq-prompt{font-size:14px!important}
}
@media(max-width:400px){
  .exam-section{padding:calc(122px + env(safe-area-inset-top,0px)) 0 24px!important}
}
/* 手机端 footer 统一(vlog基准) */
@media (max-width: 640px){ .footer__inner{flex-direction:column!important;align-items:center!important;text-align:center!important;gap:6px!important} .footer__brand,.footer__icp,.footer__copyright{flex:none!important;order:1} .footer__icp{order:2;white-space:nowrap!important;flex-wrap:nowrap!important} .footer__copyright{order:3;justify-content:center!important} .footer{padding:14px 0!important;font-size:10px!important;overflow-x:hidden!important} .footer .wide-container{padding-left:8px!important;padding-right:8px!important} }