#ccseo-gamify { margin: 16px 0 24px; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.ccseo-gamify__card {
  border: 1px solid #e5e7eb; border-radius: 16px; padding: 14px 16px; box-shadow: 0 2px 8px rgba(0,0,0,.05);
  background: #fff;
}
.ccseo-gamify__row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; align-items: center; }
.ccseo-gamify__label { font-size: 12px; color: #6b7280; text-transform: uppercase; letter-spacing: .06em; }
.ccseo-gamify__level { font-size: 28px; font-weight: 700; color: #262626; }
.ccseo-gamify__xp { font-weight: 600; margin: 2px 0 6px; }
.ccseo-gamify__bar { height: 8px; background: #f3f4f6; border-radius: 999px; overflow: hidden; }
.ccseo-gamify__bar > div { height: 100%; width: 0%; background: #ddb83d; transition: width .4s ease; }
.ccseo-gamify__streak, .ccseo-gamify__count { font-weight: 700; font-size: 18px; }

.ccseo-gamify__badges { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.ccseo-badge {
  font-size: 12px; padding: 6px 10px; border-radius: 999px; background: #f9fafb; border: 1px solid #e5e7eb; color:#262626;
}
.ccseo-badge--empty { opacity: .7; font-style: italic; }

/* Toasts */
.ccseo-toast { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 9999; }
.ccseo-toast__item {
  transform: translateY(10px); opacity: 0; transition: transform .25s ease, opacity .25s ease;
  background: #262626; color: #fff; padding: 10px 12px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.ccseo-toast__item.show { transform: translateY(0); opacity: 1; }

@media (max-width: 720px) {
  .ccseo-gamify__row { grid-template-columns: repeat(2, minmax(0,1fr)); }
}