/* Bento 网格布局 */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-4);
}
.bento > .b-3 { grid-column: span 3; }
.bento > .b-4 { grid-column: span 4; }
.bento > .b-5 { grid-column: span 5; }
.bento > .b-6 { grid-column: span 6; }
.bento > .b-7 { grid-column: span 7; }
.bento > .b-8 { grid-column: span 8; }
.bento > .b-9 { grid-column: span 9; }
.bento > .b-12 { grid-column: span 12; }

/* 命名区域：仪表盘 */
.bento-dashboard {
  grid-template-areas:
    "stat1 stat1 stat2 stat2 stat3 stat3 stat4 stat4 stat4 stat4 stat4 stat4"
    "ring  ring  ring  ring  line  line  line  line  line  line  line  line"
    "orders orders orders orders orders orders orders orders orders orders orders orders";
}
.bento-dashboard .a-stat1 { grid-area: stat1; }
.bento-dashboard .a-stat2 { grid-area: stat2; }
.bento-dashboard .a-stat3 { grid-area: stat3; }
.bento-dashboard .a-stat4 { grid-area: stat4; }
.bento-dashboard .a-ring { grid-area: ring; }
.bento-dashboard .a-line { grid-area: line; }
.bento-dashboard .a-orders { grid-area: orders; }

@media (max-width: 1100px) {
  .bento-dashboard {
    grid-template-areas:
      "stat1 stat1 stat1 stat1 stat2 stat2 stat2 stat2 stat3 stat3 stat3 stat3"
      "stat4 stat4 stat4 stat4 stat4 stat4 stat4 stat4 stat4 stat4 stat4 stat4"
      "ring  ring  ring  ring  ring  ring  line  line  line  line  line  line"
      "orders orders orders orders orders orders orders orders orders orders orders orders";
  }
}
@media (max-width: 768px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > .b-3, .bento > .b-4, .bento > .b-5, .bento > .b-6,
  .bento > .b-7, .bento > .b-8, .bento > .b-9, .bento > .b-12 { grid-column: span 2; }
  .bento-dashboard {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "stat1 stat1"
      "stat2 stat3"
      "stat4 stat4"
      "ring  ring"
      "line  line"
      "orders orders";
  }
  .bento-dashboard > * { grid-column: span 2 !important; }
}
@media (max-width: 480px) {
  .bento { grid-template-columns: 1fr; }
  .bento > * { grid-column: span 1 !important; }
  .bento-dashboard { grid-template-columns: 1fr; }
  .bento-dashboard > * { grid-column: span 1 !important; }
}