/* ============================================================================
   摩看原型工作台 · 全局样式（core/styles.css）
   M1 拆单体：抽自 _baseline/moxiaozhuang-prototype.html 第 23~384 行（<style> 内）
   零构建 · 改这里影响全员风格（一致性闸门，走严审）
   ============================================================================ */

  :root {
    --navy:        #1e2a44;   /* 一级导航深色 */
    --navy-2:      #283755;
    --navy-active: #2f80ed;
    --primary:     #2f80ed;   /* 主色（蓝） */
    --primary-600: #1f6fe0;
    --primary-bg:  #e9f2ff;
    --ink:         #1f2733;
    --ink-2:       #4a5568;
    --ink-3:       #667085;   /* 三级文字（原 #8a94a6 在白底≈3:1，不达 WCAG AA；提到 4.6:1） */
    --line:        #e7ebf0;
    --line-2:      #eef1f5;
    --bg:          #f3f5f8;
    --card:        #ffffff;
    --danger:      #f5485c;
    --ok:          #21c17a;   /* 语义:成功/在线（原=primary 蓝，与主色撞、分不出，拆为绿） */
    --warn:        #faad14;
    --radius:      10px;
    --shadow:      0 1px 3px rgba(20,30,55,.06), 0 6px 18px rgba(20,30,55,.05);
    --rail-w:      88px;
    --sub-w:       168px;
    --font: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* ===== 刻度 token（M? 设计系统加固 · 纯新增，暂无类引用；迁移策略见 design/02）===== */
    /* 间距（4 基数，designed/新页只用这几档）；-h 为现 UI 密集半步，仅供 observed 镜子做等值重构过渡，不长期保留 */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
    --sp-1h: 6px; --sp-2h: 10px; --sp-3h: 14px; --sp-4h: 18px;
    /* 字号（正文 14；用于灭掉散落的 12.5/13.5 半像素） */
    --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px;
    --fs-md: 15px;  --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 20px; --fs-3xl: 26px;
    /* 字重 */
    --fw-normal: 400; --fw-medium: 600; --fw-bold: 700; --fw-heavy: 800;
    /* 行高 */
    --lh-tight: 1.2; --lh-normal: 1.6;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
  }
  .app { display: flex; height: 100vh; }

  /* ---------- 一级导航（深色 rail） ---------- */
  .rail {
    width: var(--rail-w); flex: 0 0 var(--rail-w);
    background: var(--navy); color: #cfd7e6;
    display: flex; flex-direction: column; align-items: center;
    padding-top: 14px;
  }
  .brand-mark {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, #2f80ed, #56a0ff);
    color: #fff; font-weight: 800; font-size: 22px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px; box-shadow: 0 4px 12px rgba(47,128,237,.4);
  }
  .rail-nav { width: 100%; flex: 1; overflow-y: auto; }
  .rail-nav::-webkit-scrollbar { width: 0; }
  .rail-item {
    width: 100%; padding: 11px 4px; text-align: center; cursor: pointer;
    font-size: 12px; color: #aab4c8; transition: .15s; position: relative;
    user-select: none;
  }
  .rail-item .ico { font-size: 19px; display: block; margin-bottom: 3px; line-height: 1; }
  .rail-item:hover { color: #fff; background: var(--navy-2); }
  .rail-item.active { color: #fff; background: var(--navy-2); }
  .rail-item.active::before {
    content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
    background: var(--primary); border-radius: 0 3px 3px 0;
  }
  .rail-foot { width: 100%; padding: 12px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .rail-foot .bell { font-size: 18px; color: #aab4c8; cursor: pointer; }
  .rail-foot .ava { width: 36px; height: 36px; border-radius: 50%; background: #3a496b; display: flex; align-items: center; justify-content: center; color: #cdd6e8; }
  .rail-foot .uname { font-size: 11px; color: #aab4c8; }

  /* ---------- 二级菜单（白色 panel） ---------- */
  .sub {
    width: var(--sub-w); flex: 0 0 var(--sub-w);
    background: #fff; border-right: 1px solid var(--line);
    display: flex; flex-direction: column;
  }
  .sub-head {
    height: 52px; flex: 0 0 52px; display: flex; align-items: center;
    padding: 0 16px; font-weight: 700; font-size: 15px; color: var(--ink);
    border-bottom: 1px solid var(--line-2); letter-spacing: .5px;
  }
  .sub-list { flex: 1; overflow-y: auto; padding: 6px 0 20px; }
  .sub-group-title {
    padding: 12px 16px 6px; font-size: 12px; color: var(--ink-3);
    display: flex; align-items: center; justify-content: space-between; gap: 6px; font-weight: 600;
    cursor: pointer; user-select: none;
  }
  .sub-group-title:hover { color: var(--ink-2); }
  .sub-group-title .gt-left { display: flex; align-items: center; gap: 6px; }
  .sub-group-title .ico { font-size: 13px; }
  .sub-group-title .chevron { font-size: 10px; color: var(--ink-3); transition: transform .2s; }
  .sub-group.collapsed .chevron { transform: rotate(180deg); }
  .sub-group.collapsed .sub-group-items { display: none; }
  .sub-item {
    padding: 9px 16px 9px 34px; font-size: 13.5px; color: var(--ink-2);
    cursor: pointer; position: relative; transition: .12s;
  }
  .sub-item:hover { color: var(--primary); background: #f6f9ff; }
  .sub-item.active { color: var(--primary); background: var(--primary-bg); font-weight: 600; }
  .sub-item.active::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary);
  }

  /* ---------- 主区 ---------- */
  .main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
  .topbar {
    height: 52px; flex: 0 0 52px; background: #fff; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; padding: 0 20px; gap: 14px;
  }
  .crumb { color: var(--ink-3); font-size: 13px; display: flex; align-items: center; gap: 6px; }
  .crumb b { color: var(--ink); font-weight: 600; }
  .crumb .sep { color: #c7cdd8; }
  .top-right { margin-left: auto; display: flex; align-items: center; gap: 16px; color: var(--ink-3); }
  .top-right .link { color: var(--primary); cursor: pointer; font-size: 13px; }
  .content { flex: 1; overflow-y: auto; padding: 20px; }

  /* ---------- 通用组件 ---------- */
  .card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
  .card-pad { padding: var(--sp-5); }
  .card-head { display: flex; align-items: center; margin-bottom: var(--sp-4); }
  .card-head h3 { font-size: 15px; font-weight: 700; }
  .card-head .more { margin-left: 12px; color: var(--primary); font-size: 12px; cursor: pointer; }
  .card-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; color: var(--ink-3); }
  .btn {
    border: none; border-radius: 6px; padding: 7px 16px; font-size: 13px; cursor: pointer;
    font-family: inherit; transition: .15s;
  }
  .btn-primary { background: var(--primary); color: #fff; }
  .btn-primary:hover { background: var(--primary-600); }
  .btn-ghost { background: #f1f3f7; color: var(--ink-2); }
  .btn-ghost:hover { background: #e7ebf2; }
  .input, .select {
    border: 1px solid var(--line); border-radius: 6px; padding: 7px 12px; font-size: 13px;
    font-family: inherit; color: var(--ink); background: #fff; outline: none;
  }
  .input:focus, .select:focus { border-color: var(--primary); }
  .tag { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
  .tag-danger { background: #ffeaed; color: var(--danger); }
  .tag-blue { background: var(--primary-bg); color: var(--primary); }
  .tag-beta { background: #eef1f5; color: var(--ink-2); }

  /* 看板：常用功能 */
  .quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
  .quick-item { text-align: center; padding: 12px 4px; border-radius: 8px; cursor: pointer; transition: .15s; }
  .quick-item:hover { background: #f6f9ff; }
  .quick-ico { width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 12px; background: #eef3fa; display: flex; align-items: center; justify-content: center; font-size: 22px; }
  .quick-item.add .quick-ico { background: #fff; border: 1.5px dashed var(--primary); color: var(--primary); }
  .quick-label { font-size: var(--fs-xs); color: var(--ink-2); }
  .quick-item.add .quick-label { color: var(--primary); }

  /* 看板：指标卡 */
  .metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); }
  .metric { padding: var(--sp-4) var(--sp-3); border-radius: 8px; transition: .15s; cursor: default; }
  .metric:hover { background: var(--primary-bg); }
  .metric .label { font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: var(--sp-2); display: flex; align-items: center; gap: var(--sp-1); }
  .metric .num { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--primary); font-variant-numeric: tabular-nums; }
  .metric .note-flag { width: 14px; height: 14px; border-radius: 3px; background: var(--primary-bg); color: var(--primary); font-size: 9px; display: inline-flex; align-items: center; justify-content: center; }
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

  /* 迷你图表（CSS 占位） */
  .mini-chart { height: 180px; display: flex; align-items: flex-end; gap: 10px; padding: 16px 4px 0; }
  .bar { flex: 1; background: linear-gradient(180deg, #67a6ff, #2f80ed); border-radius: 5px 5px 0 0; position: relative; min-height: 6px; transition: .4s; }
  .bar span { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--ink-3); }
  .bar small { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--ink-3); }
  .rank-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line-2); }
  .rank-row .idx { width: 20px; height: 20px; border-radius: 5px; background: #eef1f5; color: var(--ink-2); font-size: 12px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
  .rank-row .idx.top { background: var(--primary); color: #fff; }
  .rank-row .name { flex: 1; font-size: 13px; }
  .rank-row .val { font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }

  /* 表格 */
  .toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
  .tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
  .tab { padding: 10px 0; font-size: 14px; color: var(--ink-2); cursor: pointer; position: relative; }
  .tab.active { color: var(--primary); font-weight: 600; }
  .tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary); }
  .tab .badge { color: var(--ink-3); font-weight: 400; }
  table.grid { width: 100%; border-collapse: collapse; }
  table.grid th { text-align: left; font-size: 13px; color: var(--ink-2); font-weight: 600; padding: 12px 14px; background: #f7f9fc; border-bottom: 1px solid var(--line); white-space: nowrap; }
  table.grid td { padding: 13px 14px; font-size: 13.5px; border-bottom: 1px solid var(--line-2); color: var(--ink); }
  table.grid tr:hover td { background: #f9fbff; }
  .link { color: var(--primary); cursor: pointer; }   /* 全局：链接=蓝+手形（之前只 table.grid 内有，手机端裸 .link 无手形→看不出可点） */
  .m-scroll { scrollbar-width: none; -ms-overflow-style: none; }   /* 手机壳滚动区隐藏滚动条（否则桌面滚动条占宽、内容右侧被挤短） */
  .m-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
  table.grid .link { color: var(--primary); font-weight: 600; cursor: pointer; }
  .pager { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 16px; color: var(--ink-3); font-size: 13px; }
  .pager .pg { min-width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0 6px; }
  .pager .pg.active { background: var(--primary); color: #fff; border-color: var(--primary); }

  /* 巡检大屏 */
  .bigscreen { position: fixed; inset: 0; background: #0c1120; z-index: 50; display: flex; flex-direction: column; }
  .bs-top { height: 56px; flex: 0 0 56px; display: flex; align-items: center; padding: 0 22px; color: #fff; gap: 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .bs-top .title { font-size: 20px; font-weight: 800; letter-spacing: 1px; }
  .bs-top .org { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); color: #dbe4f5; border-radius: 6px; padding: 5px 10px; font-size: 13px; }
  .bs-top .menu { color: #b8c4dd; font-size: 14px; cursor: pointer; }
  .bs-top .menu:hover { color: #fff; }
  .bs-top .right { margin-left: auto; display: flex; gap: 16px; align-items: center; color: #b8c4dd; }
  .bs-top .close-bs { cursor: pointer; font-size: 18px; }
  .bs-filters { padding: 12px 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .bs-chip { background: #19233c; color: #b8c4dd; border: 1px solid #283655; border-radius: 16px; padding: 5px 14px; font-size: 13px; cursor: pointer; }
  .bs-chip.on { background: var(--primary); color: #fff; border-color: var(--primary); }
  .bs-stat { margin-left: auto; display: flex; gap: 8px; }
  .bs-stat .s { background: #19233c; color: #9fb0d0; border-radius: 6px; padding: 5px 12px; font-size: 12px; }
  .bs-grid { flex: 1; overflow-y: auto; padding: 4px 22px 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-content: start; }
  .cam { border-radius: 8px; overflow: hidden; border: 2px solid var(--ok); background: #0f1626; position: relative; aspect-ratio: 16/10; }
  .cam.offline { border-color: var(--danger); }
  .cam .feed { position: absolute; inset: 0; background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 5px),
      linear-gradient(160deg, #5a6478, #2c333f 60%, #1c222c); }
  .cam.offline .feed { filter: grayscale(.6) brightness(.55); }
  .cam .status { position: absolute; top: 8px; left: 8px; font-size: 11px; padding: 3px 8px; border-radius: 4px; color: #fff; background: rgba(47,128,237,.85); }
  .cam.offline .status { background: rgba(245,72,92,.85); }
  .cam .offline-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #dfe6f2; font-size: 13px; background: rgba(0,0,0,.45); padding: 6px 14px; border-radius: 6px; }
  .cam .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; background: linear-gradient(0deg, rgba(0,0,0,.78), transparent); color: #fff; }
  .cam .meta .nm { font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; }
  .cam .meta .nm .acts { font-size: 12px; opacity: .85; letter-spacing: 2px; }
  .cam .meta .ppl { font-size: 11px; color: #c7d2e6; margin-top: 3px; }

  /* 占位页 */
  .placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 70%; color: var(--ink-3); text-align: center; }
  .placeholder .big { font-size: 52px; margin-bottom: 14px; }
  .placeholder h2 { color: var(--ink); font-size: 18px; margin-bottom: 8px; }
  .placeholder p { font-size: 13.5px; line-height: 1.7; max-width: 420px; }
  .placeholder code { background: #eef1f5; padding: 2px 6px; border-radius: 4px; color: var(--primary-600); }

  /* 工地详情 */
  .detail-head { display: flex; align-items: center; }
  .dh-left { flex: 1; }
  .dh-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
  .dh-sub { font-size: 13px; color: var(--ink-2); }
  .dh-right { display: flex; gap: 10px; }
  .kv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
  .kv { background: #fff; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
  .kv .k { font-size: 12px; color: var(--ink-3); }
  .kv .v { font-size: 14px; color: var(--ink); }
  .timeline { display: flex; align-items: flex-start; padding: 10px 0; }
  .tl-node { flex: 1; text-align: center; position: relative; }
  .tl-node::after { content: ""; position: absolute; top: 8px; left: 50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
  .tl-node:last-child::after { display: none; }
  .tl-node .dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--line); display: inline-block; position: relative; z-index: 1; }
  .tl-node.done .dot { border-color: var(--primary); background: var(--primary); }
  .tl-node.done::after { background: var(--primary); }
  .tl-node.doing .dot { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-bg); }
  .tl-name { font-size: 13px; margin-top: 8px; color: var(--ink); }
  .tl-status { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
  .tl-node.doing .tl-status { color: var(--primary); font-weight: 600; }

  /* 工地详情 v2 新增组件 */
  .sec-title { font-size: 14px; font-weight: 700; margin-bottom: 12px; color: var(--ink); }
  .ov-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .pkg-switch { font-size: 12px; color: var(--ink-3); font-weight: 400; margin-left: 14px; display: inline-flex; align-items: center; gap: 4px; }
  .pkg-switch .pkg { padding: 3px 10px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; color: var(--ink-2); }
  .pkg-switch .pkg.on { background: var(--primary); color: #fff; border-color: var(--primary); }
  /* 业主权限开关 */
  .switch { width: 38px; height: 20px; border-radius: 11px; background: #cfd6e0; display: inline-block; position: relative; transition: .15s; }
  .switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .15s; }
  .switch.on { background: var(--primary); }
  .switch.on i { left: 20px; }
  /* 快照墙 */
  .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .shot { aspect-ratio: 16/10; border-radius: 8px; position: relative; background: linear-gradient(160deg,#f0c8c0,#d98e88 60%,#b56b66); }
  .shot-time { position: absolute; top: 6px; left: 8px; color: #fff; font-size: 11px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
  .shot-ck { position: absolute; top: 6px; right: 8px; width: 14px; height: 14px; border: 1.5px solid #fff; border-radius: 3px; }
  /* AI 识别事件流 */
  .ai-day { margin-bottom: 18px; }
  .ai-date { font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
  .ai-card { display: inline-block; }
  .ai-clean { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
  .ai-shot { width: 220px; height: 130px; border-radius: 8px; background: linear-gradient(160deg,#f0c8c0,#d98e88 60%,#b56b66); }
  /* 收款弹窗 */
  .modal-mask { position: fixed; inset: 0; background: rgba(20,30,55,.45); z-index: 60; display: flex; align-items: center; justify-content: center; }
  .modal-box { background: #fff; border-radius: 12px; width: min(860px, 92vw); max-height: 84vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
  .modal-head { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
  .modal-head h3 { font-size: 16px; font-weight: 700; }
  .modal-x { margin-left: auto; cursor: pointer; color: var(--ink-3); font-size: 16px; }
  .modal-body { padding: 20px; }

  /* 溯源横幅 + 系统管理页 */
  .prov-banner { background: #fff7e6; border: 1px solid #ffe1a8; color: #ad6800; font-size: 12.5px; padding: 8px 14px; border-radius: 8px; margin-bottom: 14px; }
  .res-tree { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fafbfd; }
  .res-item { font-size: 13.5px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
  .res-item:first-child { font-weight: 700; }
  .scope-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .scope-item { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; cursor: pointer; }
  .scope-item span { color: var(--ink-3); font-size: 12px; }

  /* 弹窗表单 */
  .form-rows { display: flex; flex-direction: column; gap: 14px; }
  .frow { display: flex; align-items: center; gap: 14px; }
  .frow > label { width: 80px; text-align: right; color: var(--ink-2); font-size: 13px; flex: 0 0 80px; }
  .frow .rd { font-size: 13px; color: var(--ink); margin-right: 16px; }
  .upload-box { width: 64px; height: 64px; border: 1px dashed var(--line); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink-3); font-size: 18px; cursor: pointer; }
  .upload-box div { font-size: 12px; }

  /* 操作反馈 toast */
  .toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(20px); background: rgba(30,42,68,.94); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 13.5px; z-index: 80; opacity: 0; pointer-events: none; transition: .2s; }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* ===== 工地详情 · 项目概况（仪表盘）===== */
  .detail-head { display: block; }
  .dh-title { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
  .dh-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .btn.site-act { font-size: 12.5px; padding: 6px 12px; }
  .detail-tabs { padding: 0 20px; gap: 26px; }
  .ov-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }
  .ov-col-left, .ov-col-right { display: flex; flex-direction: column; gap: 16px; }
  .ov-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .ov-card-head h3 { font-size: 15px; font-weight: 700; }

  /* 在线直播 */
  .cam-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .cam-slot .cam-feed { aspect-ratio: 16/10; border-radius: 8px; position: relative;
    background: repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 2px,transparent 2px 5px),linear-gradient(160deg,#5a6478,#2c333f 60%,#1c222c); }
  .cam-tag { position: absolute; top: 8px; right: 8px; background: #21c17a; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 4px; }
  .cam-name { font-size: 13px; margin: 8px 0 6px; }
  .cam-btns { display: flex; gap: 6px; }
  .cam-btns .btn { font-size: 12px; padding: 5px 10px; }
  .cam-slot.empty { border: 1px dashed var(--line); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; min-height: 150px; }
  .cam-slot.empty:hover { border-color: var(--primary); }
  .cam-add { text-align: center; color: var(--primary); font-size: 28px; line-height: 1.2; }
  .cam-add div { font-size: 13px; margin-top: 4px; }
  .cam-tip { font-size: 12px; color: var(--ink-3); margin-top: 10px; }

  /* 项目负责人 */
  .persons { display: flex; flex-direction: column; gap: 14px; }
  .person { display: flex; align-items: center; gap: 12px; }
  .p-ava { width: 40px; height: 40px; border-radius: 50%; background: #eef1f5; border: 1px solid var(--line); flex: 0 0 40px; }
  .p-ava.add { border: 1px dashed var(--primary); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 18px; }
  .p-name { font-size: 13.5px; }
  .p-role { font-size: 12px; color: var(--ink-3); margin-top: 3px; }

  /* 指标卡 */
  .ov-card-body { display: flex; align-items: center; gap: 18px; }
  .ov-main { flex: 0 0 auto; }
  .ov-rows { flex: 1; }
  .stat-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; }
  .stat-row .sk { color: var(--ink-2); }
  .stat-row .sv { font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
  .donut { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
  .donut-hole { width: 68px; height: 68px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; color: var(--ink); }
  .gauge { width: 92px; height: 92px; border-radius: 50%; background: #f1f3f7; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: var(--ink); }
  .bigcircle { width: 92px; height: 92px; border-radius: 50%; background: #f1f3f7; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: var(--ink-2); text-align: center; line-height: 1.1; padding: 8px; }
  .freq { width: 92px; height: 92px; border-radius: 50%; background: #eef3fa; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--primary); }
  .freq b { font-size: 26px; } .freq small { font-size: 11px; color: var(--ink-3); }
  .todo-card .todo-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
  .todo-card code { background: #fff4e5; color: #d48806; padding: 1px 6px; border-radius: 4px; }

  /* 工地动态信息流 */
  .feed-top { margin-left: auto; display: flex; gap: 14px; }
  .feed-filters { display: flex; gap: 8px; margin-bottom: 14px; }
  .fchip { font-size: 12px; padding: 4px 12px; border-radius: 14px; background: #f1f3f7; color: var(--ink-2); cursor: pointer; }
  .fchip.on { background: var(--primary-bg); color: var(--primary); }
  .feed { border-left: 2px solid var(--line); padding-left: 18px; }
  .feed-item { position: relative; padding-bottom: 20px; }
  .feed-dot { position: absolute; left: -25px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); }
  .feed-date { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
  .feed-meta { font-size: 12px; color: var(--ink-3); margin-bottom: 5px; }
  .feed-body { font-size: 13px; color: var(--ink); line-height: 1.6; }
  .feed-photos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
  .feed-photos i { width: 56px; height: 56px; border-radius: 5px; background: linear-gradient(160deg,#cfe0f5,#9fbfe6); display: block; }
  .feed-video { margin-top: 8px; width: 160px; height: 90px; border-radius: 6px; background: linear-gradient(160deg,#5a6478,#1c222c); position: relative; }
  .feed-video .play { position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.4); border-radius: 50%; }
  .feed-video .dur { position: absolute; bottom: 5px; right: 6px; color: #fff; font-size: 11px; }
  .feed-acts { margin-top: 8px; display: flex; gap: 14px; font-size: 12px; }
  .feed-acts .danger { color: var(--danger); }
  .fade { animation: fade .25s ease; }
  @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }