@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

/* @import url("https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap"); */

.App {
  text-align: center;
  /* font-family: "Zen Dots", cursive; */
  font-family: "Roboto", sans-serif;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.MuiTableCell-root{
  font-size:1rem !important;
}

main{
  margin-bottom: 3%;
}

.Mui-required > .MuiInputLabel-asterisk{
  color:red;
}


.bg_img{
  background-image: url(/assets/logo-hacker-b8607bf2.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

main > div > .MuiPaper-root:not(.MuiAlert-root){
  margin: 0% !important;
  margin-top:1% !important;
  padding: 2% !important;
  background-color: var(--darkTheme-third) !important;
}


.MuiTableHead-root>tr{
  background-color: #222222 !important;
}



.row {
  border-bottom: solid 1px var(--darkTheme-primary) !important;
}

.cell {
  border-bottom: none !important;
}

.loading{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  position: fixed;
  height:100vh;
  width:100vw;
}

.MuiFormHelperText-root{
  /* #7E7E7E fell below 3:1 on our dark backgrounds. */
  color: #B3B3B3 !important;
}


.title {
  margin: 0;
  font-weight: 500;
  color: var(--darkTheme-secondary-text) !important;
  text-align: left;
  margin: 10px;
}

.MuiContainer-root{
  margin-top:3%;
}

._menu_qisu4_3 {
  background-color: var(--darkTheme-navbar);
  height: 5rem;
  max-height: 5rem;
  min-height: 5rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
  padding-left: 2rem;
  padding-right: 2rem;
  border-bottom: 1px solid black;
  position: relative;
}

a {
  color: var(--darkTheme-secondary-text);
  text-decoration: none;
}
._menu_qisu4_3 a img {
  height: 80%;
}

._nav__links_qisu4_26 {
  margin-right: auto;
  display: flex;
}

._nav__links_qisu4_26 > * {
  margin-left:1%;
  white-space: nowrap;
}

._nav__links_qisu4_26 *, ._right_qisu4_36 *{
  color:rgb(5, 226, 5);
}

._button_qisu4_40 {
  text-decoration: none;
  border-radius: 4px;
  padding: 6px 6px;
  font-family: "Zen Dots", cursive;
  font-size: 0.82rem;
}

@-webkit-keyframes _effect--pulse_qisu4_1 {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@keyframes _effect--pulse_qisu4_1 {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

._effectPulse_qisu4_70 {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

._effectPulse_qisu4_70:focus,
._effectPulse_qisu4_70:active,
._logo__link_qisu4_81:focus + ._nav__links_qisu4_26 > *:nth-child(1),
._effectPulse_qisu4_70:hover {
  -webkit-animation-name: _effect--pulse_qisu4_1;
  animation-name: _effect--pulse_qisu4_1;
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

._right_qisu4_36{
  display: flex;
  justify-content: center;
  text-align: center;
  z-index: 999;
}

/* .right * forces every descendant (including these icons' inner <path>) to
   the theme green via currentColor — beat it explicitly on the leaf nodes. */
._roleIconAdmin_qisu4_102,
._roleIconAdmin_qisu4_102 * {
  color: #ffd700 !important;
  fill: #ffd700 !important;
}

._roleIconTeacher_qisu4_108,
._roleIconTeacher_qisu4_108 * {
  color: #4fc3f7 !important;
  fill: #4fc3f7 !important;
}

._dropdown_qisu4_114 {
  background: none;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

._dropdown_qisu4_114:hover{
  cursor:pointer;
}

._dropdown_qisu4_114 *{
  color:rgb(5, 226, 5);

}

._dropdown_qisu4_114:active,
._dropdown_qisu4_114:focus {
  transform: rotate(180deg);
  transition: 1s;
}

._dropdown_qisu4_114:active ~ ._dropdownContent_qisu4_137,
._dropdown_qisu4_114:focus ~ ._dropdownContent_qisu4_137 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

._dropdownContent_qisu4_137 {
  display: none;
  position: absolute;
  top:5rem;
  background-color: var(--darkTheme-navbar);
  width: 12%;
  z-index: 1000;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

._dropdownContent_qisu4_137:hover {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

._dropdownContent_qisu4_137 a {
  padding: 10px 10px 10px 10px;
  text-align: center;
}

._dropdownContent_qisu4_137 a:hover,
._dropdownContent_qisu4_137 Link:hover {
  background-color: var(--darkTheme-secondary);
}

._dropdownItem_qisu4_172 {
  font-family: "Zen Dots", cursive;
}


._logo__link_qisu4_81 {
  display: flex;
  align-items: center;
  height:100%;
}


._beta_qisu4_184{
  padding-left:30px;
  width:200px;
  height:50px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(45deg);
  font-weight: bold;
}

._betacontainer_qisu4_196{
  position: absolute;
  right:0;
  overflow:hidden;
  height:100%;
}
/* ---------------------------------------------------------------------------
   "Administration" group of the navigation bar.

   Opens on HOVER and on keyboard FOCUS: `:focus-within` covers keyboard
   navigation (Tab on the label, then on the entries) with no JavaScript and no
   React state. The panel is anchored under the bar (height 5rem, cf. `.menu`)
   and its width follows its content — no frozen percentage, the labels are
   translated and change length from one language to another.
   --------------------------------------------------------------------------- */
._adminMenu_qisu4_211 {
  position: relative;
  display: inline-block;
}

._adminMenuLabel_qisu4_216 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  user-select: none;
}

._adminMenuContent_qisu4_224 {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 12rem;
  background-color: var(--darkTheme-navbar);
  border: 1px solid black;
  z-index: 1000;
  padding: 4px 0;
  flex-direction: column;
}

/* Hovering the label ALONE would not be enough: the pointer crosses a gap on its
   way down to the panel. `:hover` on the container (which wraps both) keeps the
   panel open during the trip. */
._adminMenu_qisu4_211:hover ._adminMenuContent_qisu4_224,
._adminMenu_qisu4_211:focus-within ._adminMenuContent_qisu4_224 {
  display: flex;
}

._adminMenuItem_qisu4_245 {
  font-family: "Zen Dots", cursive;
  font-size: 0.82rem;
  padding: 8px 14px;
  white-space: nowrap;
  text-decoration: none;
}

._adminMenuItem_qisu4_245:hover {
  background-color: var(--darkTheme-secondary);
}

/* Section label ("Config"): neither a link nor a click target. Deliberately more
   discreet than the entries, so that nobody tries to click on it. */
._adminMenuSection_qisu4_259 {
  font-family: "Zen Dots", cursive;
  font-size: 0.68rem;
  padding: 10px 14px 4px 14px;
  opacity: 0.55;
  text-transform: uppercase;
  white-space: nowrap;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 4px;
}

._adminMenuSubItem_qisu4_270 {
  padding-left: 28px;
}


._activate_account__card_fivkn_3 {
    display: flex;
    justify-content: center;
    height: 100%;
}

._activate_account__form_fivkn_9 {
    margin-top: 5%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 1%;
    height: 100%;
    background-color: var(--darkTheme-third);
    width: 20%;
    height: 100%;
    border-radius: 2px;
    box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)
}


._buttonActivate_account_fivkn_24 {
    background-color: rgb(0, 138, 41) !important;

    /* font-weight: 700 !important; */
}

._linkToRegisterLogin_fivkn_30 {
    background-color: var(--darkTheme-primary) !important;
    border-radius: 4px;
    margin-bottom: 2%;
}

._buttonToRegisterLogin_fivkn_36 {
    width: 100%;
}

._buttonToRegisterLogin_fivkn_36 span {
    font-weight: 700 !important;
    width: 100%;
    color: var(--darkTheme-primary-text) !important;
}

._activate_accountRequestSuccess_fivkn_46 {
    color: #05e205 !important;
}

._activate_accountRequestFailed_fivkn_50 {
    color: red !important;
}

._businessProfileList_15vyv_3 {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

._profiles__littleHeader_15vyv_9 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0px 20px 0px 20px;
  color: var(--darkTheme-secondary-text);
}


._dialog__content_15vyv_18 label {
  margin-top: 5px;
}

._dialog__content_15vyv_18 input {
  margin-top: 5px;
}

._content_15vyv_26{
  margin-top:5%;
}

._header_15vyv_30{
  display: flex;
  margin-bottom: 1%;
}

._header_15vyv_30 > *:last-child:not(:first-child){
  height: 100%;
}


/* ---------------- Business Profile Item -----------------*/
._card_15vyv_41 {
  width: 300px;
  margin: 20px;
  text-align: left;
  background-color: #1c1c1c !important;
  color: var(--darkTheme-primary-text) !important;
  border: solid 1px var(--darkTheme-border-secondary) !important;
  border-bottom: none !important;
  height: 100%;
}

._card__title_15vyv_52 {
  font-size: x-large;
  width: 100%;
  margin-bottom: 10px;
}

._card__content_15vyv_58 {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  width: 100%;
}

._card__actions_15vyv_65 {
  height: 44px;
}

._card__expanded_15vyv_69 {
  transform: rotate(180deg);
  margin-left: auto !important;
}

._card__expand_15vyv_69 {
  margin-left: auto !important;
}

._card__collapse_15vyv_78 {
  /* Ne s'affiche pas exactement comme il faut */
  background-color: #1c1c1c !important;
  z-index: 1;
}

._card__item_15vyv_84 {
  display: grid;
  grid-template: 100% / 25% 75%;
  margin-bottom: 4px;
}
._dialogContentFlexContainer_wv4zz_1 {
  display: flex;
  direction: column;
  justify-content: space-around;
  flex-wrap: wrap;
}

._dialogContentFlexItem_wv4zz_8 {
  margin-top: 3% !important;
}._header_13wss_1{
  display:flex;
  margin-bottom: 2%;
}
._header_13wss_1 > div {
  width:50%;
}

._header_13wss_1 > *:first-child{
  display: flex;
}

._header_13wss_1 > *:first-child > *{
  width: 100%;
  margin-right: 4%;
}

._header_13wss_1 > *:last-child:not(:first-child){
  margin-left: auto;
}._header_1aozi_1{
  display:flex;
  margin-bottom: 2%;
}
._header_1aozi_1 > *:not(:last-child) {
  width:50%;
}

._header_1aozi_1 > *:first-child{
  display: flex;
}

._header_1aozi_1 > *:first-child > *{
  width: 100%;
  margin-right: 4%;
}

._header_1aozi_1 > *:last-child{
  margin-left: auto;
}

/* Unified, icon-only actions row: keeps register / edit / delete on one line */
._actions_1aozi_23 {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}._displayClickableIcon_hf3di_1 {
    cursor: pointer;
}

._text1line_hf3di_5 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines to show */
            line-clamp: 1; 
    -webkit-box-orient: vertical;
}

._exerciseStudentTable_hf3di_14 > * {
    background-color: #666 !important
}
._header_1cm0m_1{
  display:flex;
  gap: 16px;
}
._header_1cm0m_1 > * {
  width:50%;
}

._header_1cm0m_1 > *:first-child{
  margin-top: 1%;
  display: flex;
}

._header_1cm0m_1 > *:first-child > *{
  width: 100%;
  margin-right: 4%;
}

._header_1cm0m_1 > *:first-child > *:last-child{
  margin-right: 0%;
}

._header_1cm0m_1 > *:last-child{
  justify-content: right;
}


._title_1cm0m_28{
  display:flex;
  align-items: center;
}

._title_1cm0m_28 > *:first-child{
  width:50%
}

._id_1cm0m_37{
  margin-left:auto;
  justify-content:center;
  display:flex;
  align-items:center;
}

._id_1cm0m_37 > *:last-child{
  margin-left: 4px;
  display: flex;
}

/* Icon-only actions row, right-aligned to match the other lists */
._actions_1cm0m_50 {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

/* Make the data table scroll horizontally instead of overflowing the page */
._tableWrapper_1cm0m_59{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Responsive: stack filters and free up the title on small screens ---- */
@media (max-width: 600px){
  ._header_1cm0m_1{
    flex-direction: column;
    gap: 8px;
  }
  ._header_1cm0m_1 > *{
    width: 100%;
  }
  ._header_1cm0m_1 > *:first-child{
    flex-direction: column;
    gap: 8px;
  }
  ._header_1cm0m_1 > *:first-child > *{
    width: 100%;
    margin-right: 0;
  }
  ._header_1cm0m_1 > *:last-child{
    justify-content: flex-start;
  }

  ._title_1cm0m_28{
    flex-direction: column;
    align-items: flex-start;
  }
  ._title_1cm0m_28 > *:first-child{
    width: 100%;
  }

  /* Drop secondary columns on phones to cut horizontal scrolling.
     Columns: 1 Nom · 2 Date début · 3 Date fin · 4 Description · 5 Métier visé · 6 Actions */
  ._tableWrapper_1cm0m_59 table th:nth-child(3),
  ._tableWrapper_1cm0m_59 table td:nth-child(3),
  ._tableWrapper_1cm0m_59 table th:nth-child(5),
  ._tableWrapper_1cm0m_59 table td:nth-child(5){
    display: none;
  }
}
._change_password__card_y55eu_1 {
  display: flex;
  justify-content: center;
  height: 100%;
}
  
._change_password__form_y55eu_7 {
  margin-top: 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 1%;
  height: 100%;
  background-color: var(--darkTheme-third);
  width: 20%;
  height: 100%;
  border-radius: 2px;
  box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)
}
  
  
._buttonChangePassword_y55eu_22 {
  background-color: rgb(0, 138, 41) !important;

  /* font-weight: 700 !important; */
}

._linkToRegisterLogin_y55eu_28 {
    background-color: var(--darkTheme-primary) !important;
    color: var(--darkTheme-secondary-text) !important;
    border-radius: 4px;
    width: 100%;
}

._buttonToRegisterLogin_y55eu_35 {
    width: 100%;
}

._buttonToRegisterLogin_y55eu_35 span {
    font-weight: 700 !important;
    width: 100%;
    color: var(--darkTheme-primary-text) !important;
}

._changePasswordRequestSuccess_y55eu_45 {
    color: #05e205 !important;
}

._changePasswordRequestFailed_y55eu_49 {
    color: red !important;
}
code{
  color:pink;
}

._detailsPaper_zts4u_5 div, ._detailsPaper_zts4u_5 p, ._detailsPaper_zts4u_5 ._MuiTypography-root_zts4u_5, ._detailsPaper_zts4u_5 h2, ._detailsPaper_zts4u_5 ol, ._detailsPaper_zts4u_5 input{
  color:white;
}

._detailsPaper_zts4u_5{
  text-align: left;
}/* AI assistance panel of the exercise form.
   Palette aligned with src/theme.ts: background #303030, surfaces #252525, brand green #05E205.
   The panel must read as a PROPOSAL laid on top of the form, not as one more field: hence the
   green edge, the discreet gradient and the separate action bar. */

._panel_19630_6 {
  position: relative;
  padding: 20px 24px 20px 28px;
  margin-bottom: 28px;
  text-align: left;
  border-left: 3px solid #05E205;
  background-image: linear-gradient(100deg, rgba(5, 226, 5, 0.07), rgba(5, 226, 5, 0) 45%);
}

._header_19630_15 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

._icon_19630_22 {
  color: #05E205;
  /* Optically centred on the title's capital, not on its box. */
  margin-top: -2px;
}

._title_19630_28 {
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

._desc_19630_33 {
  color: #B3B3B3;
  margin-bottom: 18px !important;
  max-width: 82ch;
}

._field_19630_39 {
  margin-bottom: 18px !important;
}

/* Action bar: the language on the left, the button on the right. `wrap-reverse` keeps the button
   on top when the line breaks in narrow view — it is the action, it must not end up buried under
   the radio buttons. */
._actions_19630_46 {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

._langGroup_19630_56 {
  margin: 0 !important;
}

._langLabel_19630_60 {
  font-size: 0.8rem !important;
  color: #B3B3B3 !important;
  margin-bottom: 2px;
}

._submit_19630_66 {
  text-transform: none !important;
  font-weight: 600 !important;
  padding: 8px 20px !important;
  white-space: nowrap;
}

/* Waiting: a generation lasts MINUTES. The line has to say what is going on and remind the reader
   not to leave the page, otherwise the teacher believes it has crashed. */
._busy_19630_75 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 6px;
  background: rgba(5, 226, 5, 0.06);
}

._busyText_19630_84 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._busyStatus_19630_91 {
  font-weight: 600 !important;
  overflow-wrap: anywhere;
}

._busyHint_19630_96 {
  color: #B3B3B3 !important;
}

._error_19630_100 {
  margin-bottom: 16px !important;
  padding: 10px 14px;
  border-radius: 6px;
  border-left: 3px solid #ff1744;
  background: rgba(255, 23, 68, 0.08);
  overflow-wrap: anywhere;
}

._explanation_19630_109 {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 6px;
  border-left: 3px solid #05E205;
  background: rgba(5, 226, 5, 0.06);
}

._explanationTitle_19630_117 {
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}

._explanationBody_19630_122 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --- Repli du panneau ------------------------------------------------------------------ */

/* Le chevron est poussé à droite de la barre de titre : c'est la seule commande de la ligne,
   elle doit se trouver là où on la cherche, pas collée au titre. */
._collapseButton_19630_131 {
  margin-left: auto !important;
  color: #B3B3B3 !important;
}

/* --- Sujet de génération : éditeur / source Markdown ----------------------------------- */

._sectionHead_19630_138 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

._sectionTitle_19630_147 {
  font-weight: 700 !important;
  color: #E0E0E0 !important;
}

/* Deux onglets seulement : la barre par défaut de MUI (48 px de haut, majuscules) écraserait la
   ligne de titre. */
._tabs_19630_154 {
  min-height: 32px !important;
}

._tabs_19630_154 .MuiTab-root {
  min-height: 32px !important;
  min-width: 0 !important;
  padding: 4px 14px !important;
  text-transform: none !important;
  font-size: 0.8125rem !important;
}

/* La zone d'écriture est REDIMENSIONNABLE : ces consignes vont de trois lignes à deux pages, et
   c'est l'enseignant qui sait laquelle il écrit. `overflow` non visible est la condition pour que
   `resize` s'applique. La hauteur choisie est relue au prochain chargement (cf. HEIGHT_KEY). */
._editorBox_19630_169 {
  display: flex;
  height: 220px;
  min-height: 120px;
  resize: vertical;
  overflow: auto;
  border-radius: 4px;
}

._editorBox_19630_169 > * {
  flex: 1 1 auto;
  min-width: 0;
}

/* TinyMCE pose sa propre boîte, dimensionnée à l'init : sans hauteur explicite elle ignore le
   redimensionnement de la zone. Le `<textarea>` d'origine, que l'éditeur remplace, est masqué dès
   son initialisation — on le sort du flux tout de suite pour qu'il ne pousse pas l'éditeur d'une
   ligne pendant le montage. */
._editorBox_19630_169 .tox-tinymce {
  height: 100% !important;
  border-color: rgba(255, 255, 255, 0.23);
  border-radius: 4px;
}

._editorBox_19630_169 > textarea {
  display: none;
}

/* Le champ occupe toute la boîte : sans cela il garde ses 8 lignes et le redimensionnement ne
   déplace que du vide. */
._promptField_19630_199 .MuiOutlinedInput-root {
  height: 100%;
  align-items: stretch;
}

._promptField_19630_199 .MuiOutlinedInput-multiline {
  padding: 12px 14px;
}

._promptField_19630_199 textarea {
  height: 100% !important;
  overflow: auto !important;
  resize: none;
}

._promptHint_19630_214 {
  display: block;
  margin: 6px 0 18px;
  color: #B3B3B3 !important;
}

/* --- Instruction d'affinage ------------------------------------------------------------ */

._refineSection_19630_222 {
  margin-top: 4px;
}

/* --- Élément à générer ----------------------------------------------------------------- */

/* La cible se choisit AU-DESSUS du bouton, pas dans la ligne d'action : sur un exercice
   existant, deux gestes cohabitent (générer un élément, améliorer l'ensemble) et il faut voir
   d'un coup d'œil sur quoi porte le premier. */
._targetSection_19630_231 {
  margin-top: 18px;
}

._targetGroup_19630_235 {
  margin-top: 4px !important;
}

._targetGroup_19630_235 .MuiFormControlLabel-label {
  font-size: 0.9rem;
}

._targetActions_19630_243 {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

/* Même dessin que l'explication, en orangé : ce qui s'affiche là est ce qui N'A PAS été fait
   (une passe qui a échoué, un nom déjà pris) — la couleur doit le dire avant la lecture. */
._warnings_19630_251 {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 6px;
  border-left: 3px solid #FFA726;
  background: rgba(255, 167, 38, 0.08);
}

._warningsList_19630_259 {
  margin: 6px 0 0 0;
  padding-left: 18px;
}

._warningsList_19630_259 li {
  overflow-wrap: anywhere;
}

/* Le panneau rendu dans un accordéon du formulaire : pas de cadre à lui, l'accordéon en a un. */
._embedded_19630_269 {
  padding-bottom: 8px;
}
/* XML import panel, sitting beside the AI panel of the exercise form.
   Same family of surfaces (cf. ExerciseAiPanel.module.css) but a NEUTRAL edge: the green one
   means "the model wrote this". Here the teacher brings their own file — no AI involved. */

._panel_1h83k_5 {
  position: relative;
  height: 100%;
  padding: 20px 22px;
  text-align: left;
  border-left: 3px solid #B3B3B3;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 45%);
}

._header_1h83k_14 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

._icon_1h83k_21 {
  color: #B3B3B3;
  margin-top: -2px;
}

._title_1h83k_26 {
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

._desc_1h83k_31 {
  color: #B3B3B3;
  margin-bottom: 14px !important;
}

/* The native control is kept: it is the same gesture as the three file fields of the form just
   below, and a teacher recognises it. */
._fileInput_1h83k_38 {
  display: block;
  max-width: 100%;
  margin-bottom: 14px;
  color: #E0E0E0;
}

._actions_1h83k_45 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

._button_1h83k_52 {
  text-transform: none !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

._error_1h83k_58 {
  margin-top: 14px !important;
  padding: 10px 14px;
  border-radius: 6px;
  border-left: 3px solid #ff1744;
  background: rgba(255, 23, 68, 0.08);
  overflow-wrap: anywhere;
}

/* What has been loaded has to be SAID: an <input type="file"> cannot display a file it was not
   given by a human click, so the archive and the two scripts are invisible without this. */
._summary_1h83k_69 {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 6px;
  border-left: 3px solid #05E205;
  background: rgba(5, 226, 5, 0.06);
}

._summaryTitle_1h83k_77 {
  font-weight: 600 !important;
  overflow-wrap: anywhere;
}

._summaryHint_1h83k_82 {
  display: block;
  margin-top: 4px;
  color: #B3B3B3 !important;
}

._warnings_1h83k_88 {
  margin: 12px 0 0;
  padding-left: 20px;
  color: #FFB300;
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

._warnings_1h83k_88 li {
  margin-bottom: 4px;
}
/* Deux colonnes : l'arborescence à gauche, le fichier à droite. En dessous de ~800 px la ligne se
   casse et l'éditeur passe sous la liste plutôt que de l'étrangler. */
._layout_igiuj_3 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

._tree_igiuj_10 {
  flex: 1 1 280px;
  min-width: 0;
  max-height: 500px;
  overflow: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  padding-right: 8px;
}

._editor_igiuj_19 {
  flex: 2 1 460px;
  min-width: 0;
}

/* Le champ de saisie prend la place, les deux boutons se serrent à droite. */
._addRow_igiuj_25 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
/* Mise en page du formulaire d'exercice.
   Le formulaire n'était pas une mise en page mais une suite de champs laissés au fil du texte,
   chacun forcé à 40 % de large : les libellés ne s'alignaient sur rien, le sélecteur de
   compétences flottait au milieu, et un champ `fullWidth` (le contexte additionnel de l'IA) se
   retrouvait ramené à 40 % puis rejeté SOUS le bouton d'enregistrement. D'où des grilles
   explicites : les champs courts en deux colonnes, les fichiers en lignes libellé/champ/action,
   et une barre d'actions qui termine la page. */

._toxTinymce_1k5di_9{
  margin-top:2%;
  margin-bottom: 2%;
}

/* --- Champs courts : nom, auteur, état, langue, compétences ---------------------------- */

._fieldGrid_1k5di_16 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 32px;
  /* Les hauteurs diffèrent (un Select porte son libellé flottant plus haut qu'un TextField) :
     c'est la LIGNE DE BASE des champs qui doit s'aligner, pas le haut des boîtes. */
  align-items: end;
  margin-bottom: 28px;
  text-align: left;
}

._fieldGrid_1k5di_16 > * {
  width: 100%;
  margin: 0 !important;
}

/* Une seule colonne dès que deux champs côte à côte deviendraient illisibles. */
@media (max-width: 720px) {
  ._fieldGrid_1k5di_16 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Les compétences s'affichent en pastilles : elles ont besoin de toute la largeur, sinon la
   liste part sur quatre lignes à côté d'une colonne vide. */
._skillsSelector_1k5di_41{
  grid-column: 1 / -1;
  width: 100%;
}

._chips_1k5di_46{
  display: flex;
  flex-wrap: wrap;
}
._chip_1k5di_46{
  margin: 2px !important;
}

/* --- Fichiers et éditeurs de scripts ---------------------------------------------------- */

._fileInputs_1k5di_56{
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* Libellé | sélecteur de fichier | téléchargement : trois colonnes, donc trois lignes qui
   s'alignent verticalement au lieu de flotter chacune à sa largeur. La dernière colonne absorbe
   la place restante APRÈS le bouton de téléchargement : celui-ci reste au contact du champ qu'il
   concerne au lieu d'être expédié à l'autre bout de la ligne. */
._fileInputs_1k5di_56 > div{
  display: grid;
  grid-template-columns: minmax(150px, 240px) max-content minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  column-gap: 16px;
  width: 100%;
  margin-bottom: 10px;
}

/* L'éditeur de script, lui, prend toute la largeur : c'est du code, pas un champ. */
._fileInputs_1k5di_56 > div._scriptEditor_1k5di_78{
  display: block;
  width: 100%;
  margin: 0 0 20px;
}

/* --- Section « bouton Indice » ---------------------------------------------------------- */

._aiHintSection_1k5di_86 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}

._aiHintTitle_1k5di_97{
  flex: 1 1 100%;
  margin: 0 !important;
}

._aiHintPreprompt_1k5di_102 {
  flex: 1 1 100%;
}

/* Le libellé « Réarmement du bouton (minutes) » est plus long que son champ : sans largeur
   minimale il repassait à la ligne PAR-DESSUS la valeur saisie. */
._aiHintInterval_1k5di_108 {
  /* !important : MUI pose `min-width: 0` sur .MuiFormControl-root, injecté après ce module. */
  min-width: 260px !important;
}

/* --- Barre d'actions -------------------------------------------------------------------- */

._formActions_1k5di_115 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- Conteneurs ------------------------------------------------------------------------- */

/* `.App { text-align: center }` (hérité de CRA) centrait TOUT le formulaire : cases à cocher,
   libellés de fichiers et boutons. Un formulaire se lit sur son bord gauche. */
._formContainer_1k5di_129 {
  text-align: left;
}

/* Les deux portes d'entrée de l'exercice — l'IA et l'import XML — sont côte à côte, l'IA gardant
   la largeur (sa zone d'écriture se redimensionne, l'import tient en trois boutons). En dessous
   de ~900 px de large la ligne se casse et l'import passe sous l'IA plutôt que de l'étrangler. */
._assistPanels_1k5di_136 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
}

._aiPanel_1k5di_144 {
  flex: 3 1 520px;
  min-width: 0;
}

._xmlPanel_1k5di_149 {
  flex: 1 1 300px;
  min-width: 0;
}

/* --- Les trois volets de la page ---------------------------------------------------------- */

/* Un accordéon MUI porte son propre fond et sa propre ombre : les panneaux qu'il contient sont
   rendus « intégrés », sans cadre, pour ne pas empiler deux boîtes et deux chevrons. */
._section_1k5di_158 {
  margin-bottom: 12px;
}

._sectionBody_1k5di_162 {
  display: block;
  padding-top: 0 !important;
}
._exercise__littleHeader_198fi_1 {
  margin: 0px 20px 0px 20px;
}

._exercise__add_button_198fi_5 {
  margin-left: auto !important;
}

._title_198fi_9 {
  margin: 0;
  font-weight: 500;
  color: var(--darkTheme-secondary-text) !important;
  text-align: left;
  margin: 10px;
}

._table__container_198fi_17  >  .MuiTableContainer-root > .MuiTable-root > .MuiTableBody-root > tr.MuiTableRow-root:nth-child(even){
  background-color: #202020 !important;
}

._table__container_198fi_17  >  .MuiTableContainer-root > .MuiTable-root > .MuiTableBody-root > tr.row.MuiTableRow-root:nth-child(4n-1){
  background-color: #222222 !important;
}

._header_198fi_25{
  display:flex;
  margin-bottom: 2%;
}
._header_198fi_25 > *:not(:last-child) {
  width:50%;
}

._header_198fi_25 > *:first-child{
  display: flex;
}

._header_198fi_25 > *:first-child > *:last-child{
  width: 100%;
  margin-left: 4%;
}

._header_198fi_25 > *:last-child{
  margin-left: auto;
}
/* Le tableau des exercices tient dans la largeur de la page : les colonnes ont
   une largeur figée (voir le <colgroup> de ExerciseList), seule la colonne
   « Nom » absorbe la place restante. Ce qui dépasse est tronqué par
   <EllipsisText>, qui rend le texte complet au survol. */
._exerciseTable_198fi_49 {
  table-layout: fixed;
  width: 100%;
}

/* Densité : le rembourrage MUI par défaut (16px) coûtait à lui seul ~300px de
   large sur les 10 colonnes. */
._exerciseTable_198fi_49 .MuiTableCell-root {
  padding: 8px;
}

/* Les en-têtes restent lisibles sur deux lignes plutôt que d'être coupés. */
._exerciseTable_198fi_49 .MuiTableHead-root .MuiTableCell-root {
  line-height: 1.2;
}

._header_2ofim_1{
  display:flex;
  margin-bottom: 2%;
}
._header_2ofim_1 > div {
  width:50%;
}


._header_2ofim_1 > *:first-child{
  display: flex;
}

._header_2ofim_1 > *:first-child > *{
  width: 100%;
  margin-right: 4%;
}

._header_2ofim_1 > *:last-child:not(:first-child){
  margin-left: auto;
}/* Texte de cellule limité à la largeur de sa colonne. Le conteneur doit être
   `display: block` pour que `text-overflow` s'applique. */
._ellipsis_1mg5y_3 {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
._displayClickableIcon_135eb_1 {
    cursor: pointer;
}

/* Colonne « Exercice lié » : le bouton ne doit pas élargir sa colonne, son
   libellé est tronqué par <EllipsisText>. */
._linkedExercise_135eb_7 {
    width: 100%;
    min-width: 0 !important;
    padding: 2px 8px !important;
}

._linkedExercise_135eb_7 .MuiButton-label {
    display: block;
    overflow: hidden;
}

/* Colonne « Actions » : 7 icônes resserrées sur une seule ligne. */
._actions_135eb_19 {
    display: flex;
    /* UNE SEULE LIGNE. Passer à la ligne rend les rangées deux fois plus hautes et casse la
       lecture du tableau : c'est l'icône qui rétrécit, pas la colonne qui grandit. */
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
}

._actions_135eb_19 .MuiIconButton-sizeSmall {
    padding: 2px;
}

/* 20 px au lieu des 24 px par défaut : sept icônes occupent alors la largeur que six occupaient
   avant l'export XML, donc la colonne ne bouge pas d'un pixel. */
._actions_135eb_19 .MuiSvgIcon-root {
    font-size: 20px;
}

._feedbacks_135eb_38{
    display:flex;
    align-items: center;
}

._feedbacks_135eb_38 fieldset{
    /* Le <fieldset> de MUI traîne les marges/bordures par défaut du navigateur :
       dans une colonne à largeur figée, elles débordaient sur « Auteur ». */
    margin: 0;
    padding: 0;
    border: 0;
    transform: scale(0.75);
    transform-origin: left center;
}#log, #runtime_infos, #serial, #filesystem_panel, #debug_panel {
    font-family: DejaVu Sans Mono, monospace;
    font-size: 13px;
    border: 1px solid #333;
    background-color: #000;
    padding: 4px;
    color: #fff;
}
#runtime_infos, #filesystem_panel {
    float: left;
    width: 250px;
    margin-bottom: 7px;
    margin-right: 7px;
    padding-bottom: 7px;
}
#log {
    height: 100px;
    width: 550px;
}
#debug_panel {
    white-space: pre;
    float: left;
}
#serial {
    margin: 0;
}
#serial:focus {
    outline: 1px solid rgb(229, 151, 0);
}
#screen {
    white-space: pre;
    position: relative;
    font-family: Liberation Mono, DejaVu Sans Mono, Courier New, monospace;
    font-weight: bold;
    font-size: 15px;
    line-height: normal;
}
#screen, #vga {
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    transform-origin: top left;
}
#vga {
    background-color: #000;
    width: 1024px !important;
    height: 768px !important;
}
body {
    background-color: #111;
    color: #fff;
    line-height: 1.5;
    font-family: sans-serif;
}
a {
    color: wheat;
    text-decoration: none;
}
.phone_keyboard {
    width: 0;
    height: 0;
    resize: none;
    position: absolute;
    opacity: 0;
    left: -9999em;
    top: 0;
    z-index: -10;
    white-space: nowrap;
    overflow: hidden;
}
h4 {
    margin: 0 0 9px 0;
}
#start_emulation {
    padding: 6px 18px;
    font-size: 16px;
    font-weight: bold;
}
#setup_error {
    color: red;
    font-weight: bold;
    background-color: #222;
    padding: 8px 18px;
}
#config_link {
    font-weight: bold;
    background-color: #222;
    padding: 8px 18px;
}
#screen_container {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    outline: 1px solid #555;
}
#boot_options a {
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
}
#boot_options td {
    padding: 1px 7px;
}
#oses small {
    font-size: 80%;
    color: #ccc;
    padding-left: 5px;
}
#oses tr {
    cursor: pointer;
}
#oses {
    border-spacing: 0;
}
#oses tr:hover {
    background-color: #311;
}
#oses td:nth-child(1) {
    white-space: pre;
    vertical-align: top;
}
#terminal {
    max-width: 1024px;
}

/* the code below was copied from xterm.css */

.xterm {
    font-feature-settings: "liga" 0;
    position: relative;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.xterm.focus,
.xterm:focus {
    outline: none;
}

.xterm .xterm-helpers {
    position: absolute;
    top: 0;
    /**
     * The z-index of the helpers must be higher than the canvases in order for
     * IMEs to appear on top.
     */
    z-index: 5;
}

.xterm .xterm-helper-textarea {
    padding: 0;
    border: 0;
    margin: 0;
    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
    position: absolute;
    opacity: 0;
    left: -9999em;
    top: 0;
    width: 0;
    height: 0;
    z-index: -5;
    /** Prevent wrapping so the IME appears against the textarea at the correct position */
    white-space: nowrap;
    overflow: hidden;
    resize: none;
}

.xterm .composition-view {
    /* TODO: Composition position got messed up somewhere */
    background: #000;
    color: #FFF;
    display: none;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
}

.xterm .composition-view.active {
    display: block;
}

.xterm .xterm-viewport {
    /* On OS X this is required in order for the scroll bar to appear fully opaque */
    background-color: #000;
    overflow-y: scroll;
    cursor: default;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

.xterm .xterm-screen {
    position: relative;
}

.xterm .xterm-screen canvas {
    position: absolute;
    left: 0;
    top: 0;
}

.xterm .xterm-scroll-area {
    visibility: hidden;
}

.xterm-char-measure-element {
    display: inline-block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -9999em;
    line-height: normal;
}

.xterm {
    cursor: text;
}

.xterm.enable-mouse-events {
    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
    cursor: default;
}

.xterm.xterm-cursor-pointer {
    cursor: pointer;
}

.xterm.column-select.focus {
    /* Column selection mode */
    cursor: crosshair;
}

.xterm .xterm-accessibility,
.xterm .xterm-message {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    color: transparent;
}

.xterm .live-region {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.xterm-dim {
    opacity: 0.5;
}

.xterm-underline {
    text-decoration: underline;
}
._feedbacks_ti4vg_1{
  display:flex;
}

._feedbacks_ti4vg_1 fieldset{
  transform: scale(0.75);
}

._leaderboard_ti4vg_9 {
  margin: auto 2em !important;
}
._leaderboard_ti4vg_9 > * {
  color: var(--darkTheme-third-text) !important;
}
._skillName_ti4vg_15 {
  color: rgb(5, 226, 5) !important;
  font-weight: bold !important;
  display: block !important;
  margin-bottom: 4px !important;
}
._TableBody_ti4vg_21 tr,
._TableBody_ti4vg_21 td{
  border: none !important;
}._help_paper_199ln_1{
  color:white !important;
  text-align: left;
}._login__card_dfwry_1 {
  display: flex;
  justify-content: center;
  height: 100%;
}

._center_dfwry_7{
  display: flex !important;
  justify-content: center;
}

._login__form_dfwry_12 {
  margin-top: 5%;
  display: flex;
  flex-direction: column;
  padding: 1%;
  height: 100%;
  background-color: var(--darkTheme-third);
  width: 33%;
  height: 100%;
  border-radius: 2px;
  box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)
}

._login__form_dfwry_12 > *{
  margin-bottom:3% !important;
}

._MuiSvgIcon-root_dfwry_29{
  color:white;
}


._label_dfwry_34,
._input_dfwry_35 Label {
  color: var(--darkTheme-secondary-text) !important;
}

._input_dfwry_35 input {
  color: var(--darkTheme-primary-text) !important;
}

._button_login_dfwry_43 {
  margin-top:4% !important;
  background-color: rgb(0, 138, 41) !important;
}

._button_login_dfwry_43 > * {
  color: white;
}

._link_to_register_dfwry_52 {
  background-color: var(--darkTheme-primary) !important;
} 

._button_to_register_dfwry_56 {
  width: 100%;
}

._button_to_register_dfwry_56 span {
  font-weight: 700 !important;
  width: 100%;
  color: var(--darkTheme-primary-text) !important;
}
._register__card_3rn9s_1 {
  display: flex;
  justify-content: center;
  height: 100%;
}


._register__form_3rn9s_8 {
  margin-top: 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 1%;
  height: 100%;
  background-color: var(--darkTheme-third);
  width:30%;
  border-radius: 2px;
  box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)
}

._register__form_3rn9s_8 > div{
  margin-bottom: 1%;
}


._label_3rn9s_26,
._input_3rn9s_27 Label {
  color: var(--darkTheme-secondary-text) !important;
}

._labelError_3rn9s_31 {
  color: red !important;
}

._buttonRegister_3rn9s_35 {
  margin-top: 3% !important;
  background-color: rgb(0, 138, 41) !important;
  color: var(--darkTheme-third-text);
  font-weight: 700 !important;
  margin-bottom: 2% !important;
}

._linkToLogin_3rn9s_43 {
  background-color: var(--darkTheme-primary) !important;
}

._buttonToLogin_3rn9s_47 {
  width: 100%;
  border-radius: 4px;
}

._buttonToLogin_3rn9s_47 span {
  font-weight: 700 !important;
  width: 100%;
}

span._bold_3rn9s_57{
  font-weight: bold;
}
._reset_password__card_1y5aw_2 {
    display: flex;
    justify-content: center;
    height: 100%;
}

._reset_password__form_1y5aw_8 {
    margin-top: 5%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 1%;
    height: 100%;
    background-color: var(--darkTheme-third);
    width: 20%;
    height: 100%;
    border-radius: 2px;
    box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)
}

._buttonReset_password_1y5aw_22 {
    margin-top: 4% !important;
    background-color: rgb(0, 138, 41) !important;
    margin-bottom: 2% !important;
}

._buttonReset_password_1y5aw_22 > * {
    color: white;
}

._linkToRegister_1y5aw_32 {
    background-color: var(--darkTheme-primary) !important;
    border-radius: 4px;
}

._linkToLogin_1y5aw_37{
    margin-bottom: 2%;
}


._buttonToRegisterLogin_1y5aw_43 {
    width: 100%;
}

._buttonToRegisterLogin_1y5aw_43 span {
    font-weight: 700 !important;
    width: 100%;
    color: var(--darkTheme-primary-text) !important;
}

._passwordResetRequestSuccess_1y5aw_53 {
    color: #05e205 !important;
}

._passwordResetRequestFailed_1y5aw_57 {
    color: red !important;
}._header_rjdpp_1{
  display: flex;
  justify-content: space-between;
}

._mainGrid_rjdpp_6{
  padding: 16px;
  display: flex;
}

._mainGrid_rjdpp_6 > div:last-child{
  margin-left:2%
}

._sequenceExerciseListCard_rjdpp_15 {
  background-color: var(--darkTheme-third) !important;
}

._sequenceDetailsPrimaryButton_rjdpp_19:disabled {
  color: grey !important;
}

._sequenceDetailsTableRow_rjdpp_23 th,
._sequenceDetailsTableRow_rjdpp_23 td {
  color: var(--darkTheme-primary-text) !important;
}

._InputMinRating_rjdpp_28 {
  color: var(--darkTheme-primary-text) !important;
  border-color: var(--darkTheme-secondary) !important;
}

._profileListDisplay_rjdpp_33 {
  text-align: left;
}

._main__container_rjdpp_37 {
  display: grid;
  grid-template: 250px auto / 50% 50%;
}
._container__available_rjdpp_41 {
  grid-area: 1 / 1 / 2 / 1;
  margin: 5px;
}

._container__profile_rjdpp_46 {
  grid-area: 1 / 2;
  margin: 5px;
  background-color: var(--darkTheme-third) !important;
}

._container__chosen_rjdpp_52 {
  grid-area: 2 / 2;
  margin: 5px;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
._header_1xaqq_1{
  display:flex;
  margin-bottom: 2%;
}
._header_1xaqq_1 > *:not(:last-child) {
  width:50%;
}

._header_1xaqq_1 > *:first-child{
  display: flex;
}

._header_1xaqq_1 > *:first-child > *{
  width: 100%;
  margin-right: 4%;
}

._header_1xaqq_1 > *:last-child{
  margin-left: auto;
}._stmtPaper_1rhib_1 div, ._stmtPaper_1rhib_1 p, ._stmtPaper_1rhib_1 ._MuiTypography-root_1rhib_1, ._stmtPaper_1rhib_1 h2, ._stmtPaper_1rhib_1 ol, ._stmtPaper_1rhib_1 input{
  color:white;
}

._stmtPaper_1rhib_1{
  text-align: left;
}

/* "Exercise statement" title + PDF export button on the same line: the title stays centred like
   the other sections, the button folds underneath on a narrow screen. */
._stmtHeader_1rhib_11{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* Otherwise the button inherits the MUI grey, unreadable on the page's dark background. */
._stmtPdfButton_1rhib_20{
  color: white !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

._error_1rhib_25{
  font-weight: bold;
  font-size:larger;
  color:red !important;
}

._dateHeader_1rhib_31{
  width: 100%;
  text-align: right;
  color:rgb(5, 226, 5);
}

._restartBadge_1rhib_37{
  color: rgb(240, 176, 62);
  font-size: 0.85em;
}

._scoreImprovedBadge_1rhib_42{
  margin-left: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────
   "Side by side" view (subject on the left / terminal on the right).

   A hard constraint: the terminal must NEVER be unmounted/remounted when
   switching views, otherwise the v86 VM would reboot and the student would lose
   their work. The React tree is therefore STRICTLY the same in both views:
   only the placement classes change, the layout being done in CSS Grid by
   explicit placement (the DOM order stays the "classic" order).

   Placement:
     col 1: archive (r1), statement (r2-r4, internal scrolling)
     col 2: terminal (r1-r2), production/submission (r3)
     full width: result of the marking (r5)

   Row r4 is a "buffer" row: the statement runs through it, so that a statement
   taller than the terminal spills its surplus there instead of pushing the
   submission block down (align-self: start keeps it stuck to the terminal).
   ───────────────────────────────────────────────────────────────────────── */
._splitGrid_1rhib_64{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-rows: auto auto auto auto auto;
  gap: 8px 24px;
  align-items: stretch;
}

._splitGrid_1rhib_64 ._secArchive_1rhib_72{
  grid-column: 1;
  grid-row: 1;
}

._splitGrid_1rhib_64 ._secStatement_1rhib_77{
  grid-column: 1;
  grid-row: 2 / span 3;
  /* min-height:0 is mandatory: without it a grid child refuses to shrink below
     its content height and overflow:auto does not scroll. */
  min-height: 0;
  max-height: 68vh;
  overflow: auto;
  padding-right: 12px;
  /* Makes the background opaque (inherited from the Paper) so that the sticky
     header below does not let the statement's text scroll through it. */
  background: inherit;
}

/* The statement scrolls inside its column: its title and the PDF button stay visible. */
._splitGrid_1rhib_64 ._secStatement_1rhib_77 ._stmtHeader_1rhib_11{
  position: sticky;
  top: 0;
  z-index: 2;
  background: inherit;
  padding: 4px 0;
  justify-content: space-between;
}

._splitGrid_1rhib_64 ._secTerminal_1rhib_101{
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
}

._splitGrid_1rhib_64 ._secProduction_1rhib_107{
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  min-width: 0;
  /* The submission area is stuck under the terminal: that is the whole point of
     this view (no more scrolling under the statement to submit). */
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 8px;
}

._splitGrid_1rhib_64 ._secResults_1rhib_118{
  grid-column: 1 / -1;
  grid-row: 5;
  min-width: 0;
  overflow-x: auto;
}

/* Vertical separator between the two columns. */
._splitGrid_1rhib_64 ._secTerminal_1rhib_101, ._splitGrid_1rhib_64 ._secProduction_1rhib_107{
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  padding-left: 20px;
}

/* In the side-by-side view the section titles are more discreet: it saves height,
   which is precious when the terminal and the statement share the screen. */
._splitGrid_1rhib_64 ._secTitle_1rhib_133{
  font-size: 1.15rem !important;
  margin-bottom: 4px !important;
}

/* Host container of the terminal. Its only reason to exist is to occupy a FIXED
   position in the React tree, identical in both layouts: that is what avoids the
   unmount/remount of the VM when switching views. */
._terminalHost_1rhib_141{
  min-width: 0;
}

/* Header line of a section: title on the left, action(s) on the right. */
._sectionHeader_1rhib_146{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* View toggle, in the page header. */
._layoutToggle_1rhib_155{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}

._layoutToggleButton_1rhib_161{
  color: white !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Under 1100px the 2-column grid no longer makes sense: it falls back to one
   column (the terminal stays above the submission). */
@media (max-width: 1100px){
  ._splitGrid_1rhib_64{
    grid-template-columns: minmax(0, 1fr);
  }
  ._splitGrid_1rhib_64 ._secArchive_1rhib_72,
  ._splitGrid_1rhib_64 ._secStatement_1rhib_77,
  ._splitGrid_1rhib_64 ._secTerminal_1rhib_101,
  ._splitGrid_1rhib_64 ._secProduction_1rhib_107,
  ._splitGrid_1rhib_64 ._secResults_1rhib_118{
    grid-column: 1;
    grid-row: auto;
    max-height: none;
    border-left: none;
    padding-left: 0;
  }
}._header_1il0g_1{
  display:flex;
  margin-bottom: 2%;
}
._header_1il0g_1 > * {
  width:50%;
}

._header_1il0g_1 > *:first-child{
  display: flex;
}

._header_1il0g_1 > *:first-child > *{
  width: 100%;
  margin-right: 4%;
}

._header_1il0g_1 > *:last-child{
  justify-content: right;
}

.paper {
    margin-bottom: 30px;
    margin-top: 1% !important;
    padding: 2% !important;
    background-color: var(--darkTheme-third) !important;
}

.title-bar {
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
}

.user-profile {
    display: flex;
    flex-direction: row;
    align-items: top;
    justify-content: left;
    margin: 0 auto;
    width: 100%;
    padding: 20px;
}

.user-profile__infos {
    display: flex;
    flex-direction: column;
    justify-content: left;
    width: 100%;
    height: 100%;
    padding: 0 20px;
}

.user-profile__username {
    display: flex;
    flex-direction: column !important;
    align-items: start !important;
    justify-content: left !important;
    text-align: left !important;
    padding-right: 30px;
    margin-bottom: 20px;
    width: 100%;
}
.user-profile__username > * {
    width: 100%;
    padding-right: 20px;
}
.user-profile__username > p {
    /* Error message for wrong username */
    margin: 0;
    margin-top: 10px;
    color: #ff0000;
}

.user-profile__name {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    width: 100%;
    padding: 0 20px;
}
.user-profile__name > * {
    padding-right: .3em;
    color: var(--darkTheme-secondary-text);
}

.user-profile__infos__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    width: 100%;
    padding: 0 20px;
}
.user-profile__infos__item > *, .user-profile__username > * {
    color: var(--darkTheme-secondary-text);
    text-align: left;
}

.user-profile__username__input {
    width: 90%;
}

.user-profile__bio {
    margin-top: 20px;
    padding-right: 30px;
    width: 100%;
}

.user-profile__bio__input {
    width: 90%;
}
.user-profile__bio__input > * > * { /* input look the same as text */
    scrollbar-color: #6969dd #e0e0e0 !important;
  scrollbar-width: thin !important;
}

.user-profile__other {
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: left;
    width: fit-content;
}

.user-profile__avatar > img {
    width: 150px;
    border-radius: 50%;
}

.user-profile__edit {
    margin-top: 20px;
}
.user-profile__edit > label { /* label look like any other button on the site */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 10em;
    height: fit-content;
    padding: 10px 0;
    border-radius: 5px;
    background-color: #05E205;
    color: var(--darkTheme-third-text);
    font-size: 1em;
    font-weight: 500;
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    border: none;
    transition: all 0.2s ease-in-out;
}

.user-profile__thanks {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}



#edit-button {
    width: 10em;
    font-size: 1em;
    font-weight: 500;
    font-family: "Roboto", sans-serif;
}

.user-profile__buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}
.user-profile__buttons > * {
    margin: 0 20px !important;
}.paper {
    margin-bottom: 30px;
    margin-top: 1% !important;
    padding: 2% !important;
    background-color: var(--darkTheme-third) !important;
}

.display-skills-switch {
    align-items: end !important;
    margin-right: 2em !important;

}
.display-skills-switch > span {
    font-size: 1.5em !important;
    color: var(--darkTheme-secondary-text) !important;
}
.title {
    text-align: left;
    color: var(--darkTheme-secondary-text);
}

.back-icon {
    color: #05E205;
    font-size: 2em !important;
    font-weight: bold;
    margin-right: 1em;
    margin-bottom: 4px;
}

.usernameCell > *, .usernameCell > * > * {
    vertical-align: bottom !important;
    margin-right: 10px !important;
    color: inherit !important;
}
.usernameCell > * > * {
    color: inherit !important;
}

.tableHead > tr > th {
    color: var(--darkTheme-secondary-text) !important;
    font-weight: bold !important;
}

.tableBody > tr > td {
    color: var(--darkTheme-secondary-text);
    background-color: inhertit !important;
}

.spacer {
    width: 100%;
    height: 2em;
}

.currentUserRow {
    background-color: var(--darkTheme-secondary) !important;
    box-shadow: 0 0 5px 5px #05e205a7 !important;
}
.currentUserRow > * {
    color: #05e205e8 !important;
    font-weight: bold !important;
}

.rank1 > * {
    color: #FFD700 !important;
    font-weight: bold !important;
}

.rank2 > * {
    color: #C0C0C0 !important;
    font-weight: bold !important;
}

.rank3 > * {
    color: #CD7F32 !important;
    font-weight: bold !important;
}/* `.App { text-align: center }` (hérité de CRA) centre TOUT ce qu'on ajoute à cette page —
   l'éditeur de pré-prompt y perdait ses lignes, centrées les unes sous les autres. Le même piège
   qu'au tableau de bord monitoring : on le referme ici pour toute la page. */
._container_10nte_4{
  margin-top: 2%;
  margin-bottom: 4%;
  text-align: left;
}

._paper_10nte_10{
  padding: 3%;
  margin-top: 2%;
}

._actions_10nte_15{
  margin-top: 2%;
  display: flex;
  justify-content: flex-end;
}

._testRow_10nte_21{
  margin-top: 1%;
  margin-bottom: 1%;
}

._promptsTitle_10nte_26{
  margin-top: 3%;
  margin-bottom: 1%;
}

._contextBlock_10nte_31{
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 4px;
  padding: 2%;
  margin-top: 2%;
  display: flex;
  flex-direction: column;
}

._varChips_10nte_40{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 1%;
}

._varChip_10nte_40{
  cursor: pointer;
}

._previewRow_10nte_52{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2%;
}

._previewOutput_10nte_60{
  margin-top: 1%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._previewPre_10nte_67{
  font-family: monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(128, 128, 128, 0.08);
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 4px;
  padding: 8px;
  margin: 0;
  max-height: 320px;
  overflow: auto;
}

/* --- Blocs partagés ---------------------------------------------------------------------- */

/* Ils ne dépendent d'aucune passerelle : un seul bloc, sous celle des enseignants, séparé du
   reste par un filet pour qu'on ne les prenne pas pour des contextes de plus. */
._sharedBlocks_10nte_85 {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* L'éditeur de code n'a pas de libellé flottant : le titre est au-dessus, l'aide en dessous. */
._promptEditor_10nte_92 {
  margin: 16px 0;
}

._promptEditorHead_10nte_96 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

/* En-tête d'un bloc partagé : son nom d'inclusion, son titre, son interrupteur et les deux
   boutons (voir / supprimer) sur une seule ligne — la liste s'écrit depuis la page, elle doit se
   parcourir aussi vite qu'elle s'édite. */
._blockHead_10nte_106 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

._blockTitleField_10nte_113 {
  flex: 1 1 240px;
  min-width: 200px;
}

/* Le prompt recousu (l'œil). Même rendu que le payload du smoke test, mais plus haut : c'est un
   texte qu'on relit, pas un JSON qu'on survole. */
._renderedPre_10nte_120 {
  font-family: monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(128, 128, 128, 0.08);
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 4px;
  padding: 8px;
  margin: 0 0 12px 0;
  max-height: 45vh;
  overflow: auto;
}
.react-grid-layout {
  position: relative;
  transition: height 200ms ease;
}
.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top, width, height;
}
.react-grid-item img {
  pointer-events: none;
  user-select: none;
}
.react-grid-item.cssTransforms {
  transition-property: transform, width, height;
}
.react-grid-item.resizing {
  transition: none;
  z-index: 1;
  will-change: width, height;
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
}

.react-grid-item.dropping {
  visibility: hidden;
}

.react-grid-item.react-grid-placeholder {
  background: red;
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.react-grid-item.react-grid-placeholder.placeholder-resizing {
  transition: none;
}

.react-grid-item > .react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
}

.react-grid-item > .react-resizable-handle::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}

.react-resizable-hide > .react-resizable-handle {
  display: none;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w,
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}
.react-resizable {
  position: relative;
}
.react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
  background-position: bottom right;
  padding: 0 3px 3px 0;
}
.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-resizable-handle-w,
.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-resizable-handle-n,
.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}/* ------------------------------------------------------------------ */
/*  Dashboard — shared styling (student / teacher / admin)             */
/*  Reuses the app dark theme tokens defined in src/index.css          */
/* ------------------------------------------------------------------ */

.dashboard {
  padding-bottom: 3rem;
}

.dashboard__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 1.5rem 0 0.25rem;
}

.dashboard__title {
  color: var(--darkTheme-secondary-text) !important;
  text-align: left;
  margin: 0 !important;
  font-weight: 600 !important;
}

.dashboard__subtitle {
  color: #9e9e9e !important;
  text-align: left;
}

.dashboard__section-title {
  color: var(--darkTheme-secondary-text) !important;
  text-align: left;
  margin: 2rem 0 0.75rem !important;
  font-weight: 500 !important;
  border-left: 4px solid #05e205;
  padding-left: 0.6rem;
}

/* ------------------------------- KPI cards ------------------------- */

.stat-card {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem !important;
  background-color: var(--darkTheme-secondary) !important;
  border: 1px solid #333 !important;
  border-radius: 12px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  border-color: #05e205 !important;
  box-shadow: 0 6px 18px rgba(5, 226, 5, 0.15) !important;
}

.stat-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(5, 226, 5, 0.12);
  color: #05e205;
  flex-shrink: 0;
}

.stat-card__icon svg {
  font-size: 1.7rem;
}

.stat-card__body {
  text-align: left;
  min-width: 0;
}

.stat-card__value {
  color: var(--darkTheme-primary-text) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

.stat-card__label {
  color: #9e9e9e !important;
  font-size: 0.82rem !important;
  line-height: 1.2 !important;
}

.stat-card__hint {
  color: #05e205 !important;
  font-size: 0.72rem !important;
  margin-top: 2px !important;
}

/* ------------------------------- Panels --------------------------- */

.dashboard__panel {
  padding: 1.25rem !important;
  background-color: var(--darkTheme-secondary) !important;
  border: 1px solid #333 !important;
  border-radius: 12px !important;
  height: 100%;
  box-sizing: border-box;
}

.dashboard__panel-title {
  color: var(--darkTheme-secondary-text) !important;
  text-align: left;
  margin-bottom: 1rem !important;
  font-weight: 500 !important;
}

/* Fixed-height wrapper for chart.js canvases (needs maintainAspectRatio:false).
   Prevents the canvas from mis-sizing on mount (e.g. inside a tab) and overlapping
   neighbouring content. */
.dashboard__chart {
  position: relative;
  height: 300px;
  width: 100%;
}

/* ------------------------------- Tables --------------------------- */

.dashboard-table th {
  color: #9e9e9e !important;
  font-weight: 600 !important;
  border-bottom: 1px solid #3a3a3a !important;
}

/* stickyHeader (leaderboard scroll) applies the theme's white background by default:
   it is forced to the panel's colour to stay readable on a dark background. */
.dashboard-table .MuiTableCell-stickyHeader {
  background-color: var(--darkTheme-secondary) !important;
}

.dashboard-table td {
  color: var(--darkTheme-secondary-text) !important;
  border-bottom: 1px solid #2c2c2c !important;
}

.dashboard-table tr:last-child td {
  border-bottom: none !important;
}

/* Sortable headers: the MUI sort arrow is invisible by default (opacity 0), so nothing
   signals that a column sorts. It is shown permanently, discreetly, and solid + green on
   hover as in the active state — otherwise, on a dark background, nobody guesses the sort. */
.dashboard-table .MuiTableSortLabel-icon {
  opacity: 0.4 !important;
  color: #9e9e9e !important;
}
.dashboard-table .MuiTableSortLabel-root:hover,
.dashboard-table .MuiTableSortLabel-root.Mui-active {
  color: #05e205 !important;
}
.dashboard-table .MuiTableSortLabel-root:hover .MuiTableSortLabel-icon,
.dashboard-table .MuiTableSortLabel-root.Mui-active .MuiTableSortLabel-icon {
  opacity: 1 !important;
  color: #05e205 !important;
}

/* ------------------- Leaderboard reveal (privacy) ----------------- */

/* Title + eye on a single line */
.dashboard__panel-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 0.5rem;
}

.dashboard__rank-inline {
  color: #05e205;
}

/* "My position / my score" recap, shown once revealed */
.dashboard__rank-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 0.75rem;
  color: var(--darkTheme-secondary-text);
  font-size: 0.9rem;
}
.dashboard__rank-summary strong {
  color: #05e205;
}

/* Once revealed, the ranking becomes a scrollable area (everyone) */
.dashboard__scroll {
  max-height: 300px;
  overflow-y: auto;
}

/* Highlight the current user's row in the mini-leaderboard */
.dashboard-table tr.current-user td {
  background-color: rgba(5, 226, 5, 0.09) !important;
  color: #05e205 !important;
  font-weight: 700 !important;
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 6px;
  background: #333;
  font-weight: 700;
  font-size: 0.8rem;
}

.rank-badge.rank-1 { background: #ffd70022; color: #ffd700; }
.rank-badge.rank-2 { background: #c0c0c022; color: #c0c0c0; }
.rank-badge.rank-3 { background: #cd7f3222; color: #cd7f32; }

/* Role chips (admin table) */
.role-chip {
  text-transform: capitalize;
  font-size: 0.72rem !important;
  height: 22px !important;
}

.dashboard__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
}

/* ------------------------- Machine load gauges --------------------- */

.system-load__gauge {
  text-align: left;
}

.system-load__label {
  color: #9e9e9e !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}

.system-load__value {
  color: var(--darkTheme-primary-text) !important;
  font-weight: 700 !important;
}

.system-load__bar {
  height: 8px !important;
  border-radius: 4px !important;
  background-color: #333 !important;
}

.system-load__detail {
  color: #9e9e9e !important;
  font-size: 0.72rem !important;
  margin-top: 4px !important;
}

/* --------------------- Range selector + pagination ----------------- */

.dashboard__range .MuiToggleButton-root {
  color: #9e9e9e;
  border-color: #444;
  text-transform: none;
  padding: 2px 12px;
}

.dashboard__range .MuiToggleButton-root.Mui-selected {
  color: #05e205;
  background-color: rgba(5, 226, 5, 0.12);
  border-color: #05e205;
}

.dashboard__pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

.dashboard__pager-label {
  color: #9e9e9e !important;
  font-size: 0.8rem !important;
}

.dashboard__pager .MuiIconButton-root {
  color: #9e9e9e;
}

.dashboard__pager .MuiIconButton-root.Mui-disabled {
  color: #4a4a4a;
}

/* A section whose content is not settled yet (e.g. AI usage). */
.dashboard__notice {
  background-color: rgba(100, 181, 246, 0.08) !important;
  border: 1px solid #2f5673 !important;
  color: #9fc7e8 !important;
}

/* --------------------- "+1 I used this dashboard" ------------------ */

.dashboard-vote {
  border-color: #444 !important;
  color: #9e9e9e !important;
  font-weight: 600 !important;
}

.dashboard-vote .MuiChip-icon {
  color: inherit !important;
}

.dashboard-vote:hover {
  border-color: #05e205 !important;
  color: #05e205 !important;
  background-color: rgba(5, 226, 5, 0.08) !important;
}

.dashboard-vote--on {
  background-color: rgba(5, 226, 5, 0.15) !important;
  border: 1px solid #05e205 !important;
  color: #05e205 !important;
}

/* ------------------------------------------------------------------ */
/*            Tableau de bord configurable + bascule de vue           */
/* ------------------------------------------------------------------ */

/* Student/teacher toggle: placed above the title, aligned right so as not to
   compete with the dashboard's title. */
.dashboard__view-switch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 1.5rem;
}

/* "Dashboard of <student>" picker — visible only in the student view, when the
   teacher/admin chooses to impersonate an account rather than see their own. */
.dashboard__impersonate {
  width: 280px;
}
.dashboard__impersonate .MuiInputLabel-root,
.dashboard__impersonate .MuiOutlinedInput-notchedOutline {
  color: #9e9e9e;
  border-color: #444 !important;
}
.dashboard__impersonate .MuiInputBase-input,
.dashboard__impersonate .MuiAutocomplete-clearIndicator,
.dashboard__impersonate .MuiAutocomplete-popupIndicator {
  color: var(--darkTheme-secondary-text) !important;
}
.dashboard__impersonate .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
.dashboard__impersonate .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #05e205 !important;
}

/* A discreet but clear reminder, under the title: one NEVER looks at one's own data by
   mistake believing it to be a student's (and vice versa). */
.dashboard__viewing-as {
  display: inline-block;
  margin-top: 0.35rem !important;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(5, 226, 5, 0.12);
  color: #05e205 !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
}

/* MUI colours the selected button with the theme's "primary" colour — which is #303030 here,
   a dark grey. On a dark background that gave unreadable text, selected as well as
   unselected. Both states are therefore forced. */
.dashboard__view-switch .MuiToggleButton-root {
  color: #9e9e9e !important;
  border-color: #444 !important;
  padding: 4px 14px !important;
}
.dashboard__view-switch .MuiToggleButton-root:hover {
  color: var(--darkTheme-secondary-text) !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
}
/* The active button: platform green on a background that sets it clearly apart. */
.dashboard__view-switch .MuiToggleButton-root.Mui-selected {
  color: #05e205 !important;
  background-color: rgba(5, 226, 5, 0.12) !important;
  border-color: rgba(5, 226, 5, 0.5) !important;
}
.dashboard__view-switch .MuiToggleButton-root.Mui-selected:hover {
  background-color: rgba(5, 226, 5, 0.2) !important;
}

.dashboard__header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* The panels of one same row have contents of different heights
   (a chart, a table): without a common height the grid tears apart. */
.dashboard__widget {
  display: flex;
  flex-direction: column;
}

.dashboard__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem !important;
  text-align: center;
}

/* --- Dialogue de configuration --- */

/* Pushes the controls to the right whatever the length of the name. */

/* The composer: type → axis → variable(s). The three steps read from top to bottom. */

/* The search: it comes BEFORE the steps, because at ~90 crossings it is the shortest path
   as soon as you know what you are looking for. */
.tdc-search {
  margin-bottom: 0.25rem;
}

/* The list scrolls inside the dialog instead of stretching it: a broad search can bring up
   dozens of results, and the buttons at the bottom must stay reachable. */
.tdc-results {
  max-height: 46vh;
  overflow-y: auto;
  margin: 0 -0.25rem;
}

.tdc-result {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.25rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}

.tdc-result:hover {
  background: rgba(255, 255, 255, 0.04);
}

.tdc-result__icon {
  display: inline-flex;
  opacity: 0.55;
  flex-shrink: 0;
}

.tdc-result__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The axis is a precision, not the subject: it reads after the name, set back. */
.tdc-result__axis {
  font-size: 0.75rem;
  opacity: 0.5;
  flex-shrink: 0;
  padding-left: 0.5rem;
}

.tdc-step {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
  margin: 1rem 0 0.4rem;
}

.tdc-kinds {
  flex-wrap: wrap;
}
.tdc-kind {
  gap: 0.45rem;
  text-transform: none;
  font-size: 0.85rem;
}
/* The counter overflows the button when it sticks to the icon: room is left for it. */
.tdc-kind__badge {
  margin-right: 0.35rem;
}

.tdc-axes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.tdc-axis {
  cursor: pointer;
}

.tdc-group__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}
.tdc-check {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 0.9rem;
}
/* The table itself, above its variables: it is what you drop or remove. */
.tdc-check--master {
  font-weight: 600;
  margin-top: 0.35rem;
}

.tdc-hint {
  font-size: 0.75rem;
  opacity: 0.55;
  margin-top: 0.35rem;
}

/* ------------------------------------------------------------------ */
/*                       Grid editor (drag & drop)                    */
/* ------------------------------------------------------------------ */

/* Each cell carries its widget over its whole height: without that, a resized
   chart would not follow its cell. */
.dashboard__cell {
  position: relative;
  overflow: hidden;
}
.dashboard__cell > .dashboard__panel,
.dashboard__cell > .stat-card {
  height: 100%;
}

/* A table taller than its cell scrolls inside it, it does not overflow. */
.dashboard__widget-scroll {
  overflow: auto;
  height: 100%;
}

.dashboard__edit-hint {
  margin-bottom: 0.75rem !important;
}

/* --- Editing mode --- */

/* The grid reads as a grid: each cell is outlined with dashes. */
.dashboard__grid--editing .dashboard__cell {
  outline: 1px dashed #4a4a4a;
  outline-offset: 2px;
  border-radius: 12px;
}
.dashboard__grid--editing .dashboard__cell:hover {
  outline-color: var(--darkTheme-primary, #05e205);
}

/* Widget toolbar, above the content.
   No background by default: outside editing it only holds a PDF button, invisible until it is
   hovered, and a permanent background would draw a black square on every tile.
   The background therefore only appears along with its content. */
.dashboard__widget-edit {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 8px;
  padding: 1px;
}
.dashboard__grid--editing .dashboard__widget-edit,
.dashboard__grid--selecting .dashboard__widget-edit,
.dashboard__cell:hover .dashboard__widget-edit,
.dashboard__stack-item:hover .dashboard__widget-edit {
  background: rgba(0, 0, 0, 0.55);
}
.dashboard__drag-handle {
  display: inline-flex;
  padding: 4px;
  color: #bdbdbd;
  cursor: grab;
}
.dashboard__drag-handle:active {
  cursor: grabbing;
}
.dashboard__widget-remove {
  color: #ef5350 !important;
}

/* While editing or selecting, the content must not capture the mouse: otherwise a click on a
   table row would open a detail instead of letting the drag through (editing) or ticking the
   widget (selection). */
.dashboard__grid--editing .dashboard__cell > .dashboard__panel,
.dashboard__grid--editing .dashboard__cell > .stat-card,
.dashboard__grid--selecting .dashboard__cell > .dashboard__panel,
.dashboard__grid--selecting .dashboard__cell > .stat-card {
  pointer-events: none;
  user-select: none;
}
.dashboard__grid--editing .dashboard__widget-edit,
.dashboard__grid--selecting .dashboard__widget-edit {
  pointer-events: auto;
}

/* react-grid-layout's drop shadow: where the widget is going to land. */
.react-grid-item.react-grid-placeholder {
  background: var(--darkTheme-primary, #05e205) !important;
  opacity: 0.15 !important;
  border-radius: 12px;
}
.react-grid-item.resizing,
.react-grid-item.react-draggable-dragging {
  z-index: 5;
}
/* The default handle is a background image, invisible on a dark background. */
.dashboard__grid--editing .react-resizable-handle::after {
  border-right-color: #9e9e9e;
  border-bottom-color: #9e9e9e;
}

/* --- Fallback under 1200px: no grid, stacking --- */
.dashboard__stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.dashboard__stack-item {
  position: relative;
  min-height: 120px;
}

/* --- Export --- */

/* Outside editing/selection, a widget's export buttons (PDF, image, CSV) only appear on
   hover: permanent icons on every tile would be noise across the whole page. */
.dashboard__widget-action {
  opacity: 0;
  transition: opacity 0.15s;
  color: #9e9e9e !important;
}
.dashboard__cell:hover .dashboard__widget-action,
.dashboard__stack-item:hover .dashboard__widget-action,
.dashboard__widget-action:focus-visible {
  opacity: 1;
}

/* The toolbar must not exist visually when it is empty. */
.dashboard__widget-edit:empty {
  display: none;
}

/* html2canvas captures this container: without an explicit background, the capture would come
   out transparent then black once flattened into the PDF. */
.dashboard__board {
  background-color: transparent;
}

/* --- Printable PDF export ---
   Switched on by `dashboardExport.ts` (capturePrintable) just for the time of the capture,
   never visible on screen. The app's theme is dark: without this, a PDF would come out with
   almost white text on an almost black background — unreadable on paper.

   Two levers: (1) redefining the --darkTheme-* variables switches over, in one go, everything
   that already uses them (panels, table text) without duplicating anything; (2) the MUI text
   (tile values, legends, labels) does NOT go through those variables, so it is forced dark
   EVERYWHERE — except the chips (Chip) and the podium (rank-badge), which have their OWN
   contrasted background/text pair: forcing them would break THEIR contrast, not ours. */
.dashboard--print {
  --darkTheme-primary: #ffffff;
  --darkTheme-secondary: #ffffff;
  --darkTheme-third: #f2f2f2;
  --darkTheme-primary-text: #1a1a1a;
  --darkTheme-secondary-text: #333333;
  --darkTheme-icons-primary: #1a1a1a;
  --darkTheme-icons-secondary: #333333;
  --darkTheme-border-primary: #dddddd;
  --darkTheme-border-secondary: #cccccc;
  --darkTheme-navbar: #f2f2f2;
}
.dashboard--print,
.dashboard--print *:not(.MuiChip-root):not(.MuiChip-root *):not(.rank-badge):not(.rank-badge *) {
  color: #1a1a1a !important;
}
.dashboard--print .dashboard__panel {
  border-color: #dddddd !important;
}
.dashboard--print .dashboard-table th {
  color: #555555 !important;
  border-bottom-color: #dddddd !important;
}
.dashboard--print .dashboard-table td {
  border-bottom-color: #eeeeee !important;
}
.dashboard--print .dashboard-table tr.current-user td {
  color: #0a7a0a !important;
}
.dashboard--print .rank-badge {
  background: #eeeeee !important;
  color: #1a1a1a !important;
}
.dashboard--print .rank-badge.rank-1 { background: #fff3c4 !important; color: #8a6d00 !important; }
.dashboard--print .rank-badge.rank-2 { background: #e7ebee !important; color: #55606b !important; }
.dashboard--print .rank-badge.rank-3 { background: #f6e0cf !important; color: #8a5322 !important; }
._footer_r15rq_1{
  padding:1%;
  background-color: var(--darkTheme-secondary);
  margin-top:auto;
}

._footer_r15rq_1 > div{
  padding-top:1%;
  width:30%;
  margin:auto;
}

._footer_r15rq_1 > div > div{
  display:flex;
  justify-content: space-between;
}

._footer_r15rq_1 a{
  min-width:20%;
  font-weight: bold;
  cursor: pointer;
}

._footer_r15rq_1 a:hover {
  color:#05e205;
}

._flags_r15rq_28 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}

._flags_r15rq_28 > *{
  margin-left:2%;
  margin-right:2%;
}


._flag_r15rq_28 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25px;
  width: 25px;
  border-radius: 5px;
}

._flag_r15rq_28:hover {
  transform: scale(1.05, 1.05);
  transition-duration: 0.2s;
}

._flag_r15rq_28:active {
  transform: scale(1, 1);
}.hc-layer{
  --hc-panel:#171917; --hc-bg:#0d0f0d; --hc-raised:#20241f; --hc-raised2:#2a2f28;
  --hc-border:#2f332f; --hc-border-strong:#3f453e;
  --hc-text:#e8ebe8; --hc-dim:#9aa39a; --hc-faint:#8a928a;
  --hc-green:#05e205; --hc-green-soft:rgba(5,226,5,.12); --hc-green-line:rgba(5,226,5,.42);
  --hc-cyan:#5ec8f0; --hc-cyan-soft:rgba(94,200,240,.12);
  --hc-amber:#f0b03e; --hc-red:#e2544a;
  --hc-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --hc-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-family:var(--hc-sans);
  /* .App forces text-align:center (a CRA legacy): without this the whole chat — bubbles, lists,
     code blocks — displays centred. The few centred elements (.hc-sys) redeclare it. */
  text-align:left;
}
.hc-layer *{box-sizing:border-box}

/* ------- Markdown rendering of the AI assistant's answers (cf. markdownLite.tsx) ------- */
.hc-md-p{margin:0 0 6px}
.hc-md-p:last-child{margin-bottom:0}
.hc-md-list{margin:0 0 6px;padding-left:18px;display:flex;flex-direction:column;gap:3px}
.hc-md-list:last-child{margin-bottom:0}
.hc-md-code{font-family:var(--hc-mono);font-size:11px;background:var(--hc-raised2);
  border:1px solid var(--hc-border);border-radius:4px;padding:0 4px;word-break:break-word}
.hc-md-pre{font-family:var(--hc-mono);font-size:11px;line-height:1.45;background:var(--hc-bg);
  border:1px solid var(--hc-border-strong);border-radius:8px;padding:8px 9px;margin:0 0 6px;
  overflow-x:auto;white-space:pre;color:var(--hc-text);max-width:100%}
.hc-md-pre:last-child{margin-bottom:0}

/* ------- bottom-left cluster (history + token) ------- */
.hc-dock{position:fixed;right:18px;bottom:18px;z-index:1250;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.hc-mini{width:38px;height:38px;border-radius:50%;background:var(--hc-panel);border:1px solid var(--hc-border-strong);
  color:var(--hc-dim);display:grid;place-items:center;cursor:pointer;transition:.15s}
.hc-mini:hover{color:var(--hc-green);border-color:var(--hc-green-line)}
.hc-fab-row{display:flex;flex-direction:row-reverse;align-items:center;gap:11px}
.hc-fab{width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;color:#04140a;background:var(--hc-green);position:relative}
.hc-fab.armed{animation:hc-pulse 2.2s infinite}
.hc-fab.teacher{background:var(--hc-cyan);color:#062230}
.hc-fab.locked{background:var(--hc-raised);color:var(--hc-faint);cursor:not-allowed;box-shadow:none}
.hc-fab.locked svg{opacity:.55}
.hc-fab-countdown{position:absolute;left:50%;top:-20px;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--hc-mono);font-size:10.5px;color:var(--hc-faint);background:var(--hc-panel);
  border:1px solid var(--hc-border-strong);border-radius:999px;padding:1px 7px}
@keyframes hc-pulse{0%{box-shadow:0 0 0 0 rgba(5,226,5,.45)}70%{box-shadow:0 0 0 15px rgba(5,226,5,0)}100%{box-shadow:0 0 0 0 rgba(5,226,5,0)}}
.hc-bubble{background:var(--hc-raised);border:1px solid var(--hc-border-strong);border-radius:10px;padding:9px 12px;max-width:210px;font-size:12.5px;line-height:1.45;color:var(--hc-text)}
.hc-bubble b{color:var(--hc-green);font-weight:500}
.hc-count{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--hc-red);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center;border:2px solid var(--hc-bg)}

/* ------- shared panel shell ------- */
.hc-panel{background:var(--hc-panel);border:1px solid var(--hc-border-strong);border-radius:12px;overflow:hidden;box-shadow:0 26px 60px -28px #000;display:flex;flex-direction:column}
.hc-head{display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid var(--hc-border);background:#0b0c0b}
.hc-head .t{font-size:13.5px;font-weight:500;color:var(--hc-text)}
.hc-head .s{font-family:var(--hc-mono);font-size:10.5px;color:var(--hc-faint)}
.hc-head .push{margin-left:auto}
.hc-icobtn{background:none;border:none;color:var(--hc-faint);cursor:pointer;padding:4px;border-radius:6px;display:grid;place-items:center;line-height:0}
.hc-icobtn:hover{color:var(--hc-text);background:var(--hc-raised)}
.hc-exochip{display:inline-flex;align-items:center;gap:5px;font-family:var(--hc-mono);font-size:10px;color:var(--hc-green);background:var(--hc-green-soft);border:1px solid var(--hc-green-line);border-radius:999px;padding:2px 8px;white-space:nowrap}
/* "Page being viewed" variant (outside an exercise): same bullet, sober shade — an exercise in
   progress and a mere page must not read the same. */
.hc-exochip.page{color:var(--hc-dim);background:var(--hc-raised);border-color:var(--hc-border-strong)}
.hc-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:var(--hc-mono);font-size:12px;font-weight:600;flex:none;position:relative;background:var(--hc-cyan-soft);color:var(--hc-cyan)}
.hc-av.teacher{background:var(--hc-green-soft);color:var(--hc-green)}
.hc-av .st{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;border:2px solid var(--hc-panel)}
.hc-st-free{background:var(--hc-green)}.hc-st-busy{background:var(--hc-faint)}
.hc-rolebadge{position:absolute;top:-4px;right:-4px;width:14px;height:14px;border-radius:50%;display:grid;place-items:center;background:var(--hc-panel);border:1px solid var(--hc-green-line)}
.hc-rolebadge svg{width:10px;height:10px;color:var(--hc-green)}

/* ------- peer picker (bottom-left, above token) ------- */
.hc-picker{position:fixed;right:18px;bottom:84px;z-index:1260;width:320px;max-width:calc(100vw - 40px)}
/* Chat expanded: the picker tucks itself to its left instead of running over it. */
.hc-picker.shifted{right:328px}
@media (max-width:760px){ .hc-picker.shifted{right:18px} }
.hc-btnrow{display:flex;align-items:center;gap:8px;padding:10px 13px 0}
.hc-list{list-style:none;margin:8px 0;padding:0 8px 6px;max-height:240px;overflow:auto}
.hc-peer{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:9px;cursor:pointer;border:1px solid transparent}
.hc-peer:hover{background:var(--hc-raised)}
.hc-peer.sel{background:var(--hc-green-soft);border-color:var(--hc-green-line)}
.hc-peer.off{opacity:.5;cursor:not-allowed}
.hc-peer .nm{font-size:13px;font-weight:500;color:var(--hc-text);display:flex;align-items:center;gap:6px}
/* Status + "since …": bounded like the location line, so as not to push the right-hand column
   (number of exchanges) out of the 320 px panel. */
.hc-peer .meta{font-family:var(--hc-mono);font-size:10px;color:var(--hc-dim);margin-top:1px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The peer's location (current exercise / page being viewed) under their status. */
.hc-peerwhere{font-family:var(--hc-mono);font-size:10px;color:var(--hc-cyan);margin-top:2px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-tbadge{font-family:var(--hc-mono);font-size:9px;letter-spacing:.04em;color:var(--hc-green);background:var(--hc-green-soft);border:1px solid var(--hc-green-line);border-radius:999px;padding:1px 6px}
.hc-sbadge{font-family:var(--hc-mono);font-size:9px;letter-spacing:.04em;color:var(--hc-cyan);background:var(--hc-cyan-soft);border:1px solid var(--hc-cyan-soft);border-radius:999px;padding:1px 6px}
.hc-hist{margin-left:auto;text-align:right;font-family:var(--hc-mono);font-size:10px;flex:none;line-height:1.35}
.hc-hist .n{color:var(--hc-cyan)}.hc-hist .z{color:var(--hc-faint)}
.hc-foot{padding:10px 13px;border-top:1px solid var(--hc-border);display:flex;flex-direction:column;gap:10px;background:#0b0c0b}
.hc-toggle{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--hc-dim);cursor:pointer;user-select:none}
.hc-sw{width:34px;height:19px;border-radius:999px;background:var(--hc-raised2);position:relative;transition:.15s;flex:none}
.hc-sw::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--hc-faint);transition:.15s}
.hc-toggle.on .hc-sw{background:var(--hc-green-soft);box-shadow:inset 0 0 0 1px var(--hc-green-line)}
.hc-toggle.on .hc-sw::after{left:17px;background:var(--hc-green)}
.hc-toggle.on{color:var(--hc-text)}
/* Sharing impossible until the terminal is started: the toggle shows it. */
.hc-toggle.disabled{opacity:.45;cursor:not-allowed}
.hc-cta{width:100%;border:none;border-radius:8px;padding:10px;font-size:13px;font-weight:500;font-family:var(--hc-sans);cursor:pointer;background:var(--hc-green);color:#04140a;display:flex;align-items:center;justify-content:center;gap:8px}
.hc-cta:disabled{opacity:.45;cursor:not-allowed}

/* ------- right chat rail ------- */
.hc-rail{position:fixed;right:0;top:96px;z-index:1240;display:flex;align-items:flex-start}
.hc-tab{background:var(--hc-panel);border:1px solid var(--hc-border-strong);border-right:none;border-radius:10px 0 0 10px;
  padding:12px 9px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--hc-text);box-shadow:-14px 0 40px -30px #000}
.hc-tab .lab{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--hc-mono);font-size:11px;letter-spacing:.08em;color:var(--hc-dim)}
.hc-tab .cbadge{background:var(--hc-green);color:#04140a;font-size:11px;font-weight:600;border-radius:999px;min-width:18px;height:18px;display:grid;place-items:center}
.hc-chat{width:308px;max-width:calc(100vw - 24px);height:min(70vh,540px);border-radius:12px 0 0 12px;border-right:none}
.hc-tabs{display:flex;gap:4px;padding:6px 8px 0;background:#0b0c0b;overflow:auto}
.hc-tabs button{font-family:var(--hc-mono);font-size:10.5px;color:var(--hc-dim);background:var(--hc-raised);border:1px solid var(--hc-border);border-bottom:none;border-radius:7px 7px 0 0;padding:5px 9px;cursor:pointer;white-space:nowrap}
.hc-tabs button.on{color:var(--hc-green);background:var(--hc-panel);border-color:var(--hc-border-strong)}
.hc-timer{font-family:var(--hc-mono);font-size:10.5px;color:var(--hc-amber);display:flex;align-items:center;gap:4px}
.hc-timer.low{color:var(--hc-red)}

.hc-share{margin:9px 11px 0;border:1px solid var(--hc-cyan-soft);border-radius:10px;overflow:hidden;background:#070a0c}
.hc-share .h{display:flex;align-items:center;gap:7px;padding:6px 10px;background:var(--hc-cyan-soft);font-family:var(--hc-mono);font-size:10px;color:var(--hc-cyan);letter-spacing:.03em}
.hc-share .h .lab{display:flex;align-items:center;gap:7px}
.hc-share .h .live{margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--hc-cyan);animation:hc-blink 1.4s infinite}
.hc-share .h .hc-icobtn{color:var(--hc-cyan)}
.hc-share .h .hc-icobtn:hover{color:var(--hc-text);background:rgba(255,255,255,.08)}
@keyframes hc-blink{50%{opacity:.25}}
.hc-sharewindowed{padding:7px 11px;font-family:var(--hc-mono);font-size:10px;color:var(--hc-faint);text-align:left}
.hc-share pre{margin:0;padding:8px 11px;font-family:var(--hc-mono);font-size:10.5px;line-height:1.65;color:#bfe6f6;white-space:pre-wrap;text-align:left;max-height:160px;overflow-y:auto}
/* Mark of the terminal's owner (initials): repeated in the rail AND in full screen. */
.hc-peermark{font-family:var(--hc-mono);font-size:9px;font-weight:600;letter-spacing:.04em;
  background:var(--hc-cyan-soft);border:1px solid var(--hc-cyan-soft);color:var(--hc-cyan);
  border-radius:999px;padding:1px 6px}

/* ------- "peer's terminal" window (read-only, movable) -------
   It is a terminal: it is given a terminal's size (80 columns), not that of the page's Shell
   area — which changes depending on whether the VM is running, and made the window jump.
   It floats above the page (the statement and the chat stay readable) and is moved by its
   title bar, like a terminal session opened alongside. */
.hc-peermark{font-family:var(--hc-mono);font-size:9px;font-weight:600;letter-spacing:.04em;
  background:var(--hc-cyan-soft);border:1px solid var(--hc-cyan-soft);color:var(--hc-cyan);
  border-radius:999px;padding:1px 6px}
.hc-termfs-win{position:fixed;z-index:6;display:flex;flex-direction:column;
  font-size:13px;width:min(calc(80ch + 26px),calc(100vw - 24px));height:min(74vh,620px);
  background:#070a0c;border:1px solid var(--hc-cyan);border-radius:10px;overflow:hidden;
  box-shadow:0 30px 90px -30px #000, 0 0 0 1px rgba(94,200,240,.25)}
.hc-termfs-head{display:flex;align-items:center;gap:9px;padding:8px 12px;background:var(--hc-cyan-soft);
  border-bottom:1px solid rgba(94,200,240,.32);font-family:var(--hc-mono);font-size:11.5px;
  color:var(--hc-cyan);cursor:move}
.hc-termfs-head .who{color:var(--hc-text);font-size:12.5px}
.hc-termfs-head .live{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--hc-cyan);animation:hc-blink 1.4s infinite}
.hc-termfs-win pre{flex:1;margin:0;padding:10px 13px;overflow:auto;white-space:pre;text-align:left;
  font-family:var(--hc-mono);font-size:inherit;color:#bfe6f6;line-height:1.5}
.hc-termfs-foot{display:flex;align-items:center;gap:6px;padding:6px 12px;border-top:1px solid rgba(94,200,240,.22);
  font-family:var(--hc-mono);font-size:10.5px;color:var(--hc-cyan)}

/* Server refusal shown in the picker (quota, peer busy, exchange already open). */
.hc-notice{display:flex;align-items:flex-start;gap:8px;margin:0 13px 9px;padding:8px 10px;border-radius:9px;
  font-size:11.5px;line-height:1.45;color:var(--hc-amber);background:rgba(240,176,62,.08);
  border:1px solid rgba(240,176,62,.32)}
.hc-notice>span{flex:1}
.hc-notice .hc-icobtn{color:var(--hc-amber);margin:-2px -4px 0 0}

/* Partage de session : proposer (initiateur) → accepter (aidant) */
.hc-sharehint{display:flex;align-items:flex-start;gap:6px;font-family:var(--hc-mono);font-size:10px;line-height:1.5;color:var(--hc-faint)}
.hc-sharewait{margin:8px 11px 0;display:flex;align-items:center;gap:6px;font-family:var(--hc-mono);font-size:10px;color:var(--hc-amber);background:rgba(240,176,62,.08);border:1px solid rgba(240,176,62,.32);border-radius:8px;padding:6px 9px}
.hc-shareoffer{margin:8px 11px 0;border:1px solid var(--hc-cyan-soft);border-radius:10px;background:rgba(9,10,12,.6);padding:8px 10px;display:flex;flex-direction:column;gap:7px}
.hc-shareoffer>span{display:flex;align-items:center;gap:6px;font-family:var(--hc-mono);font-size:10.5px;color:var(--hc-cyan)}
.hc-shareoffer .acts{display:flex;gap:6px}
.hc-shareoffer .acts button{flex:1;font-size:11.5px;font-family:var(--hc-sans);border-radius:7px;padding:6px;cursor:pointer;border:1px solid var(--hc-border-strong);background:transparent;color:var(--hc-dim)}
.hc-shareoffer .acts button.ok{color:var(--hc-green);border-color:var(--hc-green-line);background:var(--hc-green-soft)}

.hc-msgs{flex:1;overflow:auto;padding:11px;display:flex;flex-direction:column;gap:8px}
.hc-m{max-width:82%;padding:7px 11px;border-radius:12px;font-size:12.5px;line-height:1.5}
.hc-m.them{align-self:flex-start;background:var(--hc-raised);border:1px solid var(--hc-border);border-bottom-left-radius:4px;color:var(--hc-text)}
.hc-m.me{align-self:flex-end;background:var(--hc-green-soft);border:1px solid var(--hc-green-line);color:#daffda;border-bottom-right-radius:4px}
.hc-m .who{font-family:var(--hc-mono);font-size:9px;color:var(--hc-faint);margin-bottom:2px}
.hc-m.me .who{color:var(--hc-green);text-align:right}
.hc-sys{align-self:center;font-family:var(--hc-mono);font-size:10px;color:var(--hc-faint);text-align:center}
.hc-composer{position:relative}
.hc-in{display:flex;align-items:center;gap:8px;padding:9px 11px;border-top:1px solid var(--hc-border);background:#0b0c0b}
.hc-in input{all:unset;box-sizing:border-box;flex:1;height:34px;line-height:34px;background:var(--hc-bg);border:1px solid var(--hc-border);border-radius:8px;padding:0 10px;font-size:12.5px;color:var(--hc-text)}
.hc-in input:disabled{opacity:.5;cursor:not-allowed}
.hc-send{width:34px;height:34px;border-radius:8px;border:none;background:var(--hc-green);color:#04140a;display:grid;place-items:center;cursor:pointer;flex:none}
.hc-send:disabled{opacity:.45;cursor:not-allowed}
.hc-emoji-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--hc-border);background:transparent;color:var(--hc-dim);display:grid;place-items:center;cursor:pointer;flex:none}
.hc-emoji-btn:hover{color:var(--hc-text);border-color:var(--hc-border-strong)}
.hc-emoji-btn:disabled{opacity:.4;cursor:not-allowed}
.hc-emoji-suggest{position:absolute;left:11px;right:11px;bottom:100%;margin-bottom:6px;background:var(--hc-panel);border:1px solid var(--hc-border-strong);border-radius:10px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.35);max-height:220px;overflow-y:auto}
.hc-emoji-suggest-item{display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;font-size:12.5px}
.hc-emoji-suggest-item .ch{font-size:16px}
.hc-emoji-suggest-item .cd{font-family:var(--hc-mono);font-size:11px;color:var(--hc-dim)}
.hc-emoji-suggest-item.sel,.hc-emoji-suggest-item:hover{background:var(--hc-raised)}
.hc-emoji-panel{position:absolute;right:11px;bottom:100%;margin-bottom:6px;background:var(--hc-panel);border:1px solid var(--hc-border-strong);border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.35);padding:8px;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;width:248px;max-height:200px;overflow-y:auto}
.hc-emoji-cell{border:none;background:transparent;border-radius:6px;font-size:18px;line-height:1;padding:6px;cursor:pointer}
.hc-emoji-cell:hover{background:var(--hc-raised)}
.hc-endrow{display:flex;gap:6px;padding:0 11px 10px}
.hc-endrow button{flex:1;font-size:11.5px;font-family:var(--hc-sans);border-radius:7px;padding:7px;cursor:pointer;border:1px solid var(--hc-border-strong);background:transparent;color:var(--hc-dim)}
.hc-endrow button.ok{color:var(--hc-green);border-color:var(--hc-green-line)}

/* ------- incoming toasts (top-right) ------- */
.hc-toasts{position:fixed;right:18px;top:76px;z-index:1300;display:flex;flex-direction:column;gap:10px;width:310px;max-width:calc(100vw - 36px)}
/* Chat rail expanded: the notifications tuck themselves TO ITS LEFT. They used to overlap the
   panel (z-index 1300 against 1240, same band on the right) and hid the conversation. */
.hc-toasts.shifted{right:328px}
@media (max-width:760px){
  /* No room left to put them side by side: they move to the bottom, under the rail. */
  .hc-toasts.shifted{right:18px;top:auto;bottom:96px}
}
.hc-toast{background:var(--hc-panel);border:1px solid var(--hc-border-strong);border-left:3px solid var(--hc-cyan);border-radius:0 12px 12px 0;overflow:hidden;box-shadow:0 20px 50px -26px #000}
.hc-toast .b{padding:12px 13px}
.hc-toast .row{display:flex;gap:11px}
.hc-toast .nm{font-size:13px;color:var(--hc-text)}.hc-toast .nm b{color:var(--hc-cyan);font-weight:500}
.hc-toast .sub{font-size:11.5px;color:var(--hc-dim);margin-top:2px;line-height:1.45}
.hc-toast .acts{display:flex;gap:8px;margin-top:11px}
.hc-toast .acts button{flex:1;border-radius:8px;padding:8px;font-size:12px;font-weight:500;font-family:var(--hc-sans);cursor:pointer;border:1px solid var(--hc-border-strong);background:transparent;color:var(--hc-dim)}
.hc-toast .acts button.join{background:var(--hc-green);color:#04140a;border-color:var(--hc-green)}
.hc-toast .acts button:disabled{opacity:.4;cursor:not-allowed}
.hc-toast .note{font-size:10.5px;color:var(--hc-faint);margin-top:6px}

/* ------- modal (thanks + history) ------- */
.hc-modal{position:fixed;inset:0;z-index:1400;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:20px}
.hc-card{width:min(560px,100%);max-height:82vh;overflow:auto;background:var(--hc-panel);border:1px solid var(--hc-border-strong);border-radius:14px}
.hc-card .top{display:flex;align-items:center;gap:10px;padding:15px 17px;border-bottom:1px solid var(--hc-border)}
.hc-card .top h3{margin:0;font-size:16px;font-weight:500;color:var(--hc-text)}
.hc-card .top .ic{color:var(--hc-green)}
.hc-thanks{padding:20px 18px;text-align:center}
.hc-thanks .big{font-size:15px;color:var(--hc-text);margin:0 0 4px}
.hc-thanks .sub{font-size:12.5px;color:var(--hc-dim);margin:0 0 18px}
.hc-thanks .acts{display:flex;gap:10px;justify-content:center}
.hc-thanks .acts button{border-radius:9px;padding:9px 18px;font-size:13px;font-weight:500;font-family:var(--hc-sans);cursor:pointer;border:1px solid var(--hc-border-strong);background:transparent;color:var(--hc-dim)}
.hc-thanks .acts button.yes{background:var(--hc-green);color:#04140a;border-color:var(--hc-green)}

.hc-hbody{padding:14px 17px}
.hc-filters{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.hc-chip{font-family:var(--hc-mono);font-size:10.5px;color:var(--hc-dim);border:1px solid var(--hc-border);border-radius:999px;padding:3px 10px;cursor:pointer;background:none}
.hc-chip.on{color:#04140a;background:var(--hc-green);border-color:var(--hc-green)}
.hc-thread{display:grid;grid-template-columns:32px 1fr auto;gap:11px;align-items:center;padding:10px 2px;border-bottom:1px solid var(--hc-border)}
.hc-thread .nm{font-size:13px;font-weight:500;color:var(--hc-text)}
.hc-thread .sub{font-family:var(--hc-mono);font-size:10px;color:var(--hc-dim);margin-top:2px}
.hc-thread .right{text-align:right;font-family:var(--hc-mono);font-size:10px;color:var(--hc-faint)}
.hc-badge{font-family:var(--hc-mono);font-size:9px;letter-spacing:.02em;padding:2px 7px;border-radius:999px;border:1px solid}
.hc-b-ok{color:var(--hc-green);border-color:var(--hc-green-line);background:var(--hc-green-soft)}
.hc-b-no{color:var(--hc-red);border-color:rgba(226,84,74,.4);background:rgba(226,84,74,.1)}
.hc-b-role{color:var(--hc-cyan);border-color:var(--hc-cyan-soft);background:var(--hc-cyan-soft)}
.hc-empty{padding:24px;text-align:center;color:var(--hc-faint);font-size:12.5px}

@media(prefers-reduced-motion:reduce){.hc-layer *{animation:none!important}}
:root {
  --darkTheme-primary: #303030;
  --darkTheme-secondary: #252525;
  --darkTheme-third: #252525;

  --darkTheme-primary-text: #FFFFFF;
  --darkTheme-secondary-text: #e0e0e0;
  --darkTheme-third-text: var(--darkTheme-primary);

  --darkTheme-icons-primary: #FFFFFF;
  --darkTheme-icons-secondary: var(--darkTheme-third);

  --darkTheme-border-primary: var(--darkTheme-third);
  --darkTheme-border-secondary: var(--darkTheme-primary);

  --darkTheme-navbar: var(--darkTheme-third);

  --error-message: #c62828;
}
html {
  height: 100%;
}
#root {
  height: 100%;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--darkTheme-primary);
  color: var(--darkTheme-primary-text);
  height: 100%;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}