/* 模板构建器 V2 - 页面骨架（勿覆盖 variables.css 的 .container token） */

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); line-height: 1.6; }
.main-content { flex: 1 0 auto; min-height: 40vh; width: 100%; }
.main-content--variant-bleed { width: 100%; }
.main-content--variant-bleed > .layout-container { display: block; margin-bottom: 0; gap: 0; }
.main-content--variant-bleed .container-column { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; }

.layout-container { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; align-items: flex-start; }
.container-column { flex: 0 0 auto; min-width: 0; box-sizing: border-box; }

.container-full .container-column { width: 100%; flex-basis: 100%; }
.container-two-equal .container-column:nth-child(1), .container-55 .container-column:nth-child(1) { width: 50%; flex-basis: 50%; }
.container-two-equal .container-column:nth-child(2), .container-55 .container-column:nth-child(2) { width: 50%; flex-basis: 50%; }
.container-two-7030 .container-column:nth-child(1), .container-73 .container-column:nth-child(1) { width: 70%; flex-basis: 70%; }
.container-two-7030 .container-column:nth-child(2), .container-73 .container-column:nth-child(2) { width: 30%; flex-basis: 30%; }
.container-82 .container-column:nth-child(1) { width: 80%; flex-basis: 80%; }
.container-82 .container-column:nth-child(2) { width: 20%; flex-basis: 20%; }
.container-37 .container-column:nth-child(1) { width: 30%; flex-basis: 30%; }
.container-37 .container-column:nth-child(2) { width: 70%; flex-basis: 70%; }
.container-three-equal .container-column, .container-333 .container-column { width: 33.33%; flex-basis: 33.33%; }
.container-four-equal .container-column { width: 25%; flex-basis: 25%; }

.layout-with-sidebar { display: flex; gap: 30px; }
.layout-with-sidebar .sidebar { width: 300px; flex-shrink: 0; }
.layout-with-sidebar .content-area { flex: 1; }

@media (max-width: 768px) {
  .layout-container { flex-direction: column; }
  .container-column { width: 100% !important; }
  .layout-with-sidebar { flex-direction: column; }
  .layout-with-sidebar .sidebar { width: 100%; }
}

/* pagination: legacy links only — real UI uses [data-component=pagination] */
.pagination-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pagination-links a { padding: 8px 12px; border: 1px solid #dcdfe6; border-radius: 4px; text-decoration: none; }
.pagination-links a:hover { color: #409eff; border-color: #409eff; }
.pagination-links a.active { background: #409eff; color: white; border-color: #409eff; }