main.container{display:block;min-height:unset;padding-top:24px}

.tiers-wrap{display:grid;grid-template-columns:repeat(5,minmax(280px,1fr));gap:24px;width:min(1280px,100%);margin:0 auto 40px;justify-content:center;align-content:start;align-items:stretch}

.tier-col{
  position:relative;
  background:#151c2b;
  border:1px solid rgba(27,38,60,.5);
  border-radius:var(--radius);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-color:#253457 transparent;
  box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 0 1px rgba(27,38,60,.3) inset;
  min-height:min(340px,calc(100dvh - 200px));
  max-height:calc(100dvh - 180px);
  display:flex;
  flex-direction:column;
  transition:transform var(--dur) var(--ease-soft),box-shadow var(--dur) var(--ease-soft),border-color var(--dur) var(--ease-soft),filter var(--dur) var(--ease-soft);
  transform:translateZ(0);
  opacity:0;
  transform:translate3d(0,10px,0) scale(.985);
  animation:rise var(--dur-slow) var(--ease-soft) both;
  visibility:visible;
}
.tier-col:nth-child(1){animation-delay:.04s}
.tier-col:nth-child(2){animation-delay:.08s}
.tier-col:nth-child(3){animation-delay:.12s}
.tier-col:nth-child(4){animation-delay:.16s}
.tier-col:nth-child(5){animation-delay:.2s}
.tier-col:nth-child(6){animation-delay:.24s}
.tier-col:nth-child(7){animation-delay:.28s}
.tier-col:nth-child(8){animation-delay:.32s}
.tier-col::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 50% 0%,rgba(108,132,196,.08),transparent 60%);pointer-events:none;opacity:.7;transition:opacity var(--dur) var(--ease-soft)}
.tier-col::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(120deg,transparent 40%,rgba(107,173,255,.18) 50%,transparent 60%);transform:translateX(-120%);transition:transform .9s var(--ease-out)}
.tier-col:hover{
  transform:translate3d(0,-4px,0) scale(1.01);
  box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 1px rgba(107,173,255,.15);
  border-color:rgba(107,173,255,.4);
}

.tier-head{display:flex;align-items:center;gap:10px;padding:16px 18px;font-weight:900;letter-spacing:.3px;border-bottom:1px solid #202a42;font-size:19px;position:sticky;top:0;z-index:3;flex-shrink:0;overflow:hidden}
.tier-head img{width:22px;height:22px;transition:transform var(--dur) var(--ease-soft),filter var(--dur) var(--ease-soft)}
.tier-head:hover img{transform:translateY(-1px);filter:drop-shadow(0 10px 24px rgba(107,173,255,.16))}
.tier-head.t1{background:linear-gradient(180deg,#2b2213,#1a1614)}
.tier-head.t2{background:linear-gradient(180deg,#29303c,#1a1f2c)}
.tier-head.t3{background:linear-gradient(180deg,#3a2416,#1a1512)}
.tier-head.t4{background:linear-gradient(180deg,#1e2538,#141a2a)}
.tier-head.t5{background:linear-gradient(180deg,#1a2232,#0f1626)}

.tier-list{list-style:none;margin:0;padding:0 0 12px;flex:0 0 auto;scroll-behavior:smooth}
.tier-list li{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #1b2339;transition:background var(--dur) var(--ease-soft),transform var(--dur) var(--ease-soft),filter var(--dur) var(--ease-soft)}
.tier-list li:nth-child(odd){background:#0f182c}
.tier-list li:hover,.tier-list li.th,.tier-list li:focus-within{background:#16223b;transform:translateY(-2px)}
.tier-list li:active{transform:translateY(0) scale(.995)}

.avatar {
  width: 38px;
  height: 48px;
  border: none;
  border-radius: 6px;
  overflow: hidden;
  background: none;
  box-shadow: none;
  flex: 0 0 38px;
  transition: transform var(--dur) var(--ease-soft);
}
.tier-list li:hover .avatar{transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,0,0,.3)}
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 6px;
  background: none;
}
.name{position:relative;display:inline-grid;overflow:hidden;min-width:2ch;align-items:center}
.name .label{grid-area:1/1;display:inline-block;font-weight:800;transform:translateX(0);opacity:1;transition:transform var(--dur) var(--ease-soft),opacity var(--dur) var(--ease-soft),letter-spacing var(--dur) var(--ease-soft);will-change:transform,opacity}
.name .base{letter-spacing:.2px}
.name .hover{transform:translateX(-14px);opacity:0;white-space:nowrap;letter-spacing:.3px}
.name::before{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:linear-gradient(90deg,#9dc5ff 0%,#5aa0ff 60%,rgba(90,160,255,0) 100%);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-slow) var(--ease-soft);opacity:.85}
.tier-list li:hover .name .base,.tier-list li.th .name .base,.tier-list li:focus-within .name .base{transform:translateX(14px);opacity:0}
.tier-list li:hover .name .hover,.tier-list li.th .name .hover,.tier-list li:focus-within .name .hover{transform:translateX(0);opacity:1}
.tier-list li:hover .name::before,.tier-list li.th .name::before,.tier-list li:focus-within .name::before{transform:scaleX(1)}
.name .hover .rgn{color:#e6f0ff;font-weight:900}
.name .hover .sep{color:#a9bce6;opacity:.85}

.code-badge{margin-left:auto;font-size:12px;font-weight:900;letter-spacing:.32px;padding:5px 9px;border-radius:999px;border:1px solid #2a3a5e;background:linear-gradient(180deg,#1a2232,#0f1626);color:#dbe7ff;box-shadow:0 6px 16px rgba(0,0,0,.25);transition:background var(--dur) var(--ease-soft),color var(--dur) var(--ease-soft),border-color var(--dur) var(--ease-soft),box-shadow var(--dur) var(--ease-soft),transform var(--dur) var(--ease-soft)}
.tier-list li:hover .code-badge,.tier-list li.th .code-badge,.tier-list li:focus-within .code-badge{transform:translateY(-1px)}
.code-badge[data-code^="HT"]{background:linear-gradient(180deg,#f7d37c,#c58b2a);border-color:#f1c45d;color:#381f05;box-shadow:0 0 0 1px rgba(241,196,93,.65) inset,0 10px 22px rgba(241,196,93,.25)}
.code-badge[data-code^="LT"]{background:linear-gradient(180deg,#cf8b4a,#8b5a2a);border-color:#c77a3a;color:#2a1607;box-shadow:0 0 0 1px rgba(199,122,58,.55) inset,0 8px 18px rgba(199,122,58,.18)}
.tier-col[data-tier="1"] .code-badge[data-code^="HT"]{background:linear-gradient(180deg,#ffe39a,#d79a34);border-color:#ffd86a;color:#2a1605;box-shadow:0 0 0 1px rgba(255,216,106,.75) inset,0 12px 24px rgba(255,216,106,.32)}
.tier-col[data-tier="2"] .code-badge[data-code^="HT"]{background:linear-gradient(180deg,rgba(247,211,124,.78),rgba(197,139,42,.78));border-color:rgba(241,196,93,.78);box-shadow:0 0 0 1px rgba(241,196,93,.55) inset,0 10px 20px rgba(241,196,93,.22)}
.tier-col[data-tier="3"] .code-badge[data-code^="HT"]{background:linear-gradient(180deg,rgba(247,211,124,.46),rgba(197,139,42,.46));border-color:rgba(241,196,93,.46);box-shadow:0 0 0 1px rgba(241,196,93,.35) inset,0 8px 16px rgba(241,196,93,.14)}
.tier-col[data-tier="1"] .code-badge[data-code^="LT"]{background:linear-gradient(180deg,#e6a268,#9a622e);border-color:#e09652;box-shadow:0 0 0 1px rgba(224,150,82,.6) inset,0 10px 20px rgba(224,150,82,.24)}
.tier-col[data-tier="2"] .code-badge[data-code^="LT"]{background:linear-gradient(180deg,rgba(230,162,104,.6),rgba(154,98,46,.6));border-color:rgba(224,150,82,.6);box-shadow:0 0 0 1px rgba(224,150,82,.45) inset,0 8px 16px rgba(224,150,82,.16)}
.tier-col[data-tier="3"] .code-badge[data-code^="LT"]{background:linear-gradient(180deg,rgba(230,162,104,.34),rgba(154,98,46,.34));border-color:rgba(224,150,82,.34);box-shadow:0 0 0 1px rgba(224,150,82,.28) inset,0 6px 12px rgba(224,150,82,.1)}
.tier-col[data-tier="4"] .code-badge,.tier-col[data-tier="5"] .code-badge{background:linear-gradient(180deg,#1c2538,#0f1626);border-color:#2a3a5e;color:#dbe7ff;box-shadow:0 6px 16px rgba(0,0,0,.25)}

.delta{display:none}
#syncStatus{display:none}

@media(max-width:1280px){.tiers-wrap{grid-template-columns:repeat(4,minmax(260px,1fr))}}
@media(max-width:1000px){.tiers-wrap{grid-template-columns:repeat(3,minmax(260px,1fr))}}
@media(max-width:760px){
  .container{padding:0 16px}
  .tiers-wrap{grid-template-columns:repeat(2,minmax(240px,1fr));gap:16px;width:100%}
  .tier-col{min-height:min(300px,calc(100dvh - 200px))}
  .tier-head{padding:14px 16px;font-size:18px}
  .tier-list li{padding:12px 14px}
  .avatar{width:28px;height:28px;flex-basis:28px}
  #syncStatus{width:100%;margin:10px auto 0}
}
@media(max-width:520px){.tiers-wrap{grid-template-columns:minmax(240px,1fr)}}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

@keyframes rise{
  0%{opacity:0;transform:translateY(10px) scale(.985)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes fade{
  0%{opacity:0}
  100%{opacity:1}
}
li { animation: fadeIn .3s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }