@keyframes awardSlideUp {
      from {
        opacity: 0;
        transform: translateY(20px) scale(0.97)
      }

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

    @keyframes floatBadge {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-5px)
      }
    }

    @keyframes softGlow {

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

      50% {
        box-shadow: 0 4px 30px rgba(122, 36, 22, 0.18)
      }
    }

    /* ═══ OVERLAY ═══ */
    .content-overlay.award-overlay {
      position: fixed !important;
      inset: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      z-index: 999999 !important;
      background: rgba(0, 0, 0, 0.55) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      transition: all .35s cubic-bezier(.16, 1, .3, 1) !important;
      padding: 20px !important;
      direction: rtl !important
    }

    .content-overlay.award-overlay.active {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important
    }

    /* ═══ PANEL — LIGHT CREAM ═══ */
    .content-overlay.award-overlay .award-panel {
      position: relative !important;
      z-index: 10 !important;
      width: min(95%, 940px) !important;
      max-height: 88vh !important;
      background: #FDFBF8 !important;
      border: 1.5px solid #E8DDD2 !important;
      border-radius: 26px !important;
      overflow-y: auto !important;
      padding: 36px 30px !important;
      box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
      transform: scale(0.93) translateY(16px) !important;
      transition: all .4s cubic-bezier(.34, 1.56, .64, 1) !important;
      margin: auto !important;
      color: #1E1108 !important;
      direction: rtl !important
    }

    .content-overlay.award-overlay.active .award-panel {
      transform: scale(1) translateY(0) !important
    }

    .content-overlay.award-overlay .award-panel::-webkit-scrollbar {
      width: 6px
    }

    .content-overlay.award-overlay .award-panel::-webkit-scrollbar-track {
      background: transparent
    }

    .content-overlay.award-overlay .award-panel::-webkit-scrollbar-thumb {
      background: rgba(188, 136, 89, 0.3);
      border-radius: 10px
    }

    /* ═══ CLOSE ═══ */
    .award-close {
      position: absolute !important;
      top: 16px !important;
      left: 16px !important;
      z-index: 15 !important;
      width: 36px !important;
      height: 36px !important;
      border-radius: 50% !important;
      background: #F5EDE4 !important;
      border: 1px solid #E0D3C4 !important;
      color: #7A2416 !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 1rem !important;
      transition: all .3s cubic-bezier(.34, 1.56, .64, 1) !important
    }

    .award-close:hover {
      background: #7A2416 !important;
      color: #fff !important;
      transform: rotate(90deg) scale(1.1) !important
    }

    /* ═══ HEADER ═══ */
    .rowad-award-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin-bottom: 26px
    }

    .rowad-award-trophy-badge {
      width: 62px;
      height: 62px;
      border-radius: 50%;
      background: linear-gradient(135deg, #7A2416, #A33625);
      color: #F3C649;
      font-size: 1.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 25px rgba(122, 36, 22, 0.35), 0 0 15px rgba(243, 198, 73, 0.2);
      margin-bottom: 12px;
      animation: floatBadge 3s ease-in-out infinite;
      border: 2.5px solid rgba(243, 198, 73, 0.5)
    }

    .rowad-award-pill {
      background: rgba(122, 36, 22, 0.06);
      border: 1px solid rgba(122, 36, 22, 0.15);
      color: #7A2416;
      font-weight: 800;
      font-size: 0.78rem;
      padding: 5px 14px;
      border-radius: 20px;
      margin-bottom: 8px;
      display: inline-flex;
      align-items: center;
      gap: 5px
    }

    .rowad-award-title {
      font-size: clamp(1.3rem, 2.5vw, 1.65rem);
      font-weight: 900;
      color: #2D0F08;
      margin: 0 0 6px 0
    }

    .rowad-award-subtitle {
      font-size: 0.88rem;
      color: #6B5B50;
      font-weight: 600;
      max-width: 660px;
      line-height: 1.7;
      margin: 0
    }

    /* ═══ TABS ═══ */
    .award-tabs-header {
      display: flex;
      gap: 8px;
      background: #F5EDE4;
      padding: 6px;
      border-radius: 16px;
      margin-bottom: 26px;
      border: 1px solid #E8DDD2
    }

    .award-tab-btn {
      flex: 1;
      background: transparent;
      border: none;
      padding: 12px 14px;
      border-radius: 12px;
      font-size: 0.9rem;
      font-weight: 800;
      color: #8B7A6B;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
      font-family: 'IBM Plex Sans Arabic', sans-serif
    }

    .award-tab-btn:hover {
      background: #FFF;
      color: #7A2416;
      transform: translateY(-2px);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06)
    }

    .award-tab-btn.active {
      background: linear-gradient(135deg, #7A2416, #9E3220);
      color: #FFF;
      box-shadow: 0 4px 18px rgba(122, 36, 22, 0.25)
    }

    .award-tab-content {
      display: none
    }

    .award-tab-content.active {
      display: block;
      animation: awardSlideUp .45s cubic-bezier(.16, 1, .3, 1) forwards
    }

    /* ═══ ROOT CARD ═══ */
    .tree-roadmap-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 22px
    }

    .tree-root-card {
      background: linear-gradient(135deg, #7A2416 0%, #9E3220 100%);
      border: 2px solid rgba(243, 198, 73, 0.4);
      border-radius: 20px;
      padding: 18px 24px;
      display: flex;
      align-items: center;
      gap: 16px;
      color: #fff;
      max-width: 650px;
      width: 100%;
      box-shadow: 0 10px 35px rgba(122, 36, 22, 0.3), 0 0 15px rgba(243, 198, 73, 0.12);
      text-align: right;
      z-index: 3;
      animation: softGlow 4s ease-in-out infinite;
      transition: transform .3s cubic-bezier(.34, 1.56, .64, 1)
    }

    .tree-root-card:hover {
      transform: scale(1.02) translateY(-2px)
    }

    .tree-root-icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(243, 198, 73, 0.45);
      color: #F3C649;
      font-size: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .tree-root-info h3 {
      margin: 3px 0 2px 0;
      font-size: 1.08rem;
      font-weight: 900;
      color: #FFF
    }

    .tree-root-info p {
      margin: 0;
      font-size: 0.8rem;
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.5
    }

    .tree-root-badge {
      background: linear-gradient(90deg, #F3C649, #E0A82E);
      color: #2E0B05;
      font-weight: 900;
      font-size: 0.7rem;
      padding: 3px 11px;
      border-radius: 12px;
      display: inline-block
    }

    /* ═══ CONNECTORS ═══ */
    .tree-connector-lines {
      position: relative;
      width: 100%;
      height: 36px;
      display: flex;
      justify-content: center;
      align-items: center
    }

    .tree-main-stem {
      position: absolute;
      top: 0;
      width: 2.5px;
      height: 18px;
      background: linear-gradient(to bottom, #7A2416, #BC8859)
    }

    .tree-branch-left {
      position: absolute;
      top: 18px;
      right: 50%;
      width: 26%;
      height: 18px;
      border-top: 2.5px solid #BC8859;
      border-right: 2.5px solid #BC8859;
      border-top-right-radius: 12px
    }

    .tree-branch-right {
      position: absolute;
      top: 18px;
      left: 50%;
      width: 26%;
      height: 18px;
      border-top: 2.5px solid #BC8859;
      border-left: 2.5px solid #BC8859;
      border-top-left-radius: 12px
    }

    /* ═══ BRANCH CARDS ═══ */
    .tree-branches-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
      width: 100%
    }

    .tree-branch-card {
      background: #FFFFFF;
      border: 1.5px solid #E8DDD2;
      border-radius: 20px;
      padding: 20px;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
      text-align: right;
      transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
      position: relative
    }

    .tree-branch-card:hover {
      transform: translateY(-4px);
      border-color: #BC8859;
      box-shadow: 0 10px 35px rgba(122, 36, 22, 0.1)
    }

    .tree-branch-card.campus-branch {
      border-top: 4px solid #7A2416
    }

    .tree-branch-card.virtual-branch {
      border-top: 4px solid #BC8859
    }

    .tb-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px
    }

    .tb-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: linear-gradient(135deg, #FEF3E2, #FAE9D5);
      border: 1px solid #E8DDD2;
      color: #7A2416;
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .tb-tag {
      font-size: 0.7rem;
      font-weight: 800;
      padding: 3px 9px;
      border-radius: 7px;
      display: inline-flex;
      align-items: center;
      gap: 4px
    }

    .tb-tag.campus-tag {
      background: #FEF3C7;
      color: #92400E;
      border: 1px solid #FDE68A
    }

    .tb-tag.virtual-tag {
      background: #DBEAFE;
      color: #1E40AF;
      border: 1px solid #BFDBFE
    }

    .tb-header h4 {
      margin: 4px 0 0 0;
      font-size: 1.05rem;
      font-weight: 900;
      color: #1E1108
    }

    .tb-desc {
      font-size: 0.82rem;
      color: #6B5B50;
      font-weight: 600;
      margin: 0 0 14px 0;
      line-height: 1.55
    }

    .tb-sub-tracks {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .tb-sub-item {
      background: #FAF6F1;
      border: 1px solid #EDE4D9;
      border-radius: 14px;
      padding: 12px 14px;
      display: flex;
      gap: 12px;
      align-items: flex-start;
      transition: all .3s cubic-bezier(.34, 1.56, .64, 1)
    }

    .tb-sub-item:hover {
      transform: scale(1.015);
      border-color: #BC8859;
      background: #FFF;
      box-shadow: 0 4px 15px rgba(122, 36, 22, 0.06)
    }

    .tbs-icon {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      background: #FFF;
      border: 1px solid #E0D3C4;
      color: #7A2416;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.88rem;
      flex-shrink: 0;
      margin-top: 2px
    }

    .tbs-content {
      flex: 1
    }

    .tbs-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 4px
    }

    .tbs-title-row strong {
      font-size: 0.88rem;
      font-weight: 900;
      color: #1E1108
    }

    .tbs-title-row strong i {
      color: #7A2416;
      margin-left: 3px
    }

    .tbs-pts-badge {
      background: #7A2416;
      color: #F3C649;
      font-weight: 900;
      font-size: 0.72rem;
      padding: 3px 9px;
      border-radius: 10px;
      white-space: nowrap
    }

    .tbs-content p {
      margin: 0 0 8px 0;
      font-size: 0.78rem;
      color: #6B5B50;
      line-height: 1.5;
      font-weight: 600
    }

    .tbs-pills-list {
      display: flex;
      flex-wrap: wrap;
      gap: 5px
    }

    .tbs-pills-list span {
      background: #FFF;
      border: 1px solid #E0D3C4;
      color: #3D2E22;
      font-size: 0.71rem;
      font-weight: 700;
      padding: 4px 9px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all .25s cubic-bezier(.34, 1.56, .64, 1)
    }

    .tbs-pills-list span i {
      color: #7A2416;
      font-size: 0.62rem
    }

    .tbs-pills-list span:hover {
      background: #7A2416;
      color: #FFF;
      border-color: #7A2416;
      transform: translateY(-2px)
    }

    .tbs-pills-list span:hover i {
      color: #F3C649
    }

    /* ═══ MILESTONES ═══ */
    .rowad-milestones-card {
      background: #FAF6F1;
      border: 1.5px solid #E8DDD2;
      border-radius: 18px;
      padding: 18px;
      margin-bottom: 18px
    }

    .rm-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px
    }

    .rm-header h4 {
      margin: 0;
      font-size: 0.92rem;
      font-weight: 900;
      color: #1E1108
    }

    .rm-steps-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      overflow-x: auto
    }

    .rm-step-pill {
      flex: 1;
      background: #FFF;
      border: 1.5px solid #E8DDD2;
      border-radius: 14px;
      padding: 10px 8px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      min-width: 90px;
      transition: all .3s cubic-bezier(.34, 1.56, .64, 1)
    }

    .rm-step-pill:hover {
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
      border-color: #BC8859
    }

    .rm-step-pill.highlight-crown {
      background: linear-gradient(135deg, #FEF6EC, #FDF0DD);
      border-color: #F3C649;
      animation: softGlow 3s ease-in-out infinite
    }

    .rm-step-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #FAF6F1;
      color: #7A2416;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.85rem;
      margin-bottom: 2px
    }

    .rm-step-pill.highlight-crown .rm-step-icon {
      background: linear-gradient(135deg, #7A2416, #9E3220);
      color: #F3C649;
      box-shadow: 0 3px 10px rgba(122, 36, 22, 0.2)
    }

    .rm-step-pill strong {
      font-size: 0.8rem;
      font-weight: 900;
      color: #1E1108
    }

    .rm-step-pill span {
      font-size: 0.7rem;
      color: #8B7A6B;
      font-weight: 600
    }

    .rm-arrow {
      color: #D4C4B5;
      font-size: 1rem
    }

    /* ═══ CEREMONY BANNER ═══ */
    .rowad-ceremony-banner {
      background: linear-gradient(135deg, #7A2416 0%, #9E3220 50%, #6B1D10 100%);
      border: 1.5px solid rgba(243, 198, 73, 0.35);
      border-radius: 18px;
      padding: 22px;
      text-align: center;
      color: #fff;
      position: relative;
      box-shadow: 0 10px 35px rgba(122, 36, 22, 0.25);
      transition: all .3s cubic-bezier(.34, 1.56, .64, 1)
    }

    .rowad-ceremony-banner:hover {
      transform: scale(1.01) translateY(-2px)
    }

    .rc-badge-ribbon {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: linear-gradient(90deg, #F3C649, #E0A82E);
      color: #2B0B06;
      font-weight: 900;
      font-size: 0.78rem;
      padding: 4px 14px;
      border-radius: 20px;
      margin-bottom: 8px
    }

    .rowad-ceremony-banner h3 {
      font-size: 1.15rem;
      font-weight: 900;
      color: #FFF;
      margin: 0 0 6px 0
    }

    .rowad-ceremony-banner h3 i {
      color: #F3C649
    }

    .rowad-ceremony-banner p {
      font-size: 0.84rem;
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.65;
      margin: 0 auto;
      max-width: 700px
    }

    /* ═══ DETAIL CARDS (TABS 2 & 3) ═══ */
    .award-detail-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 18px
    }

    .ad-card {
      background: #FFFFFF;
      border: 1.5px solid #E8DDD2;
      border-radius: 18px;
      padding: 20px;
      transition: all .3s cubic-bezier(.34, 1.56, .64, 1)
    }

    .ad-card:hover {
      border-color: #BC8859;
      box-shadow: 0 8px 30px rgba(122, 36, 22, 0.08);
      transform: translateY(-3px)
    }

    .ad-card-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
      padding-bottom: 12px;
      border-bottom: 1.5px solid #F0E7DD
    }

    .ad-card-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: linear-gradient(135deg, #FEF3E2, #FAE9D5);
      border: 1px solid #E8DDD2;
      color: #7A2416;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem
    }

    .ad-card-title h4 {
      margin: 0 0 4px 0;
      font-size: 1.02rem;
      font-weight: 900;
      color: #1E1108
    }

    .ad-card-title h4 i {
      color: #7A2416;
      margin-left: 3px
    }

    .ad-card-title span {
      font-size: 0.76rem;
      font-weight: 800;
      color: #FFF;
      background: #7A2416;
      padding: 3px 9px;
      border-radius: 8px
    }

    .ad-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 7px
    }

    .ad-list li {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.86rem;
      color: #3D2E22;
      font-weight: 700;
      padding: 9px 13px;
      background: #FAF6F1;
      border: 1px solid #EDE4D9;
      border-radius: 11px;
      transition: all .25s cubic-bezier(.34, 1.56, .64, 1)
    }

    .ad-list li:hover {
      background: #FFF;
      border-color: #BC8859;
      transform: translateX(-4px);
      box-shadow: 0 3px 12px rgba(122, 36, 22, 0.06)
    }

    .ad-list li i {
      color: #7A2416;
      font-size: 0.82rem;
      flex-shrink: 0
    }

    /* ═══ RESPONSIVE ═══ */
    @media(max-width:820px) {
      .tree-branches-grid {
        grid-template-columns: 1fr
      }

      .tree-connector-lines {
        display: none
      }

      .rm-steps-row {
        flex-direction: column
      }

      .rm-arrow {
        transform: rotate(90deg)
      }

      .rm-step-pill {
        width: 100%
      }

      .award-tabs-header {
        flex-direction: column;
        gap: 6px
      }

      .award-detail-grid {
        grid-template-columns: 1fr
      }

      .content-overlay.award-overlay .award-panel {
        padding: 24px 16px !important
      }
    }

    /* ═══ EXTRA ANIMATIONS FOR AWARD OVERLAY ═══ */
    @keyframes shimmerLine {
      0% {
        background-position: -200% 0
      }

      100% {
        background-position: 200% 0
      }
    }

    @keyframes pulseIcon {

      0%,
      100% {
        transform: scale(1)
      }

      50% {
        transform: scale(1.15)
      }
    }

    @keyframes fadeInStagger {
      from {
        opacity: 0;
        transform: translateY(16px)
      }

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

    .tree-branch-card.campus-branch {
      animation: fadeInStagger .5s cubic-bezier(.16, 1, .3, 1) .1s both
    }

    .tree-branch-card.virtual-branch {
      animation: fadeInStagger .5s cubic-bezier(.16, 1, .3, 1) .2s both
    }

    .tb-sub-item:nth-child(1) {
      animation: fadeInStagger .4s ease .15s both
    }

    .tb-sub-item:nth-child(2) {
      animation: fadeInStagger .4s ease .25s both
    }

    .tbs-icon:hover {
      animation: pulseIcon .4s ease
    }

    .tb-icon:hover {
      animation: pulseIcon .5s ease;
      color: #F3C649
    }

    .tree-root-badge {
      background: linear-gradient(90deg, #F3C649 0%, #E0A82E 50%, #F3C649 100%);
      background-size: 200% 100%;
      animation: shimmerLine 3s linear infinite
    }

    .rc-badge-ribbon {
      background: linear-gradient(90deg, #F3C649 0%, #FFE085 50%, #F3C649 100%);
      background-size: 200% 100%;
      animation: shimmerLine 3s linear infinite
    }

    .rm-step-pill {
      animation: fadeInStagger .4s ease calc(var(--i, 0) * .1s) both
    }

    .rm-step-pill:nth-child(1) {
      --i: 1
    }

    .rm-step-pill:nth-child(3) {
      --i: 2
    }

    .rm-step-pill:nth-child(5) {
      --i: 3
    }

    .rm-step-pill:nth-child(7) {
      --i: 4
    }

    .tbs-pts-badge {
      transition: all .3s ease
    }

    .tb-sub-item:hover .tbs-pts-badge {
      transform: scale(1.08);
      box-shadow: 0 2px 8px rgba(122, 36, 22, 0.15)
    }