/*
 * v87 — Transaction history
 * Match reference (1st image): card box + grey header + rows + nested Game ID / remarks box
 */

html body #app .transRecord__container[data-v-2565e76d],
html body #app .transRecord__container {
    padding-inline: .34667rem !important;
    padding-block: .21333rem 1.49333rem !important;
    font-family: bahnschrift, sans-serif !important;
    background: #121214 !important;
    min-height: 100% !important;
}

html body #app .transRecord__container .ar[data-v-2565e76d],
html body #app .transRecord__container .ar {
    padding-top: .26667rem !important;
    background: transparent !important;
    margin-bottom: .29333rem !important;
}

html body #app .transRecord__container .ar .ar-searchbar,
html body #app .transRecord__container .ar-searchbar {
    display: flex !important;
    gap: .21333rem !important;
}

html body #app .transRecord__container .ar .ar-select,
html body #app .transRecord__container .ar [class*="select"],
html body #app .transRecord__container .ar .van-cell,
html body #app .transRecord__container .ar .van-field {
    min-height: .96rem !important;
    font-size: .34667rem !important;
    border-radius: .16rem !important;
    background: #2C2C30 !important;
    color: #E8E8EC !important;
    border: none !important;
}

html body #app .transRecord__container .ar .van-cell,
html body #app .transRecord__container .ar .van-field__control {
    color: #E8E8EC !important;
    background: transparent !important;
}

html body #app .transRecord__container-content__item[data-v-2565e76d],
html body #app .transRecord__container-content__item {
    margin: 0 0 .42667rem !important;
    padding: 0 !important;
}

/* Main card box */
html body #app .transRecord__container-content__card[data-v-2565e76d],
html body #app .transRecord__container-content__card {
    background: #2C2C30 !important;
    border-radius: .24rem !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* Top title bar */
html body #app .transRecord__container-content__card-top[data-v-2565e76d],
html body #app .transRecord__container-content__card-top {
    background: #3A3A40 !important;
    background-image: none !important;
    height: 1.06667rem !important;
    min-height: 1.06667rem !important;
    max-height: 1.06667rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-radius: .24rem .24rem 0 0 !important;
    padding: 0 .4rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
}

html body #app .transRecord__container-content__card-top h3[data-v-2565e76d],
html body #app .transRecord__container-content__card-top h3 {
    font-family: bahnschrift, Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: .4rem !important;
    line-height: 1.2 !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Detail / Time / Balance */
html body #app .transRecord__container-content__card-mid[data-v-2565e76d],
html body #app .transRecord__container-content__card-mid {
    padding: .05333rem .4rem 0 !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    background: #2C2C30 !important;
}

html body #app .transRecord__container-content__card-mid .line[data-v-2565e76d],
html body #app .transRecord__container-content__card-mid .line {
    position: relative !important;
    background-color: transparent !important;
    height: auto !important;
    min-height: .88rem !important;
    max-height: none !important;
    padding: .26667rem 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: .34667rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: .01333rem solid rgba(255, 255, 255, 0.06) !important;
    box-sizing: border-box !important;
}

html body #app .transRecord__container-content__card-mid .line:last-child[data-v-2565e76d],
html body #app .transRecord__container-content__card-mid .line:last-child {
    border-bottom: none !important;
    padding-bottom: .21333rem !important;
}

html body #app .transRecord__container-content__card-mid .line .left[data-v-2565e76d],
html body #app .transRecord__container-content__card-mid .line .left {
    color: #8E8E96 !important;
    font-size: .34667rem !important;
    font-weight: 400 !important;
    flex: 0 0 auto !important;
    padding-right: .26667rem !important;
}

html body #app .transRecord__container-content__card-mid .line .right[data-v-2565e76d],
html body #app .transRecord__container-content__card-mid .line .right {
    color: #FFFFFF !important;
    text-align: right !important;
    font-size: .34667rem !important;
    font-weight: 400 !important;
    flex: 1 1 auto !important;
    word-break: break-word !important;
}

html body #app .transRecord__container-content__card-mid .line .red[data-v-2565e76d],
html body #app .transRecord__container-content__card-mid .line .red,
html body #app .transRecord__container-content__card-mid .line .right.red {
    color: #E8484A !important;
    font-weight: 700 !important;
}

html body #app .transRecord__container-content__card-mid .line .green[data-v-2565e76d],
html body #app .transRecord__container-content__card-mid .line .green,
html body #app .transRecord__container-content__card-mid .line .right.green {
    color: #18B660 !important;
    font-weight: 700 !important;
}

html body #app .transRecord__container-content__card-mid .line:last-child .right[data-v-2565e76d],
html body #app .transRecord__container-content__card-mid .line:last-child .right {
    font-size: .45333rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

/* Nested remarks / Game ID box (content-sized, not huge empty void) */
html body #app .transRecord__container-content__card-bot[data-v-2565e76d],
html body #app .transRecord__container-content__card-bot {
    padding: .10667rem .34667rem .34667rem !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    background: #2C2C30 !important;
}

html body #app .transRecord__container-content__card-bot .textarea[data-v-2565e76d],
html body #app .transRecord__container-content__card-bot .textarea,
html body #app .transRecord__container-content__card-bot textarea.textarea {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 1.2rem !important;
    max-height: none !important;
    border: none !important;
    border-radius: .16rem !important;
    padding: .26667rem .32rem !important;
    resize: none !important;
    margin: 0 !important;
    font-family: bahnschrift, Inter, sans-serif !important;
    font-size: .32rem !important;
    line-height: 1.4 !important;
    background-color: #1A1A1E !important;
    color: #B8B8C0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    field-sizing: content;
}

html body #app .transRecord__container-content__card-bot .textarea[data-v-2565e76d]::placeholder,
html body #app .transRecord__container-content__card-bot .textarea::placeholder {
    color: transparent !important;
}

html body #app .transRecord__container-content__card > div[style*="display:none"] {
    display: none !important;
}

html body #app .transRecord__container-empty[data-v-2565e76d],
html body #app .transRecord__container-empty {
    margin-top: .66667rem !important;
}