* {
    box-sizing: border-box;
}

body {

    margin: 0;
    background: #0f1419;
    color: white;
    font-family: -apple-system, BlinkMacSystemFont;
    height: 100vh;
    overflow: hidden;

}

body.detail-loading-active,
body.detail-loading-active #botDetail {

    overflow: hidden;

}

/* 页面区域 */

main {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 90px;
    overflow: hidden;
}

/* 横向页面 */

.pages {

    display: flex;
    height: 100%;
    transition: transform .3s cubic-bezier(.25,.1,.25,1);
    will-change: transform;
    -webkit-overflow-scrolling: touch;

}

.page {

    flex: 0 0 100%;

    height: 100%;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    padding: 20px;
    
    transform: translateZ(0);
    backface-visibility: hidden;

}

/* 首页 */

.hero {

    margin-top: 15px;

}

.hero-glass {

    display: flex;
    align-items: center;
    gap: 18px;

    padding: 20px;
    border-radius: 22px;

    background: rgba(24, 34, 48, .65);
    border: 1px solid rgba(255, 255, 255, .1);

    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

}

.hero-avatar {

    width: 92px;
    height: 92px;

    border-radius: 50%;
    overflow: hidden;

    flex-shrink: 0;

    box-shadow: 0 14px 28px rgba(0, 0, 0, .4);
    border: 1px solid rgba(255, 255, 255, .15);

    background: rgba(255, 255, 255, .05);

}

.hero-avatar img {

    width: 100%;
    height: 100%;
    object-fit: cover;

}

.hero-content {

    display: flex;
    flex-direction: column;
    gap: 8px;

    min-width: 0;

}

.hero-title {

    margin: 0;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .02em;

}

.hero-desc {

    margin: 0;
    font-size: 12px;
    color: rgba(213, 225, 243, .75);
    line-height: 1.6;

}

.hero-tags {

    display: flex;
    flex-wrap: wrap;
    gap: 6px;

}

.hero-tag {

    font-size: 11px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 999px;

    background: rgba(58, 143, 245, .15);
    border: 1px solid rgba(58, 143, 245, .3);
    color: rgba(140, 200, 255, .95);

}

.home-card {

    margin-top: 16px;

    background: linear-gradient(160deg, rgba(26, 36, 50, .95), rgba(18, 26, 38, .92));
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;

    padding: 18px;

    box-shadow: 0 14px 32px rgba(0, 0, 0, .25);

    backdrop-filter: blur(10px);

}

.home-qa {

    display: flex;
    flex-direction: column;
    /* height: 500px; */
    height: calc(100vh - 70px - 165px - 60px - 70px);
}

.qa-list {

    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

}

.qa-list::-webkit-scrollbar {

    display: none;

}

.home-title {

    margin: 0;
    font-size: 17px;
    font-weight: 700;

}

.home-card-title {

    font-size: 15px;
    font-weight: 700;
    margin: 0;
    letter-spacing: .01em;

    display: flex;
    align-items: center;
    gap: 8px;

}

.home-card-desc {

    margin: 0;
    font-size: 12px;
    color: rgba(213, 225, 243, .7);
    line-height: 1.6;

}

.home-qa {

    display: flex;
    flex-direction: column;
    gap: 14px;

}

.qa-list {

    display: flex;
    flex-direction: column;
    gap: 10px;

}

.qa-item {

    padding: 16px;
    border-radius: 16px;
    background: rgba(13, 20, 30, .75);
    border: 1px solid rgba(255, 255, 255, .05);

    display: flex;
    flex-direction: column;
    gap: 10px;

    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;

}

.qa-item:hover {

    border-color: rgba(58, 143, 245, .35);
    box-shadow: 0 8px 24px rgba(58, 143, 245, .08);

}

.qa-q {

    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.5;

    display: inline-block;

    padding: 12px 16px;
    border-radius: 18px;

    background: linear-gradient(135deg, #3a8ff5 0%, #5562ff 100%);
    box-shadow: 0 4px 16px rgba(58, 143, 245, .35);

    max-width: 92%;

}

.qa-a {

    font-size: 13px;
    color: rgba(255, 255, 255, .92);
    line-height: 1.6;

    display: inline-block;

    padding: 12px 16px;
    border-radius: 18px;

    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);

    max-width: 92%;

    margin-left: auto;

}

.home-grid {

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;

}

@media (max-width: 420px) {

    .hero-glass {

        flex-direction: row;
        align-items: center;

    }

    .hero-avatar {

        width: 76px;
        height: 76px;

    }

    .home-grid {

        grid-template-columns: 1fr;

    }

}

.search {

    width: 100%;

    margin: 0;

    padding: 12px;

    border: none;

    border-radius: 12px;

    background: #1b2733;

    color: white;

}

.search-wrap {

    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 12px;
    margin-bottom: 12px;

    padding: 0 12px;

    height: 52px;

    border-radius: 12px;

    background: #1b2733;

    border: 1px solid transparent;

    transition: .2s;

}

.search-wrap:focus-within {

    border-color: rgba(255, 255, 255, .7);

}

.search-icon {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 20px;

    font-size: 20px;

    line-height: 1;

    opacity: .8;

    pointer-events: none;

    transform: translateY(-3px);

}

.search-wrap .search {

    flex: 1;

    height: 100%;

    background: transparent;

    border: none;

    padding-left: 0;

    padding-right: 0;

    font-size: 16px;

    line-height: 1;

}

.search-wrap .search:focus {

    outline: none;

}

/* bots */

.bot-list {

    background: #1a2734;

    border-radius: 14px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .04);

}

.no-results {

    display: none;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    min-height: 280px;

    padding: 24px;

    margin-top: 10px;

    background: #1a2734;

    border: 1px solid rgba(255, 255, 255, .04);

    border-radius: 14px;

}

.no-results-icon {

    font-size: 56px;

    line-height: 1;

    opacity: .45;

    margin-bottom: 14px;

}

.no-results-title {

    font-size: 32px;

    font-weight: 700;

    margin-bottom: 8px;

}

.no-results-text {

    font-size: 15px;

    opacity: .7;

}

.bot-create {

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 16px;

    color: #35a0ff;

    font-weight: 500;

    border-bottom: 1px solid rgba(255, 255, 255, .06);

    transition: none;

    -webkit-tap-highlight-color: transparent;

    cursor: pointer;

}

.plus {

    font-size: 22px;
    line-height: 1;

}

.bot-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: transparent;

    padding: 14px 16px;

    border-bottom: 1px solid rgba(255, 255, 255, .06);

    transition: none;

    -webkit-tap-highlight-color: transparent;

    cursor: pointer;

}

.bot-create:hover,
.bot-item:hover,
.bot-create:active,
.bot-item:active {

    background: transparent;

}

.bot-item:last-child {

    border-bottom: none;

}

.bot-left {

    display: flex;
    align-items: center;

}

.bot-item img {

    width: 40px;
    height: 40px;

    border-radius: 50%;

    margin-right: 10px;

}

.bot-user {

    opacity: .6;
    font-size: 13px;

}

.bot-name {

    font-size: 15px;

    font-weight: 700;

}

.bot-arrow {

    font-size: 30px;

    color: rgba(173, 197, 221, .6);

    line-height: 1;

}

/* create modal */

.create-modal {

    position: fixed;
    inset: 0;

    z-index: 180;

    display: none;
    align-items: flex-end;

}

.create-modal.show {

    display: flex;

}

.create-modal-backdrop {

    position: absolute;
    inset: 0;

    background: rgba(4, 10, 18, .58);

}

.create-sheet {

    position: relative;

    width: 100%;

    margin: 0 0 10px;

    border-radius: 18px;

    background: linear-gradient(180deg, rgba(27, 37, 54, .98), rgba(20, 31, 47, .98));

    border: 1px solid rgba(255, 255, 255, .08);

    box-shadow: 0 20px 50px rgba(0, 0, 0, .42);

    overflow: hidden;

    animation: createSheetIn .22s ease;

}

.create-sheet-header {

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px 22px;

    border-bottom: 1px solid rgba(255, 255, 255, .07);

}

.create-sheet-header h2 {

    margin: 0;
    font-size: 18px;
    font-weight: 600;

}

.create-close {

    border: none;
    background: transparent;
    color: rgba(233, 242, 255, .78);

    font-size: 20px;
    cursor: pointer;

}

.create-form {

    padding: 18px 22px 22px;

}

.create-label {

    display: block;

    font-size: 15px;
    font-weight: 700;

    margin-bottom: 12px;

}

.create-input {

    width: 100%;

    height: 45px;

    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .11);

    background: rgba(14, 22, 35, .5);
    color: #fff;

    padding: 0 16px;

    font-size: 15px;

    margin-bottom: 16px;

}

.create-input:focus,
.create-input:focus-visible {

    outline: none;
    box-shadow: none;
    border-color: rgba(255, 255, 255, .7);

}

.create-input::placeholder {

    color: rgba(200, 216, 235, .45);

}

.create-tip {

    margin: 0 0 20px;

    font-size: 13px;

    color: rgba(213, 225, 243, .72);

}

.create-submit {

    width: 100%;
    height: 50px;

    border: none;
    border-radius: 16px;

    color: #fff;
    font-size: 15px;
    font-weight: 700;

    background: linear-gradient(90deg, #2fb8ff 0%, #5562ff 100%);

    box-shadow: 0 12px 28px rgba(41, 135, 255, .35);

    cursor: pointer;

}

.create-submit,
.create-submit:hover,
.create-submit:active,
.create-submit:focus,
.create-submit:focus-visible {

    -webkit-tap-highlight-color: transparent;
    outline: none;

}

.recharge-pay-btn,
.recharge-pay-btn:hover,
.recharge-pay-btn:active,
.recharge-pay-btn:focus,
.recharge-pay-btn:focus-visible {

    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    touch-action: manipulation;
    transform: none;
    filter: none;
    opacity: 1;
    outline: none;
    box-shadow: 0 12px 28px rgba(41, 135, 255, .35);

}

.recharge-pay-btn:disabled {

    cursor: not-allowed;
    opacity: .9;
    pointer-events: none;

}

@keyframes createSheetIn {

    from {
        transform: translateY(20px);
        opacity: .8;
    }

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

}

/* settings */

.settings-title {

    text-align: center;

    font-size: 18px;

    margin: 38px 0 10px;
}

.settings-page {

    display: flex;
    flex-direction: column;

    gap: 14px;

}

.settings-group-title {

    font-size: 16px;

    margin: 0;

}

.settings-panel {

    background: #1a2734;

    border: 1px solid rgba(255, 255, 255, .06);

    border-radius: 16px;

    overflow: hidden;

}

.settings-row {

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 12px 18px;

    min-height: 50px;

    border-bottom: 1px solid rgba(255, 255, 255, .11);

}

.clickable {

    cursor: pointer;

    user-select: none;

    -webkit-tap-highlight-color: transparent;

}

.clickable:active {

    opacity: .85;

}

.language-option:active,
.no-active:active {

    opacity: 1;

}

.settings-row:last-child {

    border-bottom: none;

}

.settings-label {

    opacity: .7;

    font-size: 14px;

    /* font-weight:600; */

}

.settings-value {

    font-size: 14px;

}

.settings-value-wrap {

    display: inline-flex;
    align-items: center;
    gap: 8px;

}

.level-clickable {

    color: #4da6ff;

    text-decoration: underline;

    text-underline-offset: 3px;

}

.recharge-modal {

    position: fixed;
    inset: 0;

    z-index: 181;

    display: none;
    align-items: flex-end;

}

.recharge-modal.show {

    display: flex;

}

.recharge-pay-btn {

    font-size: 16px;

}

body.light .level-clickable {

    color: #297fe0;

}

body.light .recharge-modal .create-sheet {

    background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(247, 251, 255, .97));

    border-color: rgba(18, 33, 47, .14);

    box-shadow: 0 18px 42px rgba(18, 33, 47, .14);

}

body.light .recharge-modal .create-sheet-header,
body.light .recharge-modal .create-label,
body.light .recharge-modal .create-tip {

    color: #12212f;

}

body.light .recharge-modal .create-sheet-header {

    border-bottom-color: rgba(18, 33, 47, .12);

}

body.light .recharge-modal .create-close {

    color: rgba(18, 33, 47, .62);

}

body.light .recharge-modal .create-input {

    background: #ffffff;
    color: #12212f;
    border-color: rgba(18, 33, 47, .16);

}

body.light .recharge-modal .create-input::placeholder,
body.light .recharge-modal .create-tip {

    color: rgba(18, 33, 47, .55);

}

/* obsolete class kept no longer used */
.vip-action {

    display: none;

    font-weight: 600;

}

.settings-option {

    display: flex;
    align-items: center;

    background: #1a2734;

    border: 1px solid rgba(255, 255, 255, .06);

    border-radius: 16px;

    padding: 12px 18px;

    min-height: 50px;

}

.settings-check {

    font-size: 14px;

    font-weight: 700;

    color: #4da6ff;

    opacity: 0;

    transform: scale(.9);

    transition: .18s;

}

.language-option.selected .settings-check {

    opacity: 1;

    transform: scale(1);

}

.lang-code {

    display: inline-block;

    width: 30px;

    font-size: 16px;

    font-weight: 600;

    margin-right: 8px;

}

.lang-name {

    font-size: 14px;

    font-weight: 600;

}

.theme-switch {

    position: relative;

    width: 50px;
    height: 26px;

    border-radius: 999px;

    background: #2b3a50;

    transition: .2s;

}

.theme-switch::after {

    content: "";

    position: absolute;

    top: 1px;
    left: 1px;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background: #ffffff;

    transition: .2s;

}

.theme-switch.on {

    background: #3a8ff5;

}

.theme-switch.on::after {

    transform: translateX(24px);

}

/* light theme */

body.light {

    background: #ecf2f8;

    color: #12212f;

}

body.light .search-wrap,
body.light .bot-list,
body.light .no-results,
body.light .settings-panel,
body.light .settings-option,
body.light .token-card,
body.light .settings-card,
body.light .settings {

    background: #ffffff;

    border-color: rgba(18, 33, 47, .12);

}

body.light .search-wrap:focus-within {

    border-color: rgba(18, 33, 47, .35);

}

body.light .bottom-nav {

    background: rgba(255, 255, 255, .82);

    border-color: rgba(18, 33, 47, .14);

    box-shadow: 0 4px 14px rgba(18, 33, 47, .06);

}

body.light .nav.active {

    background: rgba(18, 33, 47, .1);

}

body.light .bot-create:hover,
body.light .bot-item:hover,
body.light .bot-create:active,
body.light .bot-item:active {

    background: transparent;

}

body.light .search,
body.light .token-card input {

    color: #12212f;

}

body.light .bot-stats-head {

    color: rgba(18, 33, 47, .72);

}

body.light .bot-stat-row {

    background: linear-gradient(180deg, #f8fbff, #f1f6fc);

    border: 1px solid rgba(18, 33, 47, .08);

}

body.light .bot-stat-label {

    color: rgba(18, 33, 47, .65);

}

body.light .bot-stat-value {

    color: #12212f;

}

body.light .create-modal-backdrop {

    background: rgba(20, 32, 46, .28);

}

body.light .create-sheet {

    background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(247, 251, 255, .97));

    border-color: rgba(18, 33, 47, .14);

    box-shadow: 0 18px 42px rgba(18, 33, 47, .14);

}

body.light .create-sheet-header,
body.light .create-label {

    color: #12212f;

}

body.light .create-sheet-header {

    border-bottom-color: rgba(18, 33, 47, .12);

}

body.light .create-close {

    color: rgba(18, 33, 47, .62);

}

body.light .create-input {

    background: #ffffff;
    color: #12212f;
    border-color: rgba(18, 33, 47, .16);

}

body.light .create-input:focus,
body.light .create-input:focus-visible {

    border-color: rgba(18, 33, 47, .35);

}

body.light .create-input::placeholder,
body.light .create-tip {

    color: rgba(18, 33, 47, .55);

}

body.light .home-card {

    background: linear-gradient(160deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
    border-color: rgba(18, 33, 47, .10);
    box-shadow: 0 14px 32px rgba(18, 33, 47, .08);

}

body.light .hero-glass {

    background: rgba(255, 255, 255, .75);
    border-color: rgba(18, 33, 47, .12);
    box-shadow: 0 20px 50px rgba(18, 33, 47, .12);

}

body.light .hero-avatar {

    border-color: rgba(18, 33, 47, .14);
    box-shadow: 0 14px 28px rgba(18, 33, 47, .14);

}

body.light .hero-desc {

    color: rgba(18, 33, 47, .62);

}

body.light .hero-tag {

    background: rgba(58, 143, 245, .1);
    border-color: rgba(58, 143, 245, .25);
    color: rgba(18, 33, 47, .75);

}

body.light .home-subtitle,
body.light .home-card-desc {

    color: rgba(18, 33, 47, .65);

}

body.light .qa-item {

    background: rgba(255, 255, 255, .85);
    border-color: rgba(18, 33, 47, .06);
    box-shadow: 0 2px 8px rgba(18, 33, 47, .04);

}

body.light .qa-item:hover {

    border-color: rgba(58, 143, 245, .35);
    box-shadow: 0 8px 24px rgba(58, 143, 245, .12);

}

body.light .qa-q {

    color: #ffffff;
    background: linear-gradient(135deg, #3a8ff5 0%, #5562ff 100%);
    box-shadow: 0 4px 16px rgba(58, 143, 245, .35);

}

body.light .qa-a {

    color: #12212f;
    background: rgba(18, 33, 47, .06);
    border-color: rgba(18, 33, 47, .12);

}

body.light .settings-row {

    border-bottom: 1px solid rgba(18, 33, 47, .11);

}

body.light .bot-create,
body.light .bot-item {

    border-bottom-color: rgba(18, 33, 47, .11);

}

body.light .bot-item:last-child {

    border-bottom: none;

}

body.light .search::placeholder,
body.light .bot-user,
body.light .settings-label,
body.light .token-tip,
body.light .no-results-text,
body.light .bot-arrow,
body.light .search-icon {

    color: rgba(18, 33, 47, .55);

    opacity: 1;

}

body.light #botDetail {

    background: linear-gradient(180deg, #f6f9fd 0%, #edf3f9 100%);

    color: #12212f;

}

body.light .detail-header img {

    box-shadow: 0 6px 16px rgba(18, 33, 47, .14);

}

body.light #detailName {

    color: #12212f;

}

body.light #detailUser {

    color: rgba(18, 33, 47, .62);

}

body.light .settings-card {

    border: 1px solid rgba(18, 33, 47, .10);

    box-shadow: 0 8px 20px rgba(18, 33, 47, .06);

}

body.light .setting-item {

    color: #12212f;

    border-bottom-color: rgba(18, 33, 47, .10);

}

/* bot detail */

#botDetail {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: #0f1419;

    transform: translateX(100%);

    transition: .3s;

    padding: 20px;

    z-index: 10;

}

#botDetail.show {

    transform: translateX(0);

}

.detail-loading {

    display: none;
    align-items: center;
    justify-content: center;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    height: 100vh;
    min-height: 100dvh;

    background: radial-gradient(circle at center, rgba(15, 24, 36, .65) 0%, rgba(5, 10, 16, .78) 70%);
    backdrop-filter: blur(4px);

    z-index: 600;

    pointer-events: none;

    transform: translateZ(0);

}

.detail-loading.show {

    display: flex;

    pointer-events: all;

}

.detail-loading-card {

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;

    width: 200px;
    height: 130px;
    /* padding: 18px; */
    border-radius: 14px;

    background: linear-gradient(160deg, rgba(24, 36, 52, .98) 0%, rgba(12, 20, 29, .95) 100%);
    border: 1px solid rgba(120, 170, 255, .22);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px 0 rgba(255, 255, 255, .06);

    color: rgba(213, 225, 243, .9);
    font-size: 12px;
    font-weight: 600;

}

.detail-loading-spinner {

    width: 32px;
    height: 32px;

    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .2);
    border-top-color: #55b8ff;

    animation: detailSpin 1s linear infinite;

}

@keyframes detailSpin {

    to {
        transform: rotate(360deg);
    }

}

.token-card {

    margin-top: 20px;

    background: #18222d;

    padding: 15px;

    border-radius: 14px;

}

.token-card input {

    width: 100%;

    padding: 10px;

    background: #111a22;

    border: none;

    color: white;

    margin-bottom: 10px;

    border-radius: 10px;

}

/* 底部导航 */

.bottom-nav {
    position: fixed;

    left: 16px;
    right: 16px;
    bottom: 20px;

    height: 58px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 10px;

    background: rgba(24, 34, 45, 0.75);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border-radius: 30px;

    border: 1px solid rgba(255, 255, 255, 0.05);

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);

    z-index: 100;

    padding: 0 8px;

    overflow: hidden;
}

.nav {

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    gap: 6px;

    flex: 1;

    height: 44px;

    border-radius: 999px;

    font-size: 12px;

    opacity: .6;

    transition: .2s;

    position: relative;

}

.nav-icon {

    font-size: 16px;
    line-height: 1;

}

.nav.active {

    opacity: 1;

    transform: scale(1.02);

    background: rgba(255, 255, 255, 0.08);

    /* box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08), 0 6px 14px rgba(0,0,0,.2); */

}

/* Bot Detail */

#botDetail {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: #0f1419;

    transform: translateX(100%);

    transition: .35s;

    padding: 20px;

    overflow-y: auto;

    z-index: 200;

}

.detail-floatbar {

    position: sticky;
    top: 28px;

    width: fit-content;
    max-width: calc(100% - 40px);

    margin: 8px auto 0;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 6px 12px;

    border-radius: 999px;
    background: rgba(20, 30, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transition: opacity .2s ease, transform .2s ease;

    pointer-events: none;
    z-index: 220;

}

.detail-floatbar.show {

    opacity: 1;
    transform: translateY(0) scale(1);

    pointer-events: auto;

}

.detail-floatbar img {

    width: 26px;
    height: 26px;

    border-radius: 50%;
    object-fit: cover;

}

.detail-floatbar span {

    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, .95);

    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

body.light .detail-floatbar {

    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(18, 33, 47, 0.14);
    box-shadow: 0 12px 28px rgba(18, 33, 47, 0.15);

}

body.light .detail-floatbar span {

    color: #12212f;

}

#botDetail.show {

    transform: translateX(0);

}

/* 顶部 */

.detail-top {

    display: flex;
    align-items: center;

    margin-bottom: 20px;

}

.detail-top button {

    background: none;
    border: none;
    color: white;
    font-size: 25px;

    margin-right: 10px;

}

/* header */

.detail-header {

    text-align: center;

    margin-top: 22px;

}

.detail-header img {

    width: 80px;
    height: 80px;

    border-radius: 50%;

    margin-bottom: 10px;

}

/* token */

.token-card {

    position: relative;

    overflow: hidden;

    background: linear-gradient(160deg, #1d2b38 0%, #17232f 100%);

    border: 1px solid rgba(255, 255, 255, .06);

    box-shadow: 0 12px 24px rgba(0, 0, 0, .09);

    padding: 18px;

    border-radius: 18px;

    margin-top: 20px;

}

.token-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .35), rgba(255, 255, 255, 0));

}

.bot-stats-head {

    font-size: 12px;

    letter-spacing: .08em;

    text-transform: uppercase;

    color: rgba(255, 255, 255, .64);

    margin-bottom: 10px;

}

.bot-stats {

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.bot-stat-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 14px;

    border-radius: 12px;

    background: linear-gradient(180deg, rgba(12, 20, 28, .85), rgba(11, 18, 26, .65));

    border: 1px solid rgba(255, 255, 255, .05);

    transition: transform .18s ease, border-color .18s ease;

}

.bot-stat-label {

    font-size: 13px;

    color: rgba(255, 255, 255, .72);

}

.bot-stat-value {

    font-size: 16px;

    font-weight: 700;

    color: #fff;

}

.bot-stat-row:nth-child(1) .bot-stat-value {

    color: #7ecbff;

}

.bot-stat-row:nth-child(2) .bot-stat-value {

    color: #7cf1b2;

}

.bot-stat-row:nth-child(3) .bot-stat-value {

    color: #ffd27a;

}

.token-buttons {

    display: flex;

    gap: 10px;

}

.copy {

    flex: 1;

    background: #2f80ed;

    border: none;

    padding: 10px;

    border-radius: 10px;

    color: white;

}

.revoke {

    flex: 1;

    background: #e05d4f;

    border: none;

    padding: 10px;

    border-radius: 10px;

    color: white;

}

.token-tip {

    font-size: 13px;

    opacity: .6;

    margin-top: 10px;

}

/* settings */

.settings-card {

    margin-top: 20px;

    background: #18222d;

    border-radius: 16px;

    overflow: hidden;

}

.setting-item {

    padding: 16px;

    border-bottom: 1px solid rgba(255, 255, 255, .05);

}

.setting-item:last-child {

    border: none;

}

.channel-settings-head {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 16px 16px 12px;

    font-size: 12px;

    letter-spacing: .08em;

    text-transform: uppercase;

    color: rgba(255, 255, 255, .64);

}

.channel-help-link {

    border: none;
    background: none;

    padding: 0;

    font-size: 12px;
    font-weight: 600;

    color: #4da6ff;

    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;

}

/* .channel-help-link:hover,
.channel-help-link:active,
.channel-help-link:focus,
.channel-help-link:focus-visible {

    outline: none;
    text-decoration: underline;
    text-underline-offset: 3px;

} */

.channel-list {

    margin: 0 16px 12px;

    display: flex;
    flex-direction: column;
    gap: 10px;

}

.channel-empty {

    padding: 16px;
    border-radius: 14px;
    background: rgba(12, 20, 29, .5);
    border: 1px dashed rgba(255, 255, 255, .15);

}

.channel-empty-title {

    font-size: 14px;
    font-weight: 700;

    color: #ffffff;

}

.channel-empty-sub {

    margin-top: 6px;

    font-size: 12px;
    color: rgba(203, 220, 241, .68);

}

.channel-card {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    border-radius: 14px;

    padding: 12px;

    background: rgba(12, 20, 29, .55);
    border: 1px solid rgba(255, 255, 255, .08);

    transition: border-color .2s, box-shadow .2s, transform .2s;

    min-width: 0;

}

.channel-card.active {

    border-color: rgba(60, 143, 245, .9);
    box-shadow: 0 8px 24px rgba(39, 116, 243, .2);

}

.channel-card-left {

    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;

    flex: 1;

}

.channel-avatar {

    width: 46px;
    height: 46px;

    border-radius: 12px;
    overflow: hidden;

    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .1);

    display: flex;
    align-items: center;
    justify-content: center;

    color: rgba(255, 255, 255, .85);
    font-weight: 700;

    flex-shrink: 0;

}

.channel-avatar img {

    width: 100%;
    height: 100%;
    object-fit: cover;

}

.channel-meta {

    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;

    flex: 1;

}

.channel-meta-title {

    font-size: 14px;
    font-weight: 700;
    color: #ffffff;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

.channel-meta-row {

    display: flex;
    align-items: center;
    gap: 6px;

    font-size: 12px;
    color: rgba(203, 220, 241, .78);

}

.channel-meta-label {

    color: rgba(203, 220, 241, .55);

}

.channel-meta-value {

    color: rgba(245, 250, 255, .92);
    font-weight: 600;

    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

.channel-card-action {

    border: none;
    border-radius: 10px;

    padding: 8px 12px;

    font-size: 13px;
    font-weight: 700;

    color: #fff;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);

    flex-shrink: 0;

}

.channel-item {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    border-radius: 12px;

    padding: 12px;

    background: rgba(12, 20, 29, .5);
    border: 1px solid rgba(255, 255, 255, .08);

}

.channel-item-left {

    min-width: 0;

}

.channel-item-title {

    font-size: 14px;
    font-weight: 700;

    color: #ffffff;

}

.channel-item-sub {

    margin-top: 3px;

    font-size: 12px;
    color: rgba(203, 220, 241, .68);

}

.channel-item-action,
.channel-add-btn {

    border: none;
    border-radius: 10px;

    padding: 8px 12px;

    font-size: 13px;
    font-weight: 700;

    color: #fff;
    background: linear-gradient(90deg, #2fb8ff 0%, #5562ff 100%);

}

.channel-add-btn {

    width: 100%;

    padding: 10px 12px;

}

.channel-delete-btn {

    width: calc(100% - 32px);
    margin: 0 16px 12px;

    padding: 10px 12px;

    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;

    background: rgba(224, 93, 79, .1);
    color: #ffb3aa;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

}

.channel-delete-btn:hover,
.channel-delete-btn:active,
.channel-delete-btn:focus,
.channel-delete-btn:focus-visible {

    outline: none;
    -webkit-tap-highlight-color: transparent;

}

body.light .channel-delete-btn {

    background: rgba(224, 93, 79, .08);
    border-color: rgba(18, 33, 47, .12);
    color: #c7392d;

}

.help-modal {

    position: fixed;
    inset: 0;

    z-index: 260;

    display: none;
    align-items: flex-end;

}

.help-modal.show {

    display: flex;

}

.help-steps {

    margin: 0 0 18px;
    padding-left: 18px;

    display: flex;
    flex-direction: column;
    gap: 10px;

    font-size: 14px;
    color: rgba(213, 225, 243, .9);

}

.help-steps li {

    line-height: 1.5;

}

.help-actions {

    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;

}

.help-secondary {

    border: 1px solid rgba(255, 255, 255, .2);
    background: transparent;

    height: 50px;
    border-radius: 16px;

    color: rgba(233, 242, 255, .9);
    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

}

.help-secondary:hover,
.help-secondary:active,
.help-secondary:focus,
.help-secondary:focus-visible {

    outline: none;
    -webkit-tap-highlight-color: transparent;

}

.channel-option-list {

    margin-top: 2px;

}

.channel-option-row {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 13px 16px;

    border-top: 1px solid rgba(255, 255, 255, .06);

}

.channel-option-row:first-child {

    border-top: 1px solid rgba(255, 255, 255, .06);

}

.channel-option-texts {

    min-width: 0;

}

.channel-option-title {

    display: inline-flex;
    align-items: center;

    font-size: 14px;
    font-weight: 700;

    color: rgba(245, 250, 255, .94);

}

.channel-option-title-row {

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;

    position: relative;

}

.vip-badge {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 8px;
    line-height: 1;

    padding: 2px 6px;

    border-radius: 999px;
    border: 1px solid rgba(255, 215, 0, .7);

    color: #5c3b00;
    background: linear-gradient(135deg, #f8e28b, #f2c94c);

    margin-left: 3px;

    flex-shrink: 0;

    vertical-align: middle;
}

.channel-option-loading {

    width: 12px;
    height: 12px;

    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .25);
    border-top-color: #55b8ff;

    opacity: 0;
    transition: opacity .18s ease;

    animation: channelOptionSpin .9s linear infinite;

}

.channel-option-row.is-saving .channel-option-loading {

    opacity: 1;

}

@keyframes channelOptionSpin {

    to {
        transform: rotate(360deg);
    }

}

.channel-option-desc {

    margin-top: 3px;

    font-size: 12px;

    color: rgba(202, 220, 242, .65);

}

.ui-switch {

    position: relative;

    width: 50px;
    height: 30px;

    border: none;
    border-radius: 999px;

    background: #2b3a50;

    flex-shrink: 0;

}

.ui-switch span {

    position: absolute;
    top: 3px;
    left: 3px;

    width: 24px;
    height: 24px;

    border-radius: 50%;
    background: #fff;

    transition: .2s;

}

.ui-switch.on {

    background: #3a8ff5;

}

.ui-switch.on span {

    transform: translateX(20px);

}

.emoji-input {

    width: 92px;

    height: 36px;

    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .12);

    background: rgba(12, 20, 29, .65);
    color: #fff;

    text-align: center;
    font-size: 15px;

    padding: 0 8px;

    flex-shrink: 0;

}

.emoji-input:focus,
.emoji-input:focus-visible {

    outline: none;

    border-color: rgba(126, 203, 255, .7);

}

body.light .channel-settings-head {

    color: rgba(18, 33, 47, .88);

}

body.light .channel-help-link {

    color: #297fe0;

}

body.light .help-steps {

    color: rgba(18, 33, 47, .8);

}

body.light .help-secondary {

    border-color: rgba(18, 33, 47, .18);
    color: #12212f;

}

body.light {

    background: #f4f8fd;
    border-color: rgba(18, 33, 47, .10);

}

body.light .channel-item {

    background: #f7fbff;
    border-color: rgba(18, 33, 47, .10);

}

body.light .channel-empty {

    background: #f7fbff;
    border-color: rgba(18, 33, 47, .12);

}

body.light .channel-empty-title {

    color: #12212f;

}

body.light .channel-empty-sub {

    color: rgba(18, 33, 47, .58);

}

body.light .channel-card {

    background: #f7fbff;
    border-color: rgba(18, 33, 47, .10);

}

body.light .channel-card.active {

    box-shadow: 0 8px 20px rgba(62, 104, 229, .18);

}

body.light .channel-avatar {

    background: rgba(18, 33, 47, .04);
    border-color: rgba(18, 33, 47, .12);
    color: rgba(18, 33, 47, .8);

}

body.light .channel-meta-title {

    color: #12212f;

}

body.light .channel-meta-row {

    color: rgba(18, 33, 47, .7);

}

body.light .channel-meta-label {

    color: rgba(18, 33, 47, .5);

}

body.light .channel-meta-value {

    color: rgba(18, 33, 47, .9);

}

body.light .channel-card-action {

    background: rgba(18, 33, 47, .04);
    border-color: rgba(18, 33, 47, .12);
    color: #12212f;

}

body.light .channel-item-title {

    color: #12212f;

}

body.light .channel-item-sub {

    color: rgba(18, 33, 47, .58);

}

body.light .channel-option-row {

    border-top-color: rgba(18, 33, 47, .10);

}

body.light .channel-option-title {

    color: #12212f;

}

body.light .channel-option-loading {

    border-color: rgba(18, 33, 47, .18);
    border-top-color: #2f80ed;

}

body.light .channel-option-desc {

    color: rgba(18, 33, 47, .58);

}

body.light .ui-switch {

    background: #d3dce7;

}

body.light .ui-switch.on {

    background: #3a8ff5;

}

body.light .emoji-input {

    background: #ffffff;
    color: #12212f;

    border-color: rgba(18, 33, 47, .16);

}

body.light .detail-loading-card {

    background: #ffffff;
    border-color: rgba(18, 33, 47, .18);
    color: rgba(18, 33, 47, .8);
    box-shadow: 0 10px 20px rgba(18, 33, 47, .12);

}

body.light .detail-loading {

    background: radial-gradient(circle at center, rgba(255, 255, 255, .85) 0%, rgba(233, 240, 248, .95) 70%);
    backdrop-filter: blur(3px);

}

.detail-loading-text {

    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(213, 225, 243, .9);

}

/* Toast */

.toast-container {

    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(90px + env(safe-area-inset-bottom));

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    z-index: 900;
    pointer-events: none;

}

body.detail-open .toast-container {

    bottom: calc(18px + env(safe-area-inset-bottom));

}

.toast {

    max-width: min(92vw, 360px);

    background: rgba(90, 90, 90, .8);
    color: #fff;

    padding: 10px 16px;
    border-radius: 12px;

    font-size: 13px;
    font-weight: 600;

    opacity: 0;
    transform: translateY(6px);

    transition: opacity .3s ease;

    box-shadow: 0 6px 16px rgba(0, 0, 0, .28);

}

.toast.show {

    opacity: 1;

}

.toast.toast-success {

    background: rgba(0, 128, 0, 0.8);

}

.toast.toast-error {

    background: rgba(255, 0, 0, 0.8);

}

body.light .detail-loading-text {

    color: rgba(18, 33, 47, .7);

}