/* =========================================
   STILURI CSS - FINAL ȘI CORECTAT
   ========================================= */

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #1a202c;
    margin: 0;
    padding: 0;
    background-color: #f3f4f6;
    overflow-x: hidden;
}

/* Clase Utilitare */
.ascuns { display: none !important; }
.vizibil { display: block !important; }

/* =========================================
   STILURI LISTĂ OBIECTIVE (Marcatori Checkmark)
   ========================================= */

ul.lista-bifata {
    list-style: none !important; /* Eliminăm stilul default (bulina) */
    padding-left: 0;
    margin-left: 0;
}

ul.lista-bifata li {
    position: relative;
    padding-left: 2rem; /* Spațiu pentru emoji */
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

ul.lista-bifata li::before {
    content: "✔️"; /* Emoji-ul folosit ca marcator */
    position: absolute;
    left: 0;
    top: 0; /* Ajustează dacă textul nu e aliniat perfect */
    font-size: 1.1em; /* Mărimea emoji-ului */
}

/* Butoane de confirmare parcurgere */
.container-actiune {
    margin-top: 15px;
    margin-bottom: 25px;
    text-align: right; /* Le punem în dreapta, să invite la "Next" */
}

.btn-confirmare {
    background-color: #3b82f6; /* Albastru */
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-confirmare:hover {
    background-color: #2563eb;
    transform: translateY(-1px);
}

/* Stil când e bifat/finalizat */
.btn-confirmare.bifat {
    background-color: #10b981; /* Verde */
    cursor: default;
    pointer-events: none; /* Nu mai poți da click */
}



/* --- TABURI --- */
.zona-taburi {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    overflow: hidden;
}

#zona-file {
    display: flex;
    overflow-x: auto;
    border-bottom: 2px solid #e5e7eb;
    background: #ffffff;
    padding: 0 1rem;
    gap: 0.5rem;
    scrollbar-width: thin;
}

.buton-fila {
    padding: 0.5rem 1.5rem;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
    background-color: #f8fafc;
    font-weight: 600;
    color: #64748b;
    margin-bottom: -2px;
}

.buton-fila:hover { color: #4f46e5; background-color: #f9fafb; }

.buton-fila.fila-activa {
    background-color: #ffffff;
    color: #4f46e5;
    border-top: 3px solid #2d4278;
    border-bottom: 2px solid white;
    z-index: 10;
}

.continut-fila { display: none; padding: 2rem; animation: fadeIn 0.3s ease; }
.continut-fila.activ { display: block; }

/* Stare pentru filele (tab-urile) blocate */
.fila-blocata {
    opacity: 0.5;                /* Semitransparent */
    pointer-events: none;        /* NU permite click-ul (esențial!) */
    filter: grayscale(100%);     /* Alb-negru */
    cursor: not-allowed;
    position: relative;
}

/* Opțional: Adăugăm un lăcățel vizual lângă text */
.fila-blocata::after {
    content: "🔒";
    font-size: 0.8em;
    margin-left: 5px;
    position: absolute;
    top: 0px;
    right: -15px;
}

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

/* --- VIDEO --- */
.rama-video-container {
    position: relative; overflow: hidden; border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); background-color: #000;
    aspect-ratio: 16 / 9; margin: auto; max-width: 800px;
}
.video-iframe { position: absolute; top: 0; left: 0; height: 100%; width: 100%; border: none;}

/* --- ELEMENTE GENERALE (Carduri, Butoane) --- */
        .card {
            background: white;
            border-radius: 12px;
            padding: 35px;
            margin-bottom: 30px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            border-left: 8px solid #ccc;
            animation: fadeIn 0.5s ease-out;
        }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        .card-green { border-left-color: #10b981; }   
        .card-purple { border-left-color: #8b5cf6; }  
        .card-blue { border-left-color: #3b82f6; }    
        .card-yellow { border-left-color: #eab308; }  
        .card-indigo { border-left-color: #4f46e5; }  
        .card-red { border-left-color: #ef4444; }     

        /* --- COD (THEME LIGHT - PRIETENOS) --- */
        pre {
            background-color: #f8f9fa; 
            color: #1f2937;
            padding: 20px;
            border-radius: 8px;
            border: 1px solid #e5e7eb;
            font-family: 'Consolas', 'Monaco', monospace;
            overflow-x: auto;
            margin: 15px 0;
            font-size: 1rem;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
        }
        code { font-family: inherit; }
        
        /* Sintaxă colorată manual */
        .kw { color: #0033cc; font-weight: bold; } /* Keywords (var) */
        .fn { color: #d946ef; font-weight: bold; } /* Functions (point) */
        .nm { color: #059669; } /* Numbers */
        .cm { color: #6b7280; font-style: italic; } /* Comments */
        .str { color: #db2777; } /* Strings */




.caseta-exercitiu, .card-continut, .card-configurare {
    background: white; border: 1px solid #e5e7eb; border-radius: 0.75rem;
    padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.antr-container-centrat { display: flex; justify-content: center; align-items: center; min-height: 400px; }

.antr-btn-start {
    width: 100%; padding: 0.875rem; background-color: #4f46e5; color: white;
    font-weight: 700; border-radius: 0.5rem; border: none; cursor: pointer;
}

/* --- SIDEBAR --- */
:root { --latime-sidebar: 260px; --culoare-sidebar: #2d4278; }

.sid-container {
    width: var(--latime-sidebar); background-color: var(--culoare-sidebar); color: #e2e8f0;
    display: flex; flex-direction: column; position: fixed; height: 100vh;
    left: 0; top: 0; z-index: 50; transition: transform 0.3s ease;
}
.sid-header { padding: 1.5rem; font-weight: 800; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; }
.sid-nav { flex: 1; padding: 1rem; overflow-y: auto; }
.sid-titlu-grup {
    font-size: 0.75rem; text-transform: uppercase; color: #818cf8;
    margin-top: 1.5rem; margin-bottom: 0.5rem; padding-left: 0.5rem; font-weight: 700;
}
.sid-buton-lectie {
    display: block; width: 100%; padding: 0.75rem 1rem; margin-bottom: 0.25rem;
    border-radius: 0.5rem; border: none; background: transparent; color: #cbd5e1;
    text-align: left; cursor: pointer; transition: all 0.2s;
}
.sid-buton-lectie:hover { background: rgba(255,255,255,0.1); color: white; }
.sid-buton-lectie.selectat { background: #4f46e5 !important; color: white !important; font-weight: 600 !important; }

.sid-buton-lectie.blocat {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f3f4f6;
    color: #9ca3af;
}

.sid-buton-lectie.blocat:hover {
    background-color: #f3f4f6; /* Fără efect de hover */
    transform: none;
}

.sid-footer { padding: 1rem; font-size: 0.85rem; text-align: center; border-top: 1px solid rgba(255,255,255,0.1); }

.main-content {
    margin-left: var(--latime-sidebar); width: calc(100% - var(--latime-sidebar));
    min-height: 100vh; display: flex; flex-direction: column;
}
.antet-container {
    display: flex; justify-content: space-between; align-items: center; padding: 0 2rem;
    background: white; border-bottom: 1px solid #e5e7eb; height: 70px; position: sticky; top: 0; z-index: 40;
}

        /* --- STILURI ACORDEON (TEORIE) --- */
        .acordeon-btn {
            background-color: #f8fafc;
            color: #334155;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 1.1rem;
            font-weight: 600;
            transition: 0.4s;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 4px;
            margin-bottom: 5px;
        }

        .acordeon-btn:hover, .acordeon-btn.activ {
            background-color: #e0e7ff; /* Indigo light */
            color: #3730a3;
        }

        .acordeon-btn:after {
            content: '\002B'; /* Plus sign */
            color: #777;
            font-weight: bold;
            float: right;
            margin-left: 5px;
        }

        .acordeon-btn.activ:after {
            content: "\2212"; /* Minus sign */
        }

        .acordeon-panel {
            padding: 0 18px;
            background-color: white;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
            margin-bottom: 10px;
            border-left: 3px solid #6366f1;
        }
        
        .acordeon-content-inner {
            padding: 15px 0;
            color: #475569;
        }
        
    /* 9. STILURI LABORATOR ȘI VERIFICARE (Originale) */
    .caseta-exercitiu {
        background-color: #ffffff; border: 1px solid #e2e8f0;
        border-radius: 0.75rem; padding: 2rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        margin-bottom: 2rem;
    }
    .titlu-exercitiu { font-size: 1.25rem; font-weight: 700; color: #1e293b; margin-bottom: 1rem; }
    .numar-pas {
        display: inline-block; background-color: #e0e7ff; color: #4338ca;
        padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem;
        font-weight: 600; margin-bottom: 1rem;
    }
    .prompt-context-laborator {
        background-color: #f8fafc; border-left: 4px solid #6366f1;
        padding: 1rem; margin-bottom: 1.5rem; font-style: italic; color: #475569;
    }
    .zona-variante-laborator { display: flex; flex-direction: column; gap: 0.75rem; margin: 1.5rem 0; }
    .element-varianta {
        display: flex; align-items: center; padding: 1rem; border: 1px solid #e2e8f0;
        border-radius: 0.5rem; cursor: pointer; transition: all 0.2s;
    }
    .element-varianta:hover { background-color: #f1f5f9; border-color: #cbd5e1; }
    .input-radio-laborator { margin-right: 0.75rem; width: 1.25rem; height: 1.25rem; }
    
    .zona-feedback-laborator {
        padding: 1rem; border-radius: 0.5rem; margin-bottom: 1.5rem;
        font-weight: 500; display: none;
    }
    .feedback-pozitiv { background-color: #dcfce7; color: #166534; border: 1px solid #86efac; }
    .feedback-negativ { background-color: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
    
    .zona-actiuni-laborator { display: flex; gap: 1rem; margin-top: 1rem; }
    .buton-laborator {
        padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600;
        cursor: pointer; border: none; transition: background-color 0.2s; color: white;
    }
    .buton-laborator-verificare { background-color: #4f46e5; }
    .buton-laborator-verificare:hover { background-color: #4338ca; }
    .buton-laborator-urmator { background-color: #10b981; }
    .buton-laborator-urmator:hover { background-color: #059669; }  
    

	/* =========================================
	   STILURI LABORATOR 
	   ========================================= */

	/* Cardul din lista principală */
	.lab-card {
		background: white;
		border: 1px solid #e2e8f0;
		border-radius: 12px;
		padding: 1.5rem;
		cursor: pointer;
		transition: all 0.2s ease;
		border-left: 5px solid #22c55e; /* Verde */
		box-shadow: 0 2px 4px rgba(0,0,0,0.05);
		position: relative;
		overflow: hidden;
	}

	.lab-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
		border-color: #16a34a;
	}

	/* Container pentru iconița din card */
	.lab-card-icon {
		background-color: #dcfce7;
		color: #166534;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
		margin-bottom: 10px;
	}

	/* Eticheta opțiunii de răspuns (Radio) */
	.lab-option-label {
		display: flex;
		align-items: center;
		padding: 1rem;
		border: 1px solid #d1d5db;
		border-radius: 0.75rem;
		cursor: pointer;
		background-color: white;
		transition: all 0.2s;
		margin-bottom: 0.75rem;
	}

	.lab-option-label:hover {
		background-color: #f9fafb;
		border-color: #9ca3af;
	}

	/* Stări de validare */
	.lab-option-corect {
		background-color: #dcfce7 !important; /* Verde deschis */
		border-color: #22c55e !important;
		border-width: 2px;
	}

	.lab-option-gresit {
		background-color: #fee2e2 !important; /* Roșu deschis */
		border-color: #ef4444 !important;
		border-width: 2px;
	}

	/* Formatarea bucăților de cod <code> din text */
	.prose code {
		background-color: #f1f5f9;
		color: #db2777;
		padding: 0.2rem 0.4rem;
		border-radius: 0.25rem;
		font-family: monospace;
		font-size: 0.9em;
		border: 1px solid #e2e8f0;
	}

	/* Animații */
	@keyframes slideUp {
		from { opacity: 0; transform: translateY(20px); }
		to { opacity: 1; transform: translateY(0); }
	}
	.animate-slide-up { animation: slideUp 0.4s ease-out forwards; }



    
         /* --- Stiluri flashcards --- */
        .flashcard-app {
            width: 100%;
            max-width: 800px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin:0 auto;
        }

        /* --- HEADER & PROGRES --- */
        .flashcards-header-section {
            text-align: center;
            margin-bottom: 20px;
            width: 100%;
        }

        .flashcards-title {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--primary-color);
            margin-bottom: 5px;
        }

        .flashcards-subtitle {
            font-size: 0.9rem;
            color: var(--text-light);
            margin-bottom: 15px;
        }

        .flashcards-progress-container {
            width: 100%;
            background-color: #E5E7EB;
            height: 8px;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 10px;
        }

        .flashcards-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            width: 0%;
            transition: width 0.3s ease;
        }

        .flashcards-counter {
            font-weight: 700;
            color: var(--text-light);
            font-size: 0.9rem;
        }

        /* --- SCENA 3D PENTRU CARD --- */
        .card-scene {
            width: 100%;
            height: 350px;
            perspective: 1000px; /* Esențial pentru efectul 3D */
            margin-bottom: 30px;
            cursor: pointer;
        }

        .flashcard {
            width: 100%;
            height: 100%;
            position: relative;
            transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
            transform-style: preserve-3d;
            border-radius: 20px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        }

        /* Clasa care se adaugă prin JS pentru a întoarce cardul */
        .flashcard.is-flipped {
            transform: rotateY(180deg);
        }

        /* --- FEȚELE CARDULUI --- */
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden; /* Ascunde spatele elementului */
            -webkit-backface-visibility: hidden;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 30px;
            box-sizing: border-box;
            background-color: var(--card-bg);
            border: 2px solid white;
        }

        /* FAȚA (Întrebarea/Conceptul) */
        .card-front {
            background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
        }

        .card-front::after {
            content: 'Apasă pentru definiție';
            position: absolute;
            bottom: 20px;
            font-size: 0.8rem;
            color: #9CA3AF;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* SPATELE (Răspunsul/Definiția) */
		/* =========================================
		   STILIZARE SPATE CARD (Dark Mode)
		   ========================================= */

		.card-back {
			/* Fundalul exact ca sidebar-ul */
			background-color: #1e1b4b; 
			
			/* Contur subtil pentru a se distinge de fundalul paginii, dacă e cazul */
			border: 2px solid #312e81; 
			
			/* Setări standard de layout */
			transform: rotateY(180deg);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			padding: 2rem;
		}

		/* FORȚĂM culoarea textului din interior */
		.card-back h1,
		.card-back h2,
		.card-back p,
		.card-back .back-text,
		.card-back span {
			color: #e0e7ff !important; /* Un alb cu o tentă foarte fină de indigo (mai odihnitor decât #ffffff pur) */
		}

		/* Ajustăm și eticheta (badge-ul) de pe spate să arate bine pe fundal închis */
		.card-back .category-badge {
			background-color: rgba(255, 255, 255, 0.15); /* Alb transparent */
			color: #ffffff !important;
			border: 1px solid rgba(255, 255, 255, 0.3);
		}

        /* --- TYPOGRAPHY CARD --- */
        .category-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: #DBEAFE;
            color: #1E40AF;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
        }

        .front-text {
            font-size: 2rem;
            font-weight: 800;
            color: var(--text-main);
            text-align: center;
            margin: 0;
        }

        .back-text {
            font-size: 1.1rem;
            line-height: 1.6;
            color: #374151;
        }

        /* --- CONTROALE DE NAVIGARE --- */
        .flashcards-controls {
            display: flex;
            gap: 20px;
            align-items: center;
        }

        .flashcards-btn {
            background-color: white;
            border: 1px solid #E5E7EB;
            color: var(--text-main);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }

        .flashcards-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            border-color: var(--primary-color);
            color: var(--primary-color);
        }

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

        .flashcards-btn-shuffle {
            color: var(--accent-color);
        }

        .flashcards-btn-flip-mobile {
            display: none; /* Ascuns pe desktop, arătăm pe mobil dacă e nevoie */
            padding: 10px 20px;
            width: auto;
            border-radius: 10px;
            font-weight: bold;
            background-color: var(--primary-color);
            color: white;
            border: none;
        }

        /* --- MEDIA QUERIES --- */
        @media (max-width: 480px) {
            .card-scene {
                height: 300px;
            }
            .front-text {
                font-size: 1.5rem;
            }
            .flashcards-btn-flip-mobile {
                display: block;
            }
        }   
          
        
        /* TABEL COMPARATORI */
        .comp-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top:15px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
        .comp-table th { background: #4a90e2; color: white; text-align: left; padding: 12px; }
        .comp-table td { padding: 12px; border-bottom: 1px solid #eee; background: white; }
        .comp-table tr:last-child td { border-bottom: none; }
        .comp-symbol { font-family: 'Courier New', monospace; font-weight: bold; color: #d63384; font-size: 1.4em; text-align: center; background: #fdfdfd; }
        

/* =========================================
   STILURI ANTRENAMENT (PERFORMANȚĂ)
   ========================================= */

/* --- Layout și Header --- */
.antr-header-text {
    text-align: center;
    margin-bottom: 2rem;
}

.antr-titlu {
    font-size: 1.875rem;
    font-weight: 800;
    color: #1e1b4b; /* Indigo Închis */
    margin-bottom: 0.5rem;
}

.antr-descriere {
    color: #4b5563;
}

/* Card Decorativ */
.card-decorativ {
    position: relative;
    overflow: hidden;
}

.card-decor-shape {
    position: absolute;
    top: 0; right: 0;
    width: 8rem; height: 8rem;
    background-color: #e0e7ff;
    border-bottom-left-radius: 100%;
    margin-right: -2rem;
    margin-top: -2rem;
    opacity: 0.5;
}

.antr-subtitlu-card {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* --- Controale Formular --- */
.antr-grup-input {
    margin-bottom: 2rem;
}

.antr-label {
    font-weight: 700;
    color: #374151;
    display: block;
}

.antr-info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.antr-badge-val {
    background-color: #e0e7ff;
    color: #4338ca;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.875rem;
}

.antr-input-range {
    width: 100%;
    height: 0.5rem;
    background-color: #e5e7eb;
    border-radius: 0.5rem;
    appearance: none;
    cursor: pointer;
    outline: none;
}

.antr-input-range::-webkit-slider-thumb {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #4f46e5;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.antr-input-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.25rem;
}

/* Grila butoane dificultate */
.antr-grid-dificultate {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.btn-dificultate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 1rem;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    color: #6b7280;
    font-weight: 600;
}

.btn-dificultate:hover {
    border-color: #a5b4fc;
    background-color: #f5f3ff;
}

.btn-dificultate.activ {
    border-color: #4f46e5;
    background-color: #e0e7ff;
    color: #4338ca;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

.dificultate-icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

/* Timer Switch Card */
.antr-timer-card {
    padding: 1rem;
    background-color: #f9fafb;
    border-radius: 0.75rem;
    border: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.timer-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.timer-icon-wrapper {
    background: white;
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: #4f46e5;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.timer-title { font-weight: 700; color: #1f2937; }
.timer-desc { font-size: 0.75rem; color: #6b7280; }

/* Switch CSS (fără clase Tailwind) */
.switch-container {
    position: relative;
    display: inline-block;
    width: 3rem;
    height: 1.5rem;
}

.switch-input { opacity: 0; width: 0; height: 0; }

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #cbd5e1;
    transition: .4s;
    border-radius: 9999px;
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 1.25rem;
    width: 1.25rem;
    left: 0.125rem;
    bottom: 0.125rem;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.switch-input:checked + .switch-slider { background-color: #4f46e5; }
.switch-input:checked + .switch-slider:before { transform: translateX(1.5rem); }


/* --- Sesiune Activă (Quiz) --- */
.antr-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    background: white;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    border: 1px solid #e5e7eb;
}

.antr-progres-text { font-size: 0.875rem; font-weight: 700; color: #6b7280; }
.antr-cifra-mare { color: #4f46e5; font-size: 1.125rem; }

.antr-timer-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: monospace;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    background-color: #f3f4f6;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
}

.antr-timer-box.alerta {
    background-color: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.antr-card-intrebare {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    flex-grow: 1;
    position: relative;
    min-height: 300px;
}

.antr-intrebare-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1.5rem;
}

.antr-variante-container { display: flex; flex-direction: column; gap: 0.75rem; }

.antr-varianta {
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.2s;
}

.antr-varianta:hover { background-color: #f9fafb; }

.antr-varianta.selectat {
    border-color: #4f46e5;
    background-color: #eef2ff;
    /* Simulate ring with box-shadow if needed, or just border */
    box-shadow: 0 0 0 1px #4f46e5; 
}

.antr-radio-fake {
    width: 1.5rem; height: 1.5rem;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.antr-varianta.selectat .antr-radio-fake { border-color: #4f46e5; }

.antr-radio-dot {
    width: 0.75rem; height: 0.75rem;
    background-color: #4f46e5;
    border-radius: 50%;
    display: none;
}

.antr-varianta.selectat .antr-radio-dot { display: block; }
.antr-varianta-text { font-weight: 500; color: #374151; }
.antr-varianta:hover .antr-varianta-text { color: #312e81; }

.antr-footer-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
}

/* --- Raport Final --- */
.antr-card-raport {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e7ff;
    text-align: center;
    margin-bottom: 2rem;
}

.antr-stats-row {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.stat-box { text-align: center; }
.stat-val { font-size: 1.875rem; font-weight: 700; color: #4f46e5; }
.stat-val.timp { color: #374151; }
.stat-label {
    font-size: 0.75rem;
    color: #9ca3af;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.antr-lista-rezultate {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    overflow: hidden;
}

.antr-rezultate-header {
    padding: 1rem;
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 700;
    color: #374151;
}

.rezultat-item {
    padding: 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    text-align: left;
    transition: background-color 0.2s;
}

.rezultat-item:last-child { border-bottom: none; }
.rezultat-item:hover { background-color: #f8fafc; }

.rezultat-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.rezultat-intrebare { font-weight: 700; color: #1f2937; width: 75%; }

.badge-rezultat {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    display: inline-block;
}
.badge-corect { background-color: #dcfce7; color: #15803d; }
.badge-gresit { background-color: #fee2e2; color: #b91c1c; }

.feedback-box {
    font-size: 0.875rem;
    color: #4b5563;
    background-color: #f9fafb;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #f3f4f6;
}
.label-feedback { font-weight: 700; color: #4f46e5; }