body{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;background-color:#f5f5f5;font-family:'Roboto',sans-serif;padding:20px}.base{display:flex;flex-direction:column;justify-content:center;align-items:center;width:720px;background-color:#fff;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,0.1);text-align:center;padding:30px;margin:0 auto}.file{width:100%;max-width:720%;box-sizing:border-box}h1{font-size:28px;margin-bottom:20px;color:#333}h2{font-size:24px;margin-bottom:20px;color:#333}h3{font-size:20px;margin-top:20px;color:#555}h4{font-size:18px;margin-top:10px;color:#555}label{font-size:16px}p,ol,pre{font-size:16px;color:#333;line-height:1.6;text-align:left}ol{margin:20px 0}pre{background-color:#f9f9f9;padding:10px;border-radius:5px;border:1px solid #ddd;font-size:13px;white-space:pre-wrap;word-wrap:break-word;display:block;width:95%;margin:0 auto;text-align:left;overflow-x:auto}input[type="checkbox"]{vertical-align:middle;height:20px;width:20px;margin-right:10px}button{padding:12px 24px;background-color:#3498db;color:white;border:0;border-radius:8px;cursor:pointer;font-size:16px;transition:background-color .3s ease,transform .3s ease;width:100%;margin-top:10px}button:hover{background-color:#2980b9;transform:scale(1.05)}button:disabled{background-color:#bdc3c7;cursor:not-allowed}button.delete-btn{background-color:#e74c3c}button.delete-btn:focus{outline:0}select{padding:5px;font-size:16px;cursor:pointer;border:1px solid #ccc;border-radius:5px;width:200px;height:35px;transition:background-color .3s ease;appearance:none;-webkit-appearance:none;-moz-appearance:none}input[type="text"]{padding:5px;font-size:16px;border:1px solid #ccc;border-radius:5px;width:150px}.nom{margin-bottom:20px}footer{margin-top:20px}.undo{display:none;position:fixed;bottom:30px;left:30px;z-index:1002}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;color:#444;transition:color .2s ease}#createQuestionButton{display:flex;align-items:center;justify-content:center;gap:8px;height:34px}#createQuestionButton .material-symbols-outlined{font-size:30px;color:white}#fileDropZone{width:100%;height:150px;border:2px dashed #3498db;display:flex;justify-content:center;align-items:center;margin-top:10px;margin-bottom:20px;cursor:pointer;transition:all .3s ease;border-radius:10px;background-color:#f9f9f9;position:relative;overflow:hidden}.upload-icon{position:absolute;font-size:150px;color:rgba(52,152,219,0.1);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:0}#fileDropZone p{color:#3498db;font-size:16px;text-align:center;position:relative;z-index:1}#fileDropZone:hover{background-color:#e8f4ff;border-color:#2980b9}#fileDropZone:active{background-color:#d1e6f7}#help{display:block;text-align:justify}.grid{display:grid;grid-template-columns:repeat(13,36px);grid-template-rows:repeat(13,36px);gap:1px;width:100%;max-width:500px;height:auto;justify-items:center;align-items:center}.case{width:36px;height:36px;background-color:#fff;border:1px solid #999;display:flex;justify-content:center;align-items:center;font-size:11px;cursor:pointer;user-select:none;transition:background-color .3s ease;text-align:center;position:relative;overflow:hidden;z-index:1}.case-color-split{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;display:flex;flex-direction:row}.case-color-split div{height:100%;width:50%}.case span{display:inline-block;width:100%;height:100%;line-height:36px;text-align:center;position:relative;z-index:1;color:white}.suited{background-color:#ffeb99}.offsuit{background-color:#def}.pair{background-color:#cfc}.correct{background-color:#2ecc71 !important;color:white}.wrong{background-color:#e74c3c !important;color:white}.disabled{pointer-events:none}#nextButton,#validateButton,#resetButton{width:auto;margin-top:20px;margin-left:10px;margin-right:10px}#legend{position:absolute;right:-145px;top:200px;width:140px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:14px}#legend .legend-item{display:flex;align-items:center;gap:6px}#legend .legend-box{width:16px;height:16px;border-radius:4px}#results{display:none;margin-top:40px}#results h2{font-size:24px;color:#333}#results p{font-size:18px;color:#333}#question{font-size:22px;color:#333;margin-top:20px}#backToHomeContainer{display:flex;justify-content:center;margin-bottom:10px}#errorMessage{color:red;font-weight:bold;margin-top:15px;text-align:center}#fileLinks{width:100%;border-collapse:collapse;table-layout:fixed}#fileLinks th,#fileLinks td{padding:10px;border-bottom:1px solid #ddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#fileLinks th:nth-child(1),#fileLinks td:nth-child(1){width:auto;max-width:100%;text-align:center}#fileLinks th:nth-child(2),#fileLinks td:nth-child(2){width:100px;text-align:center}#fileLinks th:nth-child(3),#fileLinks td:nth-child(3){width:100px;text-align:center}#colorButtonsContainer{margin-bottom:20px}.shuffle{margin-top:20px}#questionInput{width:94%;padding:10px;font-size:16px}.modal{position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);display:flex;justify-content:center;align-items:center}.modal-content{background:white;padding:20px 30px;border-radius:10px;text-align:center;width:90%;max-width:400px;box-shadow:0 4px 12px rgba(0,0,0,0.25)}.modal-content button{margin:0 10px;padding:10px 16px;font-size:16px;border:0;border-radius:5px;cursor:pointer}.modal-content td button{padding:6px 10px}.modal-content td .delete-btn{background-color:#e74c3c;color:white}#confirmResetModal .modal-buttons{display:flex;justify-content:center;gap:15px}#confirmResetModal .modal-buttons button{padding:8px 16px;font-size:14px;border-radius:6px;border:0;cursor:pointer;transition:background-color .2s ease}#confirmResetModal .modal-buttons button:hover{background-color:#eee}.actions{display:flex;justify-content:center;gap:8px}.toast{position:fixed;bottom:30px;right:30px;background-color:#2ecc71;color:white;padding:14px 20px;border-radius:8px;font-size:16px;z-index:1001;box-shadow:0 4px 12px rgba(0,0,0,0.2);opacity:0;transition:opacity .5s ease-in-out}.toast.show{display:block;opacity:1}#colorButtonsContainer{display:flex;flex-wrap:nowrap;gap:10px;justify-content:center}#colorButtonsContainer button{white-space:nowrap}.color-button{border:2px solid transparent;transition:border .3s ease}.color-button.active-color-button{border:3px solid black}.question-area{position:relative;width:fit-content;margin:0 auto}#tabsContainer{position:relative;display:flex;flex-direction:column}#answerGrid{position:relative}#tabsContainer .tab{display:flex;align-items:center;gap:8px;padding:6px 12px;background-color:#a9cce3;border-radius:5px 0 0 5px;cursor:pointer;user-select:none;transition:background-color .2s ease;height:30px;width:100px;position:relative;border-bottom:solid}#tabsContainer .active-tab{background-color:#3498db;font-weight:bold}#tabsContainer .active-tab .tab-title{color:white}.tab-title{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.tab-delete-btn{position:absolute;right:4px;visibility:hidden;opacity:0;transition:opacity .2s ease;background-color:transparent;z-index:1;border:0;padding:0;margin:0;cursor:pointer;width:24px;height:24px}.tab:hover .tab-delete-btn{visibility:visible;opacity:1;background-color:transparent}.tab-delete-btn:hover .material-symbols-outlined{color:#e74c3c}.tab-close-icon{pointer-events:none;color:#888;transition:color .2s ease}.add-tab{display:flex;align-items:center;justify-content:center;padding:3px 3px;background-color:transparent;border:0;cursor:pointer;color:#666;transition:color .2s ease}.add-tab:hover .material-symbols-outlined{color:white}.add-tab .material-symbols-outlined{font-size:22px;color:black}.grid-container{position:relative;display:inline-block}.grid-buttons{position:absolute;right:-140px;bottom:0;display:flex;flex-direction:column;gap:10px;align-items:center}.grid-buttons button{padding:8px 12px;font-size:14px;border-radius:6px;cursor:pointer}@keyframes pulse-background{0%{background-color:rgba(231,76,60,0.1)}50%{background-color:rgba(231,76,60,0.3)}100%{background-color:rgba(231,76,60,0.1)}}#saveQuestionButton{display:flex;align-items:center;justify-content:center;gap:8px}#saveQuestionButton .material-symbols-outlined{font-size:22px;color:white}#resetGrid{display:flex;align-items:center;justify-content:center;gap:8px}#resetGrid .material-symbols-outlined{font-size:22px;color:white}.undo-tab-button{background-color:#3498db;color:white;position:relative;overflow:hidden;cursor:pointer;border-radius:6px;font-size:14px;display:flex;align-items:center;justify-content:center}.undo-tab-content{display:flex;align-items:center;gap:6px;position:relative;z-index:1}.undo-tab-button{position:relative;overflow:hidden;border-radius:20px;padding:6px 12px;color:white;display:inline-flex;align-items:center;gap:6px;font-size:14px;background-color:transparent}.undo-tab-button>span{position:relative;z-index:1}.undo-tab-timer-bar{position:absolute;right:0;top:0;bottom:0;background-color:rgba(231,76,60,0.7);animation:shrinkBar 1s linear forwards;z-index:0;pointer-events:none}.invalid-tab{animation:blink-red .6s ease-in-out 0s 3;border-bottom:2px solid #e74c3c !important}.invalid-tab-title{border:2px dashed #e74c3c !important;animation:pulse-background 1.5s infinite}.invalid-field{animation:blink-red .6s ease-in-out 0s 3;border:2px solid #e74c3c !important}.invalid-color-label{animation:blink-red .6s ease-in-out 0s 3;border:2px solid #e74c3c;border-radius:6px}.invalid-color-usage{animation:blink-red .6s ease-in-out 0s 3;border:2px dashed #e67e22;border-radius:6px}.invalid-color-label{background-color:rgba(231,76,60,0.05)}.invalid-color-usage{background-color:rgba(230,126,34,0.05)}@keyframes blink-red{0%,100%{box-shadow:0 0 0 transparent}50%{box-shadow:0 0 4px 2px rgba(231,76,60,0.7)}}.color-preview{width:24px;height:24px;border-radius:4px;border:1px solid #ccc;cursor:pointer}.tab-title-input{font-size:14px;padding:4px 8px;border:1px solid #ccc;border-radius:4px}#additionalColorsContainer{position:absolute;right:-145px;top:0;display:flex;flex-direction:column;gap:10px;width:140px}.color-block{padding:2px;padding-right:24px;display:flex;align-items:center;border-radius:6px;font-size:14px;color:white;cursor:pointer;user-select:none;position:relative;overflow:hidden}.active-color-block{border:3px solid black}.add-color-button{display:flex;align-items:center;justify-content:center;padding:3px 3px;border-radius:6px;background-color:#bbb;color:white;border:0;cursor:pointer;transition:background-color .2s ease;background-color:#3498db}.add-color-button:hover .material-symbols-outlined{color:white}.add-color-button .material-symbols-outlined{font-size:22px;color:black}.disabled-color-button{opacity:.4;pointer-events:none;cursor:not-allowed}.color-palette-btn,.color-delete-btn{padding:2px;border:0;cursor:pointer;margin:0;width:24px;height:24px;background-color:transparent}.color-palette-btn:hover .material-symbols-outlined{color:#fff}.color-palette-btn:hover{background-color:transparent}.color-label{cursor:pointer;min-width:80px}.color-delete-btn{position:absolute;right:4px;visibility:hidden;opacity:0;transition:opacity .2s ease;background-color:transparent;z-index:1}.color-block:has(.tab-title-input) .color-delete-btn{visibility:hidden !important;opacity:0 !important;pointer-events:none}.custom-color-item:hover .color-delete-btn{visibility:visible;opacity:1}.color-delete-btn:hover .material-symbols-outlined{color:#e74c3c}.color-delete-btn:hover{background-color:transparent}.undo-color-button{background-color:#3498db;color:white;display:flex;align-items:center;justify-content:center;border-radius:6px;cursor:pointer;font-size:16px;position:relative;overflow:hidden;padding:0}.undo-color-button .undo-content{display:flex;align-items:center;gap:6px;width:100%;justify-content:center;position:relative;z-index:1;height:28px}.undo-color-button .undo-timer-bar{position:absolute;right:0;top:0;bottom:0;width:100%;background-color:rgba(231,76,60,0.7);animation:shrinkBar 1s linear forwards;z-index:0;border-radius:6px;pointer-events:none}@keyframes shrinkBar{from{width:100%}to{width:0}}.color-dropdown{display:none;position:absolute;top:38px;background:white;border:1px solid #ccc;border-radius:4px;padding:6px;gap:6px;flex-wrap:wrap;z-index:100;flex-direction:row;box-shadow:0 2px 5px rgba(0,0,0,0.2);max-width:200px}.color-swatch{width:24px;height:24px;border-radius:4px;cursor:pointer;border:1px solid #999}#confirmUnsavedModal,#confirmResetModal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center;z-index:1000}#confirmUnsavedModal .modal-content{background-color:white;padding:20px 30px;border-radius:10px;box-shadow:0 0 15px rgba(0,0,0,0.3);text-align:center;min-width:300px}#confirmUnsavedText{margin-bottom:20px;font-size:16px;font-weight:bold;text-align:center}#confirmUnsavedModal .modal-buttons{display:flex;justify-content:center;gap:15px}#confirmUnsavedModal .modal-buttons button{padding:8px 16px;font-size:14px;border-radius:6px;border:0;cursor:pointer;transition:background-color .2s ease}#confirmUnsavedModal .modal-buttons button:hover{background-color:#eee}.start,.export,.delete{display:flex;align-items:center;justify-content:center;gap:8px;max-height:46px;overflow:hidden}button.delete{background-color:#e74c3c;color:white;border:0}button.start .material-symbols-outlined,.export .material-symbols-outlined,.delete .material-symbols-outlined{font-size:35px;flex-shrink:0}.edit-btn,.delete-btn{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;font-size:14px;border-radius:6px;border:0;cursor:pointer}.edit-btn .material-symbols-outlined,.delete-btn .material-symbols-outlined{font-size:20px;color:white}.edit-btn{background-color:#3498db}.delete-btn{background-color:#e74c3c}.edit-btn:hover .material-symbols-outlined,.delete-btn:hover .material-symbols-outlined{color:black}.tabs-scroll-wrapper{max-height:480px;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;position:absolute;right:465px;top:0;display:flex;flex-direction:column;gap:10px;width:140px}.tabs-scroll-wrapper::-webkit-scrollbar{display:none}.main-editor-layout{display:flex;flex-direction:row;align-items:flex-start;transform:translateX(-70px)}#tabsContainer input{height:33px;width:110px}#tutorialOverlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.6);z-index:9999;pointer-events:all}.__tutorial-focus{position:relative;z-index:10000 !important;pointer-events:auto;isolation:isolate;box-shadow:0 0 0 4px #fff,0 0 10px 4px #3498db;border-radius:6px}tr.__tutorial-focus{background-color:white !important}__tutorial-focus button:disabled{background-color:#3498db}#quizStartButtons{background-color:white}#tutorialTooltip{background:white;color:#333;padding:10px 14px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.3);z-index:10001;max-width:240px;font-size:14px}#tutorialSkip{position:fixed;top:10px;right:10px;background:transparent;border:0;color:white;font-weight:bold;font-size:16px;cursor:pointer;z-index:10001}#tutorialTooltip kbd{background:#eee;border:1px solid #ccc;border-radius:3px;padding:1px 4px;font-family:monospace}.ctrl-pair{cursor:url('./icons/north_west.svg') 12 12,auto}.ctrl-suited{cursor:url('./icons/arrow_back.svg') 12 12,auto}.ctrl-offsuit{cursor:url('./icons/arrow_upward.svg') 12 12,auto}#mobileBlocker{position:fixed;z-index:99999;top:0;left:0;width:100vw;height:100vh;background:#111;color:white;font-size:1.2rem;text-align:center;padding:40px 20px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.result-card{background:#f8f8f8;border-radius:8px;padding:16px;margin-bottom:12px;box-shadow:0 2px 6px rgba(0,0,0,0.05);width:100%;max-width:600px;text-align:left}.result-card h4{margin:0 0 8px;font-size:18px;color:#333}.score-line{display:flex;justify-content:space-between;font-size:16px}.score-line .score-correct{color:#27ae60}.score-line .score-wrong{color:#e74c3c}.score-line .precision{font-weight:bold;color:#2980b9}body.dark-mode{background-color:#121212;color:#e0e0e0}body.dark-mode .base{background-color:#1e1e1e !important;box-shadow:0 4px 12px rgba(0,0,0,0.6)}.dark-mode h1,.dark-mode h2,.dark-mode h3,.dark-mode h4,.dark-mode p,.dark-mode label,.dark-mode .tab-title,.dark-mode .modal-content,.dark-mode .result-card,.dark-mode input,.dark-mode .color-block,.dark-mode .case,.dark-mode .grid-buttons button,.dark-mode .tab-delete-btn,.dark-mode #quizStartButtons{color:#e0e0e0 !important;background-color:transparent !important}body.dark-mode input,body.dark-mode select,body.dark-mode textarea{background-color:#2c2c2c;color:#e0e0e0;border:1px solid #444}body.dark-mode button{background-color:#2980b9}body.dark-mode button.delete,body.dark-mode button.delete-btn{background-color:#c0392b}body.dark-mode .toast{background-color:#27ae60}body.dark-mode #fileDropZone{background-color:#1e1e1e;border-color:#3498db}body.dark-mode #fileDropZone:hover{background-color:#2a2a2a;border-color:#2980b9}body.dark-mode .result-card{background-color:#2a2a2a;box-shadow:0 2px 8px rgba(0,0,0,0.4)}body.dark-mode .modal-content{background-color:#2a2a2a;color:#e0e0e0}body.dark-mode .tab{background-color:#2f2f2f}body.dark-mode .active-tab{background-color:#3498db}body.dark-mode .color-block{border:1px solid #444}