/* ==========================================================================
   布局系统（Flex/Grid工具类）
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container-mobile);
    margin: 0 auto;
    background: var(--color-bg);
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
}

/* Flex工具类 */
.flex { display: flex; }
.flex-col { display: flex; 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-start { display: flex; align-items: center; }
.flex-end { display: flex; align-items: center; justify-content: flex-end; }
.flex-1 { flex: 1; }

.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }
.gap-2xl { gap: var(--spacing-2xl); }

/* Grid工具类 */
.grid { display: grid; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }

.gap-grid-sm { gap: var(--spacing-sm); }
.gap-grid-md { gap: var(--spacing-md); }
.gap-grid-lg { gap: var(--spacing-lg); }

/* 文本工具类 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-ellipsis-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.text-ellipsis-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 颜色工具类 */
.text-primary { color: var(--color-primary); }
.text-ink { color: var(--color-ink); }
.text-ink-light { color: var(--color-ink-light); }
.text-ink-lighter { color: var(--color-ink-lighter); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-white { color: white; }
.text-gold { color: var(--color-gold); }

.bg-white { background: white; }
.bg-primary { background: var(--color-primary); }
.bg-card-red { background: var(--color-card-red); }
.bg-card-gold { background: var(--color-card-gold); }
.bg-card-blue { background: var(--color-card-blue); }
.bg-card-brown { background: var(--color-card-brown); }
.bg-card-sepia { background: var(--color-card-sepia); }

/* 字号工具类 */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* 间距工具类 */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.p-lg { padding: var(--spacing-lg); }

/* 响应式 */
@media (min-width: 768px) {
    .container {
        max-width: var(--container-tablet);
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: var(--container-desktop);
    }
}