:root {
  --text-scale: 1;
  --primary: #ff9f0a;
  --primary-dark: #d48405;
  --accent: #ffcc00;
  --correct: #34c759;
  --correct-bg: #e6f9e9;
  --wrong: #ff3b30;
  --wrong-bg: #fff2f2;
  --bg-body: #f5f5f7;
  --glass: rgba(255, 255, 255, 0.98);
  --border: #e5e5ea;
  --text-main: #1d1d1f;
  --text-sec: #86868b;
  --font-serif:
    "Georgia", "Nimrod", "Noto Serif SC", "Songti SC", "SimSun", serif;
  --font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Roboto",
    "Helvetica Neue", "Arial", "PingFang SC", "Microsoft YaHei",
    "Hiragino Sans GB", sans-serif;
}
::selection {
  background: rgba(255, 159, 10, 0.3);
  color: #000;
}
* {
  box-sizing: border-box;
  outline: none;
}
.icon-svg {
  width: 1.25em;
  height: 1.25em;
  display: inline-block;
  vertical-align: -0.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: all 0.2s ease;
}
.icon-svg.filled {
  fill: currentColor;
  stroke: none;
}
@keyframes icon-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.icon-svg.spin {
  animation: icon-spin 1s linear infinite;
}
.notice-icon-svg {
  color: #b58105;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-right: 8px;
  vertical-align: middle;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin: 0;
  font-family: var(--font-sans);
  background-color: var(--bg-body);
  color: var(--text-main);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  opacity: 0;
  transition: opacity 0.4s ease-in;
}
.view {
  display: none;
  height: 100%;
  width: 100%;
  animation: fadeIn 0.3s ease-out;
}
.view.active {
  display: flex;
  flex-direction: column;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInTooltip {
  from {
    opacity: 0;
    transform: translate(-50%, 5px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@keyframes modalPop {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes popUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes blinkRed {
  0%,
  100% {
    color: #ff3b30;
    background: #fff0f0;
  }
  50% {
    opacity: 0.6;
  }
}
#login-view {
  background: linear-gradient(135deg, #fff8e1 0%, #ffd8a8 100%);
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
}
#login-view.active {
  display: flex;
}
.login-box {
  background: rgba(255, 255, 255, 0.9);
  padding: 40px 50px;
  border-radius: 24px;
  width: 100%;
  max-width: 400px;
  text-align: center;
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px rgba(255, 160, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 1);
}
.login-box h1 {
  color: #4a4a4a;
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 800;
}
.subtitle {
  color: #8c8c8c;
  margin-bottom: 30px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
}
.input-group {
  position: relative;
  margin-bottom: 20px;
}
.input-group input {
  width: 100%;
  padding: 15px 20px 15px 45px;
  border: 2px solid #eee;
  border-radius: 12px;
  font-size: 16px;
  outline: none;
  background: #fafafa;
  color: #333;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease;
}
.input-group input:focus {
  border-color: #ff8c00;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.15);
}
.input-group .icon-svg {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%) !important;
  color: #ffb74d;
  width: 20px;
  height: 20px;
  pointer-events: none;
  opacity: 0.8;
}
.input-group input:focus ~ .icon-svg {
  color: #ff8c00;
  opacity: 1;
}
.btn-main {
  width: 100%;
  padding: 15px;
  background: linear-gradient(90deg, #ff8c00 0%, #ff6f00 100%);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 10px 20px rgba(255, 140, 0, 0.3);
}
.btn-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 25px rgba(255, 140, 0, 0.4);
  background: linear-gradient(90deg, #e65100 0%, #f57c00 100%);
}
.footer-link {
  margin-top: 20px;
  font-size: 13px;
  color: #8d6e63;
}
.footer-link a {
  color: #ff8c00;
  text-decoration: none;
  font-weight: 700;
}
.footer-link a:hover {
  color: #e65100;
  text-decoration: underline;
}
.error-text {
  color: #ff3b30;
  margin-top: 10px;
  font-size: 14px;
}
#dashboard-view {
  background: #fff;
}
.dash-nav {
  height: 75px;
  background: var(--glass);
  border-bottom: 1px solid #d2d2d7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  backdrop-filter: blur(20px);
  z-index: 10;
}
.vip-badge {
  font-family: "SF Pro Display", "Roboto", sans-serif;
  font-weight: 900;
  font-size: 26px;
  background: linear-gradient(120deg, #000000 0%, #434343 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
  padding-left: 5px;
}
.vip-badge span {
  color: #ff9f0a !important;
  -webkit-text-fill-color: initial;
}
.nav-btn-group {
  display: flex;
  gap: 12px;
  align-items: center;
}
.nav-action-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #555;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-sans);
  text-decoration: none;
}
.nav-action-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #000;
  transform: translateY(-1px);
}
.btn-nav-invite {
  background: #fff0f0 !important;
  color: #d23f31 !important;
  border: 1px solid #ffd6d6 !important;
  font-weight: 700 !important;
}
.btn-nav-invite:hover {
  background: #d23f31 !important;
  color: #fff !important;
  border-color: #d23f31 !important;
}
.btn-nav-vip {
  background: #f5f5f7 !important;
  color: #333 !important;
  border: 1px solid #e5e5ea !important;
}
.btn-nav-vip:hover {
  background: #e5e5ea !important;
  color: #000 !important;
}
.toolbar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin: 30px auto 20px auto;
}
.search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
}
#search-input {
  width: 300px;
  padding: 12px 20px 12px 40px;
  border-radius: 25px;
  border: 1px solid #d1d1d6;
  font-size: 15px;
  background: #fff;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.search-icon-svg {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #86868b;
  z-index: 2;
  pointer-events: none;
}
#search-input:focus {
  border-color: #1d1d1f;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  width: 340px;
}
.count-badge {
  font-size: 13px;
  color: #86868b;
  font-weight: 600;
  background: #f5f5f7;
  padding: 6px 12px;
  border-radius: 12px;
  white-space: nowrap;
}
.filter-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 30px auto 10px auto;
  padding: 0 20px;
}
.filter-btn {
  background: transparent;
  border: none;
  padding: 10px 24px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 600;
  color: #86868b;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-sans);
}
.filter-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #1d1d1f;
}
.filter-btn.active {
  background-color: #1d1d1f;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: scale(1.02);
}
#prediction-select {
  background-color: #fff !important;
  color: #ff9f0a !important;
  border: 1px solid #ff9f0a !important;
  opacity: 1 !important;
  font-weight: 800;
  padding-right: 10px;
  appearance: auto;
}
#prediction-select:focus {
  box-shadow: 0 0 0 3px rgba(255, 159, 10, 0.2) !important;
}
#prediction-select option {
  background-color: #fff;
  color: #333;
}
.grid-container {
  padding: 40px;
  overflow-y: auto;
  flex: 1;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}
.paper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 32px;
  padding-bottom: 60px;
}

.card-title-en {
  font-family: "Noto Serif SC", serif;
  font-size: 24px;
  font-weight: 700;
  color: #1d1d1f;
  line-height: 1.3;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-title-cn {
  font-family: -apple-system, sans-serif;
  font-size: 15px;
  color: #86868b;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.meta-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #86868b;
}
.tag-text {
  color: #d23f31;
  font-weight: 700;
  font-size: 11px;
  background: rgba(210, 63, 49, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
}
.pagination-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  padding-bottom: 40px;
  width: 100%;
}
.page-btn {
  background: #fff;
  border: 1px solid #d1d1d6;
  min-width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1d1d1f;
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}
.page-btn:hover {
  border-color: #1d1d1f;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.page-btn.active {
  background: #1d1d1f;
  color: #fff;
  border-color: #1d1d1f;
  pointer-events: none;
}
.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
#exam-view {
  display: none;
  height: 100%;
  overflow: hidden;
  flex-direction: column;
}
#exam-view.active {
  display: flex !important;
}
.timer-wrapper {
  display: flex;
  align-items: center;
  background: #f5f5f7;
  border-radius: 8px;
  border: 1px solid #d1d1d6;
  padding: 4px;
}
.timer-label {
  font-size: 11px;
  font-weight: 700;
  color: #888;
  padding: 0 10px;
  border-right: 1px solid #e0e0e0;
  margin-right: 5px;
}
#time-select {
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  padding: 5px;
}
.timer-box {
  font-family: "Roboto Mono", monospace;
  font-size: 18px;
  font-weight: 700;
  color: #1d1d1f;
  padding: 0 10px;
  min-width: 60px;
  text-align: center;
}
.timer-warning {
  animation: blinkRed 1s infinite;
  border-radius: 4px;
}
.btn-header {
  background: white;
  border: 1px solid #ccc;
  color: #333;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: 0.2s;
  position: relative;
}
.btn-header:hover {
  background: #f5f5f7;
}
.btn-control {
  border: none;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  margin-left: 5px;
  cursor: pointer;
  font-weight: 600;
}
.btn-start {
  background: var(--correct);
}
.btn-pause {
  background: var(--wrong);
}
.btn-locked {
  opacity: 0.6;
  cursor: not-allowed;
  background: #eee;
  color: #999;
  border-color: #ddd;
}
.split-pane {
  display: flex;
  flex: 1;
  height: auto !important;
  overflow: hidden;
  background: #fff;
  flex-direction: row;
}
.panel-left,
.panel-right {
  height: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
.panel-left {
  background: #fff;
  border-right: 5px solid #e0e0e0;
  padding: 40px;
  user-select: text;
  width: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><text x='50%' y='50%' font-size='20' fill='rgba(0,0,0,0.05)' font-family='sans-serif' font-weight='bold' transform='rotate(-45 150 150)' text-anchor='middle'>Mango IELTS Prediction</text></svg>") !important;
}
.panel-right {
  background: #f9f9f9;
  padding: 0;
  width: 50%;
}
.passage-label {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #888;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.article-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 800;
  color: #000;
  margin: 0 0 40px 0;
  line-height: 1.3;
}
.article-content {
  font-size: calc(17px * var(--text-scale));
  line-height: 1.8;
  color: #222;
  font-family: "Georgia", serif;
  transition: font-size 0.2s ease;
}
.article-content h2 {
  font-family: var(--font-sans);
  margin-top: 30px;
  margin-bottom: 15px;
  font-size: 20px;
  color: #333;
}
.article-content p {
  margin-bottom: 20px;
  text-align: justify;
}
.highlighted {
  background-color: #ffeb3b;
  border-radius: 2px;
  cursor: pointer;
}
#q-container {
  padding: 30px 40px 100px 40px;
  max-width: 900px;
  margin: 0 auto;
}
.group-header {
  background-color: #eee;
  padding: 10px 15px;
  font-weight: bold;
  font-size: 15px;
  margin: 30px 0 15px 0;
  border-radius: 4px;
  color: #333;
}
.instruction-box {
  font-style: italic;
  margin-bottom: 20px;
  color: #333;
  font-size: 15px;
}
.q-row {
  display: flex;
  margin-bottom: 30px;
  position: relative;
  padding-bottom: 20px;
  border-bottom: 1px dashed #ddd;
  transition: background-color 0.3s;
  border-radius: 8px;
  padding: 15px;
}
.q-row.wrong {
  background-color: var(--wrong-bg);
  border: 1px solid var(--wrong);
}
.q-row.correct {
  background-color: var(--correct-bg);
  border: 1px solid var(--correct);
}
.q-num-col {
  width: 65px;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 800;
  color: #000;
  text-align: left;
  padding-top: 6px;
}
.q-row.wrong .q-num-col {
  color: var(--wrong);
}
.q-row.correct .q-num-col {
  color: #155724;
}
.q-content-col {
  flex: 1;
  font-size: 16px;
  color: #000000;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
.q-content-col div {
  font-weight: 400 !important;
}
.radio-label {
  display: flex;
  align-items: flex-start;
  padding: 8px 12px;
  margin-bottom: 6px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.1s;
  color: #000000;
  font-weight: 400;
}
.radio-label:hover {
  background: #efeff4;
}
.radio-label input {
  margin-top: 5px;
  margin-right: 12px;
  accent-color: var(--primary);
  transform: scale(1.1);
}
.tfng-container {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  width: 100%;
  max-width: 400px;
}
.tfng-opt {
  flex: 1;
  position: relative;
  margin: 0;
}
.tfng-opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  cursor: pointer;
}
.tfng-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 5px;
  background: #fff;
  border: 1px solid #d1d1d6;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #86868b;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.tfng-opt:hover .tfng-btn {
  background: #f5f5f7;
  border-color: #86868b;
  color: #1d1d1f;
}
.tfng-opt input:checked + .tfng-btn {
  background: #007aff;
  border-color: #007aff;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
  transform: translateY(-1px);
}
.matching-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  gap: 8px;
  margin-top: 10px;
  width: 100%;
  max-width: 600px;
}
.matching-btn-text {
  font-family: "Times New Roman", serif;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
}
.q-input,
.gap-input {
  border: 1px solid #ccc;
  border-radius: 0;
  padding: 6px 8px;
  font-size: 15px;
  width: 200px;
  transition: all 0.2s;
  background: #fff;
  color: #000;
  font-family: Arial, sans-serif;
}
.q-input:focus,
.gap-input:focus {
  border-color: #333;
  outline: none;
  background-color: #ffffe0;
}
.inline-gap-input {
  border: 1px solid #ccc;
  background: #fff;
  width: 120px;
  text-align: left;
  padding-left: 8px;
  border-radius: 0;
}
.inline-gap-input:focus {
  background-color: #ffffe0;
  border-color: #333;
}
.q-input:focus,
.gap-input:focus {
  border-color: var(--primary);
  outline: none;
  background-color: #e8f0fe;
}
.inline-gap-input {
  border: none;
  border-bottom: 2px solid #555;
  background: transparent;
  width: 100px;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  color: #1d1d1f;
  padding: 0 5px;
  margin: 0 5px;
  transition: all 0.3s;
  border-radius: 0;
  outline: none;
}
.inline-gap-input:focus {
  border-bottom-color: var(--primary);
  background-color: rgba(255, 159, 10, 0.05);
}
.inline-gap-input.correct {
  border-bottom-color: #34c759;
  color: #155724;
  background-color: #e6f9e9;
}
.inline-gap-input.wrong {
  border-bottom-color: #ff3b30;
  color: #ff3b30;
  background-color: #fff2f2;
}
#analysis-section {
  display: none;
  padding: 40px;
  background: #fff;
  border-top: 5px solid var(--primary);
  margin-top: 20px;
}
.analysis-card {
  border: 1px solid #ddd;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 8px;
  background-color: #fdfdfd;
}
.analysis-card.correct-card {
  border-left: 5px solid var(--correct);
}
.analysis-card.wrong-card {
  border-left: 5px solid var(--wrong);
}
.inline-feedback-box {
  display: none;
  margin-top: 15px;
  padding: 12px 15px;
  border-radius: 6px;
  font-size: 14px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.q-row.correct .inline-feedback-box {
  border-left: 4px solid var(--correct);
  color: #155724;
}
.q-row.wrong .inline-feedback-box {
  border-left: 4px solid var(--wrong);
  color: #333;
}
.footer-nav {
  height: 70px;
  background: white;
  border-top: 1px solid #d2d2d7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  z-index: 200;
  flex-shrink: 0;
  position: relative;
}
.nav-map {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 5px;
  margin-right: 20px;
}
.nav-dot {
  min-width: 32px;
  width: auto;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #c7c7cc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  color: #555;
  transition: 0.2s;
}
.nav-dot.answered {
  background: #555;
  color: white;
  border-color: #555;
}
.nav-dot.flagged {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
#float-menu {
  position: absolute;
  background: #1d1d1f;
  padding: 6px;
  border-radius: 8px;
  display: none;
  gap: 4px;
  z-index: 9999;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  flex-direction: column;
}
#float-menu button {
  background: transparent;
  border: none;
  color: white;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
}
#float-menu button:hover {
  background: rgba(255, 255, 255, 0.2);
}
.scratchpad-container {
  position: fixed;
  top: 80px;
  right: 30px;
  width: 320px;
  height: 400px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid #e5e5ea;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  display: none;
  flex-direction: column;
  z-index: 2000;
  overflow: hidden;
  animation: popUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.scratchpad-header {
  height: 44px;
  background: #f5f5f7;
  border-bottom: 1px solid #d2d2d7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  font-size: 14px;
  color: #1d1d1f;
  cursor: move;
  user-select: none;
}
.scratchpad-content {
  flex: 1;
  border: none;
  resize: none;
  padding: 15px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  background: transparent;
  outline: none;
}
.trans-paragraph {
  display: none;
  background-color: #f5f7fa;
  border-left: 4px solid #007aff;
  padding: 10px 15px;
  margin: 5px 0 20px 0;
  color: #333;
  font-size: 15px;
  line-height: 1.6;
  border-radius: 0 8px 8px 0;
  animation: fadeIn 0.3s ease;
}
.trans-mode-active .trans-paragraph {
  display: block;
}
#toast-box {
  position: fixed;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(29, 29, 31, 0.9);
  backdrop-filter: blur(10px);
  color: #fff;
  padding: 12px 28px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 500;
  z-index: 200000 !important;
  transition: top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  letter-spacing: 0.3px;
}
#toast-box.show {
  top: 30px;
}
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  z-index: 99999 !important;
  justify-content: center;
  align-items: center;
}
.modal-overlay.active {
  display: flex;
  animation: fadeIn 0.2s ease-out;
}
.modal-box {
  background: rgba(255, 255, 255, 0.95);
  width: 320px;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  animation: modalPop 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
}
.modal-content-area {
  padding: 25px 20px;
}
.modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin-bottom: 8px;
}
.modal-msg {
  font-size: 14px;
  color: #000;
  line-height: 1.4;
}
.modal-buttons {
  display: flex;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.modal-btn {
  flex: 1;
  padding: 14px 0;
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
  font-family: var(--font-sans);
}
.modal-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}
.modal-btn.cancel {
  color: #007aff;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  font-weight: 400;
}
.modal-btn.confirm {
  color: #007aff;
  font-weight: 700;
}
.modal-btn.confirm.danger {
  color: #ff3b30;
}
#about-modal .modal-box {
  width: 520px !important;
  max-width: 90%;
}
button[onclick*="clipboard"] {
  transition: all 0.2s ease;
}
button[onclick*="clipboard"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(7, 193, 96, 0.3) !important;
}
.modal-header-simple {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px 10px 25px;
}
.modal-title-text {
  font-size: 20px;
  font-weight: 800;
  color: #1d1d1f;
}
.close-icon-btn {
  background: transparent;
  border: none;
  font-size: 28px;
  color: #ccc;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.segmented-control {
  background: #f2f2f7;
  padding: 4px;
  border-radius: 9px;
  margin: 10px 25px 25px 25px;
  display: flex;
}
.segment-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  border-radius: 7px;
  transition: all 0.2s ease;
}
.segment-btn.active {
  background: #fff;
  color: #000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.tab-content {
  display: none;
  padding: 0 25px 30px 25px;
  animation: fadeIn 0.3s ease;
}
.tab-content.active {
  display: block;
}
.vip-card-pro {
  background: #ffffff;
  border: 1px solid #e5e5ea;
  border-left: 6px solid #d23f31;
  border-radius: 12px;
  padding: 24px 30px;
  margin-bottom: 25px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.vip-card-pro::before {
  content: "VIP";
  position: absolute;
  right: -10px;
  bottom: -20px;
  font-size: 120px;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.03);
  pointer-events: none;
}
.pro-label {
  font-size: 12px;
  font-weight: 600;
  color: #86868b;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  display: block;
}
.pro-status-text {
  font-size: 32px;
  font-weight: 800;
  color: #1d1d1f;
  line-height: 1.2;
  margin-bottom: 8px;
  white-space: nowrap;
}
.pro-date-capsule {
  display: inline-block;
  background: #f0f0f2;
  color: #1d1d1f;
  font-weight: 600;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #e5e5ea;
  font-family: "SF Pro Text", monospace;
}
.input-action-row {
  display: flex;
  gap: 10px;
}
.clean-input {
  flex: 1;
  padding: 12px;
  border: 1px solid #e5e5ea;
  border-radius: 10px;
  font-size: 14px;
  background: #f9f9f9;
  text-align: center;
}
.clean-input:focus {
  background: #fff;
  border-color: #007aff;
}
.btn-redeem {
  background: #1d1d1f;
  color: #fff;
  border: none;
  padding: 0 20px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
}
.btn-redeem:hover {
  background: #333;
}
.btn-buy-primary {
  width: 100%;
  padding: 14px;
  background: #007aff;
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  margin-top: 15px;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}
.btn-buy-primary:hover {
  background: #0062cc;
  transform: translateY(-1px);
}
.msg-text {
  font-size: 12px;
  color: #ff3b30;
  margin-top: 5px;
  height: 18px;
}
.support-text {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}
.wx-contact-box {
  margin-top: 20px;
  background: #fbfbfb;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wx-left-part {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wx-icon-badge {
  background-color: #07c160;
  color: white;
  font-size: 16px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wx-text-info {
  font-size: 13px;
  color: #333;
  display: flex;
  flex-direction: column;
}
.wx-label-tiny {
  font-size: 11px;
  color: #888;
  margin-bottom: 2px;
}
.wx-number {
  font-weight: bold;
  color: #000;
  font-family: monospace;
  font-size: 14px;
}
.btn-copy-wx-green {
  background: rgba(7, 193, 96, 0.1);
  color: #07c160;
  border: none;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-copy-wx-green:hover {
  background: #07c160;
  color: white;
}
.invite-dashboard {
  display: flex;
  align-items: center;
  background: #fbfbfd;
  border: 1px solid #e5e5ea;
  border-radius: 16px;
  padding: 20px 10px;
  margin-bottom: 25px;
}
.dash-item {
  flex: 1;
  text-align: center;
}
.dash-label {
  font-size: 11px;
  color: #86868b;
  margin-bottom: 6px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.dash-value {
  font-size: 24px;
  font-weight: 800;
  color: #1d1d1f;
}
.dash-value.text-gold {
  color: #d23f31;
  font-size: 28px;
  text-shadow: 0 2px 10px rgba(210, 63, 49, 0.1);
}
.dash-divider {
  width: 1px;
  height: 30px;
  background: #e5e5ea;
}
.invite-card-black {
  background: #ffffff;
  border: 1px solid #e5e5ea;
  border-radius: 20px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}
.invite-card-black::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1d1d1f 0%, #d23f31 100%);
}
.invite-card-header {
  font-size: 14px;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.code-display-box {
  font-size: 32px;
  font-weight: 900;
  color: #1d1d1f;
  letter-spacing: 3px;
  margin-bottom: 20px;
  background: #f5f5f7;
  padding: 15px 0;
  border-radius: 12px;
  border: 2px dashed #d1d1d6;
  font-family: monospace;
}
.invite-desc {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 25px;
}
.btn-copy-black {
  background: #1d1d1f;
  color: #fff;
  border: none;
  padding: 14px 35px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
.btn-copy-black:hover {
  background: #333;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
@media screen and (max-width: 1000px) {
  .split-pane {
    flex-direction: column;
  }
  .panel-left {
    height: 40% !important;
    width: 100% !important;
    border-right: none !important;
    border-bottom: 5px solid #eee;
  }
  .panel-right {
    width: 100% !important;
    flex: 1 !important;
    padding-bottom: 50px !important;
  }
}
@media screen and (min-width: 1001px) and (max-width: 1366px) {
  html {
    font-size: 14px;
  }
  .panel-left,
  .panel-right {
    padding: 20px !important;
  }
  .paper-grid {
    gap: 15px !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  }
}
.flag-btn {
  float: right;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #e5e5ea;
  padding: 0 0 5px 15px;
  transition: all 0.2s ease;
  margin-top: -2px;
}
.flag-btn .icon-svg {
  width: 22px;
  height: 22px;
}
.flag-btn:hover {
  color: #ff9f0a;
  transform: scale(1.1);
}
.flag-btn.active {
  color: #ff3b30;
  text-shadow: 0 2px 5px rgba(255, 59, 48, 0.2);
}

.brand-icon {
  font-size: 24px;
  width: 44px;
  height: 44px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(255, 159, 10, 0.15);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand-text-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
}
.brand-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #1d1d1f;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.brand-tag {
  font-size: 9px;
  background: linear-gradient(90deg, #1d1d1f 0%, #434343 100%);
  color: #fff;
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transform: translateY(-1px);
}
.brand-subtitle {
  font-size: 11px;
  color: #86868b;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-top: 2px;
  font-family: "Inter", sans-serif;
}
.nav-btn-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-divider {
  width: 1px;
  height: 24px;
  background-color: #d1d1d6;
  margin: 0 4px;
}

.nav-icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}
.btn-vip .nav-icon {
  stroke: #fff;
  fill: none;
}


.btn-invite {
  background: #fff;
  color: #d23f31;
  border: 1px solid #ffe5e5;
  box-shadow: 0 4px 10px rgba(210, 63, 49, 0.08);
}
.btn-invite:hover {
  background: #fff0f0;
  border-color: #d23f31;
  box-shadow: 0 6px 15px rgba(210, 63, 49, 0.15);
}
.btn-vip {
  background: linear-gradient(135deg, #ff9f0a 0%, #ff7f00 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 159, 10, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-vip:hover {
  background: linear-gradient(135deg, #ffb340 0%, #ff8c00 100%);
  box-shadow: 0 6px 16px rgba(255, 159, 10, 0.4);
}
.btn-vip .nav-icon {
  fill: rgba(255, 255, 255, 0.2);
  stroke: #fff;
}
.btn-normal {
  background: transparent;
  color: #555;
  font-weight: 600;
  padding: 0 12px;
}
.btn-normal:hover {
  background: #f2f2f7;
  color: #000;
}
button[onclick="handleLogout()"]:hover {
  color: #d23f31;
  background: rgba(210, 63, 49, 0.05);
}
@keyframes redPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(210, 63, 49, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(210, 63, 49, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(210, 63, 49, 0);
  }
}
#prediction-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: #ffffff;
  border: 2px solid #d23f31 !important;
  color: #d23f31 !important;
  border-radius: 50px;
  height: 42px;
  padding: 0 45px 0 20px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 14px;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
  cursor: pointer;
  outline: none;
  box-shadow: 0 4px 15px rgba(210, 63, 49, 0.15);
  transition: all 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d23f31' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 14px;
  animation: redPulse 2s infinite;
}
#prediction-select:hover {
  background-color: #fff0f0;
  animation: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(210, 63, 49, 0.3);
  border-color: #ff3b30 !important;
}
#prediction-select option {
  background-color: #fff;
  color: #333;
  padding: 10px;
}
.exam-brand-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}
.exam-brand-icon-mini {
  width: 32px;
  height: 32px;
  font-size: 18px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(255, 159, 10, 0.1);
}
.exam-brand-label-row {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #1d1d1f;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
}
.exam-badge {
  font-size: 12px;
  font-weight: 600;
  color: #86868b;
  background: #f5f5f7;
  padding: 3px 6px;
  border-radius: 4px;
  margin-left: 6px;
  transform: translateY(-1px);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.exam-header {
  height: 64px;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid #d2d2d7;
  padding: 0 24px;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.header-left-section {
  display: flex;
  align-items: center;
  gap: 12px;
}
.btn-back-library {
  background-color: #f2f2f7;
  color: #1d1d1f;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 18px 10px 14px;
  border-radius: 30px;
  border: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.btn-back-library:hover {
  background-color: #e5e5ea;
  color: #000;
  transform: translateX(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.btn-back-library:active {
  transform: translateX(-1px) scale(0.97);
  background-color: #d1d1d6;
}
.exam-title-separator {
  width: 1px;
  height: 14px;
  background: #e0e0e0;
}
.exam-title-text {
  font-size: 13px;
  color: #86868b;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.header-center-section {
  display: flex;
  justify-content: center;
}
.header-right-section {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
@media screen and (max-width: 900px) {
  .exam-title-text,
  .exam-title-separator {
    display: none;
  }
}
.trans-btn-container {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #e5e5ea;
}
.btn-translate {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  outline: none;
}
.btn-translate.locked {
  background-color: #f9f9f9;
  color: #999;
  border: 1px dashed #ccc;
  cursor: not-allowed;
  opacity: 0.8;
}
.btn-translate.locked:hover {
  background-color: #f0f0f0;
  color: #666;
}
.btn-translate:not(.locked) {
  background-color: #fff;
  color: #ff9f0a;
  border: 1px solid #ff9f0a;
  box-shadow: 0 2px 8px rgba(255, 159, 10, 0.1);
}
.btn-translate:not(.locked):hover {
  background-color: #fff8e1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 159, 10, 0.2);
}
.btn-translate.active {
  background-color: #ff9f0a !important;
  color: #fff !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.trans-paragraph {
  display: none;
  margin-top: 8px;
  margin-bottom: 24px;
  background-color: #fbfbfd;
  border-left: 4px solid #ff9f0a;
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  color: #333;
  font-size: 15px;
  line-height: 1.7;
  text-align: justify;
  font-family:
    -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    sans-serif;
  animation: fadeIn 0.3s ease;
}
.trans-mode-active .trans-paragraph {
  display: block;
}
@keyframes fadeInTooltip {
  from {
    opacity: 0;
    transform: translate(-50%, 5px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
.btn-translate.locked {
  position: relative;
}
.btn-translate.locked:hover::after {
  content: "交卷后才可以查看中文翻译哦";
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #1d1d1f;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  animation: fadeInTooltip 0.2s ease-out;
}
.btn-translate.locked:hover::before {
  content: "";
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #1d1d1f transparent transparent transparent;
  z-index: 9999;
  animation: fadeInTooltip 0.2s ease-out;
}
.btn-locked {
  position: relative;
}
.btn-locked:hover::after {
  content: "考完试才可以查看答案和解析哦";
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  font-weight: 600;
  animation: fadeInTooltip 0.2s ease-out;
}
.btn-locked:hover::before {
  content: "";
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  z-index: 9999;
  animation: fadeInTooltip 0.2s ease-out;
}
.footer-controls {
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer-group-tools {
  display: flex;
  gap: 8px;
}
.tool-btn {
  background: transparent;
  border: none;
  color: #86868b;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}
.tool-btn:hover {
  background-color: #f2f2f7;
  color: #1d1d1f;
  transform: translateY(-1px);
}
.tool-btn:active {
  transform: scale(0.96);
}
.footer-divider {
  width: 1px;
  height: 24px;
  background-color: #e5e5ea;
}
.footer-group-actions {
  display: flex;
  gap: 12px;
}
.action-btn {
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-family: -apple-system, "Inter", sans-serif;
}
.btn-review {
  background-color: #fff;
  color: #1d1d1f;
  border: 1px solid #d1d1d6;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.btn-review:hover {
  background-color: #f9f9f9;
  border-color: #86868b;
  transform: translateY(-1px);
}
.btn-review.btn-locked {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #f5f5f7;
  color: #999;
  border-color: #e5e5ea;
  box-shadow: none;
}
.btn-submit {
  background: linear-gradient(135deg, #ff9f0a 0%, #ff7f00 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(255, 159, 10, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-submit:hover {
  background: linear-gradient(135deg, #ffb340 0%, #ff8c00 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 159, 10, 0.5);
}
.btn-submit:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(255, 159, 10, 0.3);
}
.group-analysis-box {
  display: none;
  margin-top: 25px;
  background-color: #ffffff;
  border: 1px solid #e5e5ea;
  border-left: 5px solid #ff9f0a;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  position: relative;
  animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.group-analysis-box h4 {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  color: #1d1d1f !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
}
.analysis-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}
.analysis-table th {
  text-align: left;
  padding: 10px 15px;
  border-bottom: 2px solid #e5e5ea;
  color: #86868b;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.analysis-table td {
  padding: 15px;
  border-bottom: 1px solid #f9f9f9;
  vertical-align: top;
  color: #333;
  line-height: 1.6;
}
.status-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.tag-ok {
  background: #e6f9e9;
  color: #34c759;
  border: 1px solid rgba(52, 199, 89, 0.2);
}
.tag-no {
  background: #fff2f2;
  color: #ff3b30;
  border: 1px solid rgba(255, 59, 48, 0.2);
}
.inline-feedback-box {
  margin-top: 15px;
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 14px;
  background-color: #fbfbfd;
  border: 1px solid #e5e5ea;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  line-height: 1.6;
}
.q-row.correct .inline-feedback-box {
  border-left: 4px solid #34c759;
  background-color: #f2fcf5;
  color: #155724;
}
.q-row.wrong .inline-feedback-box {
  border-left: 4px solid #ff3b30;
  background-color: #fff8f8;
  color: #333;
}
#analysis-section {
  background-color: #fff;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  margin-top: 40px;
  border: 1px solid #e5e5ea;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}
#score-banner {
  background: linear-gradient(135deg, #fffbf0 0%, #fff 100%);
  border: 1px solid #ffe0b2;
  border-radius: 16px;
  padding: 30px;
  text-align: center;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}
#score-banner span {
  font-size: 48px;
  font-weight: 800;
  color: #ff9f0a;
  font-family: "SF Pro Display", sans-serif;
  letter-spacing: -1px;
}
#score-banner::before {
  content: "SCORE REPORT";
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #d48405;
  letter-spacing: 2px;
  margin-bottom: 5px;
  opacity: 0.8;
}
#analysis-summary-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 10px;
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 2px dashed #e5e5ea;
}
.summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 5px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: default;
  transition: transform 0.2s;
}
.summary-item:hover {
  transform: scale(1.05);
}
.summary-item.correct {
  background-color: #e6f9e9;
  color: #34c759;
  border: 1px solid rgba(52, 199, 89, 0.2);
}
.summary-item.wrong {
  background-color: #fff2f2;
  color: #ff3b30;
  border: 1px solid rgba(255, 59, 48, 0.2);
}
#analysis-detailed-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.analysis-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}
.analysis-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}
.analysis-card.correct-card {
  border-left: 5px solid #34c759;
}
.analysis-card.wrong-card {
  border-left: 5px solid #ff3b30;
}
.analysis-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f5f5f7;
  font-size: 16px;
  font-weight: 800;
  color: #1d1d1f;
}
.user-ans-row {
  font-size: 14px;
  color: #555;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: #f9f9f9;
  border-radius: 6px;
}
.wrong-card .user-ans-row strong {
  color: #ff3b30;
  text-decoration: line-through;
}
.correct-ans-row {
  font-size: 14px;
  color: #155724;
  background: #e6f9e9;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 700;
  margin-bottom: 15px;
}
.expl-box {
  margin-top: 12px;
  padding: 15px;
  background-color: #fffbf0;
  border-radius: 8px;
  font-size: 14px;
  color: #5c4b37;
  line-height: 1.6;
  border: 1px solid #faebd7;
}
.exam-brand-capsule {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 6px;
  background: linear-gradient(to right, #fffbf0, #fff);
  border: 1px solid #f2e6d9;
  border-radius: 40px;
  box-shadow: 0 2px 10px rgba(210, 180, 140, 0.1);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  user-select: none;
  cursor: default;
}
.exam-brand-capsule:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(255, 159, 10, 0.15);
  border-color: #ffe0b2;
}
.capsule-icon-box {
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  border: 1px solid #f7f1e3;
}
.exam-brand-capsule:hover .capsule-icon {
  display: inline-block;
  animation: wave 1s ease-in-out infinite;
}
@keyframes wave {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(10deg);
  }
}
.capsule-main-text {
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-weight: 700;
  font-size: 15px;
  color: #2c2c2c;
  letter-spacing: 0.5px;
  line-height: 1;
}
.capsule-tag {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: #ff9f0a;
  background: rgba(255, 159, 10, 0.08);
  padding: 3px 6px;
  border-radius: 4px;
  margin-left: 6px;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255, 159, 10, 0.15);
}
@media screen and (max-width: 768px) {
  .capsule-main-text,
  .capsule-tag {
    display: none;
  }
  .exam-brand-capsule {
    padding: 4px;
    background: transparent;
    border: none;
    box-shadow: none;
  }
}
.footer-group-tools {
  display: flex;
  gap: 12px;
}
.tool-btn {
  background: #ffffff;
  border: 1px solid #c7c7cc;
  color: #555555;
  padding: 8px 15px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.tool-btn svg {
  stroke: #666;
  stroke-width: 2;
  transition: stroke 0.2s;
}

.tool-btn:hover {
  border-color: #8e8e93;
  color: #1d1d1f;
  background-color: #f9f9f9;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.tool-btn:hover svg {
  stroke: #1d1d1f;
}
.tool-btn:active {
  background-color: #f0f0f0;
  border-color: #8e8e93;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
  transform: translateY(1px);
}
@keyframes flashFocus {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 159, 10, 0.8);
    background-color: rgba(255, 159, 10, 0.2);
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 0 0 15px rgba(255, 159, 10, 0);
    background-color: transparent;
    transform: scale(1);
  }
}
.locate-flash {
  animation: flashFocus 1s ease-out;
  border-color: #ff9f0a !important;
  z-index: 10;
  position: relative;
}
.about-hero-header {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #f0f0f0;
}
.about-app-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 15px auto;
  background: linear-gradient(135deg, #fffbf0 0%, #fff 100%);
  border: 1px solid #ffe0b2;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 8px 20px rgba(255, 159, 10, 0.15);
}
.about-app-title {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #1d1d1f;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pro-badge {
  background: #1d1d1f;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
  letter-spacing: 1px;
}
.about-app-subtitle {
  margin: 8px 0 12px 0;
  font-size: 14px;
  color: #86868b;
  font-weight: 500;
  letter-spacing: 1px;
}
.about-version-pill {
  display: inline-block;
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  color: #999;
  background: #f9f9f9;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid #eee;
}
.login-header-modern {
  text-align: center;
  margin-bottom: 35px;
}
.login-logo-box {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px auto;
  background: linear-gradient(135deg, #fffbf0 0%, #ffffff 100%);
  border: 1px solid #ffe0b2;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  box-shadow: 0 10px 25px rgba(255, 159, 10, 0.25);
  animation: floatLogo 3s ease-in-out infinite;
}
@keyframes floatLogo {
  0%,
  100% {
    transform: translateY(0);
    box-shadow: 0 10px 25px rgba(255, 159, 10, 0.25);
  }
  50% {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(255, 159, 10, 0.35);
  }
}
.login-title-en {
  margin: 0 0 6px 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #1d1d1f;
  background: -webkit-linear-gradient(45deg, #1d1d1f, #4a4a4a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.badge-pro {
  background: linear-gradient(135deg, #ff9f0a, #ff7f00);
  -webkit-text-fill-color: #fff;
  color: #fff;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 6px;
  vertical-align: middle;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(255, 159, 10, 0.3);
  transform: translateY(-2px);
}
.login-subtitle-cn {
  margin: 0;
  font-family:
    "PingFang SC",
    -apple-system,
    sans-serif;
  font-size: 13px;
  color: #86868b;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
}
.filter-btn {
  background-color: transparent;
  color: #666;
  border: 1px solid transparent;
  padding: 8px 20px;
  border-radius: 24px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.filter-btn:hover {
  background-color: #f5f5f7;
  color: #1d1d1f;
}
.filter-btn.active {
  background-color: #fff8e1;
  color: #ff9f0a;
  border-color: rgba(255, 159, 10, 0.3);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(255, 159, 10, 0.2);
  transform: translateY(-1px);
}
.search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
#search-input {
  height: 42px;
  width: 280px;
  padding: 0 18px;
  border: 1px solid #d1d1d6;
  border-radius: 14px;
  font-size: 14px;
  background-color: #fff;
  color: #1d1d1f;
  transition: all 0.2s ease-out;
  outline: none;
}
#search-input:focus {
  border-color: #ff9f0a;
  background-color: #fff;
  box-shadow: 0 0 0 5px rgba(255, 159, 10, 0.15);
  width: 300px;
}
.count-badge {
  margin-left: 12px;
  font-size: 13px;
  padding: 4px 10px;
  background: #f2f2f7;
  border-radius: 8px;
  color: #86868b;
}
@media screen and (max-width: 1400px) {
  .grid-container {
    padding: 20px;
  }
  .paper-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 20px !important;
  }
  .login-box {
    transform: scale(0.9);
    margin-top: -20px;
  }
  .split-pane {
    height: calc(100vh - 130px) !important;
  }
  html {
    font-size: 14px;
  }
}
@media screen and (max-width: 1000px) {
  .split-pane {
    flex-direction: column !important;
  }
  .panel-left {
    width: 100% !important;
    height: 40% !important;
    border-right: none !important;
    border-bottom: 5px solid #eee;
  }
  .panel-right {
    width: 100% !important;
    height: 60% !important;
  }
  .brand-subtitle,
  .login-subtitle-cn {
    display: none !important;
  }
}
.icon-inline {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  transition: all 0.2s ease;
}
button:hover .icon-inline {
  transform: scale(1.1);
}
.search-icon-svg {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #86868b;
  z-index: 2;
  pointer-events: none;
}
.icon-inline {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
}
#float-menu button {
  display: flex !important;
  align-items: center;
  gap: 6px;
}
#custom-confirm-modal {
  z-index: 210000 !important;
}
#recharge-modal {
  z-index: 99999 !important;
}
#custom-confirm-modal.active {
  backdrop-filter: blur(8px);
}
.panel-right {
  min-width: 0 !important;
  width: 0 !important;
  flex: 1 !important;
}
.group-analysis-box,
.analysis-card {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
}
.analysis-table {
  width: 100% !important;
  table-layout: auto !important;
  word-break: break-word !important;
}
.analysis-table td,
.analysis-table th {
  white-space: normal !important;
}
.grid-container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.paper-grid,
.pagination-bar,
.grid-container > div {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
}
@media screen and (max-width: 768px) {
  .paper-grid,
  .pagination-bar,
  .grid-container > div {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.modal-header-modern {
  padding: 20px 25px 5px 25px;
}
.modal-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.mango-identity-bar {
  background: #fffdf5;
  border: 1px solid #ffe0b2;
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}
.mango-avatar-small {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #ffb340 0%, #ff8c00 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(255, 140, 0, 0.2);
}
.mango-info-row {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  overflow: hidden;
}
.mango-label-inline {
  font-size: 11px;
  color: #999;
  font-weight: 500;
  text-transform: uppercase;
}
.mango-email-inline {
  font-size: 13px;
  font-weight: 700;
  color: #1d1d1f;
  font-family: -apple-system, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mango-status-dot {
  font-size: 10px;
  color: #34c759;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(52, 199, 89, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
}
.dot-online {
  width: 6px;
  height: 6px;
  background-color: #34c759;
  border-radius: 50%;
  display: inline-block;
}
.invite-dashboard-pro {
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 16px;
  padding: 20px 0;
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.dash-item-p {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-val-p {
  font-size: 24px;
  font-weight: 800;
  color: #1d1d1f;
  line-height: 1.1;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
}
.text-danger-red {
  color: #d23f31 !important;
  text-shadow: 0 2px 10px rgba(210, 63, 49, 0.1);
}
.dash-lbl-p {
  font-size: 11px;
  color: #86868b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dash-line-p {
  width: 1px;
  height: 32px;
  background: #f0f0f0;
}
.invite-card-pro {
  background: #f9f9fb;
  border: 1px solid #e5e5ea;
  border-radius: 18px;
  padding: 25px;
  text-align: center;
}
.invite-header-p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #555;
  margin-bottom: 18px;
}
.icon-box-p {
  color: #ff9f0a;
  display: flex;
  align-items: center;
}
.code-box-pro {
  background: #ffffff;
  border: 2px dashed #ffb74d;
  border-radius: 12px;
  padding: 16px 0;
  font-family: "SF Mono", "Roboto Mono", monospace;
  font-size: 28px;
  font-weight: 800;
  color: #1d1d1f;
  letter-spacing: 3px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(255, 159, 10, 0.05);
}
.invite-desc-p {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 24px;
}
.text-highlight-p {
  color: #d23f31;
  font-weight: 800;
  font-size: 15px;
}
.btn-copy-pro {
  background: #1d1d1f;
  color: #fff;
  border: none;
  width: 100%;
  height: 44px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.btn-copy-pro:hover {
  background: #333;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.btn-copy-pro:active {
  transform: scale(0.98);
}
.login-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 0 5px;
}
.meta-link {
  font-size: 14px;
  color: #86868b;
  text-decoration: none;
  transition: all 0.2s;
  font-weight: 500;
}
.meta-link:hover {
  color: #1d1d1f;
}
.meta-link.highlight {
  color: #ff9f0a;
  font-weight: 600;
}
.meta-link.highlight:hover {
  color: #d48405;
  text-decoration: underline;
}
.login-footer-simple {
  margin-top: 40px;
  text-align: center;
  border-top: 1px solid #f5f5f7;
  padding-top: 20px;
}
.login-footer-simple button {
  background: transparent;
  border: none;
  font-size: 12px;
  color: #999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 auto;
  transition: color 0.2s;
}
.login-footer-simple button:hover {
  color: #ff9f0a;
}
@media screen and (max-width: 1000px) {
  .split-pane {
    flex-direction: column !important;
  }
  .panel-left {
    width: 100% !important;
    height: 40% !important;
    border-right: none !important;
    border-bottom: 5px solid #eee;
  }
  .panel-right {
    width: 100% !important;
    height: 60% !important;
  }
}
.panel-left {
  background: #ffffff !important;
  border-right: 5px solid #e5e5ea;
  padding: 40px;
  user-select: text;
  width: 50%;
  background-image: none !important;
}
.panel-right {
  background: #ffffff !important;
  padding: 0;
  width: 50%;
}
/* ✅ 正确写法：拆分成两段 */
.group-analysis-box,
.analysis-card,
.expl-box,
.analysis-table {
  word-wrap: break-word !important;
  word-break: break-word !important;
  white-space: normal !important;
  max-width: 100% !important;
  width: auto !important;
}

/* 把图片样式单独拿出来 */
.group-analysis-box img,
.analysis-card img,
.expl-box img,
.analysis-table img {
  max-width: 100% !important;
  height: auto !important;
}


html,
body {
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
  position: fixed;
  top: 0;
  left: 0;
}
#exam-view,
#dashboard-view,
.view.active {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 60px;
}

html,
body {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}


html,
body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
  background-color: #f5f5f7 !important;
}
.dash-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  margin-top: 0 !important;
  z-index: 9999 !important;
}
#dashboard-view {
  margin-top: 0 !important;
  padding-top: 75px !important;
  position: relative !important;
  top: 0 !important;
}
.toolbar-container {
  margin-top: 0 !important;
  padding-top: 30px !important;
}
.exam-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  margin-top: 0 !important;
  z-index: 9999 !important;
}
#exam-view {
  margin-top: 0 !important;
  padding-top: 64px !important;
  position: relative !important;
  top: 0 !important;
}
input::-ms-reveal,
input::-ms-clear {
  display: none !important;
}
input::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  position: absolute;
  right: 0;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #fafafa inset !important;
  -webkit-text-fill-color: #333 !important;
  transition: background-color 5000s ease-in-out 0s;
}
.pwd-toggle-btn {
  cursor: pointer;
  pointer-events: auto !important;
  transition: color 0.2s;
}
.pwd-toggle-btn:hover {
  color: #ff8c00;
}

/* =================================================================
   📱 芒果登录页 - V15 宏大画框版 (Grand & Refined)
   目标：底板整体变大(宽+长)，但输入框保持V14的精致小巧
   ================================================================= */

@media screen and (max-width: 480px) {
  /* 1. 登录卡片：整体放大一圈！ */
  .login-box {
    /* ✅ 宽度加大：从 94% 增加到 96%，更宽阔 */
    width: 110% !important;
    max-width: none !important;

    /* ✅ 长度(高度)加大：上下留白从 55px 增加到 70px！
           这会让卡片看起来非常修长、厚实、大气 */
    padding: 50px 20px !important;

    /* 因为卡片变大了，稍微往上提一点，保持视觉平衡 */
    margin-top: 12% !important;

    /* 圆角稍微加大一点点，配合大尺寸 */
    border-radius: 28px !important;
  }

  /* 2. 头部 Logo 区域 */
  .login-header-modern {
    margin-bottom: 40px !important; /* 增加头部留白 */
  }
  .login-logo-box {
    width: 100px !important;
    height: 100px !important;
    font-size: 34px !important;
    margin-bottom: 12px !important;
  }
  .login-title-en {
    font-size: 20px !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
  }
  .login-subtitle-cn {
    display: block !important;
    font-size: 13px !important;
    color: #999 !important;
    white-space: nowrap !important;
    transform: scale(0.95);
  }

  /* 3. 输入框：保持 V14 的“精致窄版” */
  .input-group {
    /* ✅ 保持 82% 宽度，对比大底板，显得非常精致 */
    width: 82% !important;

    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 25px !important; /* 间距微调大一点 */
  }

  .input-group input {
    width: 100% !important;
    padding: 15px 15px 15px 45px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
  }
  .input-group .icon-svg {
    width: 22px !important;
    height: 22px !important;
    left: 12px !important;
  }

  /* 4. 登录按钮：保持精致窄版 */
  .btn-main {
    /* ✅ 保持 82% 宽度 */
    width: 82% !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;

    padding: 16px 0 !important;
    font-size: 18px !important;
    margin-top: 30px !important; /* 离上面远一点，呼吸感更强 */
    border-radius: 50px !important;
    box-shadow: 0 8px 25px rgba(255, 140, 0, 0.3) !important;
  }

  /* 5. 底部链接 */
  .login-meta-row {
    width: 85% !important;
    margin: 35px auto 0 auto !important; /* 拉大距离 */
    display: flex !important;
    justify-content: space-between !important;
    padding: 0 2px !important;
  }
  .meta-link {
    font-size: 13px !important;
    color: #888 !important;
  }

  /* 6. 客服 */
  .login-footer-simple {
    margin-top: 60px !important; /* 底部巨大留白 */
    padding-top: 20px !important;
  }
}


@media screen and (max-width: 480px) {
  /* --- 1. 顶部导航栏：防挤压 --- */
  .dash-nav {
    height: 60px !important; /* 高度适中 */
    padding: 0 15px !important; /* 两边留点缝 */
    justify-content: space-between !important;
  }

  .vip-badge {
    font-size: 18px !important; /* 稍微缩小 */
  }

  .nav-btn-group {
    gap: 6px !important; /* 间距缩小 */
  }


  .toolbar-container {
    margin-top: 20px !important;
    padding: 0 20px !important;
    width: 100% !important;
  }

  /* 搜索框：占满屏幕 */
  #search-input {
    width: 100% !important;
    height: 40px !important;
  }

  /* 筛选按钮：允许换行，不再死撑 */
  .filter-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 15px !important;
  }
  .filter-btn {
    padding: 6px 15px !important;
    font-size: 13px !important;
  }

  /* --- 3. 核心修复：题库网格 (解决乱麻的关键) --- */
  .grid-container {
    padding: 10px 15px !important; /* 减小外边距 */
  }

  .paper-grid {
    /* 🔥 核弹级修复：强制变成 1 列！(之前是多列挤在一起) */
    grid-template-columns: 1fr !important;

    gap: 20px !important; /* 卡片上下间距 */
    padding-bottom: 80px !important;
  }

  /* --- 4. 卡片样式：变大变清晰 --- */
  .card {
    height: auto !important; /* 高度自适应 */
    min-height: 180px !important; /* 保证最小高度 */
    margin: 0 !important;
  }

  .card-body {
    padding: 20px 15px !important;
  }

  /* 标题文字放大，方便手指点 */
  .card-title-en {
    font-size: 20px !important;
    line-height: 1.4 !important;
    -webkit-line-clamp: 2 !important; /* 最多显示2行 */
  }
  .card-title-cn {
    font-size: 14px !important;
    margin-top: 8px !important;
  }

  /* 底部标签栏 */
  .card-footer {
    padding: 0 15px !important;
    height: 45px !important;
  }

  /* 标签文字调小，防止换行 */
  .passage-badge {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }
  .tag-text {
    font-size: 10px !important;
    max-width: 100px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* =================================================================
   🔓 芒果 V11 - 全设备触控解锁补丁 (Universal Scroll Unlock)
   目标：覆盖手机 + 所有 iPad！主页自由滑动，做题页保持锁定
   ================================================================= */

/* ✅ 范围扩大到 1200px，包含 iPad Pro/Air/Mini */
@media screen and (max-width: 1200px) {
  /* 1. 主页/登录页：彻底解锁，允许自由滚动 */
  html,
  body {
    position: static !important; /* 恢复自然定位 */
    overflow-y: auto !important; /* 允许垂直滚动 */
    height: auto !important; /* 高度由内容撑开 */
    -webkit-overflow-scrolling: touch; /* iOS 丝滑滚动 */
  }

  /* 2. 主页容器：跟随内容长高 */
  #dashboard-view {
    position: relative !important;
    height: auto !important;
    overflow-y: visible !important;
    /* ✅ 关键：给底部留出足够空间，防止翻页按钮被 iPad 黑条遮挡 */
    padding-bottom: 120px !important;
  }

  /* 3. 考试界面：保持“App 专注模式” (单独锁定) */
  /* 只有在做题时，我们才锁住屏幕，防止左右乱晃 */
  #exam-view.active {
    position: fixed !important; /* 强制固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* 占满一屏 */
    overflow: hidden !important; /* 禁止外层滚动 */
    z-index: 9999;
    background: #fff;
  }

  /* 4. 考试页内部：允许局部滚动 */
  .panel-left,
  .panel-right {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 5. 针对 iPad 的特殊优化：防止登录框太宽 */
  .login-box {
    /* 在 iPad 上限制一下最大宽度，不然太傻大 */
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =================================================================
   ✍️ 芒果写作模块专属样式 (Writing Module)
   把这段代码放在 style.css 最下面
   ================================================================= */

/* 1. 写作模式下的布局调整 */
/* 给左侧面板加个底色，区分题目区 */
.mode-writing .panel-left {
  background-color: #f5f7fa !important; /* 淡淡的灰蓝色背景 */
  background-image: none !important; /* 去掉水印 */
  padding: 30px !important;
}

/* 右侧面板清空背景，专注写作 */
.mode-writing .panel-right {
  background-color: #ffffff !important;
  padding: 0 !important; /* 去掉内边距，让输入框贴边 */
  display: flex;
  flex-direction: column;
}

/* 2. 左侧题目卡片 (Prompt Card) */
.writing-task-card {
  background: #fff;
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.writing-task-title {
  font-size: 18px;
  font-weight: 800;
  color: #1d1d1f;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 2px solid #ff9f0a; /* 芒果橙下划线 */
  display: inline-block;
}

.writing-content-text {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* 3. 右侧写作编辑区 (The Editor) */
.writing-workspace {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

/* 这里的 textarea 是主角 */
.writing-textarea {
  flex: 1; /* 占满剩下的高度 */
  width: 100%;
  border: none;
  outline: none;
  resize: none; /* 禁止用户拖动大小 */
  padding: 40px; /* 大留白，像A4纸 */
  font-size: 18px; /* 字号大一点，看着舒服 */
  line-height: 1.8;
  color: #1d1d1f;

  /* ✨ 关键：使用衬线体，模仿真实书写/打印的感觉 */
  font-family: "Times New Roman", "Georgia", serif;
  background: #fff;
}

/* 获得焦点时，稍微给一点点内发光，但不刺眼 */
.writing-textarea:focus {
  background: #fff;
}

/* 4. 底部数据栏 (Status Bar) */
.writing-stat-bar {
  height: 50px;
  background: #f5f5f7;
  border-top: 1px solid #d1d1d6;
  display: flex;
  align-items: center;
  justify-content: space-between; /* 两端对齐 */
  padding: 0 30px;
  font-family: -apple-system, sans-serif;
  font-size: 13px;
  color: #666;
  font-weight: 600;
}

.word-count-badge {
  background: #e5e5ea;
  padding: 4px 10px;
  border-radius: 6px;
  color: #1d1d1f;
}

/* 当字数达标时变绿 (配合JS使用) */
.word-count-badge.good {
  background: #e6f9e9;
  color: #34c759;
}

/* ==========================================================
   STYLE.CSS 底部追加：门户风格重构 (Refined Portal Style)
   ========================================================== */

/* 1. 导航栏：变黑、变窄、变高级 */
.dash-nav {
  background: #1d1d1f !important; /* 苹果黑，高端专业 */
  height: 56px !important; /* 高度压缩，不再臃肿 */
  border-bottom: 1px solid #333 !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* 2. 核心容器：把所有东西都收拢在中间 1200px */
.nav-center-wrapper,
.toolbar-container,
.grid-container,
.paper-grid,
.pagination-bar {
  width: 100% !important;
  max-width: 1200px !important; /* 关键：锁定最大宽度 */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

/* 3. 导航栏内部布局 */
.nav-center-wrapper {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 左侧 Logo */
.brand-section {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-text-pro {
  font-size: 18px;
  font-weight: 700;
  color: #fff; /* 白色文字 */
  font-family: -apple-system, sans-serif;
  letter-spacing: 0.5px;
}
.pro-tag {
  background: #ff9f0a; /* 芒果橙 */
  color: #000;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 4px;
  vertical-align: top;
  margin-left: 2px;
}

/* 中间菜单：去掉背景框，只留文字和图标 */
.nav-menu-list {
  display: flex;
  align-items: center;
  gap: 20px;
}
.menu-item-link {
  background: transparent;
  border: none;
  color: #a1a1a6; /* 浅灰色 */
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  transition: all 0.2s;
  border-radius: 6px;
}
.menu-item-link svg {
  width: 16px;
  height: 16px;
  opacity: 0.8;
}
/* 鼠标放上去变白 */
.menu-item-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
/* 会员中心高亮 */
.menu-item-link.highlight {
  color: #ff9f0a; /* 芒果橙文字 */
}
.menu-item-link.highlight:hover {
  color: #fff;
  background: #ff9f0a;
}

/* 右侧工具栏 */
.nav-tools-right {
  display: flex;
  align-items: center;
  gap: 15px;
}
.zoom-mini-box {
  display: flex;
  align-items: center;
  background: #333; /* 深色背景 */
  border-radius: 4px;
  padding: 2px;
}
.zoom-mini-box button {
  background: transparent;
  border: none;
  color: #fff;
  width: 24px;
  cursor: pointer;
}
.zoom-mini-box span {
  color: #ccc;
  font-size: 12px;
  min-width: 36px;
  text-align: center;
}
.divider-v {
  width: 1px;
  height: 16px;
  background: #444;
}
.logout-link {
  background: transparent;
  border: 1px solid #444;
  color: #ccc;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.logout-link:hover {
  border-color: #ff3b30;
  color: #ff3b30;
}

/* 4. 修正主界面位置 */
#dashboard-view {
  padding-top: 56px !important; /* 配合导航栏新高度 */
  background: #f5f5f7 !important;
}

/* 5. 搜索栏和筛选区：也必须居中对齐 */
.toolbar-container {
  margin-top: 30px !important;
  display: flex !important;
  flex-direction: row !important; /* 横向排列 */
  justify-content: space-between !important;
  align-items: center !important;
  gap: 0 !important;
}

/* 搜索框美化 */
.search-wrapper {
  flex-shrink: 0;
}
#search-input {
  background: #fff;
  border: 1px solid #e5e5ea;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  text-align: left !important; /* 文字左对齐 */
  padding-left: 36px !important;
}

/* 筛选按钮组：变小、紧凑 */
.filter-bar {
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
  width: auto !important; /* 不要占满 */
}
.filter-btn {
  padding: 6px 16px !important;
  font-size: 13px !important;
  background: #fff !important;
  border: 1px solid #e5e5ea !important;
}
.filter-btn.active {
  background: #1d1d1f !important;
  color: #fff !important;
  border-color: #1d1d1f !important;
}
/* 预测题下拉框优化 */
#prediction-select {
  height: 34px !important;
  font-size: 13px !important;
  border-width: 1px !important;
}

/* 6. 卡片网格微调：对齐标题 */
.card-title-en {
  text-align: left !important; /* 标题左对齐，更像门户列表 */
  font-size: 18px !important;
}
.card-body {
  align-items: flex-start !important; /* 内容左对齐 */
  padding: 0 24px !important;
}
.title-divider {
  margin: 12px 0 !important; /* 分割线左对齐 */
}
/* ==========================================================
   STYLE.CSS 底部追加：芒果风·白金版 (Mango Platinum Style)
   ========================================================== */

/* 1. 导航栏重置：白底、阴影、高度适中 */
.dash-nav {
  background: #ffffff !important; /* 回归纯白背景 */
  height: 70px !important; /* 增加高度，容纳两层内容 */
  border-bottom: 1px solid #ffefe0 !important; /* 淡淡的橙色分割线 */
  box-shadow: 0 4px 12px rgba(255, 159, 10, 0.05) !important;
}

#dashboard-view {
  padding-top: 70px !important; /* 内容下移 */
}

/* 2. 品牌文字修复 */
.brand-text-pro {
  color: #1d1d1f !important; /* 深灰色，清晰可见 */
  font-size: 20px !important;
  letter-spacing: -0.5px;
}

/* 3. 中间的新增导航 (首页/阅读/听力...) */
.nav-category-tabs {
  display: flex;
  gap: 10px;
  height: 100%;
}
.nav-tab-btn {
  background: transparent;
  border: none;
  height: 100%;
  padding: 0 15px;
  font-size: 15px;
  color: #666;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 3px solid transparent; /* 预留底部线条 */
  transition: all 0.2s;
  font-family: -apple-system, sans-serif;
}
.nav-tab-btn:hover {
  color: #ff9f0a;
}
.nav-tab-btn.active {
  color: #ff9f0a;
  border-bottom-color: #ff9f0a; /* 选中时底部出现橙条 */
}

/* 4. 右侧工具按钮颜色修复 */
.menu-item-link {
  color: #555 !important; /* 深灰文字，不再是浅灰 */
}
.menu-item-link svg {
  color: #555 !important;
}
.menu-item-link:hover {
  background-color: #fff8e1 !important; /* 淡黄色背景 */
  color: #ff9f0a !important; /* 橙色文字 */
}
.menu-item-link:hover svg {
  color: #ff9f0a !important;
}

/* 会员中心按钮特权色 */
.menu-item-link.highlight {
  color: #ff9f0a !important;
}
.menu-item-link.highlight svg {
  color: #ff9f0a !important;
}
.menu-item-link.highlight:hover {
  background-color: #ff9f0a !important;
  color: #fff !important;
}
.menu-item-link.highlight:hover svg {
  color: #fff !important;
}

/* 退出按钮 */
.logout-link {
  border: 1px solid #e5e5ea !important;
  color: #666 !important;
}
.logout-link:hover {
  background-color: #fff0f0 !important; /* 淡红背景 */
  color: #d23f31 !important;
  border-color: #d23f31 !important;
}

/* 5. 工具栏分层布局 (核心修复拥挤问题) */
.toolbar-container {
  display: block !important; /* 垂直排列 */
  margin-top: 20px !important;
  padding-bottom: 10px !important;
}

/* 第一层：筛选按钮 */
.toolbar-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px; /* 上下留白 */
}
.filter-group {
  display: flex;
  gap: 12px; /* 按钮间距 */
}

/* 按钮风格修复：芒果风 */
.filter-btn {
  border: 1px solid #e5e5ea !important;
  background: #fff !important;
  color: #666 !important;
  padding: 8px 20px !important;
  font-size: 14px !important;
}
/* 选中状态：淡橙色背景 + 深橙色字 + 橙色边框 */
.filter-btn.active {
  background-color: #fff8e1 !important;
  color: #ff9f0a !important;
  border-color: #ff9f0a !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(255, 159, 10, 0.15) !important;
}

/* 第二层：公告与搜索 */
.toolbar-row-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

/* 公告栏美化 */
#notice-board {
  margin: 0 !important; /* 去掉以前的外边距 */
  flex: 1; /* 占据剩余空间 */
  background: #fffbf0 !important;
  border: 1px solid #ffe0b2 !important;
  color: #d48405 !important;
  border-radius: 8px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center;
  padding: 0 15px !important;
}
.notice-icon-box {
  display: flex;
  align-items: center;
  margin-right: 10px;
}
.notice-text-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 20px;
}

/* 搜索框美化 */
.search-wrapper {
  width: auto !important;
  flex-shrink: 0;
}
#search-input {
  border-radius: 8px !important;
  border-color: #e5e5ea !important;
  background: #fff !important;
  height: 42px !important;
}
#search-input:focus {
  border-color: #ff9f0a !important;
  box-shadow: 0 0 0 3px rgba(255, 159, 10, 0.1) !important;
}

/* 修复下拉框 */
#prediction-select {
  height: 38px !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  font-size: 14px !important;
}

/* =========================================
   🚀 芒果 V2.0 - 核心架构升级 (Added to bottom)
   ========================================= */

/* 1. 字体与基础修复 */
body,
button,
input,
select,
textarea {
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
.card-title-en,
.article-title {
  font-family: "New York", "Times New Roman", Times, serif !important;
  letter-spacing: -0.5px;
}

/* ================= 修改 style.css 底部 ================= */

/* 2. 工具栏强制布局 (修复版 - 移除 display 的 !important，让 JS 能控制) */
.toolbar-container {
  /* 🔥 关键修改：去掉了 !important */
  display: flex;

  /* 下面这些保留 !important 没关系，因为 JS 不改它们 */
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 20px auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

/* 确保它在隐藏时真的是隐藏的 (双重保险) */
.toolbar-container[style*="display: none"] {
  display: none !important;
}

/* 3. 多级下拉菜单核心样式 */
.nav-dropdown-wrapper {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.nav-drop-trigger {
  background: transparent;
  border: none;
  height: 100%;
  padding: 0 15px;
  font-size: 15px;
  color: #666;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.nav-dropdown-wrapper:hover .nav-drop-trigger {
  color: #ff9f0a;
}

/* 一级菜单盒子 */
.dropdown-menu-box {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  min-width: 180px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  padding: 6px 0;
  z-index: 2000;
  border: 1px solid #f0f0f0;
  animation: slideUpFade 0.2s ease-out;
}
.nav-dropdown-wrapper:hover .dropdown-menu-box {
  display: block;
}

/* 菜单项 */
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  border: none;
  background: transparent;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.dropdown-item:hover {
  background: #fff8e1;
  color: #ff9f0a;
}
.dropdown-item svg {
  width: 16px;
  height: 16px;
  color: #999;
}
.dropdown-item:hover svg {
  color: #ff9f0a;
}

/* 二级菜单逻辑 */
.dropdown-item-group {
  position: relative;
  width: 100%;
}
.arrow-right {
  margin-left: auto;
  font-size: 12px;
  color: #ccc;
}
.submenu-box {
  display: none;
  position: absolute;
  left: 98%;
  top: -6px;
  background: #fff;
  min-width: 160px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  padding: 6px 0;
  border: 1px solid #f0f0f0;
  z-index: 2001;
}
.dropdown-item-group:hover .submenu-box {
  display: block;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* 4. 白板占位符样式 */
#module-placeholder {
  padding: 80px 20px;
  text-align: center;
  color: #888;
  max-width: 600px;
  margin: 0 auto;
}
#module-placeholder h2 {
  color: #333;
  font-weight: 700;
  margin-bottom: 10px;
}

/* =========================================
   🎨 芒果 UI V3.1 - 终极修复版 (Final Fix)
   ========================================= */

/* 1. 修复顶部大白边 & 布局拥挤 */
#dashboard-view {
  padding-top: 80px !important; /* 给导航栏留出固定空间 */
}

.toolbar-container {
  display: flex !important;
  justify-content: space-between !important; /* 左右两端对齐，撑开距离 */
  align-items: center !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 20px auto 10px auto !important; /* 上下留白适中 */
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

/* 筛选按钮组：稍微拉开点距离 */
.filter-group {
  display: flex !important;
  gap: 12px !important;
}

.filter-btn {
  padding: 8px 20px !important;
  font-size: 14px !important;
  border-radius: 20px !important;
  background: #fff !important;
  border: 1px solid #e5e5ea !important;
  color: #666 !important;
  height: auto !important; /* 防止被拉伸 */
}
.filter-btn.active {
  background: #fff8e1 !important;
  color: #ff9f0a !important;
  border-color: #ff9f0a !important;
  font-weight: 700 !important;
}

/* 搜索框组：强制靠右 */
.toolbar-right-group {
  margin-left: auto !important;
}
.search-wrapper {
  width: 260px !important;
}
.search-wrapper input {
  background: #fff !important;
  height: 40px !important;
  border-radius: 20px !important;
}

/* 2. 修复“清除记录”按钮变形 & 标题栏布局 */
.grid-container {
  padding-top: 10px !important; /* 减少和上面的距离 */
}

.status-header-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 25px !important; /* 和卡片的距离 */
  padding-bottom: 15px !important;
  border-bottom: 1px solid #e5e5ea !important;
  width: 100% !important;
}

.status-left-group {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
}

/* 大标题 */
.grid-section-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #1d1d1f !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* 数量胶囊 */
.count-pill {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #86868b !important;
  background: #f5f5f7 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: none !important;
}

/* 修复那个巨大的清除按钮 */
.btn-clear-history {
  display: inline-flex !important; /* 关键：防止变成块级元素撑满 */
  align-items: center !important;
  justify-content: center !important;
  width: auto !important; /* 宽度自动 */
  height: 36px !important; /* 固定高度，防止太高 */
  background: #fff !important;
  border: 1px solid #e5e5ea !important;
  color: #666 !important;
  font-size: 13px !important;
  padding: 0 16px !important;
  border-radius: 18px !important; /* 胶囊圆角 */
  cursor: pointer !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s ease !important;
}

.btn-clear-history svg {
  width: 14px !important;
  height: 14px !important;
  margin-right: 6px !important;
  stroke: currentColor !important;
}

.btn-clear-history:hover {
  border-color: #ff3b30 !important;
  color: #ff3b30 !important;
  background: #fff0f0 !important;
}
/* =========================================
   🃏 芒果 Pro 卡片 V3.0 (Rich Data Card)
   ========================================= */

/* 1. 卡片容器：更紧凑，有边框感 */
.card-pro {
  background: #fff;
  border: 1px solid #e5e5ea;
  border-radius: 16px;
  padding: 20px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  height: 240px; /* 固定高度，确保整齐 */
  overflow: hidden;
}

.card-pro:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-color: #ff9f0a;
}

/* 锁定状态 */
.card-pro.locked {
  background: #f9f9f9;
  opacity: 0.8;
}
.card-pro.done {
  background: #fafffb;
  border-color: #34c759;
}

/* 2. 标题区 */
.card-header-pro {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}
.title-group {
  flex: 1;
  padding-right: 10px;
}
.card-title-en {
  font-family: "New York", serif; /* 高级衬线体 */
  font-size: 18px;
  font-weight: 700;
  color: #1d1d1f;
  line-height: 1.3;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-title-cn {
  font-size: 13px;
  color: #86868b;
  font-weight: 400;
}

/* 状态标 */
.status-done {
  font-size: 12px;
  color: #34c759;
  background: #e6f9e9;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  white-space: nowrap;
}
.status-lock {
  color: #999;
}

/* 3. 信息密度区 (核心填充部分) */
.card-info-grid {
  flex: 1; /* 撑开中间部分 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  padding: 10px 0;
  border-top: 1px dashed #f0f0f0;
  border-bottom: 1px dashed #f0f0f0;
  margin-bottom: 15px;
}

.info-row {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #555;
  gap: 6px;
}
.info-label {
  color: #999;
}
.info-val-date {
  font-weight: 700;
  color: #1d1d1f;
  font-family: monospace;
}
.info-val-count {
  color: #ff3b30;
  background: #fff0f0;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 10px;
}

/* 题型标签 */
.type-tag-list {
  display: flex;
  gap: 4px;
}
.q-type-tag {
  background: #f0f0f5;
  color: #666;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}

/* 4. 底部栏 */
.card-footer-pro {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.passage-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}
.tag-p1 {
  background: #e0f2fe;
  color: #007aff;
}
.tag-p2 {
  background: #f3e8ff;
  color: #af52de;
}
.tag-p3 {
  background: #fee2e2;
  color: #d23f31;
}

.time-pill {
  font-size: 12px;
  color: #999;
}

/* 5. 装饰背景水印 (让空白不单调) */
.card-bg-icon {
  position: absolute;
  bottom: -10px;
  right: -10px;
  font-size: 80px;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.02);
  font-family: serif;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   🚑 芒果紧急修复补丁 (Fix for V2.0 Header & Layout)
   请粘贴到 style.css 的最末尾
   ============================================================ */

/* 1. 顶部栏强制修正：左中右三点一线 */
.exam-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 64px !important;
  padding: 0 20px !important;
  background: #fff !important;
  position: relative !important; /* 让中间的绝对定位生效 */
}

/* 2. 左侧 (返回按钮) */
.header-left-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* 3. 中间 (漂亮的芒果胶囊 - 绝对居中) */
.header-center-section {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 4. 右侧 (倒计时和工具) */
.header-right-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
}

/* 5. 芒果胶囊的核心样式 (复原你图片里的样子) */
.exam-brand-capsule {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 8px 5px 5px !important;
  background: #fff8e1 !important; /* 淡黄色背景 */
  border: 1px solid #ffe082 !important; /* 深黄边框 */
  border-radius: 40px !important; /* 圆润 */
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2) !important;
}

.capsule-icon-box {
  width: 30px !important;
  height: 30px !important;
  background: #fff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.capsule-main-text {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #d84315 !important; /* 深橙色文字 */
  font-family: -apple-system, sans-serif !important;
  letter-spacing: 0.5px !important;
}

.capsule-tag {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #fff !important;
  background: #ff9800 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  letter-spacing: 0.5px !important;
}

/* 6. 修复解析框不弹出的隐患 (强制显示) */
#analysis-section {
  display: none; /* 默认隐藏 */
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px dashed #ccc;
  padding-bottom: 100px; /* 底部留白，防止被遮挡 */
}

/* ================= 3. 终极修复：消除顶部大白条 ================= */
#exam-view {
  padding-top: 0 !important; /* 关键！去掉多余的顶部留白 */
  margin-top: 0 !important;
  height: 100vh !important; /* 强制占满全屏高度 */
  overflow: hidden !important; /* 禁止整个页面滚动，只让分栏滚动 */
  display: flex !important;
  flex-direction: column !important; /* 垂直排列：上-中-下 */
}

/* 确保顶部栏不悬浮，而是老老实实待在最上面 */
.exam-header {
  position: relative !important;
  flex-shrink: 0 !important; /* 禁止被压缩 */
  top: 0 !important;
  z-index: 1000 !important;
}

/* 确保中间答题区自动填满剩余空间 */
.split-pane {
  flex: 1 !important; /* 自动占据剩下的高度 */
  height: auto !important; /* 取消固定高度 */
  overflow: hidden !important;
  margin-top: 0 !important;
}

/* 确保左侧和右侧面板自己管好自己的滚动 */
.panel-left,
.panel-right {
  height: 100% !important;
  overflow-y: auto !important;
  padding-bottom: 80px !important; /* 底部留点空间给解析 */
}


.view {
  display: none !important;
  height: 100vh; /* 确保占满屏幕 */
  width: 100vw;
  overflow: hidden;
}

/* 2. 只显示带有 active 类的视图 */
.view.active {
  display: flex !important;
  flex-direction: column;
  position: fixed !important; /* 锁死在屏幕上，防止被挤跑 */
  top: 0;
  left: 0;
  z-index: 100;
  background: #fff;
}

/* 3. 特别修复主页 (Dashboard) 的显示模式 */
#dashboard-view.active {
  display: block !important; /* 主页需要 block 才能滚动 */
  overflow-y: auto !important; /* 允许主页滚动 */
  position: absolute !important; /* 恢复自然流 */
  z-index: 50;
  padding-bottom: 0 !important;
}

/* 4. 特别修复考试页 (Exam) 的布局 */
#exam-view.active {
  height: 100% !important;
  overflow: hidden !important; /* 考试页外层不准滚，只准内部滚 */
}

/* 5. 确保左右分栏高度正确 */
.split-pane {
  flex: 1;
  height: 0 !important; /* 关键：让 flex 自动计算高度 */
  min-height: 0 !important;
}


.view {
  display: none !important;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: fixed; /* 锁死位置 */
  top: 0;
  left: 0;
  background: #f5f5f7;
  z-index: 10;
}

.view.active {
  display: flex !important; /* 激活时才显示，且用 flex 布局 */
  flex-direction: column;
  z-index: 100; /* 提高层级，确保覆盖在最上层 */
}

#dashboard-view.active {
  display: block !important;
  overflow-y: auto !important; /* 允许垂直滚动 */
  background: #f5f5f7;
  z-index: 50;
}

#exam-view {
  display: none !important; /* 默认必须隐藏！！！ */
}

#exam-view.active {
  display: flex !important; /* 激活时显示 */
  padding-top: 0 !important; /* 消除大白条 */
  margin-top: 0 !important;
  height: 100vh !important;
  overflow: hidden !important; /* 外层禁止滚动 */
  background: #fff;
}

/* 5. 考试页内部布局修正 */
#exam-view.active .exam-header {
  position: relative !important;
  flex-shrink: 0;
  z-index: 200;
}

#exam-view.active .split-pane {
  flex: 1;
  height: 0 !important; /* 让 Flex 自动计算高度 */
  min-height: 0;
  margin-top: 0 !important;
  display: flex;
}

#exam-view.active .panel-left,
#exam-view.active .panel-right {
  height: 100% !important;
  overflow-y: auto !important;
  padding-bottom: 80px !important; /* 底部留白给解析 */
}

/* 6. 底部工具栏防遮挡修正 */
.footer-nav {
  position: relative !important;
  z-index: 300 !important;
  background: #fff !important;
  flex-shrink: 0;
}

.exam-brand-capsule {
  background: #ffffff !important; /* 纯白背景 */
  border: 1px solid #e5e5ea !important; /* 极简灰边框 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; /* 悬浮感阴影 */
  padding: 5px 6px !important; /* 精致内衬 */
  border-radius: 40px !important;
}

/* 2. 胶囊内的图标盒子：加一点橙色光晕 */
.capsule-icon-box {
  background: #fff !important;
  border: 1px solid #f5f5f7 !important;
  box-shadow: 0 2px 8px rgba(255, 159, 10, 0.15) !important; /* 橙色微光 */
  width: 28px !important;
  height: 28px !important;
}

/* 3. 文字颜色优化 */
.capsule-main-text {
  color: #1d1d1f !important; /* 苹果深灰，清晰高级 */
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* 4. 标签颜色优化 */
.capsule-tag {
  background: #fff8e1 !important; /* 极淡的橙底 */
  color: #ff9f0a !important; /* 鲜亮的橙字 */
  border: 1px solid rgba(255, 159, 10, 0.2) !important;
}

/* 5. 全屏按钮样式 (新增) */
.btn-fullscreen {
  background: transparent;
  border: none;
  color: #555;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.btn-fullscreen:hover {
  background: #f5f5f7;
  color: #000;
  transform: scale(1.1);
}

/* --- 阅读文章区域优化 (Reading Panel) --- */
.article-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #e5e5ea;
}

.font-control-group {
  display: flex;
  gap: 8px;
  background: #f5f5f7;
  padding: 4px;
  border-radius: 8px;
}

.btn-font-size {
  cursor: pointer;
  padding: 4px 12px;
  border: 1px solid transparent;
  background: #fff;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
}

.btn-font-size:hover {
  color: #ff9f0a;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.btn-font-size:active {
  transform: scale(0.95);
  background: #f0f0f0;
}

/* --- 全屏加载动画 --- */
#global-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.mango-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #ff9f0a; /* 芒果橙 */
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}
.loading-text {
  font-family: -apple-system, sans-serif;
  color: #555;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1px;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.dash-nav {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9000;
  height: 72px !important;
  background: rgba(255, 255, 255, 0.95) !important; /* 纯净白底 */
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  justify-content: center !important; /* 居中 */
}

.nav-layout-container {
  width: 100% !important;
  max-width: 1400px !important; /* 核心：与下方卡片对齐 */
  padding: 0 40px !important; /* 核心：与下方卡片内边距一致 */
  box-sizing: border-box !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* 2. 左侧 Logo 修复 */
.nav-brand-area {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  width: 200px;
}
.brand-icon-box {
  width: 38px;
  height: 38px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(255, 159, 10, 0.15); /* 芒果微光 */
  border: 1px solid rgba(255, 159, 10, 0.1);
}
.brand-text-main {
  font-family: -apple-system, sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: #1d1d1f;
  letter-spacing: -0.5px;
}

/* 3. 中间导航：芒果风 + 修复锁死 */
.nav-center-menu {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-capsule {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 12px; /* 浅灰底槽 */
}

/* 4. 下拉菜单修复：解决消失点不到的问题 */
.nav-dropdown-wrapper {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
/* 关键修复：增加隐形桥梁，填补鼠标移动时的空隙 */
.nav-dropdown-wrapper::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px;
}

.dropdown-menu-mango {
  display: none; /* JS/Hover 控制 */
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 6px;
  min-width: 160px;
  z-index: 9999;
}
/* 鼠标放上去显示 */
.nav-dropdown-wrapper:hover .dropdown-menu-mango {
  display: block;
}

.mango-drop-item {
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  cursor: pointer;
  transition: all 0.2s;
}
.mango-drop-item:hover {
  background: #fff8e1;
  color: #ff9800; /* 悬停变淡芒果色 */
}

/* 5. 右侧工具栏：对齐修复 */
.nav-tools-right {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 200px;
  justify-content: flex-end;
}
/* 优化后的会员中心按钮 - 渐变芒果金 */
.vip-capsule-btn {
  background: linear-gradient(
    135deg,
    #ff9f0a 0%,
    #ff7f00 100%
  ) !important; /* 橙色渐变 */
  color: #fff !important; /* 白色文字 */
  padding: 6px 16px !important;
  border-radius: 20px !important;
  border: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(255, 159, 10, 0.3) !important; /* 橙色光晕 */
  transition: all 0.2s ease !important;
}

.vip-capsule-btn:hover {
  transform: translateY(-2px); /* 鼠标放上去上浮 */
  box-shadow: 0 6px 16px rgba(255, 159, 10, 0.4) !important;
  filter: brightness(1.1); /* 稍微变亮 */
}

.tool-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  cursor: pointer;
}
.tool-icon-btn:hover {
  border-color: #ff9800;
  color: #ff9800;
}

.logout-text-btn {
  background: transparent;
  border: none;
  color: #888;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.logout-text-btn:hover {
  color: #d23f31;
}
.divider-v-small {
  width: 1px;
  height: 18px;
  background: #eee;
}

/* 6. 响应式对齐 (防止小屏幕乱) */
@media screen and (max-width: 1400px) {
  /* 强行对齐 */
  .nav-layout-container {
    padding: 0 20px !important;
  }
}

/* 1. 全局布局重置 (清洗旧代码的干扰) */
.grid-container,
.paper-grid,
.pagination-bar,
.grid-container > div,
.toolbar-container {
  /* 强制取消旧的限制，防止多重缩放 */
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
}

/* 2. 定义统一的标准 (这是唯一的真理) */
:root {
  --page-max-width: 1400px; /* 统一宽度 */
  --page-padding: 40px; /* 统一左右留白 */
}

/* 3. 头部导航栏容器 */
.dash-nav {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  display: flex !important;
  justify-content: center !important; /* 让内部容器居中 */
  z-index: 9000 !important;
}

.nav-layout-container {
  width: 100% !important;
  max-width: var(--page-max-width) !important;
  padding: 0 var(--page-padding) !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* 4. 身体内容容器 (强制与头部对齐) */
.toolbar-container,
.grid-container {
  width: 100% !important;
  max-width: var(--page-max-width) !important;
  padding: 0 var(--page-padding) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* 修复内部网格间距 */
.paper-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
  margin-top: 20px !important;
}

/* 5. 头部整洁化 & 芒果色按钮修复 */
.nav-center-menu {
  flex: 1;
  display: flex;
  justify-content: center;
}
.nav-capsule {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: #f5f5f7;
  border-radius: 12px;
}


/* 6. 修复下拉菜单 */
.nav-dropdown-wrapper {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.nav-dropdown-wrapper::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px;
}
.dropdown-menu-mango {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.05);
  min-width: 140px;
}
.nav-dropdown-wrapper:hover .dropdown-menu-mango {
  display: block !important;
}

.mango-drop-item {
  width: 100%;
  padding: 10px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  cursor: pointer;
}
.mango-drop-item:hover {
  background: #fff8e1;
  color: #ff9800;
}

/* 7. 响应式适配 (防止小屏炸裂) */
@media screen and (max-width: 1400px) {
  :root {
    --page-padding: 20px;
  } /* 小屏时左右留白减小 */
}

/* 1. 布局容器标准化 */
:root {
  --content-width: 1400px; /* 统一内容宽度 */
  --side-padding: 40px; /* 统一左右留白 */
}

/* 2. 整合型工具栏 (Toolbar) */
.toolbar-container {
  width: 100%;
  max-width: var(--content-width);
  margin: 30px auto 10px auto !important; /* 上下留白，更有呼吸感 */
  padding: 0 var(--side-padding) !important;
  box-sizing: border-box;

  /* Flex 布局：两端对齐 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px; /* 固定高度，确保整齐 */
}

/* 3. 左侧：筛选按钮组 */
.filter-group {
  display: flex;
  gap: 12px; /* 按钮间距 */
}

.filter-btn {
  padding: 8px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #666 !important;
  background: #fff !important;
  border: 1px solid #e5e5ea !important;
  border-radius: 20px !important; /* 椭圆胶囊 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s ease !important;
  height: 36px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-btn:hover {
  color: #1d1d1f !important;
  border-color: #d1d1d6 !important;
  transform: translateY(-1px);
}

/* 统一筛选按钮激活状态 - 芒果风 */
.filter-btn.active {
  background: #fff8e1 !important; /* 淡黄色背景 */
  color: #ff9f0a !important; /* 芒果橙文字 */
  border: 1px solid #ff9f0a !important; /* 橙色边框 */
  font-weight: 700 !important; /* 加粗 */
  box-shadow: 0 2px 8px rgba(255, 159, 10, 0.2) !important; /* 橙色微光阴影 */
  transform: translateY(-1px); /* 微微上浮 */
}

/* 4. 右侧：功能组合 (搜索+清除) */
.toolbar-right-group {
  display: flex;
  align-items: center;
  gap: 16px; /* 搜索框和清除按钮的距离 */
}

/* 搜索框美化 */
.search-wrapper {
  position: relative;
  width: 260px; /* 限制宽度，精致一点 */
}
.search-wrapper input {
  width: 100% !important;
  height: 36px !important;
  background: #fff !important;
  border: 1px solid #e5e5ea !important;
  border-radius: 18px !important;
  padding-left: 38px !important;
  font-size: 14px !important;
  transition: all 0.2s !important;
}
.search-wrapper input:focus {
  border-color: #ff9f0a !important; /* 聚焦变芒果色 */
  width: 300px !important; /* 聚焦时微微变长 */
  box-shadow: 0 2px 10px rgba(255, 159, 10, 0.1) !important;
}
.search-icon-svg {
  width: 16px !important;
  height: 16px !important;
  left: 12px !important;
  color: #999 !important;
}

/* 竖线分割符 */
.toolbar-divider-v {
  width: 1px;
  height: 18px;
  background: #e0e0e0;
}

/* 清除记录按钮 (精致版) */
.btn-clear-history {
  background: transparent !important;
  border: none !important;
  color: #86868b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  transition: all 0.2s !important;
}
.btn-clear-history svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}
.btn-clear-history:hover {
  color: #ff3b30 !important; /* 悬停变红 */
  background: #fff0f0 !important;
}

/* 5. 卡片列表区域 (紧接其后) */
.grid-container {
  width: 100% !important;
  max-width: var(--content-width) !important;
  margin: 0 auto !important;
  padding: 20px var(--side-padding) 60px var(--side-padding) !important; /* 顶部留白减少，因为Toolbar已有留白 */
}

/* 6. 响应式适配 (小屏幕) */
@media screen and (max-width: 1400px) {
  :root {
    --side-padding: 20px;
  }
}

@media screen and (max-width: 800px) {
  /* 手机端变为两行 */
  .toolbar-container {
    flex-direction: column !important;
    height: auto !important;
    gap: 15px !important;
  }
  .toolbar-right-group {
    width: 100%;
    justify-content: space-between;
  }
  .search-wrapper {
    flex: 1;
  }
  .search-wrapper input:focus {
    width: 100% !important;
  }
}

/* =================================================================
   🤏 COMPACT SPACING PATCH (V14.0) - 收紧垂直间距
   功能：缩小导航栏、按钮、卡片之间的空白，更加紧凑
   ================================================================= */

/* 1. 调整主视图顶部内边距 (让内容整体上移) */
#dashboard-view {
  /* 原来是 80px，改为 74px (紧贴导航栏下方) */
  padding-top: 75px !important;
}

/* 2. 工具栏 (All/Part1 按钮所在行) */
.toolbar-container {
  /* 上边距：从 30px 减小到 15px (拉近与导航栏的距离) */
  margin-top: 15px !important;

  /* 下边距：从 10px 减小到 5px (拉近与卡片的距离) */
  margin-bottom: 5px !important;

  /* 高度微调：稍微压扁一点，显得更精致 */
  height: 40px !important;
}

/* 3. 卡片列表容器 */
.grid-container {
  /* 上内边距：从 20px 减小到 8px (进一步拉近卡片与按钮的距离) */
  padding-top: 10px !important;
}

/* 4. 微调响应式 (小屏幕也紧凑一点) */
@media screen and (max-width: 800px) {
  .toolbar-container {
    margin-top: 10px !important;
    gap: 10px !important;
  }
}

/* =================================================================
   👤 User Profile Dropdown (V1.0) - 用户中心下拉菜单
   ================================================================= */

/* 容器：相对定位，用于放置下拉菜单 */
.user-profile-wrapper {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  margin-left: 5px;
}

/* 头像触发器 */
.user-avatar-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 8px 4px 4px;
  border-radius: 20px;
  transition: all 0.2s ease;
}
.user-avatar-trigger:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* 圆形头像 */
.avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff9f0a, #ffcc00); /* 芒果渐变 */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 2px 6px rgba(255, 159, 10, 0.2);
  border: 2px solid #fff;
}

/* 箭头图标 */
.arrow-icon {
  color: #999;
  transition: transform 0.2s;
}
/* 鼠标放上去，箭头旋转 */
.user-profile-wrapper:hover .arrow-icon {
  transform: rotate(180deg);
}

/* 下拉菜单本体 */
.user-dropdown-menu {
  display: none; /* 默认隐藏 */
  position: absolute;
  top: calc(100% + 10px); /* 距离头像下方10px */
  right: 0;
  width: 220px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 8px 0;
  z-index: 9999;
  animation: fadeInDown 0.2s ease-out;
}

/* 简单的出现动画 */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 鼠标经过容器时显示菜单 (纯CSS实现悬浮显示) */
.user-profile-wrapper:hover .user-dropdown-menu {
  display: block;
}
/* 增加一个隐形桥，防止鼠标从头像移到菜单中间断开 */
.user-profile-wrapper::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px;
}

/* 菜单内部样式 */
.dropdown-header-info {
  padding: 10px 20px;
}
.user-name {
  font-weight: 700;
  color: #1d1d1f;
  font-size: 15px;
}
.user-email {
  font-size: 12px;
  color: #86868b;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 6px 0;
}

.dropdown-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 20px;
  border: none;
  background: transparent;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s;
}
.dropdown-item-row:hover {
  background: #f5f5f7;
  color: #000;
}
.dropdown-item-row svg {
  color: #666;
}
.dropdown-item-row:hover svg {
  color: #000;
}

/* 退出按钮特殊样式 */
.dropdown-item-row.logout {
  color: #666;
}
.dropdown-item-row.logout:hover {
  background: #fff0f0;
  color: #d23f31; /* 红色 */
}
.dropdown-item-row.logout:hover svg {
  color: #d23f31;
}

/* NEW 标签 */
.badge-new {
  background: #ff3b30;
  color: #fff;
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 700;
  margin-left: auto; /* 靠右 */
}

/* =================================================================
   🥭 LOGO 动画修复补丁 (请放在文件最底部)
   ================================================================= */

/* 1. 定义一个果冻Q弹动画 */
@keyframes mangoJelly {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.15) rotate(5deg);
  } /* 变大并歪头 */
  40% {
    transform: scale(0.95) rotate(-3deg);
  } /* 稍微回缩 */
  50% {
    transform: scale(1.05) rotate(2deg);
  }
  60% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

/* 2. 强制选中 Logo 盒子并应用动画 */
/* 这里使用了 .nav-brand-area .brand-icon-box 以提高优先级 */
.nav-brand-area:hover .brand-icon-box svg,
.brand-icon-box:hover svg {
  animation: mangoJelly 0.8s ease-in-out !important; /* 强制执行动画 */
  cursor: default !important;
}

/* 3. 确保 SVG 内部路径颜色也能互动 (可选，增加生动感) */
.brand-icon-box:hover svg path {
  filter: drop-shadow(0 0 5px rgba(255, 159, 10, 0.5)); /* 鼠标放上去发光 */
  transition: filter 0.3s ease;
}

/* --- 修复：强制会员中心按钮文字不换行 --- */
.vip-capsule-btn span {
  white-space: nowrap !important; /* 核心代码：禁止换行 */
  display: inline-block !important; /* 确保作为块显示 */
}
/* 稍微增加一点宽度自适应，防止挤压 */
.vip-capsule-btn {
  min-width: 100px !important; /* 设定一个最小宽度 */
  justify-content: center !important;
}

/* =================================================================
   🎨 MANGO PRO 视觉重构系统 (V5.0) - 导航质感统一补丁
   ================================================================= */

/* 1. 定义两组导航的共同基础样式 (重置) */
/* .nav-item-btn 是上方导航，.filter-btn 是下方筛选 */
.nav-item-btn,
.filter-btn {
  border-radius: 20px !important; /* 统一圆角：圆润的胶囊形 */
  border: 1px solid transparent !important; /* 默认无边框，但预留位置 */
  font-weight: 500 !important; /* 默认字体粗细 */
  letter-spacing: 0.3px !important; /* 字间距稍微拉开一点，更透气 */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; /* 苹果风格的平滑过渡 */
  background: transparent !important; /* 默认背景透明 */
  color: #666 !important; /* 默认深灰字 */
  box-shadow: none !important; /* 默认无阴影 */
  height: 36px !important; /* 统一高度，整齐划一 */
  padding: 0 18px !important; /* 统一内边距 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 2. 统一悬停状态 (鼠标放上去) */
.nav-item-btn:hover,
.filter-btn:hover {
  background-color: #fff8e1 !important; /* 极淡的奶油芒果色 */
  color: #ff9f0a !important; /* 变橙色 */
  transform: translateY(-1px) !important; /* 微微上浮，增加灵动感 */
}

/* 3. 统一激活状态 (被选中) - 质感核心 */
.nav-item-btn.active,
.filter-btn.active {
  /* 背景：使用高级微渐变，从正橙色到深橙色 */
  background: linear-gradient(135deg, #ff9f0a 0%, #ff8c00 100%) !important;

  /* 文字：纯白，对比度最高 */
  color: #ffffff !important;

  /* 字体：加粗，强调当前位置 */
  font-weight: 700 !important;

  /* 阴影：增加一层橙色的光晕，让按钮看起来像浮在空中 */
  box-shadow: 0 4px 12px rgba(255, 159, 10, 0.3) !important;

  /* 边框：取消边框，因为有阴影了 */
  border-color: transparent !important;

  /* 交互：按下去的感觉 */
  transform: translateY(0) scale(1.02) !important;
}

/* 4. 特殊处理：修复下拉菜单触发器的样式 */
.nav-dropdown-wrapper .nav-item-btn.dropdown-trigger {
  padding-right: 8px !important; /* 给小箭头留位置 */
}
/* 激活时，让下拉箭头也变白 */
.nav-item-btn.active svg,
.dropdown-trigger.active svg {
  stroke: #ffffff !important; /* SVG 线条变白 */
  opacity: 1 !important;
}

/* 5. 针对 B组导航 (首页等) 的额外排版优化 */
.nav-capsule {
  background: #f5f5f7 !important; /* 给整个导航条加一个浅灰底座 */
  padding: 4px !important;
  border-radius: 24px !important; /* 底座圆角 */
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  gap: 4px !important; /* 按钮之间的间距 */
}

/* --- 优化：下拉菜单字体美化 --- */
.mango-drop-item {
  /* 字体方案：首选苹果系统字体，其次是微软雅黑等无衬线字体 */
  font-family:
    -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    sans-serif !important;
  font-size: 14px !important; /* 字号适中 */
  font-weight: 500 !important; /* 稍微加粗，更清晰 */
  color: #333 !important; /* 深灰色，阅读舒适 */
  letter-spacing: 0.5px !important; /* 增加一点字间距 */
  padding: 12px 16px !important; /* 增加点击区域，手指也好点 */
}

/* 鼠标悬停在选项上时的效果 */
.mango-drop-item:hover {
  background-color: #fff8e1 !important; /* 芒果淡黄背景 */
  color: #ff9f0a !important; /* 芒果橙文字 */
}

/* =================================================================
   🏷️ 题型标签美化 (SVG 图标版)
   ================================================================= */

.q-type-tag {
  display: inline-flex !important; /* 让图标和文字横向排列 */
  align-items: center !important; /* 垂直居中 */
  gap: 4px !important; /* 图标和文字的间距 */
  padding: 3px 8px !important; /*稍微加大一点内边距 */
  background: #f5f5f7 !important;
  color: #555 !important;
  font-weight: 600 !important;
}

/* 专门控制标签里的小图标 */
.q-type-tag .icon-svg {
  width: 12px !important;
  height: 12px !important;
  opacity: 0.7; /*稍微淡一点，不要喧宾夺主 */
  stroke-width: 2.5; /* 加粗一点线条 */
}

/* --- 文章类型 Tag 样式 --- */
.article-type-tag {
  font-size: 11px !important;
  color: #666 !important;
  background-color: #f5f5f7 !important;
  padding: 3px 8px !important;
  border-radius: 5px !important;
  border: 2px solid #e5e5ea !important;
  font-weight: 450 !important;
}
/* === 写作模块新增样式 === */

/* 1. 写作卡片类型标签颜色 */
.tag-p1 {
  background: #e0f2fe;
  color: #007aff;
  border: 1px solid rgba(0, 122, 255, 0.1);
}
.tag-p2 {
  background: #f3e8ff;
  color: #af52de;
  border: 1px solid rgba(175, 82, 222, 0.1);
}

/* 2. 机考输入框优化 (全屏填充) */
.writing-workspace {
  display: flex;
  flex-direction: column;
  height: 100%; /* 占满右侧面板 */
  background: #fff;
}

.writing-textarea {
  flex: 1; /* 自动撑开高度 */
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  padding: 30px;
  font-size: 16px;
  line-height: 1.8;
  color: #1d1d1f;
  font-family: "Arial", sans-serif; /* 机考通常用无衬线体 */
  background: #ffffff;
  box-sizing: border-box;
}

/* 3. 底部统计栏固定 */
.writing-stat-bar {
  height: 60px;
  background: #f5f5f7;
  border-top: 1px solid #d1d1d6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0; /* 防止被挤压 */
}

/* 4. 题目区域滚动条美化 */
.writing-content-text {
  line-height: 1.6;
  color: #333;
  font-size: 15px;
}
.writing-content-text p {
  margin-bottom: 15px;
}

/* ============================================================
   🚑 写作模块终极修复补丁 (Writing Fixes)
   请放在 style.css 最后面，确保优先级最高
   ============================================================ */

/* 1. 核心修复：在写作模式下，彻底隐藏阅读的底部栏 */
/* 无论屏幕多大，只要进了写作模式 (.mode-writing)，阅读底部栏必须消失 */
#exam-view.mode-writing .footer-nav {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  z-index: -1 !important;
}

/* 2. 布局修复：让写作区域真正占满全屏，消灭白条 */
#exam-view.mode-writing {
  height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#exam-view.mode-writing .split-pane {
  flex: 1 !important; /* 自动占据剩余所有高度 */
  height: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 3. 针对右侧面板的特殊处理 */
#exam-view.mode-writing .panel-right {
  height: 100% !important;
  padding-bottom: 0 !important; /* 去掉底部留白，因为写作有自己的统计栏 */
  background: #fff !important;
}

/* 4. 确保写作统计栏固定在底部 */
.writing-stat-bar {
  border-top: 1px solid #e5e5ea !important;
  background: #f9f9f9 !important;
  flex-shrink: 0 !important; /* 禁止被压缩 */
  position: relative !important;
  z-index: 500 !important;
}

/* ============================================================
   🏷️ 独立统计胶囊 (Count Pill) - 位于搜索框左侧
   ============================================================ */

/* 1. 胶囊样式 */
.count-pill-large {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f7; /* 浅灰背景 */
  border: 1px solid #e5e5ea; /* 极细边框 */
  height: 36px; /* 与搜索框高度一致 */
  padding: 0 16px; /* 左右留白 */
  border-radius: 18px; /* 椭圆圆角 */
  font-size: 13px;
  color: #666;
  margin-right: 12px; /* 与搜索框的距离 */
  white-space: nowrap; /* 防止换行 */
  transition: all 0.2s;
  user-select: none;
}

/* 2. 鼠标悬停效果 */
.count-pill-large:hover {
  background: #fff;
  border-color: #ff9f0a; /* 悬停变橙色边框 */
  box-shadow: 0 2px 8px rgba(255, 159, 10, 0.1);
}

/* 3. 内部图标微调 */
.count-icon {
  font: size 14px;
  margin-right: 6px;
  transform: translateY(-1px); /* 微调垂直对齐 */
}

/* 4. 确保工具栏右侧排列整齐 */
.toolbar-right-group {
  display: flex !important;
  align-items: center !important;
}

/* ============================================================
   🆕 写作卡片 2.0 (智能伸缩版)
   ============================================================ */

/* 1. 卡片基础布局 */
.card-writing-v2 {
  background: #fff;
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px; /* 内部元素间距 */
  position: relative;
}
.card-writing-v2:hover {
  border-color: #ff9f0a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 2. 顶部：题目预览区 (核心) */
.card-text-wrapper {
  position: relative;
}

.card-question-text {
  font-size: 15px;
  color: #333;
  line-height: 1.6;

  /* 收起时的魔法代码：限制3行 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  /* 动画过渡 */
  transition: max-height 0.3s ease;
}

/* 展开后的样式类 */
.card-question-text.expanded {
  -webkit-line-clamp: unset; /* 取消行数限制 */
  overflow: visible;
}

/* 3. 展开/收起 触发按钮 */
.btn-expand-trigger {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 24px;
  margin-top: 4px;
  cursor: pointer;
  color: #999;
  transition: all 0.2s;
}
.btn-expand-trigger:hover {
  color: #ff9f0a;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 4px;
}
.btn-expand-trigger svg {
  transition: transform 0.3s ease; /* 旋转动画 */
}
/* 箭头旋转类 */
.btn-expand-trigger.rotated svg {
  transform: rotate(180deg);
}

/* 4. 中部：核心标签区 */
.card-tags-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.tag-topic {
  font-size: 12px;
  font-weight: 600;
  color: #1d1d1f;
  background: #f5f5f7;
  padding: 4px 10px;
  border-radius: 6px;
}

.tag-type {
  font-size: 12px;
  color: #007aff;
  background: #e0f2fe;
  padding: 4px 10px;
  border-radius: 6px;
}

/* 5. 底部：极简状态 */
.card-footer-simple {
  border-top: 1px dashed #eee;
  padding-top: 10px;
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}
.text-action {
  font-size: 13px;
  font-weight: 600;
  color: #ff9f0a;
}

/* ============================================================
   🎨 布局分流系统 (Layout Switcher - 舒适呼吸版)
   ============================================================ */

/* 1. 基础容器设置 */
.paper-grid {
  width: 100%;
  padding-bottom: 80px; /* 底部留白更多一点 */
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   模式 A: 写作模块 (瀑布流 - 保持不变)
   ------------------------------------------------------------ */
.paper-grid.writing-mode {
  display: block !important;
  column-count: 2 !important;
  column-gap: 30px !important; /* 写作卡片间距也加大 */
}

.paper-grid.writing-mode .card-writing-v2 {
  display: inline-block !important;
  width: 100% !important;
  margin-bottom: 30px !important; /* 上下间距加大 */
  break-inside: avoid-column !important;
}

/* ------------------------------------------------------------
   模式 B: 阅读模块 (网格 - 优化版)
   ------------------------------------------------------------ */
.paper-grid.reading-mode {
  display: grid !important;

  /* 核心修改 1: 间距从 20px 改为 30px，增加呼吸感 */
  gap: 20px !important;

  /* 默认大屏显示 3 个 */
  grid-template-columns: repeat(3, 1fr) !important;

  /* 清除瀑布流属性 */
  column-count: auto !important;
  column-gap: 20px !important;
}

/* ------------------------------------------------------------
   📱 屏幕适配规则 (解决字体变小/卡片太挤的问题)
   ------------------------------------------------------------ */

/* 规则 1: 当屏幕比 1200px 窄时 (比如普通笔记本)，自动变 2 列 */
/* 这样卡片就宽了，字也不会挤了 */
@media screen and (max-width: 1200px) {
  .paper-grid.reading-mode {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 规则 2: 当屏幕比 768px 窄时 (比如手机/iPad竖屏)，自动变 1 列 */
/* 写作模块也同步变 1 列 */
@media screen and (max-width: 768px) {
  .paper-grid.reading-mode,
  .paper-grid.writing-mode {
    grid-template-columns: 1fr !important;
    column-count: 1 !important;
  }
}

/* ============================================================
   📜 写作记录模块 (Writing History Styles)
   ============================================================ */

/* 1. 历史记录容器 (列表模式) */
.history-list-container {
  width: 100%;
  max-width: 800px; /* 限制最大宽度，像文章列表一样便于阅读 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 60px;
}

/* 2. 单条历史记录卡片 */
.history-card {
  background: #fff;
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  padding: 24px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  border-left: 4px solid transparent; /*以此预留状态色条 */
}

.history-card:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border-color: #ff9f0a;
  transform: translateY(-2px);
}

/* 状态色条：已提交为绿色 */
.history-card.status-submitted {
  border-left-color: #34c759;
}
/* 状态色条：待评分/草稿为灰色 */
.history-card.status-pending {
  border-left-color: #999;
}

/* 卡片头部：标题与日期 */
.h-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.h-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 4px;
}

.h-card-date {
  font-size: 12px;
  color: #86868b;
  font-family: monospace;
  white-space: nowrap;
  margin-left: 15px;
}

/* 卡片摘要：展示作文前两行 */
.h-card-preview {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  background: #f9f9f9;
  padding: 10px 15px;
  border-radius: 8px;

  /* 多行截断 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 12px;
  font-family: "Times New Roman", serif; /* 保持写作的感觉 */
}

/* 卡片底部：数据统计 */
.h-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #999;
}

.h-stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #f0f0f5;
  border-radius: 4px;
  color: #666;
  font-weight: 600;
}

/* ============================================================
   🟠 强制橙色按钮补丁 (Override Styles)
   ============================================================ */
.btn-history-orange {
  /* 使用 !important 覆盖掉原有的灰色设置 */
  border: 1px solid #ff9f0a !important;
  color: #ff9f0a !important;
  background: #fff !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

.btn-history-orange:hover {
  background: #fff8e1 !important; /* 悬停变淡黄 */
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(255, 159, 10, 0.2) !important;
}

.btn-history-orange svg {
  /* 确保图标也是橙色 */
  color: #ff9f0a !important;
  stroke: #ff9f0a !important;
}

/* ============================================================
   🏷️ 二级胶囊筛选器 (修正左对齐版)
   ============================================================ */
.chip-scroll-container {
  display: flex;
  gap: 12px; /* 胶囊之间的间距 */
  overflow-x: auto;

  /* 🔥 核心修复：强制左对齐 */
  justify-content: flex-start !important;
  margin: 15px 0 25px 0 !important; /* 上下留白，左右为0 */
  padding: 0 !important; /* 去掉内边距，确保和上面的文字左对齐 */

  width: 100%;
  max-width: 1200px;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

/* 隐藏滚动条 (Chrome/Safari) */
.chip-scroll-container::-webkit-scrollbar {
  display: none;
}

/* 2. 胶囊按钮样式 */
.chip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 20px; /* 椭圆 */
  background: #fff;
  border: 1px solid #e5e5ea;
  color: #666;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0; /* 防止被挤扁 */
}

.chip-btn:hover {
  background: #f5f5f7;
  color: #1d1d1f;
  border-color: #d1d1d6;
}

/* 3. 胶囊激活状态 (芒果橙) */
.chip-btn.active {
  background: #fff8e1; /* 淡橙色背景 */
  color: #ff9f0a; /* 橙色字 */
  border-color: #ff9f0a; /* 橙色边框 */
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(255, 159, 10, 0.15);
}

/* 4. 预测题专用高亮 (红色) */
.chip-btn.predict-tag {
  color: #ff3b30;
  border-color: rgba(255, 59, 48, 0.3);
  background: #fff0f0;
}
.chip-btn.predict-tag.active {
  background: #ff3b30;
  color: #fff;
}
/* ============================================================
   🏷️ 写作胶囊定位终极修复 (Alignment Fix)
   ============================================================ */
.chip-scroll-container {
  display: flex !important;
  gap: 12px !important;
  overflow-x: auto !important;
  justify-content: flex-start !important; /* 内部元素靠左排 */

  /* 1. 核心修复：添加左右内边距，与上方 Task 按钮文字左侧对齐 */
  padding-left: 20px !important;
  padding-right: 20px !important;

  /* 2. 核心修复：设置左右 margin 为 auto，实现容器在页面居中 */
  margin: 15px auto 20px auto !important;

  width: 100% !important;

  /* 3. 核心修复：统一最大宽度为 1200px，与上方工具栏完全一致 */
  max-width: 1200px !important;

  box-sizing: border-box !important;
}

/* 隐藏滚动条但保持功能 */
.chip-scroll-container::-webkit-scrollbar {
  display: none;
}

/* 胶囊按钮微调 */
.chip-btn {
  flex-shrink: 0 !important;
  height: 32px !important;
  font-size: 13px !important;
  border-radius: 16px !important;
}

/* ============================================================
   📐 芒果终极对齐系统 (V11.0 - 27寸大屏修复版)
   核心逻辑：强行统一所有容器的宽度和边距，确保上下垂直对齐
   ============================================================ */

/* 1. 工具栏 (Task 1 / Task 2 按钮所在行) */
.toolbar-container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;

  /* 🔥 核心对齐参数 */
  width: 100% !important;
  max-width: 1400px !important; /* 必须是 1400px，与导航栏一致 */
  margin: 20px auto 10px auto !important; /* 居中 */
  padding: 0 40px !important; /* 左右留白 40px */
  box-sizing: border-box !important;
}

/* 2. 二级菜单 (胶囊所在行) */
.chip-scroll-container {
  /* 默认隐藏！防止在阅读/听力页面出现 */
  display: none;

  /* 🔥 核心对齐参数 (必须与上面完全一致) */
  width: 100% !important;
  max-width: 1400px !important; /* 1400px */
  margin: 0 auto 20px auto !important; /* 居中 */
  padding: 0 40px !important; /* 40px，确保左侧起点与上方按钮一致 */
  box-sizing: border-box !important;

  /* 内部布局 */
  gap: 12px !important;
  overflow-x: auto !important;
  justify-content: flex-start !important; /* 内容靠左 */
}

/* 胶囊按钮微调 */
.chip-btn {
  flex-shrink: 0 !important;
  height: 32px !important;
  font-size: 13px !important;
  border-radius: 16px !important;
  background: #fff;
  border: 1px solid #e5e5ea;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 16px;
}
.chip-btn.active {
  background: #fff8e1;
  color: #ff9f0a;
  border-color: #ff9f0a;
  font-weight: 700;
}

/* ============================================================
   📜 练习记录网格化重构 (Grid Layout Fix)
   ============================================================ */

/* 1. 容器改为网格布局 */
.history-list-container {
  display: grid !important;
  /* 自动填充：每张卡片最小300px，一行能放几个放几个 */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 1200px !important; /* 宽度加大，不再是窄窄的800px */
  margin: 0 auto !important;
  padding-bottom: 60px !important;
}

/* 2. 头部栏优化 (返回按钮区域) */
.history-header-bar {
  width: 100% !important;
  max-width: 1200px !important; /* 与下方网格对齐 */
  margin: 0 auto 25px auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 5px !important;
}

/* 3. 卡片高度统一 */
.history-card {
  height: 220px !important; /* 固定高度，让网格整齐 */
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  margin-bottom: 0 !important; /* 去掉之前的下边距，由grid gap控制 */
}

/* 4. 预览文字限制行数 (防止撑破卡片) */
.h-card-preview {
  flex: 1; /* 占满中间空隙 */
  margin-bottom: 15px !important;
  overflow: hidden;
  /* 限制显示4行 */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* 5. 修复卡片标题溢出 */
.h-card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px; /* 防止标题太长顶坏布局 */
}

.paper-grid.history-mode {
  display: block !important; /* 关键！变回普通块级元素 */
  padding-top: 10px !important;
}

/* 确保内部容器居中且对齐 */
.paper-grid.history-mode .history-header-bar,
.paper-grid.history-mode .history-list-container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* === 必刷题库专属：高级火焰按钮样式 === */

/* 1. 基础外观：金橙色边框 + 浅色背景 */
.filter-btn.prediction-mode {
  border-color: #ff9f0a !important; /* 品牌橙色边框 */
  color: #b35f00 !important; /* 深橙色文字 */
  background: #fffbf0 !important; /* 极淡的橙色背景 */
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px; /* 图标和文字的间距 */
  padding-left: 14px;
  padding-right: 14px;
  transition: all 0.3s ease;
}

/* 2. 激活状态：渐变填充，更显眼 */
.filter-btn.prediction-mode.active {
  background: linear-gradient(135deg, #ff9f0a 0%, #ff7f00 100%) !important;
  color: white !important;
  box-shadow: 0 4px 10px rgba(255, 159, 10, 0.3); /* 发光阴影 */
  border: none !important;
}

/* 3. 火焰 SVG 图标的基础样式 */
.fire-icon-svg {
  width: 14px;
  height: 14px;
  fill: currentColor; /* 跟随文字颜色变化（未选中是橙色，选中是白色） */
  margin-bottom: 1px; /* 微调对齐 */
}

/* 4. 定义火焰“呼吸”动画：忽大忽小，像火苗在跳动 */
@keyframes flame-pulse {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
}

/* 5. 给图标加上动画 */
.fire-icon-svg.animate {
  animation: flame-pulse 2s infinite ease-in-out;
}
/* === 修复导航鼠标手势 (Bug Fix) === */
button, 
.nav-item-btn, 
.dropdown-trigger, 
.mango-drop-item, 
.filter-btn,
.chip-btn,
.nav-capsule button {
    cursor: pointer !important;
}

/* 确保禁用的按钮不显示小手 */
button:disabled,
button.locked {
    cursor: not-allowed !important;
}



/* ============================================================
   🎧 雅思机考听力专属样式 (IELTS Listening Fix)
   请确保这段代码在 style.css 的最底部
   ============================================================ */

.ielts-listening-header {
    height: 72px;
    background: #1d1d1f; /* 深黑色背景 */
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999; /* 确保在最上层 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.ielts-header-left {
    width: 200px;
    display: flex;
    align-items: center;
}

.ielts-section-info {
    font-size: 18px;
    font-weight: 700;
    color: #f5f5f7;
    letter-spacing: 0.5px;
}

.ielts-header-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* 播放器容器 */
.practice-player-controls {
    background: rgba(255,255,255,0.15);
    padding: 8px 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 400px;
    border: 1px solid rgba(255,255,255,0.2);
}

/* 迷你播放按钮 */
.btn-mini-control {
    background: #fff;
    border: none;
    color: #1d1d1f;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s;
}
.btn-mini-control:hover { 
    transform: scale(1.1);
    background: #ff9f0a;
    color: #fff;
}

/* 进度条轨道 */
.ielts-progress-track {
    flex: 1;
    height: 4px;
    background: rgba(0,0,0,0.3);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

/* 进度条填充 */
.ielts-progress-fill {
    height: 100%;
    background: #ff9f0a; /* 芒果色 */
    width: 0%;
    border-radius: 2px;
    transition: width 0.1s linear;
}

.ielts-time-text {
    font-family: "Roboto Mono", monospace;
    font-size: 13px;
    color: #ddd;
    min-width: 85px;
    text-align: right;
}

.ielts-header-right {
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
}

.volume-box {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #888;
}

.ielts-volume-slider {
    width: 80px;
    height: 4px;
    accent-color: #ff9f0a;
}

.btn-help, .btn-hide {
    background: transparent;
    border: 1px solid #555;
    color: #ccc;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}
.btn-help:hover, .btn-hide:hover {
    border-color: #fff;
    color: #fff;
}

/* 倒计时红色警报 */
.timer-countdown-mode {
    color: #ff3b30 !important;
    font-weight: 900;
    animation: blinkRed 1s infinite;
}
/* =========================================
   📖 阅读页紧凑头部样式 (Compact Header)
   ========================================= */

/* 1. 头部第一行：标签 + 工具栏 */
.article-header-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px; /* 减少留白 */
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

/* 左侧标签：更加精致 */
.passage-label-simple {
    font-size: 12px;
    font-weight: 800;
    color: #86868b;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: #f5f5f7;
    padding: 4px 8px;
    border-radius: 6px;
}

/* 右侧工具组 */
.header-right-tools {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 2. 迷你翻译按钮 */
.btn-translate-mini {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    background: #fff;
    color: #555;
    transition: all 0.2s;
}
.btn-translate-mini svg {
    width: 14px;
    height: 14px;
}

/* 锁定状态 */
.btn-translate-mini.locked {
    color: #ccc;
    background: transparent;
    cursor: not-allowed;
}

/* 激活/可用状态 */
.btn-translate-mini:not(.locked):hover {
    color: #ff9f0a;
    background: #fff8e1;
}
.btn-translate-mini.active {
    background: #ff9f0a;
    color: #fff;
}

/* 3. 紧凑版大标题 */
.article-title-compact {
    font-family: "Georgia", "Times New Roman", serif;
    font-size: 26px; /* 稍微调小一点，原为32px */
    font-weight: 700;
    color: #1d1d1f;
    line-height: 1.3;
    margin-bottom: 25px; /* 标题与正文的距离 */
}

/* === 考试状态控制功能样式 === */
.locked-state {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    filter: grayscale(100%) !important;
    position: relative !important;
    background-color: #f5f5f7 !important;
    color: #999 !important;
    box-shadow: none !important;
    pointer-events: auto !important; /* 关键：确保鼠标悬停能触发提示 */
}

/* 悬停提示文字 (Tooltip) */
.locked-state:hover::after {
    content: "提交试卷后才能看翻译和解析哦";
    position: absolute;
    bottom: 120%; /* 显示在按钮上方 */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* 悬停提示小箭头 */
.locked-state:hover::before {
    content: "";
    position: absolute;
    bottom: 110%; /* 紧贴提示框下方 */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
    z-index: 9999;
}

/* === V5.1 会员中心 (高质感悬浮版) === */

/* 1. 列表容器 */
.status-grid-row-four {
    display: flex;
    flex-direction: column;
    gap: 14px; /*稍微拉大一点间距，呼吸感更强 */
    margin-bottom: 24px;
}

/* 2. 智能卡片 (核心质感代码) */
.status-card {
    display: flex;
    align-items: center;
    background: #fff;
    
    /* 质感来源1：双重边框模拟 */
    border: 1px solid rgba(0,0,0,0.06);
    
    /* 质感来源2：静态下的微阴影 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    
    border-radius: 14px; /* 更圆润的角 */
    padding: 16px 20px; /* 增加内部空间，解决“文字生涩” */
    
    /* 动画核心：让它动起来 */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative; /* 为悬浮做准备 */
    top: 0;
}

/* 悬浮特效 (Hover Effect) */
.status-card:hover {
    /* 浮动起来 */
    transform: translateY(-3px);
    /* 阴影加深，产生离地感 */
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.0); /* 悬浮时隐藏边框，纯靠阴影 */
    z-index: 2;
}

/* 已激活的高亮样式 */
.status-card.active-card {
    background: linear-gradient(to right, #f4fcf6, #ffffff); /*微渐变，更有质感 */
    border-color: #bbf7d0;
}
.status-card.active-card:hover {
    box-shadow: 0 8px 20px rgba(22, 101, 52, 0.1); /* 绿色的悬浮光晕 */
}

/* 3. 图标容器 */
.st-icon-svg {
    width: 44px; height: 44px; /* 图标稍大一点，更大气 */
    display: flex; align-items: center; justify-content: center;
    color: #555; 
    background: #f2f2f7; 
    border-radius: 12px;
    margin-right: 18px; /* 拉大图标和文字的距离 */
    flex-shrink: 0;
    transition: background 0.2s;
}
.status-card:hover .st-icon-svg {
    background: #e5e5ea; /* 悬浮时图标背景变深一点点 */
    color: #000;
}

/* 4. 文字排版优化 */
.st-info-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.st-name {
    font-size: 16px; /* 字体加大 */
    font-weight: 700; 
    color: #1d1d1f;
    margin-bottom: 4px; /* 增加行间距 */
    letter-spacing: -0.3px; /* 苹果风格的字间距，更精致 */
}
.st-desc {
    font-size: 13px; 
    color: #86868b;
    font-weight: 500;
}

/* 5. 按钮优化 (去解锁) */
.btn-mini-buy {
    background: #1d1d1f;
    color: #fff;
    border: none;
    padding: 8px 18px; /* 按钮变大一点，不那么局促 */
    border-radius: 20px;
    font-size: 13px; 
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.btn-mini-buy:hover {
    background: #000;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* 6. 已激活标签 */
.st-badge-green {
    display: flex; align-items: center;
    color: #166534;
    background: #dcfce7; /* 加个背景色胶囊 */
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px; font-weight: 700;
}

/* === V5.2 修复头部位置 & 金色商业按钮 === */

/* 1. 强制头部左右两端对齐 (修复关闭按钮跑偏问题) */
.modal-header-modern {
    display: flex;
    justify-content: space-between; /* 关键：一左一右 */
    align-items: center; /* 垂直居中 */
    padding: 16px 24px;
    border-bottom: 1px solid #f0f0f0;
    width: 100%; /* 确保占满宽度 */
}
/* 确保标题和按钮不会被挤压 */
.modal-title-text { flex-shrink: 0; }
.close-icon-btn { flex-shrink: 0; margin-left: auto; /* 双重保险：强制推到最右边 */ }


/* === V5.3 底部按钮微调 (适配 SVG) === */

.btn-buy-gold {
    width: 100%;
    padding: 12px; /* 高度稍微改小一点，更省空间 */
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%);
    color: #8a5a00; /* 深金色文字 */
    border: none;
    border-radius: 10px;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(253, 185, 49, 0.3);
    transition: all 0.2s;
    
    /* 关键：让图标和文字居中对齐 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-buy-gold:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(253, 185, 49, 0.4);
}

.btn-buy-gold svg {
    stroke: #8a5a00; /* 强制图标颜色与文字一致 */
}

.badge-best {
    background: #fff;
    color: #d48405;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: 900;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* === 修复：奖励明细列表样式 === */
.record-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 10px;
    border-bottom: 1px solid #f5f5f7;
    transition: background 0.2s;
}
.record-row:hover {
    background-color: #fbfbfd;
}
.reward-badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 定义不同奖励类型的颜色 */
/* 全科 - 金色 */
.badge-all {
    color: #b45309;
    background-color: #fffbeb;
    border: 1px solid #fcd34d;
}
/* 阅读 - 绿色 */
.badge-reading {
    color: #15803d;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
}
/* 写作 - 蓝色 */
.badge-writing {
    color: #1d4ed8;
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
}
/* 听力 - 紫色 */
.badge-listening {
    color: #7e22ce;
    background-color: #faf5ff;
    border: 1px solid #e9d5ff;
}

/* === V3.0 重构：推荐与奖励列表样式 === */

/* 1. 推荐记录 - 顶部统计框 */
.referral-summary-box {
    background: linear-gradient(to right, #f9f9f9, #ffffff);
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.summary-count {
    font-size: 20px;
    font-weight: 800;
    color: #1d1d1f;
    font-family: monospace;
}
.summary-label {
    font-size: 13px;
    color: #666;
}

/* 2. 推荐记录 - 纯净列表行 */
.referral-simple-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 8px;
    border-bottom: 1px solid #f5f5f7;
}
.referral-email {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}
.referral-date {
    font-size: 12px;
    color: #999;
}

/* 3. 获奖明细 - 详细列表行 */
.reward-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 10px;
    border-bottom: 1px dashed #eee; /* 虚线分割，区分度更好 */
    transition: background 0.2s;
}
.reward-detail-row:hover {
    background-color: #fbfbfd;
}
.reward-text-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.reward-main-text {
    font-size: 13px;
    color: #333;
    font-weight: 500;
}
.reward-sub-text {
    font-size: 11px;
    color: #999;
}
/* 奖励天数胶囊 */
.reward-days-pill {
    background: #fff3e0;
    color: #d84315;
    border: 1px solid #ffe0b2;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
/* 🍞 提示弹窗 (Toast) - 居中优化版 */
#toast-box {
    position: fixed;
    top: 50%;               /* 垂直居中 */
    left: 50%;              /* 水平居中 */
    transform: translate(-50%, -50%) scale(0.9); /* 精确居中 + 初始微缩 */
    background-color: rgba(30, 30, 30, 0.95); /* 深色背景 */
    color: #fff;
    padding: 12px 24px;
    border-radius: 50px;    /* 胶囊形状 */
    font-size: 14px;
    font-weight: 500;
    z-index: 10000;         /* 保证在最上层 */
    opacity: 0;             /* 默认隐藏 */
    pointer-events: none;   /* 隐藏时不挡鼠标 */
    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); /* 弹性动画 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 8px;               /* 图标和文字的间距 */
    min-width: 200px;       /* 最小宽度，防止太窄 */
    justify-content: center;
}

/* 显示状态 */
#toast-box.show {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

/* =========================================
   🚑 紧急修复：Toast 弹窗位置修正 (满级层级版)
   ========================================= */
#toast-box {
    position: fixed !important; /* ⚠️这行最关键！没有它 z-index 就失效 */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.9) !important;
    
    /* 视觉优化 */
    background-color: rgba(0, 0, 0, 0.85) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
    border-radius: 12px !important;
    
    /* 保证层级全宇宙最高 */
    z-index: 999999 !important; 
    pointer-events: none !important; /* 防止它挡住别人点击 */
}

/* =========================================
   🎨 听力卡片美学升级包 (V5.0)
   ========================================= */

/* 1. 题型小徽章优化 */
.type-badge-mini {
    display: inline-flex;
    align-items: center;
    background: #f9fafb; /* 极淡灰背景 */
    color: #4b5563;      /* 深灰文字 */
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    border: 1px solid #f3f4f6; /* 极细边框 */
    font-weight: 500;
    transition: all 0.2s;
}
.card-pro:hover .type-badge-mini {
    background: #fff;
    border-color: #e5e7eb;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* 2. 四种 Part 的颜色定义 (Tag Colors) */
.passage-pill {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700 !important; /* 加粗更有质感 */
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Part 1: 经典的科技蓝 (Blue) */
.tag-p1 {
    color: #007aff;
    background: #eff6ff;
    border: 1px solid #dbeafe;
}

/* Part 2: 清新的薄荷青 (Cyan/Teal) */
.tag-p2 {
    color: #0d9488;
    background: #f0fdfa;
    border: 1px solid #ccfbf1;
}

/* Part 3: 活力的暖橙色 (Orange) */
.tag-p3 {
    color: #f59e0b;
    background: #fffbeb;
    border: 1px solid #fcd34d;
}

/* Part 4: 高级的薰衣草紫 (Purple) */
.tag-p4 {
    color: #9333ea;
    background: #faf5ff;
    border: 1px solid #e9d5ff;
}

/* 3. 卡片悬停时的微小位移 (提升交互感) */
.card-pro {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-pro:hover {
    transform: translateY(-2px); /* 微微上浮 */
}

/* =========================================
   [里程碑 3] 口语考情反馈组件样式
   ========================================= */

/* 弹窗进入动画 */
.feedback-box {
    animation: modalPop 0.3s ease-out;
}

/* 核心：超级触发器 (像按钮一样的输入框) */
.topic-trigger-box {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f9f9f9;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s;
    /* 保持字体和其他输入框一致 */
    font-size: 14px;
    box-sizing: border-box; 
}

/* 鼠标悬停效果：变白、蓝框、发光 */
.topic-trigger-box:hover {
    background: #fff;
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* 占位符文字颜色 */
.trigger-placeholder {
    color: #999;
}

/* 选中值文字颜色 */
.trigger-value {
    color: #333;
    font-weight: 600;
}

/* 右侧箭头图标颜色 */
.trigger-icon {
    color: #bbb;
}

/* 未来：话题墙滑入面板样式 */
.wall-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 200;
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.2s ease-out;
}

/* 从右侧滑入的动画定义 */
@keyframes slideInRight {
    from {
        transform: translateX(30px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}


/* =========================================
   [Step 3] 话题墙 (Topic Wall) 样式
   ========================================= */

/* 墙体头部 */
.wall-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    background: #fff;
}

/* 墙体内容区 (滚动区域) */
.wall-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #fcfcfc;
}

/* 话题网格布局 (Flex Wrap) */
.topic-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* 胶囊按钮核心样式 */
.topic-capsule {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #e5e5ea;
    border-radius: 20px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

/* 鼠标悬停 */
.topic-capsule:hover {
    border-color: #007aff;
    color: #007aff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,122,255,0.15);
}

/* 高频必考题的特殊样式 */
.topic-capsule.hot {
    border-color: #ffccbc; /* 浅橙色边框 */
    background: #fffbf7;
}
.topic-capsule.hot:hover {
    border-color: #ff3b30;
    color: #d32f2f;
}

/* 标签小圆点 */
.capsule-tag {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    margin-right: 6px;
}
.tag-fire { background: #ffebee; color: #ff3b30; } /* 红色火苗背景 */
.tag-new { background: #fff8e1; color: #f57f17; } /* 黄色新题背景 */

/* 分类标题 (如 "🔥 高频必考") */
.wall-section-title {
    font-size: 12px;
    color: #999;
    font-weight: 600;
    margin: 20px 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* 第一各标题不要上边距 */
.wall-section-title:first-child { margin-top: 0; }


/* [里程碑 3] 选中状态的高亮样式 */
.topic-capsule.selected {
    background: #007aff;       /* 选中变蓝 */
    border-color: #007aff;
    color: #fff;               /* 文字变白 */
    box-shadow: 0 4px 10px rgba(0, 122, 255, 0.3);
}

/* 选中状态下的标签颜色调整 */
.topic-capsule.selected .capsule-tag {
    background: rgba(255,255,255,0.2); /* 半透明白 */
    color: #fff;
}

/* 选中状态下的 hover 微调 */
.topic-capsule.selected:hover {
    background: #0062cc;       /* 深蓝色 */
    border-color: #0062cc;
    color: #fff;
}

/* =========================================
   [里程碑 4] 实时情报流列表样式 (V2.0 精修版)
   ========================================= */

/* 列表项容器 */
.feed-item {
    padding: 15px 0; /* 上下留白，左右不留 */
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.2s;
}

.feed-item:hover {
    background: #fafafa;
    padding-left: 10px; /* 悬停时稍微右移一点，增加交互感 */
    padding-right: 10px;
    border-radius: 8px;
}

.feed-item:last-child {
    border-bottom: none;
}

/* 第一行：头部信息 (地点 + 时间) */
.feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.feed-loc {
    font-size: 14px;
    font-weight: 700; /* 加粗地点 */
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 4px;
}

.feed-loc svg {
    color: #ff3b30; /* 定位图标用红色 */
}

.feed-time {
    font-size: 11px;
    color: #999;
    font-family: monospace; /* 等宽字体，数字更好看 */
    background: #f5f5f7;
    padding: 2px 6px;
    border-radius: 4px;
}

/* 第二行：话题内容 */
.feed-body {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

/* P1/P2 的前缀样式 */
.prefix-tag {
    font-size: 12px;
    font-weight: 800;
    margin-right: 4px;
}

/* 第三行：底部标签 */
.feed-badges {
    display: flex;
    gap: 8px;
}

.feed-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #f5f5f7;
    color: #666;
    display: inline-flex;
    align-items: center;
}

/* =========================================
   [里程碑 4] 考官选择器样式
   ========================================= */
.examiner-option input { 
    display: none; /* 隐藏原生单选框 */
} 
.examiner-option .ex-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #f5f5f7;
    border: 1px solid #eee;
    border-radius: 20px;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}
/* 选中状态：变黑底白字 */
.examiner-option input:checked + .ex-tag {
    background: #1d1d1f;
    color: #fff;
    border-color: #1d1d1f;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}


/* ================== 🏠 首页专属样式 (Home) ================== */

/* 容器微调 */
.home-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px 60px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* 1. Hero 区域：视觉冲击 */
.hero-section {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, #fff 0%, #fffbf0 100%);
    border-radius: 24px;
    margin-bottom: 40px;
    border: 1px solid #fff;
    box-shadow: 0 10px 40px rgba(255, 152, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.hero-badge {
    display: inline-block;
    background: #fff3e0;
    color: #ff9800;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 15px;
    border: 1px solid #ffe0b2;
}

.hero-title {
    font-size: 42px;
    font-weight: 800;
    color: #1d1d1f;
    margin-bottom: 15px;
    line-height: 1.2;
    background: linear-gradient(45deg, #1d1d1f, #434343);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-desc {
    font-size: 18px;
    color: #666;
    max-width: 600px;
    margin: 0 auto 30px auto;
    line-height: 1.6;
}

/* 2. 模块卡片 (Cards) */
.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.module-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid #f0f0f0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 220px;
}

.module-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    border-color: transparent;
}

/* 各科配色 */
.mod-reading:hover { border-bottom: 4px solid #34c759; }
.mod-listening:hover { border-bottom: 4px solid #af52de; }
.mod-writing:hover { border-bottom: 4px solid #007aff; }
.mod-speaking:hover { border-bottom: 4px solid #ff3b30; }

.mod-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 24px;
}

.mod-title {
    font-size: 20px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.mod-desc {
    font-size: 13px;
    color: #86868b;
    line-height: 1.5;
}

.mod-tag {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 600;
}

/* ================== 📊 双排数据墙样式 ================== */

.stats-grid-section {
    padding: 40px 20px;
    background: #fff;
    margin-bottom: 40px; /* 与下方情报站保持距离 */
    display: flex;
    justify-content: center;
}

.stats-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列 */
    gap: 30px; /* 卡片之间的间距 */
    width: 100%;
    max-width: 1000px;
}

.stat-card {
    background: #f9f9f9; /* 极淡的灰色背景 */
    border-radius: 16px;
    padding: 25px 15px;
    text-align: center;
    border: 1px solid #f0f0f0;
    transition: transform 0.3s, box-shadow 0.3s;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    background: #fff;
    border-color: #e5e5ea;
}

/* 数字样式 */
.stat-value {
    font-size: 32px;
    font-weight: 800;
    color: #1d1d1f;
    margin-bottom: 6px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: -1px;
}

/* 主标签样式 */
.stat-label {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}

/* 副标题样式 (灰色小字) */
.stat-sub {
    font-size: 12px;
    color: #86868b;
}

/* 📱 移动端适配 */
@media (max-width: 768px) {
    .stats-grid-wrapper {
        grid-template-columns: repeat(2, 1fr); /* 手机上改2列 */
        gap: 15px;
    }
    .stat-value { font-size: 24px; }
}

/* 4. 页脚 (Footer) */
.home-footer {
    text-align: center;
    border-top: 1px solid #eee;
    padding-top: 30px;
    color: #999;
    font-size: 12px;
    line-height: 1.8;
}



/* ================== 🌟 首页新增板块样式 (Pro Plus) ================== */

/* 通用板块标题 */
.section-header {
    text-align: center;
    margin: 60px 0 30px 0;
}
.section-title {
    font-size: 28px;
    font-weight: 800;
    color: #1d1d1f;
    margin-bottom: 10px;
}
.section-subtitle {
    font-size: 16px;
    color: #86868b;
}

/* 1. 资源干货卡片 (Resources) */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}
.res-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    transition: transform 0.2s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.res-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.res-img-box {
    height: 160px;
    background: #f5f5f7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
}
.res-content {
    padding: 20px;
}
.res-tag {
    font-size: 11px;
    color: #007aff;
    background: #eef7ff;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    margin-bottom: 8px;
    display: inline-block;
}
.res-title {
    font-size: 16px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 8px;
    line-height: 1.4;
}
.res-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}

/* ================== 🗣️ 好评墙样式 ================== */

.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 24px; /* 两排之间的间距 */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); /* 两侧渐变消失效果 */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
    display: flex;
    gap: 20px; /* 卡片之间的间距 */
    width: max-content; /* 宽度自适应内容 */
}

/* 动画定义 */
.scroll-left {
    animation: scrollLeft 40s linear infinite; /* 40s转一圈，越小越快 */
}

.scroll-right {
    animation: scrollRight 45s linear infinite; /* 稍微错开一点速度 */
}

/* 鼠标放上去暂停，方便阅读 */
.marquee-track:hover {
    animation-play-state: paused;
}

@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* 移动一半距离（因为内容复制了一份） */
}

@keyframes scrollRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* 单个好评卡片样式 */
.review-card {
    width: 340px; /* 卡片宽度 */
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #e5e5ea;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition: transform 0.2s;
}

.review-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.06);
    border-color: #d1d1d6;
}

.review-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.user-info {
    flex: 1;
    overflow: hidden;
}

.user-info .name {
    font-size: 14px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 2px;
}

.user-info .school {
    font-size: 11px;
    color: #86868b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.score-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

/* 分数颜色 */
.score-badge.green { background: #dcfce7; color: #166534; }
.score-badge.blue { background: #dbeafe; color: #1e40af; }
.score-badge.purple { background: #f3e8ff; color: #6b21a8; }
.score-badge.orange { background: #ffedd5; color: #9a3412; }

.review-text {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 最多显示3行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-style: italic;
}

/* 3. 常见问题 (FAQ) */
.faq-container {
    max-width: 800px;
    margin: 0 auto 60px auto;
}
.faq-item {
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}
.faq-q {
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}
.faq-q svg {
    margin-right: 8px;
    color: #ff9800;
}
.faq-a {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    padding-left: 24px;
}

/* ================== 📡 新版情报站 (Intel Pro) ================== */

.intel-header-pro {
    margin: 50px 0 20px 0;
    padding: 0 5px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.ih-title {
    font-size: 22px;
    font-weight: 800;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ih-desc {
    font-size: 13px;
    color: #86868b;
    font-weight: 500;
}

.intel-grid-pro {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 两列布局 */
    gap: 20px;
    margin-bottom: 40px;
}

.intel-box {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    border: 1px solid #f0f0f0;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.intel-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
    border-color: transparent;
}

/* 各科主题色定义 */
.ib-reading { --theme: #34c759; --bg: #f0fdf4; }
.ib-listening { --theme: #af52de; --bg: #faf5ff; }
.ib-writing { --theme: #007aff; --bg: #eff6ff; }
.ib-speaking { --theme: #ff3b30; --bg: #fff1f2; }

/* 图标区域 */
.ib-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: var(--bg);
    color: var(--theme);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* 文字区域 */
.ib-content {
    flex: 1;
}
.ib-title {
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 6px;
}
.ib-info {
    font-size: 14px;
    color: #555;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ib-update {
    font-size: 11px;
    color: var(--theme);
    font-weight: 600;
    opacity: 0.8;
}

/* 箭头 */
.ib-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f5f5f7;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    transition: all 0.2s;
}
.intel-box:hover .ib-arrow {
    background: var(--theme);
    color: #fff;
}

/* 情报简报弹窗特别样式 */
.briefing-modal-header {
    background: linear-gradient(135deg, #f9f9f9 0%, #fff 100%);
    padding: 30px;
    border-bottom: 1px solid #eee;
}
.briefing-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
}
/* ================== 📜 情报流滚动视图 (Briefing Stream) ================== */

/* 1. 弹窗内容容器：限制高度，允许滚动 */
.briefing-body {
    padding: 20px 25px;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    /* 核心：限制最大高度为屏幕的 50%，超过就滚动 */
    max-height: 50vh; 
    overflow-y: auto;
    /* 平滑滚动体验 */
    scroll-behavior: smooth;
    background: #fbfbfd;
}

/* 2. 单条情报卡片 (每一次更新就是一个卡片) */
.intel-feed-card {
    background: #fff;
    border: 1px solid #e5e5ea;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px; /* 卡片之间的间距 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    position: relative;
}

/* 3. 卡片顶部：时间戳 */
.feed-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #f0f0f0;
}
.feed-time-badge {
    font-size: 12px;
    color: #86868b;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 4. 重点高亮标签 */
.feed-highlight-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
}
.tag-red { background: #fff1f2; color: #e11d48; }
.tag-blue { background: #eff6ff; color: #2563eb; }
.tag-green { background: #f0fdf4; color: #16a34a; }

/* 5. 卡片内容文本 */
.feed-content {
    font-size: 14px;
    color: #1d1d1f;
}
.briefing-section {
    margin-bottom: 20px;
    background: #fbfbfd;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
}
.briefing-section-title {
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}


/* ================== 🖱️ 交互特效增强 ================== */

/* 让情报卡片变成可点击的状态 */
.intel-feed-card {
    cursor: pointer; /* 鼠标变小手 */
    transition: all 0.2s ease-in-out; /* 动画过渡 */
}

/* 鼠标悬停时的效果 */
.intel-feed-card:hover {
    transform: translateY(-4px); /* 向上浮动 4像素 */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; /* 加深阴影，更有立体感 */
}

/* 点击时的微动效果（按压感） */
.intel-feed-card:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
}

/* ================== ✨ 视觉定位高亮特效 ================== */

/* 定义闪烁动画：黄色高亮闪三下 */
@keyframes flash-glow {
    0% { background-color: transparent; transform: scale(1); }
    50% { background-color: #fffbeb; transform: scale(1.02); box-shadow: 0 0 15px rgba(255, 193, 7, 0.5); border-color: #ffc107; }
    100% { background-color: transparent; transform: scale(1); }
}

/* 这个类名会被 JS 自动加到目标卡片上 */
.target-highlight {
    animation: flash-glow 1s ease-in-out 3; /* 闪3次，每次1秒 */
    transition: all 0.3s;
}

/* ================== 🎨 V3.0 Hero Split Design ================== */

/* 1. 容器：背景使用极淡的暖色渐变，营造纸张质感 */
/* 修改这里：增加 margin-bottom 实现呼吸感 */
.hero-split-container {
    background: linear-gradient(180deg, #fffcf5 0%, #fff 100%);
    border-bottom: 1px solid #f0f0f0;
    padding: 60px 20px 80px 20px;
    display: flex;
    justify-content: center;
    margin-bottom: 50px; /* <--- 核心修改：这里增加了80px的间距，让上下彻底分开 */
}

.hero-inner-wrapper {
    width: 100%;
    max-width: 1000px; /* 限制最大宽度，防止太散 */
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: space-between; /* 左右分开 */
    gap: 60px; /* 左右两栏的间距，保证不挤 */
}

/* --- 左侧：品牌区 --- */
.hero-brand-col {
    flex: 1; /* 占据剩余空间 */
    text-align: left;
}

/* 小标签 */
.brand-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e5e5ea;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #ff9f0a;
    margin-bottom: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

/* 主标题 */
.hero-main-title {
    font-size: 42px; /* 大号字体 */
    margin: 0 0 20px 0;
    line-height: 1.1;
    letter-spacing: -1px;
}

.highlight-mango {
    color: #1d1d1f;
    font-weight: 900;
}

.highlight-gray {
    color: #86868b;
    font-weight: 400;
}

/* Slogan */
.hero-slogan-group {
    margin-bottom: 24px;
}

.slogan-item.main {
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 6px;
}

.slogan-item.sub {
    font-size: 15px;
    color: #666;
    font-weight: 400;
}

/* 分割线 */
.hero-divider {
    width: 40px;
    height: 4px;
    background: #ff9f0a;
    border-radius: 2px;
    margin-bottom: 24px;
}

/* 底部特性点 */
.hero-feature-list {
    display: flex;
    gap: 20px;
}

.feature-point {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    background: rgba(255,255,255,0.6);
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.05);
}

/* --- 右侧：单词卡片 --- */
.hero-card-col {
    width: 420px; /* 固定宽度，像一张实体卡片 */
    flex-shrink: 0;
}

.daily-vocab-card {
    background: #fff;
    border: 1px solid #e5e5ea;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06); /* 高级悬浮阴影 */
    position: relative;
    transition: transform 0.3s;
}

.daily-vocab-card:hover {
    transform: translateY(-5px); /* 鼠标放上去微微浮起 */
}

/* 卡片顶部 */
.card-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px dashed #f0f0f0;
    padding-bottom: 12px;
}

.card-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #ff9f0a;
    background: #fff8e1;
    padding: 4px 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-refresh-word {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}

.btn-refresh-word:hover {
    color: #007aff;
}

/* 单词主体 */
.card-word-content {
    text-align: center;
    margin-bottom: 20px;
}

.word-text {
    font-size: 32px;
    font-weight: 800;
    color: #1d1d1f;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.word-meta {
    font-size: 14px;
    color: #666;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.word-pron {
    font-family: Arial, sans-serif;
    color: #86868b;
}

.meta-dot { color: #ddd; }

/* 例句框 */
.card-sentence-box {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 10px;
    position: relative;
}

.quote-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #ff9f0a;
}

#hero-sent {
    margin: 0;
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    text-align: left;
    padding-left: 20px; /* 让出引号的位置 */
    font-style: italic;
}

/* 📱 移动端适配 (手机上变成上下排列) */
@media (max-width: 768px) {
    .hero-inner-wrapper {
        flex-direction: column;
        gap: 40px;
    }
    .hero-brand-col {
        text-align: center;
    }
    .hero-divider { margin: 0 auto 20px auto; }
    .hero-feature-list { justify-content: center; }
    .hero-card-col { width: 100%; }
    .hero-main-title { font-size: 32px; }
}


/* ================== 🧭 新版悬浮导航样式 (Pro Glass) ================== */

/* 1. 容器居中 */
.nav-center-menu {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

/* 2. 核心：磨砂玻璃底座 */
.nav-glass-dock {
    display: flex;
    align-items: center;
    gap: 4px; /* 按钮之间的间距 */
    background: rgba(255, 255, 255, 0.7); /* 半透明白 */
    backdrop-filter: blur(20px); /* 核心：毛玻璃模糊 */
    -webkit-backdrop-filter: blur(20px); /* 兼容 Safari */
    padding: 5px; /* 内边距 */
    border-radius: 100px; /* 胶囊圆角 */
    border: 1px solid rgba(255, 255, 255, 0.5); /* 玻璃边缘高光 */
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.04), /* 柔和阴影 */
        0 1px 2px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

/* 鼠标放上去时，底座更清晰 */
.nav-glass-dock:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.nav-pill-btn {
    background: transparent;
    border: none;
    padding: 8px 20px; /*稍微加宽一点触控区*/
    border-radius: 30px;
    color: #1d1d1f; /* <--- 修改：由原来的 #666 改为深黑色，对比度更高 */
    font-size: 15px; /* <--- 修改：稍微加大1px */
    font-weight: 600; /* <--- 修改：加粗 */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease-in-out;
    position: relative;
    white-space: nowrap;
}

/* 悬停态：浅灰色背景 */
.nav-pill-btn:hover {
    color: #1d1d1f;
    background: rgba(0, 0, 0, 0.04);
}
/* 激活态：保持芒果色，但阴影更柔和 */
.nav-pill-btn.active {
    background: linear-gradient(135deg, #FFC107 0%, #FF9800 100%);
    color: #fff !important; /* 强制变白 */
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
    transform: scale(1.05);
}

.nav-pill-btn.active .nav-text,
.nav-pill-btn.active svg {
    color: #fff !important;
    stroke: #fff !important;
}

/* 小箭头 */
.nav-arrow {
    opacity: 0.5;
    transition: transform 0.2s;
}

.nav-pill-btn:hover .nav-arrow {
    opacity: 1;
    transform: translateY(2px); /* 悬停时箭头微动 */
}

/* 竖分割线 */
.nav-divider {
    width: 1px;
    height: 16px;
    background: rgba(0, 0, 0, 0.08);
    margin: 0 4px;
}

/* 4. 下拉菜单 (玻璃风格) */
.nav-dropdown-wrapper {
    position: relative;
}

/* 默认隐藏 */
.dropdown-menu-glass {
    position: absolute;
    top: 120%; /* 在按钮下方 */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    padding: 6px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.05);
    min-width: 130px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 100;
}

/* 悬停显示 */
.nav-dropdown-wrapper:hover .dropdown-menu-glass {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* 下拉菜单项 */
.glass-drop-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: #333;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.glass-drop-item:hover {
    background: #f5f5f7;
    color: #ff9800;
}

/* ================== 🥭 极简考试胶囊 (V2 Final) ================== */

/* 1. 胶囊容器 */
.mango-exam-capsule {
    display: flex;
    align-items: center;
    /* 核心：纯白背景 + 柔和的扩散阴影 */
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
    /* 圆角 */
    border-radius: 50px;
    /* 核心：非对称内边距，右侧(24px)比左侧(8px)更宽 */
    padding: 5px 24px 5px 8px; 
    /* 禁止文字被选中 */
    user-select: none;
    cursor: default;
}

/* 2. 图标尺寸调整 */
.capsule-icon {
    width: 22px; /* 稍微调小一点点，更精致 */
    height: 22px;
    margin-right: 10px; /* 图标和文字的间距 */
}

/* 3. 文字精致渲染 */
.capsule-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;     /* 字号适中 */
    font-weight: 600;    /* 半粗体，更有分量感 */
    color: #333333;      /* 深灰色，比纯黑更柔和高级 */
    letter-spacing: 0.5px; /* 微小的字间距，增加透气感 */
    line-height: 1;      /* 确保垂直居中 */
    /* 开启字体平滑抗锯齿渲染 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* style.css 最末尾添加 */

/* 修复口语模块加载动画不居中的 Bug */
.speaking-loading-wrapper {
    grid-column: 1 / -1 !important; /* 强制跨越所有列，占满整行 */
    width: 100%;
    text-align: center; 
    padding: 80px 0; 
    color: #666; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    gap: 15px;
}

.speaking-loading-wrapper span {
    font-size: 14px; 
    letter-spacing: 1px;
}

/* ========================================= */
/* 🎨 雅思机考专业样式 (Added by AI) */
/* ========================================= */

/* 1. 题目大容器：模仿机考的灰色背景卡片 */
.ielts-group-card {
    background-color: #f9fafb; /* 雅思灰 */
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 25px 30px;
    margin-bottom: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #374151;
}

/* 2. 题目标题 (Questions 1-10) */
.ielts-group-header {
    background-color: #2b7a78; /* 雅思深绿 */
    color: white;
    padding: 8px 15px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    display: inline-block;
    margin-bottom: 15px;
}

/* 3. HTML 内容区域的样式修复 */
.ielts-group-card h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #111;
    font-size: 18px;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 8px;
}
.ielts-group-card ul {
    padding-left: 20px;
    margin-bottom: 10px;
}
.ielts-group-card li {
    margin-bottom: 8px;
}

/* 4. 🔥 核心：嵌入式输入框样式 (长得像雅思官方) */
.ielts-gap-wrapper {
    display: inline-flex;
    align-items: center;
    margin: 0 4px;
    vertical-align: middle;
}

/* 题号小数字 */
.ielts-gap-num {
    font-weight: 800;
    font-size: 12px;
    color: #6b7280;
    margin-right: 4px;
    background: #e5e7eb;
    padding: 1px 5px;
    border-radius: 4px;
}

/* 输入框本体 */
input.ielts-gap-input {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 6px 10px;
    width: 140px; /* 宽度适中 */
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    background: #ffffff;
    transition: all 0.2s;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

/* 输入框选中时发光 */
input.ielts-gap-input:focus {
    border-color: #2b7a78;
    outline: none;
    box-shadow: 0 0 0 3px rgba(43, 122, 120, 0.15);
}

/* 5. 隐藏掉原来那种每行一个的丑题目 */
.hidden-item-row {
    display: none !important;
}


/* ========================================= */
/* 🛡️ [补丁] 听力专用样式 V2.0 (Section 2 & 3) */
/* ========================================= */

/* 1. 题目卡片容器优化 */
.listening-item-row {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #e5e7eb;
}
/* 最后一行不要边框 */
.listening-item-row:last-child {
    border-bottom: none;
}

/* 2. 左侧题号样式 */
.q-num-box {
    padding-top: 2px;
}
.q-num-text {
    font-weight: 800;
    color: #d97706; /* 雅思深黄 */
    font-size: 16px;
    width: 30px;
}

/* 3. 右侧内容区域 */
.q-content-box {
    flex: 1;
}
.q-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.q-title {
    font-weight: 600;
    color: #1f2937;
    font-size: 15px;
    line-height: 1.5;
}

/* 4. 单选题 (MCQ) 样式 - Section 2 */
.mcq-options-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.radio-label-mcq {
    display: flex;
    align-items: flex-start; /* 顶部对齐 */
    padding: 12px 16px;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.radio-label-mcq:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
}

/* 选中状态（通过 :has 选择器实现，如果浏览器不支持也无妨） */
.radio-label-mcq:has(input:checked) {
    background-color: #eff6ff; /* 浅蓝背景 */
    border-color: #3b82f6;     /* 蓝色边框 */
}

/* 隐藏原生 Input 更加美观，或者保留但美化 */
.radio-label-mcq input {
    margin-top: 4px;
    margin-right: 12px;
    accent-color: #2563eb; /* 蓝色勾选框 */
    transform: scale(1.1);
}

.mcq-text {
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
}
.mcq-char {
    font-weight: 700;
    margin-right: 4px;
}

/* 5. 匹配题 (Matching) 样式 - Section 3 */
.matching-row {
    margin-top: 8px;
    background: #f8fafc;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #f1f5f9;
}
.matching-label {
    font-size: 12px; 
    color: #64748b; 
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
}
.matching-bubble-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.matching-bubble {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    background: #fff;
    cursor: pointer;
    font-weight: 600;
    color: #475569;
    font-size: 14px;
    transition: all 0.2s;
    user-select: none;
}

.matching-bubble input {
    display: none; /* 彻底隐藏原生单选点 */
}

/* 选中后的气泡 */
.matching-bubble:has(input:checked) {
    background-color: #2563eb;
    color: #fff;
    border-color: #2563eb;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
    transform: translateY(-1px);
}

/* 6. 普通填空框 (Section 1/4 回退版) */
.ielts-gap-input.full-width {
    width: 100%;
    max-width: 300px;
    padding: 8px 12px;
}

/* 7. Section 3 顶部的选项框 (Box of Options) */
.options-box-container {
    background: #fff;
    border: 2px solid #e2e8f0;
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 8px;
}
.options-box-title {
    font-weight: 800;
    color: #334155;
    margin-bottom: 12px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.options-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 响应式网格 */
    gap: 10px;
}
.option-item {
    font-size: 14px;
    color: #333;
    background: #f8fafc;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #f1f5f9;
}
.option-item strong {
    color: #2563eb;
    margin-right: 6px;
}

/* ============================================================ */
/* 💎 [UI 精修版] 雅思听力界面最终定稿 (Pro Look) */
/* ============================================================ */

/* 1. 全局容器与背景 */
#exam-view.listening-mode #q-panel {
    flex: 1;
    padding: 20px 40px !important;
    background-color: #f9fafb; /* 整个右侧背景微灰 */
}

#exam-view.listening-mode .ielts-group-card {
    width: 100% !important;
    max-width: 1000px !important; /* 宽度适中 */
    margin: 0 auto 40px auto !important; /* 卡片间距 */
    background: #fff; /* 卡片纯白 */
    padding: 30px 40px !important; /* 内边距加大 */
    border: 1px solid #e5e7eb; /* 边框变细 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* 阴影极淡 */
    border-radius: 8px; /* 圆角适中 */
}

/* 2. 修复“头太大”：Section 标题回归专业 */
#exam-view.listening-mode .group-header {
    display: block !important;
    background: transparent !important;
    border: none !important;
    border-left: 6px solid #2b7a78 !important; /* 竖线保持 */
    padding-left: 12px !important;
    margin-bottom: 20px !important;
    
    /* 🔥 修正：字号改为 22px，去掉了夸张的 32px */
    color: #2b7a78 !important;
    font-size: 22px !important; 
    font-weight: 800 !important;
    text-transform: uppercase;
    line-height: 1.2;
}

/* 3. 说明文字微调 */
#exam-view.listening-mode .instruction-box {
    font-size: 16px !important;
    color: #555 !important;
    font-weight: 500;
    margin-bottom: 25px !important;
    padding-left: 6px;
}

/* 4. 去“盒子化”：让题目看起来更通透 */
#exam-view.listening-mode .listening-item-row {
    background: transparent !important; /* ❌ 去掉灰/白底色 */
    border: none !important; /* ❌ 去掉边框 */
    border-bottom: 1px dashed #e5e7eb !important; /* 只留底部分隔线 */
    padding: 20px 10px !important; /* 垂直间距 */
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}
/* 最后一题不要线 */
#exam-view.listening-mode .listening-item-row:last-child {
    border-bottom: none !important;
}

/* 题目文字 */
#exam-view.listening-mode .q-title {
    font-size: 16px !important;
    color: #111;
    font-weight: 600;
}

/* ------------------------------------------------ */
/* 🔘 核心修复：Section 3 匹配题样式 (放大按钮) */
/* ------------------------------------------------ */

/* 顶部选项框 (The Box) 美化 */
#exam-view.listening-mode .options-box-container {
    background: #f8fafc; /* 浅灰蓝背景 */
    border: 1px solid #cbd5e1;
    padding: 15px 20px;
    border-radius: 6px;
    margin-bottom: 25px;
}
#exam-view.listening-mode .options-box-title {
    font-size: 13px;
    font-weight: 800;
    color: #475569;
    margin-bottom: 10px;
    text-transform: uppercase;
}
#exam-view.listening-mode .options-list {
    display: grid;
    /* 自动适应宽度，每列最小 150px */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 
    gap: 10px;
}
#exam-view.listening-mode .option-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 4px;
    color: #334155;
}
#exam-view.listening-mode .option-item strong {
    color: #2b7a78; /* 字母颜色 */
    font-weight: 800;
    margin-right: 5px;
}

/* 🔴 重点：放大下面的圆形按钮 (A, B, C...) */
#exam-view.listening-mode .matching-bubble {
    width: 42px !important;  /* 🔥 加大宽度 */
    height: 42px !important; /* 🔥 加大高度 */
    font-size: 16px !important; /* 🔥 字号加大 */
    margin-right: 8px; /* 间距 */
    border: 1px solid #cbd5e1;
    color: #64748b;
    background: #fff;
    transition: all 0.2s;
}

/* 选中状态 */
#exam-view.listening-mode .matching-bubble:has(input:checked) {
    background-color: #2b7a78 !important; /* 改用雅思绿，不用廉价蓝 */
    border-color: #2b7a78 !important;
    color: #fff !important;
    font-weight: bold;
    transform: scale(1.05); /* 选中时稍微放大 */
}

/* ------------------------------------------------ */
/* ✅ Section 2 单选题样式修复 */
/* ------------------------------------------------ */
#exam-view.listening-mode .radio-label-mcq {
    background: #fff;
    border: 1px solid #e2e8f0 !important;
    padding: 14px 18px !important; /* 选项大一点，好点 */
    border-radius: 6px !important;
    margin-bottom: 10px;
}
#exam-view.listening-mode .radio-label-mcq:hover {
    background: #f8fafc;
    border-color: #94a3b8 !important;
}
/* 选中状态 */
#exam-view.listening-mode .radio-label-mcq:has(input:checked) {
    background: #f0fdfa !important; /* 极淡的绿色背景 */
    border-color: #2b7a78 !important; /* 绿色边框 */
    box-shadow: 0 0 0 1px #2b7a78; /* 加粗边框效果 */
}




/* --- 2. 芒果主题配色定义 --- */
:root {
    --mango-primary: #FFB300;  /* 核心芒果黄：温暖、醇厚 */
    --mango-hover: #FFA000;    /* 悬停时的深芒果色 */
    --mango-light: #FFF8E1;    /* 极淡的芒果奶昔背景色 */
    --mango-green: #4CAF50;    /* 清新叶子绿（辅助色） */
    --text-dark: #374151;      /* 深灰文字 */
    --text-gray: #6B7280;      /* 次要灰文字 */
}

/* --- 3. 应用芒果色彩 --- */

/* 标题栏的左侧竖线 */
#exam-view#exam-view.listening-mode .group-header,
#exam-view#exam-view.listening-mode .ielts-group-header {
    border-left-color: var(--mango-primary) !important;
    color: var(--text-dark) !important; /* 标题文字用深灰，更稳重 */
}

/* 选项 A, B, C... 的强调色 */
#exam-view.listening-mode .option-item strong {
    color: var(--mango-primary) !important;
}

/* 匹配题气泡 (Matching Bubble) - 选中状态 */
#exam-view#exam-view.listening-mode .matching-bubble:has(input:checked) {
    background-color: var(--mango-primary) !important;
    border-color: var(--mango-primary) !important;
    color: #fff !important; /* 白字 */
    box-shadow: 0 2px 4px rgba(255, 179, 0, 0.3) !important; /* 芒果色光晕 */
}

/* 单选题 (MCQ) - 选中状态 */
#exam-view.listening-mode .radio-label-mcq:has(input:checked) {
    background-color: var(--mango-light) !important; /* 浅芒果背景 */
    border-color: var(--mango-primary) !important;   /* 芒果边框 */
}

/* 填空题输入框 - 聚焦状态 */
input.ielts-gap-input:focus {
    border-color: var(--mango-primary) !important;
    box-shadow: 0 0 0 3px rgba(255, 179, 0, 0.2) !important;
}

/* 左侧题号 (Q13, Q14...) */
.q-num-text {
    color: var(--mango-primary) !important;
}

/* 播放器进度条颜色 */
input[type=range]::-webkit-slider-thumb {
    background: var(--mango-green) !important; /* 用绿色点缀进度条 */
}

/* 底部提交按钮 (假设它有 .btn-submit 类) */
.btn-submit {
    background-color: var(--mango-primary) !important;
    border-color: var(--mango-primary) !important;
    color: #fff !important;
}
.btn-submit:hover {
    background-color: var(--mango-hover) !important;
    border-color: var(--mango-hover) !important;
}

/* ========================================================================== */
/* 🛠️ 修复：地图题与流程图（Section 3）隐形盒子的缩进不对齐问题 */
/* ========================================================================== */
#exam-view#exam-view.listening-mode .ielts-group-card {
    padding-left: 0 !important;  /* 取消之前多余的左侧缩进 */
    padding-right: 0 !important; /* 取消右侧多余缩进 */
    padding-top: 10px !important;
}


/* ========================================================================== */
/* ✍️ 填空题 (Gapfill) 沉浸式高级排版优化 */
/* ========================================================================== */

/* 1. 修复填空题容器的行高和整体质感 */
#exam-view.listening-mode .ielts-group-content div[style*="border"] {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    padding: 35px 45px !important;
    line-height: 2.6 !important; /* 拉大行高，让呼吸感更强 */
    font-size: 16px !important;
    color: #334155 !important;
    border-radius: 8px !important;
}

/* 2. 优化小标题 (如 Job Enquiries) 增加芒果色底宽 */
#exam-view.listening-mode .ielts-group-content strong {
    color: #0f172a !important;
    font-size: 18px !important;
    display: inline-block !important;
    margin-bottom: 12px !important;
    margin-top: 15px !important;
    border-bottom: 3px solid var(--mango-primary, #FFB300) !important; /* 芒果黄强调线 */
    padding-bottom: 4px !important;
    letter-spacing: 0.5px !important;
}
#exam-view.listening-mode .ielts-group-content strong:first-child {
    margin-top: 0 !important; /* 第一个小标题顶部不留白 */
}

/* 3. 题号小标签 (改为高级深石板色，白字) */
#exam-view.listening-mode .ielts-gap-num {
    background-color: #1e293b !important; 
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 4px 9px !important;
    border-radius: 5px !important;
    margin-right: 8px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    display: inline-block !important;
    line-height: 1 !important;
}

/* 4. 输入框本体优化 (修长、微灰底色聚焦变白) */
#exam-view.listening-mode input.ielts-gap-input {
    height: 38px !important;
    border: 2px solid #cbd5e1 !important; /* 稍微加粗边框，增加输入踏实感 */
    border-radius: 6px !important;
    padding: 0 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    width: 170px !important;
    background-color: #f8fafc !important; /* 极淡灰背景 */
    transition: all 0.2s ease !important;
}

/* 5. 输入框包裹器：强制完美的垂直居中对齐 */
#exam-view.listening-mode .ielts-gap-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important; /* 强行修正和周围文字的对齐 */
    margin: 0 6px !important;
    transform: translateY(-2px) !important; /* 微调：整体向上提一点点，完美对齐文本基线 */
}

/* 6. 保留我们之前做好的聚焦发光效果 */
#exam-view.listening-mode input.ielts-gap-input:focus {
    background-color: #ffffff !important;
    border-color: var(--mango-primary, #FFB300) !important;
    box-shadow: 0 0 0 3px rgba(255, 179, 0, 0.15) !important;
    outline: none !important;
}

/* ========================================================================== */
/* [专业感修复] Section 3 匹配题选项框 (Options Box) 字体与排版净化 */
/* ========================================================================== */

/* 1. 修复顶部问题描述文字：去除大写、斜体、阴影，改用纯粹的深灰色 */
#exam-view.listening-mode .options-box-title {
    text-transform: none !important; /* 取消强制大写 */
    font-style: normal !important;   /* 取消斜体 */
    text-shadow: none !important;    /* 取消任何自带的文字阴影 */
    color: #1f2937 !important;       /* 使用专业深黑灰，彻底去除廉价的蓝色调 */
    font-size: 15px !important;      /* 字号微调，方便阅读 */
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    margin-bottom: 15px !important;
}

/* 2. 修复选项 A, B, C... 里面的文字：去除斜体、阴影，颜色对齐 */
#exam-view.listening-mode .option-item {
    font-style: normal !important;   /* 强制取消斜体 */
    text-shadow: none !important;    /* 强制取消阴影 */
    color: #374151 !important;       /* 正文专业灰 */
    font-weight: 500 !important;
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* 3. 修复大框的整体背景：去除泛蓝色的背景，改用中性极淡灰 */
#exam-view.listening-mode .options-box-container {
    background-color: #f9fafb !important; /* 中性灰，不抢戏 */
    border-color: #e5e7eb !important;
}

/* 4. 修复题干提示文字 (Choose the correct letter...) 的过度倾斜 */
#exam-view.listening-mode .instruction-box {
    font-style: normal !important; /* 强制拉直，拒绝斜体 */
    color: #4b5563 !important;
}

/* ========================================================================== */
/* 📊 修复：表格题 (Table) 专属响应式适配与美化 */
/* ========================================================================== */

/* 1. 核心修复：防止表格撑破容器，允许在内部横向滑动 */
#exam-view.listening-mode .ielts-group-content table {
    display: block !important;
    overflow-x: auto !important;
    width: 100% !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    margin-top: 15px !important;
    margin-bottom: 5px !important;
}

/* 2. 美化表头和单元格，让它看起来更高级 */
#exam-view.listening-mode .ielts-group-content th {
    background-color: #f8fafc !important;
    color: #1e293b !important;
    font-weight: 700 !important;
    white-space: nowrap !important; /* 表头文字尽量不换行 */
}
#exam-view.listening-mode .ielts-group-content td, 
#exam-view.listening-mode .ielts-group-content th {
    border-color: #e2e8f0 !important;
    padding: 12px 16px !important; /* 内边距稍微紧凑一点 */
    vertical-align: middle !important;
}

/* 3. 智能输入框：在表格里面，输入框必须变灵活，不能定死 170px */
#exam-view.listening-mode .ielts-group-content table input.ielts-gap-input {
    width: 100% !important;        /* 填满单元格的可用空间 */
    max-width: 130px !important;   /* 最大不超过 130px，防止撑爆 */
    min-width: 70px !important;    /* 保证至少能看见几个字母 */
    height: 34px !important;       /* 在表格里稍微矮一点点，显得精致 */
    padding: 0 8px !important;
}

/* 4. 微调输入框和文字的对齐间距 */
#exam-view.listening-mode .ielts-group-content table .ielts-gap-wrapper {
    margin: 0 4px !important;
}



/* ========================================================================== */
/* 修复：听力小红旗标记 (Flag Button) 状态样式 */
/* ========================================================================== */

/* 1. 基础按钮样式优化，去除原生背景 */
.flag-btn {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 4px !important;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* 2. 鼠标悬停时的预览颜色（芒果主题的橙黄色） */
.flag-btn:hover svg {
    stroke: var(--mango-primary, #FFB300) !important;
}

/* 3. 核心修复：当被点击激活 (active) 时，强制变成红色 */
.flag-btn.active svg {
    stroke: #ef4444 !important; /* 醒目的正红色边框 */
    fill: #fee2e2 !important;   /* 内部加上极淡的浅红色填充，视觉更饱满 */
    transform: scale(1.1);      /* 点亮时稍微放大一点点，增加动态反馈 */
}


/* ========================================================================== */
/* ✅ [Task 1] 听力判分专属样式 (Listening Grading States) */
/* ========================================================================== */

/* --- 1. 填空题 (Gapfill) 判分状态 --- */
/* 正确：绿色边框 + 浅绿背景 */
#exam-view.listening-mode input.ielts-gap-input.correct {
    border-color: #22c55e !important;
    background-color: #f0fdf4 !important;
    color: #15803d !important;
    box-shadow: 0 0 0 1px #22c55e !important;
}
/* 错误：红色边框 + 浅红背景 */
#exam-view.listening-mode input.ielts-gap-input.wrong {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
    box-shadow: 0 0 0 1px #ef4444 !important;
}

/* --- 2. 单选题 (MCQ) 判分状态 --- */
/* 正确选项：绿色背景 */
#exam-view.listening-mode .radio-label-mcq.correct {
    background-color: #dcfce7 !important;
    border-color: #22c55e !important;
}
#exam-view.listening-mode .radio-label-mcq.correct .mcq-char {
    color: #15803d !important;
}

/* 错误选项（用户选错的）：红色背景 */
#exam-view.listening-mode .radio-label-mcq.wrong {
    background-color: #fee2e2 !important;
    border-color: #ef4444 !important;
}
#exam-view.listening-mode .radio-label-mcq.wrong .mcq-char {
    color: #b91c1c !important;
}

/* --- 3. 匹配题 (Matching) 气泡判分状态 --- */
/* 正确 */
#exam-view.listening-mode .matching-bubble.correct {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    color: white !important;
}
/* 错误 */
#exam-view.listening-mode .matching-bubble.wrong {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    color: white !important;
}

/* --- 4. 听力专属解析框 (极简版) --- */
.listening-feedback-box {
    margin-top: 12px;
    padding: 12px 15px;
    background-color: #f8fafc;
    border-left: 4px solid #94a3b8; /* 默认灰色条 */
    border-radius: 4px;
    font-size: 14px;
    display: none; /* 默认隐藏 */
    animation: fadeIn 0.3s ease;
}

.listening-feedback-box.is-correct {
    border-left-color: #22c55e;
    background-color: #f0fdf4;
}

.listening-feedback-box.is-wrong {
    border-left-color: #ef4444;
    background-color: #fef2f2;
}

.lis-feedback-row {
    margin-bottom: 6px;
    line-height: 1.5;
}
.lis-feedback-label {
    font-weight: 700;
    margin-right: 6px;
    font-size: 12px;
    text-transform: uppercase;
    color: #64748b;
}

/* ================================================= */
/* 🔓 [Task 6] 听力复盘模式：左右分屏恢复 (Review Split) */
/* ================================================= */

/* 1. 当父容器拥有 .listening-review-active 类时，强制开启 Flex 布局 */
#exam-view.listening-mode.listening-review-active .split-pane {
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;
}

/* 2. 左侧原文面板：显形，占 45% 宽度 */
#exam-view.listening-mode.listening-review-active #text-panel {
    display: block !important;
    width: 45% !important;
    border-right: 1px solid #e5e5ea !important;
    background: #fff !important;
    z-index: 10;
}

/* 3. 右侧题目面板：向右挤，占 55% 宽度 */
#exam-view.listening-mode.listening-review-active #q-panel {
    width: 55% !important;
    max-width: none !important; /* 取消最大宽度限制 */
    margin: 0 !important;
    border-left: none !important;
    background-color: #f9fafb !important;
}

/* 4. 确保右侧面板里的卡片适应分屏宽度 */
#exam-view.listening-mode.listening-review-active .ielts-group-card {
    padding: 25px 30px !important; /*稍微减小内边距以适应变窄的宽度*/
}


/* ========================================================================== */
/* 🎨 [Task 7] 听力解析与答案框深度美化 (Listening UI Polish) */
/* ========================================================================== */

/* --- 1. 听力解析框 (Feedback Box) 进化版 --- */
.listening-feedback-box {
    margin-top: 15px;
    padding: 16px 20px;
    background-color: #f8fafc; /* 极淡的灰蓝色背景 */
    border-left: 5px solid #cbd5e1; /* 默认灰色左侧条 */
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.6;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    animation: slideDown 0.3s ease-out;
}

/* 正确状态：清新的绿色 */
.listening-feedback-box.is-correct {
    border-left-color: #22c55e;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0; /* 微弱的绿色边框 */
    border-left-width: 5px;
}

/* 错误状态：柔和的红色 */
.listening-feedback-box.is-wrong {
    border-left-color: #ef4444;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-left-width: 5px;
}

/* 解析行间距优化 */
.lis-feedback-row {
    margin-bottom: 8px;
    display: flex;
    align-items: baseline; /* 文字基线对齐 */
}
.lis-feedback-row:last-child {
    margin-bottom: 0;
}

/* 标签文字样式 (Result, Answer...) */
.lis-feedback-label {
    font-weight: 700;
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 120px; /* 固定宽度，对齐右侧内容 */
    display: inline-block;
}

/* 解析正文样式 */
.lis-feedback-content {
    flex: 1;
    color: #334155;
    font-weight: 500;
}

/* --- 2. 单选题 (MCQ) 选项优化 --- */
.mcq-options-container {
    display: flex;
    flex-direction: column;
    gap: 12px; /* 选项间距拉大 */
    margin-top: 10px;
}

.radio-label-mcq {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px; /* 圆角加大 */
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.radio-label-mcq:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

/* 选项字母 (A, B, C) */
.mcq-char {
    font-weight: 800;
    font-size: 15px;
    color: #475569;
    margin-right: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 4px;
}

/* 选项文字 */
.mcq-text {
    font-size: 15px; /* 字号加大，更易读 */
    color: #1e293b;
    flex: 1;
}

/* --- 3. 匹配题 (Matching) 气泡优化 --- */
.matching-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f8fafc;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid #e2e8f0;
}

.matching-label {
    font-weight: 700;
    color: #475569;
    font-size: 14px;
}

.matching-bubble-container {
    display: flex;
    gap: 8px;
}

.matching-bubble {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.matching-bubble:hover {
    border-color: #94a3b8;
    color: #334155;
}

/* 选中状态 (听力专用) */
#exam-view.listening-mode input[type="radio"]:checked + .mcq-text .mcq-char {
    background-color: #3b82f6;
    color: #fff;
}
#exam-view.listening-mode .matching-bubble:has(input:checked) {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
    box-shadow: 0 2px 5px rgba(59, 130, 246, 0.3);
}

/* --- 4. 动画 --- */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================ */
/* 🧹 [视觉净化] 移除听力题目中多余的干扰黄线 */
/* ============================================================ */

/* 1. 撤销表格(table)内所有文字的下划线 - 解决图片中左侧标签全是黄线的问题 */
#exam-view.listening-mode .ielts-group-content table strong,
#exam-view.listening-mode .ielts-group-content td strong,
#exam-view.listening-mode .ielts-group-content th strong {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* 2. 限制黄线仅出现在真正的“大标题”上 */
/* 只有直接属于内容容器的标题才带线，嵌套在行内或列表里的不带 */
#exam-view.listening-mode .ielts-group-content strong {
    border-bottom: none !important; /* 先全局撤销 */
}

/* 3. 精准恢复：只给 Problems, Comments, To do 这类大标题加线 */
/* 我们通过检测它是否单独占一行（display: block）或者特定的结构来恢复 */
#exam-view.listening-mode .ielts-group-content > strong,
#exam-view.listening-mode .ielts-group-content > p > strong {
    display: inline-block !important;
    border-bottom: 3px solid var(--mango-primary, #FFB300) !important;
    padding-bottom: 4px !important;
    margin-bottom: 15px !important;
    margin-top: 20px !important;
}

/* 4. 修复图片中 Model type 后面那个 a 字也被划线的问题 */
#exam-view.listening-mode .ielts-group-content span {
    border-bottom: none !important;
}

/* --- 🚀 核心修复：解锁右侧面板全域滚动 --- */

/* 1. 让右侧面板变成可滚动容器 */
.listening-mode #q-panel {
    height: calc(100vh - 70px) !important; /* 减去顶部导航的高度 */
    overflow-y: auto !important;           /* 强制开启垂直滚动 */
    overflow-x: hidden !important;
    padding-bottom: 100px !important;      /* 给底部留出呼吸空间 */
    background-color: #ffffff !important;
}

/* 2. 为右侧面板定制一个精致的滚轮 (解决你说没有滚轮的问题) */
.listening-mode #q-panel::-webkit-scrollbar {
    width: 6px; /* 滚轮宽度 */
}

.listening-mode #q-panel::-webkit-scrollbar-track {
    background: transparent; /* 轨道透明 */
}

.listening-mode #q-panel::-webkit-scrollbar-thumb {
    background: #e2e8f0; /* 滚轮颜色：淡淡的灰色 */
    border-radius: 10px;
}

.listening-mode #q-panel::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1; /* 鼠标悬停时变深 */
}
/* ==========================================
   🎯 智能传送门：目标高亮闪烁动画
   ========================================== */
.target-highlight {
    animation: flashYellow 1s ease-in-out 3 !important; /* 闪烁3次，每次1秒 */
    border: 2px solid #ff9f0a !important; /* 加上芒果标志性的橙色边框 */
    border-radius: 16px; /* 适配你的卡片圆角 */
}

@keyframes flashYellow {
    0% { background-color: transparent; box-shadow: none; transform: scale(1); }
    50% { 
        background-color: rgba(255, 159, 10, 0.15); 
        box-shadow: 0 0 20px rgba(255, 159, 10, 0.4); 
        transform: scale(1.02); /* 微微放大一点点，吸引注意力 */
    }
    100% { background-color: transparent; box-shadow: none; transform: scale(1); }
}