/* ============================================= */
/* ===== 1. CSS VARIABLES ====================== */
/* ============================================= */
:root {
	/* ----- Colors ----- */
	--bg-dark: #2d3748;
	--bg-darker: #1a202c;
	--bg-light: #f7fafc;
	--bg-white: #ffffff;
	--bg-light-teal: #F0FDFA;
	--border-color: #4a5568;
	--border-light: #e2e8f0;

	/* ----- Brand & Status Colors ----- */
	--primary-base: #667eea;
	--primary-dark: #764ba2;
	--success-base: #48bb78;
	--success-dark: #38a169;
	--output-base: #319795;
    --output-bg: #b2f5ea;
	--help-base: #f6ad55;
	--help-dark: #ed8936;
	--warning-base: #ed8936;
	--warning-dark: #dd6b20;
	--danger-base: #e53e3e;
	--danger-dark: #c53030;
	--secondary-base: #718096;
	--secondary-dark: #4a5568;

	/* ----- Gradients ----- */
	--primary-gradient: linear-gradient(135deg, var(--primary-base) 0%, var(--primary-dark) 100%);
	--success-gradient: linear-gradient(135deg, var(--success-base) 0%, var(--success-dark) 100%);
	--warning-gradient: linear-gradient(135deg, var(--warning-base) 0%, var(--warning-dark) 100%);
	--danger-gradient: linear-gradient(135deg, var(--danger-base) 0%, var(--danger-dark) 100%);
	--secondary-gradient: linear-gradient(135deg, var(--secondary-base) 0%, var(--secondary-dark) 100%);
	--disabled-gradient: linear-gradient(135deg, #a0aec0 0%, var(--secondary-base) 100%);

	/* ----- Text Colors ----- */
	--text-primary: #2d3748;
	--text-secondary: #4a5568;
	--text-muted: var(--secondary-base);
	--text-light: #e2e8f0;
	--text-accent: #66b3ff;

	/* ----- Feedback Colors ----- */
	--success-bg: #c6f6d5;
	--success-text: #22543d;
	--success-border: #9ae6b4;
	--error-bg: #fed7d7;
	--error-text: var(--danger-dark);
	--error-border: #feb2b2;

	/* ----- Sizing & Spacing ----- */
	--spacing-xs: 5px;
	--spacing-sm: 10px;
	--spacing-md: 15px;
	--spacing-lg: 20px;
	--spacing-xl: 30px;

	/* ----- Border Radius ----- */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 15px;

	/* ----- Shadows ----- */
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
	--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2);
	--shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.3);

	/* ----- Transitions ----- */
	--transition-fast: 0.2s ease;
	--transition-normal: 0.3s ease;
}


/* ============================================= */
/* ===== 2. RESET & BASE STYLES ================ */
/* ============================================= */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background: var(--primary-gradient);
	min-height: 100vh;
	padding: var(--spacing-lg);
	color: var(--text-primary);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}


/* ============================================= */
/* ===== 3. LAYOUT COMPONENTS ================== */
/* ============================================= */
.container {
	max-width: 1200px;
	margin: 0 auto;
	background: var(--bg-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	width: 100%;
}

.header {
	background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-darker) 100%);
	color: white;
	padding: var(--spacing-lg) var(--spacing-xl);
	text-align: center;
	position: relative;
}

.header h1 {
	font-size: 2.2em;
	margin-bottom: var(--spacing-sm);
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.header p {
	font-size: 1.1em;
	opacity: 0.9;
}

.content {
	padding: var(--spacing-xl);
	min-height: 450px
}

.footer {
	background: var(--bg-dark);
	color: var(--text-light);
	text-align: center;
	padding: var(--spacing-md) var(--spacing-xl);
	font-size: 0.9em;
	border-top: 1px solid var(--border-color);
}

.footer a {
	color: var(--text-accent);
	text-decoration: underline;
	/* filter: brightness(1.5); */
	transition: var(--transition-fast);
}

.footer a:hover,
.footer a:focus {
	color: #ffffff;
	text-decoration: underline;
	outline: 2px solid #66b3ff; 
	outline-offset: 2px;
}


/* ============================================= */
/* ===== 4. REUSABLE COMPONENTS ============== */
/* ============================================= */

/* ----- Site Navigation ----- */
.site-nav {
	position: absolute;
	top: var(--spacing-lg);
	left: var(--spacing-xl);
	z-index: 200;
}

.nav-dropdown {
	position: relative;
	display: inline-block;
}

.nav-toggle {
	background: rgba(255, 255, 255, 0.1);
	color: white;
	border: 2px solid rgba(255, 255, 255, 0.2);
	padding: 10px 16px;
	border-radius: var(--radius-md);
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	transition: var(--transition-normal);
	backdrop-filter: blur(10px);
}

.nav-toggle:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.4);
	transform: translateY(-1px);
}

.nav-toggle::after {
	content: "▼";
	font-size: 0.8em;
	transition: var(--transition-fast);
}

.nav-dropdown.open .nav-toggle::after {
	transform: rotate(180deg);
}

.nav-menu {
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--bg-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	min-width: 280px;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all var(--transition-normal);
	border: 1px solid var(--border-light);
	margin-top: 8px;
}

.nav-dropdown.open .nav-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-menu-header {
	background: var(--bg-dark);
	color: white;
	padding: var(--spacing-md) var(--spacing-lg);
	font-weight: 600;
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.nav-item {
	display: block;
	padding: var(--spacing-md) var(--spacing-lg);
	color: var(--text-primary);
	text-decoration: none;
	border-bottom: 1px solid var(--border-light);
	transition: var(--transition-fast);
	position: relative;
}

.nav-item:hover {
	background: var(--bg-light);
	color: var(--primary-base);
}

.nav-item.current {
	background: rgba(102, 126, 234, 0.1);
	color: var(--primary-base);
	font-weight: 600;
}

.nav-item.current::before {
	content: "●";
	position: absolute;
	left: var(--spacing-sm);
	color: var(--primary-base);
}

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

.nav-item-title {
	font-weight: 600;
	margin-bottom: 2px;
	display: block;
}

.nav-item-desc {
	font-size: 0.85em;
	color: var(--text-muted);
	line-height: 1.3;
}

/* ----- Panel Component ----- */
.panel {
	background-color: var(--bg-light);
	padding: var(--spacing-xl);
	border-radius: var(--radius-lg);
	margin-bottom: var(--spacing-lg);
	box-shadow: var(--shadow-sm);
	border-left: 4px solid;
}

.panel.bg-white {
	background-color: var(--bg-white);
}

.panel-accent-primary {
	border-left-color: var(--primary-base);
}

.panel-accent-success {
	border-left-color: var(--success-base);
}

.panel-accent-info {
	border-left-color: #4299e1;
}

.panel-accent-help {
	border-left-color: var(--help-base);
}

.panel h3 {
	color: var(--text-primary);
	margin-bottom: var(--spacing-lg);
	font-size: 1.3em;
}

/* ----- Button System ----- */
.btn {
	color: white;
	border: none;
	padding: 12px 24px;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition-normal);
	letter-spacing: 0.5px;
	text-decoration: none;
	display: inline-block;
	text-align: center;
}

.btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

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

.btn:disabled {
	background: var(--disabled-gradient);
	color: white;
	cursor: not-allowed;
	opacity: 0.6;
	transform: none;
	box-shadow: none;
}

.btn-full {
	width: 100%;
	margin-top: 10px;
}

/* Gradient Button Variants */
.btn-primary {
	background: var(--primary-gradient);
	--btn-shadow-color: rgba(102, 126, 234, 0.3);
}

.btn-success {
	background: var(--success-gradient);
	--btn-shadow-color: rgba(72, 187, 120, 0.3);
}

.btn-secondary {
	background: var(--secondary-gradient);
	--btn-shadow-color: rgba(113, 128, 150, 0.3);
}

.btn-warning {
	background: var(--warning-gradient);
	--btn-shadow-color: rgba(230, 126, 34, 0.3);
}

.btn-danger {
	background: var(--danger-gradient);
	--btn-shadow-color: rgba(229, 62, 62, 0.3);
}

.btn-nav {
	background: var(--primary-gradient);
	--btn-shadow-color: rgba(102, 126, 234, 0.3);
}

/* Refactored Hover State for Gradient Buttons */
.btn-primary:hover,
.btn-success:hover,
.btn-secondary:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-nav:hover {
	box-shadow: 0 6px 20px var(--btn-shadow-color, rgba(0, 0, 0, 0.2));
}

/* Selectable Button Style */
.btn-select {
	background: #f0f0f0;
	border: 2px solid #ddd;
	color: var(--text-secondary);
}

.btn-select:hover {
	background: #e0e0e0;
	border-color: #ccc;
	transform: translateY(-1px);
}

.btn-select.active {
	color: white;
	border-color: transparent;
}

.btn-select.active.mode-active {
	background: #2E7D32;
}

/* ----- Score System & Modal ----- */
.score-button {
	position: absolute; /* fixed would make it stay in corner */
	top: var(--spacing-lg);
	right: var(--spacing-xl);
	background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
	color: white;
	border: none;
	padding: 12px 18px;
	border-radius: var(--radius-md);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition-normal);
	box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3);
	z-index: 100;
	max-width: 300px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* display: block; */
}

.score-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(66, 153, 225, 0.4);
}

.score-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.score-modal {
	background: var(--bg-white);
	border-radius: var(--radius-lg);
	width: 90%;
	max-width: 600px;
	max-height: 80vh;
	overflow: hidden;
	box-shadow: var(--shadow-xl);
}

.score-modal-header {
	background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-darker) 100%);
	color: white;
	padding: var(--spacing-lg) var(--spacing-xl);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.score-modal-header h2 {
	margin: 0;
	font-size: 1.5em;
}

.close-modal {
	background: none;
	border: none;
	color: white;
	font-size: 24px;
	cursor: pointer;
	padding: 0;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: var(--transition-fast);
}

.close-modal:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.score-modal-content {
	padding: var(--spacing-xl);
	max-height: 50vh;
	overflow-y: auto;
}

.score-modal-footer {
	background: var(--bg-light);
	padding: var(--spacing-lg) var(--spacing-xl);
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid var(--border-light);
}

.reset-scores-btn {
	background: linear-gradient(135deg, #f56565 0%, var(--danger-base) 100%);
	color: white;
	border: none;
	padding: var(--spacing-sm) 16px;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 600;
	transition: var(--transition-fast);
}

.reset-scores-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(245, 101, 101, 0.3);
}

.close-modal-btn {
	background: var(--border-light);
	color: var(--text-secondary);
	border: none;
	padding: var(--spacing-sm) 16px;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 600;
	transition: var(--transition-fast);
}

.close-modal-btn:hover {
	background: #cbd5e0;
}

/* ----- Generic Game Components ----- */
.game-mode-container {
	display: none;
}

.question-area {
	text-align: center;
	margin-bottom: var(--spacing-xl);
}

.question-area h2,
.question-area h3 {
	color: var(--text-primary);
	margin-bottom: var(--spacing-lg);
	font-size: 1.4em;
}

.logic-diagram-display {
	background: var(--bg-light-teal);
	border: 2px solid var(--border-light);
	border-radius: var(--radius-lg);
	margin: var(--spacing-lg) 0;
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-sm);
}

.expression-input {
	width: 100%;
	max-width: 400px;
	padding: var(--spacing-md);
	font-size: 1.2rem;
	border: 2px solid var(--border-light);
	border-radius: var(--radius-md);
	text-align: center;
	margin: var(--spacing-lg) auto;
	display: block;
	background: var(--bg-white);
	color: var(--text-primary);
	transition: var(--transition-fast);
}

.expression-input:focus {
	outline: none;
	border-color: var(--primary-base);
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

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

.options .btn {
	position: relative;
	min-width: 80px;
	padding-left: 50px;
	background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
	color: #2d3748;
	border: 2px solid #e2e8f0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.option.btn .shortcut {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    background: var(--primary-base);
    color: white;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

.options .btn.correct {
	background: var(--success-gradient);
	border: 2px solid var(--success-border);
}

.options .btn.incorrect {
	background: var(--danger-gradient);
	border: 2px solid var(--error-border);
}



.feedback {
	margin: var(--spacing-lg) 0;
	padding: var(--spacing-lg);
	border-radius: var(--radius-md);
	font-size: 16px;
	font-weight: 600;
	display: none;
}

.feedback.correct {
	background: var(--success-bg);
	color: var(--success-text);
	border: 2px solid var(--success-border);
}

.feedback.incorrect {
	background: var(--error-bg);
	color: var(--error-text);
	border: 2px solid var(--error-border);
}

.feedback-details {
	margin-top: var(--spacing-md);
	font-weight: normal;
	font-size: 14px;
	line-height: 1.6;
}

.score {
	text-align: center;
	font-size: 1.2rem;
	font-weight: 600;
	background: var(--bg-white);
	color: var(--text-primary);
	padding: var(--spacing-md) var(--spacing-xl);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	max-width: 250px;
	margin: 0 auto var(--spacing-lg) auto;
	border-left: 4px solid #4299e1;
}

.score p {
	margin: 0;
}

#scoreDisplay {
	color: #4299e1;
	font-weight: bold;
}

.help-info {
	display: block;
	background: #fff3cd;
	border: 1px solid #ffeaa7;
	border-radius: var(--radius-md);
	padding: var(--spacing-lg);
	margin: var(--spacing-lg) auto;
	border-left: 4px solid #f39c12;
	width: fit-content;
}

.help-info h4 {
	margin-bottom: var(--spacing-md);
	color: #856404;
	font-size: 1em;
}

.accepted-answers {
	font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
	font-size: 0.9rem;
	color: #856404;
	background: rgba(255, 255, 255, 0.5);
	padding: var(--spacing-md);
	border-radius: var(--radius-sm);
}

.mark-btn-container {
	text-align: center;
	padding: var(--spacing-xs);
	margin-bottom: var(--spacing-lg)
}

.mark-btn-container .btn {
	margin: 0 var(--spacing-xs);
	display: none;
}

/* ============================================= */
/* ===== 5. GAME MODE SPECIFIC STYLES ========== */
/* ============================================= */

/* ----- Generic Controls ----- */
.mode-selector {
	display: flex;
	justify-content: center;
	gap: var(--spacing-lg);
	margin-bottom: var(--spacing-xl);
	flex-wrap: wrap;
}

.selection-controls {
	display: flex;
	gap: var(--spacing-xl);
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
}

.difficulty-section {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.selection-controls label,
.options-label {
	font-weight: 600;
	color: var(--text-secondary);
	min-width: 80px;
}

.selection-controls select {
	padding: var(--spacing-sm) var(--spacing-md);
	border: 2px solid var(--border-light);
	border-radius: 6px;
	font-size: 16px;
	background: var(--bg-white);
	color: var(--text-primary);
	min-width: 150px;
}

.selection-controls select:focus {
	outline: none;
	border-color: var(--primary-base);
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.help-toggle {
	margin-top: var(--spacing-md);
}

.help-label {
	font-size: 0.9rem;
	color: var(--text-muted);
	font-weight: normal;
}

.help-checkbox, .other-checkbox {
	margin-right: var(--spacing-xs);
}


.options-section {
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
}

/* ----- Score Modal Specifics ----- */
.overall-stats {
	margin-bottom: var(--spacing-xl);
}

.overall-stats h3,
.program-stats h3 {
	color: var(--text-primary);
	margin-bottom: var(--spacing-md);
	font-size: 1.2em;
}

.stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--spacing-md);
}

.stat-item {
	text-align: center;
	background: var(--bg-light);
	padding: var(--spacing-md);
	border-radius: var(--radius-md);
	border-left: 4px solid #4299e1;
}

.stat-value {
	font-size: 1.5em;
	font-weight: bold;
	color: var(--text-primary);
	margin-bottom: var(--spacing-xs);
}

.stat-label {
	font-size: 0.9em;
	color: var(--text-muted);
}

.program-stats {
	margin-top: var(--spacing-xl);
}

.program-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--bg-light);
	padding: var(--spacing-md);
	border-radius: var(--radius-md);
	margin-bottom: var(--spacing-sm);
}

.program-info {
	flex: 1;
}

.program-info .program-name {
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: var(--spacing-xs);
}

.program-details {
	font-size: 0.9em;
	color: var(--text-muted);
}

.no-scores {
	display: none;
	text-align: center;
	padding: 40px var(--spacing-lg);
	color: var(--text-muted);
}

/* ===== LEVEL SYSTEM ===== */
.level-info {
    background: var(--primary-gradient);
    color: white;
    padding: 25px;
    border-radius: var(--radius-lg);
    margin-bottom: 25px;
    text-align: center;
}

.current-level {
    margin-bottom: var(--spacing-lg);
}

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

.level-emoji {
    font-size: 3em;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.level-details {
    text-align: left;
}

.level-title {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: var(--spacing-xs);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.level-description {
    font-size: 1em;
    opacity: 0.9;
    font-style: italic;
}

.level-progress {
    background: rgba(255, 255, 255, 0.1);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    backdrop-filter: blur(10px);
}

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
    font-size: 0.9em;
}

.progress-bar {
    background: rgba(255, 255, 255, 0.2);
    height: 8px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progress-fill {
    background: linear-gradient(90deg, #4CAF50, #81C784);
    height: 100%;
    border-radius: var(--radius-sm);
    transition: width 0.5s ease;
}

.level-maxed {
    background: rgba(255, 215, 0, 0.2);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 2px solid rgba(255, 215, 0, 0.5);
}

.max-level-message {
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    color: #FFD700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* ----- Scenario Mode Specifics ----- */
.scenario-content {
	max-width: 100%;
	margin: 0 auto;
}

.scenario-content h3 {
	color: var(--text-primary);
	margin-bottom: var(--spacing-lg);
	font-size: 1.3em;
	text-align: left;
}

.scenario-content .panel {
	text-align: left;
}

.input-table-container {
	margin-top: var(--spacing-lg);
}

.input-table-container h4 {
	color: var(--text-primary);
	margin-bottom: var(--spacing-md);
	font-size: 1.1em;
}

.input-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--spacing-xl);
	background-color: var(--bg-white);
	box-shadow: var(--shadow-sm);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.input-table th {
	background-color: var(--bg-dark);
	color: var(--text-light);
	padding: var(--spacing-md) var(--spacing-lg);
	text-align: center;
	font-weight: 600;
	font-size: 0.95em;
}

.input-table td {
	padding: var(--spacing-md) var(--spacing-lg);
	border-bottom: 1px solid var(--border-light);
}

.input-table tr:nth-child(even) {
	background-color: var(--bg-light);
}

.input-table tr:hover {
	background-color: #edf2f7;
}

.input-table td:first-child {
	font-weight: bold;
	color: var(--text-primary);
	width: 80px;
	text-align: center;
}

#scenarioAcceptedAnswers div {
	background-color: var(--bg-light);
	padding: var(--spacing-sm) var(--spacing-md);
	margin: var(--spacing-xs) 0;
	border-radius: var(--radius-sm);
	border-left: 3px solid var(--help-base);
	font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
	color: var(--text-secondary);
}

/* ----- Truth Table Mode Specifics ----- */
.expression-display {
	margin-bottom: var(--spacing-lg);
	text-align: center;
}

.expression-text {
	padding: var(--spacing-lg);
	border-radius: var(--radius-md);
	border-left: 4px solid var(--primary-base);
	font-family: 'Courier New', monospace;
	font-size: 1.3em;
	font-weight: bold;
	color: var(--text-primary);
	display: block;
	width: fit-content;
	box-shadow: var(--shadow-sm);
	background-color: var(--bg-light-teal);
}

.expression-text.help {
	border-left: 4px solid var(--help-base);
}

.bottom {
	margin-top: var(--spacing-lg);
	margin-bottom: 0px;
}

.truth-table-container {
	overflow-x: auto;
	/* margin: var(--spacing-lg) 0; */
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	background: var(--bg-white);
}

.truth-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 300px;
	font-size: 0.95em;
}

.truth-table th,
.truth-table td {
	padding: var(--spacing-sm);
	border: 1px solid var(--border-light);
	text-align: center;
	vertical-align: middle;
}

.input-header {
	background: var(--primary-base);
	color: white;
	font-size: 1em;
	font-weight: 600;
}

.intermediate-header {
	background: var(--help-base);
	color: white;
	font-size: 0.9em;
}

.output-header {
	background: var(--output-base);
	color: white;
	font-size: 1em;
	font-weight: 600;
}

.input-cell {
	background: #edf2f7;
	color: var(--text-primary);
	font-weight: bold;
}

.intermediate-cell {
	background: #fdf6e3;
	color: var(--text-secondary);
}

.output-cell {
	background: var(--output-bg);
	color: var(--text-primary);
}

.truth-table-select {
	width: 50px;
	padding: var(--spacing-xs);
	border: 2px solid var(--border-light);
	border-radius: var(--radius-sm);
	font-size: 1em;
	font-weight: 600;
	text-align: center;
	background: var(--bg-white);
	transition: var(--transition-fast);
	cursor: pointer;
}

.truth-table-select:focus {
	outline: none;
	border-color: var(--primary-base);
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.truth-table-select.correct {
	background: var(--success-bg);
	border-color: var(--success-border);
	color: var(--success-text);
}

.truth-table-select.incorrect {
	background: var(--error-bg);
	border-color: var(--error-border);
	color: var(--error-text);
}

.truth-table-select.unanswered {
	background: #fffbea;
	border-color: #f6e05e;
	animation: pulse 1.5s infinite;
}

.truth-table-select.optional-unanswered {
	background: var(--bg-light);
	border-color: var(--border-light);
	color: var(--text-muted);
}

.truth-table tbody tr:hover {
	background: var(--bg-light);
}

.truth-table tbody tr:hover .input-cell {
	background: #e2e8f0;
}

.truth-table tbody tr:hover .intermediate-cell {
	background: #fefcbf;
}

.truth-table tbody tr:hover .output-cell {
	background: #81e6d9;
}

/* ----- Draw Circuit Mode Specifics ----- */
#drawCircuitContainer, #drawCircuitContainerScenario {
	display: flex;
	gap: var(--spacing-xl);
	margin-top: var(--spacing-lg);
	flex-wrap: wrap;
}

.circuit-toolbox {
	flex: 0 0 200px;
	background-color: var(--bg-light);
	padding: var(--spacing-lg);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
	align-self: flex-start;
}

.circuit-toolbox h3 {
	text-align: center;
	color: var(--text-primary);
	margin-bottom: var(--spacing-lg);
	font-size: 1.1em;
}

.gate {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.75rem 0.25rem;
	margin-bottom: var(--spacing-sm);
	cursor: grab;
	border: none;
	background: transparent;
	border-radius: var(--radius-md);
	user-select: none;
	font-weight: 600;
	transition: transform var(--transition-fast), color var(--transition-fast);
	box-shadow: none;
}

.gate:hover {
	transform: translateY(-2px);
	color: var(--primary-base);
}

.gate:hover .gate-svg {
	filter: brightness(0.7);
}

.gate:active {
	cursor: grabbing;
}

.gate-icon {
	width: 100%;
	height: 50px;
	aspect-ratio: 1.5;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gate-svg {
	width: 90%;
	height: auto;
	pointer-events: none;
	display: block;
}

.gate-label {
	margin-top: 0.4rem;
	font-size: 0.9rem;
	pointer-events: none;
}

#canvasContainer, #canvasContainerScenario {
	flex: 1;
	min-width: 0;
	background: var(--bg-light-teal);
	border: 2px solid var(--border-light);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

#circuitCanvas, #scenarioCircuitCanvas {
	cursor: crosshair;
	max-width: 100%;
	height: auto;
}

#interpretedExpression, .interpreted-expression-display {
	/* font-weight: bold; */
	color: var(--text-primary);
	/* font-family: 'Consolas', 'Monaco', 'Courier New', monospace; */
	display: inline-block;
}

.interpreted-expression-display {
	padding-top: var(--spacing-md);
}

#resetCircuitBtn {
	background: var(--danger-gradient);
}

#resetCircuitBtn:hover {
	box-shadow: 0 6px 20px rgba(229, 62, 62, 0.3);
}

/* ============================================= */
/* ===== 6. RESPONSIVE DESIGN ================== */
/* ============================================= */
@media (max-width: 768px) {
	.container {
		margin: var(--spacing-sm);
		border-radius: var(--radius-md);
	}

	.content {
		padding: var(--spacing-lg);
	}

	.header {
		padding: var(--spacing-md) var(--spacing-lg);
	}

	.header h1 {
		font-size: 1.8em;
	}

	.panel {
		padding: var(--spacing-lg);
	}

	.selection-controls {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-md);
	}

	.gate-svg {
		width: 150px;
		height: 90px;
	}

	.logic-diagram-display {
		padding: var(--spacing-lg);
		min-height: 150px;
	}

	.expression-input {
		font-size: 1rem;
		padding: var(--spacing-sm);
	}

	.options {
		gap: var(--spacing-sm);
	}

	.btn {
		font-size: 14px;
		padding: 10px 20px;
	}

	.score-button {
		position: static;
		margin-top: var(--spacing-md);
		display: inline-block;
	}

	.score-modal {
		width: 95%;
		margin: var(--spacing-sm);
	}

	.score-modal-header,
	.score-modal-content,
	.score-modal-footer {
		padding: var(--spacing-md) var(--spacing-lg);
	}

	.stat-grid {
		grid-template-columns: 1fr;
	}

	.program-item {
		flex-direction: column;
		align-items: flex-start;
	}

	.site-nav {
		position: static;
		margin-bottom: var(--spacing-md);
	}

	.nav-menu {
		min-width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		margin-top: 0;
		border-radius: 0;
		max-height: 100vh;
		overflow-y: auto;
	}

	.nav-dropdown.open .nav-menu {
		transform: translateY(0);
	}

	.truth-table {
		font-size: 0.85em;
	}

	.truth-table-select {
		width: 40px;
		font-size: 0.9em;
	}

	.expression-text {
		font-size: 1.1em;
		padding: var(--spacing-md);
	}

	.intermediate-header {
		font-size: 0.8em;
	}
}

@media (max-width: 480px) {
	body {
		padding: var(--spacing-sm);
	}

	.header h1 {
		font-size: 1.5em;
	}

	.header p {
		font-size: 1em;
	}

	.content {
		padding: var(--spacing-md);
	}

	.panel {
		padding: var(--spacing-md);
	}

	.mode-selector {
		gap: var(--spacing-sm);
	}

	.btn {
		font-size: 12px;
		padding: 8px 16px;
	}

	.expression-input {
		max-width: 100%;
		font-size: 0.9rem;
	}

	.truth-table-select {
		width: 35px;
		font-size: 0.8em;
		padding: var(--spacing-xs);
	}

	.expression-text {
		font-size: 1em;
	}

	.intermediate-header {
		font-size: 0.7em;
	}
}

/* ============================================= */
/* ===== 7. ANIMATIONS ========================= */
/* ============================================= */
@keyframes pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}
}