* { box-sizing: border-box; }
body { margin: 0; font-family: "Microsoft YaHei", Arial, sans-serif; color: #222; background: #fff; }
.fk-banner { width: 100%; }
.fk-banner img { width: 100%; display: block; }
/* 筛选栏 */
.fk-filter-bar { max-width: 1360px; margin: 0 auto; padding: 24px 40px 0; }
.fk-filter-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; flex-wrap: wrap; }
.fk-filter-label { font-size: 15px; font-weight: 700; color: #333; white-space: nowrap; }
.fk-filter-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.fk-filter-tag { padding: 5px 18px; border-radius: 20px; font-size: 14px; cursor: pointer; color: #555; background: #f0f2f5; border: 1px solid transparent; transition: all .2s; user-select: none; }
.fk-filter-tag:hover { color: #1684ff; border-color: #1684ff; background: #f0f5ff; }
.fk-filter-tag.active { color: #fff; background: #1684ff; border-color: #1684ff; }
.fk-main { max-width: 1360px; margin: 42px auto 72px; padding: 0 40px; }
.fk-grid { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 20px; }
.fk-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.fk-page-btn { min-width: 36px; height: 36px; padding: 0 12px; border: 1px solid #d9e1ea; border-radius: 4px; background: #fff; color: #555; cursor: pointer; font-size: 14px; }
.fk-page-btn:hover:not(:disabled), .fk-page-btn.active { border-color: #1684ff; background: #1684ff; color: #fff; }
.fk-page-btn:disabled { color: #bbb; background: #f5f5f5; cursor: not-allowed; }
.fk-card { background: #f6fbff; cursor: pointer; transition: transform .2s, box-shadow .2s; overflow: hidden; }
.fk-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(25, 90, 150, .12); }
.fk-cover { height: 150px; background: #e9f6ff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fk-cover img { width: 100%; height: 100%; display: block;object-fit: contain; }
.fk-card-body { padding: 14px 12px 12px; min-height: 96px; }
.fk-card h3 { margin: 0; font-size: 17px; line-height: 24px; min-height: 48px; font-weight: 700; }
.fk-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: #777; font-size: 14px; }
.fk-card-foot strong, .fk-price { color: #ff2525; font-size: 18px; font-weight: 700; }
.fk-original { color: #999; text-decoration: line-through; }
.fk-card-foot span:last-child { margin-left: auto; }
.fk-empty { grid-column: 1 / -1; text-align: center; color: #888; padding: 80px 0; background: #f7f9fb; }
.fk-empty-small { color: #999; padding: 20px 0; font-size: 14px; }
.fk-detail-body { background: #eef0f5; }
.fk-detail-main { max-width: 1440px; margin: 0 auto; padding: 48px; }
.fk-breadcrumb { margin: -18px 0 20px; font-size: 18px; color: #333; }
.fk-breadcrumb span { color: #1684ff; cursor: pointer; }
.fk-breadcrumb em { margin: 0 8px; color: #999; font-style: normal; }
.fk-breadcrumb label { color: #333; }
.fk-detail-top { background: #fff; border-radius: 4px; padding: 28px 38px; display: flex; gap: 32px; min-height: 278px; }
.fk-cover-large { width: 240px; height: 240px; flex: 0 0 240px; border-radius: 8px; }
.fk-detail-info h1 { margin: 10px 0 18px; font-size: 30px; line-height: 42px; }
.fk-time, .fk-view { margin: 12px 0; color: #777; font-size: 18px; }
.fk-view-dot { display: inline-block; width: 18px; height: 18px; background: #2d8cff; border-radius: 50%; margin-right: 8px; vertical-align: -3px; }
.fk-price-line { margin-top: 34px; display: flex; align-items: center; gap: 16px; }
.fk-primary-btn { margin-top: 12px; width: 160px; height: 42px; border: none; border-radius: 22px; background: #3384ef; color: #fff; font-size: 18px; cursor: pointer; }
.fk-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 28px; margin-top: 24px; }
.fk-panel, .fk-side { background: #fff; border-radius: 4px; padding: 38px 28px; margin-bottom: 28px; }
.fk-panel h2, .fk-side h2 { margin: 0 0 28px; padding: 10px 16px; border-left: 4px solid #1684ff; background: #f2f6ff; color: #1684ff; font-size: 26px; }
.fk-content { min-height: 260px; font-size: 16px; line-height: 1.8; color: #333; }
.fk-recommend { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 20px; }
.fk-side { min-height: 740px; }
.fk-learned { display: flex; align-items: center; gap: 14px; cursor: pointer; margin-bottom: 18px; }
.fk-learned .fk-cover { width: 64px; height: 64px; flex: 0 0 64px; }
.fk-learned span { font-size: 16px; line-height: 24px; }
.fk-pay-mask { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.38); z-index: 9999; }
.fk-pay-mask.show { display: block; }
.fk-pay-dialog { width: 700px; background: #fff; border-radius: 6px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; }
.fk-pay-head { height: 48px; background: #f4f7fb; display: flex; justify-content: space-between; align-items: center; padding: 0 22px; font-size: 16px; }
.fk-pay-head button { border: none; background: transparent; font-size: 28px; color: #888; cursor: pointer; }
.fk-pay-body { text-align: center; padding: 30px 0; font-size: 16px; }
.fk-pay-money { color: #ff2525; font-size: 30px; font-weight: 700; margin: 12px 0 28px; }
.fk-pay-tabs { display: inline-flex; border: 1px solid #e1e1e1; border-radius: 4px; overflow: hidden; }
.fk-pay-tabs button { width: 126px; height: 36px; border: none; background: #fff; color: #666; cursor: pointer; }
.fk-pay-tabs button.active { background: #84c8ff; color: #fff; }
.fk-pay-qrcode-wrapper { margin-top: 24px; min-height: 220px; display: flex; justify-content: center; align-items: center; }
.fk-pay-qrcode-container { display: flex; justify-content: center; align-items: center; }
.fk-pay-qrcode-container img, .fk-pay-qrcode-container canvas { display: block; }
.fk-pay-tip { color: #666; margin-top: 12px; }
.alipay { border: 5px solid #00a1e9; padding: 10px; border-radius: 10px; }
.vxpay { border: 5px solid #57B74B; padding: 10px; border-radius: 10px; }
@media (max-width: 900px) {
    .fk-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
    .fk-detail-top, .fk-detail-layout { display: block; }
    .fk-cover-large { margin-bottom: 20px; }
    .fk-recommend { grid-template-columns: 1fr; }
}