/* roulang page: index */
:root {
      --primary: #B91C1C;
      --primary-hover: #991B1B;
      --secondary: #D97706;
      --bg-page: #F8FAFC;
      --card-bg: #FFFFFF;
      --text-main: #111827;
      --text-muted: #4B5563;
      --border-color: #E5E7EB;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.02);
      --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
      --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.03);
    }
    body {
      background-color: var(--bg-page);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      line-height: 1.75;
      margin: 0;
      padding: 0;
    }
    .custom-container {
      max-width: 1240px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
    .hero-bg {
      background: radial-gradient(circle at 10% 20%, rgba(185, 28, 28, 0.05) 0%, rgba(248, 250, 252, 1) 90%);
      border-bottom: 1px solid var(--border-color);
    }
    .card-paper {
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .card-paper:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
      border-color: rgba(185, 28, 28, 0.3);
    }
    .btn-crimson {
      background-color: var(--primary);
      color: #ffffff;
      padding: 0.65rem 1.4rem;
      border-radius: var(--radius-sm);
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      transition: background-color 0.15s ease, transform 0.15s ease;
    }
    .btn-crimson:hover {
      background-color: var(--primary-hover);
      transform: translateY(-1px);
    }
    .badge-tag {
      font-size: 0.75rem;
      padding: 0.2rem 0.6rem;
      border-radius: 9999px;
      font-weight: 600;
      display: inline-block;
    }
    .badge-red {
      background-color: #FEE2E2;
      color: #991B1B;
    }
    .badge-amber {
      background-color: #FEF3C7;
      color: #92400E;
    }
    .badge-green {
      background-color: #DCFCE7;
      color: #166534;
    }
    .badge-blue {
      background-color: #DBEAFE;
      color: #1E40AF;
    }
    .nav-link {
      font-weight: 500;
      color: #4B5563;
      padding: 0.5rem 0.75rem;
      border-radius: 6px;
      transition: color 0.15s ease, background-color 0.15s ease;
    }
    .nav-link:hover, .nav-link.active {
      color: var(--primary);
      background-color: #FEF2F2;
    }
    .timeline-line::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 19px;
      width: 2px;
      background: #E5E7EB;
    }

/* roulang page: article */
:root {
      --primary: #B91C1C;
      --primary-hover: #991B1B;
      --secondary: #D97706;
      --bg-page: #F8FAFC;
      --card-bg: #FFFFFF;
      --text-main: #111827;
      --text-muted: #4B5563;
      --border-color: #E5E7EB;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.02);
      --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
      --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.03);
    }
    body {
      background-color: var(--bg-page);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      line-height: 1.8;
      margin: 0;
      padding: 0;
    }
    .custom-container {
      max-width: 1240px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
    .card-paper {
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .card-paper:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
      border-color: rgba(185, 28, 28, 0.3);
    }
    .btn-crimson {
      background-color: var(--primary);
      color: #ffffff;
      padding: 0.65rem 1.4rem;
      border-radius: var(--radius-sm);
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      transition: background-color 0.15s ease, transform 0.15s ease;
    }
    .btn-crimson:hover {
      background-color: var(--primary-hover);
      transform: translateY(-1px);
    }
    .btn-outline {
      border: 1px solid var(--border-color);
      background-color: #FFFFFF;
      color: var(--text-main);
      padding: 0.65rem 1.4rem;
      border-radius: var(--radius-sm);
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      transition: all 0.15s ease;
    }
    .btn-outline:hover {
      border-color: var(--primary);
      color: var(--primary);
      background-color: #FEF2F2;
    }
    .badge-tag {
      font-size: 0.75rem;
      padding: 0.2rem 0.6rem;
      border-radius: 9999px;
      font-weight: 600;
      display: inline-block;
    }
    .badge-red {
      background-color: #FEE2E2;
      color: #991B1B;
    }
    .badge-amber {
      background-color: #FEF3C7;
      color: #92400E;
    }
    .badge-green {
      background-color: #DCFCE7;
      color: #166534;
    }
    .badge-blue {
      background-color: #DBEAFE;
      color: #1E40AF;
    }
    .nav-link {
      font-weight: 500;
      color: #4B5563;
      padding: 0.5rem 0.75rem;
      border-radius: 6px;
      transition: color 0.15s ease, background-color 0.15s ease;
    }
    .nav-link:hover, .nav-link.active {
      color: var(--primary);
      background-color: #FEF2F2;
    }
    /* 专栏富文本正文排版 */
    .article-content {
      font-size: 1.0625rem;
      line-height: 1.85;
      color: #374151;
    }
    .article-content h2 {
      font-size: 1.5rem;
      font-weight: 800;
      color: #111827;
      margin-top: 2rem;
      margin-bottom: 1rem;
      padding-left: 0.75rem;
      border-left: 4px solid var(--primary);
    }
    .article-content h3 {
      font-size: 1.25rem;
      font-weight: 700;
      color: #1F2937;
      margin-top: 1.5rem;
      margin-bottom: 0.75rem;
    }
    .article-content p {
      margin-bottom: 1.25rem;
    }
    .article-content ul, .article-content ol {
      margin-bottom: 1.25rem;
      padding-left: 1.5rem;
    }
    .article-content li {
      margin-bottom: 0.5rem;
      list-style-type: disc;
    }
    .article-content blockquote {
      margin: 1.5rem 0;
      padding: 1rem 1.25rem;
      background-color: #F3F4F6;
      border-left: 4px solid var(--secondary);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      color: #4B5563;
      font-style: normal;
    }
    .article-content img {
      max-width: 100%;
      height: auto;
      border-radius: var(--radius-md);
      margin: 1.5rem auto;
      display: block;
      border: 1px solid var(--border-color);
    }

/* roulang page: category1 */
:root {
      --primary: #B91C1C;
      --primary-hover: #991B1B;
      --secondary: #D97706;
      --bg-page: #F8FAFC;
      --card-bg: #FFFFFF;
      --text-main: #111827;
      --text-muted: #4B5563;
      --border-color: #E5E7EB;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.02);
      --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
      --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.03);
    }
    body {
      background-color: var(--bg-page);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      line-height: 1.75;
      margin: 0;
      padding: 0;
    }
    .custom-container {
      max-width: 1240px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
    .hero-bg {
      background: radial-gradient(circle at 10% 20%, rgba(185, 28, 28, 0.05) 0%, rgba(248, 250, 252, 1) 90%);
      border-bottom: 1px solid var(--border-color);
    }
    .card-paper {
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .card-paper:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
      border-color: rgba(185, 28, 28, 0.3);
    }
    .btn-crimson {
      background-color: var(--primary);
      color: #ffffff;
      padding: 0.65rem 1.4rem;
      border-radius: var(--radius-sm);
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      transition: background-color 0.15s ease, transform 0.15s ease;
    }
    .btn-crimson:hover {
      background-color: var(--primary-hover);
      transform: translateY(-1px);
    }
    .btn-outline {
      border: 1px solid var(--border-color);
      background-color: #ffffff;
      color: var(--text-main);
      padding: 0.6rem 1.2rem;
      border-radius: var(--radius-sm);
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      transition: all 0.15s ease;
    }
    .btn-outline:hover {
      border-color: var(--primary);
      color: var(--primary);
      background-color: #FEF2F2;
    }
    .badge-tag {
      font-size: 0.75rem;
      padding: 0.2rem 0.6rem;
      border-radius: 9999px;
      font-weight: 600;
      display: inline-block;
    }
    .badge-red {
      background-color: #FEE2E2;
      color: #991B1B;
    }
    .badge-amber {
      background-color: #FEF3C7;
      color: #92400E;
    }
    .badge-green {
      background-color: #DCFCE7;
      color: #166534;
    }
    .badge-blue {
      background-color: #DBEAFE;
      color: #1E40AF;
    }
    .nav-link {
      font-weight: 500;
      color: #4B5563;
      padding: 0.5rem 0.75rem;
      border-radius: 6px;
      transition: color 0.15s ease, background-color 0.15s ease;
    }
    .nav-link:hover, .nav-link.active {
      color: var(--primary);
      background-color: #FEF2F2;
    }
    .filter-chip {
      font-size: 0.875rem;
      padding: 0.4rem 0.9rem;
      border-radius: 9999px;
      border: 1px solid var(--border-color);
      background-color: #FFFFFF;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .filter-chip:hover, .filter-chip.active {
      background-color: var(--primary);
      border-color: var(--primary);
      color: #FFFFFF;
    }
    .line-clamp-2 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

/* roulang page: category2 */
:root {
      --primary: #B91C1C;
      --primary-hover: #991B1B;
      --secondary: #D97706;
      --bg-page: #F8FAFC;
      --card-bg: #FFFFFF;
      --text-main: #111827;
      --text-muted: #4B5563;
      --border-color: #E5E7EB;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.02);
      --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
      --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.03);
    }
    body {
      background-color: var(--bg-page);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      line-height: 1.75;
      margin: 0;
      padding: 0;
    }
    .custom-container {
      max-width: 1240px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
    .hero-bg {
      background: radial-gradient(circle at 10% 20%, rgba(185, 28, 28, 0.05) 0%, rgba(248, 250, 252, 1) 90%);
      border-bottom: 1px solid var(--border-color);
    }
    .card-paper {
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .card-paper:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
      border-color: rgba(185, 28, 28, 0.3);
    }
    .btn-crimson {
      background-color: var(--primary);
      color: #ffffff;
      padding: 0.65rem 1.4rem;
      border-radius: var(--radius-sm);
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      transition: background-color 0.15s ease, transform 0.15s ease;
    }
    .btn-crimson:hover {
      background-color: var(--primary-hover);
      transform: translateY(-1px);
    }
    .badge-tag {
      font-size: 0.75rem;
      padding: 0.2rem 0.6rem;
      border-radius: 9999px;
      font-weight: 600;
      display: inline-block;
    }
    .badge-red {
      background-color: #FEE2E2;
      color: #991B1B;
    }
    .badge-amber {
      background-color: #FEF3C7;
      color: #92400E;
    }
    .badge-green {
      background-color: #DCFCE7;
      color: #166534;
    }
    .badge-blue {
      background-color: #DBEAFE;
      color: #1E40AF;
    }
    .nav-link {
      font-weight: 500;
      color: #4B5563;
      padding: 0.5rem 0.75rem;
      border-radius: 6px;
      transition: color 0.15s ease, background-color 0.15s ease;
    }
    .nav-link:hover, .nav-link.active {
      color: var(--primary);
      background-color: #FEF2F2;
    }
    .filter-btn {
      padding: 0.4rem 0.85rem;
      border-radius: 9999px;
      font-size: 0.875rem;
      font-weight: 500;
      border: 1px solid var(--border-color);
      background: #FFFFFF;
      color: #4B5563;
      transition: all 0.15s ease;
      cursor: pointer;
    }
    .filter-btn:hover, .filter-btn.active {
      background-color: var(--primary);
      color: #FFFFFF;
      border-color: var(--primary);
    }
    .pagination-btn {
      min-width: 2.5rem;
      height: 2.5rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-color);
      background: #FFFFFF;
      color: #374151;
      font-size: 0.875rem;
      font-weight: 600;
      transition: all 0.15s ease;
    }
    .pagination-btn:hover, .pagination-btn.active {
      background-color: var(--primary);
      color: #FFFFFF;
      border-color: var(--primary);
    }