/* ISANGHAN MINDS — shared visual theme.
   Load after existing stylesheets. Keep the existing Plus Jakarta Sans font link.
   Visibility, modal lifecycle, routing, and interaction remain application-owned. */
:root {
  --theme-primary: #c4007a;
  --theme-primary-hover: #a80069;
  --theme-primary-active: #8f0059;
  --theme-primary-soft: #fff0f8;
  --theme-secondary: #2f5bea;
  --theme-link-hover: #2448be;
  --theme-info-bg: #eef2ff;
  --theme-bg: #f8fafc;
  --theme-surface: #ffffff;
  --theme-border: #e5e7eb;
  --theme-text: #0f172a;
  --theme-muted: #475569;
  --theme-font: "Plus Jakarta Sans", sans-serif;
  --theme-text-xs: 0.75rem; /* 12px */
  --theme-text-sm: 0.875rem; /* 14px */
  --theme-text-base: 1rem; /* 16px */
  --theme-text-lg: 1.25rem; /* 20px */
  --theme-text-xl: 1.75rem; /* 28px */
  --theme-text-2xl: 2.25rem; /* 36px */
  --theme-space-0: 0;
  --theme-space-1: 8px;
  --theme-space-2: 16px;
  --theme-space-3: 24px;
  --theme-space-4: 32px;
  --theme-space-5: 40px;
  --theme-space-6: 48px;
  --theme-space-8: 64px;
  --theme-radius: 12px;
  --theme-shadow-sm: 0 2px 8px rgb(15 23 42 / 6%);
  --theme-shadow-lg: 0 12px 32px rgb(15 23 42 / 12%);
  --theme-transition: 150ms ease;
  --theme-focus-ring: 3px solid var(--theme-primary);
}

html {
  font-size: 16px;
}

body {
  background-color: var(--theme-bg);
  color: var(--theme-text);
  font-family: var(--theme-font);
  font-size: var(--theme-text-base);
  line-height: 1.5;
}

button, input, select, textarea {
  font-family: var(--theme-font);
  font-size: var(--theme-text-base);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--theme-text);
  font-family: var(--theme-font);
  font-weight: 700;
  line-height: 1.25;
}

h1 { font-size: var(--theme-text-2xl); }
h2 { font-size: var(--theme-text-xl); }
h3 { font-size: var(--theme-text-lg); }
h4, h5, h6 { font-size: var(--theme-text-base); }
small { font-size: var(--theme-text-xs); }

a {
  color: var(--theme-secondary);
  text-underline-offset: 0.2em;
  transition: color var(--theme-transition);
}

a:hover, a:active { color: var(--theme-link-hover); }

/* Applies to native controls and custom keyboard-focusable elements. */
:focus-visible {
  outline: var(--theme-focus-ring);
  outline-offset: 3px;
}

.page-container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--theme-space-3);
}

:is(.btn-primary, .btn-secondary, .btn-ghost) {
  box-sizing: border-box;
  min-height: 44px;
  padding: var(--theme-space-1) var(--theme-space-3);
  border: 1px solid transparent;
  border-radius: var(--theme-radius);
  background-image: none;
  font-family: var(--theme-font);
  font-size: var(--theme-text-sm);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: normal;
  cursor: pointer;
  transition: color var(--theme-transition),
    background-color var(--theme-transition),
    border-color var(--theme-transition), box-shadow var(--theme-transition);
}

.btn-primary {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
  color: var(--theme-surface);
  box-shadow: var(--theme-shadow-sm);
}

.btn-primary:hover {
  background-color: var(--theme-primary-hover);
  border-color: var(--theme-primary-hover);
  color: var(--theme-surface);
}

.btn-primary:active, .btn-primary.active {
  background-color: var(--theme-primary-active);
  border-color: var(--theme-primary-active);
  color: var(--theme-surface);
}

/* Secondary actions stay neutral; blue is reserved for links and info badges. */
.btn-secondary {
  background-color: var(--theme-surface);
  border-color: var(--theme-muted);
  color: var(--theme-text);
}

.btn-secondary:hover, .btn-secondary:active, .btn-secondary.active {
  background-color: var(--theme-bg);
  border-color: var(--theme-text);
  color: var(--theme-text);
}

.btn-ghost {
  background-color: transparent;
  color: var(--theme-primary);
  box-shadow: none;
}

.btn-ghost:hover, .btn-ghost:active, .btn-ghost.active {
  background-color: var(--theme-primary-soft);
  color: var(--theme-primary-active);
}

:is(.btn-primary, .btn-secondary, .btn-ghost):hover {
  text-decoration: none;
}

:is(.btn-primary, .btn-secondary, .btn-ghost):is(:disabled, [aria-disabled="true"], .disabled) {
  background-color: var(--theme-border);
  border-color: var(--theme-border);
  color: var(--theme-muted);
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}

.card {
  background-color: var(--theme-surface);
  color: var(--theme-text);
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius);
  box-shadow: var(--theme-shadow-sm);
}

.card-body { padding: var(--theme-space-3); }

.card-header, .card-footer {
  padding: var(--theme-space-2) var(--theme-space-3);
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
}

.card-header { border-radius: var(--theme-radius) var(--theme-radius) 0 0; }
.card-footer { border-radius: 0 0 var(--theme-radius) var(--theme-radius); }

.badge {
  padding: var(--theme-space-1) var(--theme-space-2);
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius);
  background-color: var(--theme-bg);
  color: var(--theme-muted);
  font-size: var(--theme-text-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: normal;
}

.badge-info, .badge--info {
  background-color: var(--theme-info-bg);
  border-color: var(--theme-secondary);
  color: var(--theme-secondary);
}

.breadcrumb {
  gap: var(--theme-space-1);
  margin-bottom: var(--theme-space-3);
  padding: var(--theme-space-1) 0;
  background-color: transparent;
  color: var(--theme-muted);
  font-size: var(--theme-text-sm);
  list-style: none;
}

.breadcrumb-item.active, .breadcrumb [aria-current="page"] {
  color: var(--theme-muted);
  font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before { color: var(--theme-muted); }

/* Do not override modal display, positioning, stacking, or open/closed states. */
.modal {
  color: var(--theme-text);
  font-family: var(--theme-font);
  font-size: var(--theme-text-base);
}

.modal-content {
  background-color: var(--theme-surface);
  color: var(--theme-text);
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius);
  box-shadow: var(--theme-shadow-lg);
}

.modal-header, .modal-body, .modal-footer { padding: var(--theme-space-3); }
.modal-header, .modal-footer { border-color: var(--theme-border); }
.modal-title { font-size: var(--theme-text-lg); }

.empty-state {
  padding: var(--theme-space-6) var(--theme-space-3);
  border: 1px dashed var(--theme-border);
  border-radius: var(--theme-radius);
  background-color: var(--theme-surface);
  color: var(--theme-muted);
  text-align: center;
}

.empty-state-title {
  margin-bottom: var(--theme-space-1);
  color: var(--theme-text);
  font-size: var(--theme-text-lg);
  font-weight: 700;
}

.empty-state-description {
  max-width: 48ch;
  margin: 0 auto var(--theme-space-3);
  color: var(--theme-muted);
}

@media (max-width: 600px) {
  .page-container { padding-inline: var(--theme-space-2); }
  h1 { font-size: var(--theme-text-xl); }
  .modal-header, .modal-body, .modal-footer { padding: var(--theme-space-2); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --theme-transition: 0ms; }
}


/* Student projects: migrated page rules, including existing visibility states. */

:where(body.student-projects-index-page) {
            --primary-color: var(--color-primary);
            --secondary-color: var(--color-interactive);
            --text-dark: var(--color-surface);
            --text-muted: var(--color-dark-muted);
            --bg-light: var(--color-dark-page);
            --surface: var(--color-dark-surface);
            --surface-soft: var(--color-dark-raised);
            --surface-strong: var(--color-dark-raised);
            --border-color: var(--color-dark-border);
            --shadow-soft: 0 18px 45px var(--color-overlay);
        }

body:where(.student-projects-index-page) {
            background-color: var(--bg-light);
            color: var(--text-dark);
            font-family: var(--font-body);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

:where(body.student-projects-index-page) .header {
            background: var(--color-overlay) !important;
            border-bottom: 1px solid var(--color-interactive-soft);
            box-shadow: 0 8px 30px var(--color-shadow);
            position: relative;
            z-index: 1040;
        }

:where(body.student-projects-index-page) .navigation.navbar-dark .navbar-nav .nav-link,
:where(body.student-projects-index-page) .navigation .navbar-nav .nav-link,
:where(body.student-projects-index-page) #auth-username {
            color: var(--color-surface) !important;
            font-family: var(--font-body);
            font-weight: 400;
            transition: all 0.3s ease;
        }

:where(body.student-projects-index-page) .navigation.navbar-dark .navbar-nav .nav-link:hover,
:where(body.student-projects-index-page) .navigation.navbar-dark .navbar-nav .active .nav-link,
:where(body.student-projects-index-page) .navigation .navbar-nav .nav-item.active .nav-link {
            color: var(--color-interactive) !important;
            background: var(--color-surface-muted);
            text-shadow: none;
            opacity: 1;
        }

:where(body.student-projects-index-page) .dropdown-menu {
            background: var(--surface-strong);
            border: 1px solid var(--color-interactive-soft);
            box-shadow: var(--shadow-soft);
        }

:where(body.student-projects-index-page) .dropdown-item {
            color: var(--text-muted);
        }

:where(body.student-projects-index-page) .dropdown-item:hover,
:where(body.student-projects-index-page) .dropdown-item:focus {
            color: var(--color-surface);
            background: var(--color-primary-soft);
        }

:where(body.student-projects-index-page) .dropdown-divider {
            border-top-color: var(--border-color);
        }

:where(body.student-projects-index-page) .navigation {
            justify-content: flex-end;
        }

:where(body.student-projects-index-page) .user-menu {
            gap: 0.65rem;
            width: auto !important;
        }

:where(body.student-projects-index-page) #auth-nav-item,
:where(body.student-projects-index-page) #auth-sm-nav-item {
            border-color: var(--color-primary-border) !important;
        }

:where(body.student-projects-index-page) .navbar-toggler {
            border: 1px solid var(--color-interactive-border);
            border-radius: 12px;
            padding: 0.45rem 0.6rem;
            background: var(--color-dark-glass);
        }

:where(body.student-projects-index-page) .navbar-toggler:focus {
            box-shadow: 0 0 0 0.14rem var(--color-primary-border);
            outline: none;
        }

:where(body.student-projects-index-page) .text-muted {
            color: var(--text-muted) !important;
        }

:where(body.student-projects-index-page) .main-content h1,
:where(body.student-projects-index-page) .main-content h2,
:where(body.student-projects-index-page) .main-content h3,
:where(body.student-projects-index-page) .main-content h4,
:where(body.student-projects-index-page) .main-content h5,
:where(body.student-projects-index-page) .main-content h6 {
            color: var(--text-dark);
            font-family: var(--font-body);
            font-weight: 800;
            letter-spacing: -0.02em;
        }

:where(body.student-projects-index-page) .main-content {
            margin-top: 100px;
            padding-bottom: 6rem;
        }

:where(body.student-projects-index-page) .project-card {
            background: linear-gradient(180deg, var(--color-overlay) 0%, var(--color-overlay) 100%);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 1.5rem;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 45px var(--color-shadow);
        }

:where(body.student-projects-index-page) .project-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 24px 55px var(--color-overlay);
            border-color: var(--color-interactive-border);
        }

:where(body.student-projects-index-page) .project-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

:where(body.student-projects-index-page) .project-status {
            font-size: 0.8rem;
            padding: 4px 10px;
            border-radius: 20px;
            font-weight: 600;
        }

:where(body.student-projects-index-page) .status-active {
            background-color: var(--color-primary-soft);
            color: var(--primary-color);
        }

:where(body.student-projects-index-page) .status-available {
            background-color: var(--color-interactive-soft);
            color: var(--color-interactive-soft);
        }

:where(body.student-projects-index-page) .project-title {
            color: var(--text-dark);
            font-family: var(--font-body);
            font-weight: 800;
            letter-spacing: -0.025em;
            margin-bottom: 0.5rem;
            font-size: 1.2rem;
        }

:where(body.student-projects-index-page) .project-desc {
            color: var(--text-muted);
            font-size: 0.9rem;
            flex-grow: 1;
            margin-bottom: 1.5rem;
        }

:where(body.student-projects-index-page) .project-footer {
            border-top: 1px solid var(--border-color);
            padding-top: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

:where(body.student-projects-index-page) .welcome-header {
            margin-bottom: 2rem;
        }

:where(body.student-projects-index-page) .section-title {
            font-family: var(--font-body);
            font-size: 1.4rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: var(--text-dark);
            margin-bottom: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--border-color);
        }

:where(body.student-projects-index-page) .loader_bg {
            transition: opacity 0.5s ease;
            pointer-events: none;
        }

:where(body.student-projects-index-page) .loader_bg.active {
            pointer-events: all;
        }

:where(body.student-projects-index-page) .checkout-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: var(--color-overlay);
            box-shadow: 0 -18px 42px var(--color-overlay);
            padding: 15px 0;
            z-index: 1050;
            transform: translateY(100%);
            transition: transform 0.3s ease-in-out;
            border-top: 2px solid var(--primary-color);
        }

:where(body.student-projects-index-page) .checkout-bar.visible {
            transform: translateY(0);
        }

:where(body.student-projects-index-page) .checkout-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

:where(body.student-projects-index-page) .checkout-details h4 {
            margin: 0;
            font-weight: 700;
            color: var(--text-dark);
        }

:where(body.student-projects-index-page) .checkout-details p {
            margin: 0;
            color: var(--text-muted);
            font-size: 0.9rem;
        }

:where(body.student-projects-index-page) .btn-proceed {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary) 100%);
            color: var(--color-surface);
            font-weight: 600;
            padding: 10px 30px;
            border-radius: 50px;
            border: none;
            transition: all 0.2s;
            box-shadow: 0 10px 24px var(--color-primary-soft);
        }

:where(body.student-projects-index-page) .btn-proceed:hover {
            background: var(--color-primary);
            color: var(--color-surface);
            transform: translateY(-2px);
            box-shadow: 0 14px 28px var(--color-primary-border);
        }

:where(body.student-projects-index-page) .btn-proceed:disabled {
            background-color: var(--surface-strong);
            color: var(--text-muted);
            cursor: not-allowed;
            transform: none;
        }

:where(body.student-projects-index-page) .btn {
            font-family: var(--font-body);
            font-weight: 600;
            letter-spacing: 0;
            transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
        }

:where(body.student-projects-index-page) .btn:hover,
:where(body.student-projects-index-page) .btn:focus {
            transform: translateY(-1px);
        }

:where(body.student-projects-index-page) .btn-outline-primary {
            color: var(--color-interactive-soft);
            border-color: var(--color-focus-ring);
        }

:where(body.student-projects-index-page) .btn-outline-primary:hover,
:where(body.student-projects-index-page) .btn-outline-primary:focus,
:where(body.student-projects-index-page) .btn-primary {
            color: var(--color-surface);
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
        }

:where(body.student-projects-index-page) .text-success {
            color: var(--primary-color) !important;
        }

:where(body.student-projects-index-page) .text-warning {
            color: var(--primary-color) !important;
        }

:where(body.student-projects-index-page) .btn-outline-success {
            color: var(--primary-color);
            border-color: var(--color-primary-border);
        }

:where(body.student-projects-index-page) .btn-outline-success:hover,
:where(body.student-projects-index-page) .btn-outline-success:focus {
            color: var(--color-surface);
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

:where(body.student-projects-index-page) #successOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--color-overlay);
            z-index: 9999;
            display: none;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(5px);
        }

:where(body.student-projects-index-page) .success-modal {
            background: var(--surface);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            max-width: 400px;
            width: 90%;
            box-shadow: var(--shadow-soft);
            border: 1px solid var(--border-color);
            animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            transform: scale(0.8);
            opacity: 0;
        }

:where(body.student-projects-index-page) .success-modal h2 {
            color: var(--text-dark) !important;
        }

:where(body.student-projects-index-page) .success-modal p {
            color: var(--text-muted) !important;
        }


        @keyframes popIn {
            to {
                transform: scale(1);
                opacity: 1;
            }
        }
:where(body.student-projects-index-page) .success-btn {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary) 100%);
            color: var(--color-surface);
            border: none;
            padding: 12px 35px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 1.1rem;
            cursor: pointer;
            transition: transform 0.2s;
        }

:where(body.student-projects-index-page) .success-btn:hover {
            transform: scale(1.05);
            color: var(--color-surface);
        }

:where(body.student-projects-index-page) .main-content [style*="background: var(--color-surface)"] {
            background: var(--surface-soft) !important;
            border-color: var(--border-color) !important;
        }

:where(body.student-projects-index-page) #loginPrompt {
            color: var(--text-dark);
        }


        @media (max-width: 575.98px) {
:where(body.student-projects-index-page) .logo a {
                font-size: 1rem !important;
            }

:where(body.student-projects-index-page) .welcome-header,
:where(body.student-projects-index-page) .checkout-content,
:where(body.student-projects-index-page) .project-footer {
                align-items: flex-start;
                flex-direction: column;
                gap: 0.75rem;
            }

:where(body.student-projects-index-page) .checkout-action,
:where(body.student-projects-index-page) .checkout-action .btn {
                width: 100%;
            }

        }
    

:where(body.student-projects-index-page) {
            --im-blue: var(--color-interactive);
            --im-pink: var(--color-primary);
        }

:where(body.student-projects-index-page) .header {
            position: relative !important;
            top: auto;
            left: 0;
            right: 0;
            height: auto !important;
            min-height: 76px;
            padding: 10px 28px !important;
            background: var(--color-overlay) !important;
            border-bottom: 1px solid var(--color-interactive-soft) !important;
            box-shadow: 0 8px 30px var(--color-shadow) !important;
            backdrop-filter: blur(18px);
        }

:where(body.student-projects-index-page) .header .container-fluid {
            max-width: 1780px;
            margin: 0 auto;
        }

:where(body.student-projects-index-page) .header .row.d_flex {
            min-height: 56px;
            align-items: center;
            flex-wrap: nowrap;
        }

:where(body.student-projects-index-page) .header .logo_section {
            flex: 0 0 auto;
            width: auto;
            max-width: none;
        }

:where(body.student-projects-index-page) .header .logo a {
            font-size: clamp(1.35rem, 2.2vw, 2.55rem) !important;
            line-height: 1 !important;
        }

:where(body.student-projects-index-page) .header .col-md-10 {
            flex: 1 1 auto;
            max-width: none;
            min-width: 0;
        }

:where(body.student-projects-index-page) .navigation.navbar {
            width: 100%;
            min-height: 0;
            justify-content: flex-end;
            align-items: center;
        }

:where(body.student-projects-index-page) .navigation .navbar-collapse {
            justify-content: flex-end;
        }

:where(body.student-projects-index-page) .navigation .navbar-nav {
            align-items: center;
            gap: 10px;
            margin-left: auto !important;
            margin-right: 0 !important;
        }

:where(body.student-projects-index-page) .navigation.navbar-dark .navbar-nav .nav-link,
:where(body.student-projects-index-page) .navigation .navbar-nav .nav-link,
:where(body.student-projects-index-page) #auth-username {
            color: var(--color-surface) !important;
            font-size: 0.86rem !important;
            font-weight: 800 !important;
            letter-spacing: 0 !important;
            text-transform: none !important;
            line-height: 1.2 !important;
            font-family: var(--font-body);
            transition: all 0.3s ease;
        }

:where(body.student-projects-index-page) .navigation.navbar-dark .navbar-nav .nav-link,
:where(body.student-projects-index-page) .navigation .navbar-nav .nav-link {
            padding: 13px 18px !important;
            border-radius: 999px !important;
            font-weight: 800 !important;
            white-space: nowrap;
        }

:where(body.student-projects-index-page) .navigation.navbar-dark .navbar-nav .nav-link:hover,
:where(body.student-projects-index-page) .navigation.navbar-dark .navbar-nav .active>.nav-link,
:where(body.student-projects-index-page) .navigation.navbar-dark .navbar-nav .active .nav-link,
:where(body.student-projects-index-page) .navigation .navbar-nav .nav-item.active .nav-link {
            background: var(--color-surface-muted) !important;
            color: var(--color-interactive) !important;
            text-shadow: none !important;
            opacity: 1 !important;
        }

:where(body.student-projects-index-page) #auth-nav-item,
:where(body.student-projects-index-page) #auth-sm-nav-item {
            border-color: var(--color-primary-border) !important;
        }

:where(body.student-projects-index-page) .dropdown-menu {
            background: var(--surface-strong) !important;
            border: 1px solid var(--color-interactive-soft) !important;
            box-shadow: var(--shadow-soft) !important;
            border-radius: 16px !important;
            padding: 8px !important;
        }

:where(body.student-projects-index-page) .dropdown-item {
            color: var(--text-muted) !important;
            border-radius: 12px !important;
            font-weight: 700 !important;
            padding: 10px 14px !important;
        }

:where(body.student-projects-index-page) .dropdown-item:hover,
:where(body.student-projects-index-page) .dropdown-item:focus {
            color: var(--color-surface) !important;
            background: var(--color-primary-soft) !important;
        }

:where(body.student-projects-index-page) .dropdown-divider {
            border-top-color: var(--border-color) !important;
        }

:where(body.student-projects-index-page) #auth-nav-item > .nav-link,
:where(body.student-projects-index-page) #auth-sm-nav-item > .nav-link {
            background: var(--color-primary-soft) !important;
            color: var(--color-surface) !important;
            font-weight: 800 !important;
            transition: all 0.3s ease !important;
        }

:where(body.student-projects-index-page) #auth-nav-item > .nav-link i,
:where(body.student-projects-index-page) #auth-sm-nav-item > .nav-link i {
            color: var(--color-surface) !important;
            transition: all 0.3s ease !important;
        }

:where(body.student-projects-index-page) #auth-nav-item:hover > .nav-link,
:where(body.student-projects-index-page) #auth-nav-item > .nav-link:hover,
:where(body.student-projects-index-page) #auth-sm-nav-item:hover > .nav-link,
:where(body.student-projects-index-page) #auth-sm-nav-item > .nav-link:hover,
:where(body.student-projects-index-page) #auth-nav-item.show > .nav-link,
:where(body.student-projects-index-page) #auth-nav-item > .nav-link[aria-expanded="true"],
:where(body.student-projects-index-page) #auth-sm-nav-item.show > .nav-link,
:where(body.student-projects-index-page) #auth-sm-nav-item > .nav-link[aria-expanded="true"] {
            background: var(--color-surface-muted) !important;
            color: var(--color-interactive) !important;
            opacity: 1 !important;
            text-shadow: none !important;
            -webkit-text-fill-color: currentColor !important;
            border-radius: inherit !important;
        }

:where(body.student-projects-index-page) #auth-nav-item > .nav-link:focus,
:where(body.student-projects-index-page) #auth-sm-nav-item > .nav-link:focus {
            background: var(--color-primary-soft) !important;
            color: var(--color-surface) !important;
            opacity: 1 !important;
            text-shadow: none !important;
            -webkit-text-fill-color: currentColor !important;
        }

:where(body.student-projects-index-page) #auth-nav-item:hover > .nav-link *,
:where(body.student-projects-index-page) #auth-nav-item > .nav-link:hover *,
:where(body.student-projects-index-page) #auth-sm-nav-item:hover > .nav-link *,
:where(body.student-projects-index-page) #auth-sm-nav-item > .nav-link:hover *,
:where(body.student-projects-index-page) #auth-nav-item.show > .nav-link *,
:where(body.student-projects-index-page) #auth-nav-item > .nav-link[aria-expanded="true"] *,
:where(body.student-projects-index-page) #auth-sm-nav-item.show > .nav-link *,
:where(body.student-projects-index-page) #auth-sm-nav-item > .nav-link[aria-expanded="true"] * {
            color: var(--color-interactive) !important;
            -webkit-text-fill-color: currentColor !important;
        }

:where(body.student-projects-index-page) #auth-nav-item > .nav-link:focus *,
:where(body.student-projects-index-page) #auth-sm-nav-item > .nav-link:focus * {
            color: var(--color-surface) !important;
            -webkit-text-fill-color: currentColor !important;
        }


        @media (max-width: 991.98px) {
:where(body.student-projects-index-page) .navigation .navbar-nav {
                gap: 4px;
            }

:where(body.student-projects-index-page) .navigation.navbar-dark .navbar-nav .nav-link,
:where(body.student-projects-index-page) .navigation .navbar-nav .nav-link {
                padding: 11px 12px !important;
                font-weight: 500 !important;
            }

        }

    

        @media (max-width: 767.98px) {
:where(body.student-projects-index-page) .header,
.inner_page:where(.student-projects-index-page) .header,
html body:where(.student-projects-index-page).main-layout .header {
                top: 0;
                min-height: 68px;
                padding: 10px 14px !important;
                margin-bottom: 0 !important;
            }

:where(body.student-projects-index-page) .header .row.d_flex {
                min-height: 48px;
                display: flex !important;
                align-items: center !important;
                justify-content: space-between !important;
                flex-wrap: nowrap;
                margin: 0 !important;
            }

:where(body.student-projects-index-page) .header .logo_section,
html body:where(.student-projects-index-page) .header .logo_section {
                flex: 1 1 auto !important;
                width: auto !important;
                max-width: calc(100% - 112px) !important;
                padding: 0 !important;
            }

:where(body.student-projects-index-page) .header .full,
:where(body.student-projects-index-page) .header .center-desk,
:where(body.student-projects-index-page) .header .logo {
                float: none !important;
                width: auto !important;
            }

:where(body.student-projects-index-page) .header .col-md-10,
html body:where(.student-projects-index-page) .header .col-md-10 {
                flex: 0 0 auto !important;
                width: auto !important;
                max-width: none !important;
                padding: 0 !important;
            }

:where(body.student-projects-index-page) .navigation.navbar > .d-flex {
                display: flex !important;
                width: auto !important;
                justify-content: flex-end !important;
            }

html body:where(.student-projects-index-page) .navigation.navbar,
html body:where(.student-projects-index-page).main-layout .navigation.navbar {
                float: none !important;
                display: flex !important;
                justify-content: flex-end !important;
                width: auto !important;
                margin-top: 0 !important;
                padding: 0 !important;
                position: static !important;
            }

:where(body.student-projects-index-page) .user-menu,
:where(body.student-projects-index-page) .navigation .user-menu {
                width: auto !important;
                gap: 8px !important;
                position: relative;
                z-index: 1002;
            }

html body:where(.student-projects-index-page) .navigation .auth-nav-item,
html body:where(.student-projects-index-page) .navigation #auth-sm-nav-item {
                width: 44px !important;
                height: 44px !important;
                min-width: 44px !important;
                padding: 0 !important;
                margin: 0 !important;
                border: 1px solid var(--color-interactive-border) !important;
                border-radius: 14px !important;
                background: var(--color-dark-glass) !important;
                box-shadow: 0 10px 22px var(--color-shadow) !important;
                align-items: center !important;
                justify-content: center !important;
            }

html body:where(.student-projects-index-page) .navigation #auth-sm-nav-item .nav-link {
                color: var(--color-surface-muted) !important;
                opacity: 1 !important;
                background: var(--color-transparent) !important;
                width: 100% !important;
                height: 100% !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                padding: 0 !important;
            }

html body:where(.student-projects-index-page) .navigation #auth-sm-nav-item .nav-link i {
                color: var(--color-surface-muted) !important;
                font-size: 1.2rem !important;
            }

html body:where(.student-projects-index-page) .navigation #auth-sm-nav-item .nav-link::after {
                display: none !important;
            }

html body:where(.student-projects-index-page) .navigation #auth-sm-nav-item .dropdown-menu {
                position: fixed !important;
                top: 68px !important;
                right: 12px !important;
                left: auto !important;
                transform: none !important;
                will-change: auto !important;
                z-index: 1100 !important;
                font-size: 0.75rem !important;
                min-width: 120px !important;
                padding: 4px !important;
            }

html body:where(.student-projects-index-page) .navigation #auth-sm-nav-item .dropdown-menu .dropdown-item {
                padding: 7px 12px !important;
                font-size: 0.75rem !important;
                font-weight: 600 !important;
            }

html body:where(.student-projects-index-page) .navigation.navbar-dark .navbar-toggler,
html body:where(.student-projects-index-page) .navbar-toggler {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                width: 44px !important;
                height: 44px !important;
                min-width: 44px !important;
                margin: 0 !important;
                padding: 0 !important;
                border: 1px solid var(--color-interactive-border) !important;
                border-radius: 14px !important;
                background: var(--color-dark-glass) !important;
                box-shadow: 0 10px 22px var(--color-shadow) !important;
                outline: none !important;
                float: none !important;
            }

html body:where(.student-projects-index-page) .navigation.navbar-dark .navbar-toggler-icon,
html body:where(.student-projects-index-page) .navbar-dark .navbar-toggler-icon {
                width: 20px !important;
                height: 20px !important;
                float: none !important;
                background-image: linear-gradient(var(--color-surface-muted), var(--color-surface-muted)), linear-gradient(var(--color-surface-muted), var(--color-surface-muted)), linear-gradient(var(--color-surface-muted), var(--color-surface-muted)) !important;
                background-position: center 4px, center 10px, center 16px !important;
                background-size: 20px 2px, 20px 2px, 20px 2px !important;
                background-repeat: no-repeat !important;
            }

html body:where(.student-projects-index-page) .navigation .navbar-collapse,
html body:where(.student-projects-index-page) .navigation.navbar .navbar-collapse,
html body:where(.student-projects-index-page) .navigation.navbar #navbarsExample04,
html body:where(.student-projects-index-page) #navbarsExample04 {
                position: fixed !important;
                top: 78px !important;
                left: 12px !important;
                right: 12px !important;
                width: auto !important;
                max-height: calc(100vh - 96px);
                overflow-y: auto;
                margin-top: 0 !important;
                padding: 12px !important;
                background: var(--color-overlay) !important;
                border: 1px solid var(--color-interactive-soft) !important;
                border-radius: 18px !important;
                box-shadow: 0 24px 60px var(--color-overlay) !important;
                backdrop-filter: blur(18px);
                z-index: 1001 !important;
            }

html body:where(.student-projects-index-page) .navigation .navbar-nav {
                display: grid !important;
                gap: 6px !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                align-items: stretch !important;
            }

html body:where(.student-projects-index-page) .navigation.navbar-dark .navbar-nav .nav-link,
html body:where(.student-projects-index-page) .navigation .navbar-nav .nav-link {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                min-height: 46px !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 12px 14px !important;
                border-radius: 13px !important;
                color: var(--color-surface-muted) !important;
                background: var(--color-transparent) !important;
                font-size: 0.98rem !important;
                font-weight: 700 !important;
                line-height: 1.25 !important;
                text-align: center !important;
                text-shadow: none !important;
            }

html body:where(.student-projects-index-page) .navigation.navbar-dark .navbar-nav .nav-link:hover,
html body:where(.student-projects-index-page) .navigation.navbar-dark .navbar-nav .active > .nav-link,
html body:where(.student-projects-index-page) .navigation.navbar-dark .navbar-nav .active .nav-link,
html body:where(.student-projects-index-page) .navigation .navbar-nav .nav-link:hover,
html body:where(.student-projects-index-page) .navigation .navbar-nav .nav-item.active .nav-link {
                background: var(--color-surface-muted) !important;
                color: var(--color-interactive) !important;
                opacity: 1 !important;
            }

html body:where(.student-projects-index-page) .navigation #navbarsExample04 #auth-nav-item > .nav-link,
html body:where(.student-projects-index-page) .navigation #navbarsExample04 #auth-nav-item > .nav-link #auth-username,
html body:where(.student-projects-index-page) .navigation #navbarsExample04 #auth-nav-item > .nav-link i {
                color: var(--color-surface-muted) !important;
                opacity: 1 !important;
                -webkit-text-fill-color: currentColor !important;
            }

html body:where(.student-projects-index-page) .navigation #navbarsExample04 #auth-nav-item.show > .nav-link,
html body:where(.student-projects-index-page) .navigation #navbarsExample04 #auth-nav-item > .nav-link[aria-expanded="true"] {
                background: var(--color-surface-muted) !important;
                color: var(--color-interactive) !important;
            }

html body:where(.student-projects-index-page) .navigation .dropdown-menu {
                background: var(--color-overlay) !important;
                border: 1px solid var(--color-interactive-soft) !important;
                border-radius: 14px !important;
                box-shadow: 0 18px 45px var(--color-overlay) !important;
            }

html body:where(.student-projects-index-page) .navigation .dropdown-item {
                color: var(--color-surface-muted) !important;
                opacity: 1 !important;
            }

html body:where(.student-projects-index-page) .navigation .dropdown-item:hover,
html body:where(.student-projects-index-page) .navigation .dropdown-item:focus {
                background: var(--color-primary-soft) !important;
                color: var(--color-surface) !important;
            }

        }
    
/* Former static inline styles; runtime visibility remains controlled by existing JS. */
:where(body.student-projects-index-page) .projects-visual-1 { font-size: 5rem; color: var(--color-primary); margin-bottom: 20px; }
:where(body.student-projects-index-page) .projects-visual-2 { font-weight: 800; color: var(--text-dark); margin-bottom: 10px; }
:where(body.student-projects-index-page) .projects-visual-3 { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 30px; }
:where(body.student-projects-index-page) .projects-visual-4 { font-family: var(--font-body); font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 800; color: var(--color-primary); text-decoration: none; white-space: nowrap; display: inline-block; background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-interactive) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: var(--color-transparent); transition: transform 0.3s ease; }
:where(body.student-projects-index-page) .projects-visual-5 { width: 60%; }
:where(body.student-projects-index-page) .projects-visual-6 { font-size: 18px; }
:where(body.student-projects-index-page) .projects-visual-7 { font-size: 0.8rem; }
:where(body.student-projects-index-page) .projects-visual-8 { background-position: center;background-size: contain; }
:where(body.student-projects-index-page) .projects-visual-9 { border: 1px solid var(--color-primary); border-radius: 30px; }
:where(body.student-projects-index-page) .projects-visual-10 { margin-left: 5px; }
:where(body.student-projects-index-page) .projects-visual-11 { top: 130%; left: -20px; font-size: 1rem; float: right !important;width: 13rem; }
:where(body.student-projects-index-page) .projects-visual-12 { display: none; }
:where(body.student-projects-index-page) .projects-visual-13 { background: var(--surface-soft); border: 1px dashed var(--border-color); border-radius: 12px; }
:where(body.student-projects-index-page) .projects-visual-14 { display: none; margin-top: 150px; }
:where(body.student-projects-index-page) .projects-visual-15 { font-size: 4rem; color: var(--color-surface-muted); margin-bottom: 20px; }
:where(body.student-projects-index-page) .projects-visual-16 { color: var(--color-primary); text-decoration: none; }
:where(body.student-projects-index-page) .projects-visual-17 { color: var(--color-interactive); text-decoration: none; }
:where(body.student-projects-index-page) .projects-visual-18 { border-left: 4px solid #ff0bac; }
:where(body.student-projects-index-page) .projects-visual-19 { font-size: 1.5rem; color: #ff0bac; }
:where(body.student-projects-index-page) .projects-visual-20 { font-size: 3rem; color: #e7eaf3; margin-bottom: 1rem; }
:where(body.student-projects-index-page) .projects-visual-21 { font-size: 1.1rem; }
:where(body.student-projects-index-page) .projects-visual-22 { font-size: 3rem; margin-bottom: 1rem; }
:where(body.student-projects-index-page) .projects-visual-23 { font-size: 1.5rem; color: var(--primary-color); }

/* Student projects visual layer. Existing JS owns visibility and selection. */
body.student-page.student-projects-index-page.projects-theme {
  --color-primary: var(--theme-primary);
  --color-primary-hover: var(--theme-primary-hover);
  --color-primary-soft: var(--theme-primary-soft);
  --color-primary-border: var(--theme-primary);
  --color-interactive: var(--theme-secondary);
  --color-page: var(--theme-bg);
  --color-surface: var(--theme-surface);
  --color-border: var(--theme-border);
  --color-text: var(--theme-text);
  --color-heading: var(--theme-text);
  --color-muted: var(--theme-muted);
  --text-dark: var(--theme-text);
  --text-muted: var(--theme-muted);
  --surface: var(--theme-surface);
  --surface-soft: var(--theme-bg);
  --surface-strong: var(--theme-surface);
  --border-color: var(--theme-border);
  background: var(--theme-bg) !important;
  color: var(--theme-text) !important;
  font-size: var(--theme-text-base) !important;
}

body.student-page.student-projects-index-page.projects-theme .main-content {
  margin-top: 0 !important;
  padding: var(--theme-space-5) 0 160px !important;
}

body.student-page.student-projects-index-page.projects-theme #projectsContent,
body.student-page.student-projects-index-page.projects-theme .checkout-content.page-container {
  width: 100% !important;
  max-width: 1200px !important;
  margin-inline: auto !important;
  padding-inline: var(--theme-space-3) !important;
}

body.student-page.student-projects-index-page.projects-theme .main-content .projects-hero {
  --projects-hero-accent: #2563eb;
  width: 100%;
  min-height: 0;
  gap: var(--theme-space-4);
  margin-bottom: var(--theme-space-5) !important;
  padding: var(--theme-space-4) !important;
  border: 1px solid var(--color-dark-border) !important;
  border-left-color: var(--projects-hero-accent) !important;
  border-radius: var(--theme-radius) !important;
  background:
    radial-gradient(circle at 88% 18%, rgba(225, 29, 143, 0.1), transparent 28%),
    radial-gradient(circle at 70% 110%, var(--color-interactive-border), transparent 34%),
    linear-gradient(135deg, var(--color-dark-page), var(--color-dark-raised)) !important;
  box-shadow: var(--theme-shadow-sm) !important;
}

body.student-page.student-projects-index-page.projects-theme .main-content .projects-hero::after,
body.student-page.student-projects-index-page.projects-theme .main-content .project-card::before {
  content: none;
}

body.student-page.student-projects-index-page.projects-theme .projects-eyebrow {
  display: block;
  margin-bottom: var(--theme-space-1);
  color: var(--color-dark-small);
  font-size: var(--theme-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.student-page.student-projects-index-page.projects-theme .main-content .projects-hero h2 {
  color: var(--color-dark-text) !important;
  font-size: var(--theme-text-2xl) !important;
  overflow-wrap: anywhere;
}

body.student-page.student-projects-index-page.projects-theme .main-content .projects-hero #welcome-username {
  color: var(--projects-hero-accent) !important;
}

body.student-page.student-projects-index-page.projects-theme .main-content .projects-hero p {
  color: var(--color-dark-muted) !important;
  font-size: var(--theme-text-base) !important;
  line-height: 1.5 !important;
}

body.student-page.student-projects-index-page.projects-theme .projects-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(88px, 1fr));
  flex-shrink: 0;
  gap: var(--theme-space-3);
  margin: 0;
}

body.student-page.student-projects-index-page.projects-theme .projects-stats > div {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--theme-space-1);
  padding-left: var(--theme-space-3);
  border-left: 1px solid var(--color-dark-glass-strong);
}

body.student-page.student-projects-index-page.projects-theme .projects-stats dt {
  color: var(--color-dark-muted);
  font-size: var(--theme-text-sm);
  font-weight: 500;
}

body.student-page.student-projects-index-page.projects-theme .projects-stats dd {
  margin: 0;
  color: var(--color-dark-text);
  font-size: var(--theme-text-xl);
  font-weight: 700;
  line-height: 1.25;
}

body.student-page.student-projects-index-page.projects-theme .main-content .section-title {
  margin-bottom: var(--theme-space-3) !important;
  padding: 0 !important;
  border: 0;
  color: var(--theme-text) !important;
  font-size: var(--theme-text-lg) !important;
}

body.student-page.student-projects-index-page.projects-theme .main-content .section-title i {
  color: var(--theme-primary) !important;
}

body.student-page.student-projects-index-page.projects-theme .projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--theme-space-3);
  width: 100%;
  margin: 0;
}

body.student-page.student-projects-index-page.projects-theme .projects-grid > * {
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 0;
  margin: 0 !important;
}

/* Loading, empty, and error messages occupy the full grid. */
body.student-page.student-projects-index-page.projects-theme .projects-grid > .col-12 {
  grid-column: 1 / -1;
  padding: var(--theme-space-4) !important;
  border: 1px dashed var(--theme-border);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
}

body.student-page.student-projects-index-page.projects-theme .main-content .project-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 312px;
  padding: var(--theme-space-3) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius) !important;
  background: var(--theme-surface) !important;
  box-shadow: var(--theme-shadow-sm) !important;
  transition: transform var(--theme-transition), box-shadow var(--theme-transition), border-color var(--theme-transition);
}

body.student-page.student-projects-index-page.projects-theme .main-content .project-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--theme-shadow-lg) !important;
  border-color: var(--theme-primary) !important;
}

body.student-page.student-projects-index-page.projects-theme .main-content .project-header {
  gap: var(--theme-space-1);
  margin-bottom: var(--theme-space-2) !important;
}

body.student-page.student-projects-index-page.projects-theme .main-content .project-header > i {
  background: var(--theme-primary-soft);
  color: var(--theme-primary) !important;
  border-radius: var(--theme-radius);
}

body.student-page.student-projects-index-page.projects-theme .main-content .project-status {
  padding: var(--theme-space-1) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius) !important;
  background: var(--theme-bg) !important;
  color: var(--theme-muted) !important;
  font-size: var(--theme-text-xs) !important;
  font-weight: 600 !important;
}

body.student-page.student-projects-index-page.projects-theme .main-content .status-available {
  background: var(--theme-info-bg) !important;
  color: var(--theme-secondary) !important;
}

body.student-page.student-projects-index-page.projects-theme .main-content .project-title {
  margin-bottom: var(--theme-space-1) !important;
  color: var(--theme-text) !important;
  font-size: var(--theme-text-base) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-align: left;
  overflow-wrap: anywhere;
}

body.student-page.student-projects-index-page.projects-theme .main-content .project-desc {
  display: -webkit-box;
  flex-grow: 0;
  min-height: 4.5em;
  max-height: 4.5em;
  margin-bottom: var(--theme-space-3) !important;
  overflow: hidden;
  overflow-wrap: anywhere;
  color: var(--theme-muted) !important;
  font-size: var(--theme-text-sm) !important;
  line-height: 1.5 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

body.student-page.student-projects-index-page.projects-theme .main-content .project-footer {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--theme-space-1);
  margin-top: auto;
  padding-top: var(--theme-space-2) !important;
  border-color: var(--theme-border);
}

body.student-page.student-projects-index-page.projects-theme .main-content .project-footer .project-category {
  padding: var(--theme-space-1);
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius) !important;
  background: var(--theme-bg) !important;
  color: var(--theme-muted) !important;
  font-size: var(--theme-text-xs) !important;
  font-weight: 600;
  line-height: 1.5;
}

body.student-page.student-projects-index-page.projects-theme .main-content .project-footer .workspace-action,
body.student-page.student-projects-index-page.projects-theme #btn-proceed-checkout {
  min-height: 44px;
  padding: var(--theme-space-1) var(--theme-space-2) !important;
  border: 1px solid var(--theme-primary) !important;
  border-radius: var(--theme-radius) !important;
  background: var(--theme-primary) !important;
  color: var(--theme-surface) !important;
  -webkit-text-fill-color: var(--theme-surface) !important;
  font-size: var(--theme-text-sm) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  transition: background-color var(--theme-transition), border-color var(--theme-transition);
}

body.student-page.student-projects-index-page.projects-theme .workspace-action { width: 100%; }

body.student-page.student-projects-index-page.projects-theme .main-content .project-footer .workspace-action:hover,
body.student-page.student-projects-index-page.projects-theme #btn-proceed-checkout:hover {
  background: var(--theme-primary-hover) !important;
  border-color: var(--theme-primary-hover) !important;
  transform: none;
}

body.student-page.student-projects-index-page.projects-theme .main-content .project-footer .workspace-action:active,
body.student-page.student-projects-index-page.projects-theme #btn-proceed-checkout:active {
  background: var(--theme-primary-active) !important;
  border-color: var(--theme-primary-active) !important;
}

body.student-page.student-projects-index-page.projects-theme #btn-proceed-checkout:disabled {
  background: var(--theme-border) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-muted) !important;
  -webkit-text-fill-color: var(--theme-muted) !important;
}

/* Price controls retain their original button and cart handler. */
body.student-page.student-projects-index-page.projects-theme .main-content .project-footer .project-price {
  min-height: 44px;
  margin-left: auto;
  padding: var(--theme-space-1) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  -webkit-text-fill-color: var(--theme-text) !important;
  font-size: var(--theme-text-sm) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  font-variant-numeric: tabular-nums;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color var(--theme-transition), background-color var(--theme-transition);
}

body.student-page.student-projects-index-page.projects-theme .main-content .project-footer .project-price:hover,
body.student-page.student-projects-index-page.projects-theme .main-content .project-footer .project-price.btn-primary {
  border-color: var(--theme-primary) !important;
  background: var(--theme-primary-soft) !important;
}

body.student-page.student-projects-index-page.projects-theme .checkout-bar {
  background: var(--theme-surface) !important;
  border-color: var(--theme-primary) !important;
  box-shadow: var(--theme-shadow-lg) !important;
  transition-duration: 150ms;
}

body.student-page.student-projects-index-page.projects-theme :focus-visible {
  outline: var(--theme-focus-ring) !important;
  outline-offset: 3px !important;
}

@media (max-width: 1023px) {
  body.student-page.student-projects-index-page.projects-theme .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.student-page.student-projects-index-page.projects-theme .main-content .projects-hero {
    flex-wrap: wrap;
  }
}

@media (max-width: 639px) {
  body.student-page.student-projects-index-page.projects-theme .projects-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body.student-page.student-projects-index-page.projects-theme #projectsContent,
  body.student-page.student-projects-index-page.projects-theme .checkout-content.page-container {
    padding-inline: var(--theme-space-2) !important;
  }
  body.student-page.student-projects-index-page.projects-theme .main-content {
    padding-top: var(--theme-space-3) !important;
  }
  body.student-page.student-projects-index-page.projects-theme .main-content .projects-hero {
    padding: var(--theme-space-3) !important;
  }
  body.student-page.student-projects-index-page.projects-theme .main-content .projects-hero h2 {
    font-size: var(--theme-text-xl) !important;
  }
  body.student-page.student-projects-index-page.projects-theme .projects-stats {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.student-page.student-projects-index-page.projects-theme .main-content .project-card:hover { transform: none; }
  body.student-page.student-projects-index-page.projects-theme .checkout-bar { transition-duration: 0ms; }
}


/* Workspace: migrated page styles, preserving existing panel and modal states. */

:where(body.student-workspace-page.workspace-theme) {
            --primary-color: var(--color-primary);
            --secondary-color: var(--color-interactive);
            --text-dark: var(--color-surface);
            --text-muted: var(--color-dark-muted);
            --bg-light: var(--color-dark-page);
            --surface: var(--color-dark-surface);
            --surface-soft: var(--color-dark-raised);
            --surface-strong: var(--color-dark-raised);
            --border-color: var(--color-dark-border);
            --shadow-soft: 0 18px 45px var(--color-overlay);
        }

body:where(.student-workspace-page.workspace-theme) {
            background-color: var(--bg-light);
            color: var(--text-dark);
            font-family: var(--font-body);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

:where(body.student-workspace-page.workspace-theme) .navbar-toggler {
            border: 1px solid var(--color-interactive-border);
            border-radius: 12px;
            padding: 0.45rem 0.6rem;
            background: var(--color-dark-glass);
        }

:where(body.student-workspace-page.workspace-theme) .navbar-toggler:focus {
            box-shadow: 0 0 0 0.14rem var(--color-primary-border);
            outline: none;
        }

:where(body.student-workspace-page.workspace-theme) .text-muted {
            color: var(--text-muted) !important;
        }

:where(body.student-workspace-page.workspace-theme) .main-content h1,
:where(body.student-workspace-page.workspace-theme) .main-content h2,
:where(body.student-workspace-page.workspace-theme) .main-content h3,
:where(body.student-workspace-page.workspace-theme) .main-content h4,
:where(body.student-workspace-page.workspace-theme) .main-content h5,
:where(body.student-workspace-page.workspace-theme) .main-content h6 {
            color: var(--text-dark);
            font-family: var(--font-body);
            font-weight: 800;
            letter-spacing: -0.02em;
        }

:where(body.student-workspace-page.workspace-theme) .badge-success {
            background-color: var(--color-primary-soft);
            color: var(--primary-color);
            border: 1px solid var(--color-primary-border);
        }

:where(body.student-workspace-page.workspace-theme) .main-content { margin-top: 100px; padding-bottom: 3rem; }

:where(body.student-workspace-page.workspace-theme) .workspace-header {
            background:
                radial-gradient(circle at top right, var(--color-primary-soft), transparent 38%),
                var(--surface);
            padding: 2rem;
            border-radius: 20px;
            box-shadow: var(--shadow-soft);
            margin-bottom: 2rem;
            border-left: 5px solid var(--primary-color);
            border-top: 1px solid var(--border-color);
            border-right: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
        }

:where(body.student-workspace-page.workspace-theme) .resource-card {
            background: linear-gradient(180deg, var(--color-overlay) 0%, var(--color-overlay) 100%);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 2rem 1.5rem; 
            transition: all 0.3s ease; 
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

:where(body.student-workspace-page.workspace-theme) .resource-card:hover { 
            transform: translateY(-5px); 
            box-shadow: 0 24px 55px var(--color-overlay);
            border-color: var(--color-interactive-border);
        }

:where(body.student-workspace-page.workspace-theme) .icon-wrapper {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin-bottom: 1.5rem;
        }

:where(body.student-workspace-page.workspace-theme) .icon-docs { background: var(--color-interactive-soft); color: var(--secondary-color); }

:where(body.student-workspace-page.workspace-theme) .icon-video { background: var(--color-primary-soft); color: var(--primary-color); }

:where(body.student-workspace-page.workspace-theme) .icon-code { background: var(--color-interactive-soft); color: var(--secondary-color); }

:where(body.student-workspace-page.workspace-theme) .icon-submit { background: var(--color-primary-soft); color: var(--primary-color); }

:where(body.student-workspace-page.workspace-theme) .resource-title { font-family: var(--font-body); font-weight: 800; letter-spacing: -0.025em; color: var(--text-dark); margin-bottom: 1rem; font-size: 1.25rem; }

:where(body.student-workspace-page.workspace-theme) .resource-desc { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 2rem; flex-grow: 1; }

:where(body.student-workspace-page.workspace-theme) .btn-workspace {
            width: 100%;
            border-radius: 50px;
            padding: 10px 20px;
            font-weight: 600;
            letter-spacing: 0;
            font-size: 0.85rem;
            transition: all 0.2s;
        }

:where(body.student-workspace-page.workspace-theme) .btn {
            font-family: var(--font-body);
            font-weight: 600;
            letter-spacing: 0;
            transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
        }

:where(body.student-workspace-page.workspace-theme) .btn:hover,
:where(body.student-workspace-page.workspace-theme) .btn:focus {
            transform: translateY(-1px);
        }

:where(body.student-workspace-page.workspace-theme) .btn-docs { background-color: var(--secondary-color); color: var(--color-surface); border: none; box-shadow: 0 10px 24px var(--color-interactive-soft); }

:where(body.student-workspace-page.workspace-theme) .btn-docs:hover { background-color: var(--color-interactive); color: var(--color-surface); }

:where(body.student-workspace-page.workspace-theme) .btn-video { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary) 100%); color: var(--color-surface); border: none; box-shadow: 0 10px 24px var(--color-primary-soft); }

:where(body.student-workspace-page.workspace-theme) .btn-video:hover { background: var(--color-primary); color: var(--color-surface); }

:where(body.student-workspace-page.workspace-theme) .btn-code { background-color: var(--secondary-color); color: var(--color-surface); border: none; box-shadow: 0 10px 24px var(--color-interactive-soft); }

:where(body.student-workspace-page.workspace-theme) .btn-code:hover { background-color: var(--color-interactive); color: var(--color-surface); }

:where(body.student-workspace-page.workspace-theme) .btn-submit { background-color: var(--color-transparent); color: var(--primary-color); border: 2px solid var(--color-primary-border); }

:where(body.student-workspace-page.workspace-theme) .btn-submit:hover { background-color: var(--primary-color); color: var(--color-surface); }

:where(body.student-workspace-page.workspace-theme) .resource-panel {
            background:
                radial-gradient(circle at top right, var(--color-interactive-soft), transparent 34%),
                var(--surface);
            border-radius: 20px;
            padding: 1.5rem;
            box-shadow: var(--shadow-soft);
            border: 1px solid var(--border-color);
            margin-top: 1rem;
        }

:where(body.student-workspace-page.workspace-theme) .resource-panel.hidden { display: none; }

:where(body.student-workspace-page.workspace-theme) .resource-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }

:where(body.student-workspace-page.workspace-theme) .resource-panel-title { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--text-dark); }

:where(body.student-workspace-page.workspace-theme) .resource-list { display: grid; gap: 1rem; }

:where(body.student-workspace-page.workspace-theme) .resource-item {
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 1rem 1.1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

:where(body.student-workspace-page.workspace-theme) .resource-meta h5 { margin: 0 0 0.35rem 0; font-size: 1rem; color: var(--text-dark); }

:where(body.student-workspace-page.workspace-theme) .resource-meta p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }

:where(body.student-workspace-page.workspace-theme) .resource-empty {
            text-align: center;
            padding: 2rem 1rem;
            color: var(--text-muted);
            border: 1px dashed var(--color-interactive-border);
            border-radius: 14px;
            background: var(--surface-soft);
        }

:where(body.student-workspace-page.workspace-theme) .resource-badge {
            display: inline-block;
            background: var(--color-interactive-soft);
            color: var(--color-interactive-soft);
            border-radius: 999px;
            padding: 0.3rem 0.7rem;
            font-size: 0.78rem;
            font-weight: 600;
            margin-bottom: 0.45rem;
        }

:where(body.student-workspace-page.workspace-theme) .loader_bg { transition: opacity 0.5s ease; pointer-events: none; }

:where(body.student-workspace-page.workspace-theme) .loader_bg.active { pointer-events: all; }

:where(body.student-workspace-page.workspace-theme) .btn-outline-primary {
            color: var(--color-interactive-soft);
            border-color: var(--color-focus-ring);
        }

:where(body.student-workspace-page.workspace-theme) .btn-outline-primary:hover,
:where(body.student-workspace-page.workspace-theme) .btn-outline-primary:focus {
            color: var(--color-surface);
            background: var(--secondary-color);
            border-color: var(--secondary-color);
        }

:where(body.student-workspace-page.workspace-theme) .btn-outline-danger {
            color: var(--primary-color);
            border-color: var(--color-primary-border);
        }

:where(body.student-workspace-page.workspace-theme) .btn-outline-danger:hover,
:where(body.student-workspace-page.workspace-theme) .btn-outline-danger:focus {
            color: var(--color-surface);
            background: var(--primary-color);
            border-color: var(--primary-color);
        }

:where(body.student-workspace-page.workspace-theme) .main-content [style*="background: var(--color-surface)"] {
            background: var(--surface-soft) !important;
            border-color: var(--border-color) !important;
        }

:where(body.student-workspace-page.workspace-theme) #loginPrompt,
:where(body.student-workspace-page.workspace-theme) #invalidProjectPrompt {
            color: var(--text-dark);
        }


        @media (max-width: 575.98px) {
:where(body.student-workspace-page.workspace-theme) .logo a {
                font-size: 1rem !important;
            }

:where(body.student-workspace-page.workspace-theme) .workspace-header,
:where(body.student-workspace-page.workspace-theme) .resource-panel-header,
:where(body.student-workspace-page.workspace-theme) .resource-item {
                align-items: flex-start;
                flex-direction: column;
            }

:where(body.student-workspace-page.workspace-theme) .resource-item .btn {
                width: 100%;
            }

        }
    

:where(body.student-workspace-page.workspace-theme) {
            --im-blue: var(--color-interactive);
            --im-pink: var(--color-primary);
        }

:where(body.student-workspace-page.workspace-theme) .header {
            position: relative !important;
            top: auto;
            left: 0;
            right: 0;
            height: auto !important;
            min-height: 76px;
            padding: 10px 28px !important;
            background: var(--color-overlay) !important;
            border-bottom: 1px solid var(--color-interactive-soft) !important;
            box-shadow: 0 8px 30px var(--color-shadow) !important;
            backdrop-filter: blur(18px);
        }

:where(body.student-workspace-page.workspace-theme) .header .container-fluid {
            max-width: 1780px;
            margin: 0 auto;
        }

:where(body.student-workspace-page.workspace-theme) .header .row.d_flex {
            min-height: 56px;
            align-items: center;
            flex-wrap: nowrap;
        }

:where(body.student-workspace-page.workspace-theme) .header .logo_section {
            flex: 0 0 auto;
            width: auto;
            max-width: none;
        }

:where(body.student-workspace-page.workspace-theme) .header .logo a {
            font-size: clamp(1.35rem, 2.2vw, 2.55rem) !important;
            line-height: 1 !important;
        }

:where(body.student-workspace-page.workspace-theme) .header .col-md-10 {
            flex: 1 1 auto;
            max-width: none;
            min-width: 0;
        }

:where(body.student-workspace-page.workspace-theme) .navigation.navbar {
            width: 100%;
            min-height: 0;
            justify-content: flex-end;
            align-items: center;
        }

:where(body.student-workspace-page.workspace-theme) .navigation .navbar-collapse {
            justify-content: flex-end;
        }

:where(body.student-workspace-page.workspace-theme) .navigation .navbar-nav {
            align-items: center;
            gap: 10px;
            margin-left: auto !important;
            margin-right: 0 !important;
        }

:where(body.student-workspace-page.workspace-theme) .navigation.navbar-dark .navbar-nav .nav-link,
:where(body.student-workspace-page.workspace-theme) .navigation .navbar-nav .nav-link,
:where(body.student-workspace-page.workspace-theme) #auth-username {
            color: var(--color-interactive-soft) !important;
            font-size: 0.86rem !important;
            font-weight: 800 !important;
            letter-spacing: 0 !important;
            text-transform: none !important;
            line-height: 1.2 !important;
            font-family: var(--font-body);
        }

:where(body.student-workspace-page.workspace-theme) .navigation.navbar-dark .navbar-nav .nav-link,
:where(body.student-workspace-page.workspace-theme) .navigation .navbar-nav .nav-link {
            padding: 13px 18px !important;
            border-radius: 999px !important;
            white-space: nowrap;
        }

:where(body.student-workspace-page.workspace-theme) .navigation.navbar-dark .navbar-nav .nav-link:hover,
:where(body.student-workspace-page.workspace-theme) .navigation.navbar-dark .navbar-nav .active > .nav-link,
:where(body.student-workspace-page.workspace-theme) .navigation.navbar-dark .navbar-nav .active .nav-link,
:where(body.student-workspace-page.workspace-theme) .navigation .navbar-nav .nav-item.active .nav-link {
            background: var(--color-surface-muted) !important;
            color: var(--color-interactive) !important;
            text-shadow: none !important;
            opacity: 1 !important;
        }

:where(body.student-workspace-page.workspace-theme) #auth-nav-item,
:where(body.student-workspace-page.workspace-theme) #auth-sm-nav-item {
            border-color: var(--color-primary-border) !important;
        }

:where(body.student-workspace-page.workspace-theme) .dropdown-menu {
            background: var(--surface-strong) !important;
            border: 1px solid var(--color-interactive-soft) !important;
            box-shadow: var(--shadow-soft) !important;
            border-radius: 16px !important;
            padding: 8px !important;
        }

:where(body.student-workspace-page.workspace-theme) .dropdown-item {
            color: var(--text-muted) !important;
            border-radius: 12px !important;
            font-weight: 700 !important;
            padding: 10px 14px !important;
        }

:where(body.student-workspace-page.workspace-theme) .dropdown-item:hover,
:where(body.student-workspace-page.workspace-theme) .dropdown-item:focus {
            color: var(--color-surface) !important;
            background: var(--color-primary-soft) !important;
        }

:where(body.student-workspace-page.workspace-theme) .dropdown-divider {
            border-top-color: var(--border-color) !important;
        }

:where(body.student-workspace-page.workspace-theme) #auth-nav-item > .nav-link,
:where(body.student-workspace-page.workspace-theme) #auth-sm-nav-item > .nav-link {
            background: var(--color-primary-soft) !important;
            color: var(--color-surface) !important;
            font-weight: 800 !important;
            transition: all 0.3s ease !important;
        }

:where(body.student-workspace-page.workspace-theme) #auth-nav-item > .nav-link i,
:where(body.student-workspace-page.workspace-theme) #auth-sm-nav-item > .nav-link i {
            color: var(--color-surface) !important;
            transition: all 0.3s ease !important;
        }

:where(body.student-workspace-page.workspace-theme) #auth-nav-item:hover > .nav-link,
:where(body.student-workspace-page.workspace-theme) #auth-nav-item > .nav-link:hover,
:where(body.student-workspace-page.workspace-theme) #auth-sm-nav-item:hover > .nav-link,
:where(body.student-workspace-page.workspace-theme) #auth-sm-nav-item > .nav-link:hover,
:where(body.student-workspace-page.workspace-theme) #auth-nav-item.show > .nav-link,
:where(body.student-workspace-page.workspace-theme) #auth-nav-item > .nav-link[aria-expanded="true"],
:where(body.student-workspace-page.workspace-theme) #auth-sm-nav-item.show > .nav-link,
:where(body.student-workspace-page.workspace-theme) #auth-sm-nav-item > .nav-link[aria-expanded="true"] {
            background: var(--color-surface-muted) !important;
            color: var(--color-interactive) !important;
            opacity: 1 !important;
            text-shadow: none !important;
            -webkit-text-fill-color: currentColor !important;
            border-radius: inherit !important;
        }

:where(body.student-workspace-page.workspace-theme) #auth-nav-item > .nav-link:focus,
:where(body.student-workspace-page.workspace-theme) #auth-sm-nav-item > .nav-link:focus {
            background: var(--color-primary-soft) !important;
            color: var(--color-surface) !important;
            opacity: 1 !important;
            text-shadow: none !important;
            -webkit-text-fill-color: currentColor !important;
        }

:where(body.student-workspace-page.workspace-theme) #auth-nav-item:hover > .nav-link *,
:where(body.student-workspace-page.workspace-theme) #auth-nav-item > .nav-link:hover *,
:where(body.student-workspace-page.workspace-theme) #auth-sm-nav-item:hover > .nav-link *,
:where(body.student-workspace-page.workspace-theme) #auth-sm-nav-item > .nav-link:hover *,
:where(body.student-workspace-page.workspace-theme) #auth-nav-item.show > .nav-link *,
:where(body.student-workspace-page.workspace-theme) #auth-nav-item > .nav-link[aria-expanded="true"] *,
:where(body.student-workspace-page.workspace-theme) #auth-sm-nav-item.show > .nav-link *,
:where(body.student-workspace-page.workspace-theme) #auth-sm-nav-item > .nav-link[aria-expanded="true"] * {
            color: var(--color-interactive) !important;
            -webkit-text-fill-color: currentColor !important;
        }

:where(body.student-workspace-page.workspace-theme) #auth-nav-item > .nav-link:focus *,
:where(body.student-workspace-page.workspace-theme) #auth-sm-nav-item > .nav-link:focus * {
            color: var(--color-surface) !important;
            -webkit-text-fill-color: currentColor !important;
        }


        @media (max-width: 991.98px) {
:where(body.student-workspace-page.workspace-theme) .navigation .navbar-nav {
                gap: 4px;
            }

:where(body.student-workspace-page.workspace-theme) .navigation.navbar-dark .navbar-nav .nav-link,
:where(body.student-workspace-page.workspace-theme) .navigation .navbar-nav .nav-link {
                padding: 11px 12px !important;
            }

        }

    

        @media (max-width: 767.98px) {
:where(body.student-workspace-page.workspace-theme) .header,
.inner_page:where(.student-workspace-page.workspace-theme) .header,
html body:where(.student-workspace-page.workspace-theme).main-layout .header {
                top: 0;
                min-height: 68px;
                padding: 10px 14px !important;
                margin-bottom: 0 !important;
            }

:where(body.student-workspace-page.workspace-theme) .header .row.d_flex {
                min-height: 48px;
                display: flex !important;
                align-items: center !important;
                justify-content: space-between !important;
                flex-wrap: nowrap;
                margin: 0 !important;
            }

:where(body.student-workspace-page.workspace-theme) .header .logo_section,
html body:where(.student-workspace-page.workspace-theme) .header .logo_section {
                flex: 1 1 auto !important;
                width: auto !important;
                max-width: calc(100% - 112px) !important;
                padding: 0 !important;
            }

:where(body.student-workspace-page.workspace-theme) .header .full,
:where(body.student-workspace-page.workspace-theme) .header .center-desk,
:where(body.student-workspace-page.workspace-theme) .header .logo {
                float: none !important;
                width: auto !important;
            }

:where(body.student-workspace-page.workspace-theme) .header .col-md-10,
html body:where(.student-workspace-page.workspace-theme) .header .col-md-10 {
                flex: 0 0 auto !important;
                width: auto !important;
                max-width: none !important;
                padding: 0 !important;
            }

:where(body.student-workspace-page.workspace-theme) .navigation.navbar > .d-flex {
                display: flex !important;
                width: auto !important;
                justify-content: flex-end !important;
            }

html body:where(.student-workspace-page.workspace-theme) .navigation.navbar,
html body:where(.student-workspace-page.workspace-theme).main-layout .navigation.navbar {
                float: none !important;
                display: flex !important;
                justify-content: flex-end !important;
                width: auto !important;
                margin-top: 0 !important;
                padding: 0 !important;
                position: static !important;
            }

:where(body.student-workspace-page.workspace-theme) .user-menu,
:where(body.student-workspace-page.workspace-theme) .navigation .user-menu {
                width: auto !important;
                gap: 8px !important;
                position: relative;
                z-index: 1002;
            }

html body:where(.student-workspace-page.workspace-theme) .navigation .auth-nav-item,
html body:where(.student-workspace-page.workspace-theme) .navigation #auth-sm-nav-item {
                width: 44px !important;
                height: 44px !important;
                min-width: 44px !important;
                padding: 0 !important;
                margin: 0 !important;
                border: 1px solid var(--color-interactive-border) !important;
                border-radius: 14px !important;
                background: var(--color-dark-glass) !important;
                box-shadow: 0 10px 22px var(--color-shadow) !important;
                align-items: center !important;
                justify-content: center !important;
            }

html body:where(.student-workspace-page.workspace-theme) .navigation #auth-sm-nav-item .nav-link {
                color: var(--color-surface-muted) !important;
                opacity: 1 !important;
                background: var(--color-transparent) !important;
                width: 100% !important;
                height: 100% !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                padding: 0 !important;
            }

html body:where(.student-workspace-page.workspace-theme) .navigation #auth-sm-nav-item .nav-link i {
                color: var(--color-surface-muted) !important;
                font-size: 1.2rem !important;
            }

html body:where(.student-workspace-page.workspace-theme) .navigation #auth-sm-nav-item .nav-link::after {
                display: none !important;
            }

html body:where(.student-workspace-page.workspace-theme) .navigation #auth-sm-nav-item .dropdown-menu {
                position: fixed !important;
                top: 68px !important;
                right: 12px !important;
                left: auto !important;
                transform: none !important;
                will-change: auto !important;
                z-index: 1100 !important;
                font-size: 0.75rem !important;
                min-width: 120px !important;
                padding: 4px !important;
            }

html body:where(.student-workspace-page.workspace-theme) .navigation #auth-sm-nav-item .dropdown-menu .dropdown-item {
                padding: 7px 12px !important;
                font-size: 0.75rem !important;
                font-weight: 600 !important;
            }

html body:where(.student-workspace-page.workspace-theme) .navigation.navbar-dark .navbar-toggler,
html body:where(.student-workspace-page.workspace-theme) .navbar-toggler {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                width: 44px !important;
                height: 44px !important;
                min-width: 44px !important;
                margin: 0 !important;
                padding: 0 !important;
                border: 1px solid var(--color-interactive-border) !important;
                border-radius: 14px !important;
                background: var(--color-dark-glass) !important;
                box-shadow: 0 10px 22px var(--color-shadow) !important;
                outline: none !important;
                float: none !important;
            }

html body:where(.student-workspace-page.workspace-theme) .navigation.navbar-dark .navbar-toggler-icon,
html body:where(.student-workspace-page.workspace-theme) .navbar-dark .navbar-toggler-icon {
                width: 20px !important;
                height: 20px !important;
                float: none !important;
                background-image: linear-gradient(var(--color-surface-muted), var(--color-surface-muted)), linear-gradient(var(--color-surface-muted), var(--color-surface-muted)), linear-gradient(var(--color-surface-muted), var(--color-surface-muted)) !important;
                background-position: center 4px, center 10px, center 16px !important;
                background-size: 20px 2px, 20px 2px, 20px 2px !important;
                background-repeat: no-repeat !important;
            }

html body:where(.student-workspace-page.workspace-theme) .navigation .navbar-collapse,
html body:where(.student-workspace-page.workspace-theme) .navigation.navbar .navbar-collapse,
html body:where(.student-workspace-page.workspace-theme) .navigation.navbar #navbarsExample04,
html body:where(.student-workspace-page.workspace-theme) #navbarsExample04 {
                position: fixed !important;
                top: 78px !important;
                left: 12px !important;
                right: 12px !important;
                width: auto !important;
                max-height: calc(100vh - 96px);
                overflow-y: auto;
                margin-top: 0 !important;
                padding: 12px !important;
                background: var(--color-overlay) !important;
                border: 1px solid var(--color-interactive-soft) !important;
                border-radius: 18px !important;
                box-shadow: 0 24px 60px var(--color-overlay) !important;
                backdrop-filter: blur(18px);
                z-index: 1001 !important;
            }

html body:where(.student-workspace-page.workspace-theme) .navigation .navbar-nav {
                display: grid !important;
                gap: 6px !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                align-items: stretch !important;
            }

html body:where(.student-workspace-page.workspace-theme) .navigation.navbar-dark .navbar-nav .nav-link,
html body:where(.student-workspace-page.workspace-theme) .navigation .navbar-nav .nav-link {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                min-height: 46px !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 12px 14px !important;
                border-radius: 13px !important;
                color: var(--color-surface-muted) !important;
                background: var(--color-transparent) !important;
                font-size: 0.98rem !important;
                font-weight: 700 !important;
                line-height: 1.25 !important;
                text-align: center !important;
                text-shadow: none !important;
            }

html body:where(.student-workspace-page.workspace-theme) .navigation.navbar-dark .navbar-nav .nav-link:hover,
html body:where(.student-workspace-page.workspace-theme) .navigation.navbar-dark .navbar-nav .active > .nav-link,
html body:where(.student-workspace-page.workspace-theme) .navigation.navbar-dark .navbar-nav .active .nav-link,
html body:where(.student-workspace-page.workspace-theme) .navigation .navbar-nav .nav-link:hover,
html body:where(.student-workspace-page.workspace-theme) .navigation .navbar-nav .nav-item.active .nav-link {
                background: var(--color-surface-muted) !important;
                color: var(--color-interactive) !important;
                opacity: 1 !important;
            }

html body:where(.student-workspace-page.workspace-theme) .navigation #navbarsExample04 #auth-nav-item > .nav-link,
html body:where(.student-workspace-page.workspace-theme) .navigation #navbarsExample04 #auth-nav-item > .nav-link #auth-username,
html body:where(.student-workspace-page.workspace-theme) .navigation #navbarsExample04 #auth-nav-item > .nav-link i {
                color: var(--color-surface-muted) !important;
                opacity: 1 !important;
                -webkit-text-fill-color: currentColor !important;
            }

html body:where(.student-workspace-page.workspace-theme) .navigation #navbarsExample04 #auth-nav-item.show > .nav-link,
html body:where(.student-workspace-page.workspace-theme) .navigation #navbarsExample04 #auth-nav-item > .nav-link[aria-expanded="true"] {
                background: var(--color-surface-muted) !important;
                color: var(--color-interactive) !important;
            }

html body:where(.student-workspace-page.workspace-theme) .navigation .dropdown-menu {
                background: var(--color-overlay) !important;
                border: 1px solid var(--color-interactive-soft) !important;
                border-radius: 14px !important;
                box-shadow: 0 18px 45px var(--color-overlay) !important;
            }

html body:where(.student-workspace-page.workspace-theme) .navigation .dropdown-item {
                color: var(--color-surface-muted) !important;
                opacity: 1 !important;
            }

html body:where(.student-workspace-page.workspace-theme) .navigation .dropdown-item:hover,
html body:where(.student-workspace-page.workspace-theme) .navigation .dropdown-item:focus {
                background: var(--color-primary-soft) !important;
                color: var(--color-surface) !important;
            }

        }
    
/* Former static inline styles. Existing JS still owns runtime viewer sizing. */
:where(body.student-workspace-page.workspace-theme) .workspace-visual-1 { font-family: var(--font-body); font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 800; color: var(--color-primary); text-decoration: none; white-space: nowrap; display: inline-block; background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-interactive) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: var(--color-transparent); transition: transform 0.3s ease; }
:where(body.student-workspace-page.workspace-theme) .workspace-visual-2 { width: 60%; }
:where(body.student-workspace-page.workspace-theme) .workspace-visual-3 { font-size: 18px; }
:where(body.student-workspace-page.workspace-theme) .workspace-visual-4 { font-size: 0.8rem; }
:where(body.student-workspace-page.workspace-theme) .workspace-visual-5 { background-position: center;background-size: contain; }
:where(body.student-workspace-page.workspace-theme) .workspace-visual-6 { border: 1px solid var(--color-primary); border-radius: 30px; }
:where(body.student-workspace-page.workspace-theme) .workspace-visual-7 { margin-left: 5px; }
:where(body.student-workspace-page.workspace-theme) .workspace-visual-8 { top: 130%; left: -20px; font-size: 1rem; float: right !important;width: 13rem; }
:where(body.student-workspace-page.workspace-theme) .workspace-visual-9 { display: none; }
:where(body.student-workspace-page.workspace-theme) .workspace-visual-10 { display: none; margin-top: 150px; }
:where(body.student-workspace-page.workspace-theme) .workspace-visual-11 { font-size: 4rem; color: var(--color-surface-muted); margin-bottom: 20px; }
:where(body.student-workspace-page.workspace-theme) .workspace-visual-12 { color: var(--color-primary); text-decoration: none; }
:where(body.student-workspace-page.workspace-theme) .workspace-visual-13 { font-size: 4rem; color: var(--color-primary); margin-bottom: 20px; }
:where(body.student-workspace-page.workspace-theme) .workspace-visual-14 { max-width: 92vw; width: 92vw; }
:where(body.student-workspace-page.workspace-theme) .workspace-visual-15 { min-height: 78vh; background: var(--color-dark-surface); }
:where(body.student-workspace-page.workspace-theme) .workspace-visual-16 { width: 100%; height: 78vh; background: #000; display: block; }
:where(body.student-workspace-page.workspace-theme) .workspace-visual-17 { width: 100%; height: 100%; overflow: auto; background: #ffffff; padding: 24px 0; }
:where(body.student-workspace-page.workspace-theme) .workspace-visual-18 { width: 100%; height: 100%; min-height: 75vh; border: 0; background: #fff; }

/* Project workspace: presentation only; resource routes and panel state stay JS-owned. */
body.student-page.student-workspace-page.workspace-theme {
  --color-primary: var(--theme-primary);
  --color-primary-hover: var(--theme-primary-hover);
  --color-primary-soft: var(--theme-primary-soft);
  --color-primary-border: var(--theme-primary);
  --color-interactive: var(--theme-secondary);
  --color-page: var(--theme-bg);
  --color-surface: var(--theme-surface);
  --color-border: var(--theme-border);
  --color-text: var(--theme-text);
  --color-heading: var(--theme-text);
  --color-muted: var(--theme-muted);
  --text-dark: var(--theme-text);
  --text-muted: var(--theme-muted);
  --surface: var(--theme-surface);
  --surface-soft: var(--theme-bg);
  --surface-strong: var(--theme-surface);
  --border-color: var(--theme-border);
  background: var(--theme-bg) !important;
  color: var(--theme-text) !important;
  font-size: var(--theme-text-base) !important;
}

body.student-page.student-workspace-page.workspace-theme .main-content {
  margin-top: 0 !important;
  padding: var(--theme-space-4) 0 var(--theme-space-8) !important;
}

body.student-page.student-workspace-page.workspace-theme #workspaceContent {
  width: 100% !important;
  max-width: 1200px !important;
  margin-inline: auto !important;
  padding-inline: var(--theme-space-3) !important;
}

body.student-page.student-workspace-page.workspace-theme .workspace-breadcrumb {
  gap: var(--theme-space-1);
  margin-bottom: var(--theme-space-3) !important;
  padding: 0;
  font-size: var(--theme-text-sm);
  line-height: 1.5;
}

body.student-page.student-workspace-page.workspace-theme .workspace-breadcrumb a {
  color: var(--theme-secondary) !important;
}

body.student-page.student-workspace-page.workspace-theme .workspace-breadcrumb a:hover {
  color: var(--theme-link-hover) !important;
  text-decoration: underline !important;
}

/* Preserve the original back-link icon in the DOM. */
body.student-page.student-workspace-page.workspace-theme .workspace-breadcrumb .fa-arrow-left {
  display: none;
}

body.student-page.student-workspace-page.workspace-theme .workspace-breadcrumb :is(.workspace-breadcrumb-separator, [aria-current="page"]) {
  color: var(--theme-muted);
}

body.student-page.student-workspace-page.workspace-theme #workspace-breadcrumb-title {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 500;
}

body.student-page.student-workspace-page.workspace-theme .main-content .workspace-summary {
  min-height: 0;
  margin: 0 0 var(--theme-space-4) !important;
  padding: var(--theme-space-4) !important;
  border: 1px solid var(--theme-border) !important;
  border-left: 4px solid var(--theme-primary) !important;
  border-radius: var(--theme-radius) !important;
  background: var(--theme-primary-soft) !important;
  box-shadow: var(--theme-shadow-sm) !important;
}

body.student-page.student-workspace-page.workspace-theme .main-content .workspace-summary::before,
body.student-page.student-workspace-page.workspace-theme .main-content .workspace-summary::after {
  content: none;
}

body.student-page.student-workspace-page.workspace-theme .main-content .workspace-summary h1 {
  margin: 0 0 var(--theme-space-1) !important;
  color: var(--theme-text) !important;
  font-size: var(--theme-text-2xl) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere;
}

body.student-page.student-workspace-page.workspace-theme .main-content .workspace-summary .badge {
  margin-bottom: var(--theme-space-2) !important;
  padding: var(--theme-space-1) var(--theme-space-2) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-primary-active) !important;
  font-size: var(--theme-text-xs) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

body.student-page.student-workspace-page.workspace-theme .main-content .workspace-summary .workspace-project-meta {
  color: var(--theme-muted) !important;
  font-size: var(--theme-text-xs) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

body.student-page.student-workspace-page.workspace-theme .workspace-resource-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--theme-space-3);
  width: 100%;
  margin: 0;
}

body.student-page.student-workspace-page.workspace-theme .workspace-resource-column {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0 !important;
  padding: 0;
}

body.student-page.student-workspace-page.workspace-theme .main-content .workspace-resource-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  min-height: 288px;
  padding: var(--theme-space-3) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius) !important;
  background: var(--theme-surface) !important;
  box-shadow: var(--theme-shadow-sm) !important;
  text-align: left;
  transition: transform var(--theme-transition), border-color var(--theme-transition), box-shadow var(--theme-transition);
}

body.student-page.student-workspace-page.workspace-theme .main-content .workspace-resource-card:hover {
  transform: translateY(-2px);
  border-color: var(--theme-primary) !important;
  box-shadow: var(--theme-shadow-lg) !important;
}

body.student-page.student-workspace-page.workspace-theme .main-content .workspace-resource-card .icon-wrapper {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 0 var(--theme-space-3) !important;
  border-radius: 50% !important;
  background: var(--theme-primary-soft) !important;
  color: var(--theme-primary) !important;
  font-size: var(--theme-text-lg) !important;
}

body.student-page.student-workspace-page.workspace-theme .main-content .workspace-resource-card .resource-title {
  margin: 0 0 var(--theme-space-1) !important;
  color: var(--theme-text) !important;
  font-size: var(--theme-text-lg) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: left;
}

body.student-page.student-workspace-page.workspace-theme .main-content .workspace-resource-card .resource-desc {
  display: -webkit-box;
  flex-grow: 0;
  min-height: 3em;
  max-height: 3em;
  margin: 0 0 var(--theme-space-3) !important;
  overflow: hidden;
  color: var(--theme-muted) !important;
  font-size: var(--theme-text-sm) !important;
  line-height: 1.5 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

body.student-page.student-workspace-page.workspace-theme .main-content .workspace-resource-card .btn-workspace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: auto;
  padding: var(--theme-space-1) !important;
  border-radius: var(--theme-radius) !important;
  font-size: var(--theme-text-sm) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-decoration: none;
  white-space: normal;
  box-shadow: none !important;
  transform: none !important;
  transition: color var(--theme-transition), background-color var(--theme-transition), border-color var(--theme-transition);
}

body.student-page.student-workspace-page.workspace-theme .main-content .workspace-resource-card .btn-secondary {
  border: 1px solid var(--theme-muted) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  -webkit-text-fill-color: var(--theme-text) !important;
}

body.student-page.student-workspace-page.workspace-theme .main-content .workspace-resource-card .btn-secondary:hover,
body.student-page.student-workspace-page.workspace-theme .main-content .workspace-resource-card .btn-secondary:active {
  border-color: var(--theme-text) !important;
  background: var(--theme-bg) !important;
}

body.student-page.student-workspace-page.workspace-theme .main-content .workspace-resource-card .btn-primary {
  border: 1px solid var(--theme-primary) !important;
  background: var(--theme-primary) !important;
  color: var(--theme-surface) !important;
  -webkit-text-fill-color: var(--theme-surface) !important;
}

body.student-page.student-workspace-page.workspace-theme .main-content .workspace-resource-card .btn-primary:hover {
  border-color: var(--theme-primary-hover) !important;
  background: var(--theme-primary-hover) !important;
}

body.student-page.student-workspace-page.workspace-theme .main-content .workspace-resource-card .btn-primary:active {
  border-color: var(--theme-primary-active) !important;
  background: var(--theme-primary-active) !important;
}

body.student-page.student-workspace-page.workspace-theme :focus-visible {
  outline: var(--theme-focus-ring) !important;
  outline-offset: 3px !important;
}

@media (max-width: 1023px) {
  body.student-page.student-workspace-page.workspace-theme .workspace-resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  body.student-page.student-workspace-page.workspace-theme #workspaceContent {
    padding-inline: var(--theme-space-2) !important;
  }
  body.student-page.student-workspace-page.workspace-theme .workspace-resource-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body.student-page.student-workspace-page.workspace-theme .main-content .workspace-summary {
    padding: var(--theme-space-3) !important;
  }
  body.student-page.student-workspace-page.workspace-theme .main-content .workspace-summary h1 {
    font-size: var(--theme-text-xl) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.student-page.student-workspace-page.workspace-theme .main-content .workspace-resource-card:hover { transform: none; }
}

/* Keep the previous dark hero palette throughout the student workspace flow. */
body.student-page.student-project-system-page.student-workspace-page .main-content :is(.workspace-header.workspace-summary, .page-header) {
  background:
    radial-gradient(circle at 88% 18%, rgba(225, 29, 143, 0.1), transparent 28%),
    radial-gradient(circle at 70% 110%, var(--color-interactive-border), transparent 34%),
    linear-gradient(135deg, var(--color-dark-page), var(--color-dark-raised)) !important;
  border-color: var(--color-dark-border) !important;
  color: var(--color-dark-text) !important;
}

body.student-page.student-project-system-page.student-workspace-page .main-content .workspace-header.workspace-summary {
  border-left-color: #2563eb !important;
}

body.student-page.student-project-system-page.student-workspace-page .main-content :is(.workspace-header.workspace-summary, .page-header) :is(h1, h2) {
  color: var(--color-dark-text) !important;
}

body.student-page.student-project-system-page.student-workspace-page .main-content :is(.workspace-header.workspace-summary, .page-header) :is(p, .text-muted) {
  color: var(--color-dark-muted) !important;
}

body.student-page.student-project-system-page.student-workspace-page .main-content :is(.workspace-header.workspace-summary, .page-header) .badge {
  background: var(--color-dark-glass) !important;
  border-color: var(--color-dark-glass-strong) !important;
  color: var(--color-dark-muted) !important;
}

body.student-page.student-project-system-page.student-workspace-page .main-content .page-header #workspaceHomeLink {
  background: var(--color-dark-glass) !important;
  border-color: var(--color-dark-glass-strong) !important;
  color: var(--color-dark-text) !important;
}

body.student-page.student-project-system-page.student-workspace-page .main-content .page-header #workspaceHomeLink:hover {
  background: var(--color-dark-glass-strong) !important;
}


/* Resource page: migrated styles, scoped to avoid affecting other workspace pages. */

:where(body.resource-theme) {
                --primary-color: var(--color-primary);
                --secondary-color: var(--color-interactive);
                --success-color: var(--color-success);
                --warning-color: var(--color-warning);
                --text-dark: var(--color-surface);
                --text-muted: var(--color-dark-muted);
                --bg-light: var(--color-dark-page);
                --surface: var(--color-dark-surface);
                --surface-soft: var(--color-dark-raised);
                --surface-strong: var(--color-dark-raised);
                --border-color: var(--color-dark-border);
                --shadow-soft: 0 18px 45px var(--color-overlay);
            }

body:where(.resource-theme) {
                background-color: var(--bg-light);
                color: var(--text-dark);
                font-family: var(--font-body);
                line-height: 1.6;
                -webkit-font-smoothing: antialiased;
            }

:where(body.resource-theme) .header {
                background: var(--color-overlay) !important;
                border-bottom: 1px solid var(--color-interactive-soft);
                box-shadow: 0 8px 30px var(--color-shadow);
                position: relative;
                z-index: 1040;
            }

:where(body.resource-theme) .navigation.navbar-dark .navbar-nav .nav-link,
:where(body.resource-theme) .navigation .navbar-nav .nav-link,
:where(body.resource-theme) #auth-username {
                color: var(--color-interactive-soft) !important;
                font-family: var(--font-body);
            }

:where(body.resource-theme) .navigation .navbar-nav .nav-item.active .nav-link,
:where(body.resource-theme) .navigation .navbar-nav .nav-link:hover {
                color: var(--color-interactive) !important;
                background: var(--color-surface-muted) !important;
                text-shadow: none;
                opacity: 1;
            }

:where(body.resource-theme) .dropdown-menu {
                background: var(--surface-strong);
                border: 1px solid var(--color-interactive-soft);
                box-shadow: var(--shadow-soft);
            }

:where(body.resource-theme) .dropdown-item {
                color: var(--text-muted);
            }

:where(body.resource-theme) .dropdown-item:hover,
:where(body.resource-theme) .dropdown-item:focus {
                color: var(--color-surface);
                background: var(--color-primary-soft);
            }

:where(body.resource-theme) .dropdown-divider {
                border-top-color: var(--border-color);
            }

:where(body.resource-theme) .navigation {
                justify-content: flex-end;
            }

:where(body.resource-theme) .user-menu {
                gap: 0.65rem;
                width: auto !important;
            }

:where(body.resource-theme) .navbar-toggler {
                border: 1px solid var(--color-interactive-border);
                border-radius: 12px;
                padding: 0.45rem 0.6rem;
                background: var(--color-dark-glass);
            }

:where(body.resource-theme) .navbar-toggler:focus {
                box-shadow: 0 0 0 0.14rem var(--color-primary-border);
                outline: none;
            }

:where(body.resource-theme) .text-muted {
                color: var(--text-muted) !important;
            }

:where(body.resource-theme) .main-content h1,
:where(body.resource-theme) .main-content h2,
:where(body.resource-theme) .main-content h3,
:where(body.resource-theme) .main-content h4,
:where(body.resource-theme) .main-content h5,
:where(body.resource-theme) .main-content h6 {
                color: var(--text-dark);
                font-family: var(--font-body);
                font-weight: 800;
                letter-spacing: -0.02em;
            }

:where(body.resource-theme) .badge-primary,
:where(body.resource-theme) .btn-primary {
                background-color: var(--primary-color);
                border-color: var(--primary-color);
                box-shadow: 0 10px 24px var(--color-primary-soft);
            }

:where(body.resource-theme) .bg-light {
                background-color: var(--surface-strong) !important;
            }

:where(body.resource-theme) .btn-outline-secondary {
                color: var(--text-muted);
                border-color: var(--border-color);
            }

:where(body.resource-theme) .btn-outline-secondary:hover,
:where(body.resource-theme) .btn-outline-secondary:focus {
                color: var(--color-surface);
                background: var(--color-dark-glass);
                border-color: var(--color-dark-glass-strong);
            }

:where(body.resource-theme) .main-content { margin-top: 100px; padding-bottom: 3rem; }

:where(body.resource-theme) .loader_bg { transition: opacity 0.5s ease; pointer-events: none; }

:where(body.resource-theme) .loader_bg.active { pointer-events: all; }

:where(body.resource-theme) .page-shell {
                background:
                    radial-gradient(circle at top right, var(--color-interactive-soft), transparent 34%),
                    var(--surface);
                border: 1px solid var(--border-color);
                border-radius: 20px;
                box-shadow: var(--shadow-soft);
                padding: 2rem;
            }

:where(body.resource-theme) .page-header {
                border-bottom: 1px solid var(--border-color);
                margin-bottom: 1.5rem;
                padding-bottom: 1rem;
            }

:where(body.resource-theme) .resource-card {
                background: linear-gradient(180deg, var(--color-overlay) 0%, var(--color-overlay) 100%);
                border: 1px solid var(--border-color);
                border-radius: 20px;
                height: 100%;
                padding: 1.25rem;
                transition: transform 0.2s ease, box-shadow 0.2s ease;
            }

:where(body.resource-theme) .resource-card:hover {
                transform: translateY(-4px);
                border-color: var(--color-interactive-border);
                box-shadow: 0 24px 55px var(--color-overlay);
            }

:where(body.resource-theme) .resource-card.docs-card {
                max-width: 820px;
                margin: 0 auto;
                display: flex;
                align-items: center;
                gap: 1rem;
                border-color: var(--color-interactive-soft);
                background: linear-gradient(180deg, var(--color-interactive-soft) 0%, var(--color-overlay) 100%);
                padding: 1rem;
            }

:where(body.resource-theme) .resource-card.docs-card .resource-icon {
                width: 48px;
                height: 48px;
                font-size: 1.2rem;
                flex: 0 0 48px;
                margin-bottom: 0;
            }

:where(body.resource-theme) .resource-card.docs-card .resource-details {
                flex: 1 1 auto;
                min-width: 0;
            }

:where(body.resource-theme) .resource-card.docs-card .resource-card-title {
                font-family: var(--font-body);
                font-weight: 800;
                letter-spacing: -0.025em;
                margin-bottom: 0.35rem;
                overflow-wrap: anywhere;
            }

:where(body.resource-theme) .resource-card.docs-card .resource-meta {
                margin-bottom: 0 !important;
            }

:where(body.resource-theme) .resource-card.docs-card .resource-action {
                flex: 0 0 auto;
                min-width: 150px;
                margin-left: auto;
            }


            @media (max-width: 575.98px) {
:where(body.resource-theme) .resource-card.docs-card {
                    align-items: flex-start;
                    flex-direction: column;
                }

:where(body.resource-theme) .resource-card.docs-card .resource-action {
                    width: 100%;
                    margin-left: 0;
                }

            }
:where(body.resource-theme) .resource-icon {
                width: 56px;
                height: 56px;
                border-radius: 50%;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 1.4rem;
                margin-bottom: 1rem;
            }

:where(body.resource-theme) .resource-icon.docs {
                color: var(--secondary-color);
                background: var(--color-interactive-soft);
            }

:where(body.resource-theme) .resource-icon.video {
                color: var(--primary-color);
                background: var(--color-primary-soft);
            }

:where(body.resource-theme) .resource-icon.code {
                color: var(--success-color);
                background: var(--color-interactive-soft);
            }

:where(body.resource-theme) .resource-type-badge {
                border-radius: 999px;
                font-weight: 700;
                letter-spacing: 0;
                padding: 0.45rem 0.8rem;
            }

:where(body.resource-theme) .resource-type-badge.docs {
                background: var(--color-interactive-soft);
                color: var(--color-interactive-soft);
            }

:where(body.resource-theme) .resource-type-badge.video {
                background: var(--color-primary-soft);
                color: var(--primary-color);
            }

:where(body.resource-theme) .resource-type-badge.code {
                background: var(--color-interactive-soft);
                color: var(--color-interactive-soft);
            }

:where(body.resource-theme) .resource-action {
                border: none;
                border-radius: 50px;
                color: var(--color-surface);
                font-weight: 700;
                font-family: var(--font-body);
                letter-spacing: 0;
                transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
            }

:where(body.resource-theme) .resource-action:hover,
:where(body.resource-theme) .resource-action:focus {
                color: var(--color-surface);
                transform: translateY(-1px);
                text-decoration: none;
            }

:where(body.resource-theme) .resource-action.docs {
                background: var(--secondary-color);
                box-shadow: 0 10px 24px var(--color-interactive-soft);
            }

:where(body.resource-theme) .resource-action.docs:hover,
:where(body.resource-theme) .resource-action.docs:focus {
                background: var(--color-interactive);
                box-shadow: 0 14px 28px var(--color-interactive-border);
            }

:where(body.resource-theme) .resource-action.video {
                background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary) 100%);
                box-shadow: 0 12px 24px var(--color-primary-soft);
            }

:where(body.resource-theme) .resource-action.video:hover,
:where(body.resource-theme) .resource-action.video:focus {
                background: var(--color-primary);
                box-shadow: 0 14px 28px var(--color-primary-border);
            }

:where(body.resource-theme) .resource-action.code {
                background: var(--secondary-color);
                box-shadow: 0 12px 24px var(--color-interactive-soft);
            }

:where(body.resource-theme) .resource-action.code:hover,
:where(body.resource-theme) .resource-action.code:focus {
                background: var(--color-interactive);
                box-shadow: 0 14px 28px var(--color-interactive-border);
            }

:where(body.resource-theme) .code-browser {
                display: flex;
                flex-direction: column;
                gap: 1.25rem;
                max-width: 980px;
                margin: 0 auto;
                width: 100%;
            }

:where(body.resource-theme) .code-folder-row {
                border: 1px solid var(--border-color);
                border-radius: 20px;
                background: linear-gradient(180deg, var(--color-overlay) 0%, var(--color-overlay) 100%);
                padding: 1.15rem 1.15rem 1rem;
                box-shadow: 0 16px 32px var(--color-shadow);
            }

:where(body.resource-theme) .code-folder-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 1.15rem;
                margin-bottom: 1.1rem;
                flex-wrap: wrap;
            }

:where(body.resource-theme) .code-folder-title {
                display: flex;
                align-items: center;
                gap: 0.65rem;
                font-size: 1.05rem;
                font-weight: 800;
                letter-spacing: -0.02em;
                color: var(--text-dark);
                margin: 0;
            }

:where(body.resource-theme) .code-folder-title i {
                color: var(--color-interactive-soft);
            }

:where(body.resource-theme) .code-folder-meta {
                color: var(--text-muted);
                font-size: 0.88rem;
                margin: 0;
            }

:where(body.resource-theme) .code-file-list {
                display: grid;
                gap: 0.8rem;
            }

:where(body.resource-theme) .code-file-list .resource-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 1rem;
                background: var(--color-overlay);
                border: 1px solid var(--color-interactive-soft);
                border-radius: 14px;
                padding: 0.9rem 1rem;
            }

:where(body.resource-theme) .code-file-list .resource-meta {
                width: 100%;
                word-break: break-word;
            }

:where(body.resource-theme) .code-file-list .resource-meta h5 {
                color: var(--color-interactive-soft);
                font-size: 0.98rem;
                font-weight: 700;
                letter-spacing: -0.01em;
                line-height: 1.35;
                margin: 0;
            }

:where(body.resource-theme) .code-file-list .resource-item:hover {
                border-color: var(--color-interactive-border);
                background: var(--color-overlay);
            }

:where(body.resource-theme) .resource-preview {
                width: 100%;
                border-radius: 12px;
                background: var(--color-interactive);
                margin-bottom: 1rem;
            }

:where(body.resource-theme) .status-card {
                border-radius: 14px;
                padding: 1rem 1.25rem;
                background: var(--surface-strong) !important;
                border: 1px solid var(--border-color);
            }

:where(body.resource-theme) .empty-state {
                border: 1px dashed var(--color-interactive-border);
                border-radius: 16px;
                padding: 3rem 1.5rem;
                background: var(--surface-soft);
                text-align: center;
            }

.video-mode:where(.resource-theme) #pageTitle {
                font-size: 1.55rem;
                line-height: 1.2;
            }

.video-mode:where(.resource-theme) .resource-card {
                border-color: var(--color-primary-soft);
            }

.video-mode:where(.resource-theme) .resource-card-title {
                font-size: inherit;
                line-height: 1.3;
            }

.video-mode:where(.resource-theme) .resource-meta {
                font-size: 0.88rem;
                letter-spacing: 0.01em;
            }

:where(body.resource-theme) .resource-card.video-card {
                max-width: 320px;
                margin: 0 auto;
                border: 1px solid var(--color-primary-soft);
                background: linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-overlay) 100%);
                box-shadow: 0 24px 42px var(--color-shadow);
                border-radius: 18px;
                padding: 1rem;
            }

:where(body.resource-theme) .resource-card.video-card .resource-preview {
                height: 180px;
                object-fit: cover;
                border-radius: 16px;
                border: 1px solid var(--color-interactive-soft);
            }

:where(body.resource-theme) .mobile-video-preview {
                width: 100%;
                height: 180px;
                border-radius: 16px;
                border: 1px solid var(--color-interactive-soft);
                background: radial-gradient(circle at center, var(--color-primary-border), var(--color-overlay) 72%);
                display: none;
                align-items: center;
                justify-content: center;
                margin-bottom: 1rem;
                position: relative;
                overflow: hidden;
            }

:where(body.resource-theme) .mobile-video-preview::after {
                content: 'Tap Open Video to Preview';
                position: absolute;
                bottom: 14px;
                left: 16px;
                right: 16px;
                color: var(--color-dark-glass-strong);
                font-size: 0.82rem;
                text-align: center;
                letter-spacing: 0.01em;
            }

:where(body.resource-theme) .mobile-video-preview i {
                width: 64px;
                height: 64px;
                border-radius: 50%;
                background: var(--color-primary-soft);
                color: var(--color-primary);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.4rem;
                box-shadow: 0 0 0 12px var(--color-primary-soft);
            }


            @media (max-width: 767.98px) {
:where(body.resource-theme) .resource-card.video-card .resource-preview {
                    display: none;
                }

:where(body.resource-theme) .mobile-video-preview {
                    display: flex;
                }

            }
:where(body.resource-theme) .resource-card.video-card .resource-preview::-webkit-media-controls-download-button,
:where(body.resource-theme) .resource-card.video-card .resource-preview::-webkit-media-controls-overflow-button {
                display: none !important;
            }

:where(body.resource-theme) .resource-card.video-card .resource-preview::-webkit-media-controls-enclosure {
                overflow: hidden !important;
            }

:where(body.resource-theme) .resource-card.video-card .resource-icon {
                width: 48px;
                height: 48px;
                font-size: 1.2rem;
            }

:where(body.resource-theme) .resource-card.video-card .resource-action {
                background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary) 100%);
                box-shadow: 0 12px 24px var(--color-primary-soft);
                font-size: 0.85rem;
            }

:where(body.resource-theme) .resource-card.video-card .resource-action:hover,
:where(body.resource-theme) .resource-card.video-card .resource-action:focus {
                background: var(--color-primary);
                box-shadow: 0 14px 28px var(--color-primary-border);
            }

:where(body.resource-theme) .video-fallback {
                border: 1px dashed var(--color-primary-border);
                border-radius: 16px;
                color: var(--text-muted);
                margin-bottom: 1rem;
                padding: 1rem;
                text-align: center;
            }

:where(body.resource-theme) .video-fallback i {
                color: var(--primary-color);
                display: block;
                font-size: 1.8rem;
                margin-bottom: 0.5rem;
            }

:where(body.resource-theme) #codeViewerTitle,
:where(body.resource-theme) #resourceViewerTitle {
                color: var(--color-surface);
            }

:where(body.resource-theme) #codeViewerSubtitle,
:where(body.resource-theme) #resourceViewerSubtitle {
                color: var(--color-focus-ring) !important;
            }

:where(body.resource-theme) .alert-warning,
:where(body.resource-theme) .alert-danger {
                background: var(--surface-strong);
                border-color: var(--border-color);
                color: var(--text-dark);
            }

:where(body.resource-theme) .main-content [style*="background: var(--color-surface)"] {
                background: var(--surface-soft) !important;
                border-color: var(--border-color) !important;
            }

:where(body.resource-theme) #loginPrompt,
:where(body.resource-theme) #invalidPrompt {
                color: var(--text-dark);
            }

:where(body.resource-theme) .btn {
                font-family: var(--font-body);
                font-weight: 600;
                letter-spacing: 0;
                transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
            }

:where(body.resource-theme) .btn:hover,
:where(body.resource-theme) .btn:focus {
                transform: translateY(-1px);
            }


            @media (max-width: 575.98px) {
:where(body.resource-theme) .logo a {
                    font-size: 1rem !important;
                }

            }
        

:where(body.resource-theme) {
            --im-blue: var(--color-interactive);
            --im-pink: var(--color-primary);
        }

:where(body.resource-theme) .header {
            position: relative !important;
            top: auto;
            left: 0;
            right: 0;
            height: auto !important;
            min-height: 76px;
            padding: 10px 28px !important;
            background: var(--color-overlay) !important;
            border-bottom: 1px solid var(--color-interactive-soft) !important;
            box-shadow: 0 8px 30px var(--color-shadow) !important;
            backdrop-filter: blur(18px);
        }

:where(body.resource-theme) .header .container-fluid {
            max-width: 1780px;
            margin: 0 auto;
        }

:where(body.resource-theme) .header .row.d_flex {
            min-height: 56px;
            align-items: center;
            flex-wrap: nowrap;
        }

:where(body.resource-theme) .header .logo_section {
            flex: 0 0 auto;
            width: auto;
            max-width: none;
        }

:where(body.resource-theme) .header .logo a {
            font-size: clamp(1.35rem, 2.2vw, 2.55rem) !important;
            line-height: 1 !important;
        }

:where(body.resource-theme) .header .col-md-10 {
            flex: 1 1 auto;
            max-width: none;
            min-width: 0;
        }

:where(body.resource-theme) .navigation.navbar {
            width: 100%;
            min-height: 0;
            justify-content: flex-end;
            align-items: center;
        }

:where(body.resource-theme) .navigation .navbar-collapse {
            justify-content: flex-end;
        }

:where(body.resource-theme) .navigation .navbar-nav {
            align-items: center;
            gap: 10px;
            margin-left: auto !important;
            margin-right: 0 !important;
        }

:where(body.resource-theme) .navigation.navbar-dark .navbar-nav .nav-link,
:where(body.resource-theme) .navigation .navbar-nav .nav-link,
:where(body.resource-theme) #auth-username {
            color: var(--color-interactive-soft) !important;
            font-size: 0.86rem !important;
            font-weight: 800 !important;
            letter-spacing: 0 !important;
            text-transform: none !important;
            line-height: 1.2 !important;
            font-family: var(--font-body);
        }

:where(body.resource-theme) .navigation.navbar-dark .navbar-nav .nav-link,
:where(body.resource-theme) .navigation .navbar-nav .nav-link {
            padding: 13px 18px !important;
            border-radius: 999px !important;
            white-space: nowrap;
        }

:where(body.resource-theme) .navigation.navbar-dark .navbar-nav .nav-link:hover,
:where(body.resource-theme) .navigation.navbar-dark .navbar-nav .active > .nav-link,
:where(body.resource-theme) .navigation.navbar-dark .navbar-nav .active .nav-link,
:where(body.resource-theme) .navigation .navbar-nav .nav-item.active .nav-link {
            background: var(--color-surface-muted) !important;
            color: var(--color-interactive) !important;
            text-shadow: none !important;
            opacity: 1 !important;
        }

:where(body.resource-theme) #auth-nav-item,
:where(body.resource-theme) #auth-sm-nav-item {
            border-color: var(--color-primary-border) !important;
        }

:where(body.resource-theme) .dropdown-menu {
            background: var(--surface-strong) !important;
            border: 1px solid var(--color-interactive-soft) !important;
            box-shadow: var(--shadow-soft) !important;
            border-radius: 16px !important;
            padding: 8px !important;
        }

:where(body.resource-theme) .dropdown-item {
            color: var(--text-muted) !important;
            border-radius: 12px !important;
            font-weight: 700 !important;
            padding: 10px 14px !important;
        }

:where(body.resource-theme) .dropdown-item:hover,
:where(body.resource-theme) .dropdown-item:focus {
            color: var(--color-surface) !important;
            background: var(--color-primary-soft) !important;
        }

:where(body.resource-theme) .dropdown-divider {
            border-top-color: var(--border-color) !important;
        }

:where(body.resource-theme) #auth-nav-item > .nav-link,
:where(body.resource-theme) #auth-sm-nav-item > .nav-link {
            background: var(--color-primary-soft) !important;
            color: var(--color-surface) !important;
            font-weight: 800 !important;
            transition: all 0.3s ease !important;
        }

:where(body.resource-theme) #auth-nav-item > .nav-link i,
:where(body.resource-theme) #auth-sm-nav-item > .nav-link i {
            color: var(--color-surface) !important;
            transition: all 0.3s ease !important;
        }

:where(body.resource-theme) #auth-nav-item:hover > .nav-link,
:where(body.resource-theme) #auth-nav-item > .nav-link:hover,
:where(body.resource-theme) #auth-sm-nav-item:hover > .nav-link,
:where(body.resource-theme) #auth-sm-nav-item > .nav-link:hover,
:where(body.resource-theme) #auth-nav-item.show > .nav-link,
:where(body.resource-theme) #auth-nav-item > .nav-link[aria-expanded="true"],
:where(body.resource-theme) #auth-sm-nav-item.show > .nav-link,
:where(body.resource-theme) #auth-sm-nav-item > .nav-link[aria-expanded="true"] {
            background: var(--color-surface-muted) !important;
            color: var(--color-interactive) !important;
            opacity: 1 !important;
            text-shadow: none !important;
            -webkit-text-fill-color: currentColor !important;
            border-radius: inherit !important;
        }

:where(body.resource-theme) #auth-nav-item > .nav-link:focus,
:where(body.resource-theme) #auth-sm-nav-item > .nav-link:focus {
            background: var(--color-primary-soft) !important;
            color: var(--color-surface) !important;
            opacity: 1 !important;
            text-shadow: none !important;
            -webkit-text-fill-color: currentColor !important;
        }

:where(body.resource-theme) #auth-nav-item:hover > .nav-link *,
:where(body.resource-theme) #auth-nav-item > .nav-link:hover *,
:where(body.resource-theme) #auth-sm-nav-item:hover > .nav-link *,
:where(body.resource-theme) #auth-sm-nav-item > .nav-link:hover *,
:where(body.resource-theme) #auth-nav-item.show > .nav-link *,
:where(body.resource-theme) #auth-nav-item > .nav-link[aria-expanded="true"] *,
:where(body.resource-theme) #auth-sm-nav-item.show > .nav-link *,
:where(body.resource-theme) #auth-sm-nav-item > .nav-link[aria-expanded="true"] * {
            color: var(--color-interactive) !important;
            -webkit-text-fill-color: currentColor !important;
        }

:where(body.resource-theme) #auth-nav-item > .nav-link:focus *,
:where(body.resource-theme) #auth-sm-nav-item > .nav-link:focus * {
            color: var(--color-surface) !important;
            -webkit-text-fill-color: currentColor !important;
        }


        @media (max-width: 991.98px) {
:where(body.resource-theme) .navigation .navbar-nav {
                gap: 4px;
            }

:where(body.resource-theme) .navigation.navbar-dark .navbar-nav .nav-link,
:where(body.resource-theme) .navigation .navbar-nav .nav-link {
                padding: 11px 12px !important;
            }

        }

    

        @media (max-width: 767.98px) {
:where(body.resource-theme) .header,
.inner_page:where(.resource-theme) .header,
html body:where(.resource-theme).main-layout .header {
                top: 0;
                min-height: 68px;
                padding: 10px 14px !important;
                margin-bottom: 0 !important;
            }

:where(body.resource-theme) .header .row.d_flex {
                min-height: 48px;
                display: flex !important;
                align-items: center !important;
                justify-content: space-between !important;
                flex-wrap: nowrap;
                margin: 0 !important;
            }

:where(body.resource-theme) .header .logo_section,
html body:where(.resource-theme) .header .logo_section {
                flex: 1 1 auto !important;
                width: auto !important;
                max-width: calc(100% - 112px) !important;
                padding: 0 !important;
            }

:where(body.resource-theme) .header .full,
:where(body.resource-theme) .header .center-desk,
:where(body.resource-theme) .header .logo {
                float: none !important;
                width: auto !important;
            }

:where(body.resource-theme) .header .col-md-10,
html body:where(.resource-theme) .header .col-md-10 {
                flex: 0 0 auto !important;
                width: auto !important;
                max-width: none !important;
                padding: 0 !important;
            }

:where(body.resource-theme) .navigation.navbar > .d-flex {
                display: flex !important;
                width: auto !important;
                justify-content: flex-end !important;
            }

html body:where(.resource-theme) .navigation.navbar,
html body:where(.resource-theme).main-layout .navigation.navbar {
                float: none !important;
                display: flex !important;
                justify-content: flex-end !important;
                width: auto !important;
                margin-top: 0 !important;
                padding: 0 !important;
                position: static !important;
            }

:where(body.resource-theme) .user-menu,
:where(body.resource-theme) .navigation .user-menu {
                width: auto !important;
                gap: 8px !important;
                position: relative;
                z-index: 1002;
            }

html body:where(.resource-theme) .navigation .auth-nav-item,
html body:where(.resource-theme) .navigation #auth-sm-nav-item {
                width: 44px !important;
                height: 44px !important;
                min-width: 44px !important;
                padding: 0 !important;
                margin: 0 !important;
                border: 1px solid var(--color-interactive-border) !important;
                border-radius: 14px !important;
                background: var(--color-dark-glass) !important;
                box-shadow: 0 10px 22px var(--color-shadow) !important;
                align-items: center !important;
                justify-content: center !important;
            }

html body:where(.resource-theme) .navigation #auth-sm-nav-item .nav-link {
                color: var(--color-surface-muted) !important;
                opacity: 1 !important;
                background: var(--color-transparent) !important;
                width: 100% !important;
                height: 100% !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                padding: 0 !important;
            }

html body:where(.resource-theme) .navigation #auth-sm-nav-item .nav-link i {
                color: var(--color-surface-muted) !important;
                font-size: 1.2rem !important;
            }

html body:where(.resource-theme) .navigation #auth-sm-nav-item .nav-link::after {
                display: none !important;
            }

html body:where(.resource-theme) .navigation #auth-sm-nav-item .dropdown-menu {
                position: fixed !important;
                top: 68px !important;
                right: 12px !important;
                left: auto !important;
                transform: none !important;
                will-change: auto !important;
                z-index: 1100 !important;
                font-size: 0.75rem !important;
                min-width: 120px !important;
                padding: 4px !important;
            }

html body:where(.resource-theme) .navigation #auth-sm-nav-item .dropdown-menu .dropdown-item {
                padding: 7px 12px !important;
                font-size: 0.75rem !important;
                font-weight: 600 !important;
            }

html body:where(.resource-theme) .navigation.navbar-dark .navbar-toggler,
html body:where(.resource-theme) .navbar-toggler {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                width: 44px !important;
                height: 44px !important;
                min-width: 44px !important;
                margin: 0 !important;
                padding: 0 !important;
                border: 1px solid var(--color-interactive-border) !important;
                border-radius: 14px !important;
                background: var(--color-dark-glass) !important;
                box-shadow: 0 10px 22px var(--color-shadow) !important;
                outline: none !important;
                float: none !important;
            }

html body:where(.resource-theme) .navigation.navbar-dark .navbar-toggler-icon,
html body:where(.resource-theme) .navbar-dark .navbar-toggler-icon {
                width: 20px !important;
                height: 20px !important;
                float: none !important;
                background-image: linear-gradient(var(--color-surface-muted), var(--color-surface-muted)), linear-gradient(var(--color-surface-muted), var(--color-surface-muted)), linear-gradient(var(--color-surface-muted), var(--color-surface-muted)) !important;
                background-position: center 4px, center 10px, center 16px !important;
                background-size: 20px 2px, 20px 2px, 20px 2px !important;
                background-repeat: no-repeat !important;
            }

html body:where(.resource-theme) .navigation .navbar-collapse,
html body:where(.resource-theme) .navigation.navbar .navbar-collapse,
html body:where(.resource-theme) .navigation.navbar #navbarsExample04,
html body:where(.resource-theme) #navbarsExample04 {
                position: fixed !important;
                top: 78px !important;
                left: 12px !important;
                right: 12px !important;
                width: auto !important;
                max-height: calc(100vh - 96px);
                overflow-y: auto;
                margin-top: 0 !important;
                padding: 12px !important;
                background: var(--color-overlay) !important;
                border: 1px solid var(--color-interactive-soft) !important;
                border-radius: 18px !important;
                box-shadow: 0 24px 60px var(--color-overlay) !important;
                backdrop-filter: blur(18px);
                z-index: 1001 !important;
            }

html body:where(.resource-theme) .navigation .navbar-nav {
                display: grid !important;
                gap: 6px !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                align-items: stretch !important;
            }

html body:where(.resource-theme) .navigation.navbar-dark .navbar-nav .nav-link,
html body:where(.resource-theme) .navigation .navbar-nav .nav-link {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                min-height: 46px !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 12px 14px !important;
                border-radius: 13px !important;
                color: var(--color-surface-muted) !important;
                background: var(--color-transparent) !important;
                font-size: 0.98rem !important;
                font-weight: 700 !important;
                line-height: 1.25 !important;
                text-align: center !important;
                text-shadow: none !important;
            }

html body:where(.resource-theme) .navigation.navbar-dark .navbar-nav .nav-link:hover,
html body:where(.resource-theme) .navigation.navbar-dark .navbar-nav .active > .nav-link,
html body:where(.resource-theme) .navigation.navbar-dark .navbar-nav .active .nav-link,
html body:where(.resource-theme) .navigation .navbar-nav .nav-link:hover,
html body:where(.resource-theme) .navigation .navbar-nav .nav-item.active .nav-link {
                background: var(--color-surface-muted) !important;
                color: var(--color-interactive) !important;
                opacity: 1 !important;
            }

html body:where(.resource-theme) .navigation #navbarsExample04 #auth-nav-item > .nav-link,
html body:where(.resource-theme) .navigation #navbarsExample04 #auth-nav-item > .nav-link #auth-username,
html body:where(.resource-theme) .navigation #navbarsExample04 #auth-nav-item > .nav-link i {
                color: var(--color-surface-muted) !important;
                opacity: 1 !important;
                -webkit-text-fill-color: currentColor !important;
            }

html body:where(.resource-theme) .navigation #navbarsExample04 #auth-nav-item.show > .nav-link,
html body:where(.resource-theme) .navigation #navbarsExample04 #auth-nav-item > .nav-link[aria-expanded="true"] {
                background: var(--color-surface-muted) !important;
                color: var(--color-interactive) !important;
            }

html body:where(.resource-theme) .navigation .dropdown-menu {
                background: var(--color-overlay) !important;
                border: 1px solid var(--color-interactive-soft) !important;
                border-radius: 14px !important;
                box-shadow: 0 18px 45px var(--color-overlay) !important;
            }

html body:where(.resource-theme) .navigation .dropdown-item {
                color: var(--color-surface-muted) !important;
                opacity: 1 !important;
            }

html body:where(.resource-theme) .navigation .dropdown-item:hover,
html body:where(.resource-theme) .navigation .dropdown-item:focus {
                background: var(--color-primary-soft) !important;
                color: var(--color-surface) !important;
            }

        }
    
/* Former static inline styles; runtime preview dimensions remain JS-owned. */
:where(body.resource-theme) .resource-visual-1 { font-family: var(--font-body); font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 800; color: var(--color-primary); text-decoration: none; white-space: nowrap; display: inline-block; background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-interactive) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: var(--color-transparent); transition: transform 0.3s ease; }
:where(body.resource-theme) .resource-visual-2 { width: 60%; }
:where(body.resource-theme) .resource-visual-3 { font-size: 18px; }
:where(body.resource-theme) .resource-visual-4 { font-size: 0.8rem; }
:where(body.resource-theme) .resource-visual-5 { background-position: center;background-size: contain; }
:where(body.resource-theme) .resource-visual-6 { border: 1px solid var(--color-primary); border-radius: 30px; }
:where(body.resource-theme) .resource-visual-7 { margin-left: 5px; }
:where(body.resource-theme) .resource-visual-8 { top: 130%; left: -20px; font-size: 1rem; float: right !important;width: 13rem; }
:where(body.resource-theme) .resource-visual-9 { display: none; }
:where(body.resource-theme) .resource-visual-10 { font-size: 3rem; color: var(--color-border-soft); }
:where(body.resource-theme) .resource-visual-11 { display: none; margin-top: 150px; }
:where(body.resource-theme) .resource-visual-12 { font-size: 4rem; color: var(--color-surface-muted); margin-bottom: 20px; }
:where(body.resource-theme) .resource-visual-13 { color: var(--color-primary); text-decoration: none; }
:where(body.resource-theme) .resource-visual-14 { font-size: 4rem; color: var(--color-primary); margin-bottom: 20px; }
:where(body.resource-theme) .resource-visual-15 { max-width: 92vw; width: 92vw; }
:where(body.resource-theme) .resource-visual-16 { background: var(--surface); border: 1px solid var(--border-color); border-radius: 20px; color: var(--text-dark); }
:where(body.resource-theme) .resource-visual-17 { border-bottom-color: var(--border-color); }
:where(body.resource-theme) .resource-visual-18 { max-height: 80vh; overflow: auto; background: var(--color-dark-surface); color: var(--color-dark-muted); border-radius: 16px; padding: 1rem; white-space: pre; font-size: 0.9rem; }
:where(body.resource-theme) .resource-visual-19 { border-top-color: var(--border-color); }
:where(body.resource-theme) .resource-visual-20 { min-height: 78vh; background: var(--color-dark-surface); }
:where(body.resource-theme) .resource-visual-21 { width: 100%; height: 78vh; background: #000; display: block; }
:where(body.resource-theme) .resource-visual-22 { width: 100%; height: 100%; overflow: auto; background: #ffffff; padding: 24px 0; }

/* Resource views: docs list, video grid, and a single surface per code folder. */
body.student-page.student-workspace-page.resource-theme {
  --color-primary: var(--theme-primary);
  --color-primary-hover: var(--theme-primary-hover);
  --color-primary-soft: var(--theme-primary-soft);
  --color-primary-border: var(--theme-primary);
  --color-interactive: var(--theme-secondary);
  --color-page: var(--theme-bg);
  --color-surface: var(--theme-surface);
  --color-border: var(--theme-border);
  --color-heading: var(--theme-text);
  --color-text: var(--theme-text);
  --color-muted: var(--theme-muted);
  --color-muted-legacy: var(--theme-muted);
  --surface: var(--theme-surface);
  --surface-strong: var(--theme-surface);
  --text-dark: var(--theme-text);
  --text-muted: var(--theme-muted);
  background: var(--theme-bg) !important;
  font-size: var(--theme-text-base) !important;
}

body.student-page.student-workspace-page.resource-theme .main-content {
  padding: var(--theme-space-4) 0 var(--theme-space-8) !important;
}

body.student-page.student-workspace-page.resource-theme #resourcePage {
  width: 100% !important;
  max-width: 1200px !important;
  padding-inline: var(--theme-space-3) !important;
  margin-inline: auto !important;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .page-shell {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .resource-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--theme-space-1);
  margin: 0 0 var(--theme-space-3) !important;
  padding: 0;
  color: var(--theme-muted);
  font-size: var(--theme-text-sm);
}

body.student-page.student-workspace-page.resource-theme #resourcePage .resource-breadcrumb-home {
  min-width: 0;
  margin: 0 !important;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .resource-breadcrumb a,
body.student-page.student-workspace-page.resource-theme #resourcePage #workspaceHomeLink {
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--theme-secondary) !important;
  font-size: var(--theme-text-sm) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: none !important;
  transform: none !important;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .resource-breadcrumb a:hover {
  color: var(--theme-link-hover) !important;
  text-decoration: underline !important;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .resource-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}

body.student-page.student-workspace-page.resource-theme .resource-back-label,
body.student-page.student-workspace-page.resource-theme #resourceSummaryText {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px !important;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .resource-page-heading {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center !important;
  min-height: 148px;
  gap: var(--theme-space-2);
  margin: 0 0 var(--theme-space-4) !important;
  padding: var(--theme-space-4) var(--theme-space-5) !important;
  border: 1px solid var(--color-dark-border) !important;
  border-radius: var(--theme-radius) !important;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .resource-heading-copy { display: contents; }
body.student-page.student-workspace-page.resource-theme #resourcePage #resourceTypeBadge { grid-column: 1; grid-row: 1; margin: 0 !important; }
body.student-page.student-workspace-page.resource-theme #resourcePage #pageTitle {
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  color: var(--color-dark-text) !important;
  font-size: var(--theme-text-xl) !important;
  line-height: 1.25 !important;
  text-align: left;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .resource-heading-copy > p {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0 !important;
  font-size: var(--theme-text-xs) !important;
}

body.student-page.student-workspace-page.resource-theme #resourcePage #summaryCard {
  grid-column: 3;
  grid-row: 1;
  margin: 0 !important;
  padding: var(--theme-space-1) var(--theme-space-2) !important;
  border: 1px solid var(--color-dark-glass-strong) !important;
  border-radius: var(--theme-radius) !important;
  background: var(--color-dark-glass) !important;
  color: var(--color-dark-text) !important;
  box-shadow: none !important;
  white-space: nowrap;
}

body.student-page.student-workspace-page.resource-theme #resourcePage #resourceList {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--theme-space-2);
  width: 100%;
  margin: 0;
}

body.student-page.student-workspace-page.resource-theme #resourcePage #resourceList > * {
  min-width: 0;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0 !important;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .resource-card {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: var(--theme-space-3) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius) !important;
  background: var(--theme-surface) !important;
  box-shadow: var(--theme-shadow-sm) !important;
  transition: background-color var(--theme-transition), border-color var(--theme-transition);
}

body.student-page.student-workspace-page.resource-theme #resourcePage .resource-card:hover {
  border-color: var(--theme-primary) !important;
  transform: none !important;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .docs-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--theme-space-2);
  text-align: left;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .docs-card:hover { background: var(--theme-primary-soft) !important; }
body.student-page.student-workspace-page.resource-theme #resourcePage .docs-card .resource-details { flex: 1; min-width: 0; }
body.student-page.student-workspace-page.resource-theme #resourcePage .resource-icon {
  background: var(--theme-primary-soft) !important;
  color: var(--theme-primary) !important;
  border-radius: var(--theme-radius);
}

body.student-page.student-workspace-page.resource-theme #resourcePage .resource-card-title {
  margin-bottom: var(--theme-space-1) !important;
  color: var(--theme-text) !important;
  font-size: var(--theme-text-base) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  overflow-wrap: anywhere;
  text-align: left;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .resource-meta {
  margin-bottom: 0 !important;
  color: var(--theme-muted) !important;
  font-size: var(--theme-text-sm) !important;
  line-height: 1.5 !important;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .resource-action {
  flex-shrink: 0;
  min-height: 44px;
  padding: var(--theme-space-1) var(--theme-space-2) !important;
  border: 1px solid var(--theme-primary) !important;
  border-radius: var(--theme-radius) !important;
  background: var(--theme-primary) !important;
  color: var(--theme-surface) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .resource-action:hover { background: var(--theme-primary-hover) !important; }
body.student-page.student-workspace-page.resource-theme #resourcePage .docs-card .resource-action { margin-left: auto; }

body.student-page.student-workspace-page.resource-theme.video-mode #resourcePage #resourceList {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--theme-space-3);
}

body.student-page.student-workspace-page.resource-theme #resourcePage .video-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 !important;
  overflow: hidden;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .video-card > .resource-icon { display: none; }
body.student-page.student-workspace-page.resource-theme #resourcePage .video-card :is(.resource-preview, .mobile-video-preview, .video-fallback) {
  order: -1;
  flex: none;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  margin: 0 0 var(--theme-space-2) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--theme-border) !important;
  border-radius: 0 !important;
  background: var(--theme-bg) !important;
  object-fit: contain;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .video-card :is(.mobile-video-preview, .video-fallback) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--theme-space-2);
  text-align: center;
  font-size: var(--theme-text-xs) !important;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .video-card :is(.resource-card-title, .resource-meta) {
  margin-inline: var(--theme-space-2);
}

body.student-page.student-workspace-page.resource-theme #resourcePage .video-card .resource-card-title {
  min-height: 3em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .video-card .resource-action {
  width: calc(100% - 32px);
  margin: auto var(--theme-space-2) var(--theme-space-2);
}

body.student-page.student-workspace-page.resource-theme #resourcePage .video-card .resource-meta:last-of-type { padding-bottom: var(--theme-space-3); }
body.student-page.student-workspace-page.resource-theme #resourcePage .code-browser {
  display: grid;
  gap: var(--theme-space-3);
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .code-folder-row {
  padding: 0;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius) !important;
  background: var(--theme-surface) !important;
  box-shadow: var(--theme-shadow-sm) !important;
  overflow: hidden;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .code-folder-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--theme-space-3);
  padding: var(--theme-space-3);
  margin: 0;
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-bg);
}

body.student-page.student-workspace-page.resource-theme #resourcePage .code-folder-header > .d-flex { gap: var(--theme-space-2); }
body.student-page.student-workspace-page.resource-theme #resourcePage .code-folder-dropdown > summary {
  cursor: pointer;
  list-style: none;
}
body.student-page.student-workspace-page.resource-theme #resourcePage .code-folder-dropdown > summary::-webkit-details-marker { display: none; }
body.student-page.student-workspace-page.resource-theme #resourcePage .code-folder-dropdown > summary::before {
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--theme-muted);
  border-bottom: 2px solid var(--theme-muted);
  transform: rotate(-45deg);
  transition: transform var(--theme-transition);
}
body.student-page.student-workspace-page.resource-theme #resourcePage .code-folder-dropdown[open] > summary::before { transform: rotate(45deg); }
body.student-page.student-workspace-page.resource-theme #resourcePage .code-folder-dropdown > summary > div:first-of-type { flex: 1; min-width: 0; }
body.student-page.student-workspace-page.resource-theme #resourcePage .code-folder-dropdown:not([open]) > summary { border-bottom: 0; }
body.student-page.student-workspace-page.resource-theme #resourcePage .code-folder-dropdown:not([open]) > .code-file-list { display: none; }
body.student-page.student-workspace-page.resource-theme #resourcePage .code-folder-title { margin: 0; font-size: var(--theme-text-lg) !important; overflow-wrap: anywhere; }
body.student-page.student-workspace-page.resource-theme #resourcePage .code-folder-title i { margin-right: var(--theme-space-1); color: var(--theme-primary) !important; }
body.student-page.student-workspace-page.resource-theme #resourcePage .code-folder-header .badge {
  padding: var(--theme-space-1) var(--theme-space-2);
  border-color: var(--theme-border) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-muted) !important;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .code-file-list { display: block; padding: 0; }
body.student-page.student-workspace-page.resource-theme #resourcePage .code-file-list .resource-item {
  padding: var(--theme-space-2) var(--theme-space-3);
  border: 0 !important;
  border-bottom: 1px solid var(--theme-border) !important;
  border-radius: 0 !important;
  background: var(--theme-surface) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .code-file-list .resource-item:last-child { border-bottom: 0 !important; }
body.student-page.student-workspace-page.resource-theme #resourcePage .code-file-list .resource-item:hover { background: var(--theme-bg) !important; }
body.student-page.student-workspace-page.resource-theme #resourcePage .code-file-list .resource-meta { flex: 1; width: 100%; }
body.student-page.student-workspace-page.resource-theme #resourcePage .code-file-list .resource-meta .d-flex { gap: var(--theme-space-2); }
body.student-page.student-workspace-page.resource-theme #resourcePage .code-file-list h5 { flex: 1; min-width: 0; font-size: var(--theme-text-sm) !important; overflow-wrap: anywhere; }

body.student-page.student-workspace-page.resource-theme #resourcePage .code-folder-header .btn-secondary,
body.student-page.student-workspace-page.resource-theme #resourcePage .code-file-list .btn-ghost {
  min-height: 44px;
  padding: var(--theme-space-1) var(--theme-space-2) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .code-file-list .btn-ghost {
  width: auto;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--theme-primary) !important;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .code-folder-header .btn-secondary:hover { background: var(--theme-bg) !important; }
body.student-page.student-workspace-page.resource-theme #resourcePage .code-file-list .btn-ghost:hover { background: var(--theme-primary-soft) !important; }
body.student-page.student-workspace-page.resource-theme #resourcePage #emptyState {
  padding: var(--theme-space-8) var(--theme-space-3);
  border: 1px dashed var(--theme-border) !important;
  border-radius: var(--theme-radius);
  background: var(--theme-surface) !important;
  color: var(--theme-muted) !important;
  text-align: center;
}

body.student-page.student-workspace-page.resource-theme #resourcePage #emptyState > i { color: var(--theme-primary) !important; }
body.student-page.student-workspace-page.resource-theme :focus-visible { outline: var(--theme-focus-ring) !important; outline-offset: 3px !important; }

@media (max-width: 1023px) {
  body.student-page.student-workspace-page.resource-theme.video-mode #resourcePage #resourceList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  body.student-page.student-workspace-page.resource-theme #resourcePage { padding-inline: var(--theme-space-2) !important; }
  body.student-page.student-workspace-page.resource-theme #resourcePage .resource-page-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--theme-space-3) !important;
  }
  body.student-page.student-workspace-page.resource-theme #resourcePage #pageTitle { grid-column: 1 / -1; grid-row: 2; font-size: var(--theme-text-lg) !important; }
  body.student-page.student-workspace-page.resource-theme #resourcePage #summaryCard { grid-column: 2; }
  body.student-page.student-workspace-page.resource-theme #resourcePage .resource-heading-copy > p { grid-row: 3; }
  body.student-page.student-workspace-page.resource-theme.video-mode #resourcePage #resourceList { grid-template-columns: minmax(0, 1fr); }
  body.student-page.student-workspace-page.resource-theme #resourcePage .docs-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); padding: var(--theme-space-2) !important; }
  body.student-page.student-workspace-page.resource-theme #resourcePage .docs-card .resource-action { grid-column: 2; justify-self: end; width: auto; margin-left: auto; }
  body.student-page.student-workspace-page.resource-theme #resourcePage .code-folder-header { padding: var(--theme-space-2); }
  body.student-page.student-workspace-page.resource-theme #resourcePage .code-file-list .resource-item { padding: var(--theme-space-2); }
}

/* File preview only. Bootstrap retains all open, dismiss, and focus behavior. */
body.student-page.resource-theme #codeViewerModal .modal-dialog {
  width: calc(100% - 32px);
  max-width: 900px;
  min-height: calc(100% - 48px);
  margin: 24px auto;
}

body.student-page.resource-theme #codeViewerModal .modal-content {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  border: 1px solid var(--theme-border) !important;
  border-radius: 16px !important;
  overflow: hidden;
  background: var(--theme-surface) !important;
  box-shadow: var(--theme-shadow-lg) !important;
}

body.student-page.resource-theme #codeViewerModal .modal-header {
  flex: 0 0 auto;
  align-items: center;
  gap: var(--theme-space-2);
  padding: var(--theme-space-2) var(--theme-space-3);
  border-bottom: 1px solid var(--theme-border) !important;
  background: var(--theme-surface) !important;
}

body.student-page.resource-theme #codeViewerModal .modal-header > div { min-width: 0; }
body.student-page.resource-theme #codeViewerModal #codeViewerTitle {
  margin: 0 !important;
  color: var(--theme-text) !important;
  font-size: var(--theme-text-lg) !important;
  line-height: 1.4 !important;
  overflow-wrap: anywhere;
}

body.student-page.resource-theme #codeViewerModal .modal-header .close {
  display: inline-flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-height: 40px;
  margin: 0 0 0 auto;
  padding: 0;
  border: 1px solid var(--theme-border);
  border-radius: 50%;
  background: var(--theme-bg);
  color: var(--theme-muted) !important;
  font-size: 28px;
  line-height: 1;
  opacity: 1;
  text-shadow: none;
  transition: background-color var(--theme-transition), color var(--theme-transition);
}

body.student-page.resource-theme #codeViewerModal .modal-header .close:hover {
  background: var(--theme-primary-soft);
  color: var(--theme-primary) !important;
}

body.student-page.resource-theme #codeViewerModal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--theme-space-3);
  overflow: auto;
  background: var(--theme-bg);
  color: var(--theme-text);
}

body.student-page.resource-theme #codeViewerModal .modal-body,
body.student-page.resource-theme #codeViewerModal .modal-body :is(pre, code) {
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

body.student-page.resource-theme #codeViewerModal #codeViewerBody pre {
  max-height: none;
  margin: 0 !important;
  padding: 0;
  overflow: visible;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--theme-text) !important;
  white-space: pre;
}

body.student-page.resource-theme #codeViewerModal #codeViewerContent {
  background: transparent;
  color: var(--theme-text);
}

body.student-page.resource-theme #codeViewerModal .modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  flex: 0 0 auto;
  gap: var(--theme-space-1);
  padding: var(--theme-space-2) var(--theme-space-3);
  border-top: 1px solid var(--theme-border) !important;
  background: var(--theme-surface) !important;
}

body.student-page.resource-theme #codeViewerModal .modal-footer .btn {
  min-height: 44px;
  margin: 0;
  padding: var(--theme-space-1) var(--theme-space-2);
  border: 1px solid transparent !important;
  border-radius: var(--theme-radius) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color var(--theme-transition), color var(--theme-transition);
}

body.student-page.resource-theme #codeViewerModal #codeViewerDownloadLink {
  background: var(--theme-primary) !important;
  color: var(--theme-surface) !important;
}

body.student-page.resource-theme #codeViewerModal #codeViewerDownloadLink:hover { background: var(--theme-primary-hover) !important; }
body.student-page.resource-theme #codeViewerModal #codeViewerDownloadLink:active { background: var(--theme-primary-active) !important; }
body.student-page.resource-theme #codeViewerModal .modal-footer .btn-ghost {
  background: transparent !important;
  color: var(--theme-primary) !important;
}
body.student-page.resource-theme #codeViewerModal .modal-footer .btn-ghost:hover { background: var(--theme-primary-soft) !important; }

body.resource-theme:has(#codeViewerModal.show) > .modal-backdrop {
  background: rgb(15 23 42 / 40%);
  opacity: 1;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Course detail: compact the API-powered student project cards. */
body.student-page.dynamic-course-page .projects-body-base {
  background: var(--theme-bg);
}

body.student-page.dynamic-course-page .projects-container {
  width: 100%;
  max-width: 1200px;
  padding: clamp(40px, 6vw, 72px) var(--theme-space-3);
}

body.student-page.dynamic-course-page .projects-page-title {
  margin: 0 0 var(--theme-space-4);
  color: var(--theme-text) !important;
  font-family: var(--theme-font) !important;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
}

body.student-page.dynamic-course-page .projects-grid {
  gap: var(--theme-space-3);
  margin-bottom: var(--theme-space-4);
}

body.student-page.dynamic-course-page .project-card {
  min-width: 0;
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow-sm);
  transition: transform var(--theme-transition), border-color var(--theme-transition), box-shadow var(--theme-transition);
}

body.student-page.dynamic-course-page .project-card:hover {
  transform: translateY(-2px);
  border-color: var(--theme-primary);
  box-shadow: var(--theme-shadow-lg);
}

body.student-page.dynamic-course-page .project-name {
  margin: 0 0 var(--theme-space-1);
  color: var(--theme-primary) !important;
  font-family: var(--theme-font) !important;
  font-size: var(--theme-text-xs) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.06em !important;
  overflow-wrap: anywhere;
}

body.student-page.dynamic-course-page .project-title {
  margin: 0 0 var(--theme-space-2);
  color: var(--theme-text) !important;
  font-family: var(--theme-font) !important;
  font-size: var(--theme-text-lg) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere;
}

body.student-page.dynamic-course-page .project-description {
  flex-grow: 1;
  margin: 0 0 var(--theme-space-3);
  color: var(--theme-muted) !important;
  font-family: var(--theme-font) !important;
  font-size: var(--theme-text-sm) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  overflow-wrap: anywhere;
}

body.student-page.dynamic-course-page .project-footer {
  margin-top: auto;
  padding-top: var(--theme-space-2);
  border-top: 1px solid var(--theme-border);
}

body.student-page.dynamic-course-page .project-date {
  color: var(--theme-muted);
  font-family: var(--theme-font);
  font-size: var(--theme-text-xs);
}

body.student-page.dynamic-course-page .projects-empty-state {
  grid-column: 1 / -1;
  width: 100%;
  padding: var(--theme-space-4);
  border: 1px dashed var(--theme-border);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
  color: var(--theme-muted);
  font-size: var(--theme-text-sm);
  text-align: center;
}

@media (max-width: 768px) {
  body.student-page.dynamic-course-page .projects-container {
    padding: var(--theme-space-5) var(--theme-space-2);
  }

  body.student-page.dynamic-course-page .projects-page-title {
    margin-bottom: var(--theme-space-3);
  }

  body.student-page.dynamic-course-page .projects-grid {
    gap: var(--theme-space-2);
  }

  body.student-page.dynamic-course-page .project-title {
    font-size: var(--theme-text-base) !important;
  }
}

/* Course detail: one compact typography scale across the hero and video library. */
body.student-page.dynamic-course-page {
  --font-body: var(--theme-font);
  --font-heading: var(--theme-font);
  font-family: var(--theme-font);
}

body.student-page.dynamic-course-page > :not(footer) :is(p, li) {
  font-family: var(--theme-font) !important;
  font-size: var(--theme-text-sm) !important;
  line-height: 1.6 !important;
}

body.student-page.dynamic-course-page .course-hero-section {
  padding: clamp(32px, 5vw, 64px) 0;
  border-bottom: 1px solid var(--theme-border);
  background:
    radial-gradient(circle at 90% 4%, var(--theme-primary-soft), transparent 24%),
    linear-gradient(135deg, var(--theme-bg), var(--theme-surface)) !important;
}

body.student-page.dynamic-course-page .course-hero-section::before {
  top: -180px;
  right: -140px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, var(--theme-primary-soft), transparent 70%);
}

body.student-page.dynamic-course-page .course-hero-section > .container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
}

body.student-page.dynamic-course-page .course-hero-section > .container > .row {
  row-gap: var(--theme-space-3);
  align-items: center !important;
}

body.student-page.dynamic-course-page .course-hero-section .col-12 {
  min-width: 0;
}

body.student-page.dynamic-course-page .course-hero-section .col-lg-7 {
  margin-bottom: 0 !important;
}

body.student-page.dynamic-course-page .video-wrapper {
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  background: #080f1c;
  box-shadow: var(--theme-shadow-lg);
}

body.student-page.dynamic-course-page .course-details-card {
  justify-content: flex-start;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--theme-border);
  border-top: 3px solid var(--theme-primary);
  border-radius: 16px;
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.student-page.dynamic-course-page .badge-course-id {
  margin-bottom: var(--theme-space-2);
  padding: 6px 12px;
  border: 1px solid var(--theme-primary-soft);
  border-radius: var(--theme-radius);
  background: var(--theme-primary-soft);
  color: var(--theme-primary-active);
  font-family: var(--theme-font);
  font-size: var(--theme-text-xs);
  box-shadow: none;
}

/* Outrank the shared dark-hero heading rule on this light course card. */
body.student-page.dynamic-course-page .course-hero-section .hero-course-title {
  margin-bottom: var(--theme-space-2);
  background: none;
  color: var(--theme-text) !important;
  font-family: var(--theme-font) !important;
  font-size: clamp(1.75rem, 2.5vw, 2.25rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  -webkit-text-fill-color: currentColor !important;
  overflow-wrap: anywhere;
}

body.student-page.dynamic-course-page #card-head-2 .hero-subtitle {
  margin: 0 0 var(--theme-space-3) !important;
  color: var(--theme-muted) !important;
  font-family: var(--theme-font) !important;
  font-size: var(--theme-text-base) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

body.student-page.dynamic-course-page .meta-pill {
  flex: 1 1 140px;
  min-width: 0;
  min-height: 64px;
  gap: var(--theme-space-1);
  padding: 10px 12px;
  border-color: var(--theme-border);
  border-radius: var(--theme-radius);
  background: var(--theme-bg);
  box-shadow: none;
}

body.student-page.dynamic-course-page .meta-pill:hover {
  transform: none;
  border-color: var(--theme-primary);
}

body.student-page.dynamic-course-page .meta-pill i {
  flex-basis: 36px;
  width: 36px;
  height: 36px;
  margin-right: 4px;
  background: var(--theme-primary-soft);
  color: var(--theme-primary);
  font-size: var(--theme-text-base);
}

body.student-page.dynamic-course-page .meta-text {
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px 5px;
  overflow-wrap: anywhere;
}

body.student-page.dynamic-course-page .meta-text small,
body.student-page.dynamic-course-page .meta-text span {
  font-family: var(--theme-font);
  font-size: var(--theme-text-xs);
  line-height: 1.45;
}

body.student-page.dynamic-course-page .meta-text small { color: var(--theme-muted); }
body.student-page.dynamic-course-page .meta-text span { color: var(--theme-text); font-weight: 600; }

body.student-page.dynamic-course-page .course-hero-section .btn-enroll-hero {
  min-height: 48px;
  margin-top: var(--theme-space-1);
  padding: var(--theme-space-1) var(--theme-space-3);
  border-radius: var(--theme-radius);
  font-family: var(--theme-font);
  font-size: var(--theme-text-sm) !important;
  background: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  line-height: 1.5;
  box-shadow: var(--theme-shadow-sm);
}

body.student-page.dynamic-course-page .course-hero-section .btn-enroll-hero:hover {
  background: var(--theme-primary-hover) !important;
  border-color: var(--theme-primary-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--theme-shadow-lg);
}

body.student-page.dynamic-course-page .video-library-section {
  padding: clamp(40px, 6vw, 64px) 0;
  background: var(--theme-bg);
}

body.student-page.dynamic-course-page .video-library-section > .container { max-width: 1200px; }

body.student-page.dynamic-course-page .video-library-section .section-header {
  margin-bottom: var(--theme-space-4);
}

body.student-page.dynamic-course-page .video-library-section .section-header h2 {
  margin: 0 0 var(--theme-space-1) !important;
  color: var(--theme-text) !important;
  font-family: var(--theme-font) !important;
  font-size: clamp(1.5rem, 3vw, 1.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
}

body.student-page.dynamic-course-page .video-library-section .section-header p {
  margin: 0;
  color: var(--theme-muted) !important;
  font-family: var(--theme-font) !important;
  font-size: var(--theme-text-sm) !important;
  line-height: 1.6 !important;
}

body.student-page.dynamic-course-page .video-card-link:focus-visible {
  outline: var(--theme-focus-ring);
  outline-offset: 4px;
  border-radius: var(--theme-radius);
}

body.student-page.dynamic-course-page .video-card {
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow-sm);
  transition: transform var(--theme-transition), border-color var(--theme-transition), box-shadow var(--theme-transition);
}

body.student-page.dynamic-course-page .video-card:hover {
  transform: translateY(-2px);
  border-color: var(--theme-primary);
  box-shadow: var(--theme-shadow-lg);
}

body.student-page.dynamic-course-page .thumbnail-container {
  background: linear-gradient(135deg, #17233a, #263b5b);
}

body.student-page.dynamic-course-page .thumbnail-fallback { color: rgb(255 255 255 / 55%); }
body.student-page.dynamic-course-page .video-card:hover .thumbnail-container img { transform: scale(1.03); }
body.student-page.dynamic-course-page .play-overlay { background: rgb(15 23 42 / 32%); }
body.student-page.dynamic-course-page .duration-badge { border-radius: 6px; }

body.student-page.dynamic-course-page .video-card-body {
  padding: var(--theme-space-2);
}

body.student-page.dynamic-course-page .video-title {
  margin: 0 0 var(--theme-space-1);
  color: var(--theme-text) !important;
  font-family: var(--theme-font) !important;
  font-size: var(--theme-text-base) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

body.student-page.dynamic-course-page .video-card:hover .video-title { color: var(--theme-primary) !important; }

body.student-page.dynamic-course-page .video-meta {
  color: var(--theme-muted);
  font-family: var(--theme-font);
  font-size: var(--theme-text-xs);
  line-height: 1.5;
}

body.student-page.dynamic-course-page .video-meta i { color: var(--theme-secondary); }

@media (max-width: 767.98px) {
  body.student-page.dynamic-course-page .course-hero-section { padding: var(--theme-space-4) 0; }
  body.student-page.dynamic-course-page .course-details-card { margin-top: 0; padding: var(--theme-space-3); }
  body.student-page.dynamic-course-page .meta-pill { flex-basis: 100%; }
  body.student-page.dynamic-course-page .video-card-body { padding: var(--theme-space-2); }
}

@media (prefers-reduced-motion: reduce) {
  body.student-page.dynamic-course-page .video-card:hover,
  body.student-page.dynamic-course-page .btn-enroll-hero:hover { transform: none; }
}

/* My Courses: shared typography and enrolled course library. */
body.student-page.my-courses-page {
  --font-body: var(--theme-font);
  --font-heading: var(--theme-font);
  background: var(--theme-bg) !important;
  color: var(--theme-text);
  font-family: var(--theme-font);
}

body.student-page.my-courses-page .courses-page-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--theme-space-4) var(--theme-space-2) var(--theme-space-8);
}

body.student-page.my-courses-page .courses-page-shell::before { content: none; }

body.student-page.my-courses-page .course-list-heading {
  margin: 0 0 var(--theme-space-4);
  padding: var(--theme-space-4);
  border: 1px solid var(--theme-border);
  border-top: 3px solid var(--theme-primary);
  border-radius: var(--theme-radius);
  background: linear-gradient(120deg, var(--theme-primary-soft), var(--theme-surface));
  box-shadow: var(--theme-shadow-sm);
}

body.student-page.my-courses-page .my-courses-heading-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--theme-space-2);
  margin-bottom: var(--theme-space-1);
}

body.student-page.my-courses-page .course-list-heading h2 {
  margin: 0;
  color: var(--theme-text) !important;
  font-family: var(--theme-font) !important;
  font-size: var(--theme-text-xl) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em;
}

body.student-page.my-courses-page .courses-page-shell p {
  color: var(--theme-muted) !important;
  font-family: var(--theme-font) !important;
  font-size: var(--theme-text-sm) !important;
  line-height: 1.6 !important;
}

body.student-page.my-courses-page .course-list-heading p { margin: 0; }

body.student-page.my-courses-page .course-count-pill,
body.student-page.my-courses-page .course-code-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
  color: var(--theme-primary-active);
  font-family: var(--theme-font);
  font-size: var(--theme-text-xs);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
}

body.student-page.my-courses-page .course-code-badge { background: var(--theme-primary-soft); }

body.student-page.my-courses-page #courseContainer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--theme-space-3);
  margin: 0;
}

body.student-page.my-courses-page #courseContainer > div {
  min-width: 0;
  margin-bottom: 0 !important;
}

body.student-page.my-courses-page #courseContainer > .col-12 { grid-column: 1 / -1; }

body.student-page.my-courses-page .student-course-card {
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow-sm);
  transition: transform var(--theme-transition), border-color var(--theme-transition), box-shadow var(--theme-transition);
}

body.student-page.my-courses-page .student-course-card:hover {
  transform: translateY(-2px);
  border-color: var(--theme-primary);
  box-shadow: var(--theme-shadow-lg);
}

body.student-page.my-courses-page .student-course-image {
  height: 160px;
  background: linear-gradient(135deg, var(--theme-primary-active), var(--theme-primary));
}

body.student-page.my-courses-page .student-course-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--theme-transition);
}

body.student-page.my-courses-page .course-image-label {
  left: var(--theme-space-2);
  bottom: var(--theme-space-2);
  font-family: var(--theme-font);
  font-size: var(--theme-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}

body.student-page.my-courses-page .student-course-body { padding: var(--theme-space-2); }

body.student-page.my-courses-page .student-course-title {
  min-height: 0;
  margin: var(--theme-space-1) 0 var(--theme-space-1);
  color: var(--theme-text) !important;
  font-family: var(--theme-font) !important;
  font-size: var(--theme-text-base) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
}

body.student-page.my-courses-page .student-course-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 var(--theme-space-2);
}

body.student-page.my-courses-page .student-course-card .continue-learning {
  min-height: 44px;
  padding: var(--theme-space-1) var(--theme-space-2);
  border: 1px solid var(--theme-primary);
  border-radius: var(--theme-radius);
  background: var(--theme-primary) !important;
  color: var(--theme-surface) !important;
  font-family: var(--theme-font);
  font-size: var(--theme-text-sm);
  font-weight: 600;
  line-height: 1.5;
  transition: background var(--theme-transition), border-color var(--theme-transition);
}

body.student-page.my-courses-page .student-course-card .continue-learning:hover {
  border-color: var(--theme-primary-hover);
  background: var(--theme-primary-hover) !important;
  box-shadow: var(--theme-shadow-sm);
}

body.student-page.my-courses-page .course-state {
  padding: var(--theme-space-6) var(--theme-space-3);
  border-color: var(--theme-border);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
}

body.student-page.my-courses-page .course-state h3 {
  color: var(--theme-text) !important;
  font-family: var(--theme-font) !important;
  font-size: var(--theme-text-lg) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

body.student-page.my-courses-page .course-skeleton { border-radius: var(--theme-radius); }

@media (max-width: 991.98px) {
  body.student-page.my-courses-page #courseContainer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  body.student-page.my-courses-page .courses-page-shell { padding-top: var(--theme-space-3); }
  body.student-page.my-courses-page .course-list-heading { padding: var(--theme-space-3); }
  body.student-page.my-courses-page #courseContainer { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  body.student-page.my-courses-page .student-course-card:hover,
  body.student-page.my-courses-page .student-course-card:hover .student-course-image img { transform: none; }
  body.student-page.my-courses-page .course-skeleton { animation: none; }
}

/* Compact catalog cards: keep metadata together instead of stretching gaps. */
body.student-page.course-catalog-page #courseContainer .catalog-course-card {
  cursor: pointer;
  overflow: hidden;
  background: var(--theme-surface);
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius);
  box-shadow: var(--theme-shadow-sm) !important;
  transition: transform var(--theme-transition), border-color var(--theme-transition), box-shadow var(--theme-transition);
}

body.student-page.course-catalog-page #courseContainer .catalog-course-card:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1 !important;
  box-shadow: var(--theme-shadow-lg) !important;
}

body.student-page.course-catalog-page .catalog-course-image {
  position: relative;
  height: 168px;
  overflow: hidden;
  background: var(--theme-bg);
}

body.student-page.course-catalog-page #courseContainer .catalog-course-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  background: var(--theme-bg);
}

body.student-page.course-catalog-page .catalog-course-featured { position: absolute; top: 8px; right: 8px; }

body.student-page.course-catalog-page .catalog-featured-badge {
  padding: 6px 8px;
  border: 1px solid var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-muted);
  font-size: var(--theme-text-xs);
}

body.student-page.course-catalog-page #courseContainer .catalog-course-body { padding: var(--theme-space-2); }

body.student-page.course-catalog-page #courseContainer .catalog-course-body .card-title {
  margin-bottom: var(--theme-space-1) !important;
  color: var(--theme-text) !important;
  font-size: var(--theme-text-base) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
}

body.student-page.course-catalog-page .catalog-course-spacer { margin: 0 !important; }
body.student-page.course-catalog-page .catalog-course-details { margin-top: 0 !important; }
body.student-page.course-catalog-page .catalog-course-duration { margin-bottom: 0 !important; }

body.student-page.course-catalog-page .catalog-course-details hr {
  margin: var(--theme-space-1) 0;
  border-color: var(--theme-border);
}

body.student-page.course-catalog-page .catalog-course-details span {
  color: var(--theme-muted);
  font-size: var(--theme-text-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

body.student-page.course-catalog-page .catalog-course-details i { color: var(--theme-muted); font-size: var(--theme-text-base); }

body.student-page.course-catalog-page #courseContainer .catalog-course-action {
  flex-shrink: 0;
  min-width: 40px;
  min-height: 40px;
  margin-left: var(--theme-space-1);
  padding: 8px;
  border-radius: var(--theme-radius);
  background: var(--theme-primary) !important;
  color: var(--theme-surface) !important;
}

body.student-page.course-catalog-page #courseContainer .catalog-course-action i { color: inherit; }
body.student-page.course-catalog-page #courseContainer .catalog-course-action:hover { background: var(--theme-primary-hover) !important; }

@media (prefers-reduced-motion: reduce) {
  body.student-page.course-catalog-page #courseContainer .catalog-course-card:hover { transform: none; }
}

/* Keep project identifiers available to existing scripts, hidden in the UI. */
body.student-page.student-project-system-page .project-id-label {
  display: none !important;
}

/* Documentation uses compact list rows, independent of video card sizing. */
body.student-page.resource-theme .resource-item-number {
  display: none !important;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .docs-card {
  min-height: 0;
  height: auto;
  padding: 12px var(--theme-space-2) !important;
  gap: 12px;
  box-shadow: none !important;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .docs-card .resource-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin: 0;
  font-size: var(--theme-text-base);
}

body.student-page.student-workspace-page.resource-theme #resourcePage .docs-card .resource-card-title {
  margin-bottom: 4px !important;
  font-size: var(--theme-text-sm) !important;
  line-height: 1.4 !important;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .docs-card .resource-meta {
  font-size: var(--theme-text-xs) !important;
  line-height: 1.4 !important;
}

body.student-page.student-workspace-page.resource-theme #resourcePage .docs-card .resource-action {
  min-width: 0;
  min-height: 40px;
  padding: 8px 12px !important;
  font-size: var(--theme-text-xs) !important;
  line-height: 1.4 !important;
}

@media (max-width: 639px) {
  body.student-page.student-workspace-page.resource-theme #resourcePage .docs-card {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px 12px;
  }
}