:root {
  color-scheme: light;
  --ink: #243042;
  --muted: #667085;
  --line: #d7dee8;
  --paper: #ffffff;
  --sky: #dff4ff;
  --mint: #dff8ea;
  --lemon: #fff2bd;
  --coral: #ffe1da;
  --blue: #2563eb;
  --green: #16a34a;
  --red: #dc2626;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 242, 189, 0.75), transparent 24%),
    radial-gradient(circle at 92% 8%, rgba(223, 248, 234, 0.75), transparent 22%),
    #f6f8fb;
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  padding-bottom: env(safe-area-inset-bottom);
}

body::before,
body::after {
  border-radius: 999px;
  content: "";
  height: 180px;
  opacity: 0.18;
  pointer-events: none;
  position: fixed;
  width: 180px;
  z-index: 0;
}

.app-shell {
  position: relative;
  z-index: 1;
}

body::before {
  animation: backgroundDrift 18s ease-in-out infinite;
  background: #38bdf8;
  left: 4vw;
  top: 18vh;
}

body::after {
  animation: backgroundDrift 22s ease-in-out infinite reverse;
  background: #facc15;
  bottom: 10vh;
  right: 6vw;
}

.app-shell::before {
  animation: starDrift 28s linear infinite;
  color: rgba(37, 99, 235, 0.18);
  content: "✦   ✧   ✦   ✧   ✦   ✧   ✦";
  font-size: 28px;
  left: -10%;
  letter-spacing: 42px;
  pointer-events: none;
  position: fixed;
  top: 92px;
  white-space: nowrap;
  width: 120%;
  z-index: -1;
}

body[data-day-theme="0"] {
  --blue: #f97316;
  --green: #16a34a;
  background:
    linear-gradient(135deg, rgba(255, 237, 213, 0.96), rgba(255, 247, 237, 0.84) 42%, rgba(254, 226, 226, 0.92)),
    radial-gradient(circle at 12% 18%, rgba(249, 115, 22, 0.72), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(250, 204, 21, 0.72), transparent 26%),
    #fff7ed;
}

body[data-day-theme="1"] {
  --blue: #2563eb;
  --green: #0891b2;
  background:
    linear-gradient(135deg, rgba(219, 234, 254, 0.98), rgba(239, 246, 255, 0.82) 44%, rgba(224, 242, 254, 0.96)),
    radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.68), transparent 30%),
    radial-gradient(circle at 86% 14%, rgba(56, 189, 248, 0.78), transparent 26%),
    #eff6ff;
}

body[data-day-theme="2"] {
  --blue: #16a34a;
  --green: #15803d;
  background:
    linear-gradient(135deg, rgba(220, 252, 231, 0.98), rgba(240, 253, 244, 0.82) 42%, rgba(236, 252, 203, 0.96)),
    radial-gradient(circle at 12% 16%, rgba(22, 163, 74, 0.72), transparent 30%),
    radial-gradient(circle at 90% 10%, rgba(132, 204, 22, 0.76), transparent 26%),
    #f0fdf4;
}

body[data-day-theme="3"] {
  --blue: #7c3aed;
  --green: #0891b2;
  background:
    linear-gradient(135deg, rgba(237, 233, 254, 0.98), rgba(250, 245, 255, 0.82) 44%, rgba(219, 234, 254, 0.96)),
    radial-gradient(circle at 12% 18%, rgba(124, 58, 237, 0.7), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(14, 165, 233, 0.72), transparent 26%),
    #faf5ff;
}

body[data-day-theme="4"] {
  --blue: #dc2626;
  --green: #ea580c;
  background:
    linear-gradient(135deg, rgba(254, 226, 226, 0.98), rgba(255, 247, 237, 0.82) 42%, rgba(254, 215, 170, 0.96)),
    radial-gradient(circle at 10% 16%, rgba(220, 38, 38, 0.64), transparent 29%),
    radial-gradient(circle at 90% 12%, rgba(251, 146, 60, 0.78), transparent 26%),
    #fff1f2;
}

body[data-day-theme="5"] {
  --blue: #0f766e;
  --green: #14b8a6;
  background:
    linear-gradient(135deg, rgba(204, 251, 241, 0.98), rgba(240, 253, 250, 0.82) 42%, rgba(207, 250, 254, 0.96)),
    radial-gradient(circle at 12% 18%, rgba(15, 118, 110, 0.7), transparent 30%),
    radial-gradient(circle at 88% 10%, rgba(45, 212, 191, 0.76), transparent 27%),
    #f0fdfa;
}

body[data-day-theme="6"] {
  --blue: #ca8a04;
  --green: #65a30d;
  background:
    linear-gradient(135deg, rgba(254, 249, 195, 0.98), rgba(255, 251, 235, 0.84) 42%, rgba(254, 240, 138, 0.94)),
    radial-gradient(circle at 12% 18%, rgba(202, 138, 4, 0.7), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(250, 204, 21, 0.84), transparent 27%),
    #fefce8;
}

body[data-seasonal-theme="ramadan"] {
  --blue: #0f766e;
  background: radial-gradient(circle at 12% 12%, rgba(250, 204, 21, 0.32), transparent 24%), radial-gradient(circle at 92% 10%, rgba(20, 184, 166, 0.28), transparent 24%), #f0fdfa;
}

body[data-seasonal-theme="eid"] {
  --blue: #7c3aed;
  background: radial-gradient(circle at 12% 12%, rgba(244, 114, 182, 0.25), transparent 24%), radial-gradient(circle at 92% 10%, rgba(250, 204, 21, 0.32), transparent 24%), #fff7ed;
}

body[data-seasonal-theme="winter"] {
  --blue: #0284c7;
  background: radial-gradient(circle at 12% 12%, rgba(186, 230, 253, 0.55), transparent 24%), radial-gradient(circle at 92% 10%, rgba(224, 242, 254, 0.72), transparent 24%), #f8fafc;
}

body[data-seasonal-theme="football"] {
  --blue: #16a34a;
  background: radial-gradient(circle at 12% 12%, rgba(134, 239, 172, 0.45), transparent 24%), radial-gradient(circle at 92% 10%, rgba(251, 146, 60, 0.32), transparent 24%), #f7fee7;
}

body[data-seasonal-theme="school"] {
  --blue: #2563eb;
  background: radial-gradient(circle at 12% 12%, rgba(147, 197, 253, 0.42), transparent 24%), radial-gradient(circle at 92% 10%, rgba(253, 224, 71, 0.38), transparent 24%), #eff6ff;
}

body[data-seasonal-theme="summer"] {
  --blue: #ea580c;
  background: radial-gradient(circle at 12% 12%, rgba(253, 186, 116, 0.44), transparent 24%), radial-gradient(circle at 92% 10%, rgba(125, 211, 252, 0.48), transparent 24%), #fff7ed;
}

@keyframes confettiFall {
  0% {
    opacity: 1;
    transform: translateY(-20px) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(105vh) translateX(calc(var(--spin) * 80px)) rotate(calc(var(--spin) * 540deg));
  }
}

@keyframes pointBounce {
  0%, 100% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.18);
  }
  65% {
    transform: scale(0.96);
  }
}

@keyframes dailyGlow {
  0%, 100% {
    box-shadow: 0 8px 20px rgba(250, 204, 21, 0.12);
  }
  50% {
    box-shadow: 0 14px 32px rgba(250, 204, 21, 0.36);
  }
}

@keyframes firePulse {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(249, 115, 22, 0));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.65));
    transform: scale(1.16);
  }
}

@keyframes celebrationPop {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.86);
  }
  18%, 82% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-16px) scale(0.94);
  }
}

@keyframes avatarFloat {
  0%, 100% {
    transform: translateY(0) rotate(-1deg) scale(1);
  }
  50% {
    transform: translateY(-7px) rotate(2deg) scale(1.04);
  }
}

@keyframes animalIdle {
  0%, 100% {
    transform: translateY(0) rotate(-2deg) scale(1);
  }
  35% {
    transform: translateY(-4px) rotate(2deg) scale(1.05);
  }
  70% {
    transform: translateY(1px) rotate(-1deg) scale(0.98);
  }
}

@keyframes animalWalk {
  0%, 100% {
    transform: translateX(-3px) translateY(0) rotate(-4deg) scale(1);
  }
  25% {
    transform: translateX(2px) translateY(-5px) rotate(4deg) scale(1.04);
  }
  50% {
    transform: translateX(5px) translateY(0) rotate(3deg) scale(1);
  }
  75% {
    transform: translateX(0) translateY(-4px) rotate(-3deg) scale(1.03);
  }
}

@keyframes animalShadow {
  0%, 100% {
    opacity: 0.18;
    transform: translateX(-50%) scaleX(0.82);
  }
  50% {
    opacity: 0.32;
    transform: translateX(-50%) scaleX(1.08);
  }
}

@keyframes animalMarch {
  0%, 100% {
    transform: translate(-50%, -50%) translateX(-2px) rotate(-6deg);
  }
  25% {
    transform: translate(-50%, -50%) translateX(3px) translateY(-6px) rotate(6deg);
  }
  50% {
    transform: translate(-50%, -50%) translateX(6px) rotate(4deg);
  }
  75% {
    transform: translate(-50%, -50%) translateX(1px) translateY(-5px) rotate(-5deg);
  }
}

@keyframes animalBlink {
  0%, 82%, 100% {
    opacity: 0;
    transform: scaleX(0.6);
  }
  86%, 90% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes iconBounce {
  0%, 100% {
    transform: translateY(0) rotate(-2deg) scale(1);
  }
  45% {
    transform: translateY(-6px) rotate(3deg) scale(1.06);
  }
  70% {
    transform: translateY(1px) rotate(-1deg) scale(0.98);
  }
}

@keyframes iconSpinPop {
  0%, 100% {
    transform: rotate(-4deg) scale(1);
  }
  50% {
    transform: rotate(5deg) scale(1.1);
  }
}

@keyframes coinTwinkle {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(56, 189, 248, 0));
    transform: translateY(0) rotateY(0deg) scale(1);
  }
  45% {
    filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.75));
    transform: translateY(-2px) rotateY(180deg) scale(1.12);
  }
}

@keyframes badgeFloat {
  0%, 100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-5px) rotate(2deg);
  }
}

@keyframes iconOrbit {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.45);
    transform: translateY(0) scale(1);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(250, 204, 21, 0);
    transform: translateY(-4px) scale(1.05);
  }
}

@keyframes surpriseWiggle {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(-3deg) scale(1.03);
  }
  75% {
    transform: rotate(3deg) scale(1.03);
  }
}

@keyframes backgroundDrift {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(28px, -24px, 0) scale(1.12);
  }
}

@keyframes activityFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes completedSlide {
  0% {
    transform: translateX(-12px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes checkPop {
  0% {
    opacity: 0;
    transform: scale(0.35) rotate(-16deg);
  }
  65% {
    opacity: 1;
    transform: scale(1.14) rotate(6deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes diamondFly {
  0% {
    opacity: 0;
    transform: translate(-50%, 20px) scale(0.6) rotate(0deg);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + (var(--i) - 3) * 38px), -150px) scale(1.1) rotate(calc(var(--i) * 58deg));
  }
}

@keyframes rewardShine {
  0% {
    transform: translateX(-140%) skewX(-18deg);
  }
  100% {
    transform: translateX(180%) skewX(-18deg);
  }
}

@keyframes badgePop {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.86);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mapWalkerBounce {
  0%, 100% {
    transform: translate(-50%, -54%) translateY(0);
  }
  50% {
    transform: translate(-50%, -54%) translateY(-5px);
  }
}

@keyframes surpriseBurst {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

@keyframes tapBounce {
  0%, 100% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.08);
  }
  65% {
    transform: scale(0.96);
  }
}

@keyframes buttonCheckFlash {
  0% {
    box-shadow: 0 0 0 rgba(22, 163, 74, 0);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(22, 163, 74, 0.16);
  }
  100% {
    box-shadow: 0 0 0 rgba(22, 163, 74, 0);
  }
}

@keyframes progressShimmer {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(220%);
  }
}

@keyframes treasureOpenGlow {
  0% {
    opacity: 0;
    transform: scale(0.55) rotate(-8deg);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.75) rotate(10deg);
  }
}

@keyframes leaderSlideIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dashboardCardIn {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes badgeShine {
  0% {
    transform: translateX(-140%) rotate(14deg);
  }
  100% {
    transform: translateX(170%) rotate(14deg);
  }
}

@keyframes starDrift {
  0% {
    transform: translateX(-12%);
  }
  100% {
    transform: translateX(12%);
  }
}

@keyframes mascotWave {
  0%, 100% {
    transform: translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateY(-8px) rotate(5deg);
  }
}

@keyframes levelCeremony {
  0% {
    opacity: 0;
    transform: scale(0.78);
  }
  20%, 82% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes comboPop {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.82);
  }
  18%, 82% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
  }
}

@keyframes bannerSlide {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-18px);
  }
  18%, 84% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-18px);
  }
}

@keyframes rewardUnlock {
  0%, 100% {
    opacity: 0;
    transform: translateX(18px) rotate(0deg);
  }
  18%, 82% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
  35%, 55% {
    transform: translateX(0) rotate(-2deg);
  }
  45%, 65% {
    transform: translateX(0) rotate(2deg);
  }
}

@keyframes welcomeDrop {
  0% {
    opacity: 0;
    transform: translateY(-24px) scale(0.96);
  }
  16%, 84% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-18px) scale(0.98);
  }
}

@keyframes fireworkPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + (var(--i) - 2) * 44px), calc(-50% - 80px)) scale(1.4);
  }
}

@keyframes xpGlow {
  0%, 100% {
    box-shadow: 0 0 0 rgba(22, 163, 74, 0);
  }
  50% {
    box-shadow: 0 0 18px rgba(22, 163, 74, 0.32);
  }
}

@keyframes raceRun {
  0%, 100% {
    transform: translateY(-50%) scale(1);
  }
  50% {
    transform: translateY(-58%) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

button, input, select {
  font: inherit;
}

button {
  border: 0;
  border-radius: 8px;
  background: var(--blue);
  color: white;
  cursor: pointer;
  min-height: 38px;
  padding: 0 14px;
  font-weight: 700;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

button:active {
  transform: scale(0.96);
}

button:disabled {
  background: #a7b0bd;
  cursor: not-allowed;
}

button.ghost, .demo-grid button {
  background: #eef2f7;
  color: var(--ink);
}

input, select {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 40px;
  padding: 0 12px;
  width: 100%;
}

h1, h2, h3, p {
  margin-top: 0;
}

.login-screen {
  align-items: center;
  display: flex;
  min-height: 100vh;
  justify-content: center;
  padding: 24px;
}

.login-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(36, 48, 66, 0.12);
  max-width: 440px;
  padding: 28px;
  width: 100%;
}

.brand-mark, .logo {
  align-items: center;
  animation: iconSpinPop 2400ms ease-in-out infinite;
  background: var(--lemon);
  border-radius: 8px;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  margin-bottom: 14px;
  width: 44px;
}

.login-panel form, .editor {
  display: grid;
  gap: 12px;
}

.login-panel label {
  color: var(--muted);
  display: grid;
  gap: 6px;
  font-size: 14px;
}

.demo-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  margin-top: 12px;
}

.error {
  background: var(--coral);
  border-radius: 8px;
  color: var(--red);
  padding: 10px;
}

.notice {
  background: var(--mint);
  border-radius: 8px;
  color: #166534;
  font-weight: 700;
  padding: 10px;
}

.app-shell > header {
  align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 42px);
  position: sticky;
  top: 0;
  z-index: 3;
}

.app-shell header div, .app-shell nav {
  align-items: center;
  display: flex;
  gap: 10px;
}

.logo {
  height: 34px;
  margin: 0;
  width: 34px;
}

.dashboard {
  display: grid;
  gap: 22px;
  margin: 0 auto;
  max-width: 1180px;
  padding: 24px clamp(16px, 4vw, 42px) 42px;
}

.dashboard > * {
  animation: dashboardCardIn 460ms ease both;
}

.dashboard > *:nth-child(2) {
  animation-delay: 45ms;
}

.dashboard > *:nth-child(3) {
  animation-delay: 90ms;
}

.dashboard > *:nth-child(4) {
  animation-delay: 135ms;
}

.dashboard > *:nth-child(5) {
  animation-delay: 180ms;
}

.hero, .admin-top {
  align-items: center;
  background:
    linear-gradient(120deg, var(--sky), var(--mint) 55%, var(--lemon));
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  padding: 24px;
}

.hero h1, .admin-top h1 {
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.05;
  margin-bottom: 8px;
}

.child-title-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  position: relative;
}

.child-title-row h1 {
  margin-bottom: 0;
}

.hero h1 span {
  display: inline-block;
  margin-right: 8px;
}

.hero-avatar {
  align-items: center;
  animation: animalWalk 1800ms ease-in-out infinite;
  background: linear-gradient(135deg, #fff7ed, var(--lemon), var(--sky));
  border: 3px solid #facc15;
  border-radius: 18px;
  box-shadow: 0 12px 26px rgba(250, 204, 21, 0.24);
  display: inline-flex !important;
  height: 64px;
  justify-content: center;
  margin-right: 12px;
  position: relative;
  vertical-align: middle;
  width: 64px;
}

.avatar-photo {
  object-fit: cover;
  overflow: hidden;
}

img.hero-avatar,
img.leader-avatar,
img.race-avatar {
  display: block;
}

.hero-avatar::before,
.avatar-panel summary span::before,
.avatar-menu summary span::before,
.leader-avatar::before,
.avatar-picker button::before {
  animation: animalShadow 1800ms ease-in-out infinite;
  background: rgba(36, 48, 66, 0.18);
  border-radius: 999px;
  bottom: 5px;
  content: "";
  height: 6px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 32px;
  z-index: -1;
}

.hero-avatar::after,
.avatar-panel summary span::after,
.avatar-menu summary span::after,
.leader-avatar::after {
  animation: animalBlink 3600ms ease-in-out infinite;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  content: "";
  height: 5px;
  position: absolute;
  width: 20px;
}

.hero-avatar.level-3,
.hero-avatar.level-4,
.hero-avatar.level-5 {
  border-color: #38bdf8;
  box-shadow: 0 14px 30px rgba(56, 189, 248, 0.25);
}

.hero-avatar.level-5 {
  border-color: #a78bfa;
  box-shadow: 0 16px 34px rgba(167, 139, 250, 0.28);
}

.avatar-menu {
  position: relative;
  z-index: 4;
}

.avatar-menu summary {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  list-style: none;
}

.avatar-menu summary::-webkit-details-marker {
  display: none;
}

.avatar-menu summary small {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  padding: 8px 11px;
}

.avatar-menu .avatar-picker {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 56px rgba(36, 48, 66, 0.22);
  left: 0;
  margin-top: 10px;
  max-height: 320px;
  min-width: min(420px, calc(100vw - 36px));
  padding: 12px;
  position: absolute;
  top: 100%;
}

.photo-upload-button {
  align-items: center;
  background: linear-gradient(135deg, #dff4ff, #fffdf1);
  border: 1px solid #38bdf8;
  border-radius: 10px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font-weight: 950;
  justify-content: center;
  margin-bottom: 10px;
  min-height: 44px;
  padding: 10px;
  width: 100%;
}

.photo-upload-button input {
  display: none;
}

.section-title {
  align-items: center;
  animation: badgeFloat 3200ms ease-in-out infinite;
  display: flex;
  gap: 8px;
}

.stat:nth-child(2) .stat-icon,
.game-card:nth-child(2) .game-card-head > span,
.mission:nth-child(2) > span,
.activity:nth-child(2n) .activity-icon,
.reward:nth-child(2n) .reward-icon,
.badge-card:nth-child(2n) span {
  animation-delay: 180ms;
}

.stat:nth-child(3) .stat-icon,
.game-card:nth-child(3) .game-card-head > span,
.mission:nth-child(3) > span,
.activity:nth-child(3n) .activity-icon,
.reward:nth-child(3n) .reward-icon,
.badge-card:nth-child(3n) span {
  animation-delay: 360ms;
}

.eyebrow {
  color: var(--blue);
  font-weight: 800;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.score-card, .stat, .panel, .activity, .reward {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.score-card {
  background: rgba(255, 255, 255, 0.82);
  min-width: 220px;
  padding: 18px;
}

.score-card strong {
  align-items: center;
  display: flex;
  font-size: 48px;
  gap: 10px;
}

.point-bounce {
  animation: pointBounce 850ms ease;
}

.confetti {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  z-index: 20;
}

.confetti span {
  animation: confettiFall 1450ms ease-out forwards;
  background: var(--color);
  border-radius: 3px;
  height: 14px;
  left: var(--left);
  position: absolute;
  top: -24px;
  transform: rotate(0deg);
  width: 9px;
  animation-delay: var(--delay);
}

.mega-celebration {
  align-items: center;
  display: flex;
  inset: auto 16px 24px;
  justify-content: center;
  pointer-events: none;
  position: fixed;
  z-index: 21;
}

.mega-celebration > div {
  align-items: center;
  animation: celebrationPop 2200ms ease forwards;
  background: linear-gradient(135deg, #fffdf1, #f2fff7);
  border: 2px solid #facc15;
  border-radius: 999px;
  box-shadow: 0 20px 48px rgba(36, 48, 66, 0.18);
  display: flex;
  gap: 12px;
  padding: 14px 22px;
}

.mega-celebration span {
  font-size: 28px;
}

.mega-celebration strong {
  font-size: clamp(18px, 4vw, 28px);
}

.activity-celebration-modal {
  align-items: center;
  background: rgba(36, 48, 66, 0.36);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  z-index: 58;
}

.activity-celebration-modal > div {
  animation: celebrationPop 520ms ease both;
  background: linear-gradient(135deg, #fffdf1, #f2fff7, #dff4ff);
  border: 3px solid #facc15;
  border-radius: 20px;
  box-shadow: 0 28px 80px rgba(36, 48, 66, 0.24);
  max-width: 420px;
  padding: 28px;
  text-align: center;
  width: min(92vw, 420px);
}

.activity-celebration-modal > div > span {
  display: block;
  font-size: 62px;
}

.mini-fireworks {
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 23;
}

.mini-fireworks span {
  animation: fireworkPop 1200ms ease-out forwards;
  background: radial-gradient(circle, #facc15, #38bdf8 45%, transparent 68%);
  border-radius: 999px;
  height: 80px;
  left: 50%;
  position: absolute;
  top: 42%;
  width: 80px;
  animation-delay: calc(var(--i) * 80ms);
}

.level-up-overlay {
  align-items: center;
  background: rgba(36, 48, 66, 0.28);
  display: flex;
  inset: 0;
  justify-content: center;
  pointer-events: none;
  position: fixed;
  z-index: 30;
}

.level-up-overlay > div {
  animation: levelCeremony 3000ms ease forwards;
  background: linear-gradient(135deg, #fffdf1, #f2fff7, #dff4ff);
  border: 3px solid #facc15;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(36, 48, 66, 0.24);
  padding: 34px;
  text-align: center;
  min-width: min(360px, 86vw);
}

.level-up-overlay span {
  display: block;
  font-size: 64px;
}

.level-up-overlay h2 {
  font-size: clamp(42px, 9vw, 72px);
  line-height: 1;
  margin-bottom: 8px;
}

.combo-toast,
.quest-banner,
.reward-unlock-toast,
.daily-welcome {
  border-radius: 999px;
  box-shadow: 0 18px 42px rgba(36, 48, 66, 0.18);
  font-weight: 950;
  pointer-events: none;
  position: fixed;
  z-index: 24;
}

.combo-toast {
  animation: comboPop 2200ms ease forwards;
  background: linear-gradient(135deg, #fff7ed, #fffdf1);
  border: 2px solid #f97316;
  bottom: 84px;
  color: #9a3412;
  font-size: 26px;
  left: 50%;
  padding: 13px 22px;
  transform: translateX(-50%);
}

.quest-banner {
  animation: bannerSlide 2400ms ease forwards;
  background: linear-gradient(135deg, #dff8ea, #fffdf1);
  border: 2px solid #16a34a;
  left: 50%;
  padding: 13px 22px;
  top: 86px;
}

.reward-unlock-toast {
  animation: rewardUnlock 2600ms ease forwards;
  background: linear-gradient(135deg, #fffdf1, #dff4ff);
  border: 2px solid #38bdf8;
  padding: 13px 20px;
  right: 22px;
  top: 92px;
}

.daily-welcome {
  animation: welcomeDrop 2600ms ease forwards;
  background: linear-gradient(135deg, #fffdf1, #ffe1da);
  border: 2px solid #facc15;
  left: 50%;
  padding: 14px 24px;
  top: 76px;
  transform: translateX(-50%);
}

.mascot {
  align-items: center;
  animation: mascotWave 2200ms ease-in-out infinite;
  background: #fffdf1;
  border: 2px solid #facc15;
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(36, 48, 66, 0.14);
  display: grid;
  justify-items: center;
  padding: 8px;
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 12;
}

.mascot span {
  font-size: 32px;
}

.mascot small {
  color: #7a4e00;
  font-weight: 950;
}

.gold-coin {
  align-items: center;
  animation: coinTwinkle 2600ms ease-in-out infinite;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.86em;
  height: 1em;
  justify-content: center;
  line-height: 1;
  margin-right: 8px;
  width: 1em;
}

.stats {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.kid-controls {
  align-items: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px;
}

.kid-controls.xp-only {
  justify-content: center;
}

.kid-controls span {
  color: var(--muted);
  font-weight: 800;
}

.xp-wrap {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(140px, 1fr) auto;
  width: min(100%, 620px);
}

.xp-wrap > span,
.xp-wrap > strong {
  color: var(--muted);
  font-weight: 900;
}

.xp-bar {
  background: #e7ecf3;
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
}

.xp-bar span {
  animation: xpGlow 1800ms ease-in-out infinite;
  background: linear-gradient(90deg, #16a34a, #facc15);
  display: block;
  height: 100%;
  transition: width 420ms ease;
}

.stat {
  padding: 18px;
}

.stat span, .score-card span {
  color: var(--muted);
  font-weight: 700;
}

.stat strong {
  align-items: center;
  display: flex;
  font-size: 32px;
  gap: 8px;
}

.stat-icon {
  align-items: center;
  animation: iconBounce 2100ms ease-in-out infinite;
  display: inline-flex;
}

.pulse-fire {
  animation: firePulse 1400ms ease-in-out infinite;
}

.fire-power-2 {
  font-size: 1.16em;
  filter: drop-shadow(0 0 9px rgba(249, 115, 22, 0.72));
}

.fire-power-3 {
  font-size: 1.28em;
  filter: drop-shadow(0 0 14px rgba(220, 38, 38, 0.8));
}

.diamond-burst {
  pointer-events: none;
  position: fixed;
  right: clamp(36px, 10vw, 170px);
  top: clamp(110px, 18vh, 180px);
  z-index: 22;
}

.diamond-burst span {
  animation: diamondFly 1300ms ease-out forwards;
  font-size: 26px;
  left: 0;
  position: absolute;
  top: 0;
  animation-delay: calc(var(--i) * 45ms);
}

.daily-challenge {
  align-items: center;
  background: linear-gradient(135deg, #fff7ed, #fffdf1 55%, #dff4ff);
  border: 2px solid #facc15;
  border-radius: 14px;
  box-shadow: 0 18px 34px rgba(250, 204, 21, 0.16);
  display: grid;
  gap: 16px;
  grid-template-columns: 12px auto 1fr;
  overflow: hidden;
  padding: 18px;
  position: relative;
  animation: dailyGlow 2400ms ease-in-out infinite;
}

.calendar-panel {
  align-items: center;
  background: linear-gradient(120deg, #ffffff, var(--sky) 58%, #f2fff7);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  grid-template-columns: auto 1fr;
  padding: 18px;
}

.calendar-icon {
  align-items: center;
  animation: iconOrbit 2600ms ease-in-out infinite;
  background: var(--lemon);
  border-radius: 8px;
  display: flex;
  font-size: 34px;
  height: 64px;
  justify-content: center;
  width: 64px;
}

.calendar-panel h2 {
  margin-bottom: 4px;
}

.calendar-panel p {
  color: var(--muted);
  margin-bottom: 4px;
}

.calendar-panel .hijri-date {
  color: #245b49;
  font-weight: 850;
  margin-bottom: 0;
}

.daily-challenge.earned {
  background: linear-gradient(120deg, #f2fff7, #fffdf1);
  border-color: #9ddfba;
}

.flag-pole {
  align-self: stretch;
  background: linear-gradient(#2563eb, #16a34a);
  border-radius: 999px;
  min-height: 92px;
  position: relative;
}

.flag-pole::after {
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  border-radius: 0 10px 10px 0;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2);
  content: "";
  height: 36px;
  left: 10px;
  position: absolute;
  top: 6px;
  width: 72px;
}

.challenge-icon {
  align-items: center;
  animation: iconSpinPop 1900ms ease-in-out infinite;
  background: radial-gradient(circle at 35% 28%, #fff9b8 0 18%, #facc15 36%, #d97706 78%);
  border: 4px solid rgba(255, 255, 255, 0.82);
  border-radius: 18px;
  box-shadow: 0 12px 24px rgba(217, 119, 6, 0.18);
  display: flex;
  font-size: 34px;
  height: 64px;
  justify-content: center;
  width: 64px;
}

.daily-challenge h2 {
  margin-bottom: 4px;
}

.daily-challenge p:last-child {
  color: var(--muted);
  margin-bottom: 0;
}

.game-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.game-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 26px rgba(36, 48, 66, 0.07);
  display: grid;
  gap: 12px;
  overflow: hidden;
  padding: 16px;
}

.game-card-head {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: auto 1fr;
}

.game-card-head > span {
  align-items: center;
  animation: iconBounce 2300ms ease-in-out infinite;
  background: var(--lemon);
  border-radius: 8px;
  display: flex;
  font-size: 32px;
  height: 58px;
  justify-content: center;
  width: 58px;
}

.game-card h2 {
  font-size: 22px;
  margin-bottom: 0;
}

.game-card p {
  color: var(--muted);
  margin-bottom: 0;
}

.map-path {
  align-items: start;
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(6, 1fr);
  padding-top: 30px;
  position: relative;
}

.map-path::before {
  background: linear-gradient(90deg, #9ddfba, #facc15, #38bdf8);
  border-radius: 999px;
  content: "";
  height: 5px;
  left: 8%;
  opacity: 0.55;
  position: absolute;
  right: 8%;
  top: 14px;
}

.map-walker {
  animation: mapWalkerBounce 1100ms ease-in-out infinite;
  font-size: 26px;
  left: var(--walker-left);
  position: absolute;
  top: 14px;
  transition: left 650ms ease;
  z-index: 1;
}

.map-step {
  display: grid;
  gap: 6px;
  justify-items: center;
  min-width: 0;
  opacity: 0.52;
}

.map-step span {
  align-items: center;
  background: #eef2f7;
  border-radius: 999px;
  display: flex;
  font-weight: 900;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.map-step small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  overflow-wrap: anywhere;
  text-align: center;
}

.map-step.reached {
  opacity: 1;
}

.map-step.reached span {
  background: var(--mint);
  color: #166534;
}

.mystery-box.ready .game-card-head > span {
  animation: surpriseWiggle 1100ms ease-in-out infinite;
  background: linear-gradient(135deg, var(--lemon), #ffd6e7);
}

.mystery-box.ready {
  border-color: #facc15;
  box-shadow: 0 16px 32px rgba(250, 204, 21, 0.18);
}

.mystery-box.opened {
  position: relative;
}

.mystery-box.opened::after {
  animation: surpriseBurst 850ms ease-out forwards;
  background: radial-gradient(circle, rgba(250, 204, 21, 0.5), rgba(56, 189, 248, 0.18), transparent 68%);
  border-radius: 999px;
  content: "";
  inset: 20%;
  pointer-events: none;
  position: absolute;
}

.power-up-panel {
  background: linear-gradient(135deg, rgba(255, 253, 241, 0.96), rgba(223, 244, 255, 0.92));
}

.power-up-list {
  display: grid;
  gap: 10px;
}

.power-up {
  align-items: center;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr auto;
  padding: 10px;
}

.power-up > span {
  align-items: center;
  animation: iconSpinPop 2200ms ease-in-out infinite;
  background: var(--lemon);
  border-radius: 999px;
  display: flex;
  font-size: 22px;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.power-up strong,
.power-up small {
  display: block;
}

.power-up small {
  color: var(--muted);
  font-weight: 700;
}

.power-up.active {
  border-color: #16a34a;
  box-shadow: 0 10px 24px rgba(22, 163, 74, 0.14);
}

.family-quest.complete {
  background: linear-gradient(135deg, #f2fff7, #fffdf1);
  border-color: #9ddfba;
}

.family-members {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.family-members span {
  animation: badgeFloat 2600ms ease-in-out infinite;
  background: #f2f5f9;
  border-radius: 999px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  padding: 7px 10px;
}

.mission-list {
  display: grid;
  gap: 10px;
}

.mission,
.challenge-card {
  align-items: center;
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr;
  padding: 10px;
}

.mission.complete,
.challenge-card.complete {
  background: linear-gradient(90deg, #f2fff7, #fffdf1);
  border-color: #9ddfba;
}

.mission > span {
  align-items: center;
  animation: iconOrbit 2500ms ease-in-out infinite;
  background: var(--lemon);
  border-radius: 8px;
  display: flex;
  font-size: 25px;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.mission small,
.challenge-card small {
  color: var(--muted);
  display: block;
  font-weight: 750;
  margin-top: 4px;
}

.treasure-card.ready .game-card-head > span {
  animation: surpriseWiggle 900ms ease-in-out infinite;
  background: linear-gradient(135deg, var(--lemon), #dff4ff);
}

.treasure-card.opened {
  border-color: #38bdf8;
  box-shadow: 0 16px 32px rgba(56, 189, 248, 0.16);
  position: relative;
}

.treasure-card.opened::before,
.treasure-card.opened::after {
  animation: treasureOpenGlow 1000ms ease-out forwards;
  content: "💎 ✨ 💎";
  font-size: 28px;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 42%;
  transform-origin: center;
  z-index: 1;
}

.treasure-card.opened::after {
  animation-delay: 120ms;
  content: "✨ 💎 ✨";
  top: 58%;
}

.challenge-card {
  align-items: stretch;
  grid-template-columns: 1fr;
}

.achievement-stats {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 12px;
}

.achievement-stats span {
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 850;
  padding: 10px;
  text-align: center;
}

.avatar-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

.avatar-panel summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 10px;
  list-style: none;
}

.avatar-panel summary::-webkit-details-marker {
  display: none;
}

.avatar-panel summary span {
  align-items: center;
  animation: animalWalk 1900ms ease-in-out infinite;
  background: var(--lemon);
  border-radius: 8px;
  display: flex;
  font-size: 28px;
  height: 48px;
  justify-content: center;
  position: relative;
  width: 48px;
}

.avatar-panel summary::after {
  background: #eef2f7;
  border-radius: 8px;
  content: "Change";
  font-weight: 800;
  margin-left: auto;
  padding: 9px 12px;
}

.avatar-panel[open] summary::after {
  content: "Close";
}

.avatar-picker {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(8, minmax(44px, 1fr));
  margin-top: 14px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}

.avatar-picker button {
  align-items: center;
  animation: animalWalk 2100ms ease-in-out infinite;
  aspect-ratio: 1;
  background: #f2f5f9;
  border: 2px solid transparent;
  color: var(--ink);
  display: flex;
  font-size: 26px;
  justify-content: center;
  min-height: 48px;
  padding: 0;
  position: relative;
}

.avatar-picker button:nth-child(2n) {
  animation-delay: 180ms;
}

.avatar-picker button:nth-child(3n) {
  animation-delay: 360ms;
}

.avatar-picker button:hover {
  background: #fffdf1;
  border-color: #facc15;
  transform: translateY(-3px) scale(1.06);
}

.avatar-picker button.selected {
  background: var(--lemon);
  border-color: var(--blue);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

.leaderboard {
  margin-bottom: 22px;
}

.leader-list {
  display: grid;
  gap: 10px;
}

.race-board {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.race-list {
  display: grid;
  gap: 12px;
}

.race-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 38px 1fr auto;
}

.race-row > span,
.race-avatar {
  align-items: center;
  animation: animalWalk 2200ms ease-in-out infinite;
  background: var(--lemon);
  border-radius: 8px;
  display: flex;
  font-size: 23px;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.race-row.current > span,
.race-row.current .race-avatar {
  background: linear-gradient(135deg, var(--lemon), var(--sky));
  border: 2px solid #facc15;
}

.race-track {
  background: linear-gradient(90deg, #eef2f7, #fffdf1);
  border-radius: 999px;
  height: 14px;
  position: relative;
}

.race-track i {
  font-style: normal;
  position: absolute;
  top: 50%;
  transition: left 520ms ease;
}

.race-animal {
  animation: animalMarch 920ms ease-in-out infinite;
  filter: drop-shadow(0 6px 5px rgba(36, 48, 66, 0.22));
  font-size: 24px;
  transform-origin: center bottom;
}

.race-animal.winner {
  filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.85));
}

.race-row strong {
  align-items: center;
  display: flex;
  font-weight: 950;
}

.leader {
  align-items: center;
  animation: leaderSlideIn 420ms ease both;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: 42px 48px 1fr auto;
  padding: 12px;
}

.leader:nth-child(2) {
  animation-delay: 70ms;
}

.leader:nth-child(3) {
  animation-delay: 140ms;
}

.leader:nth-child(4) {
  animation-delay: 210ms;
}

.leader.current {
  background: linear-gradient(90deg, #fffdf1, #f2fff7);
  border-color: #facc15;
}

.redemption-board .leader.current {
  background: linear-gradient(90deg, #fff7ed, #fffdf1);
}

.leader > strong {
  color: var(--blue);
  font-size: 18px;
}

.leader-avatar {
  align-items: center;
  animation: animalWalk 2200ms ease-in-out infinite;
  background: linear-gradient(135deg, var(--sky), var(--lemon));
  border-radius: 8px;
  display: flex;
  font-size: 26px;
  height: 48px;
  justify-content: center;
  position: relative;
  width: 48px;
}

.leader h3 {
  margin-bottom: 2px;
}

.leader p {
  color: var(--muted);
  margin-bottom: 0;
}

.leader-points {
  align-items: center;
  animation: iconOrbit 2800ms ease-in-out infinite;
  display: flex;
  font-weight: 900;
  white-space: nowrap;
}

.split, .admin-grid {
  align-items: start;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
}

.activity-list, .reward-list, .mini-list {
  display: grid;
  gap: 12px;
}

.activity, .reward {
  display: grid;
  gap: 14px;
  grid-template-columns: auto 1fr;
  padding: 14px;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.activity:hover, .reward:hover {
  border-color: #9bbcff;
  box-shadow: 0 12px 24px rgba(36, 48, 66, 0.1);
  transform: translateY(-2px);
}

.reward {
  grid-template-columns: auto 1fr auto;
}

.activity.completed, .activity.approved {
  animation: completedSlide 300ms ease;
  border-color: #9ddfba;
  background: #f2fff7;
  position: relative;
}

.prayer-step-card {
  background: linear-gradient(135deg, #ffffff, #f8fbff);
}

.prayer-step-card .activity-body {
  gap: 10px;
}

.prayer-step-toggle {
  align-items: center;
  background: var(--blue);
  border-radius: 999px;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-weight: 900;
  gap: 9px;
  min-height: 44px;
  padding: 10px 16px;
  width: fit-content;
}

.prayer-step-toggle:has(input:checked) {
  background: #16a34a;
}

.prayer-step-toggle.locked-time {
  background: #e7ecf3;
  color: var(--muted);
  cursor: not-allowed;
}

.prayer-step-toggle input {
  height: 18px;
  width: 18px;
}

.activity.completed::after,
.activity.approved::after {
  align-items: center;
  animation: checkPop 520ms ease both;
  background: #16a34a;
  border: 3px solid white;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.25);
  color: white;
  content: "✓";
  display: flex;
  font-size: 20px;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  position: absolute;
  right: -8px;
  top: -8px;
  width: 34px;
}

.activity.daily-pick {
  animation: dailyGlow 2400ms ease-in-out infinite;
  border-color: #facc15;
  box-shadow: 0 10px 22px rgba(250, 204, 21, 0.16);
}

.daily-badge {
  animation: iconOrbit 2200ms ease-in-out infinite;
  background: var(--lemon);
  border-radius: 999px;
  color: #7a4e00;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  margin-left: 6px;
  padding: 5px 9px;
  vertical-align: middle;
}

.activity.pending {
  animation: activityFloat 3600ms ease-in-out infinite;
  background: linear-gradient(90deg, #ffffff, #f8fbff);
}

.complete-button.tap-bounce {
  animation: tapBounce 520ms ease, buttonCheckFlash 520ms ease;
}

.activity.rejected {
  border-color: #ffc2b5;
  background: #fff5f2;
}

.activity-icon, .reward-icon {
  align-items: center;
  animation: iconBounce 2200ms ease-in-out infinite;
  background: linear-gradient(135deg, var(--sky), var(--lemon));
  border-radius: 8px;
  display: flex;
  font-size: 30px;
  height: 58px;
  justify-content: center;
  width: 58px;
}

.reward-icon {
  animation-name: iconSpinPop;
  background: linear-gradient(135deg, var(--lemon), var(--coral));
}

.motion-icon {
  overflow: hidden;
  position: relative;
}

.motion-icon > span {
  position: absolute;
}

.daily-medal {
  font-size: 13px;
  right: 3px;
  top: 2px;
  z-index: 3;
}

.motion-writing .paper {
  color: #ffffff;
  font-size: 34px;
  left: 12px;
  top: 12px;
}

.motion-writing .pencil {
  animation: pencilWrite 1300ms ease-in-out infinite;
  font-size: 22px;
  left: 12px;
  top: 18px;
  z-index: 2;
}

.motion-writing .line {
  animation: writingLine 1300ms ease-in-out infinite;
  background: #2563eb;
  border-radius: 999px;
  height: 3px;
  left: 24px;
  top: 28px;
  width: 0;
}

.motion-writing .line.two {
  animation-delay: 240ms;
  top: 36px;
}

.motion-quran .book,
.motion-memorize .study-book {
  animation: bookBreathe 1700ms ease-in-out infinite;
  font-size: 34px;
  left: 12px;
  top: 12px;
}

.motion-quran .page {
  animation: pageTurn 1400ms ease-in-out infinite;
  background: rgba(255, 255, 255, 0.78);
  border-radius: 2px;
  height: 27px;
  left: 29px;
  top: 16px;
  transform-origin: left center;
  width: 12px;
}

.motion-quran .page.right {
  animation-delay: 420ms;
  left: 36px;
}

.motion-reading .book {
  font-size: 23px;
  left: 17px;
}

.motion-reading .b1 {
  animation: stackBook1 1600ms ease-in-out infinite;
  top: 8px;
}

.motion-reading .b2 {
  animation: stackBook2 1600ms ease-in-out infinite;
  top: 18px;
}

.motion-reading .b3 {
  animation: stackBook3 1600ms ease-in-out infinite;
  top: 28px;
}

.motion-math .math-part {
  animation: mathPop 2200ms ease-in-out infinite;
  color: #1d4ed8;
  font-size: 19px;
  font-weight: 950;
  top: 19px;
}

.motion-math .a { left: 6px; }
.motion-math .plus { animation-delay: 180ms; left: 17px; }
.motion-math .b { animation-delay: 360ms; left: 28px; }
.motion-math .eq { animation-delay: 540ms; left: 39px; }
.motion-math .result {
  animation-delay: 720ms;
  color: #16a34a;
  left: 49px;
}

.motion-helping .house {
  font-size: 34px;
  left: 11px;
  top: 14px;
}

.motion-helping .brush {
  animation: cleaningSweep 1200ms ease-in-out infinite;
  font-size: 22px;
  left: 4px;
  top: 28px;
  z-index: 2;
}

.motion-helping .spark {
  animation: sparklePop 1200ms ease-in-out infinite;
  font-size: 13px;
  opacity: 0;
}

.motion-helping .s1 { right: 9px; top: 10px; }
.motion-helping .s2 { animation-delay: 260ms; right: 18px; top: 31px; }

.motion-sport .goal {
  font-size: 29px;
  right: 5px;
  top: 16px;
}

.motion-sport .ball {
  animation: ballToGoal 1400ms ease-in-out infinite;
  font-size: 22px;
  left: 4px;
  top: 28px;
}

.motion-sleep .sky {
  animation: nightFall 2400ms ease-in-out infinite;
  background: linear-gradient(#1e3a8a, #111827);
  inset: 0;
}

.motion-sleep .moon {
  animation: moonRise 2400ms ease-in-out infinite;
  font-size: 25px;
  left: 17px;
  top: 34px;
}

.motion-sleep .zzz {
  animation: zFloat 1800ms ease-in-out infinite;
  color: #ffffff;
  font-weight: 950;
  right: 10px;
  top: 10px;
}

.motion-wake .horizon {
  background: linear-gradient(#dff4ff 0 55%, #f2fff7 56%);
  inset: 0;
}

.motion-wake .sun {
  animation: sunRise 2200ms ease-in-out infinite;
  font-size: 30px;
  left: 14px;
  top: 35px;
}

.motion-organize .bag {
  font-size: 32px;
  left: 15px;
  top: 18px;
}

.motion-organize .item {
  animation: packItem 1700ms ease-in-out infinite;
  font-size: 16px;
  left: 3px;
  top: 4px;
}

.motion-organize .pen-item {
  animation-delay: 420ms;
  left: 36px;
}

.motion-teamwork .hand {
  animation: handShake 900ms ease-in-out infinite;
  font-size: 34px;
  left: 12px;
  top: 12px;
}

.motion-teamwork .shake-lines {
  animation: sparklePop 900ms ease-in-out infinite;
  font-size: 12px;
  right: 8px;
  top: 8px;
}

.motion-bedroom .bed {
  font-size: 34px;
  left: 11px;
  top: 17px;
}

.motion-bedroom .blanket {
  animation: tidyBlanket 1500ms ease-in-out infinite;
  background: #38bdf8;
  border-radius: 4px;
  height: 13px;
  left: 18px;
  top: 32px;
  width: 25px;
}

.motion-bedroom .tidy {
  animation: sparklePop 1500ms ease-in-out infinite;
  font-size: 13px;
  right: 6px;
  top: 8px;
}

.motion-prayer .prayer-kid {
  animation: prayerBow 1800ms ease-in-out infinite;
  font-size: 29px;
  left: 14px;
  top: 10px;
  z-index: 2;
}

.motion-prayer .prayer-mat {
  background: #16a34a;
  border-radius: 999px;
  bottom: 9px;
  height: 9px;
  left: 11px;
  width: 38px;
}

.motion-prayer .prayer-glow {
  animation: sparklePop 1800ms ease-in-out infinite;
  font-size: 13px;
  right: 6px;
  top: 7px;
}

.motion-memorize .student {
  animation: studyNod 1600ms ease-in-out infinite;
  font-size: 22px;
  left: 6px;
  top: 8px;
  z-index: 2;
}

.motion-memorize .study-book {
  font-size: 29px;
  left: 23px;
  top: 22px;
}

.motion-memorize .thought {
  animation: zFloat 1700ms ease-in-out infinite;
  font-size: 14px;
  right: 5px;
  top: 5px;
}

@keyframes pencilWrite {
  0%, 100% { transform: translate(0, 0) rotate(-12deg); }
  45% { transform: translate(22px, 8px) rotate(-12deg); }
  70% { transform: translate(8px, 15px) rotate(-12deg); }
}

@keyframes writingLine {
  0%, 25% { width: 0; }
  65%, 100% { width: 22px; }
}

@keyframes bookBreathe {
  0%, 100% { transform: scale(1) rotate(-1deg); }
  50% { transform: scale(1.07) rotate(1deg); }
}

@keyframes pageTurn {
  0%, 100% { opacity: 0.35; transform: rotateY(0deg); }
  45% { opacity: 0.9; transform: rotateY(-145deg); }
}

@keyframes stackBook1 {
  0%, 100% { transform: translateY(18px); }
  45%, 70% { transform: translateY(0); }
}

@keyframes stackBook2 {
  0%, 100% { transform: translateY(12px); }
  45%, 70% { transform: translateY(0); }
}

@keyframes stackBook3 {
  0%, 100% { transform: translateY(6px); }
  45%, 70% { transform: translateY(0); }
}

@keyframes mathPop {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  40%, 72% { opacity: 1; transform: scale(1.16); }
}

@keyframes cleaningSweep {
  0%, 100% { transform: translateX(0) rotate(-18deg); }
  50% { transform: translateX(35px) rotate(18deg); }
}

@keyframes sparklePop {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1.18); }
}

@keyframes ballToGoal {
  0% { transform: translate(0, 0) rotate(0deg); }
  70%, 100% { transform: translate(30px, -8px) rotate(360deg); }
}

@keyframes nightFall {
  0%, 100% { opacity: 0.62; }
  50% { opacity: 1; }
}

@keyframes moonRise {
  0%, 100% { transform: translateY(12px); }
  50% { transform: translateY(-20px); }
}

@keyframes zFloat {
  0%, 100% { opacity: 0; transform: translateY(8px) scale(0.8); }
  50% { opacity: 1; transform: translateY(-7px) scale(1.08); }
}

@keyframes sunRise {
  0%, 100% { transform: translateY(16px) scale(0.9); }
  50% { transform: translateY(-22px) scale(1.08); }
}

@keyframes packItem {
  0%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
  60%, 75% { opacity: 1; transform: translate(22px, 25px) scale(0.75); }
}

@keyframes handShake {
  0%, 100% { transform: translateX(-3px) rotate(-5deg); }
  50% { transform: translateX(4px) rotate(5deg); }
}

@keyframes tidyBlanket {
  0%, 100% { transform: translateX(-12px) scaleX(0.55); }
  55% { transform: translateX(0) scaleX(1.1); }
}

@keyframes prayerBow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(7px) rotate(12deg); }
}

@keyframes studyNod {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(8deg) translateY(2px); }
}

.row {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.row h3, .reward h3 {
  margin-bottom: 4px;
}

.activity p, .reward p, .muted {
  color: var(--muted);
}

.points-pill, .status-chip {
  border-radius: 999px;
  align-items: center;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  padding: 6px 10px;
}

.points-pill {
  background: var(--lemon);
  color: #7a4e00;
  white-space: nowrap;
}

.status-chip {
  background: #eef2f7;
  color: var(--muted);
  margin-bottom: 10px;
  text-transform: capitalize;
}

.status-chip.approved {
  background: var(--mint);
  color: #166534;
}

.status-chip.completed {
  background: var(--sky);
  color: #075985;
}

.status-chip.rejected {
  background: var(--coral);
  color: var(--red);
}

.activity-timer {
  align-items: center;
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr auto auto;
  margin: 10px 0;
  padding: 10px;
}

.timer-track {
  background: #e7ecf3;
  border-radius: 999px;
  grid-column: 1 / -1;
  height: 10px;
  overflow: hidden;
}

.timer-track span {
  background: linear-gradient(90deg, #48b18d, #facc15);
  display: block;
  height: 100%;
  transition: width 300ms linear;
  width: var(--timer-progress);
}

.activity-timer.done {
  background: var(--mint);
  border-color: #9ddfba;
}

.activity-timer span {
  color: var(--muted);
  display: block;
  font-size: 13px;
  font-weight: 800;
}

.activity-timer strong {
  display: block;
  font-size: 24px;
  line-height: 1;
}

.prayers {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, minmax(80px, 1fr));
}

.prayers label, .check {
  align-items: center;
  background: #f2f5f9;
  border-radius: 8px;
  display: flex;
  gap: 8px;
  padding: 10px;
}

.prayers label {
  border: 1px solid transparent;
  font-weight: 750;
  min-height: 48px;
}

.prayers label:has(input:checked) {
  background: var(--mint);
  border-color: #9ddfba;
  color: #166534;
}

.prayers label.locked-time {
  background: #f1f5f9;
  border-color: #d7dee8;
  color: var(--muted);
  opacity: 0.72;
}

.prayers label small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.prayers input, .check input {
  height: 18px;
  width: 18px;
}

.locked {
  opacity: 0.72;
}

.reward.available {
  border-color: #9ddfba;
  background: linear-gradient(90deg, #ffffff, #f2fff7);
  overflow: hidden;
  position: relative;
}

.reward.locked {
  position: relative;
}

.reward.locked::before {
  align-items: center;
  background: rgba(238, 242, 247, 0.82);
  border-radius: 999px;
  content: "🔒";
  display: flex;
  height: 32px;
  justify-content: center;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 32px;
}

.reward.available::before {
  animation: checkPop 520ms ease both;
  align-items: center;
  background: #16a34a;
  border-radius: 999px;
  color: white;
  content: "🔓";
  display: flex;
  height: 32px;
  justify-content: center;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 32px;
  z-index: 1;
}

.reward.available::after,
.reward:has(.discount-badge)::after {
  animation: rewardShine 2600ms ease-in-out infinite;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  content: "";
  height: 120%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: -10%;
  width: 44%;
}

.reward.available strong {
  color: #166534;
}

.discount-badge {
  animation: iconSpinPop 2100ms ease-in-out infinite;
  background: #fee2e2;
  border-radius: 999px;
  color: #b91c1c;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  margin-left: 6px;
  padding: 5px 9px;
  vertical-align: middle;
}

.old-price {
  color: var(--muted);
  display: inline-block;
  margin-right: 8px;
  text-decoration: line-through;
}

.progress {
  background: #e7ecf3;
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
  position: relative;
}

.progress span {
  background: var(--green);
  display: block;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.progress span::after {
  animation: progressShimmer 1700ms ease-in-out infinite;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.78), transparent);
  content: "";
  inset: 0;
  position: absolute;
  width: 45%;
}

.panel {
  padding: 18px;
}

.admin-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.approval, .mini-list > div {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr auto auto auto;
  padding: 10px 0;
}

.editor {
  background: #f7f9fc;
  border-radius: 8px;
  margin-bottom: 14px;
  padding: 12px;
}

.today-task-form {
  margin-bottom: 0;
}

.weekly-planner {
  display: grid;
  gap: 10px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
}

.planner-row {
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.planner-row.today-only {
  background: linear-gradient(90deg, #fffdf1, #f2fff7);
  border-color: #facc15;
}

.planner-row > div:first-child {
  display: grid;
  gap: 2px;
}

.planner-row > div:first-child span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.day-buttons,
.planner-presets,
.backup-actions,
.day-checkboxes,
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.form-row > * {
  flex: 1 1 140px;
}

.day-buttons button {
  min-height: 34px;
  min-width: 48px;
  padding: 0 10px;
}

.planner-presets button {
  min-height: 34px;
}

.restore-button {
  align-items: center;
  background: #eef2f7;
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  font-weight: 800;
  min-height: 38px;
  padding: 0 14px;
}

.restore-button input {
  display: none;
}

.day-checkboxes {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
}

.bar {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 84px 1fr 44px;
  margin: 8px 0;
}

.proof-upload {
  background: #f7f9fc;
  border: 1px dashed var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  margin: 10px 0;
  padding: 10px;
}

.proof-upload input {
  padding: 8px;
}

.proof-upload span {
  color: #166534;
  font-weight: 800;
}

.proof-upload small,
.proof-link {
  color: var(--blue);
  font-weight: 800;
}

.subject-chip {
  display: inline-flex;
  width: fit-content;
  margin: 0.15rem 0 0.45rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: #eef6ff;
  color: #24527a;
  font-weight: 800;
}

.interactive-task {
  display: grid;
  gap: 0.45rem;
  margin: 0.75rem 0;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.interactive-task input,
.interactive-task textarea {
  width: 100%;
}

.matching-task,
.picture-vocab {
  display: grid;
  gap: 0.45rem;
}

.picture-vocab > span {
  font-size: 2.2rem;
}

.badge-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.badge-card {
  animation: badgePop 420ms ease both;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 12px;
  overflow: hidden;
  position: relative;
  text-align: center;
}

.badge-card::after {
  animation: badgeShine 3200ms ease-in-out infinite;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.76), transparent);
  content: "";
  height: 140%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: -20%;
  width: 44%;
}

.badge-card:nth-child(2) {
  animation-delay: 70ms;
}

.badge-card:nth-child(3) {
  animation-delay: 140ms;
}

.badge-card:nth-child(4) {
  animation-delay: 210ms;
}

.badge-card span {
  animation: badgeFloat 2400ms ease-in-out infinite;
  display: inline-block;
  font-size: 30px;
}

.badge-card small {
  color: var(--muted);
}

.future-title {
  margin-top: 16px;
}

.future-badges .badge-card,
.locked-badge {
  opacity: 0.72;
}

.loader {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
}

.primary-action-card {
  align-items: center;
  background: linear-gradient(135deg, #dff8ea, #fffdf1 62%, #dff4ff);
  border: 2px solid #9ddfba;
  border-radius: 14px;
  box-shadow: 0 18px 38px rgba(22, 163, 74, 0.12);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(180px, 1fr) auto;
  padding: 18px;
}

.start-task-button {
  background: linear-gradient(135deg, #16a34a, #2563eb);
  border-radius: 999px;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
  font-size: clamp(18px, 4vw, 24px);
  min-height: 58px;
  padding: 16px 24px;
}

.start-mascot {
  animation: animalWalk 1600ms ease-in-out infinite;
  background: #fffdf1;
  border: 2px solid #facc15;
  border-radius: 18px;
  display: grid;
  font-size: 38px;
  height: 70px;
  place-items: center;
  width: 70px;
}

.primary-action-card p {
  color: #245b49;
  font-weight: 900;
  grid-column: 1 / -1;
  margin: 0;
}

.today-progress-card {
  align-items: center;
  background: linear-gradient(135deg, #ffffff, #dff4ff);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr auto;
  padding: 18px;
}

.early-bird-card {
  align-items: start;
  background: linear-gradient(135deg, #fff7ed, #fffdf1 60%, #dff4ff);
  border: 1px solid #facc15;
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(250, 204, 21, 0.12);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 0.85fr) minmax(260px, 1.15fr);
  padding: 12px;
}

.early-bird-card.early {
  border-color: #16a34a;
  box-shadow: 0 16px 34px rgba(22, 163, 74, 0.14);
}

.early-bird-main {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 48px 1fr;
  text-align: left;
}

.early-bird-icon {
  animation: sunRise 2200ms ease-in-out infinite;
  background: var(--lemon);
  border-radius: 12px;
  display: grid;
  font-size: 27px;
  height: 48px;
  justify-self: center;
  place-items: center;
  width: 48px;
}

.early-bird-main h2,
.early-bird-main p {
  margin-bottom: 4px;
}

.early-bird-main button {
  grid-column: 1 / -1;
  min-height: 42px;
  width: 100%;
}

.early-bird-board {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.early-bird-board > strong,
.early-bird-board > .muted {
  grid-column: 1 / -1;
}

.early-row {
  align-items: center;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 8px;
  text-align: center;
}

.early-row.early {
  border-color: #9ddfba;
}

.early-row.late {
  opacity: 0.72;
}

.early-row > span:nth-child(2) {
  animation: animalWalk 2400ms ease-in-out infinite;
  background: var(--lemon);
  border-radius: 8px;
  display: grid;
  font-size: 20px;
  height: 32px;
  place-items: center;
  width: 32px;
}

.hifz-card {
  background: linear-gradient(135deg, #fffdf1, #f2fff7 45%, #dff4ff);
  border: 2px solid #facc15;
  border-radius: 16px;
  box-shadow: 0 18px 38px rgba(250, 204, 21, 0.14);
  display: grid;
  gap: 16px;
  padding: 18px;
}

.hifz-hero {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr auto;
}

.hifz-page-badge {
  animation: badgeFloat 2200ms ease-in-out infinite;
  background: var(--lemon);
  border: 2px solid #facc15;
  border-radius: 18px;
  display: grid;
  min-width: 88px;
  padding: 12px;
  place-items: center;
}

.hifz-page-badge span {
  color: #7a4e00;
  font-weight: 900;
}

.hifz-page-badge strong {
  font-size: 38px;
  line-height: 1;
}

.hifz-actions {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.hifz-actions label {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  font-weight: 900;
  gap: 10px;
  min-height: 54px;
  padding: 12px;
}

.hifz-actions label.checked {
  background: #dcfce7;
  border-color: #16a34a;
  color: #166534;
}

.hifz-actions input {
  height: 20px;
  width: 20px;
}

.hifz-notes {
  display: grid;
  gap: 8px;
}

.hifz-task-text,
.hifz-review-flags {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 8px;
  padding: 12px;
}

.hifz-task-text p {
  margin: 0;
}

.hifz-notes textarea {
  min-height: 82px;
  resize: vertical;
}

.hifz-notes button {
  justify-self: start;
}

.hifz-progress {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.hifz-progress > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.hifz-progress span {
  color: var(--muted);
  font-weight: 850;
}

.hifz-stats {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.hifz-badges,
.hifz-mini-plan {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hifz-badges span {
  background: #eef2f7;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 900;
  padding: 9px 12px;
}

.hifz-badges span.earned {
  background: #dcfce7;
  color: #166534;
}

.hifz-mini-plan button {
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--ink);
  display: grid;
  min-height: 62px;
  min-width: 126px;
  place-items: center;
}

.hifz-mini-plan button.today {
  border-color: #facc15;
  box-shadow: 0 8px 18px rgba(250, 204, 21, 0.18);
}

.hifz-mini-plan button.done {
  background: #dcfce7;
  border-color: #16a34a;
  color: #166534;
}

.hifz-mini-plan small {
  color: var(--muted);
  font-weight: 800;
}

.hifz-parent-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 14px;
}

.hifz-review-flags {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-top: 14px;
}

.hifz-review-flags span {
  background: #fff;
  border-radius: 999px;
  font-weight: 900;
  padding: 9px 12px;
}

.hifz-parent-list span {
  display: grid;
  gap: 3px;
}

.quran-panel {
  background: linear-gradient(135deg, #f2fff7, #ffffff 48%, #dff4ff);
  border: 2px solid #9ddfba;
  border-radius: 16px;
  box-shadow: 0 18px 38px rgba(22, 163, 74, 0.12);
  display: grid;
  gap: 16px;
  padding: 18px;
}

.quran-hero {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr auto;
}

.quran-hero h2 {
  margin-bottom: 4px;
}

.quran-hero button {
  background: linear-gradient(135deg, #16a34a, #2563eb);
  min-height: 52px;
}

.quran-stats {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.revision-tasks {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #9ddfba;
  border-radius: 12px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.revision-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.revision-list button {
  background: #eef2f7;
  color: var(--ink);
  min-height: 40px;
}

.revision-list button:not(.revised) {
  background: linear-gradient(135deg, #16a34a, #2563eb);
  color: #ffffff;
}

.revision-list button.revised {
  background: #dcfce7;
  color: #166534;
}

.favorite-surahs {
  background: rgba(255, 253, 241, 0.78);
  border: 1px solid #facc15;
  border-radius: 12px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.favorite-surah-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.favorite-surah-list button {
  background: #fff7cc;
  color: #7a4e00;
  min-height: 40px;
}

.quran-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quran-rewards span {
  background: #eef2f7;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 900;
  padding: 9px 12px;
}

.quran-rewards span.unlocked {
  background: #dcfce7;
  color: #166534;
}

.quran-controls {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr minmax(180px, 240px);
}

.segmented-control {
  background: #eef2f7;
  border-radius: 999px;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  width: fit-content;
}

.segmented-control button {
  background: transparent;
  color: var(--ink);
  min-height: 38px;
}

.segmented-control button.active {
  background: var(--blue);
  color: #ffffff;
}

.surah-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-height: 620px;
  overflow-y: auto;
  padding-right: 4px;
}

.surah-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.surah-card.juz-amma {
  border-color: #facc15;
  box-shadow: 0 10px 22px rgba(250, 204, 21, 0.12);
}

.surah-card.completed {
  background: #f2fff7;
  border-color: #16a34a;
}

.surah-head {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr auto;
}

.surah-head > span {
  background: var(--lemon);
  border-radius: 12px;
  display: grid;
  font-weight: 950;
  height: 42px;
  place-items: center;
  width: 42px;
}

.surah-head h3 {
  margin-bottom: 2px;
}

.favorite-button {
  background: #eef2f7;
  border-radius: 999px;
  color: var(--muted);
  font-size: 22px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  width: 42px;
}

.favorite-button.active {
  background: #fff7cc;
  color: #d97706;
}

.surah-head small,
.surah-meta {
  color: var(--muted);
  font-weight: 850;
}

.surah-meta {
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 8px;
  justify-content: space-between;
}

.today-progress-card h2 {
  margin-bottom: 4px;
}

.today-progress-card > strong {
  color: var(--blue);
  font-size: clamp(30px, 7vw, 52px);
}

.today-progress-card .progress {
  grid-column: 1 / -1;
  height: 18px;
}

.milestone-progress {
  display: grid;
  gap: 10px;
  grid-column: 1 / -1;
}

.milestone-progress .progress {
  grid-column: auto;
}

.milestone-track {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(var(--milestone-count), minmax(26px, 1fr));
}

.milestone {
  align-items: center;
  background: #eef2f7;
  border: 2px solid #d7dee8;
  border-radius: 999px;
  color: var(--muted);
  display: flex;
  font-size: 12px;
  font-weight: 950;
  height: 28px;
  justify-content: center;
  min-width: 28px;
}

.milestone.done {
  animation: checkPop 360ms ease both;
  background: #dcfce7;
  border-color: #16a34a;
  color: #166534;
}

.quran-dashboard-progress {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #9ddfba;
  border-radius: 12px;
  display: grid;
  gap: 10px;
  grid-column: 1 / -1;
  padding: 12px;
}

.quran-dashboard-progress > div:first-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.quran-dashboard-progress span {
  color: var(--muted);
  font-weight: 850;
}

.quran-surah-milestones {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(38, minmax(6px, 1fr));
}

.quran-surah-milestones span {
  background: #d7dee8;
  border-radius: 999px;
  height: 8px;
  min-width: 6px;
}

.quran-surah-milestones span.active {
  background: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.16);
}

.quran-surah-milestones span.done {
  background: #16a34a;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.16);
}

.nudge-list {
  display: grid;
  gap: 8px;
}

.nudge-list p {
  background: #fffdf1;
  border: 1px solid #facc15;
  border-radius: 999px;
  color: #7a4e00;
  font-weight: 900;
  margin: 0;
  padding: 10px 14px;
}

.weekly-theme {
  align-items: center;
  background: linear-gradient(135deg, #fffdf1, #f2fff7);
  border: 1px solid #facc15;
  border-radius: 14px;
  display: grid;
  gap: 16px;
  grid-template-columns: auto 1fr auto;
  padding: 18px;
}

.weekly-theme.complete {
  border-color: #16a34a;
  box-shadow: 0 14px 30px rgba(22, 163, 74, 0.14);
}

.theme-icon {
  animation: iconOrbit 2600ms ease-in-out infinite;
  background: var(--lemon);
  border-radius: 16px;
  display: grid;
  font-size: 34px;
  height: 64px;
  place-items: center;
  width: 64px;
}

.weekly-theme > span {
  background: #eef2f7;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 950;
  padding: 8px 12px;
}

.weekly-theme.complete > span {
  background: #dcfce7;
  color: #166534;
}

.daily-complete-overlay {
  align-items: center;
  background: rgba(36, 48, 66, 0.42);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  z-index: 60;
}

.daily-complete-card {
  background: linear-gradient(135deg, #ffffff, #fffdf1, #dff8ea);
  border: 3px solid #facc15;
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(36, 48, 66, 0.28);
  display: grid;
  gap: 16px;
  max-height: min(92vh, 820px);
  max-width: 720px;
  overflow-y: auto;
  padding: clamp(20px, 5vw, 34px);
  position: relative;
  text-align: center;
  width: min(100%, 720px);
}

.complete-avatar {
  animation: animalWalk 1200ms ease-in-out infinite;
  background: #fffdf1;
  border: 2px solid #facc15;
  border-radius: 22px;
  font-size: 58px;
  justify-self: center;
  padding: 12px;
}

.complete-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.complete-stats span,
.reflection-box {
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}

.complete-stats strong {
  color: var(--blue);
  display: block;
  font-size: 28px;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}

.choice-row button {
  background: #eef2f7;
  color: var(--ink);
}

.choice-row button.selected {
  background: var(--blue);
  color: #ffffff;
}

.overlay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.overlay-confetti span {
  animation: fireworkPop 1500ms ease-out infinite;
  background: radial-gradient(circle, #facc15, #38bdf8 52%, transparent 70%);
  border-radius: 999px;
  height: 42px;
  left: calc(8% + var(--i) * 9%);
  position: absolute;
  top: calc(8% + (var(--i) % 3) * 18%);
  width: 42px;
  animation-delay: calc(var(--i) * 90ms);
}

.dashboard-section,
.ux-section,
.today-overview {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
}

.section-heading h2 {
  margin-bottom: 4px;
}

.ux-section summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 10px;
  list-style: none;
}

.ux-section summary::-webkit-details-marker {
  display: none;
}

.ux-section summary span {
  background: #eef2f7;
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  margin-left: auto;
  padding: 7px 10px;
}

.ux-section[open] summary {
  margin-bottom: 16px;
}

.journey-list {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.journey-step {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  min-width: 0;
  scroll-margin-top: 110px;
}

.step-marker {
  align-items: center;
  background: #e7ecf3;
  border: 2px solid #d7dee8;
  border-radius: 999px;
  color: var(--muted);
  display: flex;
  font-weight: 950;
  height: 38px;
  justify-content: center;
  justify-self: start;
  width: 38px;
}

.journey-step.complete .step-marker {
  background: #dcfce7;
  border-color: #16a34a;
  color: #166534;
}

.journey-step.current .step-marker,
.journey-step.current .activity {
  animation: currentTaskGlow 1800ms ease-in-out infinite;
  border-color: #facc15;
}

.journey-step.current .activity-icon {
  animation-duration: 1200ms;
}

.journey-step.later {
  opacity: 0.78;
}

.journey-step.later .activity-icon {
  animation-duration: 4200ms;
}

.journey-step.complete .activity-icon::after {
  animation: sparklePop 1200ms ease-in-out infinite;
  content: "✨";
  font-size: 14px;
  position: absolute;
  right: 4px;
  top: 4px;
}

.step-content > .eyebrow {
  margin-bottom: 6px;
}

.journey-step .activity {
  grid-template-columns: 1fr;
  height: 100%;
}

.journey-step .activity-icon {
  justify-self: start;
}

.journey-step .row {
  align-items: start;
}

.quiz-panel {
  background: linear-gradient(135deg, #ecfeff, #fff7ed);
  border-color: #bae6fd;
}

.boss-battle {
  align-items: center;
  background: linear-gradient(135deg, #f8fafc, #eef2f7);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 18px;
}

.boss-battle.ready {
  animation: currentTaskGlow 1900ms ease-in-out infinite;
  background: linear-gradient(135deg, #fff7ed, #fef3c7);
  border-color: #fb923c;
}

.boss-battle > span {
  animation: iconBounce 1400ms ease-in-out infinite;
  font-size: 58px;
}

.quiz-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
}

.quiz-card,
.quiz-mini {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  padding: 16px;
}

.quiz-card.featured {
  border-color: #60a5fa;
}

.quiz-card-top,
.quiz-status-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.quiz-badge {
  background: #dbeafe;
  border-radius: 999px;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 950;
  padding: 6px 10px;
}

.quiz-card blockquote {
  background: #f8fafc;
  border-left: 4px solid #38bdf8;
  border-radius: 8px;
  margin: 10px 0;
  padding: 10px;
}

.emoji-prompt {
  font-size: clamp(36px, 8vw, 64px);
  line-height: 1;
  padding: 8px 0;
}

.quiz-media {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  object-fit: cover;
  width: 100%;
}

.quiz-audio {
  width: 100%;
}

.quiz-question {
  display: block;
  font-size: 20px;
  margin: 12px 0;
}

.quiz-options {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 12px 0;
}

.quiz-options button {
  background: #f8fafc;
  border: 2px solid #dbe4ef;
  color: var(--text);
  justify-content: flex-start;
  min-height: 52px;
  text-align: left;
}

.quiz-options button.selected {
  background: #dcfce7;
  border-color: #22c55e;
}

.timer.warning {
  animation: pointBounce 900ms ease-in-out infinite;
  color: #dc2626;
  font-weight: 950;
}

.quiz-side-list {
  display: grid;
  gap: 10px;
}

.quiz-mini {
  display: grid;
  gap: 4px;
}

.quiz-mini.passed {
  background: #f0fdf4;
  border-color: #86efac;
}

.quiz-mini span,
.quiz-mini small,
.quiz-last-result,
.quiz-results-list small {
  color: var(--muted);
  font-weight: 750;
}

.quiz-editor textarea {
  min-height: 82px;
}

.quiz-results-list > div {
  grid-template-columns: 1fr;
}

.currency-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.praise-banner {
  align-items: center;
  background: linear-gradient(135deg, #fff7ed, #fef3c7);
  border: 2px solid #facc15;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(250, 204, 21, 0.16);
  display: grid;
  gap: 14px;
  grid-template-columns: auto 1fr auto;
  padding: 16px;
}

.praise-banner.unread {
  animation: currentTaskGlow 1800ms ease-in-out infinite;
}

.praise-banner > span {
  animation: iconBounce 1600ms ease-in-out infinite;
  font-size: 44px;
}

.daily-surprise.ready .game-card-head > span,
.daily-surprise.ready button {
  animation: surpriseWiggle 1100ms ease-in-out infinite;
}

.pet-avatar {
  animation: animalWalk 1800ms ease-in-out infinite !important;
}

.pet-picker,
.mood-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pet-picker button,
.mood-options button {
  border-radius: 999px;
  font-size: 24px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  width: 46px;
}

.pet-picker button.selected,
.mood-options button.selected {
  background: #dcfce7;
  color: #166534;
  outline: 3px solid rgba(22, 163, 74, 0.16);
}

.story-card {
  background: linear-gradient(135deg, #eff6ff, #faf5ff);
}

.narrate-button {
  min-height: 34px;
  padding: 6px 10px;
  width: fit-content;
}

.activity.subject-quran {
  border-color: #16a34a;
  background: linear-gradient(135deg, #ffffff, #f0fdf4 65%, #fff7cc);
}

.activity.subject-fitness {
  border-color: #fb923c;
  background: linear-gradient(135deg, #ffffff, #fff7ed 65%, #fee2e2);
}

.activity.subject-german {
  border-color: #2563eb;
  background: linear-gradient(135deg, #ffffff, #eff6ff 65%, #fef3c7);
}

.activity.subject-english {
  border-color: #8b5cf6;
  background: linear-gradient(135deg, #ffffff, #f5f3ff 65%, #dbeafe);
}

.activity.subject-reading {
  border-color: #a855f7;
  background: linear-gradient(135deg, #ffffff, #faf5ff);
}

.activity.subject-housework {
  border-color: #22c55e;
  background: linear-gradient(135deg, #ffffff, #f0fdf4);
}

.activity.subject-teamwork {
  border-color: #facc15;
  background: linear-gradient(135deg, #ffffff, #fff7cc);
}

.activity.subject-math {
  border-color: #38bdf8;
  background: linear-gradient(135deg, #ffffff, #eff6ff);
}

.rarity-label {
  background: #eef2f7;
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 11px;
  font-weight: 950;
  padding: 4px 8px;
  text-transform: uppercase;
}

.reward {
  min-height: 150px;
}

.reward-icon {
  font-size: 42px;
}

.reward.available .reward-icon {
  animation: iconBounce 1500ms ease-in-out infinite;
}

.compact-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.secondary-split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.reward-progress {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.reward-progress small,
.reward-progress span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.reward.available {
  animation: rewardAvailableGlow 1900ms ease-in-out infinite;
}

.reward.available .reward-icon {
  animation: iconSpinPop 1200ms ease-in-out infinite;
}

.admin-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.admin-tabs button {
  background: #eef2f7;
  color: var(--ink);
  flex: 0 0 auto;
  min-height: 46px;
}

.admin-tabs button.active {
  background: var(--blue);
  color: #ffffff;
}

.overview-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.overview-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.overview-card.attention {
  border-color: #f97316;
  box-shadow: 0 12px 28px rgba(249, 115, 22, 0.12);
}

.overview-card.great {
  border-color: #16a34a;
  box-shadow: 0 12px 28px rgba(22, 163, 74, 0.12);
}

.overview-child {
  align-items: center;
  display: flex;
  gap: 12px;
}

.overview-child > span {
  animation: animalWalk 2200ms ease-in-out infinite;
  background: var(--lemon);
  border-radius: 12px;
  display: grid;
  font-size: 28px;
  height: 52px;
  place-items: center;
  width: 52px;
}

.overview-child h3,
.overview-child p {
  margin-bottom: 0;
}

.overview-child p {
  color: var(--muted);
  font-weight: 850;
}

.overview-stats {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.overview-stats span {
  background: #f7f9fc;
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  padding: 9px;
}

.overview-stats strong {
  color: var(--ink);
  display: block;
  font-size: 20px;
}

.smart-insights {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
}

.insight-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.insight-grid article {
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 6px;
  padding: 14px;
}

.insight-grid span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.reflection-list {
  display: grid;
  gap: 10px;
}

.reflection-list article {
  align-items: center;
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr;
  padding: 12px;
}

.reflection-list article > span {
  background: var(--lemon);
  border-radius: 12px;
  display: grid;
  font-size: 26px;
  height: 48px;
  place-items: center;
  width: 48px;
}

@keyframes currentTaskGlow {
  0%, 100% {
    box-shadow: 0 10px 22px rgba(250, 204, 21, 0.12);
  }
  50% {
    box-shadow: 0 18px 36px rgba(250, 204, 21, 0.32);
  }
}

@keyframes rewardAvailableGlow {
  0%, 100% {
    box-shadow: 0 10px 22px rgba(22, 163, 74, 0.08);
  }
  50% {
    box-shadow: 0 18px 34px rgba(22, 163, 74, 0.24);
  }
}

@media (max-width: 820px) {
  .app-shell > header, .hero, .admin-top {
    align-items: stretch;
    flex-direction: column;
  }

  .stats, .split, .admin-grid, .secondary-split, .primary-action-card {
    grid-template-columns: 1fr;
  }

  .today-progress-card,
  .weekly-theme,
  .early-bird-card,
  .complete-stats {
    grid-template-columns: 1fr;
  }

  .early-bird-main {
    grid-template-columns: 48px 1fr;
  }

  .hifz-hero,
  .quran-hero,
  .quran-controls {
    grid-template-columns: 1fr;
  }

  .segmented-control {
    width: 100%;
  }

  .segmented-control button {
    flex: 1;
  }

  .early-bird-main button {
    width: 100%;
  }

  .early-row {
    grid-template-columns: 1fr;
  }

  .early-row small {
    grid-column: auto;
  }

  .weekly-theme > span {
    justify-self: start;
  }

  .start-mascot {
    justify-self: center;
  }

  .journey-list {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }

  .journey-step {
    grid-template-columns: 1fr;
  }

  .step-marker {
    height: 34px;
    width: 34px;
  }

  .admin-tabs button {
    min-width: 150px;
  }

  .kid-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .xp-wrap {
    grid-template-columns: 1fr;
  }

  .game-grid {
    grid-template-columns: 1fr;
  }

  .map-path {
    grid-template-columns: repeat(3, 1fr);
  }

  .avatar-picker {
    grid-template-columns: repeat(4, minmax(52px, 1fr));
  }

  .leader {
    grid-template-columns: 36px 44px 1fr;
  }

  .leader-points {
    grid-column: 3;
  }

  .mascot {
    bottom: 10px;
    right: 10px;
    transform: scale(0.9);
  }

  .daily-welcome,
  .quest-banner {
    left: 16px;
    right: 16px;
    text-align: center;
    transform: none;
  }

  .reward-unlock-toast {
    left: 16px;
    right: 16px;
    text-align: center;
  }

  .activity-timer {
    grid-template-columns: 1fr;
  }

  .daily-challenge {
    grid-template-columns: 1fr;
  }

  .milestone-track {
    gap: 5px;
    grid-template-columns: repeat(var(--milestone-count), minmax(22px, 1fr));
  }

  .milestone {
    font-size: 11px;
    height: 24px;
    min-width: 24px;
  }

  .quran-surah-milestones {
    grid-template-columns: repeat(19, minmax(6px, 1fr));
  }

  .flag-pole {
    min-height: 12px;
    width: 100%;
  }

  .flag-pole::after {
    left: 8px;
    top: 8px;
  }

  .calendar-panel {
    grid-template-columns: 1fr;
  }

  .prayers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reward, .activity {
    grid-template-columns: 1fr;
  }

  .quiz-grid {
    grid-template-columns: 1fr;
  }

  .quiz-options {
    grid-template-columns: 1fr;
  }

  .currency-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .praise-banner {
    grid-template-columns: 1fr;
  }

  .approval, .mini-list > div {
    grid-template-columns: 1fr;
  }

  .day-buttons button {
    flex: 1 1 64px;
  }

  .badge-grid {
    grid-template-columns: 1fr;
  }

  .mission {
    grid-template-columns: auto 1fr;
  }

  .achievement-stats {
    grid-template-columns: 1fr;
  }
}