.ajax-request-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; margin: 22px 0; padding: 18px; border: 1px solid #d9e4ee; border-radius: 8px; background: linear-gradient(135deg, #f4f9ff 0%, #fff8ed 100%); }
      .ajax-flow-node { min-height: 104px; padding: 14px; border: 1px solid #d9e4ee; border-radius: 8px; background: #ffffff; text-align: center; }
      .ajax-flow-node strong, .ajax-flow-node small { display: block; }
      .ajax-flow-node strong { color: var(--text-blue); margin-bottom: 6px; }
      .ajax-flow-node small { line-height: 1.4; }
      .ajax-flow-client { border-top: 4px solid #2d9d78; }
      .ajax-flow-server { border-top: 4px solid #e27b32; }
      .ajax-flow-response { border-top: 4px solid #2f80c0; }
      .ajax-flow-arrow { color: var(--pri-yellow); font-size: 1.8rem; font-weight: 700; }
      .ajax-practice-panel { padding: 18px; border-left: 4px solid var(--pri-yellow); border-radius: 8px; background: #fff8ed; }
      .ajax-practice-panel strong { color: var(--text-blue); }
      .ajax-practice-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
      .ajax-practice-links a { font-weight: 600; }
      body.dark-theme .ajax-request-flow { border-color: #3a3a55; background: #1b1b32; }
      body.dark-theme .ajax-flow-node { border-color: #3a3a55; background: #121225; }
      body.dark-theme .ajax-practice-panel { background: #2b2630; }
      @media (max-width: 767.98px) { .ajax-request-flow { grid-template-columns: 1fr; } .ajax-flow-arrow { transform: rotate(90deg); justify-self: center; } }