.st-stage { font-family: 'Nunito', system-ui, sans-serif; }

/* ---- Sorting key -------------------------------------------------------- */
.st-key {
    background: linear-gradient(180deg, #f3fdf6, #e9fbef);
    border: 1px solid #bbf7d0; border-radius: 12px;
    padding: 12px 16px; margin-bottom: 16px;
    box-shadow: 0 4px 12px -8px rgba(20, 83, 45, .4);
}
.st-key-label { font-weight: 800; color: #14532d; font-size: 13px; margin-bottom: 6px; }
.st-key-label i { margin-right: 5px; }
.st-key-list { margin: 0; padding-left: 22px; font-size: 14px; color: #166534; }
.st-key-list li { margin: 3px 0; font-weight: 700; }

/* ---- Groups ------------------------------------------------------------- */
.st-groups { display: grid; gap: 14px; margin-bottom: 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.st-groups.st-carroll { grid-template-columns: repeat(2, 1fr); }

.st-group {
    background: #ffffff; border: 1px solid #e2e8f0; border-top: 4px solid #6366f1;
    border-radius: 14px; padding: 12px;
    box-shadow: 0 6px 16px -10px rgba(15, 42, 80, .4);
}
.st-group h3 { font-size: 14px; font-weight: 800; margin: 0 0 9px; text-align: center; color: #312e81; }
.st-drop {
    min-height: 84px; border: 2px dashed #cbd5e1; border-radius: 10px; padding: 10px;
    display: flex; flex-wrap: wrap; gap: 9px; align-content: flex-start;
    background: #f8fafc;
    transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.st-drop.st-over {
    border-style: solid; border-color: #4338ca; background: #eef0ff;
    box-shadow: inset 0 0 0 3px rgba(67, 56, 202, .12);
}

/* ---- Cards to sort ------------------------------------------------------ */
.st-tray-wrap { margin-bottom: 12px; }
.st-tray-label {
    font-weight: 800; font-size: 12px; color: #64748b; margin-bottom: 7px;
    text-transform: uppercase; letter-spacing: .08em;
}
.st-tray {
    min-height: 56px; display: flex; flex-wrap: wrap; gap: 10px; padding: 12px;
    background: linear-gradient(180deg, #f1f5f9, #e7eef6);
    border: 1px dashed #cbd5e1; border-radius: 14px;
}

.st-card {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(180deg, #ffffff, #f3f7fb);
    border: 1.5px solid #cbd5e1; border-radius: 999px;
    padding: 9px 17px 9px 13px;
    font-weight: 800; font-size: 15px; color: #1f2a37;
    cursor: grab; user-select: none; touch-action: none;
    box-shadow: 0 2px 6px rgba(15, 42, 80, .14);
    transition: transform .12s ease, box-shadow .12s ease, border-color .14s ease, background .14s ease;
}
.st-card::before {
    content: '\f58e';                      /* fa-grip-vertical */
    font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 11px;
    color: #b3bdc9;
}
.st-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -6px rgba(15, 42, 80, .35); }
.st-card:active { cursor: grabbing; }
.st-card.st-dragging { opacity: .35; }
.st-card.st-correct {
    border-color: #16a34a; background: #f0fdf4; color: #14532d;
    animation: st-pop .26s ease;
}
.st-card.st-correct::before { color: #16a34a; }
.st-card.st-wrong {
    border-color: #dc2626; background: #fef2f2; color: #991b1b;
    animation: st-shake .4s ease;
}

@keyframes st-pop { 0% { transform: scale(.85); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes st-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-3px); } }

/* ---- Check / callout ---------------------------------------------------- */
.st-target-panel { display: flex; align-items: center; gap: 14px; }
.st-callout { font-weight: 800; }
.st-callout.is-correct { color: #15803d; }
.st-callout.is-miss { color: #b91c1c; }

.activity-container.display-mode .st-card { cursor: default; }