/* ===========================================================
   北菜鲜批项目部 意见箱 —— 统一样式
   深蓝主色 + 白底 + 中性灰；无装饰性圆圈/椭圆、无 emoji、无外链
   =========================================================== */
:root{
  --navy:#1a2332;
  --navy-2:#243044;
  --line:#d8dde4;
  --grey:#5b6674;
  --grey-2:#8b95a3;
  --bg:#f5f6f8;
  --white:#fff;
  --red:#b3261e;
  --green:#1f6f43;
  --amber:#8a6100;
  --blue:#1d4ed8;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,"Segoe UI","Microsoft YaHei","PingFang SC",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.7;color:var(--navy);background:var(--bg);
  -webkit-text-size-adjust:100%;
}
a{color:var(--navy);text-decoration:none;}
a:hover{text-decoration:underline;}

/* 员工端顶栏 */
.topbar{background:var(--navy);color:#fff;}
.topbar .wrap{max-width:760px;margin:0 auto;padding:18px 16px;}
.brand{font-size:19px;font-weight:600;letter-spacing:.5px;}
.topbar .who{float:right;font-size:14px;color:#c9d2de;}
.topbar .who a{color:#c9d2de;}

/* 布局 */
.wrap{max-width:960px;margin:0 auto;padding:0 16px;}
main.wrap{padding:22px 16px 40px;}
.lead-wrap{max-width:760px;margin:0 auto;padding:20px 16px 48px;}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:2px;
  padding:22px 20px;margin-bottom:18px;
}
.card > h2{margin:0 0 6px;font-size:19px;font-weight:600;}
.hint{color:var(--grey);font-size:14.5px;}
.note{
  background:#fbfbfc;border-left:3px solid var(--navy);padding:10px 14px;
  color:var(--grey);font-size:14.5px;margin:14px 0 0;
}

/* 表单 */
label.fl{display:block;font-weight:600;margin:20px 0 8px;font-size:16.5px;}
label.fl:first-child{margin-top:0;}
.req{color:var(--red);font-weight:400;font-size:14px;margin-left:6px;}
input[type=text],input[type=password],input[type=date],input[type=number],select,textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:2px;
  font-size:16px;font-family:inherit;color:var(--navy);background:#fff;
}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(26,35,50,.25);outline-offset:-2px;}
textarea{min-height:150px;resize:vertical;line-height:1.7;}
.radio-row{display:flex;flex-wrap:wrap;gap:10px 26px;padding:2px 0;}
.radio-row label{font-size:16.5px;display:flex;align-items:center;gap:8px;cursor:pointer;}
input[type=radio],input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--navy);}
.counter{font-size:13.5px;color:var(--grey-2);text-align:right;margin-top:4px;}
.counter.over{color:var(--red);}
.btn{
  display:inline-block;background:var(--navy);color:#fff;border:1px solid var(--navy);
  padding:12px 26px;font-size:16.5px;font-family:inherit;border-radius:2px;cursor:pointer;
}
.btn:hover{background:var(--navy-2);text-decoration:none;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-line{background:#fff;color:var(--navy);}
.btn-line:hover{background:#eef1f5;}
.btn-sm{padding:7px 14px;font-size:14.5px;}
.btn-wide{width:100%;display:block;text-align:center;}
.actions{margin-top:26px;}

/* 提示条 */
.alert{padding:12px 15px;border-radius:2px;margin-bottom:16px;font-size:15.5px;border:1px solid;}
.alert-err{background:#fdf3f2;border-color:#e6b8b4;color:#7d1f18;}
.alert-ok{background:#f1f8f3;border-color:#b7d7c3;color:#155e37;}
.alert-info{background:#f3f6fb;border-color:#c3cfe2;color:#1c3b6e;}

/* 查询码展示 */
.code-box{
  border:1px solid var(--navy);background:#fff;padding:20px;text-align:center;margin:18px 0;
}
.code-label{font-size:15px;color:var(--grey);margin-bottom:8px;}
.code-val{font-size:40px;font-weight:700;letter-spacing:8px;color:var(--navy);font-family:Consolas,Menlo,monospace;}
.code-warn{margin-top:14px;font-size:15px;color:var(--red);font-weight:600;line-height:1.6;text-align:left;}
.kv{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);}
.kv dt{width:120px;padding:9px 0;color:var(--grey);border-bottom:1px solid #eef0f3;font-size:14.5px;}
.kv dd{margin:0;flex:1;min-width:200px;padding:9px 0;border-bottom:1px solid #eef0f3;font-size:15.5px;}

/* 表格 */
.tbl{width:100%;border-collapse:collapse;font-size:15px;background:#fff;}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:10px 10px;text-align:left;vertical-align:top;}
.tbl th{background:#f2f4f7;font-weight:600;font-size:14.5px;color:#39445a;white-space:nowrap;}
.tbl tr:hover td{background:#fafbfc;}
.tbl .num{white-space:nowrap;font-family:Consolas,Menlo,monospace;font-size:14px;color:var(--grey);}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);}

/* 状态标记（纯文字底色，无圆形） */
.st{display:inline-block;padding:2px 8px;font-size:13.5px;border:1px solid;white-space:nowrap;border-radius:2px;}
.st-todo{color:#8a6100;border-color:#e0cd9a;background:#fdf8ec;}
.st-doing{color:#1c3b6e;border-color:#c3cfe2;background:#f3f6fb;}
.st-done{color:#155e37;border-color:#b7d7c3;background:#f1f8f3;}
.st-closed{color:#5b6674;border-color:#d8dde4;background:#f4f5f7;}
.st-overdue{color:#7d1f18;border-color:#e6b8b4;background:#fdf3f2;font-weight:600;}
.tag{display:inline-block;padding:1px 7px;font-size:13px;border:1px solid var(--line);color:var(--grey);border-radius:2px;}

/* 筛选栏 */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:16px;}
.filters .f{min-width:150px;}
.filters .f label{display:block;font-size:13.5px;color:var(--grey);margin-bottom:4px;}
.filters select,.filters input{padding:8px 10px;font-size:15px;}

/* 管理端导航 */
.admin .topbar .wrap{max-width:1100px;padding:12px 16px;}
.admin .brand{font-size:16.5px;}
.admin .who{font-size:13.5px;}
.tabs{background:#243044;}
.tabs .wrap{max-width:1100px;padding:0 16px;display:flex;gap:2px;flex-wrap:wrap;}
.admin .wrap{max-width:1100px;}
.tab{color:#c9d2de;padding:11px 16px;font-size:15px;display:inline-block;}
.tab:hover{background:#2d3a52;color:#fff;text-decoration:none;}
.tab.on{background:#f5f6f8;color:var(--navy);font-weight:600;}

/* 统计卡片 */
.cards{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:22px;}
.metric{flex:1 1 168px;background:#fff;border:1px solid var(--line);padding:16px 18px;border-radius:2px;}
.metric .m-label{font-size:14px;color:var(--grey);}
.metric .m-val{font-size:30px;font-weight:700;margin-top:4px;font-family:Consolas,Menlo,monospace;}
.metric .m-unit{font-size:15px;font-weight:400;color:var(--grey);margin-left:3px;}

/* 纯 CSS 柱状图（近 6 个月） */
.chart{display:flex;align-items:flex-end;gap:16px;height:230px;padding:14px 4px 0;border-bottom:1px solid var(--line);}
.chart .bar-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;}
.chart .bar-val{font-size:13.5px;color:var(--grey);margin-bottom:4px;}
.chart .bar{width:100%;max-width:64px;background:var(--navy);min-height:2px;}
.chart-x{display:flex;gap:16px;margin-top:8px;}
.chart-x span{flex:1;text-align:center;font-size:13.5px;color:var(--grey);}

/* 图片 */
.thumbs{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;}
.thumbs img{width:118px;height:118px;object-fit:cover;border:1px solid var(--line);cursor:zoom-in;background:#f2f4f7;}
.lightbox{display:none;position:fixed;inset:0;background:rgba(15,20,30,.9);z-index:99;align-items:center;justify-content:center;padding:20px;}
.lightbox.on{display:flex;}
.lightbox img{max-width:96vw;max-height:92vh;border:1px solid #3a465c;}

/* 二维码 */
.qr-wrap{border:1px solid var(--line);background:#fff;padding:18px;display:inline-block;}
.qr-wrap img{display:block;width:220px;height:220px;image-rendering:pixelated;}

/* 页脚 */
.foot{border-top:1px solid var(--line);margin-top:30px;padding:18px 16px 30px;text-align:center;color:var(--grey-2);font-size:13.5px;}
.pager{margin-top:16px;font-size:15px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.pager a{padding:6px 12px;border:1px solid var(--line);background:#fff;}
.pager .cur{color:var(--grey);}

/* 手机自适应 */
@media (max-width:640px){
  body{font-size:16px;}
  .code-val{font-size:32px;letter-spacing:5px;}
  .metric .m-val{font-size:26px;}
  .kv dt{width:92px;font-size:14px;}
  .card{padding:18px 15px;}
  .chart{gap:8px;height:190px;}
  .chart-x{gap:8px;}
  .topbar .who{float:none;display:block;margin-top:6px;}
  .chart .bar{max-width:none;}
  .tbl{font-size:14.5px;}
  .thumbs img{width:31%;height:auto;}
}