/* 模块 07 · 更多工具与连接 */

/* opener: plugboard */
.opt { width: 100%; max-height: 46vh; overflow: visible; }
.opt line { stroke: rgba(241, 239, 233, .2); stroke-width: 1.2; stroke-dasharray: 3 5; }
.opt g circle { fill: var(--ink); stroke: rgba(241, 239, 233, .4); stroke-width: 1.4; transition: stroke .3s, fill .3s; }
.opt g text { fill: var(--on-ink-2); font-size: 11px; font-family: var(--sans); }
.opt-core { fill: var(--mark); }
.opt-ct { fill: var(--ink); font-weight: 700; font-size: 13px; font-family: var(--sans); }
.op.hl-0 .opt g[data-hl="0"] circle, .op.hl-1 .opt g[data-hl="1"] circle, .op.hl-2 .opt g[data-hl="2"] circle { stroke: var(--mark); fill: rgba(255, 216, 77, .12); }
.op.hl-0 .opt g[data-hl="0"] line, .op.hl-1 .opt g[data-hl="1"] line, .op.hl-2 .opt g[data-hl="2"] line { stroke: var(--mark); stroke-dasharray: none; }
.page.in .opt g { animation: log-in .6s var(--ease) both; }
.page.in .opt g:nth-child(odd) { animation-delay: .25s; }

/* shared step lists in this module */
.vs-steps, .br-steps, .tm-steps, .hk-steps, .sd-steps, .pl7-steps { margin-top: 20px; display: grid; gap: 12px; counter-reset: t; }
.vs-steps li, .br-steps li, .tm-steps li, .hk-steps li, .sd-steps li { position: relative; padding-left: 34px; font-size: .9rem; line-height: 1.65; counter-increment: t; }
.vs-steps li::before, .br-steps li::before, .tm-steps li::before, .hk-steps li::before, .sd-steps li::before { content: counter(t); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 .74rem/1 var(--mono); background: var(--ink); color: var(--paper); }
.t-ink .vs-steps li::before, .t-ink .tm-steps li::before { background: var(--mark); color: var(--ink); }
.t-codex .sd-steps li::before { background: #fff; color: #111; }
.vs-steps b, .br-steps b, .tm-steps b, .hk-steps b, .sd-steps b { display: block; font-size: 1rem; }
.t-ink .vs-steps li, .t-ink .tm-steps li { color: var(--on-ink-2); }
.t-ink .vs-steps b, .t-ink .tm-steps b { color: var(--on-ink); }

/* ===== dictation ===== */
.dc { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); grid-template-areas: "copy lab" "src lab"; column-gap: clamp(28px, 4vw, 60px); align-items: start; }
.dc-copy { grid-area: copy; }
.dc-ways { margin-top: 22px; display: grid; gap: 10px; }
.dc-way { padding: 16px 18px; border-radius: 16px; background: var(--white); box-shadow: 0 0 0 1px var(--line); display: grid; gap: 6px; }
.dc-way b { font-size: 1rem; }
.dc-way p { font-size: .9rem; line-height: 1.7; color: var(--text-2); }
.dc-way.me { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.dc-way.me p { color: var(--on-ink-2); }
.dc-way .out { justify-self: start; color: var(--mark); border-color: var(--mark); }
.dc-way kbd { font-size: .8em; }
.dc .src { grid-area: src; }
.dc-lab { grid-area: lab; display: grid; gap: 14px; padding: 24px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgba(0, 0, 0, .4); }
.dc-h { font-size: .86rem; color: var(--muted); }
.dc-h b { color: var(--text); }
.dc-wave { height: 54px; display: flex; align-items: center; gap: 3px; }
.dc-wave i { flex: 1; height: var(--h); border-radius: 3px; background: var(--ink); opacity: .85; }
.page.in .dc-wave i { animation: wave 1.6s var(--ease) infinite alternate; animation-delay: var(--d); }
@keyframes wave { to { transform: scaleY(.35); opacity: .35; } }
.dc-text { font-size: 1.25rem; line-height: 1.9; font-weight: 500; }
.dc-err { display: inline; padding: 1px 4px; margin: 0 1px; border-radius: 5px; font: inherit; background: rgba(223, 71, 71, .1); text-decoration: underline wavy rgba(223, 71, 71, .8); text-underline-offset: 5px; transition: background-color .3s; }
.dc-err:hover { background: rgba(223, 71, 71, .2); }
.dc-err.fixed { background: var(--mark-soft); text-decoration: none; }
.dc-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 2em; }
.dc-tags span { font-size: .8rem; padding: 5px 10px; border-radius: 999px; background: #f6f6f8; }
.dc-tags b { margin-right: 6px; color: var(--ok); }
.dc-send { display: flex; align-items: center; gap: 12px; }
.dc-take { font-size: .9rem; color: var(--text-2); }

/* ===== voice chat ===== */
.vc { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); grid-template-areas: "copy stage" "src stage"; column-gap: clamp(28px, 4vw, 60px); align-items: start; }
.vc-copy { grid-area: copy; }
.vc-facts { margin-top: 20px; display: grid; gap: 10px; }
.vc-facts p { font-size: .9rem; line-height: 1.65; color: rgba(246, 246, 252, .92); }
.vc-facts b { display: block; color: #fff; }
.vc-copy .note { margin-top: 12px; }
.vc .src { grid-area: src; }
.vc-stage { grid-area: stage; display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; align-items: start; }
.vc-win { border-radius: 18px; background: #fff; color: #111; box-shadow: 0 40px 80px -30px rgba(10, 14, 60, .6); overflow: hidden; display: grid; }
.vc-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid #ececef; font-size: 13px; color: #8e8e94; }
.vc-bar b { color: #111; margin-right: 8px; }
.vc-thread { padding: 16px; display: grid; gap: 12px; font-size: 13px; }
.vc-me { justify-self: end; max-width: 85%; padding: 9px 14px; border-radius: 16px; background: #f1f1f4; }
.vc-ai { line-height: 1.6; }
.vc-orb-wrap { display: grid; justify-items: center; gap: 6px; padding: 12px 0 16px; }
.vc-orb { width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 30% 28%, #ffffff 0%, #e2e6ff 22%, #a7b0ff 55%, #7b6cf0 80%, #6b5ce8 100%); box-shadow: 0 0 0 18px rgba(167, 176, 255, .14), 0 0 0 40px rgba(167, 176, 255, .07); }
.page.in .vc-orb { animation: orb 2.4s var(--ease) infinite alternate; }
@keyframes orb { to { transform: scale(1.07); box-shadow: 0 0 0 26px rgba(167, 176, 255, .18), 0 0 0 54px rgba(167, 176, 255, .06); } }
.vc-orb-wrap p { font-size: 12px; color: #8e8e94; }
.vc-ctl { display: flex; align-items: center; gap: 8px; margin: 0 12px 12px; padding: 10px 12px; border-radius: 16px; box-shadow: 0 0 0 1px #e3e3e8; font-size: 12px; color: #a2a2a8; }
.vc-ctl span:first-child { flex: 1; }
.vc-ic { width: 28px; height: 28px; display: grid; place-items: center; color: #5d5d63; }
.vc-x { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #111; color: #fff; }
.vc-sort { display: grid; gap: 8px; }
.vc-h { font-size: .84rem; color: rgba(240, 242, 252, .85); }
.vc-q { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .92); color: #111; text-align: left; font-size: .88rem; transition: background-color .3s; }
.vc-q b { font-size: .78rem; opacity: 0; max-height: 0; transition: opacity .3s, max-height .3s; }
.vc-q[aria-expanded="true"] b { opacity: 1; max-height: 2em; }
.vc-q.voice { background: #e3f6ea; }
.vc-q.voice b { color: var(--ok); }
.vc-q.text { background: #fff3c4; }
.vc-q.text b { color: #8a6d12; }
.vc-take { margin-top: 6px; font-size: .88rem; font-weight: 600; }

/* ===== screen context ===== */
.vs { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); grid-template-areas: "copy desk" "src desk"; column-gap: clamp(28px, 4vw, 60px); align-items: start; }
.vs-copy { grid-area: copy; }
.vs .src { grid-area: src; }
.vs-desk { grid-area: desk; position: relative; height: min(500px, calc(100dvh - var(--top) - var(--bottom) - 80px)); min-height: 400px; border-radius: 22px; background: radial-gradient(ellipse at 30% 20%, #3a3f5c, #1a1c28 70%); overflow: hidden; }
.vs-w { position: absolute; width: 56%; border-radius: 12px; background: #fff; color: #111; text-align: left; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .6); transition: transform .5s var(--ease), box-shadow .4s, filter .4s, z-index 0s; overflow: hidden; filter: brightness(.7); z-index: 1; }
.vs-w[data-win="mail"] { left: 6%; top: 8%; transform: rotate(-2deg); }
.vs-w[data-win="notes"] { left: 36%; top: 14%; transform: rotate(2deg); }
.vs-w[data-win="page"] { left: 20%; top: 40%; transform: rotate(-1deg); }
.vs-desk[data-front="mail"] .vs-w[data-win="mail"], .vs-desk[data-front="notes"] .vs-w[data-win="notes"], .vs-desk[data-front="page"] .vs-w[data-win="page"] { z-index: 5; filter: none; transform: rotate(0) scale(1.04); box-shadow: 0 0 0 3px var(--mark), 0 0 0 10px rgba(255, 216, 77, .25), 0 30px 60px -14px rgba(0, 0, 0, .7); }
.vs-wbar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #f3f3f5; font-size: 11.5px; color: #6b6b72; }
.vs-wbar i { width: 9px; height: 9px; border-radius: 50%; background: #d9d9de; }
.vs-wbar span { margin-left: 6px; }
.vs-wbody { padding: 12px 14px; font-size: 12.5px; line-height: 1.6; display: grid; gap: 4px; }
.vs-wbody b { font-size: 13.5px; }
.vs-gap { margin: 10px 0; color: #c0392b; font-size: 11.5px; }
.vs-hidden { margin-top: 8px; padding-top: 6px; border-top: 1px dashed #d4d4d8; font-size: 11px; color: #8e8e94; }
.vs-desk[data-front] .vs-w:is([data-win]) .vs-hidden { opacity: .6; }
.vs-say { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 8; padding: 12px 16px; border-radius: 14px; background: rgba(12, 12, 14, .82); color: var(--on-ink); font-size: .9rem; font-weight: 600; backdrop-filter: blur(6px); }

/* ===== progress ===== */
.pg { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); grid-template-areas: "copy app" "prompt app" "src src"; column-gap: clamp(28px, 4vw, 60px); row-gap: 14px; align-items: start; }
.pg-copy { grid-area: copy; }
.pg > .prompt { grid-area: prompt; }
.pg .src { grid-area: src; }
.pg-rules { margin-top: 20px; display: grid; gap: 12px; }
.pg-rules li { font-size: .9rem; line-height: 1.65; color: var(--text-2); padding-left: 14px; border-left: 3px solid var(--mark); }
.pg-rules b { display: block; color: var(--text); }
.pg-app { grid-area: app; padding: 18px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgba(0, 0, 0, .4); display: grid; gap: 12px; }
.pg-feed { display: grid; gap: 4px; min-height: 230px; align-content: start; }
.pg-feed li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #f7f7f8; font-size: .9rem; animation: log-in .45s var(--ease); }
.pg-feed li span:nth-child(2) { flex: 1; }
.pg-feed code { font-size: .74rem; background: #e3f6ea; color: var(--ok); }
.pg-k { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: .74rem; font-weight: 700; background: #e6e6ea; flex: none; }
.pg-feed .k-edit .pg-k { background: var(--mark); }
.pg-feed .k-run .pg-k { background: #dfe5ff; color: #3548c8; }
.pg-feed .k-you { background: var(--ink); color: var(--on-ink); }
.pg-feed .k-you .pg-k { background: var(--mark); color: var(--ink); }
.pg-ask { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: #fff6dc; box-shadow: 0 0 0 1.5px #f0c419; animation: log-in .45s var(--ease); }
.pg-ask p { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .9rem; }
.pg-ask p span { color: #6b6b72; font-size: .82rem; }
.pg-ask div { display: flex; gap: 6px; }
.pg-comp { display: flex; gap: 8px; align-items: center; }
.pg-comp input { flex: 1; height: 40px; border-radius: 12px; border: 1px solid #d6d6dc; padding: 0 12px; font-size: .9rem; }
.pg-stop { background: var(--bad); color: #fff; }
.pg-stop .ic { width: 12px; height: 12px; }
.pg-say { font-size: .92rem; font-weight: 600; min-height: 2.6em; }
.page.stopped .pg-feed li { opacity: .6; }

/* ===== review (diff) ===== */
.rv { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr); grid-template-areas: "copy panel" "src panel"; column-gap: clamp(28px, 4vw, 60px); align-items: start; }
.rv-copy { grid-area: copy; }
.rv-task { margin-top: 20px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 216, 77, .1); font-size: .95rem; }
.rv-task span { display: block; font-size: .74rem; color: var(--mark); letter-spacing: .04em; }
.rv-how { margin-top: 14px; display: grid; gap: 8px; }
.rv-how li { display: grid; grid-template-columns: 6em 1fr; gap: 10px; font-size: .88rem; color: var(--on-ink-2); }
.rv-how b { font-family: var(--mono); color: var(--on-ink); font-weight: 500; }
.rv-copy .note { margin-top: 12px; }
.rv .src { grid-area: src; }
.rv-panel { grid-area: panel; padding: 16px; border-radius: 20px; background: #16161a; box-shadow: 0 0 0 1px var(--line-ink); display: grid; gap: 12px; }
.rv-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rv-diff { display: grid; gap: 10px; max-height: 360px; overflow: auto; }
.rv-file { border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--line-ink); }
.rv-file.mine { box-shadow: 0 0 0 1px rgba(168, 178, 255, .4); }
.rv-fn { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #202026; font: .8rem/1.4 var(--mono); }
.rv-fn span { margin-left: auto; font-family: var(--sans); font-size: .72rem; color: #a8b2ff; }
.rv-l { width: 100%; display: grid; grid-template-columns: 28px 1fr; text-align: left; font: .8rem/1.75 var(--mono); position: relative; }
.rv-l i { font-style: normal; text-align: center; opacity: .7; }
.rv-l code { background: none; padding: 0 8px 0 0; font-size: inherit; white-space: pre-wrap; word-break: break-all; }
.rv-l.add { background: rgba(46, 160, 67, .16); color: #b4f0c4; }
.rv-l.del { background: rgba(248, 81, 73, .14); color: #ffc2bd; }
.rv-l.ctx { color: var(--on-ink-muted); cursor: default; }
.rv-l.add:hover, .rv-l.del:hover { filter: brightness(1.25); }
.rv-l.flag { box-shadow: inset 4px 0 0 var(--mark); }
.rv-l.flag::after { content: "这处要问它"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 600 .68rem/1 var(--sans); padding: 4px 6px; border-radius: 5px; background: var(--mark); color: var(--ink); }
.rv-l.pulse { animation: pulse-row 1.2s var(--ease); }
@keyframes pulse-row { 30% { filter: brightness(1.8); } }
.rv-find { display: grid; gap: 6px; }
.rv-fh { font-size: .82rem; color: var(--on-ink-muted); }
.rv-f { text-align: left; padding: 10px 12px; border-radius: 10px; background: #202026; font-size: .86rem; color: var(--on-ink); box-shadow: inset 3px 0 0 var(--mark); transition: background-color .2s; }
.rv-f:hover { background: #2a2a31; }
.rv-f.seen { box-shadow: inset 3px 0 0 var(--ok); }
.rv-hint { font-size: .78rem; color: var(--on-ink-muted); }

/* ===== browser ===== */
.br { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); grid-template-areas: "copy stage" "prompt stage" "src src"; column-gap: clamp(28px, 4vw, 60px); row-gap: 14px; align-items: start; }
.br-copy { grid-area: copy; }
.br-copy .note { margin-top: 12px; }
.br > .prompt { grid-area: prompt; }
.br .src { grid-area: src; }
.br-stage { grid-area: stage; display: grid; gap: 12px; }
.br-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.br-tools .btn[aria-pressed="true"] { background: var(--mark); color: var(--ink); }
.br-frame { margin: 0 auto; width: 100%; transition: max-width .5s var(--ease); max-width: 100%; }
.br-frame[data-bwidth="phone"] { max-width: 330px; }
.br-page { position: relative; padding: 18px 20px; color: #111; display: grid; gap: 10px; }
.br-page h3 { font-size: 1.5rem; letter-spacing: -.02em; }
.br-frame[data-bwidth="phone"] .br-page h3 { font-size: 1.35rem; }
.br-page p { font-size: .88rem; color: #555; }
.br-page .mean-bars { height: 100px; }
.br-page .mean output { font-size: 1.6rem; }
.br-page .mean-eq, .br-page .mean-range { font-size: .72rem; }
.br-btn { justify-self: start; padding: 8px 16px; border-radius: 999px; background: #111; color: #fff; font-size: .84rem; }
.br-el { position: relative; border-radius: 8px; transition: box-shadow .2s; }
.annotating .br-el { cursor: crosshair; }
.annotating .br-el:hover { box-shadow: 0 0 0 2px #4c78f0; }
.br-el[data-pinned] { box-shadow: 0 0 0 2px var(--mark); }
.br-pin { position: absolute; left: -10px; top: -10px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--mark); color: var(--ink); font: 700 .72rem/1 var(--mono); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.br-notes { display: grid; gap: 6px; }
.br-notes li { display: grid; grid-template-columns: 24px 3em 1fr; gap: 8px; align-items: center; font-size: .86rem; animation: log-in .4s var(--ease); }
.br-notes b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--mark); font: 700 .72rem/1 var(--mono); }
.br-notes input { height: 34px; border-radius: 9px; border: 1px solid var(--line-2); padding: 0 10px; font-size: .86rem; background: var(--white); }
.br-out { font-size: .9rem; line-height: 1.65; }

/* ===== terminal ===== */
.tm { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); grid-template-areas: "copy stage" "src stage"; column-gap: clamp(28px, 4vw, 60px); align-items: start; }
.tm-copy { grid-area: copy; }
.tm-copy .note { margin-top: 12px; }
.tm-take { margin-top: 12px; font-weight: 600; }
.tm .src { grid-area: src; }
.tm-stage { grid-area: stage; display: grid; gap: 12px; }
.tm-win { border-radius: 14px; overflow: hidden; background: #0f1012; box-shadow: 0 0 0 1px var(--line-ink), 0 40px 80px -30px rgba(0, 0, 0, .9); font: .86rem/1.65 var(--mono); }
.tm-bar { display: flex; align-items: center; gap: 7px; padding: 10px 12px; background: #1b1c20; color: var(--on-ink-muted); font-family: var(--sans); font-size: .78rem; }
.tm-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3b40; }
.tm-bar span { margin-left: 8px; }
.tm-out { height: min(320px, 40vh); overflow: auto; padding: 14px 16px 4px; display: grid; align-content: start; gap: 1px; }
.tm-out p { white-space: pre-wrap; color: #d7d5cf; }
.tm-out .ok { color: #63d69b; }
.tm-out .bad { color: #ff8a80; }
.tm-out .dim { color: #85827a; }
.tm-out .codex { margin: 6px 0; padding: 8px 10px; border-radius: 8px; background: rgba(255, 216, 77, .1); color: var(--on-ink); font-family: var(--sans); }
.tm-out .codex b { color: var(--mark); }
.tm-ps { color: var(--mark); margin-right: 8px; }
.tm-in { display: flex; align-items: center; padding: 8px 16px 14px; }
.tm-in input { flex: 1; background: transparent; border: 0; outline: none; color: #fff; font: inherit; caret-color: var(--mark); }
.tm-cursor { display: inline-block; width: 8px; height: 1.1em; background: #d7d5cf; vertical-align: text-bottom; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.tm-try { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .82rem; color: var(--on-ink-muted); }
.tm-chip { font: .82rem/1 var(--mono); padding: 8px 12px; border-radius: 8px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-ink-2); color: var(--on-ink); }
.tm-chip:hover { box-shadow: inset 0 0 0 1px var(--mark); }

/* ===== skills ===== */
.sk { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); grid-template-areas: "copy stage" "take stage" "src src"; column-gap: clamp(28px, 4vw, 60px); align-items: start; }
.sk-copy { grid-area: copy; }
.sk-use { margin-top: 22px; display: grid; gap: 10px; }
.sk-h { font-size: .86rem; color: var(--muted); }
.sk-h b { display: block; color: var(--text); font-family: var(--mono); font-size: 1rem; }
.sk-comp { position: relative; }
.sk-comp input { width: 100%; height: 52px; border-radius: 16px; border: 0; box-shadow: 0 0 0 1px var(--line-2), 0 14px 30px -20px rgba(0, 0, 0, .35); padding: 0 18px; font: 1rem var(--mono); background: #fff; outline: none; }
.sk-comp input:focus { box-shadow: 0 0 0 2px var(--ink); }
.sk-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 4; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 20px 40px -14px rgba(0, 0, 0, .35); display: grid; }
.sk-list button { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 10px; }
.sk-list button:hover { background: #f4f4f6; }
.sk-list b { font: 600 .9rem/1.3 var(--mono); }
.sk-list span { font-size: .82rem; color: var(--muted); }
.sk-take { grid-area: take; margin-top: 16px; font-weight: 600; }
.sk .src { grid-area: src; }
.sk-stage { grid-area: stage; }
.sk-card { min-height: 280px; padding: 24px 26px; border-radius: 22px; background: #fffdf5; box-shadow: 0 0 0 1px rgba(160, 130, 40, .2), 0 30px 60px -36px rgba(120, 90, 0, .4); display: grid; align-content: start; gap: 10px; }
.sk-empty { color: var(--muted); margin: auto; }
.sk-name { font: 700 1.3rem/1.2 var(--mono); }
.sk-d { color: var(--text-2); }
.sk-card ol { display: grid; gap: 8px; counter-reset: k; margin-top: 6px; }
.sk-card li { counter-increment: k; display: flex; gap: 10px; align-items: baseline; font-size: .95rem; }
.sk-card li::before { content: counter(k); font: 600 .74rem/1 var(--mono); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--mark); flex: none; transform: translateY(4px); }
.sk-std { margin-top: 8px; font-size: .86rem; color: var(--muted); }
.sk-make { display: grid; gap: 8px; padding: 20px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgba(0, 0, 0, .4); }
.sk-f { display: grid; grid-template-columns: 7em 1fr; gap: 10px; align-items: center; font-size: .84rem; }
.sk-f input { height: 36px; border-radius: 9px; border: 1px solid var(--line-2); padding: 0 10px; font-size: .86rem; }
.sk-draft { margin: 6px 0 0; padding: 14px 16px; border-radius: 12px; background: #16161a; color: #e9e7e1; font: .8rem/1.75 var(--mono); white-space: pre-wrap; }

/* ===== plugins ===== */
.pl7 { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); grid-template-areas: "copy stage" "take stage" "src src"; column-gap: clamp(28px, 4vw, 60px); align-items: start; }
.pl7-copy { grid-area: copy; }
.pl7-steps li { padding: 12px 14px; border-radius: 14px; font-size: .9rem; line-height: 1.6; color: #3e4639; opacity: .5; transition: opacity .3s, background-color .3s; }
.pl7-steps b { display: block; color: var(--text); font-size: 1rem; }
.pl7[data-st="0"] .s0, .pl7[data-st="1"] .s1, .pl7[data-st="2"] .s2 { opacity: 1; background: #fbfcf9; box-shadow: 0 0 0 1px rgba(47, 58, 44, .1); }
.pl7-copy .note { margin-top: 12px; }
.pl7-take { grid-area: take; margin-top: 14px; font-weight: 600; }
.pl7 .src { grid-area: src; }
.pl7-stage { grid-area: stage; display: grid; gap: 14px; }
.pl7-box { position: relative; padding: 18px; border-radius: 22px; background: #fbfcf9; box-shadow: 0 0 0 1px rgba(47, 58, 44, .14), 0 30px 60px -36px rgba(30, 40, 20, .5); display: grid; gap: 14px; }
.pl7-lid { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center; padding-bottom: 14px; border-bottom: 1px dashed rgba(47, 58, 44, .25); }
.pl7-lid b { font-size: 1.15rem; }
.pl7-lid span { grid-row: 2; font-size: .8rem; color: #687163; }
.pl7-lid .btn { grid-row: 1 / 3; grid-column: 2; }
.pl7-in { display: flex; gap: 8px; flex-wrap: wrap; }
.pl7-item { padding: 10px 14px; border-radius: 12px; font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; transform: translateY(14px) scale(.96); opacity: .35; transition: transform .6s var(--spring), opacity .4s; }
.pl7-item.sk { background: #fff3c4; }
.pl7-item.cn { background: var(--ink); color: var(--on-ink); }
.pl7:not([data-st="0"]) .pl7-item { transform: none; opacity: 1; }
.pl7:not([data-st="0"]) .pl7-item:nth-child(2) { transition-delay: .08s; }
.pl7:not([data-st="0"]) .pl7-item:nth-child(3) { transition-delay: .16s; }
.pl7-perm { padding: 16px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); display: grid; gap: 8px; animation: log-in .5s var(--ease); }
.pl7-h { font-size: .84rem; color: #687163; }
.pl7-p { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #f6f7f4; font-size: .9rem; cursor: pointer; }
.pl7-p em { font-style: normal; font-size: .76rem; color: #8a9184; }
.pl7-perm .btn { justify-self: start; }
.pl7-say { font-weight: 600; min-height: 2.6em; }

/* ===== mcp ===== */
.mc { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); grid-template-areas: "copy stage" "take stage" "src src"; column-gap: clamp(28px, 4vw, 60px); align-items: start; }
.mc-copy { grid-area: copy; }
.mc-form { margin-top: 22px; display: grid; gap: 10px; padding: 18px; border-radius: 18px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-ink); }
.mc-h { font-size: .82rem; color: var(--on-ink-muted); }
.mc-f { display: grid; grid-template-columns: 3em 1fr; gap: 10px; align-items: center; font-size: .86rem; }
.mc-f input { height: 36px; border-radius: 9px; border: 1px solid var(--line-ink-2); background: var(--ink); color: var(--on-ink); padding: 0 10px; font: .86rem var(--mono); }
.mc-type button { font-size: .78rem; }
.mc-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-s { padding: 8px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-ink-2); font-size: .84rem; transition: background-color .3s, color .3s; }
.mc-s.done { background: #63d69b; color: var(--ink); box-shadow: none; }
.mc-copy .note { margin-top: 12px; }
.mc-take { grid-area: take; margin-top: 14px; font-weight: 600; }
.mc .src { grid-area: src; }
.mc-stage { grid-area: stage; display: grid; gap: 12px; }
.mc-wire { width: 100%; overflow: visible; }
.mc-path { fill: none; stroke: rgba(241, 239, 233, .25); stroke-width: 2; stroke-dasharray: 4 6; transition: stroke .5s; }
.mc-node circle { fill: var(--mark); }
.mc-node text { fill: var(--ink); font: 700 15px var(--sans); }
.mc-node.srv rect { fill: var(--ink-2); stroke: rgba(241, 239, 233, .35); stroke-width: 1.5; transition: stroke .4s, fill .4s; }
.mc-node.srv text { fill: var(--on-ink); font: 600 14px var(--mono); }
.mc-node.srv .mc-kind { fill: var(--on-ink-muted); font: 12px var(--sans); }
.mc-lab { fill: var(--on-ink-muted); font: 12px var(--sans); opacity: 0; transition: opacity .4s; }
.mc-pkt { opacity: 0; transition: opacity .4s; }
.mc-pkt.a { fill: var(--mark); }
.mc-pkt.b { fill: #63d69b; }
.mc-stage[data-on="4"] .mc-path, .mc-stage[data-on="5"] .mc-path { stroke: rgba(255, 216, 77, .55); stroke-dasharray: none; }
.mc-stage[data-on="4"] .mc-pkt, .mc-stage[data-on="5"] .mc-pkt, .mc-stage[data-on="4"] .mc-lab, .mc-stage[data-on="5"] .mc-lab { opacity: 1; }
.mc-stage[data-on="5"] .mc-node.srv rect { stroke: #63d69b; }
.mc-say { font-weight: 600; min-height: 2.6em; }
.mc-trouble { padding: 14px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-ink-2); }
.mc-trouble ol { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px 14px; counter-reset: m; font-size: .88rem; color: var(--on-ink-2); }
.mc-trouble li { counter-increment: m; }
.mc-trouble li::before { content: counter(m) " "; color: var(--mark); font-family: var(--mono); }

/* ===== hooks ===== */
.hk { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); grid-template-areas: "copy stage" "take stage" "src src"; column-gap: clamp(28px, 4vw, 60px); align-items: start; }
.hk-copy { grid-area: copy; }
.hk-copy .note { margin-top: 12px; }
.hk-take { grid-area: take; margin-top: 14px; font-weight: 600; }
.hk .src { grid-area: src; }
.hk-stage { grid-area: stage; display: grid; gap: 14px; padding: 22px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgba(0, 0, 0, .4); }
.hk-h { font-size: .86rem; color: var(--muted); }
.hk-line { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
.hk-line::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 21px; height: 3px; border-radius: 3px; background: var(--paper-3); }
.hk-slot { position: relative; width: 100%; display: grid; justify-items: center; gap: 8px; font-size: .84rem; }
.hk-slot i { width: 44px; height: 44px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px var(--paper-3); transition: all .3s var(--spring); }
.hk-slot[aria-pressed="true"] i { box-shadow: inset 0 0 0 2px var(--ink); background: var(--mark); }
.hk-slot[aria-pressed="true"] i::after { content: "检查"; position: absolute; left: 50%; top: -22px; transform: translateX(-50%); font: 600 .7rem/1 var(--sans); padding: 4px 6px; border-radius: 5px; background: var(--ink); color: var(--mark); white-space: nowrap; }
.hk-slot.now i { transform: scale(1.18); box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 8px rgba(255, 216, 77, .35); }
.hk-ctl { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.hk-trust { display: flex; gap: 8px; align-items: center; font-size: .88rem; }
.hk-log { min-height: 8.5em; padding: 12px 14px; border-radius: 14px; background: #16161a; color: #e9e7e1; font: .82rem/1.9 var(--mono); }
.hk-log:empty::before { content: "（点“跑一次任务”）"; color: #85827a; }
.hk-log p { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; animation: log-in .35s var(--ease); }
.hk-t { min-width: 6.5em; color: #85827a; }

/* ===== scheduled ===== */
.sd { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); grid-template-areas: "copy stage" "take stage" "src src"; column-gap: clamp(28px, 4vw, 60px); align-items: start; }
.sd-copy { grid-area: copy; }
.sd-vs { margin-top: 20px; display: grid; gap: 10px; padding: 16px 18px; border-radius: 16px; background: rgba(12, 14, 50, .24); }
.sd-vs p { display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; align-items: center; font-size: .92rem; }
.sd-bar { height: 10px; border-radius: 10px; background: #fff; }
.sd-dots { display: flex; justify-content: space-between; }
.sd-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--mark); }
.sd-steps li { color: rgba(246, 246, 252, .92); }
.sd-steps b { color: #fff; }
.sd-take { grid-area: take; margin-top: 14px; font-weight: 600; }
.sd .src { grid-area: src; }
.sd-stage { grid-area: stage; display: grid; gap: 12px; }
.sd-card { padding: 18px 20px; border-radius: 20px; background: #fff; color: #111; box-shadow: 0 30px 60px -30px rgba(10, 14, 60, .6); display: grid; gap: 4px; }
.sd-h { font-weight: 650; margin-bottom: 6px; }
.sd-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #f0f0f2; font-size: .9rem; flex-wrap: wrap; }
.sd-row span { color: #6b6b72; }
.sd-row .seg button { min-height: 30px; font-size: .8rem; }
.sd-weeks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sd-w { padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .92); color: #111; text-align: left; display: grid; gap: 4px; transition: background-color .3s; }
.sd-w b { font-size: .82rem; }
.sd-res { font-size: .8rem; color: var(--ok); font-weight: 600; }
.sd-w small { font-size: .7rem; color: #8e8e94; }
.sd-w[aria-pressed="true"] { background: rgba(255, 255, 255, .35); color: #fff; }
.sd-w[aria-pressed="true"] .sd-res { color: #ffd0d0; }
.sd-w[aria-pressed="true"] small { color: rgba(255, 255, 255, .7); }
.sd-say { font-weight: 600; min-height: 3em; }
.sd-stage .prompt textarea { min-height: 4.4em; }

@media (max-width: 1100px) {
  .dc, .vc, .vs, .pg, .rv, .br, .tm, .sk, .pl7, .mc, .hk, .sd { grid-template-columns: 1fr; grid-template-areas: none; }
  .dc > *, .vc > *, .vs > *, .pg > *, .rv > *, .br > *, .tm > *, .sk > *, .pl7 > *, .mc > *, .hk > *, .sd > * { grid-area: auto !important; }
}
@media (max-width: 760px) {
  .vc-stage { grid-template-columns: 1fr; }
  .vs-w { width: 78%; }
  .sd-weeks { grid-template-columns: 1fr 1fr; }
  .hk-line { grid-template-columns: 1fr 1fr; gap: 16px; }
  .hk-line::before { display: none; }
}