/* ==========================================
   灵犀学 AI · 全局样式
   设计风格: Claymorphism (软立体 / 童趣)
   主色: Indigo + Green
   ========================================== */

/* ----------- CSS 变量 ----------- */
page {
    --primary: #4f46e5;
    --primary-light: #818cf8;
    --primary-soft: #c7d2fe;
    --primary-bg: #eef2ff;
    --cta: #22c55e;
    --cta-light: #4ade80;
    --warning: #f59e0b;
    --danger: #ef4444;
    --text: #312e81;
    --text-secondary: #6366f1;
    --text-muted: #94a3b8;
    --bg: #f5f7ff;
    --card: #ffffff;
    --border: #e0e7ff;

    background-color: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', PingFangSC-Regular,
        'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
    font-size: 28rpx;
    line-height: 1.5;
}

/* ----------- 通用工具类 ----------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-1 { flex: 1; min-width: 0; min-height: 0; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-12 { gap: 12rpx; }
.gap-16 { gap: 16rpx; }
.gap-24 { gap: 24rpx; }

/* 单行省略 */
.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 多行省略 */
.ellipsis-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* ----------- Claymorphism 卡片基础类 ----------- */
.clay-card {
    background: var(--card);
    border-radius: 32rpx;
    box-shadow:
        0 8rpx 24rpx rgba(99, 102, 241, 0.08),
        0 2rpx 8rpx rgba(99, 102, 241, 0.04),
        inset 0 -2rpx 0 rgba(199, 210, 254, 0.4);
}

.clay-button {
    border-radius: 999rpx;
    background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
    color: #fff;
    box-shadow:
        0 8rpx 16rpx rgba(79, 70, 229, 0.3),
        inset 0 -4rpx 0 rgba(0, 0, 0, 0.12),
        inset 0 2rpx 0 rgba(255, 255, 255, 0.3);
    transition: all 200ms ease-out;

    &:active {
        transform: translateY(2rpx);
        box-shadow:
            0 4rpx 8rpx rgba(79, 70, 229, 0.25),
            inset 0 -2rpx 0 rgba(0, 0, 0, 0.12),
            inset 0 2rpx 0 rgba(255, 255, 255, 0.3);
    }
}

/* ----------- 滚动条隐藏 ----------- */
::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
}

/* ----------- 重置 ----------- */
view, text, button, input {
    box-sizing: border-box;
}

button {
    margin: 0;
    padding: 0;
    background: transparent;

    &::after {
        border: none;
    }
}
