/* ===== 移动端（网格员 / 处理人）通用样式 ===== */
:root{ --pri:#2f6bff; --pri2:#1f4fd6; --red:#e0322f; --ink:#1b2333; --sub:#6a7689;
  --line:#eef1f6; --bg:#eef1f8; --card:#fff;
  --shadow:0 6px 22px rgba(28,48,92,.07), 0 1px 3px rgba(28,48,92,.05);
  --shadow-lg:0 12px 34px rgba(28,48,92,.12); }
html,body{ background:#e6eaf2; }
body{ color:var(--ink); }

.m-app{ max-width:480px; min-height:100vh; margin:0 auto;
  background:linear-gradient(180deg,#f6f8fc 0%,#eef1f8 32%);
  position:relative; box-shadow:0 0 50px rgba(20,40,80,.14); display:flex; flex-direction:column;
  overflow-x:hidden; }

/* 顶部栏 */
.m-head{ position:sticky; top:0; z-index:30; color:#fff;
  padding:calc(16px + env(safe-area-inset-top)) 16px 18px;
  background:
    radial-gradient(130% 120% at 88% -25%, rgba(130,178,255,.55), transparent 58%),
    linear-gradient(135deg,#2f6bff 0%,#2350cf 58%,#1b3eae 100%);
  border-radius:0 0 22px 22px; overflow:hidden;
  box-shadow:0 10px 26px rgba(31,79,214,.22); }
.m-head.red{ background:
    radial-gradient(130% 120% at 88% -25%, rgba(255,160,152,.5), transparent 58%),
    linear-gradient(135deg,#ef4d46 0%,#cf2f2a 58%,#b3211d 100%);
  box-shadow:0 10px 26px rgba(191,42,38,.22); }
.m-head::after{ content:""; position:absolute; right:-36px; top:-46px; width:170px; height:170px;
  border-radius:50%; background:rgba(255,255,255,.09); }
.m-head::before{ content:""; position:absolute; left:-30px; bottom:-50px; width:130px; height:130px;
  border-radius:50%; background:rgba(255,255,255,.06); }
.m-head .ht{ display:flex; align-items:center; gap:10px; position:relative; }
.m-head .logo{ width:36px; height:36px; border-radius:10px; flex:none;
  background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:800; }
.m-head .tt{ flex:1; min-width:0; }
.m-head .tt h1{ margin:0; font-size:17px; font-weight:700; letter-spacing:.5px; }
.m-head .tt p{ margin:2px 0 0; font-size:11.5px; opacity:.82; }
.m-head .uchip{ display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.16);
  padding:5px 10px 5px 6px; border-radius:20px; font-size:12.5px; cursor:pointer; }
.m-head .uchip .av{ width:24px; height:24px; border-radius:50%; background:#fff; color:var(--pri);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
.m-head.red .uchip .av{ color:var(--red); }

/* 概览条 */
.m-stats{ display:flex; position:relative; z-index:1; margin-top:16px; gap:10px; }
.m-stats .st{ flex:1; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22); backdrop-filter:blur(4px);
  border-radius:13px; padding:10px 6px; text-align:center; }
.m-stats .st .n{ font-size:22px; font-weight:800; line-height:1; letter-spacing:.5px; }
.m-stats .st .l{ font-size:11px; opacity:.88; margin-top:6px; }

/* 主体 */
.m-body{ flex:1; padding:14px 14px calc(86px + env(safe-area-inset-bottom)); }
.m-tabpane{ display:none; }
.m-tabpane.on{ display:block; animation:fade .2s; }
@keyframes fade{ from{ opacity:0; transform:translateY(4px) } to{ opacity:1; transform:none } }

.sec-title{ display:flex; align-items:center; gap:7px; font-size:14px; font-weight:700; color:var(--ink);
  margin:4px 2px 12px; }
.sec-title .bar{ width:4px; height:15px; border-radius:3px;
  background:linear-gradient(180deg,#3a78ff,#1f4fd6); box-shadow:0 1px 5px rgba(47,107,255,.45); }
.sec-title .more{ margin-left:auto; font-size:12px; color:var(--sub); font-weight:400; }

/* 底部 Tab */
.m-tabbar{ position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px;
  min-height:62px; padding-bottom:env(safe-area-inset-bottom);
  background:#fff; border-top:1px solid var(--line); display:flex; z-index:40;
  box-shadow:0 -4px 20px rgba(20,40,80,.06); }
.m-tab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:#9aa6bc; font-size:11px; position:relative; transition:.15s; }
.m-tab svg{ width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:1.8; transition:.15s; }
.m-tab.on{ color:var(--pri); }
.m-tab.red.on{ color:var(--red); }
.m-tab.on svg{ transform:translateY(-1px); }
.m-tab.on::after{ content:""; position:absolute; top:0; width:24px; height:3px; border-radius:0 0 3px 3px;
  background:currentColor; box-shadow:0 1px 6px currentColor; }
.m-tab .dot{ position:absolute; top:7px; right:50%; margin-right:-16px; min-width:16px; height:16px;
  background:var(--red); color:#fff; border-radius:9px; font-size:10px; line-height:16px; text-align:center;
  padding:0 4px; font-weight:600; }

/* 卡片 / 表单 */
.card{ background:var(--card); border-radius:16px; padding:16px; margin-bottom:13px;
  box-shadow:var(--shadow); border:1px solid rgba(235,239,246,.9); }
.m-field{ margin-bottom:17px; }
.m-field > label{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:9px; }
.m-field > label .req{ color:var(--red); margin-left:3px; }
.m-input, .m-textarea, .m-select{ width:100%; border:1px solid #e2e7f0; border-radius:10px;
  padding:11px 13px; font-size:16px; color:var(--ink); background:#fafbfd; outline:none;
  font-family:inherit; transition:.15s; }  /* 16px：防止 iOS 聚焦时自动放大 */
.m-input:focus, .m-textarea:focus, .m-select:focus{ border-color:var(--pri); background:#fff;
  box-shadow:0 0 0 3px rgba(47,107,255,.1); }
.m-textarea{ resize:none; min-height:92px; line-height:1.6; }

/* 类型选择 */
.type-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.type-chip{ display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 4px;
  border:1px solid #edf0f6; border-radius:14px; background:#fff; cursor:pointer; transition:.18s;
  box-shadow:0 1px 3px rgba(28,48,92,.04); }
.type-chip:active{ transform:scale(.96); }
.type-chip .ic{ width:36px; height:36px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; color:#fff; font-weight:700; font-size:16px;
  background:linear-gradient(145deg, var(--c), color-mix(in srgb,var(--c),#000 24%));
  box-shadow:0 5px 12px color-mix(in srgb,var(--c) 42%,transparent); }
.type-chip span{ font-size:11.5px; color:var(--sub); text-align:center; line-height:1.3; }
.type-chip.on{ border-color:var(--c); background:color-mix(in srgb,var(--c) 8%,#fff);
  box-shadow:0 6px 16px color-mix(in srgb,var(--c) 26%,transparent); transform:translateY(-1px); }
.type-chip.on span{ color:var(--ink); font-weight:600; }

/* 分段 */
.seg{ display:flex; background:#eef1f6; border-radius:10px; padding:3px; gap:3px; }
.seg button{ flex:1; padding:9px; border-radius:8px; background:transparent; font-size:13.5px;
  color:var(--sub); font-weight:500; transition:.15s; }
.seg button.on{ background:#fff; color:var(--pri); box-shadow:0 1px 5px rgba(20,40,80,.1); font-weight:700; }
.seg.prio button.on[data-v="normal"]{ color:#1488c8; }
.seg.prio button.on[data-v="urgent"]{ color:#d98a00; }
.seg.prio button.on[data-v="critical"]{ color:#d4322f; }

/* 照片上传 */
.photo-up{ display:flex; flex-wrap:wrap; gap:10px; }
.photo-up .thumb{ width:78px; height:78px; border-radius:10px; overflow:hidden; position:relative;
  background:#eef1f6; }
.photo-up .thumb img{ width:100%; height:100%; object-fit:cover; }
.photo-up .thumb .del{ position:absolute; top:2px; right:2px; width:19px; height:19px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; font-size:13px; display:flex; align-items:center; justify-content:center; }
.photo-up .add{ width:78px; height:78px; border-radius:10px; border:1.5px dashed #c2cbdb; background:#fafbfd;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--sub);
  font-size:11px; cursor:pointer; }
.photo-up .add svg{ width:24px; height:24px; stroke:#9aa6bc; fill:none; stroke-width:1.8; }

.submit-btn{ width:100%; padding:15px; border-radius:14px; font-size:16px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#3a78ff,#1f4fd6); box-shadow:0 10px 24px rgba(47,107,255,.34);
  letter-spacing:1px; transition:.15s; }
.submit-btn:active{ transform:translateY(1px); box-shadow:0 6px 16px rgba(47,107,255,.3); }
.submit-btn.red{ background:linear-gradient(135deg,#ef4d46,#bf2a26); box-shadow:0 10px 24px rgba(224,69,63,.32); }
.submit-btn:disabled{ opacity:.55; box-shadow:none; }

/* 事件卡片（列表） */
.ev-card{ background:#fff; border-radius:16px; padding:14px 15px 13px; margin-bottom:12px;
  box-shadow:var(--shadow); border:1px solid rgba(235,239,246,.9);
  position:relative; overflow:hidden; transition:.15s; }
.ev-card:active{ transform:scale(.99); box-shadow:var(--shadow-lg); }
.ev-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--c), color-mix(in srgb,var(--c),#000 18%)); }
.ev-card .top{ display:flex; align-items:flex-start; gap:9px; }
.ev-card .top .tt{ flex:1; min-width:0; }
.ev-card .ti{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.4; }
.ev-card .code{ font-size:11.5px; color:#9aa6bc; margin-top:3px; }
.ev-card .meta{ display:flex; flex-wrap:wrap; gap:7px 10px; margin-top:10px; font-size:12px; color:var(--sub); }
.ev-card .meta .loc{ display:flex; align-items:center; gap:3px; }
.ev-card .foot{ display:flex; align-items:center; gap:8px; margin-top:11px; padding-top:11px;
  border-top:1px solid var(--line); font-size:12px; color:var(--sub); }
.ev-card .foot .tm{ margin-left:auto; }
.ev-card .overdue{ color:var(--red); font-weight:600; }

.empty{ text-align:center; padding:60px 20px; color:#a8b2c4; }
.empty .ic{ font-size:42px; opacity:.5; margin-bottom:12px; }
.empty p{ font-size:14px; margin:0; }

/* 详情全屏层 */
.m-detail{ position:fixed; inset:0; max-width:480px; margin:0 auto; background:var(--bg); z-index:60;
  transform:translateX(100%); transition:transform .26s cubic-bezier(.3,.8,.3,1); display:flex; flex-direction:column; }
.m-detail.on{ transform:none; }
.m-detail .dh{ position:sticky; top:0; background:#fff; border-bottom:1px solid var(--line); padding:13px 14px;
  display:flex; align-items:center; gap:10px; z-index:5; }
.m-detail .dh .back{ width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  font-size:22px; color:var(--ink); margin-left:-6px; }
.m-detail .dh h2{ margin:0; font-size:16px; font-weight:700; flex:1; }
.m-detail .dbody{ flex:1; overflow-y:auto; padding:14px 14px 24px; }

.dbanner{ border-radius:13px; padding:14px 15px; color:#fff; margin-bottom:13px; }
.dbanner h3{ margin:0 0 8px; font-size:17px; }
.dbanner .row{ font-size:12.5px; opacity:.92; display:flex; gap:8px; flex-wrap:wrap; }
.dbanner .pill{ background:rgba(255,255,255,.2); padding:3px 9px; border-radius:20px; }

.info-row{ display:flex; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; }
.info-row:last-child{ border-bottom:none; }
.info-row .k{ width:78px; color:var(--sub); flex:none; }
.info-row .v{ flex:1; color:var(--ink); }

.gallery{ display:flex; flex-wrap:wrap; gap:8px; }
.gallery img{ width:84px; height:84px; border-radius:9px; object-fit:cover; cursor:pointer; }

/* 时间线 */
.timeline{ position:relative; padding-left:6px; }
.tl-item{ position:relative; padding:0 0 18px 26px; }
.tl-item::before{ content:""; position:absolute; left:6px; top:4px; bottom:-4px; width:2px; background:#e2e7f0; }
.tl-item:last-child::before{ display:none; }
.tl-item .node{ position:absolute; left:0; top:2px; width:14px; height:14px; border-radius:50%;
  background:var(--c,#2f6bff); border:3px solid #fff; box-shadow:0 0 0 2px var(--c,#2f6bff); }
.tl-item .act{ font-size:14px; font-weight:700; color:var(--ink); }
.tl-item .who{ font-size:12px; color:var(--sub); margin:2px 0 0; }
.tl-item .note{ font-size:13.5px; color:#3d485e; margin:7px 0 0; line-height:1.6;
  background:#fff; border-radius:9px; padding:9px 11px; }
.tl-item .ph{ display:flex; gap:7px; margin-top:8px; flex-wrap:wrap; }
.tl-item .ph img{ width:62px; height:62px; border-radius:8px; object-fit:cover; }
.tl-item .tm{ font-size:11.5px; color:#9aa6bc; margin-top:5px; }

/* 操作底栏 */
.d-actions{ position:sticky; bottom:0; background:#fff; border-top:1px solid var(--line);
  padding:11px 13px calc(11px + env(safe-area-inset-bottom)); display:flex; gap:9px; }
.d-actions .btn{ flex:1; padding:12px; font-size:14.5px; border-radius:11px; }

/* 底部抽屉表单 */
.m-sheet-mask{ position:fixed; inset:0; max-width:480px; margin:0 auto; background:rgba(15,25,45,.45);
  z-index:70; opacity:0; pointer-events:none; transition:.2s; }
.m-sheet-mask.on{ opacity:1; pointer-events:auto; }
.m-sheet{ position:absolute; left:0; right:0; bottom:0; background:#fff; border-radius:18px 18px 0 0;
  padding:8px 16px calc(16px + env(safe-area-inset-bottom)); transform:translateY(100%); transition:.26s cubic-bezier(.3,.8,.3,1); }
.m-sheet-mask.on .m-sheet{ transform:none; }
.m-sheet .grip{ width:38px; height:4px; background:#dfe4ee; border-radius:2px; margin:0 auto 14px; }
.m-sheet h3{ margin:0 0 14px; font-size:16px; text-align:center; }

/* 通知 */
.notif{ background:#fff; border-radius:15px; padding:14px 15px; margin-bottom:10px; display:flex; gap:11px;
  box-shadow:var(--shadow); border:1px solid rgba(235,239,246,.9); }
.notif.unread{ background:linear-gradient(100deg,#eaf2ff,#fff 60%); border-color:#d8e6ff; }
.notif .ni{ width:40px; height:40px; border-radius:12px; flex:none;
  background:linear-gradient(145deg,#3a78ff,#1f4fd6); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  box-shadow:0 5px 12px rgba(47,107,255,.32); }
.notif .nc{ flex:1; min-width:0; }
.notif .nt{ font-size:14px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:6px; }
.notif .nt .udot{ width:7px; height:7px; border-radius:50%; background:var(--red); flex:none; }
.notif .nx{ font-size:13px; color:var(--sub); margin-top:4px; line-height:1.5; }
.notif .nm{ font-size:11.5px; color:#9aa6bc; margin-top:5px; }

/* 我的 */
.profile-hd{ display:flex; align-items:center; gap:14px; }
.profile-hd .pav{ width:58px; height:58px; border-radius:16px; background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; }
.profile-hd .pn{ font-size:19px; font-weight:700; }
.profile-hd .pr{ font-size:12.5px; opacity:.85; margin-top:4px; }
.me-list{ background:#fff; border-radius:13px; overflow:hidden; }
.me-item{ display:flex; align-items:center; gap:11px; padding:14px 15px; border-bottom:1px solid var(--line);
  font-size:14.5px; color:var(--ink); cursor:pointer; }
.me-item:last-child{ border-bottom:none; }
.me-item .mi{ width:30px; color:var(--pri); }
.me-item .arr{ margin-left:auto; color:#c2cbdb; }

/* 用户切换弹层（演示）*/
.userpick-mask{ position:fixed; inset:0; max-width:480px; margin:0 auto; background:rgba(15,25,45,.45);
  z-index:80; display:none; align-items:flex-end; }
.userpick-mask.on{ display:flex; }
.userpick{ width:100%; background:#fff; border-radius:18px 18px 0 0; max-height:70vh; overflow-y:auto;
  padding:8px 0 16px; }
.userpick .uh{ text-align:center; font-size:14px; font-weight:700; padding:14px; color:var(--ink);
  position:sticky; top:0; background:#fff; }
.userpick .uitem{ display:flex; align-items:center; gap:11px; padding:12px 18px; font-size:15px; }
.userpick .uitem.on{ background:#eef4ff; }
.userpick .uitem .av{ width:34px; height:34px; border-radius:50%; background:var(--pri); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; }
.userpick .uitem .rr{ margin-left:auto; font-size:12px; color:var(--sub); }

/* ===== 手机自适配 ===== */
/* 小屏手机（≤360px，如 iPhone SE）：收紧元素，保证不挤压 */
@media (max-width:360px){
  .m-body{ padding-left:11px; padding-right:11px; }
  .m-head .tt h1{ font-size:15.5px; }
  .m-head .uchip span{ max-width:54px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .m-stats .st .n{ font-size:18px; }
  .type-grid{ gap:7px; }
  .type-chip{ padding:9px 2px; }
  .type-chip .ic{ width:30px; height:30px; font-size:13px; }
  .type-chip span{ font-size:10.5px; }
  .ev-card .ti{ font-size:14.5px; }
  .d-actions .btn{ font-size:13.5px; padding:11px 6px; }
}
/* 横屏：弹层/详情限制高度，避免内容被键盘/横向挤压 */
@media (orientation:landscape) and (max-height:480px){
  .m-detail .dbody{ padding-bottom:16px; }
  .userpick{ max-height:84vh; }
}
/* 桌面预览：把手机端居中成「手机画框」效果，提升观感 */
@media (min-width:600px){
  body{ background:#dde3ec; }
  .m-app{ min-height:auto; height:calc(100vh - 36px); margin:18px auto; border-radius:22px;
    overflow:hidden; }
  .m-tabbar{ position:absolute; }
  .m-body{ overflow-y:auto; }
}