:root{
  --green:#07C160; --green-d:#06AD56; --green-bg:#E6F9EE;
  --bg:#EDEDED; --card:#FFFFFF; --text:#191919; --sub:#7A7E83;
  --line:#E8E8E8; --red:#FA5151; --orange:#FA9D3B; --blue:#10AEFF;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  color:var(--text); background:#F2F2F2; display:flex; justify-content:center;
}
.app{
  width:100%; max-width:780px; min-height:100vh; background:var(--bg);
  display:flex; flex-direction:column; position:relative; box-shadow:0 0 30px rgba(0,0,0,.07);
}

/* ---------- 顶部 ---------- */
.appbar{
  position:sticky; top:0; z-index:20; background:#EDEDED; border-bottom:1px solid var(--line);
  padding:10px 14px 9px; display:flex; align-items:center; gap:10px;
}
.appbar h1{font-size:17px; margin:0; font-weight:600; letter-spacing:.3px; flex:1}
.appbar .week{font-size:12px; color:var(--sub); text-align:right; line-height:1.3}
.savehint{
  font-size:11px; color:var(--sub); text-align:right; padding:0 14px 7px;
  background:#EDEDED; border-bottom:1px solid var(--line); line-height:1.4;
}
.savehint.on{color:#07C160}
.savehint.warn{color:#FA9D3B}
.lswarn{
  font-size:12px; line-height:1.6; color:#8A4B00; background:#FFF6E5;
  border-bottom:1px solid #F3D9A8; padding:9px 14px;
}
.lswarn .mini{color:#9C6A28}

/* ---------- 主体 ---------- */
main{flex:1; padding:12px 12px 92px}
.view{display:none}
.view.active{display:block; animation:fade .18s ease}
@keyframes fade{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}

.card{background:var(--card); border-radius:10px; margin-bottom:12px; overflow:hidden}
.card-hd{
  padding:12px 14px 6px; font-size:13px; color:var(--sub);
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.card-hd b{color:var(--text); font-size:15px; margin:0 2px}
.card-hd .right{font-size:12px}
.card-bd{padding:14px}

.row{display:flex; align-items:center; gap:10px; padding:12px 14px; border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .grow{flex:1; min-width:0}
.row .t1{font-size:15px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .t2{font-size:12px; color:var(--sub); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.field{padding:11px 14px; border-top:1px solid var(--line)}
.field:first-child{border-top:0}
.field > label{display:block; font-size:12px; color:var(--sub); margin-bottom:7px}

input[type=text],input[type=number],input[type=date],select{
  width:100%; padding:9px 10px; border:1px solid #DCDCDC; border-radius:8px; background:#FAFAFA;
  font-size:15px; color:var(--text); outline:none; font-family:inherit; -webkit-appearance:none;
}
input:focus,select:focus{border-color:var(--green); background:#fff; box-shadow:0 0 0 2px rgba(7,193,96,.12)}
select{background-image:none}

/* ---------- 胶囊 ---------- */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  padding:7px 13px; border-radius:16px; background:#F2F2F2; border:1px solid transparent;
  font-size:14px; cursor:pointer; user-select:none; transition:.12s;
}
.chip:hover{background:#EAEAEA}
.chip.on{background:var(--green-bg); border-color:var(--green); color:var(--green); font-weight:600}
.chip.on:hover{background:#DCF5E7}

/* ---------- 按钮 ---------- */
.btn{
  display:block; width:100%; padding:13px; border-radius:10px; border:0; background:var(--green);
  color:#fff; font-size:16px; font-weight:600; cursor:pointer; font-family:inherit; transition:.12s;
}
.btn:hover{background:var(--green-d)}
.btn:active{transform:scale(.995)}
.btn.ghost{background:#fff; color:var(--text); border:1px solid var(--line); font-weight:500}
.btn.ghost:hover{background:#F7F7F7}
.btn.danger{background:#fff; color:var(--red); border:1px solid #FFD9D9}
.btn.danger:hover{background:#FFF5F5}
.btn.small{width:auto; display:inline-block; padding:8px 14px; font-size:14px; border-radius:8px}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn + .btn{margin-top:10px}

/* ---------- 徽章 / 头像 ---------- */
.badge{display:inline-block; font-size:11px; padding:2px 7px; border-radius:9px; background:var(--green-bg); color:var(--green); white-space:nowrap}
.badge.leave{background:#FFF0F0; color:var(--red)}
.badge.other{background:#FFF6E5; color:var(--orange)}
.badge.gray{background:#F2F2F2; color:var(--sub)}
.badge.blue{background:#E8F6FF; color:var(--blue)}
.avatar{
  width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#5BD68A,var(--green));
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:600; flex:0 0 auto;
}
.avatar.off{background:linear-gradient(135deg,#C9C9C9,#AFAFAF)}

/* ---------- 搜索建议 ---------- */
.sugbox{position:absolute; left:14px; right:14px; top:100%; z-index:60; background:#fff; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.14); max-height:280px; overflow:auto; margin-top:4px}
.sugbox div{padding:10px 12px; border-top:1px solid var(--line); cursor:pointer; font-size:14px; line-height:1.35}
.sugbox div:first-child{border-top:0}
.sugbox div:hover,.sugbox div.hl{background:#F5F5F5}
.sugbox small{color:var(--sub); font-size:11px; margin-left:6px}

/* ---------- 表格 ---------- */
table.tbl{width:100%; border-collapse:collapse; font-size:13px}
table.tbl th{background:#F7F7F7; color:var(--sub); font-weight:500; padding:8px 6px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
table.tbl td{padding:9px 6px; border-bottom:1px solid var(--line); vertical-align:top}
table.tbl tr:last-child td{border-bottom:0}
table.tbl td.n{font-weight:500}
.tag{display:inline-block; font-size:11px; padding:1px 6px; border-radius:6px; background:#F2F2F2; color:var(--sub); margin:1px 3px 1px 0}
.tag.flex{background:#FFF3CC; color:#B07A00; font-weight:600}
.chkline{display:flex; gap:6px; align-items:flex-start; font-size:13px; line-height:1.5; color:var(--sub); cursor:pointer}
.chkline input{margin-top:2px; flex:0 0 auto}
.chkline strong{color:#B07A00}

/* ---------- 底部 tab ---------- */
.tabbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:780px;
  background:#F7F7F7; border-top:1px solid var(--line); display:flex; padding:6px 0 7px; z-index:40;
}
.tabbar button{
  flex:1; background:none; border:0; display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--sub); font-size:11px; padding:2px 0; cursor:pointer; font-family:inherit; transition:.12s;
}
.tabbar button.on{color:var(--green)}
.tabbar svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

/* ---------- 其它 ---------- */
.empty{text-align:center; color:var(--sub); font-size:13px; padding:30px 12px}
.hint{font-size:12px; color:var(--sub); padding:10px 14px; line-height:1.6}
.hint b{color:var(--text)}
.mini{font-size:11px; color:var(--sub)}
.split{height:8px}
#toast{
  position:fixed; left:50%; top:45%; transform:translate(-50%,-50%); background:rgba(0,0,0,.78); color:#fff;
  padding:11px 20px; border-radius:10px; font-size:14px; opacity:0; pointer-events:none; transition:opacity .22s;
  z-index:99; max-width:78%; text-align:center;
}
#toast.show{opacity:1}
.warnish{color:var(--red)}
.okish{color:var(--green)}
.inline-form{border-top:1px solid var(--line); background:#FAFAFA; padding:12px 14px}
.inline-form .field{padding:8px 0; border-top:0}
.inline-form .field > label{font-size:11px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.stat{display:flex; gap:10px; padding:12px 14px}
.stat div{flex:1; background:#FAFAFA; border-radius:8px; padding:9px 10px; text-align:center}
.stat b{display:block; font-size:18px; line-height:1.2}
.stat span{font-size:11px; color:var(--sub)}
.v2bar{font-size:11px;color:#1D6FD0;background:#E8F1FF;padding:5px 14px;border-bottom:1px solid #C9DDFA;text-align:center}