/* ==============================
   OUTER CONTAINER
============================== */
.anm-wrapper {
  max-width: 820px;
  margin: 40px auto;
  padding: 32px 26px;
  border-radius: 26px;
  background: linear-gradient(180deg,#ffffff,#f7f9ff);
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
}

/* ==============================
   FORM
============================== */
.anm-form {
  text-align: center;
  margin-bottom: 26px;
}

.anm-form input {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  border-radius: 14px;
  border: 1px solid #dcdcdc;
}

.anm-form button {
  margin-top: 14px;
  padding: 12px 32px;
  font-size: 16px;
  border-radius: 14px;
  border: none;
  background: #1C2A54;
  color: #fff;
  cursor: pointer;
}

/* ==============================
   TITLE & LOADING
============================== */
.anm-energy-title {
  text-align: center;
  font-size: 18px;
  margin-bottom: 22px;
  color: #1C2A54;
  font-weight: 600;
}

.anm-loading {
  text-align: center;
  font-size: 15px;
  opacity: .7;
}

/* ==============================
   RESULT GRID (ONE CARD PER ROW)
============================== */
.anm-result-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ==============================
   CARD
============================== */
.anm-card {
  width: 100%;
  padding: 26px 28px;
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  opacity: 0;
  transform: translateY(12px);
  animation: anmFadeUp .6s ease forwards;
}

@keyframes anmFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

.anm-card p {
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0;
}

/* ==============================
   NUMBER BADGE
============================== */
.anm-digit {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
  0% { box-shadow: 0 0 0 rgba(0,0,0,0); }
  50% { box-shadow: 0 0 18px rgba(79,70,229,.35); }
  100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
}

/* ==============================
   COLOR THEMES
============================== */
.anm-num-0{background:#eef2ff}.anm-num-0 .anm-digit{background:#7c8cff}
.anm-num-1{background:#fff7ed}.anm-num-1 .anm-digit{background:#f59e0b}
.anm-num-2{background:#ecfeff}.anm-num-2 .anm-digit{background:#06b6d4}
.anm-num-3{background:#fdf4ff}.anm-num-3 .anm-digit{background:#c026d3}
.anm-num-4{background:#f0fdf4}.anm-num-4 .anm-digit{background:#16a34a}
.anm-num-5{background:#fff1f2}.anm-num-5 .anm-digit{background:#e11d48}
.anm-num-6{background:#fefce8}.anm-num-6 .anm-digit{background:#ca8a04}
.anm-num-7{background:#eef2ff}.anm-num-7 .anm-digit{background:#4f46e5}
.anm-num-8{background:#ecfdf5}.anm-num-8 .anm-digit{background:#059669}
.anm-num-9{background:#fff5f7}.anm-num-9 .anm-digit{background:#db2777}

/* ===== RANDOM IMAGE ===== */
.anm-image-wrapper {
  text-align: center;
  margin-bottom: 22px;
}

.anm-random-img {
  max-width: 80%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.1);
}