:root {
  --ms-blue: #0078d4;
  --ms-blue-hover: #106ebe;
  --ms-blue-light: #eff6fc;
  --ms-dark-blue: #004578;
  --header-bg: #1f3a52;
  --header-text: #ffffff;
  --bg-color: #f3f4f6;
  --card-bg: #ffffff;
  --card-border: #d1d5db;
  --text-main: #1f2937;
  --text-muted: #6b7280;
  --accent-green: #107c41;
  --accent-red: #d13438;
  --accent-orange: #d83b01;
  --accent-purple: #5c2d91;
  --code-bg: #1e1e1e;
  --code-color: #d4d4d4;
  --item-bg: #f9fafb;
  --drag-hover: #e0e7ff;
}

body.theme-dark {
  --header-bg: #18222d;
  --bg-color: #12181f;
  --card-bg: #1e2631;
  --card-border: #2d3748;
  --text-main: #f3f4f6;
  --text-muted: #9ca3af;
  --ms-blue-light: #1e3a5f;
  --item-bg: #263242;
  --code-bg: #151b22;
  --drag-hover: #2b3a4a;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  background-color: var(--bg-color);
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* 頂部微軟導航列 */
.exam-header {
  background-color: var(--header-bg);
  color: var(--header-text);
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ms-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.5px;
}

.logo-box {
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #f25022 25%, #7fba00 25% 50%, #00a4ef 50% 75%, #ffb900 75%);
  display: inline-block;
  border-radius: 2px;
}

.exam-title-badge {
  background: rgba(255, 255, 255, 0.15);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
}

.header-center {
  display: flex;
  align-items: center;
}

.timer-container {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.25);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
}

.timer-container i {
  color: #ffb900;
}

.icon-btn {
  background: none;
  border: none;
  color: #d1d5db;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
}
.icon-btn:hover {
  color: #ffffff;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-tool-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}
.nav-tool-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* 次級資訊列 */
.sub-header {
  background-color: var(--card-bg);
  border-bottom: 1px solid var(--card-border);
  padding: 10px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.q-progress-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.q-counter {
  font-size: 16px;
  font-weight: 700;
  color: var(--ms-blue);
}

.q-topic {
  background: var(--ms-blue-light);
  color: var(--ms-blue);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.q-type-badge {
  background: #e5e7eb;
  color: #374151;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}

.q-tools {
  display: flex;
  align-items: center;
  gap: 18px;
}

.mark-review-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
  user-select: none;
}
.mark-review-label input {
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: var(--accent-orange);
}

.star-btn {
  background: none;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}
.star-btn.starred {
  background-color: #fffbeb;
  border-color: #f59e0b;
  color: #d97706;
}
.star-btn:hover {
  border-color: #f59e0b;
  color: #d97706;
}

.wrong-status-btn {
  background: none;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}
.wrong-status-btn.is-wrong {
  background-color: #fef2f2;
  border-color: #ef4444;
  color: #b91c1c;
}
.wrong-status-btn.is-mastered {
  background-color: #f0fdf4;
  border-color: #22c55e;
  color: #15803d;
}
.wrong-status-btn:hover {
  filter: brightness(0.95);
}

/* 主內容區 */
.main-container {
  flex: 1;
  padding: 20px 24px 80px 24px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.content-wrapper {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* Case Study 側邊面板 */
.case-study-pane {
  flex: 1;
  min-width: 380px;
  max-width: 500px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 180px);
  position: sticky;
  top: 20px;
}

.case-header {
  padding: 12px 16px;
  background: var(--ms-blue-light);
  color: var(--ms-blue);
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--card-border);
}

.case-tabs {
  display: flex;
  flex-wrap: wrap;
  background: var(--item-bg);
  border-bottom: 1px solid var(--card-border);
  padding: 4px 4px 0 4px;
}

.case-tab {
  background: none;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px 4px 0 0;
}
.case-tab.active {
  background: var(--card-bg);
  color: var(--ms-blue);
  border-color: var(--card-border);
  border-bottom: 2px solid var(--ms-blue);
}

.case-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  font-size: 14px;
  line-height: 1.6;
}
.case-body h3 {
  font-size: 15px;
  color: var(--ms-blue);
  margin-bottom: 8px;
  margin-top: 10px;
}
.case-body ul {
  padding-left: 20px;
  margin-bottom: 12px;
}

/* 題目卡片 */
.question-pane {
  flex: 2;
  min-width: 0;
}

.question-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.question-header-bar {
  margin-bottom: 16px;
}

.question-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
}

.question-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-main);
  white-space: pre-line;
  margin-bottom: 24px;
}

/* 作答互動區 */
.interaction-area {
  margin-bottom: 24px;
}

/* 單選與多選清單 */
.options-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.option-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background-color: var(--item-bg);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  font-size: 14px;
  line-height: 1.5;
}
.option-item:hover {
  background-color: var(--ms-blue-light);
  border-color: var(--ms-blue);
}
.option-item.selected {
  background-color: var(--ms-blue-light);
  border-color: var(--ms-blue);
  font-weight: 500;
}
.option-item.correct {
  background-color: #dff6dd !important;
  border-color: var(--accent-green) !important;
}
.option-item.wrong {
  background-color: #fde7e9 !important;
  border-color: var(--accent-red) !important;
}

.option-item input {
  margin-top: 3px;
  cursor: pointer;
  accent-color: var(--ms-blue);
}

/* 🎧 TOEIC 全真考場盲聽選項樣式 */
.option-item-blind {
  padding: 10px 16px;
  min-height: 44px;
  align-items: center;
}
.opt-bubble-letter {
  font-weight: 700;
  color: var(--ms-blue);
  font-size: 15px;
  margin-right: 6px;
}
.opt-blind-text {
  font-size: 14px;
  color: var(--ms-text);
  margin-left: 6px;
  transition: opacity 0.2s ease;
}
.opt-blind-text.blind-hidden {
  display: none !important;
}
.opt-blind-placeholder {
  font-size: 13px;
  color: #64748b;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  letter-spacing: 0.2px;
}
.opt-blind-placeholder.hidden {
  display: none !important;
}
.toeic-blind-toolbar {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  background: rgba(0, 120, 212, 0.05);
  border: 1px dashed rgba(0, 120, 212, 0.3);
  padding: 8px 14px;
  border-radius: 8px;
}
.toeic-blind-hint {
  font-size: 12.5px;
  color: #0078d4;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-toggle-blind-options {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.btn-toggle-blind-options:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

/* Hotspot 題型樣式 */
.hotspot-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hotspot-code-box {
  background: var(--code-bg);
  color: var(--code-color);
  padding: 18px;
  border-radius: 6px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  line-height: 1.8;
  overflow-x: auto;
  border: 1px solid #333;
}

.hotspot-dropdown {
  background: white;
  color: #111;
  border: 2px solid var(--ms-blue);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
}
.hotspot-dropdown:focus {
  box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.3);
}

.hotspot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--item-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  font-size: 14px;
  gap: 16px;
}
.hotspot-row .hotspot-label {
  font-weight: 600;
}

/* Drag and Drop 題型樣式 */
.drag-drop-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.dd-column {
  background: var(--item-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 16px;
}
.dd-column h4 {
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dd-source-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
}

.dd-item {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--ms-blue);
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: grab;
  user-select: none;
  transition: transform 0.1s, box-shadow 0.1s;
}
.dd-item:active {
  cursor: grabbing;
}
.dd-item.dragging {
  opacity: 0.5;
}

.dd-targets-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dd-target-slot {
  background: var(--card-bg);
  border: 2px dashed var(--card-border);
  border-radius: 6px;
  padding: 12px;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s;
}
.dd-target-slot.hovered {
  background-color: var(--drag-hover);
  border-color: var(--ms-blue);
}
.dd-target-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}
.dd-target-dropped {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ms-blue-light);
  border: 1px solid var(--ms-blue);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ms-blue);
}
.dd-target-remove {
  background: none;
  border: none;
  color: var(--accent-red);
  cursor: pointer;
  font-weight: bold;
}

/* 練習模式反饋區 */
.practice-feedback-pane {
  border-top: 1px solid var(--card-border);
  padding-top: 20px;
  margin-top: 20px;
}

.feedback-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.btn {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
}

.btn-primary {
  background-color: var(--ms-blue);
  color: white;
}
.btn-primary:hover {
  background-color: var(--ms-blue-hover);
}

.btn-secondary {
  background-color: #e5e7eb;
  color: #374151;
}
.btn-secondary:hover {
  background-color: #d1d5db;
}

.explanation-content {
  background: var(--item-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.correct-answer-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #dff6dd;
  border: 1px solid #107c41;
  padding: 10px 14px;
  border-radius: 4px;
  color: #0b5c30;
  font-weight: 600;
}
.badge-answer {
  background: #107c41;
  color: white;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
}

.vote-distribution-box h4,
.explanation-box h4,
.comments-box h4 {
  font-size: 14px;
  color: var(--ms-dark-blue);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vote-meta {
  font-size: 13px;
  color: var(--text-muted);
}

.explanation-body {
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-line;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comment-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13px;
}
.comment-user {
  font-weight: 600;
  color: var(--ms-blue);
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
}
.comment-upvotes {
  color: #107c41;
  font-size: 12px;
}

/* 底部導覽列 */
.exam-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 58px;
  background: var(--card-bg);
  border-top: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
  z-index: 90;
}

.footer-left, .footer-right {
  display: flex;
  gap: 12px;
}

.exam-btn {
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
}

.btn-utility {
  background: var(--item-bg);
  border-color: var(--card-border);
  color: var(--text-main);
}
.btn-utility:hover {
  background: #e5e7eb;
}

.btn-nav {
  background-color: var(--ms-blue);
  color: white;
}
.btn-nav:hover:not(:disabled) {
  background-color: var(--ms-blue-hover);
}
.btn-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-finish {
  background-color: var(--accent-orange);
  color: white;
}
.btn-finish:hover {
  background-color: #b33100;
}

/* 彈窗樣式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}

.modal-container {
  background: var(--card-bg);
  border-radius: 8px;
  width: 90%;
  max-width: 650px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.review-modal-container {
  max-width: 850px;
}

.modal-header {
  padding: 16px 20px;
  background: var(--ms-blue);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-header h3 {
  font-size: 16px;
  font-weight: 600;
}
.modal-close {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 14px 20px;
  background: var(--item-bg);
  border-top: 1px solid var(--card-border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Review Screen 網格 */
.review-summary-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}
.stat-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}
.badge-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.badge-dot.answered { background: var(--ms-blue); }
.badge-dot.unanswered { background: #9ca3af; }
.badge-dot.marked { background: var(--accent-orange); }

.review-tip {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.question-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
  padding: 4px;
}

.grid-q-btn {
  height: 48px;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  background: var(--item-bg);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  position: relative;
  transition: all 0.15s;
}
.grid-q-btn:hover {
  border-color: var(--ms-blue);
  background: var(--ms-blue-light);
}
.grid-q-btn.answered {
  background: var(--ms-blue-light);
  border-color: var(--ms-blue);
  color: var(--ms-blue);
}
.grid-q-btn.marked::after {
  content: "★";
  position: absolute;
  top: 2px;
  right: 4px;
  color: var(--accent-orange);
  font-size: 11px;
}
.grid-q-btn.current {
  outline: 2px solid var(--ms-blue);
}

/* 成績單樣式 */
.score-banner {
  background: var(--item-bg);
  border: 2px solid var(--card-border);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}
.score-banner.pass {
  border-color: var(--accent-green);
  background: #f0fdf4;
}
.score-banner.fail {
  border-color: var(--accent-red);
  background: #fef2f2;
}

.score-status {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.score-banner.pass .score-status { color: var(--accent-green); }
.score-banner.fail .score-status { color: var(--accent-red); }

.score-number {
  font-size: 42px;
  font-weight: 800;
  color: var(--text-main);
}
.score-number small {
  font-size: 18px;
  color: var(--text-muted);
}
.score-passing-tip {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

.score-details-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.score-card {
  background: var(--item-bg);
  border: 1px solid var(--card-border);
  padding: 12px;
  border-radius: 6px;
}
.score-card .label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.score-card .val { font-size: 18px; font-weight: 700; }
.text-success { color: var(--accent-green); }
.text-danger { color: var(--accent-red); }

.review-wrong-action {
  display: flex;
  justify-content: center;
  gap: 14px;
}

/* 篩選彈窗表單 */
.form-group {
  margin-bottom: 16px;
}
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--text-main);
  font-size: 14px;
}
.mode-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.radio-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  cursor: pointer;
  background: var(--item-bg);
}
.radio-card:hover {
  border-color: var(--ms-blue);
}
.radio-card input {
  margin-top: 3px;
}
.radio-card .card-content strong {
  font-size: 14px;
  display: block;
  margin-bottom: 4px;
}
.radio-card .card-content p {
  font-size: 12px;
  color: var(--text-muted);
}
.filter-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

/* 弱點分析儀表板樣式 */
.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.kpi-card {
  background: var(--item-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kpi-title {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-main);
}
.kpi-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.analytics-section {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 18px;
}

.section-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.section-header-bar h4, .analytics-section h4 {
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-sm {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 4px;
}

.weak-table-wrapper {
  overflow-x: auto;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--card-border);
  border-radius: 4px;
}

.weak-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.weak-table th {
  background: var(--item-bg);
  padding: 10px 12px;
  border-bottom: 1px solid var(--card-border);
  font-weight: 600;
  color: var(--text-muted);
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 10;
}
.weak-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--card-border);
  color: var(--text-main);
}
.weak-table tr:hover {
  background-color: var(--ms-blue-light);
}

.accuracy-badge {
  padding: 3px 8px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 11px;
  display: inline-block;
}
.acc-high { background: #dcfce7; color: #15803d; }
.acc-mid { background: #fef9c3; color: #a16207; }
.acc-low { background: #fee2e2; color: #b91c1c; }

.category-bars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.cat-bar-card {
  background: var(--item-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 12px 14px;
}
.cat-bar-header {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.cat-progress-track {
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}
.cat-progress-fill {
  height: 100%;
  background: var(--ms-blue);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.cat-bar-sub {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
}

/* 考場與展架視圖模式控制 */
body.mode-catalog .sub-header,
body.mode-catalog .exam-footer,
body.mode-catalog #timerContainer,
body.mode-catalog #modeSelectorBtn,
body.mode-catalog #btnAnalytics,
body.mode-catalog #examTitleBadge,
body.mode-catalog #caseStudyPane,
body.mode-catalog #questionPane,
body.mode-catalog #splitScreenContainer,
body.mode-catalog #practiceFeedbackPane,
body.mode-catalog .case-study-pane,
body.mode-catalog .question-pane {
  display: none !important;
}

body.mode-catalog .content-wrapper {
  display: block !important;
  width: 100% !important;
}

body.mode-catalog #gatekeeperLockPane {
  display: block !important;
}

body.mode-exam #gatekeeperLockPane {
  display: none !important;
}

body.mode-exam .sub-header,
body.mode-exam .exam-footer {
  display: flex !important;
}

body.mode-exam #timerContainer,
body.mode-exam #modeSelectorBtn,
body.mode-exam #btnAnalytics,
body.mode-exam #examTitleBadge {
  display: inline-flex !important;
}

body.mode-exam #questionPane {
  display: block !important;
}

/* 認證目錄展架專屬樣式 */
.catalog-card {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}
.catalog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  border-color: var(--ms-blue);
}
.catalog-tab-btn {
  transition: all 0.2s ease;
}
.catalog-tab-btn:hover {
  border-color: var(--ms-blue);
  color: var(--ms-blue);
}
.catalog-tab-btn.active {
  background: var(--ms-blue) !important;
  color: #fff !important;
  border-color: var(--ms-blue) !important;
}

/* 🛡️ 企業級版權防護：防止內容全選惡意複製與爬蟲 */
.question-pane, 
.case-study-pane, 
.option-item,
#questionTitle,
#questionDesc,
#explanationSection {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 🌟 指定 Modal 純白背景優化 (Pure White Clean Theme for My Certs, Profile, Analytics, FAQ / Support, Mode Filter, Pricing, Legal) */
#myCertsModal .modal-container,
#userProfileModal .modal-container,
#analyticsModal .modal-container,
#supportModal .modal-container,
#pricingModal .modal-container,
#modeModal .modal-container,
#legalModal .modal-container {
  background: #ffffff !important;
  color: #1e293b !important;
}

#myCertsModal .modal-body,
#userProfileModal .modal-body,
#analyticsModal .modal-body,
#supportModal .modal-body,
#pricingModal .modal-body,
#modeModal .modal-body,
#modeModal .modal-footer,
#legalModal .modal-body {
  background: #ffffff !important;
  color: #1e293b !important;
}

#legalModal .legal-tabs-bar {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

#legalModal .legal-tab-pane {
  background: #ffffff !important;
}

#legalModal .legal-tab-btn {
  background: #ffffff !important;
}

#analyticsModal .kpi-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

#analyticsModal .analytics-section {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

#analyticsModal .weak-table th {
  background: #f1f5f9 !important;
  color: #334155 !important;
}

#analyticsModal .weak-table td {
  background: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

#analyticsModal > .modal-container > div:last-child,
#analyticsModal .modal-container button#closeAnalyticsFooterBtn {
  background: #ffffff !important;
}

#supportModal details {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

#supportModal details[open] {
  background: #ffffff !important;
  border-color: #0078d4 !important;
}

#supportModal details summary {
  background: #ffffff !important;
}

#supportModal details > div {
  background: #ffffff !important;
}

/* ========================================================
   🏛️ 專業認證目錄 (Professional Human-Crafted Catalog)
   去除所有多餘漸層、閃爍與 AI 生成感，回歸頂級 EdTech 產品純粹質感
/* ========================================================
    官方 macOS Sequoia / Sonoma 高質感設計系統 (Apple HIG Experience)
   採用原生 SF Pro 排版、微距模糊磨砂玻璃 (Vibrancy Blur)、18px 連續曲率圓角 (Squircle)
   ======================================================== */

body.mode-catalog {
  background: radial-gradient(120% 80% at 50% 0%, #ffffff 0%, #f6f6f8 45%, #ececef 100%) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "SF Pro", "PingFang TC", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

body.mode-catalog.theme-dark {
  background: radial-gradient(120% 80% at 50% 0%, #1e1e20 0%, #141416 45%, #0c0c0e 100%) !important;
}

/* macOS 頂部半透明磨砂工具列 (Frosted Glass Acrylic Header) */
body.mode-catalog .exam-header {
  position: relative;
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(25px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(190%) !important;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  color: #1d1d1f !important;
}

body.mode-catalog.theme-dark .exam-header {
  background: rgba(28, 28, 30, 0.75) !important;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.1) !important;
  color: #f5f5f7 !important;
}

body.mode-catalog .exam-header .logo-text {
  color: #1d1d1f !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

body.mode-catalog.theme-dark .exam-header .logo-text {
  color: #ffffff !important;
}

body.mode-catalog .nav-tool-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 0.5px solid rgba(0, 0, 0, 0.06) !important;
  color: #1d1d1f !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.mode-catalog .nav-tool-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

body.mode-catalog #btnOpenPricingModal {
  background: #0071e3 !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 113, 227, 0.3) !important;
}

body.mode-catalog #btnOpenPricingModal:hover {
  background: #0077ed !important;
  box-shadow: 0 2px 8px rgba(0, 113, 227, 0.4) !important;
}

body.mode-catalog #langSelector {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 7px !important;
  color: #1d1d1f !important;
}

.subject-share-trigger {
  background: transparent;
  border: 0;
  padding: 8px;
  color: #075fad;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.achievement-link { display: flex; margin-top: 10px; font-size: 13px; }
.achievement-coupon { margin-bottom: 20px; padding: 14px; border: 1px solid #cbd5e1; border-radius: 10px; }
.achievement-coupon summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.achievement-coupon input { display: block; box-sizing: border-box; width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #94a3b8; border-radius: 6px; background: var(--ms-bg, white); color: var(--ms-text, #172b45); }
.achievement-coupon label { display: block; margin-top: 12px; }
.achievement-coupon a { font-size: 13px; }
.achievement-coupon summary:focus-visible, .achievement-coupon input:focus-visible { outline: 3px solid #0078d4; outline-offset: 3px; }
.cert-price-group > .subject-share-trigger {
  align-self: flex-start;
  padding: 4px 0;
}
.subject-share-trigger:focus-visible {
  outline: 3px solid #0078d4;
  outline-offset: 2px;
}
.subject-share-dialog {
  width: min(480px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 24px;
  border: 1px solid #dce5ee;
  border-radius: 16px;
  background: #ffffff;
  color: #172b45;
  box-sizing: border-box;
  box-shadow: 0 16px 60px #172b4540;
}
.subject-share-dialog::backdrop { background: #172b4570; }
.subject-share-dialog h3 { margin: 0 0 12px; }
.subject-share-dialog p { font-size: 14px; line-height: 1.7; }
.subject-share-dialog label { display: block; font-size: 13px; margin-bottom: 6px; }
.subject-share-dialog input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #b8cde0;
  border-radius: 8px;
  background: #f6f9fc;
  color: #172b45;
}
.subject-share-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.subject-share-actions [hidden] { display: none !important; }
.subject-share-dialog button { cursor: pointer; }
.subject-share-dialog button:disabled { opacity: .6; cursor: wait; }
.subject-share-dialog button:focus-visible, .subject-share-dialog input:focus-visible { outline: 3px solid #0078d4; outline-offset: 2px; }

body.mode-catalog #btnNavFeatures,
body.mode-catalog #btnHeaderSupport {
  display: none !important;
}

body.mode-catalog #btnOpenLoginModal {
  background: transparent !important;
  border-color: transparent !important;
}

/* macOS 視窗頂部標頭與紅黃綠信號燈 */
.catalog-header-clean {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 36px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(220, 232, 245, 0.85);
  border-radius: 24px;
  background: linear-gradient(135deg, #ffffff 0%, #f6faff 55%, #f0fdf9 100%);
  box-shadow: 0 16px 40px -12px rgba(28, 74, 119, 0.08), 0 1px 3px rgba(0, 0, 0, 0.02);
  margin-bottom: 24px;
  gap: 28px;
  flex-wrap: wrap;
}

.catalog-header-clean::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 360px;
  height: 360px;
  right: -160px;
  top: -190px;
  border: 40px solid rgba(0, 120, 212, 0.04);
  border-radius: 50%;
  pointer-events: none;
}

.catalog-hero-copy {
  position: relative;
  align-self: center;
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.catalog-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: #0078d4;
  font-size: 12.5px;
  font-weight: 700;
  background: rgba(0, 120, 212, 0.08);
  padding: 4px 12px;
  border-radius: 9999px;
  width: fit-content;
  border: 1px solid rgba(0, 120, 212, 0.15);
}

.catalog-hero-eyebrow span {
  font-size: 11px;
  font-weight: 500;
  color: #475569;
  letter-spacing: 0.03em;
}

.catalog-hero-art {
  display: none;
}

.catalog-header-clean .catalog-title {
  font-size: 32px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.035em;
  line-height: 1.32;
  margin: 0 0 16px 0;
}

.catalog-header-clean .catalog-subtitle {
  color: #475569;
  font-size: 15.5px;
  line-height: 1.8;
  margin: 0 0 28px 0;
  max-width: 540px;
}

.catalog-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
}

/* 現代 SaaS 雙按鈕微交互 (Hover 上浮 + Active 按壓縮放) */
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #0078d4;
  border: 1px solid #0066b8;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 14.5px;
  padding: 12px 26px;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(0, 120, 212, 0.28);
  cursor: pointer;
  text-decoration: none;
  transition: all 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-hero-primary:hover {
  background: #0066b8;
  transform: translateY(-1.5px);
  box-shadow: 0 8px 22px rgba(0, 120, 212, 0.38);
}

.btn-hero-primary:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 120, 212, 0.25);
}

.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #1e293b;
  font-weight: 600;
  font-size: 14.5px;
  padding: 12px 24px;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-hero-secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.btn-hero-secondary:active {
  transform: scale(0.98);
}

/* 🚀 方案 C：漏斗頂端修復 - Hero 主視覺大按鈕強化 (Hero Assessment Launchpad) */
.hero-assessment-main-btn {
  background: linear-gradient(135deg, #0078d4 0%, #005a9e 100%) !important;
  border: 1px solid #005a9e !important;
  padding: 12px 28px !important;
  box-shadow: 0 6px 20px rgba(0, 120, 212, 0.35) !important;
  position: relative;
  overflow: hidden;
}

.hero-assessment-main-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(60deg, transparent 30%, rgba(255, 255, 255, 0.15) 50%, transparent 70%);
  transform: rotate(30deg);
  animation: heroShine 4.5s ease-in-out infinite;
}

@keyframes heroShine {
  0%, 80% { transform: translateX(-100%) rotate(30deg); }
  100% { transform: translateX(100%) rotate(30deg); }
}

.hero-assessment-main-btn:hover {
  background: linear-gradient(135deg, #0086f0 0%, #0066b8 100%) !important;
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 10px 28px rgba(0, 120, 212, 0.45) !important;
}

.hero-btn-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
  margin: 0 4px;
}

.hero-btn-main {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hero-btn-badge {
  font-size: 11px;
  font-weight: 500;
  color: #bae0ff;
  opacity: 0.95;
}

/* 頂部一鍵測起點推薦標籤 (Hero Quick Assessment Pills) */
.hero-quick-assessment-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px 0;
}

.quick-pill-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.quick-assessment-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #cbd5e1;
  border-radius: 9999px;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.quick-assessment-pill .pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.quick-assessment-pill:hover {
  background: #f0f9ff;
  border-color: #38bdf8;
  color: #0284c7;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.15);
}

.quick-assessment-pill.active {
  background: #e0f2fe;
  border-color: #0284c7;
  color: #0369a1;
  font-weight: 700;
}

/* 信任微章條 (Hero Assessment Trust Signals) */
.hero-assessment-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  margin: 0 0 20px 0;
}

.hero-assessment-trust i {
  color: #10b981;
  margin-right: 4px;
}

.hero-assessment-trust .trust-sep {
  color: #cbd5e1;
}

/* 膠囊型促銷橫幅 (Promo Pill Banner) */
.hero-promo-banner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 14px 6px 8px;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.55) 0%, rgba(239, 246, 255, 0.75) 100%);
  border: 1px solid rgba(245, 158, 11, 0.3);
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.06);
  max-width: fit-content;
  transition: all 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hero-promo-banner:hover {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.8) 0%, rgba(239, 246, 255, 0.95) 100%);
  border-color: rgba(245, 158, 11, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.12);
}

.promo-pill-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.promo-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f59e0b;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 2.5px 8px;
  border-radius: 9999px;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.25);
}

.promo-pill-link {
  color: #92400e !important;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none !important;
  transition: color 150ms ease;
}

.promo-pill-link:hover {
  color: #78350f !important;
}

.promo-pill-divider {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #cbd5e1;
}

.promo-pill-sublink {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #0078d4 !important;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none !important;
  transition: color 150ms ease;
}

.promo-pill-sublink:hover {
  color: #005a9e !important;
  text-decoration: underline !important;
}

.catalog-feature-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #075da8;
  font-size: 13px;
  line-height: 1.6;
  text-underline-offset: 4px;
}

/* 右側現代互動播放器 (Elevated Card Shadow + Micro-interactions) */
.catalog-preview {
  flex: 1 1 340px;
  min-width: 0;
  max-width: 450px;
  padding: 24px 26px;
  background: #ffffff;
  border: 1px solid rgba(220, 232, 245, 0.95);
  border-radius: 20px;
  color: #172b43;
  box-shadow: 
    0 1px 3px rgba(15, 23, 42, 0.03),
    0 8px 24px -4px rgba(28, 74, 119, 0.08),
    0 24px 48px -12px rgba(28, 74, 119, 0.12);
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.catalog-preview:hover {
  box-shadow: 
    0 2px 6px rgba(15, 23, 42, 0.04),
    0 12px 32px -4px rgba(28, 74, 119, 0.1),
    0 28px 56px -12px rgba(28, 74, 119, 0.14);
}

.catalog-preview-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.catalog-preview-icon,
.catalog-step-icon,
.cert-track-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #0078d4;
  background: #eaf3fd;
}

.catalog-preview h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: #0f172a;
}

.catalog-preview-heading p {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: #64748b;
}

.catalog-preview-instruction {
  font-size: 12px;
  color: #52677d;
  margin: 20px 0 8px;
}

.catalog-preview blockquote {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.7;
}

.catalog-preview-blank {
  color: #075da8;
  white-space: nowrap;
}

/* 題目選項 Keycap 鍵盤徽章與微交互 */
.catalog-preview-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.catalog-preview-options li {
  font-size: 13px;
  min-width: 0;
}

.catalog-preview-options button.preview-option-btn,
.catalog-preview-options button {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  color: #1e293b;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: all 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.preview-keycap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #475569;
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.preview-option-text {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  line-height: 1.4;
}

/* Option Hover 微上浮與發光 */
.catalog-preview-options button:hover {
  border-color: #93c5fd;
  background: #f8faff;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.08);
}

.catalog-preview-options button:hover .preview-keycap {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #0078d4;
}

/* Option Active 按壓縮放 */
.catalog-preview-options button:active {
  transform: scale(0.975);
}

/* Option Selected 選取狀態 */
.catalog-preview-options button[aria-pressed="true"] {
  border-color: #0078d4;
  background: #eff6ff;
  box-shadow: inset 0 0 0 1px #0078d4, 0 3px 10px rgba(0, 120, 212, 0.12);
  color: #0078d4;
  font-weight: 600;
}

.catalog-preview-options button[aria-pressed="true"] .preview-keycap {
  background: #0078d4;
  border-color: #0078d4;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 120, 212, 0.3);
}

.catalog-preview-options button:focus-visible {
  outline: 3px solid #0078d4;
  outline-offset: 2px;
}

#catalogPreviewFeedback {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  color: #166534;
  margin: 0 0 12px;
}

.catalog-preview-question h1,
.catalog-preview-question h2,
.catalog-preview-question h3,
.catalog-preview-question blockquote {
  color: #172b43 !important;
}

#catalogPreviewPurchase {
  margin: 0 0 8px;
  padding: 0;
}

#catalogPreviewPricing {
  margin-top: 0;
}

.cert-fit-summary {
  display: none; /* 收納至 Tooltip -- see .cert-info-badge */
}

.cert-fit-summary > div {
  margin-top: 6px;
}

.cert-fit-summary dt {
  font-weight: 700;
  color: #334155;
}

.cert-fit-summary dd {
  margin: 0;
}

body.theme-dark .cert-fit-summary,
body.theme-dark .cert-fit-summary dt {
  color: #d1d9e4;
}

#pricingModal > .modal-container {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  max-height: 90dvh;
}

#pricingModal .modal-header {
  flex-shrink: 0;
}

#pricingModal .modal-body {
  min-height: 0;
  overflow-y: auto;
}

.checkout-sticky-footer {
  flex-shrink: 0;
  padding: 14px 24px max(14px, env(safe-area-inset-bottom));
  background: #fff;
  color: #243b53;
  border-top: 1px solid #d5e0ed;
  box-shadow: 0 -8px 20px rgba(28, 74, 119, 0.06);
}

.checkout-sticky-footer > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  margin-bottom: 10px;
}

.checkout-sticky-footer strong {
  font-size: 16px;
}

#btnProceedCheckout {
  width: 100%;
  padding: 12px;
  border: 0;
  font-size: 14px;
  white-space: normal;
}

body:has(#pricingModal[style*="display: flex"]) .floating-support-btn {
  visibility: hidden;
}

.catalog-preview-question {
  max-height: 220px;
  overflow: auto;
  font-size: 14px;
  line-height: 1.7;
  margin: 16px 0;
  overflow-wrap: anywhere;
}

.catalog-preview-question blockquote {
  font-size: 14px;
}

#catalogPreviewAnswer {
  max-height: 260px;
  overflow: auto;
  overflow-wrap: anywhere;
}

#catalogPreviewNext {
  margin-top: 14px;
}

#catalogPreviewStatus {
  font-size: 12px;
  line-height: 1.6;
}

.purchase-summary {
  padding: 16px;
  margin: 0 0 18px;
  border: 1px solid #cbdff1;
  border-radius: 12px;
  background: #f4f8fd;
  color: #243b53;
  text-align: left;
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.purchase-summary h4 {
  margin: 0 0 10px;
  font-size: 15px;
}

.purchase-summary p {
  margin: 6px 0;
}

.purchase-summary-item + .purchase-summary-item {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #d9e5f0;
}

.purchase-summary:empty {
  display: none;
}

.purchase-note {
  font-size: 12px;
  line-height: 1.7;
  color: #52677d;
}

.purchase-policy-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

.purchase-subject-toggle {
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid #cbdff1;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #075da8;
  background: #f4f8fd;
  cursor: pointer;
}

#payOptEcpay {
  display: none !important;
}

@media (max-width: 640px) {
  #loginModal > .modal-container {
    flex-direction: column !important;
    max-height: 90vh;
    overflow-y: auto !important;
  }

  #loginModal > .modal-container > div {
    flex: none !important;
    padding: 22px !important;
  }

  #packageCertsList {
    grid-template-columns: 1fr !important;
  }

  #pricingModal .modal-header {
    align-items: flex-start;
  }
}

/* 答題解析摺疊 (180ms ease-out smooth transition) */
.catalog-preview-answer {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  overflow: hidden;
  transition: all 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.catalog-preview-answer summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #15803d;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  transition: background-color 150ms ease-out;
}

.catalog-preview-answer summary:hover {
  background: rgba(22, 101, 52, 0.05);
}

.catalog-preview-answer[open] summary {
  border-bottom: 1px solid rgba(22, 101, 52, 0.12);
}

.catalog-preview-answer #catalogPreviewAnswer {
  padding: 12px 14px;
  animation: previewAnswerExpand 180ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes previewAnswerExpand {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.catalog-preview-answer p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #14532d;
}

/* 題目淡入過渡 */
.catalog-preview-question {
  animation: previewQuestionFade 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes previewQuestionFade {
  from {
    opacity: 0.3;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 播放器底部資訊列 (Footer Callout) */
.catalog-preview-footer-callout {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
}

.catalog-preview-footer-callout .purchase-summary {
  margin: 0 0 6px;
  padding: 0;
  border: none;
  background: transparent;
}

.catalog-preview-footer-callout .purchase-summary-item strong {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  display: block;
}

.catalog-preview-footer-callout .purchase-summary-item p {
  font-size: 12.5px;
  font-weight: 600;
  color: #0284c7;
  margin: 2px 0 0;
}

.catalog-preview-footer-callout .purchase-note {
  font-size: 11px;
  color: #64748b;
  margin: 4px 0 12px;
}

.catalog-preview-footer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.catalog-preview-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  background: #0078d4;
  color: #ffffff !important;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid #0066b8;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0, 120, 212, 0.2);
  transition: all 180ms cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
}

.catalog-preview-btn-primary:hover {
  background: #0066b8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.3);
}

.catalog-preview-btn-primary:active {
  transform: scale(0.98);
}

.catalog-preview-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: #ffffff;
  color: #334155;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  cursor: pointer;
  transition: all 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.catalog-preview-btn-secondary:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
  transform: translateY(-1px);
}

.catalog-preview-btn-secondary:active {
  transform: scale(0.98);
}

/* 換一題現代按鈕 (Next Question Button) */
.catalog-preview-next-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid #dce8f5;
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
  transition: all 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.catalog-preview-next-btn:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.catalog-preview-next-btn:active:not(:disabled) {
  transform: scale(0.98);
}

/* 01~03 流程卡片與引導動線 (Interactive Steps with visual guidance) */
.catalog-steps {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.catalog-step-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  transition: all 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.catalog-step-item:hover {
  border-color: #93c5fd;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 120, 212, 0.08);
}

.catalog-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.catalog-step-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 9999px;
  letter-spacing: 0.05em;
}

.catalog-step-badge.badge-blue {
  background: #eff6ff;
  color: #0078d4;
  border: 1px solid #bfdbfe;
}

.catalog-step-badge.badge-green {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.catalog-step-badge.badge-purple {
  background: #f5f3ff;
  color: #7c3aed;
  border: 1px solid #ddd6fe;
}

.catalog-step-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 3px;
  line-height: 1.5;
}

.catalog-step-text span {
  display: block;
  font-size: 12px;
  color: #64748b;
  line-height: 1.55;
}

.catalog-step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #94a3b8;
  font-size: 11px;
  flex-shrink: 0;
  align-self: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

/* 認證備考入口 圓角小標籤 (Interactive Chips / Pills) */
.quick-entry-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  padding: 12px 18px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  flex-wrap: wrap;
}

.quick-entry-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  flex-shrink: 0;
}

.quick-entry-label i {
  color: #0078d4;
}

.quick-entry-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.quick-entry-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  color: #334155 !important;
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none !important;
  transition: all 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.quick-entry-chip .chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.quick-entry-chip .chip-dot.dot-blue { background: #2563eb; }
.quick-entry-chip .chip-dot.dot-cyan { background: #0284c7; }
.quick-entry-chip .chip-dot.dot-green { background: #16a34a; }
.quick-entry-chip .chip-dot.dot-purple { background: #7c3aed; }

.quick-entry-chip:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #0078d4 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 120, 212, 0.1);
}

.quick-entry-chip:active {
  transform: scale(0.97);
}

.chip-badge-free {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 9999px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
  display: inline-block;
  line-height: 1.4;
  margin-left: 2px;
}

.step-gept,
.cert-track-icon.gept {
  color: #1a7a3c;
  background: #e8f6ed;
}

.step-cambridge,
.cert-track-icon.cambridge {
  color: #5856b8;
  background: #efedfc;
}

body.theme-dark .catalog-header-clean {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-color: #334155;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.4);
}

body.theme-dark .catalog-header-clean .catalog-title {
  color: #f8fafc;
}

body.theme-dark .catalog-header-clean .catalog-subtitle {
  color: #94a3b8;
}

body.theme-dark .hero-promo-banner {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(30, 41, 59, 0.7) 100%);
  border-color: rgba(245, 158, 11, 0.35);
}

body.theme-dark .promo-pill-link {
  color: #fbbf24 !important;
}

body.theme-dark .catalog-preview {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.5);
}

body.theme-dark .catalog-preview h2 {
  color: #f8fafc;
}

body.theme-dark .catalog-preview-options button.preview-option-btn,
body.theme-dark .catalog-preview-options button {
  background: #0f172a;
  border-color: #334155;
  color: #f1f5f9;
}

body.theme-dark .preview-keycap {
  background: #1e293b;
  border-color: #475569;
  color: #cbd5e1;
}

body.theme-dark .catalog-preview-footer-callout {
  background: #0f172a;
  border-color: #334155;
}

body.theme-dark .catalog-preview-footer-callout .purchase-summary-item strong {
  color: #f8fafc;
}

body.theme-dark .catalog-preview-next-btn {
  background: #0f172a;
  border-color: #334155;
  color: #cbd5e1;
}

body.theme-dark .catalog-step-item {
  background: #1e293b;
  border-color: #334155;
}

body.theme-dark .catalog-step-text strong {
  color: #f8fafc;
}

body.theme-dark .catalog-step-text span {
  color: #94a3b8;
}

body.theme-dark .quick-entry-nav {
  background: #1e293b;
  border-color: #334155;
}

body.theme-dark .quick-entry-label {
  color: #cbd5e1;
}

body.theme-dark .quick-entry-chip {
  background: #0f172a;
  border-color: #334155;
  color: #cbd5e1 !important;
}

#catalogCardsContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 20px;
  scroll-margin-top: 90px;
}

.catalog-hero-actions a:focus-visible,
.catalog-feature-link:focus-visible,
.catalog-preview a:focus-visible,
.catalog-preview summary:focus-visible {
  outline: 3px solid #0078d4;
  outline-offset: 4px;
}

@media (max-width: 640px) {
  .catalog-header-clean {
    padding: 24px 20px;
    gap: 16px;
  }

  .catalog-hero-art {
    display: none;
  }

  .catalog-preview {
    max-width: none;
    padding: 20px;
  }

  .catalog-steps {
    flex-direction: column;
    gap: 14px;
  }

  .catalog-step-arrow {
    display: none;
  }

  body.mode-catalog .exam-header {
    height: auto;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
  }

  body.mode-catalog .header-left {
    flex-basis: 100%;
  }

  body.mode-catalog .header-right {
    flex-wrap: wrap;
    gap: 8px;
  }

  body.mode-catalog .exam-header .logo-text {
    white-space: nowrap;
  }

  body.mode-catalog #themeToggleBtn {
    position: absolute;
    top: 10px;
    right: 16px;
  }

  .catalog-header-clean .catalog-title {
    font-size: 25px;
    line-height: 1.45;
  }
}

.macos-traffic-lights {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
}

.traffic-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 8px;
  font-weight: 700;
  color: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.traffic-red {
  background: #ff5f56;
  border: 0.5px solid rgba(224, 68, 62, 0.8);
}

.traffic-yellow {
  background: #ffbd2e;
  border: 0.5px solid rgba(222, 161, 35, 0.8);
}

.traffic-green {
  background: #27c93f;
  border: 0.5px solid rgba(40, 177, 63, 0.8);
}

.macos-traffic-lights:hover .traffic-red::after {
  content: "×";
  color: #4d0000;
  line-height: 1;
}

.macos-traffic-lights:hover .traffic-yellow::after {
  content: "−";
  color: #5c3b00;
  line-height: 1;
}

.macos-traffic-lights:hover .traffic-green::after {
  content: "+";
  color: #004d00;
  line-height: 1;
}

.macos-window-tag {
  font-size: 11px;
  font-weight: 600;
  color: #86868b;
  background: rgba(118, 118, 128, 0.08);
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: 6px;
  letter-spacing: -0.01em;
}

.catalog-title {
  font-size: 27px;
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -0.025em;
  margin: 0 0 6px 0;
  line-height: 1.25;
}

.catalog-subtitle {
  font-size: 13.5px;
  color: #86868b;
  margin: 0;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.btn-macos-pill {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #1d1d1f;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 980px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-macos-pill:hover {
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-0.5px);
}

.btn-macos-pill:active {
  transform: scale(0.97);
}

/* macOS 導覽工具列 */
.catalog-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

/* 原生 macOS Sonoma 分段控制器 (Native macOS Segmented Control) */
.segmented-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  background: rgba(118, 118, 128, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 3px;
  border-radius: 10px;
  border: 0.5px solid rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 0.5px 1px rgba(0, 0, 0, 0.06);
  gap: 2px;
}

.catalog-tab-btn {
  border: none !important;
  background: transparent !important;
  color: #6e6e73 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  border-radius: 7px !important;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  outline: none;
}

.catalog-tab-btn:hover {
  color: #1d1d1f !important;
  background: rgba(255, 255, 255, 0.45) !important;
}

.catalog-tab-btn.active {
  background: #ffffff !important;
  color: #1d1d1f !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0.5px 1px rgba(0, 0, 0, 0.06) !important;
}

/* 分類標籤的顏色主題 */
.catalog-tab-btn[data-cat="cloud"].active {
  color: #0071e3 !important;
}
.catalog-tab-btn[data-cat="cambridge"].active {
  color: #5856d6 !important;
}
.catalog-tab-btn[data-cat="gept"].active {
  color: #1e8c3c !important;
}

.tab-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.06);
  color: #6e6e73;
  transition: all 0.15s ease;
}

.catalog-tab-btn.active .tab-badge {
  background: rgba(0, 113, 227, 0.12);
  color: #0071e3;
}
.catalog-tab-btn[data-cat="cambridge"].active .tab-badge {
  background: rgba(88, 86, 214, 0.12);
  color: #5856d6;
}
.catalog-tab-btn[data-cat="gept"].active .tab-badge {
  background: rgba(48, 183, 84, 0.12);
  color: #1e8c3c;
}

/* macOS Spotlight 擬真搜尋框 */
.catalog-search-wrapper {
  position: relative;
  min-width: 260px;
}

.catalog-search-wrapper input {
  width: 100%;
  padding: 7px 12px 7px 32px;
  font-size: 13px;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: rgba(118, 118, 128, 0.09);
  color: #1d1d1f;
  outline: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.catalog-search-wrapper input:focus {
  background: #ffffff;
  border-color: #0071e3;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.catalog-search-wrapper i {
  position: absolute;
  left: 10px;
  top: 9px;
  font-size: 12px;
  color: #86868b;
}

/* ========================================================
    macOS 連續曲率圓角卡片 (Squircle Glass Cards)
   ======================================================== */

.catalog-card {
  position: relative;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  padding: 24px;
  padding-left: 28px; /* 為 accent bar 留空間 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.04), 0 12px 24px -6px rgba(0, 0, 0, 0.04), inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s;
  overflow: hidden;
}

/* ── 左側類別識別 Accent Bar ── */
.catalog-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  border-radius: 18px 0 0 18px;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* IT 認證 — 科技藍 */
.catalog-card.card-it::before {
  background: linear-gradient(180deg, #0071e3 0%, #005ab5 100%);
}
.catalog-card.card-it {
  background: #ffffff;
}
.catalog-card.card-it:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 113, 227, 0.4);
  box-shadow: 0 10px 24px -3px rgba(0, 113, 227, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
}
.catalog-card.card-it:hover::before {
  width: 5px;
}

/* 劍橋英語 — 英倫紫 */
.catalog-card.card-cambridge::before {
  background: linear-gradient(180deg, #5856d6 0%, #3634a3 100%);
}
.catalog-card.card-cambridge {
  background: #ffffff;
}
.catalog-card.card-cambridge:hover {
  transform: translateY(-3px);
  border-color: rgba(88, 86, 214, 0.4);
  box-shadow: 0 10px 24px -3px rgba(88, 86, 214, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
}
.catalog-card.card-cambridge:hover::before {
  width: 5px;
}

/* 全民英檢 — 活力綠 */
.catalog-card.card-gept::before {
  background: linear-gradient(180deg, #30b754 0%, #1e8c3c 100%);
}
.catalog-card.card-gept {
  background: #ffffff;
}
.catalog-card.card-gept:hover {
  transform: translateY(-3px);
  border-color: rgba(48, 183, 84, 0.4);
  box-shadow: 0 10px 24px -3px rgba(48, 183, 84, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
}
.catalog-card.card-gept:hover::before {
  width: 6px;
}

/* fallback hover for unclassified */
.catalog-card:not(.card-it):not(.card-cambridge):not(.card-gept):hover {
  transform: translateY(-3px);
  border-color: rgba(148, 163, 184, 0.6);
  box-shadow: 0 10px 24px -3px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
}

/* ── Dark Mode 類別卡片支援 ── */
body.theme-dark .catalog-card.card-it {
  background: rgba(0, 113, 227, 0.06);
  border-color: rgba(0, 113, 227, 0.15);
}
body.theme-dark .catalog-card.card-cambridge {
  background: rgba(88, 86, 214, 0.06);
  border-color: rgba(88, 86, 214, 0.15);
}
body.theme-dark .catalog-card.card-gept {
  background: rgba(48, 183, 84, 0.06);
  border-color: rgba(48, 183, 84, 0.15);
}
body.theme-dark .cert-category-badge.badge-it {
  background: rgba(0, 113, 227, 0.18);
  color: #60aeff;
  border-color: rgba(0, 113, 227, 0.3);
}
body.theme-dark .cert-category-badge.badge-english {
  background: rgba(88, 86, 214, 0.18);
  color: #a09cf5;
  border-color: rgba(88, 86, 214, 0.3);
}
body.theme-dark .cert-category-badge.badge-gept {
  background: rgba(48, 183, 84, 0.18);
  color: #5ddb80;
  border-color: rgba(48, 183, 84, 0.3);
}

/* 官方機構徽章 (Apple 微距標籤) */
.cert-vendor-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
  row-gap: 4px;
}

.cert-vendor-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #1d1d1f;
}

.vendor-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.vendor-dot.ms { background: #0071e3; }
.vendor-dot.cambridge { background: #5856d6; }
.vendor-dot.gept { background: #30b754; }

/* ── 類別識別徽章 (Category Identity Badge) ── */
.cert-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.cert-category-badge.badge-it {
  background: rgba(0, 113, 227, 0.1);
  color: #0055b3;
  border: 0.5px solid rgba(0, 113, 227, 0.2);
}
.cert-category-badge.badge-english {
  background: rgba(88, 86, 214, 0.1);
  color: #4240b0;
  border: 0.5px solid rgba(88, 86, 214, 0.2);
}
.cert-category-badge.badge-gept {
  background: rgba(48, 183, 84, 0.1);
  color: #1a7a3c;
  border: 0.5px solid rgba(48, 183, 84, 0.2);
}

.cert-syllabus-tag {
  font-size: 11px;
  font-weight: 500;
  color: #86868b;
  background: rgba(118, 118, 128, 0.08);
  border: 0.5px solid rgba(0, 0, 0, 0.04);
  padding: 2px 8px;
  border-radius: 6px;
}

.cert-code-title {
  font-size: 17px;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0 0 6px 0;
  line-height: 1.35;
  letter-spacing: -0.02em;
  min-height: 76px;
  overflow-wrap: anywhere;
}

.cert-code-title .exam-code-prefix {
  display: block;
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  color: #0071e3;
  margin-right: 6px;
}

/* Exam code prefix colors by category */
.catalog-card.card-cambridge .exam-code-prefix {
  color: #5856d6;
}
.catalog-card.card-gept .exam-code-prefix {
  color: #1e8c3c;
}

.cert-summary-desc {
  font-size: 12.5px;
  color: #6e6e73;
  line-height: 1.5;
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.01em;
  min-height: 37px;
}

.cert-specs-line {
  font-size: 11.5px;
  color: #6e6e73;
  background: rgba(118, 118, 128, 0.05);
  padding: 5px 10px;
  border-radius: 6px;
  border: 0.5px solid rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-weight: 500;
  flex-wrap: wrap;
  line-height: 1.5;
}

.cert-specs-bullet {
  color: #c7c7cc;
}

/* 卡片底部定價與行動列 */
.cert-card-footer {
  border-top: 1px solid rgba(203, 213, 225, 0.5);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cert-price-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cert-price-main {
  font-size: 16px;
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -0.02em;
}

.cert-price-usd {
  font-size: 12px;
  font-weight: 500;
  color: #86868b;
  margin-left: 4px;
}

.cert-discount-hint {
  font-size: 11px;
  color: #34c759;
  font-weight: 600;
  margin-top: 2px;
}

.cert-actions-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.btn-cert-secondary {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #1d1d1f;
  background: rgba(120, 120, 128, 0.08);
  border: 0.5px solid rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.btn-cert-secondary:hover {
  background: rgba(120, 120, 128, 0.16);
  color: #000000;
}

.btn-cert-secondary:active {
  transform: scale(0.97);
}

/* 🎯 卡片專用醒目「免費先測」按鈕 (High-conversion Assessment Card CTA) */
.btn-cert-assessment-featured {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: #0369a1 !important;
  background: transparent;
  border: 1px solid rgba(125, 211, 252, 0.7);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.btn-cert-assessment-featured i {
  color: #0284c7;
  transition: color 0.18s ease;
}

.btn-cert-assessment-featured:hover {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.28);
}

.btn-cert-assessment-featured:hover i {
  color: #ffffff !important;
}

.btn-cert-assessment-featured:active {
  transform: scale(0.97);
}

.btn-cert-assessment-featured .badge-free-micro {
  font-size: 9.5px;
  background: rgba(2, 132, 199, 0.15);
  color: #0284c7;
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 700;
}

.btn-cert-assessment-featured:hover .badge-free-micro {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* 🧪 評估做題中途激勵與鎖定提示 (Assessment Midway Progress & Pain Hook) */
.assessment-midway-alert {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 14px;
  animation: fadeIn 0.25s ease-out;
}

.assessment-midway-alert.is-correct {
  background: #f0fdf4;
  border-color: #86efac;
}

.assessment-midway-alert.is-wrong {
  background: #fff7ed;
  border-color: #fdba74;
}

.assessment-midway-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}

.assessment-midway-alert.is-correct .assessment-midway-header {
  color: #15803d;
}

.assessment-midway-alert.is-wrong .assessment-midway-header {
  color: #c2410c;
}

.assessment-midway-tip {
  font-size: 13px;
  color: #475569;
  line-height: 1.6;
  margin: 0 0 10px 0;
}

.btn-assessment-midway-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0f172a;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-assessment-midway-next:hover {
  background: #1e293b;
  transform: translateX(2px);
}

.btn-cert-primary {
  display: block;
  width: 100%;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  background: #0071e3;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 113, 227, 0.3);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  text-align: center;
}

.btn-cert-primary:hover {
  background: #0077ed;
  box-shadow: 0 2px 6px rgba(0, 113, 227, 0.4);
}

.btn-cert-primary:active {
  transform: scale(0.97);
}

.btn-cert-primary.owned {
  background: #34c759;
  box-shadow: 0 1px 2px rgba(52, 199, 89, 0.3);
}

/* ==========================================================================
   三大特色保障區 (SaaS Feature Mini-Cards)
   ========================================================================== */
.trust-features-grid {
  margin: 56px 0 60px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.trust-feature-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 20px;
  padding: 32px 24px 28px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(15, 23, 42, 0.02);
  transition: all 220ms cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.trust-feature-card:hover {
  transform: translateY(-3px);
  border-color: #93c5fd;
  box-shadow: 0 14px 30px -6px rgba(0, 120, 212, 0.12), 0 4px 10px rgba(0, 0, 0, 0.02);
}

.trust-feature-card.card-featured {
  background: linear-gradient(180deg, #fffdfa 0%, #ffffff 100%);
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.08);
}

.trust-feature-card.card-featured:hover {
  border-color: #f59e0b;
  box-shadow: 0 16px 36px -6px rgba(245, 158, 11, 0.18);
}

.trust-promo-pill {
  position: absolute;
  top: -12px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 9999px;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.28);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.trust-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-size: 22px;
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.trust-feature-card:hover .trust-icon-box {
  transform: scale(1.08);
}

.trust-icon-box.icon-blue {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #0078d4;
  border: 1px solid #bfdbfe;
  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.12);
}

.trust-icon-box.icon-amber {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #d97706;
  border: 1px solid #fcd34d;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15);
}

.trust-icon-box.icon-emerald {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  color: #16a34a;
  border: 1px solid #bbf7d0;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.12);
}

.trust-card-title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
  line-height: 1.4;
}

.trust-card-title.title-featured {
  color: #b45309;
}

.trust-card-desc {
  font-size: 13px;
  color: #64748b;
  margin: 0 auto;
  line-height: 1.65;
  max-width: 260px;
}

/* ==========================================================================
   精緻化最底部 Footer (Footer & Compliance)
   ========================================================================== */
.certmaster-footer {
  margin-top: 56px;
  padding: 44px 20px 48px;
  border-top: 1px solid rgba(226, 232, 240, 0.85);
  text-align: center;
  position: relative;
}

.footer-links-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.footer-link {
  color: #475569;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.footer-link:hover {
  color: #0078d4;
  background: #f1f5f9;
  transform: translateY(-1px);
}

.footer-link-divider {
  color: #cbd5e1;
  font-size: 10px;
}

.footer-support-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 9999px;
  color: #0078d4 !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 120, 212, 0.08);
  transition: all 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.footer-support-pill:hover {
  background: #0078d4;
  border-color: #0078d4;
  color: #ffffff !important;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 14px rgba(0, 120, 212, 0.28);
}

.footer-support-pill:active {
  transform: scale(0.97);
}

.footer-copyright {
  font-size: 12.5px;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.footer-disclaimer {
  font-size: 11.5px;
  color: #94a3b8;
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.7;
  letter-spacing: -0.01em;
}

/* 響應式佈局 */
@media (max-width: 768px) {
  .trust-features-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 40px 0 48px;
  }
  
  .footer-links-row {
    gap: 10px;
  }
}

/* 深色模式 Dark Mode */
body.theme-dark .trust-feature-card {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.4);
}

body.theme-dark .trust-feature-card.card-featured {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.05) 0%, #1e293b 100%);
  border-color: rgba(245, 158, 11, 0.35);
}

body.theme-dark .trust-card-title {
  color: #f8fafc;
}

body.theme-dark .trust-card-title.title-featured {
  color: #f59e0b;
}

body.theme-dark .trust-card-desc {
  color: #94a3b8;
}

body.theme-dark .certmaster-footer {
  border-top-color: #334155;
}

body.theme-dark .footer-link {
  color: #94a3b8;
}

body.theme-dark .footer-link:hover {
  color: #38bdf8;
  background: #334155;
}

body.theme-dark .footer-support-pill {
  background: rgba(0, 120, 212, 0.15);
  border-color: rgba(0, 120, 212, 0.4);
  color: #38bdf8 !important;
}

body.theme-dark .footer-support-pill:hover {
  background: #0078d4;
  color: #ffffff !important;
}

body.theme-dark .footer-copyright {
  color: #94a3b8;
}

body.theme-dark .footer-disclaimer {
  color: #64748b;
}

/* GEPT Question Media & Image Display */
.gept-image-box {
  margin: 16px 0 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  max-width: 540px;
}

.gept-image-box .gept-img-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  padding-bottom: 6px;
}

.gept-image-box .gept-q-img {
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
  background: #ffffff;
  padding: 4px;
  border: 1px solid #e2e8f0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gept-image-box .gept-q-img:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
/* TOEIC Question Media, Graphic Exhibits & Reading Passages */
.toeic-image-box {
  margin: 16px 0 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  max-width: 620px;
}

.toeic-image-box .toeic-img-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  padding-bottom: 8px;
}

.toeic-image-box .img-badge {
  background: rgba(0, 120, 212, 0.15);
  color: #0078d4;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
}

.toeic-image-box .toeic-img-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 10px;
}

.toeic-image-box .toeic-q-img {
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: 10px;
  object-fit: contain;
  background: #ffffff;
  padding: 6px;
  border: 1px solid #e2e8f0;
  cursor: zoom-in;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.toeic-image-box .toeic-q-img:hover {
  transform: scale(1.015);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* TOEIC Reading Passages (Part 6 & Part 7) */
.toeic-passage-box {
  margin: 16px 0 24px 0;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  border-left: 4px solid #0078d4;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.toeic-passage-box .passage-header {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0078d4;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px dashed var(--border-color, rgba(255, 255, 255, 0.1));
  padding-bottom: 8px;
}

.toeic-passage-box .passage-body {
  font-family: inherit;
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--text-color, #e2e8f0);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Modern Interactive TOEIC Graphic Exhibit Cards */
.toeic-exhibit-container {
  margin: 16px 0 20px 0;
  max-width: 680px;
}

/* 1. Coupon Card */
.toeic-coupon-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));
  border: 2px dashed #f59e0b;
  border-radius: 12px;
  padding: 18px 22px;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.1);
  position: relative;
}
.toeic-coupon-card .coupon-badge {
  position: absolute;
  top: 14px;
  right: 18px;
  background: #f59e0b;
  color: #000;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.toeic-coupon-card .coupon-brand {
  font-size: 1.15rem;
  font-weight: 700;
  color: #d97706;
  margin-bottom: 2px;
}
.toeic-coupon-card .coupon-sub {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 12px;
}

/* 2. Invoice Card */
.toeic-invoice-card {
  background: var(--bg-secondary, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
  border-radius: 12px;
  padding: 18px 22px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.toeic-invoice-card .invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #0078d4;
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.toeic-invoice-card .invoice-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0078d4;
  letter-spacing: 1px;
}
.toeic-invoice-card .invoice-brand {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
}
.toeic-invoice-card .invoice-meta {
  font-size: 0.85rem;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 12px;
  display: flex;
  gap: 16px;
}

/* 3. Boarding Pass Card */
.toeic-ticket-card {
  background: linear-gradient(135deg, rgba(0, 120, 212, 0.08), rgba(0, 120, 212, 0.02));
  border: 1px solid #0078d4;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 120, 212, 0.12);
}
.toeic-ticket-card .ticket-header {
  background: #0078d4;
  color: #ffffff;
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.toeic-ticket-card .ticket-body {
  padding: 16px 20px;
}
.toeic-ticket-card .ticket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}
.toeic-ticket-card .t-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  font-weight: 600;
}
.toeic-ticket-card .t-val {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-color, #e2e8f0);
}

/* 4. Recycling Table Card */
.toeic-ewaste-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.02));
  border: 1px solid #10b981;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.1);
}
.toeic-ewaste-card .ewaste-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #10b981;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 5. Mobile Chat Messenger UI */
.toeic-chat-device {
  background: var(--bg-secondary, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.toeic-chat-device .chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #38bdf8;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.toeic-chat-device .chat-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toeic-chat-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  position: relative;
}
.toeic-chat-bubble.left {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  color: var(--text-color, #e2e8f0);
}
.toeic-chat-bubble.right {
  align-self: flex-end;
  background: #0078d4;
  color: #ffffff;
}
.toeic-chat-bubble .bubble-meta {
  font-size: 0.75rem;
  opacity: 0.8;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

/* 6. Standard Responsive Table */
.toeic-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-top: 6px;
}
.toeic-table th, .toeic-table td {
  padding: 8px 12px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  text-align: left;
}
.toeic-table th {
  background: rgba(255, 255, 255, 0.06);
  font-weight: 700;
  color: var(--text-color, #f1f5f9);
}
.toeic-table tr.total-row {
  background: rgba(0, 120, 212, 0.1);
  font-weight: 800;
}

/* 浮動客服與問題諮詢按鈕 (Floating Support Pill) */
.floating-support-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 990;
  background: linear-gradient(135deg, #0078d4, #005a9e);
  color: #ffffff;
  border: none;
  border-radius: 50px;
  padding: 11px 20px;
  font-size: 13.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 18px rgba(0, 120, 212, 0.38);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-support-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 120, 212, 0.5);
  background: linear-gradient(135deg, #0086ea, #0067b8);
}

.floating-support-btn i {
  font-size: 15px;
}

@media (max-width: 600px) {
  .floating-support-btn {
    bottom: 16px;
    right: 16px;
    padding: 9px 15px;
    font-size: 12px;
  }
}

/* ==========================================================================
   全民英檢 GEPT 聽力原音播放器 (Listening Audio Player Card)
   ========================================================================== */
.listening-audio-card {
  margin: 16px 0 20px 0;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(99, 102, 241, 0.05) 100%);
  border: 1.5px solid rgba(14, 165, 233, 0.25);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.08);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.listening-audio-card:hover {
  border-color: rgba(14, 165, 233, 0.45);
  box-shadow: 0 10px 28px rgba(14, 165, 233, 0.15);
}

.audio-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(14, 165, 233, 0.15);
  flex-wrap: wrap;
  gap: 10px;
}

.audio-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}

.audio-card-title i {
  color: #0284c7;
  font-size: 1.15rem;
}

.audio-lang-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(2, 132, 199, 0.12);
  color: #0284c7;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.audio-speed-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.audio-speed-group .speed-label {
  font-size: 0.8rem;
  color: var(--text-muted, #64748b);
  font-weight: 600;
}

.audio-speed-btn {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-color, #cbd5e1);
  color: var(--text-primary, #334155);
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.audio-speed-btn:hover {
  border-color: #0284c7;
  color: #0284c7;
}

.audio-speed-btn.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}

.audio-card-body {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.audio-main-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
  transition: all 0.2s ease;
}

.audio-main-play-btn:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.5);
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
}

.audio-main-play-btn.playing {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35);
}

.audio-secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-color, #cbd5e1);
  color: var(--text-primary, #334155);
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.audio-secondary-btn:hover {
  background: rgba(2, 132, 199, 0.08);
  border-color: #0284c7;
  color: #0284c7;
}

.audio-visualizer {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 8px;
}

.audio-visualizer .bar {
  display: inline-block;
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: #94a3b8;
  transition: height 0.15s ease, background 0.2s ease;
}

.audio-visualizer.playing .bar {
  background: #0284c7;
  animation: soundwave 1s ease-in-out infinite;
}

.audio-visualizer.playing .bar-1 { animation-delay: 0.1s; }
.audio-visualizer.playing .bar-2 { animation-delay: 0.25s; }
.audio-visualizer.playing .bar-3 { animation-delay: 0.4s; }
.audio-visualizer.playing .bar-4 { animation-delay: 0.15s; }
.audio-visualizer.playing .bar-5 { animation-delay: 0.3s; }

@keyframes soundwave {
  0%, 100% { height: 6px; }
  50% { height: 26px; }
}

.audio-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(100, 116, 139, 0.1);
  color: var(--text-muted, #64748b);
  font-size: 0.82rem;
  font-weight: 600;
}

.audio-status-pill.speaking {
  background: rgba(2, 132, 199, 0.15);
  color: #0284c7;
}

.audio-blind-toggle-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px dashed #0284c7;
  color: #0284c7;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.audio-blind-toggle-btn:hover {
  background: rgba(2, 132, 199, 0.1);
}

.audio-blind-toggle-btn.active {
  background: #0284c7;
  color: #ffffff;
  border-style: solid;
}

/* 盲聽模式樣式 */
.blind-masked {
  filter: blur(8px);
  user-select: none;
  pointer-events: none;
  transition: filter 0.3s ease;
}

.blind-mask-overlay {
  margin: 12px 0;
  padding: 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95));
  color: #f8fafc;
  text-align: center;
  font-size: 0.92rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.blind-mask-overlay button {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.blind-mask-overlay button:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* 全民英檢看圖題聽力逐字稿收合控制 */
.btn-gept-transcript-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 6px 0;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-gept-transcript-toggle:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

.btn-gept-transcript-toggle.active {
  background: #e0f2fe;
  color: #0284c7;
  border-color: #38bdf8;
}

.gept-transcript-wrap {
  margin: 8px 0 16px 0;
  padding: 14px 18px;
  background: #f8fafc;
  border-left: 3px solid #0284c7;
  border-radius: 6px;
  color: #334155;
  font-size: 14px;
  line-height: 1.65;
}

body.theme-dark .btn-gept-transcript-toggle {
  background: #1e293b;
  color: #94a3b8;
  border-color: #334155;
}

body.theme-dark .btn-gept-transcript-toggle:hover {
  background: #334155;
  color: #f1f5f9;
  border-color: #475569;
}

body.theme-dark .btn-gept-transcript-toggle.active {
  background: #0c4a6e;
  color: #38bdf8;
  border-color: #0284c7;
}

body.theme-dark .gept-transcript-wrap {
  background: #1e293b;
  border-left-color: #38bdf8;
  color: #cbd5e1;
}

/* ── 全民英檢 Part 2 問答測驗 與 Part 3 簡短對話專用樣式 ── */
.gept-part2-exam-card,
.gept-part3-exam-card {
  margin-bottom: 16px;
}
.gept-part2-instruction,
.gept-part3-instruction {
  font-size: 15px;
  color: var(--ms-text, #1e293b);
  margin-bottom: 12px;
  line-height: 1.6;
}
.gept-part2-notice,
.gept-part3-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(0, 113, 227, 0.05);
  border: 1px dashed rgba(0, 113, 227, 0.4);
  border-radius: 8px;
  margin: 12px 0;
}
.gept-notice-icon {
  font-size: 18px;
  color: #0071e3;
  flex-shrink: 0;
}
.gept-notice-text {
  flex: 1;
  font-size: 13.5px;
  color: var(--ms-text, #334155);
  line-height: 1.5;
}
.gept-notice-text strong {
  color: #0071e3;
  margin-right: 4px;
}
.btn-toggle-part2-prompt,
.btn-toggle-part3-dialogue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.btn-toggle-part2-prompt:hover,
.btn-toggle-part3-dialogue:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}
.gept-part2-prompt-display,
.gept-part3-dialogue-display {
  margin: 12px 0;
  padding: 12px 16px;
  background: rgba(248, 250, 252, 0.9);
  border-left: 3.5px solid #0071e3;
  border-radius: 6px;
  animation: fadeIn 0.2s ease;
}
.prompt-display-label,
.dialogue-display-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 4px;
}
.prompt-display-text {
  font-size: 15px;
  font-style: italic;
  font-weight: 500;
  color: #0f172a;
}
.dialogue-display-text {
  font-size: 14.5px;
  line-height: 1.65;
  color: #1e293b;
}

/* Part 3 印在題本上的題目問句方塊 */
.gept-part3-question-box {
  margin: 14px 0 10px 0;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3.5px solid #0071e3;
  border-radius: 6px;
}
.gept-q-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: #0071e3;
  background: rgba(0, 113, 227, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.gept-q-prompt-text {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.5;
}

/* 深色模式支援 */
body.theme-dark .gept-part2-notice,
body.theme-dark .gept-part3-notice {
  background: rgba(0, 113, 227, 0.12);
  border-color: rgba(56, 189, 248, 0.35);
}
body.theme-dark .gept-notice-text {
  color: #e2e8f0;
}
body.theme-dark .gept-notice-text strong {
  color: #38bdf8;
}
body.theme-dark .btn-toggle-part2-prompt,
body.theme-dark .btn-toggle-part3-dialogue {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}
body.theme-dark .btn-toggle-part2-prompt:hover,
body.theme-dark .btn-toggle-part3-dialogue:hover {
  background: #334155;
  color: #f8fafc;
}
body.theme-dark .gept-part2-prompt-display,
body.theme-dark .gept-part3-dialogue-display {
  background: #1e293b;
  border-left-color: #38bdf8;
}
body.theme-dark .prompt-display-text {
  color: #f1f5f9;
}
body.theme-dark .dialogue-display-text {
  color: #e2e8f0;
}
body.theme-dark .gept-part3-question-box {
  background: #1e293b;
  border-color: #334155;
  border-left-color: #38bdf8;
}
body.theme-dark .gept-q-badge {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
}
body.theme-dark .gept-q-prompt-text {
  color: #f1f5f9;
}


/* ── 月訂閱制與年期授權專屬徽章 ── */
.cert-price-period {
  font-size: 13px;
  font-weight: 700;
  color: #0284c7;
  margin-left: 2px;
}

.cert-period-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  margin-left: 6px;
  vertical-align: middle;
}

.cert-period-badge.badge-monthly {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.cert-period-badge.badge-yearly {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.cert-duration-spec {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cert-duration-spec.spec-monthly {
  color: #059669;
  font-weight: 700;
}


/* ========================================================
   Course Card Refactor v2 — Equal Height, Info Tooltip, SaaS Elevation
   ======================================================== */

/* Equal-height grid items */
#catalogCardsContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
  gap: 20px;
  align-items: stretch;
}

#catalogCardsContainer > .catalog-card {
  height: 100%;
}

/* Title 2-line truncation & strict alignment */
.cert-code-title {
  font-size: 15px;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0 0 6px 0;
  line-height: 1.35;
  letter-spacing: -0.02em;
  min-height: 44px;
}

.cert-code-title .exam-code-prefix {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.cert-code-title .cert-title-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  line-height: 1.35;
}

/* 💡 Info Badge & Tooltip */
.cert-info-badge-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 10;
}

.cert-info-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  color: #0284c7;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  line-height: 1;
}

.cert-info-badge:hover,
.cert-info-badge:focus-visible {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
  outline: none;
}

.cert-info-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 250px;
  max-width: calc(100vw - 40px);
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  font-size: 11.5px;
  line-height: 1.55;
  color: #334155;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 100;
}

.cert-info-badge-wrap:hover .cert-info-tooltip,
.cert-info-badge-wrap:focus-within .cert-info-tooltip {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cert-info-tooltip dt {
  font-weight: 700;
  color: #0f172a;
  font-size: 11px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cert-info-tooltip dd {
  margin: 0 0 8px 0;
  color: #475569;
  font-size: 11.5px;
}

.cert-info-tooltip dd:last-child {
  margin-bottom: 0;
}

/* Secondary Assessment Button & Share */
.btn-cert-assessment-featured {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #0284c7 !important;
  background: rgba(240, 249, 255, 0.7);
  border: 1px solid rgba(186, 230, 253, 0.9);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-cert-assessment-featured:hover {
  background: #e0f2fe;
  border-color: #7dd3fc;
  color: #0369a1 !important;
  transform: none;
  box-shadow: none;
}

.btn-cert-assessment-featured:hover i,
.btn-cert-assessment-featured:hover .badge-free-micro {
  color: #0284c7 !important;
}

.cert-share-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #86868b;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}

.cert-share-inline:hover {
  color: #0071e3;
}

/* Dark mode adjustments */
body.theme-dark .catalog-card {
  background: #0f172a;
  border-color: rgba(71, 85, 105, 0.5);
}

body.theme-dark .catalog-card.card-it {
  background: rgba(0, 113, 227, 0.08);
  border-color: rgba(0, 113, 227, 0.25);
}

body.theme-dark .catalog-card.card-cambridge {
  background: rgba(88, 86, 214, 0.08);
  border-color: rgba(88, 86, 214, 0.25);
}

body.theme-dark .catalog-card.card-gept {
  background: rgba(48, 183, 84, 0.08);
  border-color: rgba(48, 183, 84, 0.25);
}

body.theme-dark .cert-info-badge {
  background: rgba(12, 74, 110, 0.4);
  border-color: rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}

body.theme-dark .cert-info-tooltip {
  background: #1e293b;
  border-color: rgba(71, 85, 105, 0.6);
  color: #cbd5e1;
}

body.theme-dark .cert-info-tooltip dt {
  color: #f1f5f9;
}

body.theme-dark .cert-info-tooltip dd {
  color: #94a3b8;
}

body.theme-dark .btn-cert-assessment-featured {
  background: rgba(12, 74, 110, 0.3);
  border-color: rgba(56, 189, 248, 0.3);
  color: #38bdf8 !important;
}

body.theme-dark .btn-cert-assessment-featured:hover {
  background: rgba(12, 74, 110, 0.5);
  border-color: rgba(56, 189, 248, 0.5);
  color: #7dd3fc !important;
}