/* Global Variables */
:root {
    --sidebar-width: 260px;
    --bg-canvas: #f7f8fa;
    /* 品牌色 - 默认为对内 */
    --van-primary-color: #0088FF;
    --van-success-color: #00C797;
    --van-warning-color: #FF3030;
    --van-danger-color: #FF3030;
    --van-text-color: #333333;
}

body {
    background-color: var(--bg-canvas);
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
    color: #323233;
    -webkit-font-smoothing: antialiased;
}

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

/* 预览卡片 */
.demo-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    overflow: visible; /* 允许Dropdown/Popover溢出 */
    border: 1px solid #ebedf0;
    margin-bottom: 24px;
}
.demo-preview {
    padding: 24px;
    background: #fff;
    min-height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    z-index: 1;
}
.demo-preview.block-display {
    display: block; /* 用于 List, Cell 等需要宽度的组件 */
}
.demo-preview.dark-bg { background: #f7f8fa; }

/* 代码区域 */
.code-area {
    background: #282c34;
    padding: 16px;
    position: relative;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.code-content {
    font-family: 'Menlo', monospace;
    font-size: 12px;
    color: #abb2bf;
    line-height: 1.6;
    white-space: pre-wrap;
    max-height: 300px;
    overflow-y: auto;
}

/* 基础展示块 */
.shadow-box { height: 80px; border-radius: 8px; background: white; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #666; }
.corner-box { width: 80px; height: 80px; background: #0088FF; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; margin: 0 auto; }

/* 修复 Vant 组件在 PC 端的一些显示问题 */
.van-nav-bar { width: 100%; }
.van-tabs, .van-steps { width: 100%; }

[v-cloak] { display: none; }

/* 自定义图标字体支持 */
.icon {
    font-family: "spot" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 动画 */
.animate-fade-in {
    animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}