/* =====================================================================
   Penyet OS · shell.css —— 全站共用样式
   改这里，六个页面同时变。页面自己的样式写在各自的 <style> 里。
   2026-07-29 从 index/inout/items/uom/std/recipe 六页里抽出来的公共部分。
   ===================================================================== */

:root{
  --bg:#f4f6f8; --surface:#fff; --ink:#16181d; --ink2:#5b6270; --ink3:#8c93a1;
  --line:#e2e6eb; --brand:#1f3864; --brand2:#2d4f8f;
  --ok:#1a7f4b; --okbg:#e8f5ee; --warn:#b26a00; --warnbg:#fdf3e2;
  --bad:#b3261e; --badbg:#fdecea; --shadow:0 1px 3px rgba(16,24,40,.08);
  --wrap:860px;                 /* 页面最大宽度。想窄一点：页面里覆盖 --wrap */
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 14px 120px}

/* ---------- 顶栏（由 shell.js 渲染，别在页面里手写） ---------- */
header{background:var(--brand);color:#fff;position:sticky;top:0;z-index:30;
  padding:calc(env(safe-area-inset-top) + 10px) 0 10px;box-shadow:var(--shadow)}
header .wrap{display:flex;align-items:center;gap:10px;padding-bottom:0}
.brand{font-weight:700;font-size:15px;line-height:1.2}
.brand small{display:block;font-weight:400;font-size:11px;opacity:.72}
.sp{flex:1}
.lang{display:flex;background:rgba(255,255,255,.14);border-radius:8px;padding:2px}
.lang button{background:none;border:0;color:#fff;padding:5px 9px;border-radius:6px;
  font-size:11.5px;font-weight:700;cursor:pointer;opacity:.65}
.lang button.on{background:#fff;color:var(--brand);opacity:1}
/* 同时给 <button> 和 <a> 用 —— flex 居中，不然 <a> 里的字符会歪 */
.icobtn{background:rgba(255,255,255,.14);border:0;color:#fff;width:32px;height:32px;
  border-radius:8px;font-size:15px;cursor:pointer;text-decoration:none;flex:none;
  display:flex;align-items:center;justify-content:center;line-height:1;
  font-family:inherit;padding:0}
a.icobtn:hover,button.icobtn:hover{background:rgba(255,255,255,.22)}

/* ---------- 容器与排版 ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:16px;margin:14px 0;box-shadow:var(--shadow)}
h2{font-size:16px;margin-bottom:4px}
/* 分组小标题（首页那种全大写的段落名） */
.sec{font-size:12px;margin:22px 0 10px;color:var(--ink3);
  text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.hint{font-size:13px;color:var(--ink2);margin-bottom:14px;line-height:1.55}
.empty{text-align:center;color:var(--ink3);padding:24px 0;font-size:14px;line-height:1.7}
.foot{text-align:center;font-size:11.5px;color:var(--ink3);margin-top:22px;line-height:1.75}

/* ---------- 表单 ---------- */
label{display:block;font-size:12px;font-weight:700;color:var(--ink2);margin:0 0 5px;
  text-transform:uppercase;letter-spacing:.4px}
input,select,textarea{width:100%;padding:12px 13px;border:1.5px solid var(--line);
  border-radius:10px;font-size:16px;background:#fff;color:var(--ink);font-family:inherit}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand2)}
input:disabled,select:disabled{background:#f6f7f9;color:var(--ink2)}
.fld{margin-bottom:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

button.go{width:100%;padding:16px;border:0;border-radius:12px;background:var(--brand);
  color:#fff;font-size:17px;font-weight:700;cursor:pointer;margin-top:4px}
button.go:disabled{opacity:.45}
button.ghost{background:#fff;color:var(--brand);border:1.5px solid var(--brand)}
button.sm{padding:9px 14px;font-size:14px;width:auto;border-radius:9px}
button.tiny{padding:6px 10px;font-size:12.5px;width:auto;border-radius:8px;font-weight:700;
  background:#fff;color:var(--brand);border:1.5px solid var(--line);cursor:pointer}
button.tiny.on{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ---------- 提示条 ---------- */
.msg{padding:12px 14px;border-radius:10px;font-size:14px;margin:12px 0;display:none;line-height:1.55}
.msg.ok{background:var(--okbg);color:#0f5433;border-left:3px solid var(--ok);display:block}
.msg.err{background:var(--badbg);color:#7a1a13;border-left:3px solid var(--bad);display:block}
.msg.warn{background:var(--warnbg);color:#6b4600;border-left:3px solid var(--warn);display:block}

/* ---------- 搜索式选择器 ---------- */
.pick{position:relative}
.pick .list{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;
  border:1.5px solid var(--line);border-radius:10px;max-height:260px;overflow:auto;
  z-index:20;box-shadow:0 8px 24px rgba(16,24,40,.14);display:none}
.pick .list.open{display:block}
.pick .list div{padding:11px 13px;cursor:pointer;font-size:15px;border-top:1px solid var(--line)}
.pick .list div:first-child{border-top:0}
.pick .list div:active,.pick .list div.hl{background:#eef2f8}
.pick .list .k{font-size:11px;color:var(--ink3);margin-left:6px}
.pick .list .none{color:var(--ink3);font-style:italic;cursor:default}

/* ---------- 横向筛选 chip ---------- */
.chips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:6px 11px;border-radius:99px;border:1.5px solid var(--line);background:#fff;
  font-size:12.5px;font-weight:700;color:var(--ink2);cursor:pointer;white-space:nowrap}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.chip .n{opacity:.6;margin-left:4px;font-weight:600}
.chip.tagonly{cursor:default;background:#eef2f8;border-color:#dbe3ee;color:var(--brand2)}

/* ---------- 小徽章 ---------- */
.warnpill,.okpill{display:inline-block;font-size:10.5px;font-weight:800;
  padding:2px 7px;border-radius:99px;margin-left:6px;vertical-align:1px}
.warnpill{background:var(--warnbg);color:var(--warn)}
.okpill{background:var(--okbg);color:var(--ok)}

/* ---------- 载入转圈 ---------- */
.spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:s .7s linear infinite;vertical-align:-2px}
@keyframes s{to{transform:rotate(360deg)}}