/* =====================================================================
 * 10 多宠资源分配 · 独立版式「家庭资源盘」
 * 灰青 + 分配环 + 宠物卡片网格 + 时段泳道
 * ===================================================================== */
.pb--mp { --pb-a: #4a6266; --pb-a-soft: #e5edef; }
:root[data-theme="dark"] .pb--mp { --pb-a: #94c0c5; --pb-a-soft: #1e2e31; }

.mp-hero { padding-top: 32px; }
.mp-console { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .76fr); gap: 14px; margin-top: 22px; align-items: start; }
.mp-settings { border-top: 3px solid var(--pb-a); }
.mp-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-flags { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }

/* 分配环 */
.mp-donut { background: var(--pb-card); border: 1px solid var(--pb-line2); border-radius: var(--pb-r); box-shadow: var(--pb-shadow-sm); padding: 17px; }
.mp-donut-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--pb-line2); padding-bottom: 9px; }
.mp-donut-head span { font-family: var(--pb-mono); font-size: 9.5px; letter-spacing: .14em; color: var(--pb-a); }
.mp-donut-head b { font-family: var(--pb-mono); font-size: 12.5px; color: var(--pb-ink); }
.mp-donut-svg { width: 176px; height: 176px; display: block; margin: 10px auto 6px; }
.mp-donut-bg { fill: none; stroke: var(--pb-line2); stroke-width: 18; }
.mp-donut-arc { fill: none; stroke-width: 18; stroke-linecap: butt; transition: stroke-dasharray .4s ease; }
.mp-donut-v { fill: var(--pb-ink); font-family: var(--pb-serif); font-size: 27px; font-weight: 700; }
.mp-donut-t { fill: var(--pb-muted); font-size: 10.5px; font-family: var(--pb-sans); }
.mp-legend { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.mp-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--pb-ink2); }
.mp-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.mp-budget-bar { margin-top: 15px; padding-top: 13px; border-top: 1px dashed var(--pb-line); }
.mp-budget-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--pb-muted); }
.mp-budget-top b { font-family: var(--pb-mono); color: var(--pb-ink); }
.mp-budget-bar .pb-meter { margin: 7px 0 5px; }
.mp-budget-bar .pb-meter.is-over > i { background: var(--pb-danger); }
.mp-budget-bar small { font-size: 11px; color: var(--pb-muted); }

/* 宠物卡片 */
.mp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: 12px; }
.mp-pet { position: relative; background: var(--pb-card); border: 1px solid var(--pb-line2); border-radius: var(--pb-r); box-shadow: var(--pb-shadow-sm); padding: 15px; border-left: 4px solid var(--pb-a); }
.mp-pet.is-conflict { border-left-color: var(--pb-danger); }
.mp-pet-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 11px; }
.mp-pet-idx { font-family: var(--pb-mono); font-size: 10px; letter-spacing: .14em; color: var(--pb-a); }
.mp-pet-del { border: 0; background: transparent; color: var(--pb-muted); font-size: 18px; line-height: 1; cursor: pointer; }
.mp-pet-del:hover { color: var(--pb-danger); }
.mp-pet .pb-fields { grid-template-columns: 1fr 1fr; gap: 9px; }
.mp-pet .pb-field > label { font-size: 11.5px; }
.mp-pet input, .mp-pet select { padding: 7px 9px; font-size: 12.5px; }
.mp-pet .mp-wide { grid-column: 1 / -1; }
.mp-pet-check { margin-top: 11px; }
.mp-pet-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--pb-line); font-size: 11.5px; color: var(--pb-muted); }
.mp-pet-foot b { font-family: var(--pb-mono); color: var(--pb-a); font-size: 12.5px; }

/* 时段泳道 */
.mp-lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.mp-lane { border: 1px solid var(--pb-line2); border-radius: var(--pb-r-sm); background: var(--pb-card2); padding: 11px; min-width: 0; }
.mp-lane.is-busy { border-color: var(--pb-danger); background: var(--pb-danger-soft); }
.mp-lane-t { font-family: var(--pb-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--pb-a); margin-bottom: 8px; }
.mp-lane-chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 30px; }
.mp-lane-chip { padding: 3px 8px; border-radius: 999px; background: var(--pb-card); border: 1px solid var(--pb-line); font-size: 11.5px; color: var(--pb-ink2); }
.mp-lane-chip.is-sep { border-color: var(--pb-danger); color: var(--pb-danger); }
.mp-lane-empty { font-size: 11.5px; color: var(--pb-muted); }
.mp-prose { font-size: 14.5px; line-height: 2; color: var(--pb-ink2); }
.mp-prose b { color: var(--pb-ink); }
.mp-prose p { margin-bottom: 11px; }

@media (max-width: 1000px) { .mp-console { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
    .mp-fields, .mp-flags, .mp-lanes { grid-template-columns: 1fr 1fr; }
    .mp-lanes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) { .mp-fields, .mp-flags, .mp-pet .pb-fields { grid-template-columns: 1fr; } }