.termo-exercise{
  --exercise-accent:#6C3483;
  --exercise-accent-soft:#F3E8FF;
  --exercise-accent-border:#DDD6FE;
  --exercise-surface:#FFFFFF;
  --exercise-muted-surface:#F8FAFC;
  --exercise-border:#B8D8C4;
  --exercise-text:#27313F;
  --exercise-muted:#6D6258;
  --exercise-danger:#B03A2E;
  display:block;
  grid-column:1 / -1;
  width:100%;
  max-width:100%;
  min-width:0;
  background:var(--exercise-surface);
  border:1px solid var(--exercise-border);
  border-top:4px solid var(--exercise-accent);
  border-radius:22px;
  box-shadow:0 10px 28px rgba(0,0,0,0.06);
  padding:30px;
  overflow:hidden;
}

.termo-exercise[data-exercise-theme="blue"]{
  --exercise-accent:#2F6B4F;
  --exercise-accent-soft:#F0F7F3;
  --exercise-accent-border:#B8D8C4;
}

.termo-exercise[data-exercise-theme="green"]{
  --exercise-accent:#1E8449;
  --exercise-accent-soft:#EAF7EF;
  --exercise-accent-border:#CBE8D7;
}

.termo-exercise[data-exercise-theme="orange"]{
  --exercise-accent:#2F6B4F;
  --exercise-accent-soft:#F0F7F3;
  --exercise-accent-border:#B8D8C4;
}

.termo-exercise[data-exercise-theme="red"]{
  --exercise-accent:#B03A2E;
  --exercise-accent-soft:#FFF2F0;
  --exercise-accent-border:#F2C9C3;
}

.termo-exercise *,
.termo-exercise *::before,
.termo-exercise *::after{
  box-sizing:border-box;
}

.termo-exercise__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:16px;
  min-width:0;
}

.termo-exercise__title{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:"Inter",sans-serif;
  font-size:1.2rem;
  font-weight:800;
  color:var(--exercise-accent);
}

.termo-exercise__controls{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}

.termo-exercise__level{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.termo-exercise__level-label{
  font-family:"Inter",sans-serif;
  font-size:.95rem;
  font-weight:700;
  color:var(--exercise-muted);
}

.termo-exercise__select,
.termo-exercise__btn{
  min-height:42px;
  border-radius:10px;
  border:1px solid var(--exercise-border);
  padding:10px 14px;
  font-family:"Inter",sans-serif;
  font-size:.95rem;
}

.termo-exercise__select{
  min-width:140px;
  background:#FFFFFF;
  color:var(--exercise-text);
}

.termo-exercise__btn{
  background:#2F6B4F;
  color:#FFFFFF;
  font-weight:800;
  cursor:pointer;
  transition:transform .18s ease, background-color .18s ease, opacity .18s ease;
}

.termo-exercise__btn:hover:not(:disabled){
  transform:translateY(-1px);
  background:#234E3A;
}

.termo-exercise__btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.termo-exercise__btn--secondary{
  background:var(--exercise-accent-soft);
  color:var(--exercise-accent);
  border-color:var(--exercise-accent-border);
}

.termo-exercise__btn--secondary:hover:not(:disabled){
  background:#EADAFE;
}

.termo-exercise__btn--validation{
  background:#FFFFFF;
  color:var(--exercise-accent);
  border-color:var(--exercise-accent-border);
}

.termo-exercise__btn--validation:hover:not(:disabled){
  background:var(--exercise-accent-soft);
}

.termo-exercise__btn--validation-submit{
  background:var(--exercise-accent);
}

.termo-exercise__btn--validation-submit:hover:not(:disabled){
  background:#532B69;
}

.termo-exercise__disclaimer{
  background:#FFF8F6;
  border-left:4px solid var(--exercise-danger);
  border-radius:0 10px 10px 0;
  padding:14px 16px;
  margin-bottom:16px;
  font-family:"Lora",serif;
  line-height:1.65;
  color:var(--exercise-text);
}

.termo-exercise__save-status{
  margin-bottom:16px;
  border-radius:12px;
  padding:10px 14px;
  font-family:"Inter",sans-serif;
  font-size:.92rem;
  font-weight:600;
  line-height:1.45;
}

.termo-exercise__save-status.is-success{
  background:#EAF7EF;
  color:#1E8449;
  border:1px solid #CBE8D7;
}

.termo-exercise__save-status.is-warning{
  background:#FFF7E8;
  color:#A15C07;
  border:1px solid #B8D8C4;
}

.termo-exercise__save-status.is-error{
  background:#FFF2F0;
  color:#B03A2E;
  border:1px solid #F2C9C3;
}

.termo-exercise__memory-status{
  margin-bottom:16px;
  border-radius:12px;
  padding:10px 14px;
  font-family:"Inter",sans-serif;
  font-size:.9rem;
  font-weight:600;
  line-height:1.45;
}

.termo-exercise__memory-status.is-success{
  background:#EEF6FF;
  color:#2F6B4F;
  border:1px solid #B8D8C4;
}

.termo-exercise__memory-status.is-warning{
  background:#FFF7E8;
  color:#A15C07;
  border:1px solid #B8D8C4;
}

.termo-exercise__validation-tools{
  margin-top:16px;
}

.termo-exercise__validation-panel{
  margin-top:14px;
  border:1px solid var(--exercise-accent-border);
  background:linear-gradient(180deg, #FCFBFF 0%, #FFFFFF 100%);
  border-radius:18px;
  padding:18px;
}

.termo-exercise__validation-header{
  display:grid;
  gap:8px;
  margin-bottom:16px;
}

.termo-exercise__validation-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:"Inter",sans-serif;
  font-size:1rem;
  font-weight:800;
  color:var(--exercise-accent);
}

.termo-exercise__validation-copy{
  font-family:"Lora",serif;
  font-size:.98rem;
  line-height:1.6;
  color:var(--exercise-text);
}

.termo-exercise__validation-grid{
  display:grid;
  gap:14px;
}

.termo-exercise__validation-group{
  border:1px solid #E8EDF5;
  border-radius:14px;
  padding:14px;
  background:#FFFFFF;
}

.termo-exercise__validation-label{
  font-family:"Inter",sans-serif;
  font-size:.94rem;
  font-weight:800;
  color:var(--exercise-text);
  margin-bottom:10px;
}

.termo-exercise__validation-options{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.termo-exercise__validation-option{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:8px 12px;
  border:1px solid #D7E3F4;
  border-radius:999px;
  font-family:"Inter",sans-serif;
  font-size:.92rem;
  font-weight:700;
  color:var(--exercise-text);
  background:#F8FBFF;
}

.termo-exercise__validation-option input{
  margin:0;
}

.termo-exercise__validation-note-box{
  margin-top:12px;
}

.termo-exercise__validation-note{
  width:100%;
  border:1px solid #D7E3F4;
  border-radius:12px;
  padding:10px 12px;
  font-family:"Inter",sans-serif;
  font-size:.92rem;
  line-height:1.45;
  color:var(--exercise-text);
  resize:vertical;
  min-height:78px;
}

.termo-exercise__validation-actions{
  margin-top:14px;
}

.termo-exercise__validation-status{
  margin-top:14px;
  border-radius:12px;
  padding:10px 14px;
  font-family:"Inter",sans-serif;
  font-size:.92rem;
  font-weight:600;
  line-height:1.45;
}

.termo-exercise__validation-status.is-success{
  background:#EAF7EF;
  color:#1E8449;
  border:1px solid #CBE8D7;
}

.termo-exercise__validation-status.is-warning{
  background:#FFF7E8;
  color:#A15C07;
  border:1px solid #B8D8C4;
}

.termo-exercise__validation-status.is-error{
  background:#FFF2F0;
  color:#B03A2E;
  border:1px solid #F2C9C3;
}

.termo-exercise__body{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}

.termo-exercise__panel{
  background:var(--exercise-muted-surface);
  border:1px solid #E2E8F0;
  border-radius:16px;
  padding:18px 20px;
  overflow:hidden;
  color:var(--exercise-text);
  min-width:0;
}

.termo-exercise__panel-title{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
  font-family:"Inter",sans-serif;
  font-size:1rem;
  font-weight:800;
  color:var(--exercise-accent);
}

.termo-exercise__generated-title{
  min-width:0;
}

.termo-exercise__id-chip{
  display:inline-flex;
  align-items:center;
  border:1px solid color-mix(in srgb, var(--exercise-accent) 26%, #FFFFFF);
  border-radius:999px;
  background:#FFFFFF;
  color:var(--exercise-accent);
  font-family:"Inter",sans-serif;
  font-size:.72rem;
  font-weight:900;
  line-height:1;
  padding:6px 9px;
  letter-spacing:.02em;
}

.termo-exercise__panel-title--solution{
  color:#2F6B46;
}

.termo-exercise__content{
  font-family:"Lora",serif;
  font-size:1rem;
  line-height:1.75;
  color:var(--exercise-text);
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.termo-exercise__content p{
  margin:0 0 14px;
}

.termo-exercise__content p:last-child{
  margin-bottom:0;
}

.termo-exercise__content strong{
  font-weight:700;
}

.termo-exercise__math-block{
  margin:14px 0 18px;
  padding:6px 0;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  max-width:100%;
  -webkit-overflow-scrolling:touch;
}

.termo-exercise__solution{
  display:none;
  background:#E8F5EC;
  border-color:#CBE8D7;
}

.termo-exercise__placeholder{
  color:var(--exercise-muted);
}

.termo-exercise__panel mjx-container:not([display="true"]){
  display:inline-block;
  max-width:100%;
  overflow:visible;
  vertical-align:baseline;
}

.termo-exercise__math-block mjx-container[display="true"],
.termo-exercise__panel mjx-container[display="true"]{
  display:block;
  width:100%;
  max-width:100%;
  margin:0.4rem 0 !important;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}

.termo-exercise__math-block mjx-container{
  padding:2px 0;
}

.termo-exercise__content .MathJax,
.termo-exercise__content .mjx-chtml,
.termo-exercise__content svg,
.termo-exercise__content img,
.termo-exercise__content table,
.termo-exercise__content pre,
.termo-exercise__content code{
  max-width:100%;
}

.termo-exercise__content table,
.termo-exercise__content pre{
  display:block;
  overflow-x:auto;
  overflow-y:hidden;
}

@media (max-width:700px){
  .termo-exercise{
    padding:18px;
    border-radius:18px;
  }

  .termo-exercise__controls{
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }

  .termo-exercise__title{
    font-size:1.08rem;
  }

  .termo-exercise__level,
  .termo-exercise__select,
  .termo-exercise__btn{
    width:100%;
  }

  .termo-exercise__panel{
    padding:16px 14px;
    border-radius:14px;
  }

  .termo-exercise__content{
    font-size:.98rem;
    line-height:1.68;
  }

  .termo-exercise__math-block{
    margin:12px 0 16px;
    padding:4px 0;
    font-size:.92em;
  }

  .termo-exercise__math-block mjx-container[display="true"]{
    margin:.25rem 0 !important;
  }

  .termo-exercise__validation-panel{
    padding:16px 14px;
    border-radius:16px;
  }

  .termo-exercise__validation-option{
    width:100%;
    justify-content:flex-start;
  }
}