.logo span[data-v-7f8f85f9]:nth-child(2) {
    color: #0284c7;
}

@media (max-width: 768px) {
    main {
        padding: 60px 32px 0;
    }
}

@media (prefers-color-scheme: dark) {
    #loading-container {
        background-color: rgb(42, 43, 43);
    }

    :where(.css-1p3hq3p).ant-spin .ant-spin-dot-item {
        background-color: rgb(29, 77, 144);
    }
}



@keyframes rotating {
    from {
        -ms-transform: rotate(0);
        -moz-transform: rotate(0);
        -webkit-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.rotating {
    -webkit-animation: rotating 3s linear infinite;
    -moz-animation: rotating 3s linear infinite;
    -ms-animation: rotating 3s linear infinite;
    -o-animation: rotating 3s linear infinite;
    animation: rotating 3s linear infinite;
}

/* 激活状态的样式 */
.nav-item.active {
    color: #0284c7 !important;
}

/* 鼠标悬停效果 */
.nav-item:hover {
    color: #0284c7;
}

header .nav-main {
    display: flex;
    flex-direction: row;
    gap: 18px;
    margin: 0 auto;
    /* 移除不精确的transform，使用flexbox完美居中 */
}
.logo span[data-v-7f8f85f9]:nth-child(2) {
    color: #0284c7;
}

@media (max-width: 768px) {
    main {
        padding: 60px 32px 0;
    }
}

@media (prefers-color-scheme: dark) {
    #loading-container {
        background-color: rgb(42, 43, 43);
    }

    :where(.css-1p3hq3p).ant-spin .ant-spin-dot-item {
        background-color: rgb(29, 77, 144);
    }
}



@keyframes rotating {
    from {
        -ms-transform: rotate(0);
        -moz-transform: rotate(0);
        -webkit-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.rotating {
    -webkit-animation: rotating 3s linear infinite;
    -moz-animation: rotating 3s linear infinite;
    -ms-animation: rotating 3s linear infinite;
    -o-animation: rotating 3s linear infinite;
    animation: rotating 3s linear infinite;
}

/* 激活状态的样式 
.nav-item.active {
    color: #0284c7 !important;
    background-color: rgba(2, 132, 199, 0.1) !important;
    border-radius: 8px;
    padding: 8px 12px;
}
*/
.nav-item.active {
    color: #0284c7 !important;
    background-color: rgba(2, 132, 199, 0.1) !important;
    border-radius: 8px;
    padding: 8px 12px;
}

/* 鼠标悬停效果 
.nav-item:hover {
    color: #0284c7;
    background-color: rgb(227 232 235 / 37%) !important;
    border-radius: 8px;
    padding: 8px 12px;
}*/
.nav-item:hover {
    color: #0284c7;
    background-color: rgb(227 232 235 / 37%) !important;
    border-radius: 8px;
    padding: 8px 12px;
}



/* 导航栏完美居中布局 - 仅在桌面端应用 */
@media (min-width: 769px) {
    header .main {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 1rem;
    }

    header .logo {
        justify-self: start;
    }

    header .flex-1 {
        justify-self: center;
        display: flex;
        justify-content: center;
    }

    header .flex.items-center.gap-3.mr-4 {
        justify-self: end;
    }
}

/* 移动端保持原有的 flexbox 布局 */
@media (max-width: 768px) {
    header .main {
        display: flex;
        align-items: center;
        justify-content: flex-start; /* 让右侧元素作为一组 */
    }
    
    header .flex-1 {
        display: none; /* 移动端隐藏导航菜单 */
    }

    /* 将头像区域推到右侧，并与菜单按钮成为紧凑一组 */
    header .touxiang {
        margin-left: auto;
        display: flex;
        align-items: center;
    }

    /* 头像右侧的菜单按钮紧贴显示 */
    header #menu-toggle {
        margin-left: 6px;
    }
}

@media (max-width: 768px) {
    header .nav-main {
        display: none;
    }

    header>div {
        padding: 0 !important;
    }

    button#menu-toggle {
        display: flex !important;
    }
}

header>div {
    align-items: center;
    flex-direction: row;
    height: 100%;
    max-width: 1200px;
    padding: 0 48px;
}

span[data-v-43b8e127] {
    margin-left: .4rem;
}

.svg-inline--fa {
    display: var(--fa-display, inline-block);
    height: 1em;
    overflow: visible;
    vertical-align: -.125em;
}

header .nav-main a {
    font-size: .864rem;
    transition: all .2s ease;
}

header  {
    display: flex;
    flex-direction: row;
    gap: 18px;
}

body {
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url(https://t.alcy.cc/pc) !important;
    background-size: cover;
    background-position: center center;
    opacity: 0.3;
    z-index: -1;
}

/* 平板设备 */
@media (max-width: 1024px) and (min-width: 769px) {
    body::before {
        background-image: url(https://t.alcy.cc/pc) !important;
    }
}

/* 移动设备 */
@media (max-width: 768px) {
    body::before {
        background-image: url(https://t.alcy.cc/mp) !important;
    }
}

/* 超小屏幕设备 */
@media (max-width: 480px) {
    body::before {
        background-image: url(https://t.alcy.cc/mp) !important;
        background-position: center top;
    }
}

/* 高分辨率设备优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body::before {
        background-image: url(https://t.alcy.cc/pc) !important;
    }
    
@media (max-width: 768px) {
        body::before {
            background-image: url(https://t.alcy.cc/mp) !important;
        }
    }
}


html.dark body::before {
    opacity: 0.2;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
    unicode-bidi: isolate;
}

li,
p {
    word-break: break-all;
}

footer ul li {
    position: relative;
}

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
    unicode-bidi: isolate;
}

footer ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 13px !important;
    gap: 16px;
    list-style: none;
    margin-top: 1px;
    margin-bottom: 10px;

}

h1.py-6.w-full.text-3xl.font-bold.text-center.sm\:text-center {
    margin-top: 15px;
    margin-bottom: 10px;
}

footer .footer {
    max-width: 1200px;
    width: 90%;
}

footer {
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    margin-top: 16px;
    padding: 16px 0;
}

#loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    z-index: 9999;
    transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-plain {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: none;
    color: #000000bf;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.rounded-lg {
    border-radius: .5rem;
}

button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

.menu-slide {
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-slide.active {
    transform: translateX(0);
}

.overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

.hamburger-line {
    transition: all 0.3s ease-in-out;
}

.menu-toggle.active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.logo[data-v-7f8f85f9] {
    color: #222;
    font-size: 2em;
    font-weight: 700;
    letter-spacing: .025em;
}

@media (max-width: 768px) {
    .notice {
        padding: 32px 0;
    }

    div#apilist {
        gap: 15px !important;
    }
}

.notice {
    padding: 0px 0 45px 0;
    text-align: center;
}

main {
    align-items: center;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 8rem);
    padding: 80px 48px 0;
    position: relative;
}

@media (max-width: 768px) {
    main {
        /*padding: 58px 32px 0;*/
        padding: 80px 20px 0;
    }
}

main {
    unicode-bidi: isolate;
}



body {
    font-family: "LXGW WenKai Screen", sans-serif !important;
}

.notice>p {
    margin-top: 16px;
}

.notice>span {
    color: #626262;
    font-size: 14px;
    margin-bottom: 10px;
}

p {
    line-height: 1.6;
    margin: 0 0 16px;
    overflow-wrap: anywhere;
}

div#apilist {
    display: grid;
    flex-wrap: wrap;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(294px, 1fr));
    width: 100%;
    justify-items: center;
    padding-left: 24px;
    padding-right: 24px;
    justify-content: flex-start;
    margin: 0 auto;
}

main>* {
    max-width: 1200px;
    width: 100%;
}

input.w-full.px-4.py-2.text-gray-900.placeholder-gray-500.border.border-gray-300.rounded-full.focus\:outline-none.focus\:ring-2.focus\:ring-blue-500.focus\:border-transparent {
    text-align: center;
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

input.w-full.px-4.py-2.text-gray-900.placeholder-gray-500.border.border-gray-300.rounded-full.focus\:outline-none.focus\:ring-2.focus\:ring-blue-500.focus\:border-transparent::placeholder {
    text-align: center;
}

input[type="search"]::-webkit-search-cancel-button {
    display: none;
}


h3#item {
    margin-top: -11px;
}


h3#item {
    margin-top: -10px;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
    unicode-bidi: isolate;
}

li,
p {
    word-break: break-all;
}

footer ul li {
    position: relative;
}

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
    unicode-bidi: isolate;
}

footer ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 13px !important;
    gap: 16px;
    list-style: none;
}

footer .footer {
    max-width: 1200px;
    width: 100%;
}

footer {
    align-items: center;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    margin-top: 16px;
    padding: 16px 0;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}

#loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 9999;
    transition: opacity .3s;
    display: flex;
    justify-content: center;
    align-items: center
}

:where(.css-1p3hq3p).ant-spin {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #1677ff;
    font-size: 14px;
    line-height: 1.57;
    list-style: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    position: relative;
    display: inline-block;
    text-align: center;
    vertical-align: middle
}

:where(.css-1p3hq3p).ant-spin-lg .ant-spin-dot {
    font-size: 2.25rem
}

:where(.css-1p3hq3p).ant-spin .ant-spin-dot {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em
}

:where(.css-1p3hq3p).ant-spin .ant-spin-dot-spin {
    transform: rotate(45deg);
    animation: css-1p3hq3p-antRotate 1.2s infinite linear
}

:where(.css-1p3hq3p).ant-spin .ant-spin-dot-item {
    position: absolute;
    display: block;
    width: .45em;
    height: .45em;
    background-color: #1677ff;
    border-radius: 100%;
    transform: scale(.75);
    transform-origin: 50% 50%;
    opacity: .3;
    animation: css-1p3hq3p-antSpinMove 1s infinite linear alternate
}

:where(.css-1p3hq3p).ant-spin .ant-spin-dot-item:nth-child(1) {
    top: 0;
    left: 0
}

:where(.css-1p3hq3p).ant-spin .ant-spin-dot-item:nth-child(2) {
    top: 0;
    right: 0;
    animation-delay: .4s
}

:where(.css-1p3hq3p).ant-spin .ant-spin-dot-item:nth-child(3) {
    right: 0;
    bottom: 0;
    animation-delay: .8s
}

:where(.css-1p3hq3p).ant-spin .ant-spin-dot-item:nth-child(4) {
    bottom: 0;
    left: 0;
    animation-delay: 1.2s
}

@keyframes css-1p3hq3p-antSpinMove {
    to {
        opacity: 1
    }
}

@keyframes css-1p3hq3p-antRotate {
    to {
        transform: rotate(405deg)
    }
}

div.api-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    transform: translateZ(0);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    margin: 24px 0 0;
    padding: 24px;
}

.\[\&\>div\>p\]\:bg-\[\#F7F8F9\]>div>p {
    --tw-bg-opacity: 1;
    background-color: rgb(247 248 249 / var(--tw-bg-opacity));
}

.\[\&\>div\>p\]\:border>div>p {
    border-width: 1px;
}

.\[\&\>div\>p\]\:rounded-md>div>p {
    border-radius: 0.375rem;
}

.\[\&\>div\>p\]\:p-2>div>p {
    padding: 0.5rem;
}

blockquote {
    padding-left: 0.5em;
    font-weight: 400;
    border-left: 4px solid rgba(0, 0, 0, .12);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-active .accordion-content {
    max-height: 2400px;
}

.accordion-active svg {
    transform: rotate(180deg);
}

.w-full.rounded-lg.border.px-4.py-3.text-sm.\[\&\>svg\+div\]\:translate-y-\[-3px\].\[\&\>svg\]\:absolute.\[\&\>svg\]\:text-foreground.\[\&\>svg\~\*\]\:pl-7.bg-white.text-foreground {
    max-width: 620px;
    align-self: center;
}

.atk-copyright {
    display: none !important;
}

h1.py-6.w-full.text-2xl.font-bold.text-center.sm\:text-left {
    font-size: 26px;
    margin-top: 20px;
}

.w-full.rounded-lg.border.px-4.py-3.text-sm.\[\&\>svg\+div\]\:translate-y-\[-3px\].\[\&\>svg\]\:absolute.\[\&\>svg\]\:text-foreground.\[\&\>svg\~\*\]\:pl-7.bg-white.text-foreground {
    max-width: 620px;
    align-self: center;
}

section.block {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    margin: 24px 0 0;
    padding: 24px;
}

@media (max-width: 420px) {
    .w-full.rounded-lg.border.px-4.py-3.text-sm.\[\&\>svg\+div\]\:translate-y-\[-3px\].\[\&\>svg\]\:absolute.\[\&\>svg\]\:text-foreground.\[\&\>svg\~\*\]\:pl-7.bg-white.text-foreground {
        max-width: 310px !important;
    }
}

@media (max-width: 768px) {
    .gap-6 {
        gap: 0rem !important;
    }
}

.\[\&\>div\>p\]\:bg-\[\#F7F8F9\]>div>p {
    --tw-bg-opacity: 1;
    background-color: rgb(247 248 249 / var(--tw-bg-opacity));
}

.\[\&\>div\>p\]\:border>div>p {
    border-width: 1px;
}

.\[\&\>div\>p\]\:rounded-md>div>p {
    border-radius: 0.375rem;
}

.\[\&\>div\>p\]\:p-2>div>p {
    padding: 0.5rem;
}

div.api-card {
    background-color: rgb(255 255 255 / 1);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin: 24px 0 0;
    padding: 24px;
}

p {
    /* line-height: 1.6; */
    /* margin: 0 0 16px; */
    /* overflow-wrap: anywhere; */
    /* white-space: pre-wrap; */
    line-height: 1.6 !important;
    /* white-space: pre-wrap !important; */
    overflow: auto !important;
}

span {
    overflow-x: auto ;
    overflow-y: hidden;
}

p.table {
    margin-bottom: 0px !important;
    overflow-x: auto !important;
}

.hljs {
    background: unset !important;
}

.atk-main-editor {
    border-radius: 13px !important;
}

.atk-main-editor>.atk-bottom .atk-send-btn {
    border-radius: 7px !important;
}

/*artalk 样式修改*/
[data-theme=dark] .atk-comment-wrap {
    border: 1px solid #3d3d3f !important;
    border-radius: 12px !important;
    margin-bottom: .5rem !important;
    background-color: #1b1c20;
}

.atk-comment-wrap {
    border: 1px solid #e3e8f7 !important;
    border-radius: 12px !important;
    margin-bottom: .5rem !important;
}

.atk-grp-switcher span {
    padding: 0 .6rem !important;
}

[data-theme=dark] .atk-main-editor .atk-header input {
    border-radius: 8px;
    border: 1px solid #3d3d3f;
    height: 34px;
    padding: 0 .3rem;
    margin: 0 .3rem;
}

[data-theme=light] .atk-main-editor .atk-header input {
    border-radius: 8px;
    border: 1px solid #e3e8f7;
    ;
    height: 34px;
    padding: 0 .3rem;
    margin: 0 .3rem;
}

.atk-comment>.atk-main>.atk-body>.atk-reply-to {
    border: 1px solid var(--at-color-border) !important;
    border-radius: 8px;
}

.atk-comment>.atk-main>.atk-header .atk-date {
    background: var(--heo-secondbg);
    border: var(--style-border-always);
    padding: 0 8px;
    border-radius: 8px;
    margin-right: 4px !important;
    color: var(--at-color-meta) !important;
    display: inline !important;
}

.atk-comment>.atk-main>.atk-header .atk-ua-wrap .ua-browser,
.ua-os,
.atk-region-badge {
    background: var(--heo-secondbg) !important;
    border: var(--style-border-always) !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    margin-right: 4px !important;
    color: var(--at-color-meta) !important;
    display: inline !important;
}

.atk-comment>.atk-main>.atk-header .atk-badge {
    border: var(--style-border-always) !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    margin-right: 4px !important;
}

.artalk pre code {
    background: var(--heo-secondbg) !important;
    border-radius: 12px;
    border: var(--style-border-always);
}

.atk-comment-children>.atk-comment-wrap>.atk-comment {
    padding: 6px !important;
}

.atk-comment>.atk-main>.atk-body>.atk-content a:not(.fancybox) {
    background: var(--heo-secondbg);
    border: var(--style-border-always);
    padding: 0 8px;
    border-radius: 8px;
    display: inline;
}

.atk-comment>.atk-main>.atk-body>.atk-content a:not(.fancybox)::after {
    content: " 🔗";
}

.atk-comment>.atk-main>.atk-body>.atk-content img {
    border-radius: 12px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
    .dark\:text-neutral-800 {
        --tw-text-opacity: 1;
        color: rgb(38 38 38 / var(--tw-text-opacity, 1)) !important;
    }
}

ul {
    padding-inline-start: 1.625em;
    list-style-type: disc;
    margin-top: 1.25em;
}

.rounded-lg {
    border-radius: .5rem;
}

::marker {
    color: var(--fallback-bc, oklch(0% 0 0/0.5));
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-active .accordion-content {
    max-height: 2400px;
}

.accordion-active svg {
    transform: rotate(180deg);
}

.w-full.rounded-lg.border.px-4.py-3.text-sm.\[\&\>svg\+div\]\:translate-y-\[-3px\].\[\&\>svg\]\:absolute.\[\&\>svg\]\:text-foreground.\[\&\>svg\~\*\]\:pl-7.bg-white.text-foreground {
    max-width: 620px;
    align-self: center;
}

.card {
    background-color: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1.5px 5px rgba(0, 0, 0, .08);
    cursor: pointer;
    overflow: hidden;
    padding: 16px 20px;
    position: relative;
    transition: background-color .2s;
}

.card>img[data-v-7cdaf205] {
    background: var(--color-bg);
    border-radius: 50%;
    float: right;
    height: 82px;
    z-index: 0;
}

.card[data-v-7cdaf205]>:not(img) {
    position: relative;
    z-index: 1;
}

.card>h4 {
    margin: 0;
}

.card>.info,
.card>p {
    color: #626262;
}

.card>p {
    font-size: 14px;
    height: 68px;
    margin: 8px 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card>.info[data-v-7cdaf205] {
    gap: 8px;
}

.card>.info {
    display: flex;
    flex-direction: row;
    font-size: 12px;
    gap: 16px;
    justify-content: end;
}

.info-tags[data-v-7cdaf205] {
    background-color: #cfb0001a;
    border: 1px solid #cfb000;
    border-radius: 4px;
    color: #b49900;
    font-size: 12px;
    padding: 1.5px 8px;
}

span[data-v-43b8e127] {
    margin-left: .4rem;
}

#items {
    display: grid;
    flex-wrap: wrap;
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(294px, 1fr));
    width: 100%;
}

.flex1 {
    flex: 1;
}

@keyframes pulse-custom {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.97);
        opacity: 0.95;
    }

    100% {
        transform: scale(1);
    }
}

.animate-pulse-custom:active {
    animation: puls
}

.custom-modal-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    gap: 8px;
    /* 按钮间距 */
}

.donate-modal {
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.98);
    will-change: transform, opacity;
}

.donate-modal.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Ant Design 风格的变量 */
:root {
    --primary-color: #1890ff;
    --success-color: #52c41a;
    --border-radius-base: 4px;
    --box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15);
    --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
}


/* 自定义优雅的缓动函数 */
:root {
    --ease-elegant: cubic-bezier(0.34, 1.56, 0.64, 1);
    --backdrop-transition: cubic-bezier(0.22, 1, 0.36, 1);
}

.donate-modal {
    transition: opacity 0.5s var(--backdrop-transition), visibility 0.5s var(--backdrop-transition), backdrop-filter 0.5s var(--backdrop-transition);
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(0px);
    will-change: transform, opacity, backdrop-filter;
}

.donate-modal.active {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(5px);
}

.donate-modal>div {
    transition: transform 0.5s var(--ease-elegant), opacity 0.5s var(--ease-elegant), box-shadow 0.5s var(--ease-elegant);
    transform: translateY(30px) scale(0.95);
    opacity: 0;
}

.donate-modal.active>div {
    transform: translateY(0) scale(1);
    opacity: 1;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08), 0 3px 8px rgba(0, 0, 0, 0.05);
}

/* Ant Design 风格的卡片效果 */
.ant-card {
    box-shadow: var(--box-shadow-base);
    border-radius: 8px;
    transition: all 0.3s var(--ease-in-out);
}

/* 二维码容器样式 */
.qr-container {
    transition: all 0.3s var(--ease-in-out);
    border-radius: var(--border-radius-base);
}

/* 标题样式 */
.ant-title {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    margin-bottom: 16px;
}

/* 按钮样式 
.ant-btn {
    transition: all 0.3s var(--ease-in-out);
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 4px 15px;
    font-size: 14px;
    line-height: 1.5715;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    background: #fff;
    border-color: #d9d9d9;
    color: rgba(0, 0, 0, 0.85);
}

.ant-btn:hover {
    color: #40a9ff;
    border-color: #40a9ff;
    background: #fff;
}

.ant-btn-primary {
    color: #fff;
    background: #1890ff;
    border-color: #1890ff;
}

.ant-btn-primary:hover {
    color: #fff;
    background: #40a9ff;
    border-color: #40a9ff;
}

.ant-btn-default {
    color: rgba(0, 0, 0, 0.85);
    background: #fff;
    border-color: #d9d9d9;
}

.ant-btn-default:hover {
    color: #40a9ff;
    border-color: #40a9ff;
    background: #fff;
}
*/

.ant-alert-description {
    font-family: 'LXGW WenKai Screen' !important;
}

/* 覆盖所有antd组件字体 */
[class^="ant-"],
[class*=" ant-"] {
    font-family: 'LXGW WenKai Screen', sans-serif !important;
}

a#api-card-item {
    cursor: pointer;
}

span#case {
    cursor: pointer;
}




tbody tr:last-child {
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

tbody tr:first-child {
    border-top-right-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
}

/* 暗色模式下太阳和系统图标显示白色 */
html.dark .light-icon,
html.dark .system-icon {
    stroke: white !important;
}

/* 暗色模式下月亮图标显示蓝色 */
html.dark .dark-icon {
    stroke: #3B82F6 !important;
}

/* 明亮模式下太阳图标显示黄色 */
html:not(.dark) .light-icon {
    stroke: #FFB800 !important;
}

/* 明亮模式下月亮图标显示默认颜色 */
html:not(.dark) .dark-icon {
    stroke: currentColor !important;
}

html:not(.dark) .system-icon {
    stroke: currentColor !important;
}

/* 确保DarkReader不会覆盖我们的自定义图标颜色 */
.light-icon[data-darkreader-inline-stroke],
.system-icon[data-darkreader-inline-stroke],
.dark-icon[data-darkreader-inline-stroke] {
    stroke: var(--icon-color, currentColor) !important;
}

/* 主题按钮样式 */
#lightTheme,
#systemTheme,
#darkTheme {
    transition: background-color 0.3s ease;
    margin: 0;
}

/* 非活动按钮样式 */
#lightTheme:not(.active),
#systemTheme:not(.active),
#darkTheme:not(.active) {
    background-color: rgba(229, 231, 235, 0.5);
    box-shadow: none;
}

html.dark #lightTheme:not(.active),
html.dark #systemTheme:not(.active),
html.dark #darkTheme:not(.active) {
    background-color: rgba(55, 65, 81, 0.5);
}

/* 活动按钮样式 */
#lightTheme.active,
#systemTheme.active,
#darkTheme.active {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

html.dark #lightTheme.active,
html.dark #systemTheme.active,
html.dark #darkTheme.active {
    background-color: #1f2937;
    /* gray-800 */
}

/* 确保主题容器的平滑过渡 */
#themeContainer {
    display: flex;
    transition: background-color 0.3s ease-in-out;
    position: relative;
    background-color: white;
}

/* 确保主题切换时只有背景色变化有过渡效果 */
.theme-transition #themeContainer {
    transition: background-color 0.3s ease-in-out;
}

/* 滑块样式 */
.theme-slider {
    position: absolute;
    width: 32px;
    /* 与按钮宽度相同 */
    height: 32px;
    /* 与按钮高度相同 */
    left: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 9999px;
    transition: transform 0.3s ease;
    z-index: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}



html.dark .theme-slider {
    background-color: #1f2937;
    /* gray-800 */
}

/* 确保按钮在滑块上方 */
#lightTheme,
#systemTheme,
#darkTheme {
    position: relative;
    z-index: 1;
    background-color: transparent !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

div#sakura {
    margin-top: 10px;
}





.api-card-animation {
    animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* 搜索框动画 */
input[type="search"] {
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

input[type="search"]:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

input[type="search"]:focus {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(30px) saturate(220%);
    -webkit-backdrop-filter: blur(30px) saturate(220%);
    border: 1px solid rgba(2, 132, 199, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.25), 0 16px 48px rgba(0, 0, 0, 0.2);
    transform: scale(1.02) translateY(-3px);
}

.search-focus {
    transform: scale(1.02);
}

.active-search {
    background: rgba(240, 249, 255, 0.9) !important;
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    border-color: #0284c7 !important;
}

/* 页面滚动时的平滑效果 */
html {
    scroll-behavior: smooth;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

header {
    animation: fadeInDown 0.5s ease-out;
}

.logo {
    position: relative;
    overflow: hidden;
}

.logo span {
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
}





.nav-item {
    position: relative;
    transition: all 0.3s ease;
}

/* 关于菜单高亮状态 */
#about-menu.active {
    color: #0284c7 !important;
    background-color: rgba(2, 132, 199, 0.1) !important;
    border-radius: 8px;
    padding: 8px 12px;
}

#about-menu.active svg {
    color: #0284c7 !important;
}

#about-menu.active span {
    color: #0284c7 !important;
    font-weight: 600;
}


/* 分页按钮动画 */
.ant-pagination-item,
.ant-pagination-prev,
.ant-pagination-next {
    transition: all 0.3s ease;
}

.ant-pagination-item:hover,
.ant-pagination-prev:hover,
.ant-pagination-next:hover {
    transform: translateY(-2px);
}

/* 加载动画 */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.ant-spin-dot {
    animation: pulse 2s infinite;
}

/* 渐变色标题样式 */
.gradient-title {
    font-weight: bold;
}

.gradient-title span:first-child {
    color: inherit;
    transition: all 0.3s ease;
}

.gradient-title span:last-child {
    color: #0284c7;
    transition: all 0.3s ease;
}

/* 悬停效果 */
.gradient-title:hover span:first-child {
    color: inherit;
}

.gradient-title:hover span:last-child {
    color: #0369a1;
}

/* 修复暗黑模式下上半部分背景变黑的问题 */
/* html.dark main,
html.dark main>div,
html.dark main>div>div,
html.dark #pjax-container,
html.dark #app,
html.dark section:first-child,
html.dark section:nth-child(2) {
    background: transparent !important;
} */

/* 确保暗黑模式下body和main容器背景透明 */
html.dark body {
    background: transparent !important;
}

/* 确保上半部分的所有容器都不会被设置为黑色背景 */
html.dark main section {
    background: transparent !important;
}

/* 特别针对包含搜索框和API列表的区域 */
html.dark .notice,
html.dark .notice+div,
html.dark .hot-api-section,
html.dark .api-list-title {
    background: transparent !important;
}



.ant-pagination-item-active {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

.ant-float-btn-body {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}


/* 通用滚动条隐藏 */
.hide-scrollbar {
    /* IE and Edge */
    -ms-overflow-style: none;
    
    /* Firefox */
    scrollbar-width: none;
    
    /* Safari and Chrome */
    overflow: -moz-scrollbars-none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* 应用到整个页面 */
html, body {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

/* 热门API和全部API板块滚动条隐藏 */
#hot-api-list,
#apilist {
    /* IE and Edge */
    -ms-overflow-style: none;
    
    /* Firefox */
    scrollbar-width: none;
}

#hot-api-list::-webkit-scrollbar,
#apilist::-webkit-scrollbar {
    display: none;
}

/* 用户菜单箭头旋转动画 */
#user-menu-arrow {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.group:hover #user-menu-arrow,
.group.menu-open #user-menu-arrow {
    transform: rotate(180deg);
}

.ant-select-selector {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.ant-pagination-options-quick-jumper  > input {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}