/* 全站的底子：颜色、字号、留白、圆角只从这里取（原样取自 design/caigou_v1.html）。
   颜色只用 VI 登记色；字号 12/14/16/20/32；留白 4/8/12/16/24/32；圆角 8/12/16。不另发明。 */
:root{
  --rice:#F7F3E9; --olive:#585B3F; --ink:#3E4030; --wood:#C49A6C; --orange:#D98232;
  --sage:#A9AA8C; --walnut:#8A6542; --stone:#D8D3C6; --board:#2F3330;
  /* 三层底色：桌面（侧栏和纸外面）→ 纸（内容都在纸上）→ 能填能选的地方。一层比一层亮，别处不再另起底色 */
  --base:#EFE8D8;        /* 桌面：VI 色彩规范里的材质参考色“本白棉帆布” */
  --paper:var(--rice);   /* 纸：米白 */
  --field:#FFFFFF; --field-line:var(--stone);  /* 能填能选的地方。白色不在 VI 登记色里，等老板定（进度第七节） */
  --tint:rgba(216,211,198,.38);
  --shade:rgba(62,64,48,.10);
  --song:"Songti SC","Source Han Serif SC","Noto Serif CJK SC","STSong","SimSun",serif;
  --hei:-apple-system,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --s4:4px; --s8:8px; --s12:12px; --s16:16px; --s24:24px; --s32:32px;
  --r8:8px; --r12:12px; --r16:16px;
}
body.tone-b{--base:var(--rice);--paper:#FFFFFF}  /* 对比用：桌面米白、纸白。老板定了以后删掉没选的那种和顶上的开关 */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--base);color:var(--ink);font:400 14px/22px var(--hei);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}

/* ---------- 字 ---------- */
.t12{font-size:12px;line-height:18px}
.t14{font-size:14px;line-height:22px}
.t16{font-size:16px;line-height:24px}
.t20{font-size:20px;line-height:28px}
.mute{color:var(--olive)}
.faint{color:var(--sage)}
.strong{font-weight:600}
.page-title{margin:0;font:900 32px/40px var(--song);letter-spacing:.02em}
.sub-title{margin:0;font:900 20px/28px var(--song)}
.big-num{font:700 32px/40px var(--song);font-variant-numeric:tabular-nums}
.mid-num{font:700 20px/28px var(--song);font-variant-numeric:tabular-nums}

/* ---------- 按钮 ---------- */
.btn{height:40px;padding:0 var(--s16);border-radius:var(--r8);font-size:14px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:var(--s8);white-space:nowrap;-webkit-user-select:none;user-select:none}
.btn.primary{background:var(--olive);color:var(--rice)}
.btn.primary:hover{background:var(--ink)}
.btn.plain{color:var(--olive);font-weight:400}
.btn.plain:hover{background:var(--tint)}
.btn.line{border:1px solid var(--stone);background:var(--paper);font-weight:400}
.btn.line:hover{border-color:var(--olive)}
.btn.big{height:52px;font-size:16px;border-radius:var(--r12);padding:0 24px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.5;cursor:default;pointer-events:none}
.btn.busy{opacity:.6;pointer-events:none}
.link{color:var(--olive);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--stone)}
.link:hover{text-decoration-color:var(--olive)}
.x{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r8);flex:none}
.x:hover{background:var(--tint)}

/* ---------- 表单 ---------- */
.field{min-width:0}
.field>label:not(.m-in):not(.check){display:block;font-size:14px;line-height:22px;font-weight:600;color:var(--ink);margin-bottom:var(--s8)}
.lab{display:block;font-size:12px;line-height:18px;color:var(--olive);margin-bottom:var(--s8)}
.req{font-style:normal;color:var(--walnut);margin-left:2px}
.opt{font-style:normal;font-weight:400;font-size:12px;color:var(--olive);margin-left:var(--s8)}
.field .hint{font-size:12px;line-height:18px;color:var(--olive);margin-top:var(--s4)}
.inp{width:100%;height:40px;border:1px solid var(--field-line);border-radius:var(--r8);background:var(--field);padding:0 12px;font-size:16px;outline:0;-webkit-appearance:none;appearance:none;min-width:0}
textarea.inp{height:auto;min-height:72px;padding:8px 12px;line-height:24px;resize:vertical}
.inp:focus{border-color:var(--olive);box-shadow:0 0 0 1px var(--olive)}
.inp::placeholder{color:var(--sage)}
.inp[disabled]{color:var(--olive);background:var(--tint);border-color:var(--stone)}
input[type=date].inp{padding-right:8px}
.sel{position:relative}
.sel::after{content:"";position:absolute;right:14px;top:15px;width:7px;height:7px;border-right:1.5px solid var(--olive);border-bottom:1.5px solid var(--olive);transform:rotate(45deg);pointer-events:none}
.sel select.inp{padding-right:32px;text-overflow:ellipsis}
.unit-inp{position:relative}
.unit-inp .inp{padding-right:44px;text-align:right;font-variant-numeric:tabular-nums}
.unit-inp span{position:absolute;right:12px;top:0;line-height:40px;font-size:14px;color:var(--olive);pointer-events:none}
.seg{display:flex;gap:var(--s8);flex-wrap:wrap}
.seg button{height:40px;padding:0 16px;border:1px solid var(--stone);border-radius:var(--r8);font-size:16px;background:var(--paper)}
.seg button.on{border-color:var(--olive);box-shadow:0 0 0 1px var(--olive) inset;font-weight:600}
.field .seg button{display:inline-flex;align-items:center;gap:var(--s8);padding:0 var(--s16) 0 var(--s12);background:var(--field);border-color:var(--field-line)}
.field .seg button::before{content:"";width:16px;height:16px;border-radius:50%;border:1.5px solid var(--sage);background:var(--field);flex:none}
.field .seg button.on{border-color:var(--olive)}
.field .seg button.on::before{border-color:var(--olive);background:var(--olive);box-shadow:inset 0 0 0 3px var(--field)}
.check{display:inline-flex;align-items:center;gap:var(--s8);min-height:40px;cursor:pointer;font-size:16px;line-height:24px}
.check input{width:20px;height:20px;margin:0;accent-color:var(--olive);flex:none}
.form-grid{display:grid;grid-template-columns:320px 1fr;gap:var(--s24) var(--s32);max-width:920px}
.form-grid .full{grid-column:1/-1}
.acts{display:flex;justify-content:flex-end;align-items:center;gap:var(--s8);margin-top:var(--s32);flex-wrap:wrap}
.stack>*+*{margin-top:var(--s16)}
.stack>div:empty{display:none}
.sheet.form .form-grid{grid-template-columns:minmax(0,1fr);max-width:none;gap:var(--s24)}
.sheet.form .acts{flex-direction:row-reverse;justify-content:flex-end;margin-top:var(--s32);padding-top:var(--s24);border-top:1px solid var(--stone)}
.sheet.form .acts .btn{min-width:112px}
.sheet.form .three{margin-top:var(--s16)}
.sheet.form>.btn.big.wide{margin-top:var(--s32)}
.sheet.form .acts .btn.plain{border:1px solid var(--field-line);color:var(--ink)}
.sec{margin-top:var(--s32);padding-top:var(--s24);border-top:1px solid var(--stone)}
.sec-h{display:flex;align-items:center;gap:var(--s12);margin:0 0 var(--s24);font-size:16px;line-height:24px;font-weight:600}
.sec-h i{font-style:normal;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--olive);display:grid;place-items:center;font-size:12px;line-height:1;flex:none}
.sec-h span{font-size:12px;line-height:18px;font-weight:400;color:var(--olive)}
.sheet.form .stack>*+*{margin-top:var(--s24)}
.sheet.form .stack>.check+.check{margin-top:var(--s4)}
.inp.half{max-width:320px}
.nw{white-space:nowrap}