/* roulang page: index */
:root {
      --bg-main: #0b0f17;
      --card-bg: #161d2a;
      --border-color: rgba(51, 65, 85, 0.45);
      --gradient-brand: linear-gradient(135deg, #e11d48 0%, #db2777 50%, #9333ea 100%);
    }
    body {
      background-color: var(--bg-main);
      color: #cbd5e1;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      overflow-x: hidden;
    }
    .text-gradient {
      background: linear-gradient(to right, #fb7185, #f472b6, #c084fc);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .badge-rose {
      display: inline-flex;
      align-items: center;
      padding: 0.2rem 0.65rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 600;
      background-color: rgba(225, 29, 72, 0.12);
      color: #fb7185;
      border: 1px solid rgba(225, 29, 72, 0.25);
    }
    .badge-purple {
      display: inline-flex;
      align-items: center;
      padding: 0.2rem 0.65rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 600;
      background-color: rgba(147, 51, 234, 0.12);
      color: #c084fc;
      border: 1px solid rgba(147, 51, 234, 0.25);
    }
    .btn-gradient {
      background: linear-gradient(to right, #e11d48, #db2777, #9333ea);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .btn-gradient:hover {
      opacity: 0.92;
      transform: translateY(-1px);
      box-shadow: 0 10px 25px -5px rgba(225, 29, 72, 0.3);
    }
    .card-hover {
      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .card-hover:hover {
      transform: translateY(-4px);
      border-color: rgba(225, 29, 72, 0.4);
      box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.6);
    }
    details > summary {
      list-style: none;
    }
    details > summary::-webkit-details-marker {
      display: none;
    }

/* roulang page: article */
:root {
      --bg-main: #0b0f17;
      --card-bg: #161d2a;
      --border-color: rgba(51, 65, 85, 0.45);
      --gradient-brand: linear-gradient(135deg, #e11d48 0%, #db2777 50%, #9333ea 100%);
    }
    body {
      background-color: var(--bg-main);
      color: #cbd5e1;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      overflow-x: hidden;
    }
    .text-gradient {
      background: linear-gradient(to right, #fb7185, #f472b6, #c084fc);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .badge-rose {
      display: inline-flex;
      align-items: center;
      padding: 0.2rem 0.65rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 600;
      background-color: rgba(225, 29, 72, 0.12);
      color: #fb7185;
      border: 1px solid rgba(225, 29, 72, 0.25);
    }
    .badge-purple {
      display: inline-flex;
      align-items: center;
      padding: 0.2rem 0.65rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 600;
      background-color: rgba(147, 51, 234, 0.12);
      color: #c084fc;
      border: 1px solid rgba(147, 51, 234, 0.25);
    }
    .btn-gradient {
      background: linear-gradient(to right, #e11d48, #db2777, #9333ea);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .btn-gradient:hover {
      opacity: 0.92;
      transform: translateY(-1px);
      box-shadow: 0 10px 25px -5px rgba(225, 29, 72, 0.3);
    }
    .card-hover {
      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .card-hover:hover {
      transform: translateY(-4px);
      border-color: rgba(225, 29, 72, 0.4);
      box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.6);
    }
    .article-prose {
      color: #cbd5e1;
      font-size: 1.05rem;
      line-height: 1.95;
    }
    .article-prose p {
      margin-bottom: 1.5rem;
      text-align: justify;
    }
    .article-prose h2 {
      font-size: 1.6rem;
      font-weight: 800;
      color: #f8fafc;
      margin-top: 2.5rem;
      margin-bottom: 1.25rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid rgba(51, 65, 85, 0.5);
      position: relative;
    }
    .article-prose h2::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -1px;
      width: 48px;
      height: 2px;
      background: linear-gradient(to right, #e11d48, #9333ea);
    }
    .article-prose h3 {
      font-size: 1.3rem;
      font-weight: 700;
      color: #e2e8f0;
      margin-top: 2rem;
      margin-bottom: 1rem;
    }
    .article-prose blockquote {
      border-left: 4px solid #e11d48;
      background: rgba(22, 29, 42, 0.6);
      padding: 1.25rem 1.5rem;
      border-radius: 0 1rem 1rem 0;
      margin: 2rem 0;
      font-style: italic;
      color: #cbd5e1;
    }
    .article-prose img {
      border-radius: 1rem;
      margin: 2rem auto;
      max-width: 100%;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    }

/* roulang page: category1 */
:root {
      --bg-main: #0b0f17;
      --card-bg: #161d2a;
      --border-color: rgba(51, 65, 85, 0.45);
      --gradient-brand: linear-gradient(135deg, #e11d48 0%, #db2777 50%, #9333ea 100%);
    }
    body {
      background-color: var(--bg-main);
      color: #cbd5e1;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      overflow-x: hidden;
    }
    .text-gradient {
      background: linear-gradient(to right, #fb7185, #f472b6, #c084fc);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .badge-rose {
      display: inline-flex;
      align-items: center;
      padding: 0.2rem 0.65rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 600;
      background-color: rgba(225, 29, 72, 0.12);
      color: #fb7185;
      border: 1px solid rgba(225, 29, 72, 0.25);
    }
    .badge-purple {
      display: inline-flex;
      align-items: center;
      padding: 0.2rem 0.65rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 600;
      background-color: rgba(147, 51, 234, 0.12);
      color: #c084fc;
      border: 1px solid rgba(147, 51, 234, 0.25);
    }
    .btn-gradient {
      background: linear-gradient(to right, #e11d48, #db2777, #9333ea);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .btn-gradient:hover {
      opacity: 0.92;
      transform: translateY(-1px);
      box-shadow: 0 10px 25px -5px rgba(225, 29, 72, 0.3);
    }
    .card-hover {
      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .card-hover:hover {
      transform: translateY(-4px);
      border-color: rgba(225, 29, 72, 0.4);
      box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.6);
    }
    .filter-pill-active {
      background: linear-gradient(135deg, #e11d48, #9333ea);
      color: #ffffff;
      font-weight: 600;
      box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25);
    }
    .filter-pill {
      background-color: rgba(30, 41, 59, 0.7);
      color: #94a3b8;
      transition: all 0.2s ease;
    }
    .filter-pill:hover {
      background-color: rgba(51, 65, 85, 0.8);
      color: #f1f5f9;
    }