/* GOFO 司机签到签退扫码台 —— 视觉对齐 GOFO 后台模板（gofo-admin.html）
   颜色/圆角只认下面的 token，别在规则里写死色值。 */
:root{
  --header:#001529; --header-2:#002140;
  --pri:#FC4C02; --pri-h:#f76121; --pri-a:#e84702; --pri-l:#fff1e6;
  --ok:#52c41a; --info:#237BEB; --err:#ff4d4f; --warn:#fa8c16; --mute:#8c8c8c;
  --ok-l:#f6ffed; --info-l:#e6f7ff; --err-l:#fff1f0; --warn-l:#fff7e6; --mute-l:#fafafa;
  --bg:#f0f2f5; --card:#fff; --line:#f0f0f0; --th:#fafafa; --ctl:#d9d9d9;
  --txt:#262626; --txt2:#595959; --sub:#8c8c8c;
  --r:2px; --r-l:4px;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--txt);font-family:'PingFang SC','Microsoft YaHei',Helvetica,Arial,sans-serif;height:100vh;display:flex;flex-direction:column;overflow:hidden;font-size:14px}
button{font-family:inherit;cursor:pointer}
a{color:var(--pri)}

/* ═══ 顶栏 ═══ */
.topbar{height:48px;background:var(--header);display:flex;align-items:center;padding:0 16px;gap:14px;flex-shrink:0}
.topbar .logo{height:20px;width:auto;display:block}
.topbar .title{color:#fff;font-size:15px;font-weight:600;margin-left:2px}
.topright{margin-left:auto;display:flex;align-items:center;gap:16px;color:rgba(255,255,255,.75);font-size:13px}
.topright .sel{display:flex;align-items:center;gap:4px;cursor:pointer}
.topright .sel:hover{color:#fff}
.topright select{background:var(--header-2);color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:6px 8px;font-size:12.5px;max-width:240px}
.seg{display:flex;background:var(--header-2);border-radius:var(--r);padding:2px;border:1px solid rgba(255,255,255,.12)}
.seg button{background:transparent;border:none;color:rgba(255,255,255,.75);padding:5px 12px;border-radius:var(--r);font-size:12.5px}
.seg button.on{background:var(--pri);color:#fff;font-weight:600}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--pri);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.userinfo{line-height:1.25}
.userinfo .n{color:#fff;font-size:13px}
.userinfo .r{font-size:11px;color:rgba(255,255,255,.55)}

/* ═══ 主体 ═══ */
.main{flex:1;display:flex;overflow:hidden}
.content{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:10px 12px 12px}

/* 卡片通用 */
.card{background:var(--card);border-radius:var(--r);border:1px solid var(--line);margin-bottom:10px}
.card-h{padding:11px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600}
.card-h .sub{font-weight:400;font-size:12.5px;color:var(--sub)}
.card-h .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.gun{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ok)}
.gun .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 5px var(--ok)}
.mbtn{background:#fff;border:1px solid var(--ctl);border-radius:var(--r);padding:6px 14px;font-size:12.5px;color:var(--txt2)}
.mbtn:hover{color:var(--pri);border-color:var(--pri)}
.mbtn.pri{background:var(--pri);border-color:var(--pri);color:#fff}
.mbtn.pri:hover{background:var(--pri-h);border-color:var(--pri-h)}

/* ═══ 扫码状态区 ═══ */
.stagecard{flex:0 0 auto}
.stage{display:flex;align-items:center;justify-content:center;padding:20px 22px;position:relative;min-height:190px}
.screen{display:none;flex-direction:column;align-items:center;text-align:center;width:100%}
.screen.active{display:flex}

#idle .qrbox{width:110px;height:110px;border:3px solid var(--header);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;animation:pulse 2s infinite}
#idle .qrbox svg{width:64px;height:64px}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(252,76,2,.4)}50%{box-shadow:0 0 0 16px rgba(252,76,2,0)}}
#idle h1{font-size:44px;letter-spacing:12px;margin-bottom:12px}
#idle p{font-size:15px;color:var(--sub);line-height:1.9}

#busy .spin{width:44px;height:44px;border:4px solid var(--line);border-top-color:var(--pri);border-radius:50%;animation:rot .8s linear infinite;margin-bottom:16px}
@keyframes rot{to{transform:rotate(360deg)}}

/* 结果横幅（纯色，四态各一个 token） */
.banner{width:100%;border-radius:var(--r-l);padding:26px 34px;display:flex;align-items:center;gap:28px;text-align:left;color:#fff}
.banner.green{background:var(--ok)}
.banner.blue{background:var(--info)}
.banner.red{background:var(--err)}
.banner.gray{background:var(--mute)}
.banner .icon{font-size:56px;line-height:1;flex-shrink:0}
.banner .who .nm{font-size:38px;font-weight:700;white-space:nowrap}
.banner .who .rt{font-size:16px;opacity:.92;margin-top:5px;letter-spacing:.5px;white-space:nowrap}
.banner .msg{margin-left:8px}
.banner .msg .t{font-size:26px;font-weight:700}
.banner .msg .s{font-size:14.5px;opacity:.94;margin-top:6px;max-width:560px;line-height:1.65}
.banner .msg .s.big{font-size:20px;font-weight:600}
.banner .stats{margin-left:auto;display:flex;gap:14px;flex-shrink:0}
.banner .stat{background:rgba(255,255,255,.18);border-radius:var(--r-l);padding:14px 26px;min-width:116px;text-align:center}
.banner .stat .v{font-size:42px;font-weight:700;line-height:1.1}
.banner .stat .k{font-size:13px;opacity:.92;margin-top:4px}
.count{position:absolute;bottom:8px;right:16px;font-size:12.5px;color:var(--sub)}

/* 结果页动作按钮 */
.acts2{width:100%;display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.abtn{border-radius:var(--r);padding:14px 26px;font-size:17px;font-weight:700;background:#fff;color:var(--txt);border:1px solid var(--ctl)}
.abtn:hover{border-color:var(--pri);color:var(--pri)}
.abtn.pri{background:var(--ok);color:#fff;border-color:var(--ok)}
.abtn.red{background:var(--err);color:#fff;border-color:var(--err)}
.abtn.blue{background:var(--info);color:#fff;border-color:var(--info)}
.abtn.pri:hover,.abtn.red:hover,.abtn.blue:hover{color:#fff;filter:brightness(1.08)}
.abtn:disabled{opacity:.45;cursor:not-allowed}

/* ═══ 任务明细：多列并排铺满 ═══ */
#wbCard{flex:1;display:flex;flex-direction:column;min-height:0;margin-bottom:0}
#detailBody{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr}
#detailBody.three{grid-template-columns:1fr 1fr 1.2fr}
.wbcol{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line)}
.wbcol:first-child{border-left:none}
.wbsec-h{display:flex;align-items:center;gap:10px;padding:13px 18px;background:var(--th);font-size:16px;font-weight:700;border-bottom:1px solid var(--line);flex-shrink:0}
.wbsec-h .dot{width:10px;height:10px;border-radius:var(--r)}
.wbsec-h .cnt{color:#fff;border-radius:11px;padding:0 11px;font-size:14px;font-weight:700;line-height:22px}
.wbsec-h .cnt.zero{background:#bfbfbf !important}
.wbsec-h .fold{margin-left:auto;font-size:13.5px;color:var(--pri);cursor:pointer;font-weight:400}
.wblist{flex:1;overflow-y:auto;min-height:0}
.wbrow{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line)}
.wbrow:hover{background:var(--pri-l)}
.wbrow .seq{flex-shrink:0;min-width:58px;text-align:center;background:var(--info-l);border:1px solid rgba(35,123,235,.25);border-radius:var(--r);padding:5px 6px}
.wbrow .seq .sv{font-size:19px;font-weight:800;color:var(--info);font-family:ui-monospace,Menlo,monospace;line-height:1.1}
.wbrow .seq .sk{font-size:10.5px;color:var(--sub)}
.wbrow .no{font-family:ui-monospace,Menlo,monospace;font-size:17px;font-weight:700;letter-spacing:.5px;color:var(--txt)}
.wbrow .why{color:var(--txt2);font-size:13px;margin-top:3px}
.wbrow .sub2{color:var(--sub);font-size:12px;line-height:1.5}
.wbrow .chip{margin-left:auto;flex-shrink:0}
.wbrow .lnk{margin-left:10px;background:#fff;border:1px solid var(--ctl);border-radius:var(--r);padding:4px 10px;font-size:12.5px;color:var(--pri);white-space:nowrap}
.wbrow .lnk:hover{border-color:var(--pri)}
.foldrow{padding:10px;text-align:center;color:var(--sub);font-size:12.5px}
.wbempty{padding:26px;text-align:center;color:var(--sub);font-size:14px}
.wbplaceholder{grid-column:1/-1;display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:15px}
.scanhint{background:var(--warn-l);color:var(--warn);border:1px solid rgba(250,140,22,.3);border-radius:var(--r);padding:8px 12px;font-size:13.5px;margin:8px 12px}

/* 徽标：浅底 + 语义色字 */
.tag{display:inline-block;white-space:nowrap;border-radius:var(--r);padding:2px 10px;font-size:13.5px;line-height:22px;font-weight:600}
.tag.red,.b-err{background:var(--err-l);color:var(--err);border:1px solid rgba(255,77,79,.3)}
.tag.blue,.b-out{background:var(--info-l);color:var(--info);border:1px solid rgba(35,123,235,.3)}
.tag.gray,.b-int{background:var(--mute-l);color:var(--mute);border:1px solid rgba(140,140,140,.3)}
.tag.green,.b-in{background:var(--ok-l);color:var(--ok);border:1px solid rgba(82,196,26,.3)}
.b-rel{background:var(--warn-l);color:var(--warn);border:1px solid rgba(250,140,22,.3)}

/* 表格 */
table.el{width:100%;border-collapse:collapse;font-size:13.5px}
table.el th{background:var(--th);color:var(--txt2);font-weight:600;text-align:left;padding:9px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
table.el td{padding:9px 18px;border-bottom:1px solid var(--line);color:var(--txt)}
table.el tr:hover td{background:var(--pri-l)}
.mono{font-family:ui-monospace,Menlo,monospace;letter-spacing:.4px}

/* ═══ 弹窗 ═══ */
.mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;align-items:center;justify-content:center}
.mask.show{display:flex}
.modal{background:#fff;border-radius:var(--r-l);padding:24px 26px;width:440px;max-width:92vw;box-shadow:0 8px 30px rgba(0,0,0,.18)}
.modal.wide{width:760px}
.modal h3{font-size:16px;margin-bottom:6px}
.modal .warn{font-size:12.5px;color:var(--warn);margin-bottom:14px;line-height:1.7}
.modal label{display:block;font-size:13px;color:var(--txt2);margin:12px 0 6px}
.modal select,.modal input{width:100%;border:1px solid var(--ctl);border-radius:var(--r);padding:9px 11px;font-size:13.5px;font-family:inherit;color:var(--txt)}
.modal select:focus,.modal input:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 2px rgba(252,76,2,.15)}
.modal .snap{background:var(--th);border-radius:var(--r);padding:10px 12px;font-size:12px;color:var(--txt2);margin-top:13px;line-height:1.8}
.modal .mrow{display:flex;gap:12px;margin-top:20px;justify-content:flex-end}
.modal .mb{border-radius:var(--r);padding:9px 22px;font-size:13.5px;border:1px solid var(--ctl);background:#fff;color:var(--txt2)}
.modal .mb:hover{color:var(--pri);border-color:var(--pri)}
.modal .mb.ok{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:600}
.modal .mb.ok:hover{background:var(--pri-h);border-color:var(--pri-h);color:#fff}
.modal .list{max-height:52vh;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r)}
.modal .list label.row{display:flex;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);font-size:13.5px;margin:0;color:var(--txt);cursor:pointer}
.modal .list input[type=checkbox]{width:auto;padding:0;flex:none;margin:0;accent-color:var(--pri)}
.manualrow{display:flex;gap:6px;margin:10px 0}
.manualrow input{flex:1;border:1px solid var(--ctl);border-radius:var(--r);padding:7px 10px;font-size:13px;font-family:inherit}
.manualrow input:focus{outline:none;border-color:var(--pri)}

/* ═══ 抽屉（今日记录 / 轨迹 / 开发说明） ═══ */
.drawer{position:fixed;top:0;right:-480px;width:480px;max-width:96vw;height:100vh;background:#fff;border-left:1px solid var(--line);z-index:40;transition:right .25s;display:flex;flex-direction:column;box-shadow:-4px 0 16px rgba(0,0,0,.06)}
.drawer.open{right:0}
.drawer header{padding:15px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.drawer header h3{font-size:15px}
.drawer header span{cursor:pointer;color:var(--sub);font-size:18px}
.drawer .body{flex:1;overflow-y:auto;padding:16px 20px;font-size:13px;line-height:1.75;color:var(--txt2)}
.drawer .body h4{color:var(--txt);margin:16px 0 6px;font-size:13.5px}
.drawer .body h4:first-child{margin-top:0}
.drawer .body code{background:var(--pri-l);padding:1px 6px;border-radius:var(--r);font-size:12px;color:var(--pri-a)}
.drawer .body pre{background:var(--header);border-radius:var(--r-l);padding:12px;font-size:11.5px;overflow-x:auto;color:#d6dae4;margin:8px 0}
.gunmon{background:var(--th);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;font-family:ui-monospace,monospace;font-size:12px;min-height:54px;word-break:break-all;color:var(--ok)}
.gunmon .meta{color:var(--sub)}
.toggle{display:flex;align-items:center;gap:8px;margin:10px 0;font-size:13px;color:var(--txt)}
.toggle input{accent-color:var(--pri)}
.tracknode{padding:10px 0;border-bottom:1px solid var(--line)}
.tracknode .t{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--sub)}
.tracknode .h{font-weight:600;margin-top:2px}
.tracknode .c{font-size:12.5px;color:var(--txt2);margin-top:2px;line-height:1.5}

/* ═══ 登录 ═══ */
.loginmask{display:none;position:fixed;inset:0;background:rgba(0,21,41,.92);z-index:100;align-items:center;justify-content:center}
.loginmask.show{display:flex}
.loginbox{background:#fff;border-radius:var(--r-l);padding:28px 30px;width:380px;max-width:92vw}
.loginbox .loginlogo{height:26px;width:auto;display:block;margin-bottom:16px}
.loginbox h2{font-size:18px;margin-bottom:4px}
.loginbox .hint{font-size:12.5px;color:var(--sub);margin-bottom:14px;line-height:1.6}
.loginbox label{display:block;font-size:13px;color:var(--txt2);margin:12px 0 6px}
.loginbox input{width:100%;border:1px solid var(--ctl);border-radius:var(--r);padding:10px 11px;font-size:14px;font-family:inherit}
.loginbox input:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 2px rgba(252,76,2,.15)}
.loginbox .err{color:var(--err);font-size:12.5px;min-height:18px;margin-top:8px}
.loginbox .mb{width:100%;margin-top:14px;border:none;border-radius:var(--r);padding:11px;font-size:14px;font-weight:600;background:var(--pri);color:#fff}
.loginbox .mb:hover{background:var(--pri-h)}
.loginbox .mb:disabled{opacity:.5}
.smslinks{margin-top:10px;font-size:12.5px;color:var(--sub)}
.smslinks a{color:var(--pri);text-decoration:none}

/* ═══ 摄像头扫码 ═══ */
.camsrc{position:fixed;left:-20px;top:-20px;width:2px;height:2px;opacity:0;pointer-events:none}  /* 取帧源：要在播放，不需要可见 */
.camwrap{position:relative;width:480px;max-width:100%;aspect-ratio:4/3;background:#000;border-radius:var(--r-l);overflow:hidden;margin-bottom:18px}
.camwrap canvas{width:100%;height:100%;display:block}
.camwrap .cambar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:6px;padding:5px 8px;background:rgba(0,21,41,.72);color:#fff;font-size:12px}
.camwrap .cambar .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 5px var(--ok)}
.camwrap .cambar .sp{flex:1}
.camwrap .cambar button{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:var(--r);font-size:11.5px;padding:1px 7px;line-height:18px}
.camwrap .cambar button:hover{border-color:#fff}
.camwrap .camtip{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;font-size:12.5px;padding:6px 10px;text-align:center}
.camwrap.small{width:100%;margin:8px 12px;width:calc(100% - 24px)}
.camwrap.small .camtip{display:none}

/* ═══ Toast ═══ */
.toast{position:fixed;top:60px;left:50%;transform:translateX(-50%);background:var(--txt);color:#fff;padding:10px 18px;border-radius:var(--r);font-size:14px;z-index:200;opacity:0;transition:opacity .2s;pointer-events:none;max-width:80vw}
.toast.show{opacity:1}