/* 页面主体顶部边距，防止被固定导航栏遮挡 */
/* 注意：需要在每个页面的 body 上添加 .has-fixed-nav 类 */
body.has-fixed-nav > .container,
body.has-fixed-nav > .page-container,
body.has-fixed-nav .container:not(:first-child) {
    padding-top: var(--nav-height);
}

.container {
    width: 100%;
    max-width: var(--breakpoint-xl);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.content-section {
    min-height: auto;
}

.content-container {
    margin-top: var(--spacing-xl);
}

.form-section {
    background-color: var(--bg-primary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);
}

.result-section {
    background-color: var(--bg-primary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    width: 100%;
    overflow: hidden;
}

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

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

.flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-column {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

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

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

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

.gap-xl {
    gap: var(--spacing-xl);
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.min-h-screen {
    min-height: 100vh;
}

@media (max-width: var(--breakpoint-md)) {
    .container {
        padding: 0 var(--spacing-md);
    }
    
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5 {
        grid-template-columns: 1fr;
    }
    
    .form-section,
    .result-section {
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
    }
    
    .content-container {
        margin-top: var(--spacing-lg);
    }
}

@media (min-width: var(--breakpoint-md)) and (max-width: var(--breakpoint-lg)) {
    .grid-3,
    .grid-4,
    .grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: var(--breakpoint-lg)) and (max-width: var(--breakpoint-xl)) {
    .grid-4,
    .grid-5 {
        grid-template-columns: repeat(3, 1fr);
    }
}