/* roulang page: index */
:root {
      --bg-main: #0b0f19;
      --card-bg: #111827;
      --card-hover: #1f2937;
      --border-color: rgba(255, 255, 255, 0.08);
      --primary-color: #4f46e5;
      --accent-color: #06b6d4;
    }
    body {
      background-color: var(--bg-main);
      color: #e5e7eb;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .custom-gradient-hero {
      background: radial-gradient(circle at 50% 20%, rgba(79, 70, 229, 0.18) 0%, rgba(11, 15, 25, 0.95) 75%);
    }
    .glass-nav {
      background: rgba(11, 15, 25, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .hover-card-effect {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .hover-card-effect:hover {
      transform: translateY(-4px);
      border-color: rgba(99, 102, 241, 0.35);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(79, 70, 229, 0.2);
    }
    .line-clamp-2 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

/* roulang page: article */
:root {
      --bg-main: #0b0f19;
      --card-bg: #111827;
      --card-hover: #1f2937;
      --border-color: rgba(255, 255, 255, 0.08);
      --primary-color: #4f46e5;
      --accent-color: #06b6d4;
    }
    body {
      background-color: var(--bg-main);
      color: #e5e7eb;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .custom-gradient-hero {
      background: radial-gradient(circle at 50% 20%, rgba(79, 70, 229, 0.18) 0%, rgba(11, 15, 25, 0.95) 75%);
    }
    .glass-nav {
      background: rgba(11, 15, 25, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .hover-card-effect {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .hover-card-effect:hover {
      transform: translateY(-4px);
      border-color: rgba(99, 102, 241, 0.35);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(79, 70, 229, 0.2);
    }
    .prose-article {
      color: #d1d5db;
      line-height: 1.85;
      font-size: 1.05rem;
    }
    .prose-article h2 {
      color: #ffffff;
      font-size: 1.5rem;
      font-weight: 700;
      margin-top: 2rem;
      margin-bottom: 1rem;
      border-left: 4px solid #4f46e5;
      padding-left: 0.75rem;
    }
    .prose-article h3 {
      color: #f3f4f6;
      font-size: 1.25rem;
      font-weight: 600;
      margin-top: 1.5rem;
      margin-bottom: 0.75rem;
    }
    .prose-article p {
      margin-bottom: 1.25rem;
    }
    .prose-article ul {
      list-style-type: disc;
      padding-left: 1.5rem;
      margin-bottom: 1.25rem;
    }
    .prose-article li {
      margin-bottom: 0.5rem;
    }
    .prose-article strong {
      color: #ffffff;
    }
    .prose-article blockquote {
      border-left: 3px solid #06b6d4;
      background: rgba(6, 182, 212, 0.05);
      padding: 1rem 1.25rem;
      margin: 1.5rem 0;
      border-radius: 0 0.5rem 0.5rem 0;
      color: #cbd5e1;
    }

/* roulang page: category1 */
:root {
      --bg-main: #0b0f19;
      --card-bg: #111827;
      --card-hover: #1f2937;
      --border-color: rgba(255, 255, 255, 0.08);
      --primary-color: #4f46e5;
      --accent-color: #06b6d4;
    }
    body {
      background-color: var(--bg-main);
      color: #e5e7eb;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .custom-gradient-hero {
      background: radial-gradient(circle at 50% 20%, rgba(79, 70, 229, 0.18) 0%, rgba(11, 15, 25, 0.95) 75%);
    }
    .glass-nav {
      background: rgba(11, 15, 25, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .hover-card-effect {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .hover-card-effect:hover {
      transform: translateY(-4px);
      border-color: rgba(99, 102, 241, 0.35);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(79, 70, 229, 0.2);
    }

/* roulang page: category3 */
:root {
      --bg-main: #0b0f19;
      --card-bg: #111827;
      --card-hover: #1f2937;
      --border-color: rgba(255, 255, 255, 0.08);
      --primary-color: #4f46e5;
      --accent-color: #06b6d4;
    }
    body {
      background-color: var(--bg-main);
      color: #e5e7eb;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .custom-gradient-hero {
      background: radial-gradient(circle at 50% 20%, rgba(79, 70, 229, 0.22) 0%, rgba(11, 15, 25, 0.96) 80%);
    }
    .glass-nav {
      background: rgba(11, 15, 25, 0.88);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .hover-card-effect {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .hover-card-effect:hover {
      transform: translateY(-4px);
      border-color: rgba(99, 102, 241, 0.35);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(79, 70, 229, 0.2);
    }
    .category-header-mesh {
      background-image: radial-gradient(rgba(99, 102, 241, 0.15) 1px, transparent 0);
      background-size: 28px 28px;
    }