/* =====================================================================
 * 05 鸡蛋保存期限 · 视觉母题「蛋托格 + 冰箱格位条」
 * ---------------------------------------------------------------------
 * 色板：奶油橘（--egg5-pri #c2601f）+ 蛋壳米白；版式 J 清单勾选主导，
 * 一份大号勾选清单撑起整屏，右侧蛋托格实时变色。
 * 与 04 蛋奶黄分步向导完全不同：这一页是「清单 + 托盘」。
 * 纯 CSS / SVG，零图片请求；本页只作用于 .b11--egg5 容器。
 * ===================================================================== */

.b11--egg5 {
    --egg5-pri: #c2601f;
    --egg5-pri2: #e58c42;
    --egg5-deep: #7e3a0e;
    --egg5-tint: #fbead9;
    --egg5-shell: #fdf7ec;
    --egg5-line: #e6cdb0;
    --egg5-card: #ffffff;
    --egg5-mute: #9a846f;
    --egg5-fresh: #4a7c1f;
    --egg5-near: #c98a12;
    --egg5-over: #b3373c;
    --b11-pri: #c2601f;
    --b11-pri2: #e58c42;
    --b11-tint: #fbead9;
    --b11-bg: #f5efe7;
    --b11-bg2: #e8dccb;
    --b11-card2: #fdf9f3;
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--egg5-line) 34%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--egg5-line) 34%, transparent) 1px, transparent 1px);
    background-size: 40px 40px;
}
:root[data-theme="dark"] .b11.b11--egg5 {
    --egg5-pri: #ea9a5c;
    --egg5-pri2: #f5b884;
    --egg5-deep: #f7cda6;
    --egg5-tint: #2f2015;
    --egg5-shell: #262019;
    --egg5-line: #4a3626;
    --egg5-card: #1a1d23;
    --egg5-mute: #a99280;
    --egg5-fresh: #8dc24a;
    --egg5-near: #e0b054;
    --egg5-over: #f08b8f;
    --b11-pri: #ea9a5c;
    --b11-pri2: #f5b884;
    --b11-tint: #2f2015;
    --b11-bg: #16120e;
    --b11-bg2: #1e1813;
    --b11-card2: #221b15;
}

/* ---------- 首屏 ---------- */
.egg5-hero {
    display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
    gap: 28px; align-items: center; padding: 34px 0 22px;
    border-bottom: 1.5px solid var(--egg5-line);
}
.egg5-hero .b11-h1 em { color: var(--egg5-pri); }
.egg5-hero .b11-lead b { box-shadow: inset 0 -.42em 0 var(--egg5-tint); }

/* ---------- 蛋托格母题 ---------- */
.egg5-tray {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
    padding: 12px; background: var(--b11-card2);
    border: 2px solid var(--egg5-line); border-radius: 10px;
}
.egg5-tray .egg5-slot {
    aspect-ratio: 1 / 1.28; border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
    background: var(--egg5-shell); border: 1.5px solid var(--egg5-line);
    display: grid; place-items: center; font-size: 10px; font-family: var(--b11-mono);
    color: var(--egg5-mute); position: relative; transition: background .25s, border-color .25s;
}
.egg5-tray .egg5-slot::after {
    content: ""; position: absolute; inset: 18% 22% auto 22%; height: 18%;
    border-radius: 50%; background: color-mix(in srgb, #fff 70%, transparent);
}
.egg5-tray .egg5-slot.is-fresh { background: color-mix(in srgb, var(--egg5-fresh) 26%, var(--egg5-shell)); border-color: var(--egg5-fresh); }
.egg5-tray .egg5-slot.is-near { background: color-mix(in srgb, var(--egg5-near) 30%, var(--egg5-shell)); border-color: var(--egg5-near); }
.egg5-tray .egg5-slot.is-over { background: color-mix(in srgb, var(--egg5-over) 30%, var(--egg5-shell)); border-color: var(--egg5-over); }
.egg5-tray .egg5-slot span { position: relative; z-index: 1; }
.egg5-tray-cap { font-size: var(--b11-xs); color: var(--egg5-mute); text-align: center; margin: 8px 0 0; }

/* ---------- 清单主导的操作台 ---------- */
.egg5-console {
    margin-top: 24px; background: var(--b11-card); border: 1px solid var(--b11-line);
    border-top: 4px solid var(--egg5-pri); box-shadow: var(--b11-shadow);
    clip-path: polygon(0 0, calc(100% - var(--b11-cut)) 0, 100% var(--b11-cut), 100% 100%, 0 100%);
}
.egg5-console-hd {
    padding: 18px 24px 14px; background:
        repeating-linear-gradient(45deg, color-mix(in srgb, var(--egg5-pri) 6%, transparent) 0 9px, transparent 9px 19px),
        var(--b11-card2);
    border-bottom: 1px dashed var(--egg5-line);
}
.egg5-micro {
    display: block; font-family: var(--b11-mono); font-size: var(--b11-xs);
    letter-spacing: .16em; color: var(--egg5-pri); margin-bottom: 6px;
}
.egg5-console-hd h2 { font-size: var(--b11-lg); }
.egg5-console-hd p { font-size: var(--b11-sm); color: var(--b11-sub); margin: 6px 0 0; }

.egg5-body { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }
.egg5-list { padding: 20px 24px 6px; }
.egg5-group { margin-bottom: 22px; }
.egg5-group-hd {
    display: flex; align-items: center; gap: 9px; font-size: var(--b11-sm); font-weight: 800;
    color: var(--egg5-deep); margin-bottom: 10px; padding-bottom: 6px;
    border-bottom: 1px solid var(--egg5-line);
}
.egg5-group-hd i {
    font-style: normal; font-family: var(--b11-mono); font-size: 11px; font-weight: 800;
    background: var(--egg5-pri); color: #fff; width: 20px; height: 20px; display: grid; place-items: center;
}

.egg5-item {
    position: relative; display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 12px; margin-bottom: 8px; cursor: pointer;
    background: var(--b11-card2); border: 1.5px solid var(--egg5-line);
    transition: all .15s;
}
.egg5-item:hover { border-color: var(--egg5-pri); }
.egg5-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.egg5-item-box {
    flex: none; width: 20px; height: 20px; margin-top: 2px;
    border: 2px solid var(--egg5-line2, var(--egg5-line)); background: var(--egg5-card);
    display: grid; place-items: center; transition: all .15s;
}
.egg5-item input[type="checkbox"] + .egg5-item-box { border-radius: 3px; }
.egg5-item input[type="radio"] + .egg5-item-box { border-radius: 50%; }
.egg5-item input:checked + .egg5-item-box { background: var(--egg5-pri); border-color: var(--egg5-pri); }
.egg5-item input:checked + .egg5-item-box::after {
    content: "✓"; color: #fff; font-size: 12px; font-weight: 800; line-height: 1;
}
.egg5-item:has(input:checked) { border-color: var(--egg5-pri); background: var(--egg5-tint); }
.egg5-item-txt { flex: 1 1 auto; min-width: 0; }
.egg5-item-txt b { display: block; font-size: var(--b11-sm); color: var(--b11-ink); }
.egg5-item-txt em {
    display: block; font-style: normal; font-size: var(--b11-xs); color: var(--b11-mute);
    line-height: 1.62; margin-top: 2px;
}
.egg5-delta {
    flex: none; font-family: var(--b11-mono); font-size: var(--b11-xs); font-weight: 800;
    padding: 2px 8px; align-self: center; white-space: nowrap;
}
.egg5-delta--plus { background: var(--b11-okbg); color: var(--b11-ok); }
.egg5-delta--minus { background: var(--b11-badbg); color: var(--b11-bad); }
.egg5-delta--zero { background: var(--b11-card); color: var(--b11-mute); border: 1px solid var(--b11-line); }

.egg5-side {
    padding: 20px 24px 18px; background: var(--b11-card2);
    border-left: 1px dashed var(--egg5-line);
}
.egg5-tray-wrap { margin-bottom: 14px; }
.egg5-live { display: grid; gap: 8px; margin: 14px 0; }
.egg5-live .b11-readout-row { border-left: 3px solid var(--egg5-pri); }
.egg5-live .b11-readout-row.is-hot { background: var(--egg5-tint); border-color: transparent; }
.egg5-live .b11-readout-row.is-hot .vl { color: var(--egg5-pri); }

/* ---------- 结果 ---------- */
.egg5-readout { display: grid; gap: 0; margin-bottom: var(--b11-gap); }
.egg5-readout .b11-readout-row { border-left: 3px solid var(--egg5-pri); }
.egg5-readout .b11-readout-row.is-hot { background: var(--egg5-tint); border-color: transparent; border-left-color: var(--egg5-pri2); }
.egg5-readout .b11-readout-row.is-hot .vl { color: var(--egg5-pri); }
.egg5-grid2 { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }

/* ---------- 冰箱格位条 ---------- */
.egg5-zones { display: grid; gap: 9px; }
.egg5-zone { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.egg5-zone-n { font-size: var(--b11-sm); font-weight: 750; color: var(--b11-ink); }
.egg5-zone-bar { position: relative; height: 26px; background: var(--b11-bg2); border: 1px solid var(--b11-line); overflow: hidden; }
.egg5-zone-bar i {
    position: absolute; left: 0; top: 0; bottom: 0; display: block;
    background: linear-gradient(90deg, var(--egg5-pri2), var(--egg5-pri));
    opacity: .28;
}
.egg5-zone-bar b {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    font-family: var(--b11-mono); font-size: var(--b11-xs); color: var(--b11-ink); font-weight: 700;
}
.egg5-zone-t { font-family: var(--b11-mono); font-size: var(--b11-xs); color: var(--b11-mute); white-space: nowrap; }
.egg5-zone.is-here .egg5-zone-n { color: var(--egg5-pri); }
.egg5-zone.is-here .egg5-zone-bar { border-color: var(--egg5-pri); border-width: 2px; }

/* ---------- 开箱检查清单 ---------- */
.egg5-check { list-style: none; margin: 0; padding: 0; }
.egg5-check li {
    position: relative; padding: 9px 0 9px 30px; font-size: var(--b11-sm);
    color: var(--b11-sub); border-bottom: 1px dotted var(--egg5-line); line-height: 1.74;
}
.egg5-check li:last-child { border-bottom: 0; }
.egg5-check li::before {
    content: "☐"; position: absolute; left: 0; top: 8px; width: 20px; height: 20px;
    display: grid; place-items: center; background: var(--egg5-tint); color: var(--egg5-deep);
    font-size: 12px; font-weight: 800;
}
.egg5-check li b { color: var(--b11-ink); }

/* ---------- 批量清洗条 ---------- */
.egg5-clean {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    margin-top: 14px; padding: 12px 14px; background: var(--b11-card2);
    border: 1px solid var(--b11-line); font-size: var(--b11-sm);
}
.egg5-clean > b { color: var(--egg5-pri); font-family: var(--b11-mono); font-size: var(--b11-xs); letter-spacing: .08em; }
.egg5-clean code { margin-left: auto; }

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
    .egg5-hero, .egg5-body, .egg5-grid2 { grid-template-columns: minmax(0, 1fr); }
    .egg5-side { border-left: 0; border-top: 1px dashed var(--egg5-line); }
    .egg5-clean code { margin-left: 0; }
}
@media (max-width: 560px) {
    .egg5-tray { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .egg5-zone { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 首屏 CTA：保证主操作入口落在第一屏 ---------- */
.b11-herocta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 20px;
}
.b11-herocta span {
    font-size: var(--b11-xs); color: var(--b11-mute);
    font-family: var(--b11-mono); letter-spacing: .02em; line-height: 1.6;
}
.b11-herocta .b11-btn { padding: 11px 24px; font-size: var(--b11-sm); }