.about-page-ui {
        position: relative;
    }

    .about-page-ui .about-showcase {
        border: 0;
        background: #ffffff;
    }

    .about-page-ui .about-showcase > .card-body {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .about-page-ui .section-title-ui {
        width: 100%;
        max-width: 760px;
        margin: 0 auto 42px;
        padding: 8px 16px 0;
        text-align: center;
    }

    .about-page-ui .section-title-ui__title {
        margin: 0;
        color: #07143c;
        font-size: 36px;
        line-height: 1.12;
        font-weight: 800;
    }

    .about-page-ui .section-title-ui__accent {
        color: #245bff;
    }

    .about-page-ui .section-title-ui__subtitle {
        margin: 8px auto 0;
        max-width: 600px;
        color: #6d7791;
        font-size: 14px;
        line-height: 1.55;
        font-weight: 500;
    }

    .about-page-ui .section-title-ui__bar {
        width: 170px;
        height: 2px;
        margin: 12px auto 0;
        border-radius: 999px;
        background: linear-gradient(to right, transparent, #245bff, transparent);
    }

    .about-page-ui .about-content-card {
        position: relative;
        isolation: isolate;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }


    .about-page-ui .about-content-card > .card-body {
        position: relative;
        z-index: 2;
        padding: 0px;
    }

    .about-page-ui .about-card-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 26px;
        padding-bottom: 22px;
        border-bottom: 1px solid #edf2fa;
    }

    .about-page-ui .about-card-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: #ffffff;
        background: linear-gradient(135deg, #0679ff 0%, #3454ff 54%, #6700ff 100%);
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
        font-size: 22px;
    }

    .about-page-ui .about-card-title {
        margin: 0;
        color: #07143c;
        font-size: 24px;
        line-height: 1.2;
        font-weight: 800;
    }

    .about-page-ui .about-card-subtitle {
        margin: 5px 0 0;
        color: #6d7791;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 600;
    }

    .about-page-ui .about-content-box {
        position: relative;
        padding: 24px;
        border-radius: 8px;
        border: 1px solid #edf2fa;
        background: #ffffff;
        box-shadow: 0 12px 24px rgba(18, 44, 96, 0.04);
        color: #52617a;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 500;
    }

    .about-page-ui .about-content-box p {
        margin-bottom: 14px;
        color: #52617a;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 500;
    }

    .about-page-ui .about-content-box h1,
    .about-page-ui .about-content-box h2,
    .about-page-ui .about-content-box h3,
    .about-page-ui .about-content-box h4,
    .about-page-ui .about-content-box h5,
    .about-page-ui .about-content-box h6 {
        margin-top: 18px;
        margin-bottom: 12px;
        color: #07143c;
        line-height: 1.25;
        font-weight: 800;
    }

    .about-page-ui .about-content-box ul,
    .about-page-ui .about-content-box ol {
        margin: 14px 0;
        padding-left: 22px;
        color: #52617a;
    }

    .about-page-ui .about-content-box li {
        margin-bottom: 8px;
        color: #52617a;
        line-height: 1.65;
    }

    .about-page-ui .about-content-box img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 14px 0;
        box-shadow: 0 12px 24px rgba(18, 44, 96, 0.08);
    }

    @media (max-width: 767.98px) {
        .about-page-ui .about-showcase > .card-body {
            padding-top: 34px;
            padding-bottom: 34px;
        }

        .about-page-ui .section-title-ui {
            margin-bottom: 24px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .about-page-ui .section-title-ui__title {
            font-size: 28px;
        }

        .about-page-ui .section-title-ui__subtitle {
            font-size: 13px;
        }

        .about-page-ui .about-content-card > .card-body {
            padding: 28px 18px 22px;
        }

        .about-page-ui .about-card-header {
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 22px;
            padding-bottom: 18px;
        }

        .about-page-ui .about-card-icon {
            width: 48px;
            height: 48px;
            min-width: 48px;
            border-radius: 12px;
            font-size: 18px;
        }

        .about-page-ui .about-card-title {
            font-size: 20px;
        }

        .about-page-ui .about-card-subtitle {
            font-size: 12px;
        }

        .about-page-ui .about-content-box {
            padding: 18px;
            font-size: 14px;
        }

        .about-page-ui .about-content-box p {
            font-size: 14px;
        }
    }

 /* =============================================
     Category Index Same Card UI Start
  ============================================= */

  .category-index-card-ui .practice-category-card {
    --practice-color: #ef315d;
    --practice-bg: #fff7fa;
    --practice-orb-core: rgba(239, 49, 93, 0.14);
    --practice-orb: rgba(239, 49, 93, 0.06);
    --practice-border-hover: rgba(239, 49, 93, 0.22);
    position: relative;
    display: flex;
    min-height: 210px;
    width: 100%;
    padding: 14px 13px;
    color: #111b3f;
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid rgba(207, 216, 232, 0.78);
    background:
      radial-gradient(circle at calc(100% - 42px) 0, var(--practice-orb-core) 0%, var(--practice-orb) 30%, rgba(255, 255, 255, 0) 66%),
      linear-gradient(145deg, #ffffff 0%, var(--practice-bg) 100%);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .category-index-card-ui .practice-category-card:hover {
    color: #111b3f;
    text-decoration: none;
    transform: translateY(-1px);
    border-color: var(--practice-border-hover);
    box-shadow: 0 8px 18px rgba(44, 58, 94, 0.08);
  }

  .category-index-card-ui .practice-category-card__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .category-index-card-ui .practice-category-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
  }

  .category-index-card-ui .practice-category-card__icon,
  .category-index-card-ui .practice-category-card__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }

  .category-index-card-ui .practice-category-card__icon {
    width: 48px;
    height: 48px;
    color: #ffffff;
    background: var(--practice-color);
    box-shadow: 0 6px 12px rgba(33, 48, 86, 0.08);
  }

  .category-index-card-ui .practice-category-card__icon i {
    font-size: 20px;
  }

  .category-index-card-ui .practice-category-card__arrow {
    width: 32px;
    height: 32px;
    color: #6b7893;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 4px 10px rgba(63, 77, 112, 0.07);
  }

  .category-index-card-ui .practice-category-card__title {
    min-height: 42px;
    margin: 0 0 8px;
    color: #111b3f;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 700;

  }

  .category-index-card-ui .practice-category-card__meta {
    margin: 0 0 14px;
    color: #6f7d97;
    font-size: 15px;
    line-height: 1.45;
 
  }

  .category-index-card-ui .practice-category-card__chips {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    min-height: 96px;
    margin-bottom: 10px;
  }

  .category-index-card-ui .practice-category-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 20px;
    max-width: 100%;
    padding: 3px 8px;
    border-radius: 999px;
    color: #59677f;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(196, 207, 225, 0.9);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 500;
  }

  .category-index-card-ui .practice-category-card__chip i {
    color: var(--practice-color);
    font-size: 10px;
  }

  .category-index-card-ui .practice-category-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin-top: auto;
    padding: 8px 14px;
    border-radius: 8px;
    color: var(--practice-color);
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(203, 213, 230, 0.9);
    box-shadow: 0 4px 10px rgba(45, 56, 86, 0.05);
    font-size: 13px;
    font-weight: 600;
  }

  .category-index-card-ui .practice-category-card--blue {
    --practice-color: #2f75f6;
    --practice-bg: #f4f8ff;
    --practice-orb-core: rgba(47, 117, 246, 0.14);
    --practice-orb: rgba(47, 117, 246, 0.07);
    --practice-border-hover: rgba(47, 117, 246, 0.22);
  }

  .category-index-card-ui .practice-category-card--green {
    --practice-color: #1fb45b;
    --practice-bg: #f1fff7;
    --practice-orb-core: rgba(31, 180, 91, 0.14);
    --practice-orb: rgba(31, 180, 91, 0.07);
    --practice-border-hover: rgba(31, 180, 91, 0.22);
  }

  .category-index-card-ui .practice-category-card--yellow {
    --practice-color: #f6a500;
    --practice-bg: #fff9ed;
    --practice-orb-core: rgba(246, 165, 0, 0.14);
    --practice-orb: rgba(246, 165, 0, 0.08);
    --practice-border-hover: rgba(246, 165, 0, 0.24);
  }

  .category-index-card-ui .practice-category-card--purple {
    --practice-color: #8057ed;
    --practice-bg: #fbf7ff;
    --practice-orb-core: rgba(128, 87, 237, 0.14);
    --practice-orb: rgba(128, 87, 237, 0.08);
    --practice-border-hover: rgba(128, 87, 237, 0.22);
  }
  .category-index-card-ui .section-title-ui {
        width: 100%;
        max-width: 760px;
        margin: 0 auto 50px;
        padding: 8px 16px 0;
        text-align: center;
    }

    .category-index-card-ui .section-title-ui__title {
        margin: 0;
        color: #07143c;
        font-size: 36px;
        line-height: 1.12;
        font-weight: 800;
    }

    .category-index-card-ui .section-title-ui__accent {
        color: #245bff;
    }

    .category-index-card-ui .section-title-ui__subtitle {
        margin: 8px auto 0;
        max-width: 560px;
        color: #6d7791;
        font-size: 14px;
        line-height: 1.55;
    }

    .category-index-card-ui .section-title-ui__bar {
        width: 170px;
        height: 2px;
        margin: 12px auto 0;
        border-radius: 999px;
        background: linear-gradient(to right, transparent, #245bff, transparent);
    }


  @media (max-width: 1199.98px) {
    .category-index-card-ui .practice-category-card {
      min-height: 210px;
    }
  }

  @media (max-width: 767.98px) {

    .category-index-card-ui .practice-category-card {
      min-height: 210px;
    }
  }

  @media (max-width: 575.98px) {
    .category-index-card-ui .practice-category-card {
      max-width: 360px;
      min-height: 210px;
      margin: 0 auto;
    }

    .category-index-card-ui .practice-category-card__chips {
      min-height: 0;
    }
 
       .category-index-card-ui .section-title-ui {
            margin-bottom: 24px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .category-index-card-ui .section-title-ui__title {
            font-size: 28px;
        }

        .category-index-card-ui .section-title-ui__subtitle {
            font-size: 13px;
        }
}

  /* =============================================
     Category Index Same Card UI End
  ============================================= */


/* =============================================
       Change Password Page UI Start
    ============================================= */

    .change-password-page-ui {
        position: relative;
    }

    .change-password-page-ui .change-password-breadcrumb {
        margin-top: 24px;
    }

    .change-password-page-ui .breadcrumb {
        margin-bottom: 0;
        background: transparent;
        padding-left: 0;
    }

    .change-password-page-ui .change-password-showcase {
        border: 0;
        background: #ffffff;
    }

    .change-password-page-ui .change-password-showcase > .card-body {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .change-password-page-ui .section-title-ui {
        width: 100%;
        max-width: 760px;
        margin: 0 auto 42px;
        padding: 8px 16px 0;
        text-align: center;
    }

    .change-password-page-ui .section-title-ui__title {
        margin: 0;
        color: #07143c;
        font-size: 36px;
        line-height: 1.12;
        font-weight: 800;
    }

    .change-password-page-ui .section-title-ui__accent {
        color: #245bff;
    }

    .change-password-page-ui .section-title-ui__subtitle {
        margin: 8px auto 0;
        max-width: 560px;
        color: #6d7791;
        font-size: 14px;
        line-height: 1.55;
        font-weight: 500;
    }

    .change-password-page-ui .section-title-ui__bar {
        width: 170px;
        height: 2px;
        margin: 12px auto 0;
        border-radius: 999px;
        background: linear-gradient(to right, transparent, #245bff, transparent);
    }

    .change-password-page-ui .password-form-card {
        position: relative;
        isolation: isolate;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }

   
    .change-password-page-ui .password-form-card > .card-body {
        position: relative;
        z-index: 2;
    }

    .change-password-page-ui .password-form-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 28px;
        padding-bottom: 22px;
        border-bottom: 1px solid #edf2fa;
    }

    .change-password-page-ui .password-form-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: #ffffff;
        background: linear-gradient(135deg, #0679ff 0%, #3454ff 54%, #6700ff 100%);
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
        font-size: 22px;
        font-weight: 800;
    }

    .change-password-page-ui .password-form-title-wrap {
        min-width: 0;
    }

    .change-password-page-ui .password-form-title {
        margin: 0;
        color: #07143c;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 800;
    }

    .change-password-page-ui .password-form-text {
        margin: 5px 0 0;
        color: #6d7791;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 600;
    }

    .change-password-page-ui #reset_password_admin {
        margin: 0;
    }

    .change-password-page-ui .password-field-group {
        margin-bottom: 20px;
    }

    .change-password-page-ui .password-field-group label {
        display: block;
        margin-bottom: 8px;
        color: #173562;
        font-size: 13px;
        line-height: 1.2;
        font-weight: 700;
    }

    .change-password-page-ui .password-input-wrap {
        position: relative;
    }

    .change-password-page-ui .password-input-wrap i {
        position: absolute;
        top: 50%;
        left: 15px;
        transform: translateY(-50%);
        color: #245bff;
        font-size: 14px;
        z-index: 2;
        pointer-events: none;
    }

    .change-password-page-ui .form-control {
        width: 100%;
        min-height: 48px;
        border: 1px solid #dbe7fb;
        border-radius: 10px;
        color: #17233f;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 8px 20px rgba(34, 59, 102, 0.05);
        font-size: 14px;
        font-weight: 600;
        padding: 12px 14px 12px 42px;
        transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    }

    .change-password-page-ui .form-control::placeholder {
        color: #91a0b8;
        font-weight: 500;
    }

    .change-password-page-ui .form-control:focus {
        border-color: rgba(36, 91, 255, 0.62);
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(36, 91, 255, 0.10);
    }

    .change-password-page-ui .text-danger {
        display: block;
        margin-top: 6px;
        font-size: 12px;
        line-height: 1.35;
        font-weight: 600;
    }

    .change-password-page-ui .password-submit-row {
        margin-top: 6px;
    }

    .change-password-page-ui .password-submit-btn {
        min-width: 150px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 0 22px;
        border: 0;
        border-radius: 8px;
        color: #ffffff !important;
        background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%) !important;
        box-shadow: 0 14px 28px rgba(36, 91, 255, 0.24);
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
        text-decoration: none !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .change-password-page-ui .password-submit-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 16px 30px rgba(36, 91, 255, 0.30);
    }

    @media (max-width: 767.98px) {
        .change-password-page-ui .change-password-showcase > .card-body {
            padding-top: 34px;
            padding-bottom: 34px;
        }

        .change-password-page-ui .section-title-ui {
            margin-bottom: 24px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .change-password-page-ui .section-title-ui__title {
            font-size: 28px;
        }

        .change-password-page-ui .section-title-ui__subtitle {
            font-size: 13px;
        }

        .change-password-page-ui .password-form-card > .card-body {
            padding: 28px 18px 22px;
        }

        .change-password-page-ui .password-form-header {
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 22px;
            padding-bottom: 18px;
        }

        .change-password-page-ui .password-form-icon {
            width: 48px;
            height: 48px;
            min-width: 48px;
            border-radius: 12px;
            font-size: 18px;
        }

        .change-password-page-ui .password-form-title {
            font-size: 19px;
        }

        .change-password-page-ui .password-form-text {
            font-size: 12px;
        }

        .change-password-page-ui .form-control {
            min-height: 46px;
            font-size: 13px;
        }

        .change-password-page-ui .password-submit-btn {
            width: 100%;
            min-height: 46px;
        }
    }
 /* =============================================
       Buy Now Page UI Start
    ============================================= */

    .buy-now-page-ui {
        position: relative;
    }

    .buy-now-page-ui .breadcrumb {
        margin-bottom: 0;
        background: transparent;
        padding-left: 0;
    }

    .buy-now-page-ui .breadcrumb li {
        display: inline;
        font-size: 14px;
    }

    .buy-now-page-ui .breadcrumb li + li::before {
        padding: 8px;
        color: #9aa7bd;
        content: "/\00a0";
    }

    .buy-now-page-ui .breadcrumb li a {
        color: #53535f;
        text-decoration: none;
    }

    .buy-now-page-ui .buy-now-showcase {
        border: 0;
        background: #ffffff;
    }

    .buy-now-page-ui .buy-now-showcase > .card-body {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .buy-now-page-ui .section-title-ui {
        width: 100%;
        max-width: 760px;
        margin: 0 auto 42px;
        padding: 8px 16px 0;
        text-align: center;
    }

    .buy-now-page-ui .section-title-ui__title {
        margin: 0;
        color: #07143c;
        font-size: 36px;
        line-height: 1.12;
        font-weight: 800;
    }

    .buy-now-page-ui .section-title-ui__accent {
        color: #245bff;
    }

    .buy-now-page-ui .section-title-ui__subtitle {
        margin: 8px auto 0;
        max-width: 620px;
        color: #6d7791;
        font-size: 14px;
        line-height: 1.55;
        font-weight: 500;
    }

    .buy-now-page-ui .section-title-ui__bar {
        width: 170px;
        height: 2px;
        margin: 12px auto 0;
        border-radius: 999px;
        background: linear-gradient(to right, transparent, #245bff, transparent);
    }

    .buy-now-page-ui .plans {
        width: 100%;
        margin: 0 auto;
    }

    .buy-now-page-ui .plans__container {
        padding: 0;
    }

    .buy-now-page-ui .planItem__container {
        display: grid;
        gap: 24px;
    }

    .buy-now-page-ui .planItem {
        position: relative;
        isolation: isolate;
        width: 100%;
        padding: 0;
        overflow: hidden;
    }

    .buy-now-page-ui .buy-now-inner-row {
        position: relative;
        z-index: 2;
        margin: 0;
    }

    .buy-now-page-ui .plan-detail-panel,
    .buy-now-page-ui .payment-panel {
        padding: 20px;
    }

    .buy-now-page-ui .plan-detail-panel {
        border-right: 1px solid #edf2fa;
    }

    .buy-now-page-ui .buy-card-head {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 24px;
        padding-bottom: 20px;
        border-bottom: 1px solid #edf2fa;
    }

  
    .buy-now-page-ui .buy-card-title {
        margin: 0;
        color: #07143c;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 800;
    }

    .buy-now-page-ui .buy-card-subtitle {
        margin: 5px 0 0;
        color: #6d7791;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 600;
    }

    .buy-now-page-ui .plan-desc-box {
        margin-bottom: 22px;
        padding: 20px;
        border-radius: 8px;
        border: 1px solid #edf2fa;
        background: #ffffff;
        box-shadow: 0 12px 24px rgba(18, 44, 96, 0.04);
    }

    .buy-now-page-ui .plan-desc-box p,
    .buy-now-page-ui .card__desc {
        margin: 0;
        color: #52617a;
        font-size: 14px;
        line-height: 1.65;
        font-weight: 500;
    }

    .buy-now-page-ui .featureList {
        display: grid;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .buy-now-page-ui .featureList li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin: 0;
        padding: 12px 14px;
        border-radius: 8px;
        color: #40506a;
        background: #f8fbff;
        border: 1px solid #edf2fa;
        font-size: 14px;
        line-height: 1.45;
        font-weight: 700;
    }

    .buy-now-page-ui .featureList li::before {
        content: "\2713";
        width: 22px;
        height: 22px;
        min-width: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        color: #245bff;
        background: #eef4ff;
        font-size: 12px;
        font-weight: 800;
    }

    .buy-now-page-ui .wallet-card {
        margin-bottom: 20px;
        padding: 18px;
        border-radius: 8px;
        border: 1px solid #dbe7fb;
        background:
            radial-gradient(circle at 0 0, rgba(36, 91, 255, 0.10) 0%, rgba(36, 91, 255, 0) 36%),
            #f8fbff;
    }

    .buy-now-page-ui .wallet-label {
        display: block;
        margin-bottom: 8px;
        color: #6d7791;
        font-size: 12px;
        line-height: 1.2;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .buy-now-page-ui .wallet-amount {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin: 0;
        color: #07143c;
        font-size: 24px;
        line-height: 1.2;
        font-weight: 800;
    }

    .buy-now-page-ui .wallet-amount i {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        color: #245bff;
        background: #eff3ff;
        border: 1px solid #a3c3ff;
        font-size: 14px;
    }

    .buy-now-page-ui #coupon_section {
        margin-top: 18px !important;
        margin-bottom: 18px;
        padding: 18px;
        border-radius: 8px;
        border: 1px solid #edf2fa;
        background: #ffffff;
        box-shadow: 0 12px 24px rgba(18, 44, 96, 0.04);
    }

    .buy-now-page-ui .coupon-row {
        display: flex;
        gap: 12px;
        align-items: stretch;
    }

    .buy-now-page-ui .coupon-input-wrap {
        position: relative;
        flex: 1;
    }

    .buy-now-page-ui .coupon-input-wrap i,
    .buy-now-page-ui .select-wrap i {
        position: absolute;
        top: 50%;
        left: 15px;
        transform: translateY(-50%);
        color: #245bff;
        font-size: 14px;
        z-index: 2;
        pointer-events: none;
    }

    .buy-now-page-ui .form-control {
        width: 100%;
        min-height: 48px;
        border: 1px solid #dbe7fb !important;
        border-radius: 10px;
        color: #17233f;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 8px 20px rgba(34, 59, 102, 0.05);
        font-size: 14px;
        font-weight: 600;
        padding: 12px 14px 12px 42px;
        transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    }

    .buy-now-page-ui .form-control::placeholder {
        color: #91a0b8;
        font-weight: 500;
    }

    .buy-now-page-ui .form-control:focus {
        border-color: rgba(36, 91, 255, 0.62) !important;
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(36, 91, 255, 0.10);
    }

    .buy-now-page-ui #apply_coupon {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 18px;
        border: 0;
        border-radius: 8px;
        color: #ffffff !important;
        background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%) !important;
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.20);
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
        white-space: nowrap;
    }

    .buy-now-page-ui #discount_details {
        margin-top: 18px !important;
        padding: 18px;
        border-radius: 8px;
        border: 1px solid #dbe7fb;
        background: #f8fbff;
    }

    .buy-now-page-ui #discount_details h5,
    .buy-now-page-ui #discount_details h4 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 0 10px;
        color: #40506a;
        font-size: 14px;
        line-height: 1.35;
        font-weight: 700;
    }

    .buy-now-page-ui #discount_details h4 {
        margin-bottom: 0;
        color: #07143c;
        font-size: 18px;
        font-weight: 800;
    }

    .buy-now-page-ui .price {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        margin: 24px 0;
        color: #07143c;
        font-size: 18px;
        line-height: 1.2;
        font-weight: 800;
    }

    .buy-now-page-ui #payableAmount {
        color: #07143c !important;
        font-size: 36px !important;
        line-height: 1;
        font-weight: 800 !important;
    }

    .buy-now-page-ui .payment-select-area {
        display: grid;
        gap: 14px;
        margin-bottom: 20px;
    }

    .buy-now-page-ui .select-wrap {
        position: relative;
    }

    .buy-now-page-ui .button,
    .buy-now-page-ui .buy-button {
        width: 100%;
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 0 22px;
        border: 0 !important;
        border-radius: 8px;
        color: #ffffff !important;
        background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%) !important;
        box-shadow: 0 14px 28px rgba(36, 91, 255, 0.24);
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
        text-decoration: none !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
        cursor: pointer;
    }

    .buy-now-page-ui .button:hover,
    .buy-now-page-ui .buy-button:hover {
        color: #ffffff !important;
        transform: translateY(-1px);
        box-shadow: 0 16px 30px rgba(36, 91, 255, 0.30);
    }

    .buy-now-page-ui #message {
        margin-top: 12px !important;
    }

    @media (max-width: 991.98px) {
        .buy-now-page-ui .plan-detail-panel {
            border-right: 0;
            border-bottom: 1px solid #edf2fa;
        }
    }

    @media (max-width: 767.98px) {
        .buy-now-page-ui .buy-now-showcase > .card-body {
            padding-top: 34px;
            padding-bottom: 34px;
        }

        .buy-now-page-ui .section-title-ui {
            margin-bottom: 24px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .buy-now-page-ui .section-title-ui__title {
            font-size: 28px;
        }

        .buy-now-page-ui .section-title-ui__subtitle {
            font-size: 13px;
        }

        .buy-now-page-ui .plan-detail-panel,
        .buy-now-page-ui .payment-panel {
            padding: 12px;
        }

        .buy-now-page-ui .buy-card-head {
            align-items: flex-start;
            gap: 12px;
        }

        .buy-now-page-ui .buy-card-title {
            font-size: 19px;
        }

        .buy-now-page-ui .buy-card-subtitle {
            font-size: 12px;
        }

        .buy-now-page-ui .coupon-row {
            flex-direction: column;
        }

        .buy-now-page-ui #apply_coupon {
            width: 100%;
        }

        .buy-now-page-ui .price {
            justify-content: flex-start;
        }

        .buy-now-page-ui #payableAmount {
            font-size: 30px !important;
        }
    }



   /* =============================================
       Classroom Category Page UI Start
    ============================================= */

    .classroom-index-page-ui .section-title-ui {
        width: 100%;
        max-width: 760px;
        margin: 0 auto 65px;
        padding: 8px 16px 0;
        text-align: center;
    }

    .classroom-index-page-ui .section-title-ui__title {
        margin: 0;
        color: #07143c;
        font-size: 36px;
        line-height: 1.12;
        font-weight: 800;
    }

    .classroom-index-page-ui .section-title-ui__accent {
        color: #245bff;
    }

    .classroom-index-page-ui .section-title-ui__subtitle {
        margin: 8px auto 0;
        max-width: 560px;
        color: #6d7791;
        font-size: 14px;
        line-height: 1.55;
    }

    .classroom-index-page-ui .section-title-ui__bar {
        width: 170px;
        height: 2px;
        margin: 12px auto 0;
        border-radius: 999px;
        background: linear-gradient(to right, transparent, #245bff, transparent);
    }

    .classroom-index-page-ui .classroom-category-grid {
        row-gap: 28px;
    }

    .classroom-index-page-ui .classroom-card {
        --classroom-card-color: #2d7eff;
        --classroom-card-soft: rgba(45, 126, 255, 0.13);
        --classroom-card-glow: rgba(45, 126, 255, 0.34);
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 260px;
        padding: 42px 22px 20px;
        color: #10205c;
        text-align: center;
        text-decoration: none !important;
        border-radius: 8px;
        border: 1px solid #dedede2e;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgb(244 249 255 / 84%)) padding-box,
            linear-gradient(135deg, rgba(255, 255, 255, 0.85), var(--classroom-card-color)) border-box;
        overflow: visible;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .classroom-index-page-ui .classroom-card:hover {
        color: #10205c;
        text-decoration: none !important;
        transform: translateY(-2px);
        box-shadow: 0 12px 28px var(--classroom-card-soft);
    }

    .classroom-index-page-ui .classroom-card::before {
        content: attr(data-card-number);
        position: absolute;
        top: 13px;
        right: 18px;
        color: var(--classroom-card-color);
        opacity: 0.13;
        font-size: 36px;
        line-height: 1;
        font-weight: 800;
    }

    .classroom-index-page-ui .classroom-card--green {
        --classroom-card-color: #17c7a3;
        --classroom-card-soft: rgba(23, 199, 163, 0.13);
        --classroom-card-glow: rgba(23, 199, 163, 0.34);
    }

    .classroom-index-page-ui .classroom-card--purple {
        --classroom-card-color: #7b4dff;
        --classroom-card-soft: rgba(123, 77, 255, 0.13);
        --classroom-card-glow: rgba(123, 77, 255, 0.34);
    }

    .classroom-index-page-ui .classroom-card__icon {
        position: absolute;
        top: -26px;
        left: 18px;
        width: 58px;
        height: 58px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid #cec7c73d;
        box-shadow:
            0 12px 24px var(--classroom-card-soft),
            inset 0 0 0 7px rgba(255, 255, 255, 0.62);
    }

    .classroom-index-page-ui .classroom-card__icon i {
        position: relative;
        z-index: 1;
        color: var(--classroom-card-color);
        font-size: 28px;
    }

    .classroom-index-page-ui .classroom-card__title {
        margin: 0;
        color: var(--classroom-card-color);
        font-size: 18px;
        line-height: 1.25;
        font-weight: 800;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top:8px;
    }

    .classroom-index-page-ui .classroom-card__poster {
        max-height:170px;
        flex: 1 1 auto;
        margin-top: 6px;
        padding: 12px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.86);
        border: 1px solid rgba(157, 176, 220, 0.35);
        box-shadow: 0 8px 18px rgba(77, 96, 143, 0.12);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .classroom-index-page-ui .classroom-card__poster img {
        width: 100%;
        height: 100%;
        max-height: 140px;
        object-fit: contain;
        display: block;
    }

    .classroom-index-page-ui .classroom-card__details {
        display: grid;
        gap: 12px;
        margin-top: 16px;
    }

    .classroom-index-page-ui .classroom-card__detail {
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 8px 12px;
        border-radius: 6px;
        color: #18265f;
        background: rgba(255, 255, 255, 0.78);
        border: 1px solid rgba(157, 176, 220, 0.42);
        box-shadow: 0 8px 18px rgba(77, 96, 143, 0.12);
        font-size: 13px;
        line-height: 1.2;
        font-weight: 800;
    }

    .classroom-index-page-ui .classroom-card__detail i {
        color: var(--classroom-card-color);
        font-size: 18px;
    }

    .classroom-index-page-ui .classroom-card__status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-top: 14px;
        padding: 6px 12px;
        border-radius: 999px;
        color: #ffffff;
        background: #1fb45b;
        font-size: 11px;
        line-height: 1;
        font-weight: 700;
    }

    .classroom-index-page-ui .classroom-card__locked {
        background: #f6a500;
    }

    @media (max-width: 991.98px) {
        .classroom-index-page-ui .classroom-card {
            min-height: 300px;
        }
    }

    @media (max-width: 575.98px) {
        .classroom-index-page-ui .section-title-ui {
            margin-bottom: 40px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .classroom-index-page-ui .section-title-ui__title {
            font-size: 28px;
        }

        .classroom-index-page-ui .section-title-ui__subtitle {
            font-size: 13px;
        }

        .classroom-index-page-ui .classroom-category-grid {
            row-gap: 24px;
        }

        .classroom-index-page-ui .classroom-card {
            max-width: 360px;
            min-height: 290px;
            margin: 0 auto;
            padding: 40px 18px 18px;
        }

        .classroom-index-page-ui .classroom-card__title {
            font-size: 17px;
        }

        .classroom-index-page-ui .classroom-card__poster {
            min-height: 150px;
        }

        .classroom-index-page-ui .classroom-card__poster img {
            max-height: 120px;
        }
    }

    /* =============================================
       Classroom Category Page UI End
    ============================================= */


 /* =============================================
       Class Room List Page UI Start
    ============================================= */

    .classroom-list-page-ui {
        position: relative;
    }

    .classroom-list-page-ui .classroom-showcase {
        position: relative;
        isolation: isolate;
        border: 1px solid rgba(214, 226, 244, 0.95);
        border-radius: 8px;
        background:
            radial-gradient(circle at 100% 0, rgba(36, 91, 255, 0.10) 0%, rgba(36, 91, 255, 0) 32%),
            linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        box-shadow: 0 20px 44px rgba(18, 44, 96, 0.08);
        overflow: hidden;
    }

  
    .classroom-list-page-ui .classroom-showcase > .card-header,
    .classroom-list-page-ui .classroom-showcase > .card-body {
        position: relative;
        z-index: 2;
    }

    .classroom-list-page-ui .classroom-showcase > .card-header {
        padding: 30px 30px 22px;
        margin-bottom: 0 !important;
        border-bottom: 1px solid #edf2fa;
        background: transparent;
    }

    .classroom-list-page-ui .section-title-ui {
        width: 100%;
        max-width: 760px;
        margin: 0 auto 40px;
        padding: 8px 16px 0;
        text-align: center;
    }

    .classroom-list-page-ui .section-title-ui__title {
        margin: 0;
        color: #07143c;
        font-size: 36px;
        line-height: 1.12;
        font-weight: 800;
    }

    .classroom-list-page-ui .section-title-ui__accent {
        color: #245bff;
    }

    .classroom-list-page-ui .section-title-ui__subtitle {
        margin: 8px auto 0;
        max-width: 560px;
        color: #6d7791;
        font-size: 14px;
        line-height: 1.55;
    }

    .classroom-list-page-ui .section-title-ui__bar {
        width: 170px;
        height: 2px;
        margin: 12px auto 0;
        border-radius: 999px;
        background: linear-gradient(to right, transparent, #245bff, transparent);
    }

    .classroom-list-page-ui .section-title-ui--row {
        max-width: 100%;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        text-align: left;
    }

    .classroom-list-page-ui .section-title-ui--row .section-title-ui__subtitle {
        margin-left: 0;
        margin-right: 0;
    }

    .classroom-list-page-ui .section-title-ui--row .section-title-ui__bar {
        margin-left: 0;
        background: linear-gradient(to right, #245bff, rgba(36, 91, 255, 0.08));
    }

    .classroom-list-page-ui .add-classroom-btn {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 16px;
        border: 0 !important;
        border-radius: 8px;
        color: #ffffff !important;
        background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%) !important;
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.20);
        font-size: 13px;
        line-height: 1;
        font-weight: 700;
        text-decoration: none !important;
        white-space: nowrap;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .classroom-list-page-ui .add-classroom-btn:hover {
        color: #ffffff !important;
        transform: translateY(-1px);
        box-shadow: 0 16px 30px rgba(36, 91, 255, 0.28);
    }

    .classroom-list-page-ui .classroom-showcase > .card-body {
        padding: 30px;
    }

    .classroom-list-page-ui .classroom-table-wrap {
        width: 100%;
        max-height: 620px;
        overflow: auto;
        border: 1px solid #edf2fa;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 10px 24px rgba(18, 44, 96, 0.04);
        -webkit-overflow-scrolling: touch;
    }

    .classroom-list-page-ui .classroom-table-wrap::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .classroom-list-page-ui .classroom-table-wrap::-webkit-scrollbar-track {
        background: #f1f5ff;
        border-radius: 999px;
    }

    .classroom-list-page-ui .classroom-table-wrap::-webkit-scrollbar-thumb {
        background: #c4d3f3;
        border-radius: 999px;
    }

    .classroom-list-page-ui .classroom-table-wrap::-webkit-scrollbar-thumb:hover {
        background: #9db8ec;
    }

    .classroom-list-page-ui .table {
        min-width: 760px;
        margin-bottom: 0;
        color: #52617a;
        border-collapse: separate;
        border-spacing: 0;
    }

    .classroom-list-page-ui .table thead th {
        position: sticky;
        top: 0;
        z-index: 5;
        padding: 16px 14px;
        border: 0;
        border-bottom: 1px solid #edf2fa;
        color: #173562;
        background: #f8fbff;
        font-size: 12px;
        line-height: 1.25;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    .classroom-list-page-ui .table tbody th,
    .classroom-list-page-ui .table tbody td {
        padding: 16px 14px;
        border-top: 0;
        border-bottom: 1px solid #edf2fa;
        color: #52617a;
        font-size: 14px;
        line-height: 1.35;
        font-weight: 600;
        vertical-align: middle;
        white-space: nowrap;
    }

    .classroom-list-page-ui .table tbody tr:last-child th,
    .classroom-list-page-ui .table tbody tr:last-child td {
        border-bottom: 0;
    }

    .classroom-list-page-ui .table tbody tr {
        transition: background 0.22s ease;
    }

    .classroom-list-page-ui .table tbody tr:hover {
        background: #f8fbff;
    }

    .classroom-list-page-ui .classroom-sr {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        color: #245bff;
        background: #eff3ff;
        border: 1px solid #dbe7fb;
        font-size: 13px;
        font-weight: 800;
    }

    .classroom-list-page-ui .classroom-name {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #07143c;
        font-weight: 800;
    }

    .classroom-list-page-ui .classroom-name i {
        color: #245bff;
        font-size: 13px;
    }

    .classroom-list-page-ui .classroom-day {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 28px;
        padding: 5px 11px;
        border-radius: 999px;
        color: #243c8b;
        border: 1px solid #a3c3ff;
        background: #eff3ff;
        font-size: 12px;
        line-height: 1;
        font-weight: 800;
    }

    .classroom-list-page-ui .classroom-date {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: #40506a;
        font-size: 13px;
        font-weight: 700;
    }

    .classroom-list-page-ui .classroom-date i {
        color: #245bff;
        font-size: 13px;
    }

    .classroom-list-page-ui .classroom-action-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        color: #ffffff !important;
        background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%) !important;
        box-shadow: 0 10px 22px rgba(36, 91, 255, 0.20);
        font-size: 14px;
        text-decoration: none !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .classroom-list-page-ui .classroom-action-btn:hover {
        color: #ffffff !important;
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(36, 91, 255, 0.28);
    }

    @media (max-width: 767.98px) {
        .classroom-list-page-ui .classroom-showcase > .card-header {
            padding: 28px 18px 20px;
        }

        .classroom-list-page-ui .section-title-ui {
            margin-bottom: 0;
            padding-left: 0;
            padding-right: 0;
        }

        .classroom-list-page-ui .section-title-ui__title {
            font-size: 28px;
        }

        .classroom-list-page-ui .section-title-ui__subtitle {
            font-size: 13px;
        }

        .classroom-list-page-ui .section-title-ui--row {
            align-items: flex-start;
            flex-direction: column;
            gap: 16px;
        }

        .classroom-list-page-ui .add-classroom-btn {
            width: 100%;
            min-height: 42px;
        }

        .classroom-list-page-ui .classroom-showcase > .card-body {
            padding: 22px 18px;
        }

        .classroom-list-page-ui .classroom-table-wrap {
            max-height: 520px;
        }

        .classroom-list-page-ui .table thead th,
        .classroom-list-page-ui .table tbody th,
        .classroom-list-page-ui .table tbody td {
            padding: 14px 12px;
            font-size: 13px;
        }
    }

    /* =============================================
       Class Room List Page UI End
    ============================================= */


  /* =============================================
     Daily Classroom Page UI Start
  ============================================= */

  .daily-classroom-page-ui {
    position: relative;
  }

  .daily-classroom-page-ui .daily-classroom-breadcrumb {
    margin-top: 24px;
  }

  .daily-classroom-page-ui .breadcrumb {
    margin-bottom: 0;
    background: transparent;
  }

  .daily-classroom-page-ui .daily-classroom-showcase {
    border: 0;
    background: #ffffff;
  }

  .daily-classroom-page-ui .daily-classroom-showcase .card-body {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .daily-classroom-page-ui .section-title-ui {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 50px;
    padding: 8px 16px 0;
    text-align: center;
  }

  .daily-classroom-page-ui .section-title-ui__title {
    margin: 0;
    color: #07143c;
    font-size: 36px;
    line-height: 1.12;
    font-weight: 800;
  }

  .daily-classroom-page-ui .section-title-ui__accent {
    color: #245bff;
  }

  .daily-classroom-page-ui .section-title-ui__subtitle {
    margin: 8px auto 0;
    max-width: 560px;
    color: #6d7791;
    font-size: 14px;
    line-height: 1.55;
  }

  .daily-classroom-page-ui .section-title-ui__bar {
    width: 170px;
    height: 2px;
    margin: 12px auto 0;
    border-radius: 999px;
    background: linear-gradient(to right, transparent, #245bff, transparent);
  }

  .daily-classroom-page-ui .daily-classroom-card {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(214, 226, 244, 0.95);
    color: #52617a;
    background: #ffffff;
    overflow: hidden;
    text-decoration: none !important;
    box-shadow: 0 14px 30px rgba(18, 44, 96, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .daily-classroom-page-ui .daily-classroom-card:hover {
    transform: translateY(-2px);
    color: #52617a;
    border-color: rgba(36, 91, 255, 0.45);
    box-shadow: 0 24px 46px rgba(25, 44, 76, 0.14);
    text-decoration: none !important;
  }

  .daily-classroom-page-ui .daily-classroom-card::after {
    content: "";
    position: absolute;
    top: -58px;
    right: -54px;
    width: 150px;
    height: 150px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(36, 91, 255, 0.13) 0%, rgba(36, 91, 255, 0) 68%);
    z-index: 0;
    pointer-events: none;
  }

  .daily-classroom-page-ui .daily-classroom-card__body-wrap {
    position: relative;
    z-index: 1;
    padding: 24px 22px 0;
  }

  .daily-classroom-page-ui .daily-classroom-card__top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid #edf2fa;
  }

  .daily-classroom-page-ui .daily-classroom-card__day {
    min-width: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border-radius: 0;
    color: #07143c;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: -0.02em;
    white-space: normal;
  }

  .daily-classroom-page-ui .daily-classroom-card__day i {
    color: #245bff;
    font-size: 15px;
  }

  .daily-classroom-page-ui .daily-classroom-card__status {
    min-width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
  }

  .daily-classroom-page-ui .daily-classroom-card__status--open {
    color: #096b3b;
    border: 1px solid #68dd9a;
    background: #c9f8dc;
  }

  .daily-classroom-page-ui .daily-classroom-card__status--locked {
    color: #8a5a00;
    border: 1px solid #f2bc38;
    background: #ffe292;
  }

  .daily-classroom-page-ui .daily-classroom-card__content {
    position: relative;
    z-index: 1;
    padding-top: 18px;
  }

  .daily-classroom-page-ui .daily-classroom-card__title {
    margin: 0;
    color: #07143c;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .daily-classroom-page-ui .daily-classroom-card__stage {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    color: #245bff;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
  }

  .daily-classroom-page-ui .daily-classroom-card__stage i {
    color: #18b98f;
    font-size: 13px;
  }

  .daily-classroom-page-ui .daily-classroom-card__footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 20px;
    padding: 18px 22px 22px;
    border-top: 1px solid #edf2fa;
  }

  .daily-classroom-page-ui .daily-classroom-card__course-pill {
    min-height: 30px;
    min-width: 0;
    flex: 1 1 170px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    color: #40506a;
    background: #f8fbff;
    border: 1px solid #dbe7fb;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    white-space: normal;
  }

  .daily-classroom-page-ui .daily-classroom-card__course-pill i {
    color: #245bff;
    font-size: 13px;
  }

  .daily-classroom-page-ui .daily-classroom-btn {
    min-height: 40px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    color: #ffffff !important;
    background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%);
    box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
  }

  .daily-classroom-page-ui .daily-classroom-btn:hover {
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(36, 91, 255, 0.30);
  }

  .daily-classroom-page-ui .daily-classroom-btn--telegram {
    background: linear-gradient(100deg, #08a7dc 0%, #087ec4 100%);
  }

  .daily-classroom-page-ui .daily-classroom-btn--locked {
    cursor: not-allowed;
    color: #8a5a00 !important;
    border: 1px solid #f2bc38;
    background: #ffe292 !important;
    box-shadow: none;
  }

  .daily-classroom-page-ui .daily-classroom-empty-state {
    max-width: 520px;
    margin: 0 auto;
    padding: 42px 24px;
    border-radius: 8px;
    border: 1px dashed #cdd9ed;
    background:
      radial-gradient(circle at 12% 0, rgba(36, 91, 255, 0.10) 0%, rgba(36, 91, 255, 0) 34%),
      linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    text-align: center;
  }

  .daily-classroom-page-ui .daily-classroom-empty-state i {
    width: 62px;
    height: 62px;
    margin: 0 auto 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #245bff;
    background: #eef4ff;
    border: 1px solid #dbe7fb;
    font-size: 28px;
  }

  .daily-classroom-page-ui .daily-classroom-empty-state h4 {
    margin: 0 0 8px;
    color: #07143c;
    font-size: 20px;
    font-weight: 800;
  }

  .daily-classroom-page-ui .daily-classroom-empty-state p {
    margin: 0;
    color: #6d7791;
    font-size: 14px;
    font-weight: 500;
  }

  @media (max-width: 575.98px) {
    .daily-classroom-page-ui .section-title-ui {
      margin-bottom: 24px;
      padding-left: 10px;
      padding-right: 10px;
    }

    .daily-classroom-page-ui .section-title-ui__title {
      font-size: 28px;
    }

    .daily-classroom-page-ui .section-title-ui__subtitle {
      font-size: 13px;
    }

    .daily-classroom-page-ui .daily-classroom-showcase .card-body {
      padding-top: 34px;
      padding-bottom: 34px;
    }

    .daily-classroom-page-ui .daily-classroom-card {
      min-height: auto;
    }

    .daily-classroom-page-ui .daily-classroom-card__body-wrap {
      padding: 22px 18px 0;
    }

    .daily-classroom-page-ui .daily-classroom-card__top {
      flex-direction: column;
      gap: 10px;
    }

    .daily-classroom-page-ui .daily-classroom-card__title {
      font-size: 18px;
    }

    .daily-classroom-page-ui .daily-classroom-card__footer {
      align-items: stretch;
      flex-direction: column;
      padding: 16px 18px 18px;
    }

    .daily-classroom-page-ui .daily-classroom-btn {
      width: 100%;
      min-height: 42px;
    }
  }

  /* =============================================
     Daily Classroom Page UI End
  ============================================= */

  /* =============================================
       Contact Page UI Start
    ============================================= */

    .contact-page-ui {
        position: relative;
    }

    .contact-page-ui input::placeholder,
    .contact-page-ui textarea::placeholder {
        color: #91a0b8;
        opacity: 1;
        font-size: 14px;
        font-weight: 500;
    }


    .contact-page-ui .breadcrumb {
        margin-bottom: 0;
        background: transparent;
        padding-left: 0;
    }

    .contact-page-ui .contact-showcase {
        border: 0;
        background: #ffffff;
    }

    .contact-page-ui .contact-showcase > .card-body {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .contact-page-ui .section-title-ui {
        width: 100%;
        max-width: 760px;
        margin: 0 auto 42px;
        padding: 8px 16px 0;
        text-align: center;
    }

    .contact-page-ui .section-title-ui__title {
        margin: 0;
        color: #07143c;
        font-size: 36px;
        line-height: 1.12;
        font-weight: 800;
    }

    .contact-page-ui .section-title-ui__accent {
        color: #245bff;
    }

    .contact-page-ui .section-title-ui__subtitle {
        margin: 8px auto 0;
        max-width: 620px;
        color: #6d7791;
        font-size: 14px;
        line-height: 1.55;
        font-weight: 500;
    }

    .contact-page-ui .section-title-ui__bar {
        width: 170px;
        height: 2px;
        margin: 12px auto 0;
        border-radius: 999px;
        background: linear-gradient(to right, transparent, #245bff, transparent);
    }

    .contact-page-ui .contact-layout-card {
        position: relative;
        isolation: isolate;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }

    .contact-page-ui .contact-layout-card > .card-body {
        position: relative;
        z-index: 2;
        padding: 0px;
    }

    .contact-page-ui .contact-info-head {
        margin-bottom: 24px;
        padding-bottom: 22px;
        border-bottom: 1px solid #edf2fa;
    }

    .contact-page-ui .contact-info-title {
        margin: 0;
        color: #07143c;
        font-size: 26px;
        line-height: 1.2;
        font-weight: 800;
    }

    .contact-page-ui .contact-info-text {
        margin: 8px 0 0;
        color: #6d7791;
        font-size: 14px;
        line-height: 1.6;
        font-weight: 500;
    }

    .contact-page-ui .info-card {
        position: relative;
        height: 100%;
        padding: 20px !important;
        border-radius: 8px !important;
        border: 1px solid #edf2fa;
        background: #ffffff !important;
        box-shadow: 0 12px 24px rgba(18, 44, 96, 0.04) !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    }

    .contact-page-ui .info-card:hover {
        border-color: rgba(36, 91, 255, 0.35);
    }

    .contact-page-ui .info-card > i {
        width: 42px;
        height: 42px;
        min-width: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 12px 0 0 !important;
        padding: 0 !important;
        border-radius: 12px;
        color: #245bff;
        background: #eff3ff;
        border: 1px solid #dbe7fb;
        font-size: 16px;
    }

    .contact-page-ui .info-card-header {
        margin-bottom: 6px;
        color: #6d7791;
        font-size: 12px;
        line-height: 1.2;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .contact-page-ui .info-card-text {
        margin: 0;
        color: #07143c;
        font-size: 14px;
        line-height: 1.4;
        font-weight: 600;
        word-break: break-word;
    }

    .contact-page-ui .contact-social-wrap {
        margin-top: 6px;
        padding: 20px;
        border-radius: 8px;
        border: 1px solid #edf2fa;
        background: #ffffff;
        box-shadow: 0 12px 24px rgba(18, 44, 96, 0.04);
    }

    .contact-page-ui .contact-social-title {
        margin: 0 0 14px;
        color: #07143c;
        font-size: 17px;
        font-weight: 800;
    }

    .contact-page-ui .social-media-list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .contact-page-ui .social-media-list li {
        margin: 0;
        padding: 0;
    }

    .contact-page-ui .social-media-list a {
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        color: #245bff;
        background: #eff3ff;
        border: 1px solid #dbe7fb;
        font-size: 17px;
        text-decoration: none !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
    }

     .contact-page-ui .social-media-list li {
        position: relative;
        display: inline-block;
        height: 40px;
        width: 40px;
        margin: 10px 3px;
        line-height: 0px;
        border-radius: none;        
        color: #fff;
        background-color: rgb(255, 255, 255);
        cursor: pointer;
        transition: all .2s ease-in-out;
    }

    .contact-page-ui .social-media-list a:hover {
        color: #ffffff;
        background: linear-gradient(135deg, #0679ff 0%, #3454ff 54%, #6700ff 100%);
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.22);
        transform: translateY(-2px);
    }

    .contact-page-ui .contact-form-card {
        height: 100%;
        padding: 26px !important;
        border-radius: 8px !important;
        border: 1px solid rgba(214, 226, 244, 0.95);
        background:
            radial-gradient(circle at 100% 0, rgba(36, 91, 255, 0.10) 0%, rgba(36, 91, 255, 0) 32%),
            #ffffff !important;
        box-shadow: 0 14px 30px rgba(18, 44, 96, 0.06) !important;
    }

    .contact-page-ui .contact-form-head {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 24px;
        padding-bottom: 20px;
        border-bottom: 1px solid #edf2fa;
    }

    .contact-page-ui .contact-form-icon {
        width: 54px;
        height: 54px;
        min-width: 54px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: #ffffff;
        background: linear-gradient(135deg, #0679ff 0%, #3454ff 54%, #6700ff 100%);
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
        font-size: 20px;
    }

    .contact-page-ui .contact-form-title {
        margin: 0;
        color: #07143c;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 800;
    }

    .contact-page-ui .contact-form-subtitle {
        margin: 5px 0 0;
        color: #6d7791;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 600;
    }

    .contact-page-ui #contact {
        margin: 0;
    }

    .contact-page-ui .contact-input-wrap {
        position: relative;
    }

    .contact-page-ui .contact-input-wrap i {
        position: absolute;
        top: 50%;
        left: 15px;
        transform: translateY(-50%);
        color: #245bff;
        font-size: 14px;
        z-index: 2;
        pointer-events: none;
    }

    .contact-page-ui .contact-input-wrap .textarea-icon {
        top: 18px;
        transform: none;
    }

    .contact-page-ui .form-control {
        width: 100%;
        min-height: 48px;
        border: 1px solid #dbe7fb;
        border-radius: 10px;
        color: #17233f;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 8px 20px rgba(34, 59, 102, 0.05);
        font-size: 14px;
        font-weight: 600;
        padding: 12px 14px 12px 42px;
        transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    }

    .contact-page-ui textarea.form-control {
        min-height: 142px;
        resize: vertical;
        line-height: 1.55;
    }

    .contact-page-ui .form-control:focus {
        border-color: rgba(36, 91, 255, 0.62);
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(36, 91, 255, 0.10);
    }

    .contact-page-ui .contact-submit-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        border: 0;
        border-radius: 8px;
        color: #ffffff !important;
        background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%) !important;
        box-shadow: 0 14px 28px rgba(36, 91, 255, 0.24);
        font-size: 14px !important;
        line-height: 1;
        font-weight: 700;
        text-decoration: none !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .contact-page-ui .contact-submit-btn:hover {
        color: #ffffff !important;
        transform: translateY(-1px);
        box-shadow: 0 16px 30px rgba(36, 91, 255, 0.30);
    }

    @media (max-width: 767.98px) {
        .contact-page-ui .contact-showcase > .card-body {
            padding-top: 34px;
            padding-bottom: 34px;
        }

        .contact-page-ui .section-title-ui {
            margin-bottom: 24px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .contact-page-ui .section-title-ui__title {
            font-size: 28px;
        }

        .contact-page-ui .section-title-ui__subtitle {
            font-size: 13px;
        }

        .contact-page-ui .contact-layout-card > .card-body {
            padding: 0px;
        }

        .contact-page-ui .contact-info-title {
            font-size: 22px;
        }

        .contact-page-ui .contact-form-card {
            padding: 22px 18px !important;
        }

        .contact-page-ui .contact-form-head {
            align-items: flex-start;
            gap: 12px;
        }

        .contact-page-ui .contact-form-icon {
            width: 48px;
            height: 48px;
            min-width: 48px;
            border-radius: 12px;
            font-size: 18px;
        }

        .contact-page-ui .contact-form-title {
            font-size: 19px;
        }

        .contact-page-ui .contact-form-subtitle {
            font-size: 12px;
        }
    }

    /* =============================================
       Contact Page UI End
    ============================================= */


/* =============================================
   Dashboard Page UI Start
============================================= */

.dashboard-page-ui {
    position: relative;
    color: #52617a;
}


.dashboard-page-ui .breadcrumb {
    margin-bottom: 0;
    background: transparent;
}

.dashboard-page-ui .dashboard-showcase {
    border: 0;
    background: #ffffff;
}

.dashboard-page-ui .dashboard-showcase > .card-body {
    padding-top: 48px;
    padding-bottom: 48px;
}

.dashboard-page-ui .section-title-ui {
    width: 100%;
    max-width: 760px;
    margin: 40px auto 0px;
    padding: 8px 16px 0;
    text-align: center;
}

.dashboard-page-ui .section-title-ui__title {
    margin: 0;
    color: #07143c;
    font-size: 36px;
    line-height: 1.12;
    font-weight: 800;
}

.dashboard-page-ui .section-title-ui__accent {
    color: #245bff;
}

.dashboard-page-ui .section-title-ui__subtitle {
    margin: 8px auto 0;
    max-width: 620px;
    color: #6d7791;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 500;
}

.dashboard-page-ui .section-title-ui__bar {
    width: 170px;
    height: 2px;
    margin: 12px auto 0;
    border-radius: 999px;
    background: linear-gradient(to right, transparent, #245bff, transparent);
}

.dashboard-page-ui .dashboard-shell {
    position: relative;
    overflow: hidden;
   
}


.dashboard-page-ui .dashboard-shell > .card-body {
    position: relative;
    z-index: 2;
}

.dashboard-page-ui .dashboard-alert {
    margin-bottom: 24px;
}

.dashboard-page-ui .dashboard-stats {
    row-gap: 22px;
}

.dashboard-page-ui .dashboard-stat-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(214, 226, 244, 0.95);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(18, 44, 96, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.dashboard-page-ui .dashboard-stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(36, 91, 255, 0.45);
}

.dashboard-page-ui .dashboard-stat-card::after {
    content: "";
    position: absolute;
    top: -58px;
    right: -54px;
    width: 150px;
    height: 150px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(36, 91, 255, 0.11) 0%, rgba(36, 91, 255, 0) 68%);
    z-index: 0;
    pointer-events: none;
}

.dashboard-page-ui .dashboard-stat-card > .card-body {
    position: relative;
    z-index: 1;
    padding: 24px 22px 22px;
}

.dashboard-page-ui .dashboard-stat-card .media {
    align-items: flex-start !important;
}

.dashboard-page-ui .dashboard-stat-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 8px;
    border: 1px solid #d8e2f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(18, 44, 96, 0.08);
}

.dashboard-page-ui .dashboard-stat-icon i {
    font-size: 24px;
}

.dashboard-page-ui .dashboard-stat-icon--blue {
    color: #245bff;
    background: linear-gradient(180deg, #eef4ff 0%, #ffffff 100%);
    border-color: #bfd2ff;
}

.dashboard-page-ui .dashboard-stat-icon--cyan {
    color: #18aeff;
    background: linear-gradient(180deg, #effaff 0%, #ffffff 100%);
    border-color: #b6e7ff;
}

.dashboard-page-ui .dashboard-stat-icon--gold {
    color: #ff9f1c;
    background: linear-gradient(180deg, #fff7e7 0%, #ffffff 100%);
    border-color: #ffd79a;
}

.dashboard-page-ui .dashboard-stat-icon--purple {
    color: #7b4dff;
    background: linear-gradient(180deg, #f4efff 0%, #ffffff 100%);
    border-color: #d3c3ff;
}

.dashboard-page-ui .dashboard-stat-copy {
    margin-left: 16px !important;
    flex: 1 1 auto;
    min-width: 0;
}

.dashboard-page-ui .dashboard-stat-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #57595c;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dashboard-page-ui .dashboard-stat-card h2 {
    margin: 0;
    color: #07143c;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.dashboard-page-ui .dashboard-stat-card p,
.dashboard-page-ui .dashboard-stat-card .text-muted {
    margin-bottom: 0;
    color: #6d7791 !important;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 600;
}

.dashboard-page-ui .dashboard-membership-lines {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.dashboard-page-ui .dashboard-membership-line {
    min-width: 190px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #f8fbff;
    border: 1px solid #e8eef7;
}

.dashboard-page-ui .dashboard-membership-line span:first-child {
    color: #6d7791;
    font-size: 13px;
    font-weight: 700;
}

.dashboard-page-ui .dashboard-membership-line strong {
    color: #07143c;
    font-size: 15px;
    font-weight: 800;
}

.dashboard-page-ui .dashboard-empty-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px dashed #d8e2f0;
    background: #f8fbff;
    color: #6d7791;
    font-size: 14px;
    font-weight: 700;
}

.dashboard-page-ui .dashboard-empty-state::before {
    content: "\f06a";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #f6a500;
}

@media (max-width: 767.98px) {
    .dashboard-page-ui .dashboard-showcase > .card-body {
        padding-top: 34px;
        padding-bottom: 34px;
    }

    .dashboard-page-ui .section-title-ui {
        margin-bottom: 24px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .dashboard-page-ui .section-title-ui__title {
        font-size: 28px;
    }

    .dashboard-page-ui .section-title-ui__subtitle {
        font-size: 13px;
    }

    .dashboard-page-ui .dashboard-shell > .card-body {
        padding: 0px 18px;
    }

    .dashboard-page-ui .dashboard-stat-card > .card-body {
        padding: 20px 18px;
    }

    .dashboard-page-ui .dashboard-stat-icon {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        border-radius: 12px;
    }

    .dashboard-page-ui .dashboard-stat-icon i {
        font-size: 21px;
    }

    .dashboard-page-ui .dashboard-stat-copy {
        margin-left: 12px !important;
    }

    .dashboard-page-ui .dashboard-stat-card h2 {
        font-size: 21px;
    }

    .dashboard-page-ui .dashboard-membership-line {
        min-width: 100%;
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}

/* =============================================
   Dashboard Page UI End
============================================= */

 /* =============================================
     All Dictations Page UI Start
  ============================================= */

  .all-dictations-page-ui .section-title-ui {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 50px;
    padding: 8px 16px 0;
    text-align: center;
  }

  .all-dictations-page-ui .section-title-ui__title {
    margin: 0;
    color: #07143c;
    font-size: 36px;
    line-height: 1.12;
    font-weight: 800;
  }

  .all-dictations-page-ui .section-title-ui__accent {
    color: #245bff;
  }

  .all-dictations-page-ui .section-title-ui__subtitle {
    margin: 8px auto 0;
    max-width: 560px;
    color: #6d7791;
    font-size: 14px;
    line-height: 1.55;
  }

  .all-dictations-page-ui .section-title-ui__bar {
    width: 170px;
    height: 2px;
    margin: 12px auto 0;
    border-radius: 999px;
    background: linear-gradient(to right, transparent, #245bff, transparent);
  }

  .all-dictations-page-ui .dictation-list-showcase {
    background: #ffffff;
  }

  .all-dictations-page-ui .dictation-list-showcase .card-body {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .all-dictations-page-ui .dictation-card {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 386px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(214, 226, 244, 0.95);
    color: #52617a;
    background: #ffffff;
    overflow: hidden;
    text-decoration: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .all-dictations-page-ui .dictation-card:hover {
    color: #52617a;
    border-color: rgba(36, 91, 255, 0.45);
    box-shadow: 0 24px 46px rgba(25, 44, 76, 0.17);
    text-decoration: none;
  }

  .all-dictations-page-ui .dictation-card::after {
    content: "";
    position: absolute;
    top: -58px;
    right: -54px;
    width: 150px;
    height: 150px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(36, 91, 255, 0.13) 0%, rgba(36, 91, 255, 0) 68%);
    z-index: 0;
  }

  .all-dictations-page-ui .dictation-card__body-wrap {
    position: relative;
    z-index: 1;
    padding: 24px 22px 0;
  }

  .all-dictations-page-ui .dictation-card__top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid #edf2fa;
  }

  .all-dictations-page-ui .instructor-text {
    margin: 0;
    color: #07143c;
    font-family: inherit;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 800;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .all-dictations-page-ui .dictation-card__body {
    position: relative;
    z-index: 1;
    padding-top: 18px;
  }

  .all-dictations-page-ui .dictation-card__score {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid #a3c3ff;
    color: #243c8b;
    background: #eff3ff;
    box-shadow: 0 8px 18px rgba(246, 147, 52, 0.12);
  }

  .all-dictations-page-ui .dictation-card__score-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
  }

  .all-dictations-page-ui .dictation-card__score-bars span {
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #4a73ff 0%, #18aeff 100%);
  }

  .all-dictations-page-ui .dictation-card__score-bars span:nth-child(1) {
    height: 6px;
  }

  .all-dictations-page-ui .dictation-card__score-bars span:nth-child(2) {
    height: 9px;
  }

  .all-dictations-page-ui .dictation-card__score-bars span:nth-child(3) {
    height: 12px;
  }

  .all-dictations-page-ui .dictation-card__score-bars span:nth-child(4) {
    height: 15px;
  }

  .all-dictations-page-ui .dictation-card__score strong {
    color: #1b1b1b;
    font-size: 15px;
    line-height: 1;
    font-weight: 500;
  }

  .all-dictations-page-ui .dictation-card__score small {
    color: #272727;
    font-size: 14px;
    font-weight: 500;
  }

  .all-dictations-page-ui .dictation-card__progress {
    width: 100%;
    height: 4px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: #e8eef7;
    overflow: hidden;
  }

  .all-dictations-page-ui .dictation-card__progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3e7aff 0%, #1b54ef 100%);
  }

  .all-dictations-page-ui .dictation-card__facts {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .all-dictations-page-ui .dictation-card__facts li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #55647b;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
  }

  .all-dictations-page-ui .dictation-card__facts li:not(:first-child) .dictation-card__dot {
    margin-top: 5px;
  }

  .all-dictations-page-ui .dictation-card__content-preview {
    color: #33435c;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 600;
  }

  .all-dictations-page-ui .dictation-card__source {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .all-dictations-page-ui .dictation-card__source-photo {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid #d8e2f0;
  }

  .all-dictations-page-ui .dictation-card__source-name {
    color: #40506a;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
  }

  .all-dictations-page-ui .dictation-card__time {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #40506a;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
  }

  .all-dictations-page-ui .dictation-card__time i {
    color: #74839c;
    font-size: 14px;
  }

  .all-dictations-page-ui .dictation-card__dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    margin-top: 6px;
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.72);
  }

  .all-dictations-page-ui .dictation-card__dot--topic {
    background: #18aaf3;
  }

  .all-dictations-page-ui .dictation-card__dot--words {
    background: #1fc5b3;
  }

  .all-dictations-page-ui .dictation-card__dot--speed {
    background: #ffa51c;
  }

  .all-dictations-page-ui .dictation-card__dot--type {
    background: #f0327c;
  }

  .all-dictations-page-ui .dictation-card__access {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
  }

  .all-dictations-page-ui .dictation-card__access--free {
    color: #096b3b;
    border: 1px solid #68dd9a;
    background: #c9f8dc;
  }

  .all-dictations-page-ui .dictation-card__access--paid {
    color: #8a5a00;
    border: 1px solid #f2bc38;
    background: #ffe292;
  }

  .all-dictations-page-ui .dictation-card__cta {
    position: relative;
    z-index: 1;
    width: calc(100% - 44px);
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 14px 22px 22px;
    border-radius: 8px;
    color: #ffffff !important;
    background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%);
    box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background 0.25s ease, transform 0.25s ease;
  }

  .all-dictations-page-ui .dictation-card:hover .dictation-card__cta {
    background: linear-gradient(100deg, #006fec 0%, #2647ef 52%, #5600d8 100%);
  }

  .all-dictations-page-ui .dictation-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .all-dictations-page-ui .dictation-empty-state {
    padding: 38px 20px;
    text-align: center;
  }

  .all-dictations-page-ui .dictation-empty-state img {
    max-width: 260px;
    width: 100%;
    height: auto;
  }

  @media (max-width: 575.98px) {
    .all-dictations-page-ui .section-title-ui {
      margin-bottom: 24px;
      padding-left: 10px;
      padding-right: 10px;
    }

    .all-dictations-page-ui .section-title-ui__title {
      font-size: 28px;
    }

    .all-dictations-page-ui .section-title-ui__subtitle {
      font-size: 13px;
    }

    .all-dictations-page-ui .dictation-list-showcase .card-body {
      padding-top: 34px;
      padding-bottom: 34px;
    }

    .all-dictations-page-ui .dictation-card {
      min-height: auto;
    }

    .all-dictations-page-ui .dictation-card__body-wrap {
      padding: 22px 18px 0;
    }

    .all-dictations-page-ui .instructor-text {
      font-size: 16px;
    }

    .all-dictations-page-ui .dictation-card__cta {
      width: calc(100% - 36px);
      margin: 18px 18px 18px;
    }
  }

  /* =============================================
     All Dictations Page UI End
  ============================================= */

 /* =============================================
       Edit Profile Page UI Start
    ============================================= */

    .edit-profile-page-ui {
        position: relative;
    }

    .edit-profile-page-ui .edit-profile-breadcrumb {
        margin-top: 24px;
    }

    .edit-profile-page-ui .breadcrumb {
        margin-bottom: 0;
        background: transparent;
    }

    .edit-profile-page-ui .edit-profile-showcase {
        border: 0;
        background: #ffffff;
    }

    .edit-profile-page-ui .edit-profile-showcase > .card-body {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .edit-profile-page-ui .section-title-ui {
        width: 100%;
        max-width: 760px;
        margin: 0 auto 42px;
        padding: 8px 16px 0;
        text-align: center;
    }

    .edit-profile-page-ui .section-title-ui__title {
        margin: 0;
        color: #07143c;
        font-size: 36px;
        line-height: 1.12;
        font-weight: 800;
    }

    .edit-profile-page-ui .section-title-ui__accent {
        color: #245bff;
    }

    .edit-profile-page-ui .section-title-ui__subtitle {
        margin: 8px auto 0;
        max-width: 560px;
        color: #6d7791;
        font-size: 14px;
        line-height: 1.55;
        font-weight: 500;
    }

    .edit-profile-page-ui .section-title-ui__bar {
        width: 170px;
        height: 2px;
        margin: 12px auto 0;
        border-radius: 999px;
        background: linear-gradient(to right, transparent, #245bff, transparent);
    }

    .edit-profile-page-ui .profile-form-card {
        position: relative;
        isolation: isolate;
        margin: 0 auto;
        overflow: hidden;
    }

  
    .edit-profile-page-ui .profile-form-card .card-body {
        position: relative;
        z-index: 2;
    }

    .edit-profile-page-ui #edit_form {
        padding: 0 !important;
        margin: 0;
    }

    .edit-profile-page-ui .form-group {
        margin-bottom: 20px;
    }

    .edit-profile-page-ui .form-group label {
        display: block;
        margin-bottom: 8px;
        color: #173562;
        font-size: 13px;
        line-height: 1.2;
        font-weight: 700;
    }

    .edit-profile-page-ui .input-affix {
        position: relative;
    }

    .edit-profile-page-ui .input-affix .field-icon {
        position: absolute;
        top: 50%;
        left: 15px;
        transform: translateY(-50%);
        color: #245bff;
        font-size: 14px;
        z-index: 2;
        pointer-events: none;
    }

    .edit-profile-page-ui .input-affix .field-icon--textarea {
        top: 18px;
        transform: none;
    }

    .edit-profile-page-ui .form-control,
    .edit-profile-page-ui .select2-container--default .select2-selection--single {
        width: 100%;
        min-height: 48px;
        border: 1px solid #dbe7fb;
        border-radius: 10px;
        color: #17233f;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 8px 20px rgba(34, 59, 102, 0.05);
        font-size: 14px;
        font-weight: 600;
        transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    }

    .edit-profile-page-ui input.form-control,
    .edit-profile-page-ui select.form-control {
        padding: 12px 14px 12px 42px;
    }

    .edit-profile-page-ui input[type="file"].form-control {
        padding: 10px 12px 10px 42px;
        line-height: 1.4;
    }

    .edit-profile-page-ui textarea.form-control {
        min-height: 118px;
        padding: 14px 14px 14px 42px;
        resize: vertical;
        line-height: 1.55;
    }

    .edit-profile-page-ui .form-control::placeholder {
        color: #91a0b8;
        font-weight: 500;
    }

    .edit-profile-page-ui .form-control:focus {
        border-color: rgba(36, 91, 255, 0.62);
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(36, 91, 255, 0.10);
    }

    .edit-profile-page-ui .form-control:disabled {
        color: #667795;
        background: #f4f7fc;
        cursor: not-allowed;
    }

    .edit-profile-page-ui .select2-container {
        width: 100% !important;
    }

    .edit-profile-page-ui .select2-wrap {
        position: relative;
    }

    .edit-profile-page-ui .select2-wrap .field-icon {
        position: absolute;
        top: 50%;
        left: 15px;
        transform: translateY(-50%);
        color: #245bff;
        font-size: 14px;
        z-index: 3;
        pointer-events: none;
    }

    .edit-profile-page-ui .select2-container--default .select2-selection--single {
        display: flex;
        align-items: center;
        padding: 0 14px 0 42px;
    }

    .edit-profile-page-ui .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #17233f;
        padding-left: 0;
        padding-right: 28px;
        line-height: 46px;
        font-size: 14px;
        font-weight: 600;
    }

    .edit-profile-page-ui .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 46px;
        right: 10px;
    }

    .edit-profile-page-ui .profile-save-row {
        margin-top: 8px;
    }

    .edit-profile-page-ui .profile-save-btn {
        min-width: 150px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 0 22px;
        border: 0;
        border-radius: 8px;
        color: #ffffff !important;
        background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%) !important;
        box-shadow: 0 14px 28px rgba(36, 91, 255, 0.24);
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
        text-decoration: none !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .edit-profile-page-ui .profile-save-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 16px 30px rgba(36, 91, 255, 0.30);
    }

    @media (max-width: 767.98px) {
        .edit-profile-page-ui .edit-profile-showcase > .card-body {
            padding-top: 34px;
            padding-bottom: 34px;
        }

        .edit-profile-page-ui .section-title-ui {
            margin-bottom: 24px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .edit-profile-page-ui .section-title-ui__title {
            font-size: 28px;
        }

        .edit-profile-page-ui .section-title-ui__subtitle {
            font-size: 13px;
        }

        .edit-profile-page-ui .profile-form-card .card-body {
            padding: 28px 18px 22px;
        }

        .edit-profile-page-ui .form-control,
        .edit-profile-page-ui .select2-container--default .select2-selection--single {
            min-height: 46px;
            font-size: 13px;
        }

        .edit-profile-page-ui .profile-save-btn {
            width: 100%;
            min-height: 46px;
        }
    }

    /* =============================================
       Edit Profile Page UI End
    ============================================= */

 /* =============================================
       Forgot Password Page UI Start
    ============================================= */

    .forgot-password-page-ui {
        min-height: 100vh;
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at 8% 10%, rgba(36, 91, 255, 0.12) 0%, rgba(36, 91, 255, 0) 30%),
            radial-gradient(circle at 92% 8%, rgba(103, 0, 255, 0.10) 0%, rgba(103, 0, 255, 0) 28%),
            linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
    }

    .forgot-password-page-ui::before {
        content: "";
        position: absolute;
        top: -120px;
        right: -100px;
        width: 300px;
        height: 300px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(36, 91, 255, 0.14) 0%, rgba(36, 91, 255, 0) 68%);
        pointer-events: none;
    }

    .forgot-password-page-ui::after {
        content: "";
        position: absolute;
        bottom: -140px;
        left: -120px;
        width: 330px;
        height: 330px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(24, 174, 255, 0.14) 0%, rgba(24, 174, 255, 0) 68%);
        pointer-events: none;
    }

    .forgot-password-page-ui .forgot-auth-shell {
        min-height: 100vh;
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        padding: 34px 0;
    }

    .forgot-password-page-ui .forgot-auth-card {
        position: relative;
        isolation: isolate;
        width: 100%;
        max-width: 470px;
        margin: 0 auto;
        border: 1px solid rgba(214, 226, 244, 0.95);
        border-radius: 8px;
        background:
            radial-gradient(circle at 100% 0, rgba(36, 91, 255, 0.10) 0%, rgba(36, 91, 255, 0) 32%),
            linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        box-shadow: 0 24px 58px rgba(18, 44, 96, 0.14);
        overflow: hidden;
    }

    .forgot-password-page-ui .forgot-auth-card::after {
        content: "";
        position: absolute;
        top: -58px;
        right: -54px;
        width: 150px;
        height: 150px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(36, 91, 255, 0.13) 0%, rgba(36, 91, 255, 0) 68%);
        z-index: 0;
        pointer-events: none;
    }

    .forgot-password-page-ui .forgot-auth-card .card-body {
        position: relative;
        z-index: 2;
        padding: 34px 30px 30px;
    }

    .forgot-password-page-ui .forgot-back-wrap {
        margin-bottom: 18px;
    }

    .forgot-password-page-ui .forgot-back-btn {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 15px;
        border-radius: 999px;
        color: #243c8b !important;
        background: #eff3ff !important;
        border: 1px solid #a3c3ff !important;
        box-shadow: 0 8px 18px rgba(36, 91, 255, 0.10);
        font-size: 13px;
        line-height: 1;
        font-weight: 800;
        text-decoration: none !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .forgot-password-page-ui .forgot-back-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.16);
    }

    .forgot-password-page-ui .forgot-form-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 28px;
        padding-bottom: 22px;
        border-bottom: 1px solid #edf2fa;
    }

    .forgot-password-page-ui .forgot-form-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: #ffffff;
        background: linear-gradient(135deg, #0679ff 0%, #3454ff 54%, #6700ff 100%);
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
        font-size: 22px;
        font-weight: 800;
    }

    .forgot-password-page-ui .forgot-form-title-wrap {
        min-width: 0;
    }

    .forgot-password-page-ui .forgot-form-title {
        margin: 0;
        color: #07143c;
        font-size: 24px;
        line-height: 1.2;
        font-weight: 800;
    }

    .forgot-password-page-ui .forgot-form-text {
        margin: 6px 0 0;
        color: #6d7791;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 600;
    }

    .forgot-password-page-ui #give-the-forgot-email {
        margin: 0;
    }

    .forgot-password-page-ui .form-group {
        margin-bottom: 20px;
    }

    .forgot-password-page-ui .form-group label {
        display: block;
        margin-bottom: 8px;
        color: #173562;
        font-size: 13px;
        line-height: 1.2;
        font-weight: 700;
    }

    .forgot-password-page-ui .input-affix {
        position: relative;
    }

    .forgot-password-page-ui .input-affix .prefix-icon,
    .forgot-password-page-ui .input-affix .field-icon {
        position: absolute;
        top: 50%;
        left: 15px;
        transform: translateY(-50%);
        color: #245bff;
        font-size: 14px;
        z-index: 2;
        pointer-events: none;
    }

    .forgot-password-page-ui .form-control {
        width: 100%;
        min-height: 48px;
        border: 1px solid #dbe7fb;
        border-radius: 10px;
        color: #17233f;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 8px 20px rgba(34, 59, 102, 0.05);
        font-size: 14px;
        font-weight: 600;
        padding: 12px 14px 12px 42px;
        transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    }

    .forgot-password-page-ui .form-control::placeholder {
        color: #91a0b8;
        font-weight: 500;
    }

    .forgot-password-page-ui .form-control:focus {
        border-color: rgba(36, 91, 255, 0.62);
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(36, 91, 255, 0.10);
    }

    .forgot-password-page-ui .forgot_email_to_sent {
        display: block;
        margin-top: 6px;
        color: #dc3545;
        font-size: 12px;
        line-height: 1.35;
        font-weight: 600;
    }

    .forgot-password-page-ui .forgot-submit-row {
        margin-top: 6px;
    }

    .forgot-password-page-ui .forgot-submit-btn {
        width: 100%;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 0 22px;
        border: 0;
        border-radius: 8px;
        color: #ffffff !important;
        background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%) !important;
        box-shadow: 0 14px 28px rgba(36, 91, 255, 0.24);
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
        text-decoration: none !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .forgot-password-page-ui .forgot-submit-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 16px 30px rgba(36, 91, 255, 0.30);
    }

    .forgot-password-page-ui .forgot-visual-card {
        position: relative;
        isolation: isolate;
        min-height: 520px;
        border-radius: 8px;
        border: 1px solid rgba(214, 226, 244, 0.95);
        background:
            radial-gradient(circle at 20% 10%, rgba(36, 91, 255, 0.14) 0%, rgba(36, 91, 255, 0) 34%),
            radial-gradient(circle at 88% 18%, rgba(24, 174, 255, 0.18) 0%, rgba(24, 174, 255, 0) 30%),
            linear-gradient(145deg, #ffffff 0%, #eef4ff 100%);
        box-shadow: 0 24px 58px rgba(18, 44, 96, 0.10);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 36px;
    }

    .forgot-password-page-ui .forgot-visual-card::after {
        content: "";
        position: absolute;
        bottom: -90px;
        right: -80px;
        width: 240px;
        height: 240px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(103, 0, 255, 0.12) 0%, rgba(103, 0, 255, 0) 68%);
        pointer-events: none;
    }

    .forgot-password-page-ui .forgot-visual-card img {
        position: relative;
        z-index: 2;
        max-width: 88%;
        filter: drop-shadow(0 18px 26px rgba(18, 44, 96, 0.14));
    }

    .forgot-password-page-ui .forgot-visual-content {
        position: absolute;
        left: 30px;
        right: 30px;
        bottom: 30px;
        z-index: 3;
        padding: 18px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.76);
        border: 1px solid rgba(219, 231, 251, 0.95);
        backdrop-filter: blur(12px);
    }

    .forgot-password-page-ui .forgot-visual-content h3 {
        margin: 0 0 6px;
        color: #07143c;
        font-size: 19px;
        font-weight: 800;
    }

    .forgot-password-page-ui .forgot-visual-content p {
        margin: 0;
        color: #6d7791;
        font-size: 13px;
        line-height: 1.5;
        font-weight: 600;
    }

    @media (max-width: 767.98px) {
        .forgot-password-page-ui .forgot-auth-shell {
            padding: 24px 0;
        }

        .forgot-password-page-ui .forgot-auth-card .card-body {
            padding: 28px 18px 22px;
        }

        .forgot-password-page-ui .forgot-form-header {
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 22px;
            padding-bottom: 18px;
        }

        .forgot-password-page-ui .forgot-form-icon {
            width: 48px;
            height: 48px;
            min-width: 48px;
            border-radius: 12px;
            font-size: 18px;
        }

        .forgot-password-page-ui .forgot-form-title {
            font-size: 21px;
        }

        .forgot-password-page-ui .forgot-form-text {
            font-size: 12px;
        }

        .forgot-password-page-ui .form-control {
            min-height: 46px;
            font-size: 13px;
        }
    }

    /* =============================================
       Forgot Password Page UI End
    ============================================= */

 /* =============================================
       Forgot Password OTP Page UI Start
    ============================================= */

    .forgot-otp-page-ui {
        min-height: 100vh;
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at 8% 10%, rgba(36, 91, 255, 0.12) 0%, rgba(36, 91, 255, 0) 30%),
            radial-gradient(circle at 92% 8%, rgba(103, 0, 255, 0.10) 0%, rgba(103, 0, 255, 0) 28%),
            linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
    }

    .forgot-otp-page-ui::before {
        content: "";
        position: absolute;
        top: -120px;
        right: -100px;
        width: 300px;
        height: 300px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(36, 91, 255, 0.14) 0%, rgba(36, 91, 255, 0) 68%);
        pointer-events: none;
    }

    .forgot-otp-page-ui::after {
        content: "";
        position: absolute;
        bottom: -140px;
        left: -120px;
        width: 330px;
        height: 330px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(24, 174, 255, 0.14) 0%, rgba(24, 174, 255, 0) 68%);
        pointer-events: none;
    }

    .forgot-otp-page-ui .forgot-otp-shell {
        min-height: 100vh;
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        padding: 34px 0;
    }

    .forgot-otp-page-ui .forgot-otp-card {
        position: relative;
        isolation: isolate;
        width: 100%;
        max-width: 490px;
        margin: 0 auto;
        border: 1px solid rgba(214, 226, 244, 0.95);
        border-radius: 8px;
        background:
            radial-gradient(circle at 100% 0, rgba(36, 91, 255, 0.10) 0%, rgba(36, 91, 255, 0) 32%),
            linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        box-shadow: 0 24px 58px rgba(18, 44, 96, 0.14);
        overflow: hidden;
    }

    .forgot-otp-page-ui .forgot-otp-card::after {
        content: "";
        position: absolute;
        top: -58px;
        right: -54px;
        width: 150px;
        height: 150px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(36, 91, 255, 0.13) 0%, rgba(36, 91, 255, 0) 68%);
        z-index: 0;
        pointer-events: none;
    }

    .forgot-otp-page-ui .forgot-otp-card .card-body {
        position: relative;
        z-index: 2;
        padding: 34px 30px 30px;
    }

    .forgot-otp-page-ui .forgot-back-wrap {
        margin-bottom: 18px;
    }

    .forgot-otp-page-ui .forgot-back-btn {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 15px;
        border-radius: 999px;
        color: #243c8b !important;
        background: #eff3ff !important;
        border: 1px solid #a3c3ff !important;
        box-shadow: 0 8px 18px rgba(36, 91, 255, 0.10);
        font-size: 13px;
        line-height: 1;
        font-weight: 800;
        text-decoration: none !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .forgot-otp-page-ui .forgot-back-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.16);
    }

    .forgot-otp-page-ui .forgot-otp-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 28px;
        padding-bottom: 22px;
        border-bottom: 1px solid #edf2fa;
    }

    .forgot-otp-page-ui .forgot-otp-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: #ffffff;
        background: linear-gradient(135deg, #0679ff 0%, #3454ff 54%, #6700ff 100%);
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
        font-size: 22px;
        font-weight: 800;
    }

    .forgot-otp-page-ui .forgot-otp-title-wrap {
        min-width: 0;
    }

    .forgot-otp-page-ui .forgot-otp-title {
        margin: 0;
        color: #07143c;
        font-size: 24px;
        line-height: 1.2;
        font-weight: 800;
    }

    .forgot-otp-page-ui .forgot-otp-text {
        margin: 6px 0 0;
        color: #6d7791;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 600;
    }

    .forgot-otp-page-ui #save-the-forgot-email {
        margin: 0;
    }

    .forgot-otp-page-ui .form-group {
        margin-bottom: 20px;
    }

    .forgot-otp-page-ui .form-group label {
        display: block;
        margin-bottom: 8px;
        color: #173562;
        font-size: 13px;
        line-height: 1.2;
        font-weight: 700;
    }

    .forgot-otp-page-ui .input-affix {
        position: relative;
    }

    .forgot-otp-page-ui .input-affix .prefix-icon,
    .forgot-otp-page-ui .input-affix .field-icon {
        position: absolute;
        top: 50%;
        left: 15px;
        transform: translateY(-50%);
        color: #245bff;
        font-size: 14px;
        z-index: 2;
        pointer-events: none;
    }

    .forgot-otp-page-ui .form-control {
        width: 100%;
        min-height: 48px;
        border: 1px solid #dbe7fb;
        border-radius: 10px;
        color: #17233f;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 8px 20px rgba(34, 59, 102, 0.05);
        font-size: 14px;
        font-weight: 600;
        padding: 12px 14px 12px 42px;
        transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    }

    .forgot-otp-page-ui .form-control::placeholder {
        color: #91a0b8;
        font-weight: 500;
    }

    .forgot-otp-page-ui .form-control:focus {
        border-color: rgba(36, 91, 255, 0.62);
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(36, 91, 255, 0.10);
    }

    .forgot-otp-page-ui .text-danger,
    .forgot-otp-page-ui .after_sent_otp,
    .forgot-otp-page-ui .after_sent_new_pass,
    .forgot-otp-page-ui .after_sent_confirm_pass {
        display: block;
        margin-top: 6px;
        font-size: 12px;
        line-height: 1.35;
        font-weight: 600;
    }

    .forgot-otp-page-ui .forgot-update-row {
        margin-top: 6px;
    }

    .forgot-otp-page-ui .forgot-update-btn {
        width: 100%;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 0 22px;
        border: 0;
        border-radius: 8px;
        color: #ffffff !important;
        background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%) !important;
        box-shadow: 0 14px 28px rgba(36, 91, 255, 0.24);
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
        text-decoration: none !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .forgot-otp-page-ui .forgot-update-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 16px 30px rgba(36, 91, 255, 0.30);
    }

    .forgot-otp-page-ui .forgot-visual-card {
        position: relative;
        isolation: isolate;
        min-height: 520px;
        border-radius: 8px;
        border: 1px solid rgba(214, 226, 244, 0.95);
        background:
            radial-gradient(circle at 20% 10%, rgba(36, 91, 255, 0.14) 0%, rgba(36, 91, 255, 0) 34%),
            radial-gradient(circle at 88% 18%, rgba(24, 174, 255, 0.18) 0%, rgba(24, 174, 255, 0) 30%),
            linear-gradient(145deg, #ffffff 0%, #eef4ff 100%);
        box-shadow: 0 24px 58px rgba(18, 44, 96, 0.10);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 36px;
    }

    .forgot-otp-page-ui .forgot-visual-card::after {
        content: "";
        position: absolute;
        bottom: -90px;
        right: -80px;
        width: 240px;
        height: 240px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(103, 0, 255, 0.12) 0%, rgba(103, 0, 255, 0) 68%);
        pointer-events: none;
    }

    .forgot-otp-page-ui .forgot-visual-card img {
        position: relative;
        z-index: 2;
        max-width: 88%;
        filter: drop-shadow(0 18px 26px rgba(18, 44, 96, 0.14));
    }

    .forgot-otp-page-ui .forgot-visual-content {
        position: absolute;
        left: 30px;
        right: 30px;
        bottom: 30px;
        z-index: 3;
        padding: 18px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.76);
        border: 1px solid rgba(219, 231, 251, 0.95);
        backdrop-filter: blur(12px);
    }

    .forgot-otp-page-ui .forgot-visual-content h3 {
        margin: 0 0 6px;
        color: #07143c;
        font-size: 19px;
        font-weight: 800;
    }

    .forgot-otp-page-ui .forgot-visual-content p {
        margin: 0;
        color: #6d7791;
        font-size: 13px;
        line-height: 1.5;
        font-weight: 600;
    }

    @media (max-width: 767.98px) {
        .forgot-otp-page-ui .forgot-otp-shell {
            padding: 24px 0;
        }

        .forgot-otp-page-ui .forgot-otp-card .card-body {
            padding: 28px 18px 22px;
        }

        .forgot-otp-page-ui .forgot-otp-header {
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 22px;
            padding-bottom: 18px;
        }

        .forgot-otp-page-ui .forgot-otp-icon {
            width: 48px;
            height: 48px;
            min-width: 48px;
            border-radius: 12px;
            font-size: 18px;
        }

        .forgot-otp-page-ui .forgot-otp-title {
            font-size: 21px;
        }

        .forgot-otp-page-ui .forgot-otp-text {
            font-size: 12px;
        }

        .forgot-otp-page-ui .form-control {
            min-height: 46px;
            font-size: 13px;
        }
    }

    /* =============================================
       Forgot Password OTP Page UI End
    ============================================= */

.homepage-page .home-banner {
    margin-top: 105px !important;
    border: 0;
    border-radius: 4px;
    box-shadow: none;
    overflow: hidden;
    background: #ffffff;
  }

  .homepage-page .home-banner .card-body {
    padding: 0;
  }

  .homepage-page .home-banner__link {
    display: block;
    line-height: 0;
  }

  .homepage-page .home-banner__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  @media (max-width: 767.98px) {
    .homepage-page .home-banner {
      margin-top: 70px !important;
      margin-bottom:0px !important;
    }

    .homepage-page .home-banner__image {
      height: 180px;
      object-position: center;
    }
  }

  .homepage-page .section-title-ui {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 40px;
    padding: 8px 16px 0;
    text-align: center;
  }

  .homepage-page .section-title-ui__title {
    margin: 0;
    color: #07143c;
    font-size: 36px;
    line-height: 1.12;
    font-weight: 800;
  }

  .homepage-page .section-title-ui__accent {
    color: #245bff;
  }

  .homepage-page .section-title-ui__subtitle {
    margin: 8px auto 0;
    max-width: 560px;
    color: #6d7791;
    font-size: 14px;
    line-height: 1.55;
  }

  .homepage-page .section-title-ui__bar {
    width: 170px;
    height: 2px;
    margin: 12px auto 0;
    border-radius: 999px;
    background: linear-gradient(to right, transparent, #245bff, transparent);
}

  .homepage-page .section-title-ui--row {
    max-width: 100%;
    margin: 0 0 36px;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
  }

  .homepage-page .section-title-ui--row .section-title-ui__subtitle {
    margin-left: 0;
    margin-right: 0;
  }

  .homepage-page .section-title-ui--row .section-title-ui__bar {
    margin-left: 0;
    background: linear-gradient(to right, #245bff, rgba(36, 91, 255, 0.08));
  }

  .homepage-page .section-view-more-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 22px;
    border-radius: 8px;
    border: 0;
    color: #ffffff !important;
    background: linear-gradient(100deg, #0679ff 0%, #3454ff 48%, #6700ff 100%);
    box-shadow: 0 10px 22px rgba(36, 91, 255, 0.22);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .homepage-page .section-view-more-btn:hover {
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(36, 91, 255, 0.26);
  }

  .homepage-page .section-view-more-btn i {
    font-size: 14px;
    line-height: 1;
  }

  .homepage-page .section-view-more-mobile {
    display: none;
  }

  @media (max-width: 767.98px) {
    .homepage-page .section-title-ui--row {
      align-items: flex-start;
      flex-direction: column;
      gap: 18px;
      padding-left: 10px;
      padding-right: 10px;
    }

    .homepage-page .section-title-ui--row > .section-view-more-btn {
      display: none;
    }

    .homepage-page .section-view-more-mobile {
      display: block;
      margin-top: 4px;
      padding: 0 10px;
    }

    .homepage-page .section-view-more-mobile .section-view-more-btn {
      width: 100%;
      min-height: 42px;
    }
  }

  @media (max-width: 575.98px) {
    .homepage-page .section-title-ui {
      margin-bottom: 24px;
      padding-left: 10px;
      padding-right: 10px;
    }

    .homepage-page .section-title-ui__title {
      font-size: 25px;
    }

    .homepage-page .section-title-ui__subtitle {
      font-size: 13px;
    }

    .homepage-page .section-title-ui--row {
      align-items: flex-start;
      flex-direction: column;
      gap: 18px;
      padding-left: 10px;
      padding-right: 10px;
    }

    .homepage-page .section-view-more-btn {
      width: 100%;
      min-height: 48px;
    }
  }

  .homepage-page .classroom-category-grid {
    row-gap: 28px;
  }

  .homepage-page .classroom-card {
    --classroom-card-color: #2d7eff;
    --classroom-card-soft: rgba(45, 126, 255, 0.13);
    --classroom-card-glow: rgba(45, 126, 255, 0.34);
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 260px;
    padding: 42px 22px 20px;
    color: #10205c;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid #dedede2e;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgb(244 249 255 / 84%)) padding-box, linear-gradient(135deg, rgba(255, 255, 255, 0.85), var(--classroom-card-color)) border-box;
    overflow: visible;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }


  .homepage-page .classroom-card::before {
    content: attr(data-card-number);
    position: absolute;
    top: 13px;
    right: 18px;
    color: var(--classroom-card-color);
    opacity: 0.13;
    font-size: 36px;
    line-height: 1;
    font-weight: 800;
  }

  .homepage-page .classroom-card--green {
    --classroom-card-color: #17c7a3;
    --classroom-card-soft: rgba(23, 199, 163, 0.13);
    --classroom-card-glow: rgba(23, 199, 163, 0.34);
  }

  .homepage-page .classroom-card--purple {
    --classroom-card-color: #7b4dff;
    --classroom-card-soft: rgba(123, 77, 255, 0.13);
    --classroom-card-glow: rgba(123, 77, 255, 0.34);
  }

  .homepage-page .classroom-card__icon {
    position: absolute;
    top: -26px;
    left: 18px;
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #cec7c73d;
    box-shadow:
      0 12px 24px var(--classroom-card-soft),
      inset 0 0 0 7px rgba(255, 255, 255, 0.62);
  }

  .homepage-page .classroom-card__icon i {
    position: relative;
    z-index: 1;
    color: var(--classroom-card-color);
    font-size: 28px;
  }

  .homepage-page .classroom-card__title {
    margin: 0;
    color: var(--classroom-card-color);
    font-size: 18px;
    line-height: 1.25;
    font-weight: 800;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
  }

  .homepage-page .classroom-card__poster {
    max-height: 170px;
    flex: 1 1 auto;
    margin-top: 6px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(157, 176, 220, 0.35);
    box-shadow: 0 8px 18px rgba(77, 96, 143, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .homepage-page .classroom-card__poster img {
    width: 100%;
    height: 100%;
    max-height: 140px;
    object-fit: contain;
    display: block;
  }

  .homepage-page .classroom-card__details {
    display: grid;
    gap: 12px;
    margin-top: 16px;
  }

  .homepage-page .classroom-card__detail {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    color: #18265f;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(157, 176, 220, 0.42);
    box-shadow: 0 8px 18px rgba(77, 96, 143, 0.12);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 800;
  }

  .homepage-page .classroom-card__detail i {
    color: var(--classroom-card-color);
    font-size: 18px;
  }

  .homepage-page .classroom-card__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    color: #ffffff;
    background: #1fb45b;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
  }

  .homepage-page .classroom-card__locked {
    background: #f6a500;
  }

  @media (max-width: 991.98px) {
    .homepage-page .classroom-card {
      min-height: 250px;
    }
    .homepage-page .home-banner {
    margin-top: 84px !important;
}
  }

  @media (max-width: 575.98px) {
    .homepage-page .classroom-category-grid {
      row-gap: 24px;
      margin-top:40px !important;
    }

    .homepage-page .classroom-card {
      max-width: 360px;
      min-height: 240px;
      margin: 0 auto;
      padding: 40px 18px 18px;
    }

    .homepage-page .classroom-card__title {
      font-size: 17px;
    }

    .homepage-page .classroom-card__poster {
      min-height: 150px;
    }

    .homepage-page .classroom-card__poster img {
      max-height: 140px;
    }

    .homepage-page .classroom-card__detail {
      font-size: 12px;
    }
  }


  .homepage-page .practice-category-card {
    --practice-color: #ef315d;
    --practice-bg: #fff7fa;
    --practice-orb-core: rgba(239, 49, 93, 0.14);
    --practice-orb: rgba(239, 49, 93, 0.06);
    --practice-border-hover: rgba(239, 49, 93, 0.22);
    position: relative;
    display: flex;
    min-height: 210px;
    width: 100%;
    padding: 14px 13px;
    color: #111b3f;
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid rgba(207, 216, 232, 0.78);
    background:
      radial-gradient(circle at calc(100% - 42px) 0, var(--practice-orb-core) 0%, var(--practice-orb) 30%, rgba(255, 255, 255, 0) 66%),
      linear-gradient(145deg, #ffffff 0%, var(--practice-bg) 100%);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .homepage-page .practice-category-card:hover {
    color: #111b3f;
    text-decoration: none;
    transform: translateY(-1px);
    border-color: var(--practice-border-hover);
    box-shadow: 0 8px 18px rgba(44, 58, 94, 0.08);
  }


  .homepage-page .practice-category-card__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .homepage-page .practice-category-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
  }

  .homepage-page .practice-category-card__icon,
  .homepage-page .practice-category-card__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }

  .homepage-page .practice-category-card__icon {
    width: 48px;
    height: 48px;
    color: #ffffff;
    background: var(--practice-color);
    box-shadow: 0 6px 12px rgba(33, 48, 86, 0.08);
  }

  .homepage-page .practice-category-card__icon i {
    font-size: 20px;
  }

  .homepage-page .practice-category-card__arrow {
    width: 32px;
    height: 32px;
    color: #6b7893;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 4px 10px rgba(63, 77, 112, 0.07);
  }

  .homepage-page .practice-category-card__title {
    min-height: 42px;
    margin: 0 0 8px;
    color: #111b3f;
    font-size: 17px;
    line-height: 1.2;
    font-weight:700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .homepage-page .practice-category-card__meta {
    margin: 0 0 14px;
    color: #6f7d97;
    font-size: 15px;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .homepage-page .practice-category-card__chips {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    min-height: 96px;
    margin-bottom: 10px;
  }

  .homepage-page .practice-category-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 20px;
    max-width: 100%;
    padding: 3px 8px;
    border-radius: 999px;
    color: #59677f;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(196, 207, 225, 0.9);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 500;
  }

  .homepage-page .practice-category-card__chip i {
    color: var(--practice-color);
    font-size: 10px;
  }

  .homepage-page .practice-category-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin-top: auto;
    padding: 8px 14px;
    border-radius: 8px;
    color: var(--practice-color);
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(203, 213, 230, 0.9);
    box-shadow: 0 4px 10px rgba(45, 56, 86, 0.05);
    font-size: 13px;
    font-weight: 600;
  }

  .homepage-page .practice-category-card--blue {
    --practice-color: #2f75f6;
    --practice-bg: #f4f8ff;
    --practice-orb-core: rgba(47, 117, 246, 0.14);
    --practice-orb: rgba(47, 117, 246, 0.07);
    --practice-border-hover: rgba(47, 117, 246, 0.22);
  }

  .homepage-page .practice-category-card--green {
    --practice-color: #1fb45b;
    --practice-bg: #f1fff7;
    --practice-orb-core: rgba(31, 180, 91, 0.14);
    --practice-orb: rgba(31, 180, 91, 0.07);
    --practice-border-hover: rgba(31, 180, 91, 0.22);
  }

  .homepage-page .practice-category-card--yellow {
    --practice-color: #f6a500;
    --practice-bg: #fff9ed;
    --practice-orb-core: rgba(246, 165, 0, 0.14);
    --practice-orb: rgba(246, 165, 0, 0.08);
    --practice-border-hover: rgba(246, 165, 0, 0.24);
  }

  .homepage-page .practice-category-card--purple {
    --practice-color: #8057ed;
    --practice-bg: #fbf7ff;
    --practice-orb-core: rgba(128, 87, 237, 0.14);
    --practice-orb: rgba(128, 87, 237, 0.08);
    --practice-border-hover: rgba(128, 87, 237, 0.22);
  }

  @media (max-width: 1199.98px) {
    .homepage-page .practice-category-card {
      min-height: 210px;
    }
  }

  @media (max-width: 767.98px) {
    .homepage-page .practice-category-card {
      min-height: 210px;
    }
  }

  @media (max-width: 575.98px) {
    .homepage-page .practice-category-card {
      max-width: 360px;
      min-height: 210px;
      margin: 0 auto;
    }

    .homepage-page .practice-category-card__chips {
      min-height: 0;
    }
  }
  .homepage-page .top-achievers-section {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 14% 18%, rgba(45, 126, 255, 0.12) 0%, rgba(45, 126, 255, 0) 28%),
      radial-gradient(circle at 84% 8%, rgba(255, 181, 35, 0.16) 0%, rgba(255, 181, 35, 0) 30%),
      linear-gradient(180deg, #f8fbff 0%, #eef5ff 52%, #ffffff 100%) !important;
  }

  .homepage-page .top-achievers-section .card-body {
    position: relative;
    z-index: 1;
  }

  .homepage-page .top-achievers-section .faculty-carousel {
    padding: 14px 0;
  }

  .homepage-page .top-achievers-section .faculty-carousel .owl-stage-outer {
    overflow: hidden;
  }

  .homepage-page .top-achievers-section .faculty-carousel .owl-stage {
    display: flex;
    align-items: stretch;
    padding: 40px 0 34px;
  }

  .homepage-page .top-achievers-section .faculty-carousel .owl-item {
    display: flex;
    opacity: 0.52;
    transform: scale(0.84);
    transform-origin: center center;
    transition: transform 0.35s ease, opacity 0.35s ease, filter 0.35s ease;
    filter: saturate(0.84);
    z-index: 1;
  }

  .homepage-page .top-achievers-section .faculty-carousel .owl-item.active {
    opacity: 0.78;
    transform: scale(0.9);
  }

  .homepage-page .top-achievers-section .faculty-carousel .owl-item.center {
    opacity: 1;
    transform: scale(1.1);
    filter: saturate(1);
    z-index: 5;
  }

  .homepage-page .top-achievers-section .faculty-carousel .item {
    width: 220px;
    display: flex;
    padding:0px !important;
    margin: 0 !important;
  }

  .homepage-page .achiever-card {
    position: relative;
    isolation: isolate;
    width: 220px;
    min-height: 270px;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid rgba(215, 226, 244, 0.95);
    background:
      radial-gradient(circle at 50% 0, rgba(36, 91, 255, 0.08) 0%, rgba(36, 91, 255, 0) 42%),
      linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 14px 30px rgba(20, 35, 70, 0.07);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  }

  .homepage-page .achiever-card::before {
    content: "";
    position: absolute;
    inset: 0 22px auto;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, rgba(36, 91, 255, 0), rgba(36, 91, 255, 0.85), rgba(36, 91, 255, 0));
    opacity: 0.55;
    z-index: 0;
  }

  .homepage-page .achiever-card > * {
    position: relative;
    z-index: 1;
  }

  .homepage-page .top-achievers-section .faculty-carousel .owl-item.center .achiever-card {
    border-color: rgba(255, 181, 35, 0.9);
    box-shadow: 0 0 0 1px rgba(255, 194, 71, 0.28), 0 22px 42px rgba(255, 178, 34, 0.18);
    transform: translateY(-6px);
  }

  .homepage-page .top-achievers-section .faculty-carousel .owl-item.center .achiever-card::before {
    background: linear-gradient(90deg, rgba(255, 181, 35, 0), rgba(255, 181, 35, 0.95), rgba(255, 181, 35, 0));
    opacity: 0.85;
  }

  .homepage-page .achiever-card__photo {
    width: 100%;
    height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .homepage-page .achiever-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .homepage-page .achiever-card__rank {
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    padding: 0;
    border-radius: 0;
    color: #10245a;
    background: transparent;
    border: 0;
    box-shadow: none;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    overflow: hidden;
  }

  .homepage-page .achiever-card__rank strong {
    max-width: 116px;
    color: #245bff;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .homepage-page .achiever-card__rank-label {
    color: #71809b;
    letter-spacing: 0.08em;
  }

  .homepage-page .top-achievers-section .faculty-carousel .owl-item.center .achiever-card__rank {
    color: #9c6a00;
  }

  .homepage-page .top-achievers-section .faculty-carousel .owl-item.center .achiever-card__rank strong {
    color: #d88a00;
  }

  .homepage-page .top-achievers-section .faculty-carousel .owl-item.center .achiever-card__rank-label {
    color: #9c6a00;
  }

  .homepage-page .achiever-card__name {
    width: 100%;
    margin: 10px 0 8px;
    color: #0f1d45;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 800;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .homepage-page .achiever-card__designation {
    font-size: 12px;
    }

  .homepage-page .achiever-card__designation i {
    color: #245bff;
    font-size: 11px;
  }

  .homepage-page .achiever-card__footer {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    color: #8fb7ff;
    font-size: 9px;
  }

  .homepage-page .achiever-card__footer::before,
  .homepage-page .achiever-card__footer::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #e8eff8;
  }

  .homepage-page .top-achievers-section .owl-theme .owl-dots {
    margin-top: 0;
  }

  .homepage-page .top-achievers-section .owl-theme .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    margin: 4px 5px;
    background: #dce4f2;
  }

  .homepage-page .top-achievers-section .owl-theme .owl-dots .owl-dot.active span {
    width: 9px;
    background: #2f75f6;
  }

  @media (max-width: 575.98px) {
    .homepage-page .top-achievers-section .faculty-carousel {
      padding-left: 0;
      padding-right: 0;
    }

    .homepage-page .top-achievers-section .faculty-carousel .owl-stage {
      padding-top: 18px;
      padding-bottom: 24px;
    }

    .homepage-page .top-achievers-section .faculty-carousel .owl-item,
    .homepage-page .top-achievers-section .faculty-carousel .owl-item.active {
      opacity: 0.72;
      transform: scale(0.9);
    }

    .homepage-page .top-achievers-section .faculty-carousel .owl-item.center {
      opacity: 1;
      transform: scale(1.05);
    }

    .homepage-page .achiever-card {
      width: 100%;
      min-height: 248px;
      margin-left: 0;
      margin-right: 0;
    }
  }

  .homepage-page .home-stats-section {
    margin-top: 0;
    padding: 0;
    position: relative;
    z-index: 1;
    background: #ffffff;
  }

  .homepage-page .home-stats-section--below-achievers {
    margin-top: 0;
    padding: 0;
    background:
      radial-gradient(circle at 12% 18%, rgba(36, 91, 255, 0.11) 0%, rgba(36, 91, 255, 0) 30%),
      radial-gradient(circle at 88% 16%, rgba(255, 181, 35, 0.14) 0%, rgba(255, 181, 35, 0) 28%),
      linear-gradient(180deg, #ffffff 0%, #f6f9ff 54%, #ffffff 100%) !important;
  }

  .homepage-page .home-stats-section--below-achievers .card-body {
    position: relative;
    z-index: 1;
  }

  .homepage-page .home-subscriptions {
    position: relative;
    margin-bottom: 34px;
  }

  .homepage-page .home-subscriptions .section-title-ui {
    margin-bottom: 22px;
  }

  .homepage-page .home-subscription-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top:36px;
  }

  .homepage-page .home-subscription-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px 18px;
    border-radius: 8px;
    border: 1px solid #dbe7fb;
    background:
      radial-gradient(circle at 100% 0, rgba(36, 91, 255, 0.12) 0%, rgba(36, 91, 255, 0) 38%),
      linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 14px 30px rgba(18, 44, 96, 0.07);
    overflow: hidden;
  }

  .homepage-page .home-subscription-card::before {
    content: "";
    position: absolute;
    inset: 0 22px auto;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, rgba(36, 91, 255, 0), rgba(36, 91, 255, 0.9), rgba(36, 91, 255, 0));
  }

  .homepage-page .home-subscription-card > * {
    position: relative;
    z-index: 1;
  }

  .homepage-page .home-subscription-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 15px;
  }

  .homepage-page .home-subscription-card__icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #245bff 0%, #6e45ff 100%);
    box-shadow: 0 10px 22px rgba(36, 91, 255, 0.24);
    font-size: 17px;
  }

  .homepage-page .home-subscription-card__title {
    margin: 0;
    color: #07143c;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
  }

  .homepage-page .home-subscription-card__subtitle {
    display: block;
    margin-top: 6px;
    color: #667795;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
  }

  .homepage-page .home-subscription-card__price {
    margin: 0 0 15px;
    color: #07143c;
    font-size: 26px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
  }

  .homepage-page .home-subscription-card__features {
    display: grid;
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
  }

  .homepage-page .home-subscription-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #43536f;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
  }

  .homepage-page .home-subscription-card__features i {
    margin-top: 3px;
    color: #245bff;
    font-size: 13px;
  }

  .homepage-page .home-subscription-card__more {
    color: #8190aa;
    letter-spacing: 0.16em;
    font-weight: 800;
  }

  .homepage-page .home-subscription-card__btn {
    width: fit-content;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
    padding: 0 18px;
    border-radius: 8px;
    color: #ffffff !important;
    background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%);
    box-shadow: 0 12px 24px rgba(36, 91, 255, 0.22);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .homepage-page .home-subscription-card__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(36, 91, 255, 0.28);
  }

  .homepage-page .home-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }

  .homepage-page .home-stat-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 16px;
    text-align: left;
    border-radius: 8px;
    border: 1px solid #d9e4f5;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(18, 44, 96, 0.06);
  }

  .homepage-page .home-stat-card__icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5b82f2;
    font-size: 26px;
    border-radius: 8px;
    background: linear-gradient(180deg, #f5f8ff 0%, #edf3ff 100%);
  }

  .homepage-page .home-stat-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .homepage-page .home-stat-card__value {
    margin: 0;
    color: #12357b;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 700;
  }

  .homepage-page .home-stat-card__label {
    margin: 0;
    color: #5f7297;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
  }

  @media (max-width: 991.98px) {
    .homepage-page .home-subscription-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .homepage-page .home-stats-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 575.98px) {
    .homepage-page .home-stats-section {
      margin-top: 0;
      padding-top: 0;
    }

    .homepage-page .home-subscriptions {
      margin-bottom: 26px;
    }

    .homepage-page .home-subscription-grid {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .homepage-page .home-subscription-card {
      padding: 20px;
    }

    .homepage-page .home-stats-grid {
      gap: 10px;
      padding: 0;
      border-radius: 0;
    }

    .homepage-page .home-stat-card {
      min-height: 80px;
      padding: 8px 22px;
      border-radius: 8px;
    }

    .homepage-page .home-stat-card__icon {
      width: 38px;
      height: 38px;
      flex-basis: 38px;
      font-size: 20px;
    }
  }

 .leaderboard-page-ui {
        position: relative;
    }

    .leaderboard-page-ui .leaderboard-showcase {
        border: 0;
        background: #ffffff;
    }

    .leaderboard-page-ui .leaderboard-showcase .card-body {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .leaderboard-page-ui .section-title-ui {
        width: 100%;
        max-width: 760px;
        margin: 0 auto 50px;
        padding: 8px 16px 0;
        text-align: center;
    }

    .leaderboard-page-ui .section-title-ui__title {
        margin: 0;
        color: #07143c;
        font-size: 36px;
        line-height: 1.12;
        font-weight: 800;
    }

    .leaderboard-page-ui .section-title-ui__accent {
        color: #245bff;
    }

    .leaderboard-page-ui .section-title-ui__subtitle {
        margin: 8px auto 0;
        max-width: 560px;
        color: #6d7791;
        font-size: 14px;
        line-height: 1.55;
    }

    .leaderboard-page-ui .section-title-ui__bar {
        width: 170px;
        height: 2px;
        margin: 12px auto 0;
        border-radius: 999px;
        background: linear-gradient(to right, transparent, #245bff, transparent);
    }

    .leaderboard-page-ui .leaderboard-subtitle {
        margin: 0 0 26px;
        color: #07143c;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 800;
        text-align: center;
    }

    .leaderboard-page-ui .leaderboard-podium {
        align-items: end;
        row-gap: 24px;
    }

    .leaderboard-page-ui .rank-card {
        margin: 0;
    }

    .leaderboard-page-ui .rank-card__panel {
        position: relative;
        min-height: 320px;
        padding: 26px 22px 22px;
        border-radius: 8px;
        border: 1px solid rgba(214, 226, 244, 0.95);
        background: #ffffff;
        box-shadow: 0 18px 38px rgba(19, 40, 72, 0.09);
        text-align: center;
        overflow: hidden;
    }

    .leaderboard-page-ui .rank-card__panel::after {
        content: "";
        position: absolute;
        top: -54px;
        right: -44px;
        width: 140px;
        height: 140px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(36, 91, 255, 0.10) 0%, rgba(36, 91, 255, 0) 70%);
        pointer-events: none;
    }

    .leaderboard-page-ui .rank-card__panel--rank-1 {
        min-height: 350px;
        background: linear-gradient(180deg, #fff6f8 0%, #ffffff 100%);
        border-color: rgba(240, 50, 124, 0.16);
        transform: translateY(-18px);
    }

    .leaderboard-page-ui .rank-card__panel--rank-2 {
        background: linear-gradient(180deg, #f1fff7 0%, #ffffff 100%);
        border-color: rgba(31, 180, 91, 0.16);
    }

    .leaderboard-page-ui .rank-card__panel--rank-3 {
        background: linear-gradient(180deg, #f7f4ff 0%, #ffffff 100%);
        border-color: rgba(123, 77, 255, 0.16);
    }

    .leaderboard-page-ui .candidate-image {
        width: 132px;
        height: 132px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 10px;
        border: 4px solid rgba(255, 255, 255, 0.95);
        box-shadow: 0 16px 30px rgba(19, 40, 72, 0.16);
    }

    .leaderboard-page-ui .rank-card__badge {
        width: 52px;
        height: 52px;
        margin: -30px auto 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 12px 26px rgba(19, 40, 72, 0.15);
    }

    .leaderboard-page-ui .rank-card__badge img {
        width: 42px;
        height: 42px;
        object-fit: contain;
    }

    .leaderboard-page-ui .card-title {
        margin-bottom: 8px;
        color: #07143c;
        font-size: 18px;
        font-weight: 800;
    }

    .leaderboard-page-ui .card-text {
        margin-bottom: 4px;
        color: #51617b;
        font-size: 14px;
        line-height: 1.45;
        font-weight: 600;
    }

    .leaderboard-page-ui .card-text:last-child {
        margin-bottom: 0;
        color: #6d7791;
        font-weight: 500;
    }

    .leaderboard-page-ui .leaderboard-table-wrap {
        overflow-x: auto;
        border-radius: 10px;
        border: 1px solid #dce7f8;
        background: #ffffff;
        box-shadow: 0 18px 34px rgba(18, 44, 96, 0.07);
    }

    .leaderboard-page-ui .leaderboard-table {
        margin: 0;
        background: #ffffff;
    }

    .leaderboard-page-ui .leaderboard-table thead th {
        padding: 16px 18px;
        border: 0;
        border-bottom: 1px solid #dce7f8;
        color: #07143c;
        background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
        font-size: 14px;
        font-weight: 800;
        white-space: nowrap;
    }

    .leaderboard-page-ui .leaderboard-table tbody td {
        padding: 15px 18px;
        border-color: #eaf0fa;
        color: #4f5f7a;
        font-size: 14px;
        font-weight: 600;
        vertical-align: middle;
    }

    .leaderboard-page-ui .leaderboard-table tbody tr:nth-child(even) {
        background: #fbfdff;
    }

    .leaderboard-page-ui .leaderboard-table tbody tr:hover {
        background: #f5f9ff;
    }

    .leaderboard-page-ui .image-cell {
        text-align: center;
    }

    .leaderboard-page-ui .image-cell img {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #ffffff;
        box-shadow: 0 8px 18px rgba(19, 40, 72, 0.14);
    }

    @media only screen and (max-width: 991.98px) {
        .leaderboard-page-ui .rank-card__panel--rank-1 {
            transform: none;
        }
    }

    @media only screen and (max-width: 767.98px) {
        .leaderboard-page-ui .leaderboard-showcase .card-body {
            padding-top: 34px;
            padding-bottom: 34px;
        }

        .leaderboard-page-ui .section-title-ui {
            margin-bottom: 24px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .leaderboard-page-ui .section-title-ui__title {
            font-size: 28px;
        }

        .leaderboard-page-ui .section-title-ui__subtitle {
            font-size: 13px;
        }

        .leaderboard-page-ui .leaderboard-subtitle {
            font-size: 20px;
            margin-bottom: 20px;
        }

        .leaderboard-page-ui .rank-card__panel {
            min-height: auto;
            padding: 24px 18px 18px;
        }

        .leaderboard-page-ui .candidate-image {
            width: 110px;
            height: 110px;
        }
    }

 .dictation-list-page-ui .section-title-ui {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 50px;
    padding: 8px 16px 0;
    text-align: center;
  }

  .dictation-list-page-ui .section-title-ui__title {
    margin: 0;
    color: #07143c;
    font-size: 36px;
    line-height: 1.12;
    font-weight: 800;
  }

  .dictation-list-page-ui .section-title-ui__accent {
    color: #245bff;
  }

  .dictation-list-page-ui .section-title-ui__subtitle {
    margin: 8px auto 0;
    max-width: 560px;
    color: #6d7791;
    font-size: 14px;
    line-height: 1.55;
  }

  .dictation-list-page-ui .section-title-ui__bar {
    width: 170px;
    height: 2px;
    margin: 12px auto 0;
    border-radius: 999px;
    background: linear-gradient(to right, transparent, #245bff, transparent);
  }

  .dictation-list-page-ui .dictation-list-showcase {
    background: #ffffff;
  }

  .dictation-list-page-ui .dictation-list-showcase .card-body {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .dictation-list-page-ui .dictation-card {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 386px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(214, 226, 244, 0.95);
    color: #52617a;
    background: #ffffff;
    overflow: hidden;
    text-decoration: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .dictation-list-page-ui .dictation-card:hover {
    color: #52617a;
    border-color: rgba(36, 91, 255, 0.45);
    box-shadow: 0 24px 46px rgba(25, 44, 76, 0.17);
    text-decoration: none;
  }

  .dictation-list-page-ui .dictation-card::after {
    content: "";
    position: absolute;
    top: -58px;
    right: -54px;
    width: 150px;
    height: 150px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(36, 91, 255, 0.13) 0%, rgba(36, 91, 255, 0) 68%);
    z-index: 0;
  }

  .dictation-list-page-ui .dictation-card__body-wrap {
    position: relative;
    z-index: 1;
    padding: 24px 22px 0;
  }

  .dictation-list-page-ui .dictation-card__top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid #edf2fa;
  }

  .dictation-list-page-ui .instructor-text {
    margin: 0;
    color: #07143c;
    font-family: inherit;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 800;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .dictation-list-page-ui .dictation-card__body {
    position: relative;
    z-index: 1;
    padding-top: 18px;
  }

  .dictation-list-page-ui .dictation-card__score {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid #a3c3ff;
    color: #243c8b;
    background: #eff3ff;
    box-shadow: 0 8px 18px rgba(246, 147, 52, 0.12);
  }

  .dictation-list-page-ui .dictation-card__score-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
  }

  .dictation-list-page-ui .dictation-card__score-bars span {
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #4a73ff 0%, #18aeff 100%);
  }

  .dictation-list-page-ui .dictation-card__score-bars span:nth-child(1) {
    height: 6px;
  }

  .dictation-list-page-ui .dictation-card__score-bars span:nth-child(2) {
    height: 9px;
  }

  .dictation-list-page-ui .dictation-card__score-bars span:nth-child(3) {
    height: 12px;
  }

  .dictation-list-page-ui .dictation-card__score-bars span:nth-child(4) {
    height: 15px;
  }

  .dictation-list-page-ui .dictation-card__score strong {
    color: #1b1b1b;
    font-size: 15px;
    line-height: 1;
    font-weight: 500;
  }

  .dictation-list-page-ui .dictation-card__score small {
    color: #272727;
    font-size: 14px;
    font-weight: 500;
  }

  .dictation-list-page-ui .dictation-card__progress {
    width: 100%;
    height: 4px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: #e8eef7;
    overflow: hidden;
  }

  .dictation-list-page-ui .dictation-card__progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3e7aff 0%, #1b54ef 100%);
  }

  .dictation-list-page-ui .dictation-card__facts {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dictation-list-page-ui .dictation-card__facts li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #55647b;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
  }

  .dictation-list-page-ui .dictation-card__facts li:not(:first-child) .dictation-card__dot {
    margin-top: 5px;
  }

  .dictation-list-page-ui .dictation-card__content-preview {
    color: #33435c;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 600;
  }

  .dictation-list-page-ui .dictation-card__source {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .dictation-list-page-ui .dictation-card__source-photo {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid #d8e2f0;
  }

  .dictation-list-page-ui .dictation-card__source-name {
    color: #40506a;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
  }

  .dictation-list-page-ui .dictation-card__time {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #40506a;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
  }

  .dictation-list-page-ui .dictation-card__time i {
    color: #74839c;
    font-size: 14px;
  }

  .dictation-list-page-ui .dictation-card__dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    margin-top: 6px;
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.72);
  }

  .dictation-list-page-ui .dictation-card__dot--topic {
    background: #18aaf3;
  }

  .dictation-list-page-ui .dictation-card__dot--words {
    background: #1fc5b3;
  }

  .dictation-list-page-ui .dictation-card__dot--speed {
    background: #ffa51c;
  }

  .dictation-list-page-ui .dictation-card__dot--type {
    background: #f0327c;
  }

  .dictation-list-page-ui .dictation-card__access {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
  }

  .dictation-list-page-ui .dictation-card__access--free {
    color: #096b3b;
    border: 1px solid #68dd9a;
    background: #c9f8dc;
  }

  .dictation-list-page-ui .dictation-card__access--paid {
    color: #8a5a00;
    border: 1px solid #f2bc38;
    background: #ffe292;
  }

  .dictation-list-page-ui .dictation-card__cta {
    position: relative;
    z-index: 1;
    width: calc(100% - 44px);
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 14px 22px 22px;
    border-radius: 8px;
    color: #ffffff !important;
    background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%);
    box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background 0.25s ease, transform 0.25s ease;
  }

  .dictation-list-page-ui .dictation-card:hover .dictation-card__cta {
    background: linear-gradient(100deg, #006fec 0%, #2647ef 52%, #5600d8 100%);
  }

  .dictation-list-page-ui .dictation-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  @media (max-width: 575.98px) {
    .dictation-list-page-ui .section-title-ui {
      margin-bottom: 24px;
      padding-left: 10px;
      padding-right: 10px;
    }

    .dictation-list-page-ui .section-title-ui__title {
      font-size: 28px;
    }

    .dictation-list-page-ui .section-title-ui__subtitle {
      font-size: 13px;
    }

    .dictation-list-page-ui .dictation-list-showcase .card-body {
      padding-top: 34px;
      padding-bottom: 34px;
    }

    .dictation-list-page-ui .dictation-card {
      min-height: auto;
    }

    .dictation-list-page-ui .dictation-card__body-wrap {
      padding: 22px 18px 0;
    }

    .dictation-list-page-ui .instructor-text {
      font-size: 16px;
    }

    .dictation-list-page-ui .dictation-card__cta {
      width: calc(100% - 36px);
      margin: 18px 18px 18px;
    }
  }

 /* =============================================
       Login Page UI Start
    ============================================= */

    .login-page-ui {
        min-height: 100vh;
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at 8% 10%, rgba(36, 91, 255, 0.12) 0%, rgba(36, 91, 255, 0) 30%),
            radial-gradient(circle at 92% 8%, rgba(103, 0, 255, 0.10) 0%, rgba(103, 0, 255, 0) 28%),
            linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
    }

    .login-page-ui::before,
    .login-page-ui::after {
        content: "";
        position: absolute;
        border-radius: 999px;
        pointer-events: none;
    }

    .login-page-ui::before {
        top: -120px;
        right: -100px;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(36, 91, 255, 0.14) 0%, rgba(36, 91, 255, 0) 68%);
    }

    .login-page-ui::after {
        bottom: -140px;
        left: -120px;
        width: 330px;
        height: 330px;
        background: radial-gradient(circle, rgba(24, 174, 255, 0.14) 0%, rgba(24, 174, 255, 0) 68%);
    }

    .login-page-ui .login-auth-shell {
        min-height: 100vh;
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        padding: 34px 0;
    }

    .login-page-ui .login-card {
        position: relative;
        isolation: isolate;
        border: 1px solid rgba(214, 226, 244, 0.95);
        border-radius: 8px;
        background:
            radial-gradient(circle at 100% 0, rgba(36, 91, 255, 0.10) 0%, rgba(36, 91, 255, 0) 32%),
            linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        box-shadow: 0 24px 58px rgba(18, 44, 96, 0.14);
        overflow: hidden;
    }

    .login-page-ui .login-card::after {
        content: "";
        position: absolute;
        top: -58px;
        right: -54px;
        width: 150px;
        height: 150px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(36, 91, 255, 0.13) 0%, rgba(36, 91, 255, 0) 68%);
        z-index: 0;
        pointer-events: none;
    }

    .login-page-ui .login-card .card-body {
        position: relative;
        z-index: 2;
        padding: 34px 30px 30px;
    }

    .login-page-ui .login-header {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 28px;
        padding-bottom: 22px;
        border-bottom: 1px solid #edf2fa;
    }

    .login-page-ui .login-header-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        color: #ffffff;
        background: linear-gradient(135deg, #0679ff 0%, #3454ff 54%, #6700ff 100%);
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
        font-size: 22px;
        font-weight: 800;
    }

    .login-page-ui .login-title {
        margin: 0;
        color: #07143c;
        font-size: 28px;
        line-height: 1.2;
        font-weight: 800;
    }

    .login-page-ui .login-title span {
        color: #245bff;
    }

    .login-page-ui .login-subtitle {
        margin: 6px 0 0;
        color: #6d7791;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 600;
    }

    .login-page-ui #security_login_form {
        margin: 0;
        padding: 0 !important;
    }

    .login-page-ui .form-group {
        margin-bottom: 20px;
    }

    .login-page-ui .form-group label {
        display: block;
        margin-bottom: 8px;
        color: #173562;
        font-size: 13px;
        line-height: 1.2;
        font-weight: 700;
    }

    .login-page-ui .input-affix {
        position: relative;
    }

    .login-page-ui .input-affix .prefix-icon {
        position: absolute;
        top: 50%;
        left: 15px;
        transform: translateY(-50%);
        color: #245bff;
        font-size: 14px;
        z-index: 2;
        pointer-events: none;
    }

    .login-page-ui .form-control {
        width: 100%;
        min-height: 48px;
        border: 1px solid #dbe7fb;
        border-radius: 10px;
        color: #17233f;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 8px 20px rgba(34, 59, 102, 0.05);
        font-size: 14px;
        font-weight: 600;
        padding: 12px 14px 12px 42px;
        transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    }

    .login-page-ui .form-control::placeholder {
        color: #91a0b8;
        font-weight: 500;
    }

    .login-page-ui .form-control:focus {
        border-color: rgba(36, 91, 255, 0.62);
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(36, 91, 255, 0.10);
    }

    .login-page-ui .login-submit-btn {
        width: 100%;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 0 22px;
        border: 0;
        border-radius: 8px;
        color: #ffffff !important;
        background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%) !important;
        box-shadow: 0 14px 28px rgba(36, 91, 255, 0.24);
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
        text-decoration: none !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .login-page-ui .login-submit-btn:hover {
        color: #ffffff !important;
        transform: translateY(-1px);
        box-shadow: 0 16px 30px rgba(36, 91, 255, 0.30);
    }

    .login-page-ui .login-links {
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid #edf2fa;
    }

    .login-page-ui .login-links h6 {
        margin: 10px 0 0;
        color: #6d7791;
        font-size: 13px;
        line-height: 1.5;
        font-weight: 600;
    }

    .login-page-ui .login-links a {
        color: #245bff;
        font-weight: 800;
        text-decoration: none;
    }

    .login-page-ui .login-links a:hover {
        text-decoration: underline;
    }

    @media (max-width: 767.98px) {
        .login-page-ui .login-auth-shell {
            padding: 24px 0;
        }

        .login-page-ui .login-card .card-body {
            padding: 28px 18px 22px;
        }

        .login-page-ui .login-header {
            gap: 12px;
            margin-bottom: 22px;
            padding-bottom: 18px;
        }

        .login-page-ui .login-header-icon {
            width: 40px;
            height: 40px;
            min-width: 40px;
            border-radius: 8px;
            font-size: 18px;
        }

        .login-page-ui .login-title {
            font-size: 20px;
        }

        .login-page-ui .login-subtitle {
            font-size: 12px;
        }

        .login-page-ui .form-control {
            min-height: 46px;
            font-size: 13px;
        }
    }

    /* =============================================
       Login Page UI End
    ============================================= */

/* =============================================
     My Attempts Page UI Start
  ============================================= */

  .my-attempts-page-ui {
    position: relative;
  }

  .my-attempts-page-ui .my-attempts-showcase {
    border: 0;
    background: #ffffff;
  }

  .my-attempts-page-ui .my-attempts-showcase > .card-body {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .my-attempts-page-ui .section-title-ui {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 42px;
    padding: 8px 16px 0;
    text-align: center;
  }

  .my-attempts-page-ui .section-title-ui__title {
    margin: 0;
    color: #07143c;
    font-size: 36px;
    line-height: 1.12;
    font-weight: 800;
  }

  .my-attempts-page-ui .section-title-ui__accent {
    color: #245bff;
  }

  .my-attempts-page-ui .section-title-ui__subtitle {
    margin: 8px auto 0;
    max-width: 600px;
    color: #6d7791;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 500;
  }

  .my-attempts-page-ui .section-title-ui__bar {
    width: 170px;
    height: 2px;
    margin: 12px auto 0;
    border-radius: 999px;
    background: linear-gradient(to right, transparent, #245bff, transparent);
  }

  .my-attempts-page-ui .attempts-card {
    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }


  .my-attempts-page-ui .attempts-card::after {
    content: "";
    position: absolute;
    top: -58px;
    right: -54px;
    width: 150px;
    height: 150px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(36, 91, 255, 0.13) 0%, rgba(36, 91, 255, 0) 68%);
    z-index: 0;
    pointer-events: none;
  }

  .my-attempts-page-ui .attempts-card > .card-body {
    position: relative;
    z-index: 2;
    padding: 0px;
  }

  .my-attempts-page-ui .attempts-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #edf2fa;
  }

  .my-attempts-page-ui .attempts-card-title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
  }

  .my-attempts-page-ui .attempts-card-icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(135deg, #0679ff 0%, #3454ff 54%, #6700ff 100%);
    box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
    font-size: 20px;
  }

  .my-attempts-page-ui .attempts-card-title {
    margin: 0;
    color: #07143c;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
  }

  .my-attempts-page-ui .attempts-card-subtitle {
    margin: 5px 0 0;
    color: #6d7791;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
  }

  .my-attempts-page-ui .attempts-count-pill {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    color: #243c8b;
    border: 1px solid #a3c3ff;
    background: #eff3ff;
    box-shadow: 0 8px 18px rgba(36, 91, 255, 0.10);
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
  }

  .my-attempts-page-ui .attempts-table-wrap {
    border: 1px solid #edf2fa;
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(18, 44, 96, 0.04);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .my-attempts-page-ui .table {
    margin-bottom: 0;
    color: #52617a;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1220px;
  }

  .my-attempts-page-ui .table thead th {
    padding: 16px 14px;
    border: 0;
    border-bottom: 1px solid #edf2fa;
    color: #173562;
    background: #f8fbff;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  .my-attempts-page-ui .table tbody th,
  .my-attempts-page-ui .table tbody td {
    padding: 16px 14px;
    border-top: 0;
    border-bottom: 1px solid #edf2fa;
    color: #52617a;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
    vertical-align: middle;
    white-space: nowrap;
  }

  .my-attempts-page-ui .table tbody tr:last-child th,
  .my-attempts-page-ui .table tbody tr:last-child td {
    border-bottom: 0;
  }

  .my-attempts-page-ui .table tbody tr {
    transition: background 0.22s ease;
  }

  .my-attempts-page-ui .table tbody tr:hover {
    background: #f8fbff;
  }

  .my-attempts-page-ui .attempt-sr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
  }

  .my-attempts-page-ui .attempt-category {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    color: #353535;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
  }

  .my-attempts-page-ui .attempt-title {
    color: #07143c;
    font-weight: 700;
  }

  .my-attempts-page-ui .attempt-wpm-box {
    display: grid;
    gap: 5px;
  }

  .my-attempts-page-ui .attempt-wpm-line {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #40506a;
    font-size: 13px;
    font-weight: 700;
  }

  .my-attempts-page-ui .attempt-wpm-line i {
    color: #245bff;
    font-size: 13px;
  }

  .my-attempts-page-ui .attempt-metric {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    color: #40506a;
    background: #f8fbff;
    border: 1px solid #dbe7fb;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
  }

  .my-attempts-page-ui .attempt-metric--danger {
    color: #9f1239;
    border-color: #fda4af;
    background: #ffe4e6;
  }

  .my-attempts-page-ui .attempt-metric--warning {
    color: #8a5a00;
    border-color: #f2bc38;
    background: #ffe292;
  }

  .my-attempts-page-ui .attempt-metric--success {
    color: #096b3b;
    border-color: #68dd9a;
    background: #c9f8dc;
  }

  .my-attempts-page-ui .attempt-metric--blue {
    color: #243c8b;
    border-color: #a3c3ff;
    background: #eff3ff;
  }

  .my-attempts-page-ui .attempt-date {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #40506a;
    font-size: 13px;
    font-weight: 700;
  }

  .my-attempts-page-ui .attempt-date i {
    color: #245bff;
  }

  .my-attempts-page-ui .attempt-pdf-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #ffffff !important;
    background: linear-gradient(135deg, #ef4444 0%, #be123c 100%);
    box-shadow: 0 10px 22px rgba(190, 18, 60, 0.20);
    font-size: 15px;
    text-decoration: none !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
  }

  .my-attempts-page-ui .attempt-pdf-btn:hover {
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(190, 18, 60, 0.28);
  }

  @media (max-width: 767.98px) {
    .my-attempts-page-ui .my-attempts-showcase > .card-body {
      padding-top: 34px;
      padding-bottom: 34px;
    }

    .my-attempts-page-ui .section-title-ui {
      margin-bottom: 24px;
      padding-left: 10px;
      padding-right: 10px;
    }

    .my-attempts-page-ui .section-title-ui__title {
      font-size: 28px;
    }

    .my-attempts-page-ui .section-title-ui__subtitle {
      font-size: 13px;
    }

    .my-attempts-page-ui .attempts-card > .card-body {
      padding: 28px 18px 22px;
    }

    .my-attempts-page-ui .attempts-card-header {
      align-items: flex-start;
      flex-direction: column;
      gap: 14px;
    }

    .my-attempts-page-ui .attempts-card-icon {
      width: 48px;
      height: 48px;
      min-width: 48px;
      border-radius: 12px;
      font-size: 18px;
    }

    .my-attempts-page-ui .attempts-card-title {
      font-size: 19px;
    }

    .my-attempts-page-ui .attempts-card-subtitle {
      font-size: 12px;
    }

    .my-attempts-page-ui .table thead th,
    .my-attempts-page-ui .table tbody th,
    .my-attempts-page-ui .table tbody td {
      padding: 14px 12px;
      font-size: 13px;
    }
  }

  /* =============================================
     My Attempts Page UI End
  ============================================= */


 /* =============================================
       My Orders Page UI Start
    ============================================= */

    .my-orders-page-ui {
        position: relative;
    }

    .my-orders-page-ui .my-orders-showcase {
        border: 0;
        background: #ffffff;
    }

    .my-orders-page-ui .my-orders-showcase > .card-body {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .my-orders-page-ui .section-title-ui {
        width: 100%;
        max-width: 760px;
        margin: 0 auto 42px;
        padding: 8px 16px 0;
        text-align: center;
    }

    .my-orders-page-ui .section-title-ui__title {
        margin: 0;
        color: #07143c;
        font-size: 36px;
        line-height: 1.12;
        font-weight: 800;
    }

    .my-orders-page-ui .section-title-ui__accent {
        color: #245bff;
    }

    .my-orders-page-ui .section-title-ui__subtitle {
        margin: 8px auto 0;
        max-width: 580px;
        color: #6d7791;
        font-size: 14px;
        line-height: 1.55;
        font-weight: 500;
    }

    .my-orders-page-ui .section-title-ui__bar {
        width: 170px;
        height: 2px;
        margin: 12px auto 0;
        border-radius: 999px;
        background: linear-gradient(to right, transparent, #245bff, transparent);
    }

    .my-orders-page-ui .orders-card {
        position: relative;
        isolation: isolate;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }



    .my-orders-page-ui .orders-card > .card-body {
        position: relative;
        z-index: 2;
        padding: 0px;
    }

    .my-orders-page-ui .orders-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 24px;
        padding-bottom: 20px;
        border-bottom: 1px solid #edf2fa;
    }

    .my-orders-page-ui .orders-card-title-wrap {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
    }

    .my-orders-page-ui .orders-card-icon {
        width: 54px;
        height: 54px;
        min-width: 54px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: #ffffff;
        background: linear-gradient(135deg, #0679ff 0%, #3454ff 54%, #6700ff 100%);
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
        font-size: 20px;
    }

    .my-orders-page-ui .orders-card-title {
        margin: 0;
        color: #07143c;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 800;
    }

    .my-orders-page-ui .orders-card-subtitle {
        margin: 5px 0 0;
        color: #6d7791;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 600;
    }

    .my-orders-page-ui .orders-count-pill {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 13px;
        border-radius: 999px;
        color: #243c8b;
        border: 1px solid #a3c3ff;
        background: #eff3ff;
        box-shadow: 0 8px 18px rgba(36, 91, 255, 0.10);
        font-size: 12px;
        line-height: 1;
        font-weight: 800;
        white-space: nowrap;
    }

    .my-orders-page-ui .orders-table-wrap {
        border: 1px solid #edf2fa;
        border-radius: 8px;
        overflow: hidden;
        background: #ffffff;
        box-shadow: 0 10px 24px rgba(18, 44, 96, 0.04);
    }

    .my-orders-page-ui .table {
        margin-bottom: 0;
        color: #52617a;
        border-collapse: separate;
        border-spacing: 0;
    }

    .my-orders-page-ui .table thead th {
        padding: 16px 14px;
        border: 0;
        border-bottom: 1px solid #edf2fa;
        color: #173562;
        background: #f8fbff;
        font-size: 12px;
        line-height: 1.25;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    .my-orders-page-ui .table tbody th,
    .my-orders-page-ui .table tbody td {
        padding: 16px 14px;
        border-top: 0;
        border-bottom: 1px solid #edf2fa;
        color: #52617a;
        font-size: 14px;
        line-height: 1.35;
        font-weight: 600;
        vertical-align: middle;
        white-space: nowrap;
    }

    .my-orders-page-ui .table tbody tr:last-child th,
    .my-orders-page-ui .table tbody tr:last-child td {
        border-bottom: 0;
    }

    .my-orders-page-ui .table tbody tr {
        transition: background 0.22s ease;
    }

    .my-orders-page-ui .table tbody tr:hover {
        background: #f8fbff;
    }

    .my-orders-page-ui .order-sr {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
    }

    .table td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

    .my-orders-page-ui .order-id {
        color: #07143c;
        font-weight: 700;
    }

    .my-orders-page-ui .order-date {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: #40506a;
        font-size: 13px;
        font-weight: 700;
    }

    .my-orders-page-ui .order-date i {
        color: #245bff;
        font-size: 13px;
    }

    .my-orders-page-ui .order-plan {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 13px;
        color:#40506a;
        line-height: 1;
        font-weight: 700;
    }

    .my-orders-page-ui .order-amount {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 28px;
        padding: 5px 11px;
        border-radius: 999px;
        color: #096b3b;
        border: 1px solid #68dd9a;
        background: #c9f8dc;
        font-size: 12px;
        line-height: 1;
        font-weight: 800;
    }

    .my-orders-page-ui .order-status {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 28px;
        padding: 5px 11px;
        border-radius: 999px;
        font-size: 12px;
        line-height: 1;
        font-weight: 800;
        white-space: nowrap;
    }

    .my-orders-page-ui .order-status--pending {
        color: #243c8b;
        border: 1px solid #a3c3ff;
        background: #eff3ff;
    }

    .my-orders-page-ui .order-status--review {
        color: #8a5a00;
        border: 1px solid #f2bc38;
        background: #ffe292;
    }

    .my-orders-page-ui .order-status--success {
        color: #096b3b;
        border: 1px solid #68dd9a;
        background: #c9f8dc;
    }

    .my-orders-page-ui .order-status--rejected,
    .my-orders-page-ui .order-status--cancelled {
        color: #9f1239;
        border: 1px solid #fda4af;
        background: #ffe4e6;
    }

    .my-orders-page-ui .order-action-btn {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 14px;
        border: 0;
        border-radius: 8px;
        color: #ffffff !important;
        font-size: 13px;
        line-height: 1;
        font-weight: 700;
        text-decoration: none !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .my-orders-page-ui .order-action-btn--pay {
        background: linear-gradient(135deg, #ef4444 0%, #be123c 100%) !important;
        box-shadow: 0 10px 22px rgba(190, 18, 60, 0.20);
    }

    .my-orders-page-ui .order-action-btn--view {
        background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%) !important;
        box-shadow: 0 10px 22px rgba(36, 91, 255, 0.20);
    }

    .my-orders-page-ui .order-action-btn:hover {
        color: #ffffff !important;
        transform: translateY(-1px);
    }

    .my-orders-page-ui .orders-empty {
        padding: 42px 20px;
        text-align: center;
    }

    .my-orders-page-ui .orders-empty img {
        max-height: 200px;
        width: auto;
    }

    @media (max-width: 991.98px) {
        .my-orders-page-ui .orders-table-wrap {
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
        }

        .my-orders-page-ui .orders-table-wrap .table {
            min-width: 760px;
        }
    }

    @media (max-width: 767.98px) {
        .my-orders-page-ui .my-orders-showcase > .card-body {
            padding-top: 34px;
            padding-bottom: 34px;
        }

        .my-orders-page-ui .section-title-ui {
            margin-bottom: 24px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .my-orders-page-ui .section-title-ui__title {
            font-size: 28px;
        }

        .my-orders-page-ui .section-title-ui__subtitle {
            font-size: 13px;
        }


        .my-orders-page-ui .orders-card-header {
            align-items: flex-start;
            flex-direction: column;
            gap: 14px;
        }

        .my-orders-page-ui .orders-card-icon {
            width: 48px;
            height: 48px;
            min-width: 48px;
            border-radius: 12px;
            font-size: 18px;
        }

        .my-orders-page-ui .orders-card-title {
            font-size: 19px;
        }

        .my-orders-page-ui .orders-card-subtitle {
            font-size: 12px;
        }

        .my-orders-page-ui .table thead th,
        .my-orders-page-ui .table tbody th,
        .my-orders-page-ui .table tbody td {
            padding: 14px 12px;
            font-size: 13px;
        }
    }

    /* =============================================
       My Orders Page UI End
    ============================================= */

/* =============================================
       Transactions Page UI Start
    ============================================= */

.transactions-page-ui {
    position: relative;
}

.transactions-page-ui .transactions-showcase {
    border: 0;
    background: #ffffff;
}

.transactions-page-ui .transactions-showcase>.card-body {
    padding-top: 48px;
    padding-bottom: 48px;
}

.transactions-page-ui .section-title-ui {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 42px;
    padding: 8px 16px 0;
    text-align: center;
}

.transactions-page-ui .section-title-ui__title {
    margin: 0;
    color: #07143c;
    font-size: 36px;
    line-height: 1.12;
    font-weight: 800;
}

.transactions-page-ui .section-title-ui__accent {
    color: #245bff;
}

.transactions-page-ui .section-title-ui__subtitle {
    margin: 8px auto 0;
    max-width: 580px;
    color: #6d7791;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 500;
}

.transactions-page-ui .section-title-ui__bar {
    width: 170px;
    height: 2px;
    margin: 12px auto 0;
    border-radius: 999px;
    background: linear-gradient(to right, transparent, #245bff, transparent);
}

.transactions-page-ui .transactions-card {
    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.transactions-page-ui .transactions-card>.card-body {
    position: relative;
    z-index: 2;
    padding: 30px;
}

.transactions-page-ui .transactions-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #edf2fa;
}

.transactions-page-ui .transactions-card-title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.transactions-page-ui .transactions-card-icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(135deg, #0679ff 0%, #3454ff 54%, #6700ff 100%);
    box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
    font-size: 20px;
}

.transactions-page-ui .transactions-card-title {
    margin: 0;
    color: #07143c;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
}

.transactions-page-ui .transactions-card-subtitle {
    margin: 5px 0 0;
    color: #6d7791;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
}

.transactions-page-ui .transactions-count-pill {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    color: #243c8b;
    border: 1px solid #a3c3ff;
    background: #eff3ff;
    box-shadow: 0 8px 18px rgba(36, 91, 255, 0.10);
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
}

.transactions-page-ui .transactions-table-wrap {
    border: 1px solid #edf2fa;
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(18, 44, 96, 0.04);
    -webkit-overflow-scrolling: touch;
}

.transactions-page-ui .table {
    min-width: 760px;
    margin-bottom: 0;
    color: #52617a;
    border-collapse: separate;
    border-spacing: 0;
}

.transactions-page-ui .table thead th {
    padding: 16px 14px;
    border: 0;
    border-bottom: 1px solid #edf2fa;
    color: #173562;
    background: #f8fbff;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.transactions-page-ui .table tbody th,
.transactions-page-ui .table tbody td {
    padding: 16px 14px;
    border-top: 0;
    border-bottom: 1px solid #edf2fa;
    color: #52617a;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
    vertical-align: middle;
    white-space: nowrap;
}

.transactions-page-ui .table tbody tr:last-child th,
.transactions-page-ui .table tbody tr:last-child td {
    border-bottom: 0;
}

.transactions-page-ui .table tbody tr {
    transition: background 0.22s ease;
}

.transactions-page-ui .table tbody tr:hover {
    background: #f8fbff;
}

.transactions-page-ui .transactions-sr {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #245bff;
    background: #eff3ff;
    border: 1px solid #dbe7fb;
    font-size: 13px;
    font-weight: 800;
}

.transactions-page-ui .transactions-order-id {
    color: #07143c;
    font-weight: 800;
}

.transactions-page-ui .transactions-type {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
}

.transactions-page-ui .transactions-type--credit {
    color: #096b3b;
    border: 1px solid #68dd9a;
    background: #c9f8dc;
}

.transactions-page-ui .transactions-type--debit {
    color: #8a5a00;
    border: 1px solid #f2bc38;
    background: #ffe292;
}

.transactions-page-ui .transactions-amount {
    color: #07143c;
    font-weight: 800;
}

.transactions-page-ui .transactions-mode {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 5px 11px;
    border-radius: 999px;
    color: #40506a;
    background: #f8fbff;
    border: 1px solid #dbe7fb;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
}

.transactions-page-ui .transactions-date {
    color: #40506a;
    font-weight: 700;
}

.transactions-page-ui .transactions-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
}

.transactions-page-ui .transactions-status--pending {
    color: #8a5a00;
    border: 1px solid #f2bc38;
    background: #ffe292;
}

.transactions-page-ui .transactions-status--review {
    color: #243c8b;
    border: 1px solid #a3c3ff;
    background: #eff3ff;
}

.transactions-page-ui .transactions-status--success {
    color: #096b3b;
    border: 1px solid #68dd9a;
    background: #c9f8dc;
}

.transactions-page-ui .transactions-status--rejected,
.transactions-page-ui .transactions-status--cancelled {
    color: #9f1239;
    border: 1px solid #fda4af;
    background: #ffe4e6;
}

.transactions-page-ui .transactions-empty {
    padding: 42px 20px;
    text-align: center;
}

.transactions-page-ui .transactions-empty img {
    max-height: 200px;
    width: auto;
}

@media (max-width: 767.98px) {
    .transactions-page-ui .transactions-showcase>.card-body {
        padding-top: 34px;
        padding-bottom: 34px;
    }

    .transactions-page-ui .section-title-ui {
        margin-bottom: 24px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .transactions-page-ui .section-title-ui__title {
        font-size: 28px;
    }

    .transactions-page-ui .section-title-ui__subtitle {
        font-size: 13px;
    }

    .transactions-page-ui .transactions-card>.card-body {
        padding: 28px 18px 22px;
    }

    .transactions-page-ui .transactions-card-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .transactions-page-ui .transactions-card-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 12px;
        font-size: 18px;
    }

    .transactions-page-ui .transactions-card-title {
        font-size: 19px;
    }

    .transactions-page-ui .transactions-card-subtitle {
        font-size: 12px;
    }

    .transactions-page-ui .table thead th,
    .transactions-page-ui .table tbody th,
    .transactions-page-ui .table tbody td {
        padding: 14px 12px;
        font-size: 13px;
    }
}

/* =============================================
       Transactions Page UI End
    ============================================= */

/* =============================================
     My Dictation Practice Page UI Start
  ============================================= */

  .my-dictation-practice-page-ui {
    position: relative;
  }

  .my-dictation-practice-page-ui .my-dictation-practice-showcase {
    border: 0;
    background: #ffffff;
  }

  .my-dictation-practice-page-ui .my-dictation-practice-showcase > .card-body {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .my-dictation-practice-page-ui .section-title-ui {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 40px;
    padding: 8px 16px 0;
    text-align: center;
  }

  .my-dictation-practice-page-ui .section-title-ui__title {
    margin: 0;
    color: #07143c;
    font-size: 36px;
    line-height: 1.12;
    font-weight: 800;
  }

  .my-dictation-practice-page-ui .section-title-ui__accent {
    color: #245bff;
  }

  .my-dictation-practice-page-ui .section-title-ui__subtitle {
    margin: 8px auto 0;
    max-width: 600px;
    color: #6d7791;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 500;
  }

  .my-dictation-practice-page-ui .section-title-ui__bar {
    width: 170px;
    height: 2px;
    margin: 12px auto 0;
    border-radius: 999px;
    background: linear-gradient(to right, transparent, #245bff, transparent);
  }

  .my-dictation-practice-page-ui .practice-card {
    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }

  .my-dictation-practice-page-ui .practice-card > .card-body {
    position: relative;
    z-index: 2;
    padding: 0px;
  }

  .my-dictation-practice-page-ui .practice-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #edf2fa;
  }

  .my-dictation-practice-page-ui .practice-card-title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
  }

  .my-dictation-practice-page-ui .practice-card-icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(135deg, #0679ff 0%, #3454ff 54%, #6700ff 100%);
    box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
    font-size: 20px;
  }

  .my-dictation-practice-page-ui .practice-card-title {
    margin: 0;
    color: #07143c;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
  }

  .my-dictation-practice-page-ui .practice-card-subtitle {
    margin: 5px 0 0;
    color: #6d7791;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
  }

  .my-dictation-practice-page-ui .practice-count-pill {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    color: #243c8b;
    border: 1px solid #a3c3ff;
    background: #eff3ff;
    box-shadow: 0 8px 18px rgba(36, 91, 255, 0.10);
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
  }

  .my-dictation-practice-page-ui .practice-table-wrap {
    border: 1px solid #edf2fa;
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(18, 44, 96, 0.04);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .my-dictation-practice-page-ui .table {
    margin-bottom: 0;
    color: #52617a;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1320px;
  }

  .my-dictation-practice-page-ui .table thead th {
    padding: 16px 14px;
    border: 0;
    border-bottom: 1px solid #edf2fa;
    color: #173562;
    background: #f8fbff;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  .my-dictation-practice-page-ui .table tbody th,
  .my-dictation-practice-page-ui .table tbody td {
    padding: 16px 14px;
    border-top: 0;
    border-bottom: 1px solid #edf2fa;
    color: #52617a;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
    vertical-align: middle;
    white-space: nowrap;
  }

  .my-dictation-practice-page-ui .table tbody tr:last-child th,
  .my-dictation-practice-page-ui .table tbody tr:last-child td {
    border-bottom: 0;
  }

  .my-dictation-practice-page-ui .table tbody tr {
    transition: background 0.22s ease;
  }

  .my-dictation-practice-page-ui .table tbody tr:hover {
    background: #f8fbff;
  }

  .my-dictation-practice-page-ui .practice-sr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
  }

  .my-dictation-practice-page-ui .practice-title {
    color: #07143c;
    font-weight: 700;
  }

  .my-dictation-practice-page-ui .practice-wpm-box {
    display: grid;
    gap: 5px;
  }

  .my-dictation-practice-page-ui .practice-wpm-line {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #40506a;
    font-size: 13px;
    font-weight: 700;
  }

  .my-dictation-practice-page-ui .practice-wpm-line i {
    color: #245bff;
    font-size: 13px;
  }

  .my-dictation-practice-page-ui .practice-metric {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    color: #40506a;
    background: #f8fbff;
    border: 1px solid #dbe7fb;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
  }

  .my-dictation-practice-page-ui .practice-metric--danger {
    color: #9f1239;
    border-color: #fda4af;
    background: #ffe4e6;
  }

  .my-dictation-practice-page-ui .practice-metric--warning {
    color: #8a5a00;
    border-color: #f2bc38;
    background: #ffe292;
  }

  .my-dictation-practice-page-ui .practice-metric--success {
    color: #096b3b;
    border-color: #68dd9a;
    background: #c9f8dc;
  }

  .my-dictation-practice-page-ui .practice-metric--blue {
    color: #243c8b;
    border-color: #a3c3ff;
    background: #eff3ff;
  }

  .my-dictation-practice-page-ui .practice-date {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #40506a;
    font-size: 13px;
    font-weight: 700;
  }

  .my-dictation-practice-page-ui .practice-date i {
    color: #245bff;
    font-size: 13px;
  }

  .my-dictation-practice-page-ui .practice-pdf-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #ffffff !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 10px 20px rgba(239, 68, 68, 0.20);
    text-decoration: none !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
  }

  .my-dictation-practice-page-ui .practice-pdf-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(239, 68, 68, 0.24);
    color: #ffffff !important;
  }

  .my-dictation-practice-page-ui .practice-empty-row td {
    padding: 34px 18px !important;
    text-align: center;
    background: #ffffff;
  }

  .my-dictation-practice-page-ui .practice-empty-row img {
    max-width: 220px;
    width: 100%;
    height: auto;
  }

  @media (max-width: 575.98px) {
    .my-dictation-practice-page-ui .my-dictation-practice-showcase > .card-body {
      padding-top: 34px;
      padding-bottom: 34px;
    }

    .my-dictation-practice-page-ui .section-title-ui {
      margin-bottom: 24px;
      padding-left: 10px;
      padding-right: 10px;
    }

    .my-dictation-practice-page-ui .section-title-ui__title {
      font-size: 28px;
    }

    .my-dictation-practice-page-ui .section-title-ui__subtitle {
      font-size: 13px;
    }

    .my-dictation-practice-page-ui .practice-card > .card-body {
      padding: 20px 18px;
    }

    .my-dictation-practice-page-ui .practice-card-header {
      align-items: flex-start;
      flex-direction: column;
      gap: 16px;
    }

    .my-dictation-practice-page-ui .practice-card-icon {
      width: 48px;
      height: 48px;
      min-width: 48px;
      border-radius: 12px;
      font-size: 18px;
    }

    .my-dictation-practice-page-ui .practice-card-title {
      font-size: 20px;
    }

    .my-dictation-practice-page-ui .practice-card-subtitle {
      font-size: 12px;
    }

    .my-dictation-practice-page-ui .table thead th,
    .my-dictation-practice-page-ui .table tbody th,
    .my-dictation-practice-page-ui .table tbody td {
      padding: 14px 12px;
    }
  }
  .table td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

  /* =============================================
     My Dictation Practice Page UI End
  ============================================= */

 /* =============================================
       Offline Payment Page UI Start
    ============================================= */

    .offline-payment-page-ui {
        position: relative;
        min-height: calc(100vh - 90px);
        padding: 48px 0;
        background:
            radial-gradient(circle at 8% 10%, rgba(36, 91, 255, 0.10) 0%, rgba(36, 91, 255, 0) 32%),
            radial-gradient(circle at 92% 6%, rgba(103, 0, 255, 0.08) 0%, rgba(103, 0, 255, 0) 30%),
            linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    }

    .offline-payment-page-ui .payment-shell {
        width: 100%;
        max-width: 980px;
        margin: 0 auto;
        padding: 0 16px;
    }

    .offline-payment-page-ui .payment-card {
        position: relative;
        isolation: isolate;
        width: 100%;
        border: 1px solid rgba(214, 226, 244, 0.95);
        border-radius: 8px;
        background:
            radial-gradient(circle at 100% 0, rgba(36, 91, 255, 0.10) 0%, rgba(36, 91, 255, 0) 32%),
            linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        box-shadow: 0 24px 58px rgba(18, 44, 96, 0.12);
        overflow: hidden;
    }

    .offline-payment-page-ui .payment-card::before {
        content: "";
        position: absolute;
        inset: 0 38px auto;
        height: 4px;
        border-radius: 0 0 999px 999px;
        background: linear-gradient(90deg, rgba(36, 91, 255, 0), #245bff, #6700ff, rgba(36, 91, 255, 0));
        opacity: 0.9;
        z-index: 1;
    }

    .offline-payment-page-ui .payment-card::after {
        content: "";
        position: absolute;
        top: -58px;
        right: -54px;
        width: 150px;
        height: 150px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(36, 91, 255, 0.13) 0%, rgba(36, 91, 255, 0) 68%);
        z-index: 0;
        pointer-events: none;
    }

    .offline-payment-page-ui .payment-card-body {
        position: relative;
        z-index: 2;
        padding: 34px 30px 30px;
    }

    .offline-payment-page-ui .payment-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 28px;
        padding-bottom: 22px;
        border-bottom: 1px solid #edf2fa;
    }

    .offline-payment-page-ui .payment-title-wrap {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
    }

    .offline-payment-page-ui .payment-title-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: #ffffff;
        background: linear-gradient(135deg, #0679ff 0%, #3454ff 54%, #6700ff 100%);
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
        font-size: 22px;
    }

    .offline-payment-page-ui .payment-title {
        margin: 0;
        color: #07143c;
        font-size: 28px;
        line-height: 1.2;
        font-weight: 800;
    }

    .offline-payment-page-ui .payment-title span {
        color: #245bff;
    }

    .offline-payment-page-ui .payment-subtitle {
        margin: 5px 0 0;
        color: #6d7791;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 600;
    }

    .offline-payment-page-ui .payment-order-pill {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 13px;
        border-radius: 999px;
        color: #243c8b;
        border: 1px solid #a3c3ff;
        background: #eff3ff;
        box-shadow: 0 8px 18px rgba(36, 91, 255, 0.10);
        font-size: 12px;
        line-height: 1;
        font-weight: 800;
        white-space: nowrap;
    }

    .offline-payment-page-ui .payment-main-grid {
        display: grid;
        grid-template-columns: 320px minmax(0, 1fr);
        gap: 24px;
        align-items: stretch;
    }

    .offline-payment-page-ui .payment-qr-card,
    .offline-payment-page-ui .payment-form-card {
        padding: 22px;
        border-radius: 8px;
        border: 1px solid #edf2fa;
        background: #ffffff;
        box-shadow: 0 12px 24px rgba(18, 44, 96, 0.04);
    }

    .offline-payment-page-ui .qr-box {
        min-height: 260px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 22px;
        border-radius: 8px;
        border: 1px dashed #a3c3ff;
        background:
            radial-gradient(circle at 0 0, rgba(36, 91, 255, 0.10) 0%, rgba(36, 91, 255, 0) 36%),
            #f8fbff;
    }

    .offline-payment-page-ui .qr-box img {
        width: 180px !important;
        height: 180px !important;
        object-fit: contain;
        padding: 8px;
        border-radius: 12px;
        background: #ffffff;
        border: 1px solid #dbe7fb;
        box-shadow: 0 14px 26px rgba(18, 44, 96, 0.10);
    }

    .offline-payment-page-ui .amount-box {
        margin-top: 18px;
        padding: 18px;
        text-align: center;
        border-radius: 8px;
        border: 1px solid #dbe7fb;
        background: #f8fbff;
    }

    .offline-payment-page-ui .amount-label {
        display: block;
        margin-bottom: 7px;
        color: #6d7791;
        font-size: 12px;
        line-height: 1.2;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .offline-payment-page-ui .amount-value {
        display: block;
        margin: 0;
        color: #07143c;
        font-size: 34px;
        line-height: 1.1;
        font-weight: 800;
    }

    .offline-payment-page-ui .payment-desc {
        margin: 0 0 18px;
        padding: 16px;
        border-radius: 8px;
        color: #52617a;
        background: #f8fbff;
        border: 1px solid #edf2fa;
        font-size: 14px;
        line-height: 1.65;
        font-weight: 600;
    }

    .offline-payment-page-ui .form-group label {
        display: block;
        margin-bottom: 8px;
        color: #173562;
        font-size: 13px;
        line-height: 1.2;
        font-weight: 700;
    }

    .offline-payment-page-ui .input-affix {
        position: relative;
    }

    .offline-payment-page-ui .input-affix .prefix-icon {
        position: absolute;
        top: 50%;
        left: 15px;
        transform: translateY(-50%);
        color: #245bff;
        font-size: 17px !important;
        z-index: 2;
        pointer-events: none;
    }

    .offline-payment-page-ui .form-control {
        width: 100%;
        min-height: 48px;
        border: 1px solid #dbe7fb;
        border-radius: 10px;
        color: #17233f;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 8px 20px rgba(34, 59, 102, 0.05);
        font-size: 14px;
        font-weight: 600;
        padding: 12px 14px 12px 42px;
        transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    }

    .offline-payment-page-ui .form-control:focus {
        border-color: rgba(36, 91, 255, 0.62);
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(36, 91, 255, 0.10);
    }

    .offline-payment-page-ui .payment-submit-btn,
    .offline-payment-page-ui .payment-link-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 0 22px;
        border: 0 !important;
        border-radius: 8px;
        color: #ffffff !important;
        background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%) !important;
        box-shadow: 0 14px 28px rgba(36, 91, 255, 0.24);
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
        text-decoration: none !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .offline-payment-page-ui .payment-submit-btn:hover,
    .offline-payment-page-ui .payment-link-btn:hover {
        color: #ffffff !important;
        transform: translateY(-1px);
        box-shadow: 0 16px 30px rgba(36, 91, 255, 0.30);
    }

    .offline-payment-page-ui .status-card {
        position: relative;
        isolation: isolate;
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        border: 1px solid rgba(214, 226, 244, 0.95);
        border-radius: 8px;
        background:
            radial-gradient(circle at 100% 0, rgba(36, 91, 255, 0.10) 0%, rgba(36, 91, 255, 0) 32%),
            linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        box-shadow: 0 24px 58px rgba(18, 44, 96, 0.12);
        overflow: hidden;
    }

    .offline-payment-page-ui .status-card::before {
        content: "";
        position: absolute;
        inset: 0 38px auto;
        height: 4px;
        border-radius: 0 0 999px 999px;
        background: linear-gradient(90deg, rgba(36, 91, 255, 0), #245bff, #6700ff, rgba(36, 91, 255, 0));
        opacity: 0.9;
        z-index: 1;
    }

    .offline-payment-page-ui .status-card-body {
        position: relative;
        z-index: 2;
        padding: 34px 30px 34px;
        text-align: center;
    }

    .offline-payment-page-ui .status-back-row {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 18px;
    }

    .offline-payment-page-ui .status-back-btn {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        color: #245bff;
        background: #eff3ff;
        border: 1px solid #a3c3ff;
        text-decoration: none !important;
    }

    .offline-payment-page-ui .status-back-btn img {
        width: 20px !important;
        height: 20px;
        object-fit: contain;
    }

    .offline-payment-page-ui .status-image-wrap {
        width: 98px;
        height: 98px;
        margin: 0 auto 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 24px;
        background: #f8fbff;
        border: 1px solid #edf2fa;
        box-shadow: 0 12px 24px rgba(18, 44, 96, 0.06);
    }

    .offline-payment-page-ui .status-image-wrap img {
        width: 70px !important;
        height: 70px;
        object-fit: contain;
    }

    .offline-payment-page-ui .status-title {
        margin: 0;
        color: #07143c;
        font-size: 26px;
        line-height: 1.25;
        font-weight: 800;
        text-transform: capitalize;
    }

    .offline-payment-page-ui .status-subtitle {
        margin: 8px auto 0;
        max-width: 390px;
        color: #6d7791;
        font-size: 14px;
        line-height: 1.55;
        font-weight: 600;
    }

    .offline-payment-page-ui .status-action-row {
        margin-top: 22px;
    }

    @media (max-width: 991.98px) {
        .offline-payment-page-ui .payment-main-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 767.98px) {
        .offline-payment-page-ui {
            padding: 34px 0;
        }

        .offline-payment-page-ui .payment-card-body,
        .offline-payment-page-ui .status-card-body {
            padding: 28px 18px 24px;
        }

        .offline-payment-page-ui .payment-head {
            align-items: flex-start;
            flex-direction: column;
            gap: 14px;
        }

        .offline-payment-page-ui .payment-title-icon {
            width: 48px;
            height: 48px;
            min-width: 48px;
            border-radius: 12px;
            font-size: 18px;
        }

        .offline-payment-page-ui .payment-title {
            font-size: 23px;
        }

        .offline-payment-page-ui .payment-subtitle {
            font-size: 12px;
        }

        .offline-payment-page-ui .payment-qr-card,
        .offline-payment-page-ui .payment-form-card {
            padding: 18px;
        }

        .offline-payment-page-ui .qr-box img {
            width: 160px !important;
            height: 160px !important;
        }

        .offline-payment-page-ui .amount-value {
            font-size: 30px;
        }

        .offline-payment-page-ui .status-title {
            font-size: 22px;
        }

        .offline-payment-page-ui .payment-link-btn {
            width: 100%;
        }
    }

    /* =============================================
       Offline Payment Page UI End
    ============================================= */

/* =============================================
     PDF List Page UI Start
  ============================================= */

  .pdf-list-page-ui {
    position: relative;
  }

  .pdf-list-page-ui .pdf-showcase-card {
    border: 0;
    background: #ffffff;
  }

  .pdf-list-page-ui .pdf-showcase-card .card-body {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .pdf-list-page-ui .section-title-ui {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 50px;
    padding: 8px 16px 0;
    text-align: center;
  }

  .pdf-list-page-ui .section-title-ui__title {
    margin: 0;
    color: #07143c;
    font-size: 36px;
    line-height: 1.12;
    font-weight: 800;
  }

  .pdf-list-page-ui .section-title-ui__accent {
    color: #245bff;
  }

  .pdf-list-page-ui .section-title-ui__subtitle {
    margin: 8px auto 0;
    max-width: 560px;
    color: #6d7791;
    font-size: 14px;
    line-height: 1.55;
  }

  .pdf-list-page-ui .section-title-ui__bar {
    width: 170px;
    height: 2px;
    margin: 12px auto 0;
    border-radius: 999px;
    background: linear-gradient(to right, transparent, #245bff, transparent);
  }

  .pdf-list-page-ui .pdf-card-item {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: 100%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    border: 1px solid rgba(214, 226, 244, 0.95);
    color: #52617a;
    background: #ffffff;
    overflow: hidden;
    text-decoration: none !important;
    box-shadow: 0 14px 30px rgba(18, 44, 96, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .pdf-list-page-ui .pdf-card-item:hover {
    transform: translateY(-2px);
    border-color: rgba(36, 91, 255, 0.45);
    box-shadow: 0 24px 46px rgba(25, 44, 76, 0.14);
  }

  .pdf-list-page-ui .pdf-card-item::after {
    content: "";
    position: absolute;
    top: -58px;
    right: -54px;
    width: 150px;
    height: 150px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(36, 91, 255, 0.13) 0%, rgba(36, 91, 255, 0) 68%);
    z-index: 0;
    pointer-events: none;
  }

  .pdf-list-page-ui .pdf-card-img-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 210px;
    padding: 14px 14px 0;
    overflow: hidden;
  }

  .pdf-list-page-ui .pdf-card-img-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    background:
      radial-gradient(circle at 15% 10%, rgba(36, 91, 255, 0.12), transparent 32%),
      linear-gradient(145deg, #f8fbff 0%, #eef4ff 100%);
    border: 1px solid #dbe7fb;
  }

  .pdf-list-page-ui .pdf-card-img-inner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.35s ease;
  }

  .pdf-list-page-ui .pdf-card-label {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    color: #243c8b;
    background: #eff3ff;
    border: 1px solid #a3c3ff;
    box-shadow: 0 8px 18px rgba(36, 91, 255, 0.12);
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
  }

  .pdf-list-page-ui .pdf-card-label i {
    color: #245bff;
    font-size: 12px;
  }

  .pdf-list-page-ui .pdf-card-content {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 22px 22px 22px;
  }

  .pdf-list-page-ui .pdf-card-title {
    margin: 0 0 12px;
    color: #07143c;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .pdf-list-page-ui .pdf-card-desc {
    margin: 0;
    color: #55647b;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .pdf-list-page-ui .pdf-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 18px;
  }

  .pdf-list-page-ui .pdf-card-type {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    color: #40506a;
    background: #f8fbff;
    border: 1px solid #dbe7fb;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
  }

  .pdf-list-page-ui .pdf-card-type i {
    color: #f0327c;
    font-size: 13px;
  }

  .pdf-list-page-ui .btn-read-more {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    color: #ffffff !important;
    background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%);
    box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    text-decoration: none !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
  }

  .pdf-list-page-ui .btn-read-more:hover {
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(36, 91, 255, 0.30);
  }

  .pdf-list-page-ui .pdf-empty-box {
    max-width: 520px;
    margin: 0 auto;
    padding: 42px 24px;
    border-radius: 8px;
    border: 1px dashed #cdd9ed;
    background:
      radial-gradient(circle at 12% 0, rgba(36, 91, 255, 0.10) 0%, rgba(36, 91, 255, 0) 34%),
      linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    text-align: center;
  }

  .pdf-list-page-ui .pdf-empty-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #245bff;
    background: #eef4ff;
    border: 1px solid #dbe7fb;
    font-size: 30px;
  }

  .pdf-list-page-ui .pdf-empty-box h4 {
    margin: 0 0 8px;
    color: #07143c;
    font-size: 20px;
    font-weight: 800;
  }

  .pdf-list-page-ui .pdf-empty-box p {
    margin: 0;
    color: #6d7791;
    font-size: 14px;
    font-weight: 500;
  }

  @media (max-width: 575.98px) {
    .pdf-list-page-ui .section-title-ui {
      margin-bottom: 24px;
      padding-left: 10px;
      padding-right: 10px;
    }

    .pdf-list-page-ui .section-title-ui__title {
      font-size: 28px;
    }

    .pdf-list-page-ui .section-title-ui__subtitle {
      font-size: 13px;
    }

    .pdf-list-page-ui .pdf-showcase-card .card-body {
      padding-top: 34px;
      padding-bottom: 34px;
    }

    .pdf-list-page-ui .pdf-card-item {
      min-height: auto;
    }

    .pdf-list-page-ui .pdf-card-img-wrap {
      height: 190px;
      padding: 12px 12px 0;
    }

    .pdf-list-page-ui .pdf-card-content {
      padding: 18px;
    }

    .pdf-list-page-ui .pdf-card-title {
      font-size: 16px;
    }

    .pdf-list-page-ui .pdf-card-footer {
      align-items: stretch;
      flex-direction: column;
    }

    .pdf-list-page-ui .btn-read-more {
      width: 100%;
      min-height: 42px;
    }
  }

  /* =============================================
     PDF List Page UI End
  ============================================= */


 /* =============================================
       Privacy Policy Page UI Start
    ============================================= */

    .privacy-policy-page-ui {
        position: relative;
    }

    .privacy-policy-page-ui .privacy-showcase {
        border: 0;
        background: #ffffff;
    }

    .privacy-policy-page-ui .privacy-showcase > .card-body {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .privacy-policy-page-ui .section-title-ui {
        width: 100%;
        max-width: 760px;
        margin: 0 auto 42px;
        padding: 8px 16px 0;
        text-align: center;
    }

    .privacy-policy-page-ui .section-title-ui__title {
        margin: 0;
        color: #07143c;
        font-size: 36px;
        line-height: 1.12;
        font-weight: 800;
    }

    .privacy-policy-page-ui .section-title-ui__accent {
        color: #245bff;
    }

    .privacy-policy-page-ui .section-title-ui__subtitle {
        margin: 8px auto 0;
        max-width: 620px;
        color: #6d7791;
        font-size: 14px;
        line-height: 1.55;
        font-weight: 500;
    }

    .privacy-policy-page-ui .section-title-ui__bar {
        width: 170px;
        height: 2px;
        margin: 12px auto 0;
        border-radius: 999px;
        background: linear-gradient(to right, transparent, #245bff, transparent);
    }

    .privacy-policy-page-ui .privacy-content-card {
        position: relative;
        isolation: isolate;
        width: 100%;
        max-width: 1080px;
        margin: 0 auto;
        overflow: hidden;
    }



    .privacy-policy-page-ui .privacy-content-card::after {
        content: "";
        position: absolute;
        top: -58px;
        right: -54px;
        width: 150px;
        height: 150px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(36, 91, 255, 0.13) 0%, rgba(36, 91, 255, 0) 68%);
        z-index: 0;
        pointer-events: none;
    }

    .privacy-policy-page-ui .privacy-content-card > .card-body {
        position: relative;
        z-index: 2;
        padding:0px;
    }

    .privacy-policy-page-ui .privacy-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 26px;
        padding-bottom: 22px;
        border-bottom: 1px solid #edf2fa;
    }

    .privacy-policy-page-ui .privacy-title-wrap {
        display: flex;
        align-items: center;
        gap: 16px;
        min-width: 0;
    }

    .privacy-policy-page-ui .privacy-card-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: #ffffff;
        background: linear-gradient(135deg, #0679ff 0%, #3454ff 54%, #6700ff 100%);
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
        font-size: 22px;
    }

    .privacy-policy-page-ui .privacy-card-title {
        margin: 0;
        color: #07143c;
        font-size: 24px;
        line-height: 1.2;
        font-weight: 800;
    }

    .privacy-policy-page-ui .privacy-card-subtitle {
        margin: 5px 0 0;
        color: #6d7791;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 600;
    }

    .privacy-policy-page-ui .privacy-pill {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 13px;
        border-radius: 999px;
        color: #243c8b;
        border: 1px solid #a3c3ff;
        background: #eff3ff;
        box-shadow: 0 8px 18px rgba(36, 91, 255, 0.10);
        font-size: 12px;
        line-height: 1;
        font-weight: 800;
        white-space: nowrap;
    }

    .privacy-policy-page-ui .privacy-content-box {
        position: relative;
        padding: 26px;
        border-radius: 8px;
        border: 1px solid #edf2fa;
        background: #ffffff;
        box-shadow: 0 12px 24px rgba(18, 44, 96, 0.04);
        color: #52617a;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 500;
        overflow-wrap: anywhere;
    }

    .privacy-policy-page-ui .privacy-content-box p {
        margin-bottom: 14px;
        color: #52617a;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 500;
    }

    .privacy-policy-page-ui .privacy-content-box p:last-child {
        margin-bottom: 0;
    }

    .privacy-policy-page-ui .privacy-content-box h1,
    .privacy-policy-page-ui .privacy-content-box h2,
    .privacy-policy-page-ui .privacy-content-box h3,
    .privacy-policy-page-ui .privacy-content-box h4,
    .privacy-policy-page-ui .privacy-content-box h5,
    .privacy-policy-page-ui .privacy-content-box h6 {
        margin-top: 20px;
        margin-bottom: 12px;
        color: #07143c;
        line-height: 1.25;
        font-weight: 800;
    }

    .privacy-policy-page-ui .privacy-content-box h1:first-child,
    .privacy-policy-page-ui .privacy-content-box h2:first-child,
    .privacy-policy-page-ui .privacy-content-box h3:first-child,
    .privacy-policy-page-ui .privacy-content-box h4:first-child,
    .privacy-policy-page-ui .privacy-content-box h5:first-child,
    .privacy-policy-page-ui .privacy-content-box h6:first-child {
        margin-top: 0;
    }

    .privacy-policy-page-ui .privacy-content-box ul,
    .privacy-policy-page-ui .privacy-content-box ol {
        margin: 14px 0;
        padding-left: 22px;
        color: #52617a;
    }

    .privacy-policy-page-ui .privacy-content-box li {
        margin-bottom: 8px;
        color: #52617a;
        line-height: 1.65;
    }

    .privacy-policy-page-ui .privacy-content-box a {
        color: #245bff;
        font-weight: 700;
        text-decoration: none;
    }

    .privacy-policy-page-ui .privacy-content-box a:hover {
        text-decoration: underline;
    }

    .privacy-policy-page-ui .privacy-content-box table {
        width: 100%;
        margin: 18px 0;
        border-collapse: collapse;
        border: 1px solid #edf2fa;
        overflow: hidden;
        border-radius: 8px;
    }

    .privacy-policy-page-ui .privacy-content-box table th,
    .privacy-policy-page-ui .privacy-content-box table td {
        padding: 12px 14px;
        border: 1px solid #edf2fa;
        color: #52617a;
        font-size: 14px;
        line-height: 1.5;
    }

    .privacy-policy-page-ui .privacy-content-box table th {
        color: #173562;
        background: #f8fbff;
        font-weight: 800;
    }

    @media (max-width: 767.98px) {
        .privacy-policy-page-ui .privacy-showcase > .card-body {
            padding-top: 34px;
            padding-bottom: 34px;
        }

        .privacy-policy-page-ui .section-title-ui {
            margin-bottom: 24px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .privacy-policy-page-ui .section-title-ui__title {
            font-size: 28px;
        }

        .privacy-policy-page-ui .section-title-ui__subtitle {
            font-size: 13px;
        }

        .privacy-policy-page-ui .privacy-content-card > .card-body {
            padding: 12px;
        }

        .privacy-policy-page-ui .privacy-card-header {
            align-items: flex-start;
            flex-direction: column;
            gap: 14px;
            margin-bottom: 22px;
            padding-bottom: 18px;
        }

        .privacy-policy-page-ui .privacy-title-wrap {
            align-items: flex-start;
            gap: 12px;
        }

        .privacy-policy-page-ui .privacy-card-icon {
            width: 48px;
            height: 48px;
            min-width: 48px;
            border-radius: 12px;
            font-size: 18px;
        }

        .privacy-policy-page-ui .privacy-card-title {
            font-size: 20px;
        }

        .privacy-policy-page-ui .privacy-card-subtitle {
            font-size: 12px;
        }

        .privacy-policy-page-ui .privacy-pill {
            width: 100%;
            justify-content: center;
        }

        .privacy-policy-page-ui .privacy-content-box {
            padding: 18px;
            font-size: 14px;
        }

        .privacy-policy-page-ui .privacy-content-box p {
            font-size: 14px;
        }
    }

    /* =============================================
       Privacy Policy Page UI End
    ============================================= */


/* =============================================
       Referrals Page UI Start
    ============================================= */

    .referrals-page-ui {
        position: relative;
    }

    .referrals-page-ui .referrals-showcase {
        border: 0;
        background: #ffffff;
    }

    .referrals-page-ui .referrals-showcase > .card-body {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .referrals-page-ui .section-title-ui {
        width: 100%;
        max-width: 760px;
        margin: 0 auto 42px;
        padding: 8px 16px 0;
        text-align: center;
    }

    .referrals-page-ui .section-title-ui__title {
        margin: 0;
        color: #07143c;
        font-size: 36px;
        line-height: 1.12;
        font-weight: 800;
    }

    .referrals-page-ui .section-title-ui__accent {
        color: #245bff;
    }

    .referrals-page-ui .section-title-ui__subtitle {
        margin: 8px auto 0;
        max-width: 580px;
        color: #6d7791;
        font-size: 14px;
        line-height: 1.55;
        font-weight: 500;
    }

    .referrals-page-ui .section-title-ui__bar {
        width: 170px;
        height: 2px;
        margin: 12px auto 0;
        border-radius: 999px;
        background: linear-gradient(to right, transparent, #245bff, transparent);
    }

    .referrals-page-ui .referral-main-card,
    .referrals-page-ui .referral-table-card {
        position: relative;
        isolation: isolate;
        height: 100%;
        border: 1px solid rgba(214, 226, 244, 0.95);
        border-radius: 8px;
        background:
            radial-gradient(circle at 100% 0, rgba(36, 91, 255, 0.10) 0%, rgba(36, 91, 255, 0) 32%),
            linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        box-shadow: 0 20px 44px rgba(18, 44, 96, 0.08);
        overflow: hidden;
    }


    .referrals-page-ui .referral-main-card::after,
    .referrals-page-ui .referral-table-card::after {
        content: "";
        position: absolute;
        top: -58px;
        right: -54px;
        width: 150px;
        height: 150px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(36, 91, 255, 0.13) 0%, rgba(36, 91, 255, 0) 68%);
        z-index: 0;
        pointer-events: none;
    }

    .referrals-page-ui .referral-main-card > .card-body,
    .referrals-page-ui .referral-table-card > .card-body {
        position: relative;
        z-index: 2;
        padding: 20px;
    }

    .referrals-page-ui .referral-visual {
        width: 100%;
        min-height: 230px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 24px;
        padding: 22px;
        border-radius: 8px;
        border: 1px solid #edf2fa;
        background: #ffffff;
    }

    .referrals-page-ui .referral-visual img {
        max-width: 100%;
        max-height: 210px;
        object-fit: contain;
    }

    .referrals-page-ui .referral-code-box {
        margin-bottom: 18px;
        padding: 18px;
        border-radius: 8px;
        border: 1px solid #dbe7fb;
        background:
            radial-gradient(circle at 0 0, rgba(36, 91, 255, 0.10) 0%, rgba(36, 91, 255, 0) 36%),
            #f8fbff;
        text-align: center;
    }

    .referrals-page-ui .referral-code-label {
        display: block;
        margin-bottom: 10px;
        color: #6d7791;
        font-size: 12px;
        line-height: 1.2;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .referrals-page-ui #refferal_id {
        width: max-content;
        max-width: 100%;
        margin: 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 12px 16px;
        border-radius: 8px;
        color: #243c8b;
        border: 1px solid #a3c3ff;
        background: #eff3ff;
        box-shadow: 0 8px 18px rgba(36, 91, 255, 0.10);
        font-size: 20px;
        line-height: 1;
        font-weight: 700;
        cursor: pointer;
        word-break: break-word;
    }

    .referrals-page-ui #refferal_id i {
        color: #245bff;
        font-size: 18px;
    }

    .referrals-page-ui .reffer_btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        border: 0;
        border-radius: 8px;
        color: #ffffff !important;
        background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%) !important;
        box-shadow: 0 14px 28px rgba(36, 91, 255, 0.24);
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
        text-decoration: none !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .referrals-page-ui .reffer_btn:hover {
        color: #ffffff !important;
        transform: translateY(-1px);
        box-shadow: 0 16px 30px rgba(36, 91, 255, 0.30);
    }

    .referrals-page-ui .referral-note {
        margin: 16px 0 0;
        color: #6d7791;
        font-size: 14px;
        line-height: 1.6;
        font-weight: 600;
        text-align: center;
    }

    .referrals-page-ui .referral-table-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 24px;
        padding-bottom: 20px;
        border-bottom: 1px solid #edf2fa;
    }

    .referrals-page-ui .referral-table-title-wrap {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
    }

    .referrals-page-ui .referral-table-icon {
        width: 54px;
        height: 54px;
        min-width: 54px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: #ffffff;
        background: linear-gradient(135deg, #0679ff 0%, #3454ff 54%, #6700ff 100%);
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
        font-size: 20px;
    }

    .referrals-page-ui .referral-table-title {
        margin: 0;
        color: #07143c;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 800;
    }

    .referrals-page-ui .referral-table-subtitle {
        margin: 5px 0 0;
        color: #6d7791;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 600;
    }

    .referrals-page-ui .referral-count-pill {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 13px;
        border-radius: 999px;
        color: #243c8b;
        border: 1px solid #a3c3ff;
        background: #eff3ff;
        box-shadow: 0 8px 18px rgba(36, 91, 255, 0.10);
        font-size: 12px;
        line-height: 1;
        font-weight: 800;
        white-space: nowrap;
    }

    .referrals-page-ui .referral-table-wrap {
        border: 1px solid #edf2fa;
        border-radius: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        background: #ffffff;
        box-shadow: 0 10px 24px rgba(18, 44, 96, 0.04);
    }

    .referrals-page-ui .table {
        min-width: 720px;
        margin-bottom: 0;
        color: #52617a;
        border-collapse: separate;
        border-spacing: 0;
    }

    .referrals-page-ui .table thead th {
        padding: 16px 14px;
        border: 0;
        border-bottom: 1px solid #edf2fa;
        color: #173562;
        background: #f8fbff;
        font-size: 12px;
        line-height: 1.25;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    .referrals-page-ui .table tbody th,
    .referrals-page-ui .table tbody td {
        padding: 16px 14px;
        border-top: 0;
        border-bottom: 1px solid #edf2fa;
        color: #52617a;
        font-size: 14px;
        line-height: 1.35;
        font-weight: 600;
        vertical-align: middle;
        white-space: nowrap;
    }

    .referrals-page-ui .table tbody tr:last-child th,
    .referrals-page-ui .table tbody tr:last-child td {
        border-bottom: 0;
    }

    .referrals-page-ui .table tbody tr {
        transition: background 0.22s ease;
    }

    .referrals-page-ui .table tbody tr:hover {
        background: #f8fbff;
    }

    .referrals-page-ui .referral-sr {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        color: #245bff;
        background: #eff3ff;
        border: 1px solid #dbe7fb;
        font-size: 13px;
        font-weight: 800;
    }

    .referrals-page-ui .referral-name {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #07143c;
        font-weight: 800;
    }

    .referrals-page-ui .referral-name i {
        color: #245bff;
        font-size: 13px;
    }

    .referrals-page-ui .referral-email,
    .referrals-page-ui .referral-date {
        color: #40506a;
        font-weight: 700;
    }

    .referrals-page-ui .referral-amount {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 28px;
        padding: 5px 11px;
        border-radius: 999px;
        color: #096b3b;
        border: 1px solid #68dd9a;
        background: #c9f8dc;
        font-size: 12px;
        line-height: 1;
        font-weight: 800;
    }

    .referrals-page-ui .reward-status {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 28px;
        padding: 5px 11px;
        border-radius: 999px;
        font-size: 12px;
        line-height: 1;
        font-weight: 800;
        white-space: nowrap;
    }

    .referrals-page-ui .reward-status--success {
        color: #096b3b;
        border: 1px solid #68dd9a;
        background: #c9f8dc;
    }

    .referrals-page-ui .reward-status--pending {
        color: #9f1239;
        border: 1px solid #fda4af;
        background: #ffe4e6;
    }

    .referrals-page-ui .referral-empty {
        padding: 40px 18px;
        text-align: center;
        color: #6d7791;
        font-size: 14px;
        font-weight: 700;
    }

    .referrals-page-ui .referral-empty i {
        width: 56px;
        height: 56px;
        margin: 0 auto 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: #245bff;
        background: #eff3ff;
        border: 1px solid #dbe7fb;
        font-size: 24px;
    }

    @media (max-width: 991.98px) {
        .referrals-page-ui .reverse-column {
            row-gap: 24px;
        }
    }

    @media (max-width: 767.98px) {
        .referrals-page-ui .referrals-showcase > .card-body {
            padding-top: 34px;
            padding-bottom: 34px;
        }

        .referrals-page-ui .section-title-ui {
            margin-bottom: 24px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .referrals-page-ui .section-title-ui__title {
            font-size: 28px;
        }

        .referrals-page-ui .section-title-ui__subtitle {
            font-size: 13px;
        }

        .referrals-page-ui .referral-main-card > .card-body,
        .referrals-page-ui .referral-table-card > .card-body {
            padding: 14px;
        }

        .referrals-page-ui .referral-table-header {
            align-items: flex-start;
            flex-direction: column;
            gap: 14px;
        }

        .referrals-page-ui .referral-table-icon {
            width: 48px;
            height: 48px;
            min-width: 48px;
            border-radius: 12px;
            font-size: 18px;
        }

        .referrals-page-ui .referral-table-title {
            font-size: 19px;
        }

        .referrals-page-ui .referral-table-subtitle {
            font-size: 12px;
        }

        .referrals-page-ui #refferal_id {
            font-size: 18px;
        }

        .referrals-page-ui .table thead th,
        .referrals-page-ui .table tbody th,
        .referrals-page-ui .table tbody td {
            padding: 14px 12px;
            font-size: 13px;
        }
    }

    /* =============================================
       Referrals Page UI End
    ============================================= */


   /* =============================================
       Refund Policy Page UI Start
    ============================================= */

    .refund-policy-page-ui {
        position: relative;
    }

    .refund-policy-page-ui .refund-showcase {
        border: 0;
        background: #ffffff;
    }

    .refund-policy-page-ui .refund-showcase > .card-body {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .refund-policy-page-ui .section-title-ui {
        width: 100%;
        margin: 0 auto 42px;
        padding: 8px 16px 0;
        text-align: center;
    }

    .refund-policy-page-ui .section-title-ui__title {
        margin: 0;
        color: #07143c;
        font-size: 36px;
        line-height: 1.12;
        font-weight: 800;
    }

    .refund-policy-page-ui .section-title-ui__accent {
        color: #245bff;
    }

    .refund-policy-page-ui .section-title-ui__subtitle {
        margin: 8px auto 0;
        max-width: 650px;
        color: #6d7791;
        font-size: 14px;
        line-height: 1.55;
        font-weight: 500;
    }

    .refund-policy-page-ui .section-title-ui__bar {
        width: 170px;
        height: 2px;
        margin: 12px auto 0;
        border-radius: 999px;
        background: linear-gradient(to right, transparent, #245bff, transparent);
    }

    .refund-policy-page-ui .refund-content-card {
        position: relative;
        isolation: isolate;
        width: 100%;
        max-width: 1080px;
        margin: 0 auto;
        overflow: hidden;
    }

    .refund-policy-page-ui .refund-content-card::after {
        content: "";
        position: absolute;
        top: -58px;
        right: -54px;
        width: 150px;
        height: 150px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(36, 91, 255, 0.13) 0%, rgba(36, 91, 255, 0) 68%);
        z-index: 0;
        pointer-events: none;
    }

    .refund-policy-page-ui .refund-content-card > .card-body {
        position: relative;
        z-index: 2;
        padding: 0px;
    }

    .refund-policy-page-ui .refund-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 26px;
        padding-bottom: 22px;
        border-bottom: 1px solid #edf2fa;
    }

    .refund-policy-page-ui .refund-title-wrap {
        display: flex;
        align-items: center;
        gap: 16px;
        min-width: 0;
    }

    .refund-policy-page-ui .refund-card-subtitle {
        margin: 5px 0 0;
        color: #6d7791;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 600;
    }

    .refund-policy-page-ui .refund-pill {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 13px;
        border-radius: 999px;
        color: #243c8b;
        border: 1px solid #a3c3ff;
        background: #eff3ff;
        box-shadow: 0 8px 18px rgba(36, 91, 255, 0.10);
        font-size: 12px;
        line-height: 1;
        font-weight: 800;
        white-space: nowrap;
    }

    .refund-policy-page-ui .refund-content-box {
        position: relative;
        padding: 26px;
        border-radius: 8px;
        border: 1px solid #edf2fa;
        background: #ffffff;
        box-shadow: 0 12px 24px rgba(18, 44, 96, 0.04);
        color: #52617a;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 500;
        overflow-wrap: anywhere;
    }

    .refund-policy-page-ui .refund-content-box p {
        margin-bottom: 14px;
        color: #52617a;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 500;
    }

    .refund-policy-page-ui .refund-content-box p:last-child {
        margin-bottom: 0;
    }

    .refund-policy-page-ui .refund-content-box h1,
    .refund-policy-page-ui .refund-content-box h2,
    .refund-policy-page-ui .refund-content-box h3,
    .refund-policy-page-ui .refund-content-box h4,
    .refund-policy-page-ui .refund-content-box h5,
    .refund-policy-page-ui .refund-content-box h6 {
        margin-top: 20px;
        margin-bottom: 12px;
        color: #07143c;
        line-height: 1.25;
        font-weight: 800;
    }

    .refund-policy-page-ui .refund-content-box h1:first-child,
    .refund-policy-page-ui .refund-content-box h2:first-child,
    .refund-policy-page-ui .refund-content-box h3:first-child,
    .refund-policy-page-ui .refund-content-box h4:first-child,
    .refund-policy-page-ui .refund-content-box h5:first-child,
    .refund-policy-page-ui .refund-content-box h6:first-child {
        margin-top: 0;
    }

    .refund-policy-page-ui .refund-content-box ul,
    .refund-policy-page-ui .refund-content-box ol {
        margin: 14px 0;
        padding-left: 22px;
        color: #52617a;
    }

    .refund-policy-page-ui .refund-content-box li {
        margin-bottom: 8px;
        color: #52617a;
        line-height: 1.65;
    }

    .refund-policy-page-ui .refund-content-box a {
        color: #245bff;
        font-weight: 700;
        text-decoration: none;
    }

    .refund-policy-page-ui .refund-content-box a:hover {
        text-decoration: underline;
    }

    .refund-policy-page-ui .refund-content-box table {
        width: 100%;
        margin: 18px 0;
        border-collapse: collapse;
        border: 1px solid #edf2fa;
        overflow: hidden;
        border-radius: 8px;
    }

    .refund-policy-page-ui .refund-content-box table th,
    .refund-policy-page-ui .refund-content-box table td {
        padding: 12px 14px;
        border: 1px solid #edf2fa;
        color: #52617a;
        font-size: 14px;
        line-height: 1.5;
    }

    .refund-policy-page-ui .refund-content-box table th {
        color: #173562;
        background: #f8fbff;
        font-weight: 800;
    }

    @media (max-width: 767.98px) {
        .refund-policy-page-ui .refund-showcase > .card-body {
            padding-top: 34px;
            padding-bottom: 34px;
        }

        .refund-policy-page-ui .section-title-ui {
            margin-bottom: 24px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .refund-policy-page-ui .section-title-ui__title {
            font-size: 28px;
        }

        .refund-policy-page-ui .section-title-ui__subtitle {
            font-size: 13px;
        }

        .refund-policy-page-ui .refund-content-card > .card-body {
            padding: 28px 18px 22px;
        }

        .refund-policy-page-ui .refund-card-header {
            align-items: flex-start;
            flex-direction: column;
            gap: 14px;
            margin-bottom: 22px;
            padding-bottom: 18px;
        }

        .refund-policy-page-ui .refund-title-wrap {
            align-items: flex-start;
            gap: 12px;
        }

        .refund-policy-page-ui .refund-card-subtitle {
            font-size: 12px;
        }

        .refund-policy-page-ui .refund-pill {
            width: 100%;
            justify-content: center;
        }

        .refund-policy-page-ui .refund-content-box {
            padding: 18px;
            font-size: 14px;
        }

        .refund-policy-page-ui .refund-content-box p {
            font-size: 14px;
        }
    }

    /* =============================================
       Refund Policy Page UI End
    ============================================= */

 /* =============================================
       Signup Page UI Start
    ============================================= */

    .signup-page-ui {
        min-height: 100vh;
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at 8% 10%, rgba(36, 91, 255, 0.12) 0%, rgba(36, 91, 255, 0) 30%),
            radial-gradient(circle at 92% 8%, rgba(103, 0, 255, 0.10) 0%, rgba(103, 0, 255, 0) 28%),
            linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
    }

    .signup-page-ui::before {
        content: "";
        position: absolute;
        top: -120px;
        right: -100px;
        width: 300px;
        height: 300px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(36, 91, 255, 0.14) 0%, rgba(36, 91, 255, 0) 68%);
        pointer-events: none;
    }

    .signup-page-ui::after {
        content: "";
        position: absolute;
        bottom: -140px;
        left: -120px;
        width: 330px;
        height: 330px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(24, 174, 255, 0.14) 0%, rgba(24, 174, 255, 0) 68%);
        pointer-events: none;
    }

    .signup-page-ui .signup-auth-shell {
        min-height: 100vh;
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        padding: 34px 0;
    }

    .signup-page-ui .signup-card {
        position: relative;
        isolation: isolate;
        width: 100%;
        max-width: 950px;
        margin: 0 auto;
        border: 1px solid rgba(214, 226, 244, 0.95);
        border-radius: 8px;
        background:
            radial-gradient(circle at 100% 0, rgba(36, 91, 255, 0.10) 0%, rgba(36, 91, 255, 0) 32%),
            linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        box-shadow: 0 24px 58px rgba(18, 44, 96, 0.14);
        overflow: hidden;
    }

    .signup-page-ui .signup-card::after {
        content: "";
        position: absolute;
        top: -58px;
        right: -54px;
        width: 150px;
        height: 150px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(36, 91, 255, 0.13) 0%, rgba(36, 91, 255, 0) 68%);
        z-index: 0;
        pointer-events: none;
    }

    .signup-page-ui .signup-card .card-body {
        position: relative;
        z-index: 2;
        padding: 24px;
    }

    .signup-page-ui .signup-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 28px;
        padding-bottom: 22px;
        border-bottom: 1px solid #edf2fa;
    }

    .signup-page-ui .signup-header-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        color: #ffffff;
        background: linear-gradient(135deg, #0679ff 0%, #3454ff 54%, #6700ff 100%);
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
        font-size: 22px;
        font-weight: 800;
    }

    .signup-page-ui .signup-title {
        margin: 0;
        color: #07143c;
        font-size: 28px;
        line-height: 1.2;
        font-weight: 800;
    }

    .signup-page-ui .signup-title span {
        color: #245bff;
    }

    .signup-page-ui .signup-subtitle {
        margin: 6px 0 0;
        color: #6d7791;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 600;
    }

    .signup-page-ui #signup_form {
        margin: 0;
        padding: 0 !important;
    }

    .signup-page-ui .form-group {
        margin-bottom: 20px;
    }

    .signup-page-ui .form-group label {
        display: block;
        margin-bottom: 8px;
        color: #173562;
        font-size: 13px;
        line-height: 1.2;
        font-weight: 700;
    }

    .signup-page-ui .input-affix {
        position: relative;
    }

    .signup-page-ui .input-affix .prefix-icon {
        position: absolute;
        top: 50%;
        left: 15px;
        transform: translateY(-50%);
        color: #245bff;
        font-size: 14px;
        z-index: 2;
        pointer-events: none;
    }

    .signup-page-ui .form-control {
        width: 100%;
        min-height: 48px;
        border: 1px solid #dbe7fb;
        border-radius: 10px;
        color: #17233f;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 8px 20px rgba(34, 59, 102, 0.05);
        font-size: 14px;
        font-weight: 600;
        padding: 12px 14px 12px 42px;
        transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    }

    .signup-page-ui .form-control::placeholder {
        color: #91a0b8;
        font-weight: 500;
        text-transform: capitalize;
    }

    .signup-page-ui .form-control:focus {
        border-color: rgba(36, 91, 255, 0.62);
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(36, 91, 255, 0.10);
    }

    .signup-page-ui .signup-submit-btn {
        width: 100%;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 0 22px;
        border: 0;
        border-radius: 8px;
        color: #ffffff !important;
        background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%) !important;
        box-shadow: 0 14px 28px rgba(36, 91, 255, 0.24);
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
        text-decoration: none !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .signup-page-ui .signup-submit-btn:hover {
        color: #ffffff !important;
        transform: translateY(-1px);
        box-shadow: 0 16px 30px rgba(36, 91, 255, 0.30);
    }

    .signup-page-ui .signup-login-text {
        margin: 16px 0 0;
        color: #6d7791;
        font-size: 14px;
        line-height: 1.5;
        font-weight: 600;
        text-align: center;
    }

    .signup-page-ui .signup-login-text a {
        color: #245bff;
        font-weight: 800;
        text-decoration: none;
    }

    .signup-page-ui .signup-login-text a:hover {
        text-decoration: underline;
    }


    /* Login Modal Theme */
    #login-modal .modal-dialog {
        max-width: 470px;
        margin: 1rem auto;
        min-height: calc(100vh - 2rem);
        display: flex;
        align-items: center;
    }

    #login-modal .modal-content {
        border: 1px solid rgba(214, 226, 244, 0.95);
        border-radius: 10px;
        background:
            radial-gradient(circle at 100% 0, rgba(118, 72, 255, 0.10) 0%, rgba(118, 72, 255, 0) 34%),
            radial-gradient(circle at 0 0, rgba(36, 91, 255, 0.10) 0%, rgba(36, 91, 255, 0) 36%),
            linear-gradient(180deg, #ffffff 0%, #fdfdff 100%);
        box-shadow: 0 28px 70px rgba(18, 44, 96, 0.24);
        overflow: hidden;
    }

    #login-modal .modal-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 28px 24px 0;
        border-bottom: 0;
    }

    #login-modal .modal-head-copy {
        flex: 1;
    }

    #login-modal .modal-title {
        margin: 0;
        color: #132556;
        font-size: 24px;
        line-height: 1.15;
        font-weight: 800;
    }

    #login-modal .modal-subtitle {
        margin: 8px 0 0;
        color: #6f7c96;
        font-size: 13px;
        line-height: 1.5;
        font-weight: 600;
    }

    #login-modal .close {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #516386;
        background: #ffffff;
        border: 1px solid #e0e8f7;
        box-shadow: 0 8px 18px rgba(18, 44, 96, 0.08);
        opacity: 1;
        text-shadow: none;
    }

    #login-modal .close:hover {
        color: #245bff;
        background: #f7faff;
    }

    #login-modal .card-body {
        padding: 20px 24px 24px !important;
    }

    #login-modal #login_form {
        padding: 0 !important;
    }

    #login-modal .form-group {
        margin-bottom: 14px;
    }

    #login-modal .form-group label {
        display: block;
        margin-bottom: 8px;
        color: #294777;
        font-size: 13px;
        line-height: 1.2;
        font-weight: 700;
    }

    #login-modal .input-affix {
        position: relative;
    }

    #login-modal .input-affix .prefix-icon {
        position: absolute;
        top: 50%;
        left: 15px;
        transform: translateY(-50%);
        color: #245bff;
        font-size: 14px;
        z-index: 2;
        pointer-events: none;
    }

    #login-modal .form-control {
        width: 100%;
        min-height: 48px;
        border: 1px solid #ccd8ec;
        border-radius: 4px;
        color: #17233f;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: none;
        font-size: 14px;
        font-weight: 600;
        padding: 12px 14px 12px 42px;
        transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    }

    #login-modal .form-control::placeholder {
        color: #98a6bf;
        font-weight: 600;
    }

    #login-modal .form-control:focus {
        border-color: rgba(36, 91, 255, 0.62);
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(36, 91, 255, 0.10);
    }

    #login-modal .login-submit-btn {
        width: 100%;
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 8px;
        color: #ffffff !important;
        background: linear-gradient(90deg, #1f7bf7 0%, #245bff 48%, #6b00ff 100%) !important;
        box-shadow: 0 14px 28px rgba(52, 84, 255, 0.24);
        font-size: 14px;
        line-height: 1;
        font-weight: 800;
        text-decoration: none !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    #login-modal .login-submit-btn:hover {
        color: #ffffff !important;
        transform: translateY(-1px);
        box-shadow: 0 16px 30px rgba(52, 84, 255, 0.28);
    }

    #login-modal .login-modal-links {
        margin-top: 18px;
        padding-top: 16px;
        border-top: 1px solid #edf2fa;
    }

    #login-modal .login-modal-links-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
        color: #556784;
        font-size: 13px;
        line-height: 1.4;
        font-weight: 600;
    }

    #login-modal .login-modal-links-row:last-child {
        margin-bottom: 0;
    }

    #login-modal .login-modal-links-row a {
        color: #245bff;
        font-weight: 800;
        text-decoration: none;
    }

    #login-modal .login-modal-links-row a:hover {
        text-decoration: underline;
    }


    @media (max-width: 767.98px) {
        .signup-page-ui .signup-auth-shell {
            padding: 24px 0;
        }

        .signup-page-ui .signup-card .card-body {
            padding: 18px;
        }

        .signup-page-ui .signup-header {
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 22px;
            padding-bottom: 18px;
        }

        .signup-page-ui .signup-header-icon {
            width: 48px;
            height: 48px;
            min-width: 48px;
            border-radius: 12px;
            font-size: 18px;
        }

        .signup-page-ui .signup-title {
            font-size: 23px;
        }

        .signup-page-ui .signup-subtitle {
            font-size: 12px;
        }

        .signup-page-ui .form-control {
            min-height: 46px;
            font-size: 13px;
        }


        #login-modal .modal-dialog {
            max-width: calc(100vw - 24px);
            min-height: calc(100vh - 1.5rem);
            margin: 0.75rem auto;
        }
    }

    /* =============================================
       Signup Page UI End
    ============================================= */

   /* =============================================
       Refund Policy Page UI Start
    ============================================= */

    .refund-policy-page-ui {
        position: relative;
    }

    .refund-policy-page-ui .refund-showcase {
        border: 0;
        background: #ffffff;
    }

    .refund-policy-page-ui .refund-showcase > .card-body {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .refund-policy-page-ui .section-title-ui {
        width: 100%;
        margin: 0 auto 42px;
        padding: 8px 16px 0;
        text-align: center;
    }

    .refund-policy-page-ui .section-title-ui__title {
        margin: 0;
        color: #07143c;
        font-size: 36px;
        line-height: 1.12;
        font-weight: 800;
    }

    .refund-policy-page-ui .section-title-ui__accent {
        color: #245bff;
    }

    .refund-policy-page-ui .section-title-ui__subtitle {
        margin: 8px auto 0;
        max-width: 650px;
        color: #6d7791;
        font-size: 14px;
        line-height: 1.55;
        font-weight: 500;
    }

    .refund-policy-page-ui .section-title-ui__bar {
        width: 170px;
        height: 2px;
        margin: 12px auto 0;
        border-radius: 999px;
        background: linear-gradient(to right, transparent, #245bff, transparent);
    }

    .refund-policy-page-ui .refund-content-card {
        position: relative;
        isolation: isolate;
        width: 100%;
        max-width: 1080px;
        margin: 0 auto;
        overflow: hidden;
    }

    .refund-policy-page-ui .refund-content-card::after {
        content: "";
        position: absolute;
        top: -58px;
        right: -54px;
        width: 150px;
        height: 150px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(36, 91, 255, 0.13) 0%, rgba(36, 91, 255, 0) 68%);
        z-index: 0;
        pointer-events: none;
    }

    .refund-policy-page-ui .refund-content-card > .card-body {
        position: relative;
        z-index: 2;
        padding: 0px;
    }

    .refund-policy-page-ui .refund-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 26px;
        padding-bottom: 22px;
        border-bottom: 1px solid #edf2fa;
    }

    .refund-policy-page-ui .refund-title-wrap {
        display: flex;
        align-items: center;
        gap: 16px;
        min-width: 0;
    }

    .refund-policy-page-ui .refund-card-subtitle {
        margin: 5px 0 0;
        color: #6d7791;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 600;
    }

    .refund-policy-page-ui .refund-pill {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 13px;
        border-radius: 999px;
        color: #243c8b;
        border: 1px solid #a3c3ff;
        background: #eff3ff;
        box-shadow: 0 8px 18px rgba(36, 91, 255, 0.10);
        font-size: 12px;
        line-height: 1;
        font-weight: 800;
        white-space: nowrap;
    }

    .refund-policy-page-ui .refund-content-box {
        position: relative;
        padding: 26px;
        border-radius: 8px;
        border: 1px solid #edf2fa;
        background: #ffffff;
        box-shadow: 0 12px 24px rgba(18, 44, 96, 0.04);
        color: #52617a;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 500;
        overflow-wrap: anywhere;
    }

    .refund-policy-page-ui .refund-content-box p {
        margin-bottom: 14px;
        color: #52617a;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 500;
    }

    .refund-policy-page-ui .refund-content-box p:last-child {
        margin-bottom: 0;
    }

    .refund-policy-page-ui .refund-content-box h1,
    .refund-policy-page-ui .refund-content-box h2,
    .refund-policy-page-ui .refund-content-box h3,
    .refund-policy-page-ui .refund-content-box h4,
    .refund-policy-page-ui .refund-content-box h5,
    .refund-policy-page-ui .refund-content-box h6 {
        margin-top: 20px;
        margin-bottom: 12px;
        color: #07143c;
        line-height: 1.25;
        font-weight: 800;
    }

    .refund-policy-page-ui .refund-content-box h1:first-child,
    .refund-policy-page-ui .refund-content-box h2:first-child,
    .refund-policy-page-ui .refund-content-box h3:first-child,
    .refund-policy-page-ui .refund-content-box h4:first-child,
    .refund-policy-page-ui .refund-content-box h5:first-child,
    .refund-policy-page-ui .refund-content-box h6:first-child {
        margin-top: 0;
    }

    .refund-policy-page-ui .refund-content-box ul,
    .refund-policy-page-ui .refund-content-box ol {
        margin: 14px 0;
        padding-left: 22px;
        color: #52617a;
    }

    .refund-policy-page-ui .refund-content-box li {
        margin-bottom: 8px;
        color: #52617a;
        line-height: 1.65;
    }

    .refund-policy-page-ui .refund-content-box a {
        color: #245bff;
        font-weight: 700;
        text-decoration: none;
    }

    .refund-policy-page-ui .refund-content-box a:hover {
        text-decoration: underline;
    }

    .refund-policy-page-ui .refund-content-box table {
        width: 100%;
        margin: 18px 0;
        border-collapse: collapse;
        border: 1px solid #edf2fa;
        overflow: hidden;
        border-radius: 8px;
    }

    .refund-policy-page-ui .refund-content-box table th,
    .refund-policy-page-ui .refund-content-box table td {
        padding: 12px 14px;
        border: 1px solid #edf2fa;
        color: #52617a;
        font-size: 14px;
        line-height: 1.5;
    }

    .refund-policy-page-ui .refund-content-box table th {
        color: #173562;
        background: #f8fbff;
        font-weight: 800;
    }

    @media (max-width: 767.98px) {
        .refund-policy-page-ui .refund-showcase > .card-body {
            padding-top: 34px;
            padding-bottom: 34px;
        }

        .refund-policy-page-ui .section-title-ui {
            margin-bottom: 24px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .refund-policy-page-ui .section-title-ui__title {
            font-size: 28px;
        }

        .refund-policy-page-ui .section-title-ui__subtitle {
            font-size: 13px;
        }

        .refund-policy-page-ui .refund-content-card > .card-body {
            padding: 28px 18px 22px;
        }

        .refund-policy-page-ui .refund-card-header {
            align-items: flex-start;
            flex-direction: column;
            gap: 14px;
            margin-bottom: 22px;
            padding-bottom: 18px;
        }

        .refund-policy-page-ui .refund-title-wrap {
            align-items: flex-start;
            gap: 12px;
        }

        .refund-policy-page-ui .refund-card-subtitle {
            font-size: 12px;
        }

        .refund-policy-page-ui .refund-pill {
            width: 100%;
            justify-content: center;
        }

        .refund-policy-page-ui .refund-content-box {
            padding: 18px;
            font-size: 14px;
        }

        .refund-policy-page-ui .refund-content-box p {
            font-size: 14px;
        }
    }

    /* =============================================
       Refund Policy Page UI End
    ============================================= */


 .subscription-page {
    min-height: 100vh;
    padding: 22px;
    background:#ffffff;
    border-radius:4px;
  
  }

  .subscription-topheader {
    margin: 18px auto 0;
  }

  .subscription-topheader .hero {
    position: relative;
    padding: 40px 42px;
    text-align: center;
    border: 1px solid #dbe7fb;
    border-radius: 8px;
    color: #ffffff;
    background:
      radial-gradient(circle at 10% 16%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 30%),
      linear-gradient(120deg, #0679ff 0%, #3454ff 52%, #6700ff 100%);
    box-shadow: 0 20px 48px rgba(36, 91, 255, 0.2);
    overflow: hidden;
  }

  .subscription-topheader .hero::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -120px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
  }

  .subscription-topheader .hero h1,
  .subscription-topheader .hero p,
  .subscription-topheader .hero .cta-btn {
    position: relative;
    z-index: 1;
  }

  .subscription-topheader .hero h1 {
    max-width: 880px;
    margin: 0 auto 15px;
    color: #ffffff;
    font-size: 34px;
    line-height: 1.16;
    font-weight: 700;
  }

  .subscription-topheader .hero p {
    margin: 0;
    color: #ffffff;
    opacity: 0.92;
    font-size: 15px;
    line-height: 1.6;
  }

  .subscription-topheader .hero .cta-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 28px 0 15px 0;
    padding: 0 24px;
    border-radius: 8px;
    color: #245bff;
    background: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .subscription-topheader .hero .cta-btn:hover {
    color: #245bff;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(10, 35, 95, 0.18);
  }

  .subscription-topheader .achievements {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: -30px;
    padding: 0 20px;
  }

  .subscription-topheader .tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 20px;
    border: 1px solid #dbe7fb;
    border-radius: 8px;
    color: #173562;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(18, 44, 96, 0.08);
    font-size: 13px;
    font-weight: 700;
  }

  .subscription-topheader .tag i {
    color: #245bff;
  }

  .subscription-section-title {
    width: 100%;
    max-width: 760px;
    margin: 46px auto 42px;
    padding: 0 16px;
    text-align: center;
  }

  .subscription-section-title h2 {
    margin: 0;
    color: #07143c;
    font-size: 36px;
    line-height: 1.12;
    font-weight: 800;
  }

  .subscription-section-title h2 span {
    color: #245bff;
  }

  .subscription-section-title p {
    max-width: 560px;
    margin: 8px auto 0;
    color: #6d7791;
    font-size: 14px;
    line-height: 1.55;
  }

  .subscription-section-title__bar {
    width: 170px;
    height: 2px;
    margin: 12px auto 0;
    border-radius: 999px;
    background: linear-gradient(to right, transparent, #245bff, transparent);
  }

  .pricing-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin: 0 auto;
  }

  .plan {
    position: relative;
    isolation: isolate;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
    border: 1px solid #dbe7fb;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(18, 44, 96, 0.08);
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }

  .plan::before {
    content: "";
    position: absolute;
    inset: 0 24px auto;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, rgba(36, 91, 255, 0), rgba(36, 91, 255, 0.9), rgba(36, 91, 255, 0));
    z-index: 0;
  }

  .plan::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(36, 91, 255, 0.12) 0%, rgba(36, 91, 255, 0) 68%);
    z-index: 0;
  }

  .plan > * {
    position: relative;
    z-index: 1;
  }

  .plan:hover {
    transform: translateY(-4px);
    border-color: rgba(36, 91, 255, 0.35);
    box-shadow: 0 22px 46px rgba(18, 44, 96, 0.12);
  }

  .ribbon {
    position: absolute;
    top: 30px;
    right: -54px;
    width: 190px;
    padding: 6px;
    color: #604300;
    background: #ffcf3b;
    box-shadow: 0 8px 18px rgba(255, 181, 35, 0.24);
    transform: rotate(45deg);
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  .plan .title {
    margin: 0 0 7px;
    color: #07143c;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;
  }

  .plan .subtitle {
    margin-bottom: 20px;
    color: #667795;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
  }

  .plan .price {
    margin-bottom: 22px;
    padding: 6px 14px;
    border: 1px solid #a3c3ff;
    border-radius: 8px;
    color: #07143c;
    background: #eff3ff;
    font-size: 26px;
    line-height: 1;
    font-weight: 700;
  }

  .plan ul {
    flex-grow: 1;
    margin-bottom: 26px;
    padding-left: 0;
    list-style: none;
  }

  .plan ul li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 11px;
    color: #40506a;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
  }

  .plan ul li::before {
    content: "\2713";
    width: 22px;
    height: 22px;
    min-width: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    border-radius: 999px;
    color: #245bff;
    background: #eef4ff;
    font-size: 12px;
    font-weight: 800;
  }

  .btn-row {
    display: flex;
    gap: 10px;
    margin-top: auto;
  }

  .btn-sub {
    flex: 1;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: 2px solid transparent;
    border-radius: 8px;
    text-align: center;
    text-decoration: none !important;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
  }

  .btn-outline {
    border-color: #245bff;
    color: #245bff;
    background: transparent;
  }

  .btn-outline:hover {
    color: #ffffff;
    background: #245bff;
  }

  .btn-solid {
    color: #ffffff !important;
    border-color: transparent;
    background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%);
    box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
  }

  .btn-solid:hover {
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(36, 91, 255, 0.3);
  }

  .btn.btn-subscribed {
    flex: 1;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: 2px solid #20b86d;
    border-radius: 8px;
    color: #ffffff !important;
    background-color: #20b86d;
    text-align: center;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 700;
    cursor: not-allowed;
  }

  .btn.btn-subscribed:hover {
    color: #ffffff !important;
    background: #20b86d;
    border: 2px solid #20b86d;
  }

  .btn.btn-in-review {
    flex: 1;
    min-height: 44px;
    border-radius: 8px;
    color: #604300 !important;
    background-color: #ffcf3b;
    border-color: #ffcf3b;
    font-weight: 800;
    cursor: not-allowed;
  }

  a:focus {
    outline: none;
  }

  @media (max-width: 1199px) {
    .pricing-container {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 768px) {
    .subscription-section-title {
      margin-top: 34px;
      margin-bottom: 24px;
      padding-left: 10px;
      padding-right: 10px;
    }

    .subscription-section-title h2 {
      font-size: 30px;
    }

    .subscription-section-title p {
      font-size: 13px;
    }

    .subscription-topheader .hero {
      padding: 34px 22px;
    }

    .subscription-topheader .hero h1 {
      font-size: 20px;
    }

    .subscription-topheader .hero p {
      font-size: 14px;
    }

    .subscription-topheader .achievements {
      gap: 10px;
    }

    .pricing-container {
      grid-template-columns: 1fr;
    }

    .plan {
      padding: 24px;
    }

    .plan .price {
      font-size: 28px;
    }
  }

  @media (max-width: 480px) {
    .subscription-topheader,
    .pricing-container {
      width: calc(100% - 20px);
    }

    .subscription-topheader .tag {
      width: 100%;
      justify-content: center;
      text-align: center;
    }

    .btn-row {
      flex-direction: column;
    }
    .subscription-page{
      padding:4px;
    }
  }
 

 /* =============================================
       Terms Condition Page UI Start
    ============================================= */

    .terms-condition-page-ui {
        position: relative;
    }

    .terms-condition-page-ui .terms-showcase {
        border: 0;
        background: #ffffff;
    }

    .terms-condition-page-ui .terms-showcase > .card-body {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .terms-condition-page-ui .section-title-ui {
        width: 100%;
        max-width: 820px;
        margin: 0 auto 42px;
        padding: 8px 16px 0;
        text-align: center;
    }

    .terms-condition-page-ui .section-title-ui__title {
        margin: 0;
        color: #07143c;
        font-size: 36px;
        line-height: 1.12;
        font-weight: 800;
    }

    .terms-condition-page-ui .section-title-ui__accent {
        color: #245bff;
    }

    .terms-condition-page-ui .section-title-ui__subtitle {
        margin: 8px auto 0;
        max-width: 650px;
        color: #6d7791;
        font-size: 14px;
        line-height: 1.55;
        font-weight: 500;
    }

    .terms-condition-page-ui .section-title-ui__bar {
        width: 170px;
        height: 2px;
        margin: 12px auto 0;
        border-radius: 999px;
        background: linear-gradient(to right, transparent, #245bff, transparent);
    }

    .terms-condition-page-ui .terms-content-card {
        position: relative;
        isolation: isolate;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }

    .terms-condition-page-ui .terms-content-card::after {
        content: "";
        position: absolute;
        top: -58px;
        right: -54px;
        width: 150px;
        height: 150px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(36, 91, 255, 0.13) 0%, rgba(36, 91, 255, 0) 68%);
        z-index: 0;
        pointer-events: none;
    }

    .terms-condition-page-ui .terms-content-card > .card-body {
        position: relative;
        z-index: 2;
        padding: 34px 30px 34px;
    }

    .terms-condition-page-ui .terms-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 26px;
        padding-bottom: 22px;
        border-bottom: 1px solid #edf2fa;
    }

    .terms-condition-page-ui .terms-title-wrap {
        display: flex;
        align-items: center;
        gap: 16px;
        min-width: 0;
    }

    .terms-condition-page-ui .terms-card-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: #ffffff;
        background: linear-gradient(135deg, #0679ff 0%, #3454ff 54%, #6700ff 100%);
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
        font-size: 22px;
    }

    .terms-condition-page-ui .terms-card-title {
        margin: 0;
        color: #07143c;
        font-size: 24px;
        line-height: 1.2;
        font-weight: 800;
    }

    .terms-condition-page-ui .terms-card-subtitle {
        margin: 5px 0 0;
        color: #6d7791;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 600;
    }

    .terms-condition-page-ui .terms-pill {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 13px;
        border-radius: 999px;
        color: #243c8b;
        border: 1px solid #a3c3ff;
        background: #eff3ff;
        box-shadow: 0 8px 18px rgba(36, 91, 255, 0.10);
        font-size: 12px;
        line-height: 1;
        font-weight: 800;
        white-space: nowrap;
    }

    .terms-condition-page-ui .terms-content-box {
        position: relative;
        padding: 26px;
        border-radius: 8px;
        border: 1px solid #edf2fa;
        background: #ffffff;
        box-shadow: 0 12px 24px rgba(18, 44, 96, 0.04);
        color: #52617a;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 500;
        overflow-wrap: anywhere;
    }

    .terms-condition-page-ui .terms-content-box p {
        margin-bottom: 14px;
        color: #52617a;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 500;
    }

    .terms-condition-page-ui .terms-content-box p:last-child {
        margin-bottom: 0;
    }

    .terms-condition-page-ui .terms-content-box h1,
    .terms-condition-page-ui .terms-content-box h2,
    .terms-condition-page-ui .terms-content-box h3,
    .terms-condition-page-ui .terms-content-box h4,
    .terms-condition-page-ui .terms-content-box h5,
    .terms-condition-page-ui .terms-content-box h6 {
        margin-top: 20px;
        margin-bottom: 12px;
        color: #07143c;
        line-height: 1.25;
        font-weight: 800;
    }

    .terms-condition-page-ui .terms-content-box h1:first-child,
    .terms-condition-page-ui .terms-content-box h2:first-child,
    .terms-condition-page-ui .terms-content-box h3:first-child,
    .terms-condition-page-ui .terms-content-box h4:first-child,
    .terms-condition-page-ui .terms-content-box h5:first-child,
    .terms-condition-page-ui .terms-content-box h6:first-child {
        margin-top: 0;
    }

    .terms-condition-page-ui .terms-content-box ul,
    .terms-condition-page-ui .terms-content-box ol {
        margin: 14px 0;
        padding-left: 22px;
        color: #52617a;
    }

    .terms-condition-page-ui .terms-content-box li {
        margin-bottom: 8px;
        color: #52617a;
        line-height: 1.65;
    }

    .terms-condition-page-ui .terms-content-box a {
        color: #245bff;
        font-weight: 700;
        text-decoration: none;
    }

    .terms-condition-page-ui .terms-content-box a:hover {
        text-decoration: underline;
    }

    .terms-condition-page-ui .terms-content-box table {
        width: 100%;
        margin: 18px 0;
        border-collapse: collapse;
        border: 1px solid #edf2fa;
        overflow: hidden;
        border-radius: 8px;
    }

    .terms-condition-page-ui .terms-content-box table th,
    .terms-condition-page-ui .terms-content-box table td {
        padding: 12px 14px;
        border: 1px solid #edf2fa;
        color: #52617a;
        font-size: 14px;
        line-height: 1.5;
    }

    .terms-condition-page-ui .terms-content-box table th {
        color: #173562;
        background: #f8fbff;
        font-weight: 800;
    }

    @media (max-width: 767.98px) {
        .terms-condition-page-ui .terms-showcase > .card-body {
            padding-top: 34px;
            padding-bottom: 34px;
        }

        .terms-condition-page-ui .section-title-ui {
            margin-bottom: 24px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .terms-condition-page-ui .section-title-ui__title {
            font-size: 28px;
        }

        .terms-condition-page-ui .section-title-ui__subtitle {
            font-size: 13px;
        }

        .terms-condition-page-ui .terms-content-card > .card-body {
            padding: 28px 18px 22px;
        }

        .terms-condition-page-ui .terms-card-header {
            align-items: flex-start;
            flex-direction: column;
            gap: 14px;
            margin-bottom: 22px;
            padding-bottom: 18px;
        }

        .terms-condition-page-ui .terms-title-wrap {
            align-items: flex-start;
            gap: 12px;
        }

        .terms-condition-page-ui .terms-card-icon {
            width: 48px;
            height: 48px;
            min-width: 48px;
            border-radius: 12px;
            font-size: 18px;
        }

        .terms-condition-page-ui .terms-card-title {
            font-size: 20px;
        }

        .terms-condition-page-ui .terms-card-subtitle {
            font-size: 12px;
        }

        .terms-condition-page-ui .terms-pill {
            width: 100%;
            justify-content: center;
        }

        .terms-condition-page-ui .terms-content-box {
            padding: 18px;
            font-size: 14px;
        }

        .terms-condition-page-ui .terms-content-box p {
            font-size: 14px;
        }
    }

    /* =============================================
       Terms Condition Page UI End
    ============================================= */

 /* =============================================
       Previous Results Page UI Start
    ============================================= */

    .previous-results-page-ui {
        position: relative;
    }

    .previous-results-page-ui .previous-results-showcase {
        border: 0;
        background: #ffffff;
    }

    .previous-results-page-ui .previous-results-showcase > .card-body {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .previous-results-page-ui .section-title-ui {
        width: 100%;
        max-width: 760px;
        margin: 0 auto 42px;
        padding: 8px 16px 0;
        text-align: center;
    }

    .previous-results-page-ui .section-title-ui__title {
        margin: 0;
        color: #07143c;
        font-size: 36px;
        line-height: 1.12;
        font-weight: 800;
    }

    .previous-results-page-ui .section-title-ui__accent {
        color: #245bff;
    }

    .previous-results-page-ui .section-title-ui__subtitle {
        margin: 8px auto 0;
        max-width: 620px;
        color: #6d7791;
        font-size: 14px;
        line-height: 1.55;
        font-weight: 500;
    }

    .previous-results-page-ui .section-title-ui__bar {
        width: 170px;
        height: 2px;
        margin: 12px auto 0;
        border-radius: 999px;
        background: linear-gradient(to right, transparent, #245bff, transparent);
    }

    .previous-results-page-ui .previous-results-card {
        position: relative;
        isolation: isolate;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }

    .previous-results-page-ui .previous-results-card > .card-body {
        position: relative;
        z-index: 2;
        padding: 0px;
    }

    .previous-results-page-ui .previous-results-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 24px;
        padding-bottom: 20px;
        border-bottom: 1px solid #edf2fa;
    }

    .previous-results-page-ui .previous-results-title-wrap {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
    }

    .previous-results-page-ui .previous-results-icon {
        width: 54px;
        height: 54px;
        min-width: 54px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: #ffffff;
        background: linear-gradient(135deg, #0679ff 0%, #3454ff 54%, #6700ff 100%);
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
        font-size: 20px;
    }

    .previous-results-page-ui .previous-results-card-title {
        margin: 0;
        color: #07143c;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 800;
    }

    .previous-results-page-ui .previous-results-card-subtitle {
        margin: 5px 0 0;
        color: #6d7791;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 600;
    }

    .previous-results-page-ui .previous-results-pill {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 13px;
        border-radius: 999px;
        color: #243c8b;
        border: 1px solid #a3c3ff;
        background: #eff3ff;
        box-shadow: 0 8px 18px rgba(36, 91, 255, 0.10);
        font-size: 12px;
        line-height: 1;
        font-weight: 800;
        white-space: nowrap;
    }

    .previous-results-page-ui .previous-results-table-wrap {
        border: 1px solid #edf2fa;
        border-radius: 8px;
        overflow: hidden;
        background: #ffffff;
        box-shadow: 0 10px 24px rgba(18, 44, 96, 0.04);
    }

    .previous-results-page-ui .table {
        margin-bottom: 0;
        color: #52617a;
        border-collapse: separate;
        border-spacing: 0;
    }

    .previous-results-page-ui .table thead th {
        padding: 16px 14px;
        border: 0;
        border-bottom: 1px solid #edf2fa;
        color: #173562;
        background: #f8fbff;
        font-size: 12px;
        line-height: 1.25;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    .previous-results-page-ui .table tbody th,
    .previous-results-page-ui .table tbody td {
        padding: 16px 14px;
        border-top: 0;
        border-bottom: 1px solid #edf2fa;
        color: #52617a;
        font-size: 14px;
        line-height: 1.35;
        font-weight: 600;
        vertical-align: middle;
        white-space: nowrap;
    }

    .previous-results-page-ui .table tbody tr:last-child th,
    .previous-results-page-ui .table tbody tr:last-child td {
        border-bottom: 0;
    }

    .previous-results-page-ui .table tbody tr {
        transition: background 0.22s ease;
    }

    .previous-results-page-ui .table tbody tr:hover {
        background: #f8fbff;
    }

    .previous-results-page-ui .result-sr {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        color: #245bff;
        background: #eff3ff;
        border: 1px solid #dbe7fb;
        font-size: 13px;
        font-weight: 800;
    }

    .previous-results-page-ui .student-name {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #07143c;
        font-weight: 800;
    }

    .previous-results-page-ui .student-name i {
        color: #245bff;
        font-size: 13px;
    }

    .previous-results-page-ui .accuracy-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 28px;
        padding: 5px 11px;
        border-radius: 999px;
        color: #096b3b;
        border: 1px solid #68dd9a;
        background: #c9f8dc;
        font-size: 12px;
        line-height: 1;
        font-weight: 800;
    }

    .previous-results-page-ui .result-date {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: #40506a;
        font-size: 13px;
        font-weight: 700;
    }

    .previous-results-page-ui .result-date i {
        color: #245bff;
        font-size: 13px;
    }

    .previous-results-page-ui .previous-results-empty {
        padding: 42px 20px;
        text-align: center;
    }

    .previous-results-page-ui .previous-results-empty img {
        max-height: 200px;
        width: auto;
    }

    @media (max-width: 767.98px) {
        .previous-results-page-ui .previous-results-showcase > .card-body {
            padding-top: 34px;
            padding-bottom: 34px;
        }

        .previous-results-page-ui .section-title-ui {
            margin-bottom: 24px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .previous-results-page-ui .section-title-ui__title {
            font-size: 28px;
        }

        .previous-results-page-ui .section-title-ui__subtitle {
            font-size: 13px;
        }

        .previous-results-page-ui .previous-results-card > .card-body {
            padding: 28px 18px 22px;
        }

        .previous-results-page-ui .previous-results-card-header {
            align-items: flex-start;
            flex-direction: column;
            gap: 14px;
        }

        .previous-results-page-ui .previous-results-icon {
            width: 48px;
            height: 48px;
            min-width: 48px;
            border-radius: 12px;
            font-size: 18px;
        }

        .previous-results-page-ui .previous-results-card-title {
            font-size: 19px;
        }

        .previous-results-page-ui .previous-results-card-subtitle {
            font-size: 12px;
        }

        .previous-results-page-ui .table thead th,
        .previous-results-page-ui .table tbody th,
        .previous-results-page-ui .table tbody td {
            padding: 14px 12px;
            font-size: 13px;
        }
    }

    /* =============================================
       Previous Results Page UI End
    ============================================= */

 /* =============================================
       User Dictation List Page UI Start
    ============================================= */

    .user-dictation-page-ui {
        position: relative;
    }

    .user-dictation-page-ui .user-dictation-showcase {
        border: 0;
        background: #ffffff;
    }

    .user-dictation-page-ui .user-dictation-showcase > .card-body {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .user-dictation-page-ui .section-title-ui {
        width: 100%;
        max-width: 100%;
        margin: 0 0 44px;
        padding: 8px 0 0;
        text-align: left;
    }

    .user-dictation-page-ui .section-title-ui__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: nowrap;
    }

    .user-dictation-page-ui .section-title-ui__content {
        min-width: 0;
        flex: 1 1 auto;
    }

    .user-dictation-page-ui .section-title-ui__title {
        margin: 0;
        color: #07143c;
        font-size: 36px;
        line-height: 1.12;
        font-weight: 800;
    }

    .user-dictation-page-ui .section-title-ui__accent {
        color: #245bff;
    }

    .user-dictation-page-ui .section-title-ui__subtitle {
        margin: 8px 0 0;
        max-width: 560px;
        color: #6d7791;
        font-size: 14px;
        line-height: 1.55;
        font-weight: 500;
    }

    .user-dictation-page-ui .section-title-ui__bar {
        width: 170px;
        height: 2px;
        margin: 12px 0 0;
        border-radius: 999px;
        background: linear-gradient(to right, #245bff, rgba(36, 91, 255, 0.08));
    }

    .user-dictation-page-ui .add-dictation-btn {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 0 18px;
        border: 0;
        border-radius: 8px;
        color: #ffffff !important;
        background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%) !important;
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
        text-decoration: none !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .user-dictation-page-ui .add-dictation-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(36, 91, 255, 0.30);
        color: #ffffff !important;
    }


    .user-dictation-page-ui .dictation-card {
        position: relative;
        isolation: isolate;
        width: 100%;
        /*min-height: 360px;*/
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0;
        border-radius: 8px;
        border: 1px solid rgba(214, 226, 244, 0.95);
        color: #52617a;
        background: #ffffff;
        overflow: hidden;
        text-decoration: none !important;
        box-shadow: 0 14px 30px rgba(18, 44, 96, 0.06);
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }

    .user-dictation-page-ui .dictation-card:hover {
        transform: translateY(-2px);
        color: #52617a;
        border-color: rgba(36, 91, 255, 0.45);
        box-shadow: 0 24px 46px rgba(25, 44, 76, 0.17);
        text-decoration: none;
    }

    .user-dictation-page-ui .dictation-card::after {
        content: "";
        position: absolute;
        top: -58px;
        right: -54px;
        width: 150px;
        height: 150px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(36, 91, 255, 0.13) 0%, rgba(36, 91, 255, 0) 68%);
        z-index: 0;
        pointer-events: none;
    }

    .user-dictation-page-ui .dictation-card__body-wrap {
        position: relative;
        z-index: 1;
        padding: 24px 22px 0;
    }

    .user-dictation-page-ui .dictation-card__top {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        padding-bottom: 16px;
        border-bottom: 1px solid #edf2fa;
    }

    .user-dictation-page-ui .instructor-text {
        margin: 0;
        color: #07143c;
        font-family: inherit;
        font-size: 20px !important;
        line-height: 1.25;
        font-weight: 800;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .user-dictation-page-ui .dictation-card__body {
        position: relative;
        z-index: 1;
        padding-top: 18px;
    }

    .user-dictation-page-ui .dictation-card__score {
        width: max-content;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        padding: 4px 12px;
        border-radius: 999px;
        border: 1px solid #a3c3ff;
        color: #243c8b;
        background: #eff3ff;
        box-shadow: 0 8px 18px rgba(246, 147, 52, 0.12);
    }

    .user-dictation-page-ui .dictation-card__score-bars {
        display: inline-flex;
        align-items: flex-end;
        gap: 2px;
        height: 16px;
    }

    .user-dictation-page-ui .dictation-card__score-bars span {
        width: 3px;
        border-radius: 999px;
        background: linear-gradient(180deg, #4a73ff 0%, #18aeff 100%);
    }

    .user-dictation-page-ui .dictation-card__score-bars span:nth-child(1) {
        height: 6px;
    }

    .user-dictation-page-ui .dictation-card__score-bars span:nth-child(2) {
        height: 9px;
    }

    .user-dictation-page-ui .dictation-card__score-bars span:nth-child(3) {
        height: 12px;
    }

    .user-dictation-page-ui .dictation-card__score-bars span:nth-child(4) {
        height: 15px;
    }

    .user-dictation-page-ui .dictation-card__score strong {
        color: #1b1b1b;
        font-size: 15px;
        line-height: 1;
        font-weight: 500;
    }

    .user-dictation-page-ui .dictation-card__score small {
        color: #272727;
        font-size: 14px;
        font-weight: 500;
    }

    .user-dictation-page-ui .dictation-card__progress {
        width: 100%;
        height: 4px;
        margin-bottom: 16px;
        border-radius: 999px;
        background: #e8eef7;
        overflow: hidden;
    }

    .user-dictation-page-ui .dictation-card__progress span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #3e7aff 0%, #1b54ef 100%);
    }

    .user-dictation-page-ui .dictation-card__facts {
        display: grid;
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .user-dictation-page-ui .dictation-card__facts li {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        color: #55647b;
        font-size: 14px;
        line-height: 1.35;
        font-weight: 500;
    }

    .user-dictation-page-ui .dictation-card__facts li:not(:first-child) .dictation-card__dot {
        margin-top: 5px;
    }

    .user-dictation-page-ui .dictation-card__content-preview {
        color: #33435c;
        font-size: 15px;
        line-height: 1.5;
        font-weight: 600;
    }

    .user-dictation-page-ui .dictation-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .user-dictation-page-ui .dictation-card__time {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: #40506a;
        font-size: 14px;
        line-height: 1.35;
        font-weight: 700;
    }

    .user-dictation-page-ui .dictation-card__time i {
        color: #74839c;
        font-size: 14px;
    }

    .user-dictation-page-ui .dictation-card__dot {
        width: 9px;
        height: 9px;
        flex: 0 0 9px;
        margin-top: 6px;
        border-radius: 999px;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.72);
    }

    .user-dictation-page-ui .dictation-card__dot--topic {
        background: #18aaf3;
    }

    .user-dictation-page-ui .dictation-card__dot--speed {
        background: #1fc5b3;
    }

    .user-dictation-page-ui .dictation-card__dot--time {
        background: #ffa51c;
    }

    .user-dictation-page-ui .dictation-card__dot--date {
        background: #f0327c;
    }

    .user-dictation-page-ui .dictation-card__footer {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 14px 22px 22px;
    }

    .user-dictation-page-ui .dictation-card__date {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 30px;
        padding: 6px 12px;
        border-radius: 999px;
        color: #40506a;
        background: #f8fbff;
        border: 1px solid #dbe7fb;
        font-size: 12px;
        line-height: 1;
        font-weight: 700;
    }

    .user-dictation-page-ui .dictation-card__date i {
        color: #245bff;
        font-size: 13px;
    }

    .user-dictation-page-ui .dictation-card__cta {
        width:100%;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 0 18px;
        border: 0;
        border-radius: 8px;
        color: #ffffff !important;
        background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%);
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
        text-decoration: none !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .user-dictation-page-ui .dictation-card__cta:hover {
        color: #ffffff !important;
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(36, 91, 255, 0.30);
    }

    .user-dictation-page-ui .user-dictation-empty {
        max-width: 520px;
        margin: 0 auto;
        padding: 42px 24px;
        border-radius: 8px;
        border: 1px dashed #cdd9ed;
        background:
            radial-gradient(circle at 12% 0, rgba(36, 91, 255, 0.10) 0%, rgba(36, 91, 255, 0) 34%),
            linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        text-align: center;
    }

    .user-dictation-page-ui .user-dictation-empty i {
        width: 62px;
        height: 62px;
        margin: 0 auto 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        color: #245bff;
        background: #eef4ff;
        border: 1px solid #dbe7fb;
        font-size: 28px;
    }

    .user-dictation-page-ui .user-dictation-empty h4 {
        margin: 0 0 8px;
        color: #07143c;
        font-size: 20px;
        font-weight: 800;
    }

    .user-dictation-page-ui .user-dictation-empty p {
        margin: 0;
        color: #6d7791;
        font-size: 14px;
        font-weight: 500;
    }

    /* Modal UI */
    .user-dictation-page-ui #user_modal .modal-dialog {
        max-width: 760px;
    }

    .user-dictation-page-ui #user_modal .modal-content {
        border: 1px solid rgba(214, 226, 244, 0.95);
        border-radius: 12px;
        overflow: hidden;
        background:
            radial-gradient(circle at 100% 0, rgba(36, 91, 255, 0.10) 0%, rgba(36, 91, 255, 0) 32%),
            linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        box-shadow: 0 24px 58px rgba(18, 44, 96, 0.18);
    }

    .user-dictation-page-ui #user_modal .modal-header {
        padding: 22px 24px;
        border-bottom: 1px solid #edf2fa;
    }

    .user-dictation-page-ui #user_modal .modal-title {
        color: #07143c;
        font-size: 22px;
        font-weight: 800;
    }

    .user-dictation-page-ui #user_modal .close {
        width: 38px;
        height: 38px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #243c8b;
        background: #eff3ff;
        border: 1px solid #a3c3ff;
        opacity: 1;
    }

    .user-dictation-page-ui #user_modal .modal-body {
        padding: 24px;
    }

    .user-dictation-page-ui #user_modal .form-label {
        display: block;
        margin-bottom: 8px;
        color: #173562;
        font-size: 13px;
        line-height: 1.2;
        font-weight: 700;
    }

    .user-dictation-page-ui #user_modal .form-control {
        width: 100%;
        min-height: 48px;
        border: 1px solid #dbe7fb;
        border-radius: 10px;
        color: #17233f;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 8px 20px rgba(34, 59, 102, 0.05);
        font-size: 14px;
        font-weight: 600;
        padding: 12px 14px;
        transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    }

    .user-dictation-page-ui #user_modal textarea.form-control {
        min-height: 126px;
        resize: vertical;
        line-height: 1.55;
    }

    .user-dictation-page-ui #user_modal .form-control:focus {
        border-color: rgba(36, 91, 255, 0.62);
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(36, 91, 255, 0.10);
    }

    .user-dictation-page-ui .modal-action-btn {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 18px;
        border: 0;
        border-radius: 8px;
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
        text-decoration: none !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .user-dictation-page-ui .modal-action-btn--close {
        color: #9f1239 !important;
        border: 1px solid #fda4af;
        background: #ffe4e6 !important;
    }

    .user-dictation-page-ui .modal-action-btn--save {
        color: #ffffff !important;
        background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%) !important;
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
    }

    .user-dictation-page-ui .modal-action-btn--save:disabled {
        cursor: not-allowed;
        opacity: 0.72;
        box-shadow: none;
    }

    @media (max-width: 575.98px) {
        .user-dictation-page-ui .user-dictation-showcase > .card-body {
            padding-top: 34px;
            padding-bottom: 34px;
        }

        .user-dictation-page-ui .section-title-ui {
            margin-bottom: 24px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .user-dictation-page-ui .section-title-ui__top {
            align-items: stretch;
            flex-direction: column;
            gap: 18px;
        }

        .user-dictation-page-ui .section-title-ui__title {
            font-size: 28px;
        }

        .user-dictation-page-ui .section-title-ui__subtitle {
            font-size: 13px;
        }

        .user-dictation-page-ui .add-dictation-btn {
            width: 100%;
            min-height: 42px;
        }

        .user-dictation-page-ui .dictation-card {
            min-height: auto;
        }

        .user-dictation-page-ui .dictation-card__body-wrap {
            padding: 22px 18px 0;
        }

        .user-dictation-page-ui .instructor-text {
            font-size: 19px !important;
        }

        .user-dictation-page-ui .dictation-card__footer {
            align-items: stretch;
            flex-direction: column;
            padding: 18px;
        }

        .user-dictation-page-ui .dictation-card__cta {
            width: 100%;
            min-height: 42px;
        }

        .user-dictation-page-ui #user_modal .modal-body {
            padding: 20px 18px;
        }

        .user-dictation-page-ui .modal-action-btn {
            width: 100%;
            min-height: 42px;
        }
    }

    /* =============================================
       User Dictation List Page UI End
    ============================================= */

 /* =============================================
     Classroom Detail Page UI Start
  ============================================= */

  .class-view-page-ui {
    position: relative;
  }

  .class-view-page-ui .class-view-showcase {
    border: 0;
    background: #ffffff;
  }

  .class-view-page-ui .class-view-showcase .card-body {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .class-view-page-ui .section-title-ui {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 42px;
    padding: 8px 16px 0;
    text-align: center;
  }

  .class-view-page-ui .section-title-ui__title {
    margin: 0;
    color: #07143c;
    font-size: 36px;
    line-height: 1.12;
    font-weight: 800;
  }

  .class-view-page-ui .section-title-ui__accent {
    color: #245bff;
  }

  .class-view-page-ui .section-title-ui__subtitle {
    margin: 8px auto 0;
    max-width: 560px;
    color: #6d7791;
    font-size: 14px;
    line-height: 1.55;
  }

  .class-view-page-ui .section-title-ui__bar {
    width: 170px;
    height: 2px;
    margin: 12px auto 0;
    border-radius: 999px;
    background: linear-gradient(to right, transparent, #245bff, transparent);
  }

  .class-view-page-ui .class-detail-hero,
  .class-view-page-ui .class-dictation-card,
  .class-view-page-ui .class-material-card,
  .class-view-page-ui .class-empty-state {
    border-radius: 8px;
    border: 1px solid rgba(214, 226, 244, 0.95);
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(18, 44, 96, 0.06);
  }

  .class-view-page-ui .class-detail-hero {
    position: relative;
    isolation: isolate;
    margin-bottom: 34px;
    padding: 28px;
    overflow: hidden;
    background:
      radial-gradient(circle at 100% 0, rgba(36, 91, 255, 0.10) 0%, rgba(36, 91, 255, 0) 32%),
      linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  }

  .class-view-page-ui .class-detail-hero::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -64px;
    width: 170px;
    height: 170px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(36, 91, 255, 0.12) 0%, rgba(36, 91, 255, 0) 68%);
    z-index: -1;
  }

  .class-view-page-ui .class-detail-hero__badge,
  .class-view-page-ui .class-detail-hero__meta span,
  .class-view-page-ui .class-dictation-card__category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
  }

  .class-view-page-ui .class-detail-hero__badge {
    width: max-content;
    max-width: 100%;
    margin-bottom: 14px;
    padding: 7px 13px;
    color: #243c8b;
    background: #eff3ff;
    border: 1px solid #a3c3ff;
  }

  .class-view-page-ui .class-detail-hero__title {
    margin: 0;
    color: #07143c;
    font-size: 30px;
    line-height: 1.18;
    font-weight: 800;
  }

  .class-view-page-ui .class-detail-hero__desc {
    margin: 12px 0 0;
    color: #55647b;
    font-size: 15px;
    line-height: 1.65;
    font-weight: 500;
  }

  .class-view-page-ui .class-detail-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
  }

  .class-view-page-ui .class-detail-hero__meta span {
    min-height: 32px;
    padding: 6px 12px;
    color: #40506a;
    background: #ffffff;
    border: 1px solid #dbe7fb;
    box-shadow: 0 8px 18px rgba(18, 44, 96, 0.05);
  }

  .class-view-page-ui .class-detail-hero__meta i {
    color: #245bff;
    font-size: 13px;
  }

  .class-view-page-ui .class-view-section {
    margin-top: 38px;
  }

  .class-view-page-ui .class-view-section__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
  }

  .class-view-page-ui .class-view-section__heading h3 {
    margin: 0;
    color: #07143c;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
  }

  .class-view-page-ui .class-view-section__heading p {
    margin: 6px 0 0;
    color: #6d7791;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
  }

  .class-view-page-ui .class-dictation-card {
    position: relative;
    isolation: isolate;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 24px 22px 22px;
    border-color: #bfd2ff;
    background:
      radial-gradient(circle at 100% 0, rgba(36, 91, 255, 0.07) 0%, rgba(36, 91, 255, 0) 34%),
      linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(18, 44, 96, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .class-view-page-ui .class-dictation-card:hover {
    transform: translateY(-2px);
    border-color: rgba(36, 91, 255, 0.58);
    box-shadow: 0 24px 46px rgba(25, 44, 76, 0.13);
  }

  .class-view-page-ui .class-dictation-card::after {
    content: "";
    position: absolute;
    top: -58px;
    right: -54px;
    width: 150px;
    height: 150px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(36, 91, 255, 0.12) 0%, rgba(36, 91, 255, 0) 68%);
    z-index: -1;
  }

  .class-view-page-ui .class-dictation-card__title {
    margin: 0 0 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e8eef7;
    color: #07143c;
    font-size: 20px;
    line-height: 1.28;
    font-weight: 900;
    letter-spacing: -0.025em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .class-view-page-ui .class-dictation-card__metric {
    margin-bottom: 18px;
  }

  .class-view-page-ui .class-dictation-card__score {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid #a3c3ff;
    color: #07143c;
    background: #eff3ff;
    font-size: 15px;
    line-height: 1;
    font-weight: 800;
  }

  .class-view-page-ui .class-dictation-card__score small {
    color: #07143c;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
  }

  .class-view-page-ui .class-dictation-card__score-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
  }

  .class-view-page-ui .class-dictation-card__score-bars span {
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #4a73ff 0%, #18aeff 100%);
  }

  .class-view-page-ui .class-dictation-card__score-bars span:nth-child(1) {
    height: 6px;
  }

  .class-view-page-ui .class-dictation-card__score-bars span:nth-child(2) {
    height: 9px;
  }

  .class-view-page-ui .class-dictation-card__score-bars span:nth-child(3) {
    height: 12px;
  }

  .class-view-page-ui .class-dictation-card__score-bars span:nth-child(4) {
    height: 15px;
  }

  .class-view-page-ui .class-dictation-card__progress {
    width: 100%;
    height: 4px;
    margin-top: 10px;
    border-radius: 999px;
    background: #e8eef7;
    overflow: hidden;
  }

  .class-view-page-ui .class-dictation-card__progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3e7aff 0%, #1b54ef 100%);
  }

  .class-view-page-ui .class-dictation-card__facts {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .class-view-page-ui .class-dictation-card__facts li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #07143c;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
  }

  .class-view-page-ui .class-dictation-card__dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    margin-top: 6px;
    border-radius: 999px;
  }

  .class-view-page-ui .class-dictation-card__dot--topic {
    background: #18aaf3;
  }

  .class-view-page-ui .class-dictation-card__dot--category {
    background: #1fc5b3;
  }

  .class-view-page-ui .class-dictation-card__dot--time {
    background: #ffa51c;
  }

  .class-view-page-ui .class-dictation-card__dot--access {
    background: #f0327c;
  }

  .class-view-page-ui .class-dictation-card__topic {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .class-view-page-ui .class-dictation-card__source {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .class-view-page-ui .class-dictation-card__source-photo,
  .class-view-page-ui .class-dictation-card__source-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 999px;
    border: 1px solid #d8e2f0;
  }

  .class-view-page-ui .class-dictation-card__source-photo {
    object-fit: cover;
  }

  .class-view-page-ui .class-dictation-card__source-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #245bff;
    background: #eff3ff;
    font-size: 14px;
  }

  .class-view-page-ui .class-dictation-card__source-name {
    display: -webkit-box;
    color: #33435c;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 800;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .class-view-page-ui .class-dictation-card__free {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid #68dd9a;
    color: #096b3b;
    background: #c9f8dc;
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
  }

  .class-view-page-ui .class-dictation-card__footer {
    margin-top: auto;
    padding-top: 36px;
  }

  .class-view-page-ui .class-dictation-card__time {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #40506a;
    font-size: 15px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
  }

  .class-view-page-ui .class-dictation-card__time i {
    color: #74839c;
  }

  .class-view-page-ui .class-view-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    color: #ffffff !important;
    background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%);
    box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
  }

  .class-view-page-ui .class-view-btn:hover {
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(36, 91, 255, 0.30);
  }

  .class-view-page-ui .class-dictation-card .class-view-btn {
    width: 100%;
    min-height: 48px;
    font-size: 15px;
    font-weight: 800;
  }

  .class-view-page-ui .class-material-card {
    overflow: hidden;
  }

  .class-view-page-ui .class-material-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #edf2fa;
    background:
      radial-gradient(circle at 100% 0, rgba(36, 91, 255, 0.08) 0%, rgba(36, 91, 255, 0) 30%),
      #f8fbff;
  }

  .class-view-page-ui .class-material-card__header h4 {
    margin: 0;
    color: #07143c;
    font-size: 18px;
    font-weight: 800;
  }

  .class-view-page-ui .class-material-card__viewer {
    width: 100%;
    min-height: 620px;
    display: block;
    border: 0;
    background: #f8fbff;
  }

  .class-view-page-ui .class-empty-state {
    padding: 38px 20px;
    border-style: dashed;
    background:
      radial-gradient(circle at 12% 0, rgba(36, 91, 255, 0.10) 0%, rgba(36, 91, 255, 0) 34%),
      linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    text-align: center;
  }

  .class-view-page-ui .class-empty-state i {
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #245bff;
    background: #eef4ff;
    border: 1px solid #dbe7fb;
    font-size: 26px;
  }

  .class-view-page-ui .class-empty-state h4 {
    margin: 0 0 7px;
    color: #07143c;
    font-size: 20px;
    font-weight: 800;
  }

  .class-view-page-ui .class-empty-state p {
    margin: 0;
    color: #6d7791;
    font-size: 14px;
    font-weight: 500;
  }

  @media (max-width: 767.98px) {
    .class-view-page-ui .class-view-showcase .card-body {
      padding-top: 34px;
      padding-bottom: 34px;
    }

    .class-view-page-ui .section-title-ui {
      margin-bottom: 24px;
      padding-left: 10px;
      padding-right: 10px;
    }

    .class-view-page-ui .section-title-ui__title {
      font-size: 28px;
    }

    .class-view-page-ui .section-title-ui__subtitle {
      font-size: 13px;
    }

    .class-view-page-ui .class-detail-hero {
      padding: 22px 18px;
    }

    .class-view-page-ui .class-detail-hero__title {
      font-size: 24px;
    }

    .class-view-page-ui .class-view-section__heading,
    .class-view-page-ui .class-dictation-card__footer,
    .class-view-page-ui .class-material-card__header {
      align-items: stretch;
      flex-direction: column;
    }

    .class-view-page-ui .class-view-btn {
      width: 100%;
    }

    .class-view-page-ui .class-material-card__viewer {
      min-height: 460px;
    }
  }

  /* =============================================
     Classroom Detail Page UI End
  ============================================= */

 /* =============================================
       Order Detail Page UI Start
    ============================================= */

    .order-detail-page-ui {
        position: relative;
    }

    .order-detail-page-ui .order-detail-showcase {
        border: 0;
        background: #ffffff;
    }

    .order-detail-page-ui .order-detail-showcase > .card-body {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .order-detail-page-ui .section-title-ui {
        width: 100%;
        max-width: 760px;
        margin: 0 auto 42px;
        padding: 8px 16px 0;
        text-align: center;
    }

    .order-detail-page-ui .section-title-ui__title {
        margin: 0;
        color: #07143c;
        font-size: 36px;
        line-height: 1.12;
        font-weight: 800;
    }

    .order-detail-page-ui .section-title-ui__accent {
        color: #245bff;
    }

    .order-detail-page-ui .section-title-ui__subtitle {
        margin: 8px auto 0;
        max-width: 580px;
        color: #6d7791;
        font-size: 14px;
        line-height: 1.55;
        font-weight: 500;
    }

    .order-detail-page-ui .section-title-ui__bar {
        width: 170px;
        height: 2px;
        margin: 12px auto 0;
        border-radius: 999px;
        background: linear-gradient(to right, transparent, #245bff, transparent);
    }

    .order-detail-page-ui .order-detail-card {
        position: relative;
        isolation: isolate;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }

 


    .order-detail-page-ui .order-detail-card > .card-body {
        position: relative;
        z-index: 2;
        padding: 0px;
    }

    .order-detail-page-ui .order-detail-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 26px;
        padding-bottom: 22px;
        border-bottom: 1px solid #edf2fa;
    }

    .order-detail-page-ui .order-detail-title-wrap {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
    }

    .order-detail-page-ui .order-detail-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: #ffffff;
        background: linear-gradient(135deg, #0679ff 0%, #3454ff 54%, #6700ff 100%);
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
        font-size: 22px;
    }

    .order-detail-page-ui .order-detail-title {
        margin: 0;
        color: #07143c;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 800;
    }

    .order-detail-page-ui .order-detail-subtitle {
        margin: 5px 0 0;
        color: #6d7791;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 600;
    }

    .order-detail-page-ui .order-id-pill {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 13px;
        border-radius: 999px;
        color: #243c8b;
        border: 1px solid #a3c3ff;
        background: #eff3ff;
        box-shadow: 0 8px 18px rgba(36, 91, 255, 0.10);
        font-size: 12px;
        line-height: 1;
        font-weight: 800;
        white-space: nowrap;
    }

    .order-detail-page-ui .order-detail-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .order-detail-page-ui .order-info-item {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 14px;
        min-height: 92px;
        padding: 18px;
        border-radius: 8px;
        border: 1px solid #edf2fa;
        background: #ffffff;
        box-shadow: 0 12px 24px rgba(18, 44, 96, 0.04);
        transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    }

    .order-detail-page-ui .order-info-item:hover {
        border-color: rgba(36, 91, 255, 0.35);
    }

    .order-detail-page-ui .order-info-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        color: #245bff;
        background: #eff3ff;
        border: 1px solid #dbe7fb;
        font-size: 16px;
    }

    .order-detail-page-ui .order-info-content {
        min-width: 0;
        flex: 1;
    }

    .order-detail-page-ui .order-info-label {
        display: block;
        margin-bottom: 6px;
        color: #6d7791;
        font-size: 12px;
        line-height: 1.2;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .order-detail-page-ui .order-info-value {
        margin: 0;
        color: #07143c;
        font-size: 15px;
        line-height: 1.45;
        font-weight: 700;
        word-break: break-word;
    }

    .order-detail-page-ui .order-amount-value {
        color: #096b3b;
    }

    .order-detail-page-ui .order-discount-value {
        color: #8a5a00;
    }

    .order-detail-page-ui .order-status {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 15px;
        line-height: 1;
        font-weight: 700;
        white-space: nowrap;
    }

    .order-detail-page-ui .order-status--pending {
        color: #243c8b;
     
    }

    .order-detail-page-ui .order-status--review {
        color: #8a5a00;

    }

    .order-detail-page-ui .order-status--success {
        color: #096b3b;
    
    }

    .order-detail-page-ui .order-status--danger {
        color: #9f1239;

    }

    .order-detail-page-ui .order-screenshot-item {
        grid-column: 1 / -1;
        min-height: auto;
    }

    .order-detail-page-ui .order-screenshot {
        display: inline-block;
        max-width: 220px;
        padding: 8px;
        border-radius: 12px;
        border: 1px solid #dbe7fb;
        background: #f8fbff;
        box-shadow: 0 12px 24px rgba(18, 44, 96, 0.06);
    }

    .order-detail-page-ui .order-screenshot img {
        display: block;
        max-height: 200px;
        max-width: 200px;
        width: auto;
        border-radius: 10px;
    }

    .order-detail-page-ui .order-back-row {
        margin-top: 24px;
        padding-top: 22px;
        border-top: 1px solid #edf2fa;
        display: flex;
        justify-content: flex-end;
    }

    .order-detail-page-ui .order-back-btn {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 0 18px;
        border-radius: 8px;
        color: #ffffff !important;
        background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%) !important;
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
        text-decoration: none !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .order-detail-page-ui .order-back-btn:hover {
        color: #ffffff !important;
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(36, 91, 255, 0.30);
    }

    @media (max-width: 767.98px) {
        .order-detail-page-ui .order-detail-showcase > .card-body {
            padding-top: 34px;
            padding-bottom: 34px;
        }

        .order-detail-page-ui .section-title-ui {
            margin-bottom: 24px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .order-detail-page-ui .section-title-ui__title {
            font-size: 28px;
        }

        .order-detail-page-ui .section-title-ui__subtitle {
            font-size: 13px;
        }

        .order-detail-page-ui .order-detail-card > .card-body {
            padding: 28px 18px 22px;
        }

        .order-detail-page-ui .order-detail-header {
            align-items: flex-start;
            flex-direction: column;
            gap: 14px;
        }

        .order-detail-page-ui .order-detail-icon {
            width: 48px;
            height: 48px;
            min-width: 48px;
            border-radius: 12px;
            font-size: 18px;
        }

        .order-detail-page-ui .order-detail-title {
            font-size: 19px;
        }

        .order-detail-page-ui .order-detail-subtitle {
            font-size: 12px;
        }

        .order-detail-page-ui .order-detail-grid {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .order-detail-page-ui .order-info-item {
            min-height: auto;
            padding: 10px;
        }

        .order-detail-page-ui .order-back-row {
            justify-content: stretch;
        }

        .order-detail-page-ui .order-back-btn {
            width: 100%;
            min-height: 44px;
        }
        
        .order-detail-page-ui .order-info-icon {
            width: 36px;
            height: 36px;
            min-width: 36px;
            font-size: 14px;
        }
    }

    /* =============================================
       Order Detail Page UI End
    ============================================= */

 /* =============================================
       My Result Details Page UI Start
    ============================================= */

    .my-result-detail-page-ui {
        position: relative;
    }
    
    .my-result-detail-page-ui .result-detail-showcase {
        border: 0;
        background: #ffffff;
    }

    .my-result-detail-page-ui .result-detail-showcase > .card-body {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .my-result-detail-page-ui .section-title-ui {
        width: 100%;
        max-width: 760px;
        margin: 0 auto 42px;
        padding: 8px 16px 0;
        text-align: center;
    }

    .my-result-detail-page-ui .section-title-ui__title {
        margin: 0;
        color: #07143c;
        font-size: 36px;
        line-height: 1.12;
        font-weight: 800;
    }

    .my-result-detail-page-ui .section-title-ui__accent {
        color: #245bff;
    }

    .my-result-detail-page-ui .section-title-ui__subtitle {
        margin: 8px auto 0;
        max-width: 580px;
        color: #6d7791;
        font-size: 14px;
        line-height: 1.55;
        font-weight: 500;
    }

    .my-result-detail-page-ui .section-title-ui__bar {
        width: 170px;
        height: 2px;
        margin: 12px auto 0;
        border-radius: 999px;
        background: linear-gradient(to right, transparent, #245bff, transparent);
    }

    .my-result-detail-page-ui .result-detail-card {
        position: relative;
        isolation: isolate;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }

    .my-result-detail-page-ui .result-detail-card > .card-body {
        position: relative;
        z-index: 2;
        padding: 0;
    }

    .my-result-detail-page-ui .result-detail-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 26px;
        padding-bottom: 22px;
        border-bottom: 1px solid #edf2fa;
    }

    .my-result-detail-page-ui .result-detail-title-wrap {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
    }

    .my-result-detail-page-ui .result-detail-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: #ffffff;
        background: linear-gradient(135deg, #0679ff 0%, #3454ff 54%, #6700ff 100%);
        box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
        font-size: 22px;
    }

    .my-result-detail-page-ui .result-detail-title {
        margin: 0;
        color: #07143c;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 800;
    }

    .my-result-detail-page-ui .result-detail-subtitle {
        margin: 5px 0 0;
        color: #6d7791;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 600;
    }

    .my-result-detail-page-ui .result-detail-pill {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 13px;
        border-radius: 999px;
        color: #243c8b;
        border: 1px solid #a3c3ff;
        background: #eff3ff;
        box-shadow: 0 8px 18px rgba(36, 91, 255, 0.10);
        font-size: 12px;
        line-height: 1;
        font-weight: 800;
        white-space: nowrap;
    }

    .my-result-detail-page-ui .result-detail-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-bottom: 24px;
    }

    .my-result-detail-page-ui .result-info-item {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 14px;
        min-height: 92px;
        padding: 18px;
        border-radius: 8px;
        border: 1px solid #edf2fa;
        background: #ffffff;
        box-shadow: 0 12px 24px rgba(18, 44, 96, 0.04);
        overflow: hidden;
    }

    .my-result-detail-page-ui .result-info-item:hover {
        border-color: rgba(36, 91, 255, 0.35);
    }

    .my-result-detail-page-ui .result-info-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        color: #245bff;
        background: #eff3ff;
        border: 1px solid #dbe7fb;
        font-size: 16px;
    }

    .my-result-detail-page-ui .result-info-content {
        min-width: 0;
        flex: 1;
    }

    .my-result-detail-page-ui .result-info-label {
        display: block;
        margin-bottom: 6px;
        color: #6d7791;
        font-size: 12px;
        line-height: 1.2;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .my-result-detail-page-ui .result-info-value {
        margin: 0;
        color: #07143c;
        font-size: 15px;
        line-height: 1.45;
        font-weight: 700;
        word-break: break-word;
    }

    .my-result-detail-page-ui .answer-sheet-item {
        grid-column: 1 / -1;
        min-height: auto;
        padding: 0;
        gap: 0;
        overflow: hidden;
    }

    .my-result-detail-page-ui .answer-sheet-card {
        width: 100%;
        border: 1px solid #edf2fa;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 12px 24px rgba(18, 44, 96, 0.04);
        overflow: hidden;
    }

    .my-result-detail-page-ui .answer-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 18px 20px;
        border-bottom: 1px solid #edf2fa;
        background: #f8fbff;
    }

    .my-result-detail-page-ui .answer-sheet-title {
        margin: 0;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: #07143c;
        font-size: 18px;
        line-height: 1.25;
        font-weight: 800;
    }

    .my-result-detail-page-ui .answer-sheet-title i {
        color: #245bff;
    }

    .my-result-detail-page-ui .answer-sheet-body {
        padding: 22px;
        color: #52617a;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 500;
        max-height: 520px;
        overflow: auto;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .my-result-detail-page-ui .answer-sheet-body::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .my-result-detail-page-ui .answer-sheet-body::-webkit-scrollbar-track {
        background: #f1f5ff;
        border-radius: 999px;
    }

    .my-result-detail-page-ui .answer-sheet-body::-webkit-scrollbar-thumb {
        background: #c4d3f3;
        border-radius: 999px;
    }

    .my-result-detail-page-ui .answer-sheet-body::-webkit-scrollbar-thumb:hover {
        background: #9db8ec;
    }

    @media (max-width: 991.98px) {
        .my-result-detail-page-ui .result-detail-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 767.98px) {
        .my-result-detail-page-ui .result-detail-showcase > .card-body {
            padding-top: 34px;
            padding-bottom: 34px;
        }

        .my-result-detail-page-ui .section-title-ui {
            margin-bottom: 24px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .my-result-detail-page-ui .section-title-ui__title {
            font-size: 28px;
        }

        .my-result-detail-page-ui .section-title-ui__subtitle {
            font-size: 13px;
        }

        .my-result-detail-page-ui .result-detail-card > .card-body {
            padding: 28px 18px 22px;
        }

        .my-result-detail-page-ui .result-detail-header {
            align-items: flex-start;
            flex-direction: column;
            gap: 14px;
            margin-bottom: 22px;
            padding-bottom: 18px;
        }

        .my-result-detail-page-ui .result-detail-title-wrap {
            align-items: flex-start;
            gap: 12px;
        }

        .my-result-detail-page-ui .result-detail-icon {
            width: 48px;
            height: 48px;
            min-width: 48px;
            border-radius: 12px;
            font-size: 18px;
        }

        .my-result-detail-page-ui .result-detail-title {
            font-size: 19px;
        }

        .my-result-detail-page-ui .result-detail-subtitle {
            font-size: 12px;
        }

        .my-result-detail-page-ui .result-detail-pill {
            width: 100%;
            justify-content: center;
        }

        .my-result-detail-page-ui .result-detail-grid {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .my-result-detail-page-ui .result-info-item {
            min-height: auto;
            padding: 18px;
        }

        .my-result-detail-page-ui .answer-sheet-header {
            align-items: flex-start;
            flex-direction: column;
            padding: 16px 18px;
        }

        .my-result-detail-page-ui .answer-sheet-title {
            font-size: 16px;
        }

        .my-result-detail-page-ui .answer-sheet-body {
            padding: 18px;
            max-height: 440px;
            font-size: 14px;
        }
    }

    /* =============================================
       My Result Details Page UI End
    ============================================= */

/* =============================================
     Weekly Test Page UI Start
  ============================================= */

  .weekly-test-page-ui {
    position: relative;
  }

  .weekly-test-page-ui .weekly-test-showcase {
    border: 0;
    background: #ffffff;
  }

  .weekly-test-page-ui .weekly-test-showcase .card-body {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .weekly-test-page-ui .section-title-ui {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 50px;
    padding: 8px 16px 0;
    text-align: center;
  }

  .weekly-test-page-ui .section-title-ui__title {
    margin: 0;
    color: #07143c;
    font-size: 36px;
    line-height: 1.12;
    font-weight: 800;
  }

  .weekly-test-page-ui .section-title-ui__accent {
    color: #245bff;
  }

  .weekly-test-page-ui .section-title-ui__subtitle {
    margin: 8px auto 0;
    max-width: 560px;
    color: #6d7791;
    font-size: 14px;
    line-height: 1.55;
  }

  .weekly-test-page-ui .section-title-ui__bar {
    width: 170px;
    height: 2px;
    margin: 12px auto 0;
    border-radius: 999px;
    background: linear-gradient(to right, transparent, #245bff, transparent);
  }

  .weekly-test-page-ui .weekly-test-card {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 386px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(214, 226, 244, 0.95);
    color: #52617a;
    background: #ffffff;
    overflow: hidden;
    text-decoration: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .weekly-test-page-ui .weekly-test-card:hover {
    color: #52617a;
    border-color: rgba(36, 91, 255, 0.45);
    box-shadow: 0 24px 46px rgba(25, 44, 76, 0.17);
    text-decoration: none !important;
  }

  .weekly-test-page-ui .weekly-test-card::after {
    content: "";
    position: absolute;
    top: -58px;
    right: -54px;
    width: 150px;
    height: 150px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(36, 91, 255, 0.13) 0%, rgba(36, 91, 255, 0) 68%);
    z-index: 0;
  }

  .weekly-test-page-ui .weekly-test-card__body-wrap {
    position: relative;
    z-index: 1;
    padding: 24px 22px 0;
  }

  .weekly-test-page-ui .weekly-test-card__top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid #edf2fa;
  }

  .weekly-test-page-ui .weekly-test-card__title {
    margin: 0;
    color: #07143c;
    font-family: inherit;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 800;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .weekly-test-page-ui .weekly-test-card__date-badge {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: 999px;
    color: #8a5a00;
    border: 1px solid #f2bc38;
    background: #fff1bd;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
  }

  .weekly-test-page-ui .weekly-test-card__date-badge i {
    font-size: 12px;
  }

  .weekly-test-page-ui .weekly-test-card__body {
    position: relative;
    z-index: 1;
    padding-top: 18px;
  }

  .weekly-test-page-ui .weekly-test-card__score {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid #a3c3ff;
    color: #243c8b;
    background: #eff3ff;
    box-shadow: 0 8px 18px rgba(246, 147, 52, 0.12);
  }

  .weekly-test-page-ui .weekly-test-card__score-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
  }

  .weekly-test-page-ui .weekly-test-card__score-bars span {
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #4a73ff 0%, #18aeff 100%);
  }

  .weekly-test-page-ui .weekly-test-card__score-bars span:nth-child(1) {
    height: 6px;
  }

  .weekly-test-page-ui .weekly-test-card__score-bars span:nth-child(2) {
    height: 9px;
  }

  .weekly-test-page-ui .weekly-test-card__score-bars span:nth-child(3) {
    height: 12px;
  }

  .weekly-test-page-ui .weekly-test-card__score-bars span:nth-child(4) {
    height: 15px;
  }

  .weekly-test-page-ui .weekly-test-card__score strong {
    color: #1b1b1b;
    font-size: 15px;
    line-height: 1;
    font-weight: 500;
  }

  .weekly-test-page-ui .weekly-test-card__score small {
    color: #272727;
    font-size: 14px;
    font-weight: 500;
  }

  .weekly-test-page-ui .weekly-test-card__progress {
    width: 100%;
    height: 4px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: #e8eef7;
    overflow: hidden;
  }

  .weekly-test-page-ui .weekly-test-card__progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3e7aff 0%, #1b54ef 100%);
  }

  .weekly-test-page-ui .weekly-test-card__facts {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .weekly-test-page-ui .weekly-test-card__facts li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #55647b;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
  }

  .weekly-test-page-ui .weekly-test-card__facts li:not(:first-child) .weekly-test-card__dot {
    margin-top: 5px;
  }

  .weekly-test-page-ui .weekly-test-card__content-preview {
    color: #33435c;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 600;
  }

  .weekly-test-page-ui .weekly-test-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .weekly-test-page-ui .weekly-test-card__source {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .weekly-test-page-ui .weekly-test-card__source-photo {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid #d8e2f0;
  }

  .weekly-test-page-ui .weekly-test-card__source-name {
    color: #40506a;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
  }

  .weekly-test-page-ui .weekly-test-card__time {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #40506a;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
  }

  .weekly-test-page-ui .weekly-test-card__time i {
    color: #74839c;
    font-size: 14px;
  }

  .weekly-test-page-ui .weekly-test-card__dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    margin-top: 6px;
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.72);
  }

  .weekly-test-page-ui .weekly-test-card__dot--topic {
    background: #18aaf3;
  }

  .weekly-test-page-ui .weekly-test-card__dot--category {
    background: #1fc5b3;
  }

  .weekly-test-page-ui .weekly-test-card__dot--time {
    background: #ffa51c;
  }

  .weekly-test-page-ui .weekly-test-card__dot--date {
    background: #f0327c;
  }

  .weekly-test-page-ui .weekly-test-card__access {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 2px 12px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
  }

  .weekly-test-page-ui .weekly-test-card__access--open {
    color: #096b3b;
    border: 1px solid #68dd9a;
    background: #c9f8dc;
  }

  .weekly-test-page-ui .weekly-test-card__access--soon {
    color: #8a5a00;
    border: 1px solid #f2bc38;
    background: #ffe292;
  }

  .weekly-test-page-ui .weekly-test-card__cta {
    position: relative;
    z-index: 1;
    width: calc(100% - 44px);
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 14px 22px 22px;
    border-radius: 8px;
    color: #ffffff !important;
    background: linear-gradient(100deg, #0679ff 0%, #3454ff 52%, #6700ff 100%);
    box-shadow: 0 12px 24px rgba(36, 91, 255, 0.24);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background 0.25s ease, transform 0.25s ease;
  }

  .weekly-test-page-ui .weekly-test-card:hover .weekly-test-card__cta {
    background: linear-gradient(100deg, #006fec 0%, #2647ef 52%, #5600d8 100%);
  }

  .weekly-test-page-ui .weekly-test-card__cta--disabled {
    pointer-events: none;
    color: #8a5a00 !important;
    border: 1px solid #f2bc38;
    background: #ffe292 !important;
    box-shadow: none;
  }

  .weekly-test-page-ui .weekly-test-empty-state {
    padding: 38px 20px;
    text-align: center;
  }

  .weekly-test-page-ui .weekly-test-empty-state img {
    max-width: 260px;
    width: 100%;
    height: auto;
  }

  @media (max-width: 575.98px) {
    .weekly-test-page-ui .section-title-ui {
      margin-bottom: 24px;
      padding-left: 10px;
      padding-right: 10px;
    }

    .weekly-test-page-ui .section-title-ui__title {
      font-size: 28px;
    }

    .weekly-test-page-ui .section-title-ui__subtitle {
      font-size: 13px;
    }

    .weekly-test-page-ui .weekly-test-showcase .card-body {
      padding-top: 34px;
      padding-bottom: 34px;
    }

    .weekly-test-page-ui .weekly-test-card {
      min-height: auto;
    }

    .weekly-test-page-ui .weekly-test-card__body-wrap {
      padding: 22px 18px 0;
    }

    .weekly-test-page-ui .weekly-test-card__top {
      flex-direction: column;
      gap: 10px;
    }

    .weekly-test-page-ui .weekly-test-card__title {
      font-size: 19px;
    }

    .weekly-test-page-ui .weekly-test-card__cta {
      width: calc(100% - 36px);
      margin: 18px 18px 18px;
    }
  }

  /* =============================================
     Weekly Test Page UI End
  ============================================= */