/* ============================================================
   LEGACY STYLES

   Theme variables have been migrated to the new design system:
   - tokens.css: Design tokens (spacing, typography, transitions)
   - themes.css: Theme definitions (Warm Sand, Starlight Mocha, Midnight Ocean)
   - theme-bridge.css: Maps new variables to legacy names used below

   The variables (--bg-primary, --text-primary, etc.) are now
   provided by theme-bridge.css based on the active theme.
   ============================================================ */

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Autofill Override */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Format Tabs */
.format-tabs-container {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 0 20px;
    position: sticky;
    top: 52px;
    z-index: 999;
}

.format-tabs {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 4px;
    padding: 12px 0 0 0;
}

.format-tab {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 8px 8px 0 0;
}

.format-tab:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.format-tab.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-bottom-color: var(--accent-primary);
    font-weight: 600;
}

[data-theme="dark"] .format-tab.active {
    border-bottom-color: var(--accent-primary);
}

/* Format Panels */
.format-panels {
    position: relative;
}

.format-panel {
    display: none !important;
}

.format-panel.active {
    display: block !important;
}

/* Coming Soon Panel */
.coming-soon-panel {
    text-align: center;
    padding: 60px 40px;
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    max-width: 600px;
    margin: 60px auto;
    box-shadow: var(--shadow);
}

.coming-soon-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.coming-soon-panel h2 {
    color: var(--text-primary);
    margin-bottom: 12px;
    font-size: 1.5rem;
}

.coming-soon-panel > p {
    color: var(--text-secondary);
    margin-bottom: 24px;
    font-size: 1rem;
}

.coming-soon-features {
    text-align: left;
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 20px 0;
}

.coming-soon-features h4 {
    color: var(--text-primary);
    margin-bottom: 12px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.coming-soon-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.coming-soon-features li {
    color: var(--text-secondary);
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.coming-soon-features li:last-child {
    border-bottom: none;
}

.coming-soon-note {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
    margin-top: 16px;
}

/* Pathway Selector */
.pathway-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.pathway-card {
    background: var(--input-bg);
    border: 1px solid var(--border-color) !important;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pathway-card:hover {
    border-color: var(--text-secondary);
    background: var(--bg-tertiary);
}

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    min-height: 100vh;
    padding: 20px;
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography - Headings use Sora */
h1, h2, h3, h4, h5, h6,
.header h1,
.step h2,
.grading-nav-brand {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
}

/* Typography - Monospace for code/templates */
code, pre, kbd, samp,
.pattern-preview,
.preview-filename,
.placeholder-pill,
.file-download-link,
input[type="text"].filename-pattern,
#filenamePattern,
textarea.approved-fonts-textarea {
    font-family: var(--font-mono);
}

/* Typography - Form elements inherit body font */
input, select, textarea, button {
    font-family: inherit;
}

/* Navigation */
.grading-nav {
    background: var(--bg-tertiary);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0;
    margin: 0;
    box-shadow: var(--card-shadow);
}

.grading-nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.grading-nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 1rem;
}

.grading-nav-brand:hover {
    color: var(--text-primary);
}

/* Brand logo styling */
.brand-logo {
    height: 38px;
    width: auto;
}

/* Default: show light logo (for light backgrounds) */
.brand-logo-light {
    display: block;
}
.brand-logo-dark {
    display: none;
}

/* Dark themes: show dark logo (for dark backgrounds) */
[data-theme="dark"] .brand-logo-light,
[data-theme-variant="espresso"] .brand-logo-light,
[data-theme-variant="moonlight"] .brand-logo-light,
[data-theme-variant="mossglow"] .brand-logo-light {
    display: none;
}
[data-theme="dark"] .brand-logo-dark,
[data-theme-variant="espresso"] .brand-logo-dark,
[data-theme-variant="moonlight"] .brand-logo-dark,
[data-theme-variant="mossglow"] .brand-logo-dark {
    display: block;
}

.grading-nav-links {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.grading-nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.grading-nav-link:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.grading-nav-home {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white !important;
    font-weight: 600;
}

.grading-nav-home:hover {
    background: linear-gradient(135deg, #5a67d8, #6b46c1);
    color: white !important;
    transform: translateY(-1px);
}

.grading-nav-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.status-indicator {
    font-size: 0.8rem;
}

.status-online {
    color: #10b981;
}

.status-offline {
    color: #ef4444;
}

/* Theme Toggle */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.2rem;
    padding: 0;
}

.theme-toggle:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

/* Main layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 20px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.header {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 40px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.header h1 {
    font-size: 2rem;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-primary);
}

.header p {
    font-size: 1rem;
    color: var(--text-secondary);
}

.main-content {
    padding: 30px;
}

/* Steps */
.step {
    margin-bottom: 30px;
    padding: 25px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

.criteria-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.criteria-stack .criteria-section {
    margin-top: 0;
}

.step:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--card-shadow);
}

/* Switched: optional steps now have solid border */
.step-optional {
    border-style: solid;
    background: var(--bg-primary);
}

.step h2 {
    color: var(--text-primary);
    margin-bottom: 20px;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

/* SWITCHED COLORS: Required steps (1,2,5) are now GREEN */
.step-number {
    font-family: var(--font-heading);
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

/* SWITCHED COLORS: Optional steps (3,4) are now PURPLE */
.step-number.optional {
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

.optional-badge {
    background: #f0f9ff;
    color: #1e40af;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid #93c5fd;
    margin-left: auto;
}

.auto-badge {
    background: #f0fdf4;
    color: #166534;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid #86efac;
    margin-left: auto;
}

[data-theme="dark"] .auto-badge {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.4);
}

/* Readonly textarea styling */
textarea[readonly] {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: default;
    opacity: 0.85;
}

textarea[readonly]:focus {
    outline: none;
    border-color: var(--border-color);
    box-shadow: none;
}

.step-description {
    margin-bottom: 20px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-style: italic;
}

/* GREEN Instructions Boxes (consistent styling) */
.instructions-box {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
    color: #047857;
}

.instructions-box h4 {
    color: #065f46;
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 600;
}

/* Collapsible instructions */
.instructions-box.collapsible .instructions-header {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 5px 0;
    transition: all 0.2s ease;
}

.instructions-box.collapsible .instructions-header:hover {
    color: #047857;
}

.instructions-box.collapsible .instructions-header .caret {
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 0.8em;
    color: #059669;
}

.instructions-box.collapsible.collapsed .instructions-header .caret {
    transform: rotate(-90deg);
}

.instructions-box.collapsible .instructions-content {
    max-height: 500px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
    margin-top: 10px;
}

.instructions-box.collapsible.collapsed .instructions-content {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

.instructions-box ol {
    color: #047857;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-left: 20px;
}

.instructions-box strong {
    color: #065f46;
}

.instructions-note {
    color: #065f46;
    font-size: 0.85rem;
    margin-top: 10px;
    font-style: italic;
}

/* Dark mode for instructions boxes */
[data-theme="dark"] .instructions-box {
    background: #064e3b;
    border-color: #10b981;
    color: #a7f3d0;
}

[data-theme="dark"] .instructions-box h4,
[data-theme="dark"] .instructions-box strong {
    color: #6ee7b7;
}

[data-theme="dark"] .instructions-box ol,
[data-theme="dark"] .instructions-box .instructions-content {
    color: #a7f3d0;
}

[data-theme="dark"] .instructions-box.collapsible .instructions-header:hover {
    color: #6ee7b7;
}

[data-theme="dark"] .instructions-box.collapsible .instructions-header .caret {
    color: #34d399;
}

[data-theme="dark"] .instructions-note {
    color: #6ee7b7;
}

[data-theme="dark"] .instructions-box code {
    background: #065f46;
    color: #6ee7b7;
}

/* Process Section */
.process-section {
    text-align: center;
    margin: 30px 0 20px 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
}

/* Buttons */
.btn {
    font-family: var(--font-body);
    background: #4b5563;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    margin: 5px;
}

.btn:hover {
    background: #374151;
}

.btn:disabled {
    background: #d1d5db;
    cursor: not-allowed;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    font-weight: 600;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #5a67d8, #6b46c1);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
}

.btn-large {
    padding: 16px 32px;
    font-size: 1.2rem;
    border-radius: 8px;
}

.btn-primary:disabled {
    background: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

[data-theme="dark"] .btn:disabled,
[data-theme="dark"] .btn-primary:disabled {
    background: #374151;
    color: #6b7280;
}

[data-theme="dark"] .btn-secondary:disabled {
    background: #1f2937;
    color: #6b7280;
    border-color: #374151;
}

/* Button loading spinner */
.btn-loading {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.75s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

.btn-secondary {
    background: white;
    color: #667eea;
    border: 2px solid #667eea;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: #667eea;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-secondary:disabled {
    background: #f3f4f6;
    color: #9ca3af;
    border-color: #d1d5db;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Centered action buttons container */
.action-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.action-buttons .btn {
    min-width: 180px;
    padding: 12px 24px;
    font-size: 1rem;
}

/* Pathway Selector */
.pathway-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.pathway-card {
    background: #ffffff;
    border: 2px solid var(--border-color) !important;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

[data-theme="dark"] .pathway-card {
    background: var(--input-bg);
}

.pathway-card:hover {
    border-color: var(--text-secondary);
    background: #f3f4f6;
}

[data-theme="dark"] .pathway-card:hover {
    background: var(--bg-secondary);
}

.pathway-card.active {
    border-color: var(--active-item-bg) !important;
    background: var(--active-item-bg) !important;
    color: var(--active-item-text) !important;
}

.pathway-icon {
    font-size: 1.75rem;
    margin-bottom: 6px;
}

.pathway-card.active .pathway-icon {
    transform: scale(1.1);
    color: #ffffff !important;
}

.pathway-label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.pathway-card.active .pathway-label {
    color: #ffffff !important;
    font-weight: 700 !important;
    /* Bold for active state */
}

.pathway-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.pathway-card.active .pathway-desc {
    color: #ffffff !important;
    opacity: 0.9;
}

/* Pathway Content */
.pathway-content {
    margin-top: 20px;
    position: relative;
}

.pathway-panel {
    display: none;
}

.pathway-panel.active {
    display: block;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pathway-instructions {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    color: #166534;
}

.pathway-instructions p {
    margin-bottom: 8px;
}

.pathway-instructions ol,
.pathway-instructions ul {
    margin-left: 20px;
    margin-bottom: 8px;
}

.pathway-instructions li {
    margin-bottom: 4px;
}

.pathway-instructions .instructions-note {
    margin-top: 10px;
    margin-bottom: 0;
    font-style: italic;
    color: #15803d;
}

[data-theme="dark"] .pathway-instructions {
    background: rgba(6, 78, 59, 0.4);
    border-color: #059669;
    color: #ecfdf5;
}

[data-theme="dark"] .pathway-instructions .instructions-note {
    color: #d1fae5;
}

/* Upload Section (Collapsible) */
.upload-section-collapsible {
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-tertiary);
}

.upload-section-header {
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: var(--text-primary);
    list-style: none;
}

.upload-section-header::-webkit-details-marker {
    display: none;
}

.upload-section-header::before {
    content: '▶';
    font-size: 0.7em;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.upload-section-collapsible[open] .upload-section-header::before {
    transform: rotate(90deg);
}

.upload-section-header:hover {
    background: var(--bg-secondary);
}

.upload-section-icon {
    font-size: 1.1em;
}

.upload-section-title {
    flex: 1;
}

.upload-section-badge {
    padding: 2px 8px;
    background: var(--accent-color);
    color: white;
    border-radius: 10px;
    font-size: 0.8em;
    font-weight: 600;
}

.upload-section-badge:empty {
    display: none;
}

.upload-section-content {
    padding: 16px;
    border-top: 1px solid var(--border-color);
}

.upload-area.compact {
    padding: 20px;
}

.upload-area.compact h3 {
    font-size: 1rem;
    margin: 8px 0 4px;
}

.upload-area.compact p {
    font-size: 0.85rem;
}

.upload-hint {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: center;
}

/* Canvas Section */
.canvas-section {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    overflow: hidden;
}

.canvas-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.canvas-section-icon {
    font-size: 1.3em;
}

.canvas-section-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.canvas-section-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.canvas-section-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.canvas-section .canvas-connection-box {
    border: none;
    box-shadow: none;
    border-radius: 0;
}

/* Enhanced Canvas Connected Status */
.canvas-connected-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.15) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    margin: 8px 0;
}

.canvas-user-avatar-wrapper {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    position: relative;
}

.canvas-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(16, 185, 129, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.canvas-user-avatar-fallback {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(16, 185, 129, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.canvas-user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.canvas-user-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.canvas-connected-label {
    font-size: 0.8rem;
    color: #059669;
    font-weight: 500;
}

[data-theme="dark"] .canvas-connected-label {
    color: #34d399;
}

.canvas-connected-check {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .canvas-connected-status {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.2) 100%);
    border-color: rgba(52, 211, 153, 0.4);
}

[data-theme="dark"] .canvas-user-avatar {
    border-color: rgba(52, 211, 153, 0.6);
}

[data-theme="dark"] .canvas-user-avatar-fallback {
    border-color: rgba(52, 211, 153, 0.6);
}

/* Canvas Match Selector (in student result cards) */
.canvas-match-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    margin-top: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--bg-tertiary);
    flex-wrap: wrap;
}

.canvas-match-selector.matched {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.canvas-match-selector.unmatched {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.canvas-match-selector .match-status-icon {
    font-size: 14px;
}

.canvas-match-selector.matched .match-status-icon {
    color: #10b981;
}

.canvas-match-selector.unmatched .match-status-icon {
    color: #f59e0b;
}

.canvas-match-selector .match-status-text {
    color: var(--text-secondary);
    flex: 1;
    min-width: 120px;
}

.canvas-match-selector .match-change-btn {
    padding: 2px 8px;
    font-size: 11px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.canvas-match-selector .match-change-btn:hover {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

/* Compact style for matched students */
.canvas-match-selector.compact {
    padding: 2px 6px;
    gap: 6px;
}

.canvas-match-selector.compact .match-status-icon {
    font-size: 12px;
}

.canvas-match-selector.compact .match-status-text {
    font-size: 11px;
    min-width: auto;
}

/* Inline edit icon next to student name */
.student-name-edit-icon {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 14px;
    padding: 0 6px;
    opacity: 0.5;
    transition: opacity 0.2s;
    vertical-align: middle;
    margin-left: 4px;
}

.student-name-edit-icon:hover {
    opacity: 1;
    color: var(--accent-color);
}

/* Inline dropdown for student matching */
.canvas-match-dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 8px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.canvas-match-dropdown .canvas-student-select {
    flex: 1;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-width: 150px;
}

.canvas-match-dropdown .match-apply-btn,
.canvas-match-dropdown .match-cancel-btn {
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.canvas-match-dropdown .match-apply-btn {
    background: #10b981;
    color: white;
    border: none;
}

.canvas-match-dropdown .match-apply-btn:hover {
    background: #059669;
}

.canvas-match-dropdown .match-cancel-btn {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.canvas-match-dropdown .match-cancel-btn:hover {
    background: var(--bg-tertiary);
}

/* Legacy selector edit icon */
.canvas-match-selector .match-edit-icon {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.canvas-match-selector .match-edit-icon:hover {
    opacity: 1;
    color: var(--text-primary);
}

.canvas-match-selector .match-dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border-color);
}

.canvas-match-selector .canvas-student-select {
    flex: 1;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-width: 150px;
}

.canvas-match-selector .match-apply-btn,
.canvas-match-selector .match-cancel-btn {
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.canvas-match-selector .match-apply-btn {
    background: #10b981;
    color: white;
    border: none;
}

.canvas-match-selector .match-apply-btn:hover {
    background: #059669;
}

.canvas-match-selector .match-cancel-btn {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.canvas-match-selector .match-cancel-btn:hover {
    background: var(--bg-tertiary);
}

/* Dark theme adjustments */
[data-theme="dark"] .canvas-match-selector.matched {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(52, 211, 153, 0.4);
}

[data-theme="dark"] .canvas-match-selector.unmatched {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(251, 191, 36, 0.4);
}

.canvas-match-selector.no-roster {
    background: rgba(107, 114, 128, 0.1);
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.canvas-match-selector.no-roster .match-status-icon {
    color: #9ca3af;
}

.canvas-match-selector.no-roster .match-status-text {
    font-style: italic;
    color: var(--text-tertiary);
}

[data-theme="dark"] .canvas-match-selector.no-roster {
    background: rgba(107, 114, 128, 0.15);
    border-color: rgba(156, 163, 175, 0.4);
}

/* Canvas Link Panel (for manual upload workflow) - keeping for backward compat */
.canvas-link-panel {
    margin-top: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-tertiary);
}

.canvas-link-panel summary {
    padding: 12px 16px;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.canvas-link-panel summary:hover {
    background: var(--bg-secondary);
}

.canvas-link-panel[open] summary {
    border-bottom: 1px solid var(--border-color);
}

.canvas-link-content {
    padding: 16px;
}

.canvas-link-warning {
    padding: 12px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    color: #92400e;
    font-size: 0.9rem;
}

[data-theme="dark"] .canvas-link-warning {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
    color: #fcd34d;
}

.canvas-link-description {
    margin-bottom: 16px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.canvas-link-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
    margin-bottom: 12px;
}

.canvas-link-status .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #9ca3af;
}

.canvas-link-status.linked .status-dot {
    background: #10b981;
}

.canvas-link-status .status-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.canvas-link-status.linked .status-text {
    color: #059669;
    font-weight: 500;
}

[data-theme="dark"] .canvas-link-status.linked .status-text {
    color: #34d399;
}

/* Upload area */
.upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    background: var(--bg-tertiary);
    transition: all 0.2s ease;
    cursor: pointer;
}

.upload-area:hover,
.upload-area.dragover {
    border-color: var(--text-secondary);
    background: var(--bg-secondary);
}

.upload-area.has-files {
    border-color: #10b981;
    background: #f0fdf4;
}

[data-theme="dark"] .upload-area.has-files {
    background: #064e3b;
    border-color: #10b981;
}

/* Highlight animation for attention */
.upload-area.highlight-attention {
    animation: attention-pulse 0.5s ease-in-out 2;
    border-color: #f59e0b;
    background: #fef3c7;
}

[data-theme="dark"] .upload-area.highlight-attention {
    background: #78350f;
    border-color: #f59e0b;
}

@keyframes attention-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }

    50% {
        transform: scale(1.01);
        box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
    }
}

.upload-icon {
    font-size: 2rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.upload-area.has-files .upload-icon {
    color: #10b981;
}

.file-input {
    display: none;
}

/* Total Points Section */
.total-points-section {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.1);
}

.total-points-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.total-points-input {
    display: flex;
    align-items: center;
    gap: 15px;
}

.total-points-input label {
    font-size: 1.1rem;
    font-weight: 700;
    color: #92400e;
    margin: 0;
}

.total-points-input input {
    width: 80px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    background: var(--input-bg);
    color: var(--text-primary);
}

.total-points-input input:focus {
    outline: none;
    border-color: #d97706;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.points-distribution-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #92400e;
    font-size: 0.9rem;
    font-style: italic;
}

.info-icon {
    font-size: 1.1rem;
    cursor: help;
}

#pointsDistributionText {
    font-weight: 500;
}

/* BLUE criteria sections for Inputs/Settings */
.criteria-section {
    margin-bottom: 25px;
    padding: 0;
    background: #f0f9ff;
    border: 2px solid #60a5fa;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(96, 165, 250, 0.2);
}

[data-theme="dark"] .criteria-section {
    background: rgba(14, 165, 233, 0.1);
    border-color: #0ea5e9;
    box-shadow: 0 1px 3px rgba(14, 165, 233, 0.1);
}

.criteria-section.collapsed {
    background: #f9fafb;
    border-color: #e5e7eb;
    box-shadow: none;
}

[data-theme="dark"] .criteria-section.collapsed {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

.criteria-section .collapsible-header {
    padding: 16px 20px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    transition: all 0.3s ease;
    border-radius: 6px 6px 0 0;
    color: #0c4a6e;
    font-size: 1rem;
    font-weight: 600;
    background: #f0f9ff;
}

[data-theme="dark"] .criteria-section .collapsible-header {
    background: rgba(14, 165, 233, 0.1);
    color: #e0f2fe;
}

.criteria-section.collapsed .collapsible-header {
    color: #6b7280;
    background: transparent;
    border-radius: 6px;
}

[data-theme="dark"] .criteria-section.collapsed .collapsible-header {
    color: var(--text-secondary);
    background: transparent;
}

.criteria-section .collapsible-header:hover {
    background: rgba(96, 165, 250, 0.15);
}

[data-theme="dark"] .criteria-section .collapsible-header:hover {
    background: rgba(14, 165, 233, 0.2);
}

.criteria-section.collapsed .collapsible-header:hover {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .criteria-section.collapsed .collapsible-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Canvas and FERPA sections remain distinct */
.canvas-section,
.ferpa-section {
    margin-bottom: 25px;
    padding: 0;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

[data-theme="dark"] .canvas-section,
[data-theme="dark"] .ferpa-section {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.canvas-section .collapsible-header,
.ferpa-section .collapsible-header {
    padding: 15px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    transition: all 0.3s ease;
    border-radius: 6px 6px 0 0;
    color: #6b7280;
    font-size: 1rem;
    font-weight: 600;
}

[data-theme="dark"] .canvas-section .collapsible-header,
[data-theme="dark"] .ferpa-section .collapsible-header {
    color: var(--text-primary);
}

.collapsed .collapsible-header {
    border-radius: 6px;
}

.collapsible-header:hover {
    background: rgba(0, 0, 0, 0.03);
}

.collapsible-content {
    padding: 15px 20px 20px 20px;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 5000px;
    opacity: 1;
    overflow: hidden;
}

.collapsed .collapsible-content {
    max-height: 0;
    opacity: 0;
    padding: 0 20px;
}

/* Criteria grid & Form Elements */
.criteria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.criteria-item {
    background: var(--bg-tertiary);
    padding: 15px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

/* Section Points Item - Highlighted with yellow background */
.criteria-item.section-points-item {
    background: linear-gradient(135deg, #fef9e7 0%, #fef5cd 100%);
    border: 2px solid #f4d03f;
    box-shadow: 0 2px 4px rgba(244, 208, 63, 0.15);
}

.criteria-item.section-points-item label {
    color: #7d6608;
    font-weight: 600;
    font-size: 0.95rem;
}

.criteria-item label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.criteria-item input[type="text"],
.criteria-item input[type="number"],
.criteria-item input[type="password"],
.criteria-item select {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.9rem;
    background: var(--input-bg);
    color: var(--text-primary);
}

/* Number inputs: hide spinner arrows (sliders provide mouse input) */
.criteria-item input[type="number"],
input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
}

/* Hide spinner arrows in WebKit browsers (Chrome, Safari, Edge) */
.criteria-item input[type="number"]::-webkit-outer-spin-button,
.criteria-item input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.criteria-item input:focus,
.criteria-item select:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

/* ============================================================
   FILE TYPE TILE SELECTOR
   Selectable tiles for file type filtering (replaces checkboxes)
   ============================================================ */

.file-type-selector {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.file-type-selector > label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.file-type-tiles {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.file-type-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 16px;
    min-width: 80px;
    background: var(--color-bg-surface, var(--bg-secondary));
    border: 2px solid var(--color-border-default, var(--border-color));
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        transform 0.1s ease,
        box-shadow 0.15s ease;
}

.file-type-tile:hover {
    background: var(--color-bg-hover, var(--bg-tertiary));
    border-color: var(--color-border-strong, #999);
}

.file-type-tile:active {
    transform: scale(0.97);
}

/* Hide the actual checkbox */
.file-type-tile input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Selected state */
.file-type-tile:has(input:checked) {
    background: var(--color-accent, var(--fh-orange, #c9a55c));
    border-color: var(--color-accent, var(--fh-orange, #c9a55c));
    box-shadow: 0 2px 8px rgba(201, 165, 92, 0.3);
}

.file-type-tile:has(input:checked) .tile-icon,
.file-type-tile:has(input:checked) .tile-label {
    color: var(--color-text-inverse, #1a1614);
}

/* Tile icon (extension or asterisk) */
.tile-icon {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary, var(--text-primary));
    transition: color 0.15s ease;
}

/* Tile label (application name) */
.tile-label {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--color-text-tertiary, var(--text-secondary));
    transition: color 0.15s ease;
}

/* Focus state for accessibility */
.file-type-tile:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-focus-ring, rgba(96, 165, 250, 0.4));
}

/* Dark mode adjustments */
[data-theme="dark"] .file-type-tile:has(input:checked) {
    box-shadow: 0 2px 8px rgba(212, 165, 116, 0.25);
}

[data-theme="dark"] .file-type-tile:has(input:checked) .tile-icon,
[data-theme="dark"] .file-type-tile:has(input:checked) .tile-label {
    color: #1a1614;
}

/* Approved Fonts Textarea - with dark mode support */
.approved-fonts-textarea {
    width: 100%;
    resize: vertical;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
}

.approved-fonts-textarea:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.criteria-item p {
    margin-top: 5px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* NEW: Slider Container with Persistent Label Space */
.slider-container {
    position: relative;
    width: 100%;
    margin-top: 8px;
    height: 40px;
    /* Fixed height to prevent layout shift */
}

/* NEW: Slider Label Pill - Follows thumb position with edge padding */
.slider-label-pill {
    position: absolute;
    top: 24px;
    background: #60a5fa;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    transition: opacity 0.2s ease, left 0.15s ease;
    pointer-events: none;
    white-space: nowrap;
    transform: translateX(-50%);
    opacity: 0;
    z-index: 10;
    min-width: 30px;
    text-align: center;
}

.slider-label-pill.visible {
    opacity: 1;
}

/* FIXED: Color Mode Radio Buttons - Even tighter spacing */
.color-mode-radios {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.radio-option {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 4px;
    transition: background 0.2s;
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
}

.radio-option:hover {
    background: var(--bg-secondary);
}

.radio-custom {
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    position: relative;
    transition: all 0.2s;
    display: inline-block;
    flex-shrink: 0;
}

.radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-option input[type="radio"]:checked+.radio-custom {
    border-color: #60a5fa;
    background: #60a5fa;
}

.radio-option input[type="radio"]:checked+.radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
}

.radio-label {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* Placeholder pills */
.placeholder-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.placeholder-pill:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-secondary);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.placeholder-pill:active {
    transform: translateY(0);
    box-shadow: none;
}

.placeholder-pill.separator-pill {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-secondary);
    min-width: 40px;
    justify-content: center;
}

.placeholder-pill.separator-pill:hover {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Pattern Builder */
.pattern-builder {
    position: relative;
}

.pattern-builder-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 15px;
}

[data-theme="dark"] .pattern-builder-box {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

.pattern-main-input {
    font-family: var(--font-mono);
    font-size: 1rem;
    padding: 12px;
    background: white;
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

[data-theme="dark"] .pattern-main-input {
    background: var(--input-bg);
    color: white;
}

.autofill-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.autofill-box label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: #667eea;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .autofill-box label {
    color: #e0e7ff;
}

/* Placeholder pills dark mode override */
[data-theme="dark"] .placeholder-pill {
    color: white;
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .placeholder-pill:hover {
    background: var(--bg-secondary);
    border-color: var(--text-secondary);
}

.autofill-box input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--input-bg);
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.autofill-box input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.autofill-box input::placeholder {
    color: #cbd5e1;
    font-style: italic;
}

.autofill-hint {
    font-size: 0.65rem;
    color: #9ca3af;
    margin-top: -2px;
}

/* Pattern Preview */
.pattern-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

[data-theme="dark"] .pattern-preview {
    background: rgba(6, 78, 59, 0.4);
    border-color: #059669;
    color: #ecfdf5;
}

.pattern-preview.error {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #fecaca;
}

.preview-label {
    color: #6b7280;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
}

[data-theme="dark"] .preview-label {
    color: #94a3b8;
}

.preview-filename {
    color: #065f46;
    font-weight: 500;
    flex: 1;
}

[data-theme="dark"] .preview-filename {
    color: #ffffff;
}

.pattern-preview.error .preview-filename {
    color: #991b1b;
}

.preview-status {
    color: #10b981;
    font-size: 1rem;
}

.pattern-preview.error .preview-status {
    color: #ef4444;
}

/* Criteria Cubes */
.criteria-cube {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease;
}

.criteria-cube:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
}

/* Compact cube variant */
.criteria-cube.compact .cube-header {
    padding: 8px 12px;
}

.criteria-cube.compact .cube-title {
    font-size: 0.85rem;
}

.criteria-cube.compact .cube-content {
    padding: 12px;
}

.compact-select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.85rem;
    background: var(--input-bg);
    color: var(--text-primary);
}

.grouping-radios {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cube-header {
    background: linear-gradient(135deg, #fde68a 0%, #fef3c7 100%);
    padding: 12px 15px;
    border-bottom: 1px solid #fbbf24;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[data-theme="dark"] .cube-header {
    background: linear-gradient(135deg, rgba(120, 53, 15, 0.4) 0%, rgba(146, 64, 14, 0.4) 100%);
    border-bottom-color: #b45309;
}

.cube-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #92400e;
}

[data-theme="dark"] .cube-title {
    color: #ffffff;
}

.cube-points {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cube-points label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #92400e;
    /* Keep specific color for header contrast */
    margin: 0;
}

[data-theme="dark"] .cube-points label {
    color: #ffffff;
}

.cube-points .points-input {
    width: 50px;
    padding: 4px 6px;
    font-size: 0.9rem;
    border: 1px solid #fbbf24;
    border-radius: 4px;
    background: var(--input-bg);
    text-align: center;
}

[data-theme="dark"] .cube-points .points-input {
    border-color: #b45309;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.3);
}

.cube-content {
    padding: 15px;
}

.cube-content .criteria-item {
    margin-bottom: 12px;
}

.cube-content .criteria-item:last-child {
    margin-bottom: 0;
}

/* AI Criteria Subsection Labels */
.ai-subsection-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

/* AI Caveat Notes */
.ai-caveat-note {
    font-size: 0.75rem;
    color: #d97706;
    background: rgba(251, 191, 36, 0.1);
    padding: 6px 10px;
    border-radius: 4px;
    margin: 0;
    border-left: 3px solid #fbbf24;
}

[data-theme="dark"] .ai-caveat-note {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

/* AI Advanced Section (collapsible) */
.ai-advanced-section {
    margin-top: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
}

.ai-advanced-section summary {
    padding: 12px 15px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
}

.ai-advanced-section summary:hover {
    color: var(--text-primary);
}

.ai-advanced-section[open] summary {
    border-bottom: 1px solid var(--border-color);
}

.ai-advanced-section > div {
    padding: 15px;
}

/* Layer rows container */
.layer-rows-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.layer-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.layer-row:hover {
    border-color: #60a5fa;
}

.layer-row-number {
    font-weight: 600;
    color: #60a5fa;
    font-size: 0.9rem;
    min-width: 24px;
}

.layer-row-name {
    flex: 1;
}

.layer-row-name input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.layer-row-name input:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.layer-row-content select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    min-width: 140px;
}

.layer-row-content select:focus {
    outline: none;
    border-color: #60a5fa;
}

.layer-row-delete {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 1.1rem;
    transition: all 0.2s ease;
}

.layer-row-delete:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.layer-rows-empty {
    text-align: center;
    padding: 20px;
    color: #9ca3af;
    font-size: 0.9rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px dashed var(--border-color);
}

/* Value sliders */
.value-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    outline: none;
    transition: all 0.3s ease;
}

/* Sliders with notches get a different background to indicate snapping */
.value-slider.has-notches {
    background: linear-gradient(to right, #e5e7eb 0%, #e5e7eb 100%);
}

.value-slider:hover {
    background: var(--text-secondary);
}

.value-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #60a5fa;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.value-slider::-webkit-slider-thumb:hover {
    background: #3b82f6;
    transform: scale(1.1);
}

.value-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #60a5fa;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.value-slider::-moz-range-thumb:hover {
    background: #3b82f6;
    transform: scale(1.1);
}

/* File list */
.file-list {
    margin-top: 15px;
    padding: 15px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.file-list-details {
    margin: 0;
}

.file-list summary {
    list-style: none;
    cursor: pointer;
    padding: 0;
}

.file-list summary::-webkit-details-marker {
    display: none;
}

.file-list-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--text-primary);
}

.file-list-summary-meta {
    margin-left: auto;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.file-list-caret {
    font-size: 0.85rem;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.file-list-details[open] .file-list-caret {
    transform: rotate(180deg);
}

.file-items {
    margin-top: 12px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 6px;
}

.file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

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

.file-icon {
    color: #667eea;
    font-size: 1.2rem;
}

.file-size-pill {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Processing indicator */
.processing-indicator {
    text-align: center;
    padding: 20px 40px;
    color: #667eea;
    font-weight: 500;
}

.progress-container {
    max-width: 600px;
    margin: 0 auto;
}

.progress-bar {
    width: 100%;
    height: 44px;
    background: var(--bg-secondary);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 15px;
    position: relative;
    border: 1px solid var(--border-color);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 22px;
    transition: width 0.3s ease;
    width: 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 2rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

/* Animated stripes overlay - requires .progress-animated class */
.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(-45deg,
            rgba(255, 255, 255, 0.15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.15) 75%,
            transparent 75%,
            transparent);
    background-size: 30px 30px;
    /* Animation controlled by .progress-animated class from progress-utils.css */
    animation: none;
}

/* Apply animation when .progress-animated is added */
.progress-fill.progress-animated::after {
    animation: progressStripes 1s linear infinite;
}

@keyframes progressStripes {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 30px 0;
    }
}

/* Stop animation when complete (backward compatibility + new class) */
.progress-fill.complete::after,
.progress-fill.progress-complete::after {
    animation: none;
    background: none;
}

.progress-percent {
    min-width: 60px;
    text-align: center;
    position: relative;
    z-index: 1;
}

#progressText {
    font-size: 1rem;
    color: var(--text-primary);
    margin: 0;
}

.progress-details {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 8px;
}

.progress-phase {
    font-weight: 500;
    color: #667eea;
}

.spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

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

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

/* Results */
.summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

/* Ensure all 6 cards fit on one row on larger screens */
@media (min-width: 1200px) {
    .summary-stats {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* 3 cards per row on medium screens */
@media (min-width: 768px) and (max-width: 1199px) {
    .summary-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 2 cards per row on smaller screens */
@media (max-width: 767px) {
    .summary-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-card {
    background: var(--bg-tertiary);
    padding: 20px 16px;
    border-radius: 12px;
    text-align: center;
    border: 2px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.stat-card.action-card {
    cursor: pointer;
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    border-color: var(--border-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card.action-card:hover {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-color: #667eea;
    box-shadow: 0 12px 30px rgba(102, 126, 234, 0.25);
    transform: translateY(-4px);
}

.stat-card.action-card:hover::before {
    transform: scaleX(1);
}

.stat-card.action-card:hover .stat-number {
    color: white;
}

.stat-card.action-card:hover .stat-label {
    color: white;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #667eea;
    margin-bottom: 4px;
    transition: color 0.3s ease;
    line-height: 1;
}

/* Emoji icons in action cards */
.stat-card.action-card .stat-number {
    font-size: 2.5rem;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.3s ease;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.stat-sublabel {
    color: #b0b8c4;
    font-size: 0.75rem;
    margin-top: 4px;
    transition: color 0.3s ease;
}

.stat-card.action-card:hover .stat-sublabel {
    color: rgba(255, 255, 255, 0.8);
}

/* Reprocess button - subtle highlight */
.stat-card.reprocess-card {
    border: 1px dashed var(--border-color);
    background: var(--bg-tertiary);
}

.stat-card.reprocess-card:hover {
    border-style: solid;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
}

/* New card-based results layout */
.results-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.result-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.result-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Header row - filename and score */
.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.result-header-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.result-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.student-name {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.submitted-filename {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.file-download-link {
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.2s;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.file-download-link .download-icon {
    font-size: 0.85em;
    opacity: 0.8;
}

.file-download-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

.file-download-link:hover .download-icon {
    opacity: 1;
}

[data-theme="dark"] .file-download-link {
    color: #60a5fa;
}

[data-theme="dark"] .file-download-link:hover {
    color: #93c5fd;
}

.file-size-badge {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    font-weight: 500;
}

[data-theme="dark"] .file-size-badge {
    background: rgba(255, 255, 255, 0.1);
}

.filename {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    word-break: break-word;
    overflow-wrap: break-word;
}

.late-badge {
    color: #dc2626;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 4px 10px;
    background: #fee2e2;
    border-radius: 4px;
    margin-left: 32px;
    white-space: nowrap;
}

/* Two-column body */
.result-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
}

.result-column {
    min-width: 0;
    /* Prevent overflow */
}

.column-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.feedback-column {
    padding-right: 20px;
}

.feedback-column ul {
    font-size: 0.9rem;
}

.feedback-column li {
    font-size: 0.9rem;
}

.details-column {
    padding-left: 20px;
}

/* Score styling */
.score-prominent {
    text-align: right;
    padding: 10px 0;
}

.score-percentage {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.score-details {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Score colors */
.score-100 {
    color: #059669;
}

.score-90 {
    color: #10b981;
}

.score-80 {
    color: #34d399;
}

.score-70 {
    color: #fbbf24;
}

.score-60 {
    color: #f59e0b;
}

.score-50 {
    color: #f97316;
}

.score-40 {
    color: #ef4444;
}

.score-30 {
    color: #dc2626;
}

.score-20 {
    color: #b91c1c;
}

.score-10 {
    color: #991b1b;
}

.score-0 {
    color: #7f1d1d;
}

.score-na {
    color: var(--text-secondary);
    font-size: 1.8rem;
    font-style: italic;
}

/* Detail display */
.details-cell {
    width: 100%;
}

.detail-row {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
    padding: 3px 8px;
    min-height: 24px;
    width: 100%;
}

.detail-label {
    color: var(--text-secondary);
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 20px;
}

.detail-value {
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    text-align: right;
    font-size: 0.9rem;
}

/* Special styling for "No text layers" message */
.detail-value span[style*="italic"] {
    font-size: 0.85rem;
}

/* Failed criteria highlighting */
.details-cell .detail-row:has(.status-fail) {
    background: rgba(254, 242, 242, 0.5);
    padding: 3px 8px;
    border-radius: 3px;
    margin: 2px 0;
}

/* Partial credit highlighting */
.details-cell .detail-row:has(.status-partial) {
    background: rgba(254, 243, 199, 0.5);
    padding: 3px 8px;
    border-radius: 3px;
    margin: 2px 0;
}

.details-cell .detail-row:has(.status-warning) {
    background: #fffbeb;
    padding: 3px 8px;
    border-radius: 3px;
    margin: 2px 0;
}

[data-theme="dark"] .details-cell .detail-row:has(.status-warning) {
    background: rgba(120, 53, 15, 0.4);
    color: #fcd34d;
}

/* Dark mode: Failed criteria highlighting */
[data-theme="dark"] .details-cell .detail-row:has(.status-fail) {
    background: rgba(153, 27, 27, 0.35);
    color: var(--error-color, #f87171);
}

/* Dark mode: Partial credit highlighting */
[data-theme="dark"] .details-cell .detail-row:has(.status-partial) {
    background: rgba(120, 53, 15, 0.3);
    color: var(--warning-color, #fbbf24);
}

/* Detail divider for separating sections */
.detail-divider {
    height: 1px;
    background: var(--border-color);
    margin: 8px 0;
}

.status-indicator {
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 0.9rem;
}

.status-pass {
    color: #10b981;
}

.status-fail {
    color: #ef4444;
}

.status-partial {
    color: #f59e0b;
}

.partial-text {
    color: #d97706;
}

.partial-credit-row {
    border-left: 3px solid #fbbf24;
}

.status-indicator:hover {
    background: var(--bg-secondary);
    transform: scale(1.1);
}

/* Compliance checklist (for Shapes criteria) */
.compliance-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    padding-left: 4px;
}

.compliance-item {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.compliance-item.compliance-pass {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.compliance-item.compliance-fail {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .compliance-item.compliance-pass {
    background: rgba(16, 185, 129, 0.25);
    color: #34d399;
}

[data-theme="dark"] .compliance-item.compliance-fail {
    background: rgba(239, 68, 68, 0.25);
    color: #f87171;
}

/* PDF Preview styles */
.pdf-preview-container {
    position: relative;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 6px;
    overflow: hidden;
}

.pdf-preview-canvas {
    max-width: 100%;
    max-height: 120px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: white;
}

.pdf-preview-canvas:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pdf-preview-loading {
    position: absolute;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    text-align: center;
}

.pdf-preview-loading.error {
    color: var(--error-color, #ef4444);
}

.pdf-preview-container .btn-expand-preview {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pdf-preview-container:hover .btn-expand-preview {
    opacity: 1;
}

/* PDF Modal styles */
.pdf-preview-modal .pdf-modal-content {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary, #fff);
    border-radius: 8px;
    overflow: hidden;
}

.pdf-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary, #f3f4f6);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.pdf-page-info {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #111827);
}

.pdf-modal-controls {
    display: flex;
    gap: 8px;
}

.pdf-nav-btn {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.pdf-nav-btn:hover {
    background: var(--bg-tertiary, #e5e7eb);
}

.pdf-modal-canvas {
    max-width: 100%;
    max-height: calc(90vh - 60px);
    margin: 16px;
    align-self: center;
}

[data-theme="dark"] .pdf-preview-container {
    background: var(--bg-secondary, #1f2937);
}

[data-theme="dark"] .pdf-modal-header {
    background: var(--bg-secondary, #1f2937);
    border-color: var(--border-color, #374151);
}

[data-theme="dark"] .pdf-nav-btn {
    background: var(--bg-tertiary, #374151);
    border-color: var(--border-color, #4b5563);
    color: var(--text-primary, #f3f4f6);
}

[data-theme="dark"] .pdf-nav-btn:hover {
    background: var(--bg-primary, #111827);
}

/* Download buttons */
.download-results {
    background: #059669;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 5px;
}

.download-results:hover {
    background: #047857;
}

.download-canvas {
    background: #e11d48;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 5px;
}

.download-canvas:hover {
    background: #be123c;
}

.download-feedback {
    background: #7c3aed;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 5px;
}

.download-feedback:hover {
    background: #6d28d9;
}

/* Toast notifications */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.toast {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 8px;
    box-shadow: var(--card-shadow);
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 400px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast.success {
    border-left: 4px solid #10b981;
}

.toast.error {
    border-left: 4px solid #ef4444;
}

.toast.warning {
    border-left: 4px solid #f59e0b;
}

/* Enhanced error details & Highlighting */
.error-row,
.warning-row {
    background: #fef2f2;
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.warning-row {
    background: #fffbeb;
}

[data-theme="dark"] .error-row {
    background: rgba(153, 27, 27, 0.35);
}

[data-theme="dark"] .warning-row {
    background: rgba(120, 53, 15, 0.4);
}

.error-text {
    color: #dc2626;
    font-weight: 500;
}

[data-theme="dark"] .error-text {
    color: #f87171;
}

.warning-text {
    color: #d97706;
    font-weight: 500;
}

[data-theme="dark"] .warning-text {
    color: #fcd34d;
}

.expected {
    font-size: 0.8rem;
    color: #6b7280;
    font-style: italic;
    margin-left: 4px;
}

/* Thumbnail preview in results table */
.file-info-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filename {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.95rem;
}

/* Fonts section styling */
#fontsSection textarea {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
}

#fontsSection textarea:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

/* Stat card tooltip for "Below 70%" explanation */
.stat-card[title] {
    cursor: help;
    position: relative;
}

.stat-card[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #374151;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
}

/* Progress bar styles defined above in .progress-container section */

#progressText {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 10px 0;
}

#progressDetails {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 10px;
}

/* Optimized processing indicator */
.processing-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin: 20px 0;
    padding: 15px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.processing-stat {
    text-align: center;
}

.processing-stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #667eea;
}

.processing-stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
}



/* Canvas integration features */
/* Canvas info display */
.canvas-info {
    display: inline-block;
    background: #dbeafe;
    color: #1e40af;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 8px;
}

/* Canvas user ID display */
.canvas-user-id {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 2px 4px;
    border-radius: 2px;
}

/* Enhanced file display for Canvas files */
.file-info-cell.canvas-file {
    position: relative;
}

.file-info-cell.canvas-file::before {
    content: '📚';
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
}

/* Late badge */
.late-badge {
    display: inline-block;
    background: var(--warning-color);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 32px;
    letter-spacing: 0.5px;
}

/* Canvas detected message */
.canvas-detected {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.canvas-detected::before {
    content: '✅';
    font-size: 1.2rem;
}

/* Summary card for Canvas data */
.canvas-summary {
    background: #f0f9ff;
    border: 1px solid #7dd3fc;
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
}

.canvas-summary-title {
    color: #0369a1;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.canvas-summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.canvas-stat {
    text-align: center;
    padding: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.canvas-stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0284c7;
}

.canvas-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Detailed Layer Checklist */
.check-items-list {
    margin-top: 8px;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--border-color);
    padding: 12px;
    border-radius: 4px;
    background: var(--bg-secondary);
}

/* Two-column layout for layer structure items */
.check-items-list.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.item-status {
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
}

.item-name {
    color: var(--text-secondary);
}

.item-name.found {
    color: #059669;
    font-weight: 500;
}

.item-name.missing {
    color: #dc2626;
    text-decoration: line-through;
    opacity: 0.8;
}

/* ============================================================
   HTML Result Cards - Category-based Details
   ============================================================ */

/* HTML result card variant */
.result-card.html-result {
    border-left: 3px solid var(--accent-primary, #3b82f6);
}

/* HTML preview placeholder */
.html-preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 150px;
    background: var(--bg-secondary);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    color: var(--text-muted);
    gap: 8px;
}

.html-preview-placeholder .preview-icon {
    font-size: 2rem;
    opacity: 0.5;
}

.html-preview-placeholder .preview-text {
    font-size: 0.85rem;
    font-weight: 500;
}

/* HTML details list container */
.html-details-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Category details accordion */
.category-details {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-secondary);
}

.category-details summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    background: var(--bg-tertiary);
    border-bottom: 1px solid transparent;
    transition: background 0.2s;
    list-style: none;
}

.category-details summary::-webkit-details-marker {
    display: none;
}

.category-details[open] summary {
    border-bottom-color: var(--border-color);
}

.category-details summary:hover {
    background: var(--bg-primary);
}

.category-icon {
    font-size: 1rem;
}

.category-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    flex: 1;
}

.category-score {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.category-status {
    font-size: 0.9rem;
    width: 20px;
    text-align: center;
}

.category-status.status-pass {
    color: #059669;
}

.category-status.status-partial {
    color: #f59e0b;
}

.category-status.status-fail {
    color: #dc2626;
}

/* Check items within category */
.category-details .check-items-list {
    margin: 0;
    padding: 8px 12px;
    border: none;
    border-radius: 0;
    background: transparent;
}

.category-details .check-item {
    padding: 6px 8px;
    border-radius: 4px;
    margin-bottom: 4px;
}

.category-details .check-item.passed {
    background: rgba(5, 150, 105, 0.08);
}

.category-details .check-item.failed {
    background: rgba(220, 38, 38, 0.08);
}

.category-details .item-points {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Sub-items (for items like found elements) */
.check-subitems {
    margin-left: 24px;
    margin-top: 4px;
    padding-left: 8px;
    border-left: 2px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.check-subitem {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    padding: 2px 6px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.subitem-status {
    font-size: 0.7rem;
}

.subitem-name.found {
    color: #059669;
}

.subitem-name.missing {
    color: #dc2626;
    text-decoration: line-through;
    opacity: 0.7;
}

/* Dark mode adjustments */
[data-theme="dark"] .category-details .check-item.passed {
    background: rgba(5, 150, 105, 0.15);
}

[data-theme="dark"] .category-details .check-item.failed {
    background: rgba(220, 38, 38, 0.15);
}

/* ============================================================
   HTML Preview - Thumbnail & Modal
   ============================================================ */

/* Thumbnail preview (in result card) */
.html-preview-thumbnail {
    position: relative;
    height: 150px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.html-preview-thumbnail:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.html-preview-thumbnail:hover .preview-expand-hint {
    opacity: 1;
}

.preview-thumbnail-frame {
    width: 400%;
    height: 400%;
    border: none;
    transform: scale(0.25);
    transform-origin: top left;
    pointer-events: none;
    background: #fff;
}

.preview-expand-hint {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.preview-page-indicator {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Preview unavailable state */
.preview-unavailable {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 150px;
    background: var(--bg-secondary);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    color: var(--text-muted);
    gap: 8px;
}

.preview-unavailable .unavailable-icon {
    font-size: 2rem;
    opacity: 0.4;
}

.preview-unavailable .unavailable-text {
    font-size: 0.8rem;
}

.preview-unavailable .unavailable-subtext {
    font-size: 0.7rem;
    opacity: 0.6;
}

.preview-unavailable.large-file {
    border-color: var(--warning-color, #f0ad4e);
    border-style: solid;
}

/* ============================================================
   HTML Preview Modal
   ============================================================ */

.html-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.html-preview-modal[aria-hidden="false"] {
    display: flex;
}

.preview-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

.preview-modal-container {
    position: relative;
    width: 95vw;
    height: 90vh;
    max-width: 1400px;
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalSlideIn 0.25s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal header */
.preview-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    gap: 16px;
}

.preview-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.preview-modal-icon {
    font-size: 1.25rem;
}

.preview-modal-filename {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.preview-modal-student {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding-left: 10px;
    border-left: 1px solid var(--border-color);
    margin-left: 10px;
}

/* Viewport controls */
.preview-viewport-controls {
    display: flex;
    gap: 4px;
    background: var(--bg-tertiary);
    padding: 4px;
    border-radius: 8px;
}

.viewport-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.85rem;
}

.viewport-btn:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.viewport-btn.active {
    background: var(--accent-primary);
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.viewport-icon {
    font-size: 1rem;
}

.viewport-label {
    font-weight: 500;
}

/* Close button - scoped to HTML preview modal to avoid conflicts */
.html-preview-modal .preview-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.15s;
    position: static; /* Override any absolute positioning from other modals */
}

.html-preview-modal .preview-modal-close:hover {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.3);
    color: #dc2626;
}

/* Modal body - preview frame */
.preview-modal-body {
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 20px;
    background: var(--bg-tertiary);
    overflow: hidden;
    min-height: 0;
}

.preview-frame-wrapper {
    width: 100%;
    max-width: 768px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.preview-frame {
    width: 100%;
    flex: 1;
    border: none;
    background: #fff;
}

.preview-frame-wrapper[data-viewport="mobile"] {
    max-width: 375px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.preview-frame-wrapper[data-viewport="tablet"] {
    max-width: 768px;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.25);
}

.preview-frame-wrapper[data-viewport="desktop"] {
    max-width: 1920px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Modal footer - page tabs */
.preview-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    min-height: 48px;
}

.preview-page-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    flex: 1;
}

.preview-page-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-family: var(--font-mono);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.preview-page-tab:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.preview-page-tab.active {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}

.preview-page-tab .page-icon {
    font-size: 0.9rem;
}

.preview-meta {
    display: flex;
    gap: 8px;
    margin-left: 16px;
}

.preview-responsive-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.preview-responsive-badge.no-responsive {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

/* Hide footer if no pages */
.preview-modal-footer:empty,
.preview-modal-footer:has(.preview-page-tabs:empty):has(.preview-meta:empty) {
    display: none;
}

/* Dark mode adjustments for preview */
[data-theme="dark"] .html-preview-thumbnail {
    background: #1e1e1e;
    border-color: var(--border-color);
}

[data-theme="dark"] .preview-thumbnail-frame {
    background: #1e1e1e;
}

[data-theme="dark"] .preview-frame-wrapper {
    background: #1e1e1e;
}

[data-theme="dark"] .preview-frame {
    background: #1e1e1e;
}

.detail-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-direction: row;
}

/* Student grouping cards */
.student-card {
    margin-bottom: 32px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-tertiary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.student-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
    border-radius: 8px 8px 0 0;
}

.student-header-left h3 {
    margin: 0 0 6px 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.student-header-left .submission-count {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.student-header-left .submission-count.has-duplicates {
    color: #b45309;
}

.duplicate-badge {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
}

.student-header-right {
    text-align: right;
}

/* Score Display and Override */
.score-display {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background-color 0.2s;
    position: relative;
}

.score-display:hover {
    background-color: rgba(59, 130, 246, 0.08);
}

.score-edit-btn {
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0;
    transition: opacity 0.2s;
    padding: 4px;
}

.score-display:hover .score-edit-btn {
    opacity: 0.6;
}

.score-edit-btn:hover {
    opacity: 1 !important;
}

.score-override-form {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f0f9ff;
    padding: 8px 12px;
    border-radius: 8px;
    border: 2px solid #3b82f6;
}

.score-override-input {
    width: 70px;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: right;
    background: var(--input-bg);
    color: var(--text-primary);
}

.score-override-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.score-override-max {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.score-override-save,
.score-override-cancel {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.score-override-save {
    background: #10b981;
    color: white;
}

.score-override-save:hover {
    background: #059669;
}

.score-override-cancel {
    background: #ef4444;
    color: white;
}

.score-override-cancel:hover {
    background: #dc2626;
}

.score-override-indicator,
.adjustment-indicator {
    font-size: 0.7rem;
    color: #3b82f6;
    font-weight: 600;
    margin-left: 4px;
}

/* Grade Adjustment Form */
.grade-adjustment-form {
    display: none;
    flex-direction: column;
    gap: 10px;
    background: #f0f9ff;
    padding: 12px 16px;
    border-radius: 8px;
    border: 2px solid #3b82f6;
    min-width: 280px;
}

.adjustment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.adjustment-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.adjustment-buttons {
    display: flex;
    gap: 6px;
}

.adjustment-save,
.adjustment-cancel {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.adjustment-save {
    background: #10b981;
    color: white;
}

.adjustment-save:hover {
    background: #059669;
}

.adjustment-cancel {
    background: #ef4444;
    color: white;
}

.adjustment-cancel:hover {
    background: #dc2626;
}

.adjustment-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.adjustment-min,
.adjustment-max {
    font-size: 0.75rem;
    color: var(--text-secondary);
    min-width: 35px;
    text-align: center;
}

.adjustment-slider {
    flex: 1;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, #ef4444 0%, #ef4444 50%, #10b981 50%, #10b981 100%);
    border-radius: 4px;
    cursor: pointer;
}

.adjustment-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3b82f6;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    cursor: pointer;
}

.adjustment-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3b82f6;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    cursor: pointer;
}

.adjustment-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 6px;
    background: rgba(255,255,255,0.7);
    border-radius: 4px;
}

.adjustment-value {
    color: var(--text-secondary);
    min-width: 50px;
    text-align: right;
}

.adjustment-value.positive {
    color: #10b981;
}

.adjustment-value.negative {
    color: #ef4444;
}

.adjustment-arrow {
    color: var(--text-secondary);
}

.adjustment-result {
    color: var(--text-primary);
    min-width: 60px;
}

.adjustment-rationale {
    font-size: 0.85rem;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    resize: vertical;
    min-height: 50px;
}

.adjustment-rationale:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.adjustment-rationale::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Grade Adjustment Form - Dark Mode */
[data-theme="dark"] .grade-adjustment-form {
    background: #1e293b;
    border-color: #3b82f6;
}

[data-theme="dark"] .adjustment-preview {
    background: rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .adjustment-rationale {
    background: #0f172a;
    border-color: #334155;
}

/* Adjustment Reason Presets */
.adjustment-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

.adjustment-preset-btn {
    padding: 4px 10px;
    font-size: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.15s ease;
}

.adjustment-preset-btn:hover {
    background: var(--bg-primary);
    border-color: #3b82f6;
    color: #3b82f6;
}

.adjustment-preset-btn.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

[data-theme="dark"] .adjustment-preset-btn {
    background: #334155;
    border-color: #475569;
}

[data-theme="dark"] .adjustment-preset-btn:hover {
    background: #1e293b;
}

.student-files {
    padding: 0;
}

.student-files .result-card {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border-color);
    margin: 0;
    box-shadow: none;
}

.student-files .result-card:last-child {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}

/* Student Feedback Section */
.student-feedback-section {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.feedback-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.feedback-header .column-title {
    margin: 0;
}

.feedback-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.feedback-edited-badge {
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
}

.btn-reset-feedback {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-reset-feedback:hover:not(:disabled) {
    background: var(--bg-secondary);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.btn-reset-feedback:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.student-feedback-textarea {
    width: 100%;
    min-height: 100px;
    max-height: 300px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: var(--input-bg);
    color: var(--text-primary);
}

.student-feedback-textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.student-feedback-textarea.is-edited {
    border-color: #3b82f6;
    background: #f0f7ff;
}

/* Feedback Score Summary */
.feedback-score-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 0.9rem;
}

.feedback-score-summary .score-line {
    font-weight: 600;
    color: var(--text-primary);
}

.feedback-score-summary .submissions-line {
    color: var(--text-secondary);
}

.feedback-score-summary .partial-warning {
    color: #b45309;
    font-style: italic;
    flex-basis: 100%;
}

/* Additional Notes Section */
.additional-notes-section {
    margin-bottom: 16px;
}

.additional-notes-textarea {
    width: 100%;
    min-height: 60px;
    max-height: 150px;
    padding: 10px 12px;
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
    background: var(--input-bg);
    color: var(--text-primary);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.additional-notes-textarea:focus {
    outline: none;
    border-color: #667eea;
    border-style: solid;
    background: var(--bg-primary);
}

.additional-notes-textarea.has-content {
    border-style: solid;
    border-color: #a5b4fc;
    background: #f5f7ff;
}

[data-theme="dark"] .additional-notes-textarea.has-content {
    background: rgba(99, 102, 241, 0.1);
    border-color: #6366f1;
}

[data-theme="dark"] .additional-notes-textarea:focus {
    background: var(--input-bg);
}

.notes-badge {
    background: #e0e7ff;
    color: #4338ca;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
}

[data-theme="dark"] .notes-badge {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

/* File Feedback Section (assembled) */
.file-feedback-section {
    margin-bottom: 8px;
}

.file-feedback-assembled-textarea {
    width: 100%;
    min-height: 80px;
    max-height: 200px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
    background: var(--input-bg);
    color: var(--text-primary);
}


/* Three-Column Result Body */
.result-body.three-column {
    display: grid;
    grid-template-columns: 150px 1fr 1.2fr;
    gap: 16px;
    padding: 16px;
}

/* Preview Column */
.preview-column {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    transition: flex 0.3s ease, width 0.3s ease, min-width 0.3s ease;
}

/* Collapsed preview column */
.preview-column.collapsed {
    flex: 0 0 40px;
    min-width: 40px;
    max-width: 40px;
}

.preview-column.collapsed .file-preview-container > *:not(.preview-collapse-btn) {
    display: none;
}

.file-preview-container {
    position: relative;
    width: 100%;
}

/* Preview collapse button */
.preview-collapse-btn {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 10;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 10px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-preview-container:hover .preview-collapse-btn,
.preview-column.collapsed .preview-collapse-btn {
    opacity: 1;
}

.preview-collapse-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

.preview-column.collapsed .preview-collapse-btn {
    position: static;
    margin: 8px auto;
    background: var(--color-primary, #3b82f6);
}

.file-preview-thumbnail {
    width: 100%;
    max-height: 120px;
    object-fit: contain;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.file-preview-thumbnail:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.file-preview-placeholder {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* PDF Preview Skeleton Loading */
.pdf-preview-skeleton {
    width: 100%;
    height: 120px;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary, #e5e7eb) 100%);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.pdf-preview-skeleton .skeleton-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.pdf-preview-skeleton .skeleton-icon {
    font-size: 2rem;
    opacity: 0.4;
    z-index: 1;
}

/* No Preview Placeholder */
.no-preview-placeholder {
    width: 100%;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    gap: 4px;
}

.no-preview-placeholder .no-preview-icon {
    font-size: 1.5rem;
    opacity: 0.5;
}

.no-preview-placeholder .no-preview-text {
    font-size: 0.7rem;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Dark mode adjustments for skeleton */
[data-theme="dark"] .pdf-preview-skeleton {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, #374151 100%);
}

[data-theme="dark"] .pdf-preview-skeleton .skeleton-shimmer {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
}

.btn-expand-preview {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    font-size: 0.9rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.file-preview-container:hover .btn-expand-preview {
    opacity: 1;
}

.btn-expand-preview:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Per-file Feedback Textarea */
.file-feedback-wrapper {
    position: relative;
}

.file-feedback-textarea {
    width: 100%;
    min-height: 200px;
    max-height: 400px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    background: var(--input-bg);
    color: var(--text-primary);
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.file-feedback-textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.file-feedback-textarea.is-edited {
    border-color: #3b82f6;
    background: #f0f7ff;
}

.file-edited-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 0.65rem;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Preview Modal */
.preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 40px;
}

.preview-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.preview-modal-content img {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.preview-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 8px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.preview-modal-close:hover {
    opacity: 1;
}

/* Grading Details Collapsible */
.student-files-details {
    border-top: 1px solid var(--border-color);
}

.student-files-details[open] {
    border-top: none;
}

.files-summary {
    padding: 12px 24px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.files-summary::-webkit-details-marker {
    display: none;
}

/* Disclosure button - a visible clickable-looking element */
.files-summary::before {
    content: '▸';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.student-files-details[open] .files-summary::before {
    content: '▾';
    background: #eff6ff;
    border-color: #3b82f6;
    color: #3b82f6;
}

.files-summary:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.files-summary:hover::before {
    background: var(--bg-primary);
    border-color: #3b82f6;
    color: #3b82f6;
}

.student-files-details[open] .files-summary {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .student-files-details[open] .files-summary::before {
    background: rgba(59, 130, 246, 0.15);
}

/* Canvas Download Section */
.canvas-download-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.canvas-download-section h3 {
    margin: 0 0 16px 0;
    font-size: 1.1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.canvas-form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.canvas-form-row input,
.canvas-form-row select {
    flex: 1;
    min-width: 200px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--input-bg);
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.canvas-form-row input:focus,
.canvas-form-row select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.canvas-form-row input[type="password"] {
    font-family: var(--font-mono);
}

.canvas-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.canvas-btn-primary {
    background: #3b82f6;
    color: white;
}

.canvas-btn-primary:hover:not(:disabled) {
    background: #2563eb;
}

.canvas-btn-success {
    background: #10b981;
    color: white;
}

.canvas-btn-success:hover:not(:disabled) {
    background: #059669;
}

.canvas-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.canvas-status {
    font-size: 0.9rem;
    padding: 8px 0;
    min-height: 32px;
}

.canvas-status.success {
    color: #059669;
}

.canvas-status.error {
    color: #dc2626;
}

.canvas-selection-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.canvas-selection-row .canvas-select-group {
    flex: 1;
    min-width: 200px;
}

.canvas-select-group label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 500;
}

.canvas-select-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--input-bg);
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.canvas-select-group select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

#canvasDownloadStatus {
    margin-top: 12px;
}

/* Enhanced Download Progress Bar */
.download-progress-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}

.download-progress-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}

.download-progress-percent {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e40af;
    line-height: 1;
}

.download-progress-status {
    font-size: 1rem;
    color: var(--text-secondary);
}

.download-progress-bar-wrapper {
    width: 100%;
    height: 12px;
    background: var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 12px;
}

.download-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    /* No border-radius here - wrapper clips with overflow:hidden */
    transition: width 0.3s ease;
}

/* Indeterminate progress bar (barberpole animation) */
.download-progress-bar.indeterminate {
    background: linear-gradient(
        -45deg,
        #3b82f6 25%,
        #60a5fa 25%,
        #60a5fa 50%,
        #3b82f6 50%,
        #3b82f6 75%,
        #60a5fa 75%,
        #60a5fa
    );
    background-size: 40px 40px;
    animation: barberpole 1s linear infinite;
}

@keyframes barberpole {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 40px 0;
    }
}

/* Download Complete Message */
.download-complete-message {
    background: #dcfce7;
    padding: 16px;
    border-radius: 8px;
    margin-top: 10px;
    border: 1px solid #86efac;
}

.download-complete-title {
    margin: 0 0 8px 0;
    color: #166534;
    font-size: 1.1rem;
}

.download-complete-list {
    margin: 0 0 12px 0;
    padding-left: 20px;
    color: #166534;
}

.download-complete-list li {
    margin-bottom: 4px;
}

.download-complete-hint {
    margin: 0;
    font-size: 0.9rem;
    color: #166534;
}

/* Dark mode for download complete */
[data-theme="dark"] .download-complete-message {
    background: #064e3b;
    border-color: #10b981;
}

[data-theme="dark"] .download-complete-title,
[data-theme="dark"] .download-complete-list,
[data-theme="dark"] .download-complete-hint {
    color: #a7f3d0;
}

.download-progress-details {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.download-progress-details span {
    background: var(--bg-tertiary);
    padding: 4px 10px;
    border-radius: 4px;
}

/* Grading Progress Bar Enhancement */
.grading-progress-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.grading-progress-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}

.grading-progress-percent {
    font-size: 2.5rem;
    font-weight: 700;
    color: #059669;
    line-height: 1;
}

.grading-progress-status {
    font-size: 1rem;
    color: var(--text-secondary);
}

.grading-progress-bar-wrapper {
    width: 100%;
    height: 12px;
    background: var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 12px;
}

.grading-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 6px;
    transition: width 0.3s ease;
}

.grading-progress-details {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.875rem;
    color: #64748b;
}

.grading-progress-details span {
    background: var(--bg-tertiary);
    padding: 4px 10px;
    border-radius: 4px;
}

/* Canvas download panel collapsible behavior */
.canvas-download-panel {
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.canvas-download-panel .collapsible-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    cursor: pointer;
    margin: 0;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

.canvas-download-panel .collapsible-header:hover {
    background: var(--bg-tertiary);
}

.canvas-download-panel .collapsible-header .caret {
    font-size: 0.8rem;
    transition: transform 0.2s;
}

.canvas-download-panel.collapsed .collapsible-header .caret {
    transform: rotate(-90deg);
}

.canvas-download-panel .collapsible-content {
    padding: 20px;
    transition: max-height 0.3s ease;
}

.canvas-download-panel.collapsed .collapsible-content {
    display: none;
}

.canvas-download-panel.collapsed .collapsible-header {
    border-bottom: none;
}

/* ============================================================================
   Assignment Info Panel
   ============================================================================ */

.assignment-info-panel {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 15px;
    margin-bottom: 20px;
}

.assignment-info-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.15s;
}

.assignment-info-header:hover {
    background: var(--bg-tertiary);
}

.assignment-info-header .caret {
    font-size: 0.8rem;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.assignment-info-panel.collapsed .assignment-info-header .caret {
    transform: rotate(-90deg);
}

.assignment-info-panel.collapsed .assignment-info-header {
    border-bottom: none;
}

.assignment-info-summary {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--bg-primary);
    padding: 4px 10px;
    border-radius: 12px;
}

.assignment-info-content {
    padding: 16px;
}

.assignment-info-panel.collapsed .assignment-info-content {
    display: none;
}

.assignment-info-grid {
    margin-bottom: 16px;
}

.assignment-info-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
}

.assignment-info-meta .info-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.assignment-info-meta .info-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.assignment-info-meta .info-value {
    font-size: 0.9rem;
    color: var(--text-primary);
}

.assignment-description-container {
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
}

.assignment-description-container > label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.assignment-description {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px 16px;
    max-height: 200px;
    overflow-y: auto;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary);
}

.assignment-description .no-description {
    color: var(--text-secondary);
    font-style: italic;
    margin: 0;
}

/* Style embedded Canvas description content */
.assignment-description p {
    margin: 0 0 12px 0;
}

.assignment-description p:last-child {
    margin-bottom: 0;
}

.assignment-description ul,
.assignment-description ol {
    margin: 0 0 12px 0;
    padding-left: 24px;
}

.assignment-description li {
    margin-bottom: 4px;
}

.assignment-description a {
    color: var(--primary-color);
    text-decoration: underline;
}

.assignment-description strong,
.assignment-description b {
    font-weight: 600;
}

.assignment-description img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 8px 0;
}

/* Dark mode adjustments */
[data-theme="dark"] .assignment-info-summary {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .assignment-description a {
    color: #60a5fa;
}

/* Canvas Settings & Assignment Links */
.canvas-settings-link {
    color: var(--accent-primary, #c9a55c);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s, opacity 0.2s;
}

.canvas-settings-link:hover {
    color: var(--accent-hover, #b8954d);
    text-decoration: underline;
}

.canvas-assignment-link {
    display: none; /* Hidden by default, shown when assignment selected */
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: var(--accent-primary, #c9a55c);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    margin-left: 4px;
}

.canvas-assignment-link:hover {
    background: var(--accent-hover, #b8954d);
    transform: scale(1.05);
}

/* ============================================================================
   Assignment Info Panel - Enhanced Styling (matching Assignment Bar)
   ============================================================================ */

.assignment-info-panel {
    background: var(--fh-cream, #f2e9d8);
    border: 1px solid var(--fh-cream-dark, #e5d9c3);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.assignment-info-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    background: var(--fh-cream, #f2e9d8);
    border-bottom: 1px solid var(--fh-cream-dark, #e5d9c3);
    transition: background-color 0.15s;
}

.assignment-info-header:hover {
    background: var(--fh-cream-light, #faf6ef);
}

.assignment-info-header .caret {
    font-size: 0.75rem;
    color: var(--fh-text-medium, #6b5c4c);
    transition: transform 0.2s;
}

.assignment-info-panel.collapsed .assignment-info-header .caret {
    transform: rotate(-90deg);
}

.assignment-info-panel.collapsed .assignment-info-header {
    border-bottom: none;
}

.assignment-info-summary {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--fh-text-dark, #4a3f35);
    background: var(--fh-cream-dark, #e5d9c3);
    padding: 4px 12px;
    border-radius: 20px;
}

.assignment-info-content {
    padding: 14px 16px;
    background: var(--fh-cream-light, #faf6ef);
}

.assignment-info-panel.collapsed .assignment-info-content {
    display: none;
}

.assignment-info-grid {
    margin-bottom: 14px;
}

.assignment-info-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}

.assignment-info-meta .info-row {
    display: flex;
    gap: 6px;
    align-items: baseline;
}

.assignment-info-meta .info-label {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--fh-text-medium, #6b5c4c);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.assignment-info-meta .info-value {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--fh-text-dark, #4a3f35);
}

.assignment-description-container {
    border-top: 1px solid var(--fh-cream-dark, #e5d9c3);
    padding-top: 14px;
}

.assignment-description-container > label {
    display: block;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--fh-text-medium, #6b5c4c);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}

.assignment-description {
    background: white;
    border: 1px solid var(--fh-cream-dark, #e5d9c3);
    border-radius: 8px;
    padding: 12px 16px;
    max-height: 180px;
    overflow-y: auto;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--fh-text-dark, #4a3f35);
}

/* Dark mode - Assignment Info Panel */
[data-theme="dark"] .assignment-info-panel {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .assignment-info-header {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .assignment-info-header:hover {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .assignment-info-header .caret {
    color: var(--text-secondary);
}

[data-theme="dark"] .assignment-info-summary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .assignment-info-content {
    background: var(--bg-primary);
}

[data-theme="dark"] .assignment-info-meta .info-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .assignment-info-meta .info-value {
    color: var(--text-primary);
}

[data-theme="dark"] .assignment-description-container {
    border-color: var(--border-color);
}

[data-theme="dark"] .assignment-description-container > label {
    color: var(--text-secondary);
}

[data-theme="dark"] .assignment-description {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .canvas-assignment-link {
    background: var(--accent-primary, #c9a55c);
}

[data-theme="dark"] .canvas-settings-link {
    color: var(--accent-primary, #c9a55c);
}

/* ============================================================================
   Submission Filters Panel
   ============================================================================ */

.submission-filters-panel {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.submission-filters-panel .filter-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
    user-select: none;
}

.submission-filters-panel .filter-header:hover {
    background: var(--bg-tertiary);
}

.submission-filters-panel .filter-header .caret {
    font-size: 0.8rem;
    transition: transform 0.2s;
    color: var(--text-secondary);
}

.submission-filters-panel.collapsed .filter-header .caret {
    transform: rotate(-90deg);
}

.submission-filters-panel.collapsed .filter-header {
    border-bottom: none;
}

.submission-filters-panel .filter-summary {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 4px 10px;
    border-radius: 12px;
}

.submission-filters-panel .filter-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.submission-filters-panel.collapsed .filter-content {
    display: none;
}

.filter-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-section > label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

/* Student Filter */
.student-filter-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.student-search-box input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.student-search-box input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.student-select-actions {
    display: flex;
    gap: 12px;
}

.btn-link {
    background: none;
    border: none;
    color: #3b82f6;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    text-decoration: underline;
}

.btn-link:hover {
    color: #2563eb;
}

[data-theme="dark"] .btn-link {
    color: #60a5fa;
}

[data-theme="dark"] .btn-link:hover {
    color: #93c5fd;
}

/* Select Ungraded button - special styling */
.btn-ungraded {
    color: #22c55e;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-ungraded::before {
    content: "○";
    font-size: 0.7rem;
}

.btn-ungraded:hover {
    color: #16a34a;
    text-decoration: underline;
}

[data-theme="dark"] .btn-ungraded {
    color: #4ade80;
}

[data-theme="dark"] .btn-ungraded:hover {
    color: #86efac;
}

/* Unified Submission Status Bar */
.submission-status-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-top: 10px;
}

.submission-status-bar .status-bar-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.submission-status-bar .stat-item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.submission-status-bar .stat-value {
    font-weight: 600;
    color: var(--text-primary);
}

.submission-status-bar .stat-total {
    color: var(--text-secondary);
}

.submission-status-bar .stat-divider {
    color: var(--text-muted, #9ca3af);
    opacity: 0.5;
}

.submission-status-bar .stat-selected .stat-value {
    color: var(--accent-primary, #d4a574);
}

.submission-status-bar .status-bar-progress {
    height: 4px;
    background: rgba(34, 197, 94, 0.15);
    border-radius: 2px;
    overflow: hidden;
}

.submission-status-bar .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%);
    border-radius: 2px;
    transition: width 0.3s ease;
}

[data-theme="dark"] .submission-status-bar {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .submission-status-bar .status-bar-progress {
    background: rgba(34, 197, 94, 0.2);
}

/* Legacy - keep for backward compatibility */
.grading-progress-summary {
    display: none;
}

.selected-count {
    display: none;
}

.student-list-container {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
}

.student-list-loading {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.student-list {
    display: flex;
    flex-direction: column;
}

.student-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.15s;
}

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

.student-item:hover {
    background: var(--bg-secondary);
}

.student-item.hidden {
    display: none;
}

.student-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.student-item .student-name {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.student-item .submission-status {
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.student-item .submission-status.has-submission {
    background: #dcfce7;
    color: #166534;
}

.student-item .submission-status.late {
    background: #fef3c7;
    color: #92400e;
}

.student-item .submission-status.graded {
    background: #dbeafe;
    color: #1e40af;
}

[data-theme="dark"] .student-item .submission-status.has-submission {
    background: #064e3b;
    color: #a7f3d0;
}

[data-theme="dark"] .student-item .submission-status.late {
    background: #78350f;
    color: #fcd34d;
}

[data-theme="dark"] .student-item .submission-status.graded {
    background: #1e3a5f;
    color: #93c5fd;
}

.selected-count {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 4px 0;
}

/* Student Checkbox List */
.student-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.15s;
    font-size: 0.9rem;
}

.student-checkbox:last-child {
    border-bottom: none;
}

.student-checkbox:hover {
    background: var(--bg-secondary);
}

.student-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.student-checkbox .student-name {
    flex: 1;
    color: var(--text-primary);
}

.student-checkbox .late-indicator,
.student-checkbox .graded-indicator {
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Grading status indicators */
.student-checkbox .graded-indicator.canvas-graded {
    color: #22c55e;
}

.student-checkbox .graded-indicator.locally-graded {
    color: #f59e0b;
}

/* Graded student rows - subtle visual distinction */
.student-checkbox.is-graded-canvas {
    opacity: 0.7;
    background: rgba(34, 197, 94, 0.04);
}

.student-checkbox.is-graded-local {
    background: rgba(245, 158, 11, 0.05);
}

.student-checkbox .file-count {
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* Students without submissions */
.student-checkbox.no-submission {
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        rgba(120, 113, 108, 0.04) 8px,
        rgba(120, 113, 108, 0.04) 16px
    );
    opacity: 0.6;
}

.student-checkbox.no-submission:hover {
    opacity: 0.75;
    background: repeating-linear-gradient(
        -45deg,
        var(--bg-secondary),
        var(--bg-secondary) 8px,
        rgba(120, 113, 108, 0.08) 8px,
        rgba(120, 113, 108, 0.08) 16px
    );
}

.student-checkbox.no-submission .student-name {
    color: var(--text-secondary);
}

.student-checkbox .no-submission-indicator {
    font-size: 0.85rem;
    color: var(--text-muted, #9ca3af);
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.student-checkbox .no-submission-indicator::before {
    content: "⊘";
    font-size: 0.9rem;
    opacity: 0.7;
}

[data-theme="dark"] .student-checkbox.no-submission {
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        rgba(168, 162, 158, 0.05) 8px,
        rgba(168, 162, 158, 0.05) 16px
    );
}

[data-theme="dark"] .student-checkbox.no-submission:hover {
    background: repeating-linear-gradient(
        -45deg,
        var(--bg-secondary),
        var(--bg-secondary) 8px,
        rgba(168, 162, 158, 0.08) 8px,
        rgba(168, 162, 158, 0.08) 16px
    );
}

.student-list-empty,
.student-list-error {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.student-list-error {
    color: #dc2626;
}

[data-theme="dark"] .student-list-error {
    color: #f87171;
}

/* Student list loading state with animated progress bar */
.student-list-loading {
    padding: 20px;
    text-align: center;
}

.student-list-loading .loading-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.student-list-loading .loading-bar-wrapper {
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
    max-width: 200px;
    margin: 0 auto;
}

.student-list-loading .loading-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(
        -45deg,
        #3b82f6 25%,
        #60a5fa 25%,
        #60a5fa 50%,
        #3b82f6 50%,
        #3b82f6 75%,
        #60a5fa 75%,
        #60a5fa
    );
    background-size: 40px 40px;
    animation: barberpole 1s linear infinite;
    border-radius: 3px;
}

[data-theme="dark"] .student-list-loading .loading-bar {
    background: linear-gradient(
        -45deg,
        #2563eb 25%,
        #3b82f6 25%,
        #3b82f6 50%,
        #2563eb 50%,
        #2563eb 75%,
        #3b82f6 75%,
        #3b82f6
    );
    background-size: 40px 40px;
}

/* Status Filter */
.status-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.filter-checkbox input[type="checkbox"],
.filter-checkbox input[type="radio"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    flex-shrink: 0;
}

/* Date Filter */
.date-filter-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.date-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-input-group label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.date-input-group input[type="date"] {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.date-input-group input[type="date"]:focus {
    outline: none;
    border-color: #3b82f6;
}

.optional-badge {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
}

/* ============================================================================
   Compact Filter Grid (Two-Column Layout)
   ============================================================================ */

.filter-grid-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    margin-top: 12px;
}

.filter-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.filter-section-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-label-compact {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.badge-subtle {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0;
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 3px;
}

/* Filter Chips - compact pill-style checkboxes */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filter-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-secondary);
    transition: all 0.15s ease;
    user-select: none;
}

.filter-chip:hover {
    border-color: var(--text-tertiary);
    color: var(--text-primary);
}

.filter-chip:has(input:checked) {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.4);
    color: #4ade80;
}

.filter-chip input[type="checkbox"] {
    width: 12px;
    height: 12px;
    cursor: pointer;
    accent-color: #22c55e;
}

/* Filter Toggle Group - segmented control style */
.filter-toggle-group {
    display: flex;
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 3px;
    border: 1px solid var(--border-color);
}

.filter-toggle {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-secondary);
    transition: all 0.15s ease;
    user-select: none;
}

.filter-toggle:hover {
    color: var(--text-primary);
}

.filter-toggle:has(input:checked) {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.filter-toggle input[type="radio"] {
    display: none;
}

/* Date Range Compact */
.date-range-compact {
    display: flex;
    gap: 16px;
}

.date-field-inline {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.date-label {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.date-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.date-input-native {
    width: 100%;
    padding: 6px 8px;
    padding-right: 24px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: inherit;
}

.date-input-native:focus {
    outline: none;
    border-color: #3b82f6;
}

.date-input-native::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
    opacity: 0.6;
}

.date-input-native::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.date-clear-btn {
    position: absolute;
    right: 22px;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: var(--text-tertiary);
    color: var(--bg-primary);
    font-size: 12px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.date-input-wrapper:hover .date-clear-btn,
.date-input-native:not(:placeholder-shown) + .date-clear-btn {
    opacity: 0.5;
}

.date-clear-btn:hover {
    opacity: 1 !important;
    background: #ef4444;
}

/* Responsive: stack on narrow screens */
@media (max-width: 600px) {
    .filter-grid-compact {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ============================================================================
   Canvas Submission Modal
   ============================================================================ */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.modal-content {
    background: var(--bg-tertiary);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.submission-review-modal {
    min-height: 500px;
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.submission-summary {
    display: flex;
    gap: 24px;
    padding: 16px 24px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.summary-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.unmatched-warning {
    margin: 16px 24px;
    padding: 12px 16px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #92400e;
}

.unmatched-warning ul {
    margin: 8px 0 0 20px;
    padding: 0;
}

.unmatched-warning li {
    margin: 4px 0;
}

.review-controls {
    display: flex;
    gap: 12px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
}

.review-controls input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--input-bg);
    color: var(--text-primary);
}

.review-controls input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.expand-all-btn {
    padding: 8px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    color: var(--text-secondary);
}

.expand-all-btn:hover {
    background: var(--bg-primary);
    border-color: #3b82f6;
    color: #3b82f6;
}

.review-table {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.review-header {
    display: grid;
    grid-template-columns: 200px 80px 1fr;
    gap: 16px;
    padding: 12px 24px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.review-body {
    flex: 1;
    overflow-y: auto;
    max-height: 400px;
}

.review-row {
    display: grid;
    grid-template-columns: 200px 80px 1fr;
    gap: 16px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-color);
    align-items: start;
    font-size: 0.9rem;
}

.review-row.even {
    background: var(--bg-secondary);
}

.review-row.odd {
    background: var(--bg-tertiary);
}

.review-student {
    font-weight: 500;
    color: var(--text-primary);
    word-break: break-word;
}

.review-score {
    font-weight: 600;
    color: #059669;
    text-align: center;
}

.review-feedback {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    position: relative;
}

.review-feedback.no-feedback {
    color: #9ca3af;
    font-style: italic;
}

.feedback-preview {
    display: inline;
}

.feedback-full {
    white-space: pre-wrap;
    background: var(--bg-secondary);
    padding: 12px;
    border-radius: 6px;
    margin-top: 8px;
    border: 1px solid var(--border-color);
}

.expand-feedback-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    margin-left: 8px;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.expand-feedback-btn:hover {
    background: var(--bg-primary);
    border-color: #3b82f6;
    color: #3b82f6;
}

.modal-actions {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
}

/* Grade Next Batch button - prominent styling */
.btn-next-batch {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    font-weight: 600;
}

.btn-next-batch:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.btn-primary {
    padding: 10px 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary:hover {
    background: #2563eb;
}

.btn-secondary {
    padding: 10px 20px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

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

/* Submission Progress */
.submission-progress {
    padding: 40px 24px;
    text-align: center;
}

.submission-progress-bar-container {
    height: 12px;
    background: var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
}

.submission-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 6px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.progress-details {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Submission Results */
.submission-results {
    padding: 32px 24px;
    text-align: center;
}

.results-summary {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-bottom: 24px;
}

.result-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.result-number {
    font-size: 2.5rem;
    font-weight: 700;
}

.result-number.success {
    color: #059669;
}

.result-number.failed {
    color: #dc2626;
}

.result-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.results-info {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.failed-submissions {
    text-align: left;
    margin: 16px 0;
    padding: 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
}

.failed-submissions h4 {
    color: #991b1b;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.failed-submissions ul {
    margin: 0 0 0 20px;
    padding: 0;
    color: #dc2626;
    font-size: 0.85rem;
}

.failed-submissions li {
    margin: 4px 0;
}

/* Submission Error */
.submission-error {
    padding: 32px 24px;
    text-align: center;
}

.error-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.error-message {
    color: #dc2626;
    font-size: 1rem;
    max-width: 400px;
    margin: 0 auto;
}

/* Canvas Export Connection Status in Section 4 */
.canvas-export-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.9rem;
}

.canvas-export-status.not-connected {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #92400e;
}

.canvas-export-status.connected {
    background: #d1fae5;
    border: 1px solid #10b981;
    color: #065f46;
}

.canvas-export-status .status-icon {
    font-size: 1.1rem;
}

.canvas-export-status .status-text {
    flex: 1;
}

.canvas-export-status .status-link {
    color: inherit;
    font-weight: 500;
    text-decoration: underline;
}

.canvas-export-status .status-link:hover {
    opacity: 0.8;
}

.canvas-export-status .course-assignment {
    font-weight: 600;
}

/* Unmatched Students Banner */
.unmatched-students-banner {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.unmatched-banner-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.unmatched-banner-icon {
    font-size: 1.5rem;
}

.unmatched-banner-title {
    font-size: 1rem;
    font-weight: 600;
    color: #92400e;
    margin: 0;
}

.unmatched-banner-subtitle {
    font-size: 0.85rem;
    color: #b45309;
    margin-top: 2px;
}

.unmatched-students-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.unmatched-student-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--bg-tertiary);
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #fcd34d;
    flex-wrap: wrap;
}

.unmatched-student-info {
    flex: 1;
    min-width: 200px;
}

.unmatched-student-name {
    font-weight: 500;
    color: var(--text-primary);
}

.username-hint {
    display: block;
    font-size: 0.8rem;
    color: #059669;
    margin-top: 2px;
}

.username-hint strong {
    font-weight: 600;
    background: #d1fae5;
    padding: 1px 6px;
    border-radius: 4px;
}

.unmatched-filenames {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    align-items: center;
}

.files-label {
    font-size: 0.75rem;
    color: #6b7280;
    margin-right: 2px;
}

.file-hint {
    font-size: 0.7rem;
    background: #f3f4f6;
    color: #4b5563;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.more-files {
    font-size: 0.7rem;
    color: #9ca3af;
    font-style: italic;
}

.unmatched-student-score {
    font-size: 0.85rem;
    color: #6b7280;
    min-width: 80px;
}

.unmatched-student-assign {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.unmatched-student-assign label {
    font-size: 0.85rem;
    color: #6b7280;
    white-space: nowrap;
}

.roster-select {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--input-bg);
    cursor: pointer;
    max-width: 300px;
}

.roster-select:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.roster-select option {
    padding: 8px;
}

.unmatched-student-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.unmatched-student-status.pending {
    background: #fef3c7;
    color: #92400e;
}

.unmatched-student-status.assigned {
    background: #d1fae5;
    color: #065f46;
}

.unmatched-student-status.skipped {
    background: #f3f4f6;
    color: #6b7280;
}

.unmatched-banner-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #fcd34d;
}

.banner-action-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.banner-action-btn.primary {
    background: #f59e0b;
    color: white;
    border: none;
}

.banner-action-btn.primary:hover {
    background: #d97706;
}

.banner-action-btn.secondary {
    background: white;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.banner-action-btn.secondary:hover {
    background: #fffbeb;
}

.banner-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Dark mode for Unmatched Students Banner */
[data-theme="dark"] .unmatched-students-banner {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.25) 100%);
    border-color: #b45309;
}

[data-theme="dark"] .unmatched-banner-title {
    color: #fcd34d;
}

[data-theme="dark"] .unmatched-banner-subtitle {
    color: #fbbf24;
}

[data-theme="dark"] .unmatched-student-row {
    background: var(--bg-card);
    border-color: #b45309;
}

[data-theme="dark"] .unmatched-student-status.pending {
    background: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

[data-theme="dark"] .unmatched-student-status.assigned {
    background: rgba(16, 185, 129, 0.3);
    color: #34d399;
}

[data-theme="dark"] .unmatched-student-status.skipped {
    background: rgba(107, 114, 128, 0.3);
    color: #9ca3af;
}

[data-theme="dark"] .unmatched-banner-actions {
    border-top-color: #b45309;
}

[data-theme="dark"] .banner-action-btn.secondary {
    background: var(--bg-card);
    color: #fcd34d;
    border-color: #b45309;
}

[data-theme="dark"] .banner-action-btn.secondary:hover {
    background: rgba(245, 158, 11, 0.15);
}

/* Adjustment Layer Grid */
.adjustment-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.adj-item {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 76px;
    position: relative;
}

.adj-item:hover {
    border-color: var(--text-secondary);
    background-color: var(--bg-tertiary);
}

.adj-item.selected {
    background-color: var(--active-item-bg);
    border-color: var(--active-item-bg);
    color: var(--active-item-text);
}

.adj-item.selected .adj-label {
    color: var(--active-item-text);
    font-weight: 500;
}

.adj-icon {
    width: 32px;
    height: 32px;
    background-image: url('../images/adjustment_layer_icons.png');
    background-size: 128px 128px;
    background-repeat: no-repeat;
    margin-bottom: 6px;
    /* Invert for light mode by default (assuming icons are white) */
    filter: invert(1);
    opacity: 0.7;
    transition: all 0.2s ease;
}

/* Dark mode overrides */
[data-theme="dark"] .adj-icon {
    filter: none;
    opacity: 0.9;
}

/* Selected state overrides */
.adj-item.selected .adj-icon {
    filter: none;
    /* White icons on colored background */
    opacity: 1;
}

/* Icon Positions */
/* Row 1 */
.icon-vibrance {
    background-position: 0 0;
}

.icon-brightness {
    background-position: -32px 0;
}

.icon-levels {
    background-position: -64px 0;
}

.icon-curves {
    background-position: -96px 0;
}

/* Row 2 */
.icon-exposure {
    background-position: 0 -32px;
}

.icon-hue {
    background-position: -32px -32px;
}

.icon-colorBalance {
    background-position: -64px -32px;
}

.icon-blackWhite {
    background-position: -96px -32px;
}

/* Row 3 */
.icon-photoFilter {
    background-position: 0 -64px;
}

.icon-channelMixer {
    background-position: -32px -64px;
}

.icon-colorLookup {
    background-position: -64px -64px;
}

.icon-invert {
    background-position: -96px -64px;
}

/* Row 4 */
.icon-posterize {
    background-position: 0 -96px;
}

.icon-threshold {
    background-position: -32px -96px;
}

.icon-gradientMap {
    background-position: -64px -96px;
}

.icon-selectiveColor {
    background-position: -96px -96px;
}

.adj-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    padding: 0 4px;
}

/* Responsive Design - Appended at end to override base styles */
@media (max-width: 768px) {
    .grading-nav-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .criteria-grid {
        grid-template-columns: 1fr;
    }

    /* Typography and Content sections: stack on mobile */
    #aiTypographySection .collapsible-content > div,
    #aiContentSection .collapsible-content > div {
        grid-template-columns: 1fr !important;
    }

    /* Stack Get Student Work buttons on smaller screens */
    .pathway-selector {
        grid-template-columns: 1fr;
    }

    /* Tablet: Fix pattern builder overflow */
    .pattern-builder-box {
        overflow-x: auto;
    }

    /* Tablet: Submission & Grouping 2 columns */
    #groupingSection .collapsible-content>div {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Adjustment Layer Grid: 3 columns on tablet/mobile */
    .adjustment-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 480px) {

    /* Mobile: Stack pattern builder boxes */
    .pattern-builder-box .autofill-box {
        width: 100%;
    }

    .pattern-builder-box>div:nth-child(3) {
        grid-template-columns: 1fr !important;
    }

    /* Mobile: Stack Dimensions (Width/Height) */
    #technicalSection .criteria-cube:first-child .cube-content>div {
        grid-template-columns: 1fr !important;
    }

    /* Mobile: Stack Minimum Layers & Empty Layer Detection */
    #technicalSection .criteria-cube:nth-child(4) .cube-content>div {
        grid-template-columns: 1fr !important;
    }

    /* Mobile: Submission & Grouping Stack (1 column) */
    #groupingSection .collapsible-content>div {
        grid-template-columns: 1fr !important;
    }

    /* Mobile: Color Mode Radios */
    .color-mode-radios {
        gap: 8px;
        justify-content: flex-start;
    }

    .radio-option {
        padding: 4px;
    }

    .radio-label {
        font-size: 0.85rem;
    }

    /* Mobile overrides for tables and text */
    .results-table th:nth-child(1),
    .results-table th:nth-child(2),
    .results-table th:nth-child(3) {
        width: auto;
    }

    .step h2 {
        font-size: 1.2rem;
        flex-wrap: wrap;
    }

    .step-number {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }

    .optional-badge {
        margin-left: 0;
        margin-top: 8px;
    }

    .btn-large {
        padding: 14px 24px;
        font-size: 1.1rem;
    }

    .process-section {
        padding: 0;
        margin: 20px 0;
    }

    .file-info-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .detail-row {
        flex-direction: column;
        align-items: flex-start;
        padding: 6px 0;
    }

    .detail-label {
        margin-bottom: 2px;
    }

    .detail-value {
        margin-left: 0;
        text-align: left;
    }
}

/* ============================================
   STORAGE PROVIDER SELECTOR
   ============================================ */

.storage-provider-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.storage-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.storage-option:hover {
    border-color: var(--primary-color);
}

.storage-option.selected {
    border-color: var(--primary-color);
    background: rgba(59, 130, 246, 0.1);
}

.storage-option.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.storage-option.disabled:hover {
    border-color: transparent;
}

.storage-option input[type="radio"] {
    margin-top: 2px;
    flex-shrink: 0;
}

.storage-option .option-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.storage-option .option-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.storage-option .option-name {
    font-weight: 600;
    font-size: 0.9em;
    color: var(--text-primary);
}

.storage-option .option-desc {
    font-size: 0.8em;
    color: var(--text-secondary);
}

.storage-option .option-note {
    font-size: 0.75em;
    color: var(--warning-color, #f59e0b);
    font-style: italic;
}

/* Box Connection Status (legacy container) */
.box-status {
    font-size: 0.85em;
}

/* Box storage option - clickable when not connected */
.storage-option.box-not-connected {
    cursor: pointer;
}

.storage-option.box-not-connected:hover {
    border-color: var(--primary-color);
    background: rgba(59, 130, 246, 0.05);
}

/* Box status inline (inside storage option) */
.box-status-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border-color);
    font-size: 0.85em;
}

.box-status-inline.connected .box-user-info {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}

.box-status-inline .status-dot {
    width: 8px;
    height: 8px;
    background: var(--success-color, #10b981);
    border-radius: 50%;
    flex-shrink: 0;
}

.box-status-inline .box-quota {
    color: var(--text-muted);
    font-size: 0.9em;
}

.box-status-inline .box-quota::before {
    content: "•";
    margin: 0 6px;
}

/* Connect to Box button */
.btn-connect-box {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-connect-box:hover {
    background: var(--primary-hover);
}

/* Small link button for disconnect */
.btn-link-small {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85em;
    padding: 0;
    text-decoration: underline;
}

.btn-link-small:hover {
    color: var(--danger-color, #ef4444);
}

.box-status .btn-primary.btn-sm {
    padding: 4px 12px;
    font-size: 0.8em;
    border-radius: 4px;
    margin-left: 8px;
}

/* Dark mode adjustments */
[data-theme="dark"] .storage-option.selected {
    background: rgba(59, 130, 246, 0.15);
}

/* ==================== AI Feedback Section ==================== */

.ai-feedback-intro {
    color: var(--text-secondary);
    font-size: 0.9em;
    margin-bottom: 16px;
    line-height: 1.5;
}

.ai-settings-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.ai-setting-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ai-setting-group label {
    font-weight: 600;
    font-size: 0.85em;
    color: var(--text-primary);
}

.ai-setting-group select,
.ai-setting-group input[type="text"],
.ai-setting-group input[type="password"],
.ai-setting-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.9em;
}

.ai-setting-group select:focus,
.ai-setting-group input:focus,
.ai-setting-group textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.ai-setting-group textarea {
    resize: vertical;
    min-height: 60px;
}

.field-hint {
    font-size: 0.8em;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* API Key Section */
.ai-api-key-section {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
}

.api-key-group {
    margin-bottom: 10px;
}

.api-key-input-row {
    display: flex;
    gap: 8px;
}

.api-key-input-row input {
    flex: 1;
}

.btn-small {
    padding: 8px 16px !important;
    font-size: 0.85em !important;
}

.ai-key-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85em;
    margin-top: 8px;
}

.ai-key-status.success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.ai-key-status.error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error-color);
}

.ai-key-status.testing {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info-color);
}

.ai-key-status .status-icon {
    font-weight: bold;
}

.ai-key-status.testing .status-icon {
    animation: spin 1s linear infinite;
}

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

.ai-checkbox-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.85em;
    color: var(--text-secondary);
}

.ai-checkbox-option input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.ai-checkbox-option.include-final {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.ai-checkbox-option.include-final span {
    color: var(--text-primary);
    font-weight: 500;
}

[data-theme="dark"] .ai-checkbox-option.include-final {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

.ai-security-note {
    font-size: 0.8em;
    color: var(--text-secondary);
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Style & Tone Options */
.ai-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

.ai-option-group label:first-child {
    font-weight: 600;
    font-size: 0.85em;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: block;
}

.ai-radio-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: stretch;
}

.ai-radio-option {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
    height: 36px;
    box-sizing: border-box;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ai-radio-option:hover {
    border-color: var(--accent-primary);
}

.ai-radio-option:has(input:checked) {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.ai-radio-option input[type="radio"] {
    display: none;
}

.ai-radio-option span {
    display: flex;
    align-items: center;
}

/* Dark mode - AI feedback section */
[data-theme="dark"] .ai-api-key-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .ai-radio-option:has(input:checked) {
    background: rgba(56, 189, 248, 0.15);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* Responsive */
@media (max-width: 600px) {
    .ai-settings-row,
    .ai-options-grid {
        grid-template-columns: 1fr;
    }

    .api-key-input-row {
        flex-direction: column;
    }

    .ai-radio-options {
        flex-direction: column;
        gap: 8px;
    }
}

/* ===========================================
   AI Feedback in Results Cards
   =========================================== */

.ai-feedback-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--border-color);
}

.ai-feedback-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.ai-feedback-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-generate-ai {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    color: white;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-generate-ai:hover:not(:disabled) {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.btn-generate-ai:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-generate-ai.generating {
    background: linear-gradient(135deg, #a78bfa 0%, #818cf8 100%);
}

.ai-feedback-content {
    min-height: 60px;
}

.ai-feedback-placeholder {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 6px;
    border: 1px dashed var(--border-color);
    text-align: center;
}

.ai-feedback-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.ai-feedback-loading .spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.ai-feedback-error {
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #dc2626;
    font-size: 0.85rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.ai-feedback-error .error-icon {
    flex-shrink: 0;
}

[data-theme="dark"] .ai-feedback-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.ai-feedback-textarea {
    width: 100%;
    min-height: 80px;
    max-height: 200px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
    background: var(--input-bg);
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ai-feedback-textarea:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.ai-feedback-textarea.is-edited {
    border-color: #8b5cf6;
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.03) 0%, var(--input-bg) 100%);
}

.ai-feedback-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.btn-copy-into-feedback,
.btn-use-ai-feedback,
.btn-copy-ai-feedback,
.btn-regenerate-ai {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-copy-into-feedback:hover,
.btn-use-ai-feedback:hover,
.btn-copy-ai-feedback:hover,
.btn-regenerate-ai:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

/* Primary action: Copy into Feedback */
.btn-copy-into-feedback {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(99, 102, 241, 0.1) 100%);
    border-color: rgba(139, 92, 246, 0.4);
    color: #7c3aed;
    font-weight: 500;
}

.btn-copy-into-feedback:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25) 0%, rgba(99, 102, 241, 0.2) 100%);
    border-color: #8b5cf6;
    color: #6d28d9;
}

[data-theme="dark"] .btn-copy-into-feedback {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.5);
    color: #a78bfa;
}

[data-theme="dark"] .btn-copy-into-feedback:hover {
    background: rgba(139, 92, 246, 0.3);
    border-color: #8b5cf6;
    color: #c4b5fd;
}

/* Legacy class - keep for backwards compatibility */
.btn-use-ai-feedback {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    border-color: rgba(139, 92, 246, 0.3);
    color: #7c3aed;
}

.btn-use-ai-feedback:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%);
    border-color: #8b5cf6;
    color: #6d28d9;
}

[data-theme="dark"] .btn-use-ai-feedback {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.4);
    color: #a78bfa;
}

[data-theme="dark"] .btn-use-ai-feedback:hover {
    background: rgba(139, 92, 246, 0.25);
    border-color: #8b5cf6;
    color: #c4b5fd;
}

.ai-edited-badge {
    background: linear-gradient(135deg, #ede9fe 0%, #e0e7ff 100%);
    color: #6d28d9;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: auto;
}

[data-theme="dark"] .ai-edited-badge {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}

/* Dark mode for file feedback edited state */
[data-theme="dark"] .file-feedback-textarea.is-edited {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}

[data-theme="dark"] .file-edited-badge {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

/* Dark mode for student feedback edited state */
[data-theme="dark"] .student-feedback-textarea.is-edited {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}

/* Batch AI Controls */
.batch-ai-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 8px;
}

.btn-generate-all-ai {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-generate-all-ai:hover:not(:disabled) {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.btn-generate-all-ai:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.batch-ai-progress {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.batch-ai-progress .progress-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
}

.batch-ai-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.batch-ai-progress .progress-text {
    min-width: 60px;
    text-align: right;
    font-weight: 500;
}

/* Dark mode refinements for AI feedback */
[data-theme="dark"] .ai-feedback-placeholder {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .ai-feedback-loading {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .batch-ai-controls {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.25);
}

[data-theme="dark"] .batch-ai-progress .progress-bar {
    background: var(--bg-tertiary);
}

/* ===========================================
   Download Progress Mirror (Step 3)
   =========================================== */

.download-progress-mirror {
    margin-top: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(99, 102, 241, 0.08) 100%);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 10px;
    animation: pulse-border 2s ease-in-out infinite;
}

@keyframes pulse-border {
    0%, 100% {
        border-color: rgba(59, 130, 246, 0.25);
    }
    50% {
        border-color: rgba(59, 130, 246, 0.5);
    }
}

.progress-mirror-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.progress-mirror-icon {
    font-size: 1.2rem;
    animation: bounce 1s ease infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

.progress-mirror-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

/* Step 3 progress mirror uses the same bar styles as Step 1 */
.download-progress-mirror .download-progress-bar-wrapper {
    margin-bottom: 10px;
}

.progress-mirror-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

#step3ProgressText {
    flex: 1;
}

#step3ProgressCount {
    font-weight: 500;
    color: var(--text-primary);
}

/* Dark mode */
[data-theme="dark"] .download-progress-mirror {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

/* Ready Status Box (shown when files are loaded and ready to grade) */
.ready-status-box {
    margin-top: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(16, 185, 129, 0.08) 100%);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.ready-status-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.ready-status-content {
    flex: 1;
}

.ready-status-title {
    font-weight: 600;
    font-size: 1rem;
    color: #16a34a;
    margin-bottom: 4px;
}

.ready-status-details {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.ready-status-details strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Dark mode */
[data-theme="dark"] .ready-status-box {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.4);
}

[data-theme="dark"] .ready-status-title {
    color: #4ade80;
}

/* ==================== Content Terminator ==================== */
/* Visual transition from content to Assignment Bar */
/* Creates breathing room and subtle gradient fade-out */

.content-terminator {
    height: 48px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--color-bg-sunken, rgba(0, 0, 0, 0.02)) 100%
    );
    pointer-events: none;
    position: relative;
    margin-bottom: 48px; /* Account for fixed assignment bar */
}

/* Subtle branding line at bottom of terminator */
.content-terminator::after {
    content: 'Cloud Grader · © 2025 Jesse Garnier';
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    opacity: 0.4;
    white-space: nowrap;
}

/* ==================== Assignment Bar ==================== */

/* Main container - fixed bottom */
.assignment-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: var(--fh-cream);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--fh-cream-dark);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    padding: 0;
    transition: transform 0.3s var(--fh-ease-smooth),
                box-shadow 0.3s var(--fh-ease-smooth);
}

/* -------------------- Progress Band -------------------- */
/* Collapsible top section for download/grading progress */

.progress-band {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(100%);
    background: linear-gradient(
        180deg,
        var(--color-accent, #d2b883) 0%,
        color-mix(in srgb, var(--color-accent, #d2b883) 85%, black) 100%
    );
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-band[data-state="visible"],
.progress-band[data-state="complete"] {
    max-height: 70px;
    opacity: 1;
    transform: translateY(0);
}

.progress-band[data-state="complete"] {
    background: linear-gradient(
        180deg,
        var(--color-success, #22c55e) 0%,
        color-mix(in srgb, var(--color-success, #22c55e) 85%, black) 100%
    );
}

.progress-band-content {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 24px;
    max-width: 100%;
}

/* Left section: icon + label */
.progress-band-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 150px;
}

.progress-band-icon {
    font-size: 1rem;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

.progress-band-label {
    font-family: var(--font-display, 'Sora', sans-serif);
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Center section: bar + metadata */
.progress-band-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.progress-band-bar {
    height: 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.progress-band-fill {
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 0.9) 100%
    );
    border-radius: 3px;
    transition: width 0.15s var(--fh-ease-smooth);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

/* Metadata row below bar */
.progress-band-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.95);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.progress-band-meta span:empty {
    display: none;
}

.progress-band-files {
    font-weight: 500;
}

.progress-band-size {
    color: rgba(255, 255, 255, 0.75);
}

.progress-band-speed {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.65rem;
}

.progress-band-time {
    color: rgba(255, 255, 255, 0.8);
    margin-left: auto;
}

/* Right section: percent + cancel */
.progress-band-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.progress-band-percent {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    min-width: 50px;
    text-align: right;
    letter-spacing: -0.02em;
}

/* Animated shimmer effect during progress - subtle for long downloads */
.progress-band[data-state="visible"] .progress-band-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
    );
    animation: progressShimmer 4s ease-in-out infinite;
}

@keyframes progressShimmer {
    0% { transform: translateX(0); opacity: 0; }
    10% { opacity: 1; }
    50% { transform: translateX(200%); opacity: 1; }
    60% { opacity: 0; }
    100% { transform: translateX(200%); opacity: 0; }
}

/* Cancel button */
.progress-band-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-full, 50%);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: bold;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.progress-band-cancel:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

.progress-band-cancel:active {
    transform: scale(0.95);
}

/* Hide cancel button when complete */
.progress-band[data-state="complete"] .progress-band-cancel {
    display: none;
}

/* Success state styling */
.progress-band-success {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    color: white;
}

.progress-band-success .success-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.progress-band-success .success-message {
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.progress-band-success .success-details {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    margin-left: 8px;
}

.progress-band-success .success-dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: auto;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-full, 50%);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: bold;
    flex-shrink: 0;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.progress-band-success .success-dismiss:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

/* Hide active content when in success state */
.progress-band[data-state="success"] .progress-band-content {
    display: none;
}

.progress-band[data-state="success"] .progress-band-success {
    display: flex;
}

/* Make config have proper padding now that bar has padding: 0 */
.assignment-bar-config {
    padding: 10px 24px;
}

/* Glass-morphism overlay */
.assignment-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.3) 100%
    );
    pointer-events: none;
    z-index: -1;
}

[data-theme="dark"] .assignment-bar::before {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
}

/* Configuration State Layout */
.assignment-bar-config {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    z-index: 1;
}

/* Left Section - Assignment Context */
.assignment-bar-left {
    flex: 0 0 auto;
    min-width: 180px;
    max-width: 280px;
}

.assignment-context {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.context-course {
    font-family: 'Sora', var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--fh-text-dark);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.context-assignment {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--fh-text-medium);
    line-height: 1.3;
}

.context-course.no-selection {
    color: var(--fh-text-light);
    font-weight: 500;
}

/* Center Section - Points Breakdown */
.assignment-bar-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.points-breakdown {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--fh-cream-light);
    padding: 8px 16px;
    border-radius: 24px;
    border: 1px solid var(--fh-cream-dark);
}

.points-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 12px;
    border-radius: 12px;
    transition: all 0.2s var(--fh-ease-smooth);
    cursor: default;
}

.points-section:hover {
    background: rgba(244, 198, 157, 0.2);
}

.points-section.disabled {
    opacity: 0.4;
}

.section-label {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fh-text-light);
}

.section-points {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--fh-text-dark);
    font-variant-numeric: tabular-nums;
}

.points-divider {
    font-size: 0.9rem;
    color: var(--fh-text-light);
    font-weight: 300;
}

.points-total {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 8px 16px;
    background: var(--fh-orange);
    border-radius: 16px;
    margin-left: 8px;
}

.total-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--fh-text-dark);
    opacity: 0.7;
}

.total-value {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--fh-text-dark);
    font-variant-numeric: tabular-nums;
}

.total-suffix {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--fh-text-dark);
    opacity: 0.7;
}

/* HTML Mode - Compact 5-section layout */
.points-breakdown.html-mode {
    gap: 4px;
    padding: 6px 12px;
}

.points-breakdown.html-mode .points-section {
    padding: 4px 8px;
}

.points-breakdown.html-mode .section-label {
    font-size: 0.55rem;
    letter-spacing: 0.3px;
}

.points-breakdown.html-mode .section-points {
    font-size: 0.95rem;
}

.points-breakdown.html-mode .points-divider {
    font-size: 0.75rem;
}

.points-breakdown.html-mode .points-total {
    padding: 6px 12px;
    margin-left: 4px;
}

.points-breakdown.html-mode .total-value {
    font-size: 1.2rem;
}

/* Multi-Submission Breakdown */
.submissions-breakdown {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.submissions-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--fh-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.submission-bubbles {
    display: flex;
    gap: 6px;
    align-items: center;
}

.submission-bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 8px;
    background: var(--fh-cream);
    border: 1px solid var(--fh-orange);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fh-text-dark);
    transition: all var(--fh-transition-fast) var(--fh-ease-smooth);
}

.submission-bubble:hover {
    background: var(--fh-orange-light, #fde8d3);
    transform: scale(1.05);
}

.submission-bubble.disabled {
    background: var(--fh-cream-dark);
    border-color: var(--fh-text-light);
    color: var(--fh-text-light);
    opacity: 0.6;
}

/* Animation for bubble updates */
.submission-bubble.number-changing {
    animation: bubblePop 0.3s var(--fh-ease-bounce);
}

@keyframes bubblePop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Dark mode support */
[data-theme="dark"] .submissions-breakdown {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .submission-bubble {
    background: var(--bg-secondary);
    border-color: var(--fh-orange-dark);
    color: var(--text-primary);
}

[data-theme="dark"] .submission-bubble:hover {
    background: rgba(244, 198, 157, 0.2);
}

/* Points Editing Indicator */
.points-editing-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
}

.editing-pulse {
    width: 8px;
    height: 8px;
    background: var(--fh-orange);
    border-radius: 50%;
    animation: pulseEdit 1s ease-in-out infinite;
}

@keyframes pulseEdit {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

.editing-text {
    font-size: 0.75rem;
    color: var(--fh-text-light);
    font-style: italic;
}

/* Right Section - Action Buttons */
.assignment-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Bar Buttons */
.bar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 12px;
    border: none;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s var(--fh-ease-smooth);
}

.bar-btn-primary {
    background: linear-gradient(135deg, var(--fh-orange) 0%, var(--fh-orange-dark) 100%);
    color: var(--fh-text-dark);
    /* Hero button: white/light border for emphasis */
    border: 2px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.1),          /* Subtle outer definition */
        0 4px 12px rgba(0, 0, 0, 0.15),        /* Depth shadow */
        0 2px 8px rgba(244, 198, 157, 0.4);   /* Accent glow */
}

.bar-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.15),
        0 6px 20px rgba(0, 0, 0, 0.2),
        0 4px 16px rgba(244, 198, 157, 0.5);
}

.bar-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: none;
}

/* Processing state: Show spinner while grading */
.bar-btn-primary.processing {
    opacity: 0.9;
    cursor: wait;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* Dark theme: keep white/light border for hero visibility */
[data-theme="dark"] .bar-btn-primary,
[data-theme="espresso"] .bar-btn-primary,
[data-theme="moonlight"] .bar-btn-primary,
[data-theme="mossglow"] .bar-btn-primary {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 2px 8px var(--color-accent, rgba(244, 198, 157, 0.3));
}

[data-theme="dark"] .bar-btn-primary:hover:not(:disabled),
[data-theme="espresso"] .bar-btn-primary:hover:not(:disabled),
[data-theme="moonlight"] .bar-btn-primary:hover:not(:disabled),
[data-theme="mossglow"] .bar-btn-primary:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 4px 16px var(--color-accent, rgba(244, 198, 157, 0.4));
}

/* Ready state: Green when files loaded + criteria configured */
.bar-btn-primary.ready {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-color: rgba(255, 255, 255, 0.6);
    animation: ready-pulse 2s ease-in-out infinite;
}

.bar-btn-primary.ready:hover:not(:disabled) {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    border-color: rgba(255, 255, 255, 0.8);
    animation: none;
}

@keyframes ready-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.1),
            0 4px 12px rgba(0, 0, 0, 0.15),
            0 2px 8px rgba(34, 197, 94, 0.3);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.1),
            0 4px 16px rgba(0, 0, 0, 0.2),
            0 2px 16px rgba(34, 197, 94, 0.5);
    }
}

/* Dark theme ready state */
[data-theme="dark"] .bar-btn-primary.ready,
[data-theme="espresso"] .bar-btn-primary.ready,
[data-theme="moonlight"] .bar-btn-primary.ready,
[data-theme="mossglow"] .bar-btn-primary.ready {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 2px 12px rgba(34, 197, 94, 0.4);
}

.bar-btn-secondary {
    background: var(--fh-cream-light);
    color: var(--fh-text-medium);
    border: 1px solid var(--fh-cream-dark);
}

.bar-btn-secondary:hover:not(:disabled) {
    background: var(--fh-cream-dark);
    color: var(--fh-text-dark);
}

.bar-btn-secondary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-icon {
    font-size: 1rem;
}

/* Stacked Mode (results mode shows both bars) */
/* Results Band - appears on top when results exist */
.results-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.25) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    /* Animation properties - fully collapsed when hidden */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.results-band.visible {
    max-height: 60px;
    opacity: 1;
    padding: 10px 24px;
}

.results-stats {
    display: flex;
    align-items: center;
    gap: 12px;
}


.results-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--fh-cream-light);
    border-radius: 12px;
    border: 1px solid var(--fh-cream-dark);
}

.results-stat.configured {
    background: linear-gradient(135deg, var(--fh-orange) 0%, var(--fh-orange-dark) 100%);
    border-color: transparent;
}

/* High contrast text for configured stat (orange background) */
.results-stat.configured .stat-value {
    color: #1a1614;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.results-stat.configured .stat-label {
    color: rgba(26, 22, 20, 0.75);
}

.results-stat .stat-icon {
    font-size: 1rem;
}

.results-stat .stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--fh-text-dark);
    font-variant-numeric: tabular-nums;
}

.results-stat .stat-label {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--fh-text-light);
}

.results-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Workflow Progress Strip */
.workflow-progress-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--fh-cream-dark);
    position: relative;
    z-index: 1;
}

.progress-step {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
}

.step-marker {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--fh-text-light);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--fh-cream-dark);
    border-radius: 6px;
    transition: all 0.3s var(--fh-ease-smooth);
}

.step-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--fh-text-light);
    transition: color 0.3s var(--fh-ease-smooth);
}

/* Step arrow connector */
.step-arrow {
    color: var(--fh-text-light);
    font-size: 0.9rem;
    margin: 0 4px;
    opacity: 0.5;
}

/* Step States */
.progress-step.complete .step-marker {
    background: var(--fh-success);
    border-color: var(--fh-success);
    color: white;
}

.progress-step.complete .step-name {
    color: var(--fh-text-dark);
}

.progress-step.complete + .step-arrow {
    color: var(--fh-success);
    opacity: 1;
}

.progress-step.active .step-marker {
    background: var(--fh-orange);
    border-color: var(--fh-orange);
    color: var(--fh-text-dark);
}

.progress-step.active .step-name {
    color: var(--fh-text-dark);
    font-weight: 600;
}

/* Number change animation */
.number-changing {
    animation: numberPop 0.3s var(--fh-ease-bounce);
}

@keyframes numberPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); color: var(--fh-orange); }
    100% { transform: scale(1); }
}

/* Body padding for fixed bar */
body {
    padding-bottom: 120px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .assignment-bar {
        padding: 10px 16px;
    }

    .points-breakdown {
        gap: 4px;
        padding: 6px 12px;
    }

    .points-section {
        padding: 4px 8px;
    }

    .section-label {
        font-size: 0.6rem;
    }

    .section-points {
        font-size: 1rem;
    }

    .assignment-bar-left {
        display: none;
    }
}

@media (max-width: 768px) {
    .assignment-bar-config {
        flex-wrap: wrap;
        justify-content: center;
    }

    .assignment-bar-center {
        order: 1;
        flex: 0 0 100%;
        margin-bottom: 8px;
    }

    .assignment-bar-right {
        order: 2;
        flex: 0 0 100%;
        justify-content: center;
    }

    .workflow-progress-strip {
        display: none;
    }

    body {
        padding-bottom: 100px;
    }
}

/* ===========================================
   AI Enhancement Panel (Results Area)
   =========================================== */

.ai-enhancement-panel {
    margin: 20px 0;
    background: var(--fh-cream-light);
    border: 1px solid var(--fh-cream-dark);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s var(--fh-ease-smooth);
}

.ai-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: var(--fh-cream);
    border-bottom: 1px solid var(--fh-cream-dark);
    cursor: pointer;
}

.ai-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--fh-text-dark);
}

.ai-panel-icon {
    font-size: 1.2rem;
}

.ai-panel-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.ai-panel-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--fh-cream-dark);
    border-radius: 24px;
    transition: all 0.3s var(--fh-ease-smooth);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s var(--fh-ease-smooth);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.ai-panel-toggle input:checked + .toggle-slider {
    background: var(--fh-orange);
}

.ai-panel-toggle input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

.ai-panel-content {
    padding: 18px;
}

.ai-panel-intro {
    margin-bottom: 16px;
    font-size: 0.9rem;
    color: var(--fh-text-medium);
    line-height: 1.5;
}

.ai-quick-settings {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 16px;
    margin-bottom: 16px;
}

.ai-quick-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ai-quick-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fh-text-medium);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ai-quick-group select,
.ai-quick-group input {
    padding: 8px 12px;
    border: 1px solid var(--fh-cream-dark);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ai-quick-group select:focus,
.ai-quick-group input:focus {
    outline: none;
    border-color: var(--fh-orange);
    box-shadow: 0 0 0 3px rgba(244, 198, 157, 0.25);
}

.api-key-quick-row {
    display: flex;
    gap: 8px;
}

.api-key-quick-row input {
    flex: 1;
}

.api-key-quick-row .btn-small {
    padding: 8px 14px;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Style details/summary */
.ai-style-details {
    margin-top: 8px;
    border: 1px solid var(--fh-cream-dark);
    border-radius: 8px;
    overflow: hidden;
}

.ai-style-details summary {
    padding: 12px 16px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--fh-text-medium);
    background: var(--fh-cream);
    cursor: pointer;
    transition: background 0.2s;
}

.ai-style-details summary:hover {
    background: var(--fh-cream-dark);
}

.ai-style-details[open] summary {
    border-bottom: 1px solid var(--fh-cream-dark);
}

.ai-style-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 16px;
}

.ai-style-group label:first-child {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fh-text-medium);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 10px;
}

.ai-radio-options.compact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-radio-options.compact .ai-radio-option {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.ai-context-group {
    padding: 0 16px 16px;
}

.ai-context-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fh-text-medium);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}

.ai-context-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--fh-cream-dark);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9rem;
    resize: vertical;
    min-height: 60px;
}

.ai-style-details .ai-checkbox-option {
    padding: 12px 16px;
    border-top: 1px solid var(--fh-cream-dark);
    margin: 0;
}

.ai-batch-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--fh-cream-dark);
}

/* Generated Feedback Panel (collapsible details element) */
.generated-feedback-panel {
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.04) 0%, rgba(99, 102, 241, 0.02) 50%, rgba(139, 92, 246, 0.03) 100%);
    margin-top: 16px;
    position: relative;
    overflow: hidden;
}

/* Static subtle AI background texture - no animation */
.generated-feedback-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(99, 102, 241, 0.04) 0%, transparent 50%);
    pointer-events: none;
}

/* Override the generic .ai-panel-header space-between for Generated Feedback */
.generated-feedback-panel > summary.ai-panel-header {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 12px;
    padding: 14px 20px;
    background: transparent;
    border-bottom: none;
    cursor: pointer;
    user-select: none;
    list-style: none;
    border-radius: 12px;
}

.generated-feedback-panel > summary.ai-panel-header::-webkit-details-marker {
    display: none;
}

/* Expand icon on the left */
.generated-feedback-panel .ai-expand-icon {
    font-size: 1.1rem;
    font-weight: 500;
    color: rgba(139, 92, 246, 0.7);
    width: 20px;
    text-align: center;
    transition: transform 0.2s ease;
}

.generated-feedback-panel[open] .ai-expand-icon {
    transform: rotate(45deg);
}

/* Remove the ::after indicator since we use .ai-expand-icon */
.generated-feedback-panel > summary.ai-panel-header::after {
    display: none;
}

.generated-feedback-panel[open] > summary.ai-panel-header {
    border-bottom: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 12px 12px 0 0;
}

.generated-feedback-panel > .ai-panel-content {
    padding: 20px;
}

.generated-feedback-panel .ai-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.generated-feedback-panel .ai-panel-icon {
    font-size: 1rem;
}

.generated-feedback-panel .ai-panel-intro {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
    line-height: 1.5;
}

/* API Configuration Section */
.ai-config-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.1);
}

.ai-config-row {
    display: grid;
    grid-template-columns: 140px 180px 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 768px) {
    .ai-config-row {
        grid-template-columns: 1fr 1fr;
    }
    .ai-config-group.api-key-group {
        grid-column: 1 / -1;
    }
}

.ai-config-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ai-config-group label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ai-config-group select {
    padding: 8px 12px;
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-width: 140px;
    height: 38px;
}

.ai-config-group.api-key-group {
    min-width: 200px;
}

.api-key-input-row {
    display: flex;
    gap: 8px;
}

.api-key-input-row input {
    flex: 1;
    padding: 8px 12px;
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    height: 38px;
    box-sizing: border-box;
}

.api-key-input-row .btn-small {
    padding: 8px 14px;
    font-size: 0.8rem;
    height: 38px;
}

/* Style Section */
.ai-style-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.1);
}

.ai-style-row {
    display: grid;
    grid-template-columns: 140px 180px 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 768px) {
    .ai-style-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.ai-style-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-style-group > label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Radio Pills */
.ai-radio-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 32px;
}

.ai-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: none;
    height: 32px;
    box-sizing: border-box;
}

.ai-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ai-pill:hover {
    border-color: rgba(139, 92, 246, 0.5);
    color: var(--text-primary);
}

.ai-pill:has(input:checked) {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    border-color: #7C3AED;
    color: white;
    text-transform: none;
}

/* Length Slider */
.ai-length-group {
    flex: 1;
    min-width: 180px;
}

.ai-length-slider {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 32px; /* Match pill height for vertical alignment */
}

.ai-length-slider input[type="range"] {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, var(--border-color) 0%, rgba(139, 92, 246, 0.3) 100%);
    border-radius: 3px;
    cursor: pointer;
}

.ai-length-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3);
}

.ai-length-slider input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3);
}

.ai-length-label-left,
.ai-length-label-right {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* Context Section */
.ai-context-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.ai-context-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ai-context-field label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
}

.ai-context-field .context-label-text {
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ai-context-field .context-hint {
    font-size: 0.7rem;
    font-weight: 400;
    color: rgba(139, 92, 246, 0.8);
    text-transform: none;
    letter-spacing: 0;
}

.ai-context-field textarea {
    padding: 10px 12px;
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
    line-height: 1.5;
}

.ai-context-field textarea:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* Actions Section */
.ai-actions-section {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 8px;
}

/* Unified Style Grid (horizontal layout) */
.ai-style-options {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--fh-cream-dark);
}

.ai-style-grid-unified {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 16px;
}

.ai-style-grid-unified .ai-style-group {
    flex: 0 0 auto;
}

.ai-style-grid-unified .ai-style-group > label:first-child {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

/* Improved radio options styling - rounder pills */
.ai-style-grid-unified .ai-radio-options.compact {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.ai-style-grid-unified .ai-radio-option {
    padding: 7px 14px;
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    transition: all 0.15s ease;
    text-transform: none;
    font-weight: 500;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.ai-style-grid-unified .ai-radio-option span {
    display: inline-block;
    line-height: 1;
}

.ai-style-grid-unified .ai-radio-option:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.ai-style-grid-unified .ai-radio-option:has(input:checked) {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    border-color: #7C3AED;
    color: white;
    text-transform: none;
}

/* Purple Generate Button */
.ai-generate-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    border: none;
    border-radius: 10px;
    color: #fff !important;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}

/* Ensure all text inside button is white */
.ai-generate-btn,
.ai-generate-btn span,
.ai-generate-btn .btn-icon {
    color: #fff !important;
}

.ai-generate-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #9d6eff 0%, #8B5CF6 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35);
    color: #fff !important;
}

.ai-generate-btn:disabled {
    background: var(--bg-tertiary);
    color: var(--text-tertiary) !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    text-shadow: none;
    opacity: 0.6;
}

.ai-generate-btn:disabled span,
.ai-generate-btn:disabled .btn-icon {
    color: var(--text-tertiary) !important;
}

.ai-generate-btn .btn-icon {
    font-size: 1.1rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Legacy class kept for compatibility */
.ai-generate-all {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 0.95rem;
}

.ai-generate-all .btn-icon {
    font-size: 1.1rem;
}

/* Dark mode for Generated Feedback Panel */
[data-theme="dark"] .generated-feedback-panel {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.04) 50%, rgba(139, 92, 246, 0.06) 100%);
    border-color: rgba(139, 92, 246, 0.3);
}

[data-theme="dark"] .generated-feedback-panel::before {
    background:
        radial-gradient(ellipse at 20% 30%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(99, 102, 241, 0.06) 0%, transparent 50%);
}

/* Dark mode for length slider */
[data-theme="dark"] .ai-length-slider input[type="range"] {
    background: linear-gradient(to right, var(--border-color) 0%, rgba(139, 92, 246, 0.4) 100%);
}

[data-theme="dark"] .ai-length-label-left,
[data-theme="dark"] .ai-length-label-right {
    color: var(--text-tertiary);
}

[data-theme="dark"] .generated-feedback-panel > summary.ai-panel-header::after {
    color: var(--text-tertiary);
}

[data-theme="dark"] .generated-feedback-panel .ai-expand-icon {
    color: rgba(167, 139, 250, 0.9);
}

[data-theme="dark"] .generated-feedback-panel[open] > summary.ai-panel-header {
    border-bottom-color: rgba(139, 92, 246, 0.2);
}

/* Dark mode for AI config section */
[data-theme="dark"] .ai-config-section {
    border-bottom-color: rgba(139, 92, 246, 0.15);
}

[data-theme="dark"] .ai-config-group label {
    color: var(--text-secondary);
}

[data-theme="dark"] .ai-config-group select,
[data-theme="dark"] .api-key-input-row input {
    background: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Dark mode for AI style section */
[data-theme="dark"] .ai-style-section {
    border-bottom-color: rgba(139, 92, 246, 0.15);
}

[data-theme="dark"] .ai-style-group > label {
    color: var(--text-secondary);
}

/* Dark mode for AI pills */
[data-theme="dark"] .ai-pill {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .ai-pill:hover {
    border-color: rgba(167, 139, 250, 0.6);
    color: var(--text-primary);
}

[data-theme="dark"] .ai-pill:has(input:checked) {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    border-color: #7C3AED;
    color: white;
}

/* Dark mode for AI context section */
[data-theme="dark"] .ai-context-field label .context-label-text {
    color: var(--text-secondary);
}

[data-theme="dark"] .ai-context-field label .context-hint {
    color: rgba(167, 139, 250, 0.8);
}

[data-theme="dark"] .ai-context-field textarea {
    background: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .ai-context-field textarea:focus {
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

/* Dark mode for AI actions section */
[data-theme="dark"] .ai-actions-section .ai-generate-btn {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
}

[data-theme="dark"] .ai-actions-section .ai-generate-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #9d6eff, #8B5CF6);
}

[data-theme="dark"] .ai-style-options {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .ai-style-grid-unified .ai-radio-option {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .ai-style-grid-unified .ai-radio-option:has(input:checked) {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    border-color: #7C3AED;
    color: white;
}

.ai-batch-progress {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ai-batch-progress .progress-bar {
    flex: 1;
    height: 8px;
    background: var(--fh-cream-dark);
    border-radius: 4px;
    overflow: hidden;
}

.ai-batch-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fh-orange) 0%, var(--fh-orange-hover) 100%);
    border-radius: 4px;
    transition: width 0.3s var(--fh-ease-smooth);
}

.ai-batch-progress .progress-text {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--fh-text-medium);
    white-space: nowrap;
}

/* Dark mode for AI Enhancement Panel */
[data-theme="dark"] .ai-enhancement-panel {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .ai-panel-header {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .ai-panel-title {
    color: var(--text-primary);
}

[data-theme="dark"] .toggle-slider {
    background: var(--border-color);
}

[data-theme="dark"] .ai-panel-intro {
    color: var(--text-secondary);
}

[data-theme="dark"] .ai-quick-group label,
[data-theme="dark"] .ai-style-group label:first-child,
[data-theme="dark"] .ai-context-group label {
    color: var(--text-secondary);
}

[data-theme="dark"] .ai-quick-group select,
[data-theme="dark"] .ai-quick-group input,
[data-theme="dark"] .ai-context-group textarea {
    background: var(--bg-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .ai-style-details {
    border-color: var(--border-color);
}

[data-theme="dark"] .ai-style-details summary {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

[data-theme="dark"] .ai-style-details summary:hover {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .ai-style-details[open] summary {
    border-color: var(--border-color);
}

[data-theme="dark"] .ai-style-details .ai-checkbox-option {
    border-color: var(--border-color);
}

[data-theme="dark"] .ai-batch-actions {
    border-color: var(--border-color);
}

[data-theme="dark"] .ai-batch-progress .progress-bar {
    background: var(--border-color);
}

[data-theme="dark"] .ai-batch-progress .progress-text {
    color: var(--text-secondary);
}

/* Responsive for AI Enhancement Panel */
@media (max-width: 768px) {
    .ai-quick-settings {
        grid-template-columns: 1fr;
    }

    .ai-style-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ai-batch-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ai-batch-progress {
        order: -1;
    }
}

/* ==================== Score Distribution Histogram ==================== */

.score-distribution {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
}

.distribution-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.distribution-stats {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.dist-stat-value {
    font-family: var(--font-display, var(--font-heading));
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.dist-stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.dist-stat-separator {
    color: var(--text-secondary);
    opacity: 0.4;
    margin: 0 8px;
}

.distribution-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.distribution-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.summary-low {
    color: var(--color-error, #ef4444);
    font-weight: 600;
}

.summary-high {
    color: var(--color-success, #22c55e);
    font-weight: 600;
}

.summary-separator {
    color: var(--text-secondary);
    opacity: 0.5;
}

/* Chart Container */
.distribution-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 80px;
    gap: 4px;
    padding: 0 4px;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 12px;
}

.chart-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
}

.bar-fill {
    width: 100%;
    max-width: 40px;
    background: linear-gradient(180deg, var(--fh-orange) 0%, var(--fh-orange-dark) 100%);
    border-radius: 4px 4px 0 0;
    min-height: 0;
    transition: height 0.3s var(--fh-ease-smooth);
    position: absolute;
    bottom: 0;
}

/* Color gradient based on bucket position */
.chart-bar[data-bucket="0"] .bar-fill,
.chart-bar[data-bucket="1"] .bar-fill,
.chart-bar[data-bucket="2"] .bar-fill,
.chart-bar[data-bucket="3"] .bar-fill,
.chart-bar[data-bucket="4"] .bar-fill,
.chart-bar[data-bucket="5"] .bar-fill {
    background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
}

.chart-bar[data-bucket="6"] .bar-fill {
    background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
}

.chart-bar[data-bucket="7"] .bar-fill,
.chart-bar[data-bucket="8"] .bar-fill {
    background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
}

.chart-bar[data-bucket="9"] .bar-fill {
    background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
}

.bar-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-secondary);
    position: absolute;
    bottom: -18px;
}

/* Bar count tooltip on hover */
.chart-bar[data-count]:not([data-count="0"])::after {
    content: attr(data-count);
    position: absolute;
    top: -20px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.chart-bar:hover[data-count]:not([data-count="0"])::after {
    opacity: 1;
}

/* Extremes Row */
.distribution-extremes {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}

.extreme-low,
.extreme-high {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    min-width: 140px;
}

.extreme-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    font-weight: 600;
}

.extreme-value {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
}

.extreme-low .extreme-value {
    color: var(--color-error, #ef4444);
}

.extreme-high .extreme-value {
    color: var(--color-success, #22c55e);
}

.extreme-name {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

/* Dark theme adjustments */
[data-theme="dark"] .score-distribution,
[data-theme="espresso"] .score-distribution,
[data-theme="moonlight"] .score-distribution,
[data-theme="mossglow"] .score-distribution {
    background: var(--bg-secondary);
}

/* Responsive */
@media (max-width: 600px) {
    .distribution-chart {
        height: 60px;
    }

    .distribution-extremes {
        flex-direction: column;
        gap: 8px;
    }

    .extreme-low,
    .extreme-high {
        min-width: unset;
    }

    .extreme-name {
        max-width: 150px;
    }
}

/* ============================================
   HTML/CSS GRADING PANEL STYLES
   ============================================ */

/* Preview Modal */
.preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.preview-modal-content {
    background: var(--bg-primary);
    border-radius: 12px;
    width: 100%;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.preview-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.preview-modal-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.viewport-switcher {
    display: flex;
    gap: 4px;
}

.viewport-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.viewport-btn:hover {
    background: var(--bg-card);
}

.viewport-btn.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.preview-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: 4px;
}

.preview-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.preview-frame-container {
    flex: 1;
    overflow: auto;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    padding: 20px;
}

.preview-frame {
    border: none;
    background: white;
    height: 600px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: width 0.3s ease;
}

/* HTML Results Styles */
.results-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 12px;
}

.summary-stat {
    text-align: center;
}

.summary-stat .stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
}

.summary-stat .stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.results-list {
    display: grid;
    gap: 16px;
}

.result-card {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 16px;
    border: 1px solid var(--border-color);
    transition: box-shadow 0.2s ease;
}

.result-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.result-card.pass {
    border-left: 4px solid var(--color-success);
}

.result-card.fail {
    border-left: 4px solid var(--color-error);
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.result-header .student-name {
    font-weight: 600;
    font-size: 1rem;
}

.result-score {
    font-weight: 700;
    font-family: var(--font-mono);
}

.result-filename {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.result-percentage {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.result-percentage.pass {
    color: var(--color-success);
}

.result-percentage.fail {
    color: var(--color-error);
}

.result-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.check-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--bg-tertiary);
}

.check-badge.pass {
    background: rgba(34, 197, 94, 0.15);
    color: var(--color-success);
}

.check-badge.fail {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-error);
}

.result-actions {
    display: flex;
    gap: 8px;
}

.result-actions .btn-sm {
    font-size: 0.8rem;
    padding: 6px 12px;
}

/* Semantic element grid */
.toggle-option.compact {
    font-size: 0.85rem;
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.toggle-option.compact:hover {
    background: var(--bg-card);
}

.toggle-option.compact input[type="checkbox"] {
    width: 14px;
    height: 14px;
}

/* Framework grid with selectors */
.framework-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.framework-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 90px;
}

.framework-label {
    font-size: 0.75rem;
    color: var(--text-muted, #9ca3af);
    font-weight: 500;
}

.framework-select {
    padding: 6px 8px;
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    width: 100%;
}

.framework-select:focus {
    outline: none;
    border-color: var(--accent-color);
}

.framework-select option[value="required"] {
    color: #3fb950;
}

.framework-select option[value="forbidden"] {
    color: #f85149;
}

/* Other framework column */
.framework-other {
    flex: 1.5;
}

.framework-other-controls {
    display: flex;
    gap: 4px;
}

.framework-other-input {
    padding: 6px 8px;
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    flex: 1;
    min-width: 60px;
}

.framework-other-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.framework-other-input::placeholder {
    color: var(--text-muted, #9ca3af);
    font-style: italic;
}

.framework-other .framework-select {
    flex: 0 0 auto;
    width: auto;
}

/* No results message */
.no-results {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
    font-style: italic;
}



/* ============================================================
   HTML Panel - Project Structure Grid
   ============================================================ */

.structure-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 900px) {
    .structure-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .structure-grid {
        grid-template-columns: 1fr;
    }
}

.structure-card {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.structure-card:hover {
    border-color: var(--accent-color, #6366f1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .structure-card {
    background: var(--bg-tertiary, #1e1e1e);
}

.structure-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-tertiary, #f9fafb);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    font-weight: 600;
    font-size: 0.85rem;
}

[data-theme="dark"] .structure-card-header {
    background: var(--bg-secondary, #2a2a2a);
}

.structure-card-icon {
    font-size: 1rem;
}

.structure-card-title {
    color: var(--text-primary, #1f2937);
}

.structure-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.structure-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.structure-input-group label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
}

.structure-input-group input[type="text"],
.structure-input-group input[type="number"],
.structure-input-group textarea {
    padding: 6px 10px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 5px;
    font-size: 0.85rem;
    background: var(--input-bg, #ffffff);
    color: var(--text-primary, #1f2937);
    font-family: var(--font-mono);
}

.structure-input-group textarea {
    resize: vertical;
    min-height: 2.5em;
}

.structure-input-group input:focus,
.structure-input-group textarea:focus {
    outline: none;
    border-color: var(--accent-color, #6366f1);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.structure-input-group .input-hint {
    font-size: 0.7rem;
    color: var(--text-muted, #9ca3af);
}

.small-number-input {
    width: 60px !important;
}

/* Side-by-side input row for structure cards */
.structure-input-row {
    display: flex;
    gap: 8px;
}

.structure-input-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.structure-input-col .input-col-label {
    font-size: 0.65rem;
    color: var(--text-muted, #9ca3af);
    white-space: nowrap;
}

.structure-input-col .small-number-input {
    width: 100% !important;
}

/* Compact toggle for structure cards */
.compact-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.85rem;
}

.compact-toggle input[type="checkbox"] {
    display: none;
}

.compact-toggle .toggle-track {
    width: 36px;
    height: 20px;
    background: var(--bg-tertiary, #e5e7eb);
    border-radius: 10px;
    position: relative;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.compact-toggle .toggle-track::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.compact-toggle input:checked + .toggle-track {
    background: var(--accent-color, #6366f1);
}

.compact-toggle input:checked + .toggle-track::after {
    transform: translateX(16px);
}

.compact-toggle .toggle-label {
    color: var(--text-primary, #1f2937);
}

/* Compact radio options for inline separator/case selectors */
.radio-option.compact {
    padding: 4px 8px;
    font-size: 0.8rem;
}

.radio-option.compact .radio-label {
    font-size: 0.8rem;
}

.radio-option.compact .radio-custom {
    width: 14px;
    height: 14px;
}

.radio-option.compact .radio-custom::after {
    width: 6px;
    height: 6px;
}

/* ============================================================
   CODE-CRITERIA PANEL COMPONENT
   A bidirectional split panel for code editing and criteria selection
   ============================================================ */

.code-criteria-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--border-color, #2a2a2a);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-secondary, #1a1a1a);
    min-height: 320px;
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Responsive: stack on smaller screens */
@media (max-width: 900px) {
    .code-criteria-panel {
        grid-template-columns: 1fr;
    }
}

/* === CODE EDITOR SIDE === */
.code-panel {
    display: flex;
    flex-direction: column;
    background: #0d1117;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}

.code-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(180deg, #161b22 0%, #0d1117 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.code-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.code-panel-title::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #3fb950;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(63, 185, 80, 0.5);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(63, 185, 80, 0.5); }
    50% { opacity: 0.7; box-shadow: 0 0 4px rgba(63, 185, 80, 0.3); }
}

.code-panel-actions {
    display: flex;
    gap: 6px;
}

.code-action-btn {
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #8b949e;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.code-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #c9d1d9;
    border-color: rgba(255, 255, 255, 0.2);
}

.code-action-btn.primary {
    background: rgba(56, 139, 253, 0.15);
    border-color: rgba(56, 139, 253, 0.4);
    color: #58a6ff;
}

.code-action-btn.primary:hover {
    background: rgba(56, 139, 253, 0.25);
}

/* Code Editor Wrapper - used in tabbed code validation */
.code-editor-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 400px;
    background: #0d1117;
    border-radius: 8px;
    overflow: hidden;
}

.code-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(180deg, #1c2128 0%, #161b22 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.code-editor-title {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: #c9d1d9;
    display: flex;
    align-items: center;
    gap: 8px;
}

.code-editor-title::before {
    content: '';
    width: 10px;
    height: 10px;
    background: #3fb950;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(63, 185, 80, 0.5);
}

.code-editor-hint {
    font-size: 0.75rem;
    color: #6e7681;
    font-style: italic;
}

.code-editor-body {
    flex: 1;
    display: flex;
    position: relative;
    overflow: hidden;
    min-height: 350px;
}

/* Line Numbers - generic class used in tabbed panels */
.line-numbers {
    padding: 14px 0;
    background: rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    user-select: none;
    min-width: 48px;
    text-align: right;
    overflow-y: hidden;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.6;
    color: #484f58;
}

.line-numbers span {
    display: block;
    padding: 0 12px 0 8px;
}

/* Code Editor Container */
.code-editor-container {
    flex: 1;
    position: relative;
    display: flex;
}

.code-line-numbers {
    padding: 14px 0;
    background: rgba(0, 0, 0, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    user-select: none;
    min-width: 40px;
    text-align: right;
}

.code-line-numbers span {
    display: block;
    padding: 0 10px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.6;
    color: #484f58;
}

.code-input-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.code-textarea {
    width: 100%;
    height: 100%;
    min-height: 250px;
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.6;
    background: transparent;
    border: none;
    color: #c9d1d9;
    resize: none;
    outline: none;
    white-space: pre;
    overflow-x: auto;
    tab-size: 2;
    -moz-tab-size: 2;
}

.code-textarea::placeholder {
    color: #484f58;
    font-style: italic;
}

/* Code textarea within code-editor-body */
.code-editor-body .code-textarea {
    flex: 1;
    min-height: 100%;
    padding: 14px;
    background: #0d1117;
}

/* Syntax Highlighted Preview (layered behind textarea) */
.code-highlight-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.6;
    white-space: pre;
    overflow: hidden;
    pointer-events: none;
    color: transparent;
}

/* Syntax Highlighting Colors (GitHub Dark Theme) */
.code-highlight-layer .tag { color: #7ee787; }
.code-highlight-layer .attr-name { color: #79c0ff; }
.code-highlight-layer .attr-value { color: #a5d6ff; }
.code-highlight-layer .string { color: #a5d6ff; }
.code-highlight-layer .comment { color: #8b949e; font-style: italic; }
.code-highlight-layer .doctype { color: #8b949e; }
.code-highlight-layer .punctuation { color: #8b949e; }
.code-highlight-layer .text { color: #c9d1d9; }

/* Sync Indicator */
.code-sync-indicator {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    font-size: 0.7rem;
    color: #8b949e;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.2s ease;
}

.code-sync-indicator.active {
    opacity: 1;
    transform: translateY(0);
}

.code-sync-indicator.syncing {
    color: #58a6ff;
}

.code-sync-indicator.syncing::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #58a6ff;
    border-radius: 50%;
    animation: sync-pulse 0.6s ease-in-out infinite;
}

@keyframes sync-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
}

/* === CRITERIA SIDE === */
.criteria-panel {
    display: flex;
    flex-direction: column;
    background: var(--bg-primary, #161b22);
}

.criteria-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.criteria-panel-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary, #8b949e);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.criteria-count-badge {
    padding: 2px 8px;
    background: rgba(56, 139, 253, 0.15);
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #58a6ff;
}

.criteria-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

/* Criteria Group */
.criteria-group {
    margin-bottom: 16px;
}

.criteria-group:last-child {
    margin-bottom: 0;
}

.criteria-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    border-left: 3px solid var(--accent-color, #58a6ff);
}

.criteria-group-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary, #c9d1d9);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.criteria-group-count {
    font-size: 0.7rem;
    color: var(--text-muted, #6e7681);
}

/* Individual Criteria Items */
.criteria-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: transparent;
    border: 1px solid transparent;
    position: relative;
    z-index: 1;
}

.criteria-check-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.criteria-check-item.detected {
    background: rgba(63, 185, 80, 0.08);
    border-color: rgba(63, 185, 80, 0.2);
}

.criteria-check-item.detected::after {
    content: 'FOUND';
    padding: 1px 6px;
    font-size: 0.6rem;
    font-weight: 600;
    background: rgba(63, 185, 80, 0.2);
    color: #3fb950;
    border-radius: 4px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    order: 2;
    pointer-events: none;
}

/* Missing state - requirement checked but not detected in code */
.criteria-check-item.missing {
    background: rgba(248, 81, 73, 0.08);
    border-color: rgba(248, 81, 73, 0.2);
}

.criteria-check-item.missing::after {
    content: 'MISSING';
    padding: 1px 6px;
    font-size: 0.6rem;
    font-weight: 600;
    background: rgba(248, 81, 73, 0.2);
    color: #f85149;
    border-radius: 4px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    order: 2;
    pointer-events: none;
}

/* Line Number Badge */
.line-badge {
    margin-left: auto;
    padding: 1px 5px;
    font-size: 0.55rem;
    font-weight: 500;
    font-family: var(--font-mono);
    background: rgba(139, 148, 158, 0.15);
    color: #8b949e;
    border-radius: 3px;
    cursor: help;
    flex-shrink: 0;
    transition: all 0.15s ease;
    order: 1;
}

.criteria-check-item.detected .line-badge {
    background: rgba(63, 185, 80, 0.12);
    color: #7ee787;
    margin-right: 6px;
}

.line-badge:hover {
    background: rgba(139, 148, 158, 0.25);
    transform: scale(1.05);
}

.criteria-check-item.detected .line-badge:hover {
    background: rgba(63, 185, 80, 0.25);
}

/* Mobile-first indicator - highlight when detected */
.criteria-check-item.mobile-first-indicator.detected {
    background: rgba(63, 185, 80, 0.12);
    border-color: rgba(63, 185, 80, 0.3);
}

.criteria-check-item.mobile-first-indicator .criteria-label small {
    color: #3fb950;
    font-weight: 500;
}

/* Warn indicator - for items that should be avoided */
.criteria-check-item.warn-indicator.detected {
    background: rgba(210, 153, 34, 0.08);
    border-color: rgba(210, 153, 34, 0.2);
}

.criteria-check-item.warn-indicator.detected::after {
    content: 'WARN';
    background: rgba(210, 153, 34, 0.2);
    color: #d29922;
}

.criteria-check-item.warn-indicator .criteria-label small {
    color: #8b949e;
    font-size: 0.65rem;
}

/* Desktop-first indicator - less preferred approach */
.criteria-check-item.desktop-first-indicator.detected {
    background: rgba(210, 153, 34, 0.06);
    border-color: rgba(210, 153, 34, 0.15);
}

/* Quantity Picker for criteria items */
.criteria-qty-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    margin-bottom: 2px;
    border-radius: 5px;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.criteria-qty-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.criteria-qty-item.detected {
    background: rgba(63, 185, 80, 0.08);
    border-color: rgba(63, 185, 80, 0.2);
}

.criteria-qty-item.partial {
    background: rgba(210, 153, 34, 0.08);
    border-color: rgba(210, 153, 34, 0.2);
}

.criteria-qty-item .criteria-label {
    flex: 1;
    font-size: 0.8rem;
    color: var(--text-primary, #c9d1d9);
}

.criteria-qty-item .criteria-label code {
    background: rgba(110, 118, 129, 0.15);
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: var(--font-mono);
}

/* Dim qty picker when checkbox is unchecked */
.criteria-qty-item:has(input[type="checkbox"]:not(:checked)) .qty-picker {
    opacity: 0.4;
    pointer-events: none;
}

.criteria-qty-item:has(input[type="checkbox"]:not(:checked)) .criteria-label {
    opacity: 0.5;
}

/* Quantity Picker Control */
.qty-picker {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: opacity 0.15s ease;
}

.qty-picker button {
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    color: #8b949e;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    line-height: 1;
}

.qty-picker button:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #c9d1d9;
}

.qty-picker button:active {
    transform: scale(0.95);
}

.qty-picker button.qty-minus {
    border-radius: 4px 0 0 4px;
}

.qty-picker button.qty-plus {
    border-radius: 0 4px 4px 0;
}

.qty-picker .qty-value {
    width: 32px;
    height: 24px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #c9d1d9;
    font-family: var(--font-mono);
    padding: 0 4px;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
}

/* Hide number input spinners */
.qty-picker .qty-value::-webkit-outer-spin-button,
.qty-picker .qty-value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-picker .qty-value:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}

.qty-picker .qty-value.zero {
    color: #6e7681;
}

.qty-picker .qty-label {
    font-size: 9px;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
    opacity: 0.8;
}

/* Qty status indicators */
.criteria-qty-item .qty-status {
    font-size: 0.65rem;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
}

.criteria-qty-item.detected .qty-status {
    background: rgba(63, 185, 80, 0.2);
    color: #3fb950;
}

.criteria-qty-item.partial .qty-status {
    background: rgba(210, 153, 34, 0.2);
    color: #d29922;
}

.criteria-qty-item .line-badge {
    margin-left: 0;
    margin-right: 6px;
}

/* Custom Checkbox */
.criteria-checkbox {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    pointer-events: none; /* Let clicks pass through to the input inside */
}

.criteria-checkbox input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
    z-index: 2;
    pointer-events: auto; /* Restore click handling on the input itself */
}

.criteria-checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    transition: all 0.15s ease;
    z-index: 1;
    pointer-events: none;
}

.criteria-checkbox input:checked + .checkmark {
    background: #238636;
    border-color: #238636;
}

.criteria-checkbox .checkmark::after {
    content: '';
    position: absolute;
    display: none;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.criteria-checkbox input:checked + .checkmark::after {
    display: block;
}

.criteria-checkbox input:focus + .checkmark {
    box-shadow: 0 0 0 2px rgba(56, 139, 253, 0.3);
}

/* Criteria Label */
.criteria-label {
    flex: 1;
    font-size: 0.8rem;
    color: var(--text-primary, #c9d1d9);
    line-height: 1.3;
    pointer-events: none; /* Let clicks pass through to parent label */
}

.criteria-label code {
    padding: 1px 5px;
    background: rgba(110, 118, 129, 0.2);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #79c0ff;
}

/* Criteria Footer */
.criteria-footer {
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Detection Status */
.detection-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-muted, #6e7681);
}

.detection-status .status-icon {
    font-size: 0.6rem;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.detection-status.validating .status-icon {
    color: #f0883e;
    opacity: 1;
    animation: pulse 1s ease-in-out infinite;
}

.detection-status.validated .status-icon {
    color: #3fb950;
    opacity: 1;
}

.detection-status.partial .status-icon {
    color: #d29922;
    opacity: 1;
}

.detection-status.missing .status-icon {
    color: #f85149;
    opacity: 1;
}

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

/* Points Display in Criteria Panel */
.criteria-points-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.criteria-points-display label {
    font-size: 0.75rem;
    color: var(--text-muted, #6e7681);
}

.criteria-points-display input {
    width: 50px;
    padding: 4px 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-primary, #c9d1d9);
}

.criteria-points-display input:focus {
    outline: none;
    border-color: #58a6ff;
}

/* Light theme adjustments */
[data-theme="light"] .code-panel,
[data-theme="warm-sand"] .code-panel,
[data-theme="cherry-blossom"] .code-panel {
    background: #fafbfc;
    border-right-color: #e1e4e8;
}

[data-theme="light"] .code-panel-header,
[data-theme="warm-sand"] .code-panel-header,
[data-theme="cherry-blossom"] .code-panel-header {
    background: linear-gradient(180deg, #f6f8fa 0%, #fafbfc 100%);
    border-bottom-color: #e1e4e8;
}

[data-theme="light"] .code-textarea,
[data-theme="warm-sand"] .code-textarea,
[data-theme="cherry-blossom"] .code-textarea {
    color: #24292e;
}

[data-theme="light"] .code-line-numbers span,
[data-theme="warm-sand"] .code-line-numbers span,
[data-theme="cherry-blossom"] .code-line-numbers span {
    color: #babbbd;
}

[data-theme="light"] .code-highlight-layer .tag,
[data-theme="warm-sand"] .code-highlight-layer .tag,
[data-theme="cherry-blossom"] .code-highlight-layer .tag { color: #22863a; }

[data-theme="light"] .code-highlight-layer .attr-name,
[data-theme="warm-sand"] .code-highlight-layer .attr-name,
[data-theme="cherry-blossom"] .code-highlight-layer .attr-name { color: #6f42c1; }

[data-theme="light"] .code-highlight-layer .attr-value,
[data-theme="warm-sand"] .code-highlight-layer .attr-value,
[data-theme="cherry-blossom"] .code-highlight-layer .attr-value { color: #032f62; }

[data-theme="light"] .criteria-panel,
[data-theme="warm-sand"] .criteria-panel,
[data-theme="cherry-blossom"] .criteria-panel {
    background: var(--bg-secondary, #ffffff);
}

[data-theme="light"] .criteria-check-item:hover,
[data-theme="warm-sand"] .criteria-check-item:hover,
[data-theme="cherry-blossom"] .criteria-check-item:hover {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .criteria-checkbox .checkmark,
[data-theme="warm-sand"] .criteria-checkbox .checkmark,
[data-theme="cherry-blossom"] .criteria-checkbox .checkmark {
    background: #ffffff;
    border-color: #d0d7de;
}

/* ====================================
   CRITERIA ACCORDION STYLES
   ==================================== */

/* Expand All Button */
.criteria-expand-all {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 500;
    color: #58a6ff;
    background: transparent;
    border: 1px solid rgba(88, 166, 255, 0.3);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.criteria-expand-all:hover {
    background: rgba(88, 166, 255, 0.1);
    border-color: rgba(88, 166, 255, 0.5);
}

.criteria-expand-all .expand-icon {
    transition: transform 0.2s ease;
    font-size: 0.8rem;
}

.criteria-expand-all.all-expanded .expand-icon {
    transform: rotate(180deg);
}

/* ============================================
   Code Validation Tabs
   ============================================ */

.code-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.code-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #8b949e;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.code-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #c9d1d9;
}

.code-tab.active {
    background: rgba(88, 166, 255, 0.15);
    color: #58a6ff;
    box-shadow: 0 2px 8px rgba(88, 166, 255, 0.1);
}

.code-tab .tab-icon {
    font-size: 1rem;
}

.code-tab .tab-label {
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Tab Contents */
.code-tab-contents {
    position: relative;
}

.code-tab-content {
    display: none;
}

.code-tab-content.active {
    display: block;
    animation: tabFadeIn 0.25s ease;
}

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

/* Code-Criteria Container (shared by all tabs) */
.code-criteria-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 500px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #161b22;
}

.code-criteria-container > .code-panel {
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

.code-criteria-container > .criteria-panel {
    min-height: 500px;
    max-height: 600px;
    overflow-y: auto;
}

@media (max-width: 1200px) {
    .code-criteria-container {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   Section Enable/Disable Toggle
   ============================================================================ */

.section-toggle-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin-bottom: 12px;
    background: var(--fh-cream, #f2e9d8);
    border: 1px solid var(--fh-cream-dark, #e5d9c3);
    border-radius: 8px;
}

.section-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.section-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 24px;
    transition: background-color 0.3s;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.section-toggle input:checked + .toggle-slider {
    background-color: var(--accent-primary, #c9a55c);
}

.section-toggle input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.section-toggle-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--fh-text-dark, #4a3f35);
}

/* Disabled section state */
.code-criteria-container.section-disabled {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(30%);
}

.code-criteria-container.section-disabled::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    pointer-events: none;
}

/* Dark mode adjustments */
[data-theme="dark"] .section-toggle-bar {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .section-toggle-label {
    color: var(--text-primary);
}

[data-theme="dark"] .toggle-slider {
    background-color: #555;
}

[data-theme="dark"] .code-criteria-container.section-disabled::after {
    background: rgba(0, 0, 0, 0.2);
}

/* Library grid styling */
.library-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.library-item .criteria-label {
    font-size: 0.75rem;
}

/* Custom Library Input */
.custom-library-input {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.custom-library-header {
    font-size: 0.75rem;
    color: #8b949e;
    margin-bottom: 8px;
}

.custom-library-fields {
    display: flex;
    gap: 8px;
}

.custom-lib-name {
    flex: 1;
    padding: 6px 10px;
    font-size: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: #c9d1d9;
}

.custom-lib-pattern {
    flex: 2;
    padding: 6px 10px;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: #c9d1d9;
}

.custom-lib-add {
    padding: 6px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(63, 185, 80, 0.15);
    border: 1px solid rgba(63, 185, 80, 0.3);
    border-radius: 4px;
    color: #3fb950;
    cursor: pointer;
    transition: all 0.15s ease;
}

.custom-lib-add:hover {
    background: rgba(63, 185, 80, 0.25);
}

.custom-libraries-list {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.custom-library-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 4px;
    font-size: 0.7rem;
    color: #a78bfa;
}

.custom-library-tag .remove-btn {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #a78bfa;
    cursor: pointer;
    opacity: 0.6;
}

.custom-library-tag .remove-btn:hover {
    opacity: 1;
}

/* Accordion Group */
.criteria-accordion {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.criteria-accordion:last-child {
    margin-bottom: 0;
}

.criteria-accordion:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

/* Accordion Header */
.accordion-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
}

.accordion-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.accordion-toggle {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--text-muted, #6e7681);
    transition: transform 0.2s ease, color 0.15s ease;
    flex-shrink: 0;
}

.criteria-accordion.expanded .accordion-toggle {
    transform: rotate(90deg);
    color: #58a6ff;
}

.accordion-title {
    flex: 1;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary, #c9d1d9);
}

.accordion-count {
    font-size: 0.7rem;
    color: var(--text-muted, #6e7681);
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.accordion-points {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    margin-left: 4px;
}

.accordion-points input {
    width: 36px;
    padding: 2px 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-primary, #c9d1d9);
}

.accordion-points input[type="number"]:focus {
    outline: none;
    border-color: #58a6ff;
}

/* Accordion Slider */
.accordion-slider {
    width: 60px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    cursor: pointer;
    margin: 0;
}

.accordion-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #58a6ff;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.accordion-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(88, 166, 255, 0.5);
}

.accordion-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #58a6ff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.accordion-slider::-moz-range-track {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    height: 4px;
}

.accordion-points-label {
    font-size: 0.65rem;
    color: var(--text-muted, #6e7681);
}

/* Accordion Content */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
}

.criteria-accordion.expanded .accordion-content {
    max-height: 500px;
}

.accordion-inner {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Compact criteria items inside accordion */
.accordion-inner .criteria-check-item {
    padding: 6px 8px;
    margin-bottom: 2px;
}

.accordion-inner .criteria-check-item:last-child {
    margin-bottom: 0;
}

/* Criteria items grid for more compact display */
.criteria-items-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

.criteria-items-grid .criteria-check-item {
    margin-bottom: 0;
}

/* Single column on smaller widths */
@media (max-width: 1200px) {
    .criteria-items-grid {
        grid-template-columns: 1fr;
    }
}

/* Flex layout for qty items - more compact inline display */
.criteria-qty-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.criteria-qty-grid .criteria-qty-item,
.criteria-qty-grid .criteria-check-item {
    flex: 0 0 auto;
    margin-bottom: 0;
}

/* Total Points Display */
.criteria-total-points {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    margin-top: 8px;
    background: rgba(88, 166, 255, 0.08);
    border: 1px solid rgba(88, 166, 255, 0.2);
    border-radius: 6px;
}

.criteria-total-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #58a6ff;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.criteria-total-value {
    font-size: 1rem;
    font-weight: 700;
    color: #58a6ff;
}

/* Light theme adjustments for accordion */
[data-theme="light"] .criteria-accordion,
[data-theme="warm-sand"] .criteria-accordion,
[data-theme="cherry-blossom"] .criteria-accordion {
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .accordion-header,
[data-theme="warm-sand"] .accordion-header,
[data-theme="cherry-blossom"] .accordion-header {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .accordion-header:hover,
[data-theme="warm-sand"] .accordion-header:hover,
[data-theme="cherry-blossom"] .accordion-header:hover {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .accordion-inner,
[data-theme="warm-sand"] .accordion-inner,
[data-theme="cherry-blossom"] .accordion-inner {
    background: rgba(0, 0, 0, 0.02);
    border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .accordion-points input[type="number"],
[data-theme="warm-sand"] .accordion-points input[type="number"],
[data-theme="cherry-blossom"] .accordion-points input[type="number"] {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .accordion-slider,
[data-theme="warm-sand"] .accordion-slider,
[data-theme="cherry-blossom"] .accordion-slider {
    background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .accordion-slider::-webkit-slider-thumb,
[data-theme="warm-sand"] .accordion-slider::-webkit-slider-thumb,
[data-theme="cherry-blossom"] .accordion-slider::-webkit-slider-thumb {
    background: #0969da;
}

[data-theme="light"] .accordion-slider::-moz-range-thumb,
[data-theme="warm-sand"] .accordion-slider::-moz-range-thumb,
[data-theme="cherry-blossom"] .accordion-slider::-moz-range-thumb {
    background: #0969da;
}

[data-theme="light"] .accordion-slider::-moz-range-track,
[data-theme="warm-sand"] .accordion-slider::-moz-range-track,
[data-theme="cherry-blossom"] .accordion-slider::-moz-range-track {
    background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .criteria-expand-all,
[data-theme="warm-sand"] .criteria-expand-all,
[data-theme="cherry-blossom"] .criteria-expand-all {
    color: #0969da;
    border-color: rgba(9, 105, 218, 0.3);
}

[data-theme="light"] .criteria-expand-all:hover,
[data-theme="warm-sand"] .criteria-expand-all:hover,
[data-theme="cherry-blossom"] .criteria-expand-all:hover {
    background: rgba(9, 105, 218, 0.08);
}

/* ============================================================
   INSTRUCTOR EVALUATION / MANUAL CRITERIA STYLES
   ============================================================ */

.section-points-badge {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    background: rgba(88, 166, 255, 0.15);
    color: #58a6ff;
    border-radius: 10px;
}

.section-description {
    font-size: 0.8rem;
    color: var(--text-muted, #8b949e);
    margin: 0 0 16px 0;
    line-height: 1.5;
}

/* Categories Container */
.manual-categories-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

/* Individual Category */
.manual-category {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
}

.manual-category-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.manual-category-header input[type="text"] {
    flex: 1;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 0.85rem;
    font-weight: 500;
    color: inherit;
}

.manual-category-header input[type="text"]:focus {
    outline: none;
    border-color: rgba(88, 166, 255, 0.5);
}

.manual-category-points {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--text-muted, #8b949e);
}

.manual-category-points-value {
    font-weight: 600;
    color: #58a6ff;
}

.remove-category-btn {
    background: transparent;
    border: none;
    color: #f85149;
    cursor: pointer;
    padding: 4px;
    font-size: 1rem;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.remove-category-btn:hover {
    opacity: 1;
}

/* Category Items */
.manual-category-items {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Individual Item */
.manual-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
}

.manual-item-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.manual-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.manual-item-label {
    flex: 1;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 0.8rem;
    color: inherit;
}

.manual-item-label:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

.manual-item-label:focus {
    outline: none;
    border-color: rgba(88, 166, 255, 0.5);
    background: rgba(255, 255, 255, 0.03);
}

.manual-item-type {
    font-size: 0.7rem;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: inherit;
    cursor: pointer;
}

.manual-item-points {
    display: flex;
    align-items: center;
    gap: 4px;
}

.manual-item-points input {
    width: 50px;
    padding: 4px 6px;
    font-size: 0.75rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: inherit;
}

.manual-item-points-label {
    font-size: 0.7rem;
    color: var(--text-muted, #8b949e);
}

.remove-item-btn {
    background: transparent;
    border: none;
    color: #f85149;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 0.85rem;
    opacity: 0.5;
    transition: opacity 0.15s;
}

.remove-item-btn:hover {
    opacity: 1;
}

/* Scale/Rubric Levels */
.manual-item-rubric {
    margin-top: 4px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
    font-size: 0.7rem;
}

.rubric-level {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
}

.rubric-level-num {
    width: 16px;
    text-align: center;
    font-weight: 600;
    color: var(--text-muted, #8b949e);
}

.rubric-level-label {
    flex: 1;
    background: transparent;
    border: none;
    padding: 2px 4px;
    font-size: 0.7rem;
    color: inherit;
}

.rubric-level-label:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.rubric-level-points {
    font-size: 0.65rem;
    color: var(--text-muted, #8b949e);
}

/* Add Item Button */
.add-item-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 10px;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: var(--text-muted, #8b949e);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}

.add-item-btn:hover {
    border-color: rgba(88, 166, 255, 0.4);
    color: #58a6ff;
    background: rgba(88, 166, 255, 0.05);
}

/* Add Category Button */
.add-category-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-muted, #8b949e);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}

.add-category-btn:hover {
    border-color: rgba(88, 166, 255, 0.4);
    color: #58a6ff;
    background: rgba(88, 166, 255, 0.05);
}

.add-category-btn .add-icon,
.add-item-btn .add-icon {
    font-weight: bold;
}

/* Automation Settings */
.manual-automation-settings {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.automation-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-muted, #8b949e);
    cursor: pointer;
}

.automation-option input[type="checkbox"] {
    width: 14px;
    height: 14px;
}

.automation-option .optional-badge {
    font-size: 0.65rem;
    padding: 1px 5px;
    background: rgba(210, 153, 34, 0.15);
    color: #d29922;
    border-radius: 3px;
}

/* Hint text for items */
.manual-item-hint {
    font-size: 0.7rem;
    color: var(--text-muted, #8b949e);
    padding: 2px 6px;
    font-style: italic;
}

.manual-item-hint input {
    width: 100%;
    background: transparent;
    border: none;
    font-size: 0.7rem;
    color: var(--text-muted, #8b949e);
    font-style: italic;
}

.manual-item-hint input:focus {
    outline: none;
}

.manual-item-hint input::placeholder {
    color: rgba(139, 148, 158, 0.5);
}

/* ============================================================
   MANUAL GRADING SECTION (Results View)
   ============================================================ */

.manual-grading-section {
    margin-top: 12px;
    padding: 12px;
    background: rgba(88, 166, 255, 0.03);
    border: 1px solid rgba(88, 166, 255, 0.15);
    border-radius: 8px;
}

.manual-grading-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.manual-grading-header .column-title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.manual-grading-total {
    font-size: 0.85rem;
    font-weight: 600;
    color: #58a6ff;
}

.manual-grading-categories {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.manual-category-grading {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
}

.manual-category-grading > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
}

.manual-category-grading > summary::-webkit-details-marker {
    display: none;
}

.manual-category-grading > summary::before {
    content: '▶';
    font-size: 0.6rem;
    margin-right: 8px;
    transition: transform 0.15s;
}

.manual-category-grading[open] > summary::before {
    transform: rotate(90deg);
}

.manual-cat-name {
    flex: 1;
}

.manual-cat-score {
    font-size: 0.75rem;
    color: var(--text-muted, #8b949e);
}

.manual-items-grading {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.manual-item-grading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
    gap: 10px;
}

.manual-item-grading.ungraded {
    border-left: 2px solid rgba(210, 153, 34, 0.4);
}

.manual-item-grading.graded {
    border-left: 2px solid rgba(63, 185, 80, 0.4);
}

.manual-item-info {
    flex: 1;
    min-width: 0;
}

.manual-item-name {
    font-size: 0.8rem;
    display: block;
}

.manual-item-hint-text {
    font-size: 0.7rem;
    color: var(--text-muted, #8b949e);
    font-style: italic;
    margin-top: 2px;
}

.manual-item-control {
    flex-shrink: 0;
}

/* Points input - slider combo */
.manual-points-input {
    display: flex;
    align-items: center;
    gap: 4px;
}

.manual-points-input.slider-combo {
    gap: 8px;
}

.manual-points-input .manual-points-slider {
    flex: 1;
    min-width: 60px;
    max-width: 100px;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    cursor: pointer;
}

.manual-points-input .manual-points-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--primary-color, #58a6ff);
    border-radius: 50%;
    cursor: pointer;
}

.manual-points-input .manual-points-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--primary-color, #58a6ff);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.manual-points-input .manual-points-number {
    width: 45px;
    padding: 4px 6px;
    font-size: 0.8rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: inherit;
}

.manual-points-input input[type="number"] {
    width: 50px;
    padding: 4px 6px;
    font-size: 0.8rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: inherit;
}

.manual-points-input input:focus {
    outline: none;
    border-color: rgba(88, 166, 255, 0.5);
}

.manual-points-input .points-max {
    font-size: 0.75rem;
    color: var(--text-muted, #8b949e);
    white-space: nowrap;
}

/* Binary input */
.manual-binary-input {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.manual-binary-input input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.manual-binary-input .binary-label {
    font-size: 0.75rem;
    color: var(--text-muted, #8b949e);
}

/* Scale input */
.manual-scale-input {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.scale-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.7rem;
    transition: background 0.15s;
}

.scale-option:hover {
    background: rgba(255, 255, 255, 0.05);
}

.scale-option.selected {
    background: rgba(88, 166, 255, 0.15);
}

.scale-option input[type="radio"] {
    width: 12px;
    height: 12px;
}

.scale-level {
    width: 14px;
    font-weight: 600;
    color: var(--text-muted, #8b949e);
}

.scale-label {
    flex: 1;
    color: inherit;
}

.scale-pts {
    color: var(--text-muted, #8b949e);
    font-size: 0.65rem;
}

/* ===========================================
   IDML Document Preset Selector
   =========================================== */

.idml-preset-selector {
    margin: 16px 0 20px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.08) 0%, rgba(212, 165, 116, 0.03) 100%);
    border: 1px solid rgba(212, 165, 116, 0.25);
    border-radius: 10px;
}

[data-theme="dark"] .idml-preset-selector {
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.12) 0%, rgba(212, 165, 116, 0.04) 100%);
    border-color: rgba(212, 165, 116, 0.3);
}

.idml-preset-selector .preset-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.idml-preset-selector .preset-icon {
    font-size: 1.1rem;
}

.idml-preset-selector .preset-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.idml-preset-selector .preset-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.idml-preset-selector .preset-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 14px;
    min-width: 85px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.idml-preset-selector .preset-chip:hover {
    background: var(--bg-secondary);
    border-color: rgba(212, 165, 116, 0.5);
    transform: translateY(-1px);
}

.idml-preset-selector .preset-chip.active {
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.2) 0%, rgba(212, 165, 116, 0.1) 100%);
    border-color: var(--accent-primary, #d4a574);
    box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.15);
}

[data-theme="dark"] .idml-preset-selector .preset-chip {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .idml-preset-selector .preset-chip:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(212, 165, 116, 0.5);
}

[data-theme="dark"] .idml-preset-selector .preset-chip.active {
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.25) 0%, rgba(212, 165, 116, 0.12) 100%);
    border-color: var(--accent-primary, #d4a574);
}

.idml-preset-selector .chip-icon {
    font-size: 1.2rem;
    line-height: 1;
}

.idml-preset-selector .chip-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.idml-preset-selector .chip-meta {
    font-size: 0.65rem;
    color: var(--text-secondary);
    white-space: nowrap;
    font-family: var(--font-mono);
}

/* IDML Form Elements - Dark Mode Support */
#idmlCriteriaSection textarea,
#idmlCriteriaSection input[type="text"],
#idmlCriteriaSection input[type="number"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    resize: vertical;
}

#idmlCriteriaSection textarea:focus,
#idmlCriteriaSection input[type="text"]:focus,
#idmlCriteriaSection input[type="number"]:focus {
    outline: none;
    border-color: var(--accent-primary, #d4a574);
    box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.15);
}

#idmlCriteriaSection textarea::placeholder,
#idmlCriteriaSection input::placeholder {
    color: var(--text-tertiary, #6b7280);
}

[data-theme="dark"] #idmlCriteriaSection textarea::placeholder,
[data-theme="dark"] #idmlCriteriaSection input::placeholder {
    color: var(--text-tertiary, #6b7280);
}

/* ==========================================
   Workflow Navigation Footer
   ========================================== */
.workflow-nav-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    gap: 16px;
}

.nav-footer-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.pending {
    background: var(--text-tertiary, #9ca3af);
}

.status-dot.configured {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

.status-indicator .status-text {
    white-space: nowrap;
}

.nav-footer-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-weight: 500;
    white-space: nowrap;
}

.nav-footer-btn .nav-arrow {
    font-size: 1.1em;
    transition: transform 0.2s ease;
}

.nav-footer-btn:hover .nav-arrow {
    transform: translateX(3px);
}

.nav-footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Unconfigured state - subtle warning */
.workflow-nav-footer:has(.status-dot.pending) {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(251, 191, 36, 0.05) 100%);
    border-color: rgba(251, 191, 36, 0.3);
}

.status-dot.pending {
    background: #fbbf24;
    animation: pulse-warning 2s ease-in-out infinite;
}

@keyframes pulse-warning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Configured state - success styling */
.workflow-nav-footer:has(.status-dot.configured) {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(34, 197, 94, 0.05) 100%);
    border-color: rgba(34, 197, 94, 0.3);
}

/* Responsive: Stack vertically on small screens */
@media (max-width: 480px) {
    .workflow-nav-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .nav-footer-status {
        justify-content: center;
    }

    .nav-footer-btn {
        justify-content: center;
    }

    .nav-footer-actions {
        justify-content: center;
    }
}