/* 22 · 牛油果催熟指南 —— 视觉母题「剖面与熟成尺」：果绿 / 奶油黄 / 剖面渐变
   独立布局：CSS 剖面插画随熟度变色、四段熟度尺、日历排期与处置卡。 */
.t28.av-wrap {
    --t28-bg: #f6f8ee;
    --t28-surface: #fffef7;
    --t28-surface-2: #eef3df;
    --t28-ink: #25351c;
    --t28-sub: #52653f;
    --t28-muted: #879672;
    --t28-line: #dfe8ce;
    --t28-accent: #4c7f39;
    --t28-accent-2: #c99a35;
    --t28-soft: #e9f2d8;
    --t28-on-accent: #ffffff;
    --t28-ok: #3f7a3a;
    --t28-warn: #9a7013;
    --t28-danger: #a6542f;
    --t28-ok-soft: #e5f2dd;
    --t28-warn-soft: #faf0d5;
    --t28-danger-soft: #f9e7dc;
    --t28-radius: 26px;
    --t28-radius-sm: 12px;
    --t28-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
    --t28-shadow: 0 10px 30px rgba(76,127,57,.09);
}
:root[data-theme="dark"] .t28.av-wrap {
    --t28-bg: #10160c;
    --t28-surface: #1a2315;
    --t28-surface-2: #222e1c;
    --t28-ink: #edf5e3;
    --t28-sub: #c1d3ac;
    --t28-muted: #92a67e;
    --t28-line: #324227;
    --t28-accent: #9ed16f;
    --t28-accent-2: #e8c273;
    --t28-soft: #273a1e;
    --t28-on-accent: #10160c;
    --t28-ok: #9ed16f;
    --t28-warn: #ecc079;
    --t28-danger: #f0a57d;
    --t28-ok-soft: #23351b;
    --t28-warn-soft: #372c18;
    --t28-danger-soft: #3a2419;
    --t28-shadow: 0 8px 28px rgba(0,0,0,.42);
}
.av-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; align-items: center; padding: 34px 0 26px; }
.av-hero h1 em { display: block; font-style: normal; font-size: .54em; color: var(--t28-accent-2); margin-top: 10px; }
.av-wrap .t28-eyebrow { border-radius: 999px; }

/* 牛油果剖面：纯 CSS，随 data-level 变色 */
.av-fruit-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px;
    border-radius: 26px; background: var(--t28-surface); box-shadow: var(--t28-shadow); }
.av-fruit { width: 150px; height: 196px; border-radius: 48% 48% 48% 48% / 62% 62% 38% 38%;
    background: linear-gradient(160deg, #6f9a3c, #3c6425); padding: 16px; display: grid; place-items: center;
    box-shadow: inset -12px -10px 22px rgba(0,0,0,.16), 0 12px 24px rgba(60,100,37,.22); transition: background .35s; }
.av-flesh { width: 100%; height: 100%; border-radius: 46% 46% 46% 46% / 60% 60% 40% 40%;
    background: radial-gradient(closest-side at 50% 55%, #f3e7ad 0%, #dbe481 62%, #a9c65a 100%);
    display: grid; place-items: center; box-shadow: inset 0 0 18px rgba(120,150,50,.28); transition: background .35s; }
.av-seed { width: 62px; height: 62px; border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #c68a4d, #8a5326); box-shadow: 0 5px 12px rgba(80,50,20,.28); }
.av-fruit[data-level="1"] { background: linear-gradient(160deg, #86b348, #4c7a2c); }
.av-fruit[data-level="1"] .av-flesh { background: radial-gradient(closest-side at 50% 55%, #f6efc4, #dfe9a0 70%, #b9d277); }
.av-fruit[data-level="3"] { background: linear-gradient(160deg, #5d5730, #33301c); }
.av-fruit[data-level="3"] .av-flesh { background: radial-gradient(closest-side at 50% 55%, #f0dd92, #cfcf6b 62%, #9fab4b); }
.av-fruit[data-level="4"] { background: linear-gradient(160deg, #4b3a24, #2a2115); }
.av-fruit[data-level="4"] .av-flesh { background: radial-gradient(closest-side at 50% 55%, #c8b378, #9a8f55 62%, #6f6a3d); }
.av-fruit-label { font-size: 13px; font-weight: 700; color: var(--t28-accent); }

.av-quick { border-top: 4px solid var(--t28-accent); border-radius: 0 0 var(--t28-radius) var(--t28-radius); }

/* 四档熟度尺 */
.av-scale { background: var(--t28-surface); border: 1px solid var(--t28-line); border-radius: var(--t28-radius);
    padding: 22px; box-shadow: var(--t28-shadow); }
.av-scale-track { height: 10px; border-radius: 999px; margin-bottom: 16px;
    background: linear-gradient(90deg, #b9d277, #d6cc63, #8fb04a, #8a6a3e); }
.av-scale-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.av-scale-items > div { padding: 12px; border-radius: 14px; background: var(--t28-surface-2); border: 2px solid transparent; }
.av-scale-items > div b { display: block; font-size: 15px; margin-bottom: 5px; }
.av-scale-items > div span { font-size: 12.5px; color: var(--t28-sub); line-height: 1.6; }
.av-scale-items > div.is-on { border-color: var(--t28-accent); background: var(--t28-soft); }
.av-judge-result { margin-top: 16px; }
.av-plan-panel { border-left: 4px solid var(--t28-accent-2); }
.av-date { font-size: clamp(24px, 4vw, 34px); font-weight: 800; color: var(--t28-accent); letter-spacing: -.02em; }
.av-checks { display: grid; gap: 6px; margin-top: 12px; font-size: 13.5px; color: var(--t28-sub); }
.av-checks span::before { content: '□ '; color: var(--t28-accent); font-weight: 700; }
.av-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.av-tips article { padding: 20px; border-radius: 20px; background: var(--t28-surface); border: 1px solid var(--t28-line); }
.av-tips article > span { font-size: 26px; }
.av-tips h3 { font-size: 16px; margin: 8px 0; }
.av-tips p { font-size: 14px; line-height: 1.8; color: var(--t28-sub); margin: 0; }

@media (max-width: 860px) {
    .av-hero { grid-template-columns: minmax(0, 1fr); }
    .av-scale-items, .av-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .av-scale-items, .av-tips { grid-template-columns: minmax(0, 1fr); }
    .av-fruit { width: 120px; height: 158px; }
    .av-seed { width: 48px; height: 48px; }
}