:root{
  --ok: rgba(34,197,94,0.12);
  --ok-stroke: rgba(34,197,94,0.55);
  --bad: rgba(156,163,175,0.18);
  --bad-stroke: rgba(156,163,175,0.85);
}

/* --- Hero: grade picker reuse --- */
.gradePick{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
  width:min(560px,100%);
  margin: 6px auto 2px;
}
@media (max-width:520px){
  .gradePick{grid-template-columns:repeat(2, minmax(0,1fr));}
}

.gradeBtn{
  appearance:none;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.85);
  border-radius:16px;
  padding:12px 10px;
  font-weight:800;
  cursor:pointer;
  transition:transform .06s, border-color .15s, box-shadow .15s, background .15s;
}
.gradeBtn:hover{transform:translateY(-1px); border-color:rgba(29,25,180,.35); box-shadow:0 10px 24px rgba(29,25,180,.06)}
.gradeBtn.is-active{border-color:rgba(29,25,180,.55); background:linear-gradient(180deg, rgba(246,247,255,.95), rgba(237,231,255,.75));}

/* --- Indicator additions --- */
.task-pill{
  border:1px solid rgba(15,23,42,.12);
  border-radius:999px;
  padding:10px 12px;
  font-weight:800;
  font-size: var(--fs-small);
  background: rgba(255,255,255,.70);
}

/* --- Task common --- */
.taskWrap{display:flex; flex-direction:column; gap:14px;}
.taskActions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.taskActions .btn{border-radius:999px; padding:12px 16px;}

/* --- Math Sign Task --- */
.mathRow {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 24px 14px;
  border: 1px solid rgba(227,230,239,.95);
  border-radius: 18px;
  background: #fff;
  font-size: 32px;
  font-weight: 900;
}

.mathToken {
  color: #0f172a;
}

.signSlot {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 2px dashed rgba(15,23,42,.18);
  background: rgba(15,23,42,.02);
  display: grid;
  place-items: center;
  font-size: 32px;
  color: var(--brand);
}
.signSlot.is-over{border-color:rgba(29,25,180,.55); background: rgba(109,102,255,.08);}
.signSlot.is-filled{border-style:solid; border-color:rgba(227,230,239,.95); background: #fff;}

.signBank {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 16px;
  border: 1px dashed rgba(29,25,180,.20);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(246,247,255,.75), rgba(255,255,255,.92));
}

.signChip {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid rgba(227,230,239,.95);
  border-radius: 14px;
  font-size: 28px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(13,17,51,.04);
  user-select: none;
  transition: transform .1s, box-shadow .1s;
}
.signChip:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(13,17,51,.08); }
.signChip.is-selected { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(109,102,255,.2); }
.signChip[aria-disabled="true"] { opacity: 0.6; cursor: default; pointer-events: none; }

/* --- Text Choice Task --- */
.textOptions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.textOptBtn {
  appearance: none;
  background: #fff;
  border: 1px solid rgba(227,230,239,.95);
  border-radius: 16px;
  padding: 16px 20px;
  text-align: left;
  font-size: var(--fs-body);
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  transition: all .15s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}
.textOptBtn:hover {
  border-color: rgba(29,25,180,.35);
  background: rgba(246,247,255,.5);
}
.textOptBtn.is-picked {
  border-color: var(--brand);
  background: rgba(29,25,180,.04);
  box-shadow: 0 0 0 1px var(--brand);
}
.textOptBtn .marker {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(15,23,42,.15);
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.textOptBtn.is-picked .marker {
  border-color: var(--brand);
  background: var(--brand);
}
.textOptBtn.is-picked .marker::after {
  content: "";
  width: 8px; height: 8px;
  background: #fff;
  border-radius: 50%;
}

/* --- Feedback --- */
.taskFeedback{
  border:1px solid rgba(227,230,239,.95);
  border-radius:18px;
  padding:12px 14px;
  background:#fff;
  margin-top:14px;
}
.taskFeedback.ok{border-color:var(--ok-stroke); background:var(--ok); color:#111827;}
.taskFeedback.bad{border-color:var(--bad-stroke); background:var(--bad); color:#111827;}

/* --- Reused from Patterns (Odd One / Seq) --- */
.oddGrid { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
@media (max-width:520px){ .oddGrid{grid-template-columns:repeat(3, 1fr);} }
.oddBtn {
  background:#fff; border:1px solid rgba(227,230,239,.95);
  border-radius:18px; padding:14px; font-size:26px; font-weight:900; cursor:pointer;
  transition: .15s;
}
.oddBtn:hover{transform:translateY(-1px); border-color:rgba(29,25,180,.35);}
.oddBtn.is-picked{border-color:rgba(29,25,180,.55); box-shadow:0 10px 24px rgba(29,25,180,.1);}

/* Seq styles need simple adaptation if we use emojis */
.seqRow {
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:14px;
  border:1px solid rgba(227,230,239,.95); border-radius:18px; background:#fff;
}
.seqToken {
  width:56px; height:56px; border-radius:16px; border:1px solid rgba(227,230,239,.95);
  background:rgba(15,23,42,.02); display:grid; place-items:center; font-size:26px;
}
.dropSlot {
  min-width:56px; height:56px; border-radius:16px; border:1px dashed rgba(15,23,42,.18);
  display:grid; place-items:center; background:rgba(255,255,255,.85);
}
.dropSlot.is-filled { border-style:solid; border-color:rgba(227,230,239,.95); }
.emojiChip {
  width:48px; height:48px; background:#fff; border-radius:12px; border:1px solid #e3e6ef;
  display:grid; place-items:center; font-size:24px; cursor:pointer; user-select:none;
}
.bank {
  display:flex; gap:10px; padding:12px; border:1px dashed rgba(29,25,180,.2);
  border-radius:18px; background:rgba(246,247,255,.75);
}

/* --- MOBILE PATCH --- */
@media (max-width: 480px) {
  /* Математика: зменшуємо шрифт та фішки */
  .mathRow {
    font-size: 24px;
    gap: 8px;
    padding: 16px 8px;
  }
  .signSlot, .signChip, .mathToken {
    width: 42px;
    height: 42px;
    font-size: 22px;
    border-radius: 12px;
  }
  .signBank {
    gap: 8px;
    padding: 12px;
  }

  /* Текст: трохи компактніше */
  .textOptBtn {
    padding: 12px 14px;
    font-size: 15px;
    gap: 10px;
  }
  .textOptBtn .marker {
    width: 20px; height: 20px;
  }
  
  /* Зайвий елемент: 2 колонки замість 3, щоб вміщались слова */
  .oddGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .oddBtn {
    font-size: 18px; /* Менший шрифт для довгих слів */
    padding: 12px 6px;
  }

  /* Послідовності */
  .seqRow {
    padding: 10px;
    gap: 6px;
    justify-content: center;
  }
  .seqToken, .dropSlot {
    width: 44px; height: 44px;
    font-size: 22px;
    border-radius: 12px;
    min-width: 44px;
  }
  .emojiChip {
    width: 42px; height: 42px;
    font-size: 20px;
  }
}