/* ========== 出差周填报 · 移动端样式 ========== */
:root{
  --primary:#1F4E9C; --primary-d:#173B75; --primary-l:#3A6CC4;
  --accent:#E8F0FB; --accent-2:#F2F7FE; --band:#F7FAFF;
  --line:#DDE7F4; --line-2:#C9D6E8;
  --text:#1F2A3A; --text-2:#5A6B80; --text-3:#94A3B8;
  --ok:#1E8E5A; --ok-bg:#E7F5EE; --warn:#C0392B; --slash:#8C9AAE;
  --radius:16px; --shadow:0 4px 18px rgba(31,78,156,.08);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:#EEF4FC;color:var(--text);min-height:100vh;
  padding-bottom:calc(84px + var(--safe-b));
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}

/* ===== 顶部 ===== */
.topbar{
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-l) 100%);
  color:#fff;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 14px;
  position:sticky;top:0;z-index:30;box-shadow:0 2px 12px rgba(23,59,117,.18);
}
.tb-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;max-width:640px;margin:0 auto;}
.topbar h1{margin:0;font-size:17.5px;font-weight:800;letter-spacing:.3px;}
.tb-sub{margin:4px 0 0;font-size:11.5px;opacity:.85;line-height:1.4;}
.whoami{
  display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.26);border-radius:20px;
  padding:5px 11px 5px 6px;font-size:12.5px;font-weight:700;white-space:nowrap;flex:0 0 auto;
}
.whoami .av{
  width:23px;height:23px;border-radius:50%;background:#fff;color:var(--primary-d);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;
}
.wkline{
  max-width:640px;margin:11px auto 0;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);border-radius:11px;padding:8px 12px;
  font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:7px;
}
.wkline:empty{display:none;}

/* ===== 内容 ===== */
.wrap{padding:14px 12px 8px;max-width:640px;margin:0 auto;}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:12px;}

.me-head{display:flex;align-items:center;gap:12px;}
.me-head .avatar{
  width:50px;height:50px;flex:0 0 50px;border-radius:15px;
  background:linear-gradient(135deg,var(--primary),var(--primary-l));color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;
}
.me-head .info{min-width:0;flex:1;}
.me-head .nm{font-size:18px;font-weight:800;line-height:1.25;}
.me-head .rl{font-size:12.5px;color:var(--text-2);margin-top:4px;line-height:1.45;}

.ro-warn{
  display:flex;align-items:center;gap:7px;margin-top:14px;
  background:var(--accent-2);border:1px solid #DCE8FA;border-radius:10px;
  padding:9px 11px;font-size:11.5px;color:var(--text-2);line-height:1.5;
}

/* 字段 */
.field{margin-bottom:16px;}
.field:last-child{margin-bottom:0;}
.flab{display:block;font-size:13px;font-weight:700;margin-bottom:8px;color:var(--text);}
.flab i{color:var(--warn);font-style:normal;}

.seg{display:flex;gap:10px;}
.seg button{
  flex:1;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;
  padding:14px 0;border-radius:12px;border:1.5px solid var(--line-2);
  background:#fff;color:var(--text-2);transition:.15s ease;
}
.seg button:active{transform:scale(.975);}
.seg button.on-y{background:var(--ok);border-color:var(--ok);color:#fff;box-shadow:0 3px 12px rgba(30,142,90,.28);}
.seg button.on-n{background:#8FA3BF;border-color:#8FA3BF;color:#fff;box-shadow:0 3px 12px rgba(143,163,191,.3);}

.ctrl{
  width:100%;font-family:inherit;font-size:16px;color:var(--text);
  padding:13px;border-radius:12px;border:1.5px solid var(--line);
  background:#fff;outline:none;transition:border-color .15s,box-shadow .15s;
  appearance:none;-webkit-appearance:none;
}
.ctrl:focus{border-color:var(--primary-l);box-shadow:0 0 0 3px var(--accent);}
input.ctrl::placeholder{color:#C3CCD8;}
.selwrap{position:relative;}
.selwrap::after{
  content:"";position:absolute;right:15px;top:50%;width:9px;height:9px;
  border-right:2px solid #8FA3BF;border-bottom:2px solid #8FA3BF;
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}
select.ctrl{padding-right:38px;}

.lockbox{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px;border-radius:12px;background:#F2F5F9;
  border:1.5px dashed #DDE3EB;color:var(--slash);font-size:14px;font-weight:600;
}
.lockbox .sl{font-size:16px;font-weight:400;}

.days{
  display:flex;align-items:baseline;gap:6px;padding:13px 14px;border-radius:12px;
  background:var(--accent-2);border:1.5px solid #DCE8FA;
}
.days b{font-size:26px;color:var(--primary-d);line-height:1;}
.days span{font-size:12.5px;color:var(--text-2);font-weight:700;}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:340px){ .grid2{grid-template-columns:1fr;} }

.hint{
  font-size:12px;color:var(--text-2);background:var(--accent-2);
  border-left:3px solid var(--primary-l);border-radius:8px;
  padding:10px 12px;line-height:1.6;margin-bottom:15px;
}

/* ===== 空态 / 错误 ===== */
.emptybox{text-align:center;padding:26px 14px;color:var(--text-3);}
.emptybox .ic{font-size:34px;margin-bottom:10px;opacity:.7;}
.eb-t{font-weight:800;font-size:15.5px;color:var(--text);margin-bottom:8px;}
.eb-c{font-size:13px;line-height:1.75;color:var(--text-2);}
.errd{font-size:11px;color:#B9C4D2;word-break:break-all;}

/* ===== 骨架屏 ===== */
.skeleton .sk-line{height:13px;border-radius:7px;background:linear-gradient(90deg,#EEF3FA 25%,#F7FAFF 50%,#EEF3FA 75%);background-size:200% 100%;animation:shimmer 1.3s infinite;margin-bottom:11px;}
.skeleton .sk-line:last-child{margin-bottom:0;}
.w40{width:40%}.w60{width:60%}.w90{width:90%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ===== 底栏 ===== */
.bottombar{position:fixed;left:0;right:0;bottom:0;z-index:40;}
.bottombar:empty{display:none;}
.bfoot{
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:11px 12px calc(11px + var(--safe-b));
  display:flex;gap:10px;align-items:center;max-width:640px;margin:0 auto;
}
.btn{
  font-family:inherit;font-weight:800;cursor:pointer;border-radius:13px;
  border:1.5px solid transparent;transition:.15s ease;white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-main{flex:1;background:var(--primary);color:#fff;font-size:16px;padding:15px 20px;box-shadow:0 4px 14px rgba(31,78,156,.26);}
.btn-main:disabled{background:#B9C4D6;box-shadow:none;}
.btn-ghost{background:#fff;color:var(--primary-d);border-color:var(--line-2);font-size:13.5px;padding:14px 15px;flex:0 0 auto;}
.btn-line{width:100%;font-size:15px;padding:14px;background:#fff;color:var(--primary-d);border-color:var(--line-2);}
.btn-lg{width:100%;font-size:16px;padding:15px;background:var(--primary);color:#fff;}

/* ===== 弹层 ===== */
.mask{
  position:fixed;inset:0;background:rgba(18,32,52,.5);z-index:100;
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.mask.show{opacity:1;pointer-events:auto;}
.sheet{
  background:#fff;width:100%;max-width:640px;border-radius:20px 20px 0 0;
  padding:20px 16px calc(20px + var(--safe-b));
  transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.3,1);
  max-height:88vh;display:flex;flex-direction:column;
}
.mask.show .sheet{transform:translateY(0);}
.sheet h3{margin:0 0 6px;font-size:17px;font-weight:800;}
.sheet .desc{font-size:12.5px;color:var(--text-2);line-height:1.6;margin:0 0 14px;}
.picker{flex:1;overflow:hidden;display:flex;flex-direction:column;margin-bottom:14px;}
.search{
  width:100%;font-family:inherit;font-size:15px;padding:12px 13px;border-radius:11px;
  border:1.5px solid var(--line);outline:none;margin-bottom:10px;background:#F8FAFE;
}
.search:focus{border-color:var(--primary-l);background:#fff;}
.picklist{overflow-y:auto;display:flex;flex-direction:column;gap:8px;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
.pick{
  display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:12px;
  border:1.5px solid var(--line);background:#fff;cursor:pointer;transition:.15s;flex:0 0 auto;
}
.pick:active{background:var(--accent-2);}
.pick.sel{border-color:var(--primary-l);background:var(--accent-2);}
.pick .av{width:36px;height:36px;flex:0 0 36px;border-radius:11px;background:var(--accent);color:var(--primary-d);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;}
.pick.sel .av{background:var(--primary);color:#fff;}
.pick .tx{flex:1;min-width:0;}
.pick .nm{font-size:15px;font-weight:800;}
.pick .tt{font-size:11.5px;color:var(--text-2);margin-top:3px;line-height:1.4;}
.pick .rd{width:19px;height:19px;flex:0 0 19px;border-radius:50%;border:2px solid var(--line-2);display:flex;align-items:center;justify-content:center;}
.pick.sel .rd{border-color:var(--primary);background:var(--primary);}
.pick.sel .rd::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff;}

/* ===== 完成页 ===== */
.donebox{text-align:center;padding:12px 0 20px;}
.okc{
  width:62px;height:62px;margin:0 auto 14px;border-radius:50%;
  background:var(--ok-bg);color:var(--ok);font-size:32px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  animation:pop .4s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.dtitle{font-size:19px;font-weight:800;}
.dsub{font-size:13px;color:var(--text-2);margin-top:6px;}
.recap{border:1px solid var(--line);border-radius:13px;overflow:hidden;margin-bottom:14px;}
.rc-row{display:flex;justify-content:space-between;gap:12px;padding:11px 13px;font-size:13.5px;border-bottom:1px solid var(--line);}
.rc-row:last-child{border-bottom:none;}
.rc-row:nth-child(odd){background:#FBFDFF;}
.rc-row span{color:var(--text-2);flex:0 0 auto;}
.rc-row b{text-align:right;font-weight:700;word-break:break-all;}
.rc-row b.ok{color:var(--ok);}
.rc-row b.gray{color:var(--text-3);}

/* ===== Toast ===== */
.toast{
  position:fixed;left:50%;bottom:100px;transform:translate(-50%,14px);
  background:rgba(24,38,58,.94);color:#fff;font-size:13.5px;font-weight:700;
  padding:12px 20px;border-radius:24px;z-index:200;
  opacity:0;pointer-events:none;transition:.24s ease;white-space:nowrap;
  max-width:88vw;overflow:hidden;text-overflow:ellipsis;
}
.toast.show{opacity:1;transform:translate(-50%,0);}