/* 暗色主题与微调 */

/* 防止 Vue 加载完成前闪现未编译的模板 */
[v-cloak] { display: none !important; }

/* 多行文本截断 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 暗色滚动条（Webkit）*/
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #2a3245;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3d465a;
}

/* Firefox 滚动条 */
* {
  scrollbar-width: thin;
  scrollbar-color: #2a3245 transparent;
}

/* 文本选中色 */
::selection {
  background: rgba(59, 130, 246, 0.35);
  color: #fff;
}

/* 数字字体微调（让等宽数字显示更紧凑） */
.font-mono {
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* 链接默认无下划线，hover 才显（更专业） */
a {
  text-decoration: none;
}

/* 优化 emoji（如有）的渲染 */
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 自动刷新新增项的高亮闪烁 */
@keyframes snr-flash {
  0% {
    background-color: rgba(6, 182, 212, 0.18);   /* info/cyan */
    border-left-color: rgba(6, 182, 212, 0.9);
  }
  60% {
    background-color: rgba(6, 182, 212, 0.10);
    border-left-color: rgba(6, 182, 212, 0.5);
  }
  100% {
    background-color: transparent;
    border-left-color: transparent;
  }
}

.snr-new-item {
  animation: snr-flash 1.5s ease-out;
  border-left: 2px solid transparent;
}

/* 移动端适配 */
@media (max-width: 767px) {
  /* 主内容区底部留出导航栏空间 */
  main {
    padding-bottom: 4rem !important;
  }

  /* 顶栏更紧凑 */
  header .max-w-\[1480px\] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* 卡片网格在手机上单列 */
  .grid-cols-2,
  .sm\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

/* iPad 适配 */
@media (min-width: 768px) and (max-width: 1024px) {
  /* 卡片两列 */
  .xl\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}