/* Mobile homepage — gold-trade8.com/h5 style */
.index-page--exchange {
    --idx-vw: var(--shell-vw, 100vw);
    background: var(--app-bg, #f5f7f9);
    color: var(--app-text, #24314f);
    padding-bottom: calc(var(--idx-vw) * 100 / 750);
}

.index-page--exchange > .container {
    padding: 0;
}

.idx-header {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--idx-vw) / 750);
    padding: calc(14 * var(--idx-vw) / 750) calc(20 * var(--idx-vw) / 750);
    padding-top: calc(env(safe-area-inset-top, 0px) + calc(14 * var(--idx-vw) / 750));
    background: var(--app-bg, #f5f7f9);
}

.idx-header-avatar {
    flex-shrink: 0;
    width: calc(60 * var(--idx-vw) / 750);
    height: calc(60 * var(--idx-vw) / 750);
    border-radius: 50%;
    overflow: hidden;
    border: 0;
    background: linear-gradient(180deg, #5ba3ff 0%, var(--app-blue, #2f73f6) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.idx-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.idx-header-avatar span {
    font-size: calc(26 * var(--idx-vw) / 750);
    color: #fff;
}

.idx-header-search {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: calc(10 * var(--idx-vw) / 750);
    height: calc(64 * var(--idx-vw) / 750);
    padding: 0 calc(22 * var(--idx-vw) / 750);
    border: 0;
    border-radius: calc(999 * var(--idx-vw) / 750);
    background: #eef1f6;
    color: var(--app-muted, #8a93a8);
    font-size: calc(24 * var(--idx-vw) / 750);
    cursor: pointer;
    text-align: left;
}

.idx-header-search span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.idx-header-actions {
    display: inline-flex;
    align-items: center;
    gap: calc(6 * var(--idx-vw) / 750);
    flex-shrink: 0;
}

.idx-header-action {
    width: calc(50 * var(--idx-vw) / 750);
    height: calc(50 * var(--idx-vw) / 750);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #969a9b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.idx-header-action .idx-header-icon {
    display: block;
    width: calc(50 * var(--idx-vw) / 750);
    height: calc(50 * var(--idx-vw) / 750);
}

.idx-hero {
    margin: 0 calc(20 * var(--idx-vw) / 750) calc(16 * var(--idx-vw) / 750);
    border-radius: calc(18 * var(--idx-vw) / 750);
    overflow: hidden;
}

.idx-hero--swiper {
    box-shadow: 0 calc(8 * var(--idx-vw) / 750) calc(24 * var(--idx-vw) / 750) rgba(33, 63, 124, 0.1);
}

.idx-hero--default {
    position: relative;
    min-height: calc(220 * var(--idx-vw) / 750);
    padding: calc(28 * var(--idx-vw) / 750) calc(28 * var(--idx-vw) / 750) calc(32 * var(--idx-vw) / 750);
    background: linear-gradient(135deg, #1a3f8f 0%, #2f73f6 55%, #5ba3ff 100%);
    box-shadow: 0 calc(10 * var(--idx-vw) / 750) calc(28 * var(--idx-vw) / 750) rgba(47, 115, 246, 0.22);
}

.idx-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 58%;
}

.idx-hero-title {
    font-size: calc(44 * var(--idx-vw) / 750);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: calc(12 * var(--idx-vw) / 750);
}

.idx-hero-sub {
    font-size: calc(24 * var(--idx-vw) / 750);
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.35;
}

.idx-hero-sub--muted {
    color: rgba(255, 255, 255, 0.72);
    margin-top: calc(4 * var(--idx-vw) / 750);
}

.idx-hero-art {
    position: absolute;
    right: calc(10 * var(--idx-vw) / 750);
    bottom: calc(10 * var(--idx-vw) / 750);
    width: calc(220 * var(--idx-vw) / 750);
    height: calc(180 * var(--idx-vw) / 750);
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.22) 0%, transparent 55%),
        radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.12) 0%, transparent 50%);
    pointer-events: none;
}

.idx-announce {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--idx-vw) / 750);
    margin: 0 calc(20 * var(--idx-vw) / 750) calc(16 * var(--idx-vw) / 750);
    padding: calc(12 * var(--idx-vw) / 750) calc(16 * var(--idx-vw) / 750);
    border-radius: calc(12 * var(--idx-vw) / 750);
    background: #ffffff;
    color: var(--app-text, #24314f);
    font-size: calc(22 * var(--idx-vw) / 750);
    line-height: 1.4;
    box-shadow: var(--app-shadow, 0 calc(4 * var(--idx-vw) / 750) calc(16 * var(--idx-vw) / 750) rgba(33, 63, 124, 0.06));
}

.idx-announce-icon {
    flex-shrink: 0;
    font-size: calc(26 * var(--idx-vw) / 750);
}

.idx-announce-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.idx-announce-more {
    flex-shrink: 0;
    color: var(--app-muted, #8a93a8);
    font-size: calc(24 * var(--idx-vw) / 750);
}

.idx-grid-wrap {
    margin: 0 calc(20 * var(--idx-vw) / 750) calc(16 * var(--idx-vw) / 750);
    padding: calc(22 * var(--idx-vw) / 750) calc(8 * var(--idx-vw) / 750) calc(18 * var(--idx-vw) / 750);
    border-radius: calc(16 * var(--idx-vw) / 750);
    background: #ffffff;
    box-shadow: var(--app-shadow, 0 calc(4 * var(--idx-vw) / 750) calc(16 * var(--idx-vw) / 750) rgba(33, 63, 124, 0.06));
}

.idx-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(18 * var(--idx-vw) / 750) calc(6 * var(--idx-vw) / 750);
}

.idx-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: calc(124 * var(--idx-vw) / 750);
    border: 0;
    background: transparent;
    padding: calc(6 * var(--idx-vw) / 750) calc(4 * var(--idx-vw) / 750);
    cursor: pointer;
    text-align: center;
}

.idx-grid-icon {
    flex-shrink: 0;
    width: calc(68 * var(--idx-vw) / 750);
    height: calc(68 * var(--idx-vw) / 750);
    margin: 0 0 calc(8 * var(--idx-vw) / 750);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(16 * var(--idx-vw) / 750);
    background: transparent;
    color: var(--app-blue, #2f73f6);
}

.idx-grid-icon img {
    width: calc(44 * var(--idx-vw) / 750);
    height: calc(44 * var(--idx-vw) / 750);
    object-fit: contain;
}

.idx-grid-icon-svg {
    display: flex;
    align-items: center;
    justify-content: center;
}

.idx-grid-icon-svg svg {
    display: block;
    width: calc(48 * var(--idx-vw) / 750);
    height: calc(48 * var(--idx-vw) / 750);
}

.idx-grid-label {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    min-height: calc(50 * var(--idx-vw) / 750);
    font-size: calc(20 * var(--idx-vw) / 750);
    line-height: 1.25;
    color: var(--app-text, #24314f);
    font-weight: 500;
    text-align: center;
    word-break: break-word;
}

.idx-quick-buy {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(16 * var(--idx-vw) / 750);
    width: calc(100% - calc(40 * var(--idx-vw) / 750));
    margin: 0 calc(20 * var(--idx-vw) / 750) calc(20 * var(--idx-vw) / 750);
    padding: calc(22 * var(--idx-vw) / 750) calc(24 * var(--idx-vw) / 750);
    border: 0;
    border-radius: calc(16 * var(--idx-vw) / 750);
    background: linear-gradient(135deg, #eef5ff 0%, #dcecff 100%);
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    box-shadow: var(--app-shadow, 0 calc(4 * var(--idx-vw) / 750) calc(16 * var(--idx-vw) / 750) rgba(33, 63, 124, 0.06));
}

.idx-quick-buy-art {
    flex-shrink: 0;
    width: calc(88 * var(--idx-vw) / 750);
    height: calc(72 * var(--idx-vw) / 750);
    border-radius: calc(12 * var(--idx-vw) / 750);
    background:
        linear-gradient(135deg, rgba(47, 115, 246, 0.15) 0%, rgba(47, 115, 246, 0.05) 100%),
        radial-gradient(circle at 30% 40%, rgba(47, 115, 246, 0.25) 0%, transparent 55%);
}

.idx-quick-buy-copy {
    flex: 1;
    min-width: 0;
}

.idx-quick-buy-title {
    font-size: calc(30 * var(--idx-vw) / 750);
    font-weight: 700;
    color: var(--app-text, #24314f);
    margin-bottom: calc(6 * var(--idx-vw) / 750);
}

.idx-quick-buy-desc {
    font-size: calc(22 * var(--idx-vw) / 750);
    color: var(--app-muted, #8a93a8);
}

.idx-quick-buy-arrow {
    flex-shrink: 0;
    width: calc(52 * var(--idx-vw) / 750);
    height: calc(52 * var(--idx-vw) / 750);
    border-radius: 50%;
    background: #ffffff;
    color: var(--app-blue, #2f73f6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 calc(4 * var(--idx-vw) / 750) calc(12 * var(--idx-vw) / 750) rgba(47, 115, 246, 0.12);
}

.idx-market-panel {
    padding: 0 calc(20 * var(--idx-vw) / 750) calc(24 * var(--idx-vw) / 750);
}

.idx-market-card {
    border-radius: calc(16 * var(--idx-vw) / 750);
    background: #ffffff;
    box-shadow: var(--app-shadow, 0 calc(4 * var(--idx-vw) / 750) calc(16 * var(--idx-vw) / 750) rgba(33, 63, 124, 0.06));
    overflow: hidden;
}

.idx-ticker-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: calc(8 * var(--idx-vw) / 750);
    padding: calc(20 * var(--idx-vw) / 750) calc(16 * var(--idx-vw) / 750) calc(18 * var(--idx-vw) / 750);
}

.idx-ticker-col {
    border: 0;
    background: transparent;
    padding: 0 calc(4 * var(--idx-vw) / 750);
    cursor: pointer;
    text-align: center;
}

.idx-ticker-pair {
    font-size: calc(24 * var(--idx-vw) / 750);
    font-weight: 700;
    color: var(--app-text, #24314f);
    margin-bottom: calc(6 * var(--idx-vw) / 750);
    line-height: 1.2;
}

.idx-ticker-change {
    font-size: calc(22 * var(--idx-vw) / 750);
    font-weight: 500;
    color: var(--app-success, #00b578);
    margin-bottom: calc(8 * var(--idx-vw) / 750);
    line-height: 1.2;
}

.idx-ticker-change.is-down {
    color: var(--app-danger, #ff1a17);
}

.idx-ticker-price {
    font-size: calc(30 * var(--idx-vw) / 750);
    font-weight: 700;
    color: var(--app-success, #00b578);
    line-height: 1.15;
    word-break: break-word;
}

.idx-ticker-price.is-down {
    color: var(--app-danger, #ff1a17);
}

.idx-quote-block {
    padding: 0 calc(8 * var(--idx-vw) / 750) calc(8 * var(--idx-vw) / 750);
}

.idx-quote-title {
    margin: 0;
    padding: calc(4 * var(--idx-vw) / 750) calc(12 * var(--idx-vw) / 750) calc(14 * var(--idx-vw) / 750);
    font-size: calc(32 * var(--idx-vw) / 750);
    font-weight: 700;
    color: var(--app-text, #24314f);
    border-bottom: 1px solid var(--app-line, #e5ebf5);
}

.idx-quote-head,
.idx-quote-item {
    display: grid;
    grid-template-columns: 1.45fr 1fr 0.95fr;
    gap: calc(8 * var(--idx-vw) / 750);
    align-items: start;
}

.idx-quote-head {
    padding: calc(14 * var(--idx-vw) / 750) calc(12 * var(--idx-vw) / 750) calc(10 * var(--idx-vw) / 750);
    font-size: calc(22 * var(--idx-vw) / 750);
    color: var(--app-muted, #8a93a8);
    line-height: 1.3;
}

.idx-quote-head span:nth-child(2) {
    text-align: center;
}

.idx-quote-head span:nth-child(3) {
    text-align: right;
}

.idx-quote-list {
    display: flex;
    flex-direction: column;
}

.idx-quote-item {
    width: 100%;
    padding: calc(18 * var(--idx-vw) / 750) calc(12 * var(--idx-vw) / 750);
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.idx-quote-item:active {
    background: #f8fafc;
}

.idx-quote-left {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: calc(12 * var(--idx-vw) / 750);
}

.idx-quote-icon {
    flex-shrink: 0;
    width: calc(44 * var(--idx-vw) / 750);
    height: calc(44 * var(--idx-vw) / 750);
    border-radius: 50%;
    object-fit: cover;
    background: var(--app-blue-soft, #eef3ff);
}

.idx-quote-icon--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: calc(20 * var(--idx-vw) / 750);
    font-weight: 700;
    color: var(--app-blue, #2f73f6);
}

.idx-quote-pair {
    min-width: 0;
    flex: 1;
}

.idx-quote-name {
    font-size: calc(28 * var(--idx-vw) / 750);
    font-weight: 700;
    color: var(--app-text, #24314f);
    line-height: 1.25;
    word-break: break-word;
}

.idx-quote-vol {
    margin-top: calc(6 * var(--idx-vw) / 750);
    font-size: calc(20 * var(--idx-vw) / 750);
    color: var(--app-muted, #8a93a8);
    line-height: 1.35;
}

.idx-quote-price {
    padding-top: calc(2 * var(--idx-vw) / 750);
    font-size: calc(30 * var(--idx-vw) / 750);
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}

.idx-quote-price.is-up {
    color: #0a9217;
}

.idx-quote-price.is-down {
    color: #ff1a17;
}

.idx-quote-change {
    justify-self: end;
    min-width: calc(120 * var(--idx-vw) / 750);
    padding: calc(10 * var(--idx-vw) / 750) calc(12 * var(--idx-vw) / 750);
    border-radius: calc(8 * var(--idx-vw) / 750);
    font-size: calc(24 * var(--idx-vw) / 750);
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

.idx-quote-change.is-up {
    background: #0a9217;
    color: #ffffff;
}

.idx-quote-change.is-down {
    background: #ff1a17;
    color: #ffffff;
}

.idx-cs-float {
    position: fixed;
    right: calc(24 * var(--idx-vw) / 750);
    bottom: calc(130 * var(--idx-vw) / 750);
    width: calc(88 * var(--idx-vw) / 750);
    height: calc(88 * var(--idx-vw) / 750);
    border: 0;
    border-radius: 50%;
    background: rgba(134, 220, 160, 0.92);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 calc(8 * var(--idx-vw) / 750) calc(24 * var(--idx-vw) / 750) rgba(52, 168, 100, 0.28);
    cursor: grab;
    z-index: 10003;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.idx-cs-float.is-dragging {
    cursor: grabbing;
    opacity: 0.92;
    box-shadow: 0 calc(12 * var(--idx-vw) / 750) calc(28 * var(--idx-vw) / 750) rgba(52, 168, 100, 0.38);
}

.idx-cs-float-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    pointer-events: none;
}

.idx-cs-float-icon svg {
    display: block;
    width: calc(44 * var(--idx-vw) / 750);
    height: calc(44 * var(--idx-vw) / 750);
}

/* H5 shell: homepage layout (mobile + PC) */
.uni-app-root.layout-mobile-home .index-page--exchange {
    --idx-vw: var(--shell-vw, 100vw);
    background: var(--app-bg, #f5f7f9);
}

html.device-pc .uni-app-root.layout-mobile-home {
    background: #e8ecf2;
}

html.device-pc .index-page--exchange {
    --idx-vw: min(100vw, 430px);
    width: min(430px, 100%);
    max-width: 430px;
    margin: 0 auto;
    padding-top: 0 !important;
    min-height: 100vh;
    box-shadow: 0 0 0 1px var(--app-line, #e5ebf5);
}

html.device-pc .index-page--exchange > .container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    top: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
}

html.device-pc .index-page--exchange .container .banner_box,
html.device-pc .index-page--exchange .container .content {
    display: none !important;
}

.uni-app-root.layout-mobile-home .index-page--exchange .uni-tabbar {
    display: flex !important;
    background: #ffffff;
    border-top: 1px solid var(--app-line, #e5ebf5);
    box-shadow: 0 calc(-4 * var(--idx-vw) / 750) calc(20 * var(--idx-vw) / 750) rgba(33, 63, 124, 0.06);
    padding: calc(8 * var(--idx-vw) / 750) 0 calc(16 * var(--idx-vw) / 750);
    padding-bottom: calc(16 * var(--idx-vw) / 750 + env(safe-area-inset-bottom, 0px));
}

html.device-pc .index-page--exchange .uni-tabbar {
    left: 50%;
    right: auto;
    width: min(430px, 100%);
    transform: translateX(-50%);
}

html.device-pc .index-page--exchange .uni-tabbar-item {
    color: var(--app-muted, #8a93a8);
    font-size: calc(20 * var(--idx-vw) / 750);
}

html.device-pc .index-page--exchange .uni-tabbar-item.active {
    color: var(--app-blue, #2f73f6);
}

html.device-pc .index-page--exchange .uni-tabbar-item img {
    width: calc(48 * var(--idx-vw) / 750);
    height: calc(48 * var(--idx-vw) / 750);
}

html.device-pc .index-page--exchange .uni-tabbar-item.active img {
    filter: brightness(0) saturate(100%) invert(36%) sepia(89%) saturate(1500%) hue-rotate(205deg) brightness(95%) contrast(95%);
}

html.device-pc .index-page--exchange .language-overlay {
    left: 50%;
    right: auto;
    width: min(430px, 100%);
    transform: translateX(-50%);
}