/* =====================================================================
 * 05 异宠垫材更换 · 独立版式「材质色卡 + 循环日历 + 甘特台账」
 * 莓红棕 + 材质纹理色卡 + 30 天方格日历
 * ===================================================================== */
.pb--eb { --pb-a: #8c4a5c; --pb-a-soft: #f4e8ec; }
:root[data-theme="dark"] .pb--eb { --pb-a: #db9ab0; --pb-a-soft: #34222a; }

.eb-hero { padding-top: 32px; }
.eb-swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin-top: 22px; }
.eb-swatch { position: relative; border: 1px solid var(--pb-line2); border-radius: var(--pb-r-sm); background: var(--pb-card); padding: 9px; cursor: pointer; text-align: left; transition: border-color .18s, transform .18s, box-shadow .18s; }
.eb-swatch:hover { transform: translateY(-2px); }
.eb-swatch.is-on { border-color: var(--pb-a); box-shadow: 0 0 0 2px var(--pb-a-soft); }
.eb-swatch-tex { display: block; height: 30px; border-radius: 5px; margin-bottom: 7px; border: 1px solid rgba(0,0,0,.06); }
.eb-swatch b { display: block; font-size: 12.5px; color: var(--pb-ink); }
.eb-swatch small { display: block; font-size: 10.5px; color: var(--pb-muted); font-family: var(--pb-mono); }
.eb-tex--paper { background: repeating-linear-gradient(90deg, #f2ece1 0 4px, #e8e0d2 4px 7px); }
.eb-tex--aspen { background: repeating-linear-gradient(45deg, #e6d3ac 0 3px, #d6bd91 3px 6px); }
.eb-tex--coco { background: radial-gradient(circle at 30% 30%, #7a543c 0 2px, #5f4030 2px 5px); }
.eb-tex--bark { background: repeating-linear-gradient(120deg, #8c6142 0 4px, #6f4a32 4px 8px); }
.eb-tex--sand { background: radial-gradient(circle at 20% 40%, #e8d9ad 0 1px, #d8c391 1px 3px); }
.eb-tex--hemp { background: repeating-linear-gradient(0deg, #d9d2bd 0 2px, #c8c0a8 2px 4px); }

.eb-board { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr); gap: 14px; margin-top: 14px; align-items: start; }
.eb-form { border-top: 3px solid var(--pb-a); }
.eb-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eb-flags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.eb-flags .pb-check { padding: 8px 10px; }

/* 循环日历 */
.eb-cal { background: var(--pb-card); border: 1px solid var(--pb-line2); border-radius: var(--pb-r); box-shadow: var(--pb-shadow-sm); padding: 17px; }
.eb-cal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--pb-line2); padding-bottom: 9px; }
.eb-cal-head span { font-family: var(--pb-mono); font-size: 9.5px; letter-spacing: .14em; color: var(--pb-a); }
.eb-cal-head b { font-size: 14px; }
.eb-cal-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 13px 0; }
.eb-cal-next > div { border: 1px solid var(--pb-line2); border-radius: var(--pb-r-sm); background: var(--pb-card2); padding: 9px; min-width: 0; }
.eb-cal-next span { display: block; font-size: 11px; color: var(--pb-muted); }
.eb-cal-next b { display: block; font-family: var(--pb-mono); font-size: 13px; color: var(--pb-ink); word-break: break-all; }
.eb-cal-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--pb-muted); margin-bottom: 9px; }
.eb-cal-legend span { display: inline-flex; align-items: center; gap: 4px; }
.eb-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.eb-dot--today { background: var(--pb-brand); }
.eb-dot--change { background: var(--pb-a); }
.eb-dot--spot { background: var(--pb-warn); }
.eb-cal-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.eb-day { position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--pb-line2); border-radius: 4px; background: var(--pb-card2); display: grid; place-items: center; font-family: var(--pb-mono); font-size: 10px; color: var(--pb-muted); }
.eb-day.is-today { border-color: var(--pb-brand); color: var(--pb-brand); font-weight: 700; }
.eb-day.is-change { background: var(--pb-a); border-color: var(--pb-a); color: #fff; font-weight: 700; }
.eb-day.is-spot::after { content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--pb-warn); }
.eb-day.is-over { border-color: var(--pb-danger); }
.eb-cal-foot { font-size: 11.5px; line-height: 1.8; color: var(--pb-muted); margin-top: 11px; }

.eb-split { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 14px; margin-top: 14px; }
.eb-batch { min-width: 980px; }
.eb-batch td input[type="text"], .eb-batch td input[type="number"], .eb-batch td input[type="date"] { padding: 5px 7px; font-size: 12px; min-width: 56px; }
.eb-gantt { display: grid; gap: 7px; }
.eb-gantt-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) 96px; gap: 10px; align-items: center; font-size: 12px; }
.eb-gantt-row > b { font-family: var(--pb-mono); font-size: 11.5px; color: var(--pb-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eb-gantt-track { height: 12px; border-radius: 99px; background: var(--pb-line2); position: relative; overflow: hidden; }
.eb-gantt-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--pb-a); }
.eb-gantt-track.is-over i { background: var(--pb-danger); }
.eb-gantt-row > span { font-family: var(--pb-mono); font-size: 11px; color: var(--pb-muted); text-align: right; }
.eb-prose { font-size: 14.5px; line-height: 2; color: var(--pb-ink2); }
.eb-prose b { color: var(--pb-ink); }
.eb-prose p { margin-bottom: 11px; }

@media (max-width: 1100px) {
    .eb-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .eb-board, .eb-split { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .eb-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .eb-flags { grid-template-columns: 1fr; }
    .eb-cal-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
    .eb-fields { grid-template-columns: 1fr; }
    .eb-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .eb-cal-next { grid-template-columns: 1fr; }
}