/* 模块 06 · 工作方式与成果 */

/* opener: four stations */
.opw { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; padding: 30px 0; position: relative; }
.opw::before { content: ""; position: absolute; left: 12%; right: 12%; top: calc(30px + 38px); height: 2px; background: rgba(241, 239, 233, .25); }
.opw li { position: relative; display: grid; justify-items: center; gap: 12px; }
.opw i { width: 76px; height: 76px; display: block; transition: transform .4s var(--spring), box-shadow .3s; }
.opw .o { border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(241, 239, 233, .5); background: radial-gradient(circle, transparent 46%, rgba(255, 216, 77, .7) 47% 52%, transparent 53%); }
.opw .b { border-radius: 14px; box-shadow: inset 0 0 0 2px rgba(241, 239, 233, .5); background: linear-gradient(transparent 70%, rgba(241, 239, 233, .25) 70% 74%, transparent 74%); }
.opw .s { border-radius: 8px; box-shadow: inset 0 0 0 2px rgba(241, 239, 233, .5), 8px 8px 0 -2px var(--ink), 8px 8px 0 0 rgba(241, 239, 233, .35); }
.opw .g { border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(241, 239, 233, .5); background: linear-gradient(90deg, transparent 48%, rgba(241, 239, 233, .35) 48% 52%, transparent 52%), linear-gradient(transparent 48%, rgba(241, 239, 233, .35) 48% 52%, transparent 52%); }
.opw span { font-size: .9rem; color: var(--on-ink-2); }
.op.hl-0 .opw li[data-hl="0"] i, .op.hl-1 .opw li[data-hl="1"] i, .op.hl-2 .opw li[data-hl="2"] i, .op.hl-3 .opw li[data-hl="3"] i { transform: scale(1.12); box-shadow: inset 0 0 0 2.5px var(--mark); }
.op.hl-0 .opw li[data-hl="0"] span, .op.hl-1 .opw li[data-hl="1"] span, .op.hl-2 .opw li[data-hl="2"] span, .op.hl-3 .opw li[data-hl="3"] span { color: var(--mark); }

/* ===== plan ===== */
.pn { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); grid-template-areas: "copy app" "prompt app" "prompt src"; column-gap: clamp(28px, 4vw, 60px); row-gap: 16px; align-items: start; }
.pn-copy { grid-area: copy; }
.pn-steps { margin-top: 20px; display: grid; gap: 6px; }
.pn-steps li { padding: 12px 14px; border-radius: 14px; font-size: .9rem; line-height: 1.6; color: var(--text-2); opacity: .5; transition: opacity .3s, background-color .3s; }
.pn-steps b { display: block; color: var(--text); font-size: 1rem; }
.pn[data-step="0"] .s0, .pn[data-step="1"] .s1, .pn[data-step="2"] .s2, .pn[data-step="3"] .s2 { opacity: 1; background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.pn-fix { margin-top: 10px; }
.pn > .prompt { grid-area: prompt; }
.pn > .prompt textarea { min-height: 4.6em; }
.pn .src { align-self: start; }
.pn .src { grid-area: src; }
.pn-app { grid-area: app; }
.pn-app .cx-app { height: min(560px, calc(100dvh - var(--top) - var(--bottom) - 60px)); min-height: 440px; display: flex; flex-direction: column; }
.pn-app .cx-body { flex: 1; min-height: 0; }
.pn-app .cx-main { padding: 14px 18px; gap: 10px; }
.pn-thread { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; }
.pn-msg.you { align-self: flex-end; max-width: 80%; padding: 8px 14px; border-radius: 14px 14px 4px 14px; background: #f1f1f4; font-size: 13px; }
.pn-q { display: grid; gap: 8px; font-size: 13.5px; animation: log-in .5s var(--ease); }
.pn-ans { display: flex; gap: 6px; flex-wrap: wrap; }
.pn-ans button { padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px #d6d6dc; font-size: 12.5px; background: #fff; transition: background-color .2s; }
.pn-ans button:hover:not(:disabled) { background: #fff3c4; box-shadow: inset 0 0 0 1px #f0c419; }
.pn-ans button.on { background: #111; color: #fff; box-shadow: none; }
.pn-ans button:disabled:not(.on) { opacity: .35; }
.pn-plan { padding: 14px 16px; border-radius: 14px; background: #fafaf7; box-shadow: 0 0 0 1px #ececef; font-size: 12.8px; line-height: 1.6; animation: log-in .5s var(--ease); display: grid; gap: 8px; }
.pn-ph { font-weight: 700; font-size: 13px; }
.pn-plan ol { display: grid; gap: 6px; }
.pn-plan li b { display: block; }
.pn-plan .btn { justify-self: start; }
.pn-go { font-weight: 600; color: var(--ok); }
.pn-comp { flex: none; }
.pn-cmd { padding: 1px 6px; border-radius: 5px; background: #e8ebff; color: #3548c8; font-family: var(--mono); font-size: 12px; }
.pn-mode { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 8px; background: #e8ebff; color: #3548c8; }
.pn-send { box-shadow: 0 0 0 3px rgba(255, 216, 77, .7); animation: spot-ping 2.2s var(--ease) infinite; }
.pn:not([data-step="0"]) .pn-send { animation: none; box-shadow: none; background: #d4d4d8; }

/* ===== goal ===== */
.gl { display: grid; grid-template-columns: minmax(300px, .95fr) minmax(0, 1.05fr); grid-template-areas: "copy run" "src run"; column-gap: clamp(28px, 4vw, 60px); align-items: start; }
.gl-copy { grid-area: copy; }
.gl-slots { margin-top: 22px; display: grid; gap: 8px; }
.gl-h { font-size: .84rem; color: var(--on-ink-muted); }
.gl-slot { display: grid; grid-template-columns: 7em 1fr; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; text-align: left; box-shadow: inset 0 0 0 1.5px var(--line-ink-2); transition: box-shadow .3s, background-color .3s; }
.gl-slot small { font-size: .78rem; color: var(--on-ink-muted); }
.gl-slot span { font-size: .95rem; transition: opacity .3s; }
.gl-slot[aria-pressed="false"] { box-shadow: inset 0 0 0 1.5px rgba(255, 106, 106, .6); border: 0; background: repeating-linear-gradient(-45deg, rgba(255, 106, 106, .06) 0 8px, transparent 8px 16px); }
.gl-slot[aria-pressed="false"] span { opacity: .3; text-decoration: line-through; }
.gl-slot[aria-pressed="true"] { background: rgba(255, 216, 77, .07); box-shadow: inset 0 0 0 1.5px rgba(255, 216, 77, .6); }
.gl-note { margin-top: 14px; }
.gl .src { grid-area: src; }
.gl-run { grid-area: run; display: grid; gap: 14px; justify-items: center; }
.gl-ring { position: relative; width: min(300px, 70%); }
.gl-ring svg { width: 100%; overflow: visible; }
.gl-track { fill: none; stroke: rgba(241, 239, 233, .14); stroke-width: 10; }
.gl-prog { fill: none; stroke: var(--mark); stroke-width: 10; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 110px 110px; transition: stroke .3s; }
.gl-ring.endless .gl-prog { stroke: #ff7a7a; }
.gl-ring text { fill: var(--on-ink-2); font-size: 13px; font-family: var(--sans); paint-order: stroke; stroke: var(--ink); stroke-width: 6px; }
.gl-dot { fill: #fff; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .8)); }
.gl-count { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.gl-count b { font-family: var(--display); font-size: 3.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.gl-count span { font-size: .84rem; color: var(--on-ink-muted); }
.gl-ctl { display: flex; gap: 10px; }
.gl-ctl .btn.ghost { color: var(--on-ink); }
.gl-say { min-height: 3em; text-align: center; font-weight: 600; max-width: 30em; }
.gl-run .prompt { width: 100%; }
.gl-run .prompt textarea { min-height: 4.6em; }

/* ===== goal controls ===== */
.gc7 { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); grid-template-areas: "copy stage" "src stage"; column-gap: clamp(28px, 4vw, 60px); align-items: start; }
.gc7-copy { grid-area: copy; }
.gc7-why { margin-top: 22px; display: grid; gap: 8px; padding: 18px; border-radius: 18px; background: rgba(12, 14, 50, .24); backdrop-filter: blur(6px); }
.gc7-h { font-size: .82rem; color: rgba(240, 242, 252, .8); }
.gc7-r { display: grid; grid-template-columns: 5.5em 1fr; gap: 10px; font-size: .9rem; }
.gc7-r b { color: var(--mark); }
.gc7-note { margin-top: 6px; font-size: .88rem; font-weight: 600; }
.gc7 .src { grid-area: src; }
.gc7-stage { grid-area: stage; display: grid; gap: 14px; }
.gc7-box { padding: 14px; border-radius: 22px; background: #fff; color: #111; box-shadow: 0 40px 80px -30px rgba(10, 14, 60, .6); display: grid; gap: 8px; }
.gc7-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; box-shadow: 0 0 0 1px #e6e6ea; font-size: 13px; transition: opacity .3s; }
.gc7-state { font-weight: 700; white-space: nowrap; }
.gc7-box[data-gstate="pause"] .gc7-state { color: #a75f00; }
.gc7-goal { flex: 1; min-width: 0; color: #5d5d63; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc7-time { font: 12px/1 var(--mono); color: #8e8e94; font-variant-numeric: tabular-nums; }
.gc7-b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #45454b; }
.gc7-b:hover { background: #f2f2f4; }
.gc7-box[data-gstate="gone"] .gc7-row { opacity: .4; }
.gc7-edit { display: flex; gap: 8px; }
.gc7-edit input { flex: 1; height: 36px; border-radius: 10px; border: 1px solid #d6d6dc; padding: 0 12px; font-size: .9rem; }
.gc7-box .cx-composer { background: transparent; }
.gc7-ar { color: #3548c8; }
.gc7-sep { width: 1px; height: 16px; background: #e3e3e8; margin: 0 2px; }
.gc7-say { font-size: 1rem; font-weight: 600; min-height: 2.8em; }
.gc7-how { display: grid; gap: 10px; counter-reset: g; }
.gc7-how li { padding-left: 32px; position: relative; font-size: .9rem; line-height: 1.6; counter-increment: g; color: rgba(246, 246, 252, .92); }
.gc7-how li::before { content: counter(g); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #111; font: 600 .72rem/1 var(--mono); }
.gc7-how b { display: block; color: #fff; }
.gc7-ref { justify-self: start; font-size: .82rem; text-decoration: underline; color: rgba(246, 246, 252, .85); }

/* ===== where it runs (shared scene) ===== */
.wr { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr); grid-template-areas: "copy stage" "prompt stage" "src src"; column-gap: clamp(28px, 4vw, 60px); row-gap: 14px; align-items: start; }
.wr-copy { grid-area: copy; }
.wr > .prompt { grid-area: prompt; }
.wr .src { grid-area: src; }
.wr-steps { margin-top: 20px; display: grid; gap: 12px; counter-reset: w; }
.wr-steps li { padding-left: 34px; position: relative; font-size: .9rem; line-height: 1.65; color: var(--text-2); counter-increment: w; }
.wr-steps li::before { content: counter(w); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 600 .74rem/1 var(--mono); }
.wr-steps b { display: block; color: var(--text); font-size: 1rem; }
.wr-take { margin-top: 14px; font-weight: 600; }
.wr-stage { grid-area: stage; display: grid; gap: 14px; position: relative; }
.wr-menu { display: flex; align-items: flex-end; gap: 14px; }
.wr-menu .cx-menu { min-width: 200px; }
.wr-wt { display: flex; align-items: center; gap: 8px; font-size: .86rem; padding: 10px 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.wr-wt small { color: var(--muted); font-size: .76rem; }
.wr-box { width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px #b9b9c0; }
.wh { position: relative; display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto; gap: 14px; view-transition-name: where-scene; }
.wh-lbl { font-size: .86rem; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.wh-laptop { grid-row: 1 / 3; min-height: 300px; padding: 20px; border-radius: 18px 18px 6px 6px; background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 0 0 10px var(--paper-2), 0 30px 50px -30px rgba(0, 0, 0, .4); display: grid; gap: 10px; align-content: start; transition: box-shadow .5s, opacity .5s; }
.wh-folder { padding: 14px 16px; border-radius: 14px; background: var(--paper); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; transition: all .5s var(--ease); }
.wh-folder b { width: 100%; display: flex; align-items: center; gap: 6px; font: 600 .95rem/1.2 var(--mono); }
.wh-folder .f { font: .82rem/1 var(--mono); padding: 7px 9px; border-radius: 6px; background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.wh-folder .f.ign { opacity: .6; border: 1px dashed var(--line-2); box-shadow: none; }
.wh-folder .f.miss { color: var(--bad); background: transparent; box-shadow: none; border: 1px dashed rgba(223, 71, 71, .5); }
.wh-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.wh-tools span { font-size: .82rem; padding: 6px 10px; border-radius: 999px; background: var(--paper-2); }
.wh-cloud { padding: 20px; border-radius: 28px; min-height: 170px; background: linear-gradient(160deg, #eef1ff, #dfe5ff); box-shadow: 0 0 0 1px rgba(76, 91, 216, .2); transition: opacity .5s, box-shadow .5s; }
.wh-env { display: flex; gap: 6px; flex-wrap: wrap; }
.wh-env span { font-size: .86rem; padding: 8px 12px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(76, 91, 216, .2); }
.wh-bounce { margin-top: 12px; font-size: .86rem; color: #4c5bd8; opacity: 0; transition: opacity .4s; }
.wh-phone { padding: 16px; border-radius: 22px; background: var(--ink); color: var(--on-ink); width: 150px; font-size: .9rem; transition: opacity .5s; }
.wh-phone .wh-lbl { color: var(--on-ink-muted); }
.wh-link { position: absolute; display: none; }
/* focus per page */
.wh .wh-folder.wt { display: none; }
.wh[data-focus="local"] .wh-cloud { opacity: .35; }
.wh[data-focus="local"] .wh-laptop { box-shadow: 0 0 0 2px var(--ink), 0 0 0 10px var(--paper-2), 0 30px 50px -30px rgba(0, 0, 0, .4); }
.wh[data-focus="local"] .wh-folder.main { background: #fff6cf; }
.wh[data-focus="local"] .wh-folder.main .f:nth-child(2) { animation: file-edit 2.4s var(--ease) infinite; }
@keyframes file-edit { 0%, 100% { box-shadow: 0 0 0 1px var(--line); } 50% { box-shadow: 0 0 0 2px var(--mark); background: #fffbe8; } }
.wh[data-focus="cloud"] .wh-laptop { opacity: .5; }
.wh[data-focus="cloud"] .wh-phone { opacity: .3; }
.wh[data-focus="cloud"] .wh-cloud { box-shadow: 0 0 0 2px #4c5bd8, 0 24px 40px -24px rgba(76, 91, 216, .6); }
.wh[data-focus="cloud"] .wh-bounce { opacity: 1; }
.wh[data-focus="cloud"] .wh-tools span { text-decoration: line-through; text-decoration-color: rgba(76, 91, 216, .6); }
.wh[data-focus="worktree"] .wh-cloud, .wh[data-focus="worktree"] .wh-phone { opacity: .3; }
.wh[data-focus="worktree"][data-wt="made"] .wh-folder.wt { display: flex; background: #e3f6ea; box-shadow: 0 0 0 2px var(--ok); animation: log-in .6s var(--ease); }
.wh[data-focus="worktree"][data-wt="made"] .wh-folder.wt .f:nth-child(3) { box-shadow: 0 0 0 2px var(--ok); }
.wh[data-focus="worktree"][data-wt="opts"] .wh-folder.main { box-shadow: 0 0 0 2px var(--mark); }
.wr-env { padding: 16px; border-radius: 18px; background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.wr-h { font-size: .82rem; color: var(--muted); margin-bottom: 8px; }
.wr-envsteps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wr-envsteps li { display: flex; align-items: center; gap: 6px; }
.wr-envsteps li + li::before { content: "→"; color: var(--faint); }
.wr-envsteps button[data-env] { padding: 8px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: .86rem; transition: background-color .2s; }
.wr-envsteps button[aria-pressed="true"] { background: var(--ok); color: #fff; box-shadow: none; }
.wr-esay { margin-top: 10px; font-size: .9rem; font-weight: 600; min-height: 1.6em; }
.wr-flow { margin-top: 20px; display: grid; gap: 12px; justify-items: start; }
.wr-check { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--white); box-shadow: 0 0 0 1px var(--line); font-size: .95rem; cursor: pointer; }
.wr-check input { width: 18px; height: 18px; }
.wr-opts { display: grid; gap: 6px; padding: 12px 16px; border-radius: 14px; background: var(--paper-2); font-size: .88rem; opacity: .4; transition: opacity .3s; }
.wr[data-wt="1"] .wr-opts, .wr[data-wt="2"] .wr-opts { opacity: 1; }
.wr-opts p { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.wr-opts b { font-family: var(--mono); font-size: .84rem; padding: 2px 8px; border-radius: 6px; background: var(--white); }
.wr-opts small { width: 100%; color: var(--muted); }
.wr-wsay { font-size: .9rem; font-weight: 600; min-height: 3em; }

/* ===== handoff ===== */
.ho { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); grid-template-areas: "copy stage" "src stage"; column-gap: clamp(28px, 4vw, 60px); align-items: start; }
.ho-copy { grid-area: copy; }
.ho-list { margin-top: 22px; display: grid; gap: 6px; }
.ho-h { font-size: .84rem; color: var(--muted); margin-bottom: 4px; }
.ho-c { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: var(--white); box-shadow: 0 0 0 1px var(--line); font-size: .92rem; cursor: pointer; }
.ho-c input { width: 17px; height: 17px; }
.ho-c:has(input:checked) { background: #e3f6ea; box-shadow: 0 0 0 1px rgba(35, 149, 95, .4); }
.ho-list .note { margin-top: 6px; }
.ho .src { grid-area: src; }
.ho-stage { grid-area: stage; display: grid; gap: 14px; }
.ho-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ho-lane { position: relative; height: 96px; padding: 12px 14px; border-radius: 16px; background: var(--paper-2); }
.ho-lane b { font-size: .86rem; }
.ho-lane.lo { background: #fff6cf; }
.ho-thing { position: absolute; left: 14px; bottom: 12px; padding: 8px 12px; border-radius: 10px; background: var(--ink); color: var(--mark); font-size: .84rem; transition: transform 1s var(--spring); }
.ho[data-ho="1"] .ho-thing { transform: translateX(calc(100% + 120px)); }
.ho-dlg { justify-self: center; width: min(400px, 100%); padding: 22px; border-radius: 20px; background: #fff; color: #111; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 30px 60px -30px rgba(0, 0, 0, .45); display: grid; gap: 10px; }
.ho-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; box-shadow: 0 0 0 1px #e3e3e8; }
.ho-t { font-size: 1.1rem; font-weight: 650; }
.ho-d { font-size: .82rem; color: #6b6b72; line-height: 1.6; }
.ho-d code { font-size: .74rem; background: #f1f1f4; color: #111; }
.ho-dd { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border-radius: 6px; background: #f1f1f4; color: #111; font-weight: 600; }
.ho-dd .ic { width: 11px; height: 11px; }
.ho-go { height: 42px; border-radius: 12px; background: #111; color: #fff; font-weight: 600; font-size: .9rem; transition: opacity .2s; }
.ho-go:disabled { opacity: .3; }
.ho-conf { display: flex; gap: 8px; align-items: center; font-size: .84rem; color: var(--muted); }
.ho-say { font-size: .95rem; font-weight: 600; min-height: 3em; }
.ho-err { display: block; color: var(--bad); }

/* ===== space ===== */
.sc { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); grid-template-areas: "copy win" "src win"; column-gap: clamp(28px, 4vw, 60px); align-items: start; }
.sc-copy { grid-area: copy; }
.sc-not { margin-top: 22px; display: grid; gap: 6px; }
.sc-not p { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--white); box-shadow: 0 0 0 1px var(--line); font-size: .88rem; }
.sc-not p:first-child { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.sc-not b { font-size: .92rem; }
.sc-copy .note { margin-top: 12px; }
.sc .src { grid-area: src; }
.sc-win { grid-area: win; padding: 22px 24px; border-radius: 20px; background: #fff; color: #111; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgba(0, 0, 0, .4); display: grid; gap: 14px; }
.sc-head { display: flex; align-items: center; gap: 10px; }
.sc-head p { font-size: 1.4rem; font-weight: 600; margin-right: auto; }
.sc-search { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; box-shadow: 0 0 0 1px #e3e3e8; font-size: .82rem; color: #8e8e94; }
.sc-new { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 14px; border-radius: 999px; background: #111; color: #fff; font-size: .84rem; }
.sc-new .ic { width: 12px; height: 12px; }
.sc-tabs { display: flex; gap: 2px; }
.sc-tabs button { padding: 7px 12px; border-radius: 999px; font-size: .84rem; color: #45454b; }
.sc-tabs button[aria-pressed="true"] { background: #f1f1f4; color: #111; font-weight: 600; }
.sc-table { display: grid; }
.sc-th { display: flex; justify-content: space-between; font-size: .76rem; color: #8e8e94; padding: 6px 4px; border-bottom: 1px solid #ececef; }
.sc-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid #f2f2f4; text-align: left; font-size: .9rem; transition: background-color .2s; }
.sc-row:hover { background: #fafafa; }
.sc-row .ic { width: 26px; height: 26px; padding: 5px; border-radius: 7px; box-shadow: 0 0 0 1px #e3e3e8; }
.sc-row[data-kind="page"] .ic { color: #4c78f0; }
.sc-row[data-kind="file"] .ic { color: #d24ba0; }
.sc-row span { display: flex; align-items: center; gap: 6px; }
.sc-sh .ic { width: 16px; height: 16px; padding: 0; box-shadow: none; color: #8e8e94; }
.sc-row em { font-style: normal; font-size: .8rem; color: #8e8e94; }
.sc-peek { min-height: 7em; padding: 14px 16px; border-radius: 14px; background: #fafaf7; box-shadow: 0 0 0 1px #ececef; font-size: .9rem; }
.sc-pk { font: 600 .72rem/1 var(--mono); color: #8e8e94; letter-spacing: .06em; }
.sc-peek h3 { margin-top: 6px; font-size: 1.05rem; }
.sc-peek p { margin-top: 4px; }
.sc-share { display: flex; align-items: center; gap: 6px; color: #6b6b72; font-size: .84rem; }
.sc-psay { color: #6b6b72; }

/* ===== new page: before / after ===== */
.np { 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: 16px; align-items: start; }
.np-copy { grid-area: copy; }
.np > .prompt { grid-area: prompt; }
.np .src { grid-area: src; }
.np-steps { margin-top: 20px; display: grid; gap: 12px; }
.np-steps li { font-size: .9rem; line-height: 1.65; color: var(--text-2); padding-left: 14px; border-left: 3px solid var(--mark); }
.np-steps b { display: block; color: var(--text); font-size: 1rem; }
.np-stage { grid-area: stage; display: grid; gap: 12px; }
.np-page { --k: 0; position: relative; height: 400px; padding: 26px 30px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgba(0, 0, 0, .4); overflow: hidden; }
.np-title { font-size: 1.4rem; font-weight: 650; margin-bottom: 14px; }
.np-raw, .np-done { position: absolute; left: 30px; right: 30px; top: 78px; transition: opacity .3s; }
.np-raw { opacity: calc(1 - var(--k) * 1.6); display: grid; gap: 8px; }
.np-raw p { font: .86rem/1.5 var(--mono); color: #444; transform: rotate(calc((1 - var(--k)) * -.6deg)); }
.np-raw p:nth-child(even) { margin-left: 18px; transform: rotate(calc((1 - var(--k)) * .5deg)); }
.np-done { opacity: calc(var(--k) * 1.6 - .6); display: grid; gap: 4px; }
.np-done h4 { margin-top: 8px; font-size: .78rem; letter-spacing: .06em; color: var(--muted); }
.np-done h4:first-child { margin-top: 0; }
.np-done p { font-size: .95rem; display: flex; justify-content: space-between; gap: 12px; }
.np-done small { font: .74rem/1.6 var(--mono); color: var(--muted); }
.np-done .np-q { color: #a75f00; }
.np-bar { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; font-size: .84rem; color: var(--muted); }

/* ===== share ===== */
.sh { 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; }
.sh-copy { grid-area: copy; }
.sh-ctl { margin-top: 22px; display: grid; gap: 10px; justify-items: start; }
.sh-h { font-size: .8rem; color: var(--muted); }
.sh-say { margin-top: 18px; font-weight: 600; min-height: 3em; }
.sh .src { grid-area: src; }
.sh-stage { grid-area: stage; display: grid; gap: 16px; }
.sh-space { padding: 18px; border-radius: 22px; background: var(--paper-2); box-shadow: inset 0 0 0 2px transparent; }
.sh-name { display: flex; align-items: center; gap: 8px; font-weight: 650; margin-bottom: 12px; }
.sh-pages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sh-page { position: relative; aspect-ratio: .78; padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line); display: flex; flex-direction: column; justify-content: space-between; font-size: .84rem; transition: box-shadow .35s, transform .35s var(--ease); }
.sh-page.me { box-shadow: 0 0 0 2px var(--ink); }
.sh-who { font-size: .74rem; color: var(--muted); }
.sh-page.exp { transform: translateY(-4px); box-shadow: 0 0 0 2px #4c78f0, 0 14px 24px -14px rgba(76, 120, 240, .6); }
.sh-page.exp .sh-who { color: #4c78f0; font-weight: 600; }
.sh-page.edit { box-shadow: 0 0 0 2px var(--amber), 0 14px 24px -14px rgba(228, 138, 27, .6); }
.sh-page.edit .sh-who { color: #a75f00; }
.sh-create { justify-self: start; width: min(440px, 100%); padding: 18px 20px; border-radius: 18px; background: #fff; color: #111; box-shadow: 0 0 0 1px var(--line), 0 24px 50px -30px rgba(0, 0, 0, .4); display: grid; gap: 10px; }
.sh-ct { font-weight: 650; }
.sh-input { padding: 10px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px #b9b9c0; color: #9a9aa0; font-size: .88rem; }
.sh-inv { display: flex; align-items: center; gap: 4px; font-size: .84rem; color: #6b6b72; }
.sh-btns { display: flex; justify-content: flex-end; gap: 8px; font-size: .84rem; }
.sh-btns span { padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px #e3e3e8; }
.sh-btns .dim { color: #b3b3b8; background: #f6f6f8; box-shadow: none; }
.sh-last { font-size: .9rem; font-weight: 600; }

/* ===== sites (shared pipeline) ===== */
.ss { display: flex; flex-direction: column; }
.sp-pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; view-transition-name: sites-pipe; }
.sp-pipe li { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--paper-2); font-size: .9rem; color: var(--muted); }
.sp-pipe li b { font: 600 .74rem/1 var(--mono); }
.sp-pipe li.done { background: #e3f6ea; color: var(--ok); }
.sp-pipe li.now { background: var(--ink); color: var(--paper); }
.sp-pipe li.now b { color: var(--mark); }
.ss-grid { margin-top: 18px; display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
.ss-where { margin-top: 18px; display: grid; gap: 8px; font-size: .9rem; }
.ss-where p { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ss-where b { min-width: 4em; }
.ss-lab { display: grid; gap: 14px; }
.ss-net { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; align-items: center; }
.ss-me > b { display: block; font-size: .84rem; margin-bottom: 6px; }
.ss-mini { padding: 14px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-items: end; height: 120px; }
.ss-mini p { grid-column: 1 / -1; font-size: .78rem; font-weight: 600; align-self: start; }
.ss-mini i { background: #e2e2e7; border-radius: 3px 3px 0 0; height: 20px; }
.ss-mini i:nth-of-type(2) { height: 28px; } .ss-mini i:nth-of-type(3) { height: 34px; } .ss-mini i:nth-of-type(4) { height: 40px; } .ss-mini i:nth-of-type(5) { height: 56px; background: var(--mark); }
.ss-others { display: grid; gap: 8px; }
.ss-o { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--white); box-shadow: 0 0 0 1px var(--line); font-size: .88rem; }
.ss-can { font-size: .78rem; font-weight: 600; }
.ss-net[data-host-on="local"] .ss-can { color: var(--bad); }
.ss-net[data-host-on="web"] .ss-can { color: var(--ok); }
.ss-net[data-host-on="local"] .ss-can:empty::before { content: "打不开"; }
.ss-say { font-weight: 600; min-height: 3em; }
.ss-foot { margin-top: 18px; display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
.ss-tell { font-size: .9rem; line-height: 1.65; color: var(--text-2); }
.ss-tell b { display: block; color: var(--text); }
.ss-steps { margin-top: 18px; display: grid; gap: 10px; }
.ss-steps li { font-size: .9rem; line-height: 1.6; padding-left: 14px; border-left: 3px solid var(--mark); color: var(--text-2); }
.ss-steps b { display: block; color: var(--text); }
.ss-copy .note { margin-top: 12px; }
.ss-qa { position: relative; }
.ss-frame { width: var(--w, 100%); max-width: 100%; position: relative; transition: width .4s var(--ease); }
.ss-handle { position: absolute; right: -10px; top: 50%; width: 14px; height: 60px; margin-top: -30px; border-radius: 8px; background: var(--ink); cursor: ew-resize; box-shadow: 0 0 0 3px var(--paper); }
.ss-page { padding: 14px 16px; color: #111; }
.ss-ptitle { font-weight: 700; font-size: .95rem; margin-bottom: 8px; }
.ss-img { height: 64px; border-radius: 10px; background: linear-gradient(135deg, #ffe7a1, #ffd84d); display: grid; place-items: center; font-size: .74rem; color: #8a6d12; margin-bottom: 10px; }
.ss-page[data-broken="1"] .ss-img { background: #f6f6f8; box-shadow: inset 0 0 0 1.5px #d6d6dc; color: #9a9aa0; }
.ss-page[data-broken="1"] .ss-img span::before { content: "（图片没加载出来）"; }
.ss-page[data-broken="1"] .ss-img span { font-size: 0; }
.ss-page[data-broken="1"] .ss-img span::before { font-size: .74rem; }
.ss-page .mean output { font-size: 1.6rem; }
.ss-page .mean-bars { height: 90px; }
.ss-page .mean-eq, .ss-page .mean-range { font-size: .72rem; }
.ss-tools { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ss-found { display: flex; gap: 16px; flex-wrap: wrap; font-size: .88rem; }
.ss-save { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ss-ver { display: flex; gap: 8px; align-items: center; font-size: .9rem; }
.ss > .prompt { margin-top: 16px; }
.ss-pr { margin-top: 14px; }
.ss-pr .prompt textarea { min-height: 4.4em; }
.dp-gates { margin-top: 20px; display: grid; gap: 8px; }
.dp-g { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--white); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.dp-g input { width: 18px; height: 18px; flex: none; }
.dp-g span { display: grid; font-size: .84rem; color: var(--muted); }
.dp-g b { color: var(--text); font-size: .95rem; }
.dp-g.scope { flex-wrap: wrap; cursor: default; }
.dp-g:has(input:checked) { background: #e3f6ea; }
.dp-btn { margin-top: 14px; }
.dp-check { padding: 18px; border-radius: 20px; background: var(--white); box-shadow: 0 0 0 1px var(--line); display: grid; gap: 12px; }
.dp-h { font-size: .84rem; color: var(--muted); }
.dp-people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dp-p { padding: 16px 12px; border-radius: 14px; background: var(--paper); display: grid; gap: 6px; justify-items: center; font-size: .9rem; transition: background-color .3s, box-shadow .3s; }
.dp-check[data-dp="0"] .dp-p { opacity: .45; }
.dp-p.ok { background: #e3f6ea; }
.dp-p.no { background: #fdeaea; }
.dp-p.ok .dp-res { color: var(--ok); font-weight: 700; }
.dp-p.no .dp-res { color: var(--bad); font-weight: 700; }
.dp-p.checked { box-shadow: 0 0 0 2px var(--ink); }
.dp-say { font-weight: 600; min-height: 1.6em; }
.dp-fail { font-size: .88rem; line-height: 1.65; color: var(--text-2); }
.dp-fail b { display: block; color: var(--text); }
.ss-take { margin-top: 18px; font-size: 1.05rem; font-weight: 650; }

@media (max-width: 1100px) {
  .pn, .gl, .gc7, .wr, .ho, .sc, .np, .sh { grid-template-columns: 1fr; grid-template-areas: none; }
  .pn > *, .gl > *, .gc7 > *, .wr > *, .ho > *, .sc > *, .np > *, .sh > * { grid-area: auto !important; }
  .ss-grid, .ss-foot { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .opw { grid-template-columns: 1fr 1fr; }
  .wh { grid-template-columns: 1fr; }
  .wh-laptop { grid-row: auto; }
  .sp-pipe { grid-template-columns: 1fr 1fr; }
  .sh-pages { grid-template-columns: 1fr 1fr; }
  .ss-net { grid-template-columns: 1fr; }
  .dp-people { grid-template-columns: 1fr; }
  .ho-lanes { grid-template-columns: 1fr; }
  .ho[data-ho="1"] .ho-thing { transform: translateY(calc(100% + 60px)); }
}

@media (max-width: 760px) {
  .gc7-stage, .sh-stage { grid-template-columns: minmax(0, 1fr); }
  .gc7-row { flex-wrap: wrap; }
  .gc7-goal { white-space: normal; flex-basis: 100%; order: 3; }
  .gc7-box .cx-cbot { flex-wrap: wrap; }
  .sh-space, .sh-create { min-width: 0; }
}