/* Base styles drawing inspiration from Apple's human interface guidelines */

/* Define Material UI color palette variables. These variables follow
   the default Material UI theme colours and can be referenced
   throughout the stylesheet to maintain a cohesive look and feel.
   Primary: blue; Secondary: purple; Success: green; Warning: yellow;
   Error: red; Background and surface colours to mimic MUI's light theme. */
:root {
  --mui-primary: #1976d2;
  --mui-secondary: #9c27b0;
  --mui-success: #2e7d32;
  --mui-warning: #ed6c02;
  --mui-error: #d32f2f;
  --mui-info: #0288d1;
  --mui-background: #f5f5f5;
  --mui-surface: #ffffff;
  --mui-border: #e0e0e0;

  /* Dark mode palette variables. These will be referenced when the
     document body has the 'dark' class applied. */
  --mui-dark-bg: #1c1c1e;
  --mui-dark-surface: #2c2c2e;
  --mui-dark-text: #e5e5ea;
  --mui-dark-border: #3a3a3c;
  --ui-surface: #ffffff;
  --ui-surface-alt: #f8fafc;
  --ui-border-subtle: rgba(15, 23, 42, 0.08);
  --ui-shadow: 0 18px 30px rgba(15, 23, 42, 0.08);
  --ui-shadow-soft: 0 8px 18px rgba(15, 23, 42, 0.06);
  --ui-radius-lg: 16px;
  --ui-radius-md: 12px;
  --ui-radius-sm: 8px;
  --ui-text-muted: #6b7280;
  --ui-accent: #007aff;
  --ui-accent-strong: #005ecb;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(1200px circle at 0% 0%, #ffffff 0%, #f6f7fb 35%, #f0f2f8 70%, #f5f5f7 100%);
  color: #1d1d1f;
  /* Flex layout ensures the footer stays at the bottom of the viewport
     without overlapping content. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.guest-hidden {
  display: none !important;
}

[data-role-blocked="true"] {
  display: none !important;
}

body.guest-mode .guest-only {
  display: block;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.guest-announcement-prompt {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: #6e6e73;
}

/* Generic card style for containers such as course info and dashboards */
.card {
  background: linear-gradient(135deg, var(--ui-surface), var(--ui-surface-alt));
  border-radius: var(--ui-radius-lg);
  border: 1px solid var(--ui-border-subtle);
  box-shadow: var(--ui-shadow-soft);
  padding: 1rem;
  margin-bottom: 1rem;
}

header.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

header .brand {
  font-size: 1.25rem;
  font-weight: 600;
}

nav.nav-links button {
  background: transparent;
  border: 1px solid transparent;
  font-size: 0.92rem;
  margin: 0 0.35rem;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

nav.nav-links button:hover,
nav.nav-links button.active {
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.12), rgba(0, 122, 255, 0.2));
  border-color: rgba(0, 122, 255, 0.25);
  color: #0f172a;
  box-shadow: 0 6px 12px rgba(0, 122, 255, 0.12);
}

.user-info {
  font-size: 0.9rem;
  color: #6e6e73;
}

/* Layout for user info and notifications bell */
.header-right {
  display: flex;
  align-items: center;
  /* Add spacing between the notifications bell and user info for a more balanced header */
  gap: 1rem;
}

/* Improve spacing and alignment within the user info area in the header. By default,
   userInfo is just a container; here we ensure its contents are evenly spaced
   and vertically aligned so that the avatar, name, role label and logout
   link appear cohesive. */
#userInfo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#userInfo img {
  margin: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* Ensure the notifications bell icon aligns with the user avatar and text.
   Use flexbox to centre the icon within its bounding box and increase its
   font size slightly for visual balance. */
.notifications {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

/* Style recent discussion cards in the thread sidebar. Each recent
   discussion is displayed as its own card with a compact layout. */
/* Styling for recent discussion cards.  Use a clean white card with a
   coloured border on the left and minimal shadow. */
.recent-discussion-card {
  border-left: 4px solid var(--primary-colour, #007aff);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.6rem;
  background-color: #fdfdfd;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
/* Title within recent discussion cards */
.recent-discussion-card h5 {
  margin: 0 0 0.3rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary, #1d1d1f);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Meta row within recent discussions (author/date and tag).  Align items
   horizontally and allow wrapping on narrow screens. */
.recent-discussion-card .recent-meta-row {
  font-size: 0.75rem;
  color: #666666;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.15rem;
}

/* New layout for recent discussion meta row. When displaying author/date and
   a single tag on the same line, ensure they align neatly and wrap when
   necessary. */
.recent-discussion-card .recent-meta-row {
  font-size: 0.75rem;
  color: #666666;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.15rem;
}

/* Theme toggle button styling. Ensure the icon is visible on light and dark
   backgrounds and provide adequate size and cursor feedback. */
/*
 * Theme toggle button styling. Use a fixed floating position so the
 * button is always visible on the page, regardless of scroll. The
 * button is circular with a contrasting colour in both light and
 * dark modes, making it easy to locate. The larger size and drop
 * shadow also help draw the user's eye to the toggle. The icon
 * itself is controlled via JavaScript (sun/moon characters).
 */
#themeToggle {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1000;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 50%;
  border: none;
  /* Use primary colour as background in light mode */
  background-color: var(--mui-primary);
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
body.dark #themeToggle {
  /* In dark mode, use the dark surface with a lighter icon */
  background-color: var(--mui-dark-surface);
  color: var(--mui-dark-text);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}

/* Style the notifications bell to ensure it is visible on the coloured
   navigation bar. The icon inherits the primary colour of the nav bar,
   so we override it to white. The count badge uses the error colour
   from the Material palette. */
#notificationsBell .fa-bell {
  /* Use a dark colour for the bell icon in light mode so it is visible against
     the light navbar background. In dark mode this will be overridden below. */
  color: #1d1d1f;
}

/* In dark mode the navbar is dark, so the bell icon should be white. */
body.dark #notificationsBell .fa-bell {
  color: #ffffff;
}
#notificationCount {
  background-color: var(--mui-error);
  color: #ffffff;
  padding: 0 4px;
  font-size: 0.65rem;
  border-radius: 999px;
  position: absolute;
  top: -4px;
  right: -4px;
}

/* Notification panel overlay */
.notification-panel {
  position: absolute;
  right: 1rem;
  top: 3rem;
  width: 300px;
  max-height: 400px;
  overflow-y: auto;
  background-color: #ffffff;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  z-index: 300;
}

/* Footer styling: align text centrally and provide subtle colour. The footer
   appears at the bottom of the page and shows copyright information,
   a Powered by Cortal link and the visitor count. */
/* Footer component styled like a card and pinned to the bottom of the page. The
   background and subtle shadow match other cards. The sticky positioning
   ensures it stays near the bottom of the viewport as the content grows. */
/*
 * Footer positioned at the bottom of the viewport. It uses a simple white
 * background and a subtle top border instead of a thick card, making the
 * height minimal. The fixed positioning ensures it remains at the bottom
 * even when the page content is short. To prevent content from being
 * overlapped, the body has extra bottom padding defined below.
 */
/* Footer now sits at the bottom of the flex container. It uses margin-top:auto to push
   itself to the bottom without overlapping the main content. */
.footer {
  margin-top: auto;
  width: 100%;
  background-color: #ffffff;
  border-top: 1px solid #e5e5ea;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  color: #6e6e73;
  text-align: center;
}

/* Floating language toggle button */
.lang-toggle {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid rgba(173, 216, 255, 0.35);
  border-radius: 999px;
  padding: 0.45rem 0.95rem 0.45rem 0.6rem;
  background: linear-gradient(135deg, rgba(64, 156, 255, 0.85), rgba(32, 78, 255, 0.78));
  color: #f7fbff;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 18px 42px rgba(39, 87, 255, 0.32);
  backdrop-filter: blur(18px);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.lang-toggle .lang-toggle-icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  color: #1e4fff;
  font-size: 1rem;
  transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

.lang-toggle .lang-toggle-label {
  font-size: 0.9rem;
}

.lang-toggle:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 58px rgba(39, 87, 255, 0.38);
  border-color: rgba(173, 216, 255, 0.55);
  background: linear-gradient(135deg, rgba(96, 178, 255, 0.92), rgba(48, 112, 255, 0.86));
}

.lang-toggle:hover .lang-toggle-icon {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.05);
}

.lang-toggle:active {
  transform: translateY(0);
  box-shadow: 0 14px 34px rgba(32, 78, 255, 0.32);
}

@media (max-width: 768px) {
  .lang-toggle {
    right: 1rem;
    bottom: 1rem;
    padding: 0.38rem 0.75rem 0.38rem 0.5rem;
    gap: 0.5rem;
  }

  .lang-toggle .lang-toggle-icon {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.9rem;
  }

  .lang-toggle .lang-toggle-label {
    font-size: 0.8rem;
  }
}

/* =========================
   Page and PDF Loading Bars
   A slim cyan bar appears at the very top of the viewport while
   content is loading. The bar's width is animated via JS to give
   visual feedback that the application is busy. A separate bar is
   used for PDF previews and appears within the modal. Both bars
   share the same colour and height.  
========================= */
#pdfProgressBar {
  /* Indeterminate progress bar for PDF loading: fixed at top of the page,
     animated gradient that slides horizontally. */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #ff9500 0%, #ffcc66 50%, #ff9500 100%);
  background-size: 200% 100%;
  animation: pdfProgressAnimation 1s linear infinite;
  z-index: 2000;
}

@keyframes pdfProgressAnimation {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Customise NProgress bar to match the portal theme and hide spinner */
#nprogress {
  /* Ensure the progress bar does not block pointer events */
  pointer-events: none;
}
#nprogress .bar {
  /* Use a cyan colour matching the portal theme */
  background: #00bcd4;
  /* Increase the height slightly for better visibility */
  height: 3px;
  /* Fix the bar at the very top of the viewport so it appears above the navigation */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Raise z-index above the nav bar */
  z-index: 2000;
}
#nprogress .peg {
  box-shadow: 0 0 10px #00bcd4, 0 0 5px #00bcd4;
}
#nprogress .spinner {
  display: none;
}

/* Responsive layout tweaks for small screens */
@media (max-width: 600px) {
  nav.nav-links {
    flex-wrap: wrap;
  }
  nav.nav-links button {
    margin: 0.25rem 0.5rem;
    flex: 1 1 auto;
  }
  .card {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding: 0.75rem;
  }
  .comment-form-card,
  .assignment-list .card,
  .discussion-thread-card {
    padding: 0.75rem;
    margin: 0.5rem 0;
  }

  /* Keep the navigation bar at the top on small screens.  We remove the
     bottom positioning and padding adjustments used previously for a fixed
     bottom nav. The nav remains part of the normal document flow and the
     page content flows underneath it. */
}
.notification-item {
  padding: 0.5rem;
  border-bottom: 1px solid #e5e5ea;
  cursor: pointer;
}
.notification-item:last-child {
  border-bottom: none;
}

/* ------------------------------------------------------------------------- */
/* Dark mode styling
   When the <body> element has the class 'dark', override colours for
   backgrounds, text and surfaces. We reuse custom variables defined at the
   beginning of this file for consistency. */
body.dark {
  background: var(--mui-dark-bg);
  color: var(--mui-dark-text);
}
body.dark header.navbar {
  background-color: rgba(28, 28, 30, 0.9);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
body.dark nav.nav-links button {
  color: var(--mui-dark-text);
  border-color: transparent;
}
body.dark nav.nav-links button:hover,
body.dark nav.nav-links button.active {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(59, 130, 246, 0.3));
  border-color: rgba(96, 165, 250, 0.4);
  color: #f8fafc;
  box-shadow: none;
}
body.dark .btn-grey,
body.dark .btn-secondary {
  background: rgba(148, 163, 184, 0.16);
  border-color: rgba(148, 163, 184, 0.3);
  color: var(--mui-dark-text);
  box-shadow: none;
}
body.dark .btn-grey:hover,
body.dark .btn-secondary:hover {
  background: rgba(148, 163, 184, 0.24);
}
body.dark .btn-outline {
  color: #93c5fd;
  border-color: rgba(147, 197, 253, 0.5);
}
body.dark .btn-outline:hover {
  background: rgba(147, 197, 253, 0.1);
  border-color: rgba(147, 197, 253, 0.7);
  color: #bfdbfe;
}
body.dark .card {
  background-color: var(--mui-dark-surface);
  border-color: var(--mui-dark-border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  color: var(--mui-dark-text);
}
body.dark .thread-view-card,
body.dark .form-card {
  background: var(--mui-dark-surface);
  border-color: var(--mui-dark-border);
  box-shadow: none;
  color: var(--mui-dark-text);
}
body.dark .assignment-card,
body.dark .score-card {
  background: var(--mui-dark-surface);
  border-color: var(--mui-dark-border);
  box-shadow: none;
  color: var(--mui-dark-text);
}
body.dark .exam-result-score-value {
  color: #93c5fd;
}
body.dark .exam-result-grid-item {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(148, 163, 184, 0.25);
}
body.dark .exam-result-grid-value {
  color: var(--mui-dark-text);
}
body.dark .exam-result-stat-label {
  color: rgba(226, 232, 240, 0.7);
}
body.dark .exam-result-review {
  background: rgba(67, 20, 7, 0.4);
  border-color: rgba(249, 115, 22, 0.3);
  color: #fdba74;
}
body.dark .assignment-detail-section {
  background: var(--mui-dark-surface);
  border-color: var(--mui-dark-border);
  box-shadow: none;
  color: var(--mui-dark-text);
}
body.dark .submission-status {
  background: rgba(148, 163, 184, 0.15);
  color: rgba(226, 232, 240, 0.8);
}
body.dark .upload-container {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(148, 163, 184, 0.3);
}
body.dark .upload-label {
  background: #0f172a;
  border-color: rgba(148, 163, 184, 0.35);
  color: #93c5fd;
  box-shadow: none;
}
body.dark .file-name {
  color: rgba(226, 232, 240, 0.7);
}
body.dark .assignment-upload-label {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(148, 163, 184, 0.4);
  color: #93c5fd;
}
body.dark .assignment-upload-label:hover {
  background: rgba(59, 130, 246, 0.2);
}
body.dark .assignment-file-name {
  color: rgba(226, 232, 240, 0.7);
}
body.dark .submission-history-card {
  background: var(--mui-dark-surface);
  border-color: var(--mui-dark-border);
  box-shadow: none;
}
body.dark .submission-history-item {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(148, 163, 184, 0.25);
}
body.dark .submission-history-title {
  color: var(--mui-dark-text);
}
body.dark .submission-history-date {
  color: rgba(226, 232, 240, 0.7);
}
body.dark #studentTimeline {
  background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.22), transparent 60%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.95));
  border-color: rgba(51, 65, 85, 0.65);
}
body.dark .timeline-item {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.95));
  border-color: rgba(51, 65, 85, 0.6);
  box-shadow: 0 16px 26px rgba(2, 6, 23, 0.4);
}
body.dark .timeline-title {
  color: var(--mui-dark-text);
}
body.dark .timeline-meta {
  color: rgba(226, 232, 240, 0.7);
}
body.dark .timeline-type {
  background: rgba(148, 163, 184, 0.2);
  color: rgba(226, 232, 240, 0.85);
}
body.dark .timeline-date i {
  color: rgba(148, 163, 184, 0.8);
}
body.dark .timeline-status {
  background: rgba(148, 163, 184, 0.2);
  color: rgba(226, 232, 240, 0.9);
}
body.dark .timeline-status.submitted {
  background: rgba(59, 130, 246, 0.25);
  color: #93c5fd;
}
body.dark .timeline-status.graded,
body.dark .timeline-status.results-published {
  background: rgba(34, 197, 94, 0.25);
  color: #86efac;
}
body.dark .timeline-status.upcoming {
  background: rgba(249, 115, 22, 0.25);
  color: #fdba74;
}
body.dark .timeline-action {
  border-color: rgba(96, 165, 250, 0.35);
  color: #93c5fd;
  background: rgba(15, 23, 42, 0.65);
}
body.dark .list li {
  background-color: var(--mui-dark-surface);
  border-color: var(--mui-dark-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
body.dark .pending-student,
body.dark .student-item {
  background-color: var(--mui-dark-surface);
  border-color: var(--mui-dark-border);
  box-shadow: none;
}
body.dark .student-tool-card {
  background: var(--mui-dark-surface);
  border-color: var(--mui-dark-border);
  box-shadow: none;
  color: var(--mui-dark-text);
}
body.dark .admin-dashboard-metric,
body.dark .student-dashboard-metric {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.95));
  border-color: rgba(51, 65, 85, 0.6);
  box-shadow: 0 16px 26px rgba(2, 6, 23, 0.45);
  color: var(--mui-dark-text);
}
body.dark .student-dashboard-metric .icon {
  background: rgba(59, 130, 246, 0.22);
  color: #93c5fd;
}
body.dark .student-dashboard-metric .value {
  color: rgba(226, 232, 240, 0.9);
}
body.dark .student-dashboard-metric .label {
  color: rgba(226, 232, 240, 0.7);
}
body.dark .admin-dashboard-metric .icon {
  background: rgba(56, 189, 248, 0.2);
  color: #7dd3fc;
}
body.dark .admin-dashboard-metric .value {
  color: rgba(226, 232, 240, 0.9);
}
body.dark .admin-dashboard-metric .label {
  color: rgba(226, 232, 240, 0.7);
}
body.dark #studentDashboard::before,
body.dark #assignmentStatusDashboard::before,
body.dark #homeOverall::before {
  background: linear-gradient(90deg, #60a5fa, #3b82f6);
}
body.dark .message-item,
body.dark .chat-sidebar .message-item {
  background: var(--mui-dark-surface);
  border-color: var(--mui-dark-border);
  box-shadow: none;
  color: var(--mui-dark-text);
}
body.dark .footer {
  background-color: var(--mui-dark-surface);
  border-top: 1px solid var(--mui-dark-border);
  color: var(--mui-dark-text);
}
body.dark input,
body.dark textarea,
body.dark select {
  background-color: var(--mui-dark-surface);
  color: var(--mui-dark-text);
  border-color: var(--mui-dark-border);
}
body.dark .search-input {
  background-color: var(--mui-dark-surface);
  color: var(--mui-dark-text);
  border-color: var(--mui-dark-border);
}
body.dark .search-bar {
  background: linear-gradient(135deg, #1f2937, #111827);
  border-color: var(--mui-dark-border);
  box-shadow: none;
}
body.dark .search-bar i {
  color: rgba(226, 232, 240, 0.7);
}

/* Progress bar used during file uploads */
.upload-progress-container {
  width: 100%;
  background-color: #e5e5ea;
  border-radius: 4px;
  overflow: hidden;
  height: 6px;
  margin-top: 0.5rem;
}

/*
 * Theme toggle button. Increase the icon size and ensure it is visible on both
 * light and dark backgrounds. The button itself has no background or border
 * because it inherits from the navbar. In dark mode the icon colour switches
 * to the dark theme text colour for contrast.
 */
/*
 * The .theme-toggle class is kept for backward compatibility but contains
 * no styling. All visual properties of the toggle are handled by the
 * #themeToggle selector defined above. Leaving this class empty ensures
 * that having both an id and class on the element will not result in
 * conflicting styles.
 */
.theme-toggle {
  color: inherit;
}
body.dark .theme-toggle {
  color: inherit;
}
.upload-progress-bar {
  height: 100%;
  background-color: var(--mui-primary);
  width: 0%;
  transition: width 0.1s linear;
}

section.page {
  /* Constrain the maximum width for readability while allowing the section
     to scale responsively. A width of 90% keeps the section centered on
     larger displays without leaving excessive blank margins. */
  /* Constrain the maximum width for readability while allowing the section
     to scale responsively. On larger screens the content is limited to
     1000px and centred; on smaller screens margins and padding shrink
     to reduce excessive whitespace. */
  max-width: 1000px;
  width: 90%;
  margin: 1.5rem auto;
  padding: 1.25rem;
  /* Allow page sections to grow and push the footer down. When hidden
     (display:none), they won't affect layout. */
  flex: 1 0 auto;
}

/* Override the constrained width for the grading page so that it can use
   the full viewport width and height. By default, sections are centered
   and limited to 1000px; the grading workspace needs more space for the
   PDF. Apply generous horizontal padding to maintain breathing room. */
#grade-submission-section {
  max-width: none;
  width: 100%;
  margin: 0;
  /* Use box-sizing border-box so horizontal padding doesn't cause overflow */
  box-sizing: border-box;
  /* Reduce horizontal padding to avoid spilling beyond viewport */
  padding: 1rem;
}

/* Increase the height of the three‑column layout to fill more of the
   available viewport. Subtract approx. 8rem (128px) to account for the
   back button and title area. Adjust this value if the header height
   changes. */
.grade-layout {
  height: calc(100vh - 8rem);
}

@media (max-width: 600px) {
  section.page {
    width: 95%;
    margin: 1rem auto;
    padding: 1rem;
  }
}

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Form and controls */
.form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.form label {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.form input,
.form textarea,
.form select {
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  background: #ffffff;
  color: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.form input:focus,
.form textarea:focus,
.form select:focus {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

.primary-btn {
  align-self: flex-start;
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 122, 255, 0.3);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.primary-btn:hover {
  background-color: #005ecb;
  box-shadow: 0 3px 6px rgba(0, 122, 255, 0.4);
}

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

.list li {
  padding: 0.75rem;
  background: linear-gradient(135deg, var(--ui-surface), var(--ui-surface-alt));
  border-radius: var(--ui-radius-md);
  border: 1px solid var(--ui-border-subtle);
  box-shadow: var(--ui-shadow-soft);
  margin-bottom: 0.5rem;
  position: relative;
}

.list li h4 {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
}

.list li p {
  margin: 0;
  font-size: 0.9rem;
  color: #424245;
}

/* Assignment card styles */
.assignment-card {
  background: linear-gradient(135deg, var(--ui-surface), var(--ui-surface-alt));
  border-radius: var(--ui-radius-lg);
  border: 1px solid var(--ui-border-subtle);
  box-shadow: var(--ui-shadow-soft);
  padding: 1rem;
  margin-bottom: 1rem;
  /* Ensure assignment cards stack their content vertically so the details
     come first, followed by the action row. This override applies
     regardless of earlier definitions. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.assignment-card h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
}

.assignment-card .meta {
  font-size: 0.75rem;
  color: #6e6e73;
  margin-bottom: 0.5rem;
}

.assignment-card p.description {
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  color: #3a3a3c;
}

.assignment-card .actions {
  /* The actions container holds the buttons. Place them in a horizontal
     row aligned to the right. Remove default vertical alignment. */
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 0.1rem;
  margin-top: 0.75rem;
}

.assignment-card-actions {
  align-items: center;
}

.assignment-action-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  width: 100%;
}

.assignment-card .actions button,
.assignment-card .actions .btn-blue,
.assignment-card .actions .btn-green,
.assignment-card .actions .btn-red,
.assignment-card .actions .btn-grey,
.assignment-card .actions .btn-secondary,
.assignment-card .actions .btn-outline {
  white-space: nowrap;
}

.assignment-card .actions input[type="file"] {
  /* Hide the native file input to avoid double choose‑file buttons. The
     custom upload row renders its own label and file name. */
  display: none;
}

/* Download link for assignment PDF */
.assignment-card a.pdf-link {
  font-size: 0.9rem;
  color: #007aff;
  text-decoration: none;
  margin-bottom: 0.5rem;
  display: inline-block;
}

/* Admin invitation code setting styles */
#inviteCodeSetting form {
  margin-top: 0.5rem;
}

/* Modal styles for grading */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200;
}

.modal-content {
  background-color: #fff;
  padding: 1rem;
  border-radius: 10px;
  /* Increase modal size for grading interface to give more breathing room */
  width: 95%;
  max-width: 1200px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.modal-header h3 {
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6e6e73;
}

/* PDF preview and annotation */
.pdf-container {
  position: relative;
  width: 100%;
  height: 70vh;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  /* Allow the PDF preview area to scroll when the document exceeds the container
     height. Using auto displays scrollbars only when needed. */
  overflow: auto;
}

.pdf-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.pdf-annotation-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.grade-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.grade-form textarea {
  height: 80px;
}

.resource-list .resource-item,
.exam-list .exam-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 0.5rem;
}

.resource-item a {
  color: #007aff;
  text-decoration: none;
}

/* Resource cards: similar to assignment cards but simpler */
.resource-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  margin-bottom: 0.75rem;
}
.resource-card h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
}

/* Exam cards: present exam information in a standout calendar layout. */
.exam-card {
  display: flex;
  flex-wrap: wrap;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 0.75rem;
  overflow: hidden;
}

/* Left portion containing a mini calendar */
.exam-calendar {
  flex: 0 0 200px;
  background-color: #f5f5f7;
  border-right: 1px solid #e5e5ea;
  padding: 0.5rem;
}
.calendar-heading {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #1c1c1e;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
  font-size: 0.75rem;
  text-align: center;
  color: #6e6e73;
}
.calendar-cell {
  padding: 0.2rem 0;
  border-radius: 50%;
}
.calendar-cell-header {
  font-weight: 600;
  color: #8e8e93;
}
.exam-day {
  background-color: #ff3b30;
  color: #ffffff;
  border-radius: 50%;
}

/* Right portion containing details */
.exam-details {
  flex: 1;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.exam-details h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1c1c1e;
}
.exam-detail-row {
  font-size: 0.85rem;
  color: #1c1c1e;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.exam-detail-row i {
  color: #6e6e73;
}

.exam-item .meta {
  font-size: 0.8rem;
  color: #6e6e73;
}

/* Upload container for assignment submissions. Mimics Apple's file management aesthetic. */
.upload-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0.35rem;
  border-radius: 12px;
  background: #f5f7fb;
  border: 1px dashed rgba(15, 23, 42, 0.15);
}
.upload-container input[type="file"] {
  display: none;
}
.upload-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  cursor: pointer;
  color: #1d4ed8;
  font-size: 0.9rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}
.upload-label:hover {
  background-color: #f2f4f8;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
}
.file-name {
  font-size: 0.85rem;
  color: var(--ui-text-muted);
  min-width: 0;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assignment-upload-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.assignment-upload-label {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  background: #f8fafc;
  color: #1d4ed8;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.assignment-upload-label:hover {
  background: #eef2ff;
  border-color: rgba(29, 78, 216, 0.35);
}

.assignment-file-name {
  font-size: 0.85rem;
  color: var(--ui-text-muted);
  min-width: 0;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assignment-upload-row .assignment-upload-submit {
  margin-left: auto;
  white-space: nowrap;
}

.assignment-preview-btn,
.feedback-action-btn {
  margin-top: 0.5rem;
}

/* Hide native file inputs inside assignment cards to prevent duplicate Choose File buttons. We rely on custom labels instead. */
.assignment-card input[type="file"] {
  display: none;
}

/* Detailed section styling for assignment pages and other detailed views */
.assignment-detail-section {
  background: #ffffff;
  border-radius: var(--ui-radius-lg);
  border: 1px solid #e2e8f0;
  box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
  padding: 1.1rem 1.2rem;
  margin-top: 1rem;
}

.assignment-detail-section h4 {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.assignment-submission-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.submission-status {
  font-size: 0.85rem;
  color: var(--ui-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  width: fit-content;
}

.grade-feedback-card {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.submission-history-card {
  margin-top: 1rem;
  background: #ffffff;
  border-radius: var(--ui-radius-lg);
  border: 1px solid #e2e8f0;
  box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
  padding: 1rem 1.2rem;
}

.submission-history-card h4 {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.submission-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.submission-history-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 0.7rem 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: #ffffff;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06);
}

.submission-history-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.submission-history-title {
  font-weight: 600;
  color: #0f172a;
}

.submission-history-date {
  font-size: 0.8rem;
  color: var(--ui-text-muted);
}

.submission-history-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.assignment-upload-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.assignment-upload-inline .upload-progress-container {
  min-width: 160px;
}

#studentTimeline {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: 0 18px 28px rgba(15, 23, 42, 0.08);
}

.student-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 1rem;
  padding-left: 1.75rem;
}


.timeline-item {
  display: flex;
  gap: 0.9rem;
  padding: 1rem 1.2rem;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
}

.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 0.45rem;
  background: #60a5fa;
  box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.12);
  flex-shrink: 0;
}

.timeline-item.timeline-exam .timeline-dot {
  background: #fb923c;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.2);
}

.timeline-content {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
}

.timeline-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.timeline-title {
  font-weight: 600;
  color: #0f172a;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 70%;
}

.timeline-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  font-size: 0.78rem;
  color: var(--ui-text-muted);
  letter-spacing: 0.01em;
}

.timeline-type {
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
}

.timeline-type-assignment {
  background: rgba(59, 130, 246, 0.15);
  color: #1d4ed8;
}

.timeline-type-exam {
  background: rgba(249, 115, 22, 0.18);
  color: #c2410c;
}

.timeline-date i {
  margin-right: 0.35rem;
  color: #64748b;
}

.timeline-status {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
}

.timeline-status.submitted {
  background: rgba(59, 130, 246, 0.15);
  color: #1d4ed8;
}

.timeline-status.graded,
.timeline-status.results-published {
  background: rgba(34, 197, 94, 0.18);
  color: #15803d;
}

.timeline-status.unsubmitted,
.timeline-status.awaiting-results {
  background: rgba(148, 163, 184, 0.2);
  color: #475569;
}

.timeline-status.upcoming {
  background: rgba(249, 115, 22, 0.2);
  color: #c2410c;
}

.timeline-action {
  font-size: 0.8rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #2563eb;
  background: #ffffff;
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.timeline-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 16px rgba(15, 23, 42, 0.12);
  border-color: rgba(37, 99, 235, 0.6);
}

.timeline-action i {
  margin-right: 0.35rem;
}

.pdf-diff-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.pdf-diff-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pdf-diff-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ui-text-muted);
}

/* Controls for PDF viewer in grading interface */
.pdf-viewer-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.pdf-viewer-controls button {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  background-color: #e5e5ea;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  color: #1d1d1f;
  transition: background-color 0.2s ease;
}
.pdf-viewer-controls button:hover {
  background-color: #d1d1d6;
}
.pdf-viewer-controls .page-info {
  font-size: 0.8rem;
  color: #6e6e73;
  margin-left: 0.5rem;
}

/* Annotation toolbar for grading submissions.  Arrange items in a row and
   allow the text input to take up remaining space. Buttons use the same
   styling as other buttons. */
.annot-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.annot-toolbar button {
  background: #ffffff;
  color: #1d4ed8;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  box-shadow: none;
}
.annot-toolbar button.active {
  background: linear-gradient(135deg, #1d4ed8, #007aff);
  color: #ffffff;
  border-color: transparent;
  opacity: 1;
  box-shadow: 0 12px 20px rgba(0, 122, 255, 0.25);
}
.annot-toolbar input[type="text"] {
  padding: 0.25rem 0.5rem;
  border: 1px solid #d1d1d6;
  border-radius: 4px;
  font-size: 0.8rem;
  flex: 1;
}

/* Captcha input area used for thread and comment submissions */
.captcha-container {
  display: flex;
  align-items: center;
  margin: 0.5rem 0;
  flex-wrap: wrap;
}
.captcha-container img {
  height: 40px;
  margin-right: 0.5rem;
  border: 1px solid #d1d1d6;
  border-radius: 4px;
}
.captcha-container input[type="text"] {
  padding: 0.25rem 0.5rem;
  border: 1px solid #d1d1d6;
  border-radius: 4px;
  font-size: 0.8rem;
  flex: 1;
  margin-right: 0.5rem;
}
.captcha-container .captcha-refresh {
  background: none;
  border: none;
  color: #007aff;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

/* Tag badges shown on discussion cards and thread pages */
.user-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  margin-right: 0.35rem;
  margin-bottom: 0.25rem;
  font-size: 0.72rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Tag selection options in the new thread form */
.tag-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0 0.75rem 0;
}
/* Base styling for individual tag tokens in forms and edit controls.  These
   tokens will be interactive when used for selecting categories.  The
   inactive state is grey; active colours are applied inline via JS. */
.tag-option,
.tag-toggle {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  border: 1px solid rgba(15, 23, 42, 0.1);
}

/* Default inactive appearance: grey text on light background */
.tag-toggle.inactive,
.tag-option.inactive {
  color: #6b7280;
  background-color: #f2f4f8;
}

/* Remove default margin for obsolete checkbox inputs; checkboxes are no
   longer used for tag toggles. */
.tag-option input {
  display: none;
}

/* Container row for tags in thread cards and pages */
.tags-row {
  margin-top: 0.25rem;
}

/* Tag filter row displayed under the discussion search bar.  Each tag acts
   as a toggle filter; active tags will be styled inline via JavaScript. */
.tag-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}
.tag-filter {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  border: 1px solid rgba(15, 23, 42, 0.1);
  color: #6b7280;
  background-color: #f2f4f8;
}
/* Status messages for tag and category filters.  Use flex to align icons
   with text and add spacing below for breathing room. */
.tag-filter-status,
.category-filter-status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: #666666;
  margin-bottom: 0.75rem;
}

/* Category filter row for resources: same layout as tag filter row */
.category-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}
.category-filter {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  border: 1px solid rgba(15, 23, 42, 0.1);
  color: #6b7280;
  background-color: #f2f4f8;
}

/* Status tags used for pinned and locked flags */
.status-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  /* Reset default margins; margins will be applied inline where needed */
  margin: 0;
  font-size: 0.72rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

/* When multiple status tags appear sequentially, add spacing between them. This ensures
   tags like 'Pin' and 'Lock' do not run together. */
.status-tag + .status-tag {
  margin-left: 0.35rem;
}

/* Override default colours for pinned and locked tags used outside the dynamic
   JavaScript styling (e.g. thread list actions).  Align the colours with
   the primary and neutral colours used elsewhere. */
/* Colours for pinned and locked tags. Pinned uses orange; locked uses red. */
.pinned-tag {
  color: #ff9500;
  background-color: rgba(255, 149, 0, 0.15);
}

.locked-tag {
  color: #ff3b30;
  background-color: rgba(255, 59, 48, 0.15);
}

.inactive {
  opacity: 0.6;
}

/* Label to indicate TA/admin authors in discussions */
.author-label {
  font-size: 0.75rem;
  color: #ff3b30;
  background-color: #ffecec;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  margin-left: 0.35rem;
}

/* Discussion home panel styling */
.discussion-home-panel {
  margin-top: 2rem;
}
.discussion-home-panel .thread-card {
  background: #ffffff;
  border-radius: var(--ui-radius-lg);
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.08);
  padding: 1rem 1.1rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.discussion-home-panel .thread-card h4 {
  margin: 0 0 0.25rem 0;
  /* Reduce the heading size in discussion cards to make content less
     visually heavy. A slightly smaller font results in a more compact
     discussion list without sacrificing readability. */
  font-size: 0.9rem;
}
.discussion-home-panel .thread-card .meta {
  /* Reduce metadata font size for discussion cards to maintain a clear
     visual hierarchy. */
  font-size: 0.75rem;
  color: #6e6e73;
}
.discussion-home-panel .thread-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 26px rgba(15, 23, 42, 0.12);
}

/* Discussion list page: reuse the same card styling as the home discussion panel */
.discussion-list .thread-card {
  background: #ffffff;
  border-radius: var(--ui-radius-lg);
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.08);
  padding: 1rem 1.1rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.discussion-list .thread-card h4 {
  margin: 0 0 0.25rem 0;
  font-size: 0.9rem;
}
.discussion-list .thread-card .meta {
  font-size: 0.75rem;
  color: #6e6e73;
}

.discussion-home-panel .thread-card .meta,
.discussion-list .thread-card .meta,
.thread-view-card .meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
}

.discussion-home-panel .thread-card .meta i,
.discussion-list .thread-card .meta i,
.thread-view-card .meta i,
.comment-item .comment-meta i {
  color: #94a3b8;
}

.tags-inline,
.tags-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.tags-inline .status-tag,
.tags-row .status-tag {
  margin-left: 0;
}
.discussion-list .thread-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 26px rgba(15, 23, 42, 0.12);
}

/* Comment card styling in thread pages */
.comment-item {
  background: #ffffff;
  border-radius: var(--ui-radius-md);
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
  padding: 0.9rem 1rem;
  margin-bottom: 0.5rem;
  position: relative;

  /* Increase overall line spacing within comments to improve readability.
     Applying line-height on the card ensures that paragraphs rendered
     from Markdown/HTML have sufficient vertical spacing without affecting
     metadata or action rows (which set their own font-size/spacing). */
  line-height: 1.5;
}

/* Temporary highlight for a comment when navigated to via notification. This
   draws the user's attention to the comment. The highlight fades after a
   couple seconds via JavaScript removing the class. */
.comment-item.highlighted {
  background-color: rgba(255, 235, 59, 0.3);
  transition: background-color 0.5s ease;
}
.comment-item .comment-meta {
  font-size: 0.8rem;
  color: #6e6e73;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
}
.comment-item .comment-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
  gap: 0.5rem;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.comment-item .comment-actions button {
  white-space: nowrap;
}

/* Improve readability of thread content by increasing the default line
   spacing within thread bodies. This applies to all text rendered from
   Markdown or HTML when viewing a discussion thread. */
.thread-body {
  line-height: 1.5;
  /* Reduce the default font size for thread content to prevent text from
     appearing overly large relative to other page elements. The base
     document font is 1rem; set to 0.95rem here for slightly smaller
     content. */
  font-size: 0.98rem;
  color: #1f2937;
}

/*
 * Quill font classes
 *
 * To ensure that font selections from the editor's font dropdown are
 * rendered correctly, define font-family rules for each whitelisted font
 * identifier. These classes are applied by Quill to text runs when a
 * particular font is chosen. Without corresponding CSS, selecting a font
 * has no visible effect.
 */
.ql-font-sans-serif {
  font-family: sans-serif;
}
.ql-font-serif {
  font-family: serif;
}
.ql-font-monospace {
  font-family: monospace;
}
.ql-font-arial {
  font-family: Arial, Helvetica, sans-serif;
}
.ql-font-times-new-roman {
  font-family: "Times New Roman", Times, serif;
}

/* Late submission badge displayed on assignments and submission pages. The red
   background and white text emphasise the warning. Used when a student
   submits after the due date or the assignment itself is past due. */
.late-badge {
  display: flex;
  flex-direction: column;
  background-color: #ffecec;
  color: #c42828;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid #ff3b30;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  gap: 0.1rem;
  margin-top: 0.5rem;
}

/* Penalty summary badge for late submissions. A blue background indicates
   informational content, highlighting the conversion from raw grade to final
   grade after applying the late penalty. */
.penalty-badge {
  display: flex;
  flex-direction: column;
  background-color: #eaf4ff;
  color: #004a96;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid #007aff;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  gap: 0.1rem;
  margin-top: 0.5rem;
}

/*
 * Custom two‑line cards for the rich text editor. These cards mirror the
 * styling of the penalty badge but are coloured according to their
 * semantic meaning. Each card consists of two paragraphs: the first line
 * typically contains an icon and a title, and the second line contains
 * explanatory text. Users can edit both lines directly within the editor.
 */
.info-card {
  display: flex;
  flex-direction: column;
  background-color: #eaf4ff;
  color: #004a96;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid #007aff;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  gap: 0.1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.warning-card {
  display: flex;
  flex-direction: column;
  background-color: #fff5f5;
  color: #c53030;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid #ff3b30;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  gap: 0.1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Success card reuses the palette of the existing green card but provides
   a distinct class name for clarity when inserting from the editor. */
.success-card {
  display: flex;
  flex-direction: column;
  background-color: #eafbea;
  color: #1c5f23;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid #34c759;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  gap: 0.1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.note-card {
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  color: #6e6e73;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid #8e8e93;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  gap: 0.1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/*
 * When a notification card is inserted as a <blockquote> element (e.g. via
 * the editor's Insert Card button), remove the browser's default
 * margins on blockquotes. The class-specific styles defined above
 * provide the necessary spacing, so resetting the blockquote margins
 * prevents additional indentation or spacing.
 */
blockquote.info-card,
blockquote.warning-card,
blockquote.success-card,
blockquote.note-card {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Style for the profile bio edit button. Use an inline-flex layout so that
   the Font Awesome icon and text align nicely. The button looks like a
   lightweight link but has a subtle hover effect for better affordance. */
.edit-bio-btn {
  background-color: transparent;
  border: none;
  color: #007aff;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s;
  margin-top: 0.25rem;
}
.edit-bio-btn i {
  font-size: 0.9rem;
}
.edit-bio-btn:hover {
  background-color: rgba(0, 122, 255, 0.12);
}

/* Within each custom notification card (info, warning, success, note), style
   the first and second paragraphs separately. The first line contains the
   icon and title; it should be bold and vertically centred. The second
   line is the body text; use a smaller font size. Remove default
   margins on both paragraphs to eliminate extra spacing. */
.info-card p:first-child,
.warning-card p:first-child,
.success-card p:first-child,
.note-card p:first-child {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}
.info-card p:nth-child(2),
.warning-card p:nth-child(2),
.success-card p:nth-child(2),
.note-card p:nth-child(2) {
  font-size: 0.75rem;
  margin: 0;
}

/* Increase line height within the course information card to 1.5 for
   improved readability. The line-height applies to all descendants so that
   paragraphs and lists inside the card are spaced consistently. */
#courseInfo {
  line-height: 1.5;
}

/* Highlight matched text in search results. Wraps letters or substrings
   that match the search query in a red colour to draw attention. */
.search-highlight {
  color: #d91e18;
  font-weight: bold;
}

/* Generic green card for feedback/comments. Styled similarly to
   late/penalty badges but using the success palette. This class is used
   by createTwoLineCard() when rendering TA feedback or student comments. */
.green-card {
  display: flex;
  flex-direction: column;
  background-color: #eafbea;
  color: #1c5f23;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid #34c759;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  gap: 0.1rem;
  margin-top: 0.5rem;
}

/* -------------------------------------------------------------------------
 * Profile page styling
 *
 * The profile page consists of a large outer container with its own
 * card-like appearance. Inside it sits a smaller information card that
 * resembles an identification/passport document. Role labels are styled
 * consistently with the rest of the site, using blue for students and red
 * for teaching assistants (TAs).
 */

/* Container for the profile page. Applies card styling and spacing. */
.profile-container {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 1rem;
  margin-bottom: 1rem;
}

/* Inner card for personal information. Light background and subtle border
   distinguish it from the outer container. */
/* Profile info card: display user details and avatar side by side. The card
   uses a light background and subtle border. The left column grows to
   occupy available space while the right column holds the avatar. */
.profile-info-card {
  /* Use a white background to match other cards rather than a grey tint */
  background-color: #ffffff;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  /* Provide more breathing room around the content */
  padding: 1rem;
  /* Use flexbox to lay out the avatar and details.  Align items to the
     start of the row and allow wrapping so that long lines don’t force
     the avatar outside the card.  Remove space-between so the avatar
     doesn’t get pushed outside the border on wide screens. */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  /* Fill the available width of the profile container so it aligns with
     the posted threads below and remains left aligned. */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
}
/* Left column inside profile info card */
.profile-info-card .info-details {
  /* Allow the details column to shrink to avoid pushing the avatar outside
     the card. Setting a min-width of 0 prevents overflow by enabling
     text to wrap when necessary. */
  flex: 1 1 auto;
  min-width: 0;
}
/* Style each detail line within the profile info card. Align icons and text
   nicely using flexbox and provide consistent spacing. */
.profile-info-card .info-details p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* Increase vertical spacing and decrease font size for better readability */
  margin: 0.4rem 0;
  line-height: 1.5;
  font-size: 0.9rem;
}
.profile-info-card .info-details p i {
  /* Prevent icons from shrinking when text is long */
  flex-shrink: 0;
}
/* Avatar container inside profile info card. Aligns avatar centrally in the
   available height. */
.profile-info-card .info-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 80px;
}
/* Avatar image styling */
.profile-info-card .profile-avatar-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}
/* Bio container styling; separate it from other paragraphs with margin */
.profile-info-card .bio-container {
  margin-top: 0.5rem;
  /* Match the font size of other details for consistency */
  /* Match the font size of the other details */
  font-size: 0.9rem;
}
/* Button styled as link for editing bio. Uses the primary colour and no
   background or border. */
.btn-link {
  background: none;
  border: none;
  color: var(--primary-colour, #007aff);
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: underline;
  padding: 0;
}
.btn-link:hover {
  color: #005ecb;
}

/* Role labels attached to user names throughout the site. Use color to
   differentiate students (blue) from TAs (red). */
/*
 * Role labels indicating whether a user is a Student or TA. These labels
 * borrow styling cues from the existing author/status tags so that they
 * integrate seamlessly with the rest of the UI. The font size and padding
 * match the `.author-label` and `.status-tag` classes.  Each role uses
 * a tinted background derived from its primary colour to ensure legibility
 * on light backgrounds.
 */
.role-label {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 4px;
  margin-left: 0.35rem;
  text-transform: uppercase;
  line-height: 1;
}
.role-label.student {
  /* Student role: blue text on a light blue tint */
  color: #007aff;
  background-color: #e6f0ff;
}
.role-label.ta {
  /* TA role: red text on a light red tint, consistent with author labels */
  color: #ff3b30;
  background-color: #ffecec;
}

/* Super administrator role: purple text on a light purple tint. This
   colour distinguishes the super admin from regular students and TAs.
   The background is lightened for readability on white backgrounds. */
.role-label.super {
  color: #8e44ad;
  background-color: #f5eaf7;
}

/* Actions on a profile (mute/ban). Space them evenly and align to the end. */
.profile-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* Thread list inside profile page uses the same styling as discussion list. */
.profile-thread-list .thread-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
}

/* Styling for metadata row within profile thread cards. The author/date/comment
   information uses a subdued colour and slightly smaller font to allow the
   thread title to stand out. Tags appended here retain their own colours. */
.profile-thread-list .thread-card .meta {
  color: #6e6e73;
  font-size: 0.85rem;
}

/* Informational card (blue) used for general info messages. */
.info-card {
  display: flex;
  flex-direction: column;
  background-color: #eaf4ff;
  color: #004a96;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid #007aff;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  gap: 0.1rem;
  margin-top: 0.5rem;
}

/* Warning card (yellow) for cautionary messages. */
.warning-card {
  display: flex;
  flex-direction: column;
  background-color: #fff9e6;
  color: #856404;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid #ffc107;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  gap: 0.1rem;
  margin-top: 0.5rem;
}

/* Styling for badge title and content. The title holds the icon and summary,
   while the content line provides details. Use smaller font for content. */
.badge-title {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.badge-content {
  font-size: 0.75rem;
}

/* Grade feedback card styles. Use similar styling to other cards but
   reduce the top margin of headings and ensure elements are spaced
   consistently. */
.grade-feedback-card h3,
.grade-submission-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}

/* Labels inside grade submission cards use icons and should be bold */
.grade-submission-card label {
  font-weight: 600;
  display: block;
}

/* Inputs within the grade submission card occupy full width and have subtle
   styling consistent with other text fields. */
.grade-submission-card input[type="number"],
.grade-submission-card textarea {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
  margin-top: 0.25rem;
  background: #ffffff;
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.06);
}

/* Buttons inside the grade submission card share available space evenly */
.grade-submission-card .btn-red,
.grade-submission-card .btn-blue {
  flex: 1;
}

.manual-grade-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.manual-input,
.manual-textarea {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
  background: #ffffff;
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.06);
}

.manual-textarea {
  resize: vertical;
  min-height: 4.5rem;
}

.manual-placeholder {
  padding: 1rem;
  border-radius: 8px;
  background-color: #f5f5f7;
  color: #6e6e73;
  font-style: italic;
}

.pdf-error-msg {
  padding: 1rem;
  border-radius: 8px;
  background-color: #fff8e6;
  color: #8e6b00;
  line-height: 1.4;
}

.pdf-error-msg a {
  color: #007aff;
  font-weight: 600;
}

/* Card used for thread view body and forms to give consistent rounded box */
.thread-view-card,
.form-card {
  background: linear-gradient(135deg, var(--ui-surface), var(--ui-surface-alt));
  border-radius: var(--ui-radius-lg);
  border: 1px solid var(--ui-border-subtle);
  box-shadow: var(--ui-shadow-soft);
  padding: 1rem;
  margin-bottom: 1rem;
}

/*
 * Custom styling for discussion comment forms.  While form-card provides a
 * generic white card with subtle shadow, the comment-form-card class
 * refines the appearance to make the comment composer feel more integrated
 * with the surrounding UI.  The background is light grey with a border,
 * shadows are removed and form fields are given gentle borders and rounded
 * corners.  This styling applies to all cards used for posting comments
 * within discussion threads and forum modals.
 */
/* Custom styling for discussion comment forms.  We align this card's appearance
   with the new thread form: a clean white background, subtle border and
   consistent padding. */
.comment-form-card {
  background: #ffffff;
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--ui-radius-md);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 1rem;
}
.comment-form-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}
/* Style the reply indicator inside the comment form */
.comment-form-card #replyIndicator {
  color: #6e6e73;
  font-style: italic;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}
/* Textarea and file input styling for comment composer.  Use the same
   dimensions and focus behaviour as generic form controls. */
.comment-form-card textarea,
.comment-form-card input[type="file"] {
  padding: 0.6rem 0.85rem;
  font-size: 1rem;
  border: 1px solid #d1d1d6;
  border-radius: 10px;
  background-color: #ffffff;
  color: inherit;
  outline: none;
  width: 100%;
  transition: border-color 0.2s ease;
}
.comment-form-card textarea:focus,
.comment-form-card input[type="file"]:focus {
  border-color: #007aff;
}
.comment-form-card textarea {
  resize: vertical;
}
.comment-form-card label {
  display: block;
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
  font-weight: 500;
}
.comment-form-card .btn-blue {
  margin-top: 0.75rem;
  align-self: flex-start;
}

/* Small button style for actions inside comments */
.small-btn {
  background-color: #e5e5ea;
  color: #1d1d1f;
  border: none;
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.small-btn:hover {
  background-color: #d1d1d6;
}

/* Recent assignments panel */
.recent-assignments-panel {
  margin-top: 2rem;
}

/* Two-column layout for assignment cards */
.assignment-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 1rem;
  margin-bottom: 1rem;
  /* Stack details and actions vertically on small cards */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.assignment-card .details {
  flex: 1;
}
.assignment-card .actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: 0;
  margin-top: 1rem;
  justify-content: flex-end;
}

/* ------------------------------------------------------------------ */
/* Student onboarding overlay */

body.onboarding-locked {
  overflow: hidden;
}

.onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, 0.65);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}

.onboarding-card {
  width: min(960px, 95vw);
  max-height: 90vh;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  display: flex;
  overflow: hidden;
}

.onboarding-progress {
  width: 260px;
  background: #f5f5f7;
  padding: 1.5rem;
  border-right: 1px solid #e5e5ea;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.onboarding-steps {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.onboarding-step {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 12px;
  border: 1px solid transparent;
  align-items: flex-start;
}

.onboarding-step .step-index {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e5e5ea;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #1d1d1f;
}

.onboarding-step.active {
  border-color: rgba(0, 122, 255, 0.4);
  background: rgba(0, 122, 255, 0.08);
}

.onboarding-step.complete {
  opacity: 0.6;
}

.onboarding-content {
  flex: 1;
  padding: 1.75rem;
  overflow-y: auto;
}

.onboarding-panel {
  display: none;
}

.onboarding-panel.active {
  display: block;
}

.onboarding-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.onboarding-form input[type="text"],
.onboarding-form input[type="email"],
.onboarding-form input[type="password"],
.onboarding-form input[type="file"] {
  padding: 0.6rem;
  border-radius: 10px;
  border: 1px solid #d1d1d6;
  font-size: 0.95rem;
}

.avatar-preview {
  min-height: 120px;
  border: 1px dashed #d1d1d6;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6e6e73;
  font-size: 0.9rem;
  background: #fafafc;
}

.avatar-preview img {
  max-width: 120px;
  max-height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.onboarding-alert {
  min-height: 1.25rem;
  font-size: 0.9rem;
  color: #0a7b34;
}

.onboarding-alert.error {
  color: #c0392b;
}

@media (max-width: 900px) {
  .onboarding-card {
    flex-direction: column;
    max-height: 95vh;
  }
  .onboarding-progress {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e5e5ea;
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .student-tools-grid {
    grid-template-columns: 1fr;
  }
  .onboarding-overlay {
    padding: 1rem;
  }
  .onboarding-card {
    width: 100%;
    border-radius: 0;
    max-height: 100vh;
  }
}

/* Buttons with different colours */
/* MUI-inspired button styles */
.btn-blue {
  background: linear-gradient(135deg, #1d4ed8, #007aff);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  font-size: 0.95rem;
  box-shadow: 0 10px 18px rgba(0, 122, 255, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}
.btn-blue:hover {
  background: linear-gradient(135deg, #1e40af, #2563eb);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0, 122, 255, 0.3);
}
.btn-green {
  background: linear-gradient(135deg, #22c55e, #34c759);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  font-size: 0.95rem;
  box-shadow: 0 10px 18px rgba(34, 197, 94, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}
.btn-green:hover {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(34, 197, 94, 0.3);
}
.btn-yellow {
  background-color: #ffcc00;
  color: #1d1d1f;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.95rem;
  box-shadow: 0 2px 4px rgba(255, 204, 0, 0.3);
}
.btn-yellow:hover {
  background-color: #e0b000;
}
.btn-red {
  background: linear-gradient(135deg, #ef4444, #ff3b30);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  font-size: 0.95rem;
  box-shadow: 0 10px 18px rgba(239, 68, 68, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}
.btn-red:hover {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(239, 68, 68, 0.3);
}

/* Neutral grey button used for file chooser labels */
.btn-grey {
  background: linear-gradient(135deg, #f3f4f8, #e9ebf2);
  color: #1d1d1f;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}
.btn-grey:hover {
  background: linear-gradient(135deg, #e7e9f1, #dee1ea);
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.1);
}

.btn-secondary {
  background: linear-gradient(135deg, #f3f4f8, #e9ebf2);
  color: #1d1d1f;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  font-size: 0.95rem;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #e7e9f1, #dee1ea);
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.1);
}

.btn-outline {
  background-color: transparent;
  color: #1d4ed8;
  border: 1px solid rgba(29, 78, 216, 0.4);
  border-radius: 10px;
  padding: 0.5rem 0.95rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-outline:hover {
  background: rgba(29, 78, 216, 0.08);
  border-color: rgba(29, 78, 216, 0.6);
  color: #1e40af;
}

.btn-outline:disabled,
.btn-secondary:disabled,
.btn-blue:disabled,
.btn-green:disabled,
.btn-red:disabled,
.btn-grey:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* Exam grade manager layout */

.exam-grade-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.exam-grade-header-info h2 {
  margin: 0;
  font-size: 1.5rem;
}

.exam-grade-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.exam-grade-config {
  margin-bottom: 1.25rem;
}

.exam-grade-main {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.exam-grade-sidebar {
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 120px);
}

.exam-grade-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.exam-grade-student-count {
  font-size: 0.85rem;
  color: #6e6e73;
}

.exam-grade-search {
  display: flex;
  align-items: center;
  border: 1px solid var(--mui-border);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  background-color: var(--mui-surface);
  gap: 0.4rem;
}

.exam-grade-search i {
  color: #7d7d7f;
}

.exam-grade-search input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 0.95rem;
  background: transparent;
  color: inherit;
}

.exam-grade-student-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-right: 0.25rem;
}

.exam-grade-student-empty {
  color: #6e6e73;
  font-size: 0.9rem;
  text-align: center;
  padding: 1rem;
}

.exam-grade-student-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  background-color: #f8f8fb;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.exam-grade-student-item .student-secondary.student-count {
  font-size: 0.75rem;
  color: #4a4a4f;
}

.exam-grade-student-item:hover {
  border-color: rgba(0, 122, 255, 0.3);
  background-color: #eef5ff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.exam-grade-student-item.active {
  border-color: #007aff;
  background-color: rgba(0, 122, 255, 0.12);
  box-shadow: 0 4px 10px rgba(0, 122, 255, 0.15);
}

.exam-grade-student-item .student-primary {
  font-weight: 600;
  font-size: 0.95rem;
  color: #1d1d1f;
}

.exam-grade-student-item .student-secondary {
  font-size: 0.8rem;
  color: #6e6e73;
}

.exam-grade-detail-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.exam-grade-entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.exam-grade-question-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
}

.exam-grade-question-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.exam-grade-question-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #4a4a4f;
}

.exam-grade-question-field input {
  border: 1px solid #d1d1d6;
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  font-size: 0.9rem;
}

.exam-grade-question-empty {
  font-size: 0.9rem;
  color: #6e6e73;
  background-color: #f5f5f7;
  border-radius: 8px;
  padding: 0.75rem;
  text-align: center;
}

.exam-grade-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.exam-grade-table-header h3 {
  margin: 0;
}

#examGradeTableStats {
  font-size: 0.9rem;
  color: #4a4a4f;
}

.exam-grade-chart-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: #6e6e73;
  font-size: 0.95rem;
}

.exam-grade-chart canvas {
  width: 100% !important;
}

.exam-grade-student-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.exam-grade-student-email,
.exam-grade-student-id {
  font-size: 0.8rem;
  color: #6e6e73;
}

.exam-grade-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
}

.exam-grade-breakdown {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.35rem;
  font-size: 0.85rem;
}

.exam-grade-breakdown li {
  background-color: #f5f5f7;
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
}

.exam-grade-stats-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
}

.exam-grade-stats-card,
.exam-grade-chart-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.exam-grade-stats-card h3,
.exam-grade-chart-card h3 {
  margin: 0;
}

.exam-grade-stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}

.exam-grade-stat-item {
  background-color: #f8f8fb;
  border-radius: 10px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.exam-grade-stat-item span:first-child {
  font-size: 0.8rem;
  color: #6e6e73;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.exam-grade-stat-item span:last-child {
  font-size: 1.4rem;
  font-weight: 600;
}

.exam-grade-stats-extremes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.exam-grade-extreme-badge {
  flex: 1 1 160px;
  background-color: rgba(0, 122, 255, 0.08);
  border-radius: 10px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.exam-grade-extreme-badge span:first-child {
  font-size: 0.8rem;
  color: #005ecb;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.exam-grade-extreme-badge span:last-child {
  font-size: 1.3rem;
  font-weight: 600;
  color: #003f8a;
}

/* Admin navigation */
.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  border-bottom: 1px solid #e5e5ea;
  padding-bottom: 0.5rem;
}
.admin-nav button {
  background: none;
  border: none;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 6px;
  color: #007aff;
}
.admin-nav button.active {
  background-color: #007aff;
  color: #fff;
}
.admin-subsection {
  margin-top: 1.5rem;
}

.exam-mail-hero {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
  padding: 1.75rem 2rem;
  border-radius: 22px;
  background: linear-gradient(135deg, #eef2ff, #fdf2f8);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}

.exam-mail-hero__badge {
  min-width: 240px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
  padding: 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
  text-align: center;
}

.exam-mail-hero__badge span {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: #6366f1;
  text-transform: uppercase;
}

.exam-mail-hero__badge strong {
  display: block;
  font-size: 1rem;
  margin: 0.35rem 0;
  color: #0f172a;
}

.exam-mail-hero__badge p {
  margin: 0;
  font-size: 0.85rem;
  color: #6b7280;
}

.exam-mail-checklist {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0 0;
  display: grid;
  gap: 0.5rem;
}

.exam-mail-checklist li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #4b5563;
  font-size: 0.95rem;
}

.exam-mail-checklist i {
  color: #10b981;
}

.exam-mail-layout {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 1.5rem;
  align-items: start;
}

.exam-mail-panel {
  border-radius: 22px;
  padding: 1.75rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.exam-mail-card {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.exam-mail-card .apple-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.exam-mail-card .apple-form-group--stack {
  gap: 0.5rem;
}

.exam-mail-card .apple-form-group label {
  font-weight: 600;
  color: #0f172a;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.exam-mail-card .apple-input,
.exam-mail-card select,
.exam-mail-card textarea {
  border-radius: 12px;
  border: 1px solid #dbe1ff;
  background: linear-gradient(180deg, #fff, #f5f6ff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(79, 70, 229, 0.06);
  font-size: 0.9rem;
  padding: 0.55rem 0.85rem;
  line-height: 1.2;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.exam-mail-card .apple-input:focus,
.exam-mail-card select:focus,
.exam-mail-card textarea:focus {
  border-color: #6366f1;
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.exam-mail-card textarea {
  min-height: 90px;
}

.exam-mail-panel--preview {
  position: sticky;
  top: 84px;
}

.exam-mail-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.exam-mail-section__header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.exam-mail-section__pill {
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 0.8rem;
  font-weight: 600;
}

.exam-mail-section__header h4 {
  margin: 0;
  font-size: 1.05rem;
  color: #0f172a;
}

.exam-mail-section__header p {
  margin: 0.15rem 0 0 0;
  color: #6b7280;
  font-size: 0.9rem;
}

.exam-mail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.exam-mail-problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
}

.problem-max-wrapper label {
  font-size: 0.85rem;
  color: #6e6e73;
  display: block;
  margin-bottom: 0.35rem;
}

.exam-mail-dropzone {
  border: 2px dashed #d1d5db;
  border-radius: 20px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  background: #f9fafb;
}

.exam-mail-dropzone__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #eef2ff;
  display: grid;
  place-items: center;
}

.exam-mail-dropzone__icon i {
  font-size: 1.5rem;
  color: #4f46e5;
}

.exam-mail-dropzone p {
  margin: 0;
  font-weight: 600;
  color: #111827;
}

.exam-mail-dropzone small {
  color: #6b7280;
}

.exam-mail-dropzone:hover {
  border-color: #818cf8;
  background: #eef2ff;
}

.exam-mail-dropzone.has-file {
  border-color: #34d399;
  background: #ecfdf5;
}

.exam-mail-file-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #6b7280;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.2rem 0.8rem;
  background: #eef2ff;
  font-size: 0.8rem;
  color: #4338ca;
}

.pill--ghost {
  background: #f3f4f6;
  color: #4b5563;
}

.exam-mail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.exam-mail-actions--spread {
  justify-content: space-between;
}

.exam-mail-actions .apple-btn {
  border-radius: 999px;
  padding: 0.65rem 1.4rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  background: #fff;
  color: #111827;
}

.exam-mail-actions .apple-btn i {
  font-size: 0.9rem;
}

.exam-mail-actions .apple-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
}

.exam-mail-actions .apple-btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.1);
}

.exam-mail-actions .apple-btn-primary {
  background: linear-gradient(120deg, #6366f1, #8b5cf6);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.exam-mail-actions .apple-btn-primary:hover {
  box-shadow: 0 18px 30px rgba(99, 102, 241, 0.35);
}

.exam-mail-actions .apple-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.exam-mail-preview {
  min-height: 360px;
}

.exam-mail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.exam-mail-meta strong {
  font-size: 1.1rem;
  color: #1d1d1f;
}

.exam-mail-meta span {
  font-size: 0.9rem;
  color: #6e6e73;
}

.exam-mail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.exam-mail-stats-card {
  background: #f5f7fb;
  border-radius: 14px;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.exam-mail-stats-card__value {
  font-size: 1.4rem;
  font-weight: 600;
  color: #0a84ff;
}

.exam-mail-stats-card__label {
  font-size: 0.8rem;
  color: #6e6e73;
  letter-spacing: 0.02em;
}

.exam-mail-histogram {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 1rem 1.25rem;
  background: #f9fafb;
  margin-bottom: 1rem;
}

.exam-mail-histogram__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.75rem;
}

.exam-mail-histogram__header strong {
  font-size: 0.95rem;
  color: #111827;
}

.exam-mail-histogram__header span {
  font-size: 0.8rem;
  color: #6b7280;
}

.exam-mail-histogram__rows {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.exam-mail-histogram__row {
  display: grid;
  grid-template-columns: 120px 1fr 110px;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.85rem;
  color: #4b5563;
}

.exam-mail-histogram__row.is-peak .exam-mail-histogram__bar-fill {
  background: linear-gradient(90deg, #34d399, #10b981);
}

.exam-mail-histogram__label {
  font-weight: 600;
}

.exam-mail-histogram__bar {
  height: 10px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.exam-mail-histogram__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #c7d2fe, #6366f1);
  border-radius: inherit;
  transition: width 0.3s ease;
}

.exam-mail-histogram__value {
  text-align: right;
}

.exam-mail-warning {
  background: #fff5f5;
  border: 1px solid #ffd7d7;
  color: #b00020;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.exam-mail-table-wrapper {
  border: 1px solid #e7e7ec;
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.exam-mail-preview-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
}

.exam-mail-preview-table th,
.exam-mail-preview-table td {
  padding: 0.65rem;
  text-align: left;
  border-bottom: 1px solid #f1f1f4;
  font-size: 0.9rem;
}

.exam-mail-preview-table th {
  background: #f8f8fb;
  font-weight: 600;
  color: #4a4a4a;
}

.exam-mail-footnote {
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: #6e6e73;
  background: #fafafb;
}

.exam-mail-send-result {
  background: #ecfdf3;
  border: 1px solid #c7f2d3;
  color: #15803d;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  font-weight: 600;
}

.exam-mail-failures {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 12px;
  background: #fffaf0;
  border: 1px solid #ffe1b4;
}

.exam-mail-failures ul {
  padding-left: 1.2rem;
  margin: 0.5rem 0 0 0;
}

.exam-mail-failures li {
  font-size: 0.9rem;
  color: #7c5a0b;
}

.exam-mail-empty {
  border: 1px dashed #e5e7eb;
  border-radius: 18px;
  padding: 2rem 1.25rem;
  text-align: center;
  color: #6b7280;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}

.exam-mail-empty i {
  font-size: 1.8rem;
  color: #4338ca;
}

.exam-mail-empty p {
  margin: 0;
  font-weight: 600;
  color: #111827;
}

.exam-mail-empty small {
  font-size: 0.85rem;
}

@media (max-width: 1024px) {
  .exam-mail-layout {
    grid-template-columns: 1fr;
  }
  .exam-mail-panel--preview {
    position: static;
  }
}

@media (max-width: 640px) {
  .exam-mail-hero {
    flex-direction: column;
  }
  .exam-mail-histogram__row {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }
  .exam-mail-histogram__value {
    text-align: left;
  }
  .exam-mail-file-hint {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}

/* Chat layout styles */
.chat-container {
  display: flex;
  height: 400px;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 1rem;
}
.chat-sidebar {
  width: 30%;
  background-color: #f9f9fb;
  border-right: 1px solid #e5e5ea;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
}
.chat-sidebar #conversationList {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 1rem;
}
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
.chat-header {
  padding: 0.5rem;
  border-bottom: 1px solid #e5e5ea;
  font-weight: 600;
}
.chat-messages {
  flex: 1;
  padding: 0.5rem;
  overflow-y: auto;
  background-color: #f9f9fb;
}
.chat-message {
  max-width: 80%;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  word-wrap: break-word;
}
.chat-message.self {
  background-color: #007aff;
  color: #fff;
  margin-left: auto;
  text-align: right;
}
.chat-message.other {
  background-color: #e5e5ea;
  color: #1d1d1f;
}
.chat-input {
  padding: 0.5rem;
  border-top: 1px solid #e5e5ea;
  display: flex;
  gap: 0.5rem;
}
.chat-input textarea {
  flex: 1;
  resize: none;
  border: 1px solid #d1d1d6;
  border-radius: 8px;
  padding: 0.5rem;
  font-size: 0.9rem;
}
.chat-input button {
  align-self: flex-end;
}

/* Progress bars for grade statistics */
.progress-bar {
  width: 100%;
  height: 12px;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.35rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08), 0 10px 18px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.progress {
  height: 100%;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.8), rgba(16, 163, 74, 0.95));
  border-radius: 999px;
  box-shadow: 0 8px 16px rgba(22, 163, 74, 0.25);
  transition: width 0.3s ease;
}

/* Card styling for the scores dashboard */
.score-card {
  background: linear-gradient(135deg, var(--ui-surface), var(--ui-surface-alt));
  border-radius: var(--ui-radius-lg);
  border: 1px solid var(--ui-border-subtle);
  box-shadow: var(--ui-shadow-soft);
  padding: 1rem;
  margin-bottom: 1rem;
}
.score-card .title {
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 0.25rem 0;
}
.score-card .meta {
  font-size: 0.8rem;
  color: #6e6e73;
  margin-bottom: 0.5rem;
}

/* Exam result cards (student view) */
.exam-result-card {
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.exam-result-score {
  text-align: center;
  padding: 2.5rem 2rem;
}

.exam-result-score-value {
  font-size: 3.75rem;
  font-weight: 800;
  color: #1d4ed8;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.exam-result-score-label {
  color: var(--ui-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
}

.exam-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.9rem;
}

.exam-result-grid-item {
  padding: 0.9rem 1rem;
  background: #f4f6fb;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  text-align: center;
}

.exam-result-grid-label {
  font-size: 0.8rem;
  color: var(--ui-text-muted);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.exam-result-grid-value {
  font-weight: 700;
  font-size: 1.15rem;
  color: #0f172a;
}

.exam-result-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}

.exam-result-stat {
  text-align: center;
}

.exam-result-stat-value {
  font-size: 1.6rem;
  font-weight: 700;
}

.exam-result-stat-label {
  font-size: 0.75rem;
  color: var(--ui-text-muted);
  margin-top: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.exam-result-chart {
  height: 300px;
}

.exam-result-review {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 1px solid rgba(234, 88, 12, 0.2);
  color: #9a3412;
}

.exam-result-review-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.exam-result-review-header h4 {
  margin: 0;
  font-size: 1.1rem;
}

.exam-result-review-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Notification page list */
#notificationsList {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#notificationsList .notification-item {
  background: linear-gradient(135deg, #ffffff, #f7f9fc);
  border-radius: var(--ui-radius-lg);
  border: 1px solid var(--ui-border-subtle);
  border-bottom: none;
  box-shadow: var(--ui-shadow-soft);
  padding: 0.95rem 1rem;
  margin-bottom: 0;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
}

#notificationsList .notification-actions {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
}

#notificationsList .notification-delete {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}

#notificationsList .notification-delete:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

#notificationsList .notification-item:hover .notification-delete {
  color: #64748b;
}
#notificationsList .notification-item.unread {
  border-left: 4px solid var(--ui-accent);
  background: linear-gradient(135deg, #eef5ff, #ffffff);
}

#notificationsList .notification-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
  border-color: rgba(0, 122, 255, 0.3);
}

#notificationsList .notification-item:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

#notificationsList .notification-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.98rem;
}

#notificationsList .notification-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ui-accent);
  flex-shrink: 0;
  opacity: 0;
}

#notificationsList .notification-item.unread .notification-dot {
  opacity: 1;
}

#notificationsList .notification-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--ui-text-muted);
}

#notificationsList .notification-meta i {
  color: #94a3b8;
}

#notificationsList .notification-badge {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
}

#notificationsList .notification-badge.assignment {
  background: rgba(59, 130, 246, 0.15);
  color: #1d4ed8;
}

#notificationsList .notification-badge.exam {
  background: rgba(14, 165, 233, 0.15);
  color: #0369a1;
}

#notificationsList .notification-badge.forum {
  background: rgba(16, 185, 129, 0.18);
  color: #047857;
}

#notificationsList .notification-badge.system {
  background: rgba(249, 115, 22, 0.2);
  color: #c2410c;
}

body.dark #notificationsList .notification-item {
  background: linear-gradient(135deg, #111827, #0f172a);
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: none;
}

body.dark #notificationsList .notification-item.unread {
  background: linear-gradient(135deg, #0f172a, #1f2937);
  border-left: 4px solid #60a5fa;
}

body.dark #notificationsList .notification-item:focus {
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.35);
}

body.dark #notificationsList .notification-delete {
  color: rgba(148, 163, 184, 0.85);
}

body.dark #notificationsList .notification-delete:hover {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
}

body.dark #notificationsList .notification-title {
  color: var(--mui-dark-text);
}

body.dark #notificationsList .notification-meta {
  color: rgba(226, 232, 240, 0.7);
}

body.dark #notificationsList .notification-badge {
  background: rgba(148, 163, 184, 0.2);
  color: #e2e8f0;
}

/* Scores section styles */
#scores-section .score-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
#scores-section .score-table th,
#scores-section .score-table td {
  padding: 0.5rem;
  text-align: left;
  border-bottom: 1px solid #e5e5ea;
}
#scores-section .score-table th {
  background-color: #f2f2f7;
  font-weight: 600;
}
#scores-section .score-table tr:hover {
  background-color: #f9f9fb;
}

/* Message list styles */
.message-list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.message-item {
  background: linear-gradient(135deg, var(--ui-surface), var(--ui-surface-alt));
  border-radius: var(--ui-radius-md);
  border: 1px solid var(--ui-border-subtle);
  box-shadow: var(--ui-shadow-soft);
  padding: 0.75rem;
  cursor: pointer;
}
.message-item.unread {
  font-weight: 600;
}
.message-item .meta {
  font-size: 0.8rem;
  color: #6e6e73;
  margin-bottom: 0.25rem;
}

/* Conversation items in chat sidebar */
.chat-sidebar .message-item {
  background: linear-gradient(135deg, var(--ui-surface), var(--ui-surface-alt));
  border-radius: var(--ui-radius-md);
  border: 1px solid var(--ui-border-subtle);
  box-shadow: var(--ui-shadow-soft);
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.message-compose {
  margin-top: 2rem;
}

/* Pending students and student management items */
.pending-student, .student-item {
  background: linear-gradient(135deg, var(--ui-surface), var(--ui-surface-alt));
  border-radius: var(--ui-radius-md);
  border: 1px solid var(--ui-border-subtle);
  box-shadow: var(--ui-shadow-soft);
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.pending-student button, .student-item button {
  margin-left: 0.5rem;
}

.student-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.25rem;
}

.student-tool-card {
  background: linear-gradient(135deg, var(--ui-surface), var(--ui-surface-alt));
  border-radius: var(--ui-radius-lg);
  border: 1px solid var(--ui-border-subtle);
  box-shadow: var(--ui-shadow-soft);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.student-tool-card__header {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}

.eyebrow {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: #8e8e93;
  margin: 0;
}

.admin-hint {
  font-size: 0.85rem;
  color: #6e6e73;
  margin: 0;
}

.admin-hint.warning {
  color: #b00020;
}

.admin-hint.success {
  color: #0a7b34;
}

.admin-hint.error {
  color: #c0392b;
}

.login-helper {
  font-size: 0.85rem;
  color: #6e6e73;
  margin: 0.4rem 0 0.8rem;
}

.student-import-form input[type="file"] {
  width: 100%;
  border: 1px dashed #d1d1d6;
  border-radius: 10px;
  padding: 0.75rem;
  background-color: #f8f8fb;
  font-size: 0.9rem;
  box-sizing: border-box;
}

.student-import-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.loading-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #d1d1d6;
  border-top-color: #007aff;
  animation: spin 0.75s linear infinite;
}

.student-import-summary {
  border: 1px solid #e5e5ea;
  border-radius: 10px;
  padding: 0.75rem;
  font-size: 0.9rem;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.75rem;
  background-color: #fff;
}

.student-import-summary ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

.student-import-summary li {
  margin-bottom: 0.25rem;
}

.student-import-credentials textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #d1d1d6;
  padding: 0.5rem;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: 0.85rem;
  background: #fbfbff;
  box-sizing: border-box;
  display: block;
  max-width: 100%;
  resize: vertical;
}

.student-import-credentials {
  border: 1px solid #e5e5ea;
  border-radius: 10px;
  padding: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.75rem;
  background-color: #fff;
}

.student-import-credentials .credentials-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

.student-selection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.student-selection-summary {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.95rem;
  font-weight: 500;
}

.student-selection-summary strong {
  font-size: 1.35rem;
  color: #111;
}

.student-item.selected {
  border: 1px solid rgba(0, 122, 255, 0.3);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

.student-item .student-select-cell {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.student-select-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.student-item .student-info {
  flex: 1;
}

.student-item .student-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.8rem;
}

.status-tag.role-student {
  color: #007aff;
  background-color: rgba(0, 122, 255, 0.12);
}

.status-tag.role-admin {
  color: #ff9500;
  background-color: rgba(255, 149, 0, 0.15);
}

.status-tag.role-super {
  color: #8e44ad;
  background-color: rgba(142, 68, 173, 0.15);
}

.status-tag.pending {
  color: #b95000;
  background-color: rgba(255, 149, 0, 0.2);
}

.status-tag.muted {
  color: #d35400;
  background-color: rgba(211, 84, 0, 0.2);
}

.status-tag.banned {
  color: #ff3b30;
  background-color: rgba(255, 59, 48, 0.18);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Responsive design */
@media (max-width: 600px) {
  /* Keep the navigation visible on small screens and allow horizontal scrolling */
  nav.nav-links {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 0.5rem;
    width: 100%;
  }
  /* Each nav button should maintain its size and not shrink */
  nav.nav-links button {
    flex: 0 0 auto;
    margin: 0 0.25rem;
  }
  header.navbar {
    /* Keep a horizontal layout on small screens and allow items to wrap if
       necessary. This prevents the navigation bar from collapsing into
       a column and keeps the brand and nav buttons aligned. */
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .user-info {
    margin-left: auto;
    margin-top: 0;
  }
}

@media (max-width: 1100px) {
  .exam-grade-main {
    flex-direction: column;
  }

  .exam-grade-sidebar {
    position: static;
    width: 100%;
    max-height: none;
  }

  .exam-grade-detail-column {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .exam-grade-header {
    flex-direction: column;
    align-items: stretch;
  }

  .exam-grade-header-actions {
    justify-content: flex-start;
  }

  .exam-grade-stats-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .exam-grade-stats-overview {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

/* === Assignment card overrides ===
   Ensure assignment cards stack their content vertically, with the details section
   appearing first and the action buttons aligned to the bottom right. These rules
   override earlier definitions for a consistent layout. */
.assignment-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.assignment-card .details {
  flex: 1;
}
.assignment-card .actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

/* Admin Dashboard metrics styling */
.admin-dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
}

.admin-dashboard-metric {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.08);
  padding: 1rem 1.1rem;
  display: grid;
  gap: 0.4rem;
  justify-items: start;
  position: relative;
  overflow: hidden;
}

.admin-dashboard-metric::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.16), transparent 60%);
  opacity: 0.6;
  pointer-events: none;
}

.admin-dashboard-metric .icon {
  font-size: 1.25rem;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.12);
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-dashboard-metric .value {
  font-size: 1.7rem;
  font-weight: 600;
  color: #0f172a;
}

.admin-dashboard-metric .label {
  font-size: 0.78rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Student Dashboard metrics styling */
.student-dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.9rem;
  margin-top: 0.9rem;
}

.student-dashboard-metric {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.08);
  padding: 1rem 1.1rem;
  display: grid;
  gap: 0.4rem;
  align-content: start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.student-dashboard-metric::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 60%);
  opacity: 0.6;
  pointer-events: none;
}

.student-dashboard-metric .icon {
  font-size: 1.1rem;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.12);
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.student-dashboard-metric .value {
  font-size: 1.7rem;
  font-weight: 600;
  color: #0f172a;
}

.student-dashboard-metric .label {
  font-size: 0.78rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.student-dashboard-metric:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 26px rgba(15, 23, 42, 0.12);
}

#studentDashboard h3,
#assignmentStatusDashboard h3,
#homeOverall h3 {
  margin-top: 0;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #0f172a;
}

#studentDashboard,
#assignmentStatusDashboard,
#homeOverall {
  position: relative;
  overflow: hidden;
}

#studentDashboard::before,
#assignmentStatusDashboard::before,
#homeOverall::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #60a5fa, #2563eb);
}

/* ------------------------------------------------------------------ */
/* Search bar styles with FontAwesome icons */
/* These rules style the search bars used across assignments, resources, */
/* discussions and exam sections. The bar is a flex container with an */
/* icon and an input. */
.search-bar {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  border: 1px solid var(--ui-border-subtle);
  border-radius: 16px;
  padding: 0 0.75rem;
  margin-bottom: 0.75rem;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--ui-shadow);
}

.search-bar i {
  margin-right: 0.5rem;
  color: #7d7d7f;
}

.search-bar input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0.65rem 0;
  font-size: 0.98rem;
  background: transparent;
  color: inherit;
}

.discussion-search-advanced {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem 1rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: var(--ui-radius-lg);
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.08);
}

.discussion-search-advanced .search-advanced-title {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
}

.discussion-search-advanced .search-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.discussion-search-advanced .search-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ui-text-muted);
}

.discussion-search-advanced .search-field {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 12px;
  padding: 0 0.75rem;
  gap: 0.5rem;
  min-height: 42px;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06);
}

.discussion-search-advanced .search-field input {
  width: 100%;
  border: none;
  outline: none;
  padding: 0.5rem 0;
  background: transparent;
  color: inherit;
}

.discussion-search-advanced .search-field i {
  color: #64748b;
  background: #eef2f7;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.discussion-search-advanced .search-field-group--actions {
  align-self: end;
  justify-content: flex-end;
}

.discussion-search-advanced .btn-blue {
  justify-self: start;
  padding: 0.5rem 1.2rem;
}

.review-reason-input {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  padding: 0.65rem 0.8rem;
  background: #ffffff;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  resize: vertical;
}

.review-reason-input:focus {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
  outline: none;
}

body.dark .review-reason-input {
  background: #0f172a;
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: none;
  color: var(--mui-dark-text);
}
body.dark .grade-submission-card input[type="number"],
body.dark .grade-submission-card textarea,
body.dark .manual-input,
body.dark .manual-textarea {
  background: #0f172a;
  border-color: rgba(148, 163, 184, 0.3);
  box-shadow: none;
  color: var(--mui-dark-text);
}

body.dark .discussion-search-advanced {
  background: linear-gradient(135deg, #1f2937, #111827);
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: 0 12px 20px rgba(2, 6, 23, 0.45);
}

body.dark .discussion-search-advanced .search-field {
  background-color: #0f172a;
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: none;
}

body.dark .discussion-search-advanced .search-field i {
  color: var(--mui-dark-text);
  background: rgba(148, 163, 184, 0.2);
}

body.dark .discussion-search-advanced .search-label {
  color: rgba(226, 232, 240, 0.7);
}

.notif-pref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}

.notif-pref-grid label,
.notif-pref-row label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.04);
}

.notif-pref-grid input[type="checkbox"],
.notif-pref-row input[type="checkbox"] {
  accent-color: #007aff;
  transform: scale(1.05);
}

.notif-pref-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 0.5rem;
}

.notif-pref-row input[type="time"] {
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.04);
}

body.dark .notif-pref-grid label,
body.dark .notif-pref-row label {
  background: var(--mui-dark-surface);
  border-color: var(--mui-dark-border);
  box-shadow: none;
}

body.dark .notif-pref-row input[type="time"] {
  background: var(--mui-dark-surface);
  border-color: var(--mui-dark-border);
  color: var(--mui-dark-text);
  box-shadow: none;
}

.resource-versions {
  margin-top: 0.5rem;
  border-top: 1px dashed #d2d2d7;
  padding-top: 0.5rem;
}

.resource-version-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.35rem 0;
  font-size: 0.85rem;
  color: #4b5563;
}

.resource-version-item span {
  flex: 1;
}

.review-card {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  box-shadow: 0 18px 28px rgba(15, 23, 42, 0.08);
  background: linear-gradient(135deg, #ffffff, #f8fafc);
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.review-item {
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.review-item[data-status="approved"] {
  border-left: 4px solid #22c55e;
}

.review-item[data-status="rejected"] {
  border-left: 4px solid #ef4444;
}

.review-item[data-status="pending"] {
  border-left: 4px solid #f59e0b;
}

.review-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: #f3f4f6;
  color: #111827;
}

.review-status-pill.approved {
  background: rgba(34, 197, 94, 0.15);
  color: #15803d;
}

.review-status-pill.rejected {
  background: rgba(239, 68, 68, 0.15);
  color: #b91c1c;
}

.review-status-pill.pending {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}

.review-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  overflow-x: auto;
  padding-bottom: 0.1rem;
  margin-top: 0.2rem;
}

.review-actions button {
  white-space: nowrap;
}

body.dark .review-card {
  background: linear-gradient(135deg, #111827, #0f172a);
  border-color: rgba(148, 163, 184, 0.2);
}

body.dark .review-item {
  background: #0f172a;
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: none;
}

body.dark .discussion-home-panel .thread-card,
body.dark .discussion-list .thread-card,
body.dark .comment-item,
body.dark .sidebar-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.95));
  border-color: rgba(51, 65, 85, 0.6);
  box-shadow: 0 14px 24px rgba(2, 6, 23, 0.45);
  color: var(--mui-dark-text);
}

body.dark .thread-body {
  color: rgba(226, 232, 240, 0.9);
}
body.dark .discussion-home-panel .thread-card .meta,
body.dark .discussion-list .thread-card .meta,
body.dark .thread-view-card .meta,
body.dark .comment-item .comment-meta {
  color: rgba(226, 232, 240, 0.7);
}
body.dark .discussion-home-panel .thread-card .meta i,
body.dark .discussion-list .thread-card .meta i,
body.dark .thread-view-card .meta i,
body.dark .comment-item .comment-meta i {
  color: rgba(148, 163, 184, 0.8);
}
body.dark .status-tag,
body.dark .tag-option,
body.dark .tag-toggle,
body.dark .tag-filter,
body.dark .category-filter {
  border-color: rgba(148, 163, 184, 0.35);
}
body.dark .tag-toggle.inactive,
body.dark .tag-option.inactive,
body.dark .tag-filter,
body.dark .category-filter {
  background-color: rgba(148, 163, 184, 0.18);
  color: rgba(226, 232, 240, 0.7);
}

/* Dark mode variations for the search bar */
body.dark .search-bar {
  background: linear-gradient(135deg, #1f2937, #111827);
  border-color: var(--mui-dark-border);
}

body.dark .search-bar i {
  color: var(--mui-dark-text);
}

/* Pagination controls for assignments and discussions */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  /* Add some breathing space above and below the pagination controls so they
     don't collide with adjacent sections (e.g. the New Thread card). */
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}

.pagination button {
  padding: 0.35rem 0.65rem;
  border: none;
  border-radius: 4px;
  background-color: #f2f2f7;
  color: #007aff;
  font-size: 0.9rem;
  cursor: pointer;
}

.pagination button.active {
  background-color: #007aff;
  color: #ffffff;
  cursor: default;
}

.pagination button.disabled {
  opacity: 0.5;
  cursor: default;
}

/* Ensure meta lines in announcements and home cards are subdued */
#announcementsList .meta,
#homeThreadsList .meta,
#homeAssignmentsList .meta {
  font-size: 0.8rem;
  color: #6e6e73;
}

/* Student Overall Dashboard styles */
#homeOverall {
  background: linear-gradient(135deg, #f8fafc, #ffffff);
  border: 1px solid #e5e7eb;
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.08);
}
#homeOverall h3 {
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}
.stat-card {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  padding: 1rem 1.1rem;
  display: grid;
  gap: 0.35rem;
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.08);
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, var(--stat-glow, rgba(37, 99, 235, 0.18)), transparent 60%);
  opacity: 0.5;
  pointer-events: none;
}
.stat-label {
  font-size: 0.78rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.stat-value {
  font-size: 1.8rem;
  font-weight: 600;
  color: #0f172a;
}
.stat-sub {
  font-size: 0.8rem;
  color: #6b7280;
}
.stat-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.25);
  overflow: hidden;
  margin-top: 0.35rem;
}
.stat-bar-fill {
  height: 100%;
  background: var(--stat-color, #2563eb);
  border-radius: 999px;
  transition: width 0.3s ease;
}

body.dark #homeOverall {
  background: linear-gradient(135deg, #0f172a, #111827);
  border-color: #1f2937;
  box-shadow: 0 18px 30px rgba(2, 6, 23, 0.35);
}
body.dark .stat-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.95));
  border-color: rgba(51, 65, 85, 0.6);
  box-shadow: 0 12px 22px rgba(2, 6, 23, 0.5);
}
body.dark .stat-label {
  color: rgba(226, 232, 240, 0.6);
}
body.dark .stat-value {
  color: rgba(226, 232, 240, 0.95);
}
body.dark .stat-sub {
  color: rgba(226, 232, 240, 0.7);
}
body.dark .stat-bar {
  background: rgba(148, 163, 184, 0.2);
}

/* Stack the dashboard items vertically on small screens for better fit. */
@media (max-width: 600px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .stat-card {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Calendar view styles
   -------------------------------------------------------------------------- */

.calendar-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Style the calendar header bar within the mini calendar card */
#calendar-section .calendar-left .calendar-header {
  background-color: #ff3b30;
  color: #ffffff;
  padding: 0.5rem 0.5rem;
  margin: 0;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Style the month navigation buttons within the calendar header */
#calendar-section .calendar-left .calendar-header button {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 1rem;
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
}

/* Place the grid on a white background inside the card */
#calendar-section .calendar-left #calendarGrid {
  background-color: #ffffff;
  padding: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

/* Use ID selector for the main calendar grid to avoid clashing with exam mini calendars */
#calendarGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* Reduce the gap between date cells for a tighter calendar layout */
  gap: 0.25rem;
}

/* Style cells only within the main calendar grid */
/* Calendar cells for the standalone calendar page. Make them circular like the exam mini-calendar. */
#calendarGrid .calendar-cell {
  /* Neutral background for days without events */
  background-color: #f2f2f7;
  border-radius: 50%;
  /* Use equal width and height to ensure perfect circles. Reduce size to
     leave more breathing room around the mini calendar. */
  /* Increase the size slightly and ensure the cell remains a perfect circle */
  width: 48px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  margin: auto;
}

/* Day number styling */
#calendarGrid .calendar-cell > div:first-child {
  font-weight: 600;
  margin: 0;
}

/* Empty cells (outside current month) */
#calendarGrid .calendar-empty {
  background: none;
  box-shadow: none;
  cursor: default;
}

/* Past dates appear grey */
#calendarGrid .calendar-past {
  color: #b0b0b0;
  opacity: 0.5;
}

/* Highlight today's date */
#calendarGrid .calendar-today {
  /* Use a red ring around today's date */
  background-color: #ff30413c;
}

/* Selected day border highlight */
#calendarGrid .calendar-selected {
  /* Use a red ring for the selected date */
  box-shadow: 0 0 0 2px #ff3b30 inset;
}

/* Assignment/exam/both fill for calendar page */
#calendarGrid .assignment-day {
  /* Colour assignment dates using the same red hue as the selected date ring */
  color: #ff3b30;
  background-color: none;
  border: none;
}
#calendarGrid .exam-day {
  /* Colour exam dates by changing the number colour instead of filling the circle */
  color: #f58b02;
  background-color: none;
  border: none;
}
#calendarGrid .both-day {
  /* When both an assignment and an exam fall on the same date, use assignment (red) colour */
  color: #039bfa;
  background-color: none;
  border: none;
}

/* Fade fill for past event days */
#calendarGrid .calendar-past.assignment-day,
#calendarGrid .calendar-past.exam-day,
#calendarGrid .calendar-past.both-day {
  opacity: 0.5;
}

.calendar-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  position: absolute;
  bottom: 4px;
  left: 4px;
}

.assignment-dot {
  /* Red dot for assignment events */
  background-color: #ff3b30;
}

.exam-dot {
  /* Blue dot for exam events */
  background-color: #0a84ff;
}

.calendar-event-card {
  background-color: #ffffff;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  /* Increase font size and line height for better readability in the detail panel */
  font-size: 1rem;
  line-height: 1.5;
}

/* Header row within calendar event card */
.calendar-event-card-header {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  color: #1c1c1e;
}

.calendar-detail {
  max-height: 400px;
  overflow-y: auto;
}

/* Header cells for the mini calendar day names */
#calendarGrid .calendar-cell-header {
  /* Header cells should not be circular */
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  font-weight: 600;
  color: #6e6e73;
  background: none;
}

/* Layout for the calendar page: left panel for mini calendar and right panel for day details */
#calendar-section .calendar-container {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-start;
  position: relative;
}

#calendar-section .calendar-left {
  /* Increase width of the mini calendar so all dates are visible without clipping */
  /* Make the mini calendar wider to avoid crowding and ellipses */
  flex: 0 0 380px;
  /* mini calendar container uses card styling */
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

#calendar-section .calendar-right {
  flex: 1;
  min-width: 200px;
  position: relative;
}

/* The right-hand detail panel should scroll if content is long */
#calendar-section .calendar-detail {
  max-height: 60vh;
  overflow-y: auto;
}

/* Position export button at bottom right of calendar page */
/* Export button should stay at the bottom right of the page */
#exportCalendarBtn {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 999;
}

/* Event type badges for calendar detail cards */
.calendar-event-tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-left: 0.5rem;
}
.calendar-event-tag.assignment {
  color: #ff3b30;
  background-color: rgba(255, 59, 48, 0.15);
}
.calendar-event-tag.exam {
  color: #0a84ff;
  background-color: rgba(10, 132, 255, 0.15);
}

/* Tag for submitted assignments */
.calendar-event-tag.submitted {
  color: #0a84ff;
  background-color: rgba(10, 132, 255, 0.15);
}

/* Tag for assignments not yet submitted */
.calendar-event-tag.not-submitted {
  color: #ff3b30;
  background-color: rgba(255, 59, 48, 0.15);
}

/* Hide the exam search bar on the exams page per user request */
#examSearch {
  display: none !important;
}

/*
 * Rich text editor containers. These classes provide basic styling
 * consistent with the existing form controls. The Quill editor
 * generates its own content element (.ql-editor) inside these
 * containers. A minimum height ensures there is space to begin
 * typing and the border matches the existing input styling.
 */
.quill-editor,
.comment-editor {
  min-height: 150px;
  border: 1px solid #d1d1d6;
  border-radius: 10px;
  background-color: #ffffff;
  padding: 0.5rem;
}
/* Comment editor slightly shorter than thread editor */
.comment-editor {
  min-height: 120px;
}

/*
 * Layout for the thread detail page. The page is divided into two
 * columns: a larger left column for the thread content and comments,
 * and a right column for author and thread metadata. On narrow
 * screens the columns stack vertically. The widths are chosen to
 * provide a comfortable reading area for the thread while still
 * leaving room for supplementary information on the side.
 */
.thread-page-columns {
  display: flex;
  /* Increase gap to provide more breathing space between the main content and the sidebar. */
  gap: 2rem;
  align-items: flex-start;
}
.thread-page-columns .thread-left {
  flex: 2 1 65%;
}
.thread-page-columns .thread-right {
  flex: 1 1 35%;
}
@media (max-width: 900px) {
  .thread-page-columns {
    flex-direction: column;
  }
  .thread-page-columns .thread-left,
  .thread-page-columns .thread-right {
    flex: 1 1 100%;
  }
}

/*
 * Scale images within the thread left column to prevent overflow. When users
 * insert images (e.g., via the rich text editor), they may upload large
 * pictures. To ensure that these images do not exceed the available
 * width of the thread content area, constrain their maximum width to
 * 100% of the container. Preserve aspect ratio by setting height to auto.
 * The display property is set to block so that images start on a new line.
 */
.thread-page-columns .thread-left img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Ensure videos embedded in the thread content do not exceed the width of the
   content area. The max-width and height:auto settings maintain aspect
   ratio while fitting the container, and display:block ensures the video
   starts on a new line similar to images. */
.thread-page-columns .thread-left video {
  max-width: 100%;
  height: auto;
  display: block;
}

/*
 * Sidebar cards in the thread detail page. These cards use the same
 * visual style as other cards in the app (rounded corners, subtle
 * shadow and padding) but are scoped specifically to the thread
 * sidebar. Headings within these cards have reduced margin for a
 * tighter layout.
 */
.sidebar-card {
  background: linear-gradient(135deg, var(--ui-surface), var(--ui-surface-alt));
  border-radius: var(--ui-radius-lg);
  border: 1px solid var(--ui-border-subtle);
  box-shadow: var(--ui-shadow-soft);
  padding: 1rem;
  /* Increase bottom margin to separate multiple sidebar cards more clearly. */
  margin-bottom: 1.25rem;
}

.thread-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-top: 1rem;
  padding-bottom: 0.1rem;
}
.sidebar-card h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  /* Reduce heading size in sidebar cards to minimise clutter */
  /* Further reduce heading size in sidebar cards */
  font-size: 0.9rem;
  font-weight: 600;
}

/* Increase line spacing and vertical rhythm within sidebar cards. Paragraphs
   inside these cards get extra margin to prevent crowding of information. */
.sidebar-card p {
  /* Reduce font size and increase vertical spacing inside sidebar cards */
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
  line-height: 1.5;
  font-size: 0.9rem;
}

/* -------------------------------------------------------------------------
 * Grading workspace styles
 *
 * The three–column grading layout consists of a student list on the left,
 * a PDF viewer with annotation tools in the middle, and a grading panel on
 * the right. The design adapts the existing Apple‑inspired aesthetic: light
 * backgrounds, subtle separators, rounded corners and consistent spacing.
 * A responsive flex layout ensures the columns fill the available width
 * while respecting minimum widths on small screens.
 */

/* Container for the grading page. Use full width and flex to arrange the
   three columns horizontally. A small gap provides separation between
   columns without adding explicit borders. */
.grade-layout {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: calc(100vh - 100px); /* leave room for header and nav */
  gap: 1rem;
  overflow: hidden;
}

/* Student list column. Fixed minimum width to ensure the list remains
   usable even when many students appear. The column scrolls when content
   overflows. A subtle right border delineates it from the PDF area. */
.grade-student-list {
  /* Narrower student list to free space for the PDF canvas. */
  /* Slightly narrower width so that the middle PDF area gains more space */
  flex: 0 0 210px;
  max-width: 230px;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
  overflow-y: auto;
  padding: 0.85rem;
}

/* Control bar within the student list for search/filter/sort. Stack
   vertically with a small gap. Inputs span the full width of the column. */
.grade-list-controls {
  margin-bottom: 0.75rem;
  display: grid;
  gap: 0.5rem;
}
.grade-search-input,
.grade-search-input,
.grade-filter-select,
.grade-sort-select {
  width: 100%;
  max-width: 100%;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  font-size: 0.9rem;
  background-color: #ffffff;
  color: #0f172a;
  box-sizing: border-box;
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.06);
}
.grade-filter-select,
.grade-sort-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%236e6e73' d='M5 7l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 0.8rem;
  padding-right: 2rem;
}

/* Student items. Flex container so avatar, info and score align nicely.
   Highlight the active item with a blue tint. Hover feedback improves
   discoverability. */
.grade-student-item {
  display: flex;
  align-items: center;
  padding: 0.45rem 0.6rem;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.grade-student-item:hover {
  background-color: #f8fafc;
  border-color: rgba(59, 130, 246, 0.2);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
}
.grade-student-item.active {
  background-color: rgba(59, 130, 246, 0.12);
  border-color: rgba(37, 99, 235, 0.3);
}
.student-avatar {
  font-size: 1.2rem;
  color: #8e8e93;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  background-color: #e2e8f0;
  border-radius: 50%;
}

/* Avatar images in the grading student list. Constrain size and make
   circular to match the design language. Use object-fit to crop long
   names gracefully. */
.student-avatar-img {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  object-fit: cover;
  background-color: #e5e5ea;
}
.pdf-container.pdf-offline {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 18rem;
  background: #f5f5f7;
  border: 1px dashed #d1d1d6;
  border-radius: 12px;
  padding: 1.5rem;
  box-sizing: border-box;
}
.offline-submission-msg {
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  color: #1d1d1f;
}
.offline-upload-actions {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.offline-upload-actions button {
  padding: 0.4rem 1rem;
  border: none;
  border-radius: 6px;
  background-color: #ff9f0a;
  color: #fff;
  cursor: pointer;
}
.offline-upload-actions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.offline-upload-actions .upload-hint {
  font-size: 0.85rem;
  color: #6e6e73;
}
.manual-upload-row {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.manual-upload-row .upload-info {
  font-size: 0.85rem;
  color: #6e6e73;
}
.student-avatar-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.student-info span:first-child {
  color: #1d1d1f;
  font-size: 0.95rem;
  line-height: 1.2;
}
.student-info span:last-child {
  color: #6e6e73;
  font-size: 0.75rem;
  line-height: 1;
}
.student-score {
  font-weight: 600;
  font-size: 0.9rem;
}

/* Middle PDF area. Flex column with controls on top, annotation toolbar
   below, then the PDF container. Overflow hidden ensures the canvas
   doesn't create horizontal scrollbars. */
.grade-pdf-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
  /* Allow the PDF area to shrink for scroll containers within. Without
     min-height:0, overflowing content will cause the parent flex item
     to expand instead of enabling scrollbars. */
  min-height: 0;
}

/* Ensure the PDF container used within the grading interface is
   positioned relative so that absolutely positioned text inputs
   (for text annotations) appear in the correct location relative to
   the PDF page. */
.grade-pdf-area .pdf-container {
  position: relative;
}
.pdf-viewer-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.pdf-viewer-controls button {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.3);
  font-size: 1rem;
  padding: 0.4rem;
  cursor: pointer;
  color: #007aff;
  border-radius: 10px;
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.pdf-viewer-controls button:hover {
  background-color: #f1f5f9;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.pdf-viewer-controls .page-info {
  margin-left: auto;
  font-size: 0.85rem;
  color: #6e6e73;
}
.annot-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
}
.annot-toolbar button {
  padding: 0.4rem 0.65rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.85rem;
  background: #ffffff;
  color: #1d4ed8;
  box-shadow: none;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.annot-toolbar button.active {
  background: linear-gradient(135deg, #1d4ed8, #007aff);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 12px 20px rgba(0, 122, 255, 0.25);
}
.annot-toolbar button:hover {
  background: #f1f5f9;
  transform: translateY(-1px);
}
.annot-toolbar .btn-yellow {
  background: #fff3c4;
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.4);
}
.annot-toolbar .btn-red {
  background: #fee2e2;
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.4);
}
.annot-toolbar select,
.annot-toolbar input[type="color"],
.annot-toolbar input[type="text"] {
  border: 1px solid #d1d1d6;
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  background-color: #ffffff;
  color: #1d1d1f;
}
body.dark .annot-toolbar {
  border-bottom-color: var(--mui-dark-border);
}
body.dark .annot-toolbar button {
  background: #0f172a;
  color: #e2e8f0;
  border-color: rgba(148, 163, 184, 0.3);
  box-shadow: none;
}
body.dark .annot-toolbar button.active {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  color: #ffffff;
}
body.dark .annot-toolbar button:hover {
  background: #1f2937;
}
body.dark .annot-toolbar .btn-yellow {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}
body.dark .annot-toolbar .btn-red {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}
body.dark .annot-toolbar select,
body.dark .annot-toolbar input[type="color"],
body.dark .annot-toolbar input[type="text"] {
  background-color: #0f172a;
  border-color: rgba(148, 163, 184, 0.3);
  color: var(--mui-dark-text);
}
body.dark .grade-student-list,
body.dark .grade-pdf-area,
body.dark .grade-side-panel {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.95));
  border-color: rgba(51, 65, 85, 0.6);
  box-shadow: 0 16px 26px rgba(2, 6, 23, 0.45);
}
body.dark .grade-list-controls input,
body.dark .grade-list-controls select {
  background: #0f172a;
  border-color: rgba(148, 163, 184, 0.3);
  color: var(--mui-dark-text);
  box-shadow: none;
}
body.dark .grade-student-item:hover {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.35);
}
body.dark .grade-student-item.active {
  background: rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.45);
}
body.dark .pdf-viewer-controls {
  background: rgba(15, 23, 42, 0.8);
  border-bottom-color: rgba(51, 65, 85, 0.6);
}
body.dark .pdf-viewer-controls button {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.3);
  color: #93c5fd;
}
body.dark .pdf-viewer-controls button:hover {
  background: rgba(30, 41, 59, 0.85);
}
body.dark #gradeFormContainer input[type="number"],
body.dark #gradeFormContainer textarea {
  background: #0f172a;
  border-color: rgba(148, 163, 184, 0.3);
  color: var(--mui-dark-text);
  box-shadow: none;
}
body.dark .grade-nav-row button {
  background: rgba(15, 23, 42, 0.7);
  border-color: rgba(148, 163, 184, 0.3);
  color: var(--mui-dark-text);
}
.pdf-container {
  flex: 1;
  overflow-y: auto;
  position: relative;
  background-color: #ffffff;
  /* Allow this flex item to shrink so that scrolling works properly. Without
     min-height:0, the element may stretch to accommodate its contents and
     prevent the scroll container from functioning as expected. */
  min-height: 0;
}
/* The PDF and annotation canvases now set their own dimensions via
   inline styles computed in JavaScript to support high DPI rendering
   and proper zooming. Remove the forced 100% width and auto height
   so the canvases can display at their native sizes. The display
   property remains block to avoid inline layout issues. */
.pdf-container canvas {
  display: block;
}
/* The annotation canvas is positioned absolutely over the PDF canvas and
   its size is controlled via inline styles set in JavaScript. Remove
   the fixed 100% width/height so that inline dimensions take effect. */
.pdf-annotation-canvas {
  position: absolute;
  top: 0;
  left: 0;
  /* pointer-events enabled so drawing interactions reach the canvas. */
  pointer-events: auto;
}

/* Text input overlay used for text annotations.  Positioned absolutely
   relative to the annotation canvas container.  Provide a subtle border
   and semi-transparent background so that the text is visible while
   typing.  Remove native resize handles to keep consistent sizing. */
.annotation-text-input {
  position: absolute;
  border: 1px dashed #888;
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 4px;
  font-family: sans-serif;
  line-height: 1.2;
  resize: none;
  outline: none;
  z-index: 10;
  min-width: 4rem;
}

/* Right grading panel. Fixed width with scrolling for overflow. Use the same
   subtle left border as the student list. */
.grade-side-panel {
  /* Slightly narrower side panel for grading form and penalty cards */
  /* Narrow the grading panel slightly to prevent overflow on small desktops */
  flex: 0 0 240px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 0.85rem;
  overflow-y: auto;
  background-color: #ffffff;
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
}

/* Penalty and information cards in the grading panel. We reuse the
   existing badge classes but ensure they span the full width and align
   consistently. */
#gradePenaltyContainer .late-badge,
#gradePenaltyContainer .penalty-badge {
  margin-top: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Grade form container styling. Ensure labels and inputs line up and
   provide adequate spacing. */
#gradeFormContainer h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #1d1d1f;
}
#gradeFormContainer label {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #1d1d1f;
}
#gradeFormContainer input[type="number"],
#gradeFormContainer textarea {
  width: 100%;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  font-size: 0.9rem;
  resize: vertical;
  background-color: #ffffff;
  color: #0f172a;
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.06);
}
#gradeFormContainer textarea {
  min-height: 4rem;
}
#gradeFormContainer .btn-red,
#gradeFormContainer .btn-blue {
  flex: 1;
  padding: 0.45rem 0.7rem;
  font-size: 0.9rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
#gradeFormContainer .btn-red {
  background-color: #ff3b30;
  color: #ffffff;
}
#gradeFormContainer .btn-blue {
  background-color: #007aff;
  color: #ffffff;
}
#gradeFormContainer .btn-red:hover {
  background-color: #ff5e56;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(255, 59, 48, 0.2);
}
#gradeFormContainer .btn-blue:hover {
  background-color: #1691ff;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(0, 122, 255, 0.2);
}

/* Navigation buttons (Prev/Next) under the form. Use neutral secondary
   styling so they don't compete with primary actions. */
.grade-nav-row button {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  background-color: #f8fafc;
  color: #0f172a;
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.grade-nav-row button:hover {
  background-color: #eef2f7;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
}

.grade-submission-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.grade-submission-heading h2 {
  margin: 0;
}

.grade-submission-heading #gradeSubmissionActions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.grade-header-action {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* Two-factor authentication section styles */
#twoFactorSection {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}

#twoFactorSection input {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-align: center;
}

/* Sessions management styles */
.sessions-container {
  max-width: 800px;
  margin: 0 auto;
}

.sessions-list {
  margin-bottom: 1.5rem;
}

.session-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.5rem;
  background-color: white;
  transition: box-shadow 0.2s ease;
}

.session-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.session-card .device-info {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.session-card .time-info {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 0.5rem;
}

.session-card .time-info div {
  margin-bottom: 0.25rem;
}

/* Login history styles */
.history-list {
  margin-bottom: 1.5rem;
  max-height: 500px;
  overflow-y: auto;
}

.history-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.5rem;
  background-color: white;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  border-left: 4px solid transparent;
}

.history-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}

.history-card[data-active="true"] {
  border-left-color: #4CAF50;
  background-color: #f8fff8;
}

.history-card[data-active="false"] {
  border-left-color: #9E9E9E;
  background-color: #f9f9f9;
}

/* Button styles for sessions management */
.btn-red {
  background: linear-gradient(135deg, #ef4444, #ff3b30);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.55rem 1.1rem;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(239, 68, 68, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}

.btn-red:hover {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(239, 68, 68, 0.3);
}

.btn-green {
  background: linear-gradient(135deg, #22c55e, #34c759);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.55rem 1.1rem;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(34, 197, 94, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}

.btn-green:hover {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(34, 197, 94, 0.3);
}

.btn-yellow {
  background: linear-gradient(135deg, #f59e0b, #ff9500);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.55rem 1.1rem;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(245, 158, 11, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}

.btn-yellow:hover {
  background: linear-gradient(135deg, #d97706, #f59e0b);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(245, 158, 11, 0.3);
}

.btn-grey {
  background-color: #8e8e93;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-grey:hover {
  background-color: #a8a8b3;
}

/* ------------------------------------------------------------------ */
/* UI refresh: global visual and responsive polish (2026-02)          */
/* ------------------------------------------------------------------ */
:root {
  --ui-refresh-accent: #0b63f4;
  --ui-refresh-accent-soft: rgba(11, 99, 244, 0.14);
  --ui-refresh-ink: #15233a;
  --ui-refresh-muted: #5a6b84;
  --ui-refresh-surface: rgba(255, 255, 255, 0.76);
  --ui-refresh-surface-strong: #ffffff;
  --ui-refresh-border: rgba(21, 35, 58, 0.12);
  --ui-refresh-shadow: 0 20px 48px rgba(14, 30, 56, 0.12);
}

html,
body {
  font-family: "Plus Jakarta Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.5;
  color: var(--ui-refresh-ink);
}

h1,
h2,
h3,
h4,
header .brand {
  font-family: "Space Grotesk", "Plus Jakarta Sans", "Noto Sans SC", sans-serif;
  letter-spacing: -0.02em;
}

body {
  background:
    radial-gradient(1100px circle at 2% -8%, #e2eeff 0%, rgba(226, 238, 255, 0) 58%),
    radial-gradient(1000px circle at 104% 12%, #d7f8f0 0%, rgba(215, 248, 240, 0) 62%),
    linear-gradient(180deg, #f7f9ff 0%, #eff4ff 58%, #edf2fb 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: auto -12vw -18vh -12vw;
  height: 44vh;
  pointer-events: none;
  background: radial-gradient(100% 90% at 50% 100%, rgba(51, 102, 255, 0.1) 0%, rgba(51, 102, 255, 0) 100%);
  z-index: -1;
}

header.navbar {
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.65rem clamp(0.8rem, 1.5vw, 1.25rem);
  border-bottom: 1px solid rgba(21, 35, 58, 0.1);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 24px rgba(14, 30, 56, 0.08);
}

header .brand {
  font-size: clamp(1rem, 1.1vw, 1.2rem);
  font-weight: 700;
  color: #0f244a;
  white-space: nowrap;
}

nav.nav-links {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 auto;
  min-width: 240px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 0.2rem;
  scrollbar-width: none;
}

nav.nav-links::-webkit-scrollbar {
  display: none;
}

nav.nav-links button {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  white-space: nowrap;
  min-height: 2.25rem;
  margin: 0;
  border-color: transparent;
  color: #2a3f61;
}

nav.nav-links button:hover,
nav.nav-links button.active {
  color: #0f2344;
}

.header-right {
  margin-left: auto;
  gap: 0.5rem;
}

.notifications {
  width: 1.95rem;
  height: 1.95rem;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.notifications:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(11, 99, 244, 0.25);
  background: rgba(11, 99, 244, 0.07);
}

#notificationsBell {
  position: relative;
  margin-right: 0.2rem;
}

#notificationsBell .fa-bell {
  font-size: 1.12rem;
  line-height: 1;
}

#notificationCount {
  min-width: 0.95rem;
  text-align: center;
  box-shadow: 0 3px 8px rgba(255, 59, 48, 0.4);
  top: -4px !important;
  right: -6px !important;
}

#userInfo {
  border-radius: 999px;
  padding: 0.05rem 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

#userInfo img {
  width: 36px;
  height: 36px;
}

section.page {
  max-width: 1140px;
  width: min(1140px, calc(100% - 2rem));
  margin: 1.25rem auto 1.6rem;
  padding: clamp(1rem, 1.8vw, 1.45rem);
  border-radius: 22px;
  border: 1px solid rgba(21, 35, 58, 0.1);
  background: var(--ui-refresh-surface);
  backdrop-filter: blur(12px) saturate(130%);
  box-shadow: var(--ui-refresh-shadow);
  animation: pageFadeIn 0.32s ease;
}

#grade-submission-section {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

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

section.page > h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #132a4f;
  font-size: clamp(1.22rem, 2.2vw, 1.52rem);
}

:where(.card, .form-card, .assignment-card, .session-card, .history-card, .exam-mail-card, .student-tool-card) {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.93), rgba(245, 249, 255, 0.9));
  border: 1px solid rgba(21, 35, 58, 0.1);
  border-radius: 16px;
  box-shadow: 0 14px 26px rgba(14, 30, 56, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

:where(.card, .form-card, .assignment-card, .session-card, .history-card, .exam-mail-card, .student-tool-card):hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(14, 30, 56, 0.12);
  border-color: rgba(11, 99, 244, 0.24);
}

.form {
  gap: 0.82rem;
}

.form input,
.form textarea,
.form select {
  min-height: 2.65rem;
  border-radius: 12px;
  border-color: rgba(21, 35, 58, 0.16);
  background: var(--ui-refresh-surface-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.form textarea {
  min-height: 6.6rem;
}

.form input:focus,
.form textarea:focus,
.form select:focus {
  border-color: var(--ui-refresh-accent);
  box-shadow: 0 0 0 4px var(--ui-refresh-accent-soft);
  transform: translateY(-1px);
}

.btn-blue,
.btn-green,
.btn-red,
.btn-yellow,
.btn-secondary,
.btn-grey {
  min-height: 2.25rem;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Keep assignment action buttons compact to avoid oversized CTA rows. */
.assignment-card .actions .btn-blue,
.assignment-card .actions .btn-green,
.assignment-card .actions .btn-red,
.assignment-card .actions .btn-yellow,
.assignment-card .actions .btn-secondary,
.assignment-card .actions .btn-grey {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.02rem;
  padding: 0.42rem 0.74rem;
  font-size: 0.84rem;
  border-radius: 10px;
  letter-spacing: 0;
}

.assignment-card .actions .btn-blue i,
.assignment-card .actions .btn-green i,
.assignment-card .actions .btn-red i,
.assignment-card .actions .btn-yellow i,
.assignment-card .actions .btn-secondary i,
.assignment-card .actions .btn-grey i {
  font-size: 0.92em;
}

.assignment-card .actions .btn-blue,
.assignment-card .actions .btn-green,
.assignment-card .actions .btn-red,
.assignment-card .actions .btn-yellow {
  box-shadow: 0 6px 12px rgba(14, 30, 56, 0.16);
}

.assignment-card .actions {
  gap: 0.42rem;
}

.assignment-action-row {
  gap: 0.42rem;
  flex-wrap: wrap;
}

/* Resource panel actions: keep classic compact buttons and avoid oversized pills. */
.resource-actions,
.resource-version-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.resource-actions {
  margin-top: 0.5rem;
}

.resource-version-actions {
  margin-left: auto;
}

.resource-actions .resource-action-btn,
.resource-version-actions .resource-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-height: 1.95rem;
  padding: 0.36rem 0.68rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: none;
  transform: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.resource-actions .btn-blue.resource-action-btn,
.resource-version-actions .btn-blue.resource-action-btn {
  background: #007aff;
  color: #ffffff;
}

.resource-actions .btn-green.resource-action-btn,
.resource-version-actions .btn-green.resource-action-btn {
  background: #22c55e;
  color: #ffffff;
}

.resource-actions .btn-red.resource-action-btn,
.resource-version-actions .btn-red.resource-action-btn {
  background: #ef4444;
  color: #ffffff;
}

.resource-actions .resource-action-btn:hover,
.resource-version-actions .resource-action-btn:hover {
  box-shadow: none;
  transform: none;
}

.resource-actions .btn-blue.resource-action-btn:hover,
.resource-version-actions .btn-blue.resource-action-btn:hover {
  background: #0066db;
}

.resource-actions .btn-green.resource-action-btn:hover,
.resource-version-actions .btn-green.resource-action-btn:hover {
  background: #1fa853;
}

.resource-actions .btn-red.resource-action-btn:hover,
.resource-version-actions .btn-red.resource-action-btn:hover {
  background: #dc3535;
}

.btn-blue:focus-visible,
.btn-green:focus-visible,
.btn-red:focus-visible,
.btn-yellow:focus-visible,
.btn-secondary:focus-visible,
.btn-grey:focus-visible,
nav.nav-links button:focus-visible,
.notifications:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(11, 99, 244, 0.2), 0 0 0 6px rgba(11, 99, 244, 0.08);
}

.search-bar {
  border: 1px solid rgba(21, 35, 58, 0.13);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 10px 20px rgba(14, 30, 56, 0.07);
}

.search-input {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.search-input:focus {
  outline: none;
}

.list li {
  border-color: rgba(21, 35, 58, 0.11);
  border-radius: 14px;
  box-shadow: 0 10px 20px rgba(14, 30, 56, 0.07);
}

.footer {
  margin-top: auto;
  padding-bottom: 0.6rem;
  color: var(--ui-refresh-muted);
}

body.dark {
  color: #e3ecff;
  background:
    radial-gradient(1200px circle at -5% -10%, rgba(41, 78, 133, 0.45) 0%, rgba(41, 78, 133, 0) 56%),
    radial-gradient(1000px circle at 105% 18%, rgba(24, 108, 110, 0.26) 0%, rgba(24, 108, 110, 0) 52%),
    linear-gradient(180deg, #07101f 0%, #0a1526 55%, #0a1422 100%);
}

body.dark header.navbar {
  background: rgba(9, 16, 28, 0.82);
  border-bottom-color: rgba(132, 167, 220, 0.18);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
}

body.dark header .brand {
  color: #e3ebff;
}

body.dark nav.nav-links button {
  color: #c6d7f3;
}

body.dark nav.nav-links button:hover,
body.dark nav.nav-links button.active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(66, 153, 255, 0.22), rgba(39, 117, 242, 0.4));
  border-color: rgba(123, 183, 255, 0.42);
}

body.dark #userInfo {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body.dark .notifications {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body.dark .notifications:hover {
  background: rgba(123, 183, 255, 0.16);
  border-color: rgba(123, 183, 255, 0.35);
}

body.dark section.page {
  background: rgba(10, 20, 34, 0.72);
  border-color: rgba(132, 167, 220, 0.24);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.36);
}

body.dark section.page > h2 {
  color: #e6efff;
}

body.dark :where(.card, .form-card, .assignment-card, .session-card, .history-card, .exam-mail-card, .student-tool-card) {
  background: linear-gradient(170deg, rgba(14, 26, 43, 0.94), rgba(10, 21, 37, 0.9));
  border-color: rgba(132, 167, 220, 0.18);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
}

body.dark .form input,
body.dark .form textarea,
body.dark .form select {
  color: #e9f0ff;
  background: rgba(10, 20, 35, 0.82);
  border-color: rgba(132, 167, 220, 0.26);
}

body.dark .search-bar {
  background: rgba(10, 20, 35, 0.84);
  border-color: rgba(132, 167, 220, 0.26);
}

body.dark .search-bar i,
body.dark .user-info,
body.dark .footer {
  color: #a8b9d4;
}

@media (max-width: 1024px) {
  header.navbar {
    gap: 0.55rem;
    padding: 0.55rem 0.75rem;
  }

  nav.nav-links {
    order: 3;
    width: 100%;
    min-width: 0;
    margin-top: 0.18rem;
    padding-top: 0.28rem;
    border-top: 1px solid rgba(21, 35, 58, 0.1);
  }

  body.dark nav.nav-links {
    border-top-color: rgba(132, 167, 220, 0.2);
  }

  section.page {
    width: calc(100% - 1.1rem);
    border-radius: 18px;
    margin: 0.9rem auto 1.2rem;
  }
}

@media (max-width: 640px) {
  nav.nav-links button {
    font-size: 0.88rem;
    min-height: 2.1rem;
    padding: 0.45rem 0.72rem;
  }

  .header-right {
    gap: 0.45rem;
  }

  .notifications {
    width: 1.82rem;
    height: 1.82rem;
    font-size: 0.96rem;
  }

  #userInfo {
    max-width: 72vw;
    padding: 0;
    gap: 0.35rem;
    font-size: 0.82rem;
    overflow: hidden;
  }

  #userInfo img {
    width: 34px;
    height: 34px;
  }

  section.page {
    width: calc(100% - 0.8rem);
    border-radius: 14px;
    padding: 0.9rem;
  }

  :where(.card, .form-card, .assignment-card, .session-card, .history-card, .exam-mail-card, .student-tool-card) {
    border-radius: 14px;
  }

  .assignment-card .actions .btn-blue,
  .assignment-card .actions .btn-green,
  .assignment-card .actions .btn-red,
  .assignment-card .actions .btn-yellow,
  .assignment-card .actions .btn-secondary,
  .assignment-card .actions .btn-grey {
    min-height: 1.9rem;
    padding: 0.35rem 0.62rem;
    font-size: 0.8rem;
  }

  .resource-actions .resource-action-btn,
  .resource-version-actions .resource-action-btn {
    min-height: 1.82rem;
    padding: 0.3rem 0.56rem;
    font-size: 0.78rem;
  }
}

/* ------------------------------------------------------------------ */
/* Button system unification: use one consistent button spec sitewide */
/* ------------------------------------------------------------------ */
:root {
  --btn-unify-height: 2.2rem;
  --btn-unify-py: 0.38rem;
  --btn-unify-px: 0.82rem;
  --btn-unify-radius: 10px;
  --btn-unify-font-size: 0.9rem;
}

.btn-blue,
.btn-green,
.btn-red,
.btn-yellow,
.btn-secondary,
.btn-grey,
.btn-outline,
.resource-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  width: auto;
  min-height: var(--btn-unify-height);
  padding: var(--btn-unify-py) var(--btn-unify-px);
  border-radius: var(--btn-unify-radius);
  border: 1px solid transparent;
  font-size: var(--btn-unify-font-size);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none;
  transform: none;
  font-family: "Plus Jakarta Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.btn-blue {
  background: #1677ff;
  border-color: #1677ff;
  color: #ffffff;
}

.btn-green {
  background: #22c55e;
  border-color: #22c55e;
  color: #ffffff;
}

.btn-red {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
}

.btn-yellow {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #ffffff;
}

.btn-secondary,
.btn-grey {
  background: #eef2f7;
  border-color: #d3dce8;
  color: #233654;
}

.btn-outline {
  background: transparent;
  border-color: rgba(22, 119, 255, 0.42);
  color: #135ec8;
}

.resource-actions .btn-blue.resource-action-btn,
.resource-version-actions .btn-blue.resource-action-btn {
  background: #1677ff;
  border-color: #1677ff;
  color: #ffffff;
}

.resource-actions .btn-green.resource-action-btn,
.resource-version-actions .btn-green.resource-action-btn {
  background: #22c55e;
  border-color: #22c55e;
  color: #ffffff;
}

.resource-actions .btn-red.resource-action-btn,
.resource-version-actions .btn-red.resource-action-btn {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
}

.btn-blue:hover {
  background: #0f64d8;
  border-color: #0f64d8;
}

.btn-green:hover {
  background: #1fa853;
  border-color: #1fa853;
}

.btn-red:hover {
  background: #dc3535;
  border-color: #dc3535;
}

.btn-yellow:hover {
  background: #dd8c06;
  border-color: #dd8c06;
}

.btn-secondary:hover,
.btn-grey:hover {
  background: #e3e9f3;
  border-color: #c4cfdf;
  color: #1c2c45;
}

.btn-outline:hover {
  background: rgba(22, 119, 255, 0.09);
  border-color: rgba(22, 119, 255, 0.62);
}

.resource-actions .btn-blue.resource-action-btn:hover,
.resource-version-actions .btn-blue.resource-action-btn:hover {
  background: #0f64d8;
  border-color: #0f64d8;
}

.resource-actions .btn-green.resource-action-btn:hover,
.resource-version-actions .btn-green.resource-action-btn:hover {
  background: #1fa853;
  border-color: #1fa853;
}

.resource-actions .btn-red.resource-action-btn:hover,
.resource-version-actions .btn-red.resource-action-btn:hover {
  background: #dc3535;
  border-color: #dc3535;
}

.btn-blue:hover,
.btn-green:hover,
.btn-red:hover,
.btn-yellow:hover,
.btn-secondary:hover,
.btn-grey:hover,
.btn-outline:hover,
.resource-action-btn:hover {
  box-shadow: none;
  transform: none;
}

.btn-blue:focus-visible,
.btn-green:focus-visible,
.btn-red:focus-visible,
.btn-yellow:focus-visible,
.btn-secondary:focus-visible,
.btn-grey:focus-visible,
.btn-outline:focus-visible,
.resource-action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(22, 119, 255, 0.35);
}

.assignment-card .actions .btn-blue,
.assignment-card .actions .btn-green,
.assignment-card .actions .btn-red,
.assignment-card .actions .btn-yellow,
.assignment-card .actions .btn-secondary,
.assignment-card .actions .btn-grey,
.assignment-card .actions .btn-outline,
.resource-actions .resource-action-btn,
.resource-version-actions .resource-action-btn {
  min-height: var(--btn-unify-height);
  padding: var(--btn-unify-py) var(--btn-unify-px);
  border-radius: var(--btn-unify-radius);
  font-size: var(--btn-unify-font-size);
  box-shadow: none;
  letter-spacing: 0;
}

body.dark .btn-secondary,
body.dark .btn-grey {
  background: rgba(148, 163, 184, 0.22);
  border-color: rgba(148, 163, 184, 0.36);
  color: #d9e6fb;
}

body.dark .btn-secondary:hover,
body.dark .btn-grey:hover {
  background: rgba(148, 163, 184, 0.3);
  border-color: rgba(148, 163, 184, 0.44);
}

body.dark .btn-outline {
  color: #93c5fd;
  border-color: rgba(147, 197, 253, 0.5);
}

body.dark .btn-outline:hover {
  background: rgba(147, 197, 253, 0.14);
  border-color: rgba(147, 197, 253, 0.68);
}

@media (max-width: 640px) {
  .btn-blue,
  .btn-green,
  .btn-red,
  .btn-yellow,
  .btn-secondary,
  .btn-grey,
  .btn-outline,
  .resource-action-btn,
  .assignment-card .actions .btn-blue,
  .assignment-card .actions .btn-green,
  .assignment-card .actions .btn-red,
  .assignment-card .actions .btn-yellow,
  .assignment-card .actions .btn-secondary,
  .assignment-card .actions .btn-grey,
  .assignment-card .actions .btn-outline,
  .resource-actions .resource-action-btn,
  .resource-version-actions .resource-action-btn {
    min-height: 2rem;
    padding: 0.32rem 0.72rem;
    border-radius: 9px;
    font-size: 0.84rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ */
/* Final button lock: force one consistent style across the site       */
/* ------------------------------------------------------------------ */
:root {
  --btn-lock-h: 2.2rem;
  --btn-lock-px: 0.82rem;
  --btn-lock-py: 0.36rem;
  --btn-lock-radius: 8px;
  --btn-lock-font: 0.9rem;
}

.btn-blue,
.btn-green,
.btn-red,
.btn-yellow,
.btn-secondary,
.btn-grey,
.btn-outline,
.btn-link,
.btn-sm,
.apple-btn,
.apple-btn-primary,
.resource-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.34rem !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: var(--btn-lock-h) !important;
  padding: var(--btn-lock-py) var(--btn-lock-px) !important;
  border-radius: var(--btn-lock-radius) !important;
  border: 1px solid transparent !important;
  font-size: var(--btn-lock-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
  appearance: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease !important;
}

.btn-blue,
.apple-btn-primary {
  background: #1677ff !important;
  border-color: #1677ff !important;
  color: #ffffff !important;
}

.btn-green {
  background: #22c55e !important;
  border-color: #22c55e !important;
  color: #ffffff !important;
}

.btn-red {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

.btn-yellow {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #ffffff !important;
}

.btn-secondary,
.btn-grey,
.apple-btn,
.btn-link,
.btn-sm {
  background: #eef2f7 !important;
  border-color: #d3dce8 !important;
  color: #233654 !important;
}

.btn-outline {
  background: transparent !important;
  border-color: rgba(22, 119, 255, 0.42) !important;
  color: #135ec8 !important;
}

.btn-blue:hover,
.apple-btn-primary:hover {
  background: #0f64d8 !important;
  border-color: #0f64d8 !important;
}

.btn-green:hover {
  background: #1fa853 !important;
  border-color: #1fa853 !important;
}

.btn-red:hover {
  background: #dc3535 !important;
  border-color: #dc3535 !important;
}

.btn-yellow:hover {
  background: #dd8c06 !important;
  border-color: #dd8c06 !important;
}

.btn-secondary:hover,
.btn-grey:hover,
.apple-btn:hover,
.btn-link:hover,
.btn-sm:hover {
  background: #e3e9f3 !important;
  border-color: #c4cfdf !important;
  color: #1c2c45 !important;
}

.btn-outline:hover {
  background: rgba(22, 119, 255, 0.09) !important;
  border-color: rgba(22, 119, 255, 0.62) !important;
}

.btn-blue:hover,
.btn-green:hover,
.btn-red:hover,
.btn-yellow:hover,
.btn-secondary:hover,
.btn-grey:hover,
.btn-outline:hover,
.btn-link:hover,
.btn-sm:hover,
.apple-btn:hover,
.apple-btn-primary:hover,
.resource-action-btn:hover {
  box-shadow: none !important;
  transform: none !important;
}

.btn-blue:focus-visible,
.btn-green:focus-visible,
.btn-red:focus-visible,
.btn-yellow:focus-visible,
.btn-secondary:focus-visible,
.btn-grey:focus-visible,
.btn-outline:focus-visible,
.btn-link:focus-visible,
.btn-sm:focus-visible,
.apple-btn:focus-visible,
.apple-btn-primary:focus-visible,
.resource-action-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 4px rgba(22, 119, 255, 0.34) !important;
}

.assignment-card .actions > .btn-blue,
.assignment-card .actions > .btn-green,
.assignment-card .actions > .btn-red,
.assignment-card .actions > .btn-yellow,
.assignment-card .actions > .btn-secondary,
.assignment-card .actions > .btn-grey,
.assignment-card .actions > .btn-outline,
.assignment-action-row > .btn-blue,
.assignment-action-row > .btn-green,
.assignment-action-row > .btn-red,
.assignment-action-row > .btn-yellow,
.assignment-action-row > .btn-secondary,
.assignment-action-row > .btn-grey,
.assignment-action-row > .btn-outline,
.resource-actions > .resource-action-btn,
.resource-version-actions > .resource-action-btn,
.review-actions > .btn-blue,
.review-actions > .btn-green,
.review-actions > .btn-red {
  min-width: 100px !important;
}

body.dark .btn-secondary,
body.dark .btn-grey,
body.dark .apple-btn,
body.dark .btn-link,
body.dark .btn-sm {
  background: rgba(148, 163, 184, 0.22) !important;
  border-color: rgba(148, 163, 184, 0.36) !important;
  color: #d9e6fb !important;
}

body.dark .btn-secondary:hover,
body.dark .btn-grey:hover,
body.dark .apple-btn:hover,
body.dark .btn-link:hover,
body.dark .btn-sm:hover {
  background: rgba(148, 163, 184, 0.3) !important;
  border-color: rgba(148, 163, 184, 0.44) !important;
}

body.dark .btn-outline {
  color: #93c5fd !important;
  border-color: rgba(147, 197, 253, 0.52) !important;
}

body.dark .btn-outline:hover {
  background: rgba(147, 197, 253, 0.14) !important;
  border-color: rgba(147, 197, 253, 0.68) !important;
}

@media (max-width: 640px) {
  .btn-blue,
  .btn-green,
  .btn-red,
  .btn-yellow,
  .btn-secondary,
  .btn-grey,
  .btn-outline,
  .btn-link,
  .btn-sm,
  .apple-btn,
  .apple-btn-primary,
  .resource-action-btn {
    min-height: 2rem !important;
    padding: 0.32rem 0.7rem !important;
    border-radius: 8px !important;
    font-size: 0.84rem !important;
  }

  .assignment-card .actions > .btn-blue,
  .assignment-card .actions > .btn-green,
  .assignment-card .actions > .btn-red,
  .assignment-card .actions > .btn-yellow,
  .assignment-card .actions > .btn-secondary,
  .assignment-card .actions > .btn-grey,
  .assignment-card .actions > .btn-outline,
  .assignment-action-row > .btn-blue,
  .assignment-action-row > .btn-green,
  .assignment-action-row > .btn-red,
  .assignment-action-row > .btn-yellow,
  .assignment-action-row > .btn-secondary,
  .assignment-action-row > .btn-grey,
  .assignment-action-row > .btn-outline,
  .resource-actions > .resource-action-btn,
  .resource-version-actions > .resource-action-btn,
  .review-actions > .btn-blue,
  .review-actions > .btn-green,
  .review-actions > .btn-red {
    min-width: 88px !important;
  }
}

/* ------------------------------------------------------------------ */
/* Absolute button height normalization (final override)              */
/* ------------------------------------------------------------------ */
:root {
  --btn-abs-h: 38px;
  --btn-abs-h-mobile: 34px;
  --btn-abs-px: 14px;
}

button.btn-blue,
button.btn-green,
button.btn-red,
button.btn-yellow,
button.btn-secondary,
button.btn-grey,
button.btn-outline,
button.btn-link,
button.btn-sm,
button.apple-btn,
button.apple-btn-primary,
button.resource-action-btn,
a.btn-blue,
a.btn-green,
a.btn-red,
a.btn-yellow,
a.btn-secondary,
a.btn-grey,
a.btn-outline,
a.btn-link,
a.btn-sm,
a.apple-btn,
a.apple-btn-primary,
a.resource-action-btn {
  box-sizing: border-box !important;
  height: var(--btn-abs-h) !important;
  min-height: var(--btn-abs-h) !important;
  max-height: var(--btn-abs-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: var(--btn-abs-px) !important;
  padding-right: var(--btn-abs-px) !important;
  line-height: 1 !important;
  border-width: 1px !important;
  border-style: solid !important;
}

.assignment-card .actions > .btn-blue,
.assignment-card .actions > .btn-green,
.assignment-card .actions > .btn-red,
.assignment-card .actions > .btn-yellow,
.assignment-card .actions > .btn-secondary,
.assignment-card .actions > .btn-grey,
.assignment-card .actions > .btn-outline,
.assignment-action-row > .btn-blue,
.assignment-action-row > .btn-green,
.assignment-action-row > .btn-red,
.assignment-action-row > .btn-yellow,
.assignment-action-row > .btn-secondary,
.assignment-action-row > .btn-grey,
.assignment-action-row > .btn-outline,
.resource-actions > .resource-action-btn,
.resource-version-actions > .resource-action-btn,
.review-actions > .btn-blue,
.review-actions > .btn-green,
.review-actions > .btn-red {
  height: var(--btn-abs-h) !important;
  min-height: var(--btn-abs-h) !important;
  max-height: var(--btn-abs-h) !important;
}

@media (max-width: 640px) {
  button.btn-blue,
  button.btn-green,
  button.btn-red,
  button.btn-yellow,
  button.btn-secondary,
  button.btn-grey,
  button.btn-outline,
  button.btn-link,
  button.btn-sm,
  button.apple-btn,
  button.apple-btn-primary,
  button.resource-action-btn,
  a.btn-blue,
  a.btn-green,
  a.btn-red,
  a.btn-yellow,
  a.btn-secondary,
  a.btn-grey,
  a.btn-outline,
  a.btn-link,
  a.btn-sm,
  a.apple-btn,
  a.apple-btn-primary,
  a.resource-action-btn {
    height: var(--btn-abs-h-mobile) !important;
    min-height: var(--btn-abs-h-mobile) !important;
    max-height: var(--btn-abs-h-mobile) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ------------------------------------------------------------------ */
/* Interaction motion layer: dynamic buttons + global polish          */
/* ------------------------------------------------------------------ */
:root {
  --ui-motion-fast: 0.16s;
  --ui-motion-mid: 0.24s;
  --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-blue,
.btn-green,
.btn-red,
.btn-yellow,
.btn-secondary,
.btn-grey,
.btn-outline,
.btn-link,
.btn-sm,
.apple-btn,
.apple-btn-primary,
.resource-action-btn {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition:
    transform var(--ui-motion-fast) var(--ui-ease),
    box-shadow var(--ui-motion-fast) var(--ui-ease),
    background-color var(--ui-motion-fast) var(--ui-ease),
    border-color var(--ui-motion-fast) var(--ui-ease),
    color var(--ui-motion-fast) var(--ui-ease),
    filter var(--ui-motion-fast) var(--ui-ease) !important;
}

.btn-blue::after,
.btn-green::after,
.btn-red::after,
.btn-yellow::after,
.btn-secondary::after,
.btn-grey::after,
.btn-outline::after,
.btn-link::after,
.btn-sm::after,
.apple-btn::after,
.apple-btn-primary::after,
.resource-action-btn::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -130%;
  width: 44%;
  height: 180%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
  pointer-events: none;
  transition: left var(--ui-motion-mid) var(--ui-ease);
  z-index: 1;
}

.btn-blue:hover::after,
.btn-green:hover::after,
.btn-red:hover::after,
.btn-yellow:hover::after,
.btn-secondary:hover::after,
.btn-grey:hover::after,
.btn-outline:hover::after,
.btn-link:hover::after,
.btn-sm:hover::after,
.apple-btn:hover::after,
.apple-btn-primary:hover::after,
.resource-action-btn:hover::after {
  left: 125%;
}

.btn-blue > *,
.btn-green > *,
.btn-red > *,
.btn-yellow > *,
.btn-secondary > *,
.btn-grey > *,
.btn-outline > *,
.btn-link > *,
.btn-sm > *,
.apple-btn > *,
.apple-btn-primary > *,
.resource-action-btn > * {
  position: relative;
  z-index: 2;
}

.btn-blue:hover,
.btn-green:hover,
.btn-red:hover,
.btn-yellow:hover,
.btn-secondary:hover,
.btn-grey:hover,
.btn-outline:hover,
.btn-link:hover,
.btn-sm:hover,
.apple-btn:hover,
.apple-btn-primary:hover,
.resource-action-btn:hover {
  transform: translateY(-1px) !important;
  filter: saturate(1.03);
}

.btn-blue:hover,
.apple-btn-primary:hover {
  box-shadow: 0 8px 16px rgba(22, 119, 255, 0.26) !important;
}

.btn-green:hover {
  box-shadow: 0 8px 16px rgba(34, 197, 94, 0.24) !important;
}

.btn-red:hover {
  box-shadow: 0 8px 16px rgba(239, 68, 68, 0.24) !important;
}

.btn-yellow:hover {
  box-shadow: 0 8px 16px rgba(245, 158, 11, 0.24) !important;
}

.btn-secondary:hover,
.btn-grey:hover,
.btn-outline:hover,
.btn-link:hover,
.btn-sm:hover,
.apple-btn:hover {
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.14) !important;
}

.btn-blue:active,
.btn-green:active,
.btn-red:active,
.btn-yellow:active,
.btn-secondary:active,
.btn-grey:active,
.btn-outline:active,
.btn-link:active,
.btn-sm:active,
.apple-btn:active,
.apple-btn-primary:active,
.resource-action-btn:active {
  transform: translateY(0) scale(0.985) !important;
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.08) !important;
}

.btn-blue i,
.btn-green i,
.btn-red i,
.btn-yellow i,
.btn-secondary i,
.btn-grey i,
.btn-outline i,
.btn-link i,
.btn-sm i,
.apple-btn i,
.apple-btn-primary i,
.resource-action-btn i {
  transition: transform var(--ui-motion-fast) var(--ui-ease);
}

.btn-blue:hover i,
.btn-green:hover i,
.btn-red:hover i,
.btn-yellow:hover i,
.btn-secondary:hover i,
.btn-grey:hover i,
.btn-outline:hover i,
.btn-link:hover i,
.btn-sm:hover i,
.apple-btn:hover i,
.apple-btn-primary:hover i,
.resource-action-btn:hover i {
  transform: translateX(1px);
}

nav.nav-links button {
  transition:
    transform var(--ui-motion-fast) var(--ui-ease),
    box-shadow var(--ui-motion-fast) var(--ui-ease),
    background var(--ui-motion-fast) var(--ui-ease),
    border-color var(--ui-motion-fast) var(--ui-ease),
    color var(--ui-motion-fast) var(--ui-ease) !important;
}

nav.nav-links button:hover,
nav.nav-links button.active {
  transform: translateY(-1px);
}

section.page > h2 {
  position: relative;
  padding-bottom: 0.35rem;
}

section.page > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1677ff, #22c55e);
  opacity: 0.9;
}

:where(.card, .form-card, .assignment-card, .resource-card, .exam-card, .thread-card, .history-card, .session-card, .review-card) {
  transition:
    transform var(--ui-motion-mid) var(--ui-ease),
    box-shadow var(--ui-motion-mid) var(--ui-ease),
    border-color var(--ui-motion-mid) var(--ui-ease) !important;
}

:where(.card, .form-card, .assignment-card, .resource-card, .exam-card, .thread-card, .history-card, .session-card, .review-card):hover {
  transform: translateY(-2px);
}

.assignment-action-row,
.resource-actions,
.resource-version-actions,
.review-actions,
.thread-actions {
  align-items: center;
  gap: 0.5rem !important;
}

@media (max-width: 640px) {
  .btn-blue:hover,
  .btn-green:hover,
  .btn-red:hover,
  .btn-yellow:hover,
  .btn-secondary:hover,
  .btn-grey:hover,
  .btn-outline:hover,
  .btn-link:hover,
  .btn-sm:hover,
  .apple-btn:hover,
  .apple-btn-primary:hover,
  .resource-action-btn:hover,
  nav.nav-links button:hover,
  nav.nav-links button.active {
    transform: none !important;
    box-shadow: none !important;
    filter: none;
  }

  .btn-blue::after,
  .btn-green::after,
  .btn-red::after,
  .btn-yellow::after,
  .btn-secondary::after,
  .btn-grey::after,
  .btn-outline::after,
  .btn-link::after,
  .btn-sm::after,
  .apple-btn::after,
  .apple-btn-primary::after,
  .resource-action-btn::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-blue,
  .btn-green,
  .btn-red,
  .btn-yellow,
  .btn-secondary,
  .btn-grey,
  .btn-outline,
  .btn-link,
  .btn-sm,
  .apple-btn,
  .apple-btn-primary,
  .resource-action-btn,
  nav.nav-links button,
  :where(.card, .form-card, .assignment-card, .resource-card, .exam-card, .thread-card, .history-card, .session-card, .review-card) {
    transition: none !important;
  }

  .btn-blue::after,
  .btn-green::after,
  .btn-red::after,
  .btn-yellow::after,
  .btn-secondary::after,
  .btn-grey::after,
  .btn-outline::after,
  .btn-link::after,
  .btn-sm::after,
  .apple-btn::after,
  .apple-btn-primary::after,
  .resource-action-btn::after,
  section.page > h2::after {
    display: none !important;
  }

  .btn-blue:hover,
  .btn-green:hover,
  .btn-red:hover,
  .btn-yellow:hover,
  .btn-secondary:hover,
  .btn-grey:hover,
  .btn-outline:hover,
  .btn-link:hover,
  .btn-sm:hover,
  .apple-btn:hover,
  .apple-btn-primary:hover,
  .resource-action-btn:hover,
  .btn-blue:active,
  .btn-green:active,
  .btn-red:active,
  .btn-yellow:active,
  .btn-secondary:active,
  .btn-grey:active,
  .btn-outline:active,
  .btn-link:active,
  .btn-sm:active,
  .apple-btn:active,
  .apple-btn-primary:active,
  .resource-action-btn:active,
  nav.nav-links button:hover,
  nav.nav-links button.active,
  :where(.card, .form-card, .assignment-card, .resource-card, .exam-card, .thread-card, .history-card, .session-card, .review-card):hover {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
  }
}

/* ------------------------------------------------------------------ */
/* Motion tuning v2: align with the first subtle interaction style     */
/* ------------------------------------------------------------------ */
:root {
  --ui-btn-subtle-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ui-btn-subtle-fast: 0.16s;
}

.btn-blue,
.btn-green,
.btn-red,
.btn-yellow,
.btn-secondary,
.btn-grey,
.btn-outline,
.btn-link,
.btn-sm,
.apple-btn,
.apple-btn-primary,
.resource-action-btn {
  filter: none !important;
  transition:
    background-color var(--ui-btn-subtle-fast) var(--ui-btn-subtle-ease),
    border-color var(--ui-btn-subtle-fast) var(--ui-btn-subtle-ease),
    color var(--ui-btn-subtle-fast) var(--ui-btn-subtle-ease),
    box-shadow var(--ui-btn-subtle-fast) var(--ui-btn-subtle-ease),
    transform var(--ui-btn-subtle-fast) var(--ui-btn-subtle-ease) !important;
}

.btn-blue::after,
.btn-green::after,
.btn-red::after,
.btn-yellow::after,
.btn-secondary::after,
.btn-grey::after,
.btn-outline::after,
.btn-link::after,
.btn-sm::after,
.apple-btn::after,
.apple-btn-primary::after,
.resource-action-btn::after {
  display: none !important;
  content: none !important;
}

.btn-blue i,
.btn-green i,
.btn-red i,
.btn-yellow i,
.btn-secondary i,
.btn-grey i,
.btn-outline i,
.btn-link i,
.btn-sm i,
.apple-btn i,
.apple-btn-primary i,
.resource-action-btn i {
  transform: none !important;
  transition: none !important;
}

.btn-blue:hover,
.btn-green:hover,
.btn-red:hover,
.btn-yellow:hover,
.btn-secondary:hover,
.btn-grey:hover,
.btn-outline:hover,
.btn-link:hover,
.btn-sm:hover,
.apple-btn:hover,
.apple-btn-primary:hover,
.resource-action-btn:hover {
  transform: translateY(-1px) !important;
  filter: none !important;
}

.btn-blue:hover,
.apple-btn-primary:hover {
  box-shadow: 0 6px 12px rgba(22, 119, 255, 0.2) !important;
}

.btn-green:hover {
  box-shadow: 0 6px 12px rgba(34, 197, 94, 0.2) !important;
}

.btn-red:hover {
  box-shadow: 0 6px 12px rgba(239, 68, 68, 0.2) !important;
}

.btn-yellow:hover {
  box-shadow: 0 6px 12px rgba(245, 158, 11, 0.2) !important;
}

.btn-secondary:hover,
.btn-grey:hover,
.btn-outline:hover,
.btn-link:hover,
.btn-sm:hover,
.apple-btn:hover {
  box-shadow: 0 5px 10px rgba(15, 23, 42, 0.14) !important;
}

.btn-blue:active,
.btn-green:active,
.btn-red:active,
.btn-yellow:active,
.btn-secondary:active,
.btn-grey:active,
.btn-outline:active,
.btn-link:active,
.btn-sm:active,
.apple-btn:active,
.apple-btn-primary:active,
.resource-action-btn:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

@media (max-width: 640px) {
  .btn-blue:hover,
  .btn-green:hover,
  .btn-red:hover,
  .btn-yellow:hover,
  .btn-secondary:hover,
  .btn-grey:hover,
  .btn-outline:hover,
  .btn-link:hover,
  .btn-sm:hover,
  .apple-btn:hover,
  .apple-btn-primary:hover,
  .resource-action-btn:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* ------------------------------------------------------------------ */
/* Calendar UI refresh v2                                              */
/* ------------------------------------------------------------------ */
#calendar-section .calendar-container {
  display: grid !important;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 1rem !important;
  align-items: start;
}

#calendar-section .calendar-left {
  flex: none !important;
  width: 100%;
  background: linear-gradient(180deg, #ffffff, #f9fbff) !important;
  border: 1px solid rgba(22, 119, 255, 0.14);
  border-radius: 16px !important;
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

#calendar-section .calendar-left .calendar-header {
  margin: 0 !important;
  padding: 0.72rem 0.8rem !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  background: linear-gradient(135deg, #1677ff, #1d4ed8) !important;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

#calendarMonthLabel {
  font-size: clamp(1.05rem, 1.8vw, 1.32rem);
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}

#calendar-section .calendar-left .calendar-header button {
  width: 36px;
  min-width: 36px !important;
  height: 36px;
  min-height: 36px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
}

#calendar-section .calendar-left #calendarGrid {
  padding: 0.78rem 0.74rem 0.86rem !important;
  background: #ffffff !important;
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
}

#calendarGrid {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 0.44rem !important;
}

#calendarGrid .calendar-cell {
  box-sizing: border-box;
  width: 100% !important;
  margin: 0 !important;
  min-height: 42px;
  height: 42px;
  border-radius: 12px !important;
  border: 1px solid transparent;
  background: #f4f7fd !important;
  color: #2f4058;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

#calendarGrid .calendar-cell > div:first-child {
  font-weight: 700 !important;
}

#calendarGrid .calendar-cell-header {
  min-height: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #607086 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#calendarGrid .calendar-empty {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  cursor: default !important;
}

#calendarGrid .calendar-past {
  opacity: 0.56;
}

#calendarGrid .calendar-today {
  background: #e8f0ff !important;
  border-color: #9ec0ff !important;
  color: #0f4db3 !important;
}

#calendarGrid .calendar-selected {
  outline: 2px solid #1677ff;
  outline-offset: -2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.88) !important;
}

#calendarGrid .assignment-day {
  background: #fff1f1 !important;
  border-color: rgba(232, 76, 76, 0.3) !important;
  color: #d64545 !important;
}

#calendarGrid .exam-day {
  background: #fff7eb !important;
  border-color: rgba(235, 146, 36, 0.35) !important;
  color: #bf6f00 !important;
}

#calendarGrid .both-day {
  background: linear-gradient(145deg, #edf5ff, #fff3e6) !important;
  border-color: rgba(72, 132, 220, 0.35) !important;
  color: #115cc5 !important;
}

#calendar-section .calendar-right {
  min-width: 0 !important;
  flex: none !important;
  background: linear-gradient(180deg, #ffffff, #f9fbff);
  border: 1px solid rgba(22, 119, 255, 0.14);
  border-radius: 16px;
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

#calendar-section .calendar-detail {
  max-height: min(64vh, 560px) !important;
  overflow-y: auto !important;
  padding-right: 0.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
}

#calendar-section #exportCalendarBtn {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  margin-top: auto;
  width: 100%;
  justify-content: center !important;
}

.calendar-detail-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.calendar-detail-title {
  font-size: 1.03rem;
  font-weight: 700;
  color: #17335f;
}

.calendar-detail-subtitle {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: #60738e;
}

.calendar-detail-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.calendar-detail-count {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.calendar-detail-count .count-num {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  min-width: 0.8rem;
  text-align: right;
}

.calendar-detail-count .count-label {
  font-weight: 700;
}

.calendar-detail-count.assignment {
  color: #c63d3d;
  background: rgba(239, 68, 68, 0.14);
}

.calendar-detail-count.exam {
  color: #b66800;
  background: rgba(245, 158, 11, 0.16);
}

.calendar-detail-count.empty {
  color: #4f5f77;
  background: rgba(148, 163, 184, 0.2);
}

.calendar-empty-state .info-card {
  margin-top: 0;
}

.calendar-event-list {
  display: flex;
  flex-direction: column;
  gap: 0.68rem;
}

.calendar-event-card {
  margin: 0 !important;
  padding: 0.82rem 0.92rem !important;
  border-radius: 14px !important;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.06);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.calendar-event-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 13px 24px rgba(15, 23, 42, 0.11);
  border-color: rgba(22, 119, 255, 0.25);
}

.calendar-event-assignment {
  border-left: 4px solid #ef4444;
}

.calendar-event-exam {
  border-left: 4px solid #f59e0b;
}

.calendar-event-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.42rem;
  flex-wrap: wrap;
}

.calendar-event-card-header > span:first-child {
  flex: 1 1 180px;
  min-width: 0;
  font-weight: 700;
  color: #112f57;
}

.calendar-event-tags {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

#calendar-section .calendar-event-card .exam-detail-row {
  margin-top: 0.3rem;
  font-size: 0.86rem;
  color: #495a73;
}

#calendar-section .calendar-event-card .exam-detail-row i {
  color: #6f7f95;
}

#calendar-section .calendar-event-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.2;
  margin-left: 0;
}

.calendar-event-description {
  margin: 0.44rem 0 0 !important;
  padding-top: 0.44rem;
  border-top: 1px dashed rgba(15, 23, 42, 0.14);
  color: #2e435f;
  font-size: 0.86rem;
  line-height: 1.5;
}

body.dark #calendar-section .calendar-left,
body.dark #calendar-section .calendar-right {
  background: linear-gradient(180deg, rgba(10, 20, 34, 0.92), rgba(8, 16, 28, 0.94));
  border-color: rgba(132, 167, 220, 0.24);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
}

body.dark #calendar-section .calendar-left #calendarGrid {
  background: transparent !important;
}

body.dark #calendarGrid .calendar-cell {
  background: rgba(23, 36, 55, 0.78) !important;
  color: #d2e1f9;
  border-color: rgba(132, 167, 220, 0.14);
}

body.dark #calendarGrid .calendar-cell-header {
  color: #9fb2d1 !important;
}

body.dark #calendarGrid .calendar-empty {
  background: transparent !important;
  border-color: transparent !important;
}

body.dark #calendarGrid .calendar-today {
  background: rgba(37, 99, 235, 0.3) !important;
  border-color: rgba(96, 165, 250, 0.55) !important;
  color: #dbe9ff !important;
}

body.dark #calendarGrid .calendar-selected {
  outline-color: #7fb6ff;
  box-shadow: inset 0 0 0 1px rgba(191, 219, 254, 0.3) !important;
}

body.dark #calendarGrid .assignment-day {
  background: rgba(220, 38, 38, 0.2) !important;
  border-color: rgba(248, 113, 113, 0.4) !important;
  color: #fecaca !important;
}

body.dark #calendarGrid .exam-day {
  background: rgba(217, 119, 6, 0.2) !important;
  border-color: rgba(251, 191, 36, 0.42) !important;
  color: #fde68a !important;
}

body.dark #calendarGrid .both-day {
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.24), rgba(217, 119, 6, 0.22)) !important;
  border-color: rgba(125, 211, 252, 0.42) !important;
  color: #dbeafe !important;
}

body.dark .calendar-detail-header {
  border-bottom-color: rgba(132, 167, 220, 0.24);
}

body.dark .calendar-detail-title {
  color: #e6efff;
}

body.dark .calendar-detail-subtitle {
  color: #9fb2d1;
}

body.dark .calendar-detail-count.empty {
  color: #d0ddf5;
  background: rgba(132, 167, 220, 0.22);
}

body.dark .calendar-event-card {
  background: linear-gradient(180deg, rgba(13, 27, 45, 0.95), rgba(9, 20, 34, 0.94));
  border-color: rgba(132, 167, 220, 0.2);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.24);
}

body.dark .calendar-event-card-header > span:first-child {
  color: #e4edff;
}

body.dark #calendar-section .calendar-event-card .exam-detail-row {
  color: #b8c9e3;
}

body.dark .calendar-event-description {
  color: #c2d2ea;
  border-top-color: rgba(132, 167, 220, 0.22);
}

@media (max-width: 1100px) {
  #calendar-section .calendar-container {
    grid-template-columns: 1fr;
  }

  #calendar-section .calendar-left {
    max-width: 100%;
  }

  #calendar-section .calendar-right {
    padding: 0.82rem;
  }
}

@media (max-width: 640px) {
  #calendar-section .calendar-left .calendar-header {
    padding: 0.62rem 0.66rem !important;
  }

  #calendarMonthLabel {
    font-size: 1rem;
  }

  #calendar-section .calendar-left .calendar-header button {
    width: 32px;
    min-width: 32px !important;
    height: 32px;
    min-height: 32px !important;
    border-radius: 9px !important;
  }

  #calendar-section .calendar-left #calendarGrid {
    padding: 0.62rem 0.5rem 0.72rem !important;
  }

  #calendarGrid {
    gap: 0.32rem !important;
  }

  #calendarGrid .calendar-cell {
    min-height: 36px;
    height: 36px;
    border-radius: 10px !important;
    font-size: 0.78rem;
  }

  #calendarGrid .calendar-cell-header {
    min-height: 22px !important;
    height: 22px !important;
    font-size: 0.66rem !important;
  }

  #calendar-section .calendar-right {
    padding: 0.7rem;
    border-radius: 14px;
  }

  .calendar-detail-title {
    font-size: 0.95rem;
  }
}

/* ------------------------------------------------------------------ */
/* Home UI polish v3                                                   */
/* ------------------------------------------------------------------ */
#home-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.9rem;
  align-items: start;
}

#home-section > h2,
#home-section > h3,
#home-section > #guestLandingCard,
#home-section > #courseInfo,
#home-section > .home-dashboard-panels,
#home-section > #homeOverall,
#home-section > #studentTimeline,
#home-section > #announcementsList {
  grid-column: 1 / -1;
  margin: 0;
}

#home-section > h2 {
  margin-bottom: 0.1rem;
}

#home-section > h3 {
  margin-top: 0.1rem;
  font-size: 1.02rem;
  color: #17335f;
}

#home-section #courseInfo,
#home-section #homeOverall,
#home-section #studentTimeline,
#home-section #guestLandingCard {
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: linear-gradient(180deg, #ffffff, #f9fbff);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07);
}

#home-section #courseInfo {
  padding: 1rem 1.05rem;
}

#home-section #homeOverall,
#home-section #studentTimeline {
  padding: 0.95rem;
}

#home-section #studentTimeline h3 {
  margin: 0;
  font-size: 1rem;
  color: #17335f;
}

#home-section #studentTimeline .timeline-action {
  min-height: 2rem !important;
  padding: 0.32rem 0.72rem !important;
}

#home-section #announcementsList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.68rem;
}

#home-section #announcementsList li {
  margin: 0;
}

#home-section #announcementsList .announcement-item {
  padding: 0.86rem 0.94rem;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: linear-gradient(180deg, #ffffff, #f9fbff);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.06);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

#home-section #announcementsList .announcement-item:hover {
  transform: translateY(-1px);
  border-color: rgba(22, 119, 255, 0.26);
  box-shadow: 0 14px 24px rgba(15, 23, 42, 0.1);
}

#home-section #announcementsList .announcement-item.guest-announcement:hover {
  transform: none;
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.06);
}

#home-section #announcementsList .announcement-item > div:first-child {
  font-size: 0.98rem;
  line-height: 1.4;
  font-weight: 700;
  color: #14335d;
}

#home-section #announcementsList .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.34rem 0.5rem;
  font-size: 0.78rem;
  color: #60738e;
}

#home-section #announcementsList .meta i {
  color: #7f92aa;
}

#home-section #announcementsList .meta .author-label {
  margin-left: 0;
}

#home-section #announcementsList .status-tag {
  margin-left: 0 !important;
}

body.dark #home-section > h3,
body.dark #home-section #studentTimeline h3 {
  color: #e6efff;
}

body.dark #home-section #courseInfo,
body.dark #home-section #homeOverall,
body.dark #home-section #studentTimeline,
body.dark #home-section #guestLandingCard {
  background: linear-gradient(180deg, rgba(10, 20, 34, 0.92), rgba(8, 16, 28, 0.94));
  border-color: rgba(132, 167, 220, 0.24);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.26);
}

body.dark #home-section #announcementsList .announcement-item {
  background: linear-gradient(180deg, rgba(13, 27, 45, 0.95), rgba(9, 20, 34, 0.94));
  border-color: rgba(132, 167, 220, 0.2);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.24);
}

body.dark #home-section #announcementsList .announcement-item:hover {
  border-color: rgba(125, 211, 252, 0.42);
}

body.dark #home-section #announcementsList .announcement-item > div:first-child {
  color: #dce9ff;
}

body.dark #home-section #announcementsList .meta {
  color: #9fb2d1;
}

body.dark #home-section #announcementsList .meta i {
  color: #8ea4c6;
}

@media (max-width: 640px) {
  #home-section {
    gap: 0.72rem;
  }

  #home-section #courseInfo,
  #home-section #homeOverall,
  #home-section #studentTimeline,
  #home-section #guestLandingCard {
    border-radius: 14px;
  }

  #home-section #homeOverall,
  #home-section #studentTimeline {
    padding: 0.78rem;
  }

  #home-section #announcementsList .announcement-item {
    padding: 0.74rem 0.78rem;
    border-radius: 12px;
  }

  #home-section #announcementsList .announcement-item > div:first-child {
    font-size: 0.92rem;
  }
}

/* ------------------------------------------------------------------ */
/* Home UI polish v4                                                   */
/* ------------------------------------------------------------------ */
#home-section {
  gap: 1rem;
}

#home-section > h2 {
  font-size: clamp(1.42rem, 2.2vw, 1.88rem);
  letter-spacing: 0.01em;
}

#home-section #courseInfo {
  padding: 1.05rem 1.12rem;
}

#home-section #courseInfo p {
  margin: 0;
  color: #1f3452;
  line-height: 1.72;
}

#home-section #homeOverall,
#home-section #studentTimeline {
  border-radius: 18px;
}

#home-section #studentTimeline .student-timeline {
  margin-top: 0.82rem;
  padding-left: 1.36rem;
  gap: 0.7rem;
}

#home-section #studentTimeline .timeline-item {
  border-radius: 14px;
  border-color: rgba(22, 119, 255, 0.14);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.07);
  padding: 0.78rem 0.9rem;
}

#home-section #studentTimeline .timeline-header {
  align-items: center;
  gap: 0.6rem;
}

#home-section #studentTimeline .timeline-title {
  max-width: none;
  flex: 1 1 auto;
  font-size: 0.95rem;
}

#home-section #studentTimeline .timeline-meta {
  gap: 0.34rem 0.6rem;
}

#home-section #studentTimeline .timeline-action {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 0.72rem !important;
  border-radius: 10px !important;
  font-size: 0.8rem !important;
  font-weight: 700;
  box-shadow: none !important;
}

#home-section #studentTimeline .timeline-action:hover {
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.14) !important;
}

#home-section #announcementsList .announcement-item {
  position: relative;
  padding-left: 1.02rem;
}

#home-section #announcementsList .announcement-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.46rem;
  bottom: 0.46rem;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #1677ff, #22c55e);
  opacity: 0.85;
}

body.dark #home-section #courseInfo p {
  color: #c7d8f4;
}

@media (max-width: 640px) {
  #home-section #courseInfo {
    padding: 0.86rem 0.9rem;
  }

  #home-section #studentTimeline .student-timeline {
    padding-left: 1rem;
    gap: 0.62rem;
  }

  #home-section #studentTimeline .timeline-item {
    padding: 0.68rem 0.72rem;
    border-radius: 12px;
  }

  #home-section #studentTimeline .timeline-action {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 0.62rem !important;
    border-radius: 9px !important;
    font-size: 0.76rem !important;
  }

  #home-section #announcementsList .announcement-item {
    padding-left: 0.88rem;
  }
}

/* ------------------------------------------------------------------ */
/* Assignments UI polish v1                                            */
/* ------------------------------------------------------------------ */
#assignments-section {
  gap: 0.9rem;
}

#assignments-section .search-bar {
  max-width: 540px;
}

#assignmentsList {
  display: grid;
  gap: 0.72rem;
}

#assignmentsList .assignment-category-title {
  margin: 0.5rem 0 0.1rem;
  padding-left: 0.72rem;
  border-left: 3px solid rgba(22, 119, 255, 0.7);
  font-size: 0.92rem;
  font-weight: 700;
  color: #1a3560;
  letter-spacing: 0.01em;
}

#assignmentsList .assignment-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: stretch;
  padding: 0.95rem 1rem;
  border-radius: 15px;
  border-color: rgba(15, 23, 42, 0.11);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.07);
}

#assignmentsList .assignment-card .details {
  min-width: 0;
}

#assignmentsList .assignment-card h4 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
  color: #15345f;
}

#assignmentsList .assignment-card .meta {
  margin-top: 0.28rem;
  font-size: 0.79rem;
  color: #5e7390;
}

#assignmentsList .assignment-card .description {
  margin-top: 0.52rem;
  color: #2b4364;
  line-height: 1.58;
  max-height: 7.2rem;
  overflow-y: auto;
  padding-right: 0.1rem;
}

#assignmentsList .assignment-card .actions {
  justify-content: center;
  align-items: flex-end;
  min-width: 240px;
}

#assignmentsList .assignment-card.assignment-card--actions-right .actions {
  justify-content: flex-end;
  align-items: flex-end;
}

#assignmentsList .assignment-status-stack {
  margin-top: 0.58rem !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem !important;
}

#assignmentsList .assignment-action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.45rem;
}

#assignmentsList .assignment-card.assignment-card--actions-right .assignment-action-row {
  justify-content: flex-end;
}

#assignmentsList .assignment-action-row > .btn-blue,
#assignmentsList .assignment-action-row > .btn-green,
#assignmentsList .assignment-action-row > .btn-red,
#assignmentsList .assignment-action-row > .btn-yellow,
#assignmentsList .assignment-action-row > .btn-secondary,
#assignmentsList .assignment-action-row > .btn-grey,
#assignmentsList .assignment-action-row > .btn-outline {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 0.78rem !important;
  border-radius: 10px !important;
  font-size: 0.83rem !important;
}

#assignmentsList .assignment-upload-inline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  margin-top: 0.08rem;
  gap: 0.34rem;
  padding: 0.24rem 0.4rem;
  border-radius: 11px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(241, 245, 253, 0.78);
}

#assignmentsList .assignment-upload-inline .assignment-upload-label {
  margin: 0;
  min-height: 36px;
  height: 36px;
  min-width: 110px;
  justify-content: center;
  padding: 0 0.6rem;
  font-size: 0.83rem;
  font-weight: 700;
}

#assignmentsList .assignment-upload-inline .assignment-file-name {
  min-width: 140px;
  max-width: 240px;
  line-height: 36px;
  font-size: 0.83rem;
}

#assignmentsList .assignment-upload-inline > .assignment-upload-submit {
  min-height: 36px !important;
  height: 36px !important;
  min-width: 96px;
  padding: 0 0.7rem !important;
  border-radius: 10px !important;
  font-size: 0.83rem !important;
}

#assignmentsList .assignment-review-block {
  --grade-accent: #1677ff;
  --grade-soft-bg: rgba(22, 119, 255, 0.1);
  --grade-border: rgba(22, 119, 255, 0.24);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: min(100%, 860px);
}

#assignmentsList .assignment-review-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.38rem 0.62rem;
}

#assignmentsList .assignment-grade-pill,
#assignmentsList .assignment-grade-notice {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  padding: 0.26rem 0.62rem;
  border-radius: 999px;
  border: 1px solid var(--grade-border);
  background: var(--grade-soft-bg);
  color: var(--grade-accent);
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
}

#assignmentsList .assignment-grade-pill i,
#assignmentsList .assignment-grade-icon {
  font-size: 0.75rem;
}

#assignmentsList .assignment-grader-meta {
  font-size: 0.81rem;
  line-height: 1.25;
  color: #4f6482;
  font-weight: 600;
}

#assignmentsList .assignment-grade-by {
  color: #4f6482;
}

#assignmentsList .assignment-grade-grader {
  cursor: pointer;
  text-decoration: underline;
}

#assignmentsList .assignment-grade-grader.is-static {
  cursor: default;
  text-decoration: none;
}

#assignmentsList .assignment-grade-email {
  color: #4f6482;
}

#assignmentsList .assignment-feedback-body {
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(241, 245, 253, 0.78);
  padding: 0.52rem 0.64rem;
}

#assignmentsList .assignment-feedback-label {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  font-size: 0.76rem;
  letter-spacing: 0.01em;
  color: #4f6482;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

#assignmentsList .assignment-feedback-content {
  font-size: 0.84rem;
  line-height: 1.5;
  color: #2b4364;
  word-break: break-word;
}

#assignmentsList .assignment-feedback-content > :first-child {
  margin-top: 0;
}

#assignmentsList .assignment-feedback-content > :last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Assignment detail UI polish v3                                      */
/* ------------------------------------------------------------------ */
#assignment-page-section {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

#assignmentPageContent.assignment-page-content {
  display: flex;
  flex-direction: column;
  gap: 0.74rem;
  width: min(1280px, calc(100% - 1.2rem));
  margin: 0 auto;
}

#assignmentPageContent .assignment-detail-shell {
  border-radius: 20px;
  border: 1px solid rgba(160, 181, 208, 0.36);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.96));
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1);
  padding: 1.14rem 1.24rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

#assignmentPageContent .assignment-page-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
}

#assignmentPageContent .assignment-page-toolbar .assignment-page-back-btn,
#assignmentPageContent .assignment-page-toolbar .assignment-page-edit-btn {
  min-width: 128px;
}

#assignmentPageContent .assignment-detail-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 0 0 1.08rem;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(191, 206, 227, 0.84);
  background: transparent;
  box-shadow: none;
}

#assignmentPageContent .assignment-detail-title {
  margin: 0;
  color: #183a66;
  font-size: clamp(1.24rem, 1.95vw, 1.56rem);
  line-height: 1.24;
  letter-spacing: 0.003em;
}

#assignmentPageContent .assignment-hero-description {
  color: #33557e;
  font-size: 0.99rem;
  line-height: 1.64;
  max-width: 96ch;
  padding: 0.58rem 0.72rem;
  border-left: 3px solid rgba(59, 130, 246, 0.32);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(232, 242, 255, 0.62), rgba(241, 248, 255, 0.3));
  text-shadow: none;
}

#assignmentPageContent .assignment-hero-description > :first-child {
  margin-top: 0;
}

#assignmentPageContent .assignment-hero-description > :last-child {
  margin-bottom: 0;
}

#assignmentPageContent .assignment-hero-description .info-card,
#assignmentPageContent .assignment-hero-description .warning-card,
#assignmentPageContent .assignment-hero-description .success-card,
#assignmentPageContent .assignment-hero-description .note-card,
#assignmentPageContent .assignment-hero-description .late-badge,
#assignmentPageContent .assignment-hero-description .penalty-badge,
#assignmentPageContent .assignment-hero-description .green-card {
  margin-top: 0.24rem;
  margin-bottom: 0.24rem;
}

#assignmentPageContent .assignment-detail-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.4rem 0.58rem;
  padding-top: 0.82rem;
  border-top: 1px solid rgba(191, 206, 227, 0.72);
}

#assignmentPageContent .assignment-kpi-card {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.24rem 0.22rem 0.24rem 0.62rem;
  border-left: 3px solid var(--kpi-accent, rgba(148, 163, 184, 0.42));
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#assignmentPageContent .assignment-kpi-card.tone-blue {
  --kpi-accent: rgba(37, 99, 235, 0.5);
}

#assignmentPageContent .assignment-kpi-card.tone-green {
  --kpi-accent: rgba(22, 163, 74, 0.48);
}

#assignmentPageContent .assignment-kpi-card.tone-amber {
  --kpi-accent: rgba(217, 119, 6, 0.54);
}

#assignmentPageContent .assignment-kpi-card.tone-violet {
  --kpi-accent: rgba(124, 58, 237, 0.48);
}

#assignmentPageContent .assignment-kpi-card.tone-red {
  --kpi-accent: rgba(220, 38, 38, 0.52);
}

#assignmentPageContent .assignment-kpi-card.tone-slate {
  --kpi-accent: rgba(71, 85, 105, 0.4);
}

#assignmentPageContent .assignment-kpi-icon {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.72rem;
}

#assignmentPageContent .assignment-kpi-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

#assignmentPageContent .assignment-kpi-label {
  font-size: 0.68rem;
  line-height: 1.1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: #5e7494;
  font-weight: 700;
}

#assignmentPageContent .assignment-kpi-value {
  margin-top: 0;
  font-size: 1.05rem;
  line-height: 1.24;
  color: #1e406b;
  font-weight: 740;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

#assignmentPageContent .assignment-kpi-meta {
  margin-top: 0.04rem;
  font-size: 0.82rem;
  line-height: 1.3;
  color: #627c9f;
}

#assignmentPageContent .assignment-kpi-card.tone-blue .assignment-kpi-icon {
  background: rgba(59, 130, 246, 0.14);
  color: #1e40af;
}

#assignmentPageContent .assignment-kpi-card.tone-green .assignment-kpi-icon {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
}

#assignmentPageContent .assignment-kpi-card.tone-amber .assignment-kpi-icon {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

#assignmentPageContent .assignment-kpi-card.tone-violet .assignment-kpi-icon {
  background: rgba(139, 92, 246, 0.14);
  color: #6d28d9;
}

#assignmentPageContent .assignment-kpi-card.tone-red .assignment-kpi-icon {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}

#assignmentPageContent .assignment-kpi-card.tone-slate .assignment-kpi-icon {
  background: rgba(148, 163, 184, 0.16);
  color: #334155;
}

#assignmentPageContent .assignment-detail-shell .assignment-detail-layout {
  gap: 1.08rem;
}

#assignmentPageContent .assignment-detail-shell .assignment-detail-main,
#assignmentPageContent .assignment-detail-shell .assignment-detail-side {
  gap: 0;
}

#assignmentPageContent .assignment-detail-shell > .assignment-detail-section,
#assignmentPageContent .assignment-detail-shell .assignment-detail-main > .assignment-detail-section {
  margin: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  padding: 1rem 0 0.9rem;
}

#assignmentPageContent .assignment-detail-shell > .assignment-detail-section + .assignment-detail-section,
#assignmentPageContent .assignment-detail-shell .assignment-detail-main > .assignment-detail-section + .assignment-detail-section {
  border-top: 1px solid rgba(226, 232, 240, 0.9);
}

#assignmentPageContent .assignment-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 294px;
  gap: 1.08rem;
  align-items: start;
}

#assignmentPageContent .assignment-detail-layout.no-side {
  grid-template-columns: minmax(0, 1fr);
}

#assignmentPageContent .assignment-detail-main,
#assignmentPageContent .assignment-detail-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

#assignmentPageContent .assignment-detail-shell .assignment-detail-main {
  gap: 0;
}

#assignmentPageContent .assignment-detail-shell .assignment-detail-side {
  gap: 0.74rem;
  padding-top: 0.4rem;
}

#assignmentPageContent .assignment-overview-card,
#assignmentPageContent .assignment-stats-card,
#assignmentPageContent .submission-history-card,
#assignmentPageContent .assignment-side-card {
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(248, 251, 255, 0.86);
  box-shadow: none;
}

#assignmentPageContent .card:hover,
#assignmentPageContent .submission-history-card:hover {
  transform: none;
  border-color: rgba(148, 163, 184, 0.24);
  box-shadow: none;
}

#assignmentPageContent .assignment-section-card {
  padding: 0.96rem 0;
}

#assignmentPageContent .assignment-detail-section {
  margin-top: 0;
}

#assignmentPageContent .assignment-overview-card > h4,
#assignmentPageContent .assignment-stats-card > h4 {
  margin: 0 0 0.34rem;
  font-size: 0.9rem;
  color: #163761;
}

#assignmentPageContent .assignment-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.44rem;
}

#assignmentPageContent .assignment-section-heading h4 {
  margin: 0;
  font-size: 1rem;
  color: #163963;
}

#assignmentPageContent .assignment-section-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: rgba(241, 245, 253, 0.92);
  color: #35567e;
  border-radius: 8px;
  padding: 0.14rem 0.48rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

#assignmentPageContent .assignment-section-toggle:hover {
  background: rgba(230, 238, 250, 0.96);
  border-color: rgba(100, 116, 139, 0.38);
}

#assignmentPageContent .assignment-section-toggle i {
  font-size: 0.66rem;
}

#assignmentPageContent .assignment-section-body {
  margin-top: 0.42rem;
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}

#assignmentPageContent .assignment-stats-card .admin-dashboard-metrics {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.44rem;
  margin-top: 0.4rem;
}

#assignmentPageContent .assignment-stats-card.assignment-side-card {
  margin-top: 0.1rem;
}

#assignmentPageContent .assignment-stats-card .admin-dashboard-metric {
  display: flex;
  align-items: center;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  box-shadow: none;
  background: rgba(245, 249, 255, 0.92);
  padding: 0.5rem 0.56rem;
  gap: 0.48rem;
}

#assignmentPageContent .assignment-stats-card .admin-dashboard-metric::before {
  display: none;
}

#assignmentPageContent .assignment-stats-card .admin-dashboard-metric .icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 0.78rem;
}

#assignmentPageContent .assignment-stats-card .admin-dashboard-metric .value {
  font-size: 1.12rem;
  font-weight: 700;
  min-width: 1.9ch;
  color: #173a66;
}

#assignmentPageContent .assignment-stats-card .admin-dashboard-metric .label {
  font-size: 0.72rem;
  letter-spacing: 0.045em;
  color: #4e6586;
}

#assignmentPageContent .assignment-overview-body {
  color: #304b6e;
  line-height: 1.5;
}

#assignmentPageContent .assignment-overview-body p,
#assignmentPageContent .assignment-overview-body ul,
#assignmentPageContent .assignment-overview-body ol {
  margin-top: 0.28rem;
  margin-bottom: 0.28rem;
}

#assignmentPageContent .assignment-pdf-section .pdf-viewer-controls {
  margin-bottom: 0.24rem;
  padding: 0.35rem 0.42rem;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(245, 249, 255, 0.95);
}

#assignmentPageContent .assignment-pdf-section .pdf-container {
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: #ffffff;
  max-height: min(58vh, 620px);
}

#assignmentPageContent .assignment-submission-section {
  gap: 0.48rem;
}

#assignmentPageContent .assignment-submission-section > h4 {
  margin: 0.02rem 0 0;
  font-size: 0.93rem;
}

#assignmentPageContent .assignment-submission-section .late-badge,
#assignmentPageContent .assignment-submission-section .penalty-badge,
#assignmentPageContent .assignment-submission-section .green-card {
  margin-top: 0.08rem;
  padding: 0.38rem 0.5rem;
  border-left-width: 3px;
  border-radius: 9px;
  font-size: 0.78rem;
  gap: 0.08rem;
}

#assignmentPageContent .assignment-submission-section .submission-status {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  margin-top: 0;
  font-size: 0.78rem;
  font-weight: 640;
  padding: 0.24rem 0.62rem;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: rgba(241, 245, 253, 0.84);
  color: #334e73;
}

#assignmentPageContent .assignment-inline-preview-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.34rem;
}

#assignmentPageContent .assignment-inline-preview-actions .assignment-preview-btn {
  margin-top: 0;
}

#assignmentPageContent .assignment-inline-preview-body .pdf-container {
  max-height: min(52vh, 540px);
}

#assignmentPageContent .assignment-submission-section .upload-container.assignment-upload-row {
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 0.5rem;
  padding: 0.34rem 0.42rem;
  border-radius: 9px;
  background: rgba(245, 249, 255, 0.88);
  border: 1px dashed rgba(148, 163, 184, 0.26);
  width: min(100%, 720px);
  max-width: 100%;
  align-self: flex-start;
}

#assignmentPageContent .assignment-submission-section .upload-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  height: 30px;
  min-width: 120px;
  border-radius: 8px;
  padding: 0 0.7rem;
  font-size: 0.8rem;
}

#assignmentPageContent .assignment-submission-section .file-name {
  flex: 1 1 240px;
  min-width: 160px;
  max-width: 280px;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#assignmentPageContent .assignment-submission-section .assignment-upload-submit {
  min-width: 108px;
}

#assignmentPageContent .offline-submission-msg {
  text-align: left;
  font-size: 0.82rem;
  color: #4f6583;
}

#assignmentPageContent .assignment-preview-btn,
#assignmentPageContent .feedback-action-btn {
  margin-top: 0;
}

#assignmentPageContent .assignment-submission-section .assignment-preview-btn,
#assignmentPageContent .assignment-submission-section .feedback-action-btn,
#assignmentPageContent .assignment-submission-section .assignment-upload-submit,
#assignmentPageContent .assignment-submission-section .assignment-section-toggle {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 0.62rem !important;
  border-radius: 9px;
  font-size: 0.77rem !important;
}

#assignmentPageContent .grade-feedback-card,
#assignmentPageContent .assignment-review-card {
  margin-top: 0.52rem;
  padding: 0.78rem 0.88rem;
  border-radius: 12px;
  border: 1px solid rgba(160, 181, 208, 0.28);
  background: rgba(247, 251, 255, 0.86);
  box-shadow: none;
}

#assignmentPageContent .grade-feedback-card h3,
#assignmentPageContent .assignment-review-card h4 {
  margin-top: 0;
  margin-bottom: 0.42rem;
  font-size: 1rem;
}

#assignmentPageContent .assignment-review-card .review-list {
  gap: 0.42rem;
}

#assignmentPageContent .assignment-review-card .review-item {
  padding: 0.48rem 0.56rem;
  border-radius: 9px;
  box-shadow: none;
}

#assignmentPageContent .assignment-review-card .review-status-pill {
  font-size: 0.68rem;
  padding: 0.12rem 0.46rem;
}

#assignmentPageContent .assignment-review-card {
  border-style: solid;
  border-color: rgba(138, 159, 188, 0.28);
  background: linear-gradient(180deg, rgba(246, 250, 255, 0.88), rgba(241, 246, 253, 0.74));
}

#assignmentPageContent .assignment-review-card .assignment-section-heading {
  margin-bottom: 0.14rem;
}

#assignmentPageContent .assignment-review-card .assignment-section-heading h4 {
  font-size: 0.94rem;
}

#assignmentPageContent .assignment-review-card .assignment-section-body {
  margin-top: 0.2rem;
  gap: 0.5rem;
}

#assignmentPageContent .assignment-review-card .review-item {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

#assignmentPageContent .assignment-review-card .review-reason-input {
  border-radius: 10px;
  border-color: rgba(148, 163, 184, 0.3);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: none;
  padding: 0.54rem 0.68rem;
}

#assignmentPageContent .grade-feedback-card .late-badge,
#assignmentPageContent .grade-feedback-card .penalty-badge,
#assignmentPageContent .grade-feedback-card .green-card {
  margin-top: 0.1rem;
  font-size: 0.77rem;
}

#assignmentPageContent .assignment-grade-details-toggle {
  margin-left: auto;
  align-self: center;
}

#assignmentPageContent .assignment-grade-details-body {
  margin-top: 0.04rem;
}

#assignmentPageContent .assignment-grade-gauge {
  margin-bottom: 0.08rem !important;
  gap: 0.12rem !important;
}

#assignmentPageContent .assignment-grade-gauge > div:first-child {
  height: 8px !important;
  border-radius: 4px !important;
  background: #e3eaf5 !important;
  border: none !important;
  box-shadow: none !important;
}

#assignmentPageContent .assignment-grade-gauge > div:first-child > div {
  border-radius: 4px !important;
}

#assignmentPageContent .assignment-grade-gauge > div:last-child {
  display: none !important;
}

#assignmentPageContent .assignment-grade-summary-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.34rem 0.42rem;
  margin-bottom: 0.16rem;
}

#assignmentPageContent .assignment-grade-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 34px;
  height: 34px;
  padding: 0 0.64rem;
  border-radius: 999px;
  font-size: 0.92rem;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid rgba(132, 161, 196, 0.34);
  background: rgba(236, 244, 255, 0.88);
  color: #2f527d;
  font-weight: 700;
}

#assignmentPageContent .assignment-grade-score-pill {
  border: 1px solid var(--grade-border, rgba(37, 99, 235, 0.22));
  background: var(--grade-soft, rgba(37, 99, 235, 0.1));
  color: var(--grade-color, #2563eb);
  font-weight: 700;
  font-size: inherit;
}

#assignmentPageContent .assignment-grade-grader-chip {
  border-color: rgba(148, 163, 184, 0.32);
  background: rgba(240, 246, 255, 0.88);
  color: #35567e;
  font-weight: 700;
  font-size: inherit;
  font: inherit;
  line-height: 1;
}

#assignmentPageContent .assignment-grade-grader-chip,
#assignmentPageContent .assignment-grade-grader-chip * {
  font-weight: 700;
}

#assignmentPageContent .assignment-grade-meta-chip i {
  font-size: 0.86rem;
}

#assignmentPageContent .assignment-grade-grader-chip.is-link {
  cursor: pointer;
}

#assignmentPageContent .assignment-grade-grader-chip.is-link:hover {
  border-color: rgba(59, 130, 246, 0.42);
  background: rgba(225, 238, 255, 0.88);
}

#assignmentPageContent .assignment-feedback-panel {
  display: grid;
  gap: 0.28rem;
  margin-bottom: 0.08rem;
  border-radius: 10px;
  border: 1px solid rgba(160, 181, 208, 0.3);
  border-left-width: 3px;
  border-left-color: rgba(59, 130, 246, 0.56);
  background: rgba(255, 255, 255, 0.82);
  padding: 0.48rem 0.56rem;
}

#assignmentPageContent .assignment-feedback-panel-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #37577f;
}

#assignmentPageContent .assignment-feedback-panel-content {
  font-size: 0.94rem;
  line-height: 1.58;
  color: #2d4c74;
}

#assignmentPageContent .assignment-feedback-panel-content > :first-child {
  margin-top: 0;
}

#assignmentPageContent .assignment-feedback-panel-content > :last-child {
  margin-bottom: 0;
}

#assignmentPageContent .assignment-grade-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.32rem;
  margin-top: 0.02rem;
}

#assignmentPageContent .submission-history-card {
  margin-top: 0.52rem;
  padding: 0.72rem 0.8rem;
}

#assignmentPageContent .submission-history-list {
  gap: 0.4rem;
}

#assignmentPageContent .submission-history-item {
  padding: 0.44rem 0.54rem;
  border-radius: 9px;
  gap: 0.56rem;
  box-shadow: none;
}

#assignmentPageContent .submission-history-item .status-tag {
  padding: 0.12rem 0.44rem;
  font-size: 0.7rem;
  font-weight: 600;
}

#assignmentPageContent .submission-history-title {
  font-size: 0.84rem;
}

#assignmentPageContent .submission-history-date {
  font-size: 0.74rem;
}

#assignmentPageContent .assignment-grade-submissions-btn {
  width: 100%;
}

/* ------------------------------------------------------------------ */
/* Assignment grading UI polish v1                                     */
/* ------------------------------------------------------------------ */
#grade-submission-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  width: min(1560px, calc(100% - 0.6rem)) !important;
}

#grade-submission-section #backToGradesBtn {
  margin: 0 0 0.68rem 0.05rem !important;
}

#grade-submission-section .grade-submission-heading {
  margin: 0 0 0.66rem;
  padding: 0 0.1rem;
}

#grade-submission-section .grade-submission-heading h2 {
  font-size: clamp(1.06rem, 1.6vw, 1.32rem);
  color: #15345f;
}

#gradeSubmissionContent {
  border: 1px solid rgba(15, 23, 42, 0.11);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(245, 249, 255, 0.95));
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.1);
  padding: 0.86rem;
  width: 100%;
}

#gradeSubmissionContent .grade-layout {
  gap: 0.75rem;
  height: clamp(620px, calc(100vh - 250px), 860px);
}

#gradeSubmissionContent .grade-student-list,
#gradeSubmissionContent .grade-pdf-area,
#gradeSubmissionContent .grade-side-panel {
  border-radius: 14px;
}

#gradeSubmissionContent .grade-student-list {
  flex-basis: 236px;
  max-width: 252px;
  padding: 0.72rem;
}

#gradeSubmissionContent .grade-student-items {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 0;
}

#gradeSubmissionContent .grade-list-controls {
  margin-bottom: 0.6rem;
}

#gradeSubmissionContent .grade-student-item {
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
}

#gradeSubmissionContent .grade-student-item .student-score {
  font-size: 0.8rem;
}

#gradeSubmissionContent .grade-pdf-area {
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

#gradeSubmissionContent .pdf-viewer-controls {
  padding: 0.52rem 0.6rem;
  gap: 0.4rem;
}

#gradeSubmissionContent .annot-toolbar {
  padding: 0.52rem 0.6rem;
  gap: 0.4rem;
}

#gradeSubmissionContent .annot-toolbar button {
  min-height: 34px;
  padding: 0 0.58rem;
  border-radius: 9px;
  font-size: 0.78rem;
}

#gradeSubmissionContent .annot-toolbar input[type="text"] {
  min-width: 140px;
  flex: 1 1 140px;
}

#gradeSubmissionContent .pdf-container {
  border-radius: 12px;
}

#gradeSubmissionContent .grade-side-panel {
  flex-basis: 268px;
  max-width: 286px;
  padding: 0.72rem;
}

#gradeSubmissionContent #gradeFormContainer h3 {
  margin-bottom: 0.38rem;
  font-size: 0.94rem;
}

#gradeSubmissionContent #gradeFormContainer label {
  margin-top: 0.58rem;
  font-size: 0.8rem;
  color: #465977;
}

#gradeSubmissionContent #gradeFormContainer input[type="number"],
#gradeSubmissionContent #gradeFormContainer textarea,
#gradeSubmissionContent .manual-grade-form .manual-input,
#gradeSubmissionContent .manual-grade-form .manual-textarea {
  border-radius: 10px;
  font-size: 0.84rem;
  padding: 0.44rem 0.62rem;
}

#gradeSubmissionContent .grade-nav-row {
  margin-top: 0.68rem !important;
  gap: 0.45rem !important;
}

#gradeSubmissionContent .grade-nav-row > .btn-secondary {
  background: #edf2fa;
  border-color: #d5dfed;
  color: #1f3350;
}

#gradeSubmissionContent .grade-nav-row > .btn-secondary:hover {
  background: #e4ebf7;
  border-color: #c5d2e6;
}

body.dark #assignmentsList .assignment-category-title {
  color: #dce9ff;
  border-left-color: rgba(125, 211, 252, 0.75);
}

body.dark #assignmentsList .assignment-card {
  border-color: rgba(132, 167, 220, 0.24);
  background: linear-gradient(180deg, rgba(10, 20, 34, 0.92), rgba(8, 16, 28, 0.94));
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.24);
}

body.dark #assignmentsList .assignment-card h4 {
  color: #dce9ff;
}

body.dark #assignmentsList .assignment-card .meta {
  color: #9fb2d1;
}

body.dark #assignmentsList .assignment-card .description {
  color: #c6d6ef;
}

body.dark #assignmentsList .assignment-upload-inline {
  border-color: rgba(132, 167, 220, 0.3);
  background: rgba(15, 31, 52, 0.72);
}

body.dark #assignmentsList .assignment-grade-pill,
body.dark #assignmentsList .assignment-grade-notice {
  border-color: rgba(132, 167, 220, 0.3);
  background: rgba(15, 31, 52, 0.76);
  box-shadow: none;
}

body.dark #assignmentsList .assignment-grader-meta,
body.dark #assignmentsList .assignment-grade-by,
body.dark #assignmentsList .assignment-grade-email {
  color: #a7bddf;
}

body.dark #assignmentsList .assignment-feedback-body {
  border-color: rgba(132, 167, 220, 0.3);
  background: rgba(15, 31, 52, 0.72);
}

body.dark #assignmentsList .assignment-feedback-label {
  color: #9fb2d1;
}

body.dark #assignmentsList .assignment-feedback-content {
  color: #c6d6ef;
}

body.dark #assignmentPageContent .assignment-detail-hero {
  border: none;
  border-bottom: 1px solid rgba(132, 167, 220, 0.26);
  background: transparent;
  box-shadow: none;
}

body.dark #assignmentPageContent .assignment-detail-title {
  color: #e8f0ff;
}

body.dark #assignmentPageContent .assignment-hero-description {
  color: rgba(220, 235, 255, 0.94);
  border-left-color: rgba(96, 165, 250, 0.54);
  background: linear-gradient(90deg, rgba(24, 45, 72, 0.7), rgba(15, 31, 52, 0.35));
}

body.dark #assignmentPageContent .assignment-kpi-card {
  background: transparent;
  border-left-color: var(--kpi-accent, rgba(132, 167, 220, 0.34));
}

body.dark #assignmentPageContent .assignment-kpi-card.tone-blue {
  background: transparent;
}

body.dark #assignmentPageContent .assignment-kpi-card.tone-green {
  background: transparent;
}

body.dark #assignmentPageContent .assignment-kpi-card.tone-amber {
  background: transparent;
}

body.dark #assignmentPageContent .assignment-kpi-card.tone-violet {
  background: transparent;
}

body.dark #assignmentPageContent .assignment-kpi-card.tone-red {
  background: transparent;
}

body.dark #assignmentPageContent .assignment-kpi-card.tone-slate {
  background: transparent;
}

body.dark #assignmentPageContent .assignment-kpi-label {
  color: rgba(176, 200, 235, 0.9);
}

body.dark #assignmentPageContent .assignment-kpi-value {
  color: #e7f0ff;
}

body.dark #assignmentPageContent .assignment-kpi-meta {
  color: rgba(180, 208, 245, 0.88);
}

body.dark #assignmentPageContent .assignment-detail-kpi-grid {
  border-top-color: rgba(132, 167, 220, 0.32);
}

body.dark #assignmentPageContent .assignment-detail-shell {
  background: linear-gradient(180deg, rgba(9, 20, 34, 0.95), rgba(9, 19, 32, 0.93));
  border-color: rgba(132, 167, 220, 0.34);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.36);
}

body.dark #assignmentPageContent .assignment-detail-shell .assignment-detail-section + .assignment-detail-section {
  border-top-color: rgba(132, 167, 220, 0.2);
}

body.dark #assignmentPageContent .assignment-kpi-card.tone-blue .assignment-kpi-icon {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

body.dark #assignmentPageContent .assignment-kpi-card.tone-green .assignment-kpi-icon {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

body.dark #assignmentPageContent .assignment-kpi-card.tone-amber .assignment-kpi-icon {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
}

body.dark #assignmentPageContent .assignment-kpi-card.tone-violet .assignment-kpi-icon {
  background: rgba(139, 92, 246, 0.2);
  color: #c4b5fd;
}

body.dark #assignmentPageContent .assignment-kpi-card.tone-red .assignment-kpi-icon {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

body.dark #assignmentPageContent .assignment-kpi-card.tone-slate .assignment-kpi-icon {
  background: rgba(148, 163, 184, 0.2);
  color: #cbd5e1;
}

body.dark #assignmentPageContent .assignment-overview-card,
body.dark #assignmentPageContent .assignment-stats-card,
body.dark #assignmentPageContent .submission-history-card,
body.dark #assignmentPageContent .assignment-side-card {
  background: rgba(14, 29, 48, 0.72);
  border-color: rgba(132, 167, 220, 0.3);
  box-shadow: none;
}

body.dark #assignmentPageContent .assignment-overview-card h4,
body.dark #assignmentPageContent .assignment-detail-section h4,
body.dark #assignmentPageContent .submission-history-card h4,
body.dark #assignmentPageContent .assignment-stats-card h4 {
  color: #dce9ff;
}

body.dark #assignmentPageContent .assignment-section-toggle {
  border-color: rgba(132, 167, 220, 0.34);
  background: rgba(15, 31, 52, 0.72);
  color: #a7bddf;
}

body.dark #assignmentPageContent .assignment-section-toggle:hover {
  background: rgba(24, 45, 72, 0.82);
}

body.dark #assignmentPageContent .assignment-overview-body {
  color: #c4d4ed;
}

body.dark #assignmentPageContent .assignment-pdf-section .pdf-viewer-controls {
  border-color: rgba(132, 167, 220, 0.3);
  background: rgba(15, 31, 52, 0.7);
}

body.dark #assignmentPageContent .assignment-pdf-section .pdf-container {
  border-color: rgba(132, 167, 220, 0.3);
  background: rgba(7, 15, 27, 0.88);
}

body.dark #assignmentPageContent .assignment-submission-section .upload-container.assignment-upload-row {
  background: rgba(15, 31, 52, 0.68);
  border-color: rgba(132, 167, 220, 0.28);
}

body.dark #assignmentPageContent .assignment-submission-section .submission-status {
  background: rgba(20, 38, 62, 0.78);
  border-color: rgba(132, 167, 220, 0.32);
  color: #bfd3f2;
}

body.dark #assignmentPageContent .assignment-submission-section .file-name,
body.dark #assignmentPageContent .offline-submission-msg {
  color: #a7bddf;
}

body.dark #assignmentPageContent .assignment-stats-card .admin-dashboard-metric {
  background: rgba(15, 31, 52, 0.72);
  border-color: rgba(132, 167, 220, 0.28);
}

body.dark #assignmentPageContent .assignment-stats-card .admin-dashboard-metric .value {
  color: #e6efff;
}

body.dark #assignmentPageContent .assignment-stats-card .admin-dashboard-metric .label {
  color: #9db1d2;
}

body.dark #assignmentPageContent .grade-feedback-card,
body.dark #assignmentPageContent .assignment-review-card {
  border-color: rgba(132, 167, 220, 0.32);
  background: rgba(14, 29, 48, 0.76);
}

body.dark #assignmentPageContent .assignment-review-card {
  background: linear-gradient(180deg, rgba(14, 29, 48, 0.88), rgba(12, 24, 40, 0.78));
}

body.dark #assignmentPageContent .assignment-review-card .review-item {
  background: rgba(12, 25, 42, 0.8);
  border-color: rgba(132, 167, 220, 0.28);
}

body.dark #assignmentPageContent .assignment-review-card .review-reason-input {
  background: rgba(10, 20, 34, 0.88);
  border-color: rgba(132, 167, 220, 0.3);
}

body.dark #assignmentPageContent .assignment-grade-meta-chip,
body.dark #assignmentPageContent .assignment-feedback-panel {
  border-color: rgba(132, 167, 220, 0.34);
  background: rgba(12, 25, 42, 0.78);
}

body.dark #assignmentPageContent .assignment-grade-meta-chip {
  color: #bed5f8;
}

body.dark #assignmentPageContent .assignment-grade-score-pill {
  border-color: rgba(96, 165, 250, 0.45);
  background: rgba(37, 99, 235, 0.24);
  color: #bfdbfe;
}

body.dark #assignmentPageContent .assignment-grade-grader-chip {
  border-color: rgba(125, 171, 230, 0.34);
  background: rgba(37, 99, 235, 0.16);
  color: #bed5f8;
}

body.dark #assignmentPageContent .assignment-grade-meta-chip,
body.dark #assignmentPageContent .assignment-feedback-panel-label {
  color: #a7bddf;
}

body.dark #assignmentPageContent .assignment-feedback-panel-content {
  color: #c7d8f4;
}

body.dark #grade-submission-section .grade-submission-heading h2 {
  color: #e6efff;
}

body.dark #gradeSubmissionContent {
  border-color: rgba(132, 167, 220, 0.24);
  background: linear-gradient(180deg, rgba(9, 20, 34, 0.94), rgba(8, 16, 28, 0.96));
  box-shadow: 0 20px 34px rgba(0, 0, 0, 0.34);
}

@media (max-width: 1180px) {
  #assignmentPageContent .assignment-detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #assignmentPageContent .assignment-detail-shell .assignment-detail-side {
    padding-top: 0;
  }

  #gradeSubmissionContent .grade-layout {
    display: grid;
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
  }

  #gradeSubmissionContent .grade-student-list {
    max-width: none;
    flex-basis: auto;
    max-height: 240px;
    overflow-y: auto;
  }

  #gradeSubmissionContent .grade-pdf-area {
    min-height: 420px;
  }

  #gradeSubmissionContent .grade-side-panel {
    max-width: none;
    flex-basis: auto;
    max-height: none;
  }
}

@media (max-width: 820px) {
  #assignmentsList .assignment-card {
    grid-template-columns: 1fr;
    gap: 0.58rem;
  }

  #assignmentsList .assignment-card .actions {
    min-width: 0;
    align-items: flex-start;
  }

  #assignmentsList .assignment-action-row {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  #assignmentsList .assignment-card {
    padding: 0.78rem 0.8rem;
    border-radius: 13px;
  }

  #assignmentsList .assignment-card h4 {
    font-size: 0.93rem;
  }

  #assignmentsList .assignment-card .description {
    max-height: none;
  }

  #assignmentPageContent .assignment-page-toolbar {
    gap: 0.42rem;
  }

  #assignmentPageContent.assignment-page-content {
    width: calc(100% - 0.52rem);
  }

  #assignmentPageContent .assignment-detail-shell {
    border-radius: 14px;
    padding: 0.9rem 0.92rem;
  }

  #assignmentPageContent .assignment-page-toolbar .assignment-page-back-btn,
  #assignmentPageContent .assignment-page-toolbar .assignment-page-edit-btn {
    min-width: 0;
  }

  #assignmentPageContent .assignment-detail-hero {
    padding: 0 0 0.8rem;
    border-radius: 0;
  }

  #assignmentPageContent .assignment-detail-title {
    font-size: 1.1rem;
  }

  #assignmentPageContent .assignment-hero-description {
    font-size: 0.9rem;
    line-height: 1.52;
    padding: 0.52rem 0.58rem;
  }

  #assignmentPageContent .assignment-detail-kpi-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.36rem;
    padding-top: 0.62rem;
  }

  #assignmentPageContent .assignment-kpi-card {
    flex: initial;
    min-height: 0;
    padding: 0.18rem 0.2rem 0.18rem 0.56rem;
  }

  #assignmentPageContent .assignment-kpi-label {
    font-size: 0.58rem;
  }

  #assignmentPageContent .assignment-kpi-value {
    font-size: 0.9rem;
  }

  #assignmentPageContent .assignment-section-card {
    padding: 0.86rem 0 0.72rem;
  }

  #assignmentPageContent .assignment-section-heading {
    align-items: flex-start;
  }

  #assignmentPageContent .assignment-section-toggle {
    padding: 0.14rem 0.46rem;
    font-size: 0.69rem;
  }

  #assignmentPageContent .assignment-inline-preview-actions {
    width: 100%;
  }

  #assignmentPageContent .assignment-submission-section .upload-container.assignment-upload-row {
    gap: 0.3rem;
  }

  #assignmentPageContent .assignment-upload-row .assignment-upload-submit {
    margin-left: 0;
    width: 100%;
  }

  #assignmentPageContent .assignment-grade-summary-row {
    gap: 0.28rem;
  }

  #assignmentPageContent .assignment-grade-actions-row {
    width: 100%;
  }

  #assignmentPageContent .assignment-grade-actions-row > .btn-green,
  #assignmentPageContent .assignment-grade-actions-row > .btn-outline,
  #assignmentPageContent .assignment-grade-actions-row > .assignment-section-toggle {
    width: 100%;
    justify-content: center;
  }

  #assignmentPageContent .submission-history-item {
    flex-direction: column;
    align-items: flex-start;
  }

  #assignmentPageContent .submission-history-actions {
    width: 100%;
    justify-content: flex-start;
  }

  #grade-submission-section {
    width: calc(100% - 0.5rem) !important;
  }

  #gradeSubmissionContent {
    border-radius: 14px;
    padding: 0.58rem;
  }

  #gradeSubmissionContent .grade-pdf-area {
    min-height: 360px;
  }
}

@media (max-width: 420px) {
  #assignmentPageContent .assignment-detail-kpi-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ========================================================================== */
/* Grade Submission Workspace Redesign                                        */
/* ========================================================================== */
#grade-submission-section {
  --gs-bg-0: #f4f7ff;
  --gs-bg-1: #e8f0ff;
  --gs-panel-bg: rgba(255, 255, 255, 0.92);
  --gs-panel-soft: rgba(238, 245, 255, 0.88);
  --gs-border: rgba(27, 70, 132, 0.16);
  --gs-shadow: 0 20px 40px rgba(15, 35, 79, 0.14);
  --gs-text: #17345c;
  --gs-text-soft: #4f6582;
  --gs-primary: #1f6de0;
  --gs-primary-soft: rgba(31, 109, 224, 0.12);
  --gs-success: #0b8e63;
  --gs-warn: #b7791f;
  --gs-danger: #cc3d3d;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: min(1700px, calc(100% - 1rem)) !important;
  margin: 0 auto;
}

#grade-submission-section #backToGradesBtn {
  margin: 0 0 0.78rem !important;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(22, 74, 150, 0.2);
}

#grade-submission-section .grade-submission-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.78rem;
  padding: 0 0.18rem;
}

#grade-submission-section .grade-submission-heading h2 {
  margin: 0;
  color: var(--gs-text);
  font-size: clamp(1.04rem, 1.55vw, 1.32rem);
  letter-spacing: 0.01em;
}

#grade-submission-section .grade-submission-heading #gradeSubmissionActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

#grade-submission-section .grade-header-action {
  border-radius: 10px;
  border: 1px solid var(--gs-border);
  background: var(--gs-panel-bg);
  color: var(--gs-text);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
  font-weight: 650;
  box-shadow: 0 8px 16px rgba(21, 46, 89, 0.08);
}

#gradeSubmissionContent {
  position: relative;
  isolation: isolate;
  width: 100%;
  border: 1px solid var(--gs-border);
  border-radius: 24px;
  padding: 0.95rem;
  background: radial-gradient(circle at 0% 0%, var(--gs-bg-1) 0%, transparent 45%),
    radial-gradient(circle at 100% 0%, rgba(150, 208, 255, 0.32) 0%, transparent 42%),
    linear-gradient(180deg, var(--gs-bg-0) 0%, #f9fbff 60%, #f3f8ff 100%);
  box-shadow: var(--gs-shadow);
  overflow: hidden;
}

#gradeSubmissionContent::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.25), transparent 35%, rgba(255, 255, 255, 0.14));
  pointer-events: none;
}

#gradeSubmissionContent .grade-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(250px, 18%) minmax(0, 1fr) minmax(300px, 22%);
  gap: 0.8rem;
  height: clamp(640px, calc(100vh - 220px), 920px);
}

#gradeSubmissionContent .grade-student-list,
#gradeSubmissionContent .grade-pdf-area,
#gradeSubmissionContent .grade-side-panel {
  background: var(--gs-panel-bg);
  border: 1px solid var(--gs-border);
  border-radius: 18px;
  box-shadow: 0 14px 26px rgba(19, 45, 86, 0.08);
}

#gradeSubmissionContent .grade-student-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.76rem;
  overflow: hidden;
}

#gradeSubmissionContent .grade-student-list-header {
  border: 1px solid rgba(30, 90, 173, 0.12);
  border-radius: 14px;
  background: var(--gs-panel-soft);
  padding: 0.6rem;
  margin-bottom: 0.68rem;
}

#gradeSubmissionContent .grade-list-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

#gradeSubmissionContent .grade-list-title {
  margin: 0;
  color: var(--gs-text);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

#gradeSubmissionContent .grade-list-count {
  min-width: 2.2rem;
  text-align: center;
  border-radius: 999px;
  padding: 0.16rem 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #1f6de0, #0d97c9);
}

#gradeSubmissionContent .grade-list-stats {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}

#gradeSubmissionContent .grade-list-stat {
  border: 1px solid rgba(31, 109, 224, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.86);
  padding: 0.34rem 0.38rem;
  text-align: center;
}

#gradeSubmissionContent .grade-list-stat-value {
  display: block;
  color: var(--gs-text);
  font-size: 0.81rem;
  font-weight: 700;
  line-height: 1.1;
}

#gradeSubmissionContent .grade-list-stat-label {
  display: block;
  margin-top: 0.1rem;
  color: var(--gs-text-soft);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

#gradeSubmissionContent .grade-list-controls {
  display: grid;
  gap: 0.46rem;
  margin-bottom: 0.6rem;
}

#gradeSubmissionContent .grade-control-field {
  display: grid;
  gap: 0.24rem;
}

#gradeSubmissionContent .grade-control-field label {
  color: var(--gs-text-soft);
  font-size: 0.68rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#gradeSubmissionContent .grade-search-input,
#gradeSubmissionContent .grade-filter-select,
#gradeSubmissionContent .grade-sort-select {
  width: 100%;
  max-width: 100%;
  min-height: 35px;
  border: 1px solid rgba(30, 88, 166, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  color: #17345c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

#gradeSubmissionContent .grade-student-items {
  display: grid;
  gap: 0.4rem;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.12rem;
}

#gradeSubmissionContent .grade-empty {
  border: 1px dashed rgba(31, 109, 224, 0.25);
  border-radius: 12px;
  background: rgba(31, 109, 224, 0.06);
  color: var(--gs-text-soft);
  padding: 0.72rem 0.68rem;
  text-align: center;
  font-size: 0.84rem;
}

#gradeSubmissionContent .grade-student-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.52rem;
  border: 1px solid rgba(30, 88, 166, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.42rem 0.45rem;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

#gradeSubmissionContent .grade-student-item:hover {
  border-color: rgba(31, 109, 224, 0.36);
  box-shadow: 0 10px 22px rgba(18, 46, 92, 0.12);
  transform: translateY(-1px);
}

#gradeSubmissionContent .grade-student-item.active {
  border-color: rgba(31, 109, 224, 0.6);
  background: linear-gradient(125deg, rgba(31, 109, 224, 0.1), rgba(13, 151, 201, 0.09));
  box-shadow: 0 14px 22px rgba(18, 66, 133, 0.16);
}

#gradeSubmissionContent .student-avatar-wrapper {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(26, 88, 174, 0.2);
  background: #edf4ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

#gradeSubmissionContent .student-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#gradeSubmissionContent .student-info {
  min-width: 0;
  display: grid;
  gap: 0.13rem;
}

#gradeSubmissionContent .student-name {
  color: var(--gs-text);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.18;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#gradeSubmissionContent .student-id {
  color: var(--gs-text-soft);
  font-size: 0.7rem;
  font-weight: 560;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#gradeSubmissionContent .student-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.24rem;
}

#gradeSubmissionContent .student-badge {
  border: 1px solid rgba(30, 88, 166, 0.2);
  background: rgba(31, 109, 224, 0.08);
  color: #215290;
  border-radius: 999px;
  font-size: 0.63rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.2rem 0.42rem;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

#gradeSubmissionContent .student-badge.is-graded {
  border-color: rgba(11, 142, 99, 0.22);
  background: rgba(11, 142, 99, 0.12);
  color: var(--gs-success);
}

#gradeSubmissionContent .student-badge.is-pending {
  border-color: rgba(183, 121, 31, 0.22);
  background: rgba(183, 121, 31, 0.13);
  color: var(--gs-warn);
}

#gradeSubmissionContent .student-badge.is-missing {
  border-color: rgba(204, 61, 61, 0.25);
  background: rgba(204, 61, 61, 0.12);
  color: var(--gs-danger);
}

#gradeSubmissionContent .student-badge.is-online {
  border-color: rgba(31, 109, 224, 0.25);
  background: rgba(31, 109, 224, 0.1);
  color: #1556af;
}

#gradeSubmissionContent .student-badge.is-offline {
  border-color: rgba(124, 58, 237, 0.24);
  background: rgba(124, 58, 237, 0.1);
  color: #6634b3;
}

#gradeSubmissionContent .student-score {
  justify-self: end;
  border-radius: 999px;
  border: 1px solid rgba(30, 88, 166, 0.18);
  background: rgba(31, 109, 224, 0.08);
  color: var(--gs-text-soft);
  font-size: 0.67rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.28rem 0.5rem;
  white-space: nowrap;
}

#gradeSubmissionContent .student-score.is-graded {
  color: var(--student-score-color, #1556af);
  border-color: rgba(31, 109, 224, 0.28);
  background: rgba(31, 109, 224, 0.12);
}

#gradeSubmissionContent .student-score.is-muted {
  color: #7a8ca8;
}

#gradeSubmissionContent .student-score.is-alert {
  color: var(--gs-danger);
  border-color: rgba(204, 61, 61, 0.24);
  background: rgba(204, 61, 61, 0.1);
}

#gradeSubmissionContent .grade-pdf-area {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

#gradeSubmissionContent .pdf-viewer-controls {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  border-bottom: 1px solid rgba(26, 88, 166, 0.14);
  background: rgba(236, 244, 255, 0.86);
  padding: 0.54rem 0.62rem;
}

#gradeSubmissionContent .pdf-viewer-controls button {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(31, 109, 224, 0.2);
  background: rgba(255, 255, 255, 0.94);
  color: #1e64c4;
  box-shadow: 0 5px 10px rgba(28, 71, 137, 0.11);
}

#gradeSubmissionContent .pdf-viewer-controls button:hover {
  transform: translateY(-1px);
  border-color: rgba(31, 109, 224, 0.4);
}

#gradeSubmissionContent .pdf-viewer-controls .page-info {
  margin-left: auto;
  color: var(--gs-text-soft);
  font-size: 0.76rem;
  font-weight: 640;
}

#gradeSubmissionContent .annot-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.42rem;
  border-bottom: 1px solid rgba(26, 88, 166, 0.14);
  background: rgba(248, 252, 255, 0.95);
  padding: 0.48rem 0.62rem;
}

#gradeSubmissionContent .annot-group {
  display: flex;
  align-items: center;
  gap: 0.34rem;
}

#gradeSubmissionContent .annot-toolbar button {
  min-height: 32px;
  border-radius: 9px;
  border: 1px solid rgba(31, 109, 224, 0.2);
  background: rgba(255, 255, 255, 0.95);
  color: #185bae;
  font-size: 0.73rem;
  font-weight: 650;
  padding: 0 0.54rem;
}

#gradeSubmissionContent .annot-toolbar button.active {
  border-color: transparent;
  background: linear-gradient(135deg, #1f6de0, #149ac7);
  color: #fff;
  box-shadow: 0 9px 18px rgba(19, 104, 195, 0.28);
}

#gradeSubmissionContent .annot-toolbar .btn-yellow {
  border-color: rgba(183, 121, 31, 0.34);
  background: rgba(255, 247, 219, 0.94);
  color: #8d5f19;
}

#gradeSubmissionContent .annot-color-input,
#gradeSubmissionContent .annot-select,
#gradeSubmissionContent .annot-text-input {
  min-height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(31, 109, 224, 0.2);
  background: #fff;
  color: var(--gs-text);
  font-size: 0.72rem;
}

#gradeSubmissionContent .annot-color-input {
  width: 34px;
  padding: 0.08rem;
}

#gradeSubmissionContent .annot-select {
  min-width: 80px;
  padding: 0 0.38rem;
}

#gradeSubmissionContent .annot-text-input {
  flex: 1 1 170px;
  padding: 0 0.48rem;
}

#gradeSubmissionContent .pdf-container {
  position: relative;
  min-height: 0;
  overflow: auto;
  background: linear-gradient(180deg, #fcfdff, #f2f6ff);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 1rem 0.9rem 1.2rem;
}

#gradeSubmissionContent .pdf-container canvas {
  display: block;
  margin: 0 auto;
}

#gradeSubmissionContent .pdf-container.pdf-offline {
  border: 1px dashed rgba(31, 109, 224, 0.26);
  border-radius: 14px;
  margin: 0.8rem;
  background: rgba(31, 109, 224, 0.08);
  min-height: 18rem;
}

#gradeSubmissionContent .offline-submission-msg,
#gradeSubmissionContent .manual-placeholder {
  color: var(--gs-text-soft);
  font-size: 0.9rem;
  text-align: center;
}

#gradeSubmissionContent .offline-upload-actions button {
  border-radius: 10px;
}

#gradeSubmissionContent .grade-side-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.7rem;
  gap: 0.55rem;
}

#gradeSubmissionContent .grade-side-header {
  border: 1px solid rgba(30, 88, 166, 0.12);
  border-radius: 13px;
  background: var(--gs-panel-soft);
  padding: 0.52rem 0.56rem;
}

#gradeSubmissionContent .grade-side-title {
  margin: 0;
  color: var(--gs-text);
  font-size: 0.88rem;
  font-weight: 700;
}

#gradeSubmissionContent .grade-side-hint {
  margin: 0.22rem 0 0;
  color: var(--gs-text-soft);
  font-size: 0.73rem;
  line-height: 1.35;
}

#gradeSubmissionContent .grade-side-block {
  border: 1px solid rgba(30, 88, 166, 0.12);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.95);
}

#gradeSubmissionContent #gradePenaltyContainer {
  display: grid;
  gap: 0.32rem;
  padding: 0.48rem;
}

#gradeSubmissionContent #gradeFormContainer {
  min-height: 0;
  overflow-y: auto;
  padding: 0.58rem;
}

#gradeSubmissionContent #gradeFormContainer .grade-form-title,
#gradeSubmissionContent .manual-grade-form .grade-form-title {
  margin: 0;
  color: var(--gs-text);
  font-size: 0.9rem;
  font-weight: 720;
}

#gradeSubmissionContent #gradeFormContainer .grade-form-hint,
#gradeSubmissionContent .manual-grade-form .grade-form-hint {
  margin: 0.28rem 0 0.56rem;
  color: var(--gs-text-soft);
  font-size: 0.73rem;
  line-height: 1.38;
}

#gradeSubmissionContent #gradeFormContainer label,
#gradeSubmissionContent .manual-grade-form label {
  display: block;
  margin-top: 0.58rem;
  color: var(--gs-text-soft);
  font-size: 0.74rem;
  font-weight: 680;
  letter-spacing: 0.01em;
}

#gradeSubmissionContent #gradeFormContainer input[type="number"],
#gradeSubmissionContent #gradeFormContainer textarea,
#gradeSubmissionContent #gradeFormContainer .grade-score-input,
#gradeSubmissionContent .manual-grade-form .manual-input,
#gradeSubmissionContent .manual-grade-form .manual-textarea {
  width: 100%;
  border: 1px solid rgba(30, 88, 166, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  color: var(--gs-text);
  font-size: 0.82rem;
  padding: 0.45rem 0.6rem;
}

#gradeSubmissionContent .grade-comment-editor {
  margin-top: 0.22rem;
  border-radius: 10px;
  min-height: 6.1rem;
}

#gradeSubmissionContent .grade-comment-editor .ql-toolbar,
#gradeSubmissionContent .manual-comment-editor .ql-toolbar {
  border: 1px solid rgba(30, 88, 166, 0.16);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

#gradeSubmissionContent .grade-comment-editor .ql-container,
#gradeSubmissionContent .manual-comment-editor .ql-container {
  border: 1px solid rgba(30, 88, 166, 0.16);
  border-top: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  min-height: 6.1rem;
}

#gradeSubmissionContent .grade-form-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0.7rem;
}

#gradeSubmissionContent .grade-form-actions .btn-red,
#gradeSubmissionContent .grade-form-actions .btn-blue {
  min-height: 36px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
}

#gradeSubmissionContent .manual-grade-form {
  display: grid;
  gap: 0.06rem;
}

#gradeSubmissionContent .manual-upload-row {
  margin-top: 0.62rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
}

#gradeSubmissionContent .manual-upload-row .upload-info {
  min-width: 0;
  color: var(--gs-text-soft);
  font-size: 0.73rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#gradeSubmissionContent .grader-info {
  margin-top: 0.66rem;
  border: 1px solid rgba(30, 88, 166, 0.16);
  border-radius: 10px;
  padding: 0.4rem 0.48rem;
  background: rgba(31, 109, 224, 0.08);
  color: var(--gs-text-soft);
  font-size: 0.74rem;
}

#gradeSubmissionContent .grade-nav-row {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

#gradeSubmissionContent .grade-nav-row button {
  min-height: 35px;
  border-radius: 10px;
  border: 1px solid rgba(30, 88, 166, 0.22);
  background: rgba(245, 250, 255, 0.95);
  color: var(--gs-text);
  font-size: 0.75rem;
  font-weight: 700;
}

#gradeSubmissionContent .grade-nav-row button:hover {
  border-color: rgba(31, 109, 224, 0.4);
  box-shadow: 0 8px 16px rgba(24, 61, 120, 0.12);
}

body.dark #grade-submission-section {
  --gs-bg-0: #0d1b2f;
  --gs-bg-1: #0f2745;
  --gs-panel-bg: rgba(12, 23, 40, 0.86);
  --gs-panel-soft: rgba(16, 34, 56, 0.84);
  --gs-border: rgba(124, 158, 210, 0.26);
  --gs-shadow: 0 24px 42px rgba(0, 0, 0, 0.4);
  --gs-text: #dbe9ff;
  --gs-text-soft: #9fb8df;
  --gs-primary-soft: rgba(77, 149, 255, 0.2);
  --gs-success: #57d6a7;
  --gs-warn: #f2c568;
  --gs-danger: #ff8f8f;
}

body.dark #grade-submission-section #backToGradesBtn {
  box-shadow: 0 14px 22px rgba(4, 12, 24, 0.42);
}

body.dark #gradeSubmissionContent .grade-student-item,
body.dark #gradeSubmissionContent .grade-side-block,
body.dark #gradeSubmissionContent .grade-list-stat {
  background: rgba(11, 24, 40, 0.88);
}

body.dark #gradeSubmissionContent .grade-list-count {
  background: linear-gradient(135deg, #2f8cff, #21b7de);
}

body.dark #gradeSubmissionContent .grade-search-input,
body.dark #gradeSubmissionContent .grade-filter-select,
body.dark #gradeSubmissionContent .grade-sort-select,
body.dark #gradeSubmissionContent #gradeFormContainer input[type="number"],
body.dark #gradeSubmissionContent #gradeFormContainer textarea,
body.dark #gradeSubmissionContent .manual-grade-form .manual-input,
body.dark #gradeSubmissionContent .manual-grade-form .manual-textarea,
body.dark #gradeSubmissionContent .annot-color-input,
body.dark #gradeSubmissionContent .annot-select,
body.dark #gradeSubmissionContent .annot-text-input {
  background: rgba(8, 18, 32, 0.95);
  border-color: rgba(124, 158, 210, 0.3);
  color: #dbe9ff;
  box-shadow: none;
}

body.dark #gradeSubmissionContent .pdf-viewer-controls,
body.dark #gradeSubmissionContent .annot-toolbar {
  background: rgba(10, 22, 37, 0.9);
  border-color: rgba(124, 158, 210, 0.24);
}

body.dark #gradeSubmissionContent .pdf-viewer-controls button,
body.dark #gradeSubmissionContent .annot-toolbar button,
body.dark #gradeSubmissionContent .grade-nav-row button {
  background: rgba(10, 24, 40, 0.95);
  border-color: rgba(124, 158, 210, 0.3);
  color: #cde1ff;
  box-shadow: none;
}

body.dark #gradeSubmissionContent .annot-toolbar button.active {
  box-shadow: 0 10px 20px rgba(25, 123, 225, 0.35);
}

body.dark #gradeSubmissionContent .pdf-container {
  background: linear-gradient(180deg, rgba(11, 22, 37, 0.95), rgba(9, 18, 32, 0.96));
}

body.dark #gradeSubmissionContent .grader-info {
  background: rgba(37, 99, 235, 0.18);
  border-color: rgba(124, 158, 210, 0.32);
}

@media (max-width: 1360px) {
  #gradeSubmissionContent .grade-layout {
    grid-template-columns: minmax(240px, 24%) minmax(0, 1fr) minmax(280px, 26%);
    gap: 0.7rem;
  }

  #gradeSubmissionContent .annot-text-input {
    flex-basis: 140px;
  }
}

@media (max-width: 1180px) {
  #gradeSubmissionContent .grade-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(380px, 52vh) auto;
    height: auto;
    max-height: none;
  }

  #gradeSubmissionContent .grade-student-list {
    max-height: 320px;
  }

  #gradeSubmissionContent .grade-pdf-area {
    min-height: 380px;
  }

  #gradeSubmissionContent .grade-side-panel {
    max-height: none;
  }
}

@media (max-width: 760px) {
  #grade-submission-section {
    width: calc(100% - 0.45rem) !important;
  }

  #grade-submission-section .grade-submission-heading {
    flex-direction: column;
    align-items: stretch;
  }

  #grade-submission-section .grade-submission-heading #gradeSubmissionActions {
    justify-content: flex-start;
  }

  #gradeSubmissionContent {
    border-radius: 16px;
    padding: 0.55rem;
  }

  #gradeSubmissionContent .grade-list-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #gradeSubmissionContent .pdf-viewer-controls button {
    width: 32px;
    height: 32px;
  }

  #gradeSubmissionContent .annot-toolbar {
    gap: 0.34rem;
  }

  #gradeSubmissionContent .annot-group {
    gap: 0.24rem;
  }

  #gradeSubmissionContent .annot-toolbar button {
    min-height: 30px;
    font-size: 0.69rem;
    padding: 0 0.44rem;
  }

  #gradeSubmissionContent .grade-form-actions {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================== */
/* Grade Submission Workspace Redesign v2                                     */
/* ========================================================================== */
#grade-submission-section {
  --gs3-ink: #1e2c43;
  --gs3-ink-soft: #5b6d87;
  --gs3-line: rgba(31, 62, 108, 0.2);
  --gs3-shell-0: #edf3ff;
  --gs3-shell-1: #dce8ff;
  --gs3-shell-2: #f8fbff;
  --gs3-panel: rgba(255, 255, 255, 0.9);
  --gs3-panel-strong: rgba(255, 255, 255, 0.97);
  --gs3-accent: #1f67e4;
  --gs3-accent-2: #0ba4d8;
  --gs3-warn: #c7861f;
  --gs3-danger: #d74343;
  --gs3-success: #0f9a6b;
  --gs3-shadow: 0 22px 42px rgba(20, 42, 85, 0.18);
  width: min(1800px, calc(100% - 0.8rem)) !important;
  margin: 0 auto;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#grade-submission-section #backToGradesBtn {
  margin: 0 0 0.9rem !important;
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(24, 69, 133, 0.22);
  box-shadow: 0 10px 22px rgba(18, 48, 93, 0.18);
}

#grade-submission-section .grade-submission-heading {
  margin: 0 0 0.86rem;
  padding: 0 0.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.72rem;
}

#grade-submission-section .grade-submission-heading h2 {
  margin: 0;
  color: #1c3558;
  font-size: clamp(1.12rem, 1.7vw, 1.46rem);
  font-weight: 780;
  letter-spacing: 0.01em;
}

#grade-submission-section .grade-submission-heading #gradeSubmissionActions {
  display: flex;
  gap: 0.54rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#grade-submission-section .grade-header-action {
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(31, 103, 228, 0.3);
  background: linear-gradient(135deg, rgba(31, 103, 228, 0.08), rgba(11, 164, 216, 0.07));
  color: #1a4f95;
  font-size: 0.76rem;
  font-weight: 720;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#gradeSubmissionContent {
  position: relative;
  isolation: isolate;
  border-radius: 28px;
  border: 1px solid rgba(42, 82, 143, 0.2);
  padding: 1rem;
  background:
    radial-gradient(140% 130% at 0% 0%, var(--gs3-shell-1) 0%, transparent 52%),
    radial-gradient(120% 120% at 100% 100%, rgba(139, 203, 255, 0.22) 0%, transparent 58%),
    linear-gradient(160deg, var(--gs3-shell-0) 0%, var(--gs3-shell-2) 56%, #eff5ff 100%);
  box-shadow: var(--gs3-shadow);
  overflow: hidden;
}

#gradeSubmissionContent::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(120deg, rgba(255, 255, 255, 0.33), transparent 40%),
    repeating-linear-gradient(90deg, rgba(20, 44, 84, 0.018) 0px, rgba(20, 44, 84, 0.018) 1px, transparent 1px, transparent 28px);
  pointer-events: none;
}

#gradeSubmissionContent .grade-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(268px, 300px) minmax(0, 1fr) minmax(312px, 348px);
  gap: 0.9rem;
  height: clamp(650px, calc(100vh - 230px), 930px);
}

#gradeSubmissionContent .grade-student-list,
#gradeSubmissionContent .grade-pdf-area,
#gradeSubmissionContent .grade-side-panel {
  border-radius: 18px;
  border: 1px solid var(--gs3-line);
  background: var(--gs3-panel);
  backdrop-filter: blur(9px);
  box-shadow: 0 14px 28px rgba(15, 36, 71, 0.12);
}

#gradeSubmissionContent .grade-student-list {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0.58rem;
  padding: 0.76rem;
}

#gradeSubmissionContent .grade-student-list-header {
  border-radius: 14px;
  border: 1px solid rgba(31, 103, 228, 0.16);
  background: linear-gradient(145deg, rgba(31, 103, 228, 0.11), rgba(11, 164, 216, 0.08) 62%, rgba(255, 255, 255, 0.9) 100%);
  padding: 0.55rem 0.56rem;
}

#gradeSubmissionContent .grade-list-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

#gradeSubmissionContent .grade-list-title {
  margin: 0;
  color: #1b365a;
  font-size: 0.92rem;
  font-weight: 780;
  letter-spacing: 0.01em;
}

#gradeSubmissionContent .grade-list-count {
  min-width: 2.5rem;
  border-radius: 999px;
  padding: 0.2rem 0.52rem;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 760;
  color: #fff;
  background: linear-gradient(135deg, var(--gs3-accent), var(--gs3-accent-2));
}

#gradeSubmissionContent .grade-list-stats {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.36rem;
}

#gradeSubmissionContent .grade-list-stat {
  border-radius: 10px;
  border: 1px solid rgba(31, 103, 228, 0.2);
  background: rgba(255, 255, 255, 0.9);
  padding: 0.32rem 0.26rem;
  text-align: center;
}

#gradeSubmissionContent .grade-list-stat-value {
  display: block;
  color: #17365d;
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.1;
}

#gradeSubmissionContent .grade-list-stat-label {
  display: block;
  margin-top: 0.08rem;
  color: #5d7491;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#gradeSubmissionContent .grade-list-controls {
  display: grid;
  gap: 0.44rem;
}

#gradeSubmissionContent .grade-control-field {
  display: grid;
  gap: 0.22rem;
}

#gradeSubmissionContent .grade-control-field label {
  color: #58708f;
  font-size: 0.66rem;
  font-weight: 730;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#gradeSubmissionContent .grade-search-input,
#gradeSubmissionContent .grade-filter-select,
#gradeSubmissionContent .grade-sort-select {
  min-height: 36px;
  border-radius: 11px;
  border: 1px solid rgba(41, 84, 150, 0.24);
  background: rgba(255, 255, 255, 0.95);
  color: #18365e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

#gradeSubmissionContent .grade-student-items {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: 0.42rem;
  padding-right: 0.08rem;
}

#gradeSubmissionContent .grade-empty {
  border-radius: 12px;
  border: 1px dashed rgba(31, 103, 228, 0.28);
  background: rgba(31, 103, 228, 0.08);
  color: #5f7591;
  font-size: 0.84rem;
  text-align: center;
  padding: 0.74rem 0.56rem;
}

#gradeSubmissionContent .grade-student-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.52rem;
  border-radius: 12px;
  border: 1px solid rgba(31, 62, 108, 0.2);
  background: var(--gs3-panel-strong);
  padding: 0.44rem 0.44rem 0.44rem 0.5rem;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

#gradeSubmissionContent .grade-student-item::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 3px;
  height: calc(100% - 18px);
  border-radius: 999px;
  background: rgba(31, 103, 228, 0.22);
}

#gradeSubmissionContent .grade-student-item:hover {
  transform: translateY(-1px);
  border-color: rgba(31, 103, 228, 0.42);
  box-shadow: 0 10px 20px rgba(17, 44, 90, 0.13);
}

#gradeSubmissionContent .grade-student-item.active {
  border-color: rgba(31, 103, 228, 0.62);
  background: linear-gradient(120deg, rgba(31, 103, 228, 0.14), rgba(11, 164, 216, 0.1));
  box-shadow: 0 12px 22px rgba(22, 64, 128, 0.18);
}

#gradeSubmissionContent .grade-student-item.active::before {
  background: linear-gradient(180deg, var(--gs3-accent), var(--gs3-accent-2));
}

#gradeSubmissionContent .student-avatar-wrapper {
  width: 2.04rem;
  height: 2.04rem;
  border-radius: 999px;
  border: 1px solid rgba(31, 103, 228, 0.3);
  background: #e9f1ff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#gradeSubmissionContent .student-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#gradeSubmissionContent .student-info {
  min-width: 0;
  display: grid;
  gap: 0.14rem;
}

#gradeSubmissionContent .student-name {
  color: var(--gs3-ink);
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.18;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#gradeSubmissionContent .student-id {
  color: var(--gs3-ink-soft);
  font-size: 0.7rem;
  font-weight: 620;
  line-height: 1.08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#gradeSubmissionContent .student-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem;
}

#gradeSubmissionContent .student-badge {
  border-radius: 999px;
  border: 1px solid rgba(31, 103, 228, 0.24);
  background: rgba(31, 103, 228, 0.09);
  color: #1c549b;
  font-size: 0.6rem;
  font-weight: 760;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.2rem 0.38rem;
}

#gradeSubmissionContent .student-badge.is-graded {
  border-color: rgba(15, 154, 107, 0.24);
  background: rgba(15, 154, 107, 0.12);
  color: var(--gs3-success);
}

#gradeSubmissionContent .student-badge.is-pending {
  border-color: rgba(199, 134, 31, 0.25);
  background: rgba(199, 134, 31, 0.13);
  color: #996419;
}

#gradeSubmissionContent .student-badge.is-missing {
  border-color: rgba(215, 67, 67, 0.3);
  background: rgba(215, 67, 67, 0.12);
  color: var(--gs3-danger);
}

#gradeSubmissionContent .student-badge.is-online {
  border-color: rgba(31, 103, 228, 0.24);
  background: rgba(31, 103, 228, 0.1);
  color: #1f5da9;
}

#gradeSubmissionContent .student-badge.is-offline {
  border-color: rgba(140, 89, 18, 0.25);
  background: rgba(140, 89, 18, 0.1);
  color: #7c4f13;
}

#gradeSubmissionContent .student-score {
  border-radius: 999px;
  border: 1px solid rgba(31, 103, 228, 0.24);
  background: rgba(31, 103, 228, 0.08);
  color: #516a88;
  font-size: 0.66rem;
  font-weight: 760;
  line-height: 1;
  padding: 0.26rem 0.5rem;
  white-space: nowrap;
}

#gradeSubmissionContent .student-score.is-graded {
  color: var(--student-score-color, #1a5ba8);
  border-color: rgba(31, 103, 228, 0.35);
  background: rgba(31, 103, 228, 0.13);
}

#gradeSubmissionContent .student-score.is-muted {
  color: #6f8097;
}

#gradeSubmissionContent .student-score.is-alert {
  color: var(--gs3-danger);
  border-color: rgba(215, 67, 67, 0.34);
  background: rgba(215, 67, 67, 0.12);
}

#gradeSubmissionContent .grade-pdf-area {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}

#gradeSubmissionContent .pdf-viewer-controls {
  border-bottom: 1px solid rgba(31, 62, 108, 0.16);
  padding: 0.56rem 0.62rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(180deg, rgba(233, 243, 255, 0.9), rgba(239, 247, 255, 0.82));
}

#gradeSubmissionContent .pdf-viewer-controls button {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(31, 103, 228, 0.24);
  background: #fff;
  color: #225fb2;
  box-shadow: 0 7px 14px rgba(16, 41, 83, 0.14);
}

#gradeSubmissionContent .pdf-viewer-controls button:hover {
  transform: translateY(-1px);
  border-color: rgba(31, 103, 228, 0.42);
}

#gradeSubmissionContent .pdf-viewer-controls .page-info {
  margin-left: auto;
  color: #456487;
  font-size: 0.78rem;
  font-weight: 680;
}

#gradeSubmissionContent .annot-toolbar {
  border-bottom: 1px solid rgba(31, 62, 108, 0.16);
  padding: 0.5rem 0.62rem;
  display: flex;
  align-items: center;
  gap: 0.38rem;
  flex-wrap: wrap;
  background: rgba(250, 253, 255, 0.94);
}

#gradeSubmissionContent .annot-group {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

#gradeSubmissionContent .annot-toolbar button {
  min-height: 33px;
  border-radius: 10px;
  border: 1px solid rgba(31, 103, 228, 0.22);
  background: #fff;
  color: #205ba9;
  font-size: 0.73rem;
  font-weight: 720;
  padding: 0 0.56rem;
}

#gradeSubmissionContent .annot-toolbar button.active {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, var(--gs3-accent), var(--gs3-accent-2));
  box-shadow: 0 9px 17px rgba(19, 90, 170, 0.3);
}

#gradeSubmissionContent .annot-toolbar .btn-yellow {
  border-color: rgba(199, 134, 31, 0.32);
  background: rgba(255, 246, 215, 0.95);
  color: #93621b;
}

#gradeSubmissionContent .annot-color-input,
#gradeSubmissionContent .annot-select,
#gradeSubmissionContent .annot-text-input {
  min-height: 33px;
  border-radius: 9px;
  border: 1px solid rgba(31, 103, 228, 0.22);
  background: #fff;
  color: #1d385d;
  font-size: 0.72rem;
}

#gradeSubmissionContent .annot-color-input {
  width: 34px;
  padding: 0.1rem;
}

#gradeSubmissionContent .annot-select {
  min-width: 84px;
  padding: 0 0.4rem;
}

#gradeSubmissionContent .annot-text-input {
  flex: 1 1 180px;
  padding: 0 0.5rem;
}

#gradeSubmissionContent .pdf-container {
  position: relative;
  min-height: 0;
  overflow: auto;
  background:
    linear-gradient(180deg, #f8efe1 0%, #f4ebde 42%, #f2e9dd 100%);
  padding: 1rem 1rem 1.25rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

#gradeSubmissionContent .pdf-container canvas {
  display: block;
  margin: 0 auto;
  box-shadow: 0 16px 24px rgba(65, 41, 16, 0.2);
}

#gradeSubmissionContent .pdf-container.pdf-offline {
  margin: 0.8rem;
  border-radius: 16px;
  border: 1px dashed rgba(140, 89, 18, 0.38);
  background: rgba(248, 238, 215, 0.72);
}

#gradeSubmissionContent .offline-submission-msg,
#gradeSubmissionContent .manual-placeholder {
  color: #6e5634;
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: center;
}

#gradeSubmissionContent .grade-side-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0.56rem;
  padding: 0.72rem;
  overflow: hidden;
}

#gradeSubmissionContent .grade-side-header {
  border-radius: 14px;
  border: 1px solid rgba(31, 103, 228, 0.2);
  background: linear-gradient(140deg, rgba(31, 103, 228, 0.13), rgba(11, 164, 216, 0.1));
  padding: 0.56rem 0.58rem;
}

#gradeSubmissionContent .grade-side-title {
  margin: 0;
  color: #1a3459;
  font-size: 0.92rem;
  font-weight: 780;
}

#gradeSubmissionContent .grade-side-hint {
  margin: 0.24rem 0 0;
  color: #546f8e;
  font-size: 0.73rem;
  line-height: 1.35;
}

#gradeSubmissionContent .grade-side-block {
  border-radius: 14px;
  border: 1px solid rgba(31, 62, 108, 0.18);
  background: var(--gs3-panel-strong);
}

#gradeSubmissionContent #gradePenaltyContainer {
  display: grid;
  gap: 0.3rem;
  padding: 0.44rem;
}

#gradeSubmissionContent #gradeFormContainer {
  min-height: 0;
  overflow-y: auto;
  padding: 0.6rem;
}

#gradeSubmissionContent #gradeFormContainer .grade-form-title,
#gradeSubmissionContent .manual-grade-form .grade-form-title {
  margin: 0;
  color: var(--gs3-ink);
  font-size: 0.92rem;
  font-weight: 790;
}

#gradeSubmissionContent #gradeFormContainer .grade-form-hint,
#gradeSubmissionContent .manual-grade-form .grade-form-hint {
  margin: 0.32rem 0 0.58rem;
  color: var(--gs3-ink-soft);
  font-size: 0.73rem;
  line-height: 1.37;
}

#gradeSubmissionContent #gradeFormContainer label,
#gradeSubmissionContent .manual-grade-form label {
  display: block;
  margin-top: 0.56rem;
  color: #516a88;
  font-size: 0.73rem;
  font-weight: 710;
  letter-spacing: 0.01em;
}

#gradeSubmissionContent #gradeFormContainer input[type="number"],
#gradeSubmissionContent #gradeFormContainer textarea,
#gradeSubmissionContent #gradeFormContainer .grade-score-input,
#gradeSubmissionContent .manual-grade-form .manual-input,
#gradeSubmissionContent .manual-grade-form .manual-textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(31, 62, 108, 0.24);
  background: rgba(255, 255, 255, 0.96);
  color: var(--gs3-ink);
  font-size: 0.82rem;
  padding: 0.44rem 0.6rem;
}

#gradeSubmissionContent .grade-comment-editor,
#gradeSubmissionContent .manual-comment-editor {
  margin-top: 0.22rem;
  border-radius: 10px;
  min-height: 6rem;
}

#gradeSubmissionContent .grade-comment-editor .ql-toolbar,
#gradeSubmissionContent .manual-comment-editor .ql-toolbar {
  border: 1px solid rgba(31, 62, 108, 0.2);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: rgba(244, 248, 255, 0.9);
}

#gradeSubmissionContent .grade-comment-editor .ql-container,
#gradeSubmissionContent .manual-comment-editor .ql-container {
  border: 1px solid rgba(31, 62, 108, 0.2);
  border-top: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  min-height: 6rem;
}

#gradeSubmissionContent .grade-form-actions {
  margin-top: 0.72rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

#gradeSubmissionContent .grade-form-actions .btn-red,
#gradeSubmissionContent .grade-form-actions .btn-blue {
  min-height: 37px;
  border-radius: 10px;
  border: none;
  font-size: 0.78rem;
  font-weight: 760;
}

#gradeSubmissionContent .manual-grade-form {
  display: grid;
}

#gradeSubmissionContent .manual-upload-row {
  margin-top: 0.62rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
}

#gradeSubmissionContent .manual-upload-row .upload-info {
  color: #5d7390;
  font-size: 0.73rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#gradeSubmissionContent .grader-info {
  margin-top: 0.68rem;
  border-radius: 10px;
  border: 1px solid rgba(31, 103, 228, 0.22);
  background: rgba(31, 103, 228, 0.1);
  color: #456382;
  font-size: 0.74rem;
  padding: 0.4rem 0.5rem;
}

#gradeSubmissionContent .grade-nav-row {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

#gradeSubmissionContent .grade-nav-row button {
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(31, 62, 108, 0.24);
  background: rgba(248, 251, 255, 0.96);
  color: #274668;
  font-size: 0.77rem;
  font-weight: 760;
}

#gradeSubmissionContent .grade-nav-row button:hover {
  border-color: rgba(31, 103, 228, 0.44);
  box-shadow: 0 9px 18px rgba(17, 44, 90, 0.14);
}

body.dark #grade-submission-section {
  --gs3-ink: #dce9ff;
  --gs3-ink-soft: #9bb3d9;
  --gs3-line: rgba(118, 150, 202, 0.28);
  --gs3-shell-0: #0b192d;
  --gs3-shell-1: #102640;
  --gs3-shell-2: #0b1b31;
  --gs3-panel: rgba(10, 22, 39, 0.86);
  --gs3-panel-strong: rgba(9, 20, 36, 0.94);
  --gs3-shadow: 0 28px 44px rgba(0, 0, 0, 0.44);
}

body.dark #grade-submission-section .grade-submission-heading h2 {
  color: #dce9ff;
}

body.dark #gradeSubmissionContent .grade-list-title,
body.dark #gradeSubmissionContent .grade-side-title {
  color: #dce9ff;
}

body.dark #gradeSubmissionContent .grade-student-item,
body.dark #gradeSubmissionContent .grade-list-stat,
body.dark #gradeSubmissionContent .grade-side-block {
  background: rgba(11, 24, 42, 0.9);
}

body.dark #gradeSubmissionContent .grade-search-input,
body.dark #gradeSubmissionContent .grade-filter-select,
body.dark #gradeSubmissionContent .grade-sort-select,
body.dark #gradeSubmissionContent #gradeFormContainer input[type="number"],
body.dark #gradeSubmissionContent #gradeFormContainer textarea,
body.dark #gradeSubmissionContent .manual-grade-form .manual-input,
body.dark #gradeSubmissionContent .manual-grade-form .manual-textarea,
body.dark #gradeSubmissionContent .annot-color-input,
body.dark #gradeSubmissionContent .annot-select,
body.dark #gradeSubmissionContent .annot-text-input {
  background: rgba(7, 16, 30, 0.95);
  border-color: rgba(118, 150, 202, 0.32);
  color: #dce9ff;
  box-shadow: none;
}

body.dark #gradeSubmissionContent .pdf-viewer-controls,
body.dark #gradeSubmissionContent .annot-toolbar {
  background: rgba(9, 20, 36, 0.93);
}

body.dark #gradeSubmissionContent .pdf-viewer-controls button,
body.dark #gradeSubmissionContent .annot-toolbar button,
body.dark #gradeSubmissionContent .grade-nav-row button {
  background: rgba(11, 24, 42, 0.94);
  border-color: rgba(118, 150, 202, 0.32);
  color: #cfe0fb;
  box-shadow: none;
}

body.dark #gradeSubmissionContent .annot-toolbar button.active {
  box-shadow: 0 10px 20px rgba(22, 111, 213, 0.4);
}

body.dark #gradeSubmissionContent .pdf-container {
  background: linear-gradient(180deg, #1d232f 0%, #181f2a 100%);
}

body.dark #gradeSubmissionContent .pdf-container canvas {
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.42);
}

body.dark #gradeSubmissionContent .offline-submission-msg,
body.dark #gradeSubmissionContent .manual-placeholder {
  color: #c1cde0;
}

@media (max-width: 1460px) {
  #gradeSubmissionContent .grade-layout {
    grid-template-columns: minmax(248px, 285px) minmax(0, 1fr) minmax(296px, 332px);
    gap: 0.76rem;
  }
}

@media (max-width: 1180px) {
  #gradeSubmissionContent {
    border-radius: 18px;
    padding: 0.62rem;
  }

  #gradeSubmissionContent .grade-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(420px, 56vh) auto;
    height: auto;
    max-height: none;
  }

  #gradeSubmissionContent .grade-student-list {
    max-height: 340px;
  }

  #gradeSubmissionContent .grade-side-panel {
    max-height: none;
  }
}

@media (max-width: 820px) {
  #grade-submission-section {
    width: calc(100% - 0.48rem) !important;
  }

  #grade-submission-section .grade-submission-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 0.52rem;
  }

  #grade-submission-section .grade-submission-heading #gradeSubmissionActions {
    justify-content: flex-start;
  }

  #gradeSubmissionContent .annot-text-input {
    flex: 1 1 120px;
  }

  #gradeSubmissionContent .grade-list-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  #gradeSubmissionContent .pdf-viewer-controls button {
    width: 32px;
    height: 32px;
  }

  #gradeSubmissionContent .annot-toolbar button {
    min-height: 30px;
    font-size: 0.68rem;
    padding: 0 0.42rem;
  }

  #gradeSubmissionContent .grade-form-actions,
  #gradeSubmissionContent .grade-nav-row {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================== */
/* Grade Submission Workspace v3 (logic-first, overflow-safe)                 */
/* ========================================================================== */
#grade-submission-section #gradeSubmissionContent {
  border-radius: 18px !important;
  padding: 0.72rem !important;
}

#grade-submission-section #gradeSubmissionContent .grade-layout {
  grid-template-columns: minmax(228px, 252px) minmax(0, 1fr) minmax(268px, 308px) !important;
  gap: 0.62rem !important;
  height: clamp(620px, calc(100vh - 232px), 890px) !important;
}

#grade-submission-section #gradeSubmissionContent .grade-student-list,
#grade-submission-section #gradeSubmissionContent .grade-pdf-area,
#grade-submission-section #gradeSubmissionContent .grade-side-panel {
  min-width: 0 !important;
  overflow: hidden !important;
}

#grade-submission-section #gradeSubmissionContent .grade-student-list {
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  gap: 0.42rem !important;
  padding: 0.56rem !important;
}

#grade-submission-section #gradeSubmissionContent .grade-list-title {
  font-size: 0.86rem !important;
}

#grade-submission-section #gradeSubmissionContent .grade-list-progress {
  margin-top: 0.42rem;
  display: grid;
  gap: 0.2rem;
}

#grade-submission-section #gradeSubmissionContent .grade-list-progress-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(31, 103, 228, 0.12);
  overflow: hidden;
}

#grade-submission-section #gradeSubmissionContent .grade-list-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(135deg, #1f67e4, #0ba4d8);
  transition: width 0.2s ease;
}

#grade-submission-section #gradeSubmissionContent .grade-list-progress-text {
  color: #5e7390;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#grade-submission-section #gradeSubmissionContent .grade-list-stats {
  gap: 0.26rem !important;
}

#grade-submission-section #gradeSubmissionContent .grade-list-stat {
  padding: 0.24rem 0.16rem !important;
}

#grade-submission-section #gradeSubmissionContent .grade-list-stat-value {
  font-size: 0.76rem !important;
}

#grade-submission-section #gradeSubmissionContent .grade-list-stat-label {
  font-size: 0.58rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#grade-submission-section #gradeSubmissionContent .grade-workflow-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.28rem;
}

#grade-submission-section #gradeSubmissionContent .grade-workflow-tab {
  min-height: 30px;
  min-width: 0;
  border-radius: 9px;
  border: 1px solid rgba(31, 103, 228, 0.22);
  background: rgba(255, 255, 255, 0.92);
  color: #36557c;
  font-size: 0.66rem;
  font-weight: 730;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0 0.34rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#grade-submission-section #gradeSubmissionContent .grade-workflow-tab.active {
  border-color: transparent;
  background: linear-gradient(135deg, #1f67e4, #0ba4d8);
  color: #fff;
}

#grade-submission-section #gradeSubmissionContent .grade-list-controls {
  gap: 0.32rem !important;
}

#grade-submission-section #gradeSubmissionContent .grade-control-field label {
  font-size: 0.62rem !important;
}

#grade-submission-section #gradeSubmissionContent .grade-search-input,
#grade-submission-section #gradeSubmissionContent .grade-filter-select,
#grade-submission-section #gradeSubmissionContent .grade-sort-select {
  min-height: 34px !important;
  font-size: 0.8rem !important;
}

#grade-submission-section #gradeSubmissionContent .grade-student-items {
  gap: 0.32rem !important;
}

#grade-submission-section #gradeSubmissionContent .grade-student-item {
  gap: 0.42rem !important;
  padding: 0.36rem 0.38rem 0.36rem 0.44rem !important;
}

#grade-submission-section #gradeSubmissionContent .student-avatar-wrapper {
  width: 1.86rem !important;
  height: 1.86rem !important;
}

#grade-submission-section #gradeSubmissionContent .student-name {
  font-size: 0.8rem !important;
}

#grade-submission-section #gradeSubmissionContent .student-id {
  font-size: 0.66rem !important;
}

#grade-submission-section #gradeSubmissionContent .student-badge {
  font-size: 0.56rem !important;
  padding: 0.18rem 0.34rem !important;
}

#grade-submission-section #gradeSubmissionContent .student-score {
  font-size: 0.62rem !important;
  padding: 0.22rem 0.4rem !important;
}

#grade-submission-section #gradeSubmissionContent .grade-pdf-area {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
}

#grade-submission-section #gradeSubmissionContent .pdf-viewer-controls {
  gap: 0.28rem !important;
  padding: 0.42rem 0.48rem !important;
}

#grade-submission-section #gradeSubmissionContent .pdf-viewer-controls button {
  width: 31px !important;
  height: 31px !important;
  min-width: 31px !important;
}

#grade-submission-section #gradeSubmissionContent .pdf-viewer-controls .page-info {
  font-size: 0.74rem !important;
  white-space: nowrap !important;
}

#grade-submission-section #gradeSubmissionContent .annot-toolbar {
  gap: 0.26rem !important;
  padding: 0.4rem 0.46rem !important;
  align-items: flex-start !important;
}

#grade-submission-section #gradeSubmissionContent .annot-group {
  flex-wrap: wrap !important;
  gap: 0.24rem !important;
  min-width: 0 !important;
}

#grade-submission-section #gradeSubmissionContent .annot-toolbar button {
  min-height: 30px !important;
  font-size: 0.68rem !important;
  padding: 0 0.44rem !important;
}

#grade-submission-section #gradeSubmissionContent .annot-color-input,
#grade-submission-section #gradeSubmissionContent .annot-select,
#grade-submission-section #gradeSubmissionContent .annot-text-input {
  min-height: 30px !important;
  font-size: 0.68rem !important;
}

#grade-submission-section #gradeSubmissionContent .annot-text-input {
  min-width: 110px !important;
  flex: 1 1 110px !important;
}

#grade-submission-section #gradeSubmissionContent .pdf-container {
  background: linear-gradient(180deg, #f6f8fc 0%, #f1f4fa 100%) !important;
  border-top: 1px solid rgba(31, 62, 108, 0.08);
  padding: 0.72rem !important;
}

#grade-submission-section #gradeSubmissionContent .pdf-container canvas {
  box-shadow: 0 10px 20px rgba(29, 46, 75, 0.14) !important;
}

#grade-submission-section #gradeSubmissionContent .pdf-container.pdf-offline {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.72rem !important;
  background: #f4f7fb !important;
  border: 1px dashed rgba(31, 62, 108, 0.2) !important;
  border-radius: 14px !important;
  margin: 0.4rem !important;
  padding: 1.4rem 1rem !important;
}

#grade-submission-section #gradeSubmissionContent .offline-submission-msg {
  max-width: 840px;
  margin: 0 auto;
  text-align: center !important;
  color: #425a7a !important;
  font-size: 0.96rem !important;
  line-height: 1.45 !important;
}

#grade-submission-section #gradeSubmissionContent .offline-upload-actions {
  margin-top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.38rem !important;
}

#grade-submission-section #gradeSubmissionContent .offline-upload-actions button {
  min-height: 36px;
  padding: 0 1rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(221, 140, 10, 0.24) !important;
  background: #f59e0b !important;
  color: #fff !important;
}

#grade-submission-section #gradeSubmissionContent .offline-upload-actions .upload-hint {
  color: #5f6f85 !important;
  font-size: 0.78rem !important;
  text-align: center !important;
}

#grade-submission-section #gradeSubmissionContent .grade-side-panel {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
  gap: 0.42rem !important;
  padding: 0.56rem !important;
}

#grade-submission-section #gradeSubmissionContent .grade-side-title {
  font-size: 0.86rem !important;
}

#grade-submission-section #gradeSubmissionContent .grade-side-hint {
  font-size: 0.69rem !important;
}

#grade-submission-section #gradeSubmissionContent #gradePenaltyContainer {
  padding: 0.36rem !important;
}

#grade-submission-section #gradeSubmissionContent #gradeFormContainer {
  padding: 0.42rem !important;
}

#grade-submission-section #gradeSubmissionContent .grade-side-footer {
  display: grid;
  gap: 0.34rem;
  align-content: start;
}

#grade-submission-section #gradeSubmissionContent #gradeFormContainer .grade-form-title,
#grade-submission-section #gradeSubmissionContent .manual-grade-form .grade-form-title {
  font-size: 0.84rem !important;
}

#grade-submission-section #gradeSubmissionContent #gradeFormContainer .grade-form-hint,
#grade-submission-section #gradeSubmissionContent .manual-grade-form .grade-form-hint {
  font-size: 0.68rem !important;
}

#grade-submission-section #gradeSubmissionContent #gradeFormContainer label,
#grade-submission-section #gradeSubmissionContent .manual-grade-form label {
  font-size: 0.68rem !important;
  margin-top: 0.46rem !important;
}

#grade-submission-section #gradeSubmissionContent #gradeFormContainer input[type="number"],
#grade-submission-section #gradeSubmissionContent #gradeFormContainer textarea,
#grade-submission-section #gradeSubmissionContent #gradeFormContainer .grade-score-input,
#grade-submission-section #gradeSubmissionContent .manual-grade-form .manual-input,
#grade-submission-section #gradeSubmissionContent .manual-grade-form .manual-textarea {
  font-size: 0.78rem !important;
  padding: 0.4rem 0.54rem !important;
}

#grade-submission-section #gradeSubmissionContent .grade-comment-editor .ql-container,
#grade-submission-section #gradeSubmissionContent .manual-comment-editor .ql-container {
  min-height: 3.2rem !important;
}

#grade-submission-section #gradeSubmissionContent .grade-comment-editor .ql-editor,
#grade-submission-section #gradeSubmissionContent .manual-comment-editor .ql-editor {
  min-height: 2.8rem !important;
}

#grade-submission-section #gradeSubmissionContent .grade-form-actions {
  margin-top: 0.56rem !important;
  gap: 0.34rem !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#grade-submission-section #gradeSubmissionContent .grade-submit-primary {
  width: 100% !important;
  min-height: 36px !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
  font-weight: 760 !important;
}

#grade-submission-section #gradeSubmissionContent .grade-form-actions .btn-red,
#grade-submission-section #gradeSubmissionContent .grade-form-actions .btn-blue,
#grade-submission-section #gradeSubmissionContent .grade-nav-row button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  font-size: 0.78rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#grade-submission-section #gradeSubmissionContent .grade-nav-row {
  gap: 0.34rem !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#grade-submission-section #gradeSubmissionContent .grader-info {
  margin-top: 0 !important;
  font-size: 0.7rem !important;
  padding: 0.34rem 0.44rem !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dark #grade-submission-section #gradeSubmissionContent .grade-workflow-tab,
body.dark #grade-submission-section #gradeSubmissionContent .grade-search-input,
body.dark #grade-submission-section #gradeSubmissionContent .grade-filter-select,
body.dark #grade-submission-section #gradeSubmissionContent .grade-sort-select,
body.dark #grade-submission-section #gradeSubmissionContent #gradeFormContainer input[type="number"],
body.dark #grade-submission-section #gradeSubmissionContent #gradeFormContainer textarea,
body.dark #grade-submission-section #gradeSubmissionContent .manual-grade-form .manual-input,
body.dark #grade-submission-section #gradeSubmissionContent .manual-grade-form .manual-textarea,
body.dark #grade-submission-section #gradeSubmissionContent .annot-color-input,
body.dark #grade-submission-section #gradeSubmissionContent .annot-select,
body.dark #grade-submission-section #gradeSubmissionContent .annot-text-input {
  background: rgba(8, 17, 31, 0.96) !important;
  border-color: rgba(122, 154, 203, 0.36) !important;
  color: #d7e5fb !important;
}

body.dark #grade-submission-section #gradeSubmissionContent .pdf-viewer-controls button,
body.dark #grade-submission-section #gradeSubmissionContent .annot-toolbar button,
body.dark #grade-submission-section #gradeSubmissionContent .grade-form-actions .btn-red,
body.dark #grade-submission-section #gradeSubmissionContent .grade-form-actions .btn-blue,
body.dark #grade-submission-section #gradeSubmissionContent .grade-nav-row button {
  box-shadow: none !important;
}

@media (max-width: 1520px) {
  #grade-submission-section #gradeSubmissionContent .grade-layout {
    grid-template-columns: minmax(220px, 242px) minmax(0, 1fr) minmax(250px, 286px) !important;
  }
}

@media (max-width: 1260px) {
  #grade-submission-section #gradeSubmissionContent .grade-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(380px, 54vh) auto !important;
    height: auto !important;
    max-height: none !important;
  }

  #grade-submission-section #gradeSubmissionContent .grade-student-list {
    max-height: 320px;
  }

  #grade-submission-section #gradeSubmissionContent .grade-form-actions,
  #grade-submission-section #gradeSubmissionContent .grade-nav-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 740px) {
  #grade-submission-section #gradeSubmissionContent {
    border-radius: 14px !important;
    padding: 0.42rem !important;
  }

  #grade-submission-section #gradeSubmissionContent .grade-workflow-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #grade-submission-section #gradeSubmissionContent .grade-form-actions,
  #grade-submission-section #gradeSubmissionContent .grade-nav-row {
    grid-template-columns: 1fr !important;
  }
}

/* Keep student cards at natural content height (avoid stretch-to-fill). */
#grade-submission-section #gradeSubmissionContent .grade-student-items {
  align-content: start !important;
  grid-auto-rows: max-content !important;
}

#grade-submission-section #gradeSubmissionContent .grade-student-item {
  align-self: start !important;
  height: auto !important;
}

/* Compact late-penalty badges in right grading panel. */
#grade-submission-section #gradeSubmissionContent #gradePenaltyContainer {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  min-height: 0 !important;
}

#grade-submission-section #gradeSubmissionContent #gradePenaltyContainer:empty {
  display: none !important;
}

#grade-submission-section #gradeSubmissionContent #gradePenaltyContainer .grade-penalty-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
  width: 100%;
}

#grade-submission-section #gradeSubmissionContent #gradePenaltyContainer .grade-penalty-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  border-radius: 999px !important;
  padding: 0.3rem 0.62rem !important;
  font-size: 0.72rem !important;
  font-weight: 720 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

#grade-submission-section #gradeSubmissionContent #gradePenaltyContainer .grade-penalty-chip i {
  font-size: 0.68rem !important;
}

#grade-submission-section #gradeSubmissionContent #gradePenaltyContainer .grade-penalty-chip.is-late {
  border: 1px solid rgba(220, 38, 38, 0.32) !important;
  background: rgba(254, 226, 226, 0.85) !important;
  color: #b91c1c !important;
}

#grade-submission-section #gradeSubmissionContent #gradePenaltyContainer .grade-penalty-chip.is-factor {
  border: 1px solid rgba(37, 99, 235, 0.3) !important;
  background: rgba(219, 234, 254, 0.84) !important;
  color: #1d4ed8 !important;
}

body.dark #grade-submission-section #gradeSubmissionContent #gradePenaltyContainer .grade-penalty-chip.is-late {
  border-color: rgba(248, 113, 113, 0.44) !important;
  background: rgba(127, 29, 29, 0.46) !important;
  color: #fecaca !important;
}

body.dark #grade-submission-section #gradeSubmissionContent #gradePenaltyContainer .grade-penalty-chip.is-factor {
  border-color: rgba(96, 165, 250, 0.46) !important;
  background: rgba(30, 64, 175, 0.42) !important;
  color: #dbeafe !important;
}

/* Remove legacy left accent bar in student cards. */
#grade-submission-section #gradeSubmissionContent .grade-student-item::before,
#grade-submission-section #gradeSubmissionContent .grade-student-item.active::before {
  content: none !important;
  display: none !important;
}

/* Keep PDF viewport scrollable inside the middle panel. */
#grade-submission-section #gradeSubmissionContent .pdf-container {
  height: 100% !important;
  min-height: 0 !important;
  overflow: auto !important;
}

/* ========================================================================== */
/* Grade Submission Toolbar Refresh                                           */
/* ========================================================================== */
#grade-submission-section #gradeSubmissionContent .pdf-viewer-controls {
  flex-wrap: wrap !important;
  gap: 0.42rem !important;
  padding: 0.56rem 0.66rem !important;
  border-bottom: 1px solid rgba(31, 62, 108, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(230, 240, 255, 0.9), rgba(242, 248, 255, 0.88)) !important;
}

#grade-submission-section #gradeSubmissionContent .pdf-viewer-controls .pdf-control-cluster {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  padding: 0.2rem !important;
  border-radius: 12px !important;
  border: 1px solid rgba(31, 103, 228, 0.22) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 6px 12px rgba(13, 39, 79, 0.1) !important;
  flex-shrink: 0;
}

#grade-submission-section #gradeSubmissionContent .pdf-viewer-controls .grade-viewer-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(31, 103, 228, 0.26) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(236, 245, 255, 0.95)) !important;
  color: #1f62b6 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 14px rgba(17, 46, 93, 0.14) !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, color 0.16s ease !important;
}

#grade-submission-section #gradeSubmissionContent .pdf-viewer-controls .grade-viewer-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(31, 103, 228, 0.46) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 12px 20px rgba(17, 46, 93, 0.18) !important;
}

#grade-submission-section #gradeSubmissionContent .pdf-viewer-controls .grade-viewer-btn:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 5px 10px rgba(17, 46, 93, 0.14) !important;
}

#grade-submission-section #gradeSubmissionContent .pdf-viewer-controls .page-info {
  margin-left: auto !important;
  border-radius: 999px !important;
  border: 1px solid rgba(31, 103, 228, 0.24) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(232, 243, 255, 0.9)) !important;
  color: #32567f !important;
  font-size: 0.78rem !important;
  font-weight: 760 !important;
  letter-spacing: 0.01em;
  padding: 0.32rem 0.72rem !important;
  white-space: nowrap;
}

#grade-submission-section #gradeSubmissionContent .annot-toolbar {
  gap: 0.44rem !important;
  padding: 0.52rem 0.66rem !important;
  border-bottom: 1px solid rgba(31, 62, 108, 0.17) !important;
  background: linear-gradient(180deg, rgba(246, 251, 255, 0.97), rgba(251, 254, 255, 0.95)) !important;
}

#grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  padding: 0.22rem !important;
  border-radius: 12px !important;
  border: 1px solid rgba(31, 103, 228, 0.2) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 6px 12px rgba(13, 39, 79, 0.08) !important;
  min-width: 0;
}

#grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-mode-group {
  gap: 0.28rem !important;
}

#grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-mode-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.36rem !important;
  min-height: 35px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(31, 103, 228, 0.24) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 247, 255, 0.95)) !important;
  color: #205ca9 !important;
  font-size: 0.74rem !important;
  font-weight: 740 !important;
  padding: 0 0.72rem !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 8px 14px rgba(17, 46, 93, 0.1) !important;
}

#grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-mode-btn i {
  font-size: 0.74rem;
  opacity: 0.92;
}

#grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-mode-btn.active {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--gs3-accent), var(--gs3-accent-2)) !important;
  color: #fff !important;
  box-shadow: 0 11px 18px rgba(20, 97, 188, 0.28) !important;
}

#grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-settings-group {
  gap: 0.24rem !important;
}

#grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-color-input {
  width: 42px !important;
  min-width: 42px !important;
  min-height: 35px !important;
  border-radius: 10px !important;
  padding: 0.14rem !important;
  border: 1px solid rgba(31, 103, 228, 0.24) !important;
  background: rgba(255, 255, 255, 0.95) !important;
}

#grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-select {
  min-height: 35px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(31, 103, 228, 0.24) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  color: #1d3d64 !important;
  font-size: 0.74rem !important;
  font-weight: 680 !important;
  padding: 0 0.58rem !important;
}

#grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-note-input {
  flex: 1 1 260px !important;
  min-width: 170px !important;
  min-height: 35px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(31, 103, 228, 0.24) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #2a486f !important;
  font-size: 0.75rem !important;
  padding: 0 0.68rem !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}

#grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-history-group {
  margin-left: auto !important;
  gap: 0.28rem !important;
}

#grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-history-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.34rem !important;
  min-height: 35px !important;
  border-radius: 10px !important;
  padding: 0 0.76rem !important;
  font-size: 0.76rem !important;
  font-weight: 760 !important;
}

#grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-history-btn.btn-yellow {
  border-color: transparent !important;
  background: linear-gradient(135deg, #ffb02a, #f08a00) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 18px rgba(176, 110, 24, 0.3) !important;
}

#grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-history-btn.btn-yellow:hover {
  transform: translateY(-1px);
}

body.dark #grade-submission-section #gradeSubmissionContent .pdf-viewer-controls,
body.dark #grade-submission-section #gradeSubmissionContent .annot-toolbar {
  background: linear-gradient(180deg, rgba(9, 20, 36, 0.96), rgba(9, 19, 35, 0.92)) !important;
  border-bottom-color: rgba(118, 150, 202, 0.28) !important;
}

body.dark #grade-submission-section #gradeSubmissionContent .pdf-viewer-controls .pdf-control-cluster,
body.dark #grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-group {
  border-color: rgba(118, 150, 202, 0.3) !important;
  background: rgba(10, 22, 40, 0.86) !important;
  box-shadow: none !important;
}

body.dark #grade-submission-section #gradeSubmissionContent .pdf-viewer-controls .grade-viewer-btn,
body.dark #grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-mode-btn,
body.dark #grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-select,
body.dark #grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-note-input,
body.dark #grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-color-input {
  border-color: rgba(118, 150, 202, 0.34) !important;
  background: rgba(8, 18, 33, 0.95) !important;
  color: #d5e5ff !important;
  box-shadow: none !important;
}

body.dark #grade-submission-section #gradeSubmissionContent .pdf-viewer-controls .page-info {
  border-color: rgba(118, 150, 202, 0.34) !important;
  background: rgba(8, 18, 33, 0.9) !important;
  color: #b8cdef !important;
}

body.dark #grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-mode-btn.active {
  color: #fff !important;
  box-shadow: 0 11px 20px rgba(24, 113, 217, 0.4) !important;
}

body.dark #grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-history-btn.btn-yellow {
  box-shadow: 0 9px 18px rgba(166, 106, 30, 0.42) !important;
}

@media (max-width: 1040px) {
  #grade-submission-section #gradeSubmissionContent .pdf-viewer-controls .grade-viewer-btn {
    width: 33px !important;
    height: 33px !important;
    min-width: 33px !important;
  }

  #grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-mode-btn,
  #grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-history-btn,
  #grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-select,
  #grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-note-input,
  #grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-color-input {
    min-height: 33px !important;
  }

  #grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-history-group {
    margin-left: 0 !important;
  }
}

@media (max-width: 760px) {
  #grade-submission-section #gradeSubmissionContent .annot-toolbar {
    gap: 0.34rem !important;
  }

  #grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-mode-btn {
    font-size: 0.7rem !important;
    padding: 0 0.56rem !important;
  }

  #grade-submission-section #gradeSubmissionContent .annot-toolbar .annot-note-input {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Discussion Forum Refresh (index.html flow only)
   -------------------------------------------------------------------------- */
:root {
  --forum-card-border: rgba(15, 23, 42, 0.12);
  --forum-card-bg: linear-gradient(145deg, #ffffff 0%, #f9fbff 100%);
  --forum-card-shadow: 0 16px 28px rgba(15, 23, 42, 0.09);
  --forum-muted: #5f6b7a;
  --forum-accent: #007aff;
}

#discussions-section .discussion-toolbar-shell {
  display: grid;
  gap: 0.82rem;
  margin-bottom: 0.75rem;
}

#discussions-section .search-bar,
#discussions-section .discussion-search-main {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  max-width: 100%;
  margin-bottom: 0;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: linear-gradient(145deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
}

#discussions-section .search-bar input,
#discussions-section .discussion-search-main input {
  min-width: 0;
}

#discussions-section .discussion-search-advanced {
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.09);
  background: linear-gradient(145deg, #ffffff 0%, #f7fbff 100%);
}

#discussions-section .discussion-search-advanced .search-advanced-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding-bottom: 0.12rem;
}

#discussions-section .discussion-search-advanced .search-advanced-subtitle {
  font-size: 0.76rem;
  color: var(--forum-muted);
  letter-spacing: 0.02em;
}

#discussions-section .discussion-search-advanced .search-advanced-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 680;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #0f172a;
}

#discussions-section .discussion-search-advanced .search-advanced-title i {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0a67c2;
  background: rgba(59, 130, 246, 0.14);
}

#discussions-section .discussion-search-advanced .search-field {
  border-radius: 14px;
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#discussions-section .discussion-search-advanced .search-field:focus-within {
  border-color: rgba(0, 122, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

#discussions-section .discussion-search-advanced .search-field-group--actions {
  align-self: end;
}

#discussions-section .discussion-search-advanced .search-field-group--actions .btn-blue {
  min-height: 42px;
  padding: 0.6rem 1.1rem;
}

.discussion-tag-panel {
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(145deg, rgba(248, 251, 255, 0.95), rgba(243, 248, 255, 0.9));
  padding: 0.28rem 0.44rem;
  margin-bottom: 0.62rem;
}

#discussionTagFilterRow.tag-filter-row {
  padding: 0.14rem;
  border-radius: 12px;
  border: 0;
  background: transparent;
  margin-top: 0;
  margin-bottom: 0;
}

#discussionTagFilterStatus.tag-filter-status {
  min-height: 0;
  margin-top: 0.14rem;
  margin-bottom: 0;
  color: #4b5563;
  font-weight: 540;
  font-size: 0.72rem;
}

#discussionTagFilterStatus.tag-filter-status:empty {
  display: none;
}

#discussionTagFilterRow .tag-filter,
#threadTagsContainer .tag-toggle,
#threadTagsContainer .tag-option,
#thread-page-section .thread-tags-inline .tag-toggle {
  border-radius: 999px;
  border-width: 1px;
  padding: 0.22rem 0.56rem;
  font-size: 0.67rem;
  font-weight: 620;
  letter-spacing: 0.02em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

#discussionTagFilterRow .tag-filter:hover,
#threadTagsContainer .tag-toggle:hover,
#thread-page-section .thread-tags-inline .tag-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 14px rgba(15, 23, 42, 0.12);
}

#discussions-section .discussion-list {
  display: grid;
  gap: 0.52rem;
}

#newThreadContainer .form-card {
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: linear-gradient(145deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.09);
}

#newThreadContainer #newThreadForm {
  display: grid;
  gap: 0.68rem;
}

#newThreadContainer #threadTitle {
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  min-height: 42px;
  padding: 0 0.78rem;
}

#newThreadContainer #threadTitle:focus {
  border-color: rgba(0, 122, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
  outline: none;
}

#newThreadContainer #threadContentEditor,
#newThreadContainer #threadContentEditor .ql-container {
  border-radius: 12px;
  border-color: rgba(148, 163, 184, 0.42);
}

#newThreadContainer #threadTagsContainer {
  gap: 0.42rem;
}

#discussions-section .thread-card {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--forum-card-border);
  background: var(--forum-card-bg);
  box-shadow: var(--forum-card-shadow);
  padding: 0.86rem 0.94rem;
  margin-bottom: 0;
  overflow: hidden;
}

#discussions-section .thread-card::before {
  content: none;
}

#discussions-section .thread-card.thread-card--pinned::before {
  background: linear-gradient(180deg, #ff9500 0%, #ffb347 100%);
}

#discussions-section .thread-card.thread-card--locked::before {
  background: linear-gradient(180deg, #ff3b30 0%, #ff6b63 100%);
}

#discussions-section .thread-card.thread-card--archived {
  opacity: 0.82;
}

#discussions-section .thread-card .thread-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.34;
  font-weight: 690;
  color: #0f172a;
  text-wrap: balance;
}

#discussions-section .thread-card .thread-snippet {
  margin: 0.32rem 0 0;
  color: var(--forum-muted);
  font-size: 0.78rem;
  line-height: 1.46;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#discussions-section .thread-card .thread-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.56rem 1rem;
}

#discussions-section .thread-card .thread-lead-group {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  min-width: 0;
}

#discussions-section .thread-card .thread-list-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  font-size: 0.95rem;
}

#discussions-section .thread-card .thread-content-group {
  min-width: 0;
  display: grid;
  gap: 0.3rem;
}

#discussions-section .thread-card .thread-inline-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

#discussions-section .thread-card .thread-author-line {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  min-width: 0;
}

#discussions-section .thread-card .thread-author-line .thread-author-link {
  font-size: 0.92rem;
  font-weight: 650;
}

#discussions-section .thread-card .thread-side-group {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.thread-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.55rem;
}

.thread-title-block {
  min-width: 0;
  flex: 1 1 auto;
}

.thread-quick-metrics {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.24rem;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#discussions-section .thread-card .thread-card-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.38rem 0.68rem;
}

#discussions-section .thread-card .thread-title-block {
  min-width: 0;
  flex: 1 1 auto;
}

#discussions-section .thread-card .thread-quick-metrics {
  justify-content: flex-end;
  gap: 0.24rem;
  align-self: start;
}

.thread-info-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.33);
  background: rgba(255, 255, 255, 0.78);
  color: #46566b;
  font-size: 0.62rem;
  font-weight: 620;
  padding: 0.12rem 0.44rem;
  line-height: 1.2;
  white-space: nowrap;
}

.thread-info-pill i {
  opacity: 0.82;
}

.thread-author-link {
  color: #0f3f7b;
  font-weight: 620;
  text-decoration: none;
}

.thread-author-link:hover {
  color: #0a67c2;
  text-decoration: underline;
}

.thread-meta-info {
  color: var(--forum-muted);
}

.thread-meta-row {
  justify-content: space-between;
  align-items: center;
  gap: 0.46rem;
  margin-top: 0.3rem;
}

#discussions-section .thread-card .thread-meta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-content: unset;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem 0.68rem;
  margin-top: 0.48rem;
}

.thread-author-group {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-width: 0;
}

.thread-author-avatar {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.64rem;
  font-weight: 700;
  color: #4b5563;
  background: #eef2f7;
  border: 1px solid rgba(148, 163, 184, 0.36);
  flex: 0 0 20px;
}

.thread-author-avatar.thread-author-avatar--xs {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

.thread-author-avatar.thread-author-avatar--lg {
  width: 64px;
  height: 64px;
  flex-basis: 64px;
  font-size: 1rem;
}

.thread-author-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thread-author-avatar--fallback {
  background: #eef2f7;
}

.sidebar-author-avatar {
  margin-bottom: 0.42rem;
}

.thread-meta-pills {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.24rem;
}

#discussions-section .thread-card .thread-meta-pills {
  justify-content: flex-end;
  gap: 0.24rem;
}

#discussions-section .thread-card .thread-chip-row {
  margin-top: 0.62rem;
  gap: 0.38rem;
}

#discussions-section .thread-card .thread-status-group,
#discussions-section .thread-card .thread-tags-row {
  gap: 0.38rem;
}

#discussions-section .thread-card .status-tag {
  font-size: 0.74rem;
  padding: 0.24rem 0.64rem;
  line-height: 1.25;
}

#discussions-section .thread-card .thread-info-pill {
  font-size: 0.8rem;
  padding: 0.28rem 0.7rem;
}

.archived-label {
  color: #c2410c;
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.28);
  border-radius: 999px;
  padding: 0.18rem 0.58rem;
  font-size: 0.7rem;
  font-weight: 640;
}

.thread-chip-row {
  margin-top: 0.34rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.24rem;
  align-items: center;
}

.thread-chip-row--detail {
  margin-top: 0.4rem;
  padding-top: 0;
  border-top: 0;
}

.thread-status-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.24rem;
}

.thread-tags-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.24rem;
}

.status-tag {
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  padding: 0.12rem 0.44rem;
  font-size: 0.62rem;
  font-weight: 650;
  line-height: 1.2;
}

.thread-tag-chip {
  cursor: pointer;
}

.thread-tag-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 14px rgba(15, 23, 42, 0.12);
}

#thread-page-section .thread-back-btn {
  margin-bottom: 0.95rem !important;
  box-shadow: 0 10px 18px rgba(17, 80, 162, 0.22);
}

#thread-page-section .thread-page-columns {
  gap: 1.35rem;
}

#thread-page-section .thread-view-card {
  border-radius: 18px;
  border: 1px solid var(--forum-card-border);
  background: var(--forum-card-bg);
  box-shadow: var(--forum-card-shadow);
}

#thread-page-section .thread-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.7rem;
}

#thread-page-section .thread-title {
  margin: 0;
  color: #0f172a;
  font-size: 1.14rem;
  line-height: 1.35;
  text-wrap: balance;
}

#thread-page-section .thread-view-card > .meta {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

#thread-page-section .thread-view-card > .thread-chip-row--detail {
  margin-bottom: 0.75rem;
}

#thread-page-section .thread-chip-row--detail .status-tag,
#thread-page-section .thread-right .status-tag {
  font-size: 0.72rem;
  padding: 0.22rem 0.6rem;
  line-height: 1.22;
}

#thread-page-section .thread-view-card .thread-meta-row {
  margin-top: 0.44rem;
  gap: 0.6rem;
}

#thread-page-section .thread-view-card .thread-author-group {
  gap: 0.5rem;
}

#thread-page-section .thread-view-card .thread-author-avatar {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  font-size: 0.9rem;
}

#thread-page-section .thread-view-card .thread-author-link {
  font-size: 1.06rem;
  font-weight: 680;
}

#thread-page-section .thread-view-card .thread-info-pill {
  font-size: 0.88rem;
  padding: 0.28rem 0.74rem;
}

#thread-page-section .thread-view-card .author-label {
  font-size: 0.78rem;
  padding: 0.12rem 0.38rem;
}

#thread-page-section .thread-body {
  line-height: 1.68;
  font-size: 0.96rem;
}

#thread-page-section .comments-container {
  margin-top: 1.05rem;
}

#thread-page-section .comments-header {
  margin: 0 0 0.7rem;
  font-size: 1.02rem;
  font-weight: 680;
  color: #0f172a;
}

#thread-page-section .comment-item {
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: linear-gradient(145deg, #ffffff 0%, #f7faff 100%);
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
  padding: 0.85rem 0.95rem;
  margin-bottom: 0.62rem;
}

#thread-page-section .comment-item .comment-body {
  margin-top: 0.38rem;
  font-size: 0.92rem;
  line-height: 1.63;
  color: #1f2937;
}

#thread-page-section .comment-item .comment-meta {
  justify-content: space-between;
  align-items: center;
  gap: 0.62rem;
  font-size: 0.96rem;
}

#thread-page-section .comment-item .comment-author-group {
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
}

#thread-page-section .comment-item .comment-author-avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  font-size: 0.9rem;
}

#thread-page-section .comment-item .thread-author-link {
  font-size: 1rem;
  font-weight: 660;
}

#thread-page-section .comment-item .author-label {
  font-size: 0.78rem;
  padding: 0.12rem 0.38rem;
}

#thread-page-section .comment-item .comment-date-pill {
  font-size: 0.82rem;
  padding: 0.24rem 0.62rem;
}

#thread-page-section .reply-label {
  margin-top: 0.18rem;
  margin-bottom: 0.24rem;
  font-size: 0.77rem;
  color: #475569;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: rgba(241, 245, 249, 0.88);
}

#thread-page-section .comment-actions {
  margin-top: 0.6rem;
  justify-content: flex-end;
  gap: 0.42rem;
}

#thread-page-section .comment-actions .btn-blue,
#thread-page-section .comment-actions .btn-red {
  min-height: 32px;
  padding: 0.34rem 0.75rem;
  font-size: 0.78rem;
  border-radius: 10px;
}

#thread-page-section .comment-form-card {
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: linear-gradient(145deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
}

#thread-page-section .comment-form-card h3 {
  margin: 0;
  font-size: 1rem;
}

#thread-page-section .comment-form-card .comment-editor,
#thread-page-section .comment-form-card .ql-container {
  border-color: rgba(148, 163, 184, 0.45);
}

#thread-page-section .reply-indicator {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 12px;
  border: 1px solid rgba(14, 165, 233, 0.3);
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.12), rgba(56, 189, 248, 0.08));
}

#thread-page-section .reply-indicator-text {
  font-size: 0.8rem;
  color: #0f4f77;
  font-weight: 570;
}

#thread-page-section .reply-indicator-cancel {
  border: 1px solid rgba(14, 116, 144, 0.3);
  background: #ffffff;
  color: #0f4f77;
  border-radius: 10px;
  min-height: 28px;
  padding: 0 0.58rem;
  font-size: 0.72rem;
  font-weight: 620;
  cursor: pointer;
}

#thread-page-section .reply-indicator-cancel:hover {
  background: rgba(14, 165, 233, 0.1);
}

#thread-page-section .thread-actions {
  margin-top: 0.95rem;
  padding: 0.72rem;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: rgba(248, 251, 255, 0.95);
  justify-content: flex-end;
}

#thread-page-section .sidebar-card {
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
  background: linear-gradient(145deg, #ffffff 0%, #f7fbff 100%);
}

#thread-page-section .sidebar-card h4 {
  font-size: 1rem;
}

#thread-page-section .sidebar-card p {
  font-size: 0.95rem;
  line-height: 1.55;
}

#thread-page-section .recent-discussion-card {
  border-left-width: 3px;
  border-radius: 14px;
  padding: 0.58rem 0.64rem;
  margin-bottom: 0.5rem;
  background: rgba(255, 255, 255, 0.85);
  border-top: 1px solid rgba(148, 163, 184, 0.24);
  border-right: 1px solid rgba(148, 163, 184, 0.24);
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
  box-shadow: 0 8px 14px rgba(15, 23, 42, 0.06);
  cursor: pointer;
}

#thread-page-section .recent-thread-row {
  display: flex;
  align-items: flex-start;
  gap: 0.56rem;
}

#thread-page-section .recent-author-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

#thread-page-section .recent-thread-body {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 0.24rem;
}

#thread-page-section .recent-thread-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

#thread-page-section .recent-thread-title {
  font-size: 1rem;
  margin: 0;
  font-weight: 700;
  color: #0a67c2;
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#thread-page-section .recent-thread-state-group {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  flex: 0 0 auto;
}

#thread-page-section .recent-thread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0.2rem 0.48rem;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.1;
}

#thread-page-section .recent-thread-badge--pinned {
  color: #ffffff;
  background: #f97316;
}

#thread-page-section .recent-thread-badge--locked {
  color: #ffffff;
  background: #ef4444;
}

#thread-page-section .recent-thread-author-row {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  font-size: 0.86rem;
  color: #475569;
  min-width: 0;
}

#thread-page-section .recent-thread-author-name {
  font-weight: 650;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#thread-page-section .recent-thread-board {
  font-size: 0.84rem;
  font-weight: 640;
}

#thread-page-section .recent-thread-stats-row {
  display: inline-flex;
  align-items: center;
  gap: 0.58rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: #64748b;
}

#thread-page-section .recent-thread-stats-row > span {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  white-space: nowrap;
}

.discussion-home-panel .thread-card {
  border-radius: 12px;
  padding: 0.62rem 0.7rem;
  margin-bottom: 0.48rem;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
}

.discussion-home-panel .thread-card h4 {
  font-size: 0.86rem;
  margin: 0;
}

.discussion-home-panel .thread-card .meta {
  margin-top: 0.26rem;
  gap: 0.35rem;
}

#thread-page-section .thread-page-columns .thread-left img,
#thread-page-section .thread-page-columns .thread-left video {
  border-radius: 12px;
}

body.dark #discussions-section .discussion-search-advanced {
  background: linear-gradient(145deg, #172234 0%, #101827 100%);
  border-color: rgba(148, 163, 184, 0.22);
}

body.dark #discussions-section .search-bar,
body.dark #discussions-section .discussion-search-main {
  background: linear-gradient(145deg, #172234 0%, #101827 100%);
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: 0 14px 26px rgba(2, 6, 23, 0.45);
}

body.dark #discussions-section .discussion-search-advanced .search-field {
  background: rgba(15, 23, 42, 0.86);
  border-color: rgba(148, 163, 184, 0.26);
}

body.dark #discussions-section .discussion-search-advanced .search-advanced-title i {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.2);
}

body.dark #discussions-section .discussion-search-advanced .search-advanced-title {
  color: #e5edf8;
}

body.dark #discussions-section .discussion-search-advanced .search-advanced-subtitle {
  color: rgba(226, 232, 240, 0.72);
}

body.dark #discussionTagFilterRow.tag-filter-row {
  background: rgba(15, 23, 42, 0.74);
  border-color: rgba(148, 163, 184, 0.2);
}

body.dark .discussion-tag-panel {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.74), rgba(17, 24, 39, 0.74));
  border-color: rgba(148, 163, 184, 0.2);
}

body.dark #discussionTagFilterStatus.tag-filter-status {
  color: rgba(226, 232, 240, 0.78);
}

body.dark #discussions-section .thread-card {
  background: linear-gradient(145deg, #142033 0%, #0c1525 100%);
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: 0 16px 30px rgba(2, 6, 23, 0.45);
}

body.dark #newThreadContainer .form-card {
  background: linear-gradient(145deg, #142033 0%, #0c1525 100%);
  border-color: rgba(148, 163, 184, 0.25);
  box-shadow: 0 16px 30px rgba(2, 6, 23, 0.45);
}

body.dark #newThreadContainer #threadTitle,
body.dark #newThreadContainer #threadContentEditor,
body.dark #newThreadContainer #threadContentEditor .ql-container {
  background: rgba(15, 23, 42, 0.86);
  border-color: rgba(148, 163, 184, 0.28);
  color: var(--mui-dark-text);
}

body.dark #discussions-section .thread-card .thread-title,
body.dark #thread-page-section .thread-title,
body.dark #thread-page-section .comments-header {
  color: #e5edf8;
}

body.dark #discussions-section .thread-card .thread-snippet,
body.dark .thread-meta-info,
body.dark #thread-page-section .comment-item .comment-body {
  color: rgba(226, 232, 240, 0.78);
}

body.dark .thread-info-pill {
  background: rgba(15, 23, 42, 0.8);
  border-color: rgba(148, 163, 184, 0.28);
  color: rgba(226, 232, 240, 0.82);
}

body.dark .thread-author-link {
  color: #93c5fd;
}

body.dark .thread-author-link:hover {
  color: #bfdbfe;
}

body.dark .archived-label {
  color: #fdba74;
  background: rgba(249, 115, 22, 0.2);
  border-color: rgba(249, 115, 22, 0.36);
}

body.dark .status-tag {
  border-color: rgba(148, 163, 184, 0.3);
}

body.dark .thread-author-avatar {
  color: #cbd5e1;
  background: rgba(51, 65, 85, 0.56);
  border-color: rgba(148, 163, 184, 0.38);
}

body.dark #thread-page-section .thread-view-card,
body.dark #thread-page-section .comment-item,
body.dark #thread-page-section .comment-form-card,
body.dark #thread-page-section .sidebar-card,
body.dark #thread-page-section .thread-actions {
  background: linear-gradient(145deg, #142033 0%, #0c1525 100%);
  border-color: rgba(148, 163, 184, 0.25);
  box-shadow: 0 14px 26px rgba(2, 6, 23, 0.46);
}

body.dark #thread-page-section .reply-label {
  color: rgba(203, 213, 225, 0.86);
  border-color: rgba(148, 163, 184, 0.32);
  background: rgba(51, 65, 85, 0.34);
}

body.dark #thread-page-section .reply-indicator {
  border-color: rgba(56, 189, 248, 0.42);
  background: linear-gradient(145deg, rgba(6, 78, 106, 0.5), rgba(8, 47, 73, 0.4));
}

body.dark #thread-page-section .reply-indicator-text {
  color: #bae6fd;
}

body.dark #thread-page-section .reply-indicator-cancel {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(56, 189, 248, 0.35);
  color: #bae6fd;
}

body.dark #thread-page-section .recent-thread-title {
  color: #93c5fd;
}

body.dark #thread-page-section .recent-thread-author-name {
  color: #d6e3f3;
}

body.dark #thread-page-section .recent-thread-author-row,
body.dark #thread-page-section .recent-thread-stats-row {
  color: rgba(203, 213, 225, 0.82);
}

@media (max-width: 980px) {
  #discussions-section .discussion-search-advanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #discussions-section .discussion-search-advanced .search-advanced-head {
    flex-direction: column;
    align-items: flex-start;
  }

  #discussions-section .thread-card .thread-card-header {
    flex-direction: column;
  }

  #discussions-section .thread-card .thread-quick-metrics {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  #thread-page-section .thread-page-columns {
    flex-direction: column;
  }

  #thread-page-section .thread-page-columns .thread-left,
  #thread-page-section .thread-page-columns .thread-right {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (max-width: 640px) {
  #discussions-section .discussion-search-advanced {
    grid-template-columns: 1fr;
    padding: 0.8rem;
    gap: 0.65rem;
  }

  #discussionTagFilterRow.tag-filter-row {
    padding: 0.58rem 0.62rem;
  }

  #discussions-section .thread-card {
    padding: 0.85rem 0.92rem;
    border-radius: 14px;
  }

  #discussions-section .thread-card .thread-title {
    font-size: 0.94rem;
  }

  #discussions-section .thread-card .thread-meta-row,
  #thread-page-section .thread-meta-row,
  #thread-page-section .comment-item .comment-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  #discussions-section .thread-card .thread-meta-pills,
  #thread-page-section .thread-meta-pills {
    justify-content: flex-start;
  }

  #thread-page-section .thread-header {
    flex-direction: column;
    align-items: stretch;
  }

  #thread-page-section .thread-view-card,
  #thread-page-section .comment-form-card,
  #thread-page-section .sidebar-card {
    border-radius: 14px;
    padding: 0.82rem;
  }

  #thread-page-section .thread-actions {
    padding: 0.62rem;
    justify-content: flex-start;
  }
}

/* --------------------------------------------------------------------------
   Resources + Exams Redesign (desktop-first, high-density)
   -------------------------------------------------------------------------- */
#resources-section .search-bar,
#exams-section .search-bar {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.62rem;
}

#resources-section .search-bar input,
#exams-section .search-bar input {
  min-width: 0;
}

#resources-section .category-filter-row,
#exams-section .category-filter-row {
  margin-top: 0.08rem;
  margin-bottom: 0.24rem;
  gap: 0.36rem;
  padding: 0;
}

#resources-section .category-filter,
#exams-section .category-filter {
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(248, 250, 252, 0.94);
  color: #5f6c7b;
  font-size: 0.72rem;
  font-weight: 630;
  line-height: 1.2;
  padding: 0.22rem 0.62rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#resources-section .category-filter:hover,
#exams-section .category-filter:hover {
  transform: translateY(-1px);
}

#resources-section .category-filter-status,
#exams-section .category-filter-status {
  margin-top: 0;
  margin-bottom: 0.48rem;
  font-size: 0.74rem;
  color: #5f6c7b;
}

#exams-section .category-filter-row {
  margin-bottom: 0.34rem;
}

#exams-section .category-filter-status {
  margin-bottom: 0.68rem;
}

#resources-section .category-filter-status:empty,
#exams-section .category-filter-status:empty {
  display: none;
}

#resources-section .resource-list,
#exams-section .exam-list {
  display: grid;
  gap: 0.56rem;
}

#exams-section .exam-list {
  margin-top: 0.16rem;
}

#resources-section .resource-card {
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: linear-gradient(145deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
  padding: 0.88rem 0.98rem;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.62rem 1rem;
}

#resources-section .resource-main {
  min-width: 0;
  display: grid;
  gap: 0.44rem;
}

#resources-section .resource-side {
  min-width: 0;
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 0.5rem;
}

#resources-section .resource-title {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.34;
  font-weight: 700;
  color: #0f172a;
  min-width: 0;
}

#resources-section .resource-description {
  margin: 0;
  color: #4f5f74;
  font-size: 0.95rem;
  line-height: 1.52;
}

#resources-section .resource-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.38rem;
}

#resources-section .resource-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: rgba(255, 255, 255, 0.82);
  color: #4c5d72;
  font-size: 0.86rem;
  font-weight: 610;
  line-height: 1.2;
  padding: 0.24rem 0.66rem;
}

#resources-section .resource-badge-row,
#exams-section .exam-badge-row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.34rem;
  max-width: 420px;
}

#resources-section .resource-badge-row .status-tag,
#exams-section .exam-badge-row .status-tag {
  font-size: 0.74rem;
  padding: 0.24rem 0.64rem;
  line-height: 1.25;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  font-weight: 650;
}

#resources-section .resource-actions.resource-actions--primary {
  margin-top: 0;
  justify-content: flex-end;
  gap: 0.38rem !important;
}

#resources-section .resource-actions > .resource-action-btn,
#resources-section .resource-version-actions > .resource-action-btn {
  min-width: 84px !important;
}

#resources-section .resource-actions a.resource-action-btn,
#resources-section .resource-version-actions a.resource-action-btn {
  text-decoration: none;
}

#resources-section .resource-versions {
  grid-column: 1 / -1;
  margin-top: 0.08rem;
  border-top: 1px dashed rgba(148, 163, 184, 0.36);
  padding-top: 0.48rem;
}

#resources-section .resource-version-item {
  border-radius: 11px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.76);
  padding: 0.44rem 0.56rem;
}

#resources-section .resource-version-label {
  font-size: 0.86rem;
  color: #4b5d72;
  line-height: 1.42;
}

#resources-section .resource-list > p {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
}

#exams-section .exam-card {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: start;
  gap: 0.62rem 0.86rem;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: linear-gradient(145deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
  padding: 0.72rem 0.82rem;
  margin-bottom: 0;
  overflow: hidden;
}

#exams-section .exam-calendar {
  border-right: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#exams-section .exam-date-badge {
  width: 108px;
  min-height: 108px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: #ffffff;
  box-shadow:
    0 10px 18px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 0;
  text-align: center;
  overflow: hidden;
  padding-bottom: 0.36rem;
}

#exams-section .exam-date-month {
  width: 100%;
  padding: 0.28rem 0 0.24rem;
  background: linear-gradient(180deg, #ff6b63 0%, #ef4444 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  font-size: 0.68rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#exams-section .exam-date-day {
  margin-top: 0.48rem;
  font-size: 2rem;
  line-height: 1;
  font-weight: 780;
  color: #111827;
}

#exams-section .exam-date-weekday {
  margin-top: 0.08rem;
  font-size: 0.76rem;
  font-weight: 640;
  color: #55657a;
}

#exams-section .exam-date-year {
  margin-top: 0.06rem;
  font-size: 0.74rem;
  color: #6b7280;
}

#exams-section .exam-date-fallback {
  font-size: 0.84rem;
  color: #64748b;
  font-weight: 620;
}

#exams-section .exam-details {
  min-width: 0;
  display: grid;
  gap: 0.3rem;
  padding: 0.02rem 0;
}

#exams-section .exam-head-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.32rem 0.72rem;
}

#exams-section .exam-title {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.35;
  font-weight: 700;
  color: #0f172a;
  min-width: 0;
}

#exams-section .exam-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 0.34rem;
  font-size: 0.92rem;
  line-height: 1.42;
  color: #4d5f75;
}

#exams-section .exam-detail-row i {
  margin-top: 0.1rem;
  color: #72859b;
}

#exams-section .exam-detail-label {
  color: #334155;
  font-weight: 680;
}

#exams-section .exam-detail-value {
  color: #506176;
}

#exams-section .exam-detail-row--scope .exam-detail-value {
  line-height: 1.42;
}

#exams-section .exam-detail-row--scope .exam-detail-value p,
#exams-section .exam-detail-row--scope .exam-detail-value ul,
#exams-section .exam-detail-row--scope .exam-detail-value ol {
  margin: 0.08rem 0;
}

#exams-section .exam-detail-row--scope .exam-detail-value p:first-child,
#exams-section .exam-detail-row--scope .exam-detail-value ul:first-child,
#exams-section .exam-detail-row--scope .exam-detail-value ol:first-child {
  margin-top: 0;
}

#exams-section .exam-detail-row--scope .exam-detail-value p:last-child,
#exams-section .exam-detail-row--scope .exam-detail-value ul:last-child,
#exams-section .exam-detail-row--scope .exam-detail-value ol:last-child {
  margin-bottom: 0;
}

#exams-section .exam-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.38rem;
  flex-wrap: wrap;
  margin-top: 0.18rem;
}

#exams-section .exam-action-btn {
  min-width: 88px !important;
}

#exams-section .exam-view-score-btn {
  justify-self: start;
}

#exams-section .exam-card--past .exam-date-badge {
  background: #f8fafc;
  border-color: rgba(148, 163, 184, 0.3);
}

#exams-section .exam-card--past .exam-date-month {
  background: linear-gradient(180deg, #f2a5a0 0%, #e68d87 100%);
}

#exams-section .exam-card--past .exam-date-day {
  color: #475569;
}

#exams-section .exam-list > .card {
  margin-bottom: 0;
}

body.dark #resources-section .search-bar,
body.dark #exams-section .search-bar {
  background: linear-gradient(145deg, #172234 0%, #101827 100%);
  border-color: rgba(148, 163, 184, 0.26);
}

body.dark #resources-section .category-filter,
body.dark #exams-section .category-filter {
  background: rgba(30, 41, 59, 0.82);
  border-color: rgba(148, 163, 184, 0.24);
  color: #cbd5e1;
}

body.dark #resources-section .category-filter-status,
body.dark #exams-section .category-filter-status {
  color: rgba(203, 213, 225, 0.82);
}

body.dark #resources-section .resource-card,
body.dark #exams-section .exam-card {
  background: linear-gradient(145deg, #152134 0%, #0d1626 100%);
  border-color: rgba(148, 163, 184, 0.24);
  box-shadow: 0 14px 24px rgba(2, 6, 23, 0.46);
}

body.dark #resources-section .resource-title,
body.dark #exams-section .exam-title,
body.dark #exams-section .exam-date-day {
  color: #e2e8f0;
}

body.dark #resources-section .resource-description,
body.dark #resources-section .resource-version-label,
body.dark #exams-section .exam-detail-value,
body.dark #exams-section .exam-detail-row {
  color: rgba(203, 213, 225, 0.84);
}

body.dark #resources-section .resource-meta-pill {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(148, 163, 184, 0.28);
  color: rgba(203, 213, 225, 0.9);
}

body.dark #resources-section .resource-versions {
  border-top-color: rgba(148, 163, 184, 0.34);
}

body.dark #resources-section .resource-version-item {
  background: rgba(30, 41, 59, 0.58);
  border-color: rgba(148, 163, 184, 0.24);
}

body.dark #exams-section .exam-date-badge {
  border-color: rgba(148, 163, 184, 0.34);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, rgba(236, 242, 250, 0.92) 100%);
  box-shadow:
    0 10px 18px rgba(2, 6, 23, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body.dark #exams-section .exam-date-month,
body.dark #exams-section .exam-date-weekday,
body.dark #exams-section .exam-date-year {
  color: #64748b;
}

body.dark #exams-section .exam-date-day {
  color: #0f172a;
}

body.dark #exams-section .exam-card--past .exam-date-badge {
  background: linear-gradient(180deg, rgba(226, 232, 240, 0.9) 0%, rgba(203, 213, 225, 0.82) 100%);
}

body.dark #exams-section .exam-detail-label {
  color: #d3dfef;
}

/* ------------------------------------------------------------------ */
/* Header nav selected-state final polish                             */
/* ------------------------------------------------------------------ */
header.navbar nav.nav-links button {
  transform: none;
  box-shadow: none;
}

header.navbar nav.nav-links button:hover {
  transform: none;
  background: rgba(22, 119, 255, 0.1);
  border-color: rgba(22, 119, 255, 0.24);
  box-shadow: none;
}

header.navbar nav.nav-links button.active {
  transform: none;
  color: #143760;
  background: linear-gradient(180deg, #d9eaff 0%, #c8ddff 100%);
  border-color: rgba(22, 119, 255, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 3px 10px rgba(22, 119, 255, 0.16);
}

header.navbar .notifications {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2rem;
  padding: 0;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  border-radius: 11px;
  border: 1px solid transparent;
  box-shadow: none;
}

header.navbar #notificationsBell {
  margin-right: 0.34rem;
}

header.navbar #notificationsBell .fa-bell {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1em;
  height: 1em;
  margin: 0;
  display: block;
  font-size: 1.14rem;
  line-height: 1;
  text-align: center;
  transform: translate(calc(-50% + 0.5px), -50%);
  pointer-events: none;
}

header.navbar #notificationCount {
  position: absolute;
  top: 0 !important;
  right: 0 !important;
  transform: translate(42%, -42%);
  width: 1.04rem;
  height: 1.04rem;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  text-align: center;
  color: #ffffff;
  border-radius: 50%;
  border: 2px solid #f7f9ff;
  background: linear-gradient(180deg, #ff4b3f 0%, #ff3b30 100%);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(255, 59, 48, 0.3);
}

header.navbar .notifications:hover {
  background: rgba(22, 119, 255, 0.1);
  border-color: rgba(22, 119, 255, 0.24);
  box-shadow: none;
}

header.navbar .notifications.active {
  background: linear-gradient(180deg, #d9eaff 0%, #c8ddff 100%);
  border-color: rgba(22, 119, 255, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 3px 10px rgba(22, 119, 255, 0.16);
}

header.navbar .notifications.active .fa-bell {
  color: #143760;
}

body.dark header.navbar nav.nav-links button:hover {
  background: rgba(96, 165, 250, 0.2);
  border-color: rgba(147, 197, 253, 0.34);
  box-shadow: none;
}

body.dark header.navbar nav.nav-links button.active {
  color: #f8fbff;
  background: linear-gradient(180deg, rgba(73, 137, 255, 0.34) 0%, rgba(51, 114, 236, 0.48) 100%);
  border-color: rgba(147, 197, 253, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 4px 12px rgba(8, 25, 49, 0.45);
}

body.dark header.navbar .notifications:hover {
  background: rgba(96, 165, 250, 0.2);
  border-color: rgba(147, 197, 253, 0.34);
  box-shadow: none;
}

body.dark header.navbar .notifications.active {
  background: linear-gradient(180deg, rgba(73, 137, 255, 0.34) 0%, rgba(51, 114, 236, 0.48) 100%);
  border-color: rgba(147, 197, 253, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 4px 12px rgba(8, 25, 49, 0.45);
}

body.dark header.navbar .notifications.active .fa-bell {
  color: #f8fbff;
}

body.dark header.navbar #notificationCount {
  border-color: rgba(9, 16, 28, 0.92);
}

/* ------------------------------------------------------------------ */
/* Notification Center Refresh                                        */
/* ------------------------------------------------------------------ */
#notifications-section #notificationPrefs {
  margin-bottom: 0.68rem;
  padding: 0.7rem 0.82rem;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 255, 0.95));
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.07);
}

#notifications-section #notificationPrefs h3 {
  margin: 0 0 0.54rem;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #16253d;
}

#notifications-section .notif-pref-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  margin-bottom: 0.46rem;
}

#notifications-section .notif-pref-row {
  gap: 0.4rem 0.55rem;
  margin-bottom: 0.36rem;
}

#notifications-section .notif-pref-row:last-child {
  margin-bottom: 0;
}

#notifications-section .notif-pref-grid label,
#notifications-section .notif-pref-row label {
  min-height: 34px;
  padding: 0.34rem 0.52rem;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: #2b3f5e;
}

#notifications-section .notif-pref-grid input[type="checkbox"],
#notifications-section .notif-pref-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #1677ff;
  transform: none;
}

#notifications-section .notif-pref-row input[type="time"] {
  height: 32px;
  padding: 0 0.52rem;
  border-radius: 9px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: #ffffff;
  box-shadow: none;
  font-size: 0.79rem;
  color: #314867;
}

#notifications-section .notif-pref-row > span[data-i18n="common.to"] {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
}

#notifications-section #notificationsList {
  display: grid;
  gap: 0.44rem;
  margin-top: 0.6rem;
}

#notifications-section #notificationsList .notification-item {
  padding: 0.58rem 0.68rem;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: linear-gradient(145deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06);
  display: grid;
  gap: 0.2rem;
}

#notifications-section #notificationsList .notification-item::before {
  content: none !important;
}

#notifications-section #notificationsList .notification-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.46rem;
  min-width: 0;
}

#notifications-section #notificationsList .notification-title {
  min-width: 0;
  gap: 0.4rem;
  font-size: 0.92rem;
  line-height: 1.33;
}

#notifications-section #notificationsList .notification-title-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#notifications-section #notificationsList .notification-dot {
  width: 6px;
  height: 6px;
  margin-top: 0.35rem;
}

#notifications-section #notificationsList .notification-meta {
  margin-left: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.38rem;
  font-size: 0.76rem;
  color: #66778f;
}

#notifications-section #notificationsList .notification-time {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  white-space: nowrap;
}

#notifications-section #notificationsList .notification-time i {
  font-size: 0.72rem;
  color: #8ca0bd;
}

#notifications-section #notificationsList .notification-actions {
  position: static;
  top: auto;
  right: auto;
  margin-left: 0.16rem;
  flex-shrink: 0;
}

#notifications-section #notificationsList .notification-delete {
  width: 1.58rem;
  height: 1.58rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

#notifications-section #notificationsList .notification-delete i {
  font-size: 0.76rem;
}

#notifications-section #notificationsList .notification-badge {
  padding: 0.08rem 0.45rem;
  font-size: 0.64rem;
  line-height: 1.15;
  letter-spacing: 0.03em;
}

#notifications-section #notificationsList .notification-item.unread {
  border-left: none !important;
  border-color: rgba(22, 119, 255, 0.26);
  background: linear-gradient(145deg, #f2f8ff 0%, #ffffff 100%);
}

#notifications-section #notificationsList .notification-item:hover {
  transform: none;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
  border-color: rgba(22, 119, 255, 0.3);
}

body.dark #notifications-section #notificationPrefs {
  border-color: rgba(148, 163, 184, 0.24);
  background: linear-gradient(145deg, rgba(18, 28, 44, 0.9), rgba(12, 21, 35, 0.9));
  box-shadow: none;
}

body.dark #notifications-section #notificationPrefs h3 {
  color: #dbe7fb;
}

body.dark #notifications-section .notif-pref-grid label,
body.dark #notifications-section .notif-pref-row label {
  color: #d3dff2;
  background: rgba(24, 36, 56, 0.8);
  border-color: rgba(148, 163, 184, 0.28);
}

body.dark #notifications-section .notif-pref-row input[type="time"] {
  color: #d3dff2;
  background: rgba(16, 27, 43, 0.86);
  border-color: rgba(148, 163, 184, 0.28);
}

body.dark #notifications-section .notif-pref-row > span[data-i18n="common.to"] {
  color: #9fb0c8;
}

body.dark #notifications-section #notificationsList .notification-item {
  border-color: rgba(148, 163, 184, 0.24);
  background: linear-gradient(145deg, rgba(19, 30, 48, 0.92), rgba(12, 21, 36, 0.92));
  box-shadow: none;
}

body.dark #notifications-section #notificationsList .notification-item.unread {
  border-left: none !important;
  border-color: rgba(96, 165, 250, 0.42);
  background: linear-gradient(145deg, rgba(23, 42, 71, 0.92), rgba(14, 26, 44, 0.92));
}

body.dark #notifications-section #notificationsList .notification-meta {
  color: #9fb0c8;
}

body.dark #notifications-section #notificationsList .notification-time i {
  color: #88a2c5;
}

/* ------------------------------------------------------------------ */
/* Admin Panel Dense Refresh                                          */
/* ------------------------------------------------------------------ */
#admin-section.page:not(.hidden) {
  width: min(1260px, calc(100% - 1.1rem));
  max-width: 1260px;
  padding: 0.9rem 1rem 1rem;
}

#admin-section > h2 {
  margin-bottom: 0.46rem;
  font-size: 1.22rem;
}

#admin-section .admin-nav {
  position: sticky;
  top: 62px;
  z-index: 18;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0.28rem;
  margin: 0.2rem 0 0.66rem;
  padding: 0.34rem;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(245, 250, 255, 0.93));
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
  scrollbar-width: none;
}

#admin-section .admin-nav::-webkit-scrollbar {
  display: none;
}

#admin-section .admin-nav button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0.3rem 0.62rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.11);
  background: rgba(255, 255, 255, 0.9);
  color: #2d4365;
  font-size: 0.77rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.1;
  white-space: nowrap;
}

#admin-section .admin-nav button:hover {
  border-color: rgba(22, 119, 255, 0.35);
  color: #154078;
  background: rgba(22, 119, 255, 0.12);
}

#admin-section .admin-nav button.active {
  border-color: rgba(22, 119, 255, 0.5);
  color: #ffffff;
  background: linear-gradient(180deg, #3b88ff 0%, #1f6fe8 100%);
  box-shadow: 0 8px 14px rgba(22, 119, 255, 0.28);
}

#admin-section .admin-subsection {
  margin-top: 0;
  padding: 0.74rem 0.82rem;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.11);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.94));
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.07);
}

#admin-section .admin-subsection > h3 {
  margin: 0 0 0.5rem;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  color: #15263f;
}

#admin-section .form {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 0.44rem 0.66rem;
  margin: 0;
}

#admin-section .form > label {
  margin: 0;
  align-self: center;
  font-size: 0.78rem;
  font-weight: 650;
  color: #415572;
}

#admin-section .form > input,
#admin-section .form > select,
#admin-section .form > textarea,
#admin-section .form > .quill-editor,
#admin-section .form > .ql-toolbar,
#admin-section .form > .ql-container,
#admin-section .form > button {
  grid-column: 2;
}

#admin-section .form > input:not([type="file"]),
#admin-section .form > select,
#admin-section .form > textarea {
  min-height: 34px;
  padding: 0.34rem 0.58rem;
  border-radius: 9px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  box-shadow: none;
  font-size: 0.82rem;
  line-height: 1.3;
}

#admin-section .form > input[type="file"] {
  min-height: 34px;
  padding: 0.32rem 0.5rem;
  border-radius: 9px;
  border: 1px dashed rgba(30, 64, 175, 0.28);
  background: rgba(240, 247, 255, 0.7);
  font-size: 0.78rem;
}

#admin-section .form > textarea {
  min-height: 88px;
}

#admin-section .form > .quill-editor,
#admin-section .form > .ql-container {
  min-height: 126px;
}

#admin-section .form > .ql-toolbar {
  padding: 0.25rem 0.34rem;
  border-radius: 10px 10px 0 0;
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(248, 252, 255, 0.92);
}

#admin-section .form > .quill-editor.ql-container,
#admin-section .form > .ql-container {
  border-radius: 0 0 10px 10px;
  border-color: rgba(15, 23, 42, 0.14);
}

#admin-section .form > button[type="submit"] {
  min-height: 33px;
  margin-top: 0.06rem;
  padding: 0.36rem 0.72rem;
  font-size: 0.79rem;
  font-weight: 650;
}

#admin-section #inviteCodeForm {
  max-width: 560px !important;
}

#admin-section #admin-students {
  display: grid;
  gap: 0.5rem;
}

#admin-section #admin-students > h3 {
  margin-bottom: 0.12rem;
}

#admin-section #admin-students .search-bar {
  margin-bottom: 0.24rem !important;
  border-radius: 12px;
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: none;
  background: rgba(255, 255, 255, 0.93);
}

#admin-section #admin-students .search-input {
  font-size: 0.84rem;
}

#admin-section #admin-students .student-tools-grid {
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0.62rem;
  margin: 0.2rem 0 0.38rem;
}

#admin-section #admin-students .student-tool-card {
  padding: 0.66rem 0.74rem;
  border-radius: 12px;
  gap: 0.48rem;
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 8px 14px rgba(15, 23, 42, 0.06);
}

#admin-section #admin-students .student-tool-card h4 {
  margin: 0.05rem 0 0;
  font-size: 0.9rem;
}

#admin-section #admin-students .eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

#admin-section #admin-students .admin-hint {
  font-size: 0.73rem;
  line-height: 1.34;
}

#admin-section #admin-students .student-import-form input[type="file"] {
  padding: 0.45rem 0.52rem;
  font-size: 0.78rem;
}

#admin-section #admin-students .student-import-actions {
  margin-top: 0.42rem;
  gap: 0.42rem;
}

#admin-section #admin-students .student-selection-actions {
  gap: 0.34rem;
}

#admin-section #admin-students .student-selection-summary {
  font-size: 0.8rem;
}

#admin-section #admin-students .student-selection-summary strong {
  font-size: 1.08rem;
}

#admin-section #studentsList {
  display: grid;
  gap: 0.34rem;
}

#admin-section #admin-students .student-item {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center !important;
  justify-content: normal !important;
  gap: 0.45rem;
  padding: 0.48rem 0.56rem;
  border-radius: 10px;
  margin-bottom: 0;
  box-shadow: none;
}

#admin-section #admin-students .student-item .student-select-cell {
  align-self: center;
}

#admin-section #admin-students .student-select-checkbox {
  width: 15px;
  height: 15px;
}

#admin-section #admin-students .student-item .student-info {
  min-width: 0;
  line-height: 1.26;
}

#admin-section #admin-students .student-item .student-info strong {
  font-size: 0.86rem;
  font-weight: 680;
}

#admin-section #admin-students .student-item .student-info small {
  font-size: 0.71rem;
  color: #5f7088;
}

#admin-section #admin-students .student-item .student-meta {
  justify-content: flex-end;
  gap: 0.24rem;
  font-size: 0.68rem;
}

#admin-section #admin-students .status-tag {
  padding: 0.07rem 0.36rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 660;
  line-height: 1.16;
}

#admin-section #admin-students .student-item.selected {
  border-color: rgba(22, 119, 255, 0.42);
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.16);
}

#admin-section #studentsPagination {
  margin-top: 0.24rem !important;
  justify-content: flex-start;
  gap: 0.2rem;
}

#admin-section #studentsPagination .pagination-btn {
  min-width: 30px;
  height: 28px;
  padding: 0 0.5rem;
  border-radius: 8px;
  font-size: 0.76rem;
}

#admin-section #admin-students .admin-export-row {
  margin-top: 0.5rem !important;
  gap: 0.38rem !important;
}

#admin-section #admin-students .admin-export-row .btn-blue {
  min-height: 32px;
  padding: 0.34rem 0.64rem;
  font-size: 0.78rem;
}

#admin-section #admin-taCode p {
  margin: 0 0 0.54rem;
  font-size: 0.83rem;
  color: #51647f;
}

#admin-section #currentTaCode {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.2rem 0.52rem;
  border-radius: 999px;
  border: 1px solid rgba(22, 119, 255, 0.3);
  background: rgba(22, 119, 255, 0.12);
  color: #1250a3;
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

#admin-section #admin-examMail .exam-mail-hero {
  gap: 0.95rem;
  padding: 1rem 1.05rem;
  border-radius: 16px;
}

#admin-section #admin-examMail .exam-mail-hero h3 {
  margin: 0.14rem 0 0.12rem;
  font-size: 1.02rem;
}

#admin-section #admin-examMail .exam-mail-hero p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
}

#admin-section #admin-examMail .exam-mail-checklist {
  margin-top: 0.55rem;
  gap: 0.32rem;
}

#admin-section #admin-examMail .exam-mail-checklist li {
  font-size: 0.79rem;
}

#admin-section #admin-examMail .exam-mail-hero__badge {
  min-width: 198px;
  padding: 0.74rem 0.84rem;
  border-radius: 12px;
}

#admin-section #admin-examMail .exam-mail-layout {
  margin-top: 0.72rem;
  gap: 0.72rem;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
}

#admin-section #admin-examMail .exam-mail-panel {
  border-radius: 14px;
  padding: 0.84rem 0.92rem;
}

#admin-section #admin-examMail .exam-mail-card {
  gap: 0.95rem;
}

#admin-section #admin-examMail .exam-mail-section__header {
  gap: 0.56rem;
}

#admin-section #admin-examMail .exam-mail-section__header h4 {
  margin: 0;
  font-size: 0.93rem;
}

#admin-section #admin-examMail .exam-mail-section__header p {
  margin: 0.05rem 0 0;
  font-size: 0.75rem;
}

#admin-section #admin-examMail .exam-mail-grid {
  gap: 0.5rem 0.56rem;
}

#admin-section #admin-examMail .apple-form-group {
  gap: 0.24rem;
  margin-bottom: 0.58rem;
}

#admin-section #admin-examMail .apple-form-group label {
  font-size: 0.79rem;
}

#admin-section #admin-examMail .apple-input,
#admin-section #admin-examMail select,
#admin-section #admin-examMail textarea {
  min-height: 33px;
  padding: 0.35rem 0.56rem;
  border-radius: 9px;
  font-size: 0.8rem;
}

#admin-section #admin-examMail .exam-mail-dropzone {
  padding: 0.58rem 0.66rem;
  border-radius: 10px;
}

#admin-section #admin-examMail .exam-mail-dropzone__icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-size: 1rem;
}

#admin-section #admin-examMail .exam-mail-actions {
  gap: 0.42rem;
}

#admin-section #admin-examMail .apple-btn,
#admin-section #admin-examMail .apple-btn-primary {
  min-height: 33px;
  padding: 0.35rem 0.68rem;
  font-size: 0.79rem;
}

body.dark #admin-section .admin-nav {
  border-color: rgba(148, 163, 184, 0.24);
  background: linear-gradient(145deg, rgba(17, 27, 43, 0.92), rgba(11, 19, 32, 0.9));
}

body.dark #admin-section .admin-nav button {
  border-color: rgba(148, 163, 184, 0.3);
  background: rgba(18, 30, 48, 0.82);
  color: #c9d8ee;
}

body.dark #admin-section .admin-nav button:hover {
  color: #eff6ff;
  background: rgba(59, 130, 246, 0.24);
  border-color: rgba(96, 165, 250, 0.42);
}

body.dark #admin-section .admin-nav button.active {
  color: #ffffff;
  border-color: rgba(96, 165, 250, 0.48);
  background: linear-gradient(180deg, rgba(63, 134, 255, 0.56), rgba(43, 104, 220, 0.68));
  box-shadow: 0 8px 14px rgba(10, 22, 44, 0.45);
}

body.dark #admin-section .admin-subsection {
  border-color: rgba(148, 163, 184, 0.24);
  background: linear-gradient(145deg, rgba(16, 27, 43, 0.9), rgba(11, 19, 31, 0.9));
  box-shadow: none;
}

body.dark #admin-section .admin-subsection > h3 {
  color: #dce8f9;
}

body.dark #admin-section .form > label {
  color: #b8cbe3;
}

body.dark #admin-section .form > input:not([type="file"]),
body.dark #admin-section .form > select,
body.dark #admin-section .form > textarea,
body.dark #admin-section .form > .ql-toolbar,
body.dark #admin-section .form > .ql-container {
  color: #dce8f9;
  border-color: rgba(148, 163, 184, 0.32);
  background: rgba(17, 30, 48, 0.86);
}

body.dark #admin-section .form > input[type="file"] {
  color: #dce8f9;
  border-color: rgba(96, 165, 250, 0.34);
  background: rgba(16, 29, 45, 0.78);
}

body.dark #admin-section #admin-students .search-bar,
body.dark #admin-section #admin-students .student-tool-card {
  border-color: rgba(148, 163, 184, 0.28);
  background: linear-gradient(145deg, rgba(18, 31, 49, 0.86), rgba(12, 22, 36, 0.88));
  box-shadow: none;
}

body.dark #admin-section #admin-students .admin-hint {
  color: #9fb3cf;
}

body.dark #admin-section #admin-students .student-item {
  border-color: rgba(148, 163, 184, 0.28);
  background: linear-gradient(145deg, rgba(18, 30, 47, 0.92), rgba(13, 22, 36, 0.92));
}

body.dark #admin-section #admin-students .student-item .student-info small {
  color: #98aecb;
}

body.dark #admin-section #currentTaCode {
  border-color: rgba(96, 165, 250, 0.4);
  background: rgba(59, 130, 246, 0.2);
  color: #bfdbfe;
}

/* ------------------------------------------------------------------ */
/* Admin Panel Rebuild v2                                             */
/* ------------------------------------------------------------------ */
#admin-section.page:not(.hidden) {
  display: grid !important;
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 0.72rem;
  width: min(1380px, calc(100% - 0.85rem)) !important;
  max-width: 1380px !important;
  padding: 0.82rem !important;
  border-radius: 18px;
  border: 1px solid rgba(16, 24, 40, 0.12);
  background:
    radial-gradient(140% 95% at 0% 0%, rgba(224, 242, 255, 0.7) 0%, rgba(224, 242, 255, 0) 52%),
    linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(244, 248, 255, 0.96));
}

#admin-section > h2 {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 1.24rem;
  font-weight: 760;
  letter-spacing: -0.01em;
  color: #112747;
}

#admin-section .admin-nav {
  grid-column: 1;
  grid-row: 2;
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.26rem;
  margin: 0 !important;
  padding: 0.42rem !important;
  border-radius: 14px;
  border: 1px solid rgba(16, 24, 40, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 250, 255, 0.95));
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
  overflow: visible;
}

#admin-section .admin-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 32px;
  gap: 0.42rem;
  padding: 0.35rem 0.56rem;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.92);
  color: #355072;
  font-size: 0.79rem;
  font-weight: 650;
  line-height: 1.15;
}

#admin-section .admin-nav button::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(22, 119, 255, 0.42);
  flex-shrink: 0;
}

#admin-section .admin-nav button:hover {
  background: rgba(22, 119, 255, 0.12);
  border-color: rgba(22, 119, 255, 0.34);
  color: #1a4478;
}

#admin-section .admin-nav button.active {
  color: #ffffff;
  border-color: rgba(22, 119, 255, 0.5);
  background: linear-gradient(180deg, #2f80ff 0%, #1f69d8 100%);
  box-shadow: 0 8px 14px rgba(22, 119, 255, 0.28);
}

#admin-section .admin-nav button.active::before {
  background: rgba(255, 255, 255, 0.88);
}

#admin-section .admin-subsection {
  grid-column: 2;
  grid-row: 2;
  margin: 0 !important;
  min-height: min(760px, calc(100vh - 188px));
  padding: 0.76rem 0.82rem !important;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.11);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 252, 255, 0.96));
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07);
}

#admin-section .admin-subsection > h3 {
  margin: 0 0 0.5rem;
  font-size: 0.98rem;
  font-weight: 730;
  letter-spacing: 0.01em;
}

#admin-section .admin-subsection .form {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 0.46rem 0.72rem;
}

#admin-section .admin-subsection .form > label {
  margin: 0;
  align-self: center;
  font-size: 0.8rem;
  font-weight: 640;
  color: #455c7c;
}

#admin-section .admin-subsection .form > :is(input, select, textarea, .quill-editor, .ql-toolbar, .ql-container, button) {
  grid-column: 2;
}

#admin-section .admin-subsection .form > input:not([type="file"]),
#admin-section .admin-subsection .form > select,
#admin-section .admin-subsection .form > textarea {
  min-height: 35px;
  padding: 0.36rem 0.6rem;
  border-radius: 9px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  box-shadow: none;
  font-size: 0.83rem;
}

#admin-section .admin-subsection .form > input[type="file"] {
  min-height: 35px;
  padding: 0.32rem 0.56rem;
  border-radius: 9px;
  border: 1px dashed rgba(22, 119, 255, 0.32);
  background: rgba(239, 247, 255, 0.82);
  font-size: 0.78rem;
}

#admin-section .admin-subsection .form > textarea {
  min-height: 92px;
}

#admin-section .admin-subsection .form > .ql-toolbar {
  padding: 0.26rem 0.34rem;
  border-color: rgba(15, 23, 42, 0.14);
  border-radius: 9px 9px 0 0;
  background: rgba(247, 251, 255, 0.92);
}

#admin-section .admin-subsection .form > .ql-container,
#admin-section .admin-subsection .form > .quill-editor.ql-container {
  min-height: 136px;
  border-color: rgba(15, 23, 42, 0.14);
  border-radius: 0 0 9px 9px;
}

#admin-section .admin-subsection .form > button[type="submit"] {
  min-height: 34px;
  padding: 0.35rem 0.72rem;
  font-size: 0.8rem;
}

#admin-section #admin-students {
  display: grid;
  gap: 0.46rem;
}

#admin-section #admin-students .student-tools-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.58rem;
  margin: 0.16rem 0 0.36rem;
}

#admin-section #admin-students .student-tool-card {
  border-radius: 11px;
  padding: 0.62rem 0.72rem;
  gap: 0.45rem;
}

#admin-section #admin-students .student-tool-card h4 {
  margin: 0;
  font-size: 0.9rem;
}

#admin-section #admin-students .eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

#admin-section #admin-students .admin-hint {
  font-size: 0.74rem;
}

#admin-section #studentsList {
  display: grid;
  gap: 0.32rem;
}

#admin-section #studentsList .student-item {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 0.46rem;
  padding: 0.5rem 0.58rem;
  margin: 0;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: none;
}

#admin-section #studentsList .student-item:hover {
  border-color: rgba(22, 119, 255, 0.32);
  background: rgba(22, 119, 255, 0.06);
}

#admin-section #studentsList .student-item .student-info strong {
  font-size: 0.88rem;
}

#admin-section #studentsList .student-item .student-info small {
  font-size: 0.72rem;
  color: #60758f;
}

#admin-section #studentsList .student-meta {
  justify-content: flex-end;
  gap: 0.24rem;
}

#admin-section #studentsList .status-tag {
  padding: 0.08rem 0.36rem;
  border-radius: 999px;
  font-size: 0.63rem;
  line-height: 1.14;
}

#admin-section #studentsPagination {
  margin-top: 0.22rem !important;
  justify-content: flex-start;
}

#admin-section .admin-export-row {
  margin-top: 0.45rem !important;
  gap: 0.36rem !important;
}

#admin-section .admin-export-row .btn-blue {
  min-height: 33px;
  padding: 0.34rem 0.66rem;
  font-size: 0.79rem;
}

#admin-section #admin-taCode p {
  margin: 0 0 0.48rem;
  font-size: 0.84rem;
  color: #526985;
}

#admin-section #currentTaCode {
  min-height: 28px;
  padding: 0.18rem 0.52rem;
  border-radius: 999px;
  font-size: 0.8rem;
}

#admin-section #admin-examMail .exam-mail-hero {
  padding: 0.94rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: none;
}

#admin-section #admin-examMail .exam-mail-layout {
  margin-top: 0.68rem;
  gap: 0.68rem;
  grid-template-columns: minmax(0, 1.06fr) minmax(356px, 0.94fr);
}

#admin-section #admin-examMail .exam-mail-panel {
  border-radius: 13px;
  padding: 0.78rem 0.86rem;
  box-shadow: none;
}

#admin-section #admin-examMail .exam-mail-card {
  gap: 0.88rem;
}

#admin-section #admin-examMail .apple-input,
#admin-section #admin-examMail select,
#admin-section #admin-examMail textarea {
  min-height: 34px;
  padding: 0.34rem 0.56rem;
  font-size: 0.8rem;
}

#admin-section .admin-thread-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.42rem;
  padding: 0.44rem 0.54rem;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.88);
}

#admin-section .admin-thread-row.is-archived {
  opacity: 0.66;
}

#admin-section .admin-thread-info {
  min-width: 0;
  display: grid;
  gap: 0.14rem;
}

#admin-section .admin-thread-title {
  font-size: 0.86rem;
  line-height: 1.3;
}

#admin-section .admin-thread-meta {
  font-size: 0.72rem;
  color: #64748b;
}

#admin-section .admin-thread-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

#admin-section .admin-thread-actions .btn-blue,
#admin-section .admin-thread-actions .btn-yellow,
#admin-section .admin-thread-actions .btn-red {
  min-height: 30px;
  padding: 0.3rem 0.58rem;
  font-size: 0.75rem;
}

body.dark #admin-section.page {
  border-color: rgba(148, 163, 184, 0.24);
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(30, 64, 106, 0.38) 0%, rgba(30, 64, 106, 0) 54%),
    linear-gradient(180deg, rgba(8, 16, 30, 0.95), rgba(10, 19, 34, 0.95));
}

body.dark #admin-section > h2 {
  color: #e5eefc;
}

body.dark #admin-section .admin-nav {
  border-color: rgba(148, 163, 184, 0.24);
  background: linear-gradient(180deg, rgba(16, 27, 43, 0.94), rgba(12, 20, 34, 0.92));
  box-shadow: none;
}

body.dark #admin-section .admin-nav button {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(19, 31, 49, 0.86);
  color: #c6d8f0;
}

body.dark #admin-section .admin-nav button.active {
  border-color: rgba(96, 165, 250, 0.45);
  background: linear-gradient(180deg, rgba(57, 125, 247, 0.62), rgba(40, 99, 214, 0.72));
}

body.dark #admin-section .admin-subsection {
  border-color: rgba(148, 163, 184, 0.24);
  background: linear-gradient(180deg, rgba(15, 25, 40, 0.94), rgba(11, 19, 33, 0.92));
  box-shadow: none;
}

body.dark #admin-section .admin-subsection > h3 {
  color: #dbe7fb;
}

body.dark #admin-section .admin-subsection .form > label {
  color: #b7cadf;
}

body.dark #admin-section .admin-subsection .form > input:not([type="file"]),
body.dark #admin-section .admin-subsection .form > select,
body.dark #admin-section .admin-subsection .form > textarea,
body.dark #admin-section .admin-subsection .form > .ql-toolbar,
body.dark #admin-section .admin-subsection .form > .ql-container {
  color: #dbe7fb;
  border-color: rgba(148, 163, 184, 0.3);
  background: rgba(16, 28, 46, 0.88);
}

body.dark #admin-section #studentsList .student-item {
  border-color: rgba(148, 163, 184, 0.26);
  background: rgba(18, 30, 48, 0.88);
}

body.dark #admin-section #studentsList .student-item:hover {
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(30, 64, 111, 0.3);
}

/* ------------------------------------------------------------------ */
/* Admin Panel Visual Refresh v3 (clean + dense)                      */
/* ------------------------------------------------------------------ */
#admin-section.page:not(.hidden) {
  display: block !important;
  width: min(1320px, calc(100% - 0.9rem)) !important;
  max-width: 1320px !important;
  margin: 0.82rem auto 1rem !important;
  padding: 0.92rem !important;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(246, 250, 255, 0.96));
  box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
}

#admin-section > h2 {
  margin: 0 0 0.62rem;
  font-size: 1.2rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

#admin-section .admin-nav {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.36rem;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

#admin-section .admin-nav button {
  justify-content: center !important;
  min-height: 34px;
  padding: 0.34rem 0.58rem;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.92);
  color: #304765;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.12;
}

#admin-section .admin-nav button::before {
  content: none !important;
}

#admin-section .admin-nav button:hover {
  border-color: rgba(22, 119, 255, 0.35);
  background: rgba(22, 119, 255, 0.1);
  color: #1f4f8c;
}

#admin-section .admin-nav button.active {
  border-color: rgba(22, 119, 255, 0.5);
  background: linear-gradient(180deg, #3385ff 0%, #1f69d8 100%);
  color: #ffffff;
  box-shadow: 0 8px 14px rgba(22, 119, 255, 0.24);
}

#admin-section .admin-subsection {
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: 0 !important;
  margin-top: 0.58rem !important;
  padding: 0.86rem 0.92rem !important;
  border-radius: 13px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06);
}

#admin-section .admin-subsection > h3 {
  margin: 0 0 0.52rem;
  font-size: 1rem;
  font-weight: 710;
}

#admin-section .admin-subsection .form {
  grid-template-columns: 144px minmax(0, 1fr);
  gap: 0.46rem 0.68rem;
}

#admin-section .admin-subsection .form > label {
  font-size: 0.81rem;
  color: #475d7d;
}

#admin-section .admin-subsection .form > input:not([type="file"]),
#admin-section .admin-subsection .form > select,
#admin-section .admin-subsection .form > textarea {
  min-height: 36px;
  border-radius: 9px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  font-size: 0.84rem;
  box-shadow: none;
}

#admin-section .admin-subsection .form > input[type="file"] {
  min-height: 36px;
  border-radius: 9px;
  font-size: 0.79rem;
}

#admin-section .admin-subsection .form > textarea {
  min-height: 94px;
}

#admin-section .admin-subsection .form > .ql-toolbar {
  border-radius: 9px 9px 0 0;
}

#admin-section .admin-subsection .form > .ql-container,
#admin-section .admin-subsection .form > .quill-editor.ql-container {
  min-height: 138px;
  border-radius: 0 0 9px 9px;
}

#admin-section .admin-subsection .form > button[type="submit"] {
  min-height: 34px;
  padding: 0.34rem 0.72rem;
  font-size: 0.8rem;
}

#admin-section #admin-students {
  gap: 0.5rem;
}

#admin-section #admin-students .search-bar {
  margin-bottom: 0.22rem !important;
  border-radius: 11px;
  box-shadow: none;
  border-color: rgba(15, 23, 42, 0.13);
}

#admin-section #admin-students .student-tools-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.52rem;
  margin: 0.15rem 0 0.36rem;
}

#admin-section #admin-students .student-tool-card {
  padding: 0.7rem 0.78rem;
  border-radius: 10px;
  gap: 0.5rem;
}

#admin-section #admin-students .student-tool-card h4 {
  font-size: 0.92rem;
}

#admin-section #admin-students .admin-hint {
  font-size: 0.74rem;
}

#admin-section #studentsList {
  gap: 0.3rem;
}

#admin-section #studentsList .student-item {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 0.48rem;
  padding: 0.52rem 0.6rem;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.11);
  background: #ffffff;
}

#admin-section #studentsList .student-item:hover {
  border-color: rgba(22, 119, 255, 0.32);
  background: rgba(22, 119, 255, 0.06);
}

#admin-section #studentsList .student-item .student-info strong {
  font-size: 0.89rem;
}

#admin-section #studentsList .student-item .student-info small {
  font-size: 0.73rem;
}

#admin-section #studentsList .student-meta {
  gap: 0.24rem;
}

#admin-section #studentsList .status-tag {
  font-size: 0.64rem;
}

#admin-section #studentsPagination {
  margin-top: 0.24rem !important;
  justify-content: flex-start;
}

#admin-section .admin-export-row {
  margin-top: 0.5rem !important;
  gap: 0.4rem !important;
}

#admin-section #admin-examMail .exam-mail-hero {
  padding: 0.98rem 1.04rem;
  border-radius: 12px;
}

#admin-section #admin-examMail .exam-mail-layout {
  margin-top: 0.64rem;
  gap: 0.62rem;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.96fr);
}

#admin-section #admin-examMail .exam-mail-panel {
  border-radius: 12px;
  padding: 0.82rem 0.88rem;
}

#admin-section #admin-examMail .apple-input,
#admin-section #admin-examMail select,
#admin-section #admin-examMail textarea {
  min-height: 35px;
  font-size: 0.81rem;
}

#admin-section .admin-thread-row {
  border-radius: 10px;
  padding: 0.5rem 0.58rem;
}

#admin-section .admin-thread-title {
  font-size: 0.88rem;
}

#admin-section .admin-thread-meta {
  font-size: 0.74rem;
}

#admin-section .admin-thread-actions .btn-blue,
#admin-section .admin-thread-actions .btn-yellow,
#admin-section .admin-thread-actions .btn-red {
  min-height: 31px;
  font-size: 0.76rem;
}

@media (max-width: 1160px) {
  #admin-section .admin-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #admin-section #admin-students .student-tools-grid,
  #admin-section #admin-examMail .exam-mail-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

body.dark #admin-section.page:not(.hidden) {
  border-color: rgba(148, 163, 184, 0.24);
  background: linear-gradient(180deg, rgba(8, 16, 30, 0.96), rgba(10, 19, 34, 0.95));
  box-shadow: none;
}

body.dark #admin-section > h2 {
  color: #e5eefc;
}

body.dark #admin-section .admin-nav button {
  border-color: rgba(148, 163, 184, 0.3);
  background: rgba(19, 31, 49, 0.86);
  color: #c6d8f0;
}

body.dark #admin-section .admin-nav button.active {
  border-color: rgba(96, 165, 250, 0.46);
  background: linear-gradient(180deg, rgba(57, 125, 247, 0.62), rgba(40, 99, 214, 0.72));
}

body.dark #admin-section .admin-subsection {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(13, 24, 39, 0.9);
}

body.dark #admin-section .admin-subsection > h3,
body.dark #admin-section .admin-subsection .form > label {
  color: #dbe7fb;
}

body.dark #admin-section .admin-subsection .form > input:not([type="file"]),
body.dark #admin-section .admin-subsection .form > select,
body.dark #admin-section .admin-subsection .form > textarea,
body.dark #admin-section .admin-subsection .form > .ql-toolbar,
body.dark #admin-section .admin-subsection .form > .ql-container {
  color: #dbe7fb;
  border-color: rgba(148, 163, 184, 0.3);
  background: rgba(16, 28, 46, 0.88);
}

body.dark #admin-section #studentsList .student-item {
  border-color: rgba(148, 163, 184, 0.26);
  background: rgba(18, 30, 48, 0.88);
}