[flex-center] {
    display: flex;
    align-items: center;
    justify-content: center;
}

[flex-around] {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

[flex-between] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

[flex-shrink] {
    flex-shrink: 0;
}

[flex-align="start"] {
    align-items: start;
}

[flex-align="end"] {
    align-items: end;
}

[flex="auto"] {
    flex: auto;
}

[textLine="1"] {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

[textLine="2"] {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

[textLine="3"] {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

[textLine="4"] {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    position: relative;
}

* {
    box-sizing: border-box;
}

a {
    display: block;
    text-decoration: none;
}

a img {
    display: block;
}


#app {
    width: 100%;
}

/* tab切换部分 */
:root {
    --tb-text: #AAAAAA;
    --tb-text-on: #FA3767;
    --tb-icon-w: 1.375rem;
    --tb-icon-h: 1.375rem;
    --tb-label-sz: .625rem;
    --tb-h: 3.25rem;
}

.tb-main {
    min-height: 100vh;
    padding-bottom: calc(var(--tb-h) + 1.25rem);
}

.tb-bottom-safe {
    height: var(--tb-h);
}

.tb-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--tb-h);
    background: rgba(15, 15, 15, 0.55);
    backdrop-filter: blur(.625rem);
    font-family: 'Inter 500', sans-serif;
}

.tb-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: .375rem;
    color: var(--tb-text);
}

.tb-tab-icon {
    width: var(--tb-icon-w);
    height: var(--tb-icon-h);
    object-fit: contain;
}

.tb-tab-label {
    font-size: var(--tb-label-sz);
}

.tb-tab.tb-tab-active {
    color: var(--tb-text-on);
}