/* roulang page: index */
:root {
        --bg-main: #070a13;
        --bg-card: #0e1628;
        --border-color: rgba(255, 255, 255, 0.08);
        --text-primary: #f8fafc;
        --text-muted: #94a3b8;
        --primary-glow: rgba(225, 29, 72, 0.25);
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        padding: 0;
        background-color: var(--bg-main);
        color: var(--text-primary);
        font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
      }
      .glass-nav {
        background: rgba(12, 18, 34, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border-color);
      }
      .card-surface {
        background: radial-gradient(circle at 10% 10%, rgba(30, 41, 67, 0.45) 0%, rgba(14, 22, 40, 0.9) 100%);
        border: 1px solid var(--border-color);
        transition: all 0.25s ease-in-out;
      }
      .card-surface:hover {
        border-color: rgba(225, 29, 72, 0.35);
        transform: translateY(-2px);
        box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.6), 0 0 16px -4px var(--primary-glow);
      }
      .glow-badge {
        box-shadow: 0 0 12px -2px rgba(225, 29, 72, 0.4);
      }
      .hero-gradient {
        background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(124, 58, 237, 0.25), rgba(7, 10, 19, 0));
      }
      .tag-item {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
      }
      .btn-primary {
        background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
        box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35);
        transition: all 0.2s ease;
      }
      .btn-primary:hover {
        background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
        box-shadow: 0 6px 20px rgba(225, 29, 72, 0.5);
      }
      .scrollbar-none::-webkit-scrollbar {
        display: none;
      }
      .scrollbar-none {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }

/* roulang page: category1 */
:root {
        --bg-main: #070a13;
        --bg-card: #0e1628;
        --border-color: rgba(255, 255, 255, 0.08);
        --text-primary: #f8fafc;
        --text-muted: #94a3b8;
        --primary-glow: rgba(225, 29, 72, 0.25);
      }
      body {
        margin: 0;
        padding: 0;
        background-color: var(--bg-main);
        color: var(--text-primary);
        font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
      }
      .glass-nav {
        background: rgba(12, 18, 34, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border-color);
      }
      .card-surface {
        background: radial-gradient(circle at 10% 10%, rgba(30, 41, 67, 0.45) 0%, rgba(14, 22, 40, 0.9) 100%);
        border: 1px solid var(--border-color);
        transition: all 0.25s ease-in-out;
      }
      .card-surface:hover {
        border-color: rgba(225, 29, 72, 0.35);
        transform: translateY(-2px);
        box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.6), 0 0 16px -4px var(--primary-glow);
      }
      .glow-badge {
        box-shadow: 0 0 12px -2px rgba(225, 29, 72, 0.4);
      }
      .hero-gradient {
        background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(124, 58, 237, 0.25), rgba(7, 10, 19, 0));
      }
      .tag-item {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
      }
      .btn-primary {
        background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
        box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35);
        transition: all 0.2s ease;
      }
      .btn-primary:hover {
        background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
        box-shadow: 0 6px 20px rgba(225, 29, 72, 0.5);
      }
      .countdown-box {
        background: rgba(15, 23, 42, 0.7);
        border: 1px solid rgba(225, 29, 72, 0.25);
        backdrop-filter: blur(8px);
      }

/* roulang page: article */
:root {
        --bg-main: #070a13;
        --bg-card: #0e1628;
        --border-color: rgba(255, 255, 255, 0.08);
        --text-primary: #f8fafc;
        --text-muted: #94a3b8;
        --primary-glow: rgba(225, 29, 72, 0.25);
      }
      body {
        margin: 0;
        padding: 0;
        background-color: var(--bg-main);
        color: var(--text-primary);
        font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
      }
      .glass-nav {
        background: rgba(12, 18, 34, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border-color);
      }
      .card-surface {
        background: radial-gradient(circle at 10% 10%, rgba(30, 41, 67, 0.45) 0%, rgba(14, 22, 40, 0.9) 100%);
        border: 1px solid var(--border-color);
        transition: all 0.25s ease-in-out;
      }
      .card-surface:hover {
        border-color: rgba(225, 29, 72, 0.35);
        transform: translateY(-2px);
        box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.6), 0 0 16px -4px var(--primary-glow);
      }
      .glow-badge {
        box-shadow: 0 0 12px -2px rgba(225, 29, 72, 0.4);
      }
      .hero-gradient {
        background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(124, 58, 237, 0.25), rgba(7, 10, 19, 0));
      }
      .tag-item {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
      }
      .btn-primary {
        background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
        box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35);
        transition: all 0.2s ease;
      }
      .btn-primary:hover {
        background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
        box-shadow: 0 6px 20px rgba(225, 29, 72, 0.5);
      }
      .article-prose {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        color: #cbd5e1;
        font-size: 1.05rem;
        line-height: 1.85;
      }
      .article-prose p {
        margin-bottom: 1.5rem;
      }
      .article-prose h2 {
        color: #ffffff;
        font-size: 1.5rem;
        font-weight: 700;
        margin-top: 2.5rem;
        margin-bottom: 1rem;
        padding-left: 0.85rem;
        border-left: 4px solid #e11d48;
      }
      .article-prose h3 {
        color: #f1f5f9;
        font-size: 1.25rem;
        font-weight: 600;
        margin-top: 1.75rem;
        margin-bottom: 0.75rem;
      }
      .article-prose ul, .article-prose ol {
        margin-top: 1rem;
        margin-bottom: 1.5rem;
        padding-left: 1.5rem;
      }
      .article-prose li {
        margin-bottom: 0.5rem;
      }
      .article-prose blockquote {
        border-left: 3px solid #8b5cf6;
        padding-left: 1.25rem;
        color: #94a3b8;
        font-style: italic;
        margin: 1.5rem 0;
        background: rgba(139, 92, 246, 0.05);
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        border-radius: 0 0.5rem 0.5rem 0;
      }
      .article-prose img {
        border-radius: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        margin: 1.5rem 0;
        max-width: 100%;
        height: auto;
      }