/* ─── Design Tokens ─────────────────────────────────────────────────── */
:root {
  --bg:           #fbfaf7;
  --surface:      #fffefa;
  --surface-glass:rgba(255,254,250,.76);
  --fg:           #211922;
  --muted:        #746f66;
  --border:       #e7e1d8;
  --accent:       #d9152f;
  --accent-dark:  #a90f24;
  --accent-soft:  rgba(217,21,47,.07);
  --sh-sm:  0 1px 3px rgba(33,25,34,.06),0 1px 2px rgba(33,25,34,.04);
  --sh-md:  0 4px 12px rgba(33,25,34,.10),0 2px 4px rgba(33,25,34,.06);
  --sh-lg:  0 12px 32px rgba(33,25,34,.14),0 4px 12px rgba(33,25,34,.08);
  --sh-panel: 0 -3px 32px rgba(33,25,34,.10),0 -1px 5px rgba(33,25,34,.05),
              0 0 0 .5px rgba(33,25,34,.07);
  --r: 16px;
  --font: -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}

/* ─── Scoped Reset ──────────────────────────────────────────────────── */
:where(#kp,#kp *,#kp *::before,#kp *::after,
#tmo,#tmo *,#tmo *::before,#tmo *::after,
#kitchen-fab,#kitchen-fab *::before,#kitchen-fab *::after,
#pick-hint,#steam-ambient,#steam-ambient *,#toast) {
  box-sizing:border-box;
}
:where(#kp *,#tmo *) {
  margin:0;
  padding:0;
}

/* ─── Waterfall background ──────────────────────────────────────────── */
.wf-bg{
  position:fixed;inset:0;
  columns:5;column-gap:7px;padding:7px;
  overflow:hidden;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.65) 0%,rgba(0,0,0,.22) 60%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.65) 0%,rgba(0,0,0,.22) 60%,transparent 100%);
  pointer-events:none;
}
.wf-card{
  break-inside:avoid;border-radius:9px;
  margin-bottom:7px;display:block;
  position:relative;overflow:hidden;
}
/* Subtle content suggestion inside waterfall cards */
.wf-card::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 55% 50% at 40% 38%,rgba(255,255,255,.22) 0%,transparent 70%);
}

/* ─── Steam ambient ─────────────────────────────────────────────────── */
.steam-ambient{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:700px;height:240px;
  pointer-events:none;z-index:101;overflow:visible;
}
.sw{
  position:absolute;bottom:0;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,254,250,.42) 0%,transparent 70%);
  filter:blur(16px);
  animation:swFloat var(--sd,4s) var(--ss,0s) ease-in infinite;
  opacity:0;
}
@keyframes swFloat{
  0%  {transform:translateY(0) scale(.65);opacity:0}
  16% {opacity:1}
  72% {opacity:.35}
  100%{transform:translateY(-140px) translateX(var(--sx,12px)) scale(1.6);opacity:0}
}

/* ─── Kitchen FAB ───────────────────────────────────────────────────── */
.kitchen-fab{
  position:fixed;bottom:22px;left:50%;
  transform:translateX(-50%);
  background:var(--accent);color:#fff;
  border:none;border-radius:100px;
  padding:9px 20px 9px 16px;
  font-size:13px;font-weight:600;
  cursor:pointer;
  box-shadow:var(--sh-md);
  z-index:102;
  display:flex;align-items:center;gap:6px;
  transition:transform .15s,box-shadow .15s,opacity .2s;
  letter-spacing:.01em;
}
.kitchen-fab:hover{transform:translateX(-50%) translateY(-2px);box-shadow:var(--sh-lg)}
.kitchen-fab.hidden{opacity:0;pointer-events:none}

/* ─── Kitchen Panel ─────────────────────────────────────────────────── */
.kp{
  position:fixed;bottom:clamp(14px,2.3vh,24px);left:50%;
  transform:translateX(-50%);
  width:min(680px,calc(100vw - 20px));
  background:var(--surface-glass);
  backdrop-filter:blur(30px) saturate(1.22) brightness(1.04);
  -webkit-backdrop-filter:blur(30px) saturate(1.22) brightness(1.04);
  border-radius:var(--r);
  box-shadow:var(--sh-panel);
  border:.5px solid rgba(255,254,250,.48);
  z-index:200;
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:transform .32s cubic-bezier(.32,.72,0,1);
}
.kp.is-collapsed{transform:translateX(-50%) translateY(calc(100% - 48px))}
.kp.is-hidden{transform:translateX(-50%) translateY(100%)}

/* Drag handle — full-width hit zone at top of panel */
.kp-pill{
  position:absolute;top:0;left:0;right:0;
  height:24px;
  cursor:ns-resize;
  pointer-events:auto;
  display:flex;align-items:center;justify-content:center;
  z-index:1;
}
.kp-pill::after{
  content:'';
  width:36px;height:3.5px;
  background:rgba(33,25,34,.13);
  border-radius:2px;
  transition:background .15s;
}
.kp-pill:hover::after{background:rgba(33,25,34,.28);}
.kp.is-dragging{transition:none!important;}

/* ─── Panel header ──────────────────────────────────────────────────── */
.kp-header{
  display:flex;align-items:center;gap:7px;
  padding:20px 16px 12px;
  flex-shrink:0;user-select:none;
}
.kp-title{
  font-size:13px;font-weight:650;
  color:var(--fg);
  display:flex;align-items:center;gap:5px;
  letter-spacing:.02em;
}
.kp-title-icon{color:var(--accent);display:flex;align-items:center}
.kp-actions{margin-left:auto;display:flex;align-items:center;gap:5px}
.kp-btn{
  background:none;border:1px solid var(--border);
  border-radius:6px;padding:3px 9px;
  font-size:11px;font-family:var(--font);
  color:var(--muted);cursor:pointer;
  transition:background .1s,color .1s,border-color .1s;
}
.kp-btn:hover:not(:disabled){
  background:var(--accent-soft);color:var(--accent);
  border-color:rgba(217,21,47,.25);
}
.kp-btn:disabled{opacity:.4;cursor:default}
.kp-chevron{
  background:none;border:none;cursor:pointer;
  color:var(--muted);padding:3px 4px;
  border-radius:5px;display:flex;align-items:center;
  transition:background .1s,transform .28s;
}
.kp-chevron:hover{background:var(--border)}
.kp-chevron.flipped{transform:rotate(180deg)}

/* Panel body */
.kp-body{flex:1;overflow:hidden;display:flex;flex-direction:column}

/* ─── Zone base ─────────────────────────────────────────────────────── */
.zone{padding:0 16px;flex-shrink:0}
.zone+.zone{border-top:1px solid var(--border);padding-top:12px}
.zone-label{
  font-size:9.5px;font-weight:700;
  color:var(--muted);letter-spacing:.10em;
  text-transform:uppercase;margin-bottom:9px;
}

/* ═══════════════════════════════════════════════════════════════
   ZONE 1 — 食材  (ingredient plates)
════════════════════════════════════════════════════════════════ */
.z-ing{padding-top:12px;padding-bottom:0}

.plates-scroll{overflow-x:auto;overflow-y:visible;scrollbar-width:none;padding:8px}
.plates-scroll::-webkit-scrollbar{display:none}
.plates-row{
  display:flex;gap:10px;align-items:center;
  min-height:82px;padding:0;
}

/* ─── Plate item wrapper ────────────────────────────────────── */
.plate-item{
  position:relative;flex-shrink:0;width:60px;
  cursor:pointer;
  touch-action:none;
}
.plate-item.is-active{z-index:2}
.plate-item.is-active .plate-dish{
  outline:2.5px solid var(--accent);outline-offset:4px;
  outline-style:solid;
}
.plate-item.is-dragging{
  opacity:.72;cursor:grabbing;z-index:8;
  filter:drop-shadow(0 12px 26px rgba(33,25,34,.24));
}
.plate-item:not(.is-dragging):hover .plate-dish{
  transform:translateY(-3px);
}

.plate-smoke{
  position:absolute;
  inset:-18px -15px -10px;
  pointer-events:none;
  z-index:0;
  filter:blur(.2px);
}
.plate-smoke span{
  position:absolute;
  bottom:14px;
  left:50%;
  width:18px;
  height:18px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.72) 0%,rgba(255,255,255,.30) 42%,rgba(255,255,255,0) 76%);
  opacity:0;
  filter:blur(5px);
  animation:plateSteam 3.4s ease-in-out infinite;
  transform:translateX(-50%) scale(.58);
}
.plate-smoke span:nth-child(1){margin-left:-16px;animation-delay:.05s;--steam-x:-13px;--steam-s:1.08}
.plate-smoke span:nth-child(2){margin-left:2px;animation-delay:.9s;--steam-x:8px;--steam-s:1.22}
.plate-smoke span:nth-child(3){margin-left:18px;animation-delay:1.65s;--steam-x:15px;--steam-s:.96}
@keyframes plateSteam{
  0%{opacity:0;transform:translate(-50%,8px) scale(.45)}
  18%{opacity:.66}
  62%{opacity:.34}
  100%{opacity:0;transform:translate(calc(-50% + var(--steam-x,0px)),-34px) scale(var(--steam-s,1))}
}
.plate-item.is-active .plate-smoke span,
.plate-item:hover .plate-smoke span{
  opacity:.72;
}

/* ─── Plate dish (base shape — EACH pd-N decorates this) ───── */
.plate-dish{
  width:60px;height:60px;border-radius:50%;
  position:relative;
  /* overflow:visible so drop-shadow isn't clipped; img window clips itself */
  overflow:visible;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),filter .16s;
  flex-shrink:0;
  z-index:1;
}
.plate-item:not(.is-dragging):hover .plate-dish{
  filter:drop-shadow(0 8px 18px rgba(33,25,34,.22));
}

/* Inner content clip (child of plate-dish) */
.plate-inner{
  position:absolute;inset:0;border-radius:50%;
  overflow:hidden;
}

/* ── pd-1: Fine-dining white porcelain ──────────────────────── */
.pd-1 .plate-inner{
  background:
    /* Specular glare — upper-left */
    radial-gradient(ellipse 32% 26% at 29% 24%,
      rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%),
    /* Rim-to-well depth shadow ring */
    radial-gradient(circle at 50% 53%,
      transparent 35%,rgba(148,132,118,.15) 40%,rgba(148,132,118,.06) 48%,transparent 54%),
    /* Plate base gradient */
    radial-gradient(ellipse 90% 82% at 38% 34%,
      #fefefe 0%,#f7f3ec 36%,#e6ddd4 62%,#d4c9be 84%,#c2b6aa 100%);
  box-shadow:
    inset 0 2.5px 0 rgba(255,255,255,.92),
    inset 0 -2px 6px rgba(130,110,95,.16),
    0 0 0 .5px rgba(190,175,160,.35);
}
.pd-1 .plate-inner::before{
  content:'';position:absolute;
  inset:8px;border-radius:50%;
  border:1px solid rgba(172,158,144,.3);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.09);
  pointer-events:none;z-index:2;
}
.pd-1 .plate-dish::after{
  content:'';position:absolute;
  inset:-1px;border-radius:50%;
  box-shadow:
    0 4px 14px rgba(110,90,78,.22),
    0 2px 5px rgba(110,90,78,.14);
  pointer-events:none;z-index:-1;
}

/* ── pd-2: Gold-rim china ───────────────────────────────────── */
.pd-2 .plate-inner{
  background:
    radial-gradient(ellipse 30% 24% at 29% 24%,
      rgba(255,255,230,.88) 0%,rgba(255,255,210,0) 100%),
    radial-gradient(circle at 50% 53%,
      transparent 35%,rgba(155,120,40,.14) 40%,rgba(155,120,40,.06) 48%,transparent 54%),
    radial-gradient(ellipse 88% 80% at 38% 34%,
      #fffef8 0%,#f9f2e2 34%,#eddfc8 60%,#d8c8a0 82%,#c4b07a 100%);
  box-shadow:
    inset 0 2.5px 0 rgba(255,255,215,.88),
    inset 0 -2px 6px rgba(138,108,38,.18),
    0 0 0 .5px rgba(200,158,55,.35);
}
.pd-2 .plate-inner::before{
  content:'';position:absolute;
  inset:6px;border-radius:50%;
  border:2.5px solid rgba(195,152,50,.55);
  box-shadow:
    inset 0 2px 7px rgba(0,0,0,.09),
    0 0 0 .5px rgba(225,185,78,.32);
  pointer-events:none;z-index:2;
}
.pd-2 .plate-dish::after{
  content:'';position:absolute;
  inset:-1px;border-radius:50%;
  box-shadow:
    0 4px 14px rgba(125,98,42,.24),
    0 2px 5px rgba(125,98,42,.14);
  pointer-events:none;z-index:-1;
}

/* ── pd-3: Nordic matte thick-rim ───────────────────────────── */
.pd-3 .plate-inner{
  background:
    /* matte — no specular glare */
    radial-gradient(circle at 50% 54%,
      transparent 30%,rgba(128,120,110,.2) 36%,rgba(128,120,110,.08) 44%,transparent 50%),
    radial-gradient(ellipse 82% 74% at 42% 38%,
      #f6f4f1 0%,#eae6df 36%,#d6d0c8 62%,#c2bab0 84%,#b0a89e 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.6),
    inset 0 -2px 7px rgba(108,98,88,.24),
    0 0 0 .5px rgba(165,158,148,.4);
}
.pd-3 .plate-inner::before{
  content:'';position:absolute;
  inset:13px;border-radius:50%;
  border:1px solid rgba(148,140,130,.28);
  box-shadow:inset 0 2px 9px rgba(0,0,0,.12);
  pointer-events:none;z-index:2;
}
.pd-3 .plate-dish::after{
  content:'';position:absolute;
  inset:-1px;border-radius:50%;
  box-shadow:
    0 4px 14px rgba(80,74,68,.22),
    0 2px 5px rgba(80,74,68,.12);
  pointer-events:none;z-index:-1;
}
/* Thick rim: smaller well */
.pd-3 .plate-img-win{width:21px!important;height:21px!important}

/* ── pd-4: Terracotta ceramic ───────────────────────────────── */
.pd-4 .plate-inner{
  background:
    radial-gradient(ellipse 32% 26% at 30% 24%,
      rgba(255,198,148,.72) 0%,rgba(255,190,130,0) 100%),
    radial-gradient(circle at 50% 54%,
      transparent 35%,rgba(100,42,12,.2) 40%,rgba(100,42,12,.08) 48%,transparent 55%),
    radial-gradient(ellipse 86% 78% at 38% 34%,
      #f09870 0%,#c46838 36%,#9e4e22 62%,#7e3812 84%,#642c0a 100%);
  box-shadow:
    inset 0 2.5px 0 rgba(255,185,115,.52),
    inset 0 -2px 7px rgba(80,30,8,.32),
    0 0 0 .5px rgba(160,82,30,.45);
}
.pd-4 .plate-inner::before{
  content:'';position:absolute;
  inset:7px;border-radius:50%;
  border:1px solid rgba(230,148,88,.32);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.16);
  pointer-events:none;z-index:2;
}
.pd-4 .plate-inner::after{
  content:'';position:absolute;
  top:6px;left:10px;
  width:18px;height:7px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,205,148,.5) 0%,transparent 80%);
  transform:rotate(-24deg);pointer-events:none;
}
.pd-4 .plate-dish::after{
  content:'';position:absolute;
  inset:-1px;border-radius:50%;
  box-shadow:
    0 4px 16px rgba(105,52,18,.3),
    0 2px 5px rgba(105,52,18,.16);
  pointer-events:none;z-index:-1;
}

/* ── pd-5: Dark slate stone ─────────────────────────────────── */
.pd-5 .plate-inner{
  background:
    radial-gradient(ellipse 28% 22% at 30% 25%,
      rgba(175,165,180,.28) 0%,rgba(175,165,180,0) 100%),
    radial-gradient(circle at 50% 54%,
      transparent 35%,rgba(0,0,0,.28) 40%,rgba(0,0,0,.10) 48%,transparent 55%),
    radial-gradient(ellipse 84% 76% at 40% 36%,
      #616063 0%,#3e3a3e 38%,#282428 65%,#1c181c 85%,#121012 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.10),
    inset 0 -2px 8px rgba(0,0,0,.42),
    0 0 0 .5px rgba(80,76,82,.55);
}
.pd-5 .plate-inner::before{
  content:'';position:absolute;
  inset:7px;border-radius:50%;
  border:1px solid rgba(112,106,118,.42);
  box-shadow:inset 0 2px 9px rgba(0,0,0,.22);
  pointer-events:none;z-index:2;
}
.pd-5 .plate-inner::after{
  content:'';position:absolute;
  top:5px;left:11px;
  width:13px;height:5px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(200,188,210,.22) 0%,transparent 80%);
  transform:rotate(-28deg);pointer-events:none;
}
.pd-5 .plate-dish::after{
  content:'';position:absolute;
  inset:-1px;border-radius:50%;
  box-shadow:
    0 5px 20px rgba(16,12,18,.42),
    0 2px 6px rgba(16,12,18,.28);
  pointer-events:none;z-index:-1;
}

/* ── pd-6: Blue-white Chinese porcelain ─────────────────────── */
.pd-6 .plate-inner{
  background:
    radial-gradient(ellipse 32% 26% at 29% 24%,
      rgba(238,244,255,.92) 0%,rgba(238,244,255,0) 100%),
    radial-gradient(circle at 50% 54%,
      transparent 35%,rgba(58,82,165,.16) 40%,rgba(58,82,165,.06) 48%,transparent 54%),
    radial-gradient(ellipse 88% 80% at 38% 34%,
      #f6f8ff 0%,#e0eafa 34%,#c8d5f2 60%,#a8bae6 82%,#8898d0 100%);
  box-shadow:
    inset 0 2.5px 0 rgba(240,246,255,.92),
    inset 0 -2px 6px rgba(60,82,158,.22),
    0 0 0 .5px rgba(105,128,205,.35);
}
.pd-6 .plate-inner::before{
  content:'';position:absolute;
  inset:6px;border-radius:50%;
  border:2.5px solid rgba(68,100,198,.3);
  box-shadow:
    inset 0 2px 7px rgba(0,0,0,.09),
    0 0 0 .5px rgba(100,138,222,.25);
  pointer-events:none;z-index:2;
}
.pd-6 .plate-dish::after{
  content:'';position:absolute;
  inset:-1px;border-radius:50%;
  box-shadow:
    0 4px 14px rgba(58,78,148,.2),
    0 2px 5px rgba(58,78,148,.12);
  pointer-events:none;z-index:-1;
}

/* ── pd-img: GPT-Image-2 generated photo plate ─────────────── */
.pd-img .plate-inner{
  background-image:var(--pd-img-url);
  background-size:cover;
  background-position:center;
  /* Punch a transparent hole at the center so the plate photo shows only
     as an outer ring — the 32px well (radius 16px) is unambiguously owned
     by .plate-img-win. Feather the edge 1px so the transition isn't harsh. */
  mask-image:radial-gradient(circle at 50% 50%,transparent 15px,black 17px);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 15px,black 17px);
}
.pd-img .plate-inner::before{display:none}
.pd-img .plate-dish::after{
  content:'';position:absolute;
  inset:-1px;border-radius:50%;
  box-shadow:
    0 4px 14px rgba(0,0,0,.20),
    0 2px 5px rgba(0,0,0,.12);
  pointer-events:none;z-index:-1;
}

/* ─── Plate image window (the "well" showing source image) ──── */
.plate-img-win{
  position:absolute;
  width:32px;height:32px;border-radius:50%;
  overflow:hidden;
  z-index:1;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:3;pointer-events:none;
  /* Recessed-well illusion: shadow cast by raised rim */
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(0,0,0,.10);
}
.plate-img-win img,.plate-grad{
  width:100%;height:100%;
  object-fit:cover;border-radius:50%;display:block;
}

/* ─── Plate name label ──────────────────────────────────────── */
.plate-name{
  display:none;
  font-size:9px;font-weight:600;
  color:var(--muted);letter-spacing:.03em;
  text-align:center;margin-top:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:60px;line-height:1.3;
  opacity:.8;
}
.plate-item.is-active .plate-name{
  color:var(--accent);opacity:1;
}

/* ─── Add-plate button ──────────────────────────────────────── */
.add-plate-btn{
  width:52px;height:52px;border-radius:50%;
  border:1.5px dashed var(--border);
  background:none;color:var(--muted);
  font-size:20px;line-height:1;padding:0 0 1px;
  cursor:pointer;display:flex;
  align-items:center;justify-content:center;
  flex-shrink:0;
  /* nudge down to visually align circle center with plate circles above their name labels */
  margin-top:10px;
  transition:border-color .12s,color .12s,background .12s;
}
.add-plate-btn:hover{
  border-color:var(--accent);color:var(--accent);
  background:var(--accent-soft);
}

/* ─── Labels accordion ──────────────────────────────────────── */
.labels-acc{
  overflow:hidden;max-height:0;
  transition:max-height .24s cubic-bezier(.4,0,.2,1);
}
.labels-acc.open{max-height:190px}
.labels-inner{
  padding:9px 0 11px;
  border-top:1px solid var(--border);
  margin-top:5px;
}
.labels-plate-name{
  font-size:10px;color:var(--muted);
  font-weight:550;margin-bottom:6px;
  letter-spacing:.02em;
}
.labels-chips{display:flex;flex-wrap:wrap;gap:4px}
.lchip{
  display:inline-flex;align-items:center;justify-content:center;gap:3px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:100px;padding:3px 8px;
  font-size:11px;color:var(--fg);
  max-width:160px;
}
.lchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lchip-x{
  background:none;border:none;padding:0;
  cursor:pointer;color:var(--muted);font-size:11px;
  line-height:1;display:flex;align-items:center;
  flex-shrink:0;
  /* collapse when hidden — keeps text centred */
  opacity:0;max-width:0;overflow:hidden;
  transition:opacity .12s,max-width .12s;
}
.lchip:hover .lchip-x{opacity:1;max-width:14px}
.lchip-x:hover{color:var(--accent)}

/* ═══════════════════════════════════════════════════════════════
   ZONE 2 — 做饭  (prompt + params)
════════════════════════════════════════════════════════════════ */
.z-cook{padding-top:12px;padding-bottom:12px}

.prompt-row{display:flex;gap:7px;align-items:flex-end}
.prompt-ta{
  flex:1;resize:none;
  border:1px solid var(--border);border-radius:11px;
  padding:10px 12px;
  font-family:var(--font);font-size:13px;
  color:var(--fg);background:var(--surface);
  outline:none;min-height:64px;max-height:110px;
  line-height:1.55;
  transition:border-color .12s,box-shadow .12s;
}
.prompt-ta:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(217,21,47,.07);
}
.prompt-ta::placeholder{color:var(--muted)}

.side-btns{display:flex;flex-direction:column;gap:5px}
.attach-btn{
  background:var(--surface);border:1px solid var(--border);
  border-radius:8px;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--muted);
  transition:background .12s,color .12s;
}
.attach-btn:hover{background:var(--border);color:var(--fg)}

.cook-btn{
  background:var(--accent);border:none;
  border-radius:9px;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#fff;
  transition:background .12s,transform .1s,box-shadow .12s;
  box-shadow:0 2px 10px rgba(217,21,47,.34),0 1px 2px rgba(217,21,47,.18);
}
.cook-btn:hover{
  background:var(--accent-dark);
  box-shadow:0 4px 14px rgba(217,21,47,.42),0 1px 3px rgba(217,21,47,.2);
}
.cook-btn:active{transform:scale(.92)}

.param-bar{
  margin-top:8px;display:flex;
  gap:5px;flex-wrap:wrap;align-items:center;
}
.qa-btn{
  background:var(--surface);border:1px solid var(--border);
  border-radius:6px;padding:4px 9px;
  font-size:11px;font-family:var(--font);color:var(--muted);
  cursor:pointer;display:flex;align-items:center;gap:4px;
  transition:background .1s,color .1s,border-color .1s;
}
.qa-btn:hover{background:var(--accent-soft);color:var(--accent);border-color:rgba(217,21,47,.25)}
.p-divider{width:1px;height:14px;background:var(--border);margin:0 2px;flex-shrink:0}
.ppill{
  background:rgba(33,25,34,.04);border:1px solid rgba(33,25,34,.09);
  border-radius:100px;padding:3px 10px;
  font-size:11px;font-family:var(--font);color:var(--fg);
  cursor:pointer;display:flex;align-items:center;gap:3px;
  transition:border-color .1s,color .1s,background .1s;white-space:nowrap;
  font-weight:500;
}
.ppill:hover{border-color:rgba(33,25,34,.22);background:rgba(33,25,34,.08);}
.ppill-caret{font-size:7px;opacity:.5}
.ppill-menu{
  position:fixed;z-index:300;
  background:rgba(255,254,250,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(33,25,34,.10);border-radius:10px;
  box-shadow:0 4px 20px rgba(0,0,0,.13),0 1px 4px rgba(0,0,0,.08);
  padding:4px;min-width:90px;
  opacity:0;pointer-events:none;
  transform:translateY(-4px);
  transition:opacity .12s,transform .12s;
}
.ppill-menu.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.ppill-menu-item{
  display:block;width:100%;padding:5px 12px;
  font-size:11px;font-family:var(--font);font-weight:500;
  color:var(--fg);background:none;border:none;border-radius:6px;
  cursor:pointer;text-align:left;white-space:nowrap;
}
.ppill-menu-item:hover{background:rgba(33,25,34,.06)}
.ppill-menu-item.is-sel{color:var(--accent)}

/* ═══════════════════════════════════════════════════════════════
   ZONE 3 — 出餐口  (output plates)
════════════════════════════════════════════════════════════════ */
.z-out{padding-top:14px;padding-bottom:34px}

.out-scroll{
  overflow-x:auto;overflow-y:visible;scrollbar-width:none;
  padding:2px 0 10px;
}
.out-scroll::-webkit-scrollbar{display:none}
.out-row{
  display:flex;gap:14px;align-items:center;
  min-height:98px;padding:12px 2px 10px;
}
.out-empty{
  font-size:11px;color:var(--muted);opacity:.5;
  padding:8px 0;align-self:flex-start;
  letter-spacing:.01em;
}

/* ─── Output plate ──────────────────────────────────────────── */
.op{
  position:relative;flex-shrink:0;
  width:60px;height:60px;border-radius:50%;
  margin:8px 4px 12px;
  cursor:pointer;overflow:visible;
  transition:transform .14s cubic-bezier(.34,1.4,.64,1);
}
.op:hover{transform:translateY(-3px)}

/* Cooking state — pd-1 ceramic base with progress ring */
.op.cooking .op-inner{
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(ellipse 30% 24% at 30% 25%,
      rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 100%),
    radial-gradient(circle at 50% 53%,
      transparent 34%,rgba(140,125,110,.14) 39%,transparent 48%),
    radial-gradient(ellipse at 38% 34%,
      #fefefe 0%,#f5efea 36%,#e4dbd2 62%,#d3c8bc 84%,#c0b5a9 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -2px 5px rgba(128,108,94,.14),
    0 0 0 .5px rgba(185,170,155,.35);
}
.op.cooking .op-inner::before{
  content:'';position:absolute;
  inset:8px;border-radius:50%;
  border:1px solid rgba(168,154,140,.28);
  box-shadow:inset 0 2px 7px rgba(0,0,0,.1);
  pointer-events:none;z-index:2;
}

.op.cooking::before{
  content:'';position:absolute;inset:-13px;border-radius:50%;
  background:
    conic-gradient(from 0deg,
      rgba(217,21,47,0) 0deg,
      rgba(217,21,47,.14) 76deg,
      rgba(255,255,255,.62) 128deg,
      rgba(217,21,47,.22) 186deg,
      rgba(217,21,47,0) 292deg);
  filter:blur(5px);
  opacity:.72;
  animation:opCookHalo 1.45s linear infinite;
  pointer-events:none;z-index:-1;
}

/* Drop shadow for cooking plate */
.op.cooking::after{
  content:'';position:absolute;inset:-1px;border-radius:50%;
  box-shadow:
    0 5px 16px rgba(110,90,78,.22),
    0 2px 5px rgba(110,90,78,.12);
  pointer-events:none;z-index:-1;
}

.op-ring-svg{
  position:absolute;inset:0;
  width:60px;height:60px;
  transform:rotate(-90deg);
  pointer-events:none;z-index:4;
}
.op.cooking .op-ring-svg{
  animation:opRingSpin 1.25s linear infinite;
}
.op-ring-track{fill:none;stroke:rgba(255,255,255,.28);stroke-width:2.8}
.op-ring-fill{
  fill:none;stroke:var(--accent);stroke-width:2.8;
  stroke-linecap:round;
  stroke-dasharray:56 90;stroke-dashoffset:0;
  animation:opRingDash 1.25s ease-in-out infinite;
  filter:drop-shadow(0 0 4px rgba(217,21,47,.56));
}

@keyframes opRingSpin{
  from{transform:rotate(-90deg)}
  to{transform:rotate(270deg)}
}
@keyframes opRingDash{
  0%,100%{stroke-dasharray:42 104;opacity:.72}
  50%{stroke-dasharray:84 62;opacity:1}
}
@keyframes opCookHalo{
  to{transform:rotate(360deg)}
}

/* Mini steam wisps above cooking plate */
.op-steams{
  position:absolute;bottom:62px;left:50%;
  transform:translateX(-50%);width:50px;height:36px;
  pointer-events:none;overflow:visible;
}
.op-sw{
  position:absolute;bottom:0;border-radius:50%;
  width:18px;height:22px;left:50%;
  background:radial-gradient(ellipse,rgba(255,254,250,.58) 0%,transparent 70%);
  filter:blur(5px);
  animation:opSwF var(--od,2s) var(--oo,0s) ease-in infinite;
  opacity:0;
}
.op-sw:nth-child(1){margin-left:-20px;--ox:-9px;--od:2.2s;--oo:.05s}
.op-sw:nth-child(2){margin-left:-6px;--ox:2px;--od:2.45s;--oo:.42s}
.op-sw:nth-child(3){margin-left:12px;--ox:11px;--od:2.1s;--oo:.86s}
@keyframes opSwF{
  0%  {transform:translateY(0) scale(.6);opacity:0}
  20% {opacity:.8}
  100%{transform:translateY(-34px) translateX(var(--ox,5px)) scale(1.25);opacity:0}
}

/* Done state */
.op.done{overflow:hidden;border-radius:50%}
.op.done .op-inner{
  position:absolute;inset:0;border-radius:50%;
  overflow:hidden;
}
.op.done .op-inner > *{
  width:100%;height:100%;display:block;border-radius:50%;
}
.op.done::after{
  content:'';position:absolute;inset:-1px;border-radius:50%;
  box-shadow:0 4px 14px rgba(33,25,34,.2),0 2px 5px rgba(33,25,34,.1);
  pointer-events:none;z-index:-1;
}
/* A tiny shine rim on done plates */
.op.done .op-inner::after{
  content:'';position:absolute;
  inset:0;border-radius:50%;
  background:radial-gradient(ellipse 40% 32% at 28% 24%,
    rgba(255,255,255,.25) 0%,rgba(255,255,255,0) 100%);
  pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════════
   TASK DETAIL MODAL
════════════════════════════════════════════════════════════════ */
.tmo{
  position:fixed;inset:0;
  background:rgba(33,25,34,.60);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  z-index:300;
  display:flex;align-items:center;justify-content:center;
  /* shift card into upper third of viewport */
  padding-bottom:22vh;
  opacity:0;pointer-events:none;
  transition:opacity .24s;
}
.tmo.open{opacity:1;pointer-events:all}

.tm{
  width:min(620px,calc(100vw - 40px));
  background:var(--surface);
  /* all four corners rounded — full card shape */
  border-radius:20px;
  box-shadow:
    0 40px 100px rgba(0,0,0,.38),
    0 10px 32px rgba(0,0,0,.20),
    0 2px 6px rgba(0,0,0,.10);
  max-height:72vh;overflow:hidden;
  display:flex;flex-direction:column;
  /* entry: shrinks from behind + rotated */
  transform:scale(.82) rotate(-5deg) translateY(28px);
  transform-origin:center 60%;
  transition:transform .40s cubic-bezier(.34,1.38,.64,1);
}
.tmo.open .tm{
  /* resting tilt — subtle card-on-table feel */
  transform:scale(1) rotate(-1.8deg) translateY(0);
}

.tm-head{
  padding:18px 16px 0;
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.tm-title{font-size:13px;font-weight:620;color:var(--fg)}
.tm-x{
  margin-left:auto;background:none;border:none;
  cursor:pointer;color:var(--muted);padding:4px;
  border-radius:6px;display:flex;align-items:center;
  transition:background .1s,color .1s;
}
.tm-x:hover{background:var(--border);color:var(--fg)}

.tm-tabs{
  display:flex;padding:9px 16px 0;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.tm-tab{
  padding:5px 13px;font-size:12px;font-weight:520;
  color:var(--muted);cursor:pointer;background:none;border:none;
  font-family:var(--font);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .12s,border-color .12s;
}
.tm-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tm-tab:hover:not(.active){color:var(--fg)}

.tm-body{flex:1;overflow-y:auto;padding:16px}
.tm-panel{display:none}
.tm-panel.active{display:block}

.ms-lbl{
  font-size:9.5px;font-weight:650;color:var(--muted);
  letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:7px;margin-top:14px;
}
.ms-lbl:first-child{margin-top:0}

/* Tab: 食材 */
.m-ing-list{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}

/* Modal ingredient plates — same structure but smaller */
.m-ing-plate{
  width:40px;height:40px;position:relative;flex-shrink:0;
}
.m-ing-plate .plate-dish{
  width:40px;height:40px;
}
.m-ing-plate .plate-inner{
  position:absolute;inset:0;border-radius:50%;
  overflow:hidden;
}
.m-ing-plate .plate-img-win{
  width:22px;height:22px;
  box-shadow:inset 0 2px 7px rgba(0,0,0,.2),inset 0 0 0 1px rgba(0,0,0,.08);
}

.m-prompt{
  font-size:12px;line-height:1.65;color:var(--fg);
  background:var(--bg);border-radius:8px;
  padding:10px 12px;white-space:pre-wrap;word-break:break-word;
}
.m-restore{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:10px;
  background:none;border:1px solid var(--border);
  border-radius:8px;padding:6px 13px;
  font-size:12px;font-family:var(--font);color:var(--muted);
  cursor:pointer;transition:background .1s,border-color .1s,color .1s;
}
.m-restore:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* Tab: 食谱 */
.rec-block{
  position:relative;background:var(--bg);
  border-radius:8px;padding:10px 12px;
  font-size:11.5px;line-height:1.7;color:var(--fg);
  white-space:pre-wrap;word-break:break-word;
  margin-bottom:14px;
}
.rec-copy{
  position:absolute;top:7px;right:7px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:5px;padding:2px 8px;
  font-size:10px;font-family:var(--font);color:var(--muted);
  cursor:pointer;transition:background .1s,color .1s;
}
.rec-copy:hover{background:var(--accent-soft);color:var(--accent)}

/* Tab: 成菜 */
.res-img-wrap{
  border-radius:12px;overflow:hidden;background:var(--bg);
  aspect-ratio:1/1;max-width:260px;margin:0 auto;
  box-shadow:0 2px 12px rgba(33,25,34,.1);
}
.res-img-wrap>*{width:100%;height:100%;display:block}
.res-img-wrap img{object-fit:cover}
.res-actions{display:flex;gap:8px;justify-content:center;margin-top:12px}
.res-btn{
  background:var(--surface);border:1px solid var(--border);
  border-radius:8px;padding:7px 15px;
  font-size:12px;font-family:var(--font);color:var(--fg);
  cursor:pointer;transition:background .1s;
}
.res-btn:hover{background:var(--border)}
.res-btn.share{
  background:var(--accent);color:#fff;border-color:var(--accent);
  box-shadow:0 2px 8px rgba(217,21,47,.22);
}
.res-btn.share:hover{background:var(--accent-dark)}

/* ─── Pick mode ─────────────────────────────────────────────── */
.pick-hint{
  position:fixed;bottom:56px;left:50%;
  transform:translateX(-50%);
  background:rgba(33,25,34,.90);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:#fff;border-radius:100px;
  padding:9px 20px;font-size:12px;letter-spacing:.01em;
  z-index:103;opacity:0;pointer-events:none;
  transition:opacity .22s;
  white-space:nowrap;
}
.pick-hint.show{opacity:1}
body.pick-mode .wf-bg{pointer-events:all}
body.pick-mode .wf-card{
  cursor:crosshair;
  transition:transform .12s,box-shadow .12s;
}
body.pick-mode .wf-card:hover{
  transform:scale(1.04);
  box-shadow:0 0 0 2.5px var(--accent),0 4px 16px rgba(217,21,47,.22);
  z-index:2;
}
body.pick-mode .card {
  cursor: crosshair;
}
body.pick-mode .card:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 0 0 2.5px var(--accent), 0 12px 30px rgba(217,21,47,.22);
  z-index: 2;
}
body.pick-mode .card:hover .card-placeholder {
  filter: brightness(.9) saturate(1.08);
}

/* ─── Toast ─────────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:30px;left:50%;
  transform:translateX(-50%) translateY(8px);
  background:rgba(33,25,34,.9);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;border-radius:8px;
  padding:7px 16px;font-size:12px;
  z-index:999;opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;
  white-space:nowrap;
  letter-spacing:.01em;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}