/* FluxyNews 自定义样式（配合 Tailwind CDN） */

html { -webkit-text-size-adjust: 100%; }
body { padding-top: env(safe-area-inset-top); }

/* ---- 卡片设计系统 ---- */
.card {
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 3px 0 rgb(0 0 0 / 0.05);
  outline: 1px solid rgb(0 0 0 / 0.06);
  outline-offset: -1px;
}
.dark .card {
  background-color: #171717; /* neutral-900 */
  outline-color: rgb(255 255 255 / 0.08);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.5);
}

/* ---- 信号词 / 关键词高亮（荧光笔效果） ---- */
.hl-signal {
  background: linear-gradient(transparent 62%, rgb(251 191 36 / 0.38) 62%);
  border-radius: 2px;
  padding: 0 1px;
  font-weight: 600;
}
.dark .hl-signal {
  background: linear-gradient(transparent 62%, rgb(251 191 36 / 0.28) 62%);
}
.hl-keyword {
  background: linear-gradient(transparent 62%, rgb(139 92 246 / 0.22) 62%);
  border-radius: 2px;
  padding: 0 1px;
}
.dark .hl-keyword {
  background: linear-gradient(transparent 62%, rgb(139 92 246 / 0.25) 62%);
}

/* ---- 阅读密度：紧凑 ---- */
body.density-compact #articleList article > a { padding-top: 0.625rem; padding-bottom: 0.625rem; }
body.density-compact #articleList h2 { font-size: 14px; }
body.density-compact #articleList p { font-size: 12px; }
body.density-compact #articleList .space-y-3, body.density-compact .space-y-3 { row-gap: 0.5rem; }
body.density-compact .card { border-radius: 0.875rem; }

/* ---- 正文排版（清洗后的 feed 内容） ---- */
.prose-flux { color: rgb(64 64 64); font-size: 15px; line-height: 1.8; }
.dark .prose-flux { color: rgb(212 212 212); }
.prose-flux p { margin: 0 0 0.9rem; }
.prose-flux a { color: rgb(79 70 229); text-decoration: underline; text-underline-offset: 2px; }
.dark .prose-flux a { color: rgb(129 140 248); }
.prose-flux img { border-radius: 0.75rem; margin: 0.75rem 0; max-width: 100%; height: auto; }
.prose-flux h1, .prose-flux h2, .prose-flux h3, .prose-flux h4 {
  font-weight: 700; margin: 1.25rem 0 0.5rem; line-height: 1.4;
  color: rgb(23 23 23);
}
.dark .prose-flux h1, .dark .prose-flux h2, .dark .prose-flux h3, .dark .prose-flux h4 { color: rgb(245 245 245); }
.prose-flux ul, .prose-flux ol { padding-left: 1.25rem; margin: 0 0 0.9rem; }
.prose-flux ul li { list-style: disc; margin: 0.2rem 0; }
.prose-flux ol li { list-style: decimal; margin: 0.2rem 0; }
.prose-flux blockquote {
  border-left: 3px solid rgb(199 210 254); padding-left: 1rem;
  color: rgb(115 115 115); margin: 0 0 0.9rem;
}
.dark .prose-flux blockquote { border-color: rgb(67 56 202); color: rgb(163 163 163); }
.prose-flux pre {
  background: rgb(245 245 245); padding: 0.75rem 1rem; border-radius: 0.625rem;
  overflow-x: auto; font-size: 13px; margin: 0 0 0.9rem;
}
.dark .prose-flux pre { background: rgb(38 38 38); }
.prose-flux code {
  background: rgb(245 245 245); padding: 0.15rem 0.3rem; border-radius: 0.3rem;
  font-size: 0.875em;
}
.dark .prose-flux code { background: rgb(38 38 38); }
.prose-flux pre code { padding: 0; background: transparent; }
.prose-flux hr { border: 0; border-top: 1px solid rgb(229 229 229); margin: 1rem 0; }

/* ---- 工具类 ---- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.spinning { animation: fn-spin 0.9s linear infinite; }
@keyframes fn-spin { to { transform: rotate(360deg); } }

.pop { animation: fn-pop 0.25s ease; }
@keyframes fn-pop { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* 轻量 toast */
#fnToast {
  transition: opacity 0.25s ease, transform 0.25s ease;
  opacity: 0; transform: translate(-50%, -8px); pointer-events: none;
}
#fnToast.show { opacity: 1; transform: translate(-50%, 0); }