/* 业务员出差访客管理系统 · 高保真原型（移动端优先） */
:root{
  --brand:#1677ff; --brand-d:#0e5fd8; --bg:#f2f3f5; --card:#fff;
  --t1:#1f2329; --t2:#646a73; --t3:#8f959e; --line:#e5e6eb;
  --ok:#00b42a; --warn:#ff7d00; --err:#f53f3f; --purple:#722ed1;
  --radius:10px; --shadow:0 1px 3px rgba(0,0,0,.06);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{background:var(--bg);color:var(--t1);font:14px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
#app{max-width:480px;margin:0 auto;min-height:100%;background:var(--bg);position:relative;display:flex;flex-direction:column}

/* 顶部导航 */
.nav{position:sticky;top:0;z-index:30;height:48px;display:flex;align-items:center;gap:6px;
  background:var(--brand);color:#fff;padding:0 10px;font-weight:600;box-shadow:0 1px 4px rgba(22,119,255,.25)}
.nav-title{flex:1;text-align:center;font-size:16px}
.nav-back{width:32px;height:32px;border:0;background:rgba(255,255,255,.16);color:#fff;border-radius:8px;font-size:20px;line-height:1;cursor:pointer}
.nav-back[hidden]{visibility:hidden;display:block}
.nav-right{min-width:32px;text-align:right;font-size:12px;font-weight:400;opacity:.9}

/* 视图容器 */
.view{flex:1;padding:10px 10px 70px;overflow-x:hidden}

/* 底部标签 */
.tabbar{position:fixed;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;height:56px;background:#fff;
  border-top:1px solid var(--line);display:flex;z-index:30;padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--t3);font-size:11px;text-decoration:none;cursor:pointer;position:relative}
.tabbar a i{font-style:normal;font-size:18px;line-height:1}
.tabbar a.on{color:var(--brand)}
.tabbar a.on i{transform:translateY(-1px)}
.badge{position:absolute;top:4px;right:calc(50% - 22px);background:var(--err);color:#fff;font-size:10px;
  padding:0 5px;border-radius:9px;line-height:15px;min-width:15px;text-align:center}
.badge:empty{display:none}

/* 卡片与通用 */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px;margin-bottom:10px}
.card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.card-h h3{margin:0;font-size:15px;font-weight:600}
.card-h .more{color:var(--brand);font-size:12px;cursor:pointer}
.muted{color:var(--t2)}.small{font-size:12px}.tiny{font-size:11px;color:var(--t3)}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px dashed var(--line)}
.row:last-child{border-bottom:0}
.row .k{color:var(--t2);font-size:12.5px;flex:0 0 auto}
.row .v{font-weight:500;text-align:right;word-break:break-all}
.hr{height:1px;background:var(--line);margin:10px 0}
.empty{text-align:center;color:var(--t3);padding:26px 0;font-size:13px}

/* 用户卡 */
.hero{background:linear-gradient(135deg,#1677ff,#3f8cff);color:#fff;border-radius:12px;padding:14px;margin-bottom:10px;
  box-shadow:0 4px 12px rgba(22,119,255,.25)}
.hero .who{display:flex;align-items:center;gap:10px}
.hero .avatar{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}
.hero .name{font-size:16px;font-weight:600}
.hero .sub{font-size:11.5px;opacity:.9}
.hero .stats{display:flex;gap:8px;margin-top:12px}
.hero .stat{flex:1;background:rgba(255,255,255,.16);border-radius:8px;padding:7px 6px;text-align:center;cursor:pointer}
.hero .stat b{display:block;font-size:17px}
.hero .stat span{font-size:11px;opacity:.92}

/* 快捷入口 */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.grid .g{background:#fff;border-radius:10px;padding:10px 4px;text-align:center;box-shadow:var(--shadow);cursor:pointer}
.grid .g i{font-style:normal;font-size:20px;display:block;margin-bottom:4px}
.grid .g span{font-size:11px;color:var(--t1)}
.grid .g:active{transform:scale(.96)}

/* 状态标签 */
.st{display:inline-block;font-size:11px;padding:1px 7px;border-radius:20px;font-weight:500;white-space:nowrap}
.st-0{background:#e8f3ff;color:#1677ff}          /* 未开始 */
.st-1{background:#fff7e6;color:#ff7d00}          /* 访客中 */
.st-2{background:#f5e8ff;color:#722ed1}          /* 待补报告 */
.st-3{background:#e8ffea;color:#00b42a}          /* 已完成 */
.st-4{background:#ffece8;color:#f53f3f}          /* 逾期未报告 */
.st-5{background:#f2f3f5;color:#8f959e}          /* 已取消 */
.st-app{background:#f2f3f5;color:#646a73}

/* 列表项 */
.item{background:#fff;border-radius:10px;padding:12px;margin-bottom:8px;box-shadow:var(--shadow);cursor:pointer}
.item:active{background:#fafbfc}
.item .l1{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.item .l1 b{font-size:14.5px;font-weight:600}
.item .l2{font-size:12px;color:var(--t2);display:flex;gap:10px;flex-wrap:wrap}
.item .code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--t3)}

/* 表单 */
.field{margin-bottom:12px}
.field>label{display:block;font-size:12.5px;color:var(--t2);margin-bottom:5px;font-weight:500}
.field>label .req{color:var(--err);margin-left:2px}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:8px;background:#fff;
  padding:9px 10px;font-size:14px;color:var(--t1);font-family:inherit;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 2px rgba(22,119,255,.12)}
textarea{min-height:70px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8f959e 50%),linear-gradient(135deg,#8f959e 50%,transparent 50%);
  background-position:calc(100% - 15px) 17px,calc(100% - 10px) 17px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.err-text{color:var(--err);font-size:11.5px;margin-top:4px}
.hint{color:var(--t3);font-size:11.5px;margin-top:4px}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--err);background:#fffafa}
.readonly{background:#f7f8fa;color:var(--t2)}
.inline{display:flex;gap:8px}
.inline>*{flex:1}
.switch-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--line)}
.sw{width:44px;height:25px;border-radius:20px;background:#d7d9de;position:relative;transition:.2s;flex:0 0 auto;cursor:pointer}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:#fff;transition:.2s}
.sw.on{background:var(--brand)}.sw.on::after{left:21px}
.checklist label{display:flex;align-items:flex-start;gap:8px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13px;cursor:pointer}
.checklist input{width:18px;height:18px;flex:0 0 auto;margin-top:1px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.chip{border:1px solid var(--line);border-radius:20px;padding:6px 12px;font-size:12.5px;cursor:pointer;background:#fff;color:var(--t2)}
.chip.on{border-color:var(--brand);background:#e8f3ff;color:var(--brand);font-weight:500}

/* 按钮 */
.btn{display:block;width:100%;border:0;border-radius:9px;padding:12px;font-size:15px;font-weight:600;background:var(--brand);color:#fff;cursor:pointer;font-family:inherit}
.btn:active{background:var(--brand-d)}
.btn.ghost{background:#fff;color:var(--brand);border:1px solid var(--brand)}
.btn.gray{background:#f2f3f5;color:var(--t1)}
.btn.danger{background:var(--err)}
.btn+.btn{margin-top:8px}
.footer-bar{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;background:#fff;border-top:1px solid var(--line);
  padding:9px 10px calc(9px + env(safe-area-inset-bottom));z-index:28;display:flex;gap:8px}
.footer-bar .btn{margin:0}

/* 分区标题 */
.sec-t{font-size:12.5px;color:var(--t2);font-weight:600;margin:14px 2px 6px;display:flex;align-items:center;gap:6px}
.sec-t::before{content:"";width:3px;height:12px;border-radius:2px;background:var(--brand)}

/* 提示条 */
.notice{border-radius:9px;padding:10px;font-size:12.5px;line-height:1.55;margin-bottom:10px}
.notice.info{background:#e8f3ff;color:#0e5fd8;border:1px solid #d0e4ff}
.notice.warn{background:#fff7e6;color:#a15c00;border:1px solid #ffe4ba}
.notice.err{background:#ffece8;color:#b32b22;border:1px solid #ffd2cc}
.notice.ok{background:#e8ffea;color:#0a8f2c;border:1px solid #c8f5d0}

/* toast & sheet */
.toast{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%) scale(.96);background:rgba(0,0,0,.82);color:#fff;
  padding:11px 16px;border-radius:9px;font-size:13.5px;max-width:78%;text-align:center;z-index:99;opacity:0;pointer-events:none;transition:.18s;line-height:1.55}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.sheet-wrap{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:80;display:flex;align-items:flex-end;justify-content:center}
.sheet-wrap[hidden]{display:none}
.sheet{background:#fff;width:100%;max-width:480px;border-radius:14px 14px 0 0;max-height:78vh;overflow:auto;padding:16px 14px calc(16px + env(safe-area-inset-bottom))}
.sheet h3{margin:0 0 10px;font-size:16px}

/* 规则页 */
.br{background:#fff;border-radius:10px;padding:11px 12px;margin-bottom:8px;box-shadow:var(--shadow)}
.br .id{font-family:ui-monospace,monospace;font-size:11px;color:var(--brand);font-weight:600}
.br .tt{font-size:13.5px;font-weight:600;margin:3px 0}
.br .dd{font-size:12px;color:var(--t2)}
.demo-btns{display:flex;flex-direction:column;gap:8px}
.kv-calc{background:#f7f8fa;border-radius:9px;padding:10px;font-size:12.5px;line-height:1.8}
.kv-calc b{color:var(--t1)}
.over{color:var(--err);font-weight:600}
.okv{color:var(--ok);font-weight:600}

@media (min-width:481px){
  body{background:#e9ebef}
  #app{box-shadow:0 0 24px rgba(0,0,0,.08);min-height:100vh}
}