:root{
  --bg:#0b0d10;
  --panel:#12151a;
  --panel-2:#1a1f27;
  --text:#e8eef7;
  --muted:#a7b4c6;
  --accent:#6aa6ff;
  --accent-2:#59d1b8;
  --warn:#ffb86b;
  --bad:#ff6b6b;
  --good:#2ecc71;
  --soft:#2a3140;
  --shadow: 0 10px 30px rgba(0,0,0,.3);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text); background:linear-gradient(180deg, #0b0d10, #0e1116 40%, #0b0d10);
}

.app-header{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:20px clamp(16px, 5vw, 36px);
  border-bottom:1px solid #1b222e;
}
.app-header h1{ margin:0; font-size: clamp(20px, 3.2vw, 30px); }
.uploader{
  display:flex; gap:8px; align-items:center; margin-left:auto; flex-wrap:wrap;
}
.file-label{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none;
  padding:10px 14px; border-radius:14px; background:var(--panel-2); border:1px solid #283041; box-shadow:var(--shadow);
}
.file-label input{ display:none; }
.file-label span{ color:var(--muted); }
.ghost{ background:transparent; color:var(--muted); border:1px dashed #2b3547; padding:10px 12px; border-radius:12px; }
.meta{ display:flex; gap:16px; flex-wrap:wrap; color:var(--muted); }

.controls{ padding:16px clamp(16px, 5vw, 36px); border-bottom:1px solid #1b222e; }
.control-row{ display:flex; gap:12px 24px; align-items:center; flex-wrap:wrap; margin:6px 0; }
label select{ background:var(--panel-2); color:var(--text); border:1px solid #2b3547; border-radius:10px; padding:8px 10px; }
button{ border:0; border-radius:12px; padding:10px 14px; background:var(--accent); color:#0b0d10; font-weight:700; cursor:pointer; box-shadow:var(--shadow); }
button.primary{ background:var(--accent); }
button.warn{ background:var(--warn); color:#101317; }
button:disabled{ background:#CBD5E1 !important; color:#64748B !important; border-color:transparent !important; opacity:1 !important; cursor:not-allowed !important; box-shadow:none !important; filter:none !important; }
.progress{ display:flex; align-items:center; gap:12px; margin-left:auto; }
.progress .bar{ width:220px; height:10px; background:#1c232f; border-radius:999px; overflow:hidden; }
#progressBar{ height:100%; width:0%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); }

.hidden{ display:none; }
#main.hidden{ display:none; }
.card{
  margin:24px auto; padding:24px; width:min(1100px, 92vw);
  background:radial-gradient(1200px 600px at 10% -30%, #111723 0%, #0d121a 50%, #0b0d10 100%);
  border:1px solid #1f2634; border-radius:22px; box-shadow:var(--shadow);
}
.badge-row{ display:flex; gap:8px; }
.badge{ display:inline-block; background:var(--accent-2); color:#0d121a; font-weight:800; border-radius:999px; padding:4px 10px; }
.badge.soft{ background:#233046; color:#bcd1ff; }

h2{ margin:12px 0 6px; font-size: clamp(18px, 2.4vw, 24px); }
.scenario{ color:var(--muted); margin:0 0 8px; }

.columns{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-top:12px; }
@media (max-width:900px){ .columns{ grid-template-columns: 1fr; } }

.list{ list-style:none; padding:10px; margin:8px 0 0; min-height:150px;
  background:var(--panel); border:1px solid #202634; border-radius:16px; }
.list li{
  background:var(--panel-2); border:1px solid #2b3547; border-radius:12px;
  padding:10px 12px; margin:8px; display:flex; align-items:center; gap:10px;
  user-select:none; box-shadow:var(--shadow);
}
.list li .grab{ font-weight:900; opacity:.5; }
.list.order li.correct{ outline:2px solid var(--good); }
.list.order li.wrong{ outline:2px solid var(--bad); }
.list.order li .index{ width:26px; height:26px; border-radius:8px; background:#2a3243; color:#cfe0ff; display:grid; place-items:center; font-weight:900; }

.hint{ color:#99a7bb; font-size:13px; margin-top:6px; }
.actions{ display:flex; gap:10px; margin-top:14px; }
.feedback{ margin-top:14px; padding:12px 14px; border-radius:14px; background:#13201b; color:#b6f3d6; border:1px solid #23412f; }
.feedback.bad{ background:#2b171a; color:#ffd3d6; border-color:#4b2227; }
.rationale{ margin-top:10px; }
.rationale summary{ cursor:pointer; color:#bcd1ff; }

/* ── Slot zones (v2 — numbered drop positions) ── */
.bl-slot {
  min-height: 52px;
  margin: 6px 0;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1.5px dashed rgba(106, 166, 255, .22);
  background: rgba(255,255,255,.015);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.bl-slot:hover { border-color: rgba(106, 166, 255, .5); background: rgba(106, 166, 255, .04); }
.bl-slot.drag-over { border-color: var(--accent); background: rgba(106, 166, 255, .08); }
.bl-slot.slot-correct { border-color: var(--good); border-style: solid; }
.bl-slot.slot-wrong   { border-color: var(--bad);  border-style: solid; }
.slot-label {
  min-width: 26px; height: 26px; border-radius: 50%;
  background: rgba(106, 166, 255, .15);
  border: 1px solid rgba(106, 166, 255, .3);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 800;
  color: var(--accent); flex-shrink: 0;
}
.slot-empty-hint {
  font-size: .75rem; color: rgba(255,255,255,.22);
  font-style: italic; pointer-events: none;
}

/* ── Draggable items (bank + in-slot) ── */
.bl-item {
  background: var(--panel-2);
  border: 1px solid #2b3547;
  border-radius: 12px;
  padding: 10px 12px;
  margin: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  cursor: grab;
  box-shadow: var(--shadow);
  width: calc(100% - 16px);
}
.bl-slot .bl-item {
  margin: 0;  /* no margin when inside a slot */
  flex: 1;    /* fill remaining slot width */
  width: auto;
}
.bl-item:active { cursor: grabbing; }
.bl-item.selected {
  outline: 2px solid var(--accent);
  background: rgba(106, 166, 255, .1);
}
.bl-item.ghost { opacity: .35; }
.bl-item .grab { font-weight: 900; opacity: .5; }

.app-footer{
  display:flex; align-items:center; gap:12px; padding:16px clamp(16px, 5vw, 36px);
  border-top:1px solid #1b222e; color:var(--muted);
}
.app-footer .spacer{ flex:1; }
.tiny{ font-size:12px; opacity:.8; }