/* CN 个人版 · 我的菜谱（与设置 / 成就 / 今天同一套：页头 + 大卡 + 左总览 + 右内容） */
/* 显式清掉旧版给菜谱页铺的整页渐变底与负边距，避免缓存里的旧规则复活 */
#view-dishes.active{margin:0;padding:2px 0 8px;background:none}
.dishes-shell{
  padding:20px;
  background:linear-gradient(145deg,var(--card,#fffaf3),color-mix(in srgb,var(--card,#fffaf3) 90%,var(--accent,#e25d3d) 10%));
  border:1px solid color-mix(in srgb,var(--line,#eadfd2) 74%,var(--accent,#e25d3d) 26%);
  border-radius:24px;
  box-shadow:0 18px 50px rgba(42,28,20,.08);
}
.dishes-side{position:sticky}
.dishes-side-head{padding:0 2px 12px}
.dishes-side-head span{display:block;font-size:9px;font-weight:800;letter-spacing:.2em;color:var(--accent,#e25d3d)}
.dishes-side-head h2{margin:3px 0 2px;font-size:19px;color:var(--ink,#2c241d);line-height:1.2}
.dishes-side-head p{margin:0;font-size:11px;color:var(--ink-2,#8a7768)}
.dishes-side-search{margin:0 0 10px}
.dishes-side-search input{
  width:100%;box-sizing:border-box;min-height:36px;border-radius:10px;
  border:1px solid var(--line,#eadfd2);background:var(--card,#fffaf3);color:var(--ink,#2c241d);
  padding:7px 10px;font-size:13px;font-family:inherit;
}
.dishes-side-search input:focus{outline:none;border-color:var(--accent,#e25d3d);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#e25d3d) 12%,transparent)}
.dishes-side-nav{display:flex;flex-direction:column;gap:2px}
.dishes-side-nav .ach-overview-item{margin-bottom:2px}
.dishes-side-nav .ach-overview-item em{font-style:normal;font-size:10px;color:var(--ink-2,#8a7768)}
.dishes-side-nav .ach-overview-item.active em{color:inherit;opacity:.8}
/* 右侧列表 */
.dishes-list-card{padding:16px 18px}
/* 菜品行：浅色卡片化，和外面的大卡区分层次 */
.dishes-list-card .dish-row{
  margin:0 0 8px;
  padding:11px 12px;
  border:1px solid color-mix(in srgb,var(--line,#eadfd2) 78%,transparent);
  border-radius:12px;
  background:var(--card,#fffaf3);
  transition:background .15s,border-color .15s,transform .15s;
}
.dishes-list-card .dish-row:last-child{margin-bottom:0;border-bottom:1px solid color-mix(in srgb,var(--line,#eadfd2) 78%,transparent)}
.dishes-list-card .dish-row:hover{background:var(--cream,#fff7f1);border-color:color-mix(in srgb,var(--accent,#e25d3d) 30%,var(--line,#eadfd2));transform:translateY(-1px)}
.dishes-list-card .dish-name{color:var(--ink,#2c241d)}
.dishes-list-card .dish-meta{color:var(--ink-2,#8a7768)}
.dishes-list-card .dish-stat{color:var(--ink-3,#a99a8c)}
.dishes-list-card .dish-thumb{width:52px;height:52px;border-radius:11px}
.dishes-list-card .dish-steps{margin-top:8px;padding-top:7px;border-top:1px dashed var(--line,#eadfd2)}
.dishes-list-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.dishes-list-head h2{margin:0;font-size:18px;color:var(--ink,#2c241d);display:flex;align-items:center;gap:8px}
.dishes-list-head h2::before{content:"";width:4px;height:15px;border-radius:2px;background:var(--accent,#e25d3d);flex:none}
.dishes-list-actions{display:flex;gap:6px;flex-wrap:wrap}
.dishes-list-actions .btn.active{background:var(--green-soft,#ffede4);border-color:var(--accent,#e25d3d);color:var(--accent-ink,#b23a2e)}
.dishes-test{margin-top:14px}
@media (max-width:900px){
  .dishes-shell{padding:14px;border-radius:18px}
  .dishes-side{position:static;padding:12px;border-radius:14px}
  .dishes-side-search{margin-bottom:8px}
  .dishes-side-nav{flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:4px;padding-bottom:2px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .dishes-side-nav .ach-overview-item{flex:none;width:auto;margin:0;padding:6px 11px}
  .dishes-side-nav .ach-overview-item>span{display:flex;gap:5px}
  .dishes-list-card{padding:14px}
}
@media (max-width:640px){
  .dishes-shell{padding:12px}
  .dishes-list-head h2{font-size:16px}
  .dishes-list-actions .btn{flex:1;min-width:0}
  .dishes-list-card{padding:12px}
}