.cn-length-showcase { display:grid; grid-template-columns:minmax(180px, 22%) minmax(0,1fr); gap:18px; align-items:stretch; }
.cn-length-visual { display:block; position:relative; align-self:center; aspect-ratio:3 / 5; min-height:0; overflow:hidden; border-radius:18px; }
.cn-length-visual img { display:block; position:absolute; inset:0; padding:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.cn-length-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.cn-length-grid .number-card { min-width:0; }
.cn-length-grid .number-card-top { padding:16px 14px 8px; }
.cn-length-grid .number-card-bottom { padding:8px 14px 16px; }
.cn-length-grid .qq-number { font-size:26px; }
.cn-length-grid .empty-state { grid-column:1/-1; padding:40px 20px; }
body[data-cn-home] #home-news-list:not(:has(a)) { display:none; }
body[data-cn-home] .site-notices { background:#101e30; border-bottom-color:rgba(216,187,122,.2); }
body[data-cn-home] .site-notice { color:#e4eaf2; }
body[data-cn-home] .site-notice strong { color:#e2c57c; background:rgba(216,187,122,.12); }
body[data-cn-home] .site-notice small { color:#aebcd0; }
@media(max-width:1100px) { .cn-length-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:700px) { .cn-length-showcase { grid-template-columns:1fr; } .cn-length-visual { height:auto; } .cn-length-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .cn-length-grid .qq-number { font-size:24px; } }

@media(max-width:700px) {
  .cn-length-grid[data-home-length="6"] > .number-card:nth-child(n+7),
  .cn-length-grid[data-home-length="7"] > .number-card:nth-child(n+7) { display:none; }
  .cn-length-visual { display:none; }
  .cn-length-grid .number-header { display:block; }
  .cn-length-grid .number-header .favorite { position:absolute; right:10px; bottom:10px; }
  .cn-length-grid .number-card-top { position:static; }
  .cn-length-grid .qq-number { font-size:22px; letter-spacing:0; }
}

/* mobile-card-paint-compat: avoid gradient/shadow/hover compositing on touch cards. */
@media (max-width:700px) {
  body[data-cn-home] .cn-length-grid .number-card,
  body[data-cn-home] .cn-length-grid .number-card:hover,
  body[data-cn-home] .cn-length-grid .number-card:active {
    background: #112237 !important;
    border-color: #304155 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
  }
  body[data-cn-home] .cn-length-grid .number-card-top,
  body[data-cn-home] .cn-length-grid .number-card-bottom { background: transparent; }
}