@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

#mdpp-root * { box-sizing: border-box; margin: 0; padding: 0; }
#mdpp-root {
  font-family: 'Sora', sans-serif;
  background: #0a0e1a;
  color: #f1f5f9;
  min-height: 80vh;
  border-radius: 16px;
  overflow: hidden;
}
#mdpp-root button  { cursor: pointer; font-family: 'Sora', sans-serif; }
#mdpp-root input,
#mdpp-root select,
#mdpp-root textarea { font-family: 'Sora', sans-serif; }
#mdpp-root ::-webkit-scrollbar { width: 4px; }
#mdpp-root ::-webkit-scrollbar-thumb { background: #1e2d45; border-radius: 2px; }
#mdpp-root input[type=number]::-webkit-inner-spin-button,
#mdpp-root input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }
#mdpp-root input[type=number] { -moz-appearance: textfield; }

@keyframes mdpp-fadeIn  { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes mdpp-pop     { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
@keyframes mdpp-shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes mdpp-pulse   { 0%,100%{opacity:1} 50%{opacity:.4} }

#mdpp-root .mdpp-fade   { animation: mdpp-fadeIn .3s ease forwards; }
#mdpp-root .mdpp-pop    { animation: mdpp-pop .4s ease; }

/* Streak fire pulse */
#mdpp-root .streak-fire { animation: mdpp-pulse 1.5s ease-in-out infinite; }

/* Badge shine on hover */
#mdpp-root .badge-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245,158,11,.15);
  transition: all .2s;
}

/* Bar chart bars animate in */
#mdpp-root .bar-fill {
  animation: mdpp-fadeIn .6s ease forwards;
}

/* Timed test countdown urgent flash */
#mdpp-root .timer-urgent {
  animation: mdpp-pulse .6s ease-in-out infinite;
}

/* Mobile responsive */
@media (max-width: 600px) {
  #mdpp-root { border-radius: 0; }
  #mdpp-root .grid-4 { grid-template-columns: repeat(2,1fr) !important; }
  #mdpp-root .grid-3 { grid-template-columns: repeat(2,1fr) !important; }
  #mdpp-root .opt-grid { grid-template-columns: 1fr !important; }
}