:root{
  --bg:#0e1320;
  --panel:#151c2b;
  --panel-2:#1b2232;
  --text:#e6ecff;
  --muted:#9fb0d3;
  --ring:rgba(107,173,255,.35);
  --radius:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:.16s;
  --dur:.28s;
  --dur-slow:.6s
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:#0b1020;color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.container{max-width:1400px;margin:0 auto;padding:0 24px}

.tier-header{position:sticky;top:0;z-index:10;background:linear-gradient(180deg,rgba(11,16,32,.95),rgba(11,16,32,.7));backdrop-filter:blur(12px);border-bottom:1px solid #1b2640;transition:background var(--dur) var(--ease-soft),border-color var(--dur) var(--ease-soft)}
.tier-header::after{content:"";position:absolute;inset:auto 10% 0 10%;height:1px;background:linear-gradient(90deg,transparent,rgba(157,197,255,.3),transparent);opacity:.6;filter:blur(1px)}
.tier-row{display:flex;align-items:center;gap:16px;padding:14px 0}

.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);transform:translateZ(0)}
.brand-logo{width:36px;height:36px;border-radius:10px;filter:drop-shadow(0 6px 16px rgba(107,173,255,.12));transition:transform var(--dur) var(--ease-soft),filter var(--dur) var(--ease-soft)}
.brand:hover .brand-logo{transform:translateY(-1px);filter:drop-shadow(0 12px 26px rgba(107,173,255,.18))}
.brand-name{font-weight:800;letter-spacing:.2px}

.mode-tabs{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap}
.tab{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;text-decoration:none;color:var(--muted);background:#0f1627;border:1px solid #222d46;font-weight:800;transition:transform var(--dur) var(--ease-soft),box-shadow var(--dur) var(--ease-soft),background var(--dur) var(--ease-soft),color var(--dur) var(--ease-soft),letter-spacing var(--dur) var(--ease-soft);position:relative;will-change:transform}
.tab img{width:20px;height:20px;transition:transform var(--dur) var(--ease-soft)}
.tab::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#9dc5ff 30%,transparent 70%);transform:scaleX(0);transform-origin:center;transition:transform var(--dur) var(--ease-out);opacity:.9}
.tab:hover{color:var(--text);transform:translateY(-2px);box-shadow:0 0 0 2px rgba(157,197,255,.08) inset;letter-spacing:.2px}
.tab:hover img{transform:translateY(-1px)}
.tab:hover::after{transform:scaleX(1)}
.tab.active{background:var(--panel-2);color:var(--text);box-shadow:0 0 0 2px var(--ring) inset}
.tab.active::after{transform:scaleX(1)}
.tab.disabled{opacity:.55;pointer-events:none}

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}

.tier-col{position:relative;background:linear-gradient(180deg,#141b2b,#0f1626);border:1px solid #1f2a45;border-radius:var(--radius);overflow:hidden;box-shadow:0 22px 46px rgba(0,0,0,.45);min-height:340px;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),background var(--dur) var(--ease-soft);will-change:transform,box-shadow,filter;opacity:0;transform:translateY(10px) scale(.985);animation:rise var(--dur-slow) var(--ease-soft) both}
.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)}
/* shine removed */
/* .tier-col::after and .tier-col:hover::after deleted */
.tier-col:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 28px 60px rgba(0,0,0,.55),0 0 0 1px rgba(107,173,255,.08);border-color:#2b3a5f;filter:saturate(1.02)}

.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:relative;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;overflow:auto;flex:1;scroll-behavior:smooth;scrollbar-color:#253457 transparent}
.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:30px;height:30px;border-radius:50%;overflow:hidden;background:#0f172a;border:1px solid #26324f;flex:0 0 30px;box-shadow:0 6px 16px rgba(0,0,0,.25);transition:transform var(--dur) var(--ease-soft),box-shadow 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:cover;display:block;border-radius:50%}

.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{width:min(1280px,100%);margin:12px auto 0;text-align:left;color:#9fb0d3;font-weight:700;opacity:0;animation:fade var(--dur-slow) var(--ease-soft) .2s both}

@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:300px}
  .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}
}