/* ============================================
   LESSON 25 — SPECIFIC STYLES
   Summary Completion
   ============================================ */

/* ── Word limit badge ── */
.l25-word-limit {
  display: inline-block;
  font-size: 1rem;
  color: var(--gold);
  background: rgba(201,168,76,.08);
  border: 1.5px solid rgba(201,168,76,.3);
  border-radius: 10px;
  padding: 4px 12px;
  margin-bottom: 20px;
}

/* ── Summary card ── */
.l25-summary {
  background: var(--bg-card-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 8px;
}

.l25-label {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 14px;
}

.l25-para {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.8;
  margin: 0 0 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.l25-para:last-child { margin-bottom: 0; }

/* ── Input field (inline) ── */
.l25-inp {
  padding: 5px 11px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  width: 130px;
  outline: none;
  transition: border-color .15s, background .15s;
}
.l25-inp:focus       { border-color: var(--gold); }
.l25-inp.l25-correct { border-color: var(--success); background: rgba(74,222,128,.07); color: var(--success); }
.l25-inp.l25-wrong   { border-color: var(--error);   background: rgba(248,113,113,.07); }

/* ── Inline explanation panels ── */
.l25-exp-inline {
  margin: 3px 0 10px 0;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: .97rem;
  line-height: 1.7;
  border: 1px solid var(--border);
}
.l25-exp-ok  { background: rgba(72,199,116,.08); border-color: var(--success); }
.l25-exp-err { background: rgba(255,100,100,.07); border-color: var(--error); }

/* ── Explanation ── */
.l25-exp-list { display: flex; flex-direction: column; gap: 8px; }
.l25-exp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-card-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  flex-wrap: wrap;
}
.l25-exp-word    { font-weight: 800; color: var(--text); font-size: 1rem; min-width: 90px; }
.l25-exp-arrow   { color: var(--gold); font-size: .97rem; }
.l25-exp-meaning { color: var(--text-muted); font-size: 1rem; }

/* ── Study Tip ── */
.l25-tip-box { display: flex; flex-direction: column; gap: 12px; }
.l25-tip-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 13px 16px;
  background: var(--bg-card-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
}
.l25-tip-icon  { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.l25-tip-title { font-weight: 700; color: var(--gold); margin-bottom: 4px; font-size: 1rem; }
.l25-tip-body  { color: var(--text-muted); font-size: .97rem; line-height: 1.55; margin: 0; }

/* ── Shake animation ── */
@keyframes l25-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}
.l25-shake { animation: l25-shake .4s ease; }