/* ============================================================
   动漫小厨房 · 样式表
   由 anime-kitchen.html 的 <style> 块（第 9-1673 行）原样搬运，
   保留原应用的动漫风视觉（配色 / 渐变 / emoji / 圆角 / 动画）。
   文末「静态前端适配」小节是本次改造新增的少量样式。
   ============================================================ */
/* ============================================================
   1. 设计令牌（CSS 变量）
   ============================================================ */
:root{
  /* 主色 */
  --cream:      #FFF6E3;
  --cream-deep: #FFEBC2;
  --ink:        #1D1B26;
  --paper:      #FFFFFF;

  --pink:   #FF5D8F;
  --cyan:   #22CFDA;
  --yellow: #FFD23F;
  --purple: #9B5DE5;
  --orange: #FF8A3D;
  --green:  #4FCF6B;
  --blue:   #4D8BFF;

  /* 边框与硬阴影 */
  --bd: 3px;
  --border: var(--bd) solid var(--ink);
  --sh:      6px 6px 0 var(--ink);
  --sh-sm:   4px 4px 0 var(--ink);
  --sh-lg:   9px 9px 0 var(--ink);
  --sh-tiny: 2px 2px 0 var(--ink);

  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 11px;

  --nav-h: 78px;
  --wrap: 1180px;

  /* 底纹 */
  --dots: radial-gradient(var(--ink) 1.6px, transparent 1.7px);
}

/* ============================================================
   2. 基础重置
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100vh;
  font-family:"Baloo 2","Noto Sans SC","PingFang SC","Hiragino Sans GB",
              "Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:700;
  color:var(--ink);
  background-color:var(--cream);
  background-image:
    var(--dots),
    radial-gradient(circle at 12% 8%,  rgba(255,93,143,.30), transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(34,207,218,.28), transparent 44%),
    radial-gradient(circle at 78% 92%, rgba(255,210,63,.32), transparent 46%),
    radial-gradient(circle at 6% 88%,  rgba(155,93,229,.22), transparent 42%);
  background-size:26px 26px, auto, auto, auto, auto;
  background-attachment:fixed;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

button,input{ font:inherit; color:inherit; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{ margin:0; font-weight:900; letter-spacing:.4px; line-height:1.25; }

ul,ol{ margin:0; padding:0; list-style:none; }

[hidden]{ display:none !important; }

::selection{ background:var(--yellow); color:var(--ink); }

/* 滚动条（装饰） */
::-webkit-scrollbar{ width:14px; height:14px; }
::-webkit-scrollbar-track{ background:var(--cream-deep); }
::-webkit-scrollbar-thumb{
  background:var(--pink);
  border:var(--border);
  border-radius:99px;
}

/* 通用容器 */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px; }

/* 通用「厚描边卡片」 */
.sticker-box{
  background:var(--paper);
  border:var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
}

/* ============================================================
   3. 顶部导航
   ============================================================ */
.nav{
  position:sticky;
  top:0;
  z-index:60;
  background:linear-gradient(180deg,var(--paper) 0%,#FFF9EE 100%);
  border-bottom:var(--border);
  box-shadow:0 5px 0 rgba(29,27,38,.16);
}
.nav-inner{
  min-height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-top:12px;
  padding-bottom:12px;
}

.logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 16px 7px 10px;
  background:var(--yellow);
  border:var(--border);
  border-radius:99px;
  box-shadow:var(--sh-sm);
  font-size:20px;
  font-weight:900;
  white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,1.6,.4,1), box-shadow .18s;
}
.logo .logo-emoji{
  font-size:26px;
  display:inline-block;
  filter:drop-shadow(2px 2px 0 rgba(29,27,38,.25));
}
.logo:hover{ transform:translate(-2px,-2px) rotate(-1.5deg); box-shadow:var(--sh); }
.logo:hover .logo-emoji{ animation:wiggle .6s ease-in-out infinite; }
.logo:active{ transform:translate(3px,3px); box-shadow:var(--sh-tiny); }
.logo small{
  display:block;
  font-size:10px;
  letter-spacing:2px;
  font-weight:800;
  color:#8A6A12;
  line-height:1;
  margin-top:2px;
}

/* 搜索框 */
.search{
  position:relative;
  flex:1 1 300px;
  max-width:420px;
  min-width:200px;
}
.search-input{
  width:100%;
  padding:12px 46px 12px 44px;
  background:var(--paper);
  border:var(--border);
  border-radius:99px;
  box-shadow:var(--sh-sm);
  font-weight:800;
  outline:none;
  transition:box-shadow .18s, transform .18s, background .18s;
}
.search-input::placeholder{ color:#A79FB2; font-weight:700; }
/* 隐藏浏览器自带的搜索清除按钮，统一使用我们自己的粉色 ✕ */
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; display:none; }
.search-input:focus{
  background:#FFFBEF;
  transform:translate(-2px,-2px);
  box-shadow:var(--sh);
}
.search-icon{
  position:absolute;
  left:15px; top:50%;
  transform:translateY(-50%);
  font-size:17px;
  pointer-events:none;
}
.search-clear{
  position:absolute;
  right:8px; top:50%;
  transform:translateY(-50%);
  width:30px; height:30px;
  display:grid; place-items:center;
  background:var(--pink);
  color:#fff;
  border:2px solid var(--ink);
  border-radius:50%;
  cursor:pointer;
  font-size:13px;
  font-weight:900;
  line-height:1;
  box-shadow:var(--sh-tiny);
  transition:transform .15s, box-shadow .15s;
}
.search-clear:hover{ transform:translateY(-50%) rotate(90deg); }
.search-clear:active{ box-shadow:none; transform:translate(1px,calc(-50% + 1px)); }

/* ============================================================
   4. 通用按钮 / 筹码
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:10px 20px;
  background:var(--paper);
  border:var(--border);
  border-radius:99px;
  box-shadow:var(--sh-sm);
  font-weight:900;
  cursor:pointer;
  transition:transform .14s cubic-bezier(.2,1.6,.4,1), box-shadow .14s, background .14s;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:var(--sh); }
.btn:active{ transform:translate(3px,3px); box-shadow:var(--sh-tiny); }
.btn:disabled{
  cursor:not-allowed;
  opacity:.45;
  transform:none;
  box-shadow:var(--sh-tiny);
  filter:grayscale(.5);
}
.btn-primary{ background:var(--pink); color:#fff; }
.btn-ghost{ background:var(--cream-deep); }
.btn-sm{ padding:7px 14px; font-size:13px; }

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 15px;
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:99px;
  box-shadow:var(--sh-tiny);
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .14s cubic-bezier(.2,1.6,.4,1), box-shadow .14s, background .14s, color .14s;
}
.chip:hover{ transform:translate(-2px,-2px) rotate(-1.5deg); box-shadow:var(--sh-sm); }
.chip:active{ transform:translate(2px,2px); box-shadow:none; }
.chip[aria-pressed="true"]{
  background:var(--ink);
  color:var(--paper);
  transform:translate(1px,1px);
  box-shadow:0 0 0 var(--ink);
}
.chip.tag[aria-pressed="true"]{ background:var(--purple); color:#fff; }
.chip .chip-count{
  font-size:11px;
  padding:1px 7px;
  border-radius:99px;
  background:rgba(29,27,38,.12);
}
.chip[aria-pressed="true"] .chip-count{ background:rgba(255,255,255,.28); }

/* ============================================================
   5. 列表页
   ============================================================ */
.view{ animation:viewIn .38s cubic-bezier(.2,1.4,.4,1) both; }

.hero{
  position:relative;
  margin:26px 0 22px;
  padding:30px 34px;
  background:
    linear-gradient(135deg,#FFD8E4 0%,#FFF3C9 45%,#C9F7F4 100%);
  border:var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--dots),var(--dots);
  background-size:22px 22px,22px 22px;
  background-position:0 0,11px 11px;
  opacity:.16;
  pointer-events:none;
}
.hero-emoji{
  position:absolute;
  font-size:46px;
  opacity:.95;
  filter:drop-shadow(3px 3px 0 rgba(29,27,38,.2));
  animation:floaty 4.5s ease-in-out infinite;
  pointer-events:none;
  user-select:none;
}
.hero-emoji.e1{ top:14px; right:36px; animation-delay:.0s; }
.hero-emoji.e2{ bottom:10px; right:110px; font-size:38px; animation-delay:.9s; }
.hero-emoji.e3{ top:24px; right:180px; font-size:32px; animation-delay:1.7s; }
.hero h2{ position:relative; font-size:clamp(26px,4.4vw,44px); z-index:1; }
.hero h2 .hl{
  display:inline-block;
  padding:0 10px;
  background:var(--pink);
  color:#fff;
  border:2.5px solid var(--ink);
  border-radius:10px;
  box-shadow:var(--sh-tiny);
  transform:rotate(-2deg);
}
.hero p{
  position:relative;
  z-index:1;
  margin:12px 0 0;
  max-width:62ch;
  font-size:15px;
  color:#4A4358;
}
.hero-chips{ position:relative; z-index:1; margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; }
.hero-chips span{
  padding:4px 12px;
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:99px;
  font-size:12.5px;
  box-shadow:var(--sh-tiny);
}

/* 筛选面板 */
.filters{
  background:var(--paper);
  border:var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh);
  padding:20px 22px;
  margin-bottom:20px;
}
/* --- 可折叠筛选分组 --- */
.filter-sec + .filter-sec{ border-top:2.5px dashed rgba(29,27,38,.22); }

.filter-head{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 6px;
  background:transparent;
  border:0;
  border-radius:14px;
  cursor:pointer;
  text-align:left;
  transition:background .16s;
}
.filter-head:hover{ background:#FFFAEC; }
.filter-head:focus-visible{ outline:3px solid var(--purple); outline-offset:2px; }
.filter-label{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:15px;
  font-weight:900;
}
.filter-state{
  margin-left:auto;
  max-width:54%;
  padding:4px 12px;
  background:var(--cream-deep);
  border:2px solid var(--ink);
  border-radius:99px;
  font-size:12px;
  font-weight:900;
  color:#6A5416;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:background .16s;
}
.filter-state.on{ background:var(--yellow); }
.filter-arrow{
  flex:0 0 auto;
  width:30px; height:30px;
  display:grid;
  place-items:center;
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:9px;
  box-shadow:var(--sh-tiny);
  font-size:14px;
  line-height:1;
  transition:transform .28s cubic-bezier(.2,1.6,.4,1), background .16s;
}
.filter-head:hover .filter-arrow{ background:var(--yellow); }
.filter-sec[data-open="false"] .filter-arrow{ transform:rotate(-90deg); background:var(--cream-deep); }

/* grid-template-rows 0fr→1fr 可以在不写死高度的情况下做出顺滑展开动画 */
.filter-body{
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows .3s ease, opacity .22s ease;
}
.filter-sec[data-open="false"] .filter-body{ grid-template-rows:0fr; opacity:0; }
.filter-body-in{ min-height:0; overflow:hidden; }
.filter-sec[data-open="false"] .filter-body-in{ pointer-events:none; }

.filter-chips{ display:flex; flex-wrap:wrap; gap:9px; padding:2px 6px 16px; }

.filters-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:4px;
  padding-top:14px;
  border-top:2.5px dashed rgba(29,27,38,.22);
}
.foot-btns{ display:flex; gap:10px; flex-wrap:wrap; }
.active-hint{ font-size:13px; color:#6A6277; }
.active-hint b{ color:var(--pink); }

/* 结果条 */
.result-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
  padding:12px 20px;
  background:var(--cyan);
  border:var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
  font-weight:900;
  color:#0B3B3F;
}
.result-bar .rb-right{ font-size:13px; color:#0B3B3F; opacity:.85; }

/* 卡片网格 */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:26px;
}

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  border:var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh);
  overflow:hidden;
  transition:transform .2s cubic-bezier(.2,1.5,.4,1), box-shadow .2s;
  animation:cardIn .42s cubic-bezier(.2,1.4,.4,1) both;
}
.card:hover{ transform:translate(-5px,-7px) rotate(-.9deg); box-shadow:12px 14px 0 var(--ink); }
.card:active{ transform:translate(4px,4px); box-shadow:var(--sh-tiny); }

.card-top{
  position:relative;
  height:150px;
  background:var(--card-bg);
  border-bottom:var(--border);
  overflow:hidden;
}
.card-top::after{
  content:"";
  position:absolute; inset:0;
  background-image:var(--dots);
  background-size:20px 20px;
  opacity:.2;
}
.badge{
  position:absolute;
  z-index:3;
  padding:4px 12px;
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:99px;
  font-size:12px;
  font-weight:900;
  box-shadow:var(--sh-tiny);
}
.badge-cat{ top:11px; left:11px; background:var(--yellow); transform:rotate(-2.5deg); }
.badge-time{ top:11px; right:11px; background:var(--paper); transform:rotate(2deg); }

.plate{
  position:absolute;
  left:50%; top:52%;
  z-index:2;
  width:104px; height:104px;
  display:grid; place-items:center;
  background:radial-gradient(circle at 34% 30%,#fff 0%,#FFF3DA 62%,#F2E1BE 100%);
  border:var(--border);
  border-radius:50%;
  box-shadow:var(--sh-sm);
  transform:translate(-50%,-50%);
  transition:transform .28s cubic-bezier(.2,1.7,.4,1);
}
.plate::before{
  content:"";
  position:absolute; inset:9px;
  border:2.5px dashed rgba(29,27,38,.3);
  border-radius:50%;
}
.plate-emoji{
  font-size:50px;
  line-height:1;
  filter:drop-shadow(3px 3px 0 rgba(29,27,38,.22));
}
.card:hover .plate{ transform:translate(-50%,-50%) scale(1.14) rotate(9deg); }
.card:hover .plate-emoji{ animation:bounce .7s ease-in-out infinite; }

.card-body{
  display:flex;
  flex-direction:column;
  flex:1;
  gap:9px;
  padding:16px 18px 18px;
}
.card-name{ font-size:21px; }
.card-desc{
  margin:0;
  font-size:13.5px;
  font-weight:700;
  color:#5C5568;
  min-height:2.9em;
}
.tag-row{ display:flex; flex-wrap:wrap; gap:6px; }
.tag-pill{
  padding:3px 10px;
  background:var(--cream-deep);
  border:2px solid var(--ink);
  border-radius:99px;
  font-size:11.5px;
  font-weight:900;
  color:#4A3A12;
}
.card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
  padding-top:12px;
  border-top:2.5px dashed rgba(29,27,38,.2);
}
.diff{
  padding:4px 12px;
  border:2.5px solid var(--ink);
  border-radius:99px;
  font-size:12px;
  font-weight:900;
  box-shadow:var(--sh-tiny);
}
.diff.d-简单{ background:var(--green); color:#08330F; }
.diff.d-中等{ background:var(--orange); color:#3A1A00; }
.go{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 14px;
  background:var(--pink);
  color:#fff;
  border:2.5px solid var(--ink);
  border-radius:99px;
  font-size:13px;
  font-weight:900;
  box-shadow:var(--sh-tiny);
  transition:transform .16s cubic-bezier(.2,1.6,.4,1), background .16s;
}
.card:hover .go{ transform:translateX(4px) rotate(-2deg); background:var(--purple); }

/* 空状态 */
.empty{
  padding:56px 24px;
  text-align:center;
  background:var(--paper);
  border:var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh);
}
.empty-emoji{
  font-size:78px;
  line-height:1;
  display:inline-block;
  animation:bounce 1.6s ease-in-out infinite;
  filter:drop-shadow(4px 4px 0 rgba(29,27,38,.2));
}
.empty h3{ margin:18px 0 8px; font-size:24px; }
.empty p{ margin:0 0 20px; font-size:14px; color:#5C5568; }
.empty p b{ color:var(--pink); }

/* 分页 */
.pager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:32px 0 10px;
}
.pager:empty{ display:none; }              /* 只有一页时不占位 */
.pager-top{
  margin:-4px 0 24px;
  padding:10px 14px;
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:var(--r-md);
  box-shadow:var(--sh-tiny);
}
.pager-top .page-num{ min-width:42px; height:42px; }
.pager-top::before{
  content:"📄 翻页";
  margin-right:auto;
  padding-left:4px;
  font-size:13px;
  font-weight:900;
  color:#6A6277;
}
.page-num{
  min-width:46px;
  height:46px;
  display:grid;
  place-items:center;
  padding:0 12px;
  background:var(--paper);
  border:var(--border);
  border-radius:14px;
  box-shadow:var(--sh-sm);
  font-weight:900;
  cursor:pointer;
  transition:transform .14s cubic-bezier(.2,1.6,.4,1), box-shadow .14s, background .14s;
}
.page-num:hover{ transform:translate(-2px,-2px); box-shadow:var(--sh); }
.page-num:active{ transform:translate(3px,3px); box-shadow:var(--sh-tiny); }
.page-num[aria-current="page"]{
  background:var(--yellow);
  transform:translate(2px,2px) rotate(-3deg);
  box-shadow:var(--sh-tiny);
}
.page-dots{ padding:0 4px; font-weight:900; color:#8B8398; }

/* ============================================================
   6. 详情页
   ============================================================ */
.detail-wrap{ padding:24px 0 40px; }

.back-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:20px;
  padding:11px 22px;
  background:var(--paper);
  border:var(--border);
  border-radius:99px;
  box-shadow:var(--sh-sm);
  font-weight:900;
  transition:transform .15s cubic-bezier(.2,1.6,.4,1), box-shadow .15s, background .15s;
}
.back-btn:hover{ transform:translate(-3px,-3px); box-shadow:var(--sh); background:var(--yellow); }
.back-btn:active{ transform:translate(3px,3px); box-shadow:var(--sh-tiny); }

/* 详情头部 */
.detail-hero{
  position:relative;
  padding:34px 36px 30px;
  background:var(--hero-bg);
  border:var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  overflow:hidden;
}
.detail-hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:var(--dots);
  background-size:24px 24px;
  opacity:.18;
  pointer-events:none;
}
.detail-hero > *{ position:relative; z-index:2; }
.detail-hero-inner{
  display:flex;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
}
.hero-plate{
  position:relative;
  flex:0 0 auto;
  width:172px; height:172px;
  display:grid; place-items:center;
  background:radial-gradient(circle at 34% 30%,#fff 0%,#FFF3DA 62%,#F0DDB8 100%);
  border:var(--border);
  border-radius:50%;
  box-shadow:var(--sh);
  animation:floaty 4s ease-in-out infinite;
}
.hero-plate::before{
  content:"";
  position:absolute; inset:15px;
  border:3px dashed rgba(29,27,38,.28);
  border-radius:50%;
}
.hero-plate span{
  font-size:88px;
  line-height:1;
  filter:drop-shadow(5px 5px 0 rgba(29,27,38,.22));
  animation:spinSlow 9s linear infinite;
}
.detail-hero-text{ flex:1 1 320px; min-width:260px; }
.detail-name{
  font-size:clamp(30px,5.6vw,54px);
  text-shadow:3px 3px 0 rgba(255,255,255,.6);
}
.detail-desc{ margin:12px 0 0; font-size:16px; font-weight:800; color:#3E3749; }
.hero-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.hero-tags .tag-pill{ background:var(--paper); box-shadow:var(--sh-tiny); font-size:12.5px; padding:4px 12px; }
.hero-tags .diff{ font-size:12.5px; }

/* 贴纸 */
.hero-stickers{
  position:absolute;
  top:22px; right:26px;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}
.sticker{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 15px;
  background:var(--paper);
  border:var(--border);
  border-radius:99px;
  font-size:13px;
  font-weight:900;
  box-shadow:var(--sh-sm);
  animation:floaty 5s ease-in-out infinite;
}
.sticker-photo{ background:var(--paper); transform:rotate(3deg); }
.sticker-cat{ background:var(--yellow); transform:rotate(-3deg); animation-delay:1.2s; }

/* 元信息网格 */
.meta-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin:24px 0;
}
.meta-card{
  padding:16px 14px;
  text-align:center;
  background:var(--paper);
  border:var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
  transition:transform .18s cubic-bezier(.2,1.6,.4,1), box-shadow .18s;
}
.meta-card:hover{ transform:translate(-3px,-4px) rotate(-1.4deg); box-shadow:var(--sh); }
.meta-card .m-ico{
  display:block;
  font-size:28px;
  line-height:1;
  margin-bottom:8px;
}
.meta-card .m-label{
  display:block;
  font-size:11.5px;
  letter-spacing:1.4px;
  color:#7B7389;
  font-weight:900;
}
.meta-card .m-value{ display:block; font-size:17px; font-weight:900; margin-top:2px; }
.meta-card:nth-child(1){ background:#FFE3EC; }
.meta-card:nth-child(2){ background:#D9FAFB; }
.meta-card:nth-child(3){ background:#FFF3C9; }
.meta-card:nth-child(4){ background:#EADCFB; }

/* 面板 */
.panel{
  margin-bottom:24px;
  padding:24px 26px 26px;
  background:var(--paper);
  border:var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh);
}
.panel-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:22px;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:3px dashed rgba(29,27,38,.2);
}
.panel-title .panel-icon{
  display:grid;
  place-items:center;
  width:42px; height:42px;
  font-size:22px;
  background:var(--yellow);
  border:2.5px solid var(--ink);
  border-radius:13px;
  box-shadow:var(--sh-tiny);
  transform:rotate(-4deg);
}
.panel-title em{
  margin-left:auto;
  font-size:12.5px;
  font-style:normal;
  padding:4px 12px;
  background:var(--cream-deep);
  border:2px solid var(--ink);
  border-radius:99px;
  font-weight:900;
}

/* 食材 */
.ing-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;
}
.ing{
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 15px;
  background:#FFFCF4;
  border:2.5px solid var(--ink);
  border-radius:var(--r-sm);
  box-shadow:var(--sh-tiny);
  cursor:pointer;
  font-size:14px;
  transition:transform .15s cubic-bezier(.2,1.6,.4,1), background .15s, box-shadow .15s;
  user-select:none;
}
.ing:hover{ transform:translate(-2px,-2px); box-shadow:var(--sh-sm); }
.ing:active{ transform:translate(2px,2px); box-shadow:none; }
.ing .tick{
  flex:0 0 22px;
  width:22px; height:22px;
  display:grid;
  place-items:center;
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:7px;
  font-size:13px;
  color:transparent;
  transition:background .15s, color .15s;
}
.ing.done{ background:#E6FBE9; text-decoration:line-through; text-decoration-thickness:2px; opacity:.75; }
.ing.done .tick{ background:var(--green); color:#08330F; }

/* 步骤 */
.step-list{ display:flex; flex-direction:column; gap:16px; counter-reset:step; }
.step{
  display:flex;
  gap:16px;
  padding:18px 20px;
  background:#FFFCF4;
  border:2.5px solid var(--ink);
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
  transition:transform .18s cubic-bezier(.2,1.6,.4,1), box-shadow .18s;
}
.step:hover{ transform:translate(-3px,-4px); box-shadow:var(--sh); }
.step-num{
  flex:0 0 48px;
  width:48px; height:48px;
  display:grid;
  place-items:center;
  background:var(--step-color,var(--pink));
  color:#fff;
  border:var(--border);
  border-radius:15px;
  box-shadow:var(--sh-tiny);
  font-size:20px;
  font-weight:900;
  transform:rotate(-4deg);
}
.step-main{ flex:1; min-width:0; }
.step-t{ font-size:17px; margin-bottom:5px; }
.step-d{ margin:0; font-size:14.5px; font-weight:700; color:#554E62; }

/* 小贴士气泡 */
.tip-bubble{
  position:relative;
  margin:0 0 26px 18px;
  padding:22px 26px;
  background:var(--yellow);
  border:var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh);
  font-size:15px;
  font-weight:800;
  color:#4A3800;
}
.tip-bubble::before{
  content:"";
  position:absolute;
  left:-19px; top:34px;
  width:0; height:0;
  border:12px solid transparent;
  border-right-color:var(--ink);
}
.tip-bubble::after{
  content:"";
  position:absolute;
  left:-13px; top:34px;
  width:0; height:0;
  border:12px solid transparent;
  border-right-color:var(--yellow);
}
.tip-bubble b{ display:block; font-size:16px; margin-bottom:6px; }

/* 相关推荐 */
.related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:16px;
}
.rel-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px;
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
  transition:transform .18s cubic-bezier(.2,1.6,.4,1), box-shadow .18s;
}
.rel-card:hover{ transform:translate(-4px,-5px) rotate(-1.2deg); box-shadow:var(--sh); }
.rel-card:active{ transform:translate(3px,3px); box-shadow:var(--sh-tiny); }
.rel-top{
  display:flex;
  align-items:center;
  gap:10px;
}
.rel-plate{
  width:52px; height:52px;
  flex:0 0 52px;
  display:grid; place-items:center;
  background:var(--rel-bg);
  border:2.5px solid var(--ink);
  border-radius:50%;
  box-shadow:var(--sh-tiny);
  font-size:26px;
}
.rel-card:hover .rel-plate{ animation:bounce .7s ease-in-out infinite; }
.rel-name{ font-size:15.5px; font-weight:900; }
.rel-cat{ font-size:11px; color:#7B7389; font-weight:900; }
.rel-desc{
  margin:0;
  font-size:12.5px;
  font-weight:700;
  color:#5C5568;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 404 */
.notfound{ text-align:center; padding:70px 24px; }
.notfound .empty-emoji{ font-size:88px; }

/* 页脚 */
.foot{
  margin-top:50px;
  padding:26px 0 34px;
  text-align:center;
  font-size:13px;
  color:#6A6277;
  border-top:var(--border);
  background:var(--paper);
}
.foot b{ color:var(--pink); }

/* 回到顶部 */
.to-top{
  position:fixed;
  right:22px; bottom:22px;
  z-index:70;
  width:54px; height:54px;
  display:grid; place-items:center;
  background:var(--cyan);
  border:var(--border);
  border-radius:50%;
  box-shadow:var(--sh-sm);
  font-size:22px;
  cursor:pointer;
  transition:transform .18s cubic-bezier(.2,1.6,.4,1), box-shadow .18s, opacity .25s;
}
.to-top:hover{ transform:translate(-3px,-4px) rotate(-8deg); box-shadow:var(--sh); }
.to-top:active{ transform:translate(3px,3px); box-shadow:var(--sh-tiny); }

/* ============================================================
   6·2、增删改：卡片操作按钮 / 成品图 / 建议信息 / 弹窗 / 轻提示
   ============================================================ */

/* --- 卡片外的操作按钮（按钮不能套在 <a> 里，所以包一层 .card-wrap） --- */
.card-wrap{ position:relative; display:flex; }
.card-wrap .card{ flex:1; }
.card-actions{
  position:absolute;
  top:10px; right:10px;
  z-index:5;
  display:flex;
  gap:6px;
  transition:transform .2s cubic-bezier(.2,1.5,.4,1);
}
.card-wrap:hover .card-actions{ transform:translate(-5px,-7px) rotate(-.9deg); }
.icon-btn{
  width:32px; height:32px;
  display:grid; place-items:center;
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:10px;
  box-shadow:var(--sh-tiny);
  font-size:15px; line-height:1;
  cursor:pointer;
  transition:transform .14s cubic-bezier(.2,1.6,.4,1), background .14s, box-shadow .14s;
}
.icon-btn:hover{ background:var(--yellow); transform:translate(-2px,-2px) rotate(-6deg); box-shadow:var(--sh-sm); }
.icon-btn:active{ transform:translate(2px,2px); box-shadow:none; }
.icon-btn.icon-danger:hover{ background:var(--pink); }

/* 分类 + 耗时并排到左上角，给右上角的按钮让位 */
.badges{ position:absolute; top:11px; left:11px; z-index:3; display:flex; gap:6px; flex-wrap:wrap; max-width:76%; }
.badges .badge{ position:static; }

/* 有成品图时用图片当封面，emoji 缩成小圆牌 */
.card-top.has-photo .card-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card-top.has-photo::after{
  background-image:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 46%);
  opacity:1;
}
.plate.plate-sm{
  left:auto; right:12px; top:auto; bottom:10px;
  width:64px; height:64px;
  transform:none;
}
.plate-sm .plate-emoji{ font-size:30px; }
.plate-sm::before{ inset:6px; border-width:2px; }
.card:hover .plate.plate-sm{ transform:scale(1.12) rotate(9deg); }

.diff.d-困难{ background:var(--pink); color:#fff; }

/* --- 详情页操作条 --- */
.detail-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.detail-bar .back-btn{ margin-bottom:0; }
.detail-bar-right{ display:flex; gap:10px; flex-wrap:wrap; }
.btn-danger{ background:var(--pink); color:#fff; }

/* --- 详情页成品图（拍立得相框） --- */
.hero-media{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:14px; }
.photo-frame{
  position:relative;
  margin:0;
  padding:10px 10px 34px;
  background:var(--paper);
  border:var(--border);
  border-radius:14px;
  box-shadow:var(--sh);
  transform:rotate(-2.5deg);
  transition:transform .25s cubic-bezier(.2,1.6,.4,1);
}
.photo-frame:hover{ transform:rotate(0deg) scale(1.03); }
.photo-frame img{
  display:block;
  width:250px; height:180px;
  object-fit:cover;
  background:#FFF3DA;
  border:2.5px solid var(--ink);
  border-radius:10px;
}
.photo-frame figcaption{
  position:absolute; left:0; right:0; bottom:8px;
  text-align:center;
  font-size:12.5px; font-weight:900; color:#6A6277;
}
.photo-frame::before{                 /* 相框上的小胶带 */
  content:"";
  position:absolute; top:-13px; left:50%;
  transform:translateX(-50%) rotate(-3deg);
  width:78px; height:24px;
  background:rgba(255,210,63,.9);
  border:2px solid rgba(29,27,38,.45);
  border-radius:3px;
}
.photo-emoji{
  position:absolute; left:-16px; bottom:16px;
  width:58px; height:58px;
  display:grid; place-items:center;
  font-size:29px;
  background:var(--paper);
  border:var(--border);
  border-radius:50%;
  box-shadow:var(--sh-tiny);
  transform:rotate(-6deg);
}
.hero-media-empty{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.photo-add{
  padding:8px 16px;
  background:rgba(255,255,255,.85);
  border:2.5px dashed var(--ink);
  border-radius:99px;
  font-size:12.5px; font-weight:900;
  cursor:pointer;
  transition:transform .15s cubic-bezier(.2,1.6,.4,1), background .15s;
}
.photo-add:hover{ background:var(--yellow); transform:translate(-2px,-3px) rotate(-2deg); }

/* --- 建议与信息 --- */
.advice-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.advice-card{
  padding:16px 18px;
  background:#FFFCF4;
  border:2.5px solid var(--ink);
  border-radius:var(--r-md);
  box-shadow:var(--sh-tiny);
  transition:transform .18s cubic-bezier(.2,1.6,.4,1), box-shadow .18s;
}
.advice-card:hover{ transform:translate(-3px,-4px) rotate(-1deg); box-shadow:var(--sh-sm); }
.advice-card:nth-child(6n+1){ background:#FFE9F0; }
.advice-card:nth-child(6n+2){ background:#E4FAFB; }
.advice-card:nth-child(6n+3){ background:#FFF6D6; }
.advice-card:nth-child(6n+4){ background:#EEE4FD; }
.advice-card:nth-child(6n+5){ background:#FFEEDF; }
.advice-card:nth-child(6n+6){ background:#E7FAEA; }
.advice-ico{ display:block; font-size:24px; line-height:1; margin-bottom:8px; }
.advice-t{ font-size:14.5px; margin-bottom:6px; }
.advice-d{ margin:0; font-size:13.5px; font-weight:700; color:#554E62; }

/* --- 弹窗 --- */
.overlay{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 18px;
  background:rgba(29,27,38,.55);
  animation:overlayIn .2s ease both;
}
.modal{
  width:100%;
  max-width:880px;
  max-height:calc(100vh - 48px);
  display:flex;
  flex-direction:column;
  background:var(--cream);
  border:var(--border);
  border-radius:var(--r-lg);
  box-shadow:10px 12px 0 var(--ink);
  overflow:hidden;
  animation:modalIn .3s cubic-bezier(.2,1.5,.4,1) both;
}
.modal-sm{ max-width:440px; text-align:center; padding:30px 26px 6px; }
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 20px;
  background:var(--yellow);
  border-bottom:var(--border);
}
.modal-head h3{ font-size:20px; }
.modal-x{
  width:34px; height:34px;
  display:grid; place-items:center;
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:50%;
  box-shadow:var(--sh-tiny);
  cursor:pointer;
  font-weight:900;
  transition:transform .18s, background .15s;
}
.modal-x:hover{ background:var(--pink); color:#fff; transform:rotate(90deg); }
.modal-body{ flex:1; overflow-y:auto; padding:20px; }
.modal-foot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  padding:14px 20px;
  background:var(--paper);
  border-top:var(--border);
}
.modal-foot.center{ justify-content:center; }
.confirm-emoji{ font-size:56px; line-height:1; animation:bounce 1.6s ease-in-out infinite; }
.confirm-title{ margin:14px 0 8px; font-size:22px; }
.confirm-text{ margin:0 0 8px; font-size:14px; font-weight:700; color:#554E62; }
.form-err{ margin-right:auto; font-size:13px; font-weight:900; color:#C0392B; }
.form-err:empty{ display:none; }
.form-err.shake{ animation:shake .4s ease; }
#confirm-overlay{ z-index:210; }
#split-overlay{ z-index:230; }

/* --- 表单 --- */
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 16px; }
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field.full{ grid-column:1 / -1; }
.field-label{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12.5px; font-weight:900; letter-spacing:.6px; color:#5C5568;
}
.field-label i{ color:var(--pink); font-style:normal; }
.field-hint{ font-size:11px; font-weight:800; color:#948CA3; }
.field input, .field select, .field textarea{
  width:100%;
  padding:10px 13px;
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:12px;
  box-shadow:var(--sh-tiny);
  font-weight:800;
  outline:none;
  resize:vertical;
  transition:transform .14s, box-shadow .14s, background .14s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  background:#FFFBEF;
  transform:translate(-2px,-2px);
  box-shadow:var(--sh-sm);
}
.emoji-picks, .tag-picks, .bg-picks{ display:flex; flex-wrap:wrap; gap:6px; }
.emoji-pick{
  width:32px; height:32px;
  display:grid; place-items:center;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:9px;
  font-size:17px; line-height:1;
  cursor:pointer;
  transition:transform .13s cubic-bezier(.2,1.6,.4,1), background .13s;
}
.emoji-pick:hover{ background:var(--yellow); transform:translateY(-3px) rotate(-8deg); }
.tag-pick{
  padding:4px 11px;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:99px;
  font-size:11.5px; font-weight:900;
  cursor:pointer;
  transition:transform .13s, background .13s, color .13s;
}
.tag-pick:hover{ background:var(--yellow); transform:translateY(-2px); }
.tag-pick.on{ background:var(--purple); color:#fff; }
.bg-pick{
  width:52px; height:36px;
  border:2.5px solid var(--ink);
  border-radius:10px;
  box-shadow:var(--sh-tiny);
  cursor:pointer;
  transition:transform .14s cubic-bezier(.2,1.6,.4,1), box-shadow .14s;
}
.bg-pick:hover{ transform:translateY(-3px) rotate(-3deg); }
.bg-pick.on{ box-shadow:0 0 0 3px var(--pink), var(--sh-tiny); transform:scale(1.06); }

/* 成品图编辑区 */
.photo-edit{ display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; }
.photo-preview{
  flex:0 0 auto;
  width:150px; height:110px;
  display:grid; place-items:center;
  background:var(--paper);
  border:2.5px dashed var(--ink);
  border-radius:12px;
  font-size:34px;
  overflow:hidden;
}
.photo-preview img{ width:100%; height:100%; object-fit:cover; }
.photo-ctrl{ flex:1 1 240px; display:flex; flex-direction:column; gap:8px; }

/* 步骤编辑区 */
.steps-edit{ display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
.step-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px;
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:var(--r-sm);
  box-shadow:var(--sh-tiny);
}
.step-badge{
  flex:0 0 30px;
  width:30px; height:30px;
  display:grid; place-items:center;
  background:var(--step-color,var(--pink));
  color:#fff;
  border:2.5px solid var(--ink);
  border-radius:10px;
  font-size:13px; font-weight:900;
}
.step-fields{ flex:1; display:flex; flex-direction:column; gap:7px; min-width:0; }
.step-fields input, .step-fields textarea{
  width:100%;
  padding:8px 11px;
  background:#FFFCF4;
  border:2px solid var(--ink);
  border-radius:9px;
  font-weight:800;
  outline:none;
  resize:vertical;
}
.step-del{
  flex:0 0 auto;
  width:28px; height:28px;
  display:grid; place-items:center;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:8px;
  cursor:pointer;
  font-size:13px; font-weight:900;
  transition:background .14s, color .14s, transform .14s;
}
.step-del:hover{ background:var(--pink); color:#fff; transform:rotate(-8deg); }
.form-sec-title{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:22px 0 12px;
  padding-top:16px;
  border-top:3px dashed rgba(29,27,38,.2);
  font-size:16px;
}

/* --- AI 智能填写 --- */
.ai-panel{
  margin-bottom:22px;
  padding:16px;
  background:linear-gradient(135deg,#EDE4FF 0%,#DDF6FF 100%);
  border:var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
}
.ai-panel-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.ai-badge{
  flex:0 0 auto;
  padding:5px 12px;
  background:var(--purple);
  color:#fff;
  border:2.5px solid var(--ink);
  border-radius:99px;
  font-size:12.5px; font-weight:900;
  box-shadow:var(--sh-tiny);
  transform:rotate(-3deg);
}
.ai-title{ display:block; font-size:14.5px; }
.ai-sub{ display:block; font-size:11.5px; font-weight:800; color:#6A6277; }
.ai-panel-head .btn{ margin-left:auto; }
.ai-panel textarea{
  width:100%;
  padding:11px 13px;
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:12px;
  box-shadow:var(--sh-tiny);
  font-weight:800;
  outline:none;
  resize:vertical;
  transition:box-shadow .14s, background .14s;
}
.ai-panel textarea:focus{ background:#FFFBEF; box-shadow:var(--sh-sm); }
.ai-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.ai-status{ font-size:12.5px; font-weight:900; color:#6A6277; }
.ai-status.err{ color:#C0392B; }
.ai-status.ok{ color:#1E7A34; }
.ai-spin{ display:inline-block; animation:spin .9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* 拆分预览弹窗（原「AI 设置弹窗」的样式已随该弹窗一起删除，只留下这里共用的宽度） */
.modal-md{ max-width:640px; }

/* AI 刚填过的输入框闪一下，提示「这里变了」 */
.ai-flash{ animation:aiFlash 1.2s ease; }
@keyframes aiFlash{
  0%  { background:#FFF3B0; }
  100%{ background:var(--paper); }
}

/* --- 多菜拆分预览 --- */
.split-lead{ margin:0 0 14px; font-size:13.5px; font-weight:800; color:#5C5568; }
.split-lead b{ color:var(--pink); }
.split-list{ display:flex; flex-direction:column; gap:10px; }
.split-item{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:12px 14px;
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:var(--r-sm);
  box-shadow:var(--sh-tiny);
  transition:background .2s;
}
.split-item.done{ background:#E7FAEA; }
.split-item.fail{ background:#FFE3EC; }
.split-item.working{ background:#FFF6D6; }
.split-check{ padding-top:4px; }
.split-check input{ width:20px; height:20px; accent-color:var(--pink); cursor:pointer; }
.split-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.split-name{
  width:100%;
  padding:7px 10px;
  background:#FFFCF4;
  border:2px solid var(--ink);
  border-radius:9px;
  font-weight:900;
  outline:none;
}
.split-name:focus{ background:#FFFBEF; box-shadow:var(--sh-tiny); }
.split-cat{ font-size:11.5px; font-weight:800; color:#8B8398; }
.split-src summary{ cursor:pointer; font-size:11.5px; font-weight:900; color:var(--purple); }
.split-src p{
  margin:7px 0 0;
  padding:9px 11px;
  max-height:130px;
  overflow:auto;
  background:#FFFCF4;
  border:2px dashed rgba(29,27,38,.3);
  border-radius:8px;
  font-size:12px;
  font-weight:700;
  color:#5C5568;
  line-height:1.7;
}
.split-state{ flex:0 0 auto; padding-top:4px; font-size:12px; font-weight:900; color:#8B8398; white-space:nowrap; }
.split-state.ok{ color:#1E7A34; }
.split-state.err{ color:#C0392B; }
.split-progress{ margin-top:14px; font-size:12.5px; font-weight:900; color:#5C5568; }

/* --- 页脚数据工具 --- */
.foot-tools{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:12px 0 10px; }
.foot-note{ font-size:11.5px; color:#948CA3; }

/* --- 轻提示 --- */
.toast-wrap{
  position:fixed;
  left:50%; bottom:26px;
  transform:translateX(-50%);
  z-index:300;
  width:min(92vw,460px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  pointer-events:none;
}
.toast{
  display:flex;
  align-items:center;
  gap:9px;
  padding:12px 20px;
  background:var(--paper);
  border:var(--border);
  border-radius:99px;
  box-shadow:var(--sh-sm);
  font-size:14px; font-weight:900;
  animation:toastIn .34s cubic-bezier(.2,1.6,.4,1) both;
}
.toast.ok{ background:#E7FAEA; }
.toast.err{ background:#FFE3EC; }
.toast.out{ animation:toastOut .28s ease both; }


/* ============================================================
   7. 动画
   ============================================================ */
@keyframes overlayIn{
  from{ opacity:0; }
  to  { opacity:1; }
}
@keyframes modalIn{
  from{ opacity:0; transform:translateY(22px) scale(.96) rotate(-1deg); }
  to  { opacity:1; transform:none; }
}
@keyframes toastIn{
  from{ opacity:0; transform:translateY(18px) scale(.95); }
  to  { opacity:1; transform:none; }
}
@keyframes toastOut{
  to{ opacity:0; transform:translateY(10px) scale(.96); }
}
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  25%    { transform:translateX(-5px); }
  75%    { transform:translateX(5px); }
}
@keyframes viewIn{
  from{ opacity:0; transform:translateY(16px) scale(.99); }
  to  { opacity:1; transform:none; }
}
@keyframes cardIn{
  from{ opacity:0; transform:translateY(22px) rotate(-1.4deg); }
  to  { opacity:1; transform:none; }
}
@keyframes floaty{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%    { transform:translateY(-10px) rotate(3deg); }
}
@keyframes bounce{
  0%,100%{ transform:translateY(0) scale(1); }
  50%    { transform:translateY(-8px) scale(1.08); }
}
@keyframes wiggle{
  0%,100%{ transform:rotate(-9deg); }
  50%    { transform:rotate(9deg); }
}
@keyframes spinSlow{
  0%  { transform:rotate(-6deg) scale(1); }
  50% { transform:rotate(6deg) scale(1.06); }
  100%{ transform:rotate(-6deg) scale(1); }
}

/* 进场延迟，让卡片依次弹出 */
.card:nth-child(1){ animation-delay:.02s; }
.card:nth-child(2){ animation-delay:.06s; }
.card:nth-child(3){ animation-delay:.1s; }
.card:nth-child(4){ animation-delay:.14s; }
.card:nth-child(5){ animation-delay:.18s; }
.card:nth-child(6){ animation-delay:.22s; }

/* ============================================================
   8. 响应式
   ============================================================ */
@media (max-width:900px){
  .meta-grid{ grid-template-columns:repeat(2,1fr); }
  .detail-hero{ padding:26px 24px; }
  .hero-plate{ width:140px; height:140px; }
  .hero-plate span{ font-size:70px; }
}

@media (max-width:720px){
  :root{ --sh:5px 5px 0 var(--ink); --sh-lg:6px 6px 0 var(--ink); --nav-h:auto; }

  .nav-inner{ flex-direction:column; align-items:stretch; gap:12px; }
  .logo{ align-self:flex-start; font-size:18px; }
  .logo .logo-emoji{ font-size:23px; }
  .search{ max-width:none; }

  .wrap{ padding:0 14px; }
  .hero{ padding:22px 18px; margin:18px 0 16px; }
  .hero-emoji{ display:none; }
  .hero p{ font-size:13.5px; }

  .filters{ padding:16px 15px; }
  .filter-head{ padding:11px 2px; gap:9px; }
  .filter-label{ font-size:14px; }
  .filter-state{ font-size:11.5px; padding:3px 10px; max-width:50%; }
  .filter-arrow{ width:27px; height:27px; }
  .filter-chips{ padding:2px 2px 14px; }
  .pager-top::before{ content:"📄"; }

  .grid{ grid-template-columns:1fr; gap:20px; }
  .card-top{ height:136px; }

  .result-bar{ font-size:14px; padding:11px 15px; }

  .detail-hero{ padding:22px 16px; }
  .detail-hero-inner{ gap:18px; }
  .hero-plate{ width:118px; height:118px; margin:0 auto; }
  .hero-plate span{ font-size:58px; }
  .detail-hero-text{ min-width:0; text-align:center; }
  .hero-tags{ justify-content:center; }
  .hero-stickers{ position:static; flex-direction:row; justify-content:center; margin-bottom:14px; }
  .sticker{ font-size:11.5px; padding:5px 11px; }

  .panel{ padding:18px 16px 20px; border-radius:var(--r-md); }
  .panel-title{ font-size:18px; }
  .panel-title .panel-icon{ width:36px; height:36px; font-size:19px; }

  .step{ flex-direction:column; gap:12px; padding:15px; }
  .step-num{ transform:rotate(-3deg); }

  .tip-bubble{ margin-left:14px; padding:18px 18px; }

  .page-num{ min-width:42px; height:42px; }
  .to-top{ right:12px; bottom:12px; width:48px; height:48px; font-size:19px; }
}

/* 无障碍：尊重系统减弱动效设置 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* 移动端：弹窗与表单（放在最后，覆盖上面的默认值） */
@media (max-width:720px){
  .nav-add{ width:100%; justify-content:center; }
  .overlay{ padding:12px 10px; align-items:flex-start; }
  .modal{ max-height:calc(100vh - 24px); box-shadow:6px 7px 0 var(--ink); }
  .modal-sm{ padding:24px 18px 4px; }
  .form-grid{ grid-template-columns:1fr; }
  .modal-foot{ flex-wrap:wrap; }
  .modal-foot .form-err{ width:100%; margin:0; }
  .modal-foot .btn{ flex:1; justify-content:center; }
  .photo-frame img{ width:200px; height:150px; }
  .photo-preview{ width:100%; height:130px; }
  .detail-bar-right{ width:100%; }
  .detail-bar-right .btn{ flex:1; justify-content:center; }
  .advice-grid{ grid-template-columns:1fr; }
  .empty-btns{ flex-direction:column; align-items:stretch; }
}

/* ============================================================
   静态前端适配（anime-kitchen-web 新增）
   ------------------------------------------------------------
   原来的单文件版没有这些规则，其余样式全部原样搬运、未做改版。
   ============================================================ */

/* 空态里的按钮排一行（清空筛选 / 导入内置菜谱 / 重新加载） */
.empty-btns{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.empty-btns:empty{ display:none; }

/* 详情页出错时的提示正文（可能带后端返回的错误文案，需要能换行） */
.notfound p{ word-break:break-word; }