/* Grader Widget Styles */
.grader-widget {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 0 auto;
}

.grader-widget.authenticated {
  padding: 0;
}

.grader-widget.loading {
  padding: 20px;
}

.grader-widget.error {
  padding: 20px;
  text-align: center;
  color: #dc3545;
}

.grader-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e1e5e9;
  background: #f8f9fa;
  border-radius: 8px 8px 0 0;
}

.grader-header h3 {
  margin: 0;
  color: #333;
  font-size: 1.25rem;
  font-weight: 600;
}

.logout-btn {
  background: #dc3545;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background-color 0.2s;
}

.logout-btn:hover {
  background: #c82333;
}

.grader-content {
  padding: 20px;
}

.user-info h4,
.grader-actions h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 1.1rem;
  font-weight: 600;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 25px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

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

.info-item label {
  font-weight: 500;
  color: #666;
  margin-right: 10px;
  min-width: 120px;
}

.info-item span {
  color: #333;
  text-align: right;
  flex: 1;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-badge.verified {
  background: #d4edda;
  color: #155724;
}

.status-badge.unverified {
  background: #f8d7da;
  color: #721c24;
}

.status-badge:not(.verified):not(.unverified) {
  background: #d1ecf1;
  color: #0c5460;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.action-btn {
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s;
  min-width: 120px;
}

.action-btn.primary {
  background: #007bff;
  color: white;
}

.action-btn.primary:hover {
  background: #0056b3;
}

.action-btn.secondary {
  background: #6c757d;
  color: white;
}

.action-btn.secondary:hover {
  background: #545b62;
}

.action-btn.danger {
  background: #dc3545;
  color: white;
}

.action-btn.danger:hover {
  background: #c82333;
}

.grader-widget.loading .loading-state {
  text-align: center;
  padding: 2rem 1rem;
  color: #6c757d;
}

.grader-widget.loading .spinner {
  width: 24px;
  height: 24px;
  border: 2px solid #e5e5e7;
  border-top: 2px solid #007aff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.grader-widget.error h3 {
  color: #dc3545;
  margin-bottom: 10px;
}

.grader-widget.error button {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 15px;
}

.grader-widget.error button:hover {
  background: #0056b3;
}

/* Manager Grid and Cards */
.manager-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 20px 0;
  max-width: 600px;
  margin: 0 auto;
}

.cell {
  display: flex;
  flex-direction: column;
}

.cell.left-align {
  text-align: left;
}

.cell.medium-4 {
  flex: 0 0 calc(50% - 10px);
  min-width: 200px;
}

.card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  height: 100%;
  cursor: pointer;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

.card:active {
  transform: translateY(-2px);
}

.blue-background-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  min-height: 250px;
  justify-content: center;
  align-items: center;
}

.card-image {
  width: 120px;
  height: 120px;
  margin: 0 auto 15px;
  display: block;
}

.card-heading {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
}

.card-heading.bottom {
  margin-top: auto;
}

/* Responsive design */
@media (max-width: 768px) {
  .grader-widget {
    margin: 10px;
    max-width: none;
  }
  
  .grader-header {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  
  .manager-grid {
    grid-template-columns: 1fr;
    gap: 15px;
    max-width: 100%;
  }
  
  .cell.medium-4 {
    flex: 0 0 100%;
  }
  
  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .info-item span {
    text-align: left;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .action-btn {
    width: 100%;
  }
}

/* Export progress overlay */
.export-progress-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  z-index: 10000;
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.export-progress-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

body.export-progress-locked {
  overflow: hidden;
}

.export-progress-overlay__content {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  width: min(480px, 90vw);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
  text-align: center;
  margin: 0 auto;
}

.export-progress-overlay__title {
  margin: 1rem 0 0.5rem;
  font-size: 1.25rem;
  color: #111827;
}

.export-progress-overlay__message {
  margin: 0 0 1.5rem;
  color: #374151;
  font-size: 0.95rem;
}

.export-progress-overlay__spinner {
  width: 56px;
  height: 56px;
  border: 5px solid #e2e8f0;
  border-top-color: #2563eb;
  border-radius: 50%;
  margin: 0 auto;
  animation: exportOverlaySpin 0.9s linear infinite;
}

@keyframes exportOverlaySpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.export-progress-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}

.export-progress-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.export-progress-step__indicator {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid #cbd5f5;
  display: inline-block;
}

.export-progress-step__label {
  font-size: 0.95rem;
  color: #1f2937;
  font-weight: 500;
}

.export-progress-step.is-active {
  border-color: #2563eb;
  background: #eff6ff;
}

.export-progress-step.is-active .export-progress-step__indicator {
  border-color: #2563eb;
  background-color: rgba(37, 99, 235, 0.2);
}

.export-progress-step.is-complete {
  border-color: #22c55e;
  background: #ecfdf5;
}

.export-progress-step.is-complete .export-progress-step__indicator {
  border-color: #22c55e;
  background-color: #22c55e;
}

.export-progress-step.is-error {
  border-color: #dc2626;
  background: #fef2f2;
}

.export-progress-step.is-error .export-progress-step__indicator {
  border-color: #dc2626;
  background-color: #dc2626;
}
/* Full-screen grading tool styles */
.grading-tool-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #f5f5f7;
  z-index: 2000;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

#grading-tool-modal {
  z-index: 9999;
}

.grading-tool-fullscreen.show {
  display: flex;
}

body.grading-tool-open {
  overflow: hidden;
}

/* Prototype styles */
* { margin: 0; padding: 0; box-sizing: border-box; }

.grading-tool-fullscreen * {
  font-family: 'Open Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.grading-tool-fullscreen {
  background: #f5f5f7;
  color: #1d1d1f;
}
        
      /* Header - COMPACT */
      #grading-tool-modal .editor-header,
      .grading-tool-fullscreen .editor-header {
          background: #ffffff;
          border-bottom: 1px solid #e5e5e7;
          padding-top: 0.5rem !important;
          padding-bottom: 0.5rem !important;
          padding-left: 2rem;
          padding-right: 2rem;
          min-height: 48px;
          box-shadow: 0 1px 3px rgba(0,0,0,0.05);
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-shrink: 0;
          position: relative;
          z-index: 1001;
      }
      
      #grading-tool-modal .editor-header-left,
      .grading-tool-fullscreen .editor-header-left {
          flex: 0 0 auto;
      }
      
      #grading-tool-modal .editor-header-center,
      .grading-tool-fullscreen .editor-header-center {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          gap: 0.35rem;
      }
        
      #grading-tool-modal .editor-title {
          font-size: 1.125rem;
          font-weight: 600;
          color: #1d1d1f;
          letter-spacing: -0.01em;
      }
      
      .grading-tool-fullscreen .editor-title {
          font-size: 1.25rem;
          font-weight: 600;
          color: #1d1d1f;
          letter-spacing: -0.01em;
          margin: 0;
      }
        
      #grading-tool-modal .editor-subtitle {
          font-size: 0.875rem;
          font-style: italic;
          color: #86868b;
          font-weight: normal;
      }
      
      .grading-tool-fullscreen .editor-subtitle {
          font-size: 1rem;
          font-weight: 500;
          color: #4a4a4f;
      }
      
      #grading-tool-modal .editor-path,
      .grading-tool-fullscreen .editor-path {
          margin-top: 0;
          width: fit-content;
          font-size: 0.75rem;
          color: #6c757d;
          font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
          background: #f8f9fa;
          padding: 0.25rem 0.5rem;
          border-radius: 4px;
          display: inline-block;
          border: 1px solid #e9ecef;
      }
        
      /* IA Notification Animations */
      @keyframes slideIn {
          from {
              transform: translateX(100%);
              opacity: 0;
          }
          to {
              transform: translateX(0);
              opacity: 1;
          }
      }
        
      @keyframes slideOut {
          from {
              transform: translateX(0);
              opacity: 1;
          }
          to {
              transform: translateX(100%);
              opacity: 0;
          }
      }
        
        
      /* Toolbar - COMPACT */
      #grading-tool-modal .editor-toolbar,
      .grading-tool-fullscreen .editor-toolbar {
          background: #ffffff;
          border-bottom: 1px solid #e5e5e7;
          padding: 0 1rem;
          display: flex;
          align-items: center;
          gap: 0.375rem;
          height: 48px;
          min-height: 48px;
          position: relative;
          overflow: visible !important;
          z-index: 100;
          flex-shrink: 0;
      }
        
      /* Menu System */
      #grading-tool-modal .menu-container,
      .grading-tool-fullscreen .menu-container {
          position: relative;
          z-index: 1500;
          display: inline-block;
      }
        
      #grading-tool-modal .menu-trigger,
      .grading-tool-fullscreen .menu-trigger {
          padding: 0.375rem 0.75rem;
          background: transparent;
          border: none;
          color: #1d1d1f;
          font-size: 0.8125rem;
          font-weight: 500;
          cursor: pointer !important;
          border-radius: 5px;
          transition: all 0.2s ease;
          display: flex;
          align-items: center;
          gap: 0.25rem;
          height: 32px;
          white-space: nowrap;
          position: relative;
          z-index: 10;
          user-select: none;
      }
        
      #grading-tool-modal .menu-trigger:hover,
      .grading-tool-fullscreen .menu-trigger:hover {
          background: #f0f0f2;
      }
        
      #grading-tool-modal .menu-trigger.active,
      .grading-tool-fullscreen .menu-trigger.active {
          background: #007aff;
          color: white;
      }
        
      #grading-tool-modal .menu-trigger svg,
      .grading-tool-fullscreen .menu-trigger svg {
          width: 12px;
          height: 12px;
          transition: transform 0.2s ease;
          pointer-events: none;
      }
        
      #grading-tool-modal .menu-trigger.active svg,
      .grading-tool-fullscreen .menu-trigger.active svg {
          transform: rotate(180deg);
      }
        
      #grading-tool-modal .dropdown-menu,
      .grading-tool-fullscreen .dropdown-menu {
          position: absolute;
          top: 100%;
          left: 0;
          min-width: 240px;
          background: white;
          border: 1px solid #e5e5e7;
          border-radius: 6px;
          box-shadow: 0 4px 24px rgba(0,0,0,0.15);
          padding: 0.375rem;
          display: none;
          z-index: 9999;
          margin-top: 3px;
      }
        
      #grading-tool-modal .dropdown-menu.show,
      .grading-tool-fullscreen .dropdown-menu.show {
          display: block !important;
      }
        
      #grading-tool-modal .menu-item,
      .grading-tool-fullscreen .menu-item {
          padding: 0.5rem 0.875rem;
          border-radius: 5px;
          background: transparent;
          border: none;
          color: #1d1d1f;
          font-size: 0.8125rem;
          cursor: pointer;
          transition: all 0.15s ease;
          display: flex;
          align-items: center;
          gap: 0.625rem;
          width: 100%;
          text-align: left;
          position: relative;
      }
        
      #grading-tool-modal .menu-item:hover,
      .grading-tool-fullscreen .menu-item:hover {
          background: #f0f0f2;
          color: #007aff;
      }
        
      #grading-tool-modal .menu-item svg,
      .grading-tool-fullscreen .menu-item svg {
          width: 16px;
          height: 16px;
          stroke: currentColor;
          stroke-width: 2;
          fill: none;
          flex-shrink: 0;
      }
        
      .menu-separator {
          height: 1px;
          background: #e5e5e7;
          margin: 0.25rem 0;
      }
        
      /* Toolbar Separator - COMPACT */
      #grading-tool-modal .toolbar-separator,
      .grading-tool-fullscreen .toolbar-separator {
          width: 1px;
          height: 20px;
          background: #e5e5e7;
          margin: 0 0.25rem;
          flex-shrink: 0;
          pointer-events: none;
      }
        
      /* Navigation Tools - Enhanced Visibility - COMPACT */
      #grading-tool-modal .nav-tools,
      .grading-tool-fullscreen .nav-tools {
          display: flex;
          align-items: center;
          gap: 0.375rem;
          padding: 0 0.375rem;
          background: rgba(0, 122, 255, 0.05);
          border-radius: 6px;
          padding: 0.125rem 0.375rem;
      }
        
      #grading-tool-modal .nav-button,
      .grading-tool-fullscreen .nav-button {
          padding: 0.375rem 0.625rem;
          background: #007aff;
          color: white;
          border: none;
          border-radius: 5px;
          font-size: 0.75rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.15s ease;
          display: flex;
          align-items: center;
          gap: 0.25rem;
          height: 32px;
      }
        
      #grading-tool-modal .nav-button:hover:not(:disabled),
      .grading-tool-fullscreen .nav-button:hover:not(:disabled) {
          background: #0051d5;
          transform: translateY(-1px);
          box-shadow: 0 2px 8px rgba(0,122,255,0.2);
      }
        
      #grading-tool-modal .nav-button:active:not(:disabled),
      .grading-tool-fullscreen .nav-button:active:not(:disabled) {
          transform: translateY(0);
      }
        
      #grading-tool-modal .nav-button:disabled,
      .grading-tool-fullscreen .nav-button:disabled {
          opacity: 0.5;
          cursor: not-allowed;
          background: #86868b;
      }
        
      #grading-tool-modal .nav-button svg,
      .grading-tool-fullscreen .nav-button svg {
          width: 14px;
          height: 14px;
          stroke: currentColor;
          stroke-width: 2.5;
          fill: none;
      }
        
      #grading-tool-modal .page-info,
      .grading-tool-fullscreen .page-info {
          padding: 0.25rem 0.75rem;
          font-size: 0.75rem;
          font-weight: 600;
          color: #1d1d1f;
          white-space: nowrap;
          background: white;
          border: 1px solid #e5e5e7;
          border-radius: 5px;
      }
        
      /* Marking Tools - Enhanced for Free-form marking - COMPACT */
      .marking-tools {
          display: flex;
          align-items: center;
          gap: 0.25rem;
          margin: 0 0.25rem;
      }
        
      .marking-btn {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          border: none;
          color: white;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s ease;
          position: relative;
      }
        
      .marking-btn.tick {
          background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
      }
        
      .marking-btn.cross {
          background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
      }
        
      .marking-btn.arrow {
          background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
      }
        
      .marking-btn.comment {
          background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
      }
        
      .marking-btn.image {
          background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
      }
        
      .marking-btn.crop {
          background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
      }
        
      .marking-btn.delete {
          background: linear-gradient(135deg, #9e9e9e 0%, #616161 100%);
      }
        
      .marking-btn.line {
          background: linear-gradient(135deg, #9e9e9e 0%, #616161 100%);
      }
        
      .marking-btn.circle {
          background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
      }
        
      .marking-btn.rectangle {
          background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
      }
        
      /* Text tool - improve contrast */
      .marking-btn.text {
          background: linear-gradient(135deg, #9e9e9e 0%, #616161 100%);
      }
        
      .marking-btn.sticker {
          background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
      }
        
      .marking-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 16px rgba(0,0,0,0.2);
      }
        
      .marking-btn:active {
          transform: translateY(0);
      }
        
      .marking-btn.active {
          box-shadow: 0 1px 4px rgba(0,0,0,0.3), inset 0 1px 3px rgba(0,0,0,0.2);
          transform: scale(0.95);
      }
        
      .marking-btn svg {
          width: 18px;
          height: 18px;
          stroke: currentColor;
          stroke-width: 3;
          fill: none;
      }
        
      /* Overlay Toggle - COMPACT */
      .overlay-toggle {
          display: flex;
          align-items: center;
          gap: 0.25rem;
          padding: 0.25rem 0.5rem;
          background: #007aff;
          color: white;
          border: none;
          border-radius: 5px;
          font-size: 0.75rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.15s ease;
          height: 28px;
          opacity: 0.3;
          pointer-events: none;
      }
        
      .overlay-toggle.active {
          opacity: 1;
          pointer-events: all;
      }
        
      .overlay-toggle.off {
          background: #6c757d;
      }
        
      .overlay-toggle svg {
          width: 14px;
          height: 14px;
      }
        
      /* Alignment Panel Toggle Button - COMPACT */
      .alignment-toggle-btn {
          display: flex;
          align-items: center;
          gap: 0.25rem;
          padding: 0.25rem 0.5rem;
          background: #17a2b8;
          color: white;
          border: none;
          border-radius: 5px;
          font-size: 0.75rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.15s ease;
          height: 28px;
          opacity: 0.3;
          pointer-events: none;
      }
        
      .alignment-toggle-btn.active {
          opacity: 1;
          pointer-events: all;
      }
        
      .alignment-toggle-btn:hover {
          background: #138496;
      }
        
      .alignment-toggle-btn svg {
          width: 14px;
          height: 14px;
      }
        
      /* Floating Alignment Panel - COMPACT */
      .floating-alignment-panel {
          position: fixed;
          top: 100px;
          left: 40px;
          background: white;
          border-radius: 10px;
          box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
          padding: 0;
          z-index: 1000;
          width: 260px;
          display: none;
          flex-direction: column;
          overflow: hidden;
      }
        
      .floating-alignment-panel.show {
          display: flex;
      }
        
      #grading-tool-modal .panel-header,
      .grading-tool-fullscreen .panel-header {
          background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
          color: white;
          padding: 0.625rem 0.875rem;
          cursor: move;
          display: flex;
          justify-content: space-between;
          align-items: center;
          user-select: none;
      }
        
      #grading-tool-modal .panel-title,
      .grading-tool-fullscreen .panel-title {
          font-size: 0.8125rem;
          font-weight: 600;
          display: flex;
          align-items: center;
          gap: 0.375rem;
      }
        
      #grading-tool-modal .panel-title svg,
      .grading-tool-fullscreen .panel-title svg {
          width: 16px;
          height: 16px;
      }
      .panel-close {
          background: rgba(255,255,255,0.2);
          border: none;
          color: white;
          width: 22px;
          height: 22px;
          border-radius: 50%;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s ease;
      }
        
      .panel-close:hover {
          background: rgba(255,255,255,0.3);
          transform: rotate(90deg);
      }
        
      .panel-close svg {
          width: 12px;
          height: 12px;
          stroke-width: 3;
      }
        
      .panel-body {
          padding: 0.875rem;
      }
        
      .alignment-info {
          background: #f0f9ff;
          border: 1px solid #0ba5e9;
          border-radius: 5px;
          padding: 0.375rem 0.625rem;
          margin-bottom: 0.75rem;
          font-size: 0.6875rem;
          color: #0369a1;
          font-weight: 500;
      }
        
      .alignment-control-group {
          margin-bottom: 0.75rem;
      }
        
      .alignment-control-group:last-child {
          margin-bottom: 0;
      }
        
      .control-label {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 0.375rem;
          font-size: 0.75rem;
          font-weight: 600;
          color: #374151;
      }
        
      .control-value {
          font-size: 0.75rem;
          color: #17a2b8;
          font-weight: 500;
          background: rgba(23,162,184,0.1);
          padding: 0.125rem 0.375rem;
          border-radius: 3px;
      }
        
      .control-slider {
          width: 100%;
          height: 5px;
          -webkit-appearance: none;
          appearance: none;
          background: #e5e7eb;
          border-radius: 3px;
          outline: none;
          transition: all 0.2s ease;
      }
        
      .control-slider:hover {
          background: #d1d5db;
      }
        
      .control-slider::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background: #17a2b8;
          cursor: pointer;
          transition: all 0.2s ease;
          box-shadow: 0 2px 8px rgba(23,162,184,0.3);
      }
        
      .control-slider::-webkit-slider-thumb:hover {
          transform: scale(1.2);
          background: #138496;
      }
        
      .control-slider::-moz-range-thumb {
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background: #17a2b8;
          cursor: pointer;
          border: none;
          transition: all 0.2s ease;
          box-shadow: 0 2px 8px rgba(23,162,184,0.3);
      }
        
      .control-slider::-moz-range-thumb:hover {
          transform: scale(1.2);
          background: #138496;
      }
        
      .alignment-actions {
          display: flex;
          gap: 0.375rem;
          margin-top: 0.75rem;
          padding-top: 0.75rem;
          border-top: 1px solid #e5e7eb;
      }
        
      .action-btn {
          flex: 1;
          padding: 0.375rem 0.25rem;
          border: none;
          border-radius: 5px;
          font-size: 0.6875rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.15s ease;
          min-width: 0;
      }
        
      .action-btn.reset {
          background: #f3f4f6;
          color: #374151;
          border: 1px solid #d1d5db;
      }
        
      .action-btn.reset:hover {
          background: #e5e7eb;
      }
        
      .action-btn.apply-all {
          background: #10b981;
          color: white;
      }
        
      .action-btn.apply-all:hover {
          background: #059669;
      }
        
      /* Control Button for General Instructions */
      #grading-tool-modal .control-button,
      .grading-tool-fullscreen .control-button {
          padding: 0.375rem 0.75rem;
          background: transparent;
          border: 1px solid #e5e5e7;
          border-radius: 6px;
          color: #1d1d1f;
          font-size: 0.8125rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.15s ease;
          display: flex;
          align-items: center;
          gap: 0.5rem;
          height: 32px;
      }
        
      #grading-tool-modal .control-button:hover,
      .grading-tool-fullscreen .control-button:hover {
          background: #f0f0f2;
          border-color: #d1d1d3;
      }
        
      #grading-tool-modal .control-button.active,
      .grading-tool-fullscreen .control-button.active {
          background: #007aff;
          color: white;
          border-color: #007aff;
      }
        
      #grading-tool-modal .control-button svg,
      .grading-tool-fullscreen .control-button svg {
          width: 16px;
          height: 16px;
      }
        
      /* General Instructions Modal */
      #grading-tool-modal .modal-backdrop,
      .grading-tool-fullscreen .modal-backdrop,
      #text-edit-backdrop {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
          z-index: 2000;
          display: none;
          align-items: center;
          justify-content: center;
          animation: fadeIn 0.2s ease;
      }
      
      body > #export-confirmation-modal {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
          z-index: 10000;
          display: none;
          align-items: center;
          justify-content: center;
          animation: fadeIn 0.2s ease;
      }
        
      #grading-tool-modal .modal-backdrop.show,
      .grading-tool-fullscreen .modal-backdrop.show,
      #text-edit-backdrop.show,
      body > #export-confirmation-modal.show {
          display: flex;
      }
        
      @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
      }
        
      #grading-tool-modal .modal,
      .grading-tool-fullscreen .modal,
      #text-edit-backdrop .modal,
      body > #export-confirmation-modal .modal {
          background: white;
          border-radius: 12px;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
          width: 90%;
          max-width: 600px;
          max-height: 80vh;
          overflow: hidden;
          animation: slideIn 0.3s ease;
      }
        
      @keyframes slideIn {
          from {
              opacity: 0;
              transform: translateY(-20px);
          }
          to {
              opacity: 1;
              transform: translateY(0);
          }
      }
        
      #grading-tool-modal .modal-header,
      .grading-tool-fullscreen .modal-header,
      #text-edit-backdrop .modal-header,
      body > #export-confirmation-modal .modal-header {
          padding: 1.5rem;
          border-bottom: 1px solid #e5e5e7;
          display: flex;
          justify-content: space-between;
          align-items: center;
      }
        
    
        
      #grading-tool-modal .modal-close,
      .grading-tool-fullscreen .modal-close,
      #text-edit-backdrop .modal-close,
      body > #export-confirmation-modal .modal-close {
          width: 32px;
          height: 32px;
          background: transparent;
          border: none;
          border-radius: 6px;
          color: #86868b;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.15s ease;
      }
        
      #grading-tool-modal .modal-close:hover,
      .grading-tool-fullscreen .modal-close:hover {
          background: #f0f0f2;
          color: #1d1d1f;
      }
        
      #grading-tool-modal .modal-close svg,
      .grading-tool-fullscreen .modal-close svg {
          width: 18px;
          height: 18px;
          stroke: currentColor;
          stroke-width: 2;
      }
        
      #grading-tool-modal .modal-body,
      .grading-tool-fullscreen .modal-body {
          padding: 1.5rem;
          overflow-y: auto;
          max-height: calc(80vh - 140px);
      }
        
      .modal-content {
          font-size: 0.875rem;
          line-height: 1.6;
          color: #495057;
          white-space: pre-wrap;
      }
        
      #grading-tool-modal .modal-footer,
      .grading-tool-fullscreen .modal-footer {
          padding: 1rem 1.5rem;
          border-top: 1px solid #e5e5e7;
          display: flex;
          justify-content: flex-end;
      }
      #grading-tool-modal .modal-btn,
      .grading-tool-fullscreen .modal-btn {
          padding: 0.5rem 1.25rem;
          border-radius: 6px;
          font-size: 0.875rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.15s ease;
          background: #007aff;
          color: white;
          border: none;
      }
      .modal-btn:hover {
          background: #0051d5;
      }
        
      /* Text Edit Modal overrides (white compact card, matching alignment panel feel) */
      #text-edit-backdrop .modal {
          background: #ffffff;
          border-radius: 10px;
          box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
          width: 90%;
          max-width: 420px;
      }
      #text-edit-backdrop .modal-header {
          background: #ffffff;
          color: #1d1d1f;
      }
    
      #text-edit-backdrop .modal-body {
          padding: 1rem 1.25rem;
      }
      #text-edit-backdrop .modal-footer {
          padding: 0.75rem 1.25rem;
          border-top: 1px solid #e5e5e7;
      }
      #text-edit-backdrop .modal-btn {
          background: #007aff;
      }
        
      /* Toolbar Right */
      #grading-tool-modal .toolbar-right,
      .grading-tool-fullscreen .toolbar-right {
          margin-left: auto;
          display: flex;
          align-items: center;
          gap: 0.5rem;
      }
        
      #grading-tool-modal .zoom-controls,
      .grading-tool-fullscreen .zoom-controls {
          display: flex;
          align-items: center;
          gap: 0.125rem;
          background: #f0f0f2;
          border-radius: 5px;
          padding: 0.125rem;
      }
        
      #grading-tool-modal .zoom-button,
      .grading-tool-fullscreen .zoom-button {
          width: 24px;
          height: 24px;
          background: transparent;
          border: none;
          border-radius: 3px;
          color: #1d1d1f;
          cursor: pointer;
          transition: all 0.15s ease;
          display: flex;
          align-items: center;
          justify-content: center;
      }
        
      #grading-tool-modal .zoom-button:hover,
      .grading-tool-fullscreen .zoom-button:hover {
          background: white;
      }
        
      #grading-tool-modal .zoom-label,
      .grading-tool-fullscreen .zoom-label {
          min-width: 42px;
          text-align: center;
          font-size: 0.75rem;
          font-weight: 500;
          color: #1d1d1f;
      }
        
      /* Main Container */
      #grading-tool-modal .main-container,
      .grading-tool-fullscreen .main-container {
          display: flex;
          flex: 1;
          position: relative;
          z-index: 1;
          overflow: hidden;
      }
        
      /* Left Panel - COMPACT */
      #grading-tool-modal .left-panel,
      .grading-tool-fullscreen .left-panel {
          flex: 1;
          background: #d1d1d3;
          overflow: auto;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding: 1.5rem;
          position: relative;
          height: 100%;
          flex-direction: column;
      }
        
      /* Right Panel - Marking Progress - COMPACT */
      #grading-tool-modal .right-panel,
      .grading-tool-fullscreen .right-panel {
          width: 625px;
          flex-shrink: 0;
          background: #f8f9fa;
          color: #212529;
          overflow-y: auto;
          overflow-x: hidden;
          position: relative;
          box-shadow: -8px 0 32px rgba(0,0,0,0.08);
      }

/* Draggable resizer between panels */
.panel-resizer {
	flex: 0 0 6px;
	cursor: col-resize;
	position: relative;
	z-index: 2;
}
.panel-resizer::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 2px;
	width: 2px;
	background: rgba(0,0,0,0.06);
	transition: background 0.15s ease;
}
.panel-resizer:hover::after {
	background: rgba(0,0,0,0.12);
}
body.cm-resizing,
body.cm-resizing * {
	cursor: col-resize !important;
	user-select: none !important;
}
        
      /* Right Panel Header - Progress - COMPACT */
      #grading-tool-modal .progress-header,
      .grading-tool-fullscreen .progress-header {
          position: sticky;
          top: 0;
          background: #f8f9fa;
          padding: 0.75rem 1rem 0.5rem;
          z-index: 10;
          border-bottom: 1px solid rgba(0,0,0,0.08);
      }
        
      #grading-tool-modal .progress-title,
      .grading-tool-fullscreen .progress-title {
          font-size: 0.5625rem;
          font-weight: 600;
          color: #6c757d;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          margin-bottom: 0.25rem;
      }
        
      #grading-tool-modal .assessment-name,
      .grading-tool-fullscreen .assessment-name {
          font-size: 0.9375rem;
          font-weight: 600;
          color: #212529;
          margin-bottom: 0.125rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }
        
      .student-name {
          font-size: 0.6875rem;
          color: #495057;
          margin-bottom: 0.375rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }
        
      /* Progress Bar - COMPACT */
      .progress-container {
          margin-bottom: 0.25rem;
      }
        
      .progress-bar {
          height: 4px;
          background: #e9ecef;
          border-radius: 2px;
          overflow: hidden;
          position: relative;
      }
        
      .progress-fill {
          height: 100%;
          background: linear-gradient(90deg, #007aff 0%, #0051d5 100%);
          border-radius: 2px;
          transition: width 0.3s ease;
          position: relative;
      }
        
      .progress-fill::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
          animation: shimmer 2s infinite;
      }
        
      @keyframes shimmer {
          0% { transform: translateX(-100%); }
          100% { transform: translateX(100%); }
      }
        
      .progress-text {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 0.125rem;
          font-size: 0.625rem;
          color: #6c757d;
      }
      .progress-percentage {
          font-weight: 600;
          color: #007aff;
      }
        
      /* Correct Summary - NEW */
      .correct-summary {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 0.375rem;
          padding-top: 0.375rem;
          border-top: 1px solid #e9ecef;
      }
        
      .correct-label {
          font-size: 0.6875rem;
          font-weight: 600;
          color: #495057;
      }
        
      .correct-count {
          font-size: 0.875rem;
          font-weight: 700;
          color: #22c55e;
          background: rgba(34, 197, 94, 0.1);
          padding: 0.125rem 0.5rem;
          border-radius: 12px;
      }
      
      /* Progress Stats - NEW */
      .progress-stats {
          margin-top: 0.375rem;
          padding-top: 0.375rem;
          border-top: 1px solid #e9ecef;
          font-size: 0.625rem;
          color: #6c757d;
      }
        
      /* Panel Content - COMPACT */
      #grading-tool-modal .panel-content,
      .grading-tool-fullscreen .panel-content {
          padding: 0.5rem 1rem 1rem;
      }
        
      /* Question Cards - COMPACT */
      .question-card {
          background: white;
          border: 1px solid #e5e5e7;
          border-radius: 6px;
          padding: 0.75rem;
          margin-bottom: 0.625rem;
          cursor: pointer;
          transition: all 0.2s ease;
          position: relative;
      }
        
      .question-card:hover {
          box-shadow: 0 4px 12px rgba(0,0,0,0.08);
          transform: translateY(-1px);
      }
        
      .question-card.active {
          border-color: #007aff;
          border-width: 2px;
          box-shadow: 0 6px 20px rgba(0,122,255,0.15);
          padding: calc(0.75rem - 1px);
      }
        
      .question-card.fully-marked {
          background: #f0fdf4;
          border-color: #22c55e;
      }
        
      .question-card.partially-marked {
          background: #fef3c7;
          border-color: #f59e0b;
      }
        
      .question-card.no-marks {
          background: #fef2f2;
          border-color: #ef4444;
      }
        
      /* Question Header with Status - COMPACT */
      .question-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 0.5rem;
          gap: 0.375rem;
      }
        
      .question-left {
          display: flex;
          align-items: center;
          gap: 0.375rem;
          flex: 1;
      }
        
      /* Overall Question Status - COMPACT */
      .question-status {
          width: 26px;
          height: 26px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          transition: all 0.2s ease;
          position: relative;
          border: 2px solid rgba(0,0,0,0.1);
      }
        
      .question-status.unmarked {
          background: #e5e7eb;
          border-color: #9ca3af;
      }
        
      .question-status.correct {
          background: #22c55e;
          border-color: #16a34a;
          box-shadow: 0 2px 8px rgba(34,197,94,0.3);
      }
        
      .question-status.incorrect {
          background: #ef4444;
          border-color: #dc2626;
          box-shadow: 0 2px 8px rgba(239,68,68,0.3);
      }
        
      .question-status.partial {
          background: #f59e0b;
          border-color: #d97706;
          box-shadow: 0 2px 8px rgba(245,158,11,0.3);
      }
        
      .question-status svg {
          width: 14px;
          height: 14px;
          stroke: white;
          stroke-width: 3;
          fill: none;
      }
        
      .question-info {
          display: flex;
          flex-direction: column;
          gap: 0.125rem;
      }
        
      .question-number {
          font-size: 0.8125rem;
          font-weight: 600;
          color: #212529;
      }
        
      .page-indicator {
          font-size: 0.625rem;
          font-weight: 500;
          color: #6c757d;
          background: #f0f0f2;
          padding: 0 0.375rem;
          border-radius: 3px;
          display: inline-block;
          width: fit-content;
      }
        
      .question-score {
          font-size: 0.8125rem;
          font-weight: 600;
          white-space: nowrap;
      }
        
      .question-score .awarded {
          color: #16a34a;
      }
        
      .question-score .total {
          color: #6c757d;
      }
        
      /* Rubric Items Display - COMPACT */
      .rubric-section {
          margin-top: 0.5rem;
          border-top: 1px solid #e5e7eb;
          padding-top: 0.5rem;
      }
        
      #grading-tool-modal .rubric-header,
      .grading-tool-fullscreen .rubric-header {
          font-size: 0.625rem;
          font-weight: 600;
          color: #6c757d;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          margin-bottom: 0.375rem;
      }
        
      #grading-tool-modal .rubric-items,
      .grading-tool-fullscreen .rubric-items {
          display: flex;
          flex-direction: column;
          gap: 0.375rem;
      }
        
      #grading-tool-modal .rubric-item,
      .grading-tool-fullscreen .rubric-item {
          display: flex;
          align-items: flex-start;
          gap: 0.5rem;
          padding: 0.375rem 0.5rem;
          background: #f8f9fa;
          border-radius: 4px;
          transition: all 0.15s ease;
          position: relative;
          border: 1px solid transparent;
      }
        
      #grading-tool-modal .rubric-item:hover,
      .grading-tool-fullscreen .rubric-item:hover {
          background: #e9ecef;
          border-color: #dee2e6;
      }
        
      #grading-tool-modal .rubric-item.marked-correct,
      .grading-tool-fullscreen .rubric-item.marked-correct {
          background: #d1f4dd;
          border-color: #a3e4bd;
      }
        
      #grading-tool-modal .rubric-item.marked-incorrect,
      .grading-tool-fullscreen .rubric-item.marked-incorrect {
          background: #fee4e2;
          border-color: #fca5a5;
      }
        
      /* Mark Controls - COMPACT */
      .mark-controls {
          display: flex;
          gap: 0.25rem;
          flex-shrink: 0;
      }
        
      .mark-button {
          width: 22px;
          height: 22px;
          border-radius: 50%;
          border: 1.5px solid #ced4da;
          background: white;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.15s ease;
      }
        
      .mark-button.tick {
          border-color: #22c55e;
      }
        
      .mark-button.tick:hover {
          background: #22c55e;
          border-color: #16a34a;
      }
        
      .mark-button.tick.active {
          background: #22c55e;
          border-color: #16a34a;
          box-shadow: 0 2px 6px rgba(34,197,94,0.3);
      }
        
      .mark-button.cross {
          border-color: #ef4444;
      }
        
      .mark-button.cross:hover {
          background: #ef4444;
          border-color: #dc2626;
      }
        
      .mark-button.cross.active {
          background: #ef4444;
          border-color: #dc2626;
          box-shadow: 0 2px 6px rgba(239,68,68,0.3);
      }
        
      .mark-button svg {
          width: 12px;
          height: 12px;
          stroke: #6c757d;
          stroke-width: 3;
          fill: none;
          opacity: 0.6;
          transition: all 0.15s ease;
      }
        
      .mark-button:hover svg,
      .mark-button.active svg {
          stroke: white;
          opacity: 1;
      }
        
      #grading-tool-modal .rubric-content,
      .grading-tool-fullscreen .rubric-content {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 0.125rem;
      }
        
      #grading-tool-modal .rubric-text,
      .grading-tool-fullscreen .rubric-text {
          font-size: 0.6875rem;
          color: #212529;
          line-height: 1.4;
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          gap: 0.5rem;
      }
        
      #grading-tool-modal .rubric-description,
      .grading-tool-fullscreen .rubric-description {
          flex: 1;
      }
        
      #grading-tool-modal .rubric-points,
      .grading-tool-fullscreen .rubric-points {
          font-size: 0.6875rem;
          font-weight: 600;
          color: #007aff;
          background: rgba(0,122,255,0.1);
          padding: 0.125rem 0.375rem;
          border-radius: 3px;
          white-space: nowrap;
      }
        
      #grading-tool-modal .rubric-item.marked-correct .rubric-points,
      .grading-tool-fullscreen .rubric-item.marked-correct .rubric-points {
          color: #16a34a;
          background: rgba(34,197,94,0.1);
      }
        
      #grading-tool-modal .rubric-item.marked-incorrect .rubric-points,
      .grading-tool-fullscreen .rubric-item.marked-incorrect .rubric-points {
          color: #dc2626;
          background: rgba(239,68,68,0.1);
      }
        
      /* Question-level Comment Section - COMPACT - CHANGED TO GREEN */
      .question-comment-section {
          margin-top: 0.5rem;
          padding: 0.5rem;
          background: #e8f5e9;
          border-radius: 4px;
          border: 1px solid #4caf50;
      }
        
      .question-comment {
          font-size: 0.625rem;
          color: #495057;
          font-style: italic;
          line-height: 1.3;
          margin-bottom: 0.25rem;
      }
        
      .comment-with-toggle {
          margin-bottom: 0.5rem;
          padding-bottom: 0.5rem;
          border-bottom: 1px solid rgba(0,0,0,0.05);
      }
        
      .comment-with-toggle:last-child {
          border-bottom: none;
          margin-bottom: 0;
          padding-bottom: 0;
      }
        
      /* Include Comment Toggle - COMPACT */
      .include-comment-toggle {
          display: flex;
          align-items: center;
          gap: 0.375rem;
      }
        
      .include-comment-toggle input[type="checkbox"] {
          width: 14px;
          height: 14px;
          cursor: pointer;
          margin: 0;
      }
        
      .include-comment-toggle label {
          font-size: 0.625rem;
          color: #495057;
          cursor: pointer;
          user-select: none;
          font-weight: 500;
      }
        
      /* Area Instructions - Special Instructions Display */
      #grading-tool-modal .area-instructions,
      .grading-tool-fullscreen .area-instructions {
          font-size: 0.6875rem;
          color: #495057;
          margin-top: 0.5rem;
          margin-bottom: 0.5rem;
          padding: 0.375rem 0.5rem;
          background: #f0f5ff;
          border-radius: 4px;
          line-height: 1.4;
      }
        
      #grading-tool-modal .area-instructions strong,
      .grading-tool-fullscreen .area-instructions strong {
          font-weight: 600;
          color: #212529;
      }
        
      /* Student Advice Section - NEW */
      .student-advice-section {
          margin-top: 0.5rem;
          padding: 0.5rem;
          background: #e8f5e9;
          border-radius: 4px;
          border: 1px solid #4caf50;
      }
        
      .advice-header {
          font-size: 0.625rem;
          font-weight: 600;
          color: #2e7d32;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          margin-bottom: 0.375rem;
          display: flex;
          align-items: center;
          gap: 0.25rem;
      }
        
      .advice-header svg {
          width: 12px;
          height: 12px;
          stroke: currentColor;
          stroke-width: 2;
          fill: none;
      }
        
      .advice-textarea {
          width: 100%;
          min-height: 50px;
          font-size: 0.625rem;
          font-family: inherit;
          padding: 0.375rem;
          border: 1px solid #81c784;
          border-radius: 3px;
          resize: vertical;
          line-height: 1.4;
          color: #1b5e20;
          background: white;
          transition: all 0.2s ease;
      }
        
      .advice-textarea:focus {
          outline: none;
          border-color: #4caf50;
          box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
      }
        
      .advice-textarea::placeholder {
          color: #81c784;
          font-style: italic;
      }
        
      /* Navigation Hint - COMPACT */
      .nav-hint {
          position: absolute;
          top: 0.375rem;
          right: 0.375rem;
          font-size: 0.5rem;
          font-weight: 600;
          color: #6c757d;
          background: rgba(108,117,125,0.1);
          padding: 0 0.25rem;
          border-radius: 2px;
          opacity: 0;
          transition: opacity 0.2s ease;
      }
        
      .question-card:hover .nav-hint {
          opacity: 1;
      }
        
      /* Upload Container - COMPACT */
      #grading-tool-modal .upload-container,
      .grading-tool-fullscreen .upload-container {
          text-align: center;
          padding: 1.5rem 1.25rem;
          background: #ffffff;
          border-radius: 10px;
          box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
          width: 480px;
          max-width: 90vw;
          transition: all 0.3s ease;
          margin: 0 auto;
      }
        
      .upload-container.minimized {
          padding: 1.5rem 1rem;
          max-width: 350px;
          position: fixed;
          top: 100px;
          left: 20px;
          z-index: 100;
          box-shadow: 0 8px 32px rgba(0,0,0,0.15);
      }
        
      .upload-container.minimized .upload-title {
          font-size: 1rem;
          margin-bottom: 0.375rem;
      }
        
      .upload-container.minimized .upload-step {
          padding: 0.75rem;
          margin: 0.5rem 0;
      }
        
      .upload-close-btn {
          position: absolute;
          top: 10px;
          right: 10px;
          background: rgba(0,0,0,0.1);
          border: none;
          width: 24px;
          height: 24px;
          border-radius: 50%;
          cursor: pointer;
          display: none;
          align-items: center;
          justify-content: center;
          transition: all 0.2s ease;
      }
      .upload-close-btn:hover {
          background: rgba(0,0,0,0.2);
          transform: rotate(90deg);
      }
        
      .upload-close-btn svg {
          width: 14px;
          height: 14px;
          stroke: #495057;
          stroke-width: 2;
      }
        
      .upload-container.minimized .upload-close-btn {
          display: flex;
      }
        
      .upload-title {
          font-size: 1.1rem;
          font-weight: 600;
          color: #1d1d1f;
          margin-bottom: 0.25rem;
      }
        
      .upload-step {
          padding: 0.875rem;
          margin: 0.5rem 0;
          background: #f8f9fa;
          border-radius: 8px;
          text-align: left;
      }
        
      .step-header {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          margin-bottom: 0.75rem;
      }
        
      .step-number {
          width: 28px;
          height: 28px;
          background: #007aff;
          color: #ffffff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 600;
          font-size: 0.875rem;
          flex-shrink: 0;
          box-shadow: 0 1px 2px rgba(0,0,0,0.08);
      }
        
      .step-number.complete {
          background: #28a745;
      }
        
      .step-content {
          flex: 1;
      }
        
      .step-title {
          font-size: 0.8125rem;
          font-weight: 600;
          color: #212529;
          margin-bottom: 0.125rem;
      }
        
      .step-description {
          font-size: 0.6875rem;
          color: #6c757d;
      }
        
      .file-buttons {
          display: flex;
          gap: 0.5rem;
          margin-left: 40px;
      }
        
      /* Removed dropzone styling per redesign - keeping section clean */
        
      .upload-button {
          padding: 0.5rem 1rem;
          background: #007aff;
          color: #ffffff;
          border: none;
          border-radius: 8px;
          font-size: 0.85rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.15s ease;
          white-space: nowrap;
          box-shadow: 0 1px 2px rgba(0,0,0,0.08);
      }
      .upload-button:hover {
          background: #0051d5;
      }
        
      .upload-button:disabled {
          background: #6c757d;
          cursor: not-allowed;
      }
        
      .upload-button.json {
          background: #20c997;
      }
        
      .upload-button.json:hover {
          background: #1ba47e;
      }
        
      .file-status {
          display: flex;
          flex-direction: column;
          gap: 0.25rem;
          margin-top: 0.5rem;
          margin-left: 48px;
          font-size: 0.625rem;
      }
      .file-info {
          display: flex;
          align-items: center;
          gap: 0.25rem;
          color: #6c757d;
      }
        
      .file-info.loaded {
          color: #28a745;
      }
        
      .file-info svg {
          width: 12px;
          height: 12px;
      }
        
      /* PDF Container */
      #grading-tool-modal .pdf-container,
      .grading-tool-fullscreen .pdf-container {
          position: relative;
          background: #d1d1d3;
          display: none;
          overflow: visible;
          height: auto;
          padding: 20px 0;
      }
        
      #grading-tool-modal .pdf-container.active,
      .grading-tool-fullscreen .pdf-container.active {
          display: block;
      }
        
      /* Pages Container */
      .pages-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 20px;
      }
        
      /* Individual Page Container */
      .page-wrapper {
          position: relative;
          background: white;
          box-shadow: 0 8px 32px rgba(0,0,0,0.15);
          border: 1px solid #e5e5e7;
          display: inline-block;
      }
      /* Highlight active page when alignment panel is open */
      .page-wrapper.aligning {
          border-color: #17a2b8;
          box-shadow: 0 0 0 2px rgba(23,162,184,0.35), 0 8px 32px rgba(0,0,0,0.15);
      }
        
      .pdf-canvas {
          display: block;
          position: relative;
      }
        
      /* Answer Areas Overlay */
      #grading-tool-modal .answer-areas-overlay,
      .grading-tool-fullscreen .answer-areas-overlay {
          position: absolute;
          top: 0;
          left: 0;
          pointer-events: none;
          z-index: 10;
          transition: opacity 0.2s ease;
      }
        
      #grading-tool-modal .answer-areas-overlay.hidden,
      .grading-tool-fullscreen .answer-areas-overlay.hidden {
          opacity: 0;
      }
        
      /* Answer Area - Marking Mode with Overlay - COMPACT */
      #grading-tool-modal .answer-area,
      .grading-tool-fullscreen .answer-area {
          position: absolute;
          border: 2px dashed #007aff;
          background: rgba(0, 122, 255, 0.08);
          cursor: pointer;
          pointer-events: all;
          z-index: 11;
          transition: all 0.2s ease;
          opacity: 0.8;
      }

      /* Bottom-left area tools (move/resize) */
      .area-tools {
          position: absolute;
          left: 2px;
          bottom: 2px;
          display: flex;
          gap: 4px;
          pointer-events: all;
          z-index: 13;
      }
      .area-handle {
          width: 14px;
          height: 14px;
          border-radius: 3px;
          background: #6b7280; /* gray for move */
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 10px;
          line-height: 1;
          cursor: pointer;
          box-shadow: 0 1px 2px rgba(0,0,0,0.25);
          user-select: none;
      }
      .area-handle.resize {
          background: #007aff; /* blue for resize */
          cursor: nwse-resize; /* closest to bottom-left to top-right drag */
      }
      .answer-area.active .area-handle {
          transform: scale(1.05);
      }
        
      #grading-tool-modal .answer-area:hover,
      .grading-tool-fullscreen .answer-area:hover {
          background: rgba(0, 122, 255, 0.12);
          border-color: #0051d5;
          opacity: 1;
      }
        
      #grading-tool-modal .answer-area.active,
      .grading-tool-fullscreen .answer-area.active {
          border-width: 2px;
          border-style: solid;
          border-color: #0051d5;
          background: rgba(0, 122, 255, 0.15);
          box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
          opacity: 1;
      }
        
      #grading-tool-modal .answer-area.marked,
      .grading-tool-fullscreen .answer-area.marked {
          background: rgba(40, 167, 69, 0.08);
          border-color: #28a745;
      }
        
      #grading-tool-modal .answer-area.fully-marked,
      .grading-tool-fullscreen .answer-area.fully-marked {
          background: rgba(40, 167, 69, 0.15);
          border-color: #28a745;
          border-style: solid;
      }
        
      #grading-tool-modal .answer-area-label,
      .grading-tool-fullscreen .answer-area-label {
          position: absolute;
          top: -20px;
          left: 0;
          background: #007aff;
          color: white;
          padding: 0 0.25rem;
          border-radius: 3px;
          font-size: 0.625rem;
          font-weight: 600;
          z-index: 12;
          transition: all 0.2s ease;
      }
        
      .answer-area.marked .answer-area-label {
          background: #28a745;
      }
        
      .answer-area.fully-marked .answer-area-label {
          background: #28a745;
      }
        
      .answer-area.active .answer-area-label {
          transform: scale(1.1);
      }
        
      /* Marking Groups Container */
      .marking-groups-container {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: 20;
      }
        
      /* Marking Group - Vertical Stack - COMPACT */
      .marking-group {
          position: absolute;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 6px;
          pointer-events: all;
      }
        
      /* PDF Marks - Ticks and Crosses IN RED */
      .pdf-mark {
          position: absolute;
          pointer-events: all;
          cursor: move;
          z-index: 25;
          transition: transform 0.1s ease;
      }
        
      .pdf-mark.tick svg,
      .pdf-mark.cross svg {
          width: 18px;
          height: 18px;
          stroke-width: 3;
          fill: none;
          stroke: #dc3545; /* RED for all marks */
      }
        
      .pdf-mark.selected {
          outline: 2px solid #007aff;
          outline-offset: 2px;
      }
        
      /* Comment Circle Icon - COMPACT - CHANGED TO GREEN */
      .pdf-comment-icon {
          position: absolute;
          width: 14px;
          height: 14px;
          background: #d4edda;
          border: 1px solid #28a745;
          border-radius: 50%;
          box-shadow: 0 2px 8px rgba(0,0,0,0.2);
          cursor: pointer;
          pointer-events: all;
          z-index: 25;
          display: flex;
          align-items: center;
          justify-content: center;
      }
        
      .pdf-comment-icon:hover {
          transform: scale(1.2);
          box-shadow: 0 3px 12px rgba(0,0,0,0.3);
      }
        
      .pdf-comment-icon.selected {
          outline: 2px solid #007aff;
          outline-offset: 2px;
      }
        
      /* Comment Popup - COMPACT - CHANGED TO GREEN */
      .comment-popup {
          position: absolute;
          background: #d4edda;
          border: 2px solid #28a745;
          border-radius: 4px;
          padding: 8px;
          max-width: 180px;
          box-shadow: 0 4px 16px rgba(0,0,0,0.3);
          z-index: 1000;
          font-size: 11px;
          color: #212529;
          line-height: 1.3;
          display: none;
      }
        
      .comment-popup.show {
          display: block;
      }
        
      .comment-popup::before {
          content: '';
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 10px 10px 0 10px;
          border-color: #28a745 transparent transparent transparent;
      }
        
      /* Sticker Container */
      .sticker-container {
          position: fixed;
          background: white;
          border-radius: 12px;
          box-shadow: 0 8px 32px rgba(0,0,0,0.2);
          padding: 16px;
          z-index: 2000;
          width: 420px;
          max-width: calc(100vw - 40px);
          max-height: 70vh;
          overflow: auto;
          display: none;
          flex-direction: column;
          top: 100px;
          left: 50%;
          transform: translateX(-50%);
      }
        
      .sticker-container.show {
          display: flex;
      }
        
      .sticker-header {
          font-size: 16px;
          font-weight: 600;
          color: #1d1d1f;
          margin-bottom: 12px;
          text-align: center;
      }
        
      .sticker-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
          gap: 12px;
          align-items: center;
          justify-items: center;
      }
        
      .sticker-item {
          width: 72px;
          height: 72px;
          border: 2px solid #e5e5e7;
          border-radius: 8px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s ease;
          background: white;
      }
        
      .sticker-item:hover {
          transform: scale(1.1);
          border-color: #007aff;
          box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      }
        
      .sticker-item svg,
      .sticker-item img {
          max-width: 56px;
          max-height: 56px;
          width: 100%;
          height: auto;
          object-fit: contain;
          overflow: visible;
      }
        
      /* PDF Sticker - positioned on the document */
      .pdf-sticker {
          position: absolute;
          pointer-events: all;
          cursor: move;
          z-index: 25;
      }
        
      .pdf-sticker svg {
          overflow: visible;
      }
        
      .pdf-sticker.selected {
          outline: 2px solid #007aff;
          outline-offset: 2px;
      }
        
      /* PDF Image - positioned on the document */
      .pdf-image {
          position: absolute;
          pointer-events: all;
          cursor: move;
          z-index: 25;
      }
        
      .pdf-image img {
          pointer-events: none;
          user-select: none;
      }
        
      .pdf-image.selected {
          outline: 2px solid #007aff;
          outline-offset: 2px;
      }
        
      /* Sticker/Image resize handles */
      .sticker-handle {
          position: absolute;
          width: 8px;
          height: 8px;
          background: #007aff;
          border: 1px solid white;
          border-radius: 50%;
          cursor: pointer;
          display: none;
          z-index: 30;
          pointer-events: all;
      }
        
      .pdf-sticker.selected .sticker-handle,
      .pdf-image.selected .sticker-handle {
          display: block;
      }
        
      .sticker-handle.nw { top: -4px; left: -4px; cursor: nw-resize; }
      .sticker-handle.ne { top: -4px; right: -4px; cursor: ne-resize; }
      .sticker-handle.sw { bottom: -4px; left: -4px; cursor: sw-resize; }
      .sticker-handle.se { bottom: -4px; right: -4px; cursor: se-resize; }
        
      /* Advice Circle Icon - COMPACT - YELLOW */
      .pdf-advice-icon {
          position: absolute;
          width: 14px;
          height: 14px;
          background: #fff3cd;
          border: 1px solid #ffc107;
          border-radius: 50%;
          box-shadow: 0 2px 8px rgba(0,0,0,0.2);
          cursor: pointer;
          pointer-events: all;
          z-index: 25;
          display: flex;
          align-items: center;
          justify-content: center;
      }
        
      .pdf-advice-icon:hover {
          transform: scale(1.2);
          box-shadow: 0 3px 12px rgba(0,0,0,0.3);
      }
        
      .pdf-advice-icon.selected {
          outline: 2px solid #007aff;
          outline-offset: 2px;
      }
        
      /* Advice Popup - COMPACT - YELLOW */
      .advice-popup {
          position: absolute;
          background: #fff3cd;
          border: 2px solid #ffc107;
          border-radius: 4px;
          padding: 8px;
          max-width: 180px;
          box-shadow: 0 4px 16px rgba(0,0,0,0.3);
          z-index: 1000;
          font-size: 11px;
          color: #212529;
          line-height: 1.3;
          display: none;
      }
        
      .advice-popup.show {
          display: block;
      }
        
      .advice-popup::before {
          content: '';
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 10px 10px 0 10px;
          border-color: #ffc107 transparent transparent transparent;
      }
        
      /* Total Score Display - RED and only number - COMPACT */
      .total-score {
          position: absolute;
          color: #dc3545;
          font-size: 12px;
          font-weight: 700;
          pointer-events: all;
          cursor: move;
          user-select: none;
          z-index: 25;
      }
        
      .total-score.selected {
          outline: 2px solid #007aff;
          outline-offset: 2px;
      }
        
      /* Free-form text overlays */
      .pdf-text {
          position: absolute;
          color: #dc3545;
          font-size: 14px;
          font-weight: 600;
          pointer-events: all;
          cursor: move;
          user-select: none;
          z-index: 25;
          font-family: 'Open Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
          background: transparent;
      }

      .pdf-score {
          position: absolute;
          color: #dc3545;
          font-size: 14px;
          font-weight: 600;
          pointer-events: all;
          cursor: move;
          user-select: none;
          z-index: 25;
          font-family: 'Open Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
          background: transparent;
      }

      .pdf-score.selected {
          outline: 2px solid #007aff;
          outline-offset: 2px;
      }

      .pdf-advice {
          position: absolute;
          color: #dc3545;
          font-size: 14px;
          font-weight: 600;
          pointer-events: all;
          cursor: move;
          user-select: none;
          z-index: 25;
          font-family: 'Open Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
          background: transparent;
      }

      .pdf-advice.selected {
          outline: 2px solid #007aff;
          outline-offset: 2px;
      }

      /* Context menu for editing text marks */
      .text-context-menu {
          position: fixed;
          background: #ffffff;
          border: 1px solid #e5e5e7;
          border-radius: 6px;
          box-shadow: 0 8px 24px rgba(0,0,0,0.15);
          padding: 8px;
          z-index: 10000;
          display: none;
          min-width: 220px;
      }
      .text-context-menu.show { display: block; }
      .text-context-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; }
      .text-context-menu label { font-size: 12px; color: #495057; }
      .text-context-menu select, .text-context-menu input[type="number"], .text-context-menu input[type="color"] {
          font-size: 12px; padding: 4px 6px; border: 1px solid #ced4da; border-radius: 4px; width: 120px;
      }
      .text-context-footer {
          margin-top: 8px;
          padding-top: 8px;
          border-top: 1px solid #e5e5e7;
          display: flex;
          justify-content: flex-end;
      }
      .text-context-apply-btn {
          padding: 6px 16px;
          background: #007aff;
          color: white;
          border: none;
          border-radius: 6px;
          font-size: 12px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.15s ease;
      }
      .text-context-apply-btn:hover {
          background: #0051d5;
          transform: translateY(-1px);
          box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
      }
      .text-context-apply-btn:active {
          transform: translateY(0);
      }
        
      /* PDF Shapes - Lines, Circles, Rectangles */
      .pdf-shape {
          position: absolute;
          pointer-events: all;
          cursor: move;
          z-index: 25;
      }
        
      .pdf-shape svg {
          display: block;
          width: 100%;
          height: 100%;
          overflow: visible;
      }
        
      .pdf-shape.selected {
          outline: 2px solid #007aff;
          outline-offset: 2px;
      }
      /* Shape resize handles */
      .shape-handle {
          position: absolute;
          width: 8px;
          height: 8px;
          background: #007aff;
          border: 1px solid white;
          border-radius: 50%;
          cursor: pointer;
          display: none;
          z-index: 30;
      }
        
      .pdf-shape.selected .shape-handle,
      .pdf-image.selected .shape-handle {
          display: block;
      }
        
      .shape-handle.nw { top: -4px; left: -4px; cursor: nw-resize; }
      .shape-handle.ne { top: -4px; right: -4px; cursor: ne-resize; }
      .shape-handle.sw { bottom: -4px; left: -4px; cursor: sw-resize; }
      .shape-handle.se { bottom: -4px; right: -4px; cursor: se-resize; }
      .shape-handle.start,
      .shape-handle.end { 
          position: absolute !important;
          cursor: move;
      }
        
      /* Drawing overlay for shape creation */
      .drawing-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 30;
          cursor: crosshair;
          display: none;
          pointer-events: all;
      }
        
      .drawing-overlay.active {
          display: block;
      }
        
      .temp-shape {
          position: absolute;
          pointer-events: none;
          z-index: 31;
      }
      .temp-shape,
      .temp-shape line,
      .temp-shape polyline,
      .temp-shape rect,
      .temp-shape circle {
          stroke: #dc3545;
          stroke-width: 2;
          fill: none;
          stroke-dasharray: 5,5;
      }
      #grading-tool-modal .save-button-container,
      .grading-tool-fullscreen .save-button-container {
          position: fixed;
          bottom: 28px;
          right: 645px;
          z-index: 100;
      }
        
      #grading-tool-modal .save-button,
      .grading-tool-fullscreen .save-button {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          background: linear-gradient(135deg, #007aff 0%, #0051d5 100%);
          border: none;
          color: white;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 16px rgba(0,122,255,0.3), 0 8px 32px rgba(0,122,255,0.15);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          position: relative;
          overflow: hidden;
      }
        
      #grading-tool-modal .save-button:hover,
      .grading-tool-fullscreen .save-button:hover {
          transform: translateY(-3px);
          box-shadow: 0 6px 20px rgba(0,122,255,0.4), 0 12px 40px rgba(0,122,255,0.2);
      }
        
      #grading-tool-modal .save-button:active,
      .grading-tool-fullscreen .save-button:active {
          transform: translateY(-1px);
      }
        
      #grading-tool-modal .save-button.saving,
      .grading-tool-fullscreen .save-button.saving {
          pointer-events: none;
          background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
      }
        
      #grading-tool-modal .save-button svg,
      .grading-tool-fullscreen .save-button svg {
          width: 20px;
          height: 20px;
          stroke: currentColor;
          stroke-width: 2;
          fill: none;
      }
        
      #grading-tool-modal .save-button.saving svg,
      .grading-tool-fullscreen .save-button.saving svg {
          animation: spin 1s linear infinite;
      }
        
      @keyframes spin {
          100% { transform: rotate(360deg); }
      }
        
      .save-indicator {
          position: absolute;
          top: -6px;
          right: -6px;
          width: 14px;
          height: 14px;
          background: #28a745;
          border-radius: 50%;
          border: 2px solid white;
          opacity: 0;
          transform: scale(0);
          transition: all 0.3s ease;
      }
        
      .save-indicator.show {
          opacity: 1;
          transform: scale(1);
      }
        
      /* Status Bar - COMPACT */
      #grading-tool-modal .status-bar,
      .grading-tool-fullscreen .status-bar {
          background: #f5f5f7;
          border-top: 1px solid #e5e5e7;
          padding: 0.25rem 1rem;
          display: flex;
          justify-content: space-between;
          font-size: 0.6875rem;
          color: #86868b;
          flex-shrink: 0;
          position: relative;
          z-index: 1000;
      }
        
      #grading-tool-modal .status-item,
      .grading-tool-fullscreen .status-item {
          display: flex;
          align-items: center;
          gap: 0.5rem;
      }
        
      /* Scrollbar - COMPACT */
      .right-panel::-webkit-scrollbar {
          width: 6px;
      }
        
      .right-panel::-webkit-scrollbar-track {
          background: transparent;
      }
        
      .right-panel::-webkit-scrollbar-thumb {
          background: rgba(0,0,0,0.15);
          border-radius: 10px;
      }
        
      .right-panel::-webkit-scrollbar-thumb:hover {
          background: rgba(0,0,0,0.2);
      }
        
      /* Intelligent Assistance Button Hover Effect */
      #intelligent-assistance-btn:hover {
          background: #00ff00 !important;
          transform: translateY(-1px);
          box-shadow: 0 2px 8px rgba(50, 205, 50, 0.4);
      }
        
      /* Intelligent Assistance Modal */
      .ia-modal-overlay {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.7);
          z-index: 3000;
          display: none;
          align-items: center;
          justify-content: center;
          animation: fadeIn 0.3s ease;
      }
        
      .ia-modal-overlay.show {
          display: flex;
      }
        
      .ia-modal {
          background: white;
          border-radius: 20px;
          padding: 40px;
          width: 400px;
          min-height: 300px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
          position: relative;
          overflow: hidden;
      }
        
      /* Futuristic Progress Animation */
      .ia-progress-container {
          position: relative;
          width: 150px;
          height: 150px;
          margin-bottom: 30px;
      }
        
      .ia-progress-ring {
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          border: 3px solid rgba(50, 205, 50, 0.1);
      }
        
      .ia-progress-ring.active {
          border: 3px solid transparent;
          border-top: 3px solid limegreen;
          animation: rotate 1.5s linear infinite;
      }
        
      .ia-progress-ring.active:nth-child(2) {
          width: 120px;
          height: 120px;
          top: 15px;
          left: 15px;
          animation-duration: 2s;
          animation-direction: reverse;
      }
        
      .ia-progress-ring.active:nth-child(3) {
          width: 90px;
          height: 90px;
          top: 30px;
          left: 30px;
          animation-duration: 2.5s;
      }
        
      .ia-progress-center {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 60px;
          height: 60px;
          background: linear-gradient(135deg, limegreen, #00ff00);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 0 20px rgba(50, 205, 50, 0.5);
          animation: pulse 2s ease-in-out infinite;
      }
      .ia-progress-center svg {
          width: 30px;
          height: 30px;
          stroke: white;
          stroke-width: 3;
          fill: none;
      }
        
      @keyframes rotate {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }
        
      @keyframes pulse {
          0%, 100% { transform: translate(-50%, -50%) scale(1); }
          50% { transform: translate(-50%, -50%) scale(1.1); }
      }
      .ia-status-text {
          font-size: 16px;
          color: #333;
          text-align: center;
          margin-bottom: 10px;
          font-weight: 500;
      }
        
      .ia-status-detail {
          font-size: 13px;
          color: #666;
          text-align: center;
      }
        
      /* API Key Modal */
      .ia-apikey-modal {
          background: white;
          border-radius: 20px;
          padding: 30px;
          width: 450px;
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
          display: none;
      }
        
      .ia-apikey-modal.show {
          display: block;
      }
        
      .ia-apikey-header {
          font-size: 20px;
          font-weight: 600;
          margin-bottom: 20px;
          color: #333;
          text-align: center;
      }
        
      .ia-apikey-description {
          font-size: 14px;
          color: #666;
          margin-bottom: 20px;
          line-height: 1.5;
          text-align: center;
      }
        
      .ia-apikey-input-group {
          margin-bottom: 20px;
      }
        
      .ia-apikey-input {
          width: 100%;
          padding: 12px 16px;
          border: 2px solid #e0e0e0;
          border-radius: 8px;
          font-size: 14px;
          transition: border-color 0.3s ease;
      }
        
      .ia-apikey-input:focus {
          outline: none;
          border-color: limegreen;
      }
        
      .ia-apikey-buttons {
          display: flex;
          gap: 10px;
      }
        
      .ia-apikey-btn {
          flex: 1;
          padding: 12px 20px;
          border: none;
          border-radius: 8px;
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s ease;
      }
        
      .ia-apikey-btn.primary {
          background: limegreen;
          color: white;
      }
        
      .ia-apikey-btn.primary:hover {
          background: #00ff00;
          transform: translateY(-1px);
          box-shadow: 0 2px 8px rgba(50, 205, 50, 0.4);
      }
        
      .ia-apikey-btn.secondary {
          background: #f0f0f0;
          color: #333;
      }
        
      .ia-apikey-btn.secondary:hover {
          background: #e0e0e0;
      }
        
      /* Responsive adjustments */
      @media (max-width: 1200px) {
          .right-panel {
              width: 548px;
              flex-shrink: 0;
          }
            
          .save-button-container {
              right: 573px;
              bottom: 28px;
          }
            
          .upload-container.minimized {
              left: 20px;
          }
      }
        
      @media (max-width: 768px) {
          .editor-header {
              padding: 0.375rem 1rem;
          }
            
          .editor-toolbar {
              padding: 0 0.5rem;
              gap: 0.25rem;
              height: 44px;
          }
            
          .menu-trigger {
              padding: 0.375rem 0.625rem;
              font-size: 0.75rem;
          }
            
          .left-panel {
              flex: 0 0 100%;
          }
            
          .right-panel {
              display: none;
          }
            
          .save-button-container {
              right: 20px;
              bottom: 60px;
          }
            
          .upload-container.minimized {
              left: 20px;
              max-width: 280px;
          }
            
          .nav-tools {
              padding: 0.125rem 0.25rem;
          }
            
          .nav-button {
              padding: 0.25rem 0.5rem;
              font-size: 0.6875rem;
          }
      }
        
      /* Include Advice Toggle - COMPACT */
      .include-advice-toggle {
          display: flex;
          align-items: center;
          gap: 0.375rem;
          font-size: 0.6875rem;
          margin-top: 0.375rem;
      }
        
      .include-advice-toggle input[type="checkbox"] {
          width: 14px;
          height: 14px;
          cursor: pointer;
          margin: 0;
      }
      .include-advice-toggle label {
        font-size: 0.625rem;
        color: #495057;
        cursor: pointer;
        user-select: none;
        font-weight: 500;
      }

      /* IA actions inside the main modal */
      .ia-actions { margin-top: 12px; display: flex; justify-content: center; }
      .ia-cancel-btn { padding: 8px 14px; border: 1px solid #ced4da; border-radius: 6px; background: #fff; cursor: pointer; font-size: 0.875rem; }
      .ia-cancel-btn:hover { background: #f8f9fa; }

      .ia-cancel-btn {
          background: #dc3545;
          color: #fff;
          border: none;
          border-radius: 8px;
          padding: 10px 18px;
          font-size: 14px;
          font-weight: 600;
          cursor: pointer;
      }
      .ia-cancel-btn:hover { background: #b02a37; }

      /* Front-page stats (movable) */
      .front-text {
          position: absolute;
          color: #1d1d1f;
          font-size: 14px;
          font-weight: 600;
          pointer-events: all;
          cursor: move;
          user-select: none;
          z-index: 25;
          background: rgba(255,255,255,0.6);
          padding: 2px 4px;
          border-radius: 3px;
      }
      .front-text.selected {
          outline: 2px solid #007aff;
          outline-offset: 2px;
      }
      .pdf-text {
          position: absolute;
          color: #1d1d1f;
          font-size: 14px;
          font-weight: 600;
          pointer-events: all;
          cursor: move;
          user-select: none;
          z-index: 25;
          background: rgba(255,255,255,0.6);
          padding: 2px 4px;
          border-radius: 3px;
      }
      .pdf-text.selected {
          outline: 2px solid #007aff;
          outline-offset: 2px;
      }

      /* Grading Manager Loading State Styles */
      #grading-manager-modal .loading-state, #grading-manager-modal .error-state {
          text-align: center;
          padding: 2rem 1rem;
          color: #6c757d;
      }

      #grading-manager-modal .spinner {
          width: 24px;
          height: 24px;
          border: 2px solid #e5e5e7;
          border-top: 2px solid #007aff;
          border-radius: 50%;
          animation: spin 1s linear infinite;
          margin: 0 auto 1rem;
      }

      /* Grading Manager Empty State Styles */
      #grading-manager-modal .empty-state {
          text-align: center;
          padding: 3rem 1rem;
          color: #6c757d;
      }

      #grading-manager-modal .empty-state .empty-icon {
          margin-bottom: 1rem;
          opacity: 0.3;
      }

      #grading-manager-modal .empty-state h3 {
          font-size: 1.125rem;
          font-weight: 600;
          color: #495057;
          margin-bottom: 0.5rem;
      }

      #grading-manager-modal .empty-state p {
          font-size: 0.875rem;
          margin: 0;
      }

      /* Grading Manager Styles */
      .grading-manager-modal {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
          position: fixed;
          top: 0;
          left: 0;
          width: 100vw;
          height: 100vh;
          background: white;
          z-index: 9999;
          display: none;
          flex-direction: column;
          overflow: hidden;
      }

      .grading-manager-modal.show {
          display: flex;
      }

      .grading-manager-content {
          background: white;
          width: 100%;
          height: 100%;
          overflow: hidden;
          animation: slideIn 0.3s ease;
      }

      .grading-manager-header {
          padding: 1rem 2rem;
          border-bottom: 1px solid #e5e5e7;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #f8f9fa;
          flex-shrink: 0;
      }

      .grading-manager-title {
          font-size: 1.25rem;
          font-weight: 600;
          color: #1d1d1f;
          margin: 0;
      }

      .grading-manager-close {
          width: 32px;
          height: 32px;
          background: transparent;
          border: none;
          border-radius: 6px;
          color: #86868b;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.15s ease;
      }

      .grading-manager-close:hover {
          background: #f0f0f2;
          color: #1d1d1f;
      }

      .grading-manager-close svg {
          stroke: currentColor;
          stroke-width: 2;
          fill: none;
      }

      .grading-manager-body {
          display: flex;
          flex: 1;
          height: calc(100vh - 70px);
          overflow: hidden;
      }

      .grading-manager-sidebar {
          width: 300px;
          background: #f8f9fa;
          border-right: 1px solid #e5e5e7;
          display: flex;
          flex-direction: column;
          height: 100%;
          overflow: hidden;
      }

      /* Submissions Panel Styles */
      .submissions-panel {
          flex: 1;
          display: flex;
          flex-direction: column;
          height: 100%;
          overflow: hidden;
          background: white;
      }

      .submissions-header {
          padding: 1.5rem 2rem;
          border-bottom: 1px solid #e5e5e7;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #f8f9fa;
      }

      .submissions-header h3 {
          font-size: 1.125rem;
          font-weight: 600;
          color: #1d1d1f;
          margin: 0;
      }

      .submissions-count {
          font-size: 0.875rem;
          color: #6c757d;
          background: #e9ecef;
          padding: 0.375rem 0.75rem;
          border-radius: 12px;
      }

      .submissions-list {
          flex: 1;
          overflow-y: auto;
          padding: 1.5rem 2rem;
      }

      .submission-item {
          background: white;
          border: 1px solid #e5e5e7;
          border-radius: 8px;
          padding: 1.25rem;
          margin-bottom: 1rem;
          transition: all 0.2s ease;
      }

      .submission-item:hover {
          border-color: #007aff;
          box-shadow: 0 2px 8px rgba(0, 122, 255, 0.1);
      }

      .submission-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 0.75rem;
      }

      .submission-student-name {
          font-size: 1rem;
          font-weight: 600;
          color: #1d1d1f;
          margin: 0;
      }

      .submission-date-info {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 0.25rem;
      }

      .submission-date {
          font-size: 0.875rem;
          color: #6c757d;
      }

      .days-pending {
          font-size: 0.75rem;
          font-weight: 600;
          color: #ff9500;
          background: rgba(255,149,0,0.1);
          padding: 0.25rem 0.5rem;
          border-radius: 12px;
      }

      .submission-details {
          margin-bottom: 1rem;
      }

      .submission-info {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          margin-bottom: 0.75rem;
      }

      .submission-info span {
          font-size: 0.875rem;
          color: #495057;
      }

      .submission-info strong {
          color: #1d1d1f;
          margin-right: 0.5rem;
      }

      .submission-files {
          font-size: 0.875rem;
          color: #6c757d;
          padding: 0.5rem;
          background: #f8f9fa;
          border-radius: 4px;
      }

      .submission-actions {
          display: flex;
          justify-content: flex-end;
      }

      .btn-start-grading {
          padding: 0.625rem 1.25rem;
          background: #007aff;
          color: white;
          border: none;
          border-radius: 6px;
          font-size: 0.875rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.15s ease;
      }

      .btn-start-grading:hover {
          background: #0051d5;
          transform: translateY(-1px);
          box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
      }

      .btn-start-grading:active {
          transform: translateY(0);
      }

      .btn-start-marking {
          padding: 0.625rem 1.25rem;
          background: #007aff;
          color: white;
          border: none;
          border-radius: 6px;
          font-size: 0.875rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.15s ease;
      }

      .btn-start-marking:hover {
          background: #0051d5;
          transform: translateY(-1px);
          box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
      }

      .btn-start-marking:active {
          transform: translateY(0);
      }
    
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* Full-screen rubric editor styles */
.rubric-editor-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #f5f5f7;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#rubric-manager-modal .editor-header {
  background: #ffffff;
  border-bottom: 1px solid #e5e5e7;
  padding: 0.75rem 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rubric-editor-fullscreen .editor-header {
  background: #ffffff;
  border-bottom: 1px solid #e5e5e7;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 2rem;
  padding-right: 2rem;
  min-height: 48px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1001;
}

.rubric-editor-fullscreen .editor-header-left {
  flex: 0 0 auto;
}

.rubric-editor-fullscreen .editor-header-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
}

.rubric-editor-fullscreen .editor-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1d1d1f;
  letter-spacing: -0.01em;
  margin: 0;
}

.rubric-editor-fullscreen .editor-subtitle {
  font-size: 1rem;
  font-weight: 500;
  color: #4a4a4f;
}

.rubric-editor-fullscreen .editor-path {
  margin-top: 0;
  width: fit-content;
}

#rubric-manager-modal .editor-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1d1d1f;
  letter-spacing: -0.01em;
}

#rubric-manager-modal .editor-subtitle {
    font-size: 0.875rem;
    font-style: italic;
    color: #86868b;
    font-weight: normal;
}

.editor-path {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    background: #f8f9fa;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
    border: 1px solid #e9ecef;
}

#rubric-manager-modal .editor-toolbar {
  background: #ffffff;
  border-bottom: 1px solid #e5e5e7;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  position: relative;
}

#rubric-manager-modal .menu-container,
.rubric-editor-fullscreen .menu-container {
  position: relative;
}

#rubric-manager-modal .menu-trigger,
.rubric-editor-fullscreen .menu-trigger {
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  color: #1d1d1f;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: 36px;
}

#rubric-manager-modal .menu-trigger:hover,
.rubric-editor-fullscreen .menu-trigger:hover {
  background: #f0f0f2;
}

#rubric-manager-modal .menu-trigger.active,
.rubric-editor-fullscreen .menu-trigger.active {
  background: #007aff;
  color: white;
}

#rubric-manager-modal .menu-trigger svg,
.rubric-editor-fullscreen .menu-trigger svg {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}

#rubric-manager-modal .menu-trigger.active svg,
.rubric-editor-fullscreen .menu-trigger.active svg {
  transform: rotate(180deg);
}

#rubric-manager-modal .dropdown-menu,
.rubric-editor-fullscreen .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  padding: 0.5rem;
  margin-top: 0.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 1000;
}

#rubric-manager-modal #format-menu,
.rubric-editor-fullscreen #format-menu {
  width: 250px;
  min-width: 250px;
}

#rubric-manager-modal .dropdown-menu.show,
.rubric-editor-fullscreen .dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#rubric-manager-modal .menu-item,
.rubric-editor-fullscreen .menu-item {
  padding: 0.625rem 1rem;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: #1d1d1f;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
}

#rubric-manager-modal .menu-item:hover,
.rubric-editor-fullscreen .menu-item:hover {
  background: #f0f0f2;
  color: #007aff;
}

#rubric-manager-modal .menu-item svg,
.rubric-editor-fullscreen .menu-item svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
}

#rubric-manager-modal .menu-separator,
.rubric-editor-fullscreen .menu-separator {
  height: 1px;
  background: #e5e5e7;
  margin: 0.25rem 0;
}

/* Character/format menu */
#rubric-manager-modal .char-section-title,
.rubric-editor-fullscreen .char-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6c757d;
  padding: 0.25rem 0.5rem;
}

#rubric-manager-modal .char-grid,
.rubric-editor-fullscreen .char-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  padding: 0.25rem;
}

#rubric-manager-modal .char-btn,
.rubric-editor-fullscreen .char-btn {
  padding: 0.375rem;
  background: #f8f9fa;
  border: 1px solid #e5e5e7;
  border-radius: 6px;
  color: #1d1d1f;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

#rubric-manager-modal .char-btn:hover,
.rubric-editor-fullscreen .char-btn:hover {
  background: white;
  border-color: #d1d1d3;
  color: #007aff;
}

#rubric-manager-modal .toolbar-separator,
.rubric-editor-fullscreen .toolbar-separator {
  width: 1px;
  height: 24px;
  background: #e5e5e7;
  margin: 0 0.5rem;
}

.format-tools {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0 0.5rem;
}

.format-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5e9cff 0%, #3874db 100%);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(94,156,255,0.25);
}

.format-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(94,156,255,0.35);
}

.format-btn:active {
  transform: translateY(0);
}

.format-btn.active {
  background: linear-gradient(135deg, #3874db 0%, #2856b6 100%);
  box-shadow: 0 1px 4px rgba(94,156,255,0.3), inset 0 1px 3px rgba(0,0,0,0.2);
}

.format-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

#rubric-manager-modal .nav-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0.5rem;
}

#rubric-manager-modal .nav-button {
  padding: 0.375rem 0.75rem;
  background: transparent;
  border: 1px solid #e5e5e7;
  border-radius: 6px;
  color: #1d1d1f;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 32px;
}

#rubric-manager-modal .nav-button:hover {
  background: #f0f0f2;
  border-color: #d1d1d3;
}

#rubric-manager-modal .nav-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#rubric-manager-modal .nav-button:disabled:hover {
  background: transparent;
  border-color: #e5e5e7;
}

#rubric-manager-modal .page-info {
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #1d1d1f;
  white-space: nowrap;
}

#rubric-manager-modal .toolbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#rubric-manager-modal .control-button {
  padding: 0.375rem 0.75rem;
  background: transparent;
  border: 1px solid #e5e5e7;
  border-radius: 6px;
  color: #1d1d1f;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 32px;
}

#rubric-manager-modal .control-button:hover {
  background: #f0f0f2;
  border-color: #d1d1d3;
}

#rubric-manager-modal .control-button.active {
  background: #007aff;
  color: white;
  border-color: #007aff;
}

#rubric-manager-modal .control-button svg {
  width: 16px;
  height: 16px;
}

#rubric-manager-modal .zoom-controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: #f0f0f2;
  border-radius: 6px;
  padding: 0.125rem;
}

#rubric-manager-modal .zoom-button {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #1d1d1f;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#rubric-manager-modal .zoom-button:hover {
  background: white;
}

#rubric-manager-modal .zoom-label {
  min-width: 48px;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #1d1d1f;
}

#rubric-manager-modal .main-container,
.rubric-editor-fullscreen .main-container {
  display: flex;
  height: calc(100vh - 60px - 52px);
}

#rubric-manager-modal .left-panel,
.rubric-editor-fullscreen .left-panel {
  flex: 1;
  background: #d1d1d3;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2rem;
  position: relative;
}

#rubric-manager-modal .right-panel,
.rubric-editor-fullscreen .right-panel {
  width: 480px;
  background: #f8f9fa;
  color: #212529;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  box-shadow: -8px 0 32px rgba(0,0,0,0.08);
}

#rubric-manager-modal .panel-header {
  position: sticky;
  top: 0;
  background: #f8f9fa;
  padding: 1rem 1.5rem 0.75rem;
  z-index: 10;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

#rubric-manager-modal .panel-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.375rem;
}

#rubric-manager-modal .assessment-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #212529;
  margin-bottom: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.stat-card {
  flex: 1;
  background: white;
  border: 1px solid #e5e5e7;
  border-radius: 6px;
  padding: 0.5rem;
  text-align: center;
}

.stat-value {
  font-size: 1rem;
  font-weight: 600;
  color: #007aff;
  line-height: 1;
}

.stat-label {
  font-size: 0.5625rem;
  font-weight: 500;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.125rem;
}

#rubric-manager-modal .panel-content {
  padding: 0 1.5rem 1.5rem;
}

#rubric-manager-modal .upload-button {
  padding: 0.75rem 2rem;
  background: #007aff;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}

#rubric-manager-modal .upload-button:hover {
  background: #0051d5;
}

#rubric-manager-modal .pdf-container,
.rubric-editor-fullscreen .pdf-container {
  position: relative;
  background: white;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  border: 1px solid #e5e5e7;
  display: none;
  overflow: visible;
}

#rubric-manager-modal .pdf-container.active,
.rubric-editor-fullscreen .pdf-container.active {
  display: inline-block;
}

#rubric-manager-modal #pdf-canvas,
.rubric-editor-fullscreen #pdf-canvas {
  display: block;
  position: relative;
}

#rubric-manager-modal .answer-areas-overlay,
.rubric-editor-fullscreen .answer-areas-overlay {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10;
}

#rubric-manager-modal .answer-areas-overlay.selecting,
.rubric-editor-fullscreen .answer-areas-overlay.selecting {
  pointer-events: all;
}

#rubric-manager-modal .answer-area,
.rubric-editor-fullscreen .answer-area {
  position: absolute;
  border: 2px solid #007aff;
  background: rgba(0, 122, 255, 0.1);
  cursor: pointer;
  pointer-events: all;
  z-index: 11;
  transition: all 0.2s ease;
}

#rubric-manager-modal .answer-area:hover,
.rubric-editor-fullscreen .answer-area:hover {
  background: rgba(0, 122, 255, 0.2);
  border-color: #0051d5;
  box-shadow: 0 2px 8px rgba(0,122,255,0.3);
}

#rubric-manager-modal .answer-area-label,
.rubric-editor-fullscreen .answer-area-label {
  position: absolute;
  top: -22px;
  left: 0;
  background: #007aff;
  color: white;
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-size: 0.6875rem;
  font-weight: 600;
  z-index: 12;
}

/* Area tools: stacked vertically, outside bottom-left of selection */
#rubric-manager-modal .area-tools,
.rubric-editor-fullscreen .area-tools {
  position: absolute;
  left: -22px; /* outside to the left */
  bottom: -2px; /* slightly below */
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: all;
  z-index: 13;
}

#rubric-manager-modal .area-handle,
.rubric-editor-fullscreen .area-handle {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #6b7280; /* gray for move */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  user-select: none;
}

#rubric-manager-modal .area-handle.resize,
.rubric-editor-fullscreen .area-handle.resize {
  background: #007aff; /* blue for resize */
  cursor: nwse-resize;
}

#rubric-manager-modal .area-handle.delete,
.rubric-editor-fullscreen .area-handle.delete {
  background: #ef4444; /* red for delete */
  cursor: pointer;
}

#rubric-manager-modal .answer-area:hover .area-handle,
.rubric-editor-fullscreen .answer-area:hover .area-handle {
  transform: scale(1.05);
}

.selection-rect {
  position: absolute;
  border: 2px dashed #007aff;
  background: rgba(0, 122, 255, 0.1);
  pointer-events: none;
  z-index: 15;
  border-radius: 4px;
}

.selection-rect.pending {
  border-color: #28a745;
  background: rgba(40, 167, 69, 0.1);
  animation: pulse 2s ease-in-out infinite;
  border-width: 2.5px;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

#rubric-manager-modal .save-button-container {
  position: fixed;
  bottom: 20px;
  right: 500px;
  z-index: 100;
}

#rubric-manager-modal .save-button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #007aff 0%, #0051d5 100%);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,122,255,0.3), 0 8px 32px rgba(0,122,255,0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

#rubric-manager-modal .save-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,122,255,0.4), 0 12px 40px rgba(0,122,255,0.2);
}

#rubric-manager-modal .save-button:active {
  transform: translateY(-1px);
}

#rubric-manager-modal .save-button.saving {
  pointer-events: none;
  background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
}

#rubric-manager-modal .save-button svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

#rubric-manager-modal .save-button.saving svg {
  animation: spin 1s linear infinite;
}

/* Fullscreen editor save button styles */
.rubric-editor-fullscreen .save-button-container {
  position: fixed;
  bottom: 20px;
  right: 500px;
  z-index: 100;
}

.rubric-editor-fullscreen .save-button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #007aff 0%, #0051d5 100%);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,122,255,0.3), 0 8px 32px rgba(0,122,255,0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.rubric-editor-fullscreen .save-button:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,122,255,0.4), 0 12px 40px rgba(0,122,255,0.2);
}

.rubric-editor-fullscreen .save-button:active:not(:disabled) {
  transform: translateY(-1px);
}

.rubric-editor-fullscreen .save-button:disabled {
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed;
}

.rubric-editor-fullscreen .save-button.saving {
  pointer-events: none;
  background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
}

.rubric-editor-fullscreen .save-button svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.rubric-editor-fullscreen .save-button.saving svg {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

.save-indicator {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  background: #28a745;
  border-radius: 50%;
  border: 3px solid white;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;
}

.save-indicator.show {
  opacity: 1;
  transform: scale(1);
}

#rubric-manager-modal .status-bar {
  background: #f5f5f7;
  border-top: 1px solid #e5e5e7;
  padding: 0.375rem 1.5rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #86868b;
}

#rubric-manager-modal .status-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Area cards */
#rubric-manager-modal .area-card {
  background: white;
  border: 1px solid #e5e5e7;
  border-radius: 6px;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  font-size: 0.75rem;
}

#rubric-manager-modal .area-card:hover {
  border-color: #007aff;
  box-shadow: 0 2px 8px rgba(0,122,255,0.1);
}

#rubric-manager-modal .area-card.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

#rubric-manager-modal .area-card.drag-over {
  border-color: #28a745;
  background: rgba(40,167,69,0.05);
}

#rubric-manager-modal .area-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.25rem;
}

#rubric-manager-modal .area-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #212529;
}

.area-meta {
  font-size: 0.5625rem;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

#rubric-manager-modal .area-rubric {
  font-size: 0.6875rem;
  color: #495057;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

#rubric-manager-modal .area-rubric-item {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.area-rubric-bullet {
  width: 3px;
  height: 3px;
  background: #007aff;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.375rem;
}

.area-rubric-content {
  flex: 1;
}

.area-rubric-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.area-rubric-points {
  color: #007aff;
  font-weight: 500;
  margin-left: 0.5rem;
}

#rubric-manager-modal .area-instructions {
  font-size: 0.6875rem;
  color: #495057;
  margin-bottom: 0.5rem;
  padding: 0.375rem 0.5rem;
  background: #f0f5ff;
  border-radius: 4px;
  line-height: 1.4;
}

#rubric-manager-modal .area-instructions strong {
  font-weight: 600;
  color: #212529;
}

#rubric-manager-modal .area-comment {
  font-size: 0.6875rem;
  color: #495057;
  margin-top: 0.5rem;
  padding: 0.375rem 0.5rem;
  background: #fffbf0;
  border-radius: 4px;
  line-height: 1.4;
}

.area-instructions-text {
  white-space: pre-wrap;
}

.area-comment-text {
  white-space: pre-wrap;
}

.area-comment strong {
  font-weight: 600;
  color: #212529;
}

.area-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.area-badge {
  font-size: 0.5625rem;
  font-weight: 600;
  color: white;
  background: #28a745;
  padding: 0.125rem 0.375rem;
  border-radius: 10px;
}

.area-actions {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  display: flex;
  gap: 0.125rem;
}

#rubric-manager-modal .area-card:hover .area-actions {
  opacity: 1;
}

#rubric-manager-modal .drag-handle {
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.2s ease;
}

#rubric-manager-modal .area-card:hover .drag-handle {
  opacity: 0.4;
}

#rubric-manager-modal .drag-handle:hover {
  opacity: 1 !important;
}

#rubric-manager-modal .drag-handle:active {
  cursor: grabbing;
}

#rubric-manager-modal .drag-handle svg {
  width: 12px;
  height: 12px;
  stroke: #6c757d;
  stroke-width: 2;
  fill: none;
}

#rubric-manager-modal .btn-icon {
  width: 22px;
  height: 22px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 4px;
  color: #6c757d;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

#rubric-manager-modal .btn-icon:hover {
  background: white;
  color: #007aff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

#rubric-manager-modal .btn-icon svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

/* Inline edit form */
.inline-edit-form {
  background: white;
  border: 2px solid #007aff;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 4px 16px rgba(0,122,255,0.15);
  animation: slideIn 0.2s ease;
}

.form-header {
  margin-bottom: 0.625rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid #e9ecef;
}

.form-title {
  font-size: 0.625rem;
  font-weight: 600;
  color: #28a745;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#rubric-manager-modal .form-row,
.inline-edit-form .form-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

#rubric-manager-modal .form-group,
.inline-edit-form .form-group {
  flex: 1;
}

#rubric-manager-modal .form-label,
.inline-edit-form .form-label {
  display: block;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #6c757d;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#rubric-manager-modal .form-input,
.inline-edit-form .form-input {
  width: 100%;
  padding: 0.375rem 0.5rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  color: #212529;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 0.2s ease;
  height: 28px;
}

#rubric-manager-modal textarea.form-input,
.inline-edit-form textarea.form-input {
  height: auto;
}

#rubric-manager-modal .form-input:focus,
.inline-edit-form .form-input:focus {
  outline: none;
  background: white;
  border-color: #007aff;
  box-shadow: 0 0 0 2px rgba(0,122,255,0.1);
}

#rubric-manager-modal .form-input::placeholder,
.inline-edit-form .form-input::placeholder {
  color: #adb5bd;
}

/* Rubric builder */
.rubric-builder {
  margin-bottom: 0.625rem;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 0.75rem;
  background: #fafbfc;
}

#rubric-manager-modal .rubric-header,
.inline-edit-form .rubric-header {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  padding: 0 0.125rem;
  font-size: 0.5625rem;
  color: #6c757d;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.05em;
  align-items: center;
  box-sizing: border-box;
}

#rubric-manager-modal .rubric-header > div:nth-child(3),
.inline-edit-form .rubric-header > div:nth-child(3) {
  flex-shrink: 0;
  box-sizing: border-box;
}

.rubric-header-text {
  flex: 1;
  min-width: 0;
}

.rubric-header-points {
  width: 60px;
  text-align: center;
  flex-shrink: 0;
}

.rubric-item-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.125rem;
  margin-bottom: 0.5rem;
  box-sizing: border-box;
}

.rubric-input {
  flex: 1;
  padding: 0.375rem 0.5rem;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  color: #212529;
  font-size: 0.8125rem;
  font-family: inherit;
  transition: all 0.15s ease;
  height: 32px;
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
}

.rubric-input:focus {
  outline: none;
  border-color: #007aff;
  box-shadow: 0 0 0 2px rgba(0,122,255,0.1);
}

#rubric-manager-modal .rubric-points,
.inline-edit-form .rubric-points {
  width: 60px;
  padding: 0.375rem 0.5rem;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  color: #212529;
  font-size: 0.8125rem;
  font-family: inherit;
  text-align: center;
  transition: all 0.15s ease;
  height: 32px;
  box-sizing: border-box;
  flex-shrink: 0;
}

#rubric-manager-modal .rubric-points:focus,
.inline-edit-form .rubric-points:focus {
  outline: none;
  border-color: #007aff;
  box-shadow: 0 0 0 2px rgba(0,122,255,0.1);
}

.rubric-delete {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #adb5bd;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.rubric-delete:hover {
  color: #dc3545;
  background: rgba(220,53,69,0.1);
}

.rubric-delete svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

.add-rubric-btn {
  width: 100%;
  padding: 0.375rem;
  background: transparent;
  border: 1px dashed #dee2e6;
  border-radius: 4px;
  color: #6c757d;
  font-size: 0.6875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.add-rubric-btn:hover {
  border-color: #007aff;
  color: #007aff;
  background: rgba(0,122,255,0.05);
}

.add-rubric-btn svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

/* Comment builder */
.comment-builder {
  margin-bottom: 0.625rem;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 0.75rem;
  background: #fafbfc;
}

.comment-header {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  padding: 0 0.125rem;
  font-size: 0.5625rem;
  color: #6c757d;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.05em;
  align-items: center;
}

.comment-header-text {
  flex: 1;
}

.comment-item {
  margin-bottom: 0.5rem;
  padding: 0;
}

.comment-item-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.comment-delete {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #adb5bd;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.comment-delete:hover {
  color: #dc3545;
  background: rgba(220,53,69,0.1);
}

.comment-delete svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

.add-comment-btn {
  width: 100%;
  padding: 0.375rem;
  background: transparent;
  border: 1px dashed #dee2e6;
  border-radius: 4px;
  color: #6c757d;
  font-size: 0.6875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.add-comment-btn:hover {
  border-color: #007aff;
  color: #007aff;
  background: rgba(0,122,255,0.05);
}

.add-comment-btn svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

/* Action buttons */
#rubric-manager-modal .form-actions,
.inline-edit-form .form-actions {
  display: flex;
  gap: 0.375rem;
  margin-top: 0.75rem;
}

#rubric-manager-modal .btn-save,
.inline-edit-form .btn-save {
  flex: 1;
  padding: 0.375rem 0.75rem;
  background: #007aff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  height: 28px;
}

#rubric-manager-modal .btn-save:hover:not(:disabled),
.inline-edit-form .btn-save:hover:not(:disabled) {
  background: #0051d5;
}

#rubric-manager-modal .btn-save:disabled,
.inline-edit-form .btn-save:disabled {
  background: #6c757d;
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

#rubric-manager-modal .btn-cancel,
.inline-edit-form .btn-cancel {
  flex: 1;
  padding: 0.375rem 0.75rem;
  background: white;
  color: #495057;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  height: 28px;
}

#rubric-manager-modal .btn-cancel:hover,
.inline-edit-form .btn-cancel:hover {
  background: #f8f9fa;
  border-color: #adb5bd;
}

/* Modal styles */
#rubric-manager-modal .modal-backdrop,
body > #instructions-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 12000;
  display: none;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
  padding: 1.5rem;
  box-sizing: border-box;
}

#rubric-manager-modal .modal-backdrop.show,
body > #instructions-modal.show {
  display: flex;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#rubric-manager-modal .modal,
body > #instructions-modal .modal {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow: hidden;
  animation: slideIn 0.3s ease;
}

#rubric-manager-modal .modal-header,
body > #instructions-modal .modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid #e5e5e7;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#rubric-manager-modal .modal-close,
body > #instructions-modal .modal-close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #86868b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

#rubric-manager-modal .modal-close:hover,
body > #instructions-modal .modal-close:hover {
  background: #f0f0f2;
  color: #1d1d1f;
}

#rubric-manager-modal .modal-close svg,
body > #instructions-modal .modal-close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
}

#rubric-manager-modal .modal-body,
body > #instructions-modal .modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  max-height: calc(80vh - 140px);
}

.modal-form-group {
  margin-bottom: 1rem;
}

.modal-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1d1d1f;
  margin-bottom: 0.5rem;
}

.modal-textarea {
  width: 100%;
  padding: 0.75rem;
  background: #f5f5f7;
  border: 1px solid #e5e5e7;
  border-radius: 8px;
  color: #1d1d1f;
  font-size: 0.875rem;
  font-family: inherit;
  resize: vertical;
  min-height: 200px;
  transition: all 0.2s ease;
}

.modal-textarea:focus {
  outline: none;
  background: white;
  border-color: #007aff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.modal-textarea::placeholder {
  color: #86868b;
}

#rubric-manager-modal .modal-footer,
body > #instructions-modal .modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #e5e5e7;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

#rubric-manager-modal .modal-btn,
body > #instructions-modal .modal-btn {
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

#rubric-manager-modal .modal-btn-primary,
body > #instructions-modal .modal-btn-primary {
  background: #007aff;
  color: white;
  border: none;
}

#rubric-manager-modal .modal-btn-primary:hover,
body > #instructions-modal .modal-btn-primary:hover {
  background: #0051d5;
}

#rubric-manager-modal .modal-btn-secondary,
body > #instructions-modal .modal-btn-secondary {
  background: white;
  color: #1d1d1f;
  border: 1px solid #e5e5e7;
}

#rubric-manager-modal .modal-btn-secondary:hover,
body > #instructions-modal .modal-btn-secondary:hover {
  background: #f0f0f2;
  border-color: #d1d1d3;
}

/* Hide number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.rubric-manager-modal {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: white;
  z-index: 9999;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.rubric-manager-modal.show {
  display: flex;
}

.rubric-manager-content {
  background: white;
  width: 100%;
  height: 100%;
  overflow: hidden;
  animation: slideIn 0.3s ease;
}

/* Body styles when modal is open */
body.modal-open {
  overflow: hidden;
}

/* Toast message styles */
.success-message,
.error-message {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 10000;
  animation: slideIn 0.3s ease;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  pointer-events: none;
}

.success-message {
  background: #28a745;
  color: white;
}

.error-message {
  background: #dc3545;
  color: white;
}

.success-message.fade-out,
.error-message.fade-out {
  animation: slideOut 0.3s ease;
  opacity: 0;
}

.rubric-manager-header {
  padding: 1rem 2rem;
  border-bottom: 1px solid #e5e5e7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f9fa;
  flex-shrink: 0;
}

.rubric-manager-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0;
}

.rubric-manager-close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #86868b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.rubric-manager-close:hover {
  background: #f0f0f2;
  color: #1d1d1f;
}

.rubric-manager-close svg {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.rubric-manager-body {
  display: flex;
  flex: 1;
  height: calc(100vh - 70px);
  overflow: hidden;
}

.rubric-manager-sidebar {
  width: 300px;
  background: #f8f9fa;
  border-right: 1px solid #e5e5e7;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.sidebar-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e5e5e7;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar-header h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

.btn-new-assessment {
  padding: 0.375rem 0.75rem;
  background: #007aff;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-new-assessment:hover {
  background: #0051d5;
}

.btn-new-assessment svg {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.assessments-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  height: 100%;
}

/* Path grouping styles */
.path-group {
  margin-bottom: 1rem;
}

.path-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: #f8f9fa;
  border: 1px solid #e5e5e7;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 0.25rem;
}

.path-header:hover {
  background: #e9ecef;
  border-color: #007aff;
}

.path-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #495057;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex: 1;
}

.path-count {
  font-size: 0.6875rem;
  color: #6c757d;
  background: #e9ecef;
  padding: 0.125rem 0.375rem;
  border-radius: 10px;
  margin-right: 0.5rem;
}

.path-toggle {
  font-size: 0.75rem;
  color: #6c757d;
  transition: transform 0.2s ease;
  width: 16px;
  text-align: center;
}

.path-content {
  padding-left: 0.5rem;
  border-left: 2px solid #e9ecef;
  margin-left: 0.5rem;
}

.assessment-item {
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  background: white;
  border: 1px solid #e5e5e7;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.assessment-item:hover {
  border-color: #007aff;
  box-shadow: 0 2px 8px rgba(0,122,255,0.1);
}

.assessment-item.active {
  border-color: #007aff;
  background: rgba(0,122,255,0.05);
}

.assessment-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 0.25rem;
}

.assessment-path {
  font-size: 0.75rem;
  color: #8e8e93;
  margin-bottom: 0.25rem;
  word-break: break-all;
  line-height: 1.2;
}

.assessment-meta {
  font-size: 0.75rem;
  color: #6c757d;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.assessment-marks {
  color: #007aff;
  font-weight: 500;
}

.rubric-manager-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
}

.main-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #e5e5e7;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.assessment-info h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 0.25rem 0;
}

.assessment-info p {
  font-size: 0.875rem;
  color: #6c757d;
  margin: 0;
}

.main-actions {
  display: flex;
  gap: 0.5rem;
}

#rubric-manager-modal .btn-primary, #rubric-manager-modal .btn-secondary {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
}

#rubric-manager-modal .btn-primary {
  background: #007aff;
  color: white;
}

#rubric-manager-modal .btn-primary:hover:not(:disabled) {
  background: #0051d5;
}

#rubric-manager-modal .btn-primary:disabled {
  background: #e5e5e7;
  color: #86868b;
  cursor: not-allowed;
}

#rubric-manager-modal .btn-secondary {
  background: white;
  color: #1d1d1f;
  border: 1px solid #e5e5e7;
}

#rubric-manager-modal .btn-secondary:hover:not(:disabled) {
  background: #f0f0f2;
  border-color: #d1d1d3;
}

#rubric-manager-modal .btn-secondary:disabled {
  background: #f8f9fa;
  color: #86868b;
  border-color: #e5e5e7;
  cursor: not-allowed;
}

#rubric-manager-modal .btn-primary svg, #rubric-manager-modal .btn-secondary svg {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.btn-refresh-assessments {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #e5e5e7;
  background: white;
  color: #1d1d1f;
}

.btn-refresh-assessments:hover {
  background: #f0f0f2;
  border-color: #d1d1d3;
}

.btn-refresh-assessments svg {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.assessment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #f0f0f2;
}

.assessment-version {
  font-size: 0.75rem;
  color: #6c757d;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rubric-indicator {
  font-size: 0.875rem;
}

.rubric-indicator.has-rubric {
  color: #28a745;
  font-weight: 500;
}

.rubric-indicator.no-rubric {
  color: #6c757d;
  font-weight: 500;
}

.rubric-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-left: 8px;
}

.rubric-pill.rubric-available {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.rubric-pill.rubric-unavailable {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.submission-rubric-status {
  font-size: 0.875rem;
  color: #495057;
}

.pending-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: #ff9500;
  background: rgba(255,149,0,0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
}

#rubric-manager-modal .loading-state, #rubric-manager-modal .error-state {
  text-align: center;
  padding: 2rem 1rem;
  color: #6c757d;
}

.error-detail {
  font-size: 0.875rem;
  color: #dc3545;
  margin-top: 0.5rem;
  font-style: italic;
}

#rubric-manager-modal .spinner {
  width: 24px;
  height: 24px;
  border: 2px solid #e5e5e7;
  border-top: 2px solid #007aff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.btn-retry {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #007aff;
  background: #007aff;
  color: white;
  margin-top: 1rem;
}

.btn-retry:hover {
  background: #0051d5;
  border-color: #0051d5;
}

.assessment-details {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.detail-row {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
}

.detail-row:last-child {
  margin-bottom: 0;
}

.detail-row strong {
  color: #495057;
  margin-right: 0.5rem;
}

.assessment-link {
  color: #007aff;
  text-decoration: none;
}

.assessment-link:hover {
  text-decoration: underline;
}

.rubric-management {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.rubric-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#rubric-manager-modal .empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #6c757d;
}

#rubric-manager-modal .empty-state .empty-icon {
  margin-bottom: 1rem;
  opacity: 0.3;
}

#rubric-manager-modal .empty-state h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.5rem;
}

#rubric-manager-modal .empty-state p {
  font-size: 0.875rem;
  margin: 0;
}

.rubric-content {
  display: none;
}

.rubric-content.active {
  display: block;
}

.rubric-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.overview-card {
  background: #f8f9fa;
  border: 1px solid #e5e5e7;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
}

.overview-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: #007aff;
  margin-bottom: 0.25rem;
}

.overview-label {
  font-size: 0.75rem;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.areas-section {
  margin-bottom: 2rem;
}

.section-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#rubric-manager-modal .area-card {
  background: white;
  border: 1px solid #e5e5e7;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  transition: all 0.2s ease;
}

#rubric-manager-modal .area-card:hover {
  border-color: #007aff;
  box-shadow: 0 2px 8px rgba(0,122,255,0.1);
}

#rubric-manager-modal .area-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

#rubric-manager-modal .area-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1d1d1f;
}

.area-marks {
  background: #007aff;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

#rubric-manager-modal .area-rubric {
  margin-bottom: 0.75rem;
}

#rubric-manager-modal .rubric-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f0f0f0;
}

#rubric-manager-modal .rubric-item:last-child {
  border-bottom: none;
}

#rubric-manager-modal .rubric-text {
  flex: 1;
  font-size: 0.8125rem;
  color: #495057;
}

#rubric-manager-modal .rubric-points {
  color: #007aff;
  font-weight: 500;
  font-size: 0.75rem;
  margin: 0;
}

#rubric-manager-modal .area-instructions {
  font-size: 0.8125rem;
  color: #495057;
  padding: 0.75rem;
  background: #f0f5ff;
  border-radius: 6px;
  margin-bottom: 0.75rem;
}

#rubric-manager-modal .area-instructions strong {
  font-weight: 600;
  color: #1d1d1f;
}

.area-comments {
  font-size: 0.8125rem;
  color: #495057;
}

.comment-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid #f0f0f0;
}

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

.comment-item strong {
  font-weight: 600;
  color: #1d1d1f;
}

/* Rubric Editor Styles */
.rubric-editor {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.rubric-editor-header {
  background: #f8f9fa;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #e5e5e7;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rubric-editor-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0;
}

.rubric-editor-actions {
  display: flex;
  gap: 0.75rem;
}

.rubric-editor-content {
  padding: 2rem;
}

.rubric-form-section {
  margin-bottom: 2rem;
}

.rubric-form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 0.5rem;
}

.rubric-form-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d1d3;
  border-radius: 6px;
  font-size: 0.875rem;
  color: #1d1d1f;
  background: white;
  transition: all 0.2s ease;
}

.rubric-form-input:focus {
  outline: none;
  border-color: #007aff;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.1);
}

.rubric-form-textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d1d3;
  border-radius: 6px;
  font-size: 0.875rem;
  color: #1d1d1f;
  background: white;
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
  transition: all 0.2s ease;
}

.rubric-form-textarea:focus {
  outline: none;
  border-color: #007aff;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.1);
}

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

.btn-add-criteria {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #007aff;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-add-criteria:hover {
  background: #0051d5;
}

.rubric-criteria-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.criterion-item {
  background: #f8f9fa;
  border: 1px solid #e5e5e7;
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.criterion-item:hover {
  border-color: #007aff;
  box-shadow: 0 2px 8px rgba(0,122,255,0.1);
}

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

.criterion-number {
  width: 32px;
  height: 32px;
  background: #007aff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
}

.criterion-actions {
  display: flex;
  gap: 0.5rem;
}

#rubric-manager-modal .btn-icon {
  width: 32px;
  height: 32px;
  background: white;
  border: 1px solid #d1d1d3;
  border-radius: 6px;
  color: #6c757d;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

#rubric-manager-modal .btn-icon:hover {
  background: #f8f9fa;
  color: #007aff;
  border-color: #007aff;
}

#rubric-manager-modal .btn-icon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.criterion-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.criterion-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.criterion-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.criterion-input {
  padding: 0.75rem;
  border: 1px solid #d1d1d3;
  border-radius: 6px;
  font-size: 0.875rem;
  color: #1d1d1f;
  background: white;
  transition: all 0.2s ease;
}

.criterion-input:focus {
  outline: none;
  border-color: #007aff;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.1);
}

.criterion-textarea {
  padding: 0.75rem;
  border: 1px solid #d1d1d3;
  border-radius: 6px;
  font-size: 0.875rem;
  color: #1d1d1f;
  background: white;
  min-height: 80px;
  resize: vertical;
  font-family: inherit;
  transition: all 0.2s ease;
}

.criterion-textarea:focus {
  outline: none;
  border-color: #007aff;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.1);
}

.criterion-marks {
  padding: 0.75rem;
  border: 1px solid #d1d1d3;
  border-radius: 6px;
  font-size: 0.875rem;
  color: #1d1d1f;
  background: white;
  width: 120px;
  transition: all 0.2s ease;
}

.criterion-marks:focus {
  outline: none;
  border-color: #007aff;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.1);
}

.criterion-levels {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e5e7;
}

.criterion-levels-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

.criterion-level-item {
  background: white;
  border: 1px solid #e5e5e7;
  border-radius: 6px;
  padding: 1rem;
}

.criterion-level-form {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.criterion-level-name {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #d1d1d3;
  border-radius: 4px;
  font-size: 0.8125rem;
  color: #1d1d1f;
  background: white;
  transition: all 0.2s ease;
}

.criterion-level-name:focus {
  outline: none;
  border-color: #007aff;
  box-shadow: 0 0 0 2px rgba(0,122,255,0.1);
}

.criterion-level-marks {
  width: 80px;
  padding: 0.5rem;
  border: 1px solid #d1d1d3;
  border-radius: 4px;
  font-size: 0.8125rem;
  color: #1d1d1f;
  background: white;
  text-align: center;
  transition: all 0.2s ease;
}

.criterion-level-marks:focus {
  outline: none;
  border-color: #007aff;
  box-shadow: 0 0 0 2px rgba(0,122,255,0.1);
}

.btn-remove-level {
  width: 28px;
  height: 28px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-remove-level:hover {
  background: #c82333;
}

.criterion-level-description {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #d1d1d3;
  border-radius: 4px;
  font-size: 0.8125rem;
  color: #1d1d1f;
  background: white;
  min-height: 60px;
  resize: vertical;
  font-family: inherit;
  transition: all 0.2s ease;
}

.criterion-level-description:focus {
  outline: none;
  border-color: #007aff;
  box-shadow: 0 0 0 2px rgba(0,122,255,0.1);
}

.btn-add-level {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: transparent;
  color: #007aff;
  border: 1px dashed #007aff;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-add-level:hover {
  background: rgba(0,122,255,0.05);
  border-style: solid;
}

.rubric-summary {
  background: #f8f9fa;
  border: 1px solid #e5e5e7;
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  gap: 2rem;
}

.rubric-summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.rubric-summary-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rubric-summary-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: #007aff;
}

/* Rubric Viewer Styles */
.rubric-viewer {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.rubric-viewer-header {
  background: #f8f9fa;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #e5e5e7;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rubric-viewer-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0;
}

.rubric-viewer-actions {
  display: flex;
  gap: 0.75rem;
}

.rubric-viewer-content {
  padding: 2rem;
}

.rubric-instructions-section {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #e5e5e7;
}

.rubric-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 1rem;
}

.rubric-instructions-content {
  background: #f8f9fa;
  border: 1px solid #e5e5e7;
  border-radius: 6px;
  padding: 1rem;
  font-size: 0.875rem;
  color: #495057;
  line-height: 1.6;
}

.rubric-criteria-section {
  margin-bottom: 2rem;
}

.rubric-criteria-view {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.criterion-view-item {
  background: #f8f9fa;
  border: 1px solid #e5e5e7;
  border-radius: 8px;
  padding: 1.5rem;
}

.criterion-view-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.criterion-view-number {
  width: 32px;
  height: 32px;
  background: #007aff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
}

.criterion-view-title {
  flex: 1;
  font-size: 1rem;
  font-weight: 600;
  color: #1d1d1f;
}

.criterion-view-marks {
  font-size: 0.875rem;
  font-weight: 600;
  color: #007aff;
  background: rgba(0,122,255,0.1);
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
}

.criterion-view-description {
  font-size: 0.875rem;
  color: #495057;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.criterion-view-levels {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.criterion-level-view {
  background: white;
  border: 1px solid #e5e5e7;
  border-radius: 6px;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.criterion-level-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1d1d1f;
  min-width: 120px;
}

.criterion-level-description {
  flex: 1;
  font-size: 0.8125rem;
  color: #495057;
  line-height: 1.5;
}

.criterion-level-marks {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #007aff;
  background: rgba(0,122,255,0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  min-width: 60px;
  text-align: center;
}

.rubric-summary-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e5e7;
}

.rubric-summary-card {
  background: #f8f9fa;
  border: 1px solid #e5e5e7;
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  gap: 2rem;
}

/* Empty States */
.empty-criteria {
  text-align: center;
  padding: 3rem 2rem;
  color: #6c757d;
}

.empty-criteria p {
  font-size: 0.875rem;
  margin: 0;
}

.empty-levels {
  text-align: center;
  padding: 2rem 1rem;
  color: #6c757d;
  background: white;
  border: 1px dashed #d1d1d3;
  border-radius: 6px;
}

.empty-levels p {
  font-size: 0.8125rem;
  margin: 0;
}

/* Success Message */

/* PDF Viewer Styles */
.pdf-section {
  margin-bottom: 2rem;
}

.pdf-controls {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.pdf-container {
  background: white;
  border: 1px solid #e5e5e7;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.pdf-toolbar {
  background: #f8f9fa;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e5e7;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pdf-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pdf-zoom {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#rubric-manager-modal .page-info {
  font-size: 0.875rem;
  font-weight: 500;
  color: #1d1d1f;
  min-width: 100px;
  text-align: center;
}

#rubric-manager-modal .zoom-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #1d1d1f;
  min-width: 50px;
  text-align: center;
}

.pdf-viewer {
  position: relative;
  background: #f5f5f7;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 1rem;
  min-height: 70vh;
  flex: 1;
}

#pdf-canvas {
  background: white;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  border-radius: 4px;
}

.pdf-overlay {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 10;
}

.pdf-overlay.selecting {
  pointer-events: all;
  cursor: crosshair;
}

/* PDF Selection Styles */
.selection-rectangle {
  position: absolute;
  border: 2px dashed #007aff;
  background: rgba(0, 122, 255, 0.1);
  pointer-events: none;
  z-index: 15;
  border-radius: 4px;
}

.selected-area {
  position: absolute;
  border: 2px solid #28a745;
  background: rgba(40, 167, 69, 0.1);
  cursor: pointer;
  pointer-events: all;
  z-index: 11;
  transition: all 0.2s ease;
  border-radius: 4px;
}

.selected-area:hover {
  background: rgba(40, 167, 69, 0.2);
  border-color: #1e7e34;
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.area-label {
  position: absolute;
  top: -24px;
  left: 0;
  background: #28a745;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 12;
  white-space: nowrap;
}


/* Selected Areas List */
.selected-areas {
  margin-top: 1rem;
}

.selected-area-item {
  background: #f8f9fa;
  border: 1px solid #e5e5e7;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
}

.selected-area-item:hover {
  border-color: #007aff;
  box-shadow: 0 2px 8px rgba(0,122,255,0.1);
}

.area-info {
  flex: 1;
}

#rubric-manager-modal .area-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 0.25rem;
}

.area-details {
  font-size: 0.75rem;
  color: #6c757d;
}

/* PDF Loading and Error States */
.pdf-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: #6c757d;
}

.pdf-loading .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e5e5e7;
  border-top: 3px solid #007aff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

.pdf-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: #dc3545;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.pdf-error .error-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  color: #dc3545;
}

.pdf-error .error-icon svg {
  width: 100%;
  height: 100%;
}

.pdf-error h3 {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #dc3545;
}

.pdf-error .error-detail {
  font-size: 0.875rem;
  color: #6c757d;
  margin: 0.5rem 0 1.5rem 0;
  line-height: 1.5;
}

.pdf-error .technical-details {
  margin: 1rem 0;
  text-align: left;
  width: 100%;
}

.pdf-error .technical-details summary {
  cursor: pointer;
  padding: 0.5rem;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  font-size: 0.875rem;
  color: #495057;
}

.pdf-error .technical-details summary:hover {
  background: #e9ecef;
}

.pdf-error .technical-content {
  padding: 1rem;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-top: none;
  border-radius: 0 0 4px 4px;
  font-size: 0.8rem;
  color: #6c757d;
}

.pdf-error .technical-content p {
  margin: 0.5rem 0;
}

.pdf-error .error-actions {
  display: flex;
  gap: 0.75rem;
  margin: 1.5rem 0;
  justify-content: center;
}

.pdf-error .error-help {
  margin-top: 2rem;
  padding: 1rem;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  text-align: left;
  width: 100%;
}

.pdf-error .error-help p {
  margin: 0 0 0.75rem 0;
  font-weight: 600;
  color: #495057;
}

.pdf-error .error-help ul {
  margin: 0;
  padding-left: 1.25rem;
  color: #6c757d;
}

.pdf-error .error-help li {
  margin: 0.5rem 0;
  font-size: 0.875rem;
  line-height: 1.4;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Button States */
#rubric-manager-modal .btn-primary.active {
  background: #dc3545;
  border-color: #dc3545;
}

#rubric-manager-modal .btn-primary.active:hover {
  background: #c82333;
  border-color: #bd2130;
}

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e5e7;
  background-color: #ffffff;
}

.modal-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1d1d1f;
  line-height: 1.3;
}

.modal-close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #86868b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
  line-height: 1;
  font-size: 1.25rem;
}

.modal-close:hover {
  background: #f0f0f2;
  color: #1d1d1f;
}

.modal-close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
}