body {
background-image:
  linear-gradient(
    165deg,
    #D9FCE2 0%,
    #C8F5D2 12%,
    #B4EEC8 25%,
    #9FE2BF 38%,
    #A8EED4 52%,
    #BFF5E2 66%,
    #D8FBEF 82%,
    #ECFFF7 100%
  ),
  radial-gradient(circle at 70% 25%, rgba(255,255,255,0.10), transparent 60%);
background-size: cover;
background-repeat: no-repeat;
}

.achievements-glass-thin {
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.achievements-loaded {
  opacity: 1;
  transform: scale(1);
}

.achievement-card {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.achievement-card.revealed {
  opacity: 1;
  transform: translateY(0);
}


.ach-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 28px 32px;
  border-bottom: 2px solid rgba(255,255,255,0.15);
}

.ach-title h1 {
  margin: 0;
  font-size: 32px;
  color: var(--text-primary);
}

.ach-subtitle {
  margin: 4px 0 0 0;
  font-size: clamp(0.9rem, 1.4vw, 1.3rem);
  opacity: 0.8;
}

.ach-selector {
  width:auto;
  gap: 12px;
  align-items: center;
  font-size: clamp(0.4rem, 1vw, 1rem);
}

#achievementInput {
  width: auto;
}

#generateResumeBtn {
  width: auto;
  padding: 14px 22px;
}

.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 2fr));
  gap: 20px;
  padding: 32px;
}

.achievement-card {
  position: relative;
  overflow: hidden;
  z-index: 10;
  background: rgb(from var(--bg3) r g b / 0.2);
  border-top: 1px solid rgba(255,255,255,0.8);
  border-bottom: 1px solid rgba(105,105,105,0.8);
  padding: 20px;
  border-radius: 25px;
  box-shadow:
    0 1px 4px rgba(105, 105, 105, 0.6),
    inset 0 0 25px rgba(255,255,255,0.6);
}

.ach-number {
  font-family: var(--font-display);
  z-index: 5;
  font-weight: 700;
  color: rgb(from var(--bg4) r g b / 0.9);
  margin-bottom: 10px;
  font-size: 15px;
  position: relative;
  overflow: hidden;
  text-shadow:
    -1px -1px 0 rgb(from var(--bg2) r g b / 0.9),
     1px -1px 0 rgb(from var(--bg3) r g b / 0.9),
    -1px  1px 0 rgb(from var(--bg3) r g b / 0.9),
     1px  1px 0 rgb(from var(--bg3) r g b / 0.9);
}

.achievement-card::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 0;
  right: 0;
  pointer-events: none;
  border-radius: inherit;

  background-image:
    radial-gradient(circle at center, rgba(192, 192, 192, 0.4) 0%, rgba(255, 255, 255, 0.4) 100%),
    radial-gradient(circle at center, rgba(192, 192, 192, 1) 0%, rgba(255, 255, 255, 0.4) 100%);
  background-size: 100% 1px;
  background-position: top center, bottom center;
  background-repeat: no-repeat;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* ==========================================================
   FUTURE MODE: SWITCH TO OS GLASS (NOT ACTIVE)
========================================================== */

.achievements-glass-thick .achievement-card {
  background: var(--glass-bg);
  border-left: 1px solid rgba(255,255,255,0.9);
  border-right: 1px solid rgba(255,255,255,0.9);
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  box-shadow:
    0 10px 4px rgba(255,255,255,0.6),
    inset 0 8px 8px rgba(0,0,0,0.2),
    inset 0 -8px 4px var(--glass-border-btm);
}