/* ---------- Theory card ---------- */
.theory-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  padding: 32px 36px 28px;
  margin-bottom: 20px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

/* Gradient left accent bar */
.theory-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 50%, #4f46e5 100%);
  border-radius: 0;
}

/* Subtle colored corner tint */
.theory-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 200px; height: 100px;
  background: radial-gradient(ellipse at 0% 0%, rgba(109,40,217,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.theory-card-header { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 22px; }

.step-num-circle {
  width: 44px; height: 44px; border-radius: 13px; flex: 0 0 44px;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800;
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(109,40,217,0.38);
  letter-spacing: -0.03em;
}

.theory-card-titles { flex: 1; }
.step-kicker {
  font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent-violet); font-weight: 700; margin-bottom: 5px;
}
.theory-card h2 {
  margin: 0; font-size: 23px; font-weight: 800; letter-spacing: -0.03em;
  background: var(--heading-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.25;
}

.theory-body { font-size: 15px; line-height: 1.78; color: var(--text-2); }
.theory-body p { margin: 0 0 14px; }
.theory-body strong { color: var(--text-0); font-weight: 700; }

.theory-body code, .task code, .hint-box code {
  font-family: var(--mono); font-size: .86em;
  background: #f5f3ff;
  border: 1px solid rgba(109,40,217,0.18);
  padding: 1px 6px; border-radius: 5px;
  color: var(--accent-violet);
}
.theory-body ul { margin: 0 0 14px; padding-left: 20px; }
.theory-body li { margin-bottom: 6px; }

.ref-snippet {
  font-family: var(--mono); font-size: 13px; line-height: 1.72;
  background: var(--ed-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 14px 18px; margin: 12px 0 16px;
  color: var(--fg); overflow-x: auto; white-space: pre;
}
.ref-snippet .k { color: var(--kw); } .ref-snippet .m { color: var(--meth); }
.ref-snippet .f { color: var(--field); } .ref-snippet .c { color: var(--cmt); }

/* Task box */
.task {
  margin-top: 18px; padding: 14px 18px;
  background: rgba(109,40,217,0.10);
  border: 1px solid rgba(167,139,250,0.38);
  border-radius: var(--r-md);
  font-size: 14.5px; line-height: 1.6;
}
.task .task-label { font-weight: 800; color: var(--accent-sky); margin-right: 6px; }

/* Feedback */
.feedback {
  margin-top: 14px; padding: 12px 18px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 600; line-height: 1.55;
  animation: fadeSlide .25s ease;
}
.feedback.ok {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #14532d;
}
.feedback.err {
  background: #fff1f2;
  border: 1px solid #fda4af;
  color: #9f1239;
  animation: fadeSlide .25s ease, shake .35s ease;
}

/* Hint box */
.hint-box {
  margin-top: 12px; padding: 12px 18px; border-radius: var(--r-md);
  background: #f5f3ff;
  border: 1px solid rgba(109,40,217,0.2);
  color: var(--text-1); font-size: 14px; line-height: 1.6;
  animation: fadeSlide .25s ease;
}
.hint-box b { color: var(--accent-violet); }

/* ---------- Controls / Buttons ---------- */
.controls { display: flex; align-items: center; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.controls .spacer { flex: 1; }

.btn {
  font-family: var(--ui); font-size: 13.5px; font-weight: 700;
  padding: 10px 22px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid rgba(226,232,240,0.18);
  background: #ffffff; color: var(--text-1);
  transition: all .2s cubic-bezier(.2,.8,.4,1);
  white-space: nowrap; letter-spacing: -0.01em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.btn:hover:not(:disabled) {
  border-color: rgba(109,40,217,0.25);
  background: #faf8ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(109,40,217,0.12);
}
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--accent-indigo); outline-offset: 2px; }

.btn.primary {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border-color: transparent; color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(124,58,237,0.38), 0 1px 4px rgba(0,0,0,0.1);
}
.btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124,58,237,0.48);
}

.btn.success {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  border-color: transparent; color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(5,150,105,0.32), 0 1px 4px rgba(0,0,0,0.1);
}
.btn.success:hover:not(:disabled) {
  background: linear-gradient(135deg, #34d399, #10b981);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(5,150,105,0.45);
}

.btn.ghost {
  background: transparent;
  border-color: rgba(124,58,237,0.22);
  color: #5b21b6;
  box-shadow: none;
}
.btn.ghost:hover:not(:disabled) {
  background: #faf8ff;
  border-color: rgba(124,58,237,0.36);
  color: #4c1d95;
}

.btn.outline-accent {
  background: #ffffff;
  border-color: rgba(124,58,237,0.32);
  color: #5b21b6;
  box-shadow: none;
}
.btn.outline-accent:hover:not(:disabled) {
  background: rgba(124,58,237,0.10);
  border-color: #7c3aed;
  box-shadow: 0 4px 14px rgba(109,40,217,0.15);
}

/* ---------- Diagram ---------- */
.diagram { margin: 24px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 0; }

.dg-class {
  width: min(320px, 100%);
  border: 2px solid rgba(109,40,217,0.25);
  border-radius: var(--r-md);
  background: #ffffff;
  overflow: hidden; font-family: var(--mono);
  box-shadow: 0 4px 24px rgba(109,40,217,0.12);
}
.dg-class .dg-title {
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  color: var(--accent-violet);
  font-weight: 700; text-align: center;
  padding: 10px 14px; font-size: 14.5px;
  border-bottom: 1px solid rgba(109,40,217,0.12);
  letter-spacing: .02em;
}
.dg-class .dg-title .dg-tag { display: block; font-size: 9.5px; color: var(--text-3); font-weight: 400; letter-spacing: .18em; }
.dg-sec { padding: 10px 18px; font-size: 12.5px; line-height: 1.85; color: var(--text-2); }
.dg-sec + .dg-sec { border-top: 1px solid rgba(226,232,240,0.14); }
.dg-sec .dg-h { font-size: 9.5px; letter-spacing: .18em; color: var(--text-3); font-family: var(--ui); font-weight: 700; }
.dg-sec .k { color: #7c3aed; } .dg-sec .f { color: #7c3aed; } .dg-sec .m { color: #a78bfa; }

.dg-arrows { display: flex; gap: 120px; margin: 4px 0; }
.dg-arrow { display: flex; flex-direction: column; align-items: center; color: var(--text-3); }
.dg-arrow .dg-new {
  font-family: var(--mono); font-size: 11px; color: #7c3aed;
  background: #f5f3ff; border: 1px solid rgba(109,40,217,0.2);
  padding: 1px 8px; border-radius: var(--r-pill); margin: 6px 0 2px;
}
.dg-arrow .dg-line { width: 2px; height: 22px; background: linear-gradient(rgba(109,40,217,0.2), rgba(109,40,217,0.45)); }
.dg-arrow .dg-tip { font-size: 12px; line-height: 1; color: rgba(109,40,217,0.4); margin-top: -2px; }

.dg-objects { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.dg-obj {
  border: 2px solid rgba(5,150,105,0.25);
  border-radius: var(--r-md);
  background: #ffffff;
  font-family: var(--mono); font-size: 12.5px;
  min-width: 190px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(5,150,105,0.10);
}
.dg-obj .dg-title {
  background: linear-gradient(135deg, rgba(74,222,128,0.13), #dcfce7);
  color: #059669;
  font-weight: 700; text-align: center;
  padding: 8px 10px; border-bottom: 1px solid rgba(5,150,105,0.12); font-size: 13px;
}
.dg-obj .dg-title .dg-tag { display: block; font-size: 9.5px; color: var(--text-3); font-weight: 400; letter-spacing: .18em; }
.dg-obj .dg-body { padding: 8px 16px; line-height: 1.85; color: var(--text-2); }
.dg-obj .s { color: #a78bfa; } .dg-obj .n { color: #7c3aed; } .dg-obj .f { color: #7c3aed; }
.dg-caption { margin-top: 14px; font-size: 12.5px; color: var(--text-3); text-align: center; font-style: italic; }


/* ---------- Drill mode ---------- */
.drill-trigger-area {
  display: flex; justify-content: center;
  margin-top: 20px; margin-bottom: 4px;
}
.drill-trigger-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ui); font-size: 13.5px; font-weight: 700;
  background: #ffffff;
  border: 2px solid rgba(109,40,217,0.22);
  color: var(--accent-violet);
  border-radius: var(--r-pill); padding: 10px 24px;
  cursor: pointer; transition: all .2s;
  box-shadow: 0 2px 10px rgba(109,40,217,0.10);
}
.drill-trigger-btn:hover {
  background: #f5f3ff;
  border-color: var(--accent-violet);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(109,40,217,0.22);
}
.drill-trigger-btn.dominated {
  background: rgba(74,222,128,0.13);
  border-color: rgba(5,150,105,0.3);
  color: #059669;
}

.drill-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(135deg, #7c3aed, #7c3aed);
  color: #ffffff; border-radius: 5px; padding: 2px 8px;
}
.drill-badge.mode-badge {
  background: linear-gradient(135deg, #7c3aed, #7c3aed);
  font-size: 10px; padding: 2px 8px; border-radius: 5px;
}
.drill-badge.dominated-badge { background: linear-gradient(135deg, #10b981, #059669); }

/* Drill streak bar */
.drill-streak-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  background: #f5f3ff;
  border-bottom: 1px solid rgba(109,40,217,0.10);
  font-family: var(--ui); font-size: 13px; font-weight: 600;
}
.streak-circles { display: flex; gap: 5px; }
.streak-circle {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(226,232,240,0.18);
  background: transparent; transition: all .3s cubic-bezier(.2,1.4,.4,1);
}
.streak-circle.filled {
  background: var(--accent-violet);
  border-color: var(--accent-violet);
  box-shadow: 0 0 10px rgba(109,40,217,0.45);
}
.streak-label { color: var(--text-3); font-size: 12px; }
.streak-label strong { color: var(--accent-violet); }

/* Drill exit */
.drill-exit-btn {
  margin-left: auto; display: flex; align-items: center; gap: 5px;
  font-family: var(--ui); font-size: 12px; font-weight: 600;
  background: #ffffff; border: 1px solid rgba(226,232,240,0.18);
  color: var(--text-3); border-radius: 6px; padding: 4px 10px; cursor: pointer;
  transition: all .15s;
}
.drill-exit-btn:hover { background: #f5f3ff; color: var(--text-1); border-color: rgba(109,40,217,0.2); }

/* Drill feedback */
.drill-feedback {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 600; line-height: 1.4;
  margin: 12px 0 0; animation: fadeSlide .25s ease;
}
.drill-feedback.ok { background: rgba(74,222,128,0.13); border: 1px solid #4ade80; color: #bbf7d0; }
.drill-feedback.err { background: rgba(244,63,94,0.12); border: 1px solid #f43f5e; color: #fecdd3; animation: fadeSlide .25s ease, shake .35s ease; }

/* Dominated overlay */
.dominated-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(245,243,255,0.94);
  backdrop-filter: blur(8px);
  z-index: 10; flex-direction: column; gap: 12px;
  animation: fadeSlide .3s ease;
}
.dominated-overlay .dom-emoji { font-size: 48px; animation: bounceIn .7s ease; }
.dominated-overlay h3 { margin: 0; font-size: 22px; font-weight: 800; color: #059669; }
.dominated-overlay p { margin: 0; font-size: 14px; color: var(--text-2); }

/* Confetti */
.confetti-dot {
  position: absolute; width: 7px; height: 7px; border-radius: 2px;
  animation: confettiFall 1s ease-out forwards; pointer-events: none;
}
@keyframes confettiFall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(120px) rotate(360deg); opacity: 0; }
}