.vpsc-layout { display: flex; gap: 24px; align-items: flex-start; }
/* 右侧主区：必须占满剩余宽度，否则在卡片内容较短时整体塌缩 */
.vpsc-main { flex: 1 1 auto; min-width: 0; }
.vpsc-filters {
	width: 260px; flex: 0 0 260px; background: #fff; border: 1px solid #eee;
	border-radius: 10px; padding: 16px; position: sticky; top: 20px;
}
.vpsc-filter-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.vpsc-filter-head strong { font-size: 15px; }
.vpsc-reset {
	border: 1px solid #ddd; background: #f7f7f7; border-radius: 6px;
	padding: 4px 10px; cursor: pointer; font-size: 13px; color: #555;
	display: inline-flex; align-items: center; gap: 5px;
}
.vpsc-ico,
.vpsc-ico svg {
	width: 1em; height: 1em; display: inline-block; flex: 0 0 auto;
}
.vpsc-reset:hover { background: #eee; }
.vpsc-field { margin-bottom: 12px; }
.vpsc-field > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: #333; }
.vpsc-field select { width: 100%; padding: 7px 8px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; background: #fff; }
.vpsc-providers { display: flex; flex-wrap: wrap; gap: 6px 12px; max-height: 170px; overflow: auto; }
.vpsc-chk { font-size: 13px; display: flex; align-items: center; gap: 4px; }
.vpsc-summary { font-size: 14px; color: #666; margin-bottom: 14px; }
/* 桌面端固定每行 2 个卡片 */
.vpsc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.vpsc-card { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 16px; display: flex; flex-direction: column; }
.vpsc-card-prov { font-size: 12px; color: #2684e1; text-decoration: none; font-weight: 600; }
.vpsc-card-prov:hover { text-decoration: underline; }
.vpsc-card-name { font-size: 16px; font-weight: 700; margin: 2px 0 10px; color: #222; }
.vpsc-specs { list-style: none; padding: 0; margin: 0 0 12px; font-size: 13px; }
.vpsc-specs li { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed #f0f0f0; }
.vpsc-specs li span { color: #999; }
.vpsc-price { font-size: 18px; font-weight: 700; color: #aa9d88; margin-bottom: 12px; }
/* 按钮：使用主题默认按钮背景/文本色（global-color-14，hover 用 global-color-8） */
.vpsc-grid .vpsc-btn {
	display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--global-color-14); color: #fff;
	padding: 9px; border-radius: 7px; text-decoration: none; font-size: 14px; font-weight: 600;
}
.vpsc-grid .vpsc-btn:hover { background: var(--global-color-8); color: #fff; }
.vpsc-empty { color: #888; padding: 40px; text-align: center; grid-column: 1 / -1; }
@media (max-width: 768px) {
	.vpsc-layout { flex-direction: column; }
	.vpsc-filters { width: 100%; flex: none; position: static; }
	.vpsc-main { flex: none; min-width: 0; }
	.vpsc-grid { grid-template-columns: 1fr; }
}

.vpsc-grid .vpsc-btn svg { width: 15px; height: 15px; fill: currentColor; flex: none; }

/* 移动端：筛选区改为可折叠抽屉，优惠卡片优先展示，避免一屏被筛选面板占满 */
.vpsc-layout, .vpsc-layout * { box-sizing: border-box; max-width: 100%; }
.vpsc-filter-toggle { display: none; }
@media (max-width: 768px) {
  .vpsc-filters { display: none; }
  .vpsc-filters.open { display: block; }
  .vpsc-filter-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 11px; margin-bottom: 14px; background: var(--global-color-14); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
  .vpsc-filter-toggle .vpsc-caret { transition: transform .2s ease; }
  .vpsc-filter-toggle[aria-expanded="true"] .vpsc-caret { transform: rotate(180deg); }
}