/* Tab prototype · 工作台（产品主窗口）。纯色、细线、点阵、等宽字，不用渐变。
   每个分页一种颜色：此刻 蓝 · 记忆 紫 · 技能 橙 · 运行 绿 · 模型 靛 · 进展 青。 */

.bn {
  display: flex; height: 100%; background: #f4f4f6;
  --bn-now: #007aff; --bn-memory: #af52de; --bn-skills: #ff9500; --bn-runs: #28b04f; --bn-models: #5856d6; --bn-progress: #30b0c7;
}
.bn .mono { font-family: var(--mono); font-size: .92em; letter-spacing: 0; }

/* ---------------------------------------------------------------- sidebar */
.bn-side { display: flex; flex-direction: column; width: 196px; padding-top: 46px; }
.bn-brand { display: flex; align-items: center; gap: 9px; padding: 2px 6px 16px; }
.bn-brand .appic { width: 30px; height: 30px; }
.bn-brand b { display: block; font-size: 15px; line-height: 1.2; }
.bn-brand span { display: block; font-size: 11px; color: var(--ink2); }
.bn-ni { position: relative; display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 8px; border-radius: 8px; font-size: 13.5px; color: rgba(0, 0, 0, .8); transition: background .25s; }
.bn-ni svg.ic { color: var(--c, var(--ink2)); }
.bn-ni svg.ic path[fill] { fill: currentColor; }
.bn-ni.sel { background: rgba(0, 0, 0, .07); font-weight: 500; }
.bn-ni.dim svg.ic { color: var(--ink2); }
.bn-ni em { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--c); color: #fff; font: 600 10.5px/18px var(--font); font-style: normal; text-align: center; }
.bn-ni em.off { display: none; }
.bn-ni em.pop { animation: popIn .45s var(--spring) both; }
.bn-ni.flash { animation: niFlash 1.2s var(--soft); }
@keyframes niFlash { 25% { background: rgba(175, 82, 222, .18); } }
.bn-live { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 6px; padding: 9px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06); }
.bn-live i { width: 7px; height: 7px; margin-top: 5px; flex: none; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(52, 199, 89, .2); }
.bn-live b { display: block; font-size: 12px; }
.bn-live span { display: block; font-size: 11px; color: var(--ink2); }

/* ---------------------------------------------------------------- main + header */
.bn-main { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 14px 22px 18px; overflow: hidden; }
.bn-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex: none; margin: 18px 0 16px; }
.bn-tt h1 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.015em; }
.bn-tt h1 i { width: 10px; height: 10px; border-radius: 3px; }
.bn-tt p { margin: 4px 0 0; font-size: 13px; color: var(--ink2); }
.bn-hd-r { display: flex; align-items: center; gap: 8px; flex: none; }
.bn-pill, .bn-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 14px; font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--ink); }
.bn-pill { background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08); }
.bn-pill b { font-weight: 700; }
.bn-pill svg.ic, .bn-btn svg.ic { width: 14px; height: 14px; color: var(--ink2); }
.bn-pill i.live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: livePulse 1.6s ease-in-out infinite; }
.bn-pill i.live.g { background: var(--green); }
@keyframes livePulse { 50% { opacity: .35; } }
.bn-btn { background: rgba(118, 118, 128, .12); }
.bn-btn .kh { height: 18px; }
.bn-btn.danger { background: rgba(255, 59, 48, .1); color: #d70015; }
.bn-btn.danger svg.ic { color: #d70015; }
.bn-body { position: relative; flex: 1; min-height: 0; }
.bn-st { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 2px 10px; }
.bn-st b { font-size: 13px; font-weight: 600; white-space: nowrap; }
.bn-st span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; color: var(--ink2); }
.bn-st.sm b { font-size: 12px; }

/* shared white cards */
.nw-col, .mm-tree, .mm-graph, .mm-file, .mm-pipe, .sk-list, .sk-detail, .rn-plan, .rn-screen, .rn-guard,
.md-router, .md-think, .md-ledger, .pg-st, .pg-card {
  min-width: 0; padding: 14px; border-radius: 16px; background: #fff;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);
}
@keyframes rxIn { from { opacity: 0; transform: translateY(-6px); } }

/* ================================================================ 此刻 */
.nw { display: grid; grid-template-columns: 290px 34px 1fr 34px 300px; height: 100%; }
.nw-col { display: flex; flex-direction: column; }
.cx-list { display: flex; flex-direction: column; gap: 6px; }
.cx { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 11px; background: rgba(118, 118, 128, .05); transition: opacity .4s, transform .5s var(--spring), box-shadow .3s, background .3s; }
.cx.off { opacity: 0; transform: translateX(-12px); }
.cx.hl { background: rgba(0, 122, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(0, 122, 255, .45); }
.cx-ic { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: rgba(0, 122, 255, .1); color: var(--bn-now); }
.cx-ic .appic { width: 30px; height: 30px; }
.cx-ic svg.ic { width: 15px; height: 15px; }
.cx-tt { flex: 1; min-width: 0; }
.cx-k { display: block; font-size: 10.5px; font-weight: 600; color: var(--ink3); letter-spacing: .02em; }
.cx-tt b { display: block; font-size: 13px; line-height: 1.3; }
.cx-tt small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; color: var(--ink2); }
.cx-m { flex: none; font-size: 10.5px; color: var(--ink3); }
.cx-eye { display: flex; color: var(--bn-now); }
.cx-eye svg.ic { width: 14px; height: 14px; }
.nw-never { display: flex; align-items: center; gap: 7px; margin-top: auto; padding: 9px 10px; border-radius: 10px; background: rgba(118, 118, 128, .07); font-size: 11.5px; line-height: 1.4; color: var(--ink2); }
.nw-never svg.ic { width: 14px; height: 14px; }

.nw-g { position: relative; display: flex; align-items: center; justify-content: center; }
.nw-g svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nw-g .fl { fill: none; stroke: rgba(0, 122, 255, .4); stroke-width: 1.5; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; animation: flow 1s linear infinite; }
.nw-g.idle .fl { opacity: .35; animation-play-state: paused; }
@keyframes flow { to { stroke-dashoffset: -8; } }
.nw-chev { position: relative; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .08); color: var(--accent); }
.nw-chev svg.ic { width: 12px; height: 12px; stroke-width: 2.4; }

.tr-list { display: flex; flex-direction: column; gap: 4px; }
.tr { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: 10px; transition: opacity .35s, background .3s; }
.tr.off { opacity: .25; }
.tr.run { background: rgba(0, 122, 255, .06); }
.tr-n { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: rgba(118, 118, 128, .12); font-size: 11.5px; font-weight: 700; color: var(--ink2); transition: background .3s, color .3s; }
.tr.done .tr-n { background: var(--accent); color: #fff; }
.tr.run .tr-n { background: #fff; color: var(--accent); box-shadow: 0 0 0 2px rgba(0, 122, 255, .35); }
.tr-tt { flex: 1; min-width: 0; }
.tr-tt b { margin-right: 6px; font-size: 12px; color: var(--accent); }
.tr-tt span { font-size: 13.5px; font-weight: 500; }
.tr-tt small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink2); }
.tr-m { flex: none; padding-top: 3px; font-size: 11px; color: var(--ink3); }
.tr.off .tr-m, .tr.run .tr-m { visibility: hidden; }
.nw-cands { margin-top: 12px; padding-top: 12px; box-shadow: inset 0 .5px 0 var(--sep); }
.cb { display: grid; grid-template-columns: 1fr 120px 40px; align-items: center; gap: 10px; height: 30px; padding: 0 4px; font-size: 13px; }
.cb-t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cb-bar { height: 6px; overflow: hidden; border-radius: 3px; background: rgba(118, 118, 128, .12); }
.cb-bar i { display: block; width: calc(var(--v) * 1% * var(--p, 1)); height: 100%; border-radius: 3px; background: rgba(0, 122, 255, .38); }
.cb.top .cb-bar i { background: var(--accent); }
.cb.top .cb-t { font-weight: 600; }
.cb-v { font-size: 11.5px; text-align: right; color: var(--ink2); }
.nw-rules { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.nw-rules span { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 12px; background: rgba(118, 118, 128, .07); font-size: 11.5px; color: var(--ink2); }
.nw-rules svg.ic { width: 12px; height: 12px; stroke-width: 2.4; color: var(--green); }

.nw-mock { padding: 10px 12px; border-radius: 12px; background: #f5f5f5; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .06); }
.nw-mock-hd { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12px; }
.nw-mock-hd span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink2); }
.nw-field { padding: 8px 10px; border-radius: 8px; background: #fff; font-size: 13.5px; line-height: 1.55; }
.nw-field .caret { display: inline-block; width: 2px; height: 1.1em; margin: 0 1px; vertical-align: -.2em; border-radius: 1px; background: var(--accent); animation: blink 1.06s steps(1) infinite; }
.nw-field .gh { transition: opacity .3s; }
.nw-field .gh.off { opacity: 0; }
.nw-field .ins { color: var(--ink); }
.np.static { position: relative; width: auto; margin: 8px 0 14px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 8px 22px -12px rgba(16, 24, 48, .35); transition: opacity .35s, transform .45s var(--spring); }
.np.static.off { opacity: 0; transform: translateY(6px) scale(.97); }
.np.static.used { opacity: .5; }
.rx-st { margin-top: 2px; }
.rx-list { display: flex; flex-direction: column; gap: 4px; }
.rx { display: flex; align-items: center; gap: 9px; padding: 6px; border-radius: 9px; font-size: 12.5px; }
.rx > div { flex: 1; min-width: 0; }
.rx b { display: block; font-size: 12.5px; font-weight: 500; }
.rx > div span { display: block; font-size: 11px; color: var(--ink2); }
.rx small { font-size: 11px; color: var(--ink3); }
.rx .kh { height: 18px; }
.rx-ic { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: 50%; }
.rx-ic svg.ic { width: 12px; height: 12px; stroke-width: 2.4; }
.rx-ic.ok { background: var(--green); color: #fff; }
.rx-ic.ed { background: rgba(255, 149, 0, .15); color: #c26a00; }
.rx-ic.no { background: rgba(118, 118, 128, .12); color: var(--ink2); }
.rx.new { display: none; background: rgba(52, 199, 89, .08); }
.rx.new.on { display: flex; }
.rx.new.in { animation: rxIn .5s var(--spring) both; }
.nw-learn { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; margin-top: auto; padding: 10px 11px; border-radius: 11px; background: rgba(175, 82, 222, .08); font-size: 12px; color: #8a2fb8; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--spring); }
.nw-learn.on { opacity: 1; transform: none; }
.nw-learn b { font-weight: 600; }
.nw-learn span { font: 11px var(--mono); color: rgba(138, 47, 184, .75); }
.nw-learn svg.ic { width: 14px; height: 14px; }

/* ================================================================ 记忆 */
.mm { display: grid; grid-template-columns: 196px 1fr 330px; grid-template-rows: 1fr auto; gap: 12px; height: 100%; }
.mt { display: flex; align-items: center; gap: 6px; height: 25px; padding: 0 6px; border-radius: 6px; font: 12px var(--mono); }
.mt.lv1 { padding-left: 16px; }
.mt.lv2 { padding-left: 30px; }
.mt-ic { display: flex; color: var(--ink3); }
.mt-ic svg.ic { width: 13px; height: 13px; }
.mt:has(.mt-ic path[d^="M2.8 6"]) .mt-ic { color: var(--bn-memory); }
.mt-n { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mt small { font: 10.5px var(--font); color: var(--ink3); }
.mt-new, .mt-ed { height: 16px; padding: 0 5px; border-radius: 8px; font: 600 10px/16px var(--font); font-style: normal; }
.mt-new { background: rgba(52, 199, 89, .16); color: #1f9d48; }
.mt-ed { background: rgba(255, 149, 0, .15); color: #c26a00; }
.mt.sel { background: rgba(175, 82, 222, .12); }
.mt.isnew { display: none; }
.mt.isnew.on { display: flex; }
.mt.isnew.in { animation: popIn .45s var(--spring) both; }

.mm-graph { position: relative; overflow: hidden; padding: 0; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='1.5' cy='1.5' r='1' fill='%23000' fill-opacity='.08'/%3E%3C/svg%3E"); }
.mm-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.eg path { fill: none; stroke: rgba(60, 60, 67, .22); stroke-width: 1.4; stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--soft); }
.eg text { font: 10px var(--font); fill: rgba(60, 60, 67, .45); text-anchor: middle; transition: opacity .4s .5s; }
.eg.new path { stroke: var(--bn-memory); stroke-width: 1.8; }
.eg.new text { fill: var(--bn-memory); font-weight: 600; }
.mm-graph.pre .eg.new path { stroke-dashoffset: 1; }
.mm-graph.pre .eg.new text { opacity: 0; transition: none; }
.gn { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; transform: translate(-50%, -22px); transition: opacity .4s, transform .5s var(--spring); }
.gn-t b { display: block; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .92); font-size: 12px; font-weight: 600; white-space: nowrap; }
.gn-t small { display: block; font-size: 10.5px; color: var(--ink2); white-space: nowrap; }
.gn-ic { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; color: #fff; box-shadow: 0 0 0 3px #fff; }
.gn-ic svg.ic { width: 15px; height: 15px; stroke-width: 1.9; }
.gn.project .gn-ic { background: #ff9500; }
.gn.file .gn-ic { background: #ff3b30; }
.gn.promise .gn-ic { background: #ff2d55; }
.gn.habit .gn-ic { background: #34c759; }
.gn.group .gn-ic { background: #8e8e93; }
.gn .av { box-shadow: 0 0 0 3px #fff, 0 0 0 3.5px rgba(0, 0, 0, .08); }
.gn.me { transform: translate(-50%, -26px); }
.gn.me .av { box-shadow: 0 0 0 4px #fff, 0 0 0 5.5px rgba(175, 82, 222, .5); }
.gn.sel .av { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--bn-memory); }
.gn.sel .gn-t b { background: var(--bn-memory); color: #fff; }
.mm-graph.pre [data-r="gn-li"] { opacity: 0; transform: translate(-50%, -22px) scale(.3); }
.mm-src { position: absolute; top: 12px; right: 12px; width: 236px; display: flex; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 6px 18px -8px rgba(0, 0, 0, .25); font-size: 11.5px; transition: opacity .5s, transform .8s var(--soft); }
.mm-src .appic { width: 22px; height: 22px; flex: none; }
.mm-src b { display: block; font-size: 11.5px; }
.mm-src span { display: block; line-height: 1.4; color: var(--ink2); }
.mm-src.off { opacity: 0; transform: translateY(-8px); }
.mm-src.gone { opacity: 0; transform: translate(30px, 70px) scale(.3); }
.mm-legend { position: absolute; left: 12px; bottom: 10px; display: flex; gap: 10px; font-size: 10.5px; color: var(--ink2); }
.mm-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; vertical-align: -.5px; border-radius: 2px; }
.lg.person i { background: #4f8ff7; }
.lg.project i { background: #ff9500; }
.lg.file i { background: #ff3b30; }
.lg.promise i { background: #ff2d55; }
.lg.habit i { background: #34c759; }

.mm-file { display: flex; flex-direction: column; transition: opacity .4s; }
.mm-file.off { opacity: .2; }
.mf-hd { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.mf-hd svg.ic { color: var(--bn-memory); }
.mf-hd b { font-size: 12.5px; }
.mf-hd .mt-new { margin-left: auto; }
.mf-body { flex: none; padding: 8px 0; border-radius: 10px; background: #fafafa; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .05); font-size: 12px; line-height: 1.85; }
.mf-l { display: flex; align-items: baseline; gap: 10px; padding: 0 10px; transition: opacity .3s, background 1.2s; }
.mf-l i { width: 16px; flex: none; font-style: normal; text-align: right; color: var(--ink4); }
.mf-l span { flex: 1; min-width: 0; }
.mf-l.fm span { color: var(--ink2); }
.mf-l.h span { font-weight: 700; }
.mf-l.off { opacity: 0; }
.mf-l.add { background: rgba(52, 199, 89, .12); }
.mf-src { flex: none; height: 18px; padding: 0 6px; border-radius: 9px; background: rgba(175, 82, 222, .1); font: 500 10.5px/18px var(--font); font-style: normal; color: #8a2fb8; }
.mf-why { display: flex; align-items: center; gap: 6px; margin: 10px 2px 0; font-size: 11.5px; color: var(--ink2); }
.mf-why svg.ic { width: 13px; height: 13px; }
.mf-ft { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.mf-only { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink2); }
.mf-only svg.ic { width: 12px; height: 12px; }
.rb.kept { background: var(--green); color: #fff; }

.mm-pipe { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 10px 14px; }
.mp-t { margin-right: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.mp { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; white-space: nowrap; border-radius: 9px; background: rgba(118, 118, 128, .07); transition: background .3s, box-shadow .3s; }
.mp b { display: flex; align-items: baseline; gap: 6px; font-size: 12px; }
.mp span { font-size: 11.5px; color: var(--ink2); }
.mp small { font: 400 10.5px var(--mono); color: var(--ink3); }
.mp span { font-size: 11px; }
.mp.on { background: rgba(175, 82, 222, .1); box-shadow: inset 0 0 0 1px rgba(175, 82, 222, .45); }
.mp.on b { color: #8a2fb8; }
.mp-ar { display: flex; color: var(--ink3); }
.mp-ar svg.ic { width: 12px; height: 12px; }
.mp-raw { display: flex; align-items: center; gap: 5px; margin-left: auto; max-width: 170px; font-size: 11px; line-height: 1.4; color: var(--ink2); }
.mp-raw svg.ic { width: 12px; height: 12px; }

/* ================================================================ 技能 */
.sk { display: grid; grid-template-columns: 270px 1fr; gap: 12px; height: 100%; }
.sk-list { display: flex; flex-direction: column; gap: 8px; }
.skc { padding: 10px 12px; border-radius: 12px; background: rgba(118, 118, 128, .05); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .04); }
.skc.sel { background: rgba(255, 149, 0, .08); box-shadow: inset 0 0 0 1.5px rgba(255, 149, 0, .55); }
.skc-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.skc-hd b { font-size: 13.5px; }
.skc-hd span { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink2); }
.skc-hd svg.ic { width: 12px; height: 12px; color: #e08600; }
.skc small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink2); }
.skc-ed { display: flex; align-items: flex-end; gap: 3px; height: 22px; margin-top: 8px; }
.skc-ed i { width: 10px; height: calc(4px + var(--n) * 3px); border-radius: 2px; background: rgba(255, 149, 0, .5); }
.skc-ed i:last-of-type { background: #ff9500; }
.skc-ed span { margin-left: 6px; font-size: 10.5px; color: var(--ink3); }
.skc.ghost { background: none; box-shadow: inset 0 0 0 1px rgba(60, 60, 67, .16); opacity: .85; }
.skc.ghost .skc-hd span { height: 18px; padding: 0 7px; border-radius: 9px; background: rgba(118, 118, 128, .1); }

.sk-detail { display: flex; flex-direction: column; gap: 14px; }
.sd-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sd-hd h2 { margin: 0; font-size: 20px; font-weight: 700; }
.sd-hd p { display: flex; align-items: center; gap: 5px; margin: 4px 0 0; font-size: 12px; color: var(--ink2); }
.sd-hd p svg.ic { width: 13px; height: 13px; color: #e08600; }
.sd-act { display: flex; gap: 6px; }
.sd-act .rb svg.ic { width: 13px; height: 13px; }
.sd-act .rb.pri { padding-right: 10px; }
.sd-flow { display: flex; align-items: stretch; }
.fw { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .05); transition: box-shadow .3s, background .3s, transform .4s var(--spring); }
.fw-ic { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-bottom: 4px; border-radius: 8px; background: rgba(255, 149, 0, .12); color: #e08600; transition: background .3s, color .3s; }
.fw-ic .appic { width: 28px; height: 28px; }
.fw-ic svg.ic { width: 15px; height: 15px; }
.fw b { font-size: 12.5px; }
.fw > span { min-height: 2.7em; font-size: 11px; line-height: 1.35; color: var(--ink2); }
.fw.on { box-shadow: 0 0 0 2px #ff9500, 0 6px 16px -8px rgba(255, 149, 0, .6); transform: translateY(-2px); }
.fw.done .fw-ic:not(:has(.appic)) { background: #ff9500; color: #fff; }
.perm { margin-top: auto; height: 18px; padding: 0 7px; border-radius: 9px; background: rgba(118, 118, 128, .12); font: 600 10px/18px var(--font); font-style: normal; color: var(--ink2); white-space: nowrap; }
.perm.pro { background: rgba(0, 122, 255, .1); color: var(--accent); }
.perm.pai { background: rgba(88, 86, 214, .12); color: #5856d6; }
.perm.pdraft { background: rgba(255, 149, 0, .14); color: #c26a00; }
.perm.pask { background: rgba(255, 59, 48, .1); color: #d70015; }
.fw-ar { position: relative; display: flex; align-items: center; width: 16px; flex: none; }
.fw-ar i { position: relative; width: 100%; height: 2px; background: rgba(60, 60, 67, .16); transition: background .3s; }
.fw-ar i::after { content: ""; position: absolute; right: -2px; top: -3px; border: 4px solid transparent; border-left-color: rgba(60, 60, 67, .3); border-right-width: 0; }
.fw-ar.done i { background: #ff9500; }
.fw-ar.done i::after { border-left-color: #ff9500; }

.sd-run { padding: 12px 14px; border-radius: 12px; background: rgba(118, 118, 128, .05); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .05); }
.sd-run-hd { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.sd-run-hd b { font-size: 12.5px; }
.sd-run-hd > span:not(.sp):not(.rb) { color: var(--ink2); }
.sd-run-hd .rb svg.ic { width: 12px; height: 12px; }
.sd-track { position: relative; height: 6px; margin: 14px 8px 12px; border-radius: 3px; background: rgba(60, 60, 67, .12); }
.sd-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); border-radius: 3px; background: #ff9500; }
.sd-tick { position: absolute; top: -3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px rgba(60, 60, 67, .25); transition: background .2s, box-shadow .2s; }
.sd-tick.on { background: #ff9500; box-shadow: 0 0 0 1.5px #ff9500; }
.sd-head { position: absolute; top: -5px; left: calc(var(--p, 0) * 100%); width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #ff9500, 0 2px 6px rgba(0, 0, 0, .2); }
.sd-log { font-size: 11.5px; line-height: 1.75; }
.lg-l { display: flex; gap: 12px; transition: opacity .3s, color .3s; }
.lg-l i { width: 64px; flex: none; font-style: normal; color: var(--ink3); }
.lg-l.off { opacity: .28; }
.lg-l.cur span { font-weight: 600; color: #c26a00; }
.sd-diff { padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1); transition: opacity .4s, transform .5s var(--spring); }
.sd-diff.off { opacity: 0; transform: translateY(8px); }
.sd-diff-hd { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 12px; }
.sd-diff-hd span { color: var(--ink2); }
.df-row { display: flex; gap: 8px; padding: 2px 8px; border-radius: 6px; font-size: 12.5px; line-height: 1.6; }
.df-row + .df-row { margin-top: 2px; }
.df-row i { width: 10px; flex: none; font: normal 12px var(--mono); }
.df-row.del { background: rgba(255, 59, 48, .07); color: rgba(29, 29, 31, .55); }
.df-row.del span { text-decoration: line-through; text-decoration-color: rgba(255, 59, 48, .6); }
.df-row.del i { color: #d70015; }
.df-row.add { background: rgba(52, 199, 89, .1); }
.df-row.add i { color: #1f9d48; }
.sd-learn { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding-top: 10px; box-shadow: inset 0 .5px 0 var(--sep); font-size: 12px; color: #8a2fb8; transition: opacity .4s; }
.sd-learn svg.ic { width: 14px; height: 14px; }
.sd-learn b { flex: 1; font-weight: 600; }
.sd-learn.off { opacity: 0; }
.rb.sm { height: 26px; }

/* ================================================================ 运行 */
.rn { position: relative; display: grid; grid-template-columns: 1fr 400px 240px; gap: 12px; height: 100%; }
.rn-plan { display: flex; flex-direction: column; gap: 8px; }
.rn-plan .bn-st { flex-direction: column; align-items: flex-start; gap: 3px; }
.rn-plan .bn-st span { white-space: normal; }
.rs { padding: 8px 10px; border-radius: 12px; background: rgba(118, 118, 128, .05); transition: background .3s, box-shadow .3s, opacity .3s; }
.rs-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rs-hd b { font-size: 13.5px; }
.rs-hd small { margin-left: auto; font-size: 11.5px; color: var(--ink2); }
.rs.done .np-n, .rs.cur .np-n { background: var(--green); color: #fff; }
.rs.cur { background: rgba(52, 199, 89, .07); box-shadow: inset 0 0 0 1.5px rgba(52, 199, 89, .5); }
.rs.next { opacity: .7; }
.rs.need { background: rgba(255, 149, 0, .08); box-shadow: inset 0 0 0 1.5px rgba(255, 149, 0, .55); opacity: 1; }
.rs.need .np-n { background: #ff9500; color: #fff; }
.call { display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 4px 0 30px; font-size: 11.5px; transition: opacity .3s; }
.call .cn { flex: none; font-size: 11px; color: #1f7a3a; }
.call .ca { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.call .cm { flex: none; font-size: 10.5px; color: var(--ink3); }
.call.off { opacity: .25; }
.call.run .cn::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; vertical-align: 1px; border-radius: 50%; background: var(--green); animation: livePulse 1s ease-in-out infinite; }
.rs.done .cn { color: var(--ink2); }
.rs.need .cn { color: #c26a00; }

.rn-screen { display: flex; flex-direction: column; }
.rn-shot { position: relative; flex: 1; min-height: 260px; overflow: hidden; border-radius: 12px; background: #e8ecf5; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .08); }
.rm-mini { position: absolute; left: 22px; top: 26px; right: 22px; bottom: 26px; display: flex; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .15), 0 10px 26px -10px rgba(20, 30, 60, .35); font-size: 11px; }
.rmm-side { display: flex; flex-direction: column; gap: 3px; width: 120px; white-space: nowrap; padding: 10px 8px; background: #f0f0f3; }
.rmm-tl { display: flex; gap: 5px; margin-bottom: 6px; }
.rmm-tl i { width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; }
.rmm-tl i:nth-child(2) { background: #febc2e; }
.rmm-tl i:nth-child(3) { background: #28c840; }
.rmm-side b { margin: 6px 0 2px; font-size: 9.5px; color: var(--ink3); }
.rmm-side span { padding: 3px 6px; border-radius: 5px; }
.rmm-side span.sel { background: rgba(0, 0, 0, .07); }
.rmm-main { flex: 1; padding: 12px 14px; }
.rmm-main h3 { margin: 6px 0 8px; font-size: 18px; color: #ff9500; }
.rmm-it { display: flex; align-items: center; gap: 7px; height: 26px; box-shadow: inset 0 -.5px 0 var(--sep); }
.rmm-it i { width: 12px; height: 12px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.2px rgba(60, 60, 67, .3); }
.rmm-it small { margin-left: auto; color: #d70015; }
.rmm-it.new { display: none; }
.rmm-it.new.on { display: flex; }
.rmm-it.new.in { animation: popIn .4s var(--spring) both; }
[data-r="rtitle"] { display: inline-block; min-width: 150px; min-height: 1.3em; }
[data-r="rdate"] { display: inline-block; min-width: 60px; text-align: right; }
.ax-box { position: absolute; border-radius: 6px; box-shadow: 0 0 0 2px var(--green), 0 0 0 5px rgba(52, 199, 89, .18); pointer-events: none; transition: left .5s var(--soft), top .5s var(--soft), width .5s var(--soft), height .5s var(--soft), opacity .3s; }
.ax-box em { position: absolute; left: -2px; top: -18px; height: 15px; padding: 0 5px; border-radius: 4px 4px 4px 0; background: var(--green); font: 700 9px/15px var(--mono); font-style: normal; color: #fff; }
.ax-box.off { opacity: 0; }
.rn-ladder { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 12px; flex: none; }
.ld { display: flex; gap: 7px; padding: 8px; border-radius: 10px; background: rgba(118, 118, 128, .05); font-size: 11.5px; }
.ld b { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; border-radius: 50%; background: rgba(118, 118, 128, .14); font-size: 10.5px; }
.ld span { display: block; font-size: 11.5px; font-weight: 600; }
.ld small { display: block; font-size: 10.5px; color: var(--ink2); }
.ld.on { background: rgba(52, 199, 89, .1); box-shadow: inset 0 0 0 1.5px rgba(52, 199, 89, .5); }
.ld.on b { background: var(--green); color: #fff; }
.ld.offd { opacity: .6; }
.gd-grp + .gd-grp { margin-top: 12px; padding-top: 10px; box-shadow: inset 0 .5px 0 var(--sep); }
.gd-t { margin-bottom: 4px; font-size: 11px; font-weight: 600; color: var(--ink2); }
.gd-r { display: flex; align-items: center; gap: 8px; height: 28px; font-size: 12px; }
.gd-r > span:nth-child(2) { flex: 1; min-width: 0; }
.gd-ic { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; }
.gd-ic .appic { width: 20px; height: 20px; }
.gd-ic svg.ic { width: 14px; height: 14px; color: var(--ink2); }
.gd-r em { flex: none; white-space: nowrap; height: 18px; padding: 0 7px; border-radius: 9px; font: 600 10.5px/18px var(--font); font-style: normal; }
.gd-r em.g-ok { background: rgba(52, 199, 89, .14); color: #1f9d48; }
.gd-r em.ask { background: rgba(255, 149, 0, .14); color: #c26a00; }
.gd-r em.no { background: rgba(255, 59, 48, .1); color: #d70015; }
.gd-r .kh { height: 18px; }
.gd-r.rule { align-items: flex-start; height: auto; padding: 4px 0; line-height: 1.4; }
.gd-r.rule .tgl { width: 30px; height: 18px; margin-top: 1px; }
.gd-r.rule .tgl i { width: 14px; height: 14px; }
.gd-r.rule .tgl.on i { transform: translateX(12px); }
.rn-confirm { left: calc(50% - 230px); top: 150px; width: 460px; }
.cf-mail > div { display: flex; align-items: center; gap: 8px; height: 30px; font-size: 12.5px; box-shadow: inset 0 -.5px 0 var(--sep); }
.cf-mail > div:last-child { box-shadow: none; }
.cf-mail span { width: 50px; color: var(--ink2); }

/* ================================================================ 模型 */
.md { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 12px; height: 100%; }
.md-router { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 130px; }
.md-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rt { fill: none; stroke: rgba(88, 86, 214, .38); stroke-width: 1.6; transition: stroke .3s, stroke-width .3s; }
.rt.dash { stroke-dasharray: 4 4; }
.rt.hot { stroke: #5856d6; stroke-width: 2.6; }
.rt-dot { fill: #5856d6; stroke: #fff; stroke-width: 2; }
.md-tasks, .md-models { position: relative; min-width: 0; }
.mt-row, .mo { position: relative; display: flex; align-items: center; gap: 10px; height: 38px; border-radius: 10px; transition: background .3s, box-shadow .3s; }
.mt-row + .mt-row, .mo + .mo { margin-top: 3px; }
.mt-row { padding-left: 10px; }
.mo { padding-right: 12px; }
.mt-tt, .mo-tt { flex: 1; min-width: 0; }
.mt-tt b, .mo-tt b { display: block; font-size: 13px; }
.mt-tt small, .mo-tt small { display: block; font-size: 11px; color: var(--ink2); }
.seg { display: flex; padding: 2px; border-radius: 8px; background: rgba(118, 118, 128, .12); }
.seg i { height: 22px; padding: 0 9px; border-radius: 6px; font-size: 11.5px; font-style: normal; line-height: 22px; color: var(--ink2); transition: background .25s, color .25s; }
.seg i.on { background: #fff; font-weight: 600; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.mt-lat, .mo-lat { width: 64px; flex: none; font-size: 11px; text-align: right; color: var(--ink2); }
.port { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(88, 86, 214, .6); }
.mt-row .port { margin-right: -5px; }
.mo .port { margin-left: -5px; }
.mt-row.hot { background: rgba(88, 86, 214, .07); }
.mo.prime { background: rgba(88, 86, 214, .06); }
.mo.hot { box-shadow: inset 0 0 0 1.5px #5856d6; }
.mo.off { opacity: .45; }
.mo.off .port { box-shadow: 0 0 0 2px rgba(60, 60, 67, .25); }
.mo.local .port { box-shadow: 0 0 0 2px rgba(52, 199, 89, .75); }
.mo-bud { height: 18px; padding: 0 7px; border-radius: 9px; background: rgba(88, 86, 214, .12); font: 600 10.5px/18px var(--font); color: #5856d6; }
.md-think, .md-ledger { display: flex; flex-direction: column; }
.th-list { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.th-l { display: flex; gap: 10px; padding: 5px 6px; border-radius: 7px; transition: opacity .3s, background .3s; }
.th-l i { width: 48px; flex: none; font-style: normal; font-weight: 600; color: #5856d6; }
.th-l.off { opacity: 0; }
.th-l.cur { background: rgba(88, 86, 214, .07); }
.th-meter { display: flex; gap: 14px; margin-top: auto; padding-top: 10px; box-shadow: inset 0 .5px 0 var(--sep); font-size: 11.5px; color: var(--ink2); }
.th-meter b { color: var(--ink); }
.lg-rows { display: flex; flex-direction: column; }
.lr { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 4px; border-radius: 8px; box-shadow: inset 0 -.5px 0 var(--sep); font-size: 12px; }
.lr i { width: 40px; flex: none; font-style: normal; font-size: 11px; color: var(--ink3); }
.lr b { font-weight: 600; }
.lr span { flex: 1; min-width: 0; color: var(--ink2); }
.lr em { height: 18px; padding: 0 7px; border-radius: 9px; background: rgba(52, 199, 89, .12); font: 600 10.5px/18px var(--font); font-style: normal; color: #1f9d48; }
.lr.new { background: rgba(88, 86, 214, .06); }
.lr.in { animation: rxIn .5s var(--spring) both; }
.lg-never { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; font-size: 11.5px; color: var(--ink2); }
.lg-never svg.ic { width: 13px; height: 13px; }

/* ================================================================ 进展 */
.pg { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.pg-stats { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 12px; }
.pg-st span { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ink2); }
.pg-st span svg.ic { width: 14px; height: 14px; color: var(--bn-progress); }
.pg-st b { display: block; margin: 10px 0 5px; font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.pg-st b em { font-style: normal; }
.pg-st b i { margin-left: 3px; font-size: 15px; font-weight: 600; font-style: normal; color: var(--ink2); }
.pg-st small { font-size: 11.5px; color: var(--ink2); }
.pg-st.acc b, .pg-st.acc b i { color: var(--accent); }
.pg-st.big { display: grid; grid-template-columns: 1fr 130px; grid-template-rows: auto auto 1fr; column-gap: 12px; }
.pg-st.big > span, .pg-st.big > b, .pg-st.big > small { grid-column: 1; }
.pg-bars { display: flex; grid-column: 2; grid-row: 1 / 4; align-items: flex-end; gap: 7px; height: 100%; }
.pb { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.pb i { width: 100%; height: calc(var(--h) * .9% * var(--p, 1)); border-radius: 4px; background: rgba(48, 176, 199, .35); }
.pb:last-child i { background: var(--bn-progress); }
.pb span { font-size: 10.5px; color: var(--ink3); }
.pg-row { display: grid; flex: 1; grid-template-columns: 1.5fr 1fr; gap: 12px; min-height: 0; }
.pg-chart .th-svg { height: 220px; }
.th-svg .area { fill: rgba(0, 122, 255, .07); }
.pg-learn .th-chips { padding-top: 0; }

/* 此刻：上下文预算、耗时 */
.nw-budget { margin-top: 12px; padding: 10px; border-radius: 10px; background: rgba(118, 118, 128, .05); }
.nb-hd { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 11.5px; }
.nb-hd b { font-weight: 600; }
.nb-hd span { color: var(--ink2); }
.nb-bar { display: flex; gap: 2px; height: 8px; overflow: hidden; border-radius: 4px; background: rgba(118, 118, 128, .12); }
.nb-bar i { width: calc(var(--w) * 1% * 1.66); background: var(--c); }
.nb-lg { display: flex; gap: 10px; margin-top: 7px; font-size: 10.5px; color: var(--ink2); }
.nb-lg i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 2px; }
.nw-never { margin-top: 10px; }
.nw-budget { margin-top: auto; }
.nw-wf { margin-top: 14px; padding-top: 12px; box-shadow: inset 0 .5px 0 var(--sep); }
.wf-bar { display: flex; gap: 2px; height: 26px; }
.wf-bar i { position: relative; flex: none; width: 50px; border-radius: 5px; background: rgba(0, 122, 255, .14); }
.wf-bar i.llm { flex: 1; width: auto; background: rgba(0, 122, 255, .85); }
.wf-bar i span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 500 10.5px var(--mono); color: var(--accent); white-space: nowrap; }
.wf-bar i.llm span { color: #fff; }
.wf-note { margin-top: 6px; font-size: 11px; color: var(--ink2); }
.nw-rules { margin-top: auto; padding-top: 12px; }

/* 记忆：连到、出处 */
.mf-k { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 600; color: var(--ink2); }
.mf-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mf-links .mf-k { width: 100%; margin-bottom: 0; }
.mf-links .mini-chip svg.ic { color: var(--bn-memory); }
.mf-prov { margin-top: 12px; }
.pv { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 2px 0 2px 16px; font-size: 11.5px; }
.pv i { position: absolute; left: 3px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: rgba(175, 82, 222, .35); }
.pv:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 15px; bottom: -6px; width: 1px; background: rgba(175, 82, 222, .25); }
.pv b { font-size: 11px; font-weight: 500; color: var(--ink2); }
.pv.cur i { background: var(--bn-memory); }
.pv.cur span { font-weight: 600; }
.mf-why { margin-top: auto; padding-top: 10px; }

/* 运行：今天的记录 */
.rn-hist { margin-top: auto; padding-top: 12px; box-shadow: inset 0 .5px 0 var(--sep); }
.hs { display: flex; align-items: center; gap: 10px; height: 28px; font-size: 12px; }
.hs i { width: 40px; flex: none; font-style: normal; font-size: 11px; color: var(--ink3); }
.hs span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hs em { flex: none; height: 18px; padding: 0 7px; border-radius: 9px; font: 600 10.5px/18px var(--font); font-style: normal; white-space: nowrap; }
.hs em.g-ok { background: rgba(52, 199, 89, .12); color: #1f9d48; }
.hs em.stop { background: rgba(118, 118, 128, .12); color: var(--ink2); }

/* 进展：热力图 */
.hm { margin-top: 14px; padding-top: 12px; box-shadow: inset 0 .5px 0 var(--sep); }
.hm-grid { display: grid; grid-template-columns: 22px repeat(12, 1fr); gap: 3px; align-items: center; }
.hm-grid i { height: 14px; border-radius: 4px; background: rgba(48, 176, 199, calc(.08 + var(--v) * .22)); }
.hm-d, .hm-h { font-size: 10.5px; color: var(--ink3); }
.hm-h { grid-column: span 1; }
.pg-chart .th-svg { height: 168px; }

.th-why { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(88, 86, 214, .05); font-size: 12px; line-height: 1.5; }
.th-why > div { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.th-why i { display: flex; }
.th-why svg.ic { width: 12px; height: 12px; stroke-width: 2.4; color: var(--ink3); }
.th-why > div:nth-child(2) svg.ic { color: #5856d6; }
.pg-ppl { display: flex; flex-direction: column; }
.pg-note { display: flex; gap: 9px; margin-top: auto; padding: 10px 12px; border-radius: 11px; background: rgba(48, 176, 199, .08); }
.pg-note svg.ic { width: 15px; height: 15px; margin-top: 1px; color: var(--bn-progress); }
.pg-note b { display: block; font-size: 12.5px; }
.pg-note span { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.5; color: var(--ink2); }