: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 --- */
.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));}

.brandMark{
  width:56px; height:56px;
  display:grid; place-items:center;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(135deg, rgba(79,70,229,.10), rgba(37,99,235,.10));
  font-weight:900;
  color:rgba(29,25,180,.80);
  letter-spacing:.06em;
}

/* --- 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;}
.taskMeta{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.metaChip{
  border:1px solid rgba(227,230,239,.95);
  background:#fff;
  border-radius:999px;
  padding:8px 10px;
  font-weight:800;
  font-size: var(--fs-small);
}

.taskActions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.taskActions .btn{border-radius:999px; padding:12px 16px;}
.hintLine{color:var(--muted); font-size: var(--fs-small);}

/* --- Emoji chips / bank --- */
.bank{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  padding:12px;
  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));
}

.emojiChip{
  appearance:none;
  border:1px solid rgba(227,230,239,.95);
  background:#fff;
  border-radius:16px;
  padding:10px 12px;
  cursor:pointer;
  font-size:26px;
  line-height:1;
  box-shadow:0 10px 26px rgba(13,17,51,.06);
  transition:transform .06s, border-color .15s, box-shadow .15s;
  user-select:none;
}
.emojiChip:hover{transform:translateY(-1px); border-color:rgba(29,25,180,.35); box-shadow:0 14px 30px rgba(29,25,180,.08)}
.emojiChip:active{transform:translateY(0px)}
.emojiChip.is-selected{border-color:rgba(29,25,180,.55); box-shadow:0 18px 44px rgba(29,25,180,.14)}
.emojiChip[aria-disabled="true"]{opacity:.55; cursor:not-allowed;}

.dropSlot{
  min-width:62px;
  height:56px;
  border-radius:16px;
  border:1px dashed rgba(15,23,42,.18);
  background: rgba(255,255,255,.85);
  display:grid;
  place-items:center;
  position:relative;
}
.dropSlot.is-over{border-color:rgba(29,25,180,.55); background: rgba(109,102,255,.08);}
.dropSlot.is-filled{border-style:solid; border-color:rgba(227,230,239,.95);}

.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{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  border-radius:16px;
  border:1px solid rgba(227,230,239,.95);
  background: rgba(15,23,42,.02);
  font-size:26px;
}

/* --- Sorting --- */
.sortGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
@media (max-width:720px){
  .sortGrid{grid-template-columns:1fr;}
}

.sortCol{
  border:1px solid rgba(227,230,239,.95);
  border-radius:18px;
  padding:12px;
  background:#fff;
  min-height:160px;
}
.sortHead{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}
.sortTitle{font-weight:900;}
.sortBox{
  min-height:110px;
  border:1px dashed rgba(15,23,42,.16);
  border-radius:16px;
  padding:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-start;
  background: rgba(15,23,42,.02);
}
.sortBox.is-over{border-color:rgba(29,25,180,.55); background: rgba(109,102,255,.08);}

/* --- Numeric input --- */
.numLine{
  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;
}
.numTok{
  border:1px solid rgba(227,230,239,.95);
  border-radius:16px;
  padding:12px 14px;
  font-weight:900;
  min-width:56px;
  text-align:center;
  background: rgba(15,23,42,.02);
}
.numInput{
  border:1px solid rgba(227,230,239,.95);
  border-radius:16px;
  padding:12px 14px;
  font-weight:900;
  width:120px;
  font-size:18px;
  outline:none;
}
.numInput:focus{border-color:rgba(29,25,180,.45); box-shadow:0 0 0 4px rgba(109,102,255,.14)}

/* --- Odd one out --- */
.oddGrid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
}
@media (max-width:520px){
  .oddGrid{grid-template-columns:repeat(3, minmax(0,1fr));}
}

.oddBtn{
  appearance:none;
  border:1px solid rgba(227,230,239,.95);
  background:#fff;
  border-radius:18px;
  padding:14px 10px;
  cursor:pointer;
  font-weight:900;
  font-size:26px;
  transition:transform .06s, border-color .15s, box-shadow .15s;
}
.oddBtn:hover{transform:translateY(-1px); border-color:rgba(29,25,180,.35); box-shadow:0 10px 24px rgba(29,25,180,.06)}
.oddBtn.is-picked{border-color:rgba(29,25,180,.55); box-shadow:0 18px 44px rgba(29,25,180,.14)}

/* --- 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;}


/* --- No text selection on emoji/cards --- */
.emojiChip,
.seqToken,
.dropSlot,
.numTok,
.oddBtn,
.question-tile{
  user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
}