.footer-wrapper {
    border-top-right-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
}

.site-announcement-bar {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: #f8fafc;
    color: #0f172a;
}

.site-announcement-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 52px;
    padding: 0.65rem 0;
}

.site-announcement-copy {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.site-announcement-label {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4f46e5;
    padding: 0.24rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 900;
}

.site-announcement-message {
    color: #334155;
    font-size: 0.9rem;
    font-weight: 700;
}

.site-announcement-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border-radius: 8px;
    background: #4f46e5;
    color: #ffffff;
    padding: 0.36rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.site-announcement-action:hover {
    color: #ffffff;
    background: #4338ca;
}

@media (max-width: 576px) {
    .site-announcement-inner {
        align-items: stretch;
        flex-direction: column;
    }

    .site-announcement-action {
        width: 100%;
    }
}

.badge,
.btn,
.card,
.profile-box,
.profile-sidebar .list-group-item,
.profile-banner,
.news-slide,
.card-footer:last-child,
.card-header:first-child,
.shared-rounded {
    border-radius: 0.5rem !important;
}

/* theme colors */

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #FF000A;
    --bs-btn-border-color: #FF000A;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #cc0007;
    --bs-btn-hover-border-color: #cc0007;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #FF000A;
    --bs-btn-active-border-color: #FF000A;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #FF000A;
    --bs-btn-disabled-border-color: #FF000A;
}

.btn-secondary {
    --bs-btn-color: #000;
    --bs-btn-bg: #E6E6E6;
    --bs-btn-border-color: #E6E6E6;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #b8b8b8;
    --bs-btn-hover-border-color: #b8b8b8;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #E6E6E6;
    --bs-btn-active-border-color: #E6E6E6;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #E6E6E6;
    --bs-btn-disabled-border-color: #E6E6E6;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(180deg, #f7f8ff 0%, #ffffff 100%);
    color: #1f2937;
}

/* shared */

input {
    text-align: right;
}

.tooltip,
.apexcharts-canvas,
#template-customizer,
body {
    font-family: IRANSansX !important;
}

body {
    text-align: right;
    direction: rtl;
    font-weight: 400;
}

.form-label,
.col-form-label,
.btn,
b,
strong,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold !important;
}

.text-justify {
    text-align: justify !important;
}

/* app theme toggle */

.main-navbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#dahi-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
}

#dahi-theme-toggle .material-icons-outlined {
    font-size: 1.2rem;
    line-height: 1;
}

#dahi-theme-toggle .dahi-theme-icon-light,
html.dahi-dark-mode #dahi-theme-toggle .dahi-theme-icon-dark {
    display: none;
}

html.dahi-dark-mode #dahi-theme-toggle .dahi-theme-icon-light {
    display: inline-flex;
}

html.dahi-dark-mode {
    color-scheme: dark;
}

html.dahi-dark-mode body {
    background: linear-gradient(180deg, #0b1020 0%, #111827 100%);
    color: #e5e7eb;
}

html.dahi-dark-mode .text-muted {
    color: #9ca3af !important;
}

html.dahi-dark-mode .bg-body-tertiary,
html.dahi-dark-mode .site-navbar,
html.dahi-dark-mode .card,
html.dahi-dark-mode .course-card,
html.dahi-dark-mode .account-page-hero,
html.dahi-dark-mode .account-card,
html.dahi-dark-mode .account-note-box,
html.dahi-dark-mode .profile-banner,
html.dahi-dark-mode .profile-sidebar .list-group-item,
html.dahi-dark-mode .faq-wrapper,
html.dahi-dark-mode .faq-wrapper .accordion-item,
html.dahi-dark-mode .faq-wrapper .accordion-button,
html.dahi-dark-mode .intro-2-icons > .row > div > div,
html.dahi-dark-mode .home-roadmap-item,
html.dahi-dark-mode .footer-wrapper,
html.dahi-dark-mode .learning-mini-footer {
    border-color: rgba(148, 163, 184, 0.18) !important;
    background: rgba(17, 24, 39, 0.88) !important;
    color: #e5e7eb !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

html.dahi-dark-mode .navbar-brand,
html.dahi-dark-mode .nav-link,
html.dahi-dark-mode a:not(.btn):not(.site-announcement-action) {
    color: #dbeafe;
}

html.dahi-dark-mode .nav-link:hover,
html.dahi-dark-mode a:not(.btn):not(.site-announcement-action):hover {
    color: #ffffff;
}

html.dahi-dark-mode .btn-outline-secondary {
    --bs-btn-color: #e5e7eb;
    --bs-btn-border-color: rgba(229, 231, 235, 0.35);
    --bs-btn-hover-color: #111827;
    --bs-btn-hover-bg: #e5e7eb;
    --bs-btn-hover-border-color: #e5e7eb;
}

html.dahi-dark-mode .form-control,
html.dahi-dark-mode .form-select,
html.dahi-dark-mode .input-group-text {
    border-color: rgba(148, 163, 184, 0.3);
    background-color: #111827;
    color: #e5e7eb;
}

html.dahi-dark-mode .form-control::placeholder {
    color: #94a3b8;
}

html.dahi-dark-mode .dropdown-menu,
html.dahi-dark-mode .list-group-item {
    border-color: rgba(148, 163, 184, 0.18);
    background-color: #111827;
    color: #e5e7eb;
}

html.dahi-dark-mode .site-announcement-bar {
    border-bottom-color: rgba(148, 163, 184, 0.16);
    background: #111827;
    color: #e5e7eb;
}

html.dahi-dark-mode .site-announcement-label {
    background: rgba(99, 102, 241, 0.2);
    color: #c7d2fe;
}

html.dahi-dark-mode .site-announcement-message {
    color: #cbd5e1;
}

html.dahi-dark-mode .faq-wrapper .accordion-button:not(.collapsed) {
    color: #fecaca;
    background: rgba(127, 29, 29, 0.35) !important;
}

html.dahi-dark-mode .faq-wrapper .accordion-body,
html.dahi-dark-mode .course-card-meta,
html.dahi-dark-mode .course-card-desc,
html.dahi-dark-mode .footer-wrapper,
html.dahi-dark-mode .footer-wrapper h5 {
    color: #cbd5e1 !important;
}

html.dahi-dark-mode #play-page .study-summary-card,
html.dahi-dark-mode #play-page .teach-card,
html.dahi-dark-mode #play-page .exam-card,
html.dahi-dark-mode #play-page .learning-readiness-panel,
html.dahi-dark-mode #play-page .learning-stage-panel,
html.dahi-dark-mode #play-page .learning-soft-gate,
html.dahi-dark-mode #play-page .learning-guidance-plan,
html.dahi-dark-mode #play-page .learning-memory-item,
html.dahi-dark-mode #play-page .learning-session-step,
html.dahi-dark-mode .learning-outcome-box {
    border-color: rgba(148, 163, 184, 0.18) !important;
    background: rgba(17, 24, 39, 0.92) !important;
    color: #e5e7eb !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
}

html.dahi-dark-mode #play-page .card-header,
html.dahi-dark-mode #play-page .card-footer {
    border-color: rgba(148, 163, 184, 0.16) !important;
    background: rgba(15, 23, 42, 0.7) !important;
}

html.dahi-dark-mode #play-page .teach-content-card .card-body,
html.dahi-dark-mode #play-page .exam-question-card .card-body,
html.dahi-dark-mode #play-page .teach-action-card .card-body {
    color: #f8fafc !important;
}

html.dahi-dark-mode #play-page .exam-question-text,
html.dahi-dark-mode #play-page .exam-question-text .blinking-cursor {
    color: #f8fafc !important;
}

html.dahi-dark-mode #play-page .learning-mode-heading,
html.dahi-dark-mode #play-page .teach-card-label,
html.dahi-dark-mode #play-page .teach-card-id,
html.dahi-dark-mode #play-page .learning-readiness-label,
html.dahi-dark-mode #play-page .learning-stage-label,
html.dahi-dark-mode #play-page .learning-guidance-action small {
    color: #a5b4fc !important;
}

html.dahi-dark-mode #play-page .study-mode-badge,
html.dahi-dark-mode #play-page .study-progress-pill {
    background: rgba(99, 102, 241, 0.18);
    color: #c7d2fe;
}

html.dahi-dark-mode #play-page .exam-question-card .form-check {
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.62);
}

html.dahi-dark-mode body.dahi-step-transition::before {
    background: rgba(2, 6, 23, 0.72);
}

/* slick plugin */

.slick-prev,
.slick-next {
    z-index: 99;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
    opacity: 1;

}

.slick-prev:before,
.slick-next:before {
    color: #000;
    background: #FFEDEE;
    border-radius: 13px;
}

.slick-next:before {
    content: "\ea50";
    font-family: boxicons !important;
}

.slick-prev:before {
    content: "\ea4d";
    font-family: boxicons !important;
}

.slick-prev:before,
.slick-next:before {
    font-size: 35px;
}

/* sep */

.sep-1 {
    margin: 0.5rem 0 !important;
}

.sep-2 {
    margin: 3rem 0 !important;
}

/* icons */

.custom-bx-text,
.bx {
    vertical-align: middle;
}

/* main-navbar */

.main-navbar-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-direction: row;
    gap: 1rem;
}

.main-navbar-wrapper>div {
    display: inline-flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
}

.site-navbar {
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
}

.site-logo {
    width: 40px;
}

@media (min-width: 992px) {
    .main-navbar-wrapper {
        align-items: center;
    }

    .main-navbar-wrapper>div {
        justify-content: center;
    }

    .main-navbar-wrapper .site-logo {
        width: 75px;
    }
}

/* intro-1 */

.intro-1-content {
    display: flex;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.intro-1-logo {
    display: flex;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    align-items: center;
}

.intro-1-content h3,
.intro-1-content h1 {
    font-weight: 900 !important;
    line-height: 1.25;
}

.intro-1-content h4,
.intro-1-content h2 {
    font-weight: 600 !important;
}

.intro-1-buttons {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (min-width: 992px) {

    .intro-1-logo {
        align-items: end;
    }
}

/* news-slick */

.news-slick-slider {
    padding: 1rem 0;
}

.intro-2-wrapper {
    padding: 1.25rem 0 0.5rem;
}

.intro-2-icons > .row > div > div {
    padding: 1rem 1.1rem;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 1rem;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    min-height: 120px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    justify-content: center;
    align-items: flex-start;
}

.home-roadmap-item {
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.home-roadmap-item:last-of-type {
    border-bottom: 0;
}

.news-slick-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.news-slide {
    padding: 2rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    background: #fff;
    text-align: center;
    margin: 10px;
    font-size: 0.8rem;
}

.news-slide h4 a {
    color: #000;
    text-decoration: none;
}

.news-slide h4 {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.news-slide p {
    font-size: 0.8rem;
    margin: 0;
}

.news-slide i {
    font-size: 1.2rem;
}

.news-slide i,
.news-slide span {
    vertical-align: middle;
}

.news-slide div {
    vertical-align: middle;
    direction: rtl;
}

/* faq-wrapper */

.faq-wrapper {
    padding: 2rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.05);
}

.faq-heading {
    max-width: 720px;
    margin-bottom: 1.25rem;
}

.faq-wrapper .accordion-item {
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.75rem !important;
    margin-bottom: 0.75rem;
    background: #fff;
}

.faq-wrapper .accordion-button {
    padding: 1.1rem 1.25rem;
    color: #111827;
    background: #fff;
    font-weight: 800;
}

.faq-wrapper .accordion-button:not(.collapsed) {
    color: #b91c1c;
    background: #fff5f5;
}

.faq-wrapper .accordion-button:focus {
    box-shadow: none;
}

.faq-wrapper .accordion-button::after {
    margin-left: 0;
    margin-right: auto;
}

.faq-wrapper .accordion-body {
    color: #4b5563;
    line-height: 2;
    padding: 1rem 1.25rem 1.25rem;
}

/* footer */

.footer-wrapper {
    color: #6b7280;
    padding: 3rem;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 1.5rem 1.5rem 0 0;
}

.footer-wrapper h5 {
    color: #000;
}

.footer-wrapper ul {
    margin: 0;
    padding: 0;
}

.footer-wrapper ul li {
    list-style-type: none;
}

.footer-wrapper ul li a {
    color: #7D7D7D;
    text-decoration: none;
}

.footer-wrapper ul li a:hover {
    color: #FF000A;
}

.footer-wrapper i {
    color: #7B7B7B;
}

/* profile */

.profile-banner {
    width: 100%;
    height: 170px;
    background-image: url('/public/app/images/profile1.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin-bottom: 2rem;
    position: relative;
}

.profile-avatar {
    position: absolute;
    border-radius: 50%;
    bottom: -25px;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
}

.profile-sidebar .list-group-item {
    color: #505050;
    margin-bottom: 1rem;
    border: none;
    background-color: #FBFBFB;
    font-weight: bold;
    bottom: 0;
}

.profile-sidebar .list-group-item:last-child {
    margin-bottom: 0;
}

.profile-sidebar .list-group-item:hover {
    background-color: #c8c8c8;
}

.profile-sidebar .material-icons-outlined {
    margin-left: 0.5rem;
}

.profile-username {
    font-weight: bold;
    text-align: center;
    margin-bottom: 2rem;
}

.profile-box {
    box-sizing: content-box;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    min-height: 170px;
    flex-direction: column;
    text-align: center;
}

.course-box-1:hover {
    background: linear-gradient(23deg, #DD2476 0%, #FF512F 100%);
    border-color: #FF512F;
}

.course-box-1 {
    background: linear-gradient(23deg, #FF512F 0%, #DD2476 100%);
    border-color: #DD2476;
}

/* .course-box-2:hover {
    color: #fff;
    border: none;
    background: #2948ff;
} */

.course-box-2 {
    color: #fff;
    border: none;
    background: #396afc;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2948ff, #396afc);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2948ff, #396afc); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    
}

.profile-box-1 {
    background: linear-gradient(23deg, #3C1849 0%, #703286 100%);
    border-color: #703286;
}

.profile-box-1:hover {
    background: linear-gradient(23deg, #703286 0%, #3C1849 100%);
    border-color: #3C1849;
}

.profile-box-2 {
    background: linear-gradient(23deg, #353535 0%, #564DC0 100%);
    border-color: #564DC0;
}

.profile-box-2:hover {
    background: linear-gradient(23deg, #564DC0 0%, #353535 100%);
    border-color: #353535;
}

.profile-box-3 {
    background: linear-gradient(23deg, #e2b25e 0%, #F7CC7F 100%);
    border-color: #F7CC7F;
}

/* .profile-box-3:hover {
    background: linear-gradient(23deg, #F7CC7F 0%, #e2b25e 100%);
    border-color: #e2b25e;
} */

.profile-box-4 {
    background: linear-gradient(23deg, #50BFA5 0%, #00DDA9 100%);
    border-color: #00DDA9;
}

.profile-box-4:hover {
    background: linear-gradient(23deg, #00DDA9 0%, #50BFA5 100%);
    border-color: #50BFA5;
}

.account-page-hero {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
    padding: 1.25rem;
    border-radius: 0.5rem;
}

.account-page-kicker {
    color: #9f1d35;
    font-size: 0.85rem;
    font-weight: 700;
}

.account-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: start;
}

.account-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
}

.account-card .card-header {
    background: #fbfbfd;
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

.account-metric {
    min-height: 120px;
    border-radius: 0.5rem;
    background: #fff7ed;
    border: 1px solid rgba(217, 119, 6, 0.18);
    color: #7c2d12;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    text-align: center;
}

.account-metric-subscription {
    background: #fff7ed;
}

.account-metric-value {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
}

.account-metric-label {
    color: #64748b;
    font-size: 0.85rem;
}

.account-main-line {
    font-size: 1rem;
}

.wallet-charge-grid {
    display: grid;
    grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1.2fr) minmax(140px, 0.7fr);
    gap: 1rem;
    align-items: end;
}

.wallet-balance-box {
    background: #ecfdf5;
    border: 1px solid rgba(5, 150, 105, 0.16);
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
}

.account-wallet-balance {
    display: block;
    color: #047857;
    font-size: 1.05rem;
    margin-top: 0.25rem;
}

.wallet-quick-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.wallet-quick-amounts .btn {
    border-color: rgba(15, 23, 42, 0.12);
}

.account-note-box {
    border: 1px dashed rgba(15, 23, 42, 0.18);
    border-radius: 0.5rem;
    background: #f8fafc;
    padding: 1rem;
}

.withdraw-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.withdraw-summary-item {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.5rem;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
    padding: 1rem;
}

.withdraw-summary-item strong {
    display: block;
    margin-top: 0.35rem;
}

.withdraw-rules {
    color: #475569;
    font-size: 0.9rem;
}

.affiliate-link-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
}

@media (max-width: 767.98px) {
    .wallet-charge-grid {
        grid-template-columns: 1fr;
    }

    .withdraw-summary {
        grid-template-columns: 1fr;
    }

    .affiliate-link-box {
        grid-template-columns: 1fr;
    }

    .account-hero-actions .btn,
    .wallet-submit-box .btn {
        width: 100%;
    }
}

/* courses */

.courses-hero {
    padding: 1.25rem 1.35rem;
    border-radius: 0.5rem;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
}

.course-card {
    border-radius: 0.5rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #fff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
}

.course-card-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 0.35rem;
    padding: 0.35rem 0.7rem;
    background: #eef7f4;
    color: #19745f;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
}

.course-card-main {
    min-width: 0;
}

.course-card-actions {
    display: grid;
    gap: 0.55rem;
    min-width: 11rem;
}

.course-card-actions .btn {
    align-items: center;
    display: inline-flex;
    gap: 0.45rem;
    justify-content: center;
    min-height: 2.75rem;
}

.course-card .btn-outline-secondary {
    border-color: #d1d5db;
}

.course-card-desc {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    padding-top: 1rem;
}

@media (max-width: 991.98px) {
    .course-card-actions {
        min-width: 100%;
    }
}

/* category tree */

.category-tree .badge {
    font-weight: bold;
}

.category-tree .list-group {
    margin: 1rem 0;
}

.category-tree .list-group:last-child {
    margin-bottom: 0;
}

.category-tree .list-group-item {
    text-align: justify;
    font-size: 1rem;
    padding: 1rem;
    border: 1px solid #000;
    background: none;
}

.category-tree .list-group-item:last-child {
    margin-bottom: 0;
}

.category-tree .list-group-item:hover {
    background: none;
}

/* play-page */

body.dahi-step-transition {
    overflow: hidden;
}

body.dahi-step-transition::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2050;
    background: rgba(248, 250, 252, 0.72);
    backdrop-filter: blur(3px);
    animation: dahiStepFadeIn 360ms ease forwards;
}

body.dahi-step-transition:has(#play-page.is-focus-mode)::before {
    background: rgba(15, 23, 42, 0.46);
}

body.dahi-step-transition:has(#play-page.is-focus-mode) #play-page {
    filter: blur(1.5px) saturate(0.82);
    opacity: 0.72;
}

body.dahi-step-transition #play-page {
    filter: blur(1.5px) saturate(0.88);
    opacity: 0.58;
    transition: filter 260ms ease, opacity 260ms ease;
}

@keyframes dahiStepFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#play-page .study-summary-card {
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-radius: 1.25rem;
    padding: 1.2rem 1.3rem;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
}

#play-page .learning-mode-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 1.35rem 0 0.75rem;
    color: #64748b;
    font-size: 0.98rem;
    font-weight: 800;
}

#play-page .learning-mode-heading .material-icons-outlined {
    color: #818cf8;
    font-size: 1.15rem;
}

#play-page .play-side-column,
#play-page .play-main-column {
    transition: flex-basis 220ms ease, max-width 220ms ease, opacity 180ms ease;
}

#play-page .play-sidebar-content {
    transition: opacity 180ms ease, transform 180ms ease;
}

#play-page.is-sidebar-collapsed .play-side-column {
    display: none;
}

#play-page.is-sidebar-collapsed .play-main-column {
    flex: 0 0 100%;
    max-width: 100%;
}

#play-page .study-summary-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

#play-page .study-summary-toolbar .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 34px;
}

#play-page .study-summary-toolbar .material-icons-outlined {
    font-size: 1.05rem;
}

#play-page .study-summary-details {
    max-height: 1200px;
    overflow: hidden;
    opacity: 1;
    transition: max-height 220ms ease, opacity 180ms ease, margin-top 180ms ease;
}

#play-page.is-summary-collapsed .study-summary-details {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

#play-page.is-focus-mode::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1030;
    pointer-events: none;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(1px);
}

#play-page.is-focus-mode .profile-user,
#play-page.is-focus-mode .profile-sidebar,
#play-page.is-focus-mode h1,
#play-page.is-focus-mode .study-summary-card {
    position: relative;
    z-index: 1;
    filter: saturate(0.75);
}

#play-page.is-focus-mode .teach-card,
#play-page.is-focus-mode .exam-card,
#play-page.is-focus-mode #teach-done,
#play-page.is-focus-mode #teach-loading,
#play-page.is-focus-mode #exam-done,
#play-page.is-focus-mode #exam-loading {
    position: relative;
    z-index: 1040;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
}

#play-page.is-focus-mode .teach-card,
#play-page.is-focus-mode .exam-card {
    border-color: rgba(255, 255, 255, 0.56);
}

#play-page.is-focus-mode #toggle-learning-focus {
    position: relative;
    z-index: 1041;
}

#play-page.is-focus-mode #toggle-play-sidebar {
    position: relative;
    z-index: 1041;
}

#play-page .study-mode-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    margin-bottom: 0.6rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 0.8rem;
    font-weight: 700;
}

#play-page .study-progress-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-weight: 700;
}

#play-page .learning-session-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

#play-page .learning-session-step {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 38px;
    padding: 0.45rem 0.55rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    font-size: 0.84rem;
    font-weight: 800;
}

#play-page .learning-session-step.is-active {
    border-color: rgba(79, 70, 229, 0.28);
    background: #eef2ff;
    color: #4338ca;
}

#play-page .learning-session-step.is-done {
    color: #047857;
}

#play-page .learning-session-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #cbd5e1;
}

#play-page .learning-session-step.is-active .learning-session-dot {
    background: #4f46e5;
}

#play-page .learning-session-step.is-done .learning-session-dot {
    background: #10b981;
}

#play-page .learning-session-next {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #475569;
    font-size: 0.9rem;
    font-weight: 700;
}

#play-page .learning-session-next .material-icons-outlined {
    color: #4f46e5;
    font-size: 1.25rem;
}

#play-page .learning-readiness-panel {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    padding: 0.85rem 0.95rem;
}

#play-page .learning-readiness-panel.is-ready {
    border-color: rgba(16, 185, 129, 0.24);
    background: #f0fdf4;
}

#play-page .learning-readiness-panel.is-nearly-ready {
    border-color: rgba(79, 70, 229, 0.22);
    background: #f8faff;
}

#play-page .learning-readiness-panel.is-needs-work {
    border-color: rgba(234, 88, 12, 0.22);
    background: #fff7ed;
}

#play-page .learning-readiness-label {
    color: #0f172a;
    font-weight: 900;
    margin-bottom: 0.25rem;
}

#play-page .learning-readiness-score {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    min-width: 78px;
    color: #0f172a;
    font-weight: 800;
    white-space: nowrap;
}

#play-page .learning-readiness-score strong {
    font-size: 1.8rem;
    line-height: 1;
}

#play-page .learning-readiness-score span {
    color: #64748b;
    font-size: 0.9rem;
}

#play-page .learning-readiness-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

#play-page .learning-readiness-reasons span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.32rem 0.55rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    color: #475569;
    font-size: 0.8rem;
    font-weight: 700;
}

.course-progress-page .progress-hero,
.course-progress-page .current-stage-dashboard,
.course-progress-page .stage-list-dashboard {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: #ffffff;
    padding: 1rem;
}

.course-progress-page .progress-eyebrow {
    color: #4f46e5;
    font-size: 0.78rem;
    font-weight: 900;
}

.course-progress-page .progress-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
    justify-content: flex-end;
}

.course-progress-page .progress-hero-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.course-progress-page .progress-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.course-progress-page .progress-kpi {
    display: grid;
    gap: 0.28rem;
    min-height: 118px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: #ffffff;
    padding: 0.85rem;
}

.course-progress-page .progress-kpi .material-icons-outlined {
    color: #4f46e5;
    font-size: 1.35rem;
}

.course-progress-page .progress-kpi small {
    color: #64748b;
    font-weight: 800;
}

.course-progress-page .progress-kpi strong {
    color: #0f172a;
    font-size: 1.45rem;
    line-height: 1;
}

.course-progress-page .progress-kpi.is-warning .material-icons-outlined,
.course-progress-page .stage-row-metrics .is-warning {
    color: #ea580c;
}

.course-progress-page .current-stage-dashboard {
    background: #f8faff;
    border-color: rgba(79, 70, 229, 0.18);
}

.course-progress-page .current-stage-score {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.25rem;
    color: #0f172a;
    white-space: nowrap;
}

.course-progress-page .current-stage-score strong {
    font-size: 2rem;
    line-height: 1;
}

.course-progress-page .current-stage-score span {
    color: #64748b;
    font-weight: 800;
}

.course-progress-page .current-stage-metrics,
.course-progress-page .stage-row-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.course-progress-page .current-stage-metrics span,
.course-progress-page .stage-row-metrics span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.3rem 0.52rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    color: #475569;
    font-size: 0.8rem;
    font-weight: 800;
}

.course-progress-page .stage-progress-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.16);
}

.course-progress-page .stage-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: #4f46e5;
}

.course-progress-page .next-stage-note {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    border-radius: 8px;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.8);
    color: #334155;
}

.course-progress-page .next-stage-note.is-locked .material-icons-outlined {
    color: #ea580c;
}

.course-progress-page .next-stage-note.is-open .material-icons-outlined {
    color: #059669;
}

.course-progress-page .stage-dashboard-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 0.75rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    padding: 0.85rem;
}

.course-progress-page .stage-dashboard-row + .stage-dashboard-row {
    margin-top: 0.7rem;
}

.course-progress-page .stage-dashboard-row.is-current {
    border-color: rgba(79, 70, 229, 0.28);
    background: #f8faff;
}

.course-progress-page .stage-dashboard-row.is-locked {
    background: #f8fafc;
}

.course-progress-page .stage-row-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: rgba(79, 70, 229, 0.1);
    color: #4f46e5;
}

.course-progress-page .stage-dashboard-row.is-locked .stage-row-icon {
    background: rgba(100, 116, 139, 0.12);
    color: #64748b;
}

.course-progress-page .stage-row-score {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    color: #0f172a;
    white-space: nowrap;
}

.course-progress-page .stage-row-score strong {
    font-size: 1.35rem;
    line-height: 1;
}

.course-progress-page .stage-row-score small {
    color: #64748b;
    font-weight: 800;
}

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

@media (max-width: 575.98px) {
    .course-progress-page .progress-kpi-grid {
        grid-template-columns: 1fr;
    }

    .course-progress-page .stage-dashboard-row {
        grid-template-columns: 1fr;
    }

    .course-progress-page .stage-row-score {
        align-items: flex-start;
    }
}

#play-page .learning-stage-panel {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    padding: 0.85rem 0.95rem;
}

#play-page .learning-stage-label {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 900;
}

#play-page .learning-stage-score {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    min-width: 90px;
    color: #0f172a;
    font-weight: 800;
    white-space: nowrap;
}

#play-page .learning-stage-score strong {
    font-size: 1.8rem;
    line-height: 1;
}

#play-page .learning-stage-score span {
    color: #64748b;
    font-size: 0.85rem;
}

#play-page .learning-stage-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

#play-page .learning-stage-metrics span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.32rem 0.55rem;
    border-radius: 8px;
    background: #f8fafc;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 700;
}

#play-page .learning-stage-next {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    color: #475569;
}

#play-page .learning-stage-next .material-icons-outlined {
    color: #64748b;
    font-size: 1.2rem;
}

#play-page .learning-stage-next.is-open .material-icons-outlined {
    color: #059669;
}

#play-page .learning-stage-next.is-locked .material-icons-outlined {
    color: #ea580c;
}

#play-page .learning-soft-gate {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    padding: 0.85rem 0.95rem;
}

#play-page .learning-soft-gate > .material-icons-outlined {
    color: #4f46e5;
    font-size: 1.45rem;
}

#play-page .learning-soft-gate strong {
    display: block;
    color: #0f172a;
    margin-bottom: 0.2rem;
}

#play-page .learning-soft-gate-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.4rem 0.65rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
}

#play-page .learning-soft-gate.is-open {
    border-color: rgba(16, 185, 129, 0.24);
    background: #f0fdf4;
}

#play-page .learning-soft-gate.is-open > .material-icons-outlined {
    color: #059669;
}

#play-page .learning-soft-gate.is-advisory {
    border-color: rgba(79, 70, 229, 0.22);
    background: #f8faff;
}

#play-page .learning-soft-gate.is-guided-recovery {
    border-color: rgba(234, 88, 12, 0.22);
    background: #fff7ed;
}

#play-page .learning-soft-gate.is-guided-recovery > .material-icons-outlined {
    color: #ea580c;
}

#play-page .learning-guidance-plan {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    padding: 0.85rem 0.95rem;
}

#play-page .learning-guidance-plan .material-icons-outlined {
    color: #4f46e5;
    font-size: 1.25rem;
}

#play-page .learning-guidance-plan strong {
    color: #0f172a;
}

#play-page .learning-guidance-narration {
    border-right: 3px solid #4f46e5;
    color: #334155;
    line-height: 1.9;
    padding-right: 0.75rem;
}

#play-page .learning-guidance-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

#play-page .learning-guidance-action {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.2rem;
    min-height: 72px;
    padding: 0.65rem 0.7rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: #f8fafc;
}

#play-page .learning-guidance-action span {
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 900;
}

#play-page .learning-guidance-action small {
    color: #64748b;
    font-size: 0.76rem;
    line-height: 1.7;
}

#play-page .learning-guidance-action.is-primary {
    border-color: rgba(79, 70, 229, 0.24);
    background: #eef2ff;
}

#play-page .learning-guidance-action.is-primary span {
    color: #4338ca;
}

#play-page .learning-memory-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
}

#play-page .learning-memory-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 700;
    text-align: center;
}

#play-page .learning-memory-item .material-icons-outlined {
    color: #64748b;
    font-size: 1.2rem;
}

#play-page .learning-memory-item.is-due {
    border-color: rgba(220, 38, 38, 0.18);
    background: #fff7ed;
    color: #9a3412;
}

#play-page .learning-memory-item.is-due .material-icons-outlined {
    color: #ea580c;
}

@media (max-width: 991.98px) {
    #play-page .learning-session-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #play-page .learning-memory-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #play-page .learning-soft-gate {
        grid-template-columns: auto minmax(0, 1fr);
    }

    #play-page .learning-soft-gate-action {
        grid-column: 1 / -1;
        justify-content: flex-start;
        white-space: normal;
    }

    #play-page .learning-guidance-actions {
        grid-template-columns: 1fr;
    }

    #play-page .study-summary-toolbar {
        justify-content: stretch;
    }

    #play-page .study-summary-toolbar .btn {
        flex: 1 1 130px;
        justify-content: center;
    }

}

@media (max-width: 420px) {
    #play-page .learning-session-steps {
        grid-template-columns: 1fr;
    }

    #play-page .learning-memory-strip {
        grid-template-columns: 1fr;
    }
}

#play-page .teach-card,
#play-page .exam-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
    background: #fff;
}

#play-page .card-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    background: transparent;
}

#play-page .teach-content-card .card-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding-bottom: 0.65rem;
}

#play-page .exam-question-card .card-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding-bottom: 0.65rem;
}

#play-page .teach-card-label {
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 700;
}

#play-page .teach-card-id {
    border: 1px solid rgba(100, 116, 139, 0.22);
    background: #f8fafc;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
}

#play-page .teach-content-card .card-body {
    padding-top: 1.25rem;
}

#play-page .teach-section-progress {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.8rem;
}

#play-page .teach-section-progress span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 999px;
    background: #f8fafc;
    color: #64748b;
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 800;
}

#play-page .teach-section {
    display: none;
    animation: dahiTeachSectionIn 180ms ease both;
}

#play-page .teach-section.is-active {
    display: block;
}

#play-page .teach-content-card .card-body p {
    color: #0f172a;
    font-size: 1.06rem;
    font-weight: 750;
    line-height: 2.05;
}

@keyframes dahiTeachSectionIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

#play-page .teach-action-card {
    margin-top: -0.35rem !important;
    border-style: dashed;
    box-shadow: none;
}

#play-page .teach-action-card .card-body {
    display: flex;
    justify-content: center;
    padding: 0.85rem 1rem;
}

#play-page .exam-question-text {
    margin-bottom: 1.25rem;
    color: #0f172a;
    font-size: 1.06rem;
    font-weight: 750;
    line-height: 2;
}

#play-page .exam-question-card .form-check {
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 0.75rem;
    padding: 0.78rem 2.35rem 0.78rem 0.85rem;
    background: #fbfdff;
}

#play-page .exam-question-card .form-check + .form-check {
    margin-top: 0.65rem;
}

#play-page .exam-question-card .card-footer {
    display: flex;
    justify-content: center;
}

#play-page .card-footer {
    background: transparent;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

#play-page .btn-success {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    border: none;
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.2);
}

#play-page .card-body p:last-child {
    margin-bottom: 0;
}

#play-page .form-check:last-child {
    margin-bottom: 0 !important;
}

.learning-mini-footer {
    margin: 1.5rem 0 0.75rem;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    padding-top: 0.75rem;
    color: #94a3b8;
    font-size: 0.78rem;
    text-align: center;
}

/* about-page */

#about-page .blinking-cursor {
    display: inline-block;
    margin-left: 5px;
    background-color: #fff;
    animation: blink 0.5s infinite;
}

@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    50.1%,
    100% {
        opacity: 0;
    }
}

/* policies-page */

#policies-page ul li.card-text {
    text-align: justify;
    margin-bottom: 1rem;
}

#policies-page ul li:last-child.card-text {
    margin-bottom: 0rem;
}

/* top bar alert */

.top-bar-alerts {
    border-top: 1px solid #333;
}

.top-bar-alerts.top-alert-warning {
    /* background-color: #be7308; */
    color: #ffe0b5;
}

.top-bar-alerts.top-alert-danger {
    /* background-color: #b83e42; */
    color: #dbbabb;
}

.top-bar-alerts.top-alert-info {
    /* background-color: #4091d7; */
    color: #c0e2ff;
}

.top-bar-alerts.top-alert-success {
    /* background-color: #4b9609; */
    color: #deffc2;
}

.top-bar-alerts a {
    color: #333;
    border-bottom: 2px #333 solid;
}

.top-bar-alerts p {
    margin-bottom: 0;
}

/* eof */
.dahi-explanation-box {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(13, 110, 253, 0.18);
    border-radius: 8px;
    color: #1f2937;
    margin-top: 1rem;
    padding: 1rem;
}

.dahi-explanation-box .material-icons-outlined {
    color: #0d6efd;
    font-size: 1.35rem;
}

.dahi-stream-thinking {
    align-items: center;
    color: #64748b;
    display: inline-flex;
    gap: 0.5rem;
    min-height: 1.75rem;
}

.dahi-thinking-dot {
    animation: dahi-thinking-pulse 0.9s ease-in-out infinite;
    background: #0d6efd;
    border-radius: 50%;
    display: inline-block;
    height: 0.65rem;
    width: 0.65rem;
}

@keyframes dahi-thinking-pulse {
    0% {
        opacity: 0.35;
        transform: scale(0.75);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0.35;
        transform: scale(0.75);
    }
}

.learning-outcome-box {
    background: rgba(25, 135, 84, 0.1);
    border: 1px solid rgba(25, 135, 84, 0.2);
    border-radius: 8px;
    color: #1f2937;
    margin-top: 1rem;
    padding: 1rem;
}

.learning-outcome-box .material-icons-outlined {
    color: #198754;
    font-size: 1.35rem;
}