/* ==============================
   AI笔记 - 独立频道样式
   风格：笔记本手写稿质感，绿墨水+纸张色调
   ============================== */

/* --- 列表页 --- */
.note-page { background: var(--muted); }

.note-list-wrap {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

/* 品牌区 */
.nl-brand {
  background: #fffbeb;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.5rem 2rem;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}
.dark .nl-brand {
  background: color-mix(in srgb, #fefce8 6%, var(--card));
}
.nl-brand::before {
  content: '';
  position: absolute;
  left: 3.25rem;
  top: 0; bottom: 0;
  width: 2px;
  background: color-mix(in srgb, #dc2626 15%, transparent);
}
.nl-brand::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3.25rem;
  background: repeating-linear-gradient(
    180deg, transparent, transparent 1.75rem,
    color-mix(in srgb, #dc2626 8%, transparent) 1.75rem,
    color-mix(in srgb, #dc2626 8%, transparent) 2rem
  );
}
.nl-brand-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}
.nl-brand-left { display: flex; align-items: center; gap: 0.75rem; }
.nl-brand-icon {
  width: 2.5rem; height: 2.5rem;
  background: linear-gradient(135deg, #65a30d, #15803d);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.nl-brand-text h1 {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--fg);
  margin: 0;
}
.nl-brand-text p {
  font-size: 0.8125rem;
  color: var(--muted-fg);
  margin: 0.125rem 0 0;
  font-style: italic;
}
.nl-brand-stats { display: flex; gap: 1.5rem; }
.nl-stat { text-align: center; }
.nl-stat strong {
  display: block;
  font-size: 1.125rem;
  color: #65a30d;
  font-weight: 700;
}
.dark .nl-stat strong { color: #86efac; }
.nl-stat span {
  font-size: 0.6875rem;
  color: var(--muted-fg);
}

/* 作者横幅 */
.nl-authors {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 1rem;
  overflow-x: auto;
}
.nl-authors-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #65a30d;
  white-space: nowrap;
  flex-shrink: 0;
}
.nl-authors-list {
  display: flex;
  gap: 0.5rem;
  flex-wrap: nowrap;
}
.nl-author-name {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--fg-secondary);
  white-space: nowrap;
}
.nl-chip-avatar {
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 0.5625rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* 置顶笔记 */
.nl-featured {
  background: #fffbeb;
  border: 1px solid color-mix(in srgb, #65a30d 25%, var(--border));
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  position: relative;
}
.dark .nl-featured {
  background: color-mix(in srgb, #65a30d 4%, var(--card));
  border-color: color-mix(in srgb, #65a30d 15%, var(--border));
}
.nl-featured::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #65a30d, #15803d);
  border-radius: 6px 0 0 6px;
}
.nl-feat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #d97706;
  margin-bottom: 0.5rem;
}
.dark .nl-feat-badge { color: #fbbf24; }
.nl-feat-body {}
.nl-feat-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--fg);
  text-decoration: none;
  line-height: 1.5;
  display: block;
  margin-bottom: 0.5rem;
}
.nl-feat-title:hover { color: #65a30d; }
.dark .nl-feat-title:hover { color: #86efac; }
.nl-feat-summary {
  font-size: 0.8125rem;
  color: var(--fg-secondary);
  line-height: 1.6;
  margin: 0 0 0.75rem;
}
.nl-feat-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--muted-fg);
  flex-wrap: wrap;
}
.nl-feat-author {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.nl-feat-tag {
  padding: 0.0625rem 0.5rem;
  background: color-mix(in srgb, #65a30d 8%, var(--muted));
  color: #65a30d;
  border-radius: 2px;
  font-size: 0.6875rem;
  font-weight: 500;
}
.dark .nl-feat-tag { color: #86efac; }
.nl-mini-avatar {
  width: 1.125rem; height: 1.125rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 0.5rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* 笔记卡片网格 */
.nl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* 笔记卡片 */
.nl-card {
  background: #fffbeb;
  border: 1px solid color-mix(in srgb, #65a30d 15%, var(--border));
  border-radius: 4px;
  padding: 1.125rem 1.125rem 1.125rem 1.5rem;
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s;
}
.dark .nl-card {
  background: color-mix(in srgb, #65a30d 3%, var(--card));
  border-color: color-mix(in srgb, #65a30d 10%, var(--border));
}
.nl-card::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0; bottom: 0;
  width: 3px;
  border-radius: 2px;
}
.nl-card[data-author="朱编辑"]::before { background: #8b5cf6; }
.nl-card[data-author="小D"]::before { background: #0ea5e9; }
.nl-card[data-author="野生产品经理"]::before { background: #f97316; }
.nl-card[data-author="AI老司机"]::before { background: #10b981; }
.nl-card[data-author="林语琛"]::before { background: #ec4899; }
.nl-card[data-author="市井说书人"]::before { background: #a855f7; }
.nl-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px color-mix(in srgb, #65a30d 8%, transparent);
}
.nl-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.nl-card-tag {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 2px;
}
.nl-tag-pit { background: #fef2f2; color: #dc2626; }
.nl-tag-ops { background: #eff6ff; color: #2563eb; }
.nl-tag-think { background: #f0fdf4; color: #16a34a; }
.nl-tag-tool { background: #fffbeb; color: #d97706; }
.dark .nl-tag-pit { background: color-mix(in srgb, #dc2626 12%, transparent); color: #fca5a5; }
.dark .nl-tag-ops { background: color-mix(in srgb, #2563eb 12%, transparent); color: #93c5fd; }
.dark .nl-tag-think { background: color-mix(in srgb, #16a34a 12%, transparent); color: #86efac; }
.dark .nl-tag-tool { background: color-mix(in srgb, #d97706 12%, transparent); color: #fcd34d; }
.nl-card-date {
  font-size: 0.6875rem;
  color: var(--muted-fg);
}
.nl-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.5;
  margin: 0 0 0.375rem;
}
.nl-card-title a {
  color: inherit;
  text-decoration: none;
}
.nl-card-title a:hover { color: #65a30d; }
.dark .nl-card-title a:hover { color: #86efac; }
.nl-card-summary {
  font-size: 0.8125rem;
  color: var(--fg-secondary);
  line-height: 1.5;
  margin: 0 0 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nl-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--muted-fg);
}
.nl-card-author {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.nl-card-reading {}

/* 分页 */
.nl-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
}
.nl-page-link {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.8125rem;
  color: var(--fg-secondary);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nl-page-link:hover {
  background: color-mix(in srgb, #65a30d 8%, var(--muted));
  color: #65a30d;
  border-color: color-mix(in srgb, #65a30d 30%, var(--border));
}
.nl-page-active {
  padding: 0.375rem 0.75rem;
  background: #65a30d;
  color: #fff;
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.nl-page-dots {
  font-size: 0.8125rem;
  color: var(--muted-fg);
}

/* 响应式 */
@media (max-width: 768px) {
  .note-list-wrap { padding: 0.75rem 0.5rem 2rem; }
  .nl-brand { padding: 1rem; }
  .nl-brand-inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .nl-brand-stats { gap: 1rem; }
  .nl-authors { padding: 0.5rem 0.75rem; }
  .nl-grid { grid-template-columns: 1fr; }
  .nl-feat-title { font-size: 0.9375rem; }
  .nd-wrap { padding: 0.75rem 0.5rem 2rem; }
  .nd-header { padding: 1rem; }
  .nd-title { font-size: 1.25rem !important; }
  .nd-compare { grid-template-columns: 1fr !important; }
  .nd-stats { grid-template-columns: 1fr 1fr !important; }
  .nd-more-grid { grid-template-columns: 1fr !important; }
}

/* --- 详情页 --- */
.nd-wrap {
  max-width: 42rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

/* 面包屑 */
.nd-breadcrumb {
  font-size: 0.8125rem;
  color: var(--muted-fg);
  margin-bottom: 1rem;
}
.nd-breadcrumb a { color: var(--fg-secondary); text-decoration: none; }
.nd-breadcrumb a:hover { color: #65a30d; }
.dark .nd-breadcrumb a:hover { color: #86efac; }
.nd-breadcrumb em { font-style: normal; color: var(--fg); }

/* 文章头部 */
.nd-header {
  background: #fffbeb;
  border: 1px solid color-mix(in srgb, #65a30d 20%, var(--border));
  border-radius: 6px;
  padding: 1.5rem 2rem;
  margin-bottom: 1.5rem;
  position: relative;
}
.dark .nd-header {
  background: color-mix(in srgb, #65a30d 4%, var(--card));
  border-color: color-mix(in srgb, #65a30d 12%, var(--border));
}
.nd-header::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #65a30d, #15803d);
  border-radius: 6px 0 0 6px;
}
.nd-header-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.nd-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 2px;
}
.nd-date {
  font-size: 0.75rem;
  color: var(--muted-fg);
}
.nd-title {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--fg);
  line-height: 1.4;
  margin: 0 0 0.5rem;
}
.nd-subtitle {
  font-size: 0.9375rem;
  color: var(--fg-secondary);
  line-height: 1.6;
  margin: 0 0 1rem;
  font-style: italic;
}
.nd-author-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.nd-author-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nd-author-avatar {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
}
.nd-author-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg);
}
.nd-author-role {
  font-size: 0.75rem;
  color: var(--muted-fg);
}
.nd-meta-chips {
  display: flex;
  gap: 0.75rem;
}
.nd-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted-fg);
}

/* 正文区 */
.nd-body {
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--fg);
}
.nd-body h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fg);
  margin: 2rem 0 0.75rem;
  padding-left: 0.75rem;
  border-left: 3px solid #65a30d;
}
.nd-body p {
  margin: 0 0 1rem;
}
.nd-body strong {
  color: var(--fg);
  font-weight: 600;
}
.nd-body ol, .nd-body ul {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}
.nd-body li {
  margin-bottom: 0.375rem;
}

/* 提示块 */
.nd-callout {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 4px;
  margin: 1.25rem 0;
  border-left: 3px solid;
}
.nd-callout-warn {
  background: #fffbeb;
  border-color: #d97706;
}
.dark .nd-callout-warn {
  background: color-mix(in srgb, #d97706 6%, var(--card));
}
.nd-callout svg {
  flex-shrink: 0;
  color: #d97706;
  margin-top: 0.125rem;
}
.nd-callout strong {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}
.nd-callout p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--fg-secondary);
}

/* 对比表格 */
.nd-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.25rem 0;
}
.nd-compare-item {
  padding: 1rem;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.nd-compare-good {
  background: #f0fdf4;
  border-color: color-mix(in srgb, #16a34a 20%, var(--border));
}
.dark .nd-compare-good {
  background: color-mix(in srgb, #16a34a 6%, var(--card));
}
.nd-compare-bad {
  background: #fef2f2;
  border-color: color-mix(in srgb, #dc2626 20%, var(--border));
}
.dark .nd-compare-bad {
  background: color-mix(in srgb, #dc2626 6%, var(--card));
}
.nd-compare-label {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.nd-compare-good .nd-compare-label { color: #16a34a; }
.nd-compare-bad .nd-compare-label { color: #dc2626; }
.nd-compare-item ul {
  margin: 0;
  padding-left: 1.125rem;
  font-size: 0.8125rem;
  color: var(--fg-secondary);
  line-height: 1.6;
}
.nd-compare-item li { margin-bottom: 0.25rem; }

/* 统计数据 */
.nd-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin: 1.25rem 0;
}
.nd-stat-box {
  text-align: center;
  padding: 1rem 0.5rem;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.nd-stat-box strong {
  display: block;
  font-size: 1.25rem;
  color: #65a30d;
  font-weight: 700;
}
.dark .nd-stat-box strong { color: #86efac; }
.nd-stat-box span {
  font-size: 0.75rem;
  color: var(--muted-fg);
}

/* 操作栏 */
.nd-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.nd-tags {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}
.nd-tag-sm {
  font-size: 0.6875rem;
  padding: 0.125rem 0.5rem;
  background: color-mix(in srgb, #65a30d 8%, var(--muted));
  color: #65a30d;
  border-radius: 2px;
}
.dark .nd-tag-sm { color: #86efac; }
.nd-btns {
  display: flex;
  gap: 0.5rem;
}
.nd-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card);
  font-size: 0.8125rem;
  color: var(--fg-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nd-btn:hover {
  color: #65a30d;
  border-color: color-mix(in srgb, #65a30d 30%, var(--border));
}
.dark .nd-btn:hover { color: #86efac; }
.nd-btn.active {
  color: #65a30d;
  background: color-mix(in srgb, #65a30d 8%, var(--muted));
  border-color: color-mix(in srgb, #65a30d 30%, var(--border));
}
.dark .nd-btn.active { color: #86efac; }

/* 作者更多 */
.nd-more-section {
  margin-top: 2rem;
}
.nd-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 0.75rem;
  padding-left: 0.625rem;
  border-left: 3px solid #65a30d;
}
.nd-more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.nd-more-card {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
.nd-more-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px color-mix(in srgb, #65a30d 8%, transparent);
}
.nd-card-tag {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 2px;
  width: fit-content;
}
.nd-card-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.4;
}
.nd-card-meta {
  font-size: 0.6875rem;
  color: var(--muted-fg);
}

/* 相关笔记 */
.nd-related-section {
  margin-top: 1.5rem;
}
.nd-related-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.nd-related-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.nd-related-item:hover {
  background: color-mix(in srgb, #65a30d 4%, var(--muted));
}
.nd-related-num {
  font-size: 0.875rem;
  font-weight: 800;
  color: #65a30d;
  line-height: 1;
  padding-top: 0.125rem;
}
.dark .nd-related-num { color: #86efac; }
.nd-related-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.4;
  margin-bottom: 0.125rem;
}
.nd-related-meta {
  font-size: 0.6875rem;
  color: var(--muted-fg);
}