body {
      margin: 0;
      font-family: 'Poppins', system-ui, sans-serif;
      background: radial-gradient(circle at top, #0f172a, #020617);
      color: #e5e7eb;
    }
    
    .back-link {
      display: inline-block;
      margin-bottom: 14px;
      font-size: 13px;
      color: #60a5fa;
      text-decoration: none;
    }
    
    .back-link:hover {
      text-decoration: underline;
    }
    
    /* ===== HEADER ===== */
    .simple-header {
      padding: 40px 16px 28px;
      text-align: center;
      background: radial-gradient(circle at top,
          rgba(96, 165, 250, 0.12),
          transparent 60%);
    }
    
    .simple-header h1 {
      font-size: 26px;
      font-weight: 700;
      margin-bottom: 6px;
      color: #ffffff;
    }
    
    .simple-header .subtitle {
      font-size: 14px;
      opacity: 0.75;
    }
    
    
    /* ===== ARTICLE BASE ===== */
    .article-page {
      max-width: 860px;
      margin: 0 auto;
      line-height: 1.75;
      color: #e5e7eb;
    }
    
    /* Intro */
    .article-intro {
      font-size: 15px;
      color: #f3f4f6;
      margin-bottom: 22px;
    }
    
    /* Headings */
    .article-content h2 {
      margin-top: 36px;
      margin-bottom: 12px;
      font-size: 20px;
      font-weight: 600;
      color: #ffffff;
      border-left: 4px solid #60a5fa;
      padding-left: 10px;
    }
    
    .article-content h3 {
      margin-top: 28px;
      font-size: 17px;
      font-weight: 600;
      color: #dbeafe;
    }
    
    /* Paragraph */
    .article-content p {
      margin-bottom: 16px;
      font-size: 14px;
      color: #d1d5db;
    }
    
    /* Lists */
    .article-content ul {
      margin: 14px 0 18px 18px;
    }
    
    .article-content li {
      margin-bottom: 6px;
      font-size: 14px;
    }
    
    /* Quote */
    .article-content blockquote {
      margin: 24px 0;
      padding: 14px 18px;
      border-left: 4px solid #7aa2ff;
      background: rgba(96, 165, 250, 0.08);
      font-style: italic;
      color: #e0e7ff;
    }
    
    /* Divider */
    .article-content hr {
      border: none;
      height: 1px;
      background: linear-gradient(to right,
          transparent,
          rgba(255, 255, 255, 0.25),
          transparent);
      margin: 36px 0;
    }
    
    
    .article-footer {
      border-top: 1px solid rgba(255, 255, 255, .1);
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      font-size: 13px;
      opacity: .7;
      max-width: 480px;
      margin: 0 auto;
      padding: 24px 16px 64px;
      color: #e5e7eb;
    }
    
    .article-footer-note {
      font-size: 12px;
      text-align: center;
      margin-top: 20px;
    }
    
    .article-footer p {
      font-size: 12px;
      text-align: center;
      margin: 0 auto;
    }
    
    /* ===== RESPONSIVE ===== */
    @media (max-width: 480px) {
      .simple-header h1 {
        font-size: 22px;
      }
      
      .article-content {
        padding: 20px 16px;
      }
      
      .article-content h2 {
        font-size: 18px;
      }
    }
    
    
        .article-meta-top {
      max-width: 640px;
      display: flex;
      gap: 10px;
      align-items: center;
      margin: 14px auto;
    }
    
    .article-tag {
      background: linear-gradient(to right,
          rgba(96, 165, 250, 0.25),
          rgba(96, 165, 250, 0.12));
      color: #cfe3ff;
      font-size: 12px;
      padding: 6px 14px;
      border-radius: 999px;
      font-weight: 500;
    }