body{
    background: linear-gradient( 90deg, rgba(247, 149, 51, .1), rgba(243, 112, 85, .1) 15%, rgba(239, 78, 123, .1) 30%, rgba(161, 102, 171, .1) 44%, rgba(80, 115, 184, .1) 58%, rgba(16, 152, 173, .1) 72%, rgba(7, 179, 155, .1) 86%, rgba(109, 186, 130, .1));
}
.ziti{
    -webkit-text-fill-color: transparent;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 25%, #ec4899 50%, #06b6d4 75%, #10b981 100%) 0 0 / 200%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: 10s infinite gradient-shift;
}

#input{
    background: transparent;
    resize: none;
    overflow: auto;
    box-shadow: 0 4px 24px -4px #6366f11a, 0 2px 8px -2px #0000000a, inset 0 1px #ffffffe6;
}

#card{
    height: 250px; 
    overflow-y: auto;
    background: transparent;
    border: 0px;
    box-shadow: 0 4px 24px -4px #6366f11a, 0 2px 8px -2px #0000000a, inset 0 1px #ffffffe6;
}

#xian{
    color: #555;
}

input::placeholder,
textarea::placeholder {
    color: #9ca3af;
    font-size: 13px;
    font-style: italic;
}

.scroll-x {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* iOS 惯性滚动 */
    overscroll-behavior-x: contain;    /* 防止触发浏览器返回 */
    touch-action: pan-x;               /* 允许横向滑动 */
    scroll-snap-type: x proximity;
    box-sizing: border-box;
    padding: 10px;
}

/* 隐藏滚动条 */
.scroll-x::-webkit-scrollbar {
    display: none;
}
.scroll-x {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.items {
    flex: 0 0 418px; /* 每个卡片宽度，可改成 200px */
    padding: 10px;
    box-shadow: 0 4px 24px -4px #6366f11a, 0 2px 8px -2px #0000000a, inset 0 1px #ffffffe6;
}