/* 基本样式 */
body {
  background-color: #f5f7fa;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

/* 柔和的浅紫色主题 */
:root {
  --primary-color: #b19cd9;
  --primary-hover: #a08bd0;
  --primary-light: #d8c5f0;
  --primary-lighter: #f0e8f7;
}

code.syntax-key {
  color: #d87f7f;
  font-weight: 600;
}

.tooltip.format-help-tooltip code.syntax-key {
  color: #d87f7f;
}

/* 夜间主题 */
[data-theme="dark"] {
  --primary-color: #b19cd9;
  --primary-hover: #a08bd0;
  --primary-light: #d8c5f0;
  --primary-lighter: #f0e8f7;
  background-color: #1a1a1a;
  color: #ffffff;
}

[data-theme="dark"] body {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

[data-theme="dark"] .main-header {
  background: linear-gradient(135deg, var(--primary-color) 0%, #9b8cd8 100%);
  box-shadow: 0 2px 10px rgba(177, 156, 217, 0.3);
}

[data-theme="dark"] .card {
  background-color: #2d2d2d;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  color: #ffffff;
}

[data-theme="dark"] .card-body {
  background-color: #2d2d2d;
  color: #ffffff;
}

[data-theme="dark"] .btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-check:checked + .btn-outline-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: white !important;
}

[data-theme="dark"] .form-control {
  background-color: #3d3d3d;
  border-color: #4d4d4d;
  color: #ffffff;
}

[data-theme="dark"] .form-control:focus {
  background-color: #3d3d3d;
  border-color: var(--primary-color);
  color: #ffffff;
  box-shadow: 0 0 0 0.2rem rgba(177, 156, 217, 0.25);
}

[data-theme="dark"] .upload-zone {
  background-color: #2d2d2d;
  border-color: #4d4d4d;
  color: #ffffff;
}

[data-theme="dark"] .upload-zone:hover {
  border-color: var(--primary-color);
  background-color: #3d3d3d;
}

[data-theme="dark"] .file-item {
  background-color: #3d3d3d;
  border-color: #4d4d4d;
  color: #ffffff;
}

[data-theme="dark"] .main-footer {
  background-color: #2d2d2d;
  border-top-color: #4d4d4d;
  color: #ffffff;
}

/* 夜间模式下文本框辅助文字样式 */
[data-theme="dark"] .form-text {
  color: #adb5bd !important;
}

[data-theme="dark"] .text-muted {
  color: #adb5bd !important;
}

[data-theme="dark"] .form-control::placeholder {
  color: #adb5bd !important;
}

[data-theme="dark"] .bg-light {
  background-color: #3d3d3d !important;
}

/* 夜间模式下反馈模态框样式 */
[data-theme="dark"] .modal-content {
  background-color: #2d2d2d !important;
  color: #ffffff !important;
}

[data-theme="dark"] .modal-header {
  background-color: #3d3d3d !important;
  border-bottom-color: #4d4d4d !important;
}

[data-theme="dark"] .modal-footer {
  background-color: #3d3d3d !important;
  border-top-color: #4d4d4d !important;
}

[data-theme="dark"] .modal-body {
  background-color: #2d2d2d !important;
}

[data-theme="dark"] .modal-body .form-label {
  color: #ffffff !important;
}

[data-theme="dark"] .modal-body .form-text {
  color: #adb5bd !important;
}

[data-theme="dark"] .modal-body .form-control {
  background-color: #3d3d3d !important;
  border-color: #4d4d4d !important;
  color: #ffffff !important;
}

[data-theme="dark"] .modal-body .form-control:focus {
  background-color: #3d3d3d !important;
  border-color: var(--primary-color) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .modal-body .form-control::placeholder {
  color: #adb5bd !important;
}

[data-theme="dark"] .modal-body .form-select {
  background-color: #3d3d3d !important;
  border-color: #4d4d4d !important;
  color: #ffffff !important;
}

[data-theme="dark"] .modal-body .form-select:focus {
  background-color: #3d3d3d !important;
  border-color: var(--primary-color) !important;
  color: #ffffff !important;
}

/* 夜间模式下所有模态框标题样式 */
[data-theme="dark"] .modal-title {
  color: #ffffff !important;
}

/* 夜间模式下模态框关闭按钮样式 */
[data-theme="dark"] .btn-close {
  filter: invert(1) !important;
}

/* 夜间模式下模态框中的文字样式 */
[data-theme="dark"] .modal-body .text-muted {
  color: #adb5bd !important;
}

[data-theme="dark"] .modal-body .alert {
  background-color: #3d3d3d !important;
  color: #ffffff !important;
  border-color: #4d4d4d !important;
}

[data-theme="dark"] .modal-body .alert-heading {
  color: #ffffff !important;
}

[data-theme="dark"] .feature-card {
  background: linear-gradient(135deg, rgba(66, 66, 66, 0.6), rgba(80, 80, 80, 0.3));
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .feature-tag {
  background-color: rgba(255, 255, 255, 0.08);
  color: #f0e8f7;
}

[data-theme="dark"] .feature-title,
[data-theme="dark"] .section-title {
  color: #ffffff;
}

[data-theme="dark"] .feature-desc,
[data-theme="dark"] .section-subtitle {
  color: #d1d5db;
}

[data-theme="dark"] .feature-visual--split .panel-index,
[data-theme="dark"] .feature-visual--merge .panel-index,
[data-theme="dark"] .feature-visual--rename .panel-index,
[data-theme="dark"] .feature-visual--split .panel-line,
[data-theme="dark"] .feature-visual--merge .panel-line,
[data-theme="dark"] .feature-visual--rename .panel-line {
  fill: #1f2933;
}

[data-theme="dark"] .feature-visual--rename .badge-text {
  fill: #1f2933;
}

[data-theme="dark"] .feature-showcase {
  background: radial-gradient(circle at top, rgba(177, 156, 217, 0.12), transparent 45%), radial-gradient(circle at bottom, rgba(118, 181, 255, 0.08), transparent 50%);
}

[data-theme="dark"] .feature-visual .panel rect {
  stroke: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .feature-visual--split .panel-single rect,
[data-theme="dark"] .feature-visual--merge .panel-dual rect,
[data-theme="dark"] .feature-visual--rename .panel-list rect {
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.25));
}

.feature-showcase {
  position: relative;
  background: linear-gradient(180deg, rgba(245, 247, 250, 0.7) 0%, rgba(255, 255, 255, 0) 75%);
  overflow: hidden;
}

.feature-carousel {
  position: relative;
  display: block;
}

.feature-carousel-viewport {
  overflow: hidden;
}

.feature-carousel-track {
  display: flex;
  transition: transform 0.6s ease;
}

.feature-carousel-track .feature-card {
  min-width: 100%;
  flex: 0 0 100%;
  margin-right: 0;
}

.feature-carousel-controls {
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.feature-nav {
  position: relative;
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(177, 156, 217, 0.35);
  background: #ffffff;
  color: #5a4a96;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.feature-nav:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(84, 73, 135, 0.2);
}

[data-theme="dark"] .feature-nav {
  background: rgba(45, 45, 45, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e8ddff;
}

.feature-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}

.feature-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(146, 123, 202, 0.4);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.feature-dot.is-active {
  width: 42px;
  border-radius: 999px;
  background: linear-gradient(135deg, #b19cd9, #8f76d6);
  box-shadow: 0 6px 16px rgba(142, 119, 208, 0.25);
}

[data-theme="dark"] .feature-carousel-controls {
  background: none;
  border: none;
  box-shadow: none;
}

.feature-dot:focus-visible,
.feature-nav:focus-visible,
.faq-question:focus-visible {
  outline: 3px solid rgba(177, 156, 217, 0.45);
  outline-offset: 3px;
}

.feature-showcase::before,
.feature-showcase::after {
  content: '';
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.35;
  pointer-events: none;
}

.feature-showcase::before {
  top: -160px;
  right: -80px;
  background: #b19cd9;
}

.feature-showcase::after {
  bottom: -140px;
  left: -60px;
  background: #76b5ff;
}

.section-heading .section-eyebrow {
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #9b8cd8;
  font-weight: 600;
}

.section-title {
  font-weight: 700;
  color: #2d2255;
}

.section-subtitle {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.section-subtitle--singleline {
  white-space: nowrap;
}

@media (max-width: 576px) {
  .section-subtitle--singleline {
    white-space: normal;
  }
}

.feature-grid {
  display: grid;
  gap: 3.5rem;
}

.feature-card {
  display: grid;
  gap: 2rem;
  align-items: center;
  justify-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  background: #ffffff;
  border-radius: 28px;
  padding: 2.5rem;
  box-shadow: 0 30px 60px rgba(84, 73, 135, 0.18), 0 0 0 1px rgba(177, 156, 217, 0.12);
  border: none;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  overflow: hidden;
  background-clip: padding-box;
}

.feature-card--reverse {
  direction: rtl;
}

.feature-card--reverse .feature-copy,
.feature-card--reverse .feature-visual {
  direction: ltr;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 70px rgba(84, 73, 135, 0.2);
}

.feature-copy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 500px;
  width: 100%;
  text-align: left;
  justify-self: stretch;
}

.feature-tag {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background-color: rgba(155, 140, 216, 0.12);
  color: #6c4fb3;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}

.feature-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #2b1f53;
  margin-bottom: 0;
}

.feature-desc {
  font-size: 1rem;
  line-height: 1.7;
  color: #4f5563;
  margin-bottom: 0;
}

[data-theme="dark"] .feature-desc {
  color: #d1d5db;
}

.feature-visual {
  position: relative;
  background: radial-gradient(circle at top right, rgba(177, 156, 217, 0.18), transparent 70%);
  border-radius: 24px;
  padding: 1.5rem;
}

.feature-card--image-left .feature-visual {
  order: -1;
  background: radial-gradient(circle at top left, rgba(126, 214, 182, 0.2), transparent 70%);
}

.feature-card--reverse .feature-visual {
  background: radial-gradient(circle at top left, rgba(118, 181, 255, 0.18), transparent 70%);
}

.feature-svg {
  width: 100%;
  height: auto;
}

.panel-line {
  font-size: 13px;
  fill: #3c2b66;
  font-weight: 500;
}

.panel-line--secondary {
  fill: #62728a;
}

.panel-line--primary {
  fill: #2f2360;
}

.feature-visual--secure .panel-line--primary {
  fill: #2b5a4d;
}

.feature-visual--secure .panel-line {
  font-size: 12px;
}

.panel-index {
  font-size: 14px;
  fill: #6c4fb3;
  font-weight: 600;
}

.alignment-tag {
  font-size: 11px;
  font-weight: 600;
  fill: #ffffff;
  letter-spacing: 0.15em;
}

.badge-text {
  font-size: 12px;
  font-weight: 700;
  fill: #ffffff;
  text-anchor: middle;
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 992px) {
  .feature-card {
    grid-template-columns: 1fr;
  }

  .feature-visual {
    order: -1;
  }
}

@media (max-width: 576px) {
  .feature-card {
    padding: 1.75rem;
  }

  .feature-title {
    font-size: 1.5rem;
  }

  .feature-showcase::before,
  .feature-showcase::after {
    width: 220px;
    height: 220px;
  }
}

.faq-section {
  background: linear-gradient(180deg, rgba(237, 242, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%);
  position: relative;
  padding-top: 4rem;
}

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(84, 73, 135, 0.12);
  border: 1px solid rgba(177, 156, 217, 0.18);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faq-item.is-open {
  transform: translateY(-3px);
  box-shadow: 0 24px 60px rgba(84, 73, 135, 0.18);
}

.faq-question {
  width: 100%;
  padding: 1.25rem 1.5rem;
  text-align: left;
  background: none;
  border: none;
  font-size: 1.05rem;
  font-weight: 600;
  color: #2b1f53;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  position: relative;
}

.faq-question::after {
  content: '+';
  font-size: 1.25rem;
  color: #8c78c7;
  transition: transform 0.3s ease;
}

.faq-item.is-open .faq-question::after {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 1.5rem 1.4rem;
  color: #4f5563;
  line-height: 1.7;
  display: none;
}

.faq-item.is-open .faq-answer {
  display: block;
}

[data-theme="dark"] .feature-carousel-controls {
  background: rgba(45, 45, 45, 0.9);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .feature-dot {
  background: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .feature-dot.is-active {
  background: linear-gradient(135deg, rgba(215, 198, 255, 0.8), rgba(177, 156, 217, 0.8));
}

[data-theme="dark"] .feature-showcase > .container::before {
  background: linear-gradient(180deg, rgba(26, 26, 26, 0.95) 0%, rgba(26, 26, 26, 0) 100%);
}

[data-theme="dark"] .faq-section {
  background: linear-gradient(180deg, rgba(53, 44, 88, 0.4) 0%, rgba(26, 26, 26, 0) 100%);
}

[data-theme="dark"] .faq-item {
  background: rgba(45, 45, 45, 0.9);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .faq-question {
  color: #f0e8f7;
}

[data-theme="dark"] .faq-answer {
  color: #d1d5db;
}

[data-theme="dark"] .faq-question::after {
  color: #b19cd9;
}

.faq-section::before,
.changelog-section::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -70px;
  height: 70px;
  background: linear-gradient(180deg, rgba(245, 247, 250, 0) 0%, rgba(245, 247, 250, 0.92) 80%);
  pointer-events: none;
}

.faq-section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(245, 247, 250, 0) 0%, rgba(177, 156, 217, 0.1) 100%);
  pointer-events: none;
}

.changelog-section {
  background: linear-gradient(180deg, rgba(245, 247, 250, 0.65) 0%, rgba(255, 255, 255, 0) 85%);
  position: relative;
  padding-top: 3.5rem;
}

.changelog-section::before {
  background: linear-gradient(180deg, rgba(245, 247, 250, 0) 0%, rgba(245, 247, 250, 0.65) 100%);
}

.changelog-section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  background: linear-gradient(180deg, rgba(245, 247, 250, 0.45) 0%, rgba(245, 247, 250, 0) 100%);
  pointer-events: none;
}

.changelog-controls {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.changelog-tab {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(177, 156, 217, 0.4);
  background: #ffffff;
  color: #5a4a96;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: none;
}

.changelog-tab:hover,
.changelog-tab.is-active {
  background: linear-gradient(135deg, #b19cd9, #8f76d6);
  color: #ffffff;
  border-color: transparent;
  box-shadow: none;
}

.changelog-panels {
  max-width: 720px;
  margin: 0 auto;
}

.changelog-panel {
  display: none;
  background: #ffffff;
  border-radius: 24px;
  padding: 2rem;
  border: 1px solid rgba(177, 156, 217, 0.18);
  box-shadow: 0 20px 50px rgba(84, 73, 135, 0.15);
}

.changelog-panel.is-active {
  display: block;
}

.changelog-date {
  font-size: 1rem;
  font-weight: 700;
  color: #6c4fb3;
  margin-bottom: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.changelog-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
  color: #4f5563;
}

.changelog-list li {
  position: relative;
  padding-left: 1.5rem;
}

.changelog-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b19cd9, #8f76d6);
  box-shadow: 0 6px 16px rgba(142, 119, 208, 0.25);
}

[data-theme="dark"] .changelog-section {
  background: linear-gradient(180deg, rgba(34, 34, 34, 0.7) 0%, rgba(26, 26, 26, 0) 85%);
}

[data-theme="dark"] .faq-section::before,
[data-theme="dark"] .faq-section::after,
[data-theme="dark"] .changelog-section::before,
[data-theme="dark"] .changelog-section::after {
  background: linear-gradient(180deg, rgba(26, 26, 26, 0) 0%, rgba(26, 26, 26, 0.85) 100%);
}

[data-theme="dark"] .changelog-tab {
  background: rgba(45, 45, 45, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e8ddff;
}

[data-theme="dark"] .changelog-tab:hover,
[data-theme="dark"] .changelog-tab.is-active {
  background: linear-gradient(135deg, rgba(215, 198, 255, 0.85), rgba(177, 156, 217, 0.85));
  color: #2b1f53;
  border-color: transparent;
}

[data-theme="dark"] .changelog-panel {
  background: rgba(45, 45, 45, 0.9);
  border-color: rgba(255, 255, 255, 0.08);
  color: #d1d5db;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .changelog-date {
  color: #d7c6ff;
}

[data-theme="dark"] .changelog-list li::before {
  background: linear-gradient(135deg, #d7c6ff, #8f76d6);
}
[data-theme="dark"] .modal-body .alert strong {
  color: #ffffff !important;
}

/* 夜间模式下模态框中的背景元素样式 */
[data-theme="dark"] .modal-body .bg-light {
  background-color: #3d3d3d !important;
}

/* 文件数量标记样式 */
#fileCount {
  border-radius: 50% !important;
  min-width: 1.25rem !important;
  height: 1.25rem !important;
  font-size: 0.65rem !important;
  padding: 0.15rem 0.35rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 卡片样式 */
.card-header h2{
  margin:0;
}
.card-header p{
  margin:0.25rem 0 0 0;
}
.card {
  width: 900px;
  margin: 0 auto;
  border-radius: 1rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-header {
  display:none;
  background: linear-gradient(135deg, var(--primary-color) 0%, #9b8cd8 100%);
  padding: 0.5rem 1rem;
}

.card-body {
  padding-top: .75rem;
}

.card-body h4 {
  margin-top: 0;
}

/* 垂直居中容器样式 */
.min-vh-100 {
  min-height: 100vh;
}

/* 按钮固定在右上角 */
.position-fixed.top-0.end-0 {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 1050 !important;
}

/* 按钮和表单元素 */
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

.btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-outline-primary:hover, .btn-check:checked + .btn-outline-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: white !important;
}

.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* 语言选择器 */
#languagePairSelector .flag-icon,
.language-selector .flag-icon {
  width: 24px;
  height: 18px;
  object-fit: cover;
}

#languagePairSelector .dropdown-item .flag-icon {
  margin-right: 0.5rem;
}

#languagePairSelector .pair-language-toggle {
  position: relative;
  justify-content: center;
  padding-right: 2.5rem;
}

#languagePairSelector .pair-language-label {
  gap: 0.5rem;
}

#languagePairSelector .pair-language-caret {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

#languagePairSelector .pair-arrow-wrapper {
  min-height: 100%;
}

#languagePairSelector .pair-arrow-icon {
  font-size: 1.4rem;
}

@media (min-width: 768px) {
  #languagePairSelector {
    --bs-gutter-x: 0.75rem;
  }
  #languagePairSelector .pair-column {
    flex: 0 0 47%;
    max-width: 47%;
  }
  #languagePairSelector .pair-arrow-col {
    flex: 0 0 6%;
    max-width: 6%;
  }
  #languagePairSelector {
    row-gap: 0.25rem !important;
  }
}

@media (max-width: 767.98px) {
  #languagePairSelector .pair-arrow-wrapper {
    min-height: auto;
    padding: 0.25rem 0;
  }
  #languagePairSelector .pair-language-toggle {
    padding-right: 2.25rem;
  }
}

#languagePairSelector .pair-language-item {
  position: relative;
  justify-content: center;
  gap: 0.5rem;
}

#languagePairSelector .pair-language-item .selection-check {
  position: absolute;
  right: 0.75rem;
  display: flex;
  align-items: center;
  color: var(--primary-color);
}

.retain-language-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.retain-language-selector .form-check {
  margin-right: 1rem;
  padding: 0.5rem 1rem;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}

.retain-language-selector .form-check:hover {
  background-color: #f8f9fa;
}

.retain-language-selector .form-check-input:checked + .form-check-label {
  color: var(--primary-color);
  font-weight: 500;
}

/* 文件上传区域 */
.file-upload-container {
  width: 100%;
}

.upload-zone {
  border: 2px dashed #dee2e6;
  border-radius: 0.5rem;
  padding: 2rem;
  text-align: center;
  position: relative;
  transition: all 0.3s;
  background-color: #f8f9fa;
  cursor: pointer;
}

.upload-zone:hover {
  border-color: var(--primary-color);
  background-color: var(--primary-lighter);
}

.upload-zone.dragover {
  border-color: var(--primary-color);
  background-color: var(--primary-lighter);
  transform: scale(1.02);
  box-shadow: 0 4px 20px rgba(177, 156, 217, 0.3);
}

.file-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload-placeholder {
  color: #6c757d;
}

.upload-placeholder i {
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.selected-files {
  max-height: 200px;
  overflow-y: auto;
  min-height: 20px;
  margin-top: 1rem;
  display: block !important;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
  background-color: white;
}

.file-item i {
  margin-right: 0.5rem;
  color: var(--primary-color);
}

.file-item .file-name {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-item .file-remove {
  color: #dc3545;
  cursor: pointer;
  padding: 0.25rem;
}

/* Header样式 */
.main-header {
  background: linear-gradient(135deg, var(--primary-color) 0%, #9b8cd8 100%);
  color: white;
  padding: 1rem 0;
  box-shadow: 0 2px 10px rgba(177, 156, 217, 0.3);
  position: sticky;
  top: 0;
  z-index: 100;
}

.main-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: white;
  margin-right: 2rem;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* 主题切换按钮 */
#themeToggle {
  transition: transform 0.2s ease;
}

#themeToggle:hover {
  transform: scale(1.1);
}

#themeToggle:focus {
  outline: none;
  box-shadow: none;
}

/* 主题切换图标动画（更明显的渐变 + 旋转） */
#themeIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  opacity: 0.95;
  transition: transform 0.25s ease, filter 0.25s ease, opacity 0.25s ease, color 0.25s ease;
  will-change: transform, filter, opacity, color, background-position;
  position: relative;
}

.theme-icon-animate {
  /* 使用渐变填充字形并在动画后还原 */
  background-image: linear-gradient(120deg, #ffd166, #b19cd9, #74d3ff);
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  filter: drop-shadow(0 0 12px rgba(177, 156, 217, 0.55));
  animation: themeIconSwap 0.6s ease, themeIconSheen 0.6s ease;
}

@keyframes themeIconSwap {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  50% {
    transform: rotate(180deg) scale(1.12);
    opacity: 0.95;
  }
  100% {
    transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #themeToggle,
  #themeIcon,
  .theme-icon-animate {
    transition: none !important;
    animation: none !important;
    filter: none !important;
  }
}

@keyframes themeIconSheen {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Footer样式 */
.main-footer {
  background-color: #f8f9fa;
  border-top: 1px solid #e9ecef;
  padding: 1.5rem 0;
  margin-top: 2rem;
}

.footer-content {
  text-align: center;
  color: #6c757d;
}

.support-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.heart-icon {
  color: #dc3545;
  animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.copyright {
  font-size: 0.875rem;
  margin: 0;
}

/* 页面内容切换 */
.page-content {
  display: none;
  width: 100%;
}

.page-content.active {
  display: block;
}

/* 信息图标样式 */
.info-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  cursor: help;
}

.info-icon {
  color: #6c757d;
  font-size: 14px;
  transition: color 0.2s ease;
}

.info-icon:hover {
  color: var(--primary-color);
}

/* 自定义tooltip样式 */
.tooltip {
  max-width: 900px;
  font-size: 0.875rem;
}

.tooltip-inner {
  background-color: white;
  color: #333;
  padding: 18px 24px;
  border-radius: 8px;
  text-align: left;
  line-height: 1.6;
  max-height: 400px;
  overflow-y: auto;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
  border: 1px solid #e9ecef;
  width: 850px;
  min-width: 850px;
}

.tooltip-inner h6 {
  color: var(--primary-color);
  margin-bottom: 12px;
  font-weight: 600;
  border-bottom: 2px solid var(--primary-lighter);
  padding-bottom: 8px;
}

.tooltip-inner p {
  margin-bottom: 14px;
  color: #495057;
}

.tooltip-inner ul {
  margin-bottom: 14px;
  color: #495057;
  padding-left: 20px;
}

.tooltip-inner li {
  margin-bottom: 6px;
}

.tooltip-inner code {
  background-color: var(--primary-lighter);
  color: var(--primary-hover);
  padding: 3px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-weight: 500;
}

.tooltip-inner strong {
  color: #212529;
  font-weight: 600;
}

/* 右侧tooltip箭头样式 */
.tooltip.bs-tooltip-right .tooltip-arrow::before {
  border-right-color: white;
  border-width: 8px 8px 8px 0;
}

.tooltip.bs-tooltip-left .tooltip-arrow::before {
  border-left-color: white;
  border-width: 8px 0 8px 8px;
}

/* 固定显示的tooltip样式 */
.tooltip.persistent .tooltip-inner {
  max-height: 350px;
  overflow-y: auto;
}

/* 滚动条样式 */
.tooltip-inner::-webkit-scrollbar {
  width: 6px;
}

.tooltip-inner::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.tooltip-inner::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.tooltip-inner::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 调整主内容区域 */
.main-content {
  flex: 1;
  padding-bottom: 2rem;
}