@keyframes dashFadeIn {
      from {
        opacity: 0;
        transform: translateY(12px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes ringProgress {
      from {
        stroke-dashoffset: 283
      }
    }

    @keyframes ringGlow {

      0%,
      100% {
        filter: drop-shadow(0 0 4px rgba(243, 198, 73, 0.2))
      }

      50% {
        filter: drop-shadow(0 0 12px rgba(243, 198, 73, 0.5))
      }
    }

    @keyframes nodeRipple {
      0% {
        box-shadow: 0 0 0 0 rgba(122, 36, 22, 0.25)
      }

      100% {
        box-shadow: 0 0 0 12px rgba(122, 36, 22, 0)
      }
    }

    @keyframes slideProgress {
      from {
        width: 0
      }
    }

    /* ═══ MAIN CARD ═══ */
    .student-profile-light-card {
      background: #FDFBF8 !important;
      border: none !important;
      border-radius: 28px !important;
      box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(232, 221, 210, 0.5) !important;
      padding: 0 !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      animation: dashFadeIn .4s cubic-bezier(.34, 1.56, .64, 1) !important;
    }

    /* ═══ DARK HERO HEADER ═══ */
    .sp-light-top-pill {
      position: static !important;
      width: 100% !important;
      margin: 0 !important;
      background: linear-gradient(145deg, #3D1008 0%, #7A2416 45%, #9E3220 100%) !important;
      border: none !important;
      border-radius: 0 !important;
      padding: 28px 24px 24px !important;
      gap: 0 !important;
      display: block !important;
      text-align: center !important;
      box-shadow: 0 6px 30px rgba(122, 36, 22, 0.3) inset, 0 -1px 0 rgba(243, 198, 73, 0.15) !important;
    }

    .sp-pill-label {
      font-size: 0.82rem !important;
      font-weight: 700 !important;
      color: rgba(255, 255, 255, 0.65) !important;
      display: block !important;
      margin-bottom: 2px !important;
    }

    .sp-pill-id {
      background: rgba(243, 198, 73, 0.12) !important;
      border: 1px solid rgba(243, 198, 73, 0.25) !important;
      color: #F3C649 !important;
      font-size: 0.85rem !important;
      font-weight: 800 !important;
      padding: 4px 14px !important;
      border-radius: 20px !important;
      display: inline-block !important;
      font-family: 'IBM Plex Sans Arabic', monospace !important;
    }

    /* ═══ 4 STATS — DARK HERO ═══ */
    .sp-light-columns {
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 0 !important;
      align-items: stretch !important;
      margin-top: 0 !important;
      background: linear-gradient(145deg, #5A1A0D, #7A2416 50%, #6B1D10) !important;
      padding: 20px 16px 22px !important;
      border-bottom: 2px solid rgba(243, 198, 73, 0.12) !important;
    }

    /* ═══ Official Student Bio Card ═══ */
    .sp-official-bio-card {
      margin: 16px 20px 6px !important;
      background: linear-gradient(135deg, #FFFDFB 0%, #FAF4EE 100%) !important;
      border: 1.5px solid rgba(211, 180, 139, 0.45) !important;
      border-radius: 16px !important;
      padding: 16px 20px !important;
      box-shadow: 0 4px 18px rgba(135, 42, 8, 0.05) !important;
    }
    .sp-bio-header {
      display: flex !important;
      align-items: center !important;
      gap: 14px !important;
      padding-bottom: 12px !important;
      border-bottom: 1px dashed rgba(211, 180, 139, 0.4) !important;
      margin-bottom: 12px !important;
    }
    .sp-bio-avatar {
      width: 44px !important;
      height: 44px !important;
      border-radius: 12px !important;
      background: linear-gradient(135deg, #872A08, #A33625) !important;
      color: #fff !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 1.25rem !important;
      box-shadow: 0 4px 12px rgba(135, 42, 8, 0.25) !important;
      flex-shrink: 0 !important;
    }
    .sp-bio-main {
      flex: 1 !important;
      min-width: 0 !important;
    }
    .sp-bio-name {
      font-size: 1.15rem !important;
      font-weight: 900 !important;
      color: #3D1008 !important;
      margin: 0 0 2px !important;
    }
    .sp-bio-college {
      font-size: 0.84rem !important;
      font-weight: 700 !important;
      color: #872A08 !important;
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
    }
    .sp-bio-status-badge {
      background: rgba(16, 185, 129, 0.12) !important;
      border: 1px solid rgba(16, 185, 129, 0.3) !important;
      color: #059669 !important;
      font-size: 0.76rem !important;
      font-weight: 800 !important;
      padding: 4px 10px !important;
      border-radius: 20px !important;
      display: flex !important;
      align-items: center !important;
      gap: 4px !important;
      white-space: nowrap !important;
    }
    .sp-bio-grid {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 10px 18px !important;
    }
    @media (max-width: 600px) {
      .sp-bio-grid { grid-template-columns: 1fr !important; }
      .sp-bio-header { flex-direction: column !important; align-items: flex-start !important; }
    }
    .sp-bio-item {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      background: #FFFFFF !important;
      border: 1px solid rgba(211, 180, 139, 0.25) !important;
      border-radius: 10px !important;
      padding: 8px 12px !important;
      font-size: 0.82rem !important;
    }
    .sp-bio-lbl {
      color: #64748b !important;
      font-weight: 600 !important;
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
    }
    .sp-bio-val {
      color: #1e293b !important;
      font-weight: 800 !important;
      font-family: 'IBM Plex Sans Arabic', monospace !important;
    }

    .sp-light-col {
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      padding: 8px 6px !important;
      position: relative !important;
      transition: all .3s ease !important;
      animation: none !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
    }

    .sp-light-col:not(:last-child)::after {
      content: '' !important;
      position: absolute !important;
      left: 0 !important;
      top: 15% !important;
      height: 70% !important;
      width: 1px !important;
      background: rgba(255, 255, 255, 0.1) !important;
    }

    .sp-light-col:not(:first-child)::before {
      display: none !important
    }

    .sp-light-col:hover {
      transform: translateY(-2px) !important
    }

    .sp-light-icon {
      width: 42px !important;
      height: 42px !important;
      border-radius: 50% !important;
      background: rgba(255, 255, 255, 0.08) !important;
      border: 1.5px solid rgba(243, 198, 73, 0.25) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 auto 8px !important;
      font-size: 1.15rem !important;
      color: #F3C649 !important;
      transition: all .3s ease !important;
    }

    .sp-light-col:hover .sp-light-icon {
      background: rgba(243, 198, 73, 0.15) !important;
      border-color: rgba(243, 198, 73, 0.5) !important;
      transform: scale(1.1) !important;
      box-shadow: 0 0 15px rgba(243, 198, 73, 0.2) !important;
    }

    .sp-light-val {
      font-size: 1.3rem !important;
      font-weight: 900 !important;
      color: #FFFFFF !important;
      margin-bottom: 2px !important
    }

    .sp-light-val.maroon-val {
      color: #F3C649 !important
    }

    .sp-light-lbl {
      font-size: 0.76rem !important;
      font-weight: 600 !important;
      color: rgba(255, 255, 255, 0.55) !important
    }

    /* ═══ LEVELS SECTION — PREMIUM GLASS ═══ */
    .sp-levels-section {
      background: #FFFFFF !important;
      border: none !important;
      border-radius: 0 !important;
      padding: 24px 20px 18px !important;
      margin-top: 0 !important;
      border-bottom: 1.5px solid #EDE4D9 !important;
      box-shadow: none !important;
    }

    .sp-levels-main-title {
      font-size: 1.1rem !important;
      font-weight: 900 !important;
      color: #2D0F08 !important
    }

    .sp-diamond-icon {
      color: #F3C649 !important;
      font-size: 0.65rem !important
    }

    .sp-levels-track {
      max-width: 580px !important;
      padding: 0 20px !important
    }

    .sp-level-circle {
      width: 58px !important;
      height: 58px !important;
      border-radius: 50% !important;
      background: #FAF6F1 !important;
      border: 2.5px solid #E0D3C4 !important;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04) !important;
      transition: all .4s cubic-bezier(.34, 1.56, .64, 1) !important;
      font-size: 1.35rem !important;
      color: #B5A093 !important;
    }

    .sp-level-circle:hover {
      transform: scale(1.12) !important;
      border-color: #BC8859 !important
    }

    .sp-level-node.unlocked .sp-level-circle {
      border-color: #BC8859 !important;
      color: #7A2416 !important;
      background: #FEF6EC !important;
      box-shadow: 0 4px 16px rgba(188, 136, 89, 0.15) !important;
    }

    .sp-level-node.active-current .sp-level-circle {
      background: linear-gradient(135deg, #7A2416, #A33625) !important;
      border: 3px solid #F3C649 !important;
      color: #F3C649 !important;
      transform: scale(1.2) !important;
      box-shadow: 0 6px 25px rgba(122, 36, 22, 0.35), 0 0 20px rgba(243, 198, 73, 0.2) !important;
      animation: nodeRipple 2s ease-in-out infinite !important;
    }

    .sp-level-name {
      font-size: 0.88rem !important;
      font-weight: 900 !important;
      color: #1E1108 !important;
      margin-top: 2px !important
    }

    .sp-level-node.active-current .sp-level-name {
      color: #7A2416 !important
    }

    .sp-level-range {
      font-size: 0.72rem !important;
      font-weight: 700 !important;
      color: #8B7A6B !important
    }

    .sp-levels-connecting-line {
      height: 3px !important;
      background: #EDE4D9 !important;
      top: 30px !important
    }

    .sp-levels-fill-bar {
      background: linear-gradient(90deg, #7A2416 0%, #BC8859 60%, #F3C649 100%) !important;
      border-radius: 4px !important;
      animation: slideProgress 1.5s cubic-bezier(.16, 1, .3, 1) both !important;
      box-shadow: 0 0 8px rgba(243, 198, 73, 0.3) !important;
    }

    .sp-levels-note {
      font-size: 0.82rem !important;
      font-weight: 700 !important;
      color: #8B7A6B !important;
      border-top: 1px solid #EDE4D9 !important;
      padding-top: 14px !important;
      margin-top: 16px !important;
    }

    /* ═══ SUMMARY BOX ═══ */
    .sp-light-summary-box {
      background: #FDFBF8 !important;
      border: none !important;
      border-radius: 0 0 28px 28px !important;
      padding: 20px 20px 24px !important;
      margin-top: 0 !important;
      box-shadow: none !important;
    }

    .sp-summary-header {
      font-size: 0.92rem !important;
      font-weight: 900 !important;
      color: #2D0F08 !important;
      margin-bottom: 14px !important;
      padding-bottom: 10px !important;
      border-bottom: 1.5px solid #EDE4D9 !important;
    }

    .sp-summary-header i {
      color: #7A2416 !important
    }

    .sp-summary-grid {
      gap: 10px !important
    }

    .sp-sum-item {
      background: #FFFFFF !important;
      border: 1.5px solid #EDE4D9 !important;
      border-radius: 14px !important;
      padding: 11px 14px !important;
      font-size: 0.82rem !important;
      font-weight: 700 !important;
      color: #2D1A10 !important;
      transition: all .3s cubic-bezier(.34, 1.56, .64, 1) !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
    }

    .sp-sum-item:hover {
      transform: translateY(-3px) scale(1.01) !important;
      border-color: #BC8859 !important;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06) !important
    }

    .sp-sum-item.done {
      border-color: #86EFAC !important;
      background: linear-gradient(135deg, #F0FDF4, #ECFDF5) !important;
      border-right: 4px solid #22C55E !important
    }

    .sp-sum-badge {
      font-size: 0.7rem !important;
      font-weight: 800 !important;
      padding: 3px 10px !important;
      border-radius: 8px !important;
      letter-spacing: 0.2px !important
    }

    .sp-sum-badge.done {
      background: #DCFCE7 !important;
      color: #15803D !important
    }

    .sp-sum-badge.pending {
      background: #FEF3C7 !important;
      color: #B45309 !important
    }

    .sp-sum-badge.empty {
      background: #F1F5F9 !important;
      color: #64748B !important
    }

    /* ═══ CLOSE BTN ═══ */
    .sp-light-close-btn {
      top: 12px !important;
      left: 12px !important;
      z-index: 20 !important;
      width: 34px !important;
      height: 34px !important;
      border-radius: 50% !important;
      background: rgba(255, 255, 255, 0.1) !important;
      border: 1px solid rgba(255, 255, 255, 0.15) !important;
      color: rgba(255, 255, 255, 0.7) !important;
      transition: all .3s cubic-bezier(.34, 1.56, .64, 1) !important;
    }

    .sp-light-close-btn:hover {
      background: rgba(255, 255, 255, 0.2) !important;
      color: #FFF !important;
      transform: rotate(90deg) scale(1.1) !important
    }

    /* ═══ RESPONSIVE ═══ */
    @media(max-width:650px) {
      .sp-light-columns {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1px !important;
        padding: 14px 10px 16px !important
      }

      .sp-light-col:not(:last-child)::after {
        display: none !important
      }

      .sp-light-col {
        padding: 10px 6px !important
      }

      .sp-level-circle {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.1rem !important
      }

      .sp-levels-connecting-line {
        top: 24px !important
      }
    }