#mnb-classes-and-subjects { isolation:isolate; }
    #mnb-classes-and-subjects{
      background:
        radial-gradient(1200px 520px at -10% -20%, rgba(99,102,241,.10), transparent 60%),
        radial-gradient(900px 420px at 110% -10%, rgba(236,72,153,.10), transparent 60%),
        radial-gradient(800px 420px at 50% 120%, rgba(14,165,233,.08), transparent 60%);
    }
    .dark #mnb-classes-and-subjects{
      background:
        radial-gradient(1200px 520px at -10% -20%, rgba(99,102,241,.18), transparent 60%),
        radial-gradient(900px 420px at 110% -10%, rgba(236,72,153,.16), transparent 60%),
        radial-gradient(800px 420px at 50% 120%, rgba(14,165,233,.14), transparent 60%);
    }
    #mnb-classes-and-subjects .mnb-card{
      position:relative; transition:transform .28s, box-shadow .28s, background .3s, border-color .3s;
      box-shadow:0 10px 24px rgba(2,6,23,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.78));
      backdrop-filter:blur(8px) saturate(1.2);
      border:1px solid rgba(15,23,42,.06);
    }
    .dark #mnb-classes-and-subjects .mnb-card{
      background:linear-gradient(180deg, rgba(15,23,42,.55), rgba(15,23,42,.45));
      box-shadow:0 12px 28px rgba(2,6,23,.55);
      border-color:rgba(148,163,184,.15);
    }
    #mnb-classes-and-subjects .mnb-card:hover{ transform:translateY(-4px); box-shadow:0 18px 36px rgba(2,6,23,.14) }
    #mnb-classes-and-subjects .mnb-card::before{
      content:""; position:absolute; inset:0 0 auto 0; height:6px; border-radius:14px 14px 0 0;
      background:var(--accent, linear-gradient(90deg, #6366f1, #22c55e));
      opacity:.85;
    }