/* 网页版 缺什么买什么 / 排一周 / 出锅顺序 / 菜的主页（10/11） */
.kx-backdrop { position: fixed; inset: 0; z-index: 180; background: rgba(41, 38, 49, .38); }
.kx-sheet { width: min(100%, 520px); max-height: calc(100vh - 56px); padding: 14px 20px max(22px, env(safe-area-inset-bottom)); position: fixed; z-index: 181; left: 50%; bottom: 0; overflow-y: auto; transform: translateX(-50%); border-radius: 24px 24px 0 0; background: #fffaf7; box-shadow: 0 -12px 35px rgba(48, 35, 55, .15); color: var(--ink); }
.kx-sheet > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.kx-sheet > header h2 { margin: 2px 0 2px; font-size: 21px; }
.kx-sheet > header p { margin: 0; color: var(--muted); font-size: 13px; }
.kx-sheet > header > button { width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%; background: #f0eaf2; color: #6b6370; font-size: 20px; }
.kx-state { margin: 18px 0; color: var(--muted); font-size: 14px; line-height: 1.6; text-align: center; }
.kx-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.kx-sub { margin: 0 0 8px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.kx-card { padding: 14px; border-radius: 16px; background: #fff; box-shadow: var(--soft-shadow); }
.kx-actions { display: flex; gap: 10px; margin-top: 14px; }
.kx-actions > * { flex: 1; }
.kx-main, .kx-soft { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; font-size: 14px; font-weight: 800; text-decoration: none; }
.kx-main { color: #fff; background: var(--orange); }
.kx-main[disabled] { opacity: .5; }
.kx-soft { color: var(--purple-dark); background: var(--purple-pale); }
.kx-offers { display: grid; gap: 10px; }
.kx-offer { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 14px; background: #fff; box-shadow: var(--soft-shadow); }
.kx-offer b { display: block; font-size: 14px; line-height: 1.45; }
.kx-offer small { color: var(--muted); font-size: 12px; }
.kx-offer .kx-main { flex: none; min-height: 36px; font-size: 13px; }
.kx-lock { width: 100%; margin-top: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; border: 1px solid #f4dfc4; border-radius: 14px; background: #fff5e9; text-align: left; }
.kx-lock i { font-style: normal; font-size: 20px; }
.kx-lock b { display: block; font-size: 14px; }
.kx-lock small { color: var(--orange-dark); font-size: 12px; font-weight: 800; }
.kx-week-row { padding: 10px 0; display: flex; gap: 12px; border-bottom: 1px solid var(--line); }
.kx-week-row:last-of-type { border-bottom: 0; }
.kx-week-row > b { width: 44px; flex: none; color: var(--orange-dark); font-size: 14px; }
.kx-week-row span { display: block; font-size: 14px; font-weight: 800; }
.kx-week-row small { color: var(--muted); font-size: 12px; }
.kx-tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.kx-tags span { padding: 3px 9px; border-radius: 999px; background: var(--orange-pale); color: var(--orange-dark); font-size: 12px; }
.kx-timeline { margin: 6px 0 0; padding: 0; list-style: none; }
.kx-timeline li { padding: 8px 0 8px 18px; position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 2px 8px; border-left: 2px solid var(--line); }
.kx-timeline li::before { content: ""; width: 10px; height: 10px; position: absolute; left: -6px; top: 13px; border-radius: 50%; background: #d8cfd9; }
.kx-timeline li.is-now::before { background: var(--orange); }
.kx-timeline time { color: var(--orange-dark); font-weight: 800; font-size: 13px; }
.kx-timeline b { font-size: 14px; }
.kx-timeline span { grid-column: 2; color: var(--muted); font-size: 12px; }
.kx-tabs, .kx-chips { margin: 10px 0; display: flex; gap: 8px; overflow-x: auto; }
.kx-tabs button, .kx-chips button { flex: none; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; }
.kx-tabs button.active, .kx-chips button.active { border-color: var(--orange); color: var(--orange-dark); background: var(--orange-pale); font-weight: 800; }
.kx-variants, .kx-posts { display: grid; gap: 10px; }
.kx-variant { padding: 8px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 14px; background: #fff; text-align: left; box-shadow: var(--soft-shadow); }
.kx-variant img, .kx-variant i { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 10px; object-fit: cover; background: var(--orange-pale); color: var(--orange-dark); font-style: normal; font-weight: 800; }
.kx-variant b { display: block; font-size: 14px; }
.kx-variant small { color: var(--muted); font-size: 12px; }
.kx-posts article { padding: 12px; border-radius: 14px; background: #fff; box-shadow: var(--soft-shadow); }
.kx-posts header { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.kx-posts header small { color: var(--muted); }
.kx-posts em { padding: 1px 6px; border-radius: 6px; background: #f0eaf2; color: #6b6370; font-size: 11px; font-style: normal; }
.kx-posts em.is-help { background: #ffe9e2; color: #c2522f; }
.kx-posts p { margin: 6px 0; font-size: 14px; line-height: 1.6; }
.kx-posts article > button { border: 0; background: none; color: var(--muted); font-size: 12px; }
.kx-posts article > button.is-on { color: var(--orange-dark); font-weight: 800; }
.kx-reply { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: #faf6f2; font-size: 13px; }
.kx-compose { margin: 10px 0; display: grid; gap: 8px; }
.kx-compose select, .kx-compose textarea, .kx-compose input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: inherit; font-size: 14px; }
.kx-compose textarea { min-height: 80px; resize: vertical; }
.kx-compose small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.kx-made { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.kx-made button { padding: 0 0 8px; overflow: hidden; border: 0; border-radius: 14px; background: #fff; text-align: left; box-shadow: var(--soft-shadow); }
.kx-made img, .kx-made i { width: 100%; aspect-ratio: 1; display: grid; place-items: center; object-fit: cover; background: var(--orange-pale); color: var(--orange-dark); font-style: normal; }
.kx-made b, .kx-made small { display: block; padding: 4px 8px 0; font-size: 13px; }
.kx-made small { color: var(--muted); font-size: 12px; }
.kx-wiki { margin-top: 16px; padding: 14px; border-radius: 16px; background: #fff; }
.kx-wiki header { display: flex; align-items: center; justify-content: space-between; }
.kx-wiki h3 { margin: 0; font-size: 16px; }
.kx-wiki header button, .kx-link { border: 0; background: none; color: var(--orange-dark); font-size: 13px; font-weight: 800; }
.kx-wiki > div { margin-top: 10px; }
.kx-wiki > div b { font-size: 14px; }
.kx-wiki > div p { margin: 4px 0 0; font-size: 14px; line-height: 1.65; }
.kx-wiki > small { display: block; margin-top: 10px; color: var(--muted); font-size: 12px; }
.shopping-pick-link { margin-left: 6px; padding: 0 6px; border: 0; border-radius: 6px; background: var(--orange-pale); color: var(--orange-dark); font-size: 12px; font-weight: 800; }
.meal-cook-order { width: 100%; margin: 8px 0 0; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; border: 1px dashed #f1c9a4; border-radius: 12px; background: #fff8f1; color: var(--orange-dark); font-size: 13px; }
.meal-cook-order b { font-size: 14px; }
.follow-groups { margin: 4px 0 10px; display: flex; gap: 8px; }
.follow-groups button { min-height: 32px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; }
.follow-groups button.active { border-color: var(--orange); color: var(--orange-dark); background: var(--orange-pale); font-weight: 800; }
.follow-relation { margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: var(--purple-pale); color: var(--purple-dark); font-size: 11px; font-style: normal; }
.note-relation { min-height: 30px; padding: 0 10px; border: 1px solid #d9ceff; border-radius: 999px; background: #fff; color: var(--purple-dark); font-size: 12px; font-weight: 800; }
.note-relation.is-on { background: var(--purple-pale); }
.note-relation-menu { margin: 8px 16px 0; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; border-radius: 14px; background: var(--purple-pale); font-size: 12px; }
.note-relation-menu p { width: 100%; margin: 0; color: var(--muted); }
.note-relation-menu button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: #fff; color: var(--purple-dark); font-weight: 800; }
.note-visibility { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--purple-pale); color: var(--purple-dark); font-size: 11px; }
.community-visibility-select select { width: 100%; }