/* ============================================================
   PineA.Market · 重设计双主题令牌 (redesign-brief §6)
   浅色 白红金 = 默认 (:root)；深色 黑红金 = [data-theme="dark"]。
   原 class 契约不变；新增 *-rgb 三元组供 rgba(var(--x-rgb), a) 引用。
   ============================================================ */
:root {
    color-scheme: light;
    --bg: #f6f4f0;
    --bg-2: #edeae3;
    --panel: #ffffff;
    --panel-2: #faf8f4;
    --panel-3: #f1ede5;
    --line: #e3ddd1;
    --line-soft: #efebe2;
    --text: #201a16;
    --muted: #6b6156;
    --faint: #82796c;
    --brand: #c8102e;
    --brand-strong: #a50c25;
    --gold: #a87b15;
    --gold-strong: #8f6810;
    --buy: #c8102e;
    --buy-strong: #a50c25;
    --olive: #f7e2e5;
    --olive-2: #b01029;
    --amber: #a87b15;
    --amber-2: #8f6810;
    --warn: #a87b15;
    --warn-2: #8f6810;
    --steel: #a09383;
    --accent: var(--brand);
    --cta-bg: #c8102e;
    --cta-bg-2: #a50c25;
    --danger: #e0402c;
    --danger-2: #b53222;
    --ok: #2f8f5f;
    --on-brand: #fff5f2;
    --on-gold: #241a06;
    --item-stage: #faf8f4;
    --item-stage-2: #ffffff;
    --item-glow: #d8ab4f;
    --item-line: inset 0 0 0 1px var(--line-soft); /* 物品图底座内描边线（浅色） */
    --brand-rgb: 200, 16, 46;
    --buy-rgb: 200, 16, 46;
    --gold-rgb: 168, 123, 21;
    --danger-rgb: 224, 64, 44;
    --ok-rgb: 47, 143, 95;
    --panel-rgb: 255, 255, 255;
    --login-accent-rgb: 230, 184, 78;
    --focus-ring: 0 0 0 3px rgba(200, 16, 46, .22);
    /* hero 首层幕布不透明度（.layout 首层 linear-gradient 三档停靠点）。
       light 上调压制 hero 过曝（audit4 §四：稀疏视图集装箱纹理裸露），
       约等效于在原 .84/.58/.66 上再叠 rgba(panel,.35) 蒙版。 */
    --hero-veil-1: .90;
    --hero-veil-2: .72;
    --hero-veil-3: .78;
    --overlay: rgba(28, 22, 19, .44);
    --shadow: 0 18px 42px rgba(90, 60, 20, .12), 0 8px 22px rgba(var(--gold-rgb), .08);
    --shadow-soft: 0 8px 22px rgba(90, 60, 20, .10);
    --r: 6px;
    --r-sm: 4px;
    --sidebar: 216px;
    --mobile-nav-h: 82px;
    --mobile-nav-h-compact: 64px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
    --fast: 140ms;
    --normal: 190ms;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0e0d10;
    --bg-2: #151318;
    --panel: #19171c;
    --panel-2: #201d23;
    --panel-3: #282329;
    --line: #2f2a31;
    --line-soft: #252128;
    --text: #f0eae0;
    --muted: #a49a8e;
    --faint: #6f685f;
    --brand: #e6293f;
    --brand-strong: #ff4d63;
    --gold: #dcae51;
    --gold-strong: #eec66d;
    --buy: #e6293f;
    --buy-strong: #ff4d63;
    --olive: #33131a;
    --olive-2: #ff96a2;
    --amber: #dcae51;
    --amber-2: #eec66d;
    --warn: #dcae51;
    --warn-2: #eec66d;
    --steel: #6f685f;
    --accent: var(--brand);
    --cta-bg: #d81e37;
    --cta-bg-2: #c01530;
    --danger: #ff5a4d;
    --danger-2: #ff7a6f;
    --ok: #35c17e;
    --on-brand: #fff5f2;
    --on-gold: #201704;
    --item-stage: #121016;
    --item-stage-2: #251d27;
    --item-glow: #8a6b23;
    --item-line: inset 0 0 0 1px var(--line-soft); /* 物品图底座内描边线（深色） */
    --brand-rgb: 230, 41, 63;
    --buy-rgb: 230, 41, 63;
    --gold-rgb: 220, 174, 81;
    --danger-rgb: 255, 90, 77;
    --ok-rgb: 53, 193, 126;
    --panel-rgb: 25, 23, 28;
    --focus-ring: 0 0 0 3px rgba(230, 41, 63, .35);
    /* dark 保持原 .84/.58/.66：audit4 §四实测 dark hero 观感优秀，不动 */
    --hero-veil-1: .84;
    --hero-veil-2: .58;
    --hero-veil-3: .66;
    --overlay: rgba(5, 5, 9, .62);
    --shadow: 0 20px 46px rgba(0, 0, 0, .55), 0 1px 0 rgba(220, 174, 81, .06);
    --shadow-soft: 0 8px 22px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.market-app {
    color: var(--text);
    background: var(--bg);
    font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid transparent;
    border-top-color: currentColor; /* 继承按钮文字色（如 --on-brand），双主题自适应 */
    border-radius: 50%;
    opacity: .9;
    animation: spin .7s linear infinite;
}

.is-loading {
    opacity: .85;
    cursor: progress;
    pointer-events: none;
}

@keyframes enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 底部 sheet 升起（spec-mobile-gallery §0.4）：从下方 100% 平移进场 */
@keyframes pa-rise {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: none; }
}

@keyframes shimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

@keyframes toastIn {
    from { opacity: 0; transform: translate(-50%, -12px) scale(.98); }
    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

button, input, select { font: inherit; }
button { touch-action: manipulation; }

.layout {
    display: flex;
    min-height: 100vh;
    /* 背景由 REDESIGN OVERRIDE 覆盖块的 .layout 声明（双主题令牌化）接管，
       原写死深色渐变组为死代码，已删（2026-07-11 gap-audit §一.3）。 */
}

.sidebar {
    width: var(--sidebar);
    min-height: 100vh;
    /* background 由覆盖块 .sidebar 的 rgba(var(--panel-rgb), .96) 声明接管，原写死深底已删 */
    border-right: 1px solid var(--line);
    box-shadow: 12px 0 34px rgba(0, 0, 0, .28);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 0;
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
}

.brand-copy {
    min-width: 0;
}

.brand-mark {
    width: 48px;
    height: 48px;
    border-radius: var(--r);
    border: 1px solid rgba(var(--login-accent-rgb), .34);
    background: var(--bg);
    object-fit: contain;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .36);
}

/* 自定义品牌图标 <img>：撑满并等比适配 logo 容器、继承容器圆角。
   缺此规则时 <img> 会按原图像素尺寸渲染、挤在容器角落 = 自定义头像错位（各容器 .mhdr-logo/.brand-mark/.brand-mark-svg/.login2-logo 均 flex 居中，只给了 svg 尺寸没管 img）。 */
.brand-icon-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;          /* 填满 logo 方块、居中、裁掉溢出边——非正方形头像不再留白错位（如需完整不裁改回 contain）*/
    border-radius: inherit;
    overflow: hidden;
}

.brand-name {
    font-weight: 800;
    font-size: 16px;
    color: var(--amber-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brand-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }

.wallet-panel {
    border: 1px solid rgba(var(--login-accent-rgb), .32);
    background: linear-gradient(135deg, rgba(var(--login-accent-rgb), .12), rgba(15, 16, 21, .96));
    border-radius: var(--r);
    padding: 12px;
}

.wallet-label {
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 2px;
}

.wallet-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-height: 32px;
}

.wallet-value span {
    color: var(--amber-2);
    font-size: 24px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    min-width: 0;
    overflow-wrap: anywhere;
}

.wallet-value small { color: var(--muted); }

.wallet-hint {
    margin-top: 6px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

.wallet-hint:empty { display: none; }

.wallet-hint.is-fresh { color: var(--muted); }

.wallet-hint.is-stale { color: var(--danger); }

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nav-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--muted);
    text-decoration: none;
    border-radius: var(--r);
    border: 1px solid transparent;
    transition: background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast);
}

.nav-item:hover,
.nav-item.is-active {
    background: linear-gradient(90deg, rgba(var(--login-accent-rgb), .13), rgba(25, 26, 33, .9));
    color: var(--text);
    border-color: var(--line);
}

.nav-item.is-active {
    border-color: var(--brand);
    box-shadow: inset 3px 0 0 var(--brand), 0 10px 22px rgba(0, 0, 0, .18);
    font-weight: 700;
}

.nav-item:hover { transform: translateX(2px); }

.nav-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--olive-2);
    border: 1px solid rgba(var(--login-accent-rgb), .28);
    border-radius: var(--r-sm);
    font-size: 13px;
    background: rgba(var(--login-accent-rgb), .08);
}

.player-chip {
    margin-top: auto;
    border-top: 1px solid var(--line-soft);
    padding-top: 14px;
}

.player-label {
    color: var(--muted);
    font-size: 12px;
}

.player-name {
    margin-top: 2px;
    font-weight: 700;
    word-break: break-word;
}

.player-status {
    margin-top: 10px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: var(--panel-2);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.player-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: var(--faint);
    box-shadow: 0 0 0 3px rgba(160, 147, 131, .16);
}

.player-status.is-online {
    color: var(--ok);
    border-color: rgba(var(--ok-rgb), .28);
    background: rgba(var(--ok-rgb), .08);
}

.player-status.is-online .player-status-dot {
    background: var(--ok);
    box-shadow: 0 0 0 3px rgba(var(--ok-rgb), .16);
}

.player-status.is-stale {
    color: var(--warn-2);
    border-color: rgba(var(--gold-rgb), .32);
    background: rgba(var(--gold-rgb), .10);
}

.player-status.is-stale .player-status-dot {
    background: var(--warn);
    box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .16);
}

.player-status.is-offline {
    color: var(--danger-2);
    border-color: rgba(var(--danger-rgb), .30);
    background: rgba(var(--danger-rgb), .08);
}

.player-status.is-offline .player-status-dot {
    background: var(--danger);
    box-shadow: 0 0 0 3px rgba(var(--danger-rgb), .16);
}

.player-online-hint {
    margin-top: 7px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.38;
}

.main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.topbar {
    min-height: 78px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--line);
    background: rgba(11, 11, 15, .9);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
    position: sticky;
    top: 0;
    z-index: 20;
}

.eyebrow {
    color: var(--amber-2);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.page-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-box {
    width: min(360px, 38vw);
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: rgba(17, 18, 24, .94);
    color: var(--muted);
}

.search-input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
}

.search-input::placeholder { color: var(--faint); }

.search-go {
    flex: 0 0 auto;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    line-height: 1;
}

.search-go:hover,
.search-go:focus-visible {
    color: var(--accent);
}

.icon-btn,
.mini-btn,
.seg-btn,
.primary-btn,
.danger-btn,
.chip,
.tab {
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: rgba(17, 18, 24, .94);
    color: var(--text);
    cursor: pointer;
    transition: background var(--fast), border-color var(--fast), transform var(--fast), opacity var(--fast);
}

.icon-btn {
    width: 44px;
    min-width: 44px;
    padding: 0;
    font-size: 20px;
}

.icon-btn:hover,
.mini-btn:hover,
.seg-btn:hover,
.chip:hover,
.tab:hover {
    background: var(--panel-2);
    border-color: var(--amber);
}

.primary-btn {
    min-width: 112px;
    padding: 0 16px;
    background: var(--buy);
    border-color: var(--buy);
    /* color 由覆盖块 .primary-btn 的 var(--on-brand) 声明接管，原写死 #0a0a0e 已删 */
    font-weight: 800;
}

.primary-btn:hover { background: var(--amber-2); border-color: var(--amber-2); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(var(--login-accent-rgb), .18); }
.danger-btn { padding: 0 16px; background: rgba(var(--danger-rgb), .14); border-color: rgba(var(--danger-rgb), .46); font-weight: 700; } /* color 由覆盖块 .danger-btn 的 var(--danger-2) 声明接管，原写死 #ffe5df 已删 */
.danger-btn:hover { border-color: var(--danger-2); background: rgba(var(--danger-rgb), .2); }

.mini-btn,
.primary-btn.mini,
.danger-btn.mini {
    min-height: 34px;
    min-width: auto;
    padding: 0 12px;
    font-size: 12px;
}

button:disabled {
    opacity: .48;
    cursor: not-allowed;
    transform: none;
}

.content {
    padding: 22px;
    min-height: calc(100vh - 78px);
}

.boot-card,
.empty-panel {
    width: min(620px, 100%);
    margin: 80px auto;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: rgba(17, 18, 24, .94);
    padding: 28px;
    box-shadow: var(--shadow-soft);
    animation: enter var(--normal) ease-out;
}

.empty-panel.compact {
    width: 100%;
    margin: 0;
    padding: 26px;
    text-align: center;
}

.empty-panel h2,
.empty-panel h3,
.boot-card strong {
    margin: 0 0 8px;
    display: block;
}

.empty-panel p,
.boot-card span {
    color: var(--muted);
    margin: 0;
}

.loader-line {
    height: 3px;
    width: 100%;
    background: var(--line-soft);
    overflow: hidden;
    border-radius: 99px;
    margin-bottom: 18px;
}

.loader-line::before {
    content: "";
    display: block;
    height: 100%;
    width: 42%;
    background: linear-gradient(90deg, var(--olive), var(--amber), var(--danger));
    animation: shimmer 1.1s linear infinite;
}

.market-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 398px;
    gap: 18px;
    align-items: start;
}

/* 网格/弹性子项宽度兜底：防止 nowrap 内容（如分类横滑行）把列撑破视口 */
.market-list-pane,
.single-pane {
    min-width: 0;
}

.single-pane,
.market-list-pane,
.detail-panel {
    animation: enter var(--normal) ease-out;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.section-head h2 {
    margin: 0;
    font-size: 20px;
}

.section-head p {
    margin: 4px 0 0;
    color: var(--muted);
    max-width: 720px;
}

.filter-bar {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: rgba(17, 18, 24, .92);
    padding: 12px;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.filter-bar.compact { padding: 10px 12px; }

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.chip {
    padding: 0 12px;
    color: var(--muted);
}

.chip.is-active,
.seg-btn.is-active,
.tab.is-active {
    border-color: var(--brand);
    background: rgba(var(--login-accent-rgb), .14);
    color: var(--text);
    font-weight: 800;
}

.seg-btn { padding: 0 12px; color: var(--muted); }

.select {
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
    color: var(--text);
    padding: 0 12px;
    outline: 0;
}

.result-area { min-height: 360px; }

.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 12px;
}

.item-card:hover,
.item-card.is-selected {
    border-color: var(--brand);
    background: linear-gradient(135deg, rgba(36, 37, 46, .98), rgba(17, 18, 24, .98));
    box-shadow: var(--shadow-soft);
}

.star-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: rgba(9, 9, 13, .78);
    color: var(--faint);
    cursor: pointer;
}

.star-btn.is-on {
    color: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 8px 16px rgba(var(--gold-rgb), .18);
}

.item-card .star-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

.listing-kicker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--faint);
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.listing-kicker span + span {
    color: var(--olive-2);
}

.item-meta strong,
.listing-foot strong,
.price {
    color: var(--warn-2);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: rgba(17, 18, 24, .95);
}

.market-row:hover,
.market-row.is-selected {
    border-color: var(--brand);
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
}

.market-row .star-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 2;
}

.row-metric.is-price strong {
    color: var(--warn-2);
}

.table-wrap.tight { border-radius: var(--r-sm); }

.section-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 680px;
}

.manage-sale-table {
    min-width: 820px;
}

.data-table th,
.data-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    vertical-align: middle;
}

.data-table th {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    background: rgba(9, 9, 13, .48);
}

.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: rgba(var(--login-accent-rgb), .06); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.table-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 210px;
}

.table-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: var(--bg);
    flex: 0 0 auto;
}

.table-item b {
    display: block;
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-item small {
    display: block;
    color: var(--muted);
}

.detail-panel {
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 122px);
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: rgba(9, 9, 13, .98);
    box-shadow: var(--shadow);
}

.detail-empty,
.detail-loading {
    min-height: 360px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.detail-empty-mark {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--amber-2);
    font-size: 24px;
    background: rgba(var(--login-accent-rgb), .08);
}

.detail-empty p,
.detail-loading span { color: var(--muted); }

.buy-panel .primary-btn {
    width: 100%;
}

.purchase-modal {
    max-width: 500px;
}

.purchase-line.is-balance {
    background: rgba(var(--brand-rgb), .08);
    border-color: rgba(var(--brand-rgb), .22);
}

.purchase-line.is-unit {
    background: rgba(var(--gold-rgb), .08);
    border-color: rgba(var(--gold-rgb), .22);
}

.purchase-line.is-time,
.purchase-line.is-pickup {
    background: rgba(160, 147, 131, .10);
}

.purchase-choice-tabs .mini-btn.is-active {
    border-color: var(--brand);
    color: var(--text);
    background: rgba(var(--login-accent-rgb), .18);
}

.info-block {
    padding: 0 16px 16px;
}

.info-block h3 {
    margin: 8px 0 10px;
    font-size: 14px;
}

.info-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.info-table th,
.info-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--line-soft);
}

.info-table tr:last-child th,
.info-table tr:last-child td { border-bottom: 0; }

.info-table th {
    width: 92px;
    color: var(--muted);
    text-align: left;
    background: var(--panel-2);
}

.display-card-list,
.message-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fold-card {
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: rgba(9, 9, 13, .28);
    overflow: hidden;
}

.fold-card[open] {
    border-color: rgba(var(--login-accent-rgb), .28);
}

.fold-card summary {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 10px;
    color: var(--text);
    cursor: pointer;
    font-weight: 800;
    transition: background var(--fast), color var(--fast);
}

.fold-card summary:hover {
    background: rgba(var(--login-accent-rgb), .06);
}

.fold-card summary small {
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fold-card summary::-webkit-details-marker {
    color: var(--gold);
}

.fold-body {
    padding: 0 10px 10px;
}

.display-card h4 {
    margin: 10px 0 8px;
    color: var(--muted);
    font-size: 12px;
}

.metric-grid,
.advanced-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.metric-cell {
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: rgba(17, 18, 24, .72);
    padding: 9px;
    min-height: 58px;
}

.metric-cell span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.metric-cell strong {
    display: block;
    margin-top: 2px;
    color: var(--text);
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.data-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 8px;
    border: 1px solid rgba(var(--login-accent-rgb), .28);
    border-radius: var(--r-sm);
    background: rgba(var(--login-accent-rgb), .08);
    color: var(--amber-2);
    font-size: 12px;
    font-weight: 700;
}

.detail-note {
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: rgba(17, 18, 24, .62);
    color: var(--muted);
    padding: 10px;
}

.display-table-wrap {
    overflow-x: auto;
    margin-top: 10px;
}

.display-matrix {
    min-width: 520px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
}

.display-table + h4,
.display-table + .display-table {
    margin-top: 10px;
}

.empty-inline {
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: rgba(9, 9, 13, .46);
    color: var(--muted);
    padding: 12px;
}

.empty-inline h3,
.empty-inline p {
    margin: 0;
}

.empty-inline p {
    margin-top: 4px;
}

.manage-stack {
    display: grid;
    gap: 16px;
}

.manage-section {
    display: grid;
    gap: 10px;
}

.manage-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.manage-section-head h3 {
    margin: 0;
    font-size: 16px;
}

.manage-section-head span {
    color: var(--muted);
    font-size: 12px;
}

/* 自有求购行左侧品牌色归属条：活类名 .bo-row.is-own（旧死类名 .buyorder-card.is-own 已废）。
   .bo-row 为 grid 无定位基线，故对自有行单独开启 position:relative 并画绝对定位左条，不动基础网格布局。 */
.bo-row.is-own { position: relative; }
.bo-row.is-own::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: rgba(var(--brand-rgb), .70);
    border-radius: 0 2px 2px 0;
    pointer-events: none;
}

.bo-progress {
    height: 9px;
    border: 1px solid var(--line-soft);
    border-radius: 99px;
    background: rgba(9, 9, 13, .22);
    overflow: hidden;
}

.bo-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand), var(--gold));
}

.own-chip {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(var(--brand-rgb), .30);
    border-radius: var(--r-sm);
    background: rgba(var(--brand-rgb), .10);
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.message-card {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: rgba(17, 18, 24, .95);
    overflow: hidden;
}

.notice-line {
    border: 1px solid rgba(var(--gold-rgb), .42);
    border-radius: var(--r);
    /* color 由下方 Light market redesign 覆盖块（.notice-line, 无条件同特异性后置）接管为 var(--gold-strong) */
    background: rgba(var(--gold-rgb), .1);
    padding: 10px 12px;
    margin-bottom: 14px;
}

.tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
}

.tab {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 0 18px;
    color: var(--muted);
}

.pager {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--muted);
}

.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 12px;
}

.skeleton-card {
    height: 148px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    background: var(--panel);
    padding: 12px;
    overflow: hidden;
    position: relative;
}

.skeleton-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 70%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    animation: shimmer 1.2s linear infinite;
}

.skeleton-card span,
.skeleton-card b,
.skeleton-card i {
    display: block;
    background: var(--line-soft);
    border-radius: var(--r-sm);
}

.skeleton-card span { width: 96px; height: 96px; margin-top: 14px; }
.skeleton-card b { height: 18px; margin: -82px 44px 0 122px; }
.skeleton-card i { height: 14px; margin: 14px 44px 0 122px; width: auto; }

/* 行状骨架（消息记录等单行卡列表）——形状贴合行卡：左圆标 + 两行文本条。 */
.skeleton-rows { display: flex; flex-direction: column; gap: 10px; }
.skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 64px;
    padding: 0 14px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    background: var(--panel);
    overflow: hidden;
    position: relative;
}
.skeleton-row::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 70%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    animation: shimmer 1.2s linear infinite;
}
.skeleton-row span,
.skeleton-row b,
.skeleton-row i {
    display: block;
    background: var(--line-soft);
    border-radius: var(--r-sm);
}
.skeleton-row span { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; }
.skeleton-row b { height: 16px; width: 42%; }
.skeleton-row i { height: 12px; width: 22%; margin-left: auto; }

.modal-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    background: var(--overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    animation: fade var(--fast) ease-out;
}

.modal {
    width: min(480px, 100%);
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
    box-shadow: var(--shadow);
    animation: enter var(--normal) ease-out;
}

.modal-head {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}

.modal-head h3 {
    margin: 0;
    font-size: 18px;
}

.modal-body {
    padding: 14px;
}

.modal label {
    display: block;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 12px;
}

.modal input,
.modal select {
    width: 100%;
    min-height: 42px;
    margin-top: 5px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bg);
    color: var(--text);
    padding: 0 10px;
    outline: 0;
}

.modal input:focus,
.modal select:focus {
    border-color: var(--amber);
}

.form-note {
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    padding: 10px;
    color: var(--muted);
    background: rgba(9, 9, 13, .46);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--line);
}

.toast {
    position: fixed;
    left: 50%;
    top: 86px;
    z-index: 140;
    transform: translate(-50%, 0);
    min-height: 52px;
    min-width: 286px;
    max-width: min(560px, calc(100vw - 28px));
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 12px 14px;
    border: 1px solid rgba(var(--brand-rgb), .28);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(var(--panel-rgb), .99), rgba(var(--panel-rgb), .98));
    box-shadow:
        0 24px 64px rgba(32, 26, 16, .24),
        0 8px 20px rgba(var(--brand-rgb), .16),
        inset 0 1px 0 rgba(var(--panel-rgb), .92);
    color: var(--text);
    overflow: hidden;
    pointer-events: none;
    animation: toastIn 180ms cubic-bezier(.2, .8, .2, 1);
}

.toast::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--ok);
}

.toast-mark {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #ffffff;
    font-weight: 900;
    font-size: 16px;
    line-height: 1;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        0 8px 18px rgba(var(--ok-rgb), .24);
}

.toast-text {
    min-width: 0;
    color: var(--text);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0;
}

.toast.ok {
    border-color: rgba(var(--ok-rgb), .44);
}

.toast.ok .toast-mark {
    background: linear-gradient(180deg, rgba(var(--ok-rgb), 1), rgba(var(--ok-rgb), .75));
}

.toast.err {
    border-color: rgba(var(--danger-rgb), .48);
}

.toast.err::before {
    background: var(--danger);
}

.toast.err .toast-mark {
    background: linear-gradient(180deg, rgba(var(--danger-rgb), 1), rgba(var(--danger-rgb), .75));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        0 8px 18px rgba(var(--danger-rgb), .24);
}

/* Light market redesign */
body.market-app {
    background: var(--bg);
}

.layout {
    /* 首层幕布走 --hero-veil-*：light 压过曝、dark 保持原值（见令牌块注释）。
       不用 [data-theme="dark"] .layout 反向覆盖——那会以 (0,2,0) 特异性击穿
       @media(max-width:780px) 的移动端 .layout 背景（(0,1,0)），令牌方案零级联风险。 */
    background:
        linear-gradient(110deg, rgba(var(--panel-rgb), var(--hero-veil-1)), rgba(var(--panel-rgb), var(--hero-veil-2)) 46%, rgba(var(--panel-rgb), var(--hero-veil-3))),
        radial-gradient(circle at 24% 22%, rgba(var(--panel-rgb), .60), transparent 30%),
        radial-gradient(circle at 78% 34%, rgba(var(--brand-rgb), .18), transparent 28%),
        url("market-hero-redgold.png"),
        var(--bg);
    background-blend-mode: normal, normal, normal, multiply, normal;
    background-position: center, center, center, center;
}

.sidebar,
.topbar,
.filter-bar,
.boot-card,
.empty-panel,
.table-wrap,
.detail-panel,
.message-card,
.modal,
.toast {
    background: rgba(var(--panel-rgb), .94);
    border-color: var(--line);
    box-shadow: var(--shadow-soft);
}

.sidebar {
    background: rgba(var(--panel-rgb), .96);
    box-shadow: 12px 0 28px rgba(56, 42, 24, .08);
}

.topbar {
    background: rgba(var(--panel-rgb), .92);
    box-shadow: 0 12px 30px rgba(56, 42, 24, .08);
}

.brand-mark {
    border-color: rgba(var(--brand-rgb), .28);
    background:
        radial-gradient(circle at 50% 24%, rgba(var(--panel-rgb), .88), transparent 32%),
        linear-gradient(145deg, var(--panel-3), var(--panel));
    box-shadow: 0 8px 18px rgba(56, 42, 24, .12);
}

.brand-name { color: var(--brand); }

.wallet-panel {
    border-color: rgba(var(--brand-rgb), .24);
    background: linear-gradient(135deg, rgba(var(--brand-rgb), .10), rgba(var(--panel-rgb), .96));
}

.wallet-value span,
.eyebrow,
.listing-kicker span + span,
.detail-title small,
.data-badge {
    color: var(--brand);
}

.nav-item:hover,
.nav-item.is-active {
    background: linear-gradient(90deg, rgba(var(--brand-rgb), .12), rgba(var(--panel-rgb), .92));
    border-color: var(--line);
}

.nav-item.is-active {
    border-color: rgba(var(--brand-rgb), .55);
    box-shadow: inset 3px 0 0 var(--brand), 0 10px 22px rgba(56, 42, 24, .08);
}

.nav-icon,
.detail-empty-mark,
.stat-ico {
    color: var(--brand);
    border-color: rgba(var(--brand-rgb), .22);
    background: rgba(var(--brand-rgb), .10);
}

.search-box,
.icon-btn,
.mini-btn,
.seg-btn,
.chip,
.tab,
.select {
    background: rgba(var(--panel-rgb), .90);
    color: var(--text);
    border-color: var(--line);
}

.icon-btn:hover,
.mini-btn:hover,
.seg-btn:hover,
.chip:hover,
.tab:hover {
    background: var(--panel-2);
    border-color: rgba(var(--brand-rgb), .55);
}

.primary-btn {
    color: var(--on-brand);
    background: var(--cta-bg);
    border-color: var(--cta-bg);
}

.primary-btn:hover {
    color: var(--on-brand);
    background: var(--cta-bg-2);
    border-color: var(--cta-bg-2);
    box-shadow: 0 10px 22px rgba(var(--buy-rgb), .18);
}

.danger-btn {
    color: var(--danger-2);
    background: rgba(var(--danger-rgb), .08);
    border-color: rgba(var(--danger-rgb), .30);
}

.danger-btn:hover {
    color: var(--danger-2);
    background: rgba(var(--danger-rgb), .13);
}

.chip.is-active,
.seg-btn.is-active,
.tab.is-active {
    background: rgba(var(--brand-rgb), .12);
    border-color: rgba(var(--brand-rgb), .55);
    color: var(--brand);
}

.loader-line::before {
    background: linear-gradient(90deg, var(--brand), var(--steel), var(--gold));
}

.item-card:hover,
.item-card.is-selected,
.market-row:hover,
.market-row.is-selected,
.buyorder-card:hover {
    background: linear-gradient(135deg, var(--panel), var(--panel-2));
    border-color: rgba(var(--brand-rgb), .58);
    box-shadow: var(--shadow-soft);
}

.star-btn {
    background: rgba(var(--panel-rgb), .90);
    border-color: var(--line);
}

.star-btn.is-on {
    background: rgba(var(--gold-rgb), .12);
    color: var(--gold);
    border-color: rgba(var(--gold-rgb), .48);
}

.item-art,
.table-img,
.detail-art,
.detail-modal-art {
    background:
        radial-gradient(circle at 50% 32%, rgba(255, 255, 255, .5), transparent 30%),
        radial-gradient(circle at 50% 62%, rgba(255, 255, 255, .08), transparent 34%),
        linear-gradient(180deg, var(--item-stage-2), var(--item-stage));
    border-color: rgba(90, 60, 20, .18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        inset 0 -18px 34px rgba(90, 60, 20, .08),
        0 8px 18px rgba(90, 60, 20, .12);
}

/* dark 观感已验收：逐字恢复改前深色值（暖色化只作用于 light） */
[data-theme="dark"] .item-art,
[data-theme="dark"] .table-img,
[data-theme="dark"] .detail-art,
[data-theme="dark"] .detail-modal-art {
    background:
        radial-gradient(circle at 50% 32%, rgba(160, 147, 131, .30), transparent 30%),
        radial-gradient(circle at 50% 62%, rgba(255, 255, 255, .08), transparent 34%),
        linear-gradient(180deg, var(--item-stage-2), var(--item-stage));
    border-color: rgba(36, 29, 20, .20);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        inset 0 -18px 34px rgba(0, 0, 0, .18),
        0 8px 18px rgba(36, 29, 20, .10);
}

.price,
.item-meta strong,
.listing-foot strong {
    color: var(--warn-2);
}

.data-table th {
    background: var(--panel-2);
}

.data-table tbody tr:hover td {
    background: rgba(var(--brand-rgb), .06);
}

.detail-panel {
    background: rgba(var(--panel-rgb), .96);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.detail-top.compact {
    padding: 16px 16px 12px;
}

.seller-trust,
.stat-box,
.metric-cell,
.row-metric,
.fold-card,
.detail-note,
.empty-inline,
.form-note {
    background: var(--panel-2);
    border-color: var(--line-soft);
}

.stat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: var(--panel-2);
}

.stat-ico {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    font-size: 15px;
    line-height: 1;
}

.stat-copy {
    min-width: 0;
}

.stat-copy span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.stat-copy strong {
    display: block;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.fold-card[open] {
    border-color: rgba(var(--brand-rgb), .34);
}

.fold-card summary:hover {
    background: rgba(var(--brand-rgb), .06);
}

.data-badge {
    background: rgba(var(--brand-rgb), .09);
    border-color: rgba(var(--brand-rgb), .24);
}

.bo-progress {
    background: rgba(160, 147, 131, .35);
}

.notice-line {
    color: var(--gold-strong);
    background: rgba(var(--gold-rgb), .10);
    border-color: rgba(var(--gold-rgb), .30);
}

.modal-mask {
    background: var(--overlay);
}

.modal input,
.modal select {
    background: var(--panel);
    color: var(--text);
}

.detail-modal {
    width: min(980px, 100%);
    max-height: calc(100vh - 36px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.detail-modal-head {
    flex: 0 0 auto;
}

.detail-modal-body {
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.detail-modal-hero {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 18px;
    padding: 18px;
    border-bottom: 1px solid var(--line-soft);
    background: linear-gradient(135deg, var(--panel), var(--panel-2));
}

.detail-modal-art-wrap {
    min-width: 0;
}

.detail-modal-art {
    width: 100%;
    height: 214px;
    object-fit: contain;
    border-radius: var(--r);
}

.detail-modal-copy {
    min-width: 0;
    position: relative;
    padding-right: 46px;
}

.detail-modal-copy h2 {
    margin: 8px 0 6px;
    font-size: 28px;
    line-height: 1.2;
}

.detail-modal-copy p {
    margin: 0 0 14px;
    color: var(--muted);
}

.detail-modal-star {
    position: absolute;
    top: 0;
    right: 0;
}

.detail-modal-statgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.detail-modal-main {
    padding: 16px 18px 18px;
}

.detail-modal-main .info-block {
    padding: 0;
}

.detail-modal-main .info-block h3 {
    margin-top: 0;
    font-size: 16px;
}

.detail-modal-actions {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
    background: rgba(var(--panel-rgb), .96);
}

.toast {
    background:
        linear-gradient(180deg, rgba(var(--panel-rgb), .99), rgba(var(--panel-rgb), .98));
    border-color: rgba(var(--brand-rgb), .28);
    box-shadow:
        0 24px 64px rgba(32, 26, 16, .24),
        0 8px 20px rgba(var(--brand-rgb), .16),
        inset 0 1px 0 rgba(var(--panel-rgb), .92);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        transition-duration: 1ms !important;
    }
}

@supports (min-height: 100dvh) {
    .layout {
        min-height: 100dvh;
    }

    .content {
        min-height: calc(100dvh - 78px);
    }

    .detail-panel {
        max-height: calc(100dvh - 122px);
    }

    .modal,
    .detail-modal {
        max-height: calc(100dvh - 36px);
    }
}

@media (max-width: 1460px) {
    .market-row,
    .buyorder-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .market-row-metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .buyorder-metrics {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .market-row-side,
    .buyorder-action {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        padding-right: 0;
    }
}

@media (max-width: 1080px) {
    .market-workbench { grid-template-columns: minmax(0, 1fr); }
    .detail-panel {
        position: static;
        max-height: none;
    }
}

@media (max-height: 760px) and (min-width: 1081px) {
    .detail-panel {
        top: 88px;
        max-height: calc(100vh - 104px);
    }
    .detail-art {
        height: 150px;
    }
    .detail-top.compact {
        padding: 12px;
    }
    .buy-panel {
        padding: 12px;
        gap: 8px;
    }
    .purchase-summary-head strong {
        font-size: 20px;
    }
    .purchase-stats {
        padding: 10px 12px;
        gap: 6px;
    }
    .purchase-actions {
        padding: 0 12px 12px;
    }
    .stat-row {
        min-height: 38px;
        padding: 6px 8px;
    }
}

@media (max-height: 620px) and (min-width: 1081px) {
    .detail-art {
        height: 118px;
    }
    .detail-title small {
        margin-top: 8px;
    }
    .detail-title h2 {
        font-size: 18px;
    }
}

@media (max-width: 780px) {
    html {
        scroll-padding-bottom: calc(var(--mobile-nav-h) + var(--safe-bottom) + 18px);
    }

    .layout {
        display: block;
        min-height: 100dvh;
        background:
            linear-gradient(180deg, rgba(var(--panel-rgb), .94), rgba(var(--panel-rgb), .82)),
            url("market-hero-redgold.png"),
            var(--bg);
        background-position: center top;
        background-size: cover;
    }
    .sidebar {
        width: 100%;
        min-height: auto;
        position: relative;
        top: auto;
        z-index: 30;
        padding: 12px 14px 0;
        gap: 10px;
        border-right: 0;
        border-bottom: 0;
        box-shadow: none;
    }

    .brand-block {
        min-height: 46px;
    }

    .brand-mark {
        width: 42px;
        height: 42px;
    }

    .brand-sub {
        display: none;
    }

    .wallet-panel {
        padding: 10px 12px;
    }

    .wallet-value span {
        font-size: 20px;
    }

    .player-chip {
        margin-top: 0;
        padding: 10px 0 12px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 10px;
        border-top: 1px solid var(--line-soft);
        border-bottom: 1px solid var(--line-soft);
    }

    .player-label {
        grid-column: 1;
    }

    .player-name {
        grid-column: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .player-status {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        min-height: 34px;
        margin-top: 0;
        white-space: nowrap;
    }

    .player-online-hint {
        grid-column: 1 / -1;
        margin-top: 0;
    }

    .nav-menu {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
        gap: 8px;
        min-height: calc(var(--mobile-nav-h) + var(--safe-bottom));
        padding: 8px 10px calc(8px + var(--safe-bottom));
        border-top: 1px solid var(--line);
        background: rgba(var(--panel-rgb), .96);
        box-shadow: 0 -16px 36px rgba(56, 42, 24, .16);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .nav-item {
        min-width: 0;
        min-height: 56px;
        padding: 6px 4px;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        border-radius: var(--r);
        background: transparent;
        color: var(--muted);
        font-size: 11px;
        font-weight: 800;
        line-height: 1.15;
        text-align: center;
    }

    .nav-item:hover {
        transform: none;
    }

    .nav-item.is-active {
        border-color: rgba(var(--brand-rgb), .44);
        background: rgba(var(--brand-rgb), .12);
        box-shadow: inset 0 3px 0 var(--brand), 0 8px 18px rgba(56, 42, 24, .08);
        color: var(--brand);
    }

    .nav-icon {
        width: 24px;
        height: 24px;
        font-size: 13px;
    }

    .topbar {
        position: sticky;
        top: 0;
        z-index: 20;
        min-height: auto;
        flex-direction: column;
        align-items: stretch;
        padding: 12px 14px;
    }

    .topbar .topbar-actions {
        width: 100%;
        max-width: none;
        display: flex !important;
        align-items: center;
        gap: 6px;
        overflow: hidden;
    }
    .topbar .search-box {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        max-width: none;
    }

    .topbar .icon-btn {
        width: 44px;
        min-width: 44px;
    }

    .content {
        padding: 14px 14px calc(14px + var(--mobile-nav-h) + var(--safe-bottom));
        padding-bottom: calc(14px + var(--mobile-nav-h) + var(--safe-bottom));
        min-height: calc(100dvh - 72px);
    }

    .toast {
        top: 66px;                            /* spec §0.4：移动端 toast top 66px（居中用 translate(-50%)） */
        min-width: 0;
        width: calc(100vw - 28px);
    }
    .market-row {
        grid-template-columns: 1fr;
        gap: 12px;
        padding-right: 14px;
    }
    .market-row-product {
        padding-right: 28px;
    }
    .market-row-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .buyorder-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .market-row-side {
        align-items: stretch;
        flex-direction: row;
        justify-content: space-between;
        padding-right: 0;
    }
    .buyorder-action {
        justify-content: stretch;
    }
    .buyorder-action .primary-btn,
    .buyorder-action .danger-btn,
    .buyorder-action .own-chip {
        width: 100%;
        justify-content: center;
    }
    .market-row-side span {
        white-space: normal;
    }
    .boot-card,
    .empty-panel {
        width: 100%;
        margin: 18px 0;
        padding: 22px;
    }
    .filter-bar {
        align-items: stretch;
        flex-direction: column;
    }
    .control-row { flex-wrap: wrap; }
    .summary-grid,
    .module-grid,
    .advanced-grid,
    .metric-grid { grid-template-columns: 1fr; }
    .detail-modal {
        max-height: calc(100vh - 16px);
    }
    .detail-modal-hero {
        grid-template-columns: 1fr;
        padding: 14px;
    }
    .detail-modal-art {
        height: 154px;
    }
    .detail-modal-copy {
        padding-right: 44px;
    }
    .detail-modal-copy h2 {
        font-size: 22px;
    }
    .detail-modal-statgrid {
        grid-template-columns: 1fr;
    }
    .message-summary {
        grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
    }
    .message-action {
        text-align: left;
    }

    .table-wrap,
    .display-table-wrap {
        -webkit-overflow-scrolling: touch;
        scroll-margin-bottom: calc(var(--mobile-nav-h) + var(--safe-bottom) + 16px);
    }

    .mini-btn,
    .primary-btn.mini,
    .danger-btn.mini,
    .seg-btn,
    .chip,
    .tab,
    .admin-tab,
    .modal input,
    .modal select,
    .admin-input {
        min-height: 44px;
    }

    .star-btn {
        width: 44px;
        height: 44px;
    }

    .admin-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .admin-tab {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    /* ── 表单 sheet 化（spec-mobile-gallery §5）：≤780px 时 modal() 走底部升起 sheet。
       modal-mask flex-end 贴底、面板全宽 radius 16px16px0 0、把手条、max-height 88% 内滚、
       pa-rise 190ms 升起、z 提到 133（≥详情 130 之上，与购买/确认同阶）、
       actions 堆叠（提交 370×48 在上 / 取消 370×40 文字钮在下，非并排右下）。桌面行为零改动。 */
    .modal-mask {
        align-items: flex-end;
        padding: 0;
        z-index: 133;
    }
    .modal {
        width: 100%;
        max-width: none;
        max-height: 88%;
        border: 1px solid var(--line);
        border-bottom: 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -12px 40px rgba(45, 34, 20, .22);
        animation: pa-rise var(--normal) var(--ease);
    }
    /* 顶部居中把手视觉条（与详情/确认 sheet 一致，纯视觉，无拖拽逻辑） */
    .modal::before {
        content: "";
        display: block;
        width: 40px;
        height: 4px;
        margin: 8px auto 0;
        border-radius: 999px;
        background: var(--line);
    }
    .modal-head { min-height: 0; padding: 8px 16px 10px; }
    .modal-body { padding: 4px 16px 8px; }
    .modal-actions {
        flex-direction: column-reverse;    /* DOM 顺序：取消 → 提交；column-reverse 使提交在上、取消在下 */
        align-items: stretch;
        gap: 8px;
        padding: 8px 16px calc(20px + var(--safe-bottom));
        border-top: 0;
    }
    .modal-actions .primary-btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }
    .modal-actions .mini-btn {
        width: 100%;
        min-height: 40px;
        justify-content: center;
        border: 0;
        background: transparent;
        color: var(--muted);
    }
}

/* ============================================================
   移动端专属双行 header（spec-mobile-gallery §1.1）
   ≤780px：隐藏 index.php 复用的桌面 topbar/侧栏顶条，改用 JS 注入的 .mhdr。
   桌面（>780px）由 .mhdr 默认 display:none 隐藏，桌面 chrome 原样保留。
   ============================================================ */
.mhdr { display: none; }
@media (max-width: 780px) {
    /* 隐藏反流的桌面 chrome：侧栏顶条（品牌/钱包切换/钱包面板/玩家卡）与桌面 topbar 桌面件。
       余额/退出等功能已在移动视图内（市场余额卡/「我的」退出），无功能损失。 */
    .brand-block,
    .wallet-panel,
    .player-chip,
    .topbar { display: none !important; }
    /* 移动端侧栏所有内容已由 .mhdr（顶栏）/.mnav（底导航）/「我的」页承载；整条隐藏，
       消除 .layout(block) 下侧栏占位造成的余额卡上方 ~30px 空白。DOM 保留(display:none)，bindShell 查询不报错。 */
    .sidebar { display: none; }

    .mhdr {
        display: block;
        position: sticky;
        top: 0;
        z-index: 30;
        padding: calc(10px + var(--safe-top, 0px)) 16px 10px;
        background: var(--panel);
        border-bottom: 1px solid var(--line-soft);
    }
    .mhdr-row1 {
        display: flex;
        align-items: center;
        gap: 9px;
    }
    .mhdr-logo {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--r);
        background: linear-gradient(150deg, var(--brand), #6d0818);
        box-shadow: inset 0 0 0 1px rgba(230, 184, 78, .35);
        color: var(--gold-strong);
    }
    .mhdr-logo svg { display: block; }
    .mhdr-title {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 16px;
        font-weight: 900;
        letter-spacing: -0.02em;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mhdr-title .mhdr-t1 { color: var(--text); }
    .mhdr-title .mhdr-t2 { color: var(--brand); }
    .mhdr-title .mhdr-t3 { color: var(--muted); }
    .mhdr-btn {
        flex: 0 0 auto;
        position: relative;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--line-soft);
        border-radius: var(--r);
        background: var(--panel);
        color: var(--gold);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mhdr-btn svg { display: block; }
    /* 主题按钮 36×36（spec §1.1）：提升特异性压过下方 @media 的 .theme-toggle{44×44}（那条是为桌面 topbar 补触摸目标） */
    .mhdr .theme-toggle { width: 36px; height: 36px; background: var(--panel); border: 1px solid var(--line-soft); }
    .mhdr-bell { color: var(--muted); }
    .mhdr-bell-dot {
        display: none;               /* 默认无红点；仅当真有未读消息时由 JS(syncMobileNav) 置为显示 */
        position: absolute;
        top: 6px;
        right: 6px;
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: var(--brand);
        box-shadow: 0 0 0 1.5px var(--panel);
    }
    .mhdr-row2 {
        position: relative;
        display: flex;
        align-items: center;
        margin-top: 10px;
        height: 40px;
        border: 1px solid var(--line);
        border-radius: var(--r);
        background: var(--bg-2);
    }
    .mhdr-search-ico {
        flex: 0 0 auto;
        margin-left: 11px;
        display: flex;
        color: var(--faint);
    }
    .mhdr-search-ico svg { display: block; }
    .mhdr-search-input {
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
        border: 0;
        background: transparent;
        color: var(--text);
        padding: 0 12px 0 8px;
        font-size: 16px;             /* 防 iOS 缩放 */
        outline: 0;
    }
    .mhdr-search-input::placeholder { color: var(--faint); }

    /* 移动 header 存在时，内容区顶部无需再为桌面 topbar 让位（.topbar 已隐藏，.sidebar 归零） */
    .main { min-height: 0; }
}

/* ============================================================
   移动端底部导航（spec-mobile-gallery §1.2）+「我的」聚合视图（§2.5）
   桌面（>780px）由 .mnav 默认 display:none 隐藏；移动端隐藏 index.php 侧栏反流的 .nav-menu。
   ============================================================ */
.mnav { display: none; }
@media (max-width: 780px) {
    /* index.php 侧栏 nav 在移动端由 .mnav 取代，隐藏反流的底部条 */
    .nav-menu { display: none !important; }

    .mnav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 0;
        padding: 8px 6px calc(8px + var(--safe-bottom));
        background: var(--panel);
        border-top: 1px solid var(--line-soft);
        box-shadow: 0 -12px 30px rgba(0, 0, 0, .10);
    }
    [data-theme="dark"] .mnav { box-shadow: 0 -12px 30px rgba(0, 0, 0, .40); }
    .mnav-item {
        position: relative;
        min-height: 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: 0;
        background: transparent;
        color: var(--muted);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mnav-ico { color: var(--faint); display: flex; }
    .mnav-ico svg { display: block; }
    .mnav-lbl { font-size: 10.5px; font-weight: 700; line-height: 1; }
    .mnav-item.is-active { color: var(--brand); }
    .mnav-item.is-active .mnav-ico { color: var(--brand); }
    .mnav-pill {
        position: absolute;
        top: 2px;
        right: 50%;
        margin-right: -19px;
        min-width: 15px;
        height: 15px;
        padding: 0 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--brand);
        color: var(--on-brand);
        font-size: 9.5px;
        font-weight: 800;
        line-height: 1;
    }

    /* 「我的」聚合视图 */
    .me-view { display: flex; flex-direction: column; gap: 12px; }
    .me-card {
        background: var(--panel);
        border: 1px solid var(--line-soft);
        border-radius: var(--r);
        box-shadow: var(--shadow-soft);
    }
    .me-user {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 13px;
    }
    .me-avatar {
        position: relative;
        flex: 0 0 auto;
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: var(--panel-3);
        color: var(--gold-strong);
        font-size: 16px;
        font-weight: 800;
    }
    .me-avatar-dot {
        position: absolute;
        right: -2px;
        bottom: -2px;
        width: 12px;
        height: 12px;
        border-radius: 999px;
        border: 2px solid var(--panel);
    }
    .me-user-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .me-user-copy b { font-size: 18px; font-weight: 800; color: var(--text); }
    .me-user-copy small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .me-user-pill {
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 999px;
        background: var(--tint-ok);
    }

    /* 余额卡（市场页与「我的」共用样式基线）*/
    .mbal {
        position: relative;
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 8px 13px;                    /* spec §2.1：余额卡 370×64；收紧竖向内距贴近目标高度 */
        overflow: hidden;
    }
    .mbal-bar {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(var(--gold), var(--brand));
    }
    .mbal-coin { color: var(--gold); display: flex; }
    .mbal-copy { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
    .mbal-copy small { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
    .mbal-copy b { font-size: 20px; font-weight: 900; color: var(--gold-strong); font-variant-numeric: tabular-nums; }

    .me-bind { padding: 14px 13px; display: flex; flex-direction: column; gap: 10px; }
    .me-card-head h3 { font-size: 15px; font-weight: 800; margin: 0; color: var(--text); }
    .me-card-head p { font-size: 11.5px; color: var(--muted); margin: 3px 0 0; }
    #meBindBody { display: flex; flex-direction: column; gap: 10px; }
    .me-input {
        width: 100%;
        min-height: 44px;
        padding: 0 12px;
        border: 1px solid var(--line);
        border-radius: var(--r);
        background: var(--bg-2);
        color: var(--text);
        font-size: 16px;
    }
    .me-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .18); }
    .me-bind .pw-wrap { width: 100%; }
    .me-bind-err { font-size: 12.5px; }
    .me-save {
        min-height: 44px;
        border: 0;
        border-radius: var(--r);
        background: var(--buy, var(--brand));
        color: var(--on-brand);
        font-size: 15px;
        font-weight: 800;
        cursor: pointer;
    }

    .me-settings { display: flex; flex-direction: column; padding: 0 4px; }
    .me-row {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 50px;
        padding: 6px 9px;
        border: 0;
        border-bottom: 1px solid var(--line-soft);
        background: transparent;
        color: var(--text);
        font-size: 14.5px;
        text-align: left;
        cursor: pointer;
    }
    .me-settings .me-row:last-child { border-bottom: 0; }
    .me-row-ico { color: var(--muted); display: flex; }
    .me-row-lbl { flex: 1 1 auto; font-weight: 600; }
    .me-row-val { font-size: 13px; color: var(--muted); }
    .me-row-badge {
        font-size: 11px;
        font-weight: 700;
        padding: 2px 9px;
        border-radius: 999px;
        color: var(--brand);
        background: var(--tint-brand);
    }
    .me-row-chev { color: var(--faint); font-size: 18px; }
    .me-row.is-danger { color: var(--danger); }
    .me-row.is-danger .me-row-ico { color: var(--danger); }

    /* 「我的」视图内容不被底部导航遮挡 */
    body.market-app .content { padding-bottom: calc(18px + 66px + var(--safe-bottom)); }

    /* ========================================================
       移动端市场视图（spec-mobile-gallery §2.1）
       ======================================================== */
    .mmk-view { display: flex; flex-direction: column; gap: 12px; }
    .mmk-bal { min-height: 64px; }

    /* 分类 chips 横向滚动（32px 高） */
    .mmk-chips {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        margin: 0 -2px;
        padding: 0 2px;
    }
    .mmk-chips::-webkit-scrollbar { display: none; }
    .mmk-chip {
        flex: 0 0 auto;
        height: 32px;
        padding: 0 13px;
        display: inline-flex;
        align-items: center;
        border: 1px solid var(--line-soft);
        border-radius: var(--r);
        background: var(--panel);
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mmk-chip.is-active { border-color: var(--brand); background: var(--tint-brand); color: var(--brand); }

    /* 区头行：热门挂单 N 件在售 + 3 排序 chips */
    .mmk-listhead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
    }
    .mmk-listtitle { display: flex; align-items: baseline; gap: 8px; }
    .mmk-listtitle b { font-size: 15px; font-weight: 800; color: var(--text); }
    .mmk-listtitle span { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
    .mmk-sortchips { display: flex; gap: 6px; }
    .mmk-sortchip {
        height: 28px;
        padding: 0 11px;
        display: inline-flex;
        align-items: center;
        border: 1px solid var(--line-soft);
        border-radius: var(--r);
        background: var(--panel);
        color: var(--muted);
        font-size: 11.5px;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mmk-sortchip.is-active { border-color: var(--brand); background: var(--tint-brand); color: var(--brand); }

    /* 双列卡片格 */
    .mmk-body { min-height: 40px; }
    .mmk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
    .mmk-card {
        display: flex;
        flex-direction: column;
        background: var(--panel);
        border: 1px solid var(--line-soft);
        border-radius: var(--r);
        box-shadow: var(--shadow-soft);
        overflow: hidden;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mmk-card-stage {
        position: relative;
        aspect-ratio: 4 / 3;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(120% 100% at 50% 12%, var(--item-stage-2), var(--item-stage));
        box-shadow: var(--item-line);
    }
    .mmk-card-glow {
        position: absolute;
        left: 50%;
        top: 46%;
        width: 55%;
        height: 58%;
        transform: translate(-50%, -50%);
        background: radial-gradient(circle, var(--item-glow), transparent 62%);
        pointer-events: none;
    }
    .mmk-card-art {
        position: relative;
        width: 78px;
        height: 78px;
        max-width: 80%;
        max-height: 80%;
        object-fit: contain;
        opacity: .92;
    }
    .mmk-card .mk-card-badge,
    .mmk-card .dp2-badge {
        position: absolute;
        top: 7px;
        left: 7px;
        padding: 1px 8px;
        border-radius: 999px;
        font-size: 10.5px;
        font-weight: 700;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
    .mmk-card-info { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 10px; }
    .mmk-card-name {
        margin: 0;
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.3;
        color: var(--text);
        min-height: 2.6em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .mmk-card-remark {
        font-size: 10.5px;
        color: var(--gold-strong);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mmk-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
    .mmk-card-price {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        color: var(--gold-strong);
        font-size: 14.5px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }
    .mmk-card-price svg { color: var(--gold); }
    .mmk-card-id { font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

    /* ========================================================
       移动端收购视图（spec-mobile-gallery §2.2）+ 管理求购卡（§2.3）
       ======================================================== */
    .mbo-view { display: flex; flex-direction: column; gap: 12px; }
    .mbo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px; }
    .mbo-head-copy { display: flex; flex-direction: column; gap: 2px; }
    .mbo-head-copy b { font-size: 16px; font-weight: 800; color: var(--text); }
    .mbo-head-copy small { font-size: 11.5px; color: var(--muted); }
    .mbo-create {
        flex: 0 0 auto;
        width: 96px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: 0;
        border-radius: var(--r);
        background: var(--buy, var(--brand));
        color: var(--on-brand);
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mbo-create svg { display: block; }
    .mbo-sorts { gap: 8px; }
    .mbo-body { display: flex; flex-direction: column; gap: 11px; }
    .mbo-list { display: flex; flex-direction: column; gap: 11px; }
    .mbo-tailhint { text-align: center; font-size: 11.5px; color: var(--faint); padding: 2px 0 4px; }

    .mbo-card {
        background: var(--panel);
        border: 1px solid var(--line-soft);
        border-radius: var(--r);
        box-shadow: var(--shadow-soft);
        padding: 12px 13px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mbo-card-head { display: flex; align-items: flex-start; gap: 10px; }
    .mbo-card-icon {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: var(--panel-3);
        overflow: hidden;
    }
    .mbo-card-art { width: 36px; height: 36px; max-width: 88%; max-height: 88%; object-fit: contain; }
    .mbo-card-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .mbo-card-title b { font-size: 15px; font-weight: 800; color: var(--text); }
    .mbo-card-title small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mbo-diff { flex: 0 0 auto; align-self: flex-start; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
    .mbo-diff.is-below { color: var(--faint); }
    .mbo-diff.is-above { color: var(--gold-strong); }
    .mbo-diff.is-even { color: var(--muted); }

    .mbo-card-body { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; }
    .mbo-stats { display: flex; gap: 18px; }
    .mbo-stat { display: flex; flex-direction: column; gap: 2px; }
    .mbo-stat small { font-size: 10.5px; color: var(--muted); }
    .mbo-stat b {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-size: 14.5px;
        font-weight: 800;
        color: var(--gold-strong);
        font-variant-numeric: tabular-nums;
    }
    .mbo-stat b svg { color: var(--gold); }
    .mbo-sell {
        flex: 0 0 auto;
        min-width: 78px;                      /* spec §2.2：出售给他 78×38 */
        height: 38px;
        padding: 0 12px;
        border: 0;
        border-radius: var(--r);
        background: var(--buy, var(--brand));
        color: var(--on-brand);
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mbo-own {
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 700;
        color: var(--muted);
        padding: 0 10px;
    }

    /* 管理求购卡（§2.3）：冻结款 + 进度条 + 取消求购 */
    .mbo-card.is-manage .mbo-card-head { align-items: flex-start; }
    .mbo-card-frozen { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; gap: 2px; }
    .mbo-card-frozen small { font-size: 10.5px; color: var(--muted); }
    .mbo-card-frozen b { font-size: 16px; font-weight: 800; color: var(--gold-strong); font-variant-numeric: tabular-nums; }
    .mbo-progress {
        position: relative;
        height: 5px;
        margin: 12px 0 6px;
        border-radius: 999px;
        background: var(--bg-2);
        overflow: hidden;
    }
    .mbo-progress span {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--gold), var(--brand));
    }
    .mbo-progress-lbl { font-size: 11.5px; color: var(--muted); }
    .mbo-card-actions { display: flex; gap: 11px; margin-top: 11px; }
    .mbo-btn {
        flex: 1 1 0;
        min-height: 40px;
        border: 1px solid var(--line);
        border-radius: var(--r);
        background: var(--panel);
        color: var(--text);
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mbo-btn.is-danger { color: var(--danger); }

    /* ========================================================
       移动端管理视图（spec-mobile-gallery §2.3）
       ======================================================== */
    .mmg-view { display: flex; flex-direction: column; gap: 12px; }
    .mmg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px; }
    .mmg-head-copy { display: flex; flex-direction: column; gap: 2px; }
    .mmg-head-copy b { font-size: 16px; font-weight: 800; color: var(--text); }
    .mmg-head-copy small { font-size: 11.5px; color: var(--muted); }
    .mmg-list-btn {
        flex: 0 0 auto;
        min-width: 71px;
        height: 36px;
        padding: 0 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: 0;
        border-radius: var(--r);
        background: var(--buy, var(--brand));
        color: var(--on-brand);
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mmg-list-btn svg { display: block; }

    /* 分段 tab（在售/求购） */
    .mseg {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        padding: 3px;
        border-radius: var(--r);
        background: var(--bg-2);
    }
    .mseg-btn {
        min-height: 34px;
        border: 0;
        border-radius: var(--r-sm, 4px);
        background: transparent;
        color: var(--muted);
        font-size: 14px;
        font-weight: 800;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mseg-btn.is-active { background: var(--panel); color: var(--brand); box-shadow: var(--shadow-soft); }

    .mmg-body { display: flex; flex-direction: column; gap: 11px; }
    .mmg-sale-card {
        background: var(--panel);
        border: 1px solid var(--line-soft);
        border-radius: var(--r);
        box-shadow: var(--shadow-soft);
        padding: 12px 13px;
    }
    .mmg-sale-top { display: flex; align-items: center; gap: 10px; }
    .mmg-sale-icon {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: var(--panel-3);
        overflow: hidden;
    }
    .mmg-sale-icon img { width: 30px; height: 30px; object-fit: contain; }
    .mmg-sale-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .mmg-sale-copy b { font-size: 15px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mmg-sale-copy small { font-size: 11.5px; color: var(--muted); }
    .mmg-sale-copy .is-ok { color: var(--ok); font-weight: 700; }
    .mmg-sale-copy .is-soon { color: var(--gold-strong); font-weight: 700; }
    .mmg-sale-amount {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-size: 16px;
        font-weight: 800;
        color: var(--gold-strong);
        font-variant-numeric: tabular-nums;
    }
    .mmg-sale-amount svg { color: var(--gold); }
    .mmg-sale-actions { display: flex; gap: 11px; margin-top: 11px; }
    .mmg-sale-btn {
        flex: 1 1 0;
        min-height: 40px;
        border: 1px solid var(--line);
        border-radius: var(--r);
        background: var(--panel);
        color: var(--text);
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mmg-sale-btn.is-danger { color: var(--danger); }
    .mmg-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 26px 12px; }

    /* ========================================================
       移动端消息视图（spec-mobile-gallery §2.4）
       ======================================================== */
    .mmsg-view { display: flex; flex-direction: column; gap: 12px; }
    .mmsg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px; }
    .mmsg-head-copy { display: flex; flex-direction: column; gap: 2px; padding: 0; }
    .mmsg-head-copy b { font-size: 20px; font-weight: 800; color: var(--text); }
    .mmsg-head-copy small { font-size: 12px; color: var(--muted); }
    .mmsg-bulk { flex: 0 0 auto; white-space: nowrap; }
    .mseg.mmsg-seg { grid-template-columns: 1fr 1fr 1fr; }
    .mmsg-body { display: flex; flex-direction: column; gap: 11px; }
    .mmsg-card {
        background: var(--panel);
        border: 1px solid var(--line-soft);
        border-radius: var(--r);
        box-shadow: var(--shadow-soft);
        padding: 12px 13px;
    }
    .mmsg-card-top { display: flex; align-items: center; gap: 10px; }
    .mmsg-ico {
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
    }
    .mmsg-ico.is-brand { background: var(--tint-brand); color: var(--brand); }
    .mmsg-ico.is-gold { background: var(--tint-gold); color: var(--gold-strong); }
    .mmsg-ico.is-neutral { background: var(--panel-3); color: var(--muted); }
    .mmsg-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .mmsg-copy b { font-size: 14.5px; font-weight: 800; color: var(--text); }
    .mmsg-copy small { font-size: 11.5px; color: var(--muted); }
    .mmsg-amount {
        flex: 0 0 auto;
        font-size: 15px;
        font-weight: 800;
        color: var(--text);
        font-variant-numeric: tabular-nums;
    }
    .mmsg-amount.is-in { color: var(--ok); }
    .mmsg-amount.is-neutral { font-size: 12px; color: var(--muted); font-weight: 700; }
    .mmsg-pickup {
        width: 100%;
        min-height: 40px;
        margin-top: 11px;
        border: 0;
        border-radius: var(--r);
        background: var(--buy, var(--brand));
        color: var(--on-brand);
        font-size: 14px;
        font-weight: 800;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mmsg-pickup:disabled { background: var(--panel-3); color: var(--faint); cursor: default; }
    .mmsg-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 26px 12px; }
}

@media (max-width: 460px) {
    .topbar .topbar-actions {
        display: flex !important;
        align-items: center;
        gap: 6px;
        overflow: hidden;
    }
    .topbar .search-box {
        flex: 1 1 auto;
        width: auto !important;
        max-width: none;
    }
    .nav-menu {
        grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
        gap: 6px;
        padding-left: 6px;
        padding-right: 6px;
    }

    .nav-item {
        min-height: 54px;
        font-size: 10.5px;
    }

    .nav-icon {
        width: 22px;
        height: 22px;
    }

    .item-grid,
    .skeleton-grid { grid-template-columns: 1fr; }
    .item-card {
        min-height: 132px;
        gap: 10px;
        padding: 10px;
    }
    .listing-media {
        width: 88px;
        min-width: 88px;
        padding-right: 10px;
    }
    .listing-media .item-art {
        width: 76px;
        height: 76px;
    }
    .listing-info { padding-right: 30px; }
    .item-card h3 { font-size: 14px; }
    .market-badges {
        gap: 5px;
    }
    .section-head {
        flex-direction: column;
        align-items: stretch;
    }
    .message-summary {
        grid-template-columns: 1fr;
    }
    .detail-modal-actions {
        flex-direction: column;
    }
    .detail-modal-actions .primary-btn,
    .detail-modal-actions .mini-btn {
        width: 100%;
    }
}

/* 管理后台 */
@media (max-width: 900px) and (max-height: 520px) {
    :root {
        --mobile-nav-h: var(--mobile-nav-h-compact);
    }

    html {
        scroll-padding-bottom: calc(var(--mobile-nav-h) + var(--safe-bottom) + 12px);
    }

    .layout {
        display: block;
        min-height: 100dvh;
    }

    .sidebar {
        width: 100%;
        min-height: auto;
        position: relative;
        top: auto;
        z-index: 30;
        padding: 8px 12px 0;
        gap: 8px;
        border-right: 0;
        border-bottom: 0;
        box-shadow: none;
    }

    .brand-block {
        min-height: 42px;
    }

    .brand-mark {
        width: 38px;
        height: 38px;
    }

    .brand-sub {
        display: none;
    }

    .wallet-panel {
        padding: 8px 10px;
    }

    .player-chip {
        margin-top: 0;
        padding: 8px 0 10px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 10px;
        border-top: 1px solid var(--line-soft);
        border-bottom: 1px solid var(--line-soft);
    }

    .player-label,
    .player-name {
        grid-column: 1;
    }

    .player-status {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        min-height: 34px;
        margin-top: 0;
        white-space: nowrap;
    }

    .player-online-hint {
        grid-column: 1 / -1;
        margin-top: 0;
    }

    .nav-menu {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
        gap: 6px;
        min-height: calc(var(--mobile-nav-h) + var(--safe-bottom));
        padding: 5px 10px calc(6px + var(--safe-bottom));
        border-top: 1px solid var(--line);
        background: rgba(var(--panel-rgb), .96);
        box-shadow: 0 -16px 36px rgba(56, 42, 24, .16);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .nav-item {
        min-width: 0;
        min-height: 48px;
        flex-direction: row;
        justify-content: center;
        gap: 5px;
        padding: 5px 6px;
        background: transparent;
        color: var(--muted);
        font-size: 11px;
        font-weight: 800;
        line-height: 1.15;
        text-align: center;
    }

    .nav-item:hover {
        transform: none;
    }

    .nav-item.is-active {
        border-color: rgba(var(--brand-rgb), .44);
        background: rgba(var(--brand-rgb), .12);
        box-shadow: inset 0 3px 0 var(--brand), 0 8px 18px rgba(56, 42, 24, .08);
        color: var(--brand);
    }

    .nav-icon {
        width: 20px;
        height: 20px;
    }

    .topbar {
        min-height: auto;
        flex-direction: column;
        align-items: stretch;
        padding: 10px 12px;
    }

    .topbar .topbar-actions {
        width: 100%;
        max-width: none;
        display: flex !important;
        align-items: center;
        gap: 6px;
        overflow: hidden;
    }

    .topbar .search-box {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        max-width: none;
    }

    .topbar .icon-btn {
        width: 44px;
        min-width: 44px;
    }

    .content {
        padding: 12px 12px calc(12px + var(--mobile-nav-h) + var(--safe-bottom));
        padding-bottom: calc(12px + var(--mobile-nav-h) + var(--safe-bottom));
    }
}

.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.admin-tab {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: rgba(var(--panel-rgb), .90);
    color: var(--muted);
    cursor: pointer;
    font-weight: 700;
    transition: background var(--fast), border-color var(--fast), color var(--fast);
}

.admin-tab:hover {
    background: var(--panel-2);
    border-color: rgba(var(--brand-rgb), .55);
}

.admin-tab.is-active {
    background: rgba(var(--brand-rgb), .12);
    border-color: rgba(var(--brand-rgb), .55);
    color: var(--brand);
    font-weight: 800;
}

.admin-pane {
    display: grid;
    gap: 16px;
    animation: enter var(--normal) ease-out;
}

.admin-block {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: rgba(var(--panel-rgb), .94);
    box-shadow: var(--shadow-soft);
}

.admin-block h3 {
    margin: 0 0 12px;
    font-size: 15px;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.admin-stat-card {
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: var(--panel-2);
    padding: 14px;
    min-height: 78px;
}

.admin-stat-card span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.admin-stat-card strong {
    display: block;
    margin-top: 4px;
    font-size: 26px;
    font-weight: 800;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}

.admin-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.admin-input {
    min-height: 40px;
    min-width: 180px;
    flex: 0 1 220px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
    color: var(--text);
    padding: 0 10px;
    outline: 0;
}

.admin-input:focus {
    border-color: var(--amber);
}

.admin-input-sm {
    min-width: 110px;
    flex: 0 0 110px;
}

.admin-faint {
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}

/* 信誉分管理面板（admin reputation） */
.rep-card {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
    padding: 16px;
    max-width: 640px;
}

.rep-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.rep-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.rep-sid {
    font-size: 12px;
}

.rep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.rep-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.rep-stat-l {
    font-size: 12px;
    color: var(--faint);
}

.rep-stat-v {
    font-size: 15px;
    font-weight: 700;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.rep-edit {
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.rep-lbl {
    display: block;
    font-size: 12px;
    color: var(--faint);
    margin-bottom: 8px;
}

.rep-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.admin-form-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}

.admin-form-row label {
    flex: 0 0 140px;
    color: var(--muted);
    font-weight: 700;
}

.admin-form-row input {
    flex: 1 1 auto;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--panel);
    color: var(--text);
    padding: 0 10px;
    outline: 0;
}

.admin-form-row input:focus {
    border-color: var(--amber);
}

.admin-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.cfg-section-title {
    border-left: 3px solid var(--brand);
    padding-left: 8px;
}

.cfg-subsection {
    border-top: 1px solid var(--line);
    margin-top: 14px;
    padding-top: 12px;
}

.cfg-subsection-title {
    margin: 0 0 6px;
    font-size: 14px;
    color: var(--text);
}

.cfg-subsection-note {
    flex: none;
    margin: 0 0 10px;
}

.ll-extra-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.ll-extra-row .ll-extra-perm {
    flex: 1;
}

.ll-extra-row .ll-extra-amt {
    flex: 0 0 110px;
    width: 110px;
}

.ll-extra-row input {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--panel);
    color: var(--text);
    padding: 8px 10px;
    outline: 0;
    font: inherit;
}

.ll-extra-row input:focus {
    border-color: var(--amber);
}

.ll-extra-actions {
    margin-top: 4px;
}

.cfg-hint {
    flex: 0 0 100%;
    color: var(--muted);
    font-size: 12px;
    margin: -2px 0 0 152px;
}

/* 152px 缩进只对 admin-form-row 的标签栅格有意义；admin-filter 下会溢出 */
.admin-filter .cfg-hint {
    margin-left: 0;
}

.admin-detail-cell {
    display: inline-block;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 780px) {
    .admin-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .admin-tab {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .admin-form-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .admin-form-row label {
        flex: none;
    }
    .admin-input {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }
}

/* —— 价格/数量显示优化（贴合主题配色，仅用现有变量）—— */

.market-badge.is-qty {
    background: rgba(var(--gold-rgb), .12);
    border-color: rgba(var(--gold-rgb), .18);
    color: var(--gold);
}

.market-badge.is-total {
    background: rgba(var(--gold-rgb), .16);
    border-color: rgba(var(--gold-rgb), .26);
    color: var(--warn-2);
}

.market-badge.is-unit {
    background: var(--olive);
    border-color: rgba(var(--brand-rgb), .20);
    color: var(--olive-2);
}

.market-badge.is-time {
    background: rgba(160, 147, 131, .12);
    border-color: rgba(160, 147, 131, .18);
    color: var(--muted);
}

/* 列表指标:数量用金色区分,单件价用品牌绿 */
.row-metric.is-qty strong {
    color: var(--gold);
}

.row-metric.is-unit strong {
    color: var(--brand);
}

/* ============================================================
   邮件集成（发件 / 预设 / 队列 / 审计）
   ============================================================ */
.mail-compose {
    max-width: 780px;
}

/* 表单行：复用 .admin-form-row，但本区用 <span> 作标签列，并支持 select/textarea */
.mail-compose .admin-form-row > span {
    flex: 0 0 96px;
    color: var(--muted);
    font-weight: 700;
}

.mail-compose .admin-form-row select,
.mail-compose .admin-form-row textarea {
    flex: 1 1 auto;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--panel);
    color: var(--text);
    padding: 8px 10px;
    outline: 0;
}

.mail-compose .admin-form-row select:focus,
.mail-compose .admin-form-row textarea:focus,
.mail-compose .admin-form-row input:focus {
    border-color: var(--brand);
}

.mail-compose .admin-form-row .cfg-hint {
    flex-basis: 100%;
    margin: 2px 0 0 108px;
}

.mail-body-row {
    align-items: flex-start;
}

.mail-compose textarea.admin-input {
    width: 100%;
    min-height: 88px;
    resize: vertical;
    line-height: 1.5;
}

/* 两列自适应（窄屏自动单列） */
.mail-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0 18px;
}

.mail-preset-fill {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.mail-preset-fill .select {
    flex: 1 1 240px;
}

/* —— (⑨邮件发送 demo 对齐) 更多目标 / 高级选项折叠 + 发送按钮 —— */
.mail-more-targets,
.mail-adv-opts {
    margin-top: 10px;
}
.mail-more-targets > summary,
.mail-adv-opts > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
    padding: 2px 0;
}
.mail-more-targets > summary::-webkit-details-marker,
.mail-adv-opts > summary::-webkit-details-marker { display: none; }
.mail-more-targets > summary::before,
.mail-adv-opts > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 6px;
    color: var(--muted);
    transition: transform var(--fast);
}
.mail-more-targets[open] > summary::before,
.mail-adv-opts[open] > summary::before { transform: rotate(90deg); }
.mail-more-targets > .admin-form-row { margin-top: 8px; }
.mail-tgt-val { margin-top: 10px; }
/* 发送邮件红色主按钮：全宽、突出（demo 红「发送邮件」）*/
.mail-send-cta {
    width: 100%;
    justify-content: center;
    font-size: 14.5px;
    padding: 12px 18px;
}

.mail-att-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.mail-att-count {
    color: var(--faint);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* 附件构建器：每条附件一行，类型驱动字段显隐 */
.att-builder {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.att-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: var(--panel-2);
}

/* 覆盖 .admin-input 的 min-width，让附件字段在一行内自由收缩 */
.att-row .admin-input {
    min-width: 0;
    flex: 1 1 90px;
}

.att-row .att-type {
    flex: 0 0 96px;
    min-width: 0;
}

.att-row .att-group,
.att-row .att-command {
    flex: 2 1 180px;
}

.att-row .att-del {
    flex: 0 0 auto;
    margin-left: auto;
}

/* 行内操作按钮组（预设列表 编辑/删除） */
.mail-row-ops {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

/* 队列状态徽标：语义色（待发=琥珀 / 处理中=青 / 完成=绿 / 失败=红） */
.mail-badge {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--line);
    white-space: nowrap;
}

.mail-badge.is-pending {
    color: var(--amber-2);
    background: rgba(var(--gold-rgb), .12);
    border-color: rgba(var(--gold-rgb), .40);
}

.mail-badge.is-proc {
    color: var(--olive-2);
    background: rgba(var(--brand-rgb), .12);
    border-color: rgba(var(--brand-rgb), .40);
}

.mail-badge.is-done {
    color: var(--ok);
    background: rgba(var(--ok-rgb), .12);
    border-color: rgba(var(--ok-rgb), .40);
}

.mail-badge.is-fail {
    color: var(--danger-2);
    background: rgba(var(--danger-rgb), .12);
    border-color: rgba(var(--danger-rgb), .40);
}

@media (max-width: 560px) {
    .mail-compose .admin-form-row > span { flex-basis: 100%; }
    .mail-compose .admin-form-row .cfg-hint { margin-left: 0; }
    .att-row .att-del { margin-left: 0; }
}

/* ============================================================
   账号密码登录页 + 用户管理面板
   登录页常暗；用户管理面板在 .content 内、跟随主题。
   ============================================================ */

/* —— 全屏登录页（fixed 覆盖，脱离 sidebar，响应式居中）——
   常暗 = 设计要求（redesign-brief：登录页保持黑金终端观感，两主题下一致）。
   实现：CSS 变量局部作用域——在 .login-screen 子树内按 login 子树实际
   消费面覆写 dark 值（28/47 子集，非全量照抄顶部 [data-theme="dark"] 块），
   登录页内部规则全走变量，故 light 主题下整段自动翻暗，与 dark 完全一致。
   注意：①顶部 dark 令牌块若改值，此处需同步；②login 内新增消费主题令牌
   的元素时，须回查此块确认所用令牌已覆写，缺则补，防 light 值静默泄漏。 */

.login-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.login-field input {
    width: 100%;
    padding: 12px;
    min-height: 44px; /* 触控目标 */
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--bg-2);
    color: var(--text);
    font-size: 16px; /* ≥16px 防 iOS 聚焦缩放 */
    transition: border-color var(--fast), box-shadow var(--fast);
}
.login-field input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .18);
}
.login-screen .primary-btn { min-height: 44px; }
.login-err,
.account-err {
    color: var(--danger-2);
    font-size: 13px;
    background: rgba(var(--danger-rgb), .10);
    border: 1px solid rgba(var(--danger-rgb), .28);
    padding: 8px 10px;
    border-radius: var(--r);
}

/* —— 双模式登录页（令牌 / 账密）· 两主题恒暗黑金 · 硬编码色（spec-mobile-gallery §6）——
   与 charts/主题令牌完全解耦：所有色值写死，不随 data-theme 翻转。 */
.login2-screen {
    color-scheme: dark;
    position: fixed;
    inset: 0;
    z-index: 138; /* 同 .login-screen：盖住 modal/详情/购买/confirm，低于 toast */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    padding-bottom: calc(24px + var(--safe-bottom));
    background:
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(220, 174, 81, .01) 3px 4px),
        radial-gradient(120% 90% at 50% 0%, #1c1520 0%, #0e0d10 55%, #0a0a0e 100%);
    animation: fade var(--normal) ease both;
}
.login2-card {
    width: 360px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 24px 22px;
    border-radius: 8px;
    background: rgba(25, 23, 28, .88);
    border: 1px solid #2f2a31;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 20px 46px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(220, 174, 81, .08);
    animation: enter var(--normal) ease both;
}
.login2-head { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.login2-logo {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(150deg, #e6293f, #6d0818);
    box-shadow: inset 0 0 0 1px rgba(220, 174, 81, .4), 0 8px 20px rgba(230, 41, 63, .28);
    color: #eec66d;
}
.login2-logo svg { display: block; }
.login2-title { font-size: 20px; font-weight: 900; letter-spacing: -.02em; color: #f0eae0; }
.login2-title .lg-a { color: #e6293f; font-weight: 900; }
.login2-title .lg-dot { color: #a49a8e; font-weight: 900; }
.login2-sub { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: #6f6759; }
.login2-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 2px;
    border-radius: 6px;
    background: #151318;
    border: 1px solid #252128;
}
.login2-seg-btn {
    min-height: 34px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #a49a8e;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--fast), color var(--fast);
}
.login2-seg-btn.is-active { background: #2a2028; color: #eec66d; }
.login2-pane { display: flex; flex-direction: column; gap: 10px; }
.login2-tip {
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(220, 174, 81, .08);
    border: 1px solid rgba(220, 174, 81, .22);
    font-size: 12px;
    line-height: 1.7;
    color: #dcae51;
}
.login2-tip b { font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace; font-weight: 700; }
.login2-input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #2f2a31;
    border-radius: 6px;
    background: #151318;
    color: #f0eae0;
    font-size: 13.5px;
    transition: border-color var(--fast), box-shadow var(--fast);
}
.login2-input::placeholder { color: #6f6759; }
.login2-input.login2-mono { font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace; }
.login2-input:focus { outline: none; border-color: #e6293f; box-shadow: 0 0 0 3px rgba(230, 41, 63, .22); }
.login2-pane .pw-wrap .pw-toggle { color: #a49a8e; height: 42px; }
.login2-pane .pw-wrap .pw-toggle:hover { color: #eec66d; }
.login2-err {
    color: #ff7a6f;
    font-size: 13px;
    background: rgba(255, 90, 77, .10);
    border: 1px solid rgba(255, 90, 77, .28);
    padding: 8px 10px;
    border-radius: 6px;
}
.login2-submit {
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: 6px;
    background: #e6293f;
    color: #fff5f2;
    font-size: 14.5px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(230, 41, 63, .3);
    transition: background var(--fast);
}
.login2-submit:hover { background: #ff4d63; }
.login2-submit:disabled { opacity: .75; cursor: default; }
.login2-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
}
.login2-status.is-ok { color: #35c17e; }
.login2-status svg { display: block; }
.login2-foot {
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px solid #252128;
    font-size: 11px;
    line-height: 1.7;
    color: #6f6759;
    text-align: center;
}
.login2-foot b { font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace; font-weight: 700; color: #a49a8e; }
@media (max-height: 620px) {
    .login2-screen { align-items: flex-start; overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .login2-screen, .login2-card { animation: none; }
}

/* 密码显示/隐藏切换（眼睛）——登录页与用户管理共用 */
.pw-wrap { position: relative; display: flex; }
.pw-wrap input { flex: 1 1 auto; width: 100%; padding-right: 48px; }
.pw-toggle {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 44px; height: 40px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer;
    color: var(--muted); border-radius: var(--r-sm);
    transition: color var(--fast);
}
.pw-toggle:hover { color: var(--brand); }
.pw-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; color: var(--brand); }
.pw-toggle svg { display: block; }

/* —— 用户管理面板（在 .content 内，风格与其它视图一致）—— */
.account-pane { max-width: 480px; }
.account-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border-radius: var(--r);
    background: var(--panel);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-soft);
}
.account-card .login-field { color: var(--muted); }

.account-row.is-readonly > span { color: var(--muted); }

.account-badge.is-on { color: var(--ok); background: rgba(var(--ok-rgb), .12); border-color: rgba(var(--ok-rgb), .35); }
.account-badge.is-off { color: var(--muted); background: rgba(160, 147, 131, .14); border-color: var(--line); }

@media (max-width: 480px) {
    .login-card { max-width: 100%; }
    .account-pane { max-width: 100%; }
    .account-card { padding: 16px; }
}

/* 矮屏（手机横屏 + 软键盘弹出）：卡片顶对齐并允许滚动，避免底部按钮/提示被裁到视口外。 */
@media (max-height: 560px) {
    .login-screen { align-items: flex-start; overflow-y: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .login-screen, .login-card { animation: none; }
}

/* ============================================================
   移动端大改 —— 商品详情底部 sheet（桌面默认隐藏 sheet 外壳）
   ============================================================ */
.detail-sheet-head { display: none; }
.detail-backdrop { display: none; }

/* 竖屏手机之外，短横屏手机（如 844x390）同样走底部 sheet，与横屏移动布局块条件一致 */
@media (max-width: 780px), (max-width: 900px) and (max-height: 520px) {
    /* 详情由「堆在整页最底的 1059px 静态块」改为「点击后从底部弹出的 sheet」 */
    .detail-panel {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        width: 100%;
        max-height: 86vh;
        margin: 0;
        z-index: 130;                    /* 高于固定底栏 */
        background: var(--panel);
        border: 1px solid var(--line);
        border-bottom: 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -12px 40px rgba(45, 34, 20, .22);
        display: flex;
        flex-direction: column;
        transform: translateY(101%);     /* 默认收起 */
        transition: transform var(--normal) var(--ease);
        animation: none;                 /* 覆盖桌面 .detail-panel 的 enter 8px 淡入；升起改由 transform 过渡承担（spec §3 pa-rise 100%） */
        overflow: hidden;
        padding: 0;
    }
    body.detail-open .detail-panel { transform: translateY(0); }

    .detail-sheet-head {
        display: flex; align-items: center; justify-content: center; position: relative;
        padding: 10px 12px 4px; flex: 0 0 auto;
        z-index: 2;
    }
    .detail-sheet-grip { width: 40px; height: 4px; border-radius: 999px; background: var(--line); }
    .detail-sheet-close {
        position: absolute; right: 6px; top: 0;
        width: 44px; height: 44px; padding: 0; margin: 0;
        border: 0; background: transparent; color: var(--muted);
        font-size: 26px; line-height: 1; cursor: pointer; border-radius: var(--r-sm);
    }
    .detail-sheet-close:active { color: var(--brand); }
    .detail-body {
        overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
        flex: 1 1 auto; padding: 0 12px 16px;
    }

    .detail-backdrop {
        position: fixed; inset: 0; z-index: 125;
        background: var(--overlay);
        backdrop-filter: blur(2px);           /* spec §0.4/§3：详情遮罩 2px 高斯模糊 */
        -webkit-backdrop-filter: blur(2px);
    }
    body.detail-open .detail-backdrop { display: block; }
    body.detail-open { overflow: hidden; }   /* sheet 打开时锁住底层滚动 */

    /* sheet 内去掉与「订单摘要」重复的 purchase-stats（订单号/分类/数量/剩余/取货 均已在摘要，卖家已并入摘要），大幅减负 */
    .detail-panel .purchase-stats { display: none; }
    /* 详情图片在 sheet 里收小，避免又一次占满 */
    .detail-panel .detail-art { max-height: 148px; }
    .detail-panel .purchase-card { gap: 12px; }

    /* ========================================================
       移动端详情 sheet · 卡序列结构（spec-mobile-gallery §3）
       ======================================================== */
    .mmk-detail-panel { max-height: 86vh; }
    .mmk-detail-panel .detail-body { padding: 0; }
    .mdt-root { display: flex; flex-direction: column; min-height: 0; height: 100%; }
    .mdt-head {
        flex: 0 0 auto;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 4px 14px 12px;
        border-bottom: 1px solid var(--line-soft);
    }
    .mdt-icon {
        position: relative;
        flex: 0 0 auto;
        width: 52px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: radial-gradient(120% 100% at 50% 12%, var(--item-stage-2), var(--item-stage));
        box-shadow: var(--item-line);
        overflow: hidden;
    }
    .mdt-art { width: 46px; height: 46px; max-width: 88%; max-height: 88%; object-fit: contain; }
    .mdt-badge {
        position: absolute;
        top: 3px;
        left: 3px;
        padding: 0 6px;
        border-radius: 999px;
        font-size: 9px;
        font-weight: 700;
    }
    .mdt-titlecol { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
    .mdt-name { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.25; }
    .mdt-meta { font-size: 12.5px; color: var(--muted); }
    .mdt-remark { font-size: 12.5px; color: var(--gold-strong); font-weight: 600; }
    .mdt-close {
        flex: 0 0 auto;
        width: 32px;                          /* spec §3：右上 × 关闭 32×32 */
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--line-soft);
        border-radius: var(--r);
        background: var(--panel);
        color: var(--muted);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mdt-close:active { color: var(--brand); }

    /* 移动详情页签行（横向可滚）：数值图表/价格走势/在售挂单|求购挂单/属性表格 —— 与桌面同源内容。 */
    .mdt-tabs {
        flex: 0 0 auto;
        display: flex;
        gap: 6px;
        padding: 10px 14px 2px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-bottom: 1px solid var(--line-soft);
    }
    .mdt-tabs::-webkit-scrollbar { display: none; }
    .mdt-tab {
        flex: 0 0 auto;
        padding: 7px 14px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--panel-2);
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mdt-tab.is-active {
        background: var(--brand);
        color: var(--on-brand);
        border-color: var(--brand);
    }
    .mdt-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 12px 14px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .mdt-trend-card { background: var(--bg-2); border-radius: var(--r); padding: 12px; }
    .mdt-card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
    .mdt-card-head b { font-size: 15px; font-weight: 800; color: var(--text); }
    .mdt-card-head small { font-size: 11.5px; color: var(--muted); }
    .mdt-charts { display: flex; flex-direction: column; gap: 14px; }

    .mdt-foot {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px calc(10px + var(--safe-bottom));
        border-top: 1px solid var(--line-soft);
        background: var(--panel);
    }
    .mdt-fav {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--line);
        border-radius: var(--r);
        background: var(--panel);
        color: var(--gold);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mdt-fav.is-on { border-color: var(--gold); background: var(--tint-gold); }
    .mdt-fav.is-on svg { fill: var(--gold); }
    .mdt-buy {
        flex: 1 1 auto;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0;
        border-radius: var(--r);
        background: var(--buy, var(--brand));
        color: var(--on-brand);
        font-size: 15px;
        font-weight: 800;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mdt-buy:disabled { background: var(--panel-3); color: var(--faint); cursor: default; }
    .mdt-buy-ico { display: flex; }

    /* ========================================================
       移动端购买确认 sheet（spec-mobile-gallery §4）
       ======================================================== */
    .pcm-mask {
        display: flex;
        align-items: flex-end;
        justify-content: stretch;
        padding: 0;
        background: var(--overlay);
    }
    .pcm-sheet {
        width: 100%;
        background: var(--panel);
        border-radius: 16px 16px 0 0;
        border-top: 1px solid var(--line);
        box-shadow: 0 -12px 40px rgba(45, 34, 20, .22);
        padding: 8px 16px calc(24px + var(--safe-bottom));
        animation: pa-rise var(--normal, 190ms) var(--ease, ease);
    }
    .pcm-grip { width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 999px; background: var(--line); }
    .pcm-title { font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 14px; }
    .pcm-item { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
    .pcm-item-icon {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: var(--panel-3);
        overflow: hidden;
    }
    .pcm-item-art { width: 38px; height: 38px; max-width: 88%; max-height: 88%; object-fit: contain; }
    .pcm-item-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .pcm-item-copy b { font-size: 15px; font-weight: 800; color: var(--text); }
    .pcm-item-copy small { font-size: 12px; color: var(--muted); }

    .pcm-step {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
        border-radius: var(--r);
        background: var(--bg-2);
    }
    .pcm-step-lbl { flex: 1 1 auto; font-size: 14px; font-weight: 700; color: var(--text); }
    .pcm-step-btn {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--line);
        border-radius: var(--r-sm, 4px);
        background: var(--panel);
        color: var(--text);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .pcm-step-btn:active { border-color: var(--brand); color: var(--brand); }
    .pcm-step-val {
        width: 56px;
        min-width: 56px;
        height: 44px;
        text-align: center;
        font-size: 16px;
        font-weight: 800;
        color: var(--text);
        font-variant-numeric: tabular-nums;
        border: 1px solid var(--line);
        border-radius: var(--r-sm, 4px);
        background: var(--panel);
        padding: 0;
        -webkit-appearance: none;
        appearance: none;
    }
    .pcm-step-val:focus { outline: none; border-color: var(--brand); }
    .pcm-step-cap { font-size: 12.5px; color: var(--faint); }

    .pcm-settle { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
    .pcm-total { display: flex; align-items: center; justify-content: space-between; }
    .pcm-total > span { font-size: 14px; font-weight: 700; color: var(--text); }
    .pcm-total b {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 22px;
        font-weight: 900;
        color: var(--gold);   /* 合计数字用与金币图标同款饱和金（原 --gold-strong 在深色主题偏浅奶油色，观感不够“金”）*/
        font-variant-numeric: tabular-nums;
    }
    .pcm-coin { display: flex; color: var(--gold); }
    .pcm-unit { color: var(--gold-strong); font-weight: 700; }
    .pcm-after { display: flex; align-items: center; justify-content: space-between; }
    .pcm-after span { font-size: 11.5px; color: var(--muted); }
    .pcm-after strong { font-size: 12.5px; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
    .pcm-after strong.is-insufficient { color: var(--danger); }

    .pcm-confirm {
        width: 100%;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-bottom: 4px;
        border: 0;
        border-radius: var(--r);
        background: var(--buy, var(--brand));
        color: var(--on-brand);
        font-size: 15px;
        font-weight: 800;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .pcm-confirm-ico { display: flex; }
    .pcm-cancel {
        width: 100%;
        min-height: 42px;
        border: 0;
        background: transparent;
        color: var(--muted);
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    /* 桌面购买确认模板 dp25-confirm 在 780<宽≤900 且高≤520 的短横屏也命中本媒体块，
       其页脚是横向 flex 行（.dp25-confirm-actions），若被上面的 .pcm-cancel/.pcm-confirm{width:100%}
       撑满会把主 CTA『确认支付』挤出弹窗框外坍成竖条。这里以更高特异性回落 auto 宽，恢复行内布局。 */
    .dp25-confirm .pcm-cancel { width: auto; }
    .dp25-confirm .pcm-confirm { width: auto; }
}

/* ============================================================
   移动端大改 —— 顶部瘦身：余额/在线收进图标、去重复标题、分类横滑、卡片压缩
   ============================================================ */
.wallet-toggle { display: none; }   /* 桌面隐藏（桌面侧栏本就常显余额，无需图标） */

@media (max-width: 780px) {
    /* —— 品牌行右侧的余额/状态图标（点开才显示金额与在线状态，不再常显占位）—— */
    .brand-block { align-items: center; }
    .wallet-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        margin-left: auto; flex: 0 0 auto;
        width: 44px; height: 44px; position: relative;
        background: var(--panel-2); border: 1px solid var(--line-soft);
        border-radius: var(--r); color: var(--brand); cursor: pointer;
        transition: background var(--fast), border-color var(--fast);
    }
    .wallet-toggle[aria-expanded="true"] { background: var(--olive); border-color: var(--brand); }
    .wallet-toggle-dot {
        position: absolute; top: 7px; right: 7px;
        width: 9px; height: 9px; border-radius: 50%;
        background: var(--steel); border: 2px solid var(--panel-2);
    }
    .wallet-toggle.is-online .wallet-toggle-dot { background: var(--ok); }

    /* 默认收起余额与玩家状态；点图标（.wallet-open）才展开 */
    .sidebar .wallet-panel,
    .sidebar .player-chip { display: none; }
    .sidebar.wallet-open .wallet-panel { display: block; }
    .sidebar.wallet-open .player-chip { display: grid; }

    /* —— 去掉内容区与顶栏标题重复的 section-head（顶栏已显示「自由市场」等）—— */
    .market-list-pane > .section-head,
    .manage-section > .section-head:first-child { display: none; }

    /* —— 分类由铺满的网格改为单行横向滚动，省掉一大块高度 —— */
    .filter-bar .chip-row {
        display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px;
        -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
        padding-bottom: 4px; margin: 0 -2px; scroll-snap-type: x proximity;
    }
    .filter-bar .chip-row::-webkit-scrollbar { height: 0; }
    .filter-bar .chip-row .chip { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }

    /* —— 商品卡再压紧：图更小、备注文案单行截断（多为「上架的人很懒」填充）—— */
    .item-card { min-height: 104px; padding: 9px; gap: 9px; }
    .listing-media { width: 74px; min-width: 74px; padding-right: 9px; }
    .listing-media .item-art { width: 66px; height: 66px; }
    .item-card p {
        display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
        overflow: hidden; margin: 2px 0 0; font-size: 12px;
    }
}

/* ============================================================
   移动端触感 —— 去点击灰色高亮、消除双击缩放延迟、按下反馈
   ============================================================ */
html { -webkit-tap-highlight-color: transparent; }
button, a, select, summary { touch-action: manipulation; }

@media (hover: none) {
    /* 触屏上屏蔽仅为鼠标悬停设计的位移特效（指向重构后的真实卡片类，
       避免旧类名 .item-card/.market-row/.buyorder-card 死选择器导致 :hover 位移在触屏粘连） */
    .nav-item:hover,
    .mk-card:hover,
    .mmk-card:hover,
    .mk-row:hover,
    .bo-row:hover,
    .mbo-card:hover { transform: none; }

    /* 小控件按下：缩一点 + 略压暗，营造「按进去」手感 */
    .chip:active, .seg-btn:active, .tab:active, .admin-tab:active,
    .mini-btn:active, .primary-btn:active, .danger-btn:active,
    .icon-btn:active, .star-btn:active, .search-go:active,
    .nav-item:active {
        transform: scale(.95);
        filter: brightness(.94);
    }

    /* 大卡片按下：轻压即可，避免大面积晃动（现行卡片类：桌面 mk-card/mk-row/bo-row、
       移动 mmk-card/mbo-card、消息 message-card/mmsg-card） */
    .mk-card:active,
    .mk-row:active,
    .mmk-card:active,
    .bo-row:active,
    .mbo-card:active,
    .message-card:active,
    .mmsg-card:active {
        transform: scale(.985);
        filter: brightness(.97);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chip:active, .seg-btn:active, .tab:active, .admin-tab:active,
    .mini-btn:active, .primary-btn:active, .danger-btn:active,
    .icon-btn:active, .star-btn:active, .search-go:active,
    .nav-item:active, .mk-card:active, .mk-row:active, .mmk-card:active,
    .bo-row:active, .mbo-card:active, .message-card:active, .mmsg-card:active { transform: none; }
}

/* ============================================================
   确认 ActionSheet —— 移动端底部滑入，桌面居中小对话框（替代原生 confirm）
   ============================================================ */
.confirm-sheet-mask {
    position: fixed;
    inset: 0;
    z-index: 135;
    background: var(--overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    animation: fade var(--fast) ease-out;
}

.confirm-sheet {
    width: min(400px, 100%);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px 18px 16px;
    text-align: center;
    box-shadow: var(--shadow-soft);
}

.confirm-sheet-grip { display: none; }
.confirm-sheet h3 { margin: 0 0 6px; font-size: 17px; }
.confirm-sheet p { margin: 0 0 4px; color: var(--muted); font-size: 14px; }

.confirm-sheet-ok,
.confirm-sheet-cancel {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 10px;
    border-radius: var(--r);
    border: 1px solid var(--line);
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
}

.confirm-sheet-ok { background: var(--brand); border-color: var(--brand); color: #fff; }
.confirm-sheet-ok.is-danger { background: var(--danger); border-color: var(--danger); }
.confirm-sheet-cancel { background: var(--panel-2); color: var(--text); }

@keyframes confirmSheetUp {
    from { transform: translateY(28px); opacity: .5; }
    to { transform: none; opacity: 1; }
}

@media (max-width: 780px) {
    .confirm-sheet-mask { align-items: flex-end; padding: 0; }
    .confirm-sheet {
        width: 100%;
        border-radius: 16px 16px 0 0;
        border-bottom: 0;
        padding: 10px 16px calc(16px + var(--safe-bottom));
        animation: confirmSheetUp var(--normal) ease-out;
    }
    .confirm-sheet-grip {
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: var(--line);
        margin: 0 auto 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .confirm-sheet-mask, .confirm-sheet { animation: none; }
}

/* ============================================================
   移动端补齐 —— 44px 触摸目标 + 「我的在售」表格卡片化
   ============================================================ */
@media (max-width: 780px) {
    .select, .icon-btn, .search-go { min-height: 44px; }

    /* 表格 → 卡片：隐藏表头，行变两列网格卡片，值上方用 data-label 标注列名 */
    .manage-sale-wrap { overflow: visible; border: 0; background: transparent; box-shadow: none; padding: 0; }
    .manage-sale-wrap .manage-sale-table { display: block; min-width: 0; }
    .manage-sale-wrap .manage-sale-table thead { display: none; }
    .manage-sale-wrap .manage-sale-table tbody { display: block; }
    .manage-sale-wrap .manage-sale-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 12px;
        padding: 12px;
        margin-bottom: 10px;
        border: 1px solid var(--line);
        border-radius: var(--r);
        background: var(--panel);
        box-shadow: var(--shadow-soft);
    }
    .manage-sale-wrap .manage-sale-table td { display: block; border: 0; padding: 0; }
    .manage-sale-wrap .manage-sale-table td.num { text-align: left; }
    .manage-sale-wrap .manage-sale-table td.sale-cell-item,
    .manage-sale-wrap .manage-sale-table td.sale-cell-action { grid-column: 1 / -1; }
    .manage-sale-wrap .manage-sale-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        color: var(--muted);
        margin-bottom: 2px;
    }
    .manage-sale-wrap .manage-sale-table td.sale-cell-action .danger-btn.mini {
        width: 100%;
        min-height: 44px;
    }
}

/* ============================================================
   REDESIGN ADDENDUM · 主题切换按钮 / 数据可视化 / 深色微调
   （新增 class，不影响既有契约）
   ============================================================ */
.theme-toggle {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    background: transparent;
    color: var(--gold);
    cursor: pointer;
    transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.theme-toggle:hover {
    background: rgba(var(--gold-rgb), .13);
    border-color: var(--gold);
}
.theme-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.theme-toggle svg { display: block; }

/* 图表容器（charts.js 注入到详情弹窗 / 底部 sheet） */
.pa-charts { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.pa-chart-card { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 10px; }
.pa-chart-head { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 7px; }
.pa-chart-head b { font-size: 12.5px; font-weight: 800; color: var(--text); }
.pa-chart-head span { font-size: 11px; color: var(--faint); }
.pa-chart-card svg { display: block; width: 100%; height: auto; }
.pa-chart-card svg text { font-family: inherit; font-variant-numeric: tabular-nums; }
.pa-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pa-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--panel-3); color: var(--faint); font-size: 11px; font-weight: 600; }
.pa-badge.is-on { background: rgba(var(--gold-rgb), .14); color: var(--gold-strong); font-weight: 700; }
.pa-badge i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; font-style: normal; }
.pa-badge-group { display: flex; flex-direction: column; gap: 7px; }

/* 深色主题微调：滚动条与置顶玻璃层 */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3d48; }
[data-theme="dark"] img { filter: none; }

/* —— 详情弹窗 tabs + 价格走势（重设计落地新增） —— */
/* 水平 18px 与 .detail-modal-hero / .detail-modal-main 的内容缩进对齐 */
.detail-modal-tabs{display:flex;gap:8px;padding:12px 18px 0;flex-wrap:wrap}
.trend-pane{display:flex;flex-direction:column;gap:12px;padding:16px 18px 18px}
.trend-ranges{display:flex;gap:8px;flex-wrap:wrap}
.trend-host{min-height:120px}
.trend-host svg{width:100%;height:auto}
.trend-summary b{color:var(--text)}
.trend-up{color:var(--brand);font-weight:700}
.trend-down{color:var(--ok);font-weight:700}
.trend-legend{display:flex;gap:14px;font-size:12px;color:var(--muted)}
.trend-leg-mk{color:var(--brand)}
.trend-leg-bo{color:var(--gold)}

/* 详情弹窗需盖过移动端底部 sheet(130)，仍低于 confirm-sheet(135)/toast(140) */
.detail-modal-mask{z-index:132}
/* 购买弹窗从详情弹窗内打开且不关闭详情（取消可返回），必须压过详情(132)，仍低于 confirm-sheet(135)/toast(140) */
.purchase-modal-mask{z-index:133}

/* ============================================================
   V2 ADDENDUM · 部位伤害目标切换（charts.js targetBody）
   ============================================================ */
.pa-target-seg {
    display: flex;
    gap: 4px;
    margin-bottom: 9px;
}
.pa-target-seg button {
    height: 26px;
    padding: 0 12px;
    border-radius: 4px;
    border: 1px solid var(--line-soft);
    background: var(--panel);
    color: var(--muted);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.pa-target-seg button.is-on {
    border-color: var(--brand);
    background: rgba(var(--brand-rgb), .12);
    color: var(--brand);
    font-weight: 800;
}
.pa-target-seg button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* V2 · 上架/求购表单的物品实时预览（openListItem / openCreateBuyorder 弹窗内） */
.modal-item-preview {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    margin-bottom: 4px;
    background: var(--bg-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
}
.modal-item-preview .mip-thumb {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-soft);
    background: radial-gradient(120% 100% at 50% 12%, var(--item-stage-2), var(--item-stage));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.modal-item-preview .mip-thumb img {
    width: 36px;
    height: 36px;
    max-width: 82%;
    max-height: 82%;
    object-fit: contain;
    object-position: center;
}
.modal-item-preview .mip-name {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.3;
}
.modal-item-preview .mip-sub {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 2px;
}

/* V2 · 购买确认「购后余额」不足红字（updatePreview 加/去 is-insufficient） */
.purchase-line.is-balance #pmBalance.is-insufficient {
    color: var(--danger);
    font-weight: 800;
}

/* V2 · 详情 ID 徽章点击复制光标提示 */
[data-copyid] {
    cursor: pointer;
}

/* P6 · 自由市场/收购市场结果计数（control-row 排序旁 / compact filter-note 侧） */

/* P6 · 在售改价：行操作双按钮 + 弹窗实时摘要行 */
.sale-cell-action {
    white-space: nowrap;
}

.sale-cell-action .mini-btn {
    margin-right: 6px;
}

@media (max-width: 780px) {
    /* 卡片化后操作格改横排两键，各占一半，保持 44px 触摸目标 */
    .manage-sale-wrap .manage-sale-table td.sale-cell-action {
        display: flex;
        gap: 8px;
        white-space: normal;
    }
    .manage-sale-wrap .manage-sale-table td.sale-cell-action .mini-btn,
    .manage-sale-wrap .manage-sale-table td.sale-cell-action .danger-btn.mini {
        flex: 1;
        width: auto;
        min-height: 44px;
        margin-right: 0;
    }
}

/* P6 · 移动端触摸目标补齐（44px）：目标切换按钮加高；
   复制 ID 徽章 padding+负 margin 对冲扩大热区（外尺寸不变、视觉零位移） */
@media (max-width: 780px) {
    .pa-target-seg button {
        min-height: 44px;
        padding: 0 16px;
    }
    /* 主题切换按钮 44×44：须置于上方 .theme-toggle 基础规则（38px）之后才能在级联中胜出 */
    .theme-toggle { width: 44px; height: 44px; }
    [data-copyid] {
        padding: 14px 6px;
        margin: -14px -6px;
    }
}

/* D14-1 · 键盘导航焦点环：交互控件补齐 focus-visible 令牌环
   （既有 focus-visible 规则见 .search-go/.pw-toggle/.theme-toggle/.pa-target-seg，
   下列 class 均无既有 focus-visible 规则，无冲突） */
.nav-item:focus-visible,
.icon-btn:focus-visible,
.mini-btn:focus-visible,
.primary-btn:focus-visible,
.danger-btn:focus-visible,
.tab:focus-visible,
.chip:focus-visible,
.seg-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ============================================================
   T2 · 桌面右栏详情 4 页签重构（demo 100% 还原层）
   仅追加 .dp2-* 前缀，不改既有令牌；tint 走 rgba(var(--*-rgb),a) 双主题
   结构对照见 task-T2-report。规格来源 spec-desktop §6/§8 + demo-dom L715-833。
   ============================================================ */
.dp2-root {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

/* ---- 172px 展示台（§6.1 · demo tpl423） ---- */
.dp2-stage {
    position: relative;
    height: 172px;
    flex: 0 0 auto;
    background: radial-gradient(130% 120% at 50% 8%, var(--item-stage-2), var(--item-stage));
    box-shadow: inset 0 0 0 1px var(--line-soft), inset 0 -28px 30px -26px rgba(var(--gold-rgb), .18);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: background var(--normal) ease;
}
.dp2-glow {
    position: absolute;
    width: 52%;
    height: 66%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), .28), transparent 60%);
    pointer-events: none;
}
.dp2-art {
    position: relative;
    width: 96px;
    height: 96px;
    object-fit: contain;
    opacity: .95;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .28));
}
.dp2-badge {
    position: absolute;
    top: 10px;
    left: 12px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(3px);
    z-index: 1;
}
.dp2-idbadge {
    position: absolute;
    top: 10px;
    right: 12px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(8, 8, 12, .55);
    border: 1px solid rgba(var(--gold-rgb), .35);
    color: #f0e7d5;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(3px);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    z-index: 1;
    transition: border-color var(--fast) ease, background var(--fast) ease;
}
.dp2-idbadge:hover { border-color: rgba(var(--gold-rgb), .6); }
.dp2-idbadge:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- 信息头（§6.2 · demo tpl429） ---- */
.dp2-head {
    padding: 13px 16px 0;
    flex: 0 0 auto;
}
.dp2-titlerow {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.dp2-name {
    flex: 1 1 0%;
    min-width: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.3;
}
.dp2-cat {
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(var(--brand-rgb), .14);
    color: var(--brand);
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}
.dp2-seller {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    font-size: 11.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.dp2-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.dp2-remark {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 7px;
    padding: 7px 10px;
    background: rgba(var(--gold-rgb), .13);
    border-radius: var(--r-sm);
    font-size: 12px;
    color: var(--gold-strong);
    line-height: 1.5;
}
.dp2-remark-ico {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 12px;
    line-height: 1;
}
.dp2-pricerow {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 10px;
}
.dp2-price {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gold-strong);
    font-weight: 900;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.dp2-coin { color: var(--gold); font-size: 17px; line-height: 0; }
.dp2-stock {
    font-size: 12px;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}
.dp2-tabs {
    display: flex;
    gap: 16px;
    border-bottom: 1px solid var(--line-soft);
    margin-top: 11px;
}
.dp2-tab {
    height: 34px;
    padding: 0 2px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    color: var(--muted);
    box-shadow: none;
    font-family: inherit;
    transition: color var(--fast) ease;
}
.dp2-tab:hover { color: var(--text); }
.dp2-tab.is-active {
    color: var(--text);
    box-shadow: inset 0 -2px 0 var(--brand);
}
.dp2-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- 滚动内容区（§6.3 · demo tpl446） ---- */
.dp2-scroll {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    padding: 13px 16px 16px;
}

/* ① 数值图表注脚 */
.dp2-charts-note {
    font-size: 11px;
    color: var(--faint);
    line-height: 1.7;
    margin-top: 15px;
}

/* ② 价格走势（§6.3② · demo chTrend） */
.dp2-trend-top {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 11px;
    flex-wrap: wrap;
}
.dp2-trend-ranges { display: flex; gap: 4px; }
.dp2-range {
    height: 26px;
    padding: 0 12px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    border: 1px solid var(--line-soft);
    background: var(--panel);
    color: var(--muted);
    transition: all var(--fast) ease;
}
.dp2-range.is-active {
    font-weight: 800;
    border-color: var(--brand);
    background: rgba(var(--brand-rgb), .14);
    color: var(--brand);
}
.dp2-range:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dp2-trend-legend {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.dp2-trend-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 600;
}
.dp2-leg-mk::before {
    content: "";
    width: 16px;
    height: 0;
    border-top: 2px solid var(--brand);
}
.dp2-leg-bo::before {
    content: "";
    width: 16px;
    height: 0;
    border-top: 2px dashed var(--gold);
}
.dp2-trend-summary {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    margin: 0 2px 8px;
}
.dp2-stat { display: flex; flex-direction: column; gap: 2px; }
.dp2-stat small { font-size: 10.5px; color: var(--faint); font-weight: 700; }
.dp2-stat b {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.dp2-stat.is-latest b { font-size: 19px; color: var(--gold-strong); }
.dp2-stat.is-up b { color: var(--brand); }
.dp2-stat.is-down b { color: var(--ok); }

/* ③ 在售挂单（§6.3③ · demo dListings） */
.dp2-listing-list { display: flex; flex-direction: column; gap: 6px; }
.dp2-listing-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    background: var(--panel-2);
    transition: border-color var(--fast) ease;
}
.dp2-listing-row:hover { border-color: var(--line); }
.dp2-listing-avatar {
    position: relative;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: var(--r-sm);
    background: rgba(var(--gold-rgb), .13);
    color: var(--gold-strong);
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dp2-listing-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    box-shadow: 0 0 0 2px var(--panel-2);
}
.dp2-listing-copy { display: flex; flex-direction: column; min-width: 0; flex: 1 1 0%; }
.dp2-listing-seller { font-size: 12.5px; font-weight: 700; color: var(--text); }
.dp2-listing-copy small { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dp2-listing-qty { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.dp2-listing-price {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    font-weight: 800;
    color: var(--gold-strong);
    font-variant-numeric: tabular-nums;
}
.dp2-listing-price svg { color: var(--gold); }
.dp2-listing-buy {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 12px;
    border: none;
    border-radius: var(--r-sm);
    background: var(--buy);
    color: var(--on-brand);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--fast) ease;
}
.dp2-listing-buy:hover { background: var(--buy-strong); }
.dp2-listing-buy:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* 自己的挂单：置灰不可点标记（<span>，无 hover/无购买回调） */
.dp2-listing-buy.is-own {
    display: inline-flex;
    align-items: center;
    background: var(--panel-3);
    color: var(--muted);
    cursor: default;
    font-weight: 700;
    white-space: nowrap;
}
.dp2-listing-buy.is-own:hover { background: var(--panel-3); }
/* 自有挂单整行弱化：命名暗示的 dim 意图（与子元素 .dp2-listing-buy.is-own 置灰协调），降饱和不夺焦。 */
.dp2-listing-row.is-own-row { opacity: .72; }

/* ④ 属性表格（§6.3④ · 斑马键值表） */
.dp2-spec {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}
.dp2-spec tr.is-even { background: var(--bg-2); }
.dp2-spec th,
.dp2-spec td {
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}
.dp2-spec th { color: var(--muted); font-weight: 600; width: 40%; }
.dp2-spec td { color: var(--text); font-weight: 700; }
.dp2-table .info-block { margin-top: 14px; }

/* ---- 底部收藏 + 立即购买栏（§6.4 · demo tpl480） ---- */
.dp2-buybar {
    flex: 0 0 auto;
    border-top: 1px solid var(--line-soft);
    padding: 12px 16px;
    display: flex;
    gap: 9px;
    background: var(--panel-2);
    transition: background var(--normal) ease;
}
.dp2-fav {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
    color: var(--gold);
    font-size: 17px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--fast) ease;
}
.dp2-fav:hover { border-color: var(--gold); }
.dp2-fav.is-on {
    border-color: var(--gold);
    background: rgba(var(--gold-rgb), .13);
    color: var(--gold-strong);
}
.dp2-fav:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dp2-buy {
    flex: 1 1 0%;
    height: 42px;
    border: none;
    border-radius: var(--r);
    background: var(--buy);
    color: var(--on-brand);
    font-size: 14.5px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    transition: background var(--fast) ease;
}
.dp2-buy:hover:not([disabled]) { background: var(--buy-strong); }
.dp2-buy[disabled] { opacity: .6; cursor: not-allowed; }
.dp2-buy:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dp2-buy-ico { font-size: 15px; line-height: 0; }

/* 移动端详情 sheet 脚部与购买确认触点拉到 ≥44px（spec §3/§4：收藏星 44 + 立即购买 44 + 步进钮 44）。
   置于 .dp2- 基础规则之后覆写，仅 ≤780px 生效，桌面 .dp2- 模板尺寸不动。 */
@media (max-width: 780px) {
    .dp2-fav { width: 44px; height: 44px; }
    .dp2-buy { height: 44px; }
    .purchase-modal .mini-btn,
    .purchase-modal .primary-btn { min-height: 44px; }
    .purchase-qty-field input { min-height: 44px; }
}

/* charts 卡入场：与 demo pa-enter 同源（既有 charts.js 的 .pa-chart-card 沿用其自身样式） */
.dp2-charts { display: block; }

/* 移动端：右栏在窄屏作为底部 sheet 时（既有 .detail-panel 媒体查询接管定位），
   dp2 内部结构自适应；展示台略降高，购买栏保持贴底。 */
@media (max-width: 780px) {
    .dp2-stage { height: 150px; }
    .dp2-listing-buy { min-height: 36px; }
}

/* ============================================================
   T3 · 桌面六视图主区重排（demo 100% 还原 R 轮）
   追加层：只覆盖不重定义令牌；spec-desktop §3/§4/§5/§9。
   ============================================================ */
/* tint 令牌（spec §1，浅色 :root / 深色 dark）——此前未落地，T3 补齐 */
:root {
    --tint-brand: rgba(200, 16, 46, .09);
    --tint-gold: rgba(168, 123, 21, .12);
    --tint-ok: rgba(47, 143, 95, .13);
    --tint-danger: rgba(224, 64, 44, .13);
}
[data-theme="dark"] {
    --tint-brand: rgba(230, 41, 63, .14);
    --tint-gold: rgba(220, 174, 81, .13);
    --tint-ok: rgba(53, 193, 126, .15);
    --tint-danger: rgba(255, 90, 77, .15);
}

/* ---------- §3 侧栏 216px ---------- */
.sidebar {
    padding: 16px 14px 14px;
    gap: 12px;
    box-shadow: none;
    border-right: 1px solid var(--line-soft);
    background: var(--panel);
}
.brand-block { min-height: 40px; gap: 11px; }
.brand-mark-svg {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r);
    border: 0;
    background: linear-gradient(150deg, var(--brand), #6d0818);
    color: var(--gold);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .28);
}
.brand-name { color: var(--text); letter-spacing: -0.02em; font-weight: 900; }
.brand-sub {
    color: var(--faint);
    font-size: 11px;
    letter-spacing: .05em;
    margin-top: 1px;
}
.nav-menu { gap: 2px; padding: 2px 0 0; }
.nav-item {
    min-height: 40px;
    padding: 0 11px;
    gap: 11px;
    color: var(--muted);
    font-weight: 600;
    border: 0;
    background: transparent;
    border-radius: var(--r);
}
.nav-item:hover { background: var(--panel-2); color: var(--text); transform: none; }
.nav-item.is-active,
.nav-item.is-active:hover {
    background: var(--tint-brand);
    color: var(--brand);
    font-weight: 800;
    border: 0;
    box-shadow: none;
}
.nav-icon {
    width: 20px;
    height: 20px;
    border: 0;
    background: transparent;
    color: inherit;
}
.nav-icon svg { display: block; }
.nav-pill {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--tint-gold);
    color: var(--gold-strong);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 账户余额卡（§3）：panel-2 + 左 3px 金→红竖条 + 「＋ 充值」 */
.wallet-panel {
    position: relative;
    margin-top: auto;
    border: 1px solid var(--line-soft);
    background: var(--panel-2);
    padding: 12px 13px;
    overflow: hidden;
}
.wallet-panel::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(var(--gold), var(--brand));
}
.wallet-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}
.wallet-value { min-height: 30px; gap: 7px; align-items: center; }
.wallet-coin { color: var(--gold); display: inline-flex; line-height: 0; }
.wallet-value span { color: var(--gold-strong); font-size: 22px; font-weight: 900; }
/* 侧栏余额：数字永不从中间断行；放不下时「Ai Coin」整块落到下一行。
   字号按长度缩（app.js setWalletAmount 写 data-size），10 亿起显示短写，完整数字在 title */
.wallet-value { flex-wrap: wrap; row-gap: 0; }
.wallet-value span { white-space: nowrap; overflow-wrap: normal; }
.wallet-value small { white-space: nowrap; }
.wallet-value span[data-size="m"] { font-size: 19px; }
.wallet-value span[data-size="s"] { font-size: 16px; letter-spacing: -.01em; }
.wallet-hint.is-fresh { color: var(--muted); }
.wallet-hint.is-fresh::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 99px;
    background: var(--ok);
    vertical-align: 1px;
}

/* 用户行（§3）：34px 金底头像 + 名称/状态 + log-out */
.player-chip {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "avatar name logout" "avatar status logout" "hint hint hint";
    align-items: center;
    column-gap: 10px;
    border-top: 1px solid var(--line-soft);
    padding: 12px 2px 0;
    margin-top: 0;
}
.player-avatar {
    grid-area: avatar;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r);
    background: var(--tint-gold);
    color: var(--gold-strong);
    font-weight: 800;
    font-size: 13px;
}
.player-label { display: none; }
.player-name {
    grid-area: name;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.player-status {
    grid-area: status;
    margin: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
}
.player-status.is-online,
.player-status.is-stale,
.player-status.is-offline { background: transparent; border: 0; }
.player-status-dot { width: 7px; height: 7px; box-shadow: none; }
.player-logout {
    grid-area: logout;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color var(--fast) ease, background var(--fast) ease;
}
.player-logout:hover { color: var(--brand); background: var(--tint-brand); }
.player-logout svg { display: block; }
.player-online-hint { grid-area: hint; margin-top: 6px; }
.player-online-hint:empty { display: none; }

/* ---------- §4 顶栏 58px ---------- */
.topbar {
    min-height: 58px;
    padding: 0 18px;
    gap: 14px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--panel);
    box-shadow: none;
    justify-content: flex-start;
}
.eyebrow { display: none; }
.page-title { font-size: 16px; font-weight: 800; min-width: 96px; }
.topbar-actions { flex: 1; gap: 10px; }
.search-box {
    order: 0;
    flex: 0 1 400px;
    width: auto;
    min-height: 38px;
    height: 38px;
    margin-right: auto;
    padding: 0 4px 0 10px;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--bg-2);
    box-shadow: none;
}
.search-ico { color: var(--faint); display: inline-flex; line-height: 0; order: 0; }
.search-input { order: 1; font-size: 13px; }
.search-go-btn {
    order: 2;
    min-height: 28px;
    padding: 0 12px;
    border-radius: var(--r-sm);
    background: var(--brand);
    color: var(--on-brand);
    font-weight: 700;
    font-size: 12.5px;
}
.search-go-btn:hover,
.search-go-btn:focus-visible { color: var(--on-brand); background: var(--brand-strong); }
.topbar-cta {
    order: 1;
    min-height: 38px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: var(--r);
    background: var(--buy);
    color: var(--on-brand);
    font-weight: 800;
    font-size: 13.5px;
    cursor: pointer;
    transition: background var(--fast) ease;
}
.topbar-cta:hover { background: var(--buy-strong); }
.topbar-cta svg { display: block; }
.topbar-sep {
    order: 2;
    width: 1px;
    height: 22px;
    background: var(--line-soft);
    flex: 0 0 auto;
}
.topbar-actions .icon-btn,
.topbar-actions .theme-toggle {
    width: 38px;
    min-width: 38px;
    min-height: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    background: transparent;
    color: var(--muted);
}
#refreshBtn { order: 3; }
.topbar-actions .theme-toggle { order: 4; }
#logoutBtn { order: 5; }
.topbar-actions .icon-btn:hover,
.topbar-actions .theme-toggle:hover { background: var(--panel-2); border-color: var(--line); color: var(--text); }
.topbar-actions .icon-btn svg { display: block; }

/* 顶栏动作钮移动触点 ≥44px：置于桌面 .topbar-actions 规则之后，源码顺序压过同特异性(0,2,0)的 38px 定义（无障碍红线）。 */
@media (max-width: 780px) {
    .topbar-actions .icon-btn,
    .topbar-actions .theme-toggle {
        min-height: 44px;
        height: 44px;
    }
    .topbar .search-box .search-go {
        min-height: 44px;
        height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ---------- §5 自由市场 ---------- */
.content { padding: 20px 22px 32px; }
.mk-filter { margin-bottom: 0; }
.mk-filter .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.mk-filter .chip {
    min-height: 32px;
    padding: 0 13px;
    border-radius: var(--r);
    font-weight: 700;
    font-size: 13px;
    border: 1px solid var(--line-soft);
    background: var(--panel);
    color: var(--muted);
}
.mk-filter .chip:hover { border-color: var(--line); background: var(--panel); color: var(--muted); }
.mk-filter .chip.is-active {
    border-color: var(--brand);
    background: var(--tint-brand);
    color: var(--brand);
}
.mk-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.mk-sort-label { color: var(--faint); font-size: 12px; font-weight: 700; }
.mk-seg {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    background: var(--bg-2);
}
.mk-seg-btn {
    min-height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: calc(var(--r) - 2px);
    background: transparent;
    color: var(--faint);
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background var(--fast) ease, color var(--fast) ease;
}
.mk-seg-btn:hover { color: var(--muted); }
.mk-seg-btn.is-active {
    background: var(--panel);
    color: var(--brand);
    box-shadow: var(--shadow-soft);
}
.mk-viewbtn { padding: 0 9px; }
.mk-viewbtn svg { display: block; }
.mk-count { margin-left: auto; color: var(--faint); font-size: 12px; }
.mk-toolbar .mk-viewseg { margin-left: 0; }

/* 网格卡片（§5.3） */
.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
    gap: 12px;
}
.mk-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--fast) ease, box-shadow var(--fast) ease, border-color var(--fast) ease;
}
.mk-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.mk-card.is-selected { border-color: var(--brand); }
.mk-card-stage {
    position: relative;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(120% 100% at 50% 12%, var(--item-stage-2), var(--item-stage));
    box-shadow: inset 0 0 0 1px var(--line-soft);
}
.mk-card-glow {
    position: absolute;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    /* 浅色：柔和暖金光晕（低透明度，避免白卡上橄榄金脏晕）。深色见下方 override 保留原亮金。 */
    background: radial-gradient(circle, rgba(216, 171, 79, .14), transparent 72%);
    filter: blur(2px);
    pointer-events: none;
}
[data-theme="dark"] .mk-card-glow {
    background: radial-gradient(circle, rgba(var(--gold-rgb), .26), transparent 70%);
}
.mk-card-art {
    position: relative;
    width: 104px;
    height: 104px;
    max-width: 82%;
    max-height: 82%;
    object-fit: contain;
    object-position: center;
    /* 浅色：轻投影（白底上 .35 黑影偏重）。深色见下方 override 保留原深投影。 */
    filter: drop-shadow(0 5px 11px rgba(60, 45, 20, .20));
}
[data-theme="dark"] .mk-card-art {
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35));
}
.mk-card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.mk-card-stock {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(8, 8, 12, .62);
    /* 胶囊恒为深色（两主题一致），文字固定亮金——浅色主题原用随主题的深金(--gold-strong)压深底对比度仅 3.96，糊。 */
    color: #f2d692;
    border: 1px solid rgba(242, 214, 146, .45);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mk-card-star {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--faint);
    cursor: pointer;
    transition: color var(--fast) ease;
}
.mk-card-star:hover { color: var(--gold); }
.mk-card-star.is-on { color: var(--gold); }
.mk-card-star.is-on svg { fill: var(--gold); }
.mk-card-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 11px 11px;
    flex: 1;
}
.mk-card-name {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
.mk-card-meta {
    color: var(--faint);
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.mk-card-remark {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--gold-strong);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
}
.mk-card-remark span { overflow: hidden; text-overflow: ellipsis; }
.mk-card-remark svg { flex: 0 0 auto; }
.mk-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 5px;
}
.mk-card-price {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--gold-strong);
    font-weight: 800;
    font-size: 16.5px;
    font-variant-numeric: tabular-nums;
}
.mk-card-price svg { color: var(--gold); }
.mk-card-seller {
    color: var(--muted);
    font-size: 11.5px;
    max-width: 72px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 列表模式（§5.4 desk-01d） */
.mk-list { display: flex; flex-direction: column; gap: 8px; }
.mk-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: border-color var(--fast) ease, background var(--fast) ease;
}
.mk-row:hover { background: var(--panel-2); }
.mk-row.is-selected { border-color: var(--brand); }
.mk-row-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: radial-gradient(120% 100% at 50% 12%, var(--item-stage-2), var(--item-stage));
    box-shadow: inset 0 0 0 1px var(--line-soft);
}
.mk-row-art { width: 40px; height: 40px; max-width: 86%; max-height: 86%; object-fit: contain; object-position: center; }
.mk-row-copy { flex: 1; min-width: 0; }
.mk-row-titleline { display: flex; align-items: center; gap: 8px; }
.mk-row-titleline .mk-card-name { min-height: 0; -webkit-line-clamp: 1; }
.mk-row-titleline .mk-card-badge { position: static; }
.mk-row-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex: 0 0 auto;
}
.mk-row-side .mk-card-seller { max-width: 120px; }
.mk-row-star {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--faint);
    cursor: pointer;
}
.mk-row-star:hover,
.mk-row-star.is-on { color: var(--gold); }
.mk-row-star.is-on svg { fill: var(--gold); }

/* ---------- §9.1 收购市场 ---------- */
.bo-head h2 { display: flex; align-items: center; gap: 10px; }
.bo-count-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--tint-gold);
    color: var(--gold-strong);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.bo-toolbar { margin-top: 2px; }
.bo-table {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.bo-thead,
.bo-row {
    display: grid;
    /* 操作列固定宽度（不用 auto）：否则表头(空占位)与数据行(按钮)的 auto 列宽不同，
       会连累前面 fr 弹性列在两行各自算出不同宽度 → 表头与数值列错位（desk-04 对齐修复根因）。 */
    grid-template-columns: minmax(190px, 1.5fr) 1fr .9fr .5fr .8fr 104px;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
}
.bo-thead.is-manage,
.bo-row.is-manage {
    grid-template-columns: minmax(190px, 1.5fr) .9fr 1fr .8fr 104px;
}
.bo-thead {
    background: var(--panel-2);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    padding-top: 9px;
    padding-bottom: 9px;
}
/* 数值列（求购单价/数量/总价）统一右对齐，与表头 .num 对齐（desk-04）。
   普通 span（qty/total）设块级右对齐；列内 flex（price 为 column flex）另在 .bo-cell-price 处右对齐。 */
.bo-thead .num,
.bo-row .num { text-align: right; justify-content: flex-end; }
.bo-row span.bo-cell-qty,
.bo-row span.bo-cell-total { display: block; width: 100%; text-align: right; }
.bo-row {
    border-top: 1px solid var(--line-soft);
    cursor: pointer;
    transition: background var(--fast) ease;
}
.bo-row:hover { background: var(--panel-2); }
.bo-row.is-selected { background: var(--tint-brand); }
.bo-cell-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bo-item-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: radial-gradient(120% 100% at 50% 12%, var(--item-stage-2), var(--item-stage));
    box-shadow: inset 0 0 0 1px var(--line-soft);
}
.bo-item-art { width: 36px; height: 36px; max-width: 86%; max-height: 86%; object-fit: contain; object-position: center; }
.bo-item-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bo-item-copy b {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bo-item-copy small { color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.bo-cell-buyer { display: flex; align-items: center; gap: 9px; min-width: 0; }
.bo-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: var(--tint-gold);
    color: var(--gold-strong);
    font-size: 12px;
    font-weight: 700;
}
.bo-avatar-dot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 8px;
    height: 8px;
    border-radius: 99px;
    box-shadow: 0 0 0 2px var(--panel);
}
.bo-buyer-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bo-buyer-copy b {
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bo-buyer-copy small { color: var(--faint); font-size: 11px; }
.bo-cell-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    color: var(--gold-strong);
    font-weight: 700;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}
.bo-cell-price-main {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.bo-cell-price svg { color: var(--gold); }
.bo-cell-qty { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.bo-cell-total {
    color: var(--gold-strong);
    font-weight: 800;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.bo-cell-action { display: flex; justify-content: flex-end; }
.bo-cell-progress { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bo-cell-progress small { color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.bo-row .own-chip { white-space: nowrap; }

/* ---------- §9.3 消息记录 ---------- */
.msg-tabs { display: flex; justify-content: flex-end; gap: 2px; margin-bottom: 14px; }
.msg-row { padding: 0; overflow: hidden; }
.msg-main {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}
.msg-ico {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r);
}
.msg-ico.is-brand { background: var(--tint-brand); color: var(--brand); }
.msg-ico.is-gold { background: var(--tint-gold); color: var(--gold-strong); }
.msg-ico.is-neutral { background: var(--panel-2); color: var(--muted); }
.msg-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msg-copy b {
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-copy small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.msg-amount {
    flex: 0 0 auto;
    font-weight: 800;
    font-size: 14.5px;
    font-variant-numeric: tabular-nums;
}
.msg-amount.is-in { color: var(--ok); }
.msg-amount.is-neutral { color: var(--faint); font-weight: 600; font-size: 12.5px; }
.msg-action { flex: 0 0 auto; }
.msg-row .message-fold { margin: 0 14px 10px; }

/* ---------- §9.4 用户管理 ---------- */
.account-pane { display: flex; }
.account-card {
    width: min(520px, 100%);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
    box-shadow: var(--shadow-soft);
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.account-bind-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}
.account-avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r);
    background: var(--tint-gold);
    color: var(--gold-strong);
    font-weight: 800;
    font-size: 14px;
}
.account-bind-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.account-bind-copy b { font-size: 14px; font-weight: 800; }
.account-bind-copy small { color: var(--muted); font-size: 12px; }
.account-bind-pill {
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
}
.account-bind-pill.is-off { background: var(--tint-gold); color: var(--gold-strong); }
.account-bind-pill.is-on { background: var(--tint-ok); color: var(--ok); }
.account-save { width: 100%; }
.account-foot { margin: 2px 0 0; color: var(--faint); font-size: 11.5px; line-height: 1.5; }

/* ---------- dp2 遗留字形 → lucide SVG 的对齐 ---------- */
.dp2-coin,
.dp2-remark-ico,
.dp2-buy-ico { display: inline-flex; align-items: center; line-height: 0; }
.dp2-coin svg,
.dp2-remark-ico svg,
.dp2-buy-ico svg { display: block; }

/* ---------- 视图标题区（§9 通用 section-head 对齐） ---------- */
.section-head h2 { font-size: 18px; font-weight: 800; }
.section-head p { color: var(--muted); font-size: 12.5px; }
.section-actions { display: flex; align-items: center; gap: 10px; }
.section-actions .mini-btn,
.section-actions .primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}
#boCreateBtn { display: inline-flex; align-items: center; gap: 6px; justify-content: center; }

/* ---------- 移动端适配（780px：新结构降级为堆叠卡） ---------- */
@media (max-width: 780px) {
    .topbar { padding: 0 12px; min-height: 54px; }
    .search-box { flex: 1 1 auto; margin-right: 0; }
    .topbar-cta span { display: none; }
    .topbar-cta { padding: 0 11px; }
    .topbar-sep { display: none; }
    .mk-count { flex-basis: 100%; order: 5; }
    .bo-thead { display: none; }
    .bo-row,
    .bo-row.is-manage {
        grid-template-columns: 1fr auto;
        grid-auto-rows: auto;
        row-gap: 8px;
        padding: 12px;
    }
    .bo-cell-item { grid-column: 1 / -1; }
    .bo-cell-action { grid-column: 1 / -1; justify-content: flex-end; }
    .bo-cell-qty,
    .bo-cell-total,
    .bo-cell-price { justify-content: flex-start; text-align: left; align-items: flex-start; }
    /* 移动端行卡态：撤销桌面对齐里对 qty/total span 的块级右对齐，回归卡片左排。 */
    .bo-row span.bo-cell-qty,
    .bo-row span.bo-cell-total { display: inline; width: auto; text-align: left; }
    .msg-main { flex-wrap: wrap; }
    .msg-action { margin-left: auto; }
    .player-chip { padding-bottom: 8px; }
}

/* ---------- T3 修复批 1：桌面视口锁定三栏（demo §2）+ 侧栏子项顺序 ---------- */
/* demo 结构：品牌 → nav → (spacer) → 余额卡 → 用户行；整页不滚，内容区内滚。
   仅桌面生效（>780px），移动端沿用既有顶条/底部导航布局。 */
@media (min-width: 781px) {
    .layout { height: 100vh; overflow: hidden; }
    .sidebar {
        position: static;
        height: 100vh;
        min-height: 0;
        overflow-y: auto;
        flex: 0 0 var(--sidebar);
    }
    .brand-block { order: 0; }
    .nav-menu { order: 1; margin-bottom: auto; }
    .wallet-panel { order: 2; margin-top: 0; }
    .player-chip { order: 3; }
    .main { height: 100vh; min-height: 0; }
    .topbar { position: static; flex: 0 0 58px; }
    .content {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* 右栏详情：改在 .content 滚动容器内 sticky（原 top:100px 基于旧 78px 顶栏+整页滚动） */
    .detail-panel {
        top: 0;
        max-height: calc(100vh - 98px);
    }
}

/* 横屏手机 781–900px 宽 / ≤520px 高：该区间不命中 ≤780px 移动 chrome（仍走桌面 .sidebar/.topbar/.nav-menu），
   同时命中横屏块(3833 令 .layout display:block、.sidebar width:100% 堆叠)与上方 min-width:781px 桌面块
   (令 .layout/.sidebar/.main height:100vh、overflow:hidden)。两者叠加会使堆叠的 .sidebar 被强撑满整屏，把
   topbar/商品挤到首屏之外，且余额面板+玩家卡常显、无收起入口。本块置于 min-width:781px 之后以源码顺序覆盖其
   height:100vh：让 .sidebar 收缩到品牌行高度、.main/.content 参与首屏、整页可流式滚动；并默认收起
   .wallet-panel/.player-chip、启用 .wallet-toggle（点开才展开，复用 JS .wallet-open）。≤780px 横屏另由
   .brand-block 等 !important display:none 走 .mhdr/.mnav 兜底，不受此块影响。 */
@media (min-width: 781px) and (max-width: 900px) and (max-height: 520px) {
    /* 撤销 min-width:781px 桌面块对高度的锁定，恢复横屏块的流式堆叠 */
    .layout { height: auto; min-height: 100dvh; overflow: visible; }
    .sidebar { height: auto; min-height: 0; overflow-y: visible; flex: 0 0 auto; }
    .main { height: auto; min-height: 0; }
    .content { overflow-y: visible; }

    /* 默认收起余额面板与玩家卡，让首屏优先展示商品 */
    .sidebar .wallet-panel,
    .sidebar .player-chip { display: none; }
    .sidebar.wallet-open .wallet-panel { display: block; }
    .sidebar.wallet-open .player-chip { display: grid; }

    /* 品牌行显示可点的钱包收起/展开按钮（复用 JS .wallet-open 折叠逻辑） */
    .brand-block { align-items: center; }
    .wallet-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        margin-left: auto; flex: 0 0 auto;
        width: 44px; height: 44px; position: relative;
        background: var(--panel-2); border: 1px solid var(--line-soft);
        border-radius: var(--r); color: var(--brand); cursor: pointer;
        transition: background var(--fast), border-color var(--fast);
    }
    .wallet-toggle[aria-expanded="true"] { background: var(--olive); border-color: var(--brand); }
    .wallet-toggle .wallet-toggle-dot {
        position: absolute; top: 7px; right: 7px;
        width: 9px; height: 9px; border-radius: 50%;
        background: var(--steel); border: 2px solid var(--panel-2);
    }
    .wallet-toggle.is-online .wallet-toggle-dot { background: var(--ok); }
}

/* ============================================================
   [T4 · demo 还原] 管理后台 12 子页换皮层（.adm2- 前缀，只追加不改既有）
   规格：spec-desktop §9.5 + 对照截图 desk-08a~l
   端点/DOM 分发键零改动，本层仅换肤（导航图标化 / KPI 竖条配色 / 表格徽章语义色）
   ============================================================ */

/* —— 子页导航（12 chip，图标 + 文案，wrap；对齐 demo tab chips）—— */
.adm2-nav {
    gap: 8px 8px;
}
.adm2-navbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
    min-height: 36px;
    line-height: 1;
    font-size: 13px;
}
.adm2-navbtn .adm2-navico {
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    transition: color var(--fast);
}
.adm2-navbtn .adm2-navico .lucide {
    width: 15px;
    height: 15px;
}
.adm2-navbtn:hover .adm2-navico { color: var(--text); }
.adm2-navbtn.is-active .adm2-navico { color: var(--brand); }
.adm2-navtxt { display: inline-block; }

/* —— KPI 卡：左侧 3px 语义竖条 + tabular 数字（demo §9.5 4 卡语义色）—— */
.adm2-kpi {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}
.adm2-kpi-card {
    position: relative;
    overflow: hidden;
    padding: 15px 16px 15px 18px;
    background: var(--panel-2);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-soft);
}
.adm2-kpi-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--brand);
}
.adm2-kpi-card span {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--muted);
}
.adm2-kpi-card strong {
    margin-top: 6px;
    font-size: 27px;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
/* 语义竖条 + 数字色（gold / brand / ok / danger），与 demo 逐值对齐 */
.adm2-kpi-brand::before { background: var(--brand); }
.adm2-kpi-brand strong { color: var(--brand); }
.adm2-kpi-gold::before { background: var(--gold); }
.adm2-kpi-gold strong { color: var(--gold-strong); }
.adm2-kpi-ok::before { background: var(--ok); }
.adm2-kpi-ok strong { color: var(--ok); }
.adm2-kpi-danger::before { background: var(--danger); }
.adm2-kpi-danger strong { color: var(--danger); }

/* —— 表格语义色徽章文本（状态 / 类型 / 到期）—— */
.adm2-tone {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.adm2-tone-ok { color: var(--ok); }
.adm2-tone-gold { color: var(--gold-strong); }
.adm2-tone-brand { color: var(--brand); }
.adm2-tone-danger { color: var(--danger); }
.adm2-tone-faint {
    color: var(--faint);
    font-weight: 600;
}

/* —— 最近成交区块与 KPI 之间留白（demo 仪表盘布局）—— */
.adm2-pane .admin-pane > .adm2-block { margin-top: 2px; }

/* —— (④网站配置) demo 两列表单栅格 + 高级配置折叠（.adm2-cfg-*，只追加）—— */
.adm2-cfg-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 22px;
    margin-top: 4px;
}
/* 栅格内 admin-form-row 改为竖排（label 在上、input 在下），对齐 demo 两列表单观感 */
.adm2-cfg-grid .admin-form-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0;
}
.adm2-cfg-grid .admin-form-row label {
    width: auto;
    min-width: 0;
    flex: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
}
.adm2-cfg-grid .admin-form-row input {
    width: 100%;
}
.adm2-cfg-grid .admin-form-row .cfg-hint {
    flex: 0 0 auto;
    margin-left: 0;
}
/* 高级配置折叠：summary 复用区块标题样式，可点开合 */
.adm2-cfg-adv > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.adm2-cfg-adv > summary::-webkit-details-marker { display: none; }
.adm2-cfg-adv > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 7px;
    color: var(--muted);
    transition: transform var(--fast);
}
.adm2-cfg-adv[open] > summary::before { transform: rotate(90deg); }
@media (max-width: 640px) {
    .adm2-cfg-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   T5.5 桌面补漏批（.dp25- 前缀新层，仅追加；不改既有视觉规则）
   1) 收购桌面行市价差胶囊  2) 全视图常驻右栏工作台外壳
   3) KPI 四卡副行  4) 表单/购买确认壳对齐
   ============================================================ */

/* —— (3) 收购桌面行：单价下方市价差胶囊（desk-04；复用 .mbo-diff 语义色）—— */
.bo-cell-diff {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.bo-cell-diff .mbo-diff { font-size: 11px; }
.bo-cell-diff .mbo-diff.is-below { color: var(--faint); }
.bo-cell-diff .mbo-diff.is-above { color: var(--gold-strong); }
.bo-cell-diff .mbo-diff.is-even { color: var(--muted); }

/* —— (4) 仪表盘 demo 四卡（desk-08a）：主行强制四等分；副行为 T4 保留指标（次级、更小）—— */
.dp25-kpi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.adm2-kpi-unit {
    margin-left: 4px;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0;
}
/* demo §9.5① KPI 卡副行（今日交易额↑昨日 X 等；真实派生，无源留空） */
.adm2-kpi-sub {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    font-style: normal;
    font-weight: 600;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
    .dp25-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .dp25-kpi { grid-template-columns: minmax(0, 1fr); }
}

/* —— (1) 全视图常驻右栏工作台外壳（.dp25-workbench 复用 .market-workbench 双栏网格）——
   把非市场视图主体（.dp25-main）放左列、常驻 .detail-panel 放右列。仅桌面双栏；
   ≤1080px 起右栏在既有 .detail-panel 媒体查询里降级为底部 sheet（无需在此重复定位）。 */
.dp25-workbench > .dp25-main { min-width: 0; }
/* 后台子页 tab chips 横向较多，主列内容宽度兜底，避免撑破右栏 */
.dp25-admin > .dp25-main { min-width: 0; }
/* 常驻右栏内的行选中高亮（收购 / 在售 / 消息主行）——复用市场卡 is-selected 语义色 */
.bo-row.is-selected,
.sale-row.is-selected,
.msg-main.is-selected {
    outline: 1px solid var(--brand);
    outline-offset: -1px;
    background: var(--tint-brand);
}
.msg-main[data-msgopen] { cursor: pointer; }
.sale-row[data-saleopen] { cursor: pointer; }

/* —— (2) 桌面购买确认（demo desk-10a）：把移动 .pcm- sheet 复用为居中弹层 .dp25-confirm。
   .pcm- 内部元素样式仅在 ≤780px 媒体查询里定义，这里为桌面重新声明所需内部规则。 */
.dp25-confirm-mask {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--overlay);
}
.dp25-confirm {
    width: 372px;
    max-width: 100%;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 16px 18px 16px;
    animation: enter var(--normal, 190ms) var(--ease, ease);
}
.dp25-confirm .pcm-title {
    position: relative;
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 14px;
}
.dp25-confirm-close {
    position: absolute;
    top: -2px;
    right: -4px;
    width: 30px;
    height: 30px;
}
.dp25-confirm .pcm-item { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.dp25-confirm .pcm-item-icon {
    flex: 0 0 auto; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px; background: var(--panel-3); overflow: hidden;
}
.dp25-confirm .pcm-item-art { width: 38px; height: 38px; max-width: 88%; max-height: 88%; object-fit: contain; }
.dp25-confirm .pcm-item-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dp25-confirm .pcm-item-copy b { font-size: 15px; font-weight: 800; color: var(--text); }
.dp25-confirm .pcm-item-copy small { font-size: 12px; color: var(--muted); }
.dp25-confirm .pcm-step {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; margin-bottom: 14px;
    border-radius: var(--r); background: var(--bg-2);
}
.dp25-confirm .pcm-step-lbl { flex: 1 1 auto; font-size: 14px; font-weight: 700; color: var(--text); }
.dp25-confirm .pcm-step-btn {
    flex: 0 0 auto; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: var(--r-sm, 4px);
    background: var(--panel); color: var(--text); cursor: pointer;
    transition: border-color var(--fast, 140ms), color var(--fast, 140ms);
}
.dp25-confirm .pcm-step-btn:hover { border-color: var(--brand); color: var(--brand); }
.dp25-confirm .pcm-step-val {
    width: 52px;
    min-width: 52px;
    height: 34px;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--line);
    border-radius: var(--r-sm, 4px);
    background: var(--panel);
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
}
.dp25-confirm .pcm-step-val:focus { outline: none; border-color: var(--brand); }
.dp25-confirm .pcm-step-cap { font-size: 12.5px; color: var(--faint); }
.dp25-confirm .pcm-settle { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.dp25-confirm .pcm-total { display: flex; align-items: center; justify-content: space-between; }
.dp25-confirm .pcm-total > span { font-size: 14px; font-weight: 700; color: var(--text); }
.dp25-confirm .pcm-total b {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 22px; font-weight: 900; color: var(--gold);   /* 合计数字同款饱和金，与 .pcm-total b 一致 */
    font-variant-numeric: tabular-nums;
}
.dp25-confirm .pcm-coin { display: flex; color: var(--gold); }
.dp25-confirm .pcm-after { display: flex; align-items: center; justify-content: space-between; }
.dp25-confirm .pcm-after span { font-size: 11.5px; color: var(--muted); }
.dp25-confirm .pcm-after strong { font-size: 12.5px; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.dp25-confirm .pcm-after strong.is-insufficient { color: var(--danger); }
.dp25-confirm-actions { display: flex; gap: 10px; }
.dp25-confirm-cancel {
    flex: 0 0 auto; min-width: 84px; min-height: 42px;
    border: 1px solid var(--line-soft); border-radius: var(--r);
    background: var(--panel-2); color: var(--muted);
    font-size: 14px; font-weight: 700; cursor: pointer;
}
.dp25-confirm-cancel:hover { border-color: var(--line); color: var(--text); }
.dp25-confirm-pay {
    flex: 1 1 auto; min-height: 42px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: var(--r);
    background: var(--buy, var(--brand)); color: var(--on-brand);
    font-size: 14.5px; font-weight: 800; cursor: pointer;
}
.dp25-confirm-pay .pcm-confirm-ico { display: flex; }
.dp25-confirm-note { display: block; margin-top: 10px; font-size: 11px; color: var(--faint); text-align: center; }

/* —— 桌面 4 表单壳（demo §7 / desk-09a~d）：两列字段行 / 方式二选一分段 / 金色计算提示条 —— */
.dp25-form-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.dp25-form-two label { margin: 0; }
.dp25-form-mode-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted);
}
.dp25-form-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 4px;
}
.dp25-form-seg-btn {
    min-height: 40px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    background: var(--panel);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--fast, 140ms), color var(--fast, 140ms), background var(--fast, 140ms);
}
.dp25-form-seg-btn:hover { border-color: var(--line); }
.dp25-form-seg-btn.is-active {
    border-color: var(--brand);
    background: var(--tint-brand);
    color: var(--brand);
}
.dp25-form-calc {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--r);
    background: var(--tint-gold);
    color: var(--gold-strong);
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.dp25-form-calc-ico { display: flex; color: var(--gold); }
.dp25-form-calc .trend-up { color: var(--brand); }
.dp25-form-calc .trend-down { color: var(--ok); }
.dp25-form-brief strong { color: var(--text); }
.dp25-form-brief { display: flex; align-items: center; gap: 12px; }
.dp25-brief-thumb {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2, rgba(255, 255, 255, .04));
    border: 1px solid var(--line); /* 原 var(--border) 未定义→整条 border 失效，改用已定义描边令牌 */
}
.dp25-brief-img { width: 100%; height: 100%; object-fit: contain; }
.dp25-brief-copy { min-width: 0; }

/* 真实玩家头像 <img>：填满现有头像容器（方块/圆），object-fit:cover 不变形，
   border-radius:inherit 继承容器圆角（故不需给容器加 overflow:hidden，也就不会裁掉
   容器外负偏移叠加的在线点 dp2-dot / me-avatar-dot / bo-avatar-dot）。
   缺 avatarUrl / onerror 时回退到容器内的文字缩写（保留原缩写样式作降级）。 */
.pa-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

/* —— 物品 ID/名称 搜索下拉（上架/求购表单，同名歧义可自选）—— */
.mip-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    z-index: 6;
    max-height: 264px;
    overflow-y: auto;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow);
    padding: 4px;
}
.mip-sug-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
}
.mip-sug-item:hover,
.mip-sug-item:focus { background: rgba(var(--brand-rgb), .12); outline: none; }
.mip-sug-thumb {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mip-sug-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mip-sug-name {
    flex: 1 1 auto;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mip-sug-meta { flex: 0 0 auto; color: var(--muted); font-size: 11.5px; font-weight: 700; }
.mip-sug-empty { padding: 9px; color: var(--muted); font-size: 12.5px; }

/* 上架弹窗 · 「我身上的物品」（插件心跳同步的真实背包，只能卖身上有的东西） */
.inv-pick {
    margin-bottom: 8px;
    padding: 10px 12px;
    background: var(--bg-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
}
.inv-pick-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.inv-pick-head b { font-size: 13px; color: var(--text); }
.inv-pick-head small { font-size: 11.5px; color: var(--muted); }
.inv-pick-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 176px; overflow-y: auto; }
.inv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 8px 4px 4px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: var(--panel-2);
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
}
.inv-chip:hover, .inv-chip:focus { border-color: var(--line); background: rgba(var(--brand-rgb), .12); outline: none; }
.inv-chip.is-picked { border-color: rgba(var(--brand-rgb), .9); background: rgba(var(--brand-rgb), .18); }
.inv-chip.is-blocked { opacity: .45; cursor: not-allowed; }
.inv-chip-img { width: 26px; height: 26px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.inv-chip-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.inv-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.inv-chip-amt { color: var(--muted); font-weight: 700; }