/* ==========================================================================
   版本二：极简杂志卡片与独立品牌行动舱风 (Editorial Minimalist & Action Pod)
   ========================================================================== */

#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;
}

#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: #111827;
  --bxl-text: #374151;
  --bxl-muted: #6b7280;
  --bxl-line: #e5e7eb;
  --bxl-edge: #d1d5db;
  --bxl-surface: #f9fafb;
  --bxl-tray: #f3f4f6;
  --bxl-link: #1d4ed8;

  /* 评级颜色 */
  --bxl-g-aplus: #047857;
  --bxl-g-a: #0369a1;
  --bxl-g-b: #b45309;
  --bxl-g-c: #b91c1c;
  --bxl-g-nr: #6b7280;
  --bxl-t-aplus: #ecfdf5;
  --bxl-t-a: #f0f9ff;
  --bxl-t-b: #fffbeb;
  --bxl-t-c: #fef2f2;
  --bxl-t-nr: #f3f4f6;

  /* 默认品牌色 */
  --brand: #111827;
  --brand-hover: #000000;
  --brand-soft: #f3f4f6;
  --brand-border: #d1d5db;

  --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.7;
  text-align: left;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: anywhere;
  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 li,
#bxl-top dd {
  text-wrap: pretty;
}

#bxl-top img {
  max-width: 100%;
  height: auto;
}

#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 .bxl-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 评级颜色映射 ---------- */
#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 [data-brand="betvictor"] { --brand: #005587; --brand-hover: #003e63; --brand-soft: #f0f7fc; --brand-border: #bce0f5; }
#bxl-top [data-brand="betway"]    { --brand: #00882b; --brand-hover: #006620; --brand-soft: #eefaf2; --brand-border: #b7e8c6; }
#bxl-top [data-brand="whill"]     { --brand: #002b5c; --brand-hover: #001a38; --brand-soft: #f0f4f9; --brand-border: #bdcfe6; }
#bxl-top [data-brand="pinnacle"]  { --brand: #e04f00; --brand-hover: #b84000; --brand-soft: #fff4ed; --brand-border: #fbd2ba; }
#bxl-top [data-brand="bwin"]      { --brand: #b8860b; --brand-hover: #8f6807; --brand-soft: #fef9ec; --brand-border: #edd79a; }
#bxl-top [data-brand="dafa"]      { --brand: #b5121b; --brand-hover: #8f0d15; --brand-soft: #fdf1f2; --brand-border: #f3c3c6; }
#bxl-top [data-brand="ysb"]       { --brand: #512b81; --brand-hover: #3a1d5e; --brand-soft: #f6f1fb; --brand-border: #d9c8ed; }
#bxl-top [data-brand="esball"]    { --brand: #c92a2a; --brand-hover: #a61e1e; --brand-soft: #fef2f2; --brand-border: #f5c4c4; }
#bxl-top [data-brand="m88"]       { --brand: #154587; --brand-hover: #0d2f5e; --brand-soft: #f0f5fb; --brand-border: #c2d5ee; }
#bxl-top [data-brand="bet365"]    { --brand: #026b4e; --brand-hover: #014d38; --brand-soft: #edf8f4; --brand-border: #b5e0d3; }
#bxl-top [data-brand="paddypower"]{ --brand: #006847; --brand-hover: #004b33; --brand-soft: #edf7f3; --brand-border: #b6e0d1; }
#bxl-top [data-brand="ladbrokes"] { --brand: #d61f26; --brand-hover: #ad161c; --brand-soft: #fef1f1; --brand-border: #f5c2c4; }
#bxl-top [data-brand="sportsbet"] { --brand: #0054a6; --brand-hover: #003d7a; --brand-soft: #eef5fc; --brand-border: #bcd6f0; }
#bxl-top [data-brand="tab"]       { --brand: #00703c; --brand-hover: #00522b; --brand-soft: #edf7f2; --brand-border: #b7e0cc; }
#bxl-top [data-grade="C"]         { --brand: #6b7280; --brand-hover: #4b5563; --brand-soft: #f9fafb; --brand-border: #e5e7eb; }

/* ---------- 页头、须知与图例 ---------- */
#bxl-top .bxl-head {
  padding-block: 24px 20px;
}

#bxl-top .bxl-lede {
  max-width: var(--bxl-measure);
  color: var(--bxl-ink);
  font-size: 17px;
  font-weight: 600;
}

#bxl-top .bxl-meta {
  margin-top: 6px;
  color: var(--bxl-muted);
  font-size: 14px;
}

#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;
}

#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;
}

#bxl-top .bxl-h2 {
  color: var(--bxl-ink);
  font-size: 21px;
  font-weight: 800;
}

#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;
  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: 22px;
}

#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: 4px 16px 12px;
  border-top: 1px solid var(--bxl-line);
}

#bxl-top .bxl-legend dl > div {
  padding-block: 10px;
}

#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;
}

#bxl-top .bxl-legend dt img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* ---------- 平台列表 ---------- */
#bxl-top .bxl-ops {
  margin-top: 28px;
}

#bxl-top .bxl-list {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

/* 卡片：顶部 4px 品牌色横条 + 极简白底 */
#bxl-top .bxl-row {
  --bxl-logo-w: 116px;
  --bxl-logo-h: 58px;
  display: grid;
  grid-template-columns: var(--bxl-logo-w) minmax(0, 1fr);
  grid-template-areas:
    "logo     grade"
    "main     main"
    "licenses licenses"
    "facts    facts"
    "regions  regions"
    "actions  actions";
  gap: 12px 16px;
  padding: 18px;
  border: 1px solid var(--bxl-edge);
  border-top: 4px solid var(--brand);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#bxl-top .bxl-row[data-grade="C"] {
  opacity: 0.72;
  background: var(--bxl-surface);
}

#bxl-top .bxl-logo {
  grid-area: logo;
  display: grid;
  place-items: center;
  width: var(--bxl-logo-w);
  height: var(--bxl-logo-h);
  padding: 6px 10px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background: var(--brand-soft);
}

#bxl-top .bxl-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#bxl-top .bxl-main {
  grid-area: main;
  min-width: 0;
}

#bxl-top .bxl-name {
  color: var(--bxl-ink);
  font-size: 18.5px;
  font-weight: 800;
  line-height: 1.35;
}

#bxl-top .bxl-name [lang="en"] {
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 13.5px;
  font-weight: 700;
}

#bxl-top .bxl-name .bxl-name-main {
  padding: 0;
  background: none;
  color: var(--bxl-ink);
  font-size: 18.5px;
  font-weight: 800;
}

#bxl-top .bxl-desc {
  margin-top: 4px;
  color: var(--bxl-text);
  font-size: 14.5px;
  line-height: 1.6;
}

#bxl-top .bxl-grade {
  grid-area: grade;
  justify-self: end;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
}

#bxl-top .bxl-grade img,
#bxl-top .bxl-grade-none {
  width: 38px;
  height: 38px;
}

#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: 15px;
  font-weight: 800;
}

#bxl-top .bxl-grade-text {
  color: var(--bxl-g);
  font-size: 14px;
  font-weight: 800;
}

/* ---------- 紧凑内联信息条（牌照 + 实测数据） ---------- */
#bxl-top .bxl-licenses {
  grid-area: licenses;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

#bxl-top .bxl-licenses-title {
  color: var(--bxl-muted);
  font-size: 12.5px;
  font-weight: 600;
}

#bxl-top .bxl-licenses-title::after {
  content: "：";
}

#bxl-top .bxl-license-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

#bxl-top .bxl-license-tags li {
  padding: 1px 8px;
  border-radius: 4px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
}

/* 实测数据改为横向紧凑行内排布，用竖线分隔 */
#bxl-top .bxl-facts {
  grid-area: facts;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--bxl-surface);
  font-size: 13px;
}

#bxl-top .bxl-facts > div {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

#bxl-top .bxl-facts > div:not(:last-child)::after {
  content: "|";
  margin-left: 10px;
  color: var(--bxl-edge);
}

#bxl-top .bxl-facts dt {
  color: var(--bxl-muted);
}

#bxl-top .bxl-facts dd {
  color: var(--bxl-ink);
  font-weight: 700;
}

/* ---------- 持牌地区：轻量化胶囊抽屉 ---------- */
#bxl-top .bxl-regions {
  grid-area: regions;
}

#bxl-top .bxl-regions-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--bxl-line);
  border-radius: 999px;
  background: #fff;
  color: var(--bxl-text);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

#bxl-top .bxl-regions-title:hover {
  border-color: var(--brand);
  color: var(--brand);
}

#bxl-top .bxl-regions-title::-webkit-details-marker {
  display: none;
}

#bxl-top .bxl-regions-title::after {
  content: "▾";
  color: var(--brand);
  font-size: 12px;
}

#bxl-top .bxl-regions[open] .bxl-regions-title::after {
  content: "▴";
}

#bxl-top .bxl-regions ul {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

#bxl-top .bxl-region {
  padding: 8px 12px;
  border-left: 3px solid var(--brand);
  border-radius: 4px;
  background: var(--bxl-surface);
}

#bxl-top .bxl-region strong {
  color: var(--bxl-ink);
  font-size: 13.5px;
}

#bxl-top .bxl-region-lic,
#bxl-top .bxl-region-note {
  display: block;
  font-size: 12.5px;
  color: var(--bxl-muted);
}

/* ---------- 行动舱按钮区 ---------- */
#bxl-top .bxl-actions {
  grid-area: actions;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  background: var(--brand-soft);
}

#bxl-top .bxl-btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

#bxl-top .bxl-btn--primary::after {
  content: "→";
  font-weight: 800;
}

#bxl-top .bxl-btn--primary:hover {
  background: var(--brand-hover);
  color: #fff;
  transform: scale(1.02);
}

/* 弱化查看评测入口 */
#bxl-top .bxl-btn--secondary {
  display: inline-block;
  padding: 0 2px 1px;
  border: 0;
  border-bottom: 1px dashed var(--bxl-muted);
  background: transparent;
  color: var(--bxl-muted);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}

#bxl-top .bxl-btn--secondary:hover {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

#bxl-top .bxl-btn--disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  border-radius: 999px;
  background: var(--bxl-line);
  color: var(--bxl-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: not-allowed;
}

#bxl-top .bxl-btn--secondary.bxl-btn--disabled {
  width: auto;
  min-height: 0;
  border-bottom: 0;
  background: transparent;
  font-size: 12px;
  opacity: 0.6;
}

#bxl-top .bxl-empty {
  margin-top: 16px;
  padding-left: 12px;
  border-left: 3px solid var(--bxl-edge);
  color: var(--bxl-muted);
  font-size: 14px;
}

/* ---------- 底部说明、下架表、FAQ、求助 ---------- */
#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;
}

#bxl-top th,
#bxl-top td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--bxl-line);
  text-align: left;
}

#bxl-top th {
  border-bottom: 2px solid var(--bxl-ink);
  color: var(--bxl-ink);
  font-weight: 700;
}

#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 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;
}

/* ---------- 桌面端适配：左Logo + 中间紧凑流 + 右侧品牌行动舱 ---------- */
@container bxl (min-width: 860px) {
  #bxl-top .bxl-legend dl > div {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
  }

  #bxl-top .bxl-notice > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  #bxl-top .bxl-notice p + p {
    margin-top: 0;
  }

  #bxl-top .bxl-row {
    --bxl-logo-w: 132px;
    --bxl-logo-h: 66px;
    grid-template-columns: var(--bxl-logo-w) minmax(0, 1fr) 196px;
    grid-template-areas:
      "logo main     grade"
      "logo licenses actions"
      "logo facts    actions"
      "logo regions  actions";
    gap: 10px 22px;
    align-items: start;
    padding: 20px 22px;
  }

  #bxl-top .bxl-grade {
    justify-self: center;
    padding-bottom: 4px;
  }

  #bxl-top .bxl-actions {
    align-self: stretch;
    justify-content: center;
  }

  #bxl-top .bxl-regions ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 精简卡片桌面布局 */
  #bxl-top .bxl-row:not(:has(.bxl-licenses, .bxl-regions, .bxl-facts)) {
    grid-template-columns: var(--bxl-logo-w) minmax(0, 1fr) auto 180px;
    grid-template-areas: "logo main grade actions";
    align-items: center;
  }
}