.guide-hero {
    background:
      radial-gradient(circle at 20% 20%, rgba(211, 47, 47, 0.14), transparent 42%),
      linear-gradient(135deg, #161B22 0%, #111827 100%);
    padding: 36px 24px;
    border-radius: 16px;
    border: 1px solid #2A2F36;
    box-shadow: 0 18px 48px rgba(0,0,0,0.45);
    margin-bottom: 28px;
  }
  .guide-hero h1 { margin: 0 0 12px; color: #F8FAFC; }
  .guide-hero .blog-meta { color: #9AA4AE; }
  .guide-highlight, .guide-toc, .guide-tip, .guide-grid a {
    background: #161B22;
    border: 1px solid #2A2F36;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 14px 38px rgba(0,0,0,0.4);
    margin-bottom: 28px;
  }
  .guide-highlight h3,
  .guide-tip strong { color: #F8FAFC; }
  .guide-highlight p,
  .guide-highlight ul,
  .guide-toc ol,
  .guide-tip { color: #C4CDD5; }
  .guide-toc { background: #111827; }
  .guide-tip {
    border-left: 4px solid #D32F2F;
    background: linear-gradient(135deg, #161B22 0%, #111827 100%);
  }
  .blog-content a { color: #D32F2F; font-weight: 700; }
  .blog-content a:hover { color: #B71C1C; }
  .blog-content ul li, .blog-content ol li { color: #E6EDF3; }
  .guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
  }
  .guide-grid a {
    color: #E6EDF3;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  }
  .guide-grid a:hover {
    transform: translateY(-4px);
    border-color: rgba(211,47,47,0.4);
    box-shadow: 0 16px 32px rgba(211,47,47,0.2);
  }