/* 电控需求流转系统 — H5 样式（移动优先，浅色） */
:root {
  --primary: #1677ff;
  --primary-dark: #0958d9;
  --bg: #f2f4f7;
  --card: #ffffff;
  --text: #1f2329;
  --text-2: #5e6672;
  --text-3: #8f959e;
  --border: #e5e6eb;
  --border-2: #eef0f3;
  --red: #e53935;
  --orange: #f57c00;
  --blue: #1e88e5;
  --green: #2e9e5b;
  --purple: #6a3fd6;
  --gray: #9aa1ab;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(20, 30, 50, 0.06), 0 6px 20px rgba(20, 30, 50, 0.05);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* 全屏水印层：操作人 名字+日期，浅灰 30% 透明度平铺，不阻挡操作 */
#wmLayer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-repeat: repeat;
}
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
  background: rgba(214, 219, 226, 0.4); /* 其他页面：浅灰，透明度 40% */
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

#app { max-width: 760px; margin: 0 auto; padding-bottom: 84px; min-height: 100vh; }

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(135deg, #1677ff, #0d5cd7);
  color: #fff; padding: 14px 16px 16px;
  box-shadow: 0 2px 10px rgba(22, 119, 255, 0.22);
}
.topbar .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.topbar h1 { font-size: 17px; margin: 0; font-weight: 600; letter-spacing: .3px; }
.topbar .sub { font-size: 12px; opacity: .85; margin-top: 3px; }
.topbar .who { font-size: 12px; background: rgba(255,255,255,.18); padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.topbar #switchBtn { background: rgba(255,255,255,.18); color: #fff; border: 0; white-space: nowrap; }
.topbar .back { background: none; border: 0; color: #fff; font-size: 20px; padding: 0 6px 0 0; cursor: pointer; line-height: 1; }

/* ---------- 通用 ---------- */
.wrap { padding: 12px; }
.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px; margin-bottom: 12px;
}
.card.tight { padding: 12px; }
.card-title { font-size: 15px; font-weight: 600; margin: 0 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--text-3); font-size: 12px; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; }
.divider { height: 1px; background: var(--border-2); margin: 12px 0; }
.empty { text-align: center; color: var(--text-3); padding: 40px 16px; font-size: 13px; }
.empty .big { font-size: 34px; opacity: .35; display: block; margin-bottom: 8px; }

/* ---------- 徽章 ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; padding: 2px 8px; border-radius: 20px;
  background: #eef1f5; color: var(--text-2); white-space: nowrap; line-height: 1.6;
}
.badge.solid { color: #fff; }
.badge.red { background: #fdecea; color: #c62828; }
.badge.orange { background: #fff4e5; color: #b26a00; }
.badge.blue { background: #e8f2fe; color: #0d5cd7; }
.badge.green { background: #e8f7ee; color: #21794a; }
.badge.purple { background: #f1ebfd; color: #5731b0; }
.badge.gray { background: #f0f1f3; color: #6b7280; }
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

/* ---------- 按钮 ---------- */
.btn {
  border: 0; border-radius: 9px; padding: 9px 14px; font-size: 13px; font-weight: 500;
  background: var(--primary); color: #fff; cursor: pointer; font-family: inherit;
  transition: filter .15s, transform .05s;
}
.btn:active { transform: scale(.98); }
.btn:hover { filter: brightness(1.06); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: #f0f2f5; color: var(--text); }
.btn.line { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
.btn.danger { background: #e5484d; }
.btn.green { background: #2e9e5b; }
.btn.orange { background: #f57c00; }
.btn.sm { padding: 6px 11px; font-size: 12px; border-radius: 8px; }
.btn.block { width: 100%; }
.btn-group { display: flex; gap: 8px; }
.btn-group .btn { flex: 1; }

/* ---------- 表单 ---------- */
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 5px; font-weight: 500; }
.field label .req { color: var(--red); }
input[type=text], input[type=number], input[type=password], input[type=datetime-local], input[type=date], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px;
  font-size: 14px; font-family: inherit; background: #fff; color: var(--text); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(22,119,255,.1); }
textarea { resize: vertical; min-height: 66px; line-height: 1.6; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238f959e'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 28px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.switch { display: flex; align-items: center; gap: 8px; font-size: 13px; }

/* ---------- 条目编辑行 ---------- */
.item-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.item-row .idx {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: #e8f2fe; color: var(--primary);
  font-size: 12px; display: flex; align-items: center; justify-content: center; margin-top: 9px; font-weight: 600;
}
.item-row .del { flex: none; background: none; border: 0; color: var(--text-3); font-size: 17px; padding: 8px 4px; cursor: pointer; }

/* ---------- 需求单条目卡 ---------- */
.req-item { border: 1px solid var(--border-2); border-radius: 10px; padding: 11px 12px; margin-bottom: 10px; background: #fff; }
.req-item.pending { border-left: 3px solid #5e35b1; }
.req-item.approved { border-left: 3px solid var(--green); }
.req-item.modified { border-left: 3px solid #f57c00; }
.req-item.rejected { border-left: 3px solid var(--red); background: #fffafa; }
.req-item .content { font-size: 13.5px; line-height: 1.6; }
.req-item .meta { font-size: 11.5px; color: var(--text-3); margin-top: 7px; }
.req-item .old { font-size: 12px; color: var(--text-3); text-decoration: line-through; margin-top: 5px; }
.req-item .gm-comment { font-size: 12px; color: #8a5a00; background: #fff8e6; border-radius: 7px; padding: 6px 8px; margin-top: 7px; }

/* ---------- 需求单列表卡 ---------- */
.req-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 13px 14px; margin-bottom: 11px; cursor: pointer; transition: transform .08s; }
.req-card:active { transform: scale(.995); }
.req-card .t { font-size: 15px; font-weight: 600; margin-bottom: 6px; line-height: 1.4; }
.req-card .stats { display: flex; gap: 12px; font-size: 12px; color: var(--text-2); margin-top: 9px; flex-wrap: wrap; }
.req-card .stats b { font-weight: 600; }

/* ---------- 进度条 ---------- */
.pbar { height: 6px; background: #eef0f3; border-radius: 4px; overflow: hidden; }
.pbar > i { display: block; height: 100%; background: var(--primary); border-radius: 4px; transition: width .3s; }
.pbar.warn > i { background: var(--orange); }
.pbar.bad > i { background: var(--red); }
.pbar.good > i { background: var(--green); }

/* ---------- 详情头 ---------- */
.detail-head { background: #fff; padding: 14px 16px; border-bottom: 1px solid var(--border-2); }
.detail-head .no { font-size: 12px; color: var(--text-3); }
.detail-head .title { font-size: 17px; font-weight: 600; margin: 4px 0 8px; line-height: 1.4; }

/* ---------- 时间线 ---------- */
.tl { position: relative; padding-left: 18px; }
.tl::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.tl-item { position: relative; padding-bottom: 13px; }
.tl-item::before { content: ''; position: absolute; left: -18px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); }
.tl-item .act { font-size: 13px; font-weight: 500; }
.tl-item .note { font-size: 12px; color: var(--text-2); }
.tl-item .tm { font-size: 11px; color: var(--text-3); }

/* ---------- 任务卡 ---------- */
.task-card { border: 1px solid var(--border-2); border-radius: 10px; padding: 12px; margin-bottom: 10px; background: #fff; }
.task-card.overdue { border-color: #f7c9c7; background: #fffbfb; }
.task-card.done { opacity: .72; }
.task-card .tt { font-size: 13.5px; font-weight: 600; }
.task-card .req-box { font-size: 12px; color: var(--text-2); background: #f7f8fa; border-radius: 8px; padding: 7px 9px; margin-top: 8px; white-space: pre-wrap; }
.task-card .times { display: flex; gap: 14px; font-size: 12px; color: var(--text-2); margin-top: 8px; flex-wrap: wrap; }
.task-card .reason { font-size: 12px; color: #b3261e; background: #fdecea; border-radius: 7px; padding: 6px 8px; margin-top: 8px; }
/* 待确认接单：紫色系（等待责任工程师确认，尚未开始考核） */
.task-card.pending-confirm { border-color: #d9c7f7; background: #fbf8ff; }
.reason.pending, .task-card .reason.pending { color: #5b21b6; background: #f3ecfe; border-radius: 7px; padding: 6px 8px; margin-top: 8px; font-size: 12px; }
.owner-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.avatar { width: 20px; height: 20px; border-radius: 50%; background: #dbe6f7; color: #0d5cd7; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex: none; }

/* ---------- 统计 ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kpi { background: #fff; border-radius: 10px; padding: 11px 8px; text-align: center; box-shadow: var(--shadow); }
.kpi .v { font-size: 20px; font-weight: 700; line-height: 1.2; }
.kpi .l { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.kpi.red .v { color: var(--red); }
.kpi.blue .v { color: var(--primary); }
.kpi.green .v { color: var(--green); }
.kpi.orange .v { color: var(--orange); }

.gantt-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.gantt { position: relative; }
.gantt-head { display: flex; position: relative; height: 20px; border-bottom: 1px solid var(--border-2); }
.gantt-head .m { position: absolute; top: 0; font-size: 10px; color: var(--text-3); border-left: 1px solid var(--border-2); padding-left: 3px; height: 100%; line-height: 20px; }
.gantt-row { position: relative; height: 26px; border-bottom: 1px dashed #f2f3f5; }
.gantt-row .today { position: absolute; top: 0; bottom: 0; width: 1px; background: #ff5252; z-index: 3; }
.gantt-bar {
  position: absolute; top: 4px; height: 18px; border-radius: 5px; font-size: 10px; color: #fff;
  display: flex; align-items: center; padding: 0 5px; overflow: hidden; white-space: nowrap; z-index: 2; cursor: pointer;
}
.gantt-bar.todo { background: #7baaf7; }
.gantt-bar.pending { background: #9b6ff0; }
.gantt-bar.doing { background: var(--primary); }
.gantt-bar.done { background: #8bc9a3; }
.gantt-bar.overdue { background: var(--red); }
.person-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 13px; margin-bottom: 11px; }
.person-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }

/* ---------- Tab 切换 ---------- */
.tabs { display: flex; gap: 6px; background: #eaecef; padding: 3px; border-radius: 10px; margin-bottom: 12px; }
.tabs button { flex: 1; border: 0; background: none; padding: 8px 4px; font-size: 13px; border-radius: 8px; color: var(--text-2); font-family: inherit; cursor: pointer; }
.tabs button.on { background: #fff; color: var(--primary); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.07); }

/* ---------- 底部导航 ---------- */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; background: #fff; border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  max-width: 760px; margin: 0 auto;
}
.tabbar a { flex: 1; text-align: center; padding: 8px 2px 9px; font-size: 11px; color: var(--text-3); text-decoration: none; position: relative; }
.tabbar a.on { color: var(--primary); }
.tabbar a .ic { display: block; font-size: 18px; line-height: 1.25; }
.tabbar a .n { position: absolute; top: 4px; left: 50%; margin-left: 5px; background: var(--red); color: #fff; font-size: 9px; min-width: 15px; height: 15px; border-radius: 8px; line-height: 15px; padding: 0 4px; }

/* ---------- 悬浮按钮 ---------- */
.fab {
  position: fixed; bottom: calc(72px + env(safe-area-inset-bottom)); right: 16px; z-index: 45;
  background: var(--primary); color: #fff; border: 0; border-radius: 26px;
  padding: 12px 20px; font-size: 14px; font-weight: 600; box-shadow: 0 6px 18px rgba(22,119,255,.35);
  cursor: pointer; font-family: inherit;
}
@media (min-width: 792px) { .fab { right: max(16px, calc(50vw - 380px + 16px)); } .tabbar { border-radius: 0; } }

/* ---------- 弹层 ---------- */
.mask { position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 100; display: flex; align-items: flex-end; justify-content: center; animation: fade .18s; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.sheet { background: #fff; width: 100%; max-width: 760px; border-radius: 16px 16px 0 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); max-height: 88vh; overflow-y: auto; animation: up .22s; }
@keyframes up { from { transform: translateY(30px); opacity: .6 } to { transform: none; opacity: 1 } }
.sheet h3 { margin: 0 0 14px; font-size: 16px; }
.sheet-actions { display: flex; gap: 10px; margin-top: 16px; }
.sheet-actions .btn { flex: 1; }

/* ---------- 提示 ---------- */
#toast { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 300; background: rgba(28,32,38,.92); color: #fff; padding: 11px 18px; border-radius: 10px; font-size: 13.5px; max-width: 76vw; text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s; line-height: 1.5; }
#toast.on { opacity: 1; }

.notice-row { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border-2); }
.notice-row:last-child { border-bottom: 0; }
.notice-row .ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 14px; }

.hint { background: #fff8e6; border: 1px solid #ffe2a8; color: #8a5a00; border-radius: 9px; padding: 9px 11px; font-size: 12px; line-height: 1.6; }
.hint.blue { background: #eef5ff; border-color: #c9dcff; color: #0d5cd7; }
.hint.gray { background: #f5f6f8; border-color: var(--border); color: var(--text-2); }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--text-2); margin-top: 8px; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }

.member-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-2); }
.member-row:last-child { border-bottom: 0; }
.role-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.role-pick .badge { cursor: pointer; border: 1px solid transparent; }
.role-pick .badge.on { border-color: var(--primary); background: #e8f2fe; color: var(--primary); }

.kpi.purple .v { color: var(--purple); }

.mod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.mod {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: #f7f8fa; border: 1px solid var(--border-2); border-radius: 11px;
  padding: 12px 6px; text-decoration: none; color: var(--text); transition: transform .08s, background .15s;
}
.mod:active { transform: scale(.97); }
.mod:hover { background: #eef5ff; border-color: #c9dcff; }
.mod .ic { font-size: 21px; line-height: 1.2; }
.mod .t { font-size: 12.5px; font-weight: 600; }
.mod .s { font-size: 10.5px; color: var(--text-3); text-align: center; line-height: 1.35; }

.flowline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.flowline span { background: #eef5ff; color: #0d5cd7; border-radius: 20px; padding: 4px 10px; }
.flowline i { color: var(--text-3); font-style: normal; }

/* ---------- 任务编号 ---------- */
.tno-row { cursor: pointer; }
.tno-row:hover { color: var(--primary); text-decoration: underline; }
.no-plate { background: #f4f8ff; border: 1px solid #d3e3ff; border-radius: 11px; padding: 11px 12px; }
.no-plate .no { font-size: 17px; font-weight: 700; color: #0d5cd7; letter-spacing: .5px; margin-top: 2px; }

.kv { display: flex; flex-direction: column; gap: 5px; }
.kv > div { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 3px 0; border-bottom: 1px dashed #f2f3f5; }
.kv > div > span { color: var(--text-3); flex: none; }
.kv > div > b { font-weight: 600; text-align: right; word-break: break-all; }

.code-box {
  background: #f6f8fa; border: 1px solid var(--border); border-radius: 9px;
  padding: 10px 11px; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px; line-height: 1.65; color: #33415c; white-space: pre-wrap; word-break: break-all;
}
.link { color: var(--primary); font-size: 12.5px; text-decoration: none; }
.link:hover { text-decoration: underline; }

/* 6 个 Tab 时压缩间距，避免拥挤 */
.tabbar a { padding: 7px 1px 8px; font-size: 10.5px; }
.tabbar a .ic { font-size: 17px; }

/* ---------- 紧急程度：红色星星（满格 5 颗） ---------- */
.ustars {
  display: inline-flex; align-items: center; gap: 1px; line-height: 1; white-space: nowrap;
  vertical-align: -1px; font-weight: 400; letter-spacing: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
}
.ustars .st { font-size: 12px; font-style: normal; }
.ustars .st.on { color: #e53935; }   /* 实心红星 = 当前紧急程度 */
.ustars .st.off { color: #dfe2e7; }  /* 空心星 = 补足 5 颗星级刻度 */
.task-card .tt .ustars,
.detail-head .ustars { margin-left: 4px; font-size: 13px; }
.task-card .tt .ustars .st,
.detail-head .ustars .st { font-size: 13px; }
.no-plate .ustars { margin-left: 2px; }

/* ---------- 进入页（开屏层）：标语条 + 公司Logo + 应用图标 + 进入按钮 ---------- */
.slogan {
  background: linear-gradient(90deg, #ffd34d 0%, #ff8a3d 55%, #e8484d 100%);
  color: #fff;
  font-size: 14.5px; font-weight: 700; letter-spacing: 2.5px;
  text-align: center; padding: 7px 10px;
  text-shadow: 0 1px 2px rgba(150, 60, 0, 0.35);
}
#splash {
  position: fixed; inset: 0;
  width: 100vw; max-width: 100vw; /* 显式铺满视口，不受 #app 宽度约束 */
  z-index: 100;
  background: linear-gradient(180deg, #f6fafe 0%, #e3eefb 60%, #d8e9f9 100%);
  display: flex; flex-direction: column; align-items: center;
  transition: opacity 0.35s ease;
}
#splash.hide { opacity: 0; pointer-events: none; }
#splash .splash-slogan { width: 100%; flex: none; }
.splash-inner {
  text-align: center; padding: 4vh 20px 20px; max-width: 400px; width: 100%;
  display: flex; flex-direction: column; align-items: center; /* 所有子元素严格共用一条垂直中心线 */
}
.splash-logo { width: 150px; max-width: 46%; margin-bottom: 4px; flex: none; }
.splash-code {
  font-size: 12px; font-weight: 700; letter-spacing: 4px;
  color: var(--text-3); margin-bottom: 18px; flex: none;
}
.splash-icon { width: 88px; height: 88px; border-radius: 20px; object-fit: cover; box-shadow: 0 6px 18px rgba(30, 64, 120, 0.25); display: block; margin: 0 auto 16px; flex: none; }
.splash-title { font-size: 22px; letter-spacing: 4px; margin: 0 0 6px; color: var(--text); font-weight: 700; }
.splash-sub { font-size: 13px; letter-spacing: 6px; color: var(--text-3); margin-bottom: 28px; }
.splash-enter {
  width: 180px; padding: 12px 0; font-size: 15px; letter-spacing: 6px; border-radius: 999px;
  border: 0; color: #fff; font-family: inherit; cursor: pointer;
  background: linear-gradient(135deg, #1677ff, #4f9dff);
  box-shadow: 0 6px 18px rgba(22, 119, 255, .3);
}
.splash-enter:hover { filter: brightness(1.05); }
.splash-enter:active { transform: translateY(1px); }