/* EvAAL - Subtest Styles */
/* Specific styles for assessment subtests */

/* Test Area Container */
.test-area {
    position: relative;
    width: 100%;
    min-height: 400px;
    background-color: var(--bg-secondary);
    border: 3px solid var(--primary-color);
    border-radius: var(--border-radius-large);
    margin: var(--spacing-xl) 0;
    overflow: hidden;
    box-shadow: var(--shadow-medium);
}

/* Mouse Test Specific Styles */
#mouse-test-area {
    background: linear-gradient(45deg, var(--bg-secondary) 25%, transparent 25%), 
                linear-gradient(-45deg, var(--bg-secondary) 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, var(--bg-secondary) 75%), 
                linear-gradient(-45deg, transparent 75%, var(--bg-secondary) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    background-color: var(--bg-primary);
}

/* Target Circles */
.target-circle {
    position: absolute;
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 3px solid var(--text-primary);
    box-shadow: var(--shadow-medium);
    animation: pulse 2s infinite;
}

.target-circle:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-heavy);
}

.target-circle:focus {
    outline: 4px solid var(--secondary-color);
    outline-offset: 4px;
}

/* Target Circle Sizes */
.target-circle.small {
    width: 30px;
    height: 30px;
}

.target-circle.medium {
    width: 45px;
    height: 45px;
}

.target-circle.large {
    width: 60px;
    height: 60px;
}

/* Target Circle Colors */
.target-circle.red {
    background-color: #ff4444;
}

.target-circle.blue {
    background-color: #4444ff;
}

.target-circle.green {
    background-color: #44ff44;
}

.target-circle.yellow {
    background-color: #ffff44;
}

.target-circle.purple {
    background-color: #ff44ff;
}

.target-circle.orange {
    background-color: #ff8844;
}

/* Target Circle States */
.target-circle.hit {
    animation: hit 0.3s ease-out;
    opacity: 0.7;
    transform: scale(0.8);
}

.target-circle.missed {
    animation: missed 0.5s ease-out;
    opacity: 0.5;
    border-color: var(--error-color);
}

/* Target Circle Animations */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes hit {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(0.8); }
}

@keyframes missed {
    0% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* Test Progress Indicators */
.test-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-secondary);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
    border: 2px solid var(--primary-color);
}

.progress-item {
    text-align: center;
    flex: 1;
}

.progress-label {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.progress-value {
    font-size: var(--font-size-large);
    font-weight: bold;
    color: var(--primary-color);
}

/* Timer Display */
.timer-display {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background-color: var(--primary-color);
    color: var(--text-inverse);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    font-size: var(--font-size-large);
    font-weight: bold;
    box-shadow: var(--shadow-medium);
    z-index: 10;
}

/* Accuracy Indicator */
.accuracy-indicator {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    background-color: var(--bg-primary);
    border: 2px solid var(--primary-color);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: 600;
    box-shadow: var(--shadow-light);
    z-index: 10;
}

.accuracy-indicator.high {
    border-color: var(--success-color);
    color: var(--success-color);
}

.accuracy-indicator.medium {
    border-color: var(--warning-color);
    color: var(--warning-color);
}

.accuracy-indicator.low {
    border-color: var(--error-color);
    color: var(--error-color);
}

/* Test Results Display */
.test-results {
    background-color: var(--bg-secondary);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.result-item {
    text-align: center;
    padding: var(--spacing-md);
    background-color: var(--bg-primary);
    border-radius: var(--border-radius);
    border: 1px solid var(--bg-tertiary);
}

.result-label {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.result-value {
    font-size: var(--font-size-xlarge);
    font-weight: bold;
    color: var(--primary-color);
}

/* Test Instructions */
.test-instructions {
    background-color: var(--bg-secondary);
    border-left: 4px solid var(--primary-color);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    border-radius: var(--border-radius);
}

.test-instructions h3 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.test-instructions ul {
    list-style: none;
    padding-left: 0;
}

.test-instructions li {
    padding: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    position: relative;
    font-size: var(--font-size-large);
}

.test-instructions li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--success-color);
    font-weight: bold;
}

/* Test Controls */
.test-controls {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg);
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 2px solid var(--primary-color);
}

/* Test Status Messages */
.test-status {
    text-align: center;
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    border-radius: var(--border-radius);
    font-size: var(--font-size-large);
    font-weight: 600;
}

.test-status.ready {
    background-color: var(--success-color);
    color: var(--text-inverse);
}

.test-status.running {
    background-color: var(--primary-color);
    color: var(--text-inverse);
    animation: pulse 1s infinite;
}

.test-status.completed {
    background-color: var(--secondary-color);
    color: var(--text-inverse);
}

.test-status.error {
    background-color: var(--error-color);
    color: var(--text-inverse);
}

/* High Contrast Theme Adjustments */
[data-theme="high-contrast"] .target-circle {
    border-width: 4px;
    border-color: var(--text-primary);
}

[data-theme="high-contrast"] .target-circle:hover {
    border-color: var(--secondary-color);
}

[data-theme="high-contrast"] .test-area {
    border-width: 4px;
}

[data-theme="high-contrast"] .test-controls {
    border-width: 3px;
}

/* Responsive Design for Subtests */
@media (max-width: 768px) {
    .test-area {
        min-height: 300px;
    }
    
    .target-circle.large {
        width: 50px;
        height: 50px;
    }
    
    .target-circle.medium {
        width: 40px;
        height: 40px;
    }
    
    .target-circle.small {
        width: 25px;
        height: 25px;
    }
    
    .timer-display,
    .accuracy-indicator {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        margin-bottom: var(--spacing-md);
        text-align: center;
    }
    
    .results-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .test-area {
        min-height: 250px;
    }
    
    .target-circle.large {
        width: 45px;
        height: 45px;
    }
    
    .target-circle.medium {
        width: 35px;
        height: 35px;
    }
    
    .target-circle.small {
        width: 20px;
        height: 20px;
    }
    
    .test-controls {
        flex-direction: column;
        align-items: center;
    }
    
    .test-controls .primary-btn,
    .test-controls .secondary-btn {
        width: 100%;
        max-width: 300px;
    }
}

/* Research Notes */
.research-notes {
    background-color: var(--bg-primary);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.research-notes h4 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-large);
}

.research-notes p {
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
}

.research-notes strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Direct Selection Test Styles */
.draggable-boxes {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    z-index: 10;
    max-width: 220px;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 10px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.draggable-box {
    width: 60px;
    height: 60px;
    border: 3px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    transition: all 0.2s ease;
    user-select: none;
    touch-action: none;
    position: relative;
}

.draggable-box:active {
    cursor: grabbing;
    transform: scale(1.05);
}

.draggable-box:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

.draggable-box.small {
    width: 40px;
    height: 40px;
    font-size: 12px;
}

.draggable-box.medium {
    width: 60px;
    height: 60px;
    font-size: 16px;
}

.draggable-box.large {
    width: 80px;
    height: 80px;
    font-size: 20px;
}

.draggable-box.red { background-color: #e74c3c; }
.draggable-box.blue { background-color: #3498db; }
.draggable-box.green { background-color: #2ecc71; }
.draggable-box.yellow { background-color: #f1c40f; }
.draggable-box.purple { background-color: #9b59b6; }
.draggable-box.orange { background-color: #e67e22; }

.matching-target {
    position: absolute;
    border: 3px dashed var(--border-color);
    border-radius: var(--border-radius);
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--text-primary);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.matching-target:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

.matching-target.small {
    width: 40px;
    height: 40px;
    font-size: 12px;
}

.matching-target.medium {
    width: 60px;
    height: 60px;
    font-size: 16px;
}

.matching-target.large {
    width: 80px;
    height: 80px;
    font-size: 20px;
}

.matching-target.red { border-color: #e74c3c; }
.matching-target.blue { border-color: #3498db; }
.matching-target.green { border-color: #2ecc71; }
.matching-target.yellow { border-color: #f1c40f; }
.matching-target.purple { border-color: #9b59b6; }
.matching-target.orange { border-color: #e67e22; }

.matching-target.matched {
    border-color: var(--success-color);
    background-color: rgba(46, 204, 113, 0.2);
    transform: scale(1.1);
}

.matching-target.failed {
    border-color: var(--error-color);
    background-color: rgba(231, 76, 60, 0.2);
    animation: shake 0.5s ease-in-out;
}

.matching-target.success-animation {
    animation: successPulse 1s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes successPulse {
    0% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1.1); }
}

.color-indicator {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.success-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--success-color);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    animation: successIndicator 1s ease-in-out;
    z-index: 10;
}

@keyframes successIndicator {
    0% { 
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
    100% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.test-ready-message {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.test-ready-message p {
    margin: 10px 0;
    font-size: 16px;
}

/* Letter Tracing Canvas */
#letter-canvas {
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-primary);
    cursor: crosshair;
    display: block;
    margin: 20px auto;
    max-width: 100%;
    height: auto;
    position: relative;
}

#letter-canvas:active {
    cursor: crosshair;
}

/* Test Controls */
.test-controls {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
    flex-wrap: wrap;
}

.test-controls .primary-btn,
.test-controls .secondary-btn {
    padding: 12px 24px;
    border: none;
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 150px;
}

.test-controls .primary-btn {
    background-color: var(--primary-color);
    color: white;
}

.test-controls .primary-btn:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
}

.test-controls .secondary-btn {
    background-color: var(--secondary-color);
    color: white;
    border: 2px solid var(--secondary-color);
}

.test-controls .secondary-btn:hover {
    background-color: var(--secondary-dark);
    border-color: var(--secondary-dark);
}

.test-controls .warning-btn {
    background-color: var(--secondary-color);
    color: white;
    border: 2px solid var(--secondary-color);
}

.test-controls .warning-btn:hover {
    background-color: var(--secondary-dark);
    color: var(--text-inverse);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

/* Responsive Design */
@media (max-width: 768px) {
    .draggable-boxes {
        position: relative;
        top: auto;
        left: auto;
        justify-content: center;
        margin-bottom: 20px;
    }
    
    .draggable-box {
        width: 50px;
        height: 50px;
        font-size: 14px;
    }
    
    .draggable-box.small {
        width: 35px;
        height: 35px;
        font-size: 10px;
    }
    
    .draggable-box.large {
        width: 65px;
        height: 65px;
        font-size: 18px;
    }
    
    .matching-target {
        width: 50px;
        height: 50px;
        font-size: 14px;
    }
    
    .matching-target.small {
        width: 35px;
        height: 35px;
        font-size: 10px;
    }
    
    .matching-target.large {
        width: 65px;
        height: 65px;
        font-size: 18px;
    }
    
    #letter-canvas {
        width: 100%;
        max-width: 400px;
        height: 300px;
    }
    
    .test-controls {
        flex-direction: column;
        align-items: center;
    }
    
    .test-controls .primary-btn,
    .test-controls .secondary-btn {
        width: 100%;
        max-width: 250px;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .draggable-box {
        border-width: 4px;
    }
    
    .matching-target {
        border-width: 4px;
    }
    
    #letter-canvas {
        border-width: 3px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .draggable-box,
    .matching-target {
        transition: none;
    }
    
    .matching-target.failed {
        animation: none;
    }
    
    .test-controls .primary-btn:hover {
        transform: none;
    }
}

/* Keyboarding Test Styles */
.difficulty-selection {
    margin: 20px 0;
}

.difficulty-selection h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: var(--text-primary);
}

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

.difficulty-btn {
    padding: 8px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.difficulty-btn:hover {
    background-color: var(--bg-hover);
    border-color: var(--primary-color);
}

.difficulty-btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.timer-selection {
    margin: 20px 0;
}

.timer-selection h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: var(--text-primary);
}

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

.timer-btn {
    padding: 8px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.timer-btn:hover {
    background-color: var(--bg-hover);
    border-color: var(--primary-color);
}

.timer-btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Font Size Selection */
.font-size-selection {
    margin-top: var(--spacing-lg);
}

.font-size-selection h3 {
    margin-bottom: var(--spacing-sm);
    color: var(--primary-color);
}

.font-size-slider-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.font-size-slider {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: #e9ecef;
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.font-size-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: 2px solid var(--bg-primary);
    box-shadow: var(--shadow-light);
}

.font-size-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: 2px solid var(--bg-primary);
    box-shadow: var(--shadow-light);
}

#keyboarding-font-size-value {
    font-weight: 600;
    color: var(--primary-color);
    min-width: 40px;
    text-align: center;
}

.sample-text-display {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.sample-text-display h3 {
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    font-size: var(--font-size-lg);
}

.sample-text-display .text-display {
    line-height: 1.6;
    color: var(--text-primary);
    transition: font-size 0.2s ease;
}

/* Font Size Classes for Keyboarding Test */
.font-normal {
    font-size: var(--font-size-base);
}

.font-large {
    font-size: var(--font-size-large);
}

.font-xlarge {
    font-size: var(--font-size-xlarge);
}

.target-text {
    margin-bottom: 20px;
    padding: 20px;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.target-text h3 {
    margin: 0 0 15px 0;
    font-size: 18px;
    color: var(--text-primary);
}

.text-display {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-primary);
    word-wrap: break-word;
}

.target-word {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.target-word.completed {
    background-color: var(--success-color);
    color: white;
}

.target-word.correct {
    background-color: var(--success-color);
    color: white;
    animation: correctPulse 0.5s ease-in-out;
}

.target-word.incorrect {
    background-color: var(--error-color);
    color: white;
    animation: incorrectShake 0.5s ease-in-out;
}

@keyframes correctPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes incorrectShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

.input-area {
    margin-top: 20px;
}

.input-area textarea {
    width: 100%;
    min-height: 120px;
    padding: 15px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 16px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.input-area textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.input-area textarea::placeholder {
    color: var(--text-muted);
}

.test-instructions {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.test-instructions p {
    margin: 10px 0;
    font-size: 16px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .difficulty-buttons,
    .timer-buttons {
        justify-content: center;
    }
    
    .difficulty-btn,
    .timer-btn {
        flex: 1;
        min-width: 80px;
        text-align: center;
    }
    
    .text-display {
        font-size: 16px;
        line-height: 1.5;
    }
    
    .target-word {
        margin-right: 4px;
        padding: 1px 3px;
    }
    
    .input-area textarea {
        min-height: 100px;
        font-size: 14px;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .difficulty-btn {
        border-width: 3px;
    }
    
    .target-text {
        border-width: 2px;
    }
    
    .input-area textarea {
        border-width: 3px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .target-word {
        transition: none;
    }
    
    .target-word.correct {
        animation: none;
    }
    
    .target-word.incorrect {
        animation: none;
    }
    
    .difficulty-btn,
    .timer-btn {
        transition: none;
    }
}

/* Direct Selection Test Area */
#direct-selection-test-area {
    position: relative;
    min-height: 400px;
    width: 100%;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-secondary);
    overflow: hidden;
}

/* Exercise Results Sections */
.exercise-results {
    margin: 30px 0;
    padding: 20px;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.exercise-results h4 {
    margin: 0 0 20px 0;
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 600;
}

.overall-results {
    margin: 30px 0;
    padding: 20px;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--success-color);
}

.overall-results h4 {
    margin: 0 0 20px 0;
    color: var(--success-color);
    font-size: 20px;
    font-weight: 600;
}

/* Direct Selection Test Results Styling */
.results-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.results-container h3 {
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 30px;
    font-size: 24px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
}

.overall-summary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 20px;
    border-radius: var(--border-radius);
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.overall-summary h4 {
    margin: 0 0 15px 0;
    font-size: 20px;
    text-align: center;
}

.overall-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.exercise-result {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.exercise-result h4 {
    color: var(--primary-color);
    margin: 0 0 15px 0;
    font-size: 18px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.result-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: var(--bg-primary);
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
}

.metric .label {
    font-weight: 600;
    color: var(--text-primary);
}

.metric .value {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 16px;
}

/* Performance level styling */
.value.excellent {
    color: #27ae60;
}

.value.good {
    color: #3498db;
}

.value.fair {
    color: #f39c12;
}

.value.poor {
    color: #e67e22;
}

.value.needs-support {
    color: #e74c3c;
}

.result-details {
    background: var(--bg-primary);
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.result-details h5 {
    color: var(--text-primary);
    margin: 0 0 10px 0;
    font-size: 16px;
}

.target-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.target-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    font-size: 14px;
}

.target-result .target-id {
    font-weight: 600;
    color: var(--text-primary);
}

.target-result .target-accuracy {
    color: var(--primary-color);
    font-weight: bold;
}

.target-result .target-time {
    color: var(--text-secondary);
    font-family: monospace;
}

.scientific-explanation {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 25px;
    margin: 30px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.scientific-explanation h4 {
    color: var(--primary-color);
    margin: 0 0 20px 0;
    font-size: 20px;
    text-align: center;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
}

.explanation-content h5 {
    color: var(--primary-color);
    margin: 20px 0 10px 0;
    font-size: 16px;
    border-left: 4px solid var(--primary-color);
    padding-left: 10px;
}

.explanation-content p {
    margin: 10px 0;
    line-height: 1.6;
    color: var(--text-primary);
}

.explanation-content strong {
    color: var(--primary-color);
}

.test-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid var(--border-color);
}

.test-controls button {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 150px;
}

.test-controls .primary-btn {
    background: var(--primary-color);
    color: white;
}

.test-controls .primary-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.test-controls .secondary-btn {
    background-color: var(--secondary-color);
    color: white;
    border: 2px solid var(--secondary-color);
}

.test-controls .secondary-btn:hover {
    background-color: var(--secondary-dark);
    border-color: var(--secondary-dark);
}

/* Responsive design */
@media (max-width: 768px) {
    .results-container {
        padding: 15px;
        margin: 10px;
    }
    
    .overall-metrics,
    .result-metrics {
        grid-template-columns: 1fr;
    }
    
    .target-results {
        grid-template-columns: 1fr;
    }
    
    .test-controls {
        flex-direction: column;
        align-items: center;
    }
    
    .test-controls button {
        width: 100%;
        max-width: 300px;
    }
} 

.round-results {
    margin: 20px 0;
    padding: 20px;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.round-results h3 {
    margin: 0 0 20px 0;
    font-size: 20px;
    color: var(--primary-color);
    text-align: center;
}

.test-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 20px 0;
    flex-wrap: wrap;
}

.test-controls button {
    padding: 12px 24px;
    border: none;
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}


.test-controls .primary-btn:disabled,
.test-controls .secondary-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.test-controls .primary-btn:disabled:hover,
.test-controls .secondary-btn:disabled:hover {
    transform: none;
} 

/* Stop Button Styles */
.stop-btn {
    background-color: #ff4444 !important;
    color: white !important;
    padding: 12px 24px !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    margin-top: 15px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.stop-btn:hover {
    background-color: #cc3333 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

.stop-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.stop-btn:focus {
    outline: 3px solid #ff6666 !important;
    outline-offset: 2px !important;
}

/* Timer Display Enhancement */
#keyboarding-time-remaining {
    font-size: 1.2em !important;
    font-weight: bold !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

#keyboarding-time-remaining.warning {
    background-color: rgba(255, 68, 68, 0.2) !important;
    color: #ff4444 !important;
}

#keyboarding-time-remaining.critical {
    background-color: rgba(255, 68, 68, 0.3) !important;
    color: #ff4444 !important;
    animation: timerPulse 1s infinite !important;
}

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

/* Keyboarding Test Controls - Ensure proper centering */
#keyboarding .test-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    flex-wrap: wrap;
    text-align: center;
    width: 100%;
}

#keyboarding .test-controls button {
    margin: 5px;
}

/* Speech Test Styles */
.speech-instructions {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--spacing-xl) auto;
}

.speech-target-text {
    background-color: var(--bg-secondary);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    margin: var(--spacing-lg) 0;
    font-size: var(--font-size-large);
    line-height: var(--line-height-relaxed);
    font-weight: 500;
    box-shadow: var(--shadow-light);
}

.speech-controls {
    text-align: center;
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-lg);
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--bg-tertiary);
}

.speech-controls #speech-mic-btn {
    font-size: var(--font-size-large);
    padding: var(--spacing-lg) var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    min-width: 200px;
}

.speech-status {
    margin: var(--spacing-md) 0 0 0;
    padding: var(--spacing-md);
    background-color: var(--bg-primary);
    border-radius: var(--border-radius);
    font-weight: 600;
    border: 1px solid var(--bg-tertiary);
}

.speech-results {
    background-color: var(--bg-secondary);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    margin: var(--spacing-xl) 0;
    box-shadow: var(--shadow-light);
}

.speech-original {
    color: var(--success-color);
    font-weight: 600;
}

.speech-recognized {
    color: var(--primary-color);
    font-weight: 600;
}

.speech-score-note {
    font-size: var(--font-size-base);
    color: var(--text-muted);
    font-style: italic;
    margin-top: var(--spacing-md);
}

.speech-citation {
    background-color: var(--bg-secondary);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-top: var(--spacing-lg);
    box-shadow: var(--shadow-light);
}

.speech-citation p {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.speech-citation strong {
    color: var(--primary-color);
}

/* Mouse Test Citation */
.mouse-citation {
    background-color: var(--bg-secondary);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-top: var(--spacing-lg);
    box-shadow: var(--shadow-light);
}

.mouse-citation p {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.mouse-citation strong {
    color: var(--primary-color);
}

/* Direct Selection Test Citation */
.direct-selection-citation {
    background-color: var(--bg-secondary);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-top: var(--spacing-lg);
    box-shadow: var(--shadow-light);
}

.direct-selection-citation p {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.direct-selection-citation strong {
    color: var(--primary-color);
}

/* Keyboarding Test Citation */
.keyboarding-citation {
    background-color: var(--bg-secondary);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-top: var(--spacing-lg);
    box-shadow: var(--shadow-light);
}

.keyboarding-citation p {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.keyboarding-citation strong {
    color: var(--primary-color);
}

/* Written Expression Test Citation */
.written-expression-citation {
    background-color: var(--bg-secondary);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-top: var(--spacing-lg);
    box-shadow: var(--shadow-light);
}

.written-expression-citation p {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.written-expression-citation strong {
    color: var(--primary-color);
}

/* Visual Preferences Test Styles */
.visual-controls-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.control-section {
    background-color: var(--bg-secondary);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-light);
}

.control-section h3 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-large);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: var(--spacing-sm);
}

.control-group {
    margin-bottom: var(--spacing-md);
}

.control-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: 2px solid var(--bg-primary);
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: 2px solid var(--bg-primary);
}

.select-control {
    width: 100%;
    padding: var(--spacing-sm);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.select-control:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.color-picker {
    width: 60px;
    height: 40px;
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    background: none;
}

.color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-picker::-webkit-color-swatch {
    border: none;
    border-radius: var(--border-radius);
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: normal;
    margin-bottom: var(--spacing-sm);
}

.checkbox-control {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    height: 20px;
    width: 20px;
    background-color: var(--bg-primary);
    border: 2px solid var(--primary-color);
    border-radius: 4px;
    margin-right: var(--spacing-sm);
    position: relative;
}

.checkbox-control:checked ~ .checkmark {
    background-color: var(--primary-color);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-control:checked ~ .checkmark:after {
    display: block;
}

.checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.sample-text-container {
    background-color: var(--bg-secondary);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    box-shadow: var(--shadow-light);
}

.sample-text-container h3 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-large);
}

.sample-text {
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    min-height: 200px;
    line-height: 1.6;
    transition: all 0.3s ease;
    position: relative;
}

.sample-text.focus-mode {
    background: linear-gradient(
        transparent 0%,
        transparent calc(1.6em - 1px),
        rgba(52, 152, 219, 0.1) calc(1.6em - 1px),
        rgba(52, 152, 219, 0.1) calc(1.6em + 1px),
        transparent calc(1.6em + 1px)
    );
    background-size: 100% 1.6em;
}

.sample-text.reading-guide::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--primary-color);
    opacity: 0.5;
}

.message {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Visual Preferences Test Citation */
.visual-prefs-citation {
    background-color: var(--bg-secondary);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-top: var(--spacing-lg);
    box-shadow: var(--shadow-light);
}

.visual-prefs-citation p {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.visual-prefs-citation strong {
    color: var(--primary-color);
}

/* Responsive Design for Visual Preferences */
@media (max-width: 768px) {
    .visual-controls-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .control-section {
        padding: var(--spacing-md);
    }
    
    .sample-text {
        min-height: 150px;
        padding: var(--spacing-md);
    }
    
    .color-picker {
        width: 50px;
        height: 35px;
    }
}

@media (max-width: 480px) {
    .control-section h3 {
        font-size: var(--font-size-base);
    }
    
    .control-group label {
        font-size: var(--font-size-small);
    }
    
    .sample-text {
        font-size: var(--font-size-small);
        min-height: 120px;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .control-section {
        border-width: 3px;
    }
    
    .slider::-webkit-slider-thumb {
        border-width: 3px;
    }
    
    .slider::-moz-range-thumb {
        border-width: 3px;
    }
    
    .checkmark {
        border-width: 3px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .sample-text {
        transition: none;
    }
    
    .message {
        animation: none;
    }
}

/* Auditory Preferences Test */
.auditory-controls-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.auditory-controls-container .control-section {
    background-color: var(--bg-secondary);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-light);
}

.auditory-controls-container .control-section h3 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-large);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: var(--spacing-sm);
}

.auditory-controls-container .control-group {
    margin-bottom: var(--spacing-md);
}

.auditory-controls-container .control-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.auditory-controls-container .slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    outline: none;
    -webkit-appearance: none;
    margin-bottom: var(--spacing-xs);
}

.auditory-controls-container .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: 2px solid var(--bg-primary);
}

.auditory-controls-container .slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: 2px solid var(--bg-primary);
}

.auditory-controls-container .select-control {
    width: 100%;
    padding: var(--spacing-sm);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.auditory-controls-container .select-control:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color-alpha);
}

.auditory-controls-container .primary-btn {
    width: 100%;
    padding: var(--spacing-sm);
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: background-color 0.3s;
}

.auditory-controls-container .primary-btn:hover {
    background-color: var(--primary-color-dark);
}

.auditory-controls-container .secondary-btn {
    width: 100%;
    padding: var(--spacing-sm);
    background-color: var(--text-secondary);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: background-color 0.3s;
}

.auditory-controls-container .secondary-btn:hover {
    background-color: var(--text-primary);
}

#speech-status {
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    text-align: center;
    margin-top: var(--spacing-sm);
}

.auditory-prefs-summary {
    background-color: var(--bg-secondary);
    border: 2px solid var(--success-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    box-shadow: var(--shadow-light);
}

.auditory-prefs-summary h3 {
    color: var(--success-color);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-large);
    border-bottom: 2px solid var(--success-color);
    padding-bottom: var(--spacing-sm);
}

.auditory-prefs-summary h4 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.auditory-prefs-summary ul {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--text-primary);
}

.auditory-prefs-summary li {
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.auditory-prefs-summary strong {
    color: var(--text-primary);
}

.auditory-prefs-summary span {
    color: var(--text-primary);
}

.auditory-prefs-citation {
    background-color: var(--bg-secondary);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-top: var(--spacing-lg);
    box-shadow: var(--shadow-light);
}

.auditory-prefs-citation p {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.auditory-prefs-citation strong {
    color: var(--primary-color);
}

/* Responsive Design for Auditory Preferences */
@media (max-width: 768px) {
    .auditory-controls-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .auditory-controls-container .control-section {
        padding: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .auditory-controls-container .control-section h3 {
        font-size: var(--font-size-base);
    }
    
    .auditory-controls-container .control-group label {
        font-size: var(--font-size-small);
    }
}

/* High Contrast Mode for Auditory Preferences */
@media (prefers-contrast: high) {
    .auditory-controls-container .control-section {
        border-width: 3px;
    }
    
    .auditory-controls-container .slider::-webkit-slider-thumb {
        border-width: 3px;
    }
    
    .auditory-controls-container .slider::-moz-range-thumb {
        border-width: 3px;
    }
}

/* Reduced Motion for Auditory Preferences */
@media (prefers-reduced-motion: reduce) {
    .auditory-controls-container .primary-btn,
    .auditory-controls-container .secondary-btn {
        transition: none;
    }
}

.speech-round-controls {
    margin-top: 20px;
    text-align: center;
}

.speech-round-controls .primary-btn {
    font-size: 16px;
    padding: 12px 24px;
    margin: 0 10px;
}

.speech-round-controls .primary-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #ccc;
    color: #666;
    border-color: #ccc;
}

.speech-round-controls .primary-btn:disabled:hover {
    background-color: #ccc;
    color: #666;
    border-color: #ccc;
    transform: none;
}

.speech-final-results {
    background-color: var(--bg-secondary);
    border: 2px solid var(--success-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    box-shadow: var(--shadow-light);
}

.speech-final-results h4 {
    color: var(--success-color);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-large);
    border-bottom: 2px solid var(--success-color);
    padding-bottom: var(--spacing-sm);
}

.round-result {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-base);
}

.round-result strong {
    color: var(--primary-color);
}

/* Responsive Design for Speech Test */
@media (max-width: 768px) {
    .speech-round-controls .primary-btn {
        width: 100%;
        padding: var(--spacing-md);
    }
    
    .speech-final-results {
        padding: var(--spacing-md);
    }
    
    .round-result {
        padding: var(--spacing-sm);
        font-size: var(--font-size-small);
    }
}

/* Navigation Controls */
.nav-controls {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    align-items: center;
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 2px solid var(--primary-color);
}

.nav-controls button {
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 100px;
    text-align: center;
}

.nav-controls .primary-btn {
    background-color: var(--primary-color);
    color: var(--text-inverse);
}

.nav-controls .primary-btn:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
}

.nav-controls .secondary-btn {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 2px solid var(--secondary-color);
}

.nav-controls .secondary-btn:hover {
    background-color: var(--secondary-color);
    color: var(--text-inverse);
}

/* Support Tools */
.support-tools {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    align-items: center;
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.support-tools-inline {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    align-items: center;
    margin: var(--spacing-md) 0;
    padding: var(--spacing-sm);
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.support-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 80px;
    font-size: var(--font-size-small);
}

.support-btn:hover {
    border-color: var(--primary-color);
    background-color: var(--bg-secondary);
    transform: translateY(-2px);
}

.support-btn.active {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
    color: var(--text-inverse);
}

.support-btn .icon {
    font-size: var(--font-size-large);
}

.support-btn .label {
    font-weight: 600;
    text-align: center;
}

/* Calculator Overlay */
.calculator-overlay {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    border-radius: var(--border-radius);
    cursor: move;
    user-select: none;
}

.calculator-container {
    background-color: var(--bg-primary);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-heavy);
    width: 350px;
    min-height: 450px;
}

.calculator-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

.calculator-header h4 {
    margin: 0;
    color: var(--primary-color);
}

.calculator-close {
    background: none;
    border: none;
    font-size: var(--font-size-xlarge);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calculator-close:hover {
    color: var(--error-color);
}

.calculator-display {
    margin-bottom: var(--spacing-md);
}

.calculator-display input {
    width: 100%;
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-large);
    text-align: right;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.calculator-accessibility {
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-secondary);
}

.talking-calculator-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

.talking-calculator-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.talking-calculator-option span {
    font-weight: 500;
}

/* Math Test Citation */
.math-test-citation {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin: var(--spacing-lg) 0;
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-primary);
}

.math-test-citation p {
    margin: 0;
    text-align: justify;
}

.math-test-citation strong {
    color: var(--primary-color);
    font-weight: 600;
}

.calculator-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
}

.calc-btn {
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calc-btn:hover {
    background-color: var(--primary-color);
    color: var(--text-inverse);
}

.calc-btn.calc-equals {
    grid-column: span 2;
    background-color: var(--success-color);
    color: var(--text-inverse);
}

.calc-btn.calc-equals:hover {
    background-color: var(--success-dark);
}

/* Highlighted instruction */
.instruction.highlighted {
    background-color: var(--warning-color);
    color: var(--text-inverse);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    font-weight: bold;
}

/* Math Test Specific Styles */
.math-trial {
    text-align: center;
    padding: var(--spacing-lg);
}

.math-trial h3 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-large);
}

.math-trial .instruction {
    font-size: var(--font-size-large);
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
}

.number-options,
.addition-options,
.pattern-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    max-width: 400px;
    margin: 0 auto;
}

.number-option,
.addition-option,
.pattern-option {
    padding: var(--spacing-lg);
    border: 3px solid var(--primary-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-size-xlarge);
    font-weight: bold;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.number-option:hover,
.addition-option:hover,
.pattern-option:hover {
    background-color: var(--primary-color);
    color: var(--text-inverse);
    transform: scale(1.05);
}

.pattern-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.pattern-number {
    padding: var(--spacing-md);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-primary);
    font-size: var(--font-size-xlarge);
    font-weight: bold;
    min-width: 60px;
    text-align: center;
}

.pattern-question {
    padding: var(--spacing-md);
    border: 2px dashed var(--primary-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-secondary);
    font-size: var(--font-size-xlarge);
    font-weight: bold;
    min-width: 60px;
    text-align: center;
    color: var(--primary-color);
}

.comparison-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.comparison-option {
    padding: var(--spacing-lg);
    border: 3px solid var(--primary-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-size-xlarge);
    font-weight: bold;
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 100px;
}

.comparison-option:hover {
    background-color: var(--primary-color);
    color: var(--text-inverse);
    transform: scale(1.05);
}

.comparison-vs {
    font-size: var(--font-size-large);
    font-weight: bold;
    color: var(--text-secondary);
}

.graph-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: var(--spacing-lg) 0;
}





.grid-row.grid-labels {
    background-color: var(--bg-secondary);
    border-top: 2px solid var(--primary-color);
}

.grid-label-cell {
    width: 60px;
    height: 40px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--primary-color);
    font-size: var(--font-size-base);
    flex-shrink: 0;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    min-width: 60px;
}

.grid-cell {
    width: 60px;
    height: 60px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--text-secondary);
    flex-shrink: 0;
    position: relative;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    min-width: 60px;
}

/* Make grid lines more prominent */
.grid-container {
    border: 2px solid var(--primary-color);
    background-color: var(--bg-primary);
    border-radius: var(--border-radius);
    overflow: hidden;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: var(--spacing-md) 0;
    box-sizing: border-box;
}

/* Ensure proper grid alignment */
.grid-row {
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
}

/* Add visual distinction for grid cells */
.grid-cell:hover {
    background-color: var(--bg-secondary);
    border-color: var(--primary-color);
    transform: scale(1.05);
    z-index: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.grid-cell:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

.trial-feedback {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    font-size: var(--font-size-large);
    font-weight: bold;
}

.trial-feedback.correct {
    background-color: var(--success-color);
    color: var(--text-inverse);
}

.trial-feedback.incorrect {
    background-color: var(--error-color);
    color: var(--text-inverse);
}

.math-results {
    text-align: center;
    padding: var(--spacing-lg);
}

.math-results h3 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-xlarge);
}

.results-summary {
    background-color: var(--bg-secondary);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.results-summary p {
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-large);
}

.exercise-breakdown {
    text-align: left;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
}

.exercise-breakdown h4 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-large);
}

.exercise-result {
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

.exercise-result:last-child {
    border-bottom: none;
}

/* Results page exercise breakdown styles */
.exercise-breakdown {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.exercise-breakdown h5 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-base);
}

.exercise-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-small);
}

.exercise-detail:last-child {
    border-bottom: none;
}

.exercise-name {
    font-weight: 600;
    color: var(--text-primary);
}

.exercise-accuracy {
    color: var(--success-color);
    font-weight: 600;
}

.exercise-time {
    color: var(--text-secondary);
    font-style: italic;
}

/* Responsive Design for Math Test */
@media (max-width: 768px) {
    .number-options,
    .addition-options,
    .pattern-options {
        grid-template-columns: 1fr;
        max-width: 300px;
    }
    
    .pattern-display {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
    
    .pattern-number,
    .pattern-question {
        min-width: 50px;
        font-size: var(--font-size-large);
    }
    
    .comparison-numbers {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .grid-cell,
    .grid-label-cell {
        width: 50px;
        min-width: 50px;
    }
    
    .grid-cell {
        height: 50px;
    }
    
    .grid-label-cell {
        height: 40px;
    }
}

@media (max-width: 480px) {
    .math-trial {
        padding: var(--spacing-md);
    }
    
    .math-trial .instruction {
        font-size: var(--font-size-base);
    }
    
    .number-option,
    .addition-option,
    .pattern-option,
    .comparison-option {
        padding: var(--spacing-md);
        font-size: var(--font-size-large);
    }
    
    .grid-cell,
    .grid-label-cell {
        width: 40px;
        min-width: 40px;
        font-size: var(--font-size-small);
    }
    
    .grid-cell {
        height: 40px;
    }
    
    .grid-label-cell {
        height: 30px;
    }
    
    .support-tools,
    .support-tools-inline {
        flex-wrap: wrap;
    }
    
    .support-btn {
        min-width: 70px;
        font-size: var(--font-size-small);
    }
    
    .calculator-container {
        max-width: 280px;
        padding: var(--spacing-sm);
    }
    
    .calc-btn {
        padding: var(--spacing-sm);
        font-size: var(--font-size-small);
    }
} 

/* Highlight for direct selection mode */
.direct-selection-active {
    outline: 3px solid var(--primary-color);
    background-color: var(--bg-secondary);
    box-shadow: 0 0 0 4px var(--primary-color), 0 2px 8px rgba(0,0,0,0.08);
    z-index: 2;
}

/* Mind Map Popup Styles */
.mind-map-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mind-map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.mind-map-container {
    position: relative;
    background-color: var(--bg-primary);
    border: 3px solid var(--primary-color);
    border-radius: var(--border-radius-large);
    padding: var(--spacing-xl);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-heavy);
}

.mind-map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: var(--spacing-md);
}

.mind-map-header h3 {
    color: var(--primary-color);
    margin: 0;
    font-size: var(--font-size-xlarge);
}

.close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-primary);
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.close-btn:hover {
    background-color: var(--error-color);
    color: white;
}

.mind-map-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.mind-map-diagram {
    position: relative;
    width: 400px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mind-map-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.center-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-md);
    box-shadow: var(--shadow-medium);
    border: 3px solid var(--primary-dark);
}

.center-text {
    font-size: var(--font-size-base);
    font-weight: bold;
    line-height: 1.3;
}

.mind-map-outer {
    position: absolute;
    width: 400px;
    height: 400px;
    top: 0;
    left: 0;
}

.outer-circle {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: var(--bg-secondary);
    border: 3px solid var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-medium);
    transition: all var(--transition-fast);
    z-index: 10;
}

.outer-circle:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-heavy);
}

.outer-circle[data-position="top"] {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.outer-circle[data-position="right"] {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.outer-circle[data-position="bottom"] {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.outer-circle[data-position="left"] {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.mind-map-lines {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    pointer-events: none;
}

.circle-input {
    width: 90%;
    height: 90%;
    border: none;
    background: transparent;
    text-align: center;
    font-size: var(--font-size-small);
    color: var(--text-primary);
    resize: none;
    outline: none;
    padding: var(--spacing-sm);
    border-radius: 50%;
}

.circle-input::placeholder {
    color: var(--text-secondary);
    font-style: italic;
}

.mind-map-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 2px solid var(--bg-tertiary);
}

.mind-map-actions .primary-btn,
.mind-map-actions .secondary-btn {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
    min-width: 120px;
}

@media (max-width: 768px) {
    .mind-map-container {
        width: 95%;
        padding: var(--spacing-lg);
    }
    
    .mind-map-outer {
        width: 300px;
        height: 300px;
    }
    
    .center-circle {
        width: 120px;
        height: 120px;
    }
    
    .outer-circle {
        width: 100px;
        height: 100px;
    }
    
    .circle-input {
        font-size: var(--font-size-small);
    }
    
    .mind-map-actions {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .mind-map-outer {
        width: 250px;
        height: 250px;
    }
    
    .center-circle {
        width: 100px;
        height: 100px;
    }
    
    .outer-circle {
        width: 80px;
        height: 80px;
    }
    
    .center-text {
        font-size: var(--font-size-small);
    }
}