:root{
  --ach-line:#e7eaf0;
  --ach-line-strong:#d9dee8;
  --ach-soft:#687184;
  --ach-text:#151922;
  --ach-blue:#3157d5;
  --ach-blue-soft:#eef3ff;
  --ach-bg:#fff;
  --ach-subtle:#f7f8fb;
  --ach-row-hover:#fafbfe;
}
*{box-sizing:border-box}
.achievements-page-body{margin:0;background:var(--ach-bg);color:var(--ach-text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.achievements-header{max-width:1080px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ach-line)}
.achievements-brand img{width:122px;height:auto;display:block}
.achievements-header>a:last-child{font-size:12px;font-weight:750;color:var(--ach-blue);text-decoration:none;white-space:nowrap}
.achievements-header>a:last-child:hover{text-decoration:underline;text-underline-offset:3px}
.achievements-shell{max-width:1040px;margin:0 auto;padding:24px 22px 56px}
.ach-loading{padding:28px 0;color:var(--ach-soft);font-size:13px}

/* 1. Compact overview: the answer to “where am I?” is visible immediately. */
.achievements-hero{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:4px 0 18px}
.achievements-hero-copy{min-width:0}
.ach-player{font-size:11px;color:var(--ach-blue);font-weight:800;letter-spacing:.02em}
.achievements-hero h1{font-size:28px;line-height:1.08;letter-spacing:-.03em;margin:4px 0 5px}
.achievements-hero p{max-width:610px;margin:0;color:var(--ach-soft);font-size:12.5px;line-height:1.5}
.achievements-score{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.achievements-ring{--ach-percent:0;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--ach-blue) calc(var(--ach-percent)*1%),#e9edf4 0);position:relative}
.achievements-ring::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--ach-bg)}
.achievements-ring>div{position:relative;z-index:1;display:flex;align-items:baseline;gap:1px}
.achievements-ring strong{font-size:18px;line-height:1;font-variant-numeric:tabular-nums}
.achievements-ring span{font-size:9px;color:var(--ach-soft);font-weight:700}
.achievements-score-copy{display:flex;flex-direction:column;gap:1px;min-width:58px}
.achievements-score-copy strong{font-size:15px;font-variant-numeric:tabular-nums}
.achievements-score-copy span{font-size:9.5px;color:var(--ach-soft);text-transform:uppercase;letter-spacing:.065em;font-weight:700}

.achievements-summary{display:grid;grid-template-columns:150px 150px minmax(0,1fr);border-top:1px solid var(--ach-line);border-bottom:1px solid var(--ach-line);margin-bottom:18px}
.achievements-summary>div{display:flex;align-items:center;gap:9px;min-width:0;padding:10px 12px 10px 0}
.achievements-summary>div+div{border-left:1px solid var(--ach-line);padding-left:14px}
.ach-summary-icon{width:27px;height:27px;display:grid;place-items:center;color:var(--ach-blue);flex:0 0 auto}
.ach-summary-icon.muted{color:#8e97a8}
.ach-summary-icon svg{width:24px;height:24px}.ach-summary-icon .ach-icon-bg{fill:currentColor;opacity:.075}.ach-summary-icon .ach-icon-stroke{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.achievements-summary p{margin:0;min-width:0;display:flex;flex-direction:column}
.achievements-summary strong{font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.achievements-summary small{font-size:9.5px;color:var(--ach-soft);margin-top:2px}

/* 2. Only three next actions. This avoids forcing a scan of all 100 items. */
.achievements-next{padding:0 0 19px;border-bottom:1px solid var(--ach-line);margin-bottom:20px}
.achievements-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:9px}
.achievements-section-heading>div{display:flex;align-items:baseline;gap:8px}
.achievements-section-heading span{font-size:9px;color:var(--ach-blue);font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.achievements-section-heading h2{font-size:14px;margin:0;letter-spacing:-.01em}
.achievements-section-heading>span:last-child{font-size:9.5px;color:var(--ach-soft);font-weight:600;text-transform:none;letter-spacing:0}
.achievements-next-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--ach-line)}
.ach-next-item{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;padding:9px 10px 8px 0;min-width:0;border-bottom:1px solid var(--ach-line)}
.ach-next-item+ .ach-next-item{border-left:1px solid var(--ach-line);padding-left:10px}
.ach-next-icon{width:28px;height:28px;display:grid;place-items:center;color:var(--tier-color,var(--ach-blue))}
.ach-next-icon svg{width:24px;height:24px}.ach-next-icon .ach-icon-bg{fill:currentColor;opacity:.075}.ach-next-icon .ach-icon-stroke{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ach-next-copy{min-width:0}.ach-next-copy strong{display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ach-next-copy small{display:block;margin:1px 0 5px;color:var(--ach-soft);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ach-next-progress{height:3px;background:#edf0f5;border-radius:999px;overflow:hidden}.ach-next-progress i{display:block;height:100%;background:var(--tier-color,var(--ach-blue));border-radius:999px}
.ach-next-meta{display:flex;justify-content:space-between;gap:8px;margin-top:3px;color:var(--ach-soft);font-size:8.5px;font-variant-numeric:tabular-nums}

/* 3. Desktop information architecture: sticky category index + grouped list. */
.achievements-main-grid{display:grid;grid-template-columns:194px minmax(0,1fr);gap:28px;align-items:start}
.achievements-sidebar{position:sticky;top:14px;min-width:0}
.ach-sidebar-section{padding-bottom:15px}.ach-sidebar-section+.ach-sidebar-section{padding-top:14px;border-top:1px solid var(--ach-line)}
.ach-sidebar-section h2{margin:0 0 7px;font-size:9px;color:var(--ach-soft);text-transform:uppercase;letter-spacing:.09em;font-weight:850}
.achievements-status{display:flex;gap:4px;flex-wrap:wrap}
.achievements-status button{border:1px solid var(--ach-line);background:transparent;color:var(--ach-soft);border-radius:999px;padding:5px 8px;font:inherit;font-size:10px;font-weight:700;cursor:pointer}
.achievements-status button:hover{border-color:var(--ach-line-strong);color:var(--ach-text)}
.achievements-status button.is-active{background:var(--ach-blue);border-color:var(--ach-blue);color:#fff}
.achievements-categories{display:flex;flex-direction:column;gap:1px}
.achievements-categories button{width:100%;border:0;background:transparent;display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:7px;align-items:center;padding:6px 6px 6px 2px;border-radius:6px;text-align:left;color:var(--ach-soft);font:inherit;cursor:pointer}
.achievements-categories button:hover{background:var(--ach-subtle);color:var(--ach-text)}
.achievements-categories button.is-active{background:var(--ach-blue-soft);color:var(--ach-blue);font-weight:800}
.ach-category-icon{width:22px;height:22px;display:grid;place-items:center;color:currentColor}.ach-category-icon svg{width:20px;height:20px}.ach-category-icon .ach-icon-bg{fill:currentColor;opacity:.065}.ach-category-icon .ach-icon-stroke{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ach-category-name{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ach-category-count{font-size:9px;font-weight:800;font-variant-numeric:tabular-nums;opacity:.8}

.achievements-results{min-width:0}
.achievements-results-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:1px solid var(--ach-line)}
.achievements-results-title h2{font-size:15px;margin:0 0 2px;letter-spacing:-.015em}.achievements-results-title span{display:block;font-size:9.5px;color:var(--ach-soft)}
.achievements-search{width:230px;height:31px;display:flex;align-items:center;gap:6px;border:1px solid var(--ach-line);border-radius:7px;padding:0 8px;color:var(--ach-soft);background:transparent}
.achievements-search:focus-within{border-color:#9cadE9;box-shadow:0 0 0 2px rgba(49,87,213,.08)}
.achievements-search span{width:15px;height:15px;display:grid;place-items:center;flex:0 0 auto}.achievements-search svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.achievements-search input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:inherit;font:inherit;font-size:10.5px;padding:0}

.achievements-list{min-width:0}
.achievement-group{padding-top:14px}
.achievement-group-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px 6px}
.achievement-group-title{display:flex;align-items:center;gap:6px;min-width:0}.achievement-group-title span{width:20px;height:20px;display:grid;place-items:center;color:var(--ach-blue)}.achievement-group-title svg{width:18px;height:18px}.achievement-group-title .ach-icon-bg{fill:currentColor;opacity:.065}.achievement-group-title .ach-icon-stroke{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.achievement-group-title h3{font-size:11.5px;margin:0}.achievement-group-header>span{font-size:9px;color:var(--ach-soft);font-weight:750;font-variant-numeric:tabular-nums}
.achievement-group-list{border-top:1px solid var(--ach-line)}

.achievement-row{--tier-color:#3157d5;display:grid;grid-template-columns:38px minmax(0,1fr) minmax(132px,170px) 76px;gap:10px;align-items:center;padding:9px 2px;border-bottom:1px solid var(--ach-line);transition:background .15s ease}
.achievement-row:hover{background:var(--ach-row-hover)}
.achievement-row.is-locked{color:#535c6d}.achievement-row.is-locked .achievement-row-icon{color:#8e97a8}.achievement-row.is-locked .achievement-row-description{color:#858d9b}
.achievement-row-icon{width:34px;height:34px;display:grid;place-items:center;color:var(--tier-color)}
.achievement-row-icon svg{width:27px;height:27px;display:block}.achievement-row-icon .ach-icon-bg{fill:currentColor;opacity:.075}.achievement-row-icon .ach-icon-stroke{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.achievement-row-main{min-width:0}
.achievement-row-title{display:flex;align-items:center;gap:7px;min-width:0}.achievement-row-title strong{font-size:11.8px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tier{flex:0 0 auto;font-size:7.5px;text-transform:uppercase;letter-spacing:.055em;font-weight:900}
.achievement-row-description{font-size:9.8px;line-height:1.35;color:var(--ach-soft);margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.achievement-row-progress-cell{min-width:0}
.achievement-row-progress-meta{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:4px;color:var(--ach-soft);font-size:8.5px;font-variant-numeric:tabular-nums}.achievement-row-progress-meta span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.achievement-row-progress-meta b{font-size:8.5px;color:var(--ach-text)}
.achievement-row-progress{height:3px;background:#edf0f5;border-radius:999px;overflow:hidden}.achievement-row-progress i{display:block;height:100%;background:var(--tier-color);border-radius:999px}
.achievement-row-state{justify-self:end;display:inline-flex;align-items:center;gap:4px;font-size:8.5px;font-weight:800;color:var(--tier-color);white-space:nowrap}.achievement-row-state svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.achievement-row.is-locked .achievement-row-state{color:#929aa8}
.tier-bronze{color:#a46031}.tier-silver{color:#697386}.tier-gold{color:#9a7400}.tier-platinum{color:#5969a9}.tier-diamond{color:#0b819f}
.achievement-row.tier-bronze,.ach-next-item.tier-bronze{--tier-color:#a46031}.achievement-row.tier-silver,.ach-next-item.tier-silver{--tier-color:#697386}.achievement-row.tier-gold,.ach-next-item.tier-gold{--tier-color:#9a7400}.achievement-row.tier-platinum,.ach-next-item.tier-platinum{--tier-color:#5969a9}.achievement-row.tier-diamond,.ach-next-item.tier-diamond{--tier-color:#0b819f}
.ach-empty{padding:26px 2px;color:var(--ach-soft);font-size:11px;border-bottom:1px solid var(--ach-line)}

html[data-theme="dark"] .achievements-page-body,body.dark-theme.achievements-page-body{--ach-bg:#101218;--ach-text:#f3f4f6;--ach-soft:#a7aebb;--ach-line:#2b303a;--ach-line-strong:#3a414d;--ach-subtle:#151922;--ach-row-hover:#151922;--ach-blue-soft:#17213f}
.dark-theme .achievements-ring{background:conic-gradient(var(--ach-blue) calc(var(--ach-percent)*1%),#252b35 0)}
.dark-theme .ach-next-progress,.dark-theme .achievement-row-progress{background:#252b35}.dark-theme .achievements-search{background:#11151c}

@media(max-width:800px){
  .achievements-shell{padding-top:20px}.achievements-main-grid{grid-template-columns:1fr;gap:13px}.achievements-sidebar{position:static;border-bottom:1px solid var(--ach-line);padding-bottom:10px}.ach-sidebar-section{padding:0}.ach-sidebar-section+.ach-sidebar-section{padding-top:9px;margin-top:9px;border-top:1px solid var(--ach-line)}
  .achievements-categories{flex-direction:row;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.achievements-categories::-webkit-scrollbar{display:none}.achievements-categories button{flex:0 0 auto;width:auto;grid-template-columns:20px auto auto;padding:5px 7px;border:1px solid transparent;border-radius:999px}.achievements-categories button.is-active{border-color:#d7e0ff}.ach-category-icon{width:18px;height:18px}.ach-category-icon svg{width:17px;height:17px}
  .achievement-row{grid-template-columns:36px minmax(0,1fr) 138px 68px}
}
@media(max-width:640px){
  .achievements-header{padding:12px 14px}.achievements-brand img{width:111px}.achievements-header>a:last-child{font-size:10.5px}.achievements-shell{padding:17px 14px 42px}
  .achievements-hero{align-items:flex-start;gap:14px;padding-bottom:14px}.achievements-hero h1{font-size:23px}.achievements-hero p{font-size:11px;line-height:1.4}.achievements-ring{width:54px;height:54px}.achievements-ring strong{font-size:16px}.achievements-score-copy{display:none}
  .achievements-summary{grid-template-columns:1fr 1fr}.achievements-summary .ach-summary-wide{grid-column:1/-1;border-left:0;border-top:1px solid var(--ach-line);padding-left:0}.achievements-summary>div{padding:8px 8px 8px 0}.achievements-summary>div+div{padding-left:10px}.achievements-summary strong{font-size:12px}.achievements-summary small{font-size:9px}.ach-summary-icon{width:24px;height:24px}.ach-summary-icon svg{width:21px;height:21px}
  .achievements-next-list{grid-template-columns:1fr}.ach-next-item{padding:8px 0}.ach-next-item+.ach-next-item{border-left:0;padding-left:0}.achievements-section-heading>span:last-child{display:none}
  .achievements-results-toolbar{align-items:flex-start;flex-direction:column;gap:8px}.achievements-search{width:100%}
  .achievement-row{grid-template-columns:32px minmax(0,1fr) 22px;gap:7px;padding:8px 0}.achievement-row-icon{width:29px;height:29px}.achievement-row-icon svg{width:24px;height:24px}.achievement-row-title strong{font-size:11.3px}.achievement-row-description{font-size:9.5px;white-space:normal;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.achievement-row-progress-cell{grid-column:2/4;margin-top:-2px}.achievement-row-state{grid-column:3;grid-row:1;align-self:start;margin-top:3px}.achievement-row-state span{display:none}.achievement-row-state svg{width:14px;height:14px}.tier{font-size:7px}.achievement-group{padding-top:12px}
}
@media(max-width:420px){.achievements-hero p{display:none}.achievements-summary{margin-bottom:14px}.achievements-next{margin-bottom:15px}.achievements-categories button{padding:4px 6px}.ach-category-name{font-size:10px}.achievements-status button{font-size:9.5px}}