/* =========================================================
   keep.css — 食材保存与解冻
   配合 base.css + tool.css 使用。强调色冷青 + 一点暖杏。
   ========================================================= */

body.keep{--a1:#3ec9e6;--a2:#ffb37a}
body.keep .grad{background:linear-gradient(96deg,var(--a1),#8fe3f5 45%,var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
body.keep .chip[aria-pressed="true"],body.keep .chip.is-on{color:#04121a;font-weight:620;border-color:transparent;background:linear-gradient(100deg,var(--a1),var(--a2))}

/* ---------- 顶部说明 ---------- */
.keep__intro{display:grid;gap:10px;margin:0 0 26px;padding:18px 20px;border-radius:var(--radius-sm);
  background:color-mix(in oklab,var(--a1) 9%,transparent);border:1px solid color-mix(in oklab,var(--a1) 26%,transparent)}
.keep__intro p{margin:0;font-size:.9rem;line-height:1.85;color:var(--ink-2);max-width:64ch}
.keep__intro b{color:var(--a2);font-weight:640}

/* ---------- 搜索与筛选 ---------- */
.keep__search{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.keep__search .input{flex:1 1 240px;min-width:0}
.keep__search .chip{flex:none;white-space:nowrap}
#savedCount,#markedCount{font-family:var(--font-mono);font-size:.85em;padding-left:4px}
.keep__cats{display:flex;flex-wrap:wrap;gap:8px}
.keep__cats .chip{padding:.42em .9em;font-size:.8rem}
.keep__count{margin:14px 0 0;font-size:.78rem;color:var(--muted)}
.keep__summary{margin:6px 0 0;font-size:.78rem;color:var(--muted)}

/* ---------- 食材卡 ---------- */
.keep__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:16px}
.keep__food{display:flex;flex-direction:column;gap:10px;min-width:0;padding:18px 18px 16px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
.keep__food:hover{border-color:color-mix(in oklab,var(--a1) 45%,transparent);background:rgba(255,255,255,.065)}
.keep__food.is-marked{border-left:3px solid var(--a2)}
.keep__food-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.keep__food-head h3{margin:0;font-size:1.04rem;font-weight:660;letter-spacing:-.01em;line-height:1.4}
.keep__cat{flex:none;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--a1);
  padding:.3em .55em;border-radius:6px;background:color-mix(in oklab,var(--a1) 12%,transparent);border:1px solid color-mix(in oklab,var(--a1) 26%,transparent)}
.keep__alias{margin:0;font-size:.76rem;line-height:1.6;color:var(--muted)}
.keep__rows{display:grid;gap:5px;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.22);border:1px solid var(--line)}
.keep__row{display:grid;grid-template-columns:3.2em 1fr;gap:10px;align-items:baseline;font-size:.82rem}
.keep__row span{color:var(--muted);letter-spacing:.04em}
.keep__row b{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.keep__tip{margin:0;font-size:.8rem;line-height:1.75;color:var(--ink-2)}
.keep__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.keep__actions .btn{flex:1 1 auto}

/* ---------- 存放时间备忘 ---------- */
.keep__mark{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:9px 12px;border-radius:10px;
  font-size:.78rem;line-height:1.6;color:var(--ink-2);background:color-mix(in oklab,var(--a2) 10%,transparent);
  border:1px dashed color-mix(in oklab,var(--a2) 38%,transparent)}
.keep__mark>span{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--a2)}
.keep__swap{margin-left:auto;padding:5px 9px;border-radius:8px;cursor:pointer;font-size:.72rem;
  color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--line);
  transition:color .25s,border-color .25s}
.keep__swap:hover{color:var(--ink);border-color:var(--line-2)}
.keep__warn{margin:0;padding:10px 12px;border-radius:10px;font-size:.78rem;line-height:1.75;
  color:#ffe6cf;background:color-mix(in oklab,var(--a2) 14%,transparent);border-left:3px solid var(--a2)}
.keep__marks{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.keep__marks .btn--danger{color:var(--pink);border-color:rgba(255,92,168,.28)}
.keep__marks .btn--danger:hover{background:rgba(255,92,168,.1)}

/* ---------- 空态 ---------- */
.keep__empty{padding:26px 20px;border-radius:var(--radius-sm);text-align:center;
  background:rgba(255,255,255,.035);border:1px dashed var(--line-2)}
.keep__empty h2{margin:0 0 8px;font-size:1rem;font-weight:640}
.keep__empty p{margin:0 0 16px;font-size:.86rem;line-height:1.75;color:var(--muted)}

/* ---------- 分组列表（解冻 / 摆放） ---------- */
.keep__group{margin-top:26px}
.keep__group:first-child{margin-top:6px}
.keep__group-t{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:.86rem;font-weight:640;letter-spacing:.06em;color:var(--a1)}
.keep__group-t em{font-family:var(--font-mono);font-style:normal;font-size:.72rem;letter-spacing:.06em;color:var(--muted)}
.keep__group-t::after{content:"";flex:1;height:1px;background:var(--line)}
.keep__grouplist{display:grid;gap:12px}
.keep__item{padding:16px 18px;border-radius:var(--radius-sm);background:rgba(255,255,255,.04);border:1px solid var(--line)}
.keep__item-t{margin:0 0 10px;font-size:.98rem;font-weight:640;line-height:1.5;color:var(--ink)}
.keep__item-pts{margin:0;padding-left:1.15em;display:grid;gap:6px}
.keep__item-pts li{font-size:.86rem;line-height:1.8;color:var(--ink-2)}

/* ---------- 说法卡 ---------- */
.keep__mythlist{display:grid;gap:12px;margin-top:6px}
.keep__myth{padding:16px 18px;border-radius:var(--radius-sm);background:rgba(255,255,255,.04);border:1px solid var(--line)}
.keep__heard,.keep__actual{margin:0;font-size:.9rem;line-height:1.85}
.keep__heard{color:var(--muted)}
.keep__heard span,.keep__actual span{display:inline-block;margin-right:8px;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.1em;vertical-align:.12em;padding:.25em .5em;border-radius:5px}
.keep__heard span{color:var(--ink-2);background:rgba(255,255,255,.07);border:1px solid var(--line)}
.keep__actual{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);color:var(--ink)}
.keep__actual span{color:#04121a;background:linear-gradient(100deg,var(--a1),var(--a2))}

/* ---------- 视图尾部说明 ---------- */
.keep .hint--top{margin:0 0 14px;line-height:1.75}
.keep__notice{margin-top:22px;padding:14px 16px;border-radius:var(--radius-sm);font-size:.84rem;line-height:1.8;
  color:var(--ink-2);background:rgba(255,255,255,.04);border:1px solid var(--line-2)}

/* ---------- 焦点与窄屏 ---------- */
.keep button:focus-visible,.keep input:focus-visible{outline:2px solid var(--a2);outline-offset:3px}
@media (min-width:900px){
  .keep__grouplist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .keep__mythlist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .keep__grid{grid-template-columns:1fr}
  .keep__row{grid-template-columns:3em 1fr}
  .keep__actions .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  body.keep *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}