/* ===== 53 · 搬家箱号索引：箱板纸 / 箱贴 · 纸箱棕 ===== */
.mb-page {
    --cg-accent: #96662c;
    --cg-accent-2: #70491d;
    --cg-accent-soft: #f7ecd9;
    --cg-accent-ink: #ffffff;
    background-image:
        repeating-linear-gradient(90deg, rgba(150, 102, 44, .028) 0 2px, transparent 2px 9px),
        radial-gradient(rgba(120, 105, 70, .05) .7px, transparent .7px) 0 0 / 19px 19px;
}
:root[data-theme="dark"] .mb-page {
    --cg-accent: #e2b475;
    --cg-accent-2: #f0c996;
    --cg-accent-soft: rgba(226, 180, 117, .13);
    --cg-accent-ink: #2b1c07;
    background-image: repeating-linear-gradient(90deg, rgba(226, 180, 117, .022) 0 2px, transparent 2px 9px);
}

.mb-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 470px); gap: 38px; align-items: start; padding: 24px 0 26px; }
.mb-lead .cg-h1 em { background: linear-gradient(transparent 62%, var(--cg-accent-soft) 62%); }
.mb-label-demo {
    position: relative; margin: 26px 0 0; max-width: 360px; padding: 22px 18px 14px;
    border: 1.5px dashed var(--cg-accent); border-radius: 3px; background: var(--cg-surface);
    box-shadow: 3px 4px 0 rgba(150, 102, 44, .12); transform: rotate(-.6deg);
}
.mb-tape { position: absolute; top: -9px; left: 50%; width: 108px; height: 18px; transform: translateX(-50%) rotate(-2deg); background: rgba(214, 186, 122, .55); border-left: 1px dashed rgba(255, 255, 255, .5); border-right: 1px dashed rgba(255, 255, 255, .5); }
.mb-label-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 2px solid var(--cg-ink); padding-bottom: 6px; }
.mb-label-top b { font-family: var(--cg-num); font-size: 23px; letter-spacing: .02em; }
.mb-label-top span { font-size: 11px; font-weight: 750; color: var(--cg-bad); }
.mb-label-grid { display: grid; grid-template-columns: 62px 1fr; gap: 2px 9px; margin: 9px 0; font-size: 11.5px; }
.mb-label-grid span { color: var(--cg-muted); }
.mb-label-grid b { color: var(--cg-ink); }
.mb-label-items { font-size: 11.5px; color: var(--cg-ink-2); border-top: 1px dashed var(--cg-line); padding-top: 7px; }
.mb-label-bar { font-family: var(--cg-num); font-size: 13px; letter-spacing: .2em; color: var(--cg-ink); margin-top: 8px; }
.mb-lead .cg-value-row { margin-top: 24px; }

.mb-console .cg-console-h { background: var(--cg-accent-2); }
.mb-input { min-height: 132px; }
.mb-inline { display: flex; gap: 7px; }
.mb-inline .cg-input { flex: 1; min-width: 0; }
.mb-console .cg-console-b { padding: 16px 18px; }
.mb-console .cg-field { margin-bottom: 10px; }
.mb-kpis .cg-kpi-value { color: var(--cg-accent); }
.mb-kpis .cg-kpi--ok .cg-kpi-value { color: var(--cg-ok); }
.mb-kpis .cg-kpi--bad .cg-kpi-value { color: var(--cg-bad); }

.mb-index-card { margin-top: 26px; }
.mb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mb-box {
    position: relative; border: 1px solid var(--cg-line); border-top: 3px solid var(--cg-accent);
    border-radius: 3px; background: var(--cg-surface); padding: 12px 13px;
    box-shadow: 2px 2px 0 rgba(150, 102, 44, .07);
}
.mb-box.is-flag { border-top-color: var(--cg-bad); }
.mb-box-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px dashed var(--cg-line); padding-bottom: 7px; }
.mb-box-h b { font-family: var(--cg-num); font-size: 16px; letter-spacing: .03em; }
.mb-box-meta { font-size: 10.8px; color: var(--cg-muted); margin: 6px 0 8px; }
.mb-box-meta b { color: var(--cg-ink-2); font-weight: 700; }
.mb-items { display: grid; gap: 3px; max-height: 190px; overflow: auto; }
.mb-item {
    display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
    border: 0; background: transparent; padding: 3px 4px; border-radius: 4px; cursor: pointer;
    font-size: 12px; color: var(--cg-ink-2); line-height: 1.6;
}
.mb-item:hover { background: var(--cg-surface-2); }
.mb-item i { flex: none; width: 13px; height: 13px; border: 1.5px solid var(--cg-line); border-radius: 3px; display: block; }
.mb-item.is-checked { color: var(--cg-faint); text-decoration: line-through; }
.mb-item.is-checked i { background: var(--cg-ok); border-color: var(--cg-ok); }
.mb-item small { margin-left: auto; font-family: var(--cg-num); color: var(--cg-faint); font-size: 10px; }
.mb-box-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; padding-top: 7px; border-top: 1px dashed var(--cg-line); }
.mb-lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 18px; align-items: start; }
.mb-opens, .mb-groups { display: grid; gap: 7px; max-height: 300px; overflow: auto; }
.mb-open { display: flex; align-items: center; gap: 9px; border-left: 3px solid var(--cg-bad); border-radius: 6px; padding: 7px 10px; background: var(--cg-surface-2); font-size: 12.2px; }
.mb-open b { flex: 1; color: var(--cg-ink); }
.mb-group { border: 1px solid var(--cg-line); border-radius: 6px; padding: 8px 10px; background: var(--cg-surface-2); font-size: 12.2px; }
.mb-group-top { display: flex; justify-content: space-between; gap: 8px; }
.mb-group-top b { color: var(--cg-ink); }
.mb-group-top span { font-family: var(--cg-num); color: var(--cg-accent); }

@media print {
    .mb-label-demo, .mb-console, .mb-lower, .mb-items { display: none !important; }
    .mb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .mb-box { break-inside: avoid; border: 1.5px dashed #333; box-shadow: none; min-height: 150px; }
    .mb-index-card::before { content: "搬家箱贴（每箱一张）"; display: block; padding: 12px; font-size: 14pt; font-weight: 700; }
}
@media (max-width: 1080px) {
    .mb-hero, .mb-lower { grid-template-columns: 1fr; }
    .mb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .mb-hero { gap: 20px; padding-top: 14px; }
    .mb-label-demo { display: none; }
    .mb-grid { grid-template-columns: 1fr; }
}