/* 桌面版式 · 内容页线（docs/specs/2026-10-08-web-desktop-ux-design.md）；全部规则在 600 / 900px / hover 媒体查询里
   The content pages on a computer: 首页, 搜索 / 系列 / 高级搜索, 单卡, 牌库, 导入, 套牌, 套牌库, 拍照识别. Only the
   pages' existing classes and structure are used (their templates and page sheets belong to other lines); every rule
   is scoped to its page (a body class, a class only that page has, or body:has(> main.page …)) and sits in a
   (min-width: 900px) or (hover: hover) and (pointer: fine) query, a few in the optional tablet band (600–899).
   Below 600px nothing here applies: the phone stays as prd/ draws it. Tokens (--page-w, --nav-h, --focus, --hover …)
   come from desktop.css, loaded before this file. */

/* ---------------------------------------------------------------- 1. each page's width (design §3.2–3.3) */
@media (min-width: 900px) {
  /* XL 1280: the grids and the overviews */
  body.lists:has(> main.page .results.grid),
  body.collection:has(> main.page .results.grid),
  body.sets-page,
  body.decks-page,
  body.card-page { --page-w: 1280px; }
  /* M 720: the forms and the tools */
  body.adv,
  body:has(> main.page .im-hero),
  body:has(> main.page .lib-check) { --page-w: 720px; }
  /* 缺牌按系列 (decks.css .ms 720 wide): the header bar as wide as it (review 2026-10-08 #8) */
  body.deck-page:has(> main.page .ms) { --page-w: 720px; }
  /* everything else keeps desktop.css's 960 (lists, a deck, 套牌库详情, 录入记录, 首页, 拍照) */
}

/* ---------------------------------------------------------------- 2. card grids (design §7): as many columns as fit */
@media (min-width: 600px) and (max-width: 899px) {
  .results .card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }  /* 768: four */
  /* the result bar's tools with their words (review 2026-10-08 #5: 21px icons with no name in a 768 window) */
  .results .result-bar .views :is(.filter, .dice, .select, .list, .grid) { display: inline-flex; align-items: center;
    gap: 4px; }
  .results .result-bar .views :is(.filter, .dice, .select, .list, .grid)::after { content: attr(aria-label);
    font-size: 13px; line-height: 18px; }
  .results .result-bar .views :is(.filter, .dice, .select, .list, .grid) svg { width: 18px; height: 18px; }
  body.deck-page .dk-filter { width: auto; gap: 4px; }
  body.deck-page .dk-filter::after { content: "筛选"; font-size: 13px; }
}
@media (min-width: 900px) {
  /* 1280 wide: six of ≈190 × 265 (1440 and 1920 windows); 1024: five; 900: four */
  .results .card-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px 16px; padding: 16px; }
  /* 我的牌库: a count line under each picture (collection.css) */
  .results.col-results .card-grid { row-gap: 12px; }
  .results .card-grid a:focus-visible { outline-color: #fff; outline-offset: 3px; }
  .collection .card-grid a.col-tile:focus-visible { outline: 0; }
  .collection .card-grid a.col-tile:focus-visible .col-art { outline: 2px solid #fff; outline-offset: 3px; }
  /* 加载更多: a button, not a bar across the page */
  .results .list-more { max-width: 320px; margin: 16px auto 24px; }
}

/* ---------------------------------------------------------------- 3. the result bar (design §8.2): words on the tools,
   actions (grey buttons) apart from the view (a two-part control at the right end); it stays under the header bar */
@media (min-width: 900px) {
  body.has-topnav .results .result-bar { position: sticky; top: var(--nav-h); z-index: 5; justify-content: flex-start;
    gap: 16px; height: auto; min-height: 52px; margin-top: 0; padding: 8px 16px; background: var(--bg); }
  body.has-topnav .results .result-bar .count { padding-top: 0; font-size: 14px; line-height: 20px; color: var(--text-2d); }
  body.has-topnav .results .result-bar .views { flex: 1; gap: 8px; }
  body.has-topnav .results .result-bar .views :is(.filter, .dice, .select) { display: inline-flex; align-items: center;
    gap: 6px; height: 32px; margin: 0; padding: 0 12px 0 10px; border-radius: var(--radius-s); background: var(--panel-2);
    color: var(--text); font-size: 13px; white-space: nowrap; }
  body.has-topnav .results .result-bar .views :is(.filter, .dice, .select) svg { width: 18px; height: 18px; }
  body.has-topnav .results .result-bar .views :is(.filter, .dice, .select)::after { content: attr(aria-label); order: 1; }
  body.has-topnav .results .result-bar .views .dice svg { color: var(--blue); }  /* prd/7.jpg's blue dice, on the icon only */
  body.has-topnav .results .result-bar .views .filter.on { color: var(--focus); }
  body.has-topnav .results .result-bar .views .filter b { position: static; order: 2; margin-left: 2px; }
  /* 多选 is a mode: pressed while choosing */
  body.has-topnav.selecting .results .result-bar .views .select { background: var(--hover-2); color: var(--focus); }
  /* the divider becomes the spring that puts the view switch at the right end */
  body.has-topnav .results .result-bar .views .div { visibility: hidden; margin-left: auto; }
  body.has-topnav .results .result-bar .views :is(.list, .grid) { display: inline-flex; align-items: center; gap: 6px;
    height: 32px; margin: 0; padding: 0 12px; background: var(--panel); border: 1px solid #3a3a3c; color: var(--text-2d);
    font-size: 13px; }
  body.has-topnav .results .result-bar .views .list { border-radius: var(--radius-s) 0 0 var(--radius-s); }
  body.has-topnav .results .result-bar .views .grid { margin-left: -8px; border-left: 0;
    border-radius: 0 var(--radius-s) var(--radius-s) 0; }
  body.has-topnav .results .result-bar .views :is(.list, .grid).on { background: #3a3a3c; color: #fff; }
  body.has-topnav .results .result-bar .views :is(.list, .grid) svg { width: 16px; height: 16px; }
  body.has-topnav .results .result-bar .views :is(.list, .grid)::after { content: attr(aria-label); }
  /* the chips row (排序 / 条件) right above the bar: one tool area; 清空 reads as a red word, not a criterion */
  body.has-topnav .chips { flex-wrap: wrap; overflow: visible; padding: 12px 16px 0; }
  body.has-topnav .chips .chip.clear { background: transparent; padding-inline: 8px; }
}

/* ---------------------------------------------------------------- 4. card rows (design §6.2): one column within 960,
   a line between rows, the whole row lights under the pointer; the row's + says what it does */
@media (min-width: 900px) {
  .results .card-list > li + li { border-top: 1px solid #1c1c1e; }
  .results a.card-row:focus-visible { outline-offset: -2px; }
  .lists .card-row .type { font-size: 13px; }
  .lists .card-list li.addable .card-row { padding-right: 140px; }
  .lists .row-add { width: auto; gap: 4px; padding: 0 14px 0 10px; border-radius: 17px; }
  .lists .row-add::after { content: attr(aria-label); font-size: 13px; color: var(--text); }
  /* 牌库: 选版本 a size to click (collection.css 22 high, 11.5px) */
  .collection .col-pick { height: 28px; padding: 0 12px; border-radius: 14px; font-size: 13px; }
  .collection .col-n small { font-size: 12px; }
  .list-empty .hint { color: var(--text-2); }
  /* denser rows (review 2026-10-08 #3: 116px phone rows, 5 to a 1440 × 900 screen): a 48px picture, the four lines
     close together */
  .lists .card-row { gap: 16px; min-height: 84px; padding-block: 6px; }
  .lists .card-row .thumb { width: 48px; flex-basis: 48px; }
  .lists .card-row .meta { padding-top: 0; }
  .lists .card-row .cost { margin-top: 2px; }
  .lists .card-row .type { margin-top: 2px; }
  /* 牌库: the count and value at the top right, so 选版本 / 就是这个版本 at the bottom right never cover them */
  .collection .card-row .col-n { align-self: flex-start; padding-top: 4px; }
}
/* ≥1200: the list in two columns of ≈620 (the page 1280), the count, price and buttons beside the name, as a deck's
   rows (review 2026-10-08 #3) */
@media (min-width: 1200px) {
  body.lists:has(> main.page .results.list) { --page-w: 1280px; }
  .results.list .card-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
  .results.list .card-list > li { border-top: 1px solid #1c1c1e; }
  .results.list .card-list > li:nth-child(-n + 2) { border-top: 0; }
}

/* ---------------------------------------------------------------- 5. 我的套牌 / 套牌库 lists (design §14.3, D1 Y1 D2 Y2):
   the tiles in a grid (a tile ≈ 400 wide holds its 280px art fade whole: no cut half-way), the controls in two rows */
@media (min-width: 600px) and (max-width: 899px) {
  ul.dl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; padding: 16px 16px 0; }
  /* 套牌库's tiles carry more words: two only from 832px (one 400 wide), as on the computer (review 2026-10-08 #12) */
  ul.dl-list.lib-list { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
  /* a tile fills its grid cell, so the two of a row end level (review 2026-10-08 #11) */
  ul.dl-list > li > .dk-tile { height: 100%; margin: 0; }
  ul.dl-list > .dl-none { grid-column: 1 / -1; }
}
/* the words over a tile's art (review 2026-10-08 #10, #12): a dark veil from the left over the art, so the grey lines
   and 新 read on a light picture; the right end keeps the picture. Tiles side by side only (≥600). */
@media (min-width: 600px) {
  ul.dl-list .dk-tile-art::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(20, 20, 20, 0.92) 0%, rgba(20, 20, 20, 0.78) 45%, rgba(20, 20, 20, 0.3) 80%,
      rgba(20, 20, 20, 0) 100%); }
  ul.dl-list .lib-new { background: rgba(0, 0, 0, 0.72); }
}
@media (min-width: 900px) {
  ul.dl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; padding: 16px 16px 0; }
  ul.dl-list.lib-list { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
  ul.dl-list > li > .dk-tile { height: 100%; margin: 0; }
  ul.dl-list > .dl-none { grid-column: 1 / -1; }
  /* the art scales with a wider tile instead of stopping short of its right edge */
  ul.dl-list .dk-tile-art { background-size: max(280px, calc(100% + 22px)) auto; }
  ul.dl-list .dk-tile:focus-visible { outline-offset: 2px; }
  .dk-tile-sub { font-size: 13px; line-height: 18px; }
  .dl-list .dk-fmt { background: #2f6fd0; }  /* white 4.9:1 (#3989e8: 3.55) */

  /* /decks: [我的套牌 | 套牌库] … [＋ 新建套牌] [导入牌表] [牌库] on the first row, formats and sources on the second */
  body.decks-page:not(.library-page) .dl { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; }
  body.decks-page:not(.library-page) .dl > * { flex: 0 0 100%; order: 3; }
  /* a zero-height full-width item ends the first row (the switch and the actions) before the format tabs */
  body.decks-page:not(.library-page) .dl::before { content: ""; order: 1; flex: 0 0 100%; height: 0; }
  body.decks-page:not(.library-page) .dl > :is(.lib-switch, .dl-actions) { order: 0; }
  body.decks-page:not(.library-page) .dl > :is(.dl-tabs, .dl-mine) { order: 2; }
  body.decks-page:not(.library-page) .dl > .lib-switch { flex: none; margin: 0 0 0 16px; }
  body.decks-page:not(.library-page) .dl > .dl-actions { flex: none; margin-left: auto; }
  body.decks-page:not(.library-page) .dl > .dl-tabs { flex: none; padding: 16px 0 0 16px; }
  body.decks-page:not(.library-page) .dl > .dl-mine { flex: none; margin: 16px 0 0; padding: 0; }
  body.decks-page:not(.library-page) .dl > .dl-list { padding-top: 20px; }
  .dl-actions .btn-primary { flex: 0 0 auto; height: 36px; padding: 0 20px; }
  .dl-actions a.dl-link { flex: 0 0 auto; height: 36px; padding: 0 16px; font-size: 14px; }

  /* /library: the switch and 粘贴检查 as now; format · source · time window side by side, set apart */
  .dl.lib > :is(.lib-fmts, .lib-tabs, .lib-days) { display: inline-flex; vertical-align: middle; padding: 12px 0 0;
    margin-left: 16px; }
  .dl.lib > :is(.lib-tabs, .lib-days) { margin-left: 24px; }
  .dl.lib > .lib-fmts a { flex: none; min-width: 64px; padding: 0 14px; }
  .lib-top .lib-check-link { min-height: 32px; padding: 0 14px; border-radius: var(--radius-s); background: var(--panel-2);
    color: var(--text); font-size: 14px; }
  .dl.lib .lib-find { max-width: 480px; }
  .lib-note, .lib-credit { font-size: 13px; line-height: 19px; }
  .lib-week, .lib-group { color: var(--text-2); }
  .lib-new, .lib-mine { font-size: 12px; }
  .dl.lib .lib-more { width: max-content; margin: 16px auto; }
  .dl.lib .lib-outs, .dl.lib .lib-lead, .dl.lib > .lib-note:not(.lib-basis) { max-width: 960px; }
  .dl.lib .lib-check-wide { width: auto; max-width: 240px; margin: 16px; padding: 0 24px; }
}

/* ---------------------------------------------------------------- 6. 单卡 /card/<id> (design §14.1, C1–C4, C8): the picture
   on the left (it stays while the page scrolls), every row on the right; the card opened from a deck (.in-deck) keeps
   decks.css's own two columns. The name stays under the picture (moving it needs card.html: 留后 C1/C9). */
@media (min-width: 900px) {
  body.card-page article.cd:not(.in-deck) { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    column-gap: 32px; align-items: start; max-width: 1200px; margin: 0 auto; padding: 16px 16px 24px; }
  body.card-page article.cd:not(.in-deck) > .cd-hero { grid-column: 1; grid-row: 1 / span 40; position: sticky;
    top: calc(var(--nav-h) + 16px); padding: 0 0 16px; }
  body.card-page article.cd:not(.in-deck) > :not(.cd-hero) { grid-column: 2; min-width: 0; }
  body.card-page article.cd:not(.in-deck) .cd-figure { width: 100%; max-width: none; }
  body.card-page article.cd:not(.in-deck) .cd-title { margin-top: 16px; padding: 0 2px; }
  body.card-page article.cd:not(.in-deck) .cd-name { font-size: 20px; line-height: 28px; }
  /* the right column starts at its first row, without the black band above it */
  body.card-page article.cd:not(.in-deck) > .cd-hero + * { border-top-color: transparent; }
  /* the turn-over button inside the picture's corner (as on a 360 phone), not over the right column */
  body.card-page .cd-flip { left: auto; right: 8px; bottom: 8px; background: rgba(0, 0, 0, 0.6); }
  /* buttons as wide as their words (C3), not the whole ≈760 column */
  body.card-page article.cd:not(.in-deck) .cd-shop { flex: 0 1 auto; min-width: 240px; padding-inline: 16px; gap: 12px; }
  body.card-page article.cd:not(.in-deck) .cd-buyback { flex: 0 1 420px; }
  body.card-page article.cd:not(.in-deck) .cd-deck { max-width: 520px; }
  body.card-page article.cd:not(.in-deck) .cd-rulings-toggle { height: 52px; }
  body.card-page .cd-format-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  body.card-page .cd-legend { justify-content: flex-start; gap: 24px; }
  /* 赛制色块: white on green 2.02 → on #1a7f37 5.1; on red 3.4 → on #d70015 5.4 (手机配色留后 C4) */
  body.card-page :is(.cd-format-grid, .cd-legend) .legal { background: #1a7f37; }
  body.card-page :is(.cd-format-grid, .cd-legend) .banned { background: #d70015; }
  /* 未开放的入口 (店家售价 / 关注 / 回收 / 相关套牌): read as not there yet, no pointer */
  body.card-page :is(.cd-shop, .cd-follow, .cd-buyback, .cd-deck)[data-soon] { opacity: 0.6; cursor: default; }

  /* 底栏 (C2): within the page width (desktop.css), icon and word side by side, 13px; no home-indicator band */
  body.card-page { --cd-bar-h: 52px; --cd-bar-band: 0px; }
  body.card-page .cd-bar > :is(a, button, span) { flex-direction: row; justify-content: center; gap: 8px; padding: 0;
    align-items: center; font-size: 13px; line-height: 18px; }
  body.card-page .cd-bar svg { width: 20px; height: 20px; margin: 0; }
  /* 上一张 / 下一张 when there is none: words #8e8e93 (5.6:1), not #484848 (2.3:1); still plainly off */
  body.card-page .cd-bar .disabled { color: #8e8e93; cursor: default; }
  body.card-page .cd-bar .disabled svg { color: #5b5b5d; }
  body.card-page .cd-bar :is(a, button):focus-visible { outline-offset: -3px; }
}
@media (hover: hover) and (pointer: fine) {
  body.card-page .cd-bar > :is(a, button):not([aria-disabled="true"]):hover { background: var(--hover, rgba(255, 255, 255, 0.06));
    color: #fff; }
  body.card-page .cd-lang-btns button:not(.on):not(.off):hover { border-color: var(--blue); }
  body.card-page :is(.cd-cheapest, .cd-vers-all):hover { text-decoration: underline; text-underline-offset: 3px; }
  body.card-page .cd-rulings-toggle:not(.empty):hover { filter: brightness(1.25); }
  body.card-page a.cd-ver:not(.on):hover { background: var(--hover, rgba(255, 255, 255, 0.06)); }
  /* a two-faced card: say what a click does (C8) */
  body.card-page .cd-image.can-flip:hover::after { content: "点击翻面"; position: absolute; left: 50%; top: 10px; z-index: 2;
    transform: translateX(-50%); padding: 3px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.72); color: #fff;
    font-size: 12px; line-height: 18px; pointer-events: none; }
}

/* ---------------------------------------------------------------- 7. 牌库 / 录入记录 / 导入 / 高级搜索 (design §14.2) */
@media (min-width: 900px) {
  /* /collection: the totals and 录入记录 · 导入表格 · 导出 CSV on one line, the three as small grey buttons (L6) */
  body.collection .col-body { display: flex; flex-wrap: wrap; align-items: center; }
  body.collection .col-body > * { flex: 1 1 100%; min-width: 0; order: 1; }  /* shrinks by its own side margins */
  body.collection .col-body > .col-summary { flex: 1 1 0; order: 0; padding: 14px 16px 0; font-size: 15px; }
  body.collection .col-body > .col-links { flex: none; order: 0; gap: 8px; padding: 12px 16px 0; }
  body.collection .col-links a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
    border-radius: var(--radius-s); background: var(--panel-2); color: var(--text); font-size: 13px; }
  body.collection .col-body > :is(.col-alert, .col-fill) { margin: 8px 16px 0; }
  body.collection .col-fill { color: var(--text-2d); }
  body.collection .col-source { color: var(--text-2); font-size: 12px; }
  /* 多选 bar (L4): one line, 取消 · 已选 N 种 · 全选, then the actions as wide as their words, 删除 apart at the end */
  body.collection .col-selbar:not([hidden]) { display: flex; align-items: center; gap: 24px; padding: 10px 16px; }
  body.collection .col-sel-info { flex: none; justify-content: flex-start; gap: 16px; }
  body.collection .col-sel-actions { flex: 1; display: flex; gap: 8px; margin: 0; }
  body.collection .col-sel-actions button { flex: none; padding: 0 16px; }
  body.collection .col-sel-actions .danger { margin-left: auto; color: var(--red-d); }

  /* /collection/batches (B1): 查看 a small grey button, 撤销整批 red words 16px away; the row itself is not a link */
  .bt-actions { align-items: center; gap: 16px; }
  .bt-actions a, .bt-actions button:not(.danger) { display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
    border-radius: var(--radius-s); background: var(--panel-2); color: var(--text); }
  .bt-actions .danger { color: var(--red-d); }
  .bt-kind { font-size: 12px; background: #2f6fd0; }
  .bt-sub { color: var(--text-2d); }

  /* 导入 / 粘贴检查 (I1, P1, Q1): the submit button as wide as its word, at the right under the text box */
  :is(.im-paste, .lib-check-form, .lib-imp-form) > .btn-primary { align-self: flex-end; flex: none; width: auto;
    min-width: 160px; padding: 0 24px; }
  body:has(> main.page .im-hero) .im-paste textarea::placeholder { color: var(--text-2); }
  /* /collection/import/<id>: a radio a size to see (I4) */
  body:has(> main.page .im-body) input[type="radio"] { width: 18px; height: 18px; accent-color: var(--blue); }

  /* /advanced, /collection/filter and a deck's filter page (body.adv; A1, A5, M4, L7) */
  body.adv .adv-title { padding-top: 24px; }
  body.adv .rarity { justify-content: flex-start; gap: 32px; padding-left: 16px; }
  /* 其他 (版本待定 / 代理牌 / 版本失效) on 工艺's four columns, not spread across 720 (review 2026-10-08 #7) */
  body.adv .checks.others { display: grid; grid-template-columns: repeat(4, 1fr); justify-items: start;
    justify-content: start; height: auto; padding: 12.3px 14.5px 9.6px 14px; }
  body.adv .fld:has(> input:focus-visible) { box-shadow: inset 0 0 0 2px var(--focus); }
  body.adv .fld input::placeholder, body.adv .mana-input input::placeholder { color: var(--text-2); }
  body.adv .hint-row { color: var(--text-2); font-size: 12px; }
  /* the 常用 words insert a type: small chips, apart from 增加类别 / 显示帮助 (words that open something) */
  body.adv .quick button { min-height: 28px; margin: 4px 8px 0 0; padding: 0 10px; border-radius: 14px;
    background: var(--panel-2); color: var(--text); }
}

/* the hidden file box inside a label (选择表格文件, 拍照, 从相册选择): the ring on the label you can see (I2, Q5, AS-44) */
@media (min-width: 900px) {
  :is(.btn-shoot, .btn-album, .cam-off-btn, .cam-off-alt, .im-pick):has(input[type="file"]:focus-visible) {
    outline: 2px solid var(--focus); outline-offset: 3px; }
}

/* ---------------------------------------------------------------- 8. a deck /decks/<id> and 套牌库 /library/<id>
   (body.deck-page; design §14.3, K1 K2 K5 K6 K7, Z1 Z3 Z4) */
@media (min-width: 900px) {
  /* the search box a reading width, the funnel a grey button that says 筛选 (its count inside) */
  body.deck-page .dk-find input { flex: 0 1 480px; }
  body.deck-page .dk-filter { width: auto; height: 32px; gap: 6px; padding: 0 12px 0 10px; border-radius: var(--radius-s);
    background: var(--panel-2); color: var(--text); font-size: 13px; }
  body.deck-page .dk-filter svg { width: 18px; height: 18px; }
  body.deck-page .dk-filter::after { content: "筛选"; order: 1; }
  body.deck-page .dk-filter b { position: static; order: 2; }
  body.deck-page .dk-filter.on { color: var(--focus); }
  /* small words up to 12px and readable greys (K7, Z4) */
  body.deck-page .dk-else { font-size: 12px; color: var(--text-2); }
  body.deck-page .dk-own { font-size: 12px; }
  body.deck-page .dk-source, body.deck-page .ms-hint { font-size: 12px; color: var(--text-2); }
  /* a status that is a disabled button (✓ 合规) reads as a status, not a button (K6) */
  body.deck-page .dk-chip:disabled { background: transparent; padding-inline: 2px; }
  body.deck-page .dk-chip.ok:disabled { color: #30d158; }
  /* the bottom bar: ＋ 加牌 as wide as its words on the left, 统计 · ⋯ 更多 at the right end (K2) */
  body.deck-page .dk-bar > .btn-primary { flex: 0 0 auto; min-width: 200px; padding: 0 24px; }
  body.deck-page .dk-bar > button:not(.btn-primary) { flex: 0 0 auto; min-width: 72px; padding: 0 16px; }
  body.deck-page .dk-bar > .btn-primary + button { margin-left: auto; }
  body.deck-page .dk-bar > button[aria-label="更多"]::after { content: " 更多"; font-size: 14px; }
  /* 套牌库: 改名或选版本 › on the left, 加入我的套牌 a button at the right end (Z1) */
  body.deck-page .lib-actionbar form { flex: 0 0 auto; margin-left: auto; }
  body.deck-page .lib-actionbar .btn-primary { flex: 0 0 auto; min-width: 200px; padding: 0 24px; }
  /* 缺牌按系列: a taller box to copy from (M3) */
  body.deck-page .ms-copy textarea { min-height: 200px; }
}
/* ≥1200 (960 wide): a group's rows in two columns, so the price is not 900px away from the name (K1, Z3) */
@media (min-width: 1200px) {
  body.deck-page .dk-group > .dk-rows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
}

/* ---------------------------------------------------------------- 9. 首页 and 全部系列 (design §14.4, H1 H2 H4 H5, T1 T2) */
@media (min-width: 900px) {
  body.home .brand { margin-top: 40px; }
  body.home .home-search { max-width: 640px; height: 48px; margin: 24px auto 0; border-radius: 24px; cursor: text; }
  body.home .home-search input { font-size: 15px; }
  body.home .home-search input::placeholder { color: var(--text-2); }
  body.home .home-search:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
  /* 随机卡牌 · 高级搜索 · 拍照识别: three tiles, icon over word, in the middle */
  body.home .entries { justify-content: center; gap: 16px; height: auto; margin: 24px 16px 0; }
  body.home .entries a { flex: 0 0 160px; height: 88px; flex-direction: column; justify-content: center; align-items: center;
    gap: 8px; padding: 0; border-radius: 12px; background: var(--panel); font-size: 14px; }
  body.home .entries a + a::before { display: none; }
  body.home .entries a svg { flex: none; width: 26px; height: 26px; margin: 0; }
  body.home .entries span { padding: 0; }
  body.home .home-head { padding: 0 16px; }
  body.home .home-head a { font-size: 13px; }
  body.home .banner { height: 150px; margin: 14px 16px 0; border-radius: 12px; }
  body.home .banner .mark { width: 56px; margin-left: 32px; padding-top: 0; justify-content: center; }
  body.home .banner .mark img { width: 48px; height: 48px; }
  body.home .banner .mark b { font-size: 16px; }
  body.home .banner .zh { font-size: 24px; line-height: 32px; }
  body.home .banner .en { font-size: 15px; line-height: 20px; }
  /* 资讯: two columns */
  body.home .news { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 14px;
    padding: 0 16px 24px; }
  body.home .news li + li { margin-top: 0; }
  body.home .news-card { height: 100%; border-radius: 12px; padding: 12px; }
  body.home .news-card .src { font-size: 12px; }
  body.home .news-card .tag { height: 18px; line-height: 18px; font-size: 12px; color: var(--text-2d); }
  /* 资讯 / 更多 is not built yet: a grey word with a small 即将上线, no pointer (H4; hiding it needs home.html) */
  body.home .home-head a[data-soon] { color: var(--text-2); cursor: default; }
  body.home .home-head a[data-soon]::after { content: "即将上线"; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
    background: var(--panel-2); font-size: 12px; }

  /* /sets: sort and the sub-set switch on one line; the sets as small cards, several a row (T1, T2) */
  body.sets-page .sets-ctl { display: flex; align-items: center; gap: 40px; height: auto; padding: 16px 16px 16px; }
  body.sets-page .sets-ctl .line + .line { margin-top: 0; }
  body.sets-page .sets-ctl::after { transform: none; background: var(--line-2); left: 16px; right: 16px; }
  body.sets-page .sets-ctl .seg a { width: auto; padding: 2px 14px 0; }
  body.sets-page .set-list:not(:has(> li.sub)) { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px; padding: 16px; }
  body.sets-page .set-list:not(:has(> li.sub)) > li { background: none; }
  body.sets-page .set-list:not(:has(> li.sub)) a { height: 56px; padding: 0 14px 0 0; border-radius: 10px; background: var(--panel); }
  body.sets-page .set-list:not(:has(> li.sub)) a::after { display: none; }
  body.sets-page .set-list:not(:has(> li.sub)) .icon { flex-basis: 24px; width: 24px; height: 24px; }
  body.sets-page .set-list:not(:has(> li.sub)) .icon img { max-width: 24px; max-height: 24px; }
  body.sets-page .set-list .code { font-size: 13px; color: var(--text-2d); }
  /* with sub-sets shown it stays one indented list, 960 wide, so the ↳ hierarchy reads */
  body.sets-page:has(.set-list > li.sub) { --page-w: 960px; }
  body.sets-page .set-list .sub-mark { color: var(--text-2); font-size: 12px; }
}

/* ---------------------------------------------------------------- 10. 拍照识别 (the photo line's pages; design §14.5,
   AS-42 AS-43 AS-45 AS-48 AS-49). Only colours, order and layout; words, drag-and-drop and the two-column wrapper of /scan
   need scan.html (留后). /scan/camera has no top nav and is left alone. */
@media (min-width: 900px) {
  /* /scan: on a computer the file is the way in — 从相册选择 the blue button, 拍照 / 系统相机 grey beside it, one row */
  main.page > .scan-hero:not(.im-hero) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
  main.page > .scan-hero:not(.im-hero) > * { grid-column: 1 / -1; }
  main.page > .scan-hero:not(.im-hero) > .btn-alt { display: contents; }
  main.page > .scan-hero:not(.im-hero) :is(.btn-shoot, .btn-album) { grid-column: auto; height: 48px; margin: 0;
    font-size: 15px; font-weight: 500; }
  main.page > .scan-hero:not(.im-hero) .btn-album:first-child { order: 1; background: var(--blue-d); color: #fff; }
  main.page > .scan-hero:not(.im-hero) .btn-album:first-child svg { color: #fff; }
  main.page > .scan-hero:not(.im-hero) .btn-shoot { order: 2; background: var(--panel-2); color: #e5e5ea; letter-spacing: 0; }
  main.page > .scan-hero:not(.im-hero) .btn-shoot svg { width: 20px; height: 20px; color: var(--blue); }
  main.page > .scan-hero:not(.im-hero) .btn-album:last-child { order: 3; background: var(--panel-2); }
  main.page > .scan-hero:not(.im-hero) .upload { order: 4; }
  /* 拍照小贴士 in two columns; 最近识别 rows light under the pointer */
  main.page:has(> .scan-hero:not(.im-hero)) .tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px; }
  main.page:has(> .scan-hero:not(.im-hero)) .tips li:nth-child(2) { border-top: 0; }
  :is(.recent, .fb-list) .chev { stroke: var(--text-2); }

  /* /scan/<id> still waiting or failed: a form-width page (AS-48) */
  body:has(> main.page .result:is([data-status="failed"], [data-status="queued"], [data-status="running"])) { --page-w: 720px; }
  .scan-list .card-row .type { font-size: 13px; }
  .failed-box .btn-primary { width: max-content; min-width: 200px; margin-inline: auto; padding: 0 24px; }
}
/* /scan/<id> with cards: the photo on the left (it stays while the list scrolls), the cards on the right (AS-45) */
@media (min-width: 1100px) {
  body:has(> main.page .result > .scan-list) { --page-w: 1280px; }
  main.page .result:has(> .scan-list) { display: grid; grid-template-columns: minmax(0, 1fr) 520px; column-gap: 24px;
    align-items: start; }
  main.page .result:has(> .scan-list) > * { grid-column: 2; min-width: 0; }
  main.page .result:has(> .scan-list) > .scan-status { grid-column: 1 / -1; }
  main.page .result:has(> .scan-list) > :is(.photo-wrap, .photo-gone) { grid-column: 1; grid-row: 2 / span 40;
    position: sticky; top: calc(var(--nav-h) + 12px); margin-right: 0; }
  main.page .result:has(> .scan-list) > .take-bar { margin-top: 0; }
  /* the bottom bar under the right column */
  body:has(> main.page .result > .scan-list) #scan-actions { left: auto; width: 552px;
    right: max(0px, calc(50% - var(--page-w) / 2)); }
}

/* ---------------------------------------------------------------- 11. hover, focus, pointer on the content components
   (design §11, G3 G4 H3 S8 F7 T3 C5 D4 Y3 Y6 Y7 M2 Z3 AS-49). Hover only changes colour, never size or place. */
@media (hover: hover) and (pointer: fine) {
  /* rows that are links: the whole row lights */
  .card-list a.card-row:hover, a.dk-row-main:hover, a.dk-miss-row:hover, .lib-out:hover, .ms-set > summary:hover,
  .lib-list > summary:hover, .sort-sheet .sort-item:hover { background: var(--hover, rgba(255, 255, 255, 0.06)); }
  :is(.recent, .fb-list) a:hover { background: #232325; }
  body.sets-page .set-list a:hover, body.sets-page .set-list:not(:has(> li.sub)) a:hover { background: #232325; }
  /* tiles a step lighter, their art at full strength */
  .dk-tile:hover { background: #1f1f21; }
  .dk-tile:hover .dk-tile-art { opacity: 1; }
  body.home :is(.news-card, .entries a):hover { background: #232325; }
  body.home .banner:hover { filter: brightness(1.15); }
  /* card pictures: a light ring, nothing moves (it would cover the next tile's corner tag) */
  .results .card-grid a:not(.col-tile):hover { outline: 2px solid rgba(255, 255, 255, 0.55); outline-offset: 3px; }
  .collection .card-grid a.col-tile:hover .col-art { outline: 2px solid rgba(255, 255, 255, 0.55); outline-offset: 3px; }
  /* grey buttons, chips, the bar's tools */
  :is(a, button).chip:not(.on):not(.clear):hover, .row-add:hover, .list-more:hover, body.deck-page .dk-filter:hover,
  .dk-bar > button:not(.btn-primary):hover, .col-sel-actions button:not(:disabled):hover, body.collection .col-links a:hover,
  .bt-actions a:hover, .bt-actions button:not(.danger):not(:disabled):hover, .lib-top .lib-check-link:hover,
  .dl-actions a.dl-link:hover, .scan-actions .btn-again:hover, body.adv .quick button:hover,
  :is(.dk-tabs, .lib-days, .lib-tabs) a:not(.on):hover { background: var(--hover-2, #3a3a3c); color: #fff; }
  body.has-topnav .results .result-bar .views :is(.filter, .dice, .select):hover { background: var(--hover-2, #3a3a3c); }
  body.has-topnav .results .result-bar .views :is(.list, .grid):not(.on):hover { background: #2c2c2e; color: #fff; }
  .chip a:hover, body.adv .lnk:hover { color: #fff; }
  .dk-chip:not(:disabled):hover, .im-pick:hover { filter: brightness(1.15); }
  main.page > .scan-hero:not(.im-hero) .btn-album:first-child:hover { filter: brightness(1.12); }
  main.page > .scan-hero:not(.im-hero) :is(.btn-shoot, .btn-album:last-child):hover { background: var(--hover-2, #3a3a3c); }
  /* words that are links: underline */
  .section-head a:hover, body.home .home-head a:not([data-soon]):hover, .lib-sorts a:hover, .col-alert:hover,
  .col-history:hover, .list-empty-link:hover, .lib-add-more:hover, .take-link:hover,
  .chip.clear:hover, .bt-actions .danger:not(:disabled):hover, .col-fill button:hover, .ms-link:hover {
    text-decoration: underline; text-underline-offset: 3px; }
  /* 套牌库 colour chips are mana symbols only: their name in a small bubble under the pointer (Y3; a title needs library.html) */
  .chip.lib-ci:hover::before { content: attr(aria-label); position: absolute; top: calc(100% + 8px); left: 50%; z-index: 10;
    transform: translateX(-50%); padding: 3px 8px; border-radius: 6px; background: #3a3a3c; color: #fff; font-size: 12px;
    line-height: 18px; white-space: nowrap; pointer-events: none; }
  .chip.lib-ci:not(.on):hover { box-shadow: inset 0 0 0 1px #636366; }
}
@media (min-width: 900px) {
  /* rows inside rounded lists draw the ring inside (it would be clipped) */
  :is(.recent, .fb-list, .lib-outs) a:focus-visible, body.sets-page .set-list a:focus-visible, a.dk-row-main:focus-visible,
  .ms-set > summary:focus-visible { outline-offset: -2px; }
  /* text boxes that drop the outline: a ring on a computer (K5 and the import / deck tools) */
  :is(.dk-find, .dka-search, .cd-role-own, .im-find) input:focus-visible, .sp-search:focus-visible,
  .im-paste textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
  /* small words and readable greys on the content pages (design §12, G8 H5 S9 D5 M2 Z4) */
  .list-empty .hint, .lib-note, .lib-credit { color: var(--text-2); }
}