#dashboard-screen .upi-achievement-launch {
  width: 100%; margin: 8px 0 12px; display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(53,185,140,.32); border-radius: 14px; padding: 8px 10px;
  background: linear-gradient(135deg,rgba(225,247,255,.9),rgba(225,250,237,.92));
  color: #214b60; cursor: pointer; text-align: left; box-shadow: 0 8px 20px rgba(25,100,117,.08);
}
#dashboard-screen .upi-achievement-launch:hover { border-color: #35b98c; transform: translateY(-1px); }
#dashboard-screen .upi-achievement-launch img { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
#dashboard-screen .upi-achievement-launch span { min-width: 0; flex: 1; }
#dashboard-screen .upi-achievement-launch small { display: block; color: #6f8d9a; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
#dashboard-screen .upi-achievement-launch b { display: block; margin-top: 2px; font-size: 12px; }
#dashboard-screen .upi-achievement-launch strong { color: #168069; font-size: 12px; white-space: nowrap; }

#ach-ov { position: fixed; inset: 0; z-index: 12200; display: grid; place-items: center; padding: 24px; background: rgba(7,34,47,.68); backdrop-filter: blur(10px); }
#ach-ov .ach-dialog { width: min(980px,96vw); height: min(820px,92dvh); min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(87,197,190,.42); border-radius: 26px; background: linear-gradient(150deg,#f8ffff,#eaf8f5); box-shadow: 0 30px 90px rgba(3,36,51,.38); font-family: Nunito,Segoe UI,sans-serif; }
#ach-ov .ach-head { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid rgba(35,116,139,.13); background: rgba(255,255,255,.82); }
#ach-ov .ach-head > img { width: 54px; height: 54px; object-fit: contain; image-rendering: pixelated; }
#ach-ov .ach-head-copy { min-width: 0; flex: 1; }
#ach-ov .ach-head small { display: block; color: #6e94a3; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
#ach-ov h2 { margin: 3px 0 0; color: #173e53; font-size: 24px; }
#ach-ov .ach-close { width: 42px; height: 42px; border: 1px solid rgba(43,130,151,.2); border-radius: 13px; background: #eef9fa; color: #286178; cursor: pointer; font-size: 20px; }
#ach-ov .ach-summary { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; padding: 12px 22px; border-bottom: 1px solid rgba(35,116,139,.11); }
#ach-ov .ach-summary span { padding: 9px 11px; border: 1px solid rgba(50,139,157,.13); border-radius: 13px; background: rgba(255,255,255,.72); color: #74909d; font-size: 9px; }
#ach-ov .ach-summary b { display: block; margin-top: 2px; color: #1d5268; font-size: 15px; }
#ach-ov .ach-toolbar { flex: 0 0 auto; display: flex; gap: 7px; padding: 10px 22px; overflow-x: auto; }
#ach-ov .ach-filter { border: 1px solid rgba(43,139,155,.18); border-radius: 999px; padding: 7px 12px; background: #fff; color: #587b8a; cursor: pointer; font-size: 10px; font-weight: 900; white-space: nowrap; }
#ach-ov .ach-filter.on { border-color: #36b99a; background: #def7ed; color: #176e5d; }
#ach-ov .ach-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 22px 28px; overscroll-behavior: contain; }
#ach-ov .ach-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
#ach-ov .ach-card { position: relative; min-height: 176px; display: grid; grid-template-columns: 62px minmax(0,1fr); align-content: start; gap: 4px 10px; padding: 13px; border: 1px solid rgba(50,139,157,.16); border-radius: 18px; background: rgba(255,255,255,.82); color: #244f62; }
#ach-ov .ach-card.locked { filter: saturate(.45); opacity: .72; }
#ach-ov .ach-card.completed { border-color: rgba(51,183,139,.42); background: linear-gradient(145deg,#f9ffff,#e9faef); }
#ach-ov .ach-card.claimable { box-shadow: 0 0 0 2px rgba(247,193,72,.22),0 10px 25px rgba(28,114,116,.1); }
#ach-ov .ach-icon { grid-row: 1 / span 4; width: 62px; height: 62px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 5px 6px rgba(23,75,91,.16)); }
#ach-ov .ach-card h3 { margin: 1px 0 0; color: #204d61; font-size: 13px; line-height: 1.18; }
#ach-ov .ach-card p { margin: 0; color: #708c98; font-size: 10px; line-height: 1.35; }
#ach-ov .ach-points { color: #218371; font-size: 9px; font-weight: 900; }
#ach-ov .ach-progress { grid-column: 1 / -1; height: 7px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #dcecef; }
#ach-ov .ach-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#3f9ee0,#39c784); }
#ach-ov .ach-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; color: #688794; font-size: 9px; }
#ach-ov .ach-reward { font-weight: 850; color: #4a7180; }
#ach-ov .ach-claim { border: 0; border-radius: 9px; padding: 7px 9px; background: linear-gradient(135deg,#3e97de,#37bc82); color: #fff; cursor: pointer; font-size: 9px; font-weight: 950; }
#ach-ov .ach-claim:disabled { opacity: .55; cursor: wait; }
#ach-ov .ach-state { font-weight: 900; color: #26846e; }
#ach-ov .ach-empty { padding: 50px 20px; text-align: center; color: #6d8d99; }

@media (max-width:760px) {
  #ach-ov { padding: 0; }
  #ach-ov .ach-dialog { width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  #ach-ov .ach-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #ach-ov .ach-summary { grid-template-columns: repeat(2,1fr); padding: 10px 14px; }
  #ach-ov .ach-head,#ach-ov .ach-toolbar { padding-left: 14px; padding-right: 14px; }
  #ach-ov .ach-body { padding: 4px 14px calc(28px + env(safe-area-inset-bottom)); }
}
@media (max-width:460px) {
  #ach-ov .ach-grid { grid-template-columns: 1fr; }
}
