body{
background-image:
  linear-gradient(
    145deg,
    #00A19B 0%,
    #000000 4%,
    #0A0D10 12%,
    #565F64 25%,
    #C8CCCE 38%,
    #00A19B 52%,
    #C8CCCE 66%,
    #565F64 82%,
    #0A0D10 94%,
    #ffffff 100%
  ),
  radial-gradient(circle at 30% 20%, rgba(255,255,255,0.08), 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);
}

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

/* Cards become visible */
.achievement-card.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================
   HEADER
========================================================== */

.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;
}

/* ==========================================================
   SELECTOR (Input + Button now inherit OS styles)
========================================================== */

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

/* No custom styling needed — OS handles .input-field */
#achievementInput {
  width: auto;
}

/* No custom styling needed — OS handles .glass-btn */
#generateResumeBtn {
  width: auto;
  padding: 14px 22px;
}

/* ==========================================================
   GRID
========================================================== */

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

/* ==========================================================
   ACHIEVEMENT CARD — THIN GLASS (PRESERVED)
========================================================== */

.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);
}