和
。
第 7 版改的是版式：
1. 平台列表整块放在浅灰底板上，每张卡片白底、实线外框、之间留 16px 空隙；桌面不再用细线分行。
2. 评级颜色落在卡片的“评级带”上：手机和平板是卡片顶部的浅色带，桌面是卡片左侧的竖栏。
3. 桌面卡片分上下两段：上段是标志、名称、简介和按钮；下段左边牌照、右边核验信息；
持牌地区单独占一整行，展开后两个地区并排，不再挤在窄栏里。
4. 正文行宽统一用 --bxl-measure；须知两段在桌面并排；评级说明改成一级一行；
常见问题和表格一样铺满内容区，右边缘对齐。
第 8 版：支持“精简卡片”。卡片里没有 bxl-licenses、bxl-regions、bxl-facts 三块时，
自动去掉这几行留下的空白和分隔线；按钮块 bxl-actions 也可以省略。
补上这三块后，卡片自动恢复完整版式，不用改 class。
判断用的是 :has()，不支持的旧浏览器只会多出几行空白，内容照常显示。
第 9 版：标点保持全角（见 #bxl-top 里的 text-spacing-trim）。
另外，页面必须有 和 viewport 声明（放进 WordPress 时通常由主题提供），
否则手机浏览器会按约 980px 宽排版再整体缩小，手机版式不会生效。
第 10 版：标志框改成 2:1 并放大（手机和平板 120×60，桌面 144×72）。
尺寸只在 .bxl-row 的 --bxl-logo-w / --bxl-logo-h 两处设置，网格列宽和顶部色带高度跟着变。
*/
/* ---------- 重置：抵消主题样式（优先级 1,0,0，低于下面所有组件规则） ---------- */
#bxl-top :where(h1, h2, h3, p, ul, ol, li, dl, dt, dd, table, figure, details, summary) {
margin: 0;
padding: 0;
}
#bxl-top :where(h1, h2, h3) {
border: 0;
background: none;
font-family: inherit;
letter-spacing: normal;
text-transform: none;
text-shadow: none;
}
#bxl-top :where(h1, h2, h3, li)::before,
#bxl-top :where(h1, h2, h3, li)::after {
content: none;
}
#bxl-top :where(ul, ol, li) {
list-style: none;
background: none;
}
#bxl-top :where(a) {
border: 0;
background-image: none;
box-shadow: none;
transition: none;
}
#bxl-top :where(img) {
display: inline-block;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
vertical-align: middle;
}
#bxl-top :where(table, thead, tbody, tr, th, td) {
border: 0;
background: none;
}
#bxl-top :where(dt) {
font-weight: inherit;
}
#bxl-top :where(p, li, dd, dt, td, th, summary) {
font-size: inherit;
line-height: inherit;
color: inherit;
}
/* WordPress 的 wpautop 会在换行处插入
和
，破坏网格布局 */
#bxl-top br {
display: none;
}
#bxl-top p:empty {
display: none;
}
#bxl-top :is(.bxl-row, .bxl-actions, .bxl-grade, .bxl-logo, .bxl-list, .bxl-facts, .bxl-region, .bxl-region-info) > p {
display: contents;
}
#bxl-top {
--bxl-ink: #14213d;
--bxl-text: #2b3448;
--bxl-muted: #5c667a;
--bxl-line: #d8dde6; /* 卡片内部的分隔线 */
--bxl-edge: #c3cbd8; /* 卡片外框，比内部分隔线深一档 */
--bxl-surface: #f4f6f9;
--bxl-tray: #e9edf3; /* 平台列表的底板 */
--bxl-link: #1b4fa8;
--bxl-g-aplus: #0b6e4f;
--bxl-g-a: #1f7a8c;
--bxl-g-b: #94610f;
--bxl-g-c: #a63d2f;
--bxl-g-nr: #7a8496;
/* 评级色的浅色版（10% 色 + 90% 白），直接写成色值，不依赖 color-mix() */
--bxl-t-aplus: #e7f0ed;
--bxl-t-a: #e9f2f4;
--bxl-t-b: #f4efe7;
--bxl-t-c: #f6ecea;
--bxl-t-nr: #f2f3f4;
--bxl-todo: #ffe58a;
/* 正文最大行宽，用 px 写死，让不同字号的段落右边缘对齐（16px 字号约 52 个汉字一行） */
--bxl-measure: 832px;
max-width: 1088px;
margin-inline: auto;
color: var(--bxl-text);
font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
font-size: 16px;
line-height: 1.75;
text-align: left;
-webkit-text-size-adjust: 100%;
overflow-wrap: anywhere;
/*
标点保持全角。标准模式下 Chrome 默认压缩行首行尾的全角标点，
遇到带内边距的行内高亮（如待填占位），行尾的“】”会伸出文字栏约 9px。
*/
text-spacing-trim: space-all;
container: bxl / inline-size;
}
#bxl-top *,
#bxl-top *::before,
#bxl-top *::after {
box-sizing: border-box;
}
#bxl-top p,
#bxl-top ul,
#bxl-top dl,
#bxl-top dd,
#bxl-top h1,
#bxl-top h2,
#bxl-top h3 {
margin: 0;
padding: 0;
}
#bxl-top ul {
list-style: none;
}
/* 避免段落最后一行只剩一两个字（不支持的浏览器会忽略） */
#bxl-top p,
#bxl-top li,
#bxl-top dd {
text-wrap: pretty;
}
#bxl-top img {
max-width: 100%;
height: auto;
border: 0;
}
#bxl-top a {
color: var(--bxl-link);
text-decoration: underline;
text-underline-offset: 0.18em;
}
#bxl-top a:hover {
color: var(--bxl-ink);
}
#bxl-top a:focus-visible,
#bxl-top summary:focus-visible {
outline: 3px solid var(--bxl-link);
outline-offset: 2px;
}
/* 未填写的占位内容，故意做得显眼，避免带着占位符上线 */
#bxl-top .bxl-todo {
background: var(--bxl-todo);
color: #4a3800;
padding: 0 0.15em;
}
/* 评级颜色：图例和记录行共用；--bxl-gt 是同色的浅底 */
#bxl-top [data-grade="A+"] { --bxl-g: var(--bxl-g-aplus); --bxl-gt: var(--bxl-t-aplus); }
#bxl-top [data-grade="A"] { --bxl-g: var(--bxl-g-a); --bxl-gt: var(--bxl-t-a); }
#bxl-top [data-grade="B+"] { --bxl-g: var(--bxl-g-b); --bxl-gt: var(--bxl-t-b); }
#bxl-top [data-grade="C"] { --bxl-g: var(--bxl-g-c); --bxl-gt: var(--bxl-t-c); }
#bxl-top [data-grade="NR"] { --bxl-g: var(--bxl-g-nr); --bxl-gt: var(--bxl-t-nr); }
/* ---------- 页头 ---------- */
#bxl-top .bxl-head {
padding-block: 24px 20px;
}
#bxl-top .bxl-title {
color: var(--bxl-ink);
font-size: 28px;
font-size: clamp(26px, 19.2px + 2.4cqi, 42px);
font-weight: 800;
line-height: 1.3;
letter-spacing: -0.01em;
max-width: 24em;
text-wrap: balance;
}
/* 导语两行时上下行等长，避免第二行只剩几个字 */
#bxl-top .bxl-lede {
margin-top: 12px;
max-width: var(--bxl-measure);
font-size: 17px;
text-wrap: balance;
}
#bxl-top .bxl-meta {
margin-top: 8px;
color: var(--bxl-muted);
font-size: 14px;
}
/* 头图：用 aspect-ratio 预留空间，图片加载前后页面不跳动 */
#bxl-top .bxl-hero {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 6;
margin-top: 20px;
border-radius: 8px;
object-fit: cover;
background: var(--bxl-surface);
}
/* ---------- 须知 ---------- */
#bxl-top .bxl-notice {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 14px;
align-items: start;
padding: 16px;
border: 1px solid var(--bxl-line);
border-radius: 8px;
background: var(--bxl-surface);
}
#bxl-top .bxl-notice p {
max-width: var(--bxl-measure);
font-size: 14px;
line-height: 1.7;
}
#bxl-top .bxl-notice p + p {
margin-top: 8px;
}
#bxl-top .bxl-age {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 2px solid var(--bxl-ink);
border-radius: 50%;
color: var(--bxl-ink);
font-size: 13px;
font-weight: 800;
line-height: 1;
}
/* 只给读屏软件看的文字 */
#bxl-top .bxl-vh {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* ---------- 通用二级标题 ---------- */
#bxl-top .bxl-h2 {
color: var(--bxl-ink);
font-size: 21px;
font-weight: 800;
line-height: 1.35;
text-wrap: balance;
}
/* ---------- 评级图例（默认收起，少占一屏） ---------- */
#bxl-top .bxl-legend {
margin-top: 16px;
border: 1px solid var(--bxl-edge);
border-radius: 8px;
background: #fff;
}
#bxl-top .bxl-legend summary,
#bxl-top .bxl-faq summary {
position: relative;
display: block;
min-height: 48px;
padding: 12px 44px 12px 16px;
color: var(--bxl-ink);
font-weight: 700;
line-height: 1.5;
cursor: pointer;
list-style: none;
}
#bxl-top .bxl-legend summary::-webkit-details-marker,
#bxl-top .bxl-faq summary::-webkit-details-marker {
display: none;
}
#bxl-top .bxl-legend summary::after,
#bxl-top .bxl-faq summary::after {
content: "+";
position: absolute;
right: 16px;
top: 8px;
font-size: 24px;
font-weight: 400;
line-height: 1.4;
}
#bxl-top .bxl-legend[open] summary::after,
#bxl-top .bxl-faq details[open] summary::after {
content: "\2212";
}
#bxl-top .bxl-legend dl {
display: grid;
padding: 0 16px 8px;
border-top: 1px solid var(--bxl-line);
}
#bxl-top .bxl-legend dl > div {
padding-block: 12px;
}
#bxl-top .bxl-legend dl > div + div {
border-top: 1px dotted var(--bxl-line);
}
#bxl-top .bxl-legend dt {
display: flex;
align-items: center;
gap: 8px;
color: var(--bxl-g);
font-weight: 800;
white-space: nowrap;
}
#bxl-top .bxl-legend dt img {
width: 36px;
height: 36px;
object-fit: contain;
}
#bxl-top .bxl-legend dd {
margin-top: 4px;
font-size: 15px;
line-height: 1.65;
}
/* ---------- 平台列表：整块放在浅灰底板上 ---------- */
#bxl-top .bxl-ops {
margin-top: 32px;
padding: 16px 10px 12px;
border-radius: 10px;
background: var(--bxl-tray);
}
#bxl-top .bxl-ops-title {
padding-inline: 6px;
}
#bxl-top .bxl-empty {
margin: 16px 6px 4px;
padding: 2px 0 2px 14px;
max-width: var(--bxl-measure);
border-left: 3px solid var(--bxl-edge);
color: var(--bxl-text);
font-size: 14px;
line-height: 1.7;
}
/* ---------- 平台卡片：手机和平板 ---------- */
#bxl-top .bxl-list {
display: grid;
gap: 12px;
margin-top: 12px;
}
/*
标志框尺寸（2:1）。改大小只改这两个变量，第一列宽度和顶部色带高度会跟着变。
卡片顶部的评级浅色带高度 = 上内边距 16px + 标志高 + 8px。
*/
#bxl-top .bxl-row {
--bxl-logo-w: 120px;
--bxl-logo-h: 60px;
display: grid;
grid-template-columns: var(--bxl-logo-w) minmax(0, 1fr);
grid-template-areas:
"logo grade"
"main main"
"licenses licenses"
"regions regions"
"facts facts"
"actions actions";
gap: 14px 12px;
align-items: start;
padding: 16px;
border: 1px solid var(--bxl-edge);
border-top: 4px solid var(--bxl-g);
border-radius: 8px;
background: #fff linear-gradient(var(--bxl-gt), var(--bxl-gt)) left top / 100% calc(var(--bxl-logo-h) + 24px) no-repeat;
box-shadow: 0 1px 2px rgba(20, 33, 61, 0.06);
}
#bxl-top .bxl-logo {
grid-area: logo;
display: grid;
place-items: center;
width: var(--bxl-logo-w);
height: var(--bxl-logo-h);
padding: 5px 8px;
border: 1px solid var(--bxl-line);
border-radius: 6px;
background: #fff;
overflow: hidden;
}
#bxl-top .bxl-logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* 白色透明底的 logo 用深色底 */
#bxl-top .bxl-logo--dark {
border-color: var(--bxl-ink);
background: var(--bxl-ink);
}
/* 还没有 logo 的平台：显示缩写 */
#bxl-top .bxl-logo--text {
color: var(--bxl-ink);
font-size: 18px;
font-weight: 800;
letter-spacing: 0.02em;
}
#bxl-top .bxl-main {
grid-area: main;
min-width: 0;
padding-top: 8px;
}
#bxl-top .bxl-name {
color: var(--bxl-ink);
font-size: 18px;
font-weight: 700;
line-height: 1.4;
}
#bxl-top .bxl-name [lang="en"] {
color: var(--bxl-muted);
font-weight: 500;
}
#bxl-top .bxl-name .bxl-name-main {
color: var(--bxl-ink);
font-weight: 700;
}
#bxl-top .bxl-desc {
margin-top: 4px;
font-size: 15px;
line-height: 1.65;
}
/* 手机和平板：评级放在色带右侧，币在右、文字在左 */
#bxl-top .bxl-grade {
grid-area: grade;
display: flex;
flex-direction: row-reverse;
align-items: center;
gap: 8px;
align-self: center;
justify-self: end;
}
#bxl-top .bxl-grade img,
#bxl-top .bxl-grade-none {
width: 44px;
height: 44px;
}
#bxl-top .bxl-grade img {
object-fit: contain;
}
#bxl-top .bxl-grade-none {
display: grid;
place-items: center;
border: 2px dashed var(--bxl-g);
border-radius: 50%;
color: var(--bxl-g);
font-size: 18px;
font-weight: 700;
line-height: 1;
}
#bxl-top .bxl-grade-text {
color: var(--bxl-g);
font-size: 14px;
font-weight: 800;
line-height: 1.3;
white-space: nowrap;
}
/* ---------- 牌照标签与持牌地区 ---------- */
#bxl-top .bxl-licenses {
grid-area: licenses;
padding-top: 12px;
border-top: 1px solid var(--bxl-line);
}
#bxl-top .bxl-licenses-title {
display: block;
color: var(--bxl-muted);
font-size: 13px;
font-weight: 700;
line-height: 1.4;
}
#bxl-top .bxl-license-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
#bxl-top .bxl-license-tags li {
padding: 4px 10px;
border: 1px solid var(--bxl-g);
border-radius: 999px;
background: var(--bxl-gt, var(--bxl-surface));
color: var(--bxl-g);
font-size: 13px;
font-weight: 700;
line-height: 1.35;
white-space: nowrap;
}
#bxl-top .bxl-regions {
grid-area: regions;
border-top: 1px solid var(--bxl-line);
}
#bxl-top .bxl-regions-title {
position: relative;
display: flex;
align-items: center;
min-height: 44px;
padding: 8px 40px 8px 0;
color: var(--bxl-muted);
font-size: 13px;
font-weight: 700;
line-height: 1.4;
cursor: pointer;
list-style: none;
}
#bxl-top .bxl-regions-title:hover {
color: var(--bxl-ink);
}
#bxl-top .bxl-regions-title::-webkit-details-marker {
display: none;
}
#bxl-top .bxl-regions-title::after {
content: "+";
position: absolute;
right: 4px;
top: 4px;
color: var(--bxl-ink);
font-size: 24px;
font-weight: 400;
line-height: 1.4;
}
#bxl-top .bxl-regions[open] .bxl-regions-title::after {
content: "\2212";
}
#bxl-top .bxl-regions ul {
display: grid;
gap: 8px;
padding-bottom: 4px;
}
#bxl-top .bxl-region {
display: block;
padding: 10px 12px;
border: 1px solid var(--bxl-line);
border-radius: 6px;
background: var(--bxl-surface);
}
#bxl-top .bxl-region strong {
display: block;
color: var(--bxl-ink);
font-size: 15px;
font-weight: 700;
line-height: 1.45;
}
#bxl-top .bxl-region-lic,
#bxl-top .bxl-region-note {
display: block;
color: var(--bxl-muted);
font-size: 13px;
line-height: 1.6;
}
#bxl-top .bxl-region-note {
margin-top: 2px;
color: var(--bxl-text);
}
#bxl-top .bxl-facts {
grid-area: facts;
border-top: 1px solid var(--bxl-line);
}
#bxl-top .bxl-facts > div {
display: grid;
grid-template-columns: 4.75em minmax(0, 1fr);
gap: 12px;
padding-block: 8px;
border-bottom: 1px dotted var(--bxl-line);
font-size: 15px;
line-height: 1.6;
}
#bxl-top .bxl-facts > div:last-child {
border-bottom: 0;
padding-bottom: 0;
}
#bxl-top .bxl-facts dt {
color: var(--bxl-muted);
}
#bxl-top .bxl-actions {
grid-area: actions;
display: grid;
gap: 8px;
}
/* 精简卡片：没有牌照、持牌地区和核验信息时，只排标志、评级、名称，按钮（如果有）紧跟其后 */
#bxl-top .bxl-row:not(:has(.bxl-licenses, .bxl-regions, .bxl-facts)) {
grid-template-areas:
"logo grade"
"main main";
}
#bxl-top .bxl-row:not(:has(.bxl-licenses, .bxl-regions, .bxl-facts)) > .bxl-actions {
grid-area: auto / 1 / auto / -1;
}
/* 按钮高度 48px，方便拇指点按 */
#bxl-top .bxl-btn {
display: flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 8px 14px;
border: 1px solid var(--bxl-ink);
border-radius: 6px;
background: #fff;
color: var(--bxl-ink);
font-size: 15px;
font-weight: 700;
line-height: 1.35;
text-align: center;
text-decoration: none;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
#bxl-top .bxl-btn:hover,
#bxl-top .bxl-btn:active {
background: var(--bxl-surface);
}
#bxl-top .bxl-btn--primary {
background: var(--bxl-ink);
color: #fff;
}
#bxl-top .bxl-btn--primary:hover,
#bxl-top .bxl-btn--primary:active {
background: #0c1529;
color: #fff;
}
#bxl-top .bxl-btn--disabled {
border-color: var(--bxl-line);
background: var(--bxl-surface);
color: var(--bxl-muted);
cursor: not-allowed;
}
#bxl-top .bxl-btn--disabled:hover {
background: var(--bxl-surface);
}
/* ---------- 收录标准、下架、常见问题、求助：每节上方一条分隔线 ---------- */
#bxl-top .bxl-criteria,
#bxl-top .bxl-delisted,
#bxl-top .bxl-faq,
#bxl-top .bxl-help {
margin-top: 40px;
padding-top: 28px;
border-top: 1px solid var(--bxl-line);
}
#bxl-top .bxl-criteria ul,
#bxl-top .bxl-help ul {
margin-top: 14px;
max-width: var(--bxl-measure);
}
#bxl-top .bxl-criteria li,
#bxl-top .bxl-help li {
position: relative;
padding-left: 18px;
}
#bxl-top .bxl-criteria li + li,
#bxl-top .bxl-help li + li {
margin-top: 10px;
}
#bxl-top .bxl-criteria li::before,
#bxl-top .bxl-help li::before {
content: "";
position: absolute;
left: 0;
top: 0.8em;
width: 8px;
height: 2px;
background: var(--bxl-ink);
}
#bxl-top .bxl-criteria > p,
#bxl-top .bxl-delisted > p,
#bxl-top .bxl-help > p {
margin-top: 14px;
max-width: var(--bxl-measure);
}
#bxl-top table {
width: 100%;
margin-top: 14px;
border-collapse: collapse;
font-size: 15px;
line-height: 1.6;
}
#bxl-top th,
#bxl-top td {
padding: 10px 12px 10px 0;
border-bottom: 1px solid var(--bxl-line);
text-align: left;
vertical-align: top;
}
#bxl-top th {
border-bottom: 2px solid var(--bxl-ink);
color: var(--bxl-ink);
font-weight: 700;
white-space: nowrap;
}
/* ---------- 常见问题：和表格一样铺满内容区 ---------- */
#bxl-top .bxl-faq details {
border-bottom: 1px solid var(--bxl-line);
}
#bxl-top .bxl-faq details:first-of-type {
margin-top: 14px;
border-top: 1px solid var(--bxl-line);
}
#bxl-top .bxl-faq summary {
padding-left: 0;
}
#bxl-top .bxl-faq summary:hover {
color: var(--bxl-link);
}
#bxl-top .bxl-faq summary::after {
right: 4px;
}
#bxl-top .bxl-faq details p {
padding-bottom: 16px;
max-width: var(--bxl-measure);
}
/* ---------- 页尾 ---------- */
#bxl-top .bxl-back {
margin-top: 40px;
padding-top: 12px;
border-top: 3px solid var(--bxl-ink);
font-size: 15px;
}
#bxl-top .bxl-back a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* ---------- 较宽的手机：按钮并排 ---------- */
@container bxl (min-width: 380px) {
#bxl-top .bxl-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ---------- 平板 ---------- */
@container bxl (min-width: 600px) {
#bxl-top .bxl-hero {
aspect-ratio: 16 / 5;
}
#bxl-top .bxl-notice {
padding: 20px 24px;
}
#bxl-top .bxl-notice p {
font-size: 15px;
}
/* 评级说明：一级一行，左边级别，右边说明 */
#bxl-top .bxl-legend dl > div {
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
gap: 16px;
align-items: center;
}
#bxl-top .bxl-legend dd {
margin-top: 0;
}
#bxl-top .bxl-ops {
padding: 20px 16px 16px;
}
#bxl-top .bxl-ops-title,
#bxl-top .bxl-empty {
margin-inline: 4px;
}
#bxl-top .bxl-ops-title {
padding-inline: 0;
}
#bxl-top .bxl-list {
gap: 16px;
margin-top: 16px;
}
}
/* ---------- 内容区 704px 以上：卡片排两列 ---------- */
@container bxl (min-width: 704px) {
#bxl-top .bxl-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
}
/* 同一行的两张卡片等高，按钮都贴在卡片底部 */
#bxl-top .bxl-row {
grid-template-rows: auto auto auto auto 1fr auto;
}
#bxl-top .bxl-actions {
align-self: end;
}
/* 精简卡片：多出的高度给简介这一行，按钮仍然贴在底部，和旁边卡片的按钮对齐 */
#bxl-top .bxl-row:not(:has(.bxl-licenses, .bxl-regions, .bxl-facts)) {
grid-template-rows: auto 1fr;
}
}
/* ---------- 桌面：卡片横排，上下两段 ---------- */
/*
桌面卡片的网格：
┌────────┬──────┬──────────────────────────────┬──────────┐
│ │ 标志 │ 名称、简介 │ 两个按钮 │
│ 评级 ├──────┴──────────────┬───────────────┴──────────┤
│ 竖栏 │ 博彩牌照 │ 核验日期 / 出款实测 / 投诉 │
│ ├─────────────────────┴──────────────────────────┤
│ │ 持牌地区（展开后两列并排） │
└────────┴────────────────────────────────────────────────┘
左侧竖栏宽 112px；改宽度时同步改 background-size 里的 112px。
*/
@container bxl (min-width: 928px) {
#bxl-top .bxl-head {
padding-block: 40px 28px;
}
#bxl-top .bxl-lede {
font-size: 18px;
}
#bxl-top .bxl-notice {
gap: 20px;
}
/* 须知两段并排，每段约 30 个字一行，不再只占左边 60% */
#bxl-top .bxl-notice > div {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px;
}
#bxl-top .bxl-notice p + p {
margin-top: 0;
}
#bxl-top .bxl-ops {
margin-top: 40px;
padding: 24px;
}
/* 桌面每张卡片独占一行 */
#bxl-top .bxl-list {
grid-template-columns: minmax(0, 1fr);
}
#bxl-top .bxl-ops-title,
#bxl-top .bxl-empty {
margin-inline: 0;
}
#bxl-top .bxl-row {
--bxl-logo-w: 144px;
--bxl-logo-h: 72px;
grid-template-columns: 112px var(--bxl-logo-w) minmax(0, 1.5fr) minmax(0, 1fr) auto;
grid-template-areas:
"grade logo main main actions"
"grade licenses licenses facts facts"
"grade regions regions regions regions";
grid-template-rows: auto auto auto;
gap: 18px 24px;
padding: 24px 24px 6px 0;
border-top: 1px solid var(--bxl-edge);
border-left: 4px solid var(--bxl-g);
background:
linear-gradient(var(--bxl-line), var(--bxl-line)) 112px 0 / 1px 100% no-repeat,
linear-gradient(var(--bxl-gt), var(--bxl-gt)) left top / 112px 100% no-repeat,
#fff;
}
/* 上段和下段之间的分隔线：从标志左边一直到卡片右内边距 */
#bxl-top .bxl-row::before {
content: "";
grid-column: 2 / -1;
grid-row: 2;
align-self: start;
height: 0;
border-top: 1px solid var(--bxl-line);
pointer-events: none;
}
#bxl-top .bxl-logo {
padding: 6px 10px;
}
#bxl-top .bxl-logo--text {
font-size: 20px;
}
#bxl-top .bxl-main {
align-self: center;
padding-top: 0;
}
#bxl-top .bxl-name {
font-size: 20px;
}
#bxl-top .bxl-grade {
flex-direction: column;
justify-self: center;
align-self: start;
gap: 6px;
}
#bxl-top .bxl-grade img,
#bxl-top .bxl-grade-none {
width: 56px;
height: 56px;
}
#bxl-top .bxl-grade-text {
font-size: 15px;
}
#bxl-top .bxl-licenses {
padding-top: 18px;
border-top: 0;
}
#bxl-top .bxl-facts {
padding-top: 10px;
border-top: 0;
}
#bxl-top .bxl-facts > div {
grid-template-columns: 5em minmax(0, 1fr);
padding-block: 6px;
}
#bxl-top .bxl-regions ul {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding-bottom: 18px;
}
#bxl-top .bxl-actions {
grid-template-columns: repeat(2, 124px);
align-self: center;
}
#bxl-top .bxl-btn {
min-height: 44px;
}
/* 精简卡片：只有上段一行（评级竖栏、标志、名称简介、按钮），不画上下段分隔线 */
#bxl-top .bxl-row:not(:has(.bxl-licenses, .bxl-regions, .bxl-facts)) {
grid-template-areas: "grade logo main main actions";
grid-template-rows: auto;
align-items: center;
padding-bottom: 24px;
}
#bxl-top .bxl-row:not(:has(.bxl-licenses, .bxl-regions, .bxl-facts))::before {
content: none;
}
#bxl-top .bxl-row:not(:has(.bxl-licenses, .bxl-regions, .bxl-facts)) > .bxl-actions {
grid-area: actions;
}
#bxl-top .bxl-row:not(:has(.bxl-licenses, .bxl-regions, .bxl-facts)) > .bxl-grade {
align-self: center;
}
#bxl-top .bxl-criteria,
#bxl-top .bxl-delisted,
#bxl-top .bxl-faq,
#bxl-top .bxl-help {
margin-top: 48px;
padding-top: 36px;
}
#bxl-top .bxl-back {
margin-top: 48px;
}
}
@media print {
#bxl-top .bxl-actions,
#bxl-top .bxl-back {
display: none;
}
#bxl-top .bxl-ops {
padding: 0;
background: none;
}
#bxl-top .bxl-row {
box-shadow: none;
break-inside: avoid;
}
}