@charset "UTF-8";
/* =========================================================
   Student pages — shared design (courses.php, view_course.php, student_dashboard.php)
   Loaded by student_theme.php, which also sets --tp-brand / --tp-brand-rgb / --tp-brand-deep / --tp-brand-lift
   from the platform's DEFAULT_COLOR. Everything is scoped to body.tp-ui.
   Colours go through the variables below, so the dark theme only swaps the variables.
   ========================================================= */
body.tp-ui {
    --tp-bg: #f3f5f9;
    --tp-surface: #ffffff;
    --tp-surface-2: #f6f7fb;
    --tp-text: #141a2b;
    --tp-muted: #667085;
    --tp-border: #e4e7ee;
    --tp-amber: #f59e0b;
    --tp-amber-deep: #d97706;
    --tp-green: #16a34a;
    --tp-red: #dc2626;
    --tp-blue: #2563eb;
    --tp-violet: #7c3aed;
    --tp-radius: 22px;
    --tp-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px rgba(16, 24, 40, 0.07);
    --tp-shadow-lift: 0 2px 4px rgba(16, 24, 40, 0.05), 0 24px 48px rgba(var(--tp-brand-rgb), 0.18);
    --tp-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --tp-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    font-family: 'Cairo', 'Almarai', sans-serif;
    color: var(--tp-text);
    background:
        radial-gradient(900px 480px at 100% -8%, rgba(var(--tp-brand-rgb), 0.12), transparent 62%),
        radial-gradient(760px 420px at -6% 34%, rgba(var(--tp-brand-rgb), 0.07), transparent 60%),
        var(--tp-bg) !important;
    background-attachment: fixed !important;
}

html[data-theme="dark"] body.tp-ui {
    --tp-bg: #0c1018;
    --tp-surface: #151b27;
    --tp-surface-2: #1b2231;
    --tp-text: #e9edf5;
    --tp-muted: #98a2b6;
    --tp-border: #273043;
    --tp-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px rgba(0, 0, 0, 0.36);
    --tp-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.3), 0 26px 52px rgba(0, 0, 0, 0.5);
}

/* a tint of any colour that works on both themes */
body.tp-ui { --tp-brand-soft: color-mix(in srgb, var(--tp-brand) 11%, var(--tp-surface)); --tp-brand-ink: color-mix(in srgb, var(--tp-brand) 78%, var(--tp-text)); }

body.tp-ui h1, body.tp-ui h2, body.tp-ui h3, body.tp-ui h4, body.tp-ui h5, body.tp-ui h6,
body.tp-ui p, body.tp-ui a, body.tp-ui button, body.tp-ui span:not(.material-symbols-outlined):not([class*="fa-"]) {
    font-family: 'Cairo', 'Almarai', sans-serif;
}

/* ---------- Student navbar: tinted with the platform colour ---------- */
body.tp-ui .student-nav-back {
    color: var(--tp-brand-ink);
    background: var(--tp-brand-soft);
    border-radius: 12px;
}

body.tp-ui .student-nav-back:hover {
    background: color-mix(in srgb, var(--tp-brand) 20%, var(--tp-surface));
}

body.tp-ui .student-nav-balance {
    color: var(--tp-brand-ink);
    background: var(--tp-brand-soft);
    border-radius: 999px;
    padding: 6px 14px;
}

body.tp-ui .student-nav-icon-btn {
    border-radius: 12px;
}

body.tp-ui .student-nav-btn-primary {
    background: var(--tp-brand);
    box-shadow: 0 6px 16px rgba(var(--tp-brand-rgb), 0.3);
}

body.tp-ui .student-nav-btn-outline {
    color: var(--tp-brand-ink);
    border-color: color-mix(in srgb, var(--tp-brand) 40%, transparent);
}

/* ---------- Shared hero panel ---------- */
body.tp-ui .courses-hero,
body.tp-ui .welcome-section,
body.tp-ui .course-header {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #ffffff;
    background:
        radial-gradient(520px 320px at 12% 110%, rgba(255, 255, 255, 0.16), transparent 62%),
        linear-gradient(120deg, var(--tp-brand-deep) 0%, var(--tp-brand) 58%, var(--tp-brand-lift) 130%);
    box-shadow: 0 26px 60px rgba(var(--tp-brand-rgb), 0.3);
}

/* concentric rings on the far side */
body.tp-ui .courses-hero::before,
body.tp-ui .welcome-section::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    left: -150px;
    right: auto;
    bottom: auto;
    width: 520px;
    height: 520px;
    margin-top: -260px;
    border-radius: 50%;
    opacity: 1;
    filter: none;
    background: repeating-radial-gradient(circle, transparent 0 34px, rgba(255, 255, 255, 0.1) 34px 36px);
    -webkit-mask: radial-gradient(circle, #000 30%, transparent 72%);
    mask: radial-gradient(circle, #000 30%, transparent 72%);
    pointer-events: none;
}

body.tp-ui .courses-hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    opacity: 0.5;
    filter: none;
    background: radial-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1.4px) 0 0 / 22px 22px;
    -webkit-mask: linear-gradient(100deg, transparent 30%, #000 100%);
    mask: linear-gradient(100deg, transparent 30%, #000 100%);
    pointer-events: none;
}

/* =========================================================
   courses.php
   ========================================================= */
body.tp-ui .courses-hero {
    margin: 1.6rem 0 2.2rem;
    padding: 2.6rem 2.6rem;
    border-radius: 28px;
    text-align: start;
}

body.tp-ui .courses-hero .container-fluid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 2rem;
    padding: 0;
}

body.tp-ui .courses-hero .container-fluid > * {
    grid-column: 1;
    justify-self: start;
}

body.tp-ui .courses-eyebrow {
    margin-bottom: 0.9rem;
    padding: 0.35rem 1rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
}

body.tp-ui .courses-eyebrow .material-symbols-outlined {
    color: #ffffff;
    text-shadow: none;
}

body.tp-ui .courses-hero-title {
    margin: 0 0 0.3rem;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 900;
    line-height: 1.25;
    color: #ffffff;
    text-shadow: none;
}

body.tp-ui .courses-hero-sub {
    margin: 0;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.86);
    text-shadow: none;
}

/* the count becomes a glass tile on the far side */
body.tp-ui .courses-hero-count {
    grid-column: 2 !important;
    grid-row: 1 / span 3;
    justify-self: end !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    min-width: 170px;
    padding: 1.3rem 1.6rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 22px;
    box-shadow: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

body.tp-ui .courses-hero-count .material-symbols-outlined {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    font-size: 1.7rem;
    color: var(--tp-brand-deep);
    background: #ffffff;
    border-radius: 16px;
}

/* guest grade filter */
body.tp-ui .guest-grade-toggles {
    justify-content: flex-start;
    gap: 0.5rem;
    margin: 0 0 1.6rem;
    padding: 0.45rem;
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 999px;
    box-shadow: var(--tp-shadow);
    width: fit-content;
    max-width: 100%;
}

body.tp-ui .guest-grade-chip {
    padding: 0.5rem 1.15rem;
    color: var(--tp-muted);
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.tp-ui .guest-grade-chip:hover {
    color: var(--tp-brand-ink);
    transform: none;
}

body.tp-ui .guest-grade-chip.active {
    color: #ffffff;
    background: var(--tp-brand);
    box-shadow: 0 8px 18px rgba(var(--tp-brand-rgb), 0.32);
}

body.tp-ui .guest-grade-chip-count {
    color: var(--tp-brand-ink);
    background: var(--tp-brand-soft);
}

body.tp-ui .guest-grade-heading {
    padding: 0 0 0.9rem;
    margin-bottom: 1.4rem;
    background: none;
    border: 0;
    border-bottom: 2px solid var(--tp-border);
    border-radius: 0;
}

body.tp-ui .guest-grade-heading-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
    color: #ffffff;
    background: var(--tp-brand);
    border-radius: 14px;
}

body.tp-ui .guest-grade-heading h2 {
    color: var(--tp-text);
}

body.tp-ui .guest-grade-heading-count {
    color: var(--tp-brand-ink);
    background: var(--tp-brand-soft);
    box-shadow: none;
}

/* ----- course card: one surface, picture on top, actions along the bottom ----- */
body.tp-ui .modern-course-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 0;
    overflow: hidden;
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow);
    transition: transform 0.45s var(--tp-ease), box-shadow 0.45s var(--tp-ease), border-color 0.45s ease;
}

body.tp-ui .modern-course-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--tp-brand) 45%, var(--tp-border));
    box-shadow: var(--tp-shadow-lift);
}

body.tp-ui .modern-course-card .course-image-container {
    flex: none;
    height: 190px;
    border-radius: 0;
    background: linear-gradient(135deg, var(--tp-brand-lift), var(--tp-brand));
}

body.tp-ui .modern-course-card .course-image {
    transition: transform 0.9s var(--tp-ease);
}

body.tp-ui .modern-course-card:hover .course-image {
    transform: scale(1.06);
    filter: none;
}

body.tp-ui .modern-course-card .course-image-overlay {
    opacity: 1;
    background: linear-gradient(180deg, rgba(10, 14, 24, 0) 45%, rgba(10, 14, 24, 0.42) 100%);
}

/* pictures that are missing use the platform colour instead of six unrelated gradients */
body.tp-ui .modern-course-card [class^="course-default-bg-"] {
    background:
        radial-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1.4px) 0 0 / 18px 18px,
        linear-gradient(135deg, var(--tp-brand-lift), var(--tp-brand) 55%, var(--tp-brand-deep));
}

body.tp-ui .modern-course-card .course-default-content {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    text-shadow: none;
}

body.tp-ui .modern-course-card .course-details-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 1.25rem 1.3rem 1.3rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.tp-ui .modern-course-card:hover .course-details-container {
    box-shadow: none;
}

/* badges sit on the picture */
body.tp-ui .modern-course-card .course-status-badge,
body.tp-ui .modern-course-card .course-pinned-badge {
    position: absolute;
    top: calc(-190px + 14px);
    z-index: 3;
}

body.tp-ui .modern-course-card .course-status-badge { right: 14px; left: auto; }
body.tp-ui .modern-course-card .course-pinned-badge { left: 14px; right: auto; }

body.tp-ui .modern-course-card .course-status-badge .badge,
body.tp-ui .modern-course-card .course-pinned-badge .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 800;
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(10, 14, 24, 0.28);
}

body.tp-ui .modern-course-card .course-first-row {
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 1rem;
}

body.tp-ui .modern-course-card .course-description-column {
    flex: 1 1 auto;
    padding: 0;
}

body.tp-ui .modern-course-card .course-title {
    margin: 0 0 0.5rem;
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1.5;
    color: var(--tp-text);
}

body.tp-ui .modern-course-card .divider-2 {
    display: none;
}

body.tp-ui .modern-course-card .course-description {
    margin-bottom: 0.9rem;
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--tp-muted);
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* four counters with a caption each */
body.tp-ui .modern-course-card .course-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin: 0;
}

body.tp-ui .modern-course-card .course-stats .stat-item,
body.tp-ui .modern-course-card .course-stats .stat-item:nth-child(n) {
    --c: var(--tp-brand);
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.55rem 0.3rem 0.45rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--tp-text);
    background: color-mix(in srgb, var(--c) 9%, var(--tp-surface));
    border: 0;
    border-radius: 14px;
}

body.tp-ui .modern-course-card .course-stats .stat-item:nth-child(2) { --c: var(--tp-blue); }
body.tp-ui .modern-course-card .course-stats .stat-item:nth-child(3) { --c: var(--tp-amber); }
body.tp-ui .modern-course-card .course-stats .stat-item:nth-child(4) { --c: var(--tp-violet); }

body.tp-ui .modern-course-card .course-stats .stat-item .material-symbols-outlined,
body.tp-ui .modern-course-card .course-stats .stat-item:nth-child(n) .material-symbols-outlined {
    margin: 0;
    font-size: 1.15rem;
    color: color-mix(in srgb, var(--c) 82%, var(--tp-text));
}

body.tp-ui .modern-course-card .course-stats .stat-item::after {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--tp-muted);
}

body.tp-ui .modern-course-card .course-stats .stat-item:nth-child(1)::after { content: 'محاضرة'; }
body.tp-ui .modern-course-card .course-stats .stat-item:nth-child(2)::after { content: 'فيديو'; }
body.tp-ui .modern-course-card .course-stats .stat-item:nth-child(3)::after { content: 'امتحان'; }
body.tp-ui .modern-course-card .course-stats .stat-item:nth-child(4)::after { content: 'ملف'; }

body.tp-ui .modern-course-card .course-actions-column {
    flex: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
}

body.tp-ui .course-actions-column .course-action-btn,
body.tp-ui .course-actions-column .course-action-btn:nth-child(n) {
    flex: 1 1 calc(50% - 0.25rem);
    width: auto;
    min-height: 44px;
    margin: 0 !important;
    padding: 0.55rem 0.9rem;
    font-size: 0.88rem;
    font-weight: 800;
    color: #ffffff;
    background: var(--tp-brand);
    border: 0;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(var(--tp-brand-rgb), 0.28);
    transition: transform 0.35s var(--tp-spring), box-shadow 0.35s ease, filter 0.3s ease;
}

body.tp-ui .course-actions-column .course-action-btn:hover,
body.tp-ui .course-actions-column .course-action-btn:focus {
    color: #ffffff;
    background: var(--tp-brand);
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 14px 26px rgba(var(--tp-brand-rgb), 0.36);
}

body.tp-ui .course-actions-column .course-action-btn.purchase-btn,
body.tp-ui .course-actions-column .course-action-btn.purchase-btn:hover,
body.tp-ui .course-actions-column .course-action-btn.purchase-btn:focus {
    background: linear-gradient(135deg, #fbbf24, var(--tp-amber));
    color: #3b2500;
    box-shadow: 0 8px 18px rgba(245, 158, 11, 0.36);
}

body.tp-ui .course-actions-column .course-action-btn.btn-warning,
body.tp-ui .course-actions-column .course-action-btn.btn-warning:hover {
    color: color-mix(in srgb, var(--tp-amber-deep) 80%, var(--tp-text));
    background: color-mix(in srgb, var(--tp-amber) 16%, var(--tp-surface));
    box-shadow: none;
}

body.tp-ui .course-actions-column .course-action-btn.btn-danger,
body.tp-ui .course-actions-column .course-action-btn.btn-danger:hover {
    color: color-mix(in srgb, var(--tp-red) 80%, var(--tp-text));
    background: color-mix(in srgb, var(--tp-red) 12%, var(--tp-surface));
    box-shadow: none;
}

body.tp-ui .course-actions-column small.text-muted {
    flex: 1 1 100%;
    margin: 0 !important;
    color: var(--tp-muted) !important;
}

/* price and dates along the bottom */
body.tp-ui .modern-course-card .course-details-container > .w-100.fw-bold {
    align-items: center;
    gap: 1rem !important;
    padding-top: 1rem;
    border-top: 1px dashed var(--tp-border);
}

body.tp-ui .modern-course-card .regular-price-badge,
body.tp-ui .modern-course-card .discount-price-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.4rem 0.95rem;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--tp-brand-ink);
    background: var(--tp-brand-soft);
    border: 0;
    border-radius: 14px;
    box-shadow: none;
}

body.tp-ui .modern-course-card .regular-price-badge span:first-child,
body.tp-ui .modern-course-card .discount-price-badge span:nth-child(2) {
    font-size: 1.35rem;
    line-height: 1.2;
}

body.tp-ui .modern-course-card .discount-price-badge {
    color: color-mix(in srgb, var(--tp-red) 78%, var(--tp-text));
    background: color-mix(in srgb, var(--tp-red) 10%, var(--tp-surface));
}

body.tp-ui .modern-course-card .discount-price-badge .material-symbols-outlined {
    align-self: center;
    font-size: 1.05rem;
}

body.tp-ui .modern-course-card .original-price-crossed {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: var(--tp-muted);
    text-decoration: line-through;
}

body.tp-ui .modern-course-card .text-muted {
    color: var(--tp-muted) !important;
}

body.tp-ui .modern-course-card.course-locked .course-image,
body.tp-ui .modern-course-card.course-expired .course-image {
    filter: grayscale(0.85);
}

body.tp-ui .course-grid-col {
    animation: tpRise 0.6s var(--tp-ease) both;
}

body.tp-ui .course-grid-col:nth-child(2) { animation-delay: 0.05s; }
body.tp-ui .course-grid-col:nth-child(3) { animation-delay: 0.1s; }
body.tp-ui .course-grid-col:nth-child(4) { animation-delay: 0.15s; }
body.tp-ui .course-grid-col:nth-child(5) { animation-delay: 0.2s; }
body.tp-ui .course-grid-col:nth-child(6) { animation-delay: 0.25s; }

@keyframes tpRise {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: none; }
}

body.tp-ui .main-content .alert.alert-info.text-center {
    color: var(--tp-muted);
    background: var(--tp-surface);
    border: 1px dashed var(--tp-border);
    border-radius: var(--tp-radius);
}

/* =========================================================
   student_dashboard.php
   ========================================================= */
body.tp-ui .welcome-section {
    margin: 1.6rem 0 1.4rem;
    padding: 2.2rem 2.4rem;
    border-radius: 28px;
}

body.tp-ui .welcome-section > .text-center {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 1.6rem;
    text-align: start !important;
}

body.tp-ui .user-avatar-large {
    grid-row: 1 / span 3;
    width: 96px;
    height: 96px;
    margin: 0 !important;
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--tp-brand-deep);
    background: #ffffff;
    border: 0;
    border-radius: 28px;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.18);
}

body.tp-ui .welcome-title {
    margin: 0 0 0.15rem;
    font-size: clamp(1.5rem, 3.4vw, 2.2rem);
    font-weight: 900;
    line-height: 1.4;
    text-shadow: none;
}

body.tp-ui .welcome-subtitle {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.86);
    opacity: 1;
}

body.tp-ui .student-type-badge {
    justify-self: start;
    margin: 0;
    padding: 0.25rem 0.95rem;
    font-size: 0.85rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
}

/* the tip under the banner */
body.tp-ui .main-content-student .alert.alert-info {
    padding: 1rem 1.2rem;
    color: var(--tp-text);
    background: var(--tp-surface);
    border: 1px solid var(--tp-border) !important;
    border-inline-start: 5px solid var(--tp-amber) !important;
    border-radius: 18px !important;
    box-shadow: var(--tp-shadow) !important;
}

body.tp-ui .main-content-student .alert.alert-info .fa-lightbulb {
    color: var(--tp-amber);
}

body.tp-ui .main-content-student .alert.alert-info .btn-primary {
    background: var(--tp-brand);
    border-color: var(--tp-brand);
    font-weight: 700;
}

body.tp-ui .dashboard-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-bottom: 3rem;
}

body.tp-ui .dashboard-card-modern {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    column-gap: 1.1rem;
    padding: 1.5rem 1.5rem 1.3rem;
    color: var(--tp-text);
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow);
    transition: transform 0.45s var(--tp-ease), box-shadow 0.45s var(--tp-ease), border-color 0.45s ease;
}

body.tp-ui .dashboard-card-modern:hover {
    color: var(--tp-text);
    border-color: color-mix(in srgb, var(--tp-brand) 45%, var(--tp-border));
    box-shadow: var(--tp-shadow-lift);
}

/* a soft glow in the corner replaces the old top line */
body.tp-ui .dashboard-card-modern::before {
    top: auto;
    right: auto;
    left: -60px;
    bottom: -60px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--tp-brand-rgb), 0.16), transparent 68%);
    transform: scale(0.6);
    transform-origin: center;
    opacity: 0;
    transition: transform 0.6s var(--tp-ease), opacity 0.6s ease;
}

body.tp-ui .dashboard-card-modern:hover::before {
    transform: scale(1);
    opacity: 1;
}

body.tp-ui .card-icon-wrapper {
    grid-row: 1 / span 2;
    width: 62px;
    height: 62px;
    margin: 0;
    font-size: 1.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 22px rgba(16, 24, 40, 0.16);
    transition: transform 0.5s var(--tp-spring);
}

body.tp-ui .dashboard-card-modern:hover .card-icon-wrapper {
    transform: rotate(-8deg) scale(1.08);
}

/* the first two tiles carry the platform colour */
body.tp-ui .dashboard-card-modern:nth-child(-n+2) .card-icon-wrapper {
    background: linear-gradient(135deg, var(--tp-brand-lift), var(--tp-brand)) !important;
}

body.tp-ui .card-title-modern {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--tp-text);
}

body.tp-ui .card-description {
    margin: 0 0 1rem;
    font-size: 0.88rem;
    line-height: 1.8;
    color: var(--tp-muted);
}

body.tp-ui .card-cta {
    grid-column: 1 / -1;
    justify-content: space-between;
    padding-top: 0.9rem;
    font-weight: 800;
    color: var(--tp-brand-ink);
    border-top: 1px dashed var(--tp-border);
}

body.tp-ui .card-cta i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #ffffff;
    background: var(--tp-brand);
    border-radius: 50%;
    transition: transform 0.4s var(--tp-spring);
}

body.tp-ui .dashboard-card-modern:hover .card-cta i {
    transform: translateX(-6px);
}

/* =========================================================
   view_course.php
   ========================================================= */
body.tp-ui .course-header {
    margin-bottom: 2rem;
    padding: 3rem 0 3.2rem;
    border-radius: 0 0 34px 34px;
}

body.tp-ui .course-header::after {
    display: none;
}

body.tp-ui .course-header h1 {
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    font-weight: 900;
    line-height: 1.4;
    text-shadow: none;
}

body.tp-ui .course-header .d-flex.gap-3 > span {
    padding: 0.35rem 0.95rem;
    font-size: 0.86rem;
    font-weight: 700;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
}

body.tp-ui .course-header .d-flex.gap-3 > span .material-symbols-outlined {
    color: #ffffff;
    opacity: 0.85;
}

body.tp-ui .course-header .course-image-container {
    height: 230px !important;
    border: 6px solid rgba(255, 255, 255, 0.9);
    border-radius: 26px !important;
    box-shadow: 0 30px 60px rgba(10, 14, 24, 0.34) !important;
    background: var(--tp-brand-deep) !important;
    animation: none;
    rotate: -2deg;
    transition: rotate 0.6s var(--tp-ease), transform 0.6s var(--tp-ease) !important;
}

body.tp-ui .course-header .course-image-container:hover {
    rotate: 0deg;
    transform: translateY(-6px) !important;
}

body.tp-ui .course-header .course-image {
    border-radius: 18px !important;
}

body.tp-ui .description-card,
body.tp-ui .stats-card,
body.tp-ui .content-section-head {
    color: var(--tp-text);
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow);
}

body.tp-ui .stats-card::before {
    display: none;
}

body.tp-ui .course-description-full {
    color: var(--tp-muted);
}

body.tp-ui .content-section-head {
    padding: 1.2rem 1.4rem;
}

body.tp-ui .content-section-head-icon {
    width: 52px;
    height: 52px;
    color: #ffffff;
    background: var(--tp-brand);
    border-radius: 18px;
    box-shadow: 0 10px 22px rgba(var(--tp-brand-rgb), 0.3);
}

body.tp-ui .content-section-title {
    color: var(--tp-text);
}

body.tp-ui .content-section-sub {
    color: var(--tp-muted);
}

body.tp-ui .count-badge,
body.tp-ui .count-badge-primary {
    color: var(--tp-brand-ink);
    background: var(--tp-brand-soft);
    border-color: transparent;
}

body.tp-ui .count-badge-warning {
    color: color-mix(in srgb, var(--tp-amber-deep) 80%, var(--tp-text));
    background: color-mix(in srgb, var(--tp-amber) 15%, var(--tp-surface));
}

/* purchase call-out */
body.tp-ui .purchase-section {
    position: relative;
    overflow: hidden;
    padding: 2rem 1.6rem;
    color: #ffffff;
    background:
        radial-gradient(420px 240px at 100% 0%, rgba(245, 158, 11, 0.34), transparent 62%),
        radial-gradient(420px 240px at 0% 100%, rgba(var(--tp-brand-rgb), 0.5), transparent 62%),
        #131826;
    border-radius: 26px;
    box-shadow: 0 26px 54px rgba(16, 24, 40, 0.24);
}

body.tp-ui .purchase-section.purchased {
    background:
        radial-gradient(420px 240px at 100% 0%, rgba(255, 255, 255, 0.2), transparent 62%),
        linear-gradient(135deg, #15803d, var(--tp-green));
}

body.tp-ui .purchase-section.expired {
    background: linear-gradient(135deg, #3f4656, #1f2430);
}

body.tp-ui .purchase-section .btn-modern,
body.tp-ui .purchase-section .purchase-btn {
    padding: 0.85rem 2.2rem;
    font-weight: 800;
    color: #3b2500;
    background: linear-gradient(135deg, #fbbf24, var(--tp-amber));
    border: 0;
    border-radius: 16px;
    box-shadow: 0 14px 28px rgba(245, 158, 11, 0.4);
    transition: transform 0.35s var(--tp-spring), box-shadow 0.35s ease;
}

body.tp-ui .purchase-section .btn-modern:hover,
body.tp-ui .purchase-section .purchase-btn:hover {
    color: #3b2500;
    transform: translateY(-3px);
    box-shadow: 0 20px 36px rgba(245, 158, 11, 0.5);
}

/* folders */
body.tp-ui .folder-item,
body.tp-ui .folder-item:nth-child(n) {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow);
}

body.tp-ui .folder-item:hover {
    transform: none;
    box-shadow: var(--tp-shadow);
}

body.tp-ui .folder-item .folder-header,
body.tp-ui .folder-item:nth-child(n) > .folder-header {
    padding: 1rem 1.2rem;
    background: var(--tp-surface);
    border-inline-start: 6px solid var(--tp-brand);
}

body.tp-ui .folder-item:nth-child(4n+2) > .folder-header { border-inline-start-color: var(--tp-blue); }
body.tp-ui .folder-item:nth-child(4n+3) > .folder-header { border-inline-start-color: var(--tp-amber); }
body.tp-ui .folder-item:nth-child(4n+4) > .folder-header { border-inline-start-color: var(--tp-violet); }

body.tp-ui .folder-header::before {
    display: none;
}

body.tp-ui .folder-header:hover {
    transform: none;
    background: var(--tp-surface-2);
}

body.tp-ui .folder-header h4 {
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--tp-text);
}

body.tp-ui .folder-icon {
    font-size: 1.9rem;
    color: var(--tp-brand-ink);
}

body.tp-ui .folder-stats {
    color: var(--tp-muted);
}

body.tp-ui .folder-lecture-count {
    color: var(--tp-brand-ink);
    background: var(--tp-brand-soft);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.tp-ui .folder-expand-icon {
    color: var(--tp-muted);
}

body.tp-ui .folder-content {
    padding: 1.2rem;
    background: var(--tp-surface-2);
    border-top: 1px solid var(--tp-border);
}

body.tp-ui .child-folders {
    border-right-color: var(--tp-brand);
}

body.tp-ui .no-folder-section {
    padding: 0;
    background: none;
    border: 0;
}

body.tp-ui .no-folder-title {
    font-weight: 800;
    color: var(--tp-text);
}

/* lectures */
body.tp-ui .lecture-item {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 20px;
    box-shadow: var(--tp-shadow);
    transition: box-shadow 0.4s var(--tp-ease), border-color 0.4s ease;
}

body.tp-ui .lecture-item::before,
body.tp-ui .lecture-item::after {
    display: none;
}

body.tp-ui .lecture-item:hover {
    transform: none;
    border-color: color-mix(in srgb, var(--tp-brand) 45%, var(--tp-border));
    box-shadow: var(--tp-shadow-lift);
}

body.tp-ui .lecture-header,
body.tp-ui .lecture-item:hover .lecture-header,
body.tp-ui .folder-item:nth-child(n) .lecture-item:hover .lecture-header {
    padding: 1.05rem 1.2rem;
    background: transparent;
}

body.tp-ui .lecture-header::after {
    display: none;
}

body.tp-ui .lecture-number {
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
    font-weight: 900;
    color: #ffffff;
    background: var(--tp-brand);
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(var(--tp-brand-rgb), 0.3);
}

body.tp-ui .lecture-title {
    font-weight: 800;
    color: var(--tp-text);
}

body.tp-ui .lecture-meta {
    color: var(--tp-muted);
}

body.tp-ui .expand-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--tp-muted);
    background: var(--tp-surface-2);
    border-radius: 50%;
}

body.tp-ui .meta-pill {
    --c: var(--tp-muted);
    color: color-mix(in srgb, var(--c) 82%, var(--tp-text));
    background: color-mix(in srgb, var(--c) 12%, var(--tp-surface));
    border-color: transparent;
    font-weight: 700;
}

body.tp-ui .meta-pill-free,
body.tp-ui .meta-pill-purchased { --c: var(--tp-green); }
body.tp-ui .meta-pill-single { --c: var(--tp-violet); }
body.tp-ui .meta-pill-expired { --c: var(--tp-red); }
body.tp-ui .meta-pill-access { --c: var(--tp-blue); }

body.tp-ui .lecture-content {
    padding: 1.2rem;
    background: var(--tp-surface-2);
    border-top: 1px solid var(--tp-border);
}

body.tp-ui .lecture-content::before {
    display: none;
}

body.tp-ui .lecture-desc {
    color: var(--tp-muted);
    background: var(--tp-surface);
    border-color: var(--tp-border);
    border-radius: 14px;
}

/* lecture items: video / document / exam */
body.tp-ui .item-card {
    --c: var(--tp-brand);
    padding: 0.85rem 1rem;
    color: var(--tp-text);
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    box-shadow: none;
    transition: transform 0.35s var(--tp-ease), border-color 0.35s ease, box-shadow 0.35s ease;
}

body.tp-ui .item-card.video { --c: var(--tp-green); }
body.tp-ui .item-card.document { --c: var(--tp-amber); }
body.tp-ui .item-card.exam { --c: var(--tp-red); }

body.tp-ui .item-card::before {
    display: none;
}

body.tp-ui .item-card:hover {
    transform: translateX(-4px);
    border-color: color-mix(in srgb, var(--c) 55%, var(--tp-border));
    box-shadow: 0 12px 26px color-mix(in srgb, var(--c) 18%, transparent);
}

body.tp-ui .item-type-icon {
    color: color-mix(in srgb, var(--c) 85%, var(--tp-text));
    background: color-mix(in srgb, var(--c) 13%, var(--tp-surface));
    border-radius: 14px;
    box-shadow: none;
}

/* two items per row on wide screens */
body.tp-ui .item-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

body.tp-ui .item-grid > * {
    margin-bottom: 0;
}

body.tp-ui .item-arrow {
    background: var(--tp-surface-2);
}

body.tp-ui .item-title {
    font-weight: 800;
    color: var(--tp-text);
}

body.tp-ui .item-sub {
    color: var(--tp-muted);
}

body.tp-ui .duration-pill {
    color: var(--tp-muted);
    background: var(--tp-surface-2);
    border-color: transparent;
}

body.tp-ui .item-arrow {
    color: color-mix(in srgb, var(--c) 85%, var(--tp-text));
    transition: transform 0.35s var(--tp-spring);
}

body.tp-ui .item-card:hover .item-arrow {
    transform: translateX(-4px);
}

body.tp-ui .item-card.locked {
    --c: var(--tp-muted);
    background: var(--tp-surface-2);
    border-style: dashed;
    opacity: 0.85;
}

body.tp-ui .item-card.locked:hover {
    transform: none;
    box-shadow: none;
}

body.tp-ui .content-empty-state,
body.tp-ui .empty-state {
    color: var(--tp-muted);
    background: var(--tp-surface);
    border: 1px dashed var(--tp-border);
    border-radius: var(--tp-radius);
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    body.tp-ui .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
    body.tp-ui .item-grid { grid-template-columns: 1fr; }
    body.tp-ui .course-header .course-image-container { rotate: none; margin-top: 1.4rem; }
}

@media (max-width: 767.98px) {
    body.tp-ui .courses-hero { padding: 1.8rem 1.4rem; border-radius: 22px; }

    body.tp-ui .courses-hero .container-fluid { grid-template-columns: 1fr; row-gap: 0.2rem; }

    body.tp-ui .courses-hero-count {
        grid-column: 1 !important;
        grid-row: auto;
        justify-self: start !important;
        flex-direction: row;
        min-width: 0;
        margin-top: 1rem;
        padding: 0.5rem 1rem 0.5rem 0.5rem;
        font-size: 0.92rem;
        border-radius: 999px;
    }

    body.tp-ui .courses-hero-count .material-symbols-outlined {
        width: 34px;
        height: 34px;
        font-size: 1.2rem;
        border-radius: 50%;
    }

    body.tp-ui .guest-grade-toggles {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        border-radius: 18px;
        scrollbar-width: none;
    }

    body.tp-ui .guest-grade-chip { flex: none; }

    body.tp-ui .welcome-section { padding: 1.5rem 1.3rem; border-radius: 22px; }
    body.tp-ui .welcome-section > .text-center { column-gap: 1rem; }
    body.tp-ui .user-avatar-large { width: 68px; height: 68px; font-size: 1.7rem; border-radius: 20px; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.18); }

    body.tp-ui .dashboard-grid { grid-template-columns: 1fr; gap: 0.9rem; }

    body.tp-ui .course-header { padding: 2rem 0 2.2rem; border-radius: 0 0 24px 24px; }
    body.tp-ui .course-header .course-image-container { height: 190px !important; }
    body.tp-ui .lecture-header { padding: 0.9rem 1rem; }
    body.tp-ui .purchase-section { padding: 1.5rem 1.1rem; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    body.tp-ui .course-grid-col { animation: none; }

    body.tp-ui .modern-course-card,
    body.tp-ui .modern-course-card .course-image,
    body.tp-ui .course-action-btn,
    body.tp-ui .dashboard-card-modern,
    body.tp-ui .dashboard-card-modern::before,
    body.tp-ui .card-icon-wrapper,
    body.tp-ui .card-cta i,
    body.tp-ui .course-header .course-image-container,
    body.tp-ui .lecture-item,
    body.tp-ui .item-card,
    body.tp-ui .item-arrow {
        transition: none !important;
    }
}

/* long titles wrap inside their card instead of pushing it wider */
body.tp-ui .item-card,
body.tp-ui .item-info,
body.tp-ui .item-body {
    min-width: 0;
}

body.tp-ui .item-info {
    flex: 1 1 auto;
}

body.tp-ui .item-title {
    overflow-wrap: anywhere;
}

/* =========================================================
   Shared pieces used by exam_results.php, take_exam.php and watch_video.php
   ========================================================= */
body.tp-ui .main-content .card {
    color: var(--tp-text);
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow);
}

body.tp-ui .main-content .card-header,
body.tp-ui .main-content .card-header.bg-light {
    color: var(--tp-text);
    background: transparent !important;
    border-bottom: 1px solid var(--tp-border);
    border-radius: var(--tp-radius) var(--tp-radius) 0 0 !important;
}

body.tp-ui .main-content .card-body {
    border-radius: var(--tp-radius);
}

body.tp-ui .main-content .btn-primary {
    color: #ffffff;
    background: var(--tp-brand);
    border-color: var(--tp-brand);
    box-shadow: 0 8px 18px rgba(var(--tp-brand-rgb), 0.26);
}

body.tp-ui .main-content .btn-primary:hover,
body.tp-ui .main-content .btn-primary:focus,
body.tp-ui .main-content .btn-primary:active {
    color: #ffffff;
    background: var(--tp-brand-deep);
    border-color: var(--tp-brand-deep);
}

body.tp-ui .main-content .btn-outline-primary {
    color: var(--tp-brand-ink);
    border-color: color-mix(in srgb, var(--tp-brand) 55%, var(--tp-border));
}

body.tp-ui .main-content .btn-outline-primary:hover,
body.tp-ui .main-content .btn-outline-primary.active,
body.tp-ui .main-content .btn-check:checked + .btn-outline-primary {
    color: #ffffff;
    background: var(--tp-brand);
    border-color: var(--tp-brand);
}

/* =========================================================
   exam_results.php
   ========================================================= */
body.tp-ui .main-content .header {
    padding: 1.3rem 1.5rem;
    color: var(--tp-text);
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-inline-start: 6px solid var(--tp-brand);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow);
}

body.tp-ui .exam-title h2 {
    font-weight: 800;
    color: var(--tp-text);
}

body.tp-ui .student_name h2 {
    padding: 0.3rem 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tp-brand-ink);
    background: var(--tp-brand-soft);
    border-radius: 999px;
}

body.tp-ui .exam-actions .btn {
    border-radius: 14px;
    font-weight: 800;
}

body.tp-ui .main-content .alert-info {
    color: var(--tp-text);
    background: var(--tp-brand-soft);
    border: 1px solid color-mix(in srgb, var(--tp-brand) 22%, transparent);
    border-radius: 16px;
}

body.tp-ui .timeline-content {
    padding: 1rem 1.2rem;
    color: var(--tp-text);
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    box-shadow: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--tp-ease);
}

body.tp-ui .timeline-item:hover .timeline-content {
    border-color: color-mix(in srgb, var(--tp-brand) 45%, var(--tp-border));
    box-shadow: var(--tp-shadow);
    transform: translateX(-4px);
}

body.tp-ui .timeline-date {
    color: var(--tp-muted);
}

body.tp-ui .timeline-content a {
    font-weight: 800;
    color: var(--tp-brand-ink);
    text-decoration: none;
}

body.tp-ui .timeline-dot {
    box-shadow: 0 0 0 5px var(--tp-bg);
}

body.tp-ui .performance-item {
    --c: var(--tp-muted);
    padding: 1.1rem 1rem;
    color: var(--tp-text);
    background: color-mix(in srgb, var(--c) 10%, var(--tp-surface));
    border: 0;
    border-bottom: 0;
    border-radius: 20px;
    box-shadow: none;
}

body.tp-ui .performance-item.correct { --c: var(--tp-green); }
body.tp-ui .performance-item.incorrect { --c: var(--tp-red); }
body.tp-ui .performance-item.unanswered,
body.tp-ui .performance-item.partial { --c: var(--tp-amber); }

body.tp-ui .performance-item .count,
body.tp-ui .performance-item.correct .count,
body.tp-ui .performance-item.incorrect .count,
body.tp-ui .performance-item.unanswered .count,
body.tp-ui .performance-item.partial .count {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.2;
    color: color-mix(in srgb, var(--c) 85%, var(--tp-text));
}

body.tp-ui .performance-item .label {
    font-weight: 700;
    color: var(--tp-muted);
}

body.tp-ui .question-container,
body.tp-ui .question-card {
    padding: 1.6rem;
    color: var(--tp-text);
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow);
}

body.tp-ui .question-text {
    font-weight: 700;
    line-height: 1.9;
    color: var(--tp-text);
}

body.tp-ui .question-marks {
    padding: 0.15rem 0.7rem;
    font-size: 0.82rem;
    color: color-mix(in srgb, var(--tp-red) 80%, var(--tp-text));
    background: color-mix(in srgb, var(--tp-red) 10%, var(--tp-surface));
    border-radius: 999px;
}

body.tp-ui .choices-list .list-group-item {
    padding-block: 0.85rem;
    color: var(--tp-text);
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 14px;
}

body.tp-ui .choices-list .list-group-item-success,
body.tp-ui .choices-list .list-group-item-info {
    background: color-mix(in srgb, var(--tp-green) 12%, var(--tp-surface));
    border-color: color-mix(in srgb, var(--tp-green) 40%, var(--tp-border));
}

body.tp-ui .choices-list .list-group-item-danger {
    background: color-mix(in srgb, var(--tp-red) 10%, var(--tp-surface));
    border-color: color-mix(in srgb, var(--tp-red) 38%, var(--tp-border));
}

body.tp-ui .answer-navigation .btn {
    border-radius: 14px;
    font-weight: 800;
}

body.tp-ui .explanation-box {
    color: var(--tp-text);
    background: var(--tp-brand-soft);
    border-radius: 14px;
}

/* =========================================================
   take_exam.php  (appearance only: nothing here changes layout, sizes or positions)
   ========================================================= */
body.tp-ui .timer-badge {
    font-weight: 900;
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(16, 24, 40, 0.18);
}

body.tp-ui .main-content .progress {
    background: color-mix(in srgb, var(--tp-brand) 12%, var(--tp-surface));
    border-radius: 999px;
}

body.tp-ui .legend-item {
    font-weight: 700;
    color: var(--tp-muted);
}

body.tp-ui .legend-color.selected-color,
body.tp-ui .nav-square.selected {
    color: #ffffff !important;
    background-color: var(--tp-brand) !important;
    border-color: var(--tp-brand-deep) !important;
    box-shadow: 0 0 0 2px var(--tp-brand-deep);
}

body.tp-ui .choice-button {
    color: var(--tp-text);
    background: var(--tp-surface);
    border: 2px solid var(--tp-border);
    border-radius: 16px;
    font-weight: 700;
}

body.tp-ui .choice-button:hover {
    background-color: var(--tp-brand-soft);
    border-color: color-mix(in srgb, var(--tp-brand) 40%, var(--tp-border));
}

body.tp-ui .choice-button.active,
body.tp-ui .question-card[dir] .choice-button.active {
    color: var(--tp-brand-ink) !important;
    background-color: var(--tp-brand-soft) !important;
    border-color: var(--tp-brand) !important;
}

body.tp-ui .choice-button.active::after {
    color: var(--tp-brand) !important;
}

body.tp-ui .multi-choice-notice {
    color: var(--tp-text);
    background: var(--tp-brand-soft);
    border-color: var(--tp-brand) !important;
    border-radius: 12px;
}

body.tp-ui .save-button {
    border-radius: 14px;
    font-weight: 800;
}

/* =========================================================
   watch_video.php  (the player itself is not restyled)
   ========================================================= */
body.tp-ui .player-selection-bar .card {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
}

body.tp-ui .player-selection-bar .btn-group .btn.active {
    transform: none;
    box-shadow: 0 8px 18px rgba(var(--tp-brand-rgb), 0.3);
}

body.tp-ui .video-container {
    border-radius: 22px;
    animation: none;
    box-shadow: 0 30px 60px rgba(var(--tp-brand-rgb), 0.24), 0 0 0 1px var(--tp-border);
}

body.tp-ui .video-container:hover {
    box-shadow: 0 34px 70px rgba(var(--tp-brand-rgb), 0.32), 0 0 0 1px var(--tp-border);
}

body.tp-ui .video-container iframe {
    border-radius: 22px;
}

body.tp-ui .item-card.current-video {
    --c: var(--tp-brand);
    background: var(--tp-brand-soft);
    border: 2px solid var(--tp-brand);
}

body.tp-ui .status-pill.status-current {
    color: #ffffff;
    background: var(--tp-brand);
}

body.tp-ui .status-pill.status-locked {
    color: var(--tp-muted);
    background: var(--tp-surface-2);
}

@media (max-width: 767.98px) {
    body.tp-ui .question-container,
    body.tp-ui .question-card { padding: 1.1rem; border-radius: 18px; }

    body.tp-ui .video-container,
    body.tp-ui .video-container iframe { border-radius: 14px; }

    body.tp-ui .performance-item .count { font-size: 1.6rem; }
}

/* fullscreen video stays edge to edge */
:fullscreen body.tp-ui .video-container,
body.tp-ui .video-container:fullscreen,
body.tp-ui .plyr-fake-fullscreen {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* buttons that sit on the black player area need light text */
body.tp-ui .video-container .btn-outline-primary,
body.tp-ui .no-player-message .btn-outline-primary {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.55);
}

body.tp-ui .video-container .btn-outline-primary:hover,
body.tp-ui .no-player-message .btn-outline-primary:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    border-color: #ffffff;
}

/* on the dark theme, brand-coloured text is lightened so it stays readable on dark surfaces */
html[data-theme="dark"] body.tp-ui {
    --tp-brand-ink: color-mix(in srgb, var(--tp-brand-lift) 45%, #ffffff);
    --tp-brand-soft: color-mix(in srgb, var(--tp-brand) 30%, var(--tp-surface));
}

/* =========================================================
   student_report.php, semesters.php, view_exams.php, view_videos.php, view_documents.php
   These pages colour themselves through their own --primary-color / --secondary-color variables,
   so pointing those at the platform colour recolours most of them in one step.
   ========================================================= */
body.tp-ui {
    --primary-color: var(--tp-brand);
    --secondary-color: var(--tp-brand-deep);
    --secondary-color-hover: var(--tp-brand-deep);
    --secondary-color-active: var(--tp-brand-deep);
    --dark-color: var(--tp-text);
    --dark-text: var(--tp-text);
    --light-text: var(--tp-muted);
    --card-shadow: var(--tp-shadow);
    --hover-shadow: var(--tp-shadow-lift);
}

/* page headings */
body.tp-ui .page-title,
body.tp-ui .page-header h1 {
    font-weight: 900;
    color: var(--tp-text);
}

body.tp-ui .page-title::after,
body.tp-ui .page-header h1::after {
    height: 5px;
    background: var(--tp-brand);
    border-radius: 999px;
}

body.tp-ui .page-header p {
    color: var(--tp-muted);
}

/* the older top bar that semesters.php and view_documents.php still use */
body.tp-ui nav.navbar.fixed-top {
    background: color-mix(in srgb, var(--tp-surface) 92%, transparent) !important;
    border-bottom: 1px solid var(--tp-border);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

body.tp-ui nav.navbar.fixed-top .navbar-brand {
    gap: 0.6rem;
    font-weight: 800;
    color: var(--tp-text);
}

body.tp-ui nav.navbar.fixed-top .btn-info,
body.tp-ui nav.navbar.fixed-top .back-btn {
    color: #ffffff !important;
    background: var(--tp-brand);
    border-color: var(--tp-brand);
    border-radius: 12px;
    font-weight: 700;
}

body.tp-ui nav.navbar.fixed-top .logout-btn {
    font-weight: 700;
}

/* ---------- student_report.php ---------- */
body.tp-ui .student-header {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #ffffff;
    background:
        radial-gradient(520px 320px at 12% 110%, rgba(255, 255, 255, 0.16), transparent 62%),
        linear-gradient(120deg, var(--tp-brand-deep) 0%, var(--tp-brand) 58%, var(--tp-brand-lift) 130%);
    border-radius: 0 0 34px 34px;
    box-shadow: 0 26px 60px rgba(var(--tp-brand-rgb), 0.3);
}

body.tp-ui .student-avatar {
    color: var(--tp-brand-deep);
    background: #ffffff;
    border: 0;
    border-radius: 30px;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.18);
    font-weight: 900;
}

body.tp-ui .student-name {
    font-weight: 900;
}

body.tp-ui .performance-circle {
    border: 6px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 18px 36px rgba(10, 14, 24, 0.28);
}

body.tp-ui .filter-section,
body.tp-ui .dashboard-card {
    color: var(--tp-text);
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow);
}

body.tp-ui .dashboard-card:hover {
    transform: none;
    box-shadow: var(--tp-shadow);
}

body.tp-ui .filter-section label {
    color: var(--tp-brand-ink);
}

body.tp-ui .filter-section .form-select,
body.tp-ui .filter-section .form-control {
    color: var(--tp-text);
    background-color: var(--tp-surface-2);
    border-color: var(--tp-border);
    border-radius: 12px;
}

/* summary tiles: one tint each, the icon carries the colour */
body.tp-ui .main-content .stat-card,
body.tp-ui .stat-card[class*="stat-card-"] {
    --c: var(--tp-brand);
    color: var(--tp-text);
    background: color-mix(in srgb, var(--c) 8%, var(--tp-surface));
    border: 1px solid color-mix(in srgb, var(--c) 20%, var(--tp-border));
    border-radius: var(--tp-radius);
    box-shadow: none;
}

body.tp-ui .stat-card.stat-card-2 { --c: var(--tp-blue); }
body.tp-ui .stat-card.stat-card-3 { --c: #db2777; }
body.tp-ui .stat-card.stat-card-4 { --c: var(--tp-violet); }
body.tp-ui .stat-card.stat-card-5 { --c: var(--tp-green); }
body.tp-ui .stat-card.stat-card-6 { --c: var(--tp-amber); }

body.tp-ui .stat-card[class*="stat-card-"] h2 {
    color: color-mix(in srgb, var(--c) 85%, var(--tp-text));
}

body.tp-ui .stat-card[class*="stat-card-"] i {
    color: #ffffff;
    background: var(--c);
    border-radius: 20px;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 34%, transparent);
}

body.tp-ui .stat-card[class*="stat-card-"] p {
    color: var(--tp-muted);
}

body.tp-ui .stat-card[class*="stat-card-"] p::before {
    background: color-mix(in srgb, var(--c) 30%, var(--tp-border));
}

body.tp-ui .nav-tabs-custom {
    gap: 0.4rem;
    padding: 0.4rem;
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 18px;
}

body.tp-ui .nav-tabs-custom .nav-link {
    margin: 0;
    color: var(--tp-muted);
    border: 0 !important;
    border-radius: 12px;
}

body.tp-ui .nav-tabs-custom .nav-link:hover {
    color: var(--tp-brand-ink);
    background: var(--tp-brand-soft);
}

body.tp-ui .nav-tabs-custom .nav-link.active {
    color: #ffffff;
    background: var(--tp-brand);
    transform: none;
    box-shadow: 0 8px 18px rgba(var(--tp-brand-rgb), 0.3);
}

body.tp-ui .tab-statistics {
    background: var(--tp-brand-soft);
    border: 0;
    border-radius: 18px;
}

body.tp-ui .tab-statistics h5 {
    color: var(--tp-brand-ink);
    border-bottom-color: color-mix(in srgb, var(--tp-brand) 22%, transparent);
}

body.tp-ui .tab-statistics .stat-item {
    color: var(--tp-text);
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 14px;
    box-shadow: none;
}

body.tp-ui .tab-statistics .stat-label {
    color: var(--tp-text);
}

body.tp-ui .tab-statistics .stat-value {
    color: var(--tp-brand-ink);
}

body.tp-ui .table-custom thead th {
    color: var(--tp-brand-ink);
    background: var(--tp-brand-soft);
    border-color: var(--tp-border);
}

body.tp-ui .table-custom tbody tr:hover {
    background-color: var(--tp-brand-soft);
    transform: none;
}

/* ---------- semesters.php ---------- */
body.tp-ui .semester-card {
    overflow: hidden;
    transition: transform 0.45s var(--tp-ease), box-shadow 0.45s var(--tp-ease), border-color 0.45s ease;
}

body.tp-ui .semester-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--tp-brand) 45%, var(--tp-border));
    box-shadow: var(--tp-shadow-lift);
}

body.tp-ui .default-semester-image {
    color: #ffffff;
    background:
        radial-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1.4px) 0 0 / 18px 18px,
        linear-gradient(135deg, var(--tp-brand-lift), var(--tp-brand) 55%, var(--tp-brand-deep));
}

body.tp-ui .semester-card .card-title {
    font-weight: 800;
    color: var(--tp-text);
}

body.tp-ui .badge-exam-count,
body.tp-ui .badge-video-count,
body.tp-ui .badge-document-count {
    --c: var(--tp-brand);
    margin: 0;
    padding: 0.4rem 0.9rem;
    font-size: 0.88rem;
    font-weight: 800;
    color: color-mix(in srgb, var(--c) 85%, var(--tp-text));
    background: color-mix(in srgb, var(--c) 12%, var(--tp-surface));
    border-radius: 999px;
}

body.tp-ui .badge-video-count { --c: var(--tp-blue); }
body.tp-ui .badge-document-count { --c: var(--tp-amber); }

body.tp-ui .semester-card .d-grid .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 46px;
    font-weight: 800;
    border: 0;
    border-radius: 14px;
    transition: transform 0.35s var(--tp-spring), filter 0.3s ease;
}

body.tp-ui .semester-card .d-grid .btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.07);
}

body.tp-ui .semester-card .btn-purple {
    color: #ffffff;
    background: var(--tp-brand);
}

body.tp-ui .semester-card .btn-danger {
    color: #ffffff;
    background: var(--tp-blue);
}

body.tp-ui .semester-card .btn-success {
    color: #3b2500;
    background: linear-gradient(135deg, #fbbf24, var(--tp-amber));
}

/* ---------- view_exams.php and view_videos.php ---------- */
body.tp-ui .exam-card,
body.tp-ui .video-card {
    color: var(--tp-text);
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow);
}

body.tp-ui .exam-card:hover,
body.tp-ui .video-card:hover {
    transform: translateY(-6px) !important;
    border-color: color-mix(in srgb, var(--tp-brand) 45%, var(--tp-border));
    box-shadow: var(--tp-shadow-lift);
}

body.tp-ui .exam-title,
body.tp-ui .video-title {
    font-weight: 800;
    color: var(--tp-text);
}

body.tp-ui .video-description {
    color: var(--tp-muted);
}

body.tp-ui .exam-detail,
body.tp-ui .video-detail {
    border-bottom: 1px dashed var(--tp-border);
}

body.tp-ui .exam-detail-label,
body.tp-ui .video-detail-label {
    color: var(--tp-text);
}

body.tp-ui .exam-detail-value,
body.tp-ui .video-detail-value,
body.tp-ui .attempts-info,
body.tp-ui .views-info {
    color: var(--tp-muted);
}

body.tp-ui .exam-status,
body.tp-ui .video-status {
    font-weight: 800;
}

body.tp-ui .btn-exam-action,
body.tp-ui .btn-video-action {
    min-height: 46px;
    font-weight: 800;
    border-radius: 14px;
}

body.tp-ui .btn-start-exam,
body.tp-ui .btn-video-action:not(.btn-disabled-video) {
    color: #ffffff;
    background-color: var(--tp-brand);
    box-shadow: 0 8px 18px rgba(var(--tp-brand-rgb), 0.28);
}

body.tp-ui .btn-view-results {
    color: #ffffff;
    background-color: var(--tp-green);
}

body.tp-ui .btn-retry-exam {
    color: #3b2500;
    background: linear-gradient(135deg, #fbbf24, var(--tp-amber));
}

body.tp-ui .btn-disabled-exam,
body.tp-ui .btn-disabled-video {
    color: var(--tp-muted);
    background: var(--tp-surface-2);
    opacity: 1;
}

body.tp-ui .requirements-badge {
    font-weight: 800;
    border-radius: 999px;
}

/* ---------- view_documents.php ---------- */
body.tp-ui .document-card {
    color: var(--tp-text);
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow);
}

body.tp-ui .document-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--tp-brand) 45%, var(--tp-border));
    box-shadow: var(--tp-shadow-lift);
}

body.tp-ui .document-header {
    background: var(--tp-brand-soft);
    border-bottom: 1px solid var(--tp-border);
}

body.tp-ui .document-title {
    font-weight: 800;
    color: var(--tp-text);
}

body.tp-ui .document-description,
body.tp-ui .document-size,
body.tp-ui .document-date {
    color: var(--tp-muted);
}

body.tp-ui .document-type {
    font-weight: 800;
    color: var(--tp-brand-ink);
    background: var(--tp-brand-soft);
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
}

body.tp-ui .btn-download {
    min-height: 46px;
    font-weight: 800;
    border-radius: 14px;
}

@media (max-width: 767.98px) {
    body.tp-ui .student-header { border-radius: 0 0 24px 24px; }
    body.tp-ui .nav-tabs-custom { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    body.tp-ui .nav-tabs-custom .nav-link { white-space: nowrap; }
}

body.tp-ui nav.navbar.fixed-top .navbar-brand > span {
    color: var(--tp-text);
}