/**
 * @learnature/shared UI Styles v1.0.0
 * Companion to learnature-shared.js — provides base UI component styles.
 */

/* ── Feedback Toast ────────────────────────────────── */
.ln-feedback-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  color: #fff;
  z-index: 9999;
  transition: opacity 0.3s ease;
}

/* ── Score Panel ───────────────────────────────────── */
.ln-score-panel {
  display: flex;
  justify-content: space-around;
  padding: 0.75rem;
  background: rgba(255,255,255,0.15);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}

.ln-score-item {
  text-align: center;
  color: #fff;
}

.ln-score-item .label { font-size: 0.75rem; opacity: 0.8; }
.ln-score-item .value { font-size: 1.25rem; font-weight: 700; }

/* ── Progress Ring ─────────────────────────────────── */
.ln-progress-ring {
  display: inline-block;
  position: relative;
}

.ln-progress-ring svg { transform: rotate(-90deg); }

.ln-progress-ring .track { fill: none; stroke: rgba(255,255,255,0.2); }
.ln-progress-ring .fill { fill: none; stroke: #4caf50; stroke-linecap: round; transition: stroke-dashoffset 0.5s ease; }