:root {
    --color_0:#12141D;
    --color_1: #6B6D70;
    --color_2: #9CA6B9;
    --color_3: #FF7C58;
    --color_4: #EAB350;
    --color_5: #FE4D50;
    --color_6: #04B578;
    --color_7: #f60;
    --color_8: #d9d9d9;
    --color_9: rgba(0, 0, 0, 0.45);
    --color_10: rgba(0, 0, 0, 0.06);
    --color_11: rgba(0, 0, 0, 0.25);
    --color_12: #ffc26b;
    --color_13: #e52848;
    --color_14: #bfbfbf;
    --color_15: rgba(5, 145, 255, 0.1);
    --color_16: #2878FF;
    --color_17: #4096ff;
    --color_18: rgba(255,77,79,.2);
    --color_19: #d9d9d9;
    --color_20: rgba(0, 0, 0, 0.65);
    --color_21: #6B6D70;
    --color_22: #FFD700;
    --color-text: var(--color_0);
    --color-text-desc: rgba(0, 0, 0, 0.45);
    --color-text-link: var(--color_16);
    --color-text-link_hover: var(--color_17);
    --color-text-uc-header: #c1c6c8;
    --color-text-uc-header_hover: #FFFFFF;
    --color-bg-uc: #262f3e;
    --color-bg-uc-dropdown: #151822;
    --color-bg-uc-container: #F5F7F9;
    --color-tps: #00BCE0;
    --color-dps: #7A73FF;
    --color-kps: #EAB350;
    --color-fps: #FF962A;
    --color-sfps: #1677FF;

    --color-primary: #2878FF;
    --color-primary-bg: #e6f7ff;

    --color-link: #1677ff;                  /* 链接色 */
    --color-link-hover: #69b1ff;            /* 链接色的悬浮态 */
    --color-link-active: #0958d9;           /* 链接色的激活态 */

    --color-error: #ff4d4f;                 /* 错误色 */
    --color-error-hover: #ff7875;           /* 错误色的深色悬浮态 */
    --color-error-bg: #fff2f0;              /* 错误色的浅色背景 */
    --color-error-bg-hover: #fff1f0;        /* 错误色的浅色背景悬浮态 */
    --color-error-border: #ffccc7;          /* 错误色的边框色 */
    --color-error-border-hover: #ffa39e;    /* 错误色的边框色悬浮态 */
    --color-error-text: #ff4d4f;            /* 错误色的文字色 */
    --color-error-text-hover: #ff7875;      /* 错误色的文字色悬浮态 */
    --color-error-active: #d9363e;          /* 错误色的深色激活态 */
    --color-error-text-active: #d9363e;     /* 错误色的文字色激活态 */

    --color-info: #1677ff;                  /* 信息色 */
    --color-info-hover: #4096ff;            /* 信息色的深色悬浮态 */
    --color-info-bg: #e6f4ff;               /* 信息色的浅色背景 */
    --color-info-bg-hover: #bae0ff;         /* 信息色的浅色背景悬浮态 */
    --color-info-border: #91caff;           /* 信息色的边框色 */
    --color-info-border-hover: #69b1ff;     /* 信息色的边框色悬浮态 */
    --color-info-active: #0958d9;           /* 信息色的深色激活态 */
    --color-info-text: #1677ff;             /* 信息色的文字色 */
    --color-info-text-hover: #4096ff;       /* 信息色的文字色悬浮态 */
    --color-info-text-active: #0958d9;      /* 信息色的文字色激活态 */

    --color-success: #52c41a;               /* 成功色 */
    --color-success-hover: #95de64;         /* 成功色的深色悬浮态 */
    --color-success-bg: #f6ffed;            /* 成功色的浅色背景 */
    --color-success-bg-hover: #d9f7be;      /* 成功色的浅色背景悬浮态 */
    --color-success-border: #b7eb8f;        /* 成功色的边框色 */
    --color-success-border-hover: #95de64;  /* 成功色的边框色悬浮态 */
    --color-success-active: #389e0d;        /* 成功色的深色激活态 */
    --color-success-text: #52c41a;          /* 成功色的文字色 */
    --color-success-text-hover: #73d13d;    /* 成功色的文字色悬浮态 */
    --color-success-text-active: #389e0d;   /* 成功色的文字色激活态 */

    --color-warning: #faad14;               /* 警戒色 */
    --color-warning-hover: #ffd666;         /* 警戒色的深色悬浮态 */
    --color-warning-bg: #fffbe6;            /* 警戒色的浅色背景 */
    --color-warning-bg-hover: #fff1b8;      /* 警戒色的浅色背景悬浮态 */
    --color-warning-border: #ffe58f;        /* 警戒色的边框色 */
    --color-warning-border-hover: #ffd666;  /* 警戒色的边框色悬浮态 */
    --color-warning-active: #d48806;        /* 警戒色的深色激活态 */
    --color-warning-text: #faad14;          /* 警戒色的文字色 */
    --color-warning-text-hover: #ffc53d;    /* 警戒色的文字色悬浮态 */
    --color-warning-text-active: #d48806;   /* 警戒色的文字色激活态 */

    --color-danger: #ff4d4f;
    --color-danger-bg: #fff2f0;
    --color-danger-border: #ffccc7;

    --color-scrollbar: var(--color_19);
    --color-divider: rgba(184, 196, 205, 0.5);
    --color-new: var(--color_22);

    --color-input__placeholder: var(--color_2);
    --color-input__shodow-focus: var(--color_15);
    --color-input__border-hover: var(--color_17);
    --color-input__border-focus: var(--color_17);
    --color-input__shodow-focus--error: var(--color_18);
    --color-input__background-disabled: var(--color_10);
    --color-input__border-disabled: var(--color_19);
    --color-input__text-disabled: var(--color_11);
}

/* 重置边距和填充 */
html, body, div, h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl, dt, dd, img, form, fieldset, legend, input, textarea, button, select, option {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none
}

html {
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    font-variant: tabular-nums;
    color: var(--color-text);
    -moz-tab-size: 4; /* 3 */
    tab-size: 4; /* 3 */
    /*line-height: 1.5714285714285714;*/
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
  margin: 0;
}

/* 设置box-sizing */
div {
    box-sizing: border-box;
}

/* 设置链接样式 */
a {
    text-decoration: none;
    color: var(--color-text);
}
a:hover {
    color: var(--color-primary);
}

/* 设置图片样式 */
img {
    border: none;
    vertical-align: middle;
}

/* 设置表单元素 */
input, textarea, select, button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button {
    outline: none;
}
*::-webkit-scrollbar {
    width: 6px;
}
*::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: var(--color-scrollbar);
}
*::-webkit-scrollbar:horizontal {
    height: 6px; /* 水平滚动条的高度 */
}

*::-webkit-scrollbar-thumb:horizontal {
    border-radius: 3px;
    background-color: var(--color-scrollbar); /* 水平滚动条滑块的背景颜色 */
}

a.r-icon::after {
    content: "›";
    display: inline-block;
    font-size: 17px;
    margin-left: 3px;
    position: relative;
    top: 1px;
    transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
a.r-icon2::after {
    content: "→";
    display: inline-block;
    font-size: 13px;
    margin-left: 5px;
    position: relative;
    bottom: 1px;
    transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
a.r-icon:hover::after, a.r-icon2:hover::after {
    transform: translateX(4px);
}

#uc-page-wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.uc-header {
    flex-grow: 0;
    flex-shrink: 0;
    background-color: var(--color-bg-uc);
    height: 56px;
    display: flex;
    align-items: center;
    /*box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);*/
}
.uc-main {
    flex: 1;
    display: flex;
    background: var(--color-bg-uc-container);
    overflow: hidden;
}

.uc-content {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

.uc-content::-webkit-scrollbar {
    width: 6px;
}
.uc-content::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: var(--color-scrollbar);
}
.uc-content-inner {
    min-height: 100%;
    padding: 16px;
}
.uc-container {
    flex: 1;
    display: flex;
    gap: 16px;
}
.uc-container.column {
    flex-direction: column;
}
.uc-container.row {
    flex-direction: row;
}

.uc-card {
    background: #fff;
    border-radius: 5px;
    padding: 20px 24px;
}

.uc-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background: #fff;
    border-radius: 4px;
    position: relative;
}
.uc-block-s {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 24px;
    background: #fff;
    border-radius: 4px;
    position: relative;
}
.uc-block__title {
    font-size: 20px;
    font-weight: 500;
}
.uc-block__title-subtitle {
    color: var(--color_2);
    font-size: 14px;
    font-weight: 400;
}
.uc-page-title {
    font-size: 24px;
    font-weight: bold;
    /*margin-bottom: 12px;*/
}
.uc-page-rt-area {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 1;
}
.uc-page-rt-area-s {
    position: absolute;
    top: 16px;
    right: 24px;
    z-index: 1;
}
.uc-block__rt-area {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
}
.uc-components-wrapper {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}
.uc-page-title .go-back {
    display: flex;
    align-items: center;
    margin-right: 8px;
    min-height: 32px;
}


.color-success {
    /*color: var(--color-success);*/
    color: var(--color_6);
}
.color-danger {
    color: var(--color-danger);
}
.color-error {
    color: var(--color-error);
}
.color-warning {
    color: var(--color-warning);
}
.color-info {
    color: var(--color-info);
}
.color-tps {
    color: var(--color-tps);
}
.color-dps {
    color: var(--color-dps);
}
.color-kps {
    color: var(--color-kps);
}
.color-fps {
    color: var(--color-fps);
}
.color-text-desc {
    color: var(--color-text-desc);
}
.color-gray {
    color: var(--color_9);
}
.color-primary {
    color: var(--color-primary);
}
.color-new {
    color: var(--color-new);
}


/* color */
.color_1 {
    color: var(--color_1);
}
.color_2 {
    color: var(--color_2);
}
.color_3 {
    color: var(--color_3);
}
.color_4 {
    color: var(--color_4);
}
.color_5 {
    color: var(--color_5);
}
.color_6 {
    color: var(--color_6);
}
.color_7 {
    color: var(--color_7);
}
.color_8 {
    color: var(--color_8);
}
.color_9 {
    color: var(--color_9);
}
.color_10 {
    color: var(--color_10);
}
.color_11 {
    color: var(--color_11);
}
.color_12 {
    color: var(--color_12);
}
.price {
    color: var(--color_7);
}
.text-bold {
    font-weight: bold;
}

code {
    padding: 2px 4px;
    background-color: #f7f7f9;
    border: 1px solid #e1e1e8;
    border-radius: 3px;
}
code.kps {
    background-color: #fff;
    border-color: var(--color-kps);
    color: var(--color-kps);
}
code.tps {
    background-color: #fff;
    border-color: var(--color-tps);
    color: var(--color-tps);
}
code.dps {
    background-color: #fff;
    border-color: var(--color-dps);
    color: var(--color-dps);
}
code.fps {
    background-color: #fff;
    border-color: var(--color-fps);
    color: var(--color-fps);
}
code.sfps {
   background-color: #fff;
    border-color: var(--color-sfps);
    color: var(--color-sfps);
}
/* control */
.control-groups {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 32px;
}
.control-group {
    display: flex;
    align-items: center;
    gap: 16px;
}
.date-filter {
    margin-left: auto
}
.control__date {
    display: flex;
    align-items: center;
    gap: 8px;
}
.control__date > .query {
    margin-left: 12px;
    padding: 5px 14px;
}
input.start_date,
input.end_date {
    display: flex;
    align-items: center;
    height: 32px;
    box-sizing: border-box;
    padding: 0 10px;
    width: 120px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
}

/* field */
.field-groups {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
:where(.field-group) {
    display: flex;
    align-items: flex-end;
    gap: 24px;
}
.field__label {
    flex-shrink: 0;
    min-width: 80px;
    color: var(--color_21);
}

/* date-operation */
.date-operations-wrapper {
    display: flex;
    align-items: center;
    gap: 24px;
}
.date-operation.active {
    color: #fff;
    background-color: var(--color);
}
.date-operation.active:hover {
    color: #fff;
    background-color: var(--color);
    opacity: 0.8;
}

/* space */
.text-center {
    text-align: center;
}
.uc-space {
    display: inline-flex;
    gap: 8px;
}
.inline-special-text {
    margin: 0 2px;
}
.font-italic {
    font-style: italic;
}


/* flex */
.flex {
    display: flex;
}
.flex-center {
    display: flex;
    align-items: center;
}
.flex-content-center {
    justify-content: center;
}
.flex-row {
    display: flex;
    flex-direction: row;
}
.flex-start {
    align-items: flex-start;
}
.flex-end {
    align-items: flex-end;
}
.flex-column {
    display: flex;
    flex-direction: column;
}
.flex-stretch {
    align-items: stretch;
}
.flex-space-between {
    justify-content: space-between;
}
.flex-1 {
    flex: 1 1 0;
}
.no-gap {
    gap: 0;
}
.gap-xs {
    gap: 4px;
}
.gap-s {
    gap: 8px;
}
.gap-m {
    gap: 16px;
}
.gap-l {
    gap: 24px;
}

.overflow-hidden {
    overflow: hidden;
}
.display-none {
    display: none;
}


/* result */
.uc-result-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 48px;
}
.uc-result-icon {
    margin-bottom: 24px;
    text-align: center;
}
.uc-result-icon > .iconfont {
    font-size: 64px;
    color: var(--color-success);
}
.uc-result-title {
    font-size: 24px;
    line-height: 1.8;
    text-align: center;
}
.uc-result-subtitle {
    color: var(--color_9);
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}
.uc-result-extra {
    display: flex;
    align-items: center;
    margin-top: 24px;
    gap: 16px;
}
.uc-result-content {
    margin-top: 36px;
    padding: 24px 40px;
    background: #fafafa;
}

/* is-under-reconstruction */
.is-under-reconstruction {
    position: relative;
}
.under-reconstruction-inner {
    z-index: 999;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
}
.under-reconstruction-desc {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: var(--color-danger);
}

/* descriptions */
.uc-descriptions {
    margin-bottom: 32px;
}
.uc-descriptions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.uc-descriptions-title {
    flex: 1 1 auto;
    overflow: hidden;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5715;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.uc-descriptions-view {
    width: 100%;
}
.uc-descriptions-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.uc-descriptions-item {
    display: flex;
    align-items: center;
}
.uc-descriptions-item-label,
.uc-descriptions-item-content {
    display: inline-flex;
    align-items: center;
}
.uc-descriptions-item-label:after {
    content: ":";
    margin: 0 8px 0 2px;
}
.uc-descriptions + .divider {
    width: 100%;
    margin: 24px 0 32px;
    border-top: 1px solid var(--color_10);
}

.uc-float-bar-inner .icon-appstore{
    padding-right: 30px;
}

/* empty */
.uc-empty {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.uc-empty-icon {
    font-size: 24px;
    color: #ccc;
}
.uc-empty-img {
    width: 414px;
}
.uc-empty-desc {
    font-size: 14px;
    color: var(--color_9);
}
.uc-empty-btn {
    margin-top: 16px;
}

/* copy */
.click-copy {
    cursor: pointer;
}
.copy-node {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 14px;
    width: max-content;
    height: max-content;
    cursor: pointer;
    transition: all 0.1s;
    white-space: nowrap;
    background-color: transparent;
}
.copy-node:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

/* markdown */
.reply-content h1, h2, h3, h4, h5 {
    margin-bottom: 0.5em;
}
.reply-content p {
    margin-bottom: 8px;
}
.reply-content ul li {
    list-style-type: disc;
    list-style-position: inside;
}
blockquote {
    margin-left: 0;
    padding-left: 10px;
    border-left: 3px solid #ccc;
    color: #999;
}
#marked-content h1, h2, h3, h4, h5 {
    margin-bottom: 0.5em;
}
#marked-content p {
    margin-bottom: 8px;
}
#marked-content ul li {
    list-style-type: disc;
    list-style-position: inside;
}

.ml-2 { margin-left: 2px; }

.iconfont.icon-question {
    color: var(--color_21);
    top: 1px;
}

.unit {
    color: var(--color_9);
}
.alert__have-wait-pay .alert_title {
    margin-bottom: 8px;
    color: var(--color-primary);
}

.icon-down{
    font-size: 15px !important;
}
.icon-xiajiantou{
    font-size: 12px !important;
}
.search-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.btn-center {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* media */
@media(min-width: 768px) {
    .media-m {
        display: none !important;
    }

}
@media(max-width: 768px){
    .media-pc {
        display: none !important;
    }

    .uc-block {
        padding : 24px 16px;
    }
    .uc-block-s {
        padding : 16px;
    }
    .uc-block__inner {
        max-width: 100%;
        overflow-y: auto;
    }
    .uc-content-inner {
        padding: 12px;
    }

    /* field */
    :where(.field-group) {
        align-items: flex-start;
    }

    .control-groups {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .date-filter {
        margin-left: 0;
        flex-direction: column;
        align-items: flex-start;
    }
    .date-operations-wrapper {
        flex-wrap: wrap;
        gap: 16px;
    }

    .uc-descriptions-items {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

}