/* ============================================================
   TOEIC 2000 — 樣式表（獨立自足版本）
   ============================================================ */

:root{
  --paper:#EEF0EA;
  --paper-2:#E4E7DF;
  --ink:#1A2233;
  --ink-soft:#4B5266;
  --line:#C7CBBF;
  --line-strong:#9BA093;

  --spark:#C8571A;  --spark-bg:#F4E4D8;
  --steel:#6B7280;  --steel-bg:#E7E8E4;
  --live:#3F6B4F;   --live-bg:#E4EDE6;
  --adj:#3F6B4F;    --adj-bg:#E4EDE6;
  --verb:#AE4429;   --verb-bg:#F3E5DF;

  --card:#F7F8F3;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(circle, var(--line) 1px, transparent 1px) 0 0/22px 22px,
    var(--paper);
  color:var(--ink);
  font-family:"Noto Sans TC", sans-serif;
  line-height:1.75;
}
a{color:inherit;}
.mono{font-family:"IBM Plex Mono", monospace;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}

.eyebrow{
  font-family:"IBM Plex Mono", monospace;
  font-size:12.5px;
  letter-spacing:.14em;
  color:var(--ink-soft);
  text-transform:uppercase;
  display:flex; gap:10px; align-items:center;
  margin-bottom:12px;
}
.eyebrow .dot{width:6px;height:6px;background:var(--spark);border-radius:50%;display:inline-block;}

header.hero{
  border-bottom:1px solid var(--line-strong);
  padding:48px 0 32px;
}
h1{font-size:32px; font-weight:900; margin:0 0 12px;}
.sub{color:var(--ink-soft); font-size:15px; max-width:60ch; margin:0;}

section.block{padding:36px 0;}
section.block:not(:last-child){border-bottom:1px solid var(--line);}
.block h2{font-size:19px; font-weight:900; margin:0 0 6px; display:flex; align-items:baseline; gap:8px;}
.block h2 .idx{
  font-family:"IBM Plex Mono", monospace; font-size:12px; color:var(--ink-soft);
  border:1px solid var(--line-strong); padding:1px 6px;
}
.block .lead{color:var(--ink-soft); font-size:14px; margin:0 0 18px;}

/* ---------------- 共用卡片 & 選項元件 ---------------- */
.rule-card, .p-card{
  border:1px solid var(--line-strong);
  background:var(--card);
  padding:16px 18px;
  margin-bottom:14px;
}
.options{display:flex; flex-wrap:wrap; gap:8px;}
.opt{
  all:unset; cursor:pointer;
  font-family:"IBM Plex Mono", monospace;
  font-size:13.5px;
  border:1px solid var(--line-strong);
  background:var(--paper);
  padding:6px 12px;
  min-width:64px;
  text-align:center;
}
.opt:hover{border-color:var(--ink);}
.opt.correct{background:var(--adj-bg); border-color:var(--adj); color:var(--adj); font-weight:600;}
.opt.wrong{background:var(--verb-bg); border-color:var(--verb); color:var(--verb); text-decoration:line-through;}
.opt.disabled{cursor:default;}
.sentence{font-size:15px; margin-bottom:12px;}
.explain{
  margin-top:10px; font-size:13.5px; color:var(--ink-soft);
  border-left:2px solid var(--line-strong); padding-left:10px; display:none;
}
.explain.show{display:block;}
.explain b{color:var(--ink);}

.quiz-progress{
  height:4px; background:var(--paper-2); border:1px solid var(--line-strong);
  margin-bottom:14px;
}
.quiz-progress > i{ display:block; height:100%; background:var(--ink); transition:width .2s ease; }
.quiz-submit{
  all:unset; cursor:pointer; display:block;
  font-family:"IBM Plex Mono", monospace; font-weight:600; font-size:13.5px; letter-spacing:.06em;
  background:var(--ink); color:var(--paper); padding:10px 26px; text-align:center; width:fit-content;
}
.quiz-submit:hover{background:var(--ink-soft);}

/* ---------------- 播放按鈕 ---------------- */
.play-audio-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:"IBM Plex Mono", monospace; font-size:12px; font-weight:600; letter-spacing:.03em;
  color:var(--spark); background:var(--spark-bg); border:1px solid var(--spark);
  padding:5px 12px; margin:6px 0 0; cursor:pointer;
}
.play-audio-btn:hover{filter:brightness(0.97);}
.play-audio-btn:disabled{ color:var(--ink-soft); background:var(--paper-2); border-color:var(--line-strong); cursor:not-allowed; }

/* ---------------- 儀表板 ---------------- */
.vocab-dash{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin:6px 0 6px; }
@media (max-width:640px){ .vocab-dash{grid-template-columns:repeat(2,1fr);} }
.vocab-dash-item{ border:1px solid var(--line-strong); background:var(--card); padding:14px 10px; text-align:center; }
.vocab-dash-num{font-size:26px; font-weight:600; color:var(--ink);}
.vocab-dash-label{font-size:12px; color:var(--ink-soft); margin-top:4px;}

/* ---------------- 字卡 ---------------- */
.vocab-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; }
.vocab-card{
  border:1px solid var(--line-strong); background:var(--card); padding:16px; cursor:pointer;
  min-height:130px; display:flex; flex-direction:column; justify-content:center;
  transition:border-color .15s ease;
}
.vocab-card:hover{border-color:var(--ink);}
.vocab-card-word{font-size:19px; font-weight:700; color:var(--ink);}
.vocab-card-ipa{font-size:12px; color:var(--ink-soft); margin-top:2px;}
.vocab-card-pos{
  display:inline-block; font-family:"IBM Plex Mono", monospace; font-size:10.5px;
  color:var(--spark); background:var(--spark-bg); border:1px solid var(--spark);
  padding:1px 7px; margin-top:6px; width:fit-content;
}
.vocab-card-hint{font-size:10.5px; color:var(--line-strong); margin-top:12px;}
.vocab-card-meaning{font-size:16px; font-weight:700; color:var(--ink); margin-bottom:8px;}
.vocab-card-sentence{font-size:13.5px; color:var(--ink-soft); line-height:1.6;}

/* ---------------- 複習測驗文字 ---------------- */
.vocab-quiz-label{font-size:12px; color:var(--ink-soft); margin:10px 0 14px;}
.vocab-quiz-word{font-size:20px; font-weight:700; color:var(--ink);}
.vocab-empty{
  border:1px solid var(--line-strong); background:var(--card); padding:24px;
  text-align:center; font-size:14.5px; color:var(--ink-soft); line-height:1.8;
}

/* ---------------- 閱讀短文 ---------------- */
.vocab-passage{
  border:1px solid var(--line-strong); background:var(--card);
  padding:20px 22px; font-size:15px; line-height:1.9; margin-bottom:20px;
}
.vocab-passage mark{ background:var(--spark-bg); color:var(--spark); font-weight:600; padding:0 2px; }

/* ---------------- 分頁切換 ---------------- */
.vocab-tabs{ display:flex; gap:8px; margin:18px 0 0; flex-wrap:wrap; }
.vocab-tab{
  font-family:"IBM Plex Mono", monospace; font-size:12.5px; padding:8px 16px;
  border:1px solid var(--line-strong); background:var(--paper); cursor:pointer; color:var(--ink-soft);
}
.vocab-tab.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---------------- 頁尾 ---------------- */
footer.page-foot{
  border-top:1px solid var(--line-strong); padding:26px 0; text-align:center;
  color:var(--ink-soft); font-size:11.5px; font-family:"IBM Plex Mono", monospace; letter-spacing:.05em;
}