/* roulang page: index */
:root {
      --primary: #FF5500;
      --bg-dark: #0A0B0E;
      --card-dark: #161922;
      --border-dark: rgba(255, 255, 255, 0.08);
    }
    body {
      background-color: var(--bg-dark);
      color: #D1D5DB;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif;
      overflow-x: hidden;
      margin: 0;
      padding: 0;
    }
    .sports-clip {
      clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
    }
    .grid-pattern {
      background-size: 32px 32px;
      background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    }
    .hero-glow {
      background: radial-gradient(circle at 50% 30%, rgba(255, 85, 0, 0.15) 0%, rgba(10, 11, 14, 0) 70%);
    }
    .card-hover {
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .card-hover:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 85, 0, 0.4);
      box-shadow: 0 12px 28px -8px rgba(255, 85, 0, 0.2);
    }
    /* 自定义滚动条 */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #0A0B0E;
    }
    ::-webkit-scrollbar-thumb {
      background: #262B36;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #FF5500;
    }

/* roulang page: article */
:root {
      --primary: #FF5500;
      --bg-dark: #0A0B0E;
      --card-dark: #161922;
      --border-dark: rgba(255, 255, 255, 0.08);
    }
    body {
      background-color: var(--bg-dark);
      color: #D1D5DB;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif;
      overflow-x: hidden;
      margin: 0;
      padding: 0;
    }
    .grid-pattern {
      background-size: 32px 32px;
      background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    }
    .card-hover {
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .card-hover:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 85, 0, 0.4);
      box-shadow: 0 12px 28px -8px rgba(255, 85, 0, 0.2);
    }
    .sports-clip {
      clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
    }
    .diagonal-stripes {
      background: repeating-linear-gradient(45deg, rgba(255, 85, 0, 0.05), rgba(255, 85, 0, 0.05) 10px, transparent 10px, transparent 20px);
    }
    /* 正文阅读区深度样式 */
    .article-body-content {
      font-size: 1.0625rem;
      line-height: 1.85;
      color: #D1D5DB;
    }
    .article-body-content p {
      margin-top: 1.25rem;
      margin-bottom: 1.25rem;
      text-align: justify;
    }
    .article-body-content h2 {
      font-size: 1.5rem;
      font-weight: 800;
      color: #FFFFFF;
      margin-top: 2.5rem;
      margin-bottom: 1rem;
      padding-left: 0.75rem;
      border-left: 4px solid var(--primary);
    }
    .article-body-content h3 {
      font-size: 1.25rem;
      font-weight: 700;
      color: #F3F4F6;
      margin-top: 2rem;
      margin-bottom: 0.75rem;
    }
    .article-body-content blockquote {
      border-left: 4px solid var(--primary);
      background: rgba(255, 85, 0, 0.05);
      padding: 1rem 1.25rem;
      margin: 1.5rem 0;
      color: #E5E7EB;
      border-radius: 0 4px 4px 0;
      font-style: italic;
    }
    .article-body-content strong {
      color: #FFFFFF;
      font-weight: 700;
    }
    .article-body-content img {
      max-width: 100%;
      height: auto;
      border-radius: 4px;
      margin: 1.75rem auto;
      display: block;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .article-body-content ul, .article-body-content ol {
      margin: 1.25rem 0;
      padding-left: 1.5rem;
    }
    .article-body-content li {
      margin-bottom: 0.5rem;
    }

/* roulang page: category1 */
:root {
      --primary: #FF5500;
      --bg-dark: #0A0B0E;
      --card-dark: #161922;
      --border-dark: rgba(255, 255, 255, 0.08);
    }
    body {
      background-color: var(--bg-dark);
      color: #D1D5DB;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif;
      overflow-x: hidden;
      margin: 0;
      padding: 0;
    }
    .grid-pattern {
      background-size: 32px 32px;
      background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    }
    .hero-glow {
      background: radial-gradient(circle at 50% 30%, rgba(255, 85, 0, 0.15) 0%, rgba(10, 11, 14, 0) 70%);
    }
    .card-hover {
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .card-hover:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 85, 0, 0.4);
      box-shadow: 0 12px 28px -8px rgba(255, 85, 0, 0.2);
    }
    .sports-clip {
      clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    }
    .score-badge {
      font-variant-numeric: tabular-nums;
    }