:root {
  --bg-start: #0a0e27;
  --bg-end: #1a0f3d;
  --card-bg: rgba(15, 18, 45, 0.85);
  --text: #f0f4ff;
  --muted: rgba(240, 244, 255, 0.72);
  --accent: #4f7fff;
  --accent-2: #a855ff;
  --accent-3: #34d399;
  --border: rgba(255, 255, 255, 0.12);
  --radius: 16px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at 20% 25%, rgba(79, 127, 255, 0.4), transparent 45%),
    radial-gradient(circle at 80% 35%, rgba(168, 85, 255, 0.35), transparent 50%),
    linear-gradient(135deg, var(--bg-start), var(--bg-end));
  color: var(--text);
}

.page {
  min-height: 100vh;
  width: 100%;
}

.scene {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 35% 40%, rgba(79, 127, 255, 0.3), transparent 50%),
    radial-gradient(circle at 65% 25%, rgba(168, 85, 255, 0.25), transparent 50%);
  filter: blur(28px);
}

.card {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 40px;
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 0;
}

.header {
  position: relative;
  margin-bottom: 24px;
  text-align: center;
  min-height: 40px;
}

.back-button {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(79, 127, 255, 0.45);
  background: linear-gradient(135deg, rgba(79, 127, 255, 0.22), rgba(168, 85, 255, 0.16));
  color: var(--text);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.back-button:hover {
  background: linear-gradient(135deg, rgba(79, 127, 255, 0.35), rgba(168, 85, 255, 0.28));
  border-color: rgba(79, 127, 255, 0.7);
}

.title {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  background: linear-gradient(135deg, #4f7fff, #a855ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.subtitle {
  margin: 8px 0 0;
  color: var(--muted);
}

.section {
  margin-bottom: 20px;
}

/* 工具栏样式 */
.toolbar-section {
  margin-bottom: 16px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(79, 127, 255, 0.1), rgba(168, 85, 255, 0.08));
  border: 1px solid rgba(79, 127, 255, 0.25);
}

.toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(79, 127, 255, 0.4);
  background: linear-gradient(135deg, rgba(79, 127, 255, 0.25), rgba(79, 127, 255, 0.15));
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.toolbar-btn:hover {
  background: linear-gradient(135deg, rgba(79, 127, 255, 0.4), rgba(79, 127, 255, 0.25));
  border-color: rgba(79, 127, 255, 0.7);
  transform: translateY(-1px);
}

.toolbar-btn:active {
  transform: translateY(0);
}

.toolbar-btn.danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(239, 68, 68, 0.15));
  border-color: rgba(239, 68, 68, 0.5);
}

.toolbar-btn.danger:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.45), rgba(239, 68, 68, 0.3));
  border-color: rgba(239, 68, 68, 0.8);
}

.toolbar-btn.export {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.35), rgba(52, 211, 153, 0.2));
  border-color: rgba(52, 211, 153, 0.5);
}

.toolbar-btn.export:hover {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.5), rgba(52, 211, 153, 0.35));
  border-color: rgba(52, 211, 153, 0.8);
}

.toolbar-btn.upload-cos {
  background: linear-gradient(135deg, rgba(79, 127, 255, 0.35), rgba(168, 85, 255, 0.25));
  border-color: rgba(79, 127, 255, 0.5);
}

.toolbar-btn.upload-cos:hover {
  background: linear-gradient(135deg, rgba(79, 127, 255, 0.5), rgba(168, 85, 255, 0.35));
  border-color: rgba(79, 127, 255, 0.8);
}
.btn-icon {
  font-size: 1rem;
}

/* 提示信息样式 */
.info-section {
  margin-bottom: 16px;
}

.info-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.12), rgba(59, 130, 246, 0.1));
  border: 1px solid rgba(52, 211, 153, 0.3);
}

.info-icon {
  font-size: 1.2rem;
}

.info-text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* 表格区域样式 */
.table-section {
  margin-bottom: 20px;
  max-height: 70vh;
  overflow: hidden;
}

.table-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: var(--muted);
  flex-wrap: wrap;
}

.meta-item {
  padding: 4px 12px;
  border-radius: 6px;
  background: rgba(79, 127, 255, 0.15);
  border: 1px solid rgba(79, 127, 255, 0.3);
}

/* 状态消息 */
.status-msg {
  flex: 1;
  font-size: 0.85rem;
  color: var(--muted);
  padding: 4px 8px;
}

.status-msg.loading {
  color: rgba(79, 127, 255, 0.9);
}

.status-msg.error {
  color: #ff8a8a;
}

.status-msg.success {
  color: var(--accent-green);
}
/* 搜索框样式 */
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.search-mode {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(79, 127, 255, 0.4);
  background: rgba(15, 18, 45, 0.6);
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.search-mode:hover {
  border-color: rgba(79, 127, 255, 0.7);
}

.search-mode option {
  background: rgba(15, 18, 45, 0.95);
  color: var(--text);
}

.search-input {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(79, 127, 255, 0.4);
  background: rgba(15, 18, 45, 0.6);
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
  transition: all 0.2s ease;
  min-width: 200px;
}

.search-input:focus {
  border-color: rgba(79, 127, 255, 0.8);
  background: rgba(15, 18, 45, 0.8);
}

.search-input::placeholder {
  color: var(--muted);
}

.search-btn {
  padding: 6px 16px;
  border-radius: 6px;
  border: 1px solid rgba(79, 127, 255, 0.4);
  background: linear-gradient(135deg, rgba(79, 127, 255, 0.25), rgba(79, 127, 255, 0.15));
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.search-btn:hover {
  background: linear-gradient(135deg, rgba(79, 127, 255, 0.4), rgba(79, 127, 255, 0.25));
  border-color: rgba(79, 127, 255, 0.7);
}

.search-btn.clear {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(239, 68, 68, 0.15));
  border-color: rgba(239, 68, 68, 0.4);
}

.search-btn.clear:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.4), rgba(239, 68, 68, 0.25));
  border-color: rgba(239, 68, 68, 0.7);
}

/* 搜索结果计数器 */
.search-count {
  font-size: 0.82rem;
  color: var(--muted);
  padding: 4px 8px;
  min-width: 60px;
  text-align: center;
  white-space: nowrap;
}

/* 搜索导航按钮 */
.search-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid rgba(79, 127, 255, 0.4);
  background: linear-gradient(135deg, rgba(79, 127, 255, 0.25), rgba(79, 127, 255, 0.15));
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}

.search-nav-btn:hover {
  background: linear-gradient(135deg, rgba(79, 127, 255, 0.4), rgba(79, 127, 255, 0.25));
  border-color: rgba(79, 127, 255, 0.7);
}

.search-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
/* Handsontable 自定义样式 */
.handsontable {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.9rem;
  color: var(--text) !important;
  background: transparent !important;
}

#spreadsheet {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(79, 127, 255, 0.3);
  background: transparent !important;
  max-height: 100%;
  /* 完全禁用滚动条 */
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  scrollbar-color: transparent transparent !important;
}

/* 全局禁用滚动条（针对 Chrome） */
#spreadsheet * {
  scrollbar-width: none !important;
  scrollbar-color: transparent transparent !important;
}

#spreadsheet ::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

#spreadsheet ::-webkit-scrollbar-track,
#spreadsheet ::-webkit-scrollbar-thumb,
#spreadsheet ::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* Handsontable 滚动容器 */
.handsontable .wtHolder {
  overflow: auto !important;
  max-height: 100%;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  /* Chrome 滚动指示器隐藏 */
  scrollbar-color: transparent transparent;
}

/* 隐藏 Webkit 浏览器（Chrome/Safari）的滚动条和指示器 */
.handsontable .wtHolder::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* 隐藏滚动条轨道 */
.handsontable .wtHolder::-webkit-scrollbar-track {
  background: transparent !important;
}

/* 隐藏滚动条滑块 */
.handsontable .wtHolder::-webkit-scrollbar-thumb {
  background: transparent !important;
}

/* 隐藏滚动条角落 */
.handsontable .wtHolder::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* 强制隐藏 Handsontable 内所有滚动指示器 */
.handsontable div[class*="scroll"],
.handsontable .htScrollContainer,
.handsontable .htScrollX,
.handsontable .htScrollY,
.handsontable .ht__scrollIndicator {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 针对 Chrome 的滚动条样式 */
#spreadsheet {
  scrollbar-color: transparent transparent;
}

#spreadsheet::-webkit-scrollbar {
  background: transparent !important;
}

#spreadsheet::-webkit-scrollbar-track {
  background: transparent !important;
}

#spreadsheet::-webkit-scrollbar-thumb {
  background: transparent !important;
}

#spreadsheet::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* 覆盖 Handsontable 所有默认背景色 */
.handsontable .htCore,
.handsontable .htMaster,
.handsontable .ht_clone_left,
.handsontable .ht_clone_top,
.handsontable .ht_clone_bottom,
.handsontable .ht_clone_corner {
  background: transparent !important;
}

/* Handsontable 主容器 */
.handsontable .wtHolder {
  background: transparent !important;
}

/* 强制所有单元格透明 */
.handsontable table,
.handsontable tbody,
.handsontable tr,
.handsontable td,
.handsontable td:not(.current):not(.area) {
  background: transparent !important;
  background-color: transparent !important;
}

/* Handsontable 表头样式 - 深色背景 */
.handsontable th,
.handsontable th.ht__highlight,
.handsontable .ht_clone_top th,
.handsontable .ht_clone_left th,
.handsontable thead th {
  background: rgba(30, 35, 70, 0.95) !important;
  background-color: rgba(30, 35, 70, 0.95) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  border-color: rgba(79, 127, 255, 0.3) !important;
}

/* 行号列样式 */
.handsontable .ht_clone_left th,
.handsontable .ht_clone_left td {
  background: rgba(30, 35, 70, 0.95) !important;
  background-color: rgba(30, 35, 70, 0.95) !important;
  color: var(--text) !important;
  border-color: rgba(79, 127, 255, 0.3) !important;
}

/* 表头行号hover */
.handsontable th:hover,
.handsontable .ht_clone_top th:hover {
  background: rgba(45, 52, 95, 0.95) !important;
  background-color: rgba(45, 52, 95, 0.95) !important;
}

/* Handsontable 单元格样式 - 透明背景 */
.handsontable td,
.handsontable td.htDimmed {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text) !important;
  border-color: rgba(79, 127, 255, 0.15) !important;
}

/* 当前选中单元格 - 与按钮一致的渐变背景 */
.handsontable td.current {
  border: 2px solid rgba(79, 127, 255, 0.8) !important;
  background: linear-gradient(135deg, rgba(79, 127, 255, 0.25), rgba(79, 127, 255, 0.15)) !important;
  background-color: transparent !important;
}

/* 选中区域 */
.handsontable td.area {
  background: linear-gradient(135deg, rgba(79, 127, 255, 0.15), rgba(79, 127, 255, 0.08)) !important;
  background-color: transparent !important;
}

/* Handsontable 行高亮 */
.handsontable .ht__activeRow {
  background: linear-gradient(135deg, rgba(79, 127, 255, 0.1), rgba(79, 127, 255, 0.05)) !important;
}

.handsontable .ht__activeRow th {
  background: rgba(45, 52, 95, 0.95) !important;
  background-color: rgba(45, 52, 95, 0.95) !important;
  color: var(--text) !important;
}

/* 搜索过滤后的置灰行 */
.handsontable tr.search-filtered td {
  opacity: 0.45 !important;
  pointer-events: none !important;
}

.handsontable tr.search-filtered th {
  opacity: 0.45 !important;
}

/* 搜索匹配的行高亮（淡蓝底） */
.handsontable tr.search-matched td {
  background: rgba(79, 127, 255, 0.08) !important;
}

/* 搜索当前定位行高亮（金色左条 + 微光） */
.handsontable tr.search-current td {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.12) 0%, rgba(251, 191, 36, 0.05) 100%) !important;
  box-shadow: inset 3px 0 0 0 rgba(251, 191, 36, 0.7) !important;
}
/* Handsontable 滚动条样式 - 隐藏滚动条 */
#spreadsheet::-webkit-scrollbar {
  display: none;
}

#spreadsheet {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* 隐藏 Handsontable 的滚动指示器 */
.handsontable .ht__manualColumnMove,
.handsontable .ht__manualRowMove,
.handsontable .ht__manualColumnResize,
.handsontable .ht__manualRowResize {
  display: none !important;
}

/* 隐藏滚动角落指示器 */
.handsontable .ht_clone_corner,
.handsontable .ht_clone_bottom_right_corner {
  display: none !important;
}

/* 隐藏任何 Handsontable 内置的滚动指示器 */
.handsontable .ht__scrollHor,
.handsontable .ht__scrollVer {
  display: none !important;
}

/* 隐藏 Handsontable 滚动位置指示器（灰色进度条） */
.handsontable .scrollbar,
.handsontable .ht__scrollbar,
.handsontable .ht__scrollbar-horizontal,
.handsontable .ht__scrollbar-vertical {
  display: none !important;
}

/* 隐藏克隆层中的滚动指示器 */
.handsontable .ht_clone_top .scrollbar,
.handsontable .ht_clone_left .scrollbar {
  display: none !important;
}

/* 隐藏所有可能的滚动指示器元素 */
.handsontable [class*="scrollbar"],
.handsontable [class*="scroll-bar"],
.handsontable [class*="scroll-indicator"],
.handsontable [class*="ScrollIndicator"],
.handsontable div[style*="opacity"][style*="gray"],
.handsontable div[style*="background"][style*="gray"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 隐藏自动填充手柄（右下角的小方块） */
.handsontable .wtBorder.area.corner,
.handsontable .wtBorder.corner {
  display: none !important;
}

/* 隐藏所有 Handsontable 边框指示器 */
.handsontable .wtBorder,
.handsontable .wtBorder.current,
.handsontable .wtBorder.area {
  display: none !important;
}

/* 隐藏 Handsontable 赞助水印 */
.handsontable .ht branding {
  display: none !important;
}

.privacy-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .card {
    padding: 22px;
  }

  .header {
    text-align: left;
    padding-top: 46px;
  }

  .toolbar {
    padding: 10px;
  }

  .toolbar-btn {
    padding: 6px 12px;
    font-size: 0.85rem;
  }

  .btn-text {
    display: none;
  }

  .toolbar-btn .btn-icon {
    font-size: 1.2rem;
  }

  .table-meta {
    flex-direction: column;
    gap: 8px;
  }

  .search-box {
    width: 100%;
    margin-left: 0;
  }

  .search-mode {
    min-width: 80px;
  }

  .search-input {
    flex: 1;
    min-width: auto;
  }
}

/* ============================================================
   邮箱验证遮罩
   ============================================================ */

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 20% 25%, rgba(79, 127, 255, 0.5), transparent 45%),
    radial-gradient(circle at 80% 35%, rgba(168, 85, 255, 0.4), transparent 50%),
    linear-gradient(135deg, var(--bg-start), var(--bg-end));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.auth-overlay.hidden {
  display: none;
}

.auth-modal {
  width: 380px;
  max-width: 90vw;
  padding: 36px 32px 28px;
  border-radius: 20px;
  background: var(--card-bg);
  border: 1px solid rgba(79, 127, 255, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  text-align: center;
  animation: authFadeIn 300ms ease;
}

@keyframes authFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.auth-icon {
  font-size: 2.8rem;
  margin-bottom: 12px;
}

.auth-title {
  margin: 0 0 6px;
  font-size: 1.4rem;
  font-weight: 700;
  background: linear-gradient(135deg, #4f7fff, #a855ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.auth-desc {
  margin: 0 0 24px;
  font-size: 0.9rem;
  color: var(--muted);
}

.auth-field {
  display: flex;
  gap: 10px;
}

.auth-input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(79, 127, 255, 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.auth-input:focus {
  border-color: rgba(79, 127, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(79, 127, 255, 0.15);
}

.auth-input::placeholder {
  color: rgba(240, 244, 255, 0.35);
}

.auth-btn {
  padding: 12px 24px;
  border-radius: 10px;
  border: 1px solid rgba(79, 127, 255, 0.45);
  background: linear-gradient(135deg, rgba(79, 127, 255, 0.3), rgba(168, 85, 255, 0.2));
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 180ms ease;
}

.auth-btn:hover {
  background: linear-gradient(135deg, rgba(79, 127, 255, 0.45), rgba(168, 85, 255, 0.35));
  border-color: rgba(79, 127, 255, 0.7);
  transform: translateY(-1px);
}

.auth-btn:active {
  transform: translateY(0);
}

.auth-error {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: #ff8a8a;
  min-height: 1.2em;
}
/* ============================================================
   Handsontable 右键菜单
   ============================================================ */

.handsontable.htContextMenu,
.htContextMenu {
  background: rgba(15, 18, 45, 0.97) !important;
  border: 1px solid rgba(79, 127, 255, 0.35) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
  padding: 4px !important;
  z-index: 99999 !important;
}

.htContextMenu table,
.htContextMenu tbody,
.htContextMenu tr,
.htContextMenu td {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

.htContextMenu td {
  padding: 8px 28px 8px 16px !important;
  font-family: "Inter", system-ui, -apple-system, sans-serif !important;
  font-size: 0.82rem !important;
  color: var(--text) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.htContextMenu td:hover,
.htContextMenu td.current {
  background: rgba(79, 127, 255, 0.2) !important;
  background-color: rgba(79, 127, 255, 0.2) !important;
}

.htContextMenu td.htSeparator {
  height: 1px !important;
  padding: 0 !important;
  background: rgba(79, 127, 255, 0.2) !important;
  background-color: rgba(79, 127, 255, 0.2) !important;
  margin: 4px 8px !important;
  cursor: default !important;
}

.htContextMenu td.htSeparator:hover {
  background: rgba(79, 127, 255, 0.2) !important;
  background-color: rgba(79, 127, 255, 0.2) !important;
}

.htContextMenu .wtHolder {
  background: transparent !important;
}

/* 禁用菜单项 */
.htContextMenu td.htDisabled {
  color: rgba(240, 244, 255, 0.3) !important;
  cursor: not-allowed !important;
}

.htContextMenu td.htDisabled:hover {
  background: transparent !important;
  background-color: transparent !important;
}

/* 子菜单箭头 */
.htContextMenu td .htSubmenu {
  color: var(--muted) !important;
}