/* ========================================================================== 项目台账 · 样式总表（由 _merge_build.py 拼装，不要直接改这个文件） 上半 = 新界面层（ledger-ui/styles.css 原样） 下半 = 台账遗留层（入口层 / 弹窗 / 单位 / 收件箱），选择器统一 .lg 前缀 ========================================================================== */ /* ========================================================================== 项目台账 · 设计令牌 -------------------------------------------------------------------------- 配色只有 6 个基准值（用户指定），其余全部由它们派生： #F6F8FB 页面底 #FFFFFF 卡片 #182230 主文字 #667085 次文字 #E4E9F0 边框 #5576A8 品牌蓝 状态色只用于状态（进行中/已完成/风险），不做装饰。 —— "克制"在这里是一条可执行的规矩：任何新颜色都必须先在上面这 6 个里找到出处。 ========================================================================== */ :root{ /* —— 基准色 —— */ --canvas:#F6F8FB; --surface:#FFFFFF; --ink:#182230; --ink-2:#667085; --line:#E4E9F0; --brand:#5576A8; /* —— 派生：中性阶（只调明度，不换色相） —— */ --ink-3:#98A2B3; /* 三级文字：占位、时间戳 */ --ink-4:#B7C0CE; /* 图标弱化 */ --line-2:#EDF1F6; /* 更浅的分隔线（卡内） */ --fill:#F2F4F8; /* 浅填充：chip、头像底、输入框 */ --fill-2:#F6F8FB; /* 悬停填充 */ --brand-50:#F1F4FA; /* 品牌浅底：选中导航、标签 */ --brand-100:#E3E9F4; --brand-600:#48699B; /* 悬停 */ --brand-700:#3B5A88; /* 按下 */ /* —— 状态色：只给状态用 —— */ --doing:#5576A8; /* 进行中 = 品牌蓝 */ --done:#98A4B5; /* 已完成 = 银灰 */ --risk:#B88668; /* 存在风险 = 琥珀 */ --danger:#B66474; /* 逾期 = 陶红 */ --ok:#4F8F83; /* 正常/闭环 = 青绿 */ --doing-bg:#F1F4FA; --done-bg:#F2F4F7; --risk-bg:#F8F2EC; --danger-bg:#F9F0F2; --ok-bg:#EEF4F3; /* —— 单位色：星图上的"数据色" —— 不是装饰色，是分类色：6 个单位 = 6 个星座，靠它区分。 右栏"单位在网情况"用同一套点，两处才能对上号。 浓度要求很具体 —— 太浅（原来用的 #DDE7F6 那类）放在深底上全是白点， 6 个簇分不出来；太艳就变成霓虹。这 6 个值是调出来的中间档。 */ --o-us:#4E6E9E; --o-owner:#6B5F96; --o-design:#3E7A6E; --o-gc:#9A6A45; --o-sub:#96576B; --o-jl:#5C6778; /* —— 星图舞台：深空/雾白两套，引擎从 CSS 变量读色 —— */ --stage:#0F1826; --stage-2:#16233A; --g-shell:255,255,255; /* 网格线 */ --g-wire:150,164,185; /* 线的基色 */ --g-label:232,238,247; /* 画布文字 */ --g-surface:26,37,54; /* 画布芯片底 */ --g-core:190,214,255; /* 项目核心 */ --g-edge-doing:108,144,200; --g-edge-done:152,164,181; --g-edge-risk:201,154,120; --g-halo:86,118,168; /* —— 字体：Apple 专有 → 有真字重的开源 CJK → 西文 UI → 雅黑兜底 —— Arial 必须排在 CJK 链之后：Windows 上 Arial 会把中文链接到 Arial Unicode MS （单字面、无 500/600），排前面会让 500 字重失效。 */ --font:-apple-system,BlinkMacSystemFont,"SF Pro SC","SF Pro Text","PingFang SC", "HanHei SC","Segoe UI","Helvetica Neue","Noto Sans SC","Source Han Sans SC", "HarmonyOS Sans SC","MiSans","Microsoft YaHei",Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; /* —— 字号：6 档 —— */ --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-15:15px; --fs-17:17px; --fs-22:22px; /* —— 圆角：3 档 —— */ --r:8px; --r-lg:16px; --r-pill:999px; /* —— 柔和阴影 —— */ --sh-1:0 1px 2px rgba(24,34,48,.04); --sh-2:0 1px 2px rgba(24,34,48,.04),0 8px 20px -12px rgba(24,34,48,.14); --sh-3:0 2px 4px rgba(24,34,48,.05),0 18px 44px -20px rgba(24,34,48,.22); /* —— 动效：苹果流体曲线，不给弹跳 —— */ --dur-1:.16s; --dur-2:.24s; --dur-3:.32s; --ease:cubic-bezier(.32,.72,0,1); --sb-w:248px; --rail-w:326px; --tb-h:60px; } *,*::before,*::after{box-sizing:border-box} html,body{height:100%} body{ margin:0;font-family:var(--font);background:var(--canvas);color:var(--ink); font-size:var(--fs-13);line-height:1.55;-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } [hidden]{display:none!important} .sprite{position:absolute;width:0;height:0;overflow:hidden} .ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} button{font:inherit;color:inherit} a{color:inherit;text-decoration:none} input,select,textarea{font:inherit;color:inherit} ::selection{background:var(--brand-100)} :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px} input[type=range]{accent-color:var(--brand)} /* 细滚动条 */ *{scrollbar-width:thin;scrollbar-color:var(--line) transparent} *::-webkit-scrollbar{width:8px;height:8px} *::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:2px solid transparent;background-clip:content-box} *::-webkit-scrollbar-thumb:hover{background:#CFD8E4;background-clip:content-box} *::-webkit-scrollbar-track{background:transparent} /* ========================================================================== 骨架 ========================================================================== */ .app{display:grid;grid-template-columns:var(--sb-w) minmax(0,1fr);min-height:100vh} /* —— 侧边栏 —— */ .sb{ display:flex;flex-direction:column;background:var(--surface); border-right:1px solid var(--line);position:sticky;top:0;height:100vh;z-index:40; } .sb-hd{display:flex;align-items:center;gap:10px;padding:14px 14px 10px} .brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:4px;border-radius:var(--r)} .brand-mark{width:32px;height:32px;border-radius:9px;flex:none;display:block; background:linear-gradient(160deg,#607FB2,#48699B);box-shadow:0 2px 6px rgba(85,118,168,.28)} .brand-mark svg{width:100%;height:100%;display:block} .brand-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25} .brand-txt b{font-size:var(--fs-15);font-weight:600;letter-spacing:-.01em} .brand-txt i{font-size:var(--fs-11);color:var(--ink-3);font-style:normal;letter-spacing:.02em} .sb-close{display:none} .nav{display:flex;flex-direction:column;gap:1px;padding:6px 8px} .nav-i{ display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r); font-size:var(--fs-13);color:var(--ink-2);position:relative; transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease); } .nav-i .ic{color:var(--ink-3);transition:color var(--dur-1) var(--ease)} .nav-i span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nav-i:hover{background:var(--fill-2);color:var(--ink)} .nav-i:hover .ic{color:var(--ink-2)} .nav-i.on{background:var(--brand-50);color:var(--brand);font-weight:600} .nav-i.on .ic{color:var(--brand)} .nav-i.sm{padding:7px 10px} .nav-n{ font-style:normal;font-size:var(--fs-11);font-weight:600;color:var(--ink-3); background:var(--fill);border-radius:var(--r-pill);padding:1px 7px;min-width:20px;text-align:center; } .nav-i.on .nav-n{background:#fff;color:var(--brand)} .nav-new{background:var(--brand)!important;color:#fff!important;font-weight:600;letter-spacing:.02em} .nav-i.on .nav-new{background:var(--brand)!important;color:#fff!important} .sb-sep{height:1px;background:var(--line-2);margin:8px 14px} .sb-sec{padding:0 8px;min-height:0;overflow-y:auto;flex:1} .sb-sec-hd{display:flex;align-items:center;justify-content:space-between;padding:6px 10px 4px; font-size:var(--fs-11);font-weight:600;color:var(--ink-3);letter-spacing:.06em} .proj-list{display:flex;flex-direction:column;gap:1px} .proj{ display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--r); font-size:var(--fs-13);color:var(--ink-2);cursor:pointer;border:0;background:none; text-align:left;width:100%;transition:background var(--dur-1) var(--ease); } .proj:hover{background:var(--fill-2)} .proj.on{background:var(--brand-50);color:var(--ink);font-weight:600} .proj-dot{width:7px;height:7px;border-radius:50%;flex:none} .proj b{flex:1;min-width:0;font-weight:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .proj em{font-style:normal;font-size:var(--fs-11);color:var(--ink-4)} .sb-ft{border-top:1px solid var(--line-2);padding:8px;display:flex;flex-direction:column;gap:1px} .user-row{ display:flex;align-items:center;gap:9px;padding:8px;margin-top:6px;border:0;background:none; border-radius:var(--r);cursor:pointer;text-align:left;width:100%; transition:background var(--dur-1) var(--ease); } .user-row:hover{background:var(--fill-2)} .user-txt{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3} .user-txt b{font-size:var(--fs-13);font-weight:600} .user-txt i{font-style:normal;font-size:var(--fs-11);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .user-row .chev{color:var(--ink-4);width:15px;height:15px} /* —— 头像：字母组合，按单位着色（比网图更克制，也不依赖外部资源） —— */ .ava{ width:30px;height:30px;border-radius:50%;flex:none;display:inline-flex; align-items:center;justify-content:center; font-size:var(--fs-12);font-weight:600;letter-spacing:.01em; background:var(--fill);color:var(--ink-2);border:1px solid var(--line); user-select:none; } .ava[data-org="us"] {background:#EDF1F8;color:#4A6795;border-color:#DCE4F0} .ava[data-org="owner"] {background:#F2F0F8;color:#6B628F;border-color:#E4E0EF} .ava[data-org="design"]{background:#EBF2F1;color:#41766D;border-color:#D9E8E5} .ava[data-org="gc"] {background:#F8F1EC;color:#96694C;border-color:#EFE2D8} .ava[data-org="sub"] {background:#F7EFF2;color:#96606F;border-color:#EFDFE4} .ava[data-org="jl"] {background:#F0F2F6;color:#5B6678;border-color:#E1E5ED} .ava.sm{width:24px;height:24px;font-size:var(--fs-11)} .ava.lg{width:38px;height:38px;font-size:var(--fs-15)} .ava-stack{display:flex;align-items:center} .ava-stack .ava{margin-left:-8px;border:2px solid var(--surface);box-shadow:none} .ava-stack .ava:first-child{margin-left:0} /* —— 主区 —— */ .main{display:flex;flex-direction:column;min-width:0} .tb{ height:var(--tb-h);display:flex;align-items:center;gap:12px;padding:0 20px; background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30; } .tb-spacer{flex:1} .tb-menu{display:none} .crumb{display:flex;align-items:center;gap:7px;font-size:var(--fs-13);color:var(--ink-3);min-width:0} .crumb b{color:var(--ink);font-weight:600;font-size:var(--fs-15);letter-spacing:-.01em} .crumb .ic{width:14px;height:14px;color:var(--ink-4)} .search{ display:flex;align-items:center;gap:8px;background:var(--fill);border:1px solid transparent; border-radius:var(--r-pill);padding:0 12px;height:34px;transition:all var(--dur-2) var(--ease); } .search .ic{width:15px;height:15px;color:var(--ink-3)} .search input{border:0;background:none;outline:none;width:100%;font-size:var(--fs-13)} .search input::placeholder{color:var(--ink-3)} .search:focus-within{background:var(--surface);border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50)} .search kbd{ font-family:var(--font);font-size:var(--fs-11);color:var(--ink-3);background:var(--surface); border:1px solid var(--line);border-radius:5px;padding:1px 5px;line-height:1.4; } .tb-search{width:290px} .icon-btn{ width:34px;height:34px;border-radius:var(--r);border:1px solid transparent;background:none; display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2); position:relative;transition:all var(--dur-1) var(--ease);flex:none; } .icon-btn:hover{background:var(--fill);color:var(--ink)} .icon-btn.sm{width:26px;height:26px;border-radius:6px} .icon-btn.sm .ic{width:15px;height:15px} .icon-btn .dot{position:absolute;top:7px;right:8px;width:6px;height:6px;border-radius:50%; background:var(--risk);border:1.5px solid var(--surface)} .icon-btn.on{background:var(--brand-50);color:var(--brand)} .tb-ava{cursor:pointer} .pages{padding:18px 22px 44px;min-width:0} /* ========================================================================== 通用零件 ========================================================================== */ .card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-1);min-width:0; } .card-hd{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line-2)} .card-hd h3{margin:0;font-size:var(--fs-15);font-weight:600;letter-spacing:-.01em} .card-hd .sp{flex:1} .card-bd{padding:16px 18px} .card-bd.tight{padding:10px 18px 14px} .card-bd.flush{padding:0} .btn{ /* justify-content 必须显式写：inline-flex 的默认是 flex-start， 一旦按钮被拉宽（flex:1 / width:100%）文字就贴左，看着像坏了 */ display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 13px;border-radius:var(--r); border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:var(--fs-13); font-weight:500;cursor:pointer;white-space:nowrap; transition:all var(--dur-1) var(--ease); } .btn:hover{background:var(--fill-2);border-color:#D8DFE9} .btn:active{transform:translateY(.5px)} .btn .ic{width:15px;height:15px} .btn.pri{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(85,118,168,.24)} .btn.pri:hover{background:var(--brand-600);border-color:var(--brand-600)} .btn.gho{border-color:transparent;background:none;color:var(--ink-2)} .btn.gho:hover{background:var(--fill);color:var(--ink)} .btn.sm{height:27px;padding:0 10px;font-size:var(--fs-12)} .btn.sm .ic{width:13px;height:13px} .chip{ display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:var(--r-pill); font-size:var(--fs-12);font-weight:500;background:var(--fill);color:var(--ink-2); border:1px solid transparent;white-space:nowrap; } .chip .dt{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .chip.t-doing{background:var(--doing-bg);color:var(--doing)} .chip.t-done{background:var(--done-bg);color:#7C8899} .chip.t-risk{background:var(--risk-bg);color:#9A6C4C} .chip.t-danger{background:var(--danger-bg);color:var(--danger)} .chip.t-ok{background:var(--ok-bg);color:var(--ok)} .chip.t-brand{background:var(--brand-50);color:var(--brand)} .chip.t-line{background:transparent;border-color:var(--line);color:var(--ink-2)} .chip.pick{cursor:pointer;transition:all var(--dur-1) var(--ease)} .chip.pick:hover{background:#E9EDF4} .chip.pick.on{background:var(--ink);color:#fff} .chip.pick.on .dt{background:#fff} .tag{ display:inline-flex;align-items:center;font-size:var(--fs-11);color:var(--ink-2); background:var(--fill);border-radius:5px;padding:1px 6px;white-space:nowrap; } .grow{flex:1;min-width:0} .muted{color:var(--ink-2)} .dim{color:var(--ink-3)} .mono{font-family:var(--mono);font-size:var(--fs-12);letter-spacing:-.02em} .trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .row{display:flex;align-items:center;gap:8px;min-width:0} .col{display:flex;flex-direction:column;min-width:0} .gap4{gap:4px}.gap6{gap:6px}.gap10{gap:10px}.gap14{gap:14px} .mt2{margin-top:2px}.mt6{margin-top:6px}.mt10{margin-top:10px}.mt14{margin-top:14px}.mt18{margin-top:18px} .nowrap{white-space:nowrap} .hr{height:1px;background:var(--line-2);margin:14px 0} .hr.tight{margin:9px 0} .sec-t{font-size:var(--fs-11);font-weight:600;color:var(--ink-3);letter-spacing:.06em;margin:0 0 8px} .num{font-variant-numeric:tabular-nums} .linkish{cursor:pointer} .linkish:hover{color:var(--brand)} .arrow{width:14px;height:14px;color:var(--ink-4);flex:none} /* 分段控件：滑块式指示器，切换"滑"过去而不是闪过去 */ .seg{display:inline-flex;gap:2px;background:var(--fill);border-radius:var(--r-pill);padding:3px;position:relative} .seg button{ border:0;background:none;cursor:pointer;padding:5px 12px;border-radius:var(--r-pill); font-size:var(--fs-12);font-weight:500;color:var(--ink-2);position:relative;z-index:1; transition:color var(--dur-2) var(--ease);white-space:nowrap; } .seg button.on{color:var(--ink);font-weight:600} .seg .thumb{ position:absolute;top:3px;bottom:3px;border-radius:var(--r-pill);background:var(--surface); box-shadow:var(--sh-1);z-index:0; transition:left var(--dur-2) var(--ease),width var(--dur-2) var(--ease); } /* 选项卡：与侧栏导航同源，切页时"滑"过去 */ .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);position:relative;overflow-x:auto;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tabs button{ border:0;background:none;cursor:pointer;padding:10px 14px;font-size:var(--fs-13);color:var(--ink-2); white-space:nowrap;transition:color var(--dur-1) var(--ease); } .tabs button:hover{color:var(--ink)} .tabs button.on{color:var(--brand);font-weight:600} .tabs .ind{ position:absolute;bottom:-1px;height:2px;background:var(--brand);border-radius:2px; transition:left var(--dur-2) var(--ease),width var(--dur-2) var(--ease); } /* 数据表 */ .tbl{width:100%;border-collapse:collapse} .tbl th{ text-align:left;font-size:var(--fs-11);font-weight:600;color:var(--ink-3);letter-spacing:.04em; padding:9px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface); } .tbl td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle;font-size:var(--fs-13)} .tbl tbody tr{transition:background var(--dur-1) var(--ease)} .tbl tbody tr:hover{background:var(--fill-2)} .tbl tbody tr:last-child td{border-bottom:0} .tbl .t-r{text-align:right} .tbl-wrap{overflow-x:auto} /* 进度条 */ .bar{height:6px;border-radius:99px;background:var(--fill);overflow:hidden;min-width:60px} .bar i{display:block;height:100%;border-radius:99px;background:var(--brand); transition:width var(--dur-3) var(--ease)} .bar i.ok{background:var(--ok)} .bar i.risk{background:var(--risk)} /* 空状态 */ .empty{padding:44px 20px;text-align:center;color:var(--ink-3)} .empty .ic{width:26px;height:26px;color:var(--ink-4);margin-bottom:8px} /* Toast */ .toast-wrap{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200; display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none} .toast{ background:#182230F2;color:#fff;font-size:var(--fs-13);padding:9px 15px;border-radius:var(--r-pill); box-shadow:var(--sh-3);display:flex;align-items:center;gap:8px; animation:tin var(--dur-3) var(--ease); } .toast .ic{width:15px;height:15px} @keyframes tin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ========================================================================== 页面骨架：正文 + 右栏 ========================================================================== */ .page{display:grid;grid-template-columns:minmax(0,1fr) var(--rail-w);gap:18px;align-items:start} .page.wide{grid-template-columns:minmax(0,1fr) 352px} .page.no-rail{grid-template-columns:minmax(0,1fr)} .stack{display:flex;flex-direction:column;gap:18px;min-width:0} .rail{display:flex;flex-direction:column;gap:14px;min-width:0;position:sticky;top:calc(var(--tb-h) + 18px)} @keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .page-enter>*{animation:fadeUp var(--dur-3) var(--ease) both} .page-enter>*:nth-child(2){animation-delay:.04s} /* —— 页头 —— */ .phead{padding:2px 2px 0} .phead .kick{font-size:var(--fs-11);color:var(--ink-3);letter-spacing:.06em;font-weight:600;text-transform:uppercase} .phead h1{margin:5px 0 0;font-size:var(--fs-22);font-weight:600;letter-spacing:-.02em;line-height:1.25} .phead .sub{margin:5px 0 0;font-size:var(--fs-13);color:var(--ink-2);max-width:60ch} .phead-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px} .phead-bar .sp{flex:1;min-width:8px} .dot-sep{width:3px;height:3px;border-radius:50%;background:var(--ink-4);flex:none} /* —— 统计磁贴 —— */ .tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .tile{padding:14px 16px;display:flex;flex-direction:column;gap:9px;cursor:default; transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)} .tile.lift{cursor:pointer} .tile.lift:hover{border-color:#D5DCE7;box-shadow:var(--sh-2);transform:translateY(-1px)} .tile-hd{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:var(--fs-12);font-weight:500} .tile-hd .ic{width:16px;height:16px;color:var(--ink-3)} .tile-hd .sp{flex:1} .tile-v{display:flex;align-items:baseline;gap:6px} .tile-v b{font-size:26px;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums} .tile-v i{font-style:normal;font-size:var(--fs-12);color:var(--ink-3)} .tile-ft{font-size:var(--fs-11);color:var(--ink-3);display:flex;align-items:center;gap:5px} .tile-ft .up{color:var(--ok);font-weight:600} .tile-ft .dn{color:var(--risk);font-weight:600} /* —— 时间轴（沟通台账） —— */ .tl{display:flex;flex-direction:column} .tl-day{position:relative;padding-left:22px} .tl-day::before{content:"";position:absolute;left:6px;top:6px;bottom:-4px;width:1px;background:var(--line)} .tl-day:last-child::before{bottom:auto;height:14px} .tl-day-hd{display:flex;align-items:center;gap:8px;margin:0 0 8px} .tl-day-hd b{font-size:var(--fs-12);font-weight:600;color:var(--ink)} .tl-day-hd span{font-size:var(--fs-11);color:var(--ink-3)} .tl-day-hd::before{content:"";position:absolute;left:3px;margin-top:1px;width:7px;height:7px;border-radius:50%; background:var(--surface);border:1.5px solid var(--line)} .tl-day.live::before{border-color:var(--brand);background:var(--brand)} .ev{display:flex;gap:11px;padding:9px 0 9px 0;position:relative;border-radius:var(--r);cursor:pointer; transition:background var(--dur-1) var(--ease)} .ev:hover{background:var(--fill-2)} .ev-time{width:42px;flex:none;font-size:var(--fs-11);color:var(--ink-3);font-variant-numeric:tabular-nums;padding-top:2px} .ev-ava{flex:none;padding-top:1px} .ev-bd{flex:1;min-width:0} .ev-bd .t{font-size:var(--fs-13);line-height:1.5} .ev-bd .t b{font-weight:600} .ev-bd .m{font-size:var(--fs-11);color:var(--ink-3);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .ev-quote{margin-top:7px;padding:9px 11px;background:var(--fill-2);border-left:2px solid var(--line); border-radius:0 var(--r) var(--r) 0;font-size:var(--fs-12);color:var(--ink-2);line-height:1.6} .ev-quote.model{border-left-color:var(--brand);background:var(--brand-50)} /* —— 列表行（任务/文件/决策） —— */ .li{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r);cursor:pointer; transition:background var(--dur-1) var(--ease);border:1px solid transparent} .li:hover{background:var(--fill-2)} .li.sel{background:var(--brand-50);border-color:var(--brand-100)} .li+.li{border-top:1px solid var(--line-2);border-radius:0} .li+.li:hover{background:var(--fill-2)} .li-bd{flex:1;min-width:0} .li-bd .t{font-size:var(--fs-13);font-weight:500;line-height:1.45} .li-bd .m{font-size:var(--fs-11);color:var(--ink-3);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .li-end{display:flex;align-items:center;gap:8px;flex:none} /* 文件类型图标 */ .ft{width:32px;height:32px;border-radius:var(--r);flex:none;display:grid;place-items:center; font-size:9px;font-weight:700;letter-spacing:.02em;background:var(--fill);color:var(--ink-2); border:1px solid var(--line);font-family:var(--mono)} .ft[data-t="PDF"]{background:#F7EFEF;color:#9E5D5D;border-color:#EFDFDF} .ft[data-t="DWG"]{background:#EDF1F8;color:#4A6795;border-color:#DCE4F0} .ft[data-t="RVT"]{background:#EBF2F1;color:#41766D;border-color:#D9E8E5} .ft[data-t="XLS"]{background:#F1F3EF;color:#5F7A54;border-color:#E2E8DC} .ft[data-t="DOC"]{background:#F1F1F6;color:#5B5F83;border-color:#E2E2EE} .ft[data-t="IFC"]{background:#F8F1EC;color:#96694C;border-color:#EFE2D8} /* —— 右栏零件 —— */ .mtiles{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-2); border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)} .mtile{background:var(--surface);padding:13px 14px;display:flex;flex-direction:column;gap:7px; transition:background var(--dur-1) var(--ease)} .mtile:hover{background:var(--fill-2)} .mtile .k{display:flex;align-items:center;gap:6px;font-size:var(--fs-11);color:var(--ink-2)} .mtile .k .ic{width:14px;height:14px;color:var(--ink-3)} .mtile .v{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums} .mtile .v small{font-size:var(--fs-11);font-weight:500;color:var(--ink-3);letter-spacing:0} .mtile .d{font-size:var(--fs-11);color:var(--ink-3);display:flex;align-items:center;gap:4px} .mtile .d .up{color:var(--ok);font-weight:600} .mtile .d .dn{color:var(--risk);font-weight:600} .mtile .d .fl{color:var(--ink-2)} .tipcard{background:var(--brand-50);border:1px solid var(--brand-100);border-radius:var(--r-lg);padding:14px 16px} .tipcard .h{display:flex;align-items:center;gap:7px;font-size:var(--fs-13);font-weight:600;color:#3F5C87} .tipcard .h .ic{width:16px;height:16px} .tipcard p{margin:7px 0 0;font-size:var(--fs-12);color:#5B6E8C;line-height:1.6} /* ========================================================================== 协作星图 ========================================================================== */ .gx{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--stage); height:clamp(460px,64vh,700px);isolation:isolate;user-select:none;touch-action:pan-y} /* 舞台中心那一圈柔光。z-index 必须是 -1，不能是 1： 它以前是 1，落在 canvas(z-index:0) **之上** —— 而它的中心是不透明的 --stage-2， 于是正好把画在球心的那颗球整个盖住。现象是"球明明画了却看不见"： canvas 里读该点 RGBA 是 (190,214,255,224) 的实心，页面上却是 (33,46,71) 一团暗。 .gx 有 isolation:isolate，-1 只会落到 .gx 背景之上、canvas 之下， 既能透出来，又不遮任何东西。 */ .gx::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1; background:radial-gradient(120% 90% at 50% 46%,var(--stage-2) 0%,rgba(0,0,0,0) 62%)} .gx.light{--stage:#F1F4F9;--stage-2:#FBFCFE;--g-shell:24,34,48;--g-wire:120,133,152; --g-label:24,34,48;--g-surface:255,255,255;--g-core:85,118,168; --g-edge-doing:85,118,168;--g-edge-done:152,164,181;--g-edge-risk:184,134,104;--g-halo:85,118,168} #gxCv{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;z-index:0} #gxCv.drag{cursor:grabbing} /* 舞台里的星体按单位着色。前面一版用的是浅色底（#DDE7F6 那一档）， 在深底上 6 个簇全变成白点，"谁和谁一个单位"完全读不出来； 换成这组中调色之后聚类一眼可辨，而跨单位的长线也才真正传递出"跨团队"。 白描边保留，星体才像浮在深底上的实体而不是色斑。 */ .gx .ava[data-org="us"] {background:var(--o-us);color:#EAF1FB} .gx .ava[data-org="owner"] {background:var(--o-owner);color:#F1EDFA} .gx .ava[data-org="design"]{background:var(--o-design);color:#E7F2EF} .gx .ava[data-org="gc"] {background:var(--o-gc);color:#F9F0E7} .gx .ava[data-org="sub"] {background:var(--o-sub);color:#FAECF0} .gx .ava[data-org="jl"] {background:var(--o-jl);color:#EEF1F6} /* 单位图例条（舞台标题下方） */ /* 右栏分布条行首的小圆点：和舞台星体同色，两处能对上。 这里也是**唯一**的单位配色图例 —— 舞台里曾有一条同样的图例条，是重复的， 而且它会占掉标题块的高度、把球挤小，已撤掉。 */ .od{width:8px;height:8px;border-radius:50%;flex:none} .gx-nodes{position:absolute;inset:0;z-index:2;pointer-events:none} /* 节点：零尺寸锚点 + 居中标 + 外挂标签。 锚点必须零尺寸 —— 否则连线端点会被标签宽度顶偏半个身位。 */ .gnode{position:absolute;left:0;top:0;width:0;height:0;pointer-events:auto;cursor:pointer; border:0;background:none;padding:0;transform-origin:0 0;will-change:transform} .gnode .ava{ position:absolute;left:0;top:0;width:var(--ava,28px);height:var(--ava,28px);border-radius:50%; transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.86); box-shadow:0 2px 8px rgba(4,10,20,.45); font-size:clamp(8px,calc(var(--ava,28px) * .40),12px); transition:box-shadow var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .gx.light .gnode .ava{border-color:#fff;box-shadow:0 1px 3px rgba(24,34,48,.16)} /* 悬停只做两件小事：外扩一圈光环 + 放大 14%。这是"丝滑"的来源 —— 小幅度、短时长、同一条曲线，不弹跳。 */ .gnode:hover .ava,.gnode.hot .ava,.gnode.sel .ava{transform:translate(-50%,-50%) scale(1.16)} /* --nm-dy / --nm-dx 由引擎每帧写进来：名牌在"左右 × 三档高度 × 三档间距"的 网格里挑一个不撞别人的位置。没有它的话，一人宽的名牌横着放， 总会扫到同高度的人（实测球心附近的人上下左右都有人）。 */ .gnode .nm{ position:absolute;top:0; transform:translateY(calc(-50% + var(--nm-dy,0px)));white-space:nowrap; font-size:var(--fs-11);font-weight:500;line-height:1.3;color:rgb(var(--g-label)); background:rgba(var(--g-surface),.82);padding:2px 7px;border-radius:var(--r-pill); opacity:0;transition:opacity var(--dur-2) var(--ease);pointer-events:none; } /* 标签与星体之间留 0.68 个星体直径 —— 比例固定，标签就永远贴着星的边缘， 不会因为断点换了星体大小就飘开或被星盖住。 */ .gnode .nm{left:calc(var(--ava,28px) * .68 + var(--nm-dx,0px))} .gnode.lft .nm{left:auto;right:calc(var(--ava,28px) * .68 + var(--nm-dx,0px))} .gnode.show .nm,.gnode:hover .nm,.gnode.hot .nm{opacity:1} .gnode.sel .ava{border-color:#fff;box-shadow:0 0 0 3px rgba(var(--g-halo),.55),0 2px 12px rgba(4,10,20,.5)} .gnode.hot .ava{box-shadow:0 0 0 3px rgba(var(--g-halo),.4),0 2px 10px rgba(4,10,20,.45)} .gnode.gone{opacity:.14;pointer-events:none} .gnode.gone .nm{display:none} .gnode.core .ava{width:calc(var(--ava,28px) * 1.42);height:calc(var(--ava,28px) * 1.42);background:rgba(var(--g-core),.16)!important; border-color:rgba(var(--g-core),.6)!important;color:rgb(var(--g-label))!important;font-size:var(--fs-11)} .gmeta{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none} /* 舞台内的浮层通用：深色玻璃 */ .gx .gl{background:rgba(20,30,47,.62);backdrop-filter:saturate(160%) blur(16px); -webkit-backdrop-filter:saturate(160%) blur(16px);border:1px solid rgba(255,255,255,.09); border-radius:12px;color:rgb(var(--g-label))} .gx.light .gl{background:rgba(255,255,255,.76);border-color:var(--line)} .gx-title{position:absolute;left:22px;top:18px;z-index:5;max-width:min(48%,360px)} .gx-title h2{margin:0;font-size:var(--fs-17);font-weight:600;letter-spacing:-.01em;color:#fff} .gx.light .gx-title h2{color:var(--ink)} .gx-title .k{font-size:var(--fs-11);color:rgba(var(--g-label),.62);letter-spacing:.05em;margin-top:3px} .gx-title p{margin:8px 0 0;font-size:var(--fs-12);line-height:1.6;color:rgba(var(--g-label),.62)} .gx.light .gx-title p{color:var(--ink-2)} .gx-phase{position:absolute;right:20px;top:18px;z-index:5;width:236px;padding:11px 13px} .gx-phase .k{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-11); color:rgba(var(--g-label),.62);letter-spacing:.04em} .gx-phase .k b{color:rgb(var(--g-label));font-weight:600;font-size:var(--fs-12)} .gx-range{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:99px;margin:11px 0 0; background:linear-gradient(90deg,#93ADD6 var(--p,100%),rgba(255,255,255,.16) var(--p,100%));outline:none;cursor:pointer} .gx.light .gx-range{background:linear-gradient(90deg,var(--brand) var(--p,100%),#DFE5EE var(--p,100%))} .gx-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%; background:#fff;border:0;box-shadow:0 1px 4px rgba(6,12,22,.5);cursor:grab} .gx-range::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff; box-shadow:0 1px 4px rgba(6,12,22,.5);cursor:grab} .gx-ticks{position:relative;height:15px;margin-top:6px} .gx-ticks span{position:absolute;top:0;transform:translateX(-50%);font-size:var(--fs-11); color:rgba(var(--g-label),.45);white-space:nowrap;transition:color var(--dur-2) var(--ease)} .gx-ticks span:first-child{transform:none} .gx-ticks span:last-child{transform:translateX(-100%)} .gx-ticks span.on{color:rgb(var(--g-label));font-weight:600} .gx-phase .cut{margin-top:8px;font-size:var(--fs-11);color:rgba(var(--g-label),.55); display:flex;align-items:center;gap:6px} .gx-phase .cut b{color:rgb(var(--g-label));font-weight:600;font-variant-numeric:tabular-nums} /* 工具条：竖排 */ .gx-tools{position:absolute;left:20px;top:50%;transform:translateY(-50%);z-index:5; display:flex;flex-direction:column;gap:6px} .gtool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; width:52px;padding:8px 2px;border-radius:11px;cursor:pointer;font-size:var(--fs-11); background:rgba(20,30,47,.62);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.09);color:rgba(var(--g-label),.72);border-width:1px; transition:all var(--dur-2) var(--ease)} .gx.light .gtool{background:rgba(255,255,255,.8);border-color:var(--line);color:var(--ink-2)} .gtool:hover{background:rgba(32,45,68,.86);color:#fff;transform:translateX(2px)} .gx.light .gtool:hover{background:#fff;color:var(--ink);box-shadow:var(--sh-2)} .gtool.on{background:rgba(85,118,168,.9);border-color:rgba(140,170,215,.5);color:#fff} .gtool .ic{width:16px;height:16px} .gtool.zoom2{gap:1px;padding:5px 2px} .gtool.zoom2 button{border:0;background:none;color:inherit;cursor:pointer;padding:2px; display:grid;place-items:center;border-radius:5px;width:100%} .gtool.zoom2 button:hover{background:rgba(255,255,255,.12)} .gx.light .gtool.zoom2 button:hover{background:var(--fill)} .gtool.zoom2 .ic{width:14px;height:14px} .gtool.zoom2 .v{font-size:10px;font-variant-numeric:tabular-nums;opacity:.75;line-height:1} /* 筛选面板 */ .gx-filter{position:absolute;left:20px;top:50%;transform:translateY(-50%);z-index:6; width:236px;padding:13px;display:flex;flex-direction:column;gap:11px; animation:fadeUp var(--dur-2) var(--ease) both} .gx-filter .h{display:flex;align-items:center;font-size:var(--fs-12);font-weight:600} .gx-filter .h .sp{flex:1} .gx-filter .fsearch{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.08); border-radius:var(--r);padding:0 9px;height:30px} .gx.light .gx-filter .fsearch{background:var(--fill)} .gx-filter .fsearch input{background:none;border:0;outline:none;width:100%;font-size:var(--fs-12); color:rgb(var(--g-label))} .gx.light .gx-filter .fsearch input{color:var(--ink)} .gx-filter .fsearch input::placeholder{color:rgba(var(--g-label),.42)} .gx-filter .fgrid{display:flex;flex-wrap:wrap;gap:6px} .fchip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:var(--r-pill); font-size:var(--fs-11);cursor:pointer;border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.05);color:rgba(var(--g-label),.8); transition:all var(--dur-1) var(--ease)} .gx.light .fchip{background:var(--surface);border-color:var(--line);color:var(--ink-2)} .fchip .dt{width:6px;height:6px;border-radius:50%} .fchip:hover{border-color:rgba(255,255,255,.28)} .fchip.on{background:rgba(255,255,255,.92);color:#182230;border-color:transparent;font-weight:600} .gx.light .fchip.on{background:var(--ink);color:#fff;border-color:var(--ink)} .fchip .n{opacity:.6;font-variant-numeric:tabular-nums} /* 图例 */ .gx-legend{position:absolute;left:18px;right:18px;bottom:16px;z-index:5;display:flex;align-items:center; gap:14px;padding:9px 14px;flex-wrap:wrap} .gx-legend .lg-grp{display:flex;align-items:center;gap:13px;flex-wrap:wrap} .gx-legend .lg{display:flex;align-items:center;gap:6px;font-size:var(--fs-11); color:rgba(var(--g-label),.66);cursor:pointer;transition:opacity var(--dur-1) var(--ease)} .gx.light .gx-legend .lg{color:var(--ink-2)} .gx-legend .lg.off{opacity:.38} .gx-legend .lg:hover{color:rgb(var(--g-label))} .gx-legend .lg .ln{width:16px;height:2px;border-radius:2px;flex:none} .gx-legend .lg .dt{width:8px;height:8px;border-radius:50%;flex:none; background:rgba(var(--g-core),.35);border:1.5px solid rgba(255,255,255,.6)} .gx.light .gx-legend .lg .dt{border-color:#fff;background:var(--brand-50)} .gx-legend .sp{flex:1;min-width:4px} .gx-legend .cnt{font-size:var(--fs-11);color:rgba(var(--g-label),.5);font-variant-numeric:tabular-nums; display:flex;align-items:center;gap:9px} .gx.light .gx-legend .cnt{color:var(--ink-3)} .gx-legend .cnt b{color:rgb(var(--g-label));font-weight:600} .gx.light .gx-legend .cnt b{color:var(--ink)} /* 人物卡 */ .gx-person{position:absolute;z-index:7;width:268px;padding:14px;background:var(--surface); border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3); animation:fadeUp var(--dur-2) var(--ease) both} .gx-person .hd{display:flex;gap:10px;align-items:flex-start} .gx-person .hd .ava{width:38px;height:38px;font-size:var(--fs-15)} .gx-person .hd .x{position:absolute;right:9px;top:9px} .gx-person h4{margin:0;font-size:var(--fs-15);font-weight:600;letter-spacing:-.01em} .gx-person .role{font-size:var(--fs-12);color:var(--ink-2);margin-top:1px} .gx-person .role span{color:var(--ink-3)} .gx-person .stat{display:flex;gap:16px;margin-top:11px;padding:10px 0;border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2)} .gx-person .stat div{display:flex;flex-direction:column;gap:1px} .gx-person .stat b{font-size:var(--fs-15);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2} .gx-person .stat i{font-style:normal;font-size:var(--fs-11);color:var(--ink-3)} .gx-person .lst{margin-top:9px;display:flex;flex-direction:column;gap:6px;max-height:150px;overflow-y:auto} .gx-person .pi{display:flex;align-items:flex-start;gap:7px;font-size:var(--fs-12);cursor:pointer; padding:3px 5px;margin:-3px -5px;border-radius:6px;transition:background var(--dur-1) var(--ease)} .gx-person .pi:hover{background:var(--fill-2)} .gx-person .pi .dt{width:6px;height:6px;border-radius:50%;margin-top:6px;flex:none} .gx-person .pi .tx{flex:1;min-width:0;line-height:1.45} .gx-person .pi .tx i{font-style:normal;display:block;color:var(--ink-3);font-size:var(--fs-11);margin-top:1px} .gx-person .ft{margin-top:12px;display:flex;gap:7px} .gx-person .ft .btn{flex:1;justify-content:center} /* 操作提示现在是底栏里的一个片段（原 .gx-hint 独立成条，横在球的脚下吃高度） */ .gx-legend .lg-hint{font-size:var(--fs-11);color:rgba(var(--g-label),.42); white-space:nowrap;pointer-events:none} .gx.light .gx-legend .lg-hint{color:var(--ink-3)} .gx-legend .lg-hint + .lg-grp{padding-left:14px;border-left:1px solid rgba(var(--g-label),.16)} .gx.light .gx-legend .lg-hint + .lg-grp{border-left-color:var(--line)} .gx-empty{position:absolute;inset:0;display:grid;place-items:center;z-index:8; background:rgba(15,24,38,.55);backdrop-filter:blur(3px)} .gx.light .gx-empty{background:rgba(246,248,251,.72)} .gx-empty div{text-align:center;color:rgba(var(--g-label),.7);font-size:var(--fs-12)} .gx.light .gx-empty div{color:var(--ink-2)} .gx-empty .ic{width:24px;height:24px;margin-bottom:7px;opacity:.6} @media (max-width:1400px){:root{--rail-w:300px}} @media (max-width:1240px){ .page,.page.wide{grid-template-columns:minmax(0,1fr)} .rail{position:static;flex-direction:row;flex-wrap:wrap;gap:14px} .rail>*{flex:1 1 300px;min-width:280px} .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:1080px){ :root{--sb-w:66px} .sb .brand-txt,.nav-i span,.nav-n,.sb-sec,.sb-sep,.user-txt,.sb-ft .nav-i span{display:none} .nav-i{justify-content:center;padding:10px 0} .sb-hd{justify-content:center;padding:14px 8px 10px} .user-row{justify-content:center;padding:8px 0} .gx{height:clamp(400px,54vh,560px)} } @media (max-width:880px){ .app{grid-template-columns:minmax(0,1fr)} .sb{position:fixed;left:0;top:0;width:264px;transform:translateX(-102%); transition:transform var(--dur-3) var(--ease);box-shadow:var(--sh-3);z-index:60} .sb .brand-txt,.nav-i span,.nav-n,.sb-sec,.sb-sep,.user-txt,.sb-ft .nav-i span{display:flex} .sb-sec,.sb-sep{display:block} .nav-i{justify-content:flex-start;padding:8px 10px} .sb-hd{justify-content:flex-start;padding:14px 14px 10px} .user-row{justify-content:flex-start;padding:8px} body.nav-open .sb{transform:none} .sb-close{display:inline-flex} .scrim{position:fixed;inset:0;background:rgba(24,34,48,.42);z-index:55; animation:fadeUp var(--dur-2) var(--ease) both} .tb-menu{display:inline-flex} .tb-search{width:auto;flex:1;max-width:230px} .pages{padding:14px 14px 40px} .gx-title{max-width:60%} .gx-tools{left:12px;flex-direction:row;top:auto;bottom:64px;transform:none} .gtool{width:44px;font-size:10px} .gx-stage-pad{padding-bottom:56px} } @media (max-width:640px){ .tiles{grid-template-columns:minmax(0,1fr);gap:10px} .tb-search kbd{display:none} .tb{padding:0 12px;gap:8px} /* 顶栏在 375px 下装不下「项目 + 快记 + 发起任务 + 头像」一整套。 挤不下时它不改行，而是把整条顶栏撑到比屏幕宽（实测要 425~480px）， Chrome 只好把整页缩到 88% 硬塞进去 —— 用户感觉是「字莫名其妙变小了」， 不肯缩的浏览器则直接冒出横向滚动条。 窄屏让它换行：第一行放项目与动作，搜索框独占第二行；项目名改成省略号。 ⚠️ 上限不要写成 vw：vw 跟布局视口走，视口被撑大时 44vw 也跟着变大 —— 越修越宽。 */ .tb{flex-wrap:wrap;height:auto;min-height:var(--tb-h);padding:6px 10px;row-gap:6px} /* 靠 flex-wrap 自动折行会折成三行（实测 129px 厚）：.tb-spacer{flex:1} 先把第一行占满， 动作区被挤到第二行，搜索再被挤到第三行。所以这里把占位元素撤掉， 改用 margin-left:auto 把动作区推到右边 —— 第一行「菜单 + 项目 + 动作」，第二行整行放搜索。 */ .tb-spacer{display:none} .tb-search{order:9;flex:1 1 100%;max-width:none} .tb-actions{margin-left:auto;min-width:0;gap:8px} /* 面包屑在窄屏被挤到只剩 26px（等于几个省略号），而当前页名在页签条上本来就有， 项目名在项目按钮上也有 —— 干脆收掉，腾出来的宽度正好让「项目 + 快记 + 发起任务 + 头像」 在 375 下排进一行，顶栏就不会涨到三行那么厚。 */ .crumb{display:none} /* 右侧要并排「项目 + 快记 + 发起任务 + 头像」，窄屏给按钮用紧凑档： 按钮各宽 10px 看似不多，四个元素叠加就是一行放不下。 ⚠️ .pn-wrap 默认 min-width:auto ⇒ 它的最小宽度＝里面按钮的最小宽度（被项目名撑住）， 于是 .pn 的 max-width 形同虚设。要真的收窄，父这一层也得允许收缩。 */ .tb-actions .btn{height:30px;padding:0 9px;font-size:var(--fs-12)} .pn-wrap{min-width:0} .pn{max-width:100px;min-width:0} .pn #projName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .crumb b{font-size:var(--fs-13)} .crumb .ic,.crumb span.hide-s{display:none} .page{gap:14px} .card-hd{padding:13px 14px} .card-bd{padding:14px} .gx{height:min(82vh,580px)} /* 标题与阶段面板在窄屏必须上下排。并排时 340px 宽塞不下"186px 的面板 + 标题"， 实测标题被压掉半截（"COLLABORATION GALAX" 直接截断），而且球顶的三个人 被压在标题下面。 */ .gx-title{left:14px;right:14px;top:12px;max-width:none} .gx-title .k{display:none} .gx-title h2{font-size:var(--fs-15)} .gx-title p{display:none} .gx-phase{left:14px;right:14px;top:44px;width:auto;padding:9px 11px} .gx-legend{left:10px;right:10px;bottom:10px;gap:9px;padding:8px 11px} .gx-legend .lg-hint{display:none} .gx-legend .cnt{width:100%;justify-content:flex-start} /* 人物卡在窄屏改成底部抽屉。原来左右撑满，点完人整个球被盖住 —— 而"他连着谁"恰恰是点他的理由，盖住球等于把答案藏了。 */ .gx-person{width:auto;left:10px!important;right:10px;top:auto!important;bottom:58px; max-height:58%;overflow-y:auto;padding:13px} .gx-person .lst{max-height:none} .mtiles{grid-template-columns:1fr 1fr} .ava-stack .ava:nth-child(n+5){display:none} /* 星体尺寸与标签间距**不再在这一档写死**：它们已经跟着 --ava 走， 而 --ava 由引擎按球半径算（球小了星自然小）。这里只收一收描边粗细。 */ .gnode .ava{border-width:1.5px} .phead .sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} } /* ========================================================================== 补全：图表 / 分布条 / 决策卡 / 侧栏过滤条 / 抽屉 ========================================================================== */ .sp{flex:1;min-width:4px} /* 进度柱：单色，不做多色堆叠 —— 读数优先于好看 */ .ch{position:relative;display:flex;align-items:flex-end;gap:6px;height:108px;padding-bottom:16px} .ch-c{position:relative;flex:1;height:100%;min-width:0} .ch-b{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:24px; background:var(--brand-100);border-radius:5px;display:flex;align-items:flex-end;overflow:hidden;min-height:3px; transition:height var(--dur-3) var(--ease)} .ch-b i{display:block;width:100%;background:var(--brand);border-radius:5px; transition:height var(--dur-3) var(--ease)} .ch-c>span{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%); font-size:10px;color:var(--ink-3);font-variant-numeric:tabular-nums} .ch-lg{display:flex;gap:16px;margin-top:4px;font-size:var(--fs-11);color:var(--ink-3)} .ch-lg i{display:inline-block;width:8px;height:8px;border-radius:3px;margin-right:5px;vertical-align:-1px} /* 横向分布条 */ .dist{display:flex;flex-direction:column;gap:9px} .dist-r{display:flex;align-items:center;gap:9px;font-size:var(--fs-12)} .dist-k{width:64px;flex:none;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dist-b{flex:1;height:6px;border-radius:99px;background:var(--fill);overflow:hidden;min-width:36px} .dist-b i{display:block;height:100%;border-radius:99px;background:var(--brand); transition:width var(--dur-3) var(--ease)} .dist-r b{width:36px;text-align:right;font-weight:600;font-size:var(--fs-12); font-variant-numeric:tabular-nums;color:var(--ink)} /* 过滤条：两行 chips，不用下拉 —— 下拉会把"有几个"这件事藏起来 */ .card-hd.fb{padding:11px 18px;flex-wrap:wrap;gap:8px;row-gap:9px;border-bottom:1px solid var(--line-2)} .card-hd.fb .chip.pick{height:26px} /* 两栏正文 */ .grid-2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start} @media (max-width:1180px){.grid-2{grid-template-columns:minmax(0,1fr)}} /* 决策卡：左边编号、右边正文。编号列窄而固定，扫读时才有一条直线 */ .dec{display:flex;gap:16px;padding:15px 0;border-top:1px solid var(--line-2)} .dec:first-child{border-top:0;padding-top:2px} .dec:last-child{padding-bottom:2px} .dec-l{width:104px;flex:none;display:flex;flex-direction:column;gap:3px} .dec-code{font-size:var(--fs-12);color:var(--ink-2);letter-spacing:-.02em} .dec-d{font-size:var(--fs-11);color:var(--ink-3)} .dec-b{flex:1;min-width:0} .dec-t{font-size:var(--fs-15);font-weight:600;letter-spacing:-.01em;line-height:1.45} .dec-p{margin:6px 0 0;font-size:var(--fs-13);color:var(--ink-2);line-height:1.72} @media (max-width:640px){.dec{flex-direction:column;gap:7px}.dec-l{flex-direction:row;gap:9px;width:auto}} /* 任务详情抽屉 */ .sheet-wrap{position:fixed;inset:0;z-index:150;display:flex;justify-content:flex-end} .sheet-scrim{position:absolute;inset:0;background:rgba(24,34,48,.34); animation:fadeUp var(--dur-2) var(--ease) both} .sheet{position:relative;width:min(440px,100%);height:100%;background:var(--surface); border-left:1px solid var(--line);box-shadow:var(--sh-3);padding:22px 24px 40px;overflow-y:auto; animation:slin var(--dur-3) var(--ease) both} @keyframes slin{from{transform:translateX(26px);opacity:.5}to{transform:none;opacity:1}} .sheet-x{position:absolute;right:14px;top:14px} .sheet-t{margin:7px 0 0;font-size:var(--fs-17);font-weight:600;letter-spacing:-.01em;line-height:1.42} @media (max-width:640px){.sheet{width:100%;border-left:0;padding:20px 18px 40px}} /* ===== 任务抽屉里的可编辑表单 ============================================== 这张抽屉是拿来**改**的，不是拿来看的，所以比别的 sheet 宽一点： 主题 + 三方人员 + 两个日期挤在 440px 里，标签和值会互相咬。 底部的保存条用 sticky 钉在可视区底部 —— 表单往下滚到「办理记录」时， 保存按钮还得在眼前，否则用户会以为要滚回去才能存。 */ .sheet-lg{width:min(520px,100%);padding-bottom:14px} .td-ro{margin-top:12px;padding:9px 11px;border-radius:var(--r);background:var(--risk-bg); color:#9A6C4C;font-size:var(--fs-12);line-height:1.6} .td-f{display:flex;gap:10px;padding:6px 0;align-items:flex-start} .td-f+.td-f{border-top:1px solid var(--line-2)} .td-l{flex:none;width:76px;padding-top:7px;font-size:var(--fs-12);color:var(--ink-2)} .td-c{flex:1;min-width:0} .td-h{margin-top:4px;font-size:var(--fs-11);color:var(--ink-3);line-height:1.55} .td-i{width:100%;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r); background:var(--surface);color:var(--ink);font-size:var(--fs-13);outline:none; transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)} .td-i:hover{border-color:#D8DFE9} .td-i:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50)} .td-i:disabled{background:var(--fill);color:var(--ink-2);cursor:not-allowed} textarea.td-i{height:auto;padding:8px 10px;line-height:1.6;resize:vertical;min-height:66px} .td-seg{display:inline-flex;gap:2px;background:var(--fill);border-radius:var(--r-pill);padding:3px} .td-st{border:0;background:none;cursor:pointer;padding:5px 12px;border-radius:var(--r-pill); font-size:var(--fs-12);font-weight:500;color:var(--ink-2); transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)} .td-st.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--sh-1)} .td-st:disabled{cursor:not-allowed;opacity:.7} .td-ck{display:flex;align-items:center;gap:8px;padding-top:5px;font-size:var(--fs-13);cursor:pointer} .td-ck input{width:16px;height:16px;accent-color:var(--brand);flex:none} .td-ck input:disabled{cursor:not-allowed} /* 「修改成果」：三个选项 + 一块随选择变的说明。 三个按钮比状态那三个长（BIM模型修改 / 图纸修改 / 文档）， 抽屉在窄屏会缩到 100%，所以允许换行 —— 挤成两行也比溢出好。 */ .td-seg-3{flex-wrap:wrap;max-width:100%} .td-res{margin-top:8px} .td-res-yes{padding:7px 10px;border-radius:var(--r);background:var(--brand-50); color:var(--ink-2);font-size:var(--fs-12);line-height:1.6} .td-res-yes b{color:var(--brand);font-weight:600} .td-res-miss{padding:7px 10px;border-radius:var(--r);background:var(--risk-bg); color:#9A6C4C;font-size:var(--fs-12);line-height:1.6} .td-res-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px} .td-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px} .td-p{display:flex;align-items:center;gap:9px;width:100%;padding:8px 6px;border:0;border-radius:var(--r); background:none;cursor:pointer;text-align:left;font-size:var(--fs-13);color:var(--ink)} .td-p:hover{background:var(--fill-2)} .td-p b{font-weight:500;flex:none} .td-p span{font-size:var(--fs-11);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .td-dot{width:8px;height:8px;border-radius:50%;flex:none} .td-log{padding:7px 0;border-top:1px solid var(--line-2);font-size:var(--fs-12)} .td-log:first-child{border-top:0;padding-top:0} .td-log b{font-weight:600} .td-log-t{color:var(--ink-2);margin-top:2px;line-height:1.55} .td-empty{font-size:var(--fs-12);color:var(--ink-3);padding:2px 0} .td-ft{position:sticky;bottom:0;display:flex;gap:8px;margin-top:18px;padding:12px 0 0; background:var(--surface);border-top:1px solid var(--line-2)} .btn.dang{color:var(--danger);border-color:var(--danger-bg)} .btn.dang:hover{background:var(--danger-bg);border-color:var(--danger)} /* 「保存修改」没事可存时是灰的 —— 只靠 disabled 属性不够：.btn.pri 的颜色会把它 盖成一个看起来完全可点的蓝按钮，用户点了没反应才是真恼火。 */ .sheet .btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none} @media (max-width:520px){ .td-f{display:block} .td-l{display:block;width:auto;padding:0 0 5px} .td-ft{flex-wrap:wrap} } /* 星图筛选面板：让开左侧工具条，别叠在按钮上 */ .gx-filter{left:84px} @media (max-width:880px){.gx-filter{left:12px;top:72px;transform:none}} /* 节点是零尺寸锚点，子元素挂在外侧 —— 必须显式 overflow:visible， 某些浏览器对