.achievements-content { max-width: 1460px; }
.achievements-content [hidden] { display:none !important; }
.ach-dashboard-link { padding: 9px 15px; border: 1px solid rgba(183,220,105,.2); border-radius: 999px; color: #dfe8ce; background: rgba(183,220,105,.07); text-decoration: none; font-size: .75rem; font-weight: 700; }
.ach-hero { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 8px 0 28px; }
.ach-hero h1 { margin: 6px 0 5px; font-size: clamp(2.3rem,5vw,4.3rem); line-height: .95; letter-spacing: -.055em; }
.ach-hero > div:first-child > p:last-child { max-width: 590px; margin: 0; color: #92978f; }
.ach-overview { display: flex; align-items: center; gap: 15px; min-width: 280px; padding: 15px 20px; border: 1px solid rgba(183,220,105,.17); border-radius: 17px; background: rgba(22,24,20,.8); }
.ach-overview-ring { --size: 66px; width: var(--size); aspect-ratio: 1; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: conic-gradient(#b7dc69 calc(var(--progress)*1%),rgba(255,255,255,.08) 0); }
.ach-overview-ring::before { content:''; grid-area:1/1; width:54px; aspect-ratio:1; border-radius:50%; background:#171a15; }
.ach-overview-ring strong,.ach-overview-ring span { z-index:1; grid-area:1/1; text-align:center; }
.ach-overview-ring strong { transform:translateY(-5px); font-size:1rem; }
.ach-overview-ring span { transform:translateY(9px); color:#747a6f; font-size:.52rem; }
.ach-overview > div:last-child strong,.ach-overview > div:last-child span { display:block; }
.ach-overview > div:last-child strong { font-size:.86rem; }
.ach-overview > div:last-child span { margin-top:3px; color:#747a70; font-size:.66rem; }
.ach-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
.ach-stats article { display:grid; padding:17px; border:1px solid rgba(183,220,105,.13); border-radius:14px; background:rgba(21,23,19,.78); }
.ach-stats span { color:#767c71; font-size:.65rem; }
.ach-stats strong { margin:5px 0 7px; font-size:1.35rem; }
.ach-stats small { color:#9bb66a; font-size:.58rem; }
.ach-runtime-state,.ach-runtime-error { min-height:96px; margin-bottom:20px; padding:20px; border:1px solid rgba(183,220,105,.16); border-radius:15px; background:rgba(21,23,19,.78); }
.ach-runtime-state { display:flex; align-items:center; gap:15px; }
.ach-runtime-state > span { width:35px; aspect-ratio:1; flex:0 0 auto; border:3px solid rgba(183,220,105,.14); border-top-color:#b7dc69; border-radius:50%; animation:achSpin .8s linear infinite; }
.ach-runtime-state strong,.ach-runtime-state small { display:block; }
.ach-runtime-state strong { font-size:.82rem; }
.ach-runtime-state small { margin-top:4px; color:#747b70; font-size:.7rem; }
.ach-runtime-error { text-align:center; }
.ach-runtime-error p { margin:7px 0 14px; color:#777e72; font-size:.75rem; }
.ach-runtime-error button { padding:9px 16px; border:0; border-radius:999px; color:#172016; background:#b7dc69; font-size:.7rem; font-weight:800; }
@keyframes achSpin { to { transform:rotate(360deg); } }
.ach-toolbar { position:sticky; top:88px; z-index:20; display:flex; justify-content:space-between; gap:15px; margin-bottom:28px; padding:8px; border:1px solid rgba(255,255,255,.06); border-radius:15px; background:rgba(17,19,16,.88); backdrop-filter:blur(15px); }
.ach-tabs { display:flex; gap:4px; overflow:auto; scrollbar-width:none; }
.ach-tabs::-webkit-scrollbar { display:none; }
.ach-tabs button { flex:0 0 auto; padding:9px 13px; border:0; border-radius:9px; color:#787e73; background:transparent; font-size:.7rem; font-weight:700; }
.ach-tabs button span { margin-left:4px; color:#555a52; font-size:.58rem; }
.ach-tabs button.is-active { color:#172016; background:#b7dc69; }
.ach-tabs button.is-active span { color:#3b4829; }
.ach-search { display:flex; align-items:center; gap:7px; min-width:230px; padding:0 11px; border:1px solid rgba(255,255,255,.07); border-radius:9px; background:rgba(255,255,255,.025); color:#697064; }
.ach-search input { width:100%; border:0; outline:0; color:#ddd; background:transparent; font-size:.69rem; }
.ach-search input::placeholder { color:#5f655b; }
.ach-section { margin-bottom:34px; }
.ach-section-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:13px; padding:0 3px; }
.ach-section-head h2 { margin:4px 0 0; font-size:1.15rem; }
.ach-section-head > span { color:#747a6f; font-size:.65rem; }
.ach-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.ach-card { position:relative; display:grid; grid-template-columns:58px 1fr auto; align-items:center; gap:12px; min-height:92px; padding:14px 14px 18px; overflow:hidden; border:1px solid rgba(255,255,255,.07); border-radius:14px; background:linear-gradient(135deg,rgba(183,220,105,.035),transparent 55%),rgba(23,25,21,.88); text-align:left; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.ach-card:hover { transform:translateY(-2px); border-color:rgba(183,220,105,.3); background:linear-gradient(135deg,rgba(183,220,105,.075),transparent 60%),rgba(25,28,23,.95); }
.ach-card[data-status="unlocked"] { border-color:rgba(183,220,105,.18); }
.ach-card[hidden] { display:none; }
.ach-badge { width:54px; height:54px; display:grid; place-items:center; border-radius:15px; border:1px solid rgba(255,255,255,.1); color:#fff; font-size:1.25rem; font-weight:900; box-shadow:inset 0 1px rgba(255,255,255,.13); }
.ach-badge--common { background:linear-gradient(145deg,#758265,#3d4637); }
.ach-badge--rare { background:linear-gradient(145deg,#adc966,#5f773a); }
.ach-badge--epic { background:linear-gradient(145deg,#7c708c,#443d50); }
.ach-badge--legendary { background:linear-gradient(145deg,#d0a656,#70532b); }
.ach-card-copy { min-width:0; }
.ach-card-copy strong,.ach-card-copy small { display:block; }
.ach-card-copy strong { overflow:hidden; color:#e3e6df; font-size:.79rem; white-space:nowrap; text-overflow:ellipsis; }
.ach-card-copy small { margin-top:4px; color:#73796e; font-size:.62rem; line-height:1.3; }
.ach-card-state { align-self:start; padding:4px 7px; border-radius:999px; color:#abc973; background:rgba(183,220,105,.08); font-size:.54rem; font-weight:700; white-space:nowrap; }
.ach-card > i { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.05); }
.ach-card > i::after { content:''; display:block; width:var(--card-progress); height:100%; transform:scaleX(0); transform-origin:left center; background:#b7dc69; transition:transform .72s cubic-bezier(.22,1,.36,1); }
.ach-card.is-progress-visible > i::after { transform:scaleX(1); }
.ach-card.is-locked { filter:saturate(.35); }
.ach-card.is-locked .ach-badge { opacity:.55; }
.ach-card.is-locked .ach-card-state { color:#7b8077; background:rgba(255,255,255,.04); }
.ach-card.is-locked > i::after { transform:scaleX(1); background:#676d61; }
.achievement-modal { width:min(780px,calc(100% - 28px)); max-height:calc(100vh - 28px); padding:0; overflow:auto; border:1px solid rgba(183,220,105,.24); border-radius:22px; color:#fff; background:rgba(18,21,16,.98); box-shadow:0 30px 100px rgba(0,0,0,.7); }
.achievement-modal::backdrop { background:rgba(0,0,0,.74); backdrop-filter:blur(7px); }
.achievement-modal-close { position:absolute; top:14px; right:14px; z-index:2; width:34px; height:34px; padding:0; border:1px solid rgba(255,255,255,.09); border-radius:50%; background:rgba(0,0,0,.2); font-size:1.25rem; }
.achievement-modal-visual { min-height:176px; display:grid; place-items:center; position:relative; overflow:hidden; background:radial-gradient(circle at 50% 80%,rgba(183,220,105,.22),transparent 48%),linear-gradient(135deg,rgba(183,220,105,.1),rgba(255,255,255,.015)); border-bottom:1px solid rgba(255,255,255,.06); }
.achievement-modal-visual::before,.achievement-modal-visual::after { content:''; position:absolute; width:180px; height:14px; background:rgba(183,220,105,.07); transform:rotate(-16deg); filter:blur(1px); }
.achievement-modal-visual::before { top:42px; left:18%; }
.achievement-modal-visual::after { bottom:36px; right:15%; width:230px; }
.achievement-modal-visual > span { z-index:1; width:92px; height:92px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.16); border-radius:25px; background:linear-gradient(145deg,#adc966,#526731); box-shadow:0 20px 50px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.2); font-size:2.3rem; font-weight:900; }
.achievement-modal-visual > i { position:absolute; bottom:13px; z-index:1; padding:4px 9px; border:1px solid rgba(255,255,255,.09); border-radius:999px; color:#c9d5b3; background:rgba(0,0,0,.25); font-size:.58rem; font-style:normal; text-transform:uppercase; letter-spacing:.12em; }
.achievement-modal-copy { padding:25px; }
.achievement-modal-heading { display:flex; align-items:start; justify-content:space-between; gap:15px; }
.achievement-modal-heading h2 { margin:4px 0 0; font-size:1.65rem; letter-spacing:-.035em; }
.achievement-modal-heading > span { padding:6px 9px; border-radius:999px; color:#bedc84; background:rgba(183,220,105,.09); font-size:.62rem; font-weight:700; white-space:nowrap; }
.achievement-modal-description { margin:12px 0 20px; color:#90968a; font-size:.8rem; }
.achievement-requirement { padding:14px 15px; border-left:3px solid #b7dc69; border-radius:0 11px 11px 0; background:rgba(183,220,105,.06); }
.achievement-requirement span,.achievement-requirement strong { display:block; }
.achievement-requirement span { color:#748064; font-size:.58rem; text-transform:uppercase; letter-spacing:.11em; }
.achievement-requirement strong { margin-top:4px; color:#e3e7dd; font-size:.76rem; }
.achievement-progress-copy { display:flex; justify-content:space-between; margin:20px 0 7px; color:#858b80; font-size:.65rem; }
.achievement-progress-copy strong { color:#dce5cd; }
.achievement-progress { height:8px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.07); }
.achievement-progress span { display:block; width:var(--achievement-progress,0%); height:100%; border-radius:inherit; transform:scaleX(0); transform-origin:left center; background:linear-gradient(90deg,#809f4c,#b7dc69); transition:transform .72s cubic-bezier(.22,1,.36,1); }
.achievement-progress span.is-progress-visible { transform:scaleX(1); }
@keyframes achievementProgressShine { to { background-position:32px 0; } }
.achievement-meta { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:20px 0 0; }
.achievement-meta div { padding:12px; border:1px solid rgba(255,255,255,.06); border-radius:10px; background:rgba(255,255,255,.02); }
.achievement-meta dt { color:#666c62; font-size:.57rem; }
.achievement-meta dd { margin:3px 0 0; color:#d7dad3; font-size:.72rem; font-weight:700; }
body.has-modal { overflow:hidden; }

@media (max-width:980px) { .ach-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:720px) {
  .ach-hero { align-items:stretch; flex-direction:column; }
  .ach-overview { min-width:0; }
  .ach-stats { grid-template-columns:1fr 1fr; }
  .ach-toolbar { top:76px; align-items:stretch; flex-direction:column; }
  .ach-search { min-width:0; min-height:38px; }
}
@media (max-width:560px) {
  .ach-dashboard-link { display:none; }
  .ach-hero { padding-top:0; }
  .ach-hero h1 { font-size:2.55rem; }
  .ach-grid { grid-template-columns:1fr; }
  .ach-card { grid-template-columns:52px 1fr auto; min-height:84px; }
  .ach-badge { width:48px; height:48px; border-radius:13px; }
  .achievement-modal-copy { padding:20px 16px; }
  .achievement-modal-visual { min-height:145px; }
  .achievement-modal-heading h2 { font-size:1.35rem; }
  .achievement-meta { grid-template-columns:1fr; }
}
@media (max-width:360px) {
  .ach-stats { grid-template-columns:1fr; }
  .ach-section-head > span { display:none; }
  .ach-card-state { display:none; }
  .ach-card { grid-template-columns:52px 1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .ach-card > i::after,.achievement-progress span { animation:none !important; transition:none; transform:scaleX(1); }
}