.learning-path-panel,
      .topic-levels-panel {
        border: 1px solid #d9e4ee;
        border-radius: 10px;
        padding: 24px;
        background: linear-gradient(135deg, #f4f9ff 0%, #ffffff 72%);
        box-shadow: 0 8px 24px rgba(37, 38, 94, 0.06);
      }
      .learning-path-panel .h2-heading,
      .topic-levels-panel .h2-heading {
        margin-bottom: 10px;
      }
      .learning-steps {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        list-style: none;
        padding-left: 0;
      }
      .learning-step {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        min-height: 104px;
        padding: 16px;
        border: 1px solid #d9e4ee;
        border-left: 4px solid var(--pri-yellow);
        border-radius: 8px;
        background-color: #ffffff;
      }
      .learning-step-number {
        display: inline-flex;
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: var(--text-blue);
        color: #ffffff;
        font-weight: 700;
      }
      body.dark-theme .learning-step-number {
        background-color: var(--pri-yellow);
        color: #121225;
      }
      .learning-step strong { color: var(--text-blue); }
      .learning-step a { color: #1769aa; font-weight: 600; }
      .level-card {
        height: 100%;
        padding: 18px;
        border: 1px solid #d9e4ee;
        border-top: 4px solid;
        border-radius: 8px;
        background-color: #ffffff;
      }
      .level-card h3 { margin-bottom: 8px; color: var(--text-blue); }
      .level-card p { margin-bottom: 0; line-height: 1.55; }
      .level-beginner { border-top-color: #2d9d78; background-color: #f1fbf6; }
      .level-intermediate { border-top-color: #2f80c0; background-color: #f1f8fd; }
      .level-advanced { border-top-color: #e27b32; background-color: #fff7ef; }
      .level-card ul { margin: 10px 0 0; padding-left: 18px; }
      .level-card li { margin-bottom: 6px; }
      .level-card a { color: #1769aa; font-weight: 600; }
      .level-prereq { font-size: 0.9rem; }
      .beginner-flow {
        display: flex;
        flex-direction: column;
      }
      .beginner-flow .accordion-item { order: 20; }
      .beginner-flow .flow-introduction { order: 1; }
      .beginner-flow .flow-what-can { order: 2; }
      .beginner-flow .flow-html-css-js { order: 3; }
      .beginner-flow .flow-first-interaction { order: 4; }
        .beginner-flow .flow-prerequisites { order: 5; }
        .beginner-flow .flow-programming { order: 6; }
        .beginner-flow .flow-high-level { order: 7; }
        .beginner-flow .flow-low-level { order: 8; }
        .beginner-flow .flow-comparison { order: 9; }
        .beginner-flow .flow-frontend { order: 10; }
        .beginner-flow .flow-backend { order: 11; }
        .beginner-flow .flow-front-back { order: 12; }
        .beginner-flow .flow-html { order: 13; }
        .beginner-flow .flow-css { order: 14; }
        .beginner-flow .flow-javascript { order: 15; }
        .beginner-flow .flow-role { order: 16; }
        .beginner-flow .flow-capabilities { order: 17; }
        .beginner-flow .flow-roadmap { order: 18; }
        .beginner-flow .flow-summary { order: 19; }
      body.dark-theme .learning-path-panel,
      body.dark-theme .topic-levels-panel {
        border-color: #3a3a55;
        background: linear-gradient(135deg, #1d1d36 0%, #121225 72%);
      }
      body.dark-theme .learning-step,
      body.dark-theme .level-card { border-color: #3a3a55; background-color: #1b1b32; }
      body.dark-theme .learning-step a { color: #8bc8f5; }
      @media (max-width: 767.98px) {
        .learning-path-panel,
        .topic-levels-panel { padding: 18px; }
        .learning-steps { grid-template-columns: 1fr; gap: 10px; }
      }