/* ============================================================
   吃好喝好 · Modernist × 九峰 皮肤层（2026-07-23 UI 方向切换）
   依赖：design-modernist/reference/modernist-base.css 先加载
   本文件 = 九峰色板 :root 覆盖（照搬交接包权威值）+ 应用级组件
   铁律：零圆角；2px 粗分隔线；危险用 --warn 不用 accent；
        判断位无 IP（本方向检疫犬整体不进主线）
   ============================================================ */
:root{
  --color-bg:#F6FAFE; --color-surface:#ECF3FB; --color-text:#21323F;
  --color-accent:#1779C9; --color-accent-600:#12639F; --color-accent-700:#0F547F;
  --color-accent-100:#E4F1FF; --color-accent-800:#0F4E7C;
  --color-divider:color-mix(in srgb,#21323F 32%,transparent);
  --warn:#D6452B;
}
.tag.ok{background:#DFF3E4;color:#157A3C;}
.tag.warn{background:#FFF0C2;color:#7A5B00;}
.tag.avoid{background:#FADFD9;color:#B23A22;}
.tag.caution{background:#FCE8D2;color:#8A4B12;}   /* 第五态·琥珀·区别于warn的bell黄 */

html,body{margin:0;background:#E8EEF5;}
.screen{max-width:402px;margin:0 auto;min-height:100dvh;background:var(--color-bg);
  display:flex;flex-direction:column;position:relative;}

/* 拍照解析大色块（accent 底白字，交接包 home 语汇） */
.scanbar{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--color-accent);color:var(--color-bg);border:0;padding:14px var(--space-4);}
.scanbar:hover{background:var(--color-accent-600);}
.scanbar:active{background:var(--color-accent-700);}
.scanbar:disabled{opacity:.75;cursor:wait;}
.scanbar b{display:block;font-family:var(--font-heading);font-weight:800;font-size:19px;line-height:1.25;}
.scanbar i{display:block;font-style:normal;font-size:12px;opacity:.82;margin-top:2px;}
.instant-note{margin:0 var(--space-4);margin-top:var(--space-4);padding:9px 12px;font-size:12.5px;
  background:#FCE8D2;color:#8A4B12;border:1px solid #E0B98A;font-family:var(--font-heading);font-weight:600;}

/* 拍照篮 */
.tray{border-bottom:2px solid var(--color-divider);background:var(--color-surface);padding:12px var(--space-4);}
.tray-thumbs{display:flex;gap:8px;}
.tray-thumb{position:relative;width:64px;height:64px;border:1px solid var(--color-divider);background:var(--color-bg);}
.tray-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.tray-thumb .del{position:absolute;top:-1px;right:-1px;width:20px;height:20px;border:1px solid var(--color-divider);
  background:var(--color-bg);color:var(--color-text);font-size:11px;line-height:1;cursor:pointer;}
.tray-thumb .lab{position:absolute;left:0;bottom:0;right:0;font-size:9px;text-align:center;
  background:color-mix(in srgb,var(--color-text) 65%,transparent);color:var(--color-bg);padding:1px 0;}
.tray-hint{font-size:12px;margin:9px 0;color:var(--color-text);opacity:.75;line-height:1.6;}
.tray-acts{display:flex;gap:8px;}
.tray-acts .btn{flex:1;justify-content:center;font-size:13px;padding:10px 4px;}

/* 产品切换条（演示用：真实App此处是扫描历史） */
.swbar{display:flex;gap:0;overflow-x:auto;border-bottom:2px solid var(--color-divider);scrollbar-width:none;}
.swbar::-webkit-scrollbar{display:none;}
.swtab{flex:none;font-family:var(--font-heading);font-weight:600;font-size:13px;padding:10px 14px;
  background:none;border:0;border-top:2px solid transparent;color:var(--color-text);cursor:pointer;white-space:nowrap;}
.swtab.on{color:var(--color-accent);border-top-color:var(--color-accent);background:var(--color-surface);}

/* 结果页区块 */
.pad{padding:0 var(--space-4);}
.claims{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.sec-kicker{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent);
  font-family:var(--font-heading);font-weight:800;margin:0 0 var(--space-2);}
.sec-kicker.danger{color:var(--warn);}
.vbody{font-size:14px;line-height:1.65;margin:0;}
.vbody b{font-weight:800;}
.redline-box{border:2px solid var(--warn);padding:var(--space-3) var(--space-4);margin:0 var(--space-4);}
.redline-box h4{margin:0 0 var(--space-2);color:var(--warn);}
details.drill{border-top:1px solid var(--color-divider);margin-top:var(--space-3);}
details.drill summary{cursor:pointer;list-style:none;font-size:13px;color:var(--color-accent);
  font-family:var(--font-heading);font-weight:600;padding:8px 0;}
details.drill summary::-webkit-details-marker{display:none;}
details.drill summary::after{content:" +";font-weight:800;}
details.drill[open] summary::after{content:" −";}
.cite{display:block;font-size:11px;opacity:.55;margin-top:6px;}
details.panel{border-top:2px solid var(--color-divider);padding:0 var(--space-4);}
details.panel:last-of-type{border-bottom:2px solid var(--color-divider);}
details.panel summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:10px;padding:13px 0;}
details.panel summary::-webkit-details-marker{display:none;}
details.panel summary b{font-family:var(--font-heading);font-weight:800;font-size:15px;}
details.panel summary span{font-size:12px;opacity:.55;flex:1;}
details.panel summary::after{content:"+";font-family:var(--font-heading);font-weight:800;color:var(--color-accent);}
details.panel[open] summary::after{content:"−";}
.pbody{padding:0 0 var(--space-4);font-size:14px;line-height:1.65;}
.pbody p{margin:0 0 var(--space-2);}
.ings{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--space-2);}
.footnote{font-size:12px;line-height:1.6;opacity:.6;}

/* 底部记录+分享 dock */
.dock{position:sticky;bottom:0;display:flex;align-items:center;gap:8px;
  padding:12px var(--space-4) calc(12px + env(safe-area-inset-bottom));
  background:var(--color-bg);border-top:2px solid var(--color-divider);}
.dock .logtxt{flex:1;min-width:0;}
.dock .logtxt b{display:block;font-family:var(--font-heading);font-weight:800;font-size:12.5px;}
.dock .logtxt a{font-size:11.5px;color:var(--color-accent);text-decoration:none;}
.chip{font-family:var(--font-heading);font-weight:600;font-size:13px;padding:8px 12px;cursor:pointer;
  background:var(--color-bg);border:1px solid var(--color-divider);color:var(--color-text);white-space:nowrap;}
.chip.on{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg);}

/* 分享弹层 */
.smask{position:fixed;inset:0;z-index:60;background:color-mix(in srgb,#21323F 45%,transparent);
  display:none;align-items:flex-end;justify-content:center;}
.smask.open{display:flex;}
.sheet{width:100%;max-width:402px;max-height:88dvh;overflow-y:auto;background:var(--color-bg);
  border-top:2px solid var(--color-text);padding:var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));}
.sheet h4{margin:0 0 var(--space-3);display:flex;justify-content:space-between;align-items:center;}
.sheet .x{width:32px;height:32px;border:1px solid var(--color-divider);background:var(--color-bg);
  cursor:pointer;font-size:14px;color:var(--color-text);}
.pimg{display:block;width:100%;border:1px solid var(--color-divider);background:var(--color-surface);min-height:200px;}
.srow{display:flex;gap:8px;margin-top:var(--space-3);}
.srow .btn{flex:1;justify-content:center;font-size:13px;padding-inline:6px;}
.shint{margin-top:var(--space-3);font-size:12px;line-height:1.7;background:var(--color-surface);
  border:1px solid var(--color-divider);padding:10px 12px;}
.shint b{font-weight:800;}

/* 日记页 */
.stats{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:2px solid var(--color-divider);
  border-bottom:2px solid var(--color-divider);}
.stat{padding:12px 14px;}
.stat + .stat{border-left:1px solid var(--color-divider);}
.stat .v{font-family:var(--font-heading);font-weight:800;font-size:26px;font-variant-numeric:tabular-nums;}
.stat .k{font-size:11.5px;opacity:.6;}
.wk-bar{display:flex;height:12px;border:1px solid var(--color-divider);}
.wk-bar i{display:block;height:100%;}
.b-ok{background:#157A3C;}.b-info{background:#1779C9;}.b-warn{background:#C89B00;}.b-bad{background:#D6452B;}.b-caution{background:#C97B2A;}
.wk-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:11.5px;opacity:.75;}
.wk-legend i{display:inline-block;width:9px;height:9px;margin-right:4px;}
.day-h{display:flex;align-items:baseline;gap:8px;margin:var(--space-5) 0 var(--space-2);}
.day-h b{font-family:var(--font-heading);font-weight:800;font-size:15px;}
.day-h span{font-size:11.5px;opacity:.55;}
.entry{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--color-divider);}
.entry:last-of-type{border-bottom:1px solid var(--color-divider);}
.st-sq{width:10px;height:10px;flex:none;}
.st-sq.ok{background:#157A3C;}.st-sq.info{background:#1779C9;}.st-sq.warn{background:#C89B00;}.st-sq.bad{background:#D6452B;}.st-sq.caution{background:#C97B2A;}
.e-main{flex:1;min-width:0;}
.e-main a{color:var(--color-text);text-decoration:none;font-family:var(--font-heading);font-weight:600;
  font-size:14.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.e-main .sub{font-size:11.5px;opacity:.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.e-chips{display:flex;gap:6px;}
.e-chips .chip{font-size:12px;padding:6px 10px;}

/* 同类并置行 */
.simrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:var(--color-bg);border:0;border-top:1px solid var(--color-divider);padding:11px 2px;font-family:var(--font-body);}
.simrow:last-of-type{border-bottom:1px solid var(--color-divider);}
.simrow:hover{background:color-mix(in srgb,var(--color-text) 5%,transparent);}
.simname{flex:1;min-width:0;font-size:13.5px;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* 通用 */
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(12px);opacity:0;
  transition:opacity .25s,transform .25s;z-index:70;background:var(--color-text);color:var(--color-bg);
  padding:10px 16px;font-family:var(--font-heading);font-weight:600;font-size:13px;pointer-events:none;white-space:nowrap;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.empty{padding:56px var(--space-4) 40px;}
.empty h3{margin:0 0 var(--space-2);}
.empty p{font-size:14px;opacity:.6;margin:0 0 var(--space-4);}