/* User2 dashboard redesign - monochrome/neutral tone, mobile-first (Bootstrap 5) */
/* Self-contained: no external CSS/font/CDN dependency - system font stack instead of a
   webfont so nothing needs to be fetched from outside this app after login. */

:root {
    --app-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --app-bg: #FAFAFA;
    --app-card: #ffffff;
    --app-ink: #171717;
    --app-muted: #71717A;
    --app-border: #E4E4E7;
    --app-primary: #171717;
    --app-primary-soft: #F4F4F5;
    --app-teal: #0D9488;
    --app-blue: #52525B;
    --app-amber: #EA580C;
    --app-pink: #BE123C;
    --app-success-bg: #DCFCE7;
    --app-success-text: #15803D;
    --app-warning-bg: #FFEDD5;
    --app-warning-text: #C2410C;
    --app-radius: .85rem;
    --app-sidebar-w: 250px;
    --app-bottom-nav-h: 64px;
}

body.app-shell[data-theme="dark"] {
    --app-bg: #0A0A0A;
    --app-card: #18181B;
    --app-ink: #FAFAFA;
    --app-muted: #A1A1AA;
    --app-border: #27272A;
    --app-primary: #FAFAFA;
    --app-primary-soft: #27272A;
}

html {
    overflow-x: hidden;
}

/* Bootstrap's .row is a flex container, and flex/grid items default to
   min-width:auto - a deeply nested wide child (a long select2 dropdown, a long
   placeholder) can silently force a column past its intended width and push the
   whole page into horizontal scroll. Neutralize that everywhere in the app shell. */
body.app-shell .row > [class*="col-"] {
    min-width: 0;
}

body.app-shell {
    background: var(--app-bg);
    padding-bottom: calc(var(--app-bottom-nav-h) + 10px);
    font-family: var(--app-font);
    color: var(--app-ink);
    transition: background .2s ease, color .2s ease;
    overflow-x: hidden;
    max-width: 100vw;
}

body.app-shell h1, body.app-shell h2, body.app-shell h3,
body.app-shell h4, body.app-shell h5, body.app-shell h6 {
    font-family: var(--app-font);
    font-weight: 600;
    color: inherit;
    letter-spacing: -.01em;
}

@media (min-width: 992px) {
    body.app-shell {
        padding-bottom: 0;
        padding-left: var(--app-sidebar-w);
    }
}

/* Top bar */
.app-topbar {
    background: var(--app-card);
    border-bottom: 1px solid var(--app-border);
    padding: .6rem 1rem;
}

.app-search {
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    border-radius: .6rem;
    padding: .4rem .9rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--app-muted);
    flex: 1 1 460px;
    max-width: 460px;
    margin-left: 1rem;
}

.app-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: .85rem;
    color: var(--app-ink);
    width: 100%;
}

.btn-icon {
    background: transparent;
    border: none;
    font-size: 1.15rem;
    color: var(--app-muted);
    width: 38px;
    height: 38px;
    border-radius: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
}

.btn-icon:hover {
    background: var(--app-primary-soft);
    color: var(--app-ink);
}

.app-badge-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    background: var(--app-ink) !important;
}

.app-avatar-sm {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--app-border);
}

/* Colored topbar icon buttons (notifications bell + user avatar ring). */
.app-topbar-icon-btn {
    border: none;
    font-size: .9rem;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
}

.app-topbar-icon-btn.grad-amber {
    background: linear-gradient(135deg, #FB923C 0%, #C2410C 100%);
}

.app-topbar-icon-btn.grad-amber:hover {
    opacity: .85;
    color: #fff;
}

.app-avatar-btn {
    border-radius: 50%;
    padding: 2px !important;
    background: linear-gradient(135deg, #60A5FA 0%, #1D4ED8 100%);
    transition: opacity .15s ease;
}

.app-avatar-btn:hover {
    opacity: .85;
}

.app-avatar-btn .app-avatar-sm {
    width: 28px;
    height: 28px;
    border: 2px solid var(--app-card);
}

/* Real profile-completeness score, badged onto the corner of the avatar. */
.app-score-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    font-size: .55rem;
    font-weight: 700;
    line-height: 1;
    padding: .2rem .3rem;
    border-radius: 50px;
    color: #fff;
    border: 2px solid var(--app-card);
    white-space: nowrap;
}

.app-score-badge.green {
    background: #16A34A;
}

.app-score-badge.yellow {
    background: #D97706;
}

.app-score-badge.red {
    background: #DC2626;
}

.app-notif-menu {
    width: 340px;
    max-width: 90vw;
    border-radius: 1rem;
    border: 1px solid var(--app-border);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .14);
    background: var(--app-card);
    margin-top: .5rem !important;
    overflow: hidden;
}

.app-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.1rem;
    font-weight: 700;
    font-size: .86rem;
    color: var(--app-ink);
    border-bottom: 1px solid var(--app-border);
}

.app-notif-count {
    background: var(--app-ink);
    color: var(--app-card);
    font-size: .68rem;
    font-weight: 700;
    padding: .12rem .5rem;
    border-radius: 50px;
}

.app-notif-list {
    max-height: 340px;
    overflow-y: auto;
}

.app-notif-item {
    display: flex;
    gap: .7rem;
    padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--app-border);
    transition: background .15s ease;
}

.app-notif-item:last-child {
    border-bottom: none;
}

.app-notif-item:hover {
    background: var(--app-primary-soft);
}

.app-notif-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.app-notif-item-body {
    min-width: 0;
}

.app-notif-item-msg {
    font-size: .82rem;
    line-height: 1.4;
    color: var(--app-ink);
    margin-bottom: .25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.app-notif-item-time {
    font-size: .7rem;
    color: var(--app-muted);
}

.app-notif-empty {
    text-align: center;
    color: var(--app-muted);
    padding: 2.5rem 1rem;
    font-size: .82rem;
}

.app-notif-empty i {
    font-size: 1.6rem;
    display: block;
    margin-bottom: .5rem;
}

/* User account dropdown - profile card style. */
.app-profile-menu {
    width: 280px;
    border-radius: 1rem;
    border: 1px solid var(--app-border);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .14);
    background: var(--app-card);
    margin-top: .5rem !important;
    overflow: hidden;
}

.app-profile-menu-header {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1.1rem;
}

.app-avatar-md {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--app-border);
    flex-shrink: 0;
}

.app-profile-menu-name {
    font-size: .92rem;
    font-weight: 700;
    color: var(--app-ink);
    margin-bottom: .1rem;
}

.app-profile-menu-email {
    font-size: .76rem;
    color: var(--app-muted);
    margin-bottom: 0;
}

.app-profile-menu-score {
    padding: 0 1.1rem .9rem;
    font-size: .78rem;
    color: var(--app-muted);
}

.app-profile-menu-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem 1.1rem;
    font-size: .85rem;
    font-weight: 500;
}

.app-menu-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
}

.app-menu-icon.blue {
    background: var(--app-primary-soft);
    color: #1D4ED8;
}

.app-menu-icon.purple {
    background: var(--app-primary-soft);
    color: #6D28D9;
}

.app-menu-icon.red {
    background: var(--app-primary-soft);
    color: #DC2626;
}

/* Desktop sidebar */
.app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--app-sidebar-w);
    background: var(--app-card);
    border-right: 1px solid var(--app-border);
    z-index: 1020;
    overflow-y: auto;
}

.app-sidebar-logo {
    padding: 1.2rem 1.1rem 0.35rem;
    text-align: center;
}

.app-sidebar-logo img {
    height: 38px;
    width: auto;
    max-width: 170px;
    display: inline-block;
}

.app-sidebar-profile {
    padding: 1.4rem 1.1rem 1.1rem;
    border-bottom: 1px solid var(--app-border);
}

.app-avatar-lg {
    width: 72px;
    height: 72px;
}

.app-avatar-lg img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--app-border);
}

.app-avatar-no-photo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1px solid var(--app-border);
    background: var(--app-primary-soft, #ede9fe);
    color: #6D28D9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.app-avatar-edit {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--app-ink);
    color: var(--app-card);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    cursor: pointer;
}

.app-sidebar-nav {
    list-style: none;
    margin: 0;
    padding: .6rem .6rem;
}

.app-sidebar-nav li {
    margin-bottom: 2px;
}

.app-sidebar-nav li a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .9rem;
    color: var(--app-muted);
    text-decoration: none;
    font-size: .87rem;
    font-weight: 500;
    border-radius: .6rem;
    transition: all .15s ease;
}

.app-sidebar-nav li a i {
    font-size: 1rem;
    width: 20px;
}

.app-sidebar-nav li a:hover {
    background: var(--app-primary-soft);
    color: var(--app-ink);
}

.app-sidebar-nav li.active a {
    color: var(--app-card);
    background: var(--app-ink);
    font-weight: 500;
}

/* Small utility links pinned under the main nav (Quick Support / Refund Policy). */
.app-sidebar-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .8rem .6rem;
    border-top: 1px solid var(--app-border);
}

.app-sidebar-footer a {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .6rem;
    border-radius: .5rem;
    color: var(--app-muted);
    text-decoration: none;
    font-size: .72rem;
    font-weight: 500;
    transition: all .15s ease;
}

.app-sidebar-footer a i {
    font-size: .85rem;
}

.app-sidebar-footer a:hover {
    color: var(--app-ink);
    background: var(--app-primary-soft);
}

.app-sidebar-footer a.active {
    color: var(--app-card);
    background: var(--app-ink);
}

/* Mobile bottom tab bar */
.app-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background: var(--app-card);
    border-top: 1px solid var(--app-border);
    height: var(--app-bottom-nav-h);
    z-index: 1030;
}

.app-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--app-muted);
    text-decoration: none;
    font-size: .68rem;
    font-weight: 500;
}

.app-bottom-nav a i {
    font-size: 1.3rem;
}

.app-bottom-nav a.active {
    color: var(--app-ink);
}

/* Content area */
.app-content {
    padding: 0.5rem 1rem 1rem;
}

@media (min-width: 992px) {
    .app-content {
        padding: 0.75rem 1.75rem 1.5rem;
    }
}

/* Legacy pages (with-side-menu / .page-content) still loaded across most of /user2 -
   header_new.php now injects app-shell + this stylesheet on every page, but the old
   layout classes add their own sidebar/header offsets on top of the new fixed sidebar's
   250px body padding. Neutralize the legacy offset so old pages don't get double-padded. */
body.app-shell .page-content {
    padding: 0.5rem 1rem 1rem;
}

@media (min-width: 992px) {
    body.app-shell .page-content {
        padding: 0.75rem 1.25rem 1.5rem;
    }
}

/* Bootstrap's .container-fluid adds its own left/right gutter on top of
   .page-content's padding above - that's pure double-padding on these legacy
   pages since .page-content already provides the outer gutter. */
body.app-shell .page-content > .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* Greeting header */
.app-greeting h4 {
    margin-bottom: .1rem;
    font-size: 1.3rem;
}

.app-greeting p {
    color: var(--app-muted);
    margin-bottom: 0;
    font-size: .88rem;
}

/* Batch switcher pills */
.app-batch-switcher-label {
    font-size: .78rem;
    color: var(--app-muted);
    display: block;
    margin-bottom: .5rem;
}

.app-batch-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.app-pill {
    background: var(--app-card);
    border: 1px solid var(--app-border);
    color: var(--app-muted);
    font-size: .82rem;
    font-weight: 500;
    padding: .4rem 1rem;
    border-radius: 50px;
    transition: all .15s ease;
}

.app-pill:hover {
    border-color: var(--app-ink);
    color: var(--app-ink);
}

.app-pill.active {
    background: var(--app-ink);
    border-color: var(--app-ink);
    color: var(--app-card);
}

.btn-continue {
    background: linear-gradient(135deg, #3a3a3a 0%, #000000 100%);
    color: #fff;
    border: none;
    font-weight: 500;
    border-radius: 50px;
    padding: .55rem 1.3rem;
    font-size: .85rem;
    transition: all .15s ease;
}

.btn-continue:hover {
    opacity: .85;
    color: #fff;
}

/* Join (Live) Class buttons - purple gradient everywhere. !important so it also
   overrides the legacy Bootstrap .btn-success on the older view pages. */
.btn-join {
    background: linear-gradient(135deg, #7C3AED 0%, #4C1D95 100%) !important;
    color: #fff !important;
    border: none !important;
}

.btn-join:hover,
.btn-join:focus,
.btn-join:active {
    color: #fff !important;
    opacity: .9;
}

/* 80/20 split between the course card and the side panel.
   Grid (not flex) so the gap is subtracted from the track sizes automatically -
   flex-basis: 80%/20% plus a gap overflows 100% and forces a wrap every time. */
.app-course-hero-grid {
    display: grid;
    grid-template-columns: 4fr 1fr;
    gap: 1rem;
    align-items: stretch;
}

/* Grid tracks default to min-width:auto, sized to fit a child's intrinsic content
   width (e.g. a select2 dropdown or long input) - without min-width:0 a wide-enough
   child forces the whole track (and page) wider than the container, causing a
   horizontal scrollbar. */
.app-course-hero-grid > *,
.app-grid-70-30 > * {
    min-width: 0;
}

.app-side-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (max-width: 991px) {
    .app-course-hero-grid {
        grid-template-columns: 1fr;
    }
}

/* Once the hero grid above collapses to a single column, .app-side-panel's
   cards (promo/live-class card + streak card) were stacking full-width one
   above the other on tablets - put them side by side in one row instead,
   down to phone widths where a single column reads better again. */
@media (min-width: 576px) and (max-width: 991px) {
    .app-side-panel {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .app-side-panel > * {
        flex: 1 1 260px;
    }
}

/* 70/30 split - same grid-not-flex reasoning as .app-course-hero-grid above. */
.app-grid-70-30 {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 991px) {
    .app-grid-70-30 {
        grid-template-columns: 1fr;
    }
}

/* Upcoming live class card (side panel, shown when a class is tomorrow) */
.app-live-class-card {
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-radius: .7rem;
    padding: 1rem;
}

/* Empty state: keep the live-card layout as a blurred/muted ghost underneath
   and overlay the "no class" message so the card never looks empty. */
.app-live-empty {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.app-live-empty-ghost {
    filter: blur(2px);
    opacity: .45;
    pointer-events: none;
    user-select: none;
}

.app-live-empty-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    background: rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
}

body.app-shell[data-theme="dark"] .app-live-empty-overlay {
    background: rgba(24, 24, 27, .62);
}

.app-live-empty-overlay i {
    font-size: 1.7rem;
    color: var(--app-muted);
    margin-bottom: .4rem;
}

.app-live-date-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    flex-shrink: 0;
}

.app-live-date-month {
    font-size: .6rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--app-muted);
}

.app-live-date-day {
    font-size: .95rem;
    font-weight: 700;
    color: var(--app-ink);
}

.app-live-badge {
    background: var(--app-warning-text);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: .25rem .6rem;
    border-radius: .3rem;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: .3rem;
}

.app-live-cal-btn {
    width: 38px;
    height: 38px;
    border: 1px solid var(--app-border);
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--app-muted);
    flex-shrink: 0;
}

.app-live-cal-btn:hover {
    background: var(--app-primary-soft);
    color: var(--app-ink);
}

/* Career-path promo banner */
.app-promo-banner {
    background: linear-gradient(135deg, #7C3AED 0%, #4C1D95 100%);
    border-radius: var(--app-radius);
    color: #fff;
    padding: 1.1rem 1.2rem;
}

.app-promo-eyebrow {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    opacity: .85;
    margin-bottom: .3rem;
}

.app-promo-banner h6 {
    color: #fff;
}

.app-promo-sub {
    font-size: .78rem;
    opacity: .9;
    margin-bottom: .8rem;
}

.app-promo-btn {
    display: inline-flex;
    align-items: center;
    background: #fff;
    color: #4C1D95;
    font-size: .78rem;
    font-weight: 600;
    border-radius: 50px;
    padding: .4rem .9rem;
    text-decoration: none;
}

.app-promo-banner.grad-green {
    background: linear-gradient(135deg, #34D399 0%, #047857 100%);
}

.app-promo-banner .app-promo-icon {
    font-size: 1.4rem;
    opacity: .85;
    margin-right: .4rem;
}

.app-promo-link {
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: underline;
}

.app-promo-link:hover {
    color: #fff;
    opacity: .9;
}

.app-promo-btn:hover {
    opacity: .9;
    color: #4C1D95;
}

/* Learning streak card */
.app-streak-card {
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 1.1rem .9rem;
    text-align: center;
    flex-grow: 1;
}

.app-streak-flame {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FDBA74 0%, #C2410C 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: .5rem;
}

.app-streak-label {
    font-size: .78rem;
    color: var(--app-muted);
    font-weight: 500;
}

.app-streak-number {
    font-size: 1.4rem;
    font-weight: 700;
    margin: .1rem 0;
    color: var(--app-ink);
}

.app-streak-sub {
    font-size: .74rem;
    color: var(--app-muted);
    margin-bottom: .9rem;
}

.app-streak-week {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: .2rem;
    overflow-x: auto;
}

.app-streak-day {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--app-border);
    color: var(--app-muted);
    font-size: .56rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-streak-day.done {
    background: linear-gradient(135deg, #6EE7B7 0%, #047857 100%);
    border-color: transparent;
    color: #fff;
}

.app-streak-day.future {
    opacity: .5;
}

/* Individual course card */
.app-course-card {
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.app-course-side {
    flex: 0 0 200px;
    max-width: 100%;
    padding: 1.5rem 1.25rem;
    text-align: center;
    border-right: 1px solid var(--app-border);
}

.app-course-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3a3a3a 0%, #000000 100%);
    color: #fff;
    font-size: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .75rem;
}

.app-course-change {
    display: block;
    font-size: .78rem;
    color: var(--app-success-text);
    font-weight: 500;
    text-decoration: none;
    margin-bottom: .5rem;
}

/* Clickable course name in the dashboard hero card - links to that batch's
   classes. Inherits the heading colour, no underline; accents on hover. */
.app-course-hero-name-link {
    color: inherit;
    text-decoration: none;
}

.app-course-hero-name-link:hover {
    color: var(--app-blue);
    text-decoration: none;
}

.app-course-meta {
    font-size: .74rem;
    color: var(--app-muted);
    margin: 0;
}

.app-course-main {
    flex: 1 1 320px;
    padding: 1.25rem;
}

/* Below 320px .app-course-main can't shrink to fit next to the side panel's
   fixed 200px column, so it wraps to its own line - leaving .app-course-side
   pinned at 200px with blank space beside it instead of using the full width.
   Stack both sections at full width instead. */
@media (max-width: 575px) {
    .app-course-side {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: 1px solid var(--app-border);
    }

    .app-course-main {
        flex: 1 1 100%;
    }
}

.app-pickup-row {
    border: 1px solid var(--app-success-text);
    border-radius: .7rem;
    padding: 1.1rem 1.1rem .9rem;
    position: relative;
    margin-top: .6rem;
}

.app-pickup-badge {
    position: absolute;
    top: -.7rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--app-success-bg);
    color: var(--app-success-text);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .3rem .8rem;
    border-radius: 50px;
    white-space: nowrap;
}

.app-capsules {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.app-capsule {
    background: transparent;
    font-size: .72rem;
    font-weight: 500;
    padding: .25rem .65rem;
    border-radius: 50px;
    border: 1.5px solid currentColor;
    display: inline-flex;
    align-items: center;
}

.app-capsule.grad-green {
    color: #047857;
}

.app-capsule.grad-orange {
    color: #C2410C;
}

.app-capsule.grad-purple {
    color: #6D28D9;
}

.app-capsule.grad-pink {
    color: #BE123C;
}

.app-capsule.grad-red {
    color: #B91C1C;
}

.app-capsule.grad-blue {
    color: #1D4ED8;
}

.app-overall-progress {
    font-size: .76rem;
    color: var(--app-muted);
    margin-top: .5rem;
}

.app-ring-caption {
    font-size: .72rem;
    color: var(--app-muted);
    margin-top: .4rem;
}

/* On phones the ring + "Resume" button stack and need the full row width to
   center properly; on tablet/laptop/desktop this must stay at its natural
   width so it still sits beside the course info instead of stretching the
   whole row (that stretch was the laptop regression). */
@media (max-width: 767px) {
    .app-progress-ring-wrap {
        width: 100%;
    }
}

.app-overall-bar-wrap {
    margin-bottom: .8rem;
}

.app-overall-bar-label {
    font-size: .74rem;
    color: var(--app-muted);
}

.app-overall-bar-pct {
    font-size: .74rem;
    font-weight: 600;
}

.app-mini-metric {
    border: 1px solid var(--app-border);
    border-radius: .6rem;
    padding: .7rem .8rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.app-mini-metric .app-progress-track {
    margin-top: auto;
}

.app-mini-metric-label {
    font-size: .82rem;
    font-weight: 500;
    flex-grow: 1;
}

.app-mini-metric-frac {
    font-size: .78rem;
    font-weight: 600;
    color: var(--app-muted);
}

/* Small metric cards next to the hero */
.app-mini-stat {
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: .9rem 1rem;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.app-mini-stat .app-mini-stat-number {
    font-size: 1.5rem;
    font-weight: 700;
}

.app-mini-stat .app-mini-stat-label {
    font-size: .74rem;
    color: var(--app-muted);
}

/* Generic card */
.app-card {
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    overflow: hidden;
}

/* Purple accent variant - same gradient already used on the career-path promo
   banner, for cards that should read as a highlight rather than a plain content card. */
.app-card.accent-purple {
    background: linear-gradient(135deg, #7C3AED 0%, #4C1D95 100%);
    border: none;
    color: #fff;
}

.app-card.accent-purple .app-ring-caption {
    color: rgba(255, 255, 255, .7);
}

.app-card.accent-purple .app-cert-btn {
    background: #fff;
    color: #171717;
}

.app-card.accent-purple .app-cert-btn:hover {
    opacity: .9;
    color: #171717;
}

.app-card.accent-purple .app-cert-btn.disabled {
    background: rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .75);
}

.app-card.accent-purple .app-cert-btn.disabled:hover {
    opacity: 1;
    color: rgba(255, 255, 255, .75);
}

.app-card-header {
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--app-border);
    font-weight: 600;
    font-size: .9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-card-header a {
    font-size: .78rem;
    color: var(--app-muted);
    text-decoration: none;
    font-weight: 500;
}

/* Gradient filled badge shown before a section title (e.g. the FAQ card
   header). Keeps its own colour so the surrounding heading text stays default. */
.app-faq-head-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}

.app-card-body {
    padding: 1.1rem;
}

/* List rows (courses, articles, instructors) */
.app-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.app-list li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--app-border);
}

.app-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.app-list-icon {
    width: 34px;
    height: 34px;
    border-radius: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .8rem;
    flex-shrink: 0;
    background: var(--app-primary-soft) !important;
    color: var(--app-ink) !important;
}

.app-list-title {
    font-size: .86rem;
    font-weight: 500;
    margin: 0;
}

.app-list-sub {
    font-size: .74rem;
    color: var(--app-muted);
    margin: 0;
}

.app-list-action {
    margin-left: auto;
    font-size: .76rem;
    color: var(--app-ink);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

/* My Courses - full list with status tabs */
.app-course-tabs {
    display: flex;
    gap: 1.2rem;
    padding: 0 1.1rem;
    border-bottom: 1px solid var(--app-border);
    overflow-x: auto;
}

.app-course-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--app-muted);
    font-size: .84rem;
    font-weight: 500;
    padding: .7rem 0;
    white-space: nowrap;
}

.app-course-tab.active {
    color: var(--app-blue);
    border-bottom-color: var(--app-blue);
    font-weight: 600;
}

/* Table layout (not flex/grid) so every row's columns auto-size and align
   against the widest content in that column ACROSS all rows - a flex/grid row
   only sizes itself against its own content, so sibling rows with shorter text
   drift out of alignment with each other. Native table columns solve that for free. */
.app-course-table {
    display: table;
    width: 100%;
    table-layout: auto;
    overflow-x: auto;
}

.app-course-list-row {
    display: table-row;
}

.app-course-list-row > * {
    display: table-cell;
    vertical-align: top;
    padding: .85rem .9rem;
    border-bottom: 1px solid var(--app-border);
}

.app-course-list-row > *:first-child {
    padding-left: 1.1rem;
}

.app-course-list-row > *:last-child {
    padding-right: 1.1rem;
}

.app-course-list-top {
    display: table-cell;
    vertical-align: top;
}

.app-course-list-top-inner {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.app-course-list-meta,
.app-course-list-accessed {
    white-space: nowrap;
}

.app-course-list-meta-item {
    flex-shrink: 0;
    white-space: nowrap;
}

.app-course-list-meta-label {
    display: block;
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--app-muted);
    margin-bottom: .1rem;
}

.app-course-list-meta-value {
    font-size: .8rem;
    font-weight: 500;
    color: var(--app-ink);
    white-space: nowrap;
}

.app-course-list-accessed-inline {
    display: block;
    font-size: .72rem;
    color: var(--app-muted);
    white-space: nowrap;
    margin-top: .2rem;
}

.app-course-list-row:last-child {
    border-bottom: none;
}

.app-course-list-icon.app-list-icon {
    background: linear-gradient(135deg, #2563EB 0%, #1E3A8A 100%) !important;
    color: #fff !important;
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* The course icon links to the View Classes page just like the name does. */
.app-course-icon-link {
    text-decoration: none;
    display: inline-flex;
}

.app-course-list-name {
    max-width: 230px;
    white-space: normal;
}

/* Course name links through to the View Classes page - navy blue to signal
   it's clickable, turning black on hover. No underline in either state. */
.app-course-name-link {
    color: #1E3A8A;
    text-decoration: none;
    font-weight: 700;
}

.app-course-name-link:hover {
    color: var(--app-ink);
    text-decoration: none;
}

.app-course-list-progress {
    flex: 0 1 100px;
}

.app-course-list-type-plain {
    display: inline-flex;
    align-items: center;
    font-size: .74rem;
    color: var(--app-muted);
    margin-top: .15rem;
}

.app-course-list-pct {
    font-size: .78rem;
    font-weight: 600;
    display: block;
    margin-bottom: .25rem;
}

.app-course-list-status-text {
    font-size: .78rem;
    font-weight: 600;
    display: block;
    margin-bottom: .25rem;
}

.app-course-list-status-text.not-started {
    color: var(--app-warning-text);
}

.app-course-list-status-text.completed {
    color: var(--app-success-text);
}

.app-course-list-lessons {
    font-size: .68rem;
    color: var(--app-muted);
    margin-top: .25rem;
    white-space: nowrap;
}

.app-course-list-accessed {
    flex: 0 0 100px;
    font-size: .76rem;
    text-align: center;
}

.app-course-list-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: .5rem;
    background: transparent;
    border: 1px solid var(--app-blue);
    color: var(--app-blue);
    font-size: .8rem;
    font-weight: 500;
    padding: .4rem 1rem;
    border-radius: .5rem;
    text-decoration: none;
    white-space: nowrap;
}

.app-course-list-btn:last-child {
    margin-right: 0;
}

.app-course-list-btn:hover {
    background: var(--app-blue);
    color: #fff;
}

.app-course-list-btn.icon-only {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border-color: var(--app-success-text);
    color: var(--app-success-text);
}

.app-course-list-btn.icon-only:hover {
    background: var(--app-success-text);
    color: #fff;
}

.app-course-list-actions {
    white-space: nowrap;
    vertical-align: middle;
}

/* Enrolled-class action row: the "View Classes" pill sits alongside the
   labeled icon columns (reusing viewdetails' .app-class-icon-* shapes).
   Zero the pill's own right margin since the flex gap handles spacing, and
   top-align it with the icon buttons (labels hang below). */
.app-ec-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.app-ec-actions .app-course-list-btn.dark-solid {
    margin-right: 0;
    align-self: flex-start;
}

.app-course-list-btn.dark-solid {
    background: linear-gradient(135deg, #3a3a3a 0%, #000000 100%);
    border: none;
    color: #fff;
}

.app-course-list-btn.dark-solid:hover {
    background: linear-gradient(135deg, #3a3a3a 0%, #000000 100%);
    opacity: .85;
    color: #fff;
}

.app-course-list-btn.icon-only.dark-teal {
    background: linear-gradient(135deg, #7C3AED 0%, #4C1D95 100%);
    border: none;
    color: #fff;
}

.app-course-list-btn.icon-only.dark-teal:hover {
    background: linear-gradient(135deg, #7C3AED 0%, #4C1D95 100%);
    opacity: .85;
    color: #fff;
}

.app-course-list-btn.icon-only.dark-blue {
    background: linear-gradient(135deg, #60A5FA 0%, #1D4ED8 100%);
    border: none;
    color: #fff;
}

.app-course-list-btn.icon-only.dark-blue:hover {
    background: linear-gradient(135deg, #60A5FA 0%, #1D4ED8 100%);
    opacity: .85;
    color: #fff;
}

.app-course-list-btn.icon-only.dark-red {
    background: linear-gradient(135deg, #F87171 0%, #B91C1C 100%);
    border: none;
    color: #fff;
}

.app-course-list-btn.icon-only.dark-red:hover {
    background: linear-gradient(135deg, #F87171 0%, #B91C1C 100%);
    opacity: .85;
    color: #fff;
}

.app-course-list-btn.icon-only.dark-indigo {
    background: linear-gradient(135deg, #818CF8 0%, #3730A3 100%);
    border: none;
    color: #fff;
}

.app-course-list-btn.icon-only.dark-indigo:hover {
    background: linear-gradient(135deg, #818CF8 0%, #3730A3 100%);
    opacity: .85;
    color: #fff;
}

.app-course-list-btn.icon-only.dark-slate {
    background: linear-gradient(135deg, #94A3B8 0%, #334155 100%);
    border: none;
    color: #fff;
}

.app-course-list-btn.icon-only.dark-slate:hover {
    background: linear-gradient(135deg, #94A3B8 0%, #334155 100%);
    opacity: .85;
    color: #fff;
}

.app-course-list-btn.icon-only.is-disabled {
    color: var(--app-muted) !important;
    border-color: var(--app-border) !important;
    background: var(--app-card) !important;
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 767px) {
    .app-course-list-top-inner {
        flex-wrap: wrap;
    }
    .app-course-list-accessed {
        display: none;
    }
}

/* On phones the rigid table row (name, instructor, progress, date started,
   actions) can't fit side by side no matter how narrow the columns get - the
   name column collapses to near-zero width and wraps character by character,
   and later columns get clipped off the edge of the card. Stack each row's
   cells instead. Scoped to phone widths only (575px) so the aligned table
   layout on tablet/laptop/desktop, restored per an earlier request, is untouched. */
@media (max-width: 575px) {
    .app-course-table {
        display: block;
    }

    .app-course-list-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: .5rem;
        column-gap: 1rem;
        padding: 1rem;
        border-bottom: 1px solid var(--app-border);
    }

    .app-course-list-row:last-child {
        border-bottom: none;
    }

    .app-course-list-row > * {
        display: block;
        padding: 0;
        border-bottom: none;
    }

    .app-course-list-top {
        flex: 1 1 100%;
    }

    .app-course-list-name {
        max-width: none;
    }

    .app-course-list-meta,
    .app-course-list-progress {
        flex: 1 1 140px;
        white-space: normal;
    }

    .app-course-list-meta-item,
    .app-course-list-meta-value {
        white-space: normal;
    }

    .app-course-list-accessed {
        display: none;
    }

    .app-course-list-actions {
        flex: 1 1 100%;
        white-space: normal;
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }
}

.app-progress-track {
    background: var(--app-border);
    border-radius: 50px;
    height: 6px;
    width: 100%;
    overflow: hidden;
    margin-bottom: .3rem;
}

.app-progress-fill {
    background: var(--app-ink);
    height: 100%;
    border-radius: 50px;
    transition: width 1s cubic-bezier(.4, 0, .2, 1);
}

.app-progress-fill.grad-purple {
    background: linear-gradient(90deg, #A78BFA 0%, #4C1D95 100%);
}

.app-progress-fill.grad-green {
    background: linear-gradient(90deg, #6EE7B7 0%, #047857 100%);
}

.app-progress-fill.grad-orange {
    background: linear-gradient(90deg, #FDBA74 0%, #C2410C 100%);
}

.app-progress-fill.grad-blue {
    background: linear-gradient(90deg, #93C5FD 0%, #1D4ED8 100%);
}

.app-progress-fill.grad-red {
    background: linear-gradient(90deg, #FCA5A5 0%, #B91C1C 100%);
}

.app-progress-card-title {
    font-size: .82rem;
    font-weight: 600;
    color: var(--app-ink);
}

/* Class Progress card - admin-side count of classes completed out of total. */
.app-class-progress-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #10B981, #047857);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: .6rem;
}

.app-class-progress-count {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--app-ink);
}

.app-class-progress-count span {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--app-muted);
}

.app-progress-item {
    margin-bottom: .85rem;
}

.app-progress-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .76rem;
    margin-bottom: .3rem;
}

.app-progress-item-label {
    color: var(--app-muted);
}

.app-progress-item-pct {
    font-weight: 600;
    color: var(--app-ink);
}

/* Empty-state prompt inside a profile score tab */
.app-empty-prompt {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--app-muted);
}

.app-empty-prompt i {
    font-size: 2rem;
    color: var(--app-border);
    margin-bottom: .6rem;
    display: block;
}

/* Certificate button - locked/disabled until the course is complete */
.app-cert-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    width: 100%;
    background: linear-gradient(135deg, #3a3a3a 0%, #000000 100%);
    color: #fff;
    border: none;
    font-weight: 500;
    font-size: .76rem;
    border-radius: 50px;
    padding: .45rem .8rem;
    text-decoration: none;
    transition: opacity .15s ease;
}

.app-cert-btn:hover {
    opacity: .85;
    color: #fff;
}

.app-cert-btn.disabled {
    background: var(--app-primary-soft);
    color: var(--app-muted);
    cursor: not-allowed;
}

.app-cert-btn.disabled:hover {
    opacity: 1;
}

.app-cert-btn.outline {
    background: transparent;
    color: var(--app-ink);
    border: 1px solid var(--app-border);
}

.app-cert-btn.outline:hover {
    background: var(--app-primary-soft);
    color: var(--app-ink);
    opacity: 1;
}

.app-cert-btn.outline.brochure {
    border: 1.5px solid var(--app-amber);
    color: var(--app-amber);
}

.app-cert-btn.outline.brochure i {
    color: var(--app-amber);
}

.app-cert-btn.outline.brochure:hover {
    background: rgba(234, 88, 12, .1);
    color: var(--app-amber);
    opacity: 1;
}

/* Certificates */
.app-cert-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    border: 1px solid var(--app-border);
    border-radius: .7rem;
    padding: .9rem;
    height: 100%;
}

.app-cert-item .app-cert-badge {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--app-success-bg);
    color: var(--app-success-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Two highlight stat blocks - white cards with a small soft status badge, not solid color fills */
.app-highlight {
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 1.1rem 1.2rem;
    color: var(--app-ink);
    height: 100%;
    position: relative;
}

.app-highlight .app-highlight-number {
    font-size: 1.8rem;
    font-weight: 700;
}

.app-highlight .app-highlight-label {
    font-size: .78rem;
    color: var(--app-muted);
}

.app-highlight .app-highlight-icon {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    font-size: 1rem;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-highlight.is-success .app-highlight-icon {
    background: var(--app-success-bg);
    color: var(--app-success-text);
}

.app-highlight.is-warning .app-highlight-icon {
    background: var(--app-warning-bg);
    color: var(--app-warning-text);
}

/* Donut / progress ring - gradient sweep across the filled arc (pure CSS conic-gradient) */
.app-ring {
    --pct: 0;
    --ring-a: var(--app-ink);
    --ring-b: var(--app-ink);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--ring-a) 0%, var(--ring-b) calc(var(--pct) * 1%), var(--app-border) 0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 1s ease;
    margin: 0 auto;
}

.app-ring span {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--app-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--app-ink);
}

.app-ring span small {
    font-size: .68rem;
    font-weight: 500;
    color: var(--app-muted);
}

.app-ring.sm {
    width: 44px;
    height: 44px;
}

.app-ring.sm span {
    width: 34px;
    height: 34px;
    font-size: .62rem;
}

.app-ring.xs {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.app-ring.xs span {
    width: 26px;
    height: 26px;
    font-size: .52rem;
}

.app-ring.grad-purple {
    --ring-a: #A78BFA;
    --ring-b: #4C1D95;
}

.app-ring.grad-green {
    --ring-a: #6EE7B7;
    --ring-b: #047857;
}

.app-ring.grad-orange {
    --ring-a: #FDBA74;
    --ring-b: #C2410C;
}

.app-ring.grad-red {
    --ring-a: #FCA5A5;
    --ring-b: #B91C1C;
}

.app-ring.grad-yellow {
    --ring-a: #FDE68A;
    --ring-b: #B45309;
}

.app-level-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: .2rem .7rem;
    border-radius: 50px;
}

.app-capsule-separator {
    border: none;
    border-top: 1px solid var(--app-border);
    margin: .6rem 0;
}

.app-level-badge.grad-red {
    background: var(--app-warning-bg);
    color: #B91C1C;
}

.app-level-badge.grad-yellow {
    background: var(--app-warning-bg);
    color: #B45309;
}

.app-level-badge.grad-green {
    background: var(--app-success-bg);
    color: var(--app-success-text);
}

/* Multi-step form wizard */
.app-wizard-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 1.75rem;
}

.app-wizard-steps:before {
    content: '';
    position: absolute;
    top: 17px;
    left: 5%;
    right: 5%;
    height: 2px;
    background: var(--app-border);
    z-index: 0;
}

.app-wizard-step-item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    flex: 1;
    cursor: pointer;
    background: none;
    border: none;
}

.app-wizard-step-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--app-card);
    border: 2px solid var(--app-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 600;
    color: var(--app-muted);
    transition: all .15s ease;
}

.app-wizard-step-label {
    font-size: .76rem;
    color: var(--app-muted);
    font-weight: 500;
    text-align: center;
}

.app-wizard-step-item.active .app-wizard-step-circle {
    background: var(--app-ink);
    border-color: var(--app-ink);
    color: var(--app-card);
}

.app-wizard-step-item.active .app-wizard-step-label {
    color: var(--app-ink);
    font-weight: 600;
}

.app-wizard-step-item.done .app-wizard-step-circle {
    background: var(--app-success-text);
    border-color: var(--app-success-text);
    color: #fff;
}

.app-wizard-panel {
    display: none;
}

.app-wizard-panel.active {
    display: block;
}

/* Cleaner, consistent form controls inside the app shell */
body.app-shell .form-label {
    font-size: .84rem;
    font-weight: 600;
    color: var(--app-ink);
    margin-bottom: .4rem;
}

body.app-shell .form-label .app-required-mark {
    color: #EA580C;
    font-size: .5rem;
    vertical-align: super;
    margin-left: .15rem;
}

body.app-shell .form-text,
body.app-shell small.text-muted {
    font-size: .74rem;
}

body.app-shell .form-control,
body.app-shell .form-select {
    border: 1px solid var(--app-border);
    border-radius: .6rem;
    padding: .55rem .9rem;
    font-size: .88rem;
    background-color: var(--app-card);
    color: var(--app-ink);
}

body.app-shell .form-control:focus,
body.app-shell .form-select:focus {
    border-color: var(--app-ink);
    box-shadow: 0 0 0 .15rem rgba(0, 0, 0, .08);
}

body.app-shell .form-control:disabled {
    background-color: var(--app-primary-soft);
    opacity: .8;
}

/* Icon docked inside a text input */
.app-input-icon {
    position: relative;
}

.app-input-icon > i {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--app-muted);
    font-size: .95rem;
    pointer-events: none;
}

body.app-shell .app-input-icon > .form-control,
body.app-shell .app-input-icon > .form-select {
    padding-left: 2.5rem;
}

/* Merged calling-code + mobile number pair */
.app-phone-group {
    display: flex;
    min-width: 0;
}

.app-phone-group .select2-container {
    flex: 0 0 110px !important;
    width: 110px !important;
    max-width: 110px !important;
    min-width: 0 !important;
}

.app-phone-group .select2-container .select2-selection--single {
    height: 100% !important;
    min-height: 2.5rem;
    border-radius: .6rem 0 0 .6rem !important;
    border-right: none !important;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.app-phone-group .select2-container .select2-selection__rendered {
    line-height: normal !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-phone-group .select2-container .select2-selection__arrow {
    height: 100% !important;
}

/* Vendor CSS hardcodes the closed selection box to a light-grey, non-theme-aware
   background/text/arrow - override so it follows light/dark mode like every
   other control on the page instead of staying stuck on its own old styling. */
.select2-container--default .select2-selection--single {
    background-color: var(--app-card) !important;
    border: 1px solid var(--app-border) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--app-ink) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--app-muted) transparent transparent transparent !important;
}

.app-phone-group .app-input-icon {
    flex-grow: 1;
    min-width: 0;
}

.app-phone-group .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Select2 dropdown (appended to <body>, not nested under .app-phone-group, so it
   needs its own sizing independent of the narrow closed trigger box) - match the
   app's own look instead of the vendor bundle's default blue/system-font styling. */
.select2-container .select2-selection__rendered,
.select2-results__option,
.select2-search__field {
    font-family: var(--app-font);
    font-size: .85rem;
    color: var(--app-ink);
}

.flag-text {
    font-family: var(--app-font);
    font-size: .85rem;
    color: var(--app-ink);
}

.select2-dropdown {
    min-width: 230px;
    border: 1px solid var(--app-border) !important;
    border-radius: .6rem !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
    overflow: hidden;
    font-family: var(--app-font);
    background-color: var(--app-card);
}

.select2-search--dropdown {
    padding: .55rem;
    background-color: var(--app-card);
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--app-border) !important;
    border-radius: .5rem;
    padding: .4rem .7rem;
    outline: none;
    background-color: var(--app-card);
    color: var(--app-ink);
}

.select2-results__options,
.select2-results__option {
    /* Vendor CSS never made these theme-aware, so in dark mode they stayed on
       their native white background while the .flag-text child (bound to
       --app-ink) turned near-white too - invisible text regardless of hover. */
    background-color: var(--app-card) !important;
    max-height: 260px;
}

.select2-results__option {
    padding: .5rem .9rem;
}

/* Hardcoded (not theme-variable) colors on the hover/highlighted state on
   purpose - it's a transient state, so a fixed dark-bg/light-text treatment is
   simpler and safer than trying to invert per theme. Both the row itself and
   its .flag-text child need the override: formatCountryResult() renders the
   visible label inside a child <span class="flag-text"> that carries its own
   explicit color, which otherwise ignores whatever color is set on the row. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-results__option--highlighted[aria-selected] {
    background-color: #171717 !important;
    color: #ffffff !important;
}

.select2-results__option--highlighted[aria-selected] .flag-text,
.select2-container--default .select2-results__option--highlighted[aria-selected] .flag-text {
    color: #ffffff !important;
}

.select2-container--default .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted),
.select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
    background-color: var(--app-primary-soft) !important;
    color: var(--app-ink) !important;
}

.select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) .flag-text {
    color: var(--app-ink) !important;
}

/* Class accordion (View Classes page) */
.app-class-item {
    border-bottom: 1px solid var(--app-border);
}

.app-class-item:last-child {
    border-bottom: none;
}

.app-class-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1.1rem;
}

.app-class-row:hover {
    background: var(--app-primary-soft);
}

.app-class-icons {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    flex-shrink: 0;
}

.app-class-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    min-width: 56px;
}

.app-class-icon-group {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
    justify-content: center;
}

.app-class-icon-label {
    font-size: .62rem;
    color: var(--app-muted);
    white-space: nowrap;
}

.app-class-icon-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    background: var(--app-card);
    font-size: .95rem;
}

.app-class-icon-btn::after {
    display: none;
}

.app-class-icon-btn.c-blue {
    color: var(--app-blue);
    border-color: var(--app-blue);
}

.app-class-icon-btn.c-amber {
    color: var(--app-amber);
    border-color: var(--app-amber);
}

.app-class-icon-btn.c-teal {
    color: var(--app-teal);
    border-color: var(--app-teal);
}

.app-class-icon-btn.c-purple {
    color: #6D28D9;
    border-color: #6D28D9;
}

.app-class-icon-btn.c-pink {
    color: var(--app-pink);
    border-color: var(--app-pink);
}

.app-class-icon-btn.c-orange {
    color: #C2410C;
    border-color: #C2410C;
}

.app-class-icon-btn.c-red {
    color: #DC2626;
    border-color: #DC2626;
}

.app-class-icon-btn.c-blue:hover,
.app-class-icon-btn.c-amber:hover,
.app-class-icon-btn.c-teal:hover,
.app-class-icon-btn.c-purple:hover,
.app-class-icon-btn.c-pink:hover,
.app-class-icon-btn.c-orange:hover,
.app-class-icon-btn.c-red:hover {
    background: var(--app-primary-soft);
}

/* Bold filled treatment for icons that are genuinely unlocked/clickable
   (e.g. the free-material preview row's Recording/PPT icons), so they read
   clearly against the muted disabled icons sitting right next to them. */
.app-class-icon-btn.is-active-material {
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.app-class-icon-btn.is-active-material.c-blue {
    background: var(--app-blue);
}

.app-class-icon-btn.is-active-material.c-amber {
    background: var(--app-amber);
}

.app-class-icon-btn.is-active-material.c-teal {
    background: var(--app-teal);
}

.app-class-icon-btn.is-active-material.c-purple {
    background: #6D28D9;
}

.app-class-icon-btn.is-active-material.c-pink {
    background: var(--app-pink);
}

.app-class-icon-btn.is-active-material.c-orange {
    background: #C2410C;
}

.app-class-icon-btn.is-active-material.c-red {
    background: #DC2626;
}

/* Certificate gets a distinct purple gradient fill (its original treatment)
   instead of a flat colour. */
.app-class-icon-btn.is-active-material.cert-grad {
    background: linear-gradient(135deg, #7C3AED 0%, #4C1D95 100%);
    color: #fff;
    border-color: transparent;
}

.app-class-icon-btn.is-active-material:hover {
    opacity: .88;
}

.app-class-icon-btn:disabled,
.app-class-icon-btn.is-disabled {
    color: var(--app-muted) !important;
    border-color: var(--app-border) !important;
    opacity: .5;
    cursor: not-allowed;
    background: var(--app-card);
    pointer-events: none;
}

/* Material NOT available: keep the simple colored LINE (outlined) icon - not
   filled - but softened so it reads as inactive next to the bold filled
   .is-active-material icons. Contrast with .is-disabled which greys the color
   out entirely. Note: no pointer-events:none here - we WANT hover so the
   "not available" title tooltip shows and the not-allowed cursor appears. */
.app-class-icon-btn.is-unavailable {
    background: var(--app-card);
    opacity: .45;
    cursor: not-allowed;
}

.app-class-icon-menu {
    min-width: 220px;
    padding: .6rem;
    font-size: .82rem;
}

.app-class-expand-btn {
    background: none;
    border: none;
    color: var(--app-muted);
    flex-shrink: 0;
    padding: .3rem;
}

.app-class-expand-btn .app-class-chevron {
    transition: transform .2s ease;
}

.app-class-expand-btn[aria-expanded="true"] .app-class-chevron {
    transform: rotate(180deg);
}

/* ===== "Topics Included" button + overlay popover ===== */
/* The class-list card normally clips (overflow:hidden) for rounded corners, but
   that would cut off a topics popover opening over the lower rows - let this
   specific card overflow so the popover is never clipped. */
.app-card-topics-host {
    overflow: visible;
}

.app-class-right {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}

.app-class-topics-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
    border: 1px solid var(--app-border);
    background: var(--app-card);
    color: var(--app-ink);
    border-radius: 50px;
    padding: .34rem .8rem;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.app-class-topics-btn:hover {
    background: var(--app-primary-soft);
    border-color: var(--app-blue);
}

.app-class-topics-btn i {
    font-size: .62rem;
    transition: transform .25s ease;
}

.app-class-topics-btn.is-open {
    border-color: var(--app-blue);
    box-shadow: 0 0 0 3px rgb(37 99 235 / 12%);
}

.app-class-topics-btn.is-open i {
    transform: rotate(180deg);
}

/* Absolutely covers the .app-class-right cluster (icons + status). Starts
   collapsed/hidden and eases into view for a smooth reveal. */
.app-class-topics-pop {
    position: absolute;
    inset: -7px -8px auto -8px;
    min-height: calc(100% + 14px);
    max-height: 280px;
    overflow: auto;
    background: var(--app-card);
    border: 1px solid var(--app-blue);
    border-radius: .65rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    padding: .7rem .9rem;
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(.97);
    transform-origin: top right;
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}

.app-class-topics-pop.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity .22s ease, transform .22s ease, visibility 0s;
}

.app-class-topics-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .72rem;
    font-weight: 700;
    color: var(--app-ink);
    margin-bottom: .4rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--app-border);
}

.app-class-topics-close {
    background: none;
    border: none;
    color: var(--app-muted);
    font-size: .7rem;
    padding: 0 0 0 .5rem;
    cursor: pointer;
    line-height: 1;
}

.app-class-topics-close:hover {
    color: var(--app-ink);
}

.app-class-num {
    font-size: .78rem;
    color: var(--app-muted);
    flex-shrink: 0;
    width: 70px;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

/* Dynamic "Class N" sequence label shown under the JB batch id. */
.app-class-num-seq {
    font-size: .82rem;
    font-weight: 500;
    color: var(--app-ink);
}

.app-class-num-id {
    font-size: .68rem;
    color: var(--app-muted);
}

.app-class-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .88rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* On phones, .app-class-row's 6 fixed-width icon items alone need ~380px -
   more than the viewport - so the single-line row squeezed .app-class-title
   down to zero visible width and clipped the later icons off the edge
   entirely. Reflow into: line 1 = ID + class name (+ status/expand), line 2 =
   all icons, wrapping onto a 2nd icon row themselves if 6 still don't fit. */
@media (max-width: 575px) {
    .app-class-row {
        flex-wrap: wrap;
        row-gap: .5rem;
    }

    .app-class-num {
        width: auto;
        order: 1;
    }

    .app-class-title {
        order: 2;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .app-class-topics-btn {
        order: 3;
        margin-left: auto;
    }

    /* The right cluster (icons + status) drops to its own full-width line;
       the topics popover still overlays exactly this cluster. */
    .app-class-right {
        order: 4;
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: .5rem .3rem;
    }

    .app-class-icons {
        flex: 1 1 100%;
        flex-wrap: nowrap;
        gap: .3rem;
        justify-content: space-between;
    }

    .app-class-icon-item {
        min-width: 0;
        flex: 1 1 0;
        gap: .15rem;
    }

    .app-class-icon-btn {
        width: 30px;
        height: 30px;
        font-size: .82rem;
    }

    .app-class-icon-label {
        font-size: .56rem;
    }
}

.app-class-body {
    padding: 1rem 1.1rem 1.1rem;
    border-top: 1px solid var(--app-border);
}

.app-class-intro {
    font-size: .82rem;
    line-height: 1.6;
    color: var(--app-muted);
}

.app-status-badge {
    font-size: .7rem;
    font-weight: 600;
    padding: .25rem .7rem;
    border-radius: 50px;
    flex-shrink: 0;
    white-space: nowrap;
    /* Fixed width so "Started"/"Completed"/"Not Started" all occupy the same
       space - otherwise the narrower pill pulls the icon row out of alignment.
       Sized to comfortably fit the longest label ("Not Started"). */
    min-width: 96px;
    text-align: center;
}

.app-status-badge.not-started {
    background: var(--app-primary-soft);
    color: var(--app-muted);
}

.app-status-badge.started {
    background: var(--app-warning-bg);
    color: var(--app-warning-text);
}

.app-status-badge.completed {
    background: var(--app-success-bg);
    color: var(--app-success-text);
}

.app-resource-modal .modal-content {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    background: var(--app-card);
}

.app-resource-modal .modal-body {
    padding: 1.2rem;
    max-height: 65vh;
    overflow-y: auto;
}

/* Recording playback modal - maximize the video area itself instead of
   boxing it inside a padded header/body, so the frame reserved for the
   video (real or, when Vimeo's privacy setting blocks it, its own error
   page) takes up as much width as possible with no wasted chrome around it. */
.app-video-modal-dialog {
    max-width: 90vw;
}

@media (min-width: 1200px) {
    .app-video-modal-dialog {
        max-width: 1100px;
    }
}

.app-video-modal-content {
    background: #000;
    border: none;
    border-radius: .75rem;
    overflow: hidden;
    padding: 0;
}

.app-video-modal-close {
    position: absolute;
    top: .6rem;
    right: .6rem;
    z-index: 5;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    background-color: rgba(0, 0, 0, .55);
    border-radius: 50%;
    opacity: 1;
    filter: invert(1) grayscale(100%) brightness(200%);
}

.app-resource-modal-header {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1.1rem 1.3rem;
    color: #fff;
}

.app-resource-modal-header.teal {
    background: linear-gradient(135deg, #0D9488 0%, #0F766E 100%);
}

.app-resource-modal-header.purple {
    background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
}

.app-resource-modal-icon {
    width: 42px;
    height: 42px;
    border-radius: .7rem;
    background: rgba(255, 255, 255, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.app-resource-modal-header h6 {
    color: #fff;
}

.app-resource-modal-header small {
    color: rgba(255, 255, 255, .8);
}

.app-resource-modal-header .btn-close {
    margin-left: auto;
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .9;
}

.app-resource-card {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1rem;
    border: 1px solid var(--app-border);
    border-radius: .8rem;
    margin-bottom: .8rem;
    transition: box-shadow .15s ease, transform .15s ease;
}

.app-resource-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .07);
    transform: translateY(-2px);
}

.app-resource-card:last-child {
    margin-bottom: 0;
}

.app-resource-card-icon {
    width: 42px;
    height: 42px;
    border-radius: .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.app-resource-card-icon.c-teal {
    background: rgba(13, 148, 136, .12);
    color: var(--app-teal);
}

.app-resource-card-icon.c-purple {
    background: rgba(109, 40, 217, .12);
    color: #6D28D9;
}

.app-resource-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.app-resource-card-title {
    font-size: .86rem;
    font-weight: 600;
    color: var(--app-ink);
    margin-bottom: .55rem;
}

.app-resource-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.app-resource-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 500;
    padding: .38rem .75rem;
    border-radius: 50px;
    border: 1px solid var(--app-border);
    background: var(--app-card);
    color: var(--app-ink);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.app-resource-btn.download {
    color: var(--app-blue);
    border-color: var(--app-blue);
}

.app-resource-btn.download:hover {
    background: var(--app-blue);
    color: #fff;
}

.app-resource-btn.upload {
    color: var(--app-teal);
    border-color: var(--app-teal);
    border-style: dashed;
}

.app-resource-btn.upload:hover {
    background: var(--app-teal);
    color: #fff;
    border-style: solid;
}

.app-resource-uploaded-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .65rem;
}

.app-resource-uploaded-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .76rem;
    font-weight: 500;
    padding: .3rem .3rem .3rem .7rem;
    border-radius: 50px;
    background: var(--app-success-bg);
    color: var(--app-success-text);
}

.app-resource-uploaded-chip .file-link {
    color: inherit;
    text-decoration: none;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-resource-uploaded-chip .file-link:hover {
    text-decoration: underline;
}

.app-resource-uploaded-chip .att_remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    opacity: .75;
    line-height: 1;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.app-resource-uploaded-chip .att_remove:hover {
    opacity: 1;
}

.app-live-banner {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    border-radius: var(--app-radius);
    color: #fff;
    padding: 1rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.app-live-banner .app-live-title {
    font-weight: 600;
    margin-bottom: .1rem;
}

.app-live-banner .app-live-sub {
    font-size: .8rem;
    opacity: .85;
}

.app-live-banner.is-idle {
    background: var(--app-card);
    border: 1px solid var(--app-border);
    color: var(--app-ink);
}

.app-live-banner.is-idle .app-live-title {
    color: var(--app-muted);
    font-weight: 500;
}

.app-live-banner.is-idle .app-live-sub {
    color: var(--app-muted);
    opacity: 1;
}

/* Interactive "get enrolled" onboarding flow shown to students with zero
   enrollments, replacing what used to be a static infographic image. Uses
   the same card-header/icon-accent conventions as the rest of the dashboard
   (--app-blue/--app-amber/--app-teal rotation, .app-promo-banner, etc.)
   rather than a one-off palette. */
.app-onboard-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: .3rem;
    padding: .5rem 0;
}

@keyframes appOnboardStepIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.app-onboard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 118px;
    padding: .5rem .3rem;
    border-radius: .7rem;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: background .2s ease;
    animation: appOnboardStepIn .45s ease both;
    animation-delay: calc(var(--step-i, 0) * 80ms);
}

.app-onboard-step:hover {
    background: var(--app-primary-soft);
    color: inherit;
}

.app-onboard-num {
    position: absolute;
    top: .3rem;
    right: 1.3rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--app-ink);
    color: var(--app-card);
    font-size: .62rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-onboard-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--step-color, var(--app-blue));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

.app-onboard-label {
    font-size: .74rem;
    font-weight: 600;
    color: var(--app-ink);
    margin-top: .5rem;
    line-height: 1.25;
}

.app-onboard-hint {
    font-size: .66rem;
    color: var(--app-muted);
    margin-top: .2rem;
    line-height: 1.3;
}

.app-onboard-arrow {
    color: var(--app-border);
    font-size: 1.1rem;
    align-self: center;
    margin-top: 1.6rem;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .app-onboard-arrow {
        display: none;
    }
    .app-onboard-step {
        width: 33%;
    }
}

/* Featured/trending courses - horizontal scrolling single row, real data
   (jb_courses + jb_batches + jb_course_template4) shared with the public
   marketing homepage's "Explore Career Programs" section. */
.app-featured-carousel {
    position: relative;
}

.app-featured-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.app-featured-scroll::-webkit-scrollbar {
    display: none;
}

.app-featured-nav {
    position: absolute;
    top: 55px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--app-border);
    background: var(--app-card);
    color: var(--app-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
    z-index: 2;
    transition: opacity .15s ease, box-shadow .15s ease;
}

.app-featured-nav:hover {
    box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}

.app-featured-nav.prev {
    left: -14px;
}

.app-featured-nav.next {
    right: -14px;
}

.app-featured-nav:disabled {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 575px) {
    .app-featured-nav {
        display: none;
    }
}

.app-featured-card {
    flex: 0 0 200px;
    scroll-snap-align: start;
    border: 1px solid var(--app-border);
    border-radius: .8rem;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    background: var(--app-card);
    transition: transform .2s ease, box-shadow .2s ease;
    padding-bottom: 1rem;
}

.app-featured-card:hover {
    color: inherit;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .1);
}

.app-featured-photo {
    position: relative;
    height: 110px;
    margin-bottom: 1.4rem;
}

.app-featured-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.app-featured-icon {
    position: absolute;
    left: 50%;
    bottom: -22px;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--app-card);
    border: 1px solid var(--app-border);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.app-featured-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.app-featured-name {
    font-size: .88rem;
    font-weight: 700;
    color: var(--app-blue);
    text-align: center;
    padding: 0 .6rem;
    margin-bottom: .35rem;
}

.app-featured-rating {
    font-size: .74rem;
    color: var(--app-ink);
    text-align: center;
    margin-bottom: .4rem;
}

.app-featured-rating .bi-star-fill {
    color: var(--app-amber);
}

.app-featured-date {
    font-size: .72rem;
    color: var(--app-muted);
    text-align: center;
    margin-bottom: 0;
}

/* Free-material preview list: first N rows are real/clickable, the rest are
   shown (title + type still visible) but blurred and non-interactive behind
   a lock overlay to nudge enrollment. */
.app-class-item.is-locked {
    position: relative;
}

.app-class-item.is-locked .app-class-row {
    filter: blur(3px);
    opacity: .5;
    pointer-events: none;
    user-select: none;
}

.app-material-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    flex-wrap: wrap;
    z-index: 2;
}

.app-material-lock-badge {
    display: inline-flex;
    align-items: center;
    background: var(--app-ink);
    color: var(--app-card);
    font-size: .76rem;
    font-weight: 600;
    padding: .4rem .9rem;
    border-radius: 50px;
    white-space: nowrap;
}

.app-material-lock-btn {
    font-size: .76rem;
    font-weight: 600;
    color: var(--app-blue);
    text-decoration: underline;
    white-space: nowrap;
}

/* Reports page: overall ring + a mini-metric card per category, reusing the
   same .app-mini-metric/.app-progress-fill components as the dashboard hero
   card - each bar reflects that category's own percentage rather than being
   scaled against other categories' raw counts. */
.app-report-summary {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-wrap: wrap;
}

.app-report-ring-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.app-report-metrics {
    display: flex;
    gap: .75rem;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.app-report-metric {
    flex: 1 1 170px;
    min-width: 170px;
}

@media (max-width: 767px) {
    .app-report-summary {
        flex-direction: column;
        align-items: stretch;
    }
    .app-report-metrics {
        flex-direction: column;
    }
    /* .app-report-metric's flex-basis (170px) and flex-grow (1) were sized for
       a row layout, where the basis sets a WIDTH. Once the container above
       switches its main axis to vertical, that same rule sets a 170px
       min-HEIGHT plus grow, so each card stretches to fill leftover vertical
       space - the large empty gaps under each metric's progress bar. Let each
       card size to its own content instead. */
    .app-report-metric {
        flex: none;
        min-width: 0;
    }
}

/* Report card header (course icon/name + Detailed Report button) on phones -
   give the button its own full-width row instead of a small tap target
   floated to the right of a wrapped line. */
@media (max-width: 575px) {
    .app-report-card-header {
        align-items: flex-start;
    }
    .app-report-card-btn {
        flex: 1 1 100%;
        text-align: center;
    }
}

/* Detailed report page - per-tab data tables and the login weekday chart. */
.app-report-table-scroll {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: auto;
}

.app-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
    white-space: nowrap;
}

.app-report-table thead th {
    position: sticky;
    top: 0;
    background: var(--app-primary-soft);
    text-align: left;
    padding: .7rem .9rem;
    font-weight: 700;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--app-ink);
    border-bottom: 2px solid var(--app-border);
    z-index: 1;
}

.app-report-table tbody td {
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--app-border);
    color: var(--app-ink);
}

.app-report-table tbody tr:hover {
    background: var(--app-primary-soft);
}

.app-report-table tbody tr:last-child td {
    border-bottom: none;
}

/* Order History page: tables size themselves to the viewport instead of a fixed height. */
.app-order-table-scroll {
    max-height: clamp(240px, calc(100vh - 300px), 620px);
}

@media (max-width: 767px) {
    .app-order-table-scroll {
        max-height: clamp(200px, calc(100vh - 360px), 500px);
    }
}

/* Order History page: icon + text action pills inside table cells. */
.app-table-btn {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: .76rem;
    font-weight: 600;
    padding: .35rem .8rem;
    border-radius: 50px;
    border: none;
    color: #fff;
    text-decoration: none;
}

.app-table-btn.grad-amber {
    background: linear-gradient(135deg, #FB923C 0%, #C2410C 100%);
}

.app-table-btn.grad-amber:hover {
    color: #fff;
    opacity: .85;
}

.app-table-btn.grad-teal {
    background: linear-gradient(135deg, #2DD4BF 0%, #0D9488 100%);
}

.app-table-btn.grad-teal:hover {
    color: #fff;
    opacity: .85;
}

.app-table-btn.grad-purple {
    background: linear-gradient(135deg, #7C3AED 0%, #4C1D95 100%);
}

.app-table-btn.grad-purple:hover {
    color: #fff;
    opacity: .85;
}

.app-table-btn.is-disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

.app-weekday-chart {
    display: flex;
    align-items: flex-end;
    gap: .9rem;
    height: 120px;
}

.app-weekday-chart-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
    justify-content: flex-end;
}

.app-weekday-chart-bar-wrap {
    height: 90px;
    width: 28px;
    display: flex;
    align-items: flex-end;
}

.app-weekday-chart-bar {
    width: 100%;
    min-height: 2px;
    border-radius: .3rem .3rem 0 0;
    background: linear-gradient(180deg, #A78BFA 0%, #4C1D95 100%);
    transition: height .8s cubic-bezier(.4, 0, .2, 1);
}

.app-weekday-chart-label {
    font-size: .68rem;
    color: var(--app-muted);
    margin-top: .5rem;
}

/* Interview Q&A page: searchable accordion. */
.app-iqa-search {
    position: relative;
}

.app-iqa-search i {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--app-muted);
    font-size: .85rem;
}

.app-iqa-search input {
    width: 100%;
    padding: .55rem .9rem .55rem 2.2rem;
    border: 1px solid var(--app-border);
    border-radius: 50px;
    background: var(--app-card);
    color: var(--app-ink);
    font-size: .84rem;
}

.app-iqa-search input:focus {
    outline: none;
    border-color: var(--app-blue);
}

.app-iqa-item {
    border-bottom: 1px solid var(--app-border);
}

.app-iqa-item:last-child {
    border-bottom: none;
}

.app-iqa-question {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    padding: .9rem 1.1rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.app-iqa-question:hover {
    background: var(--app-primary-soft);
}

.app-iqa-num {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--app-primary-soft);
    color: var(--app-blue);
    font-size: .74rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-iqa-question-text {
    flex: 1 1 auto;
    font-size: .88rem;
    font-weight: 600;
    color: var(--app-ink);
}

.app-iqa-chevron {
    flex-shrink: 0;
    color: var(--app-muted);
    transition: transform .2s ease;
}

.app-iqa-question[aria-expanded="true"] .app-iqa-chevron {
    transform: rotate(180deg);
}

.app-iqa-answer {
    padding: 0 1.1rem 1.1rem 3.7rem;
    font-size: .84rem;
    line-height: 1.6;
    color: var(--app-muted);
}

/* Quick Support page: FAQ accordion (same visual language as the Interview Q&A accordion). */
.app-faq-item {
    border-bottom: 1px solid var(--app-border);
}

.app-faq-item:last-child {
    border-bottom: none;
}

.app-faq-question {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    padding: .9rem 1.1rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.app-faq-question:hover {
    background: var(--app-primary-soft);
}

.app-faq-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--app-primary-soft);
    color: var(--app-teal);
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-faq-question-text {
    flex: 1 1 auto;
    font-size: .88rem;
    font-weight: 600;
    color: var(--app-ink);
}

.app-faq-chevron {
    flex-shrink: 0;
    color: var(--app-muted);
    transition: transform .2s ease;
}

.app-faq-question[aria-expanded="true"] .app-faq-chevron {
    transform: rotate(180deg);
}

.app-faq-answer {
    padding: 0 1.1rem 1.1rem 3.7rem;
    font-size: .84rem;
    line-height: 1.6;
    color: var(--app-muted);
}

/* Quick Support page: contact form feedback + validation states. */
.app-form-alert {
    display: none;
    padding: .65rem .9rem;
    border-radius: .6rem;
    font-size: .82rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.app-form-alert.success {
    display: block;
    background: var(--app-success-bg);
    color: var(--app-success-text);
}

.app-form-alert.error {
    display: block;
    background: var(--app-warning-bg);
    color: var(--app-pink);
}

body.app-shell .form-control.is-invalid,
body.app-shell .form-select.is-invalid {
    border-color: var(--app-pink);
}

.app-invalid-feedback {
    display: none;
    color: var(--app-pink);
    font-size: .76rem;
    margin-top: .3rem;
}

.app-invalid-feedback.show {
    display: block;
}

/* Refund Policy page. */
.app-policy-callout {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--app-success-bg);
}

.app-policy-callout i {
    font-size: 1.8rem;
    color: var(--app-success-text);
    flex-shrink: 0;
}

.app-policy-list {
    margin: 0;
    padding-left: 1.2rem;
}

.app-policy-list li {
    margin-bottom: .8rem;
    line-height: 1.6;
    font-size: .88rem;
    color: var(--app-ink);
}

.app-policy-list li:last-child {
    margin-bottom: 0;
}

.app-policy-list ul {
    margin-top: .5rem;
}

/* Refund policy page helpers */
.app-policy-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1.1rem;
    align-items: center;
    font-size: .8rem;
    color: var(--app-muted);
    margin: 0;
}

.app-policy-note {
    border-radius: .6rem;
    padding: .85rem 1.05rem;
    background: var(--app-primary-soft);
    border-left: 4px solid var(--app-blue);
    font-size: .85rem;
    line-height: 1.6;
    color: var(--app-ink);
}

.app-policy-note-title {
    display: block;
    font-weight: 600;
    margin-bottom: .2rem;
}

.app-policy-note.success {
    background: var(--app-success-bg);
    border-left-color: var(--app-success-text);
}

.app-policy-note.danger {
    background: rgba(190, 18, 60, .08);
    border-left-color: var(--app-pink);
}

.app-policy-xlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.app-policy-xlist li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: .6rem;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--app-ink);
}

.app-policy-xlist li:last-child {
    margin-bottom: 0;
}

.app-policy-xlist li::before {
    content: "\2718";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--app-pink);
    font-weight: 700;
}

.app-policy-steps {
    list-style: none;
    counter-reset: pstep;
    margin: 0;
    padding: 0;
}

.app-policy-steps li {
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: .9rem;
    min-height: 26px;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--app-ink);
}

.app-policy-steps li:last-child {
    margin-bottom: 0;
}

.app-policy-steps li::before {
    counter-increment: pstep;
    content: counter(pstep);
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--app-blue);
    color: #fff;
    font-weight: 700;
    font-size: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-policy-contact-row {
    display: flex;
    gap: .5rem;
    font-size: .88rem;
    margin-bottom: .45rem;
}

.app-policy-contact-row:last-child {
    margin-bottom: 0;
}

.app-policy-contact-row .label {
    font-weight: 600;
    min-width: 80px;
    flex-shrink: 0;
}

/* Quiz attempt page (start_test). */
.app-quiz-timer {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: linear-gradient(135deg, #FB923C 0%, #C2410C 100%);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    padding: .5rem 1rem;
    border-radius: 50px;
    white-space: nowrap;
}

.app-quiz-timer.is-critical {
    background: linear-gradient(135deg, #F87171 0%, #B91C1C 100%);
    animation: app-quiz-timer-pulse 1s ease-in-out infinite;
}

@keyframes app-quiz-timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .7; }
}

.app-quiz-nav {
    display: flex;
    align-items: center;
    gap: .6rem;
    overflow-x: auto;
    padding-bottom: .3rem;
}

.app-quiz-nav-item {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--app-border);
    background: var(--app-card);
    color: var(--app-muted);
    font-size: .8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
}

.app-quiz-nav-item:hover {
    border-color: var(--app-blue);
}

.app-quiz-nav-item.active {
    border-color: #1D4ED8;
    background: #1D4ED8;
    color: #fff;
}

.app-quiz-nav-item.answered {
    border-color: #047857;
    background: #047857;
    color: #fff;
}

.app-quiz-nav-item.skipped {
    border-color: #C2410C;
    color: #C2410C;
}

.app-quiz-q-num {
    color: var(--app-blue);
    font-weight: 700;
    margin-right: .3rem;
}

.app-quiz-question-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--app-ink);
    line-height: 1.5;
    margin-bottom: .5rem;
}

.app-quiz-question-desc {
    font-size: .85rem;
    color: var(--app-muted);
    background: var(--app-primary-soft);
    border-radius: .6rem;
    padding: .8rem 1rem;
    margin-bottom: 1.2rem;
}

.app-quiz-options {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.app-quiz-option {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .75rem 1rem;
    border: 1.5px solid var(--app-border);
    border-radius: .7rem;
    cursor: pointer;
    transition: all .15s ease;
}

.app-quiz-option:hover {
    border-color: var(--app-blue);
    background: var(--app-primary-soft);
}

.app-quiz-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.app-quiz-option-mark {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--app-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: .7rem;
    transition: all .15s ease;
}

.app-quiz-option input[type="radio"] ~ .app-quiz-option-mark {
    border-radius: 50%;
}

.app-quiz-option input[type="checkbox"] ~ .app-quiz-option-mark {
    border-radius: .3rem;
}

.app-quiz-option input:checked ~ .app-quiz-option-mark {
    border-color: #1D4ED8;
    background: #1D4ED8;
    color: #fff;
}

.app-quiz-option:has(input:checked),
.app-quiz-option.is-selected {
    border-color: #1D4ED8;
    background: var(--app-primary-soft);
}

.app-quiz-option-text {
    font-size: .9rem;
    color: var(--app-ink);
}

.app-quiz-actions {
    position: sticky;
    bottom: 0;
    background: var(--app-card);
    border-top: 1px solid var(--app-border);
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    border-radius: 0 0 var(--app-radius) var(--app-radius);
}

.app-quiz-actions .btn[disabled] {
    opacity: .4;
    cursor: not-allowed;
}

.app-quiz-loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
}

.app-quiz-loading-overlay .spinner-border {
    width: 2.2rem;
    height: 2.2rem;
    margin-bottom: .7rem;
}

/* Quiz result page. */
.app-quiz-result-question {
    border-left: 4px solid var(--app-border);
}

.app-quiz-result-question.is-correct {
    border-left-color: #047857;
}

.app-quiz-result-question.is-incorrect {
    border-left-color: #B91C1C;
}

.app-quiz-result-question.is-skipped {
    border-left-color: #C2410C;
}

.app-quiz-result-q-num {
    color: var(--app-blue);
    font-weight: 700;
    margin-right: .3rem;
}

.app-quiz-result-question-text {
    font-size: .95rem;
    font-weight: 600;
    color: var(--app-ink);
    line-height: 1.5;
    margin-bottom: .3rem;
}

.app-quiz-result-question-desc {
    font-size: .82rem;
    color: var(--app-muted);
    background: var(--app-primary-soft);
    border-radius: .6rem;
    padding: .7rem .9rem;
    margin-bottom: .9rem;
}

.app-quiz-result-answer-row {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .85rem;
    padding: .3rem 0;
}

.app-quiz-result-answer-row .label {
    flex-shrink: 0;
    width: 130px;
    color: var(--app-muted);
    font-weight: 500;
}

.app-quiz-result-answer-row.correct .value {
    color: #047857;
    font-weight: 600;
}

.app-quiz-result-answer-row.incorrect .value {
    color: #B91C1C;
    font-weight: 600;
}

.app-quiz-result-answer-row.skipped .value {
    color: #C2410C;
    font-weight: 600;
}

.app-card.accent-purple .app-list-sub {
    color: rgba(255, 255, 255, .75);
}

.app-capsule.app-capsule-light {
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .15);
}

a.app-capsule-link {
    text-decoration: none;
    transition: background .2s;
}

a.app-capsule-link:hover {
    background: rgba(255, 255, 255, .3);
    color: #fff;
}

.app-quiz-result-chart {
    width: 100%;
    height: auto;
    overflow: visible;
}

.app-quiz-result-chart-value {
    font-size: 9px;
    font-weight: 700;
    fill: var(--app-ink);
}

.app-quiz-result-chart-label {
    font-size: 8px;
    fill: var(--app-muted);
}

/* PPT viewer - height-driven instead of width-driven: fix a comfortable
   height that always fits on screen without scrolling, and let width follow
   from the real 16:9 slide ratio (capped at the card's width and centered),
   instead of stretching to 100% width and letting height (and letterboxing)
   fall out of that. */
.app-ppt-viewer {
    position: relative;
    aspect-ratio: 16 / 9;
    height: min(58vh, 560px);
    width: auto;
    max-width: 100%;
    background: var(--app-ink);
}

.app-ppt-viewer iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* On phones, mixing an explicit height with max-width:100% fights the
   aspect-ratio math once the width gets clamped by the narrow screen - the
   box ends up reserving more height than the actual clamped-width content
   needs, showing as blank space below the player. Phones are narrow enough
   that going back to width-driven sizing (like the very first version) gives
   a naturally short, on-screen height with no fixed-height/max-width conflict.
   Also drop the card's own padding here so the player runs edge to edge -
   Google's embed toolbar can still wrap on its own at this width (that's
   cross-origin content we can't restyle), but our own Full Screen / Back to
   Classes controls above stay the reliable way to navigate on mobile. */
@media (max-width: 767px) {
    .app-ppt-viewer {
        height: auto;
        width: 100%;
    }

    .app-ppt-card-body {
        padding-left: 0;
        padding-right: 0;
    }
}

.app-ppt-viewer.is-fullscreen {
    aspect-ratio: auto;
    height: 100vh;
    width: 100vw;
    max-width: 100vw;
}

.app-ppt-fullscreen-btn {
    color: #1D4ED8 !important;
}

.app-ppt-fullscreen-btn:hover {
    opacity: .8;
}