* { margin:0; padding:0; box-sizing:border-box; }
  :root{
    --bg:#060d1a; --panel:#0b1526; --panel2:#0e1b32; --line:#1c3050;
    --txt:#dbe7f5; --dim:#7d93b0; --accent:#29b6f6; --green:#2ee6a8;
    --yellow:#ffc247; --red:#ff4d5e; --orange:#ff8a3d; --purple:#a88bff;
  }
  html,body{ height:100%; background:var(--bg); color:var(--txt);
    font-family:"PingFang SC","Microsoft YaHei",sans-serif; }
  body{ display:flex; flex-direction:column; min-height:100vh; }

  /* ===== 顶部：事件档案头 ===== */
  .ev-head{ background:linear-gradient(180deg,#1a0b12,#081226); border-bottom:1px solid var(--line);
    padding:14px 20px 0; flex:none; }
  .ev-head .r1{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .back{ background:none; border:1px solid var(--line); color:var(--dim); border-radius:6px;
    padding:6px 12px; font-size:12px; cursor:pointer; text-decoration:none; }
  .back:hover{ color:var(--accent); border-color:var(--accent); }
  .ev-head h1{ font-size:19px; letter-spacing:1px; }
  .tag{ font-size:11px; padding:3px 10px; border-radius:4px; font-weight:600; }
  .tag.red{ background:rgba(255,77,94,.18); color:var(--red); border:1px solid rgba(255,77,94,.5); }
  .tag.blue{ background:rgba(41,182,246,.15); color:var(--accent); border:1px solid rgba(41,182,246,.4); }
  .sync-chip{ margin-left:auto; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--dim); }
  .sync-chip .dot{ width:8px;height:8px;border-radius:50%;background:var(--green);
    box-shadow:0 0 8px var(--green); animation:blink 1.6s infinite; }
  @keyframes blink{ 50%{opacity:.3} }
  .ev-head .r2{ display:flex; gap:14px; margin-top:10px; font-size:12px; color:var(--dim); flex-wrap:wrap; }
  .ev-head .r2 b{ color:var(--txt); }

  /* 流程步骤条 */
  .steps{ display:flex; gap:0; margin-top:12px; }
  .step{ flex:1; text-align:center; padding:8px 4px 10px; font-size:12px; color:var(--dim);
    border-bottom:3px solid var(--line); position:relative; }
  .step.done{ color:var(--green); border-bottom-color:var(--green); }
  .step.now{ color:var(--accent); border-bottom-color:var(--accent); font-weight:700;
    background:linear-gradient(180deg,rgba(41,182,246,.08),transparent); }
  .step .n{ font-size:10px; opacity:.7; display:block; }
  .steps .step{ cursor:pointer; transition:color .25s,border-color .25s; }

  /* ===== 主体三栏 ===== */
  main{ flex:1; display:flex; align-items:stretch; min-height:0; }
  .col{ padding:14px; overflow-y:auto; }
  .col.left{ width:290px; flex:none; background:var(--panel); border-right:1px solid var(--line); }
  .col.right{ width:330px; flex:none; background:var(--panel); border-left:1px solid var(--line); }
  .col.mid{ flex:1; min-width:0; }
  .sec-t{ font-size:13px; color:var(--dim); letter-spacing:2px; margin:14px 0 8px;
    display:flex; align-items:center; gap:7px; }
  .sec-t:first-child{ margin-top:0; }
  .sec-t::before{ content:""; width:3px; height:12px; background:var(--accent); border-radius:2px; }
  .sec-t.warn::before{ background:var(--orange); }
  .sec-t.purple::before{ background:var(--purple); }
  .sec-t small{ margin-left:auto; letter-spacing:0; font-size:11px; }

  .card{ background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px; }
  .card h3{ font-size:14px; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
  .card h3 .lamp{ width:8px;height:8px;border-radius:50%;background:var(--red);
    box-shadow:0 0 6px var(--red); animation:blink 1s infinite; }
  .kv{ display:grid; grid-template-columns:88px 1fr; gap:5px 10px; font-size:12px; line-height:1.7; }
  .kv span{ color:var(--dim); }
  .kv b{ font-weight:600; }
  .kv b.hl{ color:var(--yellow); }
  .kv b.alert{ color:var(--red); }

  /* 时间轴动态 */
  .feed{ position:relative; padding-left:26px; }
  .feed::before{ content:""; position:absolute; left:8px; top:6px; bottom:6px; width:2px;
    background:linear-gradient(180deg,var(--accent),var(--line)); }
  .node{ position:relative; margin-bottom:14px; background:var(--panel2);
    border:1px solid var(--line); border-radius:10px; padding:11px 13px; }
  .node::before{ content:""; position:absolute; left:-24px; top:15px; width:10px; height:10px;
    border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }
  .node.family::before{ background:var(--purple); box-shadow:0 0 8px var(--purple); }
  .node.scene::before{ background:var(--orange); box-shadow:0 0 8px var(--orange); }
  .node.auto::before{ background:var(--green); box-shadow:0 0 8px var(--green); }
  .node .hd{ display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
  .node .role{ width:26px;height:26px;border-radius:50%; flex:none;
    display:flex;align-items:center;justify-content:center;font-size:13px;
    background:linear-gradient(135deg,#12406e,#0a2244); border:1px solid #2a5690; }
  .node .who{ font-size:13px; font-weight:600; }
  .node .who small{ color:var(--dim); font-weight:400; margin-left:6px; }
  .node .time{ margin-left:auto; font-size:11px; color:var(--dim); }
  .node .act{ font-size:11px; padding:1px 8px; border-radius:10px; margin-right:4px; }
  .act.sys{ background:rgba(46,230,168,.15); color:var(--green); }
  .act.call{ background:rgba(41,182,246,.15); color:var(--accent); }
  .act.dispatch{ background:rgba(255,138,61,.15); color:var(--orange); }
  .act.family{ background:rgba(168,139,255,.18); color:var(--purple); }
  .act.scene{ background:rgba(255,194,71,.15); color:var(--yellow); }
  .node .txt{ font-size:12.5px; line-height:1.75; color:var(--txt); }
  .node .txt b{ color:#fff; }
  .node .txt .sub{ color:var(--dim); display:block; margin-top:2px; font-size:11.5px; }
  .imgs{ display:flex; gap:8px; margin-top:9px; flex-wrap:wrap; }
  .ph{ width:118px; height:78px; border-radius:7px; border:1px solid var(--line);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    font-size:10px; color:var(--dim); cursor:pointer; overflow:hidden; position:relative; }
  .ph:hover{ border-color:var(--accent); }
  .ph .em{ font-size:20px; }
  .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .ph .cap{ position:absolute; bottom:0; left:0; right:0; background:rgba(4,12,24,.8);
    font-size:9px; padding:2px 5px; text-align:center; z-index:2; }
  .ph.talk{ background:linear-gradient(135deg,#2a1f4d,#1c1236); }
  .ph.photo{ background:linear-gradient(135deg,#1f3348,#152436); }
  .node .syncline{ margin-top:8px; font-size:10.5px; color:var(--green);
    display:flex; align-items:center; gap:5px; }
  .node .syncline .d{ width:6px;height:6px;border-radius:50%;background:var(--green); }
  .node.new-anim{ animation:pop .5s ease; }
  @keyframes pop{ 0%{transform:translateY(-14px);opacity:0;border-color:var(--accent)} 100%{transform:none;opacity:1} }

  /* ===== 后续流程展示（已完成阶段，样式与时间轴卡片一致） ===== */
  .next-feed{ margin-top:4px; }
  .next-feed::before{ background:var(--line); }

  /* 右栏：上传演示 + 沟通 + 同步 */
  .up-box{ background:linear-gradient(180deg,#10233f,#0b1526); border:1px solid #234a7d;
    border-radius:10px; padding:12px; margin-bottom:12px; }
  .up-box .tip{ font-size:11px; color:var(--accent); margin-bottom:10px; line-height:1.6; }
  .up-box select,.up-box textarea{ width:100%; background:#0a1526; color:var(--txt);
    border:1px solid var(--line); border-radius:7px; padding:8px 10px; font-size:12px;
    margin-bottom:8px; font-family:inherit; resize:vertical; }
  .up-box textarea{ min-height:64px; }
  .up-box .fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
  .up-box .fgrid .fld{ display:flex; flex-direction:column; gap:4px; }
  .up-box .fgrid .fld span{ font-size:10.5px; color:var(--dim); }
  .up-box .fgrid select,.up-box .fgrid input{ width:100%; background:#0a1526; color:var(--txt);
    border:1px solid var(--line); border-radius:7px; padding:7px 9px; font-size:12px; font-family:inherit; }
  .up-box .file-label{ display:block; border:1px dashed #234a7d; border-radius:7px;
    padding:14px 10px; text-align:center; font-size:11.5px; color:var(--dim); cursor:pointer; }
  .up-box .file-label:hover{ color:var(--accent); border-color:var(--accent); }
  .up-box .pre{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
  .up-box .pre .p{ width:64px;height:64px;border-radius:6px;object-fit:cover; border:1px solid var(--line); }
  .up-box button.publish{ width:100%; margin-top:10px; border:none; border-radius:7px;
    padding:10px 0; font-size:13px; font-weight:700; cursor:pointer;
    background:linear-gradient(135deg,#29b6f6,#1e8fd0); color:#04121f; }
  .up-box button.publish:hover{ filter:brightness(1.12); }

  .fam-item{ display:flex; gap:10px; margin-bottom:10px; align-items:flex-start; }
  .fam-item .fic{ width:34px;height:34px;border-radius:8px; flex:none;
    background:linear-gradient(135deg,#3a2a66,#241544); border:1px solid #5a4690;
    display:flex;align-items:center;justify-content:center;font-size:16px; }
  .fam-item .body{ flex:1; min-width:0; }
  .fam-item .body b{ font-size:12.5px; }
  .fam-item .body p{ font-size:11.5px; color:var(--dim); line-height:1.65; margin-top:3px; }
  .fam-item .body .mini-ph{ margin-top:6px; }

  .sync-stat{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .sync-stat .s{ background:var(--panel2); border:1px solid var(--line); border-radius:8px;
    padding:9px 10px; text-align:center; }
  .sync-stat .s b{ font-size:20px; color:var(--green); display:block;
    font-family:"DIN Alternate","Bahnschrift",sans-serif; }
  .sync-stat .s span{ font-size:10.5px; color:var(--dim); }
  .sync-note{ font-size:11px; color:var(--dim); line-height:1.7; margin-top:10px;
    border-left:3px solid var(--green); padding-left:10px; }

  ::-webkit-scrollbar{ width:6px; } ::-webkit-scrollbar-thumb{ background:#1c3050; border-radius:3px; }