*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
    min-height: 100%;
    background-color: #120d1f;
    background-image: radial-gradient(900px 520px at 50% -8%, #8b5cf675, #8b5cf600 62%), radial-gradient(680px 420px at 88% 16%, #a855f747, #a855f700 60%), linear-gradient(180deg, #120d1f, #1a1330 46%, #100b1c);
    background-attachment: fixed;
    background-repeat: no-repeat
}

:root {
    --ink: #F7F3FF;
    --brand: #B794FF;
    --brand-fill: #7C3AED;
    --brand-2: #A855F7;
    --brand-deep: #6D28D9;
    --brand-press: #5B21B6;
    --brand-light: rgba(139, 92, 246, .16);
    --brand-wash: rgba(139, 92, 246, .08);
    --holo: linear-gradient(120deg, #A855F7 0%, #8B5CF6 55%, #6D28D9 100%);
    --holo-2: linear-gradient(120deg, #C084FC, #8B5CF6);
    --highlight: #A78BFA;
    --highlight-light: rgba(167, 139, 250, .16);
    --highlight-glow: #C4B5FD;
    --pulse: #A855F7;
    --platinum: #4A4166;
    --platinum-2: #6B5F8C;
    --silver-line: linear-gradient(120deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .14), rgba(255, 255, 255, .02));
    --display-grad: linear-gradient(180deg, #FFFFFF 0%, #E7E0F7 42%, #9D93BE 100%);
    --facet-peach: #C084FC;
    --facet-cyan: #22D3EE;
    --facet-purple: #8B5CF6;
    --facet-deep: #6D28D9;
    --badge-ring: rgba(255, 255, 255, .16);
    --text-dark: #F7F3FF;
    --text-sec: #BCB4D0;
    --text-hint: #8B83A8;
    --green: #34D399;
    --orange: #FBBF24;
    --red: #FB7185;
    --white: #0D0718;
    --card-bg: rgba(255, 255, 255, .065);
    --surface-overlay: #221D33;
    --glass-bg: rgba(255, 255, 255, .065);
    --glass-brd: rgba(255, 255, 255, .14);
    --input-bg: rgba(255, 255, 255, .11);
    --border-light: rgba(255, 255, 255, .09);
    --bg: radial-gradient(900px 520px at 50% -8%, rgba(139, 92, 246, .46) 0%, rgba(139, 92, 246, 0) 62%), radial-gradient(680px 420px at 88% 16%, rgba(168, 85, 247, .28) 0%, rgba(168, 85, 247, 0) 60%), linear-gradient(180deg, #120D1F 0%, #1A1330 46%, #100B1C 100%);
    --card-shadow: inset 0 1px 0 rgba(255, 255, 255, .085);
    --card-shadow-lg: 0 24px 60px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .08);
    --glass-inset: inset 0 1px 0 rgba(255, 255, 255, .085);
    --glow-shadow: 0 14px 40px rgba(139, 92, 246, .46);
    --accent: var(--brand);
    --accent-dark: var(--brand-deep);
    --accent-light: var(--brand-light);
    --radius: 24px;
    --radius-sm: 16px;
    --header-h: 60px;
    --tab-h: 64px;
    --transition: .3s ease;
    --tilt-max: 5deg
}

body.dark {
    --ink: #F7F3FF;
    --brand: #B794FF;
    --brand-fill: #7C3AED;
    --brand-2: #A855F7;
    --brand-deep: #6D28D9;
    --brand-light: rgba(139, 92, 246, .16);
    --brand-wash: rgba(139, 92, 246, .08);
    --highlight: #A78BFA;
    --highlight-light: rgba(167, 139, 250, .16);
    --text-dark: #F7F3FF;
    --text-sec: #BCB4D0;
    --text-hint: #8B83A8;
    --white: #0D0718;
    --card-bg: rgba(255, 255, 255, .065);
    --surface-overlay: #221D33;
    --glass-bg: rgba(255, 255, 255, .065);
    --glass-brd: rgba(255, 255, 255, .14);
    --input-bg: rgba(255, 255, 255, .11);
    --border-light: rgba(255, 255, 255, .09);
    --platinum: #4A4166;
    --facet-cyan: #22D3EE;
    --facet-purple: #8B5CF6;
    --bg: radial-gradient(900px 520px at 50% -8%, rgba(139, 92, 246, .46) 0%, rgba(139, 92, 246, 0) 62%), radial-gradient(680px 420px at 88% 16%, rgba(168, 85, 247, .28) 0%, rgba(168, 85, 247, 0) 60%), linear-gradient(180deg, #120D1F 0%, #1A1330 46%, #100B1C 100%);
    --card-shadow: inset 0 1px 0 rgba(255, 255, 255, .085);
    --card-shadow-lg: 0 24px 60px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .08);
    --glow-shadow: 0 14px 40px rgba(139, 92, 246, .46)
}

.display-grad {
    background: var(--display-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent
}

.hero-banner h2,
.agent-tier .at-range {
    background: var(--display-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

body.dark .header {
    background: #120d1fdb
}

body.dark .section-title,
body.dark .card-title,
body.dark .gp-name {
    text-shadow: 0 1px 10px rgba(6, 2, 14, .7)
}

body {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
    background: transparent;
    color: var(--text-dark);
    min-height: 100vh;
    max-width: 480px;
    margin: 0 auto;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased
}

body:before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
    pointer-events: none;
    background: repeating-conic-gradient(from 0deg at 50% -1%, rgba(139, 92, 246, .055) 0deg 1.3deg, transparent 1.3deg 6deg), radial-gradient(48% 30% at 50% -2%, #c4b5fd52, #c4b5fd00 72%);
    -webkit-mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 24%, transparent 52%);
    mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 24%, transparent 52%)
}

body:after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -3;
    pointer-events: none;
    background: url(../hero-bg.svg) top center / 118% auto no-repeat;
    opacity: .5;
    -webkit-mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .62) 40%, transparent 80%);
    mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .62) 40%, transparent 80%)
}

body.dark:before {
    background: radial-gradient(54% 24% at 50% -8%, #8b5cf629, #8b5cf600 74%);
    -webkit-mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .28) 14%, transparent 30%);
    mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .28) 14%, transparent 30%)
}

body.dark:after {
    opacity: .06;
    -webkit-mask: linear-gradient(180deg, rgba(0, 0, 0, .32) 0%, rgba(0, 0, 0, .12) 16%, transparent 30%);
    mask: linear-gradient(180deg, rgba(0, 0, 0, .32) 0%, rgba(0, 0, 0, .12) 16%, transparent 30%)
}

@media (prefers-reduced-motion: no-preference) {
    body:after {
        animation: templeDrift 22s ease-in-out infinite alternate
    }
}

@keyframes templeDrift {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(2%)
    }
}

.glass {
    background: var(--card-bg);
    border: 1px solid var(--glass-brd);
    box-shadow: var(--card-shadow)
}

.filigree {
    position: relative
}

.holo-text {
    background: var(--holo);
    background-size: 180% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent
}

[data-tilt] {
    transform: perspective(1100px) rotateY(var(--rx, 0deg)) rotateX(var(--ry, 0deg));
    transform-style: preserve-3d;
    transition: transform .24s cubic-bezier(.2, .7, .2, 1), box-shadow .24s ease;
    will-change: transform
}

[data-tilt]:active {
    transition: transform .08s ease
}

@media (prefers-reduced-motion: reduce) {
    [data-tilt] {
        transform: none !important
    }
}

.lift-1 {
    transform: translateZ(16px)
}

.lift-2 {
    transform: translateZ(32px)
}

.sheen {
    position: relative;
    overflow: hidden
}

.sheen:before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent);
    transform: skew(-18deg);
    animation: sheenSweep 5s ease-in-out infinite;
    pointer-events: none
}

@keyframes sheenSweep {
    0% {
        left: -60%
    }

    45%,
    to {
        left: 130%
    }
}

@media (prefers-reduced-motion: reduce) {
    .sheen:before {
        animation: none;
        opacity: 0
    }
}

.holo-diamond {
    --d: 88px;
    width: var(--d);
    height: calc(var(--d) * 1.5);
    position: relative;
    margin: 0 auto;
    transform-style: preserve-3d;
    animation: diamondFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 14px 24px rgba(139, 92, 246, .35))
}

.holo-diamond .facet {
    position: absolute;
    left: 0;
    right: 0;
    background: var(--holo);
    clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%);
    opacity: .98;
    box-shadow: inset 0 0 22px #ffffff80
}

.holo-diamond .facet.top {
    top: 0;
    height: 62%;
    clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%);
    filter: brightness(1.1)
}

.holo-diamond .facet.bottom {
    bottom: 0;
    height: 52%;
    clip-path: polygon(0 0, 50% 40%, 100% 0, 50% 100%);
    filter: brightness(.88)
}

.holo-diamond:after {
    content: "";
    position: absolute;
    top: -28%;
    right: -40%;
    bottom: -28%;
    left: -40%;
    z-index: -1;
    background: radial-gradient(closest-side, #8b5cf659, #8b5cf600)
}

@keyframes diamondFloat {

    0%,
    to {
        transform: translateY(0) rotateY(0)
    }

    50% {
        transform: translateY(-8px) rotateY(12deg)
    }
}

@media (prefers-reduced-motion: reduce) {
    .holo-diamond {
        animation: none
    }
}

.record-filter {
    padding: 8px 16px;
    border-radius: 22px;
    border: 1px solid var(--border-light);
    background: var(--card-bg);
    color: var(--text-sec);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s
}

.record-filter.active {
    background: var(--brand-fill);
    color: #fff;
    border-color: var(--brand-fill)
}

.wallet-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 22px;
    font-size: 11px;
    font-weight: 700;
    background: var(--brand-wash);
    color: var(--brand);
    cursor: pointer;
    border: 1px solid var(--border-light);
    transition: all .2s
}

.wallet-indicator.connected {
    background: #e7f8ef;
    color: var(--green);
    border-color: #c9efd9
}

.wallet-indicator .wallet-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-hint)
}

.wallet-indicator.connected .wallet-dot {
    background: var(--green)
}

.header {
    position: sticky;
    top: 0;
    width: 100%;
    max-width: 480px;
    height: var(--header-h);
    background: #f7faffd1;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    z-index: 100
}

.header-logo {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.2px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink)
}

.header-logo .mascot-img {
    filter: drop-shadow(0 2px 5px rgba(10, 4, 26, .35))
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 6px
}

.header-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--brand);
    position: relative;
    transition: all .2s
}

.header-btn:hover {
    box-shadow: var(--card-shadow)
}

.header-btn:active {
    transform: scale(.92)
}

.header-btn svg {
    width: 20px;
    height: 20px;
    fill: none
}

.lang-dropdown {
    position: absolute;
    top: calc(var(--header-h) + 4px);
    right: 18px;
    background: var(--surface-overlay);
    border: 1px solid var(--glass-brd);
    border-radius: var(--radius-sm);
    padding: 8px;
    min-width: 176px;
    box-shadow: var(--card-shadow-lg);
    z-index: 200;
    animation: dropIn .2s ease
}

@keyframes dropIn {
    0% {
        opacity: 0;
        transform: translateY(-8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.lang-option {
    padding: 11px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background .2s;
    color: var(--text-dark)
}

.lang-option:hover,
.lang-option.active {
    background: var(--brand-light);
    color: var(--brand)
}

.main-content {
    padding-top: 0;
    padding-bottom: calc(var(--tab-h) + 24px);
    min-height: 100vh
}

.page {
    display: block;
    padding: 20px
}

.page.active {
    display: block
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.tab-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
    max-width: 480px;
    height: var(--tab-h);
    background: #ffffffe6;
    border-top: 1px solid var(--border-light);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -6px 24px #0000000f
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 8px 18px;
    color: var(--text-hint);
    font-size: 11px;
    font-weight: 700;
    transition: color .2s, transform .2s;
    position: relative
}

.tab-item.active {
    color: var(--brand);
    transform: translateY(-1px)
}

.tab-item.active:before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translate(-50%);
    width: 28px;
    height: 3px;
    border-radius: 3px;
    background: var(--brand)
}

.tab-item svg {
    width: 23px;
    height: 23px;
    transition: transform .2s
}

.tab-item.active svg {
    transform: translateY(-1px) scale(1.06)
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--glass-brd);
    border-radius: var(--radius);
    padding: 22px;
    margin-bottom: 18px;
    box-shadow: var(--card-shadow)
}

.card-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: -.2px
}

.card-title .link,
.link {
    font-size: 13px;
    font-weight: 600;
    color: var(--highlight);
    cursor: pointer;
    transition: opacity .15s
}

.link:active,
.card-title .link:active {
    opacity: .6
}

.hero-banner {
    background: #6d28d9;
    border-radius: var(--radius);
    padding: 30px 24px;
    margin-bottom: 18px;
    color: #fff;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: none
}

.hero-banner h2 {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 8px;
    position: relative;
    letter-spacing: -.4px;
    line-height: 1.25
}

.hero-banner p {
    font-size: 13px;
    opacity: .9;
    line-height: 1.6;
    position: relative
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px
}

.stat-box {
    background: var(--card-bg);
    border-radius: var(--radius-sm);
    padding: 18px;
    border: 1px solid var(--glass-brd);
    box-shadow: var(--card-shadow)
}

.stat-box .stat-label {
    font-size: 12px;
    color: var(--text-sec);
    margin-bottom: 5px
}

.stat-box .stat-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-dark);
    font-family: SF Mono, Menlo, monospace
}

.stat-box .stat-sub {
    font-size: 11px;
    color: var(--text-hint);
    margin-top: 3px
}

.live-dashboard {
    margin-bottom: 16px
}

.live-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--brand-deep);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    padding: 16px 18px;
    color: #fff
}

.live-header .live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4ade80;
    display: inline-block;
    margin-right: 6px;
    box-shadow: 0 0 0 3px #4ade8047;
    animation: livePulse 1.5s ease-in-out infinite
}

@keyframes livePulse {

    0%,
    to {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .4;
        transform: scale(.7)
    }
}

.live-header .live-label {
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center
}

.live-header .live-count {
    font-size: 23px;
    font-weight: 800;
    font-family: SF Mono, monospace;
    letter-spacing: -.5px
}

.live-body {
    background: var(--card-bg);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    border: 1px solid var(--glass-brd);
    border-top: none;
    box-shadow: var(--card-shadow);
    padding: 0;
    overflow: hidden
}

.live-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-light);
    transition: background .2s
}

.live-row:last-child {
    border-bottom: none
}

.live-row .lr-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    margin-right: 12px
}

.live-row .lr-icon svg {
    width: 17px;
    height: 17px;
    display: block
}

.live-row .lr-info {
    flex: 1;
    min-width: 0
}

.live-row .lr-label {
    font-size: 12px;
    color: var(--text-sec)
}

.live-row .lr-value {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-dark);
    font-family: SF Mono, monospace
}

.live-row .lr-delta {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 10px;
    flex-shrink: 0;
    margin-left: 8px
}

.lr-delta.up {
    background: #e7f8ef;
    color: #12b76a
}

.lr-delta.down {
    background: #feeceb;
    color: #f04438
}

.chain-bar-wrap {
    display: flex;
    gap: 10px;
    padding: 14px 18px
}

.chain-bar-item {
    flex: 1;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    position: relative;
    overflow: hidden
}

.chain-bar-item .cb-chain {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 2px
}

.chain-bar-item .cb-pct {
    font-size: 21px;
    font-weight: 800;
    font-family: SF Mono, monospace
}

.chain-bar-item .cb-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 0 0 12px 12px
}

.live-ticker {
    overflow: hidden;
    height: 32px;
    position: relative;
    border-top: 1px solid var(--border-light);
    padding: 0 18px
}

.live-ticker-track {
    display: flex;
    align-items: center;
    height: 32px;
    gap: 26px;
    animation: tickerScroll 20s linear infinite;
    white-space: nowrap;
    width: max-content
}

@keyframes tickerScroll {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-50%)
    }
}

.ticker-item {
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px
}

.ticker-item .t-name {
    color: var(--text-sec)
}

.ticker-item .t-roi {
    font-family: SF Mono, monospace
}

.t-roi.green {
    color: #12b76a
}

.t-roi.red {
    color: #f04438
}

.chain-bar-item.sol-bar,
.chain-bar-item.bsc-bar {
    background: #ffffff0d
}

.carousel-wrap {
    position: relative;
    overflow: hidden;
    margin-bottom: 16px
}

.carousel-track {
    display: flex;
    transition: transform .4s cubic-bezier(.2, .7, .2, 1);
    touch-action: pan-y
}

.agent-tier {
    min-width: 100%;
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 24px 22px 20px;
    border: 1px solid var(--glass-brd);
    display: flex;
    flex-direction: column;
    gap: 18px
}

.agent-tier .at-head {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.agent-tier .at-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 8px;
    border-radius: 999px;
    background: var(--brand-light);
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2px
}

.agent-tier .at-badge img {
    width: 13px;
    height: 15px
}

.agent-tier .at-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--green)
}

.agent-tier .at-state.locked {
    color: var(--text-hint)
}

.agent-tier .at-state i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor
}

.agent-tier .at-range {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.6px;
    color: var(--text-dark);
    line-height: 1.1
}

.agent-tier .at-range em {
    font-style: normal;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-hint);
    margin-left: 6px
}

.agent-tier .at-metrics {
    display: flex;
    align-items: stretch
}

.agent-tier .at-metric {
    flex: 1
}

.agent-tier .at-sep {
    width: 1px;
    background: var(--glass-brd);
    margin: 2px 18px
}

.agent-tier .at-val {
    font-size: 28px;
    font-weight: 800;
    color: var(--brand);
    letter-spacing: -.5px;
    line-height: 1.15
}

.agent-tier .at-val span {
    font-size: 16px;
    font-weight: 700;
    margin-left: 1px
}

.agent-tier .at-lbl {
    font-size: 11px;
    color: var(--text-sec);
    margin-top: 4px;
    letter-spacing: .3px
}

.agent-tier .at-scale {
    display: flex;
    align-items: center;
    gap: 10px
}

.agent-tier .at-scale-end {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-hint);
    flex-shrink: 0
}

.agent-tier .at-scale-track {
    position: relative;
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--brand-light)
}

.agent-tier .at-scale-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 2px;
    background: var(--brand);
    transition: width .45s cubic-bezier(.2, .7, .2, 1)
}

.agent-tier .at-scale-knob {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 3px solid var(--brand);
    transform: translate(-50%, -50%);
    transition: left .45s cubic-bezier(.2, .7, .2, 1)
}

.agent-tier.locked {
    opacity: .62
}

.agent-tier.locked .at-val {
    color: var(--text-hint)
}

.agent-tier.locked .at-scale-fill {
    background-color: var(--platinum)
}

.agent-tier.locked .at-scale-knob {
    border-color: var(--platinum)
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 14px
}

.carousel-dots .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--platinum);
    transition: all .25s;
    cursor: pointer
}

.carousel-dots .dot.active {
    background: var(--brand);
    width: 22px;
    border-radius: 4px
}

.btn-deploy {
    width: 100%;
    padding: 20px;
    color: #fff;
    background: var(--brand);
    box-shadow: none;
    border: none;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .2px;
    cursor: pointer;
    margin-bottom: 16px;
    transition: all .2s
}

.btn-deploy:hover:not(:disabled) {
    filter: brightness(1.05);
    transform: translateY(-1px)
}

.btn-deploy:active:not(:disabled) {
    transform: scale(.985)
}

.btn-deploy:focus-visible {
    outline: 2px solid var(--highlight-glow);
    outline-offset: 2px
}

.btn-deploy:disabled {
    background: var(--input-bg);
    color: var(--text-hint);
    box-shadow: none;
    cursor: default
}

.progress-bar {
    height: 9px;
    border-radius: 6px;
    background: #eaeff9;
    overflow: hidden;
    margin-top: 10px
}

.progress-fill {
    height: 100%;
    border-radius: 6px;
    transition: width .6s cubic-bezier(.2, .7, .2, 1);
    background: var(--brand)
}

.token-list .token-row {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light)
}

.token-list .token-row:last-child {
    border-bottom: none
}

.token-list .token-rank {
    width: 24px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-sec);
    flex-shrink: 0
}

.token-list .token-name {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark)
}

.token-list .token-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-sec);
    font-family: monospace;
    margin-right: 10px
}

.token-list .token-bar-wrap {
    width: 82px;
    flex-shrink: 0
}

.token-list .token-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--brand)
}

.sub-tabs {
    display: flex;
    gap: 0;
    background: var(--input-bg);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 5px;
    margin-bottom: 16px
}

.sub-tab {
    flex: 1;
    text-align: center;
    padding: 11px 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-sec);
    cursor: pointer;
    transition: all .25s
}

.sub-tab.active {
    background: var(--brand-fill);
    color: #fff
}

.sub-page,
.node-sub-page,
.stake-sub-page {
    display: none;
    animation: fadeUp .35s ease
}

.sub-page.active,
.node-sub-page.active,
.stake-sub-page.active {
    display: block
}

.node-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 16px;
    border: 1px solid var(--glass-brd);
    box-shadow: var(--card-shadow);
    transition: transform .2s ease, box-shadow .2s ease
}

.node-card:hover {
    box-shadow: var(--card-shadow-lg)
}

.node-card:active {
    transform: scale(.99)
}

.node-card-header {
    padding: 18px 18px 15px;
    position: relative;
    overflow: hidden;
    background: var(--brand-deep)
}

.node-card-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px
}

.node-card-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    background: #fff3;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28)
}

.node-card-limit {
    font-size: 10px;
    color: #ffffffb3;
    font-weight: 400
}

.node-card-name {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px
}

.node-card-price {
    font-size: 23px;
    font-weight: 800;
    color: #fff;
    font-family: SF Mono, Menlo, monospace;
    letter-spacing: -.3px
}

.node-card-price .price-unit {
    font-size: 11px;
    font-weight: 500;
    opacity: .8;
    margin-left: 2px
}

.node-card-body {
    padding: 6px 18px 0
}

.node-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--border-light)
}

.node-info-row:last-of-type {
    border-bottom: none
}

.node-info-label {
    color: var(--text-sec);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px
}

.node-info-label .ni-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    background: var(--brand-light);
    color: var(--brand)
}

.node-info-value {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 13px
}

.node-progress-section {
    padding: 4px 18px
}

.node-progress-wrap {
    background: #eaeff9;
    border-radius: 3px;
    height: 5px;
    overflow: hidden;
    margin-bottom: 7px
}

.node-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .6s ease;
    background: var(--brand)
}

.node-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-hint);
    font-weight: 400
}

.node-card-footer {
    padding: 8px 18px 16px
}

.node-subscribe-btn {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    transition: all .2s;
    background: var(--brand);
    box-shadow: none
}

.node-subscribe-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.05)
}

.node-subscribe-btn:active:not(:disabled) {
    transform: scale(.985)
}

.node-subscribe-btn:disabled {
    background: var(--input-bg);
    color: var(--text-hint);
    box-shadow: none;
    cursor: default
}

.node-release-note {
    text-align: center;
    padding: 12px;
    font-size: 12px;
    color: var(--text-hint);
    background: var(--input-bg);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    margin-bottom: 14px
}

.notes-card {
    padding: 20px 22px
}

.notes-card .notes-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 12px;
    letter-spacing: -.1px
}

.notes-card .notes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px
}

.notes-card .notes-list li {
    position: relative;
    padding-left: 16px;
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--text-sec)
}

.notes-card .notes-list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand);
    opacity: .55
}

.custom-select-option.dm-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.dm-opt .dm-opt-name {
    min-width: 0
}

.dm-opt .dm-opt-mult {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 800;
    color: var(--brand);
    font-variant-numeric: tabular-nums
}

.dm-opt .dm-opt-tag {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-hint);
    font-size: 10.5px;
    font-weight: 700
}

.dm-metrics {
    display: flex;
    align-items: stretch;
    margin: 14px 0 4px;
    padding: 14px 16px;
    background: var(--input-bg);
    border-radius: var(--radius-sm)
}

.dm-metrics .dm-metric {
    flex: 1
}

.dm-metrics .dm-sep {
    width: 1px;
    background: var(--glass-brd);
    margin: 2px 16px
}

.dm-metrics .dm-val {
    font-size: 24px;
    font-weight: 800;
    color: var(--brand);
    letter-spacing: -.4px;
    line-height: 1.15;
    font-variant-numeric: tabular-nums
}

.dm-metrics .dm-val span {
    font-size: 14px;
    font-weight: 700;
    margin-left: 1px
}

.dm-metrics .dm-lbl {
    font-size: 11px;
    color: var(--text-sec);
    margin-top: 4px;
    letter-spacing: .3px
}

.trade-live .tl-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px
}

.trade-live .tl-live {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--green);
    letter-spacing: .4px
}

.trade-live .tl-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    animation: livePulse 1.5s ease-in-out infinite
}

.trade-live .tl-feed {
    max-height: 330px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 4px, #000 calc(100% - 22px), transparent 100%);
    scrollbar-width: none
}

.trade-live .tl-feed::-webkit-scrollbar {
    display: none
}

.tl-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 2px;
    border-bottom: 1px solid var(--border-light)
}

.tl-row:last-child {
    border-bottom: none
}

.tl-dir {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-light);
    color: var(--brand)
}

.tl-dir svg {
    width: 15px;
    height: 15px;
    display: block
}

.tl-main {
    flex: 1;
    min-width: 0
}

.tl-line1 {
    display: flex;
    align-items: center;
    gap: 7px
}

.tl-pair {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -.2px
}

.tl-chain {
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--brand-light);
    color: var(--brand);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .3px
}

.tl-line2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px
}

.tl-size {
    font-size: 11px;
    color: var(--text-sec);
    font-variant-numeric: tabular-nums
}

.tl-time {
    font-size: 11px;
    color: var(--text-hint);
    font-variant-numeric: tabular-nums
}

.tl-right {
    text-align: right;
    flex-shrink: 0
}

.tl-pnl {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.3px;
    font-variant-numeric: tabular-nums
}

.tl-pct {
    font-size: 11px;
    font-weight: 700;
    margin-top: 3px;
    font-variant-numeric: tabular-nums
}

.tl-pnl.win,
.tl-pct.win {
    color: var(--green)
}

.tl-pnl.loss,
.tl-pct.loss {
    color: var(--red)
}

@keyframes tradeFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-14px);
        background: var(--brand-wash)
    }

    60% {
        background: var(--brand-wash)
    }

    to {
        opacity: 1;
        transform: translateY(0);
        background: transparent
    }
}

.tl-row.slide-in {
    animation: tradeFadeIn .5s ease
}

@media (prefers-reduced-motion: reduce) {
    .tl-row.slide-in {
        animation: none
    }
}

.profile-card {
    background: var(--brand-deep);
    border-radius: var(--radius);
    padding: 26px;
    margin-bottom: 16px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: none
}

.profile-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    position: relative
}

.profile-row .plabel {
    opacity: .78
}

.profile-row .pvalue {
    font-weight: 600;
    font-family: monospace;
    flex: 1
}

.copy-btn {
    background: #fff3;
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    cursor: pointer;
    transition: all .2s
}

.copy-btn:active {
    transform: scale(.94);
    background: #ffffff4d
}

.balance-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid var(--glass-brd);
    box-shadow: var(--card-shadow)
}

.asset-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 14px
}

.asset-tab {
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-sec);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .2s
}

.asset-tab.active {
    color: var(--brand);
    border-bottom-color: var(--brand)
}

.token-asset {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-light)
}

.token-asset:last-child {
    border-bottom: none
}

.token-asset .ta-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    color: #fff;
    margin-right: 14px;
    flex-shrink: 0
}

.token-asset .ta-info {
    flex: 1
}

.token-asset .ta-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-dark)
}

.token-asset .ta-full {
    font-size: 11px;
    color: var(--text-sec)
}

.token-asset .ta-right {
    text-align: right
}

.token-asset .ta-amount {
    font-size: 15px;
    font-weight: 700;
    font-family: monospace;
    color: var(--text-dark)
}

.token-asset .ta-usd {
    font-size: 12px;
    color: var(--text-sec)
}

.modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #06030eb8;
    z-index: 500;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: overlayIn .25s ease
}

@keyframes overlayIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.modal-sheet {
    position: relative;
    background: var(--surface-overlay);
    border-radius: 26px 26px 0 0;
    padding: 28px 22px 36px;
    width: 100%;
    max-width: 480px;
    max-height: 88vh;
    overflow-y: auto;
    border: 1px solid var(--glass-brd);
    border-bottom: none;
    box-shadow: 0 -20px 60px #0000008c;
    animation: slideUp .32s cubic-bezier(.2, .7, .2, 1);
    -webkit-overflow-scrolling: touch;
    color: var(--text-dark)
}

.modal-sheet:before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translate(-50%);
    width: 42px;
    height: 4px;
    border-radius: 3px;
    background: var(--border-light)
}

@keyframes slideUp {
    0% {
        transform: translateY(100%)
    }

    to {
        transform: translateY(0)
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px
}

.modal-header h3 {
    font-size: 20px;
    font-weight: 800
}

.modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--input-bg);
    border: 1px solid var(--border-light);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-sec)
}

.form-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-sec);
    margin-bottom: 7px;
    margin-top: 18px
}

.form-select,
.form-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    font-size: 15px;
    background: var(--input-bg);
    color: var(--text-dark);
    outline: none;
    font-family: inherit;
    transition: all .2s
}

.form-select:focus,
.form-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px #8b5cf624;
    background: var(--card-bg)
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 11px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--border-light)
}

.info-row .ir-label {
    color: var(--text-sec)
}

.info-row .ir-value {
    font-weight: 700;
    color: var(--text-dark)
}

.radio-group {
    display: flex;
    gap: 12px;
    margin-top: 10px
}

.radio-item {
    flex: 1;
    padding: 13px;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    font-size: 13px;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
    background: var(--input-bg);
    color: var(--text-dark)
}

.radio-item.active {
    border-color: var(--brand);
    background: var(--brand-light);
    color: var(--brand);
    font-weight: 700
}

.input-wrap {
    position: relative
}

.input-wrap .all-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    background: none;
    border: none
}

.wallet-bal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--input-bg);
    border: 1px solid var(--border-light);
    font-size: 13px;
    color: var(--text-sec);
    font-weight: 600
}

.wallet-bal-row .wb-amt {
    color: var(--brand);
    font-weight: 800;
    font-family: SF Mono, Menlo, monospace
}

.swap-quote-card {
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 16px;
    background: var(--input-bg)
}

.swap-quote-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.swap-quote-token {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0
}

.swap-quote-input {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-end
}

.swap-quote-input .form-input {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 19px;
    font-weight: 800
}

.swap-quote-input .form-input:focus {
    box-shadow: none
}

.swap-quote-output {
    font-size: 19px;
    font-weight: 800;
    color: var(--text-dark)
}

.swap-quote-arrow {
    text-align: center;
    font-size: 14px;
    color: var(--brand);
    margin: 8px auto;
    width: 32px;
    height: 32px;
    line-height: 30px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    box-shadow: var(--card-shadow)
}

.custom-select-wrap {
    position: relative;
    margin-bottom: 10px
}

.custom-select-btn {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    font-size: 15px;
    background: var(--input-bg);
    color: var(--text-dark);
    font-family: inherit;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.custom-select-btn:after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-hint);
    border-bottom: 2px solid var(--text-hint);
    transform: rotate(45deg);
    margin: -3px 2px 0 8px;
    flex-shrink: 0;
    transition: transform .2s, border-color .2s
}

.custom-select-btn.open:after {
    transform: rotate(-135deg);
    margin-top: 2px;
    border-color: var(--brand)
}

.custom-select-btn.open {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px #8b5cf624
}

.custom-select-list {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--surface-overlay);
    border: 1px solid var(--glass-brd);
    border-radius: 14px;
    z-index: 50;
    overflow: hidden;
    box-shadow: var(--card-shadow-lg);
    padding: 6px
}

.custom-select-list.open {
    display: block;
    animation: dropIn .16s ease
}

.custom-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    font-size: 15px;
    cursor: pointer;
    border-radius: 10px;
    transition: background .15s;
    color: var(--text-dark)
}

.custom-select-option:hover,
.custom-select-option:active {
    background: var(--input-bg)
}

.custom-select-option.selected {
    background: var(--brand-light);
    color: var(--brand);
    font-weight: 700
}

.custom-select-option.selected:after {
    content: "✓";
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0
}

.invite-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background: #120d1f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0 26px 46px;
    overflow: hidden
}

.invite-overlay:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(6, 2, 14, .55))
}

.invite-overlay:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 24%;
    width: 74%;
    height: 36%;
    transform: translate(-50%);
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(closest-side, #ffffff61, #c8e1ff1a, #fff0);
    animation: glintPulse 3.6s ease-in-out infinite;
    mix-blend-mode: screen
}

@keyframes glintPulse {

    0%,
    to {
        opacity: .35
    }

    50% {
        opacity: .85
    }
}

@media (prefers-reduced-motion: reduce) {
    .invite-overlay:before {
        animation: none
    }
}

.invite-mascot,
.invite-logo {
    display: none
}

.invite-form {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center
}

.invite-sub {
    font-size: 15px;
    color: #fffffff0;
    margin-bottom: 22px;
    text-align: center;
    font-weight: 600;
    text-shadow: 0 1px 10px rgba(6, 2, 14, .6)
}

.invite-input {
    width: 100%;
    max-width: 340px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 16px;
    background: #ffffff29;
    color: #fff;
    font-size: 16px;
    outline: none;
    text-align: center;
    margin-bottom: 16px;
    font-family: inherit;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px)
}

.invite-input::placeholder {
    color: #ffffff9e
}

.invite-input:focus {
    border-color: #ffffffeb;
    box-shadow: 0 0 0 4px #ffffff38;
    background: #ffffff3d
}

.invite-btn {
    width: 100%;
    max-width: 340px;
    padding: 16px;
    color: #fff;
    background: var(--holo);
    border: none;
    border-radius: 16px;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: var(--glow-shadow);
    transition: all .2s
}

.invite-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px #00124285
}

.invite-btn:active {
    transform: scale(.98)
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: var(--brand-light);
    color: var(--brand);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px
}

.section-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -.3px
}

.section-link {
    font-size: 13px;
    color: var(--highlight);
    font-weight: 600;
    cursor: pointer
}

.agent-type-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px
}

.agent-type-label {
    font-size: 13px;
    color: var(--text-sec)
}

.red-btn {
    width: 100%;
    padding: 14px;
    background: #feeceb;
    color: var(--red);
    border: 1px solid #FBD5D2;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 18px;
    transition: all .2s
}

.red-btn:active {
    transform: scale(.98);
    background: #fbd5d2
}

.mascot-img {
    object-fit: contain;
    vertical-align: middle
}

.search-bar {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    font-size: 14px;
    background: var(--input-bg);
    color: var(--text-dark);
    outline: none;
    margin-bottom: 14px;
    font-family: inherit
}

.search-bar:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px #8b5cf624
}

.toggle-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-sec)
}

.toggle-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    animation: pulse 1.5s infinite
}

@keyframes pulse {

    0%,
    to {
        opacity: 1
    }

    50% {
        opacity: .4
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.btn-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    vertical-align: -2px;
    margin-right: 6px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite
}

.btn-filled {
    flex: 1;
    padding: 16px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 16px;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    box-shadow: none;
    transition: all .2s
}

.btn-filled:hover:not(:disabled) {
    filter: brightness(1.05);
    transform: translateY(-1px)
}

.btn-filled:active:not(:disabled) {
    transform: scale(.985)
}

.btn-filled:disabled {
    background: var(--input-bg);
    color: var(--text-hint);
    box-shadow: none;
    cursor: default
}

.btn-outlined {
    flex: 1;
    padding: 16px;
    background: var(--card-bg);
    color: var(--brand);
    border: 1.5px solid var(--brand);
    border-radius: 16px;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    transition: all .2s
}

.btn-outlined:active {
    transform: scale(.98)
}

.app-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px
}

.app-card {
    background: var(--card-bg);
    border-radius: var(--radius-sm);
    padding: 22px 12px;
    text-align: center;
    border: 1px solid var(--glass-brd);
    box-shadow: var(--card-shadow);
    cursor: pointer;
    transition: transform .2s
}

.app-card:active {
    transform: scale(.96)
}

.app-card .app-icon {
    font-size: 34px;
    margin-bottom: 8px
}

.app-card .app-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark)
}

.bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start
}

.bento>* {
    min-width: 0;
    margin-bottom: 0 !important
}

.bento>.b-2 {
    grid-column: 1 / -1
}

.bento .b-2>* {
    margin-bottom: 0 !important
}

.bento-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    min-height: 112px;
    padding: 18px;
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--glass-brd);
    box-shadow: var(--card-shadow);
    cursor: pointer;
    transition: border-color .18s ease
}

.bento-tile:hover {
    border-color: var(--brand)
}

.bento-tile:active {
    transform: scale(.985)
}

.bento-tile .bt-ic {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    background: var(--brand-light)
}

.bento-tile .bt-ic svg {
    width: 22px;
    height: 22px;
    display: block
}

.bento-tile .bt-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -.2px
}

.bento-tile .bt-sub {
    font-size: 12px;
    color: var(--text-hint);
    font-weight: 600;
    margin-top: 3px;
    line-height: 1.4
}

.bento-tile .bt-arrow {
    position: absolute;
    right: 18px;
    bottom: 18px;
    color: var(--brand);
    font-size: 18px;
    font-weight: 600;
    opacity: .5;
    background: none;
    transition: transform .18s ease, opacity .18s ease
}

.bento-tile:hover .bt-arrow {
    opacity: 1;
    transform: translate(2px)
}

.tier-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--glass-brd);
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    transition: box-shadow .2s ease, transform .15s ease
}

.tier-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px
}

.tier-card.facet-peach {
    background: var(--card-bg)
}

.tier-card.facet-peach:before {
    background: var(--brand)
}

.tier-card.facet-cyan {
    background: var(--card-bg)
}

.tier-card.facet-cyan:before {
    background: var(--brand)
}

.tier-card.facet-purple {
    background: var(--card-bg)
}

.tier-card.facet-purple:before {
    background: var(--brand)
}

.tier-card.facet-deep {
    background: var(--card-bg)
}

.tier-card.facet-deep:before {
    background: var(--brand)
}

.tier-card.tier-detected {
    box-shadow: 0 0 0 2px var(--brand), var(--card-shadow-lg)
}

.tier-card.tier-locked {
    opacity: .58;
    filter: grayscale(.3)
}

.tier-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px
}

.tier-badge.facet-peach {
    background: #e6edff;
    color: #2447c4
}

.tier-badge.facet-cyan {
    background: #e1f3fb;
    color: #0e7ca0
}

.tier-badge.facet-purple {
    background: #e9ebff;
    color: #3f45c8
}

.tier-badge.facet-deep {
    background: var(--brand-light);
    color: var(--brand-deep)
}

.gp-tier {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    padding: 22px;
    margin-bottom: 16px;
    background: var(--card-bg);
    border: 1px solid var(--glass-brd);
    box-shadow: var(--card-shadow);
    transition: box-shadow .2s ease, transform .15s ease
}

.gp-tier:hover {
    box-shadow: var(--card-shadow-lg);
    transform: translateY(-2px)
}

.gp-tier:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 58%;
    pointer-events: none;
    background: linear-gradient(180deg, #ffffff8c, #fff0)
}

.gp-tier:after {
    content: "";
    position: absolute;
    top: -42%;
    right: -28%;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--tier, rgba(139, 92, 246, .22)), transparent);
    opacity: .6;
    pointer-events: none
}

.gp-guardian {
    --tier: rgba(51, 180, 232, .26)
}

.gp-builder {
    --tier: rgba(108, 123, 245, .26)
}

.gp-honor {
    --tier: rgba(139, 92, 246, .28)
}

.gp-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    position: relative
}

.gp-diamond {
    width: 46px;
    height: 62px;
    object-fit: contain;
    flex-shrink: 0;
    animation: diamondFloat 6s ease-in-out infinite
}

@media (prefers-reduced-motion: reduce) {
    .gp-diamond {
        animation: none
    }
}

.gp-headtext {
    flex: 1;
    min-width: 0
}

.gp-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -.2px;
    margin-bottom: 5px
}

.gp-status {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--brand-light);
    color: var(--brand)
}

.gp-status.sold {
    background: var(--input-bg);
    color: var(--text-hint)
}

.gp-status.held {
    background: #e7f8ef;
    color: var(--green)
}

.gp-price {
    font-size: 33px;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -.6px;
    font-family: SF Mono, Menlo, monospace;
    line-height: 1.1;
    position: relative
}

.gp-price .u {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-sec);
    margin-left: 6px;
    font-family: -apple-system, sans-serif
}

.gp-bar {
    height: 6px;
    border-radius: 6px;
    background: #eaeff9;
    overflow: hidden;
    margin-top: 14px;
    position: relative
}

.gp-bar>span {
    display: block;
    height: 100%;
    border-radius: 6px;
    transition: width .6s cubic-bezier(.2, .7, .2, 1)
}

.gp-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-sec);
    margin-top: 8px;
    position: relative
}

.gp-join {
    width: 100%;
    margin-top: 18px;
    padding: 16px;
    border: none;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    transition: all .2s;
    background: var(--brand);
    box-shadow: none
}

.gp-join:hover:not(:disabled) {
    filter: brightness(1.05);
    transform: translateY(-1px)
}

.gp-join:active:not(:disabled) {
    transform: scale(.985)
}

.gp-join:disabled {
    background: var(--input-bg);
    color: var(--text-hint);
    box-shadow: none;
    cursor: default
}

.gp-join .btn-spinner {
    border-color: #ffffff73;
    border-top-color: #fff
}

body.dark .gp-tier:before {
    background: linear-gradient(180deg, #ffffff12, #fff0)
}

body.dark .gp-tier {
    border-color: #ffffff1a
}

body.dark .gp-price {
    color: #f2ecff
}

body.dark .gp-bar {
    background: #ffffff0f
}

body.dark .gp-status {
    background: #a78bfa29;
    color: #c4b5fd
}

body.dark .gp-status.sold {
    background: #8c82aa29;
    color: var(--text-hint)
}

body.dark .gp-status.held {
    background: #12b76a2e;
    color: #52e0a0
}

body.dark .gp-join:disabled {
    background: #8c82aa24;
    color: var(--text-hint)
}

.invite-spark {
    position: absolute;
    pointer-events: none;
    color: #fff;
    line-height: 1;
    z-index: 2;
    filter: drop-shadow(0 0 7px rgba(255, 255, 255, 1)) drop-shadow(0 0 16px rgba(150, 195, 255, .9));
    animation: twinkle 2.3s ease-in-out infinite
}

@keyframes twinkle {

    0%,
    to {
        opacity: .2;
        transform: scale(.6) rotate(0)
    }

    50% {
        opacity: 1;
        transform: scale(1.15) rotate(45deg)
    }
}

@media (prefers-reduced-motion: reduce) {
    .invite-spark {
        animation: none;
        opacity: .8
    }
}

.badge-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    background: var(--brand-light);
    color: var(--brand)
}

.badge-live .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 2px #8b5cf617;
    animation: pulse 1.6s ease-in-out infinite
}

@keyframes shimmer {
    0% {
        background-position: -200% 0
    }

    to {
        background-position: 200% 0
    }
}

.skeleton {
    background: linear-gradient(90deg, #ffffff09 22%, #ffffff1c, #ffffff09 78%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
    border: 1px solid var(--glass-brd)
}

.skeleton-card {
    height: 120px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    padding: 0
}

body.dark .skeleton {
    background: linear-gradient(90deg, #ffffff09 22%, #ffffff1c, #ffffff09 78%);
    background-size: 200% 100%;
    border: 1px solid var(--glass-brd)
}

.state-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 44px 24px;
    gap: 8px
}

.state-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px
}

.state-icon.tone-empty {
    background: var(--brand-light);
    color: var(--brand)
}

.state-icon.tone-error {
    background: #feeceb;
    color: var(--red)
}

.state-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-dark)
}

.state-desc {
    font-size: 12px;
    color: var(--text-hint);
    max-width: 280px;
    line-height: 1.6
}

.state-spinner {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-bottom: 2px;
    border: 3px solid var(--border-light);
    border-top-color: var(--brand);
    animation: spin .8s linear infinite
}

.btn-sell {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 14px;
    padding: 15px;
    font-size: 16px;
    cursor: pointer
}

.btn-sell:disabled {
    background: var(--input-bg);
    color: var(--text-hint);
    box-shadow: none;
    cursor: default
}

.ext-links {
    display: flex;
    gap: 10px;
    margin-top: 12px
}

.ext-link {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--input-bg);
    color: var(--text-sec);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s
}

.ext-link:hover {
    border-color: var(--brand);
    color: var(--brand)
}

.ext-link:active {
    transform: scale(.97)
}

body.dark .tab-bar {
    background: #120d1feb;
    border-top-color: var(--glass-brd)
}

body.dark .progress-bar,
body.dark .node-progress-wrap {
    background: #ffffff0f
}

body.dark .wallet-indicator.connected {
    background: #12b76a29;
    border-color: #12b76a59
}

body.dark .red-btn {
    background: #f0443829;
    border-color: #f0443852
}

body.dark .tier-badge.facet-peach {
    background: #a78bfa2e;
    color: #c4b5fd
}

body.dark .tier-badge.facet-cyan {
    background: #33b4e82e;
    color: #8fd8f0
}

body.dark .tier-badge.facet-purple {
    background: #8b5cf633;
    color: #c4b5fd
}

body.dark .tier-badge.facet-deep {
    background: #8b5cf638;
    color: #ddd6fe
}

body.dark .lr-delta.up {
    background: #12b76a2e;
    color: #52e0a0
}

body.dark .lr-delta.down {
    background: #f044382e;
    color: #ff8a8a
}

body.dark .roi-badge {
    background: #12b76a29;
    color: #52e0a0
}

body.dark .state-icon.tone-error {
    background: #f0443829
}

.card,
.stat-box,
.live-body,
.strategy-card,
.node-card,
.trade-item,
.tier-card,
.gp-tier,
.bento-tile,
.app-card,
.balance-card,
.sub-tabs,
.modal-sheet,
.custom-select-list,
.lang-dropdown,
.form-input,
.form-select,
.search-bar,
.custom-select-btn,
.swap-quote-card,
.record-filter,
.header-btn,
.wallet-indicator {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important
}

.invite-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    animation: heroFloat 9s ease-in-out infinite alternate;
    will-change: transform
}

.invite-bg {
    display: block;
    width: 100%;
    height: auto
}

.invite-top:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 44%;
    pointer-events: none;
    background: linear-gradient(180deg, #120d1f00, #120d1f 94%)
}

@keyframes heroFloat {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-1.4%)
    }
}

@media (prefers-reduced-motion: reduce) {
    .invite-top {
        animation: none
    }
}

.gp-dia {
    position: relative;
    flex-shrink: 0;
    display: inline-flex
}

.gp-dia:after {
    content: "";
    position: absolute;
    top: -24%;
    right: -18%;
    bottom: -24%;
    left: -18%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(150, 195, 255, .25), rgba(150, 195, 255, .06), transparent);
    animation: glintPulse 2.4s ease-in-out infinite
}

@media (prefers-reduced-motion: reduce) {
    .gp-dia:after {
        animation: none
    }
}

::-webkit-scrollbar {
    width: 0
}

.btn-deploy,
.btn-filled,
.gp-join,
.invite-btn,
.btn-sell {
    background: linear-gradient(180deg, #7c3aed, #6d28d9 55%, #5b21b6);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-weight: 800;
    letter-spacing: .2px;
    box-shadow: inset 0 1px #ffffff52, inset 0 -1.5px #00000047, 0 6px 18px #5b21b673, 0 1px 3px #00000059;
    transition: transform .14s ease, box-shadow .14s ease, opacity .18s ease
}

.btn-deploy {
    padding: 18px;
    font-size: 17px
}

.btn-filled,
.gp-join,
.invite-btn {
    padding: 16px;
    font-size: 16px
}

.btn-deploy:active,
.btn-filled:active,
.gp-join:active,
.invite-btn:active,
.btn-sell:active:not(:disabled) {
    transform: translateY(1.5px);
    box-shadow: inset 0 2px 5px #00000052, 0 1px 3px #0000004d
}

.btn-deploy:disabled,
.btn-filled:disabled,
.gp-join:disabled,
.invite-btn:disabled,
.btn-sell:disabled {
    opacity: .4;
    cursor: not-allowed;
    transform: none
}

.all-btn,
.record-filter,
.modal-close,
.header-btn {
    background: linear-gradient(180deg, #ffffff1a, #ffffff0b);
    border: 1px solid var(--glass-brd);
    box-shadow: inset 0 1px #ffffff24, inset 0 -1px #0000002e;
    transition: border-color .18s ease, background .18s ease, transform .14s ease
}

.all-btn:active,
.modal-close:active,
.header-btn:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px #00000040
}

.all-btn {
    color: var(--brand)
}

.all-btn:disabled {
    color: var(--text-hint);
    background: var(--input-bg);
    border-color: var(--border-light);
    box-shadow: none;
    cursor: not-allowed
}

.record-filter.active,
.sub-tab.active {
    background: var(--brand-light);
    border-color: #8b5cf673;
    color: var(--brand)
}

.red-btn {
    background: #fb71851f;
    border: 1px solid rgba(251, 113, 133, .3);
    color: var(--red);
    border-radius: 14px;
    box-shadow: none
}

.red-btn:active {
    transform: scale(.985);
    background: #fb71852e
}

.mkt-card {
    padding: 14px 14px 10px
}

.mkt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px
}

.mkt-pair {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -.2px
}

.mkt-pair-switch {
    display: inline-flex;
    gap: 6px
}

.mkt-chip {
    padding: 3px 9px;
    border-radius: 7px;
    border: 1px solid var(--glass-brd);
    background: var(--card-bg);
    color: var(--text-sec);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer
}

.mkt-chip.on {
    background: var(--brand-light);
    border-color: #8b5cf673;
    color: var(--brand)
}

.mkt-src {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--text-hint);
    padding: 2px 8px;
    border: 1px solid var(--glass-brd);
    border-radius: 6px
}

.mkt-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px
}

.mkt-price {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.6px;
    font-variant-numeric: tabular-nums;
    line-height: 1.1
}

.mkt-chg {
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums
}

.mkt-price.up,
.mkt-chg.up {
    color: var(--green)
}

.mkt-price.down,
.mkt-chg.down {
    color: var(--red)
}

.mkt-stats {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 5px;
    font-size: 10.5px;
    color: var(--text-hint)
}

.mkt-stats b {
    color: var(--text-sec);
    font-weight: 700;
    margin-left: 4px;
    font-variant-numeric: tabular-nums
}

.mkt-ivs {
    display: flex;
    gap: 6px;
    margin: 9px 0 6px;
    flex-wrap: wrap
}

.mkt-iv {
    padding: 4px 11px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--glass-brd);
    background: var(--card-bg);
    color: var(--text-sec);
    font-size: 12px;
    font-weight: 700;
    transition: all .15s ease
}

.mkt-iv.on {
    background: var(--brand-light);
    border-color: #8b5cf680;
    color: var(--brand)
}

.mkt-iv:active {
    transform: translateY(1px)
}

@keyframes mktFlashUp {
    0% {
        background: #34d39947
    }

    to {
        background: transparent
    }
}

@keyframes mktFlashDown {
    0% {
        background: #fb718547
    }

    to {
        background: transparent
    }
}

.mkt-price.flash-up {
    animation: mktFlashUp .42s ease-out;
    border-radius: 6px
}

.mkt-price.flash-down {
    animation: mktFlashDown .42s ease-out;
    border-radius: 6px
}

@media (prefers-reduced-motion: reduce) {

    .mkt-price.flash-up,
    .mkt-price.flash-down {
        animation: none
    }
}

.mkt-src {
    display: inline-flex;
    align-items: center;
    gap: 5px
}

.mkt-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    animation: livePulse 1.5s ease-in-out infinite
}

.mkt-chart {
    width: 100%;
    height: 190px
}

.mkt-msg {
    font-size: 11px;
    color: var(--text-hint);
    text-align: center;
    padding: 10px 0 2px
}

.mkt-msg.err {
    color: var(--red)
}

.lv-block {
    margin-bottom: 12px
}

.lv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px
}

.lv-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark)
}

.lv-cur {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-hint);
    letter-spacing: .2px
}

.lv-cur.is-on {
    color: var(--brand)
}

.lv-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.lv-mark {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.lv-mark svg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.lv-mark b {
    position: relative;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.2px;
    font-variant-numeric: tabular-nums
}

.lv-mark.sz-md {
    width: 34px;
    height: 34px;
    font-size: 11px
}

.lv-mark.sz-sm {
    width: 26px;
    height: 26px;
    font-size: 9px
}

.lv-mark.is-on {
    color: var(--brand)
}

.lv-mark.is-on svg {
    filter: drop-shadow(0 0 5px rgba(139, 92, 246, .55))
}

.lv-mark.is-on svg path {
    fill: var(--brand-light)
}

.lv-mark.is-off {
    color: var(--platinum-2);
    opacity: .62
}

.lv-mark.is-off svg path {
    fill: none
}

.lv-mark.is-off b {
    color: var(--text-hint)
}

.lv-na {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-hint)
}

.lv-prog {
    margin-top: 14px
}

.lv-bar {
    height: 5px;
    border-radius: 5px;
    background: var(--input-bg);
    overflow: hidden
}

.lv-bar>span {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: var(--brand);
    transition: width .45s cubic-bezier(.2, .7, .2, 1)
}

@media (prefers-reduced-motion: reduce) {
    .lv-bar>span {
        transition: none
    }
}

.lv-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 7px;
    font-size: 11px;
    color: var(--text-sec)
}

.lv-meta b {
    font-weight: 800;
    color: var(--brand);
    font-variant-numeric: tabular-nums
}

.lv-maxed {
    color: var(--green);
    font-weight: 700
}

.lv-note {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-hint)
}
/* ====================================================
   iOS / WebKit 渲染与层级错乱专项修复补丁
   ==================================================== */

/* 1. 修复 html 背景在 iOS 上滚动撕裂与重绘异常 */
html {
    background-attachment: scroll !important;
}

/* 2. 强制锁死固定栏与弹窗的 3D Z 轴深度，解决被 card 盖住或透光 */
.header,
.tab-bar {
    -webkit-transform: translate3d(0, 0, 100px);
    transform: translate3d(0, 0, 100px);
}

.modal-overlay,
.invite-overlay {
    -webkit-transform: translate3d(0, 0, 999px);
    transform: translate3d(0, 0, 999px);
}

/* 3. 修复 overflow: hidden + border-radius 圆角裁剪在 iOS 失效并漏出直角方块 */
.card,
.node-card,
.gp-tier,
.bento-tile,
.tier-card,
.sheen,
.modal-sheet,
.agent-tier,
.stat-box,
.sub-tabs {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* 4. 修复 clip-path 钻石多边形与旋转动画产生的黑色坏块与闪烁 */
.holo-diamond,
.holo-diamond .facet,
.gp-diamond {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

/* 5. 修复列表蒙版渐变滚动撕裂 */
.trade-live .tl-feed {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}