:root {
    color-scheme:dark;
    --bg:#08090f;
    --surface:#12141e;
    --surface-light:#1a1e2b;
    --line:#30364a;
    --muted:#a9b1c2;
    --text:#f5f4fa;
    --red:#ff3d91;
    --gold:#ffc857;
    --green:#52e6a5;
    --cyan:#36d9ff;
    --purple:#8b5cf6;
    --radius:14px;
    font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
    font-size:14px
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:96px
}
body {
    margin:0;
    background:radial-gradient(circle at 12% 7%,#a3175c22 0,transparent 24rem),radial-gradient(circle at 88% 26%,#145f8520 0,transparent 28rem),linear-gradient(180deg,#090a11 0,#0b0c14 52%,#07080d 100%);
    background-attachment:fixed;
    color:var(--text);
    line-height:1.6
}
button,a,input {
    touch-action:manipulation
}
button {
    font:inherit;
    cursor:pointer
}
button:disabled {
    cursor:not-allowed;
    opacity:.5
}
button,a {
    outline-offset:4px
}
button:focus-visible,a:focus-visible,.reward-track:focus-visible {
    outline:2px solid var(--cyan);
    box-shadow:0 0 0 4px #36d9ff26
}
a {
    color:inherit;
    text-decoration:none
}
button {
    color:inherit
}
a:hover {
    color:var(--gold)
}
[hidden] {
    display:none!important
}
.skip-link {
    position:fixed;
    top:-70px;
    left:20px;
    z-index:20;
    padding:12px;
    background:var(--gold);
    color:#171b1d
}
.skip-link:focus {
    top:12px
}
.site-header {
    height:86px;
    border-bottom:1px solid #a989ff29;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 max(28px,calc((100vw - 1280px)/2));
    gap:30px;
    background:#090a11e8;
    box-shadow:0 8px 32px #0000003d;
    backdrop-filter:blur(14px)
}
.brand {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:22px;
    font-weight:750;
    letter-spacing:3px;
    flex-shrink:0
}
.brand-mark {
    width:40px;
    height:43px;
    border:1px solid #ff5ca7;
    color:var(--red);
    display:grid;
    place-items:center;
    font-family:serif;
    font-weight:normal;
    font-size:25px;
    border-radius:10px 10px 4px 4px;
    transform:rotate(-4deg);
    background:linear-gradient(145deg,#ff3d9129,#8b5cf61a);
    box-shadow:0 0 22px #ff3d9130,inset 0 0 15px #ff3d9117
}
.brand-en {
    display:block;
    font:9px/1.7 Arial,sans-serif;
    letter-spacing:2.4px;
    color:var(--muted)
}
nav {
    display:flex;
    align-items:center;
    gap:32px;
    align-self:stretch
}
nav a,.nav-button {
    display:flex;
    align-items:center;
    position:relative;
    color:var(--muted);
    font-size:13px;
    background:none;
    border:0;
    padding:0
}
nav .nav-active {
    color:var(--text)
}
.nav-active:after {
    content:"";
    position:absolute;
    height:2px;
    width:24px;
    bottom:0;
    background:linear-gradient(90deg,var(--red),var(--purple));
    box-shadow:0 0 12px #ff3d9180;
    left:calc(50% - 12px)
}
.account {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:12px;
    max-width:270px
}
.account-status {
    color:var(--muted)
}
.account-name {
    max-width:150px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.avatar {
    height:32px;
    width:32px;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#ff3d913b,#8b5cf62b);
    color:var(--red);
    border:1px solid #ff69b44f;
    border-radius:50%;
    flex-shrink:0;
    overflow:hidden;
    position:relative
}
.avatar-image {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover
}
.page {
    max-width:1280px;
    margin:auto;
    padding:0 28px
}
.hero {
    display:grid;
    grid-template-columns:1.25fr 1fr;
    gap:85px;
    padding:54px 0 36px;
    position:relative
}
.hero-copy {
    padding-top:3px
}
.eyebrow {
    display:flex;
    align-items:center;
    gap:9px;
    font-size:10px;
    letter-spacing:2px;
    color:#ff63ad;
    text-shadow:0 0 14px #ff3d9160
}
.eyebrow>span:last-child {
    letter-spacing:.5px;
    color:var(--muted);
    border-left:1px solid var(--line);
    padding-left:12px;
    margin-left:5px;
    font-size:11px
}
.live-dot {
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--red);
    box-shadow:0 0 12px #ff3d91
}
h1 {
    font-size:clamp(30px,3.5vw,46px);
    letter-spacing:1px;
    line-height:1.4;
    margin:20px 0 16px;
    font-weight:700
}
h1 span {
    color:var(--gold);
    text-shadow:0 0 25px #ffc85726
}
.hero-copy p {
    color:var(--muted);
    line-height:1.9;
    font-size:13px
}
.hero-meta {
    display:flex;
    align-items:center;
    gap:17px;
    color:#b0b7b8;
    font-size:11px;
    margin-top:29px
}
.hero-meta strong {
    color:var(--gold);
    font-weight:500
}
.meta-divider {
    width:1px;
    height:12px;
    background:var(--line)
}
.progress-card {
    border:1px solid #8b5cf670;
    background:radial-gradient(ellipse at 95% 5%,#36d9ff1a,transparent 43%),radial-gradient(ellipse at 7% 95%,#ff3d9118,transparent 46%),linear-gradient(145deg,#1a1727,#101521);
    border-radius:var(--radius);
    padding:24px 28px;
    box-shadow:0 18px 60px #00000055,0 0 34px #8b5cf612,inset 0 1px #ffffff0d;
    overflow:hidden
}
.progress-card-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px
}
.section-kicker {
    color:var(--muted);
    font:10px/1.6 Arial,sans-serif;
    letter-spacing:2px
}
.badge,.small-badge {
    font-size:10px;
    padding:3px 10px;
    border-radius:4px;
    border:1px solid #ffc85770;
    color:var(--gold);
    background:#ffc85712;
    box-shadow:inset 0 0 12px #ffc8570d
}
.level-display {
    display:flex;
    align-items:baseline;
    position:relative;
    margin:17px 0 16px;
    gap:12px
}
.level-label {
    color:var(--muted);
    font-size:11px
}
.level-display>strong {
    font:500 62px/1.1 Georgia,serif;
    color:var(--gold);
    text-shadow:0 0 24px #ffc85745
}
.level-max {
    color:#757e80;
    font:15px Georgia,serif
}
.level-glyph {
    position:absolute;
    right:4px;
    bottom:-10px;
    font-size:92px;
    color:#dec08a0d;
    line-height:1
}
.xp-label {
    display:flex;
    justify-content:space-between;
    font-size:11px;
    color:var(--muted)
}
.xp-label strong {
    font-weight:500;
    color:#c6c7c2;
    font-family:Arial,sans-serif
}
.xp-track {
    height:7px;
    background:#070912;
    border-radius:4px;
    overflow:hidden;
    margin:10px 0 23px;
    border:1px solid #3c4055;
    box-shadow:inset 0 1px 5px #000000b0
}
.xp-track span {
    display:block;
    width:0;
    height:100%;
    background:linear-gradient(90deg,var(--red),var(--purple) 48%,var(--cyan));
    box-shadow:0 0 14px #36d9ffaa;
    transition:width .5s
}
.progress-details {
    display:flex;
    gap:40px;
    border-top:1px solid #8992b025;
    padding-top:16px
}
.progress-details>div {
    display:flex;
    flex-direction:column;
    gap:3px
}
.progress-details span {
    color:var(--muted);
    font-size:10px
}
.progress-details strong {
    font:500 18px Arial,sans-serif;
    color:var(--text)
}
.progress-note {
    font-size:10px;
    color:#818b8d;
    margin:16px 0 0
}
.purchase-section {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-bottom:43px
}
.purchase-card {
    border:1px solid #714fd866;
    border-radius:10px;
    background:linear-gradient(125deg,#191327,#111620);
    display:flex;
    align-items:center;
    gap:17px;
    padding:20px;
    box-shadow:inset 3px 0 #8b5cf6,0 10px 30px #0000002e
}
.purchase-card.premium {
    border-color:#ffc85770;
    background:radial-gradient(circle at 90% 20%,#ffc8571b,transparent 42%),linear-gradient(115deg,#241d19,#15151e);
    box-shadow:inset 3px 0 var(--gold),0 10px 30px #0000002e
}
.purchase-icon {
    height:44px;
    width:44px;
    flex-shrink:0;
    background:linear-gradient(145deg,#ff3d9132,#8b5cf62b);
    border:1px solid #bd6cff70;
    border-radius:10px;
    display:grid;
    place-items:center;
    color:var(--red);
    font-size:25px;
    box-shadow:0 0 20px #8b5cf629
}
.premium .purchase-icon {
    color:var(--gold);
    background:#ffc8571f;
    border-color:#ffc85775;
    box-shadow:0 0 20px #ffc85726
}
.purchase-copy {
    flex:1;
    min-width:0
}
.purchase-heading {
    display:flex;
    align-items:center;
    gap:10px
}
.purchase-heading h2 {
    font-size:14px;
    font-weight:600;
    margin:0
}
.small-badge {
    padding:1px 6px;
    font-size:9px;
    white-space:nowrap;
    color:var(--muted);
    border-color:var(--line);
    background:none
}
.purchase-copy p {
    font-size:10px;
    color:var(--muted);
    margin:4px 0 0
}
.pass-status {
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:5px;
    color:#bac1d1;
    font-size:9px
}
.pass-status strong {
    color:#ef9dff;
    font-size:13px;
    text-shadow:0 0 10px #d555ff65
}
.pass-route {
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding-left:12px;
    border-left:1px solid #62527f
}
.pass-route b {
    color:#dbe1ef;
    font:700 9px/1 Arial,sans-serif
}
.pass-route b:last-child {
    color:var(--cyan)
}
.pass-route i {
    color:#9d77e4;
    font-style:normal
}
.pass-use-button {
    border-color:#9b63e0;
    background:linear-gradient(110deg,#33264e,#26394e);
    color:#efeaff
}
.pass-use-button:hover:not(:disabled) {
    border-color:#d267ff;
    background:linear-gradient(110deg,#573078,#274e64);
    box-shadow:0 6px 20px #a349dc30
}
.pass-result {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:14px;
    margin:8px 0 18px;
    padding:17px;
    border:1px solid #8b5cf66b;
    border-radius:9px;
    background:linear-gradient(120deg,#8b5cf617,#36d9ff0e)
}
.pass-result-block {
    display:flex;
    flex-direction:column;
    gap:4px;
    text-align:center
}
.pass-result-block span {
    color:var(--muted);
    font-size:9px
}
.pass-result-block strong {
    color:#f4efff;
    font:700 20px/1.2 Arial,sans-serif
}
.pass-result-arrow {
    color:var(--cyan);
    font-size:22px;
    text-shadow:0 0 14px #36d9ff80
}
.pass-result-note {
    color:#cdd4e4;
    font-size:11px;
    text-align:center
}
.button {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    border:1px solid transparent;
    border-radius:6px;
    padding:9px 17px;
    white-space:nowrap;
    font-size:11px;
    font-weight:600;
    min-height:36px
}
.button.primary {
    background:linear-gradient(110deg,var(--red),#c536ff);
    color:#fff;
    box-shadow:0 7px 20px #ff3d9135
}
.button.primary:hover:not(:disabled) {
    background:linear-gradient(110deg,#ff65ad,#d65aff);
    box-shadow:0 7px 25px #ff3d9159
}
.button.secondary {
    border-color:#7660bf;
    background:#28203b;
    color:#eee9ff
}
.button.secondary:hover:not(:disabled) {
    background:#382958;
    border-color:#a57dff
}
.button.gold {
    background:linear-gradient(110deg,#ffd66d,var(--gold));
    color:#251b08;
    box-shadow:0 7px 20px #ffc85735
}
.button.gold:hover:not(:disabled) {
    background:linear-gradient(110deg,#ffe59c,#ffd36c);
    box-shadow:0 7px 25px #ffc85755
}
.section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px
}
.section-heading h2 {
    font-size:23px;
    letter-spacing:1px;
    line-height:1.3;
    margin:6px 0 0;
    font-weight:600
}
.heading-count {
    font:9px Arial,sans-serif;
    color:var(--muted);
    letter-spacing:1.5px;
    margin-left:16px
}
.reward-legend {
    display:flex;
    gap:18px;
    font-size:10px;
    color:var(--muted)
}
.reward-legend>span {
    display:flex;
    gap:7px;
    align-items:center
}
.legend-dot {
    width:6px;
    height:6px;
    border-radius:2px;
    background:var(--cyan);
    box-shadow:0 0 9px #36d9ffbb
}
.legend-dot.premium-dot {
    background:var(--gold);
    box-shadow:0 0 9px #ffc857aa
}
.reward-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px
}
.range-tabs {
    display:flex;
    gap:4px;
    padding:3px;
    border:1px solid #414862;
    border-radius:7px;
    background:#0c0e17
}
.range-tabs button {
    border:0;
    background:none;
    color:var(--muted);
    font:10px/1.5 Arial,sans-serif;
    letter-spacing:1px;
    padding:8px 17px;
    border-radius:4px;
    min-height:32px
}
.range-tabs button.active {
    background:linear-gradient(110deg,#8b5cf64f,#ff3d913d);
    color:#fff;
    box-shadow:inset 0 0 0 1px #ba7cff66
}
.track-navigation {
    display:flex;
    gap:7px
}
.icon-button {
    height:32px;
    width:32px;
    min-width:32px;
    border:1px solid #4d5573;
    border-radius:5px;
    background:#171a27;
    color:#d6dded;
    display:inline-grid;
    place-items:center;
    font-size:16px
}
.icon-button:hover {
    background:#2b2443;
    border-color:#936dff;
    color:#fff
}
.reward-track {
    display:flex;
    gap:7px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    touch-action:pan-y;
    cursor:grab;
    padding:10px 10px 18px;
    scrollbar-color:#8b5cf6 #11131d;
    scrollbar-width:thin;
    border:1px solid #343b54;
    border-radius:12px;
    background:linear-gradient(180deg,#0b0d15,#111420 14%,#0b0d14 100%);
    box-shadow:inset 0 1px #ffffff0a,inset 0 -24px 50px #00000028
}
.reward-track.is-dragging,
.reward-track.is-gliding {
    user-select:none
}
.reward-track.is-dragging,
.reward-track.is-dragging .reward-card {
    cursor:grabbing
}
.reward-track.is-dragging .reward-card {
    pointer-events:none
}
.reward-track img {
    -webkit-user-drag:none;
    user-select:none
}
.reward-track::-webkit-scrollbar {
    height:5px
}
.reward-track::-webkit-scrollbar-track {
    background:#11131d
}
.reward-track::-webkit-scrollbar-thumb {
    background:linear-gradient(90deg,var(--purple),var(--red));
    border-radius:8px
}
.level-card {
    flex:0 0 clamp(106px,calc((100% - 63px)/10),124px);
    min-width:106px;
    display:grid;
    grid-template-rows:43px 156px 156px;
    border:1px solid #35405a;
    border-radius:7px;
    background:#10131d;
    overflow:hidden;
    position:relative;
    transition:border-color .2s,box-shadow .2s,transform .2s
}
.level-card-header {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    padding:6px 3px 5px;
    font-size:10px;
    color:var(--muted);
    font-family:Arial,sans-serif;
    letter-spacing:1px;
    background:linear-gradient(180deg,#202536,#151924);
    border-bottom:1px solid #46516e
}
.level-card-header strong {
    font-size:12px;
    color:#dbe1ef;
    font-weight:700;
    line-height:1.2
}
.level-card.current {
    border-color:var(--gold);
    box-shadow:0 0 0 2px #ffc8574d,0 0 28px #ffc85735;
    transform:translateY(-2px);
    z-index:2
}
.level-card.current .level-card-header {
    background:linear-gradient(130deg,#6f5427,#30251b);
    border-bottom-color:#ffc8578c
}
.level-card.current .level-card-header strong {
    color:#ffcf67;
    text-shadow:0 0 12px #ffc85770
}
.current-indicator {
    color:var(--cyan);
    font-family:inherit;
    font-size:7px;
    letter-spacing:0;
    line-height:1.1
}
.reward-card {
    width:100%;
    height:156px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    border:0;
    border-bottom:1px solid #38425b;
    background:radial-gradient(circle at 50% 38%,#36d9ff10,transparent 47%),linear-gradient(180deg,#171c29,#10131d);
    border-radius:0;
    padding:9px 6px 7px;
    position:relative;
    color:var(--text);
    margin:0;
    overflow:hidden;
    transition:background .2s,border-color .2s,box-shadow .2s,transform .2s
}
.reward-card:hover {
    background:radial-gradient(circle at 50% 38%,#36d9ff2b,transparent 53%),linear-gradient(180deg,#20283a,#121724);
    box-shadow:inset 0 0 0 1px #36d9ff80,inset 0 0 24px #36d9ff16;
    transform:none;
    z-index:1
}
.reward-card.premium-reward {
    background:radial-gradient(circle at 50% 38%,#ffc8571d,transparent 52%),linear-gradient(180deg,#241d20,#15151d);
    border-bottom:0;
    border-top:1px solid #63502f
}
.reward-card.premium-reward:hover {
    background:radial-gradient(circle at 50% 38%,#ffc85732,transparent 55%),linear-gradient(180deg,#2d2421,#19171e);
    box-shadow:inset 0 0 0 1px #ffc857b5,inset 0 0 24px #ffc8571b
}
.reward-card.locked {
    opacity:.56;
    filter:saturate(.45)
}
.reward-card.claimable {
    background:radial-gradient(circle at 50% 38%,#36d9ff3d,transparent 55%),linear-gradient(180deg,#173047,#101722);
    box-shadow:inset 0 0 0 2px var(--cyan),inset 0 0 26px #36d9ff29
}
.reward-card.premium-reward.claimable {
    background:radial-gradient(circle at 50% 38%,#ffc85745,transparent 56%),linear-gradient(180deg,#382b21,#19171b);
    box-shadow:inset 0 0 0 2px var(--gold),inset 0 0 26px #ffc8572e
}
.reward-row-label {
    color:#72e4ff;
    font-size:8px;
    letter-spacing:1px;
    line-height:1;
    align-self:flex-start;
    padding:3px 5px;
    border:1px solid #36d9ff4a;
    border-radius:3px;
    background:#36d9ff13
}
.premium-reward .reward-row-label {
    color:#ffd87a;
    text-shadow:0 0 10px #ffc85755;
    border-color:#ffc85757;
    background:#ffc85714
}
.reward-art {
    height:67px;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:4px;
    position:relative
}
.reward-emblem {
    height:58px;
    width:58px;
    border-radius:9px;
    border:1px solid #36d9ff55;
    background:linear-gradient(140deg,#36d9ff24,#101522);
    display:grid;
    place-items:center;
    font-size:22px;
    font-weight:800;
    color:#78e9ff;
    box-shadow:inset 0 0 14px #36d9ff0d,0 0 14px #36d9ff14;
    position:relative;
    overflow:hidden;
    isolation:isolate
}
.reward-icon {
    position:absolute;
    inset:3px;
    width:calc(100% - 6px);
    height:calc(100% - 6px);
    object-fit:contain;
    z-index:1;
    filter:drop-shadow(0 5px 7px #00000080)
}
.reward-emblem-ticket,.reward-emblem-scroll {
    background:linear-gradient(145deg,#9c2da64a,#24172f);
    border-color:#ff5de17d;
    color:#ffa2ef
}
.reward-emblem-plasma {
    background:linear-gradient(145deg,#343a47,#171a22);
    border-color:#626a7b;
    color:#9ba3b4;
    box-shadow:none
}
.premium-reward .reward-emblem {
    color:var(--gold);
    border-color:#ffc8577a;
    background:linear-gradient(140deg,#ffc8572e,#19151a);
    box-shadow:inset 0 0 14px #ffc85710,0 0 14px #ffc85718
}
.reward-extra {
    position:absolute;
    right:3px;
    bottom:7px;
    min-width:22px;
    padding:2px 4px;
    border-radius:10px;
    background:#0a0c13e6;
    border:1px solid #7d88a6;
    font-size:8px;
    color:#f2f5ff;
    z-index:2
}
.reward-name {
    font-size:9px;
    font-weight:600;
    margin:0 0 5px;
    line-height:1.35;
    height:25px;
    width:100%;
    word-break:break-word;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical
}
.reward-status {
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:7px;
    color:var(--muted);
    border-top:1px solid #9da7cc1f;
    padding-top:5px;
    width:100%;
    margin-top:auto;
    white-space:nowrap
}
.reward-status>span:first-child {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis
}
.claimable .reward-status {
    color:var(--cyan)
}
.premium-reward.claimable .reward-status {
    color:var(--gold)
}
.claimed .reward-status {
    color:var(--green)
}
.reward-card.claimed {
    background:radial-gradient(circle at 50% 38%,#52e6a52a,transparent 52%),linear-gradient(180deg,#172d25,#10171a);
    box-shadow:inset 0 0 0 1px #52e6a578
}
.retiring-tag {
    position:absolute;
    right:4px;
    top:7px;
    padding:2px 4px;
    border-radius:3px;
    background:#343846;
    color:#aab1c0;
    font-size:6px;
    line-height:1;
    letter-spacing:0
}
.reward-status .status-icon {
    font-size:13px
}
.bulk-claim-bar {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    width:min(560px,100%);
    margin:15px auto 0;
    padding:10px 12px 10px 16px;
    border:1px solid #66519a;
    border-radius:9px;
    background:linear-gradient(110deg,#171322e8,#111923e8);
    box-shadow:0 8px 24px #00000035,inset 0 1px #ffffff0a
}
.bulk-claim-copy {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0
}
.bulk-claim-copy>span:last-child {
    display:flex;
    flex-direction:column;
    min-width:0
}
.bulk-claim-copy strong {
    color:#e8e4f6;
    font-size:10px;
    font-weight:600
}
.bulk-claim-copy small {
    color:var(--muted);
    font-size:8px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.bulk-claim-mark {
    color:var(--gold);
    font-size:16px;
    text-shadow:0 0 13px #ffc85780
}
.claim-all-button {
    min-height:34px;
    padding:7px 16px;
    color:#fff;
    border-color:#d555ffb0;
    background:linear-gradient(110deg,#a93eff,#ff3d91);
    box-shadow:0 6px 18px #bb3bca30
}
.claim-all-button:hover:not(:disabled) {
    background:linear-gradient(110deg,#c169ff,#ff66ae);
    box-shadow:0 8px 24px #e548d04d
}
.claim-all-button:disabled {
    border-color:#464b5e;
    background:#252834;
    box-shadow:none
}
.offline-note {
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:9px;
    color:var(--muted);
    font-size:10px
}
.offline-icon {
    font-size:23px;
    color:var(--gold)
}
.text-button {
    border:0;
    background:none;
    padding:0;
    color:#b1b6b4;
    font-size:10px;
    white-space:nowrap
}
.offline-note .text-button {
    margin-left:auto
}
.text-button:hover {
    color:var(--gold)
}
.missions-section {
    margin-top:48px
}
.section-description {
    color:var(--muted);
    font-size:10px
}
.mission-grid {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:16px
}
.mission-panel {
    background:linear-gradient(145deg,#151824,#0f121b);
    border:1px solid #39425d;
    border-radius:10px;
    padding:21px;
    box-shadow:0 12px 32px #00000029,inset 0 1px #ffffff08
}
.mission-panel-heading {
    display:flex;
    align-items:center;
    gap:10px;
    padding-bottom:16px;
    border-bottom:1px solid var(--line)
}
.mission-panel-heading h3 {
    font-size:14px;
    font-weight:500;
    margin:0
}
.mission-panel-heading>span:first-child {
    color:var(--cyan);
    text-shadow:0 0 12px #36d9ff80;
    font-size:17px
}
.mission-summary {
    margin-left:auto;
    color:var(--muted);
    font:10px Arial,sans-serif
}
.mission-item {
    padding:15px 0;
    border-bottom:1px solid #ffffff06
}
.mission-item:last-child {
    border:0;
    padding-bottom:0
}
.mission-item-top {
    display:flex;
    align-items:start;
    justify-content:space-between;
    gap:14px;
    font-size:11px
}
.mission-item-top>span:first-child {
    color:#c4c9c7
}
.mission-count {
    color:var(--muted);
    font:10px/1.8 Arial,sans-serif;
    white-space:nowrap
}
.mission-item.done .mission-count {
    color:var(--green);
    text-shadow:0 0 10px #52e6a555
}
.mission-bar {
    height:4px;
    background:#080a11;
    border-radius:3px;
    margin-top:9px;
    overflow:hidden
}
.mission-bar>span {
    display:block;
    height:100%;
    background:linear-gradient(90deg,var(--purple),var(--red));
    box-shadow:0 0 9px #ff3d9166
}
.mission-item.done .mission-bar>span {
    background:linear-gradient(90deg,var(--green),var(--cyan));
    box-shadow:0 0 9px #52e6a566
}
.mission-panel-note {
    font-size:10px;
    color:var(--muted);
    line-height:1.8;
    margin:18px 0 0
}
.mission-panel.monthly {
    background:radial-gradient(ellipse at bottom right,#ffc85718,transparent 58%),linear-gradient(145deg,#211a22,#10131c);
    border-color:#876d3e
}
.monthly-symbol {
    height:90px;
    display:grid;
    place-items:center;
    font-size:49px;
    color:#ffc85788;
    text-shadow:0 0 28px #ffc85755;
    margin-top:15px
}
.monthly-completion {
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:8px;
    font-size:10px;
    color:var(--muted);
    margin:8px 0 22px
}
.monthly-completion strong {
    font:28px Georgia,serif;
    color:var(--gold)
}
.footer {
    margin-top:55px;
    padding:25px 0 35px;
    border-top:1px solid #3a4055;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#8e98aa;
    font-size:10px
}
.footer>div {
    display:flex;
    align-items:center;
    gap:18px
}
.footer-brand {
    color:#ff6eaf;
    font-size:15px;
    font-weight:600;
    letter-spacing:2px
}
.notice {
    border:1px solid #36d9ff70;
    background:linear-gradient(90deg,#36d9ff17,#8b5cf614);
    color:#bcefff;
    padding:12px 16px;
    border-radius:8px;
    margin-top:20px;
    font-size:12px
}
.notice.error {
    background:linear-gradient(90deg,#ff3d911d,#8b5cf612);
    border-color:#ff3d9185;
    color:#ffc1dc
}
.empty-state {
    padding:35px 20px;
    text-align:center;
    color:var(--muted);
    width:100%;
    min-height:190px
}
.empty-state h3 {
    font-size:15px;
    color:#d6d9d3;
    font-weight:500
}
.empty-state p {
    font-size:11px
}
.empty-state .button {
    margin-top:12px
}
.loader {
    display:inline-block;
    height:24px;
    width:24px;
    border:2px solid var(--line);
    border-top-color:var(--gold);
    border-radius:50%;
    animation:rotate 1s linear infinite
}
@keyframes rotate {
    to {
        transform:rotate(360deg)
    }
}
dialog {
    background:radial-gradient(circle at 100% 0,#8b5cf624,transparent 38%),linear-gradient(145deg,#191724,#0f121b);
    color:var(--text);
    border:1px solid #8b5cf680;
    border-radius:15px;
    padding:0;
    width:min(530px,calc(100vw - 32px));
    max-height:85vh;
    box-shadow:0 25px 90px #000000a6,0 0 35px #8b5cf622
}
dialog::backdrop {
    background:#05090ac9;
    backdrop-filter:blur(4px)
}
.dialog-shell {
    padding:30px;
    position:relative
}
.dialog-close {
    position:absolute;
    right:17px;
    top:17px
}
.dialog-shell>h2 {
    font-size:24px;
    line-height:1.4;
    margin:10px 40px 20px 0
}
.dialog-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:27px
}
.dialog-content-note {
    font-size:12px;
    color:var(--muted);
    line-height:1.9
}
.dialog-detail {
    padding:13px 0;
    border-bottom:1px solid #414863
}
.dialog-detail h3 {
    font-size:13px;
    margin:0 0 7px;
    font-weight:500;
    color:var(--gold)
}
.pool-list {
    display:flex;
    flex-wrap:wrap;
    gap:6px
}
.pool-item {
    border:1px solid #7060aa;
    padding:4px 8px;
    border-radius:5px;
    font-size:10px;
    color:#d5cfff;
    background:#8b5cf614
}
.dialog-price {
    font-size:14px;
    color:var(--gold);
    padding:14px 0
}
.dialog-warning {
    background:linear-gradient(90deg,#ff3d911c,#8b5cf610);
    border:1px solid #ff3d9161;
    padding:12px;
    border-radius:7px;
    color:#ffc2dc;
    font-size:11px
}
.rules-list {
    padding-left:20px;
    font-size:12px;
    color:#b1bbb9;
    line-height:2
}
.rules-list li {
    margin-bottom:8px
}
.toast {
    position:fixed;
    bottom:25px;
    left:50%;
    transform:translateX(-50%);
    padding:13px 22px;
    border:1px solid #52e6a58f;
    background:linear-gradient(110deg,#17392e,#132c32);
    color:#c7ffe6;
    border-radius:8px;
    box-shadow:0 12px 40px #0008,0 0 24px #52e6a525;
    z-index:30;
    width:max-content;
    max-width:calc(100vw - 32px);
    font-size:12px
}
.toast.error {
    background:linear-gradient(110deg,#45172e,#2e1839);
    border-color:#ff3d9199;
    color:#ffd0e5
}
.claim-all-dialog {
    width:min(720px,calc(100vw - 32px))
}
.claim-all-shell {
    overflow:hidden
}
.claim-all-celebration {
    position:absolute;
    right:58px;
    top:24px;
    color:#ffc85755;
    font-size:84px;
    line-height:1;
    text-shadow:0 0 30px #ffc8574a;
    pointer-events:none
}
.claim-summary-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:12px 14px;
    margin-bottom:12px;
    border:1px solid #52e6a56b;
    border-radius:8px;
    background:linear-gradient(100deg,#52e6a517,#36d9ff0f)
}
.claim-summary-head strong {
    color:#9fffd1;
    font-size:16px
}
.claim-summary-head span {
    color:var(--muted);
    font-size:10px
}
.claim-summary-list {
    display:grid;
    gap:8px;
    max-height:42vh;
    overflow:auto;
    padding-right:5px;
    scrollbar-color:#8b5cf6 #11131d;
    scrollbar-width:thin
}
.claim-summary-row {
    display:grid;
    grid-template-columns:62px 58px minmax(0,1fr);
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border:1px solid #37415a;
    border-radius:7px;
    background:#10141e
}
.claim-summary-level {
    color:#cbd2e4;
    font:700 11px/1 Arial,sans-serif
}
.claim-summary-track {
    justify-self:start;
    padding:3px 7px;
    border:1px solid #36d9ff66;
    border-radius:4px;
    color:#72e4ff;
    background:#36d9ff12;
    font-size:8px
}
.claim-summary-track.premium {
    color:#ffd87a;
    border-color:#ffc85766;
    background:#ffc85712
}
.claim-summary-items {
    display:flex;
    flex-wrap:wrap;
    gap:5px
}
.claim-summary-item {
    padding:3px 7px;
    border:1px solid #555f7b;
    border-radius:4px;
    background:#1a1e2b;
    color:#e6e9f2;
    font-size:9px
}
.claim-summary-skipped {
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:12px;
    padding:11px 13px;
    border:1px solid #ffc8575c;
    border-radius:7px;
    background:#ffc8570f;
    color:#ebd49f;
    font-size:10px
}
.claim-summary-skipped strong {
    color:var(--gold)
}
@media(min-width:1400px) {
    .hero {
        gap:130px
    }
    .level-card {
        flex-basis:calc((100% - 77px)/12);
        min-width:102px
    }
}
@media(max-width:1020px) {
    .hero {
        gap:35px
    }
    .purchase-card {
        flex-wrap:wrap;
        gap:12px
    }
    .purchase-card>.button {
        margin-left:56px
    }
    .purchase-heading {
        flex-wrap:wrap
    }
    .mission-grid {
        grid-template-columns:1fr 1fr
    }
    .monthly {
        grid-column:1/-1
    }
    .monthly-symbol {
        height:55px
    }
    .site-header {
        padding:0 28px
    }
    nav {
        gap:20px
    }
    .account {
        max-width:200px
    }
}
@media(max-width:700px) {
    .page {
        padding:0 18px
    }
    .site-header {
        height:72px;
        padding:0 18px;
        gap:12px
    }
    .brand {
        font-size:19px;
        gap:9px
    }
    .brand-mark {
        width:32px;
        height:35px;
        font-size:21px
    }
    .brand-en {
        font-size:7px;
        letter-spacing:1.7px
    }
    nav {
        display:none
    }
    .account {
        gap:7px;
        font-size:10px;
        max-width:180px
    }
    .account-name {
        max-width:80px
    }
    .avatar {
        height:27px;
        width:27px
    }
    .hero {
        grid-template-columns:1fr;
        gap:25px;
        padding:32px 0 23px
    }
    .hero-copy {
        padding:0
    }
    h1 {
        font-size:34px;
        margin:16px 0 10px
    }
    .hero-copy p {
        font-size:12px
    }
    .hero-meta {
        margin-top:21px
    }
    .progress-card {
        padding:21px 23px
    }
    .level-display {
        margin:12px 0
    }
    .level-display>strong {
        font-size:51px
    }
    .progress-details {
        gap:50px
    }
    .progress-note {
        margin-top:12px
    }
    .purchase-section {
        grid-template-columns:1fr;
        gap:11px;
        margin-bottom:32px
    }
    .purchase-card {
        padding:15px;
        flex-wrap:nowrap;
        gap:12px
    }
    .purchase-icon {
        height:36px;
        width:36px;
        font-size:22px
    }
    .purchase-card>.button {
        margin-left:0;
        padding:8px 11px;
        font-size:10px
    }
    .purchase-heading h2 {
        font-size:12px
    }
    .purchase-copy p {
        font-size:9px
    }
    .purchase-heading {
        gap:6px
    }
    .pass-status {
        flex-wrap:wrap;
        gap:3px 8px
    }
    .pass-route {
        padding-left:8px
    }
    .small-badge {
        font-size:8px
    }
    .section-heading h2 {
        font-size:21px
    }
    .heading-count {
        display:none
    }
    .reward-legend {
        gap:10px;
        font-size:8px
    }
    .section-kicker {
        font-size:9px
    }
    .range-tabs button {
        padding:8px 10px;
        font-size:9px
    }
    .level-card {
        flex-basis:112px;
        min-width:112px
    }
    .reward-track {
        gap:6px;
        padding:8px 8px 16px
    }
    .bulk-claim-bar {
        justify-content:space-between;
        gap:10px;
        padding:9px 10px
    }
    .bulk-claim-copy small {
        white-space:normal;
        line-height:1.4
    }
    .claim-all-button {
        flex-shrink:0;
        padding:7px 12px
    }
    .reward-card {
        padding:9px 6px 7px;
        min-height:0
    }
    .offline-note {
        align-items:flex-start;
        font-size:9px;
        gap:8px
    }
    .offline-note .text-button {
        font-size:9px
    }
    .offline-icon {
        line-height:1
    }
    .mission-grid {
        grid-template-columns:1fr;
        gap:12px
    }
    .mission-panel {
        padding:18px
    }
    .monthly {
        grid-column:auto
    }
    .missions-section {
        margin-top:34px
    }
    .section-description {
        font-size:9px
    }
    .footer {
        margin-top:34px;
        padding:21px 0;
        gap:12px;
        font-size:9px
    }
    .footer>div {
        gap:9px
    }
    .footer-brand {
        font-size:13px
    }
    .eyebrow {
        font-size:8px;
        letter-spacing:1.5px
    }
    .eyebrow>span:last-child {
        font-size:10px
    }
    .dialog-shell {
        padding:25px
    }
    .dialog-shell>h2 {
        font-size:21px
    }
    .claim-all-celebration {
        right:48px;
        top:23px;
        font-size:62px
    }
    .claim-summary-row {
        grid-template-columns:52px 48px minmax(0,1fr);
        gap:7px;
        padding:9px 8px
    }
    .claim-summary-items {
        gap:4px
    }
    .claim-summary-item {
        padding:3px 5px;
        font-size:8px
    }
    .notice {
        font-size:11px
    }
    .monthly-symbol {
        height:65px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    * {
        animation:none!important;
        transition:none!important
    }
}