/* ============================================================================
   环氧配方管理器 · 设计系统
   ----------------------------------------------------------------------------
   这是全套模板唯一的样式来源。程序员接入正式前端时，可以直接沿用本文件的
   设计令牌（--变量）与组件类名。

   设计取向：这是一台「称量仪器」，不是后台管理系统。
     · 深石墨机壳（顶栏 / 底部状态条）包住白色工作台面
     · 虫胶琥珀只出现在「选中态」和「关键读数」上，其余一律中性
     · 字重只用 400 / 500 / 600 三档，靠字号与字距拉层级，不靠加粗喊话
     · 所有数字等宽对齐（tabular-nums）

   字体：思源宋体 600（配方名 / 区段标题）+ 思源黑体 400-600（正文 / 表单 / 数据）
         同出思源超级字族，骨架同源。均为 SIL OFL 授权，随包自托管。
   ========================================================================== */

/* ---------------------------------------------------------------- 设计令牌 */
:root{
  /* 机壳 */
  --ink:        #16181A;   /* 顶栏、底栏、主按钮、正文极深色 */
  --ink-2:      #24272A;   /* 机壳悬停 */
  --ink-3:      #33373B;   /* 机壳分隔与次级悬停 */
  --on-ink:     #E9E7E2;   /* 机壳上的文字 */
  --on-ink-dim: #B8B5AE;   /* 机壳上的次级文字 */

  /* 台面 */
  --ground:     #DEDDD8;   /* 页面底色（台面之外） */
  --surface:    #FFFFFF;   /* 主台面 */
  --sunk:       #F5F3EF;   /* 凹陷面板：称重台、输入底 */
  --line:       #E3E0D9;   /* 细分隔线 */
  --line-2:     #CBC7BE;   /* 实体边界 */
  --text:       #1B1D1F;   /* 正文 */
  --muted:      #6E6B65;   /* 次级文字 */
  --muted-2:    #8D8A83;   /* 三级文字、占位符 */

  /* 树脂琥珀 —— 只给选中态与关键读数 */
  --resin:      #9A5518;
  --resin-2:    #B4692A;
  --resin-wash: #FBF3E8;

  /* 语义色（与琥珀强调色相互独立） */
  --ok:         #2E6A4E;
  --ok-wash:    #EDF4F0;
  --warn:       #8A6A16;
  --warn-wash:  #F7F1DF;
  --bad:        #9A3025;
  --bad-wash:   #FAEDEB;

  /* 字族 */
  --sans:  "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --serif: "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;

  /* 尺度 */
  --bar-h:   52px;   /* 桌面顶栏 */
  --foot-h:  30px;   /* 桌面状态条 */
  --rail-w:  304px;  /* 配方轨宽度 */
  --page-w:  1440px; /* 台面最大宽度，整体居中 */
  --r:       4px;    /* 标准圆角，克制使用 */
}

/* ------------------------------------------------------------------ 基础 */
*, *::before, *::after{ box-sizing: border-box; }

html{ background: var(--ground); }

body{
  margin:0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  /* 主滚动条固定在窗口最外侧；任何情况下不出现横向滚动条 */
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,p,ul,ol,figure,table{ margin:0; }
ul,ol{ list-style:none; padding:0; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
a{ color: inherit; }
img,svg{ vertical-align: middle; }
/* 图标一律不被 flex 压缩（宽高由 width/height 属性给定） */
svg{ flex:none; }

/* 焦点可见，键盘可用 */
:focus-visible{
  outline:2px solid var(--resin);
  outline-offset:2px;
  border-radius:2px;
}

/* 数字一律等宽对齐 */
.num,
input[type="number"],
.recipe-ratio, .weigh-total, .weigh-part strong, .ratio-strip-value,
.weigh-bar-value, .weigh-bar-input, .item-row strong, .mat-amt,
.ingredient-row strong, .template-meta, td.num, th.num{
  font-variant-numeric: tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* 长内容防溢出的统一约定 */
.break{ overflow-wrap:anywhere; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ============================================================== 通用组件 */

/* --- 按钮 ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:32px; padding:0 14px;
  border:1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--text);
  font-size:13px; font-weight:500; white-space:nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover{ background: var(--sunk); border-color: var(--muted-2); }
.btn:disabled{ opacity:.4; cursor:default; }
.btn:disabled:hover{ background: var(--surface); border-color: var(--line-2); }

.btn.primary, .btn.btn-primary{
  background: var(--ink); border-color: var(--ink); color:#F2F0EB;
}
.btn.primary:hover, .btn.btn-primary:hover{ background: var(--ink-2); border-color: var(--ink-2); }

.btn.secondary, .btn.btn-secondary{ background: var(--surface); }

.btn.danger, .btn.btn-danger{
  color: var(--bad); border-color:#DFC4BF; background: var(--surface);
}
.btn.danger:hover{ background: var(--bad-wash); border-color: var(--bad); }

.btn.small{ height:26px; padding:0 9px; font-size:12px; }
.btn.block{ width:100%; }

/* 图标按钮（手机顶栏、行内操作） */
.icon-btn{
  width:34px; height:34px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: var(--r); color: var(--muted);
  transition: background .12s, color .12s;
}
.icon-btn:hover{ background: rgba(0,0,0,.05); color: var(--text); }
.icon-btn:disabled{ opacity:0; cursor:default; }

/* --- 表单 ------------------------------------------------------------- */
.field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.field > label{
  font-size:12px; font-weight:500; color: var(--muted); letter-spacing:.02em;
}
.field > label .req{ color: var(--bad); margin-left:2px; }

input[type="text"], input[type="search"], input[type="number"],
select, textarea, .input{
  width:100%; min-width:0;
  height:34px; padding:0 10px;
  background: var(--surface);
  border:1px solid var(--line-2); border-radius: var(--r);
  font-size:13.5px;
  transition: border-color .12s, box-shadow .12s;
}
textarea{ height:auto; min-height:72px; padding:8px 10px; line-height:1.65; resize:vertical; }
select{ padding-right:6px; }
input::placeholder, textarea::placeholder{ color: var(--muted-2); }

input:focus, select:focus, textarea:focus{
  outline:none;
  border-color: var(--resin);
  box-shadow:0 0 0 3px rgba(154,85,24,.12);
}
input:disabled, textarea:disabled{ background: var(--sunk); color: var(--muted); }

/* 数值输入右对齐，便于核对 */
.numeric-field input{ text-align:right; font-variant-numeric: tabular-nums; }

/* 校验失败 */
.field.invalid > label{ color: var(--bad); }
.field.invalid input, .field.invalid textarea, input.invalid, textarea.invalid{
  border-color: var(--bad); background: var(--bad-wash);
}
.field-error{
  font-size:12px; color: var(--bad);
  display:flex; align-items:flex-start; gap:5px;
}
.field-error > svg, .validation-note > svg, .native-hint > svg{ margin-top:2px; }

/* 校验汇总条 */
.validation-note{
  display:flex; align-items:flex-start; gap:7px;
  padding:9px 11px; border-radius: var(--r);
  background: var(--bad-wash); border:1px solid #E7CBC6;
  font-size:12.5px; line-height:1.65; color: var(--bad);
  overflow-wrap:anywhere;
}
.validation-note.is-hint{
  background: var(--sunk); border-color: var(--line);
  color: var(--muted);
}

/* --- 标签 / 徽标 ------------------------------------------------------ */
.tag{
  display:inline-block;
  padding:1px 6px; border-radius:2px;
  font-size:10.5px; font-weight:500; letter-spacing:.02em;
  background: var(--sunk); color: var(--muted);
}
.tag.drop{ background: var(--warn-wash); color: var(--warn); }
.tag.pin, .pin-badge{
  background: var(--resin-wash); color: var(--resin);
  display:inline-block; padding:1px 6px; border-radius:2px;
  font-size:10.5px; font-weight:500; margin-left:6px;
}

/* --- 空状态 ----------------------------------------------------------- */
.empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:56px 24px; text-align:center;
  color: var(--muted);
}
.empty .empty-icon{ color: var(--line-2); }
.empty .empty-title{
  font-family: var(--serif); font-size:17px; font-weight:600; color: var(--text);
}
.empty .empty-line{ font-size:13px; max-width:34ch; line-height:1.7; }

/* --- Toast ------------------------------------------------------------ */
.toast{
  position:fixed; left:50%; bottom:58px; transform:translateX(-50%);
  z-index:80; max-width: calc(100vw - 32px);
  padding:9px 16px; border-radius: var(--r);
  background: var(--ink); color:#F2F0EB;
  font-size:13px; box-shadow:0 6px 20px rgba(0,0,0,.24);
}
.toast:empty{ display:none; }

/* --- 同步状态条 -------------------------------------------------------- */
.sync-notice{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; gap:10px;
  padding:7px 16px;
  background: var(--ink); color: var(--on-ink-dim);
  font-size:12.5px;
}
.sync-notice > span{ min-width:0; overflow-wrap:anywhere; }
.sync-notice button{
  margin-left:auto; flex:none;
  padding:4px 10px; border-radius:3px;
  border:1px solid #3A3E42; color:#E8C9A4; font-size:12px;
}
.sync-notice button:hover{ background: var(--ink-3); }
.sync-notice.is-offline{ background:#3A3020; color:#E4CDA4; }
.sync-notice.is-conflict{ background:#3B2320; color:#E9C3BC; }

/* 状态圆点 */
.cloud-status-dot, .dot{
  width:7px; height:7px; border-radius:50%; flex:none;
  background: var(--ok);
}
.cloud-status-dot.is-pending, .dot.is-pending{ background: var(--warn); }
.cloud-status-dot.is-offline, .dot.is-offline{ background: var(--muted-2); }
.cloud-status-dot.is-conflict, .dot.is-conflict{ background: var(--bad); }

/* --- 弹窗 ------------------------------------------------------------- */
.modal-backdrop, .confirm-backdrop, .sheet-backdrop{
  position:fixed; inset:0; z-index:70;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background: rgba(22,24,26,.46);
}
.modal, .confirm-dialog, .sync-dialog{
  width:100%; background: var(--surface);
  border-radius:6px; border:1px solid var(--line-2);
  box-shadow:0 18px 48px rgba(0,0,0,.26);
  display:flex; flex-direction:column;
  max-height: calc(100vh - 48px);
  min-width:0;
}
.modal{ max-width:920px; }
.confirm-dialog, .sync-dialog{ max-width:440px; }

.modal-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:16px 20px; border-bottom:1px solid var(--line);
}
.modal-head h2, .modal-head h3{
  font-family: var(--serif); font-size:17px; font-weight:600;
}
.modal-head p{ font-size:12.5px; color: var(--muted); margin-top:3px; }
.modal-close{
  width:28px; height:28px; flex:none; border-radius:3px;
  display:flex; align-items:center; justify-content:center; color: var(--muted);
}
.modal-close:hover{ background: var(--sunk); color: var(--text); }

.modal-body{
  padding:20px; overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column; gap:22px;
  min-width:0;
}
.modal-foot{
  display:flex; align-items:center; gap:12px;
  padding:14px 20px; border-top:1px solid var(--line);
  background: var(--sunk);
  border-radius:0 0 6px 6px;
  flex-wrap:wrap;
}
.modal-foot .spacer{ flex:1; min-width:0; }

/* 确认对话框 */
.confirm-dialog{ padding:20px; gap:12px; overflow-y:auto; overscroll-behavior:contain; }
.confirm-dialog > *{ flex-shrink:0; }
.confirm-dialog h3{ font-family: var(--serif); font-size:17px; font-weight:600; }
.confirm-dialog p{ font-size:13.5px; color: var(--muted); line-height:1.7; overflow-wrap:anywhere; }
.confirm-name{
  display:block; padding:9px 12px; border-radius: var(--r);
  background: var(--sunk); border:1px solid var(--line);
  font-size:13.5px; font-weight:500; overflow-wrap:anywhere;
}
.confirm-actions, .sync-actions{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end;
}
.sync-actions{ justify-content:flex-start; }

/* 原生弹窗示意标记 */
.native-hint{
  display:flex; align-items:center; gap:6px;
  margin-bottom:10px; padding:5px 9px; border-radius:2px;
  background: var(--warn-wash); color: var(--warn);
  font-size:11.5px; letter-spacing:.02em;
}

/* --- 分段标签（编辑器 / 模板库） ---------------------------------------- */
.tabs{
  display:flex; gap:2px; min-width:0;
  border-bottom:1px solid var(--line);
  overflow-x:auto;
}
.tabs::-webkit-scrollbar{ height:0; }
.tab, .tabs > button{
  flex:none;
  padding:8px 14px; margin-bottom:-1px;
  border-bottom:2px solid transparent;
  font-size:13.5px; font-weight:500; color: var(--muted);
  white-space:nowrap;
  transition: color .12s, border-color .12s;
}
.tab:hover, .tabs > button:hover{ color: var(--text); }
.tab.active, .tabs > button.active{
  color: var(--resin); border-bottom-color: var(--resin); font-weight:600;
}

/* ====================================================== 桌面：整体外壳 */
.desktop-app .app{
  display:flex; flex-direction:column; min-height:100vh;
}

/* 顶栏机壳 */
.desktop-app .header{
  position:sticky; top:0; z-index:30;
  height: var(--bar-h); flex:none;
  background: var(--ink); color: var(--on-ink);
  box-shadow:0 1px 0 rgba(0,0,0,.35);
  display:flex; align-items:center;
}
.desktop-app .header > *{ min-width:0; }
.desktop-app .header::before,
.desktop-app .header::after{ content:none; }
.header-inner{
  width:100%; max-width: var(--page-w); margin:0 auto;
  padding:0 28px;
  display:flex; align-items:center; gap:20px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--serif); font-size:16px; font-weight:600;
  letter-spacing:.02em; color:#F2F0EB; white-space:nowrap;
}
.brand .mark{ width:22px; height:22px; flex:none; color: var(--resin-2); }
.header-nav{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.header-nav button, .header-nav a{
  padding:7px 12px; border-radius:3px;
  font-size:13px; font-weight:500; color: var(--on-ink-dim);
  text-decoration:none; white-space:nowrap;
  transition: background .12s, color .12s;
}
.header-nav button:hover, .header-nav a:hover{ background: var(--ink-3); color:#F2F0EB; }
.header-nav .header-link, .header-link{ color:#E8C9A4; }
.header-sep{ width:1px; height:20px; background:#3A3E42; margin:0 6px; flex:none; }

/* 工作台面：整体居中 */
.desktop-app .shell{
  flex:1; width:100%; max-width: var(--page-w); margin:0 auto;
  padding:22px 28px 0;
  min-width:0;
}
.sheet-frame{
  background: var(--surface);
  border:1px solid var(--line-2); border-bottom:0;
  border-radius:6px 6px 0 0;
  display:grid; grid-template-columns: var(--rail-w) minmax(0,1fr);
  align-items:start;
  min-height: calc(100vh - var(--bar-h) - var(--foot-h) - 22px);
}

/* 底部状态条机壳 */
.desktop-app .app-footer{
  position:sticky; bottom:0; z-index:40;
  background: var(--ink); color:#A9A69F;
  border-top:1px solid #000;
  height: var(--foot-h); flex:none;
  display:flex; align-items:center;
}
.app-footer .footer-inner{
  width:100%; max-width: var(--page-w); margin:0 auto;
  padding:0 28px;
  display:flex; align-items:center; gap:8px;
  font-size:12px;
}
.app-footer .footer-right{ margin-left:auto; color:#72706B; }

/* ---------------------------------------------------- 桌面：配方轨（左） */
.sidebar{
  border-right:1px solid var(--line);
  position:sticky; top: var(--bar-h);
  max-height: calc(100vh - var(--bar-h));
  display:flex; flex-direction:column;
  min-width:0;
}
.rail-head{
  padding:18px 18px 14px;
  display:flex; flex-direction:column; gap:12px;
  border-bottom:1px solid var(--line);
}
.rail-title{
  font-size:12px; font-weight:700; letter-spacing:.1em; color: var(--muted);
}
.search{ position:relative; display:flex; align-items:center; min-width:0; }
.search > svg{ position:absolute; left:10px; color: var(--muted-2); pointer-events:none; }
.search input{ padding-left:32px; background: var(--sunk); border-color: var(--line); }
.search input:focus{ background: var(--surface); }
.rail-count{
  padding:10px 18px; border-bottom:1px solid var(--line);
  font-size:12px; color: var(--muted);
}
.rail-count b{ font-weight:600; color: var(--text); }

.rail-list{
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding-bottom:14px;
}

/* 配方条目：平铺细线列表，不是一堆浮起来的圆角卡片 */
.recipe-card{
  position:relative; display:block; width:100%;
  padding:13px 16px 12px 18px;
  border-bottom:1px solid var(--line);
  text-align:left; min-width:0;
  transition: background .12s;
}
.recipe-card::before{
  content:""; position:absolute; left:0; top:-1px; bottom:-1px;
  width:3px; background:transparent;
}
.recipe-card:hover{ background:#FAF9F7; }
.recipe-card.active{ background: var(--resin-wash); }
.recipe-card.active::before{ background: var(--resin); }

.recipe-title{
  display:flex; align-items:flex-start; gap:6px;
  font-size:14.5px; font-weight:500; line-height:1.5; color: var(--text);
  overflow-wrap:anywhere;          /* 长配方名完整换行，绝不截断 */
}
.recipe-card.active .recipe-title{ font-weight:600; }
.recipe-title .pin-dot{
  flex:none; margin-top:6px; width:6px; height:6px; border-radius:50%;
  background: var(--resin);
}

/* 配比在左、更多操作在右：两者不争宽度，左栏不会出现横向滚动条 */
.recipe-toolbar{
  margin-top:7px; min-height:24px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-width:0;
}
.recipe-ratio{
  font-size:12.5px; color: var(--muted); white-space:nowrap; min-width:0;
}
.recipe-ratio b{ font-weight:600; color: var(--text); letter-spacing:.01em; }
.recipe-card.active .recipe-ratio b{ color: var(--resin); }

.recipe-actions{
  display:flex; gap:1px; flex:none;
  opacity:0; transition: opacity .12s;
}
.recipe-card:hover .recipe-actions,
.recipe-card:focus-within .recipe-actions,
.recipe-card.active .recipe-actions{ opacity:1; }
.recipe-actions button{
  width:26px; height:24px;
  display:flex; align-items:center; justify-content:center;
  border-radius:3px; color: var(--muted-2);
  transition: background .12s, color .12s;
}
.recipe-actions button:hover{ background: rgba(0,0,0,.06); color: var(--text); }
.recipe-actions button:disabled{ opacity:.3; cursor:default; }
.recipe-actions button:disabled:hover{ background:none; color: var(--muted-2); }

/* ---------------------------------------------------- 桌面：详情（右） */
.main{ min-width:0; }
.detail-layout{
  padding:26px 34px 60px;
  display:flex; flex-direction:column; gap:26px;
  min-width:0; overflow-x:hidden;
}
.detail-heading{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.detail-heading h2{
  font-family: var(--serif);
  font-size:27px; font-weight:600; line-height:1.35; letter-spacing:.01em;
  text-wrap:balance; overflow-wrap:anywhere;
}
.detail-heading p{
  font-size:13.5px; line-height:1.75; color: var(--muted);
  white-space:pre-line;            /* 保留备注中的换行 */
  max-width:62ch; overflow-wrap:anywhere;
}
.detail-actions{ display:flex; flex-wrap:wrap; gap:8px; }

/* 区段标题 */
.sec-title{
  font-family: var(--serif);
  font-size:15px; font-weight:600; letter-spacing:.03em;
  display:flex; align-items:baseline; gap:10px; min-width:0;
}
.sec-title .hint{
  font-family: var(--sans); font-size:12px; font-weight:400;
  color: var(--muted-2); letter-spacing:0;
}

/* --- 称重台：全页唯一的重头戏 ------------------------------------------ */
.weigh-panel{
  background: var(--sunk);
  border:1px solid var(--line-2); border-radius:5px;
  overflow:hidden; min-width:0;
}
.weigh-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px 16px; flex-wrap:wrap;
  padding:12px 18px; border-bottom:1px solid var(--line);
  background: var(--surface);
}
.ratio-read{
  display:flex; align-items:baseline; gap:10px;
  font-size:13px; color: var(--muted); white-space:nowrap;
}
.ratio-read b{ font-size:16px; font-weight:600; color: var(--text); letter-spacing:.04em; }

.weigh-grid{
  display:grid; grid-template-columns: minmax(220px, 320px) minmax(0,1fr);
  align-items:stretch; min-width:0;
}
.weigh-in{
  padding:18px; border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:12px; min-width:0;
}
.weigh-in > label{ font-size:12px; font-weight:500; color: var(--muted); }
.weigh-in > label .sub{ color: var(--muted-2); }

.weigh-input{
  display:flex; align-items:center;
  background: var(--surface);
  border:1px solid var(--line-2); border-radius: var(--r);
  transition: border-color .12s, box-shadow .12s;
  min-width:0;
}
.weigh-input:focus-within{ border-color: var(--resin); box-shadow:0 0 0 3px rgba(154,85,24,.12); }
.weigh-input input{
  width:100%; min-width:0; height:46px; padding:0 4px 0 14px;
  border:0; background:none; outline:none; box-shadow:none;
  font-size:24px; font-weight:600; letter-spacing:.01em;
}
.weigh-input input:focus{ box-shadow:none; }
.weigh-input .unit{ padding:0 14px 0 4px; font-size:14px; font-weight:500; color: var(--muted); flex:none; }
.weigh-input.invalid{ border-color: var(--bad); }
.weigh-input.invalid input{ color: var(--bad); }

.quick-weights{ display:flex; flex-wrap:wrap; gap:6px; }
.quick-weights button{
  height:27px; padding:0 10px; border-radius:3px;
  border:1px solid var(--line-2); background: var(--surface);
  font-size:12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: background .12s, color .12s, border-color .12s;
}
.quick-weights button:hover{ background: var(--resin-wash); border-color: var(--resin-2); color: var(--resin); }
.quick-weights button.active{
  background: var(--resin-wash); border-color: var(--resin); color: var(--resin); font-weight:600;
}

.weigh-out{
  padding:18px 20px; min-width:0;
  display:flex; flex-direction:column; gap:14px;
}
.weigh-out-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:10px 16px; flex-wrap:wrap;
}
.weigh-out-head > .out-label{ font-size:12px; font-weight:500; color: var(--muted); }
.weigh-total{
  display:flex; align-items:baseline; gap:8px;
  font-size:40px; font-weight:600; line-height:1;
  letter-spacing:-.015em; color: var(--resin);
}
.weigh-total .unit{ font-size:16px; font-weight:500; }
.weigh-total.is-invalid{ color: var(--muted-2); }

.weigh-parts{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.weigh-part{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:9px 0; border-bottom:1px solid var(--line); min-width:0;
}
.weigh-part:last-child{ border-bottom:0; }
.weigh-part span{ font-size:13.5px; overflow-wrap:anywhere; min-width:0; }
.weigh-part strong{ font-size:17px; font-weight:600; white-space:nowrap; letter-spacing:.01em; }
.weigh-part strong .unit{ font-size:12.5px; font-weight:500; color: var(--muted); margin-left:3px; }

.weigh-hint{
  display:flex; align-items:flex-start; gap:8px;
  padding:11px 18px; border-top:1px solid var(--line);
  background: var(--surface);
  font-size:12px; line-height:1.7; color: var(--muted);
  overflow-wrap:anywhere;
}
.weigh-hint > svg{ flex:none; margin-top:3px; color: var(--muted-2); }
.weigh-hint.is-invalid{ background: var(--bad-wash); color: var(--bad); }
.weigh-hint.is-invalid > svg{ color: var(--bad); }

/* --- 组分表 ------------------------------------------------------------ */
.ingredient-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:26px;
}
.ingredient-section{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.ingredient-section .rows{ display:flex; flex-direction:column; border-top:1.5px solid var(--text); }
.ingredient-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:10px 0; border-bottom:1px solid var(--line); min-width:0;
}
.ingredient-row > div{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.ingredient-row > div > .n{ font-size:13.5px; font-weight:500; overflow-wrap:anywhere; }
.ingredient-row small{ font-size:11.5px; color: var(--muted); letter-spacing:.01em; overflow-wrap:anywhere; }
.ingredient-row strong{ font-size:15px; font-weight:600; white-space:nowrap; letter-spacing:.01em; }
.ingredient-row strong .unit{ font-size:12px; font-weight:500; color: var(--muted); margin-left:3px; }
/* 按滴记录：明确区分，绝不换算成克 */
.ingredient-row.is-drop strong{ color: var(--warn); }

/* --- 桌面编辑器（弹窗内） --------------------------------------------- */
.editor-block{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.editor-block-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
}
.editor-block-head h3{
  font-family: var(--serif); font-size:14.5px; font-weight:600;
  display:flex; align-items:center; gap:8px;
}
.editor-block-head .add-link{
  font-size:12.5px; font-weight:500; color: var(--resin);
}
.editor-block-head .add-link:hover{ text-decoration:underline; }

.component-table{
  border:1px solid var(--line); border-radius: var(--r);
  overflow:hidden; min-width:0;
}
.component-head{
  display:grid; gap:1px;
  padding:7px 10px;
  background: var(--sunk); border-bottom:1px solid var(--line);
  font-size:11.5px; font-weight:500; color: var(--muted); letter-spacing:.02em;
}
.editor-row{
  display:grid; gap:8px; align-items:center;
  padding:8px 10px; border-bottom:1px solid var(--line);
  min-width:0;
}
.editor-row:last-child{ border-bottom:0; }
.editor-row input{ height:30px; font-size:13px; }
.editor-row .row-del{
  width:28px; height:28px; border-radius:3px; color: var(--muted-2);
  display:flex; align-items:center; justify-content:center;
}
.editor-row .row-del:hover{ background: var(--bad-wash); color: var(--bad); }
.editor-row .share{
  font-size:12px; color: var(--muted); white-space:nowrap;
  font-variant-numeric: tabular-nums;
}
/* 三种列布局 */
.component-table.resins .component-head,
.component-table.resins .editor-row{ grid-template-columns: minmax(0,1fr) 88px 88px 32px; }
.component-table.additives .component-head,
.component-table.additives .editor-row{ grid-template-columns: minmax(0,1fr) 88px 72px 32px; }
.component-table.curings .component-head,
.component-table.curings .editor-row{ grid-template-columns: minmax(0,1fr) 78px 78px 112px 32px; }
.component-table .col-num{ text-align:right; }

.editor-empty{
  padding:14px; text-align:center;
  font-size:12.5px; color: var(--muted-2);
}
.editor-preview{
  font-size:12.5px; line-height:1.65; color: var(--muted);
  overflow-wrap:anywhere; min-width:0;
}
.editor-preview.is-invalid{ color: var(--bad); }

.template-pickers{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; }

.mobile .recipe-editor-context{ position:sticky; top:var(--mobile-editor-top,60px); z-index:20; background:var(--surface); margin:-14px -14px 0; padding:10px 14px 0; border-bottom:1px solid var(--line); }
.mobile .recipe-editor-name{ display:block; font-family:var(--serif); font-size:16px; line-height:1.5; overflow-wrap:anywhere; max-height:3em; overflow-y:auto; }
.mobile .recipe-editor-context .editor-preview{ margin-top:3px; font-size:12px; }
.mobile .recipe-editor-context .tabs{ margin-top:6px; border-bottom:0; }
.mobile .recipe-editor-context .tabs > button{ flex:1; padding:8px 5px; font-size:12px; }
.mobile .recipe-editor-context .tabs .num{ margin-left:3px; }
.mobile .recipe-editor-overview{ display:flex; flex-direction:column; gap:18px; }
.mobile .editor-overview-group{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.mobile .editor-overview-heading{ display:flex; justify-content:space-between; align-items:center; gap:10px; border-bottom:1px solid var(--line-2); padding-bottom:6px; }
.mobile .editor-overview-heading h3{ font-family:var(--serif); font-size:14px; }
.mobile .editor-overview-heading button{ padding:5px 10px; color:var(--resin); font-size:12px; }
.mobile .editor-validation{ color:var(--bad); font-size:12px; border:1px solid var(--line); border-radius:var(--r); padding:8px 10px; }
.mobile .editor-validation summary{ cursor:pointer; }
.mobile .editor-validation ul{ display:flex; flex-direction:column; gap:5px; padding-top:8px; }
.mobile .editor-cancel{ width:44px; font-size:13px; }
.mobile .recipe-editor .edit-card.expanded{ scroll-margin-top:calc(var(--mobile-editor-top,60px) + var(--mobile-editor-context-height,120px) + 12px); }
@media (max-height:420px){
  .mobile .app[data-view="edit"] .topbar{ padding-top:4px; padding-bottom:4px; }
  .mobile .app[data-view="edit"] .top-title span{ display:none; }
  .mobile .app[data-view="edit"] .topbar .icon-btn{ height:30px; }
  .mobile .recipe-editor-context{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:10px; padding-top:5px; }
  .mobile .recipe-editor-name{ font-size:13px; max-height:1.5em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mobile .recipe-editor-context .editor-preview{ font-size:11px; margin:0; }
  .mobile .recipe-editor-context .tabs{ grid-column:1 / -1; margin-top:2px; }
  .mobile .recipe-editor-context .tabs > button{ padding:5px; }
  .mobile .app[data-view="edit"] > .two{ padding-top:6px; padding-bottom:6px; }
  .mobile .app[data-view="edit"] > .two .btn{ height:34px; }
}

/* Spacious recipe workspace: context and actions stay visible while materials scroll. */
.recipe-editor-open{ overflow:hidden; }
#modalBackdrop{ padding:16px; }
#recipeForm{ width:100%; max-width:1800px; height:calc(100dvh - 32px); max-height:calc(100dvh - 32px); overflow:hidden; }
.recipe-editor .modal-head, .recipe-editor .modal-foot, .editor-nav{ flex-shrink:0; }
.recipe-editor .modal-head{ align-items:center; padding:14px 22px; }
.editor-heading{ display:flex; align-items:baseline; gap:20px; min-width:0; }
.editor-heading h2{ flex:none; font-size:16px; color:var(--muted); }
#editorContextName{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:20px; font-family:var(--serif); font-weight:600; }
.editor-head-meta{ flex:none; text-align:right; font-size:12px; color:var(--muted); }
.editor-head-meta p{ font-size:11.5px; }
.editor-nav{ display:flex; flex-wrap:wrap; gap:8px; padding:9px 22px; border-bottom:1px solid var(--line); background:var(--sunk); }
.editor-nav button{ padding:5px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); font-size:12.5px; }
.editor-nav button:hover{ border-color:var(--resin); color:var(--resin); }
.editor-nav .num{ padding-left:6px; color:var(--resin); }
.recipe-editor .editor-workspace{ flex:1; min-height:0; display:grid; grid-template-columns:250px minmax(0,1fr); gap:0; padding:0; overflow:hidden; }
.editor-info{ padding:22px; display:flex; flex-direction:column; gap:18px; min-width:0; overflow-y:auto; border-right:1px solid var(--line); background:var(--sunk); }
.editor-info h3{ font-family:var(--serif); font-size:15px; }
.editor-info textarea{ min-height:160px; resize:vertical; }
.editor-help{ color:var(--muted); font-size:12px; line-height:1.8; }
.editor-sections{ min-width:0; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:20px; display:grid; grid-template-columns:minmax(0,1fr); gap:22px; align-content:start; scroll-padding-top:20px; }
.recipe-editor .editor-block{ align-self:start; gap:12px; }
.recipe-editor .editor-block-head{ border-bottom:2px solid var(--line-2); padding-bottom:10px; }
.editor-group-mark{ display:inline-flex; align-items:center; justify-content:center; width:25px; height:25px; background:var(--resin-wash); color:var(--resin); border-radius:3px; font:600 13px var(--sans); }
.editor-curings .editor-group-mark{ background:var(--ink); color:var(--on-ink); }
.recipe-editor .editor-template{ gap:5px; }
.recipe-editor .component-head{ gap:8px; }
.recipe-editor .component-table{ overflow:visible; }
.recipe-editor .component-head{ position:sticky; top:0; z-index:1; border-radius:var(--r) var(--r) 0 0; }
.recipe-editor .editor-row{ padding:8px; }
.recipe-editor .component-head{ padding:8px; }
.recipe-editor .editor-row input{ height:36px; }
.editor-cell{ display:block; min-width:0; }
.editor-cell-label{ display:none; }
.recipe-editor .component-table.curings .component-head,
.recipe-editor .component-table.curings .editor-row{ grid-template-columns:minmax(110px,1fr) 66px 66px 74px 28px; }
.recipe-editor .editor-row .share{ font-size:11px; }
.recipe-editor .modal-foot{ padding:12px 22px; }
.recipe-editor #editorPreview{ max-height:66px; overflow-y:auto; }
@media (min-width:1280px){
  .editor-sections{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto 1fr; }
  .editor-resins{ grid-column:1; grid-row:1; }
  .editor-additives{ grid-column:1; grid-row:2; }
  .editor-curings{ grid-column:2; grid-row:1 / span 2; }
}
@media (max-width:900px){
  #modalBackdrop{ padding:0; }
  #recipeForm{ height:100dvh; max-height:100dvh; border:0; border-radius:0; }
  .editor-heading{ gap:6px; flex-direction:column; align-items:stretch; }
  #editorContextName{ font-size:17px; }
  .recipe-editor .modal-head{ padding:10px 16px; }
  .editor-head-meta p{ display:none; }
  .editor-nav{ padding:8px 16px; }
  .recipe-editor .editor-workspace{ display:block; overflow-y:auto; overscroll-behavior:contain; }
  .editor-info{ overflow:visible; border-right:0; border-bottom:1px solid var(--line); padding:16px; gap:12px; }
  .editor-info textarea{ min-height:80px; }
  .editor-help{ display:none; }
  .editor-sections{ overflow:visible; padding:16px; }
  .recipe-editor .modal-foot{ padding:10px 16px; gap:10px; }
}
@media (max-width:600px){
  .recipe-editor .modal-head h2{ font-size:12px; }
  .editor-head-meta{ font-size:11px; }
  .editor-nav{ gap:5px; padding:7px 12px; }
  .editor-nav button{ padding:5px 7px; font-size:11px; }
  .recipe-editor .component-head{ display:none; }
  .recipe-editor .component-table .editor-row,
  .recipe-editor .component-table.curings .editor-row{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) 32px; gap:8px; }
  .recipe-editor .editor-row > .editor-cell:first-child{ grid-column:1 / 3; }
  .recipe-editor .editor-cell-label{ display:block; font-size:11px; color:var(--muted); margin-bottom:3px; }
  .recipe-editor .editor-row .row-del{ grid-column:3; grid-row:1; }
  .recipe-editor .editor-row .share{ grid-column:1 / -1; }
  .recipe-editor .editor-row input{ height:40px; }
  .recipe-editor .modal-foot #editorPreview{ order:-1; flex-basis:100%; max-height:42px; font-size:11.5px; }
  .recipe-editor .modal-foot #saveBtn{ margin-left:auto; }
}
@media (max-height:500px){
  .recipe-editor .modal-head{ padding:6px 14px; }
  .editor-heading{ flex-direction:row; align-items:baseline; }
  .editor-head-meta p{ display:none; }
  .editor-nav{ padding:5px 14px; }
  .recipe-editor .modal-foot{ padding:6px 14px; }
  .recipe-editor #editorPreview{ max-height:38px; }
}

/* ================================================== 桌面：材料模板库页 */
.templates-page{ background: var(--ground); }
.templates-page .header{
  position:sticky; top:0; z-index:30;
  height: var(--bar-h);
  background: var(--ink); color: var(--on-ink);
  display:flex; align-items:center;
  box-shadow:0 1px 0 rgba(0,0,0,.35);
}
.templates-page .page{
  width:100%; max-width:1180px; margin:0 auto;
  padding:24px 28px 72px;
  display:flex; flex-direction:column; gap:18px;
  min-width:0;
}
.templates-page .intro{
  font-size:13px; line-height:1.75; color: var(--muted); max-width:70ch;
}
.templates-page .layout{
  display:grid; grid-template-columns: minmax(0,1fr) 340px; gap:20px;
  align-items:start;
}
.panel{
  background: var(--surface);
  border:1px solid var(--line-2); border-radius:6px;
  overflow:hidden; min-width:0;
}
.panel-head{
  padding:13px 18px; border-bottom:1px solid var(--line);
  background: var(--surface);
}
.panel-head h2, .panel-head h3{
  font-family: var(--serif); font-size:15px; font-weight:600; letter-spacing:.03em;
}
.panel-body{ padding:18px; min-width:0; }
form.panel-body{ display:flex; flex-direction:column; gap:12px; }
form.panel-body .form-actions{ display:flex; gap:8px; justify-content:flex-end; padding-top:4px; }

.table-wrap{ position:relative; overflow-x:auto; }
.template-table{
  width:100%; border-collapse:collapse; font-size:13px;
}
.template-table th{
  text-align:left; padding:0 12px 8px 0;
  border-bottom:1.5px solid var(--text);
  font-size:11.5px; font-weight:500; color: var(--muted); letter-spacing:.04em;
  white-space:nowrap;
}
.template-table th.num, .template-table td.num{ text-align:right; padding-right:16px; }
.template-table td{
  padding:10px 12px 10px 0; border-bottom:1px solid var(--line);
  vertical-align:top; overflow-wrap:anywhere;
}
.template-table td strong{ font-weight:500; }
.template-table td.note-cell{ color: var(--muted); font-size:12.5px; max-width:30ch; }
.template-table td.actions{ text-align:right; white-space:nowrap; padding-right:0; }
.template-table td.actions > div{ display:inline-flex; gap:6px; }
.template-table tr:last-child td{ border-bottom:0; }

/* ======================================================= 手机：整体外壳 */
.mobile .app{
  display:flex; flex-direction:column;
  min-height:100vh;
  background: var(--surface);
  max-width:430px; margin:0 auto;
  border-left:1px solid var(--line); border-right:1px solid var(--line);
}
.mobile{ background: var(--ground); }

.topbar{
  position:sticky; top:0; z-index:30; flex:none;
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  background: var(--ink); color: var(--on-ink);
  min-width:0;
}
.topbar .icon-btn{ color: var(--on-ink-dim); }
.topbar .icon-btn:hover{ background: var(--ink-3); color:#F2F0EB; }
.top-title{
  flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;
  text-align:center;
}
.top-title strong{
  font-family: var(--serif); font-size:15px; font-weight:600;
  line-height:1.3; color:#F2F0EB;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.top-title span{ font-size:11px; color:#8E8B85; }

.content{
  flex:1; min-width:0;
  padding:14px 14px 78px;
  display:flex; flex-direction:column; gap:14px;
}
.content.no-bottom{ padding-bottom:64px; }  /* 给底部同步状态条留位 */
.stack{ display:flex; flex-direction:column; gap:10px; min-width:0; }

.card{
  background: var(--surface);
  border:1px solid var(--line); border-radius:5px;
  padding:12px 14px; min-width:0;
}

/* 底部主操作区 */
.two, .three{
  position:sticky; bottom:0; z-index:25; flex:none;
  display:grid; gap:8px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top:1px solid var(--line);
}
.two{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.three{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.two .btn, .three .btn{ height:40px; font-size:14px; }

/* 底部导航 */
.mobile-nav{
  position:sticky; bottom:0; z-index:25; flex:none;
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  background: var(--surface); border-top:1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav-btn{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 4px; font-size:11.5px; color: var(--muted);
}
.nav-btn.active{ color: var(--resin); font-weight:600; }

/* --- 手机：配方列表 ---------------------------------------------------- */
.data-tools{ display:flex; gap:8px; }
.data-tools button{
  flex:1; min-width:0; height:30px; border-radius: var(--r);
  border:1px solid var(--line-2); background: var(--surface);
  font-size:12.5px; color: var(--muted);
}
.data-tools button:hover{ background: var(--sunk); color: var(--text); }

.recipe-card.card{
  position:relative; display:flex; align-items:flex-start; gap:6px;
  padding:0; border-bottom:1px solid var(--line);
  border-radius:5px;
}
.recipe-card.card.pinned::before{ background: var(--resin); }
.recipe-card-tap{
  flex:1; min-width:0; text-align:left;
  padding:12px 4px 12px 14px;
  display:flex; flex-direction:column; gap:5px;
}
.recipe-card .note{
  font-size:12.5px; line-height:1.65; color: var(--muted);
  white-space:pre-line; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ratio-line{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ratio-line span:last-child{ font-weight:600; color: var(--text); }
.recipe-card.pinned .ratio-line span:last-child{ color: var(--resin); }
.recipe-more{
  flex:none; width:38px; align-self:stretch;
  display:flex; align-items:center; justify-content:center;
  color: var(--muted-2); border-left:1px solid var(--line);
}
.recipe-more:hover{ background: var(--sunk); color: var(--text); }

/* --- 手机：详情 -------------------------------------------------------- */
.detail-stack{ gap:12px; }
/* 配方名放在正文里完整换行；顶栏只放「配方详情」，长名称不会被省略号吃掉 */
.m-title{
  font-family: var(--serif);
  font-size:20px; font-weight:600; line-height:1.4;
  letter-spacing:.01em; overflow-wrap:anywhere; text-wrap:balance;
  display:flex; align-items:flex-start; flex-wrap:wrap; gap:6px;
}
.info-block{ display:flex; flex-direction:column; }
.info-card{ display:flex; flex-direction:column; gap:14px; }
.info-card.collapsed{ max-height:238px; overflow:hidden; position:relative; }
.info-card.collapsed::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:44px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--surface));
  pointer-events:none;
}
.info-section{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.info-label{
  font-size:11px; font-weight:600; letter-spacing:.08em; color: var(--muted);
}
.info-note{
  font-size:13px; line-height:1.7; color: var(--text);
  white-space:pre-line; overflow-wrap:anywhere;
}
.info-components-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
.info-list{ display:flex; flex-direction:column; gap:7px; }
.info-list li{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.info-list strong{ font-size:13px; font-weight:500; overflow-wrap:anywhere; }
.info-list small{ font-size:11.5px; color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap:anywhere; }
.info-toggle{
  align-self:center; margin-top:-1px;
  padding:7px 14px; border:1px solid var(--line); border-top:0;
  border-radius:0 0 var(--r) var(--r);
  background: var(--surface);
  font-size:12px; color: var(--muted);
}
.info-toggle:hover{ color: var(--text); background: var(--sunk); }

.ratio-strip{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  background: var(--sunk); border-color: var(--line-2);
}
.ratio-strip-label{ font-size:12px; color: var(--muted); }
.ratio-strip-value{ font-size:17px; font-weight:600; letter-spacing:.03em; }

.weigh-bar{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  border:1px solid var(--line-2); border-radius:5px; overflow:hidden;
  background: var(--sunk);
}
.weigh-bar-cell{
  padding:10px 12px; min-width:0;
  display:flex; flex-direction:column; gap:3px;
}
.weigh-bar-cell + .weigh-bar-cell{ border-left:1px solid var(--line-2); }
.weigh-bar-cell small{ font-size:11px; color: var(--muted); }
.weigh-bar-cell.editable{ background: var(--surface); }
.weigh-bar-input{
  width:100%; min-width:0; height:34px; padding:0;
  border:0; background:none; border-radius:0;
  font-size:22px; font-weight:600; letter-spacing:.01em;
}
.weigh-bar-input:focus{ outline:none; box-shadow:none; border:0; }
.weigh-bar-cell.editable{ box-shadow: inset 0 -2px 0 var(--resin); }
.weigh-bar-cell.editable.invalid{ box-shadow: inset 0 -2px 0 var(--bad); }
.weigh-bar-value{
  font-size:22px; font-weight:600; letter-spacing:.01em; color: var(--resin);
  line-height:34px;
}
.weigh-bar-value.is-invalid{ color: var(--muted-2); }

.item-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:7px 0; border-bottom:1px solid var(--line); min-width:0;
}
.item-row:last-child{ border-bottom:0; }
.item-row span{ font-size:13px; overflow-wrap:anywhere; min-width:0; }
.item-row strong{ font-size:15px; font-weight:600; white-space:nowrap; }
.card > h3{
  font-family: var(--serif); font-size:13.5px; font-weight:600;
  letter-spacing:.03em; margin-bottom:6px;
}

.weigh-quick{ display:flex; flex-wrap:wrap; gap:6px; }
.weigh-quick button{
  height:30px; padding:0 12px; border-radius:3px;
  border:1px solid var(--line-2); background: var(--surface);
  font-size:12.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.weigh-quick button.active{
  background: var(--resin-wash); border-color: var(--resin); color: var(--resin); font-weight:600;
}

/* --- 手机：编辑 -------------------------------------------------------- */
.content.editor{ gap:12px; }
.ingredient-summary{
  display:flex; flex-direction:column; gap:4px; width:100%;
  padding:11px 13px; text-align:left;
  background: var(--surface);
  border:1px solid var(--line); border-radius:5px;
  min-width:0;
}
.ingredient-summary:hover{ background: var(--sunk); }
.ingredient-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-width:0;
}
.ingredient-head strong{ font-size:13.5px; font-weight:500; overflow-wrap:anywhere; min-width:0; }
.chev{ flex:none; color: var(--muted-2); font-size:15px; line-height:1; }
.ingredient-meta{
  font-size:11.5px; color: var(--muted); font-variant-numeric: tabular-nums;
  overflow-wrap:anywhere;
}

.edit-card{
  border:1px solid var(--line-2); border-radius:5px;
  background: var(--surface); min-width:0;
}
.edit-card.expanded{ border-color: var(--resin-2); box-shadow:0 0 0 3px rgba(154,85,24,.08); }
.edit-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 13px; border-bottom:1px solid var(--line);
  font-size:12px; font-weight:600; letter-spacing:.04em; color: var(--muted);
}
.edit-body{ padding:13px; display:flex; flex-direction:column; gap:11px; }
.edit-body .row2{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
.collapse-btn{
  font-size:12px; color: var(--resin); font-weight:500; flex:none;
  padding:7px 8px; margin:-7px -8px;   /* 视觉不变，触控目标补到 32px */
}

.template-card{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 13px;
  border:1px solid var(--line); border-radius:5px; background: var(--surface);
  min-width:0;
}
.template-name{ font-size:13.5px; font-weight:500; overflow-wrap:anywhere; min-width:0; }
.template-meta{ font-size:11.5px; color: var(--muted); white-space:nowrap; flex:none; }

/* 手机底部动作面板 */
.sheet-backdrop{ align-items:flex-end; padding:0; }
.sheet{
  width:100%; max-width:430px; margin:0 auto;
  background: var(--surface);
  border-radius:10px 10px 0 0;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; gap:10px;
  box-shadow:0 -10px 34px rgba(0,0,0,.24);
}
.sheet-title{
  font-family: var(--serif); font-size:15px; font-weight:600;
  overflow-wrap:anywhere;
}
.sheet-copy{ font-size:13px; line-height:1.7; color: var(--muted); overflow-wrap:anywhere; }
.sheet > button{
  height:44px; border-radius: var(--r);
  border:1px solid var(--line-2); background: var(--surface);
  font-size:14.5px; font-weight:500;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.sheet > button:hover{ background: var(--sunk); }
.sheet > button.danger{ color: var(--bad); border-color:#DFC4BF; }
.sheet > button.danger:hover{ background: var(--bad-wash); }
.sheet > button.cancel{ border-color: transparent; background: var(--sunk); color: var(--muted); }

/* 手机端 toast 不被底部操作区遮住 */
.mobile .toast{ bottom:86px; }
.mobile .sync-notice{ max-width:430px; margin:0 auto; }

/* ====================================================== 打印结果参考页 */
.print-page{ background: var(--ground); padding:26px 16px; }
.print-page .sheet{
  max-width:820px; margin:0 auto;
  background: var(--surface);
  border:1px solid var(--line-2); border-radius:0;
  padding:52px 56px;
  display:flex; flex-direction:column; gap:16px;
  box-shadow:0 2px 14px rgba(0,0,0,.07);
}
.print-page .subtitle{
  font-size:11px; letter-spacing:.14em; color: var(--muted-2);
}
.print-page h1{
  font-family: var(--serif); font-size:23px; font-weight:600; line-height:1.4;
  overflow-wrap:anywhere; padding-bottom:12px; border-bottom:1.5px solid var(--text);
}
.print-page h2{
  font-family: var(--serif); font-size:14px; font-weight:600;
  letter-spacing:.05em; margin-top:8px;
}
.print-page p{ font-size:13px; line-height:1.75; }
.print-page .note{
  font-size:12.5px; line-height:1.8; color: var(--muted);
  white-space:pre-line; overflow-wrap:anywhere;
}
.print-page table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.print-page th{
  text-align:left; padding:0 10px 6px 0;
  border-bottom:1px solid var(--text);
  font-size:11px; font-weight:500; color: var(--muted); letter-spacing:.04em;
}
.print-page td{ padding:7px 10px 7px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.print-page th.num, .print-page td.num{ text-align:right; padding-right:0; }
.print-page .footer{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px;
  font-size:11px; color: var(--muted-2);
}
.print-page .page-break{
  text-align:center; font-size:11px; letter-spacing:.12em; color: var(--muted-2);
  padding:10px 0;
}

@media print{
  .print-page{ background:none; padding:0; }
  .print-page .sheet{ border:0; box-shadow:none; padding:0; max-width:none; }
  .no-print{ display:none !important; }
}

/* ================================================== 反馈组件目录（c05） */
.catalog-page{ background: var(--ground); padding:26px 16px 60px; }
.catalog-page .sheet{
  max-width:880px; margin:0 auto;
  background: var(--surface);
  border:1px solid var(--line-2); border-radius:6px;
  padding:34px 38px;
  display:flex; flex-direction:column; gap:14px;
}
.catalog-page h1{ font-family: var(--serif); font-size:22px; font-weight:600; }
.catalog-page h2{
  font-family: var(--serif); font-size:15px; font-weight:600;
  letter-spacing:.03em; margin-top:14px;
  padding-bottom:7px; border-bottom:1px solid var(--line);
}
.catalog-page p{ font-size:13px; line-height:1.75; color: var(--muted); }
.catalog-page .subtitle{ font-size:11px; letter-spacing:.14em; color: var(--muted-2); }
.status-row{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius: var(--r);
  border:1px solid var(--line); background: var(--sunk);
  font-size:12.5px; min-width:0;
}
.status-row .label{ margin-left:auto; flex:none; font-size:11px; color: var(--muted-2); }
.catalog-page ul.plain{ display:flex; flex-direction:column; gap:7px; }
.catalog-page ul.plain li{
  font-size:13px; line-height:1.7; padding-left:14px; position:relative;
  overflow-wrap:anywhere;
}
.catalog-page ul.plain li::before{
  content:""; position:absolute; left:0; top:9px;
  width:4px; height:4px; border-radius:50%; background: var(--line-2);
}

/* ===================================================== 无障碍 / 窄桌面 */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (max-width: 1180px){
  .sheet-frame{ grid-template-columns: 266px minmax(0,1fr); }
  .detail-layout{ padding:22px 24px 52px; }
  .ingredient-grid{ grid-template-columns: minmax(0,1fr); gap:22px; }
  .weigh-grid{ grid-template-columns: minmax(0,1fr); }
  .weigh-in{ border-right:0; border-bottom:1px solid var(--line); }
  .templates-page .layout{ grid-template-columns: minmax(0,1fr); }
  .template-pickers{ grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 900px){
  .desktop-app .shell{ padding:14px 14px 0; }
  .sheet-frame{ grid-template-columns: minmax(0,1fr); }
  .sidebar{ position:static; max-height:none; border-right:0; border-bottom:1px solid var(--line); }
  .rail-list{ max-height:320px; }
  .header-inner, .app-footer .footer-inner{ padding:0 14px; }
}

@media (max-width: 600px){
  .desktop-app .header, .templates-page .header{ height:auto; min-height:var(--bar-h); padding:8px 0; }
  .header-inner{ flex-wrap:wrap; gap:4px 12px; }
  .header-inner .brand{ width:100%; }
  .header-nav{ width:100%; margin-left:0; flex-wrap:wrap; gap:4px; }
  .header-nav button, .header-nav a{ padding:6px 8px; }
  .header-sep{ display:none; }
  .templates-page .page{ padding:18px 14px 72px; }
  .templates-page .template-table{ min-width:560px; }
  .templates-page .table-wrap::before{ content:"左右滑动查看完整表格"; display:block; padding-bottom:10px; font-size:12px; color:var(--muted); }
}

/* Runtime states and native dialogs used by the working application. */
.hidden, [hidden]{ display:none !important; }
.templates-page .toast:not(.show){ display:none; }
dialog.sync-dialog{ padding:0; margin:auto; color:var(--text); }
dialog.sync-dialog:not([open]){ display:none; }
dialog.sync-dialog::backdrop{ background:rgba(22,24,26,.46); }
.pdf-options-dialog > form{ display:flex; flex-direction:column; min-height:0; max-height:inherit; }
.pdf-options-dialog .modal-body{ flex:1; min-height:0; }
.pdf-options-dialog .modal-head,.pdf-options-dialog .modal-foot{ flex-shrink:0; }
.sync-detail{ font-size:13px; line-height:1.75; color:var(--muted); }
.sync-actions .btn{ height:auto; min-height:32px; white-space:normal; text-align:left; }
.sync-notice[data-state="offline"]{ background:#3A3020; color:#E4CDA4; }
.sync-notice[data-state="conflict"]{ background:#3B2320; color:#E9C3BC; }
[data-state="pending"] .cloud-status-dot{ background:var(--warn); }
[data-state="offline"] .cloud-status-dot{ background:var(--muted-2); }
[data-state="conflict"] .cloud-status-dot{ background:var(--bad); }
.sync-inline [data-sync-message]{ min-width:0; overflow-wrap:anywhere; }
.sync-inline .footer-sync{ flex:none; margin-left:auto; font-size:12px; color:#E8C9A4; border:1px solid #3A3E42; border-radius:3px; padding:2px 8px; }
.sync-inline .footer-sync:hover{ background:var(--ink-3); }
.desktop-app .app-footer{ height:auto; min-height:var(--foot-h); padding:3px 0; }
.sync-inline[data-state="conflict"] [data-sync-message]{ color:#E9C3BC; }
.sync-inline[data-state="offline"] [data-sync-message]{ color:#E4CDA4; }