/* 中钦馒头 · 出锅预报看板 —— 共享样式（复刻原型 V2 配色与卡片体系）
 * 麦色底 #F5EFE0 / 中国红 #B4232C / 三列卡片 / 大字号时钟
 * 大屏适配：关键字号用 clamp() 随视口放大（架构 5.1）
 */
:root{
  --red:#B4232C; --red2:#8f1c24;
  --wheat:#F5EFE0; --wheat2:#EDE4CC;
  --ink:#2b2420; --ok:#2E7D32; --warn:#E65100;
  --line:#d8c9a8;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:"PingFang SC","Microsoft YaHei",sans-serif;}
body{background:var(--wheat);color:var(--ink);padding:12px;max-width:960px;margin:0 auto;}
h1{font-size:19px;color:var(--red);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;}
h1 small{font-size:12px;color:#777;font-weight:normal;}
a{color:var(--red);}

/* 门店 tab */
.storetabs{display:flex;gap:6px;margin:8px 0;flex-wrap:wrap;}
.stab{border:1.5px solid var(--red);background:#fff;color:var(--red);border-radius:8px;padding:6px 14px;font-size:14px;font-weight:700;cursor:pointer;}
.stab.on{background:var(--red);color:#fff;}

/* 顶栏与时钟 */
.topbar{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin:8px 0;display:flex;justify-content:space-between;align-items:center;font-size:13px;flex-wrap:wrap;gap:4px;}
.topbar b{color:var(--red);font-size:16px;}
.clock{font-size:clamp(26px,5vw,44px);font-weight:800;color:var(--red2);font-variant-numeric:tabular-nums;text-align:center;margin:2px 0 6px;}

/* 三列看板 */
.board{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:8px;}
.col{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;min-height:170px;}
.col h2{font-size:13px;padding:5px 7px;border-radius:6px;margin-bottom:8px;color:#fff;text-align:center;}
.col.c1 h2{background:#8a7a5c;}
.col.c2 h2{background:var(--warn);}
.col.c3 h2{background:var(--ok);}
.card{border:1px solid #e0d5bb;border-radius:8px;padding:8px;margin-bottom:8px;background:#fffdf7;}
.card .flavor{font-weight:700;font-size:15px;color:var(--red2);}
.card .meta{font-size:11.5px;color:#6b5f4d;margin-top:3px;line-height:1.55;}
.card .count{font-size:24px;font-weight:800;color:var(--warn);margin-top:4px;font-variant-numeric:tabular-nums;}
.card .count small{font-size:11px;color:#999;font-weight:400;}
.card.hot .flavor::after{content:" 🔥";font-size:12px;}

/* 按钮体系（操作按钮为交互元素，高度≥24px 热区） */
.btn{border:none;border-radius:7px;padding:8px 10px;font-size:13px;font-weight:600;cursor:pointer;width:100%;margin-top:6px;}
.b-start{background:var(--red);color:#fff;}
.b-proof{background:#E65100;color:#fff;}
.b-sold{background:#eee;color:#666;}
.fbtn{border:1.5px solid var(--red);background:#fff;color:var(--red);border-radius:20px;padding:10px 16px;font-size:15px;font-weight:700;cursor:pointer;}
.fbtn:active{background:var(--red);color:#fff;}

/* 表单与面板 */
.panel{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:10px 0;}
.panel h3{font-size:13px;color:var(--red2);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px;}
.panel h3 em{font-style:normal;font-size:11px;color:#999;font-weight:400;}
input[type=text],input[type=password],input[type=number],select{
  border:1.5px solid var(--line);border-radius:6px;padding:9px 10px;font-size:14px;background:#fff;color:var(--ink);width:100%;
}
input:focus,select:focus{outline:none;border-color:var(--warn);}
.proofinput{background:var(--wheat2);border-radius:8px;padding:10px;font-size:13px;}
.proofinput input[type=number]{border:1.5px solid var(--warn);color:var(--warn);font-size:17px;width:110px;font-weight:700;text-align:center;}
.pgo{border:none;background:var(--warn);color:#fff;border-radius:8px;padding:10px 20px;font-size:15px;font-weight:700;cursor:pointer;}
.hint{font-size:11px;color:#999;margin-top:6px;line-height:1.65;}

/* 表格（报工简表/管理后台） */
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px;background:#fff;}
.tbl th,.tbl td{border:1px solid #e8dfc8;padding:6px 8px;text-align:left;}
.tbl th{background:var(--wheat2);color:#6b5f4d;font-weight:700;}
.tbl tr:nth-child(even) td{background:#fcf9f0;}

/* 管理后台标签页 */
.tabs{display:flex;gap:6px;margin:10px 0;flex-wrap:wrap;}
.tab{border:1.5px solid var(--line);background:#fff;color:#6b5f4d;border-radius:8px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;}
.tab.on{border-color:var(--red);color:var(--red);background:#fff5f5;}
.overview{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0;display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;}
.overview b{color:var(--red);}

/* 登录框 */
.login{max-width:340px;margin:40px auto;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;}
.login h2{font-size:16px;color:var(--red);margin-bottom:12px;text-align:center;}
.login label{font-size:12px;color:#6b5f4d;display:block;margin:10px 0 4px;}
.login .btn{margin-top:14px;}
.err{color:var(--red);font-size:12px;margin-top:8px;min-height:16px;}

/* 提示条 */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:rgba(43,36,32,.92);color:#fff;font-size:13px;border-radius:8px;padding:10px 16px;z-index:99;max-width:80vw;}
.note{font-size:11px;color:#999;margin-top:8px;line-height:1.65;}
.modebar{display:flex;gap:6px;font-size:11px;color:#777;margin-top:6px;flex-wrap:wrap;}
.modebar span{background:#fff;border:1px solid var(--line);border-radius:4px;padding:2px 7px;}

/* 企微伪全屏兜底（手册 4.4-5）：fixed 铺满嵌入窗口 */
body.pseudo-fs{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;overflow-y:auto;background:var(--wheat);padding:12px;z-index:10;}

/* ---------------- 员工入口（看板页，顶栏右侧清晰可见但不过度抢眼） ---------------- */
.topbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.staff-entry2{color:var(--red2);font-size:13px;font-weight:600;text-decoration:underline dotted;padding:4px 6px;}
h1 small .staff-entry{color:#9a8f7a;font-size:11px;text-decoration:underline dotted;}
h1 small .staff-entry:active{color:var(--red);}

/* ---------------- 企微免登按钮（登录框顶部） ---------------- */
.b-wecom{background:#00C250;color:#fff;}
.b-wecom:active{background:#00a846;}
.or-divider{display:flex;align-items:center;gap:8px;color:#b3a88f;font-size:11px;margin:12px 0 2px;}
.or-divider::before,.or-divider::after{content:"";flex:1;height:1px;background:#e8dfc8;}

/* ---------------- V1.4 成型岗步进器（一行紧凑，手机优先） ---------------- */
.stepper{margin-top:8px;}
.stepper .step-row{display:flex;gap:6px;align-items:center;}
.stepper .step-btn{flex:0 0 auto;min-width:52px;min-height:44px;padding:0 12px;border:none;border-radius:8px;font-size:15px;font-weight:800;cursor:pointer;color:#fff;user-select:none;-webkit-user-select:none;touch-action:pan-y;}
.stepper .step-plus{background:#E65100;}       /* 延长=橙亮 */
.stepper .step-plus:active{background:#c44600;}
.stepper .step-minus{background:#0288D1;}      /* 缩短=蓝亮 */
.stepper .step-minus:active{background:#026aa3;}
.stepper .step-apply{background:#2E7D32;}      /* 生效=绿亮（delta≠0 才出现） */
.stepper .step-apply:active{background:#1b5e20;}
.stepper .b-scrap{background:#B4232C;}         /* 报废=红亮 */
.stepper .b-scrap:active{background:#8f1c24;}
.stepper .step-val{flex:1 1 auto;min-width:56px;max-width:90px;text-align:center;font-size:18px;font-weight:900;padding:8px 2px;border:2px solid #d8c9a8;border-radius:8px;background:#fffdf7;color:#2b2420;font-variant-numeric:tabular-nums;}
.stepper .step-val.pos{color:#E65100;border-color:#E65100;}
.stepper .step-val.neg{color:#0288D1;border-color:#0288D1;}
.stepper .hint{margin-top:5px;font-size:11px;}
/* 极窄屏（<360px）：数字框收窄，保持一行不折行 */
@media (max-width:360px){
  .stepper .step-btn{min-width:46px;padding:0 8px;font-size:14px;}
  .stepper .step-val{min-width:46px;font-size:16px;}
}

/* 售卖岗售罄按钮：红字提示（毛师傅反馈#3b） */
.btn.b-sold{background:#fff;color:#B4232C;border:1.5px solid #B4232C;font-weight:800;}

/* 看板售卖列同口味合并显示（毛师傅反馈#3a） */
.card .badge-n{display:inline-block;margin-left:6px;background:#2E7D32;color:#fff;border-radius:10px;font-size:11px;padding:1px 8px;font-weight:700;vertical-align:middle;}

/* V1.7：售卖卡片图文双栏 + 口味图（精致克制：圆角、描边、固定尺寸） */
.card.sell-card{display:flex;align-items:center;gap:10px;}
.card.sell-card .sell-info{flex:1;min-width:0;}
.card.sell-card .sell-img{flex:0 0 64px;width:64px;height:64px;border-radius:10px;border:1px solid #e0d5bb;object-fit:cover;background:#fffdf7;}
/* PC 端售卖图稍大 */
@media (min-width:769px){
  .card.sell-card .sell-img{flex-basis:76px;width:76px;height:76px;}
}
.role-banner{background:#fdf3e0;border:1px solid #e8cf9a;color:#8a6d1a;border-radius:10px;padding:10px 12px;margin:8px 0;font-size:13px;font-weight:600;}
body.role-limited .tabs .tab[data-tab]:not([data-tab="fill"]){
  pointer-events:none;               /* 拦截点击（JS 亦拦，双保险） */
  filter:grayscale(1);opacity:.55;   /* 灰度 + 半透明 */
}

/* ---------------- 企微内安全区（底部手势条避让） ---------------- */
body.in-wecom{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));}
body.in-wecom .panel:last-child{margin-bottom:calc(10px + env(safe-area-inset-bottom,0px));}

/* ---------------- 窄屏单列（640px 老断点保留） ---------------- */
@media (max-width:640px){
  .board{grid-template-columns:1fr;}
  body{padding:8px;}
  /* 手机看板：倒计时列优先可见 → 调整 grid 顺序 */
  .board{display:grid;}
  .col.c2{order:-1;}                 /* 出锅倒计时置顶 */
}

/* PC 端：底部员工入口不显示（基础规则须在媒体查询之前，否则覆盖手机的 display:block） */
.m-staff-entry{display:none;}

/* ---------------- V1.5 手机端看板适配（企微手机端显示，毛师傅 9-18 23:36 反馈） ---------------- */
@media (max-width:768px){
  /* 修复无法滚动：body 恢复正常文档流滚动（V1.7 底部只留文字条高度） */
  body{padding:10px 10px calc(46px + env(safe-area-inset-bottom,0px));overflow-y:auto;height:auto;min-height:100%;}
  body.pseudo-fs{overflow-y:auto;}
  html{overflow-y:auto;}
  /* 顶部信息融合一行：店名+份数+营业时间 */
  .topbar{flex-direction:column;align-items:stretch;gap:4px;padding:8px 10px;}
  .topbar .tb-main{font-size:12.5px;line-height:1.6;white-space:normal;}
  .topbar-actions{justify-content:flex-start;}
  .topbar-actions #hours2{display:none;}            /* 营业时间已并入 tb-main 一行 */
  .bigbtn{display:none;}                             /* 大屏按钮手机端隐藏（仅PC） */
  .staff-entry2{display:none;}                       /* 顶栏员工入口手机隐藏（用底部） */
  .clock{font-size:34px;}
  h1{font-size:16px;}
  h1 small{display:none;}                            /* 标题旁营业时间并入顶栏一行 */
  /* 底部固定员工入口（手机端，V1.7 改文字链接风格不遮挡内容） */
  .m-staff-entry{position:fixed;left:0;right:0;bottom:0;z-index:50;display:block;text-align:center;background:rgba(245,239,224,.96);border-top:1px solid #d8c9a8;color:#9a8f7a;font-size:12px;padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));text-decoration:underline dotted;font-weight:400;backdrop-filter:blur(4px);}
  .m-staff-entry:active{color:var(--red);}
  /* V1.7（反馈#2）：手机端列排序 售卖中→倒计时→正在加工 */
  .col.c3{order:-2;}
  .col.c2{order:-1;}
  .col.c1{order:0;}
  .modebar{display:none;}                            /* 说明条手机端省略 */
}

/* ---------------- 移动端适配（≤768px，企微填报主场景） ---------------- */
@media (max-width:768px){
  body{padding:10px;}
  /* 报工页/管理页单列布局 */
  .board{grid-template-columns:1fr;gap:8px;}
  .panel{width:100%;padding:12px;}
  /* 按钮热区加大（触摸目标 ≥44px） */
  .btn,.pgo,.fbtn,.stab,.tab{min-height:44px;}
  .fbtn{padding:12px 18px;font-size:16px;}
  .btn{padding:12px 10px;font-size:15px;}
  .pgo{padding:12px 22px;}
  /* 输入框 16px 防 iOS 聚焦自动缩放 */
  input[type=text],input[type=password],input[type=number],select,
  .proofinput input[type=number]{font-size:16px;}
  /* 表格横向滚动兜底 */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table.tbl{min-width:520px;}
  /* 管理页 nav 横向滚动 tab */
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:thin;}
  .tabs .tab{flex:0 0 auto;white-space:nowrap;}
  /* 登录框留出键盘弹起空间 */
  .login{margin:20px auto;}
}

/* 空状态 */
.empty{color:#8a7a5c;font-size:14px;text-align:center;padding:26px 8px;line-height:1.8;}

/* ===== 大屏展示模式（V1.1：白天黄屏 / 日落后黄边黑屏，自动切换） ===== */
.bigbtn{border:1.5px solid #B4232C;background:#fff;color:#B4232C;border-radius:8px;padding:6px 14px;font-size:13px;font-weight:700;cursor:pointer;min-height:34px;}
.bigbtn:hover{background:#B4232C;color:#fff;}
/* 兼容写法：老内核不认 inset，用 top/right/bottom/left 双保险（毛师傅云端浏览器大屏不显示的根修） */
#bigscreen{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:999;display:none;flex-direction:column;}
#bigscreen.on{display:flex;}
#bigscreen .btop{display:flex;justify-content:space-between;align-items:center;padding:1.4vh 3vw;}
#bigscreen .bbrand{font-size:4.4vh;font-weight:900;letter-spacing:.3vw;}
#bigscreen .bclock{font-size:5.2vh;font-weight:900;font-variant-numeric:tabular-nums;}
#bigscreen .bmain{flex:1;display:flex;}
#bigscreen .bleft{flex:1.6;display:flex;flex-direction:column;justify-content:center;padding:0 3.5vw;}
#bigscreen .blabel{font-size:4vh;letter-spacing:.8vw;margin-bottom:.8vh;font-weight:700;}
#bigscreen .bflavor{font-size:7.4vh;font-weight:900;margin-bottom:1.2vh;}
#bigscreen .btimer{font-size:25vh;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.4vw;}
#bigscreen .btimer small{font-size:6vh;font-weight:800;letter-spacing:0;}
#bigscreen .beta{font-size:4vh;margin-top:1.4vh;}
#bigscreen .beta b{font-size:4.8vh;}
#bigscreen .bright{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 3vw;}
#bigscreen .bstitle{font-size:4vh;letter-spacing:.8vw;margin-bottom:2.6vh;font-weight:700;}
#bigscreen .bitem{font-size:5.8vh;font-weight:900;padding:1.9vh 0;}
#bigscreen .bitem::before{content:"● ";font-size:4.2vh;vertical-align:middle;}
#bigscreen .bbottom{display:flex;justify-content:space-between;align-items:center;padding:1.5vh 3vw;}
#bigscreen .bqueue{font-size:3.9vh;}
#bigscreen .bqueue b{font-weight:900;}
#bigscreen .bprog{font-size:3.6vh;font-weight:700;}
#bigscreen .bexit{position:fixed;right:1.2vw;top:1.2vh;z-index:1000;font-size:2.4vh;padding:.8vh 1.5vw;border:none;border-radius:6px;opacity:.3;cursor:pointer;}
#bigscreen .bexit:hover{opacity:1;}

/* 大屏自适应增强：超宽屏(≥1600px)与竖屏大屏分流（毛师傅反馈#2） */
@media (min-width:1600px){
  #bigscreen .bbrand{font-size:3.6vh;}
  #bigscreen .bclock{font-size:4.4vh;}
  #bigscreen .btimer{font-size:22vh;}
  #bigscreen .bmain{max-width:2200px;margin:0 auto;width:100%;}
}
@media (orientation:portrait) and (min-width:600px){
  /* 竖屏大屏（如旋转屏/竖版广告机）：左右改上下布局 */
  #bigscreen .bmain{flex-direction:column;}
  #bigscreen .bleft{border-right:none;border-bottom:8px solid #111;padding:2vh 4vw;}
  #bigscreen .btimer{font-size:18vh;}
  #bigscreen .bflavor{font-size:6vh;}
}
/* 白天模式：黄底黑字 */
#bigscreen.day{background:#FFD400;color:#111;}
#bigscreen.day .btop{background:#111;color:#FFD400;}
#bigscreen.day .blabel,#bigscreen.day .bstitle{color:#6b5a00;}
#bigscreen.day .bflavor .hot{color:#D32F16;}
#bigscreen.day .beta{color:#3a3000;}
#bigscreen.day .beta b{color:#000;}
#bigscreen.day .bitem{border-bottom:4px solid rgba(0,0,0,.35);}
#bigscreen.day .bitem::before{color:#0a7a2f;}
#bigscreen.day .bleft{border-right:8px solid #111;}
#bigscreen.day .bbottom{background:#111;color:#FFD400;}
#bigscreen.day .bqueue b{color:#fff;}
#bigscreen.day .bexit{background:#111;color:#FFD400;}
/* 夜间模式：黄边黑屏 */
#bigscreen.night{background:#0d0d0d;color:#fff;}
#bigscreen.night .btop{background:#FFD400;color:#111;}
#bigscreen.night .blabel,#bigscreen.night .bstitle{color:#9a9a9a;}
#bigscreen.night .bflavor .hot{color:#FF3B30;}
#bigscreen.night .btimer{color:#FFD400;}
#bigscreen.night .btimer small{color:#FFD400;}
#bigscreen.night .beta{color:#bbb;}
#bigscreen.night .beta b{color:#fff;}
#bigscreen.night .bitem{border-bottom:3px solid #2a2a2a;}
#bigscreen.night .bitem::before{color:#30D158;}
#bigscreen.night .bleft{border-right:6px solid #2a2a2a;}
#bigscreen.night .bbottom{background:#FFD400;color:#111;}
#bigscreen.night .bqueue b{color:#a00;}
#bigscreen.night .bexit{background:#FFD400;color:#111;}