/* 骞小宝请求支援任务清单 —— 全局样式
   规范：主色 #FF8A00 / 内容 12px 深灰 / 标题 14px 黑色 / 页眉 LOGO 小巧 */
:root{
  --primary:#FF8A00;
  --primary-soft:#FFF3E6;
  --primary-dark:#E87800;
  --title:#111111;
  --text:#4A4A4A;
  --muted:#999999;
  --line:#ECECEC;
  --bg:#F6F6F6;
  --ok:#2E9E5B;
  --warn:#D98026;
  --red:#D0453B;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);font-size:12px;line-height:1.7;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
h1,h2,h3,h4{font-size:14px;color:var(--title);font-weight:700;margin:0;line-height:1.5}
p,dl,dd,dt,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
a{color:var(--primary-dark);text-decoration:none}
input,textarea,select,button{font-family:inherit;font-size:12px;color:var(--text)}
input,textarea,select{
  width:100%;background:#fff;border:1px solid #E2E2E2;border-radius:6px;
  padding:8px 10px;outline:none;line-height:1.6;
}
textarea{resize:vertical;min-height:76px}
input:focus,textarea:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft)}
label{display:block;margin-bottom:4px;color:var(--title)}

/* ---------- 页眉 ---------- */
.hd{
  display:flex;align-items:center;gap:10px;background:#fff;
  padding:9px 14px;border-bottom:2px solid var(--primary);
  position:sticky;top:0;z-index:30;
}
.hd .logo{width:38px;height:38px;object-fit:cover;border-radius:8px;flex:none;border:1px solid #F0E2D0}
.hd-txt{min-width:0}
.hd-txt h1{font-size:14px;color:var(--title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-txt p{font-size:12px;color:var(--muted);line-height:1.4}
.hd-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.hd-right .who{color:var(--muted);max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link-btn{background:none;border:none;color:var(--primary-dark);padding:2px 0;cursor:pointer}

/* ---------- 布局 ---------- */
.wrap{max-width:560px;margin:0 auto;padding:12px 12px 40px}
.wrap.wide{max-width:1080px}
.tabs{display:flex;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:12px}
.tabs button{
  flex:1;border:none;background:#fff;padding:10px 4px;cursor:pointer;
  color:var(--text);border-bottom:2px solid transparent;
}
.tabs button.on{color:var(--primary-dark);border-bottom-color:var(--primary);font-weight:700;background:var(--primary-soft)}

.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px;box-shadow:0 1px 3px rgba(0,0,0,.02)}
.card-top{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}
.card-top h2{flex:1;min-width:0}
.reward{background:var(--primary-soft);border-left:3px solid var(--primary);border-radius:4px;padding:7px 10px;margin-bottom:10px;color:var(--title)}
.reward b{color:var(--primary-dark)}
.kv > div{display:flex;gap:8px;padding:5px 0;border-bottom:1px dashed #F0F0F0}
.kv > div:last-child{border-bottom:none}
.kv dt{width:62px;flex:none;min-width:0;color:var(--muted)}
.kv dd{flex:1;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}
.meta{display:flex;justify-content:space-between;align-items:center;margin:10px 0 6px;color:var(--muted)}
.bar{height:5px;background:#F0F0F0;border-radius:3px;overflow:hidden;margin-bottom:12px}
.bar i{display:block;height:100%;background:var(--primary);border-radius:3px}

.btn{
  display:inline-block;border:none;border-radius:6px;padding:8px 14px;cursor:pointer;
  background:var(--primary);color:#fff;font-weight:700;text-align:center;
}
.btn:active{background:var(--primary-dark)}
.btn.block{display:block;width:100%}
.btn.ghost{background:#fff;color:var(--primary-dark);border:1px solid var(--primary)}
.btn.gray{background:#F0F0F0;color:#8A8A8A}
.btn.danger{background:#fff;color:var(--red);border:1px solid #F0C9C5}
.btn.small{padding:5px 10px;font-weight:400}
.btn:disabled,.btn.disabled{background:#D8D8D8;color:#FFFFFF;cursor:not-allowed;box-shadow:none;border:none}
.btn-row{display:flex;gap:8px;margin-top:10px}
.btn-row .btn{flex:1}

.badge{display:inline-block;padding:1px 7px;border-radius:10px;font-size:12px;line-height:1.6;white-space:nowrap}
.badge.open{background:var(--primary-soft);color:var(--primary-dark)}
.badge.closed{background:#F0F0F0;color:var(--muted)}
.badge.pending{background:#FFF4E0;color:var(--warn)}
.badge.approved{background:#E8F4FF;color:#2C73B8}
.badge.rejected{background:#FDECEA;color:var(--red)}
.badge.submitted{background:#F0EAFF;color:#7553B5}
.badge.paid_pending{background:#FFF0DC;color:#C5760A}
.badge.done{background:#E6F5EB;color:var(--ok)}

.hint{color:var(--muted);margin-top:8px}
.notice{background:var(--primary-soft);border-radius:6px;padding:8px 10px;margin-bottom:10px}
.empty{text-align:center;color:var(--muted);padding:36px 10px;background:#fff;border:1px dashed var(--line);border-radius:10px}

/* ---------- 流程进度 ---------- */
.steps{display:flex;align-items:flex-start;margin:12px 0}
.step{flex:1;text-align:center;position:relative;color:var(--muted)}
.step .dot{width:16px;height:16px;border-radius:50%;background:#E4E4E4;color:#fff;margin:0 auto 4px;line-height:16px;font-size:12px}
.step.on .dot{background:var(--primary)}
.step.on{color:var(--primary-dark)}
.step:not(:last-child):after{content:"";position:absolute;top:8px;left:60%;width:80%;height:1px;background:#E4E4E4}
.step.done:not(:last-child):after{background:var(--primary)}
.step span{display:block;line-height:1.4}

/* ---------- 表单 / 弹层 ---------- */
.field{margin-bottom:12px}
.field .tip{color:var(--muted);margin-top:3px}
.mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:80;display:flex;align-items:center;justify-content:center;padding:16px}
.mask[hidden]{display:none}
.modal{background:#fff;border-radius:12px;width:100%;max-width:360px;padding:18px;max-height:86vh;overflow:auto}
.modal.lg{max-width:560px}
.modal h3{margin-bottom:12px}
.modal .btn-row{margin-top:16px}
[hidden]{display:none !important}
.toast{
  position:fixed;left:50%;top:18%;transform:translateX(-50%);z-index:99;
  background:rgba(30,30,30,.9);color:#fff;border-radius:6px;padding:9px 16px;
  max-width:82%;text-align:center;display:none;
}
.toast.show{display:block}
.filebox{border:1px dashed var(--primary);background:var(--primary-soft);border-radius:8px;padding:12px;text-align:center;margin:10px 0}
.filebox input{padding:6px 0;border:none;background:transparent}
.progress{height:5px;background:#F0F0F0;border-radius:3px;overflow:hidden;margin-top:8px;display:none}
.progress i{display:block;height:100%;width:0;background:var(--primary)}
.proof{margin:8px 0;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:#FAFAFA;padding:8px}
.proof img{display:block;max-width:100%;max-height:220px;margin:0 auto}
.proof video{display:block;max-width:100%;max-height:220px;margin:0 auto;background:#000}
.modal .proof img,.modal .proof video{max-height:58vh}
.media-err{color:#C0392B}
.divider{height:1px;background:var(--line);margin:12px 0}
.section-title{display:flex;align-items:center;justify-content:space-between;margin:16px 0 8px}
.section-title h2{font-size:14px}

/* ---------- 管理后台 ---------- */
.admin-login{max-width:340px;margin:60px auto}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;vertical-align:top;word-break:break-word}
th{background:#FAFAFA;color:var(--title);font-weight:700;white-space:nowrap}
.table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:8px}
.tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.tools select{width:auto;min-width:160px}
.pill{display:inline-block;background:#F5F5F5;border-radius:4px;padding:1px 6px;color:var(--muted)}
.stat{display:flex;gap:10px;margin-bottom:12px}
.stat > div{flex:1;background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px;text-align:center}
.stat b{display:block;color:var(--primary-dark);font-size:14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.form-grid .full{grid-column:1 / -1}
@media (max-width:640px){
  .form-grid{grid-template-columns:1fr}
  .hd-txt p{display:none}
  .wrap{padding:10px 10px 32px}
}